Đèn LED điều khiển Internet bằng Máy chủ Web dựa trên ESP32: 10 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

Tổng quan dự án

Trong ví dụ này, chúng tôi sẽ tìm ra cách tạo một máy chủ web dựa trên ESP32 để điều khiển trạng thái đèn LED, có thể truy cập được từ mọi nơi trên thế giới. Bạn sẽ cần một máy tính Mac cho dự án này, nhưng bạn có thể chạy phần mềm này ngay cả trên một máy tính rẻ tiền và công suất thấp như Raspberry Pi.

Chuẩn bị ESP32 với Arduino IDE

Để bắt đầu lập trình ESP32 bằng Arduino IDE và ngôn ngữ lập trình Arduino, bạn sẽ cần một phần bổ trợ đặc biệt. Đọc về cách chuẩn bị Arduino IDE cho ESP32 trên Mac OS theo liên kết sau.

Quân nhu

Đối với hướng dẫn này, bạn sẽ cần các mục sau:

• Bảng phát triển ESP325mm
• LEDResistor 220ohm
• Màn hình LCD 16x2 với mô-đun I2C
• Breadboard
• Dây nhảy
• Cáp micro USB

Bước 1: Xây dựng mạch

Thực hiện các kết nối như thể hiện trong sơ đồ dưới đây

Bắt đầu bằng cách kết nối đầu ra điện áp cung cấp 3V3 trên bảng mạch điện tử ESP32 và GNDto. Kết nối đèn LED qua điện trở với ESP32 sử dụng chân GPIO 23 làm chân đầu ra kỹ thuật số. Sau đó, kết nối chân SDA của màn hình LCD 16x2 với chân GPIO 21 và SCL với chân GPIO 22.

Bước 2: Tổng quan nhanh về hệ thống tệp SPIFFS

SPIFFS là viết tắt của “Hệ thống tệp Flash giao diện ngoại vi nối tiếp”, tức là hệ thống tệp cho bộ nhớ flash truyền dữ liệu qua SPI. Theo đó, SPIFFS là một hệ thống tệp được đơn giản hóa được thiết kế cho các bộ vi điều khiển có chip flash truyền dữ liệu qua bus SPI (chẳng hạn như bộ nhớ flash ESP32).

SPIFFS hữu ích nhất để sử dụng với ESP32 trong các trường hợp sau:

• Tạo tệp để lưu trữ cài đặt
• Lưu trữ dữ liệu vĩnh viễn.
• Tạo tệp để lưu trữ một lượng nhỏ dữ liệu (thay vì sử dụng thẻ nhớ microSD cho việc này).
• Lưu trữ các tệp HTML và CSS để tạo máy chủ web.

Bước 3: Cài đặt SPIFFS Bootloader trên Mac OS

Bạn có thể tạo, lưu và ghi dữ liệu vào các tệp được lưu trữ trong hệ thống tệp ESP32 trực tiếp bằng cách sử dụng plugin trên Arduino IDE.

Trước hết, hãy đảm bảo rằng bạn đã cài đặt phiên bản Arduino IDE mới nhất, sau đó thực hiện như sau:

• Mở liên kết sau và tải xuống tệp lưu trữ “ESP32FS-1.0.zip”
• Đi tới thư mục Arduino IDE, nằm trên thư mục Documents.
• Tạo một thư mục công cụ, nếu nó không tồn tại. Bên trong thư mục công cụ tạo một thư mục ESP32FS khác. Bên trong ESP32FS tạo một cái khác, được gọi là công cụ.
• Giải nén tệp nén ZIP đã tải xuống ở bước 1 vào thư mục công cụ.
• Khởi động lại Arduino IDE của bạn.
• Để kiểm tra xem plugin đã được cài đặt thành công hay chưa, hãy mở Arduino IDE và nhấp vào “Công cụ” và kiểm tra xem có mục “Tải lên dữ liệu phác thảo ESP32” trong menu này hay không.

Bước 4: Cài đặt thư viện

