나만의 페이스북 메신저 봇 만들기

이 글은 Nodejs, Heroku server를 이용하여 자신만의 페이스북 챗봇을 만들어보는 템플릿 예제입니다. 이후에 Api.ai를 이용하여 더 똑똑한 챗봇을 만드는 과정을 포스팅하겠습니다.

챗봇이란?

챗봇은 사용자가 별도로 웹사이트나 앱을 따로 실행하지 않고도 대화하듯 정보를 얻을 수 있는 서비스다. 기존 사용자 자신이 쓰는 메신저를 통해 정보를 얻을 수 있다는 점이 현재 구글, 페이스북, 마이크로소프트, 텔레그램을 비롯해 국내 네이버, 다음 등 IT 분야 기업들이 챗봇을 기반으로 한 메신저 플랫폼을 선보이는 중이다.

[네이버 지식백과] 채팅봇, 챗봇 - 메신저 서비스 인공지능(AI)과 만나다 (용어로 보는 IT)

준비시작

1. Javascript에 대한 기본 지식(문법)
   • 생활코딩 자바스크립트 기본강의 추천합니다.
2. Nodejs
   • Nodejs에서 다운로드합니다. LTS 버전을 추천합니다.
3. Git
   • Git 설치는 생활코딩 지옥에서 온 Git 중 설치방법 강의를 보시면 수월하게 진행하실 수 있습니다.
4. Heroku
   • heroku 에 가입합니다.
5. Facebook Account
   • Facebook account가 필요합니다.

Nodejs로 프로젝트 시작하기

Nodejs설치한 후에 다음과 같은 명령어로 프로젝트를 시작합니다. 설치는 생활코딩 Nodejs 설치 강의를 보시면 수월하게 진행하실 수 있습니다.

설치를 완료하신 후, 원하는 폴더/디렉토리에서 다음과 같은 명령어로 기본 프로젝트를 생성합니다.

저같은 경우에는 dev라는 폴더를 새로 생성한 후(mkdir dev)에, dev로 들어가서(cd dev) 프로젝트파일을 생성하였습니다.

mkdir dev
cd dev
sudo npm install npm -g
npm init
npm install express request body-parser --save

npm init를 실행하시면 다음과 같이 물어볼텐데 entry point만 app.js로 설정해주신 후 나머지는 자유롭게 설정해주시면 됩니다.

package name: (dev)
version: (1.0.0)
description:
entry point: (index.js) app.js
test command: 
git repository:
keywords:
author:
license: (ISC)

아래와 같이 나오면 성공입니다. version은 다르셔도 괜찮습니다.

+ [email protected]
+ [email protected]
+ [email protected]
added 96 packages in 5.53s

페이스북 앱 세팅하기

1. Facebook Page
   • Chat bot을 적용시킬 Facebook Page를 만드신 후에 Facebook Developer Page에 접속합니다.

2. Facebook App

• Add a new App을 누르시고 새로운 App을 만듭니다.

• Messenger에서 set up버튼을 누릅니다.

app.js 파일 작성

이제 Heroku 서버에 배포시킬 자바스크립트 파일을 작성합니다. app.js라는 이름으로 처음 nodejs를 통해 npm install을 진행했던 폴더(이 글의 경우, dev폴더)에 저장합니다.

'use strict'

const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const app = express();

app.set('port', (process.env.PORT || 5000));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/', function(req, res) {
    res.send('Hello world');
})

app.get('/webhook', function(req, res) {
    if (req.query['hub.verify_token'] === 'VERIFY_TOKEN') {
        res.send(req.query['hub.challenge']);
    }
    res.send('Error, wrong token');
})

app.listen(app.get('port'), function() {
    console.log('running on port', app.get('port'));
})

app.js를 완성하셨다면 폴더 안에 있는 package.json을 수정하셔야 합니다. 파일 내의 main과 scripts 안에 있는 내용을 다음과 같이 수정해줍니다.

...
"main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
 ...

이제 배포 단계입니다. git저장소를 만드시고 heroku server를 만드신 후에, git push를 통해 heroku에 배포해줍니다.

git init
git add .
git commit -m 'init'
heroku create
git push heroku master

저는 다음과 같은 결과가 나왔습니다.

KorChris$ heroku create
Creating app... done, ⬢ YOUR_DYNO_NAME
https://YOUR_DYNO_NAME.herokuapp.com/ | https://git.heroku.com/YOUR_DYNO_NAME.git

KorChris$ git push heroku master
Counting objects: 4, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 1018 bytes | 0 bytes/s, done.
...
...
...

remote: Verifying deploy... done.
To https://git.heroku.com/YOUR_DYNO_NAME.git
   199.........73c  master -> master

페이스북 App 세팅하기

