简介: 阿里云IoT推出了智能停车解决方案,结合了边缘计算能力,能实现大范围的传感器联动。接下来将演示如何利用阿里云IoT Studio全新推出的移动可视化开发工具,快速的搭建停车场管理应用,实现停车统计、车位显示、费用预计等功能。
阿里云IoT事业部推出了智能停车方案,结合了边缘计算能力,能实现大范围的传感器联动。接下来将演示如何利用阿里云IoT Studio全新推出的移动可视化开发工具,快速的搭建停车场管理应用,实现停车统计,车位显示,费用预计等功能。
技术架构
首先要对整个停车场进行数字空间的数据建模。
由于这是一个非常简单的模型(阿里云物联网有标准解决方案,请查看链接https://help.aliyun.com/document_detail/169250 ),我们只需要处理停车位是否占用,占用时间,以及基本的温湿度数据即可。
设备接入
首先打开我们的公共实例,创建一个产品叫“停车场网关”的产品,协议选择“边缘网关”。
在边缘网关下创建“地磁传感器”和“温湿度传感器”产品。
可以看到具体参数如下。
然后创建4个停车场网关设备,分别对应4个停车区域。以及对应车位数量的各传感器。
这里用一个网关,一个温湿度传感器加20个地磁为例子。为Gateway001添加1个DHT子设备和20个地磁子设备。
边缘设备接入部分可以参考说明文档。https://help.aliyun.com/document_detail/103247
在物联网平台完成边缘设备的接入之后,我们可以在IoT Studio新建一个“停车场”项目用来管理所有资源。为了方便说明,这里创建一个空白项目。
将产品与相关设备从物联网平台进行关联,注意要在同一个实例里。
这样就结束数据建模与设备接入的部分,接下来就是移动应用的开发了!
移动可视化开发
在11月,万众瞩目的IoT Studio新版移动工作台正式对外开放。与之前的移动工作台相比,新版加强了对数据源与组件交互的支持,使用体验与Web工作台进行了拉齐,并且支持移动端不同分辨率的容器式布局。
为了更好的演示整个搭建过程,我们从一个空白应用的模板开始。这个停车场案例已经作为页面模板上架,各位用户在实际使用时点击添加页面即可直接使用。
首先通过IoT Studio首页进入移动工作台入口。
点击创建移动应用,与web应用的过程一样。
进入移动工作台,整体的布局与Web工作台类似,但有几个区别。
第一、移动工作台使用的是容器式布局,需要先拖入容器组件(横向分栏/纵向分栏)才能放置功能组件。这是为了适配各种移动端。
容器有分横向和纵向,横向最小颗粒度是页面的1/12,纵向可以无限延伸。彼此之间可以嵌套。
第二、这种容器布局有“组件树”进行统一管理,可以点击顶部导航栏icon进行查看。
好了,接下来开始布局。
首先我们定义好整体的主题色为橙色,因此顶部导航先配成橙色。
然后将背景调整为一个停车场的图片。
接下来先布局组件,我们需要完成首行两个卡片和下部的五个卡片列表。
将布局样式调节到合适的比例。
关联数据源部分与Web工作台类似。由于数据源种类多样,这里不统一演示。
另一个卡片嫌弃重新布局复杂?直接右键“复制”“粘贴”就可以啦!
接下来我们做各楼层停车场的演示卡片。先大概划分布局。
然后往容器组件里填写内容。
然后复制3个卡片。对文案稍作修改。
设置一个点击图片跳转停车片区详情页的路由。
然后编辑下一个页面。也是同样的做法,不过列表处使用了“重复卡片”。
最后再配置一下登录页的样式。注意需要先在项目内开通账号系统。
移动应用规定发布之前需要先绑定域名。
然后回到编辑器里,点击发布。
发布应用成功!这样就可以远程完成停车场的管理了!
欢迎使用IoT Studio!
这里介绍的是一个简单的停车解决方案实现过程。IoT Studio新上线了移动可视化开发工具,补充了大量的组件与模板,也支持更复杂的云端数据联动。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。