Note: Most of the API-specific code snippets were taken from Facebook's official documentation to make it easy to cross-reference.
Following along with this tutorial will leave you with a live starter-app that implements a Facebook Messenger bot. Deployed to Heroku with a fun little landing page, persisting data, ready to rumble. Along the way, you will also learn how to use Heroku's free tier for hacking on projects like this. It should take between 15 and 30 minutes depending on prior experience.
If you already know your way around Heroku, use the deploy button and skip ahead to setting up your Facebook page and app.
[] (https://heroku.com/deploy)
-
Get a free [Heroku account] (https://signup.heroku.com/) if you haven't already.
-
Install the [Heroku toolbelt] (https://toolbelt.heroku.com) which will let you launch, monitor and generally control your instances (and other services like databases) from the command line.
-
[Install Node] (https://nodejs.org), this will be our server environment. Then open up Terminal (or whatever your CLI might be) and make sure you're running the latest version of npm, installed globally (the
-g
switch):sudo npm install npm -g
-
Clone this project and switch into the project directory.
git clone https://github.com/hellogustav/gustav-fb-bot-boilerplate cd gustav-fb-chatbot-boilerplate
-
Install Node dependencies. We are using [Express] (http://expressjs.com/) for serving stuff, the [Sequelize] (https://github.com/sequelize/sequelize) ORM for database-y stuff, [request] (https://github.com/request/request) and [request-promise] (https://github.com/request/request-promise) for sending and receiving messages, and [body-parser] (https://github.com/expressjs/body-parser) to process responses from Facebook's APIs.
npm install
-
Create a new Heroku instance, deploy a [free database instance] (https://devcenter.heroku.com/articles/heroku-postgresql) for your server, and push the code to the cloud. Database configuration happens automagically via Heroku's DATABASE_URL environment variable. We also set an environment variable called
IS_HEROKU
, to let the app know that it should get its config values from environment variables instead of from a .env file. (See .env.sample in the root directory if you're not using Heroku.)heroku create heroku config:set IS_HEROKU=1 heroku addons:create heroku-postgresql:hobby-dev git push heroku master
-
You should be all set and be able to visit your page at the URL that was output by
$ heroku create
. You can show the database settings your app is using with the command$ heroku config
. You can use the login data to inspect the database with your favourite client to see what's going on.
-
Create or configure a Facebook App here (https://developers.facebook.com/apps/). (You also probably should set up a new Facebook Page while you're at it - don't use a page you are already using in production.)
-
In the app, switch to the Messenger tab and click Setup Webhook. Enter the URL of your Heroku instance and append /webhook/. (For example: https://mighty-island-93912.herokuapp.com/webhook/. It needs to be https://). Make sure you check all the subscription fields. Also create and enter a verify-token. Keep this safe. If you later want to change the webhook URL, you need to do so in the Webhooks tab of your app.
-
Configure to which of your pages' events the app should subscribe to.
-
Create a Page Access Token and keep it safe. Be sure to pick the same page you picked in step three.
-
Switch back to Terminal and use the following command to trigger your Facebbook app to start sending webhooks. Remember to use the Page Access Token you just created instead of the placeholder at the end of the request.
curl -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=<PAGE_ACCESS_TOKEN>"
heroku config:set PAGE_ACCESS_TOKEN=your-page-access-token-here
heroku config:set VERIFY_TOKEN=your-verify-token-here
heroku config:set FB_APP_ID=your-app-id-here
heroku config:set FB_PAGE_ID=your-page-id-here
FB_APP_ID
is the app ID of the Facebook App you just created. You can find it directly on the app dashboard. FB_PAGE_ID
is the page ID of the Facebook Page you subscribed to in the app settings. ([Click here] (http://hellboundbloggers.com/2010/07/find-facebook-profile-and-page-id-8516/) in case you don't know how to find it.)
-
Read the official documentation for Messenger Platform. The docs are concise, but not exactly easy follow if you haven't built a bot and hooked it up to your app or page before. Your best bet in general might be the [Complete Guide] (https://developers.facebook.com/docs/messenger-platform/implementation).
-
If you want to make your bot available publicly, you will have to go through Facebook's [app review process] (https://developers.facebook.com/docs/messenger-platform/app-review) for Messenger bots.
-
Once you've wrapped your head around how this stuff works in general, it might be a good idea to switch to one of the emerging libraries for talking to the Messenger API, such as [messenger-bot] (https://github.com/namuol/messenger-bot).
-
Wit.ai is a service that lets you easily create text or voice based bots that humans can chat with on their preferred messaging platform. Basic wit.ai functionality will be baked into this starter app at some point in the future.