1
00:00:00,120 --> 00:00:04,770
In this lecture, we are going to begin storing the user's data in the database.

2
00:00:05,010 --> 00:00:10,980
Similar to before, Firebase offers a service for directly communicating with the database.

3
00:00:11,250 --> 00:00:17,580
We can inject this service into our component for performing various actions before we can inject the

4
00:00:17,580 --> 00:00:18,180
service.

5
00:00:18,300 --> 00:00:20,130
We need to import a module.

6
00:00:20,430 --> 00:00:22,410
Open the app module file.

7
00:00:24,930 --> 00:00:32,490
Each service from Firebase has a module we imported the angular fire authentication module for interacting

8
00:00:32,490 --> 00:00:34,230
with the authentication service.

9
00:00:34,560 --> 00:00:40,890
We can add support for fire store by importing the respective module at the top of the file.

10
00:00:41,040 --> 00:00:50,070
Import a module called Angular Firestorm module from the angular flash fire slash compat slash fire

11
00:00:50,070 --> 00:00:50,940
store package.

12
00:00:53,390 --> 00:00:56,900
Next, we will add this module to the imports option.

13
00:00:57,410 --> 00:01:00,560
The module will expose services to our components.

14
00:01:00,860 --> 00:01:03,080
They're accessible in every component.

15
00:01:03,380 --> 00:01:06,740
Let's inject a service for interacting with our database.

16
00:01:07,040 --> 00:01:10,010
Open the register component class file.

17
00:01:12,520 --> 00:01:17,440
At the top of the file, we will import a service called Angular Fire Store.

18
00:01:22,180 --> 00:01:29,200
Next, we will inject the service into the component inside the constructor function, create a private

19
00:01:29,200 --> 00:01:30,880
property called DB.

20
00:01:31,270 --> 00:01:35,790
The type for this property will be the angular fire store service.

21
00:01:38,280 --> 00:01:41,340
Finally, we can update our register function.

22
00:01:41,670 --> 00:01:48,150
The first step for using a collection is to create a collection below the create user function in the

23
00:01:48,150 --> 00:01:49,050
try block.

24
00:01:49,200 --> 00:01:54,600
We will replace the long statement with the this Dot DB Dot Collection function.

25
00:01:57,170 --> 00:02:01,640
The collection function allows us to select a collection from our database.

26
00:02:01,910 --> 00:02:04,820
However, we haven't created the collection yet.

27
00:02:05,120 --> 00:02:08,030
Luckily, we don't have to do the collection.

28
00:02:08,030 --> 00:02:12,800
Function will create a collection if the collection doesn't exist in our database.

29
00:02:13,100 --> 00:02:19,310
It has one argument, which is the name of the collection to select the name of our collection will

30
00:02:19,310 --> 00:02:20,540
be called users.

31
00:02:23,100 --> 00:02:28,980
This function will return an object with methods and properties for working with the user's collection

32
00:02:29,310 --> 00:02:31,080
after selecting a collection.

33
00:02:31,230 --> 00:02:35,040
We can push a document chain, a function called Add.

34
00:02:37,620 --> 00:02:41,130
The ad function will add a document to the collection.

35
00:02:41,460 --> 00:02:46,830
A document is the terminology used to describe an object inside a collection.

36
00:02:47,220 --> 00:02:53,940
The ad function has one argument, which is the object to insert or going to pass in an object with

37
00:02:53,940 --> 00:02:54,960
the user data.

38
00:02:55,290 --> 00:02:58,380
We are not going to add every field from our form.

39
00:02:58,980 --> 00:03:04,320
We don't want to insert the password and confirm password properties to the database.

40
00:03:04,680 --> 00:03:08,370
The password is already being stored in the authentication service.

41
00:03:08,670 --> 00:03:10,170
We can limit these fields.

42
00:03:10,410 --> 00:03:15,510
Let's add the name, email, age and phone number of properties to the object.

