# 零代码搭建物联网监控大屏 #### 概述 物联网解决方案中，作为数据主体的"物"可能数量会非常大，产生的数据已经无法通过传统的数据处理服务进行处理。如何分析与利用这庞大的物联网设备数据对物联网企业来说又是一个新的挑战。 华为云物联网平台提供规则引擎能力，支持将设备上报的数据转发至华为云其他云服务，可实现将海量数据通过对象存储服务（OBS）存储，再由数据可视化服务（DLV）读取数据呈现为可视化报表，实现数据的一站式采集、处理和分析。 #### 前提条件 - 已注册华为云官方账号。未注册可单击[注册页面](https://reg.huaweicloud.com/registerui/public/custom/register.html#/register)完成注册。 - 已完成实名制认证。未完成可在华为云上单击[实名认证](https://account.huaweicloud.com/usercenter/#/accountindex/realNameAuth)完成认证，否则无法使用设备接入功能。 - 已开通设备接入服务。未开通则访问[设备接入服务](https://www.huaweicloud.com/product/iothub.html)，单击"立即使用"后开通该服务。 - 已开通OBS服务。未开通则访问[OBS服务](https://www.huaweicloud.com/product/obs.html)，单击"立即使用"后开通该服务。 - 已开通数据可视化DLV服务。未开通则访问[数据可视化DLV服务](https://www.huaweicloud.com/product/dlv.html)，单击"立即使用"后开通该服务。 #### 示例场景 在本示例中，我们实现下述场景： 设备上报数据到物联网平台，物联网平台将数据以CSV格式存储到对象存储服务（OBS），数据可视化服务(DLV)从OBS文件读取数据并展现为多个维度的报表。 操作步骤如下： 1. 在物联网平台[创建产品和设备]：创建MQTT协议产品、开发产品模型、并注册设备。 2. 在物联网平台进行[数据转发规则配置]：创建数据转发规则，将数据以CSV格式持久化至OBS服务。 3. [数据上报及验证数据是否转发成功]。 4. [配置数据可视化服务（DLV）]：展示OBS中物联网数据。 5. [模拟数据上报及结果验证]：使用设备模拟器上报数据，验证DLV大屏数据实时刷新。 图1示例说明 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001323754388.png "点击放大") 图2整体业务流程图 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001336044142.png "点击放大") #### 创建产品和设备 1. 访问++[设备接入服务](https://www.huaweicloud.com/product/iothub.html)++，单击"立即使用"进入设备接入控制台。 2. 选择左侧导航栏的"产品"，在搜索框中选择新建产品所属的资源空间。 3. 单击左侧的"创建产品"，创建一个基于MQTT协议的产品，填写参数后，单击"确定"。 图3创建产品-MQTT ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001981306829.png "点击放大") 4. 为上一步创建的产品导入产品模型，请参考[导入产品模型](https://support.huaweicloud.com/devg-iothub/iot_02_9995.html#section1)。 5. 选择第3步创建的产品，在该产品下注册设备、请参考[注册单个设备](https://support.huaweicloud.com/usermanual-iothub/iot_01_0031.html)。 ![](https://support.huaweicloud.com/bestpractice-iothub/public_sys-resources/note_3.0-zh-cn.png) 本文中使用的产品模型和设备仅为示例，您可以使用自己的产品模型和设备进行操作。 #### 数据转发规则配置 1. 选择左侧导航栏的"规则\>数据转发"，单击左上角的"创建规则"。 2. 参考下表参数说明，填写规则内容。以下参数取值仅为示例，您可参考++[用户指南](https://support.huaweicloud.com/usermanual-iothub/iot_01_0024.html)++ 创建自己的规则，填写完成后单击"创建规则"。 图4新建属性上报流转规则-数据转发至OBS ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001981503469.png "点击放大") 表1参数说明 | 参数名 | 参数说明 | |:---|:---| | 规则名称 | 自定义，如iotda-obs。 | | 规则描述 | 自定义，如数据转发至OBS服务。 | | 数据来源 | 选择"设备属性"。 | | 触发事件 | 自动匹配"设备属性上报"。 | | 资源空间 | 和上一步创建的产品所在的资源空间保持一致。 | 3. 单击"设置转发目标"页签，单击"添加"，设置转发目标。 图5新建转发目标-转发至OBS-CVS格式 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000002356561465.png "点击放大") 参考下表参数说明，填写转发目标。填写完成后单击"确定"。 表2参数说明 | 参数名 | 参数说明 | |:---|:---| | 转发目标 | 选择"对象存储服务（OBS）" | | 区域 | 选择"对象存储服务"区域。若未授权访问此区域的服务，请根据界面提示，配置云服务访问授权。 | | 存储桶 | 选择桶。若没有，请前往OBS服务++[创建桶](https://support.huaweicloud.com/usermanual-obs/zh-cn_topic_0045829088.html)++。 | | 自定义目录 | 自定义存储数据目录 | | 文件名称 | 自定义存储数据文件名 | | 文件类型 | 选择"CSV" | | 转发字段----目标存储字段 | OBS服务中生成文件和流转数据的对应关系列表 | 本实践中用到的转发字段和转发目标如下： 表3转发字段和转发目标 | 转发字段 | 转发目标 | |:---|:---| | notify_data.header.app_id | appId | | notify_data.header.device_id | DeviceId | | notify_data.body.services\[0\].properties.orderID | orderID | | notify_data.body.services\[0\].properties.area | area | | notify_data.body.services\[0\].properties.orderTime | orderTime | | notify_data.body.services\[0\].properties.goods | goods | | notify_data.body.services\[0\].properties.amount | amount | 示例：如果设备上报的属性如下,需要把"orderID"保存到CSV文件，需要设置转发字段为"notify_data.body.services\[0\].properties.orderID",转发目标为"orderID"。 ``` { "resource" : "device.property", "event" : "report", "event_time" : "20220812T121212Z", "notify_data" : { "header" : { "device_id" : "********", "product_id" : "ABC123456789", "app_id" : "********" }, "body" : { "services" : [ { "service_id" : "order", "properties" : { "orderID" : "0001" }, "event_time" : "20220812T121212Z" } ] } } } ``` 4. 单击"启动规则"，激活配置好的数据转发规则。 图6启动规则-转发至OBS ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001981512781.png "点击放大") #### 数据上报及验证数据是否转发成功 1. 使用MQTT模拟器连接到平台（模拟器使用请参考：[使用MQTT.fx调测](https://support.huaweicloud.com/devg-iothub/iot_01_2127.html)）。 2. 使用模拟器进行属性上报(参考：[设备属性上报](https://support.huaweicloud.com/api-iothub/iot_06_v5_3010.html))。 上报内容如下： ``` { "services": [{ "service_id": "order", "properties": { "orderID": "0000001", "area": "南山区", "orderTime": "20220815T121215Z", "goods": "商品01", "amount": 30.5 }, "event_time": "20220815T121215Z" } ] } ``` 3. 前往[OBS控制台](https://www.huaweicloud.com/product/obs.html)，查看转发目标设置的文件是否生成。 图7查看OBS桶内文件 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001418623085.png "点击放大") #### 配置数据可视化服务 配置数据可视化服务，新建数据报表视图。 1. 登录华为云官方网站，访问++[数据可视化服务](https://www.huaweicloud.com/product/dlv.html)++。 2. 单击"进入控制台"。 3. 访问DLV控制台"我的数据"页面，单击"新建数据连接"，新建CSV文件数据连接（详情请参考：[新建CSV文件数据连接](https://support.huaweicloud.com/usermanual-dlv/dlv_01_0718.html)）。 ![](https://support.huaweicloud.com/bestpractice-iothub/public_sys-resources/note_3.0-zh-cn.png) 若您未开通DLV服务，可单击"体验试用"获取30天的基础版免费试用。 图8新建数据连接 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001418718105.png "点击放大") 4. 新建CSV文件数据连接中文件来源选择OBS文件，文件路径选择创建规则时指定的转发目标。 图9选择文件来源 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001367958678.png "点击放大") 5. 访问DLV控制台"我的大屏"页面，新建大屏添加并编辑组件实现下图效果(参考：[创建大屏](https://support.huaweicloud.com/usermanual-dlv/dlv_01_0400.html)、[编辑大屏](https://support.huaweicloud.com/usermanual-dlv/dlv_01_0501.html))。也可以通过附件导入大屏（具体操作步骤请参考：[导入导出大屏](https://support.huaweicloud.com/usermanual-dlv/dlv_01_0008.html)，[自动售货机监控](https://developer.obs.cn-north-4.myhuaweicloud.com/template/自动售货机监控.zip)）。 图10大屏效果展示 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001336961588.png "点击放大") 6. 选择上一步创建或导入的大屏进入编辑页面，分别设置每个组件的数据源。 ![](https://support.huaweicloud.com/bestpractice-iothub/public_sys-resources/caution_3.0-zh-cn.png) 通过附件导入大屏时，各个组件的的数据转换器已经设置完成，只需要修改数据源为自己的CSV文件，即可完成大屏开发。 如果需要手动开发组件， 下面以"订单金额"为例，演示如何将CSV文件中数据展示到DLV。 7. 选中"订单金额"对应的数字翻牌组件，在右侧属性窗口，切换到"数据"页签，选择数据源类型为"CSV"。 图11添加数据源 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001418641605.png "点击放大") 8. 选择[步骤4]创建的数据连接。 图12选择已有数据连接 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001367962094.png "点击放大") 9. 切换到"数据转换器"页签，新建一个名称为"sumAmount"的数据转换器,编写转换器代码(参考：[使用数据转换器](https://support.huaweicloud.com/usermanual-dlv/dlv_01_0754.html) )。 图13添加数据转换器 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001387601533.png "点击放大") 转换器源码： ``` var sumAmount =0.0; for(var i = data.length-1; i >=0; i--){ sumAmount +=Number(data[i].amount); } return[{ "name":"", "value": sumAmount }]; ``` 10. 选择组件，更改数据转换器为"sumAmount"，单击"更新查询"，就可以看到数据刷新到组件。（这样"订单金额"组件就完成开发，按照这个方法即可完成其他组件的开发。） 图14查询更新数据 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001387321645.png "点击放大") 11. 大屏制作完成后单击右上角的"预览"或"发布"按钮即可完成大屏的预览和发布。 #### 模拟数据上报及结果验证 1. 使用MQTT模拟器连接到平台（模拟器使用请参考：[使用MQTT.fx调测](https://support.huaweicloud.com/devg-iothub/iot_01_2127.html)）。 2. 使用模拟器进行属性上报(参考：[设备属性上报](https://support.huaweicloud.com/api-iothub/iot_06_v5_3010.html))。 上报内容如下： ``` { "services": [{ "service_id": "order", "properties": { "orderID": "0000002", "area": "罗湖区", "orderTime": "20220815T121215Z", "goods": "商品02", "amount": 30.5 }, "event_time": "20220815T121215Z" } ] } ``` 3. 打开数据可视化服务查看数据是否刷新。 图15结果查看 ![](https://support.huaweicloud.com/bestpractice-iothub/figure/zh-cn_image_0000001387481573.png "点击放大")