Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BerlinJS - When Porgs Scream at Webpack and oth...

BerlinJS - When Porgs Scream at Webpack and other Stories

Presentation about Hardware Hacking & JavaScript at BerlinJS in September 2018

Dominik Kundel

September 20, 2018
Tweet

More Decks by Dominik Kundel

Other Decks in Programming

Transcript

  1. When Porgs Scream at Webpack and Other Stories Dominik Kundel

    - @dkundel Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  2. How many of you have a Microcontroller? Dominik Kundel |

    @dkundel | Photo by Felipe Faria on Unsplash
  3. Did you use it? Dominik Kundel | @dkundel | Photo

    by Igor Ovsyannykov on Unsplash
  4. Hi! I'm Dominik Kundel! Developer Evangelist at ! dkundel.com "

    @dkundel # [email protected] $ github/dkundel Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  5. ! ⌘ + Z / Ctrl+Z Dominik Kundel | @dkundel

    | #BerlinJS #nodebots #porgjs #coffeejs
  6. Three ways to combine JavaScript & Hardware Dominik Kundel |

    @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  7. ! APIs & Protocols JavaScript ➡ API ➡ C/C++ ➡

    Hardware Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  8. APIs & Protocols Option 1: Particle Cloud API Dominik Kundel

    | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  9. What is a Particle? ! particle.io Dominik Kundel | @dkundel

    | #BerlinJS #nodebots #porgjs #coffeejs
  10. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  11. APIs & Protocols Option 2 MQTT Lightweight machine-to-machine publish/subscribe messaging

    protocol Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  12. MQTT ! No need for IP Address of a device

    " ⚖ Scales to multiple devices ✅ Cross-platform / Cross-language Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  13. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  14. MQTT Example in C ++ #include <SPI.h> #include <Ethernet.h> #include

    <PubSubClient.h> // 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<length;i ++) { Serial.print((char)payload[i]); } Serial.println(); } EthernetClient ethClient; PubSubClient mqttClient(ethClient); void reconnect() { // Loop until we're reconnected while (!mqttClient.connected()) { Serial.print("Attempting MQTT connection ..."); // Attempt to connect if (mqttClient.connect("arduinoClient")) { Serial.println("connected"); // Once connected, publish an announcement ... mqttClient.publish("outTopic","hello world"); // ... and resubscribe mqttClient.subscribe("inTopic"); } else { Serial.print("failed, rc="); Serial.print(client.state()); Serial.println(" try again in 5 seconds"); // Wait 5 seconds before retrying delay(5000); } } } void setup() { Serial.begin(57600); mqttClient.setServer(server, 1883); mqttClient.setCallback(callback); Ethernet.begin(mac, ip); // Allow the hardware to sort itself out delay(1500); } void loop() { if (!mqttClient.connected()) { reconnect(); } mqttClient.loop(); } Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  15. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  16. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  17. API & Protocols ! Pros ! Lightweight, intuitive ways to

    communicate between devices " Move heavy business logic off devices # Programming language independent Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  18. API & Protocols ! Cons ! Still have to write

    C ++ code for the hardware " Need to deploy/use a message broker Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  19. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  20. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  21. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  22. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  23. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  24. Example #porgjs Building your own custom peripheral Dominik Kundel |

    @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  25. Goal of #porgjs: Build a custom peripheral device that reacts

    on events on your computer Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  26. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  27. ⚠ Warning You might see the insides of a (toy)

    porg Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  28. "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 | #BerlinJS #nodebots #porgjs #coffeejs
  29. "Tethered" Nodebots ! Cons ⛓ Often tethered to a "host"

    " Less examples than classic Arduino projects Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  30. JerryScript Ultra-lightweight JavaScript engine for the Internet of Things !

    jerryscript.net ! Runtime: Samsung's IoT.js Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  31. Espruino Espruino is a JavaScript interpreter for microcontrollers. ! www.espruino.com

    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  32. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  33. Neonious A microcontroller board, programmable and debuggable out of the

    box. ! www.neonious.com Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  34. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  35. Tessel Tessel 2 is a robust IoT and robotics development

    platform. ! tessel.io Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  36. 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 | #BerlinJS #nodebots #porgjs #coffeejs
  37. Example #coffeejs Goals ! Control an existing device programatically "

    Build a REST API implementing IETF RFC 2324 Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  38. Example #coffeejs Goals ! Control an existing device programatically "

    Build a REST API implementing IETF RFC 2324 " Build a REST API implementing HTCPCP Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  39. 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 # www.ietf.org/rfc/rfc2324.txt Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  40. Example #coffeejs Why Tessel? !" The coffee machine should work

    untethered # Use johnny-five to easily swap microcontrollers $ It has to be internet connected % Quick setup / easy development & We need to build a server. npm packages help Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  41. How I hacked a coffee machine using JavaScript ! bit.ly/coffee-js

    ! github.com/dkundel/htcpcp-delonghi Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  42. "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 | #BerlinJS #nodebots #porgjs #coffeejs
  43. "Untethered" Nodebots ! Cons ⛓ Less flexible on hardware choices

    " Missing cutting edge language features # Some docs better than others Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  44. ! How to get started Dominik Kundel | @dkundel |

    #BerlinJS #nodebots #porgjs #coffeejs
  45. ! Use case driven learning Dominik Kundel | @dkundel |

    #BerlinJS #nodebots #porgjs #coffeejs
  46. ! 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 | #BerlinJS #nodebots #porgjs #coffeejs
  47. ! Johnny-Five Inventor's Kit ! Available on Sparkfun Dominik Kundel

    | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  48. ! Grove Starter Kit for Arduino ! Available at Seeed

    Studio Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  49. ! Generic Arduino Starter Kit ! Elegoo UNO Starter Kit

    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  50. ! Resources ! d-k.im/hardware-berlinjs ☕ bit.ly/coffeejs # d-k.im/nodebots $ nodebots.io

    % johnny-five.io & tessel.io Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  51. Thank You! ! Dominik Kundel " d-k.im/hardware-berlinjs # @dkundel $

    [email protected] % github/dkundel Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs