Consumiendo una API desde un servicio en Angular

¿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 😉

25 comentarios

  1. Ahaa, its good dialogue on the topic of this paragraph at this place at this website,
    I have read all that, so now me also commenting
    here.

  2. I was able to find good info from your blog posts.

  3. I loved as much as you will receive carried out right
    here. The sketch is tasteful, your authored material stylish.
    nonetheless, you command get bought an impatience over that you wish be delivering the following.
    unwell unquestionably come further formerly again as exactly
    the same nearly very often inside case you shield this increase.

  4. Hello There. I found your weblog the use of msn. That is a really neatly written article.
    I’ll make sure to bookmark it and come back to learn more of your useful info.
    Thank you for the post. I will certainly comeback.

    my web page … Nature Fused Cream Reviews

  5. When I originally commented I seem to have clicked on the -Notify
    me when new comments are added- checkbox and now every time a comment is added I
    get four emails with the exact same comment. Perhaps there is a way you can remove
    me from that service? Thank you!

  6. You really make it appear so easy along with your presentation however
    I to find this topic to be actually one thing which I think I might never understand.
    It seems too complicated and very huge for me.
    I’m taking a look forward in your subsequent put up, I will try to get the dangle of it!

  7. I like this weblog it’s a master piece! Glad I detected this
    on google.

    my web page: Niva CBD Gummies Reviews (librarius.main.jp)

  8. dự án Căn hộ chung cư Empire City quận 2
    khi là khu liên hợp với địa điểm độc đắc
    ngay khu đô thị mới Thủ Thiêm và mặt tiền con sông
    thành phố Hồ Chí Minh. dự án công trình gồm khối tháp 88
    lầu, khu hotel 5 sao, mua sắm, trung tâm công sở, Căn hộ cao cấp cũng như Nhà Đất dịch vụ thương mại.
    Empire City Q.2 đc phát triển như một thành phố
    trong trái tim TP. Hồ Chí Minh, mang tới cho cư dân một không gian sống, làm công việc cùng thư giãn hoàn hảo nhất.

    phân khúc thanh toán Căn hộ chung cư Empire City Q.2 rất đầy đủ cùng với chính sách thanh toán giao
    dịch linh hoạt. dự án công trình được chia làm khá nhiều mùa thanh toán,
    với quy trình giao dịch thanh toán giãn rộng
    lớn giúp đỡ khách hàng có thể công ty động được dòng tiền cũng như
    theo sát update tiến độ dự án công trình. dự án Empire City Q.2 còn đc ngân hàng giúp đỡ vay vốn lên đến 70% giá trị Dự án căn hộ,
    hỗ trợ người sử dụng đang mong muốn trả góp.

  9. If you wish for to grow your know-how just keep visiting
    this site and be updated with the newest news posted here.

    Take a look at my web-site; Arctos Portable AC

  10. Thank you for some other excellent article. The place else may anybody
    get that type of information in such an ideal method of
    writing? I have a presentation next week, and I am on the look for such
    information.

    Here is my homepage … Pure Keto Burn Review

  11. I have read so many articles or reviews on the topic of the blogger
    lovers except this paragraph is genuinely a good paragraph, keep it
    up.

  12. I was just seeking this info for some time. After 6 hours of continuous Googleing, finally I got it in your web site.
    I wonder what is the lack of Google strategy that don’t rank this kind of informative websites in top of the list.
    Usually the top sites are full of garbage.

    Visit my blog – Insights CBD

  13. We are a group of volunteers and starting a brand new scheme in our community.
    Your website provided us with useful information to
    paintings on. You have performed a formidable task and our whole neighborhood shall be thankful to you.

    Here is my web-site :: TetraMale

  14. Excellent read, I just passed this onto a colleague who was doing a little research on that.
    And he actually bought me lunch since I found it
    for him smile So let me rephrase that: Thank you for lunch!

    Look at my page: Wawza Apple Cider Vinegar

  15. Right here is the right web site for everyone who hopes to understand this topic.
    You know so much its almost tough to argue with you (not that I really would want to…HaHa).
    You certainly put a brand new spin on a topic which has been written about for a long time.
    Excellent stuff, just wonderful!

    Take a look at my page – Alpha Edge

  16. I read this post completely on the topic of the difference of newest and previous
    technologies, it’s amazing article.

  17. of course like your web site but you have to check the spelling on quite a few
    of your posts. Many of them are rife with spelling issues and I find it very
    bothersome to tell the reality on the other hand I’ll certainly come back again.

  18. I’m extremely impressed along with your writing skills as smartly as
    with the structure to your blog. Is that this a paid subject or did you customize it your
    self? Anyway stay up the nice quality writing, it’s uncommon to
    look a nice blog like this one today..

  19. wonderful post, very informative. I ponder why the other experts of this sector do not realize this.

    You must continue your writing. I’m sure, you have a
    great readers’ base already!

  20. Yesterday, while I was at work, my cousin stole my iphone and tested to see if it can survive a 40 foot drop, just so she can be a youtube sensation.
    My iPad is now destroyed and she has 83 views. I know this is totally off topic but I had to share it with someone!

  21. Pretty nice post. I simply stumbled upon your weblog and wished to mention that I
    have really loved surfing around your blog posts. In any case I
    will be subscribing to your feed and I hope you write again soon!

    My blog: Rapid Fire Keto Reviews

  22. A motivating discussion is definitely worth comment.
    I do think that you ought to write more on this subject matter, it may not be a taboo subject but typically folks don’t talk about such issues.
    To the next! All the best!! cheap flights http://1704milesapart.tumblr.com/ cheap
    flights

  23. naturally like your website however you have to test the
    spelling on several of your posts. Several of them are rife with spelling issues and I in finding it very troublesome to inform the reality however I’ll definitely come again again. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar