1
00:00:00,150 --> 00:00:04,290
In this lecture, we're going to add the final data to the database.

2
00:00:04,560 --> 00:00:06,780
We could write the logic in the component.

3
00:00:07,050 --> 00:00:12,030
Interacting with clips from the database will be a common action in our application.

4
00:00:12,330 --> 00:00:16,860
We should outsource this logic into a service before adding the data.

5
00:00:16,950 --> 00:00:18,430
Let's create a service.

6
00:00:18,720 --> 00:00:20,910
Open the command line in your editor.

7
00:00:21,150 --> 00:00:27,360
Let's run the following command Nji G Service Services slash clip.

8
00:00:29,990 --> 00:00:32,659
The clip service will be globally available.

9
00:00:32,930 --> 00:00:35,960
We're not going to store it inside the video module.

10
00:00:36,230 --> 00:00:40,250
After creating the service, open the service class file.

11
00:00:42,780 --> 00:00:44,670
Let's think about what we'll need.

12
00:00:44,910 --> 00:00:48,720
First, we're going to need to inject the Firestorm service.

13
00:00:49,050 --> 00:00:55,020
It's going to provide us with the methods for communicating with our database on top of the service.

14
00:00:55,170 --> 00:00:57,000
We're going to need type checking.

15
00:00:57,300 --> 00:01:01,710
We should be cautious with the type of data inserted into our database.

16
00:01:02,010 --> 00:01:09,270
It's possible we may accidentally insert the wrong type of data to prevent this scenario from occurring.

17
00:01:09,390 --> 00:01:14,280
We can constrain the data of our collection to a specific structure.

18
00:01:14,700 --> 00:01:17,400
We have experience with this implementation.

19
00:01:17,790 --> 00:01:22,440
We previously added types to the user's collection in our database.

20
00:01:22,710 --> 00:01:24,660
The process will be very similar.

21
00:01:24,930 --> 00:01:28,120
Let's get started at the top of the file.

22
00:01:28,140 --> 00:01:35,340
We will import the angular fire store and angular fire store collection objects from the angular slash

23
00:01:35,340 --> 00:01:39,300
fire slash compat slash fire store package.

24
00:01:41,870 --> 00:01:46,640
The Firestorm service will expose methods for communicating with the database.

25
00:01:46,940 --> 00:01:54,110
As for the collection class, it'll help us with adding types to our collection inside the class defining

26
00:01:54,110 --> 00:01:56,870
public property called clips collection.

27
00:01:59,450 --> 00:02:03,290
We are going to annotate this property with the collection class.

28
00:02:05,800 --> 00:02:12,550
The property we've created will store the collection for the users uploads by storing it as a property.

29
00:02:12,670 --> 00:02:15,820
We can skip the process of selecting the collection.

30
00:02:16,090 --> 00:02:19,000
We can select it once, use it everywhere.

31
00:02:19,270 --> 00:02:21,580
It's going to make our code more readable.

32
00:02:22,090 --> 00:02:27,760
We're applying the collection type to enforce the type of data that can be added to the collection.

33
00:02:28,060 --> 00:02:32,300
We can describe the data by using a generic to describe the data.

34
00:02:32,320 --> 00:02:35,980
Let's create a model inside the model's directory.

35
00:02:36,040 --> 00:02:40,450
Create a file called Clip Dot Model Dots.

36
00:02:42,860 --> 00:02:47,360
Inside this file, we will export an interface called I Clip.

37
00:02:49,920 --> 00:02:54,630
The object should describe the data that can be found inside the eclipse collection.

38
00:02:54,960 --> 00:03:02,940
Every object should store the following properties unity display, name, title, file name and URL.

39
00:03:07,160 --> 00:03:10,370
The types for these property should be sent to string.

40
00:03:12,970 --> 00:03:17,890
Switch back to the service at the top of the file, import our new model.

41
00:03:20,200 --> 00:03:24,460
Lastly, we will applying this model to the collection as a generic.

42
00:03:26,870 --> 00:03:33,290
By adding this generic typescript will not allow us to add an object unless it defines the properties

43
00:03:33,290 --> 00:03:34,370
in the interface.

44
00:03:34,730 --> 00:03:38,870
This step is optional, but type checking should always be a priority.

45
00:03:39,170 --> 00:03:46,340
After defining our property, we can inject the fire store service in the constructor functions arguments

46
00:03:46,520 --> 00:03:49,610
at the service under an alias called DB.

47
00:03:52,210 --> 00:03:59,260
Next, inside the constructor function update, the eclipse collection property to the DVD collection

48
00:03:59,260 --> 00:03:59,800
function.

49
00:04:02,410 --> 00:04:07,570
The collection function will select a collection from our database for this example.

50
00:04:07,690 --> 00:04:10,780
The name of our collection will be called clips.

51
00:04:13,250 --> 00:04:19,040
This collection doesn't exist, but that's perfectly fine, Firebase will create it for us.

52
00:04:19,310 --> 00:04:20,660
Our collection is ready.

53
00:04:20,930 --> 00:04:27,310
We will finalize the service by creating a function for adding a new clip to the collection defining

54
00:04:27,320 --> 00:04:29,210
method called Create Clip.

55
00:04:31,770 --> 00:04:36,390
It'll have an argument called data annotated with the eclipse model.

56
00:04:38,860 --> 00:04:46,270
Lastly, inside the method, we will call the Fiscal Cliffs Collection Act and function with the data

57
00:04:46,270 --> 00:04:47,020
passed in.

58
00:04:49,640 --> 00:04:51,920
This operation is asynchronous.

59
00:04:52,130 --> 00:04:57,020
We will add the async await keywords in the appropriate locations.

60
00:04:59,620 --> 00:05:03,190
There are two functions for adding a document to a collection.

61
00:05:03,490 --> 00:05:05,950
The first function is the set function.

62
00:05:06,310 --> 00:05:10,510
This function is what we use to add the user to the user's collection.

63
00:05:10,900 --> 00:05:12,970
The second function is called add.

64
00:05:13,330 --> 00:05:19,390
The difference between the two is that the set function will allow you to assign a custom ID to the

65
00:05:19,390 --> 00:05:20,110
document.

66
00:05:20,530 --> 00:05:24,850
The add function will instruct Firebase to generate an ID for you.

67
00:05:25,240 --> 00:05:31,600
We're going to call the add function because we don't care about setting a custom ID for the document.

68
00:05:31,930 --> 00:05:33,190
It's quick and easy.

69
00:05:33,880 --> 00:05:35,170
Our service is ready.

70
00:05:35,470 --> 00:05:39,850
Let's inject it into the upload component at the top of the file.

71
00:05:39,910 --> 00:05:41,980
Import the eclipse service.

72
00:05:44,390 --> 00:05:52,120
Next in the constructor functions arguments, inject this service with an alias called Clips Service.

73
00:05:54,610 --> 00:05:59,830
Lastly, scroll to the next function in our snapshot changes observable.

74
00:06:00,250 --> 00:06:07,000
The Create clip method should be called after creating the clip object will pass it into the method.

75
00:06:09,730 --> 00:06:17,410
Errors will arise because the UID and display name properties may be null by default, Firebase will

76
00:06:17,410 --> 00:06:21,610
annotate these properties as strings or undefined values.

77
00:06:21,910 --> 00:06:24,760
It's because the user may not be authenticated.

78
00:06:25,030 --> 00:06:31,540
However, we know for a fact they are authenticated, otherwise they wouldn't be able to upload a file

79
00:06:31,540 --> 00:06:32,410
to begin with.

80
00:06:32,770 --> 00:06:39,160
We can fix this issue by asserting the types on both properties two strings with the as keyword.

81
00:06:41,670 --> 00:06:42,450
We're finished.

82
00:06:42,660 --> 00:06:44,070
Time to test our code.

83
00:06:44,430 --> 00:06:48,990
Before we do go to the Firebase console and clear the storage.

84
00:06:51,380 --> 00:06:53,600
We want to start with a fresh slate.

85
00:06:53,960 --> 00:06:57,380
I have deleted the files in my app storage ahead of time.

86
00:06:57,710 --> 00:07:01,760
Pause the video to do the same once you've got that taken care of.

87
00:07:01,910 --> 00:07:03,860
Go ahead with uploading a file.

88
00:07:06,560 --> 00:07:13,880
After some time has passed, we will receive a success message, go to the Firebase console to verify

89
00:07:13,880 --> 00:07:15,440
that the file was uploaded.

90
00:07:15,740 --> 00:07:18,770
It should be stored inside the eclipse directory.

91
00:07:21,280 --> 00:07:21,760
Great.

92
00:07:21,910 --> 00:07:27,220
The video is still being stored in the storage after verifying it's being stored.

93
00:07:27,460 --> 00:07:31,900
Go to the database to confirm that the clip information was inserted.

94
00:07:34,420 --> 00:07:37,930
Inside the eclipse collection, a new document was added.

95
00:07:38,230 --> 00:07:39,940
It was assigned a random ID.

96
00:07:40,570 --> 00:07:41,860
That's perfectly fine.

97
00:07:41,920 --> 00:07:44,830
We don't need that custom ID at this time.

98
00:07:45,370 --> 00:07:46,240
We're finished.

99
00:07:46,340 --> 00:07:49,960
We've created an elegant solution for uploading videos.

100
00:07:50,260 --> 00:07:56,110
There are many ways we can improve the upload process, but I don't want to spend too much time as I

101
00:07:56,110 --> 00:07:58,450
have covered everything I wanted to cover.

102
00:07:58,870 --> 00:08:05,560
There is one thing I want to add I want to create a fallback solution for users who aren't able to drag

103
00:08:05,560 --> 00:08:08,140
and drop files for one reason or another.

104
00:08:08,410 --> 00:08:11,530
We'll tackle this problem in an upcoming lecture.