為地鐵站構建一個智能停車系統
Web 應用程序是在 Web 服務器上運行的軟件。終端用戶通過 Web 瀏覽器訪問 Web 應用程序。Web 應用程序使用客戶端—服務器（C/S）架構進行編程，該架構是用戶（客戶端）通過遠程服務器（可能由第三方托管）提供服務。Web API（應用程序編程接口）在整個 Web 上是可用的，用戶可以通過 HTTP 協議訪問該接口，如圖 1 所示。
Figure 1: Web API
本文將演示如何為地鐵設計一個基于 Web 的汽車自動智能停車系統。 它是使用開源的 Node-RED 設計。該系統使用模板節點創建了一個交互式的、時尚的用戶登錄表單，用 HTML 和 CSS 編碼以獲取車主的詳細信息，從而實現停車系統的自動化。我們可以在圖 2 和圖 3 看到登錄表單和提交表單的流程圖。
使用的節點如下：
table function
地鐵智能停車節點流程設計
Node-RED 由 ??node-red?? 命令激活。訪問網址 ??http://127.0.0.1:1880/?? 可以看到 Node-RED 用戶界面流程瀏覽器已經啟用，可以認為 Node-RED 設置已完成，可以正常工作了。
按照下面給出的步驟創建登錄表單和提交表單。
Figure 2: Login form flow diagram
Figure 3: Submission form flow diagram
登錄表單
1、在節點畫布中，拖放 http 輸入http in 節點，這會為創建 Web 服務創建一個 HTTP 訪問點。
2、將 http 輸入http in 節點連接到 函數function 節點。函數節點有助于編寫 JavaScript 函數處理節點接收到的消息。
Figure 4: Login form for smart parking for cars
3、將 函數function 節點連接到 模板template 節點，模板節點基于提供的模板創建一個 Web API。
4、將 模板template 節點連接到 http 響應http response 節點，它將響應 http 輸入http in 節點的請求。
Figure 5: Submission form for smart parking for cars
提交表單
1、拖放 http 輸入http in 節點并將其連接到 json 節點，json 節點將數據轉換為 JSON 字符串進行通信。
2、將 http 輸入http in 節點連接到 調試debug 節點，調試節點的調試監控器會輸出結果。
3、將 json 節點放置并連接到 函數function 節點，將后者連接到 http 響應http response 節點。
創建完整流程后，單擊 Node-RED 窗口右上角的 部署Deploy 按鈕。訪問 ??http://127.0.0.1:1880/ui/?? 這個鏈接查看用戶界面。
輸入鏈接然后單擊 提交Submit 后，該鏈接會跳轉到下一頁，你可以在該頁面閱讀所有新聞。
Node-RED 工作流程
在單個 Node-RED 流程中，你可以創建登錄表單和提交表單，如圖 4 和圖 5 所示。
現在我們將配置節點屬性。
登錄表單
編輯 http 輸入http in 屬性：
- 方法method 選擇 “Get”
- 網址URL 設為?
?/MetroStation?? - 名稱name 配置為 “智能停車系統Smart Parking”。
（LCTT 譯注：下文 http 響應節點的名稱為 Smart parking，p 字母小寫，為了區分，此處中文翻譯成智能停車系統。）
Figure 6: Http in node property configurations
注意：URL 可以使用任何用戶定義的本地變量。
現在選擇 函數function 節點，編輯函數節點屬性：輸入代碼 ??msg.url = project?? ，并配置代碼 名稱name 字段為 “項目提交Project Submission”。
Figure 7: Function node property configurations
在 模板template 節點的屬性窗口，為登錄表單配置相應的 HTML 代碼，并將代碼 名稱name 命名為 “顯示面板Display panel”。在此流程使用了 Mustache 模板格式（LCTT 譯注：Mustache 是胡子的意思，因為它的嵌入標記 ??{{ }}?? 非常像胡子）。Mustache 是一個簡單的 Web 模板系統，被描述為無邏輯的模板引擎。Mustache 沒有任何顯式的控制流語句，例如 ??if?? 和 ??else?? 條件和 ??for?? 循環。可以通過使用塊標簽處理列表和lambdas 來實現循環和條件評估。
Figure 8: Template node property configurations
配置編輯 http 響應http response 節點的屬性，名稱name 設為 “智能停車Smart parking”（圖 9） 。
Figure 9: Http response node property configurations
提交表單
在 http 輸入http in 節點的編輯屬性窗口，方法method 選擇 “POST” ，網址URL 設為 ??/project??。
Figure 10: Http in node property configurations
在 JSON 節點的編輯窗口，操作Action設為 “JSON字符串與對象互轉Convert between JSON String & Object”，參考圖 11。
Figure 11: JSON node property configurations
函數function 節點的配置如圖 12 所示。
Figure 12: Function node property configurations
在 http 響應http response 節點，編輯屬性 名稱name 為 “已提交項目Project Submitted”。
Figure 13: Http response node property configurations
注意：添加帶有評論的評論節點作為 “登錄表單” 和 “提交表單”。
Figure 14: Debug node property configurations
用戶界面的控制面板
當用戶單擊 提交Submit，給出的數據將顯示在用戶界面和調試節點。如果單擊 重置Reset，詳細信息將被清除，允許用戶輸入新的詳細信息（圖15）。
Figure 15: User login UI
地鐵停車費率通過超鏈接提供，收費表在用戶界面顯示。因此，汽車智能停車系統通過適當的超鏈接實現自動化，展示地鐵站的停車費。該自動化系統的最終輸出可以在 Node-RED 控制面板的用戶界面和調試監控器調取和展示。
Figure 16: Metro parking tariff