43
00:03:23,730 --> 00:03:30,900
The ad function will return a promise we're going to use the async await syntax to make our code readable.

44
00:03:31,260 --> 00:03:34,290
Add the await keyword before the function call.

45
00:03:36,910 --> 00:03:43,360
We don't need to handle the air from this request because the request is being made inside the try catch

46
00:03:43,360 --> 00:03:43,840
block.

47
00:03:44,230 --> 00:03:48,220
The catch block will automatically handle errors from this request.

48
00:03:48,790 --> 00:03:51,460
We're finished by using the add function.

49
00:03:51,580 --> 00:03:55,630
We're able to insert additional information into the database.

50
00:03:55,960 --> 00:03:59,680
It's data we can't typically store in the authentication service.

51
00:04:00,000 --> 00:04:05,740
However, we are storing the email even though the authentication service already stores it.

52
00:04:05,950 --> 00:04:08,500
It's still handy to store it in the database.

53
00:04:08,920 --> 00:04:12,970
This will allow us to filter and sort through the data by email.

54
00:04:13,360 --> 00:04:15,460
Let's try testing if this works.

55
00:04:15,610 --> 00:04:17,170
Switch over to the browser.

56
00:04:19,610 --> 00:04:22,130
Make sure your developer tools are opened.

57
00:04:22,460 --> 00:04:28,550
We want to check for errors in the console or related to the register component after verifying there

58
00:04:28,550 --> 00:04:33,770
aren't errors in the console, fill out the registration form with valid values.

59
00:04:40,310 --> 00:04:46,700
After submitting the form, we will receive a success message despite receiving confirmation from our

60
00:04:46,700 --> 00:04:47,090
app.

61
00:04:47,330 --> 00:04:54,440
We should verify the user is being inserted into Firebase through the console in the Firebase console,

62
00:04:54,530 --> 00:04:56,750
navigate to the database page.

63
00:04:59,180 --> 00:05:05,720
If you already had it opened, you should be able to find the collection, Firebase refreshes this page

64
00:05:05,720 --> 00:05:06,650
periodically.

65
00:05:06,890 --> 00:05:09,500
If not, try manually refreshing.

66
00:05:09,500 --> 00:05:14,810
The page in the database will find three new columns on the left.

67
00:05:14,930 --> 00:05:18,830
We have a list of collections before submitting the request.

68
00:05:19,010 --> 00:05:20,360
There were no collections.

69
00:05:20,600 --> 00:05:26,000
By adding a document to the collection, Firebase will check if the collection exists.

70
00:05:26,270 --> 00:05:28,610
If it doesn't, it'll create it for you.

71
00:05:28,910 --> 00:05:33,420
We're allowed to skip this step in the process in the middle column.

72
00:05:33,440 --> 00:05:39,800
We have a list of documents in the collection documents, so the objects in a collection in the right

73
00:05:39,800 --> 00:05:43,730
column will find the data stored in a specific document.

74
00:05:44,060 --> 00:05:47,510
You can click on any of the documents to view its data.

75
00:05:47,900 --> 00:05:51,800
This collection is where we'll find the form data we submitted.

76
00:05:52,190 --> 00:05:54,860
All our data is present and accounted for.

77
00:05:55,340 --> 00:05:59,060
Looking closer, the name of the document is a random string.

78
00:05:59,420 --> 00:06:03,380
The random string is a generated unique ID for our data.

79
00:06:03,680 --> 00:06:09,230
This is important to understand databases need a way to track individual records.

80
00:06:09,530 --> 00:06:14,570
This behavior will allow us to pull a specific record or user from our database.

81
00:06:14,900 --> 00:06:21,080
We could have provided an ID ourselves, but Firebase will create one for you if you don't provide one.

82
00:06:21,470 --> 00:06:27,680
We're going to let Firebase take care of assigning IDs for us in the next set of lectures.

83
00:06:27,830 --> 00:06:32,270
We are going to refine our solution for the best developer experience.