IBM Bluemix オンラインセミナー Bluemix いつでもWebinarシリーズ 第26回

IBM Bluemix
www.bluemix.net
IBM Bluemix オンラインセミナー
Bluemix いつでもWebinarシリーズ
第26回
「IoT 開発実践」
日本アイ・ビー・エム
システムズ・エンジニアリング株式会社
エマージング・テクノロジー 小林 祐介
IBM Bluemix
www.bluemix.net
本日のご説明内容





はじめに
デバイス向けフロントエンドの開発
バックエンドの開発
PC向けフロントエンドの開発
まとめ
2
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
本日のご説明内容
 はじめに
 IoT について
 当 Webinar の概要
 シナリオ
 取り上げるテクノロジー
 アプリケーション構造




デバイス向けフロントエンドの開発
バックエンドの開発
PC 向けフロントエンドの開発
まとめ
3
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Internet of Things (IoT) の時代の到来
家電や車、ビルや工場、橋など、世界中の様々なモ
ノがインターネットにつながり始めている
HealthCare
Smart Scales
Vending
Machine
Smart Meter
Connected car
Mobile
Container
Tracking
Heating and Air
Conditioning
Smart Deliveries
Building
Security
4
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
インターネットに接続するデバイスの推移
5
Source: Dave Evans, Internet of Things: How the Next Evolution of the Internet Is Changing Everything (Cisco, April 2011)
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
IoT デバイスの数
開発されるアプリの
が爆発的に増える
数が爆発的に増える
6
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
当 Webinar の概要
 対象：開発者
 目標：Bluemix を活用して以下を実現できるようになる
 デバイスからのデータ収集
 収集したデータを活用するための迅速な開発
 前提 : Bluemix のアカウントを取得していること
 シナリオ
 参加者のスマホから加速度を取得し可視化する
（from MQTTとアンドロイドで本格的IoTを体験しよう）
 内容
 上記シナリオを実現する上で MQTT や IoT Foundation 、
Node-RED など技術的な内容を中心に解説、一部開発
7
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
シナリオ
デバイス向けフロントエンド
バックエンド
PC向けフロントエンド
加速度データの可視化
デバイスデータの配信
加速度データの配信
スマホを振ることで
加速度やジャイロなど検知
8
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
取り上げるテクノロジー
デバイス向けフロントエンド
バックエンド
凡例：プロトコル
PC向けフロントエンド
• MQTT ブローカー
• デバイス登録・認証
MQTT プロバイダー
MQTT
MQTT
• MQTT サブスクライバー
• Node-RED
(Node.jsのビジュアル開発)
(*) 詳細は割愛
9
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
MQTT(MQ Telemetry Transport)とは？
 ブローカー・ベースの軽量なパブリッシュ/サブスクライブ型
メッセージ・プロトコル
 HTTP と MQTT のプロトコルの違い
10
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
IoT Foundation とは？
クラウド上で提供されるMQTTサーバー（MQTT ブローカー）
認証なしで、誰でも使用出来る「Quickstart」が使える
IoT Foundation
11
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED とは？
ブラウザベースのUIで、データフローを書きアプリを作成
IoT Foundationからのストリームデータを容易に加工可能
12
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーション構造
デバイス向けフロントエンド
バックエンド
PC向けフロントエンド
<<外部サービス>>
Internet of Things Foundation
<<既存アプリ, git からデプロイ>>
iot-html5-phone
<<Bluemix Service>>
<<Node-REDを利用して新規作成>>
<<既存アプリ、developerworksから入手し配置>>
カスタムアプリ
visualize.html
<<Bluemix Runtime>>
<<Bluemix Runtime>>
<<Bluemix Runtime>>
SDK for Node.js
SDK for Node.js
SDK for Node.js
IBM Bluemix
IBM Bluemix
IBM Bluemix
<<Bluemix Service>>
iotf-service
Cloudant
NoSQLDB
13
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーション構造
デバイス向けフロントエンド
- テクノロジーとのマッピング -
バックエンド
PC向けフロントエンド
<<外部サービス>>
Internet of Things Foundation
MQTT ブローカー
<<既存アプリ, git からデプロイ>>
iot-html5-phone
<<Bluemix Service>>
MQTT プロバイダー
Cloudant
<<Bluemix Service>>
iotf-service
NoSQLDB
<<Bluemix Runtime>>
SDK for Node.js
IBM Bluemix
14
<<Node-REDを利用して新規作成>>
<<既存アプリ、developerworksから入手し配置>>
カスタムアプリ
visualize.html
<<Bluemix
Runtime>>
• MQTT
サブスクライバー
for Node.js
• SDK
WebSocketサーバー
(*)
• 上記をNode-REDで開発
IBM Bluemix
WebSocketクライアント
<<Bluemix Runtime>>
(*)
SDK for Node.js
IBM Bluemix
(*) 詳細は割愛
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーション構造
デバイス向けフロントエンド
- 補足 -
バックエンド
PC向けフロントエンド
<<外部サービス>>
Internet of Things Foundation
<<既存アプリ, git からデプロイ>>
iot-html5-phone
<<Bluemix Service>>
iotf-service
<<Bluemix Service>>
Cloudant
NoSQLDB
IoT Foundationへの
SDK for接続情報を提供
Node.js
<<Bluemix Runtime>>
IBM Bluemix
• CloudantNoSQLDBへの
接続情報を提供
• <<Node-REDを利用して新規作成>>
CloudantNoSQLDBには <<既存アプリ、developerworksから入手し配置>>
IoTカスタムアプリ
Foundation接続情報を
visualization
保持（詳細は割愛）
<<Bluemix Runtime>>
<<Bluemix Runtime>>
SDK for Node.js
SDK for Node.js
IBM Bluemix
IBM Bluemix
15
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
本日のご説明内容
 はじめに
 デバイス向けフロントエンドの開発
 アプリケーションのデプロイ
 アプリケーションの実行
 Internet of Things Foundation ダッシュボードでの接続確認
 アプリケーションの理解
 バックエンドの開発
 PC向けフロントエンドの開発
 まとめ
