Firebase in Angular Applications | Mosh

[Music] so far our focus has been purely on the front end but as you know most if not all angular applications need a back-end now we can build it back end yourself but then requires learning a different set of technologies and spending a lot of extra time another approach is to use firebase which is a platform provided by Google for building the backend of web and mobile apps so in this section I'm going to show you how to use firebase as the backend of your angular applications or storing data by the end of this section you'll be able to perform crud operations that means you'll be able to create read update and delete objects in a firebase database now before we get started I just want to let you know that this section is purely an introduction to firebase and you're not going to be a firebase expert by the end of this section because in this course our focus is mostly on the front end and firebase is a back-end platform plus there is more to firebase than we can cover in one section so if you want to learn more you can look at the additional resources that I've provided at the end of this section now let's get started so at the beginning of this course we looked at the architecture of web applications you learned that each web application consists of two parts the front end which sits on the client and we use angular to build it and the back end which sits on the server and we use a different set of languages and frameworks to build it this front-end talks to the backend to get or save data via a bunch of HTTP services behind these HTTP services we have one or more databases such as sequel server Raven and so on this is the architecture behind most web applications out there now as an angular or a front-end developer you don't have to worry about building the back-end that's the job of a back-end or a full stack developer but that aside building backends is time consuming and that's where firebase shines with firebase you can build a back-end for your angular apps in less than a minute you get a super fast scalable and real time database in the cloud and a library to talk to this database in your angular apps on top of that you also get authentication cloud messaging for sending notifications storage for storing your files and analytics many modern and popular applications out there use firebase as their back-end the beauty of firebase is that it provides libraries for iOS Android JavaScript and C++ so today you can use it as the backend of your angular app but tomorrow you may decide to build a mobile app for iOS or Android then all you have to do is to build that new client app and let that app talk to your back-end and with this you can quickly deliver a cross-platform solution to your users now what about the pricing you might be thinking all these amazing services they should come with a big price tag right well not really we can get most of these features for free and if your application grows you can either pay $25 a month or use their pay-as-you-go subscription model to learn more about their pricing head over to firebase at google.com slash pricing alright now let's create our first firebase project so I want you to head over to firebase Google comm log in and then on the navigation bar you're going to see a button called go to console alternatively you can simply head over to console dot firebase at google.com once you log in on this page you can create a new firebase project so scroll down add a project let's give our project a name I'm gonna call this firebase demo then select the country or region and create project okay here we are on the homepage of our new project you can see that you can add firebase to your iOS Android and web applications and when you click these we can see the documentation about the steps involved now the documentation for adding this to a web app is just a general JavaScript documentation adding firebase to an angular app is a slightly different and that's what I'm going to show you in this section now let's have a quick tour of some of the features you get here so on the left side on this sidebar we have our database so this is where all our data will be stored now if you have any experience with databases you know that in general we have two types of databases relational databases and no sequel databases which are also called document databases in relational databases we have tables and relationships and each table has one or more records we refer to the combination of these tables and their structure as the schema of the database in know sequel databases we don't have schema in fact we don't have any tables we don't have any columns our database is essentially a tree of nodes each node is a key value pair now this value can be a simple primitive value or it can be a complex object MongoDB is an example of a no sequel database firebase databases are also no sequel databases let's have a look at an example so here we have the root node of our database under this I'm gonna add a node called courses so this is for listing all the courses in our application now you can see that each node has a name and value now I don't want to assign a primitive value to this node I want to make this a complex object so I click this plus here and you can see now we have a child under courses again this child has a name and value I'm gonna set the name to one and the value to course one you so now you see we have a tree of nodes in our database I'm gonna add another child node under courses so here plus I'm gonna set the name to two and the value to course two now one thing I want you to pay attention to here is that each node in this database can have a different structure that's why we refer to this kind of database as a no sequel or schema-less database here is an example so all our courses have an ID and a name now I'm gonna add another course here I'm gonna set the ID to three but for the value I'm not gonna use a string like course three I want the value to be complex object so I'm gonna click this plus now we have a child under this node here in this child node I'm gonna set the name to title and the value to course three now look at the result so our third course is an object and this object has a property called title you can add another property here under three let's set the author Marsh a Madani now we have two properties and let's add one more here so let's set the price this time I'm gonna use a number let's say 150 dollars so what I want you to note here is that each node in this database can have a different structure our first two courses are simple key value pairs values or strings but our third course it's value is a complex object with three properties author price and title if you have never worked with this kind of database before swiping new to you it might be a little bit scary but in fact this is extremely powerful super fast and super scalable but the downside of this structure is that it's not optimized for reporting so unlike traditional relational databases where we can join multiple tables and run complex queries against them we cannot do that here so if that's what you need in your applique perhaps you need to use a relational database or if you want to use firebase or another know sequel database like you can use this as your main database but set up some background job that takes all the data from this no sequel database into a relational database for reporting so this is our firebase database next we're going to get back to our angular project install firebase and work with this database in this section I'm gonna start on a new angular project so let's generate a new project using angular CLI ng new and call this firebase - demo all right our project is ready now let's go to firebase demo here we need to install a couple of node packages so NPM install the first one is firebase which is the standard firebase library written in JavaScript and the second one is angular fire two which is a library for working with firebase and an angular 2 plus app ok now add the save flag okay all the packages installed successfully now let's open this project in vs code now here under the source folder we have environments and here we have two files or storing our configuration settings for the production and development environment so open up environment es so you can see here we are exporting an object called environment and this object has a simple property called production that is set to false here we need to copy some settings about our firebase project so back on firebase console if you go to the overview page for your project back here click this button at firebase your web app now here on this config object you can see a bunch of properties such as API key ask domain database URL and so on we're going to copy all these properties only the properties nothing else here okay so copy these now back here add a comma here we add a new key firebase set it to an object and then paste all those properties that we copied like this so this is our firebase database for the development environment in a real world scenario you should have a separate firebase back-end for your production environment so then you go to firebase create another project that project has its own settings then you would copy all the settings and environment prod the TS so it's a very similar file but the production property here is set to true okay now don't worry about these various environments we're going to look at them later when it comes to deployment so let's continue adding firebase to this project next we need to go to app add module here in the imports array we need to import one or more modules of angularfire but for some reason that I don't know my auto import plug-in doesn't work here so we need to explicitly import these modules on the top import angular fire module from angular fire to then in the imports array we add angular fire module dot initialize app now here we need to pass the configuration object for our firebase database so we need to import the environment object that was exported in the other module so environment auto import let's look on the top so this is our environment object imported from the environments folder slash environment module and here we have all the settings for our development environment now back here in the imports array this environment object has a property that we just added called firebase and this is an object that includes all the settings for firebase okay now this angularfire module is the main module in angular fire they are additional modules such as angular fire database and get fire authentication and so on so here because we're going to work with the database we should also import the angular fire database module so once again on the top we need to import another module this one is called and get a fire database module and we're going to import this from angularfire 2 slash database okay then we add this to the import array after initializing the app so angularfire database module now we have successfully installed firebase and angular fire in our project next I'm gonna show you how to get the data from our firebase database so earlier we added these courses in our firebase database we have three courses the first two are simple key value pairs the values are a string and the third course it's value it's a complex object with three properties so you can see that in a no sequel database each node can have a different structure now this is powerful because it allows you to quickly build your database without having a schema it allows you to go faster it increases your productivity but also on the flip side if you don't manage it properly you can run into issues so let's see how we can read these courses and display them on a page back in the terminal first I'm gonna serve our application now here in the ESCO let's go to app that component so here we have only one component and I'm gonna display all our courses here in a real-world scenario you would have a separate component like courses component okay now we don't need this title here let's delete this we add a constructor here we need to inject one of angularfire classes now once again my auto import plugin cannot recognize this so we need to go on the top and explicitly import angular fire database note that this is angular fired database not angular fire database module we only imported the module in app module okay now if your we need to import this from angular fire to slash database okay now let's add this to the constructor so DB of type angular fire database now this object has a couple of methods list for reading a list of objects and an object for reading one object here we want to get a list of objects so let's call this method as the first argument we need to pass the path to our node in firebase so starting from the root we have another note here called courses so this is the past two our courses note now look at the return type of this method it returns firebase list observable so firebase lists observable is like an observable but it has additional methods that you're going to learn about in this section so we're going to treat this like an observable you're going to subscribe to it here we get the courses and we can use this to set a field in this class so let me define courses here it's an any array and then in the SUBSCRIBE method we can set they start courses for these courses but also I'm going to show this in the console they start courses that's it now let's test the application up to this point so back in the browser okay here's our home page let's take a look at the console we have an error permission denied at courses client doesn't have permission to access the desired data because by default only authenticated users can read from or write to your firebase database now in this section we're not gonna worry about authentication that's more of an advanced topic that I have covered in my other angular course called build enterprise applications with angular so let's simplify things and focus on the fundamentals' act our firebase console on the database page on the top you can see this tab called rules so here we have a couple of rules for reading and writing data as you can see these rules are defined as a JSON object this object has two properties dot read and dot write and their value is an expression here us not null is something that firebase understands it means only users who are authenticated can read and write so I'm gonna temporarily change this to true that means anyone can read from this database now in a real-world scenario you may want to open up read access to certain notes in your database so you can allow anonymous users to read from these nodes but you can have other nodes that have higher level of security perhaps only authenticated users or users within a specific role can read from these nodes again we don't want to worry about this now so let's move forward now every time you make a change here you need to publish your changes ok done now back in our angular app refresh this page and look at the console so this is what we get from firebase an array of three objects let's take a look you can see each object has two properties dollar value and daughter key now look at the second object here once again we have dollar value and dollar key but let's take a look and the third object this is our third course that has additional properties look at the structure of this object here we have additional properties like author price and title note that we no longer have the dollar value property so it's not like daughter value is a complex object and that object has these properties no it's not like that these properties are part of our course object now if I want to display the name of these courses I'm gonna have some difficulty because the title of the first two courses is stored and the dollar value property but in the third course the title is stored in the title property so that's why I said but if you don't manage your no sequel database properly you're going to run into issues so back in our firebase database I'm gonna delete the third node delete and add a new node that is consistent with the other nodes on their courses so three and course three okay now let's display these on our angular app so let's go to app but component that HTML delete all the markup here we need a ul and Li we're going to use the ng 4 directive let course of courses and here we use interpolation course dot dollar value back in the browser and we successfully read data from our firebase database now let me show you my favorite feature of firebase firebase databases are real-time that means any time the data in the database is modified the changes are reflected in our client apps automatically so here's an example currently we have three courses now I'm going to go back to our firebase console and add a new course here for course for now back to our angular app course for is here and I didn't even refresh the page so the data appeared here automatically similarly if I go back to our firebase console and delete this course now back in our angular app look the course is gone and we didn't write any code for implementing this kind of behavior all we did was subscribing to a list in firebase without firebase if we wanted to implement a real-time app we would have to write a lot more code for it so this is something that you get with firebase out-of-the-box this is especially important if you have an application that involves multiple users so as one user modifies the data the changes are immediately visible to other users a real-world example of this is if you want to build a chat application firebase is going to be your best friend because as soon as a user sends a message the other user is going to see it immediately so in the last lecture you learned that firebase databases are real-time now let's take a closer look at this feature so back in our angular app here we have three courses and I've cleared the console now let's go back to our firebase database here I'm gonna add a new course for course for now back in our angular app course for is here and then let's take a look at the console so when we added the fourth course we got a new array of all the courses from the server let's try this one more time I'm gonna go back here this time I'm gonna delete course for now back in our angular app course four is gone let's take a look at the console we got a new array of courses this array has three elements so this is what I want you to note here every time you make it change to the courses node whether we add an object or remove an object or modify an existing object we get the entire array of courses from the server the reason for this is because we have subscribed to the courses list in our database now in terms of the performance you don't have to worry about this even though we get the entire list firebase is optimized for this kind of scenarios but there is something tricky you need to be aware of currently we have only one component in this application app component right now in a real world application we're going to have tens or hundreds of components and we're going to have routing and navigation so the user may navigate to the courses page and on that page we're going to have a subscription to the courses list and firebase now if they navigate away from that page this subscription is still in memory so every time something happens to that node you're going to get the list of courses from the database even though the user is not on the courses page so if you don't manage this properly you're going to end up with memory leaks that means your application is going to consume more memory than it needs now to clarify in the section about consuming HTTP services with subscribe to the observables returned from the HTTP class there we didn't have to worry about this because these observables terminate when we get the response from the server because in those situations we get only one response object from our server but here when working with firebase we don't have one response from the server every time there is a change in the notes we have subscribed to you're going to be notified so in the next lecture I'm gonna show you how to prevent memory leaks in your applications when using firebase hi thank you for watching my angular tutorial if you enjoyed this video please like it and share it with others also you can subscribe to my channel for free new videos every week this video is part of my complete angular course with almost 30 hours of high quality content where you learn everything about angular from the basic to the advanced topics all in one course so you don't have to jump from one tutorial to another in case you're interested you can get this course with a big discount using the link in the video description but if not that's perfectly fine continue watching as the next section is coming up

Channel: Programming with Mosh

Views: 124,441

Keywords: angular, angular.js, angularjs, angular 2, angular2, angular 4, angular4, mosh hamedani, javascript, jquery, firebase, programming with mosh, code with mosh

Id: mqWXRX5fxGQ

Length: 26min 53sec (1613 seconds)

Published: Wed Sep 06 2017