Learn how to build an awesome chatbot in Angular using Dialogflow (formerly API.ai). In this video go from brand new app to chatbot in about 10 minutes. https://angularfirebase.com/lessons/chatbot-in-angular-with-dialogflow-api-ai/

Dialogflow: https://dialogflow.com/
Angular: https://angular.io/
NLP: https://en.wikipedia.org/wiki/Natural_language_processing
2024-02-04T07:59:55.135Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c0df3c85-d67e-4743-baac-8fd78e131b6d
5647878fbf0635800b2662ebb00656fd58a2d7659845c3d25da5e4c68cf86e92
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Building a chatbot with Angular and Dialogflow is almost too easy.
In this video, I'm gonna show you how to go from 0 to chatbot in about 10 minutes.
Dialogflow, which was formerly known as API dot AI, is an engine for building conversational experiences.
It harnesses Google's machine learning and natural language processing technology, then gives developers a user friendly interface to build chatbots and deploy them to any platform including the web or Slack or Facebook Messenger.
In this episode, we're going to use the JavaScript SDK to build our chatbot directly in Angular.
This is just the first video of a multipart series, so make sure to subscribe if you're just finding me for the first time.
And head over to AngularFirebase dotcom to grab the source code for this feature.
Let's start by building a new Angular app from the command line using ng new chatbot, and then we'll CD into that folder, then we'll install the JavaScript SDK via NPM in the development environment.
At this point, the SDK is still called API AI, but that may change to Dialogflow in the future.
Then I'm going to tell the Angular CLI to not prefix our components with app.
So we can just go into the Angular CLI JSON file and replace app with an empty string.
So at this point, if you run ng serve, you should just have a basic Angular app.
The next step is to flush out a feature module for our code.
This step is technically optional, but it is a good practice and it will make your life a lot easier as your app grows more complex.
First step is to generate a module called chat, then we can add resources to this module, for example, a service, and we'll use the m flag to make sure that it's included in this module.
And then we'll also create a component called chat dialogue and place that in the module as well.
You can see on the file structure on the left how all of our resources are nested under the chat folder, and the components and services are registered inside the chat module.
The only extra bit that we need to add is the Angular forms module, and then we're also going to set our chat dialogue component to exports so it can be used directly in the app component.
You might also do this with the router, but our app doesn't have a router so we're not going to worry about it.
Then we're going to jump over to our main app module entry point and import the chat module there.
So all we have to do is add it to the import section.
Now we can go into the app component and we'll just delete the default code and we'll declare our chat dialogue component here.
If you pull up the app, you should see the chat dialogue component works.
Now we can get into the fun part of actually building our chatbot in Dialogflow.
So go ahead and sign up and it's a completely free service so you don't even have to enter any kind of billing information, and then create your first agent.
So in this case, I'm just gonna call the agent AngularBot, and its purpose as a chatbot is to just return general information about the Angular framework itself.
So let's go ahead and call it a sidekick for Angular developers.
The most fundamental purpose of your agent is to detect intent that comes from the user.
Let's say our user enters something like, what is a component?
If the chatbot has been trained to recognize this phrase, it will detect the intent, and then you can run back end code at this point or just send a response down to the user.
In this case, we'll just tell it to respond with it's just JavaScript.
When the bot doesn't recognize the intent, then you can have it respond with any kind of customized message that you want.
Dialogflow allows you to customize this in many different ways, But for now, we're just going to focus on the back and forth dialogue between the user and the bot.
The first thing you'll do here is add a phrase that the user might say.
And you wanna add multiple phrases here to make your bot more robust to different types of ways of expressing this intent.
The next thing we'll do is have the bot send a response once it recognizes this intent.
So in this case, if it recognizes the component intent, it'll just say it's just JavaScript.
Go ahead and save the intent, and then up here on the top right corner you can test it out.
So I'll say, hey, what's a component do?
And then you can see we get the response here and and we can also look at the JSON response that we'll see once we get back into Angular.
So that's actually all it takes to build a basic chatbot with Dialogflow, but I also wanna show you a really cool feature called small talk.
This allows you to quickly customize the personality of your bot without having to create your own custom intents.
So it already has a huge list of possible scenarios here, and you can add your own custom language to them.
So if the user says who are you to the bot, it's going to respond with I'm Angular bot.
I know stuff about Angular.
This is a great place to impress your users by adding funny or intelligent responses to these common questions.
Now that we have a basic agent, let's go ahead and put it to use in Angular.
Before we leave Dialogflow, we need to grab the client access token.
So we do that by clicking on the agent.
Then from the main agent page, we can just copy the client access token right there.
Then we'll go back into Angular and add that client token inside of our environment TS file.
In some cases, it's not secure to add an API key here, but since Dialogflow is free and doesn't have write access, we're okay to do it.
If you wanna learn more about API Security, check out my Dark Sky API video.
The first thing I wanna show you is how to communicate with your bot.
So we're going to go back into the service that we created earlier and we'll import the environment that we just added our API token to as well as the API AI client that we had installed at the beginning of the video.
First, I'm going to set a read only variable for the token, and then I'll go ahead and use that token to initialize the API AI client.
So we just set that as another variable called client and pass it the API token.
Then we're going to send a basic text request to the bot.
So I'm gonna set up a method here called talk And then to make this request, we just call client text request with the text that we wanna send.
This sends an HTTP request about 2 Dialogflow which then responds with JSON of the actual response from the agent.
So we'll just console log that to see what the data actually looks like.
So I can set this up by going into our chat dialogue component, and then I'll inject the chat service in the constructor, and then I can just call that talk method that we just defined.
Then you can see the response is just a plain JavaScript object.
We don't even have to parse it.
And it has all of this information including the fulfillment speech, which is the actual text we're looking for which is what the bot is saying back to the user.
So that's how you get the raw data, but now Let's refactor things so we get something that's a little more user friendly.
I'm going to use RxJS to create an observable array of messages.
So I'm going to import observable as well as behavior subject.
And then I'm going to create a message class just to define the way a message should look.
So it's just gonna have content, which is a string, and it's also going to have a sent by property to distinguish between bots and humans.
Then inside the chat service, I'm going to set a variable called conversation that is a behavior subject typed to an array of messages with a default value as an empty array.
Then to make updates to this array, I'm going to create a function here that is called update.
This just calls next on the behavior subject and it will clean up our code a little bit.
So anytime we wanna add a new message to the message feed, we just call this method with the corresponding message object.
So the conversation is going to start with a message from the user.
That message is going to be in the form of a string, so we'll just go ahead and take that string and convert it to our message object.
So we'll set the content equal to the message and, uh, sent by property to the user.
Then to add this to the UI, we'll just call this dot update with the user message.
Once we have that, we can go ahead and send the request to Dialogflow with that text.
Just like we did before, we'll call client text request, which returns a promise, and then we'll take the response from that promise and format it as a message from the bot.
So we can get the bot's actual text response from result fulfillment speech.
Then just like we do with the user message, we'll make this an instance of the message class and then call the update method on it.
So let's go ahead and switch over to the chat dialogue component and put this service to use.
First, we're going to import the chat service as well as the message class that we had defined in there.
And then we're also going to need an RxJS observable class and the RxJS scan operator.
So we want our messages to be an observable array of messages.
So we'll be able to do that by tapping into the behavior subject that we created in the service.
So we'll set a variable for messages and then also one for the form value which we'll see once we get to the HTML.
Then we can go ahead and inject the chat service in the constructor.
Then we need to convert that behavior subject into an observable array.
So let's see how we can do that with the scan operator.
We'll go ahead and call the behavior subject as an observable.
So chat service conversation as observable, and then we'll add the scan operator to it.
So scan gives us the current value as well as the accumulated total in that behavior subject.
So what we can do is use those two values to concatenate a new array together.
In JavaScript, that's as simple as saying old array concat a new array.
The end result is an observable array that we can loop over in the HTML with the async pipe as we'll see here shortly.
So the next thing we need to do is have the user send a message.
So we can do that by taking the form value, which we'll set up with ng model here in the HTML.
Then we can call the converse method from the service.
So this is just an event handler that will bind to some events in the HTML.
So the first thing I wanna do here is loop over that observable list of messages.
Uh, we can do that with n g 4 and the async pipe.
So that will give us access to the message object.
Then I'm going to use ngClass to distinguish the bot messages from the actual human messages.
So the from messages will be sent by the bot and the 2 messages will be sent by the user.
Then we can just drop in the message content, and that's all we need to show the message.
The other step is to set up a form so the user can actually type their message.
The quickest way to take care of that is with NG model.
So we just set up a form input here with NG model set to the form value.
And then when the user clicks the enter button, we'll go ahead and fire that event handler that will send the message to Dialogflow.
And then I'll also go ahead and set up a button here that fires the event handler on click as well in case the user doesn't have an enter button.
If you want the same front end styling I have here, you'll need to include the milligram CSS framework in your project and I also posted the custom CSS styles on the main lesson page.
Now let's load our Angular app and try it out.
If we say hello there, the bot responds with good day.
So we respond with how are you?
And the bot says couldn't be better.
These are the default responses from Smalltalk, but you can customize this behavior any way you want.
For example, we customize the who are you intent.
So if we ask that question, then we should get back, about I'm Angular bot.
I know stuff about Angular.
Then we can trigger our custom intent by saying, what is that component, mister bot?
Dialogflow is smart enough to detect the corresponding intent and it responds with it's just JavaScript.
When we're all done, we can just say see you later and the bot responds with goodbye.
That's it for Angular Dialogflow.
If this video helped you, please like and subscribe.
And if you wanna take your chatbot to the next level and deploy it to other platforms, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book as well as 1 on 1 project consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: Building a chatbot with Angular and Dialogflow is almost too easy. In this video, I'm gonna show you how to go from 0 to chatbot in about 10 minutes. Dialogflow, which was formerly known as API dot AI, is an engine for building conversational experiences. It harnesses Google's machine learning and natural language processing technology, then gives developers a user friendly interface to build chatbots and deploy them to any platform including the web or Slack or Facebook Messenger. In this episode, we're going to use the JavaScript SDK to build our chatbot directly in Angular.

This is just the first video of a multipart series, so make sure to subscribe if you're just finding me for the first time. And head over to AngularFirebase dotcom to grab the source code for this feature. Let's start by building a new Angular app from the command line using ng new chatbot, and then we'll CD into that folder, then we'll install the JavaScript SDK via NPM in the development environment. At this point, the SDK is still called API AI, but that may change to Dialogflow in the future. Then I'm going to tell the Angular CLI to not prefix our components with app.

So we can just go into the Angular CLI JSON file and replace app with an empty string. So at this point, if you run ng serve, you should just have a basic Angular app. The next step is to flush out a feature module for our code. This step is technically optional, but it is a good practice and it will make your life a lot easier as your app grows more complex. First step is to generate a module called chat, then we can add resources to this module, for example, a service, and we'll use the m flag to make sure that it's included in this module.

And then we'll also create a component called chat dialogue and place that in the module as well. You can see on the file structure on the left how all of our resources are nested under the chat folder, and the components and services are registered inside the chat module. The only extra bit that we need to add is the Angular forms module, and then we're also going to set our chat dialogue component to exports so it can be used directly in the app component. You might also do this with the router, but our app doesn't have a router so we're not going to worry about it. Then we're going to jump over to our main app module entry point and import the chat module there.

So all we have to do is add it to the import section. Now we can go into the app component and we'll just delete the default code and we'll declare our chat dialogue component here. If you pull up the app, you should see the chat dialogue component works. Now we can get into the fun part of actually building our chatbot in Dialogflow. So go ahead and sign up and it's a completely free service so you don't even have to enter any kind of billing information, and then create your first agent.

So in this case, I'm just gonna call the agent AngularBot, and its purpose as a chatbot is to just return general information about the Angular framework itself. So let's go ahead and call it a sidekick for Angular developers. The most fundamental purpose of your agent is to detect intent that comes from the user. Let's say our user enters something like, what is a component? If the chatbot has been trained to recognize this phrase, it will detect the intent, and then you can run back end code at this point or just send a response down to the user.

In this case, we'll just tell it to respond with it's just JavaScript. When the bot doesn't recognize the intent, then you can have it respond with any kind of customized message that you want. Dialogflow allows you to customize this in many different ways, But for now, we're just going to focus on the back and forth dialogue between the user and the bot. The first thing you'll do here is add a phrase that the user might say. And you wanna add multiple phrases here to make your bot more robust to different types of ways of expressing this intent.

The next thing we'll do is have the bot send a response once it recognizes this intent. So in this case, if it recognizes the component intent, it'll just say it's just JavaScript. Go ahead and save the intent, and then up here on the top right corner you can test it out. So I'll say, hey, what's a component do? And then you can see we get the response here and and we can also look at the JSON response that we'll see once we get back into Angular.

So that's actually all it takes to build a basic chatbot with Dialogflow, but I also wanna show you a really cool feature called small talk. This allows you to quickly customize the personality of your bot without having to create your own custom intents. So it already has a huge list of possible scenarios here, and you can add your own custom language to them. So if the user says who are you to the bot, it's going to respond with I'm Angular bot. I know stuff about Angular.

This is a great place to impress your users by adding funny or intelligent responses to these common questions. Now that we have a basic agent, let's go ahead and put it to use in Angular. Before we leave Dialogflow, we need to grab the client access token. So we do that by clicking on the agent. Then from the main agent page, we can just copy the client access token right there.

Then we'll go back into Angular and add that client token inside of our environment TS file. In some cases, it's not secure to add an API key here, but since Dialogflow is free and doesn't have write access, we're okay to do it. If you wanna learn more about API Security, check out my Dark Sky API video. The first thing I wanna show you is how to communicate with your bot. So we're going to go back into the service that we created earlier and we'll import the environment that we just added our API token to as well as the API AI client that we had installed at the beginning of the video.

First, I'm going to set a read only variable for the token, and then I'll go ahead and use that token to initialize the API AI client. So we just set that as another variable called client and pass it the API token. Then we're going to send a basic text request to the bot. So I'm gonna set up a method here called talk And then to make this request, we just call client text request with the text that we wanna send. This sends an HTTP request about 2 Dialogflow which then responds with JSON of the actual response from the agent.

So we'll just console log that to see what the data actually looks like. So I can set this up by going into our chat dialogue component, and then I'll inject the chat service in the constructor, and then I can just call that talk method that we just defined. Then you can see the response is just a plain JavaScript object. We don't even have to parse it. And it has all of this information including the fulfillment speech, which is the actual text we're looking for which is what the bot is saying back to the user.

So that's how you get the raw data, but now Let's refactor things so we get something that's a little more user friendly. I'm going to use RxJS to create an observable array of messages. So I'm going to import observable as well as behavior subject. And then I'm going to create a message class just to define the way a message should look. So it's just gonna have content, which is a string, and it's also going to have a sent by property to distinguish between bots and humans.

Then inside the chat service, I'm going to set a variable called conversation that is a behavior subject typed to an array of messages with a default value as an empty array. Then to make updates to this array, I'm going to create a function here that is called update. This just calls next on the behavior subject and it will clean up our code a little bit. So anytime we wanna add a new message to the message feed, we just call this method with the corresponding message object. So the conversation is going to start with a message from the user.

That message is going to be in the form of a string, so we'll just go ahead and take that string and convert it to our message object. So we'll set the content equal to the message and, uh, sent by property to the user. Then to add this to the UI, we'll just call this dot update with the user message. Once we have that, we can go ahead and send the request to Dialogflow with that text. Just like we did before, we'll call client text request, which returns a promise, and then we'll take the response from that promise and format it as a message from the bot.

So we can get the bot's actual text response from result fulfillment speech. Then just like we do with the user message, we'll make this an instance of the message class and then call the update method on it. So let's go ahead and switch over to the chat dialogue component and put this service to use. First, we're going to import the chat service as well as the message class that we had defined in there. And then we're also going to need an RxJS observable class and the RxJS scan operator.

So we want our messages to be an observable array of messages. So we'll be able to do that by tapping into the behavior subject that we created in the service. So we'll set a variable for messages and then also one for the form value which we'll see once we get to the HTML. Then we can go ahead and inject the chat service in the constructor. Then we need to convert that behavior subject into an observable array.

So let's see how we can do that with the scan operator. We'll go ahead and call the behavior subject as an observable. So chat service conversation as observable, and then we'll add the scan operator to it. So scan gives us the current value as well as the accumulated total in that behavior subject. So what we can do is use those two values to concatenate a new array together.

In JavaScript, that's as simple as saying old array concat a new array. The end result is an observable array that we can loop over in the HTML with the async pipe as we'll see here shortly. So the next thing we need to do is have the user send a message. So we can do that by taking the form value, which we'll set up with ng model here in the HTML. Then we can call the converse method from the service.

So this is just an event handler that will bind to some events in the HTML. So the first thing I wanna do here is loop over that observable list of messages. Uh, we can do that with n g 4 and the async pipe. So that will give us access to the message object. Then I'm going to use ngClass to distinguish the bot messages from the actual human messages.

So the from messages will be sent by the bot and the 2 messages will be sent by the user. Then we can just drop in the message content, and that's all we need to show the message. The other step is to set up a form so the user can actually type their message. The quickest way to take care of that is with NG model. So we just set up a form input here with NG model set to the form value.

And then when the user clicks the enter button, we'll go ahead and fire that event handler that will send the message to Dialogflow. And then I'll also go ahead and set up a button here that fires the event handler on click as well in case the user doesn't have an enter button. If you want the same front end styling I have here, you'll need to include the milligram CSS framework in your project and I also posted the custom CSS styles on the main lesson page. Now let's load our Angular app and try it out. If we say hello there, the bot responds with good day.

So we respond with how are you? And the bot says couldn't be better. These are the default responses from Smalltalk, but you can customize this behavior any way you want. For example, we customize the who are you intent. So if we ask that question, then we should get back, about I'm Angular bot.

I know stuff about Angular. Then we can trigger our custom intent by saying, what is that component, mister bot? Dialogflow is smart enough to detect the corresponding intent and it responds with it's just JavaScript. When we're all done, we can just say see you later and the bot responds with goodbye. That's it for Angular Dialogflow.

