Prototyping interactions between physical and visual interfaces
By: Alexander Widua
Tags: Prototyping, React, Arduino, UX, Interaction Design

🧰 Setting up the backend

We will start with setting up the backend for our prototype. Our backend is a NodeJS server that will talk and listen to our Arduino board using Johnny-Five. The backend is the heart of our prototype because it is the interface between our React front-end and our physical Arduino board.

Initialize your project. Create a new directory for your prototype Change to the created directory and run npm init -y from your terminal to initialize a new project using NPM

npm init -y will create a default package.json file

2. Install Johnny-Five. The Johnny-Five library is the heart of our backend because it allows us to talk and listen to our Arduino board. Install it locally by running npm i johnny-five from your terminal within your project folder.

3. Creating the server. Now it’s time to create the NodeJS server. This is where Johnny-Five will live.

Create a new server.js file in the root of your directory.

In the server file, we want to accomplish two things:

First, we want to create an HTTP server instance. This is basically us saying: “We want to make our server.js a web server so we can access it from the outside.”

a web server so we can access it from the outside.” Second, we want to initialize our Arduino board using Johnny-Five. In this case, initializing means that we tell our server.js what we expect a connected Arduino board and we expect some sensors attached to it.

Paste the following code in your server.js and let’s break it down afterward.

Let’s break this down:

Line 2–3 — First, we create an HTTP server instance and specify the port. We only need to specify the port because the address is localhost by default

— First, we create an HTTP server instance and specify the port. We only need to specify the port because the address is localhost by default Line 6–7 — Next, we pull out the Board and Sensor class from Johnny-Five to initialize our Arduino board.

We always need Board to initialize our board. Since we plan to prototype with a Potentiometer, we also need Johnny-Fives Sensor API.

— Next, we pull out the and class from Johnny-Five to initialize our Arduino board. We always need to initialize our board. Since we plan to prototype with a Potentiometer, we also need Johnny-Fives API. Line 10-12 —Once the board has been initialized, we want to tell our server file that we expect a sensor on pin A0.

Johnny-Five has a handy board.on("ready") method that runs once the board has been initialized. Let’s use it and assign our sensor inside the function. By the way, which pin you assign is entirely on your own.

—Once the board has been initialized, we want to tell our server file that we expect a sensor on pin A0. Johnny-Five has a handy method that runs once the board has been initialized. Let’s use it and assign our sensor inside the function. By the way, which pin you assign is entirely on your own. Line 15–18 —Similar to our board.on() method, Johnny-Five provides us with a Sensor.on("change") method that runs every time a sensor value changes. Let’s use it and console.log the sensor’s raw value every time there is a change (refer to the Sensor API to see what data you can pull)

—Similar to our method, Johnny-Five provides us with a method that runs every time a sensor value changes. Let’s use it and console.log the sensor’s raw value every time there is a change (refer to the Sensor API to see what data you can pull) Finally, we will spin up our server using the server’s listen() method. This is basically firing up the HTTP server that we initialized on Line 2-3

Now, we should be able to start our server by running node server from our project directory — but, we haven’t connected our Arduino yet.

4. Hook up your Arduino. Connect the potentiometer to your Arduino board (make sure to use the pin specified in the code, if you followed the tutorial it’ll be pin A0) and connect your Arduino to your machine’s USB port.

5. Do a test run. Start your node server by running node server in your terminal. You should see the console.logged sensor value we specified earlier in your server’s console.

6. Troubleshooting. If you can’t get your board or server running right away, there are unfortunately a multitude of possible causes. If the problem is with the serial connection between your machine and your board, usually J5 will give you ample information about this in the console. One cause could be that your Arduino firmware is not correct (see step 0 or refer to the J5 setup guide) or you have not installed all dependencies.