Trang chủ
ESP32

Thư Viện DIYables ESP32 WebApps Framework Ứng Dụng Web ESP32 Hoàn Chỉnh

Thư Viện DIYables ESP32 WebApps

Một thư viện ESP32 toàn diện để tạo ứng dụng web dựa trên WebSocket cho ESP32. Thư viện này cung cấp nhiều ứng dụng web sẵn sàng sử dụng để giám sát, điều khiển và tương tác với các dự án ESP32 của bạn thông qua giao diện web hiện đại.

Với thư viện này, bạn có thể tương tác với ESP32 thông qua trình duyệt web trên smartphone hoặc PC bằng cách:

  • Sử dụng các ứng dụng web có sẵn trong số 11 ứng dụng được cung cấp mà không cần kiến thức lập trình web
  • Tùy chỉnh các ứng dụng web có sẵn để phù hợp với yêu cầu dự án cụ thể của bạn
  • Xây dựng và thêm ứng dụng web riêng sử dụng kiến trúc framework linh hoạt
diyables ESP32 webapps

🚀 Tính Năng

  • Kiến Trúc Modular: Chỉ thêm những ứng dụng web bạn cần để tối ưu hóa bộ nhớ
  • Hiệu Quả Bộ Nhớ: Mỗi ứng dụng web có thể được bật/tắt độc lập
  • Tối Ưu Bộ Nhớ: Mã HTML, JavaScript và CSS được nén để giảm kích thước code trong khi vẫn giữ nguyên giao diện và chức năng. Mã nguồn gốc không nén được bao gồm trong thư viện để tham khảo và tùy chỉnh
  • 11 Ứng Dụng Web Có Sẵn: Điều khiển ESP32 hoàn chỉnh mà không cần kiến thức lập trình web
    • Trang Chủ: Trung tâm điều hướng với liên kết đến tất cả ứng dụng web
    • Web Monitor: Theo dõi serial thời gian thực trong trình duyệt qua WebSocket
    • Web Chat: Giao diện chat tương tác với Arduino
    • Web Digital Pins: Điều khiển và giám sát tất cả chân digital bằng giao diện web
    • Web Slider: Điều khiển slider kép cho đầu ra analog/PWM
    • Web Joystick: Joystick tương tác để điều khiển robot và xe
    • Web Analog Gauge: Hiển thị đồng hồ tròn để giám sát sensor
    • Web Rotator: Điều khiển đĩa xoay với chế độ liên tục/giới hạn
    • Web Temperature: Hiển thị nhiệt kế với phạm vi có thể cấu hình
    • Web RTC: Đồng hồ thời gian thực với đồng bộ thời gian và xử lý múi giờ
    • Web Table: Bảng hai cột thuộc tính-giá trị với cập nhật thời gian thực
    • Web Plotter: Trực quan hóa và vẽ đồ thị dữ liệu thời gian thực
  • Template Ứng Dụng Web Tùy Chỉnh: Template hoàn chỉnh để tạo ứng dụng web riêng với giao tiếp WebSocket thời gian thực
  • Thiết Kế Responsive: Hoạt động trên máy tính và thiết bị di động
  • Giao Tiếp Thời Gian Thực: Dựa trên WebSocket để cập nhật tức thì
  • Tích Hợp Dễ Dàng: API dựa trên callback đơn giản
  • Hỗ Trợ Nhiều Ứng Dụng: Hỗ trợ thêm nhiều ứng dụng web cùng lúc
  • Tự Động Tích Hợp Trang Chủ: Ứng dụng web được thêm sẽ tự động hiển thị liên kết trên trang chủ

📦 Cài Đặt - Arduino IDE Library Manager

  • Mở Arduino IDE
  • Điều hướng đến biểu tượng Libraries trên thanh trái của Arduino IDE.
  • Tìm kiếm "DIYables ESP32 WebApps", sau đó tìm DIYables ESP32 WebApps Library bởi DIYables
  • Nhấp nút Install để cài đặt thư viện.
diyables ESP32 webapps thư viện
  • Bạn sẽ được hỏi về việc cài đặt một số thư viện phụ thuộc khác
  • Nhấp nút Install All để cài đặt tất cả thư viện phụ thuộc.
diyables ESP32 webapps dependency

🔧 Thư Viện Phụ Thuộc

Thư viện này yêu cầu:

  • Thư viện DIYables_ESP32_WebServer (để hỗ trợ WebSocket)

🎯 Bắt Đầu Nhanh

Để có hướng dẫn thiết lập chi tiết và ví dụ code, vui lòng tham khảo:

📱 Các Ứng Dụng Web

1. Trang Chủ (`/`)

  • Trung tâm điều hướng chính
  • Liên kết đến tất cả ứng dụng web
  • Chỉ hiển thị các ứng dụng được bật/thêm trên trang chủ
  • Hiển thị trạng thái kết nối
  • Thiết kế responsive

2. Web Monitor (`/web-monitor`)

  • Theo dõi serial dựa trên trình duyệt
  • Giao tiếp hai chiều thời gian thực
  • Đánh dấu thời gian và đếm tin nhắn
  • Nhập lệnh với lịch sử

3. Web Plotter (`/web-plotter`)

  • Trực quan hóa và vẽ đồ thị dữ liệu thời gian thực
  • Hỗ trợ nhiều chuỗi dữ liệu (tối đa 8 đường)
  • Trục Y tự động tỷ lệ hoặc phạm vi cố định
  • Tiêu đề và nhãn trục có thể tùy chỉnh
  • Streaming WebSocket với độ trễ tối thiểu
  • Hoàn hảo cho giám sát sensor và debug

4. WebChat (`/chat`)

  • Giao diện chat tương tác
  • Phản hồi ngôn ngữ tự nhiên
  • Điều khiển LED qua lệnh chat
  • Tương tác vui và giáo dục

5. Web Digital Pins (`/web-digital-pins`)

  • Điều khiển chân riêng lẻ (chân 0-13)
  • Mỗi chân có thể được bật như chế độ INPUT hoặc OUTPUT
  • Chỉ các chân được bật mới hiển thị trong giao diện Web
  • Giám sát chân đầu vào và đầu ra
  • Thao tác hàng loạt (Tất cả ON/OFF, Toggle)
  • Phản hồi trạng thái chân thời gian thực

6. Web Slider (`/web-slider`)

  • Slider phạm vi kép (0-255)
  • Điều khiển đầu ra PWM
  • Nút giá trị đặt trước
  • Tùy chọn điều khiển đồng bộ

7. Web Joystick (`/web-joystick`)

  • Điều khiển joystick tương tác với hỗ trợ cảm ứng/chuột
  • Giá trị tọa độ X/Y (-100 đến +100)
  • Phản hồi vị trí thời gian thực
  • Có thể bật/tắt tự động về giữa qua code ESP32
  • Hoàn hảo cho điều khiển robot và xe

8. Web Analog Gauge (`/web-gauge`)

  • Hiển thị đồng hồ tròn chuyên nghiệp để giám sát sensor thời gian thực
  • Phạm vi giá trị, đơn vị và độ chính xác có thể cấu hình
  • Hoạt ảnh kim mượt với phản hồi trực quan
  • Vùng màu (xanh lá, vàng, đỏ) để chỉ thị trạng thái
  • Xử lý cấu hình tự động - đặt phạm vi một lần trong constructor
  • Hoàn hảo cho cảm biến áp suất, giám sát điện áp và đọc analog

9. Web Rotator (`/web-rotator`)

  • Điều khiển đĩa xoay tương tác với phản hồi trực quan
  • Hai chế độ hoạt động: Liên tục (0-360°) và Giới hạn (phạm vi tùy chỉnh)
  • Phản hồi góc thời gian thực với xoay mượt
  • Hỗ trợ cảm ứng và chuột cho máy tính và di động
  • Thiết kế gradient hình nón chuyên nghiệp với chỉ thị vị trí
  • Hoàn hảo cho servo motor, stepper motor và điều khiển xoay

10. Web Temperature (`/web-temperature`)

  • Hiển thị nhiệt kế trực quan với giám sát nhiệt độ thời gian thực
  • Phạm vi nhiệt độ và đơn vị có thể cấu hình (°C, °F, K)
  • Trực quan hóa nhiệt kế tương tác với hoạt ảnh kiểu thủy ngân
  • Xử lý cấu hình tự động - đặt phạm vi một lần trong constructor
  • Cập nhật giá trị thời gian thực qua WebSocket
  • Hoàn hảo cho cảm biến nhiệt độ và giám sát môi trường

11. Web RTC (`/web-rtc`)

  • Hiển thị đồng hồ thời gian thực cho cả RTC ESP32 và thời gian thiết bị client
  • Đồng bộ thời gian một cú nhấp từ trình duyệt web đến RTC ESP32
  • Chỉ thị độ chênh thời gian trực quan hiển thị độ chính xác đồng bộ theo phút
  • Định dạng thời gian hai dòng với hiển thị 12 giờ AM/PM và ngày đầy đủ
  • Cập nhật thời gian thực dựa trên WebSocket để đồng bộ thời gian tức thì
  • Giao diện gradient hiện đại với bố cục kiểu card responsive
  • Đồng bộ nhận biết múi giờ sử dụng thời gian thiết bị local
  • Hỗ trợ RTC tích hợp đặc biệt cho ESP32
  • Giám sát trạng thái kết nối với chỉ thị WebSocket trực quan
  • Yêu cầu thời gian tự động khi tải trang để hiển thị ngay lập tức
  • Hoàn hảo cho đánh dấu thời gian, ghi log dữ liệu, lập lịch và tự động hóa dựa trên thời gian

12. Web Table (`/web-table`)

  • Bảng dữ liệu hai cột với các cặp thuộc tính-giá trị cho hiển thị dữ liệu có tổ chức
  • Cập nhật giá trị thời gian thực qua WebSocket để làm mới dữ liệu tức thì
  • Cấu trúc bảng có thể cấu hình thiết lập một lần trong hàm setup() ESP32
  • Cập nhật giá trị động trong thời gian chạy mà không cần làm mới trang
  • Thiết kế responsive hiện đại với hiệu ứng hover và phản hồi trực quan
  • Giám sát trạng thái kết nối với chỉ thị WebSocket trực quan
  • Xử lý trạng thái trống với thông báo thân thiện khi không có dữ liệu
  • Khả năng làm mới thủ công với nút làm mới chuyên dụng
  • Kiểu dữ liệu linh hoạt hỗ trợ string, số và giá trị đã định dạng
  • Lưu trữ hiệu quả bộ nhớ với số hàng tối đa có thể cấu hình (mặc định: 20)
  • Yêu cầu dữ liệu tự động khi tải trang để điền bảng ngay lập tức
  • Hoàn hảo cho giám sát sensor, trạng thái hệ thống, hiển thị cấu hình và dashboard thời gian thực

13. Template CustomWebApp (`/custom`)

  • Template hoàn chỉnh để tạo ứng dụng web tùy chỉnh riêng
  • Giao tiếp WebSocket thời gian thực với lọc tin nhắn tự động
  • Thiết kế dựa trên class chuyên nghiệp với hệ thống APP_IDENTIFIER đóng gói
  • Template thân thiện người mới với tin nhắn văn bản đơn giản giữa web và Arduino
  • Chức năng tự động kết nối lại cho kết nối WebSocket đáng tin cậy
  • Thiết kế responsive di động hoạt động trên điện thoại, tablet và máy tính
  • Hướng dẫn ngăn chặn xung đột để phát triển nhiều ứng dụng tùy chỉnh
  • Cấu trúc file modular với HTML, logic ESP32 và tích hợp thư viện tách biệt
  • Framework có thể mở rộng - chỉnh sửa template để tạo ứng dụng tinh vi
  • Sẵn sàng tích hợp - hoạt động liền mạch với các DIYables ESP32 WebApps khác
  • Hoàn hảo cho giao diện IoT tùy chỉnh, dashboard sensor, bảng điều khiển thiết bị và dự án giáo dục

🧩 Kiến Trúc Modular

Tối Ưu Bộ Nhớ: Thư viện DIYables ESP32 WebApps có thiết kế modular cho phép bạn chỉ bao gồm những ứng dụng web thực sự cần thiết, giảm đáng kể việc sử dụng bộ nhớ trên Arduino.

Lợi Ích Chính:

  • Tích Hợp Có Chọn Lọc: Chỉ thêm những ứng dụng web cần thiết vào dự án
  • Hiệu Quả Bộ Nhớ: Mỗi ứng dụng web độc lập và tùy chọn
  • Có Thể Mở Rộng: Bắt đầu nhỏ và thêm tính năng khi cần
  • Tối Ưu Hiệu Suất: Ít ứng dụng hoạt động = hiệu suất tốt hơn

Cách Thức Hoạt Động:

// Thiết lập cơ bản - chỉ bao gồm những gì bạn cần DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; // Luôn được khuyến khích DIYablesWebSliderPage webSliderPage; // Chỉ khi bạn cần slider DIYablesWebJoystickPage webJoystickPage; // Chỉ khi bạn cần joystick DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Chỉ khi bạn cần analog gauge DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Chỉ khi bạn cần rotator DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Chỉ khi bạn cần temperature DIYablesWebRTCPage webRTCPage; // Chỉ khi bạn cần đồng bộ thời gian // Chỉ thêm những ứng dụng bạn muốn webAppsServer.addApp(&homePage); webAppsServer.addApp(&webSliderPage); // Bỏ qua những ứng dụng bạn không cần webAppsServer.addApp(&gaugePage); // Chỉ thêm những gì bạn sử dụng webAppsServer.addApp(&tempPage); // để tiết kiệm bộ nhớ webAppsServer.addApp(&webRotatorPage); // Tùy chỉnh theo nhu cầu webAppsServer.addApp(&webRTCPage); // Thêm đồng bộ thời gian // Khởi động server - chọn phương thức phù hợp webAppsServer.begin("WiFi_SSID", "password"); // Kết nối WiFi // HOẶC // webAppsServer.begin(); // Cho Ethernet hoặc kết nối đã cấu hình trước (tương lai) // Quản lý runtime (nâng cao) if (sensorConnected) { webAppsServer.addApp(&webJoystickPage); // Thêm động }

Tính Linh Hoạt Runtime:

  • Quản Lý Động: Thêm hoặc xóa ứng dụng trong thời gian chạy bằng addApp() và removeApp()
  • Tải Có Điều Kiện: Tải ứng dụng dựa trên phần cứng hoặc cấu hình
  • Ứng Dụng Tùy Chỉnh: Tạo ứng dụng web tùy chỉnh bằng cách kế thừa từ DIYablesWebAppPageBase
  • Không Cần Biên Dịch Lại: Thay đổi ứng dụng có sẵn mà không cần rebuild

🔌 Tham Khảo API

Để có tài liệu API đầy đủ bao gồm tất cả class, phương thức và ví dụ sử dụng, xem:

Tài Liệu Tham Khảo API

📋 Ví Dụ

Thư viện bao gồm các hướng dẫn ví dụ toàn diện:

Mỗi hướng dẫn ví dụ bao gồm:

  • Hướng dẫn thiết lập từng bước
  • Sơ đồ kết nối phần cứng
  • Ví dụ code hoàn chỉnh
  • Hướng dẫn khắc phục sự cố
  • Ý tưởng dự án và mẹo tích hợp

🌐 URL Giao Diện Web

Sau khi kết nối WiFi, truy cập các ứng dụng tại:

  • Trang Chủ: http://[IP_ADDRESS]/
  • Web Chat: http://[IP_ADDRESS]/chat
  • Web Monitor: http://[IP_ADDRESS]/web-monitor
  • Web Plotter: http://[IP_ADDRESS]/web-plotter
  • Web Digital Pins: http://[IP_ADDRESS]/web-digital-pins
  • Web Slider: http://[IP_ADDRESS]/web-slider
  • Web Joystick: http://[IP_ADDRESS]/web-joystick
  • Web Analog Gauge: http://[IP_ADDRESS]/web-gauge
  • Web Rotator: http://[IP_ADDRESS]/web-rotator
  • Web Temperature: http://[IP_ADDRESS]/web-temperature
  • Web RTC: http://[IP_ADDRESS]/web-rtc
  • Web Table: http://[IP_ADDRESS]/web-table
  • Custom App: http://[IP_ADDRESS]/custom (khi sử dụng template CustomWebApp)

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