If this video helped you, please like and subscribe. And if you wanna take your chatbot to the next level and deploy it to other platforms, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
Building a chatbot with Angular and Dialogflow is almost too easy. In this video, I'm gonna show you how to go from 0 to chatbot in about 10 minutes. Dialogflow, which was formerly known as API dot AI, is an engine for building conversational experiences. It harnesses Google's machine learning and natural language processing technology, then gives developers a user friendly interface to build chatbots and deploy them to any platform including the web or Slack or Facebook Messenger. In this episode, we're going to use the JavaScript SDK to build our chatbot directly in Angular. This is just the first video of a multipart series, so make sure to subscribe if you're just finding me for the first time. And head over to AngularFirebase dotcom to grab the source code for this feature. Let's start by building a new Angular app from the command line using ng new chatbot, and then we'll CD into that folder, then we'll install the JavaScript SDK via NPM in the development environment. At this point, the SDK is still called API AI, but that may change to Dialogflow in the future. Then I'm going to tell the Angular CLI to not prefix our components with app. So we can just go into the Angular CLI JSON file and replace app with an empty string. So at this point, if you run ng serve, you should just have a basic Angular app.
The next step is to flush out a feature module for our code. This step is technically optional, but it is a good practice and it will make your life a lot easier as your app grows more complex. First step is to generate a module called chat, then we can add resources to this module, for example, a service, and we'll use the m flag to make sure that it's included in this module. And then we'll also create a component called chat dialogue and place that in the module as well.
programming
software development
You can see on the file structure on the left how all of our resources are nested under the chat folder, and the components and services are registered inside the chat module. The only extra bit that we need to add is the Angular forms module, and then we're also going to set our chat dialogue component to exports so it can be used directly in the app component. You might also do this with the router, but our app doesn't have a router so we're not going to worry about it. Then we're going to jump over to our main app module entry point and import the chat module there. So all we have to do is add it to the import section. Now we can go into the app component and we'll just delete the default code and we'll declare our chat dialogue component here. If you pull up the app, you should see the chat dialogue component works. Now we can get into the fun part of actually building our chatbot in Dialogflow. So go ahead and sign up and it's a completely free service so you don't even have to enter any kind of billing information, and then create your first agent. So in this case, I'm just gonna call the agent AngularBot, and its purpose as a chatbot is to just return general information about the Angular framework itself. So let's go ahead and call it a sidekick for Angular developers. The most fundamental purpose of your agent is to detect intent that comes from the user. Let's say our user enters something like, what is a component? If the chatbot has been trained to recognize this phrase, it will detect the intent, and then you can run back end code at this point or just send a response down to the user. In this case, we'll just tell it to respond with it's just JavaScript. When the bot doesn't recognize the intent, then you can have it respond with any kind of customized message that you want. Dialogflow allows you to customize this in many different ways, But for now, we're just going to focus on the back and forth dialogue between the user and the bot. The first thing you'll do here is add a phrase that the user might say. And you wanna add multiple phrases here to make your bot more robust to different types of ways of expressing this intent. The next thing we'll do is have the bot send a response once it recognizes this intent. So in this case, if it recognizes the component intent, it'll just say it's just JavaScript. Go ahead and save the intent, and then up here on the top right corner you can test it out. So I'll say, hey, what's a component do? And then you can see we get the response here and and we can also look at the JSON response that we'll see once we get back into Angular. So that's actually all it takes to build a basic chatbot with Dialogflow, but I also wanna show you a really cool feature called small talk.
This allows you to quickly customize the personality of your bot without having to create your own custom intents. So it already has a huge list of possible scenarios here, and you can add your own custom language to them. So if the user says who are you to the bot, it's going to respond with I'm Angular bot.
robotics
I know stuff about Angular. This is a great place to impress your users by adding funny or intelligent responses to these common questions. Now that we have a basic agent, let's go ahead and put it to use in Angular. Before we leave Dialogflow, we need to grab the client access token. So we do that by clicking on the agent. Then from the main agent page, we can just copy the client access token right there.
Then we'll go back into Angular and add that client token inside of our environment TS file. In some cases, it's not secure to add an API key here, but since Dialogflow is free and doesn't have write access, we're okay to do it. If you wanna learn more about API Security, check out my Dark Sky API video.
security
The first thing I wanna show you is how to communicate with your bot. So we're going to go back into the service that we created earlier and we'll import the environment that we just added our API token to as well as the API AI client that we had installed at the beginning of the video. First, I'm going to set a read only variable for the token, and then I'll go ahead and use that token to initialize the API AI client.
So we just set that as another variable called client and pass it the API token. Then we're going to send a basic text request to the bot. So I'm gonna set up a method here called talk And then to make this request, we just call client text request with the text that we wanna send.
programming
This sends an HTTP request about 2 Dialogflow which then responds with JSON of the actual response from the agent. So we'll just console log that to see what the data actually looks like.
So I can set this up by going into our chat dialogue component, and then I'll inject the chat service in the constructor, and then I can just call that talk method that we just defined. Then you can see the response is just a plain JavaScript object. We don't even have to parse it.
programming
And it has all of this information including the fulfillment speech, which is the actual text we're looking for which is what the bot is saying back to the user.
So that's how you get the raw data, but now Let's refactor things so we get something that's a little more user friendly. I'm going to use RxJS to create an observable array of messages. So I'm going to import observable as well as behavior subject. And then I'm going to create a message class just to define the way a message should look. So it's just gonna have content, which is a string, and it's also going to have a sent by property to distinguish between bots and humans. Then inside the chat service, I'm going to set a variable called conversation that is a behavior subject typed to an array of messages with a default value as an empty array. Then to make updates to this array, I'm going to create a function here that is called update. This just calls next on the behavior subject and it will clean up our code a little bit. So anytime we wanna add a new message to the message feed, we just call this method with the corresponding message object.
programming
So the conversation is going to start with a message from the user. That message is going to be in the form of a string, so we'll just go ahead and take that string and convert it to our message object. So we'll set the content equal to the message and, uh, sent by property to the user. Then to add this to the UI, we'll just call this dot update with the user message. Once we have that, we can go ahead and send the request to Dialogflow with that text. Just like we did before, we'll call client text request, which returns a promise, and then we'll take the response from that promise and format it as a message from the bot. So we can get the bot's actual text response from result fulfillment speech. Then just like we do with the user message, we'll make this an instance of the message class and then call the update method on it.
So let's go ahead and switch over to the chat dialogue component and put this service to use. First, we're going to import the chat service as well as the message class that we had defined in there. And then we're also going to need an RxJS observable class and the RxJS scan operator. So we want our messages to be an observable array of messages. So we'll be able to do that by tapping into the behavior subject that we created in the service. So we'll set a variable for messages and then also one for the form value which we'll see once we get to the HTML. Then we can go ahead and inject the chat service in the constructor. Then we need to convert that behavior subject into an observable array. So let's see how we can do that with the scan operator. We'll go ahead and call the behavior subject as an observable. So chat service conversation as observable, and then we'll add the scan operator to it. So scan gives us the current value as well as the accumulated total in that behavior subject.
programming
software
software development
So what we can do is use those two values to concatenate a new array together. In JavaScript, that's as simple as saying old array concat a new array. The end result is an observable array that we can loop over in the HTML with the async pipe as we'll see here shortly. So the next thing we need to do is have the user send a message. So we can do that by taking the form value, which we'll set up with ng model here in the HTML.
Then we can call the converse method from the service. So this is just an event handler that will bind to some events in the HTML. So the first thing I wanna do here is loop over that observable list of messages. Uh, we can do that with n g 4 and the async pipe.
programming
operations
So that will give us access to the message object. Then I'm going to use ngClass to distinguish the bot messages from the actual human messages. So the from messages will be sent by the bot and the 2 messages will be sent by the user. Then we can just drop in the message content, and that's all we need to show the message. The other step is to set up a form so the user can actually type their message. The quickest way to take care of that is with NG model. So we just set up a form input here with NG model set to the form value. And then when the user clicks the enter button, we'll go ahead and fire that event handler that will send the message to Dialogflow. And then I'll also go ahead and set up a button here that fires the event handler on click as well in case the user doesn't have an enter button.
If you want the same front end styling I have here, you'll need to include the milligram CSS framework in your project and I also posted the custom CSS styles on the main lesson page. Now let's load our Angular app and try it out. If we say hello there, the bot responds with good day.
fashion
So we respond with how are you? And the bot says couldn't be better. These are the default responses from Smalltalk, but you can customize this behavior any way you want. For example, we customize the who are you intent. So if we ask that question, then we should get back, about I'm Angular bot. I know stuff about Angular. Then we can trigger our custom intent by saying, what is that component, mister bot? Dialogflow is smart enough to detect the corresponding intent and it responds with it's just JavaScript. When we're all done, we can just say see you later and the bot responds with goodbye.
That's it for Angular Dialogflow. If this video helped you, please like and subscribe. And if you wanna take your chatbot to the next level and deploy it to other platforms, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
books
publishing
youtube
literature
Building a chatbot with Angular and Dialogflow is almost too easy. In this video, I'm gonna show you how to go from 0 to chatbot in about 10 minutes. Dialogflow, which was formerly known as API dot AI, is an engine for building conversational experiences. It harnesses Google's machine learning and natural language processing technology, then gives developers a user friendly interface to build chatbots and deploy them to any platform including the web or Slack or Facebook Messenger. In this episode, we're going to use the JavaScript SDK to build our chatbot directly in Angular. This is just the first video of a multipart series, so make sure to subscribe if you're just finding me for the first time. And head over to AngularFirebase dotcom to grab the source code for this feature. Let's start by building a new Angular app from the command line using ng new chatbot, and then we'll CD into that folder, then we'll install the JavaScript SDK via NPM in the development environment. At this point, the SDK is still called API AI, but that may change to Dialogflow in the future. Then I'm going to tell the Angular CLI to not prefix our components with app. So we can just go into the Angular CLI JSON file and replace app with an empty string. So at this point, if you run ng serve, you should just have a basic Angular app. The next step is to flush out a feature module for our code. This step is technically optional, but it is a good practice and it will make your life a lot easier as your app grows more complex. First step is to generate a module called chat, then we can add resources to this module, for example, a service, and we'll use the m flag to make sure that it's included in this module. And then we'll also create a component called chat dialogue and place that in the module as well. You can see on the file structure on the left how all of our resources are nested under the chat folder, and the components and services are registered inside the chat module. The only extra bit that we need to add is the Angular forms module, and then we're also going to set our chat dialogue component to exports so it can be used directly in the app component. You might also do this with the router, but our app doesn't have a router so we're not going to worry about it. Then we're going to jump over to our main app module entry point and import the chat module there. So all we have to do is add it to the import section. Now we can go into the app component and we'll just delete the default code and we'll declare our chat dialogue component here. If you pull up the app, you should see the chat dialogue component works. Now we can get into the fun part of actually building our chatbot in Dialogflow. So go ahead and sign up and it's a completely free service so you don't even have to enter any kind of billing information, and then create your first agent. So in this case, I'm just gonna call the agent AngularBot, and its purpose as a chatbot is to just return general information about the Angular framework itself. So let's go ahead and call it a sidekick for Angular developers. The most fundamental purpose of your agent is to detect intent that comes from the user. Let's say our user enters something like, what is a component? If the chatbot has been trained to recognize this phrase, it will detect the intent, and then you can run back end code at this point or just send a response down to the user. In this case, we'll just tell it to respond with it's just JavaScript. When the bot doesn't recognize the intent, then you can have it respond with any kind of customized message that you want. Dialogflow allows you to customize this in many different ways, But for now, we're just going to focus on the back and forth dialogue between the user and the bot. The first thing you'll do here is add a phrase that the user might say. And you wanna add multiple phrases here to make your bot more robust to different types of ways of expressing this intent. The next thing we'll do is have the bot send a response once it recognizes this intent. So in this case, if it recognizes the component intent, it'll just say it's just JavaScript. Go ahead and save the intent, and then up here on the top right corner you can test it out. So I'll say, hey, what's a component do? And then you can see we get the response here and and we can also look at the JSON response that we'll see once we get back into Angular. So that's actually all it takes to build a basic chatbot with Dialogflow, but I also wanna show you a really cool feature called small talk. This allows you to quickly customize the personality of your bot without having to create your own custom intents. So it already has a huge list of possible scenarios here, and you can add your own custom language to them. So if the user says who are you to the bot, it's going to respond with I'm Angular bot. I know stuff about Angular. This is a great place to impress your users by adding funny or intelligent responses to these common questions. Now that we have a basic agent, let's go ahead and put it to use in Angular. Before we leave Dialogflow, we need to grab the client access token. So we do that by clicking on the agent. Then from the main agent page, we can just copy the client access token right there. Then we'll go back into Angular and add that client token inside of our environment TS file. In some cases, it's not secure to add an API key here, but since Dialogflow is free and doesn't have write access, we're okay to do it. If you wanna learn more about API Security, check out my Dark Sky API video. The first thing I wanna show you is how to communicate with your bot. So we're going to go back into the service that we created earlier and we'll import the environment that we just added our API token to as well as the API AI client that we had installed at the beginning of the video. First, I'm going to set a read only variable for the token, and then I'll go ahead and use that token to initialize the API AI client. So we just set that as another variable called client and pass it the API token. Then we're going to send a basic text request to the bot. So I'm gonna set up a method here called talk And then to make this request, we just call client text request with the text that we wanna send. This sends an HTTP request about 2 Dialogflow which then responds with JSON of the actual response from the agent. So we'll just console log that to see what the data actually looks like. So I can set this up by going into our chat dialogue component, and then I'll inject the chat service in the constructor, and then I can just call that talk method that we just defined. Then you can see the response is just a plain JavaScript object. We don't even have to parse it. And it has all of this information including the fulfillment speech, which is the actual text we're looking for which is what the bot is saying back to the user. So that's how you get the raw data, but now Let's refactor things so we get something that's a little more user friendly. I'm going to use RxJS to create an observable array of messages. So I'm going to import observable as well as behavior subject. And then I'm going to create a message class just to define the way a message should look. So it's just gonna have content, which is a string, and it's also going to have a sent by property to distinguish between bots and humans. Then inside the chat service, I'm going to set a variable called conversation that is a behavior subject typed to an array of messages with a default value as an empty array. Then to make updates to this array, I'm going to create a function here that is called update. This just calls next on the behavior subject and it will clean up our code a little bit. So anytime we wanna add a new message to the message feed, we just call this method with the corresponding message object. So the conversation is going to start with a message from the user. That message is going to be in the form of a string, so we'll just go ahead and take that string and convert it to our message object. So we'll set the content equal to the message and, uh, sent by property to the user. Then to add this to the UI, we'll just call this dot update with the user message. Once we have that, we can go ahead and send the request to Dialogflow with that text. Just like we did before, we'll call client text request, which returns a promise, and then we'll take the response from that promise and format it as a message from the bot. So we can get the bot's actual text response from result fulfillment speech. Then just like we do with the user message, we'll make this an instance of the message class and then call the update method on it. So let's go ahead and switch over to the chat dialogue component and put this service to use. First, we're going to import the chat service as well as the message class that we had defined in there. And then we're also going to need an RxJS observable class and the RxJS scan operator. So we want our messages to be an observable array of messages. So we'll be able to do that by tapping into the behavior subject that we created in the service. So we'll set a variable for messages and then also one for the form value which we'll see once we get to the HTML. Then we can go ahead and inject the chat service in the constructor. Then we need to convert that behavior subject into an observable array. So let's see how we can do that with the scan operator. We'll go ahead and call the behavior subject as an observable. So chat service conversation as observable, and then we'll add the scan operator to it. So scan gives us the current value as well as the accumulated total in that behavior subject. So what we can do is use those two values to concatenate a new array together. In JavaScript, that's as simple as saying old array concat a new array. The end result is an observable array that we can loop over in the HTML with the async pipe as we'll see here shortly. So the next thing we need to do is have the user send a message. So we can do that by taking the form value, which we'll set up with ng model here in the HTML. Then we can call the converse method from the service. So this is just an event handler that will bind to some events in the HTML. So the first thing I wanna do here is loop over that observable list of messages. Uh, we can do that with n g 4 and the async pipe. So that will give us access to the message object. Then I'm going to use ngClass to distinguish the bot messages from the actual human messages. So the from messages will be sent by the bot and the 2 messages will be sent by the user. Then we can just drop in the message content, and that's all we need to show the message. The other step is to set up a form so the user can actually type their message. The quickest way to take care of that is with NG model. So we just set up a form input here with NG model set to the form value. And then when the user clicks the enter button, we'll go ahead and fire that event handler that will send the message to Dialogflow. And then I'll also go ahead and set up a button here that fires the event handler on click as well in case the user doesn't have an enter button. If you want the same front end styling I have here, you'll need to include the milligram CSS framework in your project and I also posted the custom CSS styles on the main lesson page. Now let's load our Angular app and try it out. If we say hello there, the bot responds with good day. So we respond with how are you? And the bot says couldn't be better. These are the default responses from Smalltalk, but you can customize this behavior any way you want. For example, we customize the who are you intent. So if we ask that question, then we should get back, about I'm Angular bot. I know stuff about Angular. Then we can trigger our custom intent by saying, what is that component, mister bot? Dialogflow is smart enough to detect the corresponding intent and it responds with it's just JavaScript. When we're all done, we can just say see you later and the bot responds with goodbye. That's it for Angular Dialogflow. If this video helped you, please like and subscribe. And if you wanna take your chatbot to the next level and deploy it to other platforms, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
Building
building
a
a
chatbot
chatbot
with
with
Angular
angular
and
and
Dialogflow
dialogflow
is
is
almost
almost
too
too
easy.
easy
In
in
this
this
video,
video
I'm
i'm
gonna
gonna
show
show
you
you
how
how
to
to
go
go
from
from
0
0
to
to
chatbot
chatbot
in
in
about
about
10
10
minutes.
minutes
Dialogflow,
dialogflow
which
which
was
was
formerly
formerly
known
known
as
as
API
api
dot
dot
AI,
ai
is
is
an
an
engine
engine
for
for
building
building
conversational
conversational
experiences.
experiences
It
it
harnesses
harnesses
Google's
google's
machine
machine
learning
learning
and
and
natural
natural
language
language
processing
processing
technology,
technology
then
then
gives
gives
developers
developers
a
a
user
user
friendly
friendly
interface
interface
to
to
build
build
chatbots
chatbots
and
and
deploy
deploy
them
them
to
to
any
any
platform
platform
including
including
the
the
web
web
or
or
Slack
slack
or
or
Facebook
facebook
Messenger.
messenger
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
use
use
the
the
JavaScript
javascript
SDK
sdk
to
to
build
build
our
our
chatbot
chatbot
directly
directly
in
in
Angular.
angular
This
this
is
is
just
just
the
the
first
first
video
video
of
of
a
a
multipart
multipart
series,
series
so
so
make
make
sure
sure
to
to
subscribe
subscribe
if
if
you're
you're
just
just
finding
finding
me
me
for
for
the
the
first
first
time.
time
And
and
head
head
over
over
to
to
AngularFirebase
angularfirebase
dotcom
dotcom
to
to
grab
grab
the
the
source
source
code
code
for
for
this
this
feature.
feature
Let's
let's
start
start
by
by
building
building
a
a
new
new
Angular
angular
app
app
from
from
the
the
command
command
line
line
using
using
ng
ng
new
new
chatbot,
chatbot
and
and
then
then
we'll
we'll
CD
cd
into
into
that
that
folder,
folder
then
then
we'll
we'll
install
install
the
the
JavaScript
javascript
SDK
sdk
via
via
NPM
npm
in
in
the
the
development
development
environment.
environment
At
at
this
this
point,
point
the
the
SDK
sdk
is
is
still
still
called
called
API
api
AI,
ai
but
but
that
that
may
may
change
change
to
to
Dialogflow
dialogflow
in
in
the
the
future.
future
Then
then
I'm
i'm
going
going
to
to
tell
tell
the
the
Angular
angular
CLI
cli
to
to
not
not
prefix
prefix
our
our
components
components
with
with
app.
app
So
so
we
we
can
can
just
just
go
go
into
into
the
the
Angular
angular
CLI
cli
JSON
json
file
file
and
and
replace
replace
app
app
with
with
an
an
empty
empty
string.
string
So
so
at
at
this
this
point,
point
if
if
you
you
run
run
ng
ng
serve,
serve
you
you
should
should
just
just
have
have
a
a
basic
basic
Angular
angular
app.
app
The
the
next
next
step
step
is
is
to
to
flush
flush
out
out
a
a
feature
feature
module
module
for
for
our
our
code.
code
This
this
step
step
is
is
technically
technically
optional,
optional
but
but
it
it
is
is
a
a
good
good
practice
practice
and
and
it
it
will
will
make
make
your
your
life
life
a
a
lot
lot
easier
easier
as
as
your
your
app
app
grows
grows
more
more
complex.
complex
First
first
step
step
is
is
to
to
generate
generate
a
a
module
module
called
called
chat,
chat
then
then
we
we
can
can
add
add
resources
resources
to
to
this
this
module,
module
for
for
example,
example
a
a
service,
service
and
and
we'll
we'll
use
use
the
the
m
m
flag
flag
to
to
make
make
sure
sure
that
that
it's
it's
included
included
in
in
this
this
module.
module
And
and
then
then
we'll
we'll
also
also
create
create
a
a
component
component
called
called
chat
chat
dialogue
dialogue
and
and
place
place
that
that
in
in
the
the
module
module
as
as
well.
well
You
you
can
can
see
see
on
on
the
the
file
file
structure
structure
on
on
the
the
left
left
how
how
all
all
of
of
our
our
resources
resources
are
are
nested
nested
under
under
the
the
chat
chat
folder,
folder
and
and
the
the
components
components
and
and
services
services
are
are
registered
registered
inside
inside
the
the
chat
chat
module.
module
The
the
only
only
extra
extra
bit
bit
that
that
we
we
need
need
to
to
add
add
is
is
the
the
Angular
angular
forms
forms
module,
module
and
and
then
then
we're
we're
also
also
going
going
to
to
set
set
our
our
chat
chat
dialogue
dialogue
component
component
to
to
exports
exports
so
so
it
it
can
can
be
be
used
used
directly
directly
in
in
the
the
app
app
component.
component
You
you
might
might
also
also
do
do
this
this
with
with
the
the
router,
router
but
but
our
our
app
app
doesn't
doesn't
have
have
a
a
router
router
so
so
we're
we're
not
not
going
going
to
to
worry
worry
about
about
it.
it
Then
then
we're
we're
going
going
to
to
jump
jump
over
over
to
to
our
our
main
main
app
app
module
module
entry
entry
point
point
and
and
import
import
the
the
chat
chat
module
module
there.
there
So
so
all
all
we
we
have
have
to
to
do
do
is
is
add
add
it
it
to
to
the
the
import
import
section.
section
Now
now
we
we
can
can
go
go
into
into
the
the
app
app
component
component
and
and
we'll
we'll
just
just
delete
delete
the
the
default
default
code
code
and
and
we'll
we'll
declare
declare
our
our
chat
chat
dialogue
dialogue
component
component
here.
here
If
if
you
you
pull
pull
up
up
the
the
app,
app
you
you
should
should
see
see
the
the
chat
chat
dialogue
dialogue
component
component
works.
works
Now
now
we
we
can
can
get
get
into
into
the
the
fun
fun
part
part
of
of
actually
actually
building
building
our
our
chatbot
chatbot
in
in
Dialogflow.
dialogflow
So
so
go
go
ahead
ahead
and
and
sign
sign
up
up
and
and
it's
it's
a
a
completely
completely
free
free
service
service
so
so
you
you
don't
don't
even
even
have
have
to
to
enter
enter
any
any
kind
kind
of
of
billing
billing
information,
information
and
and
then
then
create
create
your
your
first
first
agent.
agent
So
so
in
in
this
this
case,
case
I'm
i'm
just
just
gonna
gonna
call
call
the
the
agent
agent
AngularBot,
angularbot
and
and
its
its
purpose
purpose
as
as
a
a
chatbot
chatbot
is
is
to
to
just
just
return
return
general
general
information
information
about
about
the
the
Angular
angular
framework
framework
itself.
itself
So
so
let's
let's
go
go
ahead
ahead
and
and
call
call
it
it
a
a
sidekick
sidekick
for
for
Angular
angular
developers.
developers
The
the
most
most
fundamental
fundamental
purpose
purpose
of
of
your
your
agent
agent
is
is
to
to
detect
detect
intent
intent
that
that
comes
comes
from
from
the
the
user.
user
Let's
let's
say
say
our
our
user
user
enters
enters
something
something
like,
like
what
what
is
is
a
a
component?
component
If
if
the
the
chatbot
chatbot
has
has
been
been
trained
trained
to
to
recognize
recognize
this
this
phrase,
phrase
it
it
will
will
detect
detect
the
the
intent,
intent
and
and
then
then
you
you
can
can
run
run
back
back
end
end
code
code
at
at
this
this
point
point
or
or
just
just
send
send
a
a
response
response
down
down
to
to
the
the
user.
user
In
in
this
this
case,
case
we'll
we'll
just
just
tell
tell
it
it
to
to
respond
respond
with
with
it's
it's
just
just
JavaScript.
javascript
When
when
the
the
bot
bot
doesn't
doesn't
recognize
recognize
the
the
intent,
intent
then
then
you
you
can
can
have
have
it
it
respond
respond
with
with
any
any
kind
kind
of
of
customized
customized
message
message
that
that
you
you
want.
want
Dialogflow
dialogflow
allows
allows
you
you
to
to
customize
customize
this
this
in
in
many
many
different
different
ways,
ways
But
but
for
for
now,
now
we're
we're
just
just
going
going
to
to
focus
focus
on
on
the
the
back
back
and
and
forth
forth
dialogue
dialogue
between
between
the
the
user
user
and
and
the
the
bot.
bot
The
the
first
first
thing
thing
you'll
you'll
do
do
here
here
is
is
add
add
a
a
phrase
phrase
that
that
the
the
user
user
might
might
say.
say
And
and
you
you
wanna
wanna
add
add
multiple
multiple
phrases
phrases
here
here
to
to
make
make
your
your
bot
bot
more
more
robust
robust
to
to
different
different
types
types
of
of
ways
ways
of
of
expressing
expressing
this
this
intent.
intent
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
have
have
the
the
bot
bot
send
send
a
a
response
response
once
once
it
it
recognizes
recognizes
this
this
intent.
intent
So
so
in
in
this
this
case,
case
if
if
it
it
recognizes
recognizes
the
the
component
component
intent,
intent
it'll
it'll
just
just
say
say
it's
it's
just
just
JavaScript.
javascript
Go
go
ahead
ahead
and
and
save
save
the
the
intent,
intent
and
and
then
then
up
up
here
here
on
on
the
the
top
top
right
right
corner
corner
you
you
can
can
test
test
it
it
out.
out
So
so
I'll
i'll
say,
say
hey,
hey
what's
what's
a
a
component
component
do?
do
And
and
then
then
you
you
can
can
see
see
we
we
get
get
the
the
response
response
here
here
and
and
and
and
we
we
can
can
also
also
look
look
at
at
the
the
JSON
json
response
response
that
that
we'll
we'll
see
see
once
once
we
we
get
get
back
back
into
into
Angular.
angular
So
so
that's
that's
actually
actually
all
all
it
it
takes
takes
to
to
build
build
a
a
basic
basic
chatbot
chatbot
with
with
Dialogflow,
dialogflow
but
but
I
i
also
also
wanna
wanna
show
show
you
you
a
a
really
really
cool
cool
feature
feature
called
called
small
small
talk.
talk
This
this
allows
allows
you
you
to
to
quickly
quickly
customize
customize
the
the
personality
personality
of
of
your
your
bot
bot
without
without
having
having
to
to
create
create
your
your
own
own
custom
custom
intents.
intents
So
so
it
it
already
already
has
has
a
a
huge
huge
list
list
of
of
possible
possible
scenarios
scenarios
here,
here
and
and
you
you
can
can
add
add
your
your
own
own
custom
custom
language
language
to
to
them.
them
So
so
if
if
the
the
user
user
says
says
who
who
are
are
you
you
to
to
the
the
bot,
bot
it's
it's
going
going
to
to
respond
respond
with
with
I'm
i'm
Angular
angular
bot.
bot
I
i
know
know
stuff
stuff
about
about
Angular.
angular
This
this
is
is
a
a
great
great
place
place
to
to
impress
impress
your
your
users
users
by
by
adding
adding
funny
funny
or
or
intelligent
intelligent
responses
responses
to
to
these
these
common
common
questions.
questions
Now
now
that
that
we
we
have
have
a
a
basic
basic
agent,
agent
let's
let's
go
go
ahead
ahead
and
and
put
put
it
it
to
to
use
use
in
in
Angular.
angular
Before
before
we
we
leave
leave
Dialogflow,
dialogflow
we
we
need
need
to
to
grab
grab
the
the
client
client
access
access
token.
token
So
so
we
we
do
do
that
that
by
by
clicking
clicking
on
on
the
the
agent.
agent
Then
then
from
from
the
the
main
main
agent
agent
page,
page
we
we
can
can
just
just
copy
copy
the
the
client
client
access
access
token
token
right
right
there.
there
Then
then
we'll
we'll
go
go
back
back
into
into
Angular
angular
and
and
add
add
that
that
client
client
token
token
inside
inside
of
of
our
our
environment
environment
TS
ts
file.
file
In
in
some
some
cases,
cases
it's
it's
not
not
secure
secure
to
to
add
add
an
an
API
api
key
key
here,
here
but
but
since
since
Dialogflow
dialogflow
is
is
free
free
and
and
doesn't
doesn't
have
have
write
write
access,
access
we're
we're
okay
okay
to
to
do
do
it.
it
If
if
you
you
wanna
wanna
learn
learn
more
more
about
about
API
api
Security,
security
check
check
out
out
my
my
Dark
dark
Sky
sky
API
api
video.
video
The
the
first
first
thing
thing
I
i
wanna
wanna
show
show
you
you
is
is
how
how
to
to
communicate
communicate
with
with
your
your
bot.
bot
So
so
we're
we're
going
going
to
to
go
go
back
back
into
into
the
the
service
service
that
that
we
we
created
created
earlier
earlier
and
and
we'll
we'll
import
import
the
the
environment
environment
that
that
we
we
just
just
added
added
our
our
API
api
token
token
to
to
as
as
well
well
as
as
the
the
API
api
AI
ai
client
client
that
that
we
we
had
had
installed
installed
at
at
the
the
beginning
beginning
of
of
the
the
video.
video
First,
first
I'm
i'm
going
going
to
to
set
set
a
a
read
read
only
only
variable
variable
for
for
the
the
token,
token
and
and
then
then
I'll
i'll
go
go
ahead
ahead
and
and
use
use
that
that
token
token
to
to
initialize
initialize
the
the
API
api
AI
ai
client.
client
So
so
we
we
just
just
set
set
that
that
as
as
another
another
variable
variable
called
called
client
client
and
and
pass
pass
it
it
the
the
API
api
token.
token
Then
then
we're
we're
going
going
to
to
send
send
a
a
basic
basic
text
text
request
request
to
to
the
the
bot.
bot
So
so
I'm
i'm
gonna
gonna
set
set
up
up
a
a
method
method
here
here
called
called
talk
talk
And
and
then
then
to
to
make
make
this
this
request,
request
we
we
just
just
call
call
client
client
text
text
request
request
with
with
the
the
text
text
that
that
we
we
wanna
wanna
send.
send
This
this
sends
sends
an
an
HTTP
http
request
request
about
about
2
2
Dialogflow
dialogflow
which
which
then
then
responds
responds
with
with
JSON
json
of
of
the
the
actual
actual
response
response
from
from
the
the
agent.
agent
So
so
we'll
we'll
just
just
console
console
log
log
that
that
to
to
see
see
what
what
the
the
data
data
actually
actually
looks
looks
like.
like
So
so
I
i
can
can
set
set
this
this
up
up
by
by
going
going
into
into
our
our
chat
chat
dialogue
dialogue
component,
component
and
and
then
then
I'll
i'll
inject
inject
the
the
chat
chat
service
service
in
in
the
the
constructor,
constructor
and
and
then
then
I
i
can
can
just
just
call
call
that
that
talk
talk
method
method
that
that
we
we
just
just
defined.
defined
Then
then
you
you
can
can
see
see
the
the
response
response
is
is
just
just
a
a
plain
plain
JavaScript
javascript
object.
object
We
we
don't
don't
even
even
have
have
to
to
parse
parse
it.
it
And
and
it
it
has
has
all
all
of
of
this
this
information
information
including
including
the
the
fulfillment
fulfillment
speech,
speech
which
which
is
is
the
the
actual
actual
text
text
we're
we're
looking
looking
for
for
which
which
is
is
what
what
the
the
bot
bot
is
is
saying
saying
back
back
to
to
the
the
user.
user
So
so
that's
that's
how
how
you
you
get
get
the
the
raw
raw
data,
data
but
but
now
now
Let's
let's
refactor
refactor
things
things
so
so
we
we
get
get
something
something
that's
that's
a
a
little
little
more
more
user
user
friendly.
friendly
I'm
i'm
going
going
to
to
use
use
RxJS
rxjs
to
to
create
create
an
an
observable
observable
array
array
of
of
messages.
messages
So
so
I'm
i'm
going
going
to
to
import
import
observable
observable
as
as
well
well
as
as
behavior
behavior
subject.
subject
And
and
then
then
I'm
i'm
going
going
to
to
create
create
a
a
message
message
class
class
just
just
to
to
define
define
the
the
way
way
a
a
message
message
should
should
look.
look
So
so
it's
it's
just
just
gonna
gonna
have
have
content,
content
which
which
is
is
a
a
string,
string
and
and
it's
it's
also
also
going
going
to
to
have
have
a
a
sent
sent
by
by
property
property
to
to
distinguish
distinguish
between
between
bots
bots
and
and
humans.
humans
Then
then
inside
inside
the
the
chat
chat
service,
service
I'm
i'm
going
going
to
to
set
set
a
a
variable
variable
called
called
conversation
conversation
that
that
is
is
a
a
behavior
behavior
subject
subject
typed
typed
to
to
an
an
array
array
of
of
messages
messages
with
with
a
a
default
default
value
value
as
as
an
an
empty
empty
array.
array
Then
then
to
to
make
make
updates
updates
to
to
this
this
array,
array
I'm
i'm
going
going
to
to
create
create
a
a
function
function
here
here
that
that
is
is
called
called
update.
update
This
this
just
just
calls
calls
next
next
on
on
the
the
behavior
behavior
subject
subject
and
and
it
it
will
will
clean
clean
up
up
our
our
code
code
a
a
little
little
bit.
bit
So
so
anytime
anytime
we
we
wanna
wanna
add
add
a
a
new
new
message
message
to
to
the
the
message
message
feed,
feed
we
we
just
just
call
call
this
this
method
method
with
with
the
the
corresponding
corresponding
message
message
object.
object
So
so
the
the
conversation
conversation
is
is
going
going
to
to
start
start
with
with
a
a
message
message
from
from
the
the
user.
user
That
that
message
message
is
is
going
going
to
to
be
be
in
in
the
the
form
form
of
of
a
a
string,
string
so
so
we'll
we'll
just
just
go
go
ahead
ahead
and
and
take
take
that
that
string
string
and
and
convert
convert
it
it
to
to
our
our
message
message
object.
object
So
so
we'll
we'll
set
set
the
the
content
content
equal
equal
to
to
the
the
message
message
and,
and
uh,
uh
sent
sent
by
by
property
property
to
to
the
the
user.
user
Then
then
to
to
add
add
this
this
to
to
the
the
UI,
ui
we'll
we'll
just
just
call
call
this
this
dot
dot
update
update
with
with
the
the
user
user
message.
message
Once
once
we
we
have
have
that,
that
we
we
can
can
go
go
ahead
ahead
and
and
send
send
the
the
request
request
to
to
Dialogflow
dialogflow
with
with
that
that
text.
text
Just
just
like
like
we
we
did
did
before,
before
we'll
we'll
call
call
client
client
text
text
request,
request
which
which
returns
returns
a
a
promise,
promise
and
and
then
then
we'll
we'll
take
take
the
the
response
response
from
from
that
that
promise
promise
and
and
format
format
it
it
as
as
a
a
message
message
from
from
the
the
bot.
bot
So
so
we
we
can
can
get
get
the
the
bot's
bot's
actual
actual
text
text
response
response
from
from
result
result
fulfillment
fulfillment
speech.
speech
Then
then
just
just
like
like
we
we
do
do
with
with
the
the
user
user
message,
message
we'll
we'll
make
make
this
this
an
an
instance
instance
of
of
the
the
message
message
class
class
and
and
then
then
call
call
the
the
update
update
method
method
on
on
it.
it
So
so
let's
let's
go
go
ahead
ahead
and
and
switch
switch
over
over
to
to
the
the
chat
chat
dialogue
dialogue
component
component
and
and
put
put
this
this
service
service
to
to
use.
use
First,
first
we're
we're
going
going
to
to
import
import
the
the
chat
chat
service
service
as
as
well
well
as
as
the
the
message
message
class
class
that
that
we
we
had
had
defined
defined
in
in
there.
there
And
and
then
then
we're
we're
also
also
going
going
to
to
need
need
an
an
RxJS
rxjs
observable
observable
class
class
and
and
the
the
RxJS
rxjs
scan
scan
operator.
operator
So
so
we
we
want
want
our
our
messages
messages
to
to
be
be
an
an
observable
observable
array
array
of
of
messages.
messages
So
so
we'll
we'll
be
be
able
able
to
to
do
do
that
that
by
by
tapping
tapping
into
into
the
the
behavior
behavior
subject
subject
that
that
we
we
created
created
in
in
the
the
service.
service
So
so
we'll
we'll
set
set
a
a
variable
variable
for
for
messages
messages
and
and
then
then
also
also
one
one
for
for
the
the
form
form
value
value
which
which
we'll
we'll
see
see
once
once
we
we
get
get
to
to
the
the
HTML.
html
Then
then
we
we
can
can
go
go
ahead
ahead
and
and
inject
inject
the
the
chat
chat
service
service
in
in
the
the
constructor.
constructor
Then
then
we
we
need
need
to
to
convert
convert
that
that
behavior
behavior
subject
subject
into
into
an
an
observable
observable
array.
array
So
so
let's
let's
see
see
how
how
we
we
can
can
do
do
that
that
with
with
the
the
scan
scan
operator.
operator
We'll
we'll
go
go
ahead
ahead
and
and
call
call
the
the
behavior
behavior
subject
subject
as
as
an
an
observable.
observable
So
so
chat
chat
service
service
conversation
conversation
as
as
observable,
observable
and
and
then
then
we'll
we'll
add
add
the
the
scan
scan
operator
operator
to
to
it.
it
So
so
scan
scan
gives
gives
us
us
the
the
current
current
value
value
as
as
well
well
as
as
the
the
accumulated
accumulated
total
total
in
in
that
that
behavior
behavior
subject.
subject
So
so
what
what
we
we
can
can
do
do
is
is
use
use
those
those
two
two
values
values
to
to
concatenate
concatenate
a
a
new
new
array
array
together.
together
In
in
JavaScript,
javascript
that's
that's
as
as
simple
simple
as
as
saying
saying
old
old
array
array
concat
concat
a
a
new
new
array.
array
The
the
end
end
result
result
is
is
an
an
observable
observable
array
array
that
that
we
we
can
can
loop
loop
over
over
in
in
the
the
HTML
html
with
with
the
the
async
async
pipe
pipe
as
as
we'll
we'll
see
see
here
here
shortly.
shortly
So
so
the
the
next
next
thing
thing
we
we
need
need
to
to
do
do
is
is
have
have
the
the
user
user
send
send
a
a
message.
message
So
so
we
we
can
can
do
do
that
that
by
by
taking
taking
the
the
form
form
value,
value
which
which
we'll
we'll
set
set
up
up
with
with
ng
ng
model
model
here
here
in
in
the
the
HTML.
html
Then
then
we
we
can
can
call
call
the
the
converse
converse
method
method
from
from
the
the
service.
service
So
so
this
this
is
is
just
just
an
an
event
event
handler
handler
that
that
will
will
bind
bind
to
to
some
some
events
events
in
in
the
the
HTML.
html
So
so
the
the
first
first
thing
thing
I
i
wanna
wanna
do
do
here
here
is
is
loop
loop
over
over
that
that
observable
observable
list
list
of
of
messages.
messages
Uh,
uh
we
we
can
can
do
do
that
that
with
with
n
n
g
g
4
4
and
and
the
the
async
async
pipe.
pipe
So
so
that
that
will
will
give
give
us
us
access
access
to
to
the
the
message
message
object.
object
Then
then
I'm
i'm
going
going
to
to
use
use
ngClass
ngclass
to
to
distinguish
distinguish
the
the
bot
bot
messages
messages
from
from
the
the
actual
actual
human
human
messages.
messages
So
so
the
the
from
from
messages
messages
will
will
be
be
sent
sent
by
by
the
the
bot
bot
and
and
the
the
2
2
messages
messages
will
will
be
be
sent
sent
by
by
the
the
user.
user
Then
then
we
we
can
can
just
just
drop
drop
in
in
the
the
message
message
content,
content
and
and
that's
that's
all
all
we
we
need
need
to
to
show
show
the
the
message.
message
The
the
other
other
step
step
is
is
to
to
set
set
up
up
a
a
form
form
so
so
the
the
user
user
can
can
actually
actually
type
type
their
their
message.
message
The
the
quickest
quickest
way
way
to
to
take
take
care
care
of
of
that
that
is
is
with
with
NG
ng
model.
model
So
so
we
we
just
just
set
set
up
up
a
a
form
form
input
input
here
here
with
with
NG
ng
model
model
set
set
to
to
the
the
form
form
value.
value
And
and
then
then
when
when
the
the
user
user
clicks
clicks
the
the
enter
enter
button,
button
we'll
we'll
go
go
ahead
ahead
and
and
fire
fire
that
that
event
event
handler
handler
that
that
will
will
send
send
the
the
message
message
to
to
Dialogflow.
dialogflow
And
and
then
then
I'll
i'll
also
also
go
go
ahead
ahead
and
and
set
set
up
up
a
a
button
button
here
here
that
that
fires
fires
the
the
event
event
handler
handler
on
on
click
click
as
as
well
well
in
in
case
case
the
the
user
user
doesn't
doesn't
have
have
an
an
enter
enter
button.
button
If
if
you
you
want
want
the
the
same
same
front
front
end
end
styling
styling
I
i
have
have
here,
here
you'll
you'll
need
need
to
to
include
include
the
the
milligram
milligram
CSS
css
framework
framework
in
in
your
your
project
project
and
and
I
i
also
also
posted
posted
the
the
custom
custom
CSS
css
styles
styles
on
on
the
the
main
main
lesson
lesson
page.
page
Now
now
let's
let's
load
load
our
our
Angular
angular
app
app
and
and
try
try
it
it
out.
out
If
if
we
we
say
say
hello
hello
there,
there
the
the
bot
bot
responds
responds
with
with
good
good
day.
day
So
so
we
we
respond
respond
with
with
how
how
are
are
you?
you
And
and
the
the
bot
bot
says
says
couldn't
couldn't
be
be
better.
better
These
these
are
are
the
the
default
default
responses
responses
from
from
Smalltalk,
smalltalk
but
but
you
you
can
can
customize
customize
this
this
behavior
behavior
any
any
way
way
you
you
want.
want
For
for
example,
example
we
we
customize
customize
the
the
who
who
are
are
you
you
intent.
intent
So
so
if
if
we
we
ask
ask
that
that
question,
question
then
then
we
we
should
should
get
get
back,
back
about
about
I'm
i'm
Angular
angular
bot.
bot
I
i
know
know
stuff
stuff
about
about
Angular.
angular
Then
then
we
we
can
can
trigger
trigger
our
our
custom
custom
intent
intent
by
by
saying,
saying
what
what
is
is
that
that
component,
component
mister
mister
bot?
bot
Dialogflow
dialogflow
is
is
smart
smart
enough
enough
to
to
detect
detect
the
the
corresponding
corresponding
intent
intent
and
and
it
it
responds
responds
with
with
it's
it's
just
just
JavaScript.
javascript
When
when
we're
we're
all
all
done,
done
we
we
can
can
just
just
say
say
see
see
you
you
later
later
and
and
the
the
bot
bot
responds
responds
with
with
goodbye.
goodbye
That's
that's
it
it
for
for
Angular
angular
Dialogflow.
dialogflow
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
take
take
your
your
chatbot
chatbot
to
to
the
the
next
next
level
level
and
and
deploy
deploy
it
it
to
to
other
other
platforms,
platforms
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speakers discuss building a chatbot in Angular, including Dialogflow for natural language processing and the development environment. They then move on to show how to communicate with a chatbot by setting a read-only variable and importing an environment. The speakers then show how to use the chatbot in Angular, including setting a variable for messages and creating a message class, and how to update a message array and use the chat service to send a response. They also discuss setting up a form input for the chatbot and show how to use the Angular app to send a message and suggests setting up a form input for the chatbot.
Angular Chatbot with Dialogflow (API.ai)
Building a chatbot with Angular and Dialogflow is almost too easy. In this video, I'm gonna show you how to go from 0 to chatbot in about 10 minutes. Dialogflow, which was formerly known as API dot AI, is an engine for building conversational experiences. It harnesses Google's machine learning and natural language processing technology, then gives developers a user friendly interface to build chatbots and deploy them to any platform including the web or Slack or Facebook Messenger. In this episode, we're going to use the JavaScript SDK to build our chatbot directly in Angular. This is just the first video of a multipart series, so make sure to subscribe if you're just finding me for the first time. And head over to AngularFirebase dotcom to grab the source code for this feature. Let's start by building a new Angular app from the command line using ng new chatbot, and then we'll CD into that folder, then we'll install the JavaScript SDK via NPM in the development environment. At this point, the SDK is still called API AI, but that may change to Dialogflow in the future. Then I'm going to tell the Angular CLI to not prefix our components with app. So we can just go into the Angular CLI JSON file and replace app with an empty string. So at this point, if you run ng serve, you should just have a basic Angular app. The next step is to flush out a feature module for our code. This step is technically optional, but it is a good practice and it will make your life a lot easier as your app grows more complex. First step is to generate a module called chat, then we can add resources to this module, for example, a service, and we'll use the m flag to make sure that it's included in this module. And then we'll also create a component called chat dialogue and place that in the module as well. You can see on the file structure on the left how all of our resources are nested under the chat folder, and the components and services are registered inside the chat module. The only extra bit that we need to add is the Angular forms module, and then we're also going to set our chat dialogue component to exports so it can be used directly in the app component. You might also do this with the router, but our app doesn't have a router so we're not going to worry about it. Then we're going to jump over to our main app module entry point and import the chat module there. So all we have to do is add it to the import section. Now we can go into the app component and we'll just delete the default code and we'll declare our chat dialogue component here. If you pull up the app, you should see the chat dialogue component works. Now we can get into the fun part of actually building our chatbot in Dialogflow. So go ahead and sign up and it's a completely free service so you don't even have to enter any kind of billing information, and then create your first agent. So in this case, I'm just gonna call the agent AngularBot, and its purpose as a chatbot is to just return general information about the Angular framework itself. So let's go ahead and call it a sidekick for Angular developers. The most fundamental purpose of your agent is to detect intent that comes from the user. Let's say our user enters something like, what is a component? If the chatbot has been trained to recognize this phrase, it will detect the intent, and then you can run back end code at this point or just send a response down to the user. In this case, we'll just tell it to respond with it's just JavaScript. When the bot doesn't recognize the intent, then you can have it respond with any kind of customized message that you want. Dialogflow allows you to customize this in many different ways, But for now, we're just going to focus on the back and forth dialogue between the user and the bot. The first thing you'll do here is add a phrase that the user might say. And you wanna add multiple phrases here to make your bot more robust to different types of ways of expressing this intent. The next thing we'll do is have the bot send a response once it recognizes this intent. So in this case, if it recognizes the component intent, it'll just say it's just JavaScript. Go ahead and save the intent, and then up here on the top right corner you can test it out. So I'll say, hey, what's a component do? And then you can see we get the response here and and we can also look at the JSON response that we'll see once we get back into Angular. So that's actually all it takes to build a basic chatbot with Dialogflow, but I also wanna show you a really cool feature called small talk. This allows you to quickly customize the personality of your bot without having to create your own custom intents. So it already has a huge list of possible scenarios here, and you can add your own custom language to them. So if the user says who are you to the bot, it's going to respond with I'm Angular bot. I know stuff about Angular. This is a great place to impress your users by adding funny or intelligent responses to these common questions. Now that we have a basic agent, let's go ahead and put it to use in Angular. Before we leave Dialogflow, we need to grab the client access token. So we do that by clicking on the agent. Then from the main agent page, we can just copy the client access token right there. Then we'll go back into Angular and add that client token inside of our environment TS file. In some cases, it's not secure to add an API key here, but since Dialogflow is free and doesn't have write access, we're okay to do it. If you wanna learn more about API Security, check out my Dark Sky API video. The first thing I wanna show you is how to communicate with your bot. So we're going to go back into the service that we created earlier and we'll import the environment that we just added our API token to as well as the API AI client that we had installed at the beginning of the video. First, I'm going to set a read only variable for the token, and then I'll go ahead and use that token to initialize the API AI client. So we just set that as another variable called client and pass it the API token. Then we're going to send a basic text request to the bot. So I'm gonna set up a method here called talk And then to make this request, we just call client text request with the text that we wanna send. This sends an HTTP request about 2 Dialogflow which then responds with JSON of the actual response from the agent. So we'll just console log that to see what the data actually looks like. So I can set this up by going into our chat dialogue component, and then I'll inject the chat service in the constructor, and then I can just call that talk method that we just defined. Then you can see the response is just a plain JavaScript object. We don't even have to parse it. And it has all of this information including the fulfillment speech, which is the actual text we're looking for which is what the bot is saying back to the user. So that's how you get the raw data, but now Let's refactor things so we get something that's a little more user friendly. I'm going to use RxJS to create an observable array of messages. So I'm going to import observable as well as behavior subject. And then I'm going to create a message class just to define the way a message should look. So it's just gonna have content, which is a string, and it's also going to have a sent by property to distinguish between bots and humans. Then inside the chat service, I'm going to set a variable called conversation that is a behavior subject typed to an array of messages with a default value as an empty array. Then to make updates to this array, I'm going to create a function here that is called update. This just calls next on the behavior subject and it will clean up our code a little bit. So anytime we wanna add a new message to the message feed, we just call this method with the corresponding message object. So the conversation is going to start with a message from the user. That message is going to be in the form of a string, so we'll just go ahead and take that string and convert it to our message object. So we'll set the content equal to the message and, uh, sent by property to the user. Then to add this to the UI, we'll just call this dot update with the user message. Once we have that, we can go ahead and send the request to Dialogflow with that text. Just like we did before, we'll call client text request, which returns a promise, and then we'll take the response from that promise and format it as a message from the bot. So we can get the bot's actual text response from result fulfillment speech. Then just like we do with the user message, we'll make this an instance of the message class and then call the update method on it. So let's go ahead and switch over to the chat dialogue component and put this service to use. First, we're going to import the chat service as well as the message class that we had defined in there. And then we're also going to need an RxJS observable class and the RxJS scan operator. So we want our messages to be an observable array of messages. So we'll be able to do that by tapping into the behavior subject that we created in the service. So we'll set a variable for messages and then also one for the form value which we'll see once we get to the HTML. Then we can go ahead and inject the chat service in the constructor. Then we need to convert that behavior subject into an observable array. So let's see how we can do that with the scan operator. We'll go ahead and call the behavior subject as an observable. So chat service conversation as observable, and then we'll add the scan operator to it. So scan gives us the current value as well as the accumulated total in that behavior subject. So what we can do is use those two values to concatenate a new array together. In JavaScript, that's as simple as saying old array concat a new array. The end result is an observable array that we can loop over in the HTML with the async pipe as we'll see here shortly. So the next thing we need to do is have the user send a message. So we can do that by taking the form value, which we'll set up with ng model here in the HTML. Then we can call the converse method from the service. So this is just an event handler that will bind to some events in the HTML. So the first thing I wanna do here is loop over that observable list of messages. Uh, we can do that with n g 4 and the async pipe. So that will give us access to the message object. Then I'm going to use ngClass to distinguish the bot messages from the actual human messages. So the from messages will be sent by the bot and the 2 messages will be sent by the user. Then we can just drop in the message content, and that's all we need to show the message. The other step is to set up a form so the user can actually type their message. The quickest way to take care of that is with NG model. So we just set up a form input here with NG model set to the form value. And then when the user clicks the enter button, we'll go ahead and fire that event handler that will send the message to Dialogflow. And then I'll also go ahead and set up a button here that fires the event handler on click as well in case the user doesn't have an enter button. If you want the same front end styling I have here, you'll need to include the milligram CSS framework in your project and I also posted the custom CSS styles on the main lesson page. Now let's load our Angular app and try it out. If we say hello there, the bot responds with good day. So we respond with how are you? And the bot says couldn't be better. These are the default responses from Smalltalk, but you can customize this behavior any way you want. For example, we customize the who are you intent. So if we ask that question, then we should get back, about I'm Angular bot. I know stuff about Angular. Then we can trigger our custom intent by saying, what is that component, mister bot? Dialogflow is smart enough to detect the corresponding intent and it responds with it's just JavaScript. When we're all done, we can just say see you later and the bot responds with goodbye. That's it for Angular Dialogflow. If this video helped you, please like and subscribe. And if you wanna take your chatbot to the next level and deploy it to other platforms, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
The speakers discuss building a chatbot in Angular, including Dialogflow for natural language processing and the development environment. They then move on to show how to communicate with a chatbot by setting a read-only variable and importing an environment. The speakers then show how to use the chatbot in Angular, including setting a variable for messages and creating a message class, and how to update a message array and use the chat service to send a response. They also discuss setting up a form input for the chatbot and show how to use the Angular app to send a message and suggests setting up a form input for the chatbot.