Build A Production Ready App with NoCode, Algolia and Supabase (COMPREHENSIVE TUTORIAL)

in today's comprehensive app building tutorial we're going to be building a complex app with no code additionally we're going to be using things like super base for backend as well as algolia for lightning fast search so make sure you watch this tutorial until the end and let me know if you have any questions or comments below now before we get started as always the app that I'm about to build in this video will be available to view and door clone from my patreon page and to learn more about our amazing patreon community and its benefits check out the link in the description below the video now before we get going one of the first things that I always like to do is to create an architecture diagram now I like to spend some time doing this because the more time you spend doing this the less hassle and struggle you're going to experience later on so this is very very important and another thing that I want to point out is that you don't need to get this 100% right you want to get it around 80% there okay because there's always going to be a chance that you might modify it as you're building the app it's very very rare you're going to get this exactly how you want your end um you know app to look like all right so here is our diagram right now and we have here an e-commerce app using superbase and alol for search and so we're going to be using authentication we're going to be using super base authentication the user logs in and uh they're going to have a profile and they're also going to have order status or they they'll be able to change you know their user information uh things like that and also from this profile they'll be able to access order status as well so we can have this connection right there now in terms of the um the regular um uh stor flow the regular e-commerce stor flow uh they're going to see the homepage and from the homepage they can take various actions primarily they can go straight to the product detail view so they can click on the product that they see on the homepage somewhere and they can get information about that product or they can go to the category view so maybe they're browsing by category right they they're looking for a um you know like a a camera or a um some kind of an accessory right maybe a phone or a laptop there not quite sure which one exactly they're looking for a you know a specific type of product so they're going to have the category view uh the other option the third option is they can search for something okay so they're not going to the product view they're not going to the category view but they kind of know what they're looking for right maybe they're looking for like a new iPhone or a new Android or something like that so in that case they can just search and we're going to be using algolia for this which is the right choice because as you're going to see a little bit later in the video it's kind of tricky to do searching with superbase right now now when they get to the product detail page here uh they can do a bunch of things from the product detail page well first and foremost they can read about the product understand it uh and on the product detail page we're going to have a lot of information things like image uh product image description title uh reviews uh lots of information that that are going to be useful um to the buyer to the prospective buyer and here they can click on and learn about the product in terms of review so see what other people have left and uh you know rated the product and in terms of the review this is going to be two things right there's going to be a rating one 125 as well as the actual review which is going to be text now here I have reviews as a separate thing and we might do it as a separate page or this could be as part of the product detail page we'll see when we get to this um part of the app building process but regardless what we decide in terms of um displaying the reviews uh the customer will be able to leave a review okay and that's going to be maybe in line or that's going to be as a separate popup or a separate page now as the customer is browsing the store they'll probably want to purchase something and before they do that they're going to be adding an item to the shopping cart so they're going to have this after card functionality and we are going to display you know how many items the customer has right on the page on the header as the customer is browsing from page to page we're also going to have the view card option so there's going to be a separate page or maybe a popup that's going to display the shopping card functionality allowing the customer to maybe increase the quantity of a particular product or delete the product uh or just you know mainly view what they have in the shopping cart and they'll be able to do a checkout so the next logical step is to look at uh the shopping cart you know manage it modify it here and there and then do a checkout okay now on this checkout page they'll be able to see you know the products that they are uh purchasing about the purchase maybe some other information their address things like that payment method and then they're going to say okay I'd like to buy these and they're going to be redirected to the confirmation page so that is our kind of rough um eCommerce app flow and just like I said in the beginning I do reserve the right to modify it and in fact we might be modifying it adding couple of things here you know changing couple of things here and there it's all a natural process of building an app now the next thing I want to talk about is the database schema so we're going to be using superbase for this which is an awesome uh database back end that offers lots of awesome functionality things like authentication database storage uh Edge functions and a bunch of other things that's going to come and play uh when we're going to be building this app now when it comes to the actual database uh where superbase is actually storing this data superbase uses a relational database and so what this means is that you have to align your data in entities and each entity needs its own table and so these are our tables here and the way that this works is that I have here a user info table which is a one toone relationship to a user table so there's a user table that's built in uh into superbase and you never really want to mess with that table that table has like user email and user ID and it has limited number of information about the user so if you want to add additional information about the user you need to create another table and create a link to that table so every record in this user info table is going to have a onetoone relationship to the corresponding record in the in the original uh authentication user table uh the next thing that we have is we have the orders table okay and so this is going to be a on to many relationship because one user can have many orders and we have this order table and each order can have multiple items as well so you know if the user has a shopping cart they're buying five things and that's all part of one order well that order has multiple order items okay so we have orders and order items now in terms of the store we are going to be storing categories uh categories a category can have multiple products and you know a product can have multiple reviews and so this is our initial database schema and you're probably going to see this schema evolve over the app building process which is a very very normal thing that happens all the time all right the next thing that we need to do is we need to create our for database schema okay so here's our diagram and let's go ahead and do that so here I am loged into super base and so I'm going to pick my organization right here I'm going to click on all projects and I'm going to choose one of my projects here now this particular project has a bunch of tables and Views and so what we're going to do is we're going to create our tables and Views with a prefix and the prefix we're going to be using is E on underscore which stands for eCommerce so let's go ahead and take a look and see what kind of tables we need to create so the first thing we want to do is create this table user info because essentially that's going to be an extension of the user table okay so I'm going to come here and I'm going to create a new table I'm going to say e user info I'm going to scroll down and the first thing that we need to do is we need to link it to the original table so I'm going to add a column and I'm going to say user ID and I'm going to give it a type which is uu ID which is that um type that's used for users next you want to click here and you want to select that original authentication table which is in this o schema and you can select users and you want to make sure that it's selected on ID here now what you want to do is you want to add columns that represent this extra information that you know really is the whole point we're creating this table and right now let's go ahead and create a field called username that we're going to be displaying uh throughout the site so instead of displaying their actual name or their email we might want to display username and we also might want to be you know using this username as uh the um the name where they leave reviews right so when they leave reviews and we look at reviews we don't want to display their actual email or their real name so this is kind of their you know handle here right right their their nickname if you will and the type is going to be text right here and we're going to click save and what we just did is we created an extension of the users table a oneto one relationship to the original table and right now we just have one field called username and the beauty of this setup is that we can add additional Fields later on and we'll be able to easily access them just as easy as we can access a username okay so this table is creating and we've just created here the next thing that we want to do is we want to create maybe the categories table let's start with categories products and reviews and then work our way down here so the next thing we want to do is create categories now categories is a top level table it's not linked to anything it's not linked to users it's not you know it's not linked to anything it's not on the many side of any relationship it's on the one side because you know you're going to have multiple products but the product is going to be linked link to the categories not the other way around so I'm going to say new table I'm going to say e categories and we are going to add a column and let's say the first thing we want to do is the name the category name this is going to be text and maybe a description I'm just going to say desk which is how I abbreviate a description this is going to be text as well and right now it's fine maybe later on we'll do something else okay right now um this is uh sufficient and we are going to save this table it's creating it right now next let's go ahead and create products which is pretty much the star of the show if you will followed by reviews so come back here this is adding right here and it has just been created EC categories is done let's go ahead and create a new table called e products and here we want to create a link to categories cuz product is no longer products is no longer a top level uh table it needs to be linked to a category okay and so we're going to say category ID select this in a go ahead and fetch our e categories ID hit save okay next is product name and a product description okay so name is text and description is text also the price maybe price and the price is going to be numeric right we're going to be using numeric for Price what else do we need image image is going to be the URL and so this is going to be text again uh let's see so we have image we have the the title the name description uh that product might have reviews but we don't have the reviews table yet we're going to do that later and then link them together uh so I think that's it we'll come back to it if we need to do something else hit save and let's go ahead and create it right now all right table e products is good to go and this table has been created next thing let's create this reviews table which is going to have a one to menu relationship to products it's going to be on the manyu side come back here click new table let's do e- reviews and the review uh each individual review is actually two Fields it's the rating and the actual review but before that we need to link it to an individual product reviews cannot exist in a in a vacuum okay so this is going to be product ID int 8 come back here e products okay hit save and now we can create the individual review uh review Fields so first we have rating which is going to be numeric and then we're going to have the actual review which is going to be text okay so that's it I think that's it well we can always come back to it if we realize we miss something and that is creating being created right now all right reviews has been created let's go back to our schema let's go ahead and create orders and Order items okay let's do that real quick new table e orders now for the orders the only thing we really need to link is to the user okay we are not going to be linking it to the individual products because that's going to be the job of order items which is what we're going to be creating next and so let's go ahead and create a user ID you know who is who created this this order right it's it's a specific user did that so we're going to link it not to the original user table but to that you know that extra table that we created that that auxiliary table that user info and so we're going to link it by in8 we're going to come back here and we are going to do e user info okay we're going to link it right here and what else do we need for orders well not much we have created date we have the user um I think that's enough for now maybe some notes right maybe notes is a good one right cuz when you place an order maybe these are going to be notes for the delivery right leave the box at the front door or non contact order you know things like that so I'm just going to put notes in here and this is going to be text okay and and I think we're done let's go ahead and create this table here all right and this table has been created and last but not least we need to create order items okay and this is going to hold the individual products in that order okay so let's go ahead and do that right now new table e order items okay so we have ID created at the first thing that we need to do is we need to link it to a specific order right like you know this specific item needs to be part of an order right so we're going to say order ID and this is going to be int 8 and we're going to link it to our e orders right here the next thing that we want to do is we want to create the the product ID right because a product exists on the site exists in the catalog but the minute that it has been ordered it's now it's an order item okay so we're going to say product ID and we are going to link it to the products table because we want to know you know what what is the actual product that the person has ordered this is going to be in8 we're going to come back here and we're going to select e products hit save okay and I think that's about it and the way this is going to work remember we have a relational database is that we are going to have let's say the person uh they created one order and inside the order they have items so let's say they're buying you know a camera they're buying a tripod and they're buying like an SD card for the camera and so we're going to create one order in the app but the order items are going to be three items essentially three rows where the order ID is going to be the same but the product ID is going to be different these are going to be the product IDs for the products okay so that is kind of what we have yeah looks good and that table is being created all right so now we have categories we have products we have reviews then on the other side we have user info we have orders for that user and we have order items okay so we have like what Six Tables here which is exactly what we have in this uh database schema so this point we've covered the apps architecture and we also created the schema right here okay so the next thing that we need to do is we need to populate our database with some sample data so that when we start building the app we can at least display the data and make sure that everything kind of fits in together so the tables that I want to populate right now are these ones mainly so things like categories products and maybe reviews later on and I also want to populate at least one or two records here in this user info table which if you recall is a table that's going to have additional user information that is not being stored in the original table all right so here's our database and if we go into the O schema here and we find the user table you're going to see this user table right here this is my record here we have a bunch of users there but this is the record that I'm going to be logging in as so let's go back to our public schema here and let's go ahead and create a user info record so that we can display the additional user information because if you remember we're not going to be using that user table uh in our app we're going to be using only this user info table okay so I'm going to insert a row right here we can skip this for the user ID I'm going to click here and I'm going to find my record this is my record right here a Zer if we scroll over you can see it's James james.com so this is the record here and right now this table Only Stores the username record Like I said before you can add additional fields and they're going to be uh stored on the record as well but right now I think username is is an op and for the username I'm going to put J no code and I'm going to hit save all right so now we have a record in this euser info that's linked to my username so that means we can at least work with my username in the various logic uh once we start building the app the next thing that I want to do is I want to create some dummy data for categories and products okay so we're going to go and find c atories right here and let's create a couple of dummy records so I'm going to insert a row here and let's say a category is video cameras and description uh the best video cameras money can buy okay hit save and let's go ahead and add another record here uh this is going to be microphones the best microphones for recording and let's go ahead and add another record just to make it three record insert row and I'm going to call it tripods and the description is highest quality tripods so that you can have the St the most stable videos okay so something like this hit save all right so now we have three categories the next thing I want to do is I want to create three products and Link them to some of the categories okay insert a row let's go ahead and add a product for each so I'm going to add a video camera and let's say this is Sony A6 6 700 very versatile video camera for making videos and taking pictures we also need the price and the image so let's go ahead and do the price so let's say the price is6 $700 and the images I'm going to add later let's add another record and this is going to be a microphone and I'm going to put something like Road wireless mic microphone the most portable microphone you can buy price let's say 150 image we're going to add later and last but not least this is going to be a tripod okay so this is going to be a man froto tripod the best tripod for your photos and videos okay price is 100 bucks all right so now we have three records each one being in its own category so that way we can test multiple categories and so we've created dummy data for these three tables here which is enough to get us started and kind of start building the app which is what we're going to be doing next all right the next thing that I want to do is I want to start building the app and connecting it to our superbase database so here I am in flutter flow let's go ahead and create a new app this is going to be Ecom blank app here and we're not going to be using fire base on select that and here we are so let's go ahead and configure our super base settings Integrations super base enable super base we need an API URL and an a non key and you can get that by going back to your database project settings apis here's the URL copy that paste it right here go back here copy a non key paste it right here hit get schema and now we are seeing all the tables and all the views now remember the only ones that we're going to be using for this project are the tables and the views that have e underscore as the first couple of characters right so they need to be prepended by eore okay so as you can see we see all the tables and you can kind of click on them and see the schema for each of the tables so we have e user info we have products we have categories everything is here now the next thing that you want to do is you want to turn on authentication okay so you can head over here and you can click on Authentication enable authentication we want to select super base now we need an entry page and we need a logged in page so the logged in page is the homepage but the entry page is a page we haven't uh built yet so we're going to go back to UI Builder add a page right here new page and we're going to click on all and here you have a bunch of login pages so the page I typically work with is this page but you can use any page that you want so we're going to say use my theme call it login create page and now we have a login page that we can use so we can go back to settings authentication super base and set that page as a login page okay so now we have these Pages configured now when we go to our app we have some project issues and that typically happens whenever you use some of the templates because they assume that you have some other things turned on when you don't so in this case I'm going to remove all of this third party stuff because we're only going to be using uh user uh user login and password so like email and password so I'm going to delete that next I'm going to click on login as well and I'm going to delete this right here so delete this button right here and we don't really need that as well okay now we have one error let's go ahead and double check that and the reason we have this error is because we have a small bug in the template that flutter flow provided okay so this bug will probably be fixed soon but the issue here is when you're creating an account you need an email but you also need a confirm password field so you need a couple of these password Fields so if you select this password field we're going to duplicate it and we're going to label this one password to which is the confirmation password and then if we go back here select this here we can now set password to here and we should have one error left and Google is not supported and because we need to select email here okay and email is email password is password password two is password two okay so now we don't have any issues now we're good to go and we can actually run our app and we should be able to log in except that you know once the person logs in they're going to see this empty page okay so let's go ahead and build out this page first and then we're going to run our app and make sure everything works now this page here is going to be our category space so when the user logs in they're going to see a grid of different categories and then they'll be able to click on the category go to the next page and see a grid of products okay so let's go ahead and yeah this could be homepage I'm just going to call it homepage and I'm just going to call this I'm going to say categories a page that's going to display a list of categories in a grid like a layout okay so I'm going to come in here and I'm going to add a grid view here now we have a grid view so the next thing you want to do is you want to configure it there's many things that you can configure this grid view with so for instance a is vertical you can make it horizontal but vertical should suffice and and we have a cross axis count this is how many how many items are going to be displayed on the cross axis so remember the axis is vertical that that means the cross axis is horizontal which is kind of what we have and here you you have various spacing that's absolutely fine but the actual categories are going to be displayed inside this grid so we need to add a container and that container is going to display things like the image the name of the category stuff like that so we have a container here and inside this container I'm going to add a column and this column is going to have uh the fields the widgets that are going to be displaying the content in this case this is going to have an image and it's going to have text okay so image and text and we're going to align it all properly first you want to take a look at the container the container typically has a width and a height you can remove that because we don't really need that uh if the container does not have a defined with and height it's going to Define itself based on its children okay so in this case that's exactly what we want now for the image let's make it I don't know 100 by 100 let's see how that looks okay that looks pretty cool actually right there's no overflow and then we have the name of the category here actually that looks really good the another thing that you can do is you can give some padding to The Container to make it a little bit more aesthetically pleasing and as you can see now the image is taking up a lot of space so let's go ahead and make it just a tad smaller here so let's make it let's say 90 by 90 or maybe even 70 by 70 okay so something like this we'll see how everything looks uh in a second okay so now we have this grid view with this child element that's you know this uh layout here container column image and text the next thing you want to do is you want to feed this grid view with your data in this case this is going to be the category so we're going to select grid view come over here and we're going to say back in query super base query and we're going to select e categories here list of rows no filter and we can do watering let's do watering by category name and here you want to do increasing so A to Z okay confirm confirm and now as you can see there's this little repeating um behavior that you see that means that now this um list view or grid view is uh backed by data next thing you want to do is you want to make sure that you're actually displaying the images so let's go ahead ahead and change the text first because we don't have any images yet click on the text e e categories row select name here and at least the name is going to show up we still need to upload the images but that's uh fairly easy to do okay that looks pretty good let's go ahead and run this app and let's log in and let's make sure that everything kind of works together so I'm going to uh hit the uh the Run button here and we're going to wait for our environment to load okay so you need to wait a couple of minutes initially and then later on it's going to be instant all right so here's our app and as you can see we are at the create account screen we can scroll down and click on login and try to log in with that account that I had there so I'm going to type James james.com and see if I can log in now when we run the app we're not seeing any data for categories and typically when that happens and you know you have data the issue is most likely a security issue right so maybe you didn't set the right permissions if you don't have the right policies or something is just not there so let's go ahead and go into super base right here and check out our table and if we select the table that we're looking at we see that it says here no active RLS policy so you want to select this and we have RLS enabled but we don't have any policies so we need to create a new policy full customization and I'm just going to call it allow all I'm going to say all and here I'm going to put true okay now obviously this is just for the testing phase is when you launch your app to your users you want to tweak these policies so that you're only you know allowing the users to access the data that they should be able to access but for now this is going to suffice we're going to click review hit save and now we have a policy that allow us access to everybody and here you can edit it if you want and as you can see it says true here and this allows everything right defaults to all okay so now what we want to do is we can go back to our app and we can reload it and hopefully it's going to display the categories and now as you can see we are seeing the categories and they are being displayed in this grid pattern here we're seeing the names uh we are not seeing the images because we don't have the images in the database so let's go ahead and fix this right now so what we want to do is we want to go back into our database tables categories and here in this categories table what we can do is we can add a new column images right so we're just going to say image we don't need a description we don't need any of that the data type is going to be text because we're going to be passing a URL okay here we're going to say save and now we can find the images for each of these categories and add them here now I went ahead look for the images found the images and downloaded them and now what we need to do is we need to upload them so we're going to be using the storage here in order to save the images I'm going to create a new bucket I'm just going to call it B2 here I'm just going to set it as a public bucket for now hit save and here we can upload the images and access them on our app all right I went ahead and uploaded the images here and if you click it you can see the actual image so this is our camera category image this is microphone and this is a tripod Right Here and Now what we can do is we can configure the URLs for these images in our database so here we can get the URL we copied the UR URL and we are going to go ahead and modify our category records to display the uh URL of the category image so we're going to come here and so here we have a tripod I'm going to paste tripod right here for the microphone I'm going to go to the microphone get URL copy the URL microphone and video camera get URL video camera okay so now we have the images and now we can go back to our app and make sure that we are actually pulling in the images but before we can do that we can go back to our schema super base refresh the schema and now if we go into categories we see the image right here go back to the UI editor and now for the image we can pull it from the database okay so we have image type is network and the path click here e images e categories image okay and that's going to pull the image so let's go ahead and reload the app see if the images get displayed all right and there you have it so now the images are showing up as well as the names okay we can still kind of fix it up a little bit and we're going to do that later right now I just want to make sure that the functionality is on point and then later on we can kind of tweak the app and do some minor UI refreshes if you will all right so the next thing that I want to do is I want to create another another screen that's going to display the products for the specific category here and this is going to look exactly like we have it here except it's going to display the product so now we can go back here and this homepage I'm just going to duplicate it and I'm going to say product list okay so now we have a product list I'm just going to say products and this right here it's going to pull up the products here okay so this grid view come by here at it back in query I'm just going to do products okay so except we're going to be filtering them by the category okay so I'm going to hit confirm for now and once we click on it it should display the products and before we actually create the category filter let's go ahead and create the actual product list let's make sure it works go back to our homepage and for the container on the container level I'm going to do navigation so in fact I can just add an action navigate to product list and we're going to be passing a parameter and the parameter is going to be the category ID okay so we're going to come in here it's going to be in the integer we're going to put an integer and this is going to be category ID required confirm and we're going to pass a category ID from the category row which is this ID right here so it's going to pass the ID and then we're going to filter by that category ID to get the right products now this redirects it there and then for the products here for the product list we are just pulling and displaying all the products and let's create a filter might as well right so we're going to say category ID is equal to the parameter that we're passing this category ID right here and we can do an order by name in increase one and the next thing I want to do is I want to configure this thing here so the image I think it's the same thing if I'm not mistaken cuz we're not getting an error so it's still name as you know we had the category name this is product name and I believe it's yeah it's the same thing products name and image so we have the same thing except we don't have the product images but we're going to fix that a little bit later but let's go ahead and run this and see if the product list displays correctly all right here is our app so if we click let's say on tripod we are redirected into the product screen but once again we're not seeing anything and you can probably guess why that's happening and the reason that's happening is because the permissions we don't have the policy attached to that table so let's go back to super base and let's click on e products and we have RLS enabled but we don't have an RLS policy and you need an RLS policy so we're going to click here new policy full allow all all and then you want to put true here review save policy let's go ahead and reload this and hopefully it's going to work all right tripods click here and it says here unexpected null value and the reason we're seeing that null value is probably because of the image because the image has a null value so if we go back to our data here let's go into our super base table e products we have image set as null and that's why you know this is a problem because it's null it's not empty it's not set to anything it's null and flut flow does not know how to display a null image so that's why you're getting an error so let's go ahead and add the images here so this was tripod so I'm going to go back here find a tripod I'm just going to reuse the image to simplify and I'm going to put it in here save changes and let's do the same thing for the microphone and the camera so this is microphone get URL uh this is the microphone right here as well as the camera and get URL camera all right so now we have that set up let's go ahead and see if it works let's go ahead and reload it and hopefully things are going to be okay all right there's the app tripods and we are seeing the tripod except there's an overflow issue and the reason there's an overflow issue is because we have a lot of text here so we need to fix this but if you go to microphones again an overflow issue we're going to fix that camera there's no overflow issue so at least you're seeing the products correctly now there's a couple of things that I want to do on that products page so this product list I want to display the actual name of the category right so for instance I want to say products and then the name of the category now there's a couple of ways of doing it uh one of the ways is we can query the category by the ID on this page so we're going to have two queries we're going to query the products for a specific category and we're going to query the actual categories off for that ID but another way of doing it this is a simpler way in my opinion is by passing the category name from this page here because on this page we already discovered it we already query it for it so we can pass it very easily and so what I'm going to do here is I'm going to go to my action here and I'm going to pass another parameter this is going to be the category name so I'm going to say category name because we are already passing the category ID so why not pass the name as well so I'm going to come in here set as a string confirm and then I'm going to pass it here so category name category name right here name name okay so now we can pass it we have ID and we have the name we can pass other things if you want later on but right now this should suffice and now we can click here and we can do a combine combine text and products 4 and then add this and we can do category name confirm and now it's going to say cap products for Whatever video cameras or in fact we can do in whatever all right so now we can reload this again and not only are we going to be displaying the right products filtered by the category ID but we also are going to be uh displaying the category name as well which I think is going to be useful to our users so I'm going to click on this products for tripods or in fact we can just say microphones you know just keep it very simple in fact we can just remove this and that's it reload this here here and see how that looks all right tripods tripods and we have a tripod microphones microphones we have microphones we should probably add a back button here and fix the Overflow all right so if you click on AB bar right here you want to enable show default button and when you do that you're going to have this back button right here now the next thing you want to do is you want to fix the text from overflowing there are a couple of ways of doing it the first thing you want to do is you want to decrease the font size okay you want to make it a little bit smaller and that's going to fix a lot of the issues another thing that you can do is you can specify Max characters allowed so let's say you want let's say 10 characters and there's also a text overflow replacement this is the behavior that's going to take place when you have uh you know beyond the maximum allowed characters so we're going to say here and we want to do ellipses here or you can do cut off okay it's really up to you let's go ahead and reload the app and see how it looks all right there's the app click on tripods and now you see it's a little bit better okay there's still an issue with overflowing but at least we're not getting that error anymore right if you go into microphones you see now it understands the limit and it displays it correctly another thing that you can do is you can enable expansion here and or increase the number of characters allowed so let's say I put 30 and I enable expansion that that should allow all the characters to be displayed it should not clip things anymore let's go ahead and reload our app all right there is the app you see now it's displaying the whole thing there it is now it's displaying the whole thing and this has been displaying the whole thing so you see everything is fine of course we can Center it as well and you can do that by wrapping it in a row so we're going to wrap this in a row and then you can Center the row and that's going to Center below let's see how that looks all right there is the app and if you click on it you see it's nicely centered now okay looks really good to me in fact all right so now we have categories we have the products as well let's go ahead and work on the next steps next let's go ahead and work on the product detail view okay this is going to be the screen that's going to display the product information so images name description add to card buy button etc etc and in this case case let's go ahead and try to find a template instead of uh starting from scratch if you go into content you're going to see some interesting template so I've been using this template previously in fact let's use it here and I'm going to say product detail all right so now we have a product detail right here and this is going to display the product product image product name uh and some maybe description information and maybe later we're also going to display uh ways of um leaving reviews and things like that and this could be you know buy now buy immediately or add to card so we're GNA have maybe two buttons here okay so the first thing that we need to do is we need to load the product information okay and we can do that by using the parameter that we're going to be passing so the parameter is going to be product ID this is going to be an integer it's required confirm okay so now we have the parameter we can start um getting the data and so you want to go to the top level right here you want to do super base query e products filter ID of the product equals to the parameter right this parameter product ID and that's it so now we're going to get one product in fact we don't want to list of rows we just want single row okay and in fact that should always be single row because that product ID is unique right it's the priority here and which means it's going to be unique across all records in that specific table all right so now now we have this here let's go ahead and fill it in let me take a look at this AB bar right here and for the ab bar let's set it to the primary color here so that it kind of looks like the other pages okay this should be white let's scroll down primary text I'm going to make it uh White and this should be white as well this is secondary background okay and for the class details I'm going to say product details product details and here let's go ahead and display the image so scroll down path and e products row this is the name of the product e products name and let's go ahead and delete this we don't really need that this is going to be the description product desk description here we have some tagline I'm not really sure I need that maybe we'll use it later just going to leave that and here we have a bunch of users so we don't really need that for sure and in fact for this we can use it for reviews okay we're going to be doing reviews in order to list the reviews so display review data we need to create another view which we don't have yet so we're going to do that in just a second but right now I just want to focus on product stuff so this button right here I'm going to wrap it in a row and I'm going to duplicate it I'm going to create two buttons because I want to have a flow where you buy it by now and add to cards so let's make it a little bit smaller okay that looks better this one also 150 actually and yeah add to C maybe a little bit bigger this is a roll let's space it out okay that looks bad I don't know if this is ideal but for now this is going to suffice and let's go back to product list and container and let's do a navigation add an action navigate to product detail product ID product ID is going to be our product ID which is right here okay so now we have the product ID we're passing it and we are going to be you know displaying all this information here let's go ahead and run the app and see if it works as expected all right there's the app let's have on the tripod I have this man froto tripod click here and here we are product details man froto tripod we have the image the best tripod we have a description maybe a little bit of padding between the name and the description then we are going to have reviews here so I'm going to change that buy now and add to card let's go ahead and fix it up just a tad tad bit okay okay so something like this this is going to be reviews so the way the reviews are going to look well it's just going to be like on Amazon so I'm thinking something like um you know this is going to be like maybe 4.5 reviews and then they can click on it and either they're going to go to another page read the reviews or they are going to have a popup or something like this but maybe something like this let's go ahead and wrap it in a row let's Center it make it a little bit bigger Center it nicely let's go ahead and make it a little bit bigger 16 maybe all right looks pretty good okay that looks pretty clean so now we have a product detail page that works perfectly now I was looking at this detail page and I realize that I do want to display the reviews in line okay so not all the reviews obviously they're like you know tens or hundreds for reviews I want to display maybe the last three in line here and the way that we're going to be doing is we're going to have a little inline list here that's going to pull up the review for a specific product now before we can do that we need to have some data in our reviews table so we're going to go back to super base click on e- reviews and we're going to create three reviews for a specific product so the product that we're looking at is this man froto tripod so we're going to go back here and create three reviews remember we're working in threes three categor three products it's a nice way to kind of standardize your data so we're going to select the product and we're going to work with this manf FR tripod the rating is five let's say the first review really liked it awesome tripod loved it let's go ahead and save this and the next review here tripod rating is four great but pricey okay so the customer liked it but you know it was a little pricey next one this tripod here rating is two so this person didn't like it um nothing special many other tripods are better so here she wasn't too happy about this particular product it's save and so now we have three reviews for the same product product ID 3 542 ratings and some reviews here and before we go back to flut oflow let's create an RLS policy so we can actually pull this data so click here new policy full allow all all true review save policy now we'll be able to access the data go back into our app and so here we are going to be displaying the average rating of the reviews but below that we are going to display the last three reviews and so what I want to do is uh write this this row right here just above this row so we have a column here and so inside this column what I'm going to do is I'm going to add another list view so I'm going to say a list view right here and we're going to rearrange so let's go ahead and fix this up this padding right here and we have this list view let's bring it up here now let's bring the buttons okay and now we have this list view now I'm going to give it a name reviews list and this is going to display the review so I want to do a little bit of padding so this is not so so close to it right now we have a list and this list view is going to grab the data it's going to grab the super based data from that reviews table right so we have this e- reviews list of reviews and we're also going to do a limit so I want the limit of three and here what I want to do is I want to order by created at and I want to do in decreasing order so the first three are the last ones so we're going to do in decreasing order so that the first one is the newest one and then the date decreases confirm confirmed and now we have this list you and now let's go ahead and add some elements so I'm going to add a row and inside the row I'm going to add to text fields and let's go ahead and center the row and let's go ahead and add this one here this is going to be a rating reviews row rating and we can actually format it number format no formatting and this thing is going to be the actual reviews e reviews review okay so this is going to display the reviews and you know we can make it a little bit nicer so we can maybe uh wrap it in a container so something like this remove this remove that give it a little bit of nice padding kind of stands out and we can also do a box Shadow so something like this maybe I don't know let's see this container right here yeah and then what we can do is we can do reviews and on the reviews level we can do a little bit more padding okay so something like this okay let's give it a rounded Corner water radius I really like that 10 10 is a little 10 is too little let's make it a five is too little let's make it 10 okay now it looks a little bit better uh let's give it a little bit more padding inside this internal padding and the list okay that looks a little bit better okay so now we're getting the product and then we're getting the reviews for the product okay so let's go ahead and run this app and make sure that everything is being displayed correctly let's create a new session here all right so here's our app let's click on our tripods There's the Man froto and there you you have it so we need to make sure that this is um laid out correctly it's a little messy right now but at least we're displaying the right data now the next thing that I want to do is I want to make sure that this here is an aggregate all right so this should display the average and then it should display the number of reviews so it should say you know X reviews and then you know whatever is the average is okay so you know let's say we have three reviews in that case you know the average is 2 + 4 which is 6 Plus 511 ided by 3 which is 3 something and so that should be 3 something and out of three review so this should be an aggregate here now for us to display this aggregate we need to create another view right because this data here comes directly from the from the profile from the product table but because we're displaying reviews which is a separate table and any time you're displaying data that is gotten from you know two or more tables you need to create a view so we're going to go back into super base and we're going to create a special view that we're going to pull our data that is going to give us the uh the average of all the reviews as well as the count of the reviews basically the number of reviews so let's go back into super base here and SQL editor and let's go ahead and create a prompt for our super base AI to work off we're going to say uh Create A View to display all product data and the number of reviews and average rating for the product okay let's see if that works okay and this is what it came up with okay so it's using product reviews here and then it's getting the count of as review count and the rating as average rating and then it's doing a join products and reviews okay let's go ahead and accept the change let's go ahead and execute this success and let's see if the view gives us what we want okay and this is the view right here product reviews we need to rename it to make sure it's ecore which we're going to do in a second but now is the moment of truth let's click on it and see if we're getting the right data okay so as you can see we are getting the product so we're getting the right data and as you can see for the man for a tripod the review count is three and the average rating is 3.6 so just like just like what I was saying okay so this is perfect except we also need things like image and I think that's it we need everything we need everything for from the product table plus the review on the average rating and so what we need to do is we want to go back and modify the query so I'm going to go into definition copy this query come back to SQL and paste this thing and what I'm going to do is I'm going to say drop view this view right here copy this and I'm going to say create view ecore okay that's the first thing the next thing we need to do is we need to make sure that we're getting the image as well as the description okay so in this case I'm just going to add it manually this is going to be P image as product image I mean it's kind of easy to see what's happening here as well as pesk as product desk description okay uh looks good to me let's go ahead and run this and see if it works invalid the reason it's invalid cuz we forgot the semicolon to to terminate the first query okay success go back to our tables there's the eruct views and let's see how it looks looks okay so now we have the description and the image as well as the other information this is perfect but this means that we need to change the way that we're getting the data in flutter flow because we're no longer getting it from this table we're getting it from A View okay so now we need to go back into flut phone do a couple of things the first we need to go to settings super base refresh the schema here and you're going to see this uh eproduct reviews all right and now if you go to RWS you have eruct reviews which has all the data here so now let's go back into our UI come back here and for the product detail we need to change the query it's no longer e products it's e products reviews okay so the same filter everything is the same product ID is equal to yeah we have one filter that's all we need to do confirm and we need to fix a couple of things here and let's go ahead and fix this here so this is name here row product name this is product description and this here is the product image all right looks good to me except let's make sure that reviews is getting the is uh being done correctly it's not it doesn't have the filter because we need the filter right so we need to make sure that we're filtering the ID by the product ID equal to the parameter product ID here no that's incorrect it should not be the ID it should be product ID not the actual row ID equal to product ID here here confirm confirm all right let's go ahead and reload this uh and let's see if it's doing what we expect it to do all right there's the app click on tripods man froto and there we have it manfroto tripod the best tripod everything is here except we forgot this aggregation and our um uh disable is not being displayed correctly let's go ahead and get this aggregation working and then we'll see why the table is not being displayed correctly corly e reviews filter product ID equals to product ID yeah that should be fine order by created at decreasing okay let's fix this right here and let's go ahead and do combine sex the first thing we're going to do is this right here and this is going to be the average uh average rating okay okay that looks good confirm let's close our parentheses space and this is going to be the number of reviews okay okay and we're going to say products review row count no fur the changes and I'm just going to put reviews let's see if that works let's go ahead and reload this all right there's the app tripods man froto tripod and there we have it so everything is being displayed we need to make sure this decimal is correct that that looks kind of weird should just be 3.7 three reviews and we have the reviews we still need to align it correctly and we'll fix that in a second but right now I want to make sure that uh this average rating is being formatted correctly so we're doing a number format and let's do a decimal here and the decimal type is automatic confirm confirm let's see if that works all right tripods man froto there we have it so that looks a little bit better we still need to fix it but the next thing I want to fix is this thing right here let's go ahead and fix this here so we have a row here and this row is being centered and that's probably not the best in this case because it kind of throws off the text cuz we have a bunch of text now there's a couple of ways of fixing it one way of fixing it is by creating two columns there but a much easier way of fixing it is by simply removing this um Center alignment on the row and just doing a little bit of padding on the next element so something like 30 maybe 100 okay so something like this and you can do it on the first one maybe 30 something like this so let's see how this looks you know something quick and easy all right tripods man froto tripod okay that looks a little bit better there's still some issue here and we're going to fix that as well and in fact we probably don't need so much um so much padding so let's decrease the padding a little bit let's decrease the padding here let's make it maybe 50 I think that's going to be better we can make it even less something like this and then we can fix the overflowing issue like we fixed it previously as well all right there's the app tripods tripod okay that looks better that looks a lot better we're going to fix this as well and let's take a look at this see why that and let me double check this real quick and make sure it's being displayed correctly this row right here reviews next combo average rating let's do a decimal decimal type automatic here we can select the formatting we can do decimal but we can also do custom okay and for custom click here for documentation and here it explains you what's happening so if you give this format you're going to get this back and this is kind of what we want we want it to be to two decimal places so as you can see the zero is a single digit and this number is a single digit omitted if the value is zero so let's go ahead and try this right here copy this paste this here let's go remove this and paste paste this here confirm confirm let's go ahead and reload our app and see how that looks all right there's the app click on tripods manr tripod and it looks perfect it's exactly what we wanted 3.67 three reviews now we just have to fix this minor issue here now the next thing that I want to work on is search functionality so what I'm thinking is on this homepage here I want to create a search bar where a user can type in a search of a product that they're looking for and get some possible search results with some possible matches and then they're going to be redirected to another page that's going to list the search results and they can click on the individual product and go to the detail page now before we create the actual search UI the search bar we need to think about the search functionality so in flut oflow you can Implement search chiefly two ways the first way is like this built-in search that is done for you with flutter flow so it's built in it's not very very robust but in this tutorial I want to implement a real search right this is going to be a real search engine that is going to be very very fast and efficient regardless of how many products you have so if you have 10 products it's going to be fast if you have 10,000 products it's going to be fast as well and for that you need to use a specialized tool and so the tool that we're going to be using is called algolia and algolia is a search and Discovery platform okay so this is the the platform one of many platforms that you can use when you want to have a really fast high performance uh search uh in your app so the first thing that you need to do is you need to sign up for algolia you can uh they have a free plan that you can just use which is uh sufficient for what we're doing now so you don't need to pay anything or you know sign up for a paid plan or anything and after you sign in you are going to be on the on a dashboard that looks something like this so you should have an app created here so if you click here and you click on see all uh you should have an app here so I already have an app here created it's a free plan we don't have any indices no indexes usage is Zero Records is zero etc etc so it's a brand new app here that we can start kind of building on top of and integrating with FL lot of flow now once you've confirmed that you do have an app here created automatically which you should if not you can just click here create a new application you can go to overview and the next thing that you want to do is you want to create an index okay so you should be on search here and here on this screen you can create an index so an index is an entity with an algolia where you import the data you want to search and perform queries against right so an index is essentially a data structure if you will that takes just regular data so like you know in our case these are going to be records of products and makes it stores it in a way where it's very very fast to find a specific product that you're looking for this is the magic it's in this index here so we're going to create our first index here and we're just going to call it products and now it's it has gone on and it has created the index okay so now here the next thing that you want to do is you want to import the products into this index so you can do do it a couple of ways if you click on import you can add a connector you can add manually you can upload the file or you can use an API now in this tutorial we're just going to upload a file that we're going to get from super base just to keep things simple but you know in a in a high performance High availability app you want to have an API that connects automatically to algolia and I'm going to show you a little bit later in the video how to do that so now we need data to import into our index so that we can uh search these records and the data that we're going to get is from superbase so you can head over to your superbase account here and what you want to do here is you want to go to the SQL editor okay so if you go to the SQL editor and what you want to do is you want to perform a query that gets data from your table this is actually very very simple and anybody can do it and all you need to do is type select asri from and then the table so we're going to type e products because these are you know this is the table that we want the user to search against so when you type that you want to execute it and when you execute you see the data okay now the next thing that you can do is you can click here and you can download this data as CSV okay this is very very um useful functionality here in superbase because not only can you import data when you create a new table uh in super base you can just import CSV data but you can also download CSV data right so as you can see we have three products here okay so we have all the fields and we have all the records here so if I click here and I say download the CSV it goes ahead and uh exports these records in a CSV format now CSV stands for comma separated values it's just you know it's just a file with a header row and all the records separated by commas that's really all it is and so if you open the file it looks like this and as you can see we have the top header row that contains the names of the fields separated by commas and after that we have the records okay so we have three records essentially three rows with each field separated by a comma and they're in the exact same order as the header so the system will know you know what is an ID what is created at what is category ID because they they come in a certain uh order right as specif ified by the header here okay so now that we have this file we can go back to algolia to this index here click on upload records upload file and now it has presented this dialogue box where it tells you to drop here or click here to select the file and supports Json CSV or tsv so you all should know what Json is CSV is comma separated values tsv is tab separated values okay tsv is not very common 99% of the time it's going to be CSV okay okay so it's giving us a Json example a CSV example as well as a tsv example okay so now what we want to do is we want to drag and drop the file that we exported from super base okay so I'm dragging the file right here and it recognized it and it's saying we're saying upload and it says successfully uploaded the records and now we can browse this index and as you can see this index has three records and the average record size etc etc but the most important thing is that we can see the data here now for each record it has created something called an object ID which is a way to easily uh and quickly index these records and we can look at all the attributes right so these are all the attributes that were stored in our superbase table and right now they are here in algolia now you can also test search here right so you can type something like Sony press enter and you see one record here which is that Sony camera if I type tripod it gives us the this manf frer tripod and if I type let's say road it's telling us that one hit matched in 1 millisecond so it's very very fast and you will notice the difference the more records you have so if you have like 10,000 products you have you know a real production site it's going to be lightning fast which is why you know it's recommended to use specialized products for different you know functionality in your app right like for search you want to use a specialized product all right so now that we have the data here we've created the index we've imported the data the next thing that we need to understand is how exactly are we going to be accessing this data from inside the flutter flow now if you click on settings and Integrations here this last icon here on the left hand Pane and you scroll down you see we have alol here so if you click here you should be able to potentially connect you know algolia with flutter flow and flutter flow with algolia uh very quickly and easily but there's one issue here it says here add search to your app with algolia algolia search and flut flow is side to your fire store collections okay and we are not using fire store here remember we're using super base and so as a result we can't really use this integration here so we need another way of integrating with algolia fortunately algolia has lots of awesome ways of integrating with it right it's a very very robust product there's lots of ways to kind of connect to it and one of the ways that you can connect with it is via apis as you could probably have already guessed and so if you go back to the homepage you can click on documentation and you can learn about their API right and so you can type search API here and you can click here and you can learn all about their search API which is what we're going to be using in order to connect from our flut oflow app to algolia unfortunately it's actually very very easy to use so if you click on search endpoints here you can see all the endpoints that you need to um uh execute you need to essentially send a request on in order to get the data so we have the search index uh poll search index get multiple browse index etc etc lots of interesting things that you can do and there's actually a sample request that you can use so if you copy this and you can use a tool such as rapid API for testing all you need to do is go to file import text paste this request here which is exactly what I just did and so I have this request here and as you can see this request it has the headers I'm using my API key this is going to be yours we have an application key and you can get this application key very very easily just come in here and uh click this button copy and you're going to copy this application key this is also going to be unique per application okay now you also need to specify the index here right right so it says indexes this should be the name of your index I actually have a different index so if you click here you can copy the name of the index it's just products now the body is very very simple we have a Json object with params and then you have your query and here you can just specify query and the name of the product that you searching for so I can type Sony and I get one hit here but I can also misspell it so I can put maybe two ends and if I execute it I still get a result still get a result and as you can see we have number of hits is one and as you can see it even like highlights it right it gives us a little HTML formatting this em here is uh a way to format things for the browser it's an HTML tag and you see it found it so if I type like a6700 it's going to highlight this a6700 and we still have one result now if I type something like like this you know it's it's obviously not going to find it is going to say number of hits is zero and so the output is very very useful because not only do we have an array of hits but we also have the number of hits so we can easily display the number of hits and then display the actual results in our FL oflow app for the user okay so if I go back to Sony as you can see now we have uh an array of objects and we have one hit here and you know we have the original parameters we also have the processing time in milliseconds it took us 1 millisecond to uh you know search these three records which is obviously Lightning Fast right it can be faster than one millisecond okay so now that we've tested that this API here works and you can easily like I said configure your API calls by simply using this uh API template here and by replacing you know what they have here this API key application ID and application ID you'll be able to easily uh implement the search and get it working and if you're using a tool uh like like I am which is this uh tool that I'm using rapid API then you'll be able to easily test your apis before working with flut flow and I highly recommend testing your API calls before going into flutter flow and coding it there hey so I really really hope you are enjoying this comprehensive app tutorial because there's a lot of interesting things that you may have seen and there's a lot of interesting things that I'm going to be showing you in the rest of this tutorial now if you're looking to level up your no code game you're interested in going to the next level you're interested in building amazing apps complex apps production apps or you want to start a business you want to start an agency you want to do Consulting you want to do you want to contract for somebody or maybe you just want to learn a new skill that's going to be very very useful then you definitely want to check out mastering flut flow which is my training when it comes to mastering flut flow and building all kinds of amazing apps from very very simple to very very complex when you join mastering flut of FL you're going to get access to stepbystep modules that teach you a specific topic when it comes to flor flow they give you some examples they teach you when you need to use this specific functionality and for what purpose plus you will also get access to our private Discord Community where myself and other members will help you to deal with any flutter flow issues that you may encounter when it comes to apps that you're just looking to build now or perhaps an app that you are working on already so regardless of what your plans are if you are serious about no code if you want to turn it into a business you want to make money with it or you're just interested in coning a new skill for other reasons then you definitely want to check out mastering flutter flow.com and learn more about the training as well as get access to our private Community plus very very important that the training that is available at nring flut flow is not static it's continuously being updated with new features as they are released by FL flow so regardless of when you join that training is live and constantly being updated with new features and functionality so that training will never be outdated and you're going to have lifetime access to it so if all of that sounds like something that's going to provide you with some level of value then you definitely need to check out mastering flutter flow.com and consider becoming a member of our amazing Community all right so now that we have alol configured set up and we have verified that everything works perfectly there the next thing that you want to do is you want to start building the search functionality as well as integrating your a UI with this algolia back in and the first thing that I want to do when it comes to that is to set up the API call so we're going to go into this API calls we're going to add an API call I'm just going to call it search API and we're just going to copy everything that I have here so as you can see it's a post request so we're going to do Post we're going to specify this here in and we're going to go into body Json copy this body here and this is going to be a variable right so what I want to do is well first I want to save this I want to go into variables and I'm going to name this search query and I'm going to say this is a string uh is list as fals go back to body and now instead of Sony here I can drag and drop this variable that we have just defined here okay now we still need to configure the headers and so if we go to headers I have this header right here let's go ahead and set them up there are two headers so the first one is here and I'm going to paste my API key remember your API key is going is going to be completely different as well as your application key is going to be completely different so keep that in mind paste this here and it's also a good practice to and to also add this content type application Json as well very very good practice to do that as well hit save and now what you want to do is you want to test it out very very important search query let's say we put Sony test API call and we get results okay we get the results here the hits and we also have some summary information so the next thing you want to do is you want to click on recommended and you want to uh find the data that you need so first we need the hits this is a list we're going to click selected here and I also want to get some additional data so maybe I want to get the number of hits so if I scroll down let's see where's that number of hits this one right here so I'm going to select it right here and I think that's about it later on you can also do paging you can do hits per page there's lots of lots of things that you can work with but for now I'm kind of happy with just this so I'm going to go into select it here and I'm going to give it special names so that we can reference them later inside the app so this is going to be result list and this is going to be I'm just going to have it number of hits okay we're going to hit save and now you can reference the in your app instead of going down and and finding them uh from the raw request okay all right so now we know that the back can works the the data is there the index works the index is um getting our search results the next thing you want to do is you want to build out the UI and we're going to be using this homepage and so what I want to do is in this column here I want to add maybe a container and I'm going to have it on top and then inside the container I want to add a text field get our container a little bit something like this okay and let's remove that underline I'm not a big fan of that this input border style I'm just going to put none or maybe outline let's see how outline outline is cool I really really like outline and now we can even give it a little bit of padding so let's give it maybe a 10 all right so now we have our label another thing that you want to do is maybe give it some inner padding let's do 10 okay that looks perfect that looks really really clean let's fix up the label search something like this and the way that we can have the search execute is the user can just type enter okay we can have a button it's really up to you but let's just keep it simple everybody understands search search here all right so now we have our search bar here now how is this going to work well the way I want it to work is the user types something presses enter and it's redirected to another page where we're going to display a list you with the search results that we get back from the API and the first thing I want to do is I want to create the other page where we're going to redirect to so that we can do the navigation so I'm going to add a new page and for this page maybe we can do a list view maybe something like this and we'll just call it search results okay create page and now we have search results here and let's fix it up a little bit this should be maybe blue primary this should be white make this white this should be white and now we have this page let's call it search results okay we got search results we can delete this so This is actually cool because we can reuse the search bar by adding this uh this magnifying glass back on the homepage so let's go ahead and delete this we don't need any of this let's delete let's delete all these tabs here this is actually a tab bar and so what we want to do is we want to we want to remove that widget there we want to remove it and we want to remove this this widget and now we have the list view here so we have a couple of columns here do we need both of these columns if I remove this remove widget that is fine okay so that is absolutely fine and now we have a nice uh search results here now in order for this page to be able to search it needs to get the input query so let's go ahead and configure this here toop level page parameter add a parameter is going to be the search query and this is just going to be string and it's obviously required because otherwise we won't be able to search so this is confirm and now we are getting the search queer now this category should be okay and we can also wrap it in a uh row so that we can align it properly something like this let's go ahead and give it a little bit of yeah that looks kind of cool now we are seeing some errors here let's go ahead and fix it there's some navigation let's delete that we'll get that let's delete all this now when we redirect the user to this page we have the search string but we haven't performed the search yet so that is what we need to do now so if we click on this top level uh page here we have the search query we just need uh the actual search we need to do the search so we're going to go here we are going to do on page load add an action and we are going to execute this API call so what we want to do is we want to do this API call top level search API add the variable the variable is this search query and we're using this from the parameter and now when the page loads this API gets executed okay we don't need any of this we can just delete all that and we just have this API call here and now when this gets executed it's going to get the data it's going to fetch the results and it's all going to be available here now after we execute the search query we get the results the next thing that we need to do is we need to actually display the data and so if we take a look at this page here we have a lot of containers what we need to do is we need to wrap this container in a list so we're going to do Wrap widget list View and this list tube is going to be fed with this data from the API call next thing you want to do is you want to come here to generate Dynamic children and you want to feed in the result from the API call to this list VI so you're going to click here you're going to go to action outputs you're going to select your API response Json body and we need to get the list right remember we have that list and you can get this result list right here that's all we need to do confirm and then you can give it a name so result item or product item confirm okay so now this list VI is going to be populated with each individual item in that list right so when we were doing those tests over here we got one item right so it's only going to have one item in this case but if they search for something that matches you know three items we're going to have three items here now the next thing that we want to do is we want to actually populate it with various items okay so we we have the image and we have the name of the product okay so how do we do that well we just simply click on the image uh we click on the path and here we can select product item and you want to select Json path and then you want to find what exactly do you want to display here so if we go back to our API call this is why it's important to kind of look at this data you can see that we have this image here right so we have image we have price we have name and we have desk very very simple and very very easy we also have category ad which is going to be important for displaying detail information about this product but we don't really need to display any detail information because it's all in the index anyway which is very very helpful uh for us so in this case what we want to do is we want to display maybe the image the name and the price so three things okay so let's do that now this is going to be image okay this is going to be name and let's do product item Json path name and then we can display the price so how do we want to display the price maybe uh so we have text we have a row here so maybe we can have price underneath it okay so I can add another text over here so this text I can wrap it in a column and we can display the price underneath so let's wrap this in a column and then I'm going to duplicate this and right below it we're going to display the price let's give it a little bit of padding that's too much probably 10 okay and then we can have it maybe italic maybe a normal and let's do italic select italic here maybe a little bit smaller so something like this and then that's going to be the price now we've made a lot of changes and at this point you want to test your app to make sure that everything works together because the more things you do without testing the higher the chance that something is not going to work and you want to discover your box as soon as possible and so at this point let's go ahead and run our app and let's see uh if we have any issues and how many issues we have or you know if everything works perfectly all right here's our app so so let's say we type Sony press enter and nothing happens why doesn't anything happen well let's come back here we forgot to add the action and so if you open this right here flow editor onsubmit you want to do navigation okay so we're going to do navigation to search results and you want to pass whatever they were searching for this value wiget State text field and that's it and I just want to rename this text field to input and so now when we type in the search query press enter we are going to be redirecting to search results and that's going to execute let's go ahead and try this now let's refresh our app all right here's our app so let's type Sony press enter and we are redirected but we're not seeing the search results all we are seeing is this and if we go back to our app we're essentially seeing these containers which we need to delete but we're not seeing the search results and the reason we're not seeing the search results is that it displays the content before it's able to execute and get the results back so we need to add a little bit of reactivity to our app so let me show you how to do that so the first thing that we need to do is we need to clean this sub so I want to delete all of these containers that we don't really need delete this container delete this all of this extra stuff that we're not using because we now have a list that's generated dynamically okay so now we just have this list here now if I refresh the app we should not be seeing all that other stuff anymore all right type Sony redirect we're not seeing anything because we weren't able to get this stuff in time it generates the page before it's able to get the results but nevertheless if we go to our API calls and we do response and test and we do Sony you see we're getting results but it just takes a little bit longer then we need in order to kind of display it on the page and so what we need to do is we need to add a little bit of interactivity in your app and so if you have any of these issues you need to execute the search results wait for the data to come come back and then display it right as the user is looking for the search results right this page needs to update itself and the way that you can do it is by using page state so if you go back to the search result here this uh editor here when we execute this API call we need to save this the data in page State and that way we can automatically rebuild the page with the data once we have this let me show you how it works so the first thing we need to do is go to search results create page State and for the page State we're going to be storing the search results directly so in this case we can just do Json search results State here this is going to be a list click confirm and now if we go back to our actions here we're going to add a conditional right so the conditional here is this action outputs here and we're going to say succeeded when we know it has succeeded we can save the results uh in page state so we're going to add another action type page update page State add a field search results and here we can do set value and guess what the value is this action outputs API response but we're not done yet Json body and we're going to do Json path and here we can do result list confirm and now we are saving page State and you want to make sure you have this enabled your rebuilt current page if it's false for some reason this API call did not succeed you can add an action just do a snack bar show snack bar failed fetching results something like this that's good enough and now for the list view what you want to do is instead of getting it from the API call you want to get it from page state so we're going to select this page state which is a list of Json here and no further changes okay and give it a name and now we have a list view that's being fed that page state that we save from the API call let's go ahead and reload our app all right there's the app let's type Sony here and guess what we see the result look at that it took some time let's try that again let's go back and let's say I type um tripod okay press enter it's empty and it displays you see how it rebuilds and this is exactly what you want now there's more things that you can do you can also have a situation where for this list view when it's empty you can display something empty so for instance you can have an image uh you can have an image or a component here being displayed so for instance right here what you can do is you can click on your new component and you can find something that's kind of similar so maybe empty okay so something like this use my theme empty search results okay create component and no search results or loading no search results something like this and here you can change it and we can delete that we can delete that we can delete that and this you can change it to maybe a magnifying glass so search yeah something like this and then you can go back to search results go to your list view here and have that widget show up have that component show up select the component empty search results and now let's go ahead and reload the app we should have really really nice behavior okay so here's our app let's say I type Sony no search results there it is look at that very very cool don't you think uh let's say I do um Road there it is okay very very cool okay let's say type A7 6700 there's that Sony okay so now that we have this here and this should be the price I guess we did not uh specify the right field that's very very easy to fix there's still a couple things that we need to do we need to change this to price and we need to have this uh redirect if the user Types on it if the user clicks on it it needs to redirect to the detail view so let's go ahead and do that right now uh let's yeah we have this name this should not be name this should be price okay price here and let's go ahead and do a navigation action navigate to product detail and we need to pass the product ID and we have the product ID don't we of course we do product item which is that Json and this should be uh Json path and I believe it's called ID just ID so this is what it should be just ID right here and that's going to redirect to the product detail view let's go ahead and reload our app all right so now let's say I type Sony we are redirected we have Sony a6700 it says 700 and this is probably the price so if you come over here price is 700 but we we should probably format it and there's a little little trick to format it correctly that I'm going to show you in a second and if we click on it we get an error unexpected no value and the reason we're getting an error is something with the ID right so let's go ahead and try to fix uh the issue there let's see are we being passed correctly there's the ID it should be correct let's let me let's go ahead and debug it let me show you how I debug it so what I do is I add another text and here I want to display the ID I want to make sure that it's correct so if I run it now is the ID going to show up correctly or not all right there's the app I type Sony and we have id1 but if you redirect it now it's displaying correctly so that was probably a little bug somewhere but the point is it now works correctly so if you have these issues reload the app a couple of times Okay the reason I did that is I wanted to make sure that ID is properly being pulled from the record and we're passing it correctly as you can see it's right here so that was just some minor issue and if you experience that uh don't give up just you know reload the app a couple of times it happens okay so now we have the search results and the next thing I want to do is I want to show you how to format this correctly okay so if you have this price here you see this is a text right it's a string and if FL oflow thinks this is a string it's not going to give you an option to format it correctly and so what you need to do is you need to convert it to an integer you need to tell flut flow that this is actually an integer and the way that you can do it is by using a text expression this code expression here excuse me right so what you want to do is you want to pass your value and then return it as an integer right so we're going to add an argument this is going to be a string just call it R1 and here I'm going to pass it as this Json path price and so we're passing a string into a a string it's expecting a string but we are returning an integer and here what you can do is you can use an expression like this in pars and then you can specify the V the value that's coming in check errors should be no errors and now FL oflow understands that this is now an integer okay because the return type is an integer we're going to click confirm and if you scroll down you see now we have these options that we didn't have before so now we can format it we can do custom format display as currency confirm okay so now it understands that this is an integer and that's why it's giving you these formatting options let's go ahead and reload our app all right let's go ahead and type uh Sony there's Sony 700 and it's formatting correctly except it's a little off let's go ahead and fix this it's this thing it's a little off and why is it off because of this okay now it's fine that was easy let's go ahead and reload this all right type Sony press enter and what do we see okay so now it's a little bit too much let's give it a little bit of padding let's give it that little bit of padding so something like this all right let's type Sony and there it is 700 and you can click on it and get redirected to the detail page where we don't have any reviews and later on we definitely do not want to display uh this nor this if there are no reviews okay so we definitely need to fix it but that's a minor issue that's very very easy to fix now the next thing that I want to work on is a very very important functionality and that is the cart the shopping cart functionality and so primarily what we want to happen is we have this product detail a user can buy now which is going to go directly to the checkout page or they can add to card and this is where we need to handle a bunch of cases so we need to be able to add to card we need to be able to display the card maybe display the number of items here and also we want to create a view card page the shopping cart page where they can see the items that they're purchasing and uh maybe remove the item change the quantity stuff like that this is very very important functionality and a lot of people are not sure how to properly um implement this so that you have this shopping cart functionality inside of your app but you also have the ability to do a checkout to stripe or you know Shopify or something else and send those products to be you know processed for credit card processing and fulfillment things like that so let let's go ahead and build this out shopping cart is a perfect example of App State we need to have the state and it needs to be throughout the app it's not page State because it's not going to be only available on one page it needs to be available throughout the entire app this is as best use case of appstate that I can pretty much think of although you know app state is used everywhere but shopping cart is like the quintessential example of App State okay so if you come over here we can create an app State variable to hold the individual items in the shopping cart but we don't have the items yet and so for that we need to create a data type so what we're going to do is we're going to create a product data type that consists of various fields and that for the App State it's going to be a list of that data type okay so let me show you how it's done we're going to call this data type product type and we're going to add a bunch of fields we don't need to have all the fields uh that we are storing in the product we just need the fields that are important to us essentially these are going to be fields that we're going to be displaying on The View card page right because we're not going to just store an ID and then load up all these values from a database why do that when we can just store as much as we need in App State okay so let's start with an ID this is the product ID let's say product ID integer I'm going to also add product name or in fact just name uh string I'm going to add an IM image which is a URL and this is going to be string here next I also want to store the quantity right so the idea is they not only can add a product or various products but they can increase a quantity for a specific product so I'm just going to put quantity here and that's going to be on the product level okay this is going to be an integer here again okay so now we have product ID in fact let me go ahead and change that to ID so that it's all consistent ID is integer and so we have ID name image and quantity so that looks good we also need the price okay so that we can calculate the total of uh you know the shopping cart total for the on The View card page as well as on the checkout page so the price is going to be a double and that way we can calculate the the total sum because we have all the data here we have the price we have everything all right so that looks good next thing you want to do is you want to head over to App State and you want to create this state uh called cart so I'm just going to put it uh in fact let's call it shop shoing cart this is going to be a data type of product type is list okay so now we have a shopping cart which is a collection of these product type structures data structures that are going to be filled in with real product data okay so now we have this now let's go ahead and implement this uh the functionality adding to State adding to shopping cart displaying shopping cart etc etc first thing I want to do is I want to add to shopping cart right here I want to implement this functionality for that we're going to add an action update App State you want to select shopping cart and now you can do a bunch of things with it right you can set a value clear a value add to list insert at index so insert at a at a specific place in the list remove from list remove update item what do we want to do well what we want to do is we want to add to list okay that's exactly what we want to do value to add okay so the value we need to create a new data type right because we're creating this dat data type from the data that we have here on this page so we're going to say product type and now you want to fill in the fields right so you want to fill in all the fields now for the ID we are being pass this product ID we can also get it from the the data itself but this is the only element that's being passed as a parameter okay and you want to add the fields the rest of the fields so name is this you know e product reviews which is where this um this is the view that helps to populate the data for this Det tell you right so we're going to say product name image so for quantity I'm just going to put one right now later on we are going going to change you know we're going to be doing some things with the quantities but right now I'm just going to put one to keep it simple price what is the price do we have the price you see we don't have the price here we don't have the price in this view which means that we need to rebuild the view to display the price and anyway price is important here so I'm going to skip price for now because well we don't have we don't have access to price in fact what going to do is I'm going to put zero just for the price right now and that's it now we have all the information in order to create this new product type okay I'm going to click confirm Okay so we've just created a product type on the Fly Right while the app is running and then we add it to our app State okay this is the power of FL oflow and here what's nice about it is that we can rebuild the current page and the reason you may want to rebuild the current page is if you want to display something having to do with upstate so the idea is this app bar here maybe we want to display something here so in this app bar maybe we want to display a shopping cart right that's available throughout um throughout the app so what's nice about app state is that it's reactive so we can update App State and then we can rebuild the whole page and this will automatically be you know the the new value right cuz it's just going to list the number of items in the App State so let's go ahead and do that so what I can do is I can wrap this uh widget text in a row and then I can add another text here and let's say I want to I don't know do something like this okay that looks good let's make it text color white and this thing here we can just uh list you know number of items in the shopping cart okay so uh let's go ahead and do a text combine combine text and what we can do is I can just put something like this we can change it later in here we can put shopping cart and all we want to do is number of items that's all we want to do okay so now it's going to say items number of items and remember when we add item here we have this rebuilt current page so this is automatically going to be refreshed so initially it might be zero but then it's going to get refreshed uh as we keep adding it it's going to get refreshed all right so let's go ahead and reload our app and see if that functionality works as expected all right so here's our app and let's say we type Sony and we have our Sony we click on the Sony and now this thing it says zero you can't really see there but if we add it to app state it kind of changed right it says one let me go ahead and fix that obviously in production you're not going to see this but let me go and fix that so that we at least see so let me take this roll let's do something like this okay let's go ahead and reload this reload this instance here so that you can see cuz it's being blocked by that overlay that says uh debugging all right so let's say user wants a Sony camera they type choose their Sony see it says item zero add to card items one you see if I add another item to card items two okay and now we have this really beautiful architecture is that we we are adding things to App State so we're we have these values in in in memory right it's it's available throughout the app but it's reactive so this automatically gets updated when up State when App State changes very very powerful functionality okay all right so now that this functionality works as expected the next thing that I want to do is I want to create a view card page so if they click here they can go directly to the view card page where they can see all the items and maybe the quantities of a particular item uh in there so that they can take a look maybe remove some items maybe change the quantity and if they're happy they can go to the checkout so now let's go ahead and create this new view card page so if you come over here this new page there's some really good templates that we can use so let's take a look this is a cool template right here let's see if there's some cool ones that's a c template okay this is a cool one it has quantity as well they all have quantity okay so how about this one use uh use my theme cart all right so now we have our shopping cart let's go ahead and add an app bar here let's go ahead and change the background color of the app bar primary blue let's make this so it stays consistent all right so now we have our shopping cart so let's go ahead and make sure that we can display the elements and then let's work on the quantity and a couple of other things that I want to do so this list view here we want it to load from our app state so we're going to click here go to App State select shopping cart okay and here that's it no further changes confirm and the next thing that we want to do is we want to uh work with the individual items so card item here click confirm okay now here we can display the individual um fields for the specific uh widgets here so let's start with image card item data structure field and we cannot display the image because the image is of different type and so we we need to fix that we're going to get back to it in a second but we can do the other ones for now so text card item type data structure field this is going to be price data structure field price and we let's format it as well display is currency and that looks good let's go ahead and add and uh create this delete uh delete item button here that's going to delete the items from the shopping cart and so here you can add an action and you're going to type app State update App State shopping cart and what do we want to do we want to remove from list at Index right we want to remove a specific value index and list okay that's it so it's going to remove this whole thing and we still need to fix image we are going to fix that we need to fix the uh we need to do the calculation that's also easy to do we just need a custom function for that let's go ahead and see if this works and before we can do that uh run our app we want to make sure that we can get to it so search results and detail page actually let's go ahead and have this clickable and this is going to navigate to the car all right looks good looks good let's go ahead and reload our app or create a new session all right there's the app let's say I want a Sony there's the search results click on the Sony here we want to add to card there's the card click here and we see the Sony in the card we don't have the price displayed correctly I think we're we just didn't have the right feel but it's showing up right and if we do this we are we have deleted it right and it's not there anymore so if we go back items are zero again right so we can add to card click here and now it's back now let's go ahead and fix the price also I want to change the quantity and make sure that everything works with the quantity as well so if we go back this is the price yeah the price is being set correctly Ah that's right we don't have the price on the detail view so what we need to do is we need to go back to Super base and we need to change one of our views uh the detail views so we have the price and anyway like I said this is a good field to have and the detail view so this eruct reviews this needs to have the um the price as well so let's go ahead and add that right now very very easy definition here copy this go to SQL editor paste it and what I want to do is first I want to rename this view so I'm going to do a drop View and then I want to call I want it to be prefixed uh product detailed because you want the view names to be kind of one on one one one to one to the actual screen right so this is eruct detail View and now I'm going to add a price right here so P price as product price all right let's go ahead and execute this success go back to our list and let it reload there it is detail View and that should have the price for the products now all right there it is product price and all the review information the aggregate as well there all right let's go back to flut flow let's refresh our schema super base get schema and now if we scroll down we have this eruct detail view click on it and we have the price here the pric is here all right so now we have a bunch of Errors there let's go ahead and fix this let's go ahead to our product detail edit back in query table H because we changed the uh the name of the view and that is why everything kind of was thrown off e product detail view single row everything is fine okay now everything is good and we have no issues okay um the only thing that I want to change is obviously we need we have the price now so we need to make sure that we're actually creating the right product so it's price quantity is one and now we have the price so this product detail view price okay so now we have the price so now if we load and we add a product to our shopping cart the price is going to be saved this time and it's going to be displayed properly okay let's go ahead and reload this all right I want a Sony camera there's my Sony camera add to card one item click here and there's $700 camera in our shopping cart all right so the app is starting to come together except there's one issue that I want to fix so if we go and find a product here and let's say I add this to card I add it and I come here I see this product here quantity is one because that's hardcoded and if I go back and I add it again you see this product it's uh duplicated right and quantity is one for each one and so what we want to do is we don't want to see these duplicates we want to just increase the quality right it's just going to be more organized because I don't know any Ecom store that you know if I had like 20 of these products I'm going to be seeing a lot of them here they're all going to be as on line item but the quantity is going to be different and so that's what we need to do right now we need to make sure that we are increasing the quantity for a specific product in instead of adding a brand new product uh to the shopping cart okay and primarily we need to fix how this add to card button works right so if you go back to the UI Builder and you click on this add to card we open it up it has one action and so what it's doing is it's adding a product that we're viewing on the detail page to the App State and it's doing it regardless whether that product exists in the App State already or not so what we need to do is we need to check does that product with that product IDE already exist if it does just increase the uh quantity if it doesn't then add that product to the App State so let's do that right now and there's a couple of ways of doing it but regardless how you do it you need a condition so what we need to do is we need to add a condition and we need to make sure it's above this so This condition is going to be here and this this condition is going to decide whether we are going to be updating the quantity or adding a product all together and now we need to create the condition and the easiest way to create this condition is by creating a custom function that does exactly what we wanted to do so I'm going to click here I'm going to type custom create new function I'm going to click here and I'm going to create a new function and I'm going to call it find product now the way this function is going to work is it's going to take in the App State which is essentially a list of products that's already in our shopping cart and it's also going to accept the current product ID and so that way it can compare you know we on the detail page is the current product ID already in the app state is one of those products that's already in the App State if not then add it if it is then update the quantity and so that's kind of what we need to do and so this function is going to take two arguments it's going to take the App State and so I'm just going to say up State here and this is obviously a list it's going to be a list of this uh data type that's product type okay that's the App State and the second argument is the current product ID and so so I'm going to say current okay and this is going to be an integer and now we have two arguments and what this function is going to return it's either going to return a current uh the index of that product that we found because we need it when we update the quantity or it's going to come back with negative 1 because anything else 0 1 2 3 that's an index Nega one cannot be an index an index is anything from zero to whatever and anything less than zero cannot be an index and so it's going to come back with ne1 if it did not find it so it's going to come back with an integer and I use Chad GPT to actually build this function very very easily and this is what I got back this very very quick function and so what this function is doing is it's essentially cycling through all the elements in App State and comparing the current element that we have in the App State in this Loop to the current product ID if it does find it it just comes back with an index and if this does not find it it just returns 1 okay that's pretty much it we're going to save this function and now we have this function here so now if I can click here um I can search for this function type and we have this find product now we can't select find product because find product returns an integer and this condition expects a Boolean true or false so what we need to do is we need to wrap this thing in a condition so I'm going to select single condition and now I can find my function so it's fine and I'm going to pass my parameter so I'm going to pass up state which is right here shopping cart confirm and the integer is going to be this page param and what we need to do is we need to see if this function is equal to1 if it's ne1 that means we did not find the the element so we need to create a new element if it did find it then it's going to come back with the integer and then we can um update that specific index of that element to update the quantity so namely increase the quantity this time and so I'm going to say find product is equal to -1 and essentially what this means is that we did not find it okay so if we did not find it we need to create a new one so this action here creates a new one we can put it right here so I'm going to do copy and now we have an action that's going to create a new um line item a new product in the App State if this comes back with negative one which means it didn't find it okay and so this thing I'm going to change action one to create new or add new product okay to card so that I know I can kind of see and know what's going on and this thing is going to say because did not find um product does not exist in in state okay so that I know exactly what's happening okay so we can delete this here and the next thing that we need to do is we need a condition or an action that gets executed if we do find the existing uh product that we're trying to add again again in the App State and so here what I'm going to do is I'm going to add an action update App State select shopping cart in this case what we want to do is we want to update item at index okay we just want to update that specific item and we know the item because we have a function that finds the item find product okay so now we can find uh pass the values again App State there's App State and there's current product ID this product ID here confirm and we know this function is not going to be negative 1 because if it's ne1 then this is going to execute if it's not negative 1 then this is going to execute and so now we can find the exact product that already exists and the update side we're going to do update Fields we're going to select the field quantity and here what's nice about it is that we can increment it right I really like this feature I think it was added fairly recently I I know this feature wasn't there all the way in the beginning and then we can just increment it by one okay done okay so now we have a really nice flow that instead of creating new products of the same type of exactly same product it's going to update the quantity all right now we need to test it out let's go ahead and test this out what do we have custom function needs to be compiled let's go ahead and compile this should be no issues okay that looks good let's go ahead and run this go ahead and reload our app all right there's the app let's say I want a Sony something Sony camera I'm going to add it to card see I've just added it to cart right here now if I add it again it does not um increment the total items but it does increment the quantity we still need to change so it it takes into account the items and we're going to do that later now if I click on this we see we have this here and now we just need to display the quantity so let's go ahead and fix that right now so that we can see that this works all right come back here and what we want is that cart right here and so you see this container it's not letting it show up because we have it here and as you can see it's it's out of the view and that's because the container has a height a fixed height we're going to remove the height and now the quantity is there so let's go ahead and do combine text let's do quantity and add another text and this is going to be card item uh data structure field and this is going to be quantity all right all right confirm confirm and let's go ahead and reload this and hopefully that quantity will be nicely displayed and then we can take into account the quantities not just the the the products to calculate the uh the total number of items and we can do that with a custom function all right here's our app and let's say I'm still looking for that Sony I really really want to buy it but I'm not sure maybe this time I'm going to uh buy it okay so there's that Sony there the results and we don't have any items right now so I'm going to click add to card we have one item I'm going to click add to cart again we still have one item we need to fix that but if we go to the shopping cart we have quantity2 right which is a lot nicer than having like a million duplicates essentially right let's click on add to cart again go to cart quantity three so that's really really clean really nice behavior and mind you I mean if I go somewhere else let's say I go I go back and let's say I go to a microphone I want to buy a microphone well I can add it to card the card updates and we have a microphone here we still need to fix the images here which is very very simple but now I really like that quantity is there so now it's a little bit more organized and and we can work with quantities now right and um when it comes to displaying not displaying duplicate but also maybe updating quantity removing quantity things like that but right now what I want to do is I want to make sure that this items is taking into account the quantity so it's not just displaying the unique products that I'm buying but also everything together so in this case it's four uh four items right so this should display four and we can do that with a custom function so let's go ahead and do that right now come back here add a custom function and this is going to be count total okay total items and we are going to return an integer and we are going to take in the Abate okay this is a list of this data type product type okay and just like how we were doing it before we're going to do something similar I'm going to paste this thing here and what we're going to do is we're going to go through the App State can add up all the quantities together and that's going to give us a nice total okay and so I'm going to create a variable so really really quick I'm just going to say total equals to zero and then here what I'm going to do is I'm just going to sum all the quantities of from the product so App State index and then this is quantity okay and we're going to return this total here and we're going to save this function we're going to compile it and hopefully it's going to give us back what we are looking for okay come back here and and now if we go to the detail page here product detail and items we don't want to just display the text uh the um this num items we want to use our Uh custom function and so it's going to be count total items we're going to pass here confirm confirm confirm and hopefully it's going to work as expected let's go ahead and reload our app all right there's the app Sony there's our beautiful Sony camera zero items add to card add to card two items we can click here and quantities two and we can add more items add to cardart now it's displaying the correct number and of course if we add a different product let's say a microphone three items add to card we have four and this works as expected so now our custom function is ensuring that we are displaying the right sum the right total uh number of items that we have not just you know the number of unique items so we have three here one here that's 4 which is exactly what's being displayed next I want to talk about the confirmation page so as we build the card page we have this checkout link here okay so when they click on checkout it's going to connect to stripe it's going to do all that and then it's going to redirect them to the confirmation page where it's going to say something like thank you for purchasing expect an email etc etc now before we can do the confirmation page we still need to fix these sums here okay so we need to make make sure that the sums correspond to the actual sums here and for that we need to create a custom function similar to the one that we did that counts uh the total items okay so I'm going to create a custom function that will sum up all the prices of all the products so the function is going to be called total sum okay and it's going to give us back a double and it's going to take in the App State and the app state is a list of data type product type okay so now we have the app State coming in we need to sum up everything and uh return the actual sum and that's going to be very very similar to what we had here so on this count total items it's going to be very similar we just need to modify a couple of things so we're going to come back here and this is going to be the sum we're going to start at zero and then we're going to cycle through all the elements and we are going to take the price and multiply it by the quantity so if the quantity is one it's just the price if the quantity is more than one then we need to multiply and so we're going to keep adding to the sum and here we're going to take the quantity and we're going to multiply it by the price okay very very simple save this and now we just need to compile it and very very simple and very effective and like I talked about before a lot of the custom functions you're going to be building most of them are going to be a couple lines okay there's going to be situations where they're going to be a little bit more complex and you can use chat GPD for that but in many many cases I noticed uh they're going to be just a couple of lines one line two lines three lines things like that okay so in this case it's very very simple and easy and now we can go back to our app and we can uh list this uh number here so it says find this text field here this text field right here this thing right here this text field here and it basically says check out you know whatever the amount is but what I'm going to do is I'm going to do combine text paste that here paste this here take this paste that there and we're going to do it like this parentheses parentheses and this is going to be the sum custom function and the only thing we need to do is pass up state that's really all it needs and now we can format it because it gives us back a double and so we can say we want a custom format display is currency confirm confirm okay and so now this checkout here on the my card page is going to calculate the real sum and here we can also do the total in fact you know let's not calculate the taxes um that's pretty simple to do let's delete this base price we don't really need that and here for this total this price summary what is this this is a column and this total is also going to use that custom function total sum uh let's go ahead and no changes and let's format it as a currency which it is a currency okay so there we have it so now we know how it's going to be displayed now let's go ahead and uh test this uh these changes to make sure that everything is being displayed correctly before creating the confirmation page all right so here's our app let's go search for that Sony again there's our Sony no items in the shopping cart let's add an item and we click on shopping cart and we have Sony 700 total of 700 so as you can see that is being updated correctly if we also added again two items 1,400 700 * 2 and let's say we add another product here let's say a microphone Okay add this microphone add to card three items, 1550 so 700 * 2 is 1,400 + 150 that's ,550 so as you can see that sum works perfectly and it's also reactive so if we are doing anything on this page this page is going to rebuild because app state is being rebuilt and this thing is going to recalculate so it's a very very versatile option and also we are displaying 50 here in the checkout cuz we're using the same function so let's go ahead and create the flow from the checkout to the actual confirmation page let's go ahead and create a new page and I looked at some of the templates and I don't see a confirmation page like your product has been purchased or these products has been purchased have been purchased I don't see see anything so what I'm going to do is I'm just going to create a blank page confirmation and I'm just going to say confirmation or congratulations something like that congratulations and here we can just do something like uh let's Center it and let's also Center this in a row Center let's make it a little bit bigger yeah bring it down and we can do some padding all right so it's like something like this congrats on your purchase something like this and we can also add another text uh to the column here and so that's going to be below it and put something like now this is too much 30 and we can put something like you will receive a confirmation an email confirmation as well all right so you can you can uh pretty much list anything that you want on this page it's really up to you um you can send the sum from the previous page you can list anything that you want and maybe we'll do something with this page a little bit later but right now I just want to create the flow so this container here I don't think we need this height something like this and and let's see if we can maybe Center it okay that looks better or maybe we can do from the top from the bottom okay now it's nicely centered and maybe we don't need we do not need it we don't need that much so maybe 20 something 20 okay that looks pretty good and now this whole container we can make clickable Right add an action navigate to confirmation okay and you can you can create parameters and the sum you know you can you can also display the app state if you want as well and so when they click on it that's going to redirect to the confirmation page now the next thing that I want to do is I want to store the order items right because we want to have a history of the orders and if you recall we actually talked about it uh in the beginning of this uh tutorial when we talked about how a user is going to have orders and each order record here is going to have a on to many relationship and you're going to be storing order items and so if we go back to uh super base here we have this orders table right it's uh this table here that's linked to the user with some notes as well and we have these order items okay so these order items are the individual orders right and these are going to contain the product IDs and now in fact uh as we are developing this app I realized that we also need to store the quantity as well course we are going to be storing the product ID but that product could could be purchased two times or three times or you want maybe three of those products and so we have the order ID that's linked to that order that main eord here and we have the product ID that's linked to that e products but we also need a quantity and so I'm going to add a quantity field here and this is going to be a very very simple field I'm just going to make it numeric and that's about it and so that way um we can also Define and store uh how many pieces of that specific product the customer purchased okay so there we have it so now we have this table here orders which is which has a one to many relationship to order items and so now the idea is after they click on checkout we have this flow uh to confirmation but before we navigate to confirmation we're going to be creating an order order record in the ORD table and take that uh unique ID and then use that when we are actually creating the order items okay cuz we know all the order items we have the quantities we have everything in the App State so we can go through the App State and create individual records uh in the system for that okay so let's go ahead and do that right now so the first thing we need to do is uh we need to create a uh a new order record so that we have that order ID and for that you can just come in here and you can go into super base insert row and table is e orders right and you can just set the fields which fields that we need need so we have ID created ad we have user ID and we have noes so we need to fill out all of these fields and we need to make sure we have this user ID because this is the user ID to the user extra table it's not a user ID for the um you know it's not the authentic it's not that user ID that's uh that is the the main in the main table it's not that main user ID this is the other user ID because we decided to use that auxiliary table and so we don't have that user ID so we need to make sure we pull that information uh from the database just before we save it but everything else notes I had notes there you know we can create another field for notes so that when they are when they have the card we they can enter some notes and some extra information you know maybe for the delivery for The Courier uh for for delivery for the merchant etc etc so all of this needs to be filled in so let's go ahead and get this data first and what what I suggest is we can add a kind of a nodes field right below this thing here so we have a list view we have this list view here and just below it we can add notes right so this it's going to be in this column here so I'm going to I'm going to add this text field here and I'm going to put it right here okay so this is going to be our nodes field and we can also do maybe Min lines three max lines five cuz it's going to be a notes field maybe they want to type an essay AAR paragraph ET Etc and I'm going to say input notes and this is going to say label is going to be notes order notes or something like okay so something like this and then they can uh type that in and they'll be able to you know uh share some of the extra information with the merch all right so we have the order uh order notes we also need the user ID of that table so that we can link it correctly and we can get it anywhere we can get it on any level as long as it's available the checkout so we can even get it here on the cart level if you want so we can come here we can add a back in query super base and we can do a e user info we can do single row and we can do a filter where user ID is equal to this authentication user user ID right here okay this is single row so it's one record cuz it's a onetoone relationship we're not going to get multiple records we're going to say confirm and now when we come here we have everything that we need so this insert row we don't need ID we don't need created that cuz they're going to be done automatically but we need this uh user ID and we can just get it here okay this is our user ID and notes we can just get it uh from the widget State input notes okay so that is there and now this thing is going to come back with the order ID so this is going to come back with the order ID and now we need to create the individual order numbers for every element in the App State okay so our app state is a list of different products and their quantities so we need to cycle through that list and for each line item we need to create a new record in super base and the way that you can do it is you can create a loop to do it so we're going to have a loop here and the way this Loop is going to function is it's going to look at every element and add add that as a record in that orders items uh table okay now before we can get this Loop to work we need a loop variable okay and we're going to have that as a page State variable here so we're going to come back here and this is going to be a page State variable for that Loop so we're going to call it current product ID and we're not going to use it anywhere except in that Loop and so we're going to say this is an integer it's always going to be an integer initial value is going to be at zero we're going to say say confirm and now for this Loop action here we can create a Boolean that would serve as a condition or whether we should continue that Loop and we should continue that Loop until we list all the elements in that in the App State okay so what we're going to do is we're going to create the condition what we want to do is we want this Loop to continue while that variable is less than the total number of items because it starts at zero and that's the first item and when when it becomes equal to we want the loop to stop because we won't be able to access the element it it always needs to be less than the total number of items okay so we're going to say current product ID is less than the total number of items so we're going to go into App State here select this number of items okay so as long as it's less we can access the value when it becomes equal to we need to break out of the loop and while the loop is going here so if it's you know three items it's going to go three times if it's 10 items 10 products in the loop is going to go 10 times we want to do a super base insert we want to insert a row into the order items table so let's go ahead and add all the fields so we have order ID and we have the product ID but we also have the quantity which is didn't refresh our uh schema so let's go ahead and refresh the schema real quick super base get schema and now let's take a look and we have quantity here as a double okay all right let's go back and let's come here oh all right and now we can add another field quantity so now quantity is available so we can remove these first two order ID we have the order ID right because we got it from the action outputs right this order ID that we just created so we can get the ID here now the product ID here is going to be the current product that's in this Loop here right so what we want to do is we want to go into App State select this and we want to do item at index and the index is going to be this Loop variable right come over here this is going to be this Loop variable this page State current product ID and if you hover over on this index you see items are zero index that means from zero to something and now that we selected the actual product we can do a data structure field and select the ID confirm okay and the same thing for the quantity the same exact thing in fact can we copy this we can just do this right here paste it except we want to select quantity here okay confirm Okay so this thing is going to Loop and for every item in the app state is going to create a new record in our Firebase and then it's going to navigate to confirmation now before we run a w let's double check if our role level Securities the RLS policies are correct so we have orders here let's take a look if we need to set up RLS policies uh before we can write to this table and as you can see we have no active RLS policy so let's go ahead and create an RLS policy real quick and and we'll do the same for the order items table as well new policy let's do allow all all true review save okay next let's go ahead and take a look at order items we'll probably need to do the same thing so as you can see no active arless policies new policy all true review save policy all right so now that we have the policies in place let's go ahead and run our app and see if everything is fine all right so here's our app let's say on that Sony camera I think I'm going to buy it this time I promise you click here add to cart three of them go to shopping cart three quantity three items time 700 2100 and then we can leave a note uh please leave the delivery by the door something like this contactless contactless delivery right and now we can click on check out and when we click on checkout it's not being redirected to the navigation so there's a problem somewhere and if we go to our data database you can see it's creating lots and lots of records that means there's a loop that's going but that Loop is not ending and the reason it's not ending is because we forgot to update the state right so what we need to do is we need to do a call here and then we need to update increment that variable here right so we need to update this page State update page State this right here and what we want to do is we want to increment it okay because that that way it's always the same and it's not updating this is a very very common problem so make sure you fix this so let's go ahead and reload our app and so now if we run the app we should be able to see those records created properly in super base all right so here's our app and let's go ahead and buy that Sony again click here and let's go ahead and add to cards take a look at the card we have 700 * 3 21100 let's add some notes notes about this Sony a6700 and let's go ahead and do a check out once we do a check out says congrats on your purchase you will receive an email confirmation as well and now let's go ahead and see what happened in our super Bas so the first thing is this table e orders we have one record okay so we have this record with the notes user ID for some reason is empty so we'll have to fix that but at least the record is there and this is order ID number five and if we go to order items we should see one align item with a bunch of qu quantities so this is one line item order ID is five product ID is one that Sony quantity is three which is exactly what we ordered right we had three of those Sony and if I go back to our app and let's say I let's say I go and let's say I want to order something else and let's say I want to order a microphone I'm going to do a microphone here add to cart one I item let's say two microphones and let's say I also want to order a tripod and let's say maybe two tripod so we have four items two of each so two tripods two microphones and let's say I have some order notes so make sure to ring the bell and leave the delivery by the door okay so something like this and let's see the price is correct cuz this is 300 this is 200 the sum is 500 we do a checkout and we have congrats on your purchase let's go ahead and see what happens so if we go to our orders we have another order here order number six this these are the nodes and for order items we have two items here right this is for order number six and product ID two product ID three which are the different uh product IDs corresponding to the the products that we ordered and quantity is two and two which is exactly what we ordered so as you can see this works perfectly here and one thing that we can do is in order to prevent uh the system from creating orders that it should not create we can create a constraint so that for instance uh this combination of values it should never be uh it should be unique so order ID and product ID should be unique okay once we have you know that specific product in the order we cannot have another another record of that specific product because the Quant needs to be different and so we should never have an order ID and a product ID uh being in the system more than once and so we can create a constraint on that to force the system to make sure that that doesn't happen so maybe we'll do that a little bit later in that tutorial and so that's a little tip there to make sure that your system is robust and this way any possible bugs are enforced in the back end the next thing I want to do is I want to have the ability to display the order history okay and we're going to be displaying this order history uh from the profile page and so let's go ahead and create a profile page here we're going to do this and we're going to go into settings there's some good Pages here and let's uh use something very simple so maybe something like this something like this call it profile and here we can display various things about the user so for instance this could be name but we have the email so let's go ahead and display the email for the authenticated user email here and we can also display maybe their nickname or something like that from that view that we have okay but one thing I want to do is from this page I want them to be able to view their order uh list of orders and so what I'm going to do is I'm going to duplicate this thing here this container and I'm going to have this uh order status uh edit profile and this is going to be orders view orders something like this okay and so when they click on this it's going to go to another page and they'll be able to view orders let's also double check that everything works so we have a log out button here let's go and see if it's correctly set up log out super base authentication log out okay so that is completely set up and the next thing I want to do is I want to create another page that's going to be for the order so this is going to be a list page and what are we going to list under orders well this is going to be kind of a Consolidated page so I I'm not going to list all the items they ordered but what I am going to list is maybe uh the number of items they order the total price and maybe the order ID or something like this like I don't want to make it too complex so it's going to be relatively uh simple so there's order history okay that there we go order history let's see what this page can do for us okay perfect so let's go ahead and work off this page uh our own orders page and so what I envisioned for the orders page is we can kind of use this format and what we can do is we can list the groups of orders and then the items uh in that specific order so for example this could be one order this could be another order things like that so let's go ahead and clean this up a little bit just to make things a little bit easier and let's also fix and let's also fix the ab bar here I want that color this uh primary color just like uh in the rest of the app let's fix the text let's fix this right here there we go okay and what we're going to do here is we're going to get all the orders and then we're going to list the order items for each of these orders inside of this column right here and so as you can see here we have a column and what we're going to do is we're going to have a list inside of this column and then inside each of these lists we're going to have another list for that specific order so here I'm going to I'm going to add a list view going to add it right here and inside this list View we are going to have more list views to correspond with you know the specific line item in that order so inside this list view I'm going to drag and drop this right here and then this right here okay and now we don't really need this we don't really need this okay so now we have this main list view that's going to get all the orders so I'm going to come back here add a back in query super base query and we're going to do orders okay list of orders and we're going to sort them by you know newest first so newest then you know the next order the next the next the next and then the old orders at the bottom of the list now there's one thing that we need to do in order for us to be even able to access our card page or Auto history and any of that and that is we need to create a Navar so if you uh search for navbar right here you're going to be on the app settings and so you want to enable this Navar now it tells you that Navar requires Le these two pages and that makes sense and so we need to select the pages that we want to appear uh in the Navar menu and this is going to be the homepage so you want to click on homepage and you want to say show a Navar and now Navar is saying requires at least two pages so we need at least another page for the Navar to be active and another page is going to be the card page so you can click on the card page and you can enable the Navar and now we have the Navar here and there's one more page that we should enable navbar on and that would be the profile page so if you have this profile page we can enable the Navar and now as you can see we have three pages that are directly accessible via the Navar and of course you can change all the icons here but these icons look pretty standard to me but if you want to change it you can just select the profile scroll down and you can change this icon to something else which doesn't really make sense in this case so I'm going to change it back to profile so maybe something like this and as a result the users will be able to directly access these Pages without going through any of the flows because without the navbar page you simply won't be able to access view orders because you won't be able to access this profile page all right so I went ahead and created an order history page here and it's actually a very very simple page essentially we are doing a list views and then child list views okay so we have this list view up on top that displays all the ORD so these are all the records from from the orders table okay and so if you click here you can see that we're basically doing a super base query e orders and we're just getting a list of rows we're also doing ordering created at descending so we're showing newest elements up on top and we also have a text F here that we're going to display some kind of order information so maybe like order ID order date that kind of thing and then we have inside of this order list we have a column and then we have an order items list okay and so what's Happening Here Is We also have a superbase query but this time we are querying eorder items we're getting a list of rows and we have a filter where we are making sure that the order ID from the order items matches up the order ID from this e orders right so that way we get the order items for the specific order that is displaying in the list and as a result we have this really nice display here okay so the next thing that I want to do is I want to configure it a little bit so for instance this text here what I want to happen is I wanted to display maybe the the order number and maybe the date let's go ahead and duplicate it let's go ahead wrap this in a row and let's go ahead and center the row so something maybe like this and let's uh have this display the order ID from the eord table so we can display the ID right here and this is going to display the date okay so we're going to display the date and we can also format the date so we we can do relative we can do um you know the standard format so how about the standard format all right and the next thing that we want to do is we want to configure the actual order items okay so this should be the um the the name of the product and we can list the date there okay so the name here click here Order items row and what we have here is a product ID we don't have the actual product name okay so let me just uh display the product ID right now and then later on we can actually display the name as well okay so we can do number format no formatting okay so we have the product ID and this is the price right here and we're going to come here and unfortunately we don't have the price here as well and so what we need to do is we need to create a view that's going to pull this information from this order items and then it's also going to look up the product ID and get the price as well and while we are creating the view it's probably a good idea to uh display playay the product name as well as the product uh price here as well we have the quantity which is nice but we don't have um you know the individual product fields we just have the product ID which is normal because we can easily look up the name and the price via a view so let's go ahead uh into our super base let's go ahead to a SQL editor and let's ask it to create the view so we're going to do create a view create view to show product name and product price from the e orders uh items table okay because we are exclusively loading data from this table and we definitely need the order ID as well so I'm going to make sure that we include that product name product price show order ID product name and product price and so I'm getting a server error and it seems like there's some issue maybe because I've tried this a couple of times and I'm still getting a server error and so what I'm going to do is I'm going to ask chat GPT to help me out and for that we're going to go to the tables that we need so we need products here and we're going to find the schema for this table to tell chat GPT this is the schema here and this definition here and I'm going to open a new chat GPT window and I'm just going to paste this here and then I'm going to go to our order items and get the schema here and as you can see we have that product ID so that's enough to link this order items to our products in order to get those two fi so I'm going to copy this here and I'm going to paste this here and then I'm going to tell Chad GPT the exact same thing that I was selling super Bas AI but there's some temporary issues there and that's why Chad GPT is going to save the day and this is the prompt that I'm going to be using Create A View that will display all fields from eorder items and also display product name and product price because all we really want is for it to take the product ID and do a join with the products table and pull those additional Fields let's go ahead and execute this and as you can see Chad GPT is giving us the answer and it has called it correctly order items with product info and it's joining it on E product so now we can copy this go back to super base go to a SQL view here and just paste it in here and I just want to change the name so this should be eorder items uh and view okay so that's what I'm going to do with I'm going to call it View and pretty much looks good let's go ahead and execute this and we're getting success no Rose return so everything is fine we can go back to our list and take a look at this view this is the view that we've just created and that should have the name and the price as well all right and now we're looking at this view right here so we have all the orders here right with different products and we also have the product name and the product price all right so now that we have this let's go back into uh flutter flow and let's make sure that we have access to this by refreshing the query go into super base get schema and here's our new view okay so now we can use this view to display exactly what we need instead of that table over here and so we're going to modify this list right here click edit back and query and instead of this eorder items we're going to get the view and leave everything as it was before click confirm and now we can display the product name right here click here product name click here and we can display the price and we can obviously format it as a currency all right so that is what we have we have the name and we can also display the date of course it time format so let's go ahead and run this app and see what's happening what do we have here custom functions let's go ahead and compile them and let's go ahead and run our app all right so here's the app and if we go to our profile page and we click on view orders we should be able to see the orders here so this is order number five we have one line item this is order number six two line items order number seven one line item let's let's take a look and see if it corresponds to what we have in the database okay so this is the stuff in the database and as you can see it's listing the line item so the only thing that we really need to display is the quantity but the structure everything is correct it's just we're not displaying the quantity and it's a good idea to display the quantity so where do we want to display the quantities so maybe as part of the name okay so maybe it should be on the same line here on the same row so we're going to wrap this and the second one I'm going to display the quantity and we have the quantity right here confirm so we have the quantity there let's go ahead and reload the app all right there's the app let's go ahead and click here view orders and there you see it man for tripod one we should probably do a little bit of spacing there's two and there's two as well and of course we have a little bit of overflow there but as you can see it says two and this says three so let's do a little bit of spacing uh so that it's it's not flush together right we can do it with a padding so maybe five pixels that's going to be enough and one thing that we can do is we can give it italic so something like this and yeah that should be enough to just kind of give you the idea what's happening see what's going on here view orders here and as you can see there's a space one two and you know what I thought of what I can do is we can do something else we can do combined text and we can do something like this uh two and then the quantity right quantity here number format no for formatic so something like X2 which is you know the number of times we can confirm that and we can also make it italic okay so something like this let's go ahead and reload this all right there we go view orders okay and there you have it I think I turned off italic but um you know that's the idea okay let's go turn that back on okay now we have italic okay there it is so it's bold now and another thing I want to do is I want to make sure that this text wraps correctly this thing a little bit small maybe 14 it should hopefully fit in all right let's go ahead reload this let's take a look at what we have all right there's the profile view orders and what do we see okay now it looks a lot better okay two of these two of these one of this three of these okay oh and another thing that we should do is we should display the price as the sum of the quantity okay because the each camera is 700 it should be 2100 so let's fix that real quick and The Way We Fix It Is by using a a code expression okay so we're going to do a code expression and this code expression is going to take in the price and it's going to also accept the quantity so both are integers and this is going to be a integer as well and let's see this is um actually this should be a double price is a double let's put in Let's uh get a price in here so this is price and the second one is an integer which is quantity oh it's a double too okay should be should be an integer but maybe I have it stored as a double yeah I have it stored as a double here in the view but it should be an integer and so this is quantity doesn't matter not a big deal and now this thing is going to come back with a double double fs and we're going to say price times Quant and let's go ahead and check for errors and here we can also format Place currency okay and let's go ahead and reload this all right there's the app let's take a look view orders and there we have it so looks great this is 100 this is 300 cuz they're 150 each these are 100 each so it's 200 and these are 700 each * 32100 okay so as you can see it works perfectly one more change and uh the order ID let's display order IDE I know I'm I'm a perfectionist but uh let me copy this variable do a combine come in here let's paste this variable here and I'm going to say order number something like this and then that's going to display the order number okay and maybe um reorder the date and the order number so something like this I hope um you know you guys think this is better I hope I hope I'm making the right uh the right design decisions there okay let's see what we got all right let's take a look view orders and there we have it okay order number seven order number six okay that looks good obviously you can take it as far as you want but at least we have the right order history page view being displayed now there's one important feature that I want to add that we haven't yet gotten around to doing and that is the ability to leave reviews to remember we have this review table here and we are displaying some of the reviews on the product detail page we are displaying I think the last three reviews or something like that but we do not have an ability for the user to leave reviews and the idea here is that they have these items in their order history and they should be able to leave a review for every item that they want and so the way it's going to work is that for each of these line items product items here we going to have a button where they're going to click on it and it's going to display a popup where they can leave a rating and a review so the rating is going to be one to5 and then the review is going to be free form text okay so let's go ahead and do this right now so the first thing I want to do is I want to add a button here okay so if we take a look here we have this text here and let's just add a maybe an icon here to the right and so what I'm going to do here is I'm going to find this row that contains all the elements and I'm going to add another element there so I'm going to add maybe an icon button uh that's going to be used for leaving reviews and obviously once the person left a review this icon button should not be visible or it should be at least disabled so let's go ahead and uh change it around so I don't know what's a review okay so maybe something like this let me change the fill color do we need the fill color clear color do we need the Border color we do not need the Border color let's go ahead clear this as well all right so now we have this icon button here that could be used for leaving reviews what I want this icon button to do is that when the user clicks on it it's going to display a little pop up like a little popup from the bottom okay like a little dialog box and you can do that by creating an action but we need a component first right these dialog boxes are like components so let's go ahead and create a component let's see if there's something that we can use so we're going to be using a bottom sheet and so we can take a look here and see if there's something that we can modify so something like this I think is going to work so this is going to be review component review com create a component so now we have this component and we can change this to something like lever review we're going to delete this we're going to delete this and we are going to add a some kind of a maybe a drop down like a drop down thing that could be used for a leaving reviews right so this drop down is going to have like a 1 to five or something right so instead of making it like a free form for the actual review for the rating it should be a drop down I think that's a good idea and let's give it a little bit of padding from the left so this has a 16 padding this should probably also have a 16 padding okay so let's give it a little bit of padding from the top so something like this and let's give it options so we're going to create options from 5 to one so five 3 2 1 okay so now when they click on it it's going to have like 5 4 3 2 1 Etc the next thing that I want to do is I want to label these inputs right I always do this this is input rating so that it's easier to reference it later and this is input review let's go ahead and give this thing a placeholder hint text placeholder text uh leave a review okay so something like this and this should say uh this should say create a leverage okay so now we have this this uh component that's kind of like an independent thing that's going to pop up and ask the user to leave reviews now in order for us to save review we need to have a bunch of parameters right we need to have we need we need some data right and so what kind of data do we need to save well we need to save a review for a particular product ID here right we have a product ID we have a rating and review but we also need to link it to the actual order because the order has you know username information and later on we can also compare okay is this order has this order been rated yet so it's very very important to have that and so I'm going to create another column here where we are going to be storing the order uh item the order item cuz remember we have here Order items and we have orders right order is just like just everything whereas order items contains the actual products that the user purchased so we're going to create a new column and I'm just going to call this order item id okay and the type is going to be in 8 and we're going to create a foreign relation to eorder items okay ID okay because that's exactly what it is they're going through each order item and leaving reviews okay they're not leaving reviews for the whole order right they're leaving reviews for a particular order item so we have this order item here and everything is fine okay and the nice thing about it is that the order item is linked to an order and that's linked to a user So eventually if we need to we can discover who the actual user that left the review if we need to display it somewhere okay so now these items are not set but the next reviews is going to set everything including the order item now it says here no active RLS policies let's make sure that we have a policy here new policy let's create that policy so that we can access this this table and leave review save policy okay all right so that has a policy now now because we added a field here you want to make make sure that you go into your um super base here and you refresh the schema so you're going to go into super base get schema and that's going to refresh everything so now you have this e- reviews here with all the you know the fields that are up to date okay and so the super based part is done now we can go into our UI Builder and we can work on this UI now how will this flow work well the way this flow is going to work is that when the user presses the button it's going to insert the row into super base and we obviously need uh various pieces of information so more specifically we need the product ID we need the rating we need the review and we need the order item id now the rating and the review is going to come from the UI the product ID as well as the order item ID is going to come as parameters that are going to be passed from that hosted page which is the order history page that is the page that triggers this component here so first let's create these two parameters that we're going to send from the hosted page so I'm going to label this product ID this is an integer it's required then we have the order item id which is also an integer and it's required confirm confirm okay and now we can create the flow because we have those parameters defined that are going to be coming in eventually so we're going to come here we're going to add an action and we're going to say insert insert row e reviews here now you can add the fields and you can remove these first two cuz they're going to be set automatically but the product ID is going to be the parameter the rating is going to come from the UI okay so that's widget State input rating but we can't use this because this thing expects a double but our drop- down menu is sending us text okay so what we need to do is we need to create a code expression that's going to convert it so we're going to add an argument so this is going to be the the argument to the code expression so rating text and this is a string and this is going to come from widget State input rating and this is going to return a double so all you need to do is do something like this double parse rating text that's it and you can use chat GPT uh you know you can ask it how do you convert a text to a double in flutter or Dart and it's going to give you this expression okay so now we're checking no issues confirm and now this is uh set correctly next is the review should be no issues with review which just State input review and then order item id which were being passed from the outside okay and the next thing you want to do is you want uh this uh dialogue box to uh dismiss itself so you can just type dismiss dismiss and that is the flow that you want you trigger it from a hosted page the dialog box uh triggers you pass it a bunch of parameters and then it does something and then it dismisses itself that is a good pattern to follow okay so that is kind of what we have here and let's go back to the hosted page order history and let's pass the arguments to that dialogue box okay and let's trigger it so we're going to come here add an action and we're going to say show bottom sheet select a component uh review component and now you can pass all the parameters that we need so that is just two parameters so the product ID we have it here and that is this row right here so you can just pass the ID in fact not this ID it's going to be this product ID here confirm and this order item ID is this ID right here okay so now we have the product and we have the order item ID that's going to be stored in that review okay so let's go ahead and double check custom functions let's recheck our custom functions we haven't really modified them since last time so it should be no issues and as you can see everything is fine so let's go ahead and run this app and let's see if the reviews are being left correctly with all the data that we need all right there's the app if we go down to our profile page we can click on view orders and now we're seeing this button here that's going to do uh pop up that dial box uh for the user to leave a review so let's say we click on this one so this is Sony let's say we click here and we have this popup let's say I really like Sony Sony cameras are the best okay leave review and as you can see the dialog box dismissed itself and because that was the Second Step the first was the super base query you can kind of induce that the super base query uh was successful okay so let's go back into super base and hopefully we should see a review right here and there you have it this is ID number nine we have product ID one five Sony cameras are the best and Order ID 710 okay so now we have a review here right we have a review for this specific order here it's in the system now another important thing to realize here is that you should not have another review with the same order item id okay once you know the user left a review there cannot be another that user cannot leave another review for that same product right that's how typically works I mean there are some situations where you can edit an existing review maybe delete it but you shouldn't be able to add another one on top of it and so a good database tip here is that in your production app you should make this a unique constraint which you can do on super base so that you know on the back end there's no way to create another review with this order item id okay so it's uh it's another thing that you can do to protect your system and make it more robust because in our case we're going to do it in the UI but it's a good idea to do it both right it's a good idea to do it on the UI and it's a good idea to do it on the back end because sometimes the UI May Fail or there's a bug in the UI but if you do it on the back end it's it's going to work all the time it's going to be 100% bulletproof because there's going to be no way for for uh for somebody else to come in in and leave a review for the same order item right that belongs to the same user so that is an important thing to realize okay and so now if we go back to our app uh this button should not be available now right because once the user has left a review they should not be able to leave a review here and so what we need to do next is we need to make sure this button doesn't show up and one way of doing that is by creating a view that's going to display these items here but also it's going to pull up the existing review that the user may have left and then we can see oh is there a review for this order item then do not show this button but if there's no riew for this sorder item you know maybe the review the rating is zero or non-existent then show this button so what we need to do is we need to create the view that's going to pull this data along with the e- reviews table so that we can make a decision when this page loads whether to give an option to the user uh of leaving a review or not so if we go back to our app right here if you go back to this order list we have this order items list which is responsible for populating this and if we come here added back in query we are already already using a view here so this is going to make the process a lot easier because now we can simply go back to our super base and we have this order items View and so what we need to do is we need to add another column that's going to show the rating or the lack of thereof okay so we're going to come here and we have this thing here and so what we can do is we can create a join on e- reviews on order product ID and and show the rating okay this is going to be something called the left join because even if there is no review we want it to be no or non-existent we still want to show the data but we just want to make sure that there's no rating being displayed okay and we can employ Chad GPT to update our view for us so I'm going to go to the definition copy this view go back here paste this View and then I'm going to go back and I'm going to go to e- reviews definition I'm going to paste this View and and then I'm going to say update the first view which was called eorder items view update add e rating at rating from E ratings e- reviews as a left join okay and let's go and let's go and see what happens all right now it's generating our new view for us and as you can see this new view has a new field called rating from e- reviews and we're doing a left join on e- reviews and the reason we're doing a left join is because we still want that review to show up just maybe as a zero or something right or as an empty field and so here's the new query let's go ahead and copy it and let's go ahead and execute it in our SQL editor paste it in here and let's see if it works success and now let's go and see if it actually gives us the data that we need and this is the new view that we created and as you can see it has a new column called rating that it's pulling from the e-review stable this particular record here which has an ID of 710 and this is that order item ID in that other view uh it has a rating of five and so this means that when we are displaying these items in order history it means that we can skip this record because it already has a rating okay this is very very powerful so let me show you how this is going to be implemented so let's go back to flut flow and let's come here refresh our uh schema here okay so now to take a look at this view right here this is this order items View and we have have a rating here okay so now when we go back here when we fetch the data we can do a conditional on this right so check this out this could now be a conditional so we can create a conditional and we can say well let's see and we can come over here and we can say well there has a rating there and so we can create a condition and so we can say rating is not set so this button will only be displayed if that rating is not yet set we're going to say confirm and let's go ahead and fix these custom functions here recompile these should be no changes again should be absolutely fine and now let's go ahead and start a new session all right there's the app let's go to our profile page view orders and these are the orders and as you can see this is not being displayed here because this thing has a review okay now if we come here and we leave a review it should also not be displayed there as well so we're going to say this is okay let's say it's a four a great microphone a little price okay so something this leave a revie and as you can see right away this is no longer being displayed for this record because the review was left and the review is set and so if we go into reviews over here we should see a new record here being created this great microphone but a little pricey and the order item ID is 711 and then when we need to grab all that data we're going to go to this e uh order items view which is that view that we're displaying uh on order history you see this is this ID right here and as you can see this is this 7-Eleven right here and it has a review for Road Wireless micro and the rating is four and because there's a rating that button is not being displayed for this and it's also not being displayed for this so if I leave a review here let's say I don't like him let's just you know vary it a little bit so um not a good tripod okay leave a review that saves it and now you can't leave a review anymore so that is how you create a system where you can leave a review save all the data but then have it reflected back in the UI in a very reactive way all right so we're getting to the final stretch here we're almost done let's have a quick walk around of the app and let's see if there's some you know tweaks or bug fixes or things like that that we need to look at to make this app even better so let me go ahead and run this app right now all right so here's our app and we have the category screen we have the search that uses algolia let's go ahead and add some items to our shopping cart we have the Sony and Sony has one review has a bunch of reviews here let me go ahead and add this to our shopping cart we can come to the shopping cart and we're seeing this right here now if I delete it I don't see anything right so potentially I should not be able to check out so that is one thing that we need to add another thing that I want to add is we need to display that there's no items in the shopping cart so none of this should be visible if there are no items and this should not be visible but other than that I think we're pretty much done right that's kind of the main thing that we still need to do so let's go ahead and fix this right now and then we'll see what else we need to do so if we go to our card page we need to display a message that there's no items in the shopping cart if it's empty okay so what we need to do is we there's a couple of ways of doing it but come to this list view here we can make this list view uh in a stack and then you know on the other side the other item that could be displayed conditionally is a message that says there's no items in the shopping C card so that's the the simplest way of doing it so what I'm going to do is I'm going to wrap this in a St stack and then I'm going to add something else so here there's a couple things that you can add so here you have various templates and if you search let's say empty you have this really cool template that we can use so I'm going to add that there and so now if you come to the top here uh if we collapse this we have this here and this is that new template that we've just added so I'm going to rename it I'm going to do empty so this is empty shopping cart right here this thing here so that is there and then you have these input notes you have a bunch of other things that we we don't need to really display here and so another way of doing it and because we have a lot of other content that's not part of this list view that we're trying to conditionally display or not display what we need to do is we need to bring this stack to the top so what I'm going to do is I'm going to remove this stack right here remove this widget and I'm going to make the main column the stack right because this displays everything and and it's ideal so I'm going to wrap this whole thing in a stack okay this main column and then what I'm going to do is I'm going to take this all the way to the top like this and now we have it correctly right so now we have this main column here and I'm going to rename this column as an uh cart card column and then this is empty card okay empty card column okay and so as you can see this is a column for the shopping cart but this is also a column for the empty card so you can even say empty card column so now we can create conditions right so we can say this is conditional if uh let's say if you know single condition we can say App State shopping cart and here we have number of items and we can say number of items is greater than zero okay so something like this so if there's at least one item in the shopping cart okay so greater than zero and that means this thing is going to be displayed if it's not going to be displayed then this thing will be automatically displayed so what we can do is we can also take this copy this variable here come here and we can create a condition and the condition for the empty one is if it's empty right so we can do is single uh we can we can even paste it here number of items is equal to zero okay so something like this and now let's go ahead and run it and see if we've set it up correctly Let's do an instant reload here all right let's go ahead and see our shopping cart and what do we see we see it seems like you have no orders right so obviously the log works we just need to change um change a couple of things here right and as you guys might have noticed I'm not really concerned about the UI stuff I'm concerned about the logic because the UI is very very easy to change so now you can go to card column you can go to conditional and you want to disable this now you see this let's go ahead and change the icons here card okay seems like you don't have you don't have any items any products browse uh browse our products and add them and add them to the shopping cart for them to appear here for them to appear here and this thing can you know redirect them to the homepage or something like this so we can do and uh we can do add action navigate homepage okay and let me go ahead and fix that button there button looks really weird why does that button look so weird take a look at this button go let's give it a width okay so something like this maybe a height okay that looks that looks better maybe make it a little bit bigger the text browse store okay seems like you don't have any products browse our products browse our product catalog and add the products so the shopping card for them to appear here okay let's go ahead and reload the app and it should be a lot more pleasing to the eye okay come back here and what we see seems like you don't have any products browse store and we redirected to the front page all right so there you have it it's an eCommerce app with a ton of features a ton of functionality you can extend it as far as you want you can build an uh Ecom store you can extend it add your own functionality and even sell this app as if you want you can you know provide this app as a service to various businesses or you can study how I buil certain things here apply this knowledge and build all kinds of different apps in all kinds of different niches but regardless what you're going to be doing you know you definitely need to view this app on your own screen uh at your own Leisure Time on your own computer and you definitely need to be able to clone this app to get the maximum benefit from this app and you will be able to do that by joining our amazing patreon Community because when you join our amazing patreon Community not only will you get access to this app but you're going to get access to all the apps that I published on this channel as well as extra content such as q&as live streams behind the scenes content and our patreon supported masterclass Series where I do deep Dives on specific topics that the community votes on and so if you're interested in leveling up your no code whether that is to build various apps start a new software business offer services to businesses or learn a new skill a very very valuable new skill then you definitely need to join our amazing patreon Community because when you join our amazing patreon Community you're going to get access to a ton of benefits but most importantly by joining your going to be supporting this Channel and supporting my work and that is greatly greatly appreciated and so if you're serious about no code but you have not yet made a move to our amazing patreon Community where we help each other overcome all kinds of issues and all overcome all kinds of obstacles then you definitely need to consider becoming a member and so I really really hope to see you there

Channel: James NoCode

Views: 11,767

Keywords: flutterflow, supabase flutterflow, flutterflow algolia, supabase nocode, algolia nocode, supabase ecommerce app, flutterflow ecommerce app, algolia ecommerce app

Id: JiCF7K0Tvvw

Length: 183min 38sec (11018 seconds)

Published: Wed Oct 18 2023