최근들어 발전속도가 급격히 빨라지고 적용범위가 확대되고 있는 AI와 ML을 통해서 새로운 형태의 비즈니스를 구상하여 시범적으로 출시하는 일까지의 전체공정을 나누는 공간으로 일일 일제 MVP를 시작하였습니다.
첫번째 시도로 AI-강화 게스트 경험 플랫폼에 대한 구상을 바탕으로 시스템을 구축하고 배포하는 일련의 단계를 기록하였습니다
1. Firebase 프로젝트 생성:
Firebase 콘솔로 이동하여 새 프로젝트를 생성합니다.
2. Firebase 호스팅 설정:
프로젝트 디렉토리에서 다음 명령어를 실행합니다:firebase init hosting
프롬프트에 따라 Firebase 호스팅을 설정합니다.
3. Firebase CLI 설치:
Firebase CLI를 설치하지 않았다면 다음 명령어를 실행합니다:npm install -g firebase-tools
4. Dialogflow 에이전트 생성:
Dialogflow 콘솔로 이동하여 새 에이전트를 생성합니다.
5. Dialogflow를 Firebase에 연결:
Dialogflow에서 Fulfillment 섹션으로 이동하여 Webhook을 활성화합니다. URL을 Firebase Function 엔드포인트로 설정합니다.
6. Firebase Functions 초기화:
프로젝트 디렉토리에서 다음 명령어를 실행합니다:firebase init functions
7. 종속성 설치:
functions 디렉토리로 이동하여 필요한 패키지를 설치합니다:cd functions npm install firebase-functions firebase-admin dialogflow-fulfillment
8. Fulfillment 로직 생성:
functions/index.js에 Fulfillment 로직을 추가합니다:const functions = require('firebase-functions'); const { WebhookClient } = require('dialogflow-fulfillment'); exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { const agent = new WebhookClient({ request, response }); function checkIn(agent) { agent.add('체크인 성공!'); } let intentMap = new Map(); intentMap.set('CheckInIntent', checkIn); agent.handleRequest(intentMap); });
9. Firebase Functions 배포:
Functions를 배포합니다:firebase deploy --only functions
10. HTML 템플릿 생성:
public 디렉토리에 index.html 파일을 생성합니다:<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI-강화 게스트 경험</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>AI-강화된 숙박에 오신 것을 환영합니다</h1> </header> <main> <section id="recommendations"> <h2>개인 맞춤 추천</h2> <ul id="recommendation-list"></ul> </section> <section id="checkin"> <h2>자동 체크인</h2> <button id="checkin-button">체크인</button> </section> <section id="support"> <h2>실시간 지원</h2> <div id="chatbox"></div> </section> </main> <script src="app.js"></script> </body> </html>
11. CSS 파일 생성:
public 디렉토리에 styles.css 파일을 생성합니다:body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } header { background-color: #4CAF50; color: white; text-align: center; padding: 1em 0; } main { padding: 20px; } section { margin-bottom: 20px; } h2 { color: #333; } button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; cursor: pointer; } button:hover { background-color: #45a049; }
12. JavaScript 파일 생성:
public 디렉토리에 app.js 파일을 생성합니다:document.addEventListener('DOMContentLoaded', () => { const recommendationList = document.getElementById('recommendation-list'); const checkinButton = document.getElementById('checkin-button'); const chatbox = document.getElementById('chatbox'); // Firebase에서 추천 항목 가져오기 fetchRecommendations(); // 체크인 버튼 클릭 처리 checkinButton.addEventListener('click', () => { handleCheckIn(); }); // 채팅 상자 초기화 (간단한 플레이스홀더) chatbox.innerHTML = '<p>AI 어시스턴트와 채팅하세요!</p>'; }); function fetchRecommendations() { // Firebase에서 추천 항목을 가져오는 플레이스홀더 const recommendations = ['현지 박물관 방문', '새로운 이탈리안 레스토랑 시도', '근처 공원 탐험']; const recommendationList = document.getElementById('recommendation-list'); recommendations.forEach(rec => { const li = document.createElement('li'); li.textContent = rec; recommendationList.appendChild(li); }); } function handleCheckIn() { // 체크인 기능의 플레이스홀더 alert('체크인 성공!'); }
13. Firebase 호스팅에 배포:
웹 앱을 배포합니다:firebase deploy --only hosting
14. 앱 테스트:
제공된 URL을 방문하여 배포된 앱을 테스트합니다.
15. Dialogflow 인텐트 설정:
Dialogflow에서 일반적인 게스트 문의에 대한 인텐트를 생성합니다 (예: 체크인, 추천).
16. Dialogflow에서 Fulfillment 구성:
인텐트에 대한 Fulfillment를 활성화하고 Webhook URL을 Firebase Function 엔드포인트로 설정합니다.
17. Dialogflow 통합 테스트:
Dialogflow 시뮬레이터를 사용하여 챗봇의 응답을 테스트합니다.
18. 사용자 피드백 수집:
사용자로부터 피드백을 수집하여 개선할 영역을 식별합니다.
19. 반복 및 개선:
사용자 피드백과 분석을 기반으로 챗봇과 웹 앱을 지속적으로 업데이트합니다.
20. 모니터링 및 유지 관리:
Firebase 프로젝트와 Dialogflow 에이전트를 정기적으로 모니터링하여 모든 것이 원활하게 작동하는지 확인합니다.
이 단계를 따라서 AI-강화 숙박체험관을 성공적으로 운영할 수 있을지 여부에 대한 검토를 진행하고 있습니다.