이근둥
근둥이의 블로그
이근둥
전체 방문자
759,181
오늘
137
어제
617

공지사항

  • 전체보기 (106) N
    • 웹 (8)
    • 언어 & 프레임워크 (53)
      • JavaScript (7)
      • TypeScript (0)
      • Node.js (11)
      • Vue.js (3)
      • React (0)
      • C & C++ (19)
      • Java & JSP (9)
      • Python (4)
    • 컴퓨터 과학 (3) N
      • 알고리즘 (0)
      • 자료구조 (3) N
    • 기타 (9)
      • Linux (1)
      • Git (2)
      • DialogFlow (4)
    • 일상 (13)
      • 게임 (13)
    • 칼럼 (9)
      • 회고 (0)
      • 나만의 글 (0)
      • 제품 리뷰 (9)
    • __Dev__ (9)
      • Release (9)
반응형

인기 글

  • [Tomcat] 아파치 톰캣 서버 포⋯
    2018.08.24
    [Tomcat] 아파치 톰캣 서버 포⋯
  • [Node.js] 실시간 채팅 서비스⋯
    2018.05.31
    [Node.js] 실시간 채팅 서비스⋯
  • [PWA] 프로그레시브 웹 앱 시작⋯
    2019.01.09
    [PWA] 프로그레시브 웹 앱 시작⋯
  • [Linux] Ubuntu 18.04 테마 설⋯
    2019.01.16
    [Linux] Ubuntu 18.04 테마 설⋯
  • [DialogFlow] 다이얼로그 플로⋯
    2018.07.13
    [DialogFlow] 다이얼로그 플로⋯

태그

  • 전개 구문
  • 출간
  • 이펙트
  • vuex
  • 프로그레시브 웹 앱
  • spread syntax
  • pwa
  • 이클립스
  • vue.js
  • AstroWar
  • 파티클
  • vue-next
  • javascript
  • java
  • 자바 프로젝트
  • Hello World!
  • composition-api
  • Scanner
  • Composition API
  • ES6
  • self
  • vue3
  • Java FX
  • WWDC
  • Deemo
  • 웹 확장
  • 자바
  • Vue 3
  • WWDC20
  • vue

최근 댓글

  • 아래 composition API 부분 코⋯
    깜장발
  • 좋은 글 작성해주셔서 감사합니⋯
    바밤
  • 현재 이 코드를 응용한 간단한⋯
    ㅇㅇ
  • wasd키가 아니라 방향키로는 못⋯
    clvkdh
  • 찾아 본 것 중에 가장 좋았어요⋯
    우왕

최근 글

  • 스택(Stack)
    2022.05.26
    스택(Stack)
  • 배열(Array)
    2022.05.25
    배열(Array)
  • C언어로 배우는 자료구조
    2022.05.24
    C언어로 배우는 자료구조
  • [Vue 3] Composition API와 템⋯
    2020.10.02
    [Vue 3] Composition API와 템⋯
  • [Vue 3] Composition API와 Vue⋯
    2020.09.06
    [Vue 3] Composition API와 Vue⋯

블로그 메뉴

  • 홈
  • 미디어로그
  • 방명록
hELLO · Designed By 정상우.
이근둥

근둥이의 블로그

[DialogFlow] 다이얼로그 플로우로 주문 챗봇 만들기 - 4 (카카오톡 연동 마무리)
기타/DialogFlow

[DialogFlow] 다이얼로그 플로우로 주문 챗봇 만들기 - 4 (카카오톡 연동 마무리)

2018. 8. 14. 23:21
반응형

안녕하세요



이번 포스팅에서는 카카오톡 유저로부터 받은 메시지를 Dialogflow에 전달해주고

응답받을 수 있도록 연동하는 작업을 진행하도록 하겠습니다.







먼저 기존의 코드를 조금 수정 및 추가해줍니다.



이전 포스팅의 코드와 비교해보고 빨간 네모 부분을 수정해주세요



서버 코드를 저장하고 재시작한후 카카오톡에서 확인해보면 버튼이 2개로 변경되어있고 버튼을 누르면 메시지가 응답됩니다.



하지만 아직 Dialogflow와 연동하지 않았습니다.


마지막으로 일반 메시지는 Dialogflow에서 처리하도록 연동하는 코드를 추가해보도록 하겠습니다.




코드를 작성하기 전에 다이얼로그 플로우의 프로젝트 옵션에서 프로젝트 ID를 미리 복사해둡니다.





빨간 네모 부분을 복사해두세요!!









그리고 js 파일을 하나 더 생성해줍니다. 저는 파일 명을 bot.js 로 생성했습니다.




위와같이 코드를 작성해주세요.


그리고 지난 포스팅에서 다운받았던 키 파일을 적절한 위치에 위치시키고 경로를 기억해둡니다.

저는 귀찮아서 소스코드 폴더와 동일한곳에 위치시켜두었습니다.



