Exemple Arduino WebChat - Tutoriel sur l'interface de chat interactive
Vue d'ensemble
L'exemple WebChat montre comment créer une interface de chat interactive entre un navigateur Web et Arduino. Conçu pour Arduino Uno R4 WiFi et DIYables STEM V4 IoT, plateforme éducative avec des capacités IoT améliorées et une intégration transparente avec les capteurs intégrés. L'Arduino peut répondre intelligemment aux messages et contrôler le matériel en fonction des commandes de chat.
Fonctionnalités
- Chat en temps réel: Messagerie instantanée via WebSocket
- Réponses intelligentes: Arduino fournit des réponses contextuelles
- Contrôle de la LED: Contrôle de la LED intégrée via des commandes de chat
- Reconnaissance de l'utilisateur: Arduino se souvient de votre nom
- Historique des messages: Voir l'historique des conversations
- Conception réactive: Fonctionne sur ordinateur et mobile
- Plateforme extensible: Actuellement implémenté pour l'Arduino Uno R4 WiFi, mais peut être étendu à d'autres plateformes matérielles. Voir DIYables_WebApps_ESP32
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est votre première utilisation de l'Arduino Uno R4 WiFi/DIYables STEM V4 IoT, reportez-vous au tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4/DIYables STEM V4 IoT à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple Arduino Uno R4 WiFi) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
- Recherchez "DIYables WebApps", puis trouvez la bibliothèque DIYables WebApps par DIYables
- Cliquez sur le bouton Install pour installer la bibliothèque.
- On vous demandera d’installer d’autres dépendances de la bibliothèque.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables WebApps WebChat exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE 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);
}
- Configurez les identifiants Wi‑Fi dans le code en mettant à jour ces lignes:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code vers Arduino UNO R4/DIYables STEM V4 IoT
- Ouvrez le moniteur série
- Consultez le résultat dans le moniteur série. Il ressemble à ce qui suit
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 vous ne voyez rien, redémarrez la carte Arduino.
- Notez l'adresse IP affichée et saisissez cette adresse dans la barre d'adresses d'un navigateur sur votre smartphone ou votre PC.
- Exemple : http://192.168.0.2
- Vous verrez la page d'accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Chat, vous verrez l'interface utilisateur de l'application Web Chat comme ci-dessous :
- Ou vous pouvez aussi accéder à la page directement par l'adresse IP suivie de /chat. Par exemple : http://192.168.0.2/chat
- Commencez à discuter avec votre Arduino ! Tapez votre nom lorsque cela vous sera demandé et essayez des commandes comme « led on », « hello », ou « help » pour interagir avec votre Arduino.
Comment utiliser
Démarrer une conversation
- Ouvrez l'interface de chat dans votre navigateur
- Saisissez votre nom lorsque cela vous sera demandé
- Commencez à discuter avec votre Arduino!
Commandes de chat
L'Arduino reconnaît ces commandes spéciales :
Contrôle des LED
- "LED allumée" ou "allumer la LED" → Allume la LED intégrée
- "LED éteinte" ou "éteindre la LED" → Éteint la LED intégrée
- "clignoter" ou "clignoter la LED" → Fait clignoter la LED
Commandes d'informations
- "bonjour" ou "salut" → Salutation amicale
- "aide" → Affiche les commandes disponibles
- "temps" → Affiche le temps de fonctionnement d'Arduino
- "état" → Affiche l'état du système
Questions
- "Comment allez-vous ?" → Arduino partage son état
- "Que pouvez-vous faire ?" → Liste des capacités
- "Comment vous appelez-vous ?" → Arduino se présente
Exemple de conversation
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
Personnalisation créative - Créez votre assistant interactif
Transformez cet exemple de chat basique en quelque chose d'incroyable ! La conception modulaire vous permet d'adapter et d'étendre les fonctionnalités pour créer votre propre assistant Arduino interactif et unique.
Structure du code
Composants principaux
- Serveur d'applications Web: Gère les connexions HTTP et WebSocket
- Page de chat: Fournit l'interface web
- Gestionnaire de messages: Traite les messages de chat entrants
- Générateur de réponses: Crée des réponses intelligentes
Fonctions clés
// 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
}
Ajout de commandes personnalisées
Pour ajouter de nouvelles commandes de chat, modifiez la fonction handleChatMessage :
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Options de personnalisation
Modifier la personnalité d'Arduino
Modifiez les messages de réponse pour changer la personnalité d'Arduino :
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Ajouter un contrôle matériel
Élargir le contrôle des LED à d'autres composants :
// 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";
}
Changer le thème de l'interface Web
L’interface de chat peut être personnalisée en modifiant le CSS dans les fichiers de la bibliothèque :
- Couleurs : Modifier les arrière-plans en dégradé
- Polices : Modifier les familles de polices
- Mise en page : Ajuster les espacements et les tailles
Dépannage
Problèmes courants
1. Arduino ne répond pas aux messages
- Vérifier le moniteur série pour les messages d'erreur
- Vérifier l'état de la connexion WebSocket
- Actualiser la page du navigateur
2. Échec de la connexion Wi-Fi
- Vérifiez le SSID et le mot de passe
- Assurez-vous que le réseau 2,4 GHz est utilisé (pas le 5 GHz)
- Vérifiez la puissance du signal
3. Impossible d'accéder à la page de chat
- Vérifiez que l'adresse IP est correcte
- Vérifiez si l'Arduino est encore connecté au WiFi
- Essayez d'accéder d'abord à la page d'accueil : http://[IP]/
- La DEL ne répond pas aux commandes
- Vérifier le câblage (la LED intégrée devrait fonctionner par défaut)
- Vérifier que les commandes sont correctement orthographiées
- Vérifier le moniteur série pour les messages de débogage
Conseils de débogage
Activez le mode débogage en ajoutant cette ligne dans setup():
Serial.println("Debug mode enabled");
Surveillez la sortie série pour voir :
- Messages entrants
- Analyse des commandes
- Génération de réponses
- Actions matérielles
Fonctionnalités avancées
Support pour plusieurs clients
Le chat prend en charge plusieurs utilisateurs simultanément :
- Chaque utilisateur a une session unique
- Arduino se souvient des noms individuels
- Diffuser des messages à tous les utilisateurs
Persistance des messages
Ajouter la journalisation des messages dans l'EEPROM:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Intégration avec les capteurs
Connectez les capteurs et rendez-les accessibles via le chat:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
Étapes suivantes
Après avoir maîtrisé l'exemple Chat, essayez :
- WebMonitor - Pour le débogage et le développement
- DigitalPins - Pour piloter plusieurs sorties
- Joystick - Pour le contrôle directionnel
- MultipleWebApps - La combinaison de toutes les fonctionnalités
Assistance
Pour obtenir une aide supplémentaire :
- Consultez la documentation de référence de l’API
- Consultez les tutoriels DIYables : https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Forums de la communauté Arduino