Hoy te voy a mostrar un sistema web hecho con Angular. Se trata de una app web que muestra el clima a través de una API.

Lo que hace este software es obtener la ubicación del usuario a través de su IP y obtener el pronóstico del tiempo usando otra API a partir de la latitud y longitud obtenidas anteriormente.

Verás que está implementado de una manera muy sencilla utilizando componentes y servicios. Al final vamos a tener una app web que muestra:

• Ubicación del usuario con nombre de la ciudad y país
• Reloj
• Reporte del clima para los próximos 5 días usando imágenes
• La temperatura máxima y mínima esperada para determinado día

Además, la aplicación web será responsiva pues vamos a usar Bootstrap. Al final del post dejaré el enlace del repositorio para que puedas explorar el código fuente y descargarlo si es necesario. Como lo dije, utiliza Angular.

Sobre la API para el clima

Vamos a usar la API de 7timer. Decidí utilizarla porque no requiere una clave API y solo necesita la latitud y longitud. El endpoint es:

http://www.7timer.info/bin/civillight.php?lon=[LONGITUD]&lat=[LATITUD]&ac=0&unit=metric&output=json

La respuesta de la API es parecida a lo siguiente, en donde vemos que devuelve el clima en dataseries:

Cada objeto de dataseries tiene datos interesantes. En weather tenemos el clima (soleado, nublado, lluvia, solo que en inglés según los valores de la API).

Dentro de date tenemos la fecha, mientras que en temp2m está la temperatura máxima y mínima. También contamos con el viento, pero en este caso no usaremos ese valor.

Nota: en este caso vamos a obtener la ubicación a través de la IP, pero eres libre de obtenerla por otros medios, por ejemplo, usando el GPS para mayor precisión.

Nota 2: eres libre de explorar la documentación de la API, está en http://7timer.info/doc.php?lang=en#machine_readable_api

Servicio para ubicación y clima

Pasemos a la parte del código. Tenemos las llamadas a ambas APIs con Angular usando el lenguaje TypeScript:

Igualmente he incluido una función que parsea o convierte la fecha. Sé que debería colocarla en otro lugar pero era la única función que quedaba sin lugar. Lo que hace es agregar guiones a la fecha.

Componente de detalle de clima

En la app reutilizo el componente de detalle de clima, para evitar la repetición de código. El diseño queda así:

Aquí hay un detalle importante y es que dentro de la carpeta assets tengo todas las imágenes. El nombre de la imagen representa el clima, y el mismo es dado por la función resolverImagen que vemos en la funcionalidad del componente:

Dentro de la propiedad detalles (que son los datos que pasa el componente padre) accedemos a weather, y como lo dije, este nombre está relacionado con el nombre de las imágenes.

Quiero aclarar esa parte de las imágenes porque no he colocado todas: así que si al probar hay un clima que no tiene imagen, simplemente verifica en la consola cuál imagen dio error 404 y agrega una con ese nombre.

Componente de app principal

Ahora que ya vimos el componente de detalle de clima, veamos el componente principal. Este componente se encarga de invocar al servicio para obtener los datos del clima. Luego, divide los resultados para mostrar el de hoy y los restantes.

Comenzamos viendo el diseño. Mostramos los detalles de la ubicación, un reloj y luego mostramos los detalles del clima. En este caso usamos dos veces el componente de detalle de clima.

Primero lo usamos para mostrar el clima de hoy, y luego hacemos un ngFor para mostrarlos en una tarjeta de manera repetitiva:

Dentro del funcionamiento del componente principal tenemos a las funciones que es en donde se hace el verdadero consumo de la API:

Por cierto, para el reloj solo basta con refrescar la hora cada medio milisegundo usando setInterval. También se cuenta con un indicador de carga que se ve así, y hace que la app muestre retroalimentación al usuario:

App responsiva

También quiero mostrar que las tarjetas del clima se adaptan a la pantalla. Por ejemplo, así se ve en una pantalla de móvil:

Demostración y explicación en vídeo

He grabado un vídeo en YouTube. Puede que ahí se resuelvan algunas de tus dudas o entiendas de mejor manera:

Conclusión y descargas

Así es como queda esta app de consumo de clima con Angular. Puedes tomarla como base para tu proyecto, aprender un poco, o lo que tú quieras.

Recuerda que está creada con Angular así que puedes ejecutar su versión para producción con ng build; agregar más componentes, etcétera.

El código fuente lo dejo en un repositorio de mi cuenta de GitHub, ahí puedes explorarlo y clonarlo.

En caso de que descargues el código, debes contar con la Angular CLI así como con npm. Después de eso, solo es cuestión de ejecutar npm install, esperar a que las dependencias sean instaladas y finalmente ejecutar ng serve para visitar localhost:4200

Si te gusta este framework, te invito a ver más proyectos con Angular.