مهندس برمجيات & مطور ويب
  1. مدونتي
  2. أردوينو إلى السحابة

أردوينو إلى السحابة

20 حزيران 2025
الناشر أحمد عثمان

من أردوينو إلى السحابة: مشروع IoT باستخدام ESP32 وMQTT وReact Dashboard

في هذا المقال، سنقوم ببناء نظام إنترنت أشياء متكامل: حيث يقرأ لوح ESP32 بيانات من مستشعر، ويرسلها إلى خادم MQTT، ثم يتم عرض هذه البيانات مباشرة في لوحة تحكم تفاعلية باستخدام React.

1. المتطلبات الأساسية

  • لوحة تطوير ESP32
  • مستشعر حرارة ورطوبة (مثل DHT22 أو BME280)
  • خادم MQTT (محلي مثل Mosquitto أو سحابي مثل HiveMQ)
  • Node.js (اختياري لبناء Backend)
  • تطبيق React لعرض البيانات

2. إعداد ESP32 والمستشعر

قم بتوصيل المستشعر إلى ESP32 (مثلاً: بيانات DHT إلى GPIO 4)، ثم ارفع الكود التالي:

#include <WiFi.h>
#include <PubSubClient.h>
#include <DHT.h>

#define DHTPIN 4
#define DHTTYPE DHT22

const char* ssid = "WIFI_الخاص_بك";
const char* pass = "كلمة_المرور";
const char* mqttServer = "broker.hivemq.com";
int mqttPort = 1883;
const char* mqttTopic = "esp32/sensor";

DHT dht(DHTPIN, DHTTYPE);
WiFiClient espClient;
PubSubClient client(espClient);

void setup() {
  Serial.begin(115200);
  dht.begin();
  WiFi.begin(ssid, pass);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  client.setServer(mqttServer, mqttPort);
}

void loop() {
  if (!client.connected()) {
    while (!client.connect("esp32Client")) {
      delay(500);
    }
  }
  float h = dht.readHumidity();
  float t = dht.readTemperature();
  if (!isnan(h) && !isnan(t)) {
    String payload = "{ \"temp\": " + String(t) + ", \"hum\": " + String(h) + " }";
    client.publish(mqttTopic, payload.c_str());
    Serial.println(payload);
  }
  client.loop();
  delay(5000);
}

3. إعداد خادم MQTT

إذا كنت تستخدم Mosquitto محليًا:

sudo apt update
sudo apt install mosquitto mosquitto-clients
sudo systemctl enable mosquitto
mosquitto_sub -h localhost -t "esp32/sensor"

أو استخدم خادم سحابي مثل HiveMQ Cloud.

4. بناء لوحة تحكم React

ابدأ بإنشاء تطبيق React وتثبيت مكتبة MQTT:

npx create-react-app iot-dashboard
cd iot-dashboard
npm install mqtt

ثم أضف الكود التالي للاشتراك في البيانات:

// src/App.js
import { useState, useEffect } from 'react';
import mqtt from 'mqtt';

function App() {
  const [data, setData] = useState({ temp: 0, hum: 0 });

  useEffect(() => {
    const client = mqtt.connect('ws://test.mosquitto.org:8080');
    client.on('connect', () => {
      client.subscribe('esp32/sensor');
    });
    client.on('message', (topic, message) => {
      setData(JSON.parse(message.toString()));
    });
    return () => client.end();
  }, []);

  return (
    <div className="dashboard">
      <h2>لوحة مستشعر ESP32</h2>
      <p><strong>الحرارة:</strong> {data.temp} °C</p>
      <p><strong>الرطوبة:</strong> {data.hum} %</p>
    </div>
  );
}

export default App;

5. (اختياري) بناء API خلفية بـ Node.js

لأرشفة البيانات أو مشاركتها يمكنك استخدام هذا الكود:

npm install express body-parser
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
let readings = [];
app.post('/api/data', (req, res) => {
  readings.push(req.body);
  res.sendStatus(200);
});
app.get('/api/data', (req, res) => res.json(readings));
app.listen(3002, () => console.log('API تعمل على المنفذ 3002'));

6. نصائح للنشر والتوسعة

  • استخدم بروتوكول MQTT الآمن (WSS)
  • انشر لوحة التحكم على Vercel أو Netlify
  • أضف طبقة مصادقة لحماية البيانات (JWT أو OAuth)
  • استخدم قاعدة بيانات زمنية مثل InfluxDB مع Grafana لعرض البيانات

الخلاصة

الآن أصبح لديك نظام إنترنت أشياء متكامل: من المستشعر إلى السحابة إلى المتصفح. يمكنك الآن توسيع المشروع ليشمل عدة أجهزة، وتخزين البيانات، وإرسال تنبيهات، أو بناء لوحة تحكم متقدمة.

  • 0 تعليق

أضف تعليق