基于 IoT物联网 + 表格存储DB + DataV 搭建实时环境监控大屏

简介: 基于 IoT物联网 + 表格存储DB + DataV 搭建实时环境监控大屏

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

少啰嗦,先看效果。
image.png
部署后效果

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

技术架构如下:
image.png

   2.IoT 物联网开发   

2.1  创建产品和注册设备

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

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

2.2  配置云产品流转

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

编写数据处理 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"

数据转发:
image.png

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 数据表,其中以 deviceNametime 为主键列,如下图:
image.png

3.2  实时存储的环境数据

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

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

4.1  添加数据源

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

4.2  搭建大屏页面

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

4.3  发布实时监控大屏

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

往期推荐

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

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
1天前
|
传感器 监控 安全
物联网技术在智能家居安全监控中的应用
物联网技术在智能家居安全监控中的应用
|
1天前
|
传感器 数据采集 存储
物联网技术在智能环境监测中的部署与优化
物联网技术在智能环境监测中的部署与优化
|
9月前
|
传感器 监控 数据可视化
手把手教你用IoT设备监控家庭环境数据
本实验带您体验如何通过六合一传感器(温度、湿度、二氧化碳、PM2.5、PM10、甲醛)实现家庭环境数据实时采集,并搭建可视化大屏实时监控。
336 0
|
1月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
186 0
|
1月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
130 0
|
1月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
364 1
|
1月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
208 2
react+datav+echarts实现可视化数据大屏
|
1月前
|
Prometheus 监控 Cloud Native
助力工业物联网,工业大数据之服务域:服务器性能监控Prometheus及项目总结【三十五】
助力工业物联网,工业大数据之服务域:服务器性能监控Prometheus及项目总结【三十五】
44 1
|
1月前
|
数据采集 监控 物联网
物联网时代的电脑行为监控软件:代码实现与设备连接
随着物联网技术的飞速发展,电脑行为监控软件在日常生活和商业领域中变得愈发重要。这种软件通过对电脑用户行为的监测,提供了有益的数据,有助于改善用户体验、增强安全性,甚至在一些场景中实现自动化操作。本文将探讨物联网时代的电脑行为监控软件的代码实现与设备连接,并重点介绍监控到的数据如何自动提交到网站。
293 0
|
9月前
|
小程序 JavaScript 物联网
搭建IoT小程序开发环境,创建一个应用
通过实验,了解阿里云IoT小程序应用的开发调试环境,以及如何创建新的应用并在PC模拟器上进行预览调试。
320 2

相关产品

  • 物联网平台