物联网源码教程:新手必看的保姆级实战项目,附完整可运行源码

物联网(IoT)入门的核心是理解 “感知层 – 网络层 – 应用层” 的基础架构,而温湿度监控系统是覆盖全流程、硬件成本低、代码逻辑清晰的经典实战项目。本文将从硬件选型、原理讲解、代码实现到最终运行,手把手带新手完成开发,所有源码均可直接复用。

一、项目整体框架

本项目实现 “环境温湿度采集→WiFi 传输→云端存储→Web 页面展示” 的全流程,核心架构分为 3 层:

 

  1. 感知层:通过温湿度传感器(DHT11)采集环境数据;
  2. 网络层:通过 ESP8266 WiFi 模块将数据发送到云端平台;
  3. 应用层:通过云端平台存储数据,并在 Web 页面实时展示温湿度曲线。

 

项目目标:10 分钟内完成硬件接线,30 分钟内调试通代码,最终实现手机 / 电脑实时查看环境温湿度。

二、硬件选型(新手友好,总成本≤50 元)

选择性价比高、资料丰富的入门级硬件,避免因硬件复杂劝退:

 

硬件模块核心作用参考价格新手优势
ESP8266(NodeMCU)核心主控,负责采集数据 + WiFi 联网25 元自带 USB,无需额外烧录器,支持 Arduino 编程
DHT11 传感器采集环境温度(0-50℃)和湿度(20%-90% RH)5 元单总线通信,接线简单,数据稳定
杜邦线(公对公)连接硬件模块3 元可随意插拔,方便调试
Micro USB 数据线给 ESP8266 供电 + 烧录代码自备手机充电线即可复用

 

注意:ESP8266 建议选 “NodeMCU” 版型,自带 CH340 驱动芯片,无需额外安装复杂驱动。

三、前期准备(2 步搞定环境搭建)

1. 硬件接线(3 根线搞定,零错误)

ESP8266 与 DHT11 的接线逻辑极其简单,按以下对应关系连接,正负极千万不要接反(会烧毁传感器):

 

DHT11 引脚ESP8266 引脚接线说明
VCC(+)3.3V传感器供电(必须 3.3V,5V 可能烧毁)
GND(-)GND接地
DATA(中)D4(GPIO2)数据传输引脚

 

接线示意图
DHT11 的 VCC → ESP8266 的 3.3V;DHT11 的 GND → ESP8266 的 GND;DHT11 的 DATA → ESP8266 的 D4。

2. 软件环境搭建(Arduino IDE + 驱动)

ESP8266 支持 Arduino 编程,新手无需学习复杂的嵌入式语法:

 

  1. 安装 Arduino IDE:从Arduino 官网下载对应系统的 IDE(Windows/Mac 均支持),傻瓜式安装。
  2. 安装 ESP8266 开发板支持
    打开 Arduino IDE → 点击「文件」→「首选项」→「附加开发板管理器网址」,输入:http://arduino.esp8266.com/stable/package_esp8266com_index.json,点击 “确定”。
    再点击「工具」→「开发板」→「开发板管理器」,搜索 “esp8266”,安装最新版本(约 2 分钟)。
  3. 安装 DHT11 库
    点击「项目」→「加载库」→「管理库」,搜索 “DHT sensor library”,安装 Adafruit 出品的库(新手必用稳定库)。
  4. 安装 CH340 驱动(若 USB 连接无反应):
    若 ESP8266 插电脑后,IDE 的「工具」→「端口」无选项,需安装CH340 驱动(根据系统选 32/64 位)。

四、核心代码实现(附完整源码 + 注释)

本项目代码分为两部分:ESP8266 采集 + 上传代码 和 云端 Web 展示代码。我们选用国内免费云端平台 “OneNet”(无需自己搭建服务器,新手友好)。

第一步:OneNet 云端配置(5 分钟搞定)

  1. 注册OneNet 账号,登录后进入「控制台」→「产品服务」→「多协议接入」→「HTTP」→「添加产品」:

 

  • 产品名称:WiFi 温湿度监控
  • 行业类别:智能家居
  • 设备类型:温湿度传感器
    点击 “确定”,记录产品的「产品 ID」。

 

  1. 进入产品详情页,点击「设备管理」→「添加设备」,记录设备的「设备 ID」和「鉴权信息(APIKey)」。

第二步:ESP8266 代码(可直接复制运行)

将以下代码复制到 Arduino IDE,修改 3 处关键配置(WiFi 名称、密码、OneNet 信息),即可烧录到 ESP8266。

 

cpp
运行
// 引入必需的库
#include <ESP8266WiFi.h>    // ESP8266 WiFi库
#include <DHT.h>           // DHT11传感器库

// ---------------------- 【需手动修改的配置】 ----------------------
const char* WIFI_SSID = "你的WiFi名称";    // 家里/公司的WiFi名称
const char* WIFI_PASS = "你的WiFi密码";    // WiFi密码
const char* ONENET_API_KEY = "你的设备APIKey"; // OneNet设备鉴权信息
const char* ONENET_DEVICE_ID = "你的设备ID";  // OneNet设备ID
const char* ONENET_PRODUCT_ID = "你的产品ID"; // OneNet产品ID
// -----------------------------------------------------------------

// 硬件引脚定义(DHT11接D4引脚)
#define DHTPIN D4
#define DHTTYPE DHT11  // 传感器类型为DHT11

// 初始化对象
DHT dht(DHTPIN, DHTTYPE);
WiFiClient client;

// OneNet上传地址(固定,无需修改)
const char* host = "api.heclouds.com";
const int port = 80;

void setup() {
  Serial.begin(115200);  // 初始化串口(用于调试,波特率115200)
  dht.begin();           // 初始化DHT11传感器
  
  // 连接WiFi
  connectWiFi();
}

void loop() {
  // 若WiFi断开,自动重连
  if (WiFi.status() != WL_CONNECTED) {
    connectWiFi();
  }

  // 1. 读取温湿度数据(DHT11建议每隔2秒读一次,避免数据错误)
  float humidity = dht.readHumidity();    // 读取湿度(%RH)
  float temperature = dht.readTemperature(); // 读取温度(℃)

  // 2. 校验数据是否有效(DHT11可能读取失败,需过滤)
  if (isnan(humidity) || isnan(temperature)) {
    Serial.println("读取DHT11数据失败,请检查接线!");
    delay(2000);
    return;
  }

  // 3. 打印数据到串口(调试用)
  Serial.print("湿度: ");
  Serial.print(humidity);
  Serial.print("%  温度: ");
  Serial.print(temperature);
  Serial.println("℃");

  // 4. 上传数据到OneNet
  uploadToOneNet(temperature, humidity);

  delay(5000);  // 每隔5秒上传一次数据
}

// 【函数1:连接WiFi】
void connectWiFi() {
  Serial.print("正在连接WiFi: ");
  Serial.println(WIFI_SSID);
  
  WiFi.begin(WIFI_SSID, WIFI_PASS);  // 启动WiFi连接
  
  // 等待连接成功(超时10秒)
  int count = 0;
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    count++;
    if (count > 20) {
      Serial.println("WiFi连接失败,请检查名称和密码!");
      break;
    }
  }
  
  // 连接成功提示
  if (WiFi.status() == WL_CONNECTED) {
    Serial.println("\nWiFi连接成功!IP地址: ");
    Serial.println(WiFi.localIP()); // 打印ESP8266的IP地址
  }
}

// 【函数2:上传数据到OneNet】
void uploadToOneNet(float temp, float humi) {
  // 1. 连接OneNet服务器
  if (!client.connect(host, port)) {
    Serial.println("连接OneNet失败!");
    return;
  }

  // 2. 构造上传数据格式(OneNet要求的JSON格式)
  String data = "{\"temp\":" + String(temp) + ",\"humi\":" + String(humi) + "}";
  
  // 3. 构造HTTP请求头(固定格式,只需替换APIKey/DeviceID)
  String httpRequest = "POST /devices/" + String(ONENET_DEVICE_ID) + "/datapoints HTTP/1.1\r\n";
  httpRequest += "api-key: " + String(ONENET_API_KEY) + "\r\n";
  httpRequest += "Host: api.heclouds.com\r\n";
  httpRequest += "Content-Length: " + String(data.length()) + "\r\n";
  httpRequest += "Connection: close\r\n\r\n";
  httpRequest += data;

  // 4. 发送请求
  client.print(httpRequest);
  Serial.println("数据上传中: " + data);

  // 5. 读取OneNet响应(调试用)
  delay(1000);
  String response = "";
  while (client.available()) {
    response += char(client.read());
  }
  Serial.println("OneNet响应: " + response);

  // 6. 断开连接
  client.stop();
}

第三步:Web 页面展示代码(可视化温湿度)

OneNet 自带数据展示功能,但我们可以用简单的 HTML+JavaScript 实现自定义页面(复制到记事本,改后缀为.html即可打开):

 