16
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションのデプロイ
（MQTTとアンドロイドで本格的IoTを体験しよう p.8）
http://bit.ly/1RBbanR
17
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの実行
（MQTTとアンドロイドで本格的IoTを体験しよう p.9)
18
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
IoT Foundation ダッシュボードでの接続確認①
自動でバインドされた
「iotf-service」をクリック
「ダッシュボードを起動」を
クリック
19
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
IoT Foundation ダッシュボードでの接続確認②
「iotphone」というデバイス
タイプが登録されている。
これはアプリケーションにより
登録されたもの。
このダッシュボードから接続する
デバイスを追加することも可能。
次に、「デバイス」タブをクリックして、接続を確認する。
スマホで指定したデバイス名を
クリック。
20
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
IoT Foundation ダッシュボードでの接続確認③
下の方に「接続ログ」がある。
「Token auth succeeded」となっていれば接続できている。
（スマホからデバイス・データが送られている）
確認できたらデバイスの詳細情報を閉じる。
21
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの理解①
 アプリケーション・コードの確認
 （MQTTとアンドロイドで本格的
IoTを体験しよう p.18-19)
 アプリケーション・コード
Bluemix 上で稼働する
Node.js のメインコード
ブラウザ側の
メインコード
JavaScript で MQTT Client を
構成する際に必要なライブラリ
（今回は Paho を利用）
スマホのブラウザ上で
稼働するコード群
22
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
参考）Pahoとは？
MQTT の実装を簡単にするオープンソースライブラリ（C, Java, Python, JavaScript, .. )
http://www.eclipse.org/paho/
23
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの理解② シーケンス
24
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの理解② シーケンス
DB に認証情報を
問い合わせる
MQTT プロバイダーとして
IoT Foundation へ接続する際の
デバイス認証情報を要求する
• 認証情報が無かった場合、
IoT Foundation に新規に
デバイスを登録
• 登録後、認証情報を
DB に書き込み
認証情報が得られたら、
デバイスデータを送信し続ける
25
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの理解③ device.js
 デバイス認証情報の取得
IoT Foundation への
デバイス認証情報を
HTTP GET で取得
• 認証情報を取得できたら、それらを利用して
MQTT クライアントオブジェクトを生成
• なお、認証情報とは以下
次ページで解説
• 組織ID, 認証トークン、MQTT ブローカー URL
（IoT Foundation サービス・バインド時に自動設定）
• デバイスID（スマホから指定）
• デバイス・タイプ（今回は固定値。デバイス登録時に指定）
26
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの理解④ device.js
 MQTT ブローカーへの接続
• connect ファンクションで MQTT クライアント
からMQTTブローカーへ接続
• 成功時、失敗時のコールバックの他、取得済みの
認証情報（今回は認証トークン）を渡す。
• TLS 接続する場合、証明書を設定の上で接続。
 MQTT ブローカーへ送信
// (中略)
送信するデバイス・データを
JSON 形式に変換
• MQTT のメッセージを作成し、
送信する部分。
• トピックは以下
仕様は右記：iot-2/evt/<event-id>/fmt/<format>
27
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの理解⑤ app.js
デバイス認証情報の取得
• HTTP GET メソッドの定義
• デバイスIDをパラメーターに受け、
デバイス認証情報を返す
DBにデバイス認証情報があれば
HTTP レスポンスに入れて返す
• 認証情報がなければ IoT Foundation へ
HTTPS POST して新規作成（詳細次ページ）
• 今回は IoT Foundation のRESTサービス
を利用して作成しているが、前述の通り、
ダッシュボードから作成することも可能
デバイス認証情報がIoT Foundation上
登録されたらCloudantにも保持した上で
HTTP レスポンスに入れて返す
28
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの理解⑥ app.js
IoT Foundation へ接続するには資格情報が必要
この資格情報は Bluemix サービスの「資格情報の表示」
から確認できる
app.js から POST する際の資格情報は以下で指定
資格情報は VCAP_SERVICES という環境変数
から取得
29
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
本日のご説明内容
 はじめに
 デバイス向けフロントエンドの開発
 バックエンドの開発
 アプリケーションの作成
 Node-RED によるアプリケーション開発
 PC向けフロントエンドの開発
 まとめ
