Fullstack Autocomplete Search with Algolia

today we'll turn you our firestore database into a full-text search engine using algo leo it's pointing something it's one of my all-time favorite API s and I use it on fire ship IO to power content discovery features like Instant Search what you'll build today is a pipeline with firebase cloud functions that automatically indexes your fire store data in algo Lea and then we'll look at multiple implementations to consume that data from a customer facing app if you're new here like and subscribe and check out the full source code at fire ship IO so let's start by answering the question of when would you want to use a service like algo Lea and keep in mind this video is not sponsored so these are my own personal opinions no SQL databases like fire store are designed primarily for fast reads and to scale seamlessly but they can be relatively limited on the types of queries you can make especially if you need to search across the entire text of a document or if you need to filter by multiple properties simultaneously and keep track of counts of different properties algo Lea solves all of these problems for you and more it's really an ideal solution if you have something like Amazon where you have millions of products and you need to sort these products and filter and search them in many complex ways now algo Lea starts off with a free tier but one of the biggest complaints you might hear is that it's expensive and I do think that's a very valid complaint especially if you have millions of Records it jumps from free to $29 per month up to $500 per month but as you'll see in this video this is kind of a situation where you get what you pay for the first thing you want to do is sign up for an algo Lea account and then it will walk you through the process of creating an index I'll go ahead and create a new index called customers and this will basically be a mirror of our fire store data - any personally identifiable information things like email addresses and phone numbers are not something that you want to keep in the index you should keep in mind that all this data will be exposed client-side so you want to leave out any information that would be considered sensitive so now that we have this index setup we have a whole bunch of different ways to customize it I'll leave the customization part up to you but just know that there's a whole bunch of cool things you can do like set these searchable attributes tweak the ranking and sorting algorithms setup typo tolerance stop and word proximity and a whole bunch of other stuff and you could even generate your own UI demo based on your own underlying data and that means you can get a solid mock-up of your search UI before you write any front-end code so now that we have this index created we need a way to dynamically add data to it and we want to add data to the index every time a new firestore document is created as you can see here I have algo Lea on the left and firestore on the right when new documents are added to the database they will automatically be updated in the index indexing operations will always happen on the backend which will do with nodejs and firebase cloud functions will start from an empty working directory and then run firebase to net functions I'll be using javascript for this demo but feel free to use typescript if you prefer that command will give us a functions directory and you can ignore all of the other directories that you see on my screen for now but you can see all of these frameworks specific front-end integrations in the full source code from there will CD into the functions directory and install algo leus search this is an API client for node and it's going to require our API keys which we can retrieve from the algo Lea dashboard you'll need your application ID as well as your admin API key and then we have this big long command to save the API keys in the functions environment and the reason you want to have these as environment variables is if you ever have to change the API key then you can simply reset it in the environment without having to redeploy your cloud functions at this point we can open up the index.js file and we'll start writing some code we'll go ahead and import the algo Lea search client and then we'll make it reference to the app ID and the admin key that we have in the functions environment we'll pass those values to algo Lea search and then we'll initialize the index by calling and net index with the name of our index which in this case there's customers and now we can reference this index in any one of our cloud functions so we'll go ahead and start by creating a new fire store function called add to index which makes a reference to a fire store document whenever a new document is created in the customers collection it will run the code inside of this callback the snapshot contains the newly created data from the fire store document that's the data that we want to duplicate in algo Lea - any personally identifiable information now we can identify a record in algo Lea with its object ID so the object ID will be equal to the firestore document ID and that's how we kind of can the two objects together on both platforms then the final step is to return a promise from the function which will do with index add object with a javascript object containing the data and object ID and that's all there is to it now every new customer document and firestore will be duplicated in the algo Lea index but this function will only run on create and it's possible that the data might change or might be removed in the future so we'll set up a couple of additional cloud functions here to handle those requirements we'll create a second cloud function called update index that runs whenever the firestore document is updated this function is almost identical to the last one with just some minor differences instead of having the document snapshot we have a change object which has the firestore document before the change and after the change we're only concerned about the changes afterwards because that's what we want to update in algo lea and we'll do that by calling index save object to update a single object with this new data and lastly we'll create one additional function called delete from index that will run when a document is deleted from firestore and this one is the easiest of all we simply call index delete object and pass it the firestore document ID and again that's why it's important that your al-khalil object ID matches the firestore document ID now we can deploy our three functions by running in firebase deploy only functions from the command line and then you should see your functions in the firebase console now at this point we could create some dummy data manually in the firebase console but I want to show you a little trick to quickly see the database with some fake dummy data we can install faker J s in the cloud functions environment which allows us to generate a massive amount at fake random data from there I've created a new file called CJ s in the functions directory and I'm going to import firebase admin and then call admin initialize app now this isn't actually a cloud function it's just a node script that will run from the command line in just a second here we'll go ahead and import faker and then we'll make it reference to firestorm then we'll write a function called fake it and every time this function is called it will add a new document to the database with all of its data being completely random and fake and lastly we'll create an array that has the length of the number of documents that we want to create in this case 20 and then we'll go ahead and call this function for each item in the array now because this script is in the functions directory it will automatically pick up our firebase admin potentials and that means we can simply go to the command line call node and point it to the script and the result should be 20 new documents in your database now because we've already deployed our functions this will also result in 20 function invocations for the oncreate event and that means if we refresh our algo Lea index we should see all of the data there as well if for whatever reason you don't see your data in algo Lea at this point check out the cloud function logs to see if you have any error messages there this would also be a good time to validate your update and delete cloud functions if you update some data in firestore from the console you should see it's reflected in algo Lea after a couple of seconds in addition if you delete a document from firestore you should see that the corresponding object in algo Lea is removed as well it looks like the backend implementation for full text search is working perfectly so we'll go ahead and move on to the front-end integration when it comes to the front-end algo Lea provides a lot of support for different frameworks including angular react view iOS and Android I'll show you the angular implementation details in this video but what if you're working with a framework that's not supported likes felt in that case you can use the API client directly or you can use the instant search jst let's go ahead and start by looking at these spelt implementation details because it's not framework specific and could work with any framework if you wanted to go this route first we'll go ahead and install algo Lea search into the app and you can also install instant search at this point as well instant search will give you a bunch of pre-built widgets but in this case I'm going to build a completely new UI from scratch we'll go into our spelt component and then we'll import on Mount as well as algo Lea search and we really only need algo Lea search light in this case then we'll initialize properties for the search client as well as the index that were referencing then we'll have the query that the user types into the forum and then the hits that get returned back from algo Lea with these search results from there we initialize the search client which is almost identical to how we did it in the cloud function except that we use the search API key instead of the admin API key it's extremely important to keep your admin API key out of your front-end code because it would allow anybody to modify or completely destroy your index from there we'll go ahead and make a reference to the customers index and then we can make a search by simply calling search on that object with the query parameters that we want to pass in this case we'll simply be passing the text that the user types into the form but you could also pass additional options here to customize the behavior now we want to run a query every time that user types into a form so we'll go ahead and handle that with a function called search it will await the results of a query and then that result object has a hits property which contains all of the objects from the Algol iya index for that search query so every time the hits property is updated that will cause spell to react and update the state of the UI now moving down to the HTML we'll go ahead and set up a text input and then we'll bind the value of that text input to the query property on the component and we want to run the search on every key up event so we'll go ahead and say on key up and then have it fire the search function and now it's just a matter of looping over the hits to display a template for each individual result we'll set up an image with the hit Avatar and then we'll display a heading with a user name but you might also want to highlight the text that the user has typed with the results that are returned now Algol II returns a highlighted result that contains the raw HTML of a property with the text highlighted so one way to use that data is to bind it to the inner HTML of a paragraph element by default it will contain the text of that property but with the highlighted part wrapped in an e/m element and you can actually customize the element used here from the Algol iya dashboard now to make the highlight really standout we'll go ahead and add a global style here for the emphasis and you can see when we type into the form in the demo that these search results are updated and the user's keywords are highlighted in the search result now this UI could obviously use a lot of work but we now have a full stack full text search feature in our spelt app that was pretty easy but if you're using angular viewer react it's even easier algo Lia provides a bunch of pre-built libraries and components for these frameworks to get started with the angular version you'll want to follow the official setup instructions which will have you install the package and add it to your ng module and then I've generated a search component here in my angular app and you can see that it relies on 0 typescript whatsoever and that's because algo leah has already done that stuff for you under the hood so you're simply working in the template to display the actual UI elements that you want to show the end user the first thing you'll do is wrap your elements in the AIS instance search component and that will give you the context to search ace civic index from there you'll want to display a form input which you can do with a is search box and you can use the a is hits component to give you the context for the hits and the actual search result object itself and you can use angular directives to customize the behavior of the template for example will say no match is found when the hits length equals zero and then we'll go ahead and use ng-if to loop over the array of hits and display a template for each result and we can easily highlight text by using the built in a is highlight component just specify the attribute you want to highlight and then pass in the hit as an input property and now we have full stack full text search and angular so at this point it's just a matter of making it look good with our design system so I'm gonna go ahead and wrap things up there but keep in mind there's a lot more you can do without Golia like multi property filtering geo queries and things like that if this video helped you please like and subscribe and consider becoming a pro member at fire ship IO to get access to even more content thanks for watching and I will talk to you soon [Music]

Channel: Fireship

Views: 94,051

Keywords: webdev, app development, lesson, tutorial, autocomplete, algolia, firestore, svelte, angular, react, firebase cloud functions, serverless, fulltext search, search engine, build search engine, firestore complex query, algolia angular, algolia svelte, algolia firebase, cloud functions, nodejs, js

Id: dTXzxSlhTDM

Length: 12min 13sec (733 seconds)

Published: Mon Aug 26 2019