html
预览
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WiFi温湿度监控</title>
  <style>
    body { font-family: Arial; text-align: center; margin-top: 50px; }
    .data { font-size: 30px; margin: 20px 0; }
    .title { font-size: 24px; color: #333; }
  </style>
</head>
<body>
  <div class="title">实时温湿度监控</div>
  <div class="data">温度: <span id="temp">--</span></div>
  <div class="data">湿度: <span id="humi">--</span> %RH</div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <div style="width: 80%; margin: 50px auto;"><canvas id="chart"></canvas></div>

  <script>
    // 替换为你的OneNet信息
    const API_KEY = "你的设备APIKey";
    const DEVICE_ID = "你的设备ID";
    const PRODUCT_ID = "你的产品ID";

    // 初始化图表
    const ctx = document.getElementById('chart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [], // 时间轴
        datasets: [
          { label: '温度(℃)', data: [], borderColor: 'red', tension: 0.1 },
          { label: '湿度(%RH)', data: [], borderColor: 'blue', tension: 0.1 }
        ]
      },
      options: { scales: { x: { title: { display: true, text: '时间' } } } }
    });

    // 定时获取数据(每5秒一次)
    setInterval(getData, 5000);

    // 获取OneNet数据
    function getData() {
      fetch(`http://api.heclouds.com/devices/${DEVICE_ID}/datapoints?limit=1`, {
        headers: { "api-key": API_KEY }
      })
      .then(res => res.json())
      .then(data => {
        if (data.errno === 0) {
          // 解析数据
          const temp = data.data.datapoints[0].value.temp;
          const humi = data.data.datapoints[0].value.humi;
          const time = new Date(data.data.datapoints[0].at).toLocaleTimeString();

          // 更新页面显示
          document.getElementById('temp').innerText = temp;
          document.getElementById('humi').innerText = humi;

          // 更新图表
          chart.data.labels.push(time);
          chart.data.datasets[0].data.push(temp);
          chart.data.datasets[1].data.push(humi);
          // 只保留最近10个数据点
          if (chart.data.labels.length > 10) {
            chart.data.labels.shift();
            chart.data.datasets[0].data.shift();
            chart.data.datasets[1].data.shift();
          }
          chart.update();
        }
      })
      .catch(err => console.log("获取数据失败:", err));
    }

    // 首次加载立即获取数据
    getData();
  </script>
</body>
</html>

五、运行与调试(新手避坑指南)

1. 烧录代码到 ESP8266

  1. ESP8266 插电脑,在 Arduino IDE 中选「工具」→「开发板」→「esp8266 boards」→「NodeMCU 1.0 (ESP-12E Module)」;
  2. 选「工具」→「端口」→ 选带 “USB-SERIAL CH340” 的端口;
  3. 点击 IDE 左上角的 “上传” 按钮(右箭头),等待下方提示 “上传成功”(约 10 秒)。

2. 调试常见问题(99% 新手会遇到)

问题现象排查方案
上传代码时提示 “端口不可用”1. 重新插拔 USB;2. 安装 CH340 驱动;3. 关闭占用端口的软件(如串口助手)
串口打印 “读取 DHT11 失败”1. 检查接线(DATA 是否接 D4,VCC 是否 3.3V);2. 更换 DHT11 传感器
WiFi 连接失败1. 确认 WiFi 名称 / 密码无空格;2. WiFi 需 2.4G(ESP8266 不支持 5G)
OneNet 上传失败1. 检查 APIKey/DeviceID 是否填错;2. 设备是否在 OneNet 在线(控制台查看)

六、项目拓展(进阶方向)

  1. 添加报警功能:当温度>30℃时,ESP8266 控制 LED 灯闪烁(需加 LED 模块,代码加digitalWrite(LED_BUILTIN, LOW));
  2. 手机 APP 查看:OneNet 支持生成 “应用面板”,手机扫码即可查看数据,无需自己写 APP;
  3. 改用蓝牙传输:若无需远程查看,可替换 ESP8266 为 HC-05 蓝牙模块,手机通过蓝牙直接接收数据;
  4. 多传感器扩展:增加光敏电阻(测亮度)、MQ-2 烟雾传感器(测烟雾),代码只需复制 DHT11 的读取逻辑。

七、源码获取与资源

  1. 完整源码包:包含 Arduino 代码、HTML 页面、接线图,可关注【物联网入门站】回复 “温湿度” 获取;
  2. 视频教程:B 站搜索 “ESP8266 温湿度监控”,可看手把手接线 + 调试视频;
  3. 硬件购买:淘宝搜索 “ESP8266 DHT11 套件”,新手建议买带焊接好的套装(避免自己焊引脚)。

 

通过本项目,新手可快速掌握物联网 “传感器采集 – 联网传输 – 云端存储 – 应用展示” 的核心逻辑,后续再学蓝牙、LoRa、MQTT 等协议会更轻松!

购买须知/免责声明
1.本文部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
2.若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
3.如果本站有侵犯、不妥之处的资源,请在网站右边客服联系我们。将会第一时间解决!
4.本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途。
5.本站提供的所有资源仅供参考学习使用,版权归原著所有,禁止下载本站资源参与商业和非法行为,请在24小时之内自行删除!
6.不保证任何源码框架的完整性。
7.侵权联系邮箱:aliyun6168@gail.com / aliyun666888@gail.com
8.若您最终确认购买,则视为您100%认同并接受以上所述全部内容。

海外源码网 源码资讯 物联网源码教程:新手必看的保姆级实战项目,附完整可运行源码 https://moyy.us/20163.html

相关文章