¿Qué vamos a hacer?

Bien , en la lección de hoy nos vamos a centrar en un uso real de un servicio. Concretamente en como consumir una API situada en un servido y que podría ser desarrollada con muchos lenguajes de Back End, entre ellos por ejemplo Spring Boot de Java, PHP, node, etc.

Una API (o Application Programming Interfaces), permite la comunicación de datos dos aplicaciones en este caso nuestra aplicación de Angular y una aplicación de Back End desarrollada en Spring Boot, PHP, node, etc.

La API de Back End nos servirá/proporcionará información y nuestra aplicación de Angular extraerá/presentará dicha información de forma visual.

Para consumir una API, aunque podemos crearla nosotros mismos, eso supondría mucha faena y explicar muchos conceptos y todo ello no es necesario, ya que podemos conectarnos a una alojada en internet como por ejemplo la que nos ofrece {JSON} Placeholder

Si bajamos, llegamos a resource donde tenemos unos ends points (puntos de acceso) a determinados puntos de nuestra API:

Un ejemplo podría ser el que vamos a consumir que será el /users (que tiene un listado de 10 usuarios) si clicamos en el podemos verlos:

Implementando el Life Cicle Hooks implements OnInit

Para ello, partiremos de una estructura inicial de un proyecto de Angular(creada con ng new). Primeramente, vamos a ir a nuestro componente app.component.ts y vamos a implementar la interfaz de OnInit.

OnInit no es nada más y nada menos que una función que forma parte del Life Cicle Hooks (ciclo de vida).

Hay que recordar que el Life Cicle Hooks es un conjunto de métodos que nos brindan visibilidad de los diferentes momentos de la vida de nuestro componente. Cada uno de estos métodos nos ofrecen la capacidad de actuar cuando ya ha ocurrido una determinada fase por ejemplo ngOnInit es el método que nos permitirá interaccionar con el componente una vez se ha inicializado dicho componente.

El conjunto de métodos que tenemos dentro del ciclo de vida son:

Si nos fijamos hemos implementado la interfaz OnInit y nos ha generado un error que nos indica que la interfaz no está bien implementada ya que falta el método ngOnInit que es el método que se ejecutará cuando definimos :

Cuando implementamos una interfaz sobre una clase obligamos a dicha clase a tener definidos todos los métodos de dicha interfaz.

De hecho, si vamos a Go to Definition:

Podemos ver que nos aparece solamente un método, el mismo que nos arrojaba el error anterior.

Esto lo podemos solucionar simplemente añadiendo el método ngOnInit a nuestra clase de la siguiente manera:

Si ahora ejecutamos nuestra aplicación y miramos la consola podemos ver que primero se construye nuestra clase y luego se inicializa el componente:

De hecho, la interfaz no es obligatoria pero si más que recomendable. Muestra de ello es que si eliminamos el implements OnInit, nos mostrará una advertencia (no es un error ya que con un error no ejecuta y con una advertencia si) donde nos indica que estamos usando ngOnInit y que se recomienda el implementar a su interfaz. Por lo que dejamos el implements puesto.

Creando el servicio y conectándolo con la aplicación y preparando el entorno para consumir la API

Bien, vamos a crear el servicio, para ello, es importante que utilicemos un nombre que sea descriptivo. Como vamos a utilizar el End Point de users, vamos a llamar a nuestro servicio users.

Para conectarnos a una API, necesitamos crear un servicio mediante al cual nos conectaremos al servidor que contiene dicha API vía HTTP. Como no vamos a realizar test añadiremos –skip-tests en la creación del servicio con la fin de crear un archivo de users.service.spec.ts:

Una vez creado dicho servicio y para poder conectar con el servidor que aloja dicha API, necesitamos inyectar sobre nuestro servicio UserService otro servicio llamado HTTP Client

Además de ello, vamos a conectar el servicio de userService (que conectará con la API) con nuestro componente con el fin de poder consumir nuestra API desde nuestro componente. Para ello:

Cuando arrancamos la app y hacemos un cambio importante como añadir un módulo o cosas así (que son bastante importantes para la aplicación), se aconseja para garantizar al 100 % su correcto funcionamiento el parar y volver a arrancar nuestra aplicación de Angular

Si recargamos la página podemos ver que se nos genera un error por la consola del navegador:

Este error, se produce debido a que para poder conectar nuestra API con nuestro servicio además tendremos que importar HTTPClientModule dentro del módulo, en nuestro caso, app.module.ts. Para ello realizamos lo siguiente:

Si ahora volvemos a recargar nuestra aplicación vemos que ese mensaje a desaparecido, esto es buena señal:

Esto es buena señal, de hecho en el console del browser, podemos ver que primero se inyecta el servicio HTTP, y posteriormente se crea el componente mediante al constructor y finalmente se inicializa.

Conectando el servicio con la API

Para conectar la API utilizaremos su ruta http y posteriormente llamaremos a dicha ruta mediante a un observable (que no es nada más y nada menos que una función asíncrona) que nos permitirá obtener/extraer la respuesta de dicha API.

Si vamos al navegador y abrimos la consola, podemos ver que se nos muestra correctamente:

De hecho, si queremos obtener más información sobre nuestra llamada a la API podemos ir a Network y concretamente a la petición users:

Si nos fijamos aparecen varios datos sobre los que destacan la ruta sobre la que realizamos la petición. El tipo de método GET, POST, PUT, DELETE, etc. Y el Status code, en este caso el 200 que significa que la petición se ha  realizado se ha podido responder correctamente (con éxito).

Guardando y mostrando los datos obtenidos de la API

Bien, una vez creado el servicio y consumido por la consola. Para poder guardarlo desde nuestra línea de comandos necesitamos crear una variable dentro de nuestra clase sobre la que asignaremos desde el método ngOnInit una vez se inicialice nuestro componente los datos obtenidos de la llamada a la api.

Finalmente, consumimos la api haciendo un ngFor para cada uno de los elementos/objetos que obtenemos al hacer la llamada:

El resultado será el siguiente:

Si nos fijamos, solamente, hemos llamado al nombre de dicho objeto. Podríamos mapearlo al completo de forma manual de la siguiente manera:

El resultado de realizar ahora la petición será los 10 usuarios con toda su información separada por una barra debido a que hemos añadido el comando <BR>:

En futuras clases, veremos otras maneras de hacer el mapeo (pasar la información del TS a nuestra vista) de una forma más sencilla. Espero que os haya gustado, un saludo y hasta la próxima 😉