1
00:00:03,650 --> 00:00:10,755
Ahora que hemos completado el desarrollo de un servidor Rest API completo usando LoopBack,

2
00:00:10,755 --> 00:00:14,639
la siguiente pregunta inmediata que surgirá en su mente es,

3
00:00:14,639 --> 00:00:20,090
¿cómo adaptamos la aplicación Angular para hacer uso de este servidor Rest API?

4
00:00:20,090 --> 00:00:23,135
Como hemos hecho en los casos anteriores,

5
00:00:23,135 --> 00:00:29,190
también necesitaremos reconfigurar nuestra aplicación Angular para hacer uso específicamente de

6
00:00:29,190 --> 00:00:31,385
los endpoints Rest API y

7
00:00:31,385 --> 00:00:37,190
las diversas solicitudes de Rest API tal como expone nuestro servidor LoopBack.

8
00:00:37,190 --> 00:00:40,295
Ahora, aquí es donde vamos a aprovechar

9
00:00:40,295 --> 00:00:46,865
un LoopBack SDK que se puede construir automáticamente para nosotros usando un módulo Node.

10
00:00:46,865 --> 00:00:51,214
Examinaremos nuestros servidores LoopBack,

11
00:00:51,214 --> 00:00:56,975
varios endpoints Rest API y construiremos automáticamente el SDK,

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

13
00:00:59,480 --> 00:01:04,380
nuestra aplicación Angular y luego poder comunicarnos con nuestro servidor LoopBack,

14
00:01:04,380 --> 00:01:10,055
tanto para la autenticación como para el intercambio de datos.

15
00:01:10,055 --> 00:01:13,000
Para comenzar en este ejercicio,

16
00:01:13,000 --> 00:01:17,045
primero clone el repositorio git que contiene

17
00:01:17,045 --> 00:01:23,535
una aplicación angular parcialmente completada que se comunica con nuestro servidor LoopBack.

18
00:01:23,535 --> 00:01:26,730
Entonces, para hacer eso, vaya a su ubicación conveniente en su computadora.

19
00:01:26,730 --> 00:01:29,580
Así que, aquí estoy en mi carpeta Coursera Angular.

20
00:01:29,580 --> 00:01:33,390
Voy a clonar el repositorio git

21
00:01:33,390 --> 00:01:35,680
escribiendo git clon

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
y luego clonar este repositorio git.

24
00:01:55,460 --> 00:01:58,645
Una vez que el repositorio git es clonado, nos

25
00:01:58,645 --> 00:02:08,355
moveremos a la carpeta Confusion Angular6 LoopBack y luego

26
00:02:08,355 --> 00:02:12,370
realizaremos una instalación de NPM para instalar

27
00:02:12,370 --> 00:02:19,135
todos los módulos de nodo para esta aplicación angular parcialmente completada.

28
00:02:19,135 --> 00:02:26,670
Para crear automáticamente el kit de desarrollo de software LoopBack para nuestro servidor LoopBack,

29
00:02:26,670 --> 00:02:32,125
vamos a tomar la ayuda de este módulo de nodo LoopBack SDK Builder.

30
00:02:32,125 --> 00:02:34,955
Por lo tanto, este LoopBack SDK Builder

31
00:02:34,955 --> 00:02:39,140
es un módulo de nodo impulsado por la comunidad que en realidad se desarrolla

32
00:02:39,140 --> 00:02:46,380
a partir del LoopBack SDK Angular oficial que los desarrolladores de LoopBack habían lanzado.

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

34
00:02:50,160 --> 00:02:53,885
Por lo tanto, esto se ha modificado en este Loopback SDK Builder

35
00:02:53,885 --> 00:02:58,390
para admitir los dos Angular y acerca de las aplicaciones.

36
00:02:58,390 --> 00:03:01,090
Por lo tanto, el LoopBack SDK Builder,

37
00:03:01,090 --> 00:03:10,155
el módulo de nodo en sí una vez instalado en la carpeta del proyecto del servidor,

38
00:03:10,155 --> 00:03:13,610
entonces puede hacer uso del LoopBack SDK Builder para

39
00:03:13,610 --> 00:03:18,810
pasar automáticamente a través de su aplicación LoopBack que ya ha construido.

40
00:03:18,810 --> 00:03:22,190
Esto construirá automáticamente todo lo

41
00:03:22,190 --> 00:03:25,610
que necesitamos para comenzar en nuestra aplicación Angular.

42
00:03:25,610 --> 00:03:27,765
Por lo tanto, construye el kit de desarrollo de software.

43
00:03:27,765 --> 00:03:30,155
Por lo tanto, dentro del kit de desarrollo de software,

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

45
00:03:35,995 --> 00:03:41,930
todas las interfaces, todos los modelos de los diversos datos que vamos a almacenar en

46
00:03:41,930 --> 00:03:44,390
nuestro servidor LoopBack y también

47
00:03:44,390 --> 00:03:49,520
todos los servicios API que se pueden utilizar dentro de su aplicación Angular.

48
00:03:49,520 --> 00:03:55,485
Por lo tanto, sus modelos y sus servicios vienen automáticamente para el viaje una vez que cree el SDK.

49
00:03:55,485 --> 00:04:00,935
Ahora es solo cuestión de incorporar este SDK a nuestra aplicación Angular,

50
00:04:00,935 --> 00:04:03,265
y luego comenzar rápidamente.

51
00:04:03,265 --> 00:04:08,010
Como ya hemos construido nuestra aplicación angular en un curso anterior,

52
00:04:08,010 --> 00:04:11,900
voy a modernizar esa aplicación para hacer uso

53
00:04:11,900 --> 00:04:16,660
del LoopBack SDK que exportaremos desde este LoopBack SDK Builder.

54
00:04:16,660 --> 00:04:18,620
En el paso anterior,

55
00:04:18,620 --> 00:04:20,030
acaba de instalar

56
00:04:20,030 --> 00:04:23,420
la aplicación Angular parcialmente completada que

