---
author: Dr Maheswari R.
category: 软件开发
comments_data:
- date: '2022-07-31 12:41:11'
  message: 有类似于树梅派这样的硬件，再加块便宜的触控大屏搞成一个整体的模组，即使公交站拆迁也就是重新布线的问题。我觉得有这么个产品全国的公交站普及了那是多大的市场，我要是能有这么个产品场，一年挣200万应该可以实现！！！
  postip: 123.139.44.253
  username: 来自陕西西安的 Chrome 103.0|GNU/Linux 用户
- date: '2022-08-01 07:21:53'
  message: 多大了
  postip: 36.45.246.135
  username: 来自陕西西安的 Chrome Mobile 101.0|Android 11 用户
count:
  commentnum: 2
  favtimes: 0
  likes: 0
  sharetimes: 0
  viewnum: 2812
date: '2022-07-31 09:15:32'
editorchoice: false
excerpt: 本文将帮助你设计一个基于 Web 的应用程序，使用 Node-RED 为地铁站的汽车提供一个自动智能停车系统。
fromurl: https://www.opensourceforu.com/2022/06/build-a-smart-parking-system-for-a-metro-station/
id: 14881
islctt: true
largepic: /images/p/202207/31/091533bzrq0a55qus8at3z.jpg
permalink: /article-14881-1.html
pic: /images/p/202207/31/091533bzrq0a55qus8at3z.jpg.thumb.jpg
related: []
reviewer: wxy
selector: lkxed
summary: 本文将帮助你设计一个基于 Web 的应用程序，使用 Node-RED 为地铁站的汽车提供一个自动智能停车系统。
tags:
- Node-RED
thumb: false
title: 为地铁站构建一个智能停车系统
titlepic: true
translator: Maisie-x
updated: '2022-07-31 09:15:32'
---


> 
> 本文将帮助你设计一个基于 Web 的应用程序，使用 Node-RED 为地铁站的汽车提供一个自动智能停车系统。
> 
> 
> 


![Smart car parking](/images/p/202207/31/091533bzrq0a55qus8at3z.jpg)


Web 应用程序是在 Web 服务器上运行的软件。终端用户通过 Web 浏览器访问 Web 应用程序。Web 应用程序使用客户端—服务器（C/S）架构进行编程，该架构是用户（客户端）通过远程服务器（可能由第三方托管）提供服务。Web API（应用程序编程接口）在整个 Web 上是可用的，用户可以通过 HTTP 协议访问该接口，如图 1 所示。


![Figure 1: Web API](/images/p/202207/31/091533dglh35gg4g9g53gz.jpg)


本文将演示如何为地铁设计一个基于 Web 的汽车自动智能停车系统。 它是使用开源的 Node-RED 设计。该系统使用模板节点创建了一个交互式的、时尚的用户登录表单，用 HTML 和 CSS 编码以获取车主的详细信息，从而实现停车系统的自动化。我们可以在图 2 和图 3 看到登录表单和提交表单的流程图。


使用的节点如下：


![table function](/images/p/202207/31/091533f6qlbo6zah6zplpc.jpg)


### 地铁智能停车节点流程设计


Node-RED 由 `node-red` 命令激活。访问网址 `http://127.0.0.1:1880/` 可以看到 Node-RED 用户界面流程浏览器已经启用，可以认为 Node-RED 设置已完成，可以正常工作了。


按照下面给出的步骤创建登录表单和提交表单。


![Figure 2: Login form flow diagram](/images/p/202207/31/091534gwk1tjkczwqd1qoj.jpg)


![Figure 3: Submission form flow diagram](/images/p/202207/31/091534il6bnbk6ymobbkex.jpg)


### 登录表单


1、在节点画布中，拖放 <ruby> http 输入 <rt>  http in </rt></ruby> 节点，这会为创建 Web 服务创建一个 HTTP 访问点。


2、将 <ruby> http 输入 <rt>  http in </rt></ruby> 节点连接到 <ruby> 函数 <rt>  function </rt></ruby> 节点。函数节点有助于编写 JavaScript 函数处理节点接收到的消息。


![Figure 4: Login form for smart parking for cars](/images/p/202207/31/091534pjejfgptatd5gugj.jpg)


3、将 <ruby> 函数 <rt>  function </rt></ruby> 节点连接到 <ruby> 模板 <rt>  template </rt></ruby> 节点，模板节点基于提供的模板创建一个 Web API。


4、将 <ruby> 模板 <rt>  template </rt></ruby> 节点连接到 <ruby> http 响应 <rt>  http response </rt></ruby> 节点，它将响应 <ruby> http 输入 <rt>  http in </rt></ruby> 节点的请求。


![Figure 5: Submission form for smart parking for cars](/images/p/202207/31/091534rxsjt334i1m1igzm.jpg)


### 提交表单


1、拖放 <ruby> http 输入 <rt>  http in </rt></ruby> 节点并将其连接到 json 节点，json 节点将数据转换为 JSON 字符串进行通信。


2、将 <ruby> http 输入 <rt>  http in </rt></ruby> 节点连接到 <ruby> 调试 <rt>  debug </rt></ruby> 节点，调试节点的调试监控器会输出结果。


3、将 json 节点放置并连接到 <ruby> 函数 <rt>  function </rt></ruby> 节点，将后者连接到 <ruby> http 响应 <rt>  http response </rt></ruby> 节点。


创建完整流程后，单击 Node-RED 窗口右上角的 <ruby> 部署 <rt>  Deploy </rt></ruby> 按钮。访问 `http://127.0.0.1:1880/ui/` 这个链接查看用户界面。


