bluemix node-red part ii
TRANSCRIPT
© 2016 IBM Corporation
使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part II)
Joseph Chang
Cloud Architect - Bluemix
IBM Cloud, Taiwan
Take me to BluemixClick Here
© 2016 IBM Corporation2
第四章 在 Node-RED 中撰寫 Javascript 程式第五章 擴充 Node-RED 工具盒第六章 元件型態 DIY
使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part II)
© 2016 IBM Corporation3
第一章 入門篇 -- 溫度感測與通知第二章 排程器與網頁爬蟲第三章 用 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)
© 2016 IBM Corporation4
-- input/output msg-- context and global context-- require “package”
第四章 在 Node-RED 中撰寫 Javascript 程式
© 2016 IBM Corporation5
• Node-RED 中的 function 節點可以用來寫J avaScript, 所以如果找不到合適可用的元件 , 或是只是要撰寫簡單處理邏輯 , 我們就可以用 function 節點快速完成 .
• 在了解N ode-RED function 的撰寫前 , 您需要有N ode.js 程式撰寫相關的基礎 . 如果您還不熟悉N 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 元件觀察輸出變數內容 .
© 2016 IBM Corporation
function in Node-RED Diagram
6
© 2016 IBM Corporation
Case 1: msg 參數傳遞
7
在 Node-RED 的 Node與 Node 間 , 我們通常是用msg 物件來傳遞參數 .
在第一個例子中 , 我們先不呼叫 function,直接印出 timestamp 輸出的 msg 物件 . 以方便與之後 function 運算後的 msg 物件做比較 .
由 timstamp 直接輸出的 msg 物件 , 我們可以看到它帶有 topic, payload, _msgid 三個屬性 .
© 2016 IBM Corporation
Case2: function msg 輸入與輸出
8
讀取由前節點傳入的變數
在msg 物件上增加額外的內容
return 指令帶的參數會成為下個節點的輸入變數
© 2016 IBM Corporation
Case 3: 產生新的輸出變數
9
定義一個新的傳遞參數物件
輸出新產生的變數
© 2016 IBM Corporation
Case 4: context 變數
10
Node-RED 中一般變數的生命週期只有在本次事件有效 , 但如果是存在 context 物件的變數 , 可以持續讓後績的事件使用
宣告context 變數 每次進入的事件
讓 context.count 加 1
© 2016 IBM Corporation
Case 5: context.global 變數
11
Node-RED 中一般變數的作用範圍只有在本節點有效 , 但存在 context.global 的變數是跨節點仍有效
在 pre-process 節點 宣告 三個不同屬性的變數
在 process 節點取用這三個不同屬性的變數var1 是一般的區域變數 , 雖然在前節點宣告 , 但 無法在本節點讀取 . 因此造成ReferenceError
錯誤示範
© 2016 IBM Corporation
Case 5: context.global 變數
12
將 var1 註解掉 , 程式繼續執行
context.var2 的值為Null, 因此不會印出
將 var3 為context.global 變數 , 因此前節點定義的值會被帶到本節點
© 2016 IBM Corporation
Case 6: 在 function 節點下方顯示狀態
13
Node.status 可用來設定進行狀態標記
當訊息通過時 , 節點下方出現標記
timeout時 , 清空狀態標記
© 2016 IBM Corporation
Case 7: 一個以上的輸出參數
14
用 [ msg1,msg2,...msg x] 參數陣列 , 可輸出多個變數
設定輸出變數的個數 , 圖形會依此定顯示多個輸出接口
多個輸出接口
© 2016 IBM Corporation
Case 8: throw & catch error
15
由 catch 節點攔截到的錯誤
在 catch node 中 , 我們可以設定要 catch 那些節點 .
node.error 指令可 throw error event
© 2016 IBM Corporation
Case: 9 在 Node-RED function 中加載 Package
16
在 function 中直接調用require() 會出現 RefferenceError: require is not defined 的錯誤
我們用 mathjs 做例子 , 說明在 Node.js 中 , 要如何使用加載的模組
錯誤示範
© 2016 IBM Corporation
Case: 9 在 Node-RED function 中加載 PackageStep 1 – 開啟 Git 進入 Node.js 程式編輯環境
17
如果你已經建立 Git Project, 這裡會顯示 :
由此開始 點選 ADD GIT, 依系統指引直到開啟 DevOps Web IDE 環境 .
© 2016 IBM Corporation
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讀取
© 2016 IBM Corporation
Case: 9 在 Node-RED function 中加載 PackageStep 3 – 另外 , 我們需要透過 package.json 安裝 mathjs package
19
原程式碼 修改後程式碼
一般安裝 node.js package 會使用 npm install mathjs, 在此我們只要在package.json 中的depencies ,, 加入 package 名稱 , re-stagining 時就會載入
© 2016 IBM Corporation
Case: 9 在 Node-RED function 中加載 PackageStep 4 – 部署修改後的設定
20
點選 確認後開始部署 , 直到再次出現綠色燈號及 ( 執行中 : 一般 ) 即完成
點選”從工作區部署程式鈕” 讓變更生效
© 2016 IBM Corporation
Case: 9 在 Node-RED function 中加載 PackageStep 5 – 撰寫正確的 加載 package 寫法
21
透過 context.global.mathjsModule 可以取到我們在bluemix-settings.js 所定義的module
© 2016 IBM Corporation
第四章 結束
22
© 2016 IBM Corporation23
-- nodered.org 開源社群-- 在 Bluemix Node-RED 中加載元件-- 應用範例 -- Freeboard -- GoogleMap
第五章 擴充 Node-RED 工具盒
© 2016 IBM Corporation24
你可以自行開發 Node-RED 左方工具盒中的元件 , 或是由 Nodered.org 下載別人開發的元件 ,在 http://flows.nodered.org 中有超過 500 個已開發好的工具元件 , 本單元我們將挑選兩個元件 , 說明如何擴充 Bluemix Node-RED 的工具盒 , 第一個是用於提供 Internet of Thins 儀表板功能的 Freeboard , 第二個是 GoogleMap
© 2016 IBM Corporation25
http://flows.nodered.org/
在 flow.nodered.org 可以找到 500 多個擴充工具元件
© 2016 IBM Corporation26
Sample 1: node-red-contrib-freeboardStep1: 開啟 freeboard 元件說明
找到 freeboard 元件 , 並開啟說明 .
http://flows.nodered.org/node/node-red-contrib-freeboard
© 2016 IBM Corporation27
Sample 1: 安裝及使用 Node-red Freeboard 元件Step2: 修改 package.json
查看 npm install 時用的名稱及版本
然後開啟 DevOps Web IDE 中的 package.json加入新元件( 開啟 IDE 的詳細步驟請參考第四章 Case 9)
修改後的內容如下 :
© 2016 IBM Corporation28
Sample 1: 安裝及使用 Node-red Freeboard 元件Step3: 重新部署及查看工具箱
點選按鈕後按確認即可重新部署
部署成功更新畫面 , 會看到freeboard 元件己出現在工具箱中
© 2016 IBM Corporation29
Sample 1: 安裝及使用 Node-red Freeboard 元件Step4: 建立 freeboard node-red flow 我們使用元件附的範例 ,直接將內容剪下 , 貼到
Clipboard 即可匯入http://flows.nodered.org/node/node-red-contrib-freeboard
© 2016 IBM Corporation30
Sample 1: 安裝及使用 Node-red Freeboard 元件Step4-1: 建立 freeboard node-red flow
匯入後畫面上出現的流程如下 :幫 node 取名為 create random value
Free board Gauge 需要的內容 , 只有 Value 一欄
Free board data source 的識別名稱
© 2016 IBM Corporation31
Sample 1: node-red-contrib-freeboardStep 5: 開啟 freeboard 網頁在 node.js 網址後加上 /freeboard 即是 freeboard 的網址http://<your-nodered-server>.mybluemix.net/freeboard/
© 2016 IBM Corporation32
Sample 1: node-red-contrib-freeboardStep 6: 建立 datasource
選擇 [Node-RED] Freeboard 做為 Data Source
選擇 ADD 以定義新的Data Source
© 2016 IBM Corporation33
Sample 1: node-red-contrib-freeboardStep 7: 建立 PANE
選擇 ADD PANE 以新增一個 Gauge 型態的PANE
注意要選到 value 欄位
© 2016 IBM Corporation34
Sample 1: node-red-contrib-freeboardStep 8: save dashboard 及觀察結果 點選 Pretty 或
MINIFIED 以儲存版面設計
從 Node-RED 注入新事件觀察資料變化
© 2016 IBM Corporation35
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匯入就好 .
© 2016 IBM Corporation36
Sample 2: Google Map With BART Stations Using WebsocketsStep2: 匯入 flow
http://flows.nodered.org/flow/d7a45e7e693f43c9d47b
將 flow 內容透過clipboard 匯入
© 2016 IBM Corporation37
Sample 2: Google Map With BART Stations Using WebsocketsStep 2-1: 檢視流程
flow 概要說明
加入 debug 節點方便觀察 BART station 資料內容下方 flow 以websocket 協定提供 BART 車站資訊
上方 flow 建立了一個 /mapstations 的網頁 , 可以顯示 google 地圖 , 並呼叫下方的 websocket 服務讀取車站資訊
為節點取名 Google Map
© 2016 IBM Corporation38
Sample 2: Google Map With BART Stations Using WebsocketsStep3: 執行 flow
開啟http://<node-server>/mapstations 就可看到地圖及 BART車站位置
注意 webscoket 燈號變為綠色
© 2016 IBM Corporation
節點說明 (websocket node):
39
建立一組 websocket node 以聽取及回應websocket client
websocket node 可以用來啟始一組websocket 服務 ,等候 client 發送 ws request
websocket 連線時 , 會收到一個 ping! 的訊息 .
© 2016 IBM Corporation
節點說明 (http reqeust node):
40
當收到 ping! 時 ,發送一個 http request到api.bart.gov 讀取車站資料
api.bart.gov 送出的資料原始格式為XML
© 2016 IBM Corporation
節點說明 (xml node):
41
Xml node 將資料格式由 XML 轉為JSON
© 2016 IBM Corporation
節點說明 (http node):
42
http node 可以用來撰寫網頁程式
設定存取此網頁的URL
© 2016 IBM Corporation
節點說明 (html template node):
43
載入 google map
標記中心點
繪出地圖
© 2016 IBM Corporation
節點說明 (html template node):
44
Socket 連線
Send Ping!
收到 socket 送回的message
在地圖上標記座標
© 2016 IBM Corporation
第五章 結束
45
© 2016 IBM Corporation46
-- 了解 Node 元件程式結構-- 透過範本修改建立新的元件
第六章 元件型態 DIY
© 2016 IBM Corporation47
自行定義一個 Node-RED 元件型態並不困難 , 在 http://nodered.org/docs/ 中的 Creating Nodes 有完整的介紹 .
在此我們以一個 call REST API 的例子做說明 , 學會之後您就可以此類推去封裝任何 API 服務成為好用的 Node-RED 元件
© 2016 IBM Corporation
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,因此命名規則及存放位置不可出錯
© 2016 IBM Corporation
Node 元件程式架構
49
我們以下面這個樣板程式做說明 :
儲存 位址 : https://github.com/joseph580307/node-red-contrib-helloworld儲存庫名稱 : joseph580307/node-red-contrib-helloword
儲存庫中可以定義多組元件型態 .在這個儲存庫中需要一個package.json 檔
語言檔在此定義 .
© 2016 IBM Corporation
package.json
50
宣告元件型態及程式名稱 ,
.js 檔中的相依 package在此宣告
© 2016 IBM Corporation
callapi001.js
51
// 建立 Node-RED 元件// 接收 Param1 參數
// 程式邏輯
function 名稱
© 2016 IBM Corporation
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 名稱
© 2016 IBM Corporation
callapi001.html
53
// 註冊 UI Template
// 註冊 help
© 2016 IBM Corporation
callapi001.html
54
// 註冊元件型態
© 2016 IBM Corporation
Locales
55
© 2016 IBM Corporation
package.json in Node-RED Main
56
在 package.json 中加入這行敘述就可以引用 Git 上的元件
當 git hub 上的元件內容變動時 , 執行re-staging 即能讓變更生效 .
© 2016 IBM Corporation
Test Run
57
自製的元件型態出現在Toolbox 中 .
執行結果 .
© 2016 IBM Corporation58
了解 Node-RED 範例元件之後 , 要創自己的元件 , 只要三部驟 :
© 2016 IBM Corporation59
可以用 Fork 的方法產生一份原碼到自己的 git 帳號
你可以使用 F ork 或 Download ZIP, 複製原始碼
或是下載修改後 , 再上傳回新建立的 git repository.
© 2016 IBM Corporation60
需要修改的程式部份包括 :
步驟 作業1 將元件中 callAPI XXX .*檔名置換成你所想要的名稱2 將元件中 package.json 中的宣告的元件置換成對映的名稱3 置換 callAPIXXX.js 中的 function 名稱4 修改 callAPIXXX.js, callAPIXXX.html 中的註冊元件型態 , 註冊 UI template, 註冊 help 名稱5 修改 call APIXXX .html 的畫面設計6 修改 callAPIXXX.js 的程式邏輯及參數傳遞7 修改 callAPIXXX.json 的定義內容8 修改N ode-RED主程式中的 package.json, 建立新元件的相依性
© 2016 IBM Corporation61
步驟 作業1 點選部署鍵 以重啟N ode-RED 主程式2 觀察執行結果是否正確
測試執行結果 :
© 2016 IBM Corporation
第六章 結束
62