Trang chủ
Arduino UNO R4

Arduino WebChat Example Hướng Dẫn Giao Diện Chat Tương Tác

Tổng Quan

Ví dụ WebChat minh họa cách tạo giao diện chat tương tác giữa trình duyệt web và Arduino. Được thiết kế cho Arduino Uno R4 WiFi và 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 liền mạch với các sensor tích hợp. Arduino có thể phản hồi thông minh với các tin nhắn và điều khiển phần cứng dựa trên lệnh chat.

Arduino webchat example - hướng dẫn giao diện chat tương tác

Tính Năng

  • Chat Thời Gian Thực: Tin nhắn tức thì qua WebSocket
  • Phản Hồi Thông Minh: Arduino cung cấp câu trả lời phù hợp ngữ cảnh
  • Điều Khiển LED: Điều khiển LED tích hợp qua lệnh chat
  • Nhận Diện Người Dùng: Arduino nhớ tên của bạn
  • Lịch Sử Tin Nhắn: Xem lại lịch sử cuộc trò chuyện
  • Thiết Kế Đáp Ứng: Hoạt động trên desktop và mobile
  • Nền Tảng Mở Rộng: Hiện tại được thực hiện 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

Phần Cứng Cần Thiết

1×Arduino UNO R4 WiFi
1×Alternatively, DIYables STEM V4 IoT
1×(Tùy chọn) DIYables STEM V4 IoT
1×Cáp USB Type-C
1×(Khuyến nghị) Screw Terminal Block Shield for Arduino UNO R4
1×(Khuyến nghị) Breadboard Shield for Arduino UNO R4
1×(Khuyến nghị) Enclosure for Arduino UNO R4
1×(Khuyến nghị) Power Splitter for Arduino UNO R4
1×(Khuyến nghị) Prototyping Base Plate & Breadboard Kit for Arduino UNO

Or you can buy the following kits:

1×DIYables STEM V4 IoT Starter Kit (Arduino included)
1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)

Hướng Dẫn Thiết Lập

Các Bước Nhanh

Thực hiện theo các hướng dẫn sau từng bước:

  • Mới sử dụng Arduino Uno R4 WiFi/DIYables STEM V4 IoT? Hãy bắt đầu với hướng dẫn Arduino UNO R4 - Cài Đặt Phần Mềm để học các kiến thức cơ bản trước.
  • Kết nối bo mạch Arduino Uno R4/DIYables STEM V4 IoT với máy tính của bạn bằng cáp USB.
  • Khởi động Arduino IDE trên máy tính của bạn.
  • Chọn bo mạch Arduino Uno R4 phù hợp (ví dụ: Arduino Uno R4 WiFi) và cổng COM.
  • Điều hướng đến biểu tượng Libraries trên thanh bên trái của Arduino IDE.
  • Tìm kiếm "DIYables WebApps", sau đó tìm thư viện DIYables WebApps của DIYables
  • Nhấp nút Install để cài đặt thư viện.
Arduino UNO R4 diyables webapps thư viện
  • Bạn sẽ được yêu cầu 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ả các thư viện phụ thuộc.
Arduino UNO R4 diyables webapps dependency
  • Trên Arduino IDE, đi đến File Examples DIYables WebApps WebChat example, hoặc copy đoạn code trên và dán vào editor của Arduino IDE
