Download - Bluemix Node-Red Part I

© 2016 IBM Corporation

使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part I)

Joseph Chang

Cloud Architect - Bluemix

IBM Cloud, Taiwan

Take me to BluemixClick Here

新增用 Node-RED 撰寫 Websocket 網頁範例

https://ibm.biz/BdEzTZ


PaaS 平台對ＩＴ的改變 , 不只是建立 AP 環境變快了更巨大的影響在ＡＰ與ＡＰ間的連結也變得容易了 .

2


讓 Internet 上的電子設備 , 資料庫 , 分析軟體 , API, 網頁相互對話

3

IOT Gateway(Control)

IOT Gateway(Sensor)

Open Data

Enterprise System

visual wiring tool for the Internet of Things

other tools for interconnect

© 2016 IBM Corporation4

第一章入門篇 -- 溫度感測與通知第二章排程器與網頁爬蟲第三章用 Node-RED 寫 HTML ， Websocket

及組合 REST API

使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part I)


第四章在 Node-RED 中撰寫 Javascript 程式第五章擴充 Node-RED 工具盒第六章元件型態 DIY

使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part II)

第七章資料儲存第八章 dashDB-R 與機器學習第九章 Watson 感知元件

使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part III)

第十章啟用安全設定第十一章 MQTT & IBM IOT

第十二章用 Node-RED 做為行動後台

使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part IV)


-- Sensor -- MQTT Broker -- Notification

第一章入門篇 -- 溫度感測與通知


溫度感應與通知 Node-RED Diagram

7


建置步驟 :

在 Chrome 或 Firefox 中開啟 https://console.ng.bluemix.net/catalog/

點選樣板中的 Internet of Things 圖示 , 以建立服務

8

當服務建立完成 , 點選畫面中的連結 , 以開啟 Node-RED

https://console.ng.bluemix.net/catalog/


建置步驟 :

進入網站首頁後 , 點選 “Go to your Node-RED flow editor”

.

9

進入 Node-RED 編輯器 , 可看到預建的溫度感測流程範本

.


建置步驟 :

接下來我們要配置模擬溫度感測器 , 請開啟以下網址 :

http://quickstart.internetofthings.ibmcloud.com/iotsensor

10

開啟後 , 點選 Mac Address 以開啟 Device DashBorad

記下 Mac Address 等會在 Node-RED Editor 中會用到

http://quickstart.internetofthings.ibmcloud.com/iotsensor


建置步驟 :

回到 Node-RED flow editor, Double-Click on “IBM Iot App in” 節點 , 系統跳出設定視窗.

11

填入前頁取得的Mac Address, 然後點選 “ OK”


建置步驟 :

12

此時因為內容有改變 , 右上角的 Deploy 鈕變成Active 狀態 , 請按下” Deploy 讓變更生效” .


建置步驟 :

13

點選 debug 可看到視窗中 , 感測器不斷傳入新的訊息


節點說明 (function node):

14

msg.payload( 內容如下 ) 流進此節點 ,取其中的 d:{temp:15} 回傳

function node 可以用來撰寫 javascript 程式

將 text 重新轉成payload 型式再回傳 .


節點說明 :

15

將前頁傳入的payload ( 值 =15) 送入做比較 . 決定要走那個 flow

switch node 可以用來設定判斷條件 , 依決果決定資料流動的路線


節點說明 :

16

將前頁傳入的payload ( 值 =15) 帶入範本 , 產出新的內容 ( Temperature (15) within safe limits)

template node 可以快速組合範本及變數 , 產生輸出內容


玩個小把戲– 當溫度超過臨界值時自動發送簡訊 :

17

1. 在Ｔ wilio 網站註冊個帳號https://www.twilio.com/try-twilio Twilio 提供免費試用帳號 , 註冊時需提供手機號碼 . 測試期間發信到註冊的手機號碼時免費的


當溫度超過臨界值時自動發送簡訊 :

18

2. 取得電話號碼及ＳＩＤ , ＡＵＴＨＴＯＫＥＮ3. 檢查 Messing 受信國家的權限是否開啟

Twilio 配發的手機號碼

記下 Account ID 和Auth Token


當溫度超過臨界值時自動發送簡訊 -- 加入 Twilio 節點 :

19

填入自己的手機號碼

填入 Twilio 發的電話號碼與 SID,Token


檢視手機是否收到簡訊

20

將模擬器溫度調到41 以上

你成功了嗎 ?


第一章結束

21


