1
00:00:00,000 --> 00:00:04,708
[MUSIC]

2
00:00:04,708 --> 00:00:08,762
Trong bài tập trước, chúng tôi đã cấu hình

3
00:00:08,762 --> 00:00:12,657
Firebase back-end của chúng tôi như một dịch vụ với dự án mới.

4
00:00:12,657 --> 00:00:18,637
Và cũng thiết lập rất nhiều 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:18,637 --> 00:00:25,410
cấu hình máy chủ Firebase của chúng tôi để hoạt động như phụ trợ cho ứng dụng React của chúng tôi.

6
00:00:25,410 --> 00:00:30,670
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 ứng dụng React

7
00:00:30,670 --> 00:00:36,080
của chúng tôi, mà sử dụng Firebase back-end như một dịch vụ để

8
00:00:36,080 --> 00:00:42,200
có được dữ liệu và cũng lưu trữ thông tin cho người dùng trên máy chủ.

9
00:00:42,200 --> 00:00:46,430
Ngoài ra, chúng tôi sẽ tận dụng sự hỗ trợ xác thực mà Firebase

10
00:00:46,430 --> 00:00:48,510
cung cấp để xác thực người dùng.

11
00:00:48,510 --> 00:00:55,434
Cả hai 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.

12
00:00:57,091 --> 00:01:04,231
Để bắt đầu bài tập này, hãy đi đến một vị trí thuận tiện trên máy tính của bạn,

13
00:01:04,231 --> 00:01:09,347
và sau đó sao chép kho Git đã cho, tôi đã cung cấp cho

14
00:01:09,347 --> 00:01:14,950
bạn phiên bản Firebase của ứng dụng React của chúng tôi.

15
00:01:14,950 --> 00:01:24,300
Vì vậy, gõ git clone https://github.com/jmuppala/conFusion-Rea -

16
00:01:24,300 --> 00:01:27,470
CT-Firebase.git.

17
00:01:27,470 --> 00:01:30,450
Và sau đó sao chép kho Git.

18
00:01:30,450 --> 00:01:37,610
Và một khi kho lưu trữ Git được nhân bản vào máy tính của bạn, sau đó di chuyển

19
00:01:37,610 --> 00:01:47,340
vào thư mục Confusion-phản ứng Firebase sẽ được tạo ra tại thời điểm này.

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

21
00:01:52,230 --> 00:01:56,820
Chúng ta hãy đi trước và thực hiện một cài đặt sợi để cài đặt tất cả các

22
00:01:56,820 --> 00:02:02,130
mô-đun nút mà ứng dụng Angular này phụ thuộc vào.

23
00:02:02,130 --> 00:02:07,140
Phiên bản này cũng sẽ cài đặt thêm mô-đun nút gọi là Firebase.

24
00:02:07,140 --> 00:02:12,850
Tôi sẽ giải thích thêm một chút về các mô-đun nút sau này trong bài tập này.

25
00:02:12,850 --> 00:02:18,420
Sau khi cài đặt dự án hoàn tất, hãy mở dự án trong một trình soạn thảo.

26
00:02:18,420 --> 00:02:24,290
Và sau đó trong dự án, đi vào nguồn > thư mục Firebase và

27
00:02:24,290 --> 00:02:26,700
sau đó mở tệp config.js.

28
00:02:26,700 --> 00:02:33,220
Và trong tập tin config.js, bạn sẽ thấy một tập hợp cấu hình Firebase

29
00:02:33,220 --> 00:02:38,950
mà bạn cần thiết lập với cấu hình máy chủ Firebase của riêng bạn.

30
00:02:38,950 --> 00:02:43,970
Như chúng ta đã thấy trong bài tập trước, chúng ta có thể có được tất cả thông tin này khi chúng ta

31
00:02:43,970 --> 00:02:49,940
nhấp vào nút này ở đây được gọi là Thêm Firebase vào ứng dụng web của bạn.

32
00:02:49,940 --> 00:02:53,035
Và sau đó sao chép thông tin này và

33
00:02:53,035 --> 00:02:58,162
sau đó dán thông tin này vào tệp config.js của bạn.

34
00:02:58,162 --> 00:03:03,786
Để thay thế chúng với cấu hình máy chủ Firebase cụ thể của bạn cho

35
00:03:03,786 --> 00:03:06,280
tất cả các mảnh thông tin này.

36
00:03:06,280 --> 00:03:10,844
Và một khi đã hoàn thành, sau đó bạn có thể khởi động ứng

37
00:03:10,844 --> 00:03:14,609
dụng React của bạn bằng cách gõ sợi bắt đầu tại dấu nhắc.

38
00:03:14,609 --> 00:03:18,331
Một khi ứng dụng React của bạn được biên dịch, và do đó

39
00:03:18,331 --> 00:03:23,890
ở đây bạn sẽ thấy trang chủ, trang về, như chúng ta thấy ở đây.

40
00:03:23,890 --> 00:03:25,596
Và thực đơn.

41
00:03:27,900 --> 00:03:31,570
Và trang liên lạc.

42
00:03:31,570 --> 00:03:33,360
Hãy đăng nhập chính mình,

43
00:03:33,360 --> 00:03:36,865
để tôi quay lại trang chủ và sau đó chúng tôi sẽ đăng nhập chính mình.

44
00:03:36,865 --> 00:03:38,800
Vì vậy, khi bạn nhấp vào nút Đăng nhập,

45
00:03:38,800 --> 00:03:43,430
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.

46
00:03:43,430 --> 00:03:47,010
Bạn cũng sẽ thấy một nút ban đầu ở đây gọi là Đăng nhập với Google.

47
00:03:47,010 --> 00:03:49,740
Vì vậy, hãy để tôi đăng nhập bằng tài khoản Google của tôi.

48
00:03:49,740 --> 00:03:54,885
Vì vậy, khi bạn nhấp vào Đăng nhập với Google, sau đó nó sẽ mở một

49
00:03:54,885 --> 00:04:01,095
cửa sổ trình duyệt khác, nơi bạn sẽ được yêu cầu cho phép sử dụng tài khoản Google của bạn.

50
00:04:01,095 --> 00:04:07,745
Sau đó, bạn sẽ thấy, ở góc bên phải, bạn sẽ ngay lập tức thấy tên của bạn

51
00:04:07,745 --> 00:04:13,285
đang được hiển thị ở đây, và với nút đăng nhập bây giờ biến thành nút đăng xuất.

52
00:04:13,285 --> 00:04:19,340
Vì vậy, tại thời điểm này, bạn sẽ có thể xem mục yêu thích của bạn.

53
00:04:19,340 --> 00:04:22,240
Và trong trường hợp này, vì chúng ta không có bất kỳ mục yêu thích, vì vậy

54
00:04:22,240 --> 00:04:24,110
nó sẽ trống rỗng vào thời điểm này.

55
00:04:24,110 --> 00:04:29,610
Hãy để tôi quay lại menu và sau đó thêm một vài mục vào mục yêu thích của tôi.

56
00:04:29,610 --> 00:04:35,990
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, vì vậy khi tôi nhấp vào món ăn này,

57
00:04:35,990 --> 00:04:41,350
bạn sẽ ngay lập tức thấy biểu tượng biến thành một trái tim đầy.

58
00:04:41,350 --> 00:04:47,597
Và hãy để tôi chọn thêm một món nữa và thêm nó vào mục yêu thích của tôi.

59
00:04:47,597 --> 00:04:52,526
Quảng cáo sau đó bây giờ khi bạn đi đến mục yêu thích của tôi, bạn sẽ thấy một vài

60
00:04:52,526 --> 00:04:57,187
món ăn được thêm vào mục yêu thích của bạn, như bạn mong đợi.

61
00:04:57,187 --> 00:05:02,893
Và một lần nữa, bạn có thể xóa các món ăn bằng cách nhấp vào

62
00:05:02,893 --> 00:05:09,270
chữ thập xóa để xóa mục khỏi danh sách yêu thích của bạn, như được hiển thị ở đây.

63
00:05:09,270 --> 00:05:14,181
Bây giờ chúng ta cũng có thể thêm, như bạn nhận ra, chúng ta có thể đi đến bất kỳ món ăn nào và

64
00:05:14,181 --> 00:05:17,140
sau đó thêm nhận xét về món ăn đó.

65
00:05:17,140 --> 00:05:19,317
Vì vậy, hãy để tôi thêm vào một bình luận ở đây.

66
00:05:25,868 --> 00:05:31,364
Và thời điểm bạn gửi bình luận, bạn sẽ ngay lập tức thấy rằng

