SENSORS/ACTUATORS

INTERNET OF THING (IoT)

ESP32 - Ethernet

ESP32 - GPIO Interrupt

ESP32 Web Server

Trong hướng dẫn từng bước này, chúng tôi sẽ hướng dẫn bạn cách lập trình để biến board ESP32 thành một web server. Bạn sẽ có thể truy cập các trang web được lưu trữ trên ESP32 bằng trình duyệt web trên máy tính hoặc điện thoại thông minh, cho phép bạn xem dữ liệu từ ESP32 và điều khiển nó. Để dễ dàng hơn, chúng ta sẽ tiến hành từ đơn giản đến phức tạp theo các bước sau:

ESP32 Web Server - Hiển thị văn bản đơn giản trên trang web.
ESP32 Web Server - Giám sát giá trị cảm biến từ ESP32 qua web.
ESP32 Web Server - Điều khiển ESP32 qua web.
ESP32 Web Server - Tách nội dung HTML (HTML, CSS, và Javascript) khỏi code ESP32 và đặt vào các file khác trên Arduino IDE.
ESP32 Web Server - Tạo nhiều trang như index.html, temperature.html, led.html, error_404.html, và error_405.html..., và nhiều hơn nữa.

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	×	(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)

Đọc giá trị cảm biến từ ESP32 qua Web

Điều này tương đối đơn giản. Code ESP32 thực hiện các tác vụ sau:

Tạo một web server lắng nghe các yêu cầu HTTP từ trình duyệt web.
Khi nhận được yêu cầu từ trình duyệt web, ESP32 phản hồi với những thông tin sau:

HTTP header
HTTP body: Bao gồm nội dung HTML và giá trị đọc được từ cảm biến.

Dưới đây là code ESP32 thực hiện các tác vụ trên:

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.
Kết nối board ESP32 với PC qua cáp micro USB
Mở Arduino IDE trên PC.
Chọn đúng board 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.

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 để upload code lên ESP32
Mở Serial Monitor
Kiểm tra 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

Ghi lại địa chỉ IP được hiển thị, và nhập địa chỉ này vào thanh địa chỉ của trình duyệt web trên điện thoại hoặc PC của bạn.
Kết quả, bạn sẽ thấy output sau 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 received: GET /

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Khi bạn truy cập trình duyệt web bằng địa chỉ IP, bạn sẽ được trình bày một trang web rất cơ bản hiển thị "Hello, ESP32!". Trang sẽ trông như sau:

Đọc giá trị cảm biến từ ESP32 qua Web

Dưới đây là code ESP32 in giá trị nhiệt độ lên trang web:

/* * 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-web-server */ #include <DIYables_ESP32_WebServer.h> // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; float getTemperature() { // YOUR SENSOR IMPLEMENTATION HERE // simulate the temperature value float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000 return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float } // Page handlers void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { // get temperature from sensor float temperature = getTemperature(); // Format the temperature with two decimal places String temperatureStr = String(temperature, 2); String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel=\"icon\" href=\"data:,\">"; html += "</head>"; html += "<p>"; html += "Temperature: <span style=\"color: red;\">"; html += temperature; html += "°C</span>"; html += "</p>"; html += "</html>"; server.sendResponse(client, html.c_str()); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); }

Các Bước Thực Hiệ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
Upload code lên ESP32
Khi bạn truy cập trình duyệt web bằng địa chỉ IP, bạn sẽ được trình bày một trang web rất cơ bản hiển thị thông tin về board ESP32. Trang sẽ trông như sau:

Để làm cho trang web trông tuyệt vời với giao diện người dùng đồ họa (UI), hãy kiểm tra phần cuối của hướng dẫn này.

※ Lưu ý:

Với code được cung cấp ở trên, để cập nhật nhiệt độ, bạn phải reload trang trên trình duyệt web. Trong phần tiếp theo, chúng ta sẽ học cách làm cho trang web cập nhật giá trị nhiệt độ ở chế độ nền mà không cần reload trang web.

Điều khiển ESP32 qua Web

Điều khiển thứ gì đó kết nối với ESP32 phức tạp hơn một chút so với chỉ đọc giá trị. Đó là vì ESP32 phải hiểu yêu cầu mà nó nhận được từ trình duyệt web để biết hành động nào cần thực hiện.

Để có ví dụ toàn diện và chi tiết hơn, tôi khuyên bạn nên xem các hướng dẫn được liệt kê dưới đây:

Tách nội dung HTML vào file khác trên Arduino IDE

Nếu bạn muốn tạo một trang web đơn giản với nội dung tối thiểu, bạn có thể nhúng HTML trực tiếp vào code ESP32, như đã giải thích trước đó.

Tuy nhiên, nếu bạn muốn tạo một trang web tinh vi và ấn tượng hơn với nội dung lớn hơn, việc bao gồm tất cả HTML, CSS, và Javascript trực tiếp trong code ESP32 trở nên bất tiện. Trong tình huống này, bạn có thể sử dụng cách tiếp cận khác để quản lý code:

Code ESP32 sẽ được đặt trong file .ino, giống như trước.
Code HTML (HTML, CSS, Javascript) sẽ được đặt trong file .h riêng biệt. Điều này cho phép bạn giữ nội dung trang web tách biệt khỏi code ESP32, giúp quản lý và chỉnh sửa dễ dàng hơn.

Để làm điều này, chúng ta cần thực hiện hai bước chính:

Chuẩn bị nội dung HTML
Lập trình ESP32

Chuẩn bị nội dung HTML

Tạo file HTML trên PC cục bộ của bạn chứa nội dung HTML (HTML, CSS, và Javascript) cho thiết kế UI của bạn.
Trong file HTML, nơi dữ liệu từ ESP32 nên được hiển thị, hãy sử dụng giá trị tùy ý.
Kiểm tra và chỉnh sửa cho đến khi bạn hài lòng.
Chúng ta sẽ đặt nội dung HTML trong file .h trên Arduino IDE. Xem bước tiếp theo.

Lập trình ESP32

Mở Arduino IDE và tạo sketch mới. Đặt tên cho nó, ví dụ: newbiely.com.ino.
Sao chép code được cung cấp dưới đây và dán vào file đã tạo.

/* * 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-web-server */ #include <DIYables_ESP32_WebServer.h> #include "index.h" // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; float getTemperature() { // YOUR SENSOR IMPLEMENTATION HERE // simulate the temperature value float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000 return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float } // Page handlers void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { server.sendResponse(client, webpage); } void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { float temperature = getTemperature(); // Format the temperature with two decimal places String temperatureStr = String(temperature, 2); server.sendResponse(client, temperatureStr.c_str(), "text/plain"); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/temperature", handleTemperature); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); }

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:

Hoặc nhấp vào nút ngay bên dưới biểu tượng serial monitor và chọn New Tab, hoặc sử dụng phím Ctrl+Shift+N.
Đặt tên file là index.h và nhấp nút OK

Sao chép code dưới đây và dán vào 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-web-server */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( REPLACE_YOUR_HTML_CONTENT_HERE )====="; #endif

Thay thế dòng REPLACE_YOUR_HTML_CONTENT_HERE bằng nội dung HTML bạn đã chuẩn bị trước đó. Không có vấn đề gì với ký tự xuống dòng. Dưới đây là ví dụ về 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-web-server */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE html> <html> <head> <title>ESP32 Temperature</title> </head> <body> <h1>ESP32 Temperature</h1> <p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p> <script> function fetchTemperature() { fetch("/temperature") .then(response => response.text()) .then(data => { document.getElementById("temperature").textContent = data; }); } fetchTemperature(); setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds </script> </body> </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 để upload code lên ESP32
Truy cập trang web của board ESP32 qua trình duyệt web như trước. Bạn sẽ thấy như dưới đây:

※ Lưu ý:

Trong các code ở trên:

Code HTML được thiết kế để cập nhật nhiệt độ ở chế độ nền theo khoảng thời gian đều đặn, hiện tại được đặt là mỗi 4 giây trong code. Điều này có nghĩa là giá trị nhiệt độ được tự động làm mới mà không cần reload trang web thủ công. Bạn có thể điều chỉnh khoảng thời gian cập nhật trong code để phù hợp với sở thích của mình.
Code ESP32 phục vụ hai yêu cầu từ trình duyệt web.

Một yêu cầu để trả về nội dung HTML của trang web
Yêu cầu khác để trả về giá trị nhiệt độ được yêu cầu bởi trang web ở chế độ nền

Để có minh họa toàn diện và chi tiết hơn, vui lòng tham khảo hướng dẫn ESP32 - Kiểm tra Nhiệt độ qua Web

※ Lưu ý:

Nếu bạn thay đổi nội dung HTML trong file index.h nhưng không chỉnh sửa gì trong file newbiely.com.ino, Arduino IDE sẽ không refresh hoặc cập nhật nội dung HTML khi bạn biên dịch và upload code lên ESP32.
Để buộc Arduino IDE cập nhật nội dung HTML trong tình huống này, bạn cần thay đổi gì đó trong file newbiely.com.ino. Ví dụ, bạn có thể thêm một dòng trống hoặc chèn một comment. Hành động này kích hoạt IDE nhận ra rằng đã có thay đổi trong dự án, đảm bảo rằng nội dung HTML cập nhật của bạn được bao gồm trong lần upload.

ESP32 Web Server - Nhiều Trang

Hãy xem hướng dẫn ESP32 - Web Server Nhiều Trang này.

ESP32 Web Server

Linh Kiện Cần Thiết

Đọc giá trị cảm biến từ ESP32 qua Web

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

Đọc giá trị cảm biến từ ESP32 qua Web

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

Điều khiển ESP32 qua Web

Tách nội dung HTML vào file khác trên Arduino IDE

Chuẩn bị nội dung HTML

Lập trình ESP32

ESP32 Web Server - Nhiều Trang

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