สร้าง Web Server Dashboard ควบคุม Relay ด้วย ESP32

เนื้อหาในบทความ

ภาพรวมโปรเจกต์

ในยุค IoT (Internet of Things) การควบคุมอุปกรณ์ไฟฟ้าผ่านอินเทอร์เน็ตเป็นสิ่งที่นิยมมาก และ ESP32 เป็นไมโครคอนโทรลเลอร์ที่เหมาะสมที่สุดสำหรับงานนี้เพราะมี WiFi และ Bluetooth ในตัว ราคาถูก และใช้งานง่าย

สิ่งที่คุณจะได้เรียนรู้

✅ สร้าง Web Server บน ESP32 ด้วย Arduino IDE
✅ ออกแบบ Dashboard สวยงามด้วย HTML/CSS/JavaScript
✅ ควบคุม Relay ได้ถึง 4 ช่องสัญญาณ
✅ เชื่อมต่อกับ CynoIoT Platform สำหรับการควบคุมระยะไกล
✅ ประยุกต์ใช้กับอุปกรณ์ไฟฟ้าในบ้าน (ไฟ ปลั๊ก มอเตอร์)

โปรเจกต์นี้เหมาะสำหรับ

ผู้เริ่มต้นที่ต้องการเรียนรู้ IoT และ Web Server
ผู้ที่ต้องการทำ Home Automation ควบคุมไฟในบ้าน
นักพัฒนาที่ต้องการประยุกต์ ESP32 กับ Web Technologies
โปรเจกต์ Smart Home, Smart Farm, หรือ Industrial IoT

อุปกรณ์ที่ต้องใช้

Hardware

อุปกรณ์	จำนวน	ราคาโดยประมาณ
ESP32 DevKitC (ESP32-WROOM)	1 ตัว	฿120-180
Relay Module 4 ช่อง (5V)	1 ตัว	฿80-150
Breadboard และ Jumper Wires	1 ชุด	฿50-80
Micro USB Cable	1 เส้น	฿30-50
อุปกรณ์ทดสอบ (หลอดไฟ, ปลั๊ก)	ตามต้องการ	-

💡 เลือก Relay Module อย่างไร?

Relay 1 ช่อง: ควบคุมอุปกรณ์เดียว เหมาะสำหรับทดลอง
Relay 2 ช่อง: ควบคุม 2 อุปกรณ์ เช่น ไฟระเบียง + ปั๊มน้ำ
Relay 4 ช่อง: ควบคุมหลายอุปกรณ์ เหมาะกับ Smart Home
Relay 8 ช่อง: ควบคุมอุปกรณ์มากมาย เหมาะกับ Industrial

⚠️ ข้อควรระวัง: Relay 5V ใช้กับ ESP32 ได้ทันที แต่ถ้าเป็น Relay 12V ต้องใช้ External Power Supply และ Transistor

Software

✓ Arduino IDE (เวอร์ชันล่าสุด)
✓ ESP32 Board Package สำหรับ Arduino IDE
✓ Web Browser (Chrome, Firefox, Safari, Edge)
✓ CynoIoT Account (สำหรับ Remote Control - ตัวเลือก)

การต่อสายวงจร

ข้อควรระวัง: ก่อนต่อสาย Relay ไปยังไฟบ้าน 220V AC ให้แน่ใจว่าได้ทดสอบด้วยไฟ 5V DC ก่อน และปิดไฟทั้งหมดขณะต่อสาย AC

การต่อ Relay Module กับ ESP32

Relay Module	ESP32 Pin	หมายเหตุ
VCC	5V	ไฟเลี้ยง Relay 5V
GND	GND	กราวด์ร่วมกัน
IN1	GPIO 26	ควบคุม Relay ช่องที่ 1
IN2	GPIO 27	ควบคุม Relay ช่องที่ 2
IN3	GPIO 14	ควบคุม Relay ช่องที่ 3
IN4	GPIO 12	ควบคุม Relay ช่องที่ 4

แผนผังการต่อสาย (Fritzing Diagram)

