Firestore with AngularFire5 Quick Start Tutorial

Key Takeaways

just yesterday Firebase launched an exciting new product called fir store simultaneously angular fire was updated to version 5 which supports fir store and brings in a whole bunch of other important changes in this episode I'm going to show you how to use the fir store module in angular as well as talk about the benefits that firestore brings to app developers then over the next couple weeks I'm going to release a whole bunch of new videos showing you how to build real world features with firestore so make sure to subscribe if you're just finding me for the first time before we get to the code let's first distinguish what firestore is and how it relates to the existing real-time database that's already in Firebase fir store is a nosql database that solves many of the limitations that developers have found with the realtime database in other words it does pretty much everything the real-time database does with a few extra features on top the First Advantage is being able to query nested data in a memory friendly way in the real-time database you would have to load all of an objects nested data which makes it hard to organize data properly with fir store you can create a tree of documents that point to other documents or other collections of documents this makes it easy to model data relationships and make queries that are shallow and memory friendly another major benefit is its query language which we'll see later in the code but it has a wear statement that you can use to filter data by equality for example name equals the string of Jeff or with range operators where the score is greater than 23 and it allows you to build indices where you can efficiently make these queries fir store will build an index for each individual property then you have the option to create your own based on multiple properties now that we know that let's actually build something with fir store I built a new feature into our fire starter demo app that uses fir store on the back end which you can check out in the link in the description if you're brand new to angular fire you can follow the install instructions on the GitHub page but I'm going to assume you have an existing angular application and show you how to upgrade it to angular fire 5 so first you'll have to uninstall angular Fire 2 with npm then reinstall it making sure that the version is 5.0 or greater then I should warn you that there are many Breaking Chang es in version 5 so make sure to read through the docs carefully before you update an existing app then another minor change is you need to have a project ID listed in your Firebase config fir store won't work without it so make sure to include that in my case it's in the environment TS file from there you'll need to add it to your app module so we'll import the angular fire store module and then just add it to the import section then we'll go into the app component and import angular fire store as well as the angular fire document and and angular fire collection and from rxjs we'll import observable and map fir store encourages the use of typescript so we're going to create an interface called note which will Define our data structure which is just going to be a Content as a string and then Hearts as a number and we'll also give it an optional ID property the first thing I want to show you is how to work with collections which are just a list of documents it's the real-time database equivalent to a list so first we make a reference to a collection and we do that by typing it as in an angular fire store collection with our note interface then we'll get our data back as an observable in a second variable which we'll type as an array of notes so that's one of the biggest changes in angular fire 5 the reference to some data is decoupled from the actual observable data itself we can make a reference to a collection by calling AFS collection and whatever collection we want to receive in this case notes so at this point we just have a reference to the collection but we can get observable data back from it by calling value changes this is is roughly the equivalent to a Firebase list observable in previous versions of angular fire so we can Loop over the data in the HTML by just calling ng4 with the async pipe then we can print it out to the screen as Json then we get data back in the screen as expected but I want to point out that the data is not ordered in any specific way you can see we have strings and numbers and different orders but fire store can help us out with that you can pass a call back to the collection reference to take advantage of the fir store query language the first thing we'll do here here is order by the content which is a string value then we can get our notes back in alphabetical order based on the content so now you can see they're ordered AB c d if we do the same thing for hearts we'll get the hearts back in ascending order so we have hearts 0667 if we want to flip this around we just pass the descending keyword and we're good to go doing this kind of stuff was extremely difficult in the real time database so this is a huge Advantage if you're doing a lot of sorting and organizing of data you can also limit the amount of results you get back by just calling limit just like you would in a regular SQL database you also have a few other operators that will offset where you start from so you can do things like pagination and infinite scroll I'll cover those in more detail in a future lesson right now I want to show you what happens if we try to combine two order by operators on two different properties initially it's going to give us an error in the console but what we'll see here is we have a link in this console to build an index for this query if we copy and paste the link link it's going to take us to the Firebase console and give us the option to create this index it takes a few minutes but once you have the index back then you'll be able to make this query efficiently if we go back to angular then we see that this query is sorted by two different properties now the next thing we're going to look at is the wear statement this allows us to make queries in a more expressive kind of way for this query we want notes where hearts are greater than or equal to five then you can see on the front end we get the not filtered by that rule we can also filter by equality so we can do hearts equal to 7 and then we should only get back the notes with that parameter but I should mention you can't use the not equal operator attempting to use it will cause your app to crash so just be aware of that what you can do is use the equality operator to chain together with multiple wear Clauses so we could say wear Hearts equal 6 and content equals AA a and important caveat is that this only works with the equality operator if you try to do this with a range operator you're going to get an error so if we change equality to greater than and try to run it we're going to see an error in the front end so that's how the query language works now I want to show you a little bit more about how the observables work in most cases you should only need to call Value changes which send back the raw data from the database but if you need additional metadata you can return the actual snapshot and angular fire also has a way to return it in an ngrx Redux friendly way but I'll save that for a future video you get the snapshot by calling snapshot changes and then I'll show you what this looks like in the console just so you get an idea of what's actually contained in there so if we look at the actual array we can see we have a type which is the type of event that occurred that could be added modified or removed and then we also have the old index new de index we can retrieve the ID and some other metadata as well so at this point we've been working in the context of collections but we can also Al retrieve individual documents so to do that we're going to make a reference to a document just like we did with a collection the only difference now is it's an angular fire store document type and it also has the value changes method that will return an observable so just like we did before we make a reference to the note document by calling AFS Doc and for this example I'll just go ahead and copy and paste a random ID from the database then we will build the observable by calling value changes then I'll go ahead and update the HTML to display the data from this document then as expected the data is displayed on the front end the next thing I'll show you is how to perform right operations on the data this works basically the same as it did in the previous versions of angular fire the only difference is we call these methods on the reference itself rather than on the observable I'm setting up this new content variable to represent the form input of a user when the form is submitted we call update on the document reference and pass it the new data you also have the option to use set or delete on the document reference then we can jump back to the HTML and collect the user's input with NG model and run the update method on a button click if we go try it out we can see our data gets updated in real time just like it would with the real time database let's go ahead and pull up the Firebase console side by side you can see how both applications are subscribed to the same data so we can update the data from our app or we can update the data from the Firebase console and everything stays synced up in real time at this point I only have one last thing to show you and that's how to set up offline data which is extremely easy with angular fire all we have to do is go back into the app module and add this enable persistence method on the import and amazingly that's all you have to do now you have offline data capabilities built into your app so let me show you how this works we'll go back to our app and we'll turn off the internet connection by going to the network and putting it in offline mode then we'll try to make an update on the data reference which will still work in the app front end so it's going to look fine to the user but we get this internet not connected error in the console then if we go back to the fir store console we'll see that the actual data is not updated on the back end angular fire is keeping track of the updates and when the internet comes back on it's going to send them to Firebase and update the backend this is an awesome feature for Progressive web apps where you can still have some interactivity even when the app is offline now that I've turned the internet back on we can go into the console and we'll see that it does get the updated data after the internet comes back online that's it for my fir store introduction if this video helped you please like And subscribe and if you want to learn how to build more awesome features with fir store consider becoming a pro member at angular firebase.com thanks for watching and I'll see you [Music] [Applause] soon