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

前提条件

已完成创建项目和产品。

步骤一：创建移动应用

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. 单击编辑器上方保存按钮，保存设置。

后续步骤

发布