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

[Mobile+Web DevCon] Prototyping Internet of Things with JavaScript and PubNub

[Mobile+Web DevCon] Prototyping Internet of Things with JavaScript and PubNub

In the era of Internet of Things, connecting things to the mobile devices and web is becoming ubiquitous. You can control room light using your mobile phone. You can monitor your heart rate and weight on browser. Front-end developers like you already have skills to prototype software ideas, so why not prototyping the Internet of Everything?

- Arduino
- Johnny-Five JS robotics framework
- PubNub Data Stream Network

Tomomi Imura

April 28, 2016
Tweet

More Decks by Tomomi Imura

Other Decks in Technology

Transcript

  1. @girlie_mac
    Prototyping IoT
    with JavaScript
    Tomomi Imura (@girlie_mac)
    Prototyping IoT
    with JavaScript
    https://flic.kr/p/8tuc1u by randomliteraturecouncil CC-BY 2.0
    Slides: http://goo.
    gl/3sPI1F

    View full-size slide

  2. @girlie_mac
    Tomomi is a:
    ● Front-End Engineer
    ● Open Web + Tech Advocate
    ● N00b Hardware Hacker
    ● Sr. Developer Evangelist at
    PubNub

    View full-size slide

  3. @girlie_mac Source: PLATFORM, data based on Cisco IBSG
    Estimate 50B by
    2020
    non-human/human =
    6.58
    2003:
    non-human/human =
    0.08
    2015:
    non-human/human =
    3.47
    2008:
    non-human/human >= 1
    Era of Internet of Things

    View full-size slide

  4. @girlie_mac
    Withings: Smart Body Analyzer
    GE Link
    Cinder
    Sensing Cooker
    Nest: Learning
    Thermostat
    Whistle: Connected pet collar
    Amazon
    Dash Button

    View full-size slide

  5. @girlie_mac
    Thermostats get Internet!
    Bulbs get Internet!
    Everything gets Internet!

    View full-size slide

  6. @girlie_mac
    OK, connect
    me with
    InterWeb...
    Srsly, where should I start?

    View full-size slide

  7. @girlie_mac
    Arduino
    ● MCU-based kit
    ● Open-Source hardware &
    software (IDE)
    ● The first developer-friendly
    boards

    View full-size slide

  8. @girlie_mac
    Arduino
    USB PLUG
    TO
    COMPUTER
    EXTERNAL POWER
    SOURCE
    GPIO DIGITAL PINS
    ANALOG PINS

    View full-size slide

  9. @girlie_mac
    LittleBits

    View full-size slide

  10. @girlie_mac
    LittleBits & Arduino at Heart
    9V BATTERY
    USB PLUG TO COMPUTER
    MODULES

    View full-size slide

  11. @girlie_mac
    Arduino-Compatible MCUs
    BeagleBone
    C.H.I.P
    mCookie
    Petduino
    LinkIt One

    View full-size slide

  12. @girlie_mac
    Tessel USB PLUGS TO
    COMPUTER ETHERNET
    MODULES
    GPIO DIGITAL PINS
    EXTRA USB
    PORTS
    Pin Modules:
    ● Accelerometer
    ● Ambient light
    ● Servo
    ● RFID
    ● GPS
    ● USB modules,
    like camera &
    audio
    etc...

    View full-size slide

  13. @girlie_mac
    Raspberry Pi
    USB TO POWER
    SOURCE
    TO MONITOR
    TO MOUSE
    TO KEYBOARD
    WI-FI ADAPTER
    SD CARD
    GPIO DIGITAL PINS
    4 EXTRA USB
    PORTS
    ETHERNET

    View full-size slide

  14. @girlie_mac
    Raspbian OS

    View full-size slide

  15. @girlie_mac
    Programming Raspberry Pi
    Pre-installed on RPi:
    C / C++

    View full-size slide

  16. @girlie_mac
    Programming MCU with Node.js

    View full-size slide

  17. @girlie_mac
    Programming Pi with Node.js
    Download & install Node.js (v0.12.6) with node-
    arm:
    $ wget http://node-arm.herokuapp.
    com/node_archive_armhf.deb
    $ sudo dpkg -i node_archive_armhf.deb
    You may not want the
    latest node.js!

    View full-size slide

  18. @girlie_mac
    LED:
    Hello World of
    Hardware

    View full-size slide

  19. @girlie_mac
    Circuit
    5V (Arduino)
    LED

    View full-size slide

  20. @girlie_mac
    Ohm’s Law & Resistors
    R =
    V - V
    s f
    I
    source voltage (V) forward voltage (V) (LED
    voltage drop)
    current thru the LED (A)
    resistance (Ω)

    View full-size slide

  21. @girlie_mac
    Ohm’s Law & Resistors
    R =
    5 - 1.9
    0.02
    source voltage (V) forward voltage (V) (LED
    voltage drop)
    current thru the LED (A)
    resistance (Ω)
    = 155Ω

    View full-size slide

  22. @girlie_mac
    Circuit
    GND
    Anode
    (longer leg)
    Cathode
    5V

    View full-size slide

  23. @girlie_mac
    Pin 1 3
    Making It Programmable

    View full-size slide

  24. @girlie_mac
    Johnny-Five
    ● JavaScript robotics framework
    ● Works with Arduino-compatible
    Boards
    ● IO plugins for more platform
    supports
    ● http://johnny-five.io/
    Woot!

    View full-size slide

  25. @girlie_mac
    Blinking LED
    var five = require('johnny-five');
    var board = new five.Board();
    board.on('ready', function() {
    var led = new five.Led(13); // Create an instance
    led.blink(500); // "blink" in 500ms on-off intervals
    });
    Pin number

    View full-size slide

  26. @girlie_mac
    Prototyping Smart Stuff

    View full-size slide

  27. @girlie_mac
    Internet of Things
    Bluetooth
    ………

    View full-size slide

  28. @girlie_mac
    Internet of Things w/ Data Stream
    Send & Receive Data to/from Data
    Center via Internet real-time!

    View full-size slide

  29. @girlie_mac
    Streaming
    Data?

    View full-size slide

  30. @girlie_mac
    vs. Streaming Media
    Listening/watching “real-time”
    ● Music
    ● Videos
    ● Live webcasts
    There is no file to download,
    just a continuous stream of data!

    View full-size slide

  31. @girlie_mac
    Streaming Data w/ PubNub
    No media, just data!
    ● Small data (no buffering!)
    ● Publishing/Subscribing in
    true realtime (low latency!)
    ● Broadcast, unicast,
    multiplex

    View full-size slide

  32. @girlie_mac
    CDN vs. DSN
    Content Delivery & Data Stream Networks are similar:
    ● Deliver contents (or data) to a user based on the
    geographic locations
    ● Copy contents (or data) to network at diff locations
    ● Provide protection for large traffic surges
    Difference: Static contents vs. realtime data (“Data in
    Motion”)

    View full-size slide

  33. @girlie_mac
    PubNub Data Stream Network (DSN)

    View full-size slide

  34. @girlie_mac
    Realtime Interactivity of Today
    Two-way communication to/from every device in the world!
    Request/Response (REST) Data Streams

    View full-size slide

  35. @girlie_mac
    PubNub Use-Cases
    ◼ Chat
    ◼ Multi-player games
    ◼ Vehicle location tracking
    ◼ Financial data
    ◼ Collaborative apps
    ◼ IoT, Home automation

    View full-size slide

  36. @girlie_mac
    PubNub Use-Cases: Who uses?
    ◼ Chat (Periscope)
    ◼ Multi-player games (DeNA, PocketGems)
    ◼ Vehicle location tracking (Lyft, GetTaxi)
    ◼ Financial data (TD Ameritrade, SAP)
    ◼ Collaborative dev tools (Balsamiq, CodePen)
    ◼ IoT, Home automation (Insteon, Logitech)

    View full-size slide

  37. @girlie_mac
    These hearts too!
    The messages
    are
    sent/received
    via yours truly,
    PubNub!
    Presence (= How
    many users online
    now?)

    View full-size slide

  38. @girlie_mac
    Streaming Data between Devices
    Data streaming among devices w/ PubNub

    View full-size slide

  39. @girlie_mac
    Using the Same Circuit

    View full-size slide

  40. @girlie_mac
    Sending Data from browser
    var pubnub = PUBNUB.init({
    subscribe_key: 'sub-c-...',
    publish_key: 'pub-c-...'
    });
    function lightOn() {
    pubnub.publish({
    channel: 'led',
    message: {blink: true},
    callback: function(m) {console.log(m);},
    error: function(err) {console.log(err);}
    });
    }
    document.querySelector('button')
    .addEventListener('click', lightOn);
    button click

    View full-size slide

  41. @girlie_mac
    Receiving Data to MCU
    var pubnub = require('pubnub').init({
    subscribe_key: 'sub-c-...',
    publish_key: 'pub-c-...'
    });
    pubnub.subscribe({
    channel: 'led',
    callback: function(m) {
    if(m.blink) {
    // blink LED w/ Johnny-Five
    }
    }
    });
    led.pulse();

    View full-size slide

  42. @girlie_mac
    Demo
    Try control my Arduino from your browser:
    http://codepen.io/girliemac/pen/jqeqje

    View full-size slide

  43. @girlie_mac
    Prototyping Hue-clone w/ RGB LED
    Common cathode LED
    R
    G
    B
    GND

    View full-size slide

  44. @girlie_mac
    Prototyping Hue-clone w/ RGB LED
    {'red':215,
    'green':50,
    'blue':255}
    publish data
    subscribe data
    Software UI Physical Output

    View full-size slide

  45. @girlie_mac
    Sending Data from browser
    redInput.addEventListener('change', function(e){
    publishUpdate({color: 'red', brightness: +this.value});
    }, false);
    function publishUpdate(data) {
    pubnub.publish({
    channel: 'hue',
    message: data
    });
    }
    Send the red value to PubNub to
    tell the MCU to reflect the
    change!
    the value has
    changed! Publish the
    new value!

    View full-size slide

  46. @girlie_mac
    Receiving Data to LED
    pubnub.subscribe({
    channel: 'hue',
    callback: function(m) {
    if(led) {
    r = (m.color === 'red') ? m.brightness : r;
    g = (m.color === 'green') ? m.brightness : g;
    b = (m.color === 'blue') ? m.brightness : b;
    led.color({red: r, blue: b, green: g});
    }
    }
    });
    to the GPIO pins
    that connect to
    LED anodes

    View full-size slide

  47. @girlie_mac
    KittyCam

    View full-size slide

  48. @girlie_mac
    KittyCam in Node.js
    1. Detect motion (Johnny-Five IR.Motion obj)
    2. Take photos (Raspistill, command line tool)
    3. Cat facial detection (KittyDar)
    4. Store the photos in Cloudinary
    5. Publish the data to PubNub
    6. Stream on web (subscribe the data from
    PubNub)

    View full-size slide

  49. @girlie_mac
    PIR Sensor

    View full-size slide

  50. @girlie_mac
    PIR Sensor > Run Camera
    board.on('ready', function() {
    // Create a new `motion` hardware instance.
    var motion = new five.Motion(7); //a PIR is wired on pin 7 (GPIO 4)
    // 'calibrated' occurs once at the beginning of a session
    motion.on('calibrated', function() {console.log('calibrated');});
    motion.on('motionstart', function() { // Motion detected
    // Run raspistill command to take a photo with the camera module
    var filename = 'photo/image_'+i+'.jpg';
    var args = ['-w', '320', '-h', '240', '-o', filename, '-t', '1'];
    var spawn = child_process.spawn('raspistill', args);
    ...
    motion detected!
    Take a photo!

    View full-size slide

  51. @girlie_mac
    Processing Photo
    ...
    spawn.on('exit', function(code) {
    if((/jpg$/).test(filename)) {
    var imgPath = __dirname + '/' + filename;
    // Child process: read the file and detect cats with KittyDar
    var args = [imgPath];
    var fork = child_process.fork(__dirname+'/detectCatsFromPhoto.js');
    fork.send(args);
    // the child process is completed
    fork.on('message', function(base64) {
    if(base64) {
    // Send to cloud storage
    }
    }); ...
    var kittydar = require
    ('kittydar');
    a cat detected!

    View full-size slide

  52. @girlie_mac
    github.com/girliemac/RPi-KittyCam

    View full-size slide

  53. @girlie_mac
    https://twit.tv/shows/new-screen-savers/episodes/19

    View full-size slide

  54. @girlie_mac
    Thank you!
    @girlie_mac
    github.com/girliemac
    speakerdeck.com/girlie_mac
    pubnub.com
    github.com/pubnub

    View full-size slide