通过使用物联网应用开发（IoT Studio）平台的Web可视化开发和业务逻辑开发工具，开发一个茶园的环境监控大屏。应用用户可在监控大屏中，查看在指定时间内，设备上报的温度值折线图。
设计思路
- 先在业务逻辑开发工作台，创建三个服务，分别是 ：
- 一个设备触发服务：用于获取温度探测器上报的温度数据，并存储到云数据库RDS版MySQL数据表中。
- 一个定时触发服务：用于每个整点统计前一小时的最高温度数据，并存储到另一个云数据库RDS版MySQL数据表中。
- 一个HTTP接口：用于从RDS数据库中，筛选出指定时间段内，每小时的最高温度数据。
- 使用Web可视化开发工作台，开发一个Web前端应用。用于调用HTTP接口，获取指定时间段内，每小时的最高温度数据，并展示在折线图中。
监控大屏如下图。
创建项目和产品
在物联网应用开发（IoT Studio）上创建物联网开发项目，并为项目导入或创建温度监测器产品和设备。后续将在该项目下，创建业务逻辑应用和Web应用。
创建项目
- 登录物联网应用开发控制台，在页面左上角选择对应实例后，在左侧导航栏单击项目管理。
您也可登录物联网平台控制台，在左侧导航栏单击相关服务后，单击物联网应用开发模块中的前往使用，进入IoT Studio控制台。
- 在项目管理页，单击新建项目。
- 在新建项目页，鼠标移动至新建空白项目区域，单击创建空白项目。
- 在新建空白项目对话框，配置项目名称（例如茶园监控方案）和描述信息。
- 单击确认。
关联已有产品和设备
若您已创建了产品和设备，且已为产品定义了物模型，直接关联产品和设备即可。
- 在项目管理页面的项目列表中，找到目标项目（茶园监控方案），单击项目卡片。
- 在左侧导航栏单击产品。
- 在产品页面，单击产品列表左上方的关联物联网平台产品。
- 在关联物联网产品面板中，选中待关联产品的复选框。
本示例中关联温度检测器产品及设备。
- 选中关联产品同时关联其下所有设备的复选框。
- 单击确定。
您可在该项目的产品页面的产品列表中查看到关联的产品。
新建产品和设备
若您还未创建相应产品，需先创建产品，并为产品定义物模型。
- 在项目管理页面的项目列表中，找到目标项目，单击项目卡片。
- 在项目页的左侧导航栏，单击产品 > 创建产品。本示例为产品命名为温度监测器，选择自定义品类，其他参数使用默认值。
参数说明的更多信息，请参见参数说明表。
- 单击确认。
产品创建成功后，回到产品页面，可在产品列表中查看到已创建的新产品。
- 在产品页面产品列表中，单击产品对应的查看操作按钮。
- 在产品详情页，单击功能定义页签，再单击编辑草稿，选择添加自定义功能。
本示例添加以下自定义属性。具体操作，请参见单个添加物模型。
功能名称 标识符 数据类型 取值范围 单位 读写类型 温度 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数据表中。
- 切换到服务列表页面，单击服务列表右侧的添加图标
。
- 在业务逻辑开发页面，创建并设置定时触发服务。
- 配置一个定时触发节点，用于每整点触发一次服务。
- 配置一个云数据库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字符（一个中文汉字算一个字符）。
- 在可视化Web应用开发页面，单击空白应用区域。
- 配置应用页面和标题。
- 配置选择设备的下拉框。
- 配置一个文字组件，作为下拉框的标题。
- 添加一个下拉框组件，配置其样式。下拉框中，显示设备名称。详细配置请参见下拉框。
参数 说明 列表内容 选择为设备，表示下拉框中展示设备名称。 选择产品 选择设备所属的产品。本案例选择：温度检测器。下拉框中，展示该产品下的设备名称。 默认值 可选设置。指定选项或始终选择列表第一项为默认项。 
- 选择配置栏中的交互，单击新增交互。
- 选择事件为值改变；动作为赋值给变量，单击管理变量。
- 单击新增变量，新增一个名称为DeviceName的变量。
- 返回交互页面，单击配置 > 赋值，选择value，赋值给变量DeviceName。
- 单击确定，完成交互动作配置。
- 配置时间组件，用于设置待查询数据所属的起始时间。
- 配置一个文字组件，作为时间组件的标题。
- 配置时间组件样式。时间单位选择为秒。详细配置请参见时间。
- 配置交互动作。
创建一个变量startTime，并配置通过值改变事件，触发交互动作，赋值给变量。详细操作指导请参见步骤：配置选择设备的下拉框。
- 参照上一步骤，再配置一个时间组件，用于设置待查询数据所属的结束时间，并配置交互动作。
交互动作：值改变事件，触发交互动作，赋值给变量endTime。
- 配置一个折线图组件，用于展示温度数据。
下文有关折线图组件的详细配置，请参见折线图。
- 配置一个文字组件，作为折线图组件的标题。
- 添加折线图组件，调整组件在页面的位置。
- 配置折线图组件的数据源为已创建的HTTP接口（例如：获取温度数据），请求参数值设置为前面创建的变量。接口详情请参见开发获取温度数据的服务。
说明 如果接口返回数据不满足组件的数据格式要求，需将其转换为组件需要的数据格式。转换方法请参见数据过滤器。
- 为折线图配置展示数据，完成配置。
您可根据实际需要配置折线图的展示样式。
- 为结束时间的组件，配置交互动作2：值改变事件，触发交互动作，刷新折线图组件。
- 单击顶部栏中的保存按钮，保存应用配置。
执行结果
- 单击顶部栏中的预览按钮，预览应用。
- 单击发布按钮，发布应用。
1639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
