IoT Studio快速入门 - 使用虚拟设备搭建茶园监控应用

目录设计思路创建项目和产品创建项目关联已有产品和设备新建产品和设备开发虚拟设备操作步骤执行结果分析温度时序数据操作步骤使用云数据库创建数据表操作步骤开发获取温度数据的服务操作步骤开发可视化茶园监控大屏操作步骤执行结果通过使用物联网应用开发（IoT Studio）平台的Web可视化开发和业务逻辑开发工具，开发一个茶园的环境监控大屏。应用用户可在监控大屏中，查看在指定时间内，设备上报的温度值折线图。设

HaaS技术社区

2788人浏览 · 2021-04-22 12:22:18

HaaS技术社区 · 2021-04-22 12:22:18 发布

通过使用物联网应用开发（IoT Studio）平台的Web可视化开发和业务逻辑开发工具，开发一个茶园的环境监控大屏。应用用户可在监控大屏中，查看在指定时间内，设备上报的温度值折线图。

设计思路

先在业务逻辑开发工作台，创建三个服务，分别是：
- 一个设备触发服务：用于获取温度探测器上报的温度数据，并存储到云数据库RDS版MySQL数据表中。
- 一个定时触发服务：用于每个整点统计前一小时的最高温度数据，并存储到另一个云数据库RDS版MySQL数据表中。
- 一个HTTP接口：用于从RDS数据库中，筛选出指定时间段内，每小时的最高温度数据。
使用Web可视化开发工作台，开发一个Web前端应用。用于调用HTTP接口，获取指定时间段内，每小时的最高温度数据，并展示在折线图中。
监控大屏如下图。

创建项目和产品

在物联网应用开发（IoT Studio）上创建物联网开发项目，并为项目导入或创建温度监测器产品和设备。后续将在该项目下，创建业务逻辑应用和Web应用。

创建项目

登录物联网应用开发控制台，在页面左上角选择对应实例后，在左侧导航栏单击项目管理。
您也可登录物联网平台控制台，在左侧导航栏单击相关服务后，单击物联网应用开发模块中的前往使用，进入IoT Studio控制台。
在项目管理页，单击新建项目。
在新建项目页，鼠标移动至新建空白项目区域，单击创建空白项目。
在新建空白项目对话框，配置项目名称（例如茶园监控方案）和描述信息。
单击确认。

关联已有产品和设备

若您已创建了产品和设备，且已为产品定义了物模型，直接关联产品和设备即可。

在项目管理页面的项目列表中，找到目标项目（茶园监控方案），单击项目卡片。
在左侧导航栏单击产品。
在产品页面，单击产品列表左上方的关联物联网平台产品。
在关联物联网产品面板中，选中待关联产品的复选框。
本示例中关联温度检测器产品及设备。
选中关联产品同时关联其下所有设备的复选框。
单击确定。
您可在该项目的产品页面的产品列表中查看到关联的产品。

新建产品和设备

若您还未创建相应产品，需先创建产品，并为产品定义物模型。

在项目管理页面的项目列表中，找到目标项目，单击项目卡片。
在项目页的左侧导航栏，单击产品 > 创建产品。本示例为产品命名为温度监测器，选择自定义品类，其他参数使用默认值。
参数说明的更多信息，请参见参数说明表。
单击确认。
产品创建成功后，回到产品页面，可在产品列表中查看到已创建的新产品。
在产品页面产品列表中，单击产品对应的查看操作按钮。
在产品详情页，单击功能定义页签，再单击编辑草稿，选择添加自定义功能。
本示例添加以下自定义属性。具体操作，请参见单个添加物模型。

功能名称标识符数据类型取值范围单位读写类型
温度 temperature float （单精度浮点型） -10 ~ 50 摄氏度（℃）读写
在项目页的左侧导航栏，单击设备 > 添加设备。

功能名称	标识符	数据类型	取值范围	单位	读写类型
温度	temperature	float （单精度浮点型）	-10 ~ 50	摄氏度（℃）	读写

单击添加设备。
在添加设备对话框中，输入设备信息，单击确认。

设备创建成功后，将自动弹出添加完成对话框。您可以查看、复制设备证书信息。

设备信息

设备创建完成后，设备状态显示未激活。请参见Link SDK文档开发设备端SDK，激活设备。

有关设备的更多信息，请参见设备。

开发虚拟设备

