开发移动应用监控室内温度

更新时间:

本文介绍搭建室内温度监控移动应用的开发过程。

前提条件

已完成创建项目和产品

步骤一:创建移动应用

  1. 登录物联网应用开发控制台,在页面左上角选择公共实例后,在左侧导航栏单击项目管理

  2. 普通项目列表中,找到室内温度监控项目,单击项目卡片。

  3. 在项目主页页面的项目开发下,单击移动应用页签。

  4. 移动应用页签,单击应用列表上方的新建

  5. 新建移动应用对话框中,输入应用名称(室内温度监控)和描述,单击确认

  6. 移动应用创建完成后,会自动进入移动应用编辑器。

  7. 在移动应用页面的画布左侧,单击编辑按钮编辑,编辑页面标题。

步骤二:配置组件样式和数据源

  1. 在移动应用编辑器中,单击最左侧的组件图标组件

  2. 从左侧组件列表中,拖拽一个图片组件到画布上方。

    在移动应用编辑器右侧样式中,设置图片样式并单击上传图片,上传室内布局图,如下图所示。更多信息,请参见图片

    图片组件
  3. 拖拽一个选项卡组件到图片组件下方,设置三个选项卡,分别为客厅温湿度、卧室温湿度、厨房温湿度,对应展示不同内容。在每个选项卡中添加三个卡片组件和一个柱状图组件,展示卧室温湿度、客厅温湿度、厨房温湿度、空气质量的状态,如下图所示。

    选项卡
    1. 分别选中温度、湿度、PM2.5浓度卡片,配置卡片样式和数据源。本案例以客厅温湿度页签为例。

      1. 卡片组件以一定的界面样式展示常用数据,设置显示大小、标题、单位、背景颜色。更多信息,请参见卡片

      2. 在移动应用编辑器右侧样式中,单击展示数据后的配置数据源。数据源参数配置如下,详细配置说明,请参见配置数据源

        配置项

        温度卡片

        湿度卡片

        PM2.5浓度卡片

        选择数据源

        选择设备

        产品

        本案例选择客厅温湿度

        本案例选择空气检测器

        设备

        本案例选择指定设备room4

        本案例选择指定设备为Air-detector

        数据项

        作为卡片组件数据源的数据项。默认为设备属性

        属性

        选择温度属性。

        选择湿度属性。

        选择PM2.5浓度属性。

    2. 选中柱状图组件,在移动应用编辑器右侧样式中,设置柱状图的显示大小,并单击展示数据后的配置数据源。数据源参数配置如下。更多信息,请参见配置数据源

      配置项

      说明

      选择数据源

      选择数据表资源

      数据表类型

      选择设备数据表

      产品

      本案例选择客厅温湿度

      设备选择方式

      选择项目下指定设备

      选择设备

      本案例选择指定设备room4

      刷新设置

      选中定时刷新复选框,并设置刷新频次为1分钟。

      说明

      如果不选中,数据将不会自动更新,为保证性能,刷新频次间隔最低为1分钟。

  4. 拖拽四个自由卡片组件到选项卡组件下方,在自由卡片组件中添加文字组件和开关组件,控制客厅灯、卧室灯、空调、空气净化器的开关状态,如下图所示。

    开关
    1. 双击自由卡片进入编辑页面。从左侧组件列表中,拖拽一个开关和一个文字组件到自由卡片中,设置标题和样式。

      • 自由卡片组件作为背景容器,设置填充颜色为#FAFAFA。更多信息,请参见自由卡片

      • 文字组件作为开关标题(例如卧室灯)。更多信息,请参见文字

      • 开关组件作为灯开关状态的显示,分别为ON和OFF状态上传对应图片(您可自定义)。更多信息,请参见开关

    2. 选中开关组件,在移动应用编辑器右侧样式中,单击开关数据后的配置数据源。以卧室灯开关为例,数据源参数配置如下。更多信息,请参见配置数据源

      配置项

      说明

      选择数据源

      选择设备

      产品

      本案例选择开关遥控器

      设备

      本案例选择指定设备switch

      数据项

      作为开关组件数据源的数据项。默认为设备属性

      属性

      选择卧室灯开关属性。

  5. 单击编辑器上方保存按钮,保存设置。

后续步骤

发布