快速搭建智能停车场管理应用——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

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

分享:
阿里云物联网
使用钉钉扫一扫加入圈子
+ 订阅

致力于实现万物互联的美好世界,为生态合作伙伴提供基于云计算、大数据、人工智能、云端一体化、安全的物联网基础平台和内容服务平台。

官方博客
官网链接
在线咨询