/* * DIYables WebApp Library - WebChat Example * * This example demonstrates the WebChat feature: * - Interactive chat interface * - Intelligent Arduino responses * - Built-in LED control via chat commands * * Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT * * Setup: * 1. Update WiFi credentials below * 2. Upload the sketch to your Arduino * 3. Open Serial Monitor to see the IP address * 4. Navigate to http://[IP_ADDRESS]/chat */ #include <DIYablesWebApps.h> // WiFi credentials - UPDATE THESE WITH YOUR NETWORK const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create WebApp server and page instances UnoR4ServerFactory serverFactory; DIYablesWebAppServer webAppsServer(serverFactory, 80, 81); DIYablesHomePage homePage; DIYablesWebChatPage chatPage; // Chat variables String userName = ""; int chatCount = 0; void setup() { Serial.begin(9600); delay(1000); Serial.println("DIYables WebApp - WebChat Example"); // Add only home and webchat pages webAppsServer.addApp(&homePage); webAppsServer.addApp(&chatPage); // Optional: Add 404 page for better user experience (local object) webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Initialize LED for chat commands pinMode(LED_BUILTIN, OUTPUT); // Start the WebApp server if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) { while (1) { Serial.println("Failed to start WebApp server!"); delay(1000); } } // Set up chat callback chatPage.onChatMessage([](const String& message) { chatCount++; Serial.println("Chat message #" + String(chatCount) + ": " + message); String response = ""; String lowerMessage = message; lowerMessage.toLowerCase(); // Process chat commands if (lowerMessage.indexOf("hello") >= 0 || lowerMessage.indexOf("hi") >= 0) { response = "Hello! I'm your Arduino assistant. Try saying 'led on' or 'led off' to control the LED!"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("led on") >= 0 || lowerMessage.indexOf("light on") >= 0) { digitalWrite(LED_BUILTIN, HIGH); response = "LED is now ON! ✨"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("led off") >= 0 || lowerMessage.indexOf("light off") >= 0) { digitalWrite(LED_BUILTIN, LOW); response = "LED is now OFF! 💡"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("status") >= 0) { String ledStatus = digitalRead(LED_BUILTIN) ? "ON" : "OFF"; response = "Arduino Status: LED is " + ledStatus + ", Uptime: " + String(millis() / 1000) + " seconds"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("help") >= 0) { response = "Available commands: 'led on', 'led off', 'status', 'help'. Just chat with me!"; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("time") >= 0) { response = "Arduino has been running for " + String(millis() / 1000) + " seconds."; chatPage.sendToChat(response); return; } if (lowerMessage.indexOf("name") >= 0) { response = "I'm your Arduino Uno R4 WiFi! What's your name?"; chatPage.sendToChat(response); return; } // General responses String responses[] = { "That's interesting! Tell me more.", "I understand! As an Arduino, I love processing your messages.", "Cool! I'm here and ready to help.", "Thanks for chatting with me! Try 'led on' to see something happen.", "I'm just an Arduino, but I enjoy our conversation!" }; response = responses[chatCount % 5]; chatPage.sendToChat(response); }); // Send welcome message chatPage.sendToChat("Arduino Chat Bot is online! 🤖"); chatPage.sendToChat("Say 'hello' or 'help' to get started!"); } void loop() { // Handle WebApp server communications webAppsServer.loop(); // Add your main application code here delay(10); }
  • Cấu hình thông tin xác thực WiFi trong code bằng cách cập nhật các dòng này:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
  • Nhấp nút Upload trên Arduino IDE để tải code lên Arduino UNO R4/DIYables STEM V4 IoT
  • Mở Serial Monitor
  • Kiểm tra kết quả trên Serial Monitor. Nó sẽ trông như thế này
COM6
Send
DIYables WebApp - WebChat Example INFO: Added app / INFO: Added app /chat DIYables WebApp Library Platform: Arduino Uno R4 WiFi Network connected! IP address: 192.168.0.2 HTTP server started on port 80 Configuring WebSocket server callbacks... WebSocket server started on port 81 WebSocket URL: ws://192.168.0.2:81 WebSocket server started on port 81 ========================================== DIYables WebApp Ready! ========================================== 📱 Web Interface: http://192.168.0.2 🔗 WebSocket: ws://192.168.0.2:81 📋 Available Applications: 🏠 Home Page: http://192.168.0.2/ 💬 WebChat: http://192.168.0.2/chat ==========================================
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Nếu bạn không thấy gì, hãy khởi động lại bo mạch Arduino.
  • Ghi nhớ đị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 smartphone hoặc PC của bạn.
  • Ví dụ: http://192.168.0.2
  • Bạn sẽ thấy trang chủ như hình dưới đây:
Arduino UNO R4 diyables webapp home page with web chat app
  • Nhấp vào liên kết Chat, bạn sẽ thấy giao diện của ứng dụng Web Chat như hình dưới:
Arduino UNO R4 diyables webapp web chat app
  • Hoặc bạn cũng có thể truy cập trực tiếp trang này bằng địa chỉ IP theo sau bởi /chat. Ví dụ: http://192.168.0.2/chat
  • Bắt đầu chat với Arduino của bạn! Nhập tên của bạn khi được nhắc và thử các lệnh như "led on", "hello", hoặc "help" để tương tác với Arduino.

Cách Sử Dụng

Bắt Đầu Cuộc Trò Chuyện

  1. Mở giao diện chat trong trình duyệt của bạn
  2. Nhập tên của bạn khi được yêu cầu
  3. Bắt đầu chat với Arduino của bạn!

Lệnh Chat

Arduino nhận diện các lệnh đặc biệt sau:

Điều Khiển LED

  • "led on" hoặc "turn on led" → Bật LED tích hợp
  • "led off" hoặc "turn off led" → Tắt LED tích hợp
  • "blink" hoặc "blink led" → Làm LED nhấp nháy

Lệnh Thông Tin

  • "hello" hoặc "hi" → Lời chào thân thiện
  • "help" → Hiển thị các lệnh có sẵn
  • "time" → Hiển thị thời gian hoạt động của Arduino
  • "status" → Hiển thị trạng thái hệ thống

Câu Hỏi

  • "how are you?" → Arduino chia sẻ trạng thái của mình
  • "what can you do?" → Liệt kê các khả năng
  • "what is your name?" → Arduino giới thiệu bản thân

Ví Dụ Cuộc Trò Chuyện

Bạn: Hello Arduino: Hi there! I'm your Arduino assistant. What's your name? Bạn: My name is John Arduino: Nice to meet you, John! I'm ready to help. Bạn: led on Arduino: LED turned ON for you, John! 💡 Bạn: what can you do? Arduino: I can control LEDs, respond to your messages, and remember your name. Try saying 'help' for commands! Bạn: help Arduino: Available commands: * 'led on/off' - Control LED * 'blink' - Blink LED * 'status' - Show system info * 'time' - Show uptime

