简介: 阿里云IoT推出了智能停车解决方案,结合了边缘计算能力,能实现大范围的传感器联动。接下来将演示如何利用阿里云IoT Studio全新推出的移动可视化开发工具,快速的搭建停车场管理应用,实现停车统计、车位显示、费用预计等功能。
阿里云IoT事业部推出了智能停车方案,结合了边缘计算能力,能实现大范围的传感器联动。接下来将演示如何利用阿里云IoT Studio全新推出的移动可视化开发工具,快速的搭建停车场管理应用,实现停车统计,车位显示,费用预计等功能。
![ba0652e73bf72b8a4a9bd2589b350bfe.png](https://i-blog.csdnimg.cn/blog_migrate/19c61d93949f200f3757dff4d85e63fa.jpeg)
技术架构
首先要对整个停车场进行数字空间的数据建模。
![e48058c198a86e89bf1aeefed1aa6bb0.png](https://i-blog.csdnimg.cn/blog_migrate/cd877dfe2cc00553569da60e94da1123.jpeg)
由于这是一个非常简单的模型(阿里云物联网有标准解决方案,请查看链接https://help.aliyun.com/document_detail/169250 ),我们只需要处理停车位是否占用,占用时间,以及基本的温湿度数据即可。
设备接入
首先打开我们的公共实例,创建一个产品叫“停车场网关”的产品,协议选择“边缘网关”。
![fa7eddd5f492d88d43e6aa94eccd7c2a.png](https://i-blog.csdnimg.cn/blog_migrate/2d51edcfcaf806c1f66d5cb1ae55ba68.jpeg)
在边缘网关下创建“地磁传感器”和“温湿度传感器”产品。
![f7e3071031333a7a43b0a69509b42ddb.png](https://i-blog.csdnimg.cn/blog_migrate/32d5a490f379485cf9b8f436d33ea7ce.jpeg)
![9cd5c8cabb1ae1ec44059c2842204697.png](https://i-blog.csdnimg.cn/blog_migrate/3d59bb2cbd67ab7da3fbbe5e6228c36b.jpeg)
可以看到具体参数如下。
![47cb090f8a363af5b18e713f29550e18.png](https://i-blog.csdnimg.cn/blog_migrate/3ea31e6fd6766f98242ed62be40bec75.jpeg)
![fb39373ae808f1a318c88c853d963be6.png](https://i-blog.csdnimg.cn/blog_migrate/d0207795e673ba3f39c65965891f2326.jpeg)
然后创建4个停车场网关设备,分别对应4个停车区域。以及对应车位数量的各传感器。
![7fb5305f09f447f9413acc7a4312fd45.png](https://i-blog.csdnimg.cn/blog_migrate/c911c35db57d0c2dc2e8ced7110cf178.jpeg)
![8fe6858415c38ecae39382945cb54c5b.png](https://i-blog.csdnimg.cn/blog_migrate/00229f71c78eb7b9d2b6fa4bf3bb5a38.jpeg)
这里用一个网关,一个温湿度传感器加20个地磁为例子。为Gateway001添加1个DHT子设备和20个地磁子设备。
![3c6248f2ad139ab9c8fde486349180f5.png](https://i-blog.csdnimg.cn/blog_migrate/29b2b241667fb83bdb7e4344ad581c06.jpeg)
边缘设备接入部分可以参考说明文档。https://help.aliyun.com/document_detail/103247
在物联网平台完成边缘设备的接入之后,我们可以在IoT Studio新建一个“停车场”项目用来管理所有资源。为了方便说明,这里创建一个空白项目。
![5bdd1d0b9829d480b9606f81a91147c2.png](https://i-blog.csdnimg.cn/blog_migrate/f9324bbbe3d02ceec0b271514047d41b.jpeg)
将产品与相关设备从物联网平台进行关联,注意要在同一个实例里。
![894dfc5d1920f8193cb8395d3881b7bd.png](https://i-blog.csdnimg.cn/blog_migrate/ec9f33d19ce95dbc9f9833828f780bd6.jpeg)
![778b6861697257b798233920d4e1480b.png](https://i-blog.csdnimg.cn/blog_migrate/6a388d69b0415174784271e2b868ba61.jpeg)
这样就结束数据建模与设备接入的部分,接下来就是移动应用的开发了!
移动可视化开发
在11月,万众瞩目的IoT Studio新版移动工作台正式对外开放。与之前的移动工作台相比,新版加强了对数据源与组件交互的支持,使用体验与Web工作台进行了拉齐,并且支持移动端不同分辨率的容器式布局。
![f8bae13991d6c9e7364f8a1185cf9051.png](https://i-blog.csdnimg.cn/blog_migrate/2f0a843938b6f1f3be22b064597a0dc8.jpeg)
为了更好的演示整个搭建过程,我们从一个空白应用的模板开始。这个停车场案例已经作为页面模板上架,各位用户在实际使用时点击添加页面即可直接使用。
![0c54c0b7b8c1d2b1d1341decf074c85d.png](https://i-blog.csdnimg.cn/blog_migrate/8e070ebff3799b8dc926b32929a7f771.jpeg)
首先通过IoT Studio首页进入移动工作台入口。
![bc606517c45d847c57bc339f3f9cff67.png](https://i-blog.csdnimg.cn/blog_migrate/2c371ef5d10dbe71f215ba238dc9ee65.jpeg)
点击创建移动应用,与web应用的过程一样。
![20f33ef856a966fc955a4398a5fd82a9.png](https://i-blog.csdnimg.cn/blog_migrate/216e01a7e8c43059e4069f9902ae1019.jpeg)
进入移动工作台,整体的布局与Web工作台类似,但有几个区别。
![a997cab171d1ec83a58d776d14cba8f5.png](https://i-blog.csdnimg.cn/blog_migrate/42a88e536ae5c41f57a28e25007de638.jpeg)
第一、移动工作台使用的是容器式布局,需要先拖入容器组件(横向分栏/纵向分栏)才能放置功能组件。这是为了适配各种移动端。
![46c88cc43c3541da6891a76116d335af.gif](https://i-blog.csdnimg.cn/blog_migrate/a676dc9d06643492c3b4e66f5fb6f155.gif)
容器有分横向和纵向,横向最小颗粒度是页面的1/12,纵向可以无限延伸。彼此之间可以嵌套。
![985d6feb80078c3b1c4d44271932a876.gif](https://i-blog.csdnimg.cn/blog_migrate/adbe573619c4aadc068c99c7892eb57b.gif)
第二、这种容器布局有“组件树”进行统一管理,可以点击顶部导航栏icon进行查看。
![3a27a00d7587013890e314b1ae06d1b4.gif](https://i-blog.csdnimg.cn/blog_migrate/291c83e3555e0fffdb2c29fe62cc0203.gif)
好了,接下来开始布局。
首先我们定义好整体的主题色为橙色,因此顶部导航先配成橙色。
![4cfe7a83418e2894c8345e7a0081bb8d.gif](https://i-blog.csdnimg.cn/blog_migrate/0c8f564f46f61c33758abf5b6058ccd4.gif)
然后将背景调整为一个停车场的图片。
![a4588eb2c4ceb9ec52eaeed7358a808a.png](https://i-blog.csdnimg.cn/blog_migrate/c4483d9e821f9d0c1ac83d0dc7b8815f.jpeg)
接下来先布局组件,我们需要完成首行两个卡片和下部的五个卡片列表。
![f2fca8678f7a3b86de499e38a2a42f26.gif](https://i-blog.csdnimg.cn/blog_migrate/0c26cc9db88023c72729cd15e8557c13.gif)
![6adba25e1b7fa32c43d76de542d7fb4f.gif](https://i-blog.csdnimg.cn/blog_migrate/d5f2aa03b495b8d59a8afc52c29cc1dd.gif)
将布局样式调节到合适的比例。
![b824a5860f0c4dac1d275c54cff6ab2e.gif](https://i-blog.csdnimg.cn/blog_migrate/1d0f5ae0bf61461550aae3f72a92e49f.gif)
关联数据源部分与Web工作台类似。由于数据源种类多样,这里不统一演示。
![8aabe547b119bf4c553a2c94243c8d57.gif](https://i-blog.csdnimg.cn/blog_migrate/8d5be5f8139758ec6d183ecf8ce20fb0.gif)
另一个卡片嫌弃重新布局复杂?直接右键“复制”“粘贴”就可以啦!
![c9c5f67b7aa3645111db3034f52b82fe.gif](https://i-blog.csdnimg.cn/blog_migrate/afad87eecf0ef3f3806ac9f7ab0d9ad3.gif)
接下来我们做各楼层停车场的演示卡片。先大概划分布局。
![3179448a1ba03e5973b26f3162b907a3.gif](https://i-blog.csdnimg.cn/blog_migrate/f0dbdb75125f02432ef86813d8864d6d.gif)
然后往容器组件里填写内容。
![3858ed168e002fd02d4d2a2eee044df8.gif](https://i-blog.csdnimg.cn/blog_migrate/e23c377cd4e74e972c5ec82fa62ddf94.gif)
然后复制3个卡片。对文案稍作修改。
![75c2fc344bbdef5344cec248f0dd1981.png](https://i-blog.csdnimg.cn/blog_migrate/a47ad4c295656640680d401655971874.jpeg)
设置一个点击图片跳转停车片区详情页的路由。
![a743aa583a87cfad4ef6752080727888.gif](https://i-blog.csdnimg.cn/blog_migrate/5f9d07a757b59ff8e5f61f773ad47fd4.gif)
然后编辑下一个页面。也是同样的做法,不过列表处使用了“重复卡片”。
![5560ae6341fde8c197441d69abfd8553.png](https://i-blog.csdnimg.cn/blog_migrate/c293d0c51b7fe937c58c3bd28ab08507.jpeg)
最后再配置一下登录页的样式。注意需要先在项目内开通账号系统。
![dd15df64a18c1e96ec86458ae2eafad6.png](https://i-blog.csdnimg.cn/blog_migrate/19cb4e83f0e609e4452f4d7f6041fd8b.jpeg)
![e0d61f9e84a1cece3fe831f2ba99eac1.gif](https://i-blog.csdnimg.cn/blog_migrate/92ec1f80661b49b9bca3058bcdc213fa.gif)
移动应用规定发布之前需要先绑定域名。
![7fc9a0baae6bf5a58615384168e000af.gif](https://i-blog.csdnimg.cn/blog_migrate/12b1f073b616abe0aace8f831ddbc9e6.gif)
然后回到编辑器里,点击发布。
![e59d41b2829607328a5f4012ff3f6a93.png](https://i-blog.csdnimg.cn/blog_migrate/8a566cce452ecf1ee7ba2b8426baf875.jpeg)
发布应用成功!这样就可以远程完成停车场的管理了!
![e95a8f9acdf34db40fbd993a8083115e.png](https://i-blog.csdnimg.cn/blog_migrate/e09bc77937406ecd5e1b3855059500fe.jpeg)
欢迎使用IoT Studio!
这里介绍的是一个简单的停车解决方案实现过程。IoT Studio新上线了移动可视化开发工具,补充了大量的组件与模板,也支持更复杂的云端数据联动。