- [Instructor] Firebase is a no-SQL version
of a database that has a slightly
different way of doing things,
but it gives you so much functionality
that I think you're really going to love it.
So the way that you create data
is by starting a collection,
so think of a collection as a big container
of your documents.
So here we're going to create a collection called songs,
and then we'll hit next, and after you do that,
you can create a sample document
with the data that you're going to want for your files.
So here you would create fields
for the type of information that you're using,
so you could say create music_url,
and that's going to be a string,
and you can put in a sample value,
for right now I'm just going to save this
and you'll see that, once it gets going,
you're going to receive a collection right here,
and then you should receive at least one document
with some information you've added.
So, right now, or database has a single record
that goes under songs and then it has a single document,
and you can see the ID of the document is right here,
that we can modify.
Now, the weird thing about database in a no-SQL structure
is that it doesn't have any particular order,
so for example, we can't create a list of data fields
and then create another record that has
that exact amount of fields.
So if we create another document here,
you'll see that we can create another record,
but it doesn't necessarily have those
pre-filled fields in them,
so we can say something here like description,
and this will be some sort of description that we'll add,
but these two documents do not have,
or are not sharing the same fields,
and this is just how a no-SQL database works,
it's considered a document store,
you store individual documents,
and those document scan have any kind
of information that you want.
They don't necessarily have to have the same fields.
So what you would do with a database system like this
is create each document and then,
add the fields that you need for each one of those documents
with the information that you want,
so for example, here we might type in a name,
and type in the name of our data.
Now, one disadvantage of Firebase
is also that here's no easy way
of importing a JSON document with all the information,
so I'm going to go through and fill out
this database so that it has information
that matches the structure,
and the data of what we've been working with so far.
So here you can see that I've added a bunch of data for you,
and if you look at any of these items,
it looks pretty similar to what we had
in the data of that JSON file.
One of the differences is that
there is no longer an ID field in each of these records,
the IDs are all in the individual documents,
and that's just how Firebase works,
you create a collection,
in the collection you have a number of documents,
each of those documents get an ID,
usually an auto-generated ID like these two
that I had originally, and then,
each one of the documents has the fields that you need,
so you don't really need an ID field in here,
and you can also manage any of these items
directly in this interface,
I'm going to click on this item right here
because I'm going to delete these extra records,
and I'll just say start delete here,
and then also delete this one.
So let's work on importing these into our application,
we'll go back into our project,
and let's go ahead and expand this,
because we're going to need to do a few things.
Now, first off, I'm going to go into my main.js file,
and get rid of this store because we're not
going to be working with Vuex anymore,
and also get rid of it right here, so we'll save this,
and we can go ahead and close our store as well.
And in App.vue, we're going to go back
to having those additional fields
that we had in here before,
so in addition to audioElement,
we're going to have currentSong,
and we're going to initialize it to null,
and we originally also had the songs array here,
and we'll set that to an empty array.
All right, we're going to need to modify
how we deal with the data,
so before we were using a dispatch command,
and we're going to reset it to the way it used to be,
so we'll say, this.currentSong,
and we'll set that to the payload,
and then here we're going to say this.currentSong equals null,
so we're sort of going back to the way
we used to deal with things when we were not using Vuex.
All right, so let's see how we actually import that data,
and what we were doing before was using, again,
the Vuex store to delete,
and also to import some of these different songs,
so I'm going to switch this method to mounted,
my Firebase library is going to be communicating
with the Firebase service,
more than just when the data is created.
You'll see that, with Firebase,
since it's a multi-user database,
different people can be modifying
the database at the same time,
so we're going to need to do this
on a different lifecycle method,
and instead of doing what we were doing before,
we're going to start accessing information in Firebase.
So, to do that, we're going to use the db object
that we created in our db.js file,
and then we will say that we want
to target a collection that we've created,
and we created a collection called songs
so that's how we get to it,
and then we request a snapshot
of the current documents in our store.
So if you take a look at our application,
a snapshot allows you to get
a list of the current documents that are right here,
so that's what we're asking for.
So we'll say onSnapshot, and this is an event that goes
to get information about our data whenever it changes.
So whenever Firebase detects that
there has been a change to the data,
then it's going to execute the following function,
and so what we want to do is do something
with the information that changes,
that will be returned in a snapshot,
and here, what we want to do,
is populate our array of songs,
so we'll create a temporary array,
just like we had done before, I'll call this snapData,
so we'll initialize it to an empty array,
and then we will go through that snapshot information
that we get from Firebase,
and go through each of the records.
Now, here, what I want to do,
is take a look at the information
we get back through the snapshots,
think of a snapshot as an event,
we're going to get a lot of different pieces of information,
but we want to analyze each of the documents,
and only store certain pieces of the information
that we get back into our data.
So here, what we'll want to do,
is grab our new array called snapData
and push along the information that
we get from the Firebase document.
Now, here, I'm going to create an ID field,
so I mentioned that we didn't
have the ID field in the information
that is passed along in the individual documents,
but we do need that information,
and we'll need that information
for doing things like delete,
or even adding records, or doing something with the records,
so we do want to store it,
but we're going to use the document ID,
so this will give you access
to the actual ID that is stored
in Firebase for each of the records.
So, remember before when we added a document,
you got this weird hash with the ID of the document,
so that's what it would be getting,
in our case, we've made it match the information
that we had before so it's going to get
this integer from one to 10,
but it doesn't really matter,
we're going to get that from the information
we receive from the database,
and then we'll go through and deposit
all of the additional information
that we're receiving from the database.
We do that by saying doc.data,
and this is a method, and then specifying the field
that we need from the data, so of course,
our name is going to be matching our name record,
and you can ask for any information
that you have right here,
so I need to just populate that
with all of the structure that
we used to have in the JSON file, but is now in Firebase.
Once we go through all of that data,
what we'll do is modify the songs variable,
so that it uses our new snapData array
that we just populated from Firebase.
All right, let's go ahead and check this out,
and we should still see
the same information as we had before.
Do notice that because I'm just getting
the information from Firebase,
it's not automatically sorted for us,
we would have to write our own sorting function
if we wanted to have that happen here.
So, we have to write one more function
which will allow us to delete some of these songs,
I'll take care of that in the next video.