Bluemix Node-Red Part I
Download as PPT, PDF12 likes4,761 views
本文件介绍了如何使用IBM Bluemix的Node-RED构建智能物联网应用的多个实例，包括温度传感器、网页爬虫、REST API和WebSocket的实现。文档提供了详细的步骤和节点说明，用于设置和调试这些物联网应用。通过示例，读者可以学习如何通过Node-RED连接不同的电子设备与服务，实现数据的自动化处理和通讯。
![© 2016 IBM Corporation
–匯入程式碼 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 flown // ... in this case it's
ws/simplen wsUri += "//" + loc.host + loc.pathname.replace("simple","ws/simple");nn function wsConnect() {n
console.log("connect",wsUri);n ws = new WebSocket(wsUri);n //var line = ""; // either uncomment this for a building list of
messagesn ws.onmessage = function(msg) {n var line = ""; // or uncomment this to overwrite the existing messagen //
parse the incoming message as a JSON objectn var data = msg.data;n //console.log(data);n // build the output from the
topic and payload parts of the objectn 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 statusn 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 statusn document.getElementById('status').innerHTML = "not connected";n // in case of lost connection tries to
reconnect every 3 secsn 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](https://image.slidesharecdn.com/bluemixnode-red-parti-160118082617/85/Bluemix-Node-Red-Part-I-47-320.jpg)
Bluemix Node-Red Part I
- 1. © 2016 IBM Corporation 使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part I) Joseph Chang Cloud Architect - Bluemix IBM Cloud, Taiwan Take me to Bluemix Click Here 新增用 Node-RED 撰寫 Websocket 網頁範例
- 2. © 2016 IBM Corporation PaaS 平台對ＩＴ 的改變 , 不只是建立 AP 環境變快了 更巨大的影響在ＡＰ 與ＡＰ 間的連結 也變得容易了 . 2
- 3. © 2016 IBM Corporation 讓 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
- 4. © 2016 IBM Corporation4 第一章 入門篇 -- 溫度感測與通知 第二章 排程器與網頁爬蟲 第三章 用 Node-RED 寫 HTML ， Websocket 及組合 REST API 使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part I)
- 5. © 2016 IBM Corporation5 第四章 在 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)
- 6. © 2016 IBM Corporation6 -- Sensor -- MQTT Broker -- Notification 第一章 入門篇 -- 溫度感測與通知
- 7. © 2016 IBM Corporation 溫度感應與通知 Node-RED Diagram 7
- 8. © 2016 IBM Corporation 建置步驟 : 在 Chrome 或 Firefox 中開啟 https://console.ng.bluemix.net/catalog/ 點選樣板中的 Internet of Things 圖示 , 以建立服務 8 當服務建立完成 , 點選畫面中的連結 , 以開啟 Node-RED
- 9. © 2016 IBM Corporation 建置步驟 : 進入網站首頁後 , 點選 “ Go to your Node-RED flow editor” . 9 進入 Node-RED 編輯器 , 可看到預建的溫度 感測流程範本 .
- 10. © 2016 IBM Corporation 建置步驟 : 接下來我們要配置模擬溫度感測器 , 請開啟以下網址 : http://quickstart.internetofthings.ibmcloud.com/iotsensor 10 開啟後 , 點選 Mac Address 以開啟 Device DashBorad 記下 Mac Address 等會在 Node- RED Editor 中會 用到
- 11. © 2016 IBM Corporation 建置步驟 : 回到 Node-RED flow editor, Double-Click on “IBM Iot App in” 節點 , 系統跳出設定視窗 . 11 填入前頁取得的 Mac Address, 然 後點選 “ OK”
- 12. © 2016 IBM Corporation 建置步驟 : 12 此時因為內容有改變 , 右 上角的 Deploy 鈕變成 Active 狀態 , 請按 ”下 Deploy ”讓變更生效 .
- 13. © 2016 IBM Corporation 建置步驟 : 13 點選 debug 可看 到視窗中 , 感測器 不斷傳入新的訊息
- 14. © 2016 IBM Corporation 節點說明 (function node): 14 msg.payload( 內容如 下 ) 流進此節點 , 取 其中的 d:{temp:15} 回傳 function node 可以用來撰寫 javascript 程式 將 text 重新轉成 payload 型式再回 傳 .
- 15. © 2016 IBM Corporation 節點說明 : 15 將前頁傳入的 payload ( 值 =15) 送入做比較 . 決定要 走那個 flow switch node 可以用來設定判斷條件 , 依決果決定資料 流動的路線
- 16. © 2016 IBM Corporation 節點說明 : 16 將前頁傳入的 payload ( 值 =15) 帶入範本 , 產出新的 內容 ( Temperature (15) within safe limits) template node 可以快速組合範本及變數 , 產生輸出內容
- 17. © 2016 IBM Corporation 玩個小把 –戲 當溫度超過臨界值時自動發送簡訊 : 17 1. 在 Ｔ wilio 網站註冊個 帳號 https://www.twilio.com/try-twilio Twilio 提供免費試用 帳號 , 註冊時需提供 手機號碼 . 測試期間發信到註冊 的手機號碼時免費的
- 18. © 2016 IBM Corporation 當溫度超過臨界值時自動發送簡訊 : 18 2. 取得電話號碼及 ＳＩＤ , ＡＵＴＨ Ｔ ＯＫＥＮ 3. 檢查 Messing 受信國家的 權限是否開啟 Twilio 配發的手機號 碼 記下 Account ID 和 Auth Token
- 19. © 2016 IBM Corporation 當溫度超過臨界值時自動發送簡訊 -- 加入 Twilio 節點 : 19 填入自己的手機號碼 填入 Twilio 發的電 話號碼與 SID,Token
- 20. © 2016 IBM Corporation 檢視手機是否收到簡訊 20 將模擬器溫度調到 41 以上 你成功了嗎 ?
- 21. © 2016 IBM Corporation 第一章 結束 21
- 22. © 2016 IBM Corporation 第二章 排程器與網頁爬蟲 22 -- Injection & Timer -- parse HTML
- 23. © 2016 IBM Corporation23 網頁爬蟲 Node-RED Diagram 如果我想透過雲端程式 , 每天幫我過濾 CNN 財經 新聞 , 遇到關鍵新聞通知 我 , 有可能嗎 ?
- 24. © 2016 IBM Corporation24 網頁爬蟲 Node-RED Diagram 透過 Node-RED 分析網頁內 容很簡單
- 25. © 2016 IBM Corporation 節點說明 : 25 設定爬蟲發動的週期 Inject node 可以設定排程 , 發動事件
- 26. © 2016 IBM Corporation 節點說明 : 26 在此我們用 cnn 財 經網為範例 http request node 可以執行開啟網頁的動作 , 如 同 curl Yes, 如果是 UTF-8 編碼 就可以 , 你可以用 http://news.yahoo.com.tw 試試看 可以爬中文網站嗎 ?
- 27. © 2016 IBM Corporation 節點說明 : 27 先觀察網頁原始碼 , 找到想擷取的 tag html node 可以用來擷取 html 網頁中 , 某 個指定的 tag 內容 , 輸出的部份可以把每個 tag 拆成不同的 package.
- 28. © 2016 IBM Corporation 節點說明 : 28 填入要抓取的 tag 名稱 , 在此我們想 要分析 <article> 撰則 multiple messages, 較容易 分析
- 29. © 2016 IBM Corporation 節點說明 : 29 Edit switch 我們在 第一章介紹過 , 在 此我們用 contains 設定過濾條件 如果要設更多 keyword 可考慮使 用 matches regex
- 30. © 2016 IBM Corporation 節點說明 : 30 帶有 keyword 的新 聞會導入 News Template. 再透過 twillio 傳送到我的 手機 , 通知我看新 聞
- 31. © 2016 IBM Corporation 第二章 結束 31
- 32. © 2016 IBM Corporation32 -- Simple Web Page -- REST API -- Websocket 第三章 用 Node-RED 寫 HTML, WebSocket 及組合 REST API
- 33. © 2016 IBM Corporation Simple Web Page 33
- 34. © 2016 IBM Corporation 簡單網頁 -- Node-RED 34
- 35. © 2016 IBM Corporation 節點說明 : 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> 存取此網頁
- 36. © 2016 IBM Corporation 節點說明 : 36 要讀取輸入參數請用 msg.req.query.<parameter> Ex. http://iot- demo101.mybluemix.net/hello? id=jojo msg.req.query.id 傳回值是 jojo Function node 在此可以接收輸入參數 , 撰寫業 務邏輯 , 將輸出參數傳給下一個節點 要建立輸出參數請用 msg.payload.<variable>
- 37. © 2016 IBM Corporation 節點說明 : 37 讀取前節點傳入的參數 Template node 可以用來定義 HTML 網頁的格式 , 內容可插入前節點傳進的參數
- 38. © 2016 IBM Corporation 節點說明 : 38 Http response node 必須與 http in 節點搭配使 用 在此沒有特別的參數需要填 寫 , 但是傳出的內容會帶有 : payload : 文件的 Body statusCode : 預設值 200 headers: 文件的 Header 所以最終看到的內容 就是
- 39. © 2016 IBM Corporation Call REST API 39
- 40. © 2016 IBM Corporation Call REST API in Node-RED 40 Node-RED 亦可很容易 的用來 call 任何的 REST API, 包括 open data 的 API, 在此我們用 Yahoo Finance API 查詢 台積電股價為例
- 41. © 2016 IBM Corporation 節點說明 : 41 在 http request 的 url 參數中可以讀取由前節點 傳入的變數 我們在此設定一個 msg.stock_id 變數 , 它 將在接下來的 http request 節點的 url 中 , 以 {{stock_id}} 的格式被取用 .
- 42. © 2016 IBM Corporation 節點說明 : 42 在 http request 節點 , 可呼叫 REST API 在此我們以 Yahoo Finance API 為例 , 查詢 台灣股票 價格 回傳內容為 JSON 格式 , 我們可以在 node-RED 中很 容易的用程式做進階處理
- 43. © 2016 IBM Corporation 在 Bluemix 中的 Runtime 都可 以成為 REST API provider, 透過 Node-RED http request 元 件彼此就可以輕鬆溝通 43
- 44. © 2016 IBM Corporation Websocket 44
- 45. © 2016 IBM Corporation Websocket 網頁 45 每 5 秒時間自動 更新
- 46. © 2016 IBM Corporation 匯入程式碼 46 請利用 Node- RED 的 Import 功能 將下一 頁的 內容貼到 Clipboard, 以完 成匯入工作
- 47. © 2016 IBM Corporation –匯入程式碼 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 flown // ... in this case it's ws/simplen wsUri += "//" + loc.host + loc.pathname.replace("simple","ws/simple");nn function wsConnect() {n console.log("connect",wsUri);n ws = new WebSocket(wsUri);n //var line = ""; // either uncomment this for a building list of messagesn ws.onmessage = function(msg) {n var line = ""; // or uncomment this to overwrite the existing messagen // parse the incoming message as a JSON objectn var data = msg.data;n //console.log(data);n // build the output from the topic and payload parts of the objectn 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 statusn 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 statusn document.getElementById('status').innerHTML = "not connected";n // in case of lost connection tries to reconnect every 3 secsn 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. © 2016 IBM Corporation 節點說明 : 48 建立一個名為 simple 的頁面
- 49. © 2016 IBM Corporation 節點說明 : 49 Websocket 網 頁程式 接收來自 wss://<host>/ws/simple 的訊息
- 50. © 2016 IBM Corporation 節點說明 : 50 當收到 Websocket 資料時 , 會 trigger ws.onmessage 動 作 我們要更新網頁中名 ”為 message” 的 <div>
- 51. © 2016 IBM Corporation 節點說明 : 51 畫面開啟時 , ”即啟動 “聽取 webscoket 資料 當 ws.onmessage 收到資 料時 , 會更新 此 <div> 的內 容
- 52. © 2016 IBM Corporation 節點說明 : 52 不需填資料
- 53. © 2016 IBM Corporation 節點說明 : 53 每隔 5 秒送出一個 timestamp 字串
- 54. © 2016 IBM Corporation 節點說明 : 54 格式化時間字串
- 55. © 2016 IBM Corporation 節點說明 : 55 設定 Websocket 的 服務路徑 發送 Websocket
- 56. © 2016 IBM Corporation 節點說明 : 56 接收由網頁 click button 時發出的 Websocket
- 57. © 2016 IBM Corporation Exercise: 57 動手練習一下 , 改用 Websocket 網頁技術顯示即時溫度
- 58. © 2016 IBM Corporation 第三章 結束 58
- 59. © 2016 IBM Corporation Thank you 59 Take me to Bluemix Click Here