This document provides instructions for setting up a Facebook chat bot using Node.js and Express. It includes steps for creating a Facebook page, installing Node.js dependencies, setting up the app directory structure, connecting to GitHub, deploying to Heroku, setting up webhook verification, and receiving and responding to messages with the bot. The coding section explains how to set up the webhook endpoint, receive messages, set the access token, and post messages back to Facebook. Deployment involves pushing the code to Heroku and subscribing the Facebook page to the webhook. Customizing the bot is also mentioned.

1. FACEBOOK CHAT BOT
HANDS ON
GLOBAL CREATORS MEETUP
VOL.5

2. 1. SETUP

3. 1, SETUP
1-1. Create a Facebook Page
▸https://developers.facebook.com/quickstarts/?platform=web

4. 1, SETUP
1-1. Create a Facebook Page (Cont.)
▸Unpublished the page
▸Click “Messanger”

5. 1, SETUP
1-1. Create a Facebook Page (Cont.)
▸Create a Facebook page
▸https://www.facebook.com/pages/create/
▸Then, select the created page

6. 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

7. 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

8. 1, SETUP
1-4. Git Setup
▸Git Install
▸Git Init
▸git init
▸add .gitignore
▸exclude “node_modules/” dir
▸Create a github repository

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

10. 2. CODING

11. 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”

12. 2, CODING
2-2. Receive Message
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];
if (event.message && event.message.text) {
const text = event.message.text;
console.log(text)
}
}
res.sendStatus(200);
});

13. 2, CODING
2-3. Set Access Token
▸Copy your FB page access token
▸Set as FB_ACCESS_TOKEN in heroku app

14. 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);
}
});
}

15. 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

16. 3. DEPLOY

17. 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-line
▸ heroku git:remote -a yourappname
▸ git push heroku master

18. 3, DEPLOY
3-2. Setup webhook verification
▸Enter your <heroku app url>/webhook
▸Enter your verify token
▸Subscribe a created page

19. 3, DEPLOY
3-3. Try a Message to Bot

20. 4.
ADVANCED

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

22. THANKS!
Takuya Tejima
@tejitak