1
00:00:03,680 --> 00:00:11,610
Ahora que has tenido tu primera introducción a la Programación Reactiva, RxJS,

2
00:00:11,610 --> 00:00:14,880
y el uso del patrón de observador y

3
00:00:14,880 --> 00:00:21,165
cómo Angular aprovecha el patrón de observador y soporta la Programación Reactiva,

4
00:00:21,165 --> 00:00:24,600
pasemos a nuestro primer ejercicio para mojar nuestros pies

5
00:00:24,600 --> 00:00:29,315
usando los observables en Angular.

6
00:00:29,315 --> 00:00:35,950
En este ejercicio, vamos a actualizar nuestros servicios para hacer uso de observables,

7
00:00:35,950 --> 00:00:43,999
porque cuando pasemos al siguiente módulo donde veremos el soporte HTTP en Angular,

8
00:00:43,999 --> 00:00:49,915
comprenderemos inmediatamente que el soporte HTTP en Angular está basado en observables.

9
00:00:49,915 --> 00:00:54,485
Por lo tanto, es una buena idea para nosotros familiarizarnos

10
00:00:54,485 --> 00:00:59,870
con el uso de observables en esta lección misma.

11
00:00:59,870 --> 00:01:04,770
Por lo tanto, actualizaremos los servicios para exportar observables.

12
00:01:04,770 --> 00:01:08,479
A partir de entonces, dentro de nuestros componentes,

13
00:01:08,479 --> 00:01:11,270
nos suscribiremos a estos observables y

14
00:01:11,270 --> 00:01:15,190
obtenemos los datos necesarios para representar las vistas.

15
00:01:15,190 --> 00:01:19,340
Pasemos al ejercicio siguiente.

16
00:01:19,340 --> 00:01:21,680
Debes estar preguntándote,

17
00:01:21,680 --> 00:01:25,390
¿cómo hacemos uso de RxJS dentro de Angular,

18
00:01:25,390 --> 00:01:28,510
y ya está disponible para nosotros?

19
00:01:28,510 --> 00:01:31,730
Así que lo que notará es que con la CLI Angular,

20
00:01:31,730 --> 00:01:34,480
cuando scaffold su aplicación Angular,

21
00:01:34,480 --> 00:01:37,040
RxJS se incluye automáticamente allí.

22
00:01:37,040 --> 00:01:39,560
Entonces, si va al archivo package.json,

23
00:01:39,560 --> 00:01:42,795
notará que dentro de las dependencias,

24
00:01:42,795 --> 00:01:48,900
la biblioteca RxJS ya está incluida dentro de su aplicación.

25
00:01:48,900 --> 00:01:53,155
Por lo tanto, lo que necesite usar de RxJS ya está disponible para usted.

26
00:01:53,155 --> 00:02:00,215
Así que podemos seguir adelante y usar la biblioteca RxJS de inmediato dentro de nuestra aplicación Angular.

27
00:02:00,215 --> 00:02:03,735
Si está construyendo su aplicación Angular desde cero,

28
00:02:03,735 --> 00:02:08,450
entonces necesita hacer explícitamente una instalación npm de RxJS.

29
00:02:08,450 --> 00:02:11,135
Al ir al archivo dish.service.js,

30
00:02:11,135 --> 00:02:21,080
déjame primero importar el de

31
00:02:21,080 --> 00:02:27,750
de nuestros observables 'rxjs'.

32
00:02:28,960 --> 00:02:32,045
También importaremos - Ahora,

33
00:02:32,045 --> 00:02:35,235
cuando uses RxJS dentro de tu aplicación Angular,

34
00:02:35,235 --> 00:02:37,330
toda la biblioteca no se incluye.

35
00:02:37,330 --> 00:02:41,445
Solo puede importar las partes que necesite de la biblioteca RxJS,

36
00:02:41,445 --> 00:02:43,400
y luego usarla dentro de su aplicación Angular.

37
00:02:43,400 --> 00:02:48,680
Entonces, cuando su aplicación Angular esté finalmente preparada para la implementación,

38
00:02:48,680 --> 00:02:52,070
solo aquellas partes de RxJS que sean necesarias se incluirán

39
00:02:52,070 --> 00:02:56,030
dentro de su aplicación Angular.

40
00:02:56,030 --> 00:02:58,055
El operador de retardo.

41
00:02:58,055 --> 00:03:07,815
El operador de retardo nos permite retrasar la emisión del artículo desde nuestro observable.

42
00:03:07,815 --> 00:03:09,780
Entrando en los métodos,

43
00:03:09,780 --> 00:03:15,295
vamos a actualizar estos métodos para hacer uso de observables,

44
00:03:15,295 --> 00:03:18,230
y vamos a devolver una promesa convirtiendo el

45
00:03:18,230 --> 00:03:21,755
observable en su promesa usando el operador ToPromise.

46
00:03:21,755 --> 00:03:27,700
Entonces, si ya está teniendo componentes que están usando promesas,

47
00:03:27,700 --> 00:03:30,520
y desea no modificar los componentes,

48
00:03:30,520 --> 00:03:33,470
simplemente puede convertir un observable a su promesa y luego

49
00:03:33,470 --> 00:03:37,890
enviar la promesa a sus componentes.

50
00:03:37,890 --> 00:03:42,265
Como nos dimos cuenta, las promesas emitieron solo un elemento,

51
00:03:42,265 --> 00:03:48,000
mientras que se puede ver que los observables se basan en flujos.

52
00:03:48,000 --> 00:03:51,350
Entonces, esa es la limitación que obtendrá si

53
00:03:51,350 --> 00:03:54,560
solo usa el operador de dos promesas en observables

54
00:03:54,560 --> 00:03:58,520
y lo usa porque el operador ToPromise

55
00:03:58,520 --> 00:04:03,525
permitirá que su observable solo emita un valor.

56
00:04:03,525 --> 00:04:09,350
Pero por el momento hagámoslo como el primer paso antes de que

57
00:04:09,350 --> 00:04:14,665
nos adentremos en la plena implementación observable de nuestros servicios.

58
00:04:14,665 --> 00:04:17,820
Así que, yendo al método GetDRIces,

59
00:04:17,820 --> 00:04:22,370
voy a devolver estos platos.

60
00:04:22,370 --> 00:04:27,950
Así que, voy a quitar esa parte y luego decir, retorno de.

61
00:04:27,950 --> 00:04:31,625
Si desea emitir solo un valor de su observable,

62
00:04:31,625 --> 00:04:33,260
usará el método of,

63
00:04:33,260 --> 00:04:38,010
y que tomará cualquier valor que desee emitir allí.

64
00:04:38,010 --> 00:04:43,300
Eso es suficiente para nuestra aplicación actual en este momento.

65
00:04:43,300 --> 00:04:46,160
Así que vamos a hacer uso de eso,

66
00:04:46,160 --> 00:04:52,040
y también queremos retrasar la emisión del valor en dos segundos.

67
00:04:52,040 --> 00:04:55,565
Entonces, voy a cambiar esta parte del código para usar

68
00:04:55,565 --> 00:05:01,895
el operador de retardo para mi observable, usando pipe.

69
00:05:01,895 --> 00:05:09,360
Necesito convertir esto a Promise y emitir la promesa.

70
00:05:09,360 --> 00:05:14,775
Así que ahora, mi método GetDices se actualiza para hacer uso de un observable,

71
00:05:14,775 --> 00:05:19,665
y luego convertir eso en una promesa y luego enviar la promesa a mi componente.

72
00:05:19,665 --> 00:05:22,710
Así que no necesito hacer ninguna actualización del componente.

73
00:05:22,710 --> 00:05:31,200
Usemos el mismo enfoque para actualizar los dos métodos restantes de mi servicio aquí.

74
00:05:31,200 --> 00:05:34,455
Así que voy a copiar esta parte,

75
00:05:34,455 --> 00:05:42,225
y luego actualizar esa parte,

76
00:05:42,225 --> 00:05:46,140
luego tomar la parte de retraso de la misma,

77
00:05:46,140 --> 00:05:54,080
y luego actualizar esta parte para usar el delay

78
00:05:54,080 --> 00:06:06,300
y convertir este método toPromise.

79
00:06:06,300 --> 00:06:10,980
Entonces, con eso, mi método getDish también se actualiza.

80
00:06:10,980 --> 00:06:17,370
Déjame hacer lo mismo con el método getFeaturedDish.

81
00:06:17,370 --> 00:06:21,000
De nuevo, si quieres,

82
00:06:21,000 --> 00:06:23,040
puedes escribir todo el asunto.

83
00:06:23,040 --> 00:06:32,270
Solo estoy siendo perezoso para cortar y pegar solo y cambiar las partes que

84
00:06:32,270 --> 00:06:42,395
Quiero cambiar y convertir este método ToPromise.

85
00:06:42,395 --> 00:06:52,800
Eso es todo. Mi servicio ahora está actualizado para devolver promesas de un observable aquí.

86
00:06:52,800 --> 00:06:54,405
Entonces, con esta actualización,

87
00:06:54,405 --> 00:06:58,620
mi servicio de plato se actualiza para hacer uso de observables en lugar de

88
00:06:58,620 --> 00:07:04,215
usando directamente los valores.

89
00:07:04,215 --> 00:07:10,460
Del mismo modo, continúe y actualice el servicio líder y el servicio de promoción.

90
00:07:10,460 --> 00:07:13,415
Ahora notarías que ya he actualizado

91
00:07:13,415 --> 00:07:17,985
el servicio líder para hacer uso de observables.

92
00:07:17,985 --> 00:07:24,380
Del mismo modo, también he actualizado el servicio de promoción para hacer uso de observables.

93
00:07:24,380 --> 00:07:28,200
Guarde los cambios y vamos a echar un vistazo a nuestra aplicación.

94
00:07:28,200 --> 00:07:29,890
Cuando vaya al navegador,

95
00:07:29,890 --> 00:07:34,745
notará que su aplicación funciona exactamente de la misma manera que antes

96
00:07:34,745 --> 00:07:41,010
y recupera los datos de los servicios al igual que antes.

97
00:07:41,010 --> 00:07:45,160
Así que no hay mucho cambio dentro de su aplicación como tal.

98
00:07:45,160 --> 00:07:46,850
Se realiza exactamente lo mismo.

99
00:07:46,850 --> 00:07:51,035
Por lo tanto, observe que al sustituir sus promesas por observables,

100
00:07:51,035 --> 00:07:55,370
no ha habido mucho cambio dentro de su aplicación como lo espera.

101
00:07:55,370 --> 00:07:58,460
Ahora, vamos un paso más allá.

102
00:07:58,460 --> 00:08:04,540
Ahora dejaremos que nuestros servicios devuelvan observables,

103
00:08:04,540 --> 00:08:08,240
y actualizaremos los componentes para hacer uso de observables.

104
00:08:08,240 --> 00:08:09,835
La razón como mencioné,

105
00:08:09,835 --> 00:08:13,790
es porque cuando actualizamos nuestros servicios para usar

106
00:08:13,790 --> 00:08:18,420
el servicio HTTP para ir a un servidor a buscar los datos,

107
00:08:18,420 --> 00:08:25,345
entonces notaríamos que en Angular los métodos HTTP devolverán observables.

108
00:08:25,345 --> 00:08:30,260
Los servicios pueden simplemente pasar los observables a nuestros componentes y dejar que

109
00:08:30,260 --> 00:08:33,080
los componentes se suscriban a estos observables y hagan uso

110
00:08:33,080 --> 00:08:36,215
de los datos que obtienen con ello.

111
00:08:36,215 --> 00:08:41,020
Por lo tanto, este sería un paso intermedio para que llegáramos a esa etapa.

112
00:08:41,020 --> 00:08:45,275
Vamos a llegar a ver HTTP en el siguiente módulo.

113
00:08:45,275 --> 00:08:48,234
Volviendo a nuestros servicios,

114
00:08:48,234 --> 00:08:52,460
ahora puede eliminar el ToPromise primero eliminando

115
00:08:52,460 --> 00:08:55,400
el operador ToPromise porque ya no lo necesitamos

116
00:08:55,400 --> 00:08:59,660
y luego simplemente eliminaremos el ToPromise de esto,

117
00:08:59,660 --> 00:09:04,110
importar observable y luego dejar

118
00:09:04,110 --> 00:09:09,044
nuestro método devolver

119
00:09:09,044 --> 00:09:16,140
observables en lugar de promesas.

120
00:09:16,140 --> 00:09:17,615
Así que como mencioné,

121
00:09:17,615 --> 00:09:21,420
cualquier cosa que una promesa pueda hacer, un observable también puede hacer.

122
00:09:22,810 --> 00:09:28,400
Entonces, actualicemos todos estos para devolver observables.

