1
00:00:03,950 --> 00:00:06,525
Trong bài tập trước,

2
00:00:06,525 --> 00:00:09,990
chúng tôi đã cấu hình backend Firebase của chúng tôi như

3
00:00:09,990 --> 00:00:15,120
một dịch vụ với dự án mới và cũng thiết lập rất nhiều

4
00:00:15,120 --> 00:00:19,620
dữ liệu vào cơ sở dữ liệu của chúng tôi và sau đó thiết lập lưu trữ của chúng tôi và

5
00:00:19,620 --> 00:00:25,120
cấu hình Firebase Server của chúng tôi để hoạt động như phụ trợ cho ứng dụng Angular của chúng tôi.

6
00:00:25,120 --> 00:00:29,160
Trong bài tập này, chúng ta sẽ xem xét một phiên bản sửa đổi của

7
00:00:29,160 --> 00:00:33,480
ứng dụng Angular của chúng tôi mà làm cho việc sử dụng các backend Firebase như

8
00:00:33,480 --> 00:00:37,500
một dịch vụ để có được dữ liệu và

9
00:00:37,500 --> 00:00:41,915
cũng lưu trữ thông tin cho người dùng trên các máy chủ.

10
00:00:41,915 --> 00:00:44,480
Ngoài ra, chúng tôi sẽ tận dụng

11
00:00:44,480 --> 00:00:48,455
sự hỗ trợ xác thực mà Firebase cung cấp để xác thực người dùng

12
00:00:48,455 --> 00:00:56,295
cả bằng cách sử dụng cách tiếp cận email và mật khẩu và cũng sử dụng tài khoản Google.

13
00:00:56,295 --> 00:00:59,775
Để bắt đầu bài tập này,

14
00:00:59,775 --> 00:01:02,750
hãy đi đến một vị trí thuận tiện trên máy tính của bạn và

15
00:01:02,750 --> 00:01:07,190
sau đó sao chép kho Git đã cho nơi tôi

16
00:01:07,190 --> 00:01:14,775
đã cung cấp cho bạn phiên bản Angular Firebase của ứng dụng Angular của chúng tôi.

17
00:01:14,775 --> 00:01:17,490
Vì vậy, gõ, git clone

18
00:01:17,490 --> 00:01:27,470
https://github.com/jmuppala/confusion-Angular6-Firebase.git

19
00:01:27,470 --> 00:01:28,670
và sau đó sao chép

20
00:01:28,670 --> 00:01:34,835
kho Git và một khi kho Git được nhân bản vào máy tính của bạn,

21
00:01:34,835 --> 00:01:43,355
sau đó di chuyển vào

22
00:01:43,355 --> 00:01:47,570
thư mục Angular Firebase nhầm lẫn sẽ được tạo ra tại thời điểm này và

23
00:01:47,570 --> 00:01:52,110
sau đó bạn sẽ nhận thấy rằng một loạt các tập tin đã được cài đặt ở đó.

24
00:01:52,110 --> 00:01:56,015
Chúng ta hãy đi trước và thực hiện cài đặt npm để cài đặt

25
00:01:56,015 --> 00:02:01,890
tất cả các mô-đun nút mà ứng dụng Angular này phụ thuộc vào.

26
00:02:01,890 --> 00:02:04,520
Phiên bản này cũng sẽ cài đặt

27
00:02:04,520 --> 00:02:10,010
hai module nút bổ sung gọi là Firebase và sau đó Angular fire two.

28
00:02:10,010 --> 00:02:15,525
Tôi sẽ giải thích thêm một chút về hai mô-đun nút sau này trong bài tập này.

29
00:02:15,525 --> 00:02:18,915
Một khi cài đặt dự án hoàn tất,

30
00:02:18,915 --> 00:02:23,360
mở dự án trong một trình soạn thảo và sau đó trong dự án,

31
00:02:23,360 --> 00:02:27,830
đi vào thư mục

32
00:02:27,830 --> 00:02:32,420
môi trường nguồn và sau đó mở tập tin môi trường và trong tập tin môi trường,

33
00:02:32,420 --> 00:02:36,980
bạn sẽ thấy một tập hợp cấu hình Firebase mà bạn

34
00:02:36,980 --> 00:02:42,130
cần thiết lập với bạn cấu hình máy chủ Firebase riêng.

35
00:02:42,130 --> 00:02:45,105
Như chúng ta đã thấy trong bài tập trước,

36
00:02:45,105 --> 00:02:48,950
chúng ta có thể có được tất cả thông tin này khi chúng ta nhấp vào

37
00:02:48,950 --> 00:02:53,150
nút này ở đây được gọi là “Thêm Firebase vào ứng dụng web của bạn” và sau đó

38
00:02:53,150 --> 00:02:56,809
sao chép thông tin này và sau đó dán thông tin này

39
00:02:56,809 --> 00:03:01,835
vào môi trường của bạn tập tin để thay thế chúng

40
00:03:01,835 --> 00:03:06,500
với cụ thể của bạn Cấu hình máy chủ Firebase

41
00:03:06,500 --> 00:03:10,940
cho tất cả các mảnh thông tin này và một khi đã hoàn thành,

42
00:03:10,940 --> 00:03:17,390
sau đó bạn có thể khởi động ứng dụng Angular của bạn bằng cách gõ “ng serve” tại dấu nhắc.

43
00:03:17,390 --> 00:03:21,735
Một khi ứng dụng Angular của bạn được biên dịch với “ng serve”,

44
00:03:21,735 --> 00:03:29,905
sau đó đi đến một trình duyệt và sau đó gõ localhost:4200 để tải trong

45
00:03:29,905 --> 00:03:34,850
ứng dụng Angular của bạn và bạn sẽ nhận thấy rằng ứng dụng Angular của bạn được biên dịch

46
00:03:34,850 --> 00:03:40,215
và sau đó tải vào trình duyệt của bạn giống như trước đây.

47
00:03:40,215 --> 00:03:43,190
Vì vậy, một khi ứng dụng Angular của

48
00:03:43,190 --> 00:03:47,585
bạn được lên và chạy, bạn sẽ nhận thấy rằng phiên bản này của ứng dụng Angular sẽ được sử dụng

49
00:03:47,585 --> 00:03:51,260
máy chủ Firebase mà bạn đã thiết lập trong

50
00:03:51,260 --> 00:03:55,625
bài tập trước đó và do đó ở đây bạn sẽ thấy trang “Home”, trang

51
00:03:55,625 --> 00:04:00,030
“About” như chúng ta thấy ở đây và các

52
00:04:00,030 --> 00:04:09,615
“ Menu” và trang “Liên hệ” và rõ ràng là vì chúng tôi hiện không đăng nhập,

53
00:04:09,615 --> 00:04:14,975
trang “Yêu thích của tôi” sẽ hiển thị một lỗi cho biết không người dùng nào được đăng nhập.

54
00:04:14,975 --> 00:04:17,210
Vì vậy, chúng ta hãy đăng nhập chính mình.

55
00:04:17,210 --> 00:04:20,760
Hãy để tôi quay lại “Trang chủ” và sau đó chúng tôi sẽ đăng nhập chính mình.

56
00:04:20,760 --> 00:04:22,475
Vì vậy, khi bạn nhấp vào nút đăng nhập,

57
00:04:22,475 --> 00:04:27,195
bạn sẽ thấy biểu mẫu điển hình ở đây với email và thông tin mật khẩu.

58
00:04:27,195 --> 00:04:30,715
Bạn cũng sẽ thấy một nút bổ sung ở đây được gọi là “Đăng nhập với Google”.

59
00:04:30,715 --> 00:04:33,600
Vì vậy, hãy để tôi đăng nhập bằng tài khoản Google của tôi.

60
00:04:33,600 --> 00:04:35,750
Vì vậy, khi bạn nhấp vào “Đăng nhập với Google”,

61
00:04:35,750 --> 00:04:41,180
sau đó nó sẽ mở một cửa sổ trình duyệt khác, nơi bạn sẽ được yêu cầu

62
00:04:41,180 --> 00:04:47,420
cho phép sử dụng tài khoản Google của bạn bởi máy chủ Firebase này.

63
00:04:47,420 --> 00:04:49,475
Vì vậy, hãy để tôi tiếp tục và cho phép

64
00:04:49,475 --> 00:04:53,845
ứng dụng này và sau đó một khi ủy quyền được hoàn thành,

65
00:04:53,845 --> 00:04:57,145
sau đó bạn sẽ thấy rằng

66
00:04:57,145 --> 00:05:01,850
ứng dụng Angular dựa trên Firebase của bạn sẽ khởi động và ở góc bên phải,

67
00:05:01,850 --> 00:05:06,200
bạn sẽ ngay lập tức thấy tên của bạn đang được

68
00:05:06,200 --> 00:05:11,525
hiển thị ở đây và với “Đăng nhập” bây giờ biến thành nút “Đăng xuất”.

69
00:05:11,525 --> 00:05:14,755
Vì vậy, tại thời điểm này,

70
00:05:14,755 --> 00:05:17,530
bạn sẽ có thể xem mục yêu thích của bạn

71
00:05:17,530 --> 00:05:20,310
và trong trường hợp này vì chúng tôi không có bất kỳ mục yêu thích,

72
00:05:20,310 --> 00:05:22,155
vì vậy nó sẽ trống tại thời điểm này.

73
00:05:22,155 --> 00:05:27,830
Hãy để tôi quay lại “Menu” và sau đó thêm một vài mục vào “My Favorites”.

74
00:05:27,830 --> 00:05:32,235
Vì vậy, tôi sẽ thêm món ăn này vào mục yêu thích của tôi.

75
00:05:32,235 --> 00:05:34,045
Vì vậy, khi tôi nhấp vào món ăn này,

76
00:05:34,045 --> 00:05:41,110
bạn sẽ ngay lập tức thấy biểu tượng biến thành một trái tim đầy và cho phép tôi cũng chọn

77
00:05:41,110 --> 00:05:44,350
một món ăn nữa và thêm nó vào “My

78
00:05:44,350 --> 00:05:49,650
Favorites” và sau đó bây giờ khi bạn đi đến “My Favorites”,

79
00:05:49,650 --> 00:05:52,510
bạn sẽ thấy vài món ăn được thêm vào

80
00:05:52,510 --> 00:05:56,330
mục yêu thích của bạn như bạn sẽ mong đợi và một lần nữa,

81
00:05:56,330 --> 00:06:02,540
bạn có thể xóa các món ăn bằng cách nhấp vào nút “Xóa” chuyển đổi lên đây và sau đó nhấp vào

82
00:06:02,540 --> 00:06:09,695
thập tự giá để loại bỏ các mục từ danh sách yêu thích của bạn như được hiển thị ở đây.

83
00:06:09,695 --> 00:06:13,570
Bây giờ, chúng ta cũng có thể thêm như bạn nhận ra,

84
00:06:13,570 --> 00:06:17,660
chúng ta có thể đi đến bất kỳ món ăn nào và sau đó thêm ý kiến về món ăn đó.

85
00:06:17,660 --> 00:06:19,190
Vì vậy, hãy để tôi thêm vào một bình luận

86
00:06:19,190 --> 00:06:28,260
ở đây và thời điểm bạn gửi bình luận,

87
00:06:28,260 --> 00:06:32,435
bạn sẽ ngay lập tức thấy rằng bình luận của bạn sẽ được hiển thị ở đây với

88
00:06:32,435 --> 00:06:41,825
tên của tác giả bình luận cũng được bao gồm trong đây và với ngày như được hiển thị ở đây.

89
00:06:41,825 --> 00:06:45,890
Vì vậy, bạn có thể thấy rằng việc gửi

90
00:06:45,890 --> 00:06:49,955
bình luận của người dùng sẽ được hỗ trợ cho bất kỳ món ăn cụ thể nào.

91
00:06:49,955 --> 00:06:55,805
Hãy để tôi thêm vào một yêu thích hơn và vì vậy người dùng này sẽ có một vài mục yêu thích.

92
00:06:55,805 --> 00:06:58,180
Hãy để tôi “Đăng xuất” người dùng này.

93
00:06:58,180 --> 00:07:02,930
Quay lại “Trang chủ” và sau đó “Đăng xuất” người dùng này.

94
00:07:02,930 --> 00:07:07,715
Bây giờ chúng tôi sẽ đăng nhập bằng tài khoản khác.

95
00:07:07,715 --> 00:07:13,490
Vì vậy, tôi sẽ - Tôi đã thiết lập

96
00:07:13,490 --> 00:07:17,840
tài khoản mật khẩu email này trước đó và vì vậy chúng tôi sẽ

97
00:07:17,840 --> 00:07:22,865
đăng nhập như người dùng khác và một khi người dùng khác được đăng nhập,

98
00:07:22,865 --> 00:07:29,045
hãy để tôi một lần nữa đi đến “Menu” và thêm một vài mục vào mục

99
00:07:29,045 --> 00:07:36,904
yêu thích cho người dùng cụ thể này

100
00:07:36,904 --> 00:07:40,700
và vì vậy khi bạn quay trở lại “Yêu thích của tôi”,

101
00:07:40,700 --> 00:07:44,270
bạn sẽ thấy những mục này được liệt kê cho người dùng thứ hai.

102
00:07:44,270 --> 00:07:46,775
Bây giờ, tương tự cho người dùng này, cho

103
00:07:46,775 --> 00:07:51,560
phép tôi một lần nữa gửi bình luận khác của người dùng này. Vì

104
00:07:51,560 --> 00:07:53,150
vậy-

105
00:08:01,000 --> 00:08:02,600
và bạn sẽ

106
00:08:02,600 --> 00:08:07,445
thấy rằng các ý kiến gửi bởi người dùng thứ hai cũng được thêm vào ứng dụng.

107
00:08:07,445 --> 00:08:11,615
Vì vậy, đây là cách ứng dụng Angular của bạn hoạt

108
00:08:11,615 --> 00:08:16,490
động với Firebase như phụ trợ như một dịch vụ.

109
00:08:16,490 --> 00:08:18,529
Bây giờ tất nhiên bạn phải tự hỏi,

110
00:08:18,529 --> 00:08:24,170
làm thế nào để chúng tôi thiết kế lại ứng dụng Angular của chúng tôi để sử dụng Firebase thay vì sử

111
00:08:24,170 --> 00:08:31,610
dụng máy chủ Standard Express cộng với MongoDB mà chúng tôi đã xây dựng trước đó?

112
00:08:31,610 --> 00:08:38,440
Để cấu hình ứng dụng Angular của bạn để giao tiếp với Firebase Server,

113
00:08:38,440 --> 00:08:42,620
có hai mô-đun nút mà bạn cần phải cài đặt vào

114
00:08:42,620 --> 00:08:46,860
ứng dụng Angular của bạn và một trong số đó là mô-đun Firebase.

115
00:08:46,860 --> 00:08:49,730
Mô-đun Firebase như bạn thấy ở đây,

116
00:08:49,730 --> 00:08:55,190
cung cấp các công cụ và cơ sở hạ tầng cho phép bạn giao tiếp

117
00:08:55,190 --> 00:09:01,610
với máy chủ Firebase và cài đặt này vào ứng dụng của

118
00:09:01,610 --> 00:09:05,720
bạn, bạn gõ, npm cài đặt trừ đi lưu Firebase.

119
00:09:05,720 --> 00:09:07,610
Bây giờ cùng với điều này,

120
00:09:07,610 --> 00:09:11,395
có một mô-đun khác gọi là Angular Fire 2.

121
00:09:11,395 --> 00:09:13,725
Vì vậy, Angular Fire 2.

122
00:09:13,725 --> 00:09:20,535
Ngoài ra, một lần nữa tôi đã cung cấp các liên kết đến hai mô-đun này trong các nguồn lực bổ sung.

123
00:09:20,535 --> 00:09:23,795
AngularFire 2 là thư viện chính thức

124
00:09:23,795 --> 00:09:27,290
để hỗ trợ Firebase và Angular và như bạn có thể thấy,

125
00:09:27,290 --> 00:09:31,520
đó là một hỗ trợ dựa trên quan sát cho các tệp Angular.

126
00:09:31,520 --> 00:09:36,545
Vì vậy, điều này làm việc để thêm vào mô-đun npm Firebase và sau đó

127
00:09:36,545 --> 00:09:42,125
cung cấp cho bạn giao diện dựa trên quan sát mà chúng ta có thể sử dụng trong ứng dụng Angular của bạn.

128
00:09:42,125 --> 00:09:44,930
Vì vậy, chúng tôi sẽ tận dụng AngularFire 2.

129
00:09:44,930 --> 00:09:46,994
Vì vậy, để sử dụng AngularFire2,

130
00:09:46,994 --> 00:09:49,940
bạn cần phải cài đặt cả Firebase cũng như AngularFire 2.

131
00:09:49,940 --> 00:09:51,345
Vì vậy, trong một lần chụp,

132
00:09:51,345 --> 00:09:54,205
cài đặt cả hai này vào ứng dụng Angular của bạn.

133
00:09:54,205 --> 00:09:59,320
Bây giờ, phiên bản của ứng dụng Angular mà tôi đã cung cấp cho bạn tự động

134
00:09:59,320 --> 00:10:06,250
cài đặt cả hai như bạn sẽ thấy khi bạn kiểm tra tệp package.json.

135
00:10:06,250 --> 00:10:08,510
Bây giờ, làm thế nào để sử dụng hai,

136
00:10:08,510 --> 00:10:12,245
tôi sẽ minh họa rằng bằng cách nhanh chóng chạy bạn thông qua

137
00:10:12,245 --> 00:10:17,280
mã sửa đổi cho các dịch vụ và một vài thành phần mà chúng tôi

138
00:10:17,280 --> 00:10:19,955
sử dụng Firebase và AngularFire2

139
00:10:19,955 --> 00:10:23,135
để sửa đổi các ứng dụng Angular mà chúng tôi đã phát triển

140
00:10:23,135 --> 00:10:30,140
trước đó để sử dụng các Firebase server như phụ trợ như một dịch vụ.

141
00:10:30,140 --> 00:10:34,075
Để hiểu thêm về cách chúng tôi

142
00:10:34,075 --> 00:10:39,185
tận dụng Firebase và AngularFire 2 trong ứng dụng Angular của chúng tôi, điểm

143
00:10:39,185 --> 00:10:42,860
dừng đầu tiên của chúng tôi là ở tập tin package.json.

144
00:10:42,860 --> 00:10:45,025
Vì vậy, trong tập tin package.json,

145
00:10:45,025 --> 00:10:50,850
bạn sẽ nhận thấy rằng tôi đã cài đặt AngularFire2 ở đây và chúng tôi cũng đã cài đặt

146
00:10:50,850 --> 00:10:57,510
Firebase để sử dụng trong phiên bản này của ứng dụng Angular mà tôi cung cấp cho bạn.

147
00:10:57,510 --> 00:11:01,980
Vì vậy, lưu ý rằng hai điều này sẽ tự động được cài đặt khi bạn gõ “npm

148
00:11:01,980 --> 00:11:07,720
install” sau khi nhân bản kho git này mà tôi đã cung cấp cho bạn.

149
00:11:07,720 --> 00:11:11,220
Nếu bạn đang bắt đầu với một ứng dụng Angular mới,

150
00:11:11,220 --> 00:11:15,590
sau đó bạn nên cài đặt cả AngularFire 2 cũng như Firebase

151
00:11:15,590 --> 00:11:20,184
để tận dụng việc sử dụng Firebase làm phụ trợ như một dịch vụ.

152
00:11:20,184 --> 00:11:22,365
Bây giờ đã cài đặt hai cái này, chúng ta

153
00:11:22,365 --> 00:11:27,360
hãy tìm hiểu cách chúng tôi sử dụng những thứ này trong các dịch vụ của chúng tôi.

154
00:11:27,360 --> 00:11:30,030
Vì vậy, cách tốt nhất để tìm hiểu làm thế nào để sử dụng cả hai trong số

155
00:11:30,030 --> 00:11:33,640
này là truy cập một số dịch vụ mà chúng tôi đã

156
00:11:33,640 --> 00:11:36,930
cấu hình trong ứng dụng của chúng tôi và hiểu cách chúng tôi

157
00:11:36,930 --> 00:11:42,130
tận dụng việc sử dụng AngularFire2 và Firebase.

158
00:11:42,130 --> 00:11:46,235
Vì vậy, chúng tôi sẽ bắt đầu với tập tin dish.service.t.

159
00:11:46,235 --> 00:11:48,830
Vì vậy, nếu bạn đi đến tập tin dish.service.tes,

160
00:11:48,830 --> 00:11:51,095
bạn sẽ nhận thấy rằng ở đây,

161
00:11:51,095 --> 00:11:55,235
trong dịch vụ món ăn này,

162
00:11:55,235 --> 00:12:01,190
bạn sẽ thấy tôi nhập khẩu AngularFiRestore này, AngularFirestoreDocument,

163
00:12:01,190 --> 00:12:08,115
và AngularFirestoreCollection từ AngularFire để Firestore đây.

164
00:12:08,115 --> 00:12:16,680
Vì vậy, mà mang lại bất cứ điều gì tôi cần từ mô-đun npm AngularFiRestore của tôi,

165
00:12:16,680 --> 00:12:21,010
cũng bạn sẽ nhận thấy rằng tôi đang nhập khẩu tất cả mọi thứ từ

166
00:12:21,010 --> 00:12:27,615
FireBase/ứng dụng như Firebase vào dịch vụ món ăn của tôi ở đây.

167
00:12:27,615 --> 00:12:29,945
Vì vậy, một khi chúng tôi đã nhập khẩu hai loại này, chúng ta

168
00:12:29,945 --> 00:12:35,415
hãy xem xét cách chúng tôi cấu hình lại dịch vụ món ăn của chúng tôi ở đây.

169
00:12:35,415 --> 00:12:37,435
Vì vậy, nếu bạn đi vào dịch vụ món ăn,

170
00:12:37,435 --> 00:12:41,175
bạn sẽ nhận thấy rằng tôi không còn sử dụng HTTP client nữa.

171
00:12:41,175 --> 00:12:48,975
Thay vào đó, tôi đang tiêm AFS đó là AngularFiRestore vào constructor ở đây.

172
00:12:48,975 --> 00:12:51,520
AngularFiRestore là một trong đó cung cấp cho tôi

173
00:12:51,520 --> 00:12:55,815
truy cập vào các phụ trợ Firebase như một dịch vụ.

174
00:12:55,815 --> 00:13:01,785
Bây giờ, cũng nhớ lại rằng chúng tôi đã cấu hình tất cả các chi tiết của

175
00:13:01,785 --> 00:13:09,450
máy chủ của chúng tôi và cũng là dự án filestore trong file environment.ets trước đó.

176
00:13:09,450 --> 00:13:12,595
Vì vậy, bạn nên đã cấu hình thông tin này đã có

177
00:13:12,595 --> 00:13:16,180
về cách ứng dụng Angular của bạn nên tận dụng

178
00:13:16,180 --> 00:13:20,930
dự án dựa trên Firestore

179
00:13:20,930 --> 00:13:27,710
của bạn trên máy chủ Firestore để truy cập dữ liệu mà bạn đã cấu hình ở đó.

180
00:13:27,710 --> 00:13:32,290
Vì vậy, điều này sẽ cho tôi quyền truy cập vào đám mây của

181
00:13:32,290 --> 00:13:39,400
tôi Firestore trong dự án Firebase của tôi mà tôi đã thiết lập.

182
00:13:39,400 --> 00:13:43,410
Bây giờ, AuthService là tất nhiên cùng một Authservice mà chúng tôi đã sử dụng trước đây,

183
00:13:43,410 --> 00:13:51,175
nhưng nó đã sửa đổi để sử dụng hỗ trợ Angular cho Firebase.

184
00:13:51,175 --> 00:13:55,095
Chúng tôi sẽ truy cập AuthService để tìm hiểu cách nó đã được cập nhật.

185
00:13:55,095 --> 00:14:00,410
Bây giờ, AuthService sẽ cung cấp cho chúng ta quyền truy cập vào

186
00:14:00,410 --> 00:14:06,345
phương pháp này được gọi là GetAuthState mà sẽ trở lại trong một quan sát được.

187
00:14:06,345 --> 00:14:08,965
Điều này quan sát được, khi chúng tôi đăng ký nó,

188
00:14:08,965 --> 00:14:15,855
sẽ cung cấp cho chúng tôi thông tin như một người dùng có chứa thông tin của người dùng.

189
00:14:15,855 --> 00:14:21,465
Vì vậy, tôi sẽ có được điều đó và sau đó thiết lập CurrentUser trong ứng dụng của tôi

190
00:14:21,465 --> 00:14:28,995
như người dùng trả về bởi điều này quan sát được ở đây.

191
00:14:28,995 --> 00:14:30,699
Vì vậy, khi chúng tôi truy cập AuthService,

192
00:14:30,699 --> 00:14:33,085
chúng tôi sẽ tìm hiểu những gì GetAuthState này sẽ trở lại cho

193
00:14:33,085 --> 00:14:35,700
chúng tôi và do đó thông tin

194
00:14:35,700 --> 00:14:36,940
của CurrentUser có thể được lấy từ bất kỳ

195
00:14:36,940 --> 00:14:41,165
dịch vụ nào khác bởi vì chúng tôi đã tiêm AuthService ở đây.

196
00:14:41,165 --> 00:14:45,570
Bây giờ, chúng ta hãy xem làm thế nào phương pháp GetDishes được thực hiện ở đây.

197
00:14:45,570 --> 00:14:47,710
Bây giờ, trước đó trong phương pháp GetDishes,

198
00:14:47,710 --> 00:14:55,920
chúng tôi đã sử dụng HTTP client để truy cập vào máy chủ tại cơ sở URL+/Dishes.

199
00:14:55,920 --> 00:14:57,425
Bây giờ trong trường hợp này,

200
00:14:57,425 --> 00:15:07,255
để truy cập vào một bộ sưu tập trong máy chủ Firebase của tôi, chúng ta sẽ nói này.afs.

201
00:15:07,255 --> 00:15:10,710
Vì vậy, đây là những gì AngularFire2 cung cấp cho chúng tôi.

202
00:15:10,710 --> 00:15:16,345
AFS như bạn thấy là AngularFiRestore mà chúng tôi đã tiêm ở đây và vì vậy chúng tôi nói

203
00:15:16,345 --> 00:15:19,810
này.afs.collection và ở đây chúng tôi

204
00:15:19,810 --> 00:15:23,010
sẽ chỉ định bộ sưu tập cụ thể mà chúng tôi đang truy cập ở đây.

205
00:15:23,010 --> 00:15:26,315
Nhớ lại rằng chúng tôi đã thiết lập các món ăn, chương trình khuyến mãi,

206
00:15:26,315 --> 00:15:30,415
và các nhà lãnh đạo bộ sưu tập trên máy chủ Firebase của tôi.

207
00:15:30,415 --> 00:15:34,065
Vì vậy, điều này trực tiếp cho tôi truy

208
00:15:34,065 --> 00:15:38,595
cập vào bộ sưu tập món ăn của tôi ở đây và từ bộ sưu tập các món ăn,

209
00:15:38,595 --> 00:15:42,740
tôi có thể do.ValueChanges mà

210
00:15:42,740 --> 00:15:47,115
sẽ trả lại tất cả các thông tin trong bộ sưu tập kinh doanh cho tôi,

211
00:15:47,115 --> 00:15:50,440
hoặc tôi có thể làm.SnapshotChanges mà sẽ

212
00:15:50,440 --> 00:15:53,990
trả lại thông tin bổ sung bao gồm cả ID của các món ăn.

213
00:15:53,990 --> 00:15:56,660
Vì vậy, nếu thay vì làm SnapShotChanges,

214
00:15:56,660 --> 00:15:59,310
nếu tôi nói ValueChanges,

215
00:15:59,310 --> 00:16:03,110
nó sẽ chỉ trả lại thông tin món ăn nhưng nó sẽ không trả lại

216
00:16:03,110 --> 00:16:07,890
ID của các món ăn nhưng vì tôi sẽ cần ID của món ăn của tôi, vì

217
00:16:07,890 --> 00:16:13,335
vậy đó là lý do tại sao tôi đang sử dụng .SnapShotChanges trong trường hợp này.

218
00:16:13,335 --> 00:16:16,090
Vì vậy, khi.SnapshotChanges được gọi là,

219
00:16:16,090 --> 00:16:19,505
điều này sẽ trở lại khi bạn thấy một quan sát được mà

220
00:16:19,505 --> 00:16:27,195
tôi ánh xạ và do đó giá trị trả về được gọi là hành động và những hành động này, một

221
00:16:27,195 --> 00:16:31,800
lần nữa, sẽ là một quan sát được mà tôi sẽ ánh xạ mỗi hành động trong

222
00:16:31,800 --> 00:16:38,930
hành động này và sau đó trích xuất dữ liệu từ hành động đó là quay trở lại đây.

223
00:16:38,930 --> 00:16:44,525
Vì vậy, hành động là một giá trị được trả về từ cho mỗi hành động

224
00:16:44,525 --> 00:16:50,765
và hành động này chứa một trọng tải và chứa bên trong đó một trường tối ở đây.

225
00:16:50,765 --> 00:16:53,200
Bây giờ, đây là một cái gì đó mà tôi đã tìm ra bằng cách đọc

226
00:16:53,200 --> 00:16:57,010
tài liệu cho AngularFire2 và

227
00:16:57,010 --> 00:17:03,705
vì vậy khi chúng tôi gọi chức năng dữ liệu này trên hành động.payload.doc

228
00:17:03,705 --> 00:17:05,875
này, điều này sẽ cung cấp cho tôi dữ liệu.

229
00:17:05,875 --> 00:17:09,510
Dữ liệu cho món ăn cụ thể đó

230
00:17:09,510 --> 00:17:14,160
thu được từ bộ sưu tập món ăn của tôi ở phía máy chủ.

231
00:17:14,160 --> 00:17:18,760
Vì vậy, mỗi tài liệu trong đó sẽ được trả lại ở đây và

232
00:17:18,760 --> 00:17:24,205
sau đó tôi có được ID cho rằng bằng cách nói action.payload.doc.id

233
00:17:24,205 --> 00:17:27,855
Vì vậy, đó là nơi ID của nó sẽ được

234
00:17:27,855 --> 00:17:32,030
thực hiện và sau đó tôi sẽ tham gia hai với nhau và trả lại

235
00:17:32,030 --> 00:17:40,035
điều này như một tài liệu món ăn trở lại các thành phần khác nhau của tôi từ đó,

236
00:17:40,035 --> 00:17:42,150
tôi sẽ gọi phương pháp GetDishes này.

237
00:17:42,150 --> 00:17:43,345
Vì vậy, như bạn nhớ lại,

238
00:17:43,345 --> 00:17:44,690
từ thành phần menu,

239
00:17:44,690 --> 00:17:47,400
tôi đang gọi phương pháp getDishes để có được

240
00:17:47,400 --> 00:17:51,090
thông tin về tất cả các món ăn trong bộ sưu tập của tôi.

241
00:17:51,090 --> 00:17:58,505
Bộ sưu tập. Vì vậy, mỗi món ăn được trả về như là một doc sẽ được xây dựng lại thành

242
00:17:58,505 --> 00:18:03,420
một đối tượng JavaScript với ID được chèn vào đây và cũng

243
00:18:03,420 --> 00:18:09,540
là dữ liệu được trích xuất từ hành động này payload.doc.data.

244
00:18:09,540 --> 00:18:16,455
Bây giờ đây là một cái gì đó mà bạn học bằng cách đọc tài liệu của AngularFire2.

245
00:18:16,455 --> 00:18:19,470
Bây giờ, kể từ khi tôi đã thực hiện phần đó,

246
00:18:19,470 --> 00:18:22,755
tôi đang cho bạn thấy mã chính xác mà bạn đang phải

247
00:18:22,755 --> 00:18:26,160
sử dụng để trích xuất dữ liệu và sau đó cung cấp

248
00:18:26,160 --> 00:18:33,500
dữ liệu này trở lại thành phần của bạn mà sẽ gọi phương pháp getDishes ở đây.

249
00:18:33,500 --> 00:18:37,090
Vì vậy, bằng cách làm điều này cho mỗi tài liệu ở đó, tài

250
00:18:37,090 --> 00:18:39,180
liệu này sẽ được xây dựng lại

251
00:18:39,180 --> 00:18:44,800
đối tượng món ăn mà chúng tôi

252
00:18:44,800 --> 00:18:51,500
sử dụng trong ứng dụng Angular của chúng tôi và vì vậy chúng tôi thậm chí có thể truy cập vào ID.

253
00:18:51,500 --> 00:18:53,365
Nếu bạn chỉ thực hiện thay đổi giá trị,

254
00:18:53,365 --> 00:18:59,825
nó sẽ chỉ đơn giản là trả lại tất cả các tài liệu mà không có ID của tài liệu.

255
00:18:59,825 --> 00:19:04,920
Vì vậy, công việc bổ sung này cần phải được thực hiện trong dịch vụ của bạn để

256
00:19:04,920 --> 00:19:07,835
trả lại thông tin một cách đúng đắn để

257
00:19:07,835 --> 00:19:10,865
MyComponents có thể sử dụng thông tin này.

258
00:19:10,865 --> 00:19:13,370
Tương tự như vậy, đối với một phương pháp GetDish,

259
00:19:13,370 --> 00:19:17,695
vì vậy hãy lưu ý cách tôi truy cập thông tin cho một món ăn cụ thể.

260
00:19:17,695 --> 00:19:22,020
Một lần nữa, chúng ta sẽ nói này.afs và sau đó bạn sẽ nhận thấy rằng tôi

261
00:19:22,020 --> 00:19:26,660
saying.doc và sau đó ở đây cho phương pháp the.doc,

262
00:19:26,660 --> 00:19:32,650
tôi cung cấp các món ăn slash và sau đó ID của các món ăn cụ thể.

263
00:19:32,650 --> 00:19:35,150
Bây giờ, lý do tại sao tôi đã cung cấp ID,

264
00:19:35,150 --> 00:19:39,350
ID ở đây là tham số cho phương pháp GetDish ở đây.

265
00:19:39,350 --> 00:19:41,985
Bây giờ, để ID này được cung cấp,

266
00:19:41,985 --> 00:19:44,450
tôi cần phải có khả năng cung cấp ID đó trong

267
00:19:44,450 --> 00:19:47,480
phương pháp getDishes để khi trình đơn của tôi được xây dựng,

268
00:19:47,480 --> 00:19:51,205
mỗi món ăn sẽ có ID của nó gắn vào nó ở đó.

269
00:19:51,205 --> 00:19:56,575
ID đó được thông qua ở đây và vì vậy tôi sẽ truy cập tài liệu vào thời điểm này.

270
00:19:56,575 --> 00:20:01,260
Vì vậy, AngularFire2 cho phép bạn truy cập

271
00:20:01,260 --> 00:20:07,125
một tài liệu cụ thể mà là bên trong một bộ sưu tập bằng cách nói tên bộ sưu tập dấu gạch chéo,

272
00:20:07,125 --> 00:20:15,430
cộng với ID tài liệu hoặc bạn có thể nói điều này.afs.collection món ăn giống như bạn đã nghe,

273
00:20:15,430 --> 00:20:22,540
bộ sưu tập các món ăn và then.doc và sau đó cung cấp doc và ID bên trong dấu ngoặc đơn ở đó.

274
00:20:22,540 --> 00:20:26,725
Vì vậy, đó là một cách khác để giải quyết một món ăn cụ thể.

275
00:20:26,725 --> 00:20:32,680
Một lần nữa, tôi đăng ký SnapsHotChanges và điều này sẽ trả về một hành động mà sau đó được

276
00:20:32,680 --> 00:20:35,480
ánh xạ một lần nữa trong cùng một định dạng để

277
00:20:35,480 --> 00:20:39,495
xây dựng đối tượng món ăn ở đây cùng với ID ở đây.

278
00:20:39,495 --> 00:20:42,410
Bây giờ, Firebase giữ ID riêng biệt với tài liệu

279
00:20:42,410 --> 00:20:46,300
chính nó và vì vậy đó là lý do tại sao tôi phải rõ ràng làm

280
00:20:46,300 --> 00:20:49,010
tái thiết này để có được

281
00:20:49,010 --> 00:20:54,750
các tài liệu món ăn trong một cách có thể sử dụng bởi MyComponents.

282
00:20:54,750 --> 00:20:59,660
Sau đó, tôi xây dựng máy chủ của riêng tôi bằng cách sử dụng Express và MongoDB,

283
00:20:59,660 --> 00:21:03,995
ID tự động đã có trong tài liệu chính nó và vì vậy nó rất

284
00:21:03,995 --> 00:21:09,235
dễ dàng để lấy lại và cung cấp nó trở lại phía khách hàng.

285
00:21:09,235 --> 00:21:13,610
Bây giờ, đối với GetFeaturedDish, hãy

286
00:21:13,610 --> 00:21:15,620
nhớ lại rằng đối với GetFeaturedDish,

287
00:21:15,620 --> 00:21:20,870
chúng tôi đang tìm kiếm những món ăn mà tính năng được đặt thành true.

288
00:21:20,870 --> 00:21:25,790
Bây giờ, đây là nơi AngularFire2 cho phép chúng ta

289
00:21:25,790 --> 00:21:31,180
xây dựng một truy vấn và cung cấp truy vấn đó ở đây cho bộ sưu tập đó.

290
00:21:31,180 --> 00:21:36,440
Ở đây tôi đang nói điều này.afs bộ sưu tập món ăn ở đây,

291
00:21:36,440 --> 00:21:39,520
vì vậy tôi vẫn đang sử dụng bộ sưu tập nhưng sau đó nhìn

292
00:21:39,520 --> 00:21:43,140
vào tham số thứ hai cho cuộc gọi này ở đây.

293
00:21:43,140 --> 00:21:49,405
Điều này nói ref nơi ref đề cập đến mỗi tài liệu trong bộ sưu tập này.

294
00:21:49,405 --> 00:21:53,330
ref này nói ref và đây là nơi tôi có thể

295
00:21:53,330 --> 00:21:58,100
sử dụng truy vấn này thiết lập nghe để nói.where.

296
00:21:58,100 --> 00:22:04,695
Vì vậy, có nghĩa là mỗi một trong những tài liệu mà các đặc trưng,

297
00:22:04,695 --> 00:22:10,445
như bạn có thể thấy, cú pháp là khá dễ dàng để làm theo ở đây mà nói nơi đặc trưng.

298
00:22:10,445 --> 00:22:15,240
Bây giờ, nhận thấy rằng tính năng được cung cấp như một chuỗi ở đây,

299
00:22:15,240 --> 00:22:17,175
và sau đó một trong những tiếp theo,

300
00:22:17,175 --> 00:22:22,230
các nhà điều hành là bằng vì vậy bạn thậm chí có thể nói

301
00:22:22,230 --> 00:22:25,345
lớn hơn, nhỏ hơn, lớn hơn hoặc bằng nhỏ hơn hoặc bằng bất kỳ một trong những điều này,

302
00:22:25,345 --> 00:22:30,375
nhưng chú ý rằng đó nên được bên trong trích dẫn ở đây và sau đó bạn sẽ nói đúng.

303
00:22:30,375 --> 00:22:35,105
Vì vậy, bất cứ nơi nào thuộc tính đặc trưng của tài liệu được đặt thành true,

304
00:22:35,105 --> 00:22:36,620
trích xuất tất cả những tài liệu đó.

305
00:22:36,620 --> 00:22:40,545
Vì vậy, truy vấn này sẽ trích xuất chỉ những tài liệu

306
00:22:40,545 --> 00:22:45,250
từ bộ sưu tập món ăn nơi tính năng được thiết lập thành true,

307
00:22:45,250 --> 00:22:50,195
và sau đó chỉ trả về những tài liệu từ bộ sưu tập đó ở đây,

308
00:22:50,195 --> 00:22:53,770
và từ đó tôi sẽ thay đổi ảnh chụp và điều này sẽ

309
00:22:53,770 --> 00:22:59,350
trả về một mảng các tài liệu và từ đó tôi sẽ ánh xạ chúng

310
00:22:59,350 --> 00:23:04,270
vào tài liệu món ăn cá nhân và sau đó kể từ khi tôi đã

311
00:23:04,270 --> 00:23:09,700
đảm bảo rằng chỉ có một trong những tài liệu đó sẽ có tính năng được thiết lập thành true.

312
00:23:09,700 --> 00:23:13,030
Vì vậy, nó sẽ trả lại chỉ một trong số họ nhưng nó sẽ trả lại nó như là một mảng.

313
00:23:13,030 --> 00:23:14,980
Vì vậy, đó là lý do tại sao tôi xây dựng này

314
00:23:14,980 --> 00:23:20,195
với khung vuông zero phần tử đầu tiên của mảng,

315
00:23:20,195 --> 00:23:25,210
và thực sự nó sẽ chứa chỉ có một phần tử bởi vì chỉ có một phần tử trong bộ sưu tập của tôi

316
00:23:25,210 --> 00:23:30,745
sẽ phù hợp với truy vấn đặc biệt này mà tôi đã thiết lập ở đây với sóng ở đây.

317
00:23:30,745 --> 00:23:36,470
Có các thiết lập truy vấn khác ở đây bạn cũng có thể sử dụng một cái gì đó gọi là thứ tự của.

318
00:23:36,470 --> 00:23:41,000
Vì vậy, bạn có thể đặt hàng bộ sưu tập theo một thuộc tính nhất định

319
00:23:41,000 --> 00:23:47,310
và một số tập hợp các tùy chọn truy vấn khác có sẵn.

320
00:23:47,310 --> 00:23:51,480
Bây giờ, điều này được hỗ trợ bởi Firebase trên đám mây của nó Firestore,

321
00:23:51,480 --> 00:23:56,890
và đó là những gì chúng ta có thể tận dụng bằng cách sử dụng AngularFire2 để thiết kế

322
00:23:56,890 --> 00:24:03,850
mã trong ứng dụng Angular của bạn để thực hiện các truy vấn từ phía khách hàng chính nó.

323
00:24:03,850 --> 00:24:09,280
Vì vậy, điều này sẽ trả lại các món ăn tính năng cụ thể.

324
00:24:09,360 --> 00:24:15,355
Bây giờ, một lần nữa GetDishid sẽ được tương tự như những gì chúng tôi đã làm trước đó.

325
00:24:15,355 --> 00:24:16,890
Vì vậy, không có sửa đổi ở đó.

326
00:24:16,890 --> 00:24:21,370
Bây giờ, cho PostComment một lần nữa

327
00:24:21,370 --> 00:24:27,820
bởi vì Firebase với đám mây Firestore beta,

328
00:24:27,820 --> 00:24:31,720
không có khái niệm về dân số,

329
00:24:31,720 --> 00:24:34,015
và như vậy, chúng ta đã thấy trước đó.

330
00:24:34,015 --> 00:24:39,890
Vì vậy, những gì tôi sẽ làm cho các ý kiến là tôi sẽ đăng những ý kiến này như

331
00:24:39,890 --> 00:24:46,140
một bộ sưu tập mà được kèm theo bên trong mỗi món ăn chính nó.

332
00:24:46,140 --> 00:24:52,040
Vì vậy, mỗi món ăn sẽ có bộ sưu tập ý kiến riêng về món ăn cụ thể đó.

333
00:24:52,040 --> 00:24:54,965
Khi tôi đăng bình luận tôi sẽ sử dụng DisHid,

334
00:24:54,965 --> 00:24:57,905
và sau đó là thông tin bình luận.

335
00:24:57,905 --> 00:25:01,735
Vì vậy, những gì tôi làm ở đây là đầu tiên tôi sẽ

336
00:25:01,735 --> 00:25:07,175
truy vấn các món ăn và sau đó có được món ăn đặc biệt đó.

337
00:25:07,175 --> 00:25:11,555
Vì vậy, bạn có thể thấy rằng tôi đang sử dụng cách khác để truy vấn cho một tài liệu cụ thể.

338
00:25:11,555 --> 00:25:16,070
Vì vậy, ở đây tôi đang nói điều này afs.collection ('món ăn ') .doc disHid.

339
00:25:16,440 --> 00:25:22,660
Vì vậy, tôi có thể sử dụng cách này để truy cập vào một tài liệu cụ thể nếu tôi muốn.

340
00:25:22,660 --> 00:25:25,610
Cách khác tất nhiên bạn đã thấy đã có với

341
00:25:25,610 --> 00:25:33,375
phương pháp GetDish nơi tôi nói món ăn doc slash cộng với ID.

342
00:25:33,375 --> 00:25:38,185
Vì vậy, hai cách khác nhau để giải quyết một tài liệu cụ thể bên trong

343
00:25:38,185 --> 00:25:44,460
một bộ sưu tập ở đây và sau đó DisHid và sau đó thu thập và bình luận.

344
00:25:44,460 --> 00:25:46,840
Vì vậy, theo cách này nó nói trong

345
00:25:46,840 --> 00:25:51,100
bộ sưu tập này cho tài liệu cụ thể này với DisHid rằng,

346
00:25:51,100 --> 00:25:54,140
có một bộ sưu tập được bao gồm trong

347
00:25:54,140 --> 00:25:57,180
tài liệu này và bộ sưu tập đó có các ý kiến tên.

348
00:25:57,180 --> 00:25:59,660
Vì vậy, đây là một lồng của một bộ sưu tập

349
00:25:59,660 --> 00:26:03,125
bên trong một tài liệu mà là trong một kết nối cấp cao hơn.

350
00:26:03,125 --> 00:26:07,110
Vì vậy, loại lồng các bộ sưu tập này được

351
00:26:07,110 --> 00:26:13,590
Firebase Cloud Store Beta cho phép lên đến 100 cấp độ sâu nếu bạn muốn chọn.

352
00:26:13,590 --> 00:26:15,700
Vì vậy, bên trong bộ sưu tập này,

353
00:26:15,700 --> 00:26:17,420
tôi sẽ thêm vào.

354
00:26:17,420 --> 00:26:20,310
Vì vậy, làm thế nào để bạn thêm một tài liệu vào một bộ sưu tập?

355
00:26:20,310 --> 00:26:22,105
Để thêm tài liệu vào bộ sưu tập của

356
00:26:22,105 --> 00:26:24,755
bạn, bạn sử dụng phương pháp thêm vào bộ sưu tập ở đây.

357
00:26:24,755 --> 00:26:27,600
Vì vậy, bạn có thể thấy rằng trên các ý kiến bộ sưu tập,

358
00:26:27,600 --> 00:26:30,380
tôi đang làm một add ở đây và sau đó đây

359
00:26:30,380 --> 00:26:33,655
là tài liệu thực tế sẽ được thêm vào ở đây.

360
00:26:33,655 --> 00:26:35,280
Vì vậy, trong tài liệu chính nó,

361
00:26:35,280 --> 00:26:40,645
bạn sẽ thấy rằng tôi có tài sản tác giả ở đây, nơi tôi đã thiết lập ID hiện tại,

362
00:26:40,645 --> 00:26:44,665
và tôi cũng thiết lập tên đầu tiên cho tác giả ở đây,

363
00:26:44,665 --> 00:26:50,885
tôi chỉ phục vụ lần đầu tiên ở đây vì vậy ở đây tôi nói tên hiển thị người dùng hiện tại này.

364
00:26:50,885 --> 00:26:55,625
Nếu tên hiển thị là đúng thì tôi sẽ đặt nó thành tên hiển thị người dùng hiện tại này.

365
00:26:55,625 --> 00:27:00,960
Nếu tài khoản của người dùng không có tên hiển thị như đính kèm với nó thì tôi sẽ chỉ đơn giản

366
00:27:00,960 --> 00:27:06,420
sử dụng email người dùng hiện tại này làm thuộc tính tên đầu tiên ở đây.

367
00:27:06,420 --> 00:27:11,035
Vì vậy, tài liệu này có chứa bình luận,

368
00:27:11,035 --> 00:27:13,150
tự động cũng mang trường tên đầu tiên này

369
00:27:13,150 --> 00:27:16,140
và đó là những gì tôi sẽ được sử dụng để hiển thị

370
00:27:16,140 --> 00:27:22,495
thông tin khi tôi hiển thị các ý kiến trong thành phần DishDetail của tôi.

371
00:27:22,495 --> 00:27:28,710
Vì vậy, chú ý rằng tôi đang thực sự sao chép thông tin ở đây trong mỗi ý kiến.

372
00:27:28,710 --> 00:27:31,865
Nhưng không sao, vì chúng được lưu trữ dưới dạng

373
00:27:31,865 --> 00:27:34,160
tài liệu Json trên Firebase, bạn có thể sao

374
00:27:34,160 --> 00:27:36,990
chép một số thông tin trong các ý kiến ở đây.

375
00:27:36,990 --> 00:27:40,245
Nhưng nếu bạn muốn biết thêm chi tiết về người dùng hiện tại,

376
00:27:40,245 --> 00:27:45,280
bạn đã có một tham chiếu đến id của người dùng ở đây để bạn có thể thực sự đi và lấy

377
00:27:45,280 --> 00:27:48,150
tài liệu cho người dùng cụ thể và sau đó

378
00:27:48,150 --> 00:27:51,485
có được thêm thông tin về người dùng nên bạn chọn.

379
00:27:51,485 --> 00:27:54,830
Bây giờ, khi tôi sử dụng Mongo DB cộng với Mongo,

380
00:27:54,830 --> 00:27:57,950
bạn thấy rằng tôi sẽ chỉ sử dụng ID của người dùng hiện tại cho

381
00:27:57,950 --> 00:28:01,650
tác giả và sau đó tôi sẽ sử dụng populate để điền thông tin này.

382
00:28:01,650 --> 00:28:05,150
Bây giờ Cloud Firestore beta tại thời điểm này không có

383
00:28:05,150 --> 00:28:10,240
bất kỳ khái niệm này cư trú như xa như tôi có thể nhìn thấy từ các tài liệu, có

384
00:28:10,240 --> 00:28:14,335
lẽ một phiên bản tương lai có thể hỗ trợ một cách để kéo

385
00:28:14,335 --> 00:28:16,800
thông tin từ một tài liệu khác và

386
00:28:16,800 --> 00:28:19,270
tự động điền nó vào tài liệu hiện tại.

387
00:28:19,270 --> 00:28:24,500
Khi điều đó xảy ra, sau đó mã này sẽ phải được sửa đổi để tận dụng lợi thế của điều đó.

388
00:28:24,500 --> 00:28:26,725
Nhưng ngay bây giờ như tôi thấy nó,

389
00:28:26,725 --> 00:28:29,560
Firestore beta không có khả năng để

390
00:28:29,560 --> 00:28:33,000
điền thông tin từ một tài liệu khác vào tài liệu hiện tại.

391
00:28:33,000 --> 00:28:36,040
Vì vậy, đó là lý do tại sao tôi chỉ sao chép phần

392
00:28:36,040 --> 00:28:39,860
thông tin mà tôi thực sự cần khi tôi đưa ra nhận xét trong

393
00:28:39,860 --> 00:28:43,660
thành phần dishdetail của tôi ở đây và sau đó xuống dưới

394
00:28:43,660 --> 00:28:47,945
đây bạn có thể thấy rằng tôi có đánh giá và nhận xét ở đây và sau đó cũng có thể,

395
00:28:47,945 --> 00:28:49,740
lưu ý rằng tôi đang tạo ra

396
00:28:49,740 --> 00:28:57,370
hai các trường bổ sung trong bình luận của tôi ở đây được gọi là “CreateDat” và “UpdateDat”.

397
00:28:57,370 --> 00:29:01,785
Chú ý làm thế nào tôi đang đặt dấu thời gian cho “CreateDat”.

398
00:29:01,785 --> 00:29:05,785
Firebase, bây giờ Firebase này là gì tôi đang sử dụng ở đây,

399
00:29:05,785 --> 00:29:12,050
Firebase này là chính xác những gì tôi nhập khẩu ở đây như từ ứng dụng Firebase.

400
00:29:12,050 --> 00:29:15,850
Vì vậy, mà cung cấp cho tôi như bạn nhìn thấy ở đây dưới đây,

401
00:29:15,850 --> 00:29:20,395
cung cấp cho tôi với giá trị này Firestore lĩnh vực này.

402
00:29:20,395 --> 00:29:25,260
Vì vậy, cuộc gọi này đến các giá trị trường firestorm máy chủ timestamp,

403
00:29:25,260 --> 00:29:28,390
sẽ trả về dấu thời gian hiện tại cho

404
00:29:28,390 --> 00:29:32,605
tôi và đó là thông tin mà tôi sẽ được lưu trữ trong “CreateDat”.

405
00:29:32,605 --> 00:29:35,255
Bây giờ, khi tôi chèn tất cả các tài liệu ở đây,

406
00:29:35,255 --> 00:29:40,435
bạn thấy rằng tôi tự tạo ra trường “CreateDat” này cho mỗi tài liệu.

407
00:29:40,435 --> 00:29:44,110
Bây giờ đây là một cách làm tương tự từ bên

408
00:29:44,110 --> 00:29:47,895
trong mã góc của chúng

409
00:29:47,895 --> 00:29:53,040
tôi ở phía khách hàng của chúng tôi và điều tương tự cho trường “UpdateDat” mà bạn sẽ thấy ở đây.

410
00:29:53,040 --> 00:29:55,270
Vì vậy, khi bạn đăng một nhận xét mới,

411
00:29:55,270 --> 00:30:00,330
bạn sẽ thấy rằng đây là cách bạn sẽ thêm một nhận xét mới vào máy chủ đó.

412
00:30:00,330 --> 00:30:03,630
Bây giờ, điều này trả về một lời hứa và đó là thông tin

413
00:30:03,630 --> 00:30:07,410
mà tôi đang sử dụng ở đây để xây dựng lời hứa này ở đây.

414
00:30:07,410 --> 00:30:10,930
Sau đó, phương pháp khác này ở đây nói “GetComments”,

415
00:30:10,930 --> 00:30:16,930
điều này “GetComments như bạn có thể thấy nó đang truy cập AFS bộ sưu tập món ăn,

416
00:30:16,930 --> 00:30:22,420
doc disHid và sau đó thu thập ý kiến và thông báo rằng ở đây,

417
00:30:22,420 --> 00:30:26,580
Tôi sẽ không yêu cầu mỗi ý kiến ID

418
00:30:26,580 --> 00:30:31,220
chính nó mà tôi sẽ không được sử dụng trong góc của tôi kiến nghị nào,

419
00:30:31,220 --> 00:30:33,230
vì vậy thay vì sử dụng thay đổi ảnh chụp,

420
00:30:33,230 --> 00:30:36,285
tôi chỉ sử dụng thay đổi giá trị và điều này sẽ trả lại

421
00:30:36,285 --> 00:30:42,170
tất cả các tài liệu trong bộ sưu tập ý kiến này cho tài liệu cụ thể

422
00:30:42,170 --> 00:30:47,455
DisHid từ bộ sưu tập món ăn ở đây và đó sẽ được trả lại

423
00:30:47,455 --> 00:30:53,320
và những ý kiến tôi sẽ vẽ trong thành phần món ăn của tôi.

424
00:30:53,320 --> 00:30:58,210
Bây giờ, trong Mongos, bạn thấy rằng thực tế

425
00:31:02,920 --> 00:31:05,740
là tôi bao gồm userID có nghĩa là tôi có thể làm giao hợp thông tin này bây giờ với Firebase, không có cách nào để điền thông tin phổ biến ở đây,

426
00:31:05,740 --> 00:31:10,870
vì vậy đó là lý do tại sao tôi rõ ràng đi và sau đó điền các ý kiến trong

427
00:31:11,210 --> 00:31:15,250
dishdetail của tôi để lấy tất cả các ý kiến về

428
00:31:15,250 --> 00:31:20,000
món ăn đặc biệt này khi tôi làm cho chúng trong thành phần dishdetail.

429
00:31:20,000 --> 00:31:22,830
Vì vậy, bạn thấy, rằng tôi đã phải điều chỉnh

430
00:31:22,830 --> 00:31:26,480
mã góc một chút để đối phó với thực tế là

431
00:31:26,480 --> 00:31:29,765
Firebase không hỗ trợ những điều mà mongos hỗ trợ

432
00:31:29,765 --> 00:31:33,605
ít nhất tại thời điểm Cloud Firestore beta không hỗ trợ những điều này,

433
00:31:33,605 --> 00:31:38,420
và vì vậy tôi đã phải làm việc xung quanh để đối phó với những gì Firebase cho

434
00:31:38,420 --> 00:31:45,365
phép tôi lưu trữ và truy xuất từ trang web máy chủ Firebase.

435
00:31:45,365 --> 00:31:51,640
Bây giờ, nó cũng là thú vị cho chúng tôi để nhanh chóng truy cập vào dịch vụ Auth ở đây.

436
00:31:51,640 --> 00:31:54,060
Dịch vụ Auth ở đây một lần nữa,

437
00:31:54,060 --> 00:31:59,875
nhận thấy rằng trong dịch vụ Auth ở đây tôi đang nhập khẩu AngularFireAuth này từ

438
00:31:59,875 --> 00:32:06,435
AngularFire để npm submodule ở đây.

439
00:32:06,435 --> 00:32:11,005
Vì vậy, ở đây bạn có thể thấy rằng tôi đang nhập khẩu AngularFireAuth và điều này

440
00:32:11,005 --> 00:32:15,970
cho phép tôi truy cập vào các khía cạnh xác thực của Firebase.

441
00:32:15,970 --> 00:32:21,690
Bây giờ, chúng ta hãy xem cách xác thực Firebase thực sự hoạt động từ ứng dụng Angular của chúng tôi.

442
00:32:21,690 --> 00:32:26,300
Bây giờ chúng ta sẽ bắt đầu bằng cách nhìn vào cách đăng nhập được thực hiện.

443
00:32:26,300 --> 00:32:28,775
Vì vậy, đây là nơi tôi thực hiện đăng nhập,

444
00:32:28,775 --> 00:32:31,420
nơi tôi đang sử dụng email và mật khẩu.

445
00:32:31,420 --> 00:32:38,090
Vì vậy, phần này khi tôi nhập AngularFireAuth ở đây,

446
00:32:38,090 --> 00:32:44,910
lưu ý rằng các constructor tôi đang tiêm AngularFireAuth vào constructor của tôi.

447
00:32:44,910 --> 00:32:47,260
Vì vậy, điều này sẽ tiêm dịch vụ AngularFireAuth

448
00:32:47,260 --> 00:32:50,240
vào constructor của tôi và điều này cho phép tôi truy cập

449
00:32:50,240 --> 00:32:55,975
vào xác thực Firebase trên trang web máy chủ để tôi có thể xác thực người dùng.

450
00:32:55,975 --> 00:33:01,555
Vì vậy, nếu tôi muốn xác thực một người dùng đang đăng nhập bằng email và mật khẩu.

451
00:33:01,555 --> 00:33:04,490
Chức năng đăng nhập này là một trong đó sẽ được gọi

452
00:33:04,490 --> 00:33:07,300
khi tôi gõ vào email và mật khẩu của tôi

453
00:33:07,300 --> 00:33:10,110
trong hộp thoại đăng nhập mà tôi bật lên và sau đó

454
00:33:10,110 --> 00:33:13,735
nhấp vào nút gửi hoặc nút đăng nhập ở đây,

455
00:33:13,735 --> 00:33:16,120
chức năng đăng nhập này sẽ được gọi và

456
00:33:16,120 --> 00:33:20,845
thông tin người dùng nhưng tôi lấy từ thành phần đăng nhập được thông qua ở đây.

457
00:33:20,845 --> 00:33:22,985
Vì vậy, khi nói đến đây,

458
00:33:22,985 --> 00:33:29,410
tôi sẽ sử dụng AfAuth này như bạn thấy tôi chỉ cần tiêm nó vào constructor,

459
00:33:29,410 --> 00:33:33,995
và điều này cung cấp đối tượng Auth này ở đây,

460
00:33:33,995 --> 00:33:38,715
mà cung cấp phương pháp này được gọi là “đăng nhập với email và mật khẩu”.

461
00:33:38,715 --> 00:33:43,530
Vì vậy, đăng nhập này bằng email và mật khẩu có hai tham số ở đây như bạn mong

462
00:33:43,530 --> 00:33:49,495
đợi tên người dùng của người dùng hoặc email và mật khẩu ở đây.

463
00:33:49,495 --> 00:33:53,310
Vì vậy, hai mảnh thông tin tôi cung cấp

464
00:33:53,310 --> 00:33:57,290
nó như là hai tham số để đăng nhập này với email và mật khẩu.

465
00:33:57,290 --> 00:33:59,965
Vì vậy, khi bạn nhấp vào đó bạn sẽ thấy rằng nó

466
00:33:59,965 --> 00:34:03,790
nói rằng một trong những đầu tiên nên là email và một trong những thứ hai nên là mật khẩu.

467
00:34:03,790 --> 00:34:05,455
Bây giờ cách tôi đã thiết lập nó,

468
00:34:05,455 --> 00:34:09,590
đối tượng người dùng này đang đến trong chứa email trong

469
00:34:09,590 --> 00:34:16,735
user.username ở đây và mật khẩu trong thuộc tính mật khẩu của đối tượng người dùng.

470
00:34:16,735 --> 00:34:18,925
Vì vậy, khi đó là thu được,

471
00:34:18,925 --> 00:34:24,670
sau đó tôi sẽ đăng thông tin này và sau đó vì vậy khi điều này được hoàn thành thành công, có

472
00:34:24,670 --> 00:34:27,430
nghĩa là người dùng được đăng nhập đúng cách,

473
00:34:27,430 --> 00:34:29,075
nếu có một lỗi,

474
00:34:29,075 --> 00:34:31,510
sau đó bạn bắt lỗi ở đây ngay bây giờ tôi

475
00:34:31,510 --> 00:34:33,960
không làm bất cứ điều gì cụ thể với lỗi bạn có thể

476
00:34:33,960 --> 00:34:38,820
muốn in ra thông báo lỗi này để chỉ ra rằng người dùng không thể đăng nhập và như vậy.

477
00:34:38,820 --> 00:34:42,070
Vì vậy, tôi đã không thực hiện một phần của thỏa thuận ở đây,

478
00:34:42,070 --> 00:34:45,390
Tôi chỉ để lại nó ngay ở đó nếu bạn muốn giao diện điều khiển đăng nhập

479
00:34:45,390 --> 00:34:48,740
thông tin này, bạn có thể làm điều đó khi lỗi xảy ra.

480
00:34:48,740 --> 00:34:51,495
Bây giờ để đăng xuất, trong Firebase.

481
00:34:51,495 --> 00:34:56,610
Một lần nữa chúng tôi lấy sự giúp đỡ của AFAuth mà chúng tôi đã tiêm và Auth vào nó,

482
00:34:56,610 --> 00:34:58,975
và điều này cung cấp phương pháp này được gọi là “đăng xuất”,

483
00:34:58,975 --> 00:35:01,815
mà khi được gọi là sẽ đăng xuất hiện tại đăng nhập

484
00:35:01,815 --> 00:35:05,610
người dùng và do đó đó là một cách xử lý này.

485
00:35:05,610 --> 00:35:09,795
Bây giờ, bạn phải tự hỏi làm thế nào tôi xử lý phần đăng nhập của Google.

486
00:35:09,795 --> 00:35:17,980
Bây giờ điều này cũng được xử lý với AFAuth để các mô-đun AngularFire2 mà tôi đang sử dụng,

487
00:35:17,980 --> 00:35:22,780
cung cấp thông tin này cho các phương pháp này cho chúng tôi thông qua

488
00:35:22,780 --> 00:35:28,880
các mô-đun Firebase mà cũng được sử dụng trong AngularFire2,

489
00:35:28,880 --> 00:35:33,105
và do đó điều này cung cấp phương pháp này được gọi là đăng nhập với pop và khi

490
00:35:33,105 --> 00:35:37,280
chúng tôi đăng nhập với pop- lên đây để ý những gì tôi đang chỉ định ở đây.

491
00:35:37,280 --> 00:35:42,650
Vì vậy, tôi đang nói “mới Firebase.auth.googleAuthProvider”.

492
00:35:42,650 --> 00:35:48,200
Bây giờ, bạn cũng có thể làm Firebase.auth.facebookauthProvider và những người khác.

493
00:35:48,200 --> 00:35:52,170
Vì vậy, như bạn đã thấy từ bài tập trước,

494
00:35:52,170 --> 00:35:58,835
Firebase cho phép bạn đăng nhập của bên thứ ba bằng cách sử dụng Google,

495
00:35:58,835 --> 00:36:01,520
Facebook, GitHub và Twitter.

496
00:36:01,520 --> 00:36:04,440
Vì vậy, bạn có thể cấu hình này một cách thích hợp,

497
00:36:04,440 --> 00:36:07,260
vì tôi đã bật chỉ ủy quyền của Google.

498
00:36:07,260 --> 00:36:10,470
Vì vậy, đây là cách tôi sẽ thiết lập nó để sử dụng

499
00:36:10,470 --> 00:36:16,160
ủy quyền Google của tôi ở đây và dòng mã duy nhất mà tôi kèm theo ở đây,

500
00:36:16,160 --> 00:36:23,650
là một trong đó gây ra các cửa sổ pop-up của trình duyệt mà gợi ý cho tôi để ủy quyền

501
00:36:23,650 --> 00:36:31,580
Firebase của tôi để sử dụng Google ủy quyền sử dụng tài khoản Google của tôi ở đây.

502
00:36:31,580 --> 00:36:34,210
Đó là phần thứ hai mà tôi đã thiết lập ở đây.

503
00:36:34,210 --> 00:36:38,929
Vì vậy, lưu ý rằng dịch vụ Auth đã

504
00:36:38,929 --> 00:36:44,170
đơn giản hóa đáng kể so với những gì chúng tôi đã làm với phiên bản trước của ứng dụng này.

505
00:36:44,170 --> 00:36:49,755
Vì vậy, bạn có thể so sánh hai phiên bản để xem điều này khác với phiên bản khác như thế nào.

506
00:36:49,755 --> 00:36:54,410
Bây giờ, không chỉ điều này AfAuth mà chúng tôi đã tiêm ở đây,

507
00:36:54,410 --> 00:36:57,365
AngularFireAuth phần mà chúng tôi đã tiêm ở đây,

508
00:36:57,365 --> 00:37:01,800
cũng cung cấp điều này quan sát được gọi là “AuthState”.

509
00:37:01,800 --> 00:37:08,045
AuthState này quan sát, có thể được đăng ký và điều này “AuthState” quan sát,

510
00:37:08,045 --> 00:37:10,130
như bạn thấy ở đây,

511
00:37:10,130 --> 00:37:15,880
mà tôi đã tuyên bố ở đây như là một FireBase.User quan sát được.

512
00:37:15,880 --> 00:37:21,400
Vì vậy, đó là thông tin được áp dụng ở đây và chúng ta cũng có thể thiết lập

513
00:37:21,400 --> 00:37:27,465
một biến ở đây gọi là người dùng hiện tại đó là loại người dùng Firebase ở đây.

514
00:37:27,465 --> 00:37:31,610
Vì vậy, AFAuthState này là một quan sát được mà

515
00:37:31,610 --> 00:37:35,570
tôi có thể đăng ký và bất cứ khi nào AuthSt

516
00:37:35,570 --> 00:37:38,935
ate này thay đổi, AuthState theo dõi trạng thái xác thực của

517
00:37:38,935 --> 00:37:42,780
người dùng cho dù người dùng đăng nhập hoặc đăng xuất và nếu người dùng đăng nhập,

518
00:37:42,780 --> 00:37:47,930
sau đó điều này sẽ sau đó đăng ký sẽ trả lại cho tôi thông tin người dùng và từ

519
00:37:47,930 --> 00:37:53,475
thông tin người dùng, chúng tôi có thể truy xuất rất nhiều thông tin bao gồm tên hiển thị

520
00:37:53,475 --> 00:37:58,475
, email, ID hồ sơ và sau đó là

521
00:37:58,475 --> 00:38:04,535
hình đại diện cho người dùng nếu nó đã được thiết lập cho các tài khoản cụ thể.

522
00:38:04,535 --> 00:38:07,555
Tất cả những điều này sẽ được cung cấp cho chúng tôi tự động bởi người dùng.

523
00:38:07,555 --> 00:38:10,660
Vì vậy, khi bạn nhấp vào “người dùng” và sau đó chấm,

524
00:38:10,660 --> 00:38:14,445
bạn sẽ thấy rằng nó cung cấp tất cả những thông tin này cho chúng tôi.

525
00:38:14,445 --> 00:38:16,870
Vì vậy, đó là một email tên hiển thị,

526
00:38:16,870 --> 00:38:19,835
cho dù email được xác minh hay không và vân vân.

527
00:38:19,835 --> 00:38:22,855
Vì vậy, một số điều mà chúng ta quan tâm cụ thể.

528
00:38:22,855 --> 00:38:29,325
URL ảnh có thể được sử dụng để lấy thông tin hình đại diện cho người dùng,

529
00:38:29,325 --> 00:38:32,430
ID nhà cung cấp xác định ai đang

530
00:38:32,430 --> 00:38:35,755
cung cấp thông tin này cho bạn đây sẽ là ID Facebook, ID

531
00:38:35,755 --> 00:38:43,415
Google và ID GitHub và vân vân và thông tin bổ sung ngay cả token làm mới.

532
00:38:43,415 --> 00:38:46,390
Vì vậy, bạn thấy một loạt các thông tin

533
00:38:46,390 --> 00:38:49,840
được cung cấp cho bạn thông qua các đối tượng người dùng được

534
00:38:49,840 --> 00:38:53,285
trả về bởi Authstate này khi bạn đăng ký nó

535
00:38:53,285 --> 00:38:57,400
và cũng cho phép tôi thu hút sự chú ý của bạn đến UID ID người dùng,

536
00:38:57,400 --> 00:39:01,830
và đây là những gì có thể được sử dụng để lập chỉ mục người dùng trong ứng dụng của chúng tôi.

537
00:39:01,830 --> 00:39:05,950
Vì vậy, đó là dịch vụ xác thực theo cách tôi đã thiết

538
00:39:05,950 --> 00:39:10,325
lập nó để sử dụng xác thực Firebase trong ứng dụng này.

539
00:39:10,325 --> 00:39:14,730
Vì vậy, hai thay đổi mà tôi đã phản ánh cho bạn để hiển thị

540
00:39:14,730 --> 00:39:19,180
cách dịch vụ của tôi được sửa đổi để sử dụng Firebase.

541
00:39:19,180 --> 00:39:23,605
Phần lớn các bản cập nhật mà tôi đã thực hiện cho ứng dụng Angular của tôi là tất cả

542
00:39:23,605 --> 00:39:28,115
trong các dịch vụ để sử dụng Firebase cài đặt.

543
00:39:28,115 --> 00:39:31,900
Vì vậy, vì em bé có cấu trúc của ứng dụng Angular,

544
00:39:31,900 --> 00:39:34,390
các thành phần chỉ đơn giản là phụ thuộc vào

545
00:39:34,390 --> 00:39:37,330
các dịch vụ và các dịch vụ là những người mà chúng ta đang nói chuyện với back-end.

546
00:39:37,330 --> 00:39:39,660
Vì vậy, phần lớn các bản cập nhật mà

547
00:39:39,660 --> 00:39:43,040
tôi đã thực hiện cho ứng dụng Angular của tôi liên quan đến việc cập nhật các dịch vụ này để

548
00:39:43,040 --> 00:39:50,660
sử dụng Firebase back-end của Google như một dịch vụ với hai mô-đun npm,

549
00:39:50,660 --> 00:39:53,815
Firebase và AngularFireAuth đây.

550
00:39:53,815 --> 00:39:58,690
Vì vậy, bạn sẽ thấy rằng phần lớn các bản cập nhật bị giới hạn cho

551
00:39:58,690 --> 00:40:04,285
tất cả các dịch vụ mà tôi có trong thư mục dịch vụ của ứng dụng Angular của tôi.

552
00:40:04,285 --> 00:40:06,710
Tất nhiên, tôi cần phải làm một chút

553
00:40:06,710 --> 00:40:09,615
điều chỉnh tối thiểu vào thành phần dishdetail

554
00:40:09,615 --> 00:40:15,430
và thành phần tiêu đề để làm cho nó hoạt động với Firebase.

555
00:40:15,430 --> 00:40:19,485
Bạn có thể truy cập nhanh vào headercomponent.t,

556
00:40:19,485 --> 00:40:25,760
headercomponent.html và dishdetailcomponent.tsfile để xem cách mã

557
00:40:25,760 --> 00:40:29,210
đã thay đổi giữa phiên bản trước

558
00:40:29,210 --> 00:40:32,070
và phiên bản hiện tại của ứng dụng Angular, phiên bản

559
00:40:32,070 --> 00:40:36,360
trước đó, tôi có nghĩa là phiên bản mà chúng tôi sử dụng cho

560
00:40:36,360 --> 00:40:39,490
giao tiếp với X plus của chúng tôi

561
00:40:39,490 --> 00:40:43,230
máy chủ Mongo DB mà chúng tôi đã sử dụng trong bài tập trước đó.

562
00:40:43,230 --> 00:40:48,265
Bây giờ, một nơi nữa mà bạn sẽ thấy tôi sửa đổi,

563
00:40:48,265 --> 00:40:51,640
Thật thú vị, là trong dịch vụ yêu thích.

564
00:40:51,640 --> 00:40:52,930
Trong dịch vụ yêu thích,

565
00:40:52,930 --> 00:40:55,280
cách tôi lưu trữ các mục yêu thích của người dùng,

566
00:40:55,280 --> 00:40:58,410
là mục yêu thích là một bộ sưu tập trên

567
00:40:58,410 --> 00:41:02,015
trang web máy chủ của tôi và bản thân yêu thích chứa tài liệu.

568
00:41:02,015 --> 00:41:06,550
Mỗi tài liệu chứa ID người dùng và ID món ăn.

569
00:41:06,550 --> 00:41:09,210
Vì vậy, một người dùng cụ thể có

570
00:41:09,210 --> 00:41:13,335
nhiều tài liệu mỗi người trong số họ lưu trữ ID người dùng và ID món ăn.

571
00:41:13,335 --> 00:41:20,035
Vì vậy, một bộ sưu tập của chúng với nhau sẽ xác định tất cả các mục yêu thích cho một người dùng cụ thể.

572
00:41:20,035 --> 00:41:25,865
Tôi thấy rằng đây là một cách tốt hơn để tổ chức dữ liệu này trong Firebase.

573
00:41:25,865 --> 00:41:29,195
Trong MongoDB

574
00:41:29,195 --> 00:41:34,230
của chúng tôi cộng với mongos, bạn thấy rằng tôi đã nhúng trong mảng ID món ăn vào

575
00:41:34,230 --> 00:41:40,575
tài liệu yêu thích và sau đó xác định giản đồ yêu thích theo cách đó.

576
00:41:40,575 --> 00:41:43,010
Ở đây, tôi đang sử dụng

577
00:41:43,010 --> 00:41:47,395
một tài liệu riêng biệt để theo dõi từng mục yêu thích cho từng người dùng.

578
00:41:47,395 --> 00:41:50,295
Bây giờ, bởi vì Firebase hỗ trợ truy vấn, vì vậy,

579
00:41:50,295 --> 00:41:55,545
tôi có thể truy vấn Firebase của tôi và trích xuất tất cả các tài liệu có cùng ID người dùng,

580
00:41:55,545 --> 00:41:58,585
phù hợp với người dùng hiện đang đăng nhập và sau đó

581
00:41:58,585 --> 00:42:02,405
trích xuất các ID món ăn tương ứng từ các mục yêu thích.

582
00:42:02,405 --> 00:42:05,250
Sau đó, tôi sẽ đi và sau đó truy vấn máy chủ

583
00:42:05,250 --> 00:42:08,475
của tôi và có được thông tin món ăn cho mỗi món ăn.

