Ionic 4 Firebase with Angular-Build PWA, Native Android, iOS | RapidDev Pro | Skillshare

Ionic 4 Firebase with Angular-Build PWA, Native Android, iOS

RapidDev Pro, Full Stack Developer & Tech Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
42 Lessons (4h 40m)
    • 1. Introduction

      1:53
    • 2. Tools used in this course

      0:23
    • 3. Install Nodejs and npm

      0:38
    • 4. Install Ionic CLI and Cordova

      0:36
    • 5. Promise vs async await

      13:33
    • 6. Project Setup And Running App

      2:47
    • 7. Project Structure Overview

      6:09
    • 8. Ionic Lab

      2:18
    • 9. Ion Split Pane

      2:28
    • 10. Toolbar Styling

      2:58
    • 11. Firebase and Cloud Firestore ( NoSQL ) DB setup

      3:27
    • 12. Configure Firebase and Firestore Library in Ionic App

      2:57
    • 13. Responsive Login Form UI

      9:11
    • 14. Login Form Validation Part-1

      10:04
    • 15. Login Form Validation Part-2

      15:00
    • 16. Login Form Validation Part-3

      2:41
    • 17. Signup Page

      7:27
    • 18. Firebase SIgnup/Register with Email and Password

      13:57
    • 19. Firebase Logout

      3:36
    • 20. Firebase Login With Email and Password

      6:00
    • 21. Firebase Auth State

      14:07
    • 22. Firebase Google Login Web

      6:59
    • 23. Android Studio Setup and Set Environment Variables

      4:09
    • 24. Run Ionic App on Real Android Device and Style Native Status Bar

      5:41
    • 25. Firebase Google Login For Native Platform ( Android, iOS )

      15:17
    • 26. Firebase Google Logout For Native Platform ( Android, iOS )

      3:29
    • 27. Profile Page

      13:53
    • 28. Fetch Product List From Firestore DB

      9:18
    • 29. List Product UI

      10:10
    • 30. Add Product Form UI

      10:30
    • 31. Add Product To Firestore DB

      9:29
    • 32. Get Product By Id From Firestore DB

      8:28
    • 33. List Product UI Update

      1:29
    • 34. Product Detail Page UI

      7:18
    • 35. Update Product Form UI

      12:04
    • 36. Update Product Firestore DB Service

      11:35
    • 37. Delete Product From Firestore DB

      7:43
    • 38. Build Ionic App as PWA in Production Mode and Serve with Node.js Server

      6:02
    • 39. Customize icon and splash screen for Native Platform (Android, iOS)

      4:47
    • 40. Build APK in production and release mode

      2:06
    • 41. Create Keystore, Sign APK with Keystore and Confgire SHA-1 Key to Firebase

      6:40
    • 42. Source code

      0:34

About This Class

Write once, run anywhere: Ionic 4 Angular with Firebase and Cloud Firestore NoSQL DB. Build Real World ionic 4 with Firebase Auth and Firestore DB


What is Ionic Framework ?

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

What is Angular?

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

ϟ About FIrebase Cloud Firestore

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.


Advantages of Ionic Framework:

 Cross-platform

Build and deploy apps that work across multiple platforms, such as native iOS, Android, desktop, and the web as a Progressive Web App - all with one code base. Write once, run anywhere.

 Web Standards-based

Ionic Framework is built on top of reliable, standardized web technologies: HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.

 Beautiful Design

Clean, simple, and functional. Ionic Framework is designed to work and display beautifully out-of-the-box across all platforms. Start with pre-designed components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme.

♦ Simplicity

Ionic Framework is built with simplicity in mind, so that creating Ionic apps is enjoyable, easy to learn, and accessible to just about anyone with web development skills.

♦ Ionic CLI

The official Ionic CLI, or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more .


You will learn the following things in the course:
♦ Build a real-world ionic app with angular and firebase, cloud firestore DB.

♦ Single codebase, run on any platform: web, native android, ios.

♦ Firebase email password authentication in ionic.

♦ Firebase Google login for Web.

♦ FIrebase Google login for native android, ios.

♦ CRUD operations to cloud firestore db in ionic app.

♦ Build ionic app as PWA.

♦ Build APK for production & release.

♦ Create a beautiful and precise app icon and splash screen.

♦ Deploy the app to native devices.

♦ Serve ionic app with Nodejs Express.

♦ Deep understanding of ionic UI components and its behavior on different platform such as android, ios.

♦ Various Module loading Strategy in Angular and how ionic uses it.

♦ Angular concepts such as routing, modules, components, services, injectables, conditional classes and much more.

♦ Powerful reactive form validation using Angular in Ionic.

♦ Responsive design with Ionic Grid.

♦ Ionic Split Pane View.

♦ Ionic Pull Down To Refresh.

♦ Create keystore and sign APK

♦and more

Transcripts

