- [Instructor] Firebase is a new SQL multi-user
real time database
and it's pretty easy to use
and somewhat simple to set up.
So you are going to need a Google account for this
and make sure that you have gone to this URL
and registered and signed up for an account.
If you have a Gmail or some sort of Google account
this will be a lot easier.
Once you do this, then you need to go ahead
and go over here to the top
and click on go to the console.
And we're going to need to create a Firebase project
so let's go ahead and hit this
Add Project button right here.
Of course, you're going to need a name.
I'm going to call this vue-spa.
So you can call it whatever you want though.
And so then I'll hit continue right here.
And you can ignore this create analytics.
We're not really going to focus on this
so I'll just say not right now.
You can always add it a little bit later.
So we'll hit Create Project
and it's going to take a little bit to create a project.
And so once the project is ready,
we'll hit this Continue button here
and then we'll be met with this.
This is where your application lives
and you'll have a couple of options.
We're going to be using this Authentication section
as well as the Database section.
Firebase allows you to store files
and also provides hosting
and it even lets you access functions in the cloud
but we're going to focus just on these two right here.
In order to get the database started
you're going to need to choose an SDK
or software development kit
and the one that we want to use for this project
is of course the web kit right here.
So we'll go ahead and click on that
and then it's going to ask you for an app nickname.
Just put in something else in here.
I'll put Vue SPAs.
And then if you want to, you can click on hosting.
I'm not going to do that right now.
Again, we're just going to focus on the database
and the authentication.
And so we'll click on this Register the App
and this is going to take maybe a couple seconds.
And then you'll be met with this right here.
So this we actually do need
and it's normally some set up work for your project.
You're not going to need all this in Vue.js
and as a matter of fact,
I'm just going to copy this
and all the way down to before the closing script tag.
Now, you're going to need to create your own application
and this information's going to be individual
to each of your projects.
So I'm going to go ahead and copy this.
And then let's go back into our application
and we'll set up a file.
And I'm going to put it in my source folder
and this is going to be called db.js.
Now if you remember from when I set up the project,
in my gitignore, I added this into my gitignore file
which means that it's not going to be tracked
or uploaded to GitHub
so if you're getting this project from GitHub,
you are not going to receive this file.
You need to create your own
and you can delete this if you want to
go ahead and upload it to GitHub or somewhere else
but you are not going to be able to get mine
because mine is obviously going to have
the information for my database.
And I'm going to need to create a few things in here
in addition to what we get from Firebase
so I'll import the Firebase library.
All right?
So we'll import that.
And then we are going to paste what we got from
the Firebase console.
Now, just to modernize it,
I'm going to put in here const
and then we're going to leave this right here.
And we'll create another constant for this part.
We'll call this firebaseApp for now
and then make it equal to that initialization command
from the library
and then we'll export this
as the default
and that's going to be our firebaseApp variable
and we're going to look for the Firestore method of that.
So I'm going to save that.
You'll need to add these into your own project
as I mentioned.
I don't really want you using mine.
So let's go ahead and close this out
and notice that it is grayed out,
which is my project it means that that file
is not going to upload into GitHub
and if you do want to modify that,
go ahead and make sure and you modify
in this gitignore file.
So cool, we're almost done.
Now, we need to actually create a database.
To do that I'm going to click over here
and to go continue to console
and I'll switch over here to this database part
in the menu on the left-hand side here.
And now we're going to need to create a database.
Now the current default database for Firebase
is called Cloud Firestore.
There is a slightly older Realtime database.
We're going to use Firestore
because it's the newest, coolest thing.
It's going to hopefully stay around for a while.
I feel like Realtime Database,
although it's pretty awesome,
it's going to probably eventually be removed as an option.
And essentially they're pretty similar
except that the Firestore is going to be a little shallower.
It's not going to grab as much information
and so we'll go ahead and hit Create Database here
and you have two options here.
Do you want to start in lock mode or test mode?
We want to choose test mode while we're developing.
And then we are going to want to go back to lock mode
and change some of the rules so that not everybody
can access every page.
So I'm going to hit next right here.
And then you got to choose a location
for where your database sits.
This default for me is fine
and it's probably reading my current location
but you may want to pick
whatever's closest to you from this list
so this will work and we'll hit done.
And it's going to provision things.
All good, I guess.
So we've got this database done
and you'll be met with this particular interface.
So this is where you actually define what your database has,
like the fields that it's going to have
and then the documents that you want to store.
So this kind of database operates
on a collection and documents model.
So a collection, it's sort of like a folder
that has documents in it.
You can put collections inside documents
so let's go ahead and start a collection here.
And we'll give it a name of users.
There should be at least one collection in your database.
It's sort of a big container for your data
and I'm going to add here a name field.
Notice that there are some different kinds of fields
that you can add in here
and you can also choose that the program will automatically
give you an ID or type in an ID here yourself.
So I'll create this field and put in my name for right now
and then hit save.
All right so, you will notice that
it's giving you a warning here
and while you're in development it's cool.
Ignore that for now.
Notice that we created the users collection
and then it asks us to define a field
for the data that we want it to use.
So I gave it a name field and put in my name.
And then it automatically generated a document for us.
Notice that the document has a hash
so we're actually going to need that.
Let's go ahead and copy it.
And our information gad inserted into this document.
We can manage all this data from these different menus
so if you wanted to get rid of this document,
you would click right here and delete the document.
Also, if you wanted to get rid of the collection of users
you would do it right here.
It's not kind of obvious.
Sometimes I'm looking for deleting things
from this area but it's actually right here.
You probably don't want to delete a collection
all the time so.
Now that we have some data
and we have the access to the data defined,
we can go into our application
and figure out how to insert that data into our project.
So what I'll do is go into my home document
which has some text in it
and that's where we've been so far.
And I need to add some information here so,
I'm going to create a data function or a data method here.
And this is where we would normally put
any data that we want our application to know about
or in this case, it would be this component.
So this component called home is going to understand something
and we'll need to issue a return statement here
'cause in components, that's how you set up the data.
And then we will type in user and set that to null
because it's at the beginning when this launches,
it's not going to have anything in it, right?
And then we can use a lifecycle method.
So lifecycle methods are like events for your application.
So you can define what happens
when as the application gets started
or as, you know, you can execute different methods
or different things.
So the one that I want to use is called mounted.
And you can check the documentation
for the different lifecycle methods.
So we're going to use that method and then in here,
what I'll do is go ahead and say,
"Okay, I want to access my database."
And I'll need to actually import this so
let's make sure we do that.
So in the scripts, let's go ahead and import db from
the db.js file.
And this will be the one that you create yourself.
So now we can say, "Okay, go to the database."
And I want you to look up the collection that I called users
and once you do that, I want you to retrieve a document.
So you can say document or actually doc, D-O-C.
And then, for right now, we're going to give it a hard ID
and that's the ID that I copied.
We're saying we want this specific document.
And then there are different methods that you can execute
on collections or on documents.
The one that we want right now is something called get.
This will get a specific document or the information
in a specific document
and it is a promise so then you can say
or you can use this then keyword or method.
After that, you can then specify that
whatever you get from this request
will get stored in something we'll call Snapshot.
You can call it whatever you want
but I think Snapshot makes a lot of sense.
And then we can do something with that snapshot.
A snapshot's going to be quite a complex object
that's going to have all kinds of information
about the database at the point that you retrieved it.
In this case we're using get,
so we're getting a static piece of information.
We're not retrieving dynamic data.
And what we can do here then is go ahead
and modify our user variable
and set that to Snapshot
and we'll also need to execute the data
because Snapshot just has the event itself
which has a ton of stuff in it
and we want just the data that comes from our database
and then we can actually type in the field
that we want to retrieve.
In this case, it'll be name.
And now, we can use that in our applications.
So that means that we can come up here
and right now, I've got this div
that has all this stuff in it.
And because I want to go ahead and add another div,
remember I mentioned that in Vue, right now at least,
in this version of Vue,
there needs to be like a big parent
like one div to rule them all.
So I can't put two divs like this.
So we'll have to cut that out and then paste it in here.
So now we have one sort of main div
and then inside here, we have this container.
And I'm going to clean this up a bit
so I'm going to give this a class of margin top three.
This is just a Bootstrap class
and I think my headline may have already, you know,
a little bit of a spacer, margin top three.
So I'm going to get rid of that.
And then I'm going to add another div here
that will have the information from the database.
So I'll do a div and I'll give it a class
of text secondary.
Sort of a gray color actually.
And then I'm going to center all this.
And I'll say in here, "Welcome back,"
and then I'll do the name of the user
that is in the database right now.
So I'll say span class,
some fancy Bootstrap classes here.
So font, weight, bold
and I'll use text info here as well.
Info and go ahead and
let's see, we closed the div
so we need to close this span as well.
And then I'll do typical Vue.js interpolation.
So double curly braces.
And I will type in user here.
So that's the information that I retrieved.
So we'll save that,
take a look at our application
and we should be seeing welcome back
and it might take a second.
It has to read the data from the database
but after a few seconds,
this should go to the database and get that information
and then display it in your application.
And I'm also going to get rid of this star.
I know it's cute but it's really not
adding anything to my document.
So I can get rid of this import here
and then get rid of components for now.
And then finally, we'll need to get rid of the actual star
which is here in this font.
Awesome thing.
Hopefully we didn't screw anything up.
There you go.
So you can see now we get the data
and it actually looks like it loaded
a little bit faster now.
So that's pretty cool.
This is how you use Firebase.
At least the easiest version that we can think of.
There's actually obviously more complicated ways
and we'll need to use them
when we want to create a real time version
of this information that's going to track our meetings
and users and everything else.