MQTTとアンドロイドで本格的IoTを体験しよう

Size: px

Start display at page:

Download "MQTTとアンドロイドで本格的IoTを体験しよう"

すずりみやまる
5 years ago
Views:

1 日本 IBM 坂井彰 IBM Bluemix

2 アイデアをまずは形にしてみる IoT Foundation と Node-RED を使った接続とデータの確認 Visualization: リアルタイムな表示アプリケーション連携でデータを表示 MQTT IoTF Node-RED Analysis: データを分析予測 IBM Bluemix

3 IoT Foundation と Node-RED で IoT アプリを作成全体像サービスアプリケーション IoT Foundation サービスはセンサーデータを仲介する IBM IoT Foundation デバイス IBM Bluemix スマホのセンサーで計測したデータをクラウドサービスに送信アプリはサービスからセンサーデータを取得して処理する

4 1. Bluemix にログインする Bluemix.net 2. Region を米国南部 (US South) に設定する 3. カタログから Internet of Things Foundation Starter をクリック URL の一部となるので他と重複しないように名前をつける英数字とハイフンのみ例 ) ABC0720+ 名前 + 番号 3 桁

5 1. ステージングが終了するまでしばし待つ ( 適宜ブラウザのリロード ) 2. アプリが稼動したらメッセージ右側の URL をクリック 3. 画面右下の赤いボタンをクリックして Node-REDInternet フローエディターを起動 4. あらかじめ用意されているフローは使用しないので新しいシートを作成下図の + をクリック

6 左側のパレット Input から ibmiot をシートにドラッグ & ドロップ左側のパレット Output から debug と websocket をドラッグ & ドロップ左側のパレット function から function をドラッグ & ドロップ

7 並べてつなぐ Internet of Things Foundation と接続 ( センサー / デバイスからの入力 ) debug ノード : 流れてきているデータを右ペインに出力 function ノード :Javascript を書いて処理を追加 websocket( 出力 ) ノード :websocket へ出力

スマートフォンから MQTT でデータを飛ばす Github の次のリポジトリーから Bluemix に直接デプロイします https://github.com/ibm-messaging/iot-html5-phone https://ibm.

8 スマートフォンから MQTT でデータを飛ばす Github の次のリポジトリーから Bluemix に直接デプロイします画面下にスクロールし次のボタンをクリック LOGIN をクリックして Bluemix の ID とパスワードでログインしますアプリ名をやはり重複しないように指定 ( 例 : iot+ 名前 +0720) REGION ORGANIZATION SPACE を確認して DEPLOY をクリック画面下にスクロールし次のボタンをクリック

9 自動でデプロイされたアプリをクリックアプリを名の下の URL をスマホのブラウザーからアクセススマホでデバイス ID の入力パネルが表示されるので ID を入力 ( 英数字のみ )

10 Bluemix の画面で Internet of Things の資格情報の表示をクリック

11 この画面を出したままで Node-RED の画面へ移動

12 スマートフォンのデータを MQTT で取得する水色のノードをダブルクリック Name( 名前 ) は適当に記入先ほどの画面の API Key と API Token を入力 Add をクリック

13 他は全部チェックを入れて OK をクリックその後右上の Deploy ボタンをクリック

14 右ペインを debug に切り替えてデータが送られていること送られているデータを確認送られてきているデータから加速度データを拾うようにします ax, ay, az この 3 つを送り出すように function ノードで設定します

15 ピンクのノードをダブルクリック msg.payload = { "ax": msg.payload.d.ax, "ay": msg.payload.d.ay, "az": msg.payload.d.az }; 入力したら OK をクリック return msg;

16 debug ノードを追加して右上の Deploy をクリックし右ペインで出力されているデータを確認

17 websocket への出力を設定ダブルクリック Type を Listen on として Path に /ws/sensor と入れて OK をクリック

18 Node-RED の websocket からデータを取得するアプリのアイコンをクリックし画面右上の GIT の追加をクリック Bluemix の ID とパスワードでログインしリポジトリーをセットアップします

19 html ファイルをダウンロードコードの編集をクリック Public フォルダを選択しファイルインポートファイルでダウンロードした html ファイルをアップロード

20 インポートした visualize.html をクリック 10 行目を編集 xxxxxxxxx のところを Node-RED の画面の URL から.mybluemix.net より前の部分に置換 var wsurl = 'ws://xxxxxxxxx.mybluemix.net/ws/sensor';

21 画面中央上部のアイコンをクリックしてデプロイデプロイ終了後経路欄の URL をクリックデプロイ終了後経路欄の URL をクリックブラウザーの URL の後ろに /visualize.html を追加し Enter /visualize.html

22 スマホを動かしてメーターに表示されることを確認

23 IoT Foundation と Node-RED で IoT アプリを作成全体像サービスアプリケーション IoT Foundation サービスはセンサーデータを仲介する IBM IoT Foundation websocket デバイス MQTT IBM Bluemix スマホのセンサーで計測したデータをクラウドサービスに送信

24 Bluemix User Group - BMXUG( ビーザグ ) Bluemix のユーザー会が発足しました! ぜひご参加ください! BMXUG はユーザー様主体有志によって運営される情報交換ネットワーキングの場です

25 BMXUG への参加方法でグループに参加でコミュニティに参加

26 IBM Bluemix Challenge 2015 IBM Bluemix を利用したアプリ開発コンテスト米国 IBM Watson 研究所ご招待 Oculus Rift など多数の副賞参加者特典として参加者のフリートライアル期間を延長ぜひご参加ください!! 一般部門 : 応募締切 7 月 24 日 ( 金 ) 特典 :Bluemix 無償利用 90 日提供副賞 :Watson 研究所ご招待 Oculus Rift 他新しい未来を予感できるアプリやサービス ( 学生の参加も可能 ) 学生部門 : 応募締切 8 月 20 日 ( 木 ) 特典 :Bluemix 無償利用 120 日提供副賞 :Watson 研究所ご招待コネクテッドビークルまたはモビリティ / トランスポーテーションを支えるアプリ ( 応募資格 : 大学生 / 大学院生限定 )

(Microsoft PowerPoint - Bluemix HandsOn 2nd \222}\224g\221\345\212w\227l.pptx)

$(Microsoft PowerPoint - Bluemix HandsOn 2nd \222}\224g\221\345\212w\227l.pptx)$ アプリ作成の新しい形を体験する IBM Bluemix 体験ハンズオン日本アイビーエム株式会社クラウドソフトウェア事業部エコシステムデベロップメント 1 Agenda IBM Bluemix 基本操作 IDS と連携したアプリケーション開発 Node-RED で IoT アプリの作成 Node-RED で Web API を活用したアプリを動かすまとめ : API 活用によるアプリ開発と

MQTTとアンドロイドで 本格的IoTを体験しよう

MQTTとアンドロイドで本格的IoTを体験しよう