FlutterFlow: Build A Search Engine with Firebase Firestore and Algolia (2022) | FlutterFlow 2022

what's good guys so in today's video we are going to be using flutter flow to build a search engine so today is going to be a very comprehensive video because we're going to be implementing many moving pieces in order to build this app now before we go further if you are interested in writing software and building software and making money with software without writing a single line of code without needing to be technical then definitely smash a like on this video subscribe to the channel and leave a comment to let me know what kind of content you'd like to see and what kind of issues you are struggling with now having said that let's continue okay so here we have a diagram of the app we're going to be building this is going to be a flutter flow search engine and we're going to be implementing algolia okay this is a really really cool system for search okay and i'm going to talk about it in just a second so here's the basic architecture of the app this is the app here right so this is our flutter flow app it's a search engine app and it's going to have a bunch of widgets and we are going to be implementing firebase to store data and we're also going to be implementing algolia as an index to index our data so that the data in firebase is going to be very easily found it's going to be searchable this data okay and so now before we actually go into flutterflow and build the app we got to do a couple of other things first we got to work backwards so the first thing that we need to do is we need to set up algolia then we need to set up firebase and then we need to set up the actual app okay so i'm going gonna go into algolia and i'm gonna show you how to set it up for the app that we are building so here i am in algolia i'm gonna log into my existing account i'm under the free plan so you do not have to pay anything so i'm gonna say login right here all right so here i am in algolia's dashboard and so what exactly is algolia well you can kind of read more about it here we are on the on the main page you have kind of two basic products you have algolia search and algolia recommend so this is the powerful hosted search api to create face fast and relevant search and discovery and we also have flexible hosted recommendation api with advanced programmatic control now in this video we're going to be primarily talking about algelia surge i may create another video with algolia recommend which is a very very powerful system so if you want to see that kind of video leave a comment below and smash a like on this video but typically if you go in here learn more you can kind of understand what it does and essentially it allows you to index your world put into motion with our powerful search api and get results fast so basically you have a bunch of data and you want it to be searchable okay this is a fairly hard problem and algolia solves it very very elegantly and i'm going to show you exactly how it works so here we are back in algolia's dashboard and what we need to do is we need to create an application okay so here i have an application kind of the default application and what we want to do first is we want to kind of rename it we have an online app and what i'm going to do is i'm going to rename it so i'm going to call this our flutter app okay this is going to be our um flutter app our search engine essentially so we're gonna save it and here okay so if we go into this app we have a bunch of things we also have api keys we have a lot of these interesting things now the next thing that we want to do is we want to go into search and we want to create an index okay so essentially in index is the data that we're going to be searching on so that it creates an index out of this data which allows it to be very very easily to be searched so i'm going to create an index and the index we're going to create i'm just going to call it documents okay we're assuming we're going to have a collection of documents i'm going to just say documents create okay so now we are done there is nothing else we need to do because it's going to be done automatically so at this stage we're kind of done now the next thing that we need to do is we need to create our firebase database so you can simply go to firebase.google.com and what you need to do is you need to create a project here so we're going to call this flutter search app okay we're going to say continue uh we're going to disable this we're going to say create project we're going to wait a little bit all right so the project is ready we're gonna hit continue and now we're inside a dashboard for our project okay this is our project overview and we have access to all of these things now for the purpose of this tutorial we're only gonna be using this firestore database which is what algolia is going to connect with and it's going to index the data that's inside that's going to be inside our firestore database we're going to go in here and we're going to create a new database we're going to do it in test mode we're going to say next we're going to say enable all right so now we are inside our cloud firestore next is we need to enable an extension so you're going to go here to extensions and you want to install this extension called search with algolia and what it enables you to do is that it gives you full text search of your cloud firestore data with algolia so we're going to say install before you can install you need to upgrade your project to be on the blaze plan and all the blaze plan is it's a pay-as-you-go plan okay for testing purposes we're not going to pay anything but if your app becomes successful it's going to have a lot of reading rights a lot of action happening to it you're going gonna be paying a small amount but we need to do that so we need to upgrade the project to continue all right so as you can see we just went from the spark plan to the blaze plan okay next we need to review api's enable enabled and resources created so here you can just enable the secret manager this is actually required we're going to say next we're going to enable these two things here this is also required we're going to say next and here is where we need to configure the extension and this is very very important okay it asks for a collection path and this is essentially from algolia's point of view the way it's going to be accessing our firebase firestore database and we're going to say documents here because that is the name of our collection uh this is all optional this is optional algolia index name is going to be documents because that's what we call the index so as you can see this index right here says documents here so that's kind of what we want now we need application id and api key okay so for that you're gonna go in here so the application id is actually this thing right here you see that you can just copy it right here and you have your application id and you're gonna you're gonna paste it in right here now we need the api key okay for the api key you can actually click here and that's gonna explain to you what it wants we recommend creating a new api key with ad object delete object list indexes all of these permissions there so that's that's exactly what we're going to be doing so you can just go in here you can just go here go to api keys you can create a new api key here and we're going to call this um firestore api key and we are going to enable all the permissions there so what it wants is these permissions okay add object delete object list indexes delete index edit settings and settings so we're going to go in here we're going to say add object delete object list object list indexes delete index edit settings delete index edit settings and then one more settings okay that's what it needs this key is gonna have access to all of this and that is kind of what the extension needs so we're gonna say create so there's our new api key that we have just created and we can simply copy it right here copy and go back here and paste it in here okay okay new secret version is created and we can just double check if everything is here and then we can just press install extension okay now this says that it's now installing this should take approximately three to five minutes all right so now the extension is installed we can simply go to get started and it's telling us what we need to do next okay so we can go to the cloud firestore tab we can create documents we already did that we can create update and delete documents so essentially what it's telling us to do is that if we create documents here like we typically would right we're you know putting in data we're you know editing editing deleting data it should be replicated here as an index okay so let's see if that works because that is very very important if that doesn't work then there's a problem with the extension this really needs to work okay so we have our app here we have the index right here we don't have any records we are going to go back to our firestore database here and we are going to create a document and hopefully it's going to get replicated in our algolia okay so if i come in here and i say documents so in terms of documents these are just going to be articles on the web that we're going to be indexing and creating a search engine for so we're going to have a title we're going to have contents and we are going to have a field that's going to be maybe a stamp okay so we're gonna say so maybe we have we have an article there about a trip to new york so the title could be something like my trip to nyc and the contents could be something like in this article i will talk about my trip to nyc okay and the timestamp we're going to say this is our date published or just published which is going to be a daytime stamp and we're just going to say uh today's date okay we're going to hit save okay so now we have one document and now that we created we need to go back to algolia and we need to make sure it's replicated there okay so we go back to algolia we refresh and guess what we have the document you see how it created automatically uh essentially it took the data from our firebase database and it replicated here okay all the fields everything and that's perfect that is what the extension is doing so let's go back and create another document okay so we have a couple of documents so let's add a new document uh we're gonna say title is going to be my trip to los angeles field is contents string is in this article or today i'll talk about my trip to la okay it's like it's like a blog article essentially with the title contents and then published we're gonna say this is a time stamp and let's say it was published a couple of days ago okay so now we have two documents we go back to algolia we refresh it and we have two records you see it says here number of records two and we have another record my trip to la today so this is working perfectly okay let's create one more so we have three three is a nice number field is title uh my trip to mexico contents i like to create three because three is is a nice number it's a nice representation of kind of the data contents uh let's talk about let's talk about my trip to mexico city and published let's say this was published um you know a week ago or something okay we hit save it created and now it should be created in mongolia as well so let's refresh it three records and we have three records there okay so if you refresh the page we have three records nyc mexico and los angeles so this is working perfectly okay so now we've done this part and we've done this part what's left is actually build the app now that we can connect it to all of these components here okay so let's go into flutter flow let me sign into my account we're going to say create project and i'm just going to call this a blog search engine i'm going to say create new actually we need to connect it so i'm going to go back here i need to go to firebase and i need to enter that project and i need to say connect so it needs a user there firebase flutterflow.io as an editor to this project so that's very easy you can just go to users and permissions and add this user firebase at flutterflow.io we're going to say editor done add member add it okay so now we can go back we can say connect and it should connect right now okay it's connected now we're going to say auto generate config files all right this is complete now okay so the next thing that we need to do is we need to go to the firestore and we need to create a collection here so we're going to call this documents we're going to add fields this is going to be title string create add another field contents string create and then published published is a timestamp okay so that's kind of what we have if we go into settings we can validate that the schema matches perfectly we're going to hit validate and this is always good practice you can also turn this on so that this check runs on on run mode so whenever you compile the app whenever you're testing the app you want to view the app it validates the schema beforehand this is very very good practice successful okay so now we have firestore can uh set up correctly the next thing we need to do is we need to set up algolia and for that we're going to go to our gear icon we're going to say we're going to go to algolia and we need an application id so that's right here so if you go in here you can just copy this application this is this thing right here you can just copy it paste it here we need a search api key and for that you can just go into the main page api keys and you you have the search api key here we're going to copy this and we're going to paste it here and so as you can see it says deployment status is deployed so everything is fine and so now we've completed all the setup that we needed to do and now we can actually go out and build the app so let's go back here and let's try to build the app and so how is this going to work well the way this is going to work is that we're going to have a search input text box person is going to type something and then we're going to be showing results so let's go in here and let's design this app real quick we have this column here let's add a row and this row is gonna have our input field so we're gonna scroll down we're gonna go to this text field right here and this text field is gonna be what they're gonna be searching for so they're gonna type something press enter and we're gonna be showing them results so let's scroll down this is going to be search here okay there you go and then what we want to do is we have this row what we can do is we can add a list and this list view right here is going to repeat something okay so we're going to go back here and we can do a couple of things right we can just you know list a bunch of rows that it's going to list with the row a container and each container is going to have a a text field or something but let's do something a little bit more interesting so if we come in here we can actually choose a template okay so we can choose a template that's already created kind of going to be a search result so let's take a look at these templates just to kind of understand which one of these we can use for our search results something that looks kind of um similar to what we want so maybe something like this this can work right so this card 5 rating is a good idea so i'm going to go back here i'm going to go to this list view and i'm going to say let's use a card card 5 rating okay and we can customize it okay it's not it may not need to have an icon it might have some text here but if you look at google's result right so if you type something like you know news of the world or something you're gonna see that google has the url here then it has the title and it has a snippet of the actual results right if you scroll down you have url you have the title and you have the content so we don't have any url we can't customize the url very very easily but we don't have one right now and as a result we're simply going to have a title contents and maybe a date at the bottom okay so that's all we have to do so we're going to go back here this is going to be our title i'm going to delete this icon here this is going to be the title uh we're not going to have anything here actually this could be the date maybe so i'm going to actually yeah let's delete that let's make this the date and this is going to be our content so it's a nice little kind of snippet okay now the first thing i need to do is i need to configure the list view okay so if i go in here and i go to i pick the list view and i come to the the backend query i need to specify it as a logolia search okay the collection is documents and the search term is gonna be a specific value that we're gonna be getting from here okay it's a search here but before that i wanna rename this and i'm gonna say input query okay so it's it's going to be easier to label it to call it from other places so we're i'm going to go back here to list view and i'm going to say algolia search documents and this is going to be a from variable we're going to say source is a widget state and we're going to pick input query okay and then we're going to say okay and now as you can see now it kind of repeated it to let us know that it actually has a back-end data and this thing is going to be repeatable and that's perfect for us okay so the next thing that we want to do is we want to configure this specific fields here okay so this text here if you go in here we're going to go set from variable we're going to say document response and we're going to say title confirm this thing is going to be set from variable document response this is going to be contents and this thing is going to be published document response published okay so now we have this kind of um this list item here configured the next thing that we want to do is we want to go into search here and we want to configure an action okay we want to add an action and on submit we wanted to do an algolia search okay we're going to say algolia search collection is going to be documents and the search term is going to be from variable widget state input query okay that's it and now we're kind of done we can also rename this if you want we can change the text here we can change the page title uh we can come in here and we have the home page we can you know change it to home page whatever search something like this okay and we have this thing now let's run it and let's see if it works okay so i'm gonna hit run all right so here's the app and now this is the moment of truth so let's say we want to search for trip press enter and we have all the three results okay so it doesn't look bad we need to kind of format it a little bit here maybe just display the date but now we have all the three results let's say i type mexico press enter and we only are seeing mexico let's say only type nyc press enter and we have nyc let's say i type the word today and i'm gonna see just this result or you know i type talk and then i will see all the results so you guys get the message here this works extremely well and it's extremely fast if i type nyc it's just going to show nyc and this application is going to be perfect for all kinds of situations all kinds of apps you want to build uh regardless if it's going to be a search engine or a blog search engine or this or maybe a amazon.com clone an e-commerce store you name it in any situation where you need search and you need ranking and you need some kind of recommendations you're gonna find this method extremely extremely useful and so this is kind of what i wanted to show you guys today if you enjoyed this video and you want to see more videos such as this one with search recommendations you name it leave me a comment below and smash a like on this video and that lets me know that you guys are interested and you want to see more content going in this direction also make sure you subscribe to the channel in any case i really hope you enjoyed this video thank you so much for watching let me know what you think below and i will talk to you in a future video

Channel: James NoCode

Views: 13,469

Keywords: algolia, flutterflow, flutterflow tutorial, flutterflow tutorial for beginners, google firebase, firebase database, firebase cloud database, algolia tutorial for beginners, firebase firestore, firestore tutorial, nocode tutorial for beginners, nocode, nocode tutorials 2022

Id: F9UMJaiuHtE

Length: 22min 13sec (1333 seconds)

Published: Tue Jun 07 2022