The new Facebook Messenger platform, announced back in April, lets developers write bots, or automated chat programs, that drive user engagement and provide value in an intelligent and interactive way.

In this series of articles, we’re going to take a look at what it takes to build out a Facebook Messenger chat bot, with Backand serving as the back-end. This article will cover creating the Facebook app, tying it to a Backand, then testing the pairing. Future articles will cover what is happening on the back-end in greater depth, as well as integrating with third-party providers to create even more interesting content for your users.

Tools for Building the Chatbot

One of the great things about choosing a Backend-as-a-Service provider like Backand is that the tool chain necessary to create interactive and exciting programs is very short. Between Facebook’s informative app interface, and Backand’s in-browser JavaScript editor, most of your tools are already provided. In, fact, the entire exercise will be conducted in a web browser! While you can always use text editors or IDEs for formatting and organizing the JavaScript portions of this effort, these tools are more of a convenience than a necessity.

This also allows you to iterate more quickly once the app has been wired up. As your server-side action code changes, those changes will be immediately reflected in your Messenger chat bot. With Backand, you don’t have any need to deploy changes to your code – simply make the appropriate changes, save the action, and you are ready to go.

Configuring the App on Facebook

Every Facebook app begins the same way – at the Facebook Developer Portal. If you haven’t registered with Facebook as a developer, you will first be prompted to do so. Once you’ve registered, you’re brought to the app creation page flow. Start by entering the name of your new Facebook Messenger bot:

You’ll be prompted for more info before the ID is finalized – fill out the specified fields, and click “Create App ID”:

At this point you can go through the provided quick-start wizard if you want, but for our purposes we will skip this to end up at the App Dashboard. From here you can manage all aspects of your app, and see relevant stats such as the number of users, API calls, and other statistics. To create an app that our backend can communicate with, we need to add a product using the provided “Add Product” link in the navigation bar. This takes up to the Product Setup page. Choose the “Get Started” button for a Messenger app:

Now we’re almost ready to create our application’s backend. But first, there is one more step to take on Facebook. Facebook requires that all Messenger applications be associated with a Facebook Page. The page doesn’t need to be complex, it just needs to be associated with your Facebook account – simply create a blank page, and you can flesh it out later if you desire.

Adding Backend Functionality

Facebook messenger bots communicate using Webhooks. Webhooks are a notification of an action taken in your app – in this case, you receive a webhook notification whenever someone sends a message to your bot via Facebook Messenger. The response of your webhook will be converted into a Facebook Messenger message sent back to the user.

To integrate with Facebook’s webhooks, you need to have a backend application that is publicly-accessible. Using a traditional approach (without Backand), this would have required five steps: securing a domain, standing up a web server, standing up a database, writing an application to receive the messages, then writing the code to handle the messages and send a response. But we’re going to leverage Backand as our app’s backend, which eliminates four of the above five steps. So the only thing we need to do is the most important one: write the code to handle the webhooks!

Start by signing up for an account with Backand, or sign into an existing account. Accounts are free to start, and the Prototype tier gives you more than enough data storage and transfer to get your app up and running. Once you register, you are brought to the Backand dashboard. Use the provided box to create a new Backand app:

Once this is done, you’re brought to your app’s dashboard:

By default, you are given a basic set of objects to work with: items and users. All items in a Backand application are RESTful resources, and are publicly accessible for authenticated apps from the moment your Backand application is created. We’re going to use a Custom Action on the “Items” object to control our bot’s integration with Facebook Messenger. To get this set up, first navigate to the Items object by selecting it from the navigation bar:

Once there, select the “Actions” tab:

The Actions tab offers us the capability to create automated actions based on each potential database operation that could be performed on this object, driven by the Amazon RDS instance that was automatically provisioned for you when you created your app. Additionally, you can create Custom Actions on an object. These actions respond to messages sent to a specific URL, and are ideal for driving our Facebook Messenger bot integration.
Custom actions can consist of sending an email, executing a Transactional SQL script, or running custom server-side JavaScript code. We’re going to use the latter, but via a handy template provided in the Backand interface. To get started with our bot’s custom action, select the “Facebook Messenger Bot” template from the provided examples:

This step automatically configures the action to be performed on demand, and provides you with sample JavaScript code to integrate with the Facebook messages you will shortly receive. Save the action for now, without any modifications. At this point the backend is ready – all that is left is to tie the Facebook app we created to the Backand app we will be using to power it!

Tying it Together

Navigate back to the Facebook app page. The first thing we need to do is generate a key that the app can use to authenticate with outside communicators. This is done in the “Token Generation” section – simply select the page you created while configuring the Facebook app, and the token will be automatically generated:

Once you have the token, you need to paste it into your application’s JavaScript code. There is a variable named PAGE_ACCESS_TOKEN defined in the template code – simply change this variable’s value to the key you copied from Facebook:

After this is finished, you need to configure Facebook to send the correct webhooks to your application. This is managed in the “Webhooks” section. Click the button marked “Setup Webhooks” to get started:

This brings up the New Page Subscription dialog. In this dialog, you need to provide the URL for your Backand application’s custom action, a Verify Token, and select the webhooks you wish to receive. First, let’s retrieve the action URL. Navigate back to your app’s Backand dashboard, and pull up the action. To find the URL, we simply need to send a test object to our action. Click the “Test Action” button:

This brings up the testing sidebar. Within this sidebar, select “Test On Demand Action”:

The test results are revealed below, along with the URL used to make the request:

As you can see, this URL is of the form https://api.backand.com/1/objects/action/<OBJECT_NAME>/?name=<ACTION_NAME>. You can use this format as a reference for future Backand actions. To ensure the action is properly authenticated, we also need to configure the URL to use your application’s master token. To find this, navigate to the “Security & Auth” section in the Backand dashboard, and load the “Social & Keys” section:

You will also need a user token – this is generated in the “Team” section of the “Security & Auth” configurations. Simply click the key icon next to any admin user to get a user token dialog:

Copy the key provided – we’ll use it to construct the final action URL. Action URLs are of the following format:

https://api.backand.com/1/objects/action/items?name=&authorization=basic+:

Replace <ACTION_NAME> with the name of your action, <MASTER_TOKEN> with the master token, and <USER_KEY> with the user key. Paste the final URL into the New Page Subscription dialog on the Facebook configuration page, then select “message_deliveries,” “messages,” “messaging_optins,” and “messaging_postbacks” from the Subscription Fields. Next, set the value of field “Verify Token” to “my_test_token”. Finally, click “Verify and Save”. When you are done, the dialog will look as follows (all identification information has been removed from the URL for security reasons):

Once saved, you need to select the page to subscribe to your webhooks – set this to your Facebook page, and your app should be successfully configured! Navigate to the page you created, and start a messenger chat:

And with that, our Facebook chat bot is completed! Facebook took the message “Test” that we sent to the page, and forwarded it to our back-end application. The back-end application parsed the message, appended its own data (“Back& bot says:”), and returned data to the user. With this base, the entire power of a web application is available to you.

Conclusion

The above tutorial walked you through creating a Facebook Messenger bot from the very beginning. We built a simple web application with Backand as the backend, hooked it up to a Facebook page, authorized it, and then tested it – all without having to write or deploy significant code! In our next article, we’ll look at expanding the bot’s functionality, as well as what exactly is going on with our custom action – stay tuned!

Additional resources:

• Backand full documentation for building a Facebook Messenger bot
• Simple chatbot example by Backand