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ủ API Rest đầ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 ta thích ứng với ứng dụng Angular để sử dụng máy chủ Rest API này?

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

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

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

7
00:00:31,385 --> 00:00:37,190
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:37,190 --> 00:00:40,295
Bây giờ, đây là nơi chúng tôi sẽ tận dụng lợi thế của

9
00:00:40,295 --> 00:00:46,865
một LoopBack SDK có thể được tự động xây dựng cho chúng tôi bằng cách sử dụng một mô-đun Node.

10
00:00:46,865 --> 00:00:51,214
Chúng tôi sẽ xem xét các máy chủ LoopBack của chúng tôi,

11
00:00:51,214 --> 00:00:56,975
các điểm cuối API Rest khác nhau và tự động xây dựng SDK,

12
00:00:56,975 --> 00:00:59,480
sau đó chúng tôi có thể kết hợp vào

13
00:00:59,480 --> 00:01:04,380
ứng dụng Angular của chúng tôi và sau đó có thể giao tiếp với máy chủ LoopBack của chúng tôi,

14
00:01:04,380 --> 00:01:10,055
cả để xác thực và cũng có thể trao đổi dữ liệu.

15
00:01:10,055 --> 00:01:13,000
Để bắt đầu bài tập này,

16
00:01:13,000 --> 00:01:17,045
trước tiên hãy sao chép kho git chứa

17
00:01:17,045 --> 00:01:23,535
một ứng dụng Angular hoàn thành một phần giao tiếp với máy chủ LoopBack của chúng tôi.

18
00:01:23,535 --> 00:01:26,730
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.

19
00:01:26,730 --> 00:01:29,580
Vì vậy, ở đây tôi đang ở trong thư mục Coursera Angular của tôi.

20
00:01:29,580 --> 00:01:33,390
Tôi sẽ sao chép các kho lưu trữ git bằng cách

21
00:01:33,390 --> 00:01:35,680
gõ git clone

22
00:01:41,510 --> 00:01:51,270
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git,

23
00:01:51,270 --> 00:01:54,160
và sau đó sao chép kho lưu trữ git này.

24
00:01:55,460 --> 00:01:58,645
Một khi kho git được nhân bản,

25
00:01:58,645 --> 00:02:08,355
sau đó chúng ta sẽ di chuyển vào thư mục Confance Angular6 LoopBack và sau đó

26
00:02:08,355 --> 00:02:12,370
thực hiện một cài đặt NPM để cài đặt

27
00:02:12,370 --> 00:02:19,135
tất cả các module nút cho ứng dụng Angular hoàn thành một phần này.

28
00:02:19,135 --> 00:02:26,670
Để tự động xây dựng bộ phát triển phần mềm LoopBack cho máy chủ LoopBack của

29
00:02:26,670 --> 00:02:32,125
chúng tôi, chúng tôi sẽ có sự trợ giúp của mô-đun nút LoopBack SDK Builder này.

30
00:02:32,125 --> 00:02:34,955
Vì vậy, LoopBack SDK Builder này

31
00:02:34,955 --> 00:02:39,140
là một mô-đun nút theo hướng cộng đồng thực sự được phát triển

32
00:02:39,140 --> 00:02:46,380
từ LoopBack SDK Angular chính thức mà các nhà phát triển LoopBack đã phát hành.

33
00:02:46,380 --> 00:02:50,160
Loopback SDK Angular hỗ trợ Angular JS.

34
00:02:50,160 --> 00:02:53,885
Vì vậy, điều này đã được sửa đổi trong Loopback SDK Builder này

35
00:02:53,885 --> 00:02:58,390
để hỗ trợ Angular two và về các ứng dụng.

36
00:02:58,390 --> 00:03:01,090
Vì vậy, LoopBack SDK Builder,

37
00:03:01,090 --> 00:03:10,155
mô-đun nút chính nó một khi nó được cài đặt vào thư mục dự án máy chủ của bạn,

38
00:03:10,155 --> 00:03:13,610
sau đó bạn có thể sử dụng LoopBack SDK Builder để

39
00:03:13,610 --> 00:03:18,810
tự động đi qua ứng dụng LoopBack của bạn mà bạn đã xây dựng.

40
00:03:18,810 --> 00:03:22,190
Điều này sẽ tự động xây dựng mọi thứ chúng ta

41
00:03:22,190 --> 00:03:25,610
cần để bắt đầu trên ứng dụng Angular của chúng tôi.

42
00:03:25,610 --> 00:03:27,765
Vì vậy, nó xây dựng bộ phát triển phần mềm.

43
00:03:27,765 --> 00:03:30,155
Vì vậy, trong bộ phát triển phần mềm,

44
00:03:30,155 --> 00:03:35,995
LoopBack SDK Builder xuất khẩu tất cả các giao diện,

45
00:03:35,995 --> 00:03:41,930
tất cả các mô hình cho các dữ liệu khác nhau mà chúng tôi sẽ được lưu trữ trên

46
00:03:41,930 --> 00:03:44,390
máy chủ LoopBack của chúng tôi và cũng

47
00:03:44,390 --> 00:03:49,520
tất cả các dịch vụ API có thể được sử dụng trong ứng dụng Angular của bạn.

48
00:03:49,520 --> 00:03:55,485
Vì vậy, các mô hình và dịch vụ của bạn sẽ tự động đi xe một khi bạn xây dựng SDK.

49
00:03:55,485 --> 00:04:00,935
Bây giờ nó chỉ là vấn đề kết hợp SDK này vào ứng dụng Angular của chúng tôi,

50
00:04:00,935 --> 00:04:03,265
và sau đó nhanh chóng bắt đầu.

51
00:04:03,265 --> 00:04:08,010
Kể từ khi chúng tôi đã xây dựng ứng dụng Angular của chúng

52
00:04:08,010 --> 00:04:11,900
tôi trong một khóa học trước đó, tôi sẽ trang bị thêm ứng dụng đó để sử dụng

53
00:04:11,900 --> 00:04:16,660
LoopBack SDK mà chúng tôi sẽ xuất khẩu từ này LoopBack SDK Builder.

54
00:04:16,660 --> 00:04:18,620
Trong bước trước,

55
00:04:18,620 --> 00:04:20,030
bạn vừa cài đặt

56
00:04:20,030 --> 00:04:23,420
ứng dụng Angular đã hoàn thành một phần

57
00:04:23,420 --> 00:04:27,305
đã được điều chỉnh để sử dụng LoopBack SDK.

58
00:04:27,305 --> 00:04:30,070
Vì vậy, chúng ta hãy đi trước và xây dựng

59
00:04:30,070 --> 00:04:33,855
LoopBack SDK và sau đó triển khai nó vào ứng dụng Angular của chúng tôi,

60
00:04:33,855 --> 00:04:41,605
và sau đó đi trước và biên dịch ứng dụng Angular của chúng tôi và bắt đầu với nó.

61
00:04:41,605 --> 00:04:44,390
Để thiết lập LoopBack SDK,

62
00:04:44,390 --> 00:04:51,830
hãy vào thư mục máy chủ LoopBack trong tab thiết bị đầu cuối của bạn hoặc trong cửa sổ lệnh của bạn.

63
00:04:51,830 --> 00:04:57,355
Vì vậy, ở đây tôi đang ở trong thư mục máy chủ LoopBack của tôi.

64
00:04:57,355 --> 00:04:58,855
Vì vậy, trong thư mục này,

65
00:04:58,855 --> 00:05:14,185
hãy để tôi đi trước và cài đặt LoopBack

66
00:05:14,185 --> 00:05:16,960
SDK Builder.

67
00:05:16,960 --> 00:05:19,535
Một khi trình xây dựng được cài đặt,

68
00:05:19,535 --> 00:05:22,625
chúng ta hãy đi trước và xây dựng LoopBack SDK.

69
00:05:22,625 --> 00:05:24,835
Để xây dựng LoopBack SDK,

70
00:05:24,835 --> 00:05:34,460
chúng tôi sẽ lấy sự trợ giúp của công cụ dòng lệnh LB-SDK mà mô-đun LoopBack SDK này,

71
00:05:34,460 --> 00:05:36,370
tự động cấu hình cho chúng tôi.

72
00:05:36,370 --> 00:05:42,060
Vì vậy, để truy cập vào đó, chúng tôi sẽ nói,. /nút mô-đun.

73
00:05:42,060 --> 00:05:43,610
Vì vậy, trong các mô-đun nút,

74
00:05:43,610 --> 00:05:47,570
có thư mục a.bin được tự động tạo ra bất cứ khi nào bạn

75
00:05:47,570 --> 00:05:51,770
cài đặt các mô-đun nút khác nhau vào thư mục đó.

76
00:05:51,770 --> 00:05:55,040
Vì vậy, để đi đến thư mục the.bin,

77
00:05:55,040 --> 00:06:01,540
chúng tôi sẽ truy cập lệnh LB-SDK này ở

78
00:06:01,540 --> 00:06:03,490
đó, được cài đặt tự động,

79
00:06:03,490 --> 00:06:07,850
sau đó chúng tôi sẽ gọi máy chủ chiều rộng này. /server.js,

80
00:06:12,430 --> 00:06:20,310
và chúng ta cần xác định đường dẫn đến ứng dụng Angular mà chúng ta vừa cấu hình.

81
00:06:20,310 --> 00:06:23,180
Vì vậy, ứng dụng Angular của tôi hiện đang trong

82
00:06:23,180 --> 00:06:28,865
tài liệu của tôi Coursera góc Confect thư mục LoopBack góc.

83
00:06:28,865 --> 00:06:31,410
Vậy, để tôi sao chép phần đó lại.

84
00:06:31,410 --> 00:06:36,470
Sau đó, cho phép tôi đi vào thiết bị đầu cuối của tôi hoặc cửa sổ lệnh

85
00:06:36,470 --> 00:06:41,600
nơi tôi đang cố gắng để cấu hình LoopBack SDK của tôi.

86
00:06:41,600 --> 00:06:43,490
Vì vậy, tại dấu nhắc,

87
00:06:43,490 --> 00:06:45,995
vì nó nằm trong thư mục My Documents,

88
00:06:45,995 --> 00:06:55,540
tôi sẽ gõ vào đường dẫn đầy đủ để điều này bắt đầu từ thư mục gốc của tôi trong mac của tôi.

89
00:06:55,540 --> 00:06:57,680
Nếu bạn đang sử dụng Windows của họ,

90
00:06:57,680 --> 00:07:04,370
hãy chắc chắn rằng đường dẫn này cho biết đường dẫn hoàn chỉnh bắt đầu từ dấu hai chấm C hoặc dấu hai chấm D,

91
00:07:04,370 --> 00:07:07,540
bất cứ ổ đĩa nào bạn đang cài đặt nó trên máy Windows của bạn.

92
00:07:07,540 --> 00:07:12,650
Vì vậy, đường dẫn hoàn chỉnh đến thư mục LoopBack góc cạnh của bạn,

93
00:07:12,650 --> 00:07:15,505
và sau đó chúng ta sẽ nói,

94
00:07:15,505 --> 00:07:21,900
/SRC, thư mục nguồn ở đó, và sau đó ứng dụng.

95
00:07:21,900 --> 00:07:24,710
Sau đó, chúng tôi sẽ triển khai SDK vào thư

96
00:07:24,710 --> 00:07:30,120
mục được chia sẻ trong thư mục con SDK ở đó.

97
00:07:30,430 --> 00:07:36,680
Chúng tôi muốn LoopBack SDK Builder này

98
00:07:36,680 --> 00:07:43,570
tự động triển khai phiên bản web NG2 của SDK.

99
00:07:43,570 --> 00:07:45,879
Vì vậy, đây là phiên bản sẽ hỗ trợ các

100
00:07:45,879 --> 00:07:50,380
ứng dụng web và ứng dụng Angular của chúng tôi trong trường hợp này.

101
00:07:50,380 --> 00:07:54,870
Nếu bạn đang xây dựng điều này cho một ứng dụng kịch bản gốc, sau đó bạn sẽ nói,

102
00:07:54,870 --> 00:08:00,050
NG2 gốc để xây dựng SDK cho ứng dụng Native Script.

103
00:08:00,050 --> 00:08:02,380
Kể từ khi tôi đang xây dựng ứng dụng Angular của

104
00:08:02,380 --> 00:08:04,580
tôi, tôi sẽ chỉ nói, NG2 web,

105
00:08:04,580 --> 00:08:08,190
và sau đó để cho Loopback SDK Builder tự động

106
00:08:08,190 --> 00:08:12,230
xây dựng bộ phát triển phần mềm và sau đó triển khai nó

107
00:08:12,230 --> 00:08:20,780
vào ứng dụng Angular của tôi nguồn/shared/sdk thư mục đó.

108
00:08:20,780 --> 00:08:23,715
Vì vậy, sau một vài giây,

109
00:08:23,715 --> 00:08:29,915
SDK được xây dựng và triển khai ứng dụng Angular của tôi.

110
00:08:29,915 --> 00:08:33,250
Bây giờ trước khi tôi bắt đầu ứng dụng Angular của tôi,

111
00:08:33,250 --> 00:08:36,730
hãy để tôi khởi động máy chủ LoopBack của

112
00:08:36,730 --> 00:08:40,820
tôi, và trước khi tôi làm điều đó tôi sẽ đi đến một tab thiết bị đầu cuối

113
00:08:40,820 --> 00:08:44,900
ở đây và sau đó khởi động máy chủ MongoDB của tôi,

114
00:08:44,900 --> 00:08:45,955
vì vậy tôi sẽ nói,

115
00:08:45,955 --> 00:08:55,790
Mongod —dbpath=data, và sau đó

116
00:08:55,790 --> 00:08:57,890
khởi động máy chủ MongoDB của tôi.

117
00:08:57,890 --> 00:09:02,760
Trước tiên, hãy để tôi khởi động máy chủ LoopBack của mình.

118
00:09:02,760 --> 00:09:07,710
Vì vậy, tại dấu nhắc NPM bắt đầu,

119
00:09:07,710 --> 00:09:12,140
và máy chủ LoopBack của tôi nên được lên và chạy trong một thời gian ngắn.

120
00:09:12,140 --> 00:09:17,555
Sau đó, bây giờ đi đến ứng dụng LoopBack của

121
00:09:17,555 --> 00:09:20,645
tôi, cho phép tôi mở ứng dụng này trong

122
00:09:20,645 --> 00:09:25,890
mã Visual Studio của tôi để chúng ta có thể nhìn vào mã nguồn.

123
00:09:27,500 --> 00:09:31,665
Một khi ứng dụng của tôi được mở trong Visual Studio mã,

124
00:09:31,665 --> 00:09:37,315
hãy để tôi đưa vào một cửa sổ máy tính để bàn mới.

125
00:09:37,315 --> 00:09:45,200
Sau đó, cho phép tôi cũng bắt đầu triển khai ứng dụng Angular của tôi

126
00:09:45,200 --> 00:09:53,645
bằng cách gõ NGServe tại dấu nhắc và chờ cho ứng dụng Angular của tôi để được biên dịch.

127
00:09:53,645 --> 00:09:57,785
Một khi ứng dụng Angular của tôi được biên dịch và áp dụng,

128
00:09:57,785 --> 00:10:00,910
hãy để tôi đi đến một trình duyệt,

129
00:10:00,910 --> 00:10:04,810
và sau đó đầu tiên kiểm tra ứng dụng Angular này.

130
00:10:04,810 --> 00:10:06,935
Đi đến trình duyệt,

131
00:10:06,935 --> 00:10:09,455
hãy để tôi mở một tab mới ở đây,

132
00:10:09,455 --> 00:10:13,760
và sau đó nhập localhost: 4200 và bạn sẽ thấy

133
00:10:13,760 --> 00:10:18,345
ứng dụng Angular được triển khai vào cửa sổ trình duyệt này,

134
00:10:18,345 --> 00:10:21,070
và bạn có thể thấy rằng

135
00:10:21,070 --> 00:10:25,095
Trang chủ, trang Giới thiệu về chúng tôi với tất cả các dữ liệu,

136
00:10:25,095 --> 00:10:32,740
sau đó Menu và cũng yêu thích của tôi.

137
00:10:34,120 --> 00:10:38,410
Hiện nay không hiển thị bất cứ điều gì vì

138
00:10:38,410 --> 00:10:42,640
không có người dùng đăng nhập và trang liên hệ, giống như trước đây.

139
00:10:42,640 --> 00:10:47,520
Vì vậy, để đăng nhập, hãy để tôi đăng nhập như một người dùng và sau đó tôi sẽ gõ

140
00:10:47,520 --> 00:10:52,540
vào tên người dùng và mật khẩu của tôi ở đây,

141
00:10:52,540 --> 00:10:59,030
và sau đó một khi tôi đăng nhập sau đó bạn sẽ có thể thấy rằng khi tôi đi đến mục yêu thích của tôi, yêu

142
00:10:59,030 --> 00:11:04,665
thích của người dùng cụ thể này sẽ được hiển thị ở đây.

143
00:11:04,665 --> 00:11:08,680
Giống như trước đây, chúng tôi có thể nhập nhận xét và sau đó gửi nhận xét,

144
00:11:08,680 --> 00:11:13,515
và sau đó cũng thêm các mục vào mục yêu thích và vân vân.

145
00:11:13,515 --> 00:11:16,900
Tất cả các chức năng mà bạn đã thấy với các phiên bản trước

146
00:11:16,900 --> 00:11:22,740
của ứng dụng Angular cũng được hỗ trợ trong phiên bản này của ứng dụng Angular.

147
00:11:22,740 --> 00:11:28,860
Ngoài ra để máy chủ LoopBack của bạn có thể phục vụ lên hình ảnh,

148
00:11:28,860 --> 00:11:36,235
tất cả dữ liệu này sẽ được lưu trữ trong mã máy chủ của bạn trong thư mục khách hàng của mã máy chủ.

149
00:11:36,235 --> 00:11:39,975
Vì vậy, trong thư mục khách hàng của máy chủ LoopBack của tôi,

150
00:11:39,975 --> 00:11:43,010
chú ý rằng tôi đã tạo ra thư mục phụ này có

151
00:11:43,010 --> 00:11:47,365
tên là hình ảnh và sau đó lưu trữ tất cả các hình ảnh vào thư mục con.

152
00:11:47,365 --> 00:11:52,010
Bây giờ, để những hình ảnh này được phục vụ và cũng cho

153
00:11:52,010 --> 00:11:58,930
thư mục khách hàng được sử dụng làm thư mục công cộng cho máy chủ LoopBack

154
00:11:58,930 --> 00:12:02,630
của tôi, sau đó trong một vài thay đổi mà tôi cần phải thực hiện cho máy chủ LoopBack của tôi.

155
00:12:02,630 --> 00:12:05,100
Bây giờ, điều đầu tiên mà bạn cần làm là,

156
00:12:05,100 --> 00:12:08,275
đi vào thư mục khởi động và trong thư mục khởi động,

157
00:12:08,275 --> 00:12:12,250
bạn sẽ thấy tệp root.js này ở đây,

158
00:12:12,250 --> 00:12:15,025
chứa thông tin này ở đây.

159
00:12:15,025 --> 00:12:18,410
Bây giờ, bạn có thể xóa tệp root.js

160
00:12:18,410 --> 00:12:22,330
hoặc chỉ cần đổi tên tệp root.js thành tệp khác.

161
00:12:22,330 --> 00:12:29,630
Vì vậy, ở đây, bạn thấy rằng tôi đã đổi tên tập tin này để root.jsold với jsold mở rộng.

162
00:12:29,630 --> 00:12:34,190
Bây giờ, tập tin này không nên chứa phần mở rộng the.js nữa.

163
00:12:34,190 --> 00:12:37,430
Vì vậy, bất cứ điều gì khác hơn là the.js mở rộng là tốt.

164
00:12:37,430 --> 00:12:39,975
Vì vậy, điều này có nghĩa là trong trường hợp này,

165
00:12:39,975 --> 00:12:45,250
máy chủ LoopBack của tôi, khi nó khởi động sẽ không thực thi mã trong thư mục này.

166
00:12:45,250 --> 00:12:51,745
Bây giờ, khi bạn nhìn vào mã trong tệp root.js được cấu hình trước đó,

167
00:12:51,745 --> 00:12:55,605
bạn thấy rằng bộ định tuyến đã được cấu hình như vậy mà,

168
00:12:55,605 --> 00:13:00,955
khi bạn truy cập vào dấu gạch chéo là thư mục gốc của máy chủ của bạn,

169
00:13:00,955 --> 00:13:05,170
sau đó nó sẽ chỉ đơn giản phục vụ lên trạng thái máy chủ LoopBack và thực sự,

170
00:13:05,170 --> 00:13:08,175
đó là những gì chúng ta thấy máy chủ LoopBack của chúng tôi phục vụ

171
00:13:08,175 --> 00:13:15,055
thời gian hoạt động và thời gian khởi động lại cuối cùng cho máy chủ của chúng tôi.

172
00:13:15,055 --> 00:13:16,590
Chúng tôi không muốn nó để làm điều đó,

173
00:13:16,590 --> 00:13:20,920
thay vào đó chúng tôi muốn máy chủ LoopBack của chúng tôi để có thể sử dụng bất cứ điều gì chúng tôi

174
00:13:20,920 --> 00:13:25,390
đặt trong thư mục khách hàng như là thư mục công cộng và do đó

175
00:13:25,390 --> 00:13:27,900
bất kỳ ứng dụng khách hàng có thể được triển khai vào

176
00:13:27,900 --> 00:13:31,590
thư mục khách hàng của máy chủ LoopBack của tôi và nên được

177
00:13:31,590 --> 00:13:39,250
truy cập khi chúng tôi truy cập LoopBack máy chủ tại điểm kết thúc dấu gạch chéo tiêu chuẩn của nó.

178
00:13:39,250 --> 00:13:43,940
Vì vậy, đó là thư mục gốc của thư mục máy chủ.

179
00:13:43,940 --> 00:13:46,890
Vì vậy, để làm điều đó, điều đầu tiên mà bạn cần làm là để

180
00:13:46,890 --> 00:13:50,560
thay đổi tên tập tin root.js này để root.

181
00:13:50,560 --> 00:13:53,245
ví dụ, bạn chỉ cần đổi tên nó thành

182
00:13:53,245 --> 00:13:56,440
root.jsold hoặc bạn chỉ có thể xóa tập tin đó.

183
00:13:56,440 --> 00:14:00,325
Tập tin đó sẽ không cần thiết trong phiên bản này của máy chủ LoopBack của tôi.

184
00:14:00,325 --> 00:14:01,840
Bây giờ, không chỉ vậy,

185
00:14:01,840 --> 00:14:08,265
phần thứ hai mà bạn cần cấu hình lại là đi vào tập tin middleware.json ở đây.

186
00:14:08,265 --> 00:14:10,230
Tệp middleware.json.

187
00:14:10,230 --> 00:14:12,170
Trong tập tin middleware.json,

188
00:14:12,170 --> 00:14:14,605
nếu bạn di chuyển xuống,

189
00:14:14,605 --> 00:14:17,195
bạn sẽ thấy rằng ở đây,

190
00:14:17,195 --> 00:14:23,755
ban đầu điều này sẽ chỉ đơn giản chứa các tập tin: và sau đó một cú đúp trống ở đây.

191
00:14:23,755 --> 00:14:26,505
Bây giờ, vào cú đúp trống ở đây,

192
00:14:26,505 --> 00:14:28,420
chỉ cần thêm mã này ở đây,

193
00:14:28,420 --> 00:14:36,430
trong đó nói loopback #static và nó nói params$!.. /client.

194
00:14:36,820 --> 00:14:41,025
Vì vậy, điều này sẽ chỉ ra cho máy chủ LoopBack của tôi

195
00:14:41,025 --> 00:14:45,670
rằng thư mục khách hàng có sẵn ở đây

196
00:14:45,670 --> 00:14:53,800
nên được sử dụng như là thư mục công cộng tĩnh cho máy chủ LoopBack của tôi.

197
00:14:53,800 --> 00:14:58,790
Vì vậy, bất cứ điều gì được đặt trong thư mục khách hàng có thể được truy cập từ máy chủ của tôi.

198
00:14:58,790 --> 00:15:05,725
Vì vậy, đây là sự thay đổi bổ sung mà bạn cần làm đối với tập tin middleware.json.

199
00:15:05,725 --> 00:15:08,235
Vì vậy, một khi bạn thực hiện hai thay đổi này,

200
00:15:08,235 --> 00:15:15,030
sau đó máy chủ LoopBack của bạn sẽ được tất cả cấu hình để phục vụ lên dữ liệu bao gồm

201
00:15:15,030 --> 00:15:17,940
các hình ảnh mà bạn sẽ đưa

202
00:15:17,940 --> 00:15:22,575
vào thư mục con hình ảnh dưới thư mục khách hàng ở đây.

203
00:15:22,575 --> 00:15:28,475
Vì vậy, hãy chắc chắn để sao chép các hình ảnh vào thư mục khách hàng ở đây và thứ hai là để

204
00:15:28,475 --> 00:15:34,625
đi đến tập tin middleware.json trong thư mục máy chủ,

205
00:15:34,625 --> 00:15:37,265
và sau đó cập nhật phần này.

206
00:15:37,265 --> 00:15:43,860
Một khi chúng tôi làm điều đó, sau đó những hình ảnh này có thể được truy cập bằng cách đơn giản truy cập vào

207
00:15:43,860 --> 00:15:48,760
các /images/ tên tập tin hình ảnh để truy cập vào

208
00:15:48,760 --> 00:15:54,120
những hình ảnh này bởi vì các món ăn

209
00:15:54,120 --> 00:16:00,390
, nhà lãnh đạo của chúng tôi, và các chương trình khuyến mãi sẽ yêu cầu các tập tin hình ảnh này và

210
00:16:00,390 --> 00:16:03,525
do đó sẽ có sẵn cho chúng tôi từ

211
00:16:03,525 --> 00:16:08,080
máy chủ LoopBack và cũng bất cứ điều gì bạn đặt trong thư mục khách hàng.

212
00:16:08,080 --> 00:16:14,050
Vì vậy, ví dụ, bạn có thể chuẩn bị thư mục phân phối

213
00:16:14,050 --> 00:16:16,920
cho ứng dụng Angular của bạn và chỉ cần sao chép

214
00:16:16,920 --> 00:16:21,025
toàn bộ nội dung thư mục phân phối vào thư mục khách hàng ở đây,

215
00:16:21,025 --> 00:16:25,220
và sau đó nếu bạn truy cập vào máy chủ LoopBack tại

216
00:16:25,220 --> 00:16:30,850
điểm cuối gốc tiêu chuẩn của nó

217
00:16:30,850 --> 00:16:37,565
sau đó ứng dụng Angular của bạn sẽ tự động phục vụ bởi máy chủ LoopBack của bạn.

218
00:16:37,565 --> 00:16:43,950
Vì vậy, đây là hai thay đổi mà bạn cần thực hiện cho máy chủ LoopBack của bạn.

219
00:16:43,950 --> 00:16:49,700
Tất nhiên, bạn phải tò mò về cách chính xác SDK này được xây dựng,

220
00:16:49,700 --> 00:16:52,820
đâu chính xác là SDK này và

221
00:16:52,820 --> 00:16:56,045
làm thế nào tôi thực sự sẽ sử dụng nó trong ứng dụng Angular của tôi.

222
00:16:56,045 --> 00:17:01,955
Vì vậy, để làm điều đó, chúng ta hãy đi đến ứng dụng Angular của chúng tôi và trong thư mục

223
00:17:01,955 --> 00:17:04,375
nguồn, dưới thư mục ứng dụng nguồn,

224
00:17:04,375 --> 00:17:06,565
bây giờ khi bạn mở thư mục chia sẻ,

225
00:17:06,565 --> 00:17:13,235
bạn sẽ thấy rằng có một thư mục con ở đây có tên là SDK và bên trong thư mục con SDK này,

226
00:17:13,235 --> 00:17:16,365
bạn sẽ tìm thấy một bó toàn bộ các tập tin ở đây,

227
00:17:16,365 --> 00:17:22,565
lb.config.ts. index.t và trong các ổ cắm lưu trữ,

228
00:17:22,565 --> 00:17:25,330
các dịch vụ, và bên trong dịch vụ,

229
00:17:25,330 --> 00:17:28,255
bạn có các dịch vụ tùy chỉnh và các dịch vụ cốt lõi ở đây,

230
00:17:28,255 --> 00:17:31,960
và các mô hình khác nhau được triển khai ở đây.

231
00:17:31,960 --> 00:17:36,630
Các mô hình thực sự chứa các cấu trúc mô hình

232
00:17:36,630 --> 00:17:42,605
cho các mô hình khác nhau mà chúng tôi đang thực hiện.

233
00:17:42,605 --> 00:17:45,280
Bây giờ, đây là LoopBack SDK.

234
00:17:45,280 --> 00:17:49,430
Mã này được tự động xây dựng cho bạn và nếu bạn muốn,

235
00:17:49,430 --> 00:17:52,800
bạn có thể chỉ cần đi vào và sau đó đi

236
00:17:52,800 --> 00:17:57,030
qua các tập tin này để chỉ xem những gì có sẵn ở đó.

237
00:17:57,030 --> 00:18:00,560
Đảm bảo không sửa đổi bất kỳ tệp nào trong

238
00:18:00,560 --> 00:18:02,940
thư mục con SDK này vì điều này được

239
00:18:02,940 --> 00:18:06,040
tự động xây dựng cho bạn bởi Loopback SDK Builder,

240
00:18:06,040 --> 00:18:10,355
và điều này sẽ chứa tất cả mọi thứ được cấu hình để

241
00:18:10,355 --> 00:18:15,125
máy chủ LoopBack của bạn có thể được truy cập từ ứng dụng Angular của bạn.

242
00:18:15,125 --> 00:18:19,240
Các dịch vụ mà tôi sẽ sử dụng đều có sẵn ở đây.

243
00:18:19,240 --> 00:18:21,630
Bây giờ, làm thế nào để chúng ta sử dụng nó?

244
00:18:21,630 --> 00:18:25,600
Vì vậy, để giúp bạn hiểu cách chúng tôi sử dụng điều này,

245
00:18:25,600 --> 00:18:33,725
hãy truy cập thành phần nhà của chúng tôi và sau đó xem cách các thành phần nhà bây giờ được cập nhật.

246
00:18:33,725 --> 00:18:35,855
Vì vậy, khi bạn đi đến các thành phần nhà,

247
00:18:35,855 --> 00:18:44,125
bạn sẽ nhận thấy rằng tôi bây giờ nhập khẩu các món ăn từ.. /shared/sdk/mô hình.

248
00:18:44,125 --> 00:18:47,950
Vì vậy, đây là các mô hình được tự động xuất khẩu

249
00:18:47,950 --> 00:18:52,390
vào SDK bởi Loopback SDK Builder của tôi.

250
00:18:52,390 --> 00:18:57,010
Vì vậy, đây là nơi mô hình món ăn của tôi sẽ được xác định ở đó.

251
00:18:57,010 --> 00:18:59,450
Vì vậy, tôi sẽ tận dụng mô hình món ăn.

252
00:18:59,450 --> 00:19:06,290
Tương tự như vậy, các dịch vụ chính nó có sẵn như DishesAPI này,

253
00:19:06,290 --> 00:19:15,220
như bạn có thể nhìn thấy ở đây và DishesAPI này là trong.. /shared/sdk/services thư mục ở đây.

254
00:19:15,220 --> 00:19:18,280
Tương tự như vậy, các chương trình khuyến mãi và API chương trình khuyến mãi,

255
00:19:18,280 --> 00:19:20,110
và các nhà lãnh đạo và các nhà lãnh đạo API.

256
00:19:20,110 --> 00:19:24,750
Vì vậy, tất cả đều được xây dựng tự động cho tôi bởi Loopback SDK Builder.

257
00:19:24,750 --> 00:19:26,720
Bây giờ, sau đó bạn đi vào mã,

258
00:19:26,720 --> 00:19:31,045
bây giờ bạn sẽ nhận thấy rằng tôi sẽ tuyên bố các món ăn như các món ăn, khuyến

259
00:19:31,045 --> 00:19:35,455
mãi như chương trình khuyến mãi, và lãnh đạo như /leaders.

260
00:19:35,455 --> 00:19:39,955
Ba là những mô hình được xuất khẩu bởi Loopback SDK Builder.

261
00:19:39,955 --> 00:19:44,905
Cũng lưu ý làm thế nào tôi đã cấu hình lại ba dịch vụ ở đây.

262
00:19:44,905 --> 00:19:48,090
Bây giờ, dịch vụ món ăn của tôi là đề cập đến món ăn API,

263
00:19:48,090 --> 00:19:50,950
dịch vụ khuyến mãi đề cập đến API chương trình khuyến mãi,

264
00:19:50,950 --> 00:19:55,825
và dịch vụ lãnh đạo để API lãnh đạo,

265
00:19:55,825 --> 00:19:59,980
và cũng nhận thấy làm thế nào tôi truy cập vào các dịch vụ món ăn ở đây.

266
00:19:59,980 --> 00:20:06,290
Vì vậy, tôi sẽ nói dịch vụ món ăn này tìm thấy một và nơi đặc trưng bằng đúng.

267
00:20:06,290 --> 00:20:14,539
Vì vậy, đây là nơi bạn nhớ lại rằng trong phần còn lại LoopBack của tôi API Explorer,

268
00:20:14,539 --> 00:20:20,405
Tôi đã gõ này vào bộ lọc có,

269
00:20:20,405 --> 00:20:23,490
sau đó tôi đã cố gắng để tìm các món ăn có.

270
00:20:23,490 --> 00:20:27,260
Vì vậy, đó là chính xác những gì tôi đang làm ở đây cũng trong mã của tôi ở đây.

271
00:20:27,260 --> 00:20:30,140
Vì vậy, Find

272
00:20:30,140 --> 00:20:34,140
One này, sau đó cung cấp với điều này, sẽ tìm thấy một mục và sau đó trả lại rằng ở đây,

273
00:20:34,140 --> 00:20:38,240
và sau đó tôi đang gán mỗi món ăn này ở đây và

274
00:20:38,240 --> 00:20:43,510
phần còn lại của ứng dụng Angular của tôi hoạt động chính xác theo cách tương tự như trước đây.

275
00:20:43,510 --> 00:20:47,490
Bây giờ, cũng nhận thấy rằng trong constructor,

276
00:20:47,490 --> 00:20:52,945
lưu ý làm thế nào tôi đã cấu hình này được gọi là cấu hình LoopBack.

277
00:20:52,945 --> 00:20:59,685
Bây giờ, để làm cấu hình LoopBack trong mọi thành phần mà bạn đang sử dụng,

278
00:20:59,685 --> 00:21:09,280
bạn cần phải nhập cấu hình LoopBack này từ thư mục SDK chia sẻ này ở đây và cũng có thể,

279
00:21:09,280 --> 00:21:13,790
phiên bản API này mà tôi khai báo.

280
00:21:14,410 --> 00:21:19,340
Tôi đã cập nhật tập tin baseurl.t này.

281
00:21:19,340 --> 00:21:21,720
Vì vậy, trong thư mục URL cơ sở,

282
00:21:21,720 --> 00:21:31,330
tôi đã cập nhật này để tên của tôi của tôi dấu hai chấm máy tính của tôi 3.000.

283
00:21:31,330 --> 00:21:35,510
Vì vậy, một trong những đảm bảo để thay thế này với

284
00:21:35,510 --> 00:21:42,460
địa chỉ IP hoặc tên của máy tính cụ thể của bạn mà bạn đang chạy.

285
00:21:42,460 --> 00:21:50,350
Vì vậy, hãy chắc chắn để cập nhật URL cơ sở ở đây và phiên bản API ở đây chỉ đơn giản là một chuỗi.

286
00:21:50,350 --> 00:21:52,560
Nói API ở đây.

287
00:21:52,560 --> 00:21:58,790
Vì vậy, hai sẽ được sử dụng trong tập tin thành phần nhà của tôi.

288
00:21:58,790 --> 00:22:02,560
Vì vậy, tôi đang nhập khẩu phiên bản API này ở đây và Loopbackconfig.

289
00:22:02,560 --> 00:22:05,475
BaseURL tôi đã tiêm

290
00:22:05,475 --> 00:22:10,640
vào constructor của tôi ở đây để đã có sẵn ở đây,

291
00:22:10,640 --> 00:22:14,890
và sau đó trong constructor của tôi của thành phần của tôi,

292
00:22:14,890 --> 00:22:19,440
tôi đã cần phải làm hai báo cáo ở đây.

293
00:22:19,440 --> 00:22:22,190
Vì vậy, chúng ta sẽ nói, “LoopBack thiết lập URL

294
00:22:22,190 --> 00:22:25,120
cơ sở để URL cơ sở” đó là giống như một trong những mà tôi vừa

295
00:22:25,120 --> 00:22:31,950
tiêm có và sau đó nhìn lại trên thiết lập phiên bản API để phiên bản API ở đây.

296
00:22:31,950 --> 00:22:36,695
Vì vậy, hai tôi cần phải cấu hình trong thành phần nhà của tôi

297
00:22:36,695 --> 00:22:41,815
và cũng có bất kỳ thành phần khác mà tôi đang truy cập vào máy chủ LoopBack của

298
00:22:41,815 --> 00:22:43,425
tôi, tôi cần phải cấu hình này.

299
00:22:43,425 --> 00:22:48,060
Bây giờ, LoopBack SDK xây dựng gợi ý rằng chúng ta cần phải

300
00:22:48,060 --> 00:22:53,880
làm điều này trong mỗi một trong những thành phần ở đây.

301
00:22:53,880 --> 00:23:01,775
Ngoài ra, bạn sẽ nhận thấy rằng nếu bạn đi đến các tập tin module.t ứng dụng trong tập tin module.t ứng dụng,

302
00:23:01,775 --> 00:23:08,610
Tôi đã gỡ bỏ tất cả các đầu vào của tất cả các dịch vụ khác và thay vào đó tôi đang nhập khẩu

303
00:23:08,610 --> 00:23:15,480
này ở đây gọi là nhập khẩu SDK trình duyệt module từ chia sẻ SDK đây.

304
00:23:15,480 --> 00:23:18,110
SDK Browser module ở đây,

305
00:23:18,110 --> 00:23:24,075
và nếu bạn đi xuống vào các đầu vào ở đây,

306
00:23:24,075 --> 00:23:31,635
bạn sẽ thấy rằng tôi đã cấu hình này SDK Browser module.ForRoot ở đây trong đầu vào.

307
00:23:31,635 --> 00:23:38,180
Vì vậy, mô-đun SDK Browser này được tự động cấu hình khi chúng tôi xây dựng LoopBack SDK của

308
00:23:38,180 --> 00:23:41,000
chúng tôi và chúng tôi chỉ cần nhập khẩu vào

309
00:23:41,000 --> 00:23:44,705
tập tin module.t ứng dụng của chúng tôi và cũng nhận thấy rằng các nhà cung cấp,

310
00:23:44,705 --> 00:23:46,895
đây là nơi chúng tôi cấu hình dịch vụ

311
00:23:46,895 --> 00:23:49,540
của chúng tôi, không chứa bất kỳ dịch vụ nữa bởi vì điều đó

312
00:23:49,540 --> 00:23:52,745
đi kèm như là một phần của LoopBack SDK của tôi,

313
00:23:52,745 --> 00:23:56,715
vì vậy điều duy nhất mà tôi cung cấp là URL cơ sở ở đây.

314
00:23:56,715 --> 00:24:02,510
Tôi đã gỡ bỏ tất cả những người khác từ tập tin module.t ứng dụng của tôi ở đây.

315
00:24:03,180 --> 00:24:07,325
Vì vậy, đó là một sự thay đổi mà bạn sẽ nhận thấy.

316
00:24:07,325 --> 00:24:11,720
Vì vậy, tương tự như vậy nếu bạn đi đến các tập tin về

317
00:24:11,720 --> 00:24:14,740
thành phần phần, các tập tin thành phần DishDetail,

318
00:24:14,740 --> 00:24:19,740
các tập tin thành phần phần yêu thích và cũng là tập tin thành phần trình đơn.

319
00:24:19,740 --> 00:24:22,420
Vì vậy, chúng ta hãy nhìn vào các thành phần trình đơn tập tin.

320
00:24:22,420 --> 00:24:25,190
Vì vậy, bạn sẽ thấy ở đây một lần nữa tôi nhập khẩu này

321
00:24:25,190 --> 00:24:29,370
bốn và sau đó trong thành phần menu của tôi tôi tôi nói,

322
00:24:29,370 --> 00:24:33,075
món ăn dịch vụ món ăn API và sau đó tôi đang

323
00:24:33,075 --> 00:24:37,400
cấu hình LoopBackConfig thiết lập phiên bản BaseURL SetAPI.

324
00:24:37,400 --> 00:24:42,550
Tôi đã làm điều đó trong kho Angular mà tôi đã cung cấp cho

325
00:24:42,550 --> 00:24:49,235
bạn cho ứng dụng góc cạnh của tôi cho máy chủ LoopBack,

326
00:24:49,235 --> 00:24:54,220
và cũng có thể, bạn sẽ thấy rằng tôi vừa thực hiện một số sửa đổi ở đây.

327
00:24:54,220 --> 00:25:00,225
Vì vậy, nếu bạn muốn tìm tất cả các mục từ các dịch vụ món ăn vì vậy bạn chỉ đơn giản là nói D

