Dialogflow Tutorials: How to Deploy Dialogflow Webhook on Heroku

[Laughter] [Music] hello friends so in this video tutorial i'm going to show you how to deploy a fulfillment webhook code on heroku so if you have a used inline editor for dialog flow fulfillment you might be aware of that google asks you to you know enable billing account in order to access the inline editor in order to enable the billing account you have to provide your credit or debit card details so you can avoid that by deploying your fulfillment web book on heroku it is completely free and it don't even ask for your credit card details so after deploying the fulfillment code on heroku all you need to put is that url into the webwork section so if you go to your dialogflow and if you go to fulfillment once you deploy your fulfillment code on heroku all you need to do is just enable this option web book here and it will say if you enable a book fulfillment via google cloud function will be disabled just fine this option will be disabled this will be enabled and here instead of using this default you need to put the web book the web book url generated by heroku so we'll see how to get that url from heroku how to put that url here and how to do the same thing that we are doing here uh locally deploy that code on heroku and instead of using inline editor use the heroku for webhook okay so if you see i have opened my visual studio code here and i've just opened i've just created a blank empty folder if you see there's nothing in there so it's a blank folder now what we are going to do is we are going to create an express application and express is a node.js package for creating apis so what we are going to do is we are going to create an api using express.js in node.js and this api when when a post request is made this api will basically execute the fulfillment code the code which is normally executed by dialogflow inline editor which acts which is actually executed on google cloud okay so that code will be executed on webhooks on heroku so let's try to create that api using express and not just and also it is important to open the postman you know so that we can test the apis just open your postman as well and we'll start creating the express so the first step is to create a index.js file so we'll just create a new file called index.js all right and open your terminal so if you see we have index.js here now you can run a command called npm init so it is asking for package name you can change if you want to otherwise just select the default you can select all the default details here entry point index.js text command uh just leave everything as it is and that's it if you see a package.json file will be created [Music] okay uh just leave it as it is and now we will start in installing things so first of all uh let's install uh express so npm i save express uh we may need to install few more things so we'll write uh just next to it so something called body parser okay so we'll write uh npm i save so this is to just save everything here in package.json so that we can deploy it on heroku and then express body parser and then we may need a few more things like firebase functions [Music] and we may also need dialogflow dash fulfillment um i think that's it for now so [Music] i will put this command in the description section below so you can copy it from there uh or i'll put it in a github but just write this command npm i just save express body parser firebase functions and uh dialog flow fulfillment you actually don't even need this firebase functions so we can actually remove it so only express body parser and dialogflow fulfillment is sufficient just press enter so installation is done and if you go to package.json you should see body parser express and dialogflow fulfillment that's good and you can see node modules is also there so that's great now uh let's write start writing our express code so first of all you will write const express to require christmas so if you are new to express i would recommend just go and search for a tutorial on express there are many tutorials available on youtube or udemy so just go and uh get some basics of express uh okay so if assuming you are aware of how express works uh we are going to write our code here so i have to include or require body parser [Music] so we are going to use either environment port or 3000 whichever is available [Music] once you have written this code uh you have to write app.post and you have to give a name so let's call it dialog flow full full filament that's the name of the endpoint which will be called and this will receive request and will reply with a response [Music] so for now let's just do console.log test this is just to see our express is working or not okay and here you will write app.listen to port and you will write console.log listening on port then port number will be something like port make sure you use the backpicks here okay not these ones but these ones backtick so that you can use you know string string templates okay so this is our basic bare bone express code now let's do uh and what you can do is you can write a start script here in package.json so inside script you can write start which will be like node index.js so once you have done that just write start node index.js and once you have done that you can write npm start so if everything is okay you should see listening on port 3000 okay that means our server is running uh api server is running and now we have to test this so go to your postman and select post and select localhost colon 3000 slash dialogflow dash full filament so this is same as this one dialog flow fulfillment and if you click a send you should see a console log here test which is this one so that means our code is working fine and we are getting a response okay so now we are going to write the actual code here to you know to handle the incoming request for dialogue from dialogflow and basically process the response so let me give you a quick understanding of how this works basically so let me show you this in a in a visual way using mind maps okay so the way it works is you have your let's say dialog flow here and let's say you have a user here somewhere and so what happens is when the user sends a message let's say let's say user sends a message called hi okay now this message will be sent to the dialog flow and what happens is dialogflow sends and if we enable the webhook option in dialogflow what happens is uh dialogflow sends this webhook option so dialogflow sends this uh hi in a json format you know so it will send a json structure to this packet service using a post request so i can write a post json so the dialog flow will send this whole request containing hi all the parameters or entities or anything to this back-end service and this back-end service will receive a json and this is our express so previously it used to be a google cloud function dialogflow so if you type your fulfillment in inline editor then it will be a google cloud function but now we are removing google cloud function and we are putting uh the fulfillment code on heroku so you can write here heroku or express server so this express server will receive this post json and now once we have all this information like hi we will make a call to dialogflow will get a response and we will send back a response to the dialog flow and basically what we do here is uh if we have to reply with any custom logic any if you write if to write any custom response or let's say if this user says uh what is the weather in london let's say the user says what is the weather in london okay now dialog flow doesn't know anything about weather so what happens is it will send this information in a json format to this heroku express server and what it provides it says that okay someone is asking about what is the weather in london and now in the express we have this information that someone is asking for what's the weather in london and what we can do is we can call another api or you know let's say we call another api called a weather api our heroku or express code will make a call to weather api get the weather so get the weather data we will call the weather api get the weather data generate a response in another json format send back to dialogflow and then dialoflow will send that back to the user this is the whole flow of how it works okay so going back to the code what we are going to do is we are going to write here the the way so in the request we will get all the information that the user said like hi hello entities intent everything and we have to process that information here generate a response and send that back to the dialog flow all right so with that information in mind uh we have to add a couple of more uh packages here so one of them is this allocro fulfillment and [Music] correct so we have to require this dialog for fulfillment and we will uh import something called webhook client from dialogflow fulfillment so i think that's it now we can start writing our code here so so now what we have to do is we have to create a function a function which will handle the dialogflow fulfillment so let's call it full const dialog flow fulfillment this function will take request and response [Music] okay so let me zoom my code a little bit [Music] so this function will take request and response and now we will write the actual code so we will first of all create an agent variable the const agent equal to new book client and in that we will pass the request request and the response this web client is coming from dialogflow fulfillment package that we have imported here all right so once our agent is created now what we can do is uh and write some function here like let's say function say hello and call anything let's call it say hello and you will pass the agent here and inside this say hello function you will write agent.add hi hi there this response is coming from heroku or something like that okay so i think this is the standard practice that you follow in inline editor as well just write the function any any function pass the agent and agent dotted your message then finally you defined something called intent map so so you will write intent map dot set and you will pass two parameters here uh in the first parameter you will pass the name of the intent and second parameter is the name of the function okay so let's say the function the intent name is default welcome intent so whatever is the name of your intent you will pass that here and the second name is the name of the function that you want to execute so in my case i'm just using default welcome intent okay and finally agent dot handle request and then intent map so that's it [Music] finally you have to call this function here okay and you have to pass the request and the response so this request and response will be passed to the dialogflow fulfillment which is this one it will do all the processing it will basically execute this code agent.add and you should see a response so if everything is working as expected we should see some response so so let's try it out let's go to our dialogflow and go to our default welcome intent okay so if you try higher now see there is some random response coming hello i am ap bot or something what i am going to do is i am going to enable the fulfillment okay so i have enabled fulfillment and save it so [Music] if you now type hi right now we have not connected with the fulfillment heroku code but still if you type hi and if you click on diagnostic info you will see something called fulfillment request okay it is displayed only when uh you enable the fulfillment so this is basically the information that dialogflow passes to the express or heroku or any backend service so normally it is google cloud function but right now we are going to write our own express server so this is the information if you see it is passed to the fulfillment and we have to read this information if you see we can see the query text is high and accordingly we have to generate the response so let's go to our uh let's uh stop the let's stop our express server and start it again just to make sure it takes the effect and let's see if there is some problem we need to fix that so it looks like action on google module is missing [Music] so yes we can install the action on google module so all you need to do is npm i does the save and then name of the module actions on google let's install that right so our uh actions on google module is installed now let's try run npm start and you see it says listening on port 3000 so that worked now let's go to our postman and in the body we are going to select a raw and json and just copy this yeah copy this information and paste it here and if you click on send you will see this hi there this response is coming from heroku so what is happening actually is um just imagine that dialogflow is sending this information dialogflow is sending this information to this endpoint and when this endpoint is hit this code is executed and this say hello function is executed and then this url basically generates this output fulfillment text hi there this response is coming this is sent back to the dialog flow okay and then dialogflow shows this response to the user so that's how the fulfillment works uh so it is working well on our local host now we cannot use localhost as it is on we can actually use localhost as it is as well uh using something called ngrok so let me actually show you that as well so ngrok is a service which export your port to the uh to the uh public url uh on internet so because you cannot post put uh you know uh localhost here in the fulfillment service so let's say you want to put the webbook url you cannot put localhost here but if you use something called ngrok then then you can do it so let's try it using ngrok so i have already downloaded ngrok let's open a new terminal and let's go to the ngrok folder okay and just run ngrok so you see there are the commands here ngrok http 80 to secure public url for port 82 web server port positive web server so we have to expose port 3000 so we are going to write ngrok http and 3000 so you see this url is for our localhost so this url is now pointing to localhost 3000 so what that means is basically instead of this if i put this url and sorry not everything but only this part localhost 3000 can be replaced with this and now if i send uh this request i should still get and yes i am getting the response which means now our webhook is working okay and it is working using ngrok so we are good to use this url in our dialog flow just put this url in the web book section and that's it click on save [Music] and it is saved so now if i say hi i should see that message is coming from localhost let's see and there you go you see it says this hi there this response is coming from local code which means we have deployed webhook locally now i can change this to anything testing hello world [Music] into three save it [Music] uh just stop and start your server so that your change changes take effect [Music] done says look listening on postport 3000 and now if i say hi you see testing hello world one two three so you can see all the code all the responses coming from our local code and it is connected to our webhook which is running locally fine using ngrok and we have seen that our response is coming when the localhost is running then the response is coming but when the local has stopped this n grog because it is just forwarding the local host to the public url so when the localhost stops this response also stops so now what we need to do is we have to deploy this code to heroku so you can create an account on heroku for free there's no charges once you create an account you can see something like this and you have to click on create new app okay and just give it a name so i can give it a name like hello awt uh dialog flow roku fulfillment so let's just call it awt dialogflow heroku and yes that name is available and you can select a region uh i think u.s is fine i'll just create an app okay so once the app is created you will see something like this and you need to now there are some instructions given you have to follow just these instruction so first of all you need to just uh select this go to your code okay and just type just make sure you are on the same folder where you have index.json and package.json file and just type heroku login and just wait for a few seconds and it will say press any key to open a browser and you just have to press the enter key okay so it will open the browser and it will ask you to login you can just click on login button here and that's it you are logged in uh you see you're logged in done logged in as unsure now uh once you are logged in successfully you have to follow the other steps so you can come here and see the instructions it says cd my project kit init so we are already in the current project so we don't need to do cd we can just write git it okay and it says initialize the mtg repository okay that's good now we can just copy this command error get remote okay just uh paste this and that's it set get remote heroku to this this so once that is done now you can copy this command git add dot okay just do this get add dot next you need to write you need to run this command [Music] okay so actually uh i check to get status oh so that is a problem we actually added all the get modules so we don't need to do that uh so to avoid that just add a file called git ignore okay and in the get ignore file right get modules [Music] just right get reset and then if i do get status will show this and now i will do get add dot now if i do get status will show only those files so make sure you don't you add this git ignore file add node modules and don't commit node modules okay so now we need to run this command git commit [Music] and that's it so now you can run this code get push heroku master and if you go to the app and click on more and view logs you should see the logs so you see it says build started build succeed starting npm start perfect so now it says listening on port something we don't care about what port it is so now what we need to do is uh we need to click on open app okay so if you click on open app if you open it on browser it should say cannot get which is fine now just copy this url go to your dialog flow and instead of this ngrok io everything before slash remove that okay don't remove dialogflow fulfillment because we need that just remove ngrok part paste this heroku url and click on save so once it is saved now if you type hi you should see this testing hello world okay that's great so let's try doing some changes uh let's say hello this was a nice tutorial by self tech let's just write anything and now remember that we have to deploy this because we need to push this on hello so to do that to do that first of all we can just write git status you can see there is one file modified now you can write get add dot now if you do get status it will say in green now you can type git uh you can just uh do git commit minus m and finally get push roku master okay so once you do that uh if you go to heroku you should see build started in the logs and within a few minutes it should be [Music] deployed [Music] [Music] and there you go it is deployed listening on port so now if i go to dialogflow and now if i type hi see adresponse hello this was a nice tutorial by excel wraptech so this was a very simple tutorial about how to deploy your own web hook on you know heroku instead of using inline editor or google cloud functions so if you do this if you deploy your fulfillment on heroku or any other external service and if you use the web book then you don't need to worry about billing account or you know paying to google cloud functions and since heroku is free you can completely use it for free so that's [Music] [Music] you

Channel: AxleWeb Technologies

Views: 3,924

Rating: 5 out of 5

Keywords: Dialogflow, heroku, webhook, fulfillment, dialogflow heroku, how to deploy dialogflow on heroku, webhook on heroku, dialogflow fulfillment on heroku, dialogflow chatbot, heroku webhook, inline editor dialogflow, how to, webhook on dialogflow, dialogflow udemy

Id: -wR3WyqRZGw

Length: 36min 14sec (2174 seconds)

Published: Sat Sep 26 2020