[node-react] 챗봇 사이트

1. GCP 설정 + Dialogflow API 설정 

https://cloud.google.com/?hl=ko 

클라우드 컴퓨팅 서비스  |  Google Cloud

https://dialogflow.cloud.google.com/#/agent/test-chat-bot-app-323908/intents

Dialogflow

2. textQuery Route 생성 

3. 환경 변수 사라지지 않게 설정 : Set GOOGLE_APPLICATION_CREDENTIALS=/path-to-keys/key.json

4. eventQuery Route 생성 

5. 프론트 엔드 부분 만들기 : 채팅 사이트 모양

6. textQuery Function 만들기 : 내가 보낸 메시지, 챗봇이 나에게 보낸 메시지를 모두 가져올 수 있도록

7. eventQuery Function 만들기 : 챗봇이 시작할 때 처음 나오게 보내는 이벤트 메시지를 가져올 수 있도록

8. 메시지 데이터를 리덕스에 저장 

9. 메시지 데이터를 채팅방에 출력 : 리덕스의 store과 받은 정보를 이용해 메시지 창에 출력

10. 카드 메시지 : 특정 단어 입력 시, 그에 맞는 영상을 담은 카드 메시지 출력

(dialogflow에 card message를 위한 intent 생성 필요)

11. 특정 단어 입력 시, 챗봇이 이름, 이메일, 주소를 입력 받아 완성된 문장 보내주기

(dialogflow에 intent 생성 필요)

+ 자동 스크롤

 

Chatbot (en) (1).pdf

1.60MB

 

참고자료 및 소스파일 GIT 주소 (소스파일 주석 참조)

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%B1%97%EB%B4%87

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기 - 인프런 | 강의

https://github.com/GaGa-Kim/CLONE/tree/main/Chat

GitHub - GaGa-Kim/CLONE: 클론 코딩