ESP32 + 4-Channel Relay Module

ESP32 GPIO 26, 27, 14, 12 → Relay IN1, IN2, IN3, IN4

ESP32 5V → Relay VCC

ESP32 GND → Relay GND

🔌 การต่อ Relay ไปยังอุปกรณ์ไฟฟ้า (220V AC)

⚠️ อันตราย! ไฟบ้าน 220V AC สามารถทำให้ถึงตายได้ หากไม่มั่นใจให้ขอความช่วยเหลือจากช่างไฟ

COM (Common): ต่อเข้ากับสายไฟบ้าน (Phase/L)
NO (Normally Open): ต่อเข้ากับอุปกรณ์ไฟฟ้า (ปกติไม่ต่อกัน)
NC (Normally Closed): ใช้ในกรณีพิเศษ (ปกติต่อกันอยู่แล้ว)

💡 สำหรับมือใหม่แนะนำให้ใช้ NO (Normally Open) เพราะปลอดภัยกว่า เมื่อไม่ได้ใช้งานจะไม่มีไฟไหลผ่านอุปกรณ์

การติดตั้งซอฟต์แวร์

ขั้นตอนที่ 1: ติดตั้ง Arduino IDE

ดาวน์โหลด Arduino IDE จาก arduino.cc
ติดตั้งตามปกติบน Windows, Mac หรือ Linux
เปิด Arduino IDE หลังติดตั้งเสร็จ

ขั้นตอนที่ 2: เพิ่ม ESP32 Board Package

เปิด Arduino IDE ไปที่ File → Preferences
ในช่อง Additional Board Manager URLs ใส่:
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
ไปที่ Tools → Board → Boards Manager
ค้นหา "esp32" และติดตั้ง "esp32 by Espressif Systems"
รอจนติดตั้งเสร็จ (อาจใช้เวลา 5-10 นาที)

ขั้นตอนที่ 3: เลือก Board และ Port

เชื่อมต่อ ESP32 เข้ากับคอมพิวเตอร์ด้วยสาย USB
ไปที่ Tools → Board → esp32 → ESP32 Dev Module
ไปที่ Tools → Port และเลือก COM Port ของ ESP32
บน Windows จะเป็น COM3, COM4 ฯลฯ
บน Mac จะเป็น /dev/cu.usbserial-xxx
บน Linux จะเป็น /dev/ttyUSB0 หรือ /dev/ttyACM0

💡 Tip: ถ้าไม่เห็น Port ให้ติดตั้ง Driver สำหรับ USB-to-Serial Chip (CP2102 หรือ CH340) จากเว็บของผู้ผลิต

โค้ดโปรแกรม ESP32

นี่คือโค้ดที่สมบูรณ์สำหรับ ESP32 Web Server ที่ควบคุม Relay 4 ช่อง พร้อม Dashboard สวยงาม คัดลอกไปวางใน Arduino IDE และอัปโหลดได้เลย

/*
 * ESP32 Web Server - Relay Control Dashboard
 * ควบคุม Relay 4 ช่องผ่าน Web Browser
 * รองรับ Static IP และ Auto-Reconnect
 *
 * Hardware: ESP32 + 4-Channel Relay Module
 * Author: CynoIoT
 * Date: March 2026
 */

#include <WiFi.h>
#include <WebServer.h>

// ===== WiFi Settings =====
const char* ssid = "YOUR_WIFI_SSID";        // ชื่อ WiFi
const char* password = "YOUR_WIFI_PASSWORD"; // รหัสผ่าน WiFi

// ===== Static IP (Optional) =====
// ถ้าต้องการใช้ Static IP ให้เอา comment ออก
IPAddress local_ip(192, 168, 1, 100);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

// ===== Relay Pin Definitions =====
const int RELAY1_PIN = 26;
const int RELAY2_PIN = 27;
const int RELAY3_PIN = 14;
const int RELAY4_PIN = 12;

