Messenger Bot

#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`ファイルを作成

```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アカウントは必要です。[登録](http://api.heroku.com/signup)
現在環境は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をアクセス
<img width="491" alt="Screen Shot 2016-05-29 at 16.03.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/121276/67fd2bbd-46a4-0c03-c827-49ab11a658c1.png">
DONE!

#3. FacebookApp設定
##ログインとFacebookページを作成 [作成URL](https://www.facebook.com/pages/create/)
<img width="993" alt="Screen Shot 2016-05-29 at 16.09.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/121276/b40636d2-47f4-3e62-4a36-f20b85dcbb9b.png">
##FacebookAppを作成
[Quickstart](https://developers.facebook.com/quickstarts/)をアクセスして、`basic setup`リンクをクリックして,
アプリの情報を入力<img width="1143" alt="Screen Shot 2016-05-29 at 16.12.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/121276/63d55b5c-75c9-b336-c52f-fb92562d3258.png">

##`page_access_token`を作成と`webhook`を設定
<img width="1625" alt="Screen Shot 2016-05-29 at 16.17.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/121276/e3563880-bc14-7038-bf20-d68a9880707d.png">

<img width="812" alt="Screen Shot 2016-05-29 at 16.17.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/121276/8141733e-7d89-eb35-45e2-3398e40cfa56.png">

<img width="896" alt="Screen Shot 2016-05-29 at 16.16.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/121276/e0618001-fceb-a67b-9475-17faa809530f.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}`
<img width="890" alt="Screen Shot 2016-05-29 at 16.21.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/121276/a5fc0df9-86a5-a9f0-3b67-ddde29ca7bc7.png">

### Herokuにpage_access_tokenを設定
<img width="1015" alt="Screen Shot 2016-05-29 at 16.23.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/121276/f9d8b5e8-f000-b51f-a849-a54d240fe2ca.png">