Saltar al contenido principal

FAQ - Mobile Development

General​

¿Qué cambió?​

Antes tenías que hacer rebuild completo (5-10 min) por cada cambio. Ahora los cambios se reflejan automáticamente en 2-5 segundos con live reload.

¿Afecta los builds de producción?​

No. El comando npm run build:mobile sigue funcionando exactamente igual. Esto solo mejora el desarrollo local.

¿Necesito cambiar mi código?​

No. Todo el código existente funciona sin cambios. Solo cambia cómo desarrollas localmente.

¿Funciona con todas las configuraciones?​

Sí. Todas las configs en mobile/config/ funcionan igual (auravantbeta, ag, aura, etc.).

Comandos​

¿Cuál es el comando principal?​

npm run dev:mobile -- --platform=android --config=auravantbeta

¿Cómo veo los dispositivos disponibles?​

npm run list:devices

¿Cómo verifico que todo está configurado?​

npm run check:setup

¿Puedo usar un dispositivo específico?​

Sí:

npm run dev:mobile -- --platform=android --device=emulator-5554

Desarrollo​

¿Cómo funciona el live reload?​

  1. Webpack dev server corre en tu IP local (ej: http://192.168.1.100:8080)
  2. Capacitor configura la app para conectarse a ese servidor
  3. Cuando guardas un archivo, webpack lo recompila
  4. La app detecta el cambio y se recarga automáticamente

¿Qué tan rápido es?​

  • Primera vez: ~30 segundos (setup)
  • Cambios subsecuentes: 2-5 segundos (auto-reload)

¿Necesito reiniciar el servidor entre cambios?​

No. Mantén el servidor corriendo todo el día. Solo reinicia si:

  • Cambias de configuración
  • Instalas nuevas dependencias
  • Algo se rompe

¿Qué pasa si el auto-reload falla?​

Refresh manual:

  • Android: Cmd+M → Reload
  • iOS: Cmd+R

¿Puedo desarrollar para iOS y Android al mismo tiempo?​

No en el mismo proceso, pero puedes:

  1. Iniciar dev server una vez
  2. Abrir Android Studio y Xcode
  3. Ambos se conectan al mismo dev server
  4. Cambios se reflejan en ambos

Configuración​

¿Cómo cambio de configuración?​

# Detener servidor actual
Ctrl+C

# Iniciar con nueva config
npm run dev:mobile -- --platform=android --config=ag

¿Cuánto tarda cambiar de config?​

~30 segundos (mucho más rápido que rebuild completo de 5-10 min).

¿Puedo tener múltiples configs corriendo?​

No simultáneamente en el mismo puerto. Pero puedes cambiar rápidamente entre ellas.

Troubleshooting​

"Cannot connect to dev server"​

Causa: App no puede conectarse al webpack dev server.

Solución:

# 1. Verifica tu IP local
ifconfig | grep "inet " | grep -v 127.0.0.1

# 2. Verifica que webpack está corriendo
curl http://TU_IP:8080

# 3. Verifica firewall (puerto 8080 debe estar abierto)

# 4. Si usas emulador, prueba con localhost
# Edita capacitor.config.json temporalmente:
# "url": "http://localhost:8080"

"App crashes on launch"​

Causa: Datos corruptos o config incorrecta.

Solución:

# Limpiar datos de la app
adb shell pm clear com.auravantbeta  # Android
xcrun simctl uninstall booted com.auravantbeta  # iOS

# Reinstalar
npx cap sync android  # o ios

"Changes not reflecting"​

Causa: Webpack no está detectando cambios o app no está escuchando.

Solución:

# 1. Verifica consola de webpack por errores

# 2. Refresh manual
Cmd+M → Reload (Android)
Cmd+R (iOS)

# 3. Reinicia dev server
Ctrl+C
npm run dev:mobile -- --platform=android --config=auravantbeta

"Module not found"​

Causa: Dependencia nueva no instalada.

Solución:

# Detener servidor
Ctrl+C

# Instalar dependencias
npm install

# Sincronizar
npx cap sync android  # o ios

# Reiniciar
npm run dev:mobile -- --platform=android --config=auravantbeta

"Port 8080 already in use"​

Causa: Otro proceso usando el puerto.

Solución:

# Encontrar proceso
lsof -i :8080

# Matar proceso
kill -9 <PID>

# O cambiar puerto en webpack.dev.js

"Android Studio/Xcode no abre"​

Causa: Comando npx cap open falla.

Solución:

# Abrir manualmente
# Android: Abrir Android Studio → Open → /path/to/project/android
# iOS: Abrir Xcode → Open → /path/to/project/ios/App/App.xcworkspace

Performance​

¿Por qué a veces tarda más de 5 segundos?​

Posibles causas:

  1. Primera carga: Webpack compila todo (~30 seg)
  2. Cambio grande: Muchos archivos modificados
  3. Red lenta: WiFi inestable
  4. Memoria baja: Cerrar apps innecesarias

¿Cómo puedo hacerlo más rápido?​

Tips:

  1. Usa SSD (no HDD)
  2. Cierra apps innecesarias
  3. Usa cable USB si WiFi es lento
  4. Reinicia emulador si está lento
  5. Usa eval-source-map (ya configurado)

¿Consume mucha batería en dispositivo físico?​

Sí, más que la app normal porque:

  • Mantiene conexión WiFi activa
  • Recarga frecuentemente
  • Tiene dev tools habilitados

Recomendación: Usa emulador para desarrollo, dispositivo físico para testing final.

Comparación​

¿Cuándo usar dev mode vs build mode?​

Dev Mode (npm run dev:mobile):

  • ✅ Desarrollo diario
  • ✅ Iteración rápida
  • ✅ Testing de features
  • ✅ Debugging
  • ❌ Testing de performance
  • ❌ Testing de producción

Build Mode (npm run build:mobile):

  • ❌ Desarrollo diario (muy lento)
  • ✅ Testing final
  • ✅ Testing de performance
  • ✅ Builds de producción
  • ✅ Deployment

¿Es como Expo?​

Sí, similar:

  • ✅ Live reload automático
  • ✅ Hot module replacement
  • ✅ Desarrollo rápido
  • ❌ No tiene app standalone (usamos Capacitor)
  • ❌ No tiene OTA updates (no es necesario)

Avanzado​

¿Puedo personalizar el puerto?​

Sí, edita config/webpack.dev.js:

devServer: {
  port: 3000  // Cambiar de 8080 a 3000
}

¿Puedo usar HTTPS en dev?​

Sí, pero no es recomendado para mobile dev. HTTP es más simple y rápido.

¿Funciona con hot reload de React?​

Sí, Hot Module Replacement está habilitado. Cambios en componentes React se reflejan sin perder estado.

¿Puedo debuggear con Chrome DevTools?​

Android:

# Abrir chrome://inspect en Chrome
# Seleccionar tu dispositivo

iOS:

# Safari → Develop → Simulator → Tu App

¿Puedo usar Redux DevTools?​

Sí, funciona normal. Instala la extensión y conéctate al dev server.

Migración​

¿Necesito actualizar mi workflow?​

Antes:

npm run build:mobile -- --platform=android
# Abrir Android Studio
# Presionar Play
# Hacer cambio
# Repetir todo

Ahora:

npm run dev:mobile -- --platform=android --config=auravantbeta
# Presionar Play (solo primera vez)
# Hacer cambios → Auto-reload
# Mantener corriendo todo el día

¿Qué pasa con mis scripts existentes?​

Todos siguen funcionando:

  • npm run build:mobile - Sin cambios
  • npm run deploy:mobile - Sin cambios
  • npm run sync - Sin cambios

Solo se agregaron nuevos comandos:

  • npm run dev:mobile - Nuevo
  • npm run list:devices - Nuevo
  • npm run check:setup - Nuevo

Soporte​

¿Dónde encuentro más información?​

  1. Quick Start: mobile/README.md
  2. Guía Completa: MOBILE_DEV_GUIDE.md
  3. Tips: MOBILE_DEV_TIPS.md
  4. Implementación: MOBILE_DEV_IMPLEMENTATION.md

¿Cómo reporto un bug?​

  1. Ejecuta npm run check:setup
  2. Revisa la consola de webpack por errores
  3. Revisa la consola del dispositivo
  4. Incluye toda esa información en el reporte

¿Puedo contribuir mejoras?​

Sí! Los scripts están en mobile/scripts/:

  • dev.js - Script principal
  • list-devices.js - Listar dispositivos
  • check-setup.js - Verificar setup

Preguntas Frecuentes del Equipo​

"¿Esto reemplaza Android Studio/Xcode?"​

No. Todavía necesitas los IDEs para:

  • Configuración inicial
  • Cambios en código nativo
  • Debugging avanzado
  • Builds de producción

"¿Funciona offline?"​

No. Necesitas conexión entre tu computadora y el dispositivo/emulador (WiFi o USB).

"¿Puedo usar esto en CI/CD?"​

No. Esto es solo para desarrollo local. CI/CD sigue usando npm run build:mobile.

"¿Afecta el tamaño del bundle?"​

No. El dev server no está incluido en el build de producción.

"¿Es seguro?"​

Sí. Solo funciona en tu red local. No expone nada a internet.

¿No encuentras tu pregunta? Revisa MOBILE_DEV_TIPS.md o MOBILE_DEV_GUIDE.md