Chapter 1 - Create a basic Bot with Google Dialogflow and Facebook Messenger
Welcome to the first chapter of boyfriend Bot series. In the recent day, Bot and AI becoming a buzzword to any solution that displaying automatically answer and reply to the human query. Technically, they are not the same category, a Bot system merely interpret human intent from the query and convert into system command to execute the tasks, some powerful Bots might able to proactively asking the question to human to get more intents. In the other way, AI not limited to interpret human language but will able to learn and improve themselves automatically with the neural network. In this story, I will share about the capabilities of Bot by building them step by step in an interesting use case, a Boyfriend Bot. It is a virtual user that will wish your girlfriend Happy Birthday and wish Good Morning like you. I do not know how much we can go with Bot without AI, but I definitely will cover the basic fundamental to set up a basic Bot. If you would like to see more capabilities to this boyfriend Bot, do share with me your request :). From a technical perspective, we can achieve this using any kind of cloud provider, to keep the tech stack align and simplify, we will stick to Google and Facebook
Use story
As there was too much thing from what a normal girlfriend would expect from a boyfriend, which mean they as a girlfriend would expect the same from boyfriend bot but to not make thing complicated, in this chapter, we will have one simple user story which is:-
As a boyfriend, he should reachable from Facebook Messaging, so that we can communicate to each other as couple
High-level diagram
For this chapter, we will only focus on setup the basic integration between Facebook Messenger and Dialogflow, in order to integration, Facebook Messenger will post messenger message to Dialogflow Webhook, so that Dialogflow will reply accordingly, hence this diagram will relatively simple.
What is Dialogflow
If you are new to Bot development, or you never try before any Bot framework or Bot builder, you will need to understand what is Bot framework. There are 4 key players in the market, there are Google Dialogflow (used to name API.AI), Facebook Wit.AI, Microsoft Luis, IBM Watson, and Amazon Lex. I will not discuss what the differences between them, you can find lots of articles out there like this. The reason we select Dialogflow mainly because of the educational purpose of this article to explore GCP products and another reason is Dialogflow has a very comprehensive small talk feature that you can simply turn on to enable your Bot to handle many conversations out of the box without futher setup.
Sign up Dialogflow
To get the thing started, you will need a Dialogflow account, if you do not have one, you can register here with your Google Account. After you login Dialogflow dashboard, you will see the following console.
Click on the CREATE AGENT to create your first agent. Define your agent name, “BoyfriendBot”
Agents are best described as Natural Language Understanding (NLU) modules. These modules can be included in your app, website, product, or service and translate text or spoken user requests into actionable data. This translation occurs when a user’s utterance matches an intent within your agent
— dialogflow.com
You will redirect to agent console page when your agent creates successfully.
From left to right, we have the menu panel, configuration panel and testing panel on the most right. You can try to test your agent by type in anything, by default Dialogflow agent will handle 2 intent, which you can see on the configuration panel intents list, one is Default Fallback Intent, which handles the message to reply when agent does not know how to handle and Default Welcome Intent which handle the welcome command, you can test it out to see the reply.
Enable Small Talk in Dialogflow
Next, we will go to the Small Talk menu on the menu panel, click Enable and save the setting.
From the Small Talk Customization Progress, you can configure to customize some default message to make it more personalized, but we will leave it for now. After you enable the Small Talk, you type “How are you” in the testing panel to check what the response now.
In the response section, you notice that its displayed DEFAULT RESPONSE, which is mean it is default configured response. In this step, we already have a boyfriend Bot that can answer your simple query.
Create Facebook Page for Messenger
Next, we will require to create one Facebook Page in order to attach to your Bot.
To create a Facebook Page, go to this link and select Community or Public Figure
In the creation page, fill in your Page Name and Category
Now you have your page ready. Next, we will need to create Facebook App to attach to the page messenger.
Create Facebook App
Facebook App is a small application that lives within Facebook platform to perform some task, for our case we want a Facebook App to handle our page messenger response.
Go to this page to create a new app
Fill in your app detail and proceed
After your app created, go to the PRODUCTS menu to enable messenger
In the Product selection page, click on the Set Up on Messenger
You will see the Messenger setting page, and look for Token Generation section, click on the Page you just created, and copy the Page Access Token to be use in ours Dialogflow integration later.
Integrate Dialogflow with Facebook App
In this section, we will log in into our Dialogflow console and go to the Integrations section.
Click on the Facebook Messenger and fill in the Page Access Token you copy from Facebook app page, and you require to fill in verify token to further restrict the webhook URL, so only Facebook app you set up can post to your Dialogflow webhook, record your Webhook URL to be used in Facebook app later, remember to click START to integrate
Now, we need to go back ours Facebook app messenger setting page, and look for Webhooks section to setup ours call back to Dialogflow, click Setup Webhooks to continue
Fill in the Callback URL and Verify Token from Dialogflow, tick messages and messaging_postbacks checkbox to subscript the fields, click Verify and Save
Now you have the Webhooks setup, but we still need to configure which page we subscribe to, select the page you create previously and click Subscribe
Enable Live mode for your Facebook App
Until now, your boyfriend Bot still cannot integrate yet to Dialogflow due to it still under development mode
When you toggle the OFF to ON for live mode, you will be getting the following error, it is because Facebook requires the developer to provide a valid Privacy Policy URL to test the app, click on the Basic Settings link in the message
As you can see that the Privacy Policy URL is currently empty, you can send your, as we currently still in the testing phase, you can simply put any URL to let it pass the verification.
After you click save, you will get one more confirmation, select the Messaging Category and click Confirm
After your turn on the Live mode, your Facebook Messenger Bot will able to respond to people, but at this moment only your own account can find your page and response to, in order for your girlfriend to talk to this Bot, you will follow the last section to add them into your tester list. You can search your Facebook Page, remember from the messenger, you are actually talking to your page messenger, but under the hook it is replying from Dialogflow.
The messenger reply itself from Dialogflow Small Talk agent
(Optional) Add your girlfriend as the tester
For a Facebook Messenger bot to talk to public, you will need to prepare a lot of things and submit to Facebook to review, since ours use case only focus to one people, it is not required for us to submit for Facebook review, we can simply add our target audience to our tester list for the Facebook app.
But before that, we will need to know what is our girlfriend Facebook Id, to find your girlfriend Facebook Id, log in your Facebook and open your girlfriend profile, the example below use Angelina Jolie Facebook profile, in the Facebook link, the id after facebook.com will be the Facebook Id
Here, we need to go back ours Facebook app role page to add a new tester
After Submit, your girlfriend will receive notification to add as a tester, and they need to accept the request to allow access to this messenger bot
If your girlfriend never active before, she will need to enable developer account here
Your girlfriend will need to click confirm in the developer page, and after that, your girlfriend will able to communicate with your messenger
Conclusion
In this chapter, we create a new Facebook Messenger Bot with capable to reply to people from Dialogflow, in the next chapter we will look into how to make your Bot recognize your girlfriend Facebook id, and greet morning to her.