57
00:04:23,420 --> 00:04:27,305
ya ha sido adaptada para hacer uso del SDK de LoopBack.

58
00:04:27,305 --> 00:04:30,070
Por lo tanto, vamos a construir

59
00:04:30,070 --> 00:04:33,855
el LoopBack SDK y luego implementarlo en nuestra aplicación Angular,

60
00:04:33,855 --> 00:04:41,605
y luego seguir adelante y compilar nuestra aplicación Angular y comenzar con ella.

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

62
00:04:44,390 --> 00:04:51,830
vaya a la carpeta del servidor LoopBack en la pestaña Terminal o en la ventana de comandos.

63
00:04:51,830 --> 00:04:57,355
Así que aquí estoy en mi carpeta de servidor LoopBack.

64
00:04:57,355 --> 00:04:58,855
Por lo tanto, en esta carpeta,

65
00:04:58,855 --> 00:05:14,185
permítanme seguir adelante e instalar ese LoopBack

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

67
00:05:16,960 --> 00:05:19,535
Una vez instalado el constructor,

68
00:05:19,535 --> 00:05:22,625
vamos a seguir adelante y construir el LoopBack SDK.

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

70
00:05:24,835 --> 00:05:34,460
vamos a tomar la ayuda de la herramienta de línea de comandos LB-SDK que este módulo LoopBack SDK

71
00:05:34,460 --> 00:05:36,370
configura automáticamente para nosotros.

72
00:05:36,370 --> 00:05:42,060
Por lo tanto, para acceder a eso, diremos, /node.

73
00:05:42,060 --> 00:05:43,610
Por lo tanto, en los módulos de nodo,

74
00:05:43,610 --> 00:05:47,570
hay una carpeta a.bin que se crea automáticamente cada vez que

75
00:05:47,570 --> 00:05:51,770
instala varios módulos de nodo en la carpeta allí.

76
00:05:51,770 --> 00:05:55,040
Entonces, para ir a la carpeta the.bin,

77
00:05:55,040 --> 00:06:01,540
accederemos a este comando LB-SDK allí,

78
00:06:01,540 --> 00:06:03,490
que se instala automáticamente,

79
00:06:03,490 --> 00:06:07,850
luego llamaremos a este servidor de ancho. /server.js,

80
00:06:12,430 --> 00:06:20,310
y necesitamos especificar la ruta a la aplicación Angular que acabamos de configurar.

81
00:06:20,310 --> 00:06:23,180
Por lo tanto, mi aplicación angular está actualmente en

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

83
00:06:28,865 --> 00:06:31,410
Así que, déjame copiar esa parte.

84
00:06:31,410 --> 00:06:36,470
Luego déjame ir a mi terminal o a la ventana de comandos

85
00:06:36,470 --> 00:06:41,600
donde estoy tratando de configurar mi LoopBack SDK.

86
00:06:41,600 --> 00:06:43,490
Por lo tanto, en el mensaje,

87
00:06:43,490 --> 00:06:45,995
ya que está en la carpeta Mis documentos,

88
00:06:45,995 --> 00:06:55,540
voy a escribir la ruta completa a esto comenzando desde mi carpeta raíz en mi mac.

89
00:06:55,540 --> 00:06:57,680
Si está utilizando su Windows,

90
00:06:57,680 --> 00:07:04,370
asegúrese de que esta ruta indica la ruta completa a partir de dos puntos C o D,

91
00:07:04,370 --> 00:07:07,540
cualquiera que sea la unidad que esté instalando en su equipo con Windows.

92
00:07:07,540 --> 00:07:12,650
Por lo tanto, la ruta completa a su carpeta LoopBack angular,

93
00:07:12,650 --> 00:07:15,505
y luego diremos,

94
00:07:15,505 --> 00:07:21,900
/SRC, la carpeta de origen allí, y luego la aplicación.

95
00:07:21,900 --> 00:07:24,710
Luego, vamos a implementar el SDK en

96
00:07:24,710 --> 00:07:30,120
la carpeta compartida en la subcarpeta SDK allí.

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

98
00:07:36,680 --> 00:07:43,570
implemente automáticamente la versión web NG2 del SDK.

99
00:07:43,570 --> 00:07:45,879
Por lo tanto, esta es la versión que soportará

100
00:07:45,879 --> 00:07:50,380
las aplicaciones web y nuestra aplicación angular en este caso.

101
00:07:50,380 --> 00:07:54,870
Si está construyendo esto para una aplicación de script nativa, entonces dirá,

102
00:07:54,870 --> 00:08:00,050
NG2 nativo para construir el SDK para la aplicación Native Script.

103
00:08:00,050 --> 00:08:02,380
Como estoy construyendo mi aplicación Angular,

104
00:08:02,380 --> 00:08:04,580
solo diré, NG2 web,

105
00:08:04,580 --> 00:08:08,190
y luego dejaré que el Loopback SDK Builder

106
00:08:08,190 --> 00:08:12,230
construya automáticamente el kit de desarrollo de software y luego lo implemente

107
00:08:12,230 --> 00:08:20,780
en mi aplicación de origen de aplicaciones Angular App/Shared/sdk carpeta allí.

108
00:08:20,780 --> 00:08:23,715
Entonces, después de unos segundos,

109
00:08:23,715 --> 00:08:29,915
el SDK se construye e implementa en mi aplicación angular.

110
00:08:29,915 --> 00:08:33,250
Ahora, antes de iniciar mi aplicación angular,

111
00:08:33,250 --> 00:08:36,730
permítanme iniciar mi servidor LoopBack,

112
00:08:36,730 --> 00:08:40,820
y antes de hacerlo iré a otra pestaña de terminal

113
00:08:40,820 --> 00:08:44,900
aquí y luego iniciaré mi servidor MongoDB,

114
00:08:44,900 --> 00:08:45,955
así que diré,

115
00:08:45,955 --> 00:08:55,790
Mongod —dbpath=data, y luego

