1
00:00:03,650 --> 00:00:10,755
Теперь, когда мы завершили разработку полноценного сервера API Rest с помощью LoopBack,

2
00:00:10,755 --> 00:00:14,639
ближайший следующий вопрос, который возникнет в вашем уме, заключается в

3
00:00:14,639 --> 00:00:20,090
том, как мы адаптируем приложение Angular, чтобы использовать этот сервер API Rest?

4
00:00:20,090 --> 00:00:23,135
Как мы уже делали в предыдущих случаях,

5
00:00:23,135 --> 00:00:29,190
нам также нужно будет перенастроить наше угловое приложение, чтобы специально использовать

6
00:00:29,190 --> 00:00:31,385
конечные точки API Rest и

7
00:00:31,385 --> 00:00:37,190
различные запросы API Rest, представленные нашим сервером LoopBack.

8
00:00:37,190 --> 00:00:40,295
Теперь, это то, где мы будем использовать

9
00:00:40,295 --> 00:00:46,865
LoopBack SDK, который может быть автоматически построен для нас с помощью модуля Node.

10
00:00:46,865 --> 00:00:51,214
Мы рассмотрим наши серверы LoopBack,

11
00:00:51,214 --> 00:00:56,975
различные конечные точки API Rest и автоматически построить SDK,

12
00:00:56,975 --> 00:00:59,480
который мы затем можем включить в

13
00:00:59,480 --> 00:01:04,380
наше угловое приложение, а затем иметь возможность общаться с нашим сервером LoopBack,

14
00:01:04,380 --> 00:01:10,055
как для аутентификации, так и для обмена данными.

15
00:01:10,055 --> 00:01:13,000
Чтобы начать работу с этим упражнением,

16
00:01:13,000 --> 00:01:17,045
сначала клонируйте репозиторий git, содержащий

17
00:01:17,045 --> 00:01:23,535
частично заполненное угловое приложение, которое взаимодействует с нашим сервером LoopBack.

18
00:01:23,535 --> 00:01:26,730
Поэтому, чтобы сделать это, перейдите в удобное расположение на вашем компьютере.

19
00:01:26,730 --> 00:01:29,580
Итак, вот я в моей папке Coursera Angular.

20
00:01:29,580 --> 00:01:33,390
Я собираюсь клонировать репозиторий git,

21
00:01:33,390 --> 00:01:35,680
введя 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
а затем клонировать этот репозиторий git.

24
00:01:55,460 --> 00:01:58,645
После того, как репозиторий git клонирован,

25
00:01:58,645 --> 00:02:08,355
мы перейдем в папку Shangular6 LoopBack, а затем

26
00:02:08,355 --> 00:02:12,370
выполним установку NPM для установки

27
00:02:12,370 --> 00:02:19,135
всех модулей узла для этого частично завершенного углового приложения.

28
00:02:19,135 --> 00:02:26,670
Чтобы автоматически создать комплект разработки программного обеспечения LoopBack для нашего сервера LoopBack,

29
00:02:26,670 --> 00:02:32,125
мы собираемся воспользоваться помощью этого модуля узла LoopBack SDK Builder.

30
00:02:32,125 --> 00:02:34,955
Таким образом, этот LoopBack SDK Builder

31
00:02:34,955 --> 00:02:39,140
является управляемым сообществом узловым модулем, который на самом деле разработан

32
00:02:39,140 --> 00:02:46,380
из официального LoopBack SDK Angular, который разработчики LoopBack выпустили.

33
00:02:46,380 --> 00:02:50,160
Loopback SDK Угловая поддерживаемая угловая JS.

34
00:02:50,160 --> 00:02:53,885
Таким образом, это было изменено в этом Loopback SDK Builder

35
00:02:53,885 --> 00:02:58,390
для поддержки угловых двух и приложений.

36
00:02:58,390 --> 00:03:01,090
Таким образом, LoopBack SDK Builder,

37
00:03:01,090 --> 00:03:10,155
сам модуль узла после его установки в папку проекта сервера,

38
00:03:10,155 --> 00:03:13,610
вы можете использовать LoopBack SDK Builder для

39
00:03:13,610 --> 00:03:18,810
автоматического прохождения через ваше приложение LoopBack, которое вы уже построили.

40
00:03:18,810 --> 00:03:22,190
Это автоматически создаст все, что нам

41
00:03:22,190 --> 00:03:25,610
нужно, чтобы начать работу в нашем угловом приложении.

42
00:03:25,610 --> 00:03:27,765
Таким образом, он строит комплект разработки программного обеспечения.

43
00:03:27,765 --> 00:03:30,155
Таким образом, в комплекте разработки программного обеспечения,

44
00:03:30,155 --> 00:03:35,995
LoopBack SDK Builder экспортирует

45
00:03:35,995 --> 00:03:41,930
все интерфейсы, все модели для различных данных, которые мы собираемся хранить на

46
00:03:41,930 --> 00:03:44,390
нашем сервере LoopBack, а также

47
00:03:44,390 --> 00:03:49,520
все службы API, которые могут быть использованы в вашем угловом приложении.

48
00:03:49,520 --> 00:03:55,485
Таким образом, ваши модели и ваши сервисы автоматически приходят на поездку после того, как вы создаете SDK.

49
00:03:55,485 --> 00:04:00,935
Теперь дело всего в том, чтобы включить этот SDK в наше угловое приложение,

50
00:04:00,935 --> 00:04:03,265
а затем быстро начать работу.

51
00:04:03,265 --> 00:04:08,010
Поскольку мы уже построили наше угловое приложение в предыдущем курсе,

52
00:04:08,010 --> 00:04:11,900
я собираюсь модифицировать это приложение, чтобы использовать

53
00:04:11,900 --> 00:04:16,660
LoopBack SDK, который мы будем экспортировать из этого LoopBack SDK Builder.

54
00:04:16,660 --> 00:04:18,620
На предыдущем шаге

55
00:04:18,620 --> 00:04:20,030
вы только что установили

56
00:04:20,030 --> 00:04:23,420
частично завершенное угловое приложение, которое

57
00:04:23,420 --> 00:04:27,305
уже было адаптировано для использования LoopBack SDK.

58
00:04:27,305 --> 00:04:30,070
Итак, давайте продолжим и построим

59
00:04:30,070 --> 00:04:33,855
LoopBack SDK, а затем развернем его в наше угловое приложение,

60
00:04:33,855 --> 00:04:41,605
а затем перейдем и скомпилируем наше угловое приложение и начнем с ним.

61
00:04:41,605 --> 00:04:44,390
Чтобы настроить пакет SDK LoopBack,

62
00:04:44,390 --> 00:04:51,830
перейдите в папку сервера LoopBack на вкладке терминала или в окне команд.

63
00:04:51,830 --> 00:04:57,355
Итак, я нахожусь в папке сервера LoopBack.

64
00:04:57,355 --> 00:04:58,855
Итак, в этой папке

65
00:04:58,855 --> 00:05:14,185
позвольте мне пойти дальше и установить этот LoopBack

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

67
00:05:16,960 --> 00:05:19,535
Как только строитель будет установлен,

68
00:05:19,535 --> 00:05:22,625
давайте продолжим и построим LoopBack SDK.

69
00:05:22,625 --> 00:05:24,835
Чтобы построить LoopBack SDK,

70
00:05:24,835 --> 00:05:34,460
мы собираемся воспользоваться помощью инструмента командной строки LB-SDK, который этот модуль LoopBack SDK

71
00:05:34,460 --> 00:05:36,370
автоматически настраивает для нас.

72
00:05:36,370 --> 00:05:42,060
Итак, чтобы получить доступ к этому, мы скажем: /node модули.

73
00:05:42,060 --> 00:05:43,610
Таким образом, в модулях узла

74
00:05:43,610 --> 00:05:47,570
есть папка a.bin, которая автоматически создается всякий раз, когда вы

75
00:05:47,570 --> 00:05:51,770
устанавливаете различные модули узлов в папку там.

76
00:05:51,770 --> 00:05:55,040
Итак, чтобы перейти в папку the.bin,

77
00:05:55,040 --> 00:06:01,540
мы получим доступ к этой команде LB-SDK там,

78
00:06:01,540 --> 00:06:03,490
которая автоматически устанавливается,

79
00:06:03,490 --> 00:06:07,850
затем мы вызовем этот сервер ширины. /server.js,

80
00:06:12,430 --> 00:06:20,310
и нам нужно указать путь к угловому приложению, которое мы только что настроили.

81
00:06:20,310 --> 00:06:23,180
Итак, мое угловое приложение в настоящее время находится в

82
00:06:23,180 --> 00:06:28,865
моих документах Coursera угловая папка LoopBack.

83
00:06:28,865 --> 00:06:31,410
Так что, позвольте мне скопировать эту часть.

84
00:06:31,410 --> 00:06:36,470
Затем позвольте мне перейти в мой терминал или окно команд,

85
00:06:36,470 --> 00:06:41,600
где я пытаюсь настроить свой LoopBack SDK.

86
00:06:41,600 --> 00:06:43,490
Итак, в подсказке,

87
00:06:43,490 --> 00:06:45,995
поскольку он находится в папке Мои документы,

88
00:06:45,995 --> 00:06:55,540
я собираюсь ввести полный путь к этому, начиная с моей корневой папки в моем mac.

89
00:06:55,540 --> 00:06:57,680
Если вы используете их Windows,

90
00:06:57,680 --> 00:07:04,370
убедитесь, что этот путь указывает полный путь, начиная с C двоеточия или D двоеточия,

91
00:07:04,370 --> 00:07:07,540
независимо от того, какой диск вы устанавливаете на компьютере с Windows.

92
00:07:07,540 --> 00:07:12,650
Итак, полный путь к вашей угловой папке LoopBack,

93
00:07:12,650 --> 00:07:15,505
а затем мы скажем,

94
00:07:15,505 --> 00:07:21,900
/SRC, исходная папка там, а затем приложение.

95
00:07:21,900 --> 00:07:24,710
Затем мы собираемся развернуть SDK в

96
00:07:24,710 --> 00:07:30,120
общей папке в подпапке SDK там.

97
00:07:30,430 --> 00:07:36,680
Мы хотим, чтобы этот LoopBack SDK Builder

98
00:07:36,680 --> 00:07:43,570
автоматически развернул веб-версию NG2 SDK.

99
00:07:43,570 --> 00:07:45,879
Таким образом, это версия, которая будет поддерживать

100
00:07:45,879 --> 00:07:50,380
веб-приложения и наше угловое приложение в этом случае.

101
00:07:50,380 --> 00:07:54,870
Если вы создаете это для собственного приложения сценария, вы скажете,

102
00:07:54,870 --> 00:08:00,050
NG2 родной для создания SDK для приложения Native Script.

103
00:08:00,050 --> 00:08:02,380
Поскольку я создаю свое угловое приложение,

104
00:08:02,380 --> 00:08:04,580
я просто скажу, NG2 web,

105
00:08:04,580 --> 00:08:08,190
а затем позвольте Loopback SDK Builder автоматически

106
00:08:08,190 --> 00:08:12,230
создавать набор для разработки программного обеспечения, а затем развертывать его

107
00:08:12,230 --> 00:08:20,780
в моей папке с исходным приложением/shared/sdk.

108
00:08:20,780 --> 00:08:23,715
Итак, через несколько секунд

109
00:08:23,715 --> 00:08:29,915
SDK создается и развертывается в моем угловом приложении.

110
00:08:29,915 --> 00:08:33,250
Теперь, прежде чем я запустим свое угловое приложение,

111
00:08:33,250 --> 00:08:36,730
позвольте мне запустить мой сервер LoopBack,

