Bluemix Node-Red Part I

© 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 網頁範例

PaaS 平台對ＩＴ的改變 , 不只是建立 AP 環境變快了
更巨大的影響在ＡＰ與ＡＰ間的連結也變得容易了 .
2

讓 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

© 2016 IBM Corporation4
第一章入門篇 -- 溫度感測與通知
第二章排程器與網頁爬蟲
第三章用 Node-RED 寫
HTML ， Websocket 及組合 REST API
打造智慧物聯網應用 (Part I)

第四章在 Node-RED 中撰寫 Javascript
程式
第五章擴充 Node-RED 工具盒
第六章元件型態 DIY
打造智慧物聯網應用 (Part
II)
第七章資料儲存
第八章 dashDB-R 與機器學習
第九章 Watson 感知元件
III)
第十章啟用安全設定
第十一章 MQTT & IBM IOT
第十二章用 Node-RED 做為行動後台
IV)

-- Sensor
-- MQTT Broker
-- Notification
第一章入門篇 -- 溫度感測與通知

溫度感應與通知 Node-RED Diagram
7

建置步驟 :
在 Chrome 或 Firefox 中開啟 https://console.ng.bluemix.net/catalog/
點選樣板中的 Internet of Things 圖示 , 以建立服務
8
當服務建立完成 , 點選畫面中的連結 , 以開啟 Node-RED

建置步驟 :
進入網站首頁後 , 點選 “ Go to your Node-RED flow editor”
.
9
進入 Node-RED 編輯器 , 可看到預建的溫度
感測流程範本
.

建置步驟 :
接下來我們要配置模擬溫度感測器 , 請開啟以下網址 :
http://quickstart.internetofthings.ibmcloud.com/iotsensor
10
開啟後 , 點選 Mac
Address 以開啟
Device
DashBorad
記下 Mac Address
等會在 Node-
RED Editor 中會
用到

建置步驟 :
回到 Node-RED flow editor, Double-Click on “IBM Iot App in” 節點 , 系統跳出設定視窗
.
11
填入前頁取得的
Mac Address, 然
後點選 “ OK”

建置步驟 :
12
此時因為內容有改變 , 右
上角的 Deploy 鈕變成
Active 狀態 , 請按
”下 Deploy ”讓變更生效 .

建置步驟 :
13
點選 debug 可看
到視窗中 , 感測器
不斷傳入新的訊息

節點說明 (function node):
14
msg.payload( 內容如
下 ) 流進此節點 , 取
其中的 d:{temp:15}
回傳
function node 可以用來撰寫 javascript 程式
將 text 重新轉成
payload 型式再回
傳 .

節點說明 :
15
將前頁傳入的
payload ( 值 =15)
送入做比較 . 決定要
走那個 flow
switch node 可以用來設定判斷條件 , 依決果決定資料
流動的路線

節點說明 :
16
將前頁傳入的
payload ( 值 =15)
帶入範本 , 產出新的
內容 ( Temperature
(15) within safe
limits)
template node 可以快速組合範本及變數 , 產生輸出內容

玩個小把 –戲當溫度超過臨界值時自動發送簡訊 :
17
1. 在Ｔ wilio 網站註冊個帳號
https://www.twilio.com/try-twilio Twilio 提供免費試用
帳號 , 註冊時需提供
手機號碼 .
測試期間發信到註冊
的手機號碼時免費的

當溫度超過臨界值時自動發送簡訊 :
18
2. 取得電話號碼及ＳＩＤ , ＡＵＴＨＴ
ＯＫＥＮ
3. 檢查 Messing 受信國家的
權限是否開啟
Twilio 配發的手機號
碼
記下 Account ID 和
Auth Token

當溫度超過臨界值時自動發送簡訊 -- 加入 Twilio 節點 :
19
填入自己的手機號碼
填入 Twilio 發的電
話號碼與 SID,Token

檢視手機是否收到簡訊
20
將模擬器溫度調到
41 以上
你成功了嗎 ?

第一章結束
21

第二章排程器與網頁爬蟲
22
-- Injection & Timer
-- parse HTML

網頁爬蟲 Node-RED Diagram
如果我想透過雲端程式 ,
每天幫我過濾 CNN 財經
新聞 , 遇到關鍵新聞通知
我 , 有可能嗎 ?

網頁爬蟲 Node-RED Diagram
透過 Node-RED 分析網頁內
容很簡單

節點說明 :
25
設定爬蟲發動的週期
Inject node 可以設定排程 , 發動事件

節點說明 :
26
在此我們用 cnn 財
經網為範例
http request node 可以執行開啟網頁的動作 , 如
同 curl
Yes, 如果是 UTF-8 編碼
就可以 , 你可以用
http://news.yahoo.com.tw
試試看
可以爬中文網站嗎 ?

節點說明 :
27
先觀察網頁原始碼 ,
找到想擷取的 tag
html node 可以用來擷取 html 網頁中 , 某
個指定的 tag 內容 , 輸出的部份可以把每個
tag 拆成不同的 package.

節點說明 :
28
填入要抓取的 tag
名稱 , 在此我們想
要分析 <article>
撰則 multiple
messages, 較容易
分析

節點說明 :
29
Edit switch 我們在
第一章介紹過 , 在
此我們用 contains
設定過濾條件
如果要設更多
keyword 可考慮使
用 matches regex

節點說明 :
30
帶有 keyword 的新
聞會導入 News
Template. 再透過
twillio 傳送到我的
手機 , 通知我看新
聞

第二章結束
31

-- Simple Web Page
-- REST API
-- Websocket
第三章用 Node-RED 寫 HTML, WebSocket
及組合 REST API

Simple Web Page
33

簡單網頁 -- Node-RED
34

節點說明 :
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
要讀取輸入參數請用
msg.req.query.<parameter>
Ex. http://iot-
demo101.mybluemix.net/hello?
id=jojo
msg.req.query.id 傳回值是 jojo
Function node 在此可以接收輸入參數 , 撰寫業
務邏輯 , 將輸出參數傳給下一個節點
要建立輸出參數請用
msg.payload.<variable>

節點說明 :
37
讀取前節點傳入的參數
Template node 可以用來定義 HTML 網頁的格式
,
內容可插入前節點傳進的參數

節點說明 :
38
Http response node 必須與 http in 節點搭配使
用
在此沒有特別的參數需要填
寫 , 但是傳出的內容會帶有
:
payload : 文件的 Body
statusCode : 預設值 200
headers: 文件的 Header
所以最終看到的內容
就是

Call REST API
39

Call REST API in Node-RED
40
Node-RED 亦可很容易
的用來 call 任何的
REST API, 包括 open
data 的 API, 在此我們用
Yahoo Finance API 查詢
台積電股價為例

節點說明 :
41
在 http request 的 url 參數中可以讀取由前節點
傳入的變數
我們在此設定一個
msg.stock_id 變數 , 它
將在接下來的 http request
節點的 url 中 , 以
{{stock_id}} 的格式被取用
.

節點說明 :
42
在 http request 節點 , 可呼叫 REST API
在此我們以 Yahoo Finance
API 為例 , 查詢台灣股票
價格
回傳內容為 JSON 格式 ,
我們可以在 node-RED 中很
容易的用程式做進階處理

在 Bluemix 中的 Runtime 都可
以成為 REST API provider,
透過 Node-RED http request 元
件彼此就可以輕鬆溝通
43

Websocket
44

Websocket 網頁
45
每 5 秒時間自動
更新

匯入程式碼
46
請利用 Node-
RED 的 Import
功能將下一頁的
內容貼到
Clipboard, 以完
成匯入工作

–匯入程式碼 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
建立一個名為
simple 的頁面

節點說明 :
49
Websocket 網
頁程式
接收來自
wss://<host>/ws/simple
的訊息

節點說明 :
50
當收到 Websocket 資料時
, 會 trigger ws.onmessage
動作
我們要更新網頁中名
”為 message” 的 <div>

節點說明 :
51
畫面開啟時 , ”即啟動 “聽取
webscoket 資料
當 ws.onmessage 收到資
料時 , 會更新此 <div> 的內
容

節點說明 :
52
不需填資料

節點說明 :
53
每隔 5 秒送出一個
timestamp 字串

節點說明 :
54
格式化時間字串

節點說明 :
55
設定 Websocket 的
服務路徑
發送 Websocket

節點說明 :
56
接收由網頁 click
button 時發出的
Websocket

Exercise:
57
動手練習一下 , 改用 Websocket 網頁技術顯示即時溫度

第三章結束
58

Thank you
59
Take me to Bluemix
Click Here

Bluemix Node-Red Part I

More Related Content

Viewers also liked

Similar to Bluemix Node-Red Part I

More from Joseph Chang

Bluemix Node-Red Part I