1
00:00:00,090 --> 00:00:06,420
In this lecture, we are going to talk about composite indexes, the error thrown by the browser is

2
00:00:06,420 --> 00:00:07,260
mysterious.

3
00:00:07,530 --> 00:00:08,890
Do you understand the error?

4
00:00:08,910 --> 00:00:11,010
We need to talk about indexes.

5
00:00:11,460 --> 00:00:15,760
This topic is related to databases as a front end developer.

6
00:00:15,780 --> 00:00:20,250
You may not need to deal with indexes, but it can be helpful to know about them.

7
00:00:20,790 --> 00:00:26,160
An index helps the database sort through data by a single or multiple fields.

8
00:00:26,460 --> 00:00:27,630
Think of it like this.

9
00:00:27,870 --> 00:00:30,780
Let's say you're reading a book with thousands of pages.

10
00:00:30,990 --> 00:00:33,060
It's a lot of content to sift through.

11
00:00:33,390 --> 00:00:36,810
You may want to revisit a specific chapter in the book.

12
00:00:37,110 --> 00:00:43,410
Most people don't flip through every page to find what they're looking for and said, Bill, jump to

13
00:00:43,410 --> 00:00:46,200
the beginning of the book for the table of Contents.

14
00:00:46,650 --> 00:00:50,460
The Table of Contents will provide a list of chapters in a book.

15
00:00:50,760 --> 00:00:54,270
Readers can jump to a chapter by looking up the page number.

16
00:00:54,540 --> 00:00:57,390
It's faster than checking every page in a book.

17
00:00:57,690 --> 00:00:59,100
Databases are the same.

18
00:00:59,370 --> 00:01:03,290
You can think of an index as a table of contents for your data.

19
00:01:04,569 --> 00:01:11,260
Firebase will automatically create indexes for your data and index is created for each property in a

20
00:01:11,260 --> 00:01:11,980
document.

21
00:01:12,220 --> 00:01:15,700
However, we're sorting documents by two properties.

22
00:01:15,970 --> 00:01:20,860
We're using the UID and timestamp properties to query the database.

23
00:01:21,160 --> 00:01:24,730
Firebase doesn't know how to source these two properties.

24
00:01:25,000 --> 00:01:29,710
Luckily, we can teach Firebase new indexes in your browser.

25
00:01:29,920 --> 00:01:31,780
Open the Firebase console.

26
00:01:32,110 --> 00:01:35,980
Navigate to the page for the database on this page.

27
00:01:36,070 --> 00:01:37,990
There's a tab called Indexes.

28
00:01:38,230 --> 00:01:38,680
Click on.

29
00:01:38,680 --> 00:01:44,350
It will be taken to a page with a list of index is registered with our database.

30
00:01:44,710 --> 00:01:50,020
Indexes are placed into two categories composite and single indexes.

31
00:01:50,320 --> 00:01:54,220
In our scenario, we're looking to create a composite index.

32
00:01:54,700 --> 00:02:00,250
Composite Index is R for teaching Firebase how to sort data with multiple properties.

33
00:02:00,550 --> 00:02:03,580
Let's click on the Add button to add a new index.

34
00:02:03,880 --> 00:02:06,340
A form will appear after clicking the button.

35
00:02:06,640 --> 00:02:09,460
It's going to ask us about our new index.

36
00:02:09,759 --> 00:02:12,250
First, it wants the name of the collection.

37
00:02:12,580 --> 00:02:15,160
We're attempting to sort the eclipse collection.

38
00:02:15,460 --> 00:02:17,950
Therefore, we can pass in clips.

39
00:02:20,490 --> 00:02:24,120
Next, it's going to ask us for the name of the properties.

40
00:02:24,390 --> 00:02:30,630
The query we've built is trying to sort through data with the UIDAI and timestamp properties.

41
00:02:30,900 --> 00:02:33,330
We can add these fields to our index.

42
00:02:35,820 --> 00:02:41,250
Afterward, we need to set the direction, the direction for the UID doesn't matter.

43
00:02:41,460 --> 00:02:44,370
We're not dependent on this direction for our query.

44
00:02:44,670 --> 00:02:51,420
As for the time stamp or if trying to sort this property in ascending and descending order, we can

45
00:02:51,420 --> 00:02:52,410
only choose one.

46
00:02:52,740 --> 00:02:57,120
Therefore, we will need to build another index for the opposite direction.

47
00:02:57,360 --> 00:03:00,210
Before we do, let's complete this index.

48
00:03:00,720 --> 00:03:03,390
The next question will ask us for the scope.

49
00:03:03,660 --> 00:03:05,820
It's possible to group collections.

50
00:03:05,970 --> 00:03:09,420
However, we don't have collection groups in our database.

51
00:03:09,720 --> 00:03:14,250
Therefore, we'll set this option to collection for a single collection.

52
00:03:14,520 --> 00:03:17,670
After selecting this option, create the index.

53
00:03:20,090 --> 00:03:22,610
The index has been added to our database.

54
00:03:22,850 --> 00:03:29,260
Let's recreate the same index, but the time stamp property will be set to descending order.

55
00:03:31,780 --> 00:03:34,300
We've successfully created indexes.

56
00:03:34,480 --> 00:03:36,160
This process takes a while.

57
00:03:36,400 --> 00:03:37,840
Go ahead and take a break.

58
00:03:38,080 --> 00:03:39,700
I'll be back in a few minutes.

59
00:03:42,720 --> 00:03:45,630
After a few minutes, the indexes should be ready.

60
00:03:45,840 --> 00:03:47,730
Let's give our app another test.

61
00:03:47,970 --> 00:03:50,250
Try changing the sorting on the page.

62
00:03:50,430 --> 00:03:53,760
The list of clips should update after a few moments.

63
00:03:56,210 --> 00:03:56,840
Perfect.

64
00:03:57,020 --> 00:03:59,390
We've successfully sorted our clips.

65
00:03:59,660 --> 00:04:03,440
That wraps this section on uploading and managing the files.

66
00:04:03,710 --> 00:04:08,660
I wish I could say we're finished with this part of the app, but there's one more missing feature.

67
00:04:08,900 --> 00:04:10,460
We don't have screenshots.

68
00:04:10,670 --> 00:04:12,740
The images for the clips are broken.

69
00:04:13,040 --> 00:04:14,990
This part of the app has been ignored.

70
00:04:15,680 --> 00:04:19,190
It's time to learn about WebAssembly in the next section.

71
00:04:19,220 --> 00:04:25,070
We will take a break from Angular to learn about a cutting edge technology called web assembly.

72
00:04:25,310 --> 00:04:26,810
It's a whole other world.

73
00:04:27,020 --> 00:04:28,880
I hope you're ready when you are.

74
00:04:29,060 --> 00:04:31,250
I'll see you in the next section.