$30 off During Our Annual Pro Sale. View Details »

BerlinJS - When Porgs Scream at Webpack and other Stories

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. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  5. Hi! I'm Dominik Kundel! Developer Evangelist at ! dkundel.com "

    @dkundel # dkundel@twilio.com $ github/dkundel Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  6. I ! JavaScript Photo by Thomas William & Thomas Kvistholt

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

    on Unsplash
  8. The destiny of Hardware Dominik Kundel | @dkundel | Photo

    by Igor Ovsyannykov on Unsplash
  9. Simple LED demos Dominik Kundel | @dkundel | #BerlinJS #nodebots

    #porgjs #coffeejs
  10. It's not easy... Dominik Kundel | @dkundel | Photo by

    Nicolas Thomas on Unsplash
  11. ! Preparation Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs

    #coffeejs
  12. ! Costly ! Dominik Kundel | @dkundel | #BerlinJS #nodebots

    #porgjs #coffeejs
  13. ! ⌘ + Z / Ctrl+Z Dominik Kundel | @dkundel

    | #BerlinJS #nodebots #porgjs #coffeejs
  14. ! Rewarding " Dominik Kundel | @dkundel | #BerlinJS #nodebots

    #porgjs #coffeejs
  15. C/C ++ Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs

    #coffeejs
  16. ! C/C ++ " Dominik Kundel | @dkundel | #BerlinJS

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

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

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

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

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

    protocol Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  23. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  24. MQTT ! No need for IP Address of a device

    " ⚖ Scales to multiple devices ✅ Cross-platform / Cross-language Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  25. 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
  26. 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
  27. MQTT Subscribe boolean rc = mqttClient.subscribe("myTopic"); Dominik Kundel | @dkundel

    | #BerlinJS #nodebots #porgjs #coffeejs
  28. 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
  29. 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
  30. Example Twitch Live Lamp ! github.com/dkundel/twitch-live-lamp Dominik Kundel | @dkundel

    | #BerlinJS #nodebots #porgjs #coffeejs
  31. 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
  32. 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
  33. ! "Tethered" Nodebots Node.js ➡ Hardware Dominik Kundel | @dkundel

    | #BerlinJS #nodebots #porgjs #coffeejs
  34. serialport Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  35. johnny-five Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. Example #porgjs Building your own custom peripheral Dominik Kundel |

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

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

    porg Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  45. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  46. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  47. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  48. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  49. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  50. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  51. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  52. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  53. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  54. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  55. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  56. Demo of PorgJS ! github.com/dkundel/porgjs Dominik Kundel | @dkundel |

    #BerlinJS #nodebots #porgjs #coffeejs
  57. "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
  58. "Tethered" Nodebots ! Cons ⛓ Often tethered to a "host"

    " Less examples than classic Arduino projects Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  59. ! "Untethered" Nodebots JavaScript ⚭ Microcontroller Dominik Kundel | @dkundel

    | #BerlinJS #nodebots #porgjs #coffeejs
  60. JerryScript Ultra-lightweight JavaScript engine for the Internet of Things !

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

    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  62. Espruino Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  63. 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
  64. Neonious A microcontroller board, programmable and debuggable out of the

    box. ! www.neonious.com Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  65. Neonious Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  66. 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
  67. Tessel Tessel 2 is a robust IoT and robotics development

    platform. ! tessel.io Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  68. Tessel Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  69. 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
  70. Example #coffeejs JavaScript meets Coffee Machine Dominik Kundel | @dkundel

    | #BerlinJS #nodebots #porgjs #coffeejs
  71. Example #coffeejs Goals ! Control an existing device programatically "

    Build a REST API implementing IETF RFC 2324 Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  72. 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
  73. 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
  74. 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
  75. Example #coffeejs Hacking It! Dominik Kundel | @dkundel | #BerlinJS

    #nodebots #porgjs #coffeejs
  76. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  77. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  78. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  79. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  80. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  81. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  82. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  83. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  84. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  85. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  86. Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

  87. How I hacked a coffee machine using JavaScript ! bit.ly/coffee-js

    ! github.com/dkundel/htcpcp-delonghi Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  88. "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
  89. "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
  90. ! How to get started Dominik Kundel | @dkundel |

    #BerlinJS #nodebots #porgjs #coffeejs
  91. ! Finding a project Dominik Kundel | @dkundel | #BerlinJS

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

    #BerlinJS #nodebots #porgjs #coffeejs
  93. ⚒ Hack existing projects Dominik Kundel | @dkundel | #BerlinJS

    #nodebots #porgjs #coffeejs
  94. ⚡ Electronics basics Dominik Kundel | @dkundel | #BerlinJS #nodebots

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

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

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

    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs
  99. ! 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
  100. Thank You! ! Dominik Kundel " d-k.im/hardware-berlinjs # @dkundel $

    dkundel@twilio.com % github/dkundel Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs