1
00:00:00,000 --> 00:00:08,095
Ahora que hemos completado la actualización del lado del servidor,

2
00:00:08,095 --> 00:00:10,770
es el momento de pasar al cliente angular.

3
00:00:10,770 --> 00:00:13,830
Para su comodidad, le he proporcionado

4
00:00:13,830 --> 00:00:17,700
el repositorio de GitHub que contiene la versión final

5
00:00:17,700 --> 00:00:20,840
del cliente angular que puede comunicarse con

6
00:00:20,840 --> 00:00:26,805
nuestro servidor API REST y luego renderizar las diversas vistas para nuestro cliente.

7
00:00:26,805 --> 00:00:29,690
Por lo tanto, he tomado la aplicación angular que

8
00:00:29,690 --> 00:00:32,895
desarrollamos en el segundo curso de esta especialización,

9
00:00:32,895 --> 00:00:34,380
y luego la modificamos.

10
00:00:34,380 --> 00:00:39,680
Haremos un breve recorrido por el código en un poco más tarde.

11
00:00:39,680 --> 00:00:44,005
Ahora, clonará el repositorio de Git en su computadora,

12
00:00:44,005 --> 00:00:47,525
luego iniciará su cliente angular

13
00:00:47,525 --> 00:00:50,820
y luego verá que se comunica con nuestro lado del servidor.

14
00:00:50,820 --> 00:00:54,555
Veamos los detalles a continuación.

15
00:00:54,555 --> 00:00:57,885
Para comenzar con este ejercicio,

16
00:00:57,885 --> 00:01:01,345
en su terminal o ventana de comandos,

17
00:01:01,345 --> 00:01:04,070
vaya a su ubicación conveniente y luego en

18
00:01:04,070 --> 00:01:06,685
el símbolo del sistema escriba git clone

19
00:01:06,685 --> 00:01:21,615
https://github.com/jmuppala/conFusion-Angular6.git.

20
00:01:21,615 --> 00:01:28,705
Luego, deje que la aplicación Angular se clone en su computadora.

21
00:01:28,705 --> 00:01:30,495
Una vez completada la clonación,

22
00:01:30,495 --> 00:01:39,340
muévase a la carpeta Confusion-angular6

23
00:01:39,340 --> 00:01:43,620
que acaba de crearse al clonar este repositorio git.

24
00:01:43,620 --> 00:01:48,845
Luego notará inmediatamente que ya hay un montón de archivos allí.

25
00:01:48,845 --> 00:01:56,700
Ahora, en el símbolo del sistema, escriba npm install,

26
00:01:56,700 --> 00:02:00,500
para instalar todos los módulos de nodo de los

27
00:02:00,500 --> 00:02:04,460
que depende esta aplicación angular.

28
00:02:04,460 --> 00:02:09,415
Por lo tanto, una vez que los módulos de nodo o todos instalados,

29
00:02:09,415 --> 00:02:18,095
entonces podemos iniciar nuestro NG servir para compilar y servir nuestra aplicación angular.

30
00:02:18,095 --> 00:02:21,765
Una vez que todo esté instalado por npm install,

31
00:02:21,765 --> 00:02:27,080
asegúrese de que su servidor MongoDB está en

32
00:02:27,080 --> 00:02:32,365
funcionamiento y también su servidor API REST también está en funcionamiento.

33
00:02:32,365 --> 00:02:35,165
De lo contrario, su cliente angular no funcionará.

34
00:02:35,165 --> 00:02:39,720
Por lo tanto, ahora que ha instalado su cliente angular en su computadora,

35
00:02:39,720 --> 00:02:43,815
en el mensaje escriba ng serve y

36
00:02:43,815 --> 00:02:50,755
su aplicación angular será compilada y servida por ng serve en poco tiempo.

37
00:02:50,755 --> 00:02:54,725
Una vez que su aplicación angular se compila correctamente,

38
00:02:54,725 --> 00:02:59,345
vaya a un navegador y abra su aplicación angular en el navegador.

39
00:02:59,345 --> 00:03:01,025
Ir al navegador,

40
00:03:01,025 --> 00:03:06,665
en la barra de direcciones,

41
00:03:06,665 --> 00:03:12,050
déjame escribir localhost: 4200 y

42
00:03:12,050 --> 00:03:14,345
verá que su aplicación angular se

43
00:03:14,345 --> 00:03:17,930
inicia y es visible en la pantalla aquí.

44
00:03:17,930 --> 00:03:21,170
Notará inmediatamente que su aplicación Angular

45
00:03:21,170 --> 00:03:24,500
puede obtener los datos del servidor y luego representar

46
00:03:24,500 --> 00:03:28,115
las diversas partes de su aplicación Angular como lo que

47
00:03:28,115 --> 00:03:33,040
hizo al final de su curso Angular.

48
00:03:33,080 --> 00:03:35,605
Cuando vaya a hablar de carpeta,

49
00:03:35,605 --> 00:03:42,730
también verá que la página Acerca de también representa la información como tal.

50
00:03:42,730 --> 00:03:45,970
En el menú, verá los elementos del menú que se

51
00:03:45,970 --> 00:03:49,475
muestran al igual que vimos con la aplicación Angular.

52
00:03:49,475 --> 00:03:51,595
Ahora, además, he agregado en

53
00:03:51,595 --> 00:03:56,320
una página más a la aplicación de una sola página llamada Mis favoritos,

54
00:03:56,320 --> 00:04:02,590
a la que no puede navegar porque ningún usuario ha iniciado sesión en el sistema.

55
00:04:02,590 --> 00:04:05,960
Por lo tanto, ves que no tengo ningún usuario registrado en el sistema.

56
00:04:05,960 --> 00:04:09,120
Por lo tanto, es por eso que no tiene sentido indicar mis favoritos,

57
00:04:09,120 --> 00:04:10,845
porque no sabes qué usuario,

58
00:04:10,845 --> 00:04:12,990
como favoritos, debería mostrarse aquí.

59
00:04:12,990 --> 00:04:15,580
La página de contacto como de costumbre.

60
00:04:15,580 --> 00:04:17,345
Ahora, vamos a iniciar sesión.

61
00:04:17,345 --> 00:04:19,235
Para iniciar sesión en nuestra aplicación,

62
00:04:19,235 --> 00:04:25,665
haremos clic en el botón Iniciar sesión y luego verá que aparece el cuadro de diálogo de inicio de sesión.

63
00:04:25,665 --> 00:04:32,620
A continuación, permítanme iniciar sesión como uno de los usuarios registrados,

64
00:04:32,620 --> 00:04:37,295
que nos registramos como parte de este curso anteriormente.

65
00:04:37,295 --> 00:04:39,100
Por lo tanto, una vez que inicie sesión,

66
00:04:39,100 --> 00:04:41,840
inmediatamente notará

67
00:04:41,840 --> 00:04:44,150
que, en la esquina derecha,

68
00:04:44,150 --> 00:04:47,410
verá que el botón Iniciar sesión ahora se ha convertido en

69
00:04:47,410 --> 00:04:51,730
Cerrar sesión y el nombre del usuario se indica aquí.

70
00:04:51,730 --> 00:04:54,500
Por lo tanto, quienquiera que haya iniciado sesión se indica aquí.

71
00:04:54,500 --> 00:04:56,110
También podría, en principio,

72
00:04:56,110 --> 00:05:00,925
reemplazar esto con la imagen del usuario.

73
00:05:00,925 --> 00:05:03,715
Ahora, para eso necesita hacer más modificaciones

74
00:05:03,715 --> 00:05:07,790
tanto al cliente como al servidor para admitir la visualización de la imagen aquí.

75
00:05:07,790 --> 00:05:10,570
Pero, por el momento, solo te estoy mostrando cómo

76
00:05:10,570 --> 00:05:14,260
podemos mostrar fácilmente la información del usuario aquí.

77
00:05:14,260 --> 00:05:17,200
Por lo tanto, esto requiere una modificación menor en el jefe del

78
00:05:17,200 --> 00:05:20,335
componente donde podré recuperar

79
00:05:20,335 --> 00:05:23,410
el nombre de usuario de un servicio

80
00:05:23,410 --> 00:05:27,060
llamado como el servicio OAuth del que hablaremos en poco tiempo.

81
00:05:27,060 --> 00:05:29,420
Por lo tanto, una vez que el usuario inicia sesión,

82
00:05:29,420 --> 00:05:31,955
entonces si ahora hace clic en Mis favoritos,

83
00:05:31,955 --> 00:05:35,360
notaría que no hay nada en mis favoritos para el usuario.

84
00:05:35,360 --> 00:05:40,815
Obviamente, porque el usuario aún no ha elegido ningún favorito.

85
00:05:40,815 --> 00:05:44,675
Entonces, vamos ahora al Menú y luego en el Menú,

86
00:05:44,675 --> 00:05:52,980
permítanme seleccionar un elemento y luego agregarán este plato a nuestros favoritos.

87
00:05:52,980 --> 00:05:55,230
Así que, bajando aquí abajo,

88
00:05:55,230 --> 00:05:58,415
ves el símbolo del corazón allí,

89
00:05:58,415 --> 00:06:02,655
haz clic en eso y verás que esto se añadiría a Los Favoritos.

90
00:06:02,655 --> 00:06:06,620
El hecho de que esto haya sido agregado a Los Favoritos está indicado por

91
00:06:06,620 --> 00:06:12,790
el cambio en el icono aquí de un corazón sin llenar a un corazón lleno.

92
00:06:12,790 --> 00:06:15,790
Ahora, si vas a cualquier otro plato,

93
00:06:15,790 --> 00:06:19,080
notarías que esto tiene un corazón sin llenar,

94
00:06:19,080 --> 00:06:22,795
lo que significa que esto aún no está entre nuestros favoritos.

95
00:06:22,795 --> 00:06:25,070
Por lo tanto, permítanme agregar un elemento más a

96
00:06:25,070 --> 00:06:29,990
mis favoritos y luego agreguemos un tercer elemento a mis favoritos también.

97
00:06:29,990 --> 00:06:37,455
Así que, ahora, verán que si voy a Mis Favoritos,

98
00:06:37,455 --> 00:06:42,560
verán aquí un conjunto de Mis Favoritos.

99
00:06:42,560 --> 00:06:46,610
Entonces, viste que acabo de agregar estos tres platos a Mis favoritos.

100
00:06:46,610 --> 00:06:48,820
Por lo tanto, estos están siendo mostrados aquí.

101
00:06:48,820 --> 00:06:57,100
Por lo tanto, esto se realiza mediante el uso del punto final de favoritos en el lado del servidor,

102
00:06:57,100 --> 00:06:59,870
que he implementado como parte de su última asignación.

103
00:06:59,870 --> 00:07:05,554
Por lo tanto, si ha hecho esa asignación correctamente, esta parte debería funcionar como se esperaba.

104
00:07:05,554 --> 00:07:09,310
Ahora, también podemos modificar Mi favorito.

105
00:07:09,310 --> 00:07:11,320
Así, por ejemplo, en la esquina derecha aquí,

106
00:07:11,320 --> 00:07:14,165
verá este alternar Eliminar aquí.

107
00:07:14,165 --> 00:07:16,320
Así que, déjame encender eso.

108
00:07:16,320 --> 00:07:17,730
Por lo tanto, cuando lo enciendas,

109
00:07:17,730 --> 00:07:22,025
verás inmediatamente las tres cruces rojas

110
00:07:22,025 --> 00:07:27,630
aparecen en la parte inferior de estos tres elementos en Mis favoritos.

111
00:07:27,630 --> 00:07:29,905
Cuando hago clic en él, desaparecen.

112
00:07:29,905 --> 00:07:36,750
Por lo tanto, esta es una forma de activar los botones de eliminación en Mis Favoritos y luego.

113
00:07:36,750 --> 00:07:40,965
Por lo tanto, permítanme seguir adelante y eliminar uno de los elementos de Mis favoritos.

114
00:07:40,965 --> 00:07:42,515
Por lo tanto, cuando haga clic en ese botón,

115
00:07:42,515 --> 00:07:47,540
notará inmediatamente que ese elemento se elimina de Mis Favoritos,

116
00:07:47,540 --> 00:07:50,405
y desaparece inmediatamente y Mis Favoritos se

117
00:07:50,405 --> 00:07:54,780
actualiza y verá el valor resultante que se muestra aquí.

118
00:07:54,780 --> 00:07:56,115
Al mismo tiempo,

119
00:07:56,115 --> 00:07:58,530
esta opción Eliminar está desactivada

120
00:07:58,530 --> 00:08:01,250
para que los botones de eliminación ya no estén visibles.

121
00:08:01,250 --> 00:08:07,610
Siempre puedo volver a encender los botones de eliminación haciendo clic en el botón de encendido y apagado aquí.

122
00:08:07,610 --> 00:08:11,210
Por lo tanto, observe que Mis Favoritos se mostrará sólo

123
00:08:11,210 --> 00:08:15,790
para los usuarios que hayan iniciado sesión en el sistema.

124
00:08:15,790 --> 00:08:21,260
Por lo tanto, inmediatamente nota un conjunto de cambios que se han

125
00:08:21,260 --> 00:08:23,540
realizado en el cliente angular para

126
00:08:23,540 --> 00:08:26,930
admitir algunas de estas características adicionales que se ven aquí.

127
00:08:26,930 --> 00:08:31,190
También vio que la función de inicio de sesión y cierre de sesión era compatible aquí.

128
00:08:31,190 --> 00:08:33,000
Por lo tanto, cuando hago clic en el botón Cerrar sesión,

129
00:08:33,000 --> 00:08:35,930
inmediatamente nota que el usuario se cierra la sesión

130
00:08:35,930 --> 00:08:39,800
y el nombre de usuario desaparece de allí,

131
00:08:39,800 --> 00:08:44,250
por lo que el botón también se convierte en el botón Iniciar sesión.

132
00:08:44,560 --> 00:08:49,760
Entonces, con esto, nota cómo se ha

133
00:08:49,760 --> 00:08:54,880
actualizado mi cliente angular para hacer uso del nuevo servidor API REST

134
00:08:54,880 --> 00:08:59,100
para admitir los favoritos que se guardan y en el lado del servidor y

135
00:08:59,100 --> 00:09:04,930
luego se reflejan automáticamente en mi aplicación cliente como se muestra aquí.

136
00:09:04,930 --> 00:09:08,305
Vamos a hacer un breve recorrido por

137
00:09:08,305 --> 00:09:14,160
el código angular que he proporcionado para usted en el repositorio de GitHub,

138
00:09:14,160 --> 00:09:17,710
y también ver cómo hemos modificado partes del código

139
00:09:17,710 --> 00:09:21,655
para implementar la aplicación Angular actualizada.

140
00:09:21,655 --> 00:09:24,310
Se dará cuenta de que hay un nuevo servicio

141
00:09:24,310 --> 00:09:27,130
que he introducido aquí llamado servicio de autenticación.

142
00:09:27,130 --> 00:09:29,295
El servicio de autenticación se encarga de

143
00:09:29,295 --> 00:09:35,985
todas las acciones relacionadas con la autenticación para la aplicación Angular.

144
00:09:35,985 --> 00:09:37,715
Por lo tanto, dentro del servicio de autenticación,

145
00:09:37,715 --> 00:09:40,760
usted notará inmediatamente que tengo

146
00:09:40,760 --> 00:09:45,545
un conjunto de información que he configurado aquí.

147
00:09:45,545 --> 00:09:47,985
Como ya conoces Angular,

148
00:09:47,985 --> 00:09:52,535
deberías poder procesar fácilmente lo que esté escrito aquí.

149
00:09:52,535 --> 00:09:57,355
Tenga en cuenta en particular que dentro del servicio de autenticación en sí,

150
00:09:57,355 --> 00:09:59,240
estoy almacenando información como

151
00:09:59,240 --> 00:10:00,815
, por ejemplo, TokenKey,

152
00:10:00,815 --> 00:10:06,985
que es la clave para el almacenamiento local donde estoy almacenando el token web JSON,

153
00:10:06,985 --> 00:10:11,500
y también algunas variables adicionales

154
00:10:11,500 --> 00:10:16,310
aquí donde estoy rastreando el nombre de usuario y dónde estoy autenticado,

155
00:10:16,310 --> 00:10:21,955
y también realice un seguimiento del token web JSON aquí.

156
00:10:21,955 --> 00:10:28,540
Ahora, comencemos por mirar cuándo el usuario inicia sesión.

157
00:10:28,540 --> 00:10:30,290
Por lo tanto, cuando el usuario inicia sesión,

158
00:10:30,290 --> 00:10:37,135
entonces esta función llamada inicio de sesión se llamará en nuestro servicio de autenticación aquí,

159
00:10:37,135 --> 00:10:40,350
y cuando se llame al inicio de sesión en el servicio de autenticación,

160
00:10:40,350 --> 00:10:44,730
esto se pasará en un parámetro llamado usuario que contiene

161
00:10:44,730 --> 00:10:49,665
el nombre de usuario y la contraseña como parte del objeto JavaScript del usuario.

162
00:10:49,665 --> 00:10:57,890
Entonces, en este punto, estoy haciendo una publicación HTTP a BaseURL más usuarios/inicio de sesión.

163
00:10:57,890 --> 00:11:00,320
Tenga en cuenta también que aquí,

164
00:11:00,320 --> 00:11:06,030
estoy suministrando el authResponse como el calificador aquí.

165
00:11:06,030 --> 00:11:09,945
AuthResponse no es más que una interfaz que he implementado aquí,

166
00:11:09,945 --> 00:11:11,350
en la parte superior aquí.

167
00:11:11,350 --> 00:11:14,295
Por lo tanto, esta interfaz esencialmente especifica

168
00:11:14,295 --> 00:11:16,860
la información que va a volver como

169
00:11:16,860 --> 00:11:19,670
mi respuesta de autenticación desde el lado del servidor,

170
00:11:19,670 --> 00:11:22,690
la estructura de los datos JSON que

171
00:11:22,690 --> 00:11:25,690
regresan desde el lado del servidor y los objetos JavaScript correspondientes.

172
00:11:25,690 --> 00:11:28,865
Por lo tanto, observa que cuando actualizamos el servidor,

173
00:11:28,865 --> 00:11:32,370
nos aseguramos de que el servidor está enviando de vuelta el estado,

174
00:11:32,370 --> 00:11:37,035
el éxito, el indicador y el token en el índice de cadena.

175
00:11:37,035 --> 00:11:42,000
Así que, esa información se obtiene aquí.

176
00:11:42,000 --> 00:11:44,240
Ahora, cuando estoy haciendo una publicación sobre eso,

177
00:11:44,240 --> 00:11:52,975
estoy pasando el nombre de usuario y la contraseña a la publicación en este endpoint /users/login.

178
00:11:52,975 --> 00:11:58,375
Cuando la respuesta regresa de la respuesta,

179
00:11:58,375 --> 00:12:03,490
el mensaje de respuesta en sí contendrá, como vimos,

180
00:12:03,490 --> 00:12:06,525
el éxito, el campo token

181
00:12:06,525 --> 00:12:09,885
y también el mensaje de estado aquí.

182
00:12:09,885 --> 00:12:11,950
Entonces, del mensaje de respuesta,

183
00:12:11,950 --> 00:12:16,960
estoy extrayendo el token y luego lo paso a esta función que implemento aquí, la

184
00:12:16,960 --> 00:12:20,415
función local aquí, llamada StoreUserCredentials.

185
00:12:20,415 --> 00:12:30,295
Entonces, eso será devuelto a mi aplicación y se almacenará en mi lado del cliente,

186
00:12:30,295 --> 00:12:32,220
en el almacenamiento local.

187
00:12:32,220 --> 00:12:34,545
Luego, desde esta función,

188
00:12:34,545 --> 00:12:37,870
estoy devolviendo esta información a

189
00:12:37,870 --> 00:12:43,160
la función de llamada desde donde inicié el proceso de inicio de sesión.

190
00:12:43,160 --> 00:12:51,610
Entonces, de esta manera, indicaré a mi componente de inicio de sesión que el inicio de sesión fue exitoso,

191
00:12:51,610 --> 00:12:56,345
y luego también pasaré el nombre de usuario a mi componente de inicio de sesión,

192
00:12:56,345 --> 00:12:59,680
que luego pasará esa información al componente de encabezado,

193
00:12:59,680 --> 00:13:03,860
y el componente de encabezado lo usa para reflejar el nombre de usuario en

194
00:13:03,860 --> 00:13:08,830
el en la parte superior allí,

195
00:13:08,830 --> 00:13:11,145
y también detectamos el error aquí.

196
00:13:11,145 --> 00:13:16,390
Por lo tanto, esta es una implementación muy simple de cómo realizamos el inicio de sesión.

197
00:13:16,390 --> 00:13:17,840
Cuando cierre la sesión,

198
00:13:17,840 --> 00:13:20,735
observe lo que hago cuando el usuario llama a un cierre de sesión.

199
00:13:20,735 --> 00:13:22,070
Cuando el usuario llama a un cierre de sesión,

200
00:13:22,070 --> 00:13:24,560
simplemente destruyo las credenciales del usuario,

201
00:13:24,560 --> 00:13:26,845
lo que incluye tirar

202
00:13:26,845 --> 00:13:33,085
el token web JSON que he obtenido cuando inicié sesión en mi aplicación.

203
00:13:33,085 --> 00:13:37,010
Luego, algunas funciones auxiliares adicionales que he implementado aquí llamadas

204
00:13:37,010 --> 00:13:40,920
getUsername están iniciadas y getToken,

205
00:13:40,920 --> 00:13:45,370
que serán útiles de mis otras aplicaciones,

206
00:13:45,370 --> 00:13:50,140
otros componentes y servicios.

207
00:13:50,140 --> 00:13:57,375
Por lo tanto, ahora veamos algunas de las funciones de ayuda que hemos implementado aquí.

208
00:13:57,375 --> 00:14:04,685
Por lo tanto, LoadUserCredentials recuperará las credenciales del almacenamiento local.

209
00:14:04,685 --> 00:14:10,800
Por lo tanto, usted nota que aquí estoy llamando a LocalStorage y luego diciendo getItem.

210
00:14:10,800 --> 00:14:12,750
Por lo tanto, localStorage aquí está usando

211
00:14:12,750 --> 00:14:17,305
el almacenamiento local del navegador web que es compatible con los navegadores web estándar,

212
00:14:17,305 --> 00:14:19,140
y almacenando la información allí,

213
00:14:19,140 --> 00:14:21,620
y luego está recuperando esta información allí.

214
00:14:21,620 --> 00:14:23,830
Luego, a partir de ahí, la información de credenciales,

215
00:14:23,830 --> 00:14:25,745
si es válida,

216
00:14:25,745 --> 00:14:27,950
entonces esas credenciales se configurarán aquí.

217
00:14:27,950 --> 00:14:32,735
Por lo tanto, todas estas variables que he definido aquí se inicializarán con

218
00:14:32,735 --> 00:14:38,965
la información adecuada después de ser recuperadas de LocalStorage.

219
00:14:38,965 --> 00:14:42,560
Ahora, de manera similar, la función StoreUserCredentials

220
00:14:42,560 --> 00:14:46,285
que he implementado aquí se llama desde el método de inicio de sesión.

221
00:14:46,285 --> 00:14:50,165
Cuando se pasa esta información,

222
00:14:50,165 --> 00:14:52,290
se pasa la información de credenciales,

223
00:14:52,290 --> 00:14:57,665
esa información se almacena en localStorage en este punto con esa clave.

224
00:14:57,665 --> 00:15:00,825
Luego, UseCredentials básicamente

225
00:15:00,825 --> 00:15:05,510
configura todas las variables que tengo en el servicio de autenticación.

226
00:15:05,510 --> 00:15:07,285
Por lo tanto, configura el token,

227
00:15:07,285 --> 00:15:09,225
configura el nombre de usuario

228
00:15:09,225 --> 00:15:14,270
y luego configura la función IsAuthenticated aquí.

229
00:15:14,270 --> 00:15:17,590
Por lo tanto, observe que el nombre de usuario en sí aquí,

230
00:15:17,590 --> 00:15:20,865
lo he declarado como un tema,

231
00:15:20,865 --> 00:15:23,595
que no es más que un observable aquí.

232
00:15:23,595 --> 00:15:27,410
Entonces, es por eso que cada vez que digo,

233
00:15:27,410 --> 00:15:30,705
sendUserName aquí, digo credenciales nombre de usuario.

234
00:15:30,705 --> 00:15:34,780
Por lo tanto, este sendUserName implementado justo en la parte superior aquí,

235
00:15:34,780 --> 00:15:40,080
observe que aquí es donde se devuelve el valor observable.

236
00:15:40,080 --> 00:15:43,305
Por lo tanto, es por eso que estoy diciendo este nombre de usuario siguiente.

237
00:15:43,305 --> 00:15:45,370
Por lo tanto, el observable.

238
00:15:45,370 --> 00:15:49,630
Devolverá el nombre que se proporciona como

239
00:15:49,630 --> 00:15:55,130
parámetro a quien se haya registrado para observar este observable.

240
00:15:55,130 --> 00:15:59,070
Así que esto observable, voy a estar observando esto desde

241
00:15:59,070 --> 00:16:03,980
mi componente de encabezado y así cada vez que cambie el nombre de usuario,

242
00:16:03,980 --> 00:16:09,870
ya sea de indefinido a un nombre de usuario dado o viceversa,

243
00:16:09,870 --> 00:16:13,040
entonces puedo actualizar mi barra de herramientas en

244
00:16:13,040 --> 00:16:17,670
el componente de encabezado para reflejar si el usuario ha iniciado sesión o cerrado sesión.

245
00:16:17,670 --> 00:16:21,770
Así que eso se configura mediante el uso de este UseCredsentials.

246
00:16:21,770 --> 00:16:29,010
Ahora, DestroyUserCredentials básicamente establece el token de autenticación en undefined.

247
00:16:29,010 --> 00:16:34,320
Borra el nombre de usuario y luego establece el IsAuthenticated en false y luego

248
00:16:34,320 --> 00:16:37,560
elimina esta información de mi tienda local, por

249
00:16:37,560 --> 00:16:40,930
lo que básicamente está tirando el jsonwebtoken en esta parte.

250
00:16:40,930 --> 00:16:43,330
Así que así es como amas a un usuario.

251
00:16:43,330 --> 00:16:47,150
Entonces, una vez que se pierde el jsonwebtoken, el usuario ya no puede

252
00:16:47,150 --> 00:16:49,850
autenticarse en

253
00:16:49,850 --> 00:16:53,305
el lado del servidor porque el token ya no está disponible para nosotros.

254
00:16:53,305 --> 00:16:58,340
Así es como implementamos la función de cierre de sesión dentro de nuestra aplicación.

255
00:16:58,340 --> 00:17:01,030
Así que tómese un tiempo para ir a través de

256
00:17:01,030 --> 00:17:05,350
auth.service aquí para ver cómo he implementado las diversas funcionalidades.

257
00:17:05,350 --> 00:17:06,865
Ahora, en este momento,

258
00:17:06,865 --> 00:17:13,190
estoy seguro de que está muy familiarizado con cómo se implementan las aplicaciones angulares,

259
00:17:13,190 --> 00:17:17,960
por lo que no debería ser tan difícil para usted entender cómo se implementa este código.

260
00:17:17,960 --> 00:17:24,575
Ahora una función más a la que llamaría su atención es el token JWT de verificación, aquí.

261
00:17:24,575 --> 00:17:29,040
Esta función se puede llamar en cualquier momento para verificar y

262
00:17:29,040 --> 00:17:33,360
asegurarse de que nuestro token web JSON sigue siendo válido.

263
00:17:33,360 --> 00:17:40,500
Entonces, aquí es donde estoy enviando la solicitud get a los usuarios barra diagonal token JWT.

264
00:17:40,500 --> 00:17:49,450
Recuerde que implementamos esta ruta en el lado del servidor en el usuario.js y.

265
00:17:49,450 --> 00:17:55,385
Entonces, a partir de ahí podremos verificar si el jsonwebtoken sigue siendo válido o no.

266
00:17:55,385 --> 00:17:57,855
Si el jsonwebtoken no es válido,

267
00:17:57,855 --> 00:17:59,170
entonces vamos a destruir

268
00:17:59,170 --> 00:18:03,045
las credenciales del usuario y luego esperar que el usuario vuelva a iniciar sesión.

269
00:18:03,045 --> 00:18:06,550
Si el jsonwebtoken es válido, entonces está bien y

270
00:18:06,550 --> 00:18:10,375
podemos continuar permitiendo que el usuario

271
00:18:10,375 --> 00:18:14,540
reconozca que hemos iniciado sesión. Así que incluso si cierra

272
00:18:14,540 --> 00:18:18,665
su navegador y luego vuelve a abrir el navegador y luego vuelve a abrir su aplicación Angular,

273
00:18:18,665 --> 00:18:26,625
si había iniciado sesión antes y el jsonwebtoken se guardó en el almacenamiento local,

274
00:18:26,625 --> 00:18:28,930
se puede recuperar desde allí y luego

275
00:18:28,930 --> 00:18:33,740
su estado de inicio de sesión se restaurará dentro de su aplicación angular.

276
00:18:33,740 --> 00:18:36,420
Si el token web json ha caducado,

277
00:18:36,420 --> 00:18:38,635
entonces no se nos permitirá iniciar sesión.

278
00:18:38,635 --> 00:18:44,280
Así que cada vez que actualice su aplicación Angular en su navegador o

279
00:18:44,280 --> 00:18:47,290
vuelva a cargar su aplicación Angular en su navegador, va a estar

280
00:18:47,290 --> 00:18:50,550
verificando el jsonwebtoken para asegurarse de que todavía sea válido.

281
00:18:50,550 --> 00:18:53,095
Si no es válido, el usuario será

282
00:18:53,095 --> 00:18:56,200
borrado y por lo tanto tendrá que volver a iniciar sesión.

283
00:18:56,200 --> 00:19:00,370
Si no, entonces la información del usuario iniciado sesión se

284
00:19:00,370 --> 00:19:05,020
recupera de LocalStorage y luego se inicializa dentro de mi aplicación angular.

285
00:19:05,020 --> 00:19:09,765
Periódicamente, si en algún momento su servidor

286
00:19:09,765 --> 00:19:15,575
responde con un mensaje 401 No autorizado,

287
00:19:15,575 --> 00:19:16,880
incluso en ese punto,

288
00:19:16,880 --> 00:19:22,045
volveremos a comprobar si el jsonwebtoken es válido y luego permitirlo.

289
00:19:22,045 --> 00:19:26,960
Lo haremos usando algo llamado los interceptores Http.

290
00:19:26,960 --> 00:19:30,630
Permítanme hacer un recorrido por esa parte del código,

291
00:19:30,630 --> 00:19:35,180
y luego explicarles cómo funcionan los interceptores en poco tiempo.

292
00:19:35,180 --> 00:19:38,635
Así que ahora, además de AuthService,

293
00:19:38,635 --> 00:19:45,545
en la carpeta de servicios en sí verá este archivo llamado archivo AuthInterceptors.ts.

294
00:19:45,545 --> 00:19:51,285
Así que abra esto y verá que aquí he implementado interceptores Http.

295
00:19:51,285 --> 00:19:54,435
Ahora, lo que hacen estos interceptores Http,

296
00:19:54,435 --> 00:20:00,780
esto es compatible con el cliente Http que viene como parte de Angular 4.4.

297
00:20:00,780 --> 00:20:04,080
Lo que hacen los interceptores http es que pueden interceptar

298
00:20:04,080 --> 00:20:06,180
solicitudes salientes mensajes

299
00:20:06,180 --> 00:20:09,695
hacer modificaciones en el mensaje de solicitud antes de que se envíe.

300
00:20:09,695 --> 00:20:13,530
Del mismo modo, pueden interceptar los mensajes de respuesta entrantes y, a continuación, modificar

301
00:20:13,530 --> 00:20:15,660
el mensaje de respuesta entrante antes antes de que

302
00:20:15,660 --> 00:20:18,970
la respuesta se entregue a la aplicación angular.

303
00:20:18,970 --> 00:20:22,920
Entonces, a través de la interceptación, ¿cómo funciona este interceptor?

304
00:20:22,920 --> 00:20:25,625
Entonces, para hacer que este interceptor funcione,

305
00:20:25,625 --> 00:20:28,620
implementamos, como puede ver,

306
00:20:28,620 --> 00:20:37,285
una clase llamada como HttpInterceptor extendiendo el HttpInterceptor.

307
00:20:37,285 --> 00:20:39,805
Así que aquí he implementado AuthInterceptor.

308
00:20:39,805 --> 00:20:42,175
Entonces, ¿qué hace este AuthInterceptor?

309
00:20:42,175 --> 00:20:47,660
Este AuthInterceptor está capturando básicamente solicitudes salientes.

310
00:20:47,660 --> 00:20:51,785
Entonces, para capturar una solicitud saliente, llama a esta función llamada intercept

311
00:20:51,785 --> 00:20:56,700
y luego esto le dará acceso a la solicitud y a la siguiente.

312
00:20:56,700 --> 00:21:00,550
Así que podría encadenar

313
00:21:00,550 --> 00:21:05,080
un montón de interceptores uno detrás del otro si así lo decide, para

314
00:21:05,080 --> 00:21:11,050
que puedan procesar las solicitudes salientes una tras otra si así lo decide.

315
00:21:11,050 --> 00:21:20,260
Lo que hace esta intercepción es que le da acceso al mensaje de solicitud Http.

316
00:21:20,260 --> 00:21:23,300
Entonces, cuando obtengo acceso al mensaje de solicitud Http,

317
00:21:23,300 --> 00:21:27,810
notarías que aquí estoy inyectando el servicio de autenticación.

318
00:21:27,810 --> 00:21:33,870
Ahora, a diferencia de la forma en que estábamos inyectando servicios en componentes,

319
00:21:33,870 --> 00:21:37,295
aquí estoy mostrando el uso de un inyector.

320
00:21:37,295 --> 00:21:39,995
Un inyector es parte del código angular.

321
00:21:39,995 --> 00:21:44,080
Por lo tanto, el uso de un inyector puede inyectar servicios u

322
00:21:44,080 --> 00:21:50,020
otros componentes en otros servicios o componentes.

323
00:21:50,020 --> 00:21:57,495
Así que aquí ves que estoy inyectando el servicio de autenticación aquí usando esto.

324
00:21:57,495 --> 00:22:04,690
Ahora otra razón es que si inyecto directamente el servicio en mi constructor,

325
00:22:04,690 --> 00:22:11,545
desarrollará una dependencia circular entre el interceptor y el AuthService,

326
00:22:11,545 --> 00:22:15,200
y eso hará que su código no funcione.

327
00:22:15,200 --> 00:22:18,190
Así que esto es un trabajo en torno a los problemas. Para

328
00:22:18,190 --> 00:22:21,430
que su interceptor, porque necesito

329
00:22:21,430 --> 00:22:25,810
AuthService, para obtener el token de

330
00:22:25,810 --> 00:22:31,680
AuthService y AuthService a su vez depende de este interceptor,

331
00:22:31,680 --> 00:22:38,760
por lo que para romper el ciclo, estoy inyectando explícitamente AuthService en este caso.

332
00:22:38,760 --> 00:22:42,630
Ahora bien, esto es algo que he descubierto por prueba

333
00:22:42,630 --> 00:22:47,080
y error, inicialmente seguí adelante y simplemente inyecté

334
00:22:47,080 --> 00:22:49,600
los servicios extraños al constructor y luego descubrí que

335
00:22:49,600 --> 00:22:54,270
Angular no estaba compilando el código, luego descubrí que

336
00:22:54,270 --> 00:23:01,510
había un error allí y luego después de hacer alguna búsqueda en Google luego

337
00:23:01,510 --> 00:23:05,330
descubrió que esta es una forma alternativa

338
00:23:05,330 --> 00:23:09,620
de manejar lo mismo y esto funciona mucho mejor para nuestra aplicación.

339
00:23:09,620 --> 00:23:13,560
Entonces, una vez que inyecto AuthService del servicio,

340
00:23:13,560 --> 00:23:17,555
obtengo el token y luego noto lo que estoy haciendo aquí.

341
00:23:17,555 --> 00:23:23,200
Aquí estoy diciendo clon const auth req req clon.

342
00:23:23,200 --> 00:23:29,380
Por lo tanto, clonaremos la solicitud y luego configuraremos en los encabezados.

343
00:23:29,380 --> 00:23:32,110
Entonces diremos que los encabezados req establecen la

344
00:23:32,110 --> 00:23:35,240
autorización y luego notamos lo que estoy

345
00:23:35,240 --> 00:23:38,005
configurando el encabezado de autorización para ser, portador.

346
00:23:38,005 --> 00:23:42,100
Además AuthToken.

347
00:23:42,100 --> 00:23:47,360
Entonces, en el encabezado de autorización, estoy configurando el portador y authToken aquí.

348
00:23:47,360 --> 00:23:49,550
Así es como estoy configurando

349
00:23:49,550 --> 00:23:53,080
el encabezado de autorización en

350
00:23:53,080 --> 00:23:57,465
el mensaje de solicitud saliente en mi aplicación Angular. Así que justo ahí.

351
00:23:57,465 --> 00:24:01,660
Y así es como me aseguré de que todas las solicitudes salientes

352
00:24:01,660 --> 00:24:06,645
tengan configurado el encabezado de autorización antes de que se pasen al lado del servidor.

353
00:24:06,645 --> 00:24:12,775
Y luego, después de eso, simplemente lo pasaremos al siguiente interceptor, si existe,

354
00:24:12,775 --> 00:24:15,140
o a la cola de salida, para

355
00:24:15,140 --> 00:24:19,935
que el mensaje de solicitud se envíe al lado del servidor.

356
00:24:19,935 --> 00:24:24,830
Del mismo modo, tengo otro interceptor que he implementado aquí.

357
00:24:24,830 --> 00:24:30,260
Este interceptor intercepta cualquier mensaje de respuesta no autorizado

358
00:24:30,260 --> 00:24:31,800
que regresa desde el lado del servidor.

359
00:24:31,800 --> 00:24:37,150
Por lo tanto, si el servidor responde con un mensaje de respuesta 401 no autorizada.

360
00:24:37,150 --> 00:24:39,550
Entonces, en ese punto de nuevo, lo mismo,

361
00:24:39,550 --> 00:24:42,760
he configurado el AuthService aquí,

362
00:24:42,760 --> 00:24:46,410
y luego, dentro aquí, entonces diré,

363
00:24:46,410 --> 00:24:49,060
maneja si el error.

364
00:24:49,060 --> 00:24:54,800
Así que aquí es donde me apoderaré de HttpEvent aquí.

365
00:24:54,800 --> 00:25:04,580
El HttpEvent es un objeto de nivel inferior que una solicitud,

366
00:25:04,580 --> 00:25:08,630
pero eso nos permite obtener acceso al mensaje de respuesta entrante,

367
00:25:08,630 --> 00:25:12,530
y luego verificaremos si hay un error,

368
00:25:12,530 --> 00:25:17,235
y luego si el error es una instancia de respuesta de error HTTP,

369
00:25:17,235 --> 00:25:20,770
y si el estado del error es 401.

370
00:25:20,770 --> 00:25:28,220
Entonces, lo que significa que acabo de detectar que el servidor envió un mensaje de error 401.

371
00:25:28,220 --> 00:25:32,305
Entonces, lo que significa que hubo algún problema de autorización en el lado del servidor.

372
00:25:32,305 --> 00:25:33,790
Luego, en ese punto, verificaré

373
00:25:33,790 --> 00:25:37,620
el token web json para asegurarme de que el token web json siga siendo válido.

374
00:25:37,620 --> 00:25:39,030
Si no es válido,

375
00:25:39,030 --> 00:25:44,910
descartaré mis credenciales y esperaré que el usuario inicie sesión de nuevo.

376
00:25:44,910 --> 00:25:48,880
Así que de esa manera me aseguraré de que si mi token web json

377
00:25:48,880 --> 00:25:53,480
expira en el proceso de intentar obtener datos,

378
00:25:53,480 --> 00:25:58,045
eso aún será interceptado por aquí porque si el servidor responde con un 401,

379
00:25:58,045 --> 00:26:00,280
interceptaré eso y luego borraré

380
00:26:00,280 --> 00:26:03,830
mi token web json y espero que el usuario inicie sesión de nuevo.

381
00:26:03,830 --> 00:26:08,750
También podemos redirigir al usuario a la página de inicio de sesión si

382
00:26:08,750 --> 00:26:12,330
lo desea, pero con la aplicación Angular es un poco más complicado

383
00:26:12,330 --> 00:26:16,275
hacer eso y no quería confundirlo haciendo todo eso.

384
00:26:16,275 --> 00:26:19,385
En su lugar, simplemente estoy cerrando

385
00:26:19,385 --> 00:26:22,500
la sesión del usuario en este punto y luego destruyendo las credenciales del usuario, de

386
00:26:22,500 --> 00:26:25,855
modo que se espere que el usuario inicie sesión en ese punto.

387
00:26:25,855 --> 00:26:33,880
Por lo tanto, manejo simple de cómo inyectamos el encabezado de autorización en la solicitud saliente,

388
00:26:33,880 --> 00:26:38,850
y también interceptamos cualquier mensaje no autorizado 401

389
00:26:38,850 --> 00:26:40,820
que regresan desde el lado del servidor.

390
00:26:40,820 --> 00:26:45,860
Por lo tanto, verá cómo se deben realizar estos cambios adicionales

391
00:26:45,860 --> 00:26:51,955
en su aplicación angular para que funcione con su servidor.

392
00:26:51,955 --> 00:26:55,125
Con la parte de autenticación configurada,

393
00:26:55,125 --> 00:26:58,200
si no tenía autenticación y si solo iba a

394
00:26:58,200 --> 00:27:02,485
acceder al resto de puntos finales de API y obtener operaciones,

395
00:27:02,485 --> 00:27:05,240
ni siquiera necesita preocuparse por ninguna de estas cosas.

396
00:27:05,240 --> 00:27:06,790
No se requiere autenticación.

397
00:27:06,790 --> 00:27:09,140
Los datos se pueden obtener muy fácilmente.

398
00:27:09,140 --> 00:27:10,590
Pero para cualquier publicación,

399
00:27:10,590 --> 00:27:12,395
poner y eliminar operaciones,

400
00:27:12,395 --> 00:27:15,630
necesitamos admitir todas estas características.

401
00:27:15,630 --> 00:27:21,375
Entonces, esa es la razón por la que he implementado la parte de autenticación en mi aplicación.

402
00:27:21,375 --> 00:27:23,995
También como ilustré anteriormente,

403
00:27:23,995 --> 00:27:26,985
cuando ningún usuario ha iniciado sesión,

404
00:27:26,985 --> 00:27:32,570
entonces no podremos navegar al extremo de mis favoritos,

405
00:27:32,570 --> 00:27:35,035
pero cuando un usuario está conectado,

406
00:27:35,035 --> 00:27:40,420
entonces podremos ver mis favoritos para el usuario específico.

407
00:27:40,420 --> 00:27:45,095
Esto se implementa utilizando protectores de ruta en Angular.

408
00:27:45,095 --> 00:27:47,995
Ahora, para implementar estos guardias de ruta,

409
00:27:47,995 --> 00:27:52,080
he implementado otro servicio aquí llamado AuthGuardService.

410
00:27:52,080 --> 00:27:54,170
Así que en este AuthGuardService,

411
00:27:54,170 --> 00:27:57,970
implementamos este método llamado método CanActivate que

412
00:27:57,970 --> 00:28:02,225
vamos a subclase con el fin de implementar esto.

413
00:28:02,225 --> 00:28:05,705
Y en el método CanActivate,

414
00:28:05,705 --> 00:28:08,550
la implementación devolverá un booleano,

415
00:28:08,550 --> 00:28:10,090
y en este caso,

416
00:28:10,090 --> 00:28:15,630
lo que comprobamos es si este usuario está conectado,

417
00:28:15,630 --> 00:28:18,605
entonces permitiremos que el usuario navegue.

418
00:28:18,605 --> 00:28:25,480
De lo contrario, navegará por el usuario hasta el punto final de inicio.

419
00:28:25,480 --> 00:28:31,175
Así que esa es la forma en que se implementa el protector de ruta en este caso.

420
00:28:31,175 --> 00:28:33,955
Ahora, para hacer uso de este guardia de ruta,

421
00:28:33,955 --> 00:28:41,780
vamos a ver cómo se actualizan las rutas para hacer uso de los guardias de ruta.

422
00:28:41,780 --> 00:28:44,520
Así que en el archivo routes.ts,

423
00:28:44,520 --> 00:28:50,435
puede ver que para el componente de favoritos,

424
00:28:50,435 --> 00:28:54,510
vemos que especificamos la ruta como favoritos y el componente como

425
00:28:54,510 --> 00:28:58,620
FavoritesComponent y luego especificamos este otro campo

