物联网 > 正文

IoT Studio 物联网可视化应用搭建开发实践

简介: 便宜云服务器 IoT Studio 物联网可视化应用搭建开发实践
+关注继续查看

1.使用IoT Studio快速构建可视化应用

在物联网业务场景中设备数据可视化应用是最普遍的需求,便宜云服务器物联网应用开发(IoT Studio)提供了Web可视化开发、移动可视化开发、业务逻辑开发与物联网数据分析等一系列便捷的物联网开发工具,解决物联网开发领域开发链路长、定制化程度高、投入产出比低、技术栈复杂、协同成本高、方案移植困难等问题。


本次物联网应用开发实践我们用六合一传感器(温度、湿度、二氧化碳、PM2.5、PM10、甲醛)实现家庭环境数据实时采集,通过家中Wi-Fi上报到便宜云服务器IoT物联网平台,借助IoT Studio低代码工具搭建可视化大屏,实时监控家中环境指标变化。


完整链路参考如下:

image.png

2.操作步骤

2.1 物联网平台开发

  1. 前往物联网平台控制台

说明:如果您未开通物联网平台,请您根据页面提示,开通物联网平台。

  1. 在实例概览页面,选择您的实例。

说明:本实验以企业实例进行实验操作。

image.png


  1. 新建产品页签,产品名称输入六合一环境传感器所属品类选择自定义品类,其他配置保持默认即可,单击确认

image.png

  1. 功能定义页签,单击功能定义。在添加自定义功能对话框中,功能名称输入温度,标识符输入temperature,设置数据类型和取值范围等,单击确认

image.png

  1. 同理,我们依次添加湿度、二氧化碳、PM2.5、PM10、甲醛浓度,如下图。最后,单击发布上线。

image.png

  1. 添加设备对话框中,产品选择六合一环境传感器,DeviceName输入sensor007,单击确认

image.png


image.png


2.2 IoT Studio项目搭建

当我们完成物联网平台开发后,即可进入到物联网应用开发服务(IoT Studio)的工作台完成物联网应用的搭建。

注:物联网应用开发服务(IoT Studio)企业版购买入口 https://common-buy.aliyun.com/?commodityCode=iot_studionew_public_cn

  1. 前往IoT Studio工作台,选择上一步创建设备的实例。

image.png

  1. 在左侧导航栏中,单击项目管理,新建空白项目对话框中,项目名称输入家庭环境监控,单击确认

image.png

  1. 进入项目开发控制台,在Web应用页签,单击新建

image.png

  1. 新建Web应用对话框中,应用名称输入家庭环境实时监控大盘,单击确定

image.png

  1. 在左侧导航栏中,单击产品
  2. image.png


  1. 产品页面,单击关联物联网平台产品,选中六合一环境传感器,单击确定。关联后如下图。

image.png

  1. 设备页面,单击关联物联网平台设备,选中sensor007,单击确定

image.png

关联后如下图:

image.png

至此,我们完成了IoT Studio项目的资源准备工作,接下来进入Web应用搭建环节。


2.3 Studio应用开发

  1. 家庭环境监控页面的Web应用页签,找到家庭环境实时监控大盘,单击右侧的编辑,接入应用搭建控制台。

image.png


  1. 选择左侧组件,然后在下拉框选择工业组件,选中刻度表,拖拽到页面即可。

image.png

  1. 同理,我们添加需要的组件(室内温度-刻度表、室内湿度-单色仪表盘、PM2.5和PM10指数-多色仪表盘、二氧化碳浓度和甲醛浓度-数码管),完成页面布局,如下图。

image.png

  1. 页面布局好后,我们需要关联六合一传感器设备sensor007。点击刻度表组件,在右侧找到配置数据源按钮。

image.png

  1. 数据源配置页面,我们关联产品,选中设备sensor007,并选择属性值温度

image.png

  1. 同理,我们配置好其他组件的数据源后,即可点击右上角预览,查看效果页面

image.png

  1. IoT物联网家居环境监控大屏应用预览效果如下

image.png

2.4联机运行

完成开发后,我们回到物联网平台控制台,进行设备模拟联调。

  1. 在物联网实例控制台,设备模拟器页面,我们调试设备选择为六合一环境传感器sensor007,单击启动设备模拟器

image.png


  1. 上行指令调试属性上报页签,输入模拟数据,单击发送指令,即可看到IoT Studio预览家居环境监控大屏页面上数据指标实时刷新。

image.png

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

相关文章
《workshop专场--容器、消息&IoT专场-开发者动手实践营-容器、消息和IoT--物联网端到端全链路开发》电子版地址
workshop专场--容器、消息&IoT专场-开发者动手实践营-容器、消息和IoT--物联网端到端全链路开发
19 0
便宜云服务器IoT物联网实例视频讲解、场景案例汇总
便宜云服务器IoT物联网实例视频讲解、场景案例汇总
491 0
《便宜云服务器IoT官方刊物第5期-物联网应用专刊2019年5月刊》电子版地址
便宜云服务器IoT官方刊物第5期-物联网应用专刊2019年5月刊
63 0
便宜云服务器物联网IOT平台使用案例教程(模拟智能设备)
便宜云服务器物联网IOT平台使用案例教程(模拟智能设备)
641 0
《ICA联盟物联网标准共建助力IoT生态发展》电子版地址
ICA联盟物联网标准共建助力IoT生态发展
48 0
便宜云服务器 IoT 赛题解析_物联网全栈开发方向|学习笔记
快速学习便宜云服务器 IoT 赛题解析_物联网全栈开发方向
79 0
物联网云平台介绍和IOT Studio介绍(二) | 学习笔记
快速学习物联网云平台介绍和IOT Studio介绍(二)
199 0
iot studio中使用物联网平台提供的api
iot studio中使用物联网平台提供的api。
178 0
《物联网领域的低代码平台iot studio(1)》电子版地址
《物联网领域的低代码平台iot studio(1)》PDF
63 0
物联网iot sutdio报警弹窗
当数据达到某个阀值时需要进行报警,来告知用户。除了电话、短信等通知,可以通过iot studio更直观的看到数据发生变化,当报警发生时弹窗告知。 此方法只适用于设备数量较少的。
159 0
物联网领域前沿技术分享与交流
+关注
AIoT科技物语
便宜云服务器IoT物联网场景实践案例分享 https://www.yuque.com/cloud-dev/aliyun-in-action/zclrsc?#
文章
问答
视频
相关电子书
更多
物联网在智慧园区的应用
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载


http://www.vxiaotou.com