El día de hoy les traigo un tutorial de como consumir un APi Rest de un weather channel y transformarlo en una app utilizando HTML, CSS y Javascript.
Por acá les dejo el diseño Figma: https://www.figma.com/community/file/971621075801349992
Paso 1: Buscar API de Weather
Debemos buscar la información dinámica de la cual vamos a extraer la información, en este caso un api rest gratis: https://openweathermap.org/
Hacemos el registro de usuario, entramos en el tab API Key y generamos un API.
Nos vamos a documentación y veremos el ejemplo de un API Call, por ejemplo Madrid, para eso debemos conocer la Latitud y Longitud.
https://api.openweathermap.org/data/2.5/weather?q=Madrid&appid={API key}
Deberíamos tener un resultado JSON como este:
Paso 2: Crear contenedor y Css
Una vez tengamos el API Call de la región seleccionada. Abrimos visual Studio o cualquier otro IDE y creamos un div contenedor class=”app”.
De igual forma en el archivo css, copiamos las siguientes líneas de estilo
Tendremos entonces el contenedor de nuestro app
Paso 3: Verificamos el API
Verificamos en la cónsola que esta recibiendo la data a través del API, agregando &units=metric para que lea información en grados centígrados.
Podemos observar como se extrae la data necesaria para llenar nuestro contenedor div. Si queremos obtener algún elemento del JSON, podemos hacerlos utilizando la palabra data y luego el nombre del elemento, por ejemplo name.
data.name
Si queremos obtener la data de un elemento anidado en un array, ejemplo temp, sería
console.log(data.main.temp)
Paso 4: Creamos la Function
Procedemos a crear la función renderWeather
Hacemos un llamado de la function en el then
Paso 5: Código final
Demo
See the Pen Weather App - api.openweathermap.org by Irwin (@irwingb1979) on CodePen.