Obtener datos climáticos en tiempo real y combinarlos con información de distancias y tiempos puede transformar por completo la experiencia de una aplicación de rodadas. A continuación se explica paso a paso cómo integrar la API de OpenWeather en un proyecto con Angular e Ionic, reutilizando coordenadas que ya se obtienen de Google Maps.
¿Cómo crear el servicio de clima con OpenWeather?
El primer paso es crear un archivo de servicio dedicado. Dentro de la carpeta front/source/services se genera un nuevo archivo llamado weather.ts [0:30]. La estructura base se puede copiar del servicio de autenticación (authentication.ts) y luego adaptarla con la URL y el API key de OpenWeather.
Las variables de URL y key se declaran como privadas para mantener la encapsulación. El método principal se renombra a getWeather y recibe un parámetro location con latitud y longitud [1:07].
typescript
getWeather(location) {
return this.http.get(
${this.openWeatherMap_url}?lat=${location.lat}&lon=${location.lng}&APPID=${this.openWeatherMap_key}&units=metric
);
}
Un detalle importante es la diferencia de nomenclatura entre Google Maps y OpenWeather: Google abrevia longitud como lng, mientras que OpenWeather usa lon [2:15]. Confundir estas abreviaturas provoca errores silenciosos que pueden ser difíciles de detectar.
¿Cómo registrar e inyectar el servicio en el módulo?
Después de renombrar la clase a WeatherService, se registra en app.module.ts dentro del arreglo de providers [3:10]. Se importa desde services/weather y se corrigen los separadores: en TypeScript los imports usan punto y coma, no coma.
Para consumir el servicio, se inyecta en el constructor de driveForm.page.ts junto al servicio de Google Maps que ya existía [3:30]:
typescript
constructor(
private weatherService: WeatherService
) {}
¿Cómo reutilizar coordenadas con un refactor limpio?
Dentro del forEach que recorre los legs de la respuesta de Google, se extraen las coordenadas en dos variables reutilizables [4:05]:
const startLocation — coordenadas del punto de inicio del tramo.const endLocation — coordenadas del punto final del tramo.
Este refactor evita repetir objetos y permite compartir la misma información de latitud y longitud tanto con Google Maps como con OpenWeather.
¿Cómo combinar datos de distancia, tiempo y clima en un solo objeto?
Antes del push que construye cada parada, se llama al servicio de clima [4:50]:
typescript
this.weatherService.getWeather(startLocation).subscribe(
(data: any) => {
console.log(data.main);
this.waypoints.push({
distance,
duration,
weather: data.main
});
},
(error) => {
alert('Ocurrió un error obteniendo el clima');
console.log(error);
}
);
El objeto data.main contiene temperatura actual, mínima y máxima. Con el método subscribe se manejan dos callbacks: uno para el caso exitoso y otro para capturar errores.
¿Qué errores comunes aparecen y cómo solucionarlos?
Durante la primera prueba, la aplicación arrojó un error porque las variables privadas de URL y key tenían dos puntos en lugar de signo igual en su asignación [6:20]. Un simple cambio de : a = resolvió el problema.
Otro detalle relevante: por defecto OpenWeather devuelve la temperatura en grados Kelvin, lo que produce valores como 300 que no tienen sentido para el usuario. La solución es agregar el parámetro units=metric en la URL del llamado [7:15]. Esto convierte la respuesta a grados Celsius.
&units=metric
Tras corregir ambos problemas, la rodada de prueba con paradas en Ciudad Victoria, Tampico y CDMX mostró temperaturas coherentes y se guardó correctamente con toda la información: distancia, tiempo y clima en cada parada [7:55].
Si ya lograste integrar el servicio de clima, comparte en los comentarios qué otros datos de OpenWeather te gustaría mostrar en los cards de rodada.
