Node.js Berlin March '18 - Hardware Hacking for Web Developers

Slide 1

Slide 1 text

Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 2

Slide 2 text

How many of you have a Microcontroller? Dominik Kundel | @dkundel | Photo by Felipe Faria on Unsplash

Slide 3

Slide 3 text

Did you use it? Dominik Kundel | @dkundel | Photo by Igor Ovsyannykov on Unsplash

Slide 4

Slide 4 text

Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 5

Slide 5 text

Hi! I'm Dominik Kundel! Developer Evangelist at ! @dkundel " dkundel@twilio.com # github/dkundel Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 6

Slide 6 text

I ! JavaScript Photo by Thomas William & Thomas Kvistholt on Unsplash

Slide 7

Slide 7 text

Hardware Dominik Kundel | @dkundel | Photo by Felipe Faria on Unsplash

Slide 8

Slide 8 text

The destiny of Hardware Dominik Kundel | @dkundel | Photo by Igor Ovsyannykov on Unsplash

Slide 9

Slide 9 text

Simple LED demos Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 10

Slide 10 text

It's not easy... Dominik Kundel | @dkundel | Photo by Nicolas Thomas on Unsplash

Slide 11

Slide 11 text

! Preparation Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 12

Slide 12 text

! Costly ! Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 13

Slide 13 text

! ⌘ + Z / Ctrl+Z Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 14

Slide 14 text

! Rewarding " Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 15

Slide 15 text

C/C ++ Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 16

Slide 16 text

! C/C ++ " Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 17

Slide 17 text

Three ways to combine JavaScript & Hardware Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 18

Slide 18 text

APIs & Protocols JavaScript ➡ API ➡ C/C++ ➡ Hardware Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 19

Slide 19 text

APIs & Protocols Option 1: Particle Cloud API Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 20

Slide 20 text

What is a Particle? ! particle.io Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 21

Slide 21 text

Particle Cloud API Example curl https: //api.particle.io/v1/devices/0123456789abcdef/brew \ -d access_token=123412341234 \ -d "args=coffee" void setup() { // register the cloud function Particle.function("brew", brewCoffee); } int brewCoffee(String command) { if(command == "coffee") { return 1; } else return -1; } Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 22

Slide 22 text

APIs & Protocols Option 2 MQTT Lightweight machine-to-machine publish/subscribe messaging protocol Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 23

Slide 23 text

Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 24

Slide 24 text

MQTT ! No need for IP Address of a device " ⚖ Scales to multiple devices ✅ Cross-platform / Cross-language Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 25

Slide 25 text

MQTT Example in JS var mqtt = require('mqtt'); var client = mqtt.connect('mqtt: //test.mosquitto.org'); client.on('connect', function() { client.subscribe('presence'); client.publish('presence', 'Hello mqtt'); }); client.on('message', function(topic, message) { // message is Buffer console.log(message.toString()); client.end(); }); Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 26

Slide 26 text

MQTT Example in C ++ #include #include #include // Update these with values suitable for your network. byte mac[] = { 0xDE, 0xED, 0xBA, 0xFE, 0xFE, 0xED }; IPAddress ip(172, 16, 0, 100); IPAddress server(172, 16, 0, 2); void callback(char* topic, byte* payload, unsigned int length) { Serial.print("Message arrived ["); Serial.print(topic); Serial.print("] "); for (int i=0;i

Slide 27

Slide 27 text

MQTT Subscribe boolean rc = mqttClient.subscribe("myTopic"); Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 28

Slide 28 text

MQTT Setup void setup() { Ethernet.begin(mac, ip); // Allow the hardware to sort itself out delay(1500); mqttClient.setServer(server, 1883); if (mqttClient.connect("myClientID")) { // connection succeeded } } void loop() { mqttClient.loop(); } Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 29

Slide 29 text

MQTT Callback void callback(char* topic, byte* payload, unsigned int length) { // Allocate the correct amount of memory for the payload copy byte* p = (byte*)malloc(length); // Copy the payload to the new buffer memcpy(p,payload,length); // Republish the received message mqttClient.publish("outTopic", p, length); // Free the memory free(p); } mqttClient.setCallback(callback); Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 30

Slide 30 text

Example Twitch Live Lamp ! github.com/dkundel/twitch-live-lamp Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 31

Slide 31 text

API & Protocols ! Pros ! Lightweight, intuitive ways to communicate between devices " Move heavy business logic oﬀ devices # Programming language independent Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 32

Slide 32 text

API & Protocols ! Cons ! Still have to write C ++ code for the hardware " Need to deploy/use a message broker Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 33

Slide 33 text

"Tethered" Nodebots Node.js ➡ Hardware Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 34

Slide 34 text

serialport Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 35

Slide 35 text

johnny-five Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 36

Slide 36 text

johnny-five (J5) ! Talk to microcontrollers from Node.js " Use a familiar syntax # Leverage the npm ecosystem $ Often tethered to a host machine Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 37

Slide 37 text

Blink on an Arduino with C ++ // the setup function runs once when you press reset or power the board void setup() { // initialize digital pin LED_BUILTIN as an output. pinMode(LED_BUILTIN, OUTPUT); } // the loop function runs over and over again forever void loop() { digitalWrite(LED_BUILTIN, HIGH); // turn the LED on (HIGH is the voltage level) delay(1000); // wait for a second digitalWrite(LED_BUILTIN, LOW); // turn the LED off by making the voltage LOW delay(1000); // wait for a second } Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 38

Slide 38 text

Blink on an Arduino with J5 var five = require('johnny-five'); var board = new five.Board(); board.on('ready', function() { var led = new five.Led(13); led.blink(500); }); Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 39

Slide 39 text

Button with C ++ const int buttonPin = 2; // the number of the pushbutton pin const int ledPin = 13; // the number of the LED pin int buttonState = 0; // variable for reading the pushbutton status void setup() { // initialize the LED pin as an output: pinMode(ledPin, OUTPUT); // initialize the pushbutton pin as an input: pinMode(buttonPin, INPUT); } void loop() { // read the state of the pushbutton value: buttonState = digitalRead(buttonPin); // check if the pushbutton is pressed. If it is, the buttonState is HIGH: if (buttonState == HIGH) { // turn LED on: digitalWrite(ledPin, HIGH); } else { // turn LED off: digitalWrite(ledPin, LOW); } } Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 40

Slide 40 text

Button with J5 var five = require('johnny-five'); var board = new five.Board(); board.on('ready', function() { var led = new five.Led(13); var button = new five.Button(2); button.on('press', () => { led.on(); }); button.on('release', () => { led.off(); }); }); Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 41

Slide 41 text

Demo PorgJS Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 42

Slide 42 text

"Tethered" Nodebots ! Pros ! Hardware independent code with J5 ⚒ Use familiar tools # Bring your Editor/IDE $ Use the npm ecosystem % Great website for beginners Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 43

Slide 43 text

"Tethered" Nodebots ! Cons ⛓ Often tethered to a "host" " Less examples than classic Arduino projects Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 44

Slide 44 text

"Untethered" Nodebots JavaScript ⚭ Microcontroller Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 45

Slide 45 text

JerryScript Ultra-lightweight JavaScript engine for the Internet of Things ! jerryscript.net Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 46

Slide 46 text

Espruino Espruino is a JavaScript interpreter for microcontrollers. ! www.espruino.com Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 47

Slide 47 text

Espruino Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 48

Slide 48 text

Espruino ! Can run on ESP8266 microcontrollers ($2 a piece) " Has it's own hardware versions as well # Open Source Code & Hardware ✍ Comes with its own IDE ⛔ Limited npm support & Does not work with J5 Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 49

Slide 49 text

Tessel Tessel 2 is a robust IoT and robotics development platform. ! tessel.io Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 50

Slide 50 text

Tessel Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 51

Slide 51 text

Tessel ! Run Node.js with (almost) the entire npm ecosystem " Compatible with J5 ⛓ Use your favorite toolchain & editor $ Open Source Code & Hardware % Tessel 2 is fairly expensive Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 52

Slide 52 text

Demo JavaScript meets Coﬀee Machine Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 53

Slide 53 text

"Untethered" Nodebots ! Pros ✂ Untethered systems running JavaScript " Familar programming language ⚒ Use familiar tools $ Bring your own Editor/IDE % (potentially) use the npm ecosystem Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 54

Slide 54 text

"Untethered" Nodebots ! Cons ⛓ Less ﬂexible on hardware choices " Missing cutting edge language features # Some docs better than others Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 55

Slide 55 text

! How to get started Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 56

Slide 56 text

! Finding a project Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 57

Slide 57 text

! Use case driven learning Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 58

Slide 58 text

⚒ Hack existing projects Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 59

Slide 59 text

⚡ Electronics basics Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 60

Slide 60 text

! Useful things ⚖ A digital multimeter (Volt, Amps, Ohm) " A breadboard # Plenty of jumper wires $ A set of resistors % A few LEDs & A few Solid State Relays to eumlate switches/buttons Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 61

Slide 61 text

! Johnny-Five Inventor's Kit ! Available on Sparkfun Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 62

Slide 62 text

! Grove Starter Kit for Arduino ! Available at Seeed Studio Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 63

Slide 63 text

! Generic Arduino Starter Kit ! Elegoo UNO Starter Kit Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs

Slide 64

Slide 64 text

! Resources ! d-k.im/hardware-node-bln ☕ bit.ly/coffeejs # d-k.im/nodebots $ nodebots.io % johnny-five.io & tessel.io Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coffeejs

Slide 65

Slide 65 text

Thank You! ! Dominik Kundel " d-k.im/hardware-node-bln # @dkundel $ dkundel@twilio.com % github/dkundel Dominik Kundel | @dkundel | #nodejsberlin #nodebots #porgjs #coﬀeejs