티스토리 뷰

안녕하세요



이번 포스팅에서는 카카오톡 유저로부터 받은 메시지를 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와 카카오톡 플러스친구 챗봇과의 연동 작업이 마무리 되었습니다.


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



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





감사합니다

댓글
  • 프로필사진 parkdow 다이얼로그 플로우 문서가 너무 불친절해서 고생하고 있었는데, 너무 감사합니다.^^ 2018.09.08 09:14
  • 프로필사진 BlogIcon 이근둥 감사합니다. 어느정도 이해하신 후 공식문서를 다시 확인해보시면 더욱 확실하게 이해하실 수 있습니다! 2018.09.10 16:19 신고
  • 프로필사진 부산맨 감사합니다. 몇 번 더 보면서 제가 좀 더 공부해야겠습니다. 2018.09.16 20:32
  • 프로필사진 BlogIcon 이근둥 넵, 어려운 부분 있으시면 질문하셔도 됩니다~! 2018.09.20 12:11 신고
  • 프로필사진 [-] 친절하게 설명해주셔서 감사합니다. 2018.09.27 21:21
  • 프로필사진 BlogIcon 이근둥 도움이 되셨다니 다행입니다~ 2018.09.28 10:12 신고
  • 프로필사진 youknow.yoonho 와! 정말 감사합니다! 2018.10.04 03:06
  • 프로필사진 BlogIcon 이근둥 앞으로도 도움되는 자료 올려드릴게요! 2018.10.04 10:50 신고
  • 프로필사진 @sys.given-name @sys.given-name에서 한글 이름 사용할 수 없나요? 2018.11.11 19:01
  • 프로필사진 chatbot bot.js 똑같이 작성했는데요. node bot.js 하면 async sedToDialogflow ... 여기서 syntaxerror 왜 나는거죠? 2018.11.14 10:24
  • 프로필사진 kim 오타있네요...sed 아니고 send

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

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

    이후에 카카오톡 챗봇 코드와 통합할 때 test-sess.. 부분 대신 user_key 데이터를 사용합니다.
    2018.11.14 23:12 신고
  • 프로필사진 chatbot sendToDialogflow 이건 게시글 작성하면서 오타가 났네요 ㅎㅎ bot.js에는 오타없이 들어갔는데도 왜이런걸까요? 2018.11.14 14:35
  • 프로필사진 BlogIcon 이근둥 Node.js 버전이 낮을 경우 Async / Await 키워드를 사용할 수 없습니다. 한 번 버전 확인해보시고 자세한 오류 메시지 알려주시면 도움 드리겠습니다. 2018.11.14 23:12 신고
  • 프로필사진 eaten 흑 ㅠㅠ 안녕! 구문 테스트하려고하는데, 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 입니다.
    아무리 봐도 똑같이 타이핑한 것 같은데 실행이 안되네요 ㅠㅠ

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