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

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

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 start?

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

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

9. @girlie_mac
LittleBits

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

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

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...

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

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 - Vs 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
● http://johnny-five.io/
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/ PubNub

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:
http://codepen.io/girliemac/pen/jqeqje

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
github.com/girliemac/RPi-KittyCam

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

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