1
00:00:03,650 --> 00:00:10,755
Agora que concluímos o desenvolvimento de um servidor API Rest completo usando LoopBack,

2
00:00:10,755 --> 00:00:14,639
a próxima pergunta imediata que surgirá em sua mente é,

3
00:00:14,639 --> 00:00:20,090
como adaptamos o aplicativo Angular para fazer uso deste servidor API Rest?

4
00:00:20,090 --> 00:00:23,135
Como fizemos nos casos anteriores,

5
00:00:23,135 --> 00:00:29,190
também precisaremos reconfigurar nosso aplicativo Angular para fazer uso específico dos

6
00:00:29,190 --> 00:00:31,385
pontos finais da API Rest e das

7
00:00:31,385 --> 00:00:37,190
várias solicitações da API Rest, conforme exposto pelo nosso servidor LoopBack.

8
00:00:37,190 --> 00:00:40,295
Agora, é aqui que vamos tirar proveito de

9
00:00:40,295 --> 00:00:46,865
um LoopBack SDK que pode ser construído automaticamente para nós usando um módulo Node.

10
00:00:46,865 --> 00:00:51,214
Vamos olhar para nossos servidores LoopBack,

11
00:00:51,214 --> 00:00:56,975
vários endpoints API Rest e construir automaticamente o SDK,

12
00:00:56,975 --> 00:00:59,480
que podemos incorporar em

13
00:00:59,480 --> 00:01:04,380
nosso aplicativo Angular e, em seguida, ser capaz de se comunicar com nosso servidor LoopBack,

14
00:01:04,380 --> 00:01:10,055
tanto para autenticação quanto para poder trocar dados.

15
00:01:10,055 --> 00:01:13,000
Para começar este exercício,

16
00:01:13,000 --> 00:01:17,045
primeiro clone o repositório git que contém

17
00:01:17,045 --> 00:01:23,535
um aplicativo Angular parcialmente concluído que se comunica com nosso servidor LoopBack.

18
00:01:23,535 --> 00:01:26,730
Então, para fazer isso, vá para sua localização conveniente em seu computador.

19
00:01:26,730 --> 00:01:29,580
Então, aqui estou eu na minha pasta Coursera Angular.

20
00:01:29,580 --> 00:01:33,390
Vou clonar o repositório git

21
00:01:33,390 --> 00:01:35,680
digitando 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
e, em seguida, clonar este repositório git.

24
00:01:55,460 --> 00:01:58,645
Uma vez que o repositório git é clonado,

25
00:01:58,645 --> 00:02:08,355
em seguida, vamos mover para a pasta Confusion Angular6 LoopBack e, em seguida,

26
00:02:08,355 --> 00:02:12,370
executar uma instalação NPM para instalar

27
00:02:12,370 --> 00:02:19,135
todos os módulos de nó para esta aplicação Angular parcialmente concluída.

28
00:02:19,135 --> 00:02:26,670
Para criar automaticamente o kit de desenvolvimento de software LoopBack para o nosso servidor LoopBack,

29
00:02:26,670 --> 00:02:32,125
vamos receber a ajuda deste módulo de nó LoopBack SDK Builder.

30
00:02:32,125 --> 00:02:34,955
Então, este LoopBack SDK Builder

31
00:02:34,955 --> 00:02:39,140
é um módulo de nó orientado pela comunidade que é realmente desenvolvido

32
00:02:39,140 --> 00:02:46,380
a partir do LoopBack SDK Angular oficial que os desenvolvedores LoopBack lançaram.

33
00:02:46,380 --> 00:02:50,160
O Loopback SDK Angular suportou Angular JS.

34
00:02:50,160 --> 00:02:53,885
Então, isso foi modificado neste Loopback SDK Builder

35
00:02:53,885 --> 00:02:58,390
para suportar o Angular dois e sobre aplicativos.

36
00:02:58,390 --> 00:03:01,090
Então, o LoopBack SDK Builder,

37
00:03:01,090 --> 00:03:10,155
o próprio módulo de nó

38
00:03:10,155 --> 00:03:13,610
depois de instalado na pasta do projeto do servidor, você pode fazer uso do LoopBack SDK Builder para

39
00:03:13,610 --> 00:03:18,810
passar automaticamente pelo aplicativo LoopBack que você já criou.

40
00:03:18,810 --> 00:03:22,190
Isso irá construir automaticamente tudo o que

41
00:03:22,190 --> 00:03:25,610
precisamos para começar em nossa aplicação Angular.

42
00:03:25,610 --> 00:03:27,765
Então, ele constrói o kit de desenvolvimento de software.

43
00:03:27,765 --> 00:03:30,155
Assim, dentro do kit de desenvolvimento de software,

44
00:03:30,155 --> 00:03:35,995
o LoopBack SDK Builder exporta

45
00:03:35,995 --> 00:03:41,930
todas as interfaces, todos os modelos para os vários dados que vamos armazenar em

46
00:03:41,930 --> 00:03:44,390
nosso servidor LoopBack e também

47
00:03:44,390 --> 00:03:49,520
todos os serviços API que podem ser usados dentro de seu aplicativo Angular.

48
00:03:49,520 --> 00:03:55,485
Assim, seus modelos e seus serviços vêm automaticamente para o passeio depois que você criar o SDK.

49
00:03:55,485 --> 00:04:00,935
Agora é apenas uma questão de incorporar este SDK em nosso aplicativo Angular

50
00:04:00,935 --> 00:04:03,265
e, em seguida, começar rapidamente.

51
00:04:03,265 --> 00:04:08,010
Como já construímos nosso aplicativo Angular em um curso anterior,

52
00:04:08,010 --> 00:04:11,900
vou reajustar esse aplicativo para fazer uso

53
00:04:11,900 --> 00:04:16,660
do LoopBack SDK que vamos exportar deste LoopBack SDK Builder.

54
00:04:16,660 --> 00:04:18,620
Na etapa anterior,

55
00:04:18,620 --> 00:04:20,030
você acabou de instalar

