Fullstack Con '18 - Prison Break - When the web escapes the browser

Slide 1

Slide 1 text

Prison Break When the Web Escapes the Browser Dominik Kundel - @dkundel Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

!" No Prison Break References Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

MQTT Example in JS var mqtt = require('mqtt'); var client = mqtt.connect('mqtt: //test.mqttbroker.example'); 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 28

Slide 28 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 29

Slide 29 text

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

Slide 30

Slide 30 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 31

Slide 31 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 39

Slide 39 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 40

Slide 40 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 41

Slide 41 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 42

Slide 42 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 43

Slide 43 text

Example #porgjs Building your own custom peripheral Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 44

Slide 44 text

Goal of #porgjs: Build a custom peripheral device that reacts on events on your computer Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 45

Slide 45 text

Goal of #porgjs: Build a custom peripheral device that reacts on events on your computer Hack a Porg toy to scream whenever your build fails! Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 46

Slide 46 text

⚠ Warning You might see the insides of a (toy) porg Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Demo of PorgJS ! github.com/dkundel/porgjs Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 59

Slide 59 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

JerryScript Ultra-lightweight JavaScript engine for the Internet of Things ! jerryscript.net ! Runtime: Samsung's IoT.js Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Espruino ! Can run on ESP8266 microcontrollers ($2 a piece) " Has its 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 66

Slide 66 text

Neonious A microcontroller board, programmable and debuggable out of the box. ! www.neonious.com Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 67

Slide 67 text

Neonious Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 68

Slide 68 text

Neonious ! Currently on Indiegogo " Has its own hardware ✍ Comes with its own IDE $ Supports TypeScript out of the box % Full Node.js and npm support & Built-in Ethernet & WiFi Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 72

Slide 72 text

Example #coffeejs JavaScript meets Coﬀee Machine Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 73

Slide 73 text

Example #coﬀeejs Goals ! Control an existing device programatically " Build a REST API implementing IETF RFC 2324 Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 74

Slide 74 text

Example #coﬀeejs Goals ! Control an existing device programatically " Build a REST API implementing IETF RFC 2324 " Build a REST API implementing HTCPCP Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 75

Slide 75 text

Example #coffeejs Goals ! Control an existing device programatically " Build a REST API implementing IETF RFC 2324 " Build a REST API implementing HTCPCP " Build a REST API implementing Hyper Text Coffee Pot Control Protocol Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coffeejs

Slide 76

Slide 76 text

Example #coffeejs Why Tessel? !" The coffee machine should work untethered # Use johnny-five to easyly swap microcontrollers $ It has to be internet connected % Quick setup / easy development & We need to build a server. npm packages help Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coffeejs

Slide 77

Slide 77 text

Example #coﬀeejs Hacking It! Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

How I hacked a coﬀee machine using JavaScript ! bit.ly/coffee-js ! github.com/dkundel/htcpcp-delonghi Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 90

Slide 90 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 | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 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 emulate switches/buttons Dominik Kundel | @dkundel | #FullStackCon #nodebots #porgjs #coﬀeejs

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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