Node red hands on - public
•
9 likes•2,767 views
Material used in http://paas.connpass.com/event/17139/
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Node red hands on - public
Similar to Node red hands on - public (20)
More from Takehiko Amano
More from Takehiko Amano (9)
Node red hands on - public
- 2. © 2015 @ibmamnt 自己紹介 ~ 名前： 天野 武彦 所属：IBM 東京ソフトウェア開発研究所 主な活動： 先端開発技術の推進・啓蒙 （エリア： Cloud Foundry, DevOps DevOps 等) 趣味： 目下のところ育児に没頭 Twitter: @ibmamnt ブログ： http://amanoblog.wordpress.com Cloud Foundry 百⽇⾏参加しています！
- 4. © 2015 @ibmamnt お願い • 質問は以下のURLに書き込んでください https://etherpad.mozilla.org/fSOxhPPUUD
- 5. © 2015 @ibmamnt Node-RED について • IBM 英国Hursley 研究所の Emerging Technology Teamで開発されたソフトウェア – 2013年、社内ハッカソンで堂々⼀位、GitHub に登録 – 2014年 Qcon で発表してからブレーク
- 6. © 2015 @ibmamnt ハンズオン学習＆演習もくじ 1. いきなり演習 – 演習1.1 - Hello World – 演習1.2 - Twitter メッセージを拾う – 演習1.3 - Twitter メッセージを表示するアプリケーションの作成 2. Node-RED のキホン – 演習 2.1 - 既存 nodeの追加 3. Internet of Things と PaaS との連携 – 演習 3.1 - IoTデバイスからのメッセージを受け取る 4. おまけ – 宿題：出席簿を作成しましょう – Appendix: node を作ろう
- 7. © 2015 @ibmamnt Twitter メッセージを表示するアプリケー ションの作成 いきなり演習！
- 8. © 2015 @ibmamnt 1.1 Hello World • input/inject と output/debug node を配置しつなぎます • inject node をダブルクリック して、Payload に – string – Hello World を⼊⼒し、OK ボタンをクリッ クします • “Deploy” ボタンをクリックし ます • “inject” node の左をクリック します • Debug タブを確認します ここをクリック
- 9. © 2015 @ibmamnt 1.2 Twitterメッセージを拾う • social/twitter, output/debug node を配置してつなぎます • twitter node をダブルクリック して自twitter アカウントを設定 します • フォローしたい人、ハッシュタ グ等を⼊⼒します • Deploy ボタンをクリックしま す • Debug タブを確認します
- 11. © 2015 @ibmamnt 1.3 Twitter メッセージを表示す るアプリケーションの作成① • https://gist.github.com/ ibmamnt/ba7a4343ba 9bd79433cc からコードを取得し index.html として保 存します • wsUrl 変数を変更しま す。 – <change-this-url> を Node-RED が稼働して いるホスト名に変更し てください var wsUri = "ws://<change-this- url>/ws/twitter" 例： var wsUri = "ws://localhost:1880/ws/twitter"
- 12. © 2015 @ibmamnt 1.3 Twitter メッセージを表示す るアプリケーションの作成② • function/function , output/websocket を配置し て、右図のようにつなぎま す（twitter/debug node は function につなぎ直し） • function に以下のコードを 入れます • “websocket” node を設定し ます Type: Listen on Path: /ws/twitter • DEPLOYボタンをクリック します msg.payload = msg.tweet; return msg;
- 13. © 2015 @ibmamnt 簡単なWEBアプリケーション できましたか？ • index.html ファイルをひらいてみてください
- 14. © 2015 @ibmamnt このアプリケーションの動作 Node-RED 検索 送信 websockettwitterAPI websocket作成 onmessage() で処理 html の作成とレンダリン グ index.html
- 16. © 2015 @ibmamnt Node-REDの特徴 • ブラウザベース UI • node.js で動作 – 軽量 • 機能を node package manager (npm) で 簡単に追加できるように した
- 17. © 2015 @ibmamnt Node-RED 画面 Node Infomation または デバッグコンソール デプロイ実⾏ シート ノード ノードパレット 表示情報の 切り替え実装UI 処理フロー
- 20. © 2015 @ibmamnt Node分類 機能 Input イベントの起動条件の設定 Output 外部アプリへの送信 Function イベント分岐、受信データの変換、一時停止 等 Social Twitter/Mail/ircの送受信 Storage DBへの保存、DB検索 Analysis 分析 Advanced RSS/atomの更新受信時にイベント起動 コネクタが右側に存在 ⇒①イベントの起動 イベント起動条件を満 たしたとき、その情報 を送信する コネクタが左右に存在 ⇒②データ変換/分岐 左からデータ受信。 それを変換/分岐させ、右側に結 果を返す コネクタが左側に存在 ⇒③外部アプリ起動/DB保存 左からデータを受信し、それ を送信/保存 Node-RED標準搭載ノードの紹介
- 21. © 2015 @ibmamnt ①イベントの起動 Node名称 イベント開始条件 後続フローに送信する内容 Inject 定期起動orノードのクリック 指定⽂字列or現在時刻or 情報なし(起動のみ) デバック向けの機能。 http http://[xxxxxxx].mybluemix .net/[ノードのURL]リクエス ト送信時 リクエスト情報 Mail メール受信時、または未読メー ル存在時定期起動 メール本文(text/plain) Twitter 指定メッセージのTweet時に自 動起動 Tweet情報 (本文、発言場所、国…) Feedparse RSS/atomの更新受信時 - コネクタが右側に存在するもの
- 22. © 2015 @ibmamnt Node名称 機能 後続フローに送信する内容 Function 受領データの更新 更新済データ Switch 条件に応じて、フローを分岐さ せる 受信データ Delay フローを待機 受信データ http request 指定サイトに接続 接続サイトのソース Cloudant DB検索 DBの検索結果 Sentiment 受信データをセンチメント分析 評価情報を追加した受信データ Html HTMLソースのうち、指定タグ をすべて取得 指定したタグの情報 コネクタが左右に存在するもの ②データ変換/分岐
- 23. © 2015 @ibmamnt Node名称 機能 Debug フロー上に流れている情報を画⾯表⽰ http response http requestを返す Cloudant DBへのデータ保存 Mail メール送信 コネクタが左側に存在するもの ③外部アプリ起動/DB保存
- 24. © 2015 @ibmamnt プログラミング JavaScriptで記述します • 簡易エディターが付属 • 非同期処理も可能 ※より複雑な処理は node の 作成をお勧めします（おまけ 参照）。 詳細ドキュメント： http://nodered.org/docs/writing-functions.html function は最後に return msg; をいれる と次のnode に送信してくれます。
- 25. © 2015 @ibmamnt 覚えておくNode-RED固有変数 “msg” “msg” オブジェクト： node 間を流れるメッセージを表す JSON オ ブジェクト。msg.payload はかならず存在する。msg.<string> で新 しい属性を追加できる。 “context” オブジェクト： node 内部で保存される任意の JSON オブ ジェクト “context.global” オブジェクト： node 間で共有されるグローバルオ ブジェクト “context” “context.global”
- 26. © 2015 @ibmamnt 一般のWEBサービスの呼び出し • “http request” node を利⽤する • 事前に呼び出しパラメータを設定する – msg.url : WEBサービスURL – msg.method: ‘GET’, ‘PUT’ 等 – msg.header: 必要があればヘッダーセット – msg.payload: リクエストの body – msg.topic: URL の <url>?<params> ? 以下のパラ メータ
- 28. © 2015 @ibmamnt https://github.com/node-red http://flows.nodered.org • 様々な node や flow が公開されています
- 29. © 2015 @ibmamnt 演習 2.1 - 既存 node の追加 1. node-red が起動している場合には停止します (control+c) 2. 次のコマンドをNode-RED を導入したディレク トリで実⾏します $ npm install node-red-node-web-nodes 3. Node-REDを再開します $ node red.js
- 30. © 2015 @ibmamnt 左のパレットを探索してみて ください • node を配置して、info をみる
- 32. © 2015 @ibmamnt ここまでのまとめ • Node-RED は様々な情報源からの情報を取得し て、加工するのが得意 • 世の中にある様々な API を “node” という単位で カプセル化してくれる – コードを書かなくても簡単に呼び出せる！ • JavaScript によるプログラミングができる – Function node – 自作の node もあり
- 33. © 2015 @ibmamnt 3. Internet of Things と PaaS との連携
- 34. © 2015 @ibmamnt 3.1 Internet of Things対応 • IoT 機器に Node-RED を導入する シリアルポートアクセス Raspberry PI 等の機器のシリアルにアクセス
- 35. © 2015 @ibmamnt 例えば、Twitter のメッセージで LED をチカチカさせる
- 36. © 2015 @ibmamnt Hue のランプをチカチカさせ たり https://www.npmjs.com/package/node-red-contrib-hue
- 37. © 2015 @ibmamnt i-remocon を操作する？？ http://i-remocon.com/ ページから 抜粋
- 39. © 2015 @ibmamnt 3. Internet of ThingsとPaaSの連携 • イベントを処理するバックエンドシステムをPaaSに構築する pub/sub モデルが一般的に使われています。 MQTT ブローカー Google pub/sub も処理できるかも？ Node-RED ではイベント処理のブローカー情報にアクセスして、 加工。
- 40. © 2015 @ibmamnt IoT システムの典型的アーキテクチャ デバイス MQTT, websocket pub/sub システム イベントストリームシステム PaaS 様々な IoT デバイ ス情報を受け取り イベント保管する システム イベントと様々な API を組み合わせ たアプリケーショ ンが動作する PaaS 環境 典型的アーキテクチャ Node-RED Node-RED
- 41. © 2015 @ibmamnt myThings でのアーキテクチャ例： http://www.idcf.jp/cloud/iot/
- 42. © 2015 @ibmamnt Pub/Sub型のアーキテクチャ Pub/Subモデルはパブリッシュ・サブスクライブ方式でメッセージを送受信するためのモデル プロバイダ Sub Sub Pub Sub Pub 概略図 パブリッシャー：メッセージを作成して送信する送信側のクラ イアント サブスクライバー：メッセージを受信する側のクライアント トピック：Pubからのメッセージはトピックという送信先に登録 され、トピックに対して配信を申し込んでいた一つまたは複数 のサブスクライバーに配信されるトピック トピック トピック トピック トピック PubとSubは動的に追加・削除可能→使用状況に応じてシステムを拡張， 縮小可能 複数のパブリッシャーから同じトピックにメッセージを送信可能 複数のサブスクライバーから同じトピックに接続可能 システムの特徴
- 43. © 2015 @ibmamnt pub/sub システム例 • MQTT – IoT Eclipse (http://iot.eclipse.org/ ) – Mosquitto (http://mosquitto.org/ ) – IBM IoT Foundation (https://internetofthings.ibmcloud.com ) • Google pub/sub – https://cloud.google.com/pubsub/ • Amazon SNS – https://aws.amazon.com/jp/sns/
- 45. © 2015 @ibmamnt 演習3.1 : IoTデバイスからのメッ セージを受け取る • スマートホンで得られる情報を送信す る – 位置情報 (html5) – スマートホン・センサー情報 • 振動、加速度
- 46. © 2015 @ibmamnt 演習のアーキテクチャ Node-RED フロー MQTTクライアント ブローカー MQTT サーバー センサー情報、位置情報を “iot/paas-study“ topic として publish “iot/paas-study“ topic を subscribe iot.eclipse.org
- 47. © 2015 @ibmamnt スマホアプリの作成 • 今回は既定のものにアクセスします。スマート フォンから次の URL にアクセスしてください。 http://iot-phone.bluehub.tk (※※※※ IBM Bluemix 上で稼働しています） IDに自由な文字 (Alphabet)を入れてくだ さい。位置情報はONに してください。 ソースコードはこちら http://iot-phone.bluehub.tk/iot-phone.zip <any-alphabet>
- 48. © 2015 @ibmamnt Node-RED のフロー作成 • input/mqtt と output/debug を配置します • mqtt の設定は次のようにし ます(それ以外はデフォル ト） Broker: iot.eclipse.org Port: 1883 • 次の Topic の設定は次のよ うにします Topic: iot/paas-study • Deployボタンをクリックし て Debug 画面を眺めます
- 50. © 2015 @ibmamnt mqtt クライアントコード • Paho (http://www.eclipse.org/paho/) を利⽤ クライアント作成 ブローカーに接続 publish スマホセンサー内容 送信
- 51. © 2015 @ibmamnt 応⽤例 - ⾞からの情報を受け取る • http://connected-car.mybluemix.net/
- 52. © 2015 @ibmamnt アイデア例： • 今どこにいる？ 待ち合わせアプリ • Google Now 的なアプリとか は様々なアイデアをすNode-RED は様々なアイデアをす ぐに実践できるツールです。ぜひ 社内ハッカソンイベントでも活用 してみましょう！
- 53. © 2015 @ibmamnt IoT と PaaS の関係まとめ デバイス MQTT, websocket pub/sub システム イベントストリームシステム PaaS 様々な IoT デバイ ス情報を受け取り イベント保管する システム イベントと様々な API を組み合わせ たアプリケーショ ンが動作する PaaS 環境 典型的アーキテクチャ Node-RED Node-RED
- 56. © 2015 @ibmamnt 宿題：セミナー出欠確認アプリ • スマートホン向け WEB アプ リケーション – ⽒名⼊⼒と出席ボタンだけ • 位置情報、氏名を websocket で送信 • Node-RED 内部でカウント – セミナー会場位置を予め入れて おく – 半径１００m以内にいればカウ ント • context 変数を使う • 重複カウント防止 氏名 出席！
- 57. © 2015 @ibmamnt Node-REDでは作成したフローを別 Node-RED 環境に簡単に移すことができます。 別 Node-RED 環境に処理記述を移す手順 ①画面右上からExportを選択 ②ポップアップのコードをコピー ⇒Node-REDでは実装内容をText形式で保持 ③画面右上からImportを選択 ④ ②でコピーしたTextを貼り付ける 【参考】フローのImport/Export
- 58. © 2015 @ibmamnt Appendix - Nodeの追加 • 独自Nodeの追加 – 既存のノードでは機能が不⾜する場合、独⾃のノードも容易に追加可能 – 記述ルールに従い、nodesディレクトリ配下にHTMLファイルとjsファイル 作成しデプロイ • HTMLファイル：Nodeの体裁を定義（⾊やアイコン、⼊⼒項目など） • jsファイル：Nodeでの処理内容を記述 – 記述ルールやサンプル • http://nodered.org/docs/creating-nodes/first-node.html 作成、デプロイ
- 59. © 2015 @ibmamnt （参考）lower-case.html, lower-case.js lower-case.html lower-case.js http://nodered.org/docs/creating-nodes/first-node.html