56
00:04:20,030 --> 00:04:23,420
o aplicativo Angular parcialmente concluído que

57
00:04:23,420 --> 00:04:27,305
já foi adaptado para fazer uso do LoopBack SDK.

58
00:04:27,305 --> 00:04:30,070
Então, vamos em frente e construir

59
00:04:30,070 --> 00:04:33,855
o LoopBack SDK e, em seguida, implantá-lo em nosso aplicativo Angular,

60
00:04:33,855 --> 00:04:41,605
e, em seguida, ir em frente e compilar nosso aplicativo Angular e começar com ele.

61
00:04:41,605 --> 00:04:44,390
Para configurar o LoopBack SDK,

62
00:04:44,390 --> 00:04:51,830
vá para a pasta do servidor LoopBack na guia terminal ou na janela de comando.

63
00:04:51,830 --> 00:04:57,355
Então aqui estou eu na minha pasta de servidor LoopBack.

64
00:04:57,355 --> 00:04:58,855
Então, nesta pasta,

65
00:04:58,855 --> 00:05:14,185
deixe-me ir em frente e instalar esse LoopBack

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

67
00:05:16,960 --> 00:05:19,535
Uma vez que o construtor é instalado,

68
00:05:19,535 --> 00:05:22,625
vamos em frente e construir o LoopBack SDK.

69
00:05:22,625 --> 00:05:24,835
Para construir o LoopBack SDK,

70
00:05:24,835 --> 00:05:34,460
vamos ter a ajuda da ferramenta de linha de comando LB-SDK que este módulo LoopBack SDK

71
00:05:34,460 --> 00:05:36,370
configura automaticamente para nós.

72
00:05:36,370 --> 00:05:42,060
Então, para acessar isso, vamos dizer,. /nó módulos.

73
00:05:42,060 --> 00:05:43,610
Então, nos módulos do nó,

74
00:05:43,610 --> 00:05:47,570
há a pasta a.bin que é criada automaticamente sempre que você

75
00:05:47,570 --> 00:05:51,770
instalar vários módulos de nó na pasta lá.

76
00:05:51,770 --> 00:05:55,040
Então, para ir para a pasta the.bin,

77
00:05:55,040 --> 00:06:01,540
vamos acessar este comando LB-SDK lá,

78
00:06:01,540 --> 00:06:03,490
que é instalado automaticamente,

79
00:06:03,490 --> 00:06:07,850
então vamos chamar este servidor de largura. /server.js,

80
00:06:12,430 --> 00:06:20,310
e precisamos especificar o caminho para o aplicativo Angular que acabamos de configurar.

81
00:06:20,310 --> 00:06:23,180
Então, meu aplicativo Angular está atualmente em

82
00:06:23,180 --> 00:06:28,865
meus documentos Coursera angular Confusion pasta LoopBack angular.

83
00:06:28,865 --> 00:06:31,410
Então, deixe-me copiar essa parte.

84
00:06:31,410 --> 00:06:36,470
Então deixe-me entrar no meu terminal ou na janela de comando

85
00:06:36,470 --> 00:06:41,600
onde estou tentando configurar meu LoopBack SDK.

86
00:06:41,600 --> 00:06:43,490
Então, no prompt,

87
00:06:43,490 --> 00:06:45,995
uma vez que está na pasta Meus Documentos,

88
00:06:45,995 --> 00:06:55,540
vou digitar o caminho completo para isso a partir da minha pasta raiz no meu mac.

89
00:06:55,540 --> 00:06:57,680
Se estiver a utilizar o Windows,

90
00:06:57,680 --> 00:07:04,370
certifique-se de que este caminho indica o caminho completo a partir de dois-pontos C ou D dois-pontos, seja

91
00:07:04,370 --> 00:07:07,540
qual for a unidade que estiver a instalá-lo no computador Windows.

92
00:07:07,540 --> 00:07:12,650
Então, o caminho completo para sua pasta LoopBack angular

93
00:07:12,650 --> 00:07:15,505
e, em seguida, vamos dizer,

94
00:07:15,505 --> 00:07:21,900
/SRC, a pasta de origem lá e, em seguida, aplicativo.

95
00:07:21,900 --> 00:07:24,710
Em seguida, vamos implantar o SDK na

96
00:07:24,710 --> 00:07:30,120
pasta compartilhada na subpasta SDK lá.

97
00:07:30,430 --> 00:07:36,680
Queremos que este LoopBack SDK Builder

98
00:07:36,680 --> 00:07:43,570
implante automaticamente a versão web NG2 do SDK.

99
00:07:43,570 --> 00:07:45,879
Então, esta é a versão que irá suportar

100
00:07:45,879 --> 00:07:50,380
aplicações web e nossa aplicação Angular neste caso.

101
00:07:50,380 --> 00:07:54,870
Se você estiver construindo isso para um aplicativo de script nativo, então você dirá,

102
00:07:54,870 --> 00:08:00,050
NG2 nativo para criar o SDK para o aplicativo de script nativo.

103
00:08:00,050 --> 00:08:02,380
Desde que estou construindo meu aplicativo Angular,

104
00:08:02,380 --> 00:08:04,580
eu vou apenas dizer, NG2 web

105
00:08:04,580 --> 00:08:08,190
e, em seguida, deixar o Loopback SDK Builder

106
00:08:08,190 --> 00:08:12,230
criar automaticamente o kit de desenvolvimento de software e, em seguida, implantá-lo

107
00:08:12,230 --> 00:08:20,780
em meus aplicativos Angular pasta app/shared/sdk fonte lá.

108
00:08:20,780 --> 00:08:23,715
Então, depois de alguns segundos,

109
00:08:23,715 --> 00:08:29,915
o SDK é construído e implantado no meu aplicativo Angular.

110
00:08:29,915 --> 00:08:33,250
Agora antes de iniciar a minha aplicação Angular,

111
00:08:33,250 --> 00:08:36,730
deixe-me iniciar o meu servidor LoopBack,

