Práctica: Despliega tu app en Expo y simula en dispositivos reales

Tipo de lección: Video

Concepto clave

Desplegar una app en Expo es como publicar un libro digital en una tienda en línea. En lugar de imprimir copias físicas, creas una versión digital que los usuarios pueden descargar directamente en sus dispositivos móviles. Expo actúa como la plataforma de distribución que gestiona la compilación, el alojamiento y la accesibilidad de tu aplicación.

La simulación en dispositivos reales es equivalente a probar un prototipo de automóvil en diferentes condiciones de carretera. Te permite ver cómo se comporta tu app en hardware real, con sensores, cámaras y características específicas de iOS y Android que los emuladores no pueden replicar completamente. Esto es crucial para detectar problemas de rendimiento, usabilidad y compatibilidad antes del lanzamiento final.

Cómo funciona en la práctica

El proceso comienza con la configuración de tu proyecto en Expo. Primero, asegúrate de tener instalado Expo CLI y una cuenta en expo.dev. Luego, desde tu terminal, ejecutas expo login para autenticarte. Una vez conectado, puedes construir tu app para producción usando expo build:android o expo build:ios, dependiendo de la plataforma objetivo.

Para simular en dispositivos reales, Expo ofrece dos herramientas principales: Expo Go y builds de desarrollo. Expo Go es una app que puedes descargar en tu teléfono desde la App Store o Google Play. Al escanear un código QR generado por Expo, tu app se carga directamente en el dispositivo, permitiéndote probar cambios en tiempo real. Los builds de desarrollo son versiones personalizadas de tu app que incluyen herramientas de depuración y se instalan como apps nativas.

Codigo en accion

Antes de desplegar, configura tu app.json para definir metadatos esenciales como el nombre, versión y permisos. Aquí un ejemplo básico:

{
  "expo": {
    "name": "Mi E-commerce",
    "slug": "mi-ecommerce",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Para iniciar el servidor de desarrollo y generar el QR para Expo Go, usa este comando en la terminal:

expo start --tunnel

El flag --tunnel crea un túnel seguro, útil si estás en una red con restricciones. Luego, abre la app Expo Go en tu teléfono, escanea el QR y verás tu app cargándose.

Errores comunes

• Olvidar actualizar la versión en app.json: Si no incrementas el número de versión, los usuarios no recibirán actualizaciones. Siempre cambia la versión antes de un nuevo despliegue.
• No probar en ambos sistemas operativos: iOS y Android tienen diferencias en APIs y comportamientos. Usa Expo Go en dispositivos de ambas plataformas para evitar sorpresas.
• Ignorar los logs de la terminal: Durante expo start, la terminal muestra errores y advertencias clave. Revisarlos puede ahorrarte horas de depuración.
• Configurar permisos incorrectos: Si tu app usa cámara o ubicación, debes declararlos en app.json. De lo contrario, fallará en dispositivos reales.
• No limpiar la cache: A veces, problemas de rendimiento se solucionan ejecutando expo start -c para limpiar la cache del servidor.

Checklist de dominio

1. Crear una cuenta en expo.dev y autenticarse via CLI con expo login.
2. Configurar correctamente app.json con nombre, slug, versión y assets.
3. Ejecutar expo start --tunnel y escanear el QR con Expo Go en un dispositivo real.
4. Generar un build de desarrollo usando expo build:android --type apk o equivalente para iOS.
5. Probar la app en al menos un dispositivo iOS y uno Android.
6. Verificar que los permisos (como cámara) funcionen en el dispositivo real.
7. Monitorear los logs en la terminal durante las pruebas para detectar errores temprano.

Despliega tu app de e-commerce en Expo y pruébala en tu teléfono

Sigue estos pasos para llevar tu app de e-commerce a un dispositivo real:

1. Abre tu proyecto en la terminal y ejecuta expo login para iniciar sesión con tu cuenta de Expo.
2. Edita el archivo app.json: cambia el nombre a "Tienda Móvil", incrementa la versión a "1.0.1", y asegúrate de que el slug sea único.
3. Inicia el servidor de desarrollo con expo start --tunnel. Anota la URL y el QR que aparecen en la terminal.
4. Descarga la app Expo Go en tu teléfono desde la App Store (iOS) o Google Play (Android).
5. Abre Expo Go, toca "Escanear código QR" y apunta a la terminal. Espera a que tu app se cargue.
6. Navega por tu app en el teléfono: prueba agregar productos al carrito y proceder al checkout.
7. Si encuentras errores, revisa los logs en la terminal y ajusta tu código según sea necesario.

Pistas

• Si el QR no funciona, verifica que tu teléfono y computadora estén en la misma red o usa --tunnel.
• Para builds de iOS, necesitarás una cuenta de Apple Developer; para Android, solo una cuenta de Google.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.