Building a Facebook Chat Bot with Node and Heroku

Build a Facebook chatbot using Node.js and Heroku, peer-reviewed by Joan Yin and Camilo Reyes. Thanks to all SitePoint peer reviewers for getting SitePoint content to its best!

At last year’s f8 conference, Facebook launched the Messenger platform, enabling developers to create bots that can talk to people on Messenger or Facebook pages. With robots, application owners can better interact with users by providing personalized and interactive communications that can be extended to the masses. Since its launch, enterprise and application owners have shown great interest in chatbots. Three months after the announcement, it is estimated that 11,000 robots have been built on the platform.

Chatbots benefit not only enterprises and application owners. Users of these robots can enjoy numerous services, such as:

• Get instant customer support
• Reserve flights
• Purchase movie tickets
• Get Netflix movie recommendations
• Get weather forecast
• Follow the news
• Get dressing advice
• Get dinner ideas based on the ingredients at hand
• Entertainment

The current interest and attractiveness of chatbots is obvious. With the improvement of artificial intelligence technology, robots will become more and more good at interacting with users.

In this article, we will explore how to create a Facebook chatbot that can interact with users through Messenger on behalf of Facebook pages. We will build a robot that can provide users with different details about the movies they specify.

Key Points

• Deploying a Facebook chatbot using Node.js and Heroku involves setting up a server to interact with the Facebook Graph API and configuring a webhook endpoint to process messages.
• Building simple rules-based chatbots does not require basic AI or machine learning knowledge, although integrating NLP can enhance the robot's ability to interact naturally with users.
• Heroku platform is for deployment because it supports HTTPS out of the box, which is required for Facebook webhook verification.
• Environment variables in Heroku are essential for protecting API tokens and sensitive data, ensuring that these details are not hardcoded into the application's source code.
• The Facebook Messenger platform allows the creation of a rich user experience, with features including a welcome screen and a Start button that can be configured to initiate interactions.
• MongoDB hosted on mLab is used to manage user data and session status, ensuring that chatbots can effectively track and respond to ongoing user interactions.
• In order for the chatbot to go live and interact with the public, it must go through and pass Facebook’s review process to ensure compliance with platform policies and security standards.

Do I need to understand AI to build robots?

Proficiency in AI can certainly help, especially when it comes to building complex robots, but it is not necessary. You can certainly build a robot without understanding machine learning.

You can build two types of robots. One is based on a set of rules, and the other is using machine learning. The former is limited in terms of the interactions it can provide. It can only respond to specific commands. This is the type of robot we are going to build.

With machine learning robots, you can get better user interaction. Users can interact with the robot more naturally as they do in human interaction, rather than just using commands. Robots will also become smarter as it learns from conversations with people. We will save the construction of this type of robot in future articles. However, no machine learning knowledge is required. Fortunately, there are services like wit.ai and Api.ai that enable developers to integrate machine learning (especially natural language processing - NLP) into their applications.

Start

You can download the code for the completed demo application from here.

In order for your chatbot to communicate with Facebook users, we need to set up a server to receive, process and send messages back. The server will use the Facebook Graph API for this. The Graph API is the primary way to get in and out of Facebook platform data. The server must have an endpoint URL that the Facebook server can access, so deploying a web application on the local machine does not work, you must bring it online. Additionally, starting with version 2.5 of the Graph API, new subscriptions to the service must use a secure HTTPS callback URL. In this tutorial, we deploy the application to Heroku because all the default appname.herokuapp.com domains have SSL enabled. We will use Node.js to build web applications.

First, make sure Node is installed on your computer. You can check this by typing node -v in the terminal. If installed, it will output the version number. Then install the Heroku command line interface (CLI). We will use it later to push the app to Heroku. Use heroku --version to verify that the CLI is installed.

Create the project directory and initialize the package.json file using the following command.

<code>$ mkdir spbot
$ cd spbot
$ npm init</code>

Follow the prompts to set your project preferences.

After generating the package.json file, open it and add the start property to the scripts object. This allows Heroku to know which command to execute to start the application. During project setup, I define app.js as the entry point of the application, so I use node app.js as the value of start . Change this setting according to your project settings.

<code>{
  "name": "spbot",
  "version": "1.0.0",
  "description": "SPBot Server",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "author": "Joyce Echessa",
  "license": "ISC"
}</code>

Install the following Node packages.

<code>$ npm install express request body-parser mongoose --save</code>

Create a .gitignore file in the root directory of the project and include the node_modules folder to prevent it from being submitted.

<code>node_modules</code>

In the root directory of the project, create a file named app.js (index.js if the default name is used). Modify it as follows:

var express = require("express");
var request = require("request");
var bodyParser = require("body-parser");

var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.listen((process.env.PORT || 5000));

// 服务器索引页面
app.get("/", function (req, res) {
  res.send("已部署！");
});

// Facebook Webhook
// 用于验证
app.get("/webhook", function (req, res) {
  if (req.query["hub.verify_token"] === "this_is_my_token") {
    console.log("已验证 webhook");
    res.status(200).send(req.query["hub.challenge"]);
  } else {
    console.error("验证失败。令牌不匹配。");
    res.sendStatus(403);
  }
});

The first GET handler will be used for our own testing – to see if the application has been successfully deployed. The second GET handler is the endpoint Facebook will use to validate the application. The code should look for verification_token and respond with the challenge sent in the verification request.

You can paste your own token into the code. This type of data is best saved in environment variables, which we will do immediately after creating the project on Heroku.

Deploy to Heroku

In order for the Facebook platform to connect to our backend application, we first need to bring it online.

Create a Git repository and submit the project using the following command:

<code>$ git init
$ git add .
$ git commit -m "Initial commit"</code>

If you haven't already, please sign up for a free Heroku account.

Login to Heroku from your terminal and create an application.

<code>$ heroku login
$ heroku create
$ git push heroku master
$ heroku open</code>

After running the heroku open command, the link to run the application will open in your default browser. If all goes well, you will see a page with the text "Deployed!".

Create environment variables

Before proceeding, let's create an environment variable on Heroku to save the application's verification token.

Open your Heroku dashboard and select the application you just deployed. Go to the Settings of the application and click the Show configuration variables button. Enter VERIFICATION_TOKEN as the key, enter your token as the value, and then click to add .

In your code, modify your token string ("this_is_my_token") to process.env.VERIFICATION_TOKEN. Submit your changes and push them to Heroku.

Create Facebook pages and applications

When the server is up and running, we will now create a Facebook application and its associated page. You can create a new page or use an existing page.

To create a Facebook page, log in to Facebook and go to the Create Page. Select the page type from the given options. I chose Entertainment.

Then select the category and name of the page.

After clicking Start , a page will be created and you will be asked to provide more detailed information about your application (description, website, profile picture, target audience, etc.). You can now skip these setup steps.

To create a Facebook application, go to the Add New Application page and click the Basic Settings link below to select the

below.

Fill in the necessary detailed information. Select Page-oriented Application

as the category.

After clicking Create App ID

, the dashboard of the application will be opened.

In the Product Settings on the right, click in the Messenger section to start

. You will then be taken to the Messenger settings page as shown below.

To receive messages and other events sent by Messenger users, the application should enable webhook integration. We will do this next. Webhook (formerly known as Live Update

) allows you to subscribe to changes you want to track and receive updates in real time without calling the API.

In the Webhook section, click Set Webhook

Enter the updated callback URL (the endpoint URL defined in the backend application, i.e. /webhook), and enter the verification token (the token used in the backend application, i.e. stored in the process. value in env.VERIFICATION_TOKEN) and select all check boxes. These specify which events the application will subscribe to. We will learn about the role of these events later.

After successfully enabling webhook, you should see Completed in the Webhook section, as well as a list of subscribed events. If you receive an error, make sure you have entered the correct URL for the webhook endpoint (end with /webhook) and make sure the token used here is the same as the one you use in your Node application.

In the Token Generation section, select your page from the drop-down menu. After authentication, a page access token will be generated for you.

Create another environment variable on Heroku and set its key to PAGE_ACCESS_TOKEN and take the generated token as the value. Note that the generated token is not saved in the current page where it is displayed on Facebook. Each time you access the page, the page access token field will be blank, and a new token will be generated when you select your Facebook page from the page drop-down menu. However, any previously created token will continue to work. So make sure to copy the token before closing the page.

In order for your webhook to receive events on a specific page, you must subscribe your application to that page. In the Webhook section, select the page you want to subscribe to.

Welcome screen

The first thing users see when they start a new conversation with your bot is the welcome screen. This screen will display the name, description, profile picture, and cover photo of your page. You can customize the screen by setting the greeting text, which will be used instead of the page description. You can use it to set up introductory messages to let users know what they can get from your bot.

By default, to start a conversation, the user will send the first message to your bot. However, you can enable the Start button to enable your bot to send initial messages. The button will send an event to your server, which you can then respond to.

To set greeting text, open your page and go to its Set .

Select Message from the left panel, and open on the right panel to display Messenger greetings. Set messages to your preferences.

To enable the Start button, replace the PAGE_ACCESS_TOKEN string in the following statement with your token and paste the command into the terminal.

<code>$ mkdir spbot
$ cd spbot
$ npm init</code>

The above operation sends a request to the Facebook Graph API. If the request is successful, the Start button will appear on the welcome screen of the new conversation. The user clicks this button and triggers the postback received callback. Your bot can then respond to this postback.

Postback can be triggered by different types of components—Postback button, Start button, persistent menu, or structured messages. You can set any string as a payload. In the backend, we will use this string to identify postbacks sent due to clicking the Start button. To receive postback messages, your application must subscribe to postback on your webhook. We did this before when setting up the webhook by selecting the messaging_postbacks check box.

If the Start button is successfully set, you will see the following response.

<code>{
  "name": "spbot",
  "version": "1.0.0",
  "description": "SPBot Server",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "author": "Joyce Echessa",
  "license": "ISC"
}</code>

Remember that the Welcome Screen and Start buttons are only displayed in new conversations. When encoding and testing the bot, you can start a new conversation by deleting the current conversation.

To process postback messages, paste the following into your Node application.

<code>$ npm install express request body-parser mongoose --save</code>

Whenever someone interacts with your bot or sends a message to your page, updates are sent through your webhook integration. To get the message, you must listen for a POST call on the webhook. All callbacks will be sent to this webhook.

In the POST handler above, we iterate over the message entries sent to the application. Sometimes messages are sent together in batches, so an entry may contain multiple objects. We then iterate through the message event for each entry and check its type. The following are different callback messages that can be sent to the application.

• Received Message Callback – When a person sends a message to your bot, a received message callback will be sent. When setting up a webhook, you must have subscribed to the message event.
• Received Postback callback – When a person clicks a button configured to send you a postback, a received Postback callback is sent. In order to get the callback from postback, you must have subscribed to the messaging_postbacks event when setting the webhook.
• Delivered Message Callback – This callback occurs when the message sent by the page has been delivered. When setting up a webhook, you must have subscribed to the message_deliveries event.
• Authentication Callback – This callback occurs when the Send-to-Messenger plugin is clicked. When setting up a webhook, you must have subscribed to the messaging_optins event.
• Readed Message Callback – This callback occurs when the message sent by the page has been read by the user. When setting up a webhook, you must have subscribed to the message_reads event.
• Message Echo Callback – This callback occurs when your page sends a message. You may receive text messages or messages with attachments (images, videos, audios, templates, or alternates). When setting up a webhook, you must have subscribed to the message_echoes event.
• Checkout Update Callback (BETA) – This callback occurs when using a Buy button with a flexible amount transaction. This allows you to update prices based on one's delivery address. When setting up a webhook, you must have subscribed to the messaging_checkout_updates event. Currently, this feature is not available outside the United States.
• Payment Callback (BETA) – This callback occurs when a person clicks the Payment button in the checkout dialog box presented by the Buy button. When setting up a webhook, you must have subscribed to the messaging_payments event. Currently, this feature is not available outside the United States.

