Save 37% off PRO during our Black Friday Sale! »

[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


  1. @girlie_mac Prototyping IoT with JavaScript Tomomi Imura (@girlie_mac) Prototyping IoT

    with JavaScript by randomliteraturecouncil CC-BY 2.0 Slides: http://goo. gl/3sPI1F
  2. @girlie_mac Tomomi is a: • Front-End Engineer • Open Web

    + Tech Advocate • N00b Hardware Hacker • Sr. Developer Evangelist at PubNub
  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
  4. @girlie_mac Withings: Smart Body Analyzer GE Link Cinder Sensing Cooker

    Nest: Learning Thermostat Whistle: Connected pet collar Amazon Dash Button
  5. @girlie_mac Thermostats get Internet! Bulbs get Internet! Everything gets Internet!

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

  7. @girlie_mac Arduino • MCU-based kit • Open-Source hardware & software

    (IDE) • The first developer-friendly boards

  9. @girlie_mac LittleBits

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

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


    PINS EXTRA USB PORTS Pin Modules: • Accelerometer • Ambient light • Servo • RFID • GPS • USB modules, like camera & audio etc...
  13. @girlie_mac Raspberry Pi USB TO POWER SOURCE TO MONITOR TO

  14. @girlie_mac Raspbian OS

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

  16. @girlie_mac Programming MCU with Node.js

  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!
  18. @girlie_mac LED: Hello World of Hardware

  19. @girlie_mac Circuit 5V (Arduino) LED

  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 (Ω)
  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Ω
  22. @girlie_mac Circuit GND Anode (longer leg) Cathode 5V

  23. @girlie_mac Pin 1 3 Making It Programmable

  24. @girlie_mac Johnny-Five • JavaScript robotics framework • Works with Arduino-compatible

    Boards • IO plugins for more platform supports • Woot!
  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
  26. @girlie_mac Prototyping Smart Stuff

  27. @girlie_mac Internet of Things Bluetooth ………

  28. @girlie_mac Internet of Things w/ Data Stream Send & Receive

    Data to/from Data Center via Internet real-time!
  29. @girlie_mac Streaming Data?

  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!
  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
  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”)
  33. @girlie_mac PubNub Data Stream Network (DSN)

  34. @girlie_mac Realtime Interactivity of Today Two-way communication to/from every device

    in the world! Request/Response (REST) Data Streams
  35. @girlie_mac PubNub Use-Cases ◼ Chat ◼ Multi-player games ◼ Vehicle

    location tracking ◼ Financial data ◼ Collaborative apps ◼ IoT, Home automation
  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)
  37. @girlie_mac These hearts too! The messages are sent/received via yours

    truly, PubNub! Presence (= How many users online now?)
  38. @girlie_mac

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

  40. @girlie_mac Using the Same Circuit

  41. @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 <script src="http://cdn.pubnub. com/pubnub-3.7.15.min.js"></script>
  42. @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();
  43. @girlie_mac Demo Try control my Arduino from your browser:

  44. @girlie_mac Prototyping Hue-clone w/ RGB LED Common cathode LED R

    G B GND
  45. @girlie_mac

  46. @girlie_mac Prototyping Hue-clone w/ RGB LED {'red':215, 'green':50, 'blue':255} publish

    data subscribe data Software UI Physical Output
  47. @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!
  48. @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
  49. @girlie_mac KittyCam

  50. @girlie_mac

  51. @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)
  52. @girlie_mac PIR Sensor

  53. @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!
  54. @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!
  55. @girlie_mac

  56. @girlie_mac

  57. @girlie_mac Thank you! @girlie_mac