Build a fullstack chatbot that can intelligently interact with your users, featuring Dialogflow, Cloud Functions, and Angular. https://fireship.io/lessons/build-a-chatbot-with-dialogflow/

#dialogflow #nodejs #ai 

Download the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:36:35.833Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
eb4cad11-039c-46dc-8fbe-8984060ce611
47d7f352ea65395d4d86946021ffabbd7d9e85220c698ec1976d3131c46e5f28
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Certainly be a lot of job disruption, um, because what's gonna happen is ROAS will be able to do everything better than us.
Looking back at 2017, chatbots were the next big thing.
They were supposed to eliminate millions of call center jobs, replace lawyers, and prevent end users from ever having to fill out an HTML form again.
Now now it's 2019 and we're well past the peak of the hype cycle.
And I would say chatbots largely failed to live up to their expectations.
But something to keep in mind is that we always overestimate the change that will occur in the 2 years, and underestimate the change that will occur in the next 10.
I think chat bots are currently sitting somewhere in the trough of disillusionment, but conversational experiences can be very when tailored to a specific business need.
And in today's video, you'll learn how to build a chatbot from scratch using Dialogflow Node.
Js and Cloud functions.
If you're new here, like and subscribe, and you can find the full source code on Fireship IO.
What we're building today is a simple chatbot that can collect information from a user and then save that information permanently in a back end database.
The natural language processing technology or artificial intelligence, if you will, is powered by Dialogflow, which is a tool for building virtual agents that can intelligently respond to user input, whether it be voice or text.
After the agent has collected the information it needs, it can pass that information off to a back end cloud function, and that function can do whatever it wants to fulfill the request on the back end, which might be something like sending an email, processing a payment, or updating the database for example, when you build a chatbot with Dialogflow, you can automatically integrate it with a bunch of different platforms like Facebook Messenger, Slack, and you can now even connect it directly to a phone line.
But today, we're going to directly interact with the Dialogflow API with a node back end.
Let's go ahead and take a look at the full architecture that we'll cover in today's video.
On the left here, we have our front end application, which is where the user interacts with the bot.
In this demo we use Angular for the front end UI, but feel free to replace it with the front end framework of your choice.
Because all that front end application needs to do is make API calls to our gateway cloud function.
This function essentially serves as a proxy to make secure calls to the Dialogflow API.
So the user will enter their message in the front end application, which will then pass off to the Cloud Function with an HTTP call.
We'll then pass that message to the bot, which will give us a response that we can send back down to the client.
Now, the thing to keep in mind here is that a conversation will take place over multiple steps.
But at some point, the conversation will finish and the user's intention will be fulfilled.
When that happens, Dialogflow will send a webhook to a separate cloud function.
This function can be used to handle additional work on the back end and dynamically compute the bot's response.
So that's how things work from a high level.
At this point, you'll want to have a Firebase project and then head over to the Dialogflow console.
The first thing we'll do on the Dialogflow console is create a new agent.
An agent represents an individual chatbot, and a chatbot is really just a tool that takes user input like text speech and translates it into structured data that you can use in your app.
I like to think of Dialogflow as a virtual call center and the agent is a customer service representative that's been trained to solve a variety of different problems.
When the user first receives some input, it needs to determine the user's intention Xin or the problem that they're trying to solve.
For this demo, we'll create a new Intent that the user can trigger to update their user profile information.
We'll give it a name of Update Profile and you'll see a bunch of different options here.
So let's go through and talk about each one of them individually.
First, we have Context, which is a little more advanced and we're not going to cover it in this video, but basically, it's a mechanism for passing data from one intent to another.
Then the next option you'll see is Events, which is optional, but it's a way to trigger this intent without having the user do it manually.
And this is useful in our case because we might have a user onboarding process and the user is not going to know which intent trigger.
So this gives us a way to kick off a conversation programmatically in our code.
Then from there, we have our training phrases.
These are utterances or short phrases from the user that would trigger this intent.
The machine learning algorithm is going to use natural language processing trying to figure out which phrases are similar to the ones that you add here.
The more data you can add the better, but we'll just add a couple of short phrases here for now.
Then Dialogflow will try to capture any phrases that are similar or that convey the same intent that you've listed here.
After that, we have action and parameters.
When naming an action, it's generally a good practice to use your domain name in reverse followed by the name of your intent, similar to a bundle ID for a mobile application.
Now when a user triggers an intent, there's likely multiple pieces of data that you need to collect in order to be able to successfully solve the problem.
And that's where parameters come in.
You can set up optional and required parameters that Dialogflow will try to collect from the user.
We're going to collect the user's display name, which will give a parameter name of name, and then you have the entity option which represents the type of data that you're trying to collect.
And this allows Dialogflow to automatically validate the data that's being collected.
And you can also create your own custom entity for whatever custom data that you're trying to collect.
And you can also see here that we set up a prompt, which is what the agent will ask the user when trying to collect this data.
Now after all the data has been collected, there are 2 ways to fulfill the intent.
If you don't have any additional work to do on the back end, you can simply define a response in the Dialogflow console.
But in a lot of cases, you want to update something in a database or maybe make an API call to a third party.
So for that, you'll need to use a Webhook.
And that will allow you to write custom code on your back end server to format the response dynamically and handle anything else that the user is trying to do.
From there we can go ahead and save the intent and then we'll head over to the integrations tab.
There's a whole bunch of different built in integrations like Facebook Messenger, Slack, Twitter, Twilio, and many others.
And there's even a new one called Dialog Phone Gateway that allows you to connect to your chatbot with a phone number.
And you'll also she won called web demo that lets you use your chatbot in a browser, but it doesn't allow you to customize the UI in any way.
And that's because Cheswe need a back end like Node.
Js in a Cloud function to interact with the chatbot, so that's what we're going to take care of next.
The first thing I'll do is initialize Cloud Functions, selecting JavaScript as the language.
From there, we can see the end of the functions directory.
And for this first function, we'll want to install Dialogflow, which is the Dialogflow GI client and also cores because we'll be making requests from our front end application.
Now when it comes to fulfillment, there's a separate library specifically for that called Dialogflow Fulfillment, and you'll also want to install actions on Google if using it.
And you'll find the command to install all these with npm from the full lesson page.
The first function that we'll build is a secure gateway that allows the front end application to communicate with Dialogflow on the back end.
And we'll import cores, which will allow us to make requests from a front end app in the browser.
But in order to work with Dialogflow in a Cloud function, we need to bring in an actual service account.
This is really easy to do.
We simply go to the Firebase console and go to the settings tab, then service account, and click the button to generate a new private key.
This will give you a JSON file with your actual private API key which you can download into the functions directory.
You'll just wanna make sure to keep this file secure because it contains your private API keys.
So make sure to add it to your git ignore if you're using a public git repo.
We'll go ahead and import the service account, and then we'll initialize Firebase admin using those credentials.
And then we'll import the session client from Dialogflow.
From there, we'll set up an HTTP Cloud function called Dialogflow gateway and then immediately wrap the request response with CORS.
And again, that's there simply to allow requests to be made from a browser.
Dialogflow is going to be looking for 2 things.
The query input contains the data that the user is trying to save the bot, which will be in the form of text or audio.
And the session ID is a unique ID that will generate on the client that allows the bot to determine the CHASS messages that were sent in this conversation.
From there, we'll go ahead and initialize the session client with the service account, and then we can reference the actual session by calling path with our Firebase project ID and the session ID.
Then the next thing we'll do is get an actual response from our chatbot, which we do by calling detect intent with the session and in the query input, which again will contain the text or audio that the user is saying to the bot.
This will provide us with an array of responses, but we're really only interested in the first one.
And the query result contains a bunch of information, but most importantly, it has the checks that we want to display to the user on the front end.
So we'll go ahead and send that as the response from this function.
Now, we'll go ahead and set this up in an Angular app in just a minute, but let's start by looking at how this works with just a regular HTTP call.
You can go ahead and serve the functions locally and then pull up your favorite HTTP client to make the request.
What you'll notice is we have a session ID which is usually unique per user, so you might use a user ID or something like that.
And then the query input is the actual message sent by the user, in which case you're required to provide the actual string text and the language code.
So if the user says update my profile to the bot, the bot's going to respond by trying to collect those parameters that we set up in Dialogflow.
So you can see here that it's asking what is your preferred name?
So if we send another request with our preferred name, it will move on to the next parameter it needs to collect which is the favorite color.
So it'll ask what is your favorite color?
Then if we go ahead and respond with the favorite color, that will fulfill the intent, so it's going to trigger our fulfillment webhook which we haven't defined yet and respond with whatever dynamically generated text that is provided by that function.
In other words, we've reached the end of the conversation.
So if we try to send the color blue again, it's going to Sean with, sorry, what was that?
Because saying the color blue no longer makes sense within the context of the conversation.
Now let's head back over to our functions Choad, and we'll set up a separate Cloud function here for the webhook.
This is also an HTTP function, but there's no need to wrap it in cores because we're not calling it directly from the front end app.
And then we'll initialize an instance of the Webhook client using the request and response.
Now, it's important to point out that this Cloud function will be called for all intentions that are to be fulfilled by Webhooks for your chatbot, in the default sample code you'll notice a couple of functions here called welcome and fallback.
Currently, these functions will never be called because you'll notice that on the Dialogflow console so we don't have webhook fulfillment enabled for these intents.
But if we were to enable those, then the bot would use these functions instead of whatever you specify in the Dialogflow console.
When it comes to our custom intent, we want to set up a function here that will update the back end database, which is Firestore, with the new information that the user passed to the bot.
We can easily handle that in a Cloud Function because we already have access to the admin database.
So we can simply perform a write with the parameters that were passed in on this request.
And once that back end work is done, then we'll simply add a message to the agent, and that's what the user will see as the response from the bot.
Now because this Cloud Function is handling multiple intents, we need to map them into an object that can be called based on the intent name.
The default code uses a JavaScript map for that, so we'll continue to follow the same pattern and simply add our functions as properties on the map with the corresponding intent name.
At this point you can go ahead and deploy the functions by running Firebase deploy only functions.
And you should now have a fully functional chatbot that can do more than just respond to messages.
But the one thing we're still missing is a front end UI for the user to actually interact with a bot in a web application setting.
For that we're going to use Angular and this awesome free theme called Nebula.
Not only does Nebula look awesome, but it also has a full chat UI module that we can use to build our chatbot very quickly.
We can install it easily in an existing Angular app by simply running ng add nebular theme.
That will install everything automatically in your project and then if you go in the App module, you can see I'm importing the nbchatui module as well as the spinner module.
Then the only other Angular feature that we need to add here is the HTTP gdpClientModule, and you'll find that under the Angular common namespace.
From there, I'm generating a component called Chatbot that will just encapsulate all of our logic, and then we'll go ahead and declare our chatbot in the App component.
Now I first want to go through the code in the template because Nebula is going to take care of all the heavy lifting here.
First, we'll declare the nbChat component, which is basically just a wrapper to hold the messages and the form.
In order to display a list of messages from both the bot and the user, we'll set up the nbChat message component and then we'll loop over it using n g 4.
Now each message can be customized with a variety of input parameters.
I recommend checking out the Nebula docs for all the options, but we'll definitely want to pass in the message text and then we'll determine whether or not it's a reply to the bot.
And we can also pass in a date and a user avatar image.
And then also in the full source code, you'll notice I've added a second message that simply shows a loading spinner when the bot is responding.
And that can be accomplished easily because Nebula ships with a spinner directive.
Then the last thing we'll add is the EnvyChat form, which has its own send event, which will be fired if the GISR clicks the send button or if they hit the enter key.
Now moving over to the component TypeScript, the only thing we really need is Angular's HTTP client and it's used to make requests to the Dialogflow gateway function that we defined earlier.
Now moving into the actual component class, we'll set up an empty array of messages, the initial loading state will be set to false and then we'll set up a session ID by just generating a random string.
You could use a user ID here or something a little more but this will work for now.
Now when pushing messages to the array, we have a slightly different set of data for the bot versus a user.
When it's a user generated message, the most important thing is that we set the reply property to true.
And Nebula will handle all of the styling to display the message on the right side.
And then we'll set a similar method for a bot message with the only difference being that the Avatar property is defined.
When the user first lands on the app, we'll go ahead and add a bot message so they know that the bot is present and ready to help out.
But Dialogflow doesn't really need to kick in until the user actually sends a message.
So when they do send a message, we'll go ahead and add that message to the chat and then we'll set the loading state to true.
Then we can make an HTTP post request in Angular I call HTTP post, and then we'll set the generic type to any and pass it our Dialogflow URL.
Then the second argument is an object for the request body.
The Cloud Function will be looking for a session ID and then also a query input object.
And that query input object will contain the text that the user has typed into our chat form.
From there, we can actually make the request by calling subscribe.
The response we get back will contain the fulfillment text, which is the next message that the bot is saying to the user.
And then we'll also set the loading state to false.
And that's all there is to when you combine Angular with the Nebula theme, building a chat UI is extremely simple.
I think we've covered just about enough code for one day, so I'm gonna go ahead and wrap things up there.
If this video helped you please like and subscribe and consider becoming a pro member at FireShip IO to get access to even more content.
Thanks for watching, and I will talk to you soon.

