bluemix node-red part ii

© 2016 IBM Corporation

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

Joseph Chang

Cloud Architect - Bluemix

IBM Cloud, Taiwan

Take me to BluemixClick Here

https://ibm.biz/BdEzTZ

© 2016 IBM Corporation2

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

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


第一章入門篇 -- 溫度感測與通知第二章排程器與網頁爬蟲第三章用 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)


-- input/output msg-- context and global context-- require “package”

第四章在 Node-RED 中撰寫 Javascript 程式


• Node-RED 中的 function 節點可以用來寫Ｊ avaScript, 所以如果找不到合適可用的元件 , 或是只是要撰寫簡單處理邏輯 , 我們就可以用 function 節點快速完成 .

• 在了解Ｎ ode-RED function 的撰寫前 , 您需要有Ｎ ode.js 程式撰寫相關的基礎 . 如果您還不熟悉Ｎ ode.js , 可參考：

https://nodejs.orghttp://www.nodebeginner.org/index-zh-tw.html

• 除了 Node.js 的知識外 , 有幾項 Node-RED , 獨有的特性 ,在 nodered.org 網頁有提到 :http://nodered.org/docs/writing-functions.html

本章將針對這些特性以實例做說明 , 我們透過 timestamp 元件觸發 function 元件運作 , 並以 debug 元件觀察輸出變數內容 .

http://www.nodebeginner.org/index-zh-tw.html






http://nodered.org/docs/writing-functions.html


function in Node-RED Diagram

6


Case 1: msg 參數傳遞

7

在 Node-RED 的 Node與 Node 間 , 我們通常是用msg 物件來傳遞參數 .

在第一個例子中 , 我們先不呼叫 function,直接印出 timestamp 輸出的 msg 物件 . 以方便與之後 function 運算後的 msg 物件做比較 .

由 timstamp 直接輸出的 msg 物件 , 我們可以看到它帶有 topic, payload, _msgid 三個屬性 .


Case2: function msg 輸入與輸出

8

讀取由前節點傳入的變數

在msg 物件上增加額外的內容

return 指令帶的參數會成為下個節點的輸入變數


Case 3: 產生新的輸出變數

9

定義一個新的傳遞參數物件

輸出新產生的變數


Case 4: context 變數

10

Node-RED 中一般變數的生命週期只有在本次事件有效 , 但如果是存在 context 物件的變數 , 可以持續讓後績的事件使用

宣告context 變數每次進入的事件

讓 context.count 加 1


Case 5: context.global 變數

11

Node-RED 中一般變數的作用範圍只有在本節點有效 , 但存在 context.global 的變數是跨節點仍有效

在 pre-process 節點宣告三個不同屬性的變數

在 process 節點取用這三個不同屬性的變數var1 是一般的區域變數 , 雖然在前節點宣告 , 但無法在本節點讀取 . 因此造成ReferenceError

錯誤示範


Case 5: context.global 變數

12

將 var1 註解掉 , 程式繼續執行

context.var2 的值為Null, 因此不會印出

將 var3 為context.global 變數 , 因此前節點定義的值會被帶到本節點


Case 6: 在 function 節點下方顯示狀態

13

Node.status 可用來設定進行狀態標記

當訊息通過時 , 節點下方出現標記

timeout時 , 清空狀態標記


Case 7: 一個以上的輸出參數

14

用 [ msg1,msg2,...msg x] 參數陣列 , 可輸出多個變數

設定輸出變數的個數 , 圖形會依此定顯示多個輸出接口

多個輸出接口


Case 8: throw & catch error

15

由 catch 節點攔截到的錯誤

在 catch node 中 , 我們可以設定要 catch 那些節點 .

node.error 指令可 throw error event


Case: 9 在 Node-RED function 中加載 Package

16

在 function 中直接調用require() 會出現 RefferenceError: require is not defined 的錯誤

我們用 mathjs 做例子 , 說明在 Node.js 中 , 要如何使用加載的模組

錯誤示範


Case: 9 在 Node-RED function 中加載 PackageStep 1 – 開啟 Git 進入 Node.js 程式編輯環境

17

如果你已經建立 Git Project, 這裡會顯示 :

由此開始點選 ADD GIT, 依系統指引直到開啟 DevOps Web IDE 環境 .


