Integrating Algolia into native apps with FlutterFlow

[Music] great well thanks so much chuck I appreciate it so in this session I want to talk about integrating algolia into native apps with flf flow and combining these two Services is particularly exciting because both algolia and flutter flow are designed to make app development and search design delightful and fast so this makes a good pair so my name is John I'm the head of education at flutter flow and in this session I want to do three things first I want to give you a quick 30 second intro into flutter and flutter flow then I want to show you the integration and third finally I want to publicly commit a mortal devell sin in front of your eyes so let's do this first flutter so flutter is a framework for building cross-platform native mobile and web apps and it works Works slightly different from other crossplatform Technologies because it doesn't produce platform components like UI kit on iOS but it compiles to machine code so arm Intel and JavaScript for web now flutter flow is a developer tool that helps you to build flutter apps 10 times as fast and just like flutter is slightly different from other framework so flutter flow is different from other low code Builders because of a fundamental software philosophy difference and that is that our visual layer is designed to be a low abstraction so what I mean is that when you drag on let's say a column into your app and you inspect the code and I'll show that to you in a second it's just a native flutter column or you drag on a container and it's just a native flutter Co container and so there's no things in the app that's like move this to the right or here's a section because all we're doing is exposing native flutter technology okay so that's flutter and flutter flow so let's jump over and show this integration so here we are and what I want to do in this demo is integrate search into an Airbnb is app so we've got a basic scaffold of the UI here I've already wired up Firebase to this project and so you can see just the basic properties that we have here and so this is it this is what all we need to get started with the integration so we're going to jump over to Firebase here and they've got these extensions which are just prepackaged solutions for all sorts of things that you're going to need and there's this great algolia extension okay so you have to go through here and there are just a few uh resources that you need to enable in Google Cloud platform but because Firebase runs on Google Cloud platform you can just uh do one click enables right here and you're all good okay so here are the few configurations that we need to set up first is our collection path and I can show you that right here it's just this root properties collection so let's just put properties beautiful next we've got our indexable Fields so this gives us the option to tell algolia which fields we want indexed in algolia that then you can in algolia of course you can configure do you want these do you want these returned we're going to leave this blank because we want all of our Fields indexed next we've got a for sync option which is designed to mitigate race conditions so it'll do an additional read to uh ensure data Purity we're just going to leave that for now next we've got an algolia index name I've already got an algolia project set up and the index is called properties next only a few things left here we need our algolia application ID and you can grab that from your uh settings down here but uh if you uh uh you can just grab it also here from the URL which is what we are going to do beautiful next we need our API key so let's come into our settings here and our API keys and I've got a key set up here with the uh proper permissions yes I'm exposing this this is a right key so be careful with this I like to live my life on the edge and see who can get their first me deleting my key after the session or the dosers so stay tuned uh next we've got a transform function so what you can do is you can set up a cloud function in Firebase if you want to do some transformation on your data before it gets to algolia we're going to leave that blank two more options we've got the option to fully index our current uh documents here so if you already have a collection and you're integrating it in then you want to do this and so we want to do yes and then finally we've got our col functions location I don't want to dox myself but let's just say I'm somewhere near Iowa and that's it you just install your um extension and then uh you'll be ready so now we just need to hook up algolia in here so we can just come down to our settings and enable algolia and we just put those two uh things back in here so application ID search API key and if you have multiple collections you just enable it and you're ready to do the binding in the UI okay so I've got this list view set up this is a um a very performant widget in flutter that's meant to uh have many many children because it only loads and paint the widgets that are on the screen and so in this third tab over here we've got the option to bind some sort of backend query and so we've got this algolia search option we just select our collection our search term we don't want to hardcode this of course we want it from a variable so then we come in here and open this set for from variable this is our Dynamic binding menu so that you can bind anything or do a transformation prior to a binding everything that you would sort of expect and we want to uh bind it to our text field so that's a widget State it's this query right here and we're going to do one other thing we're just going to add in our default value when the page loads to Star so that we can load the whole collection that's just telling us that we're going to generate all these uh children and that's it so we've got that binding on our list View now we need to bind our individual Fields so let's come over to our title and once again we've got our Dynamic binding menu right here and here we can see now we've got this algolia properties document so now we're not binding to Firebase anymore we're binding to algolia representation of that data and it's everything that we would expect so there's our title and we've just got a concatenation here so we're going to add in that uh bedrooms integer beautiful I'm not going to go through all the bindings right here uh because uh it's a pretty standard Fair we're just going to take a look at this project pulling out the beef wellington already pre-made there it is so maybe you just want to search for uh something in Brooklyn and we've got a comfy Brooklyn property right here beautiful that's how easy it is to set up but you might be thinking two things one okay that's cool but algolia is a very rich SE Arch experience can we integrate any more advanced features into algolia and two you promised us a public mortal devil sin and the answer is yes to both of those and that is we integrated algolia very early on in our product because we knew how important it is to have these very rich search experiences so we just haven't had the time yet to upgrade our implementation but that's okay because because for all of these other uh needs we have a custom code module and it gets even better because uh earlier a few months ago alol algolia uh released their pubd package that allows for this great integration now pubd is just a package repository with um nearly 40,000 packages just like npm or piie and so you can come down here and we've got this this beautiful algolia search package that we can use in our app for advanced functionality okay so let's build this so I've got this app here and for this Advanced functionality what I want to do is I want to give some fating and filter capabilities so I want the user to be able to click on this icon and show a bottom sheet I got that component right here and just do this sort of filtering that we've all come to love and expect okay so how are we going to do this well we're going to just get a uh Global Json uh variable right here called action res and so anytime we make a query to algolia we're going to write to that and then we have that Bound in our UI to this same list view now so now it's bound not to a backend query but to a variable that we've set up okay great so let's take a look at this code so here in our custom code we split it up into functions widgets and a and that's because we want our custom code to not just be sort of a black box that you run but deeply and elegantly integrated into the developer experience so down here we have our custom actions which is what we're going to use now custom actions are just blocks of code that you can Define that gets executed on any type of action that you want so if you just come in here and in this second menu right here we've got our action flow editor and you've got the trigger that you set up and then you define the logic down here okay so we're going to need two queries one when the page loads just to show that original snapshot of the data and then any sort of filter action okay so let's set up that first one first uh here right down here we got our algolia um query all we set up our return type we've got our pubs speec dependencies which is that algolia package and then we just write it here it's very simple we initialize our client and we're waiting the response from whatever index you want here's our properties and then we're just returning the Json okay so then we need to bind this code block and we want this bound when the page loads so here we've got it on the page load and we are just calling that action right here once we get that response then we just write it to that variable here but of course we don't want everything from the response at least for our use case right now so we're Jason pass down into just the hits beautiful and then of course that's already Bound in the UI okay but we're here for the more advanced stuff right okay so when the user clicks on this icon we are going to execute this logic just showing a bottom sheet which is right here then we've got our different filtering options so we've got our bedrooms and beds Etc and so let's look at that code so here we've got our algolia query it's a similar thing but here now we've got more arguments we're initializing our client and then we're just calling the search for hits method with all of our arguments and returning that Jason okay beautiful so let's look at how this is wired up so let's say we've got our bedrooms here let's come down some housekeeping up there and then we just have our query right here with all of our parameters and we're writing it to that Json object once again that's already been bound and that's it so let's just take a look at this so maybe we want uh nothing less than seven rooms and perhaps uh let's see a private room down there yeah that sounds good and there we go this is the kind of house that I regularly stay in seven bedrooms beautiful okay but there's one other thing so maybe you want to interact with algolia through their rest API because they've got this beautiful rest API well you can do that too so let's come in here and we've got this API module over here and I've got all of my API definitions in a Swagger file right here so I can just upload that and like that boom I've got that group and I've got all of my end points so that's it that's how to integrate three different ways to integrate algolia into your flutter flow project I'd love for you to check this out at flutter flow.io I.O you can reach out to me and uh I really appreciate it let me send it back to you Chuck thanks so much John I think you've definitely made some new flutter flutter flow fans wow uh today um you can you can put that on t-shirt flutter flow fans but don't try and say it too loud um so I I am always impressed to see the kind of the combination of the nice UI and then the dart code directly underneath it the way it kind of all fits together um of course my first question to you is you know you mentioned that the Alo integration was an early one got the kind of the meat and potatoes widgets in there are we going to see more widgets in the future yes yes absolutely we're um we're releasing uh uh very frequently our Dev team is pretty amazing and um we've got uh algolia our our sort of V2 integration is on the road map so we're excited to get to that awesome we had a a question around uh cicd uh does flutter flow actually manage the building of the application itself or are there cicd components or automations to it um I'm sorry I I didn't hear that can you say that again sure so uh there I think someone is excited about integrating flutter flow into their entire sort of development Pipeline and they were curious does does flutter flow handle building the application as well yes so a couple things um one is we have uh uh Native integration with code magic show so you can deploy directly to App Store Play Store um and you can publish web app uh we also have an integration with GitHub so you can just push your projects over there which is a common task especially for our Enterprise customers um that uh it'll be part of their cicd pipeline to push to GitHub and if they need additional features or if they want to ship in some other way that's how they do it cool this isn't this isn't a question I think it's more of a comment but oh Swagger integration is super cool so I think you know building on top of Standards obviously always like you know it's nice to have that that cool friendly UI but it's nice to know that the stuff underneath it is legit as well yeah we we try to the way we describe it is you know for for let's say like 80% of um the developers work is fairly standard stuff you know so like API definitions and libraries and stuff like that and so we're like hey let us take care of that 80% so developers can get back to that 20% of of real customized complex code um and so let us let us work with your workflow like that yeah yeah and and I mean that's kind of the the core of all of this is we're trying to take some of the load off you guys in gals and and make things a little bit easier for you all and I think like flutter flow great example of that I think the the Firebase integration that you were using that's honestly one of our most popular Integrations on the exchange although I'm sure flutter flow is going to start jumping up those ranks now that we've uh We've promoted it here and uh and yeah just all of these sort of pieces you know we we want to make sure that not only are they easy for you to use but they fit together nicely as well yeah yeah absolutely cool well thank you so much for joining us today John we really appreciate it do you want to give that uh URL one last time before you go yeah absolutely that's flutter flow.io uh you can sign up for a free account and get uh everything that we saw here uh you can test it out and we'd love to uh love to hear your reaction awesome thanks again John thanks so much chuck

Channel: Algolia

Views: 2,950

Keywords:

Id: jtdhOdCCzk8

Length: 16min 32sec (992 seconds)

Published: Thu Sep 28 2023