Setup\u00a0Bot<\/strong><\/span><\/h4>\nYou will need Node\u00a0installed on your laptop. If you don\u2019t, go to the\u00a0Node website<\/a>\u00a0to download and install it.<\/p>\nOnce you are done, you can continue with the setup for the bot. Follow the steps below:<\/p>\n
\n- Launch Terminal.<\/li>\n
- You need a separate directory for holding your code.<\/li>\n<\/ol>\n
\n- Make a new directory
\nmkdir\u00a0testbot<\/li>\n - Change your working directory to the directory you just created
\ncd testbot<\/li>\n<\/ul>\n![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/1-33.png\")
<\/p>\n
\n- Next, initialise the Node application.
\nnpm init<\/li>\n<\/ol>\n\n- You will be asked to enter information about your application, just use the defaults by pressing Enter for everything.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/2-37.png\")
<\/p>\n
\n- Install\u00a0packages
\nnpm\u00a0install express body-parser request –save<\/li>\n<\/ol>\n\n- The command will run, and give some warnings; ignore them.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/3-28.png\")
<\/p>\n[ad type=”banner”]\n
\n- In Finder, open the directory \u201ctestbot<\/strong>\u201d that you created, and find the file named \u201cpackage.json<\/strong>\u201c; open this in an editor like Sublime Text.<\/li>\n
- In this file, we need to add a line
\n“start”: “node index.js”<\/li>\n<\/ol>\n\n- Don\u2019t forget to append a\u201c,\u201d<\/strong>\u00a0at the end of the previous line.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/4-28.png\")
<\/p>\n
\n- Next, create a new file in Sublime Text, and put in the following code inside it:<\/li>\n<\/ol>\n
var express = require(‘express’);<\/p>\n
var bodyParser = require(‘body-parser’);<\/p>\n
var request = require(‘request’);<\/p>\n
var app = express();<\/p>\n
app.use(bodyParser.urlencoded({extended: false}));<\/p>\n
app.use(bodyParser.json());<\/p>\n
app.listen((process.env.PORT || 3000));<\/p>\n
app.get(‘\/’, function (req, res) {<\/p>\n
res.send(‘This is TestBot Server’);<\/p>\n
});<\/p>\n
app.get(‘\/webhook’, function (req, res) {<\/p>\n
if (req.query[‘hub.verify_token’] === ‘testbot_verify_token’) {<\/p>\n
res.send(req.query[‘hub.challenge’]);<\/p>\n
} else {<\/p>\n
res.send(‘Invalid verify token’);<\/p>\n
}<\/p>\n
});<\/p><\/blockquote>\n
Save this file as\u00a0index.js<\/strong><\/p>\nNote:<\/strong>\u00a0<\/strong>In Line 13, the value of \u2018hub.verify_token\u2019 is set as \u2018testbot_verify_token\u2019<\/strong>, remember this value as it will be used when creating the webhook in\u00a0Facebook.<\/p>\nCreate Git Repository<\/strong><\/span><\/h4>\nNow that we have set up our bot\u2019s callback handling, we need to push the code to\u00a0Heroku. For that, we need to create a git repository in our directory.<\/p>\n
Note:\u00a0<\/strong>\u201cgit\u201d is a version control system for\u00a0files and software code. You can read more about it on\u00a0Wikipedia<\/a>.<\/p>\nCreating a git repository is easy, and only takes a couple of Terminal commands.<\/p>\n
Note:\u00a0<\/strong>Make sure you are inside the \u201ctestbot<\/strong>\u201d directory in the Terminal. You can do this by typing the command\u00a0pwd\u00a0into the Terminal.<\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/5-23.png\")
<\/p>\n
Follow these steps to\u00a0create a git repository:<\/p>\n
\n\n- git init<\/li>\n
- git add .<\/li>\n
- git commit -m “Register Facebook Webhook”<\/li>\n<\/ol>\n<\/blockquote>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/6-24.png\")
<\/p>\n
Setup Heroku<\/strong><\/span><\/h4>\nBefore we even go into Facebook\u2019s developer pages, we need a callback URL that Facebook can talk to. This URL needs to use the\u00a0https protocol<\/strong>, which means we need to install an SSL certificate on our website; but, this is a beginner\u2019s guide to Facebook messenger bots, so let\u2019s not complicate things. We\u2019ll use Heroku to deploy our code. Heroku gives you https URLs for your applications and has a free plan which meets our (very basic) demands.<\/p>\nGo to the\u00a0Heroku website<\/a>\u00a0and register yourself.<\/p>\nNote:\u00a0<\/strong>In the field that says \u201cPick Your Primary Development Language\u201d, use \u201cI use another Language\u201d.<\/p>\nOnce you\u2019re done with that, install the\u00a0Heroku toolbelt<\/a>\u00a0for your OS (Mac, for me), and install it. This will give you access to\u00a0Heroku on your Terminal (or command prompt, on Windows).<\/p>\nNext, we will create an app on Heroku, which will hold the entire code for our bot. Follow the steps below:<\/p>\n
\n- Launch Terminal<\/li>\n
- Typeheroku login<\/li>\n<\/ol>\n
\n- You will be asked to enter your email and password.<\/li>\n
- Type your email, hit Enter; then, type your password, hit Enter.<\/li>\n
- You will be logged in to heroku<\/li>\n<\/ul>\n
\n- Typeheroku create<\/li>\n<\/ol>\n
\n- This will create an app on Heroku and provide you with a hyperlink. Note that the link is using the https protocol. Easy, right?<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/7-23.png\")
<\/p>\n[ad type=”banner”]\n
\n- Now you can push your app code to Heroku
\ngit push heroku master<\/li>\n<\/ol>\n![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/8-19.png\")
<\/p>\n
5.Once this is done, your app is basically live, and you can visit the link in your browser to check that everything is \u00a0 \u00a0 \u00a0 \u00a0 working fine. It should open a webpage saying \u201cThis is TestBot Server<\/strong>\u201c.<\/p>\nFacebook Setup<\/strong><\/span><\/h4>\nIt\u2019s time to connect our bot to Facebook! You will need to create a new Facebook Page or use an existing one that you own. I\u2019ll show you how to proceed by creating a new Facebook Page.<\/p>\n
1.Go to Facebook and\u00a0create a new page<\/a>.<\/p>\n\n- You can create a page in whichever category you want. I\u2019m opting for Company\/Organisation, for no particular reason.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/9-18.png\")
<\/p>\n
2.The next steps that Facebook shows are optional, and can be skipped.<\/p>\n
3.Next, head over to the\u00a0Facebook Developers\u2019 Website<\/a>.<\/p>\n\n- On the top-right,\u00a0hover your mouse on \u201cMy Apps<\/strong>\u201d and then click on \u201cAdd a New App<\/strong>\u201d from the drop-down menu.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/10-16.png\")
<\/p>\n
\n- Click on \u201cbasic setup<\/strong>\u201d when Facebook prompts you to choose a platform.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/11-8.png\")
<\/p>\n
4.Fill up the details for your App Name and contact email address.<\/p>\n
\n- Select \u201cApps for Pages<\/strong>\u201d in the Category.<\/li>\n
- Click on \u201cCreate App ID<\/strong>\u201c.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/12-6.png\")
<\/p>\n
5.You will be taken to the dashboard for your app. On the sidebar, navigate to \u201c+Add Products<\/strong>\u201d and select \u201cMessenger<\/strong>\u201d by clicking on the \u201cGet Started<\/strong>\u201d button.<\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/13-2.png\")
<\/p>\n
6.Select \u201cSetup Webhooks<\/strong>\u201c.<\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/14-1.png\")
<\/p>\n[ad type=”banner”]\n
7.Fill up the required fields, replacing the \u201cCallback URL\u201d with the URL of the Heroku app, Verify Token with the token used in the index.js file, and select the\u00a0following Subscription Fields:<\/p>\n
\n- message_deliveries<\/li>\n
- messages<\/li>\n
- message_optins<\/li>\n
- messaging_post backs<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/15-1.png\")
<\/p>\n
Note:\u00a0<\/strong>Make sure you append \u201c\/webhook<\/strong>\u201d to the Callback URL so that index.js executes the required function when Facebook tries to ping the URL, it can verify the \u201cVerify Token\u201d.<\/p>\n8.Click on \u201cVerify and Save<\/strong>\u201c.<\/p>\n9.In the \u201cToken Generation<\/strong>\u201d section, click on \u201cSelect a Page<\/strong>\u201d and select the page you created earlier.<\/p>\nThis will generate a \u201cPage Access Token<\/strong>\u201c, save it somewhere; you will need it later.<\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/16-1.png\")
<\/p>\n
10.Next,\u00a0you will have to make a POST query to your app, using the Page Access Token generated in the last step. This can be easily done in the Terminal. Just run the following command,replacing PAGE_ACCESS_TOKEN with the Page Access Token you generated<\/strong>.<\/p>\ncurl\u00a0-X POST \u201chttps:\/\/graph.facebook.com\/v2.6\/me\/subscribed_apps?access_token=PAGE_ACCESS_TOKEN\u201d<\/p>\n
You\u00a0should receive a \u201csuccess<\/strong>\u201d response in the Terminal.<\/p>\nMore Heroku Setup<\/strong><\/span><\/h4>\nYeah, we\u2019re not done, yet. Not nearly.<\/p>\n
1.Go to the Heroku website and log in with your email ID.<\/p>\n
2.Locate your app in the \u201cdashboard\u201d and click on it.<\/p>\n
3.Navigate to the Settings tab.<\/p>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/17-1.png\")
<\/p>\n
4.Click on \u201cReveal Config Vars<\/strong>\u201d<\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/18-1.png\")
<\/p>\n
5.Add the PAGE_ACCESS_TOKEN as a \u201cconfig var<\/strong>\u201c, and click \u201cAdd<\/strong>\u201c.<\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/19.png\")
<\/p>\n
Coding the Actual Bot<\/strong><\/span><\/h4>\nNow that we\u2019re done with the grunt work, we can focus on what really matters: making\u00a0the bot respond to\u00a0messages. To start off, we\u2019ll just design a bot that simply echoes the messages it receives. As it turns out, this simple task requires a considerable bit of code to function.<\/p>\n
1.<\/strong>\u00a0<\/strong>Coding the Message Listener<\/strong><\/span><\/h4>\nBefore the bot can echo back the message, it needs to be able to listen for messages. Let\u2019s do that first.<\/p>\n
In the index.js file, add the following code:<\/p>\n
app.post(‘\/webhook’, function (req, res) {<\/p>\n
var events = req.body.entry[0].messaging;<\/p>\n
for (i = 0; i < events.length; i++) {<\/p>\n
var event = events[i];<\/p>\n
if (event.message && event.message.text) {<\/p>\n
sendMessage(event.sender.id, {text: “Echo: ” + event.message.text});<\/p>\n
}<\/p>\n
}<\/p>\n
res.sendStatus(200);<\/p>\n
});<\/p><\/blockquote>\n
What this function does, is it checks for received messages, and then checks if there is text in the message. If it finds text in the received message, it calls the sendMessage (shown later) function, passing the sender\u2019s ID and the text to send back. It\u2019s important to understand the following\u00a0values and what they mean:<\/p>\n
\n- message.text is the text received in the message. For example, if someone sends the message \u201cHello\u201d to our bot, the value of event.message.text will be \u201cHello\u201d.<\/li>\n
- sender.id is the id of the person who sent the message to the bot. This is required so that the bot knows whom to address the response to.<\/li>\n<\/ul>\n
2.\u00a0Coding the sendMessage Function<\/strong><\/span><\/h4>\nLets code the \u201csendMessage\u201d function, now.<\/p>\n
function sendMessage(recipientId, message) {<\/p>\n
request({<\/p>\n
url: ‘https:\/\/graph.facebook.com\/v2.6\/me\/messages’,<\/p>\n
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},<\/p>\n
method: ‘POST’,<\/p>\n
json: {<\/p>\n
recipient: {id: recipientId},<\/p>\n
message: message,<\/p>\n
}<\/p>\n
}, function(error, response, body) {<\/p>\n
if (error) {<\/p>\n
console.log(‘Error sending message: ‘, error);<\/p>\n
} else if (response.body.error) {<\/p>\n
console.log(‘Error: ‘, response.body.error);<\/p>\n
}<\/p>\n
});<\/p>\n
};<\/p><\/blockquote>\n
The \u201csendMessage\u201d function takes two parameters:<\/p>\n
\n- recipientId<\/li>\n
- message<\/li>\n<\/ul>\n
The recipientId is required so that the message can be addressed to the correct user.<\/p>\n
The message is the actual text that is to be sent in the response.<\/p>\n
3.\u00a0Pushing the Changes to Heroku<\/strong><\/span><\/h4>\nIf you have completed the steps above, your bot should be able to echo back the received text. But first, you have to push the changes to the application hosted on Heroku. To do this, follow the steps given below:<\/p>\n
\n- Launch Terminal.<\/li>\n
- Change directory to your testbot directory
\ncd testbot<\/li>\n - Do the following steps:<\/li>\n<\/ol>\n
\n- git add .<\/li>\n
- Note:\u00a0<\/strong>There is a \u201c.\u201d at the end of \u201cgit add\u201d<\/li>\n
- git commit -m \u201cFirst commit\u201d<\/li>\n
- git push heroku master<\/li>\n<\/ul>\n
\n- Now send a message to your page, and the bot will echo the message back to you.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/20.png\")
<\/p>\n
Conditional Responses aka Making the Bot Smarter<\/strong><\/span><\/h4>\nWe can use text matching to allow our\u00a0Facebook messenger bot to respond according to certain special keywords.<\/p>\n
To achieve this, we need to add another function. I\u2019m naming it \u201cconditionalResponses\u201d, but you can choose whatever name you prefer.<\/p>\n
1.\u00a0Coding the conditional Responses Function<\/strong><\/span><\/h4>\nfunction conditionalResponses(recipientId, text) {<\/p>\n
text = text || “”;<\/p>\n
var what = text.match(\/what\/gi); \/\/check if text string contains the word “what”; ignore case<\/p>\n
var beebom = text.match(\/beebom\/gi); \/\/check if text string contains the word “beebom”; ignore case<\/p>\n
var who = text.match(\/who\/gi); \/\/check if text string contains the word “who”; ignore case<\/p>\n
var you = text.match(\/you\/gi); \/\/check if text string contains the word “you”; ignore case<\/p>\n
\/\/if text contains both “what” and “beebom”, do this:<\/p>\n
if(what != null &&; beebom != null) {<\/p>\n
message = {<\/p>\n
text: “Beebom is a website offering tech resources. Welcome.”<\/p>\n
}<\/p>\n
sendMessage(recipientId, message);<\/p>\n
return true;<\/p>\n
}<\/p>\n
\/\/if text contains both “who” and “you”, do this:<\/p>\n
if(who != null && you != null) {<\/p>\n
message = {<\/p>\n
text: “I have been asked not to discuss my identity online.”<\/p>\n
}<\/p>\n
sendMessage(recipientId, message);<\/p>\n
return true;<\/p>\n
}<\/p>\n
\/\/if nothing matched, return false to continue execution of inner function.<\/p>\n
return false;<\/p>\n
};<\/p><\/blockquote>\n
In lines 4 to 7, we have defined variables depending on matching the received string against particular words. The best part about using \u201ctext.match()\u201d is that it uses Regular Expressions (usually called regex, read more\u00a0here<\/a>.). It is good for us, because this means that as long as even a part of a word in the received text matches with either of the words we mentioned in text.match(), the variable will\u00a0not be null. This means, that if the received message was \u201cWhat\u2019s Beebom?\u201d, \u201cvar what\u201d and \u201cvar beebom\u201d will not be null, because the word \u201cWhat\u2019s\u201d contains the word \u201cwhat\u201d. So we are saved from creating extra statements for every variation in which someone might say \u201cWhat\u201d.<\/p>\n[ad type=”banner”]\n2.\u00a0Editing the Message Listener<\/strong><\/span><\/h4>\nWe also need to edit the Message Listener we coded, to ensure that it tries to match the received text with the \u201cconditionalResponses\u201d function as well.<\/p>\n
app.post(‘\/webhook’, function (req, res) {<\/p>\n
var events = req.body.entry[0].messaging;<\/p>\n
for (i = 0; i < events.length; i++) {<\/p>\n
var event = events[i];<\/p>\n
if (event.message && event.message.text) {<\/p>\n
\/\/first try to check whether received message qualifies for conditional response.<\/p>\n
if(!conditionalResponses(event.sender.id, event.message.text)) {<\/p>\n
\/\/if it doesn’t, simply echo the received message back to the sender.<\/p>\n
sendMessage(event.sender.id, {text: “Echo: ” + event.message.text});<\/p>\n
}<\/p>\n
}<\/p>\n
}<\/p>\n
res.sendStatus(200);<\/p>\n
});<\/p><\/blockquote>\n
The changes\u00a0in the listener might not look very drastic, but their effects sure are. Now, the listener first tries to respond with conditional responses, and if there is no valid condition for the received message, it simply echoes the message back to the user.<\/p>\n
3.\u00a0Pushing the Changes to Heroku<\/strong><\/span><\/h4>\nBefore you can try out the new features, you will have to push the updated code to the app hosted on Heroku. Follow the steps below to do this:<\/p>\n
\n- Launch Terminal.<\/li>\n
- Change directory to your testbot directory
\ncd testbot<\/li>\n - Do the following steps:<\/li>\n<\/ol>\n
\n- git add .<\/li>\n
- Note:\u00a0<\/strong>There is a \u201c.\u201d at the end of \u201cgit add\u201d<\/li>\n
- git commit -m \u201cAdding conditional capabilities\u201d<\/li>\n
- git push heroku master<\/li>\n<\/ul>\n
\n- Now send a message to your page, and the bot will echo the message back to you.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/21.png\")
<\/p>\n
Even More Functionality<\/strong><\/span><\/h4>\nOur bot now responds to a small set of commands in nice, well structured responses. But it\u2019s still not very useful. Let\u2019s make some more changes to the code to make our bot a more \u201cfunctional<\/strong>\u201d piece of software. We\u2019ll be\u00a0revamping a lot of functions<\/strong>, and adding a couple more, so get excited.<\/p>\n1.\u00a0Editing the Message Listener<\/strong><\/span><\/h4>\nOur message listener, at this stage, works just ok. However, it\u2019s not very nicely formatted and if we were to keep increasing the nested if statements to add extra \u201ccondition checks<\/strong>\u201c, it will quickly become\u00a0ugly to look at, difficult to understand and slower at execution. We don\u2019t want that, now, do we? Let\u2019s make some changes.<\/p>\nNote:\u00a0<\/strong>There\u2019s a line of code in the message listener that reads\u00a0\u201cres.sendStatus(200)\u201d<\/strong>, this line sends a status 200 code to Facebook, telling it that the function successfully executed. According to Facebook\u2019s documentation, Facebook waits for a maximum of 20 seconds to receive a 200 status, before it decides that the message didn\u2019t go through and stops execution of the code.<\/p>\nOur new message listener looks like this. We use the \u201cres.sendStatus(200)<\/strong>\u201d command to stop execution of the function as soon as a condition is matched and executed.<\/p>\napp.post(‘\/webhook’, function (req, res) {<\/p>\n
var events = req.body.entry[0].messaging;<\/p>\n
for (i = 0; i < events.length; i++) {<\/p>\n
var event = events[i];<\/p>\n
if (event.message && event.message.text) {<\/p>\n
\/\/first check message text against introResponse conditions<\/p>\n
if(introResponse(event.sender.id, event.message.text)) {<\/p>\n
res.sendStatus(200);<\/p>\n
}<\/p>\n
\/\/for lack of a better name, I called this newResponse :p; check this next<\/p>\n
else if(newResponse(event.sender.id, event.message.text)) {<\/p>\n
res.sendStatus(200);<\/p>\n
}<\/p>\n
\/\/else, just echo back the original message<\/p>\n
else {<\/p>\n
\/\/replace echo with valid command list<\/p>\n
sendMessage(event.sender.id, {text: “Echo: ” + event.message.text});<\/p>\n
}<\/p>\n
}<\/p>\n
}<\/p>\n
res.sendStatus(200);<\/p>\n
});<\/p><\/blockquote>\n
2.\u00a0Coding the newResponse Function<\/strong><\/span><\/h4>\nOur message listener now checks the message text against a set of conditions in\u00a0\u201cnewResponse\u201d<\/strong>\u00a0as well, but first, we need to code the newResponse function. We will be using this function to check if the user asked for\u00a0<\/strong>article suggestions<\/strong>\u00a0from the Beebom website,\u00a0search the query<\/strong>\u00a0term on the website, and\u00a0present the link<\/strong>\u00a0to the user. Once again, we will use regular expressions to match text with specific keywords.<\/p>\nfunction newResponse(recipientId, text) {<\/p>\n
text = text || “”;<\/p>\n
var suggest = text.match(\/suggest\/gi);<\/p>\n
var random = text.match(\/random\/gi);<\/p>\n
var article = text.match(\/article\/gi);<\/p>\n
var iphone = text.match(\/iphone\/gi);<\/p>\n
var android = text.match(\/android\/gi);<\/p>\n
var mac = text.match(\/mac\/gi);<\/p>\n
var browser = text.match(\/browser\/gi);<\/p>\n
var vpn = text.match(\/vpn\/gi);<\/p>\n
\/\/check if user is asking for article suggestions at all<\/p>\n
if(suggest != null && article != null) {<\/p>\n
var query = “”;<\/p>\n
\/\/if article suggestions are queried, check the topic the user is looking for<\/p>\n
if(android != null) {<\/p>\n
query = “Android”;<\/p>\n
} else if (mac != null) {<\/p>\n
query = “Mac”;<\/p>\n
} else if (iphone != null) {<\/p>\n
query = “iPhone”;<\/p>\n
} else if (browser != null) {<\/p>\n
query = “Browser”;<\/p>\n
} else if (vpn != null) {<\/p>\n
query = “VPN”;<\/p>\n
}<\/p>\n
sendButtonMessage(recipientId, query);<\/p>\n
return true<\/p>\n
}<\/p>\n
return false;<\/p>\n
};<\/p><\/blockquote>\n
We are using another custom function called\u00a0\u201csendButtonMessage\u201d\u00a0<\/strong>to send the message in case the user is asking for article suggestions. We will create this next.<\/p>\n3.\u00a0Coding the send Button Message Function<\/strong><\/span><\/h4>\nThe send Button Message function\u00a0takes two parameters, a\u00a0recipient ID<\/strong>\u00a0and a\u00a0query.\u00a0<\/strong>The recipient ID is used to identify the user to whom the message must be sent, and the query is used to identify the topic on which the user wants article suggestions.<\/p>\nfunction send Button Message(recipientId, query) {<\/p>\n
var messageData = {<\/p>\n
recipient: {<\/p>\n
id: recipientId<\/p>\n
},<\/p>\n
message: {<\/p>\n
attachment: {<\/p>\n
type: “template”,<\/p>\n
payload: {<\/p>\n
template_type: “button”,<\/p>\n
text: “This is what I found for “+query,<\/p>\n
buttons:[{<\/p>\n
type: “web_url”,<\/p>\n
url: “http:\/\/www.beebom.com\/?s=”+query,<\/p>\n
title: “Beebom: ” + query<\/p>\n
}]\n
}<\/p>\n
}<\/p>\n
}<\/p>\n
};<\/p>\n
callSendAPI(messageData);<\/p>\n
}<\/p><\/blockquote>\n
Once again, we are using a custom function; this time to send the final message, with the article links, to the user. The function is, in many ways, similar to the\u00a0\u201csendMessage\u201d\u00a0<\/strong>function we coded earlier, but is more generic in the way it takes the message data, which suits us, because our message data changes with the query that the user\u00a0makes.<\/p>\n4.\u00a0Coding the\u00a0callSendAPI\u00a0Function<\/strong><\/span><\/h4>\nThe\u00a0\u201ccallSendAPI\u201d\u00a0<\/strong>function takes a single parameter, the\u00a0\u201cmessageData\u201d<\/strong>. This parameter contains the entire message data, formatted\u00a0properly according to Facebook rules, so that the messenger can display it properly to the user.<\/p>\nfunction callSendAPI(messageData) {<\/p>\n
request({<\/p>\n
uri: ‘https:\/\/graph.facebook.com\/v2.6\/me\/messages’,<\/p>\n
qs: { access_token: process.env.PAGE_ACCESS_TOKEN },<\/p>\n
method: ‘POST’,<\/p>\n
json: messageData<\/p>\n
}, function (error, response, body) {<\/p>\n
if (!error && response.statusCode == 200) {<\/p>\n
var recipientId = body.recipient_id;<\/p>\n
var messageId = body.message_id;<\/p>\n
console.log(“Successfully sent generic message with id %s to recipient %s”,<\/p>\n
messageId, recipientId);<\/p>\n
} else {<\/p>\n
console.error(“Unable to send message.”);<\/p>\n
console.error(response);<\/p>\n
console.error(error);<\/p>\n
}<\/p>\n
});<\/p>\n
}<\/p><\/blockquote>\n
5.\u00a0Pushing the Changes to Heroku<\/strong><\/span><\/h4>\nWe\u2019re at the final step towards making our upgraded bot live. We just need to push all the code changes to Heroku. The process is the same as before, and is outlined below:<\/p>\n
\n- Launch Terminal.<\/li>\n
- Change directory to the\u00a0testbot\u00a0<\/strong>directory.
\ncd testbot<\/li>\n- Do the following:<\/li>\n<\/ol>\n
\n- git add .<\/li>\n
- Note:\u00a0<\/strong>There is a\u00a0\u201c.\u201d\u00a0<\/strong>at the end of that command.<\/li>\n
- git commit -m \u201cimproving condition checks and formatting\u201d<\/li>\n
- git push heroku master<\/li>\n<\/ul>\n
\n- Now send a message such as \u201cSuggest an article on Android\u201d, or \u201cBeebom, suggest me any article on the topic Android\u201d; and the bot will send a nicely formatted message with a link that you can tap on to open the articles related to your query.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/22.png\")
<\/p>\n
<\/p>\n
![\"\"](\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/04\/23.png\")
<\/p>\n
Dig Deeper<\/strong><\/span><\/h4>\nNow that you know how to get started with developing Facebook messenger bots, go through the\u00a0Facebook documentation<\/a>\u00a0on how to develop Facebook messenger bots. While the documentation is not good for beginners, you\u2019re not a beginner anymore. You should check out the official documentation and try to figure out how to make your bot even smarter. Teaser: You can send\u00a0messages with images and buttons as well! It\u2019s also possible to use services such as\u00a0Wit.ai<\/a>\u00a0and\u00a0Api.ai<\/a>\u00a0to code your bot and then integrate it with Facebook, but in my feeble attempts to use those services, Wit.ai doesn\u2019t work too well, and Api.ai has\u00a0a sharp learning curve for\u00a0beginners.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Facebook Messenger Bot (Guide) – Internet – Messenger bots now also require you to use a SSL secured webhook callback URL, and setting up <\/p>\n","protected":false},"author":2,"featured_media":10353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18379],"tags":[23463,23462,23461,23459,23456,23458,23457,23452,23446,23447,23455,23442,23448,23466,23453,23438,23451,23454,23465,23450,23436,23441,23437,23435,23440,23439,23443,23445,23449,23464,23460,23444],"class_list":["post-7953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","tag-bot-facebook","tag-bot-for-facebook","tag-create-a-facebook-app-tutorial","tag-create-facebook-app-tutorial","tag-develop-facebook","tag-develop-facebook-app-tutorial","tag-facebook-app-creation-tutorial","tag-facebook-app-developer-tutorial","tag-facebook-app-development-tutorial","tag-facebook-app-tutorial","tag-facebook-bot","tag-facebook-bot-example","tag-facebook-bot-tutorial","tag-facebook-chat-bots","tag-facebook-chatbot","tag-facebook-chatbot-tutorial","tag-facebook-com-messenger","tag-facebook-developer-tutorial","tag-facebook-development-tutorial","tag-facebook-messenger-bot","tag-facebook-messenger-bot-example","tag-facebook-messenger-bot-github","tag-facebook-messenger-bot-python","tag-facebook-messenger-bot-tutorial","tag-facebook-messenger-templates","tag-facebook-messenger-webhook","tag-facebook-tutorial","tag-facebook-tutorial-2016","tag-facebook-tutorial-for-dummies","tag-m-basic-facebook","tag-simple-facebook","tag-tutorial-facebook"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/7953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=7953"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/7953\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media\/10353"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=7953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=7953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=7953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Once you are done, you can continue with the setup for the bot. Follow the steps below:<\/p>\n
- \n
- Launch Terminal.<\/li>\n
- You need a separate directory for holding your code.<\/li>\n<\/ol>\n
- \n
- Make a new directory
\nmkdir\u00a0testbot<\/li>\n - Change your working directory to the directory you just created
\ncd testbot<\/li>\n<\/ul>\n<\/p>\n- \n
- Next, initialise the Node application.
\nnpm init<\/li>\n<\/ol>\n- \n
- You will be asked to enter information about your application, just use the defaults by pressing Enter for everything.<\/li>\n<\/ul>\n<\/p>\n
- \n
- Install\u00a0packages
\nnpm\u00a0install express body-parser request –save<\/li>\n<\/ol>\n- \n
- The command will run, and give some warnings; ignore them.<\/li>\n<\/ul>\n<\/p>\n[ad type=”banner”]\n
- \n
- In Finder, open the directory \u201ctestbot<\/strong>\u201d that you created, and find the file named \u201cpackage.json<\/strong>\u201c; open this in an editor like Sublime Text.<\/li>\n
- In this file, we need to add a line
\n“start”: “node index.js”<\/li>\n<\/ol>\n- \n
- Don\u2019t forget to append a\u201c,\u201d<\/strong>\u00a0at the end of the previous line.<\/li>\n<\/ul>\n<\/p>\n
- \n
- Next, create a new file in Sublime Text, and put in the following code inside it:<\/li>\n<\/ol>\n
var express = require(‘express’);<\/p>\n
var bodyParser = require(‘body-parser’);<\/p>\n
var request = require(‘request’);<\/p>\n
var app = express();<\/p>\n
app.use(bodyParser.urlencoded({extended: false}));<\/p>\n
app.use(bodyParser.json());<\/p>\n
app.listen((process.env.PORT || 3000));<\/p>\n
app.get(‘\/’, function (req, res) {<\/p>\n
res.send(‘This is TestBot Server’);<\/p>\n
});<\/p>\n
app.get(‘\/webhook’, function (req, res) {<\/p>\n
if (req.query[‘hub.verify_token’] === ‘testbot_verify_token’) {<\/p>\n
res.send(req.query[‘hub.challenge’]);<\/p>\n
} else {<\/p>\n
res.send(‘Invalid verify token’);<\/p>\n
}<\/p>\n
});<\/p><\/blockquote>\n
Save this file as\u00a0index.js<\/strong><\/p>\n
Note:<\/strong>\u00a0<\/strong>In Line 13, the value of \u2018hub.verify_token\u2019 is set as \u2018testbot_verify_token\u2019<\/strong>, remember this value as it will be used when creating the webhook in\u00a0Facebook.<\/p>\n
Create Git Repository<\/strong><\/span><\/h4>\n
Now that we have set up our bot\u2019s callback handling, we need to push the code to\u00a0Heroku. For that, we need to create a git repository in our directory.<\/p>\n
Note:\u00a0<\/strong>\u201cgit\u201d is a version control system for\u00a0files and software code. You can read more about it on\u00a0Wikipedia<\/a>.<\/p>\n
Creating a git repository is easy, and only takes a couple of Terminal commands.<\/p>\n
Note:\u00a0<\/strong>Make sure you are inside the \u201ctestbot<\/strong>\u201d directory in the Terminal. You can do this by typing the command\u00a0pwd\u00a0into the Terminal.<\/p>\n
<\/p>\nFollow these steps to\u00a0create a git repository:<\/p>\n
\n
- \n
- git init<\/li>\n
- git add .<\/li>\n
- git commit -m “Register Facebook Webhook”<\/li>\n<\/ol>\n<\/blockquote>\n<\/p>\n
Setup Heroku<\/strong><\/span><\/h4>\n
Before we even go into Facebook\u2019s developer pages, we need a callback URL that Facebook can talk to. This URL needs to use the\u00a0https protocol<\/strong>, which means we need to install an SSL certificate on our website; but, this is a beginner\u2019s guide to Facebook messenger bots, so let\u2019s not complicate things. We\u2019ll use Heroku to deploy our code. Heroku gives you https URLs for your applications and has a free plan which meets our (very basic) demands.<\/p>\n
Go to the\u00a0Heroku website<\/a>\u00a0and register yourself.<\/p>\n
Note:\u00a0<\/strong>In the field that says \u201cPick Your Primary Development Language\u201d, use \u201cI use another Language\u201d.<\/p>\n
Once you\u2019re done with that, install the\u00a0Heroku toolbelt<\/a>\u00a0for your OS (Mac, for me), and install it. This will give you access to\u00a0Heroku on your Terminal (or command prompt, on Windows).<\/p>\n
Next, we will create an app on Heroku, which will hold the entire code for our bot. Follow the steps below:<\/p>\n
- \n
- Launch Terminal<\/li>\n
- Typeheroku login<\/li>\n<\/ol>\n
- \n
- You will be asked to enter your email and password.<\/li>\n
- Type your email, hit Enter; then, type your password, hit Enter.<\/li>\n
- You will be logged in to heroku<\/li>\n<\/ul>\n
- \n
- Typeheroku create<\/li>\n<\/ol>\n
- \n
- This will create an app on Heroku and provide you with a hyperlink. Note that the link is using the https protocol. Easy, right?<\/li>\n<\/ul>\n<\/p>\n[ad type=”banner”]\n
- \n
- Now you can push your app code to Heroku
\ngit push heroku master<\/li>\n<\/ol>\n<\/p>\n5.Once this is done, your app is basically live, and you can visit the link in your browser to check that everything is \u00a0 \u00a0 \u00a0 \u00a0 working fine. It should open a webpage saying \u201cThis is TestBot Server<\/strong>\u201c.<\/p>\n
Facebook Setup<\/strong><\/span><\/h4>\n
It\u2019s time to connect our bot to Facebook! You will need to create a new Facebook Page or use an existing one that you own. I\u2019ll show you how to proceed by creating a new Facebook Page.<\/p>\n
1.Go to Facebook and\u00a0create a new page<\/a>.<\/p>\n
- \n
- You can create a page in whichever category you want. I\u2019m opting for Company\/Organisation, for no particular reason.<\/li>\n<\/ul>\n<\/p>\n
2.The next steps that Facebook shows are optional, and can be skipped.<\/p>\n
3.Next, head over to the\u00a0Facebook Developers\u2019 Website<\/a>.<\/p>\n
- \n
- On the top-right,\u00a0hover your mouse on \u201cMy Apps<\/strong>\u201d and then click on \u201cAdd a New App<\/strong>\u201d from the drop-down menu.<\/li>\n<\/ul>\n<\/p>\n
- \n
- Click on \u201cbasic setup<\/strong>\u201d when Facebook prompts you to choose a platform.<\/li>\n<\/ul>\n<\/p>\n
4.Fill up the details for your App Name and contact email address.<\/p>\n
- \n
- Select \u201cApps for Pages<\/strong>\u201d in the Category.<\/li>\n
- Click on \u201cCreate App ID<\/strong>\u201c.<\/li>\n<\/ul>\n
<\/p>\n5.You will be taken to the dashboard for your app. On the sidebar, navigate to \u201c+Add Products<\/strong>\u201d and select \u201cMessenger<\/strong>\u201d by clicking on the \u201cGet Started<\/strong>\u201d button.<\/p>\n
<\/p>\n6.Select \u201cSetup Webhooks<\/strong>\u201c.<\/p>\n
<\/p>\n[ad type=”banner”]\n7.Fill up the required fields, replacing the \u201cCallback URL\u201d with the URL of the Heroku app, Verify Token with the token used in the index.js file, and select the\u00a0following Subscription Fields:<\/p>\n
- \n
- message_deliveries<\/li>\n
- messages<\/li>\n
- message_optins<\/li>\n
- messaging_post backs<\/li>\n<\/ul>\n<\/p>\n
Note:\u00a0<\/strong>Make sure you append \u201c\/webhook<\/strong>\u201d to the Callback URL so that index.js executes the required function when Facebook tries to ping the URL, it can verify the \u201cVerify Token\u201d.<\/p>\n
8.Click on \u201cVerify and Save<\/strong>\u201c.<\/p>\n
9.In the \u201cToken Generation<\/strong>\u201d section, click on \u201cSelect a Page<\/strong>\u201d and select the page you created earlier.<\/p>\n
This will generate a \u201cPage Access Token<\/strong>\u201c, save it somewhere; you will need it later.<\/p>\n
<\/p>\n10.Next,\u00a0you will have to make a POST query to your app, using the Page Access Token generated in the last step. This can be easily done in the Terminal. Just run the following command,replacing PAGE_ACCESS_TOKEN with the Page Access Token you generated<\/strong>.<\/p>\n
curl\u00a0-X POST \u201chttps:\/\/graph.facebook.com\/v2.6\/me\/subscribed_apps?access_token=PAGE_ACCESS_TOKEN\u201d<\/p>\n
You\u00a0should receive a \u201csuccess<\/strong>\u201d response in the Terminal.<\/p>\n
More Heroku Setup<\/strong><\/span><\/h4>\n
Yeah, we\u2019re not done, yet. Not nearly.<\/p>\n
1.Go to the Heroku website and log in with your email ID.<\/p>\n
2.Locate your app in the \u201cdashboard\u201d and click on it.<\/p>\n
3.Navigate to the Settings tab.<\/p>\n
<\/p>\n4.Click on \u201cReveal Config Vars<\/strong>\u201d<\/p>\n
<\/p>\n5.Add the PAGE_ACCESS_TOKEN as a \u201cconfig var<\/strong>\u201c, and click \u201cAdd<\/strong>\u201c.<\/p>\n
<\/p>\nCoding the Actual Bot<\/strong><\/span><\/h4>\n
Now that we\u2019re done with the grunt work, we can focus on what really matters: making\u00a0the bot respond to\u00a0messages. To start off, we\u2019ll just design a bot that simply echoes the messages it receives. As it turns out, this simple task requires a considerable bit of code to function.<\/p>\n
1.<\/strong>\u00a0<\/strong>Coding the Message Listener<\/strong><\/span><\/h4>\n
Before the bot can echo back the message, it needs to be able to listen for messages. Let\u2019s do that first.<\/p>\n
In the index.js file, add the following code:<\/p>\n
app.post(‘\/webhook’, function (req, res) {<\/p>\n
var events = req.body.entry[0].messaging;<\/p>\n
for (i = 0; i < events.length; i++) {<\/p>\n
var event = events[i];<\/p>\n
if (event.message && event.message.text) {<\/p>\n
sendMessage(event.sender.id, {text: “Echo: ” + event.message.text});<\/p>\n
}<\/p>\n
}<\/p>\n
res.sendStatus(200);<\/p>\n
});<\/p><\/blockquote>\n
What this function does, is it checks for received messages, and then checks if there is text in the message. If it finds text in the received message, it calls the sendMessage (shown later) function, passing the sender\u2019s ID and the text to send back. It\u2019s important to understand the following\u00a0values and what they mean:<\/p>\n
- \n
- message.text is the text received in the message. For example, if someone sends the message \u201cHello\u201d to our bot, the value of event.message.text will be \u201cHello\u201d.<\/li>\n
- sender.id is the id of the person who sent the message to the bot. This is required so that the bot knows whom to address the response to.<\/li>\n<\/ul>\n
2.\u00a0Coding the sendMessage Function<\/strong><\/span><\/h4>\n
Lets code the \u201csendMessage\u201d function, now.<\/p>\n
function sendMessage(recipientId, message) {<\/p>\n
request({<\/p>\n
url: ‘https:\/\/graph.facebook.com\/v2.6\/me\/messages’,<\/p>\n
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},<\/p>\n
method: ‘POST’,<\/p>\n
json: {<\/p>\n
recipient: {id: recipientId},<\/p>\n
message: message,<\/p>\n
}<\/p>\n
}, function(error, response, body) {<\/p>\n
if (error) {<\/p>\n
console.log(‘Error sending message: ‘, error);<\/p>\n
} else if (response.body.error) {<\/p>\n
console.log(‘Error: ‘, response.body.error);<\/p>\n
}<\/p>\n
});<\/p>\n
};<\/p><\/blockquote>\n
The \u201csendMessage\u201d function takes two parameters:<\/p>\n
- \n
- recipientId<\/li>\n
- message<\/li>\n<\/ul>\n
The recipientId is required so that the message can be addressed to the correct user.<\/p>\n
The message is the actual text that is to be sent in the response.<\/p>\n
3.\u00a0Pushing the Changes to Heroku<\/strong><\/span><\/h4>\n
If you have completed the steps above, your bot should be able to echo back the received text. But first, you have to push the changes to the application hosted on Heroku. To do this, follow the steps given below:<\/p>\n
- \n
- Launch Terminal.<\/li>\n
- Change directory to your testbot directory
\ncd testbot<\/li>\n - Do the following steps:<\/li>\n<\/ol>\n
- \n
- git add .<\/li>\n
- Note:\u00a0<\/strong>There is a \u201c.\u201d at the end of \u201cgit add\u201d<\/li>\n
- git commit -m \u201cFirst commit\u201d<\/li>\n
- git push heroku master<\/li>\n<\/ul>\n
- \n
- Now send a message to your page, and the bot will echo the message back to you.<\/li>\n<\/ol>\n<\/p>\n
Conditional Responses aka Making the Bot Smarter<\/strong><\/span><\/h4>\n
We can use text matching to allow our\u00a0Facebook messenger bot to respond according to certain special keywords.<\/p>\n
To achieve this, we need to add another function. I\u2019m naming it \u201cconditionalResponses\u201d, but you can choose whatever name you prefer.<\/p>\n
1.\u00a0Coding the conditional Responses Function<\/strong><\/span><\/h4>\n
function conditionalResponses(recipientId, text) {<\/p>\n
text = text || “”;<\/p>\n
var what = text.match(\/what\/gi); \/\/check if text string contains the word “what”; ignore case<\/p>\n
var beebom = text.match(\/beebom\/gi); \/\/check if text string contains the word “beebom”; ignore case<\/p>\n
var who = text.match(\/who\/gi); \/\/check if text string contains the word “who”; ignore case<\/p>\n
var you = text.match(\/you\/gi); \/\/check if text string contains the word “you”; ignore case<\/p>\n
\/\/if text contains both “what” and “beebom”, do this:<\/p>\n
if(what != null &&; beebom != null) {<\/p>\n
message = {<\/p>\n
text: “Beebom is a website offering tech resources. Welcome.”<\/p>\n
}<\/p>\n
sendMessage(recipientId, message);<\/p>\n
return true;<\/p>\n
}<\/p>\n
\/\/if text contains both “who” and “you”, do this:<\/p>\n
if(who != null && you != null) {<\/p>\n
message = {<\/p>\n
text: “I have been asked not to discuss my identity online.”<\/p>\n
}<\/p>\n
sendMessage(recipientId, message);<\/p>\n
return true;<\/p>\n
}<\/p>\n
\/\/if nothing matched, return false to continue execution of inner function.<\/p>\n
return false;<\/p>\n
};<\/p><\/blockquote>\n
In lines 4 to 7, we have defined variables depending on matching the received string against particular words. The best part about using \u201ctext.match()\u201d is that it uses Regular Expressions (usually called regex, read more\u00a0here<\/a>.). It is good for us, because this means that as long as even a part of a word in the received text matches with either of the words we mentioned in text.match(), the variable will\u00a0not be null. This means, that if the received message was \u201cWhat\u2019s Beebom?\u201d, \u201cvar what\u201d and \u201cvar beebom\u201d will not be null, because the word \u201cWhat\u2019s\u201d contains the word \u201cwhat\u201d. So we are saved from creating extra statements for every variation in which someone might say \u201cWhat\u201d.<\/p>\n[ad type=”banner”]\n
2.\u00a0Editing the Message Listener<\/strong><\/span><\/h4>\n
We also need to edit the Message Listener we coded, to ensure that it tries to match the received text with the \u201cconditionalResponses\u201d function as well.<\/p>\n
app.post(‘\/webhook’, function (req, res) {<\/p>\n
var events = req.body.entry[0].messaging;<\/p>\n
for (i = 0; i < events.length; i++) {<\/p>\n
var event = events[i];<\/p>\n
if (event.message && event.message.text) {<\/p>\n
\/\/first try to check whether received message qualifies for conditional response.<\/p>\n
if(!conditionalResponses(event.sender.id, event.message.text)) {<\/p>\n
\/\/if it doesn’t, simply echo the received message back to the sender.<\/p>\n
sendMessage(event.sender.id, {text: “Echo: ” + event.message.text});<\/p>\n
}<\/p>\n
}<\/p>\n
}<\/p>\n
res.sendStatus(200);<\/p>\n
});<\/p><\/blockquote>\n
The changes\u00a0in the listener might not look very drastic, but their effects sure are. Now, the listener first tries to respond with conditional responses, and if there is no valid condition for the received message, it simply echoes the message back to the user.<\/p>\n
3.\u00a0Pushing the Changes to Heroku<\/strong><\/span><\/h4>\n
Before you can try out the new features, you will have to push the updated code to the app hosted on Heroku. Follow the steps below to do this:<\/p>\n
- \n
- Launch Terminal.<\/li>\n
- Change directory to your testbot directory
\ncd testbot<\/li>\n - Do the following steps:<\/li>\n<\/ol>\n
- \n
- git add .<\/li>\n
- Note:\u00a0<\/strong>There is a \u201c.\u201d at the end of \u201cgit add\u201d<\/li>\n
- git commit -m \u201cAdding conditional capabilities\u201d<\/li>\n
- git push heroku master<\/li>\n<\/ul>\n
- \n
- Now send a message to your page, and the bot will echo the message back to you.<\/li>\n<\/ol>\n<\/p>\n
Even More Functionality<\/strong><\/span><\/h4>\n
Our bot now responds to a small set of commands in nice, well structured responses. But it\u2019s still not very useful. Let\u2019s make some more changes to the code to make our bot a more \u201cfunctional<\/strong>\u201d piece of software. We\u2019ll be\u00a0revamping a lot of functions<\/strong>, and adding a couple more, so get excited.<\/p>\n
1.\u00a0Editing the Message Listener<\/strong><\/span><\/h4>\n
Our message listener, at this stage, works just ok. However, it\u2019s not very nicely formatted and if we were to keep increasing the nested if statements to add extra \u201ccondition checks<\/strong>\u201c, it will quickly become\u00a0ugly to look at, difficult to understand and slower at execution. We don\u2019t want that, now, do we? Let\u2019s make some changes.<\/p>\n
Note:\u00a0<\/strong>There\u2019s a line of code in the message listener that reads\u00a0\u201cres.sendStatus(200)\u201d<\/strong>, this line sends a status 200 code to Facebook, telling it that the function successfully executed. According to Facebook\u2019s documentation, Facebook waits for a maximum of 20 seconds to receive a 200 status, before it decides that the message didn\u2019t go through and stops execution of the code.<\/p>\n
Our new message listener looks like this. We use the \u201cres.sendStatus(200)<\/strong>\u201d command to stop execution of the function as soon as a condition is matched and executed.<\/p>\n
app.post(‘\/webhook’, function (req, res) {<\/p>\n
var events = req.body.entry[0].messaging;<\/p>\n
for (i = 0; i < events.length; i++) {<\/p>\n
var event = events[i];<\/p>\n
if (event.message && event.message.text) {<\/p>\n
\/\/first check message text against introResponse conditions<\/p>\n
if(introResponse(event.sender.id, event.message.text)) {<\/p>\n
res.sendStatus(200);<\/p>\n
}<\/p>\n
\/\/for lack of a better name, I called this newResponse :p; check this next<\/p>\n
else if(newResponse(event.sender.id, event.message.text)) {<\/p>\n
res.sendStatus(200);<\/p>\n
}<\/p>\n
\/\/else, just echo back the original message<\/p>\n
else {<\/p>\n
\/\/replace echo with valid command list<\/p>\n
sendMessage(event.sender.id, {text: “Echo: ” + event.message.text});<\/p>\n
}<\/p>\n
}<\/p>\n
}<\/p>\n
res.sendStatus(200);<\/p>\n
});<\/p><\/blockquote>\n
2.\u00a0Coding the newResponse Function<\/strong><\/span><\/h4>\n
Our message listener now checks the message text against a set of conditions in\u00a0\u201cnewResponse\u201d<\/strong>\u00a0as well, but first, we need to code the newResponse function. We will be using this function to check if the user asked for\u00a0<\/strong>article suggestions<\/strong>\u00a0from the Beebom website,\u00a0search the query<\/strong>\u00a0term on the website, and\u00a0present the link<\/strong>\u00a0to the user. Once again, we will use regular expressions to match text with specific keywords.<\/p>\n
function newResponse(recipientId, text) {<\/p>\n
text = text || “”;<\/p>\n
var suggest = text.match(\/suggest\/gi);<\/p>\n
var random = text.match(\/random\/gi);<\/p>\n
var article = text.match(\/article\/gi);<\/p>\n
var iphone = text.match(\/iphone\/gi);<\/p>\n
var android = text.match(\/android\/gi);<\/p>\n
var mac = text.match(\/mac\/gi);<\/p>\n
var browser = text.match(\/browser\/gi);<\/p>\n
var vpn = text.match(\/vpn\/gi);<\/p>\n
\/\/check if user is asking for article suggestions at all<\/p>\n
if(suggest != null && article != null) {<\/p>\n
var query = “”;<\/p>\n
\/\/if article suggestions are queried, check the topic the user is looking for<\/p>\n
if(android != null) {<\/p>\n
query = “Android”;<\/p>\n
} else if (mac != null) {<\/p>\n
query = “Mac”;<\/p>\n
} else if (iphone != null) {<\/p>\n
query = “iPhone”;<\/p>\n
} else if (browser != null) {<\/p>\n
query = “Browser”;<\/p>\n
} else if (vpn != null) {<\/p>\n
query = “VPN”;<\/p>\n
}<\/p>\n
sendButtonMessage(recipientId, query);<\/p>\n
return true<\/p>\n
}<\/p>\n
return false;<\/p>\n
};<\/p><\/blockquote>\n
We are using another custom function called\u00a0\u201csendButtonMessage\u201d\u00a0<\/strong>to send the message in case the user is asking for article suggestions. We will create this next.<\/p>\n
3.\u00a0Coding the send Button Message Function<\/strong><\/span><\/h4>\n
The send Button Message function\u00a0takes two parameters, a\u00a0recipient ID<\/strong>\u00a0and a\u00a0query.\u00a0<\/strong>The recipient ID is used to identify the user to whom the message must be sent, and the query is used to identify the topic on which the user wants article suggestions.<\/p>\n
function send Button Message(recipientId, query) {<\/p>\n
var messageData = {<\/p>\n
recipient: {<\/p>\n
id: recipientId<\/p>\n
},<\/p>\n
message: {<\/p>\n
attachment: {<\/p>\n
type: “template”,<\/p>\n
payload: {<\/p>\n
template_type: “button”,<\/p>\n
text: “This is what I found for “+query,<\/p>\n
buttons:[{<\/p>\n
type: “web_url”,<\/p>\n
url: “http:\/\/www.beebom.com\/?s=”+query,<\/p>\n
title: “Beebom: ” + query<\/p>\n
}]\n
}<\/p>\n
}<\/p>\n
}<\/p>\n
};<\/p>\n
callSendAPI(messageData);<\/p>\n
}<\/p><\/blockquote>\n
Once again, we are using a custom function; this time to send the final message, with the article links, to the user. The function is, in many ways, similar to the\u00a0\u201csendMessage\u201d\u00a0<\/strong>function we coded earlier, but is more generic in the way it takes the message data, which suits us, because our message data changes with the query that the user\u00a0makes.<\/p>\n
4.\u00a0Coding the\u00a0callSendAPI\u00a0Function<\/strong><\/span><\/h4>\n
The\u00a0\u201ccallSendAPI\u201d\u00a0<\/strong>function takes a single parameter, the\u00a0\u201cmessageData\u201d<\/strong>. This parameter contains the entire message data, formatted\u00a0properly according to Facebook rules, so that the messenger can display it properly to the user.<\/p>\n
function callSendAPI(messageData) {<\/p>\n
request({<\/p>\n
uri: ‘https:\/\/graph.facebook.com\/v2.6\/me\/messages’,<\/p>\n
qs: { access_token: process.env.PAGE_ACCESS_TOKEN },<\/p>\n
method: ‘POST’,<\/p>\n
json: messageData<\/p>\n
}, function (error, response, body) {<\/p>\n
if (!error && response.statusCode == 200) {<\/p>\n
var recipientId = body.recipient_id;<\/p>\n
var messageId = body.message_id;<\/p>\n
console.log(“Successfully sent generic message with id %s to recipient %s”,<\/p>\n
messageId, recipientId);<\/p>\n
} else {<\/p>\n
console.error(“Unable to send message.”);<\/p>\n
console.error(response);<\/p>\n
console.error(error);<\/p>\n
}<\/p>\n
});<\/p>\n
}<\/p><\/blockquote>\n
5.\u00a0Pushing the Changes to Heroku<\/strong><\/span><\/h4>\n
We\u2019re at the final step towards making our upgraded bot live. We just need to push all the code changes to Heroku. The process is the same as before, and is outlined below:<\/p>\n
- \n
- Launch Terminal.<\/li>\n
- Change directory to the\u00a0testbot\u00a0<\/strong>directory.
\ncd testbot<\/li>\n- Do the following:<\/li>\n<\/ol>\n
- \n
- git add .<\/li>\n
- Note:\u00a0<\/strong>There is a\u00a0\u201c.\u201d\u00a0<\/strong>at the end of that command.<\/li>\n
- git commit -m \u201cimproving condition checks and formatting\u201d<\/li>\n
- git push heroku master<\/li>\n<\/ul>\n
- \n
- Now send a message such as \u201cSuggest an article on Android\u201d, or \u201cBeebom, suggest me any article on the topic Android\u201d; and the bot will send a nicely formatted message with a link that you can tap on to open the articles related to your query.<\/li>\n<\/ol>\n<\/p>\n
<\/p>\n
<\/p>\nDig Deeper<\/strong><\/span><\/h4>\n
Now that you know how to get started with developing Facebook messenger bots, go through the\u00a0Facebook documentation<\/a>\u00a0on how to develop Facebook messenger bots. While the documentation is not good for beginners, you\u2019re not a beginner anymore. You should check out the official documentation and try to figure out how to make your bot even smarter. Teaser: You can send\u00a0messages with images and buttons as well! It\u2019s also possible to use services such as\u00a0Wit.ai<\/a>\u00a0and\u00a0Api.ai<\/a>\u00a0to code your bot and then integrate it with Facebook, but in my feeble attempts to use those services, Wit.ai doesn\u2019t work too well, and Api.ai has\u00a0a sharp learning curve for\u00a0beginners.<\/p>\n","protected":false},"excerpt":{"rendered":"
How to Create a Facebook Messenger Bot (Guide) – Internet – Messenger bots now also require you to use a SSL secured webhook callback URL, and setting up <\/p>\n","protected":false},"author":2,"featured_media":10353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18379],"tags":[23463,23462,23461,23459,23456,23458,23457,23452,23446,23447,23455,23442,23448,23466,23453,23438,23451,23454,23465,23450,23436,23441,23437,23435,23440,23439,23443,23445,23449,23464,23460,23444],"class_list":["post-7953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","tag-bot-facebook","tag-bot-for-facebook","tag-create-a-facebook-app-tutorial","tag-create-facebook-app-tutorial","tag-develop-facebook","tag-develop-facebook-app-tutorial","tag-facebook-app-creation-tutorial","tag-facebook-app-developer-tutorial","tag-facebook-app-development-tutorial","tag-facebook-app-tutorial","tag-facebook-bot","tag-facebook-bot-example","tag-facebook-bot-tutorial","tag-facebook-chat-bots","tag-facebook-chatbot","tag-facebook-chatbot-tutorial","tag-facebook-com-messenger","tag-facebook-developer-tutorial","tag-facebook-development-tutorial","tag-facebook-messenger-bot","tag-facebook-messenger-bot-example","tag-facebook-messenger-bot-github","tag-facebook-messenger-bot-python","tag-facebook-messenger-bot-tutorial","tag-facebook-messenger-templates","tag-facebook-messenger-webhook","tag-facebook-tutorial","tag-facebook-tutorial-2016","tag-facebook-tutorial-for-dummies","tag-m-basic-facebook","tag-simple-facebook","tag-tutorial-facebook"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/7953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=7953"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/7953\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media\/10353"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=7953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=7953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=7953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Do the following:<\/li>\n<\/ol>\n
- Click on \u201cCreate App ID<\/strong>\u201c.<\/li>\n<\/ul>\n
- Select \u201cApps for Pages<\/strong>\u201d in the Category.<\/li>\n
- Click on \u201cbasic setup<\/strong>\u201d when Facebook prompts you to choose a platform.<\/li>\n<\/ul>\n
- On the top-right,\u00a0hover your mouse on \u201cMy Apps<\/strong>\u201d and then click on \u201cAdd a New App<\/strong>\u201d from the drop-down menu.<\/li>\n<\/ul>\n
- You can create a page in whichever category you want. I\u2019m opting for Company\/Organisation, for no particular reason.<\/li>\n<\/ul>\n
- Now you can push your app code to Heroku
- This will create an app on Heroku and provide you with a hyperlink. Note that the link is using the https protocol. Easy, right?<\/li>\n<\/ul>\n
- Typeheroku create<\/li>\n<\/ol>\n
- Next, create a new file in Sublime Text, and put in the following code inside it:<\/li>\n<\/ol>\n
- In this file, we need to add a line
- In Finder, open the directory \u201ctestbot<\/strong>\u201d that you created, and find the file named \u201cpackage.json<\/strong>\u201c; open this in an editor like Sublime Text.<\/li>\n
- The command will run, and give some warnings; ignore them.<\/li>\n<\/ul>\n
- Install\u00a0packages
- You will be asked to enter information about your application, just use the defaults by pressing Enter for everything.<\/li>\n<\/ul>\n
- Next, initialise the Node application.
- Make a new directory