328
00:25:00,225 --> 00:25:03,335
ishService.Find và đó sẽ trả lại

329
00:25:03,335 --> 00:25:09,100
tất cả các món ăn có trong máy chủ LoopBack của tôi ở đây.

330
00:25:09,100 --> 00:25:11,425
Vì vậy, đó là những gì tôi đang tìm kiếm ở đây.

331
00:25:11,425 --> 00:25:15,435
Vì vậy, phần còn lại của mã nên trông quen thuộc ở đây ngoại trừ ở đây tôi gọi

332
00:25:15,435 --> 00:25:20,010
món ăn là bằng các món ăn và mảng các món ăn ở đây.

333
00:25:20,010 --> 00:25:22,995
Vì vậy, đó là sự thay đổi mà bạn sẽ thấy trong thành phần menu.

334
00:25:22,995 --> 00:25:28,810
Bây giờ, bạn phải tự hỏi làm thế nào để xác thực người dùng hoạt động trong trường hợp này.

335
00:25:28,810 --> 00:25:32,275
Để xác thực người dùng, hãy để tôi thu hút sự chú ý của bạn đến

336
00:25:32,275 --> 00:25:35,800
hai nơi mà tôi đang sử dụng xác thực người dùng.

337
00:25:35,800 --> 00:25:38,735
Trước tiên hãy đi đến thành phần đăng nhập.

338
00:25:38,735 --> 00:25:40,990
Vì vậy, trong thành phần đăng nhập,

339
00:25:40,990 --> 00:25:46,030
bạn sẽ thấy rằng trong thành phần đăng nhập tôi đang nhập hai ở đây,

340
00:25:46,030 --> 00:25:49,970
API khách hàng là các dịch vụ cho phép tôi thực hiện

341
00:25:49,970 --> 00:25:54,245
xác thực người dùng và đăng nhập và đăng xuất,

342
00:25:54,245 --> 00:25:57,430
và tôi cũng nhập mô hình khách hàng và

343
00:25:57,430 --> 00:26:00,995
truy cập mã thông báo mô hình và trong thành phần đăng nhập,

344
00:26:00,995 --> 00:26:06,320
bạn sẽ thấy rằng bởi Auth dịch vụ bây giờ là không có gì ngoài API khách hàng và

345
00:26:06,730 --> 00:26:15,670
bạn cũng sẽ nhận thấy rằng trong thành phần đăng nhập khi biểu mẫu đăng nhập được gửi,

346
00:26:15,670 --> 00:26:19,530
tôi gọi Authservice.login này.

347
00:26:19,530 --> 00:26:24,655
Chức năng đăng nhập này có sẵn thông qua API của khách hàng.

348
00:26:24,655 --> 00:26:30,775
Nhớ lại khi chúng tôi cố gắng đăng nhập bằng trình thám hiểm API phần còn lại của LoopBack,

349
00:26:30,775 --> 00:26:36,500
chúng tôi đã sử dụng điểm cuối của khách hàng để đăng nhập vào hệ thống.

350
00:26:36,500 --> 00:26:39,310
Vì vậy, đó là chính xác những gì tôi đang làm trong mã ở đây.

351
00:26:39,310 --> 00:26:43,335
Vì vậy, chúng tôi sẽ nói authservice.Login này và ở đây bạn thấy rằng

352
00:26:43,335 --> 00:26:47,930
nó mất những tham số miễn phí ở đây,

353
00:26:47,930 --> 00:26:55,425
tên người dùng và mật khẩu là đối tượng JavaScript đầu tiên ở đây,

354
00:26:55,425 --> 00:27:01,755
và sau đó tôi cũng chỉ định user.remember này., .remember là lá cờ

355
00:27:01,755 --> 00:27:08,310
từ hộp kiểm nhớ tôi mà chúng tôi có trong chúng tôi hộp thoại thành phần đăng nhập ở đó.

356
00:27:08,310 --> 00:27:12,180
Vì vậy, khi người dùng kiểm tra rằng trong thông tin của người dùng sẽ được

357
00:27:12,180 --> 00:27:16,095
tự động duy trì bởi SDK.

358
00:27:16,095 --> 00:27:18,945
Dịch vụ Auth được cung cấp bên trong SDK.

359
00:27:18,945 --> 00:27:21,275
Vì vậy, bây giờ bạn thấy rằng tôi không cần phải

360
00:27:21,275 --> 00:27:24,290
thực hiện rõ ràng bất kỳ dịch vụ ủy quyền đó là

361
00:27:24,290 --> 00:27:26,940
tự động có sẵn cho tôi

362
00:27:26,940 --> 00:27:31,565
thông qua API khách hàng có sẵn như một dịch vụ ở đây.

363
00:27:31,565 --> 00:27:35,320
Vì vậy, đó là cách tôi đăng nhập vào người dùng ở đây,

364
00:27:35,320 --> 00:27:38,275
và khi người dùng đăng nhập này sẽ trả lại

365
00:27:38,275 --> 00:27:45,015
một đối tượng JavaScript và từ đối tượng JavaScript tôi nhận được

366
00:27:45,015 --> 00:27:50,930
res.user.. người dùng cung cấp thông tin của người dùng cho tôi và tôi

367
00:27:50,930 --> 00:27:57,355
chỉ đơn giản là gửi này đến headerComponent của tôi ở đây.

368
00:27:57,355 --> 00:27:59,860
Vì vậy, đi vào HeaderComponent.

369
00:27:59,860 --> 00:28:02,235
Vì vậy, chúng ta hãy đi vào các thành phần tiêu đề,

370
00:28:02,235 --> 00:28:04,620
và trong tập tin HeaderComponent.Ts,

371
00:28:04,620 --> 00:28:09,670
bạn sẽ thấy rằng một lần nữa ở đây tôi nhập khẩu API khách

372
00:28:09,670 --> 00:28:18,115
hàng và khách hàng ở đây và bạn cũng sẽ nhận thấy rằng trong API khách hàng,

373
00:28:18,115 --> 00:28:23,830
tôi chỉ định ở đây lưu ý rằng tôi đang nói rằng

374
00:28:23,830 --> 00:28:29,880
khách hàng này là AuthService GetCachedCurrent.

375
00:28:29,880 --> 00:28:34,190
Vì vậy, nếu một người dùng bị khóa trong

376
00:28:34,190 --> 00:28:38,660
thông tin người dùng hiện đang đăng nhập được đúc trong AuthService đó là không có gì ngoài API khách hàng.

377
00:28:38,660 --> 00:28:43,775
Vì vậy, khi tôi gọi này getCachedCurrent này sẽ trả lại người dùng đang đăng nhập.

378
00:28:43,775 --> 00:28:45,570
Nếu không có người dùng nào được đăng nhập,

379
00:28:45,570 --> 00:28:46,820
điều này sẽ trả về null.

380
00:28:46,820 --> 00:28:51,865
Vì vậy, đó là một cách tôi có thể kiểm tra để xem nếu một người dùng hiện đang đăng nhập hay không.

381
00:28:51,865 --> 00:28:55,690
Vì vậy, nếu người dùng hiện đang đăng nhập sau đó this.customer sẽ

382
00:28:55,690 --> 00:28:59,740
nhận được thông tin về khách hàng được nạp vào.

383
00:28:59,740 --> 00:29:02,385
Thông tin khách hàng bao gồm tên họ, họ,

384
00:29:02,385 --> 00:29:11,190
email và hồ sơ của người dùng khác sẽ có sẵn cho đối tượng này này.customer.

385
00:29:11,190 --> 00:29:16,080
Vì vậy, ở đây tôi đang kiểm tra để đảm bảo rằng this.customer không phải là null.

386
00:29:16,080 --> 00:29:19,265
Nếu nó không phải là null sau đó tôi sẽ lưu tên người dùng vào

387
00:29:19,265 --> 00:29:23,100
this.customer.username và theo cách đó khi tên người

388
00:29:23,100 --> 00:29:26,705
dùng được thiết lập sau đó tiêu đề của tôi trong

389
00:29:26,705 --> 00:29:31,690
thanh công cụ trong headerComponent của tôi sẽ phản ánh tên của người dùng ở đó.

390
00:29:31,690 --> 00:29:37,820
Bây giờ, để đăng xuất người dùng tất cả những gì tôi đang làm là tôi đang thiết lập tên người dùng và

391
00:29:37,820 --> 00:29:45,665
các biến khách hàng để null và sau đó tôi chỉ đơn giản là gọi là authService.log,

392
00:29:45,665 --> 00:29:51,075
AuthServices là Customerapi.Lokout, và đó là cách tôi đăng xuất người dùng.

393
00:29:51,075 --> 00:29:52,760
Khi người dùng đăng xuất,

394
00:29:52,760 --> 00:29:55,750
thông tin đăng nhập của mình bị phá hủy tất cả.

395
00:29:55,750 --> 00:30:02,360
Bây giờ, tất cả điều này được thực hiện chăm sóc tự động bởi các dịch vụ API khách hàng

396
00:30:02,360 --> 00:30:09,075
có sẵn trong LoopBack SDK của tôi mà tôi vừa xây dựng ở đó.

397
00:30:09,075 --> 00:30:13,830
Vì vậy, bạn nhận thấy rằng làm thế nào LoopBack SDK Builder xây dựng

398
00:30:13,830 --> 00:30:19,430
các dịch vụ và các mô hình và tất cả mọi thứ mà tôi cần và trong ứng dụng Angular của tôi,

399
00:30:19,430 --> 00:30:22,360
tôi chỉ đơn giản là nhập khẩu những và sau đó sử dụng

400
00:30:22,360 --> 00:30:25,450
chúng để cấu hình ứng dụng Angular của tôi.

401
00:30:25,450 --> 00:30:27,065
Vì vậy, một khi tôi xây dựng

402
00:30:27,065 --> 00:30:32,510
LoopBack SDK sử dụng LoopBack SDK Builder tất cả những gì tôi còn lại với là

403
00:30:32,510 --> 00:30:40,545
thực hiện các thành phần và các mẫu xem của họ mà ngồi tất cả các phần còn lại.

404
00:30:40,545 --> 00:30:45,480
Các dịch vụ được tự động xây dựng cho tôi bởi LoopBack SDK Builder,

405
00:30:45,480 --> 00:30:49,160
các mô hình được tự động xây dựng cho tôi và tất cả

406
00:30:49,160 --> 00:30:54,060
những gì tôi cần làm là nhập chúng vào tất cả các thành phần mà tôi cần phải sử dụng chúng.

407
00:30:54,060 --> 00:31:01,775
Vì vậy, lưu ý cách ứng dụng góc này đã được cập nhật để sử dụng LoopBack SDK.

408
00:31:01,775 --> 00:31:06,520
Bây giờ nếu bạn muốn biết thêm thông tin về cách LoopBack SDK nên được sử dụng,

409
00:31:06,520 --> 00:31:11,465
bạn cũng có thể kiểm tra tài liệu được cung cấp bởi LoopBack SDK Builder.

410
00:31:11,465 --> 00:31:14,425
Vì vậy, nếu bạn đi đến LoopBack SDK Builder,

411
00:31:14,425 --> 00:31:19,440
một liên kết đến điều này có sẵn trong các tài nguyên bổ sung cho bài học này,

412
00:31:19,440 --> 00:31:21,820
và trong LoopBack SDK Builder,

413
00:31:21,820 --> 00:31:24,930
bạn sẽ có tất cả các thông tin mà bạn cần

414
00:31:24,930 --> 00:31:31,830
để sử dụng SDK được xây dựng bởi LoopBack SDK Builder.

415
00:31:31,830 --> 00:31:34,205
Vì vậy, nếu bạn đi đến tài liệu wiki.

416
00:31:34,205 --> 00:31:39,830
Trong tài liệu wiki, rất nhiều lời giải thích về cách LoopBack SDK Builder có thể

417
00:31:39,830 --> 00:31:46,050
được hoặc SDK được tạo ra bởi LoopBack SDK Builder nên được sử dụng là tất cả được đưa ra ở đây.

418
00:31:46,050 --> 00:31:49,460
Vì vậy, tôi chỉ cần đi qua tài liệu này để tìm ra cách

419
00:31:49,460 --> 00:31:53,555
sử dụng SDK được xây dựng bởi LoopBack SDK Builder,

420
00:31:53,555 --> 00:31:57,420
và sau đó cấu hình lại ứng dụng Angular của tôi để sử dụng

421
00:31:57,420 --> 00:32:02,090
điều đó để tương tác với máy chủ LoopBack của tôi.

422
00:32:02,090 --> 00:32:06,715
Vì vậy, với điều này, tôi đã nhanh chóng chứng minh nó cho bạn làm thế nào

423
00:32:06,715 --> 00:32:11,140
bạn có thể xây dựng ứng dụng Angular

424
00:32:11,140 --> 00:32:15,270
của bạn và tận dụng lợi thế của SDK được xây dựng bởi LoopBack SDK Builder

425
00:32:15,270 --> 00:32:20,365
để truy cập máy chủ LoopBack của bạn từ trong ứng dụng Angular của bạn.

426
00:32:20,365 --> 00:32:26,210
Một cách tiếp cận tương tự cũng sẽ thích hợp cho ứng dụng Ionic của bạn.

427
00:32:26,210 --> 00:32:31,610
Đối với ứng dụng Native Script bạn xây dựng SDK với NG2 gốc

428
00:32:31,610 --> 00:32:37,835
trong dòng lệnh thay vì web NG2 như chúng tôi đã sử dụng khi chúng tôi xây dựng SDK này.

429
00:32:37,835 --> 00:32:41,890
Với giới thiệu nhanh chóng này về cách chúng tôi có thể sử dụng

430
00:32:41,890 --> 00:32:44,815
LoopBack SDK Builder để xây dựng SDK và

431
00:32:44,815 --> 00:32:47,980
sau đó sử dụng nó trong ứng dụng Angular

432
00:32:47,980 --> 00:32:52,300
của chúng tôi, họ đi đến cuối bài tập này.