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

Introducción

Amable es una aplicación de construcción de IA que convierte promesas en aplicaciones de React funcionales en minutos. Puedes enviar en el navegador rápido, pero ¿qué pasa si quieres tu aplicación en la Tienda de App y Google Play, sentada en pantallas de inicio como cualquier otra aplicación nativa?

Esta guía te guía a través del camino completo: exportar desde Amable, envolver la aplicación web con Capacitorconstruye binarios iOS y Android firmados en la nube con Capgo Builder (no se requiere Mac), agrega una característica nativa real y envía una corrección de diseño por aire con Capgo Live Updates.

Usamos Cursor a lo largo de todo — 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 funcionando 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. El camino principal en esta guía construye en la nube y instala en dispositivos reales sin ellos.

Nota rápida sobre Lovable y frameworks

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

Por mucho tiempo, el default 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 Comience con TanStack con renderizado del lado del servidor (SSR) por defecto. 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 SSR espera a un servidor para renderizar 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:

• Empezando desde cero: Pida a Lovable una aplicación de una sola página (SPA) o omitir SSR para obtener una construcción estática dist/ carpeta.
• Ya en TanStack Start (SSR): Configúralo para pre-renderizar o para exportar una SPA estática. El único requisito es una carpeta de construcción estática que contenga index.html.
• Proyectos de Lovable Legacy Next.js: Usa exportación estática — se envía a out/ en lugar de dist/.

Independientemente del framework que utilices, apunta a Capacitor en esa carpeta. Para una SPA Vite, esa carpeta es webDir Paso 1 — Exporta tu aplicación Lovable a __CAPGO_KEEP_0__ dist.

Lovable mantiene tu GitHub en su editor hasta que conectes __CAPGO_KEEP_1__

Lovable keeps your code in its editor until you connect GitHub.

1. Abra su proyecto Lovable en el navegador
2. Haga clic Actualice Si es necesario, abra (en la esquina superior derecha), luego abra Git en el menú de la izquierda
3. Seleccione GitHub, autorice a Lovable y vincule su cuenta
4. Lovable crea un repositorio y envía automáticamente su aplicación

✅ Éxito: Visitar 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 Cursor, un editor impulsado por inteligencia artificial que puede ejecutar comandos de terminal para ti.

Descargar e Instalar Cursor

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

Configure Cursor para el desarrollo de inteligencia artificial

Para una mejor experiencia, configure Cursor antes de empezar:

1. Compre un Plan de Cursor — Si bien Cursor ofrece una versión gratuita, un plan Pro ($20/mes) le da acceso ilimitado a completaciones de AI, acceso a Claude y GPT-4, y ejecución de comandos
2. Abra 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. Hacer que se ejecuten comandos — Habilita el cursor para ejecutar comandos por ti:

Copia tu repositorio en el cursor

1. En el cursor, presiona Shift+Command+P (Mac) o Shift+Ctrl+P abrir el cuadro de comando
2. Escribir ‘clone’ y seleccionar Git: Clonar
3. Pegar la URL de repositorio de GitHub: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Elegir una carpeta donde deseas guardar el proyecto

5. Cursor clonará y abrirá tu proyecto

Paso 3 — Instalar Dependencias y Ejecutar Localmente

Método 1: Utilizando Cursor AI (Recomendado)

1. Abrir la pestaña de AI de Cursor pulsando Command+K (Mac) o Ctrl+K (Windows)
2. Escriba la siguiente instrucción:

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, ejecutará npm install, y arrancará el servidor de desarrollo con npm run dev.

Método 2: Instalación manual

Abra 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. Descargue 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 http://localhost:5173 — utilice la dirección que imprima su terminal.

Pulsa 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 (la mayoría de las aplicaciones Lovable)

Método 1: Utilizando Cursor AI (Recomendado)

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

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

Método 2: Configuración manual

Confirmar vite.config.ts usa una base relativa para que los activos se carguen dentro del WebView nativo:

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

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

Construye y verifica:

npm run build

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

Proyectos de Lovable con Next.js legado

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 de Next.js en móvil para obtener la configuración completa, luego utiliza next.config en __CAPGO_KEEP_0__ en lugar de webDir: 'out' in Capacitor instead of dist.

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

5. — Agregue Capacitor y Plataformas Nativas

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

Método 1: Usando 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 preguntará por el nombre de tu 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 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 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

Configura Capacitor

Método 1: Utilizando Cursor AI (Recomendado)

Pregúntale 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;

Construye y Sincroniza

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

Ahora tu proyecto 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 necesitas CocoaPods. Capacitor 8 utiliza el administrador de paquetes Swift para las dependencias de iOS de manera automática.

✅ Éxito: ios/ y android/ contexto Sync finished.

aparecen carpetas y la terminal muestra .gitignore

Capgo Builder compiles from your Git repository, so ios/ __CAPGO_KEEP_0__ El compilador del constructor compila desde tu repositorio de Git, por lo que android/ ydebe haberse comprometido

. Un error común es ignorarlos en la raíz del repositorio.

• Confirmar: Raíz .gitignore ignora node_modules y dist (la nube se reconstruye dist durante las compilaciones web)
• ios/ y android/ se ignoran no se ignoran

✅ Éxito: git status muestra ios/ y android/ listos para commitar (no ignorados)

Step 7 — Comite y Empuja

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

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

Step 8 — Construye Binarios Listos para Tiendas con Capgo Builder

No necesita un Mac ni una pipeline local de Xcode/Android Studio para enviar. Capgo Builder No necesita un Mac ni una pipeline local de Xcode/Android Studio para enviar.

Set up 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

Configura __CAPGO_KEEP_0__ Builder

• 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
• Encuentrador de UDID de iOS — regístrate con tu iPhone para construir versiones de desarrollo

Ver Gestionar 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 a TestFlight automáticamente.

Instalar en un dispositivo real:

• iOS: TestFlight (recomendado) o una construcción de desarrollo con el UDID de tu dispositivo registrado
• Android: Google Play de pruebas internas o un APK/AAB firmado

✅ Éxito: Un paquete 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 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. For dispositivos reales: habilite Administre automáticamente la firma y seleccione su equipo de desarrolladores de Apple
3. Haga clic en el botón ▶️ Play — el primer build toma 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 SDK si se le pide
2. Cree un emulador en Administrador de dispositivos (por ejemplo, Pixel 6, API 33+)
3. Click the green ▶️ Run button — first build takes 5–15 minutes

Use IDEs locales para depurar de manera diaria. Use Capgo Constructor cuando necesites binarios de lanzamiento firmados.

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

Paso 10 — Habilitar Live Reload (Desarrollo)

Acelera la iteración apuntando la caja de comandos 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. Encuentre su 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 ¿Qué alternativas tiene para actualizar en vivo? npm run dev ¿Qué alternativas tiene para actualizar en vivo?

3. ¿Qué alternativas tiene para actualizar en vivo?

npx cap copy

✅ Si eso es lo que Edits to your web code hot-reload on the device or simulator.

Aplicar cambios:

Recarga en vivo habilitada: Éxito: Los cambios en su web Capacitor se recargan en vivo en el dispositivo o simulador.

Metodo 1: Usando Cursor AI (Recomendado)

Diga a Cursor:

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

Metodo 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 una nueva compilación nativa por Capgo Builder antes de que funcione en dispositivos.

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

Paso 12 — Agregue Capgo Actualizaciones en vivo

Todos los cambios nativos normalmente pasan por la revisión de la tienda de aplicaciones. Capgo Actualizaciones en vivo contexto: Página/área: Página de producto de actualizaciones en vivo. Rol: Etiqueta de IU corta o elemento de navegación. Visto en: página live-update.astro. Preservar términos de producto/marca y de desarrollador de Capgo exactamente. Clave de mensaje `live_update_hero_badge` (Badges de héroe de actualizaciones en vivo).

envíe cambios a la capa web de su aplicación (HTML, CSS, JS, imágenes) por aire en minutos. Instale el actualizador en su primera versión

npm install @capgo/capacitor-updater
npx cap sync

para que nunca se quede esperando a la revisión cuando necesita enviar una corrección. 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;

Agregar a: Inicialice en su entrada de aplicación (por ejemplo, src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Haz un nuevo Capgo Builder build, envía los cambios y ejecuta el build en la consola nativa para que el actualizador SDK esté disponible.

Subir paquetes web después del lanzamiento:

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

Ver Documentación de Capgo Live Updates.

Para automatizar esta subida cada vez que alguien haga clic en Publish en Lovable, sigue estos pasos: Automatizar Capgo Live Updates desde Lovable con GitHub Actions.

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

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

On un iPhone real, tu encabezado puede estar debajo the status bar (clock and battery). Modern Capacitor draws edge-to-edge, so your app must respect la barra de estado (reloj y batería). Moderno __CAPGO_KEEP_0__ dibuja de borde a borde, por lo que tu aplicación debe respetar: env(safe-area-inset-top), -bottom, -left, -right.

los ajustes de área segura pt-6Muchas aplicaciones Lovable ya manejan el ajuste de la parte inferior pero utilizan un relleno de cabeza fijo (como

) sin el ajuste de la parte superior. viewport-fit=cover 1. Confirmar index.html:

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

en 2. Corregir encabezados de cabeza max() — usar

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

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

para mantener el relleno web y crecer en dispositivos con notches:

“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 por aire” “— 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

“Cierre la aplicación en su dispositivo, la reabra, espere ~15–30 segundos y la vuelva a abrir. 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 aplicar el paquete OTA.”

“Para trabajos de diseño más profundos, consulte” “@capgo/tailwind-capacitor” “y” Capacitor edge-to-edge display.

Step 14 — Prepara 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 context: Página/área: Página de soluciones de la aplicación. Papel: Etiqueta de navegación o elemento UI corto. Visto en: componente soluciones/SoluciónAppExample.astro. Clave de mensaje `solution_app_examples_rating` (Clasificación de aplicaciones de soluciones).
• Capturas de pantalla de datos de colección — Etiquetas de privacidad de Apple y Nutrición 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 nuestro 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 — Correr npm run build antes de npx cap add o npx cap synco webDir o capacitor.config.ts odist o out o
• o o
• o — El ID en tu proyecto nativo debe coincidir con Apple App Store Connect. Busca y reemplaza en ios/ y android/, commit, rebuild.
• Pantalla en blanco 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. Utiliza una edición de lanzamiento firmada con tu 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 con el constructor, consulta Solución de problemas de compilación nativa y contexto: Página/área: Sitio web de marketing de Capgo. Rol: Etiqueta de IU corta o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `y` (Y)..

Depuración de actualizaciones en vivo

Conclusión

Has 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 lo difícil que se ha hecho.

• Capgo Live Updates contexto: Página/área: Página de producto de Capgo Builder / compilación nativa en la nube. Rol: Etiqueta de IU corta o elemento de navegación. Clave de mensaje `native_build_builder_credit_next` (Crédito del constructor de compilación nativa Siguiente).
• Capgo Actualizaciones en vivo — Automatice las compilaciones de lanzamiento en CI
• Capgo Directorio de plugins — 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 compilaciones nativas en la nube.

Recursos

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

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 los detalles de implementación en Capacitor Plugins por Capgo, Capgo Compilaciones Nativas para el flujo de trabajo del producto en Capgo Nativas Builds, y Construir iOS desde Windows para las compilaciones de iOS en la nube sin un Mac.