Raspberry Pi Project Build #2 - Building a client using ES6 + ReactJS

Once I got the simple client, built with HTML and jQuery, on the server going and could see it was sending messages, I knew I wanted to change this and build it with ES6 and ReactJS instead. I've built some small projects so I could learn React and I've built some tools for User & Admin dashboards for a project at my last job, but I honestly hadn't written any JS or React in a few months and was pretty worried how it would actually go. And I had only recently dabbled with ES6. I created a project within my server using the React Create App CLI, which takes care of all the configuration, leaving you only to have to worry about building your project and allowing me to quickly get started.

I have found the most important thing that I have learned as a software developer is that you HAVE to break big tasks down into the small bits of tasks to make them manageable. So, I started by getting the SocketIO client setup again and making sure that that config was sending messages to the server. Then, I wanted to start on the layout. I made a sketch of what kind of UI I was hoping to achieve to keep me on track:

Mockup of my UI design

The mockup shows that I should have a grid of 64 squares, representing each of the LEDs in the UnicornHAT. When a user clicks on a square, the color changes to indicate that square will be illuminated on the Pi. Once a user enters their design and clicks submit, that design is immediately sent to the Raspberry Pi and is displayed for 10 seconds. At first users wouldn't get to select colors, but, eventually, there should also be a slider bar where a user can select a color, then click on one of the squares and select that color for a square.

There's a good bit to figure out and build here, so I started at the smallest part, a Square component. Then, I created a Board component, a grid of 64 Square components. It really is all about working on reasonably sized tasks that are small in scope and build upon those to increase the complexity of your app. I did struggle for a little while to get the board component looking ok, updating state properly, and in an 8x8 configuration.

I've found that working with ES6 has really made writing JS much more of a joy for me. I actually really, really enjoy it now. Things just make a lot of sense and the find the code is clean and is much easier to navigate than ES5.

At this point the squares did not change color when clicked, only updated a boolean field from false to true. I was anxious to actually get the raspberry pi and find out if my design decisions were going to place nicely with the pi, before going too much further on this.

At this point, I still didn't have my raspberry pi yet, so I also played around with add some authentication for the socketIO clients with the server. It wasn't terribly difficult to setup, but it is hard to find easy-to-understand documentation on how to do this stuff. It was also tricky since I needed to code this in both JS, React, and Python. 😏 It was also a bit tricky deploying the react client on heroku since it was within the Express server. I didn't want to have to worry about having to manually build/minify the app before deploying it. So, I eventually figured out that I could edit the scripts in the express server's `package.json` file and get the react app to be built upon every deployment to Heroku. This ensures it is the most up-to-date and correct version of the React client every deployment.

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.