Downloaded 224 times
![© 2016 IBM Corporation
Case 7: 一個以上的輸出參數
14
用 [ msg1,msg2,...msg x]
參數陣列 , 可輸出多個變
數
設定輸出變數的個
數 , 圖形會依此定
顯示多個輸出接口
多個輸出接
口](https://image.slidesharecdn.com/bluemixnode-red-partii-160118085254/75/Bluemix-Node-Red-Part-II-14-2048.jpg)
![© 2016 IBM Corporation32
Sample 1: node-red-contrib-freeboard
Step 6: 建立 datasource
選擇 [Node-RED]
Freeboard 做為 Data
Source
選擇 ADD 以定義新的
Data Source](https://image.slidesharecdn.com/bluemixnode-red-partii-160118085254/75/Bluemix-Node-Red-Part-II-32-2048.jpg)
![© 2016 IBM Corporation
Case 7: 一個以上的輸出參數
14
用 [ msg1,msg2,...msg x]
參數陣列 , 可輸出多個變
數
設定輸出變數的個
數 , 圖形會依此定
顯示多個輸出接口
多個輸出接
口](https://crownmelresort.com/image.slidesharecdn.com/bluemixnode-red-partii-160118085254/75/Bluemix-Node-Red-Part-II-14-2048.jpg)
![© 2016 IBM Corporation32
Sample 1: node-red-contrib-freeboard
Step 6: 建立 datasource
選擇 [Node-RED]
Freeboard 做為 Data
Source
選擇 ADD 以定義新的
Data Source](https://crownmelresort.com/image.slidesharecdn.com/bluemixnode-red-partii-160118085254/75/Bluemix-Node-Red-Part-II-32-2048.jpg)
Uploaded byJoseph Chang
Bluemix Node-Red Part II
本文件探讨如何使用 IBM Bluemix 和 Node-RED 构建智能物联网应用，涉及 JavaScript 编程、功能扩展和自定义组件的创建。主要章节包括撰写 JavaScript 程序、扩展 Node-RED 工具箱以及定义自有 Node-RED 组件。文档还提供多个实例和代码说明，帮助读者理解 Node-RED 的功能和应用。
Bluemix Node-Red Part II
- 1. © 2016 IBMCorporation 使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part II) Joseph Chang Cloud Architect - Bluemix IBM Cloud, Taiwan Take me to Bluemix Click Here
- 2. © 2016 IBMCorporation2 第四章 在 Node-RED 中撰寫 Javascript 程式 第五章 擴充 Node-RED 工具盒 第六章 元件型態 DIY 使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part II)
- 3. © 2016 IBMCorporation3 第一章 入門篇 -- 溫度感測與通知 第二章 排程器與網頁爬蟲 第三章 用 Node-RED 寫 HTML 及組合 REST API 使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part I) 第七章 資料儲存 第八章 dashDB-R 與機器學習 第九章 Watson 感知元件 使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part III) 第十章 啟用安全設定 第十一章 MQTT & IBM IOT 第十二章 用 Node-RED 做為行動後台 使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part IV)
- 4. © 2016 IBMCorporation4 -- input/output msg -- context and global context -- require “package” 第四章 在 Node-RED 中撰寫 Javascript 程式
- 5. © 2016 IBMCorporation5 • Node-RED 中的 function 節點可以用來寫Ｊ avaScript, 所以如果找不到合適可 用的元件 , 或是只是要撰寫簡單處理邏輯 , 我們就可以用 function 節點快速完成 . • 在了解Ｎ ode-RED function 的撰寫前 , 您需要有Ｎ ode.js 程式撰寫相關的基礎 . 如果您還不熟悉Ｎ ode.js , 可參考： https://nodejs.org http://www.nodebeginner.org/index-zh-tw.html • 除了 Node.js 的知識外 , 有幾項 Node-RED , 獨有的特性 , 在 nodered.org 網頁 有提到 : http://nodered.org/docs/writing-functions.html 本章將針對這些特性以實例做說明 , 我們透過 timestamp 元件觸發 function 元 件運作 , 並以 debug 元件觀察輸出變數內容 .
- 6. © 2016 IBMCorporation function in Node-RED Diagram 6
- 7. © 2016 IBMCorporation Case 1: msg 參數傳遞 7 在 Node-RED 的 Node 與 Node 間 , 我們通常是用 msg 物件來傳遞參數 . 在第一個例子中 , 我們先不呼叫 function, 直接印出 timestamp 輸出的 msg 物件 . 以方便與之 後 function 運算後的 msg 物件做比較 . 由 timstamp 直接輸出的 msg 物件 , 我們可以看到 它帶有 topic, payload, _msgid 三個屬性 .
- 8. © 2016 IBMCorporation Case2: function msg 輸入與輸出 8 讀取由前節點 傳入的變數 在 msg 物件上增加 額外的內容 return 指令帶的參 數會成為下個節點 的輸入變數
- 9. © 2016 IBMCorporation Case 3: 產生新的輸出變數 9 定義一個新的 傳遞參數物件 輸出新產生的 變數
- 10. © 2016 IBMCorporation Case 4: context 變數 10 Node-RED 中一般變數的生命週期只有在本 次事件有效 , 但如果是存在 context 物件的 變數 , 可以持續讓後績的事件使用 宣告 context 變數 每次進入的事件 讓 context.count 加 1
- 11. © 2016 IBMCorporation Case 5: context.global 變數 11 Node-RED 中一般變數的作用範圍只有在本 節點有效 , 但存在 context.global 的變數是 跨節點仍有效 在 pre- process 節點 宣告 三個不同 屬性的變數 在 process 節點取 用這三個不同屬性 的變數 var1 是一般的區域變 數 , 雖然在前節點宣 告 , 但 無法在本節點 讀取 . 因此造成 ReferenceError 錯誤示範
- 12. © 2016 IBMCorporation Case 5: context.global 變數 12 將 var1 註解掉 , 程式繼續執行 context.var2 的值為 Null, 因此不會印出 將 var3 為 context.global 變數 , 因此前節點定義的值會 被帶到本節點
- 13. © 2016 IBMCorporation Case 6: 在 function 節點下方顯示狀態 13 Node.status 可用來設 定進行狀態標記 當訊息通過時 , 節點下 方出現標記 timeout 時 , 清空狀 態標記
- 14. © 2016 IBMCorporation Case 7: 一個以上的輸出參數 14 用 [ msg1,msg2,...msg x] 參數陣列 , 可輸出多個變 數 設定輸出變數的個 數 , 圖形會依此定 顯示多個輸出接口 多個輸出接 口
- 15. © 2016 IBMCorporation Case 8: throw & catch error 15 由 catch 節點 攔截到的錯誤 在 catch node 中 , 我們 可以設定要 catch 那些 節點 . node.error 指令可 throw error event
- 16. © 2016 IBMCorporation Case: 9 在 Node-RED function 中加載 Package 16 在 function 中直接調用 require() 會出現 RefferenceError: require is not defined 的錯誤 我們用 mathjs 做例子 , 說明在 Node.js 中 , 要如何使用加載的模組 錯誤示範
- 17. © 2016 IBMCorporation Case: 9 在 Node-RED function 中加載 Package Step 1 – 開啟 Git 進入 Node.js 程式編輯環境 17 如果你已經建立 Git Project, 這裡會顯示 : 由此開始 點選 ADD GIT, 依系統指引直到開 啟 DevOps Web IDE 環境 .
- 18. © 2016 IBMCorporation Case: 9 在 Node-RED function 中加載 Package Step 2 – 開啟 DevOps IDE 後 , 點選開啟 bluemix-settings.js 18 原程式碼 修改後程式碼 請參考下列網址中的 Global Context 說明 http://nodered.org/docs/writing-functions.html 在此宣告加載的 package 可以 在 node-red 節 點中 , 以 context.global. mathjsModule 讀取
- 19. © 2016 IBMCorporation Case: 9 在 Node-RED function 中加載 Package Step 3 – 另外 , 我們需要透過 package.json 安裝 mathjs package 19 原程式碼 修改後程式碼 一般安裝 node.js package 會使用 npm install mathjs, 在此我們只要在 package.json 中的 depencies ,, 加入 package 名稱 , re- stagining 時就會載入
- 20. © 2016 IBMCorporation Case: 9 在 Node-RED function 中加載 Package Step 4 – 部署修改後的設定 20 點選 確認後開始部署 , 直到再次出現綠色燈 號及 ( 執行中 : 一般 ) 即完成 ”點選 從工作區部署 ”程式鈕 讓變更生效
- 21. © 2016 IBMCorporation Case: 9 在 Node-RED function 中加載 Package Step 5 – 撰寫正確的 加載 package 寫法 21 透過 context.global.mathjsModule 可以取到我們在 bluemix-settings.js 所定義 的 module
- 22. © 2016 IBMCorporation 第四章 結束 22
- 23. © 2016 IBMCorporation23 -- nodered.org 開源社群 -- 在 Bluemix Node-RED 中加載元件 -- 應用範例 -- Freeboard -- GoogleMap 第五章 擴充 Node-RED 工具盒
- 24. © 2016 IBMCorporation24 你可以自行開發 Node-RED 左方工具盒中的元件 , 或是由 Nodered.org 下載別人 開發的元件 , 在 http://flows.nodered.org 中有超過 500 個已開發好的工具元件 , 本 單元我們將挑選兩個元件 , 說明如何擴充 Bluemix Node-RED 的工具盒 , 第一個是 用於提供 Internet of Thins 儀表板功能的 Freeboard , 第二個是 GoogleMap
- 25. © 2016 IBMCorporation25 http://flows.nodered.org/ 在 flow.nodered.org 可 以找到 500 多個擴充工 具元件
- 26. © 2016 IBMCorporation26 Sample 1: node-red-contrib-freeboard Step1: 開啟 freeboard 元件說明 找到 freeboard 元件 , 並 開啟說明 . http://flows.nodered.org/node/node-red-contrib-freeboard
- 27. © 2016 IBMCorporation27 Sample 1: 安裝及使用 Node-red Freeboard 元件 Step2: 修改 package.json 查看 npm install 時用 的名稱及版本 然後開啟 DevOps Web IDE 中的 package.json 加入新元件 ( 開啟 IDE 的詳細步驟請參 考第四章 Case 9) 修改後的內容如下 :
- 28. © 2016 IBMCorporation28 Sample 1: 安裝及使用 Node-red Freeboard 元件 Step3: 重新部署及查看工具箱 點選按鈕後按確認 即可重新部署 部署成功更新畫面 , 會看到 freeboard 元件己出現在工具箱 中
- 29. © 2016 IBMCorporation29 Sample 1: 安裝及使用 Node-red Freeboard 元件 Step4: 建立 freeboard node-red flow 我們使用元件附的範例 , 直接將內容剪下 , 貼到 Clipboard 即可匯入 http://flows.nodered.org/node/node-red-contrib-freeboard
- 30. © 2016 IBMCorporation30 Sample 1: 安裝及使用 Node-red Freeboard 元件 Step4-1: 建立 freeboard node-red flow 匯入後畫面上出現 的流程如下 :幫 node 取名為 create random value Free board Gauge 需要的內容 , 只有 Value 一欄 Free board data source 的識別名稱
- 31. © 2016 IBMCorporation31 Sample 1: node-red-contrib-freeboard Step 5: 開啟 freeboard 網頁 在 node.js 網址後加上 /freeboard 即是 freeboard 的網 址 http://<your-nodered-server>.mybluemix.net/freeboard/
- 32. © 2016 IBMCorporation32 Sample 1: node-red-contrib-freeboard Step 6: 建立 datasource 選擇 [Node-RED] Freeboard 做為 Data Source 選擇 ADD 以定義新的 Data Source
- 33. © 2016 IBMCorporation33 Sample 1: node-red-contrib-freeboard Step 7: 建立 PANE 選擇 ADD PANE 以新 增一個 Gauge 型態的 PANE 注意要選到 value 欄位
- 34. © 2016 IBMCorporation34 Sample 1: node-red-contrib-freeboard Step 8: save dashboard 及觀察結果 點選 Pretty 或 MINIFIED 以儲存 版面設計 從 Node-RED 注入 新事件觀察資料變 化
- 35. © 2016 IBMCorporation35 Sample 2: Google Map With BART Stations Using Websockets Step1: 開啟 Google Map flow 說明 http://flows.nodered.org/flow/d7a45e7e693f43c9d47b 找到 Google Map With Bart Stations Using Websockets 元件 , 並 開啟說明 . 這是個 flow 元件 , 不需 安裝 package, 只要從 Node-red UI 匯入就好 .
- 36. © 2016 IBMCorporation36 Sample 2: Google Map With BART Stations Using Websockets Step2: 匯入 flow http://flows.nodered.org/flow/d7a45e7e693f43c9d47b 將 flow 內容透過 clipboard 匯入
- 37. © 2016 IBMCorporation37 Sample 2: Google Map With BART Stations Using Websockets Step 2-1: 檢視流程 flow 概要說明 加入 debug 節點方 便觀察 BART station 資料內容 下方 flow 以 websocket 協定提 供 BART 車站資訊 上方 flow 建立了一個 /mapstations 的網頁 , 可以顯 示 google 地圖 , 並呼叫下方 的 websocket 服務讀取車站 資訊 為節點取名 Google Map
- 38. © 2016 IBMCorporation38 Sample 2: Google Map With BART Stations Using Websockets Step3: 執行 flow 開啟 http://<node- server>/mapstations 就可看到地圖及 BART 車站位置 注意 webscoket 燈號變為綠色
- 39. © 2016 IBMCorporation 節點說明 (websocket node): 39 建立一組 websocket node 以聽取及回應 websocket client websocket node 可以用來啟始一組 websocket 服務 , 等候 client 發送 ws request websocket 連線時 , 會收到一個 ping! 的 訊息 .
- 40. © 2016 IBMCorporation 節點說明 (http reqeust node): 40 當收到 ping! 時 , 發送一個 http request 到 api.bart.gov 讀取車 站資料 api.bart.gov 送出的 資料原始格式為 XML
- 41. © 2016 IBMCorporation 節點說明 (xml node): 41 Xml node 將資料格 式由 XML 轉為 JSON
- 42. © 2016 IBMCorporation 節點說明 (http node): 42 http node 可以用來撰寫網 頁程式 設定存取此網頁的 URL
- 43. © 2016 IBMCorporation 節點說明 (html template node): 43 載入 google map 標記中心點 繪出地圖
- 44. © 2016 IBMCorporation 節點說明 (html template node): 44 Socket 連線 Send Ping! 收到 socket 送回的 message 在地圖上標記座標
- 45. © 2016 IBMCorporation 第五章 結束 45
- 46. © 2016 IBMCorporation46 -- 了解 Node 元件程式結構 -- 透過範本修改建立新的元件 第六章 元件型態 DIY
- 47. © 2016 IBMCorporation47 自行定義一個 Node-RED 元件型態並不 困難 , 在 http://nodered.org/docs/ 中的 Creating Nodes 有完整的介紹 . 在此我們以一個 call REST API 的例子做 說明 , 學會之後您就可以此類推去封裝任 何 API 服務成為好用的 Node-RED 元件
- 48. © 2016 IBMCorporation Node 元件的檔案組成 48 - package.json - sample |-sample.html |-sample.js -locales -en-US -sample.json -icons -sample.png - README.md - LICENSE Node 元件的必要組成檔只有兩個 : -- .html 負責 UI 的展現 -- .js 負責邏輯處理 另外有兩個 optional 的檔 -- .json 用於多或語言設定 -- .png 供客製 icon 使用 撰寫好的元件 , 要登錄在 package.json 中 , 如果有 相依的 package, 亦是在此定義 注意事項 : 元件命名規則及檔案存放位置 : 元件以 sample.js 名稱註冊之後 , Node-RED 會自動以 sample 為主檔名在對映位置尋找 sample.html, sample.js, sample.png, 因此命名規則及存放位置不可出錯
- 49. © 2016 IBMCorporation Node 元件程式架構 49 我們以下面這個樣板程式做說明 : 儲存 位址 : https://github.com/joseph580307/node-red-contrib-helloworld 儲存庫名稱 : joseph580307/node-red-contrib-helloword 儲存庫中可以定義 多組元件型態 .在這個儲存庫中 需要一個 package.json 檔 語言檔在此 定義 .
- 50. © 2016 IBMCorporation package.json 50 宣告元件型態 及程式名稱 , .js 檔中的相 依 package 在此宣告
- 51. © 2016 IBMCorporation callapi001.js 51 // 建立 Node-RED 元件 // 接收 Param1 參數 // 程式邏輯 function 名 稱
- 52. © 2016 IBMCorporation callapi001.js 52 // 顯示元件狀態 // 輸出結果 // 輸出結果 // 程式邏輯 // 註冊元件型態 注意事項 : 名稱一致性 : js 之中的 : RED.nodes.registerType("call API001” 及之後 html 中的 : RED.nodes.registerType("call API001” data-template-name="call API001” data-help-name="call API001” 這 4 個地方使用的名字必須一致 function 名 稱
- 53. © 2016 IBMCorporation callapi001.html 53 // 註冊 UI Template // 註冊 help
- 54. © 2016 IBMCorporation callapi001.html 54 // 註冊元件型態
- 55. © 2016 IBMCorporation Locales 55
- 56. © 2016 IBMCorporation package.json in Node-RED Main 56 在 package.json 中 加入這行敘述就可 以引用 Git 上的元 件 當 git hub 上的元件 內容變動時 , 執行 re-staging 即能讓變 更生效 .
- 57. © 2016 IBMCorporation Test Run 57 自製的元件型 態出現在 Toolbox 中 . 執行結果 .
- 58. © 2016 IBMCorporation58 了解 Node-RED 範例元件之後 , 要創自己的元件 , 只要三部驟 :
- 59. © 2016 IBMCorporation59 可以用 Fork 的方法產生一 份原碼到自己 的 git 帳號 你可以使用 Ｆ ork 或 Download ZIP, 複製原始碼 或是下載修改後 , 再上傳回新建 立的 git repository.
- 60. © 2016 IBMCorporation60 需要修改的程式部份包括 : 步驟 作業 1 將元件中 callAPI ＸＸＸ . ＊檔名置換成你所想要的 名稱 2 將元件中 package.json 中的宣告的元件置換成對映 的名稱 3 置換 callAPIXXX.js 中的 function 名稱 4 修改 callAPIXXX.js, callAPIXXX.html 中的註冊元件 型態 , 註冊 UI template, 註冊 help 名稱 5 修改 call ＡＰＩＸＸＸ .html 的畫面設計 6 修改 callAPIXXX.js 的程式邏輯及參數傳遞 7 修改 callAPIXXX.json 的定義內容 8 修改Ｎ ode-RED 主程式中的 package.json, 建立新 元件的相依性
- 61. © 2016 IBMCorporation61 步驟 作業 1 點選部署鍵 以重啟Ｎ ode-RED 主程式 2 觀察執行結果是否正確 測試執行結果 :
- 62. © 2016 IBMCorporation 第六章 結束 62
- 63. © 2016 IBMCorporation Thank you 63 Take me to Bluemix Click Here