Ejemplo de Arduino WebChat - Tutorial de interfaz de chat interactiva
Visión general
El ejemplo de WebChat demuestra cómo crear una interfaz de chat interactiva entre un navegador web y Arduino. Diseñado para la plataforma educativa Arduino Uno R4 WiFi y DIYables STEM V4 IoT con capacidades IoT mejoradas e integración perfecta con sensores integrados. El Arduino puede responder de forma inteligente a los mensajes y controlar el hardware en función de los comandos de chat.
Características
- Chat en tiempo real: Mensajería instantánea vía WebSocket
- Respuestas inteligentes: Arduino proporciona respuestas contextuales
- Control del LED: Control del LED incorporado mediante comandos de chat
- Reconocimiento de usuario: Arduino recuerda tu nombre
- Historial de mensajes: Ver historial de la conversación
- Diseño responsivo: Funciona en escritorio y móvil
- Plataforma extensible: Actualmente implementado para Arduino Uno R4 WiFi, pero puede extenderse a otras plataformas de hardware. Ver DIYables_WebApps_ESP32
Hardware Requerido
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) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Instrucciones de configuración
Pasos Rápidos
Siga estas instrucciones paso a paso:
- Si es la primera vez que usas el Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulta el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecta la placa Arduino Uno R4/DIYables STEM V4 IoT a tu computadora con un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa adecuada de Arduino Uno R4 (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Navega hasta el icono de Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables WebApps", luego encuentra la biblioteca DIYables WebApps de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas otras dependencias de la biblioteca.
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.
- En el IDE de Arduino, vaya a Archivo Ejemplos DIYables WebApps WebChat ejemplo, o copie el código anterior y péguelo en el editor del IDE de Arduino
/*
* 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);
}
- Configura las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Haz clic en el botón Subir en el IDE de Arduino para subir código al Arduino UNO R4/DIYables STEM V4 IoT
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial. Se ve como lo siguiente
COM6
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
Clear output
9600 baud
Newline
- Si no ve nada, reinicie la placa Arduino.
- Tome nota de la dirección IP que se muestre y escriba esta dirección en la barra de direcciones de un navegador web en su teléfono inteligente o PC.
- Ejemplo: http://192.168.0.2
- Verá la página de inicio como se muestra en la imagen a continuación:
- Haz clic en el enlace de Chat; verás la interfaz de usuario de la aplicación Web Chat como la que se muestra a continuación:
- O también puedes acceder a la página directamente mediante la dirección IP seguida de /chat. Por ejemplo: http://192.168.0.2/chat
- ¡Empieza a chatear con tu Arduino! Escribe tu nombre cuando se te solicite y prueba comandos como "led on", "hello" o "help" para interactuar con tu Arduino.
Cómo usar
Comenzar una conversación
- Abre la interfaz de chat en tu navegador
- Escribe tu nombre cuando se te pida
- ¡Empieza a chatear con tu Arduino!
Comandos de chat
El Arduino reconoce estos comandos especiales:
Control de LEDs
- "led on" o "turn on led" → Enciende el LED integrado
- "led off" o "turn off led" → Apaga el LED integrado
- "blink" o "blink led" → Hace que el LED parpadee
Comandos de Información
- "hola" o "¡hola!" → Saludo amistoso
- "ayuda" → Muestra los comandos disponibles
- "tiempo" → Muestra el tiempo de actividad de Arduino
- "estado" → Muestra el estado del sistema
Preguntas
- "¿Cómo estás?" → Arduino comparte su estado
- "¿Qué puedes hacer?" → Enumera las capacidades
- "¿Cómo te llamas?" → Arduino se presenta
Ejemplo de conversación
You: Hello
Arduino: Hi there! I'm your Arduino assistant. What's your name?
You: My name is John
Arduino: Nice to meet you, John! I'm ready to help.
You: led on
Arduino: LED turned ON for you, John! 💡
You: what can you do?
Arduino: I can control LEDs, respond to your messages, and remember your name. Try saying 'help' for commands!
You: help
Arduino: Available commands:
* 'led on/off' - Control LED
* 'blink' - Blink LED
* 'status' - Show system info
* 'time' - Show uptime
Personalización creativa - Construye tu asistente interactivo
¡Transforma este ejemplo básico de chat en algo increíble! El diseño modular te permite adaptar y ampliar la funcionalidad para crear tu propio asistente interactivo de Arduino único.
Estructura del código
Componentes principales
- Servidor WebApp: Gestiona las conexiones HTTP y WebSocket
- Página de chat: Proporciona la interfaz web
- Manejador de mensajes: Procesa los mensajes de chat entrantes
- Generador de respuestas: Crea respuestas inteligentes
Funciones clave
// 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
}
Añadir comandos personalizados
Para añadir nuevos comandos de chat, modifica la función handleChatMessage:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Opciones de personalización
Modificar la personalidad de Arduino
Edita los mensajes de respuesta para cambiar la personalidad de Arduino:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Añadir control de hardware
Extender el control de LED a otros componentes:
// 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";
}
Cambiar el tema de la interfaz web
La interfaz de chat puede personalizarse modificando el CSS en los archivos de la biblioteca:
- Colores: Editar fondos degradados
- Fuentes: Cambiar las familias de fuentes
- Diseño: Ajustar el espaciado y el tamaño
Solución de problemas
Problemas comunes
1. Arduino no responde a los mensajes
- Verificar el Monitor Serial para mensajes de error
- Verificar el estado de la conexión WebSocket
- Actualizar la página del navegador
- Conexión WiFi fallida
- Vuelve a comprobar el SSID y la contraseña
- Asegúrate de que sea la red de 2,4 GHz (no 5 GHz)
- Comprueba la intensidad de la señal
- No se puede acceder a la página de chat
- Verifica que la dirección IP sea correcta
- Verifica si Arduino sigue conectado a WiFi
- Intenta acceder primero a la página de inicio: http://[IP]/
4. El LED no responde a los comandos
- Verificar el cableado (el LED incorporado debería funcionar por defecto)
- Verificar que los comandos estén escritos correctamente
- Verificar el Monitor Serial para mensajes de depuración
Consejos de depuración
Activa el modo de depuración añadiendo esta línea en setup():
Serial.println("Debug mode enabled");
Monitorear la salida serial para ver:
- Mensajes entrantes
- Análisis de comandos
- Generación de respuestas
- Acciones de hardware
Características Avanzadas
Soporte para múltiples clientes
El chat admite múltiples usuarios al mismo tiempo:
- Cada usuario tiene una sesión única
- Arduino recuerda nombres individuales
- Difunde mensajes a todos los usuarios
Persistencia de mensajes
Agregar registro de mensajes en la EEPROM:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Integración con sensores
Conecta sensores y hazlos accesibles a través del chat:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
Próximos pasos
Después de dominar el ejemplo de Chat, prueba:
- I. WebMonitor - Para depurar y desarrollar
- I. DigitalPins - Para controlar múltiples salidas
- I. Joystick - Para control direccional
- I. MultipleWebApps - Combinando todas las funciones
Soporte
Para obtener ayuda adicional:
- Consulta la documentación de la API
- Visita los tutoriales de DIYables: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Foros de la comunidad de Arduino