Firebase Firestore Tutorial #2 - Setting up Firestore

alright then so to begin with I just want to grab the starter files that I've created for this project now to get those I've gone to the firebase fire store playlist repo remember the link to that is down below and what I'm going to do is go to lesson 1 right here in the branch drop-down now as you can see there's three files of any significance here we have a pas index dot HTML and styles.css this top one up yes that is empty we're going to start from scratch with that but I'm gonna grab this beginning HTML as you can see is very simple and what I'm gonna do is put that inside my code editor over here let's just scoot this like so and I've created these files right here up index and styles nothing in them at the minute but I'm gonna copy in the index dot HTML file and as you can see this is just in link to a style sheet at the minute which is right here we also have a body tag inside that an h1 Cloud cafe a div with a class of content to store all of our content in this form right here with an ID of AD Caffey form that's where we're going to put our form to add a new cafe in the future and then a UL tag right here with an ID of cafe list which is where we're going to load all of our cafes when we get them from the database finally at the bottom I've got this script which is just linking to a pas again there's nothing in there at the minute we're going to start from scratch with that so let me save this the other thing I want to grab is the styles.css so I'll grab all of those from here as well and these are just some basic styles which make the app look at least a little less credit so let's just paste them in there I'm not going to go through this file during this course it's not a CSS course if you want to learn that I've got loads of playlist on CSS on this channel so anyway there we go that's the CSS and the index page sorted that's our starter files if you like ok so from here on in we're going to be adding to app KS and this file a little bit as well okay then so now we've done that the next thing we need to do is set up some kind of fire store now I said that fire store was a database that's hosted in the cloud and that's hosted by Google so it's a set water what we need to do is go to firebase google.com and you'll see this page now if you have an account with Google that's great double your link saying go to consult up here and you can click that if you don't you need to sign up first then go to your console so when you go to your console this is going to list all of the different firebase projects that you have as you can see I have two at the minute I'm going to create a new one for this course so click on this then we'll give this a name I'm going to call this ninja - finest or taught and then I'll select my region United Kingdom and accept this then I'll create the project so this is just gonna take a few seconds to do and then when it has done just click on continue to go to the control center of your new firebase project now this firebase project is going to contain a load of different stuff not just fire store database but things like authentication storage hosting functions m.l.king all of this stuff comes baked into your new firebase project now this series is just gonna be concerned with the database but like I said and will be doing all the series in the future about storage hosting functions authentication probably this as well ml kit and maybe some kind of analytics down here as well so anyway we just want to focus in this series on the database so select your database option right there there's two options this is the older option the new one which is currently in beta is this cloud firestore so let's get started with that one now these rules right here I'm not going to go into too much depth into now essentially if they allow you to lock down who can access your data but since we're just in development mode what I want to do is start this in tests so that we have no issues when we're trying to save or retrieve data from localhost round here from our computer so let's enable this now and it's going to set up those security rules and create our fire store database all rather than so once that's created you'll see something like this Oh so you can see we have our collections over on the left and over on the right that's going to populate with the different documents that we have in those collections so to begin with let's create a new collection and this collection name is going to be called cafes so next and now it's asking us to store our first document in this collection so this document ID right here this is going to be also generated by Google if we don't answer anything so I like to keep this blank a lot of the time so that firebase can automate that and provide that unique ID for us it's going to be a long string of numbers and letters then we have to add our different fields so these are the different key value pairs things like title or City or rating okay so let's create one called I don't know title first of all or in fact we'll call this name makes more sense this is gonna be a string and the value for the first one will be Mario's maca okay let's add a new field this one will be the city where this is located again it's gonna be a string but if you did want to store a different type of data you can select that right here some number boolean object array all these different things right here okay so we can also store something inside here this is gonna be Mario land to begin with or save that okay so this should create that caffee's collection listed here on the left but we can also create multiple collections by adding them right here we're just gonna stick to this one collection for now and when we click on it we'll see all of the documents for that collection in this second panel okay so this right here this is the unique ID that Google firebase created for is right here so that's the identifier of this document the ID if we click on that we can see the different fields inside this document the city and the name so that data now is being stored as a document inside the caffee's collection and we can add more documents if we want to I'm not going to do that for now what I'm gonna do is just now set up firebase in the front-end over here in our application so that we can access data from the database so to do that go to your project overview or right here and we want to click Add firebase to your web app so what I'm going to do right now is just copy that and I'm gonna come over here and I'm gonna paste it right there now I'm going to zoom that in and I'm gonna grab this one and I'll explain what these things are in a second I'm just gonna put this in the header so that we're keeping it separate from this thing down here so we can see what everything is okay so this thing first of all this is loading in the firebase library now this is the development version of the library this package right here is loading everything to do with firebase in it all of these different things right here now we're only concerned with the database in this project so what we could do is instead load in two separate libraries firebase - up and then we'll copy this and paste it down below and then change this to firebase - fire store so what this is doing now is loading in the core app library which we need for anything then just the fire store service from firebase so now we're not loading in all of this all the stuff as well you can use just the other library if you wish but this is more efficient we're just loading in the things we need to write here okay so down here what we doing well we're creating an object called config and this is storing our API key so we can identify which project we're hooking up to over here this project it's also got the auth domain and the database URL all of this stuff that firebase needs to figure out how we're connecting to the datastore okay so you don't need to worry too much about this right now this is just configuring our application on the front-end to link up with our firebase project that we've just created over here so that we can interact with that fire stool okay and then finally down here what we're doing is saying firebase don't initialize up okay now we have to add a couple of lines here what I'm going to do first of all is create a constant and call this DB and I'm going to store our database in this now to get a reference to our database all we do is say firebase dots firestore like so okay so we can use that because we've imported firebase and the firestore up here so we're creating now a reference to our database and we're storing it inside this constant so in the future whenever we want to interact with the database we'll do it via this constant right here all right the next thing we need to do is just set some settings on this database so that we don't get a warning Garrett in the console and that looks like this DB dot settings and then inside that method we pass an object and inside the object we say time stamp in snapshots and we set that to true so this is just a setting for working with snapshots in firestore and we have to place that here so that we don't get warnings and errors in the console okay so now we're ready and we're set up to start working with the database so now when we let me just scoot this in when we inside a pas start to reference the database using this constant and we can do that because a pas is below this right we're defining this first then inside a pas we can reference this to start interacting with the database we can do things like database dot collection to grab a collection etc and we'll see exactly how all that works starting in the very next tutorial