Pushing Sensor Data via a HTML Phone App to IoT BluemixA -IoT Bluemix MQTT Demo with One Button deployment from GitHub

Markus van Kempen – mvk@ca.ibm.com

@markusvankempen

The Internet of Things

9/14/2015

1

IBM Internet of Things

Demo

⦁ This demo / scenario will show how to deploy a github application with one click to Bluemix and

setup IOTF and a Cloudant database as well as the application itself

⦁ The HTML Phone app will send location data to IoTF in Bluemix via MQTT

⦁ We will show how to configure Node-RED to send MQTT command to the HTML App which will

change the background color.

9/14/2015

2

IBM Internet of Things

Internet

Scenario Overview

9/14/2015

3

MQTT Publish Hosts messages

Topic: iot-2/type/iotphone/id/YourName/evt/+/fmt/json

Send Command to change color

Node-RED

Topic:iot-2/cmd/+/fmt/json

IBM Internet of Things

Deploy IoT html Phone/App

⦁ https://github.com/markusvankempen/mvk-iot-html-phone

9/14/2015

4

IBM Internet of Things

Start your App in a browser or mobile device

9/14/2015

5

IBM Internet of Things

Check IoTF for messages

9/14/2015

6

IBM Internet of Things

Add Node-RED boilerplate

9/14/2015

7

IBM Internet of Things

Add IoT Service to Node-RED

9/14/2015

8

IBM Internet of Things

Node-RED Setup

⦁ clipboard

9/14/2015

9

IBM Internet of Things

Node-RED mqtt message example function

var now = ( new Date() ).getTime();

var col = "#"+Math.random().toString(16).slice(-6);

var newMsg = {"d":{ "myName":"MarkusViaNodeRed", "Action" : 55, "Color" : col, "Special" : "Breath",

"MSGNO" : 2, "ts" : now }};

var myMsg = {payload : JSON.stringify(newMsg)};

return myMsg;

9/14/2015

10

IBM Internet of Things

Node-RED mqtt output comand

9/14/2015

11

IBM Internet of Things

Internet

Send CMD Scenario

9/14/2015

12

Send Command to change color

Node-RED

Topic:iot-2/cmd/+/fmt/json

{"d":{ "myName":"MarkusViaNodeRed", "Action" : 55,

"Color" : col, "Special" : "Breath", "MSGNO" : 2, "ts" : now }};

IBM Internet of Things9/14/2015

13

Reference and Code

Github:

HTML Phone App - Send/receive mqtt message IOTF

https://github.com/markusvankempen/mvk-iot-html-phone

Youtube:

https://youtu.be/XiDY4tfFTg0

IBM Internet of Things

Markus van KempenExecutive Architect & Venture CapitalistIBM Corporate Technical StrategyInnovating with People and Technology

email: mvk@ ca.ibm.comTwitter: @markusvankempenHashtag: #MVK

IBM Internet of Things

Less talking, More doing

Learn more about Internet of Things from IBM

ibm.com/IoT

Try out Internet of Things on IBM Bluemix

ibm.biz/try_iot

Join us in our IoT conversations

@IBMIoT

Get started today

9/14/2015

15

IBM Internet of Things9/14/2015

16