LoginSignup
3
3

More than 5 years have passed since last update.

Messenger Bot

Posted at

1.環境

  • NodeJs
  • Heroku Account

2.Botの方設定

2.1.新しいプロジェクトを作成&NodeJsをインストール

$ mkdir messengerbot
$ cd messengerbot/
$ npm init

Herokuにデプロイするために、express body-parser requestというパッケージをインストール
npm install express body-parser request --save

package.jsonを開いて、scriptハッシュの中にstartフィルドを追加します。

{
  "name": "anothertestbot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "Duc",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.15.1",
    "express": "^4.13.4",
    "request": "^2.72.0"
  }
}

先作ったばかりmessengerbotフォルダーの中に、index.jsファイルを作成


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

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.listen((process.env.PORT || 3000));

// Server frontpage
// make sure the server is up and running when visit app’s web address.
app.get('/', function (req, res) {
    res.send('This is TestBot Server');
});

// Facebook Webhook
app.get('/webhook', function (req, res) {
    if (req.query['hub.verify_token'] === 'testbot_verify_token') {
        res.send(req.query['hub.challenge']);
    } else {
        res.send('Invalid verify token');
    }
});

testbot_verify_tokenはこのAppはMessengerBotのために確認します。

2.2. Herokuにプッシュ

$ git init

.gitignoreの中にnode_moduleを追加する

node_modules/

そして、

$ git add .
$ git commit -m 'Register Facebook Webhook'

Herokuアカウントは必要です。登録
現在環境はHerokuがあるかどうか確認する。

$ heroku version

そしてHerokuにログインとSSHを追加する

$ heroku login
$ heroku keys:add

Herokuのホストを作成

$ heroku create
   Creating glacial-scrubland-xxxx... done, stack is cedar
   http://glacial-scrubland-xxxx.herokuapp.com/ | 

Herokuにプッシュ

$ git push heroku master

もらったURLをアクセス
Screen Shot 2016-05-29 at 16.03.28.png
DONE!

3. FacebookApp設定

ログインとFacebookページを作成 作成URL

Screen Shot 2016-05-29 at 16.09.05.png

FacebookAppを作成

Quickstartをアクセスして、basic setupリンクをクリックして,
アプリの情報を入力Screen Shot 2016-05-29 at 16.12.42.png

page_access_tokenを作成とwebhookを設定

Screen Shot 2016-05-29 at 16.17.43.png

Screen Shot 2016-05-29 at 16.17.20.png

Screen Shot 2016-05-29 at 16.16.37.png

設定完了したあとで、Facebookページうぃsubcribeするのは必要です.

$ curl -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"

PAGE_ACCESS_TOKENは先作成しました。
resultを届けます
{"success": true}
Screen Shot 2016-05-29 at 16.21.41.png

Herokuにpage_access_tokenを設定

Screen Shot 2016-05-29 at 16.23.18.png

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3