112
00:08:36,730 --> 00:08:40,820
e antes de fazer isso eu vou para outra guia terminal

113
00:08:40,820 --> 00:08:44,900
aqui e, em seguida, iniciar o meu servidor MongoDB,

114
00:08:44,900 --> 00:08:45,955
então bem eu vou dizer,

115
00:08:45,955 --> 00:08:55,790
Mongod —dbpath=data, e, em seguida,

116
00:08:55,790 --> 00:08:57,890
iniciar o meu servidor MongoDB.

117
00:08:57,890 --> 00:09:02,760
Primeiro, deixe-me iniciar meu servidor LoopBack.

118
00:09:02,760 --> 00:09:07,710
Então, no prompt de início do NPM,

119
00:09:07,710 --> 00:09:12,140
e meu servidor LoopBack deve estar ativo e funcionando em um curto espaço de tempo.

120
00:09:12,140 --> 00:09:17,555
Em seguida, agora indo para o meu aplicativo LoopBack,

121
00:09:17,555 --> 00:09:20,645
deixe-me abrir este aplicativo no

122
00:09:20,645 --> 00:09:25,890
meu código Visual Studio para que possamos olhar para o código-fonte.

123
00:09:27,500 --> 00:09:31,665
Quando meu aplicativo estiver aberto no código do Visual Studio,

124
00:09:31,665 --> 00:09:37,315
deixe-me levar isso para uma nova janela de área de trabalho.

125
00:09:37,315 --> 00:09:45,200
Em seguida, deixe-me também iniciar minha implantação de aplicativo Angular

126
00:09:45,200 --> 00:09:53,645
digitando NGServe no prompt e aguarde meu aplicativo Angular para ser compilado.

127
00:09:53,645 --> 00:09:57,785
Uma vez que meu aplicativo Angular é compilado e aplicado,

128
00:09:57,785 --> 00:10:00,910
deixe-me ir para um navegador,

129
00:10:00,910 --> 00:10:04,810
e depois primeiro check-out este aplicativo Angular.

130
00:10:04,810 --> 00:10:06,935
Indo para o navegador,

131
00:10:06,935 --> 00:10:09,455
deixe-me abrir uma nova guia aqui,

132
00:10:09,455 --> 00:10:13,760
e então digite localhost: 4200 e você verá

133
00:10:13,760 --> 00:10:18,345
o aplicativo Angular implantado nesta janela do navegador aqui,

134
00:10:18,345 --> 00:10:21,070
e você pode ver que o Início,

135
00:10:21,070 --> 00:10:25,095
a página Sobre Nós com todos os dados,

136
00:10:25,095 --> 00:10:32,740
depois o Menu e também os Meus Favoritos.

137
00:10:34,120 --> 00:10:38,410
Atualmente, o que não está mostrando nada porque

138
00:10:38,410 --> 00:10:42,640
nenhum usuário está logado e a página de contato, assim como antes.

139
00:10:42,640 --> 00:10:47,520
Então, para entrar, deixe-me entrar como um usuário e então eu vou estar digitando

140
00:10:47,520 --> 00:10:52,540
meu nome de usuário e uma senha aqui,

141
00:10:52,540 --> 00:10:59,030
e então uma vez que eu entrar, então você será capaz de ver que quando eu ir para Meus Favoritos,

142
00:10:59,030 --> 00:11:04,665
os Favoritos deste usuário em particular serão exibidos aqui.

143
00:11:04,665 --> 00:11:08,680
Assim como antes, podemos digitar comentários e, em seguida, enviar comentários

144
00:11:08,680 --> 00:11:13,515
e, em seguida, também adicionar itens aos favoritos e assim por diante.

145
00:11:13,515 --> 00:11:16,900
Todas as funcionalidades que você viu com as versões anteriores

146
00:11:16,900 --> 00:11:22,740
do aplicativo Angular também são suportadas nesta versão do aplicativo Angular.

147
00:11:22,740 --> 00:11:28,860
Também para que seu servidor LoopBack possa servir imagens,

148
00:11:28,860 --> 00:11:36,235
todos esses dados serão armazenados no código do servidor na pasta cliente do código do servidor.

149
00:11:36,235 --> 00:11:39,975
Então, na pasta cliente do meu servidor LoopBack,

150
00:11:39,975 --> 00:11:43,010
observe que eu criei essa subpasta

151
00:11:43,010 --> 00:11:47,365
nomeada imagens e, em seguida, armazenei todas as imagens na subpasta.

152
00:11:47,365 --> 00:11:52,010
Agora, para que essas imagens sejam servidas e também para que

153
00:11:52,010 --> 00:11:58,930
a pasta cliente seja usada como pasta pública para o meu servidor LoopBack,

154
00:11:58,930 --> 00:12:02,630
então em algumas alterações que eu preciso fazer no meu servidor LoopBack.

155
00:12:02,630 --> 00:12:05,100
Agora, a primeira coisa que você precisa fazer é

156
00:12:05,100 --> 00:12:08,275
ir para a pasta de inicialização e na pasta de inicialização,

157
00:12:08,275 --> 00:12:12,250
você veria este arquivo root.js aqui,

158
00:12:12,250 --> 00:12:15,025
que contém essas informações aqui.

159
00:12:15,025 --> 00:12:18,410
Agora, você pode excluir o arquivo root.js

160
00:12:18,410 --> 00:12:22,330
ou simplesmente renomear o arquivo root.js para outra coisa.

161
00:12:22,330 --> 00:12:29,630
Então aqui, você vê que eu renomeei este arquivo para root.jsold com a extensão jsold.

162
00:12:29,630 --> 00:12:34,190
Agora, esse arquivo não deve mais conter a extensão the.js.

163
00:12:34,190 --> 00:12:37,430
Então, qualquer coisa além da extensão the.js está bem.

164
00:12:37,430 --> 00:12:39,975
Então, o que isso significa é que, neste caso,

165
00:12:39,975 --> 00:12:45,250
meu servidor LoopBack, quando ele inicia não executará o código nesta pasta.

166
00:12:45,250 --> 00:12:51,745
Agora, quando você olha para o código no arquivo root.js que foi configurado anteriormente,

167
00:12:51,745 --> 00:12:55,605
você viu que o roteador foi configurado de tal forma que,

168
00:12:55,605 --> 00:13:00,955
quando você acessar a barra que é a pasta raiz de seus servidores,

169
00:13:00,955 --> 00:13:05,170
então ele simplesmente servirá o status de LoopBack servidores e, de fato,

170
00:13:05,170 --> 00:13:08,175
isso é o que vimos nosso servidor LoopBack servindo

171
00:13:08,175 --> 00:13:15,055
o tempo de atividade e o último tempo de reinicialização para o nosso servidor.

172
00:13:15,055 --> 00:13:16,590
Nós não queremos que ele faça isso,

173
00:13:16,590 --> 00:13:20,920
em vez disso queremos que nosso servidor LoopBack seja capaz de usar qualquer coisa que

174
00:13:20,920 --> 00:13:25,390
colocamos na pasta cliente como a pasta pública e assim

175
00:13:25,390 --> 00:13:27,900
qualquer aplicativo cliente pode ser implantado

176
00:13:27,900 --> 00:13:31,590
na pasta cliente do meu servidor LoopBack e deve ser

177
00:13:31,590 --> 00:13:39,250
acessado quando acessamos o LoopBack em seus pontos finais de barra padrão.

178
00:13:39,250 --> 00:13:43,940
Então, essa é a raiz da pasta do servidor.

179
00:13:43,940 --> 00:13:46,890
Então, para fazer isso, a primeira coisa que você precisa fazer é

180
00:13:46,890 --> 00:13:50,560
alterar este nome de arquivos root.js para root.

181
00:13:50,560 --> 00:13:53,245
por exemplo, você pode simplesmente renomear isso para

182
00:13:53,245 --> 00:13:56,440
root.jsold ou você pode simplesmente excluir esse arquivo.

183
00:13:56,440 --> 00:14:00,325
Esse arquivo não será necessário nesta versão do meu servidor LoopBack.

184
00:14:00,325 --> 00:14:01,840
Agora, não só isso,

185
00:14:01,840 --> 00:14:08,265
a segunda parte que você precisa reconfigurar é entrar no arquivo middleware.json aqui.

186
00:14:08,265 --> 00:14:10,230
O arquivo middleware.json.

187
00:14:10,230 --> 00:14:12,170
No arquivo middleware.json,

188
00:14:12,170 --> 00:14:14,605
se você rolar para baixo,

189
00:14:14,605 --> 00:14:17,195
você verá que aqui,

190
00:14:17,195 --> 00:14:23,755
originalmente isso simplesmente conterá arquivos: e então uma chave vazia aqui.

191
00:14:23,755 --> 00:14:26,505
Agora, nessa chave vazia aqui,

192
00:14:26,505 --> 00:14:28,420
basta adicionar este código aqui,

193
00:14:28,420 --> 00:14:36,430
que diz loopback #static e ele diz params$!.. /cliente.

194
00:14:36,820 --> 00:14:41,025
Então, isso indicará ao meu servidor LoopBack

195
00:14:41,025 --> 00:14:45,670
que a pasta cliente que está disponível aqui

196
00:14:45,670 --> 00:14:53,800
deve ser usada como a pasta pública estática para o meu servidor LoopBack.

197
00:14:53,800 --> 00:14:58,790
Então, qualquer coisa colocada na pasta do cliente pode ser acessada a partir do meu servidor.

198
00:14:58,790 --> 00:15:05,725
Então, esta é a alteração adicional que você precisa fazer para o arquivo middleware.json.

199
00:15:05,725 --> 00:15:08,235
Então, uma vez que você fizer essas duas alterações,

200
00:15:08,235 --> 00:15:15,030
em seguida, seu servidor LoopBack será configurado para servir os dados, incluindo

201
00:15:15,030 --> 00:15:17,940
as imagens que você vai colocar

202
00:15:17,940 --> 00:15:22,575
na subpasta imagens sob a pasta cliente aqui.

203
00:15:22,575 --> 00:15:28,475
Então, certifique-se de copiar as imagens para a pasta cliente aqui e a segunda é

204
00:15:28,475 --> 00:15:34,625
ir para o arquivo middleware.json na pasta do servidor

205
00:15:34,625 --> 00:15:37,265
e, em seguida, atualizar esta parte.

206
00:15:37,265 --> 00:15:43,860
Uma vez que fazemos isso, então essas imagens podem ser acessadas simplesmente acessando

207
00:15:43,860 --> 00:15:48,760
o /images/ o nome do arquivo de imagem para acessar

208
00:15:48,760 --> 00:15:54,120
essas imagens porque nossos pratos

209
00:15:54,120 --> 00:16:00,390
, líderes, e as promoções exigirão esses arquivos

210
00:16:00,390 --> 00:16:03,525
de imagem e assim estarão disponíveis para nós

211
00:16:03,525 --> 00:16:08,080
no servidor LoopBack e também o que você colocar na pasta do cliente.

212
00:16:08,080 --> 00:16:14,050
Assim, por exemplo, você pode preparar a pasta de distribuição

213
00:16:14,050 --> 00:16:16,920
para o seu aplicativo Angular e simplesmente copiar

214
00:16:16,920 --> 00:16:21,025
todo o conteúdo da pasta de distribuição para a pasta cliente aqui,

215
00:16:21,025 --> 00:16:25,220
e, em seguida, se você acessar o servidor LoopBack em

216
00:16:25,220 --> 00:16:30,850
seu ponto de extremidade raiz padrão

217
00:16:30,850 --> 00:16:37,565
, então seu aplicativo Angular será automaticamente servido pelo seu servidor LoopBack.

218
00:16:37,565 --> 00:16:43,950
Então, essas são as duas alterações que você precisa fazer para seu servidor LoopBack.

219
00:16:43,950 --> 00:16:49,700
Claro, você deve estar curioso sobre como exatamente este SDK é construído,