1. Introduction: Hello, everyone. And welcome to my core Sonae Nick for England with fire base and cloud Firestone. Davey, My name is a record I probe and I'm going to be an instructor in the schools. So in the schools were going to build the antique for app with the fire base authentication on. We will use the fire Store DB as our database. We will implement various parables, authentication strategies such as email in the password, as well as the Google authentication that works on both Web browser as well as on the platforms such as Android or IOS. We will build fully responsive design that skills from the mobile so the larger devices and not only an application will be fully responsive, but it will totally geared up to the plate forme on which it is running. Okay, so that's the beauty off the only com print. You just need to write it once, and it is automatically going to adopt to the platform on which Europe is running, so you don't have to handle the different way for the different platform. It is automatically going toward up particulate form on which your happens, and at the end of the course. We will see how to build an a gap as a progressive ever in production world, and we're going to serve this build with, perhaps over, such as Norges, for example. It will also see how to customize the icon in the splash screen for the native platform, and we'll finally buried our epic in the production on the list mode so that it is ready to be published on the play store. Ondo make your have to be ready to be published on the place toe unit to sign that a BK with your donkey so we will see how to create your own key store and how to sign your epic with your key. We're also going to configure the essential one key to the far this console, so make the table logging work properly. So if you're looking to build fully responsive real world, I nick for up with various Fatima's authentications prejudice. And if I start no sequel, baby than this course is for you and I'll see you in my first lesson 2. Tools used in this course: Hello, everyone. So in this will do I just quickly wanted to show you the tools that we will be using in our course. So for the quarterly that I'm using, the V s scored on for their criminal. I'm using this. Come under terminal for windows. Okay. And if you want to have the exact same set up as me and then you can download this tools. So you guys, that's it. Just wanted to give you a brief information regarding the same on. Thank you so much for watching this video. 3. Install Nodejs and npm: Hello, everyone on in this video, we're going to see how can you install Norges and NPM on your machine? So don't install it. You can simply visit, nor J start org. Then go with your download section on You can our downward according to an operating system . So as you can see, I've already downloaded all you have to really simply double click an install. And once you're done with the installation you can head over to their terminal on. You can simply say Lord hyphen V to check the north version on NPM hyphen. We protect the NP emergent and then pin comes bundled with the Norges so you don't help. One started explicitly. So they're checked for this video. Andi, thank you so much for watching it. 4. Install Ionic CLI and Cordova: Hello, everyone on in this room, we will see. How can you install the Ionic, Scylla and Cordova on your machine? Sort of started simply on this common and AM stall Hyphens e unique on corridor on. Simply hurt. Enter on. It will install both the tools on my system. It is already installed. So let me show you. So one soon started completely. Simply check the an equation by running. I nick hyphen we and take the Cordova version by running this command. Cordova Hyphen B. Okay, so make sure you have the installation done on. That's it for this video on. Thank you so much for watching this. 5. Promise vs async await: Hello, everyone on in this video, we are going to understand how they think of it. Differs with the promises. And how can you work with the single right? OK, so I'll just explain you by example. So let me this create a file over here called us. It's in Kobe. It okay, And you could name it, whatever you want. So first of all word I'm going to do is I'm going toe create a promise which is going to get result after three seconds. Okay, so those three second can be any icing task in the world. Example such as an a p A call to us over which is taking some time to get the response. Okay, but here, I'm just going to make it off the set time old method which is going toe simply return the result after three seconds. So, first of all, let's create the promise. Okay, on, we're going to work with this promise. First on, as soon as we're done with the promise, then we will move one video single bit. So there you can clearly on the understand the difference between the think of it and the promises. Okay, so for stole here. I'm going to create a promise card as display message. Okay, so there's basically returns new promise, Okay? And the force argument is always result. And the 2nd 1 is Did eject. Okay on. I'm going to make use off the set them up method over here, so I'm going to simply suspect emote. Okay, so this receives a call back, so this called Big is going to run after three seconds. OK, so here we specify their timing milliseconds, hands 3000. So here I am going to simply it is all the promise. Okay, So I'll resolved with a message which we will get as a parameter. So this particular function okay said it was a space turned over here. Now, the way you can simply work with the promise is by calling this function okay on, you will get it, then call back. Okay. On inside of that called callback, you will get the dessert as soon as this promise is fulfilled. Okay, So, in this desert, let us simply console log this popular dessert. Okay, on as far as the pedometer is concerned, let me just simply pass. Hello. Okay. So hopefully this makes sense. Now let me open up terminal that I'm going to simply say North unsinkable torches so you wouldn't see it right? After three second, we will get out of my search. We just Hello? Okay, as you can see now let's assume that we want to bring more message. Let's say we want to make more AP calls. OK, once we have this result. Okay, So the idea is to only make another promise, Saul, when the 1st 1 is the result. So the way you can do it is by running your task in this call back only, OK, right. If you do anything right after this, it is going toe ground radar. We write, for example, let me just simply print any log and let me just employed on this file, okay? So, as you can see, this is printed right over here, because this task is running a synchronously on. This is the callback which is executed when this task is done executing right. So when you toe put our second card in this callback only. Okay, so here I am going to simply say again, display message. And this time I'm going to pass death. Okay, so again, we will get it, then called back. And then again, we'll get dessert. Okay, so here also, I'm going to simply console log the results. OK, on in sort of this call back. I'm going to make another call to this function. Okay, Let me to simply the messages wassup on. We'll get the results over here. OK, so now what will happen is first of all this promise with lexical on after three seconds will get the hello. Then I get after three seconds, Will get did there. Okay. And then I'll get after three seconds, we'll get the What's up. Okay, so they destroyed with on this now, right? So we got all of this three message. OK, But the problem with this is that we are basically and bringing to the callback help problem. Okay, on this is one of the biggest problem when working with a singleness task in javascript. Okay, so you end up being in callback. Hell, right. So let's say you have five more calls, right? So just imagine what kind? Of course it would look like, right. And if any of the promised fails, then we need to up, like catch, block, toe each and every promise. Right, Because we never know which promises going to get rejected. Right. So what we need to do is we need to apply catch block. Okay, which receives the other object. Okay. And they need toe. Bring this era right over here. Okay. ATM. It'll Buddhists for each and every promise called. Right. So let me this copies, baster. It'll heal it. And Mr Door here has been right. So now you can see that How are court is looking? It is basically ended up in the callback. Hell, right, so this is not a reliable court. Okay, so the a think of it, keyword basically allows you to work with the promises on it makes your court more readable by making your court look very cynical. It's OK, so this is off course looking isn't gonna score right, because we have a lot of call backs over here, but like to see how can you work with the think of it on, do the same thing over here. Ok, bring the same message is okay. So remember that the thing of it works with the promises only. Okay, So, first of all, I'm going to create a function. Okay, so for example Const. My function. Okay, on in this function, I'm going to call this promise display. Miss it. Okay, so the way you can call the promise with the easing of it keyword is by first awful writing the overt keyword. Okay. And then you need to specify your promise, which is display message. Okay, on off course it is expecting an argument. So I'm going to pass the hello as well. Okay on. Always remember there to make use off off key word. Your function. It's to be a sink. OK, so wherever you're writing the awake, give all your function, it's to basing. So I'm going toe put the sink keyboard over here, okay? And I can simply get the result Were here like this. Okay. In fact, what I'm going to do, I'm going to declare the results over here, which is going to be empty. String is off now, and I just get saying this resort to this particular variable. Okay? Now, what I need to do is simply again called the display message, okay? And just passing the my sister. I want to pass So here this time I want to pass there, Okay? And I can again simply assigned the desert. So this particular variable Okay, on again, I can do the same thing with Newman. Said if it is wassup. Okay. Now, important thing to note here is that this is in call Will only exclude once this is fulfilled. Okay, so that's the beauty about the thing of it. So the of it is actually going toe stop the control flow moving forward until and unless this particular promise is either results or reject. So that is the most important thing about the thing of it. Hence we don't end up in the callbacks, right? Because this is basically waiting until and unless this problem promises resort. Okay, so our control flow is not going to move forward. And let me add the console log over here so that you can see properly the sequence off execution. So here I bring the result over here. Simply copy this printed again and print it again. Okay. And let me simply commend the promise out so that you can, of course, see properly. So let me just say this on alleged go to their terminal. Okay, clear the console and run this file. Okay? And I think I forgot to call this function. So let me just simply call dysfunction as well. Over here at the bottom. Now, on this file on hit. Enter. So let's see. What do we get? We got the result as hello for civil over here. Then we got there, and finally we got B. What's up? Okay, Now you can yourself compare the court difference it brings when we worked with the promise and when we worked with the think of it, this court is extremely straightforward and readable to the developers as compared to this one. Okay, so you can imagine how easy and efficient it is to work with these. Think of it. Keyboard rather than the promises. Okay, on. Even if we talk about the error handling, it is so much better in case of a single bit as compared toa the promises. As you can see here, I have to apply the catch block to each and every promises, right? Okay. The reason is that any off this promise can get rejected, right, But in gets office, innovate The overhead keyword throws theater as an exception. Remember, this promise is rejected. Okay, So what you can do is you can handle the exception using just single try gets block. Okay, so let me show you what it looks like. So let me. I did write gets blocked as well on. All I need to do is simply bring the adult over here in the console log. Okay, so let me just do it on. Let me just take everything from here, okay? And pasted over here. So now if any off this promise is rejected than it can be simply handled over here in this sketch block, OK? So as you can see how good your core looks of a new work videos Think of it as compared to the promises. Okay? And let this even try. Do it on a scenario to show you the other case. So let me just come in this out. So let me this even show you an example how this cage block will be executed. So let's on this particular promise. My number divorce up messages saying we need to basically reject the promise. So here I can simply say if the message is required so what's up then? Simply rejected and simply say something went. But all okay on here are also I'm going to our didn't statement so that the court blocks is not executed for that. Okay, So letting us embassy of this large garbage terminal on dry road on this fight, so you will see that force will get the hello message. Then they there. And as soon as the boss up, our task is as executed will get there. So, as you can see, we got there on it is here in the something went wrong. Okay? And we're able to do this bites in applying a single catch block. Okay? And in case of promise, we had hoped, like edge, block to each and every promise called. Okay. And one more thing I would like to tell you about the think of it. Keep it. Is that the await keyword off course expects the promise. Okay, so in our case, it is returning a promise. So it is working. Fine. OK, so you can apply the orbit keyword on lee to do two things. The 1st 1 is if you're function, is returning a promise which, in our case, it is doing OK. So the display messages returning a promise or your function should be facing function if it is in order turning a promise. Okay, So remember these two cases, Either your function is returning a promise or your function is an amazing function. So let me show you by example. So let me There's declared a function over here quoted as greetings on, let me make this function as a sink. Okay? On it is going to simply return, for example. Hey. Okay. So now I can apply the gatekeeper to this getting function because it has these in Cuba with it. Okay? And remember, I just told you right now that either the function has to return a promise or it has to be amazing function. Okay, so let's just rightto apply the await keyword. So this greeting function okay on, let me simply get the result here and let me even console lobby. So now I'm going to execute this. But before that, let me to simply let him comment about this court blocks so that we don't get any sort off better. Remember, this particular promise is executed. Okay, so let me just go be their dominant on on this fight says you can see we Gardez Hey, my sexual here, which is printed over here, right? So now let's understand what special difference does the ace in keyword makes to a normal function. So Annamarie off lies in keyword toe a normal function, and it returns the value than this value is not return as a simple value. Instead, this value is returned as a promise. Okay, so what it will do is it will try to always result this particular value as a promise. And that's the reason why you are able to apply the orbit. Key word on the matter of the fact is, if you are using this hazing function, then you can also simply say great things. Thought. Then you can apply then over here. Okay, so the reason you can do it is because this is basically resolving as a promise. Implicitly, you are not able to see it. But the Zinke what is doing that? Okay, so let me one show You Okay, so I'm going to simply quickly console log they deserved over here. Okay, Now let me go to their dominant and run this file so As you can see, we got the value right away. So there is. This was all about these. Think of it. Keyboard on. I hope you were able to understand this on. Thank you so much for watching this video. 6. Project Setup And Running App: Hello, everyone. So, in this widow, we're going to create the Annick project using the annex. Ally on. We're going to simply it on the tab in the browser. Okay, so do create any projects in played on this command, which is unique. Start. Then you have to specify the name of the project. So let's call it as I nicked for iPhone angular iPhone fire base. And then you have to specify the type of different book that you want to use in this hyphen . Different type. Attribute. Okay. So I think Ford is trying to become free. More diagnostic that wins. It doesn't depend on the single framework, as it used to do in the previous version, such as I nick three. Okay, So earlier. And he used to work with only angular, but now it works with all different books, such as they react of you in England. Okay, So if you're doing space for this hyphen in front type attribute or the argument than they defaulted from Baghdad will be tools and will be angular itself. But still, I just wanted to let you know that you have to specify this half a different type two like the an ignore that of it framework you want to use. Okay, So he had, Of course we had using the anglers. I'm going to simply say angular, okay? And simply hit. Enter. Then it is going to ask you the starter templates. So it was really comes with three starter templates with our tabs side menu on the blank. OK, so as you can see on the screen, this is how the while will look like if you use any off this re template. And in the last you have basically some example applications such as my first step for the conference app where you're gonna have a look at some of the example application for your reference. Okay, so it's off now. I'm going to tow this head menu on simply going toe hit. Enter on. It will take a while. For the first time on as soon as it is done, I'll get back to you. Okay. So, as you can see, the project is done installing, so I'll simply navigate to the folder. Okay? On these other files off the project on to simply start this over. I'm going to some deal on this command which is I, Nick. So Okay, so it is going to create the heart of the order developments over which is going toe basically reflect whatever you make anything this in the cold base. So those changes will be automatically reflected on the fly. So let us see what started Template does the panic brings. So, as you can see, here is the starter template on Here is what we asked for for the side menu. So if you open up the developer council, if you basically inspect on leak on this pretty well, Britain, then you will navigate this mobile view. And as you can see here, is this item a new that we asked for in this letter template. Okay, so that's it for setting up the project and starting your sober. Okay on. I hope you're able to follow along on. Thank you so much for watching this video 7. Project Structure Overview: allure even on in this room. We're going to have a look at the project fight. So let me open up this for letting the coordinator so gonna say court space. Start on. You can do the same if you're using the V s court. And as you can see here at the project file their does. Undeterred by the Knicks, Sheela selects. First of all, start with the Packers Georgeson. So this is, as usual, your package gorgeous and file, which holds your library on. You have various a script as well. Okay for building lending on starting your server. Okay. And videos of the risible. Then if we move other than you have the DS conflict gorgeous and file. So this is our typescript specific configuration. Okay, Next, you have the DS link and gorgeous and file. So this is used for lending your core base. So that means it will check for any sort off court for mating at on the business off rules that I defined over here. OK, so as you can see, here are videos. Rules that define okay on glinting will throw the other according to this rule, and you can customize them as well. Ok, so here is the whole rules. Object. All right. Next, if we move further than we have this, I nicked or conflict gorgeous and file. So here you have the basic information different, such as the name of the project and the type of framework used on this integration field will hold any sort of integration information that you do with your application, such as adding decoder applicants. So you will see that over here next if we move further than we have been garages and file. So this is the contradiction file for your angler project. So, as you can see, you can do a bunch off optimization such as changing the output part again so you can start off a double double double. You can specify some other folder in which you want toe basically compel your application to okay. And you couldn't do alter of changes over here. Okay. And if you see properly, then as you can see, some of the files from the SRC folder, such as variable gorgeous uses, which is used for teaming on the global daughter says is there is used for the global Stelling is included over here in the angular Jason. Okay, on those are present inside of the SRC folder. And you also have the confrontation for environment filed a placement, as you can see. So I'm going to explain about this in just few minutes. So this is all for the England urges and file next, every move further than let's go to this our see folder. So if we go to the effort other than as you can see, you have your videos, but just difference at his home page list, which, Okay, you also have the holding file, which is a pie for noting Got more little tortillas. Okay, on if you have a look at the root model with just abduct model tortillas again. So here it is. Here is a road model, and it is basically bootstrapping the app competent, which is president or here. Okay, on this is your world competent basically. And you're rude. Model is basically initiated by the men tortillas file. So, as you can see, it is basically bootstrapping the up model. Okay, on the model is bootstrapping their company. Okay, on in sort of the me India's is where your application basically start. Okay, on here. If we have a look at the further folder, then we have the asserts folder. So here your strata Gessert goes such as the images I can't check Tre. Next, you have the involvements folder. Instead of this, you have to files involvement or prod Ortiz. And in woman dirty s. Okay, so this is very important in woman. Variable on. One thing that I want to tell you is that make sure that he also pulled all your environment available in the broad door ps as well, because many of the people forget to place it over here on day. Just put it in sort of the involvement dot appears. So what actually happens is that whenever the application is built in the production more then all the reference off this in moment. Ortiz is replaced by the involvement of product. He is by the sea light self. Okay, so he won't know. Your project is refering to this file in the production. More the sea level automatically replace the environment. DOrtiz, references with the product. DOrtiz. Okay. So make sure you have the proper environment. Variable in both off this file, okay? Especially when you are building your application in the production more okay, because this will be given as a priority over this file. Okay, Next, you have the team folder insert off which you have This year's is suitable defiance, and we will see in the upcoming widows. How can you customize it? Okay, so here you have videos, colors that are defined, such as the primary secondary at sector. Next, you have the global daughters sisters file. So this where you can put your global styling okay, on as I told you, that main door TS is the one which is basically bootstrapping or striking your application . OK, on you have some file for their testing suggest as tortillas. Then you have the poly field. RTs, which is for compatibility with various blows, is okay, so that's it for the files in the folder on there will be a couple off more files and folders that will be created and the runtime. So those are the platforms www plug ins, resources and conflict dot xml. OK. And you will see this in the upcoming videos. So played farmville basically hold the core base for the native platforms such as and northern Iris. The triple W folder will hold the compiled Babb. OK, so it will hold the Bunbury Js file on the next order, Stammel along with some start because it's that didn't take and put on any soul. Right? So here we're basically using their typescript and our locate, so everything gets compiled using a corn on the whole compiled court based basically goes to the triple W folder, which you can serve it on when any web server. Okay, next, you will see the plug ins for the rest. Well, so this plug in folder will hold the native plug ins that you will be using insert off your application. Okay, So since we'll be using the cord or plug ins so you will see that any sort of Kordell up like in that you install will be present over here in the plug ins for that. Okay, Next, you will see the resources so that resources is going to hold the icon and this special screens for them they're deployed from. And at last you will also see the conflict dot xml file. So this is a conflagration filed for the native platform, such as you can specify the application. I D or the package idea. We're here. Okay. You contains the words off your application. You can also change the app name itself, its description as well. Okay. And you can do all sort of customization over there. Also which we're going to see as well. Okay, So this was all about the project structure on. I hope you were able to follow along on. Thank you so much for watching this video. 8. Ionic Lab: Hello, everyone. So, in this well, we're going to see what is antique lab. So I Nikolaev basically provides. You are special. Kind of few. Why in the browser Very in. You can see how the user interface off your application looks side by side on various platforms such as android or IOS. So let me assure you eso to open your application in sort of the antique lab introducing bid on this command. I nick Space lab. Okay. And if you're running this for the first time, then it will ask you to install the clap package. Okay, so make sure you install it on. Then it will automatically open the app inside of the browser. So let's just wait for the vile tell it, ask for the Annick Lap records installation. So, as you can see, it is asking for the nickel epic it installation. I'll simply say yes. Okay, on it will do. The installation on it will open up the app in the browser. So as agency Ah, the Annick lab is opened. Okay, on usually your application runs on 81 double zero port, but the Annick lab runs on eight doubles on Dhere. You convincingly Tuesday Videos, platforms. So, as you can see, I have chosen the end Lord and the IRS. Okay, so I can simply side by side compare. How does the u I look? OK? And it's not like you have to always make use of the Annick Lab are toe basically check. How does the U I look? You can simply visit the regular server, so let's head over to the 81 double zero. Okay, on here, you can basically open the developer console, and here you can choose devious device such as, for example, iPhone on simply hit. Refresh on now is again. See, you get the IOS view over here. Okay, on. One more thing that I would like to tell you about the Annick lab is that, for example, if you navigate through some other route, OK, then you don't see the changes in the U. S. On if you do it outside. So let me assure you so they can say you can see the eating this in the Ural, along with the query programs and everything. So I think it's a better idea to basically tested outside. But I just wanted to give you the brief information about the Ionic lab on works its use. Okay, so that was their sit for the Annick lab on. I hope you're able to follow along. And thank you so much for watching this video. 9. Ion Split Pane: Hello, everyone on in this video, I wanted to talk about this plague pen view. So if you have a look at the screen carefully Currently we're on the larger device. OK, so as soon as I go to the smaller the ways, then as you can see the hamburger, many appears. Okay? And as soon as I go to the larger device, the hamburger menu is basically gone. And let me one show you bust thinking the windows so that you can see properly. So as you can see at some point, the hamburger menu basically disappears right on you is basically split it between the iron menu and the rest of the page. So how this is happening? Okay, so this is happening because of the iron split pen view that is president inside of the route app competent. So let me show you. So if you go to the SRC AB, then go to the abduct component or the steamer. So this is your world competent or that stable? And as you can see here, is this company with this I am split pan. Okay. And instead of this and spread pen competent, you have basically two Childs. The Force one is the end menu, and the 2nd 1 is there are probably it. So between this basically spread happens. Okay, so you have an menu on the one side on the railroad late on the right hand side, as you can see. Okay. So whatever page you never get toe appears on the right inside, and this is the end menu. Okay, That stays over here. Okay, on. If you want to know more about the and split plan competent than you can simply visit there , nick framework dot com slash dogs on If you go to these components on, basically, search for split bent. Okay, So as you can see, here is the and spread panic competent. Okay, on. They have basically given the default break point, which is? Lt okay, on the size is 992 pixels. And if you want to customize the break point, then you need to basically use this when property or when. Attribute on the i n spread penned components. So you need to specify it. Even property over here, but they're the Ford one. Is algae barred for a replication? I would like to actually remove this script pen view on. I would like to keep the hamburger menu always. So for that word, I'll does else remove this spirit plan from here on removed from here as well. Okay, so let me see if this now let's go to the browser and see How does the u I look now? Okay. So as you can see, this is how do you I looks so we have the Hamburg Germany over here and let me one show you by minimizing and expanding this screen size. So let me show you, as you can see, the hamburger. Many always stays there because now we don't have this split pen view. Okay, so I guess that's it for this Brakpan competent on. I hope you were able to follow along. And thank you so much for watching this video. 10. Toolbar Styling: Hello, everyone on in this video, we're going to see how can you basically style little bar and add color to the toolbar? Right So grandly it's white on. Since we're going to have multiple pages insert off our application, we will have multiple school bus, right? So instead, off is telling them individually, What I'll do is I'll make yourself seasons variable. So let me just go to the court base on I'll go to the variable daughter assesses filed and here I am goingto ad seizes variable Corliss high Funny finale in high frontal bar hyphen Bag around. Okay, let's suppose that I want tohave the background. Same is our primary color, which is different over here. So since it is defining start off available, I can make use off this variable. Okay, so here I am going to first of all, use the CSS water function and instead of this and going to pass this particular variable. Okay, so let me say this and let's go to the browser and see, How does the u I look? So no residency there told what its primary color on there is one more improvement that we need to make which is toe maybe text. Wait, insert off it. So here I am going to simply say hi Funai finale in I found toolbar than the color as simply the white color. OK, so I'm going to pass the hash scored off the weight. Let's go to the browser on DSI. How does it look now? OK, so this looks much better. Okay, on if I go to the iPhone device and basically the fresh Okay, So this is how it looks on the IOS. OK? And to be honest, it doesn't look good on the IRS. Right. So now we need to basically have the primary toolbar for the android and develop, but not for the IOS. So how can we basically do it? So the word style on the basis off plate from you can basically make use off two classes Carl smd and others on place your styling over there. So let me show you a hero. First of all, declared the empty glass OK on this will work on the android and web. Okay on. Then I'll start to clear the IRS class on this is only going to work on the IRS. Okay, so this means that whatever style that you are insert off this empty is going to work on the android and developed on whatever you add instead of this is going to only work on the I s spread from. So now what I'll do is I'll basically removed this from here. Okay? Ongoing. Took place it inside off this android and web. Okay, because we want to basically have the Primerica little bar on Lee for the endured in the weapon or for the eyes. Okay, so let me see of this. So, as you can see, the Primerica Little bar is basically removed from the IOS. And if I go to the android device and refresh the application, then a second. See, we have this primary color toolbar. Anyone on the web like majestic of fresh again. As you considered persist on the Web is Well, okay, So this is how you can basically style it on the basis off various platforms adjust android or IOS. So agrees there trick for this particular video on? I hope you're able to follow along. And thank you so much for watching this video 11. Firebase and Cloud Firestore ( NoSQL ) DB setup: Hello, everyone on in this video, we're going to set up the fire base and glorify store db. So first of all, visit this. You are really which is consoled or five years dot google dot com. Okay, on you will be presented with this page. Ah, here and symbolically going ahead project to create a fresh new project. Okay, so let me call it as my three. Okay, on simply Klay can continue on. You can name the Abbado you want, and now it is asking for the goal and undertakes. So as of now, we donated. Okay, But you've been selected. If you want on simply, click on, create project OK on it will take a while for the first time to sort of the project. And I'll get back to you as soon as Kristen. So as you can see, the project is ready. Symbolically going. Continue are now well copied. EBay key for the web from here. So simply click on this web. Burton. Okay, on it is asking for and during the name. So let's collard my iPhone pipe on three. You can add it. Whatever you want on, you can also check this option for defy the base hosting. But as off number donated, okay. And then I was completely gone today. Stood up on it, will basically gave me the PKK and everything which will use in our corpus. So I'll simply copy this. Okay, on going to simply continue to the console. So let's go to the court based on I'll basically go to the involvement file. Okay? With this president over here, on going toe Addo and tree over here card as firebase conflict and going to simply pays the object. Right. I'm going to do the same in the environment or broad. Ortiz is well, okay, so let me go to the environment are brought dirtiest on pasted over here. Okay, so now we will be using the fire base for basically two things. The Force one is the authentication, and 2nd 1 is database. So for the database will be using the cloud five story Be OK, so first of all, I'll set up the authentication, so simply go over here in the authentication menu. Okay, on go to the signing methods. So we're going to have two types off signing strategies in our application. The 4th 1 is the email password on the 2nd 1 will be Google sanding so symbolically condescended icon on enable them all right, and simply save it on. Then we will also enable the Google also symbolically Condi's on select your email click on enable and simply here Don't say Okay, so you will see that boat off This sending methods are enabled the email password and the Google now well, basically set up the database. So simply goto this database money over here and here. Edible Basically asked you to create the Cloud five store dbs Urgency. So simply click on this created ofhis ondas off. No, we will start with the test more on some blue. Click on next on going to simply click on Done. All right, so it will take time to celebrate database and I'll get back to you as soon as it is done. So as you can see, this hair that was done on this cloud fire store, Debbie is a no sequel databases, which stores the data in the form of document in sort of the collection. So in the upcoming videos, you will see that the collection will be created over here on you will see their data. We here in sort of the collection. Okay, so that's it for setting up the fire base and they glorify store db on. I hope you were able to follow along. And thank you so much for watching this video. 12. Configure Firebase and Firestore Library in Ionic App: Hello, everyone on in this video we're going to install the libraries for interacting with the fire base and the clarify store db in angular. So basically, we really need to liberalise the force. One is the advert anglo slash fire on the 2nd 1 is the fire base itself. So that's install it. So we're not simply said that angler slash fire and the second is the fight of its Ok, Andi, I'll get back to you as soon as it is done installing. So as you can see, the installation is done, we have at the right angle fire and the fire base over here. Now what else? Simply doors. I'll basically goto the court based on gonna goto the Abarat modeled RTs which is our wrote a model. And here I am going to import couple off model s so that we can further use it to work with the fibers in the clarify store db So the force murder that I'm going to import will be angler fire model. So let me do the same. So when I'm bored, the angular fire More detail on this basically comes from head to rate, angular slash fire All right. Next, I want to basically import the Anglo Firestone murder Seven assemblies in England. Fire store model on this basically comes from moderate angler slice fire slash fire store. Okay. And at last we need the angler fire outmoded. So going to import it. England fire. What more did on this? Comes from the rate angler slash fire slash out. All right, so first of all, I'm going toe import this model inside of the imports today. So here I'll simply say England fire model. Okay, on going to call the initialize app matter on this particular model on in the force argument, it basically expects the fire base configuration that we already have. Indian mom and RTs file residency. So let's fetch it from there. So go. No simplicity and moment start five The best conflict. Okay. And in the second argument, you can basically pause the name off the ab selectors and legal it. My three on this is optional. You don't have to necessarily pass this name. Okay, Next, I'm going to import the angler fire store model Izabal. Okay, on. We also need a angular fire out model. Okay, So going to inboard the same All right, So that's it for conferring all the models in the road model on. Let's just check if everything is working fine by starting this ever. Okay, so going to some blood on my neck, So And if everything works, find this. Our world will be started successfully. So as you can see, her application is running without any issue. That is. Neither in the consul is well, so that means we're properly configured. The fire base situated confirmation on That's it for this video. And I hope you were able to follow along. And thank you so much for watching this video. 13. Responsive Login Form UI: Hello, everyone on in this video, we're going to design the US off the log in form. So the first thing that I will do is to generate the log in page itself. So I'll simply open up terminal on here. Elsa, any generate d stands for Generate. Then I'll sip it on the name of debate, which is logging. Okay, so it is going to create a separate log in page over here, and it is also going to create the route entry in the routing model. So let me show you. So here is the log in page files on here is the voting entry for the same. Okay. Now, the one change that I would like to do is to set the log in page for their default rolled instead of homepage over here. Okay, So if you go to the default wrote, which is this one? Okay, then have basically open onto the homepage because this is what is different over here. So instead, off this, I would like to have the log in page open. So let me say this on Open up the fort out, Okay? And let's see what happens. So now, as you can see the log in pages open. Okay, so now we can start descending the log in page. Okay. On before this and in the log in page, I would like to show you some of the information regarding the responsive design in Ionic. So if you basically visit antique facebook dot com slash dogs And here, I want you to have a look at the documentation. The Force one is the responsive grid on the 2nd 1 is this year says utilities. Okay, so the responsibility is basically container for the rose in the columns. Okay, on you can basically defined the great using the I in great, competent and insert off this. You can have the iron rose in the columns on the iron. Greed, basically by default, takes the 100% worth off the screen size. Okay, on, if you want to expand this great go only certain size than you need to specify the fixed reputable okay, because of the screen says is quite large than they content. My take up whole space on your ey might not look so good. So for that, you can make yourself a fixed at a wood which is a specified over here. So what this fixed afterward will do is it will expand toe only site in size according to depict points that is defined over here. Okay, so if your screen is greater than 1200 pixels, OK, so whatever the pixel it may be every is greater than 1200. The new content will only expand 240 pixels. Okay, so which is a great thing And I highly suggest you to use defects irritable on the great size. Okay, Andi, have release of that information as well. Such as you can make use of this size that built defined this as off the column. OK, on the other document that I was talking about is the CSS utilities. So you have various pre defined seasons classes for next mortification 11 placement element display content, space, flex properties. I need big points. Okay. So you can make it off such classes, for example, and text start to align your text toe the start. And there are numerous other dioceses classes that you can use and start off writing your own custom ceases. You can make it off the existing success classes. Okay, so now that we have a locate both off this documentation. Let's start this. And in the u Y for the log in page. So the first thing that I would always go to the Logan based on estimates on here, I'll first of all, it defined the angry. Okay, inside of this, I'll have the iron group on inside of this. I'll have the iron Column, okay? And I would like to have the I in card as well in sort of wind guard. I'll have the Iron Guard heard it. Okay, on in sort of this, I'll have the iron card title all right on here and simply say, Logan and I loved it. The toolbar title also to log in as well. So let me say this and let's see, how does the you look? So this is how it looks. And if you go to the larger device, OK? So as you can see, what I was telling you is that if you don't specify the fix that reward, then your content will take up the whole birth. Okay, So do explained the content only certain size. I'll make use of the fixed attribute on this and greed on. You will see that in just how it is going to export. Only do this sort in size. Okay, So as you can see now, what content is expanding on their to certain sides? Right. So there you go on. I would like also have the Nikon besides the title over here. So gonna go to the eye and I construct calm. So basically, go to the eye and I can't start. Come on. Here. Basically shorts for the key. So here is the icon that I need simply going to copy this ongoing tau Bay street over here . All right. And I would like to give this icon color off secondary. So let me just do this. So let's see. How does the u I look now? So, as you can see, this is how it looks on. I will incorporate this second Rick alert in our application, so I'll go to the variable daughter satisfy. Okay, on. As you can see, here is our second regular. All right, but I would like to operate it. So the color similar to the success color. So I basically took up with this thing on going to replace it over here. Okay, on average, the name has secondary over here. All right, Sir Edmund would over here as well. And I love red in all this place is so did you see this? And let's see, how does this second regular look now says you can see now it turns green. So this looks good. Now will start dating the form feels so that score to the court. A base going to go to the log in page stressed email on here. I'll basically rd I am a guard content Insert off this first over, Lila Deformed. Okay. And I'll give this for my tribute off or the complete as off so that there is no automatic cessation in the farm fields in sort of this, I'm goingto have the I an item on. Instead of the an item, I'll have the label, okay? And I'll give this label opposition off floating so that it has a specific behaviour floating behavior. Okay, on in service and level, I'll simply say email. Okay on. Then I'll have the iron input. All right. And this will be off type text. Quite simple on. Let me add another field for the password. So going to pay street over here. Okay. On here. I'll simply say password on here. The important will be password. All right. Next. I would like to have the I in Britain. Okay, on in sort of this and maternal simply say logging. Okay on. I'll give this in Britain color of secondary. All right. And I would have called sword another property on this. And Britain, which is explained, and I decided to block so that it takes up full with All right, so let me say this and let's see, how does the you look now? All right. So, as you can see, this is how do you I looks on. We have this floating labels. Now, the first thing I would like to do is tow have some sort off margin between this farm fields and important. So on the I in Britain, I would like to add the class off in March in top. So this is CIA says you're ridiculous. So gonna say I am margin top. All right, let me say this. Let's go. But the browser and see, How does it look? Okay, so this looks good. And I would like to also keep this title in the center. So let's go to the in car title on. I'll give it a class off iron text sender a light like missy of this. And let's see, how does it look? Okay, so this looks good on this. When what? Oh, great. That we can do is tow. Make this form look a little bit smaller because on the small screen, it looks fine. But on the large screen, the form looks quite big. So what? I would always basically add a size to the in column. So here, first of all, I'll give it our default size off 12. Okay, on. I would like to add a medium break point. Okay, So for the medium break point, I would like to basically give this column a size off sex on, even for the large. I would like to give it a size off sex as well. So let me say this and let's see, how does it look? So now our farm eyes kind of small, but it is not aligned to the center so far the same. I'll basically make use off another class on the andro, so it is called less iron justify content center. Okay, so now they should make the content a line in the center. So, as you can see this look good, let me go to the mobility ways. Okay, So this is how it looks on the more well. And this is how it looks on the web. And let me one tryto compress and shrink so that we can see the white properly. As you can see, this is Howard basically expanding and collapsing according to dividends break points. Okay, so the slow scored on one last thing that I would like to upgrade here for the Iron Guard is the shadow itself. So this and card comes by default with some sort of shadow. But I would like to have more, deeper shadow so far that I would like to add some custom seizes. So let's go to the global daughter Sisters files on here is where you can add your global stelling. So here I would like to add custom. She says to the iron card, Okay. And I've already prepared. The shadow ceases, so let me show you. So here it is simply going to copy this on going toe pasted over here. So let me say this Now on this will apply to all the Ionic cards President in sort of the whole application. OK, so as you can see now we have more people shadow on the Iron Guard. OK, so this is how it looks. So that's it for the logging from your way. And I hope you were able to follow along. And thank you so much for watching this video. 14. Login Form Validation Part-1: Hello, everyone. So this is the part one off Logan from Relegation. So there are basically two approaches for the formula addition in angular. The 1st 1 is the temperate 31 and 2nd 1 is reactive forms. OK, when it comes to temporary one approach, you basically apply all sort of validation on the esteem apart. But in case of reactive forms, you handle everything on the competent side. Okay, So the problem with the template driven approaches that your court becomes quite messy because you are applying all sort of elevation on the estimate part very is in case of objective forms. You handle everything on the component size, so it makes your court look more clear on you Have more control over the straight off the farm. Okay. So to work with the reactive forms approach committee to first of all, intact the reactive from smarter into our logging model. Solid score to the log in north model tortillas on Dhere. It basically comes from the ad rate anglo slash forms. So I'm going to inject little here. So gonna say the active forms model OK, and I'm going to add this thing inside of the imports are as well. Okay, now I'll basically go to the log in page tortillas on. The first thing that I will do is to declare available Korda's log. Inform on this will be off type form group. OK, so as you can see, this form group is in Tikrit from Madrid. Anglo slash forms on your farm group is nothing but a collection of farm controls on your form. Controls are basically a plate to eat and every field on you can consider each field as a form control. OK, so we're going to declare to form control over here. The 1st 1 will be email. Okay, on this will be off type form control. On the second is the password on This is off. They form. Control is well, All right. Now, as soon as this component is loaded and this NZ on, innit? Lifecycle hook is called. I would like to call two methods to create the form and the form control. So far, store. Let me create those two methods. So those two are basically create form control. All right, on the 2nd 1 is create form itself. So now we basically called both of this method insert off this NGO knit method. So going assembly, first of all, called a form control, Then I'll basically call the create form. All right, so it's off now. We have just declared the form controlled. Now here we will basically created. So here I'll simply said this dot e mails equal to new instance off the form control on. In the first argument, you can basically pause the initial state or the initial value. So this particular filled I would like to keep it as empty. And instead of the second argument, you can be significant already. Validators. Okay, so validators are nothing but the validation that you need to apply on that particular field. So for that unit, develop Gatorsfirst awful. So, as you can see, the evaluators is imported also from Theodore it angler slash forms on Let's have a soul. I would like to apply the validation off required on this particular field. So this is how you can basically do it on you can add multiple validation. So here also apply Develop vision for checking the valid email, So gonna simply say validators dot email. Okay, so this will check that your email should be valid. Okay, Next, we will create the password. A form controlled. So when I said this door password equal to noon Stents off form control. Okay. Initially, I'll set it to empty on here in the Villagers for several several editors and are required on the next validation I've heard is that the minimum length for the password should be five. OK, so that's it for the passer from control is Well, so no, Let's create the form. So here, I'm gonna say this dark log in form equals new instance off the form group. And instead of this, I'm going to positive from control. So gonna say email as this dot email on the password has this dark password. All right, so we have greatly logging form. Now, here, I'm going to simply access one more thing on the log in form, which is the looting. Just observable. So gonna simples evolution Just Okay, so this returns an observable on weaken, subscribe to it. So this observable basically emits values a Souness, the form status stains that wins as soon as the user is changing anything in sort of the form, it will basically fire the change to value okay. So we can grab it over here in this. A trip called back. So gonna simply sir data. Okay. And I'll handle this data in sort of a separate function were, well, right for the logic. So here I declare a function called Is on form value changed. Okay, on it is going to basically deceived there later on here. Basically positive data from here. So gonna simplicity this dark on formula change on going to positive data. All right, on here. I'm going to, First of all, simply control of the data. All right, on, uh, what I would like to do is I would like to also consider lock the whole logging from object itself. Okay, so that you can see properly. How does it look like? Okay, Onda. Now that we have everything ready on the component side, let's attach the form group and the form control toe the estimate. So let's go to the logging pest artist email. So, first of all, here, I like that's deformed group. So here and say from group equals Logan form. Okay. And now advertised the form control. So here I'll say form control. Name equals email. Okay. On for the password input. I would like to our ties the form control name as bus word. All right, so that's it. I think we're good to go. So let's go to the browser and tested. Okay, So if I enter any sort of values this producer observable should fire, which is value changes. Okay, on. We should be getting this console logo here, so let's enter the value over here. So, for example, if I end that anything, then as you can see, we get the cancer log on in sort of this data. As you can see, we have the value for the email on deep authorities. Empty years off now. So it is empty. Now, if we have a look at the log, inform object, then, As you can see, we have various information available regarding the straight off the form. Okay, So if you have a look at this village property, as you can see current latest falls, this means that some off the controls, which are the phone feels are invalid. Okay. And how can you basically take the form control or the straight off the farm control? It's quite simple as you consider this available. Insert off this control ski. So if you open this, then as you can see, we have this school from control that were defined. The 1st 1 is the male, and the 2nd 1 is the password. Now, you can basically take this status off each and every form controls the presidency. Currently, it says valid as false because obviously this field is not valid because it's not a valid email. And if you open up the errors than it will exactly tell you words the reason behind this form control being invalid. Okay, so this is developed later that you applied on the form control, which is not being currently valid hands. It is showing up over here. OK, so whatever validation fails, it will appear in this address. Object. Okay. And let me one show you by making one off different, complete developed. So let me clear everything on here. For example, if I enter test at gmail dot com Okay, So if we have a look at this latest logging form object, goto the controls goto the email than as you can see, the status off the email form. Control is true. And if we have a look at the others, then, as you can see, it is not right. But if I open up the password Okay on. If I go to the village status, then as a gun status falls. And why is it falls? Let's have a look at over here. So first of all, it says required toe. Okay. So, for example, if I enter two values over here, Okay? Now let's have a look at the latest form group object going to go to the controls, going to go to the password. And as you can see inside of the others, it says minimum length, right? Because that's what we defined here in the village jitters. We said that we require the minimum land Toby five. OK, so it is showing that this minimum land check is basically feeling right. And if we have a look at the email, then as agency, others is no and value, it is true. That means this control is really okay. Now let me enter more values. Okay? Over here on No. If I basically go to the latest form group object, then if I take the village state off the farm group as you can see it is true. That isn't This is true is because both the form control has a valid status. As you can see, the mill is ultimately and if I opened the password from control, it is also valid. And in both the cases, the air original as agency for the password, it is no on for the email. Also, it is basically little hands. Deform Street becomes valid because all the form controls are valid now. So as you can see how powerful it is, toe have a control over the form state. OK, so now what I'll do is I'll basically disabled this dog in Britain as long as the form state is invalid. Okay, so let's scored with the court a base. I go to the long in prison artist email and here in the and Burton I'm going toe add are disabled property over here on going to simply say log inform dot invalid. OK, so as long as this form is invalid, the button is going to be disabled. So let's go to the browser and see how does it look? Okay, So as you can see currently, the button is disabled because the farmers off course invalid. So until and unless I make all the form controls valued, this burden is not going to get enabled. So let me enter some of the films over here. Okay? On. As soon as I feel about the creditors, then, as you can see, these buttons get enabled. Right? So this is such a powerful way off having the control over the state off the form using the reactive forms. Okay, so that's it for this part. One on. I hope you're able to follow along. And thank you so much for watching this video. 15. Login Form Validation Part-2: Hello, everyone. So this is the part to off load inform validation. So till the previous part, we have basically applied the formula addition on the form by applying deformed group and the form controls. Okay. So as you can see, we have access to the Farm Street. Basically Okay, along with the others. But no, What we actually want to do is to show the error message over here just below the phone feels right. So how can we do it? So if we have a look at the other object as off? No, we have the data available, such as email, colon True. OK, And if we have a look at the password, others, then as you can see, it says required proof. Right? But we cannot simply show this thing over here. Right? So just required Colin. True. Okay, so we need some sort off static on obvious message. So for that, what we'll do is we will have a constant define where we will have the adult messages on the business off validation we have created on the field. Okay. And we are going to basically map these errors. Keys. We just president over here, so that particular constant ongoing toe prepare other object which we're going to show in the u y. Okay, so first, let's create the constant. So you go to the court base on here in the air folder. I'm going to create a new for Little Caldas constants. Okay, Inside of this, I'm going to create a new file called as form validation message dot PS. Okay, on here. I'm going to export a constant. Okay, so here else Export const. Logging on this is going to be an object on. This is going to hold the other messages for the log in form. We will have multiple constant here in this file for various other forms. Insert off our butts off knowledge. Focus on the log. Inform. So long inform. Basically have to feels the Force one is the email. Okay, on the 2nd 1 is the password itself. All right, Now insert off this each individual field, we will define the constant messages for each and every validator. So, for example, one of developed later for the email can be required, so I like the required over here. Okay? And I can have a constant message. What? The seams are gonna say email is required. Okay, So what will happen is whenever this required error arrive on the email control. OK, then we're going to basically map that particular error, toe this particular object and fetch this static message and show it to the US. Okay. On the email can also have ah, error message for the email itself. OK, so we're going to basically map Tiki's hands. I have named exactly the same keys that we can get it over here. OK, so as you can see, whenever you get this e milky in the other subject, that means the mill is not palette. So far, this message, I'll say email is invalid. All right. Next for the password, we can have the required error on here against implicit. Password is required on the password can also have one more validation. Let me just show you. So it has the validation for the millionth, right? So, like to see, how does the other object look likes for the middle and okay, so if I enter anything over here on, let's take the latest off form group on. I go to the controlled, then go to the Passover to go to the Iraq then, as you can see, the key inside of this error object is the mainland. OK, so we're going to map this key instead of this constant. OK, so I'm going to declare this mill entity over here. All right? And for the message, I'm going to someplace A password must be at least five characters long. All right, so we have all the message is ready for the log. Inform now winning toe. Add the logic to map this error object keys with the keys president here in the constant and grab the appropriate message. Okay, so let's head over to the log in page 40 years on. I'll basically add this logic. Insert off this own form value tins, metal, which is being called from this valued in the subscript called back because we need to river. Let all the phone fills other messages because user is constantly updating the farm. Right. So we need to constantly update the error messages. Well, so that's why my dingus over here. So the first thing that I will do is to actually declare an object which will hold the error message. Okay, so here I'm going to declare an object goalless for mirror. Okay, on this will be off type Any on initially ill said the email as an industry. Okay, on. Later on, it will basically hold the other message for the email field. And the next is the password field on here. Also ill started Time to string on. It is going to hold the Adam message for the password for you. Okay, so now let's ideological. So the first thing I'll do is tow treat over this former object on Tried to prepare the other messages for eating every field every time users updates the form. Okay, so here I am going to first of all, hatred over this objects are gonna say far const fade in this dark form header. Okay, so here I am in the attrition on here answered this dot form better off this field on initially else I'd like to end this string. Ok, so the reason we have toe aside it to the industry in each attrition is because we are re evaluating the error messages for all difference. As you can see, every time user updates, anything, this popular function will be called right. And we need to re. Well, you're the messages for each and every field. Right? Because the state off the form control canteens at any point of time. Now, what we can do is in this pediatrician weaken basically fast the appropriate form control and take the status off that form control. So let me to show you. So if I go to the any of the control, Okay, So, Well, basically it on nutrition for the male in the password, because it is holding their toe values. OK, another time, nutrition will either and for the email or the password. Okay, so what we can do is we can check if the form control is invalid. Okay, so we can do it by accessing this property, which is invalid. Okay, So if that is invalid, that means yes. We want to show the other message and we want to set the error message, right? And if this is false, then there is no need to set the other message to this particular object. Okay? It is going to hold the empty string only. So first of all, let me grab the form control. So Ghana's implicit const Control and I can get it from this dark logging phone dot controls. Look, it and I can access it using the current feeling the attrition. Okay, So, for example, if the attrition is for the email okay, then I'll basically crab the email form control. All right, on, if the attrition is for password, then I'll grab the password form control. Right. So I hope that makes sense. Okay? The next thing we can do is to check if that control exists, and then it is invalid. So God knows. And if control exist and then control, it's invalid. Because if this is invalid, then only we need to show the other Mrs right. So if they can pull exist on, it is invalid. That means we need to prepare the error message for that particular control. OK, so now how can we prepare the Adam? Is it? So the first thing we need to do is tow grab the others object on check this particular key existent instead of the constant that we have defined over here. Okay. So, for example, if the attrition is for the email and instead of the errors email exist, then we can fetch this particular error message. And if something else exists, for example, instead off email. If there is required over here, then we're going to pick this particular message, right? So before getting the right message, object from here like the first volley. Import this log in for messages in this particular competent. So here I am going to simply say evaluation message on this will be off type any on initial else. I did toe the logging. OK, so as you can see, it is being imported from the constants slash formulation. Right now we have this particular whole object insert off this validation message variable . Okay, so here I can simply say const such o b. J equals this Lord validation message on our collective us will grab the message according to the field that is being present in the attrition. Okay, so if this is for email, the message obesity is going to hold this thing. And if the attrition is for password that the message of the bill going to hold this OK, The last thing that is remaining is to map the key president insert off this form controller, object on map, it put this particular message or BJ Okay, So going to simply treat over the other subject inside of deformed control. So gonna save for const. G in control dot added okay, because that this word is there inside off here, as against the errors, so it will get this particular key. Okay, so we need to basically map this key So this constant on get this particular error message and cited So this formula object. So here gonna say this dot for matter, off the current attrition filled equals this dot formula off this field. Okay. And I'll Concorde innate the message O b j off that particular key. And if there are multiple keys phone in this particular situation, that means there are multiple errors associated with the form control. So gonna simply at this by its special here's so that the multiple little message can be concrete in it if it makes it more readable for the user. So the slow scored on that last word I would like to do is tow print o d former object. Right after this, four loops are gonna say console, not log on here. I'll basically print or the former object. Okay. On windows English formula. So Let's see. What does it look like? It's an urge to go to the Broza. Okay, Andi, find out anything over here in the field. Then, as you can see, we are actually holding the appropriate adult message. Email is invalid. Password is required. Okay. So, for example, if or enter the valid email, let's see what happens. Okay, so now our former object is holding the empty spring for the mail on for the past, where it is holding password is required, right? So, as you can see, how powerful is this? And let's also try to test it with other other messages, such as a minimum length off the password. So I find that only look at this over here, then, as you can see, it says password must be at least five characters long. Okay, so now we have this object ready, which is holding the exact pattern messages that we required. Okay, but there is some sort of optimization that I would like to do on this particular logic. So the first thing that we can do is to move this logic inside off a separate file so that it can be consumed in multiple companies. on in the multiple forms because I timidly, it is going to remain the same, right? This logic off evaluating the validation messages is going to apply to all the forms that we're going to use in this particular application. So for that, I'm going to generate a service on we can intake. This service in Toby is competent and access the common logic from their particular service . Okay, so first of all, I basically go to their terminal on here and say I Nick generate service on. I would like to place this service in sort of the providers folder. Okay, on for the name of the service, I'll just keep it helper. OK, so it will basically create awful lot inside of this APP folder, which is providers on inside of that, we will have the help us of it. So, as you can see, we have this help us of is over here, and it is intractable. And now we can basically put the logic where the way we have written over here and past the appropriate data in the argument. Okay. On basically right. Everything over here so that we don't have to write this again and again in every company. So here, really basically create a mentoring. This office called us Prepare validation message on this function is going to require some sort of data toe evaluate developed Asian messages. So the 1st 1 is off course. The form object itself. Okay. Next, we will also need the validation messages. All right. Next, we will also need deformed feels. Okay, so we can basically evil. You're deformed fields from the form object. Because if you have a look at this form, object carefully. Then we have all the farm fields in sort of this form control. But still, let's pass it from the component itself. Because it is not a good idea to revalue it. Each and every time you asserting this anything on, we basically found out. First of all, water The form pills for which we want the people devaluation, Mrs right. So instead, let's try to pass it from the component itself on. I would basically copy this whole logic on going toe. Cut it from here. Okay. And going toe cut everything from here on going Tobe a student set off here. All right, now we looked up. Get this particular logic over here. So first of all, I basically update this former references with the form fields because that this world is holding all the farm fields. All right, on. I'll basically remove this thing from here. Okay, So just going to replace it with the empty Okay, so let me just do it. All right. On the next thing I always toe instead of flogging form, we really dynamically get the form object. So gonna pay straight over here. And I think this lows good on dead. What we can do is return. The upgraded phone fails, it will hold the appropriate message. So I'd be end of this function. Gonna say Britain phone friends. All right, on, I basically use this matter. Insert off the log in page tortillas. So first of all, let me inject this service. So gonna see a private help. Us. Service on this comes from helper service. As you can see, it is injected. I'd get up on here. I can simply say this door help a service dog prepared validation message on inside of this for several and took positive form. So inside this dark log in from next annual to pass developed Asian Mrs. So I said this dark validation messages. Okay. And next, we need to basically positive farm fields. So cannot simply passed this for matter object because this object is holding the phone filled. Okay. There is no need to look past the subject object for the same. Okay, on this, prepare validation messages going toe basically returned the farm fields with the appropriate validation message. So gonna send this to the former object. All right, on, let me see if this now, let's go to the browser and see if everything works fine. Okay? The way big industry is by simply adding the console log over here, which were removed 44 matter. So let me just do it again. They start for mirror. So let me say this again. Let's go to the browser on. Let's see if we get the error messages as expected. So if I under test right there gmail dot com. As you can see, the mill is holding and district, and the password says that's what is required. If I entered anything for the password, then, as you can see, it's a sparse what it must be. At least five correct along. Okay, so everything is working. Finance expected on. I think that's right for the part to Andi. I hope you were able to follow along. And thank you so much for watching this video. 16. Login Form Validation Part-3: Hello, everyone on this is the part three or four mil addition. So now that we have everything ready, that is, we have the message is ready. Like to show it on the way. So let's go to the HTML file. So I'll go to the log in page shortest email on Dhere just below this I an item. I would like to have their name on in sort of this particular Dave, I really basically first day for matter dot email because that is what is holding the error message for the mail on going to do the same for the password as well. So we took place street over here on going to access the password over here. So let me say this and let's go to the brother and see how does it look? So, for example, if I ended anything over here, then as you can see now we can see the message is okay. And if I enter the right email, then as you can see, there is nothing for the email error message. We only have the possible other message, okay? And I would like to also a bit the color off this error messages. So I would like to add the class over here on this particular day. So going toe are the class off edit hyphen message Okay on going to do the same Over here has been on in the global daughter. Sisters basically defined this class. Okay, inside of this I'll simply secular as but I'd so hopefully that looks good. Let's score to the browser and see How does it look? So if I under anything, we're here. So it's off. No, I think the ceases classes not applied. Maybe because the team just are not recognized. And you will encounter this kind of issue many times when you're building there, Any application. So it's like you make some changes, but it is not reflected on the fly. Right? So this basically happens because off the cash problem. Okay, So so forcefully detected. Courteney is what they can do. Issue can simply remove the court that is not being recognized. Save and undo the changes and save again. Ok, so it is removing saving Ondo and say Ok, so let me say this and that sort of the browser and see if that changes reflect so you find anything over here then, as you can see, that in this had affected on the fly. Right. So you will encounter some sort off cash problems, so make sure you deal with it like this. Okay? On defender the password over here. Then, as you can see, the password is operating on. If I entered the more than five characters than the other is gone on, we can also remove these control lock from here because it is no longer required. Okay, so let's go to the logging based or tears removed from here. Okay. Surveys their trip for the for meditation on I hope you were able to follow along on. Thank you so much for watching this video. 17. Signup Page: Hello. Everyone on in this rude of you are going to add this and a pitch on. We will also add the button over here on the log in page so the user can navigate to this in a pit on Also can come back from this end up it to the logging pitch. So let me first falls on their debate. So going to open up their terminal on here. I'll sign 100 page sign up. Okay. On the as soon as it is done, I'm Kentucky. Later, Burton on the log in page to navigate through this and a bit. Okay, so let's go to the Logan business estimate on here. I would like to have I in Britain just like this. Okay, so going to be stirred over here on in ST off secondary. I would like to give it took a lot off late. Okay, Onda, I remove this disabled at river from here. Okay. On for their textile. See? Sign up scape. Let's see. How does the u I look? So as you can see, this is how it looks. Okay, Now, on the click off this, we want to basically navigate to this end up it, so I'll add a click listening over here. So going to say on the click off this, call them a three chord as go to sign up beach. Okay? And let's create this matter in the Logan based RTs file. Okay, so I'm gonna do it over here. All right, on. I would like to go injected Order service for the navigation. So gonna say private on this comes from Madrid. Angler slashed Order. Hesitancy. Right. So here and simply said this dart rotor north navigate. And instead of this, you can pass the u N insert off injury. So going to posit you are less Sign up. OK? And if you have a look at the routing mortal dot Js file then As you can see, we have this part and redefined already over here. We just added by the annex ally itself whenever you generate a page. Okay, So this president over here and we're using the same note over here. So let me say this on go to the browser. And in fact, we consider then, as you can see, I'm navigated to this end up it Now If I stole, I would like to add a back button over here on the sign up page so that we can go back to the log in page. So let's go to this and then paste artist email. Okay, Now here for so little update, their title s sign up. Okay, Now, I would like to have the I in Britain's over here. Okay? And I'll give it us Lord off start so that it appears at this start. Okay, next, I would like to make it off the iron back, but incompetent. Okay, so this will actually bring up the back button. So by default, this back burden is going to navigate to the previous page. But if the previous speeches not found than it is going to try to use the default at left property on this particular company So let's defendant OSHA corners implicit default a tariff and I would like to specify, did out as logging. Okay, on, if you have a look at the voting, more than 40 s felt then, As you can see, the law and order is also different over here. So let's go to the browser on. See, How does the U I look? So as you can see this is Howard Looks. If I go back, then I'm navigated to the log in page. Okay? So I can go back and forth. Now, let's further are designed the sign up form. So I'm going to simply copy the form from the Logan bitch to the centipede. So going to copy this? I agreed from here on going to place it over here. All right, on. I would like to hear update a couple of things. Such as Instead, off Go to sign up page. I would like to add a go to log in vegetable to know here. So gonna update the method as go to logging beach. I loved it. They text as Goto Logan. Okay. And here in stirred off logging. Let's call it sign up right now. I would like to do a couple of things such as First of all, go to the logging pace tortillas and copy everything from here on going toe pasted inside of the sign up. Its tortillas is well, all right, so let me pasted over here on also important this form group. So if you basically press control one, it is going to give you this addition. Okay, so make sure you imported like this, all right? Now, instead of this log invalidation message, I would like to use this and a validation message. So let's go to They found the tradition message fell on, going to create another constant for this end up from so here and simply said, Sign up. All right, on going toe makers off this over here. All right. On update instead of the importance will next. I would like to operate for the thing such as the create form control and they create for method. So that piece suit over here on going to copy both off this method on. I'll also go with this on formal. You change make risible. So going toe. Hastert over here on also inject the help us always in the constructor. So gonna say private help. Oh, service on this comes from help us Service. Okay, on the hearing, start off log, inform Let's first of all, update the name and sign a form. So God knows implicit sign up form. Okay. On the place. All the existence I loved it developed eaters as well by pressing control one. All right, so I think this looks good on Let's go to this end Up is released email and here in start off logging form, I would like to address the sign A form over here. All right. On Dhere Also I you make yourself the Santa form. So I think this looks scored on There is one more thing that is the meaning is to add the reactive forms model in the standard model, or PS. So similarly, we had this in the logging road model tortillas. So let's add it on the sand up dot model Dirty says Well, so here in the third Anglo form import, I'm goingto get director forms model And I did in sort of the important today. So let me say this Now on, Let's go to the brother and see how does it look? So if I click on the sign up page, the insurgency were navigated to this on a page on We have this signed a formal here when you talk that did title as well. So let's go to this. And a paste or the steam l on going to update the iron car title over here Gonna say sign up. All right, Onda and let's try to also implement the Goto logging method over here. As you can see, it is not defined. Okay, so I basically implement this matter in the Centipedes. RTs going toward it over here on going to injected autos, obviously risible for navigation. Gonna say private. This comes from a dreading less lest open, which is injected over here. So here I can simply say this guard rotor don't navigate. And instead of this inside of the area, I can simply positive out there that want to navigate to All right, let's go to the browser on Let's try to run this. So if I click on logging then as you can see via navigated to the log in page Okay, so it is working fine on Let's also try the formulation. So if I enter test right better Jim alert. Calm as you can see the proper validations. Mrs are also working fine on this end on Page and the Burtons are properly getting enabled and disabled as well. And let's also see the UNDP, Rosa. Okay, so let's refresh it. So as you can see, everything is working fine on everything works well on the larger devices will in terms off you. I, sir, is there treat for this particular video on? I hope you're able to follow along on. Thank you so much for watching this video. 18. Firebase SIgnup/Register with Email and Password: Hello, everyone. And in this video, we're going to implement the functionality for signing up the user with the 1,000,000 passwords on the fireplace so as to nest user and doesn't detail on Greek concert number really call a service which is going to interact with the fibers? Andre Study user. So let's create this obvious. Okay? So far. So I'll go to determinant on here and there. Nick, generate service. I would like to keep it inside of the protest folder on for the name of the service. And so far, the best life or not. Okay, Onda Senator, it is done. We're going toe implement the logic. So let's go to deploy this folder. As you can see, here it is now here. First of all, I'll inject if anger fight out service which we will use to interact with the fibers. So gonna say private angler fire out and this comes from angular fire out. Okay, so is there gonna see it is injected over here? Next, I'm going to create a matter over here called as they stood with email password. Okay. And this function is going to expect email and the password as a permitted on. Instead of this, I can simply say this darting glorify dot, dot, dot Dark, create user with email password. Okay. And instead of this Al basically positive email in the password, all right, on this particular method basically returns the promise so I can make it off the other keyboard over here and to make it off the keyword I need to make this function. You think? OK, now, if this particular promise fails than many to handle the other so far that I'll add the track, It's block. Okay, Andi, just move this thing. Insert off the try block on in, gives off any other I can simply say through new and it and going to pass the other object question on. We can get the desert in sort of a variable, which we will return basically on. We can do one more thing before returning the result. It's still send a verification email. Okay, So you have to explicitly called the matter to send the verification email so here and simply said this According Lo Fi wrote Dark Art dark current user dot Send email verification. So this is the matter name. So this method is going to send the mail to the user That just signed up for the verification on since it also does the promise I can make use off the of it. Keep it over here. So I think our services ready Now we can make use offered inside of the centipede, so let's go to the stand up it. First of all, I only inject this obvious. So here and say private firebase Ott. Service on this comes from 30 years old. Service on for so long going to create a function that we will call on the click off this button. Okay, so he didn't say sign up on here. I would basically call defied episode service dot study Melvin password. Now, when it basically passed the mail in the past so we can get it from the form control value . So gonna excess it like this dot email not value on this. Got password, not value. So it is how you access the value from the form control. OK? And since this particular method is going to return the promise so going to make the air raid killed over here on toe make, they'll be able to get what I need to make this function anything on here. Also let Detroit kids block toe, get any sort off edit. So gonna get over here. Okay, on going to move this insert off this thing and in case of any other, I can simply say console, not log added on going to print the other object on. I can also print the result that this producer Sarvis basically irritants. So gonna said Const deserted Close this on going to console log dessert the way here. So this looks good on we can do one more thing, which is to show this spinner on this. I know Britain as long as this sign up process is running. Okay, so for that I'll make use off the iron spinners. So let me show you if you visit the Anne Kremer got consulates, dogs, goto, competence and such for spinner, then as you can see here it is. Okay. On here are Ovidius spin. Are types available so you can specify special property such as lines, darts, bubbles toe Get this specific kind off you? Why? I would like to use this darts. So gonna copy this on going to place it over here in this and on pace for that steaming just below the sign up text. All right, on. We need to basically shoe and hide this particular spin it on the basis off some condition . Okay, So I'm going to define a boolean variable over here called us Show Send Up spinner, which will be off the bullion initial l started to falls, and as soon as this signed up matter discord. So I basically said this dog show Zainab Spinner. That's true. Okay, on once, this particular thing is result. That means designer process is done. So I can simply say this dog shows and apps peanut equals false again. And even if some sort of error occurs, then also I would like to say falls all right. And let's use this particular available in turn off the iron spinner. So I'll add a nd of condition over here. Okay. On going to specify this variable. Okay, on. We need to also call this an in function on the click off this Britain. So let's I did over here. So basically l c on the click off this call, a function called as signed up. All right. So hopefully this makes sense on be contested now. So let's corporal Browser on. Let's tested. So here, first of all, I need 200 email Now for the email. I'll make you suffer disposable email service so that we can test with multiple emails without having to log into various emails. So gonna make it offer disposable emails. Office called at the Hopman. On here. You can simply enter any sort off email and click on Chek Inbox toe have access to the email. So I basically they started with an email, for example, Test user 44. Direct your mentor. Come. I'll enter the password as well on a basically copied this on. Search it over here. Okay, so we will take this assumes you send up. So here I First of all, click on center. Let's see what happens. As you can see, we have this is spinning. Okay. And here is the desert that we got. Okay, so we just printed the result. And here is the whole user fire of this object that the fire was actually didn't. Okay on First of all, let's check for the email. So if I basically refresher the residency, here is the email from the fire base. If you're basically click on this than the flatness automatically verifies it for you, you don't have to do anything. Okay. Next, we can also check the user being registered in the fight of this console. So let's visit. They consort about five Israeli google dot com on If you basically go to Europe on If you then go to the authentication tape, then, as you can see, here is the email of the user that we just started with. Okay, on here is the object that the fighting was actually return. Okay on. I think this I number is working perfectly fine. Okay, Now we need to do some sort off a couple of improvements, such as showing the toast when this Anna pictures success and clearing the farm fields and navigating the user to the home pit ones. This and a bit success. So let's start with implementing the toast. So far, they're toast. I'm going to make it off the iron post component. Let me assure you. Here it is. So this is how it looks like. All right? As against So for implementing the toast unit. Dido's Comptroller's Office on you need to basically call this creative methods bars bunch of configuration on called the present Matter. So in straight off, writing this much gold in every competent I'm going toe create this function in sort of a separate service. And in fact, we will put all such your utilities inside off that Proculus office so that it can be consumed in various components without having to do configuration in each and every component. Okay, so, first of all, any creators office called us with genital. Okay, So it also generates service going to created instead of the Breuder's folder. And I would like to call it as reject hyphen. Your deal. Okay. On going toe corporatist thing. Okay. And pasted instead of individual routine service. Okay, so let's go to the video shooting service on going to Bay Street. Over here on. We need to exactly post controller savannahs. A private does controller on this comes from those controller. All right, Onda, we would like to get them. I says dynamically from the competent. So going toe, fetch this dynamic message as an argument to this function. Okay, on, I would like to use the es six shortcut over here So if instead of the object, if your key and the value Neymar same, you can specify it like this. Okay, on this thing is equivalent to this, right? So I would like to simply keep it like this on for the duration. I will have to keep it 1500 milliseconds. There is another property. Calder's show Clues. Burton, I would like to say that's true. And this is going to show the close button like this. Let me show you. Okay. Like this on it is another property called as position. OK, so you can basically pass with Israel Usages, Bottom, middle, top on. Whatever like to do is whenever the replication is running inside of this small device or the mobile device. Okay, but there have been a template from or even Dima. Well, Broza, then I would like to show it at the bottom. But when I rap is running on their next stop, that means on the last day, ways like this Then I would like to show their toes on the top because it doesn't look good at the bottom because it is not clearly visible in such a large screen. So I would like to show it on the top. So how can we detect whether replication is running on the deck stop or on the mobile web? Well, there is a service available for it called this platform. So let me just inject the service. So gonna say private blood from okay. On this service comes from a direct I neck slash England insurgency. So he really make use off this service. So gonna set this dark great form dot is okay. And instead of this, you can pass with this argument such as iPad, iPhone. I always tabler called war capacitor to detect on which platform your application is running. So it's the specifically to detect whether that applications running on the deck stop. So we are going to pass this Dexter value over here, okay? And it is going to return bullion value, so here, I'll save the system. Then keep the position that stop. Otherwise keep the position as bottom. All right. So, fully this makes sense. I'm basically using the ordinary operated over here, and I think our ghost is ready on. We can use this particular toast in sort of the centerpiece tortillas. So festival Ellen's activity student service over here. So that means that this thing over here gonna stay private with genital service on going to get division will service. As you can see, it is injected at the top. Right on here. In the sign up method, I can simply make use off this toast by number. This promises result. So gonna simples at this door to the general's office door present Toast on for the message again. Pass signed up success and against verification email sank. All right, so this looks good on in case of any era, I will act all social. The message on here, I'll basically grabbed the other my city from the other objects you're going to say hello. Not message, All right. And I think there is one more thing which is remaining is to navigate to the home pitch as soon as this and a bit success. So here I'll say this door rotor dart, navigate on inside of this, I'll positive home road. Okay, on. We can also clear out the field before navigating. So let me just do it all here. So when I say this dark sign a form dot they said OK, so this will basically clear all defense instead of the form. So let me say this and let's go to the brother and test on right on. First of all, I would like protest the other case scenario wherein we tried to sign up with the sea animal that we have already registered. Okay, so there's going to simply copy this. They sued over here. Come on. Ready? Complete email address. Enter. The password is well on. Difficult concerned up. Then, as you can see, they're toast appeared at the bottom on Here is the other message. We're just coming from the catch block over here. All right, on, let's try to see the toast position in the larger device. So let Mary fresher. And for the email on into the password is, we'll click on Send up then, As you can see, the toast appeared at the top. OK on. That's what we have configured instead of the digital service. So if the APP is running on the deck, stop documents on the larger device simply show deep are posted their top otherwise, at the bottom. Now let's tread protest with a new user. So let me go to the buzzer Goto the moment Levi's Refresh the app on. For example, if I internally new user, for example, test user 23 at the Hopman dot com going to endure the password as well. No effect consent than festival. It should show the toast message on it should clear out all the farm fields and navigate to the homepage. So that's straight presidency except sign of success verification name incent were navigated to the homepage on here is the control log from the Senate page. Okay, on here is the user object that the fire based basically Retton's and let's check on the fire Best control as well. Right? Then you will see that this new user is that a struggle here? So let me check it now then, As you can see, here is their desk user 23 on there should be also verification email for the same. So let's go to the yoke mill on If I basically search for this particular email the nez agency Here it is. I can click on it and I can complete the verification. All right, Andi, that's it for this entire process. And I hope you were able to follow along on Thank you so much for watching this video 19. Firebase Logout: Hello, everyone. So in this video, you're going to add the functionality for logging out the user. So it's off. Now. What I would like to do is to have a button over here on the home bit on the click off. It will absorb the user. So the first thing that I do is tow create this office for logging out the user. So let's go to the fire base out service on here. Basically create a method called Oslo goat. Okay. And instead of this and going to simply say this morning, their fire dot, dot, dot, dot sign out. Okay, on this also turns the promise so I can make itself the await keyword over here on will make this function Issing to make it off the other key word. Okay. And I can also add it like it's block. All right, I'm going to move this over here on here. I can simply say through new on going to pass the other object. Quite simple. S o. R. Said this is ready. Let's go to the homepage dotage team. Okay? And I'll get rid off this boilerplate code from here. All right. And here I am going to simply idea in Britain. Okay. On simply called the text s logo on Going to create a function in the home bit ps Andi like to call this function as logo. All right, on simply going toe call dysfunction on the click off this particular burden. So here, I would simply say All right, on what we can do is here. I first of all injected firebase old service. So gonna simply say private fight of this odd service on this come from firebase old service on here. I can say this door firebase out service, not logo on. I could make use of the word. Keep it over here. I'm going to make this function. You think, right? And I'll put this internal d like it's block. All right, on going to move this over here on here and first well, console log data in case there is any other. And let's also inject the fugitive will service to show the toast when they log a success. So here I'll say five it. Richard, you tell service this comes from digital service on here again. Simplicity this daughter vigil doodle service dot president toast and I'll pass the message as logo success. All right, on, in case of any era, we took trendy added dark message. So let's see if this let's go to the browser and test. So now, for example, if I click on this level than as a concert says Lord success and we also need to navigate through the log in page once we're done with Villa goat. So here I first of all injected auto service. So gonna say private Notre, this comes from Madrid, anglo slash shelter. And here I can say this door rotor not navigate on. Insert off this. I can possibly You are less logging. Okay, so that's district now. So if I click on this the nez agency, it says, Lord success and we are navigated to the log in page. Okay, so that's it for the Lord functionality. And I hope you were able to follow along. And thank you so much for watching this video 20. Firebase Login With Email and Password: Hello, everyone on in this video, we are going to implement the log in with email and password functionality. So let's go to the fire without service. Okay, on going to create a functional here, and it is going to be similar to the store with email password. So let me simply copies on Bay Street over here instead. Off wrister. I'll call it as Logan with email. Password on. Don't move this thing. Okay. On instead, off create a user with email password. I would like to call the signing with email and password method. Okay, on going to pass the melon, the password, or here going to get the dessert and return the result. Sore services ready Now alerts users Insert off the Logan paste or P s on here. Basically create a function which will call on the click off this log in Britain. So let's call it Logan with he made a password. All right, on. Instead of this, we're going tohave the similar court that we don't internal dissent a bit, which is this one. So let me simply copy this thing on Bay Street over here now, First of all, let's injected firebase out service. So here I will simply say clever it firebase Hard service on this comes from far without service and instead off restart. We need to call the log in with email password and were fetching the mail in the password from the form control. OK, next invented to make this function Issing to make it off the await keyword. Alright. On going to update this on a form to the log in for Onda, we can also infectivity total service So let me do it over here. So gonna say private The General Service on this comes from with your duty in service and finally we are going to replace all the existence off the shows and off spinner with logging spinning against are gonna say show Logan Spinner going toe to place everything on going to create a variable over here. Okay, so gonna say show Logan Spinner, which will be off type bullion and initially else that it too falls. All right, so here all we're doing is simply calling the log in with email password service on the fire Basat service on simply printing are the result over here. Okay. On presenting depot store here on let me update the message over here. So instead of Senate success, let's colored Logan success. Onda never getting to the home page once the Logan success on also deserting the form. Okay on managing this spinner. Okay, now let's include the spinner in the Logan pastry text email. So basically copy that spinner from the Senate distressed email on just going to simply copy it on Bay Street inside of the long investor list. Email today on Dhere in straight off shows, an upswing it. Let's use Shore Logan Spinner on one last thing that we need to do is to add a little. It's not over here, so going to see under click off this call the matter called as Logan with email password. Okay, so hopefully this makes sense on. I think we are good to go. Let's go to the browser in test. So we're going to go test it with one off the existing users. So let's take this one okay, which we have already used for this end up, and I'm going to test it with their user. So here I'll enter the password and let's see what happens. So we have this spinner on. We also got ditto slogan. Success, and we had navigated to the home bit. That means everything is working fine. And here is the result that we have just printed over here. Okay, which is coming from the fire base. Out service. And here is the whole user object, All right. And in fact, we're gonna talk about that as you concerts his local success. So our logoed is working. Fine. But there is one more thing we need to operate on the log in page, which is toe clear the error messages. Well, along with the setting the form. Okay, So if you have a look at the court base, then you will see that we are basically the setting the form here. So this thing only removes the greater that we entered in subtle, deformed. But we still have this formula object, which holds the other messages. So let's clear this thing as well. So what I'm gonna do is I'm going to create a function over here called it as it is hurt form. Okay, on going to move this research function over here in sort of the desert form on here. I'm all talking to said the formula. So the initial state, which is I'm district on, Same for the password is with All right. So hopefully this makes sense on Dhere. We like to call this function, which is? They start this art form, and I would like to do the same for the centipede as well. So let me simply copies. Let's go to the Senate based RTs on going to create a function over here called as a dessert form instead of flogging, I would like to refer this uniform Onda here. I would like to call this function So when I said this dot reset form All right, so let me does this. Let's go to the browser and prior to log in once again with this particular user on DSI. What happens? Okay, So loving success. Now, if I click on a log out, then as you can see, everything is working perfectly fine. The formula object is no longer holding the previous messages. Okay, Now, let's also try some other cases wherein we tried to enter the wrong password or maybe even a case. We try to log in with the user, which doesn't even exist. So first of all going to enter the wrong password on Let's see what happens. So as you can see if you get the proper read a message from the fire basic with sales password is invalid. Okay on. Let's also try Toe Runner scenario where the email doesn't even exist. So if I try to log in, then as against eight says, there is no user record phone. Okay, so we have this property, other messages that is sent by the fireplace itself. So you guys, that's it for the log in functionality. And I hope you were able to follow along. And thank you so much for watching this video. 21. Firebase Auth State: Hello. Driven on in this video. We're going to see how can you get the user authentication state at any point off time? That means whether the user is logged in, orderto having the user state will help us in various cases. Such as, for example, if I love or the user. Okay, then if I tried to go back to the homepage, then technically, I shouldn't be allowed to navigate to the home page, right? I should be redirected to the log in pitch on, even device oversaw. Scenario we're in. For example, if you basically try to log in on if you try to visit the log in pitch, okay, so you should be redirected to the home page. Right on. Same is the case for these. I know pages will. Okay, so we need to handle such scenarios. And we can also hide the hamburger menu if they use that is not logged in. So, for all sorts things we basically need the user state. So how can you get different bases? The route state. So to get the user out state at any point off time, you can make use of an observable which exploited by the angler fire out service. So let me assure you so if you basically go to the finals all service on here, I'm going to create a matter. So let me remove this on going to create a matter over here called This. Get what's did. Okay, and I'm going to basically written this north Angler fire out. What state? Okay, on this basically returns an observable are to which you can basically sub scrape and get the user object. So if they use that is not logged in, then you will get the user object is null. And now I'll basically make use off this observable inside off the road company Because as soon as that application starts, I want to subscribe to this particular observable so that if at any point of time, the art straight things, I can make appropriate decisions, right? So instead, off subscribing are to this producer method in any specific page. Let's do it in the road map competent. So I'll basically go to the abduct component or piece file and festival going to inject the five best out service over here. So gonna save fire base. What service on this comes from five years old service. And as soon as this initial s epic scold, I'm going to call him a 30 car dies, get out. State Okay on going to create this matter over here. Right on here. I'll be silly. Called the five best or service dog Get out State and has a certain incidents and observable so you can subscribe to it on in the result, he will get the user object. So let me simply console lock the user object over here. So when I say user, what state on going to print or the user object? Okay, so let me see if this let's go to the browser and let's see what the weird So it's off notice saying fire. But also his door to get out straight is not a function, but actually it exists. So I think this is on Islay cash problem. So to get rid of this and the cash problem, you basically removed the cord, saved the cord on duty changes and save it again. So forcefully detect dating just Okay, let's go to the brother and hopefully this time of year be removed. Okay, So as you can see, it is removed on. We're getting the use it out straight, okay? And let me try to log out. So if I basically go to the home pitch, okay? And if I tried to log out now you will see that the user what state will become now? Okay, So if I click on this as you consider it, becomes null. And the reason we got this console log message over here is because the old street isn't observable, right? So it continuously, Amit values whenever the state off, the user exchange on since your subscript with that. But you're observable every time the old straightened you get the result and you get this council ago here. Okay? And there is one more thing that I would like to show you regarding the user out straight object. Is that as off? No, it is not that much irritable. So what you can do is you can call or to Jason method on the firebase user object to get the basic information about the user. Although you can fetch it from here. But that will give you a more appropriate, readable information. So let me to show you so it's often offer stability try to log in the user. All right, on what I'm gonna do is here. I'll simply called the coaches and matter. Okay, lets see. How does the user object looks now? So is against he. Things is what you get here is the basic information regarding the user. Once you basically called the studios and methods on the fire of issues that object, okay, on large hole to apply the check over here. Because once the user logs out, this user object will be no. So when I say if use that exist, then call these adult adjacent, otherwise simply printing now. Right? So let me see if this now, Ana, I think we should be fine now. So if I basically leveled, we shouldn't have any other because we have applied in the check and we're not trying to access to Jason Nondenial. Okay, so now, since we have the user information available, what we can do is we can make a decision to show and hide information. So let's first of all, try to hide the hamburger menu if the user is not logged in. So what I'm gonna do is I'm going to create available over here. So gonna say his logged in on this will be off by bullion on initially else editor falls on here. I can simply say if user exist surveillance if you still exist, then simply said this door it is locked in equals True. Other ways side the is locked in tow falls on. We can make it off this Boolean variable insert off the are great competent or HTML on applied the NDF condition over here on the end menu. So gonna send if is locked in is true then initial design menu. All right, so hopefully this makes sense. Let scored of the when I was there in test now. So the current user what street is No on. If I try to open, decide hamburger minute And as you can see, I'm not ableto open right? Let's also try in the Lord 30 ways. As you can see, I'm not able to open break on neither from the sign up pages will Alright eso This is sold decide hamburger in my new sold Now we need to basically handle the navigation. So for example, if I go to the home road then I should be navigated back to the log in page because I'm not locked. Dinner's off now, right? So how can we do it? So it's quite simple in this particular call back we can handle the navigation on. What I would like to do is I would like to separate out the coordinates abroad function in , start off writing everything over here in this subscript called back. So let me create my third over here called as handle Navigation on going to call this matter from here. All right. On Dhere again. Simply check if the user is logged in. Okay, then we need to handle the two scenarios over here. Okay, So if the user is logged in and if user tries to basically visit the Logan or this and up it, then we need to redirect the user back to the homepage. So the first thing you need to do is to fetch, did out okay and detect on which allowed the user is currently on, so cannot simply injected auto service over here. So gonna simply say older on this comes from my dating Louis Lester on Dhere. I can simply say console, not lock wrote on going to say this north rotor door. You are ill. Onda. We will get the Ural with this slash Okay, So for example, currently this daughter ordered or you are ill will written slash logging But we actually need the name of their out, right? So for that I'm going toe basically split this particular spring with slash on it is going to give me a ray off the items. Okay, on the first index will have the You are So let me try to save this on DSI the result. So let's go to the browser. Open up the console Going to make it off this user on Try to log in with this particular user. So as you can see the road that regard is the logging. If I try to visit this sign up then we will get the Santa broke as agency Now we can simply check if the road is logging already sent up there. We need to redirect the user back to the homepage. So here, first of all, I'll assigned the result in start off available. So when I say const God and the world called this okay. And here I can simply say if currently water is a quarto log in order guarantee water is equal to sign up, then simply navigate the user to the homepage. So going to specify the home road over here? All right, so let me see if this on. Let's see what results we get. So let's go to the browser on. Hopefully this time we should be navigated to the homepage. OK, but if you see properly, there is a minor Billy, by their time big navigate to the home pitch. Okay, so the reason it is because things subscribe callback is anything cooperation, right? So it takes a while to get this user object. Okay, so what we can do is by the time we get bigger object, we connect this show deal order so far, showing the loader we can make use off a loading controller. So let me show you if you visit the animal dot com slash dogs go to the U. N. Components on basically search for the loading. You will see. Ah, any competent for the same? Okay, on this is how it will look like All right, on dhere This the court for the same. Okay, so going to simply copy this on pasted in sort of the digital service going to pestered over here. Now, if a soul elaborating name is present loading over here. Okay, on going to inject the loading controller over here. So when I say private luring controller on this comes from lording controller, right? Next, I'll basically motives spinner thing from here. Okay, On for the message. I'll keep it as please wait, they will diseases class on. We don't want this law order to hide after a specific time. We want to hide this loader on live in. We have the data available. So for that, what you can do is you can make use offer, dismiss method on the lording controller instance. Okay. And as I said, you need to call the dismiss Mattered on the lording instance nor the loading controller. OK, so I'm going to them of this on since we need to call the dismiss matter on this particular object itself, which is an instance off the loading controller. So going to define this lording object at the top so that we can access it insert off, no matter OK, select images Julie over here. So I'm gonna say lording and I'll keep this off. Type any on initially? Second toe. Empty object. All right, on Dhere. I'm going to simply say this, nor loadings equals loading controller. Okay, on here. Also, ill change this to this, nor loading dock present on. I'm going to create another matter called us this Miss Lord er on here. Going to say this, not lording north. Dismiss. All right. And it is going to return the promise. You're gonna make it off the orbit keyboard over here on. We'll make this function using All right. So hopefully this makes sense. Now we can make it off this lording matter instead of the abduct component. Ortiz on Dhere. What I would like to do is as soon as this method is called, which is get our state We like to show the Lord of right, so four stole. That means activity. Student service over here, Private with your deodorant service on. This comes from digital service. So here, going to say this video total service, not present loading. And as soon as we get internal dissent step called back on d. Simply say this dart, which I don't lose service Dart dismissed Loader. Okay, so Hopefully, this makes sense. Let me see this on. Let's see, What do we get? So let's go over here On. As you can see, this is the kind off loading that we're getting on. This is what we expected. So let me now try, go visit the Logan dope, and let's see what happens. So, as you can see, we got this loading on. Then we're navigated to the homepage. Okay, let's vested on the Santa Pages will. So, as you can see the Saudi lording and then we agreed Addicted to the home bit. So this looks cool on now. We need to handle just one scenario. Very. If user is not logged in and if it tries to visit any other pitch that, then the logging in the sign up, then we need to basically related to use that back to the logging door. Right? So i'll either else condition over here. Okay, so this means that the user is not logged in, and in such cases, I just want to basically navigate the user back to the Logan pits are gonna set this story to use a dot navigate and going to specify the logging broke All right, so let me see this on. Let's right now. So as you can see, we have navigated to the log in page to let me show you once again. All right. And there is a slight improvement that we can do is toward dismissed in order after the handle navigation method so that the Lord er keeps appearing on telly. Navigation is done. OK, so let's straight once again if I go to the home pitch. Okay, so this looks much better on let's also see the lording you are inside of the larger anyways, so let me simply copy this email once again, going toe signing over here. Okay, on, Let's go to the ladder Device getting leg Marie fresher once again. So as you can see, this is how it looks like. Okay. And if I try to visit the log in page now, the next agency I'm navigated to the homepage on Let's also test the you in case of buyer's . So let me just see, like, the iPhone device from here, okay. And simply out of fresh. Okay, now, if I basically tried toe globally, Logan bait. Okay, then let's see. How does the Lord of your eye looks so as you can see, this is how it looks. Let me show you once again. All right. So you always That's it for this particular video. And I hope you were able to follow along. And thank you so much for watching this video. 22. Firebase Google Login Web: Hello, everyone on in this video, we're going to implement the Google log in functionality for the web. Okay, so the process for Google Logan is quite different for the native platform, which we're going to see in the upcoming videos. But in this particular video, we're going to focus to Google Logan for the web. So first of all, let me add a button over here just besides the log in button. So I will go to the log in page started steaming. Okay, on inside of this, I'm going toe Obertan. So going to simply copy this kind of burden? Okay, on going toe yesterday. Over here on going to remove Design Spinner going to remove this. Click listeners off now on here. I would like to simply say Google okay on for the color. I would like to specify the danger color Right on. I think that's the other things. Looked good except silently Move this Disabled are too good from here. Onda, I would like to also add the icon over here. So just after this Google text, I would like to add I and I can okay on the name of the Eikenberry uses logo iPhone. Google. Okay. And you know, I think this looks good, actually. How does it look? Let's go to the browser. Now. I would like to have this logging in the Google Burton side by side. So first of all, it basically create I brought over here. Okay. Inside of this, I'll have to in columns, okay? And I'll have another and calling on going to move this thing instead of the first and column on the second button on the second column. All right, let me see if the center to how does the you look now? As you can see, this is how it looks on. And let's see the way in the browser is Well, let me refresh the African. Okay, so this is how it looks. All right? Now, whatever like to do is to create this office for the goal logging. So let's go to the fire basalt service. So gonna go pretty far without service. So here, let's get the services. We're gonna call it as Google logging web. Okay, since this service is specifically for the web, okay for them, they deplete from the implementation will be quite different on here else. It is darling. Little fire out nor dot Got signing with redirect. Okay, so let me choose this particular matter And instead of this minute to pass the new instance off the google or provided so gonna fetch it from the firebase library. So let me, first of all, imported over here. So when I say import what? From Friday, miss. Okay, on here. I'm going to send a sae new what? Dark Google. What freeway did? All right. So this is what you need to do on this? Also returns the promise you're gonna make itself there were killed over here on will make this function easing. Well, they didn't like its block as well, in case off any other. All right, on Dhere going to simply move this statement over here on in case of any other gonna say, throw new weather and going toe pastie. I don't object. All right, on going to return this Guardiola thing. All right, so the slow scored on. I would like to use this matter inside off the log in page or PS. So here, first of all, I'll create a mentor, So he didn't say Google log in web. Okay, I'm gonna call the five s old service door Google looking back, and it is going to return a promise you're gonna make it a little bit here. We're all here on will make this function. I think on put everything inside of the track, it's block for this thing instead of the try block. Okay, on gets off any other Macon Simply console log theater right on going to make it off the vigil. Total service dot president toast to show their toast along with the other message. All right, So far, it does make sense on Let's, I think, look, this method on the click off the Google log in Britain. So here l Ardeche click handled on going toe call this matter All right, so that is there. Should I think we're good to go? Let's test it. Let's go to the browser Onda Uh, alerts if everything works fine. So, for example, if I click on go, we're looking now. So it says five years also restored Google logging Vibe is not a function so again, it's an I need cash problem. So the way we can solve this is by removing the court, which is not being recognized. Okay. Save the changes under the court and saved it in this again. Let's go to the border and test now. And I think this time it should work. It should be able to detect that particular matter like my click on Google. So as you conceive you happy the electric toe the good Lord beat on here. You can choose any off your humility. I'm going to choose one off them. Okay, on. Let's see what happens. Going to enter the password so the authentication is successful on. We are inside of our lab. Now on, let's see what happens. So as you conceive, you're logged in on Dhere in the control. We have the user out state as well. Okay, so here we have various information available. Okay. Ondas agency. This is the mail that I just send over it on. The rest of the information is also there. Okay, So the Google Logan babies successfully running Fine. Let's test it on. The larger devices will. So let me go to the closer. Refresh the up on logo begin and let me try this once again. So, as you can see, we are being redirected on I think they're already authenticated because we're already logged in with pretty low semen. So let me tested inside off the incognito. More so there you can see how the gulag in works on the larder device. Nice district. So as you can see him on the global sending page going to enter the mail over here on going to enter the password as well, let's see what happens now. So as you can see, the authentication is successful and I'm on the homepage. So you guys there treat for the Google Web logging on. I hope you're able to follow along. And thank you so much for watching this video. 23. Android Studio Setup and Set Environment Variables: Hello, everyone on in this video, we will see. How can you set up the endured studio so that you can build your application for the native android platform? Okay, So if you were really visit any cream work dot com slash dogs, then here is the whole guide for setting up the endured studio. Okay, so the forcing that you need to make sure is that the corridor is not comfortable with the latest version of Java. Okay, on you have to install the decay it specifically Okay, So you can basically stall the dedicated specifically by going to the link over here, takes you directly to the download page on. If this link is not found in the future, then you can simply search for install JD, get eight. Okay. On you will go to the same documentation. All right. And when to install it, then simply head over to the terminal on run this command with his job. I found origin. Okay, this will tell you the exact 12 hours under it is installed on our machine. Okay, on. Make sure that it is J D. Given pointed. Not any other as off now. Maybe it contained in the future, but as off now you must install dedicate. Next, you can post it further with the and North story installation. Okay, so if you basically visit, they develop our daughter android dot com slash studio. Then you will simply get this Donald Link, simply download it and install it. Okay, So once you have your engorged studio, that will look something like this, okay? And when you will basically create the new project, just make sure that you select dealing which has job. So let me show you. So for example, here I choose the empty activity, you will go through the same product set up. Now, he'll make sure that you select dealing with this Java nordic wobbling because it will require some additional step off installation. Okay, so simply click on next and finish on. You will see a blank. Was it created like this? Okay, now, if you basically click on this icon So this is basically every manager which is android worked old West manager. So you can basically install as many watchful device as you want. OK, so these are simply your emulators right on which you can basically test your application so you have to install it inside of your android studio. Okay, so I already have installed a couple of them, but you can create it as per your choice. So if you simply click on this creative, orderly ways on, select the device that you want and simply click on. Next on, do the installation. Alright. On da. Once you have the installation completed, you can simply click on this button app or the play button to test that everything works fine on your machine. Okay, so this is just for checking that they're not. Studio is set up properly, and everything is working fine. Okay? Nothing more than that. So if you have the application deployed like this than that means everything is working Fine. Okay. So now we have the complete and Lord students that have done unit to basically export some of the environment variable toe. Probably build into a new application for the native and great. So I need basically used the n word as digital's Andi To use those schools, you have to basically exports. I mean, woman variable. Okay, so it is given over here. Okay. In this documentation on, I'll also show on the screen. So as you can see, here are the environment variable for dilly Knox and the macro is you can set it in sort of the bashar see file on. If you don't set it over there, then make sure that you exported every time you run the Ionic build command for the native android. Okay, on these are the environment variable for the windows operating system on Make sure that you have each off this environment variable set up on your machine. And since I'm underpin those like me to show you how do you set up this in moment? Variables. So if you basically search for the moment valuable on, go to the moment variable over here then, as you can see, I have this in order is digging or defined I also have a job a home defined on just off the involvement Valuable are different here in the part. So as you can see, I have the environment variable for the platform tools, build tools, emulator being on also the part up to the decay been on also up to the belittles and diversion. Okay, so make sure you have all of this environment very well set up on. Once you do, simply click on OK. And if you are basically running the existing terminal, then make sure you close their criminal Andi started criminal. So there the environment variable can claim to effect. OK, so that's it for the android studio and the environment Variable set up. And I hope you everybody to follow along. And thank you so much for watching this video. 24. Run Ionic App on Real Android Device and Style Native Status Bar: Hello, everyone on in this video, we're going to see how can you deploy your application today? The yellow and Jordi ways. And how can you do some changes in the status? But Stelling, so, as you can see currently am basically screen casting my ideal android phone are so the laptop and it is connected using the U. S. Were to the laptop. Okay, on also, make sure to turn on the USB debugging on the phone settings, okay. And even if you face any problem in the deployment than make sure to turn on the file transfer as well. So once you have done all of this set up, which is toe connect the phone with the U. S. Were to the laptop and turn on the USB debugging in the phone settings. Then you can simply run this command, which is unique. Gordo, Run android on it is going to take a while for the first time, But as soon as it is done, I'll get back to you. So as you can see, the application is deployed on, let me just try to interact with the screen more so that there is less frame drop in the screen casting. OK, so I think it's better now. Onda, let's try toe signing with any 1,000,000 password with the user that we just send up. So gonna make it off the test user 23 Did it your men dot com and going to enter the password as well Alerts district. So as you can see, it is working perfectly fine. We have a toast at the bottom is Well, let's click on logo then, as you can see you very successfully logged up Okay, so our obligation is deployed on One more thing I will cooperate here Is that if you see properly Whenever I opened the application I don't see the status bar, right? The street is what is completely black and we cannot see the bite information by for information over there. So the reason this is happening is because let me just show you. So if you go to the court based on goto the abhorred component RTs fell which is your root component then, as you can see, they have already injected the street is but looking over here on day by day for your Rinek application comes with this particular method being invoked on the status bar plugging. So instead off this finito use some other method, which is Skordas background Villalba hack string on here. You can specify the exact hash cord that you want to have for your status particular. So I'll just copy. This has scored from the variable daughter service file. So let me simply copied this from here. Okay? Ongoing dough Bay Street, over here. So this looks good. And if you want to know more about the status bar playing, then simply head over to the finding from what God comes left dogs. Then goto this native section, then go to the community addition, overview and basically search for the status bar. Okay, so here is the information regarding the status bar plug in. And this is the method that we just use, which is background color by heck spring. Okay, so notify our deploy application again. Then we should see the status, particularly as our primary colors. So let me just deploy this once again and I will get back to you as soon as it is done. So as you can see this time, you can see the battery information, wife, information and everything on the street is what looking has exactly the same color as your primary colors. So this looks scored on. I would like to also show you the couple off files and the folders that is generated by number. You forced them Configure the called up again, insert off your application. OK, so let's go to the corner base on clothes, everything over here. So as against a first of all, we have this platforms folder that has been created on this basically holds the actual source scored for the native platforms such as Android and IOS. Then you have the plug ins folder, and it holds all the Cordova applicant, and there are some default plug ins there are being installed. So just the I, Nikki word of a view straight as Bartok. And as you can see here, the state is well, plugging also comes as the default. So that's the reason why you didn't have to install the cord or plug and explicitly like this. Okay, so here is the list of applicants than you will also see the Resources folder Insert off this You will have the I can in the splash screen for your and brought in the IRS spread form. Okay. On day have various different sizes, Aiken and this splash. All right. Next, you will see that there is another file created, called as conflict or maximal. So this hold some basic information about your application for the native platform, such as your application I D. On this is called is basically like a city for the android on the bundle. 80 for the Are you guys OK on here is diversion. Here is your application name that it contains. And here is your application description. Okay, on. You can do a bunch of other configuration in this file, which we're going to see in the upcoming videos. Next, you have this anecdote conflict gorgeous and being updated. Vertical drop again. Okay. On the others. That's it for the files and the folders that is being generated by setting up the native platform for the first time in sort off your application. I never is. That's it for deploying your application to the real device and styling the native Streeter's. But on I hope you were able to follow along. And thank you so much for watching this video 25. Firebase Google Login For Native Platform ( Android, iOS ): Hello, everyone on In this video, we're going to implement the Google logging for the needy platforms such as Android or IOS . So so far, we have only implemented for developed. Okay, But as soon as our appellation transcending native platform we want to implement in native logging. Okay, so first of all, we need to configure some of the things on the firebase console. So simply had over to your five best concert go to your application. OK, then simply go to the project settings on here you will find all the APS that you have configured for your fire base up. OK, so it's often we have just configured developed right now we need to configure the endured and Iost EPA's will. So simply click on the add option. No. First of all, let's set up the android app. So symbolically contestant on the first thing it is asking is for the package name or the package already you can get it from the conflict dot XML. Okay, so here is your Piketty name or the package ready on. It is called this bundle lady in case off IOS on a backyard in gets off android. So you can name it whatever you want. So, for example, anonymity as calm, dark, unique firebase, nor my okay on what I'm gonna do is simply copy this thing on Bay Street over here. Okay. On. You also need to enter the book a such a one g. So, first of all, let's understand. Why is it asking for their debug such a one key? So whenever you're on your application on the native android platform, your epic is by default sign with a key, which is known as B bucky or the bug Dorky store. Okay, on this particular key can be found. Insert off the daughter and right folder. Okay, So, as you can see, here are the part for the windows and the Mac west. So now what you need to do is our unit 200 as a child, one key using that particular key and then turn it over here. Okay, so this is just for the developing world. The number you're on your application for the production, more on Release it on the play store. Then you will sign your AP. Give it your own key, right? You will create your own key and we're going to is in the upcoming videos. So in that case, you need to get the essential one key off your own key. OK, but as off now, since we are running the application in Development Board on the epic A signed with the debug dorky store not Archy story, we do not sign it. It is the android that signs the A p K Peter Debug Dorky store. Hence we need to be book such a one key. OK, so let's first of all navigate to their debug dorky store files. OK, so I'm going to open up the another tab in their terminal. And here are the part for the debug dorky store filed for the Windows Mac Ways and Lennox. So I'll simply go to this particular part. Okay, on. As you can see, here is really about dorky store and this is the game which is used to sign your A PK. Whenever you're on your application in the development more okay, so inaudible. Generate the city One key for this particular key store. Simply run this command So let me show you, and I will provide this commanding the resource so section as well so I'll simply pasted over here on Simply hit. Enter on for the password under Android. Okay, so he reserved a such a monkey that you need simply copy this and Bay Street over here. All right. And simply click on, start up. Quite simple. You don't You don't know anything. Such as Google Services. Georgeson simply close this. Okay, on you will see that this android app is shown over here along with the s such a fingerprint, Which is the debug essential one key. OK, knowledge at the IOS. So here I'll click on IOS. And for the IRS, it just needs the bundle, lady. Okay. And as I told you, that this thing is only by the lady, right? So simply copies on pasted over here on. You don't have to do anything else in quickly contest, and you will let this Google services in four dot p list file for one specific configuration, which I'm going to show you soon to make the Google Logan worked properly on the IRS spirit form. So simply click on, download on. That's it. Simply close. This epa's well. And now, as you can see, we have both the things configured android and the IRS up. Okay, so now what we need to do is our to make the Google logging work on the native platform. We will need a cord or plug in called us Google. Plus, So let me head over to the dining room with dot com slash dogs and go to this native section, then go to the community additional, what of you and simply search for Google. Plus Okay, as you can see, here it is. So you will need to basically install this particular plug in. Okay, which is I nickeled up like an ad cord or a plug in Google. Plus, So let's copy this on install in our project. So I basically go to the terminal, stop the application, and here we are, inside off our Project root folder on here. I'm known to simply paste this command. Okay. Now, if you want to only make Google plus Logan work on the android platform, only then you don't have to necessarily configure the thing which I'm going to show you right now. But if you want to run the Google plus log in successfully onboard the great form, that is an order and I was then unit terrible. This confrontation. Okay, And this contradiction is not going to affect your android functionality. It is just an additional step to make it work on the IRS on their traditional stabs to space for another variable or this common on you have to pass available, called us reversed. Underscore Klein. Underscore idea. Okay, so now where can you get this reversed client ready from? You can get it from the not the least file that we just downloaded from the fibers. Or simply open this up. I'm going to open it in sort of. TVs scored. Okay. And let me show you. Here is the reverse client. I d. Okay, so simply copy this value. All right? On Bay Street over here. Okay. That's all you need to do to make it work on the IOS platform as well. Okay, now, simply hit. Enter Now, As soon as this thing is done, we are going to install the end packages. Well, let me copy says, Well, let's head over to their terminal on Wait for this, Aniko a plug in to install. So as you can see, it is done installing now. I simply install the and pain packages. Well, now in it. Oh, configure this Google plus in start off our road model. So let's head over to the abduct model. Dirty s okay on simply close this B list file because it is no longer required on. I would basically get this import statement from here. Okay, on. I'm goingto pasted over here on going toe at this Google plus inside of the providers are. So I'm going to add this thing over here right now. Let's head over to the fire basalt service and start creating the service for the native logging. So I'll had ordered the five assault service on here. I'll basically create our function called us narrative Google. Logan, get on here. I'm going to First of all, injected Google plus service. So going to inject the Google Plus service over here Gonna say private Google Plus and this comes from Google Plus, so as you can see, it is injected over here. All right, Next I'm going, doesn't they said this dark google plus dart logging? And instead of this, I'm going to pass a bunch of configuration. So the first thing that I'm going to pass is the plane tidy? All right. On you can get your web claimed ready from the fire based console. So if you basically goto the authentication, then if you go to the sign in methods Okay, then you go to this Google Logan on Dhere. If you scroll down on you, go to the web is take a conflagration. Okay, Then he reserve that Clinton simply copy this on Bay Street over here. Okay. Next, you can pass a bunch of thing such as the offline attribute. Okay, Now you can set it true. This is required to get the refreshed Okanagan again without having the user to signing. And you can read more about the offline moored on the goal documentation. Next, you can define the data that you want to fight for the user after the authentication is successful. So you can define it over here in this school, property on you can specify things like profile email, and there are various other scopes as well that you can make use off and you can find it in the Google. A great documentation. Okay, Now this logging mental basically returns the promise, so I'll make it off the other cable over here on going to make this function easing. All right, Andi, put everything inside of the track. It's block. Don't get any sort off. All right? On going to move this inside of their tribe block on in case off. Any other going toward the error just like this. All right, on. I'm going to look at the result from here. And once the authentication is successful, this result is going to hold the idea, Tokcan, which we're going to pass through the Angler Fire Service. Okay, so let me just do it now. So here. I'm going to say this Dart England far ought not aught darts signing and retrieve. Great of it. Credential! On here. I'm going to pass the gulag provider. So gonna say out dot Google at provider dot credential. And instead of this credential, I'm going to pass the idea to open that if we get over here in the result, So gonna say result not. I do talking. All right. So the reason we need to pass the already token toe the angler five services that they will bless service and the angler Far service are completely different, right? We're using the Google Plus Service to do the Google logging on the native platform. And there is no way the angler fast service can No, that the user is logged in. Hence, we cannot predict the user authentication state that this whether the user is logged in or not. Hence fear using one off the way in the angler fire out service to send in with the torrential and passed they go a lot provider I retook in on this all sort of blends the promise so I can make use off the average Cuban over here. Okay? And I again simply Dundee result. All right, so that this looks scored and our services ready. So now let's use their service in the log in page. So basically, go to the log in page 40 s file on here. I'm going to create a function called as Native Google logging. And inside of this, I'm going to call the fire. Was all service needed Google logging Okay on dis returns, a promise. So going to make it off the air raid killed over here on will make this function you think on. I'll put everything inside of the brackets block all right on going toe. Simply move. There's a statement instead of the try block. Next, I'm going to show the toast message. So when I said this your digital service president toast. And instead of this, I'm going to pass the messages. Logging success, all right. And in case of any other, I would like to show that those messages Well, but this time I'm not going to fetch the other dark message like this. Okay? The reason is that the Google Plus Local library returned the Adam message in the form of error straight to school. OK, such as +120534 Whatever it is. So this kind of straight, this court is not going to make sense to the end user. Right? So here I am going to make it off this tactic message, such as something went wrong. So gonna say something. We went wrong. All right. Hopefully this makes sense. We can do one more thing, which is to show the law order. Are the page loading? So gonna say this dark. The general service dot But as including okay, on once this process successful, I can simply say this door video during service start dismissal order. All right. And we can also navigate the user back to the home road. So when you said this dark router dart navigate on going to pass the home road Quite simple . So I think our method is ready. All we need to do is to plug this particular method on the Google log in button right, Which is over here now. They are already calling this Google logging Web on the click off this person. So what? We can do it. We can detect on which plate forme the application is running on accordingly. Maker decision whether to call the Google organ Web ordinated Google logging. All right, so first of all, I'm going to create my throat over here, and I'll keep them at her name as Google logging okay on going to call this particular matter on the click off this button. All right, now here we are going to decide whether to call the will organ native or the Google Logging Web, so we need to detect on which played former application is running. So let's create a help US office for the same so that we can reuse this matter in multiple components. So here I am. Well, doesn't play. Say, is native played phone. Okay, so not true. Detective Platform. We can make it off the plate from service. Vanessa, Private platform. And this service comes from Madrid. I neck slash England. So here, going to same place at this dark platform. Dark is Cordova Order. This lord platform is capacitor. Okay, so if any off this condition is true, that means that application is running on the native platform. All right. And if you're wondering what this capacitor it is similar to Cordoba, which provided the native plug ins on it is built by Annick itself. Okay, Andi called was built by the Apache. And you can find more information about the capacitor on capacitor door. Titanic famous dot com. Okay, so we have created this service. Let's use earning the Logan pistol tears. So gonna say if they start help us office dot isn't a D platform. Okay, so if this condition is true, gonna call the native Google logging okay? Otherwise, I'm going to call the Google Logging website. Gonna cities start Google loving web. Quite simple. So I think this looks scored on. That is just one thing that we can improve here in the typical Logan is stored this mystical order, even if there is a matter. OK, so I'm going to pay. Is this matter over here? So I think we're good to go. Now let's head over to the government on as you can see on the writer inside, I have this screen casting. Okay, Andi, I'll try to interact with the screen so that there is less and less frame drop. So no, let's deploy application within 80 platform. So gonna say I Nick Cordova Android and I'll get back to you as soon as it is done. So as you can see, the application is deployed. Now, I'll basically try the Google logging. Now, if I click on this Cool Burton, then, as you can see here, is this green on it is asking me for devious email. No, I'm going to simply chose any of the email. Okay on, let's see what happens. So it is asking me for the permission so I'll simply click on allow. I like to what happens so, as you can see here is the order on were locked in. That means the logging, its success. Okay, so because the Google Logan is working perfectly fine. And there is one thing the meaning, which is native gold logo, which we're going to implement in the next video. But let me show you what kind of issue that you got because of this. So if you simply click on this logo button and no, if I try to basically logging, then you will see that it will simply ask me for the previous email nor the screen photos, videos, emails. Right. So the reason this is happening is because we haven't logged out the native Google logging properly. So we're going to implement this in the next radio and we can try one more scenario. The rig user doesn't allow the access. So if I click on cancel, let's see what happens. So, as you can say to, something went wrong. And this is the message that we I did over here. Okay, this is this tragic message. Okay? So, against their search for the native, you go logging. And I hope you were able to follow along. And thank you so much for watching this video 26. Firebase Google Logout For Native Platform ( Android, iOS ): Hello. Everyone on in this room. We're going to perform the native Google lockout. So as discussed in the previous video that if we try to log in with Google now, okay, then it doesn't ask us what they ve this email, okay? Or the list of the mail. It it just tried to ask for the permission from the previous email that we just signed in. Great. So let's see, How can we basically fix this sort of fix it and basically go to the court base on Let's head over the fireplace or service? All right. And if you go to the Lord service, then you will see that we're just calling this an old method on the angler Fire out service . Okay. We haven't called anything on the Google plus service, right? So what we need to do is whenever the plate for Miss Native, we need to call the lowered method on the goodwill per service as well. So, first of all, I'm going to create the matter over here. So gonna say native Google logo. Okay on. I can simply say this door Google plus dart logo. Okay, That's all I need to do on I'll basically had the track. It's block so that I can get theater. So when I did like it's block. All right, on Here you go. Noni Kids Theater. I'm going to simply through the error. All right, so now we have this service ready, which is native Google a gold. But we need to call the service on live in. The application is running on the native platform. So for that, I can simply go to this longer matter on here. I can make use off the help of service and check if the platform's native and in three days , Then I can simply call this matter. OK, so let's first will inject the helpers office over here. So when I say private, the post office on this comes from help US office and it's going to see it is integrated. Do top. So here I can simply say, if this dark help Oh, service door isn't a different form. So if this is the case, then I can say this dark native Google logo okay, and we'll make it off the obit. He was over here. All right, so I hope this makes sense on let's test it now, so go to their terminal. Open up. The screen is well on here. Going to run Nick Cordova and right. And I'll get back to you as soon as it is done Deplane. So as you can see, the eight begins. Deplored. Let me the freshness again so that there is no friend drop. All right, notify Logoed. Now, if I log in again, then we should see the least off email photos from Let's straight now. So as you can see, there are various option available on this is exactly what we wanted. Let me chose any of the email. Okay? All right. I loathe the excess. The Logan in success. Let me logo on tested once again, as you can see. No, again, I get to choose Other email is well, all right. And this is what we wanted. So let my testes again. As you can see, it is working perfectly fine. So that's it for Google lady logo. And I hope you were able to follow along on. Thank you so much for watching this video 27. Profile Page: Hello, everyone on In this regard, we are going to implement the profile page. So whatever Electra do is generally profile Page on Did the navigation over here in the menu item on. We can remove this list menu item because we are not using this. OK, it's and simply a boilerplate that is generated by the annex. So let's head over to decode base on. First of all, I'll go there on hearsay. I Nick generate page profile on going toe added navigation in the I'm menu item So we can do it over here in the APP pitches because this is the area in which we're recruiting in the abduct, competent or that steam all over here using the energy for so going toward the profile manual item over here. So let me over this thing. So for the title, I'll say profile for the Ural. I'll specify the profile on it is different over here in the applauding model. As you can see on for the I can, I'm going to make it off the person, okay? And I would like to operate one more thing, which is toe update the ICANN color as secondary. So here I'll add on a tribute off color on Sadik Toe Secondary. So let's see, How does the oil look now? So as you can see, it looks good on if I tell you candy profile, then I'm navigated to the profile, bitch. Now let's start descending the profile page. So basically, go to the profile page. Okay? Onda here in the profile page. First of all, I celebrate the Entitle s profile. I would like to also add the I in Britain's okay for the back button on. I'll give it us Lord off. Start on inside of this. I'll basically have the iron back button right on for 34. That tariff. I really brought it home in case the believer speeches not found. So let's try this now. So now we have this back button over here on. We can never get back and forth. Now, the first thing that I would like to do is to face the user profile in the profile page. So let's go to the profile Piss tortillas on here, going to create a function called as get user profile. Okay. And here, first of all, going to inject if I the best all service because we're going to make use off it. So gonna say fire base. It's obvious on this gun from fire result service. So here I can say this door. If I the best or service don't get odd state, I can subscribe to it. They navigate these air object, okay? And if the user is found, then I'll basically assigned this. Was that object to a class variable which we will use to show the information on the esteem . And so, first of all, I'll say profile in four, which will be off type any on initially started to empty object. Okay. And if the user is found, then going to say this, start profiling for equals. Use their dot to Jason. Alright. Normally basically called this function as soon as the constructor, its initial list. So going to call this function alright on once we get the later then I would like to also show the profiling for chicks are going ahead. Console log over here. Okay. Ongoing Oprandi profile. So honest at the start profile info. Right. So let's does this in the plaza. So, as you can see, we have this profile info available in African show videos information from here to the colorful object such as the email or the display name. Okay, we have the email over here on. We also have the photo you are. So let's start descending the same. I'll go to the profile based on a statement. So here, first of all, I'll have the angry and I would have to give it a fixed attribute. Then I'll have the Andrew and we like to give it a class off iron, justify content, send it. Then I'll have the in column. Okay. Andi would like to give it a size off 12 in the extra small. I would like to give it. I would like to give it 12 is well for the MD. I will give it six. And for the energy, I will give it successful. Okay, now here. First of all, I will have the guard. Then I will have the iron God heard it. Then I'll have the Iron Guard title on here. Going to see a profile. All right. On, in sort of the end guard content Have we looked at first, will show the image to alert the andro here festival. Then I learned the Iron Column. I would like to give it a size off. Well, all right. And instead of this and column, I let the an image okay on, give a source off profile in food. So gonna fetch the profile info dot Foretell You are. Okay, so let's see, How does the white look now? Then we'll proceed further. So it's off. No, the image, It looks quite big. Okay, so what we can do is we can add some seizes over here. So I would like to add a class over here called as user every time going to defend this class in the global Daughters Sisters file Right on. We like to give a bit off 100 pixels. I would like to give a height off 100 pixels as well. Let me say this note school, but the browser, so as you consider it, looks once better like seeing the larger devices. Well, all right. So, no, while tryto display the name as well as the email on, would like to fetch it from the profiling for object itself. So let's go to the profile page started steaming on dhere. I would like to add another column all right. We like to give it a size off 12. On inside of this. I'll have the Iine item fistful. Then I'll have the iron label on for the label. I'll say name. Okay. On for the value. Electro fractured from the profile info. Dark display name. Okay, Because if you have a look at the object carefully, this is what is holding the name on Would like to have the email is well, so going to simply copies update the level as email ongoing So feisty email over here. All right. Like mischievous. And let's see, How does the u I look now? Okay, it looks much better on sometimes. You will see that the display name is basically no. So what we can do is, if this thing is now, then we can add an order, condition or here on going to simply specify the hyphen. All right. Next, I would like to also add the lower button over here on the profile page on will remove this lower button from the homepage. Okay, so let's are double turn over here. So here I'll add another column. I am column and would like to give it a size off. Well, on going toe. The I in Britain over here okay on would like to give it a color off secondary. Well, at the expert at Rebuilt as block. Okay, on for the next else a logo. All right. Next on the click off this, we want to basically called the longer method ride. So I'll handle the click over here going to make it obey. Lord mentored. Okay, on Let me I did on the profile page. So I love my heart away here. And in fact, since we're not using the home piteous logic so we can simply copied this logic for the lower from here, and we can paste it over here right now. We need to inject David Erdogan service as well. So it's injected over here. Andi, I think there would go. We also need a doctor, but actually, we don't need it. Because if the user out state is no, then we have handled this instead of the abduct competent tortillas. Right? So let me show you. So if the user is not lobbying, then we're navigating to the logging pitch, so no need toe navigate the user to the logging from here. It will automatically get handled over here. Okay, on. Let's test it. Now. Let me see if this let's go to the browser. So this is how the lover button looks like. Okay. On. I think we can removed from the homepage. So let me go to the home visitor. It's team on the move this thing on, let's go to the profile page again on going toe simply lowered from here. So, as you can see, we have successfully able to local. And I would like to also cover one scenario we're in this for to your will becomes null. Okay, So what we can do is we can show our the for intimate in such cases. Okay, So basically, if you bridal signing with the email and the password on user doesn't have image associated as off now, so we can test this scenario. So basically, in Oregon, with the email and the password Okay on, you will see that the photo you really will be No. Okay. So let me assure you So, as you can see, there is no image over here on If we basically goto the provided later, then as you can see the photo. You are a listener. So in that case, we can show our default image. So I have already added to the 40 minutes in the assets. Hold on, let me to show you. Here it is. So we're going to show this default. Alberta if therefore does not phone. So let's head over the profile based artist email on Dhere in the SRC Attribute I would like to add or our condition over here and now I'll fetch the avatar from the asserts folder. So going to specifies it slash ever. Don't not PNG So let's take this now. So this looks scored on. We can do one more thing, which is to show a spinner are till that time did it is being loaded on the profile page, So let me just started. So I will go to the profile placed orders stable on Dhere those below the end grade. I would like to add the Iron Spinner okay on for the type of the iron spinner, I would like to use the lines OK on for the color. I would like to use this secondary. Okay, let's see, How does this Espinel look? No score to the browser. And as you can see here, is this peanut? First of all, we would like to center it. Okay, so for that, I had a class over here called as page order on which people are the customs uses. So let me just copy this. Go to the global daughter ceases on here. I'll add this custom class on for the styling. I said stop as 45% on left as 45% and would like to give the position as fixed. All right, so let's see, How does the spinner looks now? So it against in our it's in the center, and I will go ahead and show this is spin it on the basis of some condition. So going to define our bullion variable over here in the profile place tortillas. So gonna say profiling available. Okay, this will be off by bullion. Initially started to falls. Okay, Onda here as soon as thes get profile is called Gonna set this profile available equals falls. Okay, on as soon as we enter this call back, I will have decided to true, all right. And even if there is a matter which we can get in the error called back off the substrate so you can fetch the other call back over here. Okay, Onda going to set the profile available is true here also, because we want to hide the loader even if some error is returned by this particular observable. And I think we can add this other call back in the abduct component or piece as well. Where we are basically hiding the Lord er which is this one dismissal order. And I think we forgot to order. I don't call back over here. So here also theater called back. Ongoing. So simply into cities, doors, video students office, dark business loader. All right, so now we can make use off this variable in the profile based on each table on going toe to toe and the if conditional way here and going to specify this valuable. And I like the North Condition because as soon as it is available, I would like to hide this a spinner. So let me say this and let's go to the browser in test. So as you can see, this looks good and we can do one more thing. Aziz Long is the border is appearing, we can hide the content. So here in the Andrew, I would like to add a and the F condition over here. If the profile available is true, then only show design drew otherwise don't show, as you can see, No, for defection of second, we first of all, see this spinner, Then we see the content. Okay? And let's also check the U. S in the last 30 ways, like amid a fresh shirt again. So, as you can see, this is how it looks on. Let's also tested on the ice as well. So here I'll basically tools the IOS device. Onda fresh the app. Okay, So as you can see this Howard looks, let me never get back to the profile pitch. Okay, so I think your profile page is ready. And there is just my nothing that I forgot to update. Let me show you. So if you basically go to the profile placed RPs So here in the air, a call back. I forgot to show the toast. So here I am going to say this dark winter student service Lord president Toast on were like to fetch the message from the other objects are gonna say edit dark message. Okay? And we like to do the same in the after competent Ortiz as well. Okay, so we like to show the post message over here as well, in case any radicals. So this will be very helpful for the user are to track the other message. So that's all I wanted to do on I hope you were able to follow along on. Thank you so much for watching this video. 28. Fetch Product List From Firestore DB: Hello, everyone. So so far we were interacting with the fibers authentication service. But now it's time to interact with the cloud fire store databases will on. You confined your database over here. Okay, so if you click on this database, then you will be navigated to your clarify store TV. And this glorify store DB is a non sequitur tablets on it stores data in the form of documents and documents are stored inside of the collection. Okay, so a collection can hold multiple documents. So, for example, you can have a collection off products. So all your product letter data, Will you go in that particular collection? OK, so now what we will do is first of all, we really create a collection over here, and we will interact with the fire started Double service on DFAT. Stay. Data from here on will be spread over here in the homepage. Okay, on. Then we will perform all other operations, such as adding to moving on operating those data. So let's first of all, it created a collection over here, so I mean the collection as product on inside of this, I'll have some w products so that we can fetch it over here, so I'll enter some off the field associated to products such as name, price size and the brunt. So I lent it over here. You can select the type off your feel over here as well on going to enter the name as T shirt. Then for the price I'm going Tojo's, for example. $20 will select the size as for example, Excel on 40 Brand. I chose 90. Okay, so I'll simply saved this product on. Then you will see that we will have ah product being created over here or the document being created over here on. You will also see a unique document. I d. Okay, so these are all difference in this particular document. And this is the unique I. D. That is generated by fire story itself. Okay, And here is the collection on. Just for the sake, off having more products that may have some more documents or more data instead of this collection. So, as you can see, I ever did a couple off more brooks over here. Now we can start interacting with this db on fights. Read it over here. So if a soldier and writer service to interact with If I store db so here and simply say Hynek generate service on I would like to place it inside of the providers for the on For the name of this obvious I say fire store heifers, baby. Okay, so, as you consider it is unrated. Now, we'll basically go to this particular service on First of all, inject the angular fire store service. So gonna say private baby on. I want to inject the angler Fire store service on this comes from Madrid England slash fire slash five Store Next. I would like to create a function over here. Cordes, get product list on instead of dysfunction. First of all, I'll say this door db dot collection on dhere and specify the collection name. So, as you can see, we have already named the collection s product. So going to specify the same over here. Okay. And this is my third available Caldas Village in this. Okay, so this is where looting just basically returns an observable, and we're going to do it on this observable. Okay, on whatever component that is interacting with this service can subscribe to this observable and get big later. So a struggle I'll go to the homepage, Scorpius, because that is where we want Go fetch the product list. So here, going to create a function called is get product list. Okay. On also going to inject the fire store db service. So gonna say private fire store baby service on this comes from five story vis a vis on dhere Going to simply say this door five story vis a vis dot get product list. And since it returns and observable So I'm going to subscribe to it and we'll get the desert over here on simply going to console log the results over here. All right, so let's see, what do we get? So I simply print out the desert late on. Let me see if this let's go to the browser and I think before God toe invoked this particular matter. So I would like to win work it instead of the constructor. So gonna say this dot Get product list. All right, let's go to the browser and test. So it's off now. It says, Ah, five started his office door. Get berg list is not a function, but actually it does exist. But it is saying that there is no such function instead of this service. Okay, this happens because of the I need cash problem. So sometimes the changes that you make is not recognised specifically when you are running our lives over. So to get rid of this other, going to remove this, save the changes on duty changes and save it again. So this where were forcefully detecting the changes to the annex. Eli Alerts, check now. So now, as you can see, we have this result over here on, we have all these three products which are coming from the five store. Okay, Now, one thing you can observe here is that we are not getting the unique i d for each and every record that this president over here. Okay, so we have this unique idea over here in the five score database, but we don't actually see it over here. And we actually need this unique i d to perform for the operation such as deleting the product, are operating the product, right? So the reason we're not getting the idea is because this polluting this matter doesn't return the idea. It's as simple as that. So we will use some of that mattered. Called as snap shorting just for letting me to show you. First of all, welcome in this out. Okay. And here going to say this door db Lord collection Well specified. The collection name over here next. Going to make it off. This snapshot in just method on this is stop short genius. Also dunce. An observable. Okay, No oil applied the pipe on this particular function on by Busan method available on the observable and it is used for composing the attics. Yes, operator. So we're going to use a text. Yes. Operator recorders Map. Okay. On first Awful. Going to inject the map operated from the addicts? Yes. So gonna say import my from our next race slash operators. Okay, so when to make it off this operator on these operators are basically used to transform the data. So here in the call back, I'll have access to the documentary. Okay, on here. Going to simply say, Britain Dockery dot map on this map is simply javascript function on the area. Okay? It's not in our exist operative. So here, going to simply say Dockery dot map on in each attrition I'll get a single document. Okay? And now I want to basically return some off the data. But for so I would like to show you the idea that this president instead of this document Okay, so we took on Salah. Get over here. So in a second, Sold a lot on going to simply say, doc dot payload dot dog dot i dy southern safeties on. Let's go to the browser and see what we get. So as you can see here in Egypt aeration, we have access to the idea that this present inside off the fire store Devi As you can see , these are the same document I d. They were able to get over here. Okay, on. If you want to access the later, then you can call the diameter on this particular dog. So let me show you. So going to call the diameter on this dog on just for the sake of different shooting Going to wear some different console log message Let's go to the closer. So as you can see, first of all, here is the I D on. Here is the data for the same. Then we have another document. I D on its data on the other document idea, and it's straight up. OK, so now we have all the data that we require. All we need to do is tow mark to this idea with the appropriate object on dirt under data. OK, so here, going to simply say I didn't an object on First of all, well specified er 80 over here on, we confess dirty from dark, dark payload, nor dog wrote I d. And next, we want to positive data that this particular method returns right. So instead, off fetching each and every key and the value in space if angered over here like this, for example, name as dog. Don't be Lord nor dog nor data dot name. Okay, what we can do is we can simply spread of it. This whole object over here. Okay, so I'm going to make it off the spread operator on going to specify doc, not payload, nor dog, nor data. OK, so what? This is spread, operator will do is it will take each individual feels from here and going to spread it over here in this one object. All right, let me one show you by adding the console. Lock off this whole objects. So there you can see properly how this object is formed. So going to pay stood over here on. Let me see if this let's go to the browser and check. So here is the console log. And as you can see, this idea is marched in this whole object, right? Because there's a spread. Operator is basically taking all the feels from the object and spreading it over here. Okay. And if you have a look at the desert, then as you can see now we have the ideas Well, along with the data. Right? And that is what we wanted. So, you guys, that's it for fetching the data from the fire store db On in the next video, we had window display that are over here on the homepage. So I hope you were able to follow along. And thank you so much for watching this video 29. List Product UI: Hello, everyone. And in this video, let's start creating the way for the product list on the home pit. So the first thing that I would always toe assigned this result inside off a class. Really? Well, so going to declare a variable over here called us product list on this will be off library , and it can hold any sort of values on initially else I did, Um, here. Okay. On as soon as we get the desert over here. So gonna say this tarp product list equals result. All right, on, in case any other is written by this observable. So going to add another call back over here is Well, okay. And instead of this, we can basically show the toast. So gonna sit this doorway deodorant service dot president toast. And for the message you're gonna say, edit dark message. All right, Andi will start descending the way in the home personal esteem in So here. First of all, I'll have their own greed and we'll add a fix attribute, then here I'll have the Andrew and sort of this. I'll have the in column. Okay. For the class on the Andrew. I will give it justify content. Center on for the column. I'll give it a size off 12. And in case off larger device will like Tokyo exercise off sex. Okay, on here I'll have the analyst and we like to get rid over this list using the energy for a tribute. So here, going to say let product off product list on then I would like to have the line item inside of this on simply going toe displayed information. So going to make it off the an item on toe have a clickable behavior on the an item. I'll give it a tribute off burden on inside of this Going to simply say product Dark name. Okay, so let me see this and let's see, how does the u I look? So as you can see, we have these three item over here on. We have this clickable behavior because we added this burden on the sign item. Okay. And let's also see the u I in case of IOS. So if I go to the iPhone there, fresh it so you can see this is how the white looks on in case off IOS, the Iine item receives the arrow icon if you specify all clickable behavior on the an item such as providing the button attribute or the ref. Okay, So this is the default behavior off the an item component. And if you want to know what this behavior, then you can specify a property called Estivill. So this will basically show or high idea I can, on the basis off the value that you specified over here. So if you specified true, then it is always going to show the air. Awaken onboard de platforms. Better read we android or IOS. So let me to show you, as you can see, if I go to the pixel on a fresh that as you can see on the inert. Also, we get this air awakened right on. If you started to falls, then on both platform, this air awaken will not be visible. As you can see, it is removed from here on. If I go to the iPhone and fresh then as he considers removed from here as well. So we were told we showed this detail, Aiken. So I'm going toe again. Started to basically true. All right, let's go to the browser in check as you can see we have this that awaken over here Now whatever like to do is to add a spinner Pillar time. The data is being loaded. Okay, so there is some minor delay by which the guys available. So going to make yourself available over here recorded as product available on this will be off type bullion. Initially started Toe falls. Okay, so a Souness this matter is called gonna say this door product list available equals false as well on. As soon as we enter this call back, we can say product list of a liberal is true. And even if there is some other, then still we can say product list of libelous. True. Okay. And I would like to use this variable r to show and hide the and spinner in the homepage. So if you're going to add the eye and spin it, Okay, I would like to give her name off lines. OK, then I would like to give it took a lot off secondary and we let the NDF condition over here. So we want to show this particular spinner Onley when the product list is not available. Okay, so here I'll apply the north condition. And we can also had the page loader class that we have defined in the global daughter Sisters file for making this particular spear in the center. Okay, so we have already defined this in the previous video, As you can see. So let me say this. Now Let's see. How does the U I look? As you can see, we see this winter, but then we see the year. Okay, so I think this looks good on. One more thing I would like to do is to add pulled onto the fresh functionality on this particular page. So for that, I'm going to make use off the end of fresher. Let me to show you if you go to the U. N. Components on basically serves for the refresher. So this is the kind off you weigh that I need. The user can simply sit right down and the fresh so you can make use off this particular and refresher on. Make sure that this refresher has to be the force child off the iron content to make it work properly. Okay, so going toe Cooper, this on the street over here in the homepage. Okay. And as soon as you basically pulled on, this under fresh event is fired. And we need to handle this event in our competent file so they don't see the example. So here is the method. As you can see, it receives the event object on. A soon as your ace in Ghana starts is complete, you can call event or target or complete to hide the refresher. Okay, so going to simply copy this matter on going to pay shirt over here in the home pitch. Okay. Now, instead of hiding this particular fresher only after two seconds, we would like to hide it when this product list is available. So first of all, let's see. How does the U I look? So let me check. If I save this, let's go to the browser on at least. Let's see. How does the fresher look? So as you can see, this is how it looks on. If you go to the I always let's see, How does it look on the eyes? This is how it looks on the i o says agency. So now we want to basically hide this particular spinner when the product list is available , so instead off. You know, having the site family. I'm going to First of all, remove this. Okay, remove this console log as well. And here, first of all, obviously called the sink operation, which is get product list and going toe past the event object through this pretty elementary on day here in the get published, I can define this event as a parameter. Okay, on, If this event is not send, then I'll initial s maternal. Okay, so this is really, really before value off the vent if it is not passed. So this particular function so no, As soon as we get inside of the subscript callback better it is a success or the other. We would like to hide the baby refresher. Right? So going to clear the matter over here called as handle the pressure okay on it will basically receive the event object on going to simply say, event your target don't complete all right and going to call this method in the subscript called back. So when I said this dark until the fresher on going to pass the event object, okay. And even if the observable reserved no one ever going to call this function is Well, okay, now we need to check one last condition over here in the handle. The fresher, sometimes thes event object will be No. Because, as you can see, when we're calling the get purposeless, what? The first time we're not passing the event object from here. So in this case, the event object that the handle of pressure will receive isn't And we don't want to call this complete Mitterrand the null object. Right? So here, going to add a if check on the event object. Okay, I'm going to move this thing inside of this. Okay, So this is going to exhibit on living this, even displacing. So let's test it now. Let's go to Gaza. No, If I do pulled onto the fresh then as you can see, it is immediately hidden. The reason is that we are replicating the pain response Even you can check in the console. Let me clear it as soon as served. Opal, don't do it fresh. We have the response from the and once we have the response, we are basically calling the handle refresher from this subscript called back on. We basically called this complete mattered on the official gets removed. Okay, so it's quite happening fast because the response is quite false. But that's OK now. One last thing that I would like to do is to show a message over here if the product list is empty, such as no products phone. So I will basically go to the competition. Arrest email on Dhere just below the list. I'll add a paragraph on for their text. I would say No, I got a phone all right and would like to wear the condition over here. So we like to show this particular message only if the product list is empty. So when I said product list dot land and if this written zero, then we need to make this condition true, so I'll apply the Not So let me say this on. Let's go to the problems RNC. So it's off Novia seeing this message right away. The reason is that in each ality product list is empty. Okay? On it is being available after an e p. A call to defy story be which isn't is in Ghana's task and take some time. So what we can do is we can add a and the F condition over here in the eye andro itself. So we will show all of this content on living. The products are available. So here, going toe order and Jeff on going to simply say show when the product of a level is true, Let's go to the browser and see. So now this looks good on I think we are good to go and that's it for the least product you away. And I hope you were able to follow along. And thank you so much for watching this video. 30. Add Product Form UI: Hello, everyone. So in this video, we're going to design the product form on. First of all, I would like to have a button over here at the top right corner for navigating toe the product pitch. So let's add this Britain in the home page. So I'll go to the home builder that Stammel and here festival. I would like to have ah, I andro insert off this island I in column and give it a size off Well, on Dhere In sort of this end column I would like to have ah in Britain on will give it a color off family and we'll give it a class off iron float, right, So make it float on the right side. And in sort of this, Britain would like to have an eye. An ankle on the name of the extended I would like to use here is heard hyphen circle and for the text going to simply say add OK, so actually, how does the u I Look, let's go to the closer. So as you can see, this is how it looks on. If he go to the larger the ways and let me refresh Now, I would like to have a click listening on this particular button and would like to navigate toe the ad product page. So first of all, let's gender the Eid product pitch, so I will go to the terminal on here. I'll say I nicked generate beach at hyphen product on. I'll also add the click listener on this particular Britain. So here I had to click listener, and the method they don't want to call is open at product bitch on going to create this matter in the homepage tortillas file. Okay, on also going to simply injected out the service over here. I think it is already injected. So here we can say this, Dart wrote. Don't navigate and for the But I'll specify hard hyphen product and we can cross check this part with the approaching model. So as you consider this ad hyphen product, so I think this looks good on Let's test it now looks cool, but the Broza no effect weaken dish. We're not navigated. I think it's a 90 cash problem, so let's go to that steam ill on remove this thing, save the changes on do the changes and save it again. Let's go to the bazaar now. No effect like on this, then, as you can see at product pages opened. So let's go to the head product page on, start designing, deform. So for stuff, a little update the title, as that verdict on would like to have the line back patents. So going toe first will declare the I in Britain's give it US Lord off. Start on inside of this. I'll have the iron back button, all right. And we'll give it our default truffle off home in case the previous, which is not phone onda 40 form. What I would like to do is I would like to copy the phone from the Logan based on text email on simply going toe. Best it over here. Okay, so we took a street over here. Now the first thing that I do is tow Go to the ad product model, file on in, take the reactive forms model. Okay, So going to inject it over here on going toe? I did instead of the imports today. Next, let's go to the airport page on. I'll copy bunch off things from the logging paste or two years such as all of these variables from here on going to pay street over here, going to update the log, inform toe product foam going to inject the form group as well as the form control, as you can see there injected. Now Onda here for the field, for the product. We're going tohave the name then we're also going tohave the place. Then we will have the brand and the size as well. Okay, for the four meter, I'll basically create this object because we're going to use this. Someone has a name price. Then we'll have the brown on. Then we'll have the size as well. All right. So fully this makes sense on for the validation messages. I would like to create another constant for the art products. So going toe added over here on this will be called us that product. And I think the only validation we will have on the product form is to have all of this field required on the name price brown and the size. So simply going toe them over here. Okay, on going to do the same for the prices will on going to do the same for the size and all right, I'm going. Go to the messages. Well, so gonna say name is required. Then we'll see. Prices required size is required and the ground is required. Sort of a tradition messages already. We can post it further in start off shore, Logan, Spin. And I would like to update the variable name as show hurt Product spinner now lexical to the log investor Tears on We're going toe. First of all, have this to matters in the end, the only need So going to base your door here on going toe Copy both off this method so going to cope in this create form control and they create form as well as the on formally changed over here. Okay, on going to import all the missing imports right on instead of female minuto, First of all, specified the form control delegation for each off this field. Right? So, going to say this dark name he calls to new instance off from control. And the only way alligator that I would like to have is the required so going to remove this on. Let's do the same for the other films as well on just going to update the form control on here will specify the size on here will specify the brand. Okay, Now, let's also afraid the form group object. So for stole, I'll update all the differences off the log in form with the head product from Okay, do the place it Onda here instead off email. Let's call it name on Going to face the name from control next. Going to fetch the price next. Going to fetch the Saiz and at last going toe first E brown. Okay, so I think our farm is ready. We need to inject the helpers office, so let me do it over here. So gonna say private helper service on this comes from helpers office. All right, so I think this looks scored. Now let's head over to the product we started steaming on. First of all, insert off log in form. We would like to reference the product form on going toe up. Get this reference over here is Well, okay. Now, I would like to have the button for adding the product and just going to take out this button from here. Okay. On going to remove this andro on here went to paste this burden. Okay, for the text to going to say act product? No. Here I'll remove this click listener because we don't need it as off. Now on. Instead, off shore Logan Spinner I would like to fetch t show at Project Spinner. Okay, so fully this makes sense. Now the only thing remaining is to update the phone field. So here, instead of female going to say name Okay, on relaxes the form control as name. Okay. And we'll try to fetch the formula listening next, Going toward the label as price on this will be off type text. We let the form control s place on here also will fetch the price. All right, we'll do the same for the size and the brown. So if you're goingto say size here, well specified, the form control essays on here will try to first theater from size on. Let's do it at last for the brand. So he ran said brown and would like to first deform control from burned on. We like to first the other from the brown. Okay, so let me say this alert school But the browser in test How does the ad product from you I looks that's never get to the air product. So, as you can see, this is how it looks. And I think before you go to update their title, so here are basically updated. So when I say that product and I lost hope, did the I can't from key to cube. Okay, it's a large scored at the buzzer. As you can see, this is how it looks now. Lord soldier has the formulation. So you find that anything over here so it says cannot read property required off undefined . So I think we forgot to their friends the proper form over here in the evaluation message because it is not able to find the require property. So instead, off Logan minute to address this ad product. So going to update this over here and going to import this word here is well, so gonna say at product OK on going to remove this logging because it is not required. So let's save this on just now. So, for example, if I under the name, if I under the price, then as you can see, we have proper validation message, and until and unless we entered all defeats, the ad product Britain is not enabled. Okay, So as you can see So I think our farm is kind off. Ready on. I think we are good to go. And let's also see this form in the larger device. So let me refresh it again. No. If I did anything over here, then as you can see, this is how the formulation looks like in the larger the ways service. That's it for this particular video on I hope you were able to follow along on. Thank you so much for watching this video. 31. Add Product To Firestore DB: Hello, everyone. So now that we have the product form ready, let's create a service toe, actually at the product to defy store database on the click off this Britain. So the stability basically go to the fires for TV service on here, going to create another method for adding the product. Now instead, off writing the function as ad product, I would like to make this function generic and the same can be done for the get product list function also. So if you have a look at this carefully, then all you're doing is simply fetching the data from defy So database on this collection right now, let's suppose there you have another collection called us Orders. Okay, over here. So for that, there is no sense to make an extra method for that. All you can do is simply pass this particular collection I d. Dynamically. Right? So I'm going to make this function name as get all data okay on dysfunction will receive the collection i d. As an argument. Okay. And I'll pass this collection ready Over here. Okay. So know what will happen is this function is not capable of fetching all the data from any collection that is specified over here, right? So let's update this producer method in the homepage tortillas because we were using this function over here, which is far the story be service start get perk list now here. Instead, I'll call the get all data right, and here I'll pass the collection ideas product. OK, and now if you go to the browser on, you will see that we will get the same result if you go to the homepage. So let's go to the homepage and as off no, it says five star debates of his door get all the details in order function. So again it's an I need cash problem. So to remove that cash problem, simply remove the cord that is not recognised. Save it on, dude. Eating this and say What again? Let's go with the browser and check. Let's go to the homepage. And as you can see, we have the data available right now. This particular function in the If I started the service can return you all the data off any collection. OK, so now let's pursued for the with the service to insert the data instead of device for TV so he really keep The name is generally because it is not going toe store their time specific collection. This matter is also going to expect the collection ideas an argument. So here we go simply say, insert data and it is going toe. Expect collection ideas and argument as well as the data that you want to insert. Okay, on here we can say this dot baby dot collection specified the collection idea over here on two editor to any collection. You can make it off this ad function on going to positive it over here on dysfunction also returns the promise. So I'll make it off the await keyword on to make it off the await keyword. I'll make this function Issing and I let the try kids block to handle any sort of federal. All right, on going to move this statement over here in the try block on, in case of any other gonna say, throat new credit on going to pass the other object quite simple. And here will basically get the dessert ongoing good it on this particular visit. All right. So fully this makes sense. Now let's implement this matter in the air product pitch. So going to go to the airport? A page on first. We're going to inject if I start the piece of its over here. So gonna say pirate fire store devi service on This comes from five store DB service. Okay, on going toe. Create a method over here called us at product. Okay, on here. I can say this door if I started the service dot inside data, first of all, going to pass the collection ideas product. And as far as the data is concerned, we can get it from the form control. Right? Because all of this data is president instead of this form controlled right and minuto faster data from here on past to this office. So the way you confessed digital from the form control is by saying, for example, let's first of all, first inning So you can say this dark name dot value. Okay, on the same can be done for other fields as well. So when a surprise as this door price. Nor could I knew. Same for the size. This Saiz Lord value and at last will have different. So when I said this start Bryant start value okay on. Since this particular function returns and promise because it's amazing function going to make it off the await keyword over here on will make this function easing on going to add the try kids block over here to handle any sort off. All right, so going to move this instead of the try block on in case of any era begins. First of all, console locked together. Okay, so going to cancel out the other over here? Next, we can show the toast as well. So let me inject the digital service over here. So, gonna say a pirate, we don't have been service on. This comes from digital in service on Dhere. I can say this door to digital service, not present toast on going to pass the message as other dart message. Right on. We can show the success message of one's this promises. It is also one of said this Dr V to Dublin service dot president Toast on for the missus. I can say product. I did successfully. All right. On beacon, Do a couple of more things over here in this ad product functions such as managing the short products, peanut value so here. I can say this dot show at Project Spinner as group. Okay. And as soon as this promises resort, I can simply say this thought short product spinners falls because the operation is completed. Now, on here in the catch block as well. I can set it to falls. Okay, on, we can do one more thing. If it's in success, then we can reset. The form rate began Clear all the feels off that particular form. So here gonna set this dart ad product form daughter reset. All right, so I think this looks good. Now we can attach this particular function on the click off the air product. Britain, with this president in this air product, please watch team. So here, going toe. Adequate listening. Okay on going to call the hair product function. So I think we're good to go. Let me say this on. Let's go to the browser and test. So now, for example, for the product name gonna say sports? Sure. New going to under the prizes. $140 for the size. I'll say 10. And for the brand, I'll say I did us. Okay, so let's start. Sit now so As you can see, we get the success, Mrs On, although we'll fix this formulation soon. But let's go to defy store and gift new product piece I did get. So as you can see, we have the name and sports choose new. We have the price size on by the Brandis, for we actually added the Adidas, right? But I think there is something should be the brand. We actually, I did. The idea does. But it is true here, So let me just check. So I will go to the product page on for the bronze. Okay. So instead, off value, we actually faced developed property. So when I say value over here, see if this go to the Prozac on First of all, going toe, delete this particular document. Okay, on, let's start adding another document so I'll enter. The name is formal shirt. We'll enter the prices $100 for the size I'm going to say Excel on for the brand. I'll say Peter England so technically going right product and let's see what happens now. So, as you can see, it is I did successfully there to take instead of the five years, so let me. Just check. Where is it? I think it is this one. Little England formal, short, $100 size XL looking. So we're properly getting the brunt. No, let's fix the formulation issue. So what is actually happening is although the form is getting geared. But the farm error object is still holding the other messages so we can clear that as well . Salute Scored at the cold base on here. Going toe. Create a function called less. It is her phone. And instead of this going to first of all, say it distort at product form Don't research on also window. They said the other object. So let me copy all of this field. So here I can say this Dort formula equals an object and going to paste all of this field, right? No, I would basically call this research for method from here. Okay, so gonna say this dot Desert form Select Lucy of this allergic or to the browser and test. No, If I add any new product, for example, new sports shoe will enter the price as $200 for the size. I'll say 10 on for the brown. I'm going to say Puma and let make legal night product. So as you can see, the form feels are geared on Also, the form messages is cleared Right on. Let's go to defy store and check. So if I basically take it over here, let me just see where the product is. So I think it is over here. So as you can see it, is that it successfully for this? That's it. For adding the data to defy started abyss on. We have created our genetic service in subtle defies Cordoba service. So you can start any data in any collection on you just have to pass the collection I d. So that is their check for this particular video. And I hope you were able to follow along. And thank you so much for watching this video. 32. Get Product By Id From Firestore DB: Hello, everyone on in this video, we are going to create a product detail page. So we will never get to that age on the click off this product item. Okay, on. We can show further details over there on. We can even add more functionality over there, such as updating the product or diluting the product. But as off now, in this video, we're going to never get to that page and fed to the specific product details from the fire school baby. Okay, so the way we will be doing is a soon as the user clicks on any of the item, we will basically pass the product i d. Total detail pit on that detail pitches going to interact with the fire store DB and phased a product details on displayed over there. Okay, so let's create the purgative page. So I basically go to determinant on hearsay. I nick 100 page part of Typhoon Diggle on a soon as it is done, I'm going toe Add our navigation on the click off this item on, we will ever get to the details page. All right, so, as you can see, it is done on now, will basically go to the home base for that steaming Onda here on each line item, which is this product item. I'm going to add a click listener over here. So gonna see on the click off this call a mandatory Cordes open product detail page. Okay, so going to create this particular method in the home Pissed RTs okay, on going to create it all here on this producer method expects the product ready to be passed. So that began passage further on the product a little bit, so I'll pass it from here. So going toe past the product dark I d. All right on here. We will receive this idea. Okay. And now here, I can simply say this dark rotor north navigate on here. First off a little specified it out, which is product iPhone detail. And next, we can posit the idea as a part perimeter. Okay. Nordic query perimeter as apart. Perimeter over here. All right, so, no. Since we have space, very depart perimeter over here. So we need to be clear, this part parameter in there holding file. So let's go to the uploading Morrell dirty s And here in the product till I'm going to specify the part parameter like this. Okay, so now let me say this. Let's go to the presidency. So no, in fact, we condition. Then nothing happens. And I think it is because of the cash problem. So I go to the homepage, arrest email, going to remove this save the changes, are no detainees and save it again. Let's go to the browser and check now. No, If I click on dish, as you can see, we have this work I d upended in the park perimeter. Okay, so the product little rope. Okay, so now we can fetch this idea in this particular page on, then interact with if I scored TV service and get the product details. Right. So the first thing that I would always toe fight to this project already from depart perimeter in sort of the pro Goodell pitch. So let's head over to the prerogative place tortillas. And here I'm going to inject us office called as activity drove. So here are activated. I don't on this comes Islamic divided rope. As against it is injected over here. No, here in the constructor, I can simply say this dot Activity road. Dark bedrooms. Okay. I need to returns an observable so they can subscribe to it and explain toward the desert and see, what do we get? So when I say console dot Log on going to bring the result. All right, so let's go to the presidency. As you can see here we have this idea. We're here in the desert. Okay, so now we have access to the idea. All we need to do is to interact with the fire started with always with this particular idea. Okay, But first, I'm going to store this idea in a local plus variable. So can I say product ready, which will be off type string on initially elsewhere did. So I'm district on here. I can simply say this door product ready equals result daughter. Ready? All right, So now we have this program available. Let's first of all, create the service to interact with If I stored baby and get the data so I'll go to the fire. Started the service on here to really create a man called as get data by I d. Ok. And it is going to expect a collection charity as always, and it is also going to expect the document. I d. All right, So he arrives at this door baby daughter collection for the collection and just positive collection. Ready? Then answer, Doc. And in sort of their dog, I'm going to positive document I d. Then you need to access the reference property, and then you can simply say, Don't get mattered. All right, So this also returns. The promise, are going to make it off the overt keyboard on. We'll make this function. You think? OK on here. I let Detroit gets block on simply through the air. Over here on. We'll move this thing over here. All right. So I first will get the result inside off a constant on here. I can simply say if dessert don't exist. Okay, so it will basically give you this exist property on it will be the true or false. So if this is true, then I can simply return result dot data. Ok, so there. So you get together, and if they did, does not found then going go toward the other. So when I say throw new weather on for the adult messages going to simply say they don't know formed it given I d All right, so I think this looks good on. Let me see if this on would like to access this method inside off the productive help it. So first, full going to create a method over here called us. Get product detail. Okay, on Let's also inject the fire. Starting is always over here. So when I say private, five store db service on this comes from Fire store Debate Service. And here I can say this door at 5 40 p. Service Got to get data variety. First of all, for the collection going to positive product on then for the document. I can access it using the start product ready. And as this function returns, a promise you're going to make it off the keyboard or here on, we'll make this function using and we like to put everything in sort of their dry kids block on going to move this thing over here on. We can also inject the visual. It's office to show the toast. So here, I would say private, we did your service on this comes from the general service. Okay, So in gets a very like in second solo talk log. Add it and I can say this dark rejected in service. The present post on for the mice is gonna say other dark message. All right, on here, I'll get the desert in, available on going to some flipping out over here. So gonna second soldat lock product detail and going to some blueprint the desert over here . All right. And now I'll finally call this matter. Insert off this subscript called back. So going doesn't play. Set this dart. Get product today. All right, let's say this alert go to the browser and test. So as you can see, we have this product detail information over here, and we have all the data suggest Brand name price and the size. Okay, let's drive with some of that product. So, for example, if I go to the formal shirt and as you can see, I have the detail of that Padilla foreman shirt, okay? And let's also test this scenario when you try to send our I d, which doesn't even exist in defy store. So I'm going to add some random thing over here. Let's see, what do we get? So as you can see it says they are not found with the given i D. On there is the message that we actually sent from the five story baby service. So let me show you. As you can see, this is the other that we took services. That's it for this particular video on in the next video. We're going to show the product detail in the U Y over here. Okay, so I hope you were able to follow along. And thank you so much for watching this video. 33. List Product UI Update: Hello, everyone. So before we oppose it further with adding the product Littlepage, I I just want to quickly update on my non e u Y teens on the product list page. So as you can see here, we're listing the product. So for that, we're basically treating over the I enlist, right? But we actually want to repeat the Iine item, nor the I enlist over in the world. OK, so if I basically inspect this, let me show you. So, as you can see, we have I enlist for each and every attrition rate. But we actually don't want this. We want just 19 list. And instead of this, we need multiple I an item. Right? So for that, what I'll do is I'll move this entry for condition from their enlist toe the line item. That's it. That's all I need to do. All right. So let me see if this now, let's go to the browser and check. How does the oil look now? So, as you can see, this is how the way looks and no, if I inspect, then you will see that we will only have ah single analyst and instead of this. We have this multiple line item right on. This is what we wanted. So this was just a minor quick update that I wanted to make on the least productive Y on. Let's also see this. You, I guess, off us. Let me refresh it again. So as you can see, this is how it looks on the IRS. So that is their sick for this particular video. Just wanted to make a quick update on the same. And I hope you were able to follow along. And thank you so much for watching this video. 34. Product Detail Page UI: Hello, everyone. So in this video, if you're going to design the product Littlepage So first of all, like me, I think back button on the part of little page. So if I basically go to the product little paid start at steam. L then here would like to copy the back Britain from some existing page, such as profile based on text email. Okay, so going doesn't look up this on Bay Street over here. All right. On would, like, go get their title s product details. Let me say this school to the browser. So as you can see now we have the property back button. Now, let's start adding more. Um, on this particular page? No, For the initial great rose, I consent the card. We like to copy the u Y from this profile page itself. So going to copy this much on going toe pasted over here and would like to close their tags . All right on, we like to for mentis. Now, I would like to update the column, Saiz. So we like to keep it Well, except for the algae Saiz who like to get into six. And as long as we're watching the data. I would like to show the Iron Spinner over here, so I'll basically copy this spinner from the profile based artist email. So going to copy this on Bay Street over here? Right on. Also going to declare available on the business off, which we will hide and show the spinner. So I declare available over here in the product. Littlepage Caldas. Product detail every level. This will be off type 1,000,000,000 on initially started to falls. Okay. And as soon as this function is called still inside, it too falls again. Okay? And as soon as we receive the data going toe started to true, all right? And even if we get the other still, I'm going to start a total. All right? Now, I would like to use this particular available in the end spinner. So going to pay street over here on Dhere? Also in this Andrew, I would like to paste this variable over here as well. So what will happen is as long as we are fetching the data from the five store will only show the Iron Spinner north this content inside of the Andrew. Ok, so let me say this and Let's see. How does the U I look? Now? Let's school to the Broza elected refresh. So, as you can see, first of all, we see the spinner. Then we see the product. Retail card. Okay. Now, here in the title, I would like to display the product name. So what I would have to do is first will store the product detail, insert often object. So here, going to create a class really below here called us product detail. This will be off type. Any initially started 20 object as soon as we have this result available over here. Gonna say this product detail and we'll set it to result. All right, and going to make it off this object over here. So gonna say product do deal dot name. So let me see this. Let's go to the presidency. As you can see, we have this product name over here. Now I will have to display this straight. Telling the center on were like to add I can Over here. So, first of all, here in the end car title, we'll give it a class off Ryan text. Send it on here. I'll add the Eiken on for the name of the Eiken. I'll simply say Cube on for the color. I'll say secondary. Let me say this large part of the presidency. How does it look? Okay, so this looks good. Now we can start to show some of the information which we have in the parade detail over here. So first of all, going to create the card content over here on inside of this, I'll have the I enlist. And instead of this, I'll have the i an item. Okay? Now, I would like to basically a trait over an item on would like to display all these properties over here. So currently, we have this information available instead of the product detail object. Okay? And you cannot eat rate over an object using the energy for directive. Okay, so you need are tribal suggest a raise, right? So, going to create extra available over here called this product the list. This will be off my body on it can hold any sort off values and initially cited to m theory . All right. And I think there's air type over here. So when does the detail Okay, so inside of this array will hold all of these properties. Okay. In the form off name and value for the name it will hold brand for the value it will hold. Puma. So there to begin properly treat over here on display. Very assign items. So here, going to it right over the product detail. So gonna simply say for constant key in this start for orbital object. Okay, so I have access to this key Victory President Disc ease over here, such as brand name price and the size. So now, in this age, nutrition, I would like to push the appropriate key and the value to the product. Little list. So here, going to set this dot product detail list. Don't push, and I'm going to push an object, okay? And as I said, each object will have name and devalue. So for the name going to specify Dickie on for the value will specified the this door product detail off that pretty lucky. Okay, so the value will actually hold the value off that fertility. For example, efforts ground than it will hold Puma. If its name, the net will hold new sport. Choose Okay on we can do one more thing, which is every time this particular my thirties called, which is God product. It'll began again, said the product list. So in theory, because otherwise it will keep on pushing to the same area, and it will get quite big, so gonna save product list equals emptier. All right, so now we have this product detail list available, which is a triple so that we can use it instead of the n G four in the product cycle page. So here in the an item, I'll basically apply the N G four directly and here and let the tail off. They list on here, alert the iron label on inside of this, going to simply say the deal dot name. Okay, because that's what we have a space Fred over here on for the value going to simply say they still don't value. Okay, so let me say this. Let's go to the browser and see if we get the list off the tail over here. So, as you can see, we have all the details listed over here, right? And let's also see, how does it look on the IOS so going to select the iPhone and the fresh as you can see. This is how it looks on the eyes. And the reason you are not getting that aero icon for the Iine item on the ice is because we haven't specified are clickable behavior such as Burton or a trip on the Sein item. And if he would have specified, then we would have got the awaken Andi I spread from all right. And let's also see the way in, gets off Lord 30 ways. So I basically go to the Broza says You can see this is how it looks. Okay, let's never get to some of that product. Okay, Service. That's it for the product, Little page. And I hope you were able to follow along. And thank you so much for watching this video. 35. Update Product Form UI: Hello. Driven. So in this video, we're going to descend the great product formula. So for that, first of all, I would like to have the update product. But I know we're here just below this. And on the click off this, we will show the idea product form where users can update all of this feels so. First of all, let me place this bet on over here. So I will basically go to the court base on here instead of the analyst going to first will declare the Andrew. OK, So what I would like to do is to have to adjust in button over here. Okay, One for the addict and one for the deal, It for the village and is going to have a simple button over here. We're going to implement the late functionality in the upcoming videos, but as off now, let's focus on the product for me. Way. Okay, so now here I declare two columns on. We like to give it a size off six towboat off them right now here. First of all, I would like to have departed for the delete So here and say I in Britain, I would like to give it the color off late and would like to give it explain. Property is block. All right on for the text going to some place their deal. It And I would like to also have the I and I can over here. Okay. On for the killer here. I'll say secondary on for the name. I'll call it us Trash. OK, I'm going to have the similar burden over here in the second column on this time here. Going to say that it on for the icon I'm not going to make it off the secondary because I would like to keep the pertinent second break. Okay, so if I keep the agonist country, it won't be visible on the name of the I conduct of like to use is create on it will have all kind off pencil I can. Let's save this. Let's go to the presidency. How does it look? As you can see, this is how it looks on. I would like to give a margin top, so that needed some space over here. So in this particular andro, I would like to give it a class off iron margin top like me saying this large to go to the browser. Now, this looks good on. Let's also see the U in the larger device. As you can see, this is how it looks. Now, whatever like to do is tow on the click off this added burden. I would like to hike this particular view and showed the form in state where user can are did the feels right. So I'll adequately is not over here on the and Martin. OK, so here going to say on the click off this call a method called as open. How did brought a foam? All right. Going to corporatists on and create this method in the product detail page. So going to create this over here. All right. And now, first we're going to declare a boolean variable over here. Toe the view from there de table to the list of you. Okay, so here I can simply say show I predict guard up long. It will be off the bullion on, decided to falls initially, and as soon as December 30 scored going to say this start shorting product form as true. All right. No going to use this variable in the estimate So I'll applied the end of condition on this analyst where we are basically treating the list of items. So gonna say nd if show this particular list on leaving the shorted product for Miss Falls . So going to add the north condition over here on just below the eye list going toe have deformed. Okay. And there's off. No. Just going to simply add the text test form. Okay, on here, I'll add the NGF condition on going to specify the show addict product form William Variable. All right. And if this is true, then only we want to show this form. So let me say this on. Let's go to the browser and test. No, If I click on, add a button. As you can see, the list view is gone, and we have this form over here. Okay? Now, let's start descending the form. So since it's an added part of functionality, I would like to copy the form from the product Page started steaming because it is mostly going to be seen. So window copy this on going to place it over here. All right. On would like to at the end of condition over here called us. Sure. The product. From next, I'll go to the product retail model on here, Going to inject daily active forms. Model on going to inject this over here is all right. The next thing that we need to do is to create the added product form in start off at product form. Salute. Score to the product. Retail space tortillas on here. Going to create a bunch off. Variable on. Going to copy this from the product based RPS. Okay, so going to copy all of this on going to play straight over here on going toe. Import all the missing imports. OK, now, instead, off Eric product form. We like to call it credit product form and going to update its reference in the product detail. Pages rest email. All right. Next. What I'm gonna do is build create of elevation message for the idea product, which is going to be similar to the artwork as well. Okay, so here I declare thee addict, thought it on going toe. They're friends. This over here on, we'll update the import statement as well. All right. Next. Instead. Off show at product. Spin it. I would like to make yourself show. I heard it. Product. Spin it and going to make it off this variable in the product detail. Pistorius, Steam l So here are basically update this variable. Now, the next thing that I want to do is to have two buttons in this form. One for the cancel and one for the update. So going to cop it does Britain from here. I'm going to pay street over here for the text going to say cancel. Okay on for the iconic makers off close hyphen circle. You can find this. I got on the I and I couldn't start calm on the here. Insert off and it would like to call the save on. Let me remove this crib listener over here on for the cancel. Going to call a function called us can sell it it. And here I can say cancel. I did. All right. So, going to simply copies on going to create a function over here called us. Cancel eight it. Now, instead of this, I can say this got shorted product for Miss Falls, All right. And we can do one more thing over here in the open added product form which is to a certain reform as soon as user clicks on the I did button because we want to clear out all the forms state when the form is ready for the edit. So going to declare our function over here, which I'm going to copy from the head product based RPS called as reset form. So going to copies on going to pay street over here. All right. And here I basically declare the idea product form next for the four meter. We have this field only so in to keep it as it is. Okay? And as soon as this open arctic product farm is called going to set this dark desert form, All right, now let's go to the product at the best college team and I remove this disable later. Good. From here on going to place it on the save button. Okay, because this is the part that really use for saving the product. And we like to also copy and Spinner from here on going to be a street over here. Right next. I'm going to remove this in Britain as it is not required. All right. On, instead of the ad product phone electric affinity and a product form. All right, so I think on the estimate part, it looks good. Now, all that is left is to create the form control on the form group. So going to copy does from the product page. Okay. Having to companies on going to officiate over here in the end zone in it. All right. And also going to copy both off this matter, hold it. And also going to cope with this on formula jeans on Going to be straight over here, going to update imports. All right. On, instead of that product form going to replace the difference with the at it product some. All right. So as you consider these upgraded in all the places So let me say this. And I think we're good to go. Let's test in sort of the closer. So now if I click United Britain, the Nez Agency, we have this addict product form frills. Ondas off. No, it say's prepare validation. Message off. Undefined. Cannot write property. So it's happening on the land. Double 16 So let me go over there. So basically doubled 16 Okay, so we need to inject the helper service. We forgot to do that. So basically, go over here and inject that particular service on this comes from Helpers service. Let me see if this on Let's take once again. So let's test now. So as you can see now, the reason whether and if I click on cancel then, as you can see, we are able to toggle between the taste of you. All right, so now the only thing remaining is toe pre populate all of this field over here with the data that we have over here. Okay, so festival here, I later it overall deform controls on going to set each value in that form. Control. So here, answer for const. Key in this door. Added product form. Door controls. Okay, let me try to bring each key. So there didn't see properly. What do we get? Okay, So going to see if this let's go to the presidency So a knife likely gone headed then? As you can see, we have each and every key over here that this president instead of deformed group control . Okay, so now begins had developed over here. So when I say this dot I did product form dark controls on going to access that particular key. Okay, so every time we're going to side value the one key insert off a control. OK, So to start developed, you can make use of a function called a set value. Okay, so this is used to a certain value to deform control on here. You can simply passed the value so we can festival you from this dot product detail because there's three object which is holding all of the details on. We like to fight start particular key. Okay, so what you're basically doing is we're fetching the value from the product little object and setting it instead of the form control. OK on. We're basically treating over all the form control so that we don't have to write this statement again and again for all the form control or all the form. Fred, it's okay. So let me say this and let's go to the browser and check. Where do we see? So no, In fact, we connected Britain Then, as you can see, all the phone calls are having the value. Okay, a large soldier does the formulation. So if I remember this, the next agency we have this error message over here on this button gets disabled. Okay. And let's also see the U. N D Broza. So when you refresh this and no, if I click united on removed this place, then as you can see, we have proper form validation. All right? And if I can sell, then we get back to the least view. And one last thing that I would like to operate here is the icon on the save button. So let's go to the product detail pages that steam on here instead off create bullet to use . And I can call this bookmark. Okay, let me say this. Let's go to the browser and see. How does it look now If I click United Britain, then, as you can see, this is how it looks on. That's what we basically wanted. So, you guys, that's it for this particular video. I need the next video we're going to implement. If I started the service to update all of this data instead of the five storey eight of us . All right, so I hope you were able to follow along. And thank you so much for watching this video 36. Update Product Firestore DB Service: Hello, everyone. So in this video, we're going to create this office for operating the product on defy store whenever user clicks on save. What can I get? So let's go to defy scored TV service. So I'll open up terrifies for the service on festival, going to create a function over here called as update data. And it is going to expect collection 80 the document I d as well as the operator data that you want to operate on a particular document. All right, so here I can simply said this dot baby dot dog. Okay, Now insert of this dog, I'm going to pass the collection very first of all. And I'm going to Vegas off the tactics and here, going toe past the collection 80. All right. Then you have to apply the slash and then provide the document ready. So I'll provided over here. Okay, so this means that update this particular document I d in sort of this collection, okay. And then you have to pass the operator data over here in the bread function. All right, so going to pass it over here on this also turns a promise. So going to make it off. The other killed over here on will make this function a sink. And I let the trike it's block toe handle any sort off error from the promise on going toe . Put this over here on. I can simply return the desert. So going Look at the desert over here on going to simply we don't eat dessert, all right? And then gives there is some error. I can simply say Throw new add it on again, past their object. All right, so now our services ready on, Let's use it instead of the product detail page. Okay. So far. Stubble going to clear the function over here. Carl s great. Started. All right, on. I'm going to simply call this service. When I said this dot Firestone TV service Dark update data and for civil annatto positive collection. I D, which is product. Then I need to pass the document. I did eight on this document. That is basically the product ready that you want to update. So when I said this dot product ready. So we already have it inside of this variable, and then minuto positive data. Right? So it's off. No, I'm going to keep the empty object, but we're going to update this. Okay? But first of all, are going to apply the other cured over here as a treatment. Stay Promise. Going to make it off the easing function on. We let Detroit gets block over here. All right, on going to move this thing over here. Now, as soon as this product is obligated, I would like to fight the latest information on that part. A great So we like to call this particular matter. So here, going to simply say, Oh, wait, they start, get productive. OK? And once we have the new product of level instead of the product detail and the productive list, then I would like to call the open ended product for method because it is going to reset the form on going toe. Said the operator data in subtle deform controlled. Right. So here, going to say, Oh, wait, this dot open ended product from all right. And now I can show the toast message. So when I said this Lord digitalis office dot president toast and here going to pass the message as product updated successfully. All right. And in case of any other gonna set this door Digital. It's office dot Present toast on going to first the message 20 other object. All right, Onda, we can also manage this particular variable, which is show added products winner, which is basically applied over here. Let me assure you, as you can see here it is just beside the save button. So here, going toe, simply say this dark show I did product spin. It equals true on going to set it to falls over here and in case of any other were like two stars. Tau falls again. Okay, so I think our method is ready. All we need to do is to grab those feels it celebrated, right? So let's suppose that you have a lot off fails over here in this addict form, right? Let's say you have 10 form friends, right, but lets a user only updates one filled. It isn't him. Okay, so there is no sense toe pass. Only 10 feels so the update method, right? We need to just pass the name, right, because that is what the user is updating, right? So somehow we need to detect which form pills are being upgraded so you can easily do it. You can access the form Control. OK, so this fields are nothing but form controlled on on the phone control, you can access a property called us dirty. Okay, so this dirty property, basically in order, start better. The food has been manipulated or north. Okay, so let's strike. Alexis, this form control on. Let's check whether the feels their use rentals are dirty or not. So, no, Every time user clicks on this, say, Britain, we need to detect what are the face that operated so far stolen. Basically hooked this particular method to this. A Burton so large scored with the product. Little bizarre, that steam. And here in this and Burton, I would like to add a click listener. All right. On going toe. Call this function, which is a great product. All right, now, in this update product, when it to detect which are the form controls that are dirty, right? So the first England Aldo is to a trade over all of this form control. Then we will check, which are the form control that are dirty. So first of all, I let dehydration or here so gonna say four const form filled in this dark added product form. Door controls. Okay, so this is the object that we want to retreat over. Now, the first thing that I will do is to get be controlled. So when I said const, control equals this door added product form dot controls on. I'll basically fetch the control for their particular form field. All right, on, let me. I'd taken so long off the control over here so that you couldn't see properly. So here, going doesn't place a control and a lot of suffering the form field over here so that you can easily understand which control belongs to Richfield. All right, on going to commend out rest of the things from here because we don't want to executor it. Okay, We just want to focus on the form controllers off. Now let's go to 2000 on, for example, if I go to the idea page and if I could conceive, then as you can see the first we get the name from control and then we have it's full control object, Then we go to the price. Then we have this form control object for the place and so on. So forth for the size and Brian. Okay, Now there is one thing. Go observe here. Careful is that we have this dirty property available on each of the form control which the North's attacked, Whether the field has been manipulated or not. Okay, so, for example, here is the place on did Ortiz. False. So that means this particular field has not been manipulated yet. And you can check the same for other fields as well. Okay, Now, let me try to clear the console on. For example, if I try to change the price 200 now, if I could conceive, let's see, what do we get for the price? Okay, So if I opened the place and if I go to the dirty, then as you can see it becomes true. That means stays. Field has been changed, right? So we need to pick up all those feels or the form control which has been trained, right? So let's go to the court based, So it's quite simple. I'll simply say, if control dark, dirty. That means if this condition is to that means this particular field has been manipulated. And I would like to move this country lock or here. Okay. So we can exactly know. See the logs off those feels which has been manipulated Large scored of the browser and check. So, for example, if I go to the edit on update the price on simply here, don't see, then, as you can see now, beyond Liga de Consolatory prize, that means we have followed the appropriate field, which has been manipulated. Okay, Now let me try to update fulfills again. We have already operated. The price like meetings decides is well on. No click on save. Then, As you can see, I have the place and the size. Right now, all I need to do is to create an object off this obliterate field and pass it over here in the update later, mentored, quantify, sort of the service. So the veil paper, this object is but first, before declaring on object over here called us updated product details on initial sick to MT. Object. And here I can simply say, updated product details off their particular form. Field equals control dot value. Okay. And if you remember, this is how we feds devalue form. The bomb control is by accessing the value right now will basically remove this council. Look, from here on going to simply are dickensa log over here so that you can see properly the whole object. So going to simply copy this ongoing toe pasted over here? All right, let me see if this let's go to the browser and check. Let me clear the console. Goto the idea page. Know For example, if I update in them and deprives toe $2000 electrically concept, then as you can see, we have this object which contends the name and the price is $2000. Okay, 95 changed the brown door, did us and click on Save the Nez Agency. Now it has all these three feels right. So we have this object ready. All you need to do is to pass this particular object on the update, their diameter. So let me oncoming everything over here on going toe on committees as well. A late on going to pass this particular object over here. All right, so I think we're good to go with the testing. Let's go to the browser. Now. I know if I click united on, for example, if I teens depressed toe 300. Let's see what happens. And I'll also opened this particular product in defy story Be so that we can cross check. Okay? And I think there's this one only human you sport shoes price. $200. I stand. Okay, So now if I basically legally conserved, let's see what happens. Okay. Says you can see it says product operated successfully. Now this form is holding the abraded place. Okay, Andi, if I go to the fire store db, then as you can see the prices updated right and the object product, it'll is just hold holding the price because there is a different that we operated. Okay, now let's drive it. Operating multiple feels okay. So here I am going to simply say, for example, in your sport shoes. 11 on for the price. I didn't say $2000. And let's say for the size that I trained here to nine Okay, No effect going to save like to what happens now. As you can see, the new sports shoes is having the abraded price. Let me go back on. Go back to this particle tell again. As you can see, it is having all objected Price. Okay, and let's take. And if I store db As you can see, everything is abraded over here. The price size name and the brown. OK, now there is one more update that we can do in terms off your way. So as soon as your clicks on save, we can never get back toe this detail view in straight off the added product from you. And if there is a matter, then we can keep showing this area it form. So let's go to the court base on here. I'm going to simply say this dot show added product form on and said it too falls. Okay. And if there is a matter, I would not like to 32 Falls because I want the user to keep updating if there is the matter. So let's trade once again. So, for example, the 14th the place toe, $2000 politically conceived let's see what happens. As you can see, we're navigated to the list which Okay, so that was there checked for the object product functionality on. I hope you were able to follow along and thank you so much for watching this video 37. Delete Product From Firestore DB: Hello, everyone. So in this video, we're going to implement the delayed product functionality. So we already have the button over here for the deal. It now for store. Let's implement this service. Then we'll call that service on the click on this button. So I would go to the fire store. Davis Office Onda. The direct products of this is going to be mostly the same as this. So going to copy these on the street over here, on going to simply update the matter. So when I simply say, delete data on instead of this update with her, all you need to do is to just call the the late matter. That's it. All right. And the rest of the things is going to remain exactly the same. All right, on we can remove this operative date argument from here as well. Now, let's use this particular method instead of the product detail pace tortillas. Okay, But first of all, what I would like to do is to show alert, confirm on the click off this delay, Burton like me to show you. Okay, so the kind off you whether the warrant is, let me assure you on their documentation. Okay, So if you go to the confident on, basically serves for alert, then here is the analogue competent that we want to use on. This is how the U I looks like on the IOS on this is how the U. N. Looks on the end. Right? Okay, so when you use this particular competent, So here is the quarterbacks for the same. All right, so going to simply copy this on basterds in the protected and service. Okay, So going toe pestered over here, Not the first thing we need is the alert controller service. So let me injected over here. So gonna say private alert Controller on this comes from alert controller. All right, now here. What I would like to do is toe instead of having the static header on distracting message as well. Is this tragic Britain? I would like to get it dynamically from the component itself. So I would like to declare all of this as argument, So going to have the head of message on D. Burton's as an argument on going to use them over here. All right, so in the past, they heard over here, then going to pass the message over here and the same for the Burtons as well. All right, Now we can also use the Essex shortcut over here. So if your key and devalue Neymar seam insert often object, you can simply say like this. Okay, so we in trouble. The same over here is well on here is Well, all right. So now what we can do is we can use this matter on the click off this delete button over here. Right? So what I'm gonna do is I'll go to the product developers or text email on here in their delete button, which is over here going to add a click listener. Okay. On the Kilic off this, I'll basically called a function called us a great product. OK, no, let's create this matter in the product. It'll piss tortillas. So going toes implicated over here. All right, on going to simply said this dart major during service dot Present alert, confirm and insert off this minuto past the helder message and libertines. So for they had that I didn't say the late product for the message. I'm going to make it up. The back picks on gonna say are you sure you want to deal it and going to fetch the product name from this dot Product details dot name. Alright. And at last minute opacity, Ari off Britain's so we can get it from here. Okay. Select school. Do the documentation, and we can get this. Sorry. And pass it over here. Right. Going to paste it. Okay, now, here we have the cancel button on the OK button on the cancel. We don't want to do anything. All right? On. I'll remove. This is his classes will on the click off. Okay, We actually want to delete the product. Right? So here we are going to call this service to the lady product. So here, going to say this dark five star TV service dot Delete data? No, for the collection. Ready, possibly product. And for their documented e. L said this dot product I d. All right now censored returns a promise going to make it off the air raid killed over here . And to make it off the brickyard, I need to make this function anything all right? And I did what I could to block over here and here will get theater in case of any error going to simply said this told video given service, not present toast and going too fast. The other dark message. Well, it going to move this forward statement over here in their tribe. Lock on here. I can simply say this dark digital service dot President toast on here. I can say product deleted successfully. All right. And if the product is too littered successfully, we can navigate the user back to the homepage. So let me injected all per surveys over here. So going to simply say, private doctor on this comes from a dread anglo slash Tolbert, As you can see, it is injected over here. Next, I'm going to hear simply say this boat older. Don't navigate on. We like to navigate for the homepage. Quite simple. So let me see if this on Let's go to the browser and test. So, as you can see, here is the product on. I would like to open this product in the five star DBs Well, so that you can see this is dilated. As you can see, it is already open now. In fact, we can distill it, Burton. Then I think the listener is north via to restart because of the cash problem. So we don't remove this. Save it in this under the changes and save it again. Let's according to Broza, there's really no, As you can see, we have these alert confirm If I cancel then nothing happens and it lets try to dilute it. So if I click on OK the NASDAQ unsee, it says product delicate successfully on We have these Toastmasters over here now since delete operation. Also take some time. So let's have a and spin it over here in their village, Britain, just like we have for everybody. So let's go to the extreme it on at the spinner. So here, going to go ahead and spin it, I would like to give it the color off secondary and well liked Oh are the condition to show and hide this a spin on the basis of bullion value So let's declare that 1,000,000,000 variable in the product detail pace tortillas. So here, going to say show Bilic product, spin it and it will be off type bullion bill sector toe falls initially going to make it off this variable. Uh, well here. So here I can say this dart short elite products peanut as group. Okay, on Dhere, I can simply sector toe falls again and then gets off any other we like to started to falls again. So now let's hook up this particular variable into the NDF condition on the iron. Spin it over here. So gonna say nd if I'm going to pass this variable over here. Okay, so let me see if this now, let's go to the browser in test. Okay, So now let's straight or the league. Let's see what happens If I can sell, then nothing happens. And if I click on OK, then, As you can see, we have this Spin it over here and I think we forgot to update the type of the spinner. So here I would like to specify the type of this spinner as darts. Okay, let me say this again. Let's go to the browser. So let's try to delete this as well. Okay, so if I click on OK, As you can see, this is the kind of spin that that we want. And now we only have the product left. Let's taken, defy store. As you can see, we only have this group or the left over here. Okay, so I was there. Treat for the delete product functionality. And I hope you were able to follow along. And thank you so much for watching this video. 38. Build Ionic App as PWA in Production Mode and Serve with Node.js Server: Hello, everyone on in this video, we're going to build a running application as a progressive web in production. More okay on. We're also going to solve the compiled application with the nor Jester. What? Okay, So once you build a replication, then you will see that all your court will become pile and will be placed here. Inserted a tablet of blue folder on before running the bill Command, make sure that you have the proper environment set up in the environment dot product PS file because all the references in your court base for this file will be replaced within woman dot broader ts file. Okay, so there will be no significance off this file in the production more so make sure you have proper environment variable now large. Close it further and build the application. So inaudible your application as a weapon in production. More simply, run this command unique build hyphen, hyphen prod. Okay. And I'll get back to you as soon as it is done. So as you can see, the compilation is done. Now let's move on to the court base on You will see that in sort of the WWF older, you will have all of your court compiled over here. Right on. You have videos, photos such as the asserts created over here, which contends the images in the icon on all your static assets. On here are the bunch off bundled Jay's fighting okay. On a fuel school down. Then here you will see that it is the indexed relates team that you can sell on any website . Okay. So far showing you how can you solve this build using a web server? I'm going to make it off the north jest Or what is an example? So going to simply close this close? This is well on going to create a file over here called as Sarwar Door Jace. Okay, on first of all, going to install the express. Okay, Ondo, once it is done, then we'll start building. Use our word. So as you can see this done, I'm going to simply exit on here. Going to first of all, Say const Express equals required express, then going to simply seconds to have equal Express. Okay? No one said a bunch off middleware. So when I say Abdur to use express dot Jason. Okay, so this is used for passing the request Body with content type of applications less. Jason. No Going to set up another middleware for parsing the Ural Form and corded data. So when I say I have not use on here, also express daughter you already included on here instead of this will pass the extended property s true. All right. Next, I'm going to make use off the experts static middleware for serving the static files. So gonna say express dot strategy. And in sort of this, I would like to specially the absolute part up to the double double double folder. So, for joining the party, I would like to get the part library, which comes with Norges, So gonna say, const, but sequenced inquired. But on here, I can say But door, join an insert of this. I'll specify the first off ordered double underscore beyond name. So this will give me depart, approved the current directory from the home directory, and then we want to navigate through the www for. Okay. Next, I'm going to define our out to handle all the request. So gonna say, I've got to use on going to specify their streak for handling all the request And here I can simply received the request in the response object. And instead of this Aiken simplicity response dot sand file and we want to send the index Georgia's team All right. And now here in the options I'm going to specialty part up to the index road esteem. And so on the same route Colin on going to specified the absolute part upto the triple the blue folder because that is where the index target stimulus placed. Basically, as against see Okay, so going toe, take this part from here on base right over here. Okay, Now, the only thing remaining is to listen to this over So the abductor Listen, So here, you need to pass the port. So first of all, going to be fine. Deport over here. Okay, on going to first of all, Fetchit from the environment variable. Although we're not configuring the environment variable still going to fetch it from there on if the environment variable is not fun, that going to make yourself a static port For example 5000. Ok, and here going to pass this particular port and here in the callback going to simply a big concern log as sir would listening on board, Ongoing, Specified, poured over here. All right, so I think our Norges avoris ready. Let's head over to their terminals on din This particular have. So he ran simply say North said a word or two years. And I think we may spell something over here. So let me fix this, OK? So it should be require. Okay, let me see this on. Let's try to run this again then, as against your sales there were listening on Port 5002 years ago. The browser on visit local host 5000. Okay, then as against your application is opened over here. Okay, on, everything is working as expected. Let's try to log in then. As you can see, everything is working as expected. Okay, on the legs also, try to object some of the product window simplicity of this. As you can see, product is a printed on. The prize is also brigade over here. Okay, so everything is working fine, as expected on this time we're serving our application within or just or what? Ok, so you can use any sort of web server that you want. All you need to do is to simply solve the index, wrote a statement filed with your Web server. Alright, so is there chit for this particular video? And I hope you were able to follow along and thank you so much for watching this video. 39. Customize icon and splash screen for Native Platform (Android, iOS): Hello, everyone. So in this video, we're going to see how can we customize the Pichon and this splash screen 14 80 platform. So if I open up the app, first of all, you can see the icon over here. Okay? And now if I open it and as you can see here is this splash screen with the loader itself. OK, so we're going toe, remove the default. I can end this splash on going toe update with our own custom. Aiken in the splash. And we're also going to remove the loader from this pleasure screen. So let's do it now. So let's had ordered the court base, and you can find the icon and displaced in the Resources folder as you can see their present over here. Now, the important thing for building your own Aiken and Displeasure screen is that first of all , you have to take care of this size and the type off the image. Okay, So first Well, both off. This should be PNG, okay? And you cannot change the extension for our geopark or something else to PNG and make it work. It actually has to be exported as a PNG. Okay, And the next thing is that you have to take it off the resolution. Okay? If you want to properly make it work for the icon, it has to be ones. It'll go for by 10 to 4 on for this splash, it has to be 2732 by 2732 OK, on that we won't show you the current resolution off this default. I can indiscretion that the ionic provides So five basically globally properties. Cordelia details that answer Considered these ones it'll do for weapons. 0 to 4 for the icon. And for this splash it is 73 October 2732 OK, so considering the size off the image on their type of the image I have created my own I can and displeasure with this president here in the extra folder, let me assure you, as you can see, here it is. Here's the happened on here. Is this splash? Okay, so first of all, what I'll do is I'll remove this before I can and displays from here in the resources for that. So going to delete this ongoing totally displeasure as well on going to copy both off this fight on going toe based it over here in the resources. All right. And now relate this extra folder as it is, no longer required. All right. And as you can see now, we have the our own cost American on this splash. Okay? No. One more thing we like to show you regarding this. I can end this splashes. So if we go to the android folder or the others holder, then as you can see here, we have defaulted 40. I can. In the splash on here, you have various different size off Aiken. Okay? They're doing their due platform uses. Same for the acorn as well. Is this flash all right? And the same goes for the IRS. Says, well, all right. As agency so know what you need to do is we need to basically create all of this icon with our own new I can write, but we're not going to do that, right? It send quite lengthy process so you can make yourself a command called less any corridor resources which will do all of this thing for you. So it is going to take your Aiken on this flash, and it is going to create the icon. What? Video sizes as specified. Over here. Okay, so simply hide over there. Document on down this command, which is Hi, Nick Cordova. The sources. OK, And you have good on this. Common every time you change the icon or the splash screen. OK, so make sure you're on this. Come on, every time you update the icon, OK? So as you can see, it has basically done generating the resources. So let's go to the court based on if you go to the Resources folder now, as you can see now we have our own icon for various sizes on seem for this pleasures. Well, okay. So long this thing is taken care by the annex. All you need to do is to simply ideo riken and this splash and the rest of the things can be handled with this particular Come on. All right. So no, The last thing that I would like to do is to remove the Lord er from this splash screen. So for that, what I'm going to do is I'm going to go to the conflict, or XML and add a preference over here called as Show splash screen spinner on going to settle toe falls Okay, on their sole unit to do unit where this particular preference on you will not see that particular spinner on this precious win. OK, so now let's save this and let's tryto deployed the app So I'll go to the terminal on here opened up this game costing as well so here, going to simply satanic Cordova run android and I'll get back to you as soon as it is done deploying. So as you can see, the application is deployed and now we have our own cost American letting me to show you, as you can see here is the custom icons And if I open the AB, then you will see the custom splash screen right on. We no longer even have dealed order that we previously used to have won the splash screen. OK, so yeah, it is their trip for this particular video on I hope you were able to follow along and thank you so much for watching this video 40. Build APK in production and release mode: Hello, everyone. So if you want o build your app for the android platform on, publish your A P k on the play store than the first thing that you have to go is toe bill your application in the production and release more. And the second step is to sign that epic with a key. Okay, so the second step you're going to see in the next radio, but it's off. Now we will focus on how do you build a peak in the production and the Liz Mohn. OK, so don't do that simply on this government unique Cordova build. Then you are dispensable. The platform which is android. Okay, then specify the hyphen iPhone product flight and then specify the hyphen offender list flag okay. And simply her tender. And I'll get back to you as soon as it is done. So as you can see the Billy success on your a bigger is placed inside off the plate. Forms slash and lord slash ap slash burn or put a picket release. Okay. And this a PK is yet not ready to be published on the play store. As I said, you have to do another step which is to create a key and sign that particular a picky with that key. Okay. And we're going to do this in the next video on since we're using the fire base authentication for the native platforms as well on if you want to make the Google logging work properly on the native platform, then unit to do some configuration regarding the city. One key beach I've already told you about while configuring on the fire base that if you publish your e picky on the production more and if you sign your epic epic your own key, then you need to get their such a one off your wonky on. Configure it on the fire base. OK, so we're going to do all of this in the next video on. That's it for this particular video. And I hope you were able to follow along. And thank you so much for watching this video 41. Create Keystore, Sign APK with Keystore and Confgire SHA-1 Key to Firebase: Hello, everyone. So in this video, we're going to understand how can you create your own key? And how can you sign your a PK with your key so that you can publish it on the play store? Okay, so let me show you the command toe sign your epic A. So if you basically visit there nick framework dot com slash talks. And if you search for Android play store okay, then you have a documentation with actually shows the command that you have to write for signing the epic. So here are the steps, and we have already performed this bill. Come on in the production and the Lismore. Okay, Now, simply copy this, Keitel. Come on on Bay Street over here. Okay. On here. You can update delay his name if you want, but I just keep it as it is as off. No. And simply update Dickie store name, so let me simply go over there. Okay? I'm going to name the key store as I need high fund fibers. Okay, But you can name it, whatever you want. Okay. Simply hate winter on Enter the password as well. On going to enter the possible again here it is asking for the first name Last name. So when I said that pro name off your ordination that have pro dot com that big org name of the city. Oh, and name of the state and I every country on simply say yes. Okay, on here it is asking for the key password for the is name and if you want to keep it the same simply hit enter. And now, as you can see, you have this key store created. This is your own custom key. Right now what you need to do is you need to sign this a PK with this particular key store . Okay, so let's see, how can you do it? So here is the command for the same Simply Corporate is on Bay Street over here. Now, if you have changed Alias name in the previous common, then make sure you enter the same millions. Name over here is well, okay. And I would like to update dbk that I want to sign with this capitalist unsigned epic. So going to update this thing over here. So going to say instead of hello, World attorney, pick a coke on a space about the high front. Released, unsigned A PK. Okay. And then you also have to specify the keystone over here. So let's do it. So going to go over here on going to space ready are unique. Hi. Fund five Best dorky store. Okay. And simply hit. Enter, and it is going to ask for the password that you just entered in. The previous command on simply had entered. So, as you can see, it is sending out a PK on If I clear out the console, then as you can see, this particular a PK signed. So although the name is unsigned over here because the Darcy under command doesn't update the name from unsigned to sign. But I just wanted to let you know that this particular epic is actually saying they pick a Okay. Now, the last thing that we need to do is tow do some sort of optimization and compression so you can do it using the zipper lentil hesitancy. Here is the comment on Make sure you have the part upto the android sdk building tools and diversion in your environment variable to make the zip line work properly. And I'm going to simply copy this on. Let's go to the terminal and a shirt over here. Now here. First of all, you have to specify the A P k that you want to compress. So we want to basically compress the apple release untended begin, which is actually saying Okay. And here is the big A name that will be all. Put it after running this particular command. Okay. And it's not like this is the final name that you have to keep you contingent later by simply renaming the big. Okay, so it's off now. I'll simply call this epic as are unique firebase 01 Doherty, begin. Okay, Simply hit. Enter. So as you can see, it is doing the compression says against it says verification successful on now, if you basically see the files, then as you can see now we have this unique firebase 01 a PK created. And finally, you can take this a PK and publish it on the play store. Okay? No. Once you publisher epic on the play store, you need to take care of their two things. The first is to simply keep this case store with you because if you lose it then you won't be ableto released New updates to your epic because the next time, if you want to publish a new update on the play store, then you have to sign their epic with this particular case store. Okay, You cannot create a new key and Sandusky and provide an update to an existing app. Okay, You have to keep signing your epic A with this same key, all right? And this I can think that you need to take care off is the worsening. So every time you provide a new update So you're a pick, you know, to change this version, right? And you have to implement it, okay? And there is no fixed number by which you have to implement, but it should be greater than the previous one. All right, so these other two things that you need to make sure one superficial epic And since we're using the fire base authentication in our project, we need to do some extra configuration, because this time this particular a PK is using our own key, right? It is not using the debug dark, a store which were used while running the app in the development mode. OK, so now what we need to do is minuto generating and city one key off our own key. So let's go to the fireplace and let me just show you. So if you go to your five this console on, if you go to the projects and things, then as you can see, here are all the Sichuan fingerprint and you can add as many fingerprint as you want. So currently we have only configured the essential one for the debug dorky store. Now we need to configure the essential one for our production key as well. So now let's create their such a one key off our own key store. So simply going, dude on Dick Command, which we used in the previous videos, Putin read the city One key from the people dorky store. So it was this common Alright on instead, off the backboard case store. Now we have to specify our own key. Okay, so at one key is I Nick iPhone five best darkies talk okay and simply hit and and you need to enter the password off your key. And as you can see, we have the essential want kids undeterred Over here simply going toe. Copy this, and I'm going to paste this fingerprint over here. Look on heart fingerprint basted over here and symbolically one save. Okay, so now we have both the fingerprint. Configured or not, Firebase 1st 1 is further development mode, and 2nd 1 is for the production More. And now the Google of Indication will work properly on your published tapas. Well, all right. And you can add as many fingerprint as you want. All right, So it is their sit for creating Dickie signing the big give it a key on configuring their such a one key for your own key. All right, so I hope you were able to follow along. And thank you so much for watching this video. 42. Source code: