Discover the Power of Firebase: Flutter Firebase Tutorial

welcome back to cing with t today we're going to learn what we are going to achieve in the backend tutorials of our e-commerce application creating fter e-commerce application and the design part is already completed and from today onward we are going to work on the back end of our e-commerce application we will use the Firebase fire store and Firebase storage definitely Firebase authentication for the back end of our application we'll use the local storage to store data locally in the mobile to hold cart items with list items so we will cover almost every aspect that we require to design any professional application specifically related to the back end so once again if you're new you can download the complete code link is in the description and also you can get the playlist link from the description or from the right top corner so let's quickly have a look what we're going to create and how we going to create and how we are going to use the multiple aspects of the Firebase so you can see our application is running and this is the screen that we are going to launch when we are going to trigger the screen for the first time we first have the splash screen in the light mode because we have already covered the design so I'm not going to go into the light and dark modes or into the design so uh you can watch the previous videos so when user is going to click on this application first time when user is going to install it for the first time he will see the onboarding only one time or on the first launch so let's say at the end we going to click on this next button by clicking on it we're going to make sure that this onboarding should not appear again when user is going to open the application so let's first quickly have a look when we're going to click on this we have redirected towards the login screen and when I'm going to rerun this again close this application click on it again and this time you can see we have landed on the login part instead of the onboarding after the onboarding we are going to jump towards the create account part we going to first create user account and before storing the user data Inside the Fire store we will first authenticate from the Firebase authentication these two are different things Firebase authentication is a separate tool Firebase fire store is a separate tool to store the data so we will first authenticate the user once authenticated we will get all this data and store it inside our database so let me fill all these details okay once all the information is added so when I'm going to click on this continue you can see password must be at least six characters long and I'm going to add anything like six characters so it will start correcting you add one number or add special character so let's add proper password so when we going to click on this create account you can see accept privacy policy so you have to accept this button click on create it is processing the request and you can see the email has been sent to verify the address and account is created so this is the email that we received when we going to click on this to verify it it's loading and you can see it has been verified close it head back and you can see your account successfully created notification so this means that account has been created at the top you can see the animation click on continue and we have successfully redirected towards the dashboard all the data is being loading with the proper animations categories are already loaded Banners are being loading down below we have four products so they are actually loaded so first of all let's get started with the first thing you can see at the top we have the profile information of that user head towards the profile or the settings part and in here you can see we have the profile but we cannot have the image over here so to change the image click on this gear icon or the pencil icon to edit the information so this is the information of the user that we added recently to change the profile picture we are going to click on this select some profile picture and it is being loading once data has been uploaded you can see the success message and also the image has been uploaded currently we don't have the perfect image but definitely image has been updated we can change the name port team to coding with the for team so let's save this and you can see your name has been updated as well when we're going to click on this back button you can see the coding with sport team name is looking bit ugly but you can see the name has been updated so we learn how to store the user record how to fetch the user record display it how to update it but also when you click on this close Account button when you hit it you can see the popup warning message that this action is not going to be reverted so when user is going to click on this delete button he has to reauthenticate the user again so once the reauthenticate user has been done so let's set the email click on verify and you can see after the verification has been completed the user has been successfully deleted his all information including email from the authentication and including all the data in the fireb storage definitely we going to learn this once everything is done with the parts or the section four of this playlist we will move towards the actual section of this e-commerce application so let's say click on this Google account to login select some email logging you in and we have been logged in this time we are going to start with the categories first so first of all previously we loaded the user information but now we will start with the categories we will first load the categories and definitely when you go to the store and in here you can see we have all the categories over here we will load the categories and we will try to display all the categories right over here once the categories loaded with all the loader effect with the Shimmer loader as well and we will definitely use the cache package of flutter to display all the images so once the one image has been loaded we don't want to reuse the storage space of our Firebase storage and also want to increase the speed as well and to fetch the products categories and Banners we are going to use the gex approach first first of all let's see the bannner you can see Banners are being uploading this is the cache effect Banners are loaded from the database but they are now being cached and also being displayed on the screen so you can see it takes a bit of time but once loaded you can easily scroll between any of the bannner after the banners we have the products these four products are also being fetched using RX trate management just to demonstrate you that how we can effectively fetch the products and reduce as much reads as we can from the fire store for any large application but when we going to fetch the categories we will try to fetch all the categories including subcategories because categories subcategories and Banners cannot be in the large number so we'll try to fetch them once when the application loads and we don't want to fetch them again throughout our application life cycle to reduce the number of reads and increase the speed same for the banners same for the brands but not for the products the products case is bit different we cannot fetch all the products once when the application loads and speed up everything because let let's say we have 5,000 products and user only wants to see maybe one product he opens the first product and he don't likes it and close the application so this means that only for the one action we loaded 5,000 products means 5,000 breeds and if you're fetching data from different collections so you can multiply that 5,000 with two times three times so that's very costly and very inefficient approach so that's why we are definitely going to learn how we can handle that part so let's go to the store and you can see brands are already loaded but down below you can see we have the brand specifically related to this sport category with all the top products of this specific brand then for the this brand and also four products related to this specific category same when we going to scroll to the electronics you can see these nice animations these are the loaders or you can call them Shimmer loaders once data arrived they will fill all the data okay you can see all the data of that specific category has been loaded so we will try to fight this data and also when we deal with the brands we will definitely view all the brands when any of this brand is going to be selected we will display all the products of that brand same for some other brands so let's go back over here in the home screen when we're going to click on this popular products or the featured products you can see we can again fetch all the popular or all the featured products depending upon what we have cured once all the products arrived we can sort them using the lower price first higher price same this sorting mechanism will go through for everything let's say we're going to click on the idas for this specific category brand so we can load all the products of that specific brand same if we want to view all the products related to the sports we just have to click on view all it is going to load all the sports related uh products not related to some specific brand you can see this product is the Nike product and down below over here we we have the idiz so this means that apart from focusing on the products it's fetching all the products related to this category we can also go to the home go to this specific category to view differently the products of each subcategory so we'll first load all the subcategories and then inside the each subcategory we'll try to fetch all the products of that specific one subcategory so let's say we have sports equipment over here when we going to click on this view all at the top you can see we have sports equipment related to all the subcategory products will be displayed over here you can still sort them lower to higher prices so let's go back now for the main part when we're going to deal with the product you can see we can simply add this product in the wish list this product is added in the wish list the products of the wish list are being fetched from the fire store but when you go to this product you can see adding and removing product into the wish list is pretty easy and a speedy process why this is a speedy process because we are not adding the wish list events into our database we're going to add these all the wish list elements into the local storage local storage specifically for the one specific logged in user so we'll create the buckets for each user and try to fill all the data of that user into that pocket uh we going to test this as well when I'm going to add this product into the cart you can see quickly it's added because we're going to add two things into the local storage cart items and the wish list items so when I'm going to add this two times three times at the top you can see we have three items in the card one single product with the three as a quantity total three in the card then we going to add one more single product because single products can directly be added right from here without opening the product which is a quick add to card feature but for the variation like the first product we cannot add it right over here it is going to open that product we have to select some variation so image is loading image loaded if it is in the stock we can add let's say two items green 32 you can see the popup item added let's go for the black 32 let's add three times add to the card it's also added and for the red 32 uh let's go to out of stock one which is red 34 so let's add any item you can see selected variation is out of stock let's head back and you can see we have five total items in the card three one over here and two over here and total we have 10 items open it three for this shirt two for this one product and green 32 we have two items black 32 we have three items in the guard we can see the total checkout over here when you click on this checkout all the products will be listed shipping fee text fee will be calculated order total will be over here and shipping method you can select any of the method right from here you can change the address currently we don't have any address you can click on this add new and add address over here as well let let's head back before placing the order go to profile click on addresses add new address once the information added click on save button toring address and you can see the congratulation message address added and also the automatically first address has been selected after this you can click on this cart when the cart is empty when you remove this product you will see the popup or the last product so when removed at the bottom you can see the product has been removed so let's click on this you can see the popup item removed and also for this one so once everything is removed you can see the bottom navigation button and also all the widgets removed with the nice animation and a text to fill it when you click on this it will be redirected to the profile or the home screen as desired let's go to the orders and also you can see the orders are currently empty once we walk through uh from all the application here's a bonus thing which I have added and which you can get when you are going to download the product from the description because you have to add all the data manually into the Firebase base so what I have done is I have added the upload data button over here in the app settings click on this load data and you can see we have bunch of options upload categories Brands products banners and then relational collections between Brands and categories and between products and categories so when you're going to click on any of this button one by one it is going to take some time but it is going to upload the dummy content which we have already stored in the assets and I have created a custom demy controller to upload all the data so this is what you can get when you're going to download the code from the description you can easily upload all the products categories Brands banners into the Firebase database they will automatically be added into your Firebase storage but before that you have to enable everything in the Firebase and make sure your Firebase is connected so that's all about today's tutorial and from the next tutorial onwards we going to start creating the Firebase we will first learn how to set up the Firebase which is the immediate next video which is very useful and we will also learn how we are going to use authentication repository a single class that will be reused throughout any project okay so that's it for today's video I hope this video is useful if you like this video hit the like button and if you're new you can click on the Subscribe button and turn on the Bell icon as well to get notified for all the upcoming videos once again thank you for watching take care Allah h

Channel: Coding With T

Views: 7,268

Keywords: flutter firebase tutorial, firebase flutter, firebase flutter tutorial, flutter firebase tutorial for beginners, flutter firebase full course, flutter firebase complete tutorial, flutter firebase crash course, flutter firebase crud, firebase course in flutter, flutter cloud firestore, flutter firestore crud, flutter firestore tutorial, firebase storage flutter, flutter firebase storage, flutter with firebase, flutter firebase, coding with t firebase, Firebase course 2024

Id: ZH9cTTF2c60

Length: 14min 22sec (862 seconds)

Published: Thu Nov 23 2023