![[Node.js] 카카오톡 플러스친구 챗봇 만들기(2) - API 서버 개발 및 테스트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F9967F5355AA5257B15)
안녕하세요
이번 포스팅에서는
Node.js로 서버를 생성하고 카카오 플러스친구에서 테스트까지 마치는 작업을 진행하도록 하겠습니다!
[1. 채팅 유형 선택]
생성한 플러스친구의 채팅 유형을 선택하도록 합시다.
저희는 API 서버를 개발할것이기때문에
우측의 API형 을 선택하시면 됩니다!
[2. API 확인]
위와같이 정보를 입력하는 창이 뜹니다.
하지만 지금 핵심적으로 입력해야하는 앱 URL에 작성할 내용이 존재하지않죠
우리가 서버를 구축하여 앱 URL을 제공하면 됩니다!
옆엔 테스트 버튼이 존재하는데 잘 작동하는지 확인하기위한 버튼입니다!
테스트를 거쳐야 등록할 수 있습니다.
우측 상단에 보시면 API Document 버튼이 있습니다.
눌러서 문서를 확인해봅시다.
"이러이러한 형식으로 구현, 제공하라" 를 명시한 문서입니다.
프로그래밍이나 웹 분야에 대해 잘 모르시는분들은 어려우실수도 있습니다.
간단하게 정리하자면
Method(방식) : GET
URL(주소) : http://서버주소/keyboard
데이터타입: JSON
입니다
말 그대로 해석하자면
http://서버주소/keyboard에 GET 방식으로 접속하면
아래 예제와 같은 형식의 JSON 타입으로 데이터를 제공해달라
라는 뜻입니다.
이해가 안가셔도 괜찮습니다!
직접 구현해보면서 이해하면 되니까요
[3. 프로젝트 생성 및 필요한 모듈 설치]
위 링크를 참고하여 프로젝트를 하나 생성합니다.
(정상적으로 완료했다면 package.json 파일이 생성됩니다)
그리고 Brackets 에디터를 실행시킵니다 (Brackets 에티터 설치는 위 링크에 나와있습니다)
Brackets 상단 메뉴 중
파일 > 폴더 열기를 선택하여 방금 생성한 폴더를 열어줍니다.
위와 같은 모습이라면
새 .js 파일을 하나 생성합니다.
저는 app.js 라고 이름을 정하겠습니다
파일을 생성하였으면 위에서 CMD 창을 열었던것과 동일하게 한번 더 열어줍니다.
(package.json 파일이 존재하는 프로젝트 폴더 내에서 명령어를 실행해야합니다!)
npm install express --save
명령어를 입력해줍니다
위 명령어는 express 라는 모듈을 설치하라는 명령입니다!
저희는 express 모듈을 활용하여 Node.js 로 서버를 개발할것입니다
위와같이 설치가 되었다면 CMD창을 닫고 다시 Brackets 에디터로 넘어가셔도 됩니다.
[4. Express 서버 개발 및 플러스친구 테스트]
필요한 모듈을 설치하였으니 본격적으로 개발할 수 있게되었습니다!
저는 위에서 app.js 라는 파일을 생성하였습니다.
여러분들도 본인이 생성한 자바스크립트 파일에 코드를 작성하면서 개발하시면 됩니다!
아래와 같이 코드를 작성해주세요
위와같이 짧은 코드만으로 벌써 서버가 완성되었습니다!
주석으로 코드에 설명이 적혀져있습니다.
2행의 require('express') 는
방금 설치한 express 라는 모듈을 불러오는 코드입니다
그리고 아래에 11~20행은 라우팅 처리하는 부분인데요
라우팅 처리란
https://www.naver.com/login
https://www.naver.com/search
등..
위와같이 접속하였을 때 어떤 응답을 해야할지에 대한 네비게이션이라고 보시면 됩니다.
우리는 플러스친구 API 문서에서 요청한것처럼
https://서버주소/keyboard
로 접속할때의 기능을 구현한것입니다!
13행의 data 변수는 위 주소로 접속했을 때 제공할 데이터입니다!
형식은 아래와 같습니다
플러스친구 API 문서의 예제처럼
같은형식으로만 작성하시면 됩니다!
23행의 listen 함수에 인자로 전달된 9090 은 서버 포트입니다!
여러분들이 원하는 포트로 변경하셔도 됩니다.
저는 9090 포트로 진행하도록 하겠습니다.
이제 서버 접속이 되는지 확인해봅시다!
Brackets에서
Ctrl + Shift + N
단축키를 눌러줍니다
(또는 CMD로 node app.js)
서버가 실행되는 모습을 보실 수 있습니다!
웹 브라우저에
localhost:9090/keyboard
을 입력해보세요!
접속하니 예제와 같은 형식의 데이터를 제공하고있습니다!
이제 플러스친구 관리창에서 실제로 테스트하는일만 남았습니다!
그전에 지금 서버가 돌고있는 컴퓨터의 공인 IP 주소를 알아야합니다.
위 주소에 접속하면 본인 컴퓨터의 공인 IP가 뜹니다.
복사한 후 어디에 잘 메모해두세요!
http://복사한아이피:9090
예) http://352.451.533.111:9090
위와같이 링크를 만들었다면 카카오톡 앱 URL에 붙여넣기해줍니다
URL을 붙여넣고 API 테스트 버튼을 눌러줍니다.
아래에 keyboard OK와 함께
여러분들이 지정했던 JSON 값이 정상적으로 보이면 성공!
앱 설명과 전화번호 인증을 거쳐서 아래의 "API형 저장하기" 버튼을 눌러주면 됩니다!
(공유기 사용자분 참고)
공유기 사용자분들은 공유기설정도 직접 하셔야합니다.
설정을 하지않으면 포트가 막혀있어서 테스트를 실패하게됩니다.
공유기 포트포워딩
에 대해 검색하신 후 서버 포트를 개방해주세요
(저같은경우는 9090 포트를 포트포워딩 하였습니다)
설정을 마쳤으니 시작하기 버튼을 눌러줍니다!
위와같이 중지하기 버튼으로 바뀌었다면 성공!
한번 실제 카카오톡으로 확인해봅시다!
카카오톡에서 플러스친구 ID로 검색하거나 이름으로 검색하신 후 친구추가해봅시다
플러스친구 대화창에 진입하자마자 아래에 우리가 추가한 버튼들이 보입니다.
버튼을 누르면 해당 버튼의 텍스트가 전송되는것을 볼 수 있습니다.
버튼을 눌러도 응답하지 않는다는 메시지만 돌아옵니다.
이부분에 대해서는 다음 포스팅에서 진행하도록 하겠습니다!
감사합니다
어떻게 해야하죠ㅠㅠ
해당 경로를 웹 브라우저로 접속하면 잘 나오시나요?
공유기 사용중이시면 포트포워딩 작업도 추가로 하셔야합니다
지금 이게 안되서 PC도 바꿔서 해봐도 동일한 증상이 일어나네요...
console.log('Hello');를 실행했는데...
앞에 빨간 엑스자 동그라미가 생기고
에러가 3개가 납니다.
JSLint(1)
'console'was used before it was defined. console.log('hello');
ESLint(2)
ERROR:Unexpected console statement.[no-console] console.log('hello');
ERROR:'console' is not defined. [no-undef] console.log('hello');
라고 뜹니다... 뭐가 잘못 된걸까요?
몇번씩이나 재실행해봐도 동일하네요... ㅜㅜ
Command: node "E:/project/NodeJS/Blog/app.js"
E:\project\NodeJS\Blog\app.js:16
http.createSever(app).listen(9090, function() {
^
TypeError: http.createSever is not a function
at Object. (E:\project\NodeJS\Blog\app.js:16:6)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3
Program exited with code 1
프로그램은
var express = require('express');
var http = require('http');
var app = express();
app.get('/keyboard', function(req, res) {
var data = {
'type': 'buttons',
'buttons': ['과일', '채소', '정보']
};
res.json(data);
});
http.createSever(app).listen(9090, function() {
console.log('서버 실행 중..');
});
만들었습니다...
TypeError: http.createSever is not a function
http.createSever 는 함수가 아니라서 오류가 났습니다.
createSever가 아닌 createServer로 변경해주세요!
함수이름에서 r 하나가 누락되었습니다.
개인 호스팅 서버에 올려서 사용하려면 어떻게 해야되나요 ㅠㅠ
그리고 설치했던 모듈도 다시 설치하셔야합니다. (package.json 파일도 함께 옮기신 후 npm install 명령어 입력 시 설치했던 모듈이 자동으로 설치됩니다)
(package.json 파일이 존재하는 프로젝트 폴더 내에서 명령어를 실행해야합니다!)
여기 이게 무슨말씀인지 이해가 안딥니다 ㅠㅠ 윈도우키+r키눌러서 cmd들어가란 말씀이신가요?
CMD를 실행시긴 후 [ cd C:\\User\\chatbot\\ ] 명령어를 입력하여 생성한 디렉토리로 이동하셔야합니다!
혹시 아마존 aws로 동작하는것도 포스팅 생각 있으신가요??
아무래도 대부분이 학생일텐데 아파트라서 공유기 포트포워딩이 안되네요 ㅠ.ㅠ
aws로 해보면 어떨까 생각합니다.
Nodejs를 활용한 웹페이지 프로젝트 진행중에 이왕 이쪽 공부 하는 김에
방학중에 추가로 할만한게 없을까 하다가 이 페이지를 우연히 보게되었는데 설명도 자세하구 너무 재밌네요
감사인사라도 남겨야 할 것 같아서 글 남기고 갑니다 좋은 컨텐츠 감사합니다.
요즘에 처음 웹을 접하게 되었는데.. 카카오플러스 연동이란걸 알게되어
검색하다가 이글을 보게되었습니다.
깔끔한 정리와 설명 너무 감사합니다.
정말 대단하시네요..!!
죄송하지면
질문 한가지만 해도 될까요??
여기서 웹서버를 가동을 한건가요
(IIS 또는 APACHE) 혹시 가동했다면
그 웹서버에서 포트를 9090으로 설정하는건가요??
초보적인 질문이라 죄송하네요...ㅠ
부분에서 저는 9090으로 서버를 시작한것입니다. 80으로 하셔도 되고 원하시는 포트로 시작하시면 됩니다! (단, 이미 사용중인 포트일 경우 오류 발생)
관리자페이지에서 다시 한번 테스트를 진행하고 저장해보시거나, https://서버주소:포트/keyboards 주소로 접속해보시고 확인해보세요!
포트포워딩까지는 어떻게 했는데
앱 url연결 할 때 https://포트포워딩 아이디 주소:서비스 포트
이렇게 넣고 추가해야 하나요?
이렇게 하면
Required*
keyboard Fail 415
wrong keyboard initialization
이렇게 뜨는데ㅠㅠㅠ 뒤에 포트를9090으로 해도 오류는 똑같이 나네요ㅠㅠ
서버 아이피와 포트번호는 어떻게 알아내야 하나용ㅠㅠ
buttons에 오탈자를 수정하고 다시 실행시키면 Error: listen EADDRINUSE: address already in use :::9090
이라는 에러문구가 나옵니다.
이럴 때는 어떻게 해결해야 하나요? 계속 포트번호를 변경해가면서 해야하는 건가요?
주로 서버를 켜둔 상태로 코드 수정을 하고 다시 실행하셨을 수 있습니다. 기존에 실행한 코드는 Ctrl + C를 눌러서 종료시켜주세요
API형 스마트채팅 신규 등록이 18년 12월 3일 부터 중단된거같은데 ㅠㅠ api url 추가하는거부터 어떻게 해야하나요 ㅠㅠㅠ?
조만간 오픈빌더 챗봇에 대해 포스팅 할 계획입니다!
저는 오픈빌더에서 하다보니 url추가가 안되는것같아요 ㅜㅜ
혹시 이방법으로는 오픈빌더에서 등록이 안되는건가요..?
오픈빌더의 "스킬"에 서버 URL을 작성해야하는 달라진 방식 때문에 All Stop이 되었습니다.
급하게 만들어 보고 싶은데 어떻게 빨리 포스팅이 안될까요? 도와주세요.
{ id: '5d79a8acb617ea0001c1bdc5',
name: '일정',
extra: { reason: [Object] } },
userRequest:
{ timezone: 'Asia/Seoul',
params: { surface: 'Mini', ignoreMe: 'true' },
block: { id: '5d79a8acb617ea0001c1bdc5', name: '행사' },
utterance: '내일 행사일정\n',
lang: 'kr',
user:
{ id:
'75ea6fa7fb9be49871d44f1c94da22a2170b44807c525a29905f25ac9cfbece0b2',
type: 'botUserKey',
properties: [Object] } },
contexts: [],
bot: { id: '5d79a77c92690d0001815dd0!', name: '일정로봇' },
action:
{ name: '일정봇',
clientExtra: null,
params:
{ sys_date:
'{"dateTag": "tomorrow", "dateHeadword": null, "month": null, "year": null, "date": "2019-09-13", "day": null}' },
id: '5d79ab7cb617ea0001c1bdcf',
detailParams: { sys_date: [Object] } } }
서버에서 json형태로 넘어오는데 날짜를 추출하려고 console.log(req.body.action.params.sys_date.date) 하면 undefined 가 나옵니다.
json 데이터 추출 어떻게 하는건지 알려주시면 안될까요?
utterance는 console.log(req.body.userRequest.utterance)하니까 잘 나오던데요...
JSON.parse(sys_date).date와 같이 문자열 값을 객체로 변환하여 접근하시면 될 것 같습니다
다름이 아니라 진행도중에 오류가 발생하는데 도저히 모르겠어서요...
혹시나 원인을 아신다면 답변해주시면 정말 감사드리겠습니다.
위에 해당 app.js 파일을 저장하고 실행시키면 다음과 같은 에러가 발생합니다.
원인이 뭔지 찾기가 힘든데 혹시 알고계실까요?
Command: node "D:/chat/app.js"
D:\chat\app.js:23
http.createServer(app).listen(9090, function){
^
SyntaxError: Unexpected token ')'
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
Program exited with code 1