- [Instructor] So far, we've been accessing our data
from a traditional rest API,
using things like Axios as well as Vuex.
But there is another option that you should consider
and that's working with a service that gives you
another way of accessing your data.
One of the best ones out there is Firebase from Google.
It has a number of advantages because
it manages state for you automatically
and it's also a real time multi-user database
that has features like authentication
and lots of other things.
Now, this means that multiple users can access and modify
your database at the same time.
So, to get Firebase, you need to go to this URL
and make sure that you open up an account.
There is a free version.
And if you have a Google account, this will be a lot easier.
Now, you'll need to go here to the console
once you get the account.
And then create a new project.
We'll give this a name.
I don't need analytics but the Firebase service gives you
a lot of additional options.
And then I'm going to say Create the Project.
All right, once the project is ready we'll hit continue.
And then you'll arrive here at this screen.
You'll need to click right here.
We're using the web version of Firebase.
But you can also use an Android or iOS version.
So, we'll click on this
and we'll need to create an application
or register our app.
And we're not going to choose Firebase Hosting
but that's another feature you can opt for.
And you're going to need this section right here.
So I'm going to copy this configuration variable.
And then I'm going to hit Continue to console.
And once you get to that point,
you're going to need to go to your database,
which will be right here.
And start creating your database.
Now, we're going to start in test mode.
Once you finished your applications,
you may want to control who has access to your data.
So I mentioned Firebase does have authentication
for things like email, Google, Twitter,
and lots of other services.
But we're just going to go things in test mode right now.
So we'll click on the Next button.
We'll need to pick a location.
So pick the server that is closest to you.
All right.
And now, you're ready to start defining your data.
Now before we do that, because I have this
configuration information in my clipboard,
I'm going to go back into my application
and in the source folder,
I'm going to create a new file called db.js.
This is going to be like what we did in store.js.
It's going to give our applications
access to Firebase for us.
All right, so in this db.js file
we're going to need to import the library.
Now, we haven't installed it yet
but we will in just a minute.
And then, we're going to paste that information from Firebase.
I'm going to change that to const,
just so that we are all modern and stuff.
Now, once you have the information from Firebase,
we're going to create another constant here called firebaseApp
and set that to initialize Firebase
with our Firebase config variable.
All right, this will be exported.
So, we'll do an export default
to export all this information.
We'll use firebaseApp.
And then we're using the database called firestore.
So, Firebase has a couple of different types of database
and the one that we're using is the newer version called
firestore. So that's what we'll use here.
And let's go ahead and save this.
In addition to this, this db.js file
is not going to be included in our get hub repo.
You need to create your own
and have access to your own information.
So because of that, I'm going to modify this getignore file
and make sure that I add
db.js right here.
This will mean that db.js
is not going to be in the get hub repo
and that you will have to create your own,
which you should do anyways.
So, let's go ahead and install the library.
So we'll do an npm install minus minus save
to save it as a dependency
and then we'll save firebase right here.
All right, once that's done then we are ready to import this
into our project.
I'm going to switch back to app.vue
then I'm going to make sure that I import a new object
from our database file,
which is in the same folder as app.vue
and it's called db.js.
All right, so this should import Firebase
and give us access to the information in Firebase right now,
all that information is empty
and I haven't modified this application
so that it doesn't read things from vuex yet.
We'll take care of that in the next video.