LAB | People in Space

Introduction

¿Sabes que en este momento hay gente en el espacio? ¿sabes quiénes son? ¿y que hay una API para averiguar esta información?

La idea de este ejercicio es crear una página web simple que obtenga información de dos API diferentes, cruce la misma, y devuelva información sobre quiénes están fuera de nuestro planeta actualmente.

Adicionalmente, la idea es practicar las llamadas a API tanto con promises como con async/await (cada una en un fichero separado)

Para este ejercicio estaremos utilizando dos API:

Comenzamos con un fichero index.html (no es necesario modificarlo salvo para comentar el script que utilizaremos), y los dos ficheros en donde escribiremos nuestro código (async-await.js y promises.js).

(El HTML tiene sólo un h1 y un button que utilizaremos luego para llamar a la función que aún debemos escribir)

Iteración 1

Para comenzar (y para facilitar las cosas) debemos declarar variables para utilizar los endpoints de las dos API que mencionamos anteriormente:

/* endpoints */

const astroUrl = "http://api.open-notify.org/astros.json";
const wikiUrl = "https://en.wikipedia.org/api/rest_v1/page/summary/";

...y debemos declarar una función que:

haga una llamada a la API de People in Space (astrosUrl, en este ejemplo). Este endpoint de la API devolverá un JSON con la siguiente estructura:

(modelo del JSON que devuelve la API)
utilizar lo que devuelve esa primer llamada como parte del argumento de la segunda llamada a la api de Wiki (wikiUrl, en este ejemplo). Es decir, utilizaremos las respuestas (los nombres de quienes estén en el espacio) para realizar la búsqueda en la API de Wiki, y devolver la información respectiva. El endpoint espera una estructura de url de este tipo:
```
"https://en.wikipedia.org/api/rest_v1/page/summary/<STRING-ARGUMENTO-DE-LA-BUSQUEDA>";
```
(modelo de JSON que devuelve la API)
devolver finalmente un objeto con la información recabada en ambas llamadas.

Iteración 2

Con el objeto listo, vamos a plasmar esta información en nuestra web.

Debemos crear una función que genere los elementos HTML necesarios para mostrarlo en nuestro index.html.

Para cada resultado, la estructura deberá ser:

/* index.html */

<div id='people'>
    /*...*/

    <section>
        <span> <nombre-del-craft> </span>
        <h2> <nombre-de-la-persona> </h2>
        <img src= <source-de-la-imagen> />
        <p> <descripción> </p>
        <p> <extract> /p>
    </section>

	/*...*/
</div>

Iteración 3

Ya tenemos la función que hace la llamada, y también la que nos genera los elementos HTML a partir de esa respuesta pero... ¿quién llama a la función inicial?

Recordemos que tenemos un button en nuestro fichero index.html pendiente de utilizarlo, por lo que lo utilizaremos para captar el evento "click", y así llamar a nuestra función inicial.

Bonus | Iteración 4

Puede que hayas escrito las llamadas a las API utilizando promises, puede que lo hayas hecho con async/await. Practiquemos.

Reescribe el código en los ficheros correspondientes (async-await.js y promises.js, respectivamente), y prueba que el resultado sea el mismo comentando la línea correspondiente en index.html.

/* index.html */

<body>

    /*...*/

    <!-- Descomentar el fichero que no utilizareis -->

    <script src="promises.js"></script>
	<!-- <script src="async-await.js"></script> -->

</body>