--- creator: Zach tags: 物聯網 created: 2021-10-27 --- # Node-RED學習心得(操作篇) ## 架構圖 ![](https://i.imgur.com/SCXUyhe.png) <center>核心知識點</center> </br> ## 基本功能 本篇會介紹6項常用的子模塊，並適時使用案例來介紹它們的功能以及再使用上的一些細節 ### inject 共通模塊最常用到的子模塊之一，作為**輸入**用途，可以自行選擇payload類型 ![](https://i.imgur.com/fhszyRB.png) <center>inject模塊</center> </br> 創立inject節點時點擊模塊可以進入設定，選單中主要分為5個要素: 1. 模塊名稱 - 為inject設定名稱 3. 物件屬性 - 預設為payload - 可以自行添加屬性 5. 物件屬性資料類型 - 指定屬性類型，包含常見的字串、數字、布林、json等 7. 主題 - 指定topic名 9. 選擇輸入機制 - 手動輸入模式 - 循環輸入模式 - 指定時間輸入模式 ![](https://i.imgur.com/RO63KT1.png) <center>inject模塊設定</center> </br> ### debug 輸出模塊，用來將輸入結果顯示在指定視窗上(通常是除錯視窗)，點擊可以進入設定選單 ![](https://i.imgur.com/e90fjyq.png) <center>debug模塊</center> </br> 設定選單主要包含: ![](https://i.imgur.com/013wEHI.png) <center>debug模塊設定</center> </br> 1. 輸出屬性 - 預設payload - 亦可指定已存在的屬性 3. 選擇輸出窗口 - 選擇輸出視窗 5. 模塊名稱 - debug模塊名稱 ### function 使用javascript編寫的函式模塊，可以提供使用者自定義的功能，我們可以對傳入的物件屬性進行處理，透過返回msg物件，後續的模塊可以得到加工後的結果 ![](https://i.imgur.com/C2tsMcC.png) <center>function模塊</center> </br> 例如我編寫一個用來判斷result值是否為真的模塊，如果成立便新增一個新的屬性note，並給予它一個值 ```javascript= if(msg.payload.result == true){ msg.payload.note = "test" } return msg; ``` 或者編寫一個判斷屬性長度的模塊 ```javascript= var new_msg = {payload:msg.payload.length} msg.payload = new_msg return msg; ``` 一樣點擊function模塊進入設定，在*函數*欄位編寫自定義的程式碼就可以了 ![](https://i.imgur.com/cIOcZTE.png) <center>編寫function模塊</center> </br> ### change 改變物件屬性類型，可以進行增、刪、修改、轉移等操作 ![](https://i.imgur.com/AvYBHL6.png) <center>change模塊</center> </br> 點擊模塊後可以進入設定選單，change模塊的重點在**操作指令** ![](https://i.imgur.com/XwjcANE.png) <center>change模塊設定</center> </br> 1. 模塊名稱 - change模塊名稱 2. 操作指令 - 設定 - 將屬性設定為指定值 - 也可以用來新增一個屬性，並給值 - 修改 - 搜尋特定值然後取代 - 刪除 - 刪除物件中指定屬性 - 轉移 - 將物件中的屬性值轉移到另一個屬性上 3. 物件屬性 - 跟上面介紹得差不多，用來指定屬性，預設是payload ### switch 這是一個很有趣的模塊，它類似程式中的switch語句，可以用來當作流程控制 ```c= switch(msg.payload){ case 1: /*do something*/ break; case 2: /*do something*/ break; ... } ``` ![](https://i.imgur.com/3XHHGiL.png) <center>switch模塊</center> </br> 選單中4個重點，分別對應switch的功能 ![](https://i.imgur.com/fjN0tvA.png) <center>switch模塊設定</center> 1. 屬性 - switch(var) - 屬性欄位相當於設定var 2. 判斷類型 - 相當於條件判斷子 3. 判斷值指定值 - 依照不同判斷子填入的參數 - case x: - 相當於x的功用 其實不只常見的判斷子，Node-RED提供非常多的判斷模式供使用者使用，這些就留給大家慢慢摸索 ![](https://i.imgur.com/nBJRwlt.png) <center>switch模塊判斷子選擇</center> </br> ### template template模塊可以提供使用者自定HTML模板 ![](https://i.imgur.com/44waSVi.png) <center>switch模塊設定</center> </br> 模板內可以輸入指定的HTML格式，舉個例子來看看這個模塊的功用，把以下html程式碼寫進template模塊內 ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello~</title> </head> <body> <h2>This is Node-RED<h2> </body> </html> ``` 在側邊攔欄位找到httpin模塊，拖曳進來並起雙擊設定 1. 請求方法 - 選擇http協議的GET method - URL可以自訂，這裡設定絕對路徑/hello - 名稱表示模塊名，可有可無 ![](https://i.imgur.com/IfFrRL1.png) <center>httpin模塊設定</center> </br> 在側邊欄位找到將http response模塊，拖曳進來並將template尾部連上它。完成後應該會如下圖所示 ![](https://i.imgur.com/7A7iv7V.png) <center>連接模塊</center> </br> 最後然後按下deploy鍵，在網址欄為輸入url 127.0.0.1:1880/hello就可以看到我們設定的html內容 ![](https://i.imgur.com/fzdUeko.png) <center>網頁顯示</center> </br> ## 實際案例練習 實現目標: 1. 輸入一串json字串，將該字串轉換成json物件，例如 ```json= {"id":"device0","result":true} {"id":"device1","result":false} ``` 2. 若判斷result為true，則新增一個屬性note，並且定義它的內容為test字串，並輸出json物件 3. 若判斷result為false，則原封不動輸出json物件 ### 方法一: 利用function ![](https://i.imgur.com/YMUbMIq.png) <center>方法一</center> </br> 1. 首先加入兩個inject模塊，payload類型均設定為字串，字串格請參考上面json案例 2. 在解析欄位選擇json模塊，雙擊並設定操作欄位為JSON字串與物件互轉 3. 選擇function模塊，然後輸入以下程式碼 ```javascript= if(msg.payload.result == true){ msg.payload.note = "test" } return msg; ``` 4. 拉取debug模塊，並且把上述模塊都連接起來 ### 方法二: 利用change與switch ![](https://i.imgur.com/fWvJUIy.png) <center>方法二</center> </br> 1. 首先加入兩個inject模塊，payload類型均設定為字串，字串格請參考上面json案例 2. 在解析欄位選擇json模塊，雙擊並設定操作欄位為JSON字串與物件互轉 3. 選擇switch模塊，設定payload.result的判斷式 ![](https://i.imgur.com/15jCXMI.png) <center>設定判斷式</center> </br> 4. 若result為真，則從輸出端口一輸出，並且連接上change模塊，利用*設定*操作把payload.note設定成字串"test" ![](https://i.imgur.com/IzWhl0N.png) <center>設定change模塊</center> </br> 5. 拉取debug模塊，並且把上述模塊都連接起來 ### 輸出結果 手動注入inject模塊，經過測試可以發現右側除錯式窗成功打印我們要的結果，兩種方法接測試正確 ![](https://i.imgur.com/41RcGcQ.png) <center>輸出結果</center> </br>