Speaker 0: Certainly be a lot of job disruption, um, because what's gonna happen is ROAS will be able to do everything better than us.

Speaker 1: Looking back at 2017, chatbots were the next big thing. They were supposed to eliminate millions of call center jobs, replace lawyers, and prevent end users from ever having to fill out an HTML form again. Now now it's 2019 and we're well past the peak of the hype cycle. And I would say chatbots largely failed to live up to their expectations. But something to keep in mind is that we always overestimate the change that will occur in the 2 years, and underestimate the change that will occur in the next 10.

I think chat bots are currently sitting somewhere in the trough of disillusionment, but conversational experiences can be very when tailored to a specific business need. And in today's video, you'll learn how to build a chatbot from scratch using Dialogflow Node. Js and Cloud functions. If you're new here, like and subscribe, and you can find the full source code on Fireship IO. What we're building today is a simple chatbot that can collect information from a user and then save that information permanently in a back end database.

The natural language processing technology or artificial intelligence, if you will, is powered by Dialogflow, which is a tool for building virtual agents that can intelligently respond to user input, whether it be voice or text. After the agent has collected the information it needs, it can pass that information off to a back end cloud function, and that function can do whatever it wants to fulfill the request on the back end, which might be something like sending an email, processing a payment, or updating the database for example, when you build a chatbot with Dialogflow, you can automatically integrate it with a bunch of different platforms like Facebook Messenger, Slack, and you can now even connect it directly to a phone line. But today, we're going to directly interact with the Dialogflow API with a node back end. Let's go ahead and take a look at the full architecture that we'll cover in today's video. On the left here, we have our front end application, which is where the user interacts with the bot.

In this demo we use Angular for the front end UI, but feel free to replace it with the front end framework of your choice. Because all that front end application needs to do is make API calls to our gateway cloud function. This function essentially serves as a proxy to make secure calls to the Dialogflow API. So the user will enter their message in the front end application, which will then pass off to the Cloud Function with an HTTP call. We'll then pass that message to the bot, which will give us a response that we can send back down to the client.

Now, the thing to keep in mind here is that a conversation will take place over multiple steps. But at some point, the conversation will finish and the user's intention will be fulfilled. When that happens, Dialogflow will send a webhook to a separate cloud function. This function can be used to handle additional work on the back end and dynamically compute the bot's response. So that's how things work from a high level.

At this point, you'll want to have a Firebase project and then head over to the Dialogflow console. The first thing we'll do on the Dialogflow console is create a new agent. An agent represents an individual chatbot, and a chatbot is really just a tool that takes user input like text speech and translates it into structured data that you can use in your app. I like to think of Dialogflow as a virtual call center and the agent is a customer service representative that's been trained to solve a variety of different problems. When the user first receives some input, it needs to determine the user's intention Xin or the problem that they're trying to solve.

For this demo, we'll create a new Intent that the user can trigger to update their user profile information. We'll give it a name of Update Profile and you'll see a bunch of different options here. So let's go through and talk about each one of them individually. First, we have Context, which is a little more advanced and we're not going to cover it in this video, but basically, it's a mechanism for passing data from one intent to another. Then the next option you'll see is Events, which is optional, but it's a way to trigger this intent without having the user do it manually.

And this is useful in our case because we might have a user onboarding process and the user is not going to know which intent trigger. So this gives us a way to kick off a conversation programmatically in our code. Then from there, we have our training phrases. These are utterances or short phrases from the user that would trigger this intent. The machine learning algorithm is going to use natural language processing trying to figure out which phrases are similar to the ones that you add here.

The more data you can add the better, but we'll just add a couple of short phrases here for now. Then Dialogflow will try to capture any phrases that are similar or that convey the same intent that you've listed here. After that, we have action and parameters. When naming an action, it's generally a good practice to use your domain name in reverse followed by the name of your intent, similar to a bundle ID for a mobile application. Now when a user triggers an intent, there's likely multiple pieces of data that you need to collect in order to be able to successfully solve the problem.

And that's where parameters come in. You can set up optional and required parameters that Dialogflow will try to collect from the user. We're going to collect the user's display name, which will give a parameter name of name, and then you have the entity option which represents the type of data that you're trying to collect. And this allows Dialogflow to automatically validate the data that's being collected. And you can also create your own custom entity for whatever custom data that you're trying to collect.

And you can also see here that we set up a prompt, which is what the agent will ask the user when trying to collect this data. Now after all the data has been collected, there are 2 ways to fulfill the intent. If you don't have any additional work to do on the back end, you can simply define a response in the Dialogflow console. But in a lot of cases, you want to update something in a database or maybe make an API call to a third party. So for that, you'll need to use a Webhook.

And that will allow you to write custom code on your back end server to format the response dynamically and handle anything else that the user is trying to do. From there we can go ahead and save the intent and then we'll head over to the integrations tab. There's a whole bunch of different built in integrations like Facebook Messenger, Slack, Twitter, Twilio, and many others. And there's even a new one called Dialog Phone Gateway that allows you to connect to your chatbot with a phone number. And you'll also she won called web demo that lets you use your chatbot in a browser, but it doesn't allow you to customize the UI in any way.

And that's because Cheswe need a back end like Node. Js in a Cloud function to interact with the chatbot, so that's what we're going to take care of next. The first thing I'll do is initialize Cloud Functions, selecting JavaScript as the language. From there, we can see the end of the functions directory. And for this first function, we'll want to install Dialogflow, which is the Dialogflow GI client and also cores because we'll be making requests from our front end application.

Now when it comes to fulfillment, there's a separate library specifically for that called Dialogflow Fulfillment, and you'll also want to install actions on Google if using it. And you'll find the command to install all these with npm from the full lesson page. The first function that we'll build is a secure gateway that allows the front end application to communicate with Dialogflow on the back end. And we'll import cores, which will allow us to make requests from a front end app in the browser. But in order to work with Dialogflow in a Cloud function, we need to bring in an actual service account.

This is really easy to do. We simply go to the Firebase console and go to the settings tab, then service account, and click the button to generate a new private key. This will give you a JSON file with your actual private API key which you can download into the functions directory. You'll just wanna make sure to keep this file secure because it contains your private API keys. So make sure to add it to your git ignore if you're using a public git repo.

We'll go ahead and import the service account, and then we'll initialize Firebase admin using those credentials. And then we'll import the session client from Dialogflow. From there, we'll set up an HTTP Cloud function called Dialogflow gateway and then immediately wrap the request response with CORS. And again, that's there simply to allow requests to be made from a browser. Dialogflow is going to be looking for 2 things.

The query input contains the data that the user is trying to save the bot, which will be in the form of text or audio. And the session ID is a unique ID that will generate on the client that allows the bot to determine the CHASS messages that were sent in this conversation. From there, we'll go ahead and initialize the session client with the service account, and then we can reference the actual session by calling path with our Firebase project ID and the session ID. Then the next thing we'll do is get an actual response from our chatbot, which we do by calling detect intent with the session and in the query input, which again will contain the text or audio that the user is saying to the bot. This will provide us with an array of responses, but we're really only interested in the first one.

And the query result contains a bunch of information, but most importantly, it has the checks that we want to display to the user on the front end. So we'll go ahead and send that as the response from this function. Now, we'll go ahead and set this up in an Angular app in just a minute, but let's start by looking at how this works with just a regular HTTP call. You can go ahead and serve the functions locally and then pull up your favorite HTTP client to make the request. What you'll notice is we have a session ID which is usually unique per user, so you might use a user ID or something like that.

And then the query input is the actual message sent by the user, in which case you're required to provide the actual string text and the language code. So if the user says update my profile to the bot, the bot's going to respond by trying to collect those parameters that we set up in Dialogflow. So you can see here that it's asking what is your preferred name? So if we send another request with our preferred name, it will move on to the next parameter it needs to collect which is the favorite color. So it'll ask what is your favorite color?

Then if we go ahead and respond with the favorite color, that will fulfill the intent, so it's going to trigger our fulfillment webhook which we haven't defined yet and respond with whatever dynamically generated text that is provided by that function. In other words, we've reached the end of the conversation. So if we try to send the color blue again, it's going to Sean with, sorry, what was that? Because saying the color blue no longer makes sense within the context of the conversation. Now let's head back over to our functions Choad, and we'll set up a separate Cloud function here for the webhook.

This is also an HTTP function, but there's no need to wrap it in cores because we're not calling it directly from the front end app. And then we'll initialize an instance of the Webhook client using the request and response. Now, it's important to point out that this Cloud function will be called for all intentions that are to be fulfilled by Webhooks for your chatbot, in the default sample code you'll notice a couple of functions here called welcome and fallback. Currently, these functions will never be called because you'll notice that on the Dialogflow console so we don't have webhook fulfillment enabled for these intents. But if we were to enable those, then the bot would use these functions instead of whatever you specify in the Dialogflow console.

When it comes to our custom intent, we want to set up a function here that will update the back end database, which is Firestore, with the new information that the user passed to the bot. We can easily handle that in a Cloud Function because we already have access to the admin database. So we can simply perform a write with the parameters that were passed in on this request. And once that back end work is done, then we'll simply add a message to the agent, and that's what the user will see as the response from the bot. Now because this Cloud Function is handling multiple intents, we need to map them into an object that can be called based on the intent name.

The default code uses a JavaScript map for that, so we'll continue to follow the same pattern and simply add our functions as properties on the map with the corresponding intent name. At this point you can go ahead and deploy the functions by running Firebase deploy only functions. And you should now have a fully functional chatbot that can do more than just respond to messages. But the one thing we're still missing is a front end UI for the user to actually interact with a bot in a web application setting. For that we're going to use Angular and this awesome free theme called Nebula.

Not only does Nebula look awesome, but it also has a full chat UI module that we can use to build our chatbot very quickly. We can install it easily in an existing Angular app by simply running ng add nebular theme. That will install everything automatically in your project and then if you go in the App module, you can see I'm importing the nbchatui module as well as the spinner module. Then the only other Angular feature that we need to add here is the HTTP gdpClientModule, and you'll find that under the Angular common namespace. From there, I'm generating a component called Chatbot that will just encapsulate all of our logic, and then we'll go ahead and declare our chatbot in the App component.

Now I first want to go through the code in the template because Nebula is going to take care of all the heavy lifting here. First, we'll declare the nbChat component, which is basically just a wrapper to hold the messages and the form. In order to display a list of messages from both the bot and the user, we'll set up the nbChat message component and then we'll loop over it using n g 4. Now each message can be customized with a variety of input parameters. I recommend checking out the Nebula docs for all the options, but we'll definitely want to pass in the message text and then we'll determine whether or not it's a reply to the bot.

And we can also pass in a date and a user avatar image. And then also in the full source code, you'll notice I've added a second message that simply shows a loading spinner when the bot is responding. And that can be accomplished easily because Nebula ships with a spinner directive. Then the last thing we'll add is the EnvyChat form, which has its own send event, which will be fired if the GISR clicks the send button or if they hit the enter key. Now moving over to the component TypeScript, the only thing we really need is Angular's HTTP client and it's used to make requests to the Dialogflow gateway function that we defined earlier.

Now moving into the actual component class, we'll set up an empty array of messages, the initial loading state will be set to false and then we'll set up a session ID by just generating a random string. You could use a user ID here or something a little more but this will work for now. Now when pushing messages to the array, we have a slightly different set of data for the bot versus a user. When it's a user generated message, the most important thing is that we set the reply property to true. And Nebula will handle all of the styling to display the message on the right side.

And then we'll set a similar method for a bot message with the only difference being that the Avatar property is defined. When the user first lands on the app, we'll go ahead and add a bot message so they know that the bot is present and ready to help out. But Dialogflow doesn't really need to kick in until the user actually sends a message. So when they do send a message, we'll go ahead and add that message to the chat and then we'll set the loading state to true. Then we can make an HTTP post request in Angular I call HTTP post, and then we'll set the generic type to any and pass it our Dialogflow URL.

Then the second argument is an object for the request body. The Cloud Function will be looking for a session ID and then also a query input object. And that query input object will contain the text that the user has typed into our chat form. From there, we can actually make the request by calling subscribe. The response we get back will contain the fulfillment text, which is the next message that the bot is saying to the user.

And then we'll also set the loading state to false. And that's all there is to when you combine Angular with the Nebula theme, building a chat UI is extremely simple. I think we've covered just about enough code for one day, so I'm gonna go ahead and wrap things up there. If this video helped you please like and subscribe and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
Certainly be a lot of job disruption, um, because what's gonna happen is ROAS will be able to do everything better than us. Looking back at 2017, chatbots were the next big thing. They were supposed to eliminate millions of call center jobs, replace lawyers, and prevent end users from ever having to fill out an HTML form again. Now now it's 2019 and we're well past the peak of the hype cycle. And I would say chatbots largely failed to live up to their expectations. But something to keep in mind is that we always overestimate the change that will occur in the 2 years, and underestimate the change that will occur in the next 10. I think chat bots are currently sitting somewhere in the trough of disillusionment, but conversational experiences can be very when tailored to a specific business need. And in today's video, you'll learn how to build a chatbot from scratch using Dialogflow Node. Js and Cloud functions. If you're new here, like and subscribe, and you can find the full source code on Fireship IO.
What we're building today is a simple chatbot that can collect information from a user and then save that information permanently in a back end database. The natural language processing technology or artificial intelligence, if you will, is powered by Dialogflow, which is a tool for building virtual agents that can intelligently respond to user input, whether it be voice or text. After the agent has collected the information it needs, it can pass that information
artificial intelligence
programming
machine learning
software
computer science
technology
robotics
off to a back end cloud function, and that function can do whatever it wants to fulfill the request on the back end, which might be something like sending an email, processing a payment, or updating the database for example, when you build a chatbot with Dialogflow, you can automatically integrate it with a bunch of different platforms like Facebook Messenger, Slack, and you can now even connect it directly to a phone line.
But today, we're going to directly interact with the Dialogflow API with a node back end. Let's go ahead and take a look at the full architecture that we'll cover in today's video. On the left here, we have our front end application, which is where the user interacts with the bot.
networking
multimedia
infrastructure
architecture
In this demo we use Angular for the front end UI, but feel free to replace it with the front end framework of your choice.
Because all that front end application needs to do is make API calls to our gateway cloud function. This function essentially serves as a proxy to make secure calls to the Dialogflow API. So the user will enter their message in the front end application, which will then pass off to the Cloud Function with an HTTP call.
networking
We'll then pass that message to the bot, which will give us a response that we can send back down to the client. Now, the thing to keep in mind here is that a conversation will take place over multiple steps. But at some point, the conversation will finish and the user's intention will be fulfilled. When that happens, Dialogflow will send a webhook to a separate cloud function. This function can be used to handle additional work on the back end and dynamically compute the bot's response. So that's how things work from a high level. At this point, you'll want to have a Firebase project and then head over to the Dialogflow console. The first thing we'll do on the Dialogflow console is create a new agent. An agent represents an individual chatbot, and a chatbot is really just a tool that takes user input like text speech and translates it into structured data that you can use in your app.
I like to think of Dialogflow as a virtual call center and the agent is a customer service representative that's been trained to solve a variety of different problems. When the user first receives some input, it needs to determine the user's intention Xin or the problem that they're trying to solve.
customer support
software development
For this demo, we'll create a new Intent that the user can trigger to update their user profile information.
We'll give it a name of Update Profile and you'll see a bunch of different options here. So let's go through and talk about each one of them individually. First, we have Context, which is a little more advanced and we're not going to cover it in this video, but basically, it's a mechanism for passing data from one intent to another. Then the next option you'll see is Events, which is optional, but it's a way to trigger this intent without having the user do it manually.
multimedia
data management
And this is useful in our case because we might have a user onboarding process and the user is not going to know which intent trigger.
So this gives us a way to kick off a conversation programmatically in our code. Then from there, we have our training phrases. These are utterances or short phrases from the user that would trigger this intent. The machine learning algorithm is going to use natural language processing trying to figure out which phrases are similar to the ones that you add here. The more data you can add the better, but we'll just add a couple of short phrases here for now. Then Dialogflow will try to capture any phrases that are similar or that convey the same intent that you've listed here.
machine learning
artificial intelligence
neural networks
programming
deep learning
After that, we have action and parameters. When naming an action, it's generally a good practice to use your domain name in reverse followed by the name of your intent, similar to a bundle ID for a mobile application. Now when a user triggers an intent, there's likely multiple pieces of data that you need to collect in order to be able to successfully solve the problem. And that's where parameters come in. You can set up optional and required parameters that Dialogflow will try to collect from the user. We're going to collect the user's display name, which will give a parameter name of name, and then you have the entity option which represents the type of data that you're trying to collect.
And this allows Dialogflow to automatically validate the data that's being collected. And you can also create your own custom entity for whatever custom data that you're trying to collect. And you can also see here that we set up a prompt, which is what the agent will ask the user when trying to collect this data.
data
data management
Now after all the data has been collected, there are 2 ways to fulfill the intent. If you don't have any additional work to do on the back end, you can simply define a response in the Dialogflow console.
But in a lot of cases, you want to update something in a database or maybe make an API call to a third party. So for that, you'll need to use a Webhook. And that will allow you to write custom code on your back end server to format the response dynamically and handle anything else that the user is trying to do. From there we can go ahead and save the intent and then we'll head over to the integrations tab. There's a whole bunch of different built in integrations like Facebook Messenger, Slack, Twitter, Twilio, and many others. And there's even a new one called Dialog Phone Gateway that allows you to connect to your chatbot with a phone number. And you'll also she won called web demo that lets you use your chatbot in a browser, but it doesn't allow you to customize the UI in any way.
phones
telecommunications
networking
databases
internet
programming
And that's because Cheswe need a back end like Node. Js in a Cloud function to interact with the chatbot, so that's what we're going to take care of next. The first thing I'll do is initialize Cloud Functions, selecting JavaScript as the language. From there, we can see the end of the functions directory.
And for this first function, we'll want to install Dialogflow, which is the Dialogflow GI client and also cores because we'll be making requests from our front end application. Now when it comes to fulfillment, there's a separate library specifically for that called Dialogflow Fulfillment, and you'll also want to install actions on Google if using it. And you'll find the command to install all these with npm from the full lesson page. The first function that we'll build is a secure gateway that allows the front end application to communicate with Dialogflow on the back end. And we'll import cores, which will allow us to make requests from a front end app in the browser.
software
But in order to work with Dialogflow in a Cloud function, we need to bring in an actual service account. This is really easy to do. We simply go to the Firebase console and go to the settings tab, then service account, and click the button to generate a new private key. This will give you a JSON file with your actual private API key which you can download into the functions directory. You'll just wanna make sure to keep this file secure because it contains your private API keys. So make sure to add it to your git ignore if you're using a public git repo. We'll go ahead and import the service account, and then we'll initialize Firebase admin using those credentials. And then we'll import the session client from Dialogflow. From there, we'll set up an HTTP Cloud function called Dialogflow gateway and then immediately wrap the request response with CORS. And again, that's there simply to allow requests to be made from a browser. Dialogflow is going to be looking for 2 things. The query input contains the data that the user is trying to save the bot, which will be in the form of text or audio. And the session ID is a unique ID that will generate on the client that allows the bot to determine the CHASS messages that were sent in this conversation. From there, we'll go ahead and initialize the session client with the service account, and then we can reference the actual session by calling path with our Firebase project ID and the session ID. Then the next thing we'll do is get an actual response from our chatbot, which we do by calling detect intent with the session and in the query input, which again will contain the text or audio that the user is saying to the bot.
This will provide us with an array of responses, but we're really only interested in the first one. And the query result contains a bunch of information, but most importantly, it has the checks that we want to display to the user on the front end. So we'll go ahead and send that as the response from this function.
operations
data
Now, we'll go ahead and set this up in an Angular app in just a minute, but let's start by looking at how this works with just a regular HTTP call. You can go ahead and serve the functions locally and then pull up your favorite HTTP client to make the request. What you'll notice is we have a session ID which is usually unique per user, so you might use a user ID or something like that. And then the query input is the actual message sent by the user, in which case you're required to provide the actual string text and the language code. So if the user says update my profile to the bot, the bot's going to respond by trying to collect those parameters that we set up in Dialogflow. So you can see here that it's asking what is your preferred name? So if we send another request with our preferred name, it will move on to the next parameter it needs to collect which is the favorite color. So it'll ask what is your favorite color? Then if we go ahead and respond with the favorite color, that will fulfill the intent, so it's going to trigger our fulfillment webhook which we haven't defined yet and respond with whatever dynamically generated text that is provided by that function. In other words, we've reached the end of the conversation. So if we try to send the color blue again, it's going to Sean with, sorry, what was that? Because saying the color blue no longer makes sense within the context of the conversation. Now let's head back over to our functions Choad, and we'll set up a separate Cloud function here for the webhook. This is also an HTTP function, but there's no need to wrap it in cores because we're not calling it directly from the front end app. And then we'll initialize an instance of the Webhook client using the request and response. Now, it's important to point out that this Cloud function will be called for all intentions that are to be fulfilled by Webhooks for your chatbot, in the default sample code you'll notice a couple of functions here called welcome and fallback. Currently, these functions will never be called because you'll notice that on the Dialogflow console so we don't have webhook fulfillment enabled for these intents. But if we were to enable those, then the bot would use these functions instead of whatever you specify in the Dialogflow console. When it comes to our custom intent, we want to set up a function here that will update the back end database, which is Firestore, with the new information that the user passed to the bot. We can easily handle that in a Cloud Function because we already have access to the admin database. So we can simply perform a write with the parameters that were passed in on this request. And once that back end work is done, then we'll simply add a message to the agent, and that's what the user will see as the response from the bot. Now because this Cloud Function is handling multiple intents, we need to map them into an object that can be called based on the intent name. The default code uses a JavaScript map for that, so we'll continue to follow the same pattern and simply add our functions as properties on the map with the corresponding intent name. At this point you can go ahead and deploy the functions by running Firebase deploy only functions. And you should now have a fully functional chatbot that can do more than just respond to messages. But the one thing we're still missing is a front end UI for the user to actually interact with a bot in a web application setting. For that we're going to use Angular and this awesome free theme called Nebula. Not only does Nebula look awesome, but it also has a full chat UI module that we can use to build our chatbot very quickly. We can install it easily in an existing Angular app by simply running ng add nebular theme. That will install everything automatically in your project and then if you go in the App module, you can see I'm importing the nbchatui module as well as the spinner module. Then the only other Angular feature that we need to add here is the HTTP gdpClientModule, and you'll find that under the Angular common namespace.
From there, I'm generating a component called Chatbot that will just encapsulate all of our logic, and then we'll go ahead and declare our chatbot in the App component. Now I first want to go through the code in the template because Nebula is going to take care of all the heavy lifting here.
programming
First, we'll declare the nbChat component, which is basically just a wrapper to hold the messages and the form. In order to display a list of messages from both the bot and the user, we'll set up the nbChat message component and then we'll loop over it using n g 4. Now each message can be customized with a variety of input parameters. I recommend checking out the Nebula docs for all the options, but we'll definitely want to pass in the message text and then we'll determine whether or not it's a reply to the bot. And we can also pass in a date and a user avatar image. And then also in the full source code, you'll notice I've added a second message that simply shows a loading spinner when the bot is responding. And that can be accomplished easily because Nebula ships with a spinner directive. Then the last thing we'll add is the EnvyChat form, which has its own send event, which will be fired if the GISR clicks the send button or if they hit the enter key. Now moving over to the component TypeScript, the only thing we really need is Angular's HTTP client and it's used to make requests to the Dialogflow gateway function that we defined earlier. Now moving into the actual component class, we'll set up an empty array of messages, the initial loading state will be set to false and then we'll set up a session ID by just generating a random string. You could use a user ID here or something a little more but this will work for now. Now when pushing messages to the array, we have a slightly different set of data for the bot versus a user. When it's a user generated message, the most important thing is that we set the reply property to true. And Nebula will handle all of the styling to display the message on the right side.
And then we'll set a similar method for a bot message with the only difference being that the Avatar property is defined. When the user first lands on the app, we'll go ahead and add a bot message so they know that the bot is present and ready to help out.
robotics
But Dialogflow doesn't really need to kick in until the user actually sends a message. So when they do send a message, we'll go ahead and add that message to the chat and then we'll set the loading state to true. Then we can make an HTTP post request in Angular I call HTTP post, and then we'll set the generic type to any and pass it our Dialogflow URL. Then the second argument is an object for the request body. The Cloud Function will be looking for a session ID and then also a query input object. And that query input object will contain the text that the user has typed into our chat form. From there, we can actually make the request by calling subscribe. The response we get back will contain the fulfillment text, which is the next message that the bot is saying to the user. And then we'll also set the loading state to false. And that's all there is to when you combine Angular with the Nebula theme, building a chat UI is extremely simple. I think we've covered just about enough code for one day, so I'm gonna go ahead and wrap things up there.
If this video helped you please like and subscribe and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
youtube
streaming
social media
media
Certainly be a lot of job disruption, um, because what's gonna happen is ROAS will be able to do everything better than us. Looking back at 2017, chatbots were the next big thing. They were supposed to eliminate millions of call center jobs, replace lawyers, and prevent end users from ever having to fill out an HTML form again. Now now it's 2019 and we're well past the peak of the hype cycle. And I would say chatbots largely failed to live up to their expectations. But something to keep in mind is that we always overestimate the change that will occur in the 2 years, and underestimate the change that will occur in the next 10. I think chat bots are currently sitting somewhere in the trough of disillusionment, but conversational experiences can be very when tailored to a specific business need. And in today's video, you'll learn how to build a chatbot from scratch using Dialogflow Node. Js and Cloud functions. If you're new here, like and subscribe, and you can find the full source code on Fireship IO. What we're building today is a simple chatbot that can collect information from a user and then save that information permanently in a back end database. The natural language processing technology or artificial intelligence, if you will, is powered by Dialogflow, which is a tool for building virtual agents that can intelligently respond to user input, whether it be voice or text. After the agent has collected the information it needs, it can pass that information off to a back end cloud function, and that function can do whatever it wants to fulfill the request on the back end, which might be something like sending an email, processing a payment, or updating the database for example, when you build a chatbot with Dialogflow, you can automatically integrate it with a bunch of different platforms like Facebook Messenger, Slack, and you can now even connect it directly to a phone line. But today, we're going to directly interact with the Dialogflow API with a node back end. Let's go ahead and take a look at the full architecture that we'll cover in today's video. On the left here, we have our front end application, which is where the user interacts with the bot. In this demo we use Angular for the front end UI, but feel free to replace it with the front end framework of your choice. Because all that front end application needs to do is make API calls to our gateway cloud function. This function essentially serves as a proxy to make secure calls to the Dialogflow API. So the user will enter their message in the front end application, which will then pass off to the Cloud Function with an HTTP call. We'll then pass that message to the bot, which will give us a response that we can send back down to the client. Now, the thing to keep in mind here is that a conversation will take place over multiple steps. But at some point, the conversation will finish and the user's intention will be fulfilled. When that happens, Dialogflow will send a webhook to a separate cloud function. This function can be used to handle additional work on the back end and dynamically compute the bot's response. So that's how things work from a high level. At this point, you'll want to have a Firebase project and then head over to the Dialogflow console. The first thing we'll do on the Dialogflow console is create a new agent. An agent represents an individual chatbot, and a chatbot is really just a tool that takes user input like text speech and translates it into structured data that you can use in your app. I like to think of Dialogflow as a virtual call center and the agent is a customer service representative that's been trained to solve a variety of different problems. When the user first receives some input, it needs to determine the user's intention Xin or the problem that they're trying to solve. For this demo, we'll create a new Intent that the user can trigger to update their user profile information. We'll give it a name of Update Profile and you'll see a bunch of different options here. So let's go through and talk about each one of them individually. First, we have Context, which is a little more advanced and we're not going to cover it in this video, but basically, it's a mechanism for passing data from one intent to another. Then the next option you'll see is Events, which is optional, but it's a way to trigger this intent without having the user do it manually. And this is useful in our case because we might have a user onboarding process and the user is not going to know which intent trigger. So this gives us a way to kick off a conversation programmatically in our code. Then from there, we have our training phrases. These are utterances or short phrases from the user that would trigger this intent. The machine learning algorithm is going to use natural language processing trying to figure out which phrases are similar to the ones that you add here. The more data you can add the better, but we'll just add a couple of short phrases here for now. Then Dialogflow will try to capture any phrases that are similar or that convey the same intent that you've listed here. After that, we have action and parameters. When naming an action, it's generally a good practice to use your domain name in reverse followed by the name of your intent, similar to a bundle ID for a mobile application. Now when a user triggers an intent, there's likely multiple pieces of data that you need to collect in order to be able to successfully solve the problem. And that's where parameters come in. You can set up optional and required parameters that Dialogflow will try to collect from the user. We're going to collect the user's display name, which will give a parameter name of name, and then you have the entity option which represents the type of data that you're trying to collect. And this allows Dialogflow to automatically validate the data that's being collected. And you can also create your own custom entity for whatever custom data that you're trying to collect. And you can also see here that we set up a prompt, which is what the agent will ask the user when trying to collect this data. Now after all the data has been collected, there are 2 ways to fulfill the intent. If you don't have any additional work to do on the back end, you can simply define a response in the Dialogflow console. But in a lot of cases, you want to update something in a database or maybe make an API call to a third party. So for that, you'll need to use a Webhook. And that will allow you to write custom code on your back end server to format the response dynamically and handle anything else that the user is trying to do. From there we can go ahead and save the intent and then we'll head over to the integrations tab. There's a whole bunch of different built in integrations like Facebook Messenger, Slack, Twitter, Twilio, and many others. And there's even a new one called Dialog Phone Gateway that allows you to connect to your chatbot with a phone number. And you'll also she won called web demo that lets you use your chatbot in a browser, but it doesn't allow you to customize the UI in any way. And that's because Cheswe need a back end like Node. Js in a Cloud function to interact with the chatbot, so that's what we're going to take care of next. The first thing I'll do is initialize Cloud Functions, selecting JavaScript as the language. From there, we can see the end of the functions directory. And for this first function, we'll want to install Dialogflow, which is the Dialogflow GI client and also cores because we'll be making requests from our front end application. Now when it comes to fulfillment, there's a separate library specifically for that called Dialogflow Fulfillment, and you'll also want to install actions on Google if using it. And you'll find the command to install all these with npm from the full lesson page. The first function that we'll build is a secure gateway that allows the front end application to communicate with Dialogflow on the back end. And we'll import cores, which will allow us to make requests from a front end app in the browser. But in order to work with Dialogflow in a Cloud function, we need to bring in an actual service account. This is really easy to do. We simply go to the Firebase console and go to the settings tab, then service account, and click the button to generate a new private key. This will give you a JSON file with your actual private API key which you can download into the functions directory. You'll just wanna make sure to keep this file secure because it contains your private API keys. So make sure to add it to your git ignore if you're using a public git repo. We'll go ahead and import the service account, and then we'll initialize Firebase admin using those credentials. And then we'll import the session client from Dialogflow. From there, we'll set up an HTTP Cloud function called Dialogflow gateway and then immediately wrap the request response with CORS. And again, that's there simply to allow requests to be made from a browser. Dialogflow is going to be looking for 2 things. The query input contains the data that the user is trying to save the bot, which will be in the form of text or audio. And the session ID is a unique ID that will generate on the client that allows the bot to determine the CHASS messages that were sent in this conversation. From there, we'll go ahead and initialize the session client with the service account, and then we can reference the actual session by calling path with our Firebase project ID and the session ID. Then the next thing we'll do is get an actual response from our chatbot, which we do by calling detect intent with the session and in the query input, which again will contain the text or audio that the user is saying to the bot. This will provide us with an array of responses, but we're really only interested in the first one. And the query result contains a bunch of information, but most importantly, it has the checks that we want to display to the user on the front end. So we'll go ahead and send that as the response from this function. Now, we'll go ahead and set this up in an Angular app in just a minute, but let's start by looking at how this works with just a regular HTTP call. You can go ahead and serve the functions locally and then pull up your favorite HTTP client to make the request. What you'll notice is we have a session ID which is usually unique per user, so you might use a user ID or something like that. And then the query input is the actual message sent by the user, in which case you're required to provide the actual string text and the language code. So if the user says update my profile to the bot, the bot's going to respond by trying to collect those parameters that we set up in Dialogflow. So you can see here that it's asking what is your preferred name? So if we send another request with our preferred name, it will move on to the next parameter it needs to collect which is the favorite color. So it'll ask what is your favorite color? Then if we go ahead and respond with the favorite color, that will fulfill the intent, so it's going to trigger our fulfillment webhook which we haven't defined yet and respond with whatever dynamically generated text that is provided by that function. In other words, we've reached the end of the conversation. So if we try to send the color blue again, it's going to Sean with, sorry, what was that? Because saying the color blue no longer makes sense within the context of the conversation. Now let's head back over to our functions Choad, and we'll set up a separate Cloud function here for the webhook. This is also an HTTP function, but there's no need to wrap it in cores because we're not calling it directly from the front end app. And then we'll initialize an instance of the Webhook client using the request and response. Now, it's important to point out that this Cloud function will be called for all intentions that are to be fulfilled by Webhooks for your chatbot, in the default sample code you'll notice a couple of functions here called welcome and fallback. Currently, these functions will never be called because you'll notice that on the Dialogflow console so we don't have webhook fulfillment enabled for these intents. But if we were to enable those, then the bot would use these functions instead of whatever you specify in the Dialogflow console. When it comes to our custom intent, we want to set up a function here that will update the back end database, which is Firestore, with the new information that the user passed to the bot. We can easily handle that in a Cloud Function because we already have access to the admin database. So we can simply perform a write with the parameters that were passed in on this request. And once that back end work is done, then we'll simply add a message to the agent, and that's what the user will see as the response from the bot. Now because this Cloud Function is handling multiple intents, we need to map them into an object that can be called based on the intent name. The default code uses a JavaScript map for that, so we'll continue to follow the same pattern and simply add our functions as properties on the map with the corresponding intent name. At this point you can go ahead and deploy the functions by running Firebase deploy only functions. And you should now have a fully functional chatbot that can do more than just respond to messages. But the one thing we're still missing is a front end UI for the user to actually interact with a bot in a web application setting. For that we're going to use Angular and this awesome free theme called Nebula. Not only does Nebula look awesome, but it also has a full chat UI module that we can use to build our chatbot very quickly. We can install it easily in an existing Angular app by simply running ng add nebular theme. That will install everything automatically in your project and then if you go in the App module, you can see I'm importing the nbchatui module as well as the spinner module. Then the only other Angular feature that we need to add here is the HTTP gdpClientModule, and you'll find that under the Angular common namespace. From there, I'm generating a component called Chatbot that will just encapsulate all of our logic, and then we'll go ahead and declare our chatbot in the App component. Now I first want to go through the code in the template because Nebula is going to take care of all the heavy lifting here. First, we'll declare the nbChat component, which is basically just a wrapper to hold the messages and the form. In order to display a list of messages from both the bot and the user, we'll set up the nbChat message component and then we'll loop over it using n g 4. Now each message can be customized with a variety of input parameters. I recommend checking out the Nebula docs for all the options, but we'll definitely want to pass in the message text and then we'll determine whether or not it's a reply to the bot. And we can also pass in a date and a user avatar image. And then also in the full source code, you'll notice I've added a second message that simply shows a loading spinner when the bot is responding. And that can be accomplished easily because Nebula ships with a spinner directive. Then the last thing we'll add is the EnvyChat form, which has its own send event, which will be fired if the GISR clicks the send button or if they hit the enter key. Now moving over to the component TypeScript, the only thing we really need is Angular's HTTP client and it's used to make requests to the Dialogflow gateway function that we defined earlier. Now moving into the actual component class, we'll set up an empty array of messages, the initial loading state will be set to false and then we'll set up a session ID by just generating a random string. You could use a user ID here or something a little more but this will work for now. Now when pushing messages to the array, we have a slightly different set of data for the bot versus a user. When it's a user generated message, the most important thing is that we set the reply property to true. And Nebula will handle all of the styling to display the message on the right side. And then we'll set a similar method for a bot message with the only difference being that the Avatar property is defined. When the user first lands on the app, we'll go ahead and add a bot message so they know that the bot is present and ready to help out. But Dialogflow doesn't really need to kick in until the user actually sends a message. So when they do send a message, we'll go ahead and add that message to the chat and then we'll set the loading state to true. Then we can make an HTTP post request in Angular I call HTTP post, and then we'll set the generic type to any and pass it our Dialogflow URL. Then the second argument is an object for the request body. The Cloud Function will be looking for a session ID and then also a query input object. And that query input object will contain the text that the user has typed into our chat form. From there, we can actually make the request by calling subscribe. The response we get back will contain the fulfillment text, which is the next message that the bot is saying to the user. And then we'll also set the loading state to false. And that's all there is to when you combine Angular with the Nebula theme, building a chat UI is extremely simple. I think we've covered just about enough code for one day, so I'm gonna go ahead and wrap things up there. If this video helped you please like and subscribe and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
Certainly
certainly
be
be
a
a
lot
lot
of
of
job
job
disruption,
disruption
um,
um
because
because
what's
what's
gonna
gonna
happen
happen
is
is
ROAS
roas
will
will
be
be
able
able
to
to
do
do
everything
everything
better
better
than
than
us.
us
Looking
looking
back
back
at
at
2017,
2017
chatbots
chatbots
were
were
the
the
next
next
big
big
thing.
thing
They
they
were
were
supposed
supposed
to
to
eliminate
eliminate
millions
millions
of
of
call
call
center
center
jobs,
jobs
replace
replace
lawyers,
lawyers
and
and
prevent
prevent
end
end
users
users
from
from
ever
ever
having
having
to
to
fill
fill
out
out
an
an
HTML
html
form
form
again.
again
Now
now
now
now
it's
it's
2019
2019
and
and
we're
we're
well
well
past
past
the
the
peak
peak
of
of
the
the
hype
hype
cycle.
cycle
And
and
I
i
would
would
say
say
chatbots
chatbots
largely
largely
failed
failed
to
to
live
live
up
up
to
to
their
their
expectations.
expectations
But
but
something
something
to
to
keep
keep
in
in
mind
mind
is
is
that
that
we
we
always
always
overestimate
overestimate
the
the
change
change
that
that
will
will
occur
occur
in
in
the
the
2
2
years,
years
and
and
underestimate
underestimate
the
the
change
change
that
that
will
will
occur
occur
in
in
the
the
next
next
10.
10
I
i
think
think
chat
chat
bots
bots
are
are
currently
currently
sitting
sitting
somewhere
somewhere
in
in
the
the
trough
trough
of
of
disillusionment,
disillusionment
but
but
conversational
conversational
experiences
experiences
can
can
be
be
very
very
when
when
tailored
tailored
to
to
a
a
specific
specific
business
business
need.
need
And
and
in
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
build
build
a
a
chatbot
chatbot
from
from
scratch
scratch
using
using
Dialogflow
dialogflow
Node.
node
Js
js
and
and
Cloud
cloud
functions.
functions
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
find
find
the
the
full
full
source
source
code
code
on
on
Fireship
fireship
IO.
io
What
what
we're
we're
building
building
today
today
is
is
a
a
simple
simple
chatbot
chatbot
that
that
can
can
collect
collect
information
information
from
from
a
a
user
user
and
and
then
then
save
save
that
that
information
information
permanently
permanently
in
in
a
a
back
back
end
end
database.
database
The
the
natural
natural
language
language
processing
processing
technology
technology
or
or
artificial
artificial
intelligence,
intelligence
if
if
you
you
will,
will
is
is
powered
powered
by
by
Dialogflow,
dialogflow
which
which
is
is
a
a
tool
tool
for
for
building
building
virtual
virtual
agents
agents
that
that
can
can
intelligently
intelligently
respond
respond
to
to
user
user
input,
input
whether
whether
it
it
be
be
voice
voice
or
or
text.
text
After
after
the
the
agent
agent
has
has
collected
collected
the
the
information
information
it
it
needs,
needs
it
it
can
can
pass
pass
that
that
information
information
off
off
to
to
a
a
back
back
end
end
cloud
cloud
function,
function
and
and
that
that
function
function
can
can
do
do
whatever
whatever
it
it
wants
wants
to
to
fulfill
fulfill
the
the
request
request
on
on
the
the
back
back
end,
end
which
which
might
might
be
be
something
something
like
like
sending
sending
an
an
email,
email
processing
processing
a
a
payment,
payment
or
or
updating
updating
the
the
database
database
for
for
example,
example
when
when
you
you
build
build
a
a
chatbot
chatbot
with
with
Dialogflow,
dialogflow
you
you
can
can
automatically
automatically
integrate
integrate
it
it
with
with
a
a
bunch
bunch
of
of
different
different
platforms
platforms
like
like
Facebook
facebook
Messenger,
messenger
Slack,
slack
and
and
you
you
can
can
now
now
even
even
connect
connect
it
it
directly
directly
to
to
a
a
phone
phone
line.
line
But
but
today,
today
we're
we're
going
going
to
to
directly
directly
interact
interact
with
with
the
the
Dialogflow
dialogflow
API
api
with
with
a
a
node
node
back
back
end.
end
Let's
let's
go
go
ahead
ahead
and
and
take
take
a
a
look
look
at
at
the
the
full
full
architecture
architecture
that
that
we'll
we'll
cover
cover
in
in
today's
today's
video.
video
On
on
the
the
left
left
here,
here
we
we
have
have
our
our
front
front
end
end
application,
application
which
which
is
is
where
where
the
the
user
user
interacts
interacts
with
with
the
the
bot.
bot
In
in
this
this
demo
demo
we
we
use
use
Angular
angular
for
for
the
the
front
front
end
end
UI,
ui
but
but
feel
feel
free
free
to
to
replace
replace
it
it
with
with
the
the
front
front
end
end
framework
framework
of
of
your
your
choice.
choice
Because
because
all
all
that
that
front
front
end
end
application
application
needs
needs
to
to
do
do
is
is
make
make
API
api
calls
calls
to
to
our
our
gateway
gateway
cloud
cloud
function.
function
This
this
function
function
essentially
essentially
serves
serves
as
as
a
a
proxy
proxy
to
to
make
make
secure
secure
calls
calls
to
to
the
the
Dialogflow
dialogflow
API.
api
So
so
the
the
user
user
will
will
enter
enter
their
their
message
message
in
in
the
the
front
front
end
end
application,
application
which
which
will
will
then
then
pass
pass
off
off
to
to
the
the
Cloud
cloud
Function
function
with
with
an
an
HTTP
http
call.
call
We'll
we'll
then
then
pass
pass
that
that
message
message
to
to
the
the
bot,
bot
which
which
will
will
give
give
us
us
a
a
response
response
that
that
we
we
can
can
send
send
back
back
down
down
to
to
the
the
client.
client
Now,
now
the
the
thing
thing
to
to
keep
keep
in
in
mind
mind
here
here
is
is
that
that
a
a
conversation
conversation
will
will
take
take
place
place
over
over
multiple
multiple
steps.
steps
But
but
at
at
some
some
point,
point
the
the
conversation
conversation
will
will
finish
finish
and
and
the
the
user's
user's
intention
intention
will
will
be
be
fulfilled.
fulfilled
When
when
that
that
happens,
happens
Dialogflow
dialogflow
will
will
send
send
a
a
webhook
webhook
to
to
a
a
separate
separate
cloud
cloud
function.
function
This
this
function
function
can
can
be
be
used
used
to
to
handle
handle
additional
additional
work
work
on
on
the
the
back
back
end
end
and
and
dynamically
dynamically
compute
compute
the
the
bot's
bot's
response.
response
So
so
that's
that's
how
how
things
things
work
work
from
from
a
a
high
high
level.
level
At
at
this
this
point,
point
you'll
you'll
want
want
to
to
have
have
a
a
Firebase
firebase
project
project
and
and
then
then
head
head
over
over
to
to
the
the
Dialogflow
dialogflow
console.
console
The
the
first
first
thing
thing
we'll
we'll
do
do
on
on
the
the
Dialogflow
dialogflow
console
console
is
is
create
create
a
a
new
new
agent.
agent
An
an
agent
agent
represents
represents
an
an
individual
individual
chatbot,
chatbot
and
and
a
a
chatbot
chatbot
is
is
really
really
just
just
a
a
tool
tool
that
that
takes
takes
user
user
input
input
like
like
text
text
speech
speech
and
and
translates
translates
it
it
into
into
structured
structured
data
data
that
that
you
you
can
can
use
use
in
in
your
your
app.
app
I
i
like
like
to
to
think
think
of
of
Dialogflow
dialogflow
as
as
a
a
virtual
virtual
call
call
center
center
and
and
the
the
agent
agent
is
is
a
a
customer
customer
service
service
representative
representative
that's
that's
been
been
trained
trained
to
to
solve
solve
a
a
variety
variety
of
of
different
different
problems.
problems
When
when
the
the
user
user
first
first
receives
receives
some
some
input,
input
it
it
needs
needs
to
to
determine
determine
the
the
user's
user's
intention
intention
Xin
xin
or
or
the
the
problem
problem
that
that
they're
they're
trying
trying
to
to
solve.
solve
For
for
this
this
demo,
demo
we'll
we'll
create
create
a
a
new
new
Intent
intent
that
that
the
the
user
user
can
can
trigger
trigger
to
to
update
update
their
their
user
user
profile
profile
information.
information
We'll
we'll
give
give
it
it
a
a
name
name
of
of
Update
update
Profile
profile
and
and
you'll
you'll
see
see
a
a
bunch
bunch
of
of
different
different
options
options
here.
here
So
so
let's
let's
go
go
through
through
and
and
talk
talk
about
about
each
each
one
one
of
of
them
them
individually.
individually
First,
first
we
we
have
have
Context,
context
which
which
is
is
a
a
little
little
more
more
advanced
advanced
and
and
we're
we're
not
not
going
going
to
to
cover
cover
it
it
in
in
this
this
video,
video
but
but
basically,
basically
it's
it's
a
a
mechanism
mechanism
for
for
passing
passing
data
data
from
from
one
one
intent
intent
to
to
another.
another
Then
then
the
the
next
next
option
option
you'll
you'll
see
see
is
is
Events,
events
which
which
is
is
optional,
optional
but
but
it's
it's
a
a
way
way
to
to
trigger
trigger
this
this
intent
intent
without
without
having
having
the
the
user
user
do
do
it
it
manually.
manually
And
and
this
this
is
is
useful
useful
in
in
our
our
case
case
because
because
we
we
might
might
have
have
a
a
user
user
onboarding
onboarding
process
process
and
and
the
the
user
user
is
is
not
not
going
going
to
to
know
know
which
which
intent
intent
trigger.
trigger
So
so
this
this
gives
gives
us
us
a
a
way
way
to
to
kick
kick
off
off
a
a
conversation
conversation
programmatically
programmatically
in
in
our
our
code.
code
Then
then
from
from
there,
there
we
we
have
have
our
our
training
training
phrases.
phrases
These
these
are
are
utterances
utterances
or
or
short
short
phrases
phrases
from
from
the
the
user
user
that
that
would
would
trigger
trigger
this
this
intent.
intent
The
the
machine
machine
learning
learning
algorithm
algorithm
is
is
going
going
to
to
use
use
natural
natural
language
language
processing
processing
trying
trying
to
to
figure
figure
out
out
which
which
phrases
phrases
are
are
similar
similar
to
to
the
the
ones
ones
that
that
you
you
add
add
here.
here
The
the
more
more
data
data
you
you
can
can
add
add
the
the
better,
better
but
but
we'll
we'll
just
just
add
add
a
a
couple
couple
of
of
short
short
phrases
phrases
here
here
for
for
now.
now
Then
then
Dialogflow
dialogflow
will
will
try
try
to
to
capture
capture
any
any
phrases
phrases
that
that
are
are
similar
similar
or
or
that
that
convey
convey
the
the
same
same
intent
intent
that
that
you've
you've
listed
listed
here.
here
After
after
that,
that
we
we
have
have
action
action
and
and
parameters.
parameters
When
when
naming
naming
an
an
action,
action
it's
it's
generally
generally
a
a
good
good
practice
practice
to
to
use
use
your
your
domain
domain
name
name
in
in
reverse
reverse
followed
followed
by
by
the
the
name
name
of
of
your
your
intent,
intent
similar
similar
to
to
a
a
bundle
bundle
ID
id
for
for
a
a
mobile
mobile
application.
application
Now
now
when
when
a
a
user
user
triggers
triggers
an
an
intent,
intent
there's
there's
likely
likely
multiple
multiple
pieces
pieces
of
of
data
data
that
that
you
you
need
need
to
to
collect
collect
in
in
order
order
to
to
be
be
able
able
to
to
successfully
successfully
solve
solve
the
the
problem.
problem
And
and
that's
that's
where
where
parameters
parameters
come
come
in.
in
You
you
can
can
set
set
up
up
optional
optional
and
and
required
required
parameters
parameters
that
that
Dialogflow
dialogflow
will
will
try
try
to
to
collect
collect
from
from
the
the
user.
user
We're
we're
going
going
to
to
collect
collect
the
the
user's
user's
display
display
name,
name
which
which
will
will
give
give
a
a
parameter
parameter
name
name
of
of
name,
name
and
and
then
then
you
you
have
have
the
the
entity
entity
option
option
which
which
represents
represents
the
the
type
type
of
of
data
data
that
that
you're
you're
trying
trying
to
to
collect.
collect
And
and
this
this
allows
allows
Dialogflow
dialogflow
to
to
automatically
automatically
validate
validate
the
the
data
data
that's
that's
being
being
collected.
collected
And
and
you
you
can
can
also
also
create
create
your
your
own
own
custom
custom
entity
entity
for
for
whatever
whatever
custom
custom
data
data
that
that
you're
you're
trying
trying
to
to
collect.
collect
And
and
you
you
can
can
also
also
see
see
here
here
that
that
we
we
set
set
up
up
a
a
prompt,
prompt
which
which
is
is
what
what
the
the
agent
agent
will
will
ask
ask
the
the
user
user
when
when
trying
trying
to
to
collect
collect
this
this
data.
data
Now
now
after
after
all
all
the
the
data
data
has
has
been
been
collected,
collected
there
there
are
are
2
2
ways
ways
to
to
fulfill
fulfill
the
the
intent.
intent
If
if
you
you
don't
don't
have
have
any
any
additional
additional
work
work
to
to
do
do
on
on
the
the
back
back
end,
end
you
you
can
can
simply
simply
define
define
a
a
response
response
in
in
the
the
Dialogflow
dialogflow
console.
console
But
but
in
in
a
a
lot
lot
of
of
cases,
cases
you
you
want
want
to
to
update
update
something
something
in
in
a
a
database
database
or
or
maybe
maybe
make
make
an
an
API
api
call
call
to
to
a
a
third
third
party.
party
So
so
for
for
that,
that
you'll
you'll
need
need
to
to
use
use
a
a
Webhook.
webhook
And
and
that
that
will
will
allow
allow
you
you
to
to
write
write
custom
custom
code
code
on
on
your
your
back
back
end
end
server
server
to
to
format
format
the
the
response
response
dynamically
dynamically
and
and
handle
handle
anything
anything
else
else
that
that
the
the
user
user
is
is
trying
trying
to
to
do.
do
From
from
there
there
we
we
can
can
go
go
ahead
ahead
and
and
save
save
the
the
intent
intent
and
and
then
then
we'll
we'll
head
head
over
over
to
to
the
the
integrations
integrations
tab.
tab
There's
there's
a
a
whole
whole
bunch
bunch
of
of
different
different
built
built
in
in
integrations
integrations
like
like
Facebook
facebook
Messenger,
messenger
Slack,
slack
Twitter,
twitter
Twilio,
twilio
and
and
many
many
others.
others
And
and
there's
there's
even
even
a
a
new
new
one
one
called
called
Dialog
dialog
Phone
phone
Gateway
gateway
that
that
allows
allows
you
you
to
to
connect
connect
to
to
your
your
chatbot
chatbot
with
with
a
a
phone
phone
number.
number
And
and
you'll
you'll
also
also
she
she
won
won
called
called
web
web
demo
demo
that
that
lets
lets
you
you
use
use
your
your
chatbot
chatbot
in
in
a
a
browser,
browser
but
but
it
it
doesn't
doesn't
allow
allow
you
you
to
to
customize
customize
the
the
UI
ui
in
in
any
any
way.
way
And
and
that's
that's
because
because
Cheswe
cheswe
need
need
a
a
back
back
end
end
like
like
Node.
node
Js
js
in
in
a
a
Cloud
cloud
function
function
to
to
interact
interact
with
with
the
the
chatbot,
chatbot
so
so
that's
that's
what
what
we're
we're
going
going
to
to
take
take
care
care
of
of
next.
next
The
the
first
first
thing
thing
I'll
i'll
do
do
is
is
initialize
initialize
Cloud
cloud
Functions,
functions
selecting
selecting
JavaScript
javascript
as
as
the
the
language.
language
From
from
there,
there
we
we
can
can
see
see
the
the
end
end
of
of
the
the
functions
functions
directory.
directory
And
and
for
for
this
this
first
first
function,
function
we'll
we'll
want
want
to
to
install
install
Dialogflow,
dialogflow
which
which
is
is
the
the
Dialogflow
dialogflow
GI
gi
client
client
and
and
also
also
cores
cores
because
because
we'll
we'll
be
be
making
making
requests
requests
from
from
our
our
front
front
end
end
application.
application
Now
now
when
when
it
it
comes
comes
to
to
fulfillment,
fulfillment
there's
there's
a
a
separate
separate
library
library
specifically
specifically
for
for
that
that
called
called
Dialogflow
dialogflow
Fulfillment,
fulfillment
and
and
you'll
you'll
also
also
want
want
to
to
install
install
actions
actions
on
on
Google
google
if
if
using
using
it.
it
And
and
you'll
you'll
find
find
the
the
command
command
to
to
install
install
all
all
these
these
with
with
npm
npm
from
from
the
the
full
full
lesson
lesson
page.
page
The
the
first
first
function
function
that
that
we'll
we'll
build
build
is
is
a
a
secure
secure
gateway
gateway
that
that
allows
allows
the
the
front
front
end
end
application
application
to
to
communicate
communicate
with
with
Dialogflow
dialogflow
on
on
the
the
back
back
end.
end
And
and
we'll
we'll
import
import
cores,
cores
which
which
will
will
allow
allow
us
us
to
to
make
make
requests
requests
from
from
a
a
front
front
end
end
app
app
in
in
the
the
browser.
browser
But
but
in
in
order
order
to
to
work
work
with
with
Dialogflow
dialogflow
in
in
a
a
Cloud
cloud
function,
function
we
we
need
need
to
to
bring
bring
in
in
an
an
actual
actual
service
service
account.
account
This
this
is
is
really
really
easy
easy
to
to
do.
do
We
we
simply
simply
go
go
to
to
the
the
Firebase
firebase
console
console
and
and
go
go
to
to
the
the
settings
settings
tab,
tab
then
then
service
service
account,
account
and
and
click
click
the
the
button
button
to
to
generate
generate
a
a
new
new
private
private
key.
key
This
this
will
will
give
give
you
you
a
a
JSON
json
file
file
with
with
your
your
actual
actual
private
private
API
api
key
key
which
which
you
you
can
can
download
download
into
into
the
the
functions
functions
directory.
directory
You'll
you'll
just
just
wanna
wanna
make
make
sure
sure
to
to
keep
keep
this
this
file
file
secure
secure
because
because
it
it
contains
contains
your
your
private
private
API
api
keys.
keys
So
so
make
make
sure
sure
to
to
add
add
it
it
to
to
your
your
git
git
ignore
ignore
if
if
you're
you're
using
using
a
a
public
public
git
git
repo.
repo
We'll
we'll
go
go
ahead
ahead
and
and
import
import
the
the
service
service
account,
account
and
and
then
then
we'll
we'll
initialize
initialize
Firebase
firebase
admin
admin
using
using
those
those
credentials.
credentials
And
and
then
then
we'll
we'll
import
import
the
the
session
session
client
client
from
from
Dialogflow.
dialogflow
From
from
there,
there
we'll
we'll
set
set
up
up
an
an
HTTP
http
Cloud
cloud
function
function
called
called
Dialogflow
dialogflow
gateway
gateway
and
and
then
then
immediately
immediately
wrap
wrap
the
the
request
request
response
response
with
with
CORS.
cors
And
and
again,
again
that's
that's
there
there
simply
simply
to
to
allow
allow
requests
requests
to
to
be
be
made
made
from
from
a
a
browser.
browser
Dialogflow
dialogflow
is
is
going
going
to
to
be
be
looking
looking
for
for
2
2
things.
things
The
the
query
query
input
input
contains
contains
the
the
data
data
that
that
the
the
user
user
is
is
trying
trying
to
to
save
save
the
the
bot,
bot
which
which
will
will
be
be
in
in
the
the
form
form
of
of
text
text
or
or
audio.
audio
And
and
the
the
session
session
ID
id
is
is
a
a
unique
unique
ID
id
that
that
will
will
generate
generate
on
on
the
the
client
client
that
that
allows
allows
the
the
bot
bot
to
to
determine
determine
the
the
CHASS
chass
messages
messages
that
that
were
were
sent
sent
in
in
this
this
conversation.
conversation
From
from
there,
there
we'll
we'll
go
go
ahead
ahead
and
and
initialize
initialize
the
the
session
session
client
client
with
with
the
the
service
service
account,
account
and
and
then
then
we
we
can
can
reference
reference
the
the
actual
actual
session
session
by
by
calling
calling
path
path
with
with
our
our
Firebase
firebase
project
project
ID
id
and
and
the
the
session
session
ID.
id
Then
then
the
the
next
next
thing
thing
we'll
we'll
do
do
is
is
get
get
an
an
actual
actual
response
response
from
from
our
our
chatbot,
chatbot
which
which
we
we
do
do
by
by
calling
calling
detect
detect
intent
intent
with
with
the
the
session
session
and
and
in
in
the
the
query
query
input,
input
which
which
again
again
will
will
contain
contain
the
the
text
text
or
or
audio
audio
that
that
the
the
user
user
is
is
saying
saying
to
to
the
the
bot.
bot
This
this
will
will
provide
provide
us
us
with
with
an
an
array
array
of
of
responses,
responses
but
but
we're
we're
really
really
only
only
interested
interested
in
in
the
the
first
first
one.
one
And
and
the
the
query
query
result
result
contains
contains
a
a
bunch
bunch
of
of
information,
information
but
but
most
most
importantly,
importantly
it
it
has
has
the
the
checks
checks
that
that
we
we
want
want
to
to
display
display
to
to
the
the
user
user
on
on
the
the
front
front
end.
end
So
so
we'll
we'll
go
go
ahead
ahead
and
and
send
send
that
that
as
as
the
the
response
response
from
from
this
this
function.
function
Now,
now
we'll
we'll
go
go
ahead
ahead
and
and
set
set
this
this
up
up
in
in
an
an
Angular
angular
app
app
in
in
just
just
a
a
minute,
minute
but
but
let's
let's
start
start
by
by
looking
looking
at
at
how
how
this
this
works
works
with
with
just
just
a
a
regular
regular
HTTP
http
call.
call
You
you
can
can
go
go
ahead
ahead
and
and
serve
serve
the
the
functions
functions
locally
locally
and
and
then
then
pull
pull
up
up
your
your
favorite
favorite
HTTP
http
client
client
to
to
make
make
the
the
request.
request
What
what
you'll
you'll
notice
notice
is
is
we
we
have
have
a
a
session
session
ID
id
which
which
is
is
usually
usually
unique
unique
per
per
user,
user
so
so
you
you
might
might
use
use
a
a
user
user
ID
id
or
or
something
something
like
like
that.
that
And
and
then
then
the
the
query
query
input
input
is
is
the
the
actual
actual
message
message
sent
sent
by
by
the
the
user,
user
in
in
which
which
case
case
you're
you're
required
required
to
to
provide
provide
the
the
actual
actual
string
string
text
text
and
and
the
the
language
language
code.
code
So
so
if
if
the
the
user
user
says
says
update
update
my
my
profile
profile
to
to
the
the
bot,
bot
the
the
bot's
bot's
going
going
to
to
respond
respond
by
by
trying
trying
to
to
collect
collect
those
those
parameters
parameters
that
that
we
we
set
set
up
up
in
in
Dialogflow.
dialogflow
So
so
you
you
can
can
see
see
here
here
that
that
it's
it's
asking
asking
what
what
is
is
your
your
preferred
preferred
name?
name
So
so
if
if
we
we
send
send
another
another
request
request
with
with
our
our
preferred
preferred
name,
name
it
it
will
will
move
move
on
on
to
to
the
the
next
next
parameter
parameter
it
it
needs
needs
to
to
collect
collect
which
which
is
is
the
the
favorite
favorite
color.
color
So
so
it'll
it'll
ask
ask
what
what
is
is
your
your
favorite
favorite
color?
color
Then
then
if
if
we
we
go
go
ahead
ahead
and
and
respond
respond
with
with
the
the
favorite
favorite
color,
color
that
that
will
will
fulfill
fulfill
the
the
intent,
intent
so
so
it's
it's
going
going
to
to
trigger
trigger
our
our
fulfillment
fulfillment
webhook
webhook
which
which
we
we
haven't
haven't
defined
defined
yet
yet
and
and
respond
respond
with
with
whatever
whatever
dynamically
dynamically
generated
generated
text
text
that
that
is
is
provided
provided
by
by
that
that
function.
function
In
in
other
other
words,
words
we've
we've
reached
reached
the
the
end
end
of
of
the
the
conversation.
conversation
So
so
if
if
we
we
try
try
to
to
send
send
the
the
color
color
blue
blue
again,
again
it's
it's
going
going
to
to
Sean
sean
with,
with
sorry,
sorry
what
what
was
was
that?
that
Because
because
saying
saying
the
the
color
color
blue
blue
no
no
longer
longer
makes
makes
sense
sense
within
within
the
the
context
context
of
of
the
the
conversation.
conversation
Now
now
let's
let's
head
head
back
back
over
over
to
to
our
our
functions
functions
Choad,
choad
and
and
we'll
we'll
set
set
up
up
a
a
separate
separate
Cloud
cloud
function
function
here
here
for
for
the
the
webhook.
webhook
This
this
is
is
also
also
an
an
HTTP
http
function,
function
but
but
there's
there's
no
no
need
need
to
to
wrap
wrap
it
it
in
in
cores
cores
because
because
we're
we're
not
not
calling
calling
it
it
directly
directly
from
from
the
the
front
front
end
end
app.
app
And
and
then
then
we'll
we'll
initialize
initialize
an
an
instance
instance
of
of
the
the
Webhook
webhook
client
client
using
using
the
the
request
request
and
and
response.
response
Now,
now
it's
it's
important
important
to
to
point
point
out
out
that
that
this
this
Cloud
cloud
function
function
will
will
be
be
called
called
for
for
all
all
intentions
intentions
that
that
are
are
to
to
be
be
fulfilled
fulfilled
by
by
Webhooks
webhooks
for
for
your
your
chatbot,
chatbot
in
in
the
the
default
default
sample
sample
code
code
you'll
you'll
notice
notice
a
a
couple
couple
of
of
functions
functions
here
here
called
called
welcome
welcome
and
and
fallback.
fallback
Currently,
currently
these
these
functions
functions
will
will
never
never
be
be
called
called
because
because
you'll
you'll
notice
notice
that
that
on
on
the
the
Dialogflow
dialogflow
console
console
so
so
we
we
don't
don't
have
have
webhook
webhook
fulfillment
fulfillment
enabled
enabled
for
for
these
these
intents.
intents
But
but
if
if
we
we
were
were
to
to
enable
enable
those,
those
then
then
the
the
bot
bot
would
would
use
use
these
these
functions
functions
instead
instead
of
of
whatever
whatever
you
you
specify
specify
in
in
the
the
Dialogflow
dialogflow
console.
console
When
when
it
it
comes
comes
to
to
our
our
custom
custom
intent,
intent
we
we
want
want
to
to
set
set
up
up
a
a
function
function
here
here
that
that
will
will
update
update
the
the
back
back
end
end
database,
database
which
which
is
is
Firestore,
firestore
with
with
the
the
new
new
information
information
that
that
the
the
user
user
passed
passed
to
to
the
the
bot.
bot
We
we
can
can
easily
easily
handle
handle
that
that
in
in
a
a
Cloud
cloud
Function
function
because
because
we
we
already
already
have
have
access
access
to
to
the
the
admin
admin
database.
database
So
so
we
we
can
can
simply
simply
perform
perform
a
a
write
write
with
with
the
the
parameters
parameters
that
that
were
were
passed
passed
in
in
on
on
this
this
request.
request
And
and
once
once
that
that
back
back
end
end
work
work
is
is
done,
done
then
then
we'll
we'll
simply
simply
add
add
a
a
message
message
to
to
the
the
agent,
agent
and
and
that's
that's
what
what
the
the
user
user
will
will
see
see
as
as
the
the
response
response
from
from
the
the
bot.
bot
Now
now
because
because
this
this
Cloud
cloud
Function
function
is
is
handling
handling
multiple
multiple
intents,
intents
we
we
need
need
to
to
map
map
them
them
into
into
an
an
object
object
that
that
can
can
be
be
called
called
based
based
on
on
the
the
intent
intent
name.
name
The
the
default
default
code
code
uses
uses
a
a
JavaScript
javascript
map
map
for
for
that,
that
so
so
we'll
we'll
continue
continue
to
to
follow
follow
the
the
same
same
pattern
pattern
and
and
simply
simply
add
add
our
our
functions
functions
as
as
properties
properties
on
on
the
the
map
map
with
with
the
the
corresponding
corresponding
intent
intent
name.
name
At
at
this
this
point
point
you
you
can
can
go
go
ahead
ahead
and
and
deploy
deploy
the
the
functions
functions
by
by
running
running
Firebase
firebase
deploy
deploy
only
only
functions.
functions
And
and
you
you
should
should
now
now
have
have
a
a
fully
fully
functional
functional
chatbot
chatbot
that
that
can
can
do
do
more
more
than
than
just
just
respond
respond
to
to
messages.
messages
But
but
the
the
one
one
thing
thing
we're
we're
still
still
missing
missing
is
is
a
a
front
front
end
end
UI
ui
for
for
the
the
user
user
to
to
actually
actually
interact
interact
with
with
a
a
bot
bot
in
in
a
a
web
web
application
application
setting.
setting
For
for
that
that
we're
we're
going
going
to
to
use
use
Angular
angular
and
and
this
this
awesome
awesome
free
free
theme
theme
called
called
Nebula.
nebula
Not
not
only
only
does
does
Nebula
nebula
look
look
awesome,
awesome
but
but
it
it
also
also
has
has
a
a
full
full
chat
chat
UI
ui
module
module
that
that
we
we
can
can
use
use
to
to
build
build
our
our
chatbot
chatbot
very
very
quickly.
quickly
We
we
can
can
install
install
it
it
easily
easily
in
in
an
an
existing
existing
Angular
angular
app
app
by
by
simply
simply
running
running
ng
ng
add
add
nebular
nebular
theme.
theme
That
that
will
will
install
install
everything
everything
automatically
automatically
in
in
your
your
project
project
and
and
then
then
if
if
you
you
go
go
in
in
the
the
App
app
module,
module
you
you
can
can
see
see
I'm
i'm
importing
importing
the
the
nbchatui
nbchatui
module
module
as
as
well
well
as
as
the
the
spinner
spinner
module.
module
Then
then
the
the
only
only
other
other
Angular
angular
feature
feature
that
that
we
we
need
need
to
to
add
add
here
here
is
is
the
the
HTTP
http
gdpClientModule,
gdpclientmodule
and
and
you'll
you'll
find
find
that
that
under
under
the
the
Angular
angular
common
common
namespace.
namespace
From
from
there,
there
I'm
i'm
generating
generating
a
a
component
component
called
called
Chatbot
chatbot
that
that
will
will
just
just
encapsulate
encapsulate
all
all
of
of
our
our
logic,
logic
and
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
declare
declare
our
our
chatbot
chatbot
in
in
the
the
App
app
component.
component
Now
now
I
i
first
first
want
want
to
to
go
go
through
through
the
the
code
code
in
in
the
the
template
template
because
because
Nebula
nebula
is
is
going
going
to
to
take
take
care
care
of
of
all
all
the
the
heavy
heavy
lifting
lifting
here.
here
First,
first
we'll
we'll
declare
declare
the
the
nbChat
nbchat
component,
component
which
which
is
is
basically
basically
just
just
a
a
wrapper
wrapper
to
to
hold
hold
the
the
messages
messages
and
and
the
the
form.
form
In
in
order
order
to
to
display
display
a
a
list
list
of
of
messages
messages
from
from
both
both
the
the
bot
bot
and
and
the
the
user,
user
we'll
we'll
set
set
up
up
the
the
nbChat
nbchat
message
message
component
component
and
and
then
then
we'll
we'll
loop
loop
over
over
it
it
using
using
n
n
g
g
4.
4
Now
now
each
each
message
message
can
can
be
be
customized
customized
with
with
a
a
variety
variety
of
of
input
input
parameters.
parameters
I
i
recommend
recommend
checking
checking
out
out
the
the
Nebula
nebula
docs
docs
for
for
all
all
the
the
options,
options
but
but
we'll
we'll
definitely
definitely
want
want
to
to
pass
pass
in
in
the
the
message
message
text
text
and
and
then
then
we'll
we'll
determine
determine
whether
whether
or
or
not
not
it's
it's
a
a
reply
reply
to
to
the
the
bot.
bot
And
and
we
we
can
can
also
also
pass
pass
in
in
a
a
date
date
and
and
a
a
user
user
avatar
avatar
image.
image
And
and
then
then
also
also
in
in
the
the
full
full
source
source
code,
code
you'll
you'll
notice
notice
I've
i've
added
added
a
a
second
second
message
message
that
that
simply
simply
shows
shows
a
a
loading
loading
spinner
spinner
when
when
the
the
bot
bot
is
is
responding.
responding
And
and
that
that
can
can
be
be
accomplished
accomplished
easily
easily
because
because
Nebula
nebula
ships
ships
with
with
a
a
spinner
spinner
directive.
directive
Then
then
the
the
last
last
thing
thing
we'll
we'll
add
add
is
is
the
the
EnvyChat
envychat
form,
form
which
which
has
has
its
its
own
own
send
send
event,
event
which
which
will
will
be
be
fired
fired
if
if
the
the
GISR
gisr
clicks
clicks
the
the
send
send
button
button
or
or
if
if
they
they
hit
hit
the
the
enter
enter
key.
key
Now
now
moving
moving
over
over
to
to
the
the
component
component
TypeScript,
typescript
the
the
only
only
thing
thing
we
we
really
really
need
need
is
is
Angular's
angular's
HTTP
http
client
client
and
and
it's
it's
used
used
to
to
make
make
requests
requests
to
to
the
the
Dialogflow
dialogflow
gateway
gateway
function
function
that
that
we
we
defined
defined
earlier.
earlier
Now
now
moving
moving
into
into
the
the
actual
actual
component
component
class,
class
we'll
we'll
set
set
up
up
an
an
empty
empty
array
array
of
of
messages,
messages
the
the
initial
initial
loading
loading
state
state
will
will
be
be
set
set
to
to
false
false
and
and
then
then
we'll
we'll
set
set
up
up
a
a
session
session
ID
id
by
by
just
just
generating
generating
a
a
random
random
string.
string
You
you
could
could
use
use
a
a
user
user
ID
id
here
here
or
or
something
something
a
a
little
little
more
more
but
but
this
this
will
will
work
work
for
for
now.
now
Now
now
when
when
pushing
pushing
messages
messages
to
to
the
the
array,
array
we
we
have
have
a
a
slightly
slightly
different
different
set
set
of
of
data
data
for
for
the
the
bot
bot
versus
versus
a
a
user.
user
When
when
it's
it's
a
a
user
user
generated
generated
message,
message
the
the
most
most
important
important
thing
thing
is
is
that
that
we
we
set
set
the
the
reply
reply
property
property
to
to
true.
true
And
and
Nebula
nebula
will
will
handle
handle
all
all
of
of
the
the
styling
styling
to
to
display
display
the
the
message
message
on
on
the
the
right
right
side.
side
And
and
then
then
we'll
we'll
set
set
a
a
similar
similar
method
method
for
for
a
a
bot
bot
message
message
with
with
the
the
only
only
difference
difference
being
being
that
that
the
the
Avatar
avatar
property
property
is
is
defined.
defined
When
when
the
the
user
user
first
first
lands
lands
on
on
the
the
app,
app
we'll
we'll
go
go
ahead
ahead
and
and
add
add
a
a
bot
bot
message
message
so
so
they
they
know
know
that
that
the
the
bot
bot
is
is
present
present
and
and
ready
ready
to
to
help
help
out.
out
But
but
Dialogflow
dialogflow
doesn't
doesn't
really
really
need
need
to
to
kick
kick
in
in
until
until
the
the
user
user
actually
actually
sends
sends
a
a
message.
message
So
so
when
when
they
they
do
do
send
send
a
a
message,
message
we'll
we'll
go
go
ahead
ahead
and
and
add
add
that
that
message
message
to
to
the
the
chat
chat
and
and
then
then
we'll
we'll
set
set
the
the
loading
loading
state
state
to
to
true.
true
Then
then
we
we
can
can
make
make
an
an
HTTP
http
post
post
request
request
in
in
Angular
angular
I
i
call
call
HTTP
http
post,
post
and
and
then
then
we'll
we'll
set
set
the
the
generic
generic
type
type
to
to
any
any
and
and
pass
pass
it
it
our
our
Dialogflow
dialogflow
URL.
url
Then
then
the
the
second
second
argument
argument
is
is
an
an
object
object
for
for
the
the
request
request
body.
body
The
the
Cloud
cloud
Function
function
will
will
be
be
looking
looking
for
for
a
a
session
session
ID
id
and
and
then
then
also
also
a
a
query
query
input
input
object.
object
And
and
that
that
query
query
input
input
object
object
will
will
contain
contain
the
the
text
text
that
that
the
the
user
user
has
has
typed
typed
into
into
our
our
chat
chat
form.
form
From
from
there,
there
we
we
can
can
actually
actually
make
make
the
the
request
request
by
by
calling
calling
subscribe.
subscribe
The
the
response
response
we
we
get
get
back
back
will
will
contain
contain
the
the
fulfillment
fulfillment
text,
text
which
which
is
is
the
the
next
next
message
message
that
that
the
the
bot
bot
is
is
saying
saying
to
to
the
the
user.
user
And
and
then
then
we'll
we'll
also
also
set
set
the
the
loading
loading
state
state
to
to
false.
false
And
and
that's
that's
all
all
there
there
is
is
to
to
when
when
you
you
combine
combine
Angular
angular
with
with
the
the
Nebula
nebula
theme,
theme
building
building
a
a
chat
chat
UI
ui
is
is
extremely
extremely
simple.
simple
I
i
think
think
we've
we've
covered
covered
just
just
about
about
enough
enough
code
code
for
for
one
one
day,
day
so
so
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you
you
please
please
like
like
and
and
subscribe
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO
io
to
to
get
get
access
access
to
to
even
even
more
more
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss the potential for job disruption and dis Spain, with a focus on chatbots and the architecture of a chatbot. They explain how Dialogflow works in a cloud function, including creating a new agent and setting up parameters and actions. They also discuss the process of collecting data and updating user profiles, setting up parameters and actions, and import services. The speakers provide instructions on how to set up code and create a chatbot, and explain how to use the Cloud function for building a chat UI and the use of the response body in the chat form.
Build a Chatbot from Scratch - Dialogflow on Node.js
Certainly be a lot of job disruption, um, because what's gonna happen is ROAS will be able to do everything better than us. Looking back at 2017, chatbots were the next big thing. They were supposed to eliminate millions of call center jobs, replace lawyers, and prevent end users from ever having to fill out an HTML form again. Now now it's 2019 and we're well past the peak of the hype cycle. And I would say chatbots largely failed to live up to their expectations. But something to keep in mind is that we always overestimate the change that will occur in the 2 years, and underestimate the change that will occur in the next 10. I think chat bots are currently sitting somewhere in the trough of disillusionment, but conversational experiences can be very when tailored to a specific business need. And in today's video, you'll learn how to build a chatbot from scratch using Dialogflow Node. Js and Cloud functions. If you're new here, like and subscribe, and you can find the full source code on Fireship IO. What we're building today is a simple chatbot that can collect information from a user and then save that information permanently in a back end database. The natural language processing technology or artificial intelligence, if you will, is powered by Dialogflow, which is a tool for building virtual agents that can intelligently respond to user input, whether it be voice or text. After the agent has collected the information it needs, it can pass that information off to a back end cloud function, and that function can do whatever it wants to fulfill the request on the back end, which might be something like sending an email, processing a payment, or updating the database for example, when you build a chatbot with Dialogflow, you can automatically integrate it with a bunch of different platforms like Facebook Messenger, Slack, and you can now even connect it directly to a phone line. But today, we're going to directly interact with the Dialogflow API with a node back end. Let's go ahead and take a look at the full architecture that we'll cover in today's video. On the left here, we have our front end application, which is where the user interacts with the bot. In this demo we use Angular for the front end UI, but feel free to replace it with the front end framework of your choice. Because all that front end application needs to do is make API calls to our gateway cloud function. This function essentially serves as a proxy to make secure calls to the Dialogflow API. So the user will enter their message in the front end application, which will then pass off to the Cloud Function with an HTTP call. We'll then pass that message to the bot, which will give us a response that we can send back down to the client. Now, the thing to keep in mind here is that a conversation will take place over multiple steps. But at some point, the conversation will finish and the user's intention will be fulfilled. When that happens, Dialogflow will send a webhook to a separate cloud function. This function can be used to handle additional work on the back end and dynamically compute the bot's response. So that's how things work from a high level. At this point, you'll want to have a Firebase project and then head over to the Dialogflow console. The first thing we'll do on the Dialogflow console is create a new agent. An agent represents an individual chatbot, and a chatbot is really just a tool that takes user input like text speech and translates it into structured data that you can use in your app. I like to think of Dialogflow as a virtual call center and the agent is a customer service representative that's been trained to solve a variety of different problems. When the user first receives some input, it needs to determine the user's intention Xin or the problem that they're trying to solve. For this demo, we'll create a new Intent that the user can trigger to update their user profile information. We'll give it a name of Update Profile and you'll see a bunch of different options here. So let's go through and talk about each one of them individually. First, we have Context, which is a little more advanced and we're not going to cover it in this video, but basically, it's a mechanism for passing data from one intent to another. Then the next option you'll see is Events, which is optional, but it's a way to trigger this intent without having the user do it manually. And this is useful in our case because we might have a user onboarding process and the user is not going to know which intent trigger. So this gives us a way to kick off a conversation programmatically in our code. Then from there, we have our training phrases. These are utterances or short phrases from the user that would trigger this intent. The machine learning algorithm is going to use natural language processing trying to figure out which phrases are similar to the ones that you add here. The more data you can add the better, but we'll just add a couple of short phrases here for now. Then Dialogflow will try to capture any phrases that are similar or that convey the same intent that you've listed here. After that, we have action and parameters. When naming an action, it's generally a good practice to use your domain name in reverse followed by the name of your intent, similar to a bundle ID for a mobile application. Now when a user triggers an intent, there's likely multiple pieces of data that you need to collect in order to be able to successfully solve the problem. And that's where parameters come in. You can set up optional and required parameters that Dialogflow will try to collect from the user. We're going to collect the user's display name, which will give a parameter name of name, and then you have the entity option which represents the type of data that you're trying to collect. And this allows Dialogflow to automatically validate the data that's being collected. And you can also create your own custom entity for whatever custom data that you're trying to collect. And you can also see here that we set up a prompt, which is what the agent will ask the user when trying to collect this data. Now after all the data has been collected, there are 2 ways to fulfill the intent. If you don't have any additional work to do on the back end, you can simply define a response in the Dialogflow console. But in a lot of cases, you want to update something in a database or maybe make an API call to a third party. So for that, you'll need to use a Webhook. And that will allow you to write custom code on your back end server to format the response dynamically and handle anything else that the user is trying to do. From there we can go ahead and save the intent and then we'll head over to the integrations tab. There's a whole bunch of different built in integrations like Facebook Messenger, Slack, Twitter, Twilio, and many others. And there's even a new one called Dialog Phone Gateway that allows you to connect to your chatbot with a phone number. And you'll also she won called web demo that lets you use your chatbot in a browser, but it doesn't allow you to customize the UI in any way. And that's because Cheswe need a back end like Node. Js in a Cloud function to interact with the chatbot, so that's what we're going to take care of next. The first thing I'll do is initialize Cloud Functions, selecting JavaScript as the language. From there, we can see the end of the functions directory. And for this first function, we'll want to install Dialogflow, which is the Dialogflow GI client and also cores because we'll be making requests from our front end application. Now when it comes to fulfillment, there's a separate library specifically for that called Dialogflow Fulfillment, and you'll also want to install actions on Google if using it. And you'll find the command to install all these with npm from the full lesson page. The first function that we'll build is a secure gateway that allows the front end application to communicate with Dialogflow on the back end. And we'll import cores, which will allow us to make requests from a front end app in the browser. But in order to work with Dialogflow in a Cloud function, we need to bring in an actual service account. This is really easy to do. We simply go to the Firebase console and go to the settings tab, then service account, and click the button to generate a new private key. This will give you a JSON file with your actual private API key which you can download into the functions directory. You'll just wanna make sure to keep this file secure because it contains your private API keys. So make sure to add it to your git ignore if you're using a public git repo. We'll go ahead and import the service account, and then we'll initialize Firebase admin using those credentials. And then we'll import the session client from Dialogflow. From there, we'll set up an HTTP Cloud function called Dialogflow gateway and then immediately wrap the request response with CORS. And again, that's there simply to allow requests to be made from a browser. Dialogflow is going to be looking for 2 things. The query input contains the data that the user is trying to save the bot, which will be in the form of text or audio. And the session ID is a unique ID that will generate on the client that allows the bot to determine the CHASS messages that were sent in this conversation. From there, we'll go ahead and initialize the session client with the service account, and then we can reference the actual session by calling path with our Firebase project ID and the session ID. Then the next thing we'll do is get an actual response from our chatbot, which we do by calling detect intent with the session and in the query input, which again will contain the text or audio that the user is saying to the bot. This will provide us with an array of responses, but we're really only interested in the first one. And the query result contains a bunch of information, but most importantly, it has the checks that we want to display to the user on the front end. So we'll go ahead and send that as the response from this function. Now, we'll go ahead and set this up in an Angular app in just a minute, but let's start by looking at how this works with just a regular HTTP call. You can go ahead and serve the functions locally and then pull up your favorite HTTP client to make the request. What you'll notice is we have a session ID which is usually unique per user, so you might use a user ID or something like that. And then the query input is the actual message sent by the user, in which case you're required to provide the actual string text and the language code. So if the user says update my profile to the bot, the bot's going to respond by trying to collect those parameters that we set up in Dialogflow. So you can see here that it's asking what is your preferred name? So if we send another request with our preferred name, it will move on to the next parameter it needs to collect which is the favorite color. So it'll ask what is your favorite color? Then if we go ahead and respond with the favorite color, that will fulfill the intent, so it's going to trigger our fulfillment webhook which we haven't defined yet and respond with whatever dynamically generated text that is provided by that function. In other words, we've reached the end of the conversation. So if we try to send the color blue again, it's going to Sean with, sorry, what was that? Because saying the color blue no longer makes sense within the context of the conversation. Now let's head back over to our functions Choad, and we'll set up a separate Cloud function here for the webhook. This is also an HTTP function, but there's no need to wrap it in cores because we're not calling it directly from the front end app. And then we'll initialize an instance of the Webhook client using the request and response. Now, it's important to point out that this Cloud function will be called for all intentions that are to be fulfilled by Webhooks for your chatbot, in the default sample code you'll notice a couple of functions here called welcome and fallback. Currently, these functions will never be called because you'll notice that on the Dialogflow console so we don't have webhook fulfillment enabled for these intents. But if we were to enable those, then the bot would use these functions instead of whatever you specify in the Dialogflow console. When it comes to our custom intent, we want to set up a function here that will update the back end database, which is Firestore, with the new information that the user passed to the bot. We can easily handle that in a Cloud Function because we already have access to the admin database. So we can simply perform a write with the parameters that were passed in on this request. And once that back end work is done, then we'll simply add a message to the agent, and that's what the user will see as the response from the bot. Now because this Cloud Function is handling multiple intents, we need to map them into an object that can be called based on the intent name. The default code uses a JavaScript map for that, so we'll continue to follow the same pattern and simply add our functions as properties on the map with the corresponding intent name. At this point you can go ahead and deploy the functions by running Firebase deploy only functions. And you should now have a fully functional chatbot that can do more than just respond to messages. But the one thing we're still missing is a front end UI for the user to actually interact with a bot in a web application setting. For that we're going to use Angular and this awesome free theme called Nebula. Not only does Nebula look awesome, but it also has a full chat UI module that we can use to build our chatbot very quickly. We can install it easily in an existing Angular app by simply running ng add nebular theme. That will install everything automatically in your project and then if you go in the App module, you can see I'm importing the nbchatui module as well as the spinner module. Then the only other Angular feature that we need to add here is the HTTP gdpClientModule, and you'll find that under the Angular common namespace. From there, I'm generating a component called Chatbot that will just encapsulate all of our logic, and then we'll go ahead and declare our chatbot in the App component. Now I first want to go through the code in the template because Nebula is going to take care of all the heavy lifting here. First, we'll declare the nbChat component, which is basically just a wrapper to hold the messages and the form. In order to display a list of messages from both the bot and the user, we'll set up the nbChat message component and then we'll loop over it using n g 4. Now each message can be customized with a variety of input parameters. I recommend checking out the Nebula docs for all the options, but we'll definitely want to pass in the message text and then we'll determine whether or not it's a reply to the bot. And we can also pass in a date and a user avatar image. And then also in the full source code, you'll notice I've added a second message that simply shows a loading spinner when the bot is responding. And that can be accomplished easily because Nebula ships with a spinner directive. Then the last thing we'll add is the EnvyChat form, which has its own send event, which will be fired if the GISR clicks the send button or if they hit the enter key. Now moving over to the component TypeScript, the only thing we really need is Angular's HTTP client and it's used to make requests to the Dialogflow gateway function that we defined earlier. Now moving into the actual component class, we'll set up an empty array of messages, the initial loading state will be set to false and then we'll set up a session ID by just generating a random string. You could use a user ID here or something a little more but this will work for now. Now when pushing messages to the array, we have a slightly different set of data for the bot versus a user. When it's a user generated message, the most important thing is that we set the reply property to true. And Nebula will handle all of the styling to display the message on the right side. And then we'll set a similar method for a bot message with the only difference being that the Avatar property is defined. When the user first lands on the app, we'll go ahead and add a bot message so they know that the bot is present and ready to help out. But Dialogflow doesn't really need to kick in until the user actually sends a message. So when they do send a message, we'll go ahead and add that message to the chat and then we'll set the loading state to true. Then we can make an HTTP post request in Angular I call HTTP post, and then we'll set the generic type to any and pass it our Dialogflow URL. Then the second argument is an object for the request body. The Cloud Function will be looking for a session ID and then also a query input object. And that query input object will contain the text that the user has typed into our chat form. From there, we can actually make the request by calling subscribe. The response we get back will contain the fulfillment text, which is the next message that the bot is saying to the user. And then we'll also set the loading state to false. And that's all there is to when you combine Angular with the Nebula theme, building a chat UI is extremely simple. I think we've covered just about enough code for one day, so I'm gonna go ahead and wrap things up there. If this video helped you please like and subscribe and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
The speakers discuss the potential for job disruption and dis Spain, with a focus on chatbots and the architecture of a chatbot. They explain how Dialogflow works in a cloud function, including creating a new agent and setting up parameters and actions. They also discuss the process of collecting data and updating user profiles, setting up parameters and actions, and import services. The speakers provide instructions on how to set up code and create a chatbot, and explain how to use the Cloud function for building a chat UI and the use of the response body in the chat form.