ibm bluemix を使ってモバイルのセンサーデータを利用する

PowerPoint

IBM Bluemix

2015827

2015 IBM Corporation#

1

IoT

Smart Scales

Connected carMobile

Heating and Air Conditioning

Building Security

Smart DeliveriesSmart Meter

Vending Machine

HealthCare

Container Tracking


2

2020500


3

IoT

iBeacon(BLE)

OpenBlocks(BLE)DB

Cloudant

IBM BluemixIoT Foundation

Bluetooth:


4

IoTMQTTM2MIoT1N2HTTP50HTTP1/10Publish/SubscribeHTTP

TopicTopic


5

BluemixMQTT

IoT Foundation

Bluemix IoT ServiceIoT FoundationMQTTMQTT BrokerQuick Start ServiceBluemix IoT ServiceMQTTMQTT Subscriber


6

IBM IoT Foundation

IBM BluemixMQTT BrokerPublishMQTT BrokerSubscribeGoogle MapIoT Foundation

MQTTGoogle Map


7

1 : http://goo.gl/DkFQvM

QR & MQTTWebDevice ID / / Geo Location API JavascriptMQTTMQTTJavascriptBluemix


8

2 : Node-Red

MQTT SubscribeWeb SocketHTTP GET RequestResponseHTMLGoogle Map APIHttp Response


9

3 : Google Map


10

1.


11

WebNode-RED StarterWebHTML + JavascriptMQTT SubscribeNode-RedNode-RED Starter

Node-RED Starter

CreateBluemix


12

Node-RED Node-REDWebLocal PCHTML / JavascriptBluemix


13

Copy


14

GithubGithubhttps://github.com/MasayaFujita/Phone_SensorpublicCopy

sensor_mqtt_htmljs publicCopy


15

sensor_mqtt.htmlHTML

js/sensor_mqtt.jsGeolocation APIMQTT BrokerIoT Foundation)

js/mqttws31.jsPaho MQTT Javascript client libraryJavascriptMQTT ClientPublisher, SubscriberLibrary


16

HTML : sensor_mqtt.html

headPaho MQTT Javascript ClientJS FilejQuery & MQTTJavascript


17

Geolocation APIGeolocation APIjavascriptAPILANWiFiGPSIP

positionposition jQueryHTML


18

Paho MQTT Javascript client: Paho MQTT Javascript ClientWebsocketMQTT BrokerJavascript Libraryhttp://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/plain/src/mqttws31.jsJSONMQTT BrokerObjectUserMQTTTopic: /WorldSubscribeTopic: /WorldPublishPaho


19

Paho MQTT Javascript client:

IDIoT FoundationQuickstart (MQTTObjectObjectJSONMQTT Publish


20

cf Local PCBluemixcf Githubhttps://github.com/cloudfoundry/cliOS Xcf -v

OK Mac >>


21

cf Bluemixpackage.jsoncf login Bluemix> cf login -a https://api.ng.bluemix.net

Bluemix IDPass


22

Bluemixcf push BluemixPush> cf push (


23

Webhttp://().mybluemix.net/sensor_mqtt.html


24

2. Google MapNode-RED


25

Node-RED IBM Hursley Emerging Technology Team2013GitHub 2014Qcon


26

Node-RED UInode.js NodeNodeBluemix

API"Bluemix


27

Node-REDNode Infomation

UI


28

&

Node-RED

DeployNode-RED


29

NodeInputOutputFunction SocialTwitter/Mail/ircStorageDBDBAnalysisAdvancedRSS/atom

///DB/Node-RED ()


30

NodeInjectororor()httphttp://[xxxxxxx].mybluemix.net/[URL]Mail(text/plain)TwitterTweetTweet()FeedparseRSS/atom-


31

NodeFunctionSwitchDelayhttp requestCloudantDBDBSentimentHtmlHTML

/


32

NodeDebughttp responsehttp requestCloudantDBMail

/DB


33

JavaScript

node

http://nodered.org/docs/writing-functions.html

function return msg; node


34

Node-RED

msgmsg node JSON msg.payload msg.

context node JSON

context.global node context

context.global


35

Node-REDBluemixLinkNode-RED


36

IoT FoundationMQTT

ibmiot & MQTTDevice IDSubscribeMQTTibmiotQuickstartDevice ID

Device ID


37

debugdebugibmiotDeployNode-REDDeploydebugJSONOK


38

11Messagedelay

ActionLimit rate toRate1 msg(s) per Seconddrop intermediate message (Deploy1debug


39

var latitude = msg.payload.d.location.lat;var longitude = msg.payload.d.location.lng;msg.payload = '[{"lat":"' + latitude + '","lng":"' + longitude + '"}]'; return msg;functionfunction

functionjavascript msg.payloadMQTTJSONmsg.payloadDeploy


40

Google Map API 1

WebSocket

/locationHTTP GET Google MapHTMLWebSocketHTTP


41

Google Map API 2 NodeImportJSONCopyMenuImportImportNode

JSONNode


42

ImportNode[{"id":"9457624.f6ba8a","type":"websocket-listener","path":"/ws/phone_location","wholemsg":"false"},{"id":"e0e0edd5.1f1f1","type":"function","name":"function 1","func":"// The received message is stored in 'msg'\n// It will have at least a 'payload' property:\n// console.log(msg.payload);\n// The 'context' object is available to store state\n// between invocations of the function\n// context = {};\ncontext.global.location = msg.payload;\n\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":178,"z":"b92fcfc3.46d03","wires":[["79854d92.867ab4"]]},{"id":"e2cc9f01.1d336","type":"function","name":"function 2","func":"// The received message is stored in 'msg'\n// It will have at least a 'payload' property:\n// console.log(msg.payload);\n// The 'context' object is available to store state\n// between invocations of the function\n// context = {};\n\nmsg.payload = context.global.location;\n\nreturn msg;","outputs":1,"noerr":0,"x":446.9999694824219,"y":239,"z":"b92fcfc3.46d03","wires":[["79854d92.867ab4"]]},{"id":"79854d92.867ab4","type":"websocket out","name":"","server":"9457624.f6ba8a","client":"","x":662.9999847412109,"y":239,"z":"b92fcfc3.46d03","wires":[]},{"id":"d38b4a94.2c74b8","type":"http response","name":"","x":648.9999847412109,"y":315,"z":"b92fcfc3.46d03","wires":[]},{"id":"9280276.f6d7fd8","type":"template","name":"Google Map HTML","field":"","template":"\n\n\n Phone Location\n \n \n \n \n \n #map {\n position:absolute;\n top: 0; bottom: 0; left: 0; right: 0;\n }\n \n\n\n \n \n \n var socketaddy = \"ws://phonefujita.mybluemix.net/ws/phone_location\";\n var map;\n var sock;\n $(document).ready(function(){\n map = new GMaps({\n div: '#map',\n lat: -12.043333,\n lng: -77.028333\n });\n sock = new WebSocket(socketaddy);\n sock.onopen = function(){ console.log(\"Connected websocket\");\n console.log(\"Sending ping..\");\n sock.send(\"Ping!\");\n console.log(\"Ping sent..\");\n };\n sock.onerror = function(){ console.log(\"Websocket error\"); };\n sock.onmessage = function(evt){\n var latlng = JSON.parse(evt.data);\n var array = $.map(latlng, function(el) {\n return [[el.lat, el.lng]];\n });\n \n map.removeMarkers();\n map.removePolylines();\n console.log(\"Got marker at \" + latlng[0].lat + \", \" + latlng[0].lng, latlng);\n map.setZoom(17);\n map.setCenter(latlng[0].lat, latlng[0].lng);\n map.addMarkers(latlng);\n map.drawPolyline({\n path: array,\n strokeColor: '#131540',\n strokeOpacity: 0.6,\n strokeWeight: 6\n });\n }\n });\n \n\n","x":431,"y":316,"z":"b92fcfc3.46d03","wires":[["d38b4a94.2c74b8"]]},{"id":"19638c78.e69c74","type":"http in","name":"","url":"/location","method":"get","swaggerDoc":"","x":207.99998474121094,"y":315,"z":"b92fcfc3.46d03","wires":[["9280276.f6d7fd8"]]},{"id":"fd0f1e9b.02f0e","type":"websocket in","name":"","server":"9457624.f6ba8a","client":"","x":239.99998474121094,"y":239,"z":"b92fcfc3.46d03","wires":[["e2cc9f01.1d336"]]}]


43

Google Map API 3 WebSocketGoogle Map HTMLNode

HTML FileWebSocketws://().mybluemix.net/ws/phone_location

HTMLNodeHTMLCopyDeploy


44

MQTTGoogle MapDebug1Google MapWeb Page/LocationHTTP GET Requesthttp://().mybluemix.net/locationGoogle MapChrome Console1


45

IoTIoTMQTT

IBMMQTTIoT Foundation

Node-REDIoT

JavascriptMQTTWebSocketMQTTPaho


46

WEBhttp request node msg.url : WEBURLmsg.method: GET, PUT msg.header: msg.payload: bodymsg.topic: URL ? ?


47

API

https://webservice.rakuten.co.jp/api/simplehotelsearch/


48

Node-RED Node-RED

Node-RED ExportNode-REDTextImportTextImport/Export


49

Appendix - NodeNodenodesHTMLjsHTMLNodejsNodehttp://nodered.org/docs/creating-nodes/first-node.html


50

lower-case.html, lower-case.js

lower-case.htmllower-case.jshttp://nodered.org/docs/creating-nodes/first-node.html


51

https://github.com/node-redhttp://flows.nodered.org node flow


52