點擊鏈接加入群聊【Node-RED與IoT開發(fā)交流】https://jq.qq.com/?_wv=1027&k=5owlJfm
新創(chuàng)立的群，歡迎加入！
Node-RED Tutorial Home
介紹
建立你的第一個流
基礎節(jié)點和流
核心節(jié)點
例子:
使用Node-RED搭建一個天氣預報面板
基于 SIMATIC IOT2040 的 Node-RED S7 通信
Node-RED:2 -建立你的第一個流
這節(jié)課將介紹Node-RED可視化工具,讓你開始建立你的第一個流。您將學習如何創(chuàng)建簡單的流動,通過使用調(diào)試節(jié)點跟蹤消息流和如何使用函數(shù)節(jié)點編寫簡單的JavaScript代碼,調(diào)整節(jié)點以適應您的具體需求。
建立你的第一個流這節(jié)課將介紹Node-RED可視化工具,讓你開始建立你的第一個流。您將學習如何創(chuàng)建簡單的流動,通過使用調(diào)試節(jié)點跟蹤消息流和如何使用函數(shù)節(jié)點編寫簡單的JavaScript代碼,調(diào)整節(jié)點以適應您的具體需求。
Node-RED 界面
一旦你打開Node-RED,你會看到標準的Node-RED 界面，其中包括三個主要的窗格,如2.1圖所示
主要控制流創(chuàng)建的工作區(qū)在中間。這里你可以拖拽節(jié)點并將他們用一根線連接起來。在工作區(qū)面板的頂部是一組選項卡。每個選項卡打開之前創(chuàng)建的工作區(qū)和用工作區(qū)顯示創(chuàng)建的任何流。
左邊窗格包含所有內(nèi)置的Node-RED實例支持的節(jié)點。在上面的例子中,你看到的FRED節(jié)點集包含添加到帶有Node-RED的基本設置的一個大的選擇。在以后的課程您將了解這些節(jié)點和使用它們來開發(fā)新的流。你可以看到節(jié)點被分類。開放一個類別顯示了單個節(jié)點。
右邊是輸出窗格,可以切換到infoand debugtabs。當信息被選中時,顯示所選節(jié)點的文檔。當debugis選中時,它將顯示調(diào)試的輸出節(jié)點,錯誤和警告。
以上這三個主要的窗格是常用的工具欄,右邊是三個小部件,部署按鈕,一個用戶信息圖標按鈕和一個下拉菜單的管理和控制按鈕。稍后在后面的課程中您將詳細了解下拉按鈕。用戶信息圖標允許你返回到FRED首頁，它包含教程的鏈接,您的帳戶信息,狀態(tài)和其他信息以及注銷的FRED服務。
使用Deploy按鈕時流結(jié)構已經(jīng)構建完成,它能使流部署到Node-RED系統(tǒng)并執(zhí)行。你在第5課會了解到幕后實際發(fā)生的細節(jié)。現(xiàn)在只是把Deploy按鈕當做讓你流運行的方式。
快速的瀏覽一下Node-RED節(jié)點和消息
第1課中你可以看到,Node-RED允許您連接節(jié)點以創(chuàng)建流執(zhí)行您的編程任務。節(jié)點之間的消息傳遞,從輸入節(jié)點處理節(jié)點到輸出節(jié)點。讓我們簡要地看一個節(jié)點,流和消息。
有三個主要類型的節(jié)點:
- 輸入節(jié)點(例如inject)
- 輸出節(jié)點(如debug)
- 處理節(jié)點(例如function)
輸入節(jié)點允許您輸入數(shù)據(jù)到Node-RED應用程序或"流"中。他們至少有一個輸出端點所代表的只在右邊顯示的灰色小方格。你使用輸入節(jié)點從其他服務器中連接數(shù)據(jù),例如Twitter,Google,serial,websocketsor tcp節(jié)點,或者使用injectnode手動輸入數(shù)據(jù)到流中。
輸出節(jié)點允許你發(fā)送數(shù)據(jù)到Node-RED流外。他們的左側(cè)有單獨一個輸入的端點。你使用輸出節(jié)點發(fā)送數(shù)據(jù)到其他服務器,例如通過Twitter,tcp、serial 或郵件節(jié)點,或使用debugn節(jié)點輸出到debug窗格。
處理節(jié)點允許您處理數(shù)據(jù)。他們有一個輸入端點和一個或多個輸出端點。它們允許您將數(shù)據(jù)類型(例如json,csv,xml)節(jié)點,使用數(shù)據(jù)觸發(fā)消息(如trigger、delay)節(jié)點和使用接收到的數(shù)據(jù)(例如function節(jié)點)編寫自定義代碼。
請注意,某些節(jié)點,比如injectand debugmessages,有一個按鈕,允許你開動一個節(jié)點(在使用inject節(jié)點的情況下)或啟用和禁用節(jié)點(在debug節(jié)點的情況下)。
流包含連接在一起的多個節(jié)點,使輸出標簽和下一個流的節(jié)點的輸出標簽相連。節(jié)點中的消息流攜帶數(shù)據(jù)從一個節(jié)點到另一個節(jié)點。
Node-RED節(jié)點接收輸入消息和產(chǎn)生輸出消息。消息是JavaScript對象，它包含至少一個"有效載荷"參數(shù),如下:
代碼2.1基本Node-RED消息結(jié)構
msg = {
payload:"message payload"
};
節(jié)點接收和產(chǎn)生信息,通常使用msg。有效載荷是接收和產(chǎn)生的數(shù)據(jù)的主要占位符。并且，消息可擴展以包含其他參數(shù)。例如,設置消息的主題和添加一個新的參數(shù),位置,您可以創(chuàng)建一個新的msg對象,如代碼2.2所示。
代碼2.2 更加復雜的Node-RED消息結(jié)構
msg = {
payload:"message payload",
topic:"error",
location:"somewhere in space and time"
};
示例2.1 第一個流 Hello World
我們用這些知識來創(chuàng)建您的第一個流。
示例2.1建立你的第一個流:Hello World
讓我們繼續(xù),開始建立你的第一個流,這樣您就可以看到使用Node-RED UI構建和部署流是多么簡單。
讓我們從最簡單的開始流,一個節(jié)點注入一些信息到流中,連接到調(diào)試節(jié)點看到流的輸出調(diào)試信息。一旦運行,您將構建完整的Hello World流。
因為這是第一次我們向你展示如何建立一個流,讓我們慢慢開始,用截圖解釋每個步驟。一旦您創(chuàng)建了您的第一個流并看到這是多么容易,你大多會只顯示最后整個流程的照片,而不是所有的屏幕截圖。
讓我們從最簡單的節(jié)點開始,注釋節(jié)點。你會在節(jié)點控制面板的function部分找到它。拖拽注釋節(jié)點到流工作區(qū),如圖2.3所示。
一旦你這么做了,看看右邊的信息窗格(如果調(diào)試選項卡被選中，記住轉(zhuǎn)換信息)。你會看到一個節(jié)點上的小信息,包括節(jié)點名、一個惟一的ID,一個描述節(jié)點的屬性字段。commentnode沒有太多要說的; 然而,更復雜的節(jié)點有更多的信息。
雙擊注釋節(jié)點,您將看到一個配置窗口(圖2.4)如果你喜歡可以給注釋節(jié)點一個名字并添加詳細的文本。
ok,現(xiàn)在讓我們添加第一個確實有些用的節(jié)點,注入節(jié)點。注入節(jié)點用于生成輸入流,是節(jié)點控制面板input中的一個節(jié)點。如果你拖拽一個注入節(jié)點到流工作區(qū),然后看看info選項卡,您將看到注入節(jié)點的文檔。注意,工作區(qū)中節(jié)點的名稱更改為injectto時間戳,因為從1月1日,1970年開始節(jié)點的默認行為是注入一個時間戳,以毫秒為單位的當前時間。
您還會注意到,injectnode(現(xiàn)在叫timestamp)右上方有一個藍點、右側(cè)有一個灰色的方塊。藍點表示節(jié)點自上次改變尚未部署; 灰色的方塊是輸出節(jié)點。這就是你附加"連線"輸出消息從注入節(jié)點路由到流中的下一個節(jié)點。
為感受注入節(jié)點和了解整個流程部署過程,讓我們添加一個debugnode看看會發(fā)生什么,把它們連接在一起,然后部署流程和測試它。
先拖動debugnode從節(jié)點板到工作區(qū)。你還可以再看看該節(jié)點的信息。
然后你將兩個節(jié)點連接在一起。為此,點擊灰色injectnode輸出點,按住鼠標按鈕,拖向debugnode。一個橙色線出現(xiàn),附著在debugnode上的灰色輸入點。
這是最簡單的流動,將在debugnode的調(diào)試面板顯示當前的時間戳。讓我們試一試!
在Node-RED窗口中單擊deploy按鈕(右上角)。你會看到一個彈框顯示流已經(jīng)部署成功。你還會注意到節(jié)點上的藍點消失,表明部署沒有變化。
現(xiàn)在,在你試流之前,確保右邊窗格的調(diào)試選項卡被選中。然后單擊injectnode左邊的選項卡,看看什么出現(xiàn)在調(diào)試面板。
如您所見,injectnode,當點擊時,會生成一個時間戳(1970年1月1日以來的毫秒數(shù)),通過輸出線轉(zhuǎn)換為一個消息并發(fā)送,傳遞給debugnode作為輸入信息。debugnode的默認行為是顯示其所接收到的任何消息,在它右邊的debug窗格中顯示。
恭喜,您創(chuàng)建并部署第一個流!
現(xiàn)在讓我們增加一點,看看用這個簡單的流我們可以做什么其他的事。首先,我們將編輯injectnode傳遞一條短信而不是一個時間戳。為此,選擇流中的injectnode并雙擊它。你會看到一個如圖2.8的配置窗口。
在payload字段中,選擇字符串而不是時間戳,然后鍵入任何你喜歡的字符串到payload字段下面的空白處。根據(jù)傳統(tǒng),讓我們從"Hello World--from my first NR flow"開始。
一旦你做出了改變,單擊ok保存更改并看看流工作區(qū)。你會看到藍色的點已經(jīng)出現(xiàn)在injectnode(這也回到了被稱為inject而不是timestamp),表明您未部署更改。再次單擊deploy按鈕來解決,然后點擊injectnode中的tab。如果你看看debug輸出你會看到,不再是一個時間戳（timestamp）,而是文本傳遞給debugnode作為消息,像往常一樣顯示。
正如您可以看到的,很容易連接一些簡單的節(jié)點和通過你的消息流獲取數(shù)據(jù)。在這個階段,你可能會想知道一些關于節(jié)點之間的消息流動。debug節(jié)點可以用來檢查他們的更多細節(jié)。
Node-RED有三個默認的屬性: 我們上面看到的payload,一個消息的主題,它是一個用戶定義的字符串來描述消息是有關什么的(它的主題,如果你愿意)和內(nèi)部標識符。你可以確實地看到這些信息如果你編輯debug node配置。讓我們試一試再看看輸出下圖
選擇debugnode,雙擊,改變節(jié)點的輸出字段"Complete msg object"(完整的msg對象)。如果你然后保存這個,部署并單擊injectnode,您將看到在debug（調(diào)試）窗格中一個JSON結(jié)構,它包含三個字段:一個"topic"（主題）,目前是空白,"payload"，它包含的字符串設置inject節(jié)點和一個內(nèi)部ID字段"_msgid"。一般不使用內(nèi)部消息ID字段。但是,在開發(fā)流中topic（話題）和payload都是廣泛使用。稍后您將看到更多的系列課。
這些字段是可擴展的,所以您可以定義新的消息屬性,例如,msg。位置,這可以根據(jù)消息來源增加緯度和經(jīng)度值的。讓我們看一看,在下一個示例中的流。
你能找到這個流的node-red描述:
[{"id":"50afa3ae.af505c","type":"inject","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":108.09944152832031,"y":114.09091186523438,"z":"d0851e69.2f7ae","wires":[["c0ca81c9.3f358"]]},{"id":"93144b54.6cebb8","type":"comment","name":"My first NR Flow","info":"Title\n=====\n\nMarkdown is accepted:\n\n```\nnode.log(\"Code styling made easy\")\n```","x":108.09944152832031,"y":63.090911865234375,"z":"d0851e69.2f7ae","wires":[]},{"id":"c0ca81c9.3f358","type":"debug","name":"","active":true,"console":"false","complete":"false","x":310.0994415283203,"y":142.09091186523438,"z":"d0851e69.2f7ae","wires":[]}]
示例2.2第二個流:
天氣警報
在這個例子中,這類似于一個第1課中介紹的例子,您可以監(jiān)視你家鄉(xiāng)的天氣,當天氣不錯的時候可以給自己發(fā)一個tweet。
首先你需要在OpenWeatherMap得到一個API密匙。OpenWeatherMap提供一個強大的服務,為全球提供詳細的天氣信息。訪問http://openweathermap.org/appid 并按照說明如下截圖所示。
你需要注冊一個OpenWeatherAccount，如下所示:
注冊后頁面將跳轉(zhuǎn)到你的主頁,在此您將能夠訪問或重新生成API。它看起來應該是這樣的:
現(xiàn)在,讓我們使用API建立天氣預警流。從左側(cè)窗格拖拽一個weather（天氣）節(jié)點到工作區(qū),如圖2.11所示。
圖2.11。將weather（天氣）節(jié)點拖放到工作區(qū)的空白部分。
如果您選擇右邊的信息窗格,您可以看到描述openweathermapnode中如何配置和使用它的詳細信息。一些有趣的注意事項:
它有一個完整的JSON結(jié)構作為msg。payload（有效載荷）,有著相當多的天氣細節(jié),所有提交的名字:值對,例如風速和tempc（攝氏溫度）
節(jié)點定義了3個新消息屬性,msg。location，msg。time 和msg.data。正如上面提到的,您可以自由添加屬性信息,并且openweathermapnode已經(jīng)添加這些新屬性以攜帶有關的額外信息。
讓我們配置節(jié)點和看看查詢當?shù)氐奶鞖夂笏蓪嶋H的數(shù)據(jù)結(jié)構。首先雙擊節(jié)點和填寫你的位置相關的表格。輸入你的城市和國家。添加您獲得API http://openweathermap.org/appid 并點擊"Ok",
如圖2.12所示。
然后拖拽一個debugnode把它和openweathermapnode連起來。點擊"部署"以查看在調(diào)試面板中從openweathermapnode得到的payload對象。
代碼2.3 openweathermapnode的消息有效負載（payload）是一個描述天氣狀況、溫度、風力、云量和日出的JSON結(jié)構。
{
"weather": "Clear",
"detail": "sky is clear",
"tempk": 295.104,
"tempc": 21.903999999999996,
"humidity": 53,
"maxtemp": 295.104,
"mintemp": 295.104,
"windspeed": 2.22,
"winddirection": 273.007,
"location": "Vancouver",
"sunrise": 1432038196,
"sunset": 1432094081,
"clouds": 8,
"description": "Vancouver weather(49.25,-123.12) is Clear (sky is clear)."
}
正如您所看到的,該節(jié)點提供了相當多和你當?shù)氐奶鞖庀嚓P的信息,所有常見的名字:值對。對于這個示例,您想要使用你要測試是否報道"Clear"（清楚）的"天氣"字段。如果是"Clear"（清楚）你會發(fā)送一條tweet。
為檢驗程序的邏輯,您將使用一個functionnode。你在第1課中看到其中之一,但沒有細節(jié)。讓我們看看如何通過拖拽一個到流中使用它們和如何雙擊它以打開node編輯器。
添加一個functionnode并將它連接到openweathermap節(jié)點。現(xiàn)在雙擊functionnode和打字/復制(注意,如果你使用復制/粘貼,確保你粘貼的是普通文本,wordpress有時插入奇怪的字符)
代碼2.4Function node"天氣是否清楚"。
if (msg.payload.weather === "Clear") {
msg.payload = "Clear skies ahead today!"
return msg;
}
return null;
從代碼2.4中,您可以看到,這將為解析傳入的消息有效負載中的天氣參數(shù)并比較的字符串"Clear"(第1行)。如果它們相等,它將用你自己的字符串的消息有效負載"Clear skies ahead today!" (第2行)改寫原來文本。否則,它將返回一個空消息(第5行)。最后一點很重要,因為在Node-RED節(jié)點中忽略空消息。
你現(xiàn)在可以做各種各樣的事情,例如將它和emailnode或pushbulletnode相連。在本教程中我們將使用Twitter的輸出節(jié)點。將Twitter節(jié)點拖到工作區(qū),雙擊,填寫你的Twitter帳戶,如圖2.15所示。
一旦你設置這些憑據(jù),Node-RED存儲它并且將來當您創(chuàng)建另一個Twitter節(jié)點時你可以重用他們。一旦你連接上了流,可以點擊deploy按鈕,然后盯著你的Twitter賬戶，當每次天氣報告為"Clear"時你的Twitter帳戶能看到新的tweet。
點擊"部署"（Deploy）:
其他有用的UI特性
Node-RED UI最有用的功能之一是能夠復制粘貼節(jié)點甚至全部的流都可以如此使用。Node-RED流只是簡單編碼為JSON字符串并可以使用Node-RED窗口右上角的下拉菜單從一個工作區(qū)導出并導入到另一個工作區(qū)。
在這個例子中不是構建流,或事實上在這個系列課,自己動手,從我們的網(wǎng)站您可以簡單地將它們復制粘貼到一個工作區(qū)中。之后所有你需要做的就是正確配置它們,例如憑證,并部署（deploy）它們。
讓我們快速告訴你怎么做。
點擊這個例子末尾的鏈接并找到JSON代碼。使用通常的CTL+C將其復制到剪貼板 或復制在編輯菜單項。使用Node-RED窗口中右上角的下拉菜單,選擇Import - >Clipboard,如圖2.17所示。
你將看到彈出一個輸入字段(圖2.18)。將剪貼板粘貼到輸入窗口并單擊OK。
新流程將出現(xiàn)在當前工作區(qū)中,可以被扔到一個位置。一旦到位,你可以任你所想地配置它，創(chuàng)建你自己的流并部署它（deploy）。
你能找到這個流的node-red描述:
[{"id":"3b4275ef.c4bd8a","type":"openweathermap in","name":"","lon":"","lat":"","city":"","country":"","x":141.0994415283203,"y":284.0909118652344,"z":"d0851e69.2f7ae","wires":[["b766183d.4899e8"]]},{"id":"b766183d.4899e8","type":"function","name":"","func":"if (msg.payload.weather === \"Clear\") {\n msg.payload = \"Clear skies ahead today!\"\n return msg;\n}\nreturn null;","outputs":1,"noerr":0,"x":268.0994567871094,"y":344.0909118652344,"z":"d0851e69.2f7ae","wires":[["c221838c.3dde8"]]},{"id":"c221838c.3dde8","type":"twitter out","name":"Tweet","x":393.0994415283203,"y":391.0909118652344,"z":"d0851e69.2f7ae","wires":[]}]
總結(jié)
這節(jié)課你已經(jīng)創(chuàng)建了第一個流和看到如何連接一組基本節(jié)點以實現(xiàn)非常復雜的任務。我們跳過一些底層的細節(jié)為了讓你更快get到那個點,我們會在第3、4課的時候會再次返回這些例子。然而,至今您已經(jīng)目睹了Node-RED如何生成流,基本類的輸入、輸出和處理。你簡要復習消息（message）以及如何使用函數(shù)節(jié)點編寫自己的JavaScript代碼在消息流內(nèi)以簡單的處理它。在下一課,你將更深入看Node-RED的編程模型,得到一個更好的理解的主要編程元素和節(jié)點以及如何使用多種節(jié)點制作更復雜的流。
