Práctica: Desarrolla una app de clima con API y geolocalización

La práctica combina dos entradas y dos posibles fallos: coordenadas del dispositivo y respuesta meteorológica. Para mantenerla reproducible, usa una respuesta simulada para las coordenadas de Madrid, latitud 40.4168 y longitud -3.7038, y separa esa fase de la consulta de clima.

Ejemplo resuelto

1. Solicita permiso y guarda las coordenadas solo si existe autorización.

2. Construye la consulta con latitud y longitud numéricas.

3. Muestra carga mientras llega la respuesta.

4. Presenta temperatura y ciudad, o un error con reintento. Un error frecuente es mostrar Madrid cuando el permiso fue rechazado y hacer creer que es la ubicación real. Corrígelo etiquetando la ubicación simulada o permitiendo selección manual.

Pruébalo

Usa la entrada Madrid y una respuesta { temp: 18, condition: 'Nublado' }; después simula un fallo de red.

Comprueba tu resultado

La pantalla debe mostrar 18 y Nublado en el caso exitoso, indicar que la ubicación es Madrid simulada y ofrecer reintento en el fallo.

Clima con fixtures completos

La consulta manual de prueba no necesita GPS. Las coordenadas siguientes pertenecen al fixture Madrid, no al usuario, y la respuesta no es meteorología actual.

async function clima(coords,modo='ok'){
  if(!Number.isFinite(coords?.latitude)||!Number.isFinite(coords?.longitude)||coords.latitude< -90||coords.latitude>90||coords.longitude< -180||coords.longitude>180) throw new Error('Coordenadas inválidas');
  if(modo==='red') throw new Error('Red simulada');
  if(coords.latitude!==40.4168||coords.longitude!== -3.7038) throw new Error('Fixture de ciudad no disponible');
  return {city:'Madrid simulada',temp:18,condition:'Nublado'};
}

Con Madrid y ok devuelve18/Nublado; red falla; latitude:null falla validación. Si el permiso se deniega, ofrece elegir Madrid manualmente y etiqueta Madrid simulada. Ninguna rama denegada convierte el fixture en ubicación real. Ambos caminos de petición finalizan loading y conservan un botón accionable tras error.

La elección nueva debe invalidar la consulta anterior. Puedes limpiar datos al iniciar o mostrar Último dato:Madrid mientras otro lugar falla, pero no mostrar18 como la temperatura de ese otro lugar. Para un proveedor real verifica HTTP y esquema, unidades de temperatura y configuración de endpoint; una clave privada necesita servicio autorizado fuera del bundle. Capturar latitud/longitud no aporta por sí mismo temperatura ni precisión meteorológica.