[node.js] 페이스북 + node 챗봇 만들기

1.heroku 서버 셋팅

   https://dashboard.heroku.com/

    원하는 사이트 이름을 지정해줍니다

---

2. 프로젝트 생성. 

    환경 : node.js 설치 필수

    

$ sudo npm install npm -g
$ npm init
$ npm install express request body-parser --save

 

npm init를 실행하시면 다음과 같이 나옵니다.

 

ihanbiui-MacBookPro:botProject ihanbi$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (botproject) 
version: (1.0.0) 
description: 
entry point: (index.js) app.js     <----- app.js로 설정

 entry point설정을 app.js로 설정해주신 후 나머지는 엔터를 쭉 눌러줍니다.

 

 

---

 

 

3.페이스북 앱 셋팅

  https://developers.facebook.com/

Facebook for Developers

 

 

 

페이스북 디벨로퍼 페이지에 접속 후.

 

 

 

・페이스북 디펠로퍼 - 내 앱 - 새 앱 추가 순으로 눌러줍니다.

 

 

 

데이터를 입력 후 앱 ID 만들기  를 눌러줍니다

 

초기 설정은 건너 뛰고, 대시보드로 들어갑니다.

Messenger목록에서 설정을 선택

[ 페이지 선택 ] 을 누르면 초기에는 페이지가 없기 때문에 페이지를 하나 작성, 그 후 

사진과 같이 페이지 목록이 나오고 페이지를 선택해줍니다.

선택을 하게 되면 페이지 엑세스 토큰이 뜨게 되는데 나중에 사용하게 될 토큰입니다

 * 개인 토큰은 절대로 공개하지 마세요. 

 

 

 

---

 

 

4. 프로젝트와 heroku 연결

   1번 단계에서 만들어 둔 heroku페이지에 접속합니다.

   

위에 목록 중 [ Deploy ]탭 선택

페이지에 순서가 나와있습니다

 

 

$ heroku login

$ git init

$ heroku git:remote -a 설정한 프로젝트 명

$ git add . 

$ git commit -m "원하는 커밋 메세지" 

$ git push heroku master

순으로 입력,   $ git push heroku master 를 하시면 개인에게 주어지는 홈페이지 주소가 나옵니다.

접속을 확인 후 정상적이면 주소를 카피

 

 

 

---

 

 

 

 

5. app.js 파일 작성 및 파일 수정

 

app.js

'use strict'

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

// 3번 단계에서 얻은 토큰을 넣어줍니다 . 개인 깃에 올릴 경우 이 부분은 절대 커밋하지 마세요.
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('/', (req, res) => {
    res.send('Hello world');
})

// 페이스북 연결
app.get('/webhook', (req, res) => {
    if (req.query['hub.verify_token'] === 'VERIFY_TOKEN') {
        res.send(req.query['hub.challenge']);
    }
    res.send('Error, wrong token');
})

app.post("/webhook", (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((pageEntry) => {
            var pageID = pageEntry.id;
            var timeOfEvent = pageEntry.time;

            // Iterate over each messaging event
            pageEntry.messaging.forEach((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 bot_message = "bot : " + content;
    sendTextMessage(senderId, bot_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 }
        }
    }, (error, response, body) => {
        if (error) {
            console.log('Error sending message: ' + response.error);
        }
    });
}

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

package.json

start부분을 다음과 같이 수정합니다.

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

그 후 다시 한번 heroku에 업데이트를 해줍니다

$ git add . 

$ git commit -m "원하는 커밋 메세지" 

$ git push heroku master

 

 

---

 

 

６. facebook + project 연결

 

콜백 URL에 4번단계에서 얻은 heroku 주소를 입력 후 , 확인 토큰에 

App.js에서 작성한 VERIFY_TOKEN 을 입력해줍니다

 

확인 및 저장 후 바로 밑에 있는 Webhook 목록에서 페이지 선택 후 [ 받아보기 ] 를 눌러 앱을 활성화 시켜줍니다.

 

이 후 자신의 페이지에 들어가 메세지를 보내면

자신의 말을 따라하는 앵무새 봇이 작동하게 됩니다.

 

메세지 받고 내보내기 펑션을 잘 이용하면 원하는 챗봇을 만들 수 있게 됩니다. 

 

 

 

도움이 되셨다면 하단 광고를 클릭해 주시면 글쓴이한테 큰 도움이 됩니다.^^