Trang chủ
ESP32

ESP32 Điều khiển LED qua Web

Trong hướng dẫn này, chúng ta sẽ học cách điều khiển LED thông qua giao diện web bằng trình duyệt trên PC hoặc smartphone, sử dụng ESP32. Chi tiết hơn, ESP32 sẽ được lập trình để hoạt động như một web server. Giả sử địa chỉ IP của ESP32 là 192.168.0.2. Dưới đây là chi tiết cách thức hoạt động:

ESP32 LED web browser

Chúng ta sẽ học qua hai code mẫu:

Hướng dẫn này cung cấp kiến thức cơ bản giúp bạn có thể dễ dàng và sáng tạo tùy chỉnh để đạt được:

Linh Kiện Cần Thiết

1×mô-đun phát triển ESP-WROOM-32
1×Alternatively, ESP32 Uno-form board
1×Alternatively, ESP32 S3 Uno-form board
1×Cáp USB Type-C
1×LED Kit
1×LED (red)
1×LED Module
1×Điện trở 220 ohm
1×breadboard
1×Dây Jumper
1×(Khuyến nghị) Screw Terminal Expansion Board for ESP32
1×(Khuyến nghị) Breakout Expansion Board for ESP32
1×(Khuyến nghị) Power Splitter for ESP32

Or you can buy the following kits:

1×DIYables ESP32 Starter Kit (ESP32 included)
1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)

Về LED và ESP32

Nếu bạn chưa biết về LED và ESP32 (sơ đồ chân, cách hoạt động, cách lập trình ...), hãy tìm hiểu chúng trong các hướng dẫn sau:

Sơ Đồ Đấu Nối

ESP32 LED sơ đồ đấu dây

This image is created using Fritzing. Click to enlarge image

Nếu bạn chưa rõ cách cấp nguồn cho ESP32 và các linh kiện khác, xem: Cách Cung Cấp Nguồn Điện Cho ESP32.

Code ESP32 - Nội dung HTML được nhúng vào code ESP32

/* * Mã ESP32 này được phát triển bởi newbiely.vn * Mã ESP32 này được cung cấp để sử dụng công khai, không có ràng buộc. * Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập: * https://newbiely.vn/tutorials/esp32/esp32-controls-led-via-web */ #include <DIYables_ESP32_WebServer.h> #define LED_PIN 18 // ESP32 pin GPIO18 connected to LED int LED_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; // Page handlers String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "<p>LED state: <span style='color: red;'>"; if (LED_state == LOW) html += "OFF"; else html += "ON"; html += "</span></p>"; html += "<a href='/led1/on'>Turn ON</a>"; html += "<br><br>"; html += "<a href='/led1/off'>Turn OFF</a>"; html += "</html>"; return html; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/led1/on", handleLedOn); server.addRoute("/led1/off", handleLedOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); // Your code here }

Các Bước Thực Hiện

  • Nếu đây là lần đầu bạn sử dụng ESP32, hãy xem ESP32 - Cài Đặt Phần Mềm.
  • Thực hiện đấu nối như hình trên.
  • Kết nối bo mạch ESP32 với PC qua cáp micro USB
  • Mở Arduino IDE trên PC.
  • Chọn đúng bo mạch ESP32 (ví dụ: ESP32 Dev Module) và cổng COM.
  • Mở Library Manager bằng cách nhấp vào biểu tượng Library Manager trên thanh điều hướng bên trái của Arduino IDE.
  • Tìm kiếm "DIYables ESP32 WebServer", sau đó tìm thư viện Web Server được tạo bởi DIYables.
  • Nhấp nút Install để cài đặt thư viện Web Server.
ESP32 web server thư viện
  • Sao chép code trên và mở bằng Arduino IDE
  • Thay đổi thông tin wifi (SSID và mật khẩu) trong code thành thông tin của bạn
  • Nhấp nút Upload trên Arduino IDE để tải code lên ESP32
  • Mở Serial Monitor
  • Xem kết quả trên Serial Monitor.
COM6
Send
Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.2
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Bạn sẽ thấy một địa chỉ IP, ví dụ: 192.168.0.2. Đây là địa chỉ IP của ESP32 Web Server
  • Mở trình duyệt web và nhập một trong ba định dạng dưới đây vào thanh địa chỉ:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
  • Xin lưu ý rằng địa chỉ IP có thể khác nhau. Vui lòng kiểm tra giá trị hiện tại trên Serial Monitor.
  • Bạn cũng sẽ thấy kết quả dưới đây trên Serial Monitor
COM6
Send
Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.2 ESP32 Web Server: New request recieved: GET / ESP32 Web Server: New request recieved: GET /led1/on ESP32 Web Server: New request recieved: GET /led1/off
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Kiểm tra trạng thái LED
  • Bạn sẽ thấy trang web của bo mạch ESP32 trên trình duyệt web như hình dưới
ESP32 LED web browser
  • Bây giờ bạn có thể điều khiển LED bật/tắt qua giao diện web

Code ESP32 - Nội dung HTML được tách riêng khỏi code ESP32

Vì một trang web đồ họa chứa lượng lớn nội dung HTML, việc nhúng nó vào code ESP32 như trước trở nên bất tiện. Để giải quyết vấn đề này, chúng ta cần tách riêng code ESP32 và code HTML vào các file khác nhau:

  • Code ESP32 sẽ được đặt trong file .ino.
  • Code HTML (bao gồm HTML, CSS và Javascript) sẽ được đặt trong file .h.

Các Bước Thực Hiện

  • Mở Arduino IDE và tạo sketch mới, đặt tên cho nó, ví dụ: newbiely.com.ino
  • Sao chép code dưới đây và mở bằng Arduino IDE
/* * Mã ESP32 này được phát triển bởi newbiely.vn * Mã ESP32 này được cung cấp để sử dụng công khai, không có ràng buộc. * Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập: * https://newbiely.vn/tutorials/esp32/esp32-controls-led-via-web */ #include <DIYables_ESP32_WebServer.h> #include "index.h" // Include the index.h file #define LED_PIN 18 // ESP32 pin GPIO18 connected to LED int LED_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; // Page handlers String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the led state return html; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/led1/on", handleLedOn); server.addRoute("/led1/off", handleLedOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); // Your code here }
  • Thay đổi thông tin WiFi (SSID và mật khẩu) trong code thành thông tin của bạn
  • Tạo file index.h trên Arduino IDE bằng cách:
    • Nhấp vào nút ngay dưới biểu tượng serial monitor và chọn New Tab, hoặc sử dụng tổ hợp phím Ctrl+Shift+N.
    Arduino ide 2 adds file
    • Đặt tên file là index.h và nhấp nút OK
    Arduino ide 2 adds file index.h
    • Sao chép code dưới đây và dán vào file index.h.
    /* * Mã ESP32 này được phát triển bởi newbiely.vn * Mã ESP32 này được cung cấp để sử dụng công khai, không có ràng buộc. * Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập: * https://newbiely.vn/tutorials/esp32/esp32-controls-led-via-web */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE HTML> <html> <head> <link rel='icon' href='data:,'> </head> <p>LED state: <span style='color: red;'>%LED_STATE%</span></p> <a href='/led1/on'>Turn ON</a> <br><br> <a href='/led1/off'>Turn OFF</a> </html> )====="; #endif
    • Bây giờ bạn có code trong hai file: newbiely.com.ino và index.h
    • Nhấp nút Upload trên Arduino IDE để tải code lên ESP32
    • Truy cập trang web của bo mạch ESP32 qua trình duyệt web trên PC hoặc smartphone như trước. Bạn sẽ thấy tương tự như code trước đó như hình dưới:
    ESP32 LED web browser

    ※ Lưu ý:

    • Nếu bạn chỉnh sửa nội dung HTML trong file index.h và không thay đổi gì trong file newbiely.com.ino, khi bạn biên dịch và tải code lên ESP32, Arduino IDE sẽ không cập nhật nội dung HTML.
    • Để Arduino IDE cập nhật nội dung HTML trong trường hợp này, hãy thực hiện một thay đổi trong file newbiely.com.ino (ví dụ: thêm dòng trống, thêm comment....)

    Bạn có thể dễ dàng và sáng tạo tùy chỉnh code trên để đạt được:

    • Điều khiển nhiều LED thông qua web
    • Thiết kế lại giao diện người dùng (UI) web

Bài hướng dẫn liên quan

Copyright © 2026 newbiely.vn. All rights reserved.
Terms and Conditions | Privacy Policy
Email: newbiely.com@gmail.com