输入链接然后单击 <ruby> 提交 <rt>  Submit </rt></ruby> 后，该链接会跳转到下一页，你可以在该页面阅读所有新闻。


### Node-RED 工作流程


在单个 Node-RED 流程中，你可以创建登录表单和提交表单，如图 4 和图 5 所示。


现在我们将配置节点属性。


#### 登录表单


编辑 <ruby> http 输入 <rt>  http in </rt></ruby> 属性：


* <ruby> 方法 <rt>  method </rt></ruby> 选择 “Get”
* <ruby> 网址 <rt>  URL </rt></ruby> 设为 `/MetroStation`
* <ruby> 名称 <rt>  name </rt></ruby> 配置为 “<ruby> 智能停车系统 <rt>  Smart Parking </rt></ruby>”。


（LCTT 译注：下文 http 响应节点的名称为 Smart parking，p 字母小写，为了区分，此处中文翻译成智能停车系统。）


![Figure 6: Http in node property configurations](/images/p/202207/31/091535h4sj69t5m5515pvy.jpg)



> 
> 注意：URL 可以使用任何用户定义的本地变量。
> 
> 
> 


现在选择 <ruby> 函数 <rt>  function </rt></ruby> 节点，编辑函数节点属性：输入代码 `msg.url = project` ，并配置代码 <ruby> 名称 <rt>  name </rt></ruby> 字段为 “<ruby> 项目提交 <rt>  Project Submission </rt></ruby>”。


![Figure 7: Function node property configurations](/images/p/202207/31/091535bya2f2d69brltrlw.jpg)


在 <ruby> 模板 <rt>  template </rt></ruby> 节点的属性窗口，为登录表单配置相应的 HTML 代码，并将代码 <ruby> 名称 <rt>  name </rt></ruby> 命名为 “<ruby> 显示面板 <rt>  Display panel </rt></ruby>”。在此流程使用了 Mustache 模板格式（LCTT 译注：Mustache 是胡子的意思，因为它的嵌入标记 `{{ }}` 非常像胡子）。Mustache 是一个简单的 Web 模板系统，被描述为无逻辑的模板引擎。Mustache 没有任何显式的控制流语句，例如 `if` 和 `else` 条件和 `for` 循环。可以通过使用块标签处理列表和lambdas 来实现循环和条件评估。


![Figure 8: Template node property configurations](/images/p/202207/31/091535t3y3858j53838x88.jpg)


配置编辑 <ruby> http 响应 <rt>  http response </rt></ruby> 节点的属性，<ruby> 名称 <rt>  name </rt></ruby> 设为 “<ruby> 智能停车 <rt>  Smart parking </rt></ruby>”（图 9） 。


![Figure 9: Http response node property configurations](/images/p/202207/31/091535cjav29vftyvyrywv.jpg)


#### 提交表单


在 <ruby> http 输入 <rt>  http in </rt></ruby> 节点的编辑属性窗口，<ruby> 方法 <rt>  method </rt></ruby> 选择 “POST” ，<ruby> 网址 <rt>  URL </rt></ruby> 设为 `/project`。


![Figure 10: Http in node property configurations](/images/p/202207/31/091535rtzv6r4avxare6ep.jpg)


在 JSON 节点的编辑窗口，<ruby> 操作 <rt>  Action </rt></ruby>设为 “<ruby> JSON字符串与对象互转 <rt>  Convert between JSON String &amp; Object </rt></ruby>”，参考图 11。


![Figure 11: JSON node property configurations](/images/p/202207/31/091536zp0xxpdgficm0oco.jpg)


<ruby> 函数 <rt>  function </rt></ruby> 节点的配置如图 12 所示。


![Figure 12: Function node property configurations](/images/p/202207/31/091536gvu919hmixm1mlhv.jpg)


在 <ruby> http 响应 <rt>  http response </rt></ruby> 节点，编辑属性 <ruby> 名称 <rt>  name </rt></ruby> 为 “<ruby> 已提交项目 <rt>  Project Submitted </rt></ruby>”。


![Figure 13: Http response node property configurations](/images/p/202207/31/091536jmqaa0gsjscsi4vz.jpg)



> 
> 注意：添加带有评论的评论节点作为 “登录表单” 和 “提交表单”。
> 
> 
> 


![Figure 14: Debug node property configurations](/images/p/202207/31/091536gn5uh0zwvn2wxnw3.jpg)


### 用户界面的控制面板


当用户单击 <ruby> 提交 <rt>  Submit </rt></ruby>，给出的数据将显示在用户界面和调试节点。如果单击 <ruby> 重置 <rt>  Reset </rt></ruby>，详细信息将被清除，允许用户输入新的详细信息（图15）。


![Figure 15: User login UI](/images/p/202207/31/091537lx2l9k6628kffopf.jpg)


地铁停车费率通过超链接提供，收费表在用户界面显示。因此，汽车智能停车系统通过适当的超链接实现自动化，展示地铁站的停车费。该自动化系统的最终输出可以在 Node-RED 控制面板的用户界面和调试监控器调取和展示。


![Figure 16: Metro parking tariff](/images/p/202207/31/091537ket74ab3le3bddtb.jpg)




---


via: <https://www.opensourceforu.com/2022/06/build-a-smart-parking-system-for-a-metro-station/>


作者：[Dr Maheswari R.](https://www.opensourceforu.com/author/dr-maheswari-r/) 选题：[lkxed](https://github.com/lkxed) 译者：[Maisie-x](https://github.com/Maisie-x) 校对：[wxy](https://github.com/wxy)


本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出