Learn how to build Google Assistant apps using Dialogflow and Firebase Cloud Functions https://angularfirebase.com/lessons/google-assistant-quick-start/

- Slack Team https://goo.gl/qF8Q5r
- Google Assistant https://assistant.google.com/explore
- Dialogflow https://dialogflow.com/
2024-02-04T07:35:27.952Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
41eebe5f-f6b3-4b32-a238-a6f631f81a1f
04f51febc42aaa93005e0a7428e60e88b232cec1a6422e25d1a816e1ed544eee
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Hey, Google.
Let's talk to angular firebase.com.
Sure.
Here's the test version of angularfirebase.com.
Howdy, partner.
I'm Angular Firebase.
What can I do you for?
What's the latest episode?
The last video was episode 104, Angular CLI basics tutorial.
Its description goes like this.
Master the basics of the Angular v six CLI.
July.
The Google Assistant makes it easy for users to get things done in your app through conversation.
In today's episode, we'll build a Google Assistant app from scratch using Dialogflow and Firebase Cloud functions.
If you're new here, make sure to like and subscribe, and you can grab the source code at angularfirebase.com.
Let's get started by breaking down the demo that I just showed you.
The first thing that I said was, hey, Google.
Let's talk to my app name.
The app name is something that you register as the developer, and it signifies the main entry point into your assistant app.
When Google finds this app, It's going to start a session in Dialogflow.
We've used Dialogflow before in episode 58 to build a chatbot, and it's basically just a high level Tool for building conversational experiences.
It uses some crazy machine learning algorithms to handle the natural language processing.
So when I say get the latest episode, it knows that I'm trying to convey this get latest episode intent, which in turn is fulfilled by a Firebase Cloud function That goes out and visits the website, gets the information that we need, and then tells the assistant what to say to the end user.
And you can even use a rich card as the response So the user can just link directly back to your progressive web app that they already have installed on their device.
Now that we know how the basic process works, let's start building our Google Assistant app.
There are several different ways we can do this, but let's start in the Google Actions console.
You can link your assistant to an existing Firebase or Google Cloud project, or you can just create a new one from scratch.
From there, you'll select a category, and then the first thing you'll do is determine the entry point for this app.
This part's pretty important because it's what the user will say to invoke your app.
For example, hey, Google.
Let's talk to angular firebase.com.
At this point, you could continue building your app in the actions console, and there's a few templates for doing so.
But in most cases, you want to switch over to Dialog at this point and start building the conversation interface.
Click on actions, then add your first action, and then click build.
Go ahead and create the agent, and then switch over to the intent screen.
You'll have a default welcome intent, which will greet your user when they first initiate your app.
You can customize the response as needed, but we're going to create a brand new intent.
This one's called learn about Angular Firebase.
There are 2 basic ways to handle intents.
The easiest way is just to create a text response here in Dialogflow, which we'll do for this intent, Or you can invoke a Firebase Cloud function to reach out to the outside world to retrieve dynamic data.
But first, we need to give the bot some training phrases So it knows how to detect the intent.
For example, what is Angular Firebase?
Dialogflow will use these phrases to refine the machine learning Algorithm that's used to detect similar phrases that are said by the end user.
The only other thing you need at this point is to send the response back to the user, which we can do with just plain text.
So when this intent is triggered, it's going to respond to the user with whatever you put in this text response, And you can add multiple responses too to give some variation to your bot.
So that's the most basic use case, but we wanna do something a little more advanced.
We wanna use a cloud function to go out to the Angular Firebase website and figure out what the last episode was.
For that, we'll create a new intent, And then we'll add the training phrases just like we did before.
But this time, instead of sending a text response, we're going to flip the switch for webhook fulfillment.
This tells Dialogflow to send some data to our back end cloud function, then we can use the Dialog Flow SDK for Node JS to handle these intents and respond back to the user.
This makes it possible for your bot To do things like update a database, reach out to third party APIs, send email, or anything else you might do in a Node.
Js back end.
You can code your webhook directly in the browser if you want to, but personally, I wouldn't recommend doing that.
A better way to do it is to open up your favorite IDE, And then from the command line, run firebase init functions.
Then I highly recommend using the TypeScript option.
And then for everything else, you can just go through with the main default.
Then CD into the functions directory and install the actions on Google SDK.
This will help us format the responses that go back to Dialogflow so we can build this app with minimal code.
Then for this project, I'm going to install 2 other dependencies that we'll use to build a simple web scraper, which I'll explain in more detail later.
For right now, just install node fetch and Cheerio.
Then we'll write all of the code in the index ts file.
First, we'll import our dependencies, then we can import Dialogflow from the actions on Google SDK.
It also includes a bunch of helpers for formatting rich cards that you send in the response.
For example, that card that would link us back to our progressive Web app.
Then the app itself is very similar conceptually to Express JS.
You can think of each intent Like an HTTP endpoint that we need to handle whenever it gets triggered.
We can say app intent with get latest episode, And then this will take a callback function to handle the intent.
And because we're fetching data from the outside world asynchronously, we'll make this an async function.
For right now, I'm setting up a placeholder variable called data, which will eventually scrape the web for the data that we want on angularfirebase.com.
Eventually, it will return a title, description, and episode number for the bot to use.
We can then say conversation close or conversation ask to continue the conversation with the user.
If you use ask, it's going to keep the conversation open.
If you use close, it will end the dialogue flow session after that response is sent.
In this case, our bot has nothing else to do, so we're going to use conversation close.
You could just pass in a string here, but I think it's easier to use a simple response, which allows you to control both the text and the speech that the bot will return.
So the text will be nice and concise, and then the speech will contain additional information such as the full episode description.
So that's great for text and speech only applications, But things like smartphones can handle more than just text and speech.
In this case, we can send back a card that will deep link to our app and take the user exactly where they wanna go.
This works great for both progressive web apps and native mobile apps, and it's just a great way to build engagement with your users.
And that's pretty much all there is to it on the Dialogflow side.
The only missing piece at this point is how do we get this actual information from the website.
I'm not going to talk about this code in detail because that has nothing to do with the assistant, but all it's doing is fetching the web page and then using Cheerio To traverse the DOM, to find the information that we need, it's just a classic web scraper.
First, we need to fetch the page asynchronously.
Then on this particular web page, we have a feed of lessons.
So we wanna pull the first lesson from the page along with its content.
Then we can extract the text that is contained within the various elements inside this div.
Then we'll return everything as a plain JavaScript object so we can use it in the method that we had defined earlier to handle the intent.
The final step is to export our function, which we'll name fulfillment.
It needs to be an HTTPS function, and it will take the Dialogflow app as its argument.
Now open up another command line terminal and run Firebase deploy only functions.
When that's finished, you can go to the Firebase console and verify that it's been deployed in the functions tab and grab the URL endpoint.
Then switch back over to the fulfillment tab in Dialogflow and paste it as the webhook fulfillment URL.
And that's pretty much all there is to it.
You've now successfully built your own Google Assistant app.
Go back to the actions on Google Console and test it out.
You can also test it out on any device that's connected to your Gmail account.
That means you can start testing it out right away on your Android or iPhone device or on your Google Home device.
But to release it to the public, you'll go through a very similar process to the Google Play Store for Android apps where you have an alpha, beta, and then production release once it's ready to go live.
Overall, this technology is super exciting, and there's tons of opportunities for business to engage their customers in ways that weren't possible before.
The demand for conversation apps is growing rapidly, so it's something you definitely wanna be aware of and familiar with as a developer.
I'm gonna go ahead and wrap up there.
If this video helped you, please like and subscribe.
And if you have any questions, reach out to me on Slack.
And if you're ready to go beyond the basics, consider becoming a pro member at angularfirebase.com to get access to exclusive content designed to help you build and ship your app faster.
Thanks for watching, and I'll see you soon.

Speaker 0: Hey, Google. Let's talk to angular firebase.com. Sure.

Speaker 1: Here's the test version of angularfirebase.com. Howdy, partner. I'm Angular Firebase. What can I do you for?

Speaker 0: What's the latest episode?

Speaker 1: The last video was episode 104, Angular CLI basics tutorial. Its description goes like this. Master the basics of the Angular v six CLI. July.

Speaker 0: The Google Assistant makes it easy for users to get things done in your app through conversation. In today's episode, we'll build a Google Assistant app from scratch using Dialogflow and Firebase Cloud functions. If you're new here, make sure to like and subscribe, and you can grab the source code at angularfirebase.com. Let's get started by breaking down the demo that I just showed you. The first thing that I said was, hey, Google.

Let's talk to my app name. The app name is something that you register as the developer, and it signifies the main entry point into your assistant app. When Google finds this app, It's going to start a session in Dialogflow. We've used Dialogflow before in episode 58 to build a chatbot, and it's basically just a high level Tool for building conversational experiences. It uses some crazy machine learning algorithms to handle the natural language processing.

So when I say get the latest episode, it knows that I'm trying to convey this get latest episode intent, which in turn is fulfilled by a Firebase Cloud function That goes out and visits the website, gets the information that we need, and then tells the assistant what to say to the end user. And you can even use a rich card as the response So the user can just link directly back to your progressive web app that they already have installed on their device. Now that we know how the basic process works, let's start building our Google Assistant app. There are several different ways we can do this, but let's start in the Google Actions console. You can link your assistant to an existing Firebase or Google Cloud project, or you can just create a new one from scratch.

From there, you'll select a category, and then the first thing you'll do is determine the entry point for this app. This part's pretty important because it's what the user will say to invoke your app. For example, hey, Google. Let's talk to angular firebase.com. At this point, you could continue building your app in the actions console, and there's a few templates for doing so.

But in most cases, you want to switch over to Dialog at this point and start building the conversation interface. Click on actions, then add your first action, and then click build. Go ahead and create the agent, and then switch over to the intent screen. You'll have a default welcome intent, which will greet your user when they first initiate your app. You can customize the response as needed, but we're going to create a brand new intent.

This one's called learn about Angular Firebase. There are 2 basic ways to handle intents. The easiest way is just to create a text response here in Dialogflow, which we'll do for this intent, Or you can invoke a Firebase Cloud function to reach out to the outside world to retrieve dynamic data. But first, we need to give the bot some training phrases So it knows how to detect the intent. For example, what is Angular Firebase?

Dialogflow will use these phrases to refine the machine learning Algorithm that's used to detect similar phrases that are said by the end user. The only other thing you need at this point is to send the response back to the user, which we can do with just plain text. So when this intent is triggered, it's going to respond to the user with whatever you put in this text response, And you can add multiple responses too to give some variation to your bot. So that's the most basic use case, but we wanna do something a little more advanced. We wanna use a cloud function to go out to the Angular Firebase website and figure out what the last episode was.

For that, we'll create a new intent, And then we'll add the training phrases just like we did before. But this time, instead of sending a text response, we're going to flip the switch for webhook fulfillment. This tells Dialogflow to send some data to our back end cloud function, then we can use the Dialog Flow SDK for Node JS to handle these intents and respond back to the user. This makes it possible for your bot To do things like update a database, reach out to third party APIs, send email, or anything else you might do in a Node. Js back end.

You can code your webhook directly in the browser if you want to, but personally, I wouldn't recommend doing that. A better way to do it is to open up your favorite IDE, And then from the command line, run firebase init functions. Then I highly recommend using the TypeScript option. And then for everything else, you can just go through with the main default. Then CD into the functions directory and install the actions on Google SDK.

This will help us format the responses that go back to Dialogflow so we can build this app with minimal code. Then for this project, I'm going to install 2 other dependencies that we'll use to build a simple web scraper, which I'll explain in more detail later. For right now, just install node fetch and Cheerio. Then we'll write all of the code in the index ts file. First, we'll import our dependencies, then we can import Dialogflow from the actions on Google SDK.

It also includes a bunch of helpers for formatting rich cards that you send in the response. For example, that card that would link us back to our progressive Web app. Then the app itself is very similar conceptually to Express JS. You can think of each intent Like an HTTP endpoint that we need to handle whenever it gets triggered. We can say app intent with get latest episode, And then this will take a callback function to handle the intent.

And because we're fetching data from the outside world asynchronously, we'll make this an async function. For right now, I'm setting up a placeholder variable called data, which will eventually scrape the web for the data that we want on angularfirebase.com. Eventually, it will return a title, description, and episode number for the bot to use. We can then say conversation close or conversation ask to continue the conversation with the user. If you use ask, it's going to keep the conversation open.

If you use close, it will end the dialogue flow session after that response is sent. In this case, our bot has nothing else to do, so we're going to use conversation close. You could just pass in a string here, but I think it's easier to use a simple response, which allows you to control both the text and the speech that the bot will return. So the text will be nice and concise, and then the speech will contain additional information such as the full episode description. So that's great for text and speech only applications, But things like smartphones can handle more than just text and speech.

In this case, we can send back a card that will deep link to our app and take the user exactly where they wanna go. This works great for both progressive web apps and native mobile apps, and it's just a great way to build engagement with your users. And that's pretty much all there is to it on the Dialogflow side. The only missing piece at this point is how do we get this actual information from the website. I'm not going to talk about this code in detail because that has nothing to do with the assistant, but all it's doing is fetching the web page and then using Cheerio To traverse the DOM, to find the information that we need, it's just a classic web scraper.

First, we need to fetch the page asynchronously. Then on this particular web page, we have a feed of lessons. So we wanna pull the first lesson from the page along with its content. Then we can extract the text that is contained within the various elements inside this div. Then we'll return everything as a plain JavaScript object so we can use it in the method that we had defined earlier to handle the intent.

The final step is to export our function, which we'll name fulfillment. It needs to be an HTTPS function, and it will take the Dialogflow app as its argument. Now open up another command line terminal and run Firebase deploy only functions. When that's finished, you can go to the Firebase console and verify that it's been deployed in the functions tab and grab the URL endpoint. Then switch back over to the fulfillment tab in Dialogflow and paste it as the webhook fulfillment URL.

And that's pretty much all there is to it. You've now successfully built your own Google Assistant app. Go back to the actions on Google Console and test it out. You can also test it out on any device that's connected to your Gmail account. That means you can start testing it out right away on your Android or iPhone device or on your Google Home device.

But to release it to the public, you'll go through a very similar process to the Google Play Store for Android apps where you have an alpha, beta, and then production release once it's ready to go live. Overall, this technology is super exciting, and there's tons of opportunities for business to engage their customers in ways that weren't possible before. The demand for conversation apps is growing rapidly, so it's something you definitely wanna be aware of and familiar with as a developer. I'm gonna go ahead and wrap up there. If this video helped you, please like and subscribe.

