Raspberry Pi Project Build #1 - Controlling the Hardware Remotely With Socket.IO

So, I started last week on my raspberry pi project. I had not received my Raspberry Pi yet, so I first started figuring out how might I be able to accomplish having a web app that sends messages to the pi from OUTSIDE my local network. My initial thought was building a front-end in React/React Native with a Ruby on Rails API backend that would control the pi. I quickly realized in some internet research that a RoR backend would not be optimal, mainly because there was already a library in Python for controlling the UnicornHat LED board. So, it was in my best interest to write the pi's software in Python, even though I have no experience in Python. I would still keep the frontend in React & React native.

With that kinda worked out, I next focused on figuring out how I was going to send messages from outside the local network to the pi. The main goal of this project was that I wanted to make a fun, interactive lightboard where friends across the world could send me so pixel art that would pop up in my living room. So much of the raspberry tutorials and info focused on controlled a LED or lights while on the local network or it only interacted through GET requests to well-known APIs like twitter or gmail. I needed to send POST requests to the pi.

I started looking and couldn't find a lot of helpful info that was applicable to my project. I had heard of websockets, but hadn't used them before in any project. I started wondering if possibly that could work for me. Luckily, I found this wonderful video where someone created a server and clients using SocketIO and javascript to turn on an LED on a raspberry pi. It was kinda a mind shift for me to think of the RPi as a client, since, for some reason, I wasn't even imagining having a separate server to handle all of the requests/messages and the Pi AND the mobile/web apps being clients. After I thought a bit about it though, it made a lot of sense. I looked into if there was a python socketIO client library... and there was! So my plan was to follow similarly what I saw in the video and implement the following:

• Create a simple Express server (javascript) that connects to clients and relays socket messages.
• Create a javascript client on the server for testing the server.
• Create a python client and make sure it receives socket messages from the server.
• Create a react-native app using ExponentJS with a button just to see if it works. Make sure it connects to server and sends messages.

Project diagram showing SocketIO communication flow.

I spent my first day working on this. Surprisingly, this went pretty smoothly even though everything I was doing was basically new to me (especially the figuring out python part). I was able to get the server going locally and relaying messages to a bare bones python client and JS client on the server!

I got the python client connected and receiving messages from server!

I also went ahead and deployed my server to heroku and updated the configuration of the clients. After getting it to work, I created another client using ExponentJS and React Native. Honestly, after setting up 1 client, the process is almost identical in the other clients, minus the differences in the languages, of course.

Using exponentJS XDE, I have a React Native client also working with the server and other client!

I was pleasantly surprised that, at the end of the first build day, I had a server and the raspberry pi and react native clients communicating with each other. I really was expecting to struggle with this for days.

As I still hadn't received my raspberry pi yet, I decided that my next step would be change the client on the server, which was just html and jQuery over to React.

CS50x & a Raspberry Pi Art Project

Since my last blog post, I decided to finally try Harvard's Intro to Computer Science course (CS50) that is available to take for free through EdX. The course consists of 12 weeks of lectures, 9 problem sets and a final independent project.  Watching the lectures and working through the problem sets is a definite time commitment, especially as the coursework progresses it gets much more challenging.

During the past month I've been going through a very stressful period so I've found this course to be a great escape for me. I have thrown myself into the coursework and have been working intensely on getting through all 9 problem sets. I've learned C by solving problems using different sorting algorithms, different types of data structures, allocating memory, recovering 'lost' jpeg images from a data file, implementing a spellchecker and a web server ...all in C. I even wrote PHP for the first time to complete the last few assignments. It was nice to see that the things I'd learned as a Ruby on Rails dev were transferable when I was working in a unfamiliar language like PHP. To me, it made me feel like a real programmer. Though the language's syntax is different, the underlining principles and problem solving strategies are pretty universal. It's just really an adjustment to the syntax of the language. So I was able to jump into a PHP project, without any background in the language and get through the tasks relatively simply.

Last week, I finished all the problem sets, I just started on my final project. For this project, you have complete freedom to choose to write any kind of software that you want. I knew I wanted to do something artistic, interactive and with language(s) outside my comfort zone. I drew inspiration from a few places-- the current exhibit of Jean Tinguely's art at the Stedelijk Museum, an interest in learning about Raspberry Pis (and maker culture), and recent attendance at a React Native meetup.

My original idea was a Tinguely-inspired wall installation with EL wire, leds, motors that were connected to a raspberry pi that could be controlled/interacted remotely by a user with a mobile app. As I researched more about hardware and RPis, I soon felt overwhelmed by the hardware side of it - wiring, circuitry, power supply, soldering.

Since my focus is mainly on the software, I didn't want to get discouraged during my project by the hardware side of things. I want to setup myself for as much success as possible. So, I opted to go simpler for now and purchased a preassembled LED board with a square grid of 64 LEDS. This way, I can focus on the writing the software and getting my feet wet with hardware/RPi. Then, if it is a blast to work with, I can dive deeper into building my own hardware on future projects.

I will be using 2 pieces of hardware for this project, a Raspberry Pi 3 and UnicornHAT:

Raspberry Pi 3 w/ an AMAZING rainbow case

UnicornHAT 64-LED board

I still haven't received the hardware I ordered yet, but I've already started on the software infrastructure that is necessary to get the Raspberry Pi communicating with a remote native app or web browser. I've already gotten the RPi's software communicating with a server and receiving data from a React Native app using websockets. I am going to post much more frequently to detail how the build process is going and document what I'm up to.

