OneNET物联网温湿度网页数据展示

前言

OneNET提供了内部的数据可视化展示，然而样式与格式比较固定，配置比较复杂，最主要是好多的功能不开通VIP会员无法使用；所以本文使用OneNET的API开放接口实现数据的网页前端展示，展示效果如下图所示。

一、视频教程

二、环境准备

网页空间

网页空间需要支持PHP文件的运行，一般网页空间都支持PHP的运行

网页空间可以使用服务器或者虚拟主机，推荐使用虚拟主机
测试类型虚拟主机价格一般在 5元/月左右！
购买虚拟主机请务必选择 HK ；否则不备案无法使用

购买：
不建议在阿里云、腾讯云购买，原因是价格比较高而且操作比较麻烦
如果不知道在哪里购买，请看下面的导航站，在 网络资源-虚拟主机
https://exp.tao-space.top/

域名

需要准备一个可用的域名

购买：
推荐在西部数码中购买，登录注册比较简单

三、功能简介

本网页程序实现了与 OneNET API 的数据对接，使使用OneNET MQTT/HTTP等多协议设备上传的数据（温度、湿度）可以直观的展示在网页上，并且可以监测到设备的实时在线状态；您可以对网页上的阈值进行设置，当温度/湿度超过阈值时网页会通过背景闪烁、指针变红和声音报警（手动开启）。当您第一次访问时会要求您填写设备的OneNET信息，如下图所示，填写后即可正常使用！

四、工作流程图

物理模型需要在OneNet中配置，根据步骤来即可

报警数据会存储到云服务器
当从OneNet读取到的数值大于报警值时触发报警

五、物理模型

名称	符号(*)	类型	备注
温度	temp	int/float
湿度	humi	int/float

带有 * 的内容不可随意修改，否则会导致程序无法正常运行
此处的物理模型需要在OneNet中进行配置，下面有详细说明！

六、OneNET配置方法

1.登录/注册 OneNET 平台

OneNET 物联网平台免费物联网开放平台

2.创建产品

①产品开发

②创建产品

③配置信息

④创建完成

3.添加设备

①设备管理

②添加设备

③设备信息

④添加完成

4.信息获取

①设备详情

②信息获取

成功获取设备名称、产品ID、设备密钥
设备名称与产品ID 可以直接填写至程序中！

5.Token生成

下载 OneNET 官方提供的 Token生成工具：点击下载

若无法下载可以到官网下载
下载链接：https://open.iot.10086.cn/college/video/onenet-portal/2024-04-19/17134946071850.exe
官方页面：https://open.iot.10086.cn/doc/v5/fuse/detail/1487

参数配置：
res：products/{产品id}/devices/{设备名}
et：1893427200    //时间戳（当前时间：2030-01-01 00:00:00） 
                  //时间戳转换网站：https://tool.chinaz.com/tools/unixtime.aspx
key：设备密钥

对应到我们的产品：
res：products/7v59QJTl1T/devices/test1
et：1893427200
key：NE5tdHZ5NkRoblhZb1J3ejRBdmhZV3hSb25xRWJtWXc=

生成信息：
Token生成：version=2018-10-31&res=products%2F7v59QJTl1T%2Fdevices%2Ftest1&et=1893427200&method=md5&sign=ToUauGiwKgtH7S%2BU27CeXA%3D%3D