Bot uprising! I’m not sure what i should write for opening paragraph. But if u are reading this, i assume you already know what is Facebook Messenger, a bot, Laravel and WitAi. So, let’s focus on what we need to do.
Because of this topic is kind a long, so i will separate it into two part. In part 1, i will share on how to create a Laravel project and connect it with Facebook Messenger. In part 2, i will continue on how to connect our bot with WitAi.
Before we start, we will need to make sure these software are installed in our local machine.
If you are using Windows as your Operating System, you might consider to download Laragon. This is because, it got everything that we need to develop our bot ( except Postman, that you have to download it ). Plus, this tutorial will heavily use that tool to teach on how to create our bot.
Create a new Laravel project
To make this tutorial much simpler, i will start it by using fresh Laravel project.
I will use Laragon to set up our Laravel project. The explanation for the screenshot can be found below.
- Click start button.
- Click the gear icon.
- Click quick create menu
- Choose Laravel
I will name the project as ‘fb-bot-tutorial’.
It gonna take a moment depending on your internet speed. So let’s make a coffee while waiting..
Alright, after everything is done we still need one package called GuzzleHttp to be installed in our project. This package will let us easily to interact with Facebook Rest API.
First open the terminal by clicking the Terminal button.
Then type this command to the terminal
composer require guzzlehttp/guzzle
It will take some time again to download the package. Let’s chillex first..
After everything is done, we will start working on the project by making the endpoint first.
Set Our Webhook Endpoint
In order to make our Laravel application interact with Facebook Messenger, we will set two new endpoint. We will name this endpoint as ‘webhook’ and use GET and POST for its action.
Open the route file and add the code like in line 20 and 21.
We also need to exclude this webhook from being verify for csrf token. Now open VerifyCsrfToken middleware, and exclude our webhook endpoint. Check the code in line 16 below.
Create a new controller
Now we will need to create a new controller for our endpoint. We also add three method inside our new controller. This is what the method will do inside our controller:
- enable Facebook Page Messenger to verify our webhook endpoint, by checking the token we provided.
- Sending a message to our webhook endpoint
- Sending back the message to Facebook Page Messenger
Type this command to the terminal
php artisan make:controller WebhookController
Now, open the WebhookController and add these three method.
Create a new Facebook Page and Facebook App
We will make a new Facebook Page and place our bot there. If you already have a page, you can directly create a Facebook App and connect it to our page. However if you didnt have any Facebook Page yet, go to this link and create a reasonable page type you want to use with your bot later on.
I already have my own Facebook Page i want to use for this tutorial. It is my public page on Facebook, and it still low number on followers, so if you found this tutorial is kind a interesting, help me by liking the page please 😜 .
To create an app in Facebook, head over to this link . Click on ‘My Apps’, then click ‘Add a New App’.
Fill the Display Name field using the appropriate name.
Connect the Laravel project with our Facebook Page Messenger
Before we start connecting our Facebook Page Messenger to Laravel, we will need to add some modification to our WebhookController that we create earlier.
Alright open up the WebhookController file, then modify it like the code below.
We also need to add some new keys on env file. Open .env file on the root of the project, then add this new field.
Save it, then we will need to serve our project and share it using Ngrok. Open our Laragon then follow the screenshot below.
Ngrok will give us the domain name that we can use for testing. This gonna be useful when we setup our app later on.
Now, we will need to open the Facebook App we create earlier. Select the Messenger as the product.
After that, scroll down and look page section below. Select the page you have created earlier. It will later on generate some token next to it. Copy this token and paste it to our .env file.
Now, click the ‘Setup Webhooks’.
Put the domain name given by Ngrok earlier and append it with /webhook endpoint. We also need to put ‘some_testing_token’ in Verify Token input field.
For now just mark all the checkbox inside the Subscription Field, because for now I’m not really sure what are the function for each box.
After that, we will need to subscribe for the any event that happen to the page.
Let’s testing it ! Hehe.. Currently the bot only copy what we write and send it back to us.
We can improve it either by checking the message using regex for some sentence or pattern. Or even better, we can use some WitAi to check the intent of the message. For that part, I will write it in the next post.
Thanks for reading!