4. Git client installed for deploying our backend to cloud.

If you have a look you can see that from the above JSON you can extract the intent and parameter values from the results object

Within results you have a value named 

Action - (Which gives you the intent)

Parameters - (JSON object which would provide you the parameter values required)

So our backend would get a request along with this data our backend would extract the values it needs and provide a response

We need to send the response for movie recommendation in the format as shown above, facebook provides different formats in which we can display data the above format which you see is called as a generic  template and our backend needs to define it in JSON format as described here on facebook messenger documentation page for generic templates

So when the request from API.AI would hit our backend it should perform following functions.

1 . Extract the parameters and Intent
2. Use the parameters value to query TheMovideDb 

3 .Get the response from TheMovieDb,
4. Create a JSON format for response using the response from Movie DB

So our final response which would be shown to have a view shown in messenger as shown above would look something as shown below.

Lets now have a look at TheMovieDb.org Api which we would be using to get movie recommendations. 

Step 1. First of all go to https://www.themoviedb.org and sign up for an account and login in, click on API in the side menu to get your secret key as shown in the below image

Step 2. Now if you go the the API documentation for the TheMovieDb you could see there is one api available to fetch movie by genres, you can find documentation here https://developers.themoviedb.org/3/genres/get-movies-by-genre

https://api.themoviedb.org/3/genre/{genre_id}/movies?api_key=<<api_key>>&language=en-US&include_adult=false&sort_by=created_at.asc

As you can see this API requires you to provide the API key as a variable along with the genre ID for which you want to fetch the movie plus there are few query strings as shown above we wont bother about that now,

API Key - Its the key you got when you signed up.
Genres ID - Every genre has one ID associated with it which we have to send to this api when we query it for the movie. 

We can get the complete list of movie genres from the following URL

Add your API Key in the url and you would get a response as shown below.

we would use the above IDs in our Backend while sending the request to for movie recommendation.

Steps To Build Your Node.js Backend 

So now that we know our request and response format lets start building our backend in Node.Js

Step 1. Install Node.js from https://www.nodejs.org. After you have that installed you should create a new folder anywhere on your machine and name it "Node Projects", this is the parent folder in which we would be creating our projects.

Step 2. Now you need to install express framework for node as a global variable so you can access express commands from anywhere on you machine to do that run the following command.

$ npm install express --save

Step 3. Now open Node Projects folder and fire up command prompt (cmd) within that folder. You can do that by pressing shift key and left clicking inside the folder (Node Projects) and selecting open command window here on windows. Once you have the cmd open type in the following command.

$express MovieBot

 http://localhost:3000/ 

(by default node.js runs on port 3000) now you would be able to see a web page saying 

welcome to express. 

Congratulations we have our initial set up, up and running properly. now we can thrown in our logic and start implementing our Restful backend.

Step 6. Now before we start I would like to explain few concepts in node.js and express framework and would like to let you know how the file structure is in express node app. If you open your folder MovieBot, You would see a following file stracture



so blog and contacts are two routes of our base url and we can define what should happen when the request comes in for this routes in our routes folder by creating appropriate JS files and linking them to the route in the app.js

Now if you go to http://localhost:3000/users/hello you would be able to see a web page saying "Hello World"



Note - Notice that you are going to http://localhost:3000/users/hello not http://localhost:3000/hello this is because you have defined the route in user.js file which we have have defined in app.js to handle the  http://localhost:3000/users url

we just created a route to handle a get request at a specific url. Similarly you can handle different requests with the router, which are

1. Get - router.get()
2. Post - router.post()
3. Delete - router.delete()
4. Update - router.update()

Now that we know about the structure and format lets start building our backend please have a look at the comments in the code for better understanding.


Step 7.  Open app.js and the lines at number 10 and 28. We have defined a new route webhooks and we have mapped it to the url /webhooks in relation to our base URL.

$ npm start

Step 1. Log on to Heroku and Sign up

Step 2. Log in and hit create a new app button

 

Step 3.   Hit Create App now you would be taken to the page as shown below follow the instructions on this page to deploy your backend to heroku

Step 4. Download Heroku CLI (Heroku Command Line) and  Go to our backend MovieBot folder and open cmd at this location and follow the command as show in the image above

Step 5. Now If you have followed everything appropriately then you can go to post man as we did priviously but instead of checkin on local host now add in your heroku app url https://moviechatbot.herokuapp.com/webhooks and keeping all other things same hit send.

Now you can see the response would be provided as shown below.

This confirms our Heroku cloud is running our backend successfully.Now we just have to enable fulfillment option at our API.AI agent. 

Step 1. Go To API.AI dashboard and click on fulfillment tab on the left hand side and enable the webhooks option as shown in the image below.

Leave the authentication part empty, as we are not covering that in this tutorial as it would be out of scope to explain that. hit save 

Step 2. Go to Intents section and click on the movie.recommendation intent we created, scroll down and enable

 

Hit save, Congratulations we have our Chat Bot ready, Go to your Facebook page and start a chat with the bot your bot would provide you recommendations as we had decided.

Please comment below if you are facing any issue as well as let me know your thoughts about chat bots.

There are two important things that you need to understand about api,ai agents before we move any further, These are the two main components of the service.

1. Intents - Think of intents as actions you want your bot to send to you along with the parameters you want for ex. Our movie bot has only one action and that is to recommend movie, so the intention or the intent can be defined as movie.recommendation  

2. Entities - Entities are concepts that your bot should understand and using this concepts your bot would extract parameter values for your intents, our movie bot is going to recommend movies based on genre you wants so one concept that our bot needs to understand is genre so movie.genre would be one entity for our bot. similarly if we want our bot to recommend movie based on cast we would add movie.cast as one of the entity as well.

Now as we know about entities lets start with adding one for our movie bot

1. Click on the entities tab on your dashboard

2. Then click on Create Entity button on top right

3. You would be on a page similar to shown in below screen shot.

Step 4. Fill the fields as shown in the above image, First lets name our entity movie-gener then in the space below add a row  and in it add some examples of movie geners as you can see in the screen shot. The left hand side is the parameter value that you want your bot to send to your backend and right hand side are the words or phrases that could map to those parameter value for example when your says "show me some funny movies" I want this to send me movie-gener parameter with the value of comedy, so in the left hand side I have named the parameter value and in right hand side I have mentioned some synonyms or phrases that should be used to map.

Step 5. After you have added your examples click on save, give it some time to save do not close the browser.With that we have the Entities part ready.

As we had discussed earlier we know that intents help us map user said phrases to developer defined actions or we can call it developer defined intents.

Step 1. Click on intent on dashboard and then hit create intents
Step 2. Name your intent, our intent is just one and that is movie recommendation, so I have named it movie.recommendation

Step 3. There are three sections to creating intents that are

A. User Says



Here you would add some example phrases that would trigger your movie intent, For movie recommendation a user might say something like "I  would like to watch a movie" which would trigger our Intent we are also going to handle the genre which a user could say something like "I would like to watch a horror movie" so all such phrases we would add in the user says section while you add those you can highlight a single word in a sentence and define which entity it matches if the agent it self doesn't understands the entities in the sentence you can read more on this from the offical documentation.

B. Action



Here you define what action would be triggered for your user says phrases, for us its our intent action it self so we have mentioned the action to be movie.recommendation along with this action we can see the list of parameters that have been extracted from our user says example phrases, from the list we can define if any parameter is absolutely required for our action by ticking the required box. As we need movie genre to be specified for us to provide the movie result we have marked it as required. But what if user says something like "I want to watch a movie" then we can not just leave the user blank as we dont have a gener to show him the movies. In such case bot will send the prompt question that you have set to extract the required parameter from user. So If user says "I want to watch a movie" our bot would reply with "From which gener do you want ?" and extract the required parameter.

C. Response


And finally when all is perfect and you have your required parameters here is where you define what the response text from the bot would be.

With this we have our conversational engine set up we can test it on Api.ai it self via the "Try it now" console.

Here is the screen shot of our bot in Try It Now console





As you can see It is working fine, We first hit the agent with the query "I would like to watch a movie" for which we receive the response "From which gener to do you want ?" as agent was not able to find the genre from the query . Then we enter "I think I am in mood of horror movies" and agent gives us the response "I think you would like the following movies"  with intent value of movie.recomendation and movie-gener parameter value set to Horror just as we had wanted.

With this we have our Converstional UI tested and ready to be integrated with Facebook Messanger Platform 

Integrating Api.ai Bot with Facebook Messenger

Now we need to connect the bot with Facebook messenger, For that we need to follow the following steps

Step 1. Log into Facebook Developer Console and create a new app as shown below.



Name your app with your agent name here, add your email id and select apps for messenger as the category then hit create App ID.


Step 2. Now you would be taken to a screen as shown below, you have to select a page for your messenger bot, if you dont have a page created you can create a new page and come back to this page, after selecting the page facebook will generate a Page Access Token for that page



Copy that Page access token and save it somewhere we would need it in the next step

Step 3. Now time to actually connect the page we created with the api,ai agent we made earlier for that go to api.ai dashboard of your agent and select integration as shown in the picture below.




Enable the Facebook Messenger toggle and click on setting.
In the settings panel enter the details as shown in the picture below

 .

Add a verify token which would help verify your bot identity to FB messenger keep it secret and do not share it. Paste the Page Access token that you had generated earlier here in page access token box, now copy the Callback URL which you would need in the next step.

Step 4. Now we need to configure Webhook go to the developer page on Facebook, In the products tabs go to messenger and click on set up webhooks, you would see a screen as shown below, Paste the Callback URL that you copied in last step and also enter the verify token you created previously, tick the messages and messages_postbacks check box and hit verify and save.



Step 5. Now its time to test the first phase of our bot, go to the page you created for your bot and try and send a messenger to the the page, If you have correctly followed the tutorial you would have your bot give you response as below.