基于 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 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
7月前
|
关系型数据库 物联网 PostgreSQL
沉浸式学习PostgreSQL|PolarDB 11: 物联网(IoT)、监控系统、应用日志、用户行为记录等场景 - 时序数据高吞吐存取分析
物联网场景, 通常有大量的传感器(例如水质监控、气象监测、新能源汽车上的大量传感器)不断探测最新数据并上报到数据库. 监控系统, 通常也会有采集程序不断的读取被监控指标(例如CPU、网络数据包转发、磁盘的IOPS和BW占用情况、内存的使用率等等), 同时将监控数据上报到数据库. 应用日志、用户行为日志, 也就有同样的特征, 不断产生并上报到数据库. 以上数据具有时序特征, 对数据库的关键能力要求如下: 数据高速写入 高速按时间区间读取和分析, 目的是发现异常, 分析规律. 尽量节省存储空间
604 1
|
5天前
|
存储 安全 物联网
使用 Java 进行物联网(IoT)应用开发
【4月更文挑战第19天】Java,凭借其跨平台特性和丰富库,成为物联网开发热门选择。开发者利用Java进行物联网应用开发,可实现设备连接、数据处理、数据库管理及安全保障。熟悉Java基础、物联网知识、数据通信和数据库管理是必备技能。利用MQTT客户端、数据存储框架和可视化工具能提升开发效率。随着物联网发展,Java在该领域的影响力将持续增强。
|
4月前
|
传感器 物联网 5G
物联网的通信技术以及Wi-Fi、一键配网技术、BLE、GPRS(2G)、LTE-Cat1 、NB-IoT简介
物联网的一个重要的特点是接入了网络,因此这些设备才能将传感器采集的数据上传到云平台,然后根据平台对数据的分析做出反应。而这种接入网络的技术,就是通信技术,是物联网的基础之一。通信的方式可以分为有线和无线两种方式,因为有线通信的成本较高,无线通信技术在物联网中应用比较广泛。
104 1
|
7月前
|
消息中间件 传感器 监控
IoT企业物联网平台,数据服务开发实战
IoT企业物联网平台开发实战
314 0
|
1月前
|
消息中间件 存储 Cloud Native
深度剖析 RocketMQ 5.0,IoT 消息:物联网需要什么样的消息技术?
本文来学习一个典型的物联网技术架构,以及在这个技术架构里面,消息队列所发挥的作用。在物联网的场景里面,对消息技术的要求和面向服务端应用的消息技术有什么区别?学习 RocketMQ 5.0 的子产品 MQTT,是如何解决这些物联网技术难题的。
90814 4
|
7月前
|
传感器 监控 数据可视化
手把手教你用IoT设备监控家庭环境数据
本实验带您体验如何通过六合一传感器(温度、湿度、二氧化碳、PM2.5、PM10、甲醛)实现家庭环境数据实时采集,并搭建可视化大屏实时监控。
303 0
|
3月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
105 0
|
3月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
|
3月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
266 1
|
3月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
153 2
react+datav+echarts实现可视化数据大屏

相关产品

  • 物联网平台