1
00:00:03,950 --> 00:00:07,125
En el ejercicio anterior,

2
00:00:07,125 --> 00:00:13,625
actualizamos nuestros servicios de aplicaciones Angular para usar promesas,

3
00:00:13,625 --> 00:00:15,960
y también actualizar los componentes para

4
00:00:15,960 --> 00:00:19,245
hacer frente a las promesas que son devueltas por los servicios.

5
00:00:19,245 --> 00:00:24,280
En este ejercicio, que es una extensión al anterior,

6
00:00:24,280 --> 00:00:29,485
vamos a simular un retraso de tiempo para que la promesa se resuelva.

7
00:00:29,485 --> 00:00:31,240
En el ejercicio anterior,

8
00:00:31,240 --> 00:00:33,490
las promesas se resolvieron inmediatamente.

9
00:00:33,490 --> 00:00:35,540
Pero en la vida real,

10
00:00:35,540 --> 00:00:42,934
cuando solicita datos de un servicio y el servicio entrega una promesa,

11
00:00:42,934 --> 00:00:44,540
el servicio, a su vez,

12
00:00:44,540 --> 00:00:47,900
necesita ir y buscar los datos de un servidor back-end,

13
00:00:47,900 --> 00:00:49,295
y esto llevará tiempo.

14
00:00:49,295 --> 00:00:51,310
Así que, para que la promesa se resuelva,

15
00:00:51,310 --> 00:00:53,740
habrá una cierta cantidad de tiempo de retraso.

16
00:00:53,740 --> 00:00:59,880
Ahora, ¿cómo lidiar con este retraso de tiempo en nuestro lado de componentes?

17
00:00:59,880 --> 00:01:04,040
¿Cómo mantenemos informado al usuario sobre el hecho de que hay

18
00:01:04,040 --> 00:01:09,810
un retraso de tiempo involucrado antes de que los datos puedan ser recuperados y mostrados al usuario?

19
00:01:10,070 --> 00:01:14,490
¿Cómo lidiamos con el retraso en sí?

20
00:01:14,490 --> 00:01:15,830
Ahora, en este ejercicio,

21
00:01:15,830 --> 00:01:24,820
voy a simular el retardo de tiempo usando un método JavaScript dentro de mis servicios,

22
00:01:24,820 --> 00:01:34,190
y luego también actualizar los componentes para poder mostrar un mensaje al usuario usando

23
00:01:34,190 --> 00:01:41,765
el componente de hilandero de progreso de material angular para mostrar un disco giratorio en

24
00:01:41,765 --> 00:01:46,130
la plantilla para mantener al usuario informado sobre

25
00:01:46,130 --> 00:01:51,630
el hecho de que los datos se están recuperando del servidor,

26
00:01:51,630 --> 00:01:55,940
y vamos a renderizar en la vista tan pronto como los datos estén

27
00:01:55,940 --> 00:02:00,590
disponibles para el componente cuando se resuelva la promesa.

28
00:02:00,590 --> 00:02:04,680
Veamos cómo podemos hacerlo en este ejercicio.

29
00:02:04,680 --> 00:02:09,110
De nuevo, volviendo a mi servicio,

30
00:02:09,110 --> 00:02:11,990
aquí tengo el servicio de platos abierto aquí.

31
00:02:11,990 --> 00:02:15,490
En lugar de tener la promesa resuelta inmediatamente,

32
00:02:15,490 --> 00:02:18,620
ahora vamos a entregar una promesa y luego dejar que

33
00:02:18,620 --> 00:02:22,500
la promesa se resuelva después de un corto período de tiempo.

34
00:02:22,500 --> 00:02:26,510
Entonces, para hacer eso, esta resolución de promesa ya no funcionará

35
00:02:26,510 --> 00:02:31,055
como se muestra aquí, así que voy a eliminar eso.

36
00:02:31,055 --> 00:02:34,535
En su lugar, cuando se llama a mi método,

37
00:02:34,535 --> 00:02:38,915
el método devolverá una promesa creando una nueva promesa.

38
00:02:38,915 --> 00:02:42,310
Recordáis que cuando creáis la nueva promesa,

39
00:02:42,310 --> 00:02:47,060
dentro de la promesa tendréis la función

40
00:02:47,060 --> 00:02:52,795
con la resolución y el rechazo como los dos parámetros.

41
00:02:52,795 --> 00:02:56,080
Ahora, voy a usar solo la parte de resolución.

42
00:02:56,080 --> 00:03:02,665
Entonces, implementaré la función dentro de la promesa solo usando una función de flecha aquí.

43
00:03:02,665 --> 00:03:04,690
Por lo tanto, voy a decir resolver,

44
00:03:04,690 --> 00:03:13,380
y voy a simular un breve retraso para que esta resolución tenga lugar.

45
00:03:13,380 --> 00:03:17,340
Déjame escribir un comentario.

46
00:03:17,440 --> 00:03:28,780
Simule la latencia del servidor con retraso de dos segundos.

47
00:03:28,780 --> 00:03:31,410
Entonces, ¿cómo simulamos esto?

48
00:03:31,410 --> 00:03:37,380
Por lo tanto, utilizamos el método setTimeout

49
00:03:37,380 --> 00:03:43,900
que está disponible en JavaScript.

50
00:03:43,900 --> 00:03:45,870
Entonces, para el método setTimeout,

51
00:03:45,870 --> 00:03:48,115
nuevamente, implementaré una función de flecha,

52
00:03:48,115 --> 00:03:52,625
el método setTimeout no tiene ningún parámetro que necesitemos allí.

53
00:03:52,625 --> 00:03:57,565
Entonces, cuando se ejecute este setTimeout,

54
00:03:57,565 --> 00:04:04,245
resolverá la entrega de los platos.

55
00:04:04,245 --> 00:04:08,480
Así que, déjame cortar este plato y luego pegarlo en los platos.

56
00:04:08,480 --> 00:04:14,650
Por lo tanto, verá que este resultado ahora está devolviendo el resultado aquí,

57
00:04:14,650 --> 00:04:22,370
y este resultado será devuelto después de dos segundos de retraso aquí.

58
00:04:24,880 --> 00:04:31,160
Con esta actualización, nuestra promesa ahora se resolverá después de dos segundos.

59
00:04:31,160 --> 00:04:37,010
Entonces, el método setTimeout disponible en JavaScript simula un retraso corto.

60
00:04:37,010 --> 00:04:38,710
Así que, como pueden ver,

61
00:04:38,710 --> 00:04:44,345
simula el retraso corto y toma una devolución de llamada aquí.

62
00:04:44,345 --> 00:04:46,280
Esta devolución de llamada como puede ver,

63
00:04:46,280 --> 00:04:48,930
lo he implementado como una función de flecha aquí.

64
00:04:48,930 --> 00:04:51,730
Entonces, no hay parámetros y luego cuando esto se resuelva,

65
00:04:51,730 --> 00:05:01,450
va a resolver devolviendo los platos y el retraso para eso es de dos segundos.

66
00:05:01,450 --> 00:05:04,185
Entonces, esta parte es la función,

67
00:05:04,185 --> 00:05:09,180
y este es el retraso de tiempo que tenemos aquí.

68
00:05:09,180 --> 00:05:14,590
Así que, ahora, mi promesa se resolverá después de un retraso de dos segundos.

69
00:05:14,590 --> 00:05:19,870
Del mismo modo, vamos a actualizar los dos métodos restantes aquí.

70
00:05:20,720 --> 00:05:22,785
Así que, para hacer eso,

71
00:05:22,785 --> 00:05:29,430
sólo voy a copiar

72
00:05:29,430 --> 00:05:35,745
esa parte y luego simplemente pegar eso allí,

73
00:05:35,745 --> 00:05:41,325
y te darías cuenta de que

74
00:05:41,325 --> 00:05:51,315
lo hará y necesito decir 2000.

75
00:05:51,315 --> 00:05:56,390
Entonces, eso completa el método setTimeout allí.

76
00:05:56,730 --> 00:06:00,445
Ahora, vamos a tener

77
00:06:00,445 --> 00:06:09,705
el paréntesis de cierre seguido.

78
00:06:09,705 --> 00:06:16,725
Del mismo modo, permítanme actualizar el último método también.

79
00:06:16,725 --> 00:06:20,340
Entonces, ves que resuelve los platos,

80
00:06:20,340 --> 00:06:26,020
y luego después de dos segundos de retraso,

81
00:06:29,270 --> 00:06:32,840
y cierra el método hasta allí.

82
00:06:32,840 --> 00:06:36,965
Eso es todo. Por lo tanto, ahora mi servicio de plato es

83
00:06:36,965 --> 00:06:43,105
actualizado para resolver todas las promesas después de dos segundos de retraso.

84
00:06:43,105 --> 00:06:47,810
Ahora, de manera similar, actualiza el servicio líder y

85
00:06:47,810 --> 00:06:52,405
el servicio de promoción utilizando el mismo patrón que te he mostrado aquí.

86
00:06:52,405 --> 00:06:57,890
La segunda parte de la pregunta es mantener informado al usuario sobre

87
00:06:57,890 --> 00:07:03,260
el hecho de que hay un retraso de tiempo involucrado en la obtención de los resultados,

88
00:07:03,260 --> 00:07:07,700
y así la vista se actualizará tan pronto como se obtengan los resultados.

89
00:07:07,700 --> 00:07:10,690
Usted ha visto este tipo de comportamiento en muchas aplicaciones,

90
00:07:10,690 --> 00:07:18,020
incluyendo aplicaciones móviles donde tendría un spinner mostrado en la pantalla para mantener

91
00:07:18,020 --> 00:07:21,620
el usuario informado sobre el hecho de que algo se está cargando desde detrás

92
00:07:21,620 --> 00:07:25,445
las escenas y cuando los resultados estén disponibles,

93
00:07:25,445 --> 00:07:27,275
la vista se actualizará.

94
00:07:27,275 --> 00:07:33,750
Por lo tanto, vamos a utilizar un enfoque similar dentro de nuestros componentes.

95
00:07:33,750 --> 00:07:35,530
Para ayudarnos con esto,

96
00:07:35,530 --> 00:07:40,585
usaremos el componente spinner de progreso de Material angular.

97
00:07:40,585 --> 00:07:43,330
Entonces, para usar el componente spinner de progreso,

98
00:07:43,330 --> 00:07:47,625
primero vayamos al archivo

99
00:07:47,625 --> 00:07:52,725
module.ts de la aplicación y luego importemos el módulo spinner de progreso allí.

100
00:07:52,725 --> 00:07:55,180
Entonces, yendo a la aplicación module.ts.

101
00:07:55,180 --> 00:08:01,595
Primero iremos aquí para importar

102
00:08:01,595 --> 00:08:12,150
el MatProgressSpinnerModule desde angular/material/progress-spinner.

103
00:08:17,560 --> 00:08:23,025
Una vez que hayamos importado esto en el archivo,

104
00:08:23,025 --> 00:08:28,415
luego entraremos en el decorador del módulo ng en las importaciones,

105
00:08:28,415 --> 00:08:34,290
y luego agregaremos el MatProgressSpinnerModule en eso.

106
00:08:34,290 --> 00:08:35,650
Una vez que completemos esto,

107
00:08:35,650 --> 00:08:42,075
podremos actualizar los componentes para hacer uso del spinner de progreso.

108
00:08:42,075 --> 00:08:45,970
Así que aquí, les mostraré un ejemplo de

109
00:08:45,970 --> 00:08:51,555
que ilustra cómo podemos actualizar el componente de menú para mostrar esta información.

110
00:08:51,555 --> 00:08:55,505
Por lo tanto, vaya al archivo de diseño de componentes del menú.

111
00:08:55,505 --> 00:09:02,425
Aquí, vemos que estamos mostrando el menú usando la lista de cuadrícula aquí.

112
00:09:02,425 --> 00:09:06,880
Entonces, lo que haremos es, para este div,

113
00:09:06,880 --> 00:09:14,060
voy a usar la directiva nGIF y decir que esto debería mostrarse.

114
00:09:14,060 --> 00:09:18,465
El menú debe mostrarse sólo cuando los platos no son nulos.

115
00:09:18,465 --> 00:09:23,670
Así que inicialmente, en su archivo de script de la pestaña de componentes,

116
00:09:23,670 --> 00:09:27,325
verá que cuando vaya al archivo de script de la pestaña de componentes verá que

117
00:09:27,325 --> 00:09:32,250
sus platos actualmente es solo un objeto indefinido aquí,

118
00:09:32,250 --> 00:09:39,255
y que los platos se asignarán al valor de los platos solo cuando los problemas se resuelvan.

119
00:09:39,255 --> 00:09:40,995
Así que, hasta ese punto,

120
00:09:40,995 --> 00:09:43,145
los platos serán un valor indefinido.

121
00:09:43,145 --> 00:09:45,665
Entonces, podemos aprovechar ese hecho,

122
00:09:45,665 --> 00:09:49,270
y luego rediseñar nuestra plantilla de tal manera que,

123
00:09:49,270 --> 00:09:58,955
diríamos mostrar este div solo si los platos no son un objeto indefinido o no nulo.

124
00:09:58,955 --> 00:10:01,970
Cuando es desconocido,

125
00:10:01,970 --> 00:10:10,210
entonces usaré un segundo div aquí con el atributo oculto asociado con él.

126
00:10:10,210 --> 00:10:14,310
Por lo tanto, usted ha visto ocultado ser usado antes.

127
00:10:14,310 --> 00:10:18,685
Entonces, voy a usar eso para definir el tallo.

128
00:10:18,685 --> 00:10:23,350
Entonces, lo que esto significa es que si los platos no son nulos,

129
00:10:23,350 --> 00:10:25,145
entonces este div estará oculto.

130
00:10:25,145 --> 00:10:26,865
Si los platos son nulos,

131
00:10:26,865 --> 00:10:28,405
entonces se mostrará este div.

132
00:10:28,405 --> 00:10:31,435
Entonces, ahora ves que tienes dos divs aquí.

133
00:10:31,435 --> 00:10:39,840
El primero se mostrará si los platos no es null dish array.

134
00:10:39,840 --> 00:10:42,365
De lo contrario, se mostrará la segunda parte.

135
00:10:42,365 --> 00:10:46,120
Así que, con este pequeño cambio en mi plantilla,

136
00:10:46,120 --> 00:10:54,745
soy capaz de ocultar el menú hasta el punto en que la matriz de platos esté disponible para mí,

137
00:10:54,745 --> 00:10:57,350
y cuando la matriz de platos esté disponible,

138
00:10:57,350 --> 00:10:58,660
entonces voy a mostrar el menú.

139
00:10:58,660 --> 00:11:06,000
Hasta ese punto, voy a mostrar un mat-spinner.

140
00:11:06,000 --> 00:11:11,295
Que es un spinner de progreso no determinado

141
00:11:11,295 --> 00:11:14,635
que está disponible como un componente de material angular.

142
00:11:14,635 --> 00:11:20,565
Entonces, esto se mostrará como un círculo giratorio en mi opinión,

143
00:11:20,565 --> 00:11:27,185
para este componente de menú hasta el punto en que se obtengan los resultados,

144
00:11:27,185 --> 00:11:29,605
cuando se resuelvan los problemas.

145
00:11:29,605 --> 00:11:35,330
Además, también usaré h4, y dentro del h4,

146
00:11:35,330 --> 00:11:43,680
diré cargando, por favor espere.

147
00:11:43,680 --> 00:11:48,205
Entonces, lo que sucede es que cuando los platos aún no se hayan resuelto,

148
00:11:48,205 --> 00:11:51,575
el spinner y este mensaje se mostrarán en la pantalla.

149
00:11:51,575 --> 00:11:55,210
En el momento en que los platos estén disponibles cuando los resultados prometidos,

150
00:11:55,210 --> 00:11:58,015
entonces el menú se mostrará en la pantalla.

151
00:11:58,015 --> 00:12:03,685
Ahora, vamos a hacer actualizaciones similares sobre el componente,

152
00:12:03,685 --> 00:12:07,985
el componente de hogar, y el componente de detalle de plato también.

153
00:12:07,985 --> 00:12:13,135
En consecuencia, actualizaremos el servicio líder,

154
00:12:13,135 --> 00:12:18,570
y el servicio de promoción también para simular el retraso de tiempo.

155
00:12:18,570 --> 00:12:22,000
Así que, usando el patrón que acabo de ilustrarte,

156
00:12:22,000 --> 00:12:26,660
continúe y actualice los servicios y también las plantillas correspondientes,

157
00:12:26,660 --> 00:12:31,135
y veremos el resultado después de terminar la actualización.

158
00:12:31,135 --> 00:12:34,710
Después de completar las actualizaciones de todos los servicios y

159
00:12:34,710 --> 00:12:38,255
las plantillas correspondientes para los componentes,

160
00:12:38,255 --> 00:12:43,565
déjame ejecutarlo rápidamente a través de los archivos actualizados aquí.

161
00:12:43,565 --> 00:12:45,290
Entonces, este es el servicio líder.

162
00:12:45,290 --> 00:12:47,320
Entonces, puedes ver que en el servicio líder,

163
00:12:47,320 --> 00:12:54,675
he actualizado GetLeaders para usar el setTimeout exactamente como hicimos con los platos,

164
00:12:54,675 --> 00:12:58,880
y getLeader y getFeaturedLeader también.

165
00:12:58,880 --> 00:13:01,650
Del mismo modo, en el servicio de promoción,

166
00:13:01,650 --> 00:13:08,190
hemos actualizado el id getPromotions GetPromotion y getFeaturedPromotion también.

167
00:13:08,190 --> 00:13:11,545
Por lo tanto, los tres servicios ahora se actualizan

168
00:13:11,545 --> 00:13:15,955
para causar un retraso de tiempo antes de que devuelvan el resultado.

169
00:13:15,955 --> 00:13:18,325
Ahora, en términos de las plantillas,

170
00:13:18,325 --> 00:13:22,150
ya hemos actualizado la plantilla menu.component.

171
00:13:22,150 --> 00:13:26,140
Echemos un vistazo a las plantillas de home.components.

172
00:13:26,140 --> 00:13:27,985
Así que, dentro del home.component,

173
00:13:27,985 --> 00:13:31,100
te das cuenta de que cuando diseñamos el home.component,

174
00:13:31,100 --> 00:13:36,420
ya habíamos configurado las tarjetas con el plato estrella nGIF.

175
00:13:36,420 --> 00:13:38,320
Entonces, todo lo que necesitamos hacer es,

176
00:13:38,320 --> 00:13:40,630
abajo aquí agregamos un div con

177
00:13:40,630 --> 00:13:47,490
lo oculto y el plato aquí, pero el spinner al igual que hicimos con el menu.component.

178
00:13:47,490 --> 00:13:53,265
Del mismo modo, para la promoción la mat-card ya tiene el nGIF en su lugar,

179
00:13:53,265 --> 00:14:00,530
así que solo tenemos que añadir este div adicional aquí con la promoción oculta allí,

180
00:14:00,530 --> 00:14:05,015
y también para el líder aquí abajo.

181
00:14:05,015 --> 00:14:09,220
Del mismo modo, yendo al componente de detalle del plato.

182
00:14:09,220 --> 00:14:10,810
En el componente de detalle plato,

183
00:14:10,810 --> 00:14:17,105
ya teníamos la lista con el plato nGif para los comentarios.

184
00:14:17,105 --> 00:14:23,250
Además, el plato nGif para la tarjeta que muestra los detalles del plato.