116
00:08:55,790 --> 00:08:57,890
iniciaré mi servidor MongoDB.

117
00:08:57,890 --> 00:09:02,760
Primero, permítanme iniciar mi servidor LoopBack.

118
00:09:02,760 --> 00:09:07,710
Por lo tanto, en el inicio de NPM,

119
00:09:07,710 --> 00:09:12,140
y mi servidor LoopBack debería estar en funcionamiento en poco tiempo.

120
00:09:12,140 --> 00:09:17,555
Luego, ahora yendo a mi aplicación LoopBack,

121
00:09:17,555 --> 00:09:20,645
permítanme abrir esta aplicación en

122
00:09:20,645 --> 00:09:25,890
mi código de Visual Studio para que podamos ver el código fuente.

123
00:09:27,500 --> 00:09:31,665
Una vez que mi aplicación está abierta en código de Visual Studio,

124
00:09:31,665 --> 00:09:37,315
déjame llevarlo a una nueva ventana de escritorio.

125
00:09:37,315 --> 00:09:45,200
Luego, permítanme también iniciar mi implementación de aplicaciones angulares

126
00:09:45,200 --> 00:09:53,645
escribiendo ngServe en el símbolo del sistema y espere a que se compila mi aplicación angular.

127
00:09:53,645 --> 00:09:57,785
Una vez que mi aplicación angular se compila y aplica,

128
00:09:57,785 --> 00:10:00,910
déjame ir a un navegador,

129
00:10:00,910 --> 00:10:04,810
y luego primero pagar esta aplicación Angular.

130
00:10:04,810 --> 00:10:06,935
Ir al navegador,

131
00:10:06,935 --> 00:10:09,455
déjame abrir una nueva pestaña aquí,

132
00:10:09,455 --> 00:10:13,760
y luego escriba localhost: 4200 y verá

133
00:10:13,760 --> 00:10:18,345
la aplicación angular desplegada en esta ventana del navegador aquí,

134
00:10:18,345 --> 00:10:21,070
y se puede ver que el Inicio,

135
00:10:21,070 --> 00:10:25,095
la página Acerca de nosotros con todos los datos,

136
00:10:25,095 --> 00:10:32,740
luego el Menú y también los Mis Favoritos.

137
00:10:34,120 --> 00:10:38,410
Actualmente, que no muestra nada porque

138
00:10:38,410 --> 00:10:42,640
ningún usuario ha iniciado sesión y la página de contacto, al igual que antes.

139
00:10:42,640 --> 00:10:47,520
Así que para iniciar sesión, déjame iniciar sesión como usuario y luego escribiré

140
00:10:47,520 --> 00:10:52,540
mi nombre de usuario y una contraseña aquí,

141
00:10:52,540 --> 00:10:59,030
y luego una vez que inicie sesión entonces podrás ver que cuando vaya a Mis Favoritos,

142
00:10:59,030 --> 00:11:04,665
los Favoritos de este usuario en particular se mostrarán aquí.

143
00:11:04,665 --> 00:11:08,680
Al igual que antes, podemos escribir comentarios y luego enviar comentarios,

144
00:11:08,680 --> 00:11:13,515
y luego agregar elementos a los favoritos, etc.

145
00:11:13,515 --> 00:11:16,900
Todas las funciones que ha visto con las versiones anteriores de

146
00:11:16,900 --> 00:11:22,740
la aplicación Angular también son compatibles en esta versión de la aplicación Angular.

147
00:11:22,740 --> 00:11:28,860
También para que su servidor LoopBack pueda servir imágenes,

148
00:11:28,860 --> 00:11:36,235
todos estos datos se almacenarán en su código de servidor en la carpeta cliente del código del servidor.

149
00:11:36,235 --> 00:11:39,975
Por lo tanto, en la carpeta cliente de mi servidor LoopBack,

150
00:11:39,975 --> 00:11:43,010
observe que he creado esta subcarpeta

151
00:11:43,010 --> 00:11:47,365
llamada imágenes y luego almacenado todas las imágenes en la subcarpeta.

152
00:11:47,365 --> 00:11:52,010
Ahora, para que se sirvan estas imágenes y también para

153
00:11:52,010 --> 00:11:58,930
que la carpeta cliente se use como carpeta pública para mi servidor LoopBack,

154
00:11:58,930 --> 00:12:02,630
luego en un par de cambios que necesito hacer en mi servidor LoopBack.

155
00:12:02,630 --> 00:12:05,100
Ahora, lo primero que debe hacer es

156
00:12:05,100 --> 00:12:08,275
ir a la carpeta de arranque y en la carpeta de arranque,

157
00:12:08,275 --> 00:12:12,250
verá este archivo root.js aquí,

158
00:12:12,250 --> 00:12:15,025
que contiene esta información aquí.

159
00:12:15,025 --> 00:12:18,410
Ahora, puede eliminar el archivo root.js

160
00:12:18,410 --> 00:12:22,330
o simplemente cambiar el nombre del archivo root.js a otra cosa.

161
00:12:22,330 --> 00:12:29,630
Así que aquí, verá que he cambiado el nombre de este archivo a root.jsold con la extensión jsold.

162
00:12:29,630 --> 00:12:34,190
Ahora, este archivo ya no debería contener la extensión the.js.

163
00:12:34,190 --> 00:12:37,430
Por lo tanto, cualquier cosa que no sea la extensión the.js está bien.

164
00:12:37,430 --> 00:12:39,975
Entonces, lo que esto significa es que en este caso,

165
00:12:39,975 --> 00:12:45,250
mi servidor LoopBack, cuando se inicie no ejecutará el código en esta carpeta.

166
00:12:45,250 --> 00:12:51,745
Ahora, cuando mira el código en el archivo root.js que se configuró anteriormente,

167
00:12:51,745 --> 00:12:55,605
vio que el enrutador estaba configurado de tal manera que,

168
00:12:55,605 --> 00:13:00,955
al acceder a la barra diagonal que es la carpeta raíz de sus servidores,

169
00:13:00,955 --> 00:13:05,170
simplemente servirá el estado de LoopBack de los servidores y, de hecho,

170
00:13:05,170 --> 00:13:08,175
eso es lo que vimos nuestro servidor LoopBack que sirve

171
00:13:08,175 --> 00:13:15,055
el tiempo de actividad y la última hora de reinicio para nuestro servidor.

172
00:13:15,055 --> 00:13:16,590
No queremos que haga eso,

173
00:13:16,590 --> 00:13:20,920
en su lugar queremos que nuestro servidor LoopBack pueda usar lo que

174
00:13:20,920 --> 00:13:25,390
coloquemos en la carpeta cliente como carpeta pública y por lo tanto

175
00:13:25,390 --> 00:13:27,900
cualquier aplicación cliente se puede implementar en

176
00:13:27,900 --> 00:13:31,590
la carpeta cliente de mi servidor LoopBack y se debe

177
00:13:31,590 --> 00:13:39,250
acceder cuando accedamos al LoopBack en sus extremos de barra diagonal estándar.

178
00:13:39,250 --> 00:13:43,940
Por lo tanto, esa es la raíz de la carpeta del servidor.

179
00:13:43,940 --> 00:13:46,890
Entonces, para hacer eso, lo primero que debe hacer es

180
00:13:46,890 --> 00:13:50,560
cambiar este nombre de archivos root.js a root.

181
00:13:50,560 --> 00:13:53,245
por ejemplo, simplemente puede cambiar el nombre a

182
00:13:53,245 --> 00:13:56,440
root.jsold o simplemente puede eliminar ese archivo.

183
00:13:56,440 --> 00:14:00,325
Ese archivo no será necesario en esta versión de mi servidor LoopBack.

184
00:14:00,325 --> 00:14:01,840
Ahora, no solo eso,

185
00:14:01,840 --> 00:14:08,265
la segunda parte que necesita reconfigurar es entrar en el archivo middleware.json aquí.

186
00:14:08,265 --> 00:14:10,230
El archivo middleware.json.

187
00:14:10,230 --> 00:14:12,170
En el archivo middleware.json,

188
00:14:12,170 --> 00:14:14,605
si se desplaza hacia abajo,

189
00:14:14,605 --> 00:14:17,195
verá que aquí,

190
00:14:17,195 --> 00:14:23,755
originalmente esto simplemente contendrá archivos: y luego una llave vacía aquí.

191
00:14:23,755 --> 00:14:26,505
Ahora, en esa llave vacía aquí,

192
00:14:26,505 --> 00:14:28,420
simplemente agregue este código aquí,

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

194
00:14:36,820 --> 00:14:41,025
Por lo tanto, esto indicará a mi servidor LoopBack

195
00:14:41,025 --> 00:14:45,670
que la carpeta cliente que está disponible aquí

196
00:14:45,670 --> 00:14:53,800
debe usarse como la carpeta pública estática para mi servidor LoopBack.

197
00:14:53,800 --> 00:14:58,790
Por lo tanto, cualquier cosa colocada en la carpeta del cliente se puede acceder desde mi servidor.

198
00:14:58,790 --> 00:15:05,725
Por lo tanto, este es el cambio adicional que debe hacer en el archivo middleware.json.

199
00:15:05,725 --> 00:15:08,235
Por lo tanto, una vez que haga estos dos cambios,

200
00:15:08,235 --> 00:15:15,030
entonces su servidor LoopBack estará todo configurado para servir los datos, incluidas

201
00:15:15,030 --> 00:15:17,940
las imágenes que va a poner en

202
00:15:17,940 --> 00:15:22,575
la subcarpeta de imágenes debajo de la carpeta del cliente aquí.

203
00:15:22,575 --> 00:15:28,475
Por lo tanto, asegúrese de copiar las imágenes en la carpeta del cliente aquí y la segunda es

204
00:15:28,475 --> 00:15:34,625
ir al archivo middleware.json en la carpeta del servidor

205
00:15:34,625 --> 00:15:37,265
y, a continuación, actualizar esta parte.

206
00:15:37,265 --> 00:15:43,860
Una vez que lo hagamos, entonces se puede acceder a estas imágenes simplemente accediendo

207
00:15:43,860 --> 00:15:48,760
al /images/ el nombre del archivo de imagen para acceder a

208
00:15:48,760 --> 00:15:54,120
estas imágenes porque nuestros platos

209
00:15:54,120 --> 00:16:00,390
, líderes y promociones requerirán estos archivos de imagen y

210
00:16:00,390 --> 00:16:03,525
por lo que estarán disponibles para nosotros desde

211
00:16:03,525 --> 00:16:08,080
el servidor LoopBack y también lo que ponga en la carpeta del cliente.

212
00:16:08,080 --> 00:16:14,050
Entonces, por ejemplo, puede preparar la carpeta de distribución

213
00:16:14,050 --> 00:16:16,920
para su aplicación angular y simplemente copiar

214
00:16:16,920 --> 00:16:21,025
todo el contenido de la carpeta de distribución en la carpeta cliente aquí,

215
00:16:21,025 --> 00:16:25,220
y luego si accede al servidor LoopBack en

216
00:16:25,220 --> 00:16:30,850
su extremo raíz estándar

217
00:16:30,850 --> 00:16:37,565
, entonces su aplicación Angular será automáticamente servido por su servidor LoopBack.

218
00:16:37,565 --> 00:16:43,950
Por lo tanto, estos son los dos cambios que debe realizar en su servidor LoopBack.

219
00:16:43,950 --> 00:16:49,700
Por supuesto, debe tener curiosidad sobre cómo se construye exactamente este SDK,

220
00:16:49,700 --> 00:16:52,820
dónde está exactamente este SDK y cómo

221
00:16:52,820 --> 00:16:56,045
lo voy a usar dentro de mi aplicación Angular.

222
00:16:56,045 --> 00:17:01,955
Entonces, para hacer eso, vamos a nuestra aplicación angular y en la carpeta fuente,

