Práctica: Desarrollar una app de clima con geolocalización

Introducción: Construyendo una Aplicación del Mundo Real

En esta lección práctica, consolidarás tus conocimientos sobre React Native y Expo integrando varios de los conceptos más importantes para un desarrollador de aplicaciones móviles. No se trata solo de aprender APIs aisladas, sino de comprender cómo se combinan para crear una funcionalidad completa y valiosa para el usuario. Desarrollaremos una aplicación de clima que, partiendo de la ubicación del dispositivo, obtendrá y mostrará datos meteorológicos en tiempo real. Este proyecto simula un escenario de desarrollo común y te enfrentará a decisiones de arquitectura, manejo de estados asíncronos y gestión de permisos.

La aplicación final tendrá un flujo claro: al iniciar, solicitará permiso para acceder a la geolocalización (o utilizará una ubicación aproximada si el usuario no lo concede). Con las coordenadas obtenidas, realizará una petición a una API de clima pública. Finalmente, presentará la información de forma organizada y visualmente atractiva, manejando también los estados de carga y error. Este ejercicio es fundamental porque trasciende el "Hola Mundo" y te introduce en el desarrollo de características que los usuarios esperan de una app profesional: interacción con el hardware del dispositivo y consumo de servicios web externos.

Concepto Clave: El Flujo de Datos Asíncrono en Aplicaciones Móviles

El núcleo de esta aplicación, y de muchas otras, es un flujo de datos asíncrono. Piensa en ello como hacer un pedido en un restaurante de lujo. No te quedas parado en la mesa esperando a que el chef prepare cada plato (eso bloquearía toda tu experiencia). En su lugar, el mesero (nuestra función asíncrona) toma tu pedido (la solicitud) y te permite seguir conversando (la interfaz de usuario sigue respondiendo). Luego, el mesero va a la cocina (el servidor o el hardware) y, cuando la comida está lista (la promesa se resuelve), te la trae a la mesa (actualiza el estado de la UI). Si el ingrediente principal no está disponible (el error), el mesero te informa y te ofrece alternativas (manejo de errores).

En términos técnicos, este flujo implica una cadena de operaciones que dependen unas de otras y que no son instantáneas. Primero, debemos esperar la respuesta del módulo de geolocalización. Solo cuando tengamos las coordenadas, podemos proceder a esperar la respuesta de la API del clima. Cada uno de estos pasos puede fallar, y la aplicación debe estar diseñada para manejar esas fallas con elegancia, mostrando mensajes apropiados al usuario sin que la aplicación se cierre inesperadamente. Este patrón de "solicitar-esperar-actualizar" es ubicuo en el desarrollo moderno.

Cómo Funciona en la Práctica: Paso a Paso

El primer paso práctico es configurar nuestro entorno de desarrollo. Asegúrate de tener un proyecto Expo iniciado. Necesitaremos instalar dos paquetes clave: expo-location para acceder a los servicios de geolocalización del dispositivo, y axios o fetch (ya incluido) para realizar las peticiones HTTP a la API. Usaremos la API gratuita de OpenWeatherMap, que requiere un registro sencillo para obtener una clave API. Una vez instaladas las dependencias, configuraremos los permisos en el archivo app.json, añadiendo la clave de localización bajo la sección "expo". Esto es crucial para que el sistema operativo (iOS/Android) sepa qué funcionalidades pretende usar nuestra app y pueda mostrar los diálogos de permiso correctos.

El segundo paso es estructurar nuestro componente principal. Crearemos un estado inicial que maneje: los datos del clima (objeto), la ubicación (objeto con latitud y longitud), el estado de carga (booleano) y cualquier mensaje de error (string). Luego, en un efecto (useEffect), orquestaremos la secuencia asíncrona: 1) Llamar a una función `getLocation` que maneje la solicitud de permisos y obtenga las coordenadas. 2) Si es exitosa, llamar a una función `fetchWeather` pasando esas coordenadas. 3) Actualizar el estado con los datos recibidos. 4) Capturar y manejar cualquier error en cada etapa, actualizando el estado de error correspondiente. La UI renderizará condicionalmente un indicador de carga, la pantalla de datos del clima, o un mensaje de error.

Código en Acción: Implementación Completa

A continuación, se presenta el código completo para el componente principal de la aplicación, App.js. Este ejemplo es funcional y utiliza la API de OpenWeatherMap. Recuerda reemplazar `'TU_API_KEY_AQUI'` con tu clave personal.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ActivityIndicator, SafeAreaView, Image } from 'react-native';
import * as Location from 'expo-location';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  const [weatherData, setWeatherData] = useState(null);
  const [location, setLocation] = useState(null);
  const [loading, setLoading] = useState(true);
  const [errorMsg, setErrorMsg] = useState(null);

  const API_KEY = 'TU_API_KEY_AQUI';

  useEffect(() => {
    (async () => {
      try {
        // 1. Solicitar permisos y obtener ubicación
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
          setErrorMsg('Permiso para acceder a la ubicación denegado.');
          setLoading(false);
          return;
        }

        let currentLocation = await Location.getCurrentPositionAsync({});
        setLocation(currentLocation);
        const { latitude, longitude } = currentLocation.coords;

        // 2. Obtener datos del clima con las coordenadas
        const weatherResponse = await fetch(
          `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${API_KEY}&lang=es`
        );
        const weatherJson = await weatherResponse.json();

        if (weatherJson.cod !== 200) {
          throw new Error(weatherJson.message || 'Error al obtener el clima');
        }

        setWeatherData(weatherJson);
        setErrorMsg(null);
      } catch (error) {
        console.error(error);
        setErrorMsg(`Error: ${error.message}. Por favor, intenta de nuevo.`);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const renderContent = () => {
    if (loading) {
      return (
        
          
          Obteniendo ubicación y clima...
        
      );
    }

    if (errorMsg) {
      return (
        
          {errorMsg}
        
      );
    }

    if (weatherData) {
      const iconUrl = `https://openweathermap.org/img/wn/${weatherData.weather[0].icon}@4x.png`;
      return (
        
          {weatherData.name}, {weatherData.sys.country}
          
          {Math.round(weatherData.main.temp)}°C
          {weatherData.weather[0].description}
          
            Sensación: {Math.round(weatherData.main.feels_like)}°C
            Humedad: {weatherData.main.humidity}%
            Viento: {weatherData.wind.speed} m/s
            Máx: {Math.round(weatherData.main.temp_max)}°C / Mín: {Math.round(weatherData.main.temp_min)}°C
          
        
      );
    }

    return null;
  };

  return (
    
      
      
        Clima Actual
      
      {renderContent()}
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f8ff',
  },
  header: {
    paddingTop: 50,
    paddingBottom: 20,
    alignItems: 'center',
    backgroundColor: '#2196F3',
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: 'white',
  },
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    marginTop: 10,
    fontSize: 16,
    color: '#555',
  },
  errorText: {
    fontSize: 18,
    color: 'red',
    textAlign: 'center',
  },
  weatherContainer: {
    flex: 1,
    alignItems: 'center',
    paddingTop: 40,
  },
  locationText: {
    fontSize: 32,
    fontWeight: '600',
    marginBottom: 20,
    color: '#333',
  },
  weatherIcon: {
    width: 150,
    height: 150,
  },
  tempText: {
    fontSize: 72,
    fontWeight: '200',
    color: '#333',
  },
  descriptionText: {
    fontSize: 24,
    color: '#666',
    marginBottom: 30,
    textTransform: 'capitalize',
  },
  detailsContainer: {
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 25,
    marginTop: 20,
    width: '85%',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 5,
  },
  detailText: {
    fontSize: 18,
    paddingVertical: 8,
    color: '#444',
  },
});

Este código implementa el flujo completo descrito. Nota el uso de async/await dentro del useEffect para manejar la asincronía de forma legible. El bloque try...catch...finally es esencial para un manejo robusto de errores, asegurando que el indicador de carga se detenga (setLoading(false)) tanto en éxito como en fracaso. La función renderContent maneja el renderizado condicional de manera clara, mostrando diferentes interfaces basadas en el estado de la aplicación.

Tip Profesional: Nunca subas tu clave API a un repositorio público como GitHub. Para proyectos reales, utiliza variables de entorno. En Expo, puedes usar el paquete `expo-constants` o `dotenv` en combinación con un archivo `.env` que esté listado en tu `.gitignore`. Esto protege tus claves y te permite tener configuraciones diferentes para desarrollo y producción.

Errores Comunes y Cómo Evitarlos

1. No Manejar el Estado de "Permiso Denegado": Asumir que el usuario siempre concederá acceso a la ubicación es un error grave. Si no manejas el caso de denegación, la aplicación se quedará colgada en un estado de carga o fallará silenciosamente. Solución: Siempre verifica el estado del permiso devuelto por `requestForegroundPermissionsAsync()`. Si no es 'granted', actualiza el estado de error con un mensaje amigable y ofrece una alternativa, como ingresar una ciudad manualmente.

2. Realizar la Petición HTTP sin Esperar las Coordenadas: Intentar llamar a `fetchWeather` antes de que `location` tenga un valor válido resultará en una URL malformada o una petición con parámetros `undefined`. Solución: Asegura la secuencia lógica. La llamada a la API del clima debe estar dentro del bloque de código que se ejecuta solo después de que la obtención de la ubicación haya sido exitosa, como se muestra en el efecto donde `fetchWeather` depende del resultado de `getLocation`.

3. No Proporcionar un Feedback Visual Durante la Carga: Lanzar operaciones asíncronas sin un indicador de carga (spinner, skeleton screen) deja al usuario preguntándose si la aplicación funciona. Solución: Utiliza un estado booleano `loading`. Pónlo en `true` al iniciar la operación y en `false` cuando termine (en el bloque `finally` es un buen lugar). Renderiza condicionalmente un componente `` mientras `loading` sea verdadero.

4. Olvidar el Manejo de Errores de la Respuesta HTTP: Incluso si la petición HTTP no lanza una excepción de red, la API puede devolver un error en el cuerpo de la respuesta (por ejemplo, código 401 por API key inválida, 404, 500). Solución: Después de obtener la respuesta (`weatherResponse`), verifica el código de estado o una propiedad específica del cuerpo (como `weatherJson.cod` en OpenWeatherMap). Si indica un error, lanza una excepción con `throw new Error()` para que sea capturada por tu bloque `catch` general.

5. Bloquear el Hilo Principal con Operaciones Síncronas Pesadas: Aunque no es el caso aquí, realizar cálculos complejos o procesar grandes cantidades de datos en el hilo principal después de recibir la respuesta de la API puede causar que la interfaz de usuario se congele. Solución: Para operaciones pesadas de transformación de datos, considera el uso de funciones auxiliares eficientes o, en casos extremos, el uso de Web Workers (aunque es más complejo en RN). Mantén la lógica en el `useEffect` y en los renderizados lo más ligera posible.

Checklist de Dominio

Antes de considerar esta lección completa, asegúrate de poder verificar cada uno de los siguientes puntos. Si tienes dudas en alguno, repasa la sección correspondiente.

• Puedo explicar el flujo asíncrono de "geolocalización -> petición HTTP -> renderizado" usando una analogía del mundo real.
• He configurado correctamente los permisos de localización en el archivo app.json de un proyecto Expo.
• Puedo implementar la solicitud de permisos en tiempo de ejecución usando expo-location y manejar ambos casos: concedido y denegado.
• Sé cómo estructurar un componente que maneje tres estados visuales distintos: carga, éxito (con datos) y error, usando renderizado condicional.
• Puedo realizar una petición HTTP a una API REST externa desde React Native, procesar la respuesta JSON y extraer datos específicos para mostrar.
• He implementado un manejo de errores robusto que cubre fallos de permisos, fallos de red y errores en la respuesta de la API.
• Puedo extender la aplicación para permitir al usuario actualizar los datos manualmente (pull-to-refresh o con un botón) sin recargar toda la app.
• Sé la importancia de no exponer claves API en el código cliente y conozco al menos una estrategia básica para protegerlas (variables de entorno).

Profundizando y Próximos Pasos

Con la aplicación básica funcionando, el camino de aprendizaje se abre a optimizaciones y características avanzadas. Un siguiente paso natural es implementar una actualización manual de los datos. Esto se puede lograr añadiendo un botón "Actualizar" que, al presionarlo, vuelva a ejecutar la lógica del `useEffect`. Para una experiencia más nativa, podrías integrar el componente <RefreshControl> en un ScrollView para implementar la funcionalidad "pull-to-refresh". Esto mejora la usabilidad al dar control al usuario sobre la frescura de los datos.

Otra mejora significativa es la persistencia de datos y la geolocalización en segundo plano para aplicaciones que requieren actualizaciones periódicas. Podrías usar `AsyncStorage` o una base de datos local como `SQLite` para guardar el último pronóstico obtenido, mostrándolo inmediatamente al abrir la app mientras se busca una actualización en segundo plano. Para la geolocalización periódica, Expo ofrece `Location.startLocationUpdatesAsync`, pero esto requiere permisos adicionales y una justificación clara para las tiendas de aplicaciones. Recuerda, cada funcionalidad nueva debe añadir valor real para el usuario y justificar el consumo adicional de batería y datos.

Desafío Opcional: Modifica la aplicación para que, si el usuario deniega los permisos de ubicación precisa, se utilice una geolocalización aproximada basada en la red (IP) como fallback. Puedes consumir una API gratuita como ipapi.co para obtener una ubicación estimada y luego usarla para buscar el clima. Esto convierte un "no" del usuario en una experiencia aún funcional.