Algolia Search in Flutter with Firestore: Step-by-Step Integration Guide

hey guys welcome back to your Tech Channel in our last video we Dove deep into creating an ugly but powerful search bar in flutter if you've given that a try you know how seamless it can feel to the user but let's talk about what's happening behind the scenes when we are fetching data directly from file store for our search it might seem okay initially however as our data set grows and our search queries become more complex this method can quickly become inefficient not to mention it could incur additional cost that feels like your wallet got snatched by your monster wife that's why Firebase themselves recommend Outsourcing search capabilities to specialized platforms when the going gets tough so in today's video we've decided to integrate algolia into our app a search API that is well lubricated to fit with firestore data so without further Ado let's Dive Right In the first thing we need to do is to go to algolio website if you're new to algolia then you'll need to sign up for an account and after creating an account this is the dashboard that you'll see and to get started with algoria we need to create an application by clicking on this button and then tapping on this create application but before we move forward I just want to clarify things first in algolia when they say application it essentially refers to an environment where you can store multiple data sets or what they call indices think of an application like a project space where you can have various searchable collections each with its own configurations and rules and speaking of index in argolia an index is similar to a database table or a firestore collection it's a structure that holds all the records you want to make searchable each record in an index typically represents a piece of content or an object that users might search for so in your app if you have search feature for users and search feature for products you'd need to create two indices inside your algoli application one for the user's collection and another for the products collection if you have two or more Firebase projects each with its search feature you can house all the indices inside a single algoli application but for the sake of organization I recommend creating one algolio application for each Firebase project okay now that we have a good understanding of what an application and an index mean in algolia let's continue creating our application so here we need to name our application since our application is a chat up let's name it flutter chat app it's easier that this name is optional but I still recommend naming it for easier identification in the future then down here you need to choose the subscription you need in our case let's choose this print here when you are just starting out I recommend starting with this pre-tier and then let's click on this next step then here you need to choose your data center where you want your data stored I recommend using the data center nearest to your area to reduce latency and then scroll down and click on this review application details button now here we can see the summary of our subscription we choose it says that we can store up to 1 million records and then 10 000 search requests per month so let's accept these terms and conditions and click on this create application there you go we now have successfully created our application once you've done creating your application we now need to create our index as explained earlier about indices since we are creating an index for our users collection let's name our index user's index and then click on create index okay after creating an index let's go to our Firebase project and install the algoria extension go to all product click on these extensions then look for algolia and install it now here it says your project must be on the blaze plan so let's upgrade our project to the place of gloryplan to satisfy Firebase never mind this these are just an explanation why these are needed by the extension you can read it on your own so let's enable all of this now here is the configuration this Collection part is the path to your searchable collection so in our case is the user's collection then here is the indexable field this is optional because you can set this in your algolian dashboard but in our case let's make our users name searchable take note that you shouldn't be adding sensitive Fields here like uid email and phone number in this first data sync I recommend setting it to no because algolio will automatically sync it every time there is a change so there is no need to receiving it to avoid additional read costs so here in the algolia index name is the index we have just created which is the user's index and this algoria application ID you can find this on your algolia settings and API case let's copy this next is your algoli API key take note that it says here that you shouldn't be using your admin API key and we need to create a new API key with these permissions so let's create a new API key here in your description you can write whatever you want let's choose our index here and here let's add all the recommended permissions after adding them all let's hit create this is now our newly created API key let's copy it and then it says here that we need to create a secret then let's skip this and here let's choose yes and then choose your Cloud function location and then install extension okay the extension is now installing let's wait for this to complete okay installation is now done now it says here that when user's collection exists it should begin importing documents into the user's index so let's go ahead and see if our collection was imported oh we still don't have any records yet why is that ah it says here that this extension listens to our collection users if we create update or delete and we'll index it so let's try to add user to our collection okay let's try to check one more time if the collection was imported oh we now have 16 records there you go all our users are now imported we can now start using this in our platter app okay we are now here at our flutter project we'll implement this in a straightforward way to avoid complexities our goal here is to Simply make it work in the easiest way possible so that once we type the name of the users we are interested in it will be displayed on our UI like magic so we have here a basic screen with the text form filled as an up bar and without a body so that it would be easier for you to follow along and let's build this up along the way okay the first thing we need is a client-side API that will communicate to our algolia index so in this demonstration we'll use the algolia 1.1.2 package so here is the algolia package that we'll be using here in their example we need to initialize this algolia class using this init method passing in both the application ID and our API key we already covered where to find this earlier so this shouldn't be a problem and then after initializing we need to instantiate it like this and to start fetching search results we need to tap on this instance that index passing our algolia index name followed by this query method passing in the search query and then you can filter the query here if you want using disposite filters or any other filtering method that matches your needs but in our case we won't be filtering for Simplicity and then we need to fetch it using this get objects method and oh wait it's a result take note that this is not all the result of this get object method is not yet the list of users that we are trying to fetch this is an object that contains the details of the operation including the list of actual results so to get the final result we need to tap on the hits field all right I hope the clarity is crystal clear and the flow is flawless let's now implement this in our app as explained we need to initialize it and let's define our application ID in API key now let's define our fetch users function let's pass our index name and then the value of our text form field which is this one then let's call the get objects don't forget to avoid this because this is a feature then let's extract the list of users from the snapshot and finally let's add the results to our results list and call set state to rebuild our UI now to be able to fire this function we need to add the search button here okay once we trigger this function we need to display the results to LS view.builder in the body of our scaffold okay what we need to extract here is the name of the users since this item is of type algoli object snapshot we need to access its data which is of type map string dynamic and then retrieve the name field and if it's null let's give it a default value of No Name all right before we test this let me just wrap this in a tricatch real quick okay Moment of Truth let's try to search for this one okay to be able to retrieve the ID of this data which is this one we need to tap on the object ID like this foreign guys what we only did here is to demonstrate how to fetch from our algolia back end and display is a result in the most basic way so in our next video we'll be refining our code to make it robust testable and production ready thank you so much for tuning in guys if this video helped you out please give it a big thumbs up share it with your fellow flutter Enthusiast and don't forget to hit the Subscribe button because this would encourage me to create more valuable content like this

Channel: JOBERTECH

Views: 2,057

Keywords: flutter, flutter tutorials, flutter tips, flutter development, flutter ui design, flutter ui, flutter widgets, mobile app development, code guide, flutter tips & tricks, joberTech, JoberTech, JOBERTECH Flutter, Flutter Tutorials, Mobile App Development, Coding Guide, Flutter UI Design, Flutter UI, Flutter Widgets, Flutter Tips & Tricks, algolia, Algolia, algolia search, Algolia Search, algolia integration, AlgoliaIntegration, algolia extension, Algolia Extension

Id: -sYynwFM4Ak

Length: 19min 18sec (1158 seconds)

Published: Fri Sep 01 2023