220
00:16:49,700 --> 00:16:52,820
onde exatamente está este SDK e como eu

221
00:16:52,820 --> 00:16:56,045
vou realmente fazer uso dele dentro do meu aplicativo Angular.

222
00:16:56,045 --> 00:17:01,955
Então, para fazer isso, vamos para o nosso aplicativo Angular e na pasta de

223
00:17:01,955 --> 00:17:04,375
código-fonte, sob pasta de aplicativo de origem

224
00:17:04,375 --> 00:17:06,565
, agora quando

225
00:17:06,565 --> 00:17:13,235
você abre a pasta compartilhada, você veria que há uma subpasta aqui chamada SDK e dentro desta subpasta SDK,

226
00:17:13,235 --> 00:17:16,365
você encontrará um monte de arquivos aqui,

227
00:17:16,365 --> 00:17:22,565
lb.config.ts, index.ts e dentro dos soquetes de armazenamento,

228
00:17:22,565 --> 00:17:25,330
os serviços e dentro do serviço,

229
00:17:25,330 --> 00:17:28,255
você tem serviços personalizados e serviços principais aqui,

230
00:17:28,255 --> 00:17:31,960
e os vários modelos que são implantados aqui.

231
00:17:31,960 --> 00:17:36,630
Os modelos realmente contêm as estruturas de modelo

232
00:17:36,630 --> 00:17:42,605
para os nossos vários modelos que estamos implementando.

233
00:17:42,605 --> 00:17:45,280
Agora, este é o LoopBack SDK.

234
00:17:45,280 --> 00:17:49,430
Este código é construído automaticamente para você e, se você quiser,

235
00:17:49,430 --> 00:17:52,800
você pode simplesmente entrar e, em seguida,

236
00:17:52,800 --> 00:17:57,030
passar por esses arquivos para apenas ver o que está disponível lá.

237
00:17:57,030 --> 00:18:00,560
Certifique-se de que não modifique nenhum dos arquivos

238
00:18:00,560 --> 00:18:02,940
nesta subpasta SDK porque isso é

239
00:18:02,940 --> 00:18:06,040
criado automaticamente para você pelo Loopback SDK Builder,

240
00:18:06,040 --> 00:18:10,355
e isso conterá tudo configurado para que

241
00:18:10,355 --> 00:18:15,125
seu servidor LoopBack possa ser acessado a partir de seu aplicativo Angular.

242
00:18:15,125 --> 00:18:19,240
Os serviços que vou fazer uso estão todos disponíveis aqui.

243
00:18:19,240 --> 00:18:21,630
Agora, como fazemos uso disso?

244
00:18:21,630 --> 00:18:25,600
Então, para ajudá-lo a entender como fazemos uso disso,

245
00:18:25,600 --> 00:18:33,725
vamos visitar nosso componente doméstico e depois ver como o componente doméstico está agora atualizado.

246
00:18:33,725 --> 00:18:35,855
Então, quando você vai para o componente doméstico,

247
00:18:35,855 --> 00:18:44,125
você vai notar que eu estou agora importando pratos de.. /shared/sdk/modelos.

248
00:18:44,125 --> 00:18:47,950
Então, esses são os modelos que são exportados automaticamente para

249
00:18:47,950 --> 00:18:52,390
o SDK pelo meu Loopback SDK Builder.

250
00:18:52,390 --> 00:18:57,010
Então, é aqui que meu modelo de pratos será definido lá.

251
00:18:57,010 --> 00:18:59,450
Então, eu só vou alavancar o modelo de pratos.

252
00:18:59,450 --> 00:19:06,290
Da mesma forma, o serviço em si está disponível como este DishesAPI,

253
00:19:06,290 --> 00:19:15,220
como você pode ver aqui e este DishesAPI está no.. /shared/sdk/services pasta aqui.

254
00:19:15,220 --> 00:19:18,280
Da mesma forma, as promoções e a API de promoções,

255
00:19:18,280 --> 00:19:20,110
e líderes e líderes API.

256
00:19:20,110 --> 00:19:24,750
Então, todos eles são criados automaticamente para mim pelo Loopback SDK Builder.

257
00:19:24,750 --> 00:19:26,720
Agora, então você vai para o código,

258
00:19:26,720 --> 00:19:31,045
você vai notar agora que eu vou declarar o prato como pratos,

259
00:19:31,045 --> 00:19:35,455
promoção como promoções, e líder como /líderes.

260
00:19:35,455 --> 00:19:39,955
Esses três são os modelos exportados pelo Loopback SDK Builder.

261
00:19:39,955 --> 00:19:44,905
Observe também como eu reconfigurei os três serviços aqui.

262
00:19:44,905 --> 00:19:48,090
Agora, meu serviço de prato está se referindo a pratos API,

263
00:19:48,090 --> 00:19:50,950
serviços de promoção referindo-se a promoções API,

264
00:19:50,950 --> 00:19:55,825
e serviço líder para líderes API API,

265
00:19:55,825 --> 00:19:59,980
e também notar como eu acessar o serviço de prato aqui.

266
00:19:59,980 --> 00:20:06,290
Então, eu vou dizer que este serviço de prato encontrar um e onde destaque igual a verdadeiro.

267
00:20:06,290 --> 00:20:14,539
Então, é aqui que você se lembra que no meu LoopBack rest API Explorer,

268
00:20:14,539 --> 00:20:20,405
eu tinha digitado isso no filtro lá,

269
00:20:20,405 --> 00:20:23,490
então eu tentei encontrar os pratos lá.

270
00:20:23,490 --> 00:20:27,260
Então, isso é exatamente o que estou fazendo aqui também no meu código aqui.

271
00:20:27,260 --> 00:20:30,140
Então, este FindOnE, em seguida, fornecido com este,

272
00:20:30,140 --> 00:20:34,140
vai encontrar um item e, em seguida, retornar

273
00:20:34,140 --> 00:20:38,240
que aqui, e em seguida, que eu estou atribuindo cada um

