FACEBOOK CHAT BOT HANDS ON

GLOBAL CREATORS MEETUPVOL.5

1. SETUP

1, SETUP

1-1. Create a Facebook Page▸ https://developers.facebook.com/quickstarts/?platfor

m=web

1, SETUP

1-1. Create a Facebook Page (Cont.)▸ Unpublished the page

▸ Click “Messanger”

1, SETUP

1-1. Create a Facebook Page (Cont.)▸ Create a Facebook page

▸ https://www.facebook.com/pages/create/▸ Then, select the created page

1, SETUP

1-2. Install node▸ Install nodebrew

▸ nodebrew: https://github.com/hokaccha/nodebrew▸ nodebrew install-binary v6.6.0▸ nodebrew use v6.6.0

1, SETUP

1-3. App Directory Structure with Express▸ npm install express-generator -g▸ express gsp-21061008▸ cd express gsp-21061008▸ npm install▸ npm start▸ Access to http://localhost:3000

1, SETUP

1-4. Git Setup▸ Git Install▸ Git Init

▸ git init▸ add .gitignore

▸ exclude “node_modules/” dir▸ Create a github repository

1, SETUP

1-5. Heroku Account & Repository▸ https://id.heroku.com/login▸ Create an App

2. CODING

2, CODING

2-1. Setup Webhook

router.get('/webhook', function(req, res) {

if (req.query['hub.verify_token'] === <Your_Veirfy_Token>) {

res.send(req.query['hub.challenge']);

} else {

res.send('Error, wrong validation token’);

}

});

▸ https://developers.facebook.com/docs/messenger-platform/quickstart/▸ Write the following vilification code into your “routes/index.js”

2, CODING

2-2. Receive Messagerouter.post('/webhook/', function (req, res) {

const events = req.body.entry[0].messaging;

for (i = 0; i < events.length; i++) {

const event = req.body.entry[0].messaging[i];

if (event.message && event.message.text) {

const text = event.message.text;

console.log(text)

}

}

res.sendStatus(200);

});

2, CODING

2-3. Set Access Token▸ Copy your FB page access token

▸ Set as FB_ACCESS_TOKEN in heroku app

2, CODING

2-4. Post Message▸ npm install —save request

var request = require(‘request’)

const ACCESS_TOKEN = process.env.FB_ACCESS_TOKEN

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

2, CODING

2-4. (Cont.) Post Message▸ modify web hook code

router.post('/webhook/', function (req, res) { const events = req.body.entry[0].messaging; for (i = 0; i < events.length; i++) { const event = req.body.entry[0].messaging[i]; const sender = event.sender.id; if (event.message && event.message.text) { const text = event.message.text; console.log(text) sendTextMessage(sender, "Text received, echo: " + text); } } res.sendStatus(200);});

▸ Sample code: https://github.com/tejitak/gsc-test-20161006/blob/master/routes/index.js

3. DEPLOY

3. DEPLOY

3-1. Deploy to Heroku▸ Configure github repository in your heroku app

▸ git add -A▸ git commit -m “first commit”▸ git push origin master

▸ Or, Install heroku toolbelt▸ https://devcenter.heroku.com/articles/heroku-command-lin

e

▸ heroku git:remote -a yourappname

▸ git push heroku master

3, DEPLOY

3-2. Setup webhook verification▸ Enter your <heroku app url>/webhook▸ Enter your verify token

▸ Subscribe a created page

3, DEPLOY

3-3. Try a Message to Bot

4. ADVANCED

4. ADVANCED

4-1. Customize Your Bot▸ Think what you want to build

THANKS!

Takuya Tejima @tejitak