第二章排程器與網頁爬蟲

22

-- Injection & Timer-- parse HTML


網頁爬蟲 Node-RED Diagram

如果我想透過雲端程式 , 每天幫我過濾 CNN 財經新聞 , 遇到關鍵新聞通知我 , 有可能嗎 ?


網頁爬蟲 Node-RED Diagram

透過 Node-RED 分析網頁內容很簡單


節點說明 :

25

設定爬蟲發動的週期

Inject node 可以設定排程 , 發動事件


節點說明 :

26

在此我們用 cnn 財經網為範例

http request node 可以執行開啟網頁的動作 , 如同 curl

Yes, 如果是 UTF-8 編碼就可以 , 你可以用http://news.yahoo.com.tw 試試看

可以爬中文網站嗎 ?

http://news.yahoo.com.tw/


節點說明 :

27

先觀察網頁原始碼 , 找到想擷取的 tag

html node 可以用來擷取 html 網頁中 , 某個指定的 tag 內容 , 輸出的部份可以把每個tag 拆成不同的 package.


節點說明 :

28

填入要抓取的 tag 名稱 , 在此我們想要分析 <article>

撰則multiple messages, 較容易分析


節點說明 :

29

Edit switch 我們在第一章介紹過 , 在此我們用 contains 設定過濾條件

如果要設更多keyword 可考慮使用 matches regex


節點說明 :

30

帶有 keyword 的新聞會導入 News Template. 再透過twillio 傳送到我的手機 , 通知我看新聞


第二章結束

31


-- Simple Web Page-- REST API-- Websocket

第三章用 Node-RED 寫 HTML, WebSocket及組合 REST API


Simple Web Page

33


簡單網頁 -- Node-RED

34


節點說明 :

35

Ex. Node-RED 網站為http://iot-demo101.mybluemix.net/

存取網址為 :http://iot-demo101.mybluemix.net/hello

如要傳入參數 :http://iot-demo101.mybluemix.net/hello?id=jojo

http in node 的使用很簡單 , 只要給定 URL, 就可以從 http://<node-server>/<url> 存取此網頁

http://iot-demo101.mybluemix.net/

http://iot-demo101.mybluemix.net/

http://iot-demo101.mybluemix.net/hello

http://iot-demo101.mybluemix.net/hello


節點說明 :

36

要讀取輸入參數請用msg.req.query.<parameter>

Ex. http://iot-demo101.mybluemix.net/hello?id=jojomsg.req.query.id 傳回值是 jojo

Function node 在此可以接收輸入參數 , 撰寫業務邏輯 , 將輸出參數傳給下一個節點

要建立輸出參數請用msg.payload.<variable>


節點說明 :

37

讀取前節點傳入的參數

Template node 可以用來定義 HTML 網頁的格式 , 內容可插入前節點傳進的參數


節點說明 :

38

Http response node 必須與 http in 節點搭配使用

在此沒有特別的參數需要填寫 , 但是傳出的內容會帶有 :payload : 文件的 BodystatusCode : 預設值 200headers: 文件的 Header

所以最終看到的內容就是


Call REST API

39


Call REST API in Node-RED

40

Node-RED 亦可很容易的用來 call 任何的REST API, 包括 open data 的 API, 在此我們用 Yahoo Finance API 查詢台積電股價為例


節點說明 :

41

在 http request 的 url 參數中可以讀取由前節點傳入的變數

我們在此設定一個msg.stock_id 變數 , 它將在接下來的 http request 節點的 url 中 , 以{{stock_id}} 的格式被取用 .


節點說明 :

42

在 http request 節點 , 可呼叫 REST API

在此我們以 Yahoo Finance API 為例 , 查詢台灣股票價格

回傳內容為 JSON 格式 , 我們可以在 node-RED 中很容易的用程式做進階處理


在 Bluemix 中的 Runtime 都可以成為 REST API provider,透過 Node-RED http request 元件彼此就可以輕鬆溝通

43


Websocket

44


Websocket 網頁

45

每 5 秒時間自動更新


匯入程式碼

46

請利用 Node-RED 的 Import 功能將下一頁的內容貼到 Clipboard, 以完成匯入工作


匯入程式碼 – Websocket Sample