112
00:08:36,730 --> 00:08:40,820
и прежде чем я это сделаю, я перейду на другую вкладку терминала

113
00:08:40,820 --> 00:08:44,900
здесь, а затем запустим мой сервер MongoDB,

114
00:08:44,900 --> 00:08:45,955
так что я скажу:

115
00:08:45,955 --> 00:08:55,790
Mongod —dbpath=data, а затем

116
00:08:55,790 --> 00:08:57,890
запустим мой сервер MongoDB.

117
00:08:57,890 --> 00:09:02,760
Во-первых, позвольте мне запустить сервер LoopBack.

118
00:09:02,760 --> 00:09:07,710
Итак, при запуске NPM,

119
00:09:07,710 --> 00:09:12,140
и мой сервер LoopBack должен быть запущен и запущен через короткое время.

120
00:09:12,140 --> 00:09:17,555
Затем, теперь перейдя к моему приложению LoopBack,

121
00:09:17,555 --> 00:09:20,645
позвольте мне открыть это приложение в

122
00:09:20,645 --> 00:09:25,890
моем коде Visual Studio, чтобы мы могли посмотреть на исходный код.

123
00:09:27,500 --> 00:09:31,665
Как только мое приложение будет открыто в коде Visual Studio,

124
00:09:31,665 --> 00:09:37,315
позвольте мне взять это в новое окно рабочего стола.

125
00:09:37,315 --> 00:09:45,200
Затем позвольте мне также начать развертывание приложения Angular,

126
00:09:45,200 --> 00:09:53,645
набрав NGserve в подсказке и дождитесь компиляции моего приложения Angular.

127
00:09:53,645 --> 00:09:57,785
После того, как мое угловое приложение будет скомпилировано и применено,

128
00:09:57,785 --> 00:10:00,910
позвольте мне перейти в браузер,

129
00:10:00,910 --> 00:10:04,810
а затем сначала проверить это угловое приложение.

130
00:10:04,810 --> 00:10:06,935
Перейдя в браузер,

131
00:10:06,935 --> 00:10:09,455
позвольте мне открыть новую вкладку здесь,

132
00:10:09,455 --> 00:10:13,760
а затем введите localhost: 4200, и вы увидите

133
00:10:13,760 --> 00:10:18,345
угловое приложение, развернутое в этом окне браузера,

134
00:10:18,345 --> 00:10:21,070
и вы можете увидеть, что Главная,

135
00:10:21,070 --> 00:10:25,095
страница о нас со всеми данными,

136
00:10:25,095 --> 00:10:32,740
затем Меню, а также Мои избранные.

137
00:10:34,120 --> 00:10:38,410
В настоящее время это ничего не показывает, потому что

138
00:10:38,410 --> 00:10:42,640
ни один пользователь не вошел в систему и страница контактов, как и прежде.

139
00:10:42,640 --> 00:10:47,520
Поэтому, чтобы войти в систему, позвольте мне войти в качестве пользователя, а затем я буду вводить

140
00:10:47,520 --> 00:10:52,540
свое имя пользователя и пароль здесь,

141
00:10:52,540 --> 00:10:59,030
а затем, как только я войду в систему, вы сможете увидеть, что когда я перехожу в Мои

142
00:10:59,030 --> 00:11:04,665
избранные, избранные этого конкретного пользователя будут отображаться здесь.

143
00:11:04,665 --> 00:11:08,680
Как и раньше, мы можем вводить комментарии, а затем отправлять комментарии,

144
00:11:08,680 --> 00:11:13,515
а затем также добавлять элементы в избранное и так далее.

145
00:11:13,515 --> 00:11:16,900
Все функциональные возможности, которые вы видели с более ранними

146
00:11:16,900 --> 00:11:22,740
версиями приложения Angular также поддерживаются в этой версии приложения Angular.

147
00:11:22,740 --> 00:11:28,860
Также для того, чтобы ваш сервер LoopBack мог обслуживать изображения,

148
00:11:28,860 --> 00:11:36,235
все эти данные будут храниться в коде сервера в клиентской папке кода сервера.

149
00:11:36,235 --> 00:11:39,975
Итак, в клиентской папке моего сервера LoopBack

150
00:11:39,975 --> 00:11:43,010
обратите внимание, что я создал эту подпапку с

151
00:11:43,010 --> 00:11:47,365
именем images, а затем сохранил все изображения в подпапку.

152
00:11:47,365 --> 00:11:52,010
Теперь, чтобы эти изображения служили, а также для

153
00:11:52,010 --> 00:11:58,930
клиентской папки, которая будет использоваться в качестве общей папки для моего сервера LoopBack,

154
00:11:58,930 --> 00:12:02,630
затем в пару изменений, которые мне нужно сделать на моем сервере LoopBack.

155
00:12:02,630 --> 00:12:05,100
Теперь, первое, что вам нужно сделать, это

156
00:12:05,100 --> 00:12:08,275
перейти в папку загрузки и в папку загрузки,

157
00:12:08,275 --> 00:12:12,250
вы увидите этот файл root.js здесь,

158
00:12:12,250 --> 00:12:15,025
который содержит эту информацию здесь.

159
00:12:15,025 --> 00:12:18,410
Теперь вы можете либо удалить файл root.js,

160
00:12:18,410 --> 00:12:22,330
либо просто переименовать файл root.js в что-то другое.

161
00:12:22,330 --> 00:12:29,630
Итак, здесь вы видите, что я переименовал этот файл в root.jsold с расширением jsold.

162
00:12:29,630 --> 00:12:34,190
Теперь этот файл больше не должен содержать расширение the.js.

163
00:12:34,190 --> 00:12:37,430
Таким образом, все, кроме расширения the.js, в порядке.

164
00:12:37,430 --> 00:12:39,975
Итак, это означает, что в этом случае

165
00:12:39,975 --> 00:12:45,250
мой сервер LoopBack, когда он запускается, не будет выполнять код в этой папке.

166
00:12:45,250 --> 00:12:51,745
Теперь, когда вы посмотрите на код в файле root.js, который был настроен ранее,

167
00:12:51,745 --> 00:12:55,605
вы увидели, что маршрутизатор был настроен таким образом, что,

168
00:12:55,605 --> 00:13:00,955
когда вы получаете доступ к косой черты, которая является корневой папкой ваших серверов,

169
00:13:00,955 --> 00:13:05,170
то он будет просто обслуживать серверы LoopBack статус и действительно,

170
00:13:05,170 --> 00:13:08,175
это то, что мы видели наш сервер LoopBack, обслуживающий

171
00:13:08,175 --> 00:13:15,055
время безотказной работы и время последнего перезапуска нашего сервера.

172
00:13:15,055 --> 00:13:16,590
Мы не хотим, чтобы это делало,

173
00:13:16,590 --> 00:13:20,920
вместо этого мы хотим, чтобы наш сервер LoopBack мог использовать все, что мы

174
00:13:20,920 --> 00:13:25,390
помещаем в папку клиента в качестве общей папки, и поэтому

175
00:13:25,390 --> 00:13:27,900
любое клиентское приложение может быть развернуто в

176
00:13:27,900 --> 00:13:31,590
клиентской папке моего сервера LoopBack и должно быть

177
00:13:31,590 --> 00:13:39,250
доступно, когда мы обращаемся к LoopBack в его стандартных конечных точках косой черты.

178
00:13:39,250 --> 00:13:43,940
Таким образом, это корень папки сервера.

179
00:13:43,940 --> 00:13:46,890
Итак, чтобы сделать это, первое, что вам нужно сделать,

180
00:13:46,890 --> 00:13:50,560
это изменить имя файла root.js на root.

181
00:13:50,560 --> 00:13:53,245
например, вы можете просто переименовать его в

182
00:13:53,245 --> 00:13:56,440
root.jsold или вы можете просто удалить этот файл.

183
00:13:56,440 --> 00:14:00,325
Этот файл не будет нужен в этой версии моего сервера LoopBack.

184
00:14:00,325 --> 00:14:01,840
Теперь, не только это,

185
00:14:01,840 --> 00:14:08,265
вторая часть, которую вам нужно перенастроить, - это войти в файл middleware.json здесь.

186
00:14:08,265 --> 00:14:10,230
Файл middleware.json.

187
00:14:10,230 --> 00:14:12,170
В файле middleware.json,

188
00:14:12,170 --> 00:14:14,605
если

189
00:14:14,605 --> 00:14:17,195
вы прокрутите вниз, вы увидите, что здесь

190
00:14:17,195 --> 00:14:23,755
изначально это просто будет содержать файлы: а затем пустая скобка здесь.

191
00:14:23,755 --> 00:14:26,505
Теперь, в эту пустую скобку здесь,

192
00:14:26,505 --> 00:14:28,420
просто добавьте этот код здесь,

193
00:14:28,420 --> 00:14:36,430
который говорит loopback #static, и он говорит param$!.. /клиент.

194
00:14:36,820 --> 00:14:41,025
Таким образом, это укажет моему серверу LoopBack

195
00:14:41,025 --> 00:14:45,670
, что доступная здесь клиентская папка

196
00:14:45,670 --> 00:14:53,800
должна использоваться в качестве статической общей папки для моего сервера LoopBack.

197
00:14:53,800 --> 00:14:58,790
Таким образом, все, что помещено в клиентскую папку, можно получить с моего сервера.

198
00:14:58,790 --> 00:15:05,725
Итак, это дополнительное изменение, которое вам нужно сделать в файле middleware.json.

199
00:15:05,725 --> 00:15:08,235
Итак, как только вы сделаете эти два изменения,

200
00:15:08,235 --> 00:15:15,030
ваш сервер LoopBack будет настроен для обслуживания данных, включая

201
00:15:15,030 --> 00:15:17,940
изображения, которые вы собираетесь поместить

202
00:15:17,940 --> 00:15:22,575
в подпапку изображений в папке клиента здесь.

203
00:15:22,575 --> 00:15:28,475
Итак, убедитесь, что скопировали изображения в клиентскую папку здесь, а второй -

204
00:15:28,475 --> 00:15:34,625
перейти в файл middleware.json в папке сервера,

205
00:15:34,625 --> 00:15:37,265
а затем обновить эту часть.

206
00:15:37,265 --> 00:15:43,860
После того, как мы это сделаем, эти изображения могут быть доступны, просто доступ к

207
00:15:43,860 --> 00:15:48,760
/images/ имя файла изображения, чтобы получить доступ к

208
00:15:48,760 --> 00:15:54,120
этим изображениям, потому что наши блюда

209
00:15:54,120 --> 00:16:00,390
, лидеры и акции потребуют эти файлы изображений и

210
00:16:00,390 --> 00:16:03,525
так, что будут доступны для нас с

211
00:16:03,525 --> 00:16:08,080
сервера LoopBack, а также что бы вы ни поместили в клиентскую папку.

212
00:16:08,080 --> 00:16:14,050
Например, вы можете подготовить папку распространения

213
00:16:14,050 --> 00:16:16,920
для вашего углового приложения и просто скопировать

214
00:16:16,920 --> 00:16:21,025
все содержимое папки распространения в клиентскую папку здесь,

215
00:16:21,025 --> 00:16:25,220
а затем, если вы получите доступ к серверу LoopBack в

216
00:16:25,220 --> 00:16:30,850
его стандартной корневой конечной точке,

217
00:16:30,850 --> 00:16:37,565
то ваше угловое приложение будет автоматически обслуживается сервером LoopBack.

218
00:16:37,565 --> 00:16:43,950
Таким образом, это два изменения, которые вам нужно сделать на вашем сервере LoopBack.

219
00:16:43,950 --> 00:16:49,700
Конечно, вам должно быть интересно, как именно этот SDK построен,

220
00:16:49,700 --> 00:16:52,820
где именно этот SDK и как я на самом деле

221
00:16:52,820 --> 00:16:56,045
собираюсь использовать его в моем угловом приложении.

222
00:16:56,045 --> 00:17:01,955
Итак, чтобы сделать это, давайте перейдем к нашему угловому приложению и в исходной

223
00:17:01,955 --> 00:17:04,375
папке, в папке исходного приложения,

224
00:17:04,375 --> 00:17:06,565
теперь, когда вы открываете общую папку,

225
00:17:06,565 --> 00:17:13,235
вы увидите, что здесь есть подпапка с именем SDK и внутри этой подпапки SDK,

226
00:17:13,235 --> 00:17:16,365
вы найдете целую кучу файлов здесь,

227
00:17:16,365 --> 00:17:22,565
lb.config.ts, index.ts и внутри сокетов хранения

228
00:17:22,565 --> 00:17:25,330
, служб и внутри службы,

229
00:17:25,330 --> 00:17:28,255
у вас есть пользовательские службы и основные службы здесь,

230
00:17:28,255 --> 00:17:31,960
а также различные модели, которые развернуты здесь.

231
00:17:31,960 --> 00:17:36,630
Модели на самом деле содержат структуры моделей

232
00:17:36,630 --> 00:17:42,605
для наших различных моделей, которые мы реализуем.

233
00:17:42,605 --> 00:17:45,280
Теперь это SDK LoopBack.

234
00:17:45,280 --> 00:17:49,430
Этот код автоматически создается для вас, и если вы хотите,

235
00:17:49,430 --> 00:17:52,800
вы можете просто войти, а затем

236
00:17:52,800 --> 00:17:57,030
пройти через эти файлы, чтобы просто увидеть, что там доступно.

237
00:17:57,030 --> 00:18:00,560
Убедитесь, что не изменяйте ни один из файлов в

238
00:18:00,560 --> 00:18:02,940
этой подпапке SDK, потому что это

239
00:18:02,940 --> 00:18:06,040
автоматически создается для вас Loopback SDK Builder,

240
00:18:06,040 --> 00:18:10,355
и это будет содержать все настроенные таким образом, чтобы

241
00:18:10,355 --> 00:18:15,125
ваш сервер LoopBack мог быть доступен из вашего углового приложения.

242
00:18:15,125 --> 00:18:19,240
Услуги, которые я собираюсь использовать, доступны здесь.

243
00:18:19,240 --> 00:18:21,630
Итак, как нам это использовать?

244
00:18:21,630 --> 00:18:25,600
Итак, чтобы помочь вам понять, как мы используем это,

245
00:18:25,600 --> 00:18:33,725
давайте посетите наш домашний компонент, а затем посмотрим, как теперь обновляется домашний компонент.

246
00:18:33,725 --> 00:18:35,855
Итак, когда вы перейдете к домашнему компоненту,

247
00:18:35,855 --> 00:18:44,125
вы заметите, что я теперь импортирую блюда из.. /shared/sdk/модели.

248
00:18:44,125 --> 00:18:47,950
Итак, это модели, которые автоматически экспортируются в

249
00:18:47,950 --> 00:18:52,390
SDK моим Loopback SDK Builder.

250
00:18:52,390 --> 00:18:57,010
Так вот, здесь будет определена моя модель посуды.

251
00:18:57,010 --> 00:18:59,450
Итак, я просто собираюсь использовать модель посуды.

252
00:18:59,450 --> 00:19:06,290
Аналогично, сам сервис доступен как этот DishesAPI,

253
00:19:06,290 --> 00:19:15,220
как вы можете видеть здесь и этот DishesAPI находится в.. /shared/sdk/services папка здесь.

254
00:19:15,220 --> 00:19:18,280
Аналогичным образом, API промоакций и промоакций,

255
00:19:18,280 --> 00:19:20,110
а также API лидеров и лидеров.

256
00:19:20,110 --> 00:19:24,750
Итак, все они созданы автоматически для меня Loopback SDK Builder.

257
00:19:24,750 --> 00:19:26,720
Теперь, когда вы войдете в код,

258
00:19:26,720 --> 00:19:31,045
вы теперь заметите, что я объявлю блюдо как блюда,

259
00:19:31,045 --> 00:19:35,455
продвижение как акции, и лидер как /лидеры.

260
00:19:35,455 --> 00:19:39,955
Эти три модели экспортируются с помощью Loopback SDK Builder.

261
00:19:39,955 --> 00:19:44,905
Также обратите внимание, как я перенастроил три службы здесь.

262
00:19:44,905 --> 00:19:48,090
Теперь мой сервиз блюд относится к API блюд,

263
00:19:48,090 --> 00:19:50,950
сервисам продвижения, ссылающимся на API рекламных акций,

264
00:19:50,950 --> 00:19:55,825
и сервису лидеров для API лидеров,

265
00:19:55,825 --> 00:19:59,980
а также замечаю, как я обращаюсь к сервису блюд здесь.

266
00:19:59,980 --> 00:20:06,290
Итак, я скажу, что это блюдо службы найти один и где признакам равно true.

267
00:20:06,290 --> 00:20:14,539
Итак, вот где вы помните, что в моем LoopBack rest API Explorer

268
00:20:14,539 --> 00:20:20,405
я набрал это в фильтр там,

269
00:20:20,405 --> 00:20:23,490
затем я попытался найти там блюда.

270
00:20:23,490 --> 00:20:27,260
Итак, это именно то, что я делаю здесь также в моем коде здесь.

271
00:20:27,260 --> 00:20:30,140
Итак, этот Findone, затем поставленный с этим,

272
00:20:30,140 --> 00:20:34,140
найдет один элемент, а затем вернет его здесь,

273
00:20:34,140 --> 00:20:38,240
а затем, что я присваиваю каждому этому блюду здесь, а

274
00:20:38,240 --> 00:20:43,510
остальная часть моего углового приложения работает точно так же, как и раньше.

275
00:20:43,510 --> 00:20:47,490
Теперь также обратите внимание, что в конструкторе

276
00:20:47,490 --> 00:20:52,945
обратите внимание, как я сконфигурировал это, называемое конфигурацией LoopBack.

277
00:20:52,945 --> 00:20:59,685
Теперь, чтобы сделать конфигурацию LoopBack в каждом компоненте, который вы используете,

278
00:20:59,685 --> 00:21:09,280
вам нужно импортировать эту конфигурацию LoopBack из этой общей папки SDK здесь, а также

279
00:21:09,280 --> 00:21:13,790
эту версию API, которую я объявляю.

280
00:21:14,410 --> 00:21:19,340
Я обновил этот файл baseurl.ts.

281
00:21:19,340 --> 00:21:21,720
Поэтому в базовой папке URL

282
00:21:21,720 --> 00:21:31,330
я обновил это до моего имени моего компьютера двоеточия 3000.

283
00:21:31,330 --> 00:21:35,510
Таким образом, этот убедитесь, что замените это

284
00:21:35,510 --> 00:21:42,460
IP-адресом или именем вашего конкретного компьютера, на котором вы работаете.

285
00:21:42,460 --> 00:21:50,350
Итак, убедитесь, что обновите базовый URL-адрес здесь, а версия API - это просто строка.

286
00:21:50,350 --> 00:21:52,560
Говорить API здесь.

287
00:21:52,560 --> 00:21:58,790
Таким образом, эти два будут использоваться в моем домашнем файле component.ts.

288
00:21:58,790 --> 00:22:02,560
Поэтому я импортирую эту версию API здесь и LoopBackConfig.

289
00:22:02,560 --> 00:22:05,475
BaseUrl, который я уже

290
00:22:05,475 --> 00:22:10,640
вводил в мой конструктор здесь, так что он уже доступен здесь,

291
00:22:10,640 --> 00:22:14,890
а затем в моем конструкторе моего компонента

292
00:22:14,890 --> 00:22:19,440
мне нужно сделать эти два оператора здесь.

293
00:22:19,440 --> 00:22:22,190
Итак, мы скажем: «LoopBack устанавливает базовый URL

294
00:22:22,190 --> 00:22:25,120
в базовый URL», который совпадает с тем, что я только что

295
00:22:25,120 --> 00:22:31,950
ввел туда, а затем оглядываюсь на установленную версию API для версии API здесь.

296
00:22:31,950 --> 00:22:36,695
Поэтому эти два мне нужно настроить в моем домашнем компоненте,

297
00:22:36,695 --> 00:22:41,815
а также в любом другом компоненте, где я обращаюсь к моему серверу LoopBack,

298
00:22:41,815 --> 00:22:43,425
мне нужно настроить это.

299
00:22:43,425 --> 00:22:48,060
Теперь конструктор LoopBack SDK предполагает, что нам нужно

300
00:22:48,060 --> 00:22:53,880
сделать это в каждом из компонентов здесь.

301
00:22:53,880 --> 00:23:01,775
Кроме того, вы заметите, что если вы перейдете в файл module.ts приложения в файле module.ts,

302
00:23:01,775 --> 00:23:08,610
я удалил все входы всех других служб, и вместо этого я импортирую

303
00:23:08,610 --> 00:23:15,480
это здесь называется модулем импорта SDK Browser из общего SDK.

304
00:23:15,480 --> 00:23:18,110
SDK Browser модуль здесь,

305
00:23:18,110 --> 00:23:24,075
и если вы войдете в входные данные здесь,

306
00:23:24,075 --> 00:23:31,635
вы увидите, что я настроил этот SDK Browser Module.ForRoot здесь, во входах.

307
00:23:31,635 --> 00:23:38,180
Таким образом, этот модуль SDK Browser автоматически настраивается, когда мы создаем наш LoopBack SDK, и

308
00:23:38,180 --> 00:23:41,000
нам просто нужно импортировать его в наш

309
00:23:41,000 --> 00:23:44,705
файл app module.ts, а также заметить, что поставщики,

310
00:23:44,705 --> 00:23:46,895
где мы настроили наши услуги,

311
00:23:46,895 --> 00:23:49,540
больше не содержат ни одного из сервисов, потому что

312
00:23:49,540 --> 00:23:52,745
поставляется как часть моего LoopBack SDK,

313
00:23:52,745 --> 00:23:56,715
поэтому единственное, что я предоставляю, - это базовый URL-адрес здесь.

314
00:23:56,715 --> 00:24:02,510
Я удалил все остальные из моего файла приложения module.ts здесь.

315
00:24:03,180 --> 00:24:07,325
Итак, это одно изменение, которое вы заметите.

316
00:24:07,325 --> 00:24:11,720
Таким образом, если перейти к файлу About component.ts, файлу

317
00:24:11,720 --> 00:24:14,740
DishDetail component.ts, файлу

318
00:24:14,740 --> 00:24:19,740
favorites component.ts, а также файлу menu component.ts.

319
00:24:19,740 --> 00:24:22,420
Итак, давайте посмотрим на файл component.ts.

320
00:24:22,420 --> 00:24:25,190
Таким образом, вы увидите здесь снова, что я импортирую эти

321
00:24:25,190 --> 00:24:29,370
четыре, а затем в моем компоненте меню я говорю:

322
00:24:29,370 --> 00:24:33,075
API посуды служб Dish, а затем я

323
00:24:33,075 --> 00:24:37,400
настраиваю версию набора LoopBackConfig BaseUrl SetaPi.

324
00:24:37,400 --> 00:24:42,550
Я уже сделал это в угловом репозитории, который я предоставил

325
00:24:42,550 --> 00:24:49,235
вам для моего углового приложения для сервера LoopBack,

326
00:24:49,235 --> 00:24:54,220
а также вы увидите, что я только что сделал некоторые изменения здесь.

