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

Figure 1: Web API

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

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

table function

地鐵智能停車(chē)節(jié)點(diǎn)流程設(shè)計(jì)

Node-RED 由 ??node-red?? 命令激活。訪問(wèn)網(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é)點(diǎn)畫(huà)布中，拖放 http 輸入http in 節(jié)點(diǎn)，這會(huì)為創(chuàng)建 Web 服務(wù)創(chuàng)建一個(gè) HTTP 訪問(wèn)點(diǎn)。

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

Figure 4: Login form for smart parking for cars

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

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

Figure 5: Submission form for smart parking for cars

提交表單

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

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

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

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

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

Node-RED 工作流程

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

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

登錄表單

編輯 http 輸入http in 屬性：

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

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

Figure 6: Http in node property configurations

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

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

Figure 7: Function node property configurations

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

Figure 8: Template node property configurations

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

Figure 9: Http response node property configurations

提交表單

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

Figure 10: Http in node property configurations

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

Figure 11: JSON node property configurations

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

Figure 12: Function node property configurations

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

Figure 13: Http response node property configurations

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

Figure 14: Debug node property configurations

用戶界面的控制面板

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

Figure 15: User login UI

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

Figure 16: Metro parking tariff