[{"id":"90b29f2a.2acff","type":"inject","z":"55fcf298.0cc50c","name":"Tick every 5 secs","topic":"test","payload":"","payloadType":"date","repeat":"5","crontab":"","once":false,"x":181,"y":270,"wires":[["6e1c0c9b.d96554"]]},{"id":"9ee75a8e.3fc23","type":"websocket out","z":"55fcf298.0cc50c","name":"","server":"10c785bd.09c96a","client":"","x":702,"y":250,"wires":[]},{"id":"3754bfea.ee9c38","type":"http response","z":"55fcf298.0cc50c","name":"","x":680,"y":147,"wires":[]},{"id":"e080cd3b.52c388","type":"http in","z":"55fcf298.0cc50c","name":"","url":"/simple","method":"get","swaggerDoc":"","x":186,"y":147,"wires":[["f36b1a3d.55ce3"]]},{"id":"f36b1a3d.55ce3","type":"template","z":"55fcf298.0cc50c","name":"Simple Web Page","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>Simple Live Display</title>\n <script type=\"text/javascript\">\n var ws;\n var wsUri = \"ws:\";\n var loc = window.location;\n console.log(loc);\n if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n // This needs to point to the web socket in the Node-RED flow\n // ... in this case it's ws/simple\n wsUri += \"//\" + loc.host + loc.pathname.replace(\"simple\",\"ws/simple\");\n\n function wsConnect() {\n console.log(\"connect\",wsUri);\n ws = new WebSocket(wsUri);\n //var line = \"\"; // either uncomment this for a building list of messages\n ws.onmessage = function(msg) {\n var line = \"\"; // or uncomment this to overwrite the existing message\n // parse the incoming message as a JSON object\n var data = msg.data;\n //console.log(data);\n // build the output from the topic and payload parts of the object\n line += \"<p>\"+data+\"</p>\";\n // replace the messages div with the new \"line\"\n document.getElementById('messages').innerHTML = line;\n //ws.send(JSON.stringify({data:data}));\n }\n ws.onopen = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"connected\";\n //ws.send(\"Open for data\");\n console.log(\"connected\");\n }\n ws.onclose = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"not connected\";\n // in case of lost connection tries to reconnect every 3 secs\n setTimeout(wsConnect,3000);\n }\n }\n \n function doit(m) {\n if (ws) { ws.send(m); }\n }\n </script>\n </head>\n <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n <font face=\"Arial\">\n <h1>Simple Live Display</h1>\n <div id=\"messages\"></div>\n <button type=\"button\" onclick='doit(\"click\");'>Click to send message</button>\n <hr/>\n <div id=\"status\">unknown</div>\n </font>\n </body>\n</html>\n","x":462,"y":146,"wires":[["3754bfea.ee9c38"]]},{"id":"6e1c0c9b.d96554","type":"function","z":"55fcf298.0cc50c","name":"format time nicely","func":"msg.payload = Date(msg.payload).toString();\nreturn msg;","outputs":1,"noerr":0,"x":443,"y":247,"wires":[["9ee75a8e.3fc23"]]},{"id":"5dd67905.c96da","type":"websocket in","z":"55fcf298.0cc50c","name":"","server":"10c785bd.09c96a","client":"","x":432,"y":369,"wires":[["a2da50ee.cab7e8"]]},{"id":"a2da50ee.cab7e8","type":"debug","z":"55fcf298.0cc50c","name":"","active":true,"console":"false","complete":"false","x":648,"y":364,"wires":[]},{"id":"10c785bd.09c96a","type":"websocket-listener","z":"55fcf298.0cc50c","path":"/ws/simple","wholemsg":"false"}]

47


節點說明 :

48

建立一個名為simple 的頁面


節點說明 :

49

Websocket 網頁程式

接收來自 wss://<host>/ws/simple 的訊息


節點說明 :

50

當收到 Websocket 資料時 , 會 trigger ws.onmessage 動作

我們要更新網頁中名為” message” 的 <div>


節點說明 :

51

畫面開啟時 , 即啟動 “聽取” webscoket 資料

當 ws.onmessage 收到資料時 , 會更新此 <div> 的內容


節點說明 :

52

不需填資料


節點說明 :

53

每隔 5 秒送出一個 timestamp 字串


節點說明 :

54

格式化時間字串


節點說明 :

55

設定 Websocket 的服務路徑

發送 Websocket


節點說明 :

56

接收由網頁 click button 時發出的Websocket


Exercise:

57

動手練習一下 , 改用 Websocket 網頁技術顯示即時溫度


第三章結束

58


Thank you

59

Take me to BluemixClick Here

https://ibm.biz/BdEzTZ

Download - Bluemix Node-Red Part I

Top Related