아두이노 웹챗 예제 대화형 채팅 인터페이스 튜토리얼
개요
WebChat 예제는 웹 브라우저와 Arduino 사이에 대화형 채팅 인터페이스를 만드는 방법을 보여줍니다. 아두이노 우노 R4 WiFi 및 DIYables STEM V4 IoT용으로 설계된 교육 플랫폼은 향상된 IoT 기능과 내장 센서와의 원활한 통합을 제공합니다. Arduino는 메시지에 지능적으로 응답하고 채팅 명령에 따라 하드웨어를 제어할 수 있습니다.
기능
- 실시간 채팅: WebSocket을 통한 즉시 메시징
- 지능형 응답: Arduino가 맥락에 맞는 응답을 제공합니다
- LED 제어: 채팅 명령을 통해 내장 LED를 제어합니다
- 사용자 인식: Arduino가 사용자의 이름을 기억합니다
- 대화 기록: 대화 기록 보기
- 반응형 디자인: 데스크탑과 모바일에서 작동합니다
- 플랫폼 확장성: 현재 Arduino Uno R4 WiFi에 대해 구현되어 있지만, 다른 하드웨어 플랫폼으로도 확장할 수 있습니다. 자세한 내용은 DIYables_WebApps_ESP32 참조하십시오.
준비물
| 1 | × | 아두이노 우노 R4 와이파이 | 쿠팡 | 아마존 | |
| 1 | × | (또는) DIYables STEM V4 IoT | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 스크루 터미널 블록 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 브레드보드 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 케이스 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 전원 분배기 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노용 프로토타이핑 베이스 플레이트 & 브레드보드 키트 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정 지침
빠른 단계
다음 지시를 단계별로 따라가세요:
- 이 Arduino Uno R4 WiFi/DIYables STEM V4 IoT를 처음 사용하는 경우, Arduino IDE에서 Arduino Uno R4 WiFi/DIYables STEM V4 IoT용 환경 설정 튜토리얼을 참조하십시오 아두이노 우노 R4 - 소프트웨어 설치.
- Arduino Uno R4/DIYables STEM V4 IoT 보드를 USB 케이블로 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 시작합니다.
- 적절한 Arduino Uno R4 보드(예: Arduino Uno R4 WiFi)와 COM 포트를 선택합니다.
- Arduino IDE의 왼쪽 바에 있는 Libraries 아이콘으로 이동합니다.
- "DIYables WebApps"를 검색한 다음 DIYables가 만든 DIYables WebApps 라이브러리를 찾습니다.
- 라이브러리를 설치하려면 Install 버튼을 클릭합니다.
- 다른 라이브러리 의존성의 설치를 요청받게 됩니다.
- 모든 라이브러리 의존성을 설치하려면 Install All 버튼을 클릭하십시오.
- Arduino IDE에서 File 예제 DIYables WebApps WebChat 예제로 이동하거나, 위의 코드를 복사하여 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);
}
- 코드에서 WiFi 자격 증명을 구성하려면 다음 줄들을 업데이트하십시오:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Arduino IDE에서 Upload 버튼을 클릭하여 Arduino UNO R4/DIYables STEM V4 IoT에 코드를 업로드합니다.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 표시됩니다.
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
- 아무 것도 보이지 않으면 Arduino 보드를 재부팅하십시오.
- 표시된 IP 주소를 메모해 두고, 이 주소를 스마트폰이나 PC의 웹 브라우저 주소 표시줄에 입력하세요.
- 예시: http://192.168.0.2
- 아래 그림과 같이 홈 페이지가 표시됩니다:
- 채팅 링크를 클릭하면 아래와 같은 Web Chat 앱의 UI가 표시됩니다.
- 또한 IP 주소에 뒤이어 /chat를 붙여 페이지에 직접 접속할 수 있습니다. 예: http://192.168.0.2/chat
- Arduino와 채팅을 시작하세요! 프롬프트가 나타나면 이름을 입력하고 Arduino와 상호작용하기 위해 "led on", "hello", 또는 "help"와 같은 명령어를 시도해 보세요.
사용 방법
대화를 시작하기
- 브라우저에서 채팅 인터페이스를 엽니다
- 프롬프트가 표시되면 이름을 입력하세요
- Arduino와 채팅을 시작하세요
채팅 명령어
아두이노는 이러한 특수 명령어들을 인식합니다:
LED 제어
- "led on" or "turn on led" → 내장 LED를 켭니다
- "led off" or "turn off led" → 내장 LED를 끕니다
- "blink" or "blink led" → LED를 깜박이게 합니다
정보 명령어
- "hello" or "hi" → 친근한 인사
- "help" → 사용 가능한 명령어를 표시합니다
- "time" → 아두이노의 가동 시간을 표시합니다
- "status" → 시스템 상태를 표시합니다
질문
- "잘 지내고 있어요?" → 아두이노가 자신의 상태를 공유합니다
- "무슨 기능을 할 수 있나요?" → 기능을 나열합니다
- "이름이 무엇인가요?" → 아두이노가 자신을 소개합니다
예시 대화
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
창의적 맞춤화 - 당신의 대화형 어시스턴트를 만들어보세요
이 기본 채팅 예제를 멋지게 바꿔 보세요! 모듈식 설계로 기능을 조정하고 확장하여 자신만의 독특한 대화형 Arduino 어시스턴트를 만들 수 있습니다.
코드 구조
주요 구성 요소
- 웹앱 서버: HTTP 및 웹소켓 연결을 관리합니다
- 채팅 페이지: 웹 인터페이스를 제공합니다
- 메시지 핸들러: 수신된 채팅 메시지를 처리합니다
- 응답 생성기: 지능형 응답을 생성합니다
주요 기능
// 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
}
사용자 정의 명령 추가
새 채팅 명령을 추가하려면 handleChatMessage 함수를 수정하십시오:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
맞춤 옵션
아두이노 성격 수정
아두이노의 성격을 바꾸려면 응답 메시지를 수정하십시오:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
하드웨어 제어 추가
LED 제어를 다른 부품으로 확장:
// 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";
}
웹 인터페이스 테마 변경
라이브러리 파일의 CSS를 수정하여 채팅 인터페이스를 사용자 정의할 수 있습니다:
- 색상: 그라데이션 배경 편집
- 폰트: 글꼴 모음 변경
- 레이아웃: 간격 및 크기 조정
문제 해결
일반적인 문제
1. 아두이노가 메시지에 응답하지 않음
- 시리얼 모니터에서 오류 메시지를 확인하세요
- 웹소켓 연결 상태를 확인하세요
- 브라우저 페이지를 새로고침하세요
- 와이파이 연결 실패
- SSID와 비밀번호를 다시 확인하세요
- 2.4GHz 네트워크를 사용하세요(5GHz가 아닌)
- 신호 강도를 확인하세요
- 채팅 페이지에 접근할 수 없습니다
- IP 주소가 올바른지 확인합니다
- Arduino가 여전히 WiFi에 연결되어 있는지 확인합니다
- 먼저 홈페이지에 접속해 보십시오: http://[IP]/
- LED가 명령에 응답하지 않습니다
- 배선 확인 (내장 LED가 기본적으로 작동해야 함)
- 명령어의 철자가 올바른지 확인
- 시리얼 모니터에서 디버그 메시지를 확인
디버깅 팁
setup()에 이 줄을 추가하여 디버그 모드를 활성화합니다:
Serial.println("Debug mode enabled");
확인하려면 시리얼 출력을 모니터링하십시오:
- 수신 메시지
- 명령 구문 분석
- 응답 생성
- 하드웨어 동작
고급 기능
다중 클라이언트 지원
채팅은 여러 사용자를 동시에 지원합니다:
- 각 사용자마다 고유한 세션이 있습니다.
- 아두이노는 개별 이름을 기억합니다.
- 모든 사용자에게 메시지를 방송합니다.
메시지 지속성
EEPROM에 메시지 로깅 추가:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
센서와의 통합
센서를 연결하고 채팅으로 접근 가능하게 만드세요:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
다음 단계
채팅 예제를 숙달한 후, 시도해 보세요:
- WebMonitor - 디버깅 및 개발용
- DigitalPins - 다중 출력을 제어하기 위한
- Joystick - 방향 제어를 위한
- MultipleWebApps - 모든 기능의 결합
지원
추가 도움이 필요하신 경우:
- API 참조 문서를 확인하세요
- DIYables 튜토리얼을 방문하세요: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino 커뮤니티 포럼들