【IoT 毕业设计】Ruff硬件+阿里云IoT+微信小程序构建环境监控系统

0.技术架构

IoT物联网毕业设计实战Ruff开发板，串口连接温湿度传感器DHT11和空气质传感器SDS011，每5分钟采集一次数据，通过MQTT协议发送到阿里云IoT物联网平台，在云的设备影子中写入。微信小程序调用阿里云函数计算FC，读取IoT通过物联网平台设备影子中的数据ECharts仪表空气质量的仪表盘PM2.5指数、温度和湿度值。

如下图所示:

1.硬件设备

实战硬件开发清单如下：

万能淘宝有售

2.阿里云开发

2.1 开发物联网平台

2.1.1.阿里云免费开通IoT物联网云服务：

https://www.aliyun.com/product/iot

2.1.2.创建产品家庭环境监测器，选择自定义类别，直接连接设备：

2.1.3.注册设备，设备未激活。

点击DeviceSecret获取设备身份三元组。

2.1.4.设备将最新传感器数据更新到设备阴影中，并对应通信Topic和Payload格式如下：

通信 Topic： /shadow/update/${ProductKey}/${DeviceName} 数据 Payload： {     "method":"update",     "state":{         "reported":{             "temperature":27,             "humidity":45,             "pm25":23,             "pm10":36         }     },     "version":156768564324 }

2.2 函数计算FC开发

2.2.1.阿里云免费开通函数计算FC云服务:

https://www.aliyun.com/product/fc

2.2.2.创建基于HTTP触发器函数服务：

2.2.3.采用 Nodejs 语言编写函数，调用IoT物联网平台 POP API ：getDeviceShadow获取设备报告的实时数据。

官网文档：

https://help.aliyun.com/document_detail/69953.html

如下：

// 1.结构获取设备影子 API参数 const action = 'GetDeviceShadow'; const params = {     ProductKey: productKey,     DeviceName: deviceName };   //2.发送请求 const response = yield aliyunPopAPIClient.request(action, params); constShadowMessage=JSON.parse(response.ShadowMessage)

3.Ruff 硬件开发

Ruff 是一个支持 JavaScript 开发应用物联网操作系统，为软件开发者提供开放、高效、敏捷的物联网应用开发平台 IoT 应用开发更简单。

整个 Ruff 包括开发系统 Ruff OS、Ruff SDK、Ruff 软件仓库、Ruff Kit 只要你有JavaScript可以使用开发经验 Ruff 开发硬件应用。

3.1.传感器驱动依赖：

3.2.读取温湿度和空气质量传感器数据：

// 空气质量数据 $('#air').on('aqi', function(error, pm25, pm10) {     if (error) return;          reported.pm25 = pm25;     reported.pm10 = pm10; }); // 温度数据 $('#dht').getTemperature(function(error, temperature) {       if (!error) {         reported.temperature = temperature;     } }); // 湿度数据 $('#dht').getRelativeHumidity(function(error, humidity) {     if (!error) {         reported.humidity = humidity;     } });

3.3.向数据报告 IoT 云：物联网平台：

// 设备身份三元组信息 var options = {     productKey: "替换productKey",     deviceName: "替换deviceName",     deviceSecret: "替换deviceSecret", host:"MQTT接入点域名", };   var updateShadowTopic = "/shadow/update/"   options.productKey   "/"   options.deviceName; // 建立 MQTT 连接 var client = MQTT.createAliyunIotMqttClient(options); var data = {         method: "update",         state: {             reported: reported         },         version: Date.now()     } // 上报数据 client.publish(updateShadowTopic, JSON.stringify(data));

4.微信小程序

4.1.在微信小程序后台配置合法域名:

4.2.微信小程序交互界面开发:

4.3.使用wx.request完成网络请求，获取云设备影子数据：

请求代码如下：

wx.request({       url: 计算函数 HTTP API url',       metod: 'POST',
      data: {
        "deviceName": "设备名", "productKey": "产品code"
      },
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        console.log(res.data)


        wx.hideLoading()
        // 更新到 UI 界面
        updateUI(res.data)
      }
    })

4.4.使用ECharts中的仪表盘组件展示空气质量指数

import * as echarts from '../../ec-canvas/echarts';


function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    backgroundColor: "#f8f8f8",
    color: ["#37A2DA", "#32C5E9", "#67E0E3"],
    series: [{
      name: '空气质量',
      min: 0, 
      max: 500,   
      splitNumber: 10,  
      type: 'gauge',
      detail: {
        formatter: '{value}'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 10,
          shadowBlur: 0,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      data: [{
        value: 80,
        name:'空气质量'
      }],
      splitLine: { 
        show: true, 
        length: 13, 
        lineStyle: { 
          color: '#aaa',
          width: 2,
          type: 'solid'
        }
      },
      title: {
        show: true,
        offsetCenter: [0, 70],
        textStyle: {
          color: '#333',
          fontSize: 15
        }
      },
      pointer: {
        length: '90%',
        width: 6,
        color: 'auto'
      }
    }]
  };
  chart.setOption(option, true);
  return chart;
}


Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

至此，我们基于JavaScript 语言完成了智能家居环境监测IoT应用场景的落地。

---

最后，赠送16元优惠券，加入国内最大IoT物联网开发者社区，获取1000+行业资料。

往期推荐

☞ 中国云计算第一股关停 IoT云服务

☞ 2022年IoT平台趋势：私有化部署

☞ 国内MCU行业发展研究报告

☞ 2021年4G通信模组企业排行

☞ 国内4大 IoT物联网平台选型对比

☞ 云厂商的[IoT物联网平台]不香了吗？