1
00:00:03,650 --> 00:00:10,755
Bây giờ chúng tôi đã hoàn thành việc phát triển một máy chủ REST API đầy đủ sử dụng Loopback,

2
00:00:10,755 --> 00:00:14,639
câu hỏi tiếp theo ngay lập tức sẽ phát sinh trong tâm trí của bạn là,

3
00:00:14,639 --> 00:00:20,090
làm thế nào để chúng tôi điều chỉnh ứng dụng React để sử dụng máy chủ REST API này?

4
00:00:20,090 --> 00:00:23,140
Như chúng tôi đã thực hiện trong các trường hợp trước đó,

5
00:00:23,140 --> 00:00:29,190
chúng tôi cũng sẽ cần cấu hình lại ứng dụng React của chúng tôi để đặc biệt sử dụng

6
00:00:29,190 --> 00:00:31,410
các điểm cuối API REST và

7
00:00:31,410 --> 00:00:37,960
các yêu cầu API REST khác nhau như được tiếp xúc bởi máy chủ Loopback của chúng tôi.

8
00:00:38,150 --> 00:00:42,075
Để bắt đầu bài tập này, trước tiên,

9
00:00:42,075 --> 00:00:45,275
sao chép kho git chứa

10
00:00:45,275 --> 00:00:51,140
một ứng dụng lại hoàn thành giao tiếp với máy chủ Loopback của chúng tôi.

11
00:00:51,140 --> 00:00:54,760
Vì vậy, để làm điều đó, hãy đi đến vị trí thuận tiện của bạn trên máy tính của bạn.

12
00:00:54,760 --> 00:00:58,370
Tôi sẽ sao chép kho git bằng cách

13
00:00:58,370 --> 00:01:00,640
gõ git clone

14
00:01:06,440 --> 00:01:15,270
https://github.com/jmuppala/conFusion-React-Loopback.git,

15
00:01:15,270 --> 00:01:18,130
và sau đó sao chép kho git này.

16
00:01:19,430 --> 00:01:22,665
Một khi kho git được nhân bản,

17
00:01:22,665 --> 00:01:30,780
sau đó chúng ta sẽ di chuyển vào thư mục Confusion-react-loopback và

18
00:01:30,780 --> 00:01:39,355
sau đó thực hiện một cài đặt sợi để cài đặt tất cả các mô-đun nút cho ứng dụng này.

19
00:01:39,355 --> 00:01:42,315
Trước khi bạn bắt đầu ứng dụng React,

20
00:01:42,315 --> 00:01:46,300
hãy chắc chắn rằng máy chủ Loopback của bạn được cấu hình chính xác.

21
00:01:46,300 --> 00:01:47,705
Trong máy chủ Loopback,

22
00:01:47,705 --> 00:01:49,410
trong thư mục khách hàng,

23
00:01:49,410 --> 00:01:54,425
di chuyển các hình ảnh mà chúng tôi đã đưa ra dưới dạng tệp images.zip,

24
00:01:54,425 --> 00:01:56,780
giải nén nó, và sau đó di chuyển các hình ảnh vào thư mục

25
00:01:56,780 --> 00:02:00,540
hình ảnh dưới thư mục khách hàng như được hiển thị ở đây.

26
00:02:00,540 --> 00:02:08,660
Ngoài ra, đổi tên tệp root.js dưới dạng root.jsold hoặc xóa tệp root.js.

27
00:02:08,660 --> 00:02:13,310
Chúng tôi không cần điều này nữa trong ứng dụng của chúng tôi bởi vì chúng tôi muốn đảm bảo rằng

28
00:02:13,310 --> 00:02:21,050
máy chủ của chúng tôi đang lưu nội dung từ thư mục khách hàng.

29
00:02:21,050 --> 00:02:22,740
Vì vậy, để đạt được điều đó,

30
00:02:22,740 --> 00:02:25,265
hãy mở tập tin middleware.json,

31
00:02:25,265 --> 00:02:27,845
và trong tập tin middleware.json,

32
00:02:27,845 --> 00:02:32,980
trong phần tập tin,

33
00:02:32,980 --> 00:02:38,435
thêm điều này vào phần tập tin của tập tin middleware.json của bạn.

34
00:02:38,435 --> 00:02:46,320
Vì vậy, chúng ta sẽ nói, Loopback tĩnh và params: đồng đô la ngân hàng chấm dấu gạch chéo client”,

35
00:02:46,320 --> 00:02:49,595
chỉ ra rằng máy chủ Loopback của bạn sẽ được lưu lên

36
00:02:49,595 --> 00:02:53,555
nội dung tĩnh từ thư mục khách hàng ở đây.

37
00:02:53,555 --> 00:02:55,890
Sau khi thực hiện những thay đổi này,

38
00:02:55,890 --> 00:03:00,080
sau đó bạn có thể khởi chạy máy chủ của bạn.

39
00:03:00,360 --> 00:03:04,100
Hãy chắc chắn rằng máy chủ MongoDB của bạn

40
00:03:04,100 --> 00:03:07,860
cũng được khởi động và chạy trước khi bạn khởi động máy chủ Loopback của bạn.

41
00:03:07,860 --> 00:03:14,690
Sau đó, sau đó, chúng tôi sẽ biên dịch và khởi chạy ứng dụng khách React của chúng tôi.

42
00:03:14,690 --> 00:03:20,345
Bây giờ, một lần nữa đảm bảo rằng máy chủ MongoDB của bạn và máy chủ Loopback của bạn lên và chạy,

43
00:03:20,345 --> 00:03:22,810
đi đến thiết bị đầu cuối và thêm thiết bị đầu cuối.

44
00:03:22,810 --> 00:03:31,405
Loại sợi bắt đầu để bắt đầu ứng dụng Loopback của chúng tôi, ứng dụng React.

45
00:03:31,405 --> 00:03:34,980
Vì vậy, khi ứng dụng khởi chạy trong trình duyệt,

46
00:03:34,980 --> 00:03:40,750
bạn sẽ nhận thấy rằng ứng dụng Loopback-based React hoạt động

47
00:03:40,750 --> 00:03:46,670
chính xác giống như các phiên bản trước của ứng dụng React.

48
00:03:46,670 --> 00:03:48,670
Vì vậy, ở đây chúng tôi có Trang chủ,

49
00:03:48,670 --> 00:03:52,725
sau đó chúng tôi có trang Giới thiệu như chúng tôi thấy ở đây,

50
00:03:52,725 --> 00:03:56,770
sau đó trang Menu nơi các mục Menu được liệt kê ở đây,

51
00:03:56,770 --> 00:04:00,260
trang Liên hệ với chúng tôi như mong đợi.

52
00:04:00,260 --> 00:04:04,535
Sau đó, hãy để tôi quay lại Trang chủ và sau đó đăng nhập bản thân mình với tư cách là Quản trị viên.

53
00:04:04,535 --> 00:04:11,000
Vì vậy, chúng ta hãy đăng nhập với tư cách Quản trị viên,

54
00:04:11,000 --> 00:04:14,480
và sau đó bạn sẽ có thể xem Mục yêu thích của tôi.

55
00:04:14,480 --> 00:04:19,075
Tôi đã đăng nhập trước đó và sau đó thêm một mục vào mục yêu thích của tôi.

56
00:04:19,075 --> 00:04:24,290
Bây giờ chúng ta hãy vào Menu và sau đó thêm một mục thứ hai vào Mục yêu thích của tôi.

57
00:04:24,290 --> 00:04:27,930
Vì vậy, ở đây chúng tôi sẽ thêm mục này vào mục yêu thích,

58
00:04:27,930 --> 00:04:34,850
và sau đó bạn sẽ có thể thấy rằng cả hai mục này bây giờ trong mục yêu thích của tôi.

59
00:04:34,850 --> 00:04:38,194
Tương tự như vậy, bạn có thể xóa các mục khỏi mục yêu thích.

60
00:04:38,194 --> 00:04:42,020
Vì vậy, chúng ta hãy tiếp tục và xóa điều này khỏi Mục yêu thích của chúng tôi.

61
00:04:42,020 --> 00:04:43,490
Quay trở lại mục Menu,

62
00:04:43,490 --> 00:04:47,550
chúng ta hãy thêm nhận xét cho một trong các món ăn.

63
00:04:47,550 --> 00:04:49,560
Vì vậy, hãy để tôi nhấp vào món ăn này,

64
00:04:49,560 --> 00:04:51,855
và sau đó chúng tôi sẽ gửi một bình luận.

65
00:04:51,855 --> 00:05:01,980
Vì vậy, khi chúng tôi gửi một nhận xét,

66
00:05:01,980 --> 00:05:05,175
như bạn có thể thấy, nhận xét được thêm vào

67
00:05:05,175 --> 00:05:09,710
máy chủ của chúng tôi ở đó như

68
00:05:09,710 --> 00:05:15,690
mong đợi và kết quả được hiển thị trong trang Dish Detail ở đây.

69
00:05:15,690 --> 00:05:18,660
Một lần nữa quay trở lại Trang chủ,

70
00:05:19,260 --> 00:05:24,650
chúng tôi thấy rằng ứng dụng React của chúng tôi bây giờ có thể giao tiếp với

71
00:05:24,650 --> 00:05:27,740
máy chủ Loopback và sau đó lấy

72
00:05:27,740 --> 00:05:31,465
dữ liệu từ máy chủ và tương tác với máy chủ như mong đợi.

73
00:05:31,465 --> 00:05:35,160
Bây giờ, tất nhiên, câu hỏi sẽ nảy sinh trong tâm trí của bạn là,

74
00:05:35,160 --> 00:05:41,455
ứng dụng Loopback này giao tiếp với máy chủ Loopback như thế nào?

75
00:05:41,455 --> 00:05:47,610
Bây giờ, đây là nơi chúng tôi sẽ lưu ý rằng đối với Loopback,

76
00:05:47,610 --> 00:05:51,495
vì máy chủ Loopback phơi bày các điểm cuối API REST,

77
00:05:51,495 --> 00:05:55,575
ứng dụng React của tôi có thể truy cập vào máy chủ Loopback tại

78
00:05:55,575 --> 00:05:59,860
các điểm cuối API tương ứng và sau đó giao tiếp với máy chủ,

79
00:05:59,860 --> 00:06:07,845
như chúng tôi đã làm với máy chủ REST API của chúng tôi mà chúng tôi đã thực hiện trước đó.

80
00:06:07,845 --> 00:06:15,020
Vì vậy, chúng ta hãy đi trước và xem mã cho ứng dụng React đã sửa đổi.

81
00:06:15,020 --> 00:06:17,690
Đi đến mã của ứng dụng của chúng tôi,

82
00:06:17,690 --> 00:06:23,200
những thay đổi lớn mà bạn sẽ nhận thấy sẽ nằm trong tệp ActionCreators.js.

83
00:06:23,200 --> 00:06:27,620
Ở đây, bạn sẽ lưu ý rằng chúng tôi đang giao tiếp với máy

84
00:06:27,620 --> 00:06:33,930
chủ Loopback thay vì máy chủ REST API mà chúng tôi đã có trước đó.

85
00:06:33,930 --> 00:06:37,550
Vì vậy, lấy bây giờ sẽ được truy cập vào máy chủ Loopback tại

86
00:06:37,550 --> 00:06:43,800
điểm cuối api/comment hoặc điểm cuối api/dishes và vân vân.

87
00:06:43,800 --> 00:06:52,350
Vì vậy, tất cả các yêu cầu lấy được tất cả đều được cập nhật để truy cập máy chủ Loopback của chúng tôi ngay lập tức.

88
00:06:52,700 --> 00:06:56,215
Vì vậy, bạn sẽ nhận thấy những thay đổi tương tự ở đó.

89
00:06:56,215 --> 00:07:00,095
Bây giờ, ngoài việc đăng nhập vào máy chủ Loopback của chúng tôi,

90
00:07:00,095 --> 00:07:08,190
vì vậy chúng ta hãy đi đến mã đăng nhập ở đây.

91
00:07:08,190 --> 00:07:09,750
Vì vậy, trong người dùng đăng nhập,

92
00:07:09,750 --> 00:07:18,035
chúng tôi đang đăng tải một tải đến baseURL và API/khách hàng/đăng nhập điểm cuối,

93
00:07:18,035 --> 00:07:25,260
và sau đó chúng tôi sẽ cung cấp các thông tin đăng nhập trong nội dung của thông báo yêu cầu đi ra ngoài.

94
00:07:25,260 --> 00:07:27,215
Để đáp lại điều đó,

95
00:07:27,215 --> 00:07:29,830
máy chủ sẽ gửi lại phản hồi.

96
00:07:29,830 --> 00:07:33,950
Phản ứng sau đó chứa thông tin mã thông báo.

97
00:07:33,950 --> 00:07:38,905
Thông tin mã thông báo được gửi trở lại dưới dạng

98
00:07:38,905 --> 00:07:44,790
ID của tin nhắn trả lời.

99
00:07:44,790 --> 00:07:47,325
Vì vậy, bản thân ID phục vụ như là mã thông báo.

100
00:07:47,325 --> 00:07:49,545
Vì vậy, tin nhắn trả lời chính nó,

101
00:07:49,545 --> 00:07:55,200
tôi sẽ lưu này vào lưu trữ cục bộ của tôi như được hiển thị ở đây.

102
00:07:55,200 --> 00:07:59,320
Chúng tôi stringify thông điệp phản hồi và sau đó lưu trữ nó trong đó.

103
00:07:59,320 --> 00:08:06,945
Thông báo phản ứng này, Response.id, chứa mã thông báo.

104
00:08:06,945 --> 00:08:12,815
Vì vậy, response.id đóng vai trò như JSON Web Token để truy cập vào máy chủ Loopback.

105
00:08:12,815 --> 00:08:15,650
Vì vậy, đó là lý do tại sao bạn sẽ nhận thấy rằng trong

106
00:08:15,650 --> 00:08:19,235
những tình huống mà tôi cần phải truy cập vào máy chủ, vì vậy ví dụ,

107
00:08:19,235 --> 00:08:25,520
chúng tôi sẽ nhận thấy rằng khi chúng tôi đang lấy hoặc đăng yêu thích của bạn vào máy chủ,

108
00:08:25,520 --> 00:08:28,550
bạn sẽ nhận thấy rằng tôi có được mã thông báo bằng cách nói,

109
00:08:28,550 --> 00:08:30,420
cho phép mã thông báo, phân tích JSON,

110
00:08:30,420 --> 00:08:33,990
LocalStorage, GetItem, token ở đây,

111
00:08:33,990 --> 00:08:38,890
và sau đó trong lĩnh vực tiêu đề ủy quyền,

112
00:08:38,890 --> 00:08:44,300
tôi đã nói lĩnh vực ủy quyền để được token.id ở đây như được hiển thị ở đây.

113
00:08:44,300 --> 00:08:51,380
Vì vậy, đó là cách chúng tôi sẽ có thể xác thực chính mình với máy chủ Loopback.

114
00:08:51,380 --> 00:08:55,450
Vì vậy, ở đây bạn thấy rằng nó nói, BaseURL, api/yêu thích,

115
00:08:55,450 --> 00:08:59,440
và sau đó có được danh sách các mục yêu thích từ máy chủ,

116
00:08:59,440 --> 00:09:03,430
và sau đó lưu nó vào cửa hàng redux của chúng tôi.

117
00:09:03,430 --> 00:09:06,710
Vì vậy, tốt, nhiều mã vẫn giữ nguyên,

118
00:09:06,710 --> 00:09:09,740
ngoại trừ các bản cập nhật mà chúng tôi đã thực hiện để

119
00:09:09,740 --> 00:09:13,455
truy cập vào các điểm cuối REST API Loopbacks.

120
00:09:13,455 --> 00:09:22,665
Bây giờ, đối với Angular, chúng tôi có một Loopback SDK có thể được xây dựng cho ứng dụng Angular của chúng tôi.

121
00:09:22,665 --> 00:09:27,070
Nhưng đối với React, không có hỗ trợ như vậy có sẵn từ Loopback,

122
00:09:27,070 --> 00:09:30,460
và vì vậy chúng tôi phải sử dụng trực tiếp truy cập

123
00:09:30,460 --> 00:09:34,840
các điểm cuối API Loopback như được hiển thị ở đây bằng cách sử dụng fetch,

124
00:09:34,840 --> 00:09:38,860
và sau đó chúng tôi có thể giao tiếp với máy chủ Loopback.

125
00:09:38,860 --> 00:09:42,115
Với sự hiểu biết nhanh chóng về cách

126
00:09:42,115 --> 00:09:48,360
ứng dụng React của chúng tôi đã được cập nhật để truy cập vào máy chủ Loopback của

127
00:09:48,360 --> 00:09:51,795
chúng tôi, chúng tôi hoàn thành việc kiểm tra máy chủ Loopback.

128
00:09:51,795 --> 00:09:56,980
Hãy dành nhiều thời gian hơn để tìm kiếm một số thành phần và

129
00:09:56,980 --> 00:10:02,340
xem chúng đang sử dụng thông tin thu được từ máy chủ Loopback như thế nào.

130
00:10:02,340 --> 00:10:06,530
Bạn sẽ nhận thấy rằng hầu hết các thành phần vẫn chính xác giống như trước,

131
00:10:06,530 --> 00:10:13,650
ngoại trừ một số sửa đổi nhỏ trong thành phần yêu thích để có được

132
00:10:13,650 --> 00:10:18,495
thông tin từ máy chủ Loopback

133
00:10:18,495 --> 00:10:22,700
và sau đó sử dụng nó để hiển thị danh sách các mục yêu thích.

134
00:10:22,700 --> 00:10:29,545
Ngoài ra, nhiều thay đổi được giới hạn trong tập tin ActionCreators.js,

135
00:10:29,545 --> 00:10:34,260
nơi chúng tôi đã cập nhật trình lấy để sử dụng URL cho

136
00:10:34,260 --> 00:10:41,125
máy chủ Loopback của chúng tôi để có thể truy cập các điểm cuối REST API khác nhau.

137
00:10:41,125 --> 00:10:48,460
Vì vậy, với điều này, tôi đã nhanh chóng chứng minh cho bạn cách bạn có thể xây dựng ứng dụng của bạn.

138
00:10:48,460 --> 00:10:51,590
Với giới thiệu nhanh chóng này về cách chúng

139
00:10:51,590 --> 00:10:54,755
ta có thể sử dụng Loopback trong ứng dụng của

140
00:10:54,755 --> 00:10:59,110
chúng tôi, chúng tôi đi đến cuối bài tập này.