今天给大家带来基于阿里云 IoT 物联网平台 + Tablestore 表格存储数据库 + DataV大屏 三大云产品组合搭建实时环境监控大屏的开发实战。

少啰嗦，先看效果。
部署后效果

    1.技 术 架 构   
我们在室内每层部署 4 个温湿度传感器，实时采集数据，每10秒发送到阿里云 IoT 物联网平台，通过规则引擎写入 表格存储 Tablestore数据库。在DataV大屏工作台，创建可视化大屏，实时展示室内温湿度变化曲线。

技术架构如下：

   2.IoT 物联网开发   

2.1  创建产品和注册设备

首先，我们登陆 IoT 物联网平台的控制台，创建产品 温湿度环境监测器，并在 功能定义中添加 温度和湿度两个属性，如下图：

然后，我们在产品下注册一个设备，获取 设备身份证书，用于设备和IoT云平台建立MQTT长连接时的身份认证。

2.2  配置云产品流转

1.4.配置规则引擎，实时流转数据到 TSDB中

编写数据处理 SQL：
完整 SQL 参考：

SELECT 
deviceName() as deviceName, 
timestamp('yyyy-MM-dd HH:mm:ss') as time, 
attribute('floor') as floor, 
items.temperature.value as temperature, 
items.humidity.value as humidity 
FROM 
"/a1kRdXDgN0v/+/thing/event/property/post"

数据转发：

2.3  设备端程序脚本

我们以 Node.js 脚本来模拟设备上报温度和湿度，代码如下：

// 依赖mqtt库
const mqtt = require('aliyun-iot-mqtt');
// 设备身份
var options = {
    productKey: "设备 productKey",
    deviceName: "设备 deviceName",
    deviceSecret: "设备 deviceSecret",
    regionId: "cn-shanghai"
};
// 建立连接
const client = mqtt.getAliyunIotMqttClient(options);
//模拟 设备 上报数据（原始报文）
setInterval(function() {
    client.publish(    
      `/sys/${options.productKey}/${options.deviceName}/thing/event/property/post`
      , getPostData()
      );
}, 10 * 1000);
// 模拟 温湿度
function getPostData() {
    const payload = {   
        id: Date.now(),
        version:"1.0", 
        params: {       
            temperature: 10+Math.floor(Math.random() * Math.floor(50)),
            humidity: 10+Math.floor(Math.random() * Math.floor(50))
        },
        method: "thing.event.property.post"
    }
    console.log("payload=[ " + payload + " ]")
    return JSON.stringify(payload);
}

  3.表格存储 Tablestore  

3.1  创建表格存储数据表

我们在表格存储控制台，创建数据库 iotMsg，并创建 iot_thermometer_data 数据表，其中以  deviceName 和  time 为主键列，如下图：

3.2  实时存储的环境数据

当设备启动后，我们就会在数据库中看到实时的温湿度数据，如下图：
   4.DataV 可视化大屏   

设备实时上报数据通过IoT物联网平台实时流转到表格存储数据库后，接下来的工作就是把数据可视化呈现出来，这时就用到了DataV可视化大屏云产品。

4.1  添加数据源

我们进入DataV控制台，在我的数据下， 添加数据源，输入 表格存储实例 iot_data的访问路径和AccessKey身份信息，如下图：

4.2  搭建大屏页面

配置完数据源后，在DataV控制的 我的可视化下面创建一个大屏，根据业务需求添加可视化组件，并为每个组件配置相关的数据源，以及过滤器用来适配数据格式，如下图：

4.3  发布实时监控大屏

当我们完成组件的数据源配置后，就可以发布可视化大屏了。发布后，用户可以通过浏览器访问，如下图：

往期推荐

1、不讲武德，上班摸鱼，监控老板行踪
2、微信小程序 MQTT模拟器
3、自建MQTT集群迁移阿里云IoT实践
4、IoT+TSDB+Quick BI 搭建楼宇环境监控

物联网平台产品介绍详情：

阿里云物联网平台客户交流群