1
00:00:00,150 --> 00:00:03,000
Por fin vamos a conectar nuestras dos aplicaciones.

2
00:00:03,060 --> 00:00:09,630
Por una parte tenemos el API Pokken construida con Spring y por otra parte tenemos nuestro front end

3
00:00:09,720 --> 00:00:10,230
con Angular.

4
00:00:10,300 --> 00:00:16,620
Entonces la idea es conectar ambas aplicaciones para que el servidor en la red pueda pasar los datos

5
00:00:16,680 --> 00:00:19,680
a nuestro cliente y el cliente trabajar con esos datos.

6
00:00:19,830 --> 00:00:25,440
Lo primero, nos vamos a ir al módulo config de nuestra aplicación.

7
00:00:27,100 --> 00:00:33,910
Y acá tenemos que agregar el módulo http client, el cual no permite justamente en nuestra clase servis

8
00:00:33,970 --> 00:00:36,620
poder conectarnos con el servidor.

9
00:00:36,760 --> 00:00:43,570
Entonces el http client es el mecanismo, el componente que tiene angular para la comunicación con el

10
00:00:43,570 --> 00:00:49,150
servidor remoto a través de peticiones http con los diferentes verbos.

11
00:00:49,270 --> 00:00:54,550
Una petición del tipo GET del tipo post, del tipo put y del tipo delito.

12
00:00:54,640 --> 00:00:58,390
Con estos cuatro verbos tenemos una epping red full completo.

13
00:00:58,540 --> 00:01:05,200
Entonces vamos a importar la clase http client module

14
00:01:08,620 --> 00:01:11,350
from angular common http.

15
00:01:15,550 --> 00:01:21,880
Una vez que lo tenemos importado, el siguiente paso sería agregar y registrar este módulo en import.

16
00:01:22,300 --> 00:01:29,800
Entonces simplemente debajo de browser podemos colocar http client module y una coma.

17
00:01:30,010 --> 00:01:30,580
Perfecto.

18
00:01:30,670 --> 00:01:36,970
Ya con eso tenemos configurado y registrado el módulo http client para que lo podamos utilizar en la

19
00:01:36,970 --> 00:01:37,750
clase service.

20
00:01:37,900 --> 00:01:44,590
Ahora nos vamos a la clase cliente series y acá tenemos que modificar modificar esta clase para que

21
00:01:44,590 --> 00:01:53,830
en vez de entregar o retornar un lista de objetos cliente de forma estática, lo haga a través de forma

22
00:01:53,920 --> 00:01:55,240
remota en el servidor.

23
00:01:57,850 --> 00:02:07,230
Entonces lo primero es importar la clase http client from angular common http

24
00:02:10,120 --> 00:02:10,660
perfecto.

25
00:02:10,750 --> 00:02:11,390
Ahí estamos.

26
00:02:11,470 --> 00:02:12,000
Okay.

27
00:02:12,250 --> 00:02:17,140
Para trabajar con http entonces ahora tenemos que inyectar este objeto, esta dependencia.

28
00:02:17,230 --> 00:02:19,720
El objeto http vía constructor.

29
00:02:19,850 --> 00:02:27,730
Entonces acá tenemos un privat http 2.ª que sería el tipo http client.

30
00:02:27,820 --> 00:02:30,370
Y con eso inyectamos una referencia.

31
00:02:30,460 --> 00:02:35,290
Y además la variable http queda definida como una variable de la clase.

32
00:02:35,440 --> 00:02:41,020
Recuerden que si colocamos el modificador en el constructor y cuando realizamos inyección de dependencia

33
00:02:41,110 --> 00:02:45,880
sería lo mismo que definir un private http como un atributo de la clase.

34
00:02:46,030 --> 00:02:47,620
Es una forma más rápida.

35
00:02:47,710 --> 00:02:52,840
Luego esto lo podemos comentar porque lo tenemos que modificar y acá vamos a retornar.

36
00:02:53,430 --> 00:02:53,920
10.

37
00:02:54,160 --> 00:02:58,330
Ya que su atributo http punto.

38
00:02:58,420 --> 00:02:59,290
El verbo.

39
00:02:59,410 --> 00:03:00,280
El tipo de petición.

40
00:03:00,370 --> 00:03:02,430
En este caso va a ser un tipo get.

41
00:03:03,220 --> 00:03:04,930
Y acá tiene que ir la jureles.

42
00:03:05,200 --> 00:03:11,010
Entonces el siguiente paso es definir cuál es nuestra vgl nuestro en point.

43
00:03:11,680 --> 00:03:18,040
La vamos a definir como un atributo de la clase Private o RL en Point.

44
00:03:19,270 --> 00:03:31,900
Incluso le podríamos llamar VLM Point en vez de VL del tipo String igual http 2.c4 larch localhost 2.En

45
00:03:32,800 --> 00:03:38,020
el puerto en el que está el servidor de Spring Larch y la VL.

46
00:03:38,110 --> 00:03:43,840
Recuerden que tenemos como primer nivel API y como segundo nivel clientes.

47
00:03:44,950 --> 00:03:51,130
Entonces justamente esta Aurélie es la que vamos a utilizar acá, pero acá con This de que es un atributo

48
00:03:53,020 --> 00:04:00,490
y acá tenemos que convertir este resultado de que nos retorna un observable de un tipo Henny, de un

49
00:04:00,490 --> 00:04:01,480
tipo genérico.

50
00:04:01,600 --> 00:04:05,200
Entonces hay que hacer un cast para que sea del tipo cliente.

51
00:04:05,320 --> 00:04:11,770
Entonces acá en el get simplemente indicamos con el signo mayor menor o las llaves triangulares.

52
00:04:11,860 --> 00:04:17,590
El tipo de dato cliente muy parecido a como lo hacemos en Java y ahí tenemos implementado la lógica

53
00:04:17,680 --> 00:04:24,340
para consumir el servicio en nuestro cliente en nuestra aplicación con Angular utilizando http client.

54
00:04:24,490 --> 00:04:31,150
El objeto http y el método GET siempre va a retornar un objeto del tipo observable.

55
00:04:31,300 --> 00:04:37,360
Por lo tanto, dentro de la promesa en el cuerpo de respuesta va a devolver un objeto del tipo Yeison

56
00:04:37,660 --> 00:04:40,090
por defecto sin tipo un tipo Henny.

57
00:04:40,120 --> 00:04:44,110
Entonces, justamente con esto, lo que hacemos es convertir o hacemos un cast.

58
00:04:44,200 --> 00:04:45,010
Esto sería una forma.

59
00:04:45,100 --> 00:04:53,680
Otra forma es a través del operador MAP que también nos permite convertir el tipo JSON dentro de la

60
00:04:53,680 --> 00:04:58,390
promesa y se convierte o se castellá al tipo del objeto.

61
00:04:58,570 --> 00:04:59,620
Por ejemplo, cliente.

62
00:05:00,220 --> 00:05:06,520
Esto sería una forma que está absolutamente bien y perfecta y la forma más automática.

63
00:05:06,580 --> 00:05:08,890
Pero también es bueno ver la otra forma.

64
00:05:09,100 --> 00:05:22,180
Entonces la otra forma sería habría que importar el operador map from RX yez reactive hecho en JavaScript,

65
00:05:23,200 --> 00:05:26,340
rx, js o.

66
00:05:26,610 --> 00:05:29,250
Hathors en minúscula y eso sería todo.

67
00:05:30,000 --> 00:05:37,230
Entonces, ya con este operador acá incluso podríamos quitar este este tipo acá marca el error, pero

68
00:05:37,230 --> 00:05:43,660
acá vamos a invocar el método Pipe que nos permite, que nos permite agregar más operadores.

69
00:05:43,740 --> 00:05:50,370
Por ejemplo, acá tenemos el MAP y acá convertimos el respondés que sería la respuesta.

70
00:05:51,300 --> 00:06:00,090
La vamos a convertir a un listado de clientes response as cliente y cliente.

71
00:06:00,210 --> 00:06:02,490
Con los corchetes ya sería otra forma.

72
00:06:02,610 --> 00:06:10,020
Entonces, en resumen, se toma la repuesta que viene en un formato JSON en tipo de datos genérico.

73
00:06:10,330 --> 00:06:17,340
Es un tipo Henny y acá tomamos esta variable, este parámetro response y lo castigamos, lo convertimos

74
00:06:17,490 --> 00:06:19,740
a un listado, a un arreglo de cliente.

75
00:06:19,830 --> 00:06:23,340
Recuerden que esto es exactamente muy parecido.

76
00:06:23,490 --> 00:06:30,750
Esto sería una estructura, una función con forma de flecha que para simplificar, implementado la forma

77
00:06:30,750 --> 00:06:31,830
para crear funciones.

78
00:06:31,890 --> 00:06:40,920
Anónima en el que Max Script 6 en la versión 6 de JavaScript sería equivalente a decir que es un Phantom

79
00:06:43,200 --> 00:06:46,290
y en vez de la flecha sería las llaves.

80
00:06:49,320 --> 00:06:50,530
Y acá sería un retorno.

81
00:06:52,060 --> 00:06:53,350
Entonces sería un chón.

82
00:06:53,590 --> 00:06:59,170
Pasamos el objeto y retornamos la respuesta como un listado de clientes.

83
00:06:59,380 --> 00:07:07,390
Sería exactamente lo mismo, pero como estamos usando this scrip, es mejor utilizar la forma de Arrufat.

84
00:07:07,540 --> 00:07:08,710
Bien, ya teníamos.

85
00:07:08,710 --> 00:07:10,060
Ok, vamos a guardar.

86
00:07:11,190 --> 00:07:13,770
También vamos a guardar el app Motul.

87
00:07:15,070 --> 00:07:19,920
Íbamos a levantar el servicio de Sprint, así que nos vamos a Eclipse.

88
00:07:23,010 --> 00:07:27,420
Y sobre el proyecto vamos a levantar con click derecho.

89
00:07:29,700 --> 00:07:30,540
Rahn, AZ.

90
00:07:31,850 --> 00:07:32,620
Es bootcamp.

91
00:07:43,340 --> 00:07:50,240
Bien, y un adelantado servidor volvemos Angular y acá también tenemos que levantar el servidor, el

92
00:07:50,240 --> 00:07:51,410
servidor de desarrollo.

93
00:07:51,460 --> 00:07:52,580
Entonces, como siempre.

94
00:07:53,950 --> 00:07:59,470
En ti ser menos o levantamos el servidor.

95
00:07:59,560 --> 00:08:01,060
Desarrollo de angula.

96
00:08:04,920 --> 00:08:10,110
Y vamos al navegador y tenemos cargado todos los clientes de Sprint.

97
00:08:10,770 --> 00:08:16,530
Respecto a este warning, este warning no hay ningún problema, solo que tengo instalado el angular

98
00:08:16,590 --> 00:08:24,330
si elige globalmente la última versión y en el proyecto tengo una versión un poco más, una más anterior.

99
00:08:24,810 --> 00:08:32,340
Vamos a modificar el guet clientes en la clase service y lo vamos a dejar sin el map para que vean la

100
00:08:32,340 --> 00:08:32,880
diferencia.

101
00:08:32,980 --> 00:08:34,320
Entonces quitan el pipe.

102
00:08:35,840 --> 00:08:38,000
Quitan el PIB, recuerden hacer el cast.

103
00:08:38,060 --> 00:08:40,460
Acá tenemos que hacer el cast de cliente.

104
00:08:45,130 --> 00:08:51,280
Guardamos hoy se actualizó y si volvemos a cliente sigue funcionando sin ningún problema.

105
00:08:51,400 --> 00:08:56,740
El listado cliente y también recuerden siempre tener abierta la consola por si hubiera algún error,

106
00:08:57,460 --> 00:08:58,150
algún problema.

107
00:09:02,990 --> 00:09:07,520
Quedabamos hasta acá y cualquier duda que tengan la revisamos en el foro.

108
00:09:07,580 --> 00:09:15,050
Continuamos después con el CRUD, vamos a crear a través de Angular un formulario y por supuesto todo

109
00:09:15,050 --> 00:09:21,130
el manejo de la lógica negocio a estar en el servidor en el Bitcoin manejado con Spring.

110
00:09:21,230 --> 00:09:26,330
Vamos a hacer el crear, el actualizar y el eliminar para tener el ejemplo completo.

111
00:09:26,420 --> 00:09:27,200
Una API RedBull.

112
00:09:27,410 --> 00:09:28,340
Hasta la próxima.