Các thư viện ESPAsyncWebServer và AsyncTCP cho phép bạn tạo một máy chủ web bằng cách sử dụng các tệp từ hệ thống tệp của ESP32. Để biết thêm thông tin về các thư viện này, hãy kiểm tra liên kết sau.

Cài đặt thư viện ESPAsyncWebServer

• Nhấp vào đây để tải xuống kho lưu trữ ZIP của thư viện.
• Giải nén kho lưu trữ này. Bạn sẽ nhận được thư mục ESPAsyncWebServer-master.
• Đổi tên nó thành "ESPAsyncWebServer".

Cài đặt thư viện AsyncTCP

• Bấm vào đây để tải xuống kho lưu trữ ZIP của thư viện.
• Giải nén kho lưu trữ này. Bạn sẽ nhận được thư mục AsyncTCP-master.
• Đổi tên nó thành “AsyncTCP”.

Di chuyển các thư mục ESPAsyncWebServer và AsyncTCP vào thư mục thư viện, nằm bên trong thư mục Documents.

Cuối cùng, khởi động lại Arduino IDE.

Bước 5: Tạo tệp Index.html và Style.css với nội dung sau

Mẫu HTML / CSS cho nút bật tắt được lấy từ nguồn sau.

Bước 6: Mã Arduino

Chủ yếu, mã dựa trên mã Arduino được lấy từ Máy chủ Web ESP32 bằng SPIFFS và Cách sử dụng I2C LCD với ESP32 trên Arduino IDE.

Bước 7: Tải lên mã và tệp Arduino bằng Trình tải SPIFFS

• Mở thư mục phác thảo của mã Arduino.
• Bên trong thư mục này, tạo một thư mục mới có tên là “dữ liệu”.
• Bên trong thư mục dữ liệu, bạn cần đặt index.html và style.css.
• Tải lên mã Arduino
• Sau đó, để tải tệp lên, hãy nhấp vào IDE Arduino trên Công cụ> Tải lên dữ liệu phác thảo ESP32

Bước 8: Xác định địa chỉ IP máy chủ web ESP32

Nó có thể được tìm thấy theo hai cách.

• Màn hình nối tiếp trên Arduino IDE (Công cụ> Màn hình nối tiếp)
• Trên màn hình LCD

Bước 9: Kiểm tra Máy chủ Web Cục bộ

Tiếp theo, mở trình duyệt web bạn chọn và dán địa chỉ IP sau vào thanh địa chỉ. Bạn sẽ nhận được một đầu ra tương tự như ảnh chụp màn hình bên dưới.

Bước 10: Truy cập vào máy chủ web cục bộ từ mọi nơi trên thế giới bằng Ngrok

Ngrok là một nền tảng cho phép bạn tổ chức truy cập từ xa vào máy chủ web hoặc một số dịch vụ khác chạy trên PC của bạn từ internet bên ngoài. Truy cập được tổ chức thông qua đường hầm an toàn được tạo khi bắt đầu ngrok.

• Theo liên kết này và đăng ký.
• Sau khi tạo tài khoản, hãy đăng nhập và chuyển đến tab "Auth". Sao chép dòng từ trường "Your Tunnel Authtoken".
• Nhấp vào tab “Tải xuống” trên thanh điều hướng, chọn phiên bản ngrok phù hợp với hệ điều hành của bạn và tải xuống.
• Giải nén thư mục đã tải xuống và chạy dòng lệnh.
• Kết nối tài khoản của bạn bằng cách nhập lệnh sau

./ngrok authtoken

Bắt đầu một đường hầm HTTP trên cổng 80

./ngrok http Your_IP_Address: 80

Nếu mọi thứ được thực hiện chính xác, thì trạng thái đường hầm sẽ chuyển thành "trực tuyến" và liên kết chuyển hướng sẽ xuất hiện trong cột "Chuyển tiếp". Bằng cách nhập liên kết này vào trình duyệt của bạn, bạn có thể truy cập máy chủ web từ bất kỳ đâu trên thế giới.