Trang chủ
Arduino UNO R4

Tài Liệu Tham Khảo API Thư Viện DIYables WebApps Hướng Dẫn Đầy Đủ

Tổng Quan

Thư viện DIYables WebApps cung cấp một giải pháp modular toàn diện để tạo các ứng dụng web dựa trên WebSocket trên Arduino Uno R4 WiFi và DIYables STEM V4 IoT. Nó bao gồm nhiều ứng dụng web được xây dựng sẵn và một framework linh hoạt để tạo các ứng dụng tùy chỉnh. Được tối ưu hóa đặc biệt cho nền tảng giáo dục DIYables STEM V4 IoT với khả năng IoT nâng cao và tích hợp cảm biến có sẵn.

Thư viện sử dụng kiến trúc modular nơi bạn chỉ bao gồm các ứng dụng web mà bạn cần, giúp tiết kiệm bộ nhớ và cải thiện hiệu suất.

Tính Năng

  • Kiến Trúc Modular: Chỉ thêm các ứng dụng web bạn cần để tối ưu hóa việc sử dụng bộ nhớ
  • Hiệu Quả Bộ Nhớ: Mỗi ứng dụng web có thể được bật/tắt độc lập
  • Hơn 11 Ứng Dụng Web Sẵn Sàng: Điều khiển Arduino hoàn toàn mà không cần kiến thức lập trình web
  • Framework Ứng Dụng Web Tùy Chỉnh: Tạo các ứng dụng của riêng bạn sử dụng hệ thống lớp cơ sở
  • Giao Tiếp Thời Gian Thực: Dựa trên WebSocket để cập nhật tức thì
  • Thiết Kế Responsive: Hoạt động trên desktop, tablet và thiết bị di động
  • Tích Hợp Dễ Dàng: API đơn giản dựa trên callback
  • Hỗ Trợ Đa Ứng Dụng: Hỗ trợ thêm nhiều ứng dụng web đồng thời
  • Mở Rộng Nền Tảng: Hiện được triển khai cho Arduino Uno R4 WiFi, nhưng có thể mở rộng cho các nền tảng phần cứng khác. Xem DIYables_WebApps_ESP32

Các Lớp Cốt Lõi

DIYablesWebAppServer

Lớp server chính quản lý các ứng dụng web, HTTP request và giao tiếp WebSocket.

Constructor

DIYablesWebAppServer(int httpPort = 80, int websocketPort = 81)

Tạo một instance web app server.

  • httpPort: Cổng HTTP server (mặc định: 80)
  • websocketPort: Cổng WebSocket server (mặc định: 81)

Các Phương Thức

Thiết Lập và Kết Nối
bool begin()

Khởi tạo kết nối mạng (cho Ethernet hoặc kết nối đã cấu hình trước) và khởi động web server.

  • Trả về: true nếu thành công, false nếu thất bại
  • Trường hợp sử dụng: Cho hỗ trợ Ethernet trong tương lai hoặc khi thông tin WiFi đã được cấu hình sẵn
bool begin(const char* ssid, const char* password)

Khởi tạo kết nối WiFi và khởi động web server.

  • ssid: Tên mạng WiFi
  • password: Mật khẩu WiFi
  • Trả về: true nếu thành công, false nếu thất bại
  • Trường hợp sử dụng: Kết nối WiFi tiêu chuẩn với thông tin xác thực
void loop()

Xử lý HTTP request và giao tiếp WebSocket. Phải được gọi trong vòng lặp chính.

bool isConnected()

Trả về true nếu WiFi đã kết nối.

String getIPAddress()

Trả về địa chỉ IP của Arduino dưới dạng chuỗi.

Quản Lý Ứng Dụng
void addApp(DIYablesWebAppPageBase* app)

Thêm một ứng dụng web vào server.

  • app: Con trỏ đến một instance ứng dụng web
void removeApp(const String& path)

Xóa một ứng dụng web theo đường dẫn URL của nó.

  • path: Đường dẫn URL của ứng dụng (ví dụ: "/chat")
DIYablesWebAppPageBase* getApp(const String& path)

Lấy một ứng dụng web theo đường dẫn URL của nó.

  • path: Đường dẫn URL của ứng dụng
  • Trả về: Con trỏ đến ứng dụng hoặc nullptr nếu không tìm thấy
void setNotFoundPage(const DIYablesNotFoundPage& page)

Thiết lập trang 404 Not Found (tùy chọn).

  • page: Instance trang 404
Truy Cập Ứng Dụng Chuyên Biệt
DIYablesWebDigitalPinsPage* getWebDigitalPinsPage()

Lấy instance trang digital pins nếu đã được thêm.

  • Trả về: Con trỏ đến trang digital pins hoặc nullptr
DIYablesWebSliderPage* getWebSliderPage()

Lấy instance trang slider nếu đã được thêm.

  • Trả về: Con trỏ đến trang slider hoặc nullptr
DIYablesWebJoystickPage* getWebJoystickPage()

Lấy instance trang joystick nếu đã được thêm.

  • Trả về: Con trỏ đến trang joystick hoặc nullptr

Các Lớp Cơ Sở

DIYablesWebAppPageBase

Lớp cơ sở trừu tượng mà tất cả các ứng dụng web kế thừa từ đó. Cung cấp chức năng chung cho xử lý HTTP, giao tiếp WebSocket và quản lý trang.

Constructor

DIYablesWebAppPageBase(const String& pagePath)

Tạo một instance trang cơ sở với đường dẫn URL được chỉ định.

  • pagePath: Đường dẫn URL cho trang (ví dụ: "/web-joystick")

Phương Thức Ảo (Phải được triển khai bởi các lớp dẫn xuất)

virtual void handleHTTPRequest(IWebClient& client) = 0

Xử lý HTTP request cho trang này. Phương thức ảo thuần túy.

  • client: Interface web client để gửi phản hồi
virtual void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) = 0

Xử lý WebSocket message cho trang này. Phương thức ảo thuần túy.

  • ws: Interface kết nối WebSocket
  • message: Nội dung message nhận được
  • length: Độ dài message
virtual const char* getPageInfo() const = 0

Trả về chuỗi nhận dạng trang được sử dụng trong hiển thị thông tin kết nối. Phương thức ảo thuần túy.

  • Trả về: Chuỗi thông tin trang (ví dụ: "🕹️ Web Joystick: ")
virtual String getNavigationInfo() const = 0

Trả về HTML cho nút điều hướng trang chủ. Phương thức ảo thuần túy.

  • Trả về: Chuỗi HTML cho thẻ điều hướng

Phương Thức Ảo (Ghi đè tùy chọn)

virtual void onWebSocketConnection(IWebSocket& ws)

Được gọi khi một kết nối WebSocket mới được thiết lập.

  • ws: Kết nối WebSocket mới
virtual void onWebSocketClose(IWebSocket& ws)

Được gọi khi một kết nối WebSocket bị đóng.

  • ws: Kết nối WebSocket đã đóng

Các Phương Thức Chung

const char* getPagePath() const

Lấy đường dẫn URL cho trang này.

  • Trả về: Chuỗi đường dẫn trang
bool isEnabled() const

Kiểm tra xem trang hiện có được bật hay không.

  • Trả về: true nếu được bật, false nếu bị tắt
void setEnabled(bool enable)

Bật hoặc tắt trang.

  • enable: true để bật, false để tắt

Phương Thức Tiện Ích

void sendHTTPHeader(IWebClient& client, const char* contentType = "text/html")

Gửi HTTP header tiêu chuẩn đến client.

  • client: Interface web client
  • contentType: Loại MIME (mặc định: "text/html")
void sendWebSocketMessage(IWebSocket& ws, const char* message)

Gửi một message đến client WebSocket cụ thể.

  • ws: Kết nối WebSocket đích
  • message: Message để gửi
void broadcastToAllClients(const char* message)

Phát một message đến tất cả các client WebSocket đã kết nối.

  • message: Message để phát
void sendLargeHTML(IWebClient& client, const char* html)

Gửi nội dung HTML lớn sử dụng chunked transfer encoding.

  • client: Interface web client
  • html: Nội dung HTML để gửi

Ví Dụ Sử Dụng

class CustomPage : public DIYablesWebAppPageBase { public: CustomPage() : DIYablesWebAppPageBase("/custom") {} void handleHTTPRequest(IWebClient& client) override { sendHTTPHeader(client); client.println("<html><body>Custom Page</body></html>"); } void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) override { // Xử lý WebSocket messages sendWebSocketMessage(ws, "Response: " + String(message)); } const char* getPageInfo() const override { return " 🔧 Custom Page: "; } String getNavigationInfo() const override { return "<a href=\"/custom\" class=\"app-card custom\">" "<h3>🔧 Custom</h3><p>Tính năng tùy chỉnh</p></a>"; } };

Các Lớp Ứng Dụng Web

DIYablesHomePage

Trung tâm điều hướng cung cấp liên kết đến tất cả các ứng dụng được bật.

Constructor

DIYablesHomePage()

Đường Dẫn URL

  • Path: / (root)

DIYablesWebChatPage

Giao diện chat tương tác cho giao tiếp hai chiều với Arduino.

Constructor

DIYablesWebChatPage()

Đường Dẫn URL

  • Path: /webchat

Các Phương Thức

void onWebChatMessage(std::function<void(const String&)> callback)

Thiết lập callback cho chat message đến.

void sendToWebChat(const String& message)

Gửi một message đến giao diện web chat.

DIYablesWebMonitorPage

Serial monitor dựa trên web cho output thời gian thực và nhập lệnh.

Constructor

DIYablesWebMonitorPage()

Đường Dẫn URL

  • Path: /webmonitor

Các Phương Thức

void onWebMonitorMessage(std::function<void(const String&)> callback)

Thiết lập callback cho monitor message đến.

void sendToWebMonitor(const String& message)

Gửi một message đến giao diện web monitor.

DIYablesWebDigitalPinsPage

Điều khiển và giám sát các chân digital 0-13 thông qua giao diện web.

Constructor

DIYablesWebDigitalPinsPage()

Đường Dẫn URL

  • Path: /webdigitalpins

Các Phương Thức

void enablePin(int pin, int mode)

Bật một chân cho điều khiển web.

  • pin: Số chân (0-13)
  • mode: WEB_PIN_OUTPUT hoặc WEB_PIN_INPUT
void onPinWrite(std::function<void(int, int)> callback)

Thiết lập callback cho thao tác ghi chân (output pins).

void onPinRead(std::function<int(int)> callback)

Thiết lập callback cho thao tác đọc chân (input pins).

void onPinModeChange(std::function<void(int, int)> callback)

Thiết lập callback cho thay đổi chế độ chân.

void updatePinState(int pin, int state)

Cập nhật trạng thái chân theo thời gian thực cho các client web.

DIYablesWebSliderPage

Điều khiển slider kép cho ứng dụng analog/PWM.

Constructor

DIYablesWebSliderPage()

Đường Dẫn URL

  • Path: /webslider

Các Phương Thức

void onSliderValueFromWeb(std::function<void(int, int)> callback)

Thiết lập callback cho thay đổi giá trị slider từ web.

  • Tham số: slider1 (0-255), slider2 (0-255)
void onSliderValueToWeb(std::function<void()> callback)

Thiết lập callback cho client web yêu cầu giá trị hiện tại.

void sendToWebSlider(int slider1, int slider2)

Gửi giá trị slider đến giao diện web.

DIYablesWebJoystickPage

Điều khiển joystick 2D cho ứng dụng robot và định vị.

Constructor

DIYablesWebJoystickPage(bool autoReturn = true, float sensitivity = 10.0)
  • autoReturn: Liệu joystick có tự động trở về giữa hay không
  • sensitivity: Tỷ lệ phần trăm chuyển động tối thiểu để kích hoạt cập nhật

Đường Dẫn URL

  • Path: /webjoystick

Các Phương Thức

void onJoystickValueFromWeb(std::function<void(int, int)> callback)

Thiết lập callback cho chuyển động joystick từ web.

  • Tham số: x (-100 đến 100), y (-100 đến 100)
void onJoystickValueToWeb(std::function<void()> callback)

Thiết lập callback cho client web yêu cầu vị trí hiện tại.

void sendToWebJoystick(int x, int y)

Gửi vị trí joystick đến giao diện web.

void setAutoReturn(bool autoReturn)

Thiết lập hành vi tự động trở về.

void setSensitivity(float sensitivity)

Thiết lập độ nhạy chuyển động (tỷ lệ phần trăm).

DIYablesWebPlotterPage

Hiển thị dữ liệu trực quan thời gian thực với hỗ trợ nhiều chuỗi dữ liệu.

Constructor

DIYablesWebPlotterPage()

Đường Dẫn URL

  • Path: /webplotter

Các Phương Thức

void setPlotTitle(const String& title)

Thiết lập tiêu đề biểu đồ.

void setAxisLabels(const String& xLabel, const String& yLabel)

Thiết lập nhãn trục.

void enableAutoScale(bool enable)

Bật hoặc tắt tự động chia tỷ lệ trục Y.

void setMaxSamples(int maxSamples)

Thiết lập số lượng điểm dữ liệu tối đa để hiển thị.

void addDataPoint(const String& seriesName, float x, float y)

Thêm một điểm dữ liệu vào chuỗi.

void clearPlot()

Xóa tất cả dữ liệu khỏi biểu đồ.

DIYablesNotFoundPage

Trang lỗi 404 tùy chọn để có trải nghiệm người dùng tốt hơn.

Constructor

DIYablesNotFoundPage()

Ví Dụ Sử Dụng Cơ Bản

#include <DIYablesWebApps.h> // Thông tin WiFi const char* ssid = "YOUR_WIFI_SSID"; const char* password = "YOUR_WIFI_PASSWORD"; // Tạo server và các ứng dụng web DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; DIYablesWebChatPage chatPage; DIYablesWebMonitorPage monitorPage; void setup() { Serial.begin(9600); // Chỉ thêm những ứng dụng bạn cần webAppsServer.addApp(&homePage); webAppsServer.addApp(&chatPage); webAppsServer.addApp(&monitorPage); // Tùy chọn: Thêm trang 404 webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Khởi động server if (webAppsServer.begin(ssid, password)) { Serial.println("Server khởi động thành công"); Serial.print("IP: "); Serial.println(webAppsServer.getIPAddress()); } // Thiết lập callback chatPage.onWebChatMessage([](const String& message) { Serial.println("Chat: " + message); chatPage.sendToWebChat("Arduino đã nhận: " + message); }); } void loop() { webAppsServer.loop(); delay(10); }

Tổng Quan Các Ứng Dụng Web

Trang Chủ

  • URL: http://[arduino-ip]/
  • Mục đích: Trung tâm điều hướng
  • Tính năng: Liên kết đến tất cả ứng dụng được bật, trạng thái kết nối

Ứng Dụng WebChat

  • URL: http://[arduino-ip]/webchat
  • Mục đích: Giao diện giao tiếp hai chiều
  • Tính năng: Nhắn tin thời gian thực, lịch sử tin nhắn, trạng thái WebSocket

Web Monitor

  • URL: http://[arduino-ip]/webmonitor
  • Mục đích: Thay thế serial monitor
  • Tính năng: Output serial thời gian thực, nhập lệnh, giao diện tối

Điều Khiển Digital Pins Web

  • URL: http://[arduino-ip]/webdigitalpins
  • Mục đích: Điều khiển các chân digital 0-13
  • Tính năng: Điều khiển từng chân, thao tác hàng loạt, trạng thái thời gian thực

Điều Khiển Slider Web

  • URL: http://[arduino-ip]/webslider
  • Mục đích: Điều khiển analog/PWM kép
  • Tính năng: Hai slider độc lập (0-255), giá trị preset, phản hồi thời gian thực

Điều Khiển Joystick Web

  • URL: http://[arduino-ip]/webjoystick
  • Mục đích: Điều khiển vị trí 2D cho robot/xe
  • Tính năng: Điều khiển touch/chuột, hiển thị tọa độ, điều chỉnh độ nhạy

Web Plotter

  • URL: http://[arduino-ip]/webplotter
  • Mục đích: Hiển thị dữ liệu trực quan thời gian thực
  • Tính năng: Nhiều chuỗi dữ liệu, tự động chia tỷ lệ, tiêu đề và trục có thể cấu hình

Giao Tiếp WebSocket

Tất cả ứng dụng sử dụng WebSocket trên cổng 81 cho giao tiếp thời gian thực:

  • WebSocket URL: ws://[arduino-ip]:81
  • Kết nối: Tự động kết nối lại khi bị ngắt
  • Giao thức: Định dạng message dựa trên văn bản

Định Dạng Message

WebChat Messages

  • Từ Web: Message văn bản trực tiếp
  • Đến Web: Message văn bản trực tiếp

Web Monitor Messages

  • Từ Web: Message văn bản trực tiếp
  • Đến Web: Message văn bản trực tiếp

Web Digital Pin Messages

  • Từ Web: Định dạng JSON: {"pin": 13, "state": 1}
  • Đến Web: Định dạng JSON: {"pin": 13, "state": 1}

Web Slider Messages

  • Từ Web: Định dạng JSON: {"slider1": 128, "slider2": 255}
  • Đến Web: Định dạng JSON: {"slider1": 128, "slider2": 255}

Web Joystick Messages

  • Từ Web: Định dạng JSON: {"x": 50, "y": -25}
  • Đến Web: Định dạng JSON: {"x": 50, "y": -25}

Web Plotter Messages

  • Từ Web: Không áp dụng (chỉ hiển thị)
  • Đến Web: Định dạng JSON: {"series": "temp", "x": 10.5, "y": 23.4}

Xử Lý Lỗi

Thư viện bao gồm xử lý lỗi tự động cho:

  • Lỗi kết nối WiFi
  • Ngắt kết nối WebSocket
  • Định dạng message không hợp lệ
  • Giới hạn kết nối client

Sử Dụng Bộ Nhớ

Lợi Ích Kiến Trúc Modular: Chỉ bao gồm các ứng dụng web bạn cần để tối ưu hóa việc sử dụng bộ nhớ.

Ước tính sử dụng bộ nhớ cho mỗi thành phần:

  • DIYablesWebAppServer: ~8KB Flash, ~2KB RAM
  • DIYablesHomePage: ~3KB Flash, ~1KB RAM
  • DIYablesWebChatPage: ~6KB Flash, ~1.5KB RAM
  • DIYablesWebMonitorPage: ~5KB Flash, ~1.5KB RAM
  • DIYablesWebDigitalPinsPage: ~8KB Flash, ~2KB RAM
  • DIYablesWebSliderPage: ~6KB Flash, ~1.5KB RAM
  • DIYablesWebJoystickPage: ~7KB Flash, ~1.5KB RAM
  • DIYablesWebPlotterPage: ~10KB Flash, ~2KB RAM
  • WebSocket Buffer: ~1KB RAM cho mỗi kết nối

Tổng nếu bật tất cả ứng dụng: ~53KB Flash, ~12KB RAM

Thiết lập tối thiểu (server + trang chủ + 1 ứng dụng): ~17KB Flash, ~4.5KB RAM

Tương Thích Trình Duyệt

Các trình duyệt được hỗ trợ:

  • Chrome 50+
  • Firefox 45+
  • Safari 10+
  • Edge 79+
  • Trình duyệt di động (iOS Safari, Chrome Mobile)

Lưu Ý Bảo Mật

  • Không triển khai xác thực (phù hợp chỉ cho mạng nội bộ)
  • Chỉ sử dụng trong mạng đáng tin cậy
  • Cân nhắc thêm xác thực cho triển khai công cộng

Khắc Phục Sự Cố

Các Vấn Đề Thường Gặp

  1. Không thể kết nối WiFi

- Kiểm tra SSID và mật khẩu

- Xác minh mạng là 2.4GHz (không phải 5GHz)

- Kiểm tra cường độ tín hiệu

  1. Kết nối WebSocket thất bại

- Xác minh địa chỉ IP đúng

- Kiểm tra cài đặt firewall

- Thử trình duyệt khác

  1. Sử dụng bộ nhớ cao

- Tắt các ứng dụng không sử dụng

- Giới hạn kết nối đồng thời

- Khởi động lại Arduino nếu xảy ra phân mảnh bộ nhớ

  1. Phản hồi chậm

- Kiểm tra cường độ tín hiệu WiFi

- Giảm tần suất WebSocket message

- Sử dụng hàm callback ngắn hơn

Ví Dụ Ứng Dụng

Thư viện DIYables WebApps bao gồm các ví dụ toàn diện được thiết kế cho Arduino Uno R4 WiFi và nền tảng giáo dục DIYables STEM V4 IoT:

Các Ví Dụ Có Sẵn

  • Ví Dụ Chat: Giao diện giao tiếp hai chiều
  • Ví Dụ WebMonitor: Thay thế serial monitor với tính năng nâng cao
  • Ví Dụ WebDigitalPins: Điều khiển tất cả chân digital với phản hồi trực quan
  • Ví Dụ WebSlider: Điều khiển analog/PWM kép với preset

-

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