![[DialogFlow] 다이얼로그 플로우로 주문 챗봇 만들기 - 4 (카카오톡 연동 마무리)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F990421335B72DA3418)
안녕하세요
이번 포스팅에서는 카카오톡 유저로부터 받은 메시지를 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와 카카오톡 플러스친구 챗봇과의 연동 작업이 마무리 되었습니다.
코드에 대해 더 자세하게 설명해야했는데 분량이 너무 많아지기 때문에 간단히 만들 수 있도록 빠르게 진행했습니다.
추가적으로 더 궁금하신 사항이 있으시다면 댓글에 작성해주세요!
감사합니다
되게 잘 정리해주셔서 그냥 따라만 해도 잘 되네요. 안되는 경우는 거의 오타있을 때였습니다 ㅎㅎ
그런데 result에서 텍스트만 되어 있는데 사진의 경우는 어떻게 하시나요?
카카오톡 챗봇 문서랑 다이아로그플로우 문서 보면서 시도중인데 어렵네요..
여튼, 큰 도움이 됬습니다. 감사합니다!
이후에 카카오톡 챗봇 코드와 통합할 때 test-sess.. 부분 대신 user_key 데이터를 사용합니다.
{ 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 입니다.
아무리 봐도 똑같이 타이핑한 것 같은데 실행이 안되네요 ㅠㅠ
좋은글 정말 감사합니다!!
영어가 너무 부족해서 Dialogflow node.js client 문서를 봐도 제대로 이해를 못 했는데 덕분에 플젝 진행이 됐습니다.