67
00:05:31,364 --> 00:05:38,562
bình luận của bạn sẽ được hiển thị ở đây với tên của tác giả cũng có trong đây.

68
00:05:38,562 --> 00:05:41,572
Và với ngày đó như thể hiện ở đây.

69
00:05:41,572 --> 00:05:46,592
Vì vậy, bạn có thể thấy rằng việc gửi bình luận của người dùng sẽ

70
00:05:46,592 --> 00:05:49,592
được hỗ trợ cho bất kỳ món ăn cụ thể nào.

71
00:05:49,592 --> 00:05:54,294
Vì vậy, đây là cách ứng dụng của bạn làm việc với

72
00:05:54,294 --> 00:05:58,211
Firebase đó như là back-end như một dịch vụ.

73
00:05:58,211 --> 00:06:03,071
Bây giờ, tất nhiên, bạn phải tự hỏi, làm thế nào để chúng tôi thiết kế lại ứng

74
00:06:03,071 --> 00:06:07,882
dụng của chúng tôi để sử dụng Firebase thay vì sử dụng

75
00:06:07,882 --> 00:06:12,110
máy chủ Express MongoDB chuẩn mà chúng tôi đã xây dựng trước đó?

76
00:06:13,220 --> 00:06:18,606
Để cấu hình ứng dụng của bạn để giao tiếp với máy chủ Firebase,

77
00:06:18,606 --> 00:06:21,349
bạn cần phải cài đặt mô-đun Firebase.

78
00:06:21,349 --> 00:06:25,964
Mô-đun Firebase, như bạn thấy ở đây, cung cấp công cụ và

79
00:06:25,964 --> 00:06:31,772
cơ sở hạ tầng cho phép bạn giao tiếp với máy chủ Firebase.

80
00:06:31,772 --> 00:06:35,639
Và để cài đặt này vào ứng dụng của

81
00:06:35,639 --> 00:06:40,141
bạn, bạn gõ vào cài đặt trừ trừ đi lưu firebase.

82
00:06:40,141 --> 00:06:41,893
Bây giờ làm thế nào để sử dụng những thứ này?

83
00:06:41,893 --> 00:06:47,461
Tôi sẽ minh họa rằng bằng cách nhanh chóng chạy bạn thông qua mã sửa đổi

84
00:06:47,461 --> 00:06:53,492
mà chúng tôi sử dụng Firebase để sửa đổi ứng dụng mà chúng tôi đã phát triển

85
00:06:53,492 --> 00:06:59,185
trước đó để sử dụng máy chủ Firebase như là một dịch vụ back-end.

86
00:06:59,185 --> 00:07:04,065
Chúng ta hãy xem qua ứng dụng React đã sửa đổi của chúng tôi để hiểu

87
00:07:04,065 --> 00:07:08,825
cách nó đã được cấu hình lại để giao tiếp với máy chủ Firebase của chúng tôi.

88
00:07:08,825 --> 00:07:11,933
Chúng tôi sẽ bắt đầu cuộc hành trình của chúng tôi trong tập tin package.json.

89
00:07:11,933 --> 00:07:13,455
Và trong tập tin package.json,

90
00:07:13,455 --> 00:07:18,820
bạn sẽ nhận thấy rằng tôi đã thêm vào trong mô-đun npm Firebase vào này.

91
00:07:18,820 --> 00:07:24,020
Và vì vậy khi bạn sao chép kho Git và cài đặt sợi,

92
00:07:24,020 --> 00:07:27,880
mô-đun Firebase sẽ tự động được cài đặt vào ứng dụng của bạn.

93
00:07:27,880 --> 00:07:31,810
Nếu bạn đang cấu hình một ứng dụng React mới để

94
00:07:31,810 --> 00:07:33,160
giao tiếp với máy chủ,

95
00:07:33,160 --> 00:07:38,850
thì bạn cần cài đặt một cách rõ ràng mô-đun Firebase vào ứng dụng của bạn.

96
00:07:38,850 --> 00:07:44,880
Bây giờ sau đó, bạn sẽ nhận thấy những thay đổi trong thư mục Firebase.

97
00:07:44,880 --> 00:07:47,396
Ở đây chúng ta đã thấy các tập tin cấu hình.

98
00:07:47,396 --> 00:07:51,410
Các tập tin khác mà bạn sẽ nhận thấy ở đây được gọi là firebase.js.

99
00:07:51,410 --> 00:07:55,227
Bây giờ đây là nơi chúng tôi cấu hình ứng dụng của chúng tôi để giao

100
00:07:55,227 --> 00:07:56,530
tiếp với Firebase Server.

101
00:07:56,530 --> 00:07:58,744
Vì vậy, chúng tôi đang nhập cấu hình ở đây.

102
00:07:58,744 --> 00:08:01,786
Và sau đó nhập khẩu firebase từ firebase.

103
00:08:01,786 --> 00:08:06,624
Và sau đó bạn khởi động ứng dụng ở đây bằng cách cung cấp cấu hình cho firebase,

104
00:08:06,624 --> 00:08:10,838
vì vậy đây là nơi bạn cung cấp tất cả các thông tin cấu hình để

105
00:08:10,838 --> 00:08:14,835
khách hàng của bạn có thể giao tiếp với Firebase Server.

106
00:08:14,835 --> 00:08:19,738
Ngoài ra, tôi đang xuất khẩu một vài trong số những xuất khẩu từ

107
00:08:19,738 --> 00:08:23,280
đây gọi là auth, fireauth và vân vân.

108
00:08:23,280 --> 00:08:27,915
Những điều này tôi sẽ sử dụng trong những người sáng tạo hành động

109
00:08:27,915 --> 00:08:31,524
để giao tiếp với Firebase Server của tôi.

110
00:08:33,371 --> 00:08:40,580
Bây giờ sau đó, các sửa đổi chính sẽ nằm trong tệp ActionCreators.

111
00:08:40,580 --> 00:08:46,222
Bây giờ tôi đã không thêm vào bất kỳ hành động mới, nhưng thay vào đó tất cả các giao tiếp

112
00:08:46,222 --> 00:08:51,866
với máy chủ bây giờ được sửa đổi để giao tiếp với Firebase Server của chúng tôi.

113
00:08:51,866 --> 00:08:55,478
Vì vậy, thay vì sử dụng lấy, như chúng tôi đã làm trước đó,

114
00:08:55,478 --> 00:08:57,979
bây giờ chúng tôi sẽ sử dụng firestore.

115
00:08:57,979 --> 00:09:02,466
Vì vậy, như bạn có thể thấy, tôi đã nhập auth, firestore,

116
00:09:02,466 --> 00:09:07,237
fireauth và firebasestore từ mô-đun firebase mà

117
00:09:07,237 --> 00:09:11,260
tôi đã thiết lập trước đó trong thư mục firebase.

118
00:09:11,260 --> 00:09:16,170
Và sau đó tất cả những điều này sẽ cho phép tôi giao tiếp với Firebase Server của tôi.

119
00:09:16,170 --> 00:09:20,320
Để lấy một bộ sưu tập từ Firebase của tôi,

120
00:09:20,320 --> 00:09:25,050
chúng tôi chỉ cần nói firestore.collection, và sau đó cung cấp tên của bộ sưu tập.

121
00:09:25,050 --> 00:09:29,250
Và sau đó bạn có thể thêm vào bộ sưu tập bằng cách nói, thêm, như bạn có thể thấy ở đây,

122
00:09:29,250 --> 00:09:37,570
lấy mục cụ thể mà bạn đang thêm vào bộ sưu tập của bạn ở đó.

123
00:09:37,570 --> 00:09:40,110
Vì vậy, đó là tài liệu mà chúng tôi đang thêm vào bộ sưu tập của chúng tôi.

124
00:09:40,110 --> 00:09:43,500
Vì vậy, đây là cho bài bình luận, như bạn có thể thấy ở đây.

125
00:09:43,500 --> 00:09:48,270
Và khi bạn đăng nó, sau đó bạn sẽ cung cấp lại với một DoCef,

126
00:09:48,270 --> 00:09:51,260
đó là tham chiếu đến tài liệu,

127
00:09:51,260 --> 00:09:56,570
sau đó bạn có thể sử dụng để đi và lấy tài liệu từ máy chủ của bạn.

128
00:09:56,570 --> 00:10:00,180
Bây giờ cách Firebase hoạt động là nó sẽ cung cấp

129
00:10:00,180 --> 00:10:04,700
ID riêng biệt với nội dung thực tế của các tài liệu.

130
00:10:04,700 --> 00:10:10,550
Vì vậy, Firebase giữ ID và dữ liệu tài liệu riêng biệt.

131
00:10:10,550 --> 00:10:15,450
Vì vậy, ở đây tôi phải rõ ràng kết hợp hai với nhau thành

132
00:10:15,450 --> 00:10:18,260
một đối tượng JavaScript ở đây, được gọi là bình luận ở đây.

133
00:10:18,260 --> 00:10:23,450
Vì vậy, như bạn nhìn thấy từ các tài liệu, vì vậy bạn nhận thấy rằng khi tôi

134
00:10:23,450 --> 00:10:29,710
chèn một mục vào một bộ sưu tập, nó trả về một docRef ở đây.

135
00:10:29,710 --> 00:10:34,180
Và từ DocRef, tôi có thể lấy ID của tài liệu.

136
00:10:34,180 --> 00:10:36,610
Và vì vậy những gì tôi đang làm ở đây là tôi đang đi và

137
00:10:36,610 --> 00:10:39,464
lấy tài liệu tương ứng ở đây.

138
00:10:39,464 --> 00:10:44,305
Và sau đó một khi tài liệu được lấy, bây giờ, tất nhiên, tài liệu nên tồn tại, vì

139
00:10:44,305 --> 00:10:49,015
vậy điều này phải luôn luôn đúng, bởi vì chúng tôi vừa chèn tài liệu.

140
00:10:49,015 --> 00:10:53,032
Nhưng chỉ vì lợi ích của sự hoàn chỉnh, tôi đang làm một kiểm tra rõ ràng cho điều đó.

141
00:10:53,032 --> 00:10:57,576
Và sau đó dữ liệu trong tài liệu

142
00:10:57,576 --> 00:11:01,822
thu được bằng cách nói doc.data, như bạn thấy ở đây.

143
00:11:01,822 --> 00:11:05,658
Và sau đó id của tài liệu được thu được bởi doc.id

144
00:11:05,658 --> 00:11:07,073
Vì vậy, hai cái này là riêng biệt.

145
00:11:07,073 --> 00:11:12,708
Nhưng trong mã React của chúng tôi, chúng tôi đã luôn luôn lưu trữ id và

146
00:11:12,708 --> 00:11:20,530
dữ liệu với nhau như một tài liệu JSON duy nhất ở đây, hoặc đối tượng JavaScript ở đây.

147
00:11:20,530 --> 00:11:23,340
Vì vậy, đó là lý do tại sao tôi kết hợp hai với nhau

148
00:11:23,340 --> 00:11:26,800
thành một đối tượng JavaScript duy nhất ở đây bằng cách làm điều này.

149
00:11:26,800 --> 00:11:30,490
Bạn sẽ thấy tôi liên tục làm điều này cho, ví dụ,

150
00:11:30,490 --> 00:11:35,510
cho các chương trình khuyến mãi táo bạo và như vậy, cũng trong ActionCreators.

151
00:11:35,510 --> 00:11:41,640
Và sau đó tôi thêm vào bình luận vào cửa hàng Redux của tôi ở đây,

152
00:11:41,640 --> 00:11:44,250
và phần còn lại của mã vẫn như vậy.

153
00:11:44,250 --> 00:11:47,016
Tương tự như vậy, để lấy các món ăn,

154
00:11:47,016 --> 00:11:52,980
bạn sẽ thấy cách chúng ta đang lấy một số món ăn từ Firebase.

155
00:11:52,980 --> 00:11:58,330
Vì vậy, chúng tôi đang nhìn thấy các món ăn firestore.collection nhận được và có được các món ăn.

156
00:11:58,330 --> 00:12:02,520
Bây giờ khi bạn có được điều đó, nó sẽ cho tôi một giá trị chụp nhanh,

157
00:12:02,520 --> 00:12:06,680
đó là ảnh chụp của trạng thái hiện tại của bộ sưu tập này, và từ đó,

158
00:12:06,680 --> 00:12:10,690
tôi phải đi vào và lấy lại từng món ăn.

159
00:12:10,690 --> 00:12:15,400
Và sau đó tôi đang xây dựng lại mảng các món ăn của mình ở đây.

160
00:12:15,400 --> 00:12:18,990
Bây giờ nhận thấy rằng, như tôi đã nói, id và dữ liệu là riêng biệt, vì vậy

161
00:12:18,990 --> 00:12:23,495
tôi cần phải kết hợp chúng lại với nhau, bởi vì đó là cách tôi sử dụng dữ liệu trong

162
00:12:23,495 --> 00:12:27,660
ứng dụng React của tôi, vì vậy tôi đang đẩy nó vào mảng đĩa.

163
00:12:27,660 --> 00:12:32,980
Và sau đó cuối cùng trả lại các món ăn mà sau đó sẽ được đưa vào

164
00:12:32,980 --> 00:12:34,380
cửa hàng Redux của tôi ở đây.

165
00:12:34,380 --> 00:12:39,642
Vì vậy, loại thay đổi này đã được thực hiện trong ActionCreators.

166
00:12:39,642 --> 00:12:45,843
Bây giờ quá trình đăng nhập và đăng xuất sẽ được xử lý dưới đây.

167
00:12:45,843 --> 00:12:51,445
Vì vậy, đối với đăng nhập, auth mà chúng tôi đã nhập từ firebase,

168
00:12:51,445 --> 00:12:56,372
auth là một trong đó cho phép tôi để làm đăng nhập và đăng xuất.

169
00:12:56,372 --> 00:12:59,363
Vì vậy, nếu bạn đang đăng nhập bằng cách sử dụng email và mật khẩu,

170
00:12:59,363 --> 00:13:03,940
nó cung cấp với phương pháp này được gọi là SigninWiTheMailAndPassword.

171
00:13:03,940 --> 00:13:10,250
Và sau đó bạn cung cấp email và mật khẩu như hai tham số ở đây.

172
00:13:10,250 --> 00:13:14,010
Và sau đó điều đó sẽ cho phép bạn đăng nhập.

173
00:13:14,010 --> 00:13:20,985
Và khi bạn đăng nhập, auth cung cấp đối tượng này được gọi là CurrentUser trên auth.

174
00:13:20,985 --> 00:13:26,455
Vì vậy, bạn có được thông tin của người dùng bằng cách nói auth.CurrentUser ở đây.

175
00:13:26,455 --> 00:13:31,235
Và tôi cũng đang lưu trữ thông tin người dùng vào cơ sở dữ liệu của tôi.

176
00:13:31,235 --> 00:13:33,879
Bây giờ tôi không theo dõi rõ ràng bất kỳ mã thông báo và

177
00:13:33,879 --> 00:13:37,945
những thứ như thế bởi vì nó được tự động theo dõi bởi auth cho tôi,

178
00:13:37,945 --> 00:13:40,606
được cung cấp bởi mô-đun Firebase npm.

179
00:13:40,606 --> 00:13:43,723
Vì vậy, tôi chỉ tận dụng điều đó để theo dõi việc sử dụng hiện tại.

180
00:13:43,723 --> 00:13:49,078
Nếu người dùng hiện tại là null, sau đó tôi biết rằng khách hàng của tôi

181
00:13:49,078 --> 00:13:53,840
không có bất kỳ người dùng đăng nhập vào máy chủ.

182
00:13:53,840 --> 00:13:59,510
Và tương tự, để đăng xuất người dùng tôi chỉ đơn giản là nói auth.Signout.

183
00:13:59,510 --> 00:14:04,370
Bây giờ một lần nữa, tài liệu về cách sử dụng

184
00:14:04,370 --> 00:14:09,060
mô-đun Filebase npm là tất cả có sẵn trong tài liệu Firebase.

185
00:14:09,060 --> 00:14:14,238
Vì vậy, bạn có thể dễ dàng tìm kiếm để hiểu

186
00:14:14,238 --> 00:14:18,993
làm thế nào để tận dụng Firebase để sử dụng tất cả

187
00:14:18,993 --> 00:14:23,443
các chức năng khác nhau có sẵn từ mô-đun Firebase npm.

188
00:14:23,443 --> 00:14:27,999
Ngoài ra, đối với mục yêu thích, chúng tôi hoặc đăng một yêu thích và vì vậy

189
00:14:27,999 --> 00:14:32,454
sau đó bạn cần phải đăng các mục, vì vậy bạn sẽ nói thêm, và

190
00:14:32,454 --> 00:14:36,333
khi bạn cần để có được một mục, bạn sẽ nói nhận được.

191
00:14:36,333 --> 00:14:41,455
Và bạn thậm chí có thể nhận được một mục từ một tài liệu cụ thể trong bộ sưu tập.

192
00:14:41,455 --> 00:14:45,245
Nếu bạn muốn có một tài liệu cụ thể trong bộ sưu tập, bạn sẽ nói .doc.

193
00:14:45,245 --> 00:14:49,015
Và sau đó bạn cung cấp id của tài liệu ở đây.

194
00:14:49,015 --> 00:14:51,585
Vì vậy, đó là cách bạn có thể có được một tài liệu cụ thể.

195
00:14:53,465 --> 00:14:56,265
Cũng xóa mục yêu thích, và lấy mục yêu thích và vân vân.

196
00:14:56,265 --> 00:15:01,640
Bây giờ cho các mục yêu thích được lưu trữ trong Firebase của tôi,

197
00:15:01,640 --> 00:15:09,100
các mục yêu thích được lưu trữ dưới dạng ID người dùng và ID món ăn ở đây.

198
00:15:09,100 --> 00:15:13,680
Bây giờ firestore chính nó không có bất kỳ cách nào để điền

199
00:15:13,680 --> 00:15:15,800
thông tin món ăn vào ID món ăn.

200
00:15:15,800 --> 00:15:21,214
Vì vậy, tôi chỉ lấy tất cả các thông tin món ăn,

201
00:15:21,214 --> 00:15:27,694
vì vậy đây là mỗi yêu thích là một cặp, người dùng và món ăn ID cặp.

202
00:15:27,694 --> 00:15:30,431
Vì vậy, tôi chỉ lấy nó vào mục yêu thích của tôi ở đây.

203
00:15:30,431 --> 00:15:35,859
Nhưng sau đó cũng có nghĩa là tôi cần phải sửa đổi thành phần yêu thích của tôi để

204
00:15:35,859 --> 00:15:40,091
nó có thể sử dụng ID món ăn và sau đó chỉ mục vào các món ăn

205
00:15:40,091 --> 00:15:45,560
được lưu trữ trong cửa hàng Redux của tôi, và có được thông tin món ăn.

206
00:15:45,560 --> 00:15:49,194
Hoặc thay thế là đi đến máy chủ và sau đó lấy thông tin.

207
00:15:49,194 --> 00:15:53,560
Nhưng kể từ khi tôi đã có dữ liệu về các món ăn trong cửa hàng Redux của

208
00:15:53,560 --> 00:15:58,234
tôi, bởi vì tôi đã thực hiện các món ăn lấy để lấy tất cả thông tin

209
00:15:58,234 --> 00:15:59,474
về các món ăn.

210
00:15:59,474 --> 00:16:05,492
Tôi chỉ trực tiếp đi vào đối tượng món ăn trong Redux xé của tôi và

211
00:16:05,492 --> 00:16:08,190
lấy thông tin này.

212
00:16:08,190 --> 00:16:12,250
Vì vậy, điều này cũng có nghĩa là có những sửa đổi đối với thành phần chính.

213
00:16:12,250 --> 00:16:18,894
Trong thành phần chính, bạn sẽ nhận thấy rằng khi tôi làm yêu thích ở đây cho

214
00:16:18,894 --> 00:16:25,343
chi tiết món ăn, tôi chỉ đơn giản là phải so sánh món ăn với DisHid đó.

215
00:16:25,343 --> 00:16:29,188
Vì vậy, món ăn ở đây trong yêu thích của tôi là DisHid chính nó, vì vậy

216
00:16:29,188 --> 00:16:31,540
tôi chỉ cần làm so sánh.

217
00:16:31,540 --> 00:16:35,334
Vì vậy, sẽ có sự thay đổi nhỏ đối với dòng này trong DiSid.

218
00:16:35,334 --> 00:16:39,503
Và bạn cũng sẽ nhận thấy rằng khi tôi gọi các mục yêu thích,

219
00:16:39,503 --> 00:16:42,786
ngoài việc cung cấp mục yêu thích của họ,

220
00:16:42,786 --> 00:16:47,322
tôi cũng cung cấp các món ăn như một trong những đạo cụ cho mục yêu thích của tôi.

221
00:16:47,322 --> 00:16:51,711
Vì vậy, đó là một thay đổi khác mà bạn sẽ nhận thấy trong thành phần chính.

222
00:16:51,711 --> 00:16:54,990
Và tương tự, trong thành phần yêu thích,

223
00:16:54,990 --> 00:16:59,996
bạn sẽ nhận thấy rằng bên trong thành phần yêu thích xuống dưới đây,

224
00:16:59,996 --> 00:17:04,933
bạn sẽ nhận thấy rằng, khi tôi vẽ thành phần yêu thích.

225
00:17:04,933 --> 00:17:09,761
Sau đó, ngay ở đây trong chức năng này ở đây, const yêu thích,

226
00:17:09,761 --> 00:17:14,113
những gì tôi đang làm là tôi đang đi vào các món ăn yêu thích,

227
00:17:14,113 --> 00:17:19,338
món ăn là một mảng của tất cả các DishID ở đây, vì vậy tôi lập bản đồ thông qua đó.

228
00:17:19,338 --> 00:17:23,591
Vì vậy, nhìn vào mỗi DisHid, sau đó từ các món ăn,

229
00:17:23,591 --> 00:17:27,545
tôi lọc ra món ăn đặc biệt đó.

230
00:17:27,545 --> 00:17:29,484
Và sau đó thu được DiSid, vì vậy

231
00:17:29,484 --> 00:17:33,023
ở đây bạn sẽ thấy tôi sử dụng bộ lọc mảng JavaScript ở đây.

232
00:17:33,023 --> 00:17:36,419
Nó sẽ lọc ra rằng thông tin món ăn cụ thể và

233
00:17:36,419 --> 00:17:38,687
sau đó hiển thị món ăn đặc biệt đó.

234
00:17:38,687 --> 00:17:43,415
Vì vậy, đây là một công việc bổ sung mà tôi cần phải làm

235
00:17:43,415 --> 00:17:48,840
trong thành phần yêu thích của tôi để làm cho mỗi món ăn ở đó.

236
00:17:48,840 --> 00:17:55,900
Vì vậy, loại sửa đổi nhỏ như vậy bạn sẽ nhận thấy trong một vài thành phần,

237
00:17:55,900 --> 00:17:59,840
đặc biệt là chi tiết món ăn, yêu thích và thành phần chính.

238
00:17:59,840 --> 00:18:05,410
Đó là nơi mà một số thay đổi nhỏ đã được thực hiện để tạo điều kiện cho ứng

239
00:18:05,410 --> 00:18:09,980
dụng React để có thể tận dụng Firebase Server.

240
00:18:09,980 --> 00:18:12,790
Vì vậy, đây là một đánh giá nhanh chóng về cách

241
00:18:12,790 --> 00:18:17,870
ứng dụng React của tôi đã được sửa đổi để giao tiếp với Firebase Server của tôi.

242
00:18:17,870 --> 00:18:23,257
Bây giờ, giống như Angular, chúng tôi cũng có Angularfire, nó cung cấp cho

243
00:18:23,257 --> 00:18:29,680
chúng tôi một cách để tận dụng cùng với Firebase để giao tiếp với máy chủ.

244
00:18:29,680 --> 00:18:35,659
React không có bất kỳ đối tác như vậy, vì vậy tôi trực tiếp sử dụng

245
00:18:35,659 --> 00:18:41,472
mô-đun Firebase npm cung cấp cơ sở cơ bản của việc truy cập Firebase Server.

246
00:18:41,472 --> 00:18:46,165
Và sau đó tận dụng các chức năng mà nó cung cấp để giao tiếp với

247
00:18:46,165 --> 00:18:47,382
Firebase Server của tôi.

248
00:18:47,382 --> 00:18:52,506
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

249
00:18:52,506 --> 00:18:57,534
tôi đã tận dụng mô-đun npm Firebase để giao tiếp

250
00:18:57,534 --> 00:19:03,090
với Firebase Server của tôi mà tôi đã thiết lập trong bài tập trước đó.

251
00:19:03,090 --> 00:19:08,293
Với điều này, tôi đã cung cấp cho bạn một cái nhìn tổng quan nhanh về cách bạn có thể thiết lập

252
00:19:08,293 --> 00:19:13,957
ứng dụng React của bạn để tương tác với Firebase back-end như một dịch vụ, và

253
00:19:13,957 --> 00:19:20,012
sau đó có thể hỗ trợ các hoạt động khác nhau mà bạn có trong ứng dụng của bạn.

254
00:19:20,012 --> 00:19:24,632
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 đã

255
00:19:24,632 --> 00:19:28,758
minh họa trong bài học này về back-end như một dịch vụ và

256
00:19:28,758 --> 00:19:33,645
cũng chứng minh Firebase như một ví dụ về một back-end như một dịch vụ.

257
00:19:33,645 --> 00:19:36,995
[ NHẠC]