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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Hi!
    I'm Dominik Kundel!
    Developer Evangelist at
    ! dkundel.com
    " @dkundel
    # [email protected]
    $ github/dkundel
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Simple LED demos
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

  11. ! Preparation
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  22. APIs & Protocols Option 2
    MQTT
    Lightweight machine-to-machine publish/subscribe messaging protocol
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  26. 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;iSerial.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

    View full-size slide

  27. MQTT Subscribe
    boolean rc = mqttClient.subscribe("myTopic");
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  30. Example
    Twitch Live Lamp
    ! github.com/dkundel/twitch-live-lamp
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  33. !
    "Tethered" Nodebots
    Node.js ➡ Hardware
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  41. Example #porgjs
    Building your own custom peripheral
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  42. Goal of #porgjs:
    Build a custom peripheral device that reacts on
    events on your computer
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  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

    View full-size slide

  44. ⚠ Warning
    You might see the insides of a (toy) porg
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. Demo of PorgJS
    ! github.com/dkundel/porgjs
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  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

    View full-size slide

  58. "Tethered" Nodebots
    ! Cons
    ⛓ Often tethered to a "host"
    " Less examples than classic Arduino projects
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  59. !
    "Untethered" Nodebots
    JavaScript ⚭ Microcontroller
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  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

    View full-size slide

  61. Espruino
    Espruino is a JavaScript interpreter
    for microcontrollers.
    ! www.espruino.com
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  64. Neonious
    A microcontroller board,
    programmable and debuggable out
    of the box.
    ! www.neonious.com
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  65. Neonious
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  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

    View full-size slide

  67. Tessel
    Tessel 2 is a robust IoT and robotics
    development platform.
    ! tessel.io
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  68. Tessel
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

  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

    View full-size slide

  70. Example #coffeejs
    JavaScript meets Coffee Machine
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  75. Example #coffeejs
    Hacking It!
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  90. ! How to get started
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  96. !
    Johnny-Five
    Inventor's Kit
    ! Available on Sparkfun
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  100. Thank You!
    ! Dominik Kundel
    " d-k.im/hardware-berlinjs
    # @dkundel
    $ [email protected]
    % github/dkundel
    Dominik Kundel | @dkundel | #BerlinJS #nodebots #porgjs #coffeejs

    View full-size slide