#100DaysOfCode _ #Day61
Creando una aplicación de turismo mediante API’s (I)
Este fin de semana, después de repasar las promesas, he puesto el foco en las peticiones HTTP.
Ya trabajé con este tipo de peticiones al aprender React, e hice referencia de su uso práctico en las entradas del Día 44 y la del Día 47. Te interesa echarle un ojo a ambos artículos para ver cómo las usaba.
Principalmente he trabajado con peticiones tipo GET (tomar datos del servidor) y peticiones tipo POST (enviar datos específicos para almacenar/ procesar en el servidor).
Hoy me voy a la parte más práctica y me voy a centrar en uno de los ejercicios prácticos sobre esta sección en CodeCademy.
Por cierto, dejo los recursos utilizados y fuentes consultadas en la parte inferior de la publicación, como siempre.
¡Vamos allá!
La propuesta del ejercicio es usar lo aprendido de peticiones HTTP y promesas (mediante async…await) para crear una web de viajes que recoja datos de las API’s FourSquareAPI y OpenWatherAPI y muestre en pantalla, después de lanzar una búsqueda, el tiempo local de la ciudad seleccionada y los X lugares más interesantes a visitar (siendo X variable).
Tras el registro correspondiente en las dos API’s, he recogido los datos necesarios de las mismas y los he asignado a variables de mi código (código de usuario, API call, API key …), siguiendo los manuales de ambas aplicaciones:
Manual OpenWeather
Manual FourSquare
https://developer.foursquare.com/docs/api/venues/explore
El primer paso ha sido hacer la petición tipo GET a la API fourSquare para obtener un listado de lugares interesantes a visitar (genéricos).
La variable “city” es la que se obtiene mediante el input de la interfaz de usuario, el resto son variables almacenadas procedentes de la propia API (clientId, clientSecret) y el “endpoint” es lo que llamaríamos “parte fija” de la url mediante la cual se hace la petición, indicada en el manual de la misma.
Chequeando el output de la consola (response.url) obtenemos una url que nos lleva al objeto que almacena los diferentes sitios:
Convertimos dicho objeto en un JSON y accedemos al listado de lugares, que es realmente lo que nos interesa:
Dentro de este objeto es el array contenido dentro de la propiedad venue el que vamos a devolver al usuario, así que simplemente pasamos un “mapeo” por el array de la siguiente forma:
Y ahora sí que hemos obtenido los items que queremos volcar en la interfaz de usuario:
Ojo, esto ya no es de Madrid, ahora estoy probando con las atracciones turísticas de “Benidorm” (no me juzguen por ello…)
Como no quiero que quede demasiado larga la entrada, y prefiero terminar de chequear el ejercicio y darle mi “toque personal” antes de comentar el resultado final, lo dejo de momento aquí.
En la siguiente entrada terminaré de hacer las peticiones a la API OpenWather y mostraré los datos en la pantalla tal y como se ha visto en el ejemplo de arriba.
Keep Coding!