274
00:20:38,240 --> 00:20:43,510
a este prato aqui eo resto da minha aplicação angular funciona exatamente da mesma maneira que antes.

275
00:20:43,510 --> 00:20:47,490
Agora, observe também que no construtor,

276
00:20:47,490 --> 00:20:52,945
observe como configurei isso chamado de configuração LoopBack.

277
00:20:52,945 --> 00:20:59,685
Agora, para fazer a configuração LoopBack em cada componente que você está fazendo uso,

278
00:20:59,685 --> 00:21:09,280
você precisa importar essa configuração LoopBack desta pasta compartilhada do SDK aqui e também,

279
00:21:09,280 --> 00:21:13,790
esta versão da API que eu declaro.

280
00:21:14,410 --> 00:21:19,340
Atualizei este arquivo baseurl.ts.

281
00:21:19,340 --> 00:21:21,720
Então, na pasta URL base,

282
00:21:21,720 --> 00:21:31,330
eu atualizei isso para o meu nome do meu computador dois pontos 3.000.

283
00:21:31,330 --> 00:21:35,510
Então, este certifique-se de substituir isso com

284
00:21:35,510 --> 00:21:42,460
o endereço IP ou o nome do seu computador específico no qual você está executando.

285
00:21:42,460 --> 00:21:50,350
Então, certifique-se de atualizar a URL base aqui e a versão da API aqui é simplesmente uma string.

286
00:21:50,350 --> 00:21:52,560
Dizendo API aqui.

287
00:21:52,560 --> 00:21:58,790
Então esses dois serão usados no meu arquivo component.ts home.

288
00:21:58,790 --> 00:22:02,560
Então eu estou importando esta versão API aqui e o LoopbackConfig.

289
00:22:02,560 --> 00:22:05,475
O baseURL eu já estou

290
00:22:05,475 --> 00:22:10,640
injetando no meu construtor aqui para que já está disponível aqui,

291
00:22:10,640 --> 00:22:14,890
e em seguida, no meu construtor do meu componente,

292
00:22:14,890 --> 00:22:19,440
eu tenho que fazer essas duas declarações aqui.

293
00:22:19,440 --> 00:22:22,190
Então, vamos dizer, “LoopBack definir URL base

294
00:22:22,190 --> 00:22:25,120
para URL base” que é o mesmo que eu acabei de

295
00:22:25,120 --> 00:22:31,950
injetar lá e, em seguida, olhar para trás na versão da API definida para a versão da API aqui.

296
00:22:31,950 --> 00:22:36,695
Então esses dois que eu preciso configurar no meu componente home

297
00:22:36,695 --> 00:22:41,815
e também qualquer outro componente onde eu estou acessando meu servidor LoopBack,

298
00:22:41,815 --> 00:22:43,425
eu preciso configurar isso.

299
00:22:43,425 --> 00:22:48,060
Agora, o construtor de SDK LoopBack sugere que precisamos

300
00:22:48,060 --> 00:22:53,880
fazer isso em cada um dos componentes aqui.

301
00:22:53,880 --> 00:23:01,775
Além disso, você vai notar que se você vai para o arquivo module.ts aplicativo no arquivo module.ts aplicativo,

302
00:23:01,775 --> 00:23:08,610
eu removi todas as entradas de todos os outros serviços e, em vez disso, eu estou importando

303
00:23:08,610 --> 00:23:15,480
isso aqui chamado módulo importar SDK Browser de compartilhamento SDK aqui.

304
00:23:15,480 --> 00:23:18,110
SDK Browser módulo aqui,

305
00:23:18,110 --> 00:23:24,075
e se você descer para as entradas aqui,

306
00:23:24,075 --> 00:23:31,635
você verá que eu configurei este SDK Browser module.forRoot aqui nas entradas.

307
00:23:31,635 --> 00:23:38,180
Então, este módulo SDK Browser é configurado automaticamente quando criamos nosso LoopBack SDK e

308
00:23:38,180 --> 00:23:41,000
nós só precisamos importar isso para o nosso aplicativo

309
00:23:41,000 --> 00:23:44,705
module.ts arquivo e também notar que os provedores,

310
00:23:44,705 --> 00:23:46,895
é onde configuramos nossos serviços,

311
00:23:46,895 --> 00:23:49,540
não contém mais nenhum dos serviços porque

312
00:23:49,540 --> 00:23:52,745
vem como parte do meu LoopBack SDK,

313
00:23:52,745 --> 00:23:56,715
então a única coisa que estou fornecendo é a URL base aqui.

314
00:23:56,715 --> 00:24:02,510
Eu removi todos os outros do meu aplicativo module.ts arquivo aqui.

315
00:24:03,180 --> 00:24:07,325
Então, essa é uma mudança que você vai notar.

316
00:24:07,325 --> 00:24:11,720
Assim, da mesma forma, se você for para o arquivo About

317
00:24:11,720 --> 00:24:14,740
component.ts, o arquivo.ts componente DishDetail,

318
00:24:14,740 --> 00:24:19,740
o arquivo component.ts favoritos e também o arquivo.ts do componente do menu.

319
00:24:19,740 --> 00:24:22,420
Então vamos olhar para o arquivo component.ts menu.

320
00:24:22,420 --> 00:24:25,190
Então você vai ver aqui novamente eu estou importando este

321
00:24:25,190 --> 00:24:29,370
quatro e, em seguida, no meu componente de menu eu estou dizendo,

322
00:24:29,370 --> 00:24:33,075
pratos prato API e, em seguida, eu estou

323
00:24:33,075 --> 00:24:37,400
configurando o LoopbackConfig set BaseURL SetAPI versão.

324
00:24:37,400 --> 00:24:42,550
Eu já fiz isso no repositório Angular que eu tenho fornecido para

325
00:24:42,550 --> 00:24:49,235
você para o meu aplicativo angular para o servidor LoopBack,

326
00:24:49,235 --> 00:24:54,220
e também, você vai ver que eu acabei de fazer alguma modificação aqui.

327
00:24:54,220 --> 00:25:00,225
Então, se você quiser encontrar todos os itens do serviço de prato para que você simplesmente diga

328
00:25:00,225 --> 00:25:03,335
dishservice.Find e que irá retornar

329
00:25:03,335 --> 00:25:09,100
todos os pratos que estão lá no meu servidor LoopBack aqui.

330
00:25:09,100 --> 00:25:11,425
Então é isso que estou recuperando aqui.

331
00:25:11,425 --> 00:25:15,435
Então, o resto do código deve parecer familiar aqui, exceto que aqui eu chamo

332
00:25:15,435 --> 00:25:20,010
pratos é igual a pratos e matriz de pratos aqui.

333
00:25:20,010 --> 00:25:22,995
Então essa é a mudança que você verá no componente de menu.

334
00:25:22,995 --> 00:25:28,810
Agora, você deve estar se perguntando como funciona a autenticação de usuário neste caso.

335
00:25:28,810 --> 00:25:32,275
Para autenticação do usuário, deixe-me chamar sua atenção para

336
00:25:32,275 --> 00:25:35,800
dois lugares onde estou fazendo uso da autenticação do usuário.

337
00:25:35,800 --> 00:25:38,735
Vamos primeiro para o componente de login.

338
00:25:38,735 --> 00:25:40,990
Então, no componente de login,

339
00:25:40,990 --> 00:25:46,030
você veria que no componente de login eu estou importando esses dois aqui,

340
00:25:46,030 --> 00:25:49,970
a API do cliente que é os serviços que me permitem

341
00:25:49,970 --> 00:25:54,245
fazer autenticação de usuário e login e logout,

342
00:25:54,245 --> 00:25:57,430
e também estou importando o modelo de cliente e o modelo de

343
00:25:57,430 --> 00:26:00,995
token de acesso e no componente de login,

344
00:26:00,995 --> 00:26:06,320
você veria que pelo serviço Auth agora não é nada além de API do cliente e

345
00:26:06,730 --> 00:26:15,670
também você notará que no componente de login quando o formulário de login for enviado,

346
00:26:15,670 --> 00:26:19,530
chamo este AuthService.Login.

347
00:26:19,530 --> 00:26:24,655
Esta função de login que está disponível através da API do cliente.

348
00:26:24,655 --> 00:26:30,775
Lembre-se de que quando tentamos fazer login usando o LoopBack rest API explorer,

349
00:26:30,775 --> 00:26:36,500
estávamos usando o endpoint do cliente para fazer login no sistema.

350
00:26:36,500 --> 00:26:39,310
Então é exatamente isso que estou fazendo em código aqui.

351
00:26:39,310 --> 00:26:43,335
Então vamos dizer este AuthService.Login e aqui você vê que

352
00:26:43,335 --> 00:26:47,930
ele leva esses parâmetros livres aqui,

353
00:26:47,930 --> 00:26:55,425
o nome de usuário e a senha como o primeiro objeto JavaScript aqui,

354
00:26:55,425 --> 00:27:01,755
e então eu também estou especificando este user.remember., .remember é a bandeira

355
00:27:01,755 --> 00:27:08,310
da caixa de seleção lembrar me que temos em nossa diálogo de componentes de login lá.

356
00:27:08,310 --> 00:27:12,180
Então, quando o usuário verifica que as informações do usuário serão

357
00:27:12,180 --> 00:27:16,095
automaticamente persistidas pelo SDK.

358
00:27:16,095 --> 00:27:18,945
O serviço de autenticação fornecido dentro do SDK.

359
00:27:18,945 --> 00:27:21,275
Então, agora você vê que eu não preciso

360
00:27:21,275 --> 00:27:24,290
implementar explicitamente nenhum serviço de autorização que esteja

361
00:27:24,290 --> 00:27:26,940
automaticamente disponível para mim por meio

362
00:27:26,940 --> 00:27:31,565
da API do cliente que está disponível como um serviço aqui.

363
00:27:31,565 --> 00:27:35,320
Então, é assim que eu faço login no usuário aqui,

364
00:27:35,320 --> 00:27:38,275
e quando o usuário fizer login isso retornará

365
00:27:38,275 --> 00:27:45,015
um objeto JavaScript e do objeto JavaScript eu recebo o

366
00:27:45,015 --> 00:27:50,930
usuário res.user.. fornece as informações do usuário para mim e eu estou

367
00:27:50,930 --> 00:27:57,355
simplesmente enviando isso para o meu HeaderComponent aqui.

368
00:27:57,355 --> 00:27:59,860
Então, indo para o HeaderComponent.

369
00:27:59,860 --> 00:28:02,235
Então vamos para o componente de cabeçalho,

370
00:28:02,235 --> 00:28:04,620
e no arquivo HeaderComponent.ts,

371
00:28:04,620 --> 00:28:09,670
você verá que novamente aqui estou importando a API do cliente e o

372
00:28:09,670 --> 00:28:18,115
cliente aqui e também você notará que na API do cliente,

373
00:28:18,115 --> 00:28:23,830
eu especifico aqui nota que eu estou dizendo que

374
00:28:23,830 --> 00:28:29,880
este cliente é este AuthService getCachedCurrent.

375
00:28:29,880 --> 00:28:34,190
Portanto, se um usuário está bloqueado no atualmente conectado, as

376
00:28:34,190 --> 00:28:38,660
informações de usuários são convertidas no AuthService, que não é nada além da API do cliente.

377
00:28:38,660 --> 00:28:43,775
Então, quando eu chamo esse getCachedCurrent isso retornará o usuário conectado no momento.

378
00:28:43,775 --> 00:28:45,570
Se nenhum usuário estiver conectado,

379
00:28:45,570 --> 00:28:46,820
isso retornará nulo.

380
00:28:46,820 --> 00:28:51,865
Então essa é uma maneira que eu posso verificar para ver se um usuário está conectado ou não no momento.

381
00:28:51,865 --> 00:28:55,690
Então, se o usuário estiver conectado no momento, esse cliente

