PWA Tutorial for Beginners #23 - Firestore Database

Key Takeaways

okay the gang so far as we've been making this up we've been cashing different assets so that we can view our app offline which is awesome but as of yet we've not worked with any kind of data yeah we have this dummy stuff right here but it's not real data and when we start to work with real data and a database that is a completely different ballgame - cashing assets when it comes to using data offline we need to take a slightly different approach than using our service worker to cache data responses because the data could be constantly updating and changing in the database if we start caching the responses from that database then we might always be showing old data to the user for a long time so the way we deal with data in a PWA is a bit different and it's going to vary depending on which database solution that you're going to use for the app now for some databases you're going to find yourself using the indexed DB API right here directly to keep things in sync and allow offline data use that is an option but I'd like to use a database service which makes accessing and using data offline even easier and it will use this under the hood but we're not going to have to directly get involved with it so the database solution that we're going to be using is going to help with all this and it's called firestore it's created by Google fiber's now Google firebase is a bunch of different services which act as a back-end to our application and we can see all of those different things right here we have cloud functions that enables us to run code on a server we have authentication hosting cloud storage and we have this cloud firestore database right here and this comes built with offline support which is perfect for our PWA meaning that it will allow users to view data when they're offline as well as online and firestore takes care of all of that offline data for us we don't really have to do much at all which is freaking awesome it does this by interacting with that index DB the browser's built-in database right here and it stores data there for us so that when we go offline we can still access it so the first thing to do is sign up for a free firebase account and once you've done that just go to your console over here and this is going to list your different projects I already have a couple but I'm gonna make a new one and I'm gonna call this food - ninja - PWA okay so I'm gonna accept the terms at the bottom and create this project this will just take a few seconds and then when it's done just press on continue and this is going to take you to the control panel for this project now this area right here is essentially going to act as the backend now to our application and we could use any one of these different services authentication the database storage etc we're not going to focus on all the different things if you want to learn more I do have a whole series on authentication and on fire store and on hosting so feel free to check out those playlists on my youtube channel for now we're going to focus on the database and again I'm not going to go into a lot of depth about fire store I'm going to teach you all the basics here and how to hook it up with our PWA but if you want to learn more about fire store I'll leave a link to the complete fire store playlist down below anyway once you've clicked on database create a database make sure it's a cloud fire store one and not the one down here the real time database so create this database and we want to start in test mode which means we can easily develop and we can access all the data from our application over here but later on make sure if you publish your app you address the different fire store rules so that only the appropriate people can access the data okay so let's enable this for now and this here now is our fire store database so in fire store databases we have collections of data and each collection will store documents of a particular type of data for example we could make a collection called users and that could store user documents so each document would represent a single user right what we're going to do is make a collection called recipes and that's going to create the collection for us when we first create a collection it's going to ask us to also create our first docking for that collection now this document ID right here this is going to be a unique ID for each individual document so that if we want to get a reference to a particular document later on we can use that unique ID and everyone is going to be different now we don't need to fill this in ourselves it's going to auto-generate if we leave it blank so what we want to do is make up a few different fields now fields and values are basically key value pairs a bit like a JavaScript object so we're going to have a property name and a property value essentially and each one has a type as well so we're going to say we want a title of the recipe and that title could be something like ninja soup and we also want to add a new field and that field is going to be the ingredients and this is going to be mushrooms onions and garlic okay so now we're going to save this document and it's going to save it to this collection so we see now we have this recipes collection right here and in a second we're going to see this document right here and when we click on this document it will open up on the right and we can see the two different properties ingredients and title and the values of those properties as well and this is the unique ID the google firebase created for us as well okay so let's add one more document by pressing on add document over here again leave the ID blank it's going to also generate this time we'll do a title property of veg burger and the ingredients are going to be soy beans onion garlic again why not and mushrooms again why not okay so save that and now we have two different documents and the ID is unique for each one right so we have this one ninja soup and also the veggie burger cool so now we have a bit of data stored inside our fire store database and what we want to do is hook up our application on the front end with this database on the back end so what we're going to do now is go to the project overview and then we're going to add an app so to do that click on this web and then we're going to register an app so what this ninja food and register the app and then this is gonna give us a bit of code that we have to copy and put into our project so let's just copy that right here and over in our index file let's open this up and come to the bottom and I'm going to paste it just above these other files right here so let me paste that in and just scoot this in okay so now what we're doing is putting in a link to the firebase app right here we also need a link to the firebase of fire store so I'm going to duplicate this and add in firebase - fire store and we need that because we're using the fire store so let's get rid of this comment right here and then this is the configuration for our application basically so that we know which back-end to connect to and then down here what we're doing is initializing our firebase up on the front-end we also need to initialize our database instance from the front-end so that we can communicate with the database from here as well so I'm going to store that in a constant called DB and set it equal to firebase dots fire store like so and now in the future if we ever want to communicate with the database from our own application we're going to use this DB constant to do things like get data or save data etc okay so the last thing I want to do is actually create a JavaScript file over here so I've got a new file and I'm going to call this DB j s and this is going to be all the JavaScript that we write to interact with the database so I'm going to hook that up from the index file as well so let's do another script tag and we'll say the source is going to be equal to /j s /d b GS so now we'll hooked up to that as well and so now we're in a good position to start communicating with our database and we're going to start that in the next video