Quiz: APIs y funcionalidades nativas con Expo

Tipo de lección: Quiz

Concepto clave

La integración de APIs y funcionalidades nativas en Expo transforma tu aplicación React Native de una interfaz estática a una experiencia móvil completa. Piensa en esto como agregar superpoderes a tu app: las APIs son como contratos que te permiten comunicarte con servicios externos (como el clima o pagos), mientras que las funcionalidades nativas son capacidades del dispositivo mismo (como la cámara o geolocalización) que Expo expone de forma segura y multiplataforma.

Expo actúa como un puente entre JavaScript y el código nativo del dispositivo, manejando automáticamente las diferencias entre iOS y Android. Esto significa que puedes usar una sola API de JavaScript para acceder a características como notificaciones push o sensores, sin preocuparte por las implementaciones específicas de cada sistema operativo. Es similar a cómo un traductor simultáneo te permite conversar en un idioma mientras él se encarga de las variaciones regionales.

Cómo funciona en la práctica

Para integrar una API o funcionalidad nativa con Expo, sigues un flujo de tres pasos: primero, instalas el módulo de Expo correspondiente (si es necesario); segundo, importas y configuras la funcionalidad en tu código; tercero, manejas los permisos y estados del dispositivo. Por ejemplo, para usar la cámara, no necesitas escribir código nativo, solo usar la API de expo-camera que Expo proporciona.

Paso a paso: 1) Ejecuta npx expo install expo-camera en tu terminal. 2) En tu componente React Native, importa Camera desde expo-camera. 3) Solicita permisos usando Camera.requestCameraPermissionsAsync() y maneja el estado con useState y useEffect. 4) Renderiza el componente Camera en tu interfaz. Expo se encarga de mostrar la vista de cámara nativa en ambos sistemas.

Código en acción

Aquí tienes un ejemplo funcional para acceder a la geolocalización usando expo-location, una funcionalidad nativa común en apps móviles:

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import * as Location from 'expo-location';

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);
    })();
  }, []);

  let text = 'Esperando...';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    
      {text}
    
  );
}

Antes de refactorizar, podrías tener código que mezcla lógica de permisos y UI. Después de refactorizar para usar hooks de React y async/await, como se muestra arriba, el código es más limpio y mantenible.

Errores comunes

• Olvidar solicitar permisos: Muchas funcionalidades nativas (como cámara o ubicación) requieren permisos explícitos del usuario. Siempre llama a funciones como requestPermissionsAsync antes de usar la API, y maneja los casos denegados.
• No manejar estados de carga o error: Las APIs nativas pueden fallar o tardar en responder. Usa estados de React para mostrar indicadores de carga o mensajes de error, evitando que la app se congele.
• Asumir que todo funciona igual en iOS y Android: Aunque Expo abstrae muchas diferencias, algunas APIs pueden tener comportamientos ligeramente distintos. Prueba en ambos dispositivos y consulta la documentación de Expo para detalles específicos.
• Usar APIs obsoletas: Expo actualiza frecuentemente sus módulos. Verifica que estás usando la versión más reciente y sigue las guías de migración si actualizas Expo SDK.

Checklist de dominio

1. Puedo instalar y configurar un módulo de Expo para una funcionalidad nativa (ej., expo-camera o expo-location).
2. Sé solicitar y manejar permisos del usuario para APIs sensibles.
3. Puedo integrar una API externa (como REST) en mi app Expo y mostrar los datos en la UI.
4. Entiendo cómo depurar problemas comunes con APIs nativas usando consola y herramientas de desarrollo.
5. Puedo explicar la diferencia entre APIs de Expo y APIs de React Native puras.
6. Sé probar funcionalidades nativas en simuladores y dispositivos reales.
7. Puedo optimizar el rendimiento al usar APIs, evitando llamadas excesivas o bloqueantes.

Integración de una API de clima y geolocalización nativa

En este ejercicio, crearás una app que muestra el clima actual basado en la ubicación del dispositivo. Usarás expo-location para obtener la ubicación nativa y una API externa (OpenWeatherMap) para los datos del clima.

1. Crea un nuevo proyecto Expo con npx create-expo-app ClimaApp y navega a la carpeta del proyecto.
2. Instala expo-location ejecutando npx expo install expo-location en tu terminal.
3. En App.js, importa los módulos necesarios: React, useState, useEffect, View, Text, y expo-location.
4. Implementa un efecto para solicitar permisos de ubicación y obtener las coordenadas actuales usando Location.getCurrentPositionAsync.
5. Usa las coordenadas (latitud y longitud) para hacer una petición HTTP a la API de OpenWeatherMap (endpoint: https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API_KEY}&units=metric). Necesitarás una API key gratuita de su sitio web.
6. Muestra el clima (temperatura, descripción) en la interfaz, manejando estados de carga y error.
7. Prueba la app en un simulador o dispositivo real, verificando que los permisos y la API funcionen correctamente.

Pistas

• Usa async/await para manejar las operaciones asíncronas de ubicación y API.
• Guarda tu API key de OpenWeatherMap en una variable de entorno o constante, no la expongas en el código públicamente.
• Si la ubicación falla, proporciona un botón para reintentar o usa una ubicación por defecto.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.