426
00:28:58,620 --> 00:29:07,785
llamado CanActivate para el que especificamos AuthGuard como el parámetro aquí,

427
00:29:07,785 --> 00:29:12,445
y este AuthGuard no es más que el servicio AuthGuard que hemos implementado,

428
00:29:12,445 --> 00:29:14,825
que se importa aquí.

429
00:29:14,825 --> 00:29:20,405
Así que de esta manera cuando AuthGuard se evalúe como falso,

430
00:29:20,405 --> 00:29:24,755
entonces no se le permitirá navegar al componente de favoritos

431
00:29:24,755 --> 00:29:28,105
, en su lugar, se le redirigirá a casa,

432
00:29:28,105 --> 00:29:36,245
pero cuando el usuario está conectado, obviamente, AuthGuard evaluará como verdadero

433
00:29:36,245 --> 00:29:37,390
, y en este caso,

434
00:29:37,390 --> 00:29:41,665
entonces podrá para navegar a la ruta de favoritos allí.

435
00:29:41,665 --> 00:29:49,700
Ahora también hay modificaciones menores a los componentes restantes allí,

436
00:29:49,700 --> 00:29:52,200
que le permiten lidiar con

437
00:29:52,200 --> 00:29:57,365
las complejidades de cómo su cliente y servidor hablarán entre sí.

438
00:29:57,365 --> 00:30:02,555
En particular, tenga en cuenta cómo se ha actualizado el componente de encabezado para

439
00:30:02,555 --> 00:30:08,195
reflejar el estado de inicio de sesión del usuario en la barra de herramientas de la parte superior.

440
00:30:08,195 --> 00:30:11,500
Ese es otra vez otro cambio interesante que he

441
00:30:11,500 --> 00:30:15,710
hecho en el componente de encabezado en nuestra aplicación.

442
00:30:15,710 --> 00:30:20,220
Así que dejaré esto como un ejercicio para que descubran cómo se ha implementado. Un

443
00:30:20,220 --> 00:30:22,160
código muy simple allí.

444
00:30:22,160 --> 00:30:24,660
Debería ser fácil para ti averiguarlo.

445
00:30:24,660 --> 00:30:28,020
Entonces, con todos estos cambios, ahora,

446
00:30:28,020 --> 00:30:32,095
mi cliente angular es capaz de interactuar con mi servidor.

447
00:30:32,095 --> 00:30:36,540
Permítanme mostrarles de nuevo cómo podemos publicar algunos comentarios en el servidor,

448
00:30:36,540 --> 00:30:41,995
y luego ver el comentario inmediatamente reflejado en el plato.

449
00:30:41,995 --> 00:30:45,325
Por lo tanto, de nuevo volviendo a nuestra aplicación,

450
00:30:45,325 --> 00:30:50,050
ahora podemos ir al menú y luego tirar cualquier plato aquí,

451
00:30:50,050 --> 00:30:52,740
y puedo publicar comentarios en el plato aquí,

452
00:30:52,740 --> 00:30:59,600
así que inmediatamente establecería la calificación aquí,

453
00:30:59,600 --> 00:31:02,540
y mi valor de comentario aquí.

454
00:31:03,540 --> 00:31:06,700
Observe que no estoy introduciendo

455
00:31:06,700 --> 00:31:15,735
mi nombre de usuario o el nombre de mi autor aquí en el formulario aquí.

456
00:31:15,735 --> 00:31:18,470
Ahora, por supuesto, para enviar un comentario,

457
00:31:18,470 --> 00:31:19,590
debe estar conectado.

458
00:31:19,590 --> 00:31:24,520
Por lo tanto, si no está registrado en este comentario no será aceptado por mi servidor.

459
00:31:24,520 --> 00:31:26,935
Así que permítanme iniciar sesión en primer lugar.

460
00:31:26,935 --> 00:31:32,890
Así que puedo iniciar sesión aquí.

461
00:31:32,890 --> 00:31:34,220
Y en el momento en que inicie sesión,

462
00:31:34,220 --> 00:31:39,255
inmediatamente nota que la barra de herramientas de encabezado se actualiza para indicar mi estado.

463
00:31:39,255 --> 00:31:41,375
Ahora puedo publicar este comentario.

464
00:31:41,375 --> 00:31:43,990
Y notarías que cuando publico el comentario,

465
00:31:43,990 --> 00:31:46,440
el comentario se agrega a la lista de los comentarios,

466
00:31:46,440 --> 00:31:50,575
y también notarás que el campo del autor se rellena automáticamente aquí.

467
00:31:50,575 --> 00:31:54,040
Porque así es como configuramos nuestro lado del servidor.

468
00:31:54,040 --> 00:31:55,570
En el campo de comentarios,

469
00:31:55,570 --> 00:31:58,880
hemos configurado a nuestro usuario como

470
00:31:58,880 --> 00:32:05,890
referencia a la información del usuario

471
00:32:05,890 --> 00:32:09,755
que almacenamos en nuestro lado del servidor, y como usamos el poblado,

472
00:32:09,755 --> 00:32:11,585
Mangoose Populate en el lado del servidor,

473
00:32:11,585 --> 00:32:14,080
la información del usuario se rellena automáticamente

474
00:32:14,080 --> 00:32:16,715
en los comentarios entrantes del servidor lado.

475
00:32:16,715 --> 00:32:21,130
Entonces, así es como notas cómo estoy aprovechando lo que

476
00:32:21,130 --> 00:32:25,615
el servidor ya proporciona para que complete automáticamente los detalles.

477
00:32:25,615 --> 00:32:31,180
Por lo tanto, cambios menores de nuevo incluso en

478
00:32:31,180 --> 00:32:38,880
la página de detalles del plato para reflejar el uso del soporte de comentarios en el lado del servidor.

479
00:32:38,880 --> 00:32:43,769
Con esto completo la rápida ilustración

480
00:32:43,769 --> 00:32:49,575
del cliente Angular que hemos implementado como parte de este ejercicio.

481
00:32:49,575 --> 00:32:55,990
Y espero que también revise los detalles del código en el cliente angular,

482
00:32:55,990 --> 00:32:59,410
y luego reflexione sobre lo que ha aprendido en el curso Angular y vea

483
00:32:59,410 --> 00:33:03,105
cómo las modificaciones nos permiten implementar

484
00:33:03,105 --> 00:33:06,350
en un cliente angular modificado que ahora

485
00:33:06,350 --> 00:33:09,705
puede comunicarse con el servidor y a continuación, admiten todas las características

486
00:33:09,705 --> 00:33:17,310
que originalmente queríamos implementar como parte tanto del cliente como del servidor.