This is one of the most intensive projects I've taken on by myself, since I will be writing code in multiple languages that I am not familiar with. It'll be the first time I'll work with hardware, write a native app, work with websockets, code in Python, etc etc. I can't wait to see how it all turns out.

Learning Front End + Coding as Art

I may already 'made it' as a Ruby on Rails developer, but that doesn't mean that I don't have weaknesses in my developer abilities.  I know that doing creative stuff in the front-end is not my strongest area.  Sure, I'm able to work on the haml/slim/html views and coffeescript/jquery in the front-facing portion of the Rails app I work on, but coming up with cool designs and integrating/writing interesting javascript are not things I consider myself good at.   I've also been trying to level up my javascript and learn more ReactJS, but felt that some gaps in my understanding of the fundamentals of javascript have been making it really challenging for me.  I think my approach of reading random bits and pieces about JS from online articles, tutorials, videos has only left me feeling... fragmented.

I feel like I needed more of a path for learning with little challenges and project along the way, so.... I have started the FreeCodeCamp front-end curriculum to push me along/keep me on track.  It might be silly for someone with some experience as a dev to do this curriculum, but I don't think so.  I have been able to fly through the HTML/CSS/Bootstrap parts and started on the first individual project for FCC on Saturday -- a tribute page.

It's kinda silly, but I'm really love + proud of the page I made.  It's so silly, really, but I actually keep going to look at it again, to see the responsive design as I change the size of the browser window from big to small, and think about the quotes I included from Andy Warhol as I swipe through the 5 simple sections.  It makes me smile.  I love it because I feel like I finally made something with my coding skills solely for art's sake, I didn't make it for anyone else and made it in the exactly the way I wanted.  I made something for no reason other than to exist and be beautiful.

June 13: Dabbling in Elixir, more jQuery, more Ruby.

I didn't do much coding outside of work during the week.  Work has been fine, I feel like I'm progressing at a good rate, but outside of work, it was a rough week, so I couldn't put in much effort to coding during my free time.

But, I did spend late night friday/early saturday morning working through a Elixir tutorial that I had been wanting to tackle for a few weeks.  I successful went through it pretty quickly and got a fairly simple CRUD quotes app working perfectly locally.  However, I spent more time than that trying to get the deployment to Heroku (not in the tutorial) to work and failed.

To make sure it wasn't me or a dev environment issue (didn't figure it was, since it was running perfectly locally, but did it for a sanity check...), I cloned another sample elixir app and quickly set it up and deployed it easily, so I think based on the heroku error logs that there's some maybe dependencies issue going on.  It's kinda weird working with such a new framework like Phoenix, where it is so new that you git clone the framework directly onto your machine to use it.  For this specific tutorial, I was git checking out a specific branch with an older version of the framework to use... and maybe in deployment that's getting jacked.  I think maybe this is where my issue lies, but I'm not sure.  I gave up on trying to fix this project's deployment, I'd rather spend time learning something else or doing my own independent project to practice that waste more time on this one.  I'm glad there was this tutorial to do, but I wish it would have spent a lot less time on making the CSS snazzy and instead go through the deployment process.  I'd like some reassurance that this app was successfully deployed with its specific config settings even if it visually looks ugly! :-/

Today, I also finished up another segment in the Treehouse jQuery course.  I'm 1/2 through that course.  It's hard jumping back into studying something like jQuery with several days of break in between.  Takes a while to get my head back in it.

I'm still slowing reading POODR, probably 3/4 through it.  It's getting more difficult to keep up at the end.  But, I'm just trying not to get hung up on every little thing that's over my head and power through for now, since I plan to re-read it again in a few months.

I constantly feel like I need to keep pushing to learn and try out other languages like JS or elixir and not be solely vested in Ruby, since who knows if/when Ruby on Rails is going fade into the background.  But after experimenting with Elixir, it's clear that I really do love coding in Ruby.  It's just such a readable and pretty language, I'm not sure how you couldn't like it.  I'm really glad that I started out my coding adventure with Ruby and Rails.  And I'm happy it's what I work with, at least for now.

Learning Javascript....

The social networking of coding community is an amazing part of being a software dev.  I have really enjoyed connecting with new folks through emails and twitter.  It's funny that I've also gotten in touch with 2 former colleagues that have or are in the process of making the transition from scientists to software devs!  It's been great to share tips about learning resources and experiences so far.

Since I've very interested in learning JavaScript, jQuery, Angular, etc right now, one of those colleagues who has learned JS himself suggested I check out Treehouse for their JS resources.  So I did.  I have a couple months to check it out for free, so I started today on their Javascript Basics course.  I got 1/2 through the coursework today.  It's extremely basic stuff right now... beginning syntax, using the JS console in the browser, variables, etc.  They have a lot of resources from JS to jQuery to NodeJS to AngularJS, so I'm excited to check it out and see how their material progesses.  One thing that really bugs me with a lot of the online resources is that the coding takes place in their own browser based workspace environment rather than locally.  I do not like that.  I guess it is a ok way to learn the basics, but it bugs me to not have a record of my work and progress locally or on github.

I haven't studied too much Ruby/Rails outside of work this week.  I'm pretty immersed in it during the day since it's my full-time job, so it's nice to break that up with learning JS outside of work.  I have had some moments lately where things that previously did not make a lot of sense getting clearer in my mind and I feel good about it... I can see that I'm making progress.