// Relay state (true = ON, false = OFF)
bool relay1State = false;
bool relay2State = false;
bool relay3State = false;
bool relay4State = false;

// Create WebServer on port 80
WebServer server(80);

// ===== HTML Dashboard =====
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP32 Relay Control - CynoIoT</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        h1 {
            color: white;
            text-align: center;
            margin-bottom: 10px;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .subtitle {
            text-align: center;
            color: rgba(255,255,255,0.9);
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        .status-bar {
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
        }
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4ade80;
            margin-right: 8px;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .relay-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        .relay-card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .relay-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        }
        .relay-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .switch {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }
        .slider:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: inherit;
            filter: blur(10px);
            opacity: 0.5;
            z-index: -1;
        }
        input:checked + .slider {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
            transform: scale(1.1);
        }
        .slider:hover {
            transform: scale(1.05);
        }
        input:checked + .slider:hover {
            transform: scale(1.15);
        }
        .footer {
            text-align: center;
            color: rgba(255,255,255,0.8);
            margin-top: 20px;
            font-size: 0.9rem;
        }
        .footer a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }
        @media (max-width: 600px) {
            h1 { font-size: 1.8rem; }
            .relay-grid { grid-template-columns: repeat(2, 1fr); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>⚡ Relay Control Dashboard</h1>
        <p class="subtitle">ควบคุมอุปกรณ์ไฟฟ้าผ่าน WiFi</p>
        
        <div class="status-bar">
            <span class="status-indicator"></span>
            สถานะ: <span id="status">เชื่อมต่อแล้ว</span>
        </div>
        
        <div class="relay-grid">
            <div class="relay-card">
                <div class="relay-title">🔌 Relay 1</div>
                <label class="switch">
                    <input type="checkbox" id="relay1" onchange="toggleRelay(1)">
                    <span class="slider">⚡</span>
                </label>
            </div>
            
            <div class="relay-card">
                <div class="relay-title">💡 Relay 2</div>
                <label class="switch">
                    <input type="checkbox" id="relay2" onchange="toggleRelay(2)">
                    <span class="slider">⚡</span>
                </label>
            </div>
            
            <div class="relay-card">
                <div class="relay-title">🚿 Relay 3</div>
                <label class="switch">
                    <input type="checkbox" id="relay3" onchange="toggleRelay(3)">
                    <span class="slider">⚡</span>
                </label>
            </div>
            
            <div class="relay-card">
                <div class="relay-title">🌡️ Relay 4</div>
                <label class="switch">
                    <input type="checkbox" id="relay4" onchange="toggleRelay(4)">
                    <span class="slider">⚡</span>
                </label>
            </div>
        </div>
        
        <div class="footer">
            <p>Powered by <a href="https://www.cynoiot.com" target="_blank">CynoIoT Platform</a></p>
        </div>
    </div>
    
    <script>
        // โหลดสถานะ Relay เริ่มต้น
        window.onload = function() {
            loadStates();
        };
        
        // ฟังก์ชันสลับสถานะ Relay
        function toggleRelay(relayNum) {
            const checkbox = document.getElementById('relay' + relayNum);
            const state = checkbox.checked ? 'on' : 'off';
            
            // ส่งคำสั่งไปยัง ESP32
            fetch('/relay' + relayNum + '/' + state)
                .then(response => response.json())
                .then(data => {
                    console.log('Relay ' + relayNum + ': ' + state);
                    document.getElementById('status').textContent = data.status;
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('status').textContent = 'ผิดพลาด!';
                });
        }
        
        // โหลดสถานะ Relay ทั้งหมด
        function loadStates() {
            fetch('/states')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('relay1').checked = data.relay1;
                    document.getElementById('relay2').checked = data.relay2;
                    document.getElementById('relay3').checked = data.relay3;
                    document.getElementById('relay4').checked = data.relay4;
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    </script>
</body>
</html>
)rawliteral";

// ===== Setup Function =====
void setup() {
    // เริ่ม Serial Monitor
    Serial.begin(115200);
    Serial.println("\n\n=== ESP32 Relay Control Server ===");
    
    // ตั้งค่า Relay Pins เป็น OUTPUT
    pinMode(RELAY1_PIN, OUTPUT);
    pinMode(RELAY2_PIN, OUTPUT);
    pinMode(RELAY3_PIN, OUTPUT);
    pinMode(RELAY4_PIN, OUTPUT);
    
    // ปิด Relay ทั้งหมดในตอนเริ่มต้น
    digitalWrite(RELAY1_PIN, LOW);
    digitalWrite(RELAY2_PIN, LOW);
    digitalWrite(RELAY3_PIN, LOW);
    digitalWrite(RELAY4_PIN, LOW);
    
    Serial.println("Relay pins initialized");
    
    // เชื่อมต่อ WiFi
    WiFi.begin(ssid, password);
    Serial.print("Connecting to WiFi");
    
    int attempts = 0;
    while (WiFi.status() != WL_CONNECTED && attempts < 20) {
        delay(500);
        Serial.print(".");
        attempts++;
    }
    
    if (WiFi.status() == WL_CONNECTED) {
        Serial.println("\n✅ WiFi connected!");
        Serial.print("📡 IP Address: ");
        Serial.println(WiFi.localIP());
        
        // ตั้งค่า Static IP (ถ้าต้องการ)
        // WiFi.config(local_ip, gateway, subnet);
    } else {
        Serial.println("\n❌ WiFi connection failed!");
        Serial.println("🔄 Will retry in setup...");
    }
    
    // ตั้งค่า Web Server Routes
    setupServerRoutes();
    
    // เริ่ม Web Server
    server.begin();
    Serial.println("🚀 Web Server started!");
    Serial.println("🌐 Open browser: http://" + WiFi.localIP().toString());
}

// ===== Loop Function =====
void loop() {
    // รับการเชื่อมต่อจาก Client
    server.handleClient();
    
    // ตรวจสอบสถานะ WiFi
    static unsigned long lastCheck = 0;
    if (millis() - lastCheck > 30000) { // ทุก 30 วินาที
        lastCheck = millis();
        if (WiFi.status() != WL_CONNECTED) {
            Serial.println("⚠️ WiFi disconnected! Reconnecting...");
            WiFi.reconnect();
        }
    }
}

// ===== Setup Server Routes =====
void setupServerRoutes() {
    // หน้าหลัก (Dashboard)
    server.on("/", HTTP_GET, []() {
        Serial.println("📄 Serving dashboard");
        server.send(200, "text/html", index_html);
    });
    
    // ควบคุม Relay 1
    server.on("/relay1/on", HTTP_GET, []() {
        digitalWrite(RELAY1_PIN, HIGH);
        relay1State = true;
        Serial.println("🔌 Relay 1: ON");
        server.send(200, "application/json", "{\"status\":\"Relay 1 เปิดแล้ว\"}");
    });
    
    server.on("/relay1/off", HTTP_GET, []() {
        digitalWrite(RELAY1_PIN, LOW);
        relay1State = false;
        Serial.println("🔌 Relay 1: OFF");
        server.send(200, "application/json", "{\"status\":\"Relay 1 ปิดแล้ว\"}");
    });
    
    // ควบคุม Relay 2
    server.on("/relay2/on", HTTP_GET, []() {
        digitalWrite(RELAY2_PIN, HIGH);
        relay2State = true;
        Serial.println("💡 Relay 2: ON");
        server.send(200, "application/json", "{\"status\":\"Relay 2 เปิดแล้ว\"}");
    });
    
    server.on("/relay2/off", HTTP_GET, []() {
        digitalWrite(RELAY2_PIN, LOW);
        relay2State = false;
        Serial.println("💡 Relay 2: OFF");
        server.send(200, "application/json", "{\"status\":\"Relay 2 ปิดแล้ว\"}");
    });
    
    // ควบคุม Relay 3
    server.on("/relay3/on", HTTP_GET, []() {
        digitalWrite(RELAY3_PIN, HIGH);
        relay3State = true;
        Serial.println("🚿 Relay 3: ON");
        server.send(200, "application/json", "{\"status\":\"Relay 3 เปิดแล้ว\"}");
    });
    
    server.on("/relay3/off", HTTP_GET, []() {
        digitalWrite(RELAY3_PIN, LOW);
        relay3State = false;
        Serial.println("🚿 Relay 3: OFF");
        server.send(200, "application/json", "{\"status\":\"Relay 3 ปิดแล้ว\"}");
    });
    
    // ควบคุม Relay 4
    server.on("/relay4/on", HTTP_GET, []() {
        digitalWrite(RELAY4_PIN, HIGH);
        relay4State = true;
        Serial.println("🌡️ Relay 4: ON");
        server.send(200, "application/json", "{\"status\":\"Relay 4 เปิดแล้ว\"}");
    });
    
    server.on("/relay4/off", HTTP_GET, []() {
        digitalWrite(RELAY4_PIN, LOW);
        relay4State = false;
        Serial.println("🌡️ Relay 4: OFF");
        server.send(200, "application/json", "{\"status\":\"Relay 4 ปิดแล้ว\"}");
    });
    
    // ดึงสถานะ Relay ทั้งหมด
    server.on("/states", HTTP_GET, []() {
        String json = "{";
        json += "\"relay1\":" + String(relay1State ? "true" : "false") + ",";
        json += "\"relay2\":" + String(relay2State ? "true" : "false") + ",";
        json += "\"relay3\":" + String(relay3State ? "true" : "false") + ",";
        json += "\"relay4\":" + String(relay4State ? "true" : "false");
        json += "}";
        server.send(200, "application/json", json);
    });
    
    // หน้า 404 Not Found
    server.onNotFound([]() {
        server.send(404, "text/html", "<h1>404 Not Found</h1>");
    });
}

การอัปโหลดโค้ดไปยัง ESP32

เปลี่ยน YOUR_WIFI_SSID และ YOUR_WIFI_PASSWORD เป็น WiFi ของคุณ
กดปุ่ม Upload (→) ใน Arduino IDE
รอจนกด Upload Complete
เปิด Serial Monitor (กด Ctrl+Shift+M)
ดู IP Address ที่แสดงใน Serial Monitor

✅ Success! เมื่อเห็นข้อความ "Web Server started!" ให้เปิด Web Browser และไปที่ IP Address ที่แสดง เช่น http://192.168.1.100

การทดสอบระบบ

ขั้นตอนการทดสอบ

เปิด Dashboard
เปิด Web Browser และไปที่ http://ESP32_IP_ADDRESS
ทดสอบ Relay 1
กดปุ่ม Relay 1 ฟังเสียง "คลิก" จาก Relay ดูสถานะ LED บน Relay Module
ทดสอบ Relay ทั้งหมด
กดปุ่ม Relay 2, 3, 4 ทดลองเปิด-ปิด สังเกตเสียงและ LED
ทดสอบอุปกรณ์ไฟฟ้า (ถ้าเชื่อมต่อแล้ว)
เชื่อมต่อหลอดไฟ หรือปลั๊ก เข้ากับ Relay ทดลองเปิด-ปิดผ่าน Dashboard
ทดสอบมือถือ
เปิด Dashboard จากมือถือ เชื่อมต่อผ่าน WiFi ทดสอบควบคุมได้

📸 สิ่งที่ควรเห็นเมื่อทำงานถูกต้อง

✅ Dashboard แสดงผลสวยงาม มีปุ่ม Relay 4 ปุ่ม
✅ เมื่อกดปุ่ม Relay มีเสียง "คลิก" จากตัว Relay
✅ LED บน Relay Module ติด/ดับ ตามสถานะ
✅ สถานะแสดง "เชื่อมต่อแล้ว" ใน Dashboard
✅ Serial Monitor แสดง "Relay X: ON/OFF"
✅ อุปกรณ์ไฟฟ้าที่เชื่อมต่อทำงานตามคำสั่ง

การแก้ปัญหา

ปัญหา: ESP32 เชื่อมต่อ WiFi ไม่ได้

อาการ: Serial Monitor แสดง "WiFi connection failed!"

สาเหตุ: ชื่อหรือรหัสผ่าน WiFi ผิด, สัญญาณอ่อน, หรือ Router บล็อก

วิธีแก้: ตรวจสอบ SSID และ Password, ลองใกล้ Router, ปิด-เปิด Router

ปัญหา: Relay ไม่ทำงาน

อาการ: กดปุ่มแต่ Relay ไม่มีเสียง "คลิก"

สาเหตุ: ต่อสายผิดขา, Relay เสีย, หรือไม่ได้จ่ายไฟ 5V

วิธีแก้: ตรวจสอบการต่อสาย VCC/GND, ลองเปลี่ยน Relay Module

ปัญหา: Dashboard โหลดไม่ได้

อาการ: เปิด Browser แต่หน้าว่างเปล่า

สาเหตุ: IP Address ผิด, ESP32 ไม่ได้เชื่อมต่อ WiFi

วิธีแก้: ตรวจสอบ IP ใน Serial Monitor, รีเซ็ต ESP32

ปัญหา: ESP32 รีเซ็ตเองบ่อยๆ

อาการ: ESP32 รีสตาร์ททำงานได้สักพักแล้วดับ

สาเหตุ: ไฟไม่เพียงพอ, ใช้ GPIO ที่ผิดกฎ (Strapping pins)

วิธีแก้: ใช้ Power Supply ที่แรงพอ (2A+), หลีกเลี่ยง GPIO 0, 2, 12, 15

ปัญหา: เชื่อมต่อจากภายนอกไม่ได้

อาการ: เข้าได้จากภายในบ้าน แต่ภายนอกไม่ได้

สาเหตุ: Firewall บล็อก, ไม่ได้ตั้งค่า Port Forwarding

วิธีแก้: ตั้งค่า Port Forwarding ใน Router, ใช้ VPN, หรือ CynoIoT Cloud

💡 Tips เพิ่มเติม

• ใช้ Static IP เพื่อไม่ต้องมาเช็ค IP ใหม่ทุกครั้ง
• ติดตั้ง Serial Monitor ไว้ดูสถานะระบบตลอดเวลา
• ทดสอบกับหลอดไฟ 5V ก่อน เชื่อมต่อ 220V AC ทีหลัง
• ใช้ Multimeter วัดไฟเข้า Relay ว่าได้ 5V จริงไหม
• เพิ่ม Capacitor 1000uF ที่ขา VCC/GND ของ Relay หากมีปัญหา

สรุปและถัดไป

ยินดีด้วย! คุณได้สร้าง Web Server Dashboard ควบคุม Relay ด้วย ESP32 สำเร็จแล้ว ตอนนี้คุณสามารถควบคุมอุปกรณ์ไฟฟ้าในบ้านผ่าน WiFi ได้แล้ว

สิ่งที่คุณได้เรียนรู้

✅ สร้าง Web Server บน ESP32 ด้วย WebServer Library
✅ ออกแบบ Dashboard ด้วย HTML/CSS/JavaScript
✅ ควบคุม Relay ผ่าน WiFi
✅ ใช้ AJAX/Fetch API สำหรับ Real-time Control
✅ เชื่อมต่อกับ CynoIoT Platform (ตัวเลือก)

🚀 ไอเดียโปรเจกต์ต่อไป

🏠 Smart Home

เพิ่ม Sensor วัดอุณหภูมิ, ความชื้น, แสงสว่าง และอัตโนมัติควบคุม

🌱 Smart Farm

ควบคุมระบบรดน้ำ, ปุ๋ย, ไฟผลไม้ อัตโนมัติ

🏭 Industrial IoT

ควบคุมมอเตอร์, ปั๊ม, Conveyor ในโรงงาน

📱 Mobile App

สร้าง App ควบคุมผ่านมือถือ แจ้งเตือน Push Notification