开发移动应用监控室内温度
本文介绍搭建室内温度监控移动应用的开发过程。
前提条件
已完成创建项目和产品。
步骤一:创建移动应用
登录物联网应用开发控制台,在页面左上角选择公共实例后,在左侧导航栏单击项目管理。
在普通项目列表中,找到室内温度监控项目,单击项目卡片。
在项目主页页面的项目开发下,单击移动应用页签。
在移动应用页签,单击应用列表上方的新建。
在新建移动应用对话框中,输入应用名称(室内温度监控)和描述,单击确认。
移动应用创建完成后,会自动进入移动应用编辑器。
在移动应用页面的画布左侧,单击编辑按钮,编辑页面标题。
步骤二:配置组件样式和数据源
在移动应用编辑器中,单击最左侧的组件图标。
从左侧组件列表中,拖拽一个图片组件到画布上方。
在移动应用编辑器右侧样式中,设置图片样式并单击上传图片,上传室内布局图,如下图所示。更多信息,请参见图片。
拖拽一个选项卡组件到图片组件下方,设置三个选项卡,分别为客厅温湿度、卧室温湿度、厨房温湿度,对应展示不同内容。在每个选项卡中添加三个卡片组件和一个柱状图组件,展示卧室温湿度、客厅温湿度、厨房温湿度、空气质量的状态,如下图所示。
分别选中温度、湿度、PM2.5浓度卡片,配置卡片样式和数据源。本案例以客厅温湿度页签为例。
选中柱状图组件,在移动应用编辑器右侧样式中,设置柱状图的显示大小,并单击展示数据后的配置数据源。数据源参数配置如下。更多信息,请参见配置数据源。
配置项
说明
选择数据源
选择数据表资源。
数据表类型
选择设备数据表。
产品
本案例选择客厅温湿度。
设备选择方式
选择项目下指定设备。
选择设备
本案例选择指定设备为room4。
刷新设置
选中定时刷新复选框,并设置刷新频次为1分钟。
说明如果不选中,数据将不会自动更新,为保证性能,刷新频次间隔最低为1分钟。
拖拽四个自由卡片组件到选项卡组件下方,在自由卡片组件中添加文字组件和开关组件,控制客厅灯、卧室灯、空调、空气净化器的开关状态,如下图所示。
双击自由卡片进入编辑页面。从左侧组件列表中,拖拽一个开关和一个文字组件到自由卡片中,设置标题和样式。
选中开关组件,在移动应用编辑器右侧样式中,单击开关数据后的配置数据源。以卧室灯开关为例,数据源参数配置如下。更多信息,请参见配置数据源。
配置项
说明
选择数据源
选择设备。
产品
本案例选择开关遥控器。
设备
本案例选择指定设备为switch。
数据项
作为开关组件数据源的数据项。默认为设备属性。
属性
选择卧室灯开关属性。
单击编辑器上方保存按钮,保存设置。