123
00:09:28,400 --> 00:09:32,695
Haga lo mismo con los dos servicios restantes.

124
00:09:32,695 --> 00:09:36,680
Ahora notarías que también he actualizado el servicio de líderes

125
00:09:36,680 --> 00:09:40,725
para simplemente devolver observables en lugar de promesas,

126
00:09:40,725 --> 00:09:43,984
y también el servicio de promoción ha sido correspondientemente

127
00:09:43,984 --> 00:09:47,735
actualizado para volver observable en lugar de promesas.

128
00:09:47,735 --> 00:09:52,460
Ahora lo que esto significa es que tenemos que ir y actualizar nuestros componentes

129
00:09:52,460 --> 00:09:57,590
para hacer uso de observables en lugar de promesas como hicimos antes.

130
00:09:57,590 --> 00:10:01,885
Ahora, por promesa, vimos que necesitamos usar el.then

131
00:10:01,885 --> 00:10:07,430
para obtener el resultado cuando se ejecuta la resolución de la promesa.

132
00:10:07,430 --> 00:10:12,495
Con un observable, el.then se convierte a.subscribe.

133
00:10:12,495 --> 00:10:16,715
La forma en que consuma los datos seguirá siendo exactamente la misma.

134
00:10:16,715 --> 00:10:19,890
Así que con ese cambio menor dentro de sus componentes,

135
00:10:19,890 --> 00:10:25,480
los componentes ahora podrán manejar observables en lugar de promesas.

136
00:10:25,480 --> 00:10:31,085
Entonces, yendo a los cuatro componentes que hacen uso de los servicios,

137
00:10:31,085 --> 00:10:37,185
primero, vamos al archivo menu.component.ts.

138
00:10:37,185 --> 00:10:39,280
En el archivo menu.component.ts,

139
00:10:39,280 --> 00:10:42,080
usted notaría inmediatamente la línea roja escudero allí,

140
00:10:42,080 --> 00:10:48,100
bajo el entonces obviamente porque no estamos devolviendo una promesa.

141
00:10:48,100 --> 00:10:50,090
En su lugar estamos devolviendo un observable.

142
00:10:50,090 --> 00:10:55,245
Así que simplemente convierte eso luego para suscribirse y eso es todo.

143
00:10:55,245 --> 00:10:59,225
Su componente de menú ahora es capaz de

144
00:10:59,225 --> 00:11:04,910
consumir los valores observables que está siendo emitido por el observable.

145
00:11:04,910 --> 00:11:10,890
Realice el mismo cambio en el archivo about.component.ts,

146
00:11:10,890 --> 00:11:16,760
el archivo dishdetail.component.ts y el archivo home.component.ts.

147
00:11:16,760 --> 00:11:22,520
Después de actualizar los archivos Tapscott componentes restantes,

148
00:11:22,520 --> 00:11:27,245
vamos a ir y ver el comportamiento de nuestra aplicación en el navegador.

149
00:11:27,245 --> 00:11:32,920
Entra en el navegador, no notarás ninguna diferencia en el comportamiento de nuestra aplicación.

150
00:11:32,920 --> 00:11:36,170
Esta versión de nuestra aplicación Angular se actualiza para usar

151
00:11:36,170 --> 00:11:40,275
observables en lugar de promesas.

152
00:11:40,275 --> 00:11:42,620
Entonces, el componente de inicio aquí,

153
00:11:42,620 --> 00:11:46,085
sobre el componente funciona exactamente de la misma manera que antes,

154
00:11:46,085 --> 00:11:49,800
y el componente de menú hace exactamente lo mismo.

155
00:11:49,800 --> 00:11:54,785
También el componente de detalle del plato se comportará exactamente de la misma manera que antes.

156
00:11:54,785 --> 00:11:57,960
Con esto, completamos este ejercicio.

157
00:11:57,960 --> 00:12:01,430
En este ejercicio, dimos nuestros primeros pasos hacia el uso de

158
00:12:01,430 --> 00:12:05,030
observables dentro de nuestra aplicación Angular actualizando

159
00:12:05,030 --> 00:12:08,330
los servicios y correspondientemente los componentes para

160
00:12:08,330 --> 00:12:12,185
hacer uso de observables en lugar de promesas.

161
00:12:12,185 --> 00:12:18,640
Este es un buen momento para que hagas un commit de git con el mensaje RxJS parte uno.