快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

简介: 阿里云IoT推出了智能停车解决方案,结合了边缘计算能力,能实现大范围的传感器联动。接下来将演示如何利用阿里云IoT Studio全新推出的移动可视化开发工具,快速的搭建停车场管理应用,实现停车统计、车位显示、费用预计等功能。

阿里云IoT事业部推出了智能停车方案,结合了边缘计算能力,能实现大范围的传感器联动。接下来将演示如何利用阿里云IoT Studio全新推出的移动可视化开发工具,快速的搭建停车场管理应用,实现停车统计,车位显示,费用预计等功能。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

技术架构

首先要对整个停车场进行数字空间的数据建模。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

由于这是一个非常简单的模型(阿里云物联网有标准解决方案,请查看链接https://help.aliyun.com/document_detail/169250 ),我们只需要处理停车位是否占用,占用时间,以及基本的温湿度数据即可。

设备接入

首先打开我们的公共实例,创建一个产品叫“停车场网关”的产品,协议选择“边缘网关”。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

在边缘网关下创建“地磁传感器”和“温湿度传感器”产品。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

可以看到具体参数如下。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

然后创建4个停车场网关设备,分别对应4个停车区域。以及对应车位数量的各传感器。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

这里用一个网关,一个温湿度传感器加20个地磁为例子。为Gateway001添加1个DHT子设备和20个地磁子设备。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

边缘设备接入部分可以参考说明文档。https://help.aliyun.com/document_detail/103247

在物联网平台完成边缘设备的接入之后,我们可以在IoT Studio新建一个“停车场”项目用来管理所有资源。为了方便说明,这里创建一个空白项目。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

将产品与相关设备从物联网平台进行关联,注意要在同一个实例里。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

这样就结束数据建模与设备接入的部分,接下来就是移动应用的开发了!

移动可视化开发

在11月,万众瞩目的IoT Studio新版移动工作台正式对外开放。与之前的移动工作台相比,新版加强了对数据源与组件交互的支持,使用体验与Web工作台进行了拉齐,并且支持移动端不同分辨率的容器式布局。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

为了更好的演示整个搭建过程,我们从一个空白应用的模板开始。这个停车场案例已经作为页面模板上架,各位用户在实际使用时点击添加页面即可直接使用。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

首先通过IoT Studio首页进入移动工作台入口。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

点击创建移动应用,与web应用的过程一样。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

进入移动工作台,整体的布局与Web工作台类似,但有几个区别。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

第一、移动工作台使用的是容器式布局,需要先拖入容器组件(横向分栏/纵向分栏)才能放置功能组件。这是为了适配各种移动端。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

容器有分横向和纵向,横向最小颗粒度是页面的1/12,纵向可以无限延伸。彼此之间可以嵌套。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

第二、这种容器布局有“组件树”进行统一管理,可以点击顶部导航栏icon进行查看。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

好了,接下来开始布局。
首先我们定义好整体的主题色为橙色,因此顶部导航先配成橙色。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

然后将背景调整为一个停车场的图片。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

接下来先布局组件,我们需要完成首行两个卡片和下部的五个卡片列表。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

将布局样式调节到合适的比例。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

关联数据源部分与Web工作台类似。由于数据源种类多样,这里不统一演示。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

另一个卡片嫌弃重新布局复杂?直接右键“复制”“粘贴”就可以啦!

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

接下来我们做各楼层停车场的演示卡片。先大概划分布局。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

然后往容器组件里填写内容。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

然后复制3个卡片。对文案稍作修改。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

设置一个点击图片跳转停车片区详情页的路由。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

然后编辑下一个页面。也是同样的做法,不过列表处使用了“重复卡片”。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

最后再配置一下登录页的样式。注意需要先在项目内开通账号系统。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

移动应用规定发布之前需要先绑定域名。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

然后回到编辑器里,点击发布。

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

发布应用成功!这样就可以远程完成停车场的管理了!

快速搭建智能停车场管理应用——IoT Studio开发实战(智能停车场系统方案)

欢迎使用IoT Studio!

这里介绍的是一个简单的停车解决方案实现过程。IoT Studio新上线了移动可视化开发工具,补充了大量的组件与模板,也支持更复杂的云端数据联动。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月20日 下午1:05
下一篇 2024年5月20日 下午1:17

相关推荐

  • 文科科研项目证明怎么写

    科研项目证明的写作需要注意以下几点:首先,科研项目证明应该包括科研项目的名称、研究目的、研究方法、研究结果和结论等部分。其次,科研项目证明应该具有真实性和客观性,不能存在虚假成分。…

    科研百科 2025年3月23日
    1
  • 广西航天税控发票开票软件

    广西航天税控发票开票软件:提升税收管理的数字化水平 随着数字化时代的到来,税收管理也逐渐实现了数字化转型。广西航天税控发票开票软件是其中一个重要的组成部分。这款软件通过自动化和智能…

    科研百科 2024年10月24日
    0
  • 科研项目需要什么

    科研项目需要什么 科研项目需要什么?这是一个古老而又永恒的问题。随着科技的不断进步,科研项目的需求也在不断变化。但是,无论科技如何发展,科研项目都需要一些基本的要求。本文将探讨科研…

    科研百科 2025年3月7日
    0
  • 中层经理人培训之高效会议秘诀(中层经理人培训之高效会议秘诀心得体会)

    关注【本头条号】,更多关于企业管理、薪酬制度、绩效激励、顶层设计等内容免费与你分享!私信“资料”送您关于员工管理、绩效薪酬等干货视频。 谢您的品读!赠人玫瑰,手留余香,分享本文给您…

    2022年8月2日
    245
  • web项目管理工作协同系统

    Web项目管理工作协同系统 随着互联网技术的发展,Web应用程序已经成为企业日常运营的重要工具。然而,在实际的项目中,由于人员分散、沟通不畅等原因,常常会导致项目进度延误、质量下降…

    科研百科 2025年1月24日
    1
  • 市工信局有什么科研项目

    市工信局科研项目 市工信局是市政府的一个部门,主要负责协调和促进全市工业和信息产业的发展。随着信息技术的不断发展,市工信局也积极开展了多项科研项目,旨在推动全市工业和信息产业的发展…

    科研百科 2024年4月9日
    125
  • 国家能源局:加强储能、氢能、抽水蓄能等领域标准体系研究 组织开展能源行业标准制修订

    南方财经11月14日电,国家能源局召开四季度网上新闻发布会,国家能源局能源节约和科技装备司副司长徐继林在发布会上表示,《能源碳达峰碳中和标准化提升行动计划》是能源领域构建支撑碳达峰…

    科研百科 2022年12月23日
    248
  • 科研项目基金批件时间

    科研项目基金批件时间: 2023年2月18日 科研项目基金批件是一个非常重要的文件,它标志着科研经费的到位,为科研项目的开展提供了必要的资金保障。在这一天,许多科研项目都会收到科研…

    科研百科 2025年2月4日
    0
  • 直播系统集成项目管理

    直播系统集成项目管理:从需求分析到交付 随着互联网的发展,直播已经成为人们日常生活中不可或缺的一部分。直播系统是一种能够帮助人们进行实时直播的技术,它为直播行业带来了巨大的变革。因…

    科研百科 2025年1月11日
    0