Desafío #5: 🔮 de Cristal

¿no sería muy divertido poder saber el futuro?, tener esas respuestas sobre el amor, amigos, familia, ¡estar un paso adelante de lo que viene!

¡¡Juguemos un poco con eso!! Hoy tu crearás una aplicación que responderá preguntas cuya respuesta quepa en un Si o en un No. ¿cómo hacemos esto?, utilizaremos una API de https://yesno.wtf la cual nos devolverá un array con la respuesta, mas un divertido gif.

Ya conociste los elementos input y los elementos botón! ahora vamos a hacer llamados Http utilizando los conocimientos que hemos aprendido 💪

Paso #1 🎬

Vamos a preparar nuestra aplicación para hacer llamados Http, para esto debemos de hacer el import de HttpClientModule dentro de app.module.ts y esa importación la adicionamos en imports y listo!, nuestro sistema está preparado para realizar llamados a cualquier API. ¿quieres profundizar este tema en tu tiempo libre?, dale click aquí

En el archivo app.module.ts debajo del 'BrowserModule' incluye la siguiente línea:

import { HttpClientModule } from '@angular/common/http';

En el @NgModule en los imports, incluye el 'HttpClientModule', te quedara algo como lo siguiente:

@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],

Paso #2 👩‍🏫

Ahora vamos a crear en nuestra estructura de archivos, un servicio que se encargue de almacenar toda la lógica de llamados a nuestra API; ¿dónde ubicamos este archivo?, crearemos una carpeta que se llame services, y un archivo llamado answer.service.ts

Paso #3 🏎

Tendremos que preparar nuestra aplicación para realizar los llamados a través de este servicio, ¿cómo le decimos a nuestra aplicación que utilice este servicio?, exactamente como estás pensando, así como preparamos la aplicación para hacer llamados http en el paso 1 modificando el archivo app.module.ts, solamente tenemos que importar nuestro servicio allí y adicionarlo como un provider, y listo!.

Paso #4 🤽‍♀️

Ok, ya tenemos nuestra aplicación lista para realizar nuestros llamados, ahora, ¿Qué necesita nuestro servicio para traer nuestras respuestas?, solamente debemos incluir imports básicos para que nuestro servicio funcione correctamente, una función Get() que será la encargada de hacer la petición y si deseas, puedes crear una función para controlar si algo no funciona bien, por ejm se cayó nuestra API, y darnos cuenta que paso.¿quieres profundizar este tema en tu tiempo libre?, dale click aquí

Paso #5 🔎

Ahora en un archivo en el que estamos familiarizados de editar app.component.ts, vamos a incluir nuestro servicio; Vamos a adicionarlo con un import y vamos a hacer uso de él por medio de su referencia dentro de la función constructor, y finalmente vamos a incluir una función llamada answerQuestion() que va a ser la función encargada de dispararme el llamado a mi API y recibir el resultado.

Paso #6 📽

¿Y después de tener la respuesta como la visualizamos en nuestra aplicació?

Vamos a tener una estructura de respuesta así:

{"answer":"yes","forced":false,"image":"https://yesno.wtf/assets/yes/8-2f93962e2ab24427df8589131da01a4d.gif"}

Tomamos la variable result de nuestro código y utilizando data binding, (sí, ya sé que ya conoces esto 😉), vamos a setear los valores del resultado en nuestra template, desde el archivo app.component.ts y si deseas modificar la forma en la que se visualiza el texto de respuesta simplemente utilizamos pipes.

!!Felicitaciones!! Ya tienes una aplicación muy ingeniosa y divertida para compartir con tus amigos.

Lo lograste 💪

Puedes revisar la solución aquí 👇

Has completado el desafío #5, ahora vamos a el desafío #6 👇