Case: 9 在 Node-RED function 中加載 PackageStep 2 – 開啟 DevOps IDE 後 , 點選開啟 bluemix-settings.js

18

原程式碼

修改後程式碼

請參考下列網址中的 Global Context 說明http://nodered.org/docs/writing-functions.html

在此宣告加載的package 可以在 node-red 節點中 , 以 context.global.mathjsModule讀取


Case: 9 在 Node-RED function 中加載 PackageStep 3 – 另外 , 我們需要透過 package.json 安裝 mathjs package

19

原程式碼修改後程式碼

一般安裝 node.js package 會使用 npm install mathjs, 在此我們只要在package.json 中的depencies ,, 加入 package 名稱 , re-stagining 時就會載入


Case: 9 在 Node-RED function 中加載 PackageStep 4 – 部署修改後的設定

20

點選確認後開始部署 , 直到再次出現綠色燈號及 ( 執行中 : 一般 ) 即完成

點選”從工作區部署程式鈕” 讓變更生效


Case: 9 在 Node-RED function 中加載 PackageStep 5 – 撰寫正確的加載 package 寫法

21

透過 context.global.mathjsModule 可以取到我們在bluemix-settings.js 所定義的module


第四章結束

22


-- nodered.org 開源社群-- 在 Bluemix Node-RED 中加載元件-- 應用範例 -- Freeboard -- GoogleMap

第五章擴充 Node-RED 工具盒


你可以自行開發 Node-RED 左方工具盒中的元件 , 或是由 Nodered.org 下載別人開發的元件 ,在 http://flows.nodered.org 中有超過 500 個已開發好的工具元件 , 本單元我們將挑選兩個元件 , 說明如何擴充 Bluemix Node-RED 的工具盒 , 第一個是用於提供 Internet of Thins 儀表板功能的 Freeboard , 第二個是 GoogleMap

http://flows.nodered.org/


http://flows.nodered.org/

在 flow.nodered.org 可以找到 500 多個擴充工具元件


Sample 1: node-red-contrib-freeboardStep1: 開啟 freeboard 元件說明

找到 freeboard 元件 , 並開啟說明 .

http://flows.nodered.org/node/node-red-contrib-freeboard


Sample 1: 安裝及使用 Node-red Freeboard 元件Step2: 修改 package.json

查看 npm install 時用的名稱及版本

然後開啟 DevOps Web IDE 中的 package.json加入新元件( 開啟 IDE 的詳細步驟請參考第四章 Case 9)

修改後的內容如下 :


Sample 1: 安裝及使用 Node-red Freeboard 元件Step3: 重新部署及查看工具箱

點選按鈕後按確認即可重新部署

部署成功更新畫面 , 會看到freeboard 元件己出現在工具箱中


Sample 1: 安裝及使用 Node-red Freeboard 元件Step4: 建立 freeboard node-red flow 我們使用元件附的範例 ,直接將內容剪下 , 貼到

Clipboard 即可匯入http://flows.nodered.org/node/node-red-contrib-freeboard


Sample 1: 安裝及使用 Node-red Freeboard 元件Step4-1: 建立 freeboard node-red flow

匯入後畫面上出現的流程如下 :幫 node 取名為 create random value

Free board Gauge 需要的內容 , 只有 Value 一欄

Free board data source 的識別名稱


Sample 1: node-red-contrib-freeboardStep 5: 開啟 freeboard 網頁在 node.js 網址後加上 /freeboard 即是 freeboard 的網址http://<your-nodered-server>.mybluemix.net/freeboard/


Sample 1: node-red-contrib-freeboardStep 6: 建立 datasource

選擇 [Node-RED] Freeboard 做為 Data Source

選擇 ADD 以定義新的Data Source


Sample 1: node-red-contrib-freeboardStep 7: 建立 PANE

選擇 ADD PANE 以新增一個 Gauge 型態的PANE

注意要選到 value 欄位


Sample 1: node-red-contrib-freeboardStep 8: save dashboard 及觀察結果點選 Pretty 或

MINIFIED 以儲存版面設計

從 Node-RED 注入新事件觀察資料變化


Sample 2: Google Map With BART Stations Using WebsocketsStep1: 開啟 Google Map flow 說明

http://flows.nodered.org/flow/d7a45e7e693f43c9d47b

找到 Google Map With Bart Stations Using Websockets 元件 , 並開啟說明 .

這是個 flow 元件 , 不需安裝 package, 只要從Node-red UI匯入就好 .


Sample 2: Google Map With BART Stations Using WebsocketsStep2: 匯入 flow

http://flows.nodered.org/flow/d7a45e7e693f43c9d47b

將 flow 內容透過clipboard 匯入


Sample 2: Google Map With BART Stations Using WebsocketsStep 2-1: 檢視流程

flow 概要說明

加入 debug 節點方便觀察 BART station 資料內容下方 flow 以websocket 協定提供 BART 車站資訊

上方 flow 建立了一個 /mapstations 的網頁 , 可以顯示 google 地圖 , 並呼叫下方的 websocket 服務讀取車站資訊

為節點取名 Google Map


Sample 2: Google Map With BART Stations Using WebsocketsStep3: 執行 flow

開啟http://<node-server>/mapstations 就可看到地圖及 BART車站位置

注意 webscoket 燈號變為綠色


節點說明 (websocket node):

39

建立一組 websocket node 以聽取及回應websocket client

websocket node 可以用來啟始一組websocket 服務 ,等候 client 發送 ws request

websocket 連線時 , 會收到一個 ping! 的訊息 .


節點說明 (http reqeust node):

40

當收到 ping! 時 ,發送一個 http request到api.bart.gov 讀取車站資料

api.bart.gov 送出的資料原始格式為XML


節點說明 (xml node):

41

Xml node 將資料格式由 XML 轉為JSON


節點說明 (http node):

42

http node 可以用來撰寫網頁程式

設定存取此網頁的URL


節點說明 (html template node):

43

載入 google map

標記中心點

繪出地圖


節點說明 (html template node):

44

Socket 連線

Send Ping!

收到 socket 送回的message

在地圖上標記座標


第五章結束

45


-- 了解 Node 元件程式結構-- 透過範本修改建立新的元件

第六章元件型態 DIY


自行定義一個 Node-RED 元件型態並不困難 , 在 http://nodered.org/docs/ 中的 Creating Nodes 有完整的介紹 .

在此我們以一個 call REST API 的例子做說明 , 學會之後您就可以此類推去封裝任何 API 服務成為好用的 Node-RED 元件

http://nodered.org/docs/


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,因此命名規則及存放位置不可出錯


Node 元件程式架構

49

我們以下面這個樣板程式做說明 :

儲存位址 : https://github.com/joseph580307/node-red-contrib-helloworld儲存庫名稱 : joseph580307/node-red-contrib-helloword

儲存庫中可以定義多組元件型態 .在這個儲存庫中需要一個package.json 檔

語言檔在此定義 .

https://github.com/joseph580307/node-red-contrib-helloworld


package.json

50

宣告元件型態及程式名稱 ,

.js 檔中的相依 package在此宣告


callapi001.js

51

// 建立 Node-RED 元件// 接收 Param1 參數

// 程式邏輯

function 名稱


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 名稱


callapi001.html

53

// 註冊 UI Template

// 註冊 help


callapi001.html

54

// 註冊元件型態


Locales

55


package.json in Node-RED Main

56

在 package.json 中加入這行敘述就可以引用 Git 上的元件

當 git hub 上的元件內容變動時 , 執行re-staging 即能讓變更生效 .


Test Run

57

自製的元件型態出現在Toolbox 中 .

執行結果 .


了解 Node-RED 範例元件之後 , 要創自己的元件 , 只要三部驟 :


可以用 Fork 的方法產生一份原碼到自己的 git 帳號

你可以使用Ｆ ork 或 Download ZIP, 複製原始碼

或是下載修改後 , 再上傳回新建立的 git repository.


需要修改的程式部份包括 :

步驟作業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, 建立新元件的相依性


步驟作業1 點選部署鍵以重啟Ｎ ode-RED 主程式2 觀察執行結果是否正確

測試執行結果 :


第六章結束

62


Thank you

63

Take me to BluemixClick Here

https://ibm.biz/BdEzTZ

bluemix node-red part ii

Technology