Connect Chatbot To Backend - Dialogflow Fulfillment - Ultimate Chatbot Tutorial

[Applause] [Music] [Applause] [Music] hey everyone welcome back to another tech tuesday with techfit search my name is sachin a google developer expert and in today's video we'll learn how to connect your chat bots to your backend if you're new to the channel make sure to subscribe as well as hit the bell icon so that you can be notified for future videos so without further ado let's get started so for today's session what we'll be building is we'll learn more about intents and entities so in our previous session what we did is we looked at how we can interact with uh chatbots how to create a chatbot from scratch and then we kind of looked at how you can integrate the chatbots to through multiple platforms like a facebook messenger your own website creating your own custom messenger bot and also integrating it with whatsapp now those were the first two sessions if you're new to the channel and if you're joining us for the very first time i highly recommend that you go back and look into those videos as well but for people who are joining us for the very first time uh this tutorial will also provide you a high level overview of how you can get started at the same time see how you can connect to your back end logic or back end of business logic so for today's session we'll be looking at dialog flow learn more about intents and what are entities we'll also be covering about fulfillments and finally integrating with external apis and integrating with your own google calendar so with that being said let's get started so the first step that you need to do is go to console.dialogflow.com so when you go to console.dialogflow.com again if you're here for the very first time you can create a new project since we have already created a project before this is what it looks like so we have intents and we have entities we have integrations all of these where the features that we covered in our previous session so to kind of give you a glimpse of what exactly we're going to build today let me actually show you a demo to begin with and from there we can actually start building out this entire application so the first thing is in our previous sessions we created a simple schedule appointment uh chatbot so what it does is whenever the user says something very similar to set an appointment for me at 3 pm tomorrow or set an appointment at 4pm dialogflow understands the intent of the user so in this case the intent name is called schedule appointment and based on that intent it will capture the key information that it needs to capture from your chatbot in this case we had date and time which is the key important data points that we need to capture and based on that data points what we do is we give out a response saying that great appointment all set for so and so date so that's what we did in our previous tutorial and we also saw how we can build uh chatbots quickly by feeding in existing faq documents as well so with that being said let's actually try out uh a chatbot right now so this is a demo of what we'll be building today so i'm gonna say set an appointment 4pm tomorrow so the moment you do that you can see that the response from the chatbot is okay let me see if we can fit you in november 25th 4pm is fine so it has automatically identified and it's looking for whether there's a slot available in my calendar for that specific date and time if the slot is available then it would go ahead and create a calendar event in my calendar so let's actually go and see if the calendar is already created so let me shift to the demo account go to the calendar and you can see that for tomorrow at 4 pm based on my time zone we have a general appointment automatically set by a chatbot right so this is what we'll be building today of course we'll expand on this and also see how you can do this with different services by creating entities so that's this is a high level overview of what we'll be building today and apart from this once this is built again through our integration platforms that we have done in the previous videos all of this would be automatically available over there so be it on your web so let's see a demo of the web [Music] okay so here we go let's set up another appointment so greetings i can help you set up an appointment and help you about information about the coronavirus so that was what we built in our previous tutorials in this i'm just gonna set an appointment appointment at let's say at 6 00 pm tomorrow and then again we have the response now if you go back to your calendar you can see that the appointment is automatically set so in this way as a business as a startup if you are allowing appointments if you want to keep tab of each and every appointments and based on your availability you can base basically set these up dynamically so this is how your chatbot is kind of integrating with the google calendar calendar and we'll see how it can be done through dialog flow fulfillment so once again for people who are joining us from different parts of the world i'd love to see where you guys are joining from so leave it in the comment section and also leave your questions and queries in the live chat so towards the end of the session i'll be looking at some of these questions and i'll do my best in terms of my capacity to help and answer that to help answer that okay so let's go ahead and start with the first thing so the first thing is whenever a chatbot is initiated or triggered or invocated the first thing that it comes is to the welcome intent so intents are again a way for the conversation or dial-up flow to understand based on the conversation that the user is having with your chatbot what intent what is the intent of the user so in this case let's say whenever there's a greetings message it understands that it goes it has to go into the default welcome intent and based on that default welcome intent what is the response so here the responses greetings i can help you set up an appointment and help you get information about the coronavirus so that's what we kind of built in right so let's go ahead to the next intent with this which is the schedule appointment so in terms of the schedule appointment what we did is appointment for 5 30 pm so whenever the user says something about scheduling an appointment dialogflow understands that i need to pass whenever a conversation similar to this occurs between the chatbot agent and the user dialog flow will automatically handle that entire thing to the schedule appointment and when it comes to the schedule appointment it will then identify okay what are the key information that's required so in our previous tutorial we also saw how you can make these as required fields so that we can have extra questions so for example if i say simply like set an appointment without actually providing the date and time let's see what happens so you can see that at what time they say 5 pm and when do you need this i say tomorrow and then automatically a calendar invite is created right so i hope you guys understood what it means to have required fields so these are entities and if you're looking at what are these these are system entities so in our previous example whenever we add date and time dialogflow automatically generates these entities for us but let's see that if we have our own services we have a custom information or custom fields that we would like to capture that is not part of the system entities what's the best way to actually go ahead and achieve that so that's where we come into entities okay so for working with entities what you can do is go ahead and create a new entity okay and over here you can say appointment type so this is the entity that we have as appointment type and based on this entity we can define our entities over here so let's say for example um or let's say driving license renewal let's say passport and so on so and you can add other synonyms to this [Music] okay so you can go ahead and have let's say you have a dental service you can go ahead and add another one called [Music] okay so whenever these terms are defined in the conversation or something similar to this dialogflow will automatically identify it as an appointment type and then capture those information so let's go ahead now that we have defined what are our entities just go ahead and click on save okay now once you have saved the entities you'll see that the agent training has started and completed so this is where the machine learning model works behind the scenes now once our entities are defined let's go back to our intents especially the schedule appointment so let's go ahead and rephrase some of these conversations right so i would say set an appointment for at opm okay and then what you can do is 4 pm tomorrow or let's keep this as driving okay and you can come over here highlight this and you can choose your entities over here so here you can choose to say choose this as appointment type okay let's go ahead and save this the same thing goes with uh let's go back to entities click on okay let's save for passport come back over here ask for renewal appointment at 6 pm [Music] and again you can see it has automatically identified the the appointment type right so in this way what has happened is you're able to capture some additional information that you're providing so let's say you're a startup you have different services that you provide and based on those services you would like the user to mention they need a specific appointment for that specific service and based on that it will automatically capture those information which is key for you uh so that you can actually cross verify that information in your backend right so with that being said let's just go ahead and save this and now we've made sure that we've added some to a few training phrases uh depending on the entities the custom entities that we have added but we also have to go here and make sure that this is a required field right so when you click on required you have the ability to create this defined prompts over here you can come in and say what's the prompt for let's say [Music] what service are you looking for and save that so depending on the conversation that you have even if you just say set an appointment it will make sure that it will ask for at what time when do you need this and what kind of service or what services are you looking for okay perfect now with that being said let's actually go ahead and try this out in the simulator on the right hand side set an appointment tomorrow at 4pm what kind of services are you looking for so here you can see that we have provided the date and time right but we haven't provided what a point what's the appointment type so that's the service so what kind of services are you looking for let's say we have capture that information over here you see appointment type is dental service and one of the reasons that you're getting this response is also the fact that we have already created a calendar slot for 4 pm so i wanted to kind of show you guys this so that if you have an existing appointment your chatbot will automatically understand that and say that okay i'm sorry there are no slots available for november 25th 4pm okay so that's simple as entity so entities are basically your own custom keywords or key information that you would like to extract from the user so let's say from a recipe chatbot standpoint you'd like to provide key information to your chatbot let's say i would like to have some hot soup or hot chicken soup so the word chicken can be an entity that you come and create here so you can create entities like non-veg and veg so under non-veg you can have all the non-veg categories so again you're kind of creating categories and which are called entities and these are the entities that we kind of extract over here within our intent okay so i hope entities and intents are very clear for each and every one of you so let's actually move ahead and see how we can actually start integrating this to our calendar now for this account we've already done this so i'll just go ahead and make sure that we follow this step by step so if you go into the fulfillments on your dialogflow console under the left side you have something called as fulfillment so what are fulfillments so fulfillments is a piece of code that actually connects your dialogflow agent to your backend logic right so you need to it's great that you can actually have these conversations uh the way we did in our previous tutorials it was all static responses that we defined uh but if you are having a business you would like to connect your existing back end and fetch information from the back end or there's an api that you like to call and get that information back again and then provide that information back to the user we can do it through fulfillment so fulfillment actually provide you with two options one is web web book so let's say you have your own back end be it php or any other backend server that you have you can go ahead and enable that and provide the backend url that you need to connect it or your web book url so in this case if you don't have that you can directly use google cloud functions so this is called the inline editor if you're not seeing this what you'll by default you'll you will see something like this called disabled you can enable this and the code below that i pasted over here is a custom code i will actually share that after this session in github and i'll provide the links in the description so make sure to subscribe as well as come back to the channel once a video is a live stream is over so that you can get hands on this specific code but we'll also be doing a code walkthrough of what this exactly means and how this is all working together okay so the first thing is you'll have to have this code so we have this code automatically over here let me also make sure that we have this opened up in a code editor so that it's easy for you so this is the actual code so the first thing is when you're looking at cloud cloud functions there's two files to it one is the index.js and the other is the package.js so if you go back to your dialogflow you'll see two files over here so the package.json contains all the dependencies that you need to have so you'll have this by default and for the index.js just copy the code that i have right now and just follow the exact code and you will make sense of what this code actually does behind the scenes so the first thing is you are declaring constants write functions like firebase uh then the second part of the code is we have to enter some key information like your calendar id and service account and then we kind of have to fill in all of this remaining code so when you look at the code you might think there's a lot of information that you need to write but it's not the case i will show you how exactly it is and how easy it is to have this information ready okay so before we come back to the code let's actually go ahead and get some of these information so we need first the calendar id so i'll show you how that's done second we need a service account that we need to create okay and then depending on your time zone you can also set your time zone and the time zone offset values so depending at which part of the world you are you can actually choose the time zone and the remaining part of it is mainly about passing the information for which we will actually come back so the first thing let's go ahead and start enabling the calendar so first thing is we are going to integrate our calendar right so for integrating our calendar the google calendar to our chat bot we need to access that information how do we access that information so luckily we have the google calendar api so the step one that you need to do is go to the top click on this gear icon so this is where you're entering the settings page of your agent and by clicking this url so this is your google cloud project id so as i said in our previous tutorials by default when you're creating a dialogflow project behind the scenes it's also creating a google cloud project so in this case what we have is when you click on this google cloud link it will open up the google cloud platform or the google cloud console make sure if you have multiple accounts just like how i have make sure that you switch to the right account to see the information okay great so now that we are in the google cloud platform console or the google cloud console first thing to do is we need to enable the api so on the navigation menu on the left go to apis and services [Music] go to library and search for [Music] calendar so when you search for google calendar api click on that and for you you'll be seeing something like enable so if you're doing this for the first time if you are enabling this for the first time click on enable so i've already done that so that's why you can see that we have the manage as the option so that's actually step one once you have enabled the google calendar api for your project so again if you have multiple projects in your google cloud platform you can always choose the right project over here so on in this dropdown you can choose that this is the same project id that we have from dialogflow as well so it's all connected and for this project same project id we have enabled the google calendar api which is great so the first step was to enable the google calendar api the second step is once the calendar api is enabled you can go to apis and services and click on credentials okay so here you can click on credentials and on the top you can click on create credentials set up service account and add this information over here so the information that you add is let's say you can type in something like appointment scheduler okay once you have created the appointment scheduler so for this instance i'm just gonna create another one okay i call it the appointments calendar demo or i can just call it two but in your case make sure that you put appointment scheduler hit create you can choose the role that you want to provide for the service account so what is this service account and why do we need this so think about service account as when you're accessing the google cloud platform you're accessing it under your account your google account and if you have a teammate you will go to this iam production uh feature set and you'll add his email up on his or her email account and give them permissions like project viewer owner and stuff so depending on the different services that google cloud provides you can limit the specific role for that to that account so the service account is in a way creating like a user account for your project that this service account has access to different components or features of your google cloud platform right so you can choose something like project owner or project editor which will so which will basically have access to most of the features within your google cloud project so you can actually go ahead and do that choose editor or owner hit continue in fact this is actually not required but i wanted to kind of show you this because in the future if you're looking to create service account and you want to kind of add different permissions you can actually do that and finally you can just click on done once the service accounts are created what you can do is you can actually go ahead and so for example if you have created a service account like appointment scheduler this is already created over here right so the other way that you can also see this is click on the navigation menu go to iam and admin okay click on that and over here we have service accounts so click on service accounts and when you come to this service account over here so let's look at the appointment scheduler so this i've already created a key and for how do you create a new one so if you are if you have type appointment scheduler as your service account name you will click on here and click create key so i'll just show with the demo right now which we created just right now so click on create key and this would automatically generate a json file so click on that json click on the option as json and then create this key so again this is a private key which you shouldn't be sharing it with anyone for the purpose of demo i'm showing this information and with that being said let's actually go ahead and open this information and see what this looks like okay so when you open that file you'll find your project id over here you have different private key id private key client email client id and so on right so the first thing that you need to do is copy this client email id and i will show you why we need this okay so from the google cloud console standpoint we are pretty much done in terms of the service account and let's go back to our calendar okay i'm gonna delete all of this okay so what you can do over here is let me remove that calendar as well so the first thing that you need to do is when you go to your calendar.google.com with the same account that you have created go to other calendars and click on the plus icon and next click on create new calendar once the calendar is created give it a name so let's call this okay and give it a description the time zone i'm choosing based on the time zone that i'm in right now so that's by default and create the calendar so once the calendar is created we still need to do some additional steps okay here you can see appointment calendar successfully created so you can click on that if you come down you will see something called as share with specific people so over here click on add and share with specific people in this section you copy the email address that you got from your appointment scheduler so that from your service account json file so this is the json file that we create we created and we downloaded onto our system so copy this key information called client underscore email and copy the same thing back into your calendar settings so under share with specific people add this same email address okay so in this case i will also go ahead and add the one that i already had okay let's actually try to try this directly from here and under permissions make sure that you have something called as make changes to events so this would allow this specific email address to make changes to your calendar on your behalf okay okay so just go ahead and click send [Music] so now that that's done so that's all you need to do from the the calendar standpoint so you have all the other uh options that you'd like you can explore but for now from a chatbot standpoint we have basically done this so again once again i said i'll repeat if you go into your calendar click on other calendars and add a new calendar and call it the appointment calendar once the appointment calendar is created click on it and click settings and sharing and scroll down make sure that share with specific people add a new account and copy the same information that you have from your previous one okay okay so that's step one in terms of the calendar setup so the next one that we'll have to do is now that our calendar is all set let's actually go back to dialogflow and see go to fulfillments okay so under fulfillments you need something called as your calendar id so where do we get the calendar id from so go back to your calendar settings again if you scroll down to the very bottom you have an option called as integrate calendar and within integrate calendar you have this information so copy this entire information from here and place it under calendar id okay and for the service account when you find service account all this information is basically the same information that you got from your json file so let's go back to the json file so copy this entire thing and paste this over here okay so our calendar id is again under the calendar settings come to the very bottom you'll find calendar id information over here copy this entire information and paste it into this constant and then for the service account copy the entire json file content that we downloaded as part of the creating a key for the service account and we have that information okay so what are the next information that we need to set up so over here you can see set up google calendar service account credentials which we've already done uh over here next is the time zone and time zone offset so highly recommend that you guys give your own time zone and time zone offset and finally let's actually understand the code so this is the main dialogflow app object to handle the http post request and response so whenever we are having a conversation with the chatbot the in terms of the flow once the fulfillment is enabled per intent so the way how it works is this so we have dialog flow we have the conv dialogflow agent actually handling the entire conversation between the user and the chatbot so whenever the conversation happens dialogflow will first understand what is the intent of the user if the intent of the user is schedule an appointment it will then take it to schedule an appointment intent once it comes over there all the information that is uh all the data in the form of we are capturing key information like entities date time all of those information is passed to dialogflow in the form of a http request and response right so whenever you have a conversation based on per intent every intent once you make sure that your dialog flow fulfillment is enabled for that specific intent it will always pass that information to the fulfill fulfillment right so going back to the fulfillment so based on every conversation turn it will come over here to this fulfillment and the request will have all the parameters that's required uh as part of the query now again the next line you can see we are creating an agent web client with the request and response now this agent will have parameters so here you can see we have agent.parameters and agent.parameters.date will basically have the date information that we have and agentparameters.time is the information that we have in terms of our time data right so if you look at this specific function called make appointment all i'm doing over here is basically constructing the entire code to basically have the same a time format or date time format so we are having the start time so because we are just saying 9 pm or 10 pm so based on the date time start we are just passing this information formatting the date basically capturing the date the first part of the date followed by the time and then appending it together so basically combining the date and time together the next part of it is again you're just logging these information i will also show you how to actually see the data behind the scenes in this tutorial and date time end is basically setting from the time that is provided by the user we'll extend it to 1r okay and the appointment time string again there's a date format that's being captured and finally return calend create calendar event now this create calendar event function basically captures the start time and time and the appointment type so over here you can see for the appointment type i have provided something as general so we are still not capturing the appointment type directly from the conversation as of now this is static and based on this create calendar event this will actually create the entire appointment or event in your calendar and based on that it will return back whether it's available or if it is already booked you'll see an exception called as agent.add basically is the conversation which will actually send it back to our agent or our chatbot so this is the prompt that you will see finally when you are interacting with the chatbot so that's all it does behind the scenes this is what is happening now you might ask where is the code which is actually handling the intent how do we know that this function is actually going to that specific intent so that's basically handled over here so handle the dialogflow intent name called schedule appointment so here we are creating an intent map and based on that we are providing the name of the intent so as you have seen when under our intents we have something called a schedule appointment is the intent that we created and then this make appointment is basically having all the information right okay so that's basically it let's go ahead and um so once you have done this go and click on deploy so this is very key so this deployment actually takes some time so go ahead and click on deploy [Music] once again for people who are joining us for the very first time i would highly appreciate if you hit the like button as well as subscribe to the channel for future videos so we'll be doing these live streams every week every tuesday where we'll be kind of starting from the basics to tree level and kind of expand to the more advanced sessions just going through the chat at this point as well so hi krishna hi muhammad sadam so welcome so muhammad is joining us from india so muhammad's question is what do we actually use in the back in python or node.js that is completely up to you so here we are using node.js as part of the google cloud functions the default inline editor provides you with node.js but if you have something your own backend you can always go ahead and enable the web book provide the url and you can do all the data passing that you're seeing over here directly over there okay and again you can go through the documentation for each of these what are the requirements for the web book how to call what the default response or the raw response would look like so you can pass this information and then display it back to the user so everything is actually available in the documentation we'll also be doing different kinds of back-end connection and connecting to the database we'll also be looking at account linking in the in some of the videos as well so i highly encourage that you guys go through the first two sessions on creating chatbots and integration with chatbots and in this session we are learning about how you can call external apis and integrate your backend or business logic and also integrate with the google calendar so we have darshan virag rex from doha thank you all for joining today's session so let's go back and let's see if our deployment is complete yes our deployment is right now complete so once our deployment is completed let's actually go ahead and see if our chatbot is working at this point so the first thing you do is type in and check so what kind of services are you looking for let's say dental perfect so here you can see okay let me see if if we can fit you in november 25th 4 pm is fine so let's go back to our calendar and see if that data has actually come through so click on 25th click on the appointment calendar there you go so general appointment on 25th between 4 to 5 pm is automatically created okay now this is a general appointment right because in our web book if you go back to the code or let me actually go back here to kind of so if you actually go back to the code under the appointment type we've just put as general right so this is the information it just it gets passed on through the other functions now how can we actually go ahead and make sure that we capture the exact value so the reason why i did it like this is so that you understand how we kind of capture information so go back into your code or your fulfillment let's go to the part where we have the constant call appointment type so here what you can do is have the information as this so we type in agent dot so you your agent your chatbot agent has parameters called the appointment type okay so let's go ahead and actually save this information because right now you can see that the calendar is actually creating something called as general because that was the static value that we defined and now we would like to actually get that dynamic value that we are having so whenever i say dental service it should basically come to the calendar and say dental service appointment 4 to 5 pm right so let's see how this works right now so go ahead and click on deploy also let me know in the chat window that whatever what is the next sessions for the upcoming sessions what you would like to see i'll be more than happy to go through that and see how we can actually go through a journey of actually taking this simple chatbot concept and adding more and more feature sets to it [Music] if you have any questions or queries feel free to connect with me on twitter my twitter handle is sachin underscore atk and i would also highly encourage that if you have any questions or queries leave it in the comment section below or directly send me a direct message on twitter so while the deployment is actually happening we can actually go ahead and see if our chatbot is actually working well through some of the other integrations that we did so this is a html or a web integration that we did in the very first session with the same chatbot agent so let's say hello set an appointment for today at 9 00 pm let's see it today what kind of services are you looking for i would say passport renewal okay let me see if we can fit you in number 24 9 pm is fine so let's go back to our calendar on the 24th let's click on that and you can see that we have 9 to 10 p.m passport renewal appointment automatically create now the key information that you need to understand is before it was general appointment and now we are actually capturing the information right what kind of service so we are capturing that our entities over here so our entity is passport renewal appointment 9 to 10. okay so with that i think we've come kind of completed the entire thing in terms of the chatbot how you can easily use fulfillments or web books and use the google cloud functions to integrate your chatbot through external apis and then directly integrate it to your calendar now since we have integrated this entire thing to our calendar and which is working fine let's actually go ahead and try out some of the integrations options that we already had and see if it's working in those options so the first thing is uh we did the messenger bot so let's try that right now so again for people who are joining us uh for the first time this is something that we did in our previous tutorials so you can definitely check those out so this is your own messenger chatbot that you can actually create and i would say hello oh hi appointment let me try something that we have not mentioned so passport renewal at 6 00 pm on thursday right so this information is definitely not there in our training phase let's see how a chatbot is able to handle that so it has gone through it says okay let me see if i can fit you in number 26 so it has automatically understood that thursday meant 26th of november 6 pm is fine so let's go back to our calendar go to 26th and you can see that we are able to extract our entity and then six to seven appointment is set let's also see if i can if we do the same thing again so passport renewal at 6 15 pm so let's see what happens when we do this on thursday [Music] so here you can see that since we already had an appointment at six to seven so that time slot is already fixed so your chat box basically says i'm sorry there are no slots available for number 26 at 6 p.m perfect so we have a fully integrated calendar chatbot which sets your appointment so this is a fully i would say this is a completely integrated chatbot or which basically handles appointment scheduling so you can actually use this into your own websites into your own services be it facebook messenger whatsapp be it any other integrations that we have tried in our previous tutorials since we have some more time let's actually go ahead and see if we can actually do the same thing directly via call so i'm gonna go ahead and enable the dialogflow phone gateway and let's actually try this out directly on my phone and see if it's still able to do it through the phone so the first thing is let me tell the number in the meanwhile leave your comments and queries in the chat section and even after the video if you have something that you need to convey leave it in the comment section uh this video will be recorded and again published in youtube six one seven three nine eight zero nine four two greetings i can help you set up an appointment and also help you get information uh set an appointment tomorrow at 2 pm what kind of services are you looking for i i'm actually looking for the dental service okay let me see if we can see you in november 25th okay so we have this successfully created let's go to our okay let's cancel this one let's go to our calendar so here you can see even through the phone we were able to handle the entire uh appointment scheduling right so this is actually a pretty cool way and this is how powerful dialogflow is it's an excellent tool to actually create your own or design your conversations and based on that integrate with multiple apis your own backend as well as other platforms so with that being said once again thank you all for joining for today's live session and see you all in the next one stay safe and take care

Channel: TECH WITH SACH

Views: 3,523

Rating: 4.7948718 out of 5

Keywords: Connect Chatbot To Backend - Dialogflow Fulfillment - Ultimate Chatbot Tutorial, Dialogflow Fulfillment, Connect chatbot to backend, dialogflow chatbot, dialogflow chatbot nodejs, Integrate chatbot to your Google Calendar, integrate calendar to your chatbot, connect APIs to a chatbot, create a chatbot from scratch using Dialogflow, dialogflow cloud functions, chatbot tutorial, dialogflow tutorial, intents and entities in dialogflow, chatbot tutorial for beginners, chat bot, course

Id: 8ao93nfjeSo

Length: 58min 30sec (3510 seconds)

Published: Tue Nov 24 2020