In this chatbot tutorial, you will learn the basic concepts behind building a Chatbot. By the end of this tutorial, you will be able to create a simple Facebook chatbot bot.
Why Chatbots?
ChatBots have been a popular technology for many years, but with the recent advances in the fields of Natural Language Processing (NLP), Machine Learning (ML), and Artificial Intelligence (AI), many new and interesting uses for Chatbots have arisen. ChatBots have usually been deployed for automatically answering questions of users, but nowadays they can be programmed for more engaging behaviors, such as suggesting topics based on users profiles and interests. Nowadays, many APIs can be used by the Chatbots for answering users’ questions. For example, if someone asks the Chatbot “what is the expected weather for today?” the Chatbot can refer to an API such as OpenWeatherMap and answer the question.
Chatbot Necessary Dependencies
We will be using Python for developing the infrastructure and logic of our bot. It is a good choice of language since there are many developing technology such as TensorFlow, SciKit Learn, and NLTK that we can explore later on for more sophisticated behaviors.
The following libraries will be used:
- Flask
- ngrok
The basic workflow for this tutorial is the following: We will configure the Facebook so it is able to support and contact our bot. We can see this part as the client side of the project. For the server side we will use Python to work in the following: to configure the Flask framework and to write the behavior of our bot. Now, we know that the client side (Facebook) needs to contact the server over the Internet, and for that to be possible we make use of ngrok, that allows local app communication over the web. So when in the client side, if we send a message to the Facebook bot, it can contact the server bot that is online via the ngrok and the flask infrastructure will handle the communication tunnels for where our server bot will answer.
Normally in a productive environment , one would host the bot in some Internet server service, such as heroku, aws, etc. But here we will focus on learning the basic aspects on a local machine thanks to ngrok.
Facebook Configuration
For starts, we need to create a Facebook page for our Facebook bot to live on. They are easily created one https://www.facebook.com/pages/creation/ . Just follow the tutorial there.
We then go to the Facebook Developers website https://developers.facebook.com/ and create a new app. Put a display name and a email.
So, after the we got the page and app, we need to link them together. We go to our Facebook page, on Settings -> Messenger Platform, and put the app id in the field ‘Link Your App to Your Page‘. The app id is easily found in the Facebook developers page, as highlighted below
We also need to set up the product ‘Messenger application’ on the Dashboard, as shown below:
this will allow us to subscribe for the messaging configuration of our Chatbot later.
After pressing Setup up, we have a new icon in the Product section int the bottom left side. We click in the Messenger icon, and check the Messenger Platform in the right.
We then go to Token generation, and set our Facebook page, grating the permission that it asks for. We will receive a very large token string as result, called the ‘access token’. It allows our app to access the Facebook API without having to send the user password and id, and it tells Facebook that this app is ours. We will save this token for later use.
Server-side Development
For our simple server we create a folder called Chatbots, from where we will use and write the necessary server applications. Next we focus in those applications.
Ngrok
Ngrok is an application that allows one have a public URL in the Internet for some localhost app. It lets one to use the local machine as a fully working web server. For that, one just has to download the Ngrok zip file in its website https://ngrok.com/
We extract the ngrok binary into our ChatBots folder. From there we start the application by terminal with the following command:
|
1 2 |
./ngrok http 5000 |
What give us the following screen on terminal:
So, we have ngrok running in the port 5000, and our future server with flask must be listening to this port.
Flask
For our Chatbot application server-side, we make use of Flask, a web framework that eases common http connection issues.
To install it just use:
|
1 2 |
pip install Flask |
Once the framework is installed, we configure a simple Rest script. Just for the sake of making it clear, we revise the standard methods:
- Get: requests information/resource from the server
- Post: sends new information/resource to the server
- Put: sends or updates new information/resource to the server
- Delete: request to erase some information/resource
The server for this script point of view is the ngrok instance. Both ngrok and this script are serve side though, from our Chatbot application point of view.
To run this script just use:
And we see the 127.0.0.1 address, meaning it is running on the localhost.
Validating our Server
For our get method, we set it to listen for the token message sent by the Facebook to the ngrok application. It returns the token as proof of having received it.
|
1 2 3 4 5 6 7 |
@app.route("/get", methods=['GET']) def getMethod(): print("Got something!") print("Challenge: ",request.args['hub.challenge']) output = request.get_json() return request.args['hub.challenge'],200 |
where the “get/” element is the address the Facebook server will use to find our get method from the public URL.
Webhooks Settings
We now need to subscribe the project for Webhooks applications, in the messenger section as shown below:
By pressing ‘Setup Webhooks’, we will be presented with a ‘New Page subscription’, where there is a Callback URL and Verify Token field, along with Subscription fields:
The only subscription filed to check is the messages field (it can be checked later too, if you forgot here).
The CallBack url is the public address Facebook will use to contact us. We fill with the following:
the ‘https://7b5a2c33.ngrok.io’ is a random address that ngrok has given us as public http url, and ‘/get’ is the route we defined earlier. Now the Facebook servers now how to contact our server side via this address. So, for validating that everything works, we will send the access token from the Facebook to our application, by filling the Verify Token field. We also select the messages check box in the Subscription Fields.
So, before we sent this token, we need to make sure of 3 things:
1. That the ngrok server is running background
2. That our script is running background
3. That Facebook got both the http url that ngrok gave to us, and the script route for our get method.
We then press Verify and Save, and check if our string has reached our running server:
Now that we have the Webhooks setup, we just need to select the created Facebook page of this example in the Webhooks section and subscribe our app to it:
Handling Messages
Now, to handle messages we use the post method below.
|
1 2 3 4 5 6 7 |
@app.route("/post", methods=['POST']) def postMethod(): print("POST Something") output = request.get_json() value = request.form['name'] print ("form_value: " + value) |
To test it, we go to the Webhook page on the field messages ( check if you are subscribed) and test it, as shown in the image:
We then send the test message to the server as follow:
What returns on our POST method:
Chatbot Testing
Now we are ready to test real chat messaging with our Facebook bot!
As the Webhooks already knows our server address, any message sent to the bot will be redirected for our server to deal with. The post method will be called and an appropriated response is necessary. For this basic tutorial we just assert the recognition of having be sent a message, as shown below.
And we receive the message on our terminal running the flask Script:
That is it for now. In the next tutorials, we will be implementing advanced response techniques for our bot, making use of AI/NLP techniques.
Chatbot Comprehensive Courses
Chatbot Building with Python: Rasa NLU, Rasa Core, DialogFlow & WIT.AI Bots
https://www.udemy.com/chatbot-building-rasa-dialogflow-witai-python/?couponCode=CHATBOT-BLOG
Chatbot Building with Node.JS: DialogFlow & Wit.AI Chatbots
https://www.udemy.com/chatbot-building-dialogflow-witai-nodejs/?couponCode=CHATBOT-BLOG
Python Programmer, Computer Scientist, Researcher at Federal University of Maranhão, Brazil, and member of the Intelligent Distributed Systems Laboratory, who loves sharing what he knows. Among the topics Ivan is interested in are: Machine Learning (ML), Reinforcement Learning (RL), Game Theory (GT), Natural Language Processing (NLP), Computer Vision (CV), Time Series (TS), and other Artificial Intelligence (AI) related topics.