챗봇 UI 만들기, Vue.JS로 만든 dialogflow web demo

알음알음 챗봇관련 책을 사서 읽고

무료 온/오프라인 강의도 수강해서 dialogflow를 접했는 데.

구글이 제공하는 web demo만 사용해야 하는 지 궁금했다.

 

그런데 내가만든 웹에서도 호출이 가능하다는 걸 알고..

:D 환.호

 

그리고 해보았다.

 

[소스코드]

"dependencies": {

    "@babel/polyfill": "^7.10.1",

    "axios": "^0.19.2",

    "babel-polyfill": "^6.26.0",

    "es6-promise": "^4.2.8",

    "vue": "^2.6.11",

    "vuetify": "^2.2.11"

  }

 

https://github.com/ingus26/chatbot-test

ingus26/chatbot-test

 

일단 되는 게 중요한 거라 생각해서

디자인은 고려하지 않았다.

 

1. 구글 dialogflow 실습 자료 만들기

 

2. 구글 dialogflow 설정 값 가져오기

   -> dialogflow 설정값에 들어가서

       초록색으로 칠해진 부분 2곳, 프로젝트명과 Client access token. 이 두 부분을 따로 복사해논다.

 

3. vue 프로젝트 생성

   -> 새로 프로젝트를 만든다면 https://ingus26.tistory.com/30 참고

   1) github에서 소스를 다운 받아서 프로젝트 폴더에 저장

 

   2) node prompt로 접속하여 프로젝트 폴더로 이동 후 설치

     $ cd 프로젝트 폴더

     $ npm install

 

4. 2번에서 복사했던 내용을 App.vue에 붙여넣는 다

   -> dialogflow API v1 : https://dialogflow.com/docs/reference/agent/query

  {DialogFlow Name} 을 API 버전으로 치환

  {DialogFlow Client access token} 을 Client access token으로 치환

 

5. 페이지 확인

  $ npm run serve

 

[읽어봤던 책]

 

  1. 누구나 쉽게 배우는 챗봇 서비스

https://book.naver.com/bookdb/book_detail.nhn?bid=13733578

누구나 쉽게 배우는 챗봇 서비스

  2. 똑똑한 챗봇 만들기

https://book.naver.com/bookdb/book_detail.nhn?bid=15973815

똑똑한 챗봇 만들기

 

[수강했던 무료 강의]

 

  1. 오프라인 https://www.onoffmix.com/event/203085

AI 챗봇 실습 특강

   2. 온라인 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

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기 - 인프런