If the event is Postback, we will call the processPostback() function, in which we will check the payload value. Remember that we set Greeting to the payload of the Start button, so here we first check if the message event was sent due to clicking the button. If so, we will use the User Profile API to get the user's name and use it to personalize the message that will be sent back to them. From the API, you can get their name, last name, profile picture, locale, time zone, and gender.

Then send the message to the sendMessage() function, which publishes it to the Messenger platform. In the Webhook POST handler, we return 200 OK HTTP response.

Returning 200 as soon as possible is very important. Facebook will wait 200 before sending the next message. In a large-capacity bot, a delay of 200 returns can cause a significant delay for Facebook to deliver messages to your webhook.

If your webhook returns an error (i.e. not a 2XX state) or timeout (i.e., response time exceeds 20 seconds) and continues to do so for more than 15 minutes, you will receive a warning alert.

If the webhook continues to fail for 8 hours, Facebook will send you an alert informing you that the webhook is being disabled and your app will unsubscribe. After fixing the issue, you must re-add the webhook and re-subscribe the application to the page.

Submit changes and push them to Heroku.

To test the bot, you can use your Messenger short link from facebook.com, Facebook mobile app or use your Messenger short link https://www.php.cn/link/1fd37ce80d495bebcb35e0054d7384fe.

On Facebook and Messenger, you can find the page by searching for the page name.

As you can see above, you cannot always guarantee that the name of the page is unique. Your users may select the wrong page. To avoid this, you can set a unique username for the page. To do this, go to your page's home page and select More from the drop-down menu to edit page information .

Then set the username.

Now, if you search for @page_username, you will get the correct page. You can also visit

https://www.php.cn/link/13f3d8f0b1d534d2ce312263653c5594 to start the interaction.

As shown below, you can see the greeting text we set for the welcome screen and the

Start button.

After clicking this button, you should see a message sent from the server.

If you enter any text, you will not receive any reply. We will solve this problem next.

Set up the database

When the user enters the movie name, the robot uses the Open Movie Database API to get the details of the movie. The API request we will use will only get the first match result, so the returned movie may not always be what the user wants. Therefore, the robot will first confirm with the user whether it has obtained the correct movie, and after that, the user can obtain detailed information such as the plot, cast, IMDB ratings, etc. of the movie. They can also enter another movie name and get their details.

Due to this back and forth interaction, the robot needs to remember the user's current movie entry. Facebook does not keep the session open with your webhook, so any data you store in the session object will be lost in the next request. We will save this data in the database instead—MonoDB specifically. We will use the mLab add-on on Heroku.

mLab is a database-as-a-service for MongoDB. On Heroku, while you can use the free sandbox mlab plan, you need to save your credit card on Heroku for verification. If you don't want to provide your card details, you can register an account on the mLab website, where you create a free layer of sandbox database and link to that database from your code (more on that later).

To use add-ons on Heroku, go to the application's dashboard and select the Resources tab. Search for mlab and select the result. In the dialog window that pops up, select Sandbox - Free Plan from the drop-down menu and click Provisioning . You should see confirmation for the selected add-on.

If you check the environment variables on Heroku, you will see a variable with the MongoDB URI set.

Set up the database through mLab website

If you prefer to set up a MongoDB database on your mLab website, register an account there and go to the Create a new deployment page. Change the Plan setting to Single node and select Sandbox from the Standard Line section.

Set a name for your database and click the Create a new MongoDB deployment button to complete the process.

