본문 바로가기

Coding Series/[완결] FBM ChatBot

FBM ChatBot [3] - ChatBot 작동 맛보며 ChatBot 응답 JavaScript 함수 구조 알아보기

728x90
반응형

FaceBook Messenger ChatBot 개발을 위해 찾아왔지만, 이 글을 처음 보는 것이라면 첫 글부터 보고 오는 것을 추천한다. 처음 시작하는 것인데 첫 글이 아닌 이 글부터 본다면 이해하기 벅찰 수 있다. 첫 글부터 보기를 매우 추천한다. 첫 글부터 보면서 차근차근 따라오기(클릭)

 

할 일 두 줄 정리 (정리만 보고 따라하기엔 무리가 있을 수 있다. 본문을 읽으며 차근차근 따라하기를 추천한다.)

1. 메신저봇R App에 짧은 JavaScript 코딩을 통해 ChatBot을 맛본다.
2. ChatBot이 응답할 수 있는(=ChatBot이 메시지를 보낼 수 있는) 기본 제공 JavaScript 함수 구조를 알아본다.

 

드디어 오늘은 ChatBot에게 코딩을 시키고 구동하는 기쁜 날이다.

 

오늘 내용은 코딩을 저음 접한다면 어려울 수 있다. 하지만 쉽게 설명해두었으니, 편한 마음을 가지고 읽어보며 따라 해 보자.

 

먼저 ChatBot이 응답할 수 있는 JavaScript 코드를 짜는 곳에 먼저 들어가 보자.

 

1. 저번 글에서 설치한 "메신저봇R" 또는 "구 메신저봇"을 실행한다.

 

2. 메인 화면에 chatbot이라는 파일이 보이고 있다. chatbot의 오른쪽 ∨를 눌러 뜨는 메뉴 중 두 번째에 위치해 있는 연필 모양의 스크립트 편집 버튼을 누른다.

-> ∨를 눌러 뜨는 메뉴 : [첫 번째 : 코드 재시작 | 두 번째 : 스크립트 편집 | 세 번째 : 봇 테스트 | 네 번째 : 로그 | 다섯 번째 : 액티비티 화면 | 여섯 번째 : 파일 설정]

 

위 방법대로 했다면 여러분 눈앞에는 아래와 같은 코드가 뜨고 있을 것이다.

 

const scriptName = "chatbot";

/**
 * (string) room
 * (string) sender
 * (boolean) isGroupChat
 * (void) replier.reply(message)
 * (boolean) replier.reply(room, message, hideErrorToast = false) // 전송 성공시 true, 실패시 false 반환
 * (string) imageDB.getProfileBase64()
 * (string) packageName
 */
 
function response(room, msg, sender, isGroupChat, replier, imageDB, packageName) { //13번줄
  //14번줄
} //15번줄

//아래 4개의 메소드는 액티비티 화면을 수정할때 사용됩니다.
function onCreate(savedInstanceState, activity) {
  var textView = new android.widget.TextView(activity);
  textView.setText("Hello, World!");
  textView.setTextColor(android.graphics.Color.DKGRAY);
  activity.setContentView(textView);
}

function onStart(activity) {}

function onResume(activity) {}

function onPause(activity) {}

function onStop(activity) {}

 

기본으로 제공되는 가장 알아야 하는 네 가지 변수부터 알아보자.

 

[room] => 채팅이 왔을 때 받은 채팅의 메시지(내용)이다.

[room] => 채팅이 왔을 때 채팅을 보낸 방의 이름이다.

[sender] => 채팅이 왔을 때 채팅을 보낸 사람의 닉네임(별명)이다. 사람의 FB 이름이 아니라, 채팅방의 닉네임(별명)이다. 착각하지 말자.

[isGroupChat] => 채팅이 왔을때 채팅을 보낸 곳이 그룹인지, 개인인지 나타낸다. 그룹이면 true, 개인이면 false를 리턴한다.

 

위 변수들은 기억해두자. 이 변수를 알아야 뒷 글들에서 ChatBot 응답 활용할 때 활용할 수 있는 범위가 넓어진다.

 

위 코드 13번 줄(function response) 아래 14번 줄에 내가 원하는 기능과 보내는 메시지를 코딩을 하면 된다. 저 부분이 메시지가 오면 호출되는 함수이다.

 

이제 ChatBot이 응답할 수 있는(=ChatBot이 메시지를 보낼 수 있는) 기본 제공 JavaScript 함수 구조를 간단하게 알아보기 시작하겠다.

 

replier.reply()는 메시지에 답장한다.라는 함수이다. 이 함수 안에 답장을 원하는 메시지를 큰따옴표("")를 통해 넣어주면 된다.

-> 변수를 넣어줄 때는 큰따옴표("")를 쓰지 않아야 한다.

 

먼저 14번 줄에 일단 아래 코드를 따라서 작성해보자.

 

replier.reply(msg);
replier.reply("Hello, World!");

 

1번 줄 코드를 분석해보자. 모든 코드에서 13번 줄(function response) 아래 14번 줄에 있으니, 채팅을 받으면 사이의 코드가 실행된다. 그러고 나서 replier.reply가 나오게 된다. 이는 답장을 보내는 함수이니 소괄호(()) 안에 있는 내용을 답장으로 보낸다는 뜻이다. 그럼 소괄호(()) 안에 있는 내용을 보니 msg라는 변수이다. 위에서 보았듯이 msg 변수는 받은 채팅의 메시지(내용)이다.

 

그러므로 1번 줄 코드는 채팅을 받으면(모든 코드에서 13번 줄(function response)) 받은 채팅의 메시지(내용)를 그대로 답장한다는 뜻의 코드이다.

 

이제 2번 줄 코드를 분석해보자. 모든 코드에서 13번 줄(function response) 아래 15번 줄에 있으니, 채팅을 받으면 사이의 코드가 실행된다. 그러고 나서 replier.reply가 나오게 된다. 이는 답장을 보내는 함수이니 소괄호(()) 안에 있는 내용을 답장으로 보낸다는 뜻이다. 그럼 소괄호(()) 안에 있는 내용을 보니 "Hello, World!"라는 것이 들어있다. 위에서 설명한 것을 보니 큰따옴표("") 사이에 있는 내용을 답장한다는 뜻이다.

 

그러므로 2번 줄 코드는 채팅을 받으면(모든 코드에서 13번 줄(function response)) 큰따옴표("") 사이에 있는 Hello, World! 를 답장한다는 뜻의 코드이다.

 

그런데 이렇게 코드를 짜고 FBM으로 메시지를 보내면 1번 줄 코드만 실행되고 2번 줄 코드는 실행되지 않을 것이다.

 

이는 이 App의 단점이라고 볼 수도 있는데, 답장 기능을 활용하기에 한번 답장하면 더 이상 답장을 보낼 수 없다는 것이다.

 

따라서 답장은 1회만 가능하다. 2회 답장하도록 코드를 짜더라도 먼저 있는 1회 답장만 한다.(오류가 뜨면서 코드가 멈추진 않는다.) 이점 꼭 유의하고 코드를 짜야한다.

 

코드를 다 작성했다면 이제 우측 상단 첫 번째에 위치해 있는 폴더 모양 저장 메뉴 버튼을 누르고 "저장하고 컴파일"을 눌러 작성한 코드를 저장하고 바로 코드를 실행한다.

 

이제 FBM을 켜고 내가 코드를 짠 ChatBot 계정과는 다른 계정에서 내가 코드를 짠 ChatBot 계정에게 FBM 메시지를 보내면 내가 보낸 메시지를 그대로 답장할 것이다.

 

ChatBot이 여러분이 보낸 메시지를 그대로 답장한다면 성공한 것이다. 여러분은 ChatBot을 만든 것이다. 축하한다.

 

문제가 있다면 언제든 편하게 연락해라. 댓글을 남겨도 되고, 불편하다면 kimain0401@kakao.com 으로 메일을 보내도 된다.

 

오늘 코딩이라는 것을 처음 접했다면 많이 어려웠겠지만 열심히 따라했다면 성공한 것이다. 배우느라 매우 수고했다.

 

다음 글에서는 여러 변수들과 JavaScript 함수를 이용하여 사용자가 시간을 물어보면 시간을 답장해주는 ChatBot을 만들어보겠다.

도전을 어려워하지 마라. 도전은 위대한 것이다. 다음 글도 이번 글처럼 쉽게 설명했으니, 어서 넘어와라.

728x90
반응형