And if you have any questions, reach out to me on Slack. And if you're ready to go beyond the basics, consider becoming a pro member at angularfirebase.com to get access to exclusive content designed to help you build and ship your app faster. Thanks for watching, and I'll see you soon.
Hey, Google. Let's talk to angular firebase.com. Sure. Here's the test version of angularfirebase.com. Howdy, partner. I'm Angular Firebase. What can I do you for? What's the latest episode? The last video was episode 104, Angular CLI basics tutorial. Its description goes like this. Master the basics of the Angular v six CLI.
July. The Google Assistant makes it easy for users to get things done in your app through conversation. In today's episode, we'll build a Google Assistant app from scratch using Dialogflow and Firebase Cloud functions. If you're new here, make sure to like and subscribe, and you can grab the source code at angularfirebase.com. Let's get started by breaking down the demo that I just showed you. The first thing that I said was, hey, Google. Let's talk to my app name. The app name is something that you register as the developer, and it signifies the main entry point into your assistant app. When Google finds this app, It's going to start a session in Dialogflow.
google
software
software development
We've used Dialogflow before in episode 58 to build a chatbot, and it's basically just a high level Tool for building conversational experiences.
It uses some crazy machine learning algorithms to handle the natural language processing. So when I say get the latest episode, it knows that I'm trying to convey this get latest episode intent, which in turn is fulfilled by a Firebase Cloud function That goes out and visits the website, gets the information that we need, and then tells the assistant what to say to the end user. And you can even use a rich card as the response So the user can just link directly back to your progressive web app that they already have installed on their device. Now that we know how the basic process works, let's start building our Google Assistant app. There are several different ways we can do this, but let's start in the Google Actions console. You can link your assistant to an existing Firebase or Google Cloud project, or you can just create a new one from scratch. From there, you'll select a category, and then the first thing you'll do is determine the entry point for this app. This part's pretty important because it's what the user will say to invoke your app.
machine learning
google
artificial intelligence
deep learning
neural networks
For example, hey, Google. Let's talk to angular firebase.com. At this point, you could continue building your app in the actions console, and there's a few templates for doing so. But in most cases, you want to switch over to Dialog at this point and start building the conversation interface. Click on actions, then add your first action, and then click build. Go ahead and create the agent, and then switch over to the intent screen. You'll have a default welcome intent, which will greet your user when they first initiate your app. You can customize the response as needed, but we're going to create a brand new intent. This one's called learn about Angular Firebase. There are 2 basic ways to handle intents. The easiest way is just to create a text response here in Dialogflow, which we'll do for this intent, Or you can invoke a Firebase Cloud function to reach out to the outside world to retrieve dynamic data.
But first, we need to give the bot some training phrases So it knows how to detect the intent. For example, what is Angular Firebase? Dialogflow will use these phrases to refine the machine learning Algorithm that's used to detect similar phrases that are said by the end user. The only other thing you need at this point is to send the response back to the user, which we can do with just plain text.
machine learning
artificial intelligence
So when this intent is triggered, it's going to respond to the user with whatever you put in this text response, And you can add multiple responses too to give some variation to your bot. So that's the most basic use case, but we wanna do something a little more advanced. We wanna use a cloud function to go out to the Angular Firebase website and figure out what the last episode was. For that, we'll create a new intent, And then we'll add the training phrases just like we did before. But this time, instead of sending a text response, we're going to flip the switch for webhook fulfillment. This tells Dialogflow to send some data to our back end cloud function, then we can use the Dialog Flow SDK for Node JS to handle these intents and respond back to the user.
This makes it possible for your bot To do things like update a database, reach out to third party APIs, send email, or anything else you might do in a Node. Js back end. You can code your webhook directly in the browser if you want to, but personally, I wouldn't recommend doing that.
internet
A better way to do it is to open up your favorite IDE, And then from the command line, run firebase init functions. Then I highly recommend using the TypeScript option. And then for everything else, you can just go through with the main default. Then CD into the functions directory and install the actions on Google SDK.
This will help us format the responses that go back to Dialogflow so we can build this app with minimal code. Then for this project, I'm going to install 2 other dependencies that we'll use to build a simple web scraper, which I'll explain in more detail later. For right now, just install node fetch and Cheerio.
software development
software
Then we'll write all of the code in the index ts file. First, we'll import our dependencies, then we can import Dialogflow from the actions on Google SDK. It also includes a bunch of helpers for formatting rich cards that you send in the response. For example, that card that would link us back to our progressive Web app. Then the app itself is very similar conceptually to Express JS. You can think of each intent Like an HTTP endpoint that we need to handle whenever it gets triggered. We can say app intent with get latest episode, And then this will take a callback function to handle the intent. And because we're fetching data from the outside world asynchronously, we'll make this an async function.
For right now, I'm setting up a placeholder variable called data, which will eventually scrape the web for the data that we want on angularfirebase.com. Eventually, it will return a title, description, and episode number for the bot to use. We can then say conversation close or conversation ask to continue the conversation with the user.
databases
If you use ask, it's going to keep the conversation open. If you use close, it will end the dialogue flow session after that response is sent.
In this case, our bot has nothing else to do, so we're going to use conversation close. You could just pass in a string here, but I think it's easier to use a simple response, which allows you to control both the text and the speech that the bot will return. So the text will be nice and concise, and then the speech will contain additional information such as the full episode description. So that's great for text and speech only applications, But things like smartphones can handle more than just text and speech. In this case, we can send back a card that will deep link to our app and take the user exactly where they wanna go.
phones
multimedia
audio
speech
This works great for both progressive web apps and native mobile apps, and it's just a great way to build engagement with your users. And that's pretty much all there is to it on the Dialogflow side. The only missing piece at this point is how do we get this actual information from the website.
internet
I'm not going to talk about this code in detail because that has nothing to do with the assistant, but all it's doing is fetching the web page and then using Cheerio To traverse the DOM, to find the information that we need, it's just a classic web scraper. First, we need to fetch the page asynchronously. Then on this particular web page, we have a feed of lessons. So we wanna pull the first lesson from the page along with its content. Then we can extract the text that is contained within the various elements inside this div. Then we'll return everything as a plain JavaScript object so we can use it in the method that we had defined earlier to handle the intent. The final step is to export our function, which we'll name fulfillment. It needs to be an HTTPS function, and it will take the Dialogflow app as its argument. Now open up another command line terminal and run Firebase deploy only functions. When that's finished, you can go to the Firebase console and verify that it's been deployed in the functions tab and grab the URL endpoint.
Then switch back over to the fulfillment tab in Dialogflow and paste it as the webhook fulfillment URL. And that's pretty much all there is to it. You've now successfully built your own Google Assistant app. Go back to the actions on Google Console and test it out. You can also test it out on any device that's connected to your Gmail account. That means you can start testing it out right away on your Android or iPhone device or on your Google Home device. But to release it to the public, you'll go through a very similar process to the Google Play Store for Android apps where you have an alpha, beta, and then production release once it's ready to go live. Overall, this technology is super exciting, and there's tons of opportunities for business to engage their customers in ways that weren't possible before. The demand for conversation apps is growing rapidly, so it's something you definitely wanna be aware of and familiar with as a developer. I'm gonna go ahead and wrap up there. If this video helped you, please like and subscribe. And if you have any questions, reach out to me on Slack. And if you're ready to go beyond the basics, consider becoming a pro member at angularfirebase.com to get access to exclusive content designed to help you build and ship your app faster.
google
technology
telecommunications
youtube
internet
phones
multimedia
Thanks for watching, and I'll see you soon.
Hey, Google. Let's talk to angular firebase.com. Sure. Here's the test version of angularfirebase.com. Howdy, partner. I'm Angular Firebase. What can I do you for? What's the latest episode? The last video was episode 104, Angular CLI basics tutorial. Its description goes like this. Master the basics of the Angular v six CLI. July. The Google Assistant makes it easy for users to get things done in your app through conversation. In today's episode, we'll build a Google Assistant app from scratch using Dialogflow and Firebase Cloud functions. If you're new here, make sure to like and subscribe, and you can grab the source code at angularfirebase.com. Let's get started by breaking down the demo that I just showed you. The first thing that I said was, hey, Google. Let's talk to my app name. The app name is something that you register as the developer, and it signifies the main entry point into your assistant app. When Google finds this app, It's going to start a session in Dialogflow. We've used Dialogflow before in episode 58 to build a chatbot, and it's basically just a high level Tool for building conversational experiences. It uses some crazy machine learning algorithms to handle the natural language processing. So when I say get the latest episode, it knows that I'm trying to convey this get latest episode intent, which in turn is fulfilled by a Firebase Cloud function That goes out and visits the website, gets the information that we need, and then tells the assistant what to say to the end user. And you can even use a rich card as the response So the user can just link directly back to your progressive web app that they already have installed on their device. Now that we know how the basic process works, let's start building our Google Assistant app. There are several different ways we can do this, but let's start in the Google Actions console. You can link your assistant to an existing Firebase or Google Cloud project, or you can just create a new one from scratch. From there, you'll select a category, and then the first thing you'll do is determine the entry point for this app. This part's pretty important because it's what the user will say to invoke your app. For example, hey, Google. Let's talk to angular firebase.com. At this point, you could continue building your app in the actions console, and there's a few templates for doing so. But in most cases, you want to switch over to Dialog at this point and start building the conversation interface. Click on actions, then add your first action, and then click build. Go ahead and create the agent, and then switch over to the intent screen. You'll have a default welcome intent, which will greet your user when they first initiate your app. You can customize the response as needed, but we're going to create a brand new intent. This one's called learn about Angular Firebase. There are 2 basic ways to handle intents. The easiest way is just to create a text response here in Dialogflow, which we'll do for this intent, Or you can invoke a Firebase Cloud function to reach out to the outside world to retrieve dynamic data. But first, we need to give the bot some training phrases So it knows how to detect the intent. For example, what is Angular Firebase? Dialogflow will use these phrases to refine the machine learning Algorithm that's used to detect similar phrases that are said by the end user. The only other thing you need at this point is to send the response back to the user, which we can do with just plain text. So when this intent is triggered, it's going to respond to the user with whatever you put in this text response, And you can add multiple responses too to give some variation to your bot. So that's the most basic use case, but we wanna do something a little more advanced. We wanna use a cloud function to go out to the Angular Firebase website and figure out what the last episode was. For that, we'll create a new intent, And then we'll add the training phrases just like we did before. But this time, instead of sending a text response, we're going to flip the switch for webhook fulfillment. This tells Dialogflow to send some data to our back end cloud function, then we can use the Dialog Flow SDK for Node JS to handle these intents and respond back to the user. This makes it possible for your bot To do things like update a database, reach out to third party APIs, send email, or anything else you might do in a Node. Js back end. You can code your webhook directly in the browser if you want to, but personally, I wouldn't recommend doing that. A better way to do it is to open up your favorite IDE, And then from the command line, run firebase init functions. Then I highly recommend using the TypeScript option. And then for everything else, you can just go through with the main default. Then CD into the functions directory and install the actions on Google SDK. This will help us format the responses that go back to Dialogflow so we can build this app with minimal code. Then for this project, I'm going to install 2 other dependencies that we'll use to build a simple web scraper, which I'll explain in more detail later. For right now, just install node fetch and Cheerio. Then we'll write all of the code in the index ts file. First, we'll import our dependencies, then we can import Dialogflow from the actions on Google SDK. It also includes a bunch of helpers for formatting rich cards that you send in the response. For example, that card that would link us back to our progressive Web app. Then the app itself is very similar conceptually to Express JS. You can think of each intent Like an HTTP endpoint that we need to handle whenever it gets triggered. We can say app intent with get latest episode, And then this will take a callback function to handle the intent. And because we're fetching data from the outside world asynchronously, we'll make this an async function. For right now, I'm setting up a placeholder variable called data, which will eventually scrape the web for the data that we want on angularfirebase.com. Eventually, it will return a title, description, and episode number for the bot to use. We can then say conversation close or conversation ask to continue the conversation with the user. If you use ask, it's going to keep the conversation open. If you use close, it will end the dialogue flow session after that response is sent. In this case, our bot has nothing else to do, so we're going to use conversation close. You could just pass in a string here, but I think it's easier to use a simple response, which allows you to control both the text and the speech that the bot will return. So the text will be nice and concise, and then the speech will contain additional information such as the full episode description. So that's great for text and speech only applications, But things like smartphones can handle more than just text and speech. In this case, we can send back a card that will deep link to our app and take the user exactly where they wanna go. This works great for both progressive web apps and native mobile apps, and it's just a great way to build engagement with your users. And that's pretty much all there is to it on the Dialogflow side. The only missing piece at this point is how do we get this actual information from the website. I'm not going to talk about this code in detail because that has nothing to do with the assistant, but all it's doing is fetching the web page and then using Cheerio To traverse the DOM, to find the information that we need, it's just a classic web scraper. First, we need to fetch the page asynchronously. Then on this particular web page, we have a feed of lessons. So we wanna pull the first lesson from the page along with its content. Then we can extract the text that is contained within the various elements inside this div. Then we'll return everything as a plain JavaScript object so we can use it in the method that we had defined earlier to handle the intent. The final step is to export our function, which we'll name fulfillment. It needs to be an HTTPS function, and it will take the Dialogflow app as its argument. Now open up another command line terminal and run Firebase deploy only functions. When that's finished, you can go to the Firebase console and verify that it's been deployed in the functions tab and grab the URL endpoint. Then switch back over to the fulfillment tab in Dialogflow and paste it as the webhook fulfillment URL. And that's pretty much all there is to it. You've now successfully built your own Google Assistant app. Go back to the actions on Google Console and test it out. You can also test it out on any device that's connected to your Gmail account. That means you can start testing it out right away on your Android or iPhone device or on your Google Home device. But to release it to the public, you'll go through a very similar process to the Google Play Store for Android apps where you have an alpha, beta, and then production release once it's ready to go live. Overall, this technology is super exciting, and there's tons of opportunities for business to engage their customers in ways that weren't possible before. The demand for conversation apps is growing rapidly, so it's something you definitely wanna be aware of and familiar with as a developer. I'm gonna go ahead and wrap up there. If this video helped you, please like and subscribe. And if you have any questions, reach out to me on Slack. And if you're ready to go beyond the basics, consider becoming a pro member at angularfirebase.com to get access to exclusive content designed to help you build and ship your app faster. Thanks for watching, and I'll see you soon.
Hey,
hey
Google.
google
Let's
let's
talk
talk
to
to
angular
angular
firebase.com.
firebase.com
Sure.
sure
Here's
here's
the
the
test
test
version
version
of
of
angularfirebase.com.
angularfirebase.com
Howdy,
howdy
partner.
partner
I'm
i'm
Angular
angular
Firebase.
firebase
What
what
can
can
I
i
do
do
you
you
for?
for
What's
what's
the
the
latest
latest
episode?
episode
The
the
last
last
video
video
was
was
episode
episode
104,
104
Angular
angular
CLI
cli
basics
basics
tutorial.
tutorial
Its
its
description
description
goes
goes
like
like
this.
this
Master
master
the
the
basics
basics
of
of
the
the
Angular
angular
v
v
six
six
CLI.
cli
July.
july
The
the
Google
google
Assistant
assistant
makes
makes
it
it
easy
easy
for
for
users
users
to
to
get
get
things
things
done
done
in
in
your
your
app
app
through
through
conversation.
conversation
In
in
today's
today's
episode,
episode
we'll
we'll
build
build
a
a
Google
google
Assistant
assistant
app
app
from
from
scratch
scratch
using
using
Dialogflow
dialogflow
and
and
Firebase
firebase
Cloud
cloud
functions.
functions
If
if
you're
you're
new
new
here,
here
make
make
sure
sure
to
to
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
grab
grab
the
the
source
source
code
code
at
at
angularfirebase.com.
angularfirebase.com
Let's
let's
get
get
started
started
by
by
breaking
breaking
down
down
the
the
demo
demo
that
that
I
i
just
just
showed
showed
you.
you
The
the
first
first
thing
thing
that
that
I
i
said
said
was,
was
hey,
hey
Google.
google
Let's
let's
talk
talk
to
to
my
my
app
app
name.
name
The
the
app
app
name
name
is
is
something
something
that
that
you
you
register
register
as
as
the
the
developer,
developer
and
and
it
it
signifies
signifies
the
the
main
main
entry
entry
point
point
into
into
your
your
assistant
assistant
app.
app
When
when
Google
google
finds
finds
this
this
app,
app
It's
it's
going
going
to
to
start
start
a
a
session
session
in
in
Dialogflow.
dialogflow
We've
we've
used
used
Dialogflow
dialogflow
before
before
in
in
episode
episode
58
58
to
to
build
build
a
a
chatbot,
chatbot
and
and
it's
it's
basically
basically
just
just
a
a
high
high
level
level
Tool
tool
for
for
building
building
conversational
conversational
experiences.
experiences
It
it
uses
uses
some
some
crazy
crazy
machine
machine
learning
learning
algorithms
algorithms
to
to
handle
handle
the
the
natural
natural
language
language
processing.
processing
So
so
when
when
I
i
say
say
get
get
the
the
latest
latest
episode,
episode
it
it
knows
knows
that
that
I'm
i'm
trying
trying
to
to
convey
convey
this
this
get
get
latest
latest
episode
episode
intent,
intent
which
which
in
in
turn
turn
is
is
fulfilled
fulfilled
by
by
a
a
Firebase
firebase
Cloud
cloud
function
function
That
that
goes
goes
out
out
and
and
visits
visits
the
the
website,
website
gets
gets
the
the
information
information
that
that
we
we
need,
need
and
and
then
then
tells
tells
the
the
assistant
assistant
what
what
to
to
say
say
to
to
the
the
end
end
user.
user
And
and
you
you
can
can
even
even
use
use
a
a
rich
rich
card
card
as
as
the
the
response
response
So
so
the
the
user
user
can
can
just
just
link
link
directly
directly
back
back
to
to
your
your
progressive
progressive
web
web
app
app
that
that
they
they
already
already
have
have
installed
installed
on
on
their
their
device.
device
Now
now
that
that
we
we
know
know
how
how
the
the
basic
basic
process
process
works,
works
let's
let's
start
start
building
building
our
our
Google
google
Assistant
assistant
app.
app
There
there
are
are
several
several
different
different
ways
ways
we
we
can
can
do
do
this,
this
but
but
let's
let's
start
start
in
in
the
the
Google
google
Actions
actions
console.
console
You
you
can
can
link
link
your
your
assistant
assistant
to
to
an
an
existing
existing
Firebase
firebase
or
or
Google
google
Cloud
cloud
project,
project
or
or
you
you
can
can
just
just
create
create
a
a
new
new
one
one
from
from
scratch.
scratch
From
from
there,
there
you'll
you'll
select
select
a
a
category,
category
and
and
then
then
the
the
first
first
thing
thing
you'll
you'll
do
do
is
is
determine
determine
the
the
entry
entry
point
point
for
for
this
this
app.
app
This
this
part's
part's
pretty
pretty
important
important
because
because
it's
it's
what
what
the
the
user
user
will
will
say
say
to
to
invoke
invoke
your
your
app.
app
For
for
example,
example
hey,
hey
Google.
google
Let's
let's
talk
talk
to
to
angular
angular
firebase.com.
firebase.com
At
at
this
this
point,
point
you
you
could
could
continue
continue
building
building
your
your
app
app
in
in
the
the
actions
actions
console,
console
and
and
there's
there's
a
a
few
few
templates
templates
for
for
doing
doing
so.
so
But
but
in
in
most
most
cases,
cases
you
you
want
want
to
to
switch
switch
over
over
to
to
Dialog
dialog
at
at
this
this
point
point
and
and
start
start
building
building
the
the
conversation
conversation
interface.
interface
Click
click
on
on
actions,
actions
then
then
add
add
your
your
first
first
action,
action
and
and
then
then
click
click
build.
build
Go
go
ahead
ahead
and
and
create
create
the
the
agent,
agent
and
and
then
then
switch
switch
over
over
to
to
the
the
intent
intent
screen.
screen
You'll
you'll
have
have
a
a
default
default
welcome
welcome
intent,
intent
which
which
will
will
greet
greet
your
your
user
user
when
when
they
they
first
first
initiate
initiate
your
your
app.
app
You
you
can
can
customize
customize
the
the
response
response
as
as
needed,
needed
but
but
we're
we're
going
going
to
to
create
create
a
a
brand
brand
new
new
intent.
intent
This
this
one's
one's
called
called
learn
learn
about
about
Angular
angular
Firebase.
firebase
There
there
are
are
2
2
basic
basic
ways
ways
to
to
handle
handle
intents.
intents
The
the
easiest
easiest
way
way
is
is
just
just
to
to
create
create
a
a
text
text
response
response
here
here
in
in
Dialogflow,
dialogflow
which
which
we'll
we'll
do
do
for
for
this
this
intent,
intent
Or
or
you
you
can
can
invoke
invoke
a
a
Firebase
firebase
Cloud
cloud
function
function
to
to
reach
reach
out
out
to
to
the
the
outside
outside
world
world
to
to
retrieve
retrieve
dynamic
dynamic
data.
data
But
but
first,
first
we
we
need
need
to
to
give
give
the
the
bot
bot
some
some
training
training
phrases
phrases
So
so
it
it
knows
knows
how
how
to
to
detect
detect
the
the
intent.
intent
For
for
example,
example
what
what
is
is
Angular
angular
Firebase?
firebase
Dialogflow
dialogflow
will
will
use
use
these
these
phrases
phrases
to
to
refine
refine
the
the
machine
machine
learning
learning
Algorithm
algorithm
that's
that's
used
used
to
to
detect
detect
similar
similar
phrases
phrases
that
that
are
are
said
said
by
by
the
the
end
end
user.
user
The
the
only
only
other
other
thing
thing
you
you
need
need
at
at
this
this
point
point
is
is
to
to
send
send
the
the
response
response
back
back
to
to
the
the
user,
user
which
which
we
we
can
can
do
do
with
with
just
just
plain
plain
text.
text
So
so
when
when
this
this
intent
intent
is
is
triggered,
triggered
it's
it's
going
going
to
to
respond
respond
to
to
the
the
user
user
with
with
whatever
whatever
you
you
put
put
in
in
this
this
text
text
response,
response
And
and
you
you
can
can
add
add
multiple
multiple
responses
responses
too
too
to
to
give
give
some
some
variation
variation
to
to
your
your
bot.
bot
So
so
that's
that's
the
the
most
most
basic
basic
use
use
case,
case
but
but
we
we
wanna
wanna
do
do
something
something
a
a
little
little
more
more
advanced.
advanced
We
we
wanna
wanna
use
use
a
a
cloud
cloud
function
function
to
to
go
go
out
out
to
to
the
the
Angular
angular
Firebase
firebase
website
website
and
and
figure
figure
out
out
what
what
the
the
last
last
episode
episode
was.
was
For
for
that,
that
we'll
we'll
create
create
a
a
new
new
intent,
intent
And
and
then
then
we'll
we'll
add
add
the
the
training
training
phrases
phrases
just
just
like
like
we
we
did
did
before.
before
But
but
this
this
time,
time
instead
instead
of
of
sending
sending
a
a
text
text
response,
response
we're
we're
going
going
to
to
flip
flip
the
the
switch
switch
for
for
webhook
webhook
fulfillment.
fulfillment
This
this
tells
tells
Dialogflow
dialogflow
to
to
send
send
some
some
data
data
to
to
our
our
back
back
end
end
cloud
cloud
function,
function
then
then
we
we
can
can
use
use
the
the
Dialog
dialog
Flow
flow
SDK
sdk
for
for
Node
node
JS
js
to
to
handle
handle
these
these
intents
intents
and
and
respond
respond
back
back
to
to
the
the
user.
user
This
this
makes
makes
it
it
possible
possible
for
for
your
your
bot
bot
To
to
do
do
things
things
like
like
update
update
a
a
database,
database
reach
reach
out
out
to
to
third
third
party
party
APIs,
apis
send
send
email,
email
or
or
anything
anything
else
else
you
you
might
might
do
do
in
in
a
a
Node.
node
Js
js
back
back
end.
end
You
you
can
can
code
code
your
your
webhook
webhook
directly
directly
in
in
the
the
browser
browser
if
if
you
you
want
want
to,
to
but
but
personally,
personally
I
i
wouldn't
wouldn't
recommend
recommend
doing
doing
that.
that
A
a
better
better
way
way
to
to
do
do
it
it
is
is
to
to
open
open
up
up
your
your
favorite
favorite
IDE,
ide
And
and
then
then
from
from
the
the
command
command
line,
line
run
run
firebase
firebase
init
init
functions.
functions
Then
then
I
i
highly
highly
recommend
recommend
using
using
the
the
TypeScript
typescript
option.
option
And
and
then
then
for
for
everything
everything
else,
else
you
you
can
can
just
just
go
go
through
through
with
with
the
the
main
main
default.
default
Then
then
CD
cd
into
into
the
the
functions
functions
directory
directory
and
and
install
install
the
the
actions
actions
on
on
Google
google
SDK.
sdk
This
this
will
will
help
help
us
us
format
format
the
the
responses
responses
that
that
go
go
back
back
to
to
Dialogflow
dialogflow
so
so
we
we
can
can
build
build
this
this
app
app
with
with
minimal
minimal
code.
code
Then
then
for
for
this
this
project,
project
I'm
i'm
going
going
to
to
install
install
2
2
other
other
dependencies
dependencies
that
that
we'll
we'll
use
use
to
to
build
build
a
a
simple
simple
web
web
scraper,
scraper
which
which
I'll
i'll
explain
explain
in
in
more
more
detail
detail
later.
later
For
for
right
right
now,
now
just
just
install
install
node
node
fetch
fetch
and
and
Cheerio.
cheerio
Then
then
we'll
we'll
write
write
all
all
of
of
the
the
code
code
in
in
the
the
index
index
ts
ts
file.
file
First,
first
we'll
we'll
import
import
our
our
dependencies,
dependencies
then
then
we
we
can
can
import
import
Dialogflow
dialogflow
from
from
the
the
actions
actions
on
on
Google
google
SDK.
sdk
It
it
also
also
includes
includes
a
a
bunch
bunch
of
of
helpers
helpers
for
for
formatting
formatting
rich
rich
cards
cards
that
that
you
you
send
send
in
in
the
the
response.
response
For
for
example,
example
that
that
card
card
that
that
would
would
link
link
us
us
back
back
to
to
our
our
progressive
progressive
Web
web
app.
app
Then
then
the
the
app
app
itself
itself
is
is
very
very
similar
similar
conceptually
conceptually
to
to
Express
express
JS.
js
You
you
can
can
think
think
of
of
each
each
intent
intent
Like
like
an
an
HTTP
http
endpoint
endpoint
that
that
we
we
need
need
to
to
handle
handle
whenever
whenever
it
it
gets
gets
triggered.
triggered
We
we
can
can
say
say
app
app
intent
intent
with
with
get
get
latest
latest
episode,
episode
And
and
then
then
this
this
will
will
take
take
a
a
callback
callback
function
function
to
to
handle
handle
the
the
intent.
intent
And
and
because
because
we're
we're
fetching
fetching
data
data
from
from
the
the
outside
outside
world
world
asynchronously,
asynchronously
we'll
we'll
make
make
this
this
an
an
async
async
function.
function
For
for
right
right
now,
now
I'm
i'm
setting
setting
up
up
a
a
placeholder
placeholder
variable
variable
called
called
data,
data
which
which
will
will
eventually
eventually
scrape
scrape
the
the
web
web
for
for
the
the
data
data
that
that
we
we
want
want
on
on
angularfirebase.com.
angularfirebase.com
Eventually,
eventually
it
it
will
will
return
return
a
a
title,
title
description,
description
and
and
episode
episode
number
number
for
for
the
the
bot
bot
to
to
use.
use
We
we
can
can
then
then
say
say
conversation
conversation
close
close
or
or
conversation
conversation
ask
ask
to
to
continue
continue
the
the
conversation
conversation
with
with
the
the
user.
user
If
if
you
you
use
use
ask,
ask
it's
it's
going
going
to
to
keep
keep
the
the
conversation
conversation
open.
open
If
if
you
you
use
use
close,
close
it
it
will
will
end
end
the
the
dialogue
dialogue
flow
flow
session
session
after
after
that
that
response
response
is
is
sent.
sent
In
in
this
this
case,
case
our
our
bot
bot
has
has
nothing
nothing
else
else
to
to
do,
do
so
so
we're
we're
going
going
to
to
use
use
conversation
conversation
close.
close
You
you
could
could
just
just
pass
pass
in
in
a
a
string
string
here,
here
but
but
I
i
think
think
it's
it's
easier
easier
to
to
use
use
a
a
simple
simple
response,
response
which
which
allows
allows
you
you
to
to
control
control
both
both
the
the
text
text
and
and
the
the
speech
speech
that
that
the
the
bot
bot
will
will
return.
return
So
so
the
the
text
text
will
will
be
be
nice
nice
and
and
concise,
concise
and
and
then
then
the
the
speech
speech
will
will
contain
contain
additional
additional
information
information
such
such
as
as
the
the
full
full
episode
episode
description.
description
So
so
that's
that's
great
great
for
for
text
text
and
and
speech
speech
only
only
applications,
applications
But
but
things
things
like
like
smartphones
smartphones
can
can
handle
handle
more
more
than
than
just
just
text
text
and
and
speech.
speech
In
in
this
this
case,
case
we
we
can
can
send
send
back
back
a
a
card
card
that
that
will
will
deep
deep
link
link
to
to
our
our
app
app
and
and
take
take
the
the
user
user
exactly
exactly
where
where
they
they
wanna
wanna
go.
go
This
this
works
works
great
great
for
for
both
both
progressive
progressive
web
web
apps
apps
and
and
native
native
mobile
mobile
apps,
apps
and
and
it's
it's
just
just
a
a
great
great
way
way
to
to
build
build
engagement
engagement
with
with
your
your
users.
users
And
and
that's
that's
pretty
pretty
much
much
all
all
there
there
is
is
to
to
it
it
on
on
the
the
Dialogflow
dialogflow
side.
side
The
the
only
only
missing
missing
piece
piece
at
at
this
this
point
point
is
is
how
how
do
do
we
we
get
get
this
this
actual
actual
information
information
from
from
the
the
website.
website
I'm
i'm
not
not
going
going
to
to
talk
talk
about
about
this
this
code
code
in
in
detail
detail
because
because
that
that
has
has
nothing
nothing
to
to
do
do
with
with
the
the
assistant,
assistant
but
but
all
all
it's
it's
doing
doing
is
is
fetching
fetching
the
the
web
web
page
page
and
and
then
then
using
using
Cheerio
cheerio
To
to
traverse
traverse
the
the
DOM,
dom
to
to
find
find
the
the
information
information
that
that
we
we
need,
need
it's
it's
just
just
a
a
classic
classic
web
web
scraper.
scraper
First,
first
we
we
need
need
to
to
fetch
fetch
the
the
page
page
asynchronously.
asynchronously
Then
then
on
on
this
this
particular
particular
web
web
page,
page
we
we
have
have
a
a
feed
feed
of
of
lessons.
lessons
So
so
we
we
wanna
wanna
pull
pull
the
the
first
first
lesson
lesson
from
from
the
the
page
page
along
along
with
with
its
its
content.
content
Then
then
we
we
can
can
extract
extract
the
the
text
text
that
that
is
is
contained
contained
within
within
the
the
various
various
elements
elements
inside
inside
this
this
div.
div
Then
then
we'll
we'll
return
return
everything
everything
as
as
a
a
plain
plain
JavaScript
javascript
object
object
so
so
we
we
can
can
use
use
it
it
in
in
the
the
method
method
that
that
we
we
had
had
defined
defined
earlier
earlier
to
to
handle
handle
the
the
intent.
intent
The
the
final
final
step
step
is
is
to
to
export
export
our
our
function,
function
which
which
we'll
we'll
name
name
fulfillment.
fulfillment
It
it
needs
needs
to
to
be
be
an
an
HTTPS
https
function,
function
and
and
it
it
will
will
take
take
the
the
Dialogflow
dialogflow
app
app
as
as
its
its
argument.
argument
Now
now
open
open
up
up
another
another
command
command
line
line
terminal
terminal
and
and
run
run
Firebase
firebase
deploy
deploy
only
only
functions.
functions
When
when
that's
that's
finished,
finished
you
you
can
can
go
go
to
to
the
the
Firebase
firebase
console
console
and
and
verify
verify
that
that
it's
it's
been
been
deployed
deployed
in
in
the
the
functions
functions
tab
tab
and
and
grab
grab
the
the
URL
url
endpoint.
endpoint
Then
then
switch
switch
back
back
over
over
to
to
the
the
fulfillment
fulfillment
tab
tab
in
in
Dialogflow
dialogflow
and
and
paste
paste
it
it
as
as
the
the
webhook
webhook
fulfillment
fulfillment
URL.
url
And
and
that's
that's
pretty
pretty
much
much
all
all
there
there
is
is
to
to
it.
it
You've
you've
now
now
successfully
successfully
built
built
your
your
own
own
Google
google
Assistant
assistant
app.
app
Go
go
back
back
to
to
the
the
actions
actions
on
on
Google
google
Console
console
and
and
test
test
it
it
out.
out
You
you
can
can
also
also
test
test
it
it
out
out
on
on
any
any
device
device
that's
that's
connected
connected
to
to
your
your
Gmail
gmail
account.
account
That
that
means
means
you
you
can
can
start
start
testing
testing
it
it
out
out
right
right
away
away
on
on
your
your
Android
android
or
or
iPhone
iphone
device
device
or
or
on
on
your
your
Google
google
Home
home
device.
device
But
but
to
to
release
release
it
it
to
to
the
the
public,
public
you'll
you'll
go
go
through
through
a
a
very
very
similar
similar
process
process
to
to
the
the
Google
google
Play
play
Store
store
for
for
Android
android
apps
apps
where
where
you
you
have
have
an
an
alpha,
alpha
beta,
beta
and
and
then
then
production
production
release
release
once
once
it's
it's
ready
ready
to
to
go
go
live.
live
Overall,
overall
this
this
technology
technology
is
is
super
super
exciting,
exciting
and
and
there's
there's
tons
tons
of
of
opportunities
opportunities
for
for
business
business
to
to
engage
engage
their
their
customers
customers
in
in
ways
ways
that
that
weren't
weren't
possible
possible
before.
before
The
the
demand
demand
for
for
conversation
conversation
apps
apps
is
is
growing
growing
rapidly,
rapidly
so
so
it's
it's
something
something
you
you
definitely
definitely
wanna
wanna
be
be
aware
aware
of
of
and
and
familiar
familiar
with
with
as
as
a
a
developer.
developer
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
have
have
any
any
questions,
questions
reach
reach
out
out
to
to
me
me
on
on
Slack.
slack
And
and
if
if
you're
you're
ready
ready
to
to
go
go
beyond
beyond
the
the
basics,
basics
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com
angularfirebase.com
to
to
get
get
access
access
to
to
exclusive
exclusive
content
content
designed
designed
to
to
help
help
you
you
build
build
and
and
ship
ship
your
your
app
app
faster.
faster
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speakers discuss using Dialogflow and Buoyancy Cloud functions in Google's assistant app, recommending using the TypeScript option for code in the browser and the webhook. They also explain how to use the Dialogflow app for creating an intent, updating a database, reaching out to third-party APIs, and sending email. The speakers recommend using the cloud function for chat and speech only applications and a web function forRx, and provide information on obtaining information from websites and downloading a file for the web page. They also mention a pro member for more tips on creating a Google Assistant app.
Google Assistant Quick Start for Developers
Hey, Google. Let's talk to angular firebase.com. Sure. Here's the test version of angularfirebase.com. Howdy, partner. I'm Angular Firebase. What can I do you for? What's the latest episode? The last video was episode 104, Angular CLI basics tutorial. Its description goes like this. Master the basics of the Angular v six CLI. July. The Google Assistant makes it easy for users to get things done in your app through conversation. In today's episode, we'll build a Google Assistant app from scratch using Dialogflow and Firebase Cloud functions. If you're new here, make sure to like and subscribe, and you can grab the source code at angularfirebase.com. Let's get started by breaking down the demo that I just showed you. The first thing that I said was, hey, Google. Let's talk to my app name. The app name is something that you register as the developer, and it signifies the main entry point into your assistant app. When Google finds this app, It's going to start a session in Dialogflow. We've used Dialogflow before in episode 58 to build a chatbot, and it's basically just a high level Tool for building conversational experiences. It uses some crazy machine learning algorithms to handle the natural language processing. So when I say get the latest episode, it knows that I'm trying to convey this get latest episode intent, which in turn is fulfilled by a Firebase Cloud function That goes out and visits the website, gets the information that we need, and then tells the assistant what to say to the end user. And you can even use a rich card as the response So the user can just link directly back to your progressive web app that they already have installed on their device. Now that we know how the basic process works, let's start building our Google Assistant app. There are several different ways we can do this, but let's start in the Google Actions console. You can link your assistant to an existing Firebase or Google Cloud project, or you can just create a new one from scratch. From there, you'll select a category, and then the first thing you'll do is determine the entry point for this app. This part's pretty important because it's what the user will say to invoke your app. For example, hey, Google. Let's talk to angular firebase.com. At this point, you could continue building your app in the actions console, and there's a few templates for doing so. But in most cases, you want to switch over to Dialog at this point and start building the conversation interface. Click on actions, then add your first action, and then click build. Go ahead and create the agent, and then switch over to the intent screen. You'll have a default welcome intent, which will greet your user when they first initiate your app. You can customize the response as needed, but we're going to create a brand new intent. This one's called learn about Angular Firebase. There are 2 basic ways to handle intents. The easiest way is just to create a text response here in Dialogflow, which we'll do for this intent, Or you can invoke a Firebase Cloud function to reach out to the outside world to retrieve dynamic data. But first, we need to give the bot some training phrases So it knows how to detect the intent. For example, what is Angular Firebase? Dialogflow will use these phrases to refine the machine learning Algorithm that's used to detect similar phrases that are said by the end user. The only other thing you need at this point is to send the response back to the user, which we can do with just plain text. So when this intent is triggered, it's going to respond to the user with whatever you put in this text response, And you can add multiple responses too to give some variation to your bot. So that's the most basic use case, but we wanna do something a little more advanced. We wanna use a cloud function to go out to the Angular Firebase website and figure out what the last episode was. For that, we'll create a new intent, And then we'll add the training phrases just like we did before. But this time, instead of sending a text response, we're going to flip the switch for webhook fulfillment. This tells Dialogflow to send some data to our back end cloud function, then we can use the Dialog Flow SDK for Node JS to handle these intents and respond back to the user. This makes it possible for your bot To do things like update a database, reach out to third party APIs, send email, or anything else you might do in a Node. Js back end. You can code your webhook directly in the browser if you want to, but personally, I wouldn't recommend doing that. A better way to do it is to open up your favorite IDE, And then from the command line, run firebase init functions. Then I highly recommend using the TypeScript option. And then for everything else, you can just go through with the main default. Then CD into the functions directory and install the actions on Google SDK. This will help us format the responses that go back to Dialogflow so we can build this app with minimal code. Then for this project, I'm going to install 2 other dependencies that we'll use to build a simple web scraper, which I'll explain in more detail later. For right now, just install node fetch and Cheerio. Then we'll write all of the code in the index ts file. First, we'll import our dependencies, then we can import Dialogflow from the actions on Google SDK. It also includes a bunch of helpers for formatting rich cards that you send in the response. For example, that card that would link us back to our progressive Web app. Then the app itself is very similar conceptually to Express JS. You can think of each intent Like an HTTP endpoint that we need to handle whenever it gets triggered. We can say app intent with get latest episode, And then this will take a callback function to handle the intent. And because we're fetching data from the outside world asynchronously, we'll make this an async function. For right now, I'm setting up a placeholder variable called data, which will eventually scrape the web for the data that we want on angularfirebase.com. Eventually, it will return a title, description, and episode number for the bot to use. We can then say conversation close or conversation ask to continue the conversation with the user. If you use ask, it's going to keep the conversation open. If you use close, it will end the dialogue flow session after that response is sent. In this case, our bot has nothing else to do, so we're going to use conversation close. You could just pass in a string here, but I think it's easier to use a simple response, which allows you to control both the text and the speech that the bot will return. So the text will be nice and concise, and then the speech will contain additional information such as the full episode description. So that's great for text and speech only applications, But things like smartphones can handle more than just text and speech. In this case, we can send back a card that will deep link to our app and take the user exactly where they wanna go. This works great for both progressive web apps and native mobile apps, and it's just a great way to build engagement with your users. And that's pretty much all there is to it on the Dialogflow side. The only missing piece at this point is how do we get this actual information from the website. I'm not going to talk about this code in detail because that has nothing to do with the assistant, but all it's doing is fetching the web page and then using Cheerio To traverse the DOM, to find the information that we need, it's just a classic web scraper. First, we need to fetch the page asynchronously. Then on this particular web page, we have a feed of lessons. So we wanna pull the first lesson from the page along with its content. Then we can extract the text that is contained within the various elements inside this div. Then we'll return everything as a plain JavaScript object so we can use it in the method that we had defined earlier to handle the intent. The final step is to export our function, which we'll name fulfillment. It needs to be an HTTPS function, and it will take the Dialogflow app as its argument. Now open up another command line terminal and run Firebase deploy only functions. When that's finished, you can go to the Firebase console and verify that it's been deployed in the functions tab and grab the URL endpoint. Then switch back over to the fulfillment tab in Dialogflow and paste it as the webhook fulfillment URL. And that's pretty much all there is to it. You've now successfully built your own Google Assistant app. Go back to the actions on Google Console and test it out. You can also test it out on any device that's connected to your Gmail account. That means you can start testing it out right away on your Android or iPhone device or on your Google Home device. But to release it to the public, you'll go through a very similar process to the Google Play Store for Android apps where you have an alpha, beta, and then production release once it's ready to go live. Overall, this technology is super exciting, and there's tons of opportunities for business to engage their customers in ways that weren't possible before. The demand for conversation apps is growing rapidly, so it's something you definitely wanna be aware of and familiar with as a developer. I'm gonna go ahead and wrap up there. If this video helped you, please like and subscribe. And if you have any questions, reach out to me on Slack. And if you're ready to go beyond the basics, consider becoming a pro member at angularfirebase.com to get access to exclusive content designed to help you build and ship your app faster. Thanks for watching, and I'll see you soon.
The speakers discuss using Dialogflow and Buoyancy Cloud functions in Google's assistant app, recommending using the TypeScript option for code in the browser and the webhook. They also explain how to use the Dialogflow app for creating an intent, updating a database, reaching out to third-party APIs, and sending email. The speakers recommend using the cloud function for chat and speech only applications and a web function forRx, and provide information on obtaining information from websites and downloading a file for the web page. They also mention a pro member for more tips on creating a Google Assistant app.