In this lecture, we are going to talk about composite indexes, the error thrown by the browser is
mysterious.
Do you understand the error?
We need to talk about indexes.
This topic is related to databases as a front end developer.
You may not need to deal with indexes, but it can be helpful to know about them.
An index helps the database sort through data by a single or multiple fields.
Think of it like this.
Let's say you're reading a book with thousands of pages.
It's a lot of content to sift through.
You may want to revisit a specific chapter in the book.
Most people don't flip through every page to find what they're looking for and said, Bill, jump to
the beginning of the book for the table of Contents.
The Table of Contents will provide a list of chapters in a book.
Readers can jump to a chapter by looking up the page number.
It's faster than checking every page in a book.
Databases are the same.
You can think of an index as a table of contents for your data.
Firebase will automatically create indexes for your data and index is created for each property in a
document.
However, we're sorting documents by two properties.
We're using the UID and timestamp properties to query the database.
Firebase doesn't know how to source these two properties.
Luckily, we can teach Firebase new indexes in your browser.
Open the Firebase console.
Navigate to the page for the database on this page.
There's a tab called Indexes.
Click on.
It will be taken to a page with a list of index is registered with our database.
Indexes are placed into two categories composite and single indexes.
In our scenario, we're looking to create a composite index.
Composite Index is R for teaching Firebase how to sort data with multiple properties.
Let's click on the Add button to add a new index.
A form will appear after clicking the button.
It's going to ask us about our new index.
First, it wants the name of the collection.
We're attempting to sort the eclipse collection.
Therefore, we can pass in clips.
Next, it's going to ask us for the name of the properties.
The query we've built is trying to sort through data with the UIDAI and timestamp properties.
We can add these fields to our index.
Afterward, we need to set the direction, the direction for the UID doesn't matter.
We're not dependent on this direction for our query.
As for the time stamp or if trying to sort this property in ascending and descending order, we can
only choose one.
Therefore, we will need to build another index for the opposite direction.
Before we do, let's complete this index.
The next question will ask us for the scope.
It's possible to group collections.
However, we don't have collection groups in our database.
Therefore, we'll set this option to collection for a single collection.
After selecting this option, create the index.
The index has been added to our database.
Let's recreate the same index, but the time stamp property will be set to descending order.
We've successfully created indexes.
This process takes a while.
Go ahead and take a break.
I'll be back in a few minutes.
After a few minutes, the indexes should be ready.
Let's give our app another test.
Try changing the sorting on the page.
The list of clips should update after a few moments.
Perfect.
We've successfully sorted our clips.
That wraps this section on uploading and managing the files.
I wish I could say we're finished with this part of the app, but there's one more missing feature.
We don't have screenshots.
The images for the clips are broken.
This part of the app has been ignored.
It's time to learn about WebAssembly in the next section.
We will take a break from Angular to learn about a cutting edge technology called web assembly.
It's a whole other world.
I hope you're ready when you are.
I'll see you in the next section.