185
00:14:23,250 --> 00:14:30,440
Entonces, todo lo que necesitamos hacer es agregar este nuevo div con el plato oculto aquí,

186
00:14:30,440 --> 00:14:32,970
y el div spinner en su lugar.

187
00:14:32,970 --> 00:14:36,295
Del mismo modo, en el componente sobre,

188
00:14:36,295 --> 00:14:39,015
cuando se entra en el componente sobre,

189
00:14:39,015 --> 00:14:42,515
se vería que teníamos los líderes corporativos aquí,

190
00:14:42,515 --> 00:14:47,330
y ya teníamos la lista con la estrella nGIF con líderes.

191
00:14:47,330 --> 00:14:50,950
Entonces, todo lo que necesitamos hacer es agregar el div con

192
00:14:50,950 --> 00:14:55,715
oculto y líderes aquí con un spinner en su lugar. Eso es todo.

193
00:14:55,715 --> 00:14:58,155
Nuestra aplicación ya está actualizada.

194
00:14:58,155 --> 00:15:04,665
Echemos un vistazo a la aplicación actualizada en el navegador a continuación.

195
00:15:04,665 --> 00:15:06,530
Al ir al navegador,

196
00:15:06,530 --> 00:15:10,275
verás que cuando intentes cargar en el componente home,

197
00:15:10,275 --> 00:15:14,520
hay un corto período de tiempo cuando ves el spinner en

198
00:15:14,520 --> 00:15:18,730
la pantalla antes de que las tarjetas se carguen.

199
00:15:18,730 --> 00:15:21,520
Del mismo modo, cuando vas al menu.component,

200
00:15:21,520 --> 00:15:24,765
verías el spinner en el lado izquierdo durante

201
00:15:24,765 --> 00:15:28,995
dos segundos antes de que el menú real se actualiza,

202
00:15:28,995 --> 00:15:33,395
y cuando vas a un plato individual también ves que

203
00:15:33,395 --> 00:15:38,505
el spinner en la pantalla antes de que los detalles del plato se renderizan,

204
00:15:38,505 --> 00:15:42,500
y en el componente sobre también de manera similar, verá que,

205
00:15:42,500 --> 00:15:50,400
tendrá el círculo giratorio allí antes de que se actualice la información del líder.

206
00:15:50,400 --> 00:15:53,520
Cada vez que nos movemos a cualquiera de estos,

207
00:15:53,520 --> 00:16:02,190
verías un breve retraso similar antes de que la inflamación se actualice en la pantalla.

208
00:16:04,030 --> 00:16:12,860
Así que, con esto usted ve cómo puede lidiar con el retraso en la obtención de los resultados,

209
00:16:12,860 --> 00:16:18,874
o el retraso en la resolución de la promesa desde el lado del servicio dentro de su componente

210
00:16:18,874 --> 00:16:21,830
y mantener al usuario informado sobre el hecho de que hay

211
00:16:21,830 --> 00:16:25,495
un breve retraso antes de que la pantalla se actualice.

212
00:16:25,495 --> 00:16:28,260
Esto completa este ejercicio.

213
00:16:28,260 --> 00:16:35,420
En este ejercicio, vimos cómo podemos simular un pequeño retraso con nuestras promesas.

214
00:16:35,420 --> 00:16:38,575
Resolviendo de los servicios,

215
00:16:38,575 --> 00:16:45,185
y también vimos cómo mantener informado al usuario usando el MD spinner

216
00:16:45,185 --> 00:16:49,460
componentes de material angular para mostrar en la pantalla durante

217
00:16:49,460 --> 00:16:53,900
la duración cuando los resultados aún no están disponibles,

218
00:16:53,900 --> 00:16:59,025
es decir para la duración hasta que la promesa se resuelva.

219
00:16:59,025 --> 00:17:01,470
Esto completa este ejercicio.

220
00:17:01,470 --> 00:17:07,770
Este es un buen momento para que hagas un commit de git con la promesa del mensaje Segunda parte.