30
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの作成
（MQTTとアンドロイドで本格的IoTを体験しよう p.4）
31
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED によるアプリケーション開発
（MQTTとアンドロイドで本格的IoTを体験しよう p.5）
32
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 - Node の配置 （MQTTとアンドロイドで本格的IoTを体験しよう p.6）
33
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 - Node間の接続 （MQTTとアンドロイドで本格的IoTを体験しよう p.7）
34
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 - MQTT サブスクライブの設定① （MQTTとアンドロイドで本格的IoTを体験しよう p.12）
p.29で確認した資格情報の
35
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 - MQTT サブスクライブの設定② （MQTTとアンドロイドで本格的IoTを体験しよう p.13）
36
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 - MQTT サブスクライブの設定③ （MQTTとアンドロイドで本格的IoTを体験しよう p.13）
• 今回登録したデバイスのデータだけで
あれば以下でも良い
•
•
•
•
Device Type : iotphone (固定値)
Device Id : （スマホで指定した値）
Event : sensorData (MQTT Topicから)
Format : json (MQTT Topicから)
37
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 - デバッグ （MQTTとアンドロイドで本格的IoTを体験しよう p.14）
38
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 - Functionによるデータ変換 （MQTTとアンドロイドで本格的IoTを体験しよう p.15）
msg.payload= {
"ax": msg.payload.d.ax,
"ay": msg.payload.d.ay,
"az": msg.payload.d.az
};
return msg;
39
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 - 変換されたデータのデバッグ （MQTTとアンドロイドで本格的IoTを体験しよう p.16）
40
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED 開発 WebSocketの定義
（MQTTとアンドロイドで本格的IoTを体験しよう p.17)
41
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
本日のご説明内容




はじめに
デバイス向けフロントエンドの開発
バックエンドの開発
PC向けフロントエンドの開発
 アプリケーションのデプロイ
 アプリケーションの変更
 アプリケーションの実行
 まとめ
42
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションのデプロイ
（MQTTとアンドロイドで本格的IoTを体験しよう p.18-19)
https://ibm.biz/abc0720dl
43
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの変更
（MQTTとアンドロイドで本格的IoTを体験しよう p.20)
44
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
アプリケーションの実行
（MQTTとアンドロイドで本格的IoTを体験しよう p.21-22)
45
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
本日のご説明内容





はじめに
デバイス向けフロントエンドの開発
バックエンドの開発
PC向けフロントエンドの開発
まとめ
46
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
本日のまとめ
学習したこと
 MQTTを使用したデバイスからのデータ収集
MQTT ブローカー は IoT Foundation が提供
接続するデバイスの管理は IoT Foundation のダッシュボード、
または、RESTサービスより実施
RESTサービスを利用するには、Bluemix 上のIoT Foundation サービス・バインデ
ィングから資格情報を利用
MQTT プロバイド/サブスクライブ する際の認証情報は IoT Foundation から公開
MQTT トピックは IoT Foundation 上、以下の仕様
iot-2/evt/<event-id>/fmt/<format>
 収集したデータを活用するための迅速な開発
Node-RED は Node.js アプリケーション開発をノードの配置と結合で実現
 今回は MQTT サブスクライバー, データ変換のための function, WebSocketを配置
ノードの種類によって、設定は異なる
 MQTT サブスクライバー ・・・資格情報とトピック
 function・・・JavaScriptによる変換ロジック
 WebSocket ・・・タイプやパス
デバッグ・ノードによる処理結果の確認
47
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
MQTTとアンドロイドで本格的IoTを体験しよう
ibm.biz/abc0720dl
WebSocket仕様
tools.ietf.org/html/rfc6455
Java EE 7 アプリケーション設計ガイド – WebSocket編
ibm.co/209NhKd
Bluemixを試す Bluemixフリートライアル
ibm.biz/BMtrial
Bluemixについてもっと学びたい Bluemix Webinar
ibm.biz/Bmwebinar
Bluemixオンライン・ハンズオン・セミナー
ibm.biz/BMwebhandson
Bluemix技術情報
ibm.co/1rzkro2
Bluemixご紹介
ibm.co/1Wlk13M
Bluemixのお客様事例
ibm.biz/BMuserref
48
© 2015 IBM Corporation
IBM Bluemix
www.bluemix.net
49
© 2015 IBM Corporation