327
00:24:54,220 --> 00:25:00,225
Так что, если вы хотите, чтобы найти все элементы из блюда службы, так что вы просто скажите

328
00:25:00,225 --> 00:25:03,335
Dishservice.Find и что вернет

329
00:25:03,335 --> 00:25:09,100
все блюда, которые есть в моем LoopBack сервере здесь.

330
00:25:09,100 --> 00:25:11,425
Так вот, что я извлекаю здесь.

331
00:25:11,425 --> 00:25:15,435
Так что остальная часть кода должна выглядеть знакомым здесь, за исключением того, что здесь я называю

332
00:25:15,435 --> 00:25:20,010
блюда равны блюдам и массиву блюд здесь.

333
00:25:20,010 --> 00:25:22,995
Таким образом, это изменение, которое вы увидите в компоненте меню.

334
00:25:22,995 --> 00:25:28,810
Теперь вам должно быть интересно, как работает аутентификация пользователя в этом случае.

335
00:25:28,810 --> 00:25:32,275
Для аутентификации пользователя позвольте мне обратить ваше внимание на

336
00:25:32,275 --> 00:25:35,800
два места, где я использую аутентификацию пользователя.

337
00:25:35,800 --> 00:25:38,735
Давайте сначала перейдем к компоненту входа.

338
00:25:38,735 --> 00:25:40,990
Итак, в компоненте входа

339
00:25:40,990 --> 00:25:46,030
вы увидите, что в компоненте входа я импортирую эти два здесь,

340
00:25:46,030 --> 00:25:49,970
клиентский API, который является службами, которые позволяют мне

341
00:25:49,970 --> 00:25:54,245
выполнять аутентификацию пользователя и входить в систему и выходить из системы,

342
00:25:54,245 --> 00:25:57,430
а также я импортирую модель клиента и

343
00:25:57,430 --> 00:26:00,995
модель токенов доступа и в компоненте входа,

344
00:26:00,995 --> 00:26:06,320
вы увидите, что служба Auth теперь не что иное, как API клиента, а

345
00:26:06,730 --> 00:26:15,670
также вы заметите, что в компоненте входа, когда форма входа будет отправлена,

346
00:26:15,670 --> 00:26:19,530
я называю этот AuthService.Login.

347
00:26:19,530 --> 00:26:24,655
Эта функция входа, которая доступна через API клиента.

348
00:26:24,655 --> 00:26:30,775
Напомним, когда мы пытались войти в систему с помощью проводника LoopBack rest API,

349
00:26:30,775 --> 00:26:36,500
мы использовали конечную точку клиента для входа в систему.

350
00:26:36,500 --> 00:26:39,310
Так что это именно то, что я делаю в коде здесь.

351
00:26:39,310 --> 00:26:43,335
Таким образом, мы скажем этот authService.login, и здесь вы видите, что

352
00:26:43,335 --> 00:26:47,930
он принимает эти бесплатные параметры здесь,

353
00:26:47,930 --> 00:26:55,425
имя пользователя и пароль в качестве первого объекта JavaScript здесь,

354
00:26:55,425 --> 00:27:01,755
а затем я также указываю этот user.remember., .remember это флаг

355
00:27:01,755 --> 00:27:08,310
из флажка запомнить меня, который мы имеем в нашем диалог компонентов входа там.

356
00:27:08,310 --> 00:27:12,180
Таким образом, когда пользователь проверяет, что информация пользователя будет

357
00:27:12,180 --> 00:27:16,095
автоматически сохраняться SDK.

358
00:27:16,095 --> 00:27:18,945
Служба аутентификации, предоставляемая внутри SDK.

359
00:27:18,945 --> 00:27:21,275
Итак, теперь вы видите, что мне не нужно

360
00:27:21,275 --> 00:27:24,290
явно реализовывать любую службу авторизации, которая

361
00:27:24,290 --> 00:27:26,940
автоматически доступна мне через

362
00:27:26,940 --> 00:27:31,565
API клиента, который доступен как сервис здесь.

363
00:27:31,565 --> 00:27:35,320
Итак, вот как я вхожу в систему пользователя здесь,

364
00:27:35,320 --> 00:27:38,275
и когда пользователь войдет в это, вернет

365
00:27:38,275 --> 00:27:45,015
объект JavaScript, а из объекта JavaScript я получаю

366
00:27:45,015 --> 00:27:50,930
res.user.. пользователь предоставляет информацию пользователя для меня, и я

367
00:27:50,930 --> 00:27:57,355
просто отправляю это в мой HeaderComponent здесь.

368
00:27:57,355 --> 00:27:59,860
Так что зайдя в HeaderComponent.

369
00:27:59,860 --> 00:28:02,235
Итак, давайте перейдем к компоненту заголовка,

370
00:28:02,235 --> 00:28:04,620
а в файле HeaderComponent.ts

371
00:28:04,620 --> 00:28:09,670
вы увидите, что снова здесь я импортирую клиентский API и

372
00:28:09,670 --> 00:28:18,115
клиент, а также вы заметите, что в API клиента

373
00:28:18,115 --> 00:28:23,830
я указываю здесь, что я говорю, что

374
00:28:23,830 --> 00:28:29,880
этот клиент является этим AuthService GetCachedcurrent.

375
00:28:29,880 --> 00:28:34,190
Поэтому, если пользователь заблокирован в текущей зарегистрированной

376
00:28:34,190 --> 00:28:38,660
информации пользователей приводится в AuthService, который является не чем иным, как API клиента.

377
00:28:38,660 --> 00:28:43,775
Итак, когда я вызываю этот getCachedCurrent, это вернет текущего пользователя, зарегистрированного в данный момент.

378
00:28:43,775 --> 00:28:45,570
Если ни один пользователь не вошел в систему,

379
00:28:45,570 --> 00:28:46,820
это вернет null.

380
00:28:46,820 --> 00:28:51,865
Так что это один из способов, которые я могу проверить, вошел ли пользователь в данный момент или нет.