이제 Heroku server와 페이스북 App을 연결시켜줍니다. 페이스북 앱 관리창에 가셔서 전 단계와 같이 Messenger 탭을 클릭합니다.

Token Generation

• Token Generation에서 자신이 만든 page를 고르시고

• 생성된 Token을 Click해서 본인만 알 수 있도록 기록해둡니다. 나중에 이 token을 이용해서 프로그래밍을 하게 됩니다.

그 후에는 Webhook을 설정해야합니다.

Webhook Setting

• token generation 하단에 다음과 같이 Webhook을 설정할 수 있는 탭을 발견할 수 있습니다.

아래와 같이 heroku에서 생성된 Dyno의 URL을 입력하고 뒤에 /webhook을 넣어주시고 VERIFY TOKEN에는 'VERIFY_TOKEN'을 넣어줍니다.

Webhook set up이 끝났다면 token generation때 사용했던 page를 다시 선택해주시고, subscribe버튼을 클릭해줍니다.

간단한 Echo bot 만들기

app.js를 수정하여 사용자가 보낸 text를 그대로 다시 보내는 Echo Bot을 만들어보겠습니다. Token generation단계에서 받은 token을 PAGE_ACCESS_TOKEN에 넣어주고, app.js를 다음과 같이 작성합니다. 자세한 코드 설명은 다음 글에서 다루겠습니다.

'use strict'

const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const app = express();

//작은 따옴표 사이에 본인이 받으신 token을 paste합니다.
//나중에 보안을 위해서 따로 setting을 하는 방법을 알려드리겠습니다.
//이 토큰이 포함된 파일을 절대 업로드하거나 github에 적용시키지 마세요.
var PAGE_ACCESS_TOKEN = 'YOUR TOKEN HERE';

app.set('port', (process.env.PORT || 5000));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/', function(req, res) {
    res.send('Hello world');
})


app.get('/webhook', function(req, res) {
    if (req.query['hub.verify_token'] === 'VERIFY_TOKEN') {
        res.send(req.query['hub.challenge']);
    }
    res.send('Error, wrong token');
})

app.post("/webhook", function(req, res) {
    console.log("WEBHOOK GET IT WORKS");
    var data = req.body;
    console.log(data);

    // Make sure this is a page subscription
    if (data.object == 'page') {
        // Iterate over each entry
        // There may be multiple if batched
        data.entry.forEach(function(pageEntry) {
            var pageID = pageEntry.id;
            var timeOfEvent = pageEntry.time;

            // Iterate over each messaging event
            pageEntry.messaging.forEach(function(messagingEvent) {
                if (messagingEvent.optin) {
                    receivedAuthentication(messagingEvent);
                } else if (messagingEvent.message) {
                    receivedMessage(messagingEvent);
                } else if (messagingEvent.postback) {
                    receivedPostback(messagingEvent);
                } else {
                    console.log("Webhook received unknown messagingEvent: ", messagingEvent);
                }
            });
        });

        res.sendStatus(200);
    }
});

function receivedMessage(event) {
    var senderId = event.sender.id;
    var content = event.message.text;
    var echo_message = "ECHO : " + content;
    sendTextMessage(senderId, echo_message);
}

function receivedPostback(event) {
    console.log("RECEIVED POSTBACK IT WORKS");
    var senderID = event.sender.id;
    var recipientID = event.recipient.id;
    var timeOfPostback = event.timestamp;

    var payload = event.postback.payload;

    console.log("Received postback for user %d and page %d with payload '%s' " +
        "at %d", senderID, recipientID, payload, timeOfPostback);

    sendTextMessage(senderID, "Postback called");
}

function sendTextMessage(recipientId, message) {
    request({
        url: 'https://graph.facebook.com/v2.6/me/messages',
        qs: { access_token: PAGE_ACCESS_TOKEN },
        method: 'POST',
        json: {
            recipient: { id: recipientId },
            message: { text: message }
        }
    }, function(error, response, body) {
        if (error) {
            console.log('Error sending message: ' + response.error);
        }
    });
}

app.listen(app.get('port'), function() {
    console.log('running on port', app.get('port'));
})

app.js를 모두 작성하셨으면 Git을 이용하여 수정된 파일을 다시 배포해줍니다.

git add .
git commit -m 'echo bot'
git push heroku master

이제 Echo bot이 완성되었습니다.

페이스북을 통해서 메세지를 보내봅시다.

마치며

다음 글에서는 코드 분석 및 더 많은 페이스북 메신저 기능을 적용하는 법을 다루도록 하겠습니다.

제가 다룬 코드는 제 Github에서 확인하실 수 있습니다.

감사합니다.

Ref :

1. https://www.sitepoint.com/building-facebook-chat-bot-node-heroku
2. https://github.com/fbsamples/messenger-platform-samples
3. https://github.com/jw84/messenger-bot-tutorial