On the following page, select the database you just created from the table displayed. A page opens with instructions on how to access the database.

Select the User tab and click the button Add database user. Fill in your username and password and click Create . This will create a new credential set that you can use to allow your application to access the database.

In the top half of the page, find and copy the database URI - it looks like mongodb://:@dsxxxxxx.mlab.com:55087/spbot. Insert the dbuser name and password you just created. On Heroku, create an environment variable named MONGODB_URI and paste the URI of the database as its value.

Define the model class

Back to the Node application, create a file named movie.js and save it in a folder named models. Paste the following into the file:

<code>$ mkdir spbot
$ cd spbot
$ npm init</code>

The movie database model is created above. user_id will be the user ID obtained from the Messenger platform, while other fields will be obtained from the Movie API. We will only store the last movies searched by the user, so the database has only one record per user.

We can omit the user_id field and use only the user's ID as the _id for each created record. This will work because the user ID is unique to the Facebook page. If you are going to do this, you should know that the user ID is page-wide. This means that the user's ID is unique to the given page, but the user may have different IDs for different pages.

You only need to know this when your bot serves different pages (yes, one bot can serve multiple pages). So if your bot serves multiple pages, it is possible to fail to identify the user by its user ID only, and the _id field using the user ID as the record will also fail because this must be unique, and You will not be able to guarantee uniqueness across pages.

Integrate everything together

After the database and model are set up, we can now complete the chatbot. The code will be rendered in sections, but if you want to paste the entire code into your project, here is a link to the app.js file.

First set up the database connection. Mongoose should have been installed with other modules before.

<code>{
  "name": "spbot",
  "version": "1.0.0",
  "description": "SPBot Server",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "author": "Joyce Echessa",
  "license": "ISC"
}</code>

Modify the POST handler of the webhook as shown below.

<code>$ npm install express request body-parser mongoose --save</code>

We added checks for events of type message and passed them to the processMessage() function.

<code>node_modules</code>

Here, we first check whether the message is sent through the message echo callback. This callback occurs when your page sends a message. For example, the first message (greeting) we send to the user will be sent back to our webhook. We don't want to process any of our own messages, so we checked it out.

Then we check if the message is text or attachment (image, video, audio). For the latter, we send an error message to the user. For text messages, we check if the input matches certain keywords that will indicate which detail the user wants to have of the movie. At this point, the user has queryed a movie and the movie will be saved in the database. The getMovieDetail() function querys the database and returns a specific record.

var express = require("express");
var request = require("request");
var bodyParser = require("body-parser");

var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.listen((process.env.PORT || 5000));

// 服务器索引页面
app.get("/", function (req, res) {
  res.send("已部署！");
});

// Facebook Webhook
// 用于验证
app.get("/webhook", function (req, res) {
  if (req.query["hub.verify_token"] === "this_is_my_token") {
    console.log("已验证 webhook");
    res.status(200).send(req.query["hub.challenge"]);
  } else {
    console.error("验证失败。令牌不匹配。");
    res.sendStatus(403);
  }
});

If the user's query does not match any set keywords, the robot assumes the input is used for the movie query, so it is passed to the findMovie() function, which calls the Open Movie Database API using the input.

<code>$ git init
$ git add .
$ git commit -m "Initial commit"</code>

If a movie is found, save its details with the user's ID. If a record with that user ID has been created before, it will be updated. We then create a structured message and send it to the user.

In addition to text, the Messenger platform allows you to send back images, videos, audio, files, and structured messages. Structured messages are templates that support different use cases. Button templates allow you to send text and buttons. Universal templates allow you to define images, titles, subtitles, and buttons. In our application we use universal templates.

Modify the processPostback() function as shown below.

<code>$ mkdir spbot
$ cd spbot
$ npm init</code>

The above is the detailed content of Building a Facebook Chat Bot with Node and Heroku. For more information, please follow other related articles on the PHP Chinese website!