物联网平台设备的正常开发流程是：设备端开发完成，设备上报数据，云端接收数据，云端开始开发工作。该开发流程战线较长，耗时较久。而虚拟设备可以快速模拟真实设备产生业务数据，是最快体验IoT Studio开发功能的途径。本案例根据开发虚拟设备的数据，完成物联网应用的开发调试。

操作步骤

登录物联网应用开发控制台，在页面左上角选择对应实例后，在左侧导航栏单击项目管理。
您也可登录物联网平台控制台，在左侧导航栏单击相关服务后，单击物联网应用开发模块中的前往使用，进入IoT Studio控制台。
在普通项目列表中，找到目标项目，单击项目卡片。
您也可单击全局资源项目，进入该项目详情页面。
在项目页面，单击左侧导航栏的设备。
在设备列表上方，选择产品温度检测器。
找到新增的温度检测器设备，单击设备右侧操作栏的查看。
在设备详情页选择在线调试 > 调试虚拟设备 > 启动虚拟设备 > 属性上报。
使用虚拟设备上报模拟属性值到云端。
本示例中使用random()函数生成随机值来模拟设备属性值，以连续推送策略上报到云端。

执行结果

在设定的时间推送数据后，可在页面右侧实时日志下查看操作日志。

数据推送成功后，可在运行状态页签下，查看设备上报的属性信息。

分析温度时序数据

数据分析服务是物联网应用开发（IoT Studio）的一个重要组件，通过数据分析组件，可简单查阅各数据中各事件维度的统计值，例如平均值，最大值，最小值等。支持通过图表选择不同的数据维度，探索各数据之间的关系。

操作步骤

登录数据分析控制台，在顶部导航栏上选择分析透视，进入时序透视页签，如下图所示。
说明上图中时序透视的快照图，需要在时序透视工作台中保存后才会生成。
单击新建时序透视，在新建时序透视弹框中配置参数，如下图所示。
单击确认，进入时序透视工作台，如下图所示。
单击添加产品，在添加产品对话框中选择需要添加的产品并单击确认，如下图所示。
选择设备优先，在左侧属性选择区域选择温度，右侧出现如下图所示的折线图。
从上图中可以发现每隔1小时左右，温度的平均变化情况。您也可以查看温度上报数据的其他统计值，了解更多温度变化趋势。

使用云数据库创建数据表

在云数据库RDS版控制台，创建一个MySQL类型的数据库实例，并创建两个数据表，分别用于存储设备上报的温度数据和服务应用处理后的温度数据。

操作步骤

登录云数据库RDS版控制台。
在云数据库管理页，单击创建实例，创建一个MySQL类型的数据库实例。
在数据库实例列表中，单击该实例对应的管理操作按钮。
在左侧导航栏中，单击账号管理，创建数据库用户账号和密码。用于登录数据库。
在左侧导航栏中，单击数据库管理，创建数据库。
在左侧导航栏中，单击数据安全性，添加数据库IP白名单。添加白名单具体操作，请参见设置IP白名单。
在左侧导航栏中，单击基本信息，查看该数据库的基本信息。
在数据库页面上方，单击登录数据库，输入用户账号和密码，登录数据库。
在DMS左侧导航栏，选择已创建的数据库，在数据库中创建两个数据库表，分别命名为sensor_data（用于存储各设备上报的温度数据）和maxtemperature（用于存储服务应用处理后的数据）。

有关数据管理DMS更多信息，请参见数据管理 DMS
有关云数据库RDS版更多信息，请参见RDS MySQL数据库。

开发获取温度数据的服务

在业务逻辑工作台，开发三个业务服务，分别用于获取设备上报的温度数据，每整点统计前一小时的最高温度数据，和筛选指定时间段内每小时的最高温度数据。

操作步骤

登录物联网应用开发控制台，在页面左上角选择对应实例后，在左侧导航栏单击应用开发。
您也可登录物联网平台控制台，在左侧导航栏单击相关服务后，单击物联网应用开发模块中的前往使用，进入IoT Studio控制台。
在开发工具模块，单击业务逻辑。
在业务逻辑开发页面，单击空白模板区域。
创建一个设备触发服务。
该服务以温度监测器设备作为触发节点，接收温度监测器设备上报的温度数据，并存储到云数据库RDS版MySQL数据表中。

输入业务逻辑服务的基本信息并单击确认。


参数	说明
服务名称	服务的唯一标识符，在项目下具有唯一性。例如：存储温度数据仅支持中文汉字、英文字母、数字、下划线（_）、连接号（-）和英文圆括号（()），且必须以中文汉字、英文字母或数字开头，长度不超过30个字符（一个中文汉字算一个字符）。
所属项目	服务所属的项目。本案例选择已创建的项目：茶园监控方案。
备注	描述服务的用途等信息。长度不超过100个字符（一个中文汉字算一个字符）。

从服务编辑器左侧节点页签下，拖拽一个设备触发节点到画布上，并配置输入数据为温度监测器上报的属性。

配置一个云数据库RDS节点，用于将温度监测器上报的温度数据存入数据表sensor_data。

本示例中，输入的参数如下所示。

{
    "table": "sensor_data",
    "rows": [
        {
       "id":"{{payload.deviceContext.gmtCreate}}",
       "deviceName" : "{{payload.deviceContext.deviceName}}",
       "dateTime" : "{{payload.props.temperature.time}}",
       "temperature" : "{{payload.props.temperature.value}}"

         }
    ]
}

单击部署，部署服务。
单击启动，启动服务。

5. 创建一个定时触发服务。

该服务用于每整点统计前一小时的最高温度数据，并存储到云数据库RDS版MySQL数据表中。

切换到服务列表页面，单击服务列表右侧的添加图标。

在业务逻辑开发页面，创建并设置定时触发服务。

打开新建业务服务对话框，详细操作请参见步骤3。
设置定时触发服务的基本信息设置（例如服务名称为存储最高温度数据）。具体操作，请参见步骤4的第一个子步骤。

配置一个定时触发节点，用于每整点触发一次服务。

配置一个云数据库RDS节点，用于从存储设备上报的温度数据的数据表sensor_data中，查询数据。

本示例中，查询数据的输入参数如下所示。

{
    "table": "sensor_data",
    "condition": {
        "where": {"deviceName": "bZxNh9qi6PyqYvFcDvqK"},
        "columns": [
            "id",
            "deviceName",
            "temperature",
            "dateTime"
            ],
        "orders": ["temperature"]
    }
}

配置一个Node.js节点，用于提取每小时内，设备上报的最高温度。

本示例中，输入的脚本如下所示。

/**
* @param {Object} payload 上一节点的输出
* @param {Object} node 指定某个节点的输出
* @param {Object} query 服务流第一个节点的输出
* @param {Object} context  { appKey, appSecret }
*/
module.exports = async function(payload, node, query, context) {
     console.log("payload: ", payload);

     let  result = {};
     result.index = payload.length - 1;
     result.maxTemperature = payload[result.index].temperature;
     result.id = payload[result.index].id;
     result.deviceName = payload[result.index].deviceName;
     result.dateTime = payload[result.index].dateTime;
     return result;
}

再配置一个云数据库RDS节点，用于将Node.js处理后的数据存入数据表Maxtemperature。

本示例中，输入的参数如下所示。

{
    "table": "Maxtemperature",
    "rows": [{
            "id": "{{payload.id}}",
            "deviceName": "{{payload.deviceName}}",
            "dateTime": "{{payload.dateTime}}",
            "maxTemperature": "{{payload.maxTemperature}}"
    }]
}

单击部署，部署服务。
单击启动，启动服务。
单击调试，输入模拟时间，调试服务。

6. 创建一个HTTP接口，用于实现筛选指定时间段的数据。

参照步骤5中的子步骤1和子步骤2，新增一个服务（例如获取温度数据）。
配置一个HTTP请求节点，设置筛选温度数据API的Action名称和请求参数。

本示例中，配置了以下三个请求参数。


参数	类型	是否必需	说明
DeviceName	String	否	调用接口时，传入设备名称，查询指定设备上报的温度数据；不传入设备名称，则返回全部设备的温度数据。
startTime	Int	是	调用接口时，需传入要查询数据的起始时间。
endTime	Int	是	调用接口时，需传入要查询数据的结束时间。

配置一个云数据库RDS节点，用于从数据表Maxtemperature中获取每小时的最高温度数据。

本示例中，输入的参数如下所示。

{
    "table": "maxtemperature",
    "condition": {
        "where": {
            "deviceName": "{{payload.DeviceName}}"
        },
        "columns": [
            "maxTemperature",
            "dateTime"
        ],
        "orders": [
            "dateTime"
        ]
    }
}

配置一个Node.js节点，用于筛选指定时间段内的温度数据。

本示例中，输入的脚本如下所示。

