Exemplo Arduino WebChat - Tutorial de Interface de Chat Interativa
Visão Geral
O exemplo WebChat mostra como criar uma interface de chat interativa entre um navegador web e o Arduino. Projetado para a plataforma educacional Arduino Uno R4 WiFi e DIYables STEM V4 IoT, com recursos IoT avançados e integração perfeita com os sensores integrados. O Arduino pode responder de forma inteligente às mensagens e controlar o hardware com base em comandos de chat.
Assista a este tutorial em vídeo passo a passo que mostra como usar o WebChat com o app DIYables WebApps:
Recursos
- Chat em Tempo Real: Mensagens instantâneas via WebSocket
- Respostas Inteligentes: O Arduino dá respostas de acordo com o contexto
- Controle de LED: Controle o LED integrado por comandos de chat
- Reconhecimento do Usuário: O Arduino lembra o seu nome
- Histórico de Mensagens: Veja o histórico da conversa
- Design Responsivo: Funciona em desktop e em dispositivos móveis
- Plataforma Extensível: Atualmente implementada para o Arduino Uno R4 WiFi, mas pode ser estendida para outras plataformas de hardware. Veja DIYables_WebApps_ESP32
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Instruções de Configuração
Passos Rápidos
Siga estas instruções passo a passo:
- Se esta é a sua primeira vez usando o Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulte o tutorial sobre como configurar o ambiente para o Arduino Uno R4 WiFi/DIYables STEM V4 IoT no Arduino IDE.
- Conecte a placa Arduino Uno R4/DIYables STEM V4 IoT ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa Arduino Uno R4 apropriada (por exemplo, Arduino Uno R4 WiFi) e a porta COM.
- Navegue até o ícone Libraries na barra esquerda do Arduino IDE.
- Pesquise "DIYables WebApps" e encontre a biblioteca DIYables WebApps, da DIYables
- Clique no botão Install para instalar a biblioteca.
- Você será perguntado se quer instalar outras bibliotecas das quais ela depende
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá em File Examples DIYables WebApps WebChat para abrir o exemplo, ou copie o código acima e cole no editor do 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);
}
- Configure as credenciais do WiFi no código atualizando estas linhas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload no Arduino IDE para carregar o código no Arduino UNO R4/DIYables STEM V4 IoT
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele deve ficar parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
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
==========================================
- Se você não vir nada, reinicie a placa Arduino.
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador web no seu celular ou PC.
- Exemplo: http://192.168.0.2
- Você verá a home page como na imagem abaixo:
- Clique no link Chat e você verá a interface do app Web Chat como abaixo:
- Você também pode acessar a página diretamente pelo endereço IP seguido de /chat. Por exemplo: http://192.168.0.2/chat
- Comece a conversar com o seu Arduino! Digite seu nome quando for solicitado e teste comandos como "led on", "hello" ou "help" para interagir com o Arduino.
Como Usar
Iniciando uma Conversa
- Abra a interface de chat no seu navegador
- Digite seu nome quando for solicitado
- Comece a conversar com o seu Arduino!
Comandos de Chat
O Arduino reconhece estes comandos especiais:
Controle de LED
- "led on" ou "turn on led" → Liga o LED integrado
- "led off" ou "turn off led" → Desliga o LED integrado
- "blink" ou "blink led" → Faz o LED piscar
Comandos de Informação
- "hello" ou "hi" → Saudação amigável
- "help" → Mostra os comandos disponíveis
- "time" → Mostra o tempo de atividade do Arduino
- "status" → Mostra o status do sistema
Perguntas
- "how are you?" → O Arduino compartilha seu status
- "what can you do?" → Lista os recursos
- "what is your name?" → O Arduino se apresenta
Exemplo de Conversa
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
Personalização Criativa - Crie o Seu Assistente Interativo
Transforme este exemplo básico de chat em algo incrível! O design modular permite adaptar e expandir a funcionalidade para criar o seu próprio assistente Arduino interativo.
Estrutura do Código
Componentes Principais
- Servidor WebApp: Gerencia as conexões HTTP e WebSocket
- Página de Chat: Fornece a interface web
- Tratador de Mensagens: Processa as mensagens de chat recebidas
- Gerador de Respostas: Cria respostas inteligentes
Funções Principais
// 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
}
Adicionando Comandos Personalizados
Para adicionar novos comandos de chat, modifique a função handleChatMessage:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Opções de Personalização
Modifique a Personalidade do Arduino
Edite as mensagens de resposta para mudar a personalidade do Arduino:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Adicione Controle de Hardware
Estenda o controle do LED para outros 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";
}
Mude o Tema da Interface Web
A interface de chat pode ser personalizada modificando o CSS nos arquivos da biblioteca:
- Cores: Edite os fundos em gradiente
- Fontes: Mude as famílias de fontes
- Layout: Ajuste o espaçamento e o tamanho
Solução de Problemas
Problemas Comuns
1. O Arduino não responde às mensagens
- Verifique o Serial Monitor em busca de mensagens de erro
- Confirme o status da conexão WebSocket
- Atualize a página do navegador
2. Falha na conexão WiFi
- Confira novamente o SSID e a senha
- Garanta que a rede seja de 2.4GHz (não 5GHz)
- Verifique a intensidade do sinal
3. Não consigo acessar a página de chat
- Confirme se o endereço IP está correto
- Verifique se o Arduino ainda está conectado ao WiFi
- Tente acessar primeiro a home page: http://[IP]/
4. O LED não responde aos comandos
- Verifique a ligação (o LED integrado deve funcionar por padrão)
- Confirme se os comandos estão escritos corretamente
- Verifique o Serial Monitor em busca de mensagens de depuração
Dicas de Depuração
Ative o modo de depuração adicionando esta linha no setup():
Serial.println("Debug mode enabled");
Monitore a saída serial para ver:
- Mensagens recebidas
- Interpretação dos comandos
- Geração das respostas
- Ações de hardware
Recursos Avançados
Suporte a Vários Clientes
O chat suporta vários usuários ao mesmo tempo:
- Cada usuário tem uma sessão única
- O Arduino lembra os nomes individuais
- Envie mensagens para todos os usuários (broadcast)
Persistência de Mensagens
Adicione o registro de mensagens na EEPROM:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Integração com Sensores
Conecte sensores e deixe-os acessíveis pelo chat:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
Vídeo
Abaixo está um tutorial em vídeo passo a passo que mostra como usar o WebChat com o app DIYables WebApps:
Próximos Passos
Depois de dominar o exemplo Chat, experimente:
- WebMonitor - Para depuração e desenvolvimento
- DigitalPins - Para controlar várias saídas
- Joystick - Para controle direcional
- MultipleWebApps - Combinando todos os recursos
Suporte
Para obter mais ajuda:
- Consulte a documentação de Referência da API
- Visite os tutoriais da DIYables: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Fóruns da comunidade Arduino