快速搭建智能停车场管理应用——IoT Studio移动可视化开发实战-阿里云开发者社区

开发者社区> 磐久智算集群> 正文

快速搭建智能停车场管理应用——IoT Studio移动可视化开发实战

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

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

技术架构

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

设备接入

首先打开我们的公共实例,创建一个产品叫“停车场网关”的产品,协议选择“边缘网关”。
创建边缘网关.jpg
在边缘网关下创建“地磁传感器”和“温湿度传感器”产品。
创建地磁.jpg
创建温湿度.jpg
可以看到具体参数如下。
地磁属性.jpg
温湿度属性.jpg
然后创建4个停车场网关设备,分别对应4个停车区域。以及对应车位数量的各传感器。
停车4网关.jpg
各设备.jpg
这里用一个网关,一个温湿度传感器加20个地磁为例子。为Gateway001添加1个DHT子设备和20个地磁子设备。
添加子设备.jpg
边缘设备接入部分可以参考说明文档。https://help.aliyun.com/document_detail/103247

在物联网平台完成边缘设备的接入之后,我们可以在IoT Studio新建一个“停车场”项目用来管理所有资源。为了方便说明,这里创建一个空白项目。
空白项目.jpg
将产品与相关设备从物联网平台进行关联,注意要在同一个实例里。
导入设备.jpg
已导入设备列表.jpg
这样就结束数据建模与设备接入的部分,接下来就是移动应用的开发了!

移动可视化开发

在11月,万众瞩目的IoT Studio新版移动工作台正式对外开放。与之前的移动工作台相比,新版加强了对数据源与组件交互的支持,使用体验与Web工作台进行了拉齐,并且支持移动端不同分辨率的容器式布局。
移动demo搭建效果图.jpg
为了更好的演示整个搭建过程,我们从一个空白应用的模板开始。这个停车场案例已经作为页面模板上架,各位用户在实际使用时点击添加页面即可直接使用。
移动页面模板.jpg
首先通过IoT Studio首页进入移动工作台入口。
移动工作台入口.jpg
点击创建移动应用,与web应用的过程一样。
新建空白移动应用.jpg
进入移动工作台,整体的布局与Web工作台类似,但有几个区别。
移动工作台概览.jpg
第一、移动工作台使用的是容器式布局,需要先拖入容器组件(横向分栏/纵向分栏)才能放置功能组件。这是为了适配各种移动端。
布局组件示意.gif
容器有分横向和纵向,横向最小颗粒度是页面的1/12,纵向可以无限延伸。彼此之间可以嵌套。
嵌套布局组件.gif
第二、这种容器布局有“组件树”进行统一管理,可以点击顶部导航栏icon进行查看。
组件树.gif
好了,接下来开始布局。
首先我们定义好整体的主题色为橙色,因此顶部导航先配成橙色。
配置导航.gif
然后将背景调整为一个停车场的图片。
配置背景图.jpg
接下来先布局组件,我们需要完成首行两个卡片和下部的五个卡片列表。
横向卡片布局.gif
横向卡片布局2.gif
将布局样式调节到合适的比例。
横向卡片布局3.gif
关联数据源部分与Web工作台类似。由于数据源种类多样,这里不统一演示。
关联数据源.gif
另一个卡片嫌弃重新布局复杂?直接右键“复制”“粘贴”就可以啦!
复制.gif
接下来我们做各楼层停车场的演示卡片。先大概划分布局。
停车卡片.gif
然后往容器组件里填写内容。
填充停车卡片.gif
然后复制3个卡片。对文案稍作修改。
停车场概览页详情.jpg
设置一个点击图片跳转停车片区详情页的路由。
停车卡片路由.gif
然后编辑下一个页面。也是同样的做法,不过列表处使用了“重复卡片”。
停车片区详情.jpg
最后再配置一下登录页的样式。注意需要先在项目内开通账号系统。
账号体系.jpg
停车demo账号配置.gif
移动应用规定发布之前需要先绑定域名。
绑定域名.gif
然后回到编辑器里,点击发布。
发布.jpg
发布应用成功!这样就可以远程完成停车场的管理了!
走查车场.JPG

欢迎使用IoT Studio!

这里介绍的是一个简单版的停车解决方案实现过程。IoT Studio新上线了移动可视化开发工具,补充了大量的组件与模板,也支持更复杂的云端数据联动。
点击链接前往IoT Studio体验>>
欢迎感兴趣的朋友使用钉钉扫码进群与我们交流哦~!
二维码裁剪.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《计算机科学与工程导论:基于IoT和机器人的可视化编程实践方法第2版》一1.1.3 计算机不同领域的职业机会
本节书摘来华章计算机《计算机科学与工程导论:基于IoT和机器人的可视化编程实践方法第2版》一书中的第1章 ,第1.1.3节,陈以农 陈文智 韩德强 著 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
939 0
【阿里云IoT+YF3300】10.快速开发188协议设备驱动
188协议的全称为CJ-T188-2004 《户用计量仪表数据传输技术条件》,是针对水表、燃气表、热量表和其他集中采集的一个国家行业标准协议。
764 0
快速搭建基于 Serverless 的 .NET Core 数据库应用
快速搭建基于 Serverless 的 .NET Core 数据库应用 简介 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。
20049 0
《计算机科学与工程导论:基于IoT和机器人的可视化编程实践方法第2版》一1.1.2 计算机就业形势分析
本节书摘来华章计算机《计算机科学与工程导论:基于IoT和机器人的可视化编程实践方法第2版》一书中的第1章 ,第1.1.2节,陈以农 陈文智 韩德强 著 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
845 0
阿里云AIoT 发布城管AI一体机 为城市执法提供智能保障
城市管理问题一直是涉及城市民生的基本问题,阿里云AIoT致力于运用物联网、云计算、人工智能等技术,全力打造好用易用的创新产品和解决方案,帮助城市管理提高效率、降低成本
2240 0
SQLite数据库管理工具,可视化工具SQLiteExpert/SQLiteStudio/SQLiteBrowser
SQLite数据库管理工具,可视化工具SQLiteExpert/SQLiteStudio/SQLiteBrowser
48 0
+关注
磐久智算集群
高性能算力解决方案
86
文章
39
问答
来源圈子
更多
致力于实现万物互联的美好世界,为生态合作伙伴提供基于云计算、大数据、人工智能、云端一体化、安全的物联网基础平台和内容服务平台。
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载