IOT-Studio 物联网应用开发实例

       

       物联网应用开发 (IoT Studio，原 Link Develop)，是阿里云针对物联网场景提供的生产力工具，可覆盖各个物联网行业核心应用场景，帮助您高效经济地完成设备、服务及应用开发。物联网开发服务提供了移动可视化开发、Web 可视化开发、服务开发与设备开发等一系列便捷的物联网开发工具，解决物联网开发领域开发链路长、技术栈复杂、协同成本高、方案移植困难的问题，重新定义物联网应用开发。

可视化搭建

       因为 IoT 产品链路漫长，用户很难同时兼备设备端、服务端、应用端开发能力，在绝大多数场景下，通过拖拽、配置的方式，即可完成设备数据监控相关的 Web 页面、移动应用和 API 服务的开发，开发者只需关注核心业务，无需关注传统开发中的种种繁琐细节，大大降低物联网开发的难度。

与设备管理无缝集成

       设备相关的属性状态、事件、报警等数据均可从阿里云物联网平台设备接入和管理模块中直接获取，无缝集成，大大降低了物联网开发的体验。

丰富的开发资源

       无论是 Web 可视化开发，还是服务开发工作台，均提供了数量众多的组件和丰富的 API，组件库随着产品的迭代升级也越来越丰富，大大提升开发效率。

无需部署

       用户无需额外购买服务器等服务，产品开发完毕完全托管在云端，开发完毕无需部署可以立即交付及使用。

一站式开发环境

       物联网开发服务提供了移动可视化开发、Web 可视化开发、服务开发与设备开发等一系列便捷的物联网开发工具，用户可以在 IoT Studio 中体验软硬一条龙的开发过程。

 

 

家居控制面板

概述

在这个教程里，我们将学习如何用Web可视化开发搭建一个H5家居应用控制面板。在这个文档里，我们将学习以下几个点：

1. 画布分辨率自定义；
2. 开关组件的图片样式运用；
3. 组件的复制粘贴功能；
4. 开关的数据源配置；

最终效果预览

Step1 新建应用，调整画布分辨率

在页面设置中，点击页面分辨率下拉框，选择自定义，在出来的选项中改画布分辨率为：375*667 （iPhone8尺寸）。

tips：

1. 鼠标点击画布任意非组件区域，右边操控面板都会变成当前页面的配置项。
2. 页面分辨率一旦调整，所有新建的页面画布都遵循该分辨率。
3. H5分辨率参考：iPhone8 375667； iPhone 8 Plus 736414；iPhone XS 812375；iPhone XR & iPhone XS Max 896414；Android 640*360；
4. Web可视化编辑器暂时不支持自动保存，切记随时Ctrl+S保存一下。

Step2 添加页面背景

找到页面设置项的背景图片，选择上传图片，在弹框中选择背景图片（需要自己上传）。

tips：

1. 图片分辨率建议为画布分辨率的2倍，保证实际在手机上看的效果不会模糊。

Step3 布局标题和时间

步骤3-1 标题

拖拽左侧组件的文字到画布，在右侧操作栏中设置文字内容以及文字样式。最终调整到合理的位置。

步骤3-2 时间

拖拽时钟组件到画布，将展示格式设为日期时间，调整背景颜色不透明度为0，调节文字字号和颜色，调整边框宽度为0，最终拖拽组件到合适的位置。

时钟调整背景透明：

时钟调整文字及边框透明：

Tips：**

1. 时钟组件默认带背景和边框，如果想要去掉，可设置背景颜色不透明度为0，边框粗细设置为0。
2. 在当前版本中，组件尺寸及位置的步长为5px，即尺寸需要为5的倍数，x及y轴位置也需要是5的倍数，如果你设置的值不满足5的倍数，则系统会自动调节到5的倍数，请悉知。

Step4 增加灯泡开关

目前支持设备开关控制的组件为：开关。我们将利用开关组件的图片样式功能制作符合预期的圆角开关按钮。

步骤4-1

拖拽开关组件到画布上，将样式类型选择为图片，上传对应状态的图片。

步骤4-2

拖拽文字组件到开关图片上作为标题。

步骤4-3

将鼠标拖拽选中标题和开关图片，右键，选择成组，然后通过快捷键Ctrl + C，Ctrl + V可复制多个相同的组件。

步骤4-4

右键选择“解散组”，然后选中标题，可更改标题名称。

tips：

1. 开关组件支持默认样式和图片两种配置，选择图片可随心所欲配置想要的开关样式。
2. 开关组件默认为关闭状态，所以在编辑器里只能看到off状态的图，可以点击预览，在预览状态下点击开关组件，查看on状态是否符合预期。
3. 该案例中，标题部分单独出来加是考虑到灵活性，可通过更改标题来表达不同的房间控制。
4. 充分利用组件成组和复制功能，记住快捷键 Ctrl+C , Ctrl+V。
5. 成组状态下，是不能编辑组内内容的，所以要先解散组，再编辑。

Step5 配置开关数据源

1. 点击已经配好的开关图片，选择右侧导航栏的数据面板，点击数据源配置。
2. 在数据源配置处选择已经建好的家居灯产品及设备（需要自己提前创建好含有布尔属性的灯产品及设备）。
3. 选择属性 - 主灯开关。
4. 点击右下角“确定”完成配置。

tips：

1. 设备选择可为“空”，即当前不配置任何具体设备，此时会出现mock 数据的输入框选项，可通过mock 数据方式来模拟设备运行。

 

1. 当选择设备后，如果没有真实设备，则需要通过“在线模拟”让设备上线。你可以通过“在线模拟”推送设备属性或事件消息，在编辑器中可直接看到设备状态引起的变化。

关于所有数据源的详细配置文档可点击此处查看。

Step6 增加窗帘开关

同Step4-5 制作即可，最终效果：

站长统计