Skip to content

Instantly share code, notes, and snippets.

@profnandaa
Last active April 19, 2018 20:51
Show Gist options
  • Save profnandaa/05ae6a9e0ca6b422b34a3ccfcd3e250f to your computer and use it in GitHub Desktop.
Save profnandaa/05ae6a9e0ca6b422b34a3ccfcd3e250f to your computer and use it in GitHub Desktop.
Introduction to Facebook Messenger Bots - @DevC-Nairobi

Building a Basic Messenger Bot with Node.js

For this tutorial, you need just basic understanding of JavaScript. The aim of this tutorial is to show you how easy it is to build messenger bots. When you scroll down this page, you will find out the actual lines of code that we will write are just about 19 LOC.

Prerequisites

Rationale for Hosting on Heroku

Heroku makes it easy for you to deploy and test your bot, especially if you've connected your Heroku app with your Github repo. Read on how to do that here

The other option is using ngrok

Step by Step Setup Instructions

1. Set up your Facebook Developer Account

2. Create your Bot as an app (on Developers page)

screen shot 2017-03-24 at 1 48 02 pm

3. Create a page for your Bot

screen shot 2017-03-24 at 1 47 31 pm

4. Generate the page token for your page.

screen shot 2017-03-24 at 1 52 39 pm

This will be stored in the environment variable PAGE_TOKEN

5. Create your Github repo, choose the option for README so that your repo will be initialized with a master branch. This will come in handy in steps 7 and 8.

6. On Heroku, Create your app

screen shot 2017-03-24 at 2 01 49 pm

7. Link your Heroku app with your Github repo.

  • On your app's menu, go to Deploy

  • On Deploy Method, click on Github. You will be asked to authorized, do that.

  • If all is okay, you should see something similar to this:

    screen shot 2017-03-24 at 2 04 46 pm

8. Enable automatic deployment on Heroku

screen shot 2017-03-24 at 2 05 55 pm

Click on the button and you should have something like this: screen shot 2017-03-24 at 2 06 54 pm

9. Set your environment variables on Heroku.

They are referred to as Config Vars on Heroku. Click on Reveal Config Vars under Settings, and set them as follows:

  • Go back to your app's dashboard on Facebook Developers page. Under the Generate Token section, choose your Bot's page and a token should be generated.

screen shot 2017-03-24 at 2 10 10 pm

  • Add PAGE_TOKEN (as generated from Facebook) and VERIFY_TOKEN (anything of your choice. Prefererrably a hashed string. For the purposes of demostration, I used a simple word "verified". But this should not be used in production for security purposes.)

screen shot 2017-03-24 at 2 14 38 pm

10. git clone your repo and update it

  • Clone your repo
    git clone <repo-url>
    
  • Run npm init to generate the package.json file
  • Update your package.json file to include the start script, see in 2-package.json.md file below
  • Add app.js file as is below
  • Stage and commit your changes, then push:
    git add --all
    git commit -m "initial setup"
    git push origin master
    
    If all is well, you should be able to see under the Activity tab on Heroku that your changes have been deployed.

11. Test that you app is running correctly When you go to <app-id>.heroku.com, you should see a message similar to the following. Don't panic, everything is okay :)

Error, wrong validation token

12. On Facebook Developer app's dashboard, setup your webhooks

  • Set-up the webhook. For the callback, put your Heroku app URL, i.e. https://<app-name>.heroku.com
  • For the verification token, use the VERIFY_TOKEN you set up earlier on Heroku
  • The last bit that is easy to forget is subscribing your bot to your page

screen shot 2017-03-24 at 11 28 06 pm

You can now go to your Messenger app on your phone or https://messenger.com, search for your page by name and start chatting to your bot. The bot should be able to reply back "This is me :)"

package.json will be autogenerated when you run:

npm init

However, make sure to add the start script instructions on the package.json

 "scripts": {
        "start": "node app.js",
    },

See sample file here

const http = require('http');
const Bot = require('messenger-bot');
let bot = new Bot({
token: process.env.PAGE_TOKEN || '',
verify: process.env.VERIFY_TOKEN || '',
});
bot.on('error', (err) => {
console.log(err.message)
});
bot.on('message', (payload, reply) => {
let text = payload.message.text;
reply({ text: 'This is me :)' }, function(err) {
if (err) console.log(err);
});
});
let port = process.env.PORT || 3000;
http.createServer(bot.middleware()).listen(port);
@profnandaa
Copy link
Author

More info on the bot-messenger package - https://www.npmjs.com/package/messenger-bot

@kenju254
Copy link

kenju254 commented Apr 5, 2017

@profnandaa running into an exception with the app .. wanted to know if the messenger-bot package is actually a dependency in the package.json file

@kenju254
Copy link

kenju254 commented Apr 5, 2017

@profnandaa there might be a missed dependency that is not talked about in the when initializing the package.json and another bug is the when generetaing the package.json the rather than starting the base from index.js it should be app.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment