iot bluemix mqtt demo with one button deployment from github
TRANSCRIPT
![Page 1: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/1.jpg)
Pushing Sensor Data via a HTML Phone App to IoT BluemixA -IoT Bluemix MQTT Demo with One Button deployment from GitHub
Markus van Kempen – [email protected]
@markusvankempen
The Internet of Things
9/14/2015
1
![Page 2: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/2.jpg)
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
![Page 3: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/3.jpg)
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
![Page 4: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/4.jpg)
IBM Internet of Things
Deploy IoT html Phone/App
⦁ https://github.com/markusvankempen/mvk-iot-html-phone
9/14/2015
4
![Page 5: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/5.jpg)
IBM Internet of Things
Start your App in a browser or mobile device
9/14/2015
5
![Page 6: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/6.jpg)
IBM Internet of Things
Check IoTF for messages
9/14/2015
6
![Page 7: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/7.jpg)
IBM Internet of Things
Add Node-RED boilerplate
9/14/2015
7
![Page 8: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/8.jpg)
IBM Internet of Things
Add IoT Service to Node-RED
9/14/2015
8
![Page 9: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/9.jpg)
IBM Internet of Things
Node-RED Setup
⦁ clipboard
9/14/2015
9
![Page 10: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/10.jpg)
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
![Page 11: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/11.jpg)
IBM Internet of Things
Node-RED mqtt output comand
9/14/2015
11
![Page 12: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/12.jpg)
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 }};
![Page 13: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/13.jpg)
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
![Page 14: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/14.jpg)
IBM Internet of Things
Markus van KempenExecutive Architect & Venture CapitalistIBM Corporate Technical StrategyInnovating with People and Technology
email: mvk@ ca.ibm.comTwitter: @markusvankempenHashtag: #MVK
![Page 15: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/15.jpg)
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
![Page 16: IoT Bluemix MQTT Demo with One Button deployment from GitHub](https://reader033.vdocument.in/reader033/viewer/2022051123/5871995c1a28ab044e8b5595/html5/thumbnails/16.jpg)
IBM Internet of Things9/14/2015
16