La semana pasada abordé el proyecto Show the Local Weather de Free Code Camp, que implicaba la creación de una aplicación que mostraba el clima dondequiera que se encontrara el usuario.
Tuve que implementar las siguientes historias de usuario:
- El usuario puede ver el clima en su ubicación actual.
- El usuario puede alternar la unidad de temperatura (Celsius o Fahrenheit).
- El icono del tiempo o la imagen de fondo cambiarán según las condiciones meteorológicas.
Decidí ir un poco más lejos agregando una historia de usuario más
- El usuario puede buscar información meteorológica de otros lugares.
Diseño
Tenía un montón de ideas para el diseño de esta aplicación y miré algunos proyectos completados (sin verificar su código, por supuesto) de la comunidad para ver qué mostraban otras personas en su aplicación y cómo se veía.
Elaborar un diseño final fue un poco complicado, pero me resultó útil decidir los elementos que quería mostrar al usuario y construir a partir de ahí.
Mantener las cosas simples era el objetivo aquí. Decidí mostrar solo la descripción de la temperatura y el clima además de la hora local.
También me gustó el ícono del clima animado en el proyecto de ejemplo y sentí que era una mejor representación del clima actual que una imagen de fondo, así que quería implementarlo en mi aplicación.
Como de costumbre, puse todo en mi Workflowy.
Configurar todo fue bastante sencillo, excepto encontrar un conjunto de iconos animados adecuado. Tuve que buscar un poco antes de encontrar Skycons, que es lo que terminé usando.
La otra cosa con la que luché fue encontrar una buena combinación de colores para la aplicación, y esto es algo con lo que casi siempre lucho. Experimenté con diferentes combinaciones antes de conseguir el producto final.
Lógica
Después de ver una respuesta de API de ejemplo de Open Weather, pensé que necesitaré obtener la longitud y latitud del usuario para poder ofrecer información meteorológica en la carga de la página.
La forma más fácil de hacer esto era usar la API de geolocalización HTML5, que era bastante sencilla, ya se había cubierto en la sección JSON y API del plan de estudios.
Guardé los valores devueltos en variables ya declaradas y las usé para realizar la solicitud AJAX.
if (navigator.geolocation) { //Return the user's longitude and latitude on page load using HTML5 geolocation API window.onload = function () { var currentPosition; function getCurrentLocation (position) { currentPosition = position; latitude = currentPosition.coords.latitude; longitude = currentPosition.coords.longitude; //AJAX request $.getJSON("//api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=******************", function (data) { var rawJson = JSON.stringify(data); var json = JSON.parse(rawJson); updateWeather(json); //Update Weather parameters }); } navigator.geolocation.getCurrentPosition(getCurrentLocation); };La API de Open Weather me brindó una forma de actualizar la ubicación, la temperatura y la descripción del clima, pero aún necesitaba encontrar una manera de actualizar la hora local. Después de buscar un poco, encontré otra API en Geonames.org que se encargó de esto.
$.getJSON('//api.geonames.org/timezoneJSON?lat=' + latitude + '&lng=' + longitude + '&username=ayoisaiah', function(timezone) { var rawTimeZone = JSON.stringify(timezone); var parsedTimeZone = JSON.parse(rawTimeZone); var dateTime = parsedTimeZone.time; timeFull = dateTime.substr(11); $(".local-time").html(timeFull); //Update local time timeHour = dateTime.substr(-5, 2); });Lo último que hice fue actualizar el ícono del clima en las condiciones en la ubicación del usuario o ciudad de interés. Decidí que una buena manera de hacer esto era verificar la descripción del clima y cambiar el ícono en función de eso.
Así que consideré algunos escenarios posibles, como cielo despejado, nubes, nieve, sol, lluvia, etc. y escribí un montón de declaraciones condicionales para verificar si la descripción del clima contenía una de las palabras clave y luego actualizar el ícono del clima.
//Update Weather animation based on the returned weather description var weather = json.weather[0].description; if(weather.indexOf("rain") >= 0) { skycons.set("animated-icon", Skycons.RAIN); } else if (weather.indexOf("sunny") >= 0) { skycons.set("animated-icon", Skycons.CLEAR_DAY); }He descubierto, a través de varias pruebas, que este método no es 100% infalible, pero funcionó lo suficientemente bien como para seguir con él.
Puede consultar el código completo y los efectos en Codepen.
Conclusión clave
Mi principal conclusión de este proyecto es que aprendí cómo acceder a cada parte de los datos JSON devueltos desde la respuesta de la API y usarlos de diferentes maneras. Aunque mi metodología necesita algo de refinamiento, seguramente mejorará con más práctica.
Que sigue…
El siguiente proyecto para mí es la aplicación Wikipedia Viewer. Ya estoy a la mitad mientras escribo este artículo, por lo que debería estar terminado a más tardar el jueves.
Si desea comunicarse conmigo o conectarse conmigo, puede encontrarme en Twitter o enviarme un correo electrónico. Gracias por leer.