Building a GIF Messenger Bot with Flask

Last time I wrote about building a mini J.A.R.V.I.S. I recently dabbled with Facebook messenger API and decided to write about it. Building Facebook bots is really cool. Asides from its well documented API, Facebook has a lot of users.

As of the third quarter of 2017, Facebook had 2.07 billion monthly active users

statista.com

This means your Facebook bot can be accessed by over 2 billion users once it’s published. How cool is that?

In this article, we will be building a GIF Facebook Messenger bot. The bot will reply users with GIFs that relates to any text it receives from the users. We will be making use of the following:

• Flask — Python web framework
• ngrok
• Facebook & GIPHY developers account

In summary, we will be going through the following to build the bot

• Create Facebook page and app for the bot
• Set up a flask server locally to handle the messages from the bot
• Introduce ngrok to tunnel our local server online
• make a simple echo bot to test if our setup is working
• Introduce GIPHY API and produce our fun Gif Bot

Create Facebook page/app

To set up a messenger bot you need to create a Facebook page and Facebook app via your Facebook developers account. We can name it GIPHY Bot :).

creating a Facebook app

• Select the Messenger Product since we are building on the messenger platform

Next, select the Facebook page you created previously, as that is needed for the bot

Take note of the Page Access Token(it should be kept secret) as that will be needed in the Flask app to access the messenger API. A webhook also has to be set for the bot messages to be polled to. We will configure that once we have setup the Flask Server.

Setup Flask Server

The flask server will provide a webhook to receive and respond to messages from the messenger bot. We will need to install Flask and Requests

pip install Flask requests

Flask will be used to run the server while requests will help in making API calls.

Create a python file => bot.py and add the following code

When setting up a webhook for the messenger bot, Facebook sends a GET request to the endpoint(flask server in this case) provided with a verification token, which is set when adding a webhook for the messenger app, and a “challenge” value to be returned. This is to make sure the webhook is working properly. The verify function in the gist above takes care of this.

You can start the server by simply typing

python bot.py

The flask app starts a local server (‘127.0.01:5000' by default) but we can’t set this as a webhook for the messenger bot since it isn’t online and thus cannot be accessed by Facebook. This is where ngrok comes into place.

Introduce ngrok

Assuming you have ngrok installed, all you need to do (for Linux systems) is

ngrok http 5000

This provides a url that will enable Facebook access the flask app running on our system. You can learn more about ngrok here.

Since Our webhook is running and online, we update the messenger app with the url gotten from ngrok(‘https://af6313bd.ngrok.io’) and the verify token we set in out bot.py file.

adding a webhook and verify token for the bot

Next we subscribe the webhook to the Facebook page we created. In this case “GIPHY Bot”.

At this point, data from the messenger bot is polled to our server. If you try sending a message to the bot, you will notice POST requests on your console.

Messages received by the bot are sent as POST requests to the webhook we set. In the gist above, handle_messages helps to extract the necessary data we need from the payload of each message, received by the bot, which include the actual message and the sender id. The send_text_message will be defined later; its function is to send a message back to the user.

Make a simple echo bot

The send_text_message function makes an api call to echo back the message sent by the user. the Page Access Token gotten earlier is required to send messages back to the user.

echo bot in action

Introduce GIPHY API

Well we aren’t here for an Echo Bot, we want the bot to reply us with a gif that corresponds to the text it receives from the user. To achieve this, we will be using the GIPHY Translate API.

Head over to https://developers.giphy.com/, sign up and create a new app. You will be given an API key which is necessary for accessing GIPHY API.

The search_gif function simply makes a GET request to GIPHY Translate’s API endpoint passing in a text and the API key as parameters. It then returns a gif url.

send_gif_message function is a simple modification of the send_text_message function earlier created. This time the message received by the bot is passed as an argument to the send_gif function and a gif url is returned. This url is then passed as an image attachment to the user.

Conclusion

Phew!!! We now have our working GIF bot. There are some basic things you might need to know

• Ngrok’s free plan is restrictive. The forwarded url is not fixed and thus changes each time you restart Ngrok. You might need to host the flask app on a server like heroku if you want your bot to always be online
• The Bot is still in development mode and thus might not be accessible to other users asides you. You might need to complete some requirements on Facebook before the bot can be made public.
• Facebook Messenger API is really cool and provides many ways to construct messages sent to users. Check it out!!

The full code is available here. If you encounter any issues while building yours, feel free to post in the comments below. I’ll be very glad to help out.

You can reach me on Twitter here :).