223
00:17:01,955 --> 00:17:04,375
debajo de la carpeta de la aplicación fuente,

224
00:17:04,375 --> 00:17:06,565
ahora cuando abra la carpeta compartida,

225
00:17:06,565 --> 00:17:13,235
verá que hay una subcarpeta aquí llamada SDK y dentro de esta subcarpeta SDK,

226
00:17:13,235 --> 00:17:16,365
encontrará un montón de archivos aquí,

227
00:17:16,365 --> 00:17:22,565
lb.config.ts, index.ts y dentro de los sockets de almacenamiento

228
00:17:22,565 --> 00:17:25,330
, los servicios y dentro del servicio,

229
00:17:25,330 --> 00:17:28,255
tiene servicios personalizados y servicios principales aquí,

230
00:17:28,255 --> 00:17:31,960
y los diversos modelos que se implementan aquí.

231
00:17:31,960 --> 00:17:36,630
En realidad, los modelos contienen las estructuras del modelo

232
00:17:36,630 --> 00:17:42,605
para nuestros diversos modelos que estamos implementando.

233
00:17:42,605 --> 00:17:45,280
Ahora, este es el SDK de LoopBack.

234
00:17:45,280 --> 00:17:49,430
Este código se construye automáticamente para usted y si lo

235
00:17:49,430 --> 00:17:52,800
desea, simplemente puede entrar y luego

236
00:17:52,800 --> 00:17:57,030
pasar a través de estos archivos para ver lo que está disponible allí.

237
00:17:57,030 --> 00:18:00,560
Asegúrese de no modificar ninguno de los archivos de

238
00:18:00,560 --> 00:18:02,940
esta subcarpeta SDK porque el

239
00:18:02,940 --> 00:18:06,040
Generador de SDK de Loopback crea automáticamente para usted

240
00:18:06,040 --> 00:18:10,355
y contiene todo lo configurado para que

241
00:18:10,355 --> 00:18:15,125
se pueda acceder a su servidor LoopBack desde la aplicación Angular.

242
00:18:15,125 --> 00:18:19,240
Los servicios que voy a hacer uso están disponibles aquí.

243
00:18:19,240 --> 00:18:21,630
Ahora, ¿cómo hacemos uso de esto?

244
00:18:21,630 --> 00:18:25,600
Por lo tanto, para ayudarle a entender cómo hacemos uso de esto,

245
00:18:25,600 --> 00:18:33,725
vamos a visitar nuestro componente de hogar y luego ver cómo se actualiza el componente de hogar.

246
00:18:33,725 --> 00:18:35,855
Por lo tanto, cuando vaya al componente de casa,

247
00:18:35,855 --> 00:18:44,125
se dará cuenta de que ahora estoy importando platos de.. /shared/sdk/models.

248
00:18:44,125 --> 00:18:47,950
Por lo tanto, estos son los modelos que se exporta automáticamente

249
00:18:47,950 --> 00:18:52,390
al SDK por mi Loopback SDK Builder.

250
00:18:52,390 --> 00:18:57,010
Entonces, aquí es donde mi modelo de platos se definirá allí.

251
00:18:57,010 --> 00:18:59,450
Así que, sólo voy a aprovechar el modelo de platos.

252
00:18:59,450 --> 00:19:06,290
Del mismo modo, el servicio en sí está disponible como este DishesAPI,

253
00:19:06,290 --> 00:19:15,220
como se puede ver aquí y este DishesAPI está en el.. /shared/sdk/services aquí.

254
00:19:15,220 --> 00:19:18,280
Del mismo modo, las promociones y la API de promociones,

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

256
00:19:20,110 --> 00:19:24,750
Por lo tanto, todos estos son creados automáticamente para mí por el Loopback SDK Builder.

257
00:19:24,750 --> 00:19:26,720
Ahora, entonces entra en el código,

258
00:19:26,720 --> 00:19:31,045
ahora se dará cuenta de que declararé el plato como platos,

259
00:19:31,045 --> 00:19:35,455
promoción como promociones, y líder como /líderes.

260
00:19:35,455 --> 00:19:39,955
Estos tres son los modelos exportados por Loopback SDK Builder.

261
00:19:39,955 --> 00:19:44,905
También observe cómo he reconfigurado los tres servicios aquí.

262
00:19:44,905 --> 00:19:48,090
Ahora, mi servicio de platos se refiere a la API de platos,

263
00:19:48,090 --> 00:19:50,950
los servicios de promoción que se refieren a la API de promociones,

264
00:19:50,950 --> 00:19:55,825
y el servicio líder a los líderes de API API,

265
00:19:55,825 --> 00:19:59,980
y también se da cuenta de cómo accedo al servicio de platos aquí.

266
00:19:59,980 --> 00:20:06,290
Por lo tanto, voy a decir que este servicio de platos encontrar uno y donde aparece igual a verdadero.

267
00:20:06,290 --> 00:20:14,539
Entonces, aquí es donde recuerdas que en mi LoopBack rest API Explorer,

268
00:20:14,539 --> 00:20:20,405
había escrito esto en el filtro allí,

269
00:20:20,405 --> 00:20:23,490
luego traté de encontrar los platos allí.

270
00:20:23,490 --> 00:20:27,260
Entonces, eso es exactamente lo que estoy haciendo aquí también en mi código aquí.

271
00:20:27,260 --> 00:20:30,140
Entonces, este

272
00:20:30,140 --> 00:20:34,140
FindOne, luego suministrado con esto, encontrará un elemento y luego devolverá eso aquí,

273
00:20:34,140 --> 00:20:38,240
y luego que estoy asignando cada uno a este plato aquí y

274
00:20:38,240 --> 00:20:43,510
el resto de mi aplicación angular funciona exactamente de la misma manera que antes.

275
00:20:43,510 --> 00:20:47,490
Ahora, también observe que en el constructor,

276
00:20:47,490 --> 00:20:52,945
tenga en cuenta cómo he configurado esto llamado la configuración de LoopBack.

