hasura-fb-bot | tutorial consists of a simple facebook messenger bot

If you want to skip the tutorial and see this bot in action asap. Follow the instructions below:.
'+ Create a new app’. On the pop up that comes up, we need to fill in a box with a Callback URL and another one with a Verify Token.
Navigate to https://developers.facebook.com/apps/
Click on '+ Create a new app’.
Give a display name for your app and a contact email.
In the select a product screen, hover over Messenger and click on Set Up
Scroll down to the Webhooks section and click on the Setup Webhooks button.
The Callback URL is the url that the facebook servers will hit To verify our server with the Verify Token we give it. This will be a GET request. To send the messages that our bot receives from users. This will be a POST request.
This means that we need to create a path on our server which can be used by the facebook server to communicate to our server. To do this, switch back to your terminal and open service.js file.
Paste the following code:
choosing an arbitrary password that we will use as our Verify Token while Enabling Webhooks.
creating a path \webhook\ which will accept : A GET request to verify the Verify Token being sent by the facebook servers. Incase, the token is not the same as the one we have set, we respond with an error. A POST request where all of the messages that our bot receives will be posted to, by the facebook server. At this point, we are just printing out the received request and responding with a status code of 200.
Let's deploy this code
Now, switch back to your facebook app page and fill in the pop up with: Callback URL: https://bot.YOUR-CLUSTER-NAME.hasura-app.io/webhook/ //Replace YOUR-CLUSTER-NAME with the name of your cluster. Verify Token: messenger_bot_password Subscription Fields: Check all
Click on Verify and save.
Scroll over to the Token Generation section
Choose a page from the dropdown (Incase you do not have a page, create one)
Once you have selected a page, a Page Access Token will be generated for you.
Copy this page access token in your server.js file
Now, we need to trigger the facebook app to start sending us messages Switch back to the terminal Paste the following command:
Let's check if everything is working fine.
In your server.js file, add the following
Deploy this code.
Switch to your browser and open up the page you just created to generate the Page Access Token.
Click on the button named + Add Button.
Next, click on Use our messenger bot. Then, Get Started and finally Add Button.
You will now see that the + Add button has now changed to Get Started. Hovering over this will show you a list with an item named Test this button. Click on it to start chatting with your bot.
Send a message to your bot.
The response printed in the logs will look like so
The senderId and the text keys need to be extracted from this reponse.
Switch back to your server.js file
Add the following to your your POST '\webhook' function:
In the above code we are basically parsing through the request and extracting the message: 1: We are checking whether the object field in request being sent has a value page 2: Next, we are checking whether it has a key named entry 3: After ensuring that it does an entry key, we are looping through each element in the entry array. 4: For each element inside entry, we are checking whether it has a messaging key. 5: After ensuring that it does have a messaging key, we are then looping through each element inside the messaging array. 6: Getting senderId of the user who sent us the message. 7: For each element inside messaging, we are checking whether it has a message key. 8: When we send a message to our bot, the facebook server echos back that message with a field is_echo as true. In such cases, we are ignoring the messages. 9: Extracting the message sent by the user to a variable called textMessage. 10: We send the senderId and the textMessage extracted from the request body to a function named sendMessageToUser. This function sends the textMessage sent to it, to the senderId provided.
Let's have a look at our sendMessageToUser function.
This is a graph API provided by Facebook to send a message to our bot.
Deploy this code.
Switch back to your bot and send it a message. It should respond with the same message.
Switch back to your server.js file
To fetch details on the movie, we are going to use the APIs provided by https://www.themoviedb.org/ APIs provided by https://www.themoviedb.org/ are not open, so you'll need to create an account with them and get an API key. After creating an account, follow the instructions here to get an API key. We are going to use a npm library called moviedb Switch to your terminal Navigate to /bot/app/src/ Type npm install moviedb --save and hit enter. Add the following to your server.js
Next, we are going to write a new function to get the movie details:
Here, we are fetching details on the movie and printing it out on the console. mbd.searchMovie is a method provided by the moviedb library.
Deploy the code to see what details we get on the movie.
Test out the API we are using at https://developers.themoviedb.org/3/search/search-movies and take a look at the response that you are getting.
The results key is what contains a list of object with details on the movie.
For now, let's just access a single object from this list and respond back to the user with the movie name and overview.
Your getMovieDetails function will now look like this.
Deploy this code and test it out.
Switch to your server.js file.
Add the following function
This function accepts a senderId and an elementList. We will get to what the element list is in a bit.
Next, modify your getMovieDetails function like so:
In the above code: 1: We are initializing an empty array called elements. 2: Here, we have a variable whose value will be at max 5 or the number of elements in the result given to us (if its more than 5). 3: We are now looping through the elements in res.results. 4: getElementObject() is a function that we will write to get details on the movie in a format that is recognizable by our bot. We are pushing that returned value into the elements array.
Let's have a look at what getElementObject() looks like:
In the above code, we are returning a JSON object with some data. Everything should be self explanatory except buttons: This is show a button to the user named View more details The type: "web_url" lets our bot know that, if a user clicks this button a new page should open with the value specified in the url key. Here, the url key is just a link to themoviedb.org/movie with the movie id.
Deploy this code and test out your bot
Clicking on View more details should take you to a new page.
Switch to your server.js file and add the following new function:
The function accepts a senderId and a boolean value(isTyping). Based on the value of isTyping, the variable senderAction takes a value between typing_on and typing_off. Using this, we use the Graph API to send a request to the Facebook server.
You can now use this function in your getMovieDetails function like so: