Build a full-text search feature using Algolia and Cloud Firestore to return fast, sophisticated search results to your Angular app https://angularfirebase.com/lessons/algolia-firestore-quickstart-with-firebase-cloud-functions/

- Algolia https://www.algolia.com/press#resources
- Firestore https://firebase.google.com/docs/firestore/
- InstantSearch https://community.algolia.com/instantsearch.js/
2024-02-04T07:34:00.362Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ba16f34a-c274-496d-b684-29eee8637f62
498a67bb9770ad3ffeb4bd9ea5addebb3489326c79515688d6a3c28a56b5c0b6
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
One of the most powerful integrations you can make with Firestore is Algolia.
It converts your Firestore database into a full text search engine, which means that you can build instant search features that are extremely fast and sophisticated.
In this episode, I'm going to show you how to automatically index all of your data in Firestore using Cloud Functions.
And then we'll build an instant search feature on the front end using Angular 6.
If you're new here, make sure to like and subscribe, and you can grab the full source code from angularfirebase.com.
If you've been following the channel for a while, you might remember episode 27 where we created an Algolia feature with the real time database, but a lot has changed since then.
We now have Firestore, Cloud Functions 1 point o, Angular 6, and Algolia also released their own Angular Instant Search component library.
And I think this is a really important topic because I end up using Algolia in a lot of projects that I work on.
It provides a great developer experience and also a great user experience for search.
What we're building today is just a simple full text search feature, but it will set you up to index your data in Algolia so you can build more complex features on top of it.
Every time we save a document to the Firestore database.
It will trigger a cloud function that will then transmit that data over to Algolia so it can be indexed on their servers.
Once it's indexed, you can then query it using one of their client side APIs.
In this case, we're using Angular, but you could also use iOS, React, or whatever you want.
To get started, you'll need to sign up for an Algolia account, and they do have a free tier that's pretty generous.
And we'll also choose a data center.
I'm just going with 1 in the US that has the lowest latency.
You.
After you sign up, head over to the indices tab, and then we'll create our first index.
You can think of an index as just a collection that you want to search across.
In our case, it'll be a single Firestore collection, but you could even combine multiple subcollections into a single index to search across all of your subcollections throughout your Fire store database.
Now that we have our index created, we need to add some data to it with a Firebase Cloud function.
But first, I wanna show you some of the crazy things that you can do with Algolia.
For example, You can tweak the search ranking formula to control how the results are returned back to the front end.
You can tweak the typo tolerance for the user's search input.
You can customize the synonyms if you have really specific domain logic or jargon that needs to be used in your index.
And that's just barely scratching the surface.
You have a ton of control over how the search engine works, and you don't have to write a single line of code to make it work the way you want.
Enough of that for now.
Let's go ahead and get this thing built.
Head over to the API keys and grab your application ID as well as your admin API key.
Make sure to only use your admin API key in a secure back end like Firebase Cloud Functions.
Don't put it in your client side Angular app.
Now I'm running Firebase init functions, which creates a function directory in the root of the project, and we'll make sure to select the TypeScript option.
Then CD into the functions directory and run npm install Algolia search.
This is Algolia's node SDK that we can use to update items in the index.
But before we can use it, we need to set our API keys in the Cloud Functions environment.
Run Firebase functions config set, then algolia.apidandalgolia.apikey.
Replace the quotes with your actual Algolia credentials and then run the command.
Now let's write the cloud function for adding and removing items from the index.
You'll be surprised at how easy this is.
Let's go ahead and define a variable called env that holds our functions environment variables.
Then we'll import the Algolia search SDK.
Then we'll initialize it with our app ID and our admin API key.
Then we'll set another variable for our index.
Note that you can use multiple indices in a single cloud function.
The first functional setup will run whenever a new document is created in Firestore.
And when that happens, we want to upload it to the Algolia index.
So we're listening to the create event on the zoo collection.
And then when that happens, we want to retrieve the data from the newly created document, which we can do by calling snap dot data.
And every index item in Algolia also has an object ID.
We can set this equal to the Firestore document ID just to keep things consistent.
Then literally all we have to do is return a promise from this function that adds the item to the index, which we can do by calling index add object with our data and object ID, and that's it.
We're entirely done with this cloud function.
But we might also want to remove items from the index if a document is deleted.
We can do that just as easily by listening to the same collection but the on delete event.
And then will grab the object ID and remove it from the index when that document is deleted.
And that's our entire back end for Algolia.
Everything happens in the background, and it really shouldn't get too much more complicated than this because we can control everything from the Algolia dashboard.
Let's go ahead and deploy this function by running Firebase deploy only functions, and then we'll test it out.
On my front end here in Angular, I have a button that will add some random animal data to our zoo collection in Firestore.
When that happens, it should trigger that cloud function and index our data in Algolia.
So you can see here it added a couple new animals to the collection.
Then if we switch over to the functions log, we should see that our functions were deployed successfully and that they're being invoked when these documents are created.
Everything is looking good there.
Let's jump over to the Algolia dashboard and see if our data is there as well.
When we refresh the page, you can see that our empty index is now populated with the items from our Firestore database.
This means that we can search for text inside of these documents, and it will be robust to typos and work across multiple properties.
Now building out the front end is going to be just as easy because Algolia provides a component library for Angular.
With just a few components, we'll be able to get search functionality that looks like this.
It will automatically populate the results when the user types into the form.
You'll notice here that it not only searches for the name of the animal, but it will also search for text contained within other properties on that document, and it will also highlight the matching text in the search result.
We'll need to add our API keys to Angular, but this time, make sure to only use the search only API key.
Then inside your Angular project, go into the environment ts file and add an object named Algolia with your app ID and API key.
You can also see we have a Firebase object here.
That's because we have AngularFire 2 installed.
You'll want to follow the install instructions on the official repo.
From here, we can install Instant Search into our Angular project.
The next thing we'll do is import the ng a I s module in our app module.
And currently, there's one other little thing we have to do, and that's go into the polyfills ts file and add this little piece of code to prevent instant search from throwing an error.
I also wanna show you how I generate the dummy data for the index, and I'm using a library called chance.
Js to make that a little easier.
It's not something you'd use in production, but it is pretty fun to mess around with.
Because Algolia gives us access to a whole bunch of components to use for instant search, we can just build out everything directly in the app component.
Let's go ahead and import Angular Firestore, the environment variables we set earlier, and chance j s.
Then we need to define the configuration variables for our actual Algolia instance.
It will need the API keys from our Algolia environment as well as the index name.
Then it's going to show all the results by default.
So I want to disable that behavior, so I'm setting up another variable here called show results.
Then I'm setting up an event handler function that will listen to the changes in the input form.
And if the actual query has length, then we'll show the results.
Otherwise, we'll just keep it blank.
And for those who are curious, this is how we generate the dummy data.
We'll set up a method here that creates a new instance of chance, and then Chance has a whole bunch of different helper methods on it that generate random data.
So we can just set up a handful of properties as our animal data, and then we'll go ahead and set that data in the Firestore database, which eventually is going to trigger that cloud function and then index the same data in Algolia.
If we switch over to the HTML, the first thing we'll do is add a button that will add a new animal to the database when clicked.
And then the most important thing is that we have this ngais component that is the context for the Algolia search instance.
It will take our configuration options as an input argument, and then we can set up a search box that will listen to that search changed event handler so we know when to show the results.
Algolia returns an array of hits, and we can loop over each hit and provide it with its own custom template.
So this is how you customize the actual search results, which is probably the most important part for the user experience.
Inside of the actual hit, there's a component called ngaishighlight that will highlight the text if it's included in the user's query.
You just need to pass it the attribute name as well as the hit itself as input properties.
So that gives us a very basic search, but there's a whole bunch of other widgets built to the library to do things like pagination and filtering and things like that.
Overall, Algolia provides a great developer experience, and they don't pay me to say that.
I'm just to happy customer.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And if you wanna learn more advanced techniques, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book and a whole bunch of resources designed to help you build and ship your app faster.
Thanks for watching, and I'll talk to you soon.

Speaker 0: One of the most powerful integrations you can make with Firestore is Algolia. It converts your Firestore database into a full text search engine, which means that you can build instant search features that are extremely fast and sophisticated. In this episode, I'm going to show you how to automatically index all of your data in Firestore using Cloud Functions. And then we'll build an instant search feature on the front end using Angular 6. If you're new here, make sure to like and subscribe, and you can grab the full source code from angularfirebase.com.

If you've been following the channel for a while, you might remember episode 27 where we created an Algolia feature with the real time database, but a lot has changed since then. We now have Firestore, Cloud Functions 1 point o, Angular 6, and Algolia also released their own Angular Instant Search component library. And I think this is a really important topic because I end up using Algolia in a lot of projects that I work on. It provides a great developer experience and also a great user experience for search. What we're building today is just a simple full text search feature, but it will set you up to index your data in Algolia so you can build more complex features on top of it.

Every time we save a document to the Firestore database. It will trigger a cloud function that will then transmit that data over to Algolia so it can be indexed on their servers. Once it's indexed, you can then query it using one of their client side APIs. In this case, we're using Angular, but you could also use iOS, React, or whatever you want. To get started, you'll need to sign up for an Algolia account, and they do have a free tier that's pretty generous.

And we'll also choose a data center. I'm just going with 1 in the US that has the lowest latency. You. After you sign up, head over to the indices tab, and then we'll create our first index. You can think of an index as just a collection that you want to search across.

In our case, it'll be a single Firestore collection, but you could even combine multiple subcollections into a single index to search across all of your subcollections throughout your Fire store database. Now that we have our index created, we need to add some data to it with a Firebase Cloud function. But first, I wanna show you some of the crazy things that you can do with Algolia. For example, You can tweak the search ranking formula to control how the results are returned back to the front end. You can tweak the typo tolerance for the user's search input.

You can customize the synonyms if you have really specific domain logic or jargon that needs to be used in your index. And that's just barely scratching the surface. You have a ton of control over how the search engine works, and you don't have to write a single line of code to make it work the way you want. Enough of that for now. Let's go ahead and get this thing built.

Head over to the API keys and grab your application ID as well as your admin API key. Make sure to only use your admin API key in a secure back end like Firebase Cloud Functions. Don't put it in your client side Angular app. Now I'm running Firebase init functions, which creates a function directory in the root of the project, and we'll make sure to select the TypeScript option. Then CD into the functions directory and run npm install Algolia search.

This is Algolia's node SDK that we can use to update items in the index. But before we can use it, we need to set our API keys in the Cloud Functions environment. Run Firebase functions config set, then algolia.apidandalgolia.apikey. Replace the quotes with your actual Algolia credentials and then run the command. Now let's write the cloud function for adding and removing items from the index.

You'll be surprised at how easy this is. Let's go ahead and define a variable called env that holds our functions environment variables. Then we'll import the Algolia search SDK. Then we'll initialize it with our app ID and our admin API key. Then we'll set another variable for our index.

Note that you can use multiple indices in a single cloud function. The first functional setup will run whenever a new document is created in Firestore. And when that happens, we want to upload it to the Algolia index. So we're listening to the create event on the zoo collection. And then when that happens, we want to retrieve the data from the newly created document, which we can do by calling snap dot data.

And every index item in Algolia also has an object ID. We can set this equal to the Firestore document ID just to keep things consistent. Then literally all we have to do is return a promise from this function that adds the item to the index, which we can do by calling index add object with our data and object ID, and that's it. We're entirely done with this cloud function. But we might also want to remove items from the index if a document is deleted.

We can do that just as easily by listening to the same collection but the on delete event. And then will grab the object ID and remove it from the index when that document is deleted. And that's our entire back end for Algolia. Everything happens in the background, and it really shouldn't get too much more complicated than this because we can control everything from the Algolia dashboard. Let's go ahead and deploy this function by running Firebase deploy only functions, and then we'll test it out.

On my front end here in Angular, I have a button that will add some random animal data to our zoo collection in Firestore. When that happens, it should trigger that cloud function and index our data in Algolia. So you can see here it added a couple new animals to the collection. Then if we switch over to the functions log, we should see that our functions were deployed successfully and that they're being invoked when these documents are created. Everything is looking good there.

Let's jump over to the Algolia dashboard and see if our data is there as well. When we refresh the page, you can see that our empty index is now populated with the items from our Firestore database. This means that we can search for text inside of these documents, and it will be robust to typos and work across multiple properties. Now building out the front end is going to be just as easy because Algolia provides a component library for Angular. With just a few components, we'll be able to get search functionality that looks like this.

It will automatically populate the results when the user types into the form. You'll notice here that it not only searches for the name of the animal, but it will also search for text contained within other properties on that document, and it will also highlight the matching text in the search result. We'll need to add our API keys to Angular, but this time, make sure to only use the search only API key. Then inside your Angular project, go into the environment ts file and add an object named Algolia with your app ID and API key. You can also see we have a Firebase object here.

That's because we have AngularFire 2 installed. You'll want to follow the install instructions on the official repo. From here, we can install Instant Search into our Angular project. The next thing we'll do is import the ng a I s module in our app module. And currently, there's one other little thing we have to do, and that's go into the polyfills ts file and add this little piece of code to prevent instant search from throwing an error.

I also wanna show you how I generate the dummy data for the index, and I'm using a library called chance. Js to make that a little easier. It's not something you'd use in production, but it is pretty fun to mess around with. Because Algolia gives us access to a whole bunch of components to use for instant search, we can just build out everything directly in the app component. Let's go ahead and import Angular Firestore, the environment variables we set earlier, and chance j s.

Then we need to define the configuration variables for our actual Algolia instance. It will need the API keys from our Algolia environment as well as the index name. Then it's going to show all the results by default. So I want to disable that behavior, so I'm setting up another variable here called show results. Then I'm setting up an event handler function that will listen to the changes in the input form.

And if the actual query has length, then we'll show the results. Otherwise, we'll just keep it blank. And for those who are curious, this is how we generate the dummy data. We'll set up a method here that creates a new instance of chance, and then Chance has a whole bunch of different helper methods on it that generate random data. So we can just set up a handful of properties as our animal data, and then we'll go ahead and set that data in the Firestore database, which eventually is going to trigger that cloud function and then index the same data in Algolia.

If we switch over to the HTML, the first thing we'll do is add a button that will add a new animal to the database when clicked. And then the most important thing is that we have this ngais component that is the context for the Algolia search instance. It will take our configuration options as an input argument, and then we can set up a search box that will listen to that search changed event handler so we know when to show the results. Algolia returns an array of hits, and we can loop over each hit and provide it with its own custom template. So this is how you customize the actual search results, which is probably the most important part for the user experience.

Inside of the actual hit, there's a component called ngaishighlight that will highlight the text if it's included in the user's query. You just need to pass it the attribute name as well as the hit itself as input properties. So that gives us a very basic search, but there's a whole bunch of other widgets built to the library to do things like pagination and filtering and things like that. Overall, Algolia provides a great developer experience, and they don't pay me to say that. I'm just to happy customer.

I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn more advanced techniques, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book and a whole bunch of resources designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
One of the most powerful integrations you can make with Firestore is Algolia. It converts your Firestore database into a full text search engine, which means that you can build instant search features that are extremely fast and sophisticated. In this episode, I'm going to show you how to automatically index all of your data in Firestore using Cloud Functions. And then we'll build an instant search feature on the front end using Angular 6. If you're new here, make sure to like and subscribe, and you can grab the full source code from angularfirebase.com.
commerce
amazon
websites
databases
google
If you've been following the channel for a while, you might remember episode 27 where we created an Algolia feature with the real time database, but a lot has changed since then. We now have Firestore, Cloud Functions 1 point o, Angular 6, and Algolia also released their own Angular Instant Search component library. And I think this is a really important topic because I end up using Algolia in a lot of projects that I work on. It provides a great developer experience and also a great user experience for search. What we're building today is just a simple full text search feature, but it will set you up to index your data in Algolia so you can build more complex features on top of it.
Every time we save a document to the Firestore database. It will trigger a cloud function that will then transmit that data over to Algolia so it can be indexed on their servers. Once it's indexed, you can then query it using one of their client side APIs. In this case, we're using Angular, but you could also use iOS, React, or whatever you want.
databases
To get started, you'll need to sign up for an Algolia account, and they do have a free tier that's pretty generous. And we'll also choose a data center. I'm just going with 1 in the US that has the lowest latency. You. After you sign up, head over to the indices tab, and then we'll create our first index. You can think of an index as just a collection that you want to search across. In our case, it'll be a single Firestore collection, but you could even combine multiple subcollections into a single index to search across all of your subcollections throughout your Fire store database. Now that we have our index created, we need to add some data to it with a Firebase Cloud function. But first, I wanna show you some of the crazy things that you can do with Algolia. For example, You can tweak the search ranking formula to control how the results are returned back to the front end. You can tweak the typo tolerance for the user's search input. You can customize the synonyms if you have really specific domain logic or jargon that needs to be used in your index. And that's just barely scratching the surface. You have a ton of control over how the search engine works, and you don't have to write a single line of code to make it work the way you want. Enough of that for now. Let's go ahead and get this thing built. Head over to the API keys and grab your application ID as well as your admin API key.
google
databases
data management
commerce
Make sure to only use your admin API key in a secure back end like Firebase Cloud Functions. Don't put it in your client side Angular app. Now I'm running Firebase init functions, which creates a function directory in the root of the project, and we'll make sure to select the TypeScript option. Then CD into the functions directory and run npm install Algolia search. This is Algolia's node SDK that we can use to update items in the index. But before we can use it, we need to set our API keys in the Cloud Functions environment. Run Firebase functions config set, then algolia.apidandalgolia.apikey. Replace the quotes with your actual Algolia credentials and then run the command. Now let's write the cloud function for adding and removing items from the index. You'll be surprised at how easy this is. Let's go ahead and define a variable called env that holds our functions environment variables. Then we'll import the Algolia search SDK. Then we'll initialize it with our app ID and our admin API key. Then we'll set another variable for our index. Note that you can use multiple indices in a single cloud function. The first functional setup will run whenever a new document is created in Firestore. And when that happens, we want to upload it to the Algolia index.
So we're listening to the create event on the zoo collection. And then when that happens, we want to retrieve the data from the newly created document, which we can do by calling snap dot data. And every index item in Algolia also has an object ID. We can set this equal to the Firestore document ID just to keep things consistent.
databases
Then literally all we have to do is return a promise from this function that adds the item to the index, which we can do by calling index add object with our data and object ID, and that's it. We're entirely done with this cloud function. But we might also want to remove items from the index if a document is deleted. We can do that just as easily by listening to the same collection but the on delete event. And then will grab the object ID and remove it from the index when that document is deleted. And that's our entire back end for Algolia. Everything happens in the background, and it really shouldn't get too much more complicated than this because we can control everything from the Algolia dashboard. Let's go ahead and deploy this function by running Firebase deploy only functions, and then we'll test it out. On my front end here in Angular, I have a button that will add some random animal data to our zoo collection in Firestore. When that happens, it should trigger that cloud function and index our data in Algolia. So you can see here it added a couple new animals to the collection.
Then if we switch over to the functions log, we should see that our functions were deployed successfully and that they're being invoked when these documents are created. Everything is looking good there. Let's jump over to the Algolia dashboard and see if our data is there as well. When we refresh the page, you can see that our empty index is now populated with the items from our Firestore database. This means that we can search for text inside of these documents, and it will be robust to typos and work across multiple properties.
databases
Now building out the front end is going to be just as easy because Algolia provides a component library for Angular.
With just a few components, we'll be able to get search functionality that looks like this. It will automatically populate the results when the user types into the form. You'll notice here that it not only searches for the name of the animal, but it will also search for text contained within other properties on that document, and it will also highlight the matching text in the search result.
google
We'll need to add our API keys to Angular, but this time, make sure to only use the search only API key. Then inside your Angular project, go into the environment ts file and add an object named Algolia with your app ID and API key. You can also see we have a Firebase object here. That's because we have AngularFire 2 installed. You'll want to follow the install instructions on the official repo. From here, we can install Instant Search into our Angular project. The next thing we'll do is import the ng a I s module in our app module.
And currently, there's one other little thing we have to do, and that's go into the polyfills ts file and add this little piece of code to prevent instant search from throwing an error. I also wanna show you how I generate the dummy data for the index, and I'm using a library called chance. Js to make that a little easier. It's not something you'd use in production, but it is pretty fun to mess around with. Because Algolia gives us access to a whole bunch of components to use for instant search, we can just build out everything directly in the app component. Let's go ahead and import Angular Firestore, the environment variables we set earlier, and chance j s.
software
databases
machine learning
Then we need to define the configuration variables for our actual Algolia instance. It will need the API keys from our Algolia environment as well as the index name. Then it's going to show all the results by default. So I want to disable that behavior, so I'm setting up another variable here called show results. Then I'm setting up an event handler function that will listen to the changes in the input form.
And if the actual query has length, then we'll show the results. Otherwise, we'll just keep it blank. And for those who are curious, this is how we generate the dummy data. We'll set up a method here that creates a new instance of chance, and then Chance has a whole bunch of different helper methods on it that generate random data. So we can just set up a handful of properties as our animal data, and then we'll go ahead and set that data in the Firestore database, which eventually is going to trigger that cloud function and then index the same data in Algolia. If we switch over to the HTML, the first thing we'll do is add a button that will add a new animal to the database when clicked. And then the most important thing is that we have this ngais component that is the context for the Algolia search instance. It will take our configuration options as an input argument, and then we can set up a search box that will listen to that search changed event handler so we know when to show the results.
data
databases
probability
Algolia returns an array of hits, and we can loop over each hit and provide it with its own custom template. So this is how you customize the actual search results, which is probably the most important part for the user experience. Inside of the actual hit, there's a component called ngaishighlight that will highlight the text if it's included in the user's query. You just need to pass it the attribute name as well as the hit itself as input properties.
So that gives us a very basic search, but there's a whole bunch of other widgets built to the library to do things like pagination and filtering and things like that. Overall, Algolia provides a great developer experience, and they don't pay me to say that. I'm just to happy customer. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn more advanced techniques, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book and a whole bunch of resources designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
youtube
software
One of the most powerful integrations you can make with Firestore is Algolia. It converts your Firestore database into a full text search engine, which means that you can build instant search features that are extremely fast and sophisticated. In this episode, I'm going to show you how to automatically index all of your data in Firestore using Cloud Functions. And then we'll build an instant search feature on the front end using Angular 6. If you're new here, make sure to like and subscribe, and you can grab the full source code from angularfirebase.com. If you've been following the channel for a while, you might remember episode 27 where we created an Algolia feature with the real time database, but a lot has changed since then. We now have Firestore, Cloud Functions 1 point o, Angular 6, and Algolia also released their own Angular Instant Search component library. And I think this is a really important topic because I end up using Algolia in a lot of projects that I work on. It provides a great developer experience and also a great user experience for search. What we're building today is just a simple full text search feature, but it will set you up to index your data in Algolia so you can build more complex features on top of it. Every time we save a document to the Firestore database. It will trigger a cloud function that will then transmit that data over to Algolia so it can be indexed on their servers. Once it's indexed, you can then query it using one of their client side APIs. In this case, we're using Angular, but you could also use iOS, React, or whatever you want. To get started, you'll need to sign up for an Algolia account, and they do have a free tier that's pretty generous. And we'll also choose a data center. I'm just going with 1 in the US that has the lowest latency. You. After you sign up, head over to the indices tab, and then we'll create our first index. You can think of an index as just a collection that you want to search across. In our case, it'll be a single Firestore collection, but you could even combine multiple subcollections into a single index to search across all of your subcollections throughout your Fire store database. Now that we have our index created, we need to add some data to it with a Firebase Cloud function. But first, I wanna show you some of the crazy things that you can do with Algolia. For example, You can tweak the search ranking formula to control how the results are returned back to the front end. You can tweak the typo tolerance for the user's search input. You can customize the synonyms if you have really specific domain logic or jargon that needs to be used in your index. And that's just barely scratching the surface. You have a ton of control over how the search engine works, and you don't have to write a single line of code to make it work the way you want. Enough of that for now. Let's go ahead and get this thing built. Head over to the API keys and grab your application ID as well as your admin API key. Make sure to only use your admin API key in a secure back end like Firebase Cloud Functions. Don't put it in your client side Angular app. Now I'm running Firebase init functions, which creates a function directory in the root of the project, and we'll make sure to select the TypeScript option. Then CD into the functions directory and run npm install Algolia search. This is Algolia's node SDK that we can use to update items in the index. But before we can use it, we need to set our API keys in the Cloud Functions environment. Run Firebase functions config set, then algolia.apidandalgolia.apikey. Replace the quotes with your actual Algolia credentials and then run the command. Now let's write the cloud function for adding and removing items from the index. You'll be surprised at how easy this is. Let's go ahead and define a variable called env that holds our functions environment variables. Then we'll import the Algolia search SDK. Then we'll initialize it with our app ID and our admin API key. Then we'll set another variable for our index. Note that you can use multiple indices in a single cloud function. The first functional setup will run whenever a new document is created in Firestore. And when that happens, we want to upload it to the Algolia index. So we're listening to the create event on the zoo collection. And then when that happens, we want to retrieve the data from the newly created document, which we can do by calling snap dot data. And every index item in Algolia also has an object ID. We can set this equal to the Firestore document ID just to keep things consistent. Then literally all we have to do is return a promise from this function that adds the item to the index, which we can do by calling index add object with our data and object ID, and that's it. We're entirely done with this cloud function. But we might also want to remove items from the index if a document is deleted. We can do that just as easily by listening to the same collection but the on delete event. And then will grab the object ID and remove it from the index when that document is deleted. And that's our entire back end for Algolia. Everything happens in the background, and it really shouldn't get too much more complicated than this because we can control everything from the Algolia dashboard. Let's go ahead and deploy this function by running Firebase deploy only functions, and then we'll test it out. On my front end here in Angular, I have a button that will add some random animal data to our zoo collection in Firestore. When that happens, it should trigger that cloud function and index our data in Algolia. So you can see here it added a couple new animals to the collection. Then if we switch over to the functions log, we should see that our functions were deployed successfully and that they're being invoked when these documents are created. Everything is looking good there. Let's jump over to the Algolia dashboard and see if our data is there as well. When we refresh the page, you can see that our empty index is now populated with the items from our Firestore database. This means that we can search for text inside of these documents, and it will be robust to typos and work across multiple properties. Now building out the front end is going to be just as easy because Algolia provides a component library for Angular. With just a few components, we'll be able to get search functionality that looks like this. It will automatically populate the results when the user types into the form. You'll notice here that it not only searches for the name of the animal, but it will also search for text contained within other properties on that document, and it will also highlight the matching text in the search result. We'll need to add our API keys to Angular, but this time, make sure to only use the search only API key. Then inside your Angular project, go into the environment ts file and add an object named Algolia with your app ID and API key. You can also see we have a Firebase object here. That's because we have AngularFire 2 installed. You'll want to follow the install instructions on the official repo. From here, we can install Instant Search into our Angular project. The next thing we'll do is import the ng a I s module in our app module. And currently, there's one other little thing we have to do, and that's go into the polyfills ts file and add this little piece of code to prevent instant search from throwing an error. I also wanna show you how I generate the dummy data for the index, and I'm using a library called chance. Js to make that a little easier. It's not something you'd use in production, but it is pretty fun to mess around with. Because Algolia gives us access to a whole bunch of components to use for instant search, we can just build out everything directly in the app component. Let's go ahead and import Angular Firestore, the environment variables we set earlier, and chance j s. Then we need to define the configuration variables for our actual Algolia instance. It will need the API keys from our Algolia environment as well as the index name. Then it's going to show all the results by default. So I want to disable that behavior, so I'm setting up another variable here called show results. Then I'm setting up an event handler function that will listen to the changes in the input form. And if the actual query has length, then we'll show the results. Otherwise, we'll just keep it blank. And for those who are curious, this is how we generate the dummy data. We'll set up a method here that creates a new instance of chance, and then Chance has a whole bunch of different helper methods on it that generate random data. So we can just set up a handful of properties as our animal data, and then we'll go ahead and set that data in the Firestore database, which eventually is going to trigger that cloud function and then index the same data in Algolia. If we switch over to the HTML, the first thing we'll do is add a button that will add a new animal to the database when clicked. And then the most important thing is that we have this ngais component that is the context for the Algolia search instance. It will take our configuration options as an input argument, and then we can set up a search box that will listen to that search changed event handler so we know when to show the results. Algolia returns an array of hits, and we can loop over each hit and provide it with its own custom template. So this is how you customize the actual search results, which is probably the most important part for the user experience. Inside of the actual hit, there's a component called ngaishighlight that will highlight the text if it's included in the user's query. You just need to pass it the attribute name as well as the hit itself as input properties. So that gives us a very basic search, but there's a whole bunch of other widgets built to the library to do things like pagination and filtering and things like that. Overall, Algolia provides a great developer experience, and they don't pay me to say that. I'm just to happy customer. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn more advanced techniques, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book and a whole bunch of resources designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
One
one
of
of
the
the
most
most
powerful
powerful
integrations
integrations
you
you
can
can
make
make
with
with
Firestore
firestore
is
is
Algolia.
algolia
It
it
converts
converts
your
your
Firestore
firestore
database
database
into
into
a
a
full
full
text
text
search
search
engine,
engine
which
which
means
means
that
that
you
you
can
can
build
build
instant
instant
search
search
features
features
that
that
are
are
extremely
extremely
fast
fast
and
and
sophisticated.
sophisticated
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
automatically
automatically
index
index
all
all
of
of
your
your
data
data
in
in
Firestore
firestore
using
using
Cloud
cloud
Functions.
functions
And
and
then
then
we'll
we'll
build
build
an
an
instant
instant
search
search
feature
feature
on
on
the
the
front
front
end
end
using
using
Angular
angular
6.
6
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
full
full
source
source
code
code
from
from
angularfirebase.com.
angularfirebase.com
If
if
you've
you've
been
been
following
following
the
the
channel
channel
for
for
a
a
while,
while
you
you
might
might
remember
remember
episode
episode
27
27
where
where
we
we
created
created
an
an
Algolia
algolia
feature
feature
with
with
the
the
real
real
time
time
database,
database
but
but
a
a
lot
lot
has
has
changed
changed
since
since
then.
then
We
we
now
now
have
have
Firestore,
firestore
Cloud
cloud
Functions
functions
1
1
point
point
o,
o
Angular
angular
6,
6
and
and
Algolia
algolia
also
also
released
released
their
their
own
own
Angular
angular
Instant
instant
Search
search
component
component
library.
library
And
and
I
i
think
think
this
this
is
is
a
a
really
really
important
important
topic
topic
because
because
I
i
end
end
up
up
using
using
Algolia
algolia
in
in
a
a
lot
lot
of
of
projects
projects
that
that
I
i
work
work
on.
on
It
it
provides
provides
a
a
great
great
developer
developer
experience
experience
and
and
also
also
a
a
great
great
user
user
experience
experience
for
for
search.
search
What
what
we're
we're
building
building
today
today
is
is
just
just
a
a
simple
simple
full
full
text
text
search
search
feature,
feature
but
but
it
it
will
will
set
set
you
you
up
up
to
to
index
index
your
your
data
data
in
in
Algolia
algolia
so
so
you
you
can
can
build
build
more
more
complex
complex
features
features
on
on
top
top
of
of
it.
it
Every
every
time
time
we
we
save
save
a
a
document
document
to
to
the
the
Firestore
firestore
database.
database
It
it
will
will
trigger
trigger
a
a
cloud
cloud
function
function
that
that
will
will
then
then
transmit
transmit
that
that
data
data
over
over
to
to
Algolia
algolia
so
so
it
it
can
can
be
be
indexed
indexed
on
on
their
their
servers.
servers
Once
once
it's
it's
indexed,
indexed
you
you
can
can
then
then
query
query
it
it
using
using
one
one
of
of
their
their
client
client
side
side
APIs.
apis
In
in
this
this
case,
case
we're
we're
using
using
Angular,
angular
but
but
you
you
could
could
also
also
use
use
iOS,
ios
React,
react
or
or
whatever
whatever
you
you
want.
want
To
to
get
get
started,
started
you'll
you'll
need
need
to
to
sign
sign
up
up
for
for
an
an
Algolia
algolia
account,
account
and
and
they
they
do
do
have
have
a
a
free
free
tier
tier
that's
that's
pretty
pretty
generous.
generous
And
and
we'll
we'll
also
also
choose
choose
a
a
data
data
center.
center
I'm
i'm
just
just
going
going
with
with
1
1
in
in
the
the
US
us
that
that
has
has
the
the
lowest
lowest
latency.
latency
You.
you
After
after
you
you
sign
sign
up,
up
head
head
over
over
to
to
the
the
indices
indices
tab,
tab
and
and
then
then
we'll
we'll
create
create
our
our
first
first
index.
index
You
you
can
can
think
think
of
of
an
an
index
index
as
as
just
just
a
a
collection
collection
that
that
you
you
want
want
to
to
search
search
across.
across
In
in
our
our
case,
case
it'll
it'll
be
be
a
a
single
single
Firestore
firestore
collection,
collection
but
but
you
you
could
could
even
even
combine
combine
multiple
multiple
subcollections
subcollections
into
into
a
a
single
single
index
index
to
to
search
search
across
across
all
all
of
of
your
your
subcollections
subcollections
throughout
throughout
your
your
Fire
fire
store
store
database.
database
Now
now
that
that
we
we
have
have
our
our
index
index
created,
created
we
we
need
need
to
to
add
add
some
some
data
data
to
to
it
it
with
with
a
a
Firebase
firebase
Cloud
cloud
function.
function
But
but
first,
first
I
i
wanna
wanna
show
show
you
you
some
some
of
of
the
the
crazy
crazy
things
things
that
that
you
you
can
can
do
do
with
with
Algolia.
algolia
For
for
example,
example
You
you
can
can
tweak
tweak
the
the
search
search
ranking
ranking
formula
formula
to
to
control
control
how
how
the
the
results
results
are
are
returned
returned
back
back
to
to
the
the
front
front
end.
end
You
you
can
can
tweak
tweak
the
the
typo
typo
tolerance
tolerance
for
for
the
the
user's
user's
search
search
input.
input
You
you
can
can
customize
customize
the
the
synonyms
synonyms
if
if
you
you
have
have
really
really
specific
specific
domain
domain
logic
logic
or
or
jargon
jargon
that
that
needs
needs
to
to
be
be
used
used
in
in
your
your
index.
index
And
and
that's
that's
just
just
barely
barely
scratching
scratching
the
the
surface.
surface
You
you
have
have
a
a
ton
ton
of
of
control
control
over
over
how
how
the
the
search
search
engine
engine
works,
works
and
and
you
you
don't
don't
have
have
to
to
write
write
a
a
single
single
line
line
of
of
code
code
to
to
make
make
it
it
work
work
the
the
way
way
you
you
want.
want
Enough
enough
of
of
that
that
for
for
now.
now
Let's
let's
go
go
ahead
ahead
and
and
get
get
this
this
thing
thing
built.
built
Head
head
over
over
to
to
the
the
API
api
keys
keys
and
and
grab
grab
your
your
application
application
ID
id
as
as
well
well
as
as
your
your
admin
admin
API
api
key.
key
Make
make
sure
sure
to
to
only
only
use
use
your
your
admin
admin
API
api
key
key
in
in
a
a
secure
secure
back
back
end
end
like
like
Firebase
firebase
Cloud
cloud
Functions.
functions
Don't
don't
put
put
it
it
in
in
your
your
client
client
side
side
Angular
angular
app.
app
Now
now
I'm
i'm
running
running
Firebase
firebase
init
init
functions,
functions
which
which
creates
creates
a
a
function
function
directory
directory
in
in
the
the
root
root
of
of
the
the
project,
project
and
and
we'll
we'll
make
make
sure
sure
to
to
select
select
the
the
TypeScript
typescript
option.
option
Then
then
CD
cd
into
into
the
the
functions
functions
directory
directory
and
and
run
run
npm
npm
install
install
Algolia
algolia
search.
search
This
this
is
is
Algolia's
algolia's
node
node
SDK
sdk
that
that
we
we
can
can
use
use
to
to
update
update
items
items
in
in
the
the
index.
index
But
but
before
before
we
we
can
can
use
use
it,
it
we
we
need
need
to
to
set
set
our
our
API
api
keys
keys
in
in
the
the
Cloud
cloud
Functions
functions
environment.
environment
Run
run
Firebase
firebase
functions
functions
config
config
set,
set
then
then
algolia.apidandalgolia.apikey.
algolia.apidandalgolia.apikey
Replace
replace
the
the
quotes
quotes
with
with
your
your
actual
actual
Algolia
algolia
credentials
credentials
and
and
then
then
run
run
the
the
command.
command
Now
now
let's
let's
write
write
the
the
cloud
cloud
function
function
for
for
adding
adding
and
and
removing
removing
items
items
from
from
the
the
index.
index
You'll
you'll
be
be
surprised
surprised
at
at
how
how
easy
easy
this
this
is.
is
Let's
let's
go
go
ahead
ahead
and
and
define
define
a
a
variable
variable
called
called
env
env
that
that
holds
holds
our
our
functions
functions
environment
environment
variables.
variables
Then
then
we'll
we'll
import
import
the
the
Algolia
algolia
search
search
SDK.
sdk
Then
then
we'll
we'll
initialize
initialize
it
it
with
with
our
our
app
app
ID
id
and
and
our
our
admin
admin
API
api
key.
key
Then
then
we'll
we'll
set
set
another
another
variable
variable
for
for
our
our
index.
index
Note
note
that
that
you
you
can
can
use
use
multiple
multiple
indices
indices
in
in
a
a
single
single
cloud
cloud
function.
function
The
the
first
first
functional
functional
setup
setup
will
will
run
run
whenever
whenever
a
a
new
new
document
document
is
is
created
created
in
in
Firestore.
firestore
And
and
when
when
that
that
happens,
happens
we
we
want
want
to
to
upload
upload
it
it
to
to
the
the
Algolia
algolia
index.
index
So
so
we're
we're
listening
listening
to
to
the
the
create
create
event
event
on
on
the
the
zoo
zoo
collection.
collection
And
and
then
then
when
when
that
that
happens,
happens
we
we
want
want
to
to
retrieve
retrieve
the
the
data
data
from
from
the
the
newly
newly
created
created
document,
document
which
which
we
we
can
can
do
do
by
by
calling
calling
snap
snap
dot
dot
data.
data
And
and
every
every
index
index
item
item
in
in
Algolia
algolia
also
also
has
has
an
an
object
object
ID.
id
We
we
can
can
set
set
this
this
equal
equal
to
to
the
the
Firestore
firestore
document
document
ID
id
just
just
to
to
keep
keep
things
things
consistent.
consistent
Then
then
literally
literally
all
all
we
we
have
have
to
to
do
do
is
is
return
return
a
a
promise
promise
from
from
this
this
function
function
that
that
adds
adds
the
the
item
item
to
to
the
the
index,
index
which
which
we
we
can
can
do
do
by
by
calling
calling
index
index
add
add
object
object
with
with
our
our
data
data
and
and
object
object
ID,
id
and
and
that's
that's
it.
it
We're
we're
entirely
entirely
done
done
with
with
this
this
cloud
cloud
function.
function
But
but
we
we
might
might
also
also
want
want
to
to
remove
remove
items
items
from
from
the
the
index
index
if
if
a
a
document
document
is
is
deleted.
deleted
We
we
can
can
do
do
that
that
just
just
as
as
easily
easily
by
by
listening
listening
to
to
the
the
same
same
collection
collection
but
but
the
the
on
on
delete
delete
event.
event
And
and
then
then
will
will
grab
grab
the
the
object
object
ID
id
and
and
remove
remove
it
it
from
from
the
the
index
index
when
when
that
that
document
document
is
is
deleted.
deleted
And
and
that's
that's
our
our
entire
entire
back
back
end
end
for
for
Algolia.
algolia
Everything
everything
happens
happens
in
in
the
the
background,
background
and
and
it
it
really
really
shouldn't
shouldn't
get
get
too
too
much
much
more
more
complicated
complicated
than
than
this
this
because
because
we
we
can
can
control
control
everything
everything
from
from
the
the
Algolia
algolia
dashboard.
dashboard
Let's
let's
go
go
ahead
ahead
and
and
deploy
deploy
this
this
function
function
by
by
running
running
Firebase
firebase
deploy
deploy
only
only
functions,
functions
and
and
then
then
we'll
we'll
test
test
it
it
out.
out
On
on
my
my
front
front
end
end
here
here
in
in
Angular,
angular
I
i
have
have
a
a
button
button
that
that
will
will
add
add
some
some
random
random
animal
animal
data
data
to
to
our
our
zoo
zoo
collection
collection
in
in
Firestore.
firestore
When
when
that
that
happens,
happens
it
it
should
should
trigger
trigger
that
that
cloud
cloud
function
function
and
and
index
index
our
our
data
data
in
in
Algolia.
algolia
So
so
you
you
can
can
see
see
here
here
it
it
added
added
a
a
couple
couple
new
new
animals
animals
to
to
the
the
collection.
collection
Then
then
if
if
we
we
switch
switch
over
over
to
to
the
the
functions
functions
log,
log
we
we
should
should
see
see
that
that
our
our
functions
functions
were
were
deployed
deployed
successfully
successfully
and
and
that
that
they're
they're
being
being
invoked
invoked
when
when
these
these
documents
documents
are
are
created.
created
Everything
everything
is
is
looking
looking
good
good
there.
there
Let's
let's
jump
jump
over
over
to
to
the
the
Algolia
algolia
dashboard
dashboard
and
and
see
see
if
if
our
our
data
data
is
is
there
there
as
as
well.
well
When
when
we
we
refresh
refresh
the
the
page,
page
you
you
can
can
see
see
that
that
our
our
empty
empty
index
index
is
is
now
now
populated
populated
with
with
the
the
items
items
from
from
our
our
Firestore
firestore
database.
database
This
this
means
means
that
that
we
we
can
can
search
search
for
for
text
text
inside
inside
of
of
these
these
documents,
documents
and
and
it
it
will
will
be
be
robust
robust
to
to
typos
typos
and
and
work
work
across
across
multiple
multiple
properties.
properties
Now
now
building
building
out
out
the
the
front
front
end
end
is
is
going
going
to
to
be
be
just
just
as
as
easy
easy
because
because
Algolia
algolia
provides
provides
a
a
component
component
library
library
for
for
Angular.
angular
With
with
just
just
a
a
few
few
components,
components
we'll
we'll
be
be
able
able
to
to
get
get
search
search
functionality
functionality
that
that
looks
looks
like
like
this.
this
It
it
will
will
automatically
automatically
populate
populate
the
the
results
results
when
when
the
the
user
user
types
types
into
into
the
the
form.
form
You'll
you'll
notice
notice
here
here
that
that
it
it
not
not
only
only
searches
searches
for
for
the
the
name
name
of
of
the
the
animal,
animal
but
but
it
it
will
will
also
also
search
search
for
for
text
text
contained
contained
within
within
other
other
properties
properties
on
on
that
that
document,
document
and
and
it
it
will
will
also
also
highlight
highlight
the
the
matching
matching
text
text
in
in
the
the
search
search
result.
result
We'll
we'll
need
need
to
to
add
add
our
our
API
api
keys
keys
to
to
Angular,
angular
but
but
this
this
time,
time
make
make
sure
sure
to
to
only
only
use
use
the
the
search
search
only
only
API
api
key.
key
Then
then
inside
inside
your
your
Angular
angular
project,
project
go
go
into
into
the
the
environment
environment
ts
ts
file
file
and
and
add
add
an
an
object
object
named
named
Algolia
algolia
with
with
your
your
app
app
ID
id
and
and
API
api
key.
key
You
you
can
can
also
also
see
see
we
we
have
have
a
a
Firebase
firebase
object
object
here.
here
That's
that's
because
because
we
we
have
have
AngularFire
angularfire
2
2
installed.
installed
You'll
you'll
want
want
to
to
follow
follow
the
the
install
install
instructions
instructions
on
on
the
the
official
official
repo.
repo
From
from
here,
here
we
we
can
can
install
install
Instant
instant
Search
search
into
into
our
our
Angular
angular
project.
project
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
import
import
the
the
ng
ng
a
a
I
i
s
s
module
module
in
in
our
our
app
app
module.
module
And
and
currently,
currently
there's
there's
one
one
other
other
little
little
thing
thing
we
we
have
have
to
to
do,
do
and
and
that's
that's
go
go
into
into
the
the
polyfills
polyfills
ts
ts
file
file
and
and
add
add
this
this
little
little
piece
piece
of
of
code
code
to
to
prevent
prevent
instant
instant
search
search
from
from
throwing
throwing
an
an
error.
error
I
i
also
also
wanna
wanna
show
show
you
you
how
how
I
i
generate
generate
the
the
dummy
dummy
data
data
for
for
the
the
index,
index
and
and
I'm
i'm
using
using
a
a
library
library
called
called
chance.
chance
Js
js
to
to
make
make
that
that
a
a
little
little
easier.
easier
It's
it's
not
not
something
something
you'd
you'd
use
use
in
in
production,
production
but
but
it
it
is
is
pretty
pretty
fun
fun
to
to
mess
mess
around
around
with.
with
Because
because
Algolia
algolia
gives
gives
us
us
access
access
to
to
a
a
whole
whole
bunch
bunch
of
of
components
components
to
to
use
use
for
for
instant
instant
search,
search
we
we
can
can
just
just
build
build
out
out
everything
everything
directly
directly
in
in
the
the
app
app
component.
component
Let's
let's
go
go
ahead
ahead
and
and
import
import
Angular
angular
Firestore,
firestore
the
the
environment
environment
variables
variables
we
we
set
set
earlier,
earlier
and
and
chance
chance
j
j
s.
s
Then
then
we
we
need
need
to
to
define
define
the
the
configuration
configuration
variables
variables
for
for
our
our
actual
actual
Algolia
algolia
instance.
instance
It
it
will
will
need
need
the
the
API
api
keys
keys
from
from
our
our
Algolia
algolia
environment
environment
as
as
well
well
as
as
the
the
index
index
name.
name
Then
then
it's
it's
going
going
to
to
show
show
all
all
the
the
results
results
by
by
default.
default
So
so
I
i
want
want
to
to
disable
disable
that
that
behavior,
behavior
so
so
I'm
i'm
setting
setting
up
up
another
another
variable
variable
here
here
called
called
show
show
results.
results
Then
then
I'm
i'm
setting
setting
up
up
an
an
event
event
handler
handler
function
function
that
that
will
will
listen
listen
to
to
the
the
changes
changes
in
in
the
the
input
input
form.
form
And
and
if
if
the
the
actual
actual
query
query
has
has
length,
length
then
then
we'll
we'll
show
show
the
the
results.
results
Otherwise,
otherwise
we'll
we'll
just
just
keep
keep
it
it
blank.
blank
And
and
for
for
those
those
who
who
are
are
curious,
curious
this
this
is
is
how
how
we
we
generate
generate
the
the
dummy
dummy
data.
data
We'll
we'll
set
set
up
up
a
a
method
method
here
here
that
that
creates
creates
a
a
new
new
instance
instance
of
of
chance,
chance
and
and
then
then
Chance
chance
has
has
a
a
whole
whole
bunch
bunch
of
of
different
different
helper
helper
methods
methods
on
on
it
it
that
that
generate
generate
random
random
data.
data
So
so
we
we
can
can
just
just
set
set
up
up
a
a
handful
handful
of
of
properties
properties
as
as
our
our
animal
animal
data,
data
and
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
set
set
that
that
data
data
in
in
the
the
Firestore
firestore
database,
database
which
which
eventually
eventually
is
is
going
going
to
to
trigger
trigger
that
that
cloud
cloud
function
function
and
and
then
then
index
index
the
the
same
same
data
data
in
in
Algolia.
algolia
If
if
we
we
switch
switch
over
over
to
to
the
the
HTML,
html
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
add
add
a
a
button
button
that
that
will
will
add
add
a
a
new
new
animal
animal
to
to
the
the
database
database
when
when
clicked.
clicked
And
and
then
then
the
the
most
most
important
important
thing
thing
is
is
that
that
we
we
have
have
this
this
ngais
ngais
component
component
that
that
is
is
the
the
context
context
for
for
the
the
Algolia
algolia
search
search
instance.
instance
It
it
will
will
take
take
our
our
configuration
configuration
options
options
as
as
an
an
input
input
argument,
argument
and
and
then
then
we
we
can
can
set
set
up
up
a
a
search
search
box
box
that
that
will
will
listen
listen
to
to
that
that
search
search
changed
changed
event
event
handler
handler
so
so
we
we
know
know
when
when
to
to
show
show
the
the
results.
results
Algolia
algolia
returns
returns
an
an
array
array
of
of
hits,
hits
and
and
we
we
can
can
loop
loop
over
over
each
each
hit
hit
and
and
provide
provide
it
it
with
with
its
its
own
own
custom
custom
template.
template
So
so
this
this
is
is
how
how
you
you
customize
customize
the
the
actual
actual
search
search
results,
results
which
which
is
is
probably
probably
the
the
most
most
important
important
part
part
for
for
the
the
user
user
experience.
experience
Inside
inside
of
of
the
the
actual
actual
hit,
hit
there's
there's
a
a
component
component
called
called
ngaishighlight
ngaishighlight
that
that
will
will
highlight
highlight
the
the
text
text
if
if
it's
it's
included
included
in
in
the
the
user's
user's
query.
query
You
you
just
just
need
need
to
to
pass
pass
it
it
the
the
attribute
attribute
name
name
as
as
well
well
as
as
the
the
hit
hit
itself
itself
as
as
input
input
properties.
properties
So
so
that
that
gives
gives
us
us
a
a
very
very
basic
basic
search,
search
but
but
there's
there's
a
a
whole
whole
bunch
bunch
of
of
other
other
widgets
widgets
built
built
to
to
the
the
library
library
to
to
do
do
things
things
like
like
pagination
pagination
and
and
filtering
filtering
and
and
things
things
like
like
that.
that
Overall,
overall
Algolia
algolia
provides
provides
a
a
great
great
developer
developer
experience,
experience
and
and
they
they
don't
don't
pay
pay
me
me
to
to
say
say
that.
that
I'm
i'm
just
just
to
to
happy
happy
customer.
customer
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
learn
learn
more
more
advanced
advanced
techniques,
techniques
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
and
and
a
a
whole
whole
bunch
bunch
of
of
resources
resources
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
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss how to use the full text search feature in Fir Carrefour and how to set it up to index data. They also demonstrate how to use the Cloud function for searching and add and remove items from the index, including setting API keys and credentials. The speakers emphasize the importance of creating a cloud function and explain how to use the search function in the background, including setting API keys and removing items from the index. They also discuss how to add animal data to a collection and customize search results, including a link to a book and resources for developers to use.
Algolia Firestore Instant Search
One of the most powerful integrations you can make with Firestore is Algolia. It converts your Firestore database into a full text search engine, which means that you can build instant search features that are extremely fast and sophisticated. In this episode, I'm going to show you how to automatically index all of your data in Firestore using Cloud Functions. And then we'll build an instant search feature on the front end using Angular 6. If you're new here, make sure to like and subscribe, and you can grab the full source code from angularfirebase.com. If you've been following the channel for a while, you might remember episode 27 where we created an Algolia feature with the real time database, but a lot has changed since then. We now have Firestore, Cloud Functions 1 point o, Angular 6, and Algolia also released their own Angular Instant Search component library. And I think this is a really important topic because I end up using Algolia in a lot of projects that I work on. It provides a great developer experience and also a great user experience for search. What we're building today is just a simple full text search feature, but it will set you up to index your data in Algolia so you can build more complex features on top of it. Every time we save a document to the Firestore database. It will trigger a cloud function that will then transmit that data over to Algolia so it can be indexed on their servers. Once it's indexed, you can then query it using one of their client side APIs. In this case, we're using Angular, but you could also use iOS, React, or whatever you want. To get started, you'll need to sign up for an Algolia account, and they do have a free tier that's pretty generous. And we'll also choose a data center. I'm just going with 1 in the US that has the lowest latency. You. After you sign up, head over to the indices tab, and then we'll create our first index. You can think of an index as just a collection that you want to search across. In our case, it'll be a single Firestore collection, but you could even combine multiple subcollections into a single index to search across all of your subcollections throughout your Fire store database. Now that we have our index created, we need to add some data to it with a Firebase Cloud function. But first, I wanna show you some of the crazy things that you can do with Algolia. For example, You can tweak the search ranking formula to control how the results are returned back to the front end. You can tweak the typo tolerance for the user's search input. You can customize the synonyms if you have really specific domain logic or jargon that needs to be used in your index. And that's just barely scratching the surface. You have a ton of control over how the search engine works, and you don't have to write a single line of code to make it work the way you want. Enough of that for now. Let's go ahead and get this thing built. Head over to the API keys and grab your application ID as well as your admin API key. Make sure to only use your admin API key in a secure back end like Firebase Cloud Functions. Don't put it in your client side Angular app. Now I'm running Firebase init functions, which creates a function directory in the root of the project, and we'll make sure to select the TypeScript option. Then CD into the functions directory and run npm install Algolia search. This is Algolia's node SDK that we can use to update items in the index. But before we can use it, we need to set our API keys in the Cloud Functions environment. Run Firebase functions config set, then algolia.apidandalgolia.apikey. Replace the quotes with your actual Algolia credentials and then run the command. Now let's write the cloud function for adding and removing items from the index. You'll be surprised at how easy this is. Let's go ahead and define a variable called env that holds our functions environment variables. Then we'll import the Algolia search SDK. Then we'll initialize it with our app ID and our admin API key. Then we'll set another variable for our index. Note that you can use multiple indices in a single cloud function. The first functional setup will run whenever a new document is created in Firestore. And when that happens, we want to upload it to the Algolia index. So we're listening to the create event on the zoo collection. And then when that happens, we want to retrieve the data from the newly created document, which we can do by calling snap dot data. And every index item in Algolia also has an object ID. We can set this equal to the Firestore document ID just to keep things consistent. Then literally all we have to do is return a promise from this function that adds the item to the index, which we can do by calling index add object with our data and object ID, and that's it. We're entirely done with this cloud function. But we might also want to remove items from the index if a document is deleted. We can do that just as easily by listening to the same collection but the on delete event. And then will grab the object ID and remove it from the index when that document is deleted. And that's our entire back end for Algolia. Everything happens in the background, and it really shouldn't get too much more complicated than this because we can control everything from the Algolia dashboard. Let's go ahead and deploy this function by running Firebase deploy only functions, and then we'll test it out. On my front end here in Angular, I have a button that will add some random animal data to our zoo collection in Firestore. When that happens, it should trigger that cloud function and index our data in Algolia. So you can see here it added a couple new animals to the collection. Then if we switch over to the functions log, we should see that our functions were deployed successfully and that they're being invoked when these documents are created. Everything is looking good there. Let's jump over to the Algolia dashboard and see if our data is there as well. When we refresh the page, you can see that our empty index is now populated with the items from our Firestore database. This means that we can search for text inside of these documents, and it will be robust to typos and work across multiple properties. Now building out the front end is going to be just as easy because Algolia provides a component library for Angular. With just a few components, we'll be able to get search functionality that looks like this. It will automatically populate the results when the user types into the form. You'll notice here that it not only searches for the name of the animal, but it will also search for text contained within other properties on that document, and it will also highlight the matching text in the search result. We'll need to add our API keys to Angular, but this time, make sure to only use the search only API key. Then inside your Angular project, go into the environment ts file and add an object named Algolia with your app ID and API key. You can also see we have a Firebase object here. That's because we have AngularFire 2 installed. You'll want to follow the install instructions on the official repo. From here, we can install Instant Search into our Angular project. The next thing we'll do is import the ng a I s module in our app module. And currently, there's one other little thing we have to do, and that's go into the polyfills ts file and add this little piece of code to prevent instant search from throwing an error. I also wanna show you how I generate the dummy data for the index, and I'm using a library called chance. Js to make that a little easier. It's not something you'd use in production, but it is pretty fun to mess around with. Because Algolia gives us access to a whole bunch of components to use for instant search, we can just build out everything directly in the app component. Let's go ahead and import Angular Firestore, the environment variables we set earlier, and chance j s. Then we need to define the configuration variables for our actual Algolia instance. It will need the API keys from our Algolia environment as well as the index name. Then it's going to show all the results by default. So I want to disable that behavior, so I'm setting up another variable here called show results. Then I'm setting up an event handler function that will listen to the changes in the input form. And if the actual query has length, then we'll show the results. Otherwise, we'll just keep it blank. And for those who are curious, this is how we generate the dummy data. We'll set up a method here that creates a new instance of chance, and then Chance has a whole bunch of different helper methods on it that generate random data. So we can just set up a handful of properties as our animal data, and then we'll go ahead and set that data in the Firestore database, which eventually is going to trigger that cloud function and then index the same data in Algolia. If we switch over to the HTML, the first thing we'll do is add a button that will add a new animal to the database when clicked. And then the most important thing is that we have this ngais component that is the context for the Algolia search instance. It will take our configuration options as an input argument, and then we can set up a search box that will listen to that search changed event handler so we know when to show the results. Algolia returns an array of hits, and we can loop over each hit and provide it with its own custom template. So this is how you customize the actual search results, which is probably the most important part for the user experience. Inside of the actual hit, there's a component called ngaishighlight that will highlight the text if it's included in the user's query. You just need to pass it the attribute name as well as the hit itself as input properties. So that gives us a very basic search, but there's a whole bunch of other widgets built to the library to do things like pagination and filtering and things like that. Overall, Algolia provides a great developer experience, and they don't pay me to say that. I'm just to happy customer. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn more advanced techniques, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book and a whole bunch of resources designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
The speakers discuss how to use the full text search feature in Fir Carrefour and how to set it up to index data. They also demonstrate how to use the Cloud function for searching and add and remove items from the index, including setting API keys and credentials. The speakers emphasize the importance of creating a cloud function and explain how to use the search function in the background, including setting API keys and removing items from the index. They also discuss how to add animal data to a collection and customize search results, including a link to a book and resources for developers to use.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Algolia Firestore Instant Search 
        and a small summary : The speakers discuss how to use the full text search feature in Fir Carrefour and how to set it up to index data. They also demonstrate how to use the Cloud function for searching and add and remove items from the index, including setting API keys and credentials. The speakers emphasize the importance of creating a cloud function and explain how to use the search function in the background, including setting API keys and removing items from the index. They also discuss how to add animal data to a collection and customize search results, including a link to a book and resources for developers to use.
        [/INST]
        
        Generate the video : One of the most powerful integrations you can make with Firestore is Algolia. It converts your Firestore database into a full text search engine, which means that you can build instant search features that are extremely fast and sophisticated. In this episode, I'm going to show you how to automatically index all of your data in Firestore using Cloud Functions. And then we'll build an instant search feature on the front end using Angular 6. If you're new here, make sure to like and subscribe, and you can grab the full source code from angularfirebase.com. If you've been following the channel for a while, you might remember episode 27 where we created an Algolia feature with the real time database, but a lot has changed since then. We now have Firestore, Cloud Functions 1 point o, Angular 6, and Algolia also released their own Angular Instant Search component library. And I think this is a really important topic because I end up using Algolia in a lot of projects that I work on. It provides a great developer experience and also a great user experience for search. What we're building today is just a simple full text search feature, but it will set you up to index your data in Algolia so you can build more complex features on top of it. Every time we save a document to the Firestore database. It will trigger a cloud function that will then transmit that data over to Algolia so it can be indexed on their servers. Once it's indexed, you can then query it using one of their client side APIs. In this case, we're using Angular, but you could also use iOS, React, or whatever you want. To get started, you'll need to sign up for an Algolia account, and they do have a free tier that's pretty generous. And we'll also choose a data center. I'm just going with 1 in the US that has the lowest latency. You. After you sign up, head over to the indices tab, and then we'll create our first index. You can think of an index as just a collection that you want to search across. In our case, it'll be a single Firestore collection, but you could even combine multiple subcollections into a single index to search across all of your subcollections throughout your Fire store database. Now that we have our index created, we need to add some data to it with a Firebase Cloud function. But first, I wanna show you some of the crazy things that you can do with Algolia. For example, You can tweak the search ranking formula to control how the results are returned back to the front end. You can tweak the typo tolerance for the user's search input. You can customize the synonyms if you have really specific domain logic or jargon that needs to be used in your index. And that's just barely scratching the surface. You have a ton of control over how the search engine works, and you don't have to write a single line of code to make it work the way you want. Enough of that for now. Let's go ahead and get this thing built. Head over to the API keys and grab your application ID as well as your admin API key. Make sure to only use your admin API key in a secure back end like Firebase Cloud Functions. Don't put it in your client side Angular app. Now I'm running Firebase init functions, which creates a function directory in the root of the project, and we'll make sure to select the TypeScript option. Then CD into the functions directory and run npm install Algolia search. This is Algolia's node SDK that we can use to update items in the index. But before we can use it, we need to set our API keys in the Cloud Functions environment. Run Firebase functions config set, then algolia.apidandalgolia.apikey. Replace the quotes with your actual Algolia credentials and then run the command. Now let's write the cloud function for adding and removing items from the index. You'll be surprised at how easy this is. Let's go ahead and define a variable called env that holds our functions environment variables. Then we'll import the Algolia search SDK. Then we'll initialize it with our app ID and our admin API key. Then we'll set another variable for our index. Note that you can use multiple indices in a single cloud function. The first functional setup will run whenever a new document is created in Firestore. And when that happens, we want to upload it to the Algolia index. So we're listening to the create event on the zoo collection. And then when that happens, we want to retrieve the data from the newly created document, which we can do by calling snap dot data. And every index item in Algolia also has an object ID. We can set this equal to the Firestore document ID just to keep things consistent. Then literally all we have to do is return a promise from this function that adds the item to the index, which we can do by calling index add object with our data and object ID, and that's it. We're entirely done with this cloud function. But we might also want to remove items from the index if a document is deleted. We can do that just as easily by listening to the same collection but the on delete event. And then will grab the object ID and remove it from the index when that document is deleted. And that's our entire back end for Algolia. Everything happens in the background, and it really shouldn't get too much more complicated than this because we can control everything from the Algolia dashboard. Let's go ahead and deploy this function by running Firebase deploy only functions, and then we'll test it out. On my front end here in Angular, I have a button that will add some random animal data to our zoo collection in Firestore. When that happens, it should trigger that cloud function and index our data in Algolia. So you can see here it added a couple new animals to the collection. Then if we switch over to the functions log, we should see that our functions were deployed successfully and that they're being invoked when these documents are created. Everything is looking good there. Let's jump over to the Algolia dashboard and see if our data is there as well. When we refresh the page, you can see that our empty index is now populated with the items from our Firestore database. This means that we can search for text inside of these documents, and it will be robust to typos and work across multiple properties. Now building out the front end is going to be just as easy because Algolia provides a component library for Angular. With just a few components, we'll be able to get search functionality that looks like this. It will automatically populate the results when the user types into the form. You'll notice here that it not only searches for the name of the animal, but it will also search for text contained within other properties on that document, and it will also highlight the matching text in the search result. We'll need to add our API keys to Angular, but this time, make sure to only use the search only API key. Then inside your Angular project, go into the environment ts file and add an object named Algolia with your app ID and API key. You can also see we have a Firebase object here. That's because we have AngularFire 2 installed. You'll want to follow the install instructions on the official repo. From here, we can install Instant Search into our Angular project. The next thing we'll do is import the ng a I s module in our app module. And currently, there's one other little thing we have to do, and that's go into the polyfills ts file and add this little piece of code to prevent instant search from throwing an error. I also wanna show you how I generate the dummy data for the index, and I'm using a library called chance. Js to make that a little easier. It's not something you'd use in production, but it is pretty fun to mess around with. Because Algolia gives us access to a whole bunch of components to use for instant search, we can just build out everything directly in the app component. Let's go ahead and import Angular Firestore, the environment variables we set earlier, and chance j s. Then we need to define the configuration variables for our actual Algolia instance. It will need the API keys from our Algolia environment as well as the index name. Then it's going to show all the results by default. So I want to disable that behavior, so I'm setting up another variable here called show results. Then I'm setting up an event handler function that will listen to the changes in the input form. And if the actual query has length, then we'll show the results. Otherwise, we'll just keep it blank. And for those who are curious, this is how we generate the dummy data. We'll set up a method here that creates a new instance of chance, and then Chance has a whole bunch of different helper methods on it that generate random data. So we can just set up a handful of properties as our animal data, and then we'll go ahead and set that data in the Firestore database, which eventually is going to trigger that cloud function and then index the same data in Algolia. If we switch over to the HTML, the first thing we'll do is add a button that will add a new animal to the database when clicked. And then the most important thing is that we have this ngais component that is the context for the Algolia search instance. It will take our configuration options as an input argument, and then we can set up a search box that will listen to that search changed event handler so we know when to show the results. Algolia returns an array of hits, and we can loop over each hit and provide it with its own custom template. So this is how you customize the actual search results, which is probably the most important part for the user experience. Inside of the actual hit, there's a component called ngaishighlight that will highlight the text if it's included in the user's query. You just need to pass it the attribute name as well as the hit itself as input properties. So that gives us a very basic search, but there's a whole bunch of other widgets built to the library to do things like pagination and filtering and things like that. Overall, Algolia provides a great developer experience, and they don't pay me to say that. I'm just to happy customer. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn more advanced techniques, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book and a whole bunch of resources designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
        