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 Bluemix
Click Here

© 2016 IBM Corporation2
第四章在 Node-RED 中撰寫 Javascript 程式
第五章擴充 Node-RED 工具盒
第六章元件型態 DIY
打造智慧物聯網應用 (Part II)

第一章入門篇 -- 溫度感測與通知
第二章排程器與網頁爬蟲
第三章用 Node-RED 寫 HTML 及組合 REST
API
打造智慧物聯網應用 (Part I)
第七章資料儲存
第八章 dashDB-R 與機器學習
第九章 Watson 感知元件
打造智慧物聯網應用 (Part III)
第十章啟用安全設定
第十一章 MQTT & IBM IOT
第十二章用 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.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 元件觀察輸出變數內容 .

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 中 ,
要如何使用加載的模組
錯誤示範

Step 1 – 開啟 Git 進入 Node.js 程式編輯環境
17
如果你已經建立 Git
Project, 這裡會顯示 :
由此開始點選 ADD
GIT, 依系統指引直到開
啟 DevOps Web IDE
環境 .

Step 2 – 開啟 DevOps IDE 後 , 點選開啟 bluemix-settings.js
18
原程式碼
修改後程式碼
請參考下列網址中的 Global Context 說明
http://nodered.org/docs/writing-functions.html
在此宣告加載的
package 可以
在 node-red 節
點中 , 以
context.global.
mathjsModule
讀取

Step 3 – 另外 , 我們需要透過 package.json 安裝 mathjs package
19
原程式碼修改後程式碼
一般安裝 node.js
package 會使用 npm
install mathjs,
在此我們只要在
package.json 中的
depencies ,, 加入
package 名稱 , re-
stagining 時就會載入

Step 4 – 部署修改後的設定
20
點選確認後開始部署
, 直到再次出現綠色燈
號及 ( 執行中 : 一般 )
即完成
”點選從工作區部署
”程式鈕讓變更生效

Step 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/
在 flow.nodered.org 可
以找到 500 多個擴充工
具元件

Sample 1: node-red-contrib-freeboard
Step1: 開啟 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)
修改後的內容如下 :

Step3: 重新部署及查看工具箱
點選按鈕後按確認
即可重新部署
部署成功更新畫面 , 會看到
freeboard 元件己出現在工具箱
中

Step4: 建立 freeboard node-red flow
我們使用元件附的範例 ,
直接將內容剪下 , 貼到
Clipboard 即可匯入
http://flows.nodered.org/node/node-red-contrib-freeboard

Step4-1: 建立 freeboard node-red flow
匯入後畫面上出現
的流程如下 :幫 node 取名為
create random
value
Free board Gauge
需要的內容 , 只有
Value 一欄
Free board data
source 的識別名稱

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

Step 6: 建立 datasource
選擇 [Node-RED]
Freeboard 做為 Data
Source
選擇 ADD 以定義新的
Data Source

Step 7: 建立 PANE
選擇 ADD PANE 以新
增一個 Gauge 型態的
PANE
注意要選到 value
欄位

Step 8: save dashboard 及觀察結果點選 Pretty 或
MINIFIED 以儲存
版面設計
從 Node-RED 注入
新事件觀察資料變
化

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 匯入就好 .

Step2: 匯入 flow
http://flows.nodered.org/flow/d7a45e7e693f43c9d47b
將 flow 內容透過
clipboard 匯入

Step 2-1: 檢視流程
flow 概要說明
加入 debug 節點方
便觀察 BART station
資料內容
下方 flow 以
websocket 協定提
供 BART 車站資訊
上方 flow 建立了一個
/mapstations 的網頁 , 可以顯
示 google 地圖 , 並呼叫下方
的 websocket 服務讀取車站
資訊
為節點取名 Google
Map

Step3: 執行 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 元件

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 檔
語言檔在此
定義 .

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 Bluemix
Click Here

Bluemix Node-Red Part II

Recommended

Recommended

More Related Content

Similar to Bluemix Node-Red Part II

Similar to Bluemix Node-Red Part II (20)

More from Joseph Chang

More from Joseph Chang (13)

Bluemix Node-Red Part II