381
00:28:51,865 --> 00:28:55,690
Таким образом, если пользователь в данный момент вошел в систему, то this.customer

382
00:28:55,690 --> 00:28:59,740
получит информацию о клиенте, который загружен в.

383
00:28:59,740 --> 00:29:02,385
Информация о клиенте, включая имя, имя последнего,

384
00:29:02,385 --> 00:29:11,190
адрес электронной почты и профиль другого пользователя будут доступны для этого объекта this.customer.

385
00:29:11,190 --> 00:29:16,080
Итак, здесь я проверяю, чтобы убедиться, что this.customer не является нулевым.

386
00:29:16,080 --> 00:29:19,265
Если он не равен нулю, я сохраню имя пользователя в

387
00:29:19,265 --> 00:29:23,100
this.customer.username, и таким образом, когда

388
00:29:23,100 --> 00:29:26,705
имя пользователя установлено, мой заголовок

389
00:29:26,705 --> 00:29:31,690
на панели инструментов в моем HeaderComponent будет отражать имя пользователя там.

390
00:29:31,690 --> 00:29:37,820
Теперь, чтобы выйти из системы пользователя, все, что я делаю, я устанавливаю имя пользователя и

391
00:29:37,820 --> 00:29:45,665
переменные клиента на null, а затем я просто назвал authService.log,

392
00:29:45,665 --> 00:29:51,075
AuthServices - это customeRapi.Logout, и вот как я выхожу пользователя.

393
00:29:51,075 --> 00:29:52,760
Когда пользователь выходит из системы,

394
00:29:52,760 --> 00:29:55,750
его или ее учетные данные уничтожаются.

395
00:29:55,750 --> 00:30:02,360
Теперь все это позаботится автоматически службой API клиента,

396
00:30:02,360 --> 00:30:09,075
которая доступна в моем LoopBack SDK, который я только что создал там.

397
00:30:09,075 --> 00:30:13,830
Итак, вы заметили, что, как LoopBack SDK Builder создает

398
00:30:13,830 --> 00:30:19,430
службы и модели и все, что мне нужно, и в моем угловом приложении,

399
00:30:19,430 --> 00:30:22,360
я просто импортирую их, а затем использую

400
00:30:22,360 --> 00:30:25,450
их для настройки моего углового приложения.

401
00:30:25,450 --> 00:30:27,065
Итак, как только я создаю

402
00:30:27,065 --> 00:30:32,510
LoopBack SDK, используя LoopBack SDK Builder, все, что мне осталось,

403
00:30:32,510 --> 00:30:40,545
реализует компоненты и их шаблоны представлений, которые сидят все остальное.

404
00:30:40,545 --> 00:30:45,480
Службы автоматически создаются для меня LoopBack SDK Builder,

405
00:30:45,480 --> 00:30:49,160
модели автоматически создаются для меня, и все, что мне нужно сделать, это

406
00:30:49,160 --> 00:30:54,060
просто импортировать их во все компоненты, где мне нужно использовать их.

407
00:30:54,060 --> 00:31:01,775
Итак, обратите внимание, как это угловое приложение было обновлено, чтобы использовать LoopBack SDK.

408
00:31:01,775 --> 00:31:06,520
Теперь, если вам нужна дополнительная информация о том, как следует использовать LoopBack SDK,

409
00:31:06,520 --> 00:31:11,465
вы также можете проверить документацию, предоставленную LoopBack SDK Builder.

410
00:31:11,465 --> 00:31:14,425
Таким образом, если вы перейдете к LoopBack SDK Builder,

411
00:31:14,425 --> 00:31:19,440
ссылка на это будет доступна в дополнительных ресурсах для этого урока,

412
00:31:19,440 --> 00:31:21,820
а в LoopBack SDK Builder

413
00:31:21,820 --> 00:31:24,930
у вас будет вся информация, необходимая

414
00:31:24,930 --> 00:31:31,830
для использования SDK, созданного LoopBack SDK Builder.

415
00:31:31,830 --> 00:31:34,205
Поэтому, если вы перейдете к документации вики.

416
00:31:34,205 --> 00:31:39,830
В документации вики много объяснений того, как может

417
00:31:39,830 --> 00:31:46,050
быть использован LoopBack SDK Builder или SDK, сгенерированный LoopBack SDK Builder, приведены здесь.

418
00:31:46,050 --> 00:31:49,460
Итак, я просто просмотрел эту документацию, чтобы выяснить, как

419
00:31:49,460 --> 00:31:53,555
использовать SDK, созданный LoopBack SDK Builder,

420
00:31:53,555 --> 00:31:57,420
а затем перенастроил мое угловое приложение, чтобы использовать его

421
00:31:57,420 --> 00:32:02,090
для взаимодействия с моим сервером LoopBack.

422
00:32:02,090 --> 00:32:06,715
Таким образом, я быстро продемонстрировал вам, как

423
00:32:06,715 --> 00:32:11,140
вы можете создать свое угловое приложение и

424
00:32:11,140 --> 00:32:15,270
воспользоваться SDK, созданным LoopBack SDK Builder,

425
00:32:15,270 --> 00:32:20,365
чтобы получить доступ к вашему серверу LoopBack из вашего углового приложения.

426
00:32:20,365 --> 00:32:26,210
Аналогичный подход будет также уместен для вашего приложения Ionic.

427
00:32:26,210 --> 00:32:31,610
Для приложения Native Script вы создаете SDK с NG2 родной

428
00:32:31,610 --> 00:32:37,835
в командной строке вместо NG2 web, как мы использовали при создании этого SDK.

429
00:32:37,835 --> 00:32:41,890
С этим быстрым введением о том, как мы можем использовать

430
00:32:41,890 --> 00:32:44,815
LoopBack SDK Builder для создания SDK, а

431
00:32:44,815 --> 00:32:47,980
затем использовать его в нашем угловом приложении,

432
00:32:47,980 --> 00:32:52,300
они подойдут к концу этого упражнения.