เราจะลงมือปฏิบัติจริง! เราจะสร้าง “Smart Switch” ตัวแรกกันครับ โดยใช้อุปกรณ์ยอดฮิตอย่างบอร์ด ESP32 เขียนโปรแกรมให้มันสร้างหน้าเว็บ (Web Server) ขึ้นมา เพื่อให้เรากดปุ่มเปิด-ปิดไฟ LED (จำลองแทนหลอดไฟบ้าน) ผ่าน Browser บนมือถือได้โดยตรง ไม่ต้องผ่าน Cloud ของใคร
1. อุปกรณ์ที่ต้องเตรียม (Hardware Required)
- บอร์ด ESP32 (รุ่น DevKit V1 หรือรุ่นไหนก็ได้) : 1 บอร์ด
- หลอด LED (สีอะไรก็ได้) : 1 หลอด
- ตัวต้านทาน (Resistor) 220 โอห์ม หรือ 330 โอห์ม : 1 ตัว
- สาย Jumper และ Breadboard
- โปรแกรม Arduino IDE (ติดตั้งบอร์ด ESP32 เรียบร้อยแล้ว)
2. การต่อวงจร (Wiring Diagram)
เราจะต่อ LED เข้ากับขา GPIO ของ ESP32 (ในตัวอย่างนี้ใช้ขา GPIO 23)
- ขาบวก LED (ขายาว): ต่อเข้ากับขา GPIO 23 ของ ESP32
- ขาลบ LED (ขาสั้น): ต่อผ่านตัวต้านทาน 220Ω ลงที่ขา GND
(หมายเหตุ: หากต้องการต่อกับหลอดไฟบ้าน 220V ให้เปลี่ยนจาก LED เป็น Module Relay โดยต่อขา Signal เข้าที่ GPIO 23 แทน)
3. การเขียนโปรแกรม (Source Code)
ให้เปิด Arduino IDE ขึ้นมา พิมพ์โค้ดดังนี้ และแก้ไขชื่อ Wi-Fi ของท่านตรงจุดที่ระบุ
C++
#include <WiFi.h>
#include <WebServer.h>
// --- ตั้งค่า Wi-Fi ---
const char* ssid = "ชื่อไวไฟบ้านท่าน"; // ใส่ชื่อ Wi-Fi
const char* password = "รหัสผ่านไวไฟ"; // ใส่รหัสผ่าน
// สร้าง Object WebServer ที่พอร์ต 80
WebServer server(80);
// กำหนดขาอุปกรณ์
const int ledPin = 23; // ต่อ LED ที่ขา 23
bool ledState = false; // ตัวแปรเก็บสถานะไฟ (false = ปิด, true = เปิด)
// --- ส่วนแสดงผลหน้าเว็บ (HTML) ---
void handleRoot() {
String html = "<!DOCTYPE html><html>";
html += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
html += "<meta charset=\"UTF-8\">"; // รองรับภาษาไทย
html += "<style>body{text-align: center; font-family: sans-serif; margin-top:50px;}";
html += ".button {background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 10px;}";
html += ".off {background-color: #f44336;}</style></head>";
html += "<body><h1>ระบบควบคุมไฟบ้าน (ESP32)</h1>";
html += "<h2>สถานะไฟ: " + String(ledState ? "เปิด (ON)" : "ปิด (OFF)") + "</h2>";
if (ledState) {
html += "<a href=\"/off\"><button class=\"button off\">กดเพื่อปิดไฟ</button></a>";
} else {
html += "<a href=\"/on\"><button class=\"button\">กดเพื่อเปิดไฟ</button></a>";
}
html += "</body></html>";
server.send(200, "text/html", html);
}
// --- ฟังก์ชันเปิดไฟ ---
void handleOn() {
ledState = true;
digitalWrite(ledPin, HIGH);
server.sendHeader("Location", "/"); // รีเฟรชกลับหน้าเดิม
server.send(303);
Serial.println("LED turned ON");
}
// --- ฟังก์ชันปิดไฟ ---
void handleOff() {
ledState = false;
digitalWrite(ledPin, LOW);
server.sendHeader("Location", "/");
server.send(303);
Serial.println("LED turned OFF");
}
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW); // เริ่มต้นปิดไฟไว้ก่อน
// เชื่อมต่อ Wi-Fi
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP()); // แสดง IP Address
// กำหนดเส้นทาง URL
server.on("/", handleRoot);
server.on("/on", handleOn);
server.on("/off", handleOff);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient(); // รอรับคำสั่งจาก Browser ตลอดเวลา
}
4. ขั้นตอนการทดสอบ
- กด Upload โค้ดลงบอร์ด ESP32
- เปิด Serial Monitor (ตั้ง Baud rate 115200) รอจนกว่าจะขึ้นข้อความว่า
WiFi connected - ดูค่า IP Address ที่โชว์ขึ้นมา (เช่น
192.168.1.45) - หยิบมือถือที่ต่อ Wi-Fi วงเดียวกัน เปิด Chrome/Safari แล้วพิมพ์เลข IP Address นั้นลงในช่อง URL
- จะเจอหน้าเว็บที่มีปุ่ม “กดเพื่อเปิดไฟ”
- ทดลองกดปุ่ม ไฟ LED ที่ต่อไว้จะต้องติดและดับตามสั่งทันที!
5. สรุปผลการทดลอง
การทดลองนี้แสดงให้เห็นหลักการทำงานพื้นฐานของ IoT แบบ Local Server คืออุปกรณ์ (ESP32) ทำหน้าที่เป็นทั้งตัวรับคำสั่งและแสดงผลหน้าเว็บ ซึ่งเป็นพื้นฐานสำคัญก่อนที่เราจะขยับไปเชื่อมต่อกับ Cloud หรือ Application ภายนอก