ESP32 Web Server trên Thẻ MicroSD
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo web server ESP32 được lưu trữ trên thẻ MicroSD. Các file HTML, CSS, JavaScript, hình ảnh sẽ được lưu trữ trên thẻ MicroSD.
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 | × | Thẻ Micro SD | ||
| 1 | × | Module Thẻ Micro SD | ||
| 1 | × | Dây Jumper | ||
| 1 | × | breadboard | ||
| 1 | × | Đầu Đọc Thẻ SD USB 3.0 | ||
| 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ề ESP32 và Web Server
Nếu bạn chưa quen thuộc với ESP32 và Web Server, thẻ MicroSD (bao gồm pinout, cách hoạt động và lập trình), bạn có thể tìm hiểu về chúng qua các hướng dẫn sau:
Sơ Đồ Đấu Nối
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.
Sao Chép Nội Dung HTML vào Thẻ MicroSD
- Vui lòng đảm bảo rằng thẻ Micro SD của bạn được định dạng theo định dạng FAT32 như bên dưới (trên Windows OS, nhấp chuột phải → format):
- Tạo file HTML index.html và thêm đoạn code sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 Web Page</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Web Page hosted on MicroSD Card</h1>
<img src="luffy.jpg" alt="A beautiful image">
<p>Sponsored by <a href="https://amazon.com/diyables">DIYables</a></p>
</div>
</body>
</html>
- Tạo file CSS styles.css và thêm đoạn code sau:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
}
h1 {
font-size: 28px;
}
.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
}
img {
max-width: 80%;
height: auto;
display: block;
margin: 20px auto;
}
- Chuẩn bị một hình ảnh. Hướng dẫn này sử dụng luffy.jpg, được sử dụng trong code HTML. Bạn có thể tải hình ảnh này tại đây:
- (Tùy chọn) Chuẩn bị hình ảnh favicon. Hướng dẫn này sử dụng favicon.ico
- Đặt tất cả các file vào thư mục gốc của thẻ MicroSD, như hình dưới đây:
Lưu ý rằng bạn có thể thêm các file khác như JavaScript, txt, csv...
Code ESP32 - Web server trên thẻ MicroSD
/*
* 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-on-sd-card
*/
#include <FS.h>
#include <SD.h>
#define PIN_SPI_CS 5 // The ESP32 pin GPIO5
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
void setup() {
Serial.begin(9600);
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// init MicroSD Card
if (!SD.begin(PIN_SPI_CS)) {
while (1) {
Serial.println(F("SD CARD FAILED, OR NOT PRESENT!"));
delay(1000);
}
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(SD, "/index.html", "text/html");
});
server.serveStatic("/", SD, "/");
server.begin();
}
=================
#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;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
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
- Nếu đây là lần đầu tiên 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 của bạn qua cáp micro USB
- Mở Arduino IDE trên PC của bạn.
- Chọn đúng board ESP32 (ví dụ: ESP32 Dev Module) và COM port.
- 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à password) 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
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Bạn sẽ thấy một địa chỉ IP trên Serial Monitor, ví dụ: 192.168.0.3
- Nhập địa chỉ IP vào thanh địa chỉ của trình duyệt web trên smartphone hoặc PC của bạn.
- Lưu ý rằng bạn cần thay đổi 192.168.0.3 thành địa chỉ IP mà bạn nhận được trên Serial Monitor.
- Bạn sẽ thấy một trang web tải HTML, CSS, hình ảnh từ thẻ SD
- Như bạn có thể thấy, các file HTML, CSS, hình ảnh được lưu trữ trên thẻ SD đã được tải bởi trình duyệt web.
Bây giờ bạn có thể chỉnh sửa code HTML, CSS, thêm nhiều hình ảnh, JavaScript để tạo trang web của riêng bạn.