amrohit/nodebots-v2

This repo is the code, examples, and diagrams for the Hardware with Arduino & JavaScript on Frontend Masters.

Hardware with Arduino & JavaScript — Frontend Masters

This courses uses parts from the Arduino Starter Kit.

Prerequisites

• Clone this repository.
• Download and install the Arduino IDE.
• Download and install ngrok.

Resources

You can find the wiring diagrams from this workshop here.

Table of Contents

• Enough Electronics to Be Dangerous
• Blinking LEDs with Arduino
• Installing Standard Firmata
• Blinking LEDs with Johnny Five
  • Side quest: Pulsing LEDs
• Pushing Buttons
• Arduinos Meet the Browser
• Control Arduino from the Browser
• Using Websockets
• Rock, Paper, Scissors
• Piezo and Face Theremin
• Potentiometers and Kaleidoscope
• Rainbow LEDs
• Sensors: Light, Tilt, and Temperature
• LCD Screens
• Web Serial API

Further Exploration

Because the Johnny-Five starter kit—which is what we used in the last iteration of this course—is now out of production. We're doing some slightly different projects than last time. That said, once you get your sea legs, you could also easily adapt some of those projects for use with your Arduino as well. You can see the projects and code from last time here.

Sensors

Playing with sensors is the best. Here are some cool—an inexpensive sensors that you can use with your Arduino—or, any other board for that matter.

• Soil Moisture Sensor
• Magnetic Door Sensor
• Proximity Sensor
• Sensors on SparkFun

Boards that Run Node.js

An Arduino cannot run Node.js without a host computer, but there are boards that can!

• Beagle Board
• Raspberry Pi

Jonny-Five Troubleshooting

If you receive a Device or Firmware Error when you are attempting to run JavaScript code on your board with node src/blinking-led/index.js, Jonny-Five might be connecting to the wrong USB device.

1. Use the ArduinoIDE to find the device port in the device dropdown
2. Pass the port to the Board constructor. For example:

const board = new five.Board({ port: '/dev/tty.usbmodem3101' });

Displaying Messages from GitHub

This lesson uses ngrok to expose a port on your local computer. The URL is added to a GitHub webhook so the Arduino LCD can display information when actions happen in a respository (like starring the repo). In order to complete this lesson:

1. Install ngrok in your project: npm i ngrok
2. Create a GitHub repository (or use an existing repository)
3. After starting the express server in the lesson, use npx ngrok http 3000 to start ngrok
4. Follow the instructions in the lesson to copy and paste the forwarding URL from ngrock into the GitHub webhook.