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

Introducción

Lovable es un constructor de aplicaciones de inteligencia artificial 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?

Esta guía recorre el camino completo: exportar desde Lovable, envolver la aplicación web con __CAPGO_KEEP_0__ Capacitorconstruye binarios de iOS y Android firmados en la nube con Capgo Constructor (no se requiere Mac), agrega una característica nativa real y envía una corrección de diseño por aire con Capgo Actualizaciones en vivo.

Usamos Cursor a lo largo de — su IA puede ejecutar la mayoría de los comandos de la terminal para usted si prefiere no escribirlos manualmente.

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

Al final, tendrá:

• 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 pruebas internas de Play)
• Una característica de cámara que 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 saltarse ambos. La ruta principal en esta guía construye en la nube y instala en dispositivos reales sin ellos.

Una Nota Rápida sobre Lovable y Frameworks

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

Hace mucho tiempo, el valor por defecto de Lovable era una aplicación de una página única (SPA) con React + Vite. A partir de 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 en su raíz — que se envía dentro de la aplicación en el dispositivo.

Una aplicación de 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 estática, renderizada por el cliente.

¿Qué hacer:

• Empezar desde cero: Pide a Lovable un aplicación de una sola página (SPA) o para saltarte la SSR para obtener una static dist/ carpeta.
• Ya en TanStack Start (SSR): Configúralo para pre-renderizar o para obtener una static SPA. La única exigencia dura es una carpeta de compilación estática que contenga index.html.
• Proyectos de Lovable Legacy Next.js: Utiliza exportación estática — se envía a out/ en lugar de dist/.

Independientemente del framework que utilices, apunta a la carpeta de Capacitor. webDir Para una SPA de Vite, esa carpeta es dist.

Paso 1 — Exporta tu aplicación querida a GitHub

Lovable mantiene tu code en su editor hasta que conectes GitHub.

1. Abre tu proyecto de Lovable en el navegador
2. Haz clic Actualiza (en la esquina superior derecha) si es necesario, luego abre 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: Visitar github.com/YOUR-USERNAME/your-app muestra la aplicación de code.

Paso 2 — Configura el cursor y clona tu proyecto

Antes de poder trabajar con tu code localmente, necesitarás un code editor. Recomendamos Cursor, un editor impulsado por inteligencia artificial que puede ejecutar comandos de terminal para ti.

Descarga e Instala Cursor

1. Visita cursor.sh y descarga la versión para tu sistema operativo
2. Instala Cursor siguiendo el asistente de instalación
3. Una vez instalado, abre Cursor

Configura el Cursor para el desarrollo de IA

Para la mejor experiencia, configura el Cursor antes de empezar:

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

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

4. Selecciona tu modelo preferido — Elige Claude o GPT-4 para mejores resultados:

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

Copia tu repositorio en el cursor

1. En el cursor, presiona Shift+Command+P (Mac) o Shift+Ctrl+P (Windows) para abrir el panel de comandos
2. Escribe ‘clone’ y selecciona Git: Clonar“
3. Pegue su GitHub URL de repositorio: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Elija una carpeta donde quiere guardar el proyecto

5. Cursor clonará y abrirá su proyecto

Paso 3 — Instalar Dependencias y Ejecutar Localmente

Método 1: Usando Cursor AI (Recomendado)

1. Abra la pestaña de AI de Cursor presionando Command+K (Mac) o Ctrl+K (Windows)
2. Escriba 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 su sistema operativo, instalará Node.js y ejecutará npm install, y arranca el servidor de desarrollo con npm run dev.

Método 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. Descarga el 24 LTS instalador desde nodejs.org
2. Ejecutar el instalador
3. Abrir terminal y ejecutar:

cd your-lovable-app
npm install
npm run dev

Las aplicaciones de lovable suelen ejecutarse en http://localhost:8080 o http://localhost:5173 — utilice la dirección que imprima su terminal.

Presione Ctrl + C para detener el servidor de desarrollo cuando esté listo para continuar.

✅ Éxito: Su aplicación se abre en el navegador con su interfaz de usuario funcionando.

Paso 4 — Preparar la compilación de producción estática

Capacitor 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)

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

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

Método 2: Configuración manual

Confirmar vite.config.ts utiliza 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',
  },
})

Construya y verifique:

npm run build

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

Proyectos de Lovable Next.js heredados

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 Convierte tu aplicación Next.js en móvil para el full next.config setup, luego usa webDir: 'out' en Capacitor en lugar de dist.

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

Step 5 — Agrega Capacitor y Plataformas Nativas

Capacitor envuelve tu 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 pregunta:

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

El AI te pedirá tu nombre de aplicación y ID de paquete (por ejemplo, com.yourcompany.myapp).

Metodo 2: Instalación Manual

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

Cuando se le solicite:

Elige un ID de paquete que realmente poseas. Los IDs de paquete son únicos a nivel global. Utiliza un ID de dominio inverso basado en un dominio que controlas desde el principio — cambiarlo más tarde significa encontrar y reemplazar en todo el 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, pídele que lo utilice out en lugar de.

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;

Construir y Sincronizar

Método 1: Usando Cursor AI (Recomendado)

Diga a Cursor:

Build the production web app and sync it with Capacitor platforms

Método 2: Comandos Manuales

npm run build
npx cap sync

Su 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 dependencias de iOS automáticamente.

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

Paso 6 — Verifique su .gitignore

Capgo El compilador de la construcción compila desde su repositorio Git, por lo que ios/ y android/ debe haberse comprometido. Un error común es ignorarlos en la raíz del repositorio.

Confirmar:

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

✅ Éxito: git status muestra ios/ y android/ listo para hacer el 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 el ios/ y android/ carpetas.

Paso 8 — Construye Binarios Listos para Tiendas con Capgo Constructor

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

Configura Capgo Constructor

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

Guarde las credenciales de firma una vez. Utilice nuestras herramientas gratuitas si necesita ayuda para generarlas:

• Generador de Certificado de iOS
• Generador de Keystore de Android
• Encuentra el UDID de iOS — regístre su iPhone para builds de desarrollo

Mire Gestión de credenciales y Construir iOS desde Windows.

Solicitar una construcción 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 muestran en tu terminal. Con App Store Connect configurado, las construcciones de iOS pueden subir automáticamente a TestFlight.

Instalar en un dispositivo real:

• iOS: TestFlight (recomendado) o una construcción de desarrollo con el UDID de tu dispositivo registrado
• Android: Pista de prueba interna de Google Play o una APK/AAB firmada

✅ Éxito: Una construcción firmada se completa y puedes instalarla en un dispositivo real.

Step 9 — Opcional: Prueba Localmente en Xcode o Android Studio

Si tienes un Mac o deseas pruebas de emulador antes de las compilaciones 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 por primera vez:

1. Selecciona un simulador desde el menú desplegable de dispositivos (por ejemplo, iPhone 15)
2. Para dispositivos reales: habilita Gestiona automáticamente la firma y selecciona tu equipo de desarrolladores de Apple
3. Haz clic en el botón ▶️ de reproducción — la primera compilación tarda 5–10 minutos

Para Android

Método 1: Usando Cursor AI (Recomendado)

Open the Android project in Android Studio

Método 2: Comando Manual

npx cap open android

Configuración de Android Studio para primera vez:

1. Instale los paquetes faltantes SDK si se le pide
2. Cree un emulador en Administrador de dispositivos (por ejemplo, Pixel 6, API 33+)
3. Haga clic en el botón de ejecución verde ▶️ — la primera compilación toma 5-15 minutos

Use IDEs locales para depurar de manera diaria. Use Capgo Builder when you need signed release binaries.

✅ Éxito: La aplicación se abre en el simulador o emulador mostrando tu contenido querido.

Paso 10 — Habilitar Live Reload (Desarrollo)

Acelera 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 refrescan en caliente en el dispositivo o simulador.

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

Un Capacitor plugin permite a JavaScript llamar características de dispositivos reales. 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 de <manifest> en 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 un nueva compilación nativa a través de Capgo Builder antes de que funcione en dispositivos.

✅ Éxito: Cámara code compila y npx cap sync se completa sin errores.

Step 12 — Agrega Capgo Actualizaciones en Vivo

Todo 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 Internet.

Instala el actualizador en tu primera versión de esta manera nunca te quedarás esperando a la revisión cuando necesites 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;

Inicializa en tu entrada de aplicación (por ejemplo, src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Comite, envía y ejecuta una nueva construcción del Capgo Constructor de Build para que el actualizador SDK esté en la caja de la shell nativa.

Sube paquetes web después del lanzamiento:

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

Ver Capgo Actualizaciones en Vivo docs.

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

Paso 13 — Corrige el espaciado de la barra de estado con una actualización en vivo.

En un iPhone real, tu encabezado puede estar debajo de la barra de estado (reloj y batería). Moderno Capacitor dibuja de borde a borde, por lo que tu aplicación debe respetar los recortes de área segura. Muchas aplicaciones de Lovable ya manejan el recorte de la parte inferior, pero utilizan un relleno de padding superior fijo (como : env(safe-area-inset-top), -bottom, -left, -right.

) sin el recorte superior. pt-61. Confirmar

in viewport-fit=cover en index.html:

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

2. Corregir encabezados superiores – use 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, pregunta:

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

3. Envía 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 tu dispositivo, reabrela, espera ~15–30 segundos, y vuelve a abrir. La barra de 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 de layout más profundos, consulte @capgo/tailwind-capacitor y Capacitor pantalla de borde a borde.

Paso 14 — Preparación de su lista de tienda

Su aplicación está construida, instalable y puede 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 — requerido por ambas tiendas, incluso para aplicaciones gratuitas
• Clasificación de edad — cuestionario en cada consola
• Discusiones de recopilación de datos — Etiquetas de Nutrición 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. Presentar para revisión — Apple ~3–5 días, Google ~3–7 días después de que se cumplan los requisitos de prueba.

Consulte nuestra guía de revisión de aplicaciones para principiantes para obtener la lista 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 syncAsegúrese de que webDir se ajuste a su salida de marco ( capacitor.config.ts para Vite,dist para Vite, out para la exportación estática de Next.js).
• “Esta App ID … no está disponible” — Los IDs de paquete 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 paquete — El ID en tu proyecto nativo debe coincidir con Apple App Store Connect. Busca y reemplaza en todos los ios/ y android/, commit, reconstruye.
• Pantalla blanca al iniciar — Establece base: './' en la configuración de Vite, reconstruye y ejecuta npx cap sync.
• Contenido debajo de la barra de estado — Agrega viewport-fit=cover y relleno (Paso 13). env(safe-area-inset-top) APK firmado en modo 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
• — Incremente la versión/número de compilación en proyectos nativos y vuelva a compilar. Para __CAPGO_KEEP_0__ problemas del constructor, consulte

For Capgo Builder issues, see 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.

y

Pasos siguientes

• Capgo Actualizaciones en vivo — Envíe actualizaciones de UI y correcciones de copia sin esperar la revisión de la tienda
• Capgo Constructor — Automatice la creación de versiones de lanzamiento en CI
• Capgo Directorio de plugins — Biometría, notificaciones de empuje, geolocalización y más
• Guías relacionadas: Base44 a móvil · Bolt.new a móvil

Regístrese en una cuenta gratuita de Capgo para habilitar Actualizaciones en vivo y compilaciones nativas en la nube.

Recursos

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

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

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