Convierta su aplicación querida a iOS y Android con Capacitor

Introducción

Querida es una herramienta de construcción de aplicaciones de IA que convierte promesas en aplicaciones de React funcionales en minutos. Puede enviar en el navegador rápido, pero ¿qué pasa si quiere su aplicación en la Tienda de Aplicaciones y Google Play, sentada en la pantalla de inicio como cualquier otra aplicación nativa?

Este manual recorre el camino completo: exportar desde Querida, envuelva la aplicación web con Capacitor, construya binarios firmados de iOS y Android en la nube con Capgo Builder (no se requiere Mac), agregue una característica nativa real y envíe una corrección de diseño por aire con Capgo Actualizaciones en vivo.

Utilizamos Cursor a lo largo de — su IA puede ejecutar la mayoría de los comandos de la terminal por ti si prefieres no escribirlos manualmente.

Tiempo requerido: alrededor de 1–2 horas la primera vez, principalmente configuración de cuenta y espera a los compilados en la nube.

Al final, tendrás:

• Una aplicación nativa de iOS y Android construida desde la nube — sin Xcode o Android Studio en el camino principal
• La aplicación ejecutándose en un dispositivo real (TestFlight, instalación directa o Play pruebas internas)
• Una característica de cámara que funciona solo una aplicación nativa puede ofrecer
• Actualizaciones en vivo configuradas para que los arreglos de UI y CSS se envíen sin revisión de la tienda

Requisitos previos

Costos (solo para publicar públicamente):

Opcional (solo simulador local):

Puede saltar ambos. El camino principal en esta guía construye en la nube e instala en dispositivos reales sin ellos.

Nota rápida sobre frameworks y herramientas

Antes de tocar code, conozca que The tipo de aplicación web que Lovable genera afecta el envoltorio móvil.

Durante mucho tiempo, el valor por defecto de Lovable era un aplicación de una página única (SPA) con React + ViteDesde mayo de 2026, las nuevas aplicaciones de Lovable pueden utilizar TanStack con renderizado del lado del servidor (SSR) por defecto El SSR es excelente para la web, pero Capacitor envuelve una construcción estática una carpeta de HTML, CSS y JavaScript con un index.html a su raíz — que se envía dentro de la aplicación en el dispositivo

Una aplicación SSR espera que un servidor renderice páginas en cada solicitud. No hay servidor dentro de un teléfono, por lo que para Capacitor quieres salida renderizada por el cliente estática.

¿Qué hacer:

• Empezando desde cero: Pregúntale a Lovable por un aplicación de una sola página (SPA) o para saltarse la SSR para obtener una dist/ carpeta estática.
• Ya en TanStack Start (SSR): Configúralo para pre-renderizar o para obtener una SPA estática. El único requisito duro es una carpeta de construcción estática que contenga index.html.
• Proyectos de Lovable Next.js legados: Utilice exportación estática — el resultado se envía a out/ en lugar de dist/.

Sea cual sea el marco de trabajo que utilices, apunte a la carpeta de Capacitor webDir . Para una SPA de Vite, esa carpeta es dist.

Paso 1 — Exporte su aplicación querida a GitHub

Lovable mantiene su code en su editor hasta que se conecte GitHub.

1. Abra su proyecto de Lovable en el navegador
2. Haga clic Actualizar (en la esquina superior derecha) si es necesario, luego abra Git en el menú de la izquierda
3. Elige GitHubautoriza Lovable y vincula tu cuenta
4. Lovable crea un repositorio y envía tu aplicación automáticamente

✅ Éxito: Visita github.com/YOUR-USERNAME/your-app muestra tu aplicación code.

Paso 2 — Configura Cursor y clona tu proyecto

Antes de que podamos trabajar con tu code localmente, necesitarás un code editor. Recomendamos Cursoruna editor de inteligencia artificial que puede ejecutar comandos de terminal para usted.

Descargar e Instalar Cursor

1. Visitar cursor.sh y descargar la versión para su sistema operativo
2. Instalar Cursor siguiendo el asistente de instalación
3. Una vez instalado, abrir Cursor

Configurar Cursor para el Desarrollo de Inteligencia Artificial

Para la mejor experiencia, configure Cursor antes de empezar:

1. Comprar un Plan de Cursor — Si bien Cursor ofrece un nivel gratuito, un plan Pro ($20/mes) le da completaciones de inteligencia artificial ilimitadas, acceso a Claude y GPT-4, y ejecución de comandos
2. Configuración del Cursor Abierto presionando Command+, (Mac) o Ctrl+, (Windows)

3. Habilitar Modelos de Inteligencia Artificial — Asegúrese de que las características de IA estén habilitadas:

4. Seleccione su modelo preferido — Elija Claude o GPT-4 para mejores resultados:

5. Permitir la Ejecución de Comandos — Habilita el cursor para ejecutar comandos por ti:

Clona tu repositorio en Cursor

1. En Cursor, presiona Shift+Command+P (Mac) o Shift+Ctrl+P (Windows) para abrir la paleta de comandos
2. Escribe ‘clone’ y selecciona Git: Clonar
3. Pega la URL de tu repositorio GitHub aquí: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Elige una carpeta donde deseas guardar el proyecto

5. Cursor clonará y abrirá tu proyecto

Step 3 — Instala dependencias y ejecuta localmente

Metodo 1: Usando el cursor AI (Recomendado)

1. Abre la pestaña de AI de Cursor presionando Command+K (Mac) o Ctrl+K (Windows)
2. Escribe el siguiente comando:

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

El AI detectará automáticamente tu sistema operativo, instalará Node.js, ejecutará npm install, y arrancará el servidor de desarrollo con npm run dev.

Metodo 2: Instalación manual

Abre la terminal en Cursor presionando Shift+Command+T (Mac) o Shift+Ctrl+T (Windows), luego:

Para macOS:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

Para Windows:

1. Descargar el 24 LTS instalador desde nodejs.org
2. Ejecutar el instalador
3. Abra la terminal y ejecute:

cd your-lovable-app
npm install
npm run dev

Las aplicaciones Lovable suelen ejecutarse en http://localhost:8080 o — usa la dirección que imprime tu terminal. http://localhost:5173 Pulsa

para detener el servidor de desarrollo cuando estés listo para continuar. Ctrl + C Éxito:

✅ Tu aplicación se abre en el navegador con su interfaz de usuario funcionando. Paso 4 — Prepara la compilación de producción estática

__CAPGO_KEEP_0__ necesita una compilación de producción antes de agregar plataformas nativas.

Capacitor needs a production build before you add native platforms.

Método 1: Utilizando Cursor AI (Recomendado)

Pulsa

(Mac) o Command+K o — usa la dirección que imprime tu terminal. Pulsa para detener el servidor de desarrollo cuando estés listo para continuar. Éxito: Tu aplicación se abre en el navegador con su interfaz de usuario funcionando. Paso 4 — Prepara la compilación de producción estática __CAPGO_KEEP_0__ necesita una compilación de producción antes de agregar plataformas nativas. React + Vite (las aplicaciones más queridas) Método 1: Utilizando Cursor AI (Recomendado) Pulsa (Mac) o Ctrl+K (Windows) y pregunte:

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

Configuración manual:

Confirmar vite.config.ts usa una base relativa para que los activos se carguen dentro de la WebView nativa:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

Compila y verifica:

npm run build

Deberías ver un dist/ carpeta con index.html a su raíz.

Proyectos de Lovable Next.js Legacy

Si tu repositorio utiliza Next.js, pregunta a Cursor:

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

O sigue Convierta su aplicación Next.js en móvil para el resto next.config configuración, luego utilice webDir: 'out' en Capacitor en lugar de dist.

✅ Éxito: Existe una carpeta de compilación estática (dist/ o out/) con index.html.

Paso 5 — Agregue Capacitor y plataformas nativas

Capacitor envuelve su aplicación web en cascos de iOS y Android reales — no se necesita reescritura.

Método 1: Utilizando Cursor AI (Recomendado)

Pulsa Command+K (Mac) o Ctrl+K (Windows) y pregunte:

Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms

El AI le pedirá a usted su nombre de la aplicación y ID de paquete (por ejemplo com.yourcompany.myapp).

Método 2: Instalación Manual

npm install @capacitor/core @capacitor/cli
npx cap init

Cuando se le pregunte:

Elige un ID de paquete que realmente poseas. Los IDs de paquete son únicos a nivel global. Utilice un ID basado en dominio inverso basado en un dominio que controla desde el principio — cambiarlo más tarde significa encontrar y reemplazar en ios/ y android/ y reconstruir.

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Configurar Capacitor

Método 1: Utilizando Cursor AI (Recomendado)

Preguntar a Cursor:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Para la exportación estática de Next.js, pregúntale que utilice out en su lugar.

Método 2: Configuración manual

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

Compilar y sincronizar

Método 1: Utilizando Cursor AI (Recomendado)

Dile a Cursor:

Build the production web app and sync it with Capacitor platforms

Método 2: Comandos Manuales

npm run build
npx cap sync

Tu proyecto ahora se ve así:

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

No se necesita CocoaPods. Capacitor 8 utiliza el Administrador de Paquetes de Swift para las dependencias de iOS de manera automática.

✅ Éxito: ios/ y android/ aparecen carpetas y la terminal muestra Sync finished.

Paso 6 — Verifica Tu .gitignore

Capgo Constructor compila desde tu repositorio de Git, por lo que ios/ y android/ deben ser commitados. Un error común es ignorarlos en la raíz del repositorio.

Confirmar:

• Raíz .gitignore ignorados node_modules y dist (la nube se reconstruye dist durante las compilaciones web)
• ios/ y android/ ellas mismas no son

✅ Éxito: git status muestra ios/ y android/ listo para commit (no ignorado).

Paso 7 — Commit y Push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Éxito: Su repositorio GitHub muestra los ios/ y android/ carpetas.

Paso 8 — Construye Binarios de Tienda Listos con Capgo Builder

No necesita un Mac o una pipeline local de Xcode/Android Studio para enviar. Capgo Builder compila, firma y puede enviar builds de iOS y Android desde la nube.

Configura Capgo Builder

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

Guarda las credenciales de firma una vez. Utiliza nuestras herramientas gratuitas si necesitas ayuda para generarlas:

• Generador de Certificado de iOS
• Generador de Keystore de Android
• Encuentra UDID de iOS — regístrate tu iPhone para builds de desarrollo

Ver Gestión de Credenciales y Construye iOS desde Windows.

Solicita un build en la nube

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release

Los registros de construcción se transmiten en tu terminal. Con App Store Connect configurado, los builds de iOS pueden subir a TestFlight automáticamente.

Instalar en un dispositivo real:

• iOS: TestFlight (recomendado) o un build de desarrollo con el UDID de tu dispositivo registrado
• Android: La pista de pruebas interna de Google Play o un APK/AAB firmado

✅ Éxito: Un build firmado se completa y puedes instalarlo en un dispositivo real.

Paso 9 — Opcional: Prueba localmente en Xcode o Android Studio

Si tienes un Mac o quieres pruebas de emulador antes de las construcciones en la nube:

Para iOS

Método 1: Utilizando Cursor AI (Recomendado)

Open the iOS project in Xcode

Método 2: Comando Manual

npx cap open ios

Configuración de Xcode para primera vez:

1. Seleccione un simulador desde el menú desplegable de dispositivos (por ejemplo, iPhone 15)
2. Para dispositivos reales: habilite Administrar automáticamente la firma y seleccione su equipo de desarrolladores de Apple
3. Haga clic en el botón ▶️ Play — el primer build tarda 5–10 minutos

Para Android

Método 1: Utilizando Cursor AI (Recomendado)

Open the Android project in Android Studio

Método 2: Comando Manual

npx cap open android

Configuración de Android Studio por primera vez:

1. Instale los paquetes faltantes de SDK si se le solicita
2. Crear un emulador en el Administrador de dispositivos (por ejemplo, Pixel 6, API 33+)
3. Haga clic en el botón verde ▶️ de ejecución — el primer build tarda entre 5 y 15 minutos

Use IDEs locales para depurar de manera diaria. Use Capgo Builder cuando necesite binarios de lanzamiento firmados.

✅ Éxito: La aplicación se abre en el simulador o emulador mostrando su contenido de Lovable.

Paso 10 — Habilitar Live Reload (Desarrollo)

Acelere la iteración apuntando la consola nativa a tu servidor de desarrollo local.

Método 1: Utilizando Cursor AI (Recomendado)

Dile a Cursor:

Set up live reload for Capacitor development with my local IP address

Método 2: Configuración manual

1. Encuentra tu dirección IP local:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. Actualizar capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

Usar puerto 8080 o 3000 si eso es lo que npm run dev imprime.

3. Aplicar cambios:

npx cap copy

✅ Éxito: Ediciones en su web code se recargan automáticamente en el dispositivo o simulador.

Paso 11 — Agregar una característica nativa: La cámara

Un Capacitor plugin permite a JavaScript llamar características reales del dispositivo. Agregaremos el plugin de cámara para que los usuarios puedan tomar una foto — algo que una pestaña de navegador no puede hacer de manera fiable.

Método 1: Utilizando Cursor AI (Recomendado)

Diga a Cursor:

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Método 2: Instalación manual

npm install @capacitor/camera
npx cap sync

iOS — agregar a ios/App/App/Info.plist dentro del nivel superior <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — agregar dentro <manifest> in android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

Agregar un plugin requiere una compilación nativa fresca a través de Capgo Builder antes de que funcione en dispositivos.

✅ Éxito: La cámara code compila y npx cap sync termina sin errores.

Paso 12 — Agregar Capgo Actualizaciones en vivo

Cada cambio nativo normalmente pasa por la revisión de la tienda de aplicaciones. Capgo Actualizaciones en vivo envía cambios a la capa web de tu aplicación (HTML, CSS, JS, imágenes) en minutos a través de la red.

Instale el actualizador en su primera versión de esta manera nunca se quedará esperando una revisión cuando necesite enviar una corrección.

npm install @capgo/capacitor-updater
npx cap sync

Agregar a capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

Iniciar en la entrada de su aplicación (por ejemplo, src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Comitar, subir y ejecutar un nuevo Capgo Builder build para que el actualizador SDK esté en la caja de arranque nativa.

Subir paquetes web después del lanzamiento:

npm run build
npx @capgo/cli@latest bundle upload --channel production

Ver Capgo Actualizaciones en vivo: documentación.

✅ Éxito: El plugin de actualizador está instalado y notifyAppReady() se ejecuta al iniciar.

Paso 13 — Corregir el espacio de la barra de estado con una actualización en vivo

On un iPhone real, su encabezado puede estar debajo de la barra de estado (reloj y batería). Moderno Capacitor dibuja de borde a borde, por lo que su aplicación debe respetar los recortes de área segura: env(safe-area-inset-top), -bottom, -left, -right.

Muchas aplicaciones Lovable ya manejan el recorte de la parte inferior pero utilizan un relleno de cabeza fijo (como pt-6) sin el recorte de la parte superior.

1. Confirmar viewport-fit=cover en index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. Corregir encabezados de cabeza — utilice max() para mantener el relleno web y crecer en dispositivos con notches:

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

In Cursor o Lovable, pregunte:

El contenido de la aplicación se ejecuta debajo de la barra de estado en la parte superior del móvil. Agregue env(safe-area-inset-top) al relleno superior de cada encabezado de página utilizando max(), manteniendo el relleno existente como mínimo.

3. Envíe la corrección a través de la red. — esto es pura CSS, no se necesita una reconstrucción nativa:

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

Forzar el cierre de la aplicación en su dispositivo, volver a abrirlo, esperar ~15–30 segundos y abrirlo de nuevo. El encabezado debería estar debajo de la barra de estado — corregido sin revisión de la tienda.

✅ Éxito: El contenido superior elimina la barra de estado después de que se aplique el paquete OTA.

Para trabajos de diseño más profundos, consulte @capgo/tailwind-capacitor y Capacitor pantalla de borde a borde.

Step 14 — Prepara tu lista de tienda

Tu aplicación está construida, instalable y puedes enviar actualizaciones instantáneas. Ir en vivo en las tiendas públicas es principalmente papeleo:

• Icono de la aplicación — 1024×1024px para iOS (sin transparencia), 512×512px para Google Play
• Capturas de pantalla — Apple requiere capturas de pantalla de iPhone 6.9“ (1320×2868px)
• Nombre de la aplicación, subtítulo, descripción, palabras clave
• URL de la política de privacidad — requerida por ambas tiendas, incluso para aplicaciones gratuitas
• Clasificación de edad — cuestionario en cada consola
• Discusiones sobre la recopilación de datos — Etiquetas de privacidad de Apple y seguridad de datos de Google

Método 1: Utilizando Cursor AI (Recomendado)

Set up app icons and splash screens for my Capacitor app

Método 2: Configuración manual

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

¿Qué queda antes de 'vivo':

1. Pruebas cerradas de Google Play (cuentas personales creadas después del 13 de noviembre de 2023): al menos 12 probadores durante 14 días consecutivos antes del acceso a la producción. iOS no tiene equivalente.
2. Enviar para revisión — Apple ~3–5 días, Google ~3–7 días después de que se cumplan los requisitos de prueba.

Consulte nuestro guía de revisión de aplicaciones para primerizos para obtener la lista de verificación completa.

Errores Comunes (y Cómo Solucionarlos)

• Could not find the web assets directory: ./dist — Ejecuta npm run build antes de npx cap add o npx cap sync. Asegúrate de que webDir en capacitor.config.ts coincida con la salida de tu framework (dist para Vite, out para Next.js static export).
• “Esta App ID … no está disponible” — Los IDs de bundle son únicos a nivel global. Elige un ID de dominio inverso que controlas.
• La compilación de iOS falla después de cambiar el ID de bundle — El ID en su proyecto nativo debe coincidir con Apple App Store Connect. Busque y reemplaze en todos los ios/ y android/, commit, rebuild.
• Pantalla blanca al iniciar — Establecer base: './' en la configuración de Vite, rebuild, y ejecutar npx cap sync.
• Contenido debajo de la barra de estado — Agregar viewport-fit=cover y env(safe-area-inset-top) espaciado (Paso 13).
• APK firmada en modo de depuración — Google Play rechaza ediciones de depuración. Utilice una edición de lanzamiento firmada con su keystore.
• Rechazo de despliegue — versión ya existe — Incrementa la versión/número de compilación en proyectos nativos y reconstruye.

Para Capgo problemas del constructor, consulta Troubleshooting de compilación nativa y Depuración de actualizaciones en vivo.

Conclusión

Ha llevado una aplicación web amable a iOS y Android nativos — construida en la nube sin Mac, con una característica de cámara real y una corrección de diseño enviada por aire. Eso es la parte difícil hecha.

Pasos siguientes

• Capgo Actualizaciones en vivo — Envía correcciones de interfaz de usuario y texto sin esperar la revisión de la tienda
• Capgo Constructor — Automatice los builds de lanzamiento en CI
• Capgo Directorio del plugin — Biometría, notificaciones push, geolocalización y más
• Guías relacionadas: Base44 a móvil · Bolt.new a móvil

Regístrate en una cuenta gratuita de Capgo para habilitar Actualizaciones en vivo y builds nativos en la nube.

Recursos

• Documentación Lovable
• Capacitor Documentación
• Capgo Builds nativos
• Capgo — Actualizaciones en vivo para aplicaciones Capacitor
• Construir iOS desde Windows
• Exportación estática de Next.js para móviles

Sigue adelante desde Convertir tu aplicación querida a iOS y Android con Capacitor

Si estás utilizando Convertir tu aplicación querida a iOS y Android con Capacitor para planificar el trabajo de plugin nativo, conecta con Capgo Directorio de plugins para el flujo de trabajo del producto en Capgo Directorio de plugins, Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, Capgo Compilaciones nativas para el flujo de trabajo del producto en Capgo Compilaciones nativas, y Compilar iOS desde Windows para compilaciones de iOS en la nube sin un Mac.