widget-meteorologia

Tutorial de cómo construir un widget simple que presente información meteorológica. Usando el lenguaje Javascript, biblioteca jQuery, HTML5, un poco de estilos CSS y la api http://api.wunderground.com.

https://www.wunderground.com/ es una web que ofrece múltiples servicios de meteorología, entre ellos una api para obtener la información meteorológica de un lugar en concreto según las coordenadas de dicho lugar. También devuelve la URL de la imagen relacionada con dichos datos (sol, nubes, etc..)

Para la construcción del mencionado widget he utilizado la conocida biblioteca jQuery de Javascript y Normalize.css para posibilitar una experiencia de usuario similar en distintos navegadores usando los mismos estilos CSS.
También es necesario utilizar la API HTML5 de Geolocalización para obtener las coordenadas.

Nota: Código probado en Firefox, IE y Microsoft Edge.

El código HTML donde se van a mostrar los datos extraídos de la respuesta a la llamada a la API de meteorología es:

 

El código Javascript que posibilita consultar las coordenadas gracias a la API de Geolocalización es:

En el código anterior también se utilizan funciones de los siguientes códigos. Tal y como se explica en los comentarios, el cuadro de información se oculta hasta que los datos son obtenidos mediante la llamada a la función “getCityAndCountry()” que a su vez recuperará, también de la API, los datos climatológicos (función “getWeatherData()”).

Hay que añadir que si la llamada a la API de Geolocalización fallase, los datos se recogen de localStorage si existieran previamente, ya que en cada llamada a dicha API, los datos se almacenan en el navegador.

El código para obtener los datos meteorológicos de la API de https://www.wunderground.com/ es :

Y finalmente hay que mostrar los datos en la caja de contenido HTML destinada a ello:

Como se puede observar, se trata de un código sencillo que obtiene información de distintas API’s y la muestra en pantalla. El código se puede descargar de GitHub.