584
00:42:08,475 --> 00:42:13,325
Vì vậy, nó liên quan đến nhiều chuyến đi đến máy chủ để có được

585
00:42:13,325 --> 00:42:18,680
tất cả các món ăn yêu thích của tôi thông tin trước khi tôi có thể hiển thị danh sách yêu thích của tôi.

586
00:42:18,680 --> 00:42:24,180
Nhưng, đó là cách tốt nhất mà tôi có thể làm cho Firebase để làm việc với ứng dụng Angular của tôi.

587
00:42:24,180 --> 00:42:26,945
Có lẽ, vào một ngày tương lai,

588
00:42:26,945 --> 00:42:30,740
Firebase Cloud Firestone có thể mở rộng để

589
00:42:30,740 --> 00:42:34,475
cho phép một cái gì đó giống như dân cư mà chúng tôi đã làm với người Mông Cổ.

590
00:42:34,475 --> 00:42:38,570
Trong trường hợp đó, tôi sẽ cập nhật mã để sử dụng cách đó để

591
00:42:38,570 --> 00:42:42,705
có được tất cả các thông tin món ăn tự động.

592
00:42:42,705 --> 00:42:48,420
Vì vậy, gánh nặng của việc xây dựng tài liệu hợp chất này sẽ được chuyển sang trang web máy chủ.

593
00:42:48,420 --> 00:42:51,740
Ngay bây giờ, thân chủ của tôi đang làm rất nhiều công việc ở đây.

594
00:42:51,740 --> 00:42:53,795
Bây giờ, khi bạn đi vào đây,

595
00:42:53,795 --> 00:42:56,400
bạn sẽ thấy rằng trong phương pháp GetFavorites,

596
00:42:56,400 --> 00:42:59,495
bạn sẽ thấy cách tôi truy cập vào mục yêu thích của tôi ở đây.

597
00:42:59,495 --> 00:43:02,835
Vì vậy, khi tôi làm “Getfavorites” Tôi đang truy vấn

598
00:43:02,835 --> 00:43:06,220
bộ sưu tập này của yêu thích nhưng nhận thấy rằng ở đây,

599
00:43:06,220 --> 00:43:12,545
tôi nói “ref where is this user ID”.

600
00:43:12,545 --> 00:43:15,335
ID người dùng này tôi có được ở đây.

601
00:43:15,335 --> 00:43:18,320
Vì vậy, trong nhà xây dựng của máy chủ yêu thích của

602
00:43:18,320 --> 00:43:22,855
tôi, tôi đăng ký dịch vụ Auth này, trạng thái Get Auth trong dịch vụ Auth.

603
00:43:22,855 --> 00:43:25,075
Vì vậy, trong dịch vụ Auth nếu bạn đi vào,

604
00:43:25,075 --> 00:43:28,615
bạn sẽ thấy phương pháp này được gọi là Get Auth trạng thái ở đây.

605
00:43:28,615 --> 00:43:33,175
Trạng thái Nhận Auth trả về This.authState,

606
00:43:33,175 --> 00:43:35,575
mà tôi đã xác định ngay tại đó.

607
00:43:35,575 --> 00:43:39,760
Vì vậy, đây sẽ là một điều quan sát khi bạn thấy tôi tuyên bố ở đây.

608
00:43:39,760 --> 00:43:41,800
Vì vậy, quan sát được là một trong những mà tôi sẽ

609
00:43:41,800 --> 00:43:46,755
sử dụng trong dịch vụ yêu thích của tôi và sau đó đăng ký với điều đó.

610
00:43:46,755 --> 00:43:53,720
Vì vậy, bất cứ khi nào thông tin người dùng thay đổi, điều này sẽ được tự động phản ánh ở đây.

611
00:43:53,720 --> 00:43:59,180
Vì vậy, bạn thấy rằng ngay cả trong ứng dụng trước đó tôi đã sử dụng một quan sát được,

612
00:43:59,180 --> 00:44:04,525
để phản ánh thông tin người dùng vào thành phần tiêu đề của tôi.

613
00:44:04,525 --> 00:44:06,030
Loại cách tiếp cận tương tự,

614
00:44:06,030 --> 00:44:08,600
mà tôi đang sử dụng trong thành phần yêu thích của tôi ở đây,

615
00:44:08,600 --> 00:44:13,055
để có được giữ của ID người dùng cho người dùng hiện đang đăng nhập.

616
00:44:13,055 --> 00:44:16,385
Vì vậy, khi tôi truy vấn bộ sưu tập yêu thích của

617
00:44:16,385 --> 00:44:22,825
tôi, tôi sẽ truy vấn và trích xuất chỉ những tài liệu mà người dùng phù hợp với điều này.

618
00:44:22,825 --> 00:44:26,220
Sau đó, tôi chỉ sử dụng những thay đổi giá trị ở đây.

619
00:44:26,220 --> 00:44:29,210
Vì vậy, tôi chỉ trích xuất tất cả các tài liệu,

620
00:44:29,210 --> 00:44:34,650
mà tôi không quan tâm đến ID của tài liệu yêu thích tại thời điểm này.

621
00:44:34,650 --> 00:44:37,970
Vì vậy, tôi chỉ trích xuất tất cả chúng và sử dụng chúng.

622
00:44:37,970 --> 00:44:40,690
Nếu người dùng không đăng nhập và như bạn có thể thấy

623
00:44:40,690 --> 00:44:43,620
tôi đang ném một lỗi ở đây với câu nói có thể quan sát,

624
00:44:43,620 --> 00:44:50,735
“không có người dùng đăng nhập” đó là những gì được hiển thị trong bài phát biểu yêu thích của tôi ở đó.

625
00:44:50,735 --> 00:44:53,960
Bây giờ, isFavorites cũng được cập nhật

626
00:44:53,960 --> 00:44:57,685
ở đây nhưng trong isFavorites những gì tôi đang làm là tôi sẽ đến DB.

627
00:44:57,685 --> 00:45:02,795
Bây giờ ở đây, tôi sẽ truy cập vào cơ sở dữ liệu bằng cách nói,

628
00:45:02,795 --> 00:45:06,135
“DB bằng firebase.firestore”.

629
00:45:06,135 --> 00:45:09,610
Nhớ lại rằng tôi đang nhập khẩu Firebase ở đây,

630
00:45:09,610 --> 00:45:12,270
nhập khẩu sao như Firebase ở đây.

631
00:45:12,270 --> 00:45:17,970
Các Angular Firestore chính nó không cung cấp cho tôi một phương pháp thực

632
00:45:17,970 --> 00:45:23,970
hiện nhiều truy vấn hợp chất ở đây.

633
00:45:23,970 --> 00:45:29,495
Các góc Firestore hoặc góc lửa không cung cấp cho tôi làm điều đó.

634
00:45:29,495 --> 00:45:33,390
Vì vậy, đó là lý do tại sao tôi phải sử dụng Firebase Firestore.

635
00:45:33,390 --> 00:45:35,840
Vì vậy, khi tôi nói Firebase Firestore,

636
00:45:35,840 --> 00:45:42,310
điều này cho tôi một tham chiếu đến cơ sở dữ liệu Firestore và sau đó tôi có thể đi vào cơ sở dữ liệu này

637
00:45:42,310 --> 00:45:48,780
và sau đó nói “DB bộ sưu tập yêu thích” và sau đó tôi có thể làm nhiều truy vấn ở đây.

638
00:45:48,780 --> 00:45:55,470
Vì vậy, tôi đang nói, .nơi người dùng là này.wheredish là ID món ăn.

639
00:45:55,470 --> 00:45:59,380
Vì vậy, nếu tôi muốn có được một yêu thích cụ thể.

640
00:45:59,380 --> 00:46:03,640
Để kiểm tra xem một món ăn cụ thể là yêu thích của một người dùng tôi có được

641
00:46:03,640 --> 00:46:08,285
tài liệu cụ thể mà người dùng và món ăn phù hợp với hai món ăn này,

642
00:46:08,285 --> 00:46:12,110
nếu họ không khớp thì nó sẽ trở lại với một trống rỗng.

643
00:46:12,110 --> 00:46:16,610
Vì vậy, tôi trích xuất và sau đó trả về giá trị này ở đây.

644
00:46:16,610 --> 00:46:18,900
Bây giờ, sau đó tôi đăng yêu thích,

645
00:46:18,900 --> 00:46:25,770
bạn thấy làm thế nào tôi đang làm điều này tôi đang nói điều này AFS bộ sưu tập yêu thích và tôi sẽ nói “thêm”.

646
00:46:25,770 --> 00:46:29,260
Nhìn vào tài liệu mà tôi đang lưu trữ trong mục yêu thích của tôi.

647
00:46:29,260 --> 00:46:32,130
Tài liệu chính nó chứa ID người dùng và ID món ăn.

648
00:46:32,130 --> 00:46:36,030
Vì vậy, hai mẩu thông tin kèm theo ở đây và nếu

649
00:46:36,030 --> 00:46:41,295
không thì nó sẽ từ chối lời hứa mà không có người dùng đăng nhập ở đây.

650
00:46:41,295 --> 00:46:44,915
Tương tự như vậy, cho yêu thích xóa mà tôi đã thực hiện ở đây.

651
00:46:44,915 --> 00:46:48,735
Dành một thời gian một lần nữa đi qua mã này để hiểu làm thế nào tôi đã

652
00:46:48,735 --> 00:46:53,375
tận dụng Firebase và Angular lửa để mô-đun npm

653
00:46:53,375 --> 00:47:02,170
để giao tiếp với máy chủ Firebase của tôi mà tôi đã thiết lập trong bài tập trước đó.

654
00:47:02,170 --> 00:47:05,880
Với điều này, tôi đã cung cấp cho bạn một cái nhìn tổng quan nhanh chóng về

655
00:47:05,880 --> 00:47:10,280
cách bạn có thể thiết lập ứng dụng Angular của bạn để tương tác với

656
00:47:10,280 --> 00:47:13,980
Firebase back-end như một dịch vụ và sau đó có thể

657
00:47:13,980 --> 00:47:19,970
hỗ trợ các hoạt động khác nhau mà bạn có trong ứng dụng Angular của bạn.

658
00:47:19,970 --> 00:47:21,905
Như tôi đã chứng minh trước đó,

659
00:47:21,905 --> 00:47:24,150
ứng dụng Angular này trông giống như

660
00:47:24,150 --> 00:47:26,690
phiên bản trước của ứng dụng Angular, nơi chúng tôi đang

661
00:47:26,690 --> 00:47:31,915
sử dụng phiên bản riêng của chúng tôi máy chủ Express MongoDB.

662
00:47:31,915 --> 00:47:38,510
Bây giờ, với điều này tôi hoàn thành bài tập đặc biệt này mà tôi đã minh họa trong

663
00:47:38,510 --> 00:47:42,020
bài học này về back-end như một dịch vụ và cũng chứng minh

664
00:47:42,020 --> 00:47:46,630
Firebase như một ví dụ về một back-end như một dịch vụ.