MQTTとアンドロイドで
本格的IoTを体験しよう
2015.07.20
日本IBM 坂井 彰
MQTTとアンドロイドで本格的IoTを体験しよう
• アイデアをまずは形にしてみる
• IoT FoundationとNode-REDを使った接続と
データの確認
• Visualization： リアルタイムな表示
• アプリケーション連携でデータを表示
• Analysis： データを分析、予測
IBM Bluemix
MQTT
IoTF
Node-RED
IoT Foundation と Node-REDでIoTアプリを作成
IBM IoT Foundation デバイスIBM Bluemix
■全体像 アプリケーション スマホのセンサーで計測した データをクラウドサービスに送信 サービス アプリはサービスからセンサー データを取得して処理する IoT Foundationサービスは センサーデータを仲介するMQTTとアンドロイドで本格的IoTを体験しよう
MQTTとアンドロイドで本格的IoTを体験しよう
1. Bluemixにログインする・・・ Bluemix.net 2. Regionを米国南部(US South)に設定する 3. 「カタログ」、から、
Internet of Things Foundation Starterをクリック
URLの一部となるので 他と重複しないように名 前をつける 英数字とハイフンのみ 例) ABC0720+名前 +番号3桁
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
1. ステージングが終了するまで、しばし待つ （適宜、ブラウザのリロード） 2. アプリが稼動したら、メッセージ右側のURLをクリック 3. 画面右下の赤いボタンをクリックして Node-REDInternetフローエディターを起動 4. あらかじめ用意されているフローは使用しないので 新しいシートを作成 下図の＋をクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
左側のパレット、「Input」 から、「ibmiot」をシートに ドラッグ&ドロップ 左側のパレット、「Output」か ら、「debug」と「websocket」を ドラッグ&ドロップ 左側のパレット、「function」か ら、「function」」をドラッグ&ド ロップMQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
並べてつなぐInternet of Things Foundationと接続 （センサー／デバイスからの入力）
debugノード：流れてきているデータを右ペインに出力 functionノード：Javascriptを書いて処理を追加 websocket(出力)ノード：websocketへ出力
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
スマートフォンからMQTTでデータを飛ばす
https://github.com/ibm-messaging/IoT-html5-phone Githubの次のリポジトリーからBluemixに直接デプロイします。 画面下にスクロールし次のボタンをクリック LOGINをクリックして、BluemixのIDとパスワードでログインします アプリ名をやはり重複しないように指定（例: iot＋名前＋0720) REGION、ORGANIZATION、SPACEを確認して、DEPLOYをクリック 画面下にスクロールし次のボタンをクリックhttps://ibm.biz/abc0720
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
自動でデプロイされたアプリをクリック
アプリを名の下のURLを
スマホのブラウザー
からアクセススマホで デバイスIDの入力パネルが表示されるので、
IDを入力 (英数字のみ）
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
Bluemixの画面 で
Internet of Thingsの資格情 報の表示をクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
この画面を出した ままで
Node-REDの画 面へ移動
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
水色のノードを ダブルクリック Name(名前)は適当に記入 先ほどの画面の API Keyと API Tokenを入力。 Addをクリック
スマートフォンのデータをMQTT で取得する
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
他は全部チェックを入れて、 OKをクリック
その後、右上の Deploy ボタンをクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
右ペインを debug に切り替えて、 データが送られていること、送られ ているデータ、を確認 送られてきているデータから、加速度データ を拾うようにします。 ax, ay, az この3つを送り出すようにfunctionノードで 設定します
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
ピンクのノードを ダブルクリック msg.payload = { "ax": msg.payload.d.ax, "ay": msg.payload.d.ay, "az": msg.payload.d.az }; return msg; 入力したら OKをクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
debugノードを 追加して
右上のDeployを
クリックし、右ペインで出力さ れているデータを確認
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
websocketへの
出力を設定。ダブルクリック
Typeを Listen on として
Pathに /ws/sensor と入れて OK をクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
Node-REDのwebsocketからデータを取得する
アプリのアイコンをクリックし、画面 右上の GIT の追加 をクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
コードの編集をクリック Publicフォルダを選択し、 ファイル、インポート、 ファイルで、ダウンロードした html ファイルを アップロード
https://ibm.biz/abc0720dl
htmlファイルをダウンロードMQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
10行目を編集。xxxxxxxxxのところをNode-REDの画面のURLから
.mybluemix.net より前の部分に置換
var wsUrl = 'ws://
xxxxxxxxx
.mybluemix.net/ws/sensor';
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
画面中央上部の アイコンをクリックしてデプロイ
デプロイ終了後、経路欄のURLをクリック
デプロイ終了後、経路欄のURLをクリック
ブラウザーのURLの後ろに、/visualize.html を追加し、Enter
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
IoT Foundation と Node-REDでIoTアプリを作成
IBM IoT Foundation デバイスIBM Bluemix
■全体像 アプリケーション スマホのセンサーで計測した データをクラウドサービスに送信 サービス IoT Foundationサービスは センサーデータを仲介するMQTTとアンドロイドで本格的IoTを体験しよう
MQTT websocketBluemix User Group - BMXUG
（ビーザグ
）
Bluemixのユーザー会が発足しました！
ぜひご参加ください！
BMXUGはユーザー様主体、有志によって運営される 情報交換・ネットワーキングの場です
