# Desafío #5: 🔮 de Cristal
¡¡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](https://yesno.wtf/api) 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í](https://angular.io/tutorial/toh-pt6)
En el archivo app.module.ts debajo del '[BrowserModule](https://angular.io/api/platform-browser/BrowserModule)' incluye la siguiente línea:
```
import { HttpClientModule } from '@angular/common/http';
```
En el @[NgModule](https://angular.io/api/core/NgModule) en los [imports](https://angular.io/api/core/NgModule#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í](https://angular.io/tutorial/toh-pt4)
### **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**](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**](https://angular.io/guide/pipes).
**!!Felicitaciones!! Ya tienes una aplicación muy ingeniosa y divertida para compartir con tus amigos.**
## Lo lograste 💪
Puedes revisar la solución aquí 👇
{% embed url="" %}
{% hint style="success" %}
Has completado el **desafío #5**, ahora vamos a el **desafío #6 👇**
{% endhint %}