277
00:20:52,945 --> 00:20:59,685
Ahora, para hacer la configuración de LoopBack en cada componente que está haciendo uso,

278
00:20:59,685 --> 00:21:09,280
necesita importar esta configuración de LoopBack desde esta carpeta compartida SDK aquí y también,

279
00:21:09,280 --> 00:21:13,790
esta versión de API que declaro.

280
00:21:14,410 --> 00:21:19,340
He actualizado este archivo baseurl.ts.

281
00:21:19,340 --> 00:21:21,720
Entonces, en la carpeta de URL base,

282
00:21:21,720 --> 00:21:31,330
he actualizado esto a mi nombre de los dos puntos de mi computadora 3.000.

283
00:21:31,330 --> 00:21:35,510
Por lo tanto, este asegúrese de reemplazar esto con

284
00:21:35,510 --> 00:21:42,460
la dirección IP o el nombre de su computadora específica en la que se está ejecutando.

285
00:21:42,460 --> 00:21:50,350
Por lo tanto, asegúrese de actualizar la URL base aquí y la versión de la API aquí es simplemente una cadena.

286
00:21:50,350 --> 00:21:52,560
Decir API aquí.

287
00:21:52,560 --> 00:21:58,790
Así que estos dos se van a usar en mi archivo de componentes de inicio.

288
00:21:58,790 --> 00:22:02,560
Así que estoy importando esta versión de API aquí y el LoopbackConfig.

289
00:22:02,560 --> 00:22:05,475
El BaseURL que ya estoy

290
00:22:05,475 --> 00:22:10,640
inyectando en mi constructor aquí, por lo que ya está disponible aquí,

291
00:22:10,640 --> 00:22:14,890
y luego en mi constructor de mi componente,

292
00:22:14,890 --> 00:22:19,440
necesito hacer estas dos declaraciones aquí.

293
00:22:19,440 --> 00:22:22,190
Por lo tanto, diremos, «LoopBack establece la URL

294
00:22:22,190 --> 00:22:25,120
base en la URL base» que es la misma que la que acabo de

295
00:22:25,120 --> 00:22:31,950
inyectar allí y luego mire hacia atrás la versión de API establecida a la versión de API aquí.

296
00:22:31,950 --> 00:22:36,695
Entonces, estos dos necesito configurar en mi componente de inicio

297
00:22:36,695 --> 00:22:41,815
y también en cualquier otro componente donde estoy accediendo a mi servidor LoopBack,

298
00:22:41,815 --> 00:22:43,425
necesito configurar esto.

299
00:22:43,425 --> 00:22:48,060
Ahora, LoopBack SDK Builder sugiere que necesitamos

300
00:22:48,060 --> 00:22:53,880
hacer esto en cada uno de los componentes aquí.

301
00:22:53,880 --> 00:23:01,775
Además, notará que si va al archivo module.ts de la aplicación en el archivo module.ts de la aplicación,

302
00:23:01,775 --> 00:23:08,610
he eliminado todas las entradas de todos los otros servicios y en su lugar estoy importando

303
00:23:08,610 --> 00:23:15,480
esto aquí llamado módulo de navegador SDK de importación desde el SDK compartido aquí.

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

305
00:23:18,110 --> 00:23:24,075
y si va a las entradas aquí,

306
00:23:24,075 --> 00:23:31,635
verá que he configurado este SDK Browser Module.ForRoot aquí en las entradas.

307
00:23:31,635 --> 00:23:38,180
Así que este módulo SDK Browser se configura automáticamente cuando construimos nuestro LoopBack SDK y

308
00:23:38,180 --> 00:23:41,000
solo necesitamos importarlo en nuestro

309
00:23:41,000 --> 00:23:44,705
archivo module.ts de la aplicación y también notar que los proveedores,

310
00:23:44,705 --> 00:23:46,895
aquí es donde configuramos nuestros servicios,

311
00:23:46,895 --> 00:23:49,540
ya no contienen ninguno de los servicios porque

312
00:23:49,540 --> 00:23:52,745
viene como parte de mi LoopBack SDK,

313
00:23:52,745 --> 00:23:56,715
por lo que lo único que estoy proporcionando es la URL base aquí.

314
00:23:56,715 --> 00:24:02,510
He eliminado todos los demás del archivo module.ts de mi aplicación aquí.

315
00:24:03,180 --> 00:24:07,325
Por lo tanto, ese es un cambio que notarás.

316
00:24:07,325 --> 00:24:11,720
De manera similar, si va al archivo About component.ts,

317
00:24:11,720 --> 00:24:14,740
al archivo.ts component.ts de DishDetail,

318
00:24:14,740 --> 00:24:19,740
al archivo.component.ts de favoritos y también al archivo.ts de menú.

319
00:24:19,740 --> 00:24:22,420
Así que veamos el archivo component.ts de menú.

320
00:24:22,420 --> 00:24:25,190
Así que verá aquí de nuevo que estoy importando estos

321
00:24:25,190 --> 00:24:29,370
cuatro y luego en mi componente de menú estoy diciendo,

322
00:24:29,370 --> 00:24:33,075
platos de servicio de platos API y luego estoy

323
00:24:33,075 --> 00:24:37,400
configurando la versión de LoopbackConfig establecida BaseURL setAPI.

324
00:24:37,400 --> 00:24:42,550
Ya lo he hecho en el repositorio Angular que

325
00:24:42,550 --> 00:24:49,235
le he proporcionado para mi aplicación angular para el servidor LoopBack

326
00:24:49,235 --> 00:24:54,220
, y también, verá que acabo de hacer algunas modificaciones aquí.

327
00:24:54,220 --> 00:25:00,225
Así que si usted quiere encontrar todos los artículos del servicio de platos por lo que simplemente dice

328
00:25:00,225 --> 00:25:03,335
dishservice.Find y que va a devolver

329
00:25:03,335 --> 00:25:09,100
todos los platos que están allí en mi servidor LoopBack aquí.

330
00:25:09,100 --> 00:25:11,425
Así que eso es lo que estoy recuperando aquí.

331
00:25:11,425 --> 00:25:15,435
Así que el resto del código debería parecer familiar aquí, excepto que aquí llamo

332
00:25:15,435 --> 00:25:20,010
platos es igual a platos y variedad de platos aquí.

333
00:25:20,010 --> 00:25:22,995
Así que ese es el cambio que verá en el componente de menú.

334
00:25:22,995 --> 00:25:28,810
Ahora, debe preguntarse cómo funciona la autenticación de usuario en este caso.

335
00:25:28,810 --> 00:25:32,275
Para la autenticación de usuario, permítanme llamar su atención sobre

336
00:25:32,275 --> 00:25:35,800
dos lugares en los que estoy haciendo uso de la autenticación de usuario.

337
00:25:35,800 --> 00:25:38,735
Primero vayamos al componente de inicio de sesión.

338
00:25:38,735 --> 00:25:40,990
Por lo tanto, en el componente de inicio de sesión,

339
00:25:40,990 --> 00:25:46,030
vería que en el componente de inicio de sesión estoy importando estos dos aquí,

340
00:25:46,030 --> 00:25:49,970
la API del cliente, que es los servicios que me permiten

341
00:25:49,970 --> 00:25:54,245
hacer autenticación de usuario y iniciar sesión y cerrar sesión,

342
00:25:54,245 --> 00:25:57,430
y también estoy importando el modelo del cliente y el modelo de

343
00:25:57,430 --> 00:26:00,995
token de acceso y en el componente de inicio de sesión,

344
00:26:00,995 --> 00:26:06,320
verá que por el servicio Auth ahora no es más que API del cliente y

345
00:26:06,730 --> 00:26:15,670
también notará que en el componente de inicio de sesión cuando se envíe el formulario de inicio de sesión,

346
00:26:15,670 --> 00:26:19,530
llamo a este AuthService.login.

347
00:26:19,530 --> 00:26:24,655
Esta función de inicio de sesión que está disponible a través de la API del cliente.

348
00:26:24,655 --> 00:26:30,775
Recuerde que cuando intentamos iniciar sesión con el explorador de API de reposo de LoopBack,

349
00:26:30,775 --> 00:26:36,500
estábamos usando el extremo del cliente para iniciar sesión en el sistema.

350
00:26:36,500 --> 00:26:39,310
Entonces eso es exactamente lo que estoy haciendo en el código aquí.

351
00:26:39,310 --> 00:26:43,335
Así que diremos este AuthService.Login y aquí verás

352
00:26:43,335 --> 00:26:47,930
que toma estos parámetros libres aquí,

353
00:26:47,930 --> 00:26:55,425
el nombre de usuario y la contraseña como el primer objeto JavaScript aquí,

354
00:26:55,425 --> 00:27:01,755
y luego también estoy especificando este user.remember., .remember es el indicador

355
00:27:01,755 --> 00:27:08,310
de la casilla de verificación Recordarme que tenemos en nuestro diálogo de componentes de inicio de sesión allí.

356
00:27:08,310 --> 00:27:12,180
Por lo tanto, cuando el usuario comprueba que en la información del usuario se

357
00:27:12,180 --> 00:27:16,095
persistirá automáticamente por el SDK.

358
00:27:16,095 --> 00:27:18,945
El servicio de autenticación que se proporciona dentro del SDK.

359
00:27:18,945 --> 00:27:21,275
Por lo tanto, ahora ve que no necesito

360
00:27:21,275 --> 00:27:24,290
implementar explícitamente ningún servicio de autorización que esté

361
00:27:24,290 --> 00:27:26,940
disponible automáticamente a través de

362
00:27:26,940 --> 00:27:31,565
la API del cliente que está disponible como servicio aquí.

363
00:27:31,565 --> 00:27:35,320
Entonces, así es como inicio de sesión al usuario aquí,

364
00:27:35,320 --> 00:27:38,275
y cuando el usuario inicie sesión esto devolverá

365
00:27:38,275 --> 00:27:45,015
un objeto JavaScript y desde el objeto JavaScript obtengo el

366
00:27:45,015 --> 00:27:50,930
res.user.. user me proporciona la información del usuario y

367
00:27:50,930 --> 00:27:57,355
simplemente estoy enviando esto a mi HeaderComponent aquí.

368
00:27:57,355 --> 00:27:59,860
Entonces entrando en el HeaderComponent.

369
00:27:59,860 --> 00:28:02,235
Así que vamos al componente de encabezado,

370
00:28:02,235 --> 00:28:04,620
y en el archivo HeaderComponent.ts,

371
00:28:04,620 --> 00:28:09,670
verá que de nuevo aquí estoy importando la API del cliente y el

372
00:28:09,670 --> 00:28:18,115
cliente aquí y también notará que en la API del cliente,

373
00:28:18,115 --> 00:28:23,830
especifico aquí que estoy diciendo que

374
00:28:23,830 --> 00:28:29,880
este cliente es este AuthService GetCachedCurrent.

375
00:28:29,880 --> 00:28:34,190
Por lo tanto, si un usuario está bloqueado en el

376
00:28:34,190 --> 00:28:38,660
usuario conectado actualmente, la información se convierte en AuthService, que no es más que la API del cliente.

377
00:28:38,660 --> 00:28:43,775
Por lo tanto, cuando llamo a este getCachedCurrent, esto devolverá el usuario actualmente conectado.

378
00:28:43,775 --> 00:28:45,570
Si ningún usuario ha iniciado sesión,

379
00:28:45,570 --> 00:28:46,820
esto devolverá nulo.

380
00:28:46,820 --> 00:28:51,865
Así que esa es una forma en que puedo verificar si un usuario está actualmente conectado o no.

381
00:28:51,865 --> 00:28:55,690
Por lo tanto, si el usuario está conectado actualmente, this.customer

382
00:28:55,690 --> 00:28:59,740
obtendrá la información sobre el cliente que está cargado.

383
00:28:59,740 --> 00:29:02,385
La información del cliente incluyendo nombre, apellido,

384
00:29:02,385 --> 00:29:11,190
el correo electrónico y el perfil del otro usuario estará disponible para este objeto this.customer.

385
00:29:11,190 --> 00:29:16,080
Por lo tanto, aquí estoy verificando para asegurarme de que this.customer no sea nulo.

386
00:29:16,080 --> 00:29:19,265
Si no es nulo, guardaré el nombre de usuario en

387
00:29:19,265 --> 00:29:23,100
this.customer.username y de esa manera cuando

388
00:29:23,100 --> 00:29:26,705
se establezca el nombre de usuario, mi encabezado en

389
00:29:26,705 --> 00:29:31,690
la barra de herramientas en mi HeaderComponent reflejará el nombre del usuario allí.

390
00:29:31,690 --> 00:29:37,820
Ahora, para cerrar la sesión del usuario, todo lo que estoy haciendo es establecer el nombre de usuario y

391
00:29:37,820 --> 00:29:45,665
las variables del cliente en null y luego simplemente llamé a authService.log,

392
00:29:45,665 --> 00:29:51,075
AuthServices es CustomerAPI.Logout, y así es como cierre la sesión del usuario.

393
00:29:51,075 --> 00:29:52,760
Cuando el usuario cierra la sesión,

394
00:29:52,760 --> 00:29:55,750
todas sus credenciales se destruyen.

395
00:29:55,750 --> 00:30:02,360
Ahora, todo esto se atiende automáticamente por el servicio API del cliente

396
00:30:02,360 --> 00:30:09,075
que está disponible en mi LoopBack SDK que acabo de construir allí.

397
00:30:09,075 --> 00:30:13,830
Por lo tanto, nota que cómo el LoopBack SDK Builder construye

398
00:30:13,830 --> 00:30:19,430
los servicios y los modelos y todo lo que necesito y en mi aplicación Angular,

399
00:30:19,430 --> 00:30:22,360
simplemente estoy importando esos y luego haciendo uso

400
00:30:22,360 --> 00:30:25,450
de ellos para configurar mi aplicación Angular.

401
00:30:25,450 --> 00:30:27,065
Por lo tanto, una vez que construyo

402
00:30:27,065 --> 00:30:32,510
el LoopBack SDK usando el LoopBack SDK Builder, todo lo que me queda es

403
00:30:32,510 --> 00:30:40,545
implementar los componentes y sus plantillas de vista que se encuentran todo el resto.

404
00:30:40,545 --> 00:30:45,480
Los servicios son creados automáticamente para mí por el LoopBack SDK Builder,

405
00:30:45,480 --> 00:30:49,160
los modelos se crean automáticamente para mí y todo lo que necesito hacer es

406
00:30:49,160 --> 00:30:54,060
importarlos a todos los componentes donde necesito utilizarlos.

407
00:30:54,060 --> 00:31:01,775
Por lo tanto, observe cómo se ha actualizado esta aplicación angular para hacer uso del SDK de LoopBack.

408
00:31:01,775 --> 00:31:06,520
Ahora, si desea obtener más información sobre cómo se debe utilizar el SDK de LoopBack,

409
00:31:06,520 --> 00:31:11,465
también puede consultar la documentación proporcionada por el LoopBack SDK Builder.

410
00:31:11,465 --> 00:31:14,425
Por lo tanto, si va al LoopBack SDK Builder,

411
00:31:14,425 --> 00:31:19,440
hay un enlace a esto disponible en los recursos adicionales para esta lección,

412
00:31:19,440 --> 00:31:21,820
y en LoopBack SDK Builder,

413
00:31:21,820 --> 00:31:24,930
tendrá toda la información que necesita

414
00:31:24,930 --> 00:31:31,830
para hacer uso del SDK creado por LoopBack SDK Builder.

415
00:31:31,830 --> 00:31:34,205
Así que si vas a la documentación wiki.

416
00:31:34,205 --> 00:31:39,830
En la documentación wiki se da mucha explicación de cómo puede

417
00:31:39,830 --> 00:31:46,050
ser el LoopBack SDK Builder o el SDK generado por el LoopBack SDK Builder.

418
00:31:46,050 --> 00:31:49,460
Por lo tanto, acabo de revisar esta documentación para averiguar cómo

419
00:31:49,460 --> 00:31:53,555
hacer uso del SDK creado por el LoopBack SDK Builder,

420
00:31:53,555 --> 00:31:57,420
y luego reconfiguré mi aplicación Angular para hacer uso de

421
00:31:57,420 --> 00:32:02,090
eso para interactuar con mi servidor LoopBack.

422
00:32:02,090 --> 00:32:06,715
Entonces, con esto, le he demostrado rápidamente cómo

423
00:32:06,715 --> 00:32:11,140
puede construir su aplicación angular y

424
00:32:11,140 --> 00:32:15,270
aprovechar el SDK creado por el LoopBack SDK Builder

425
00:32:15,270 --> 00:32:20,365
para acceder a su servidor LoopBack desde su aplicación Angular.

426
00:32:20,365 --> 00:32:26,210
Un enfoque similar también será apropiado para su aplicación iónica.

427
00:32:26,210 --> 00:32:31,610
Para la aplicación Native Script, construye el SDK con NG2 nativo en

428
00:32:31,610 --> 00:32:37,835
la línea de comandos en lugar de NG2 web como usamos cuando construimos este SDK.

429
00:32:37,835 --> 00:32:41,890
Con esta rápida introducción a cómo podemos hacer uso

430
00:32:41,890 --> 00:32:44,815
del LoopBack SDK Builder para construir el SDK y

431
00:32:44,815 --> 00:32:47,980
luego hacer uso de él dentro de nuestra aplicación Angular,

432
00:32:47,980 --> 00:32:52,300
llegan al final de este ejercicio.