Web 應(yīng)用程序是在 Web 服務(wù)器上運行的軟件。終端用戶通過 Web 瀏覽器訪問 Web 應(yīng)用程序。Web 應(yīng)用程序使用客戶端—服務(wù)器（C/S）架構(gòu)進(jìn)行編程，該架構(gòu)是用戶（客戶端）通過遠(yuǎn)程服務(wù)器（可能由第三方托管）提供服務(wù)。Web API（應(yīng)用程序編程接口）在整個 Web 上是可用的，用戶可以通過 HTTP 協(xié)議訪問該接口，如圖 1 所示。

Figure 1: Web API

本文將演示如何為地鐵設(shè)計一個基于 Web 的汽車自動智能停車系統(tǒng)。 它是使用開源的 Node-RED 設(shè)計。該系統(tǒng)使用模板節(jié)點創(chuàng)建了一個交互式的、時尚的用戶登錄表單，用 HTML 和 CSS 編碼以獲取車主的詳細(xì)信息，從而實現(xiàn)停車系統(tǒng)的自動化。我們可以在圖 2 和圖 3 看到登錄表單和提交表單的流程圖。

使用的節(jié)點如下：

table function

地鐵智能停車節(jié)點流程設(shè)計

Node-RED 由 ??node-red?? 命令激活。訪問網(wǎng)址 ??http://127.0.0.1:1880/?? 可以看到 Node-RED 用戶界面流程瀏覽器已經(jīng)啟用，可以認(rèn)為 Node-RED 設(shè)置已完成，可以正常工作了。

按照下面給出的步驟創(chuàng)建登錄表單和提交表單。

Figure 2: Login form flow diagram

Figure 3: Submission form flow diagram

登錄表單

1、在節(jié)點畫布中，拖放 http 輸入http in 節(jié)點，這會為創(chuàng)建 Web 服務(wù)創(chuàng)建一個 HTTP 訪問點。

2、將 http 輸入http in 節(jié)點連接到 函數(shù)function 節(jié)點。函數(shù)節(jié)點有助于編寫 JavaScript 函數(shù)處理節(jié)點接收到的消息。

Figure 4: Login form for smart parking for cars

3、將 函數(shù)function 節(jié)點連接到 模板template 節(jié)點，模板節(jié)點基于提供的模板創(chuàng)建一個 Web API。

4、將 模板template 節(jié)點連接到 http 響應(yīng)http response 節(jié)點，它將響應(yīng) http 輸入http in 節(jié)點的請求。

Figure 5: Submission form for smart parking for cars

提交表單

1、拖放 http 輸入http in 節(jié)點并將其連接到 json 節(jié)點，json 節(jié)點將數(shù)據(jù)轉(zhuǎn)換為 JSON 字符串進(jìn)行通信。

2、將 http 輸入http in 節(jié)點連接到 調(diào)試debug 節(jié)點，調(diào)試節(jié)點的調(diào)試監(jiān)控器會輸出結(jié)果。

3、將 json 節(jié)點放置并連接到 函數(shù)function 節(jié)點，將后者連接到 http 響應(yīng)http response 節(jié)點。

創(chuàng)建完整流程后，單擊 Node-RED 窗口右上角的 部署Deploy 按鈕。訪問 ??http://127.0.0.1:1880/ui/?? 這個鏈接查看用戶界面。

輸入鏈接然后單擊 提交Submit 后，該鏈接會跳轉(zhuǎn)到下一頁，你可以在該頁面閱讀所有新聞。

Node-RED 工作流程

在單個 Node-RED 流程中，你可以創(chuàng)建登錄表單和提交表單，如圖 4 和圖 5 所示。

現(xiàn)在我們將配置節(jié)點屬性。

登錄表單

編輯 http 輸入http in 屬性：

• 方法method 選擇 “Get”
• 網(wǎng)址URL 設(shè)為??/MetroStation??
• 名稱name 配置為 “智能停車系統(tǒng)Smart Parking”。

（LCTT 譯注：下文 http 響應(yīng)節(jié)點的名稱為 Smart parking，p 字母小寫，為了區(qū)分，此處中文翻譯成智能停車系統(tǒng)。）

Figure 6: Http in node property configurations

注意：URL 可以使用任何用戶定義的本地變量。

現(xiàn)在選擇 函數(shù)function 節(jié)點，編輯函數(shù)節(jié)點屬性：輸入代碼 ??msg.url = project?? ，并配置代碼 名稱name 字段為 “項目提交Project Submission”。

Figure 7: Function node property configurations

在 模板template 節(jié)點的屬性窗口，為登錄表單配置相應(yīng)的 HTML 代碼，并將代碼 名稱name 命名為 “顯示面板Display panel”。在此流程使用了 Mustache 模板格式（LCTT 譯注：Mustache 是胡子的意思，因為它的嵌入標(biāo)記 ??{{ }}?? 非常像胡子）。Mustache 是一個簡單的 Web 模板系統(tǒng)，被描述為無邏輯的模板引擎。Mustache 沒有任何顯式的控制流語句，例如 ??if?? 和 ??else?? 條件和 ??for?? 循環(huán)?？梢酝ㄟ^使用塊標(biāo)簽處理列表和lambdas 來實現(xiàn)循環(huán)和條件評估。

Figure 8: Template node property configurations

配置編輯 http 響應(yīng)http response 節(jié)點的屬性，名稱name 設(shè)為 “智能停車Smart parking”（圖 9） 。

Figure 9: Http response node property configurations

提交表單

在 http 輸入http in 節(jié)點的編輯屬性窗口，方法method 選擇 “POST” ，網(wǎng)址URL 設(shè)為 ??/project??。

Figure 10: Http in node property configurations

在 JSON 節(jié)點的編輯窗口，操作Action設(shè)為 “JSON字符串與對象互轉(zhuǎn)Convert between JSON String & Object”，參考圖 11。

Figure 11: JSON node property configurations

函數(shù)function 節(jié)點的配置如圖 12 所示。

Figure 12: Function node property configurations

在 http 響應(yīng)http response 節(jié)點，編輯屬性 名稱name 為 “已提交項目Project Submitted”。

Figure 13: Http response node property configurations

注意：添加帶有評論的評論節(jié)點作為 “登錄表單” 和 “提交表單”。

Figure 14: Debug node property configurations

用戶界面的控制面板

當(dāng)用戶單擊 提交Submit，給出的數(shù)據(jù)將顯示在用戶界面和調(diào)試節(jié)點。如果單擊 重置Reset，詳細(xì)信息將被清除，允許用戶輸入新的詳細(xì)信息（圖15）。

Figure 15: User login UI

地鐵停車費率通過超鏈接提供，收費表在用戶界面顯示。因此，汽車智能停車系統(tǒng)通過適當(dāng)?shù)某溄訉崿F(xiàn)自動化，展示地鐵站的停車費。該自動化系統(tǒng)的最終輸出可以在 Node-RED 控制面板的用戶界面和調(diào)試監(jiān)控器調(diào)取和展示。

Figure 16: Metro parking tariff