코드를 확인해보면 클래스 생성자(Constructor)에서 키 파일 경로에 있는 파일을 읽고 비공개 키, 클라이언트 이메일 정보를 가져와서 privateKey, clientEmail 변수에 각각 대입하는 모습을 보실 수 있습니다.


이렇게 따로 꺼낸 데이터는 Dialogflow 클라이언트 세션을 생성할 때 정보로 전달됩니다.





입력한 정보 중 하나라도 일치하지 않으면 오류가 발생합니다.





생성자 말고 아래의 sendToDialogflow 메소드는 입력한 텍스트 문자열을 다이얼로그 플로우에 전달한 후

응답된 결과를 받아오는 역할을 합니다.


text와 sessionId를 받는데 text는 사용자가 입력한 문자열 데이터 (메시지), sessionId는 세션 고유값으로

사용할 임의의 문자열인데 우리는 카카오톡에서 제공하는 user_key 데이터를 사용할 예정입니다.



맨 아래의 빨간 영역은 테스트를 위해 작성한 코드입니다.



카카오톡 챗봇에 적용하기 전에 먼저 테스트를 해봅시다.

프로젝트ID / 키 파일 경로(파일명 포함)을 정확하게 입력해서 Dialogflow 인스턴스를 생성해봅시다.




실행해보면 정상적으로 응답이 오는것을 보실 수 있습니다.





사진의 초록색 부분은 유저(임의로 보낸 메시지)의 메시지이고,

아래 fulfillmentText의 메시지는 다이얼로그 플로우로부터 응답받은 메시지입니다.


결과 데이터가 복잡하기 때문에 카카오톡 챗봇에서는 queryResult.fulfillmentText 의

응답 메시지 부분만 추출하여 유저에게 다시 응답하도록 구현할 것 입니다.






적용 전에 테스트코드를 지우고 모듈로 사용하기 위해 코드를 수정합니다.




빨간 부분처럼 코드를 작성해주세요.


이제 이 bot.js는 외부 js 파일에서 require로 모듈처럼 불러와서 사용할 수 있습니다!







그럼 본격적으로 챗봇 코드에 우리가 만든 모듈을 적용하여 사용해봅시다.



(첫 번째 빨간 네모)

상단에 bot.js를 require 해줍니다.

그리고 테스트코드와 동일하게 프로젝트 ID, 키 파일 경로를 입력해서 인스턴스를 생성해주세요!



(두, 세 번째 빨간 네모)

기존에는 data = { ... } 로 되어있던 부분을 바로 res.send({ ... })로 변경해줍니다.



(마지막 주황 네모)

생성한 인스턴스의 sendToDialogflow 메소드를 사용해봅시다.

첫 번째 인자로는 전달할 메시지,

두 번째 인자로는 세션 ID인데 여기서 우리는 user_key로 사용할 예정입니다.


app.post('/message' .. 아래 부분을 확인해보시면

message 에는 req.body.content 값 즉, 유저 메시지가 대입되어있고

id에는 req.body.user_key가 대입되어있습니다.


그래서 sendToDialogflow(message, id)를 사용하여 메시지와 유저 ID를 전달해줍니다.





then().catch() 는 프라미스에서 사용하는 문법입니다. 추가로 설명하게되면 내용이 많아지므로 생략하도록 하겠습니다.




코드를 저장하고 다시 서버를 실행시켜주세요!




카카오톡에서 확인해보면 정상적으로 Dialogflow에서 만든 우리의 챗봇과 대화할 수 있습니다!









이로써 Dialogflow와 카카오톡 플러스친구 챗봇과의 연동 작업이 마무리 되었습니다.


코드에 대해 더 자세하게 설명해야했는데 분량이 너무 많아지기 때문에 간단히 만들 수 있도록 빠르게 진행했습니다.



추가적으로 더 궁금하신 사항이 있으시다면 댓글에 작성해주세요!





감사합니다

반응형
저작자표시비영리동일조건
    '기타/DialogFlow' 카테고리의 다른 글
    • [DialogFlow] 다이얼로그 플로우로 주문 챗봇 만들기 - 3 (카카오톡 연동 준비)
    • [DialogFlow] 다이얼로그 플로우로 주문 챗봇 만들기 - 2 (맥락)
    • [DialogFlow] 다이얼로그 플로우로 주문 챗봇 만들기 - 1 (의도, 개체)
    이근둥
    이근둥
    새로운 것을 좋아하는 프론트엔드 개발자 ✨
    댓글쓰기
    1. parkdow
      2018.09.08 09:14
      다이얼로그 플로우 문서가 너무 불친절해서 고생하고 있었는데, 너무 감사합니다.^^
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.09.10 16:19 신고
        감사합니다. 어느정도 이해하신 후 공식문서를 다시 확인해보시면 더욱 확실하게 이해하실 수 있습니다!
        수정/삭제
    2. 부산맨
      2018.09.16 20:32
      감사합니다. 몇 번 더 보면서 제가 좀 더 공부해야겠습니다.
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.09.20 12:11 신고
        넵, 어려운 부분 있으시면 질문하셔도 됩니다~!
        수정/삭제
    3. [-]
      2018.09.27 21:21
      친절하게 설명해주셔서 감사합니다.
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.09.28 10:12 신고
        도움이 되셨다니 다행입니다~
        수정/삭제
    4. youknow.yoonho
      2018.10.04 03:06
      와! 정말 감사합니다!
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.10.04 10:50 신고
        앞으로도 도움되는 자료 올려드릴게요!
        수정/삭제
    5. @sys.given-name
      2018.11.11 19:01
      @sys.given-name에서 한글 이름 사용할 수 없나요?
      수정/삭제댓글쓰기댓글보기
    6. chatbot
      2018.11.14 10:24
      bot.js 똑같이 작성했는데요. node bot.js 하면 async sedToDialogflow ... 여기서 syntaxerror 왜 나는거죠?
      수정/삭제댓글쓰기댓글보기
      1. kim
        2018.11.14 14:06
        오타있네요...sed 아니고 send

        되게 잘 정리해주셔서 그냥 따라만 해도 잘 되네요. 안되는 경우는 거의 오타있을 때였습니다 ㅎㅎ
        수정/삭제
    7. kim
      2018.11.14 14:14
      덕분에 재밌게 잘 만드는 중입니다.
      그런데 result에서 텍스트만 되어 있는데 사진의 경우는 어떻게 하시나요?
      카카오톡 챗봇 문서랑 다이아로그플로우 문서 보면서 시도중인데 어렵네요..
      여튼, 큰 도움이 됬습니다. 감사합니다!

      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.11.14 23:10 신고
        이미지 데이터에 대한 응답은 추후에 다시 글 올려보도록 하겠습니다!
        수정/삭제
    8. chatbot
      2018.11.14 14:33
      우리는 카카오톡에서 제공하는 user_key 데이터를 사용할 예정... 이부분에서 test-session-id 로 하면 되는건가요?
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.11.14 23:12 신고
        아래 빨간 영역은 테스트를 위해 임시로 작성한 코드라 본 포스팅대로 진행하다보면 지우게 됩니다.

        이후에 카카오톡 챗봇 코드와 통합할 때 test-sess.. 부분 대신 user_key 데이터를 사용합니다.
        수정/삭제
    9. chatbot
      2018.11.14 14:35
      sendToDialogflow 이건 게시글 작성하면서 오타가 났네요 ㅎㅎ bot.js에는 오타없이 들어갔는데도 왜이런걸까요?
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.11.14 23:12 신고
        Node.js 버전이 낮을 경우 Async / Await 키워드를 사용할 수 없습니다. 한 번 버전 확인해보시고 자세한 오류 메시지 알려주시면 도움 드리겠습니다.
        수정/삭제
    10. eaten
      2018.11.18 02:24
      흑 ㅠㅠ 안녕! 구문 테스트하려고하는데, node bot.js 실행을 하면
      { Error: 3 INVALID_ARGUMENT: Field input not set.
      at Object.exports.createStatusError (C:\node_modules\grpc\src\common.js:87:15)
      at Object.onReceiveStatus (C:\node_modules\grpc\src\client_interceptors.js:1188:28)
      at InterceptingListener._callNext (C:\node_modules\grpc\src\client_interceptors.js:564:42)
      at InterceptingListener.onReceiveStatus (C:\node_modules\grpc\src\client_interceptors.js:614:8)
      at callback (C:\node_modules\grpc\src\client_interceptors.js:841:24)
      code: 3,
      metadata:
      Metadata { _internal_repr: { 'grpc-server-stats-bin': [Array] } },
      details: 'Field input not set.' }
      와 같은 에러가 뜨네요..ㅠㅠ
      어떤게 문제일까요?

      제가 작성한 코드는http://imgdb.kr/ez1X 입니다.
      아무리 봐도 똑같이 타이핑한 것 같은데 실행이 안되네요 ㅠㅠ

      좋은글 정말 감사합니다!!
      수정/삭제댓글쓰기댓글보기
    11. 클모준위
      2019.09.23 13:31
      감사합니다~~많은도움이되었씁니다~
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2019.09.23 18:16 신고
        감사합니다~~
        수정/삭제
    12. AI
      2019.10.13 21:52
      감사합니다 감사합니다 ㅠㅠ
      영어가 너무 부족해서 Dialogflow node.js client 문서를 봐도 제대로 이해를 못 했는데 덕분에 플젝 진행이 됐습니다.
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2019.10.15 18:38 신고
        도움이 되셨다니 다행입니다~ :)
        수정/삭제
    • 이전
    • 1
    • 2
    • 3
    • 4
    • 다음

    티스토리툴바