Quiz: APIs y funcionalidades nativas

Tipo de lección: Quiz

Concepto clave

En el desarrollo de apps nativas con React Native y Expo, la integración con APIs y funcionalidades del dispositivo es lo que transforma una aplicación básica en una herramienta poderosa que aprovecha todo el potencial del hardware móvil. Piensa en esto como cuando compras un automóvil: el framework React Native es el chasis y motor básicos, pero las APIs son los sistemas de navegación, climatización y entretenimiento que hacen que el viaje sea realmente útil y personalizado.

Las APIs en este contexto se dividen en dos categorías principales: APIs de red para comunicarse con servidores externos (como obtener datos de un backend) y APIs nativas del dispositivo que acceden a hardware como la cámara, geolocalización, notificaciones push o almacenamiento local. Expo actúa como intermediario, proporcionando módulos preconstruidos que simplifican el acceso a estas funcionalidades sin necesidad de código nativo específico para cada plataforma.

Cómo funciona en la práctica

Imagina que estás construyendo una app de delivery de comida. Necesitas mostrar restaurantes cercanos (geolocalización), permitir subir fotos de reseñas (cámara), enviar notificaciones cuando el pedido está listo (notificaciones push) y guardar preferencias del usuario (almacenamiento local). Cada una de estas funcionalidades requiere integrar una API diferente.

El flujo típico sigue estos pasos: 1) Instalar el módulo de Expo correspondiente (ej: expo-location para geolocalización), 2) Solicitar permisos del usuario (crucial para privacidad en iOS/Android), 3) Usar las funciones proporcionadas por el módulo en tu código React Native, 4) Manejar los estados de carga, error y éxito apropiadamente. La magia está en que Expo maneja las diferencias entre iOS y Android detrás de escena, permitiéndote escribir código una vez que funciona en ambas plataformas.

Código en acción

Veamos un ejemplo real de integración con la API de geolocalización. Primero, la versión básica con manejo mínimo de errores:

import * as Location from 'expo-location';
import { useState, useEffect } from 'react';

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permiso de ubicación denegado');
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    // Tu interfaz de usuario aquí
  );
}

Ahora, la versión mejorada con manejo robusto de errores y opciones configuradas:

import * as Location from 'expo-location';
import { useState, useEffect } from 'react';
import { Alert } from 'react-native';

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

  const getLocation = async () => {
    try {
      const { status } = await Location.requestForegroundPermissionsAsync();
      
      if (status !== 'granted') {
        Alert.alert(
          'Permiso requerido',
          'Esta app necesita acceso a tu ubicación para funcionar correctamente.',
          [{ text: 'OK' }]
        );
        setLoading(false);
        return;
      }
      
      const currentLocation = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.High,
        timeout: 15000,
      });
      
      setLocation(currentLocation);
    } catch (error) {
      console.error('Error obteniendo ubicación:', error);
      Alert.alert('Error', 'No se pudo obtener la ubicación. Intenta nuevamente.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getLocation();
  }, []);

  // Resto del componente
}

Errores comunes

• Olvidar solicitar permisos: En iOS y Android, muchas APIs requieren permisos explícitos del usuario. Siempre verifica el estado del permiso antes de usar la funcionalidad.
• No manejar estados de carga y error: Las operaciones con APIs son asíncronas y pueden fallar. Siempre implementa estados de loading y manejo de errores apropiados.
• Asumir que la API siempre responde: En dispositivos móviles, la conexión puede ser intermitente. Implementa timeouts y reintentos inteligentes.
• No probar en dispositivos reales: Algunas APIs (como notificaciones push) solo funcionan correctamente en dispositivos físicos, no en simuladores.
• Ignorar las diferencias entre plataformas: Aunque Expo abstrae muchas diferencias, algunas APIs tienen comportamientos ligeramente distintos en iOS vs Android. Siempre prueba en ambas.

Checklist de dominio

1. Puedo integrar al menos 3 APIs diferentes de Expo en una aplicación funcional
2. Sé solicitar y manejar permisos del usuario apropiadamente para cada funcionalidad
3. Implemento estados de carga, éxito y error en todas mis integraciones con APIs
4. He probado mis integraciones con APIs en dispositivos iOS y Android reales
5. Puedo explicar la diferencia entre APIs de red y APIs nativas del dispositivo
6. Sé depurar problemas comunes de integración usando las herramientas de desarrollo de Expo
7. Entiendo cuándo necesito usar APIs específicas de plataforma vs las abstraídas por Expo

App de Clima con Geolocalización y Almacenamiento Local

Construye una aplicación de clima que obtenga la ubicación actual del usuario, consulte una API de clima, y guarde las últimas búsquedas localmente.

1. Crea un nuevo proyecto Expo: npx create-expo-app clima-app
2. Instala las dependencias necesarias: expo-location y expo-secure-store
3. Implementa la obtención de ubicación con manejo completo de permisos y errores
4. Integra con una API de clima pública (puedes usar OpenWeatherMap API gratuita)
5. Guarda las últimas 5 búsquedas en el almacenamiento seguro del dispositivo
6. Muestra la temperatura actual, condiciones, y un historial de búsquedas
7. Asegúrate de manejar los estados de carga mientras se obtienen los datos
8. Prueba la app en un dispositivo físico o simulador

Pistas

• Usa async/await para manejar las operaciones asíncronas de manera limpia
• Recuerda solicitar permisos tanto para ubicación como para almacenamiento si es necesario
• Implementa un mecanismo de caché simple para no hacer llamadas redundantes a la API de clima

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.