382
00:28:55,690 --> 00:28:59,740
receberá as informações sobre o cliente que está carregado.

383
00:28:59,740 --> 00:29:02,385
As informações do cliente, incluindo nome, sobrenome,

384
00:29:02,385 --> 00:29:11,190
e-mail e perfil do outro usuário, estarão disponíveis para este objeto this.customer.

385
00:29:11,190 --> 00:29:16,080
Então, aqui estou verificando se o this.customer não é nulo.

386
00:29:16,080 --> 00:29:19,265
Se não for nulo, então eu vou salvar o nome de usuário para

387
00:29:19,265 --> 00:29:23,100
this.customer.username e dessa forma quando

388
00:29:23,100 --> 00:29:26,705
o nome de usuário é definido, então meu cabeçalho

389
00:29:26,705 --> 00:29:31,690
na barra de ferramentas em meu HeaderComponent irá refletir o nome do usuário lá.

390
00:29:31,690 --> 00:29:37,820
Agora, para sair do usuário tudo o que eu estou fazendo é definir o nome de usuário e

391
00:29:37,820 --> 00:29:45,665
as variáveis do cliente como nulo e então eu simplesmente chamei authService.log,

392
00:29:45,665 --> 00:29:51,075
AuthServices é CustomerAPI.Logout, e é assim que eu faço logout do usuário.

393
00:29:51,075 --> 00:29:52,760
Quando o usuário faz logout,

394
00:29:52,760 --> 00:29:55,750
suas credenciais são todas destruídas.

395
00:29:55,750 --> 00:30:02,360
Agora, tudo isso é cuidado automaticamente pelo serviço de API do cliente

396
00:30:02,360 --> 00:30:09,075
que está disponível no meu LoopBack SDK que eu acabei de criar lá.

397
00:30:09,075 --> 00:30:13,830
Então, você percebe que como o LoopBack SDK Builder constrói

398
00:30:13,830 --> 00:30:19,430
os serviços e os modelos e tudo o que eu preciso e no meu aplicativo Angular,

399
00:30:19,430 --> 00:30:22,360
eu estou simplesmente importando esses e, em seguida, fazendo uso

400
00:30:22,360 --> 00:30:25,450
deles para configurar meu aplicativo Angular.

401
00:30:25,450 --> 00:30:27,065
Então, quando eu criar

402
00:30:27,065 --> 00:30:32,510
o LoopBack SDK usando o LoopBack SDK Builder, tudo o que me resta é

403
00:30:32,510 --> 00:30:40,545
implementar os componentes e seus modelos de exibição que se encaixam no resto.

404
00:30:40,545 --> 00:30:45,480
Os serviços são criados automaticamente para mim pelo LoopBack SDK Builder,

405
00:30:45,480 --> 00:30:49,160
os modelos são construídos automaticamente para mim e tudo o que eu preciso fazer é

406
00:30:49,160 --> 00:30:54,060
apenas importá-los em todos os componentes onde eu preciso fazer uso deles.

407
00:30:54,060 --> 00:31:01,775
Então, observe como este aplicativo Angular foi atualizado para fazer uso do LoopBack SDK.

408
00:31:01,775 --> 00:31:06,520
Agora, se você quiser obter mais informações sobre como o LoopBack SDK deve ser usado,

409
00:31:06,520 --> 00:31:11,465
você também pode verificar a documentação fornecida pelo LoopBack SDK Builder.

410
00:31:11,465 --> 00:31:14,425
Então, se você for para o LoopBack SDK Builder,

411
00:31:14,425 --> 00:31:19,440
um link para isso estará disponível nos recursos adicionais desta lição

412
00:31:19,440 --> 00:31:21,820
e no LoopBack SDK Builder,

413
00:31:21,820 --> 00:31:24,930
você terá todas as informações necessárias

414
00:31:24,930 --> 00:31:31,830
para fazer uso do SDK criado pelo LoopBack SDK Builder.

415
00:31:31,830 --> 00:31:34,205
Então, se você vai para a documentação wiki.

416
00:31:34,205 --> 00:31:39,830
Na documentação wiki, muita explicação de como o LoopBack SDK Builder pode

417
00:31:39,830 --> 00:31:46,050
ser ou o SDK gerado pelo LoopBack SDK Builder deve ser usado é tudo dado aqui.

418
00:31:46,050 --> 00:31:49,460
Então, eu só passei por esta documentação para descobrir como

419
00:31:49,460 --> 00:31:53,555
fazer uso do SDK que é construído pelo LoopBack SDK Builder

420
00:31:53,555 --> 00:31:57,420
e, em seguida, reconfigurou meu aplicativo Angular para fazer uso

421
00:31:57,420 --> 00:32:02,090
disso para interagir com meu servidor LoopBack.

422
00:32:02,090 --> 00:32:06,715
Então, com isso, demonstrei rapidamente como

423
00:32:06,715 --> 00:32:11,140
você pode criar seu aplicativo Angular e

424
00:32:11,140 --> 00:32:15,270
aproveitar o SDK construído pelo LoopBack SDK

425
00:32:15,270 --> 00:32:20,365
Builder para acessar seu servidor LoopBack de dentro de seu aplicativo Angular.

426
00:32:20,365 --> 00:32:26,210
Uma abordagem semelhante também será apropriada para a sua aplicação Ionic.

427
00:32:26,210 --> 00:32:31,610
Para o aplicativo de script nativo, você constrói o SDK com NG2 nativo

428
00:32:31,610 --> 00:32:37,835
na linha de comando em vez de NG2 web, como usamos quando criamos esse SDK.

429
00:32:37,835 --> 00:32:41,890
Com esta introdução rápida de como podemos fazer uso

430
00:32:41,890 --> 00:32:44,815
do LoopBack SDK Builder para construir o SDK e,

431
00:32:44,815 --> 00:32:47,980
em seguida, usá-lo dentro do nosso aplicativo Angular,

432
00:32:47,980 --> 00:32:52,300
eles chegam ao fim deste exercício.