JS 💖 Hardware – Getting started with Nodebots and Johnny-Five
Tags: javascript, hardware, arduino, node
Published: 2017-11-28 10:52:52

---
cover_image: https://thepracticaldev.s3.amazonaws.com/i/chn037umtyz4esas9gcx.png
title: JS 💖 Hardware – Getting started with Nodebots and Johnny-Five
published: true
description: What if you could control microcontrollers and hardware using JavaScript? Learn how to get started using Node.js, Johnny-Five and an Arduino.
tags: javascript, hardware, arduino, nodejs
canonical_url: https://www.twilio.com/blog/2017/08/js-hardware-getting-started-with-nodebots-and-johnny-five.html
---

Getting started with hardware hacking can be quite intimidating for some folks. The world of electronics is completely foreign for most developers; additionally, it requires you to write C/C++ which is efficient but not everyone feels comfortable with. However, the [Nodebots](http://nodebots.io/) movement is a nice way to get started with hardware development using JavaScript. In this article, I want to guide you through some very basic things to get started.

### JavaScript && Hardware? How?

![JavaScript and hardware equals nodebots](https://thepracticaldev.s3.amazonaws.com/i/iuhjl9p4o3kcdi7fhxch.png)

There are quite a few different projects aimed at hardware development with JavaScript. Some come with special hardware like the [Tessel](https://tessel.io/) or [Espruino](https://www.espruino.com/). Both of them are great projects but in this post we will focus on another option.

The option we’ll use is the npm module [`johnny-five`](http://johnny-five.io/). Johnny-Five isn’t limited to certain hardware but instead [supports a wide range of different microcontroller platforms (including the Tessel)](http://johnny-five.io/platform-support/) using various I/O plug-ins. The only drawback is that some of these platforms (like Arduino) don’t allow you to execute the JS code directly on the microcontroller. Instead you execute it on a “host system”.

The way it works for Arduino is that you execute the JS code on your “host system” (e.g. your computer) using Node.js and the [`johnny-five`](https://npm.im/johnny-five) module sends the actions via the [`serialport`](https://npm.im/serialport) module to your Arduino that is running the [`firmata` firmware](https://github.com/firmata/arduino/) that is designed for remote controlling an Arduino. This way we have full control over the hardware while it’s connected to our computer.

### Requirements

For this tutorial you will need a few things. First of all you need the following things installed on your computer:

- [Node.js](https://nodejs.org/) and [npm](https://npmjs.com)
- The [Arduino IDE](https://www.arduino.cc/en/Main/Software) to upload the `firmata` firmware on your microcontroller
- Your favorite code editor

Additionally you will need some hardware components:


- An Arduino (or Arduino clone). I’ll be using an Arduino Nano. [Check the Johnny-Five page for the different ones that are supported](http://johnny-five.io/platform-support/)
- 1x red LED
- 1x button
- 1x resistor of 220Ω (has the stripes Red-Red-Brown). Note that for different LED colors you might need different resistance values here
- 1x resistor of 10kΩ (has the stripes Brown-Black-Orange)
- 1x breadboard to wire up the setup – [something similar to this size should be sufficient](https://www.sparkfun.com/products/12002)
- a few jumper or solid wires to connect everything

### Installing the firmata firmware

The first thing we need to do is to make sure your Arduino is correctly recognized. Plug it into your computer and click on the `Tools` menu. In there you want to choose the respective board you are using — in my case I had to choose Arduino Nano.

![screenshot of menu structure](https://thepracticaldev.s3.amazonaws.com/i/kha23e5semauxmpis8da.png)

Also make sure to choose the right port under `Tools → Port`. It should contain something like `usbserial` in it. If such a port is not listed make sure you have the necessary drivers for your Arduino installed.

![screenshot showing the menu item that should be clicked](https://thepracticaldev.s3.amazonaws.com/i/rn7zq64ix3ml5n589ha8.png)

Next we need to install the firmata firmware on our Arduino to be able to communicate with it. Open your Arduino IDE and install the `Servo` libraries by clicking on `Sketch → Include Library → Manage Libraries` and searching for the library.

![screenshot of manage libraries menu entry](https://thepracticaldev.s3.amazonaws.com/i/u9zmacqizwkimzhbdhrd.png)

![screenshot of installing servo library](https://thepracticaldev.s3.amazonaws.com/i/3tf87md1lv0ql558o4j0.png)

Lastly we need to download `StandardFirmataPlus.ino` file into our Arduino project directory (in Mac by default under `~/Documents/Arduino`) and upload it to our Arduino. You can find your Arduino directory by going into Preferences and looking up the _Sketchbook location_.

[Download the `StandardFirmataPlus.ino` file from GitHub](https://raw.githubusercontent.com/firmata/arduino/master/examples/StandardFirmataPlus/StandardFirmataPlus.ino) and place it in a `StandardFirmataPlus` directory inside your Arduino directory. Open the `StandardFirmataPlus.ino` file and click the _Upload_ button. This will compile the bits and upload it to your Arduino. You can close the Arduino IDE once it’s done uploading. You are all set now for some JavaScript!

Note: If it fails uploading the code try to install the “Firmata” library the same way you installed the “Servo” library.

![screenshot indicating a successful upload](https://thepracticaldev.s3.amazonaws.com/i/13liyvkwhd1njk0pmkag.png)

### "Hello World" of hardware

![Decorative GIF](https://thepracticaldev.s3.amazonaws.com/i/akbius717p9jsh76j24r.png)

The equivalent of Hello World in hardware is probably making LEDs blink. The nice thing is that the Arduinos typically already have an LED on the board that we can use to see if everything works without having to wire up anything. So let’s get started!

Create a new Node.js project anywhere on your computer (like your home directory) by running the following lines in your command line:

```bash
mkdir nodebots
cd nodebots
npm init -y
```

Next install the `johnny-five` module:

```bash
npm install johnny-five --save
```

Create a file called `index.js` and place the following code into it:

```js
const { Led, Board } = require('johnny-five');
const board = new Board();
board.on('ready', onReady);
```

This will create a new Board instance and wait for the `ready` event to be emitted. This means that the `johnny-five` library is connected to the Arduino. We then call an `onReady` function that is still missing. Add it by placing the following lines in the in the bottom of your `index.js`:

```js
function onReady() {
  // if we don't pass a port to the Led constructor it will use
  // the default port (built-in LED)
  const led = new Led();
 
  // This will grant access to the led instance
  // from within the REPL that's created when
  // running this program.
  board.repl.inject({
      led: led
  });
 
  led.blink();
  // run in the REPL led.stop() to make it stop blinking
}
```

Now all we need to do is start our script:

```bash
node index.js
```

The console should output a couple of messages and then start a REPL like this:

![Terminal reads among others Available, Connected, Repl Initialized](https://thepracticaldev.s3.amazonaws.com/i/6nic4mzo6xa806ctpcmi.png)

Additionally you should see an LED on your board start blinking. You can stop the blinking by typing into the REPL:

```js
led.stop()
```

To stop the program type `.exit` or press `Ctrl+C` twice.

### Talking to an external LED

![Decorative GIF](https://thepracticaldev.s3.amazonaws.com/i/ctba2b6f33ulvrxo2b9k.png)

Now obviously just talking to hardware on the board is sort of limiting and not really what we typically want to do when we hack hardware. For this we should be talking to some external hardware. So let’s get rolling by grabbing the following pieces of your hardware:

- 1x 220Ω resistor (Red-Red-Brown)
- 1x LED
- your breadboard
- a few of your wires

Disconnect your Arduino and plug everything the following way into your breadboard:

![picture of wireup](https://thepracticaldev.s3.amazonaws.com/i/8edko7sfe4jdeovvgduq.png)

Basically you need to create the following circuit:

> Pin D6 on your Arduino (or any other digital pin) → one side of your resistor → the long leg of your LED (anode) → short leg of your LED (cathode) → GND on your Arduino

With this circuit if we turn on the pin `D6` it will start lighting up the LED.

Now let’s update our code to use that LED instead. All you need to do is to pass `6` as an argument to the `Led` constructor. Note that this might differ for a different Arduino or if you chose a different port. Make the changes in your `index.js`:

```js
function onReady() {
  const led = new Led(6);
  // … leave remaining code
}
```

Re-run your program and instead of the on-board LED, the external LED should start blinking 🎉

### Push the button

![Decoartive GIF](https://thepracticaldev.s3.amazonaws.com/i/ky1sri2r8lk70fdcc949.png)

What would hardware hacking be without some user interaction? So let’s add a button to the mix. Grab the remaining components that you got:

- 1x 10kΩ (Brown-Black-Orange)
- 1x button
- more remaining wires

Add them to the circuit the following way:

![Picture of circuit](https://thepracticaldev.s3.amazonaws.com/i/wctre68ei7waznpnsm9u.png)

> Connect one pin to 5V on your Arduino and the diagonally one to both a 10kΩ resistor and to pin D5 on your Arduino. Connect the other end of the resistor to GND of your Arduino to close the circuit.

Your setup should look similar to this now:

![Photo of actual wireup](https://thepracticaldev.s3.amazonaws.com/i/mwavvlwtsz3lip3lqz1g.png)

Working with things like buttons is where hardware hacking with JavaScript really shines. If we want to know if a button has been pressed or released all we have to do is listen on the `press`/`release` events. It’s that easy. Change your `index.js`:

```js
const { Led, Board, Button } = require('johnny-five');
const board = new Board();
 
board.on('ready', onReady);
 
let button;
let led;
function onReady() {
  button = new Button(5);
  led = new Led(6);
  button.on('press', () => led.on());
  button.on('release', () => led.off());
 
  // This will grant access to the led instance
  // from within the REPL that's created when
  // running this program.
  board.repl.inject({
    led: led
  });
 
  // led.blink();
  // run in the REPL led.stop() to make it stop blinking
}
```

Restart the script and start pressing the button. The LED should light up when the button is pressed and stop lighting up when you release it.

### Why isn't that an API?

![Decorative GIF](https://thepracticaldev.s3.amazonaws.com/i/g4v06hptptghthb7dbs9.png)

My favorite part of nodebots is the fact that we can leverage the whole npm ecosystem. So let’s spin up a quick web server using `express` and light up the LED on every request and let’s use `got` to do an HTTP `POST` request to a [RequestBin](https://requestb.in/).

Install the two modules using `npm`:

```bash
npm install express got --save
```

Next let’s require the two dependencies and create an express app. Modify your `index.js`:

```js
const { Led, Board, Button } = require('johnny-five');
const express = require('express');
const got = require('got');
const board = new Board();
const app = express();
 
app.get('*', (req, res) => {
  led.on();
  // turn off LED after 1 second
  setTimeout(() => led.off(), 1000);
  res.send('Hello!');
});
 
board.on('ready', onReady);
```

Next we need to adjust the event handlers for the button and make the express server start listening:

```js
function onReady() {
  button = new Button(5);
  led = new Led(6);
  button.on('press', () => {
    got
      .post('YOUR_REQUEST_BIN_URL')
      .then(() => {
        console.log('Made request');
      })
      .catch(err => {
        console.error(err);
      });
  });
  // button.on('release', () => led.off());
  app.listen(3000, () => {
    console.log('Server listening on port 3000');
  });
 
  // This will grant access to the led instance
  // from within the REPL that's created when
  // running this program.
  board.repl.inject({
    led: led
  });
}
```

Make sure to replace `YOUR_REQUEST_BIN_URL` with a valid [RequestBin](https://requestb.in/) URL. You can create one on their website.

Now restart your program and wait for it to state that the server is listening. Navigate to [http://localhost:3000](http://localhost:3000/) and you should see the LED light up for one second. Refresh the page and you will see it again. Afterwards push the button and refresh your RequestBin page to see the request that was made.

### What's next?

Awesome that’s it! You just did your first steps in the lovely world of nodebots. But this is just the beginning. Now it’s time to find a project and start researching what parts you need for it. If you want to have an idea on how to approach these things check out out my blog post on [how I hacked a coffee machine using Johnny-Five and a Tessel](https://moin.world/2017/04/01/how-we-hacked-our-coffee-machine-with-javascript/). You should also [check if there is a local nodebots meetup around you](http://nodebots.io/#meetups). Other useful resources are:

- [The Johnny-Five example page that shows how to interact with a variety of components](http://johnny-five.io/examples/)
- [`nodebots-workshop`](https://www.npmjs.com/package/nodebot-workshop) with its variety of exercises
- The [awesome-nodebots](https://github.com/IainIsCreative/awesome-nodebots) list on GitHub

If you have any cool hardware projects that you are building or planning to build with JS, I would love to hear about them! Also feel free to reach out if you have any questions:

- Email: [dkundel@twilio.com](mailto:dkundel@twilio.com)
- Twitter: [@dkundel](https://twitter.com/dkundel)
- GitHub: [dkundel](https://github.com/dkundel)

![Decorative GIF](https://thepracticaldev.s3.amazonaws.com/i/zp865bzsm16w1yucgk23.png)