IOT-Studio 物联网应用开发实例
物联网应用开发 (IoT Studio，原 Link Develop)，是阿里云针对物联网场景提供的生产力工具，可覆盖各个物联网行业核心应用场景，帮助您高效经济地完成设备、服务及应用开发。物联网开发服务提供了移动可视化开发、Web 可视化开发、服务开发与设备开发等一系列便捷的物联网开发工具，解决物联网开发领域开发链路长、技术栈复杂、协同成本高、方案移植困难的问题，重新定义物联网应用开发。
可视化搭建
因为 IoT 产品链路漫长，用户很难同时兼备设备端、服务端、应用端开发能力，在绝大多数场景下，通过拖拽、配置的方式，即可完成设备数据监控相关的 Web 页面、移动应用和 API 服务的开发，开发者只需关注核心业务，无需关注传统开发中的种种繁琐细节，大大降低物联网开发的难度。
与设备管理无缝集成
设备相关的属性状态、事件、报警等数据均可从阿里云物联网平台设备接入和管理模块中直接获取，无缝集成，大大降低了物联网开发的体验。
丰富的开发资源
无论是 Web 可视化开发，还是服务开发工作台，均提供了数量众多的组件和丰富的 API，组件库随着产品的迭代升级也越来越丰富，大大提升开发效率。
无需部署
用户无需额外购买服务器等服务，产品开发完毕完全托管在云端，开发完毕无需部署可以立即交付及使用。
一站式开发环境
物联网开发服务提供了移动可视化开发、Web 可视化开发、服务开发与设备开发等一系列便捷的物联网开发工具，用户可以在 IoT Studio 中体验软硬一条龙的开发过程。
家居控制面板
概述
在这个教程里，我们将学习如何用Web可视化开发搭建一个H5家居应用控制面板。在这个文档里，我们将学习以下几个点：
- 画布分辨率自定义；
- 开关组件的图片样式运用；
- 组件的复制粘贴功能；
- 开关的数据源配置；
最终效果预览
Step1 新建应用，调整画布分辨率
在页面设置中，点击页面分辨率下拉框，选择自定义，在出来的选项中改画布分辨率为：375*667 （iPhone8尺寸）。
tips：
- 鼠标点击画布任意非组件区域，右边操控面板都会变成当前页面的配置项。
- 页面分辨率一旦调整，所有新建的页面画布都遵循该分辨率。
- H5分辨率参考：iPhone8 375667； iPhone 8 Plus 736414；iPhone XS 812375；iPhone XR & iPhone XS Max 896414；Android 640*360；
- Web可视化编辑器暂时不支持自动保存，切记随时Ctrl+S保存一下。
Step2 添加页面背景
找到页面设置项的背景图片，选择上传图片，在弹框中选择背景图片（需要自己上传）。
tips：
- 图片分辨率建议为画布分辨率的2倍，保证实际在手机上看的效果不会模糊。
Step3 布局标题和时间
步骤3-1 标题
拖拽左侧组件的文字到画布，在右侧操作栏中设置文字内容以及文字样式。最终调整到合理的位置。
步骤3-2 时间
拖拽时钟组件到画布，将展示格式设为日期时间，调整背景颜色不透明度为0，调节文字字号和颜色，调整边框宽度为0，最终拖拽组件到合适的位置。
时钟调整背景透明：
时钟调整文字及边框透明：
Tips：**
- 时钟组件默认带背景和边框，如果想要去掉，可设置背景颜色不透明度为0，边框粗细设置为0。
- 在当前版本中，组件尺寸及位置的步长为5px，即尺寸需要为5的倍数，x及y轴位置也需要是5的倍数，如果你设置的值不满足5的倍数，则系统会自动调节到5的倍数，请悉知。
Step4 增加灯泡开关
目前支持设备开关控制的组件为：开关。我们将利用开关组件的图片样式功能制作符合预期的圆角开关按钮。
步骤4-1
拖拽开关组件到画布上，将样式类型选择为图片，上传对应状态的图片。
步骤4-2
拖拽文字组件到开关图片上作为标题。
步骤4-3
将鼠标拖拽选中标题和开关图片，右键，选择成组，然后通过快捷键Ctrl + C，Ctrl + V可复制多个相同的组件。
步骤4-4
右键选择“解散组”，然后选中标题，可更改标题名称。
tips：
- 开关组件支持默认样式和图片两种配置，选择图片可随心所欲配置想要的开关样式。
- 开关组件默认为关闭状态，所以在编辑器里只能看到off状态的图，可以点击预览，在预览状态下点击开关组件，查看on状态是否符合预期。
- 该案例中，标题部分单独出来加是考虑到灵活性，可通过更改标题来表达不同的房间控制。
- 充分利用组件成组和复制功能，记住快捷键 Ctrl+C , Ctrl+V。
- 成组状态下，是不能编辑组内内容的，所以要先解散组，再编辑。
Step5 配置开关数据源
- 点击已经配好的开关图片，选择右侧导航栏的数据面板，点击数据源配置。
- 在数据源配置处选择已经建好的家居灯产品及设备（需要自己提前创建好含有布尔属性的灯产品及设备）。
- 选择属性 - 主灯开关。
- 点击右下角“确定”完成配置。
tips：
- 设备选择可为“空”，即当前不配置任何具体设备，此时会出现mock 数据的输入框选项，可通过mock 数据方式来模拟设备运行。
- 当选择设备后，如果没有真实设备，则需要通过“在线模拟”让设备上线。你可以通过“在线模拟”推送设备属性或事件消息，在编辑器中可直接看到设备状态引起的变化。
关于所有数据源的详细配置文档可点击此处查看。
Step6 增加窗帘开关
同Step4-5 制作即可，最终效果：
站长统计
IOT-Studio 物联网应用开发实例相关推荐
- Android studio 下 JNI 开发实例
在AS中进行 NDK 开发之前,我们先来简单的介绍几个大家都容易搞懵的概念: 到底什么是JNI,什么是NDK? 何为"交叉编译"? 先看什么是 JNI?JNI 的全称就是 Java ...
- 阿里云--IOT Studio初学
1.初学基于阿里云IOT云平台应用开发 1.1 阿里云的-物联网应用开发-IOT Studio 此次使用阿里云的-物联网应用开发-IOT Studio;物联网应用开发(IoT Studio,阿里云:h ...
- IoT Studio 有大事宣布
简介:5天包教包会! "5营连开丨阿里云IoT云端一体智能硬件开发新手训练营"火爆进行中 8月16日 IoT Studio物联网开发训练营即将线上开课 用户可免费报名及参加学习 优 ...
- 物联网控制APP入门专题（二）---阿里云iot studio移动可视化功能基本操作
微信小程序连接阿里云物联网平台云端API实现物联操控 03-25 其中包含cryptojs.uuid生成模块,还有用于微信小程序连接阿里云物联网平台云端API的专属sdk,已结实现效果demo,只需填 ...
- IoT企业物联网平台，从设备端到云端业务系统全链路开发实战——实践类
传送门:5个视频讲解,30个场景案例汇总 一.企业物联网平台开发实战 通过阅读本文你将学会一下技能: 设备通过MQTT协议与您在阿里云上购买的IoT企业实例建立双向连接,上报设备采集的数据,监听云端下 ...
- 如何在阿里云物联网平台上利用已有的 IoT Studio项目模板创建项目
目录 前言 一.在阿里云找到已有的IoT Studio公开项目模板 二.选择公开项目模板 三.其他选择 结语 前言 前面的文章里,我们介绍了如何在阿里云物联网平台上添加LoRa节点设备,并让LoRa节 ...
- android物联网开发简书,Arduino物联网开发实例教程
## blinker解决方案 blinker是一套跨硬件.跨平台的物联网解决方案,提供APP端.设备端.服务器端支持,使用公有云服务进行数据传输.可用于智能家居.数据监测等领域,可以帮助用户更好更快地 ...
- 使用阿里云物联网平台IoT Studio控制海康摄像头旋转
需求: 在温室大棚的物联网监控系统里,安装了带云台控制的摄像头,海康自带的app是可以实现云台控制(转动,放大缩小),但是嵌入网页的播放器,没有这个功能,而客户又希望通过网页去控制摄像头,捕捉特定的植 ...
- 移动应用开发实例_物联网改变移动应用开发的4种方式
图片来源:pixabay.com 来源:物联之家网(iothome.com) 转载请注明来源! 物联网改变了移动应用程序的开发格局.那么,为物联网开发移动应用程序有何不同? 物联网与移动应用程序开发齐 ...
最新文章
- 1%学者拥有21%引用量，全球学术圈两极分化扩大
- 【MySQL】基础知识
- 函数调用的方法一共有 4 种,call,apply,bind
- maven实战笔记-13
- 哪个更快：Java 堆还是本地内存
- wxWidgets：基于 XML 的资源系统 (XRC)
- 国产主可控的嵌入式仿真测试软件SkyEye与可信编译器L2C的核心翻译介绍
- MSF安装失败的原因
- IIS 故障一例（XP更新补丁后）
- ci github 通知_GitHub 欢迎一切 CI 工具
- 高等数学常用符号大全及符号的含义
- 分享2个Python处理Excel的脚本
- Mysql登录默认密码
- Ubuntu软件商店下载速度慢
- 初唐名臣---凌烟阁上二十四功臣
- 图像处理及深度学习开源数据集大全（四万字呕心沥血整理）
- 【数学】小C的作业题
- H5直播答题并不难，看完这篇你也会
- 那些年我做的毕业设计
- 2021 计算机 保研经历 保研经验贴 保研知识扫盲 保研时间线（合肥工业大学 软件工程 rk4/165，211 3%）