/**
* @param {Object} payload 上一节点的输出
* @param {Object} node 指定某个节点的输出
* @param {Object} query 服务流第一个节点的输出
* @param {Object} context  { appKey, appSecret }
*/
module.exports = async function(payload, node, query, context) {

  console.log("payload: ", payload);

  let length = 0;
  for (let i = 0; i < payload.length; i++) {
      if(parseInt(payload[i].dateTime) >= query.startTime && parseInt(payload[i].dateTime) <= query.endTime) {
          length = length + 1;
      }
  }

  console.log("length", length);

  var result = new Array(length);
  for(let i = 0; i < length ; i++){
      result[i] = new Array(2);
      result[i][0] = "";
      result[i][1] = 0;
  }

  let valid = 0; 
  for(let j = 0 ;j < payload.length ; j++ ){
      if(parseInt(payload[j].dateTime) >= query.startTime && parseInt(payload[j].dateTime) <= query.endTime) {
           result[valid][0] = payload[j].dateTime;
           result[valid][1] = payload[j].maxTemperature;
           valid = valid + 1;
       }
  }

  return result;
}

配置一个HTTP返回节点，输出Node.js节点处理后的数据。

单击部署，部署服务。
单击调试，输入请求参数，调试服务。

7. 三个服务均调试成功后，单击页面右上角的发布按钮，发布服务。

开发可视化茶园监控大屏

您可开发一个Web可视化应用，用于展示和查询指定时间段中，设备上报的每小时内的最高温度。

操作步骤

登录物联网应用开发控制台，在页面左上角选择对应实例后，在左侧导航栏单击应用开发。
您也可登录物联网平台控制台，在左侧导航栏单击相关服务后，单击物联网应用开发模块中的前往使用，进入IoT Studio控制台。
在开发工具模块，单击Web可视化开发。

创建可视化Web应用。

在可视化Web应用开发页面，单击空白应用区域。

在新建Web应用对话框中，设置应用基本信息，单击确认。


参数	描述
应用名称	设置应用名称（例如：茶园监控大屏）。支持中文汉字、英文大小写字母、数字、下划线（_）、连接号（-）和英文圆括号（()）；必须以中文汉字、英文字母或数字开头；长度不超过30个字符（一个中文汉字算一个字符）。
所属项目	选择已创建项目：茶园监控方案。
描述	描述该应用。长度不超过100字符（一个中文汉字算一个字符）。

配置应用页面和标题。
1. 设置页面背景和分辨率，可自定义；配置一个矩形组件，作为其他组件的背景。更多详细配置请参见页面和矩形。
2. 配置一个文字组件，用于展示标题（例如：茶园温度检测）。详细配置请参见文字。

配置选择设备的下拉框。

配置一个文字组件，作为下拉框的标题。

添加一个下拉框组件，配置其样式。下拉框中，显示设备名称。详细配置请参见下拉框。


参数	说明
列表内容	选择为设备，表示下拉框中展示设备名称。
选择产品	选择设备所属的产品。本案例选择：温度检测器。下拉框中，展示该产品下的设备名称。
默认值	可选设置。指定选项或始终选择列表第一项为默认项。

选择配置栏中的交互，单击新增交互。
选择事件为值改变；动作为赋值给变量，单击管理变量。
单击新增变量，新增一个名称为DeviceName的变量。
返回交互页面，单击配置 > 赋值，选择value，赋值给变量DeviceName。
单击确定，完成交互动作配置。

配置时间组件，用于设置待查询数据所属的起始时间。
1. 配置一个文字组件，作为时间组件的标题。
2. 配置时间组件样式。时间单位选择为秒。详细配置请参见时间。
3. 配置交互动作。
  创建一个变量startTime，并配置通过值改变事件，触发交互动作，赋值给变量。详细操作指导请参见步骤：配置选择设备的下拉框。
参照上一步骤，再配置一个时间组件，用于设置待查询数据所属的结束时间，并配置交互动作。
交互动作：值改变事件，触发交互动作，赋值给变量endTime。
配置一个折线图组件，用于展示温度数据。
下文有关折线图组件的详细配置，请参见折线图。
1. 配置一个文字组件，作为折线图组件的标题。
2. 添加折线图组件，调整组件在页面的位置。
3. 配置折线图组件的数据源为已创建的HTTP接口（例如：获取温度数据），请求参数值设置为前面创建的变量。接口详情请参见开发获取温度数据的服务。
  说明如果接口返回数据不满足组件的数据格式要求，需将其转换为组件需要的数据格式。转换方法请参见数据过滤器。
4. 为折线图配置展示数据，完成配置。
  您可根据实际需要配置折线图的展示样式。
5. 为结束时间的组件，配置交互动作2：值改变事件，触发交互动作，刷新折线图组件。
单击顶部栏中的保存按钮，保存应用配置。