1
00:00:00,240 --> 00:00:00,870
Bienvenidos.

2
00:00:00,930 --> 00:00:06,450
Vamos a modificar nuestra clase cliente servis para que las peticiones sean más reactivas y también

3
00:00:06,450 --> 00:00:10,530
después cuando trabajemos con el API Rest sean asíncrona.

4
00:00:10,680 --> 00:00:15,690
Por ahora, si realizamos la clase cliente servis actualmente como la dejamos?

5
00:00:15,870 --> 00:00:23,490
La última clase es un método psicrono, está sincronizado y no podría funcionar correctamente en un

6
00:00:23,490 --> 00:00:30,570
contexto real con un API, ya que se requiere manejar peticiones asíncrona que no bloquee nuestra aplicación

7
00:00:30,570 --> 00:00:34,680
cliente nuestra aplicación angular mientras espera la respuesta del servidor.

8
00:00:34,830 --> 00:00:40,470
Y además, la idea es que en el servidor se puedan realizar varias peticiones al mismo tiempo que no

9
00:00:40,470 --> 00:00:46,260
estén sincronizadas entre sí y por supuesto que se manejen de forma paralela al mismo tiempo y en tiempo

10
00:00:46,260 --> 00:00:46,480
real.

11
00:00:46,560 --> 00:00:53,640
Y justamente eso, que el concepto reactivo que reaccioné en tiempo real y a través de flujo de datos

12
00:00:53,670 --> 00:00:56,010
con stream de entrada y de salida.

13
00:00:56,070 --> 00:01:01,110
Por lo tanto, tenemos que modificar nuestro código para que el arreglo de cliente lo transformemos

14
00:01:01,200 --> 00:01:05,760
a un tipo stream y para eso utilizamos el API observable.

15
00:01:05,910 --> 00:01:07,800
Vamos a comenzar importando esta clase

16
00:01:11,220 --> 00:01:22,500
observable from RX 10 Reactive Extensions Perfecto, pero esto sería si estamos utilizando Angular 5,

17
00:01:22,530 --> 00:01:24,630
pero en Angular 6 esto cambia completamente.

18
00:01:24,720 --> 00:01:28,980
Reactive Streams o Stetson tiene una importante estructuración.

19
00:01:29,070 --> 00:01:30,690
Va a cambiar los import.

20
00:01:30,750 --> 00:01:38,970
Por ejemplo, en Angular 6 sería muy parecido, pero en el front, en el RX 10 es el larch observable.

21
00:01:39,060 --> 00:01:41,970
No va solo mentiría él era x 10.

22
00:01:42,000 --> 00:01:48,270
Para resumir sería import las llaves observable from rx 10 nada más.

23
00:01:48,360 --> 00:01:55,260
Eso sería en la nueva versión de Angular 6, que por supuesto utiliza recti este Echolls versión 6.

24
00:01:55,320 --> 00:01:56,310
Bien, continuemos.

25
00:01:56,430 --> 00:02:00,880
Entonces lo que retorna al método del cliente tiene que ser un stream.

26
00:02:01,500 --> 00:02:04,560
Por lo tanto, un observable de clientes.

27
00:02:08,140 --> 00:02:13,450
Y también tenemos que convertir este arreglo de clientes en un observable para que sea del mismo tipo

28
00:02:13,450 --> 00:02:14,950
que estamos retornando.

29
00:02:15,430 --> 00:02:16,930
Entonces también tenemos que importar.

30
00:02:18,490 --> 00:02:20,370
Vamos a importar el método off.

31
00:02:20,740 --> 00:02:26,170
Es un operador from también del Happy Reactive Estrechen.

32
00:02:28,120 --> 00:02:30,400
Acá sería observable en minúscula.

33
00:02:30,580 --> 00:02:36,370
Larch, el nombre del operador off y acá pasa lo mismo para la versión de Angular 6.

34
00:02:36,460 --> 00:02:38,230
Muy parecido al observable.

35
00:02:38,320 --> 00:02:40,990
Hay un cambio también en el import del off.

36
00:02:41,200 --> 00:02:43,540
Por lo tanto sería el import la llaves.

37
00:02:43,990 --> 00:02:46,790
Coma observable from here que iez.

38
00:02:46,870 --> 00:02:47,620
Eso sería todo.

39
00:02:47,740 --> 00:02:50,320
Significa tanto el off como el observable.

40
00:02:50,410 --> 00:02:53,440
Ambos se importan desde el mismo paquete.

41
00:02:53,560 --> 00:02:59,610
El paquete RX 10 y vamos a tener un solo import tanto para off como para observable off.

42
00:02:59,710 --> 00:03:06,760
Sería este método de construcción para crear el objeto observable y por supuesto, el observable sería

43
00:03:06,820 --> 00:03:11,830
el tipo de dato, la clase observada que representa nuestro flujo reactivo.

44
00:03:11,890 --> 00:03:13,030
Bien, continuamos.

45
00:03:13,850 --> 00:03:14,040
Llega.

46
00:03:14,070 --> 00:03:23,410
Utilizamos el método off el operador Omero y ahí convertimos nuestro listado de clientes en un observable.

47
00:03:23,590 --> 00:03:26,350
Por lo tanto, en un stream, en un flujo de datos.

48
00:03:26,440 --> 00:03:31,780
Y justamente la idea es que se puede manejar grandes flujo de datos de cualquier tipo, ya sea un listado

49
00:03:31,780 --> 00:03:37,060
de objetos, clientes, un stream de audio, video, imágenes, cualquier tipo de cosa.

50
00:03:37,300 --> 00:03:43,750
También importante entender el concepto observable está basado en el patrón de diseño observador, es

51
00:03:43,750 --> 00:03:46,780
decir, que tenemos un sujeto que es observable.

52
00:03:46,900 --> 00:03:53,590
En este caso sería el cliente y tenemos también observadores que están atentos escuchando un posible

53
00:03:53,590 --> 00:03:55,150
cambio en el sujeto.

54
00:03:55,270 --> 00:03:56,860
En este caso en el cliente.

55
00:03:57,070 --> 00:04:04,120
Estos observadores se suscriben al sujeto que sería el observable y cuando cambia su estado se notifica

56
00:04:04,180 --> 00:04:09,910
a los observadores y se gatilla algún tipo de proceso, un tipo tarea, algún tipo de evento.

57
00:04:10,030 --> 00:04:11,680
Ese es el patrón de diseño.

58
00:04:11,770 --> 00:04:13,300
Y esto llevado a Angular.

59
00:04:13,390 --> 00:04:20,020
Tenemos el lado bikeinn del servidor con el API Rest y tenemos el cliente con Angular, el frontend.

60
00:04:20,200 --> 00:04:26,470
Entonces, cuando cambia algún dato en el servidor, los clientes automáticamente notifique ese cambio

61
00:04:26,590 --> 00:04:32,260
y se actualiza de forma automática y en tiempo real en el cliente, en el cliente angular, sin necesidad

62
00:04:32,260 --> 00:04:37,210
de tener que recargar la página, lo haga de forma transparente solamente cuando cambie la información,

63
00:04:37,240 --> 00:04:42,760
cuando cambie el estado de los clientes, ya sea cuando se registra o no al cliente, cuando se edita,

64
00:04:42,790 --> 00:04:43,720
cuando se elimina.

65
00:04:43,810 --> 00:04:48,940
Tienes que estar comunicado el cliente con el servidor y siempre notificar, avisar.

66
00:04:49,060 --> 00:04:55,600
Ante cualquier cambio nos vamos a cliente component y acá tenemos que cambiar, tenemos que modificar

67
00:04:56,020 --> 00:05:02,980
y acá tenemos que suscribir o registrar el observador a nuestros clientes, que sería el observable.

68
00:05:03,410 --> 00:05:07,780
Bien, entonces esto ya no va, se tiene que mover, se tienen que quitar de acá.

69
00:05:08,050 --> 00:05:10,840
Y qué clientes es un observable?

70
00:05:10,990 --> 00:05:13,210
Va a ser observado por observadores.

71
00:05:13,360 --> 00:05:20,830
Entonces la idea es subscribir, acá tenemos que suscribir y dentro de este método el observador justamente

72
00:05:20,830 --> 00:05:27,640
sería asignar en el atributo clientes el valor que se está recibiendo desde el cliente service, que

73
00:05:27,640 --> 00:05:30,400
sería el listado de clientes con los cambios.

74
00:05:30,610 --> 00:05:37,000
Entonces acá tenemos una función anónima nuestro Salvador, que se encarga de asignar el valor al cliente

75
00:05:37,000 --> 00:05:42,610
componente clientes, que sería nuestro argumento el resultado del stream.

76
00:05:43,950 --> 00:05:51,920
Vamos a asignar este parámetro clientes a 10 clientes, clientes y eso sería todo.

77
00:05:52,530 --> 00:05:57,960
Este sería nuestro observador, por lo tanto, actualiza el listado de clientes del cliente componen

78
00:05:58,050 --> 00:06:01,740
y eso se pasa a la plantilla a la vista con los posibles cambios.

79
00:06:02,370 --> 00:06:03,540
Esto es una función anónima.

80
00:06:03,720 --> 00:06:08,280
Esto es una forma que tiene de script para simplificar las funciones.

81
00:06:08,310 --> 00:06:10,350
Anónima o arrow o de flecha.

82
00:06:10,400 --> 00:06:13,590
Entonces, justamente esto son los argumentos.

83
00:06:13,710 --> 00:06:16,860
Acá se podría incluso pasar con. con paréntesis.

84
00:06:17,190 --> 00:06:19,980
Y acá se puede pasar la función anónima con las llaves.

85
00:06:21,690 --> 00:06:23,190
Se fijan exactamente lo mismo.

86
00:06:24,090 --> 00:06:26,460
Incluso podríamos quitar esto.

87
00:06:27,990 --> 00:06:36,290
Y que colocamos Funchal, exactamente lo mismo Antxón estábamos pasando los clientes, que sería el

88
00:06:36,290 --> 00:06:42,440
resultado del streams convertido a un listado de cliente y seleccionamos al atributo clientes.

89
00:06:42,500 --> 00:06:49,280
Entonces esto mismo se puede simplificar en ti scrip de esta forma y usamos la llave cuando tenemos

90
00:06:49,370 --> 00:06:50,510
más de una línea código.

91
00:06:50,570 --> 00:06:57,200
Pero en este caso, como es una sola línea de código, la podemos omitir y quería simplemente de esa

92
00:06:57,200 --> 00:06:57,500
forma.

93
00:06:57,710 --> 00:07:03,260
Usemos paréntesis cuando tiene más de un argumento cuando estamos pasando más de un parámetro al método

94
00:07:03,350 --> 00:07:04,160
o a la función anónima.

95
00:07:04,430 --> 00:07:06,020
En este caso es uno solo.

96
00:07:06,440 --> 00:07:11,970
Por lo tanto, también se puede omitir y queda muy simplificado que muy fácil de entender.

97
00:07:12,050 --> 00:07:18,110
Entonces, esto sería el concepto de los herbales que sería nuestro cliente, el observador que se suscribe

98
00:07:18,290 --> 00:07:21,800
y actualiza el listado de cliente en nuestra aplicación angular.

99
00:07:21,980 --> 00:07:22,670
Eso sería todo.

100
00:07:22,790 --> 00:07:28,100
Vamos a guardar y también guardamos el cliente servis y vamos a levantar el servidor.

101
00:07:32,630 --> 00:07:38,000
Ok, y acá tenemos el ejemplo funcionando igual que siempre, pero de una forma más reactiva.

102
00:07:38,120 --> 00:07:43,280
A pesar de que estamos utilizando datos falsos que no provienen de una API Rest, sino que están dentro

103
00:07:43,280 --> 00:07:45,620
de un archivo en clientes.

104
00:07:45,620 --> 00:07:49,190
Yeison Ejemplos de pruebas son datos estáticos, falsos.

105
00:07:49,220 --> 00:07:54,560
Pero estamos preparando nuestra aplicación para que después, cuando la modifiquemos y realmente tengamos

106
00:07:54,650 --> 00:08:00,410
el API Rest implementado con Spring, ya tengamos gran parte avanzada en nuestro cliente con Angular

107
00:08:00,500 --> 00:08:04,040
y esté trabajando de forma reactiva y asíncrona.

108
00:08:04,310 --> 00:08:10,550
Bien, espero que haya quedado un poco más claro el concepto de programación reactiva dentro de Angular

109
00:08:10,640 --> 00:08:13,800
y su implementación utilizando el API observable.

110
00:08:13,910 --> 00:08:17,120
Quedamos hasta acá y cualquier duda que tengan la revisamos.

111
00:08:17,210 --> 00:08:18,050
Hasta la próxima.