Tùy Chỉnh Sáng Tạo - Xây Dựng Trợ Lý Tương Tác Của Riêng Bạn

Biến đổi ví dụ chat cơ bản này thành điều gì đó tuyệt vời! Thiết kế modular cho phép bạn điều chỉnh và mở rộng chức năng để tạo ra trợ lý Arduino tương tác độc đáo của riêng bạn.

Cấu Trúc Code

Các Thành Phần Chính

  1. WebApp Server: Quản lý kết nối HTTP và WebSocket
  2. Trang Chat: Cung cấp giao diện web
  3. Trình Xử Lý Tin Nhắn: Xử lý tin nhắn chat đến
  4. Trình Tạo Phản Hồi: Tạo câu trả lời thông minh

Các Hàm Chính

// Handle incoming chat messages void handleChatMessage(String message, String clientId) { // Process message and generate response } // Send message to web interface void sendChatResponse(String response, String clientId) { // Send response via WebSocket }

Thêm Lệnh Tùy Chỉnh

Để thêm lệnh chat mới, hãy chỉnh sửa hàm handleChatMessage:

if (message.indexOf("your_command") >= 0) { response = "Your custom response"; // Add your custom action here }

Tùy Chọn Tùy Chỉnh

Chỉnh Sửa Tính Cách Arduino

Chỉnh sửa tin nhắn phản hồi để thay đổi tính cách của Arduino:

String greetings[] = { "Hello! How can I help you today?", "Hi there! Ready to chat?", "Greetings! What's on your mind?" };

Thêm Điều Khiển Phần Cứng

Mở rộng điều khiển LED cho các linh kiện khác:

// Control servo motor if (message.indexOf("move servo") >= 0) { servo.write(90); response = "Servo moved to 90 degrees!"; } // Read sensor data if (message.indexOf("temperature") >= 0) { float temp = getTemperature(); response = "Current temperature: " + String(temp) + "°C"; }

Thay Đổi Theme Giao Diện Web

Giao diện chat có thể được tùy chỉnh bằng cách chỉnh sửa CSS trong các file thư viện:

  • Màu sắc: Chỉnh sửa nền gradient
  • Font chữ: Thay đổi họ font
  • Layout: Điều chỉnh khoảng cách và kích thước

Xử Lý Sự Cố

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

1. Arduino không phản hồi tin nhắn

  • Kiểm tra Serial Monitor để tìm thông báo lỗi
  • Xác minh trạng thái kết nối WebSocket
  • Làm mới trang trình duyệt

2. Kết nối WiFi thất bại

  • Kiểm tra kỹ SSID và password
  • Đảm bảo mạng 2.4GHz (không phải 5GHz)
  • Kiểm tra cường độ tín hiệu

3. Không thể truy cập trang chat

  • Xác minh địa chỉ IP là chính xác
  • Kiểm tra xem Arduino có còn kết nối WiFi không
  • Thử truy cập trang chủ trước: http://[IP]/

4. LED không phản hồi lệnh

  • Kiểm tra kết nối dây (LED tích hợp sẽ hoạt động mặc định)
  • Xác minh lệnh được viết chính xác
  • Kiểm tra Serial Monitor để tìm tin nhắn debug

Mẹo Debug

Kích hoạt chế độ debug bằng cách thêm dòng này vào setup():

Serial.println("Debug mode enabled");

Theo dõi đầu ra Serial để thấy:

  • Tin nhắn đến
  • Phân tích lệnh
  • Tạo phản hồi
  • Hành động phần cứng

Tính Năng Nâng Cao

Hỗ Trợ Nhiều Client

Chat hỗ trợ nhiều người dùng đồng thời:

  • Mỗi người dùng có phiên riêng biệt
  • Arduino nhớ tên từng cá nhân
  • Phát tin nhắn cho tất cả người dùng

Lưu Trữ Tin Nhắn

Thêm ghi log tin nhắn vào EEPROM:

#include <EEPROM.h> void saveMessage(String message) { // Save to EEPROM for persistence }

Tích Hợp Với Sensor

Kết nối sensor và làm chúng có thể truy cập qua chat:

// Temperature sensor if (message.indexOf("temperature") >= 0) { float temp = analogRead(A0) * 0.1; // Example conversion response = "Temperature: " + String(temp) + "°C"; }

Bước Tiếp Theo

Sau khi thành thạo ví dụ Chat, hãy thử:

  1. WebMonitor - Để debug và phát triển
  2. DigitalPins - Để điều khiển nhiều output
  3. Joystick - Để điều khiển theo hướng
  4. MultipleWebApps - Kết hợp tất cả tính năng

Hỗ Trợ

Để được hỗ trợ thêm:

  • Kiểm tra tài liệu API Reference
  • Truy cập hướng dẫn DIYables: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
  • Diễn đàn cộng đồng Arduino

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