Aplicación móvil nativa con Base44 y Capacitor

Introducción

Base44 es una herramienta de construcción de aplicaciones impulsada por inteligencia artificial que genera aplicaciones React completas a partir de sugerencias. Puede enviar un producto funcional en el navegador rápido, pero ¿qué pasa si quiere que esté en iOS y Android? En este tutorial, mostramos cómo exportar su proyecto Base44 y convertirlo en aplicaciones móviles nativas con Capacitorluego envíe binarios de tienda firmados con Capgo Constructor — no se requiere Mac para iOS.

Al final de esta guía, su aplicación Base44 corre nativamente en iOS y Android con acceso a características de dispositivo como cámara, almacenamiento y notificaciones de empuje.

Requisitos previos y estimación de tiempo

Tiempo Requerido: 2-4 horas para la configuración inicial

Requisitos del Sistema:

• Para compilaciones de nube de iOS: Cualquier sistema operativo (Windows, Mac o Linux) con Capgo Builder
• Para compilaciones de nube de Android: Any OS
• Almacenamiento10 GB de espacio libre para dependencias y artefactos de compilación
• RAMMemoria RAM

Costs:

• Exportar Base44: Plan de constructor o superior (para exportar GitHub y descargar ZIP)
• Tienda de Aplicaciones de iOS: $99/año (Cuenta de Desarrollador de Apple)
• Tienda de Aplicaciones de Android:$25 una vez (desarrollador de Google Play)
• Cursor Pro: $20/mes (opcional pero recomendado)

Requisitos de Software:

• Node.js 18+
• Un editor code como Cursor

¿Por qué transformar tu aplicación Base44 a móvil?

• Alcance ampliado: Encuentra a los usuarios donde esperan un icono de aplicación nativa, no una pestaña de navegador
• Características nativas: Cámara, GPS, biométricas y almacenamiento en caché a través de plugins Capacitor
• Distribución en la tienda de aplicaciones: Publica en Google Play y la Tienda de Aplicaciones de Apple
• Iteración más rápidaPair Capgo actualizaciones en vivo con Capgo Builder para solucionar problemas de capa web sin recompilar binarios nativos cada vez

Paso 1: Exporta tu proyecto Base44

Base44 te permite exportar code una vez que estás en el plan de Constructor o superior. Tienes dos opciones principales.

Opción A: Exportar a GitHub (Recomendado)

1. Abra su aplicación en el editor Base44
2. Haga clic en el GitHub icón en la barra superior
3. Autorizar Base44 Builder y cree o conecte un repositorio
4. Base44 sincroniza automáticamente su aplicación code con GitHub (sincronización bidireccional en planes compatibles)

Ver Documentación de integración de Base44 GitHub para más detalles.

Opción B: Descargar como ZIP

1. Hacer clic Code en la barra superior para abrir el explorador de archivos
2. Hacer clic Exportar proyecto como ZIP en la parte superior derecha de la vista code
3. Extraer el archivo en tu computadora

Abrir el Proyecto en Cursor

1. Visitar cursor.sh y instalar Cursor
2. Copia tu repositorio GitHub (Git: Clone desde la paleta de comandos) o abre la carpeta ZIP extraída con Archivo > Abrir Carpeta

Para el mejor flujo de trabajo asistido por IA, habilita tu modelo preferido y permite la ejecución de comandos en las configuraciones de Cursor — el mismo setup descrito en nuestra Guía de amable a móvil.

Paso 2: Configura tu entorno de desarrollo

Base44 exporta un proyecto React estándar. Instala dependencias y confirma que el servidor de desarrollo funciona.

Usando Cursor AI (Recomendado)

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

Install Node.js if needed, install project dependencies, and start the dev server

Configuración Manual

cd your-base44-project
npm install
npm run dev

Su aplicación Base44 debería cargar en http://localhost:5173 o el puerto mostrado en la terminal.

Paso 3: Preparar la compilación de producción

Capacitor requiere activos web estáticos. Las aplicaciones de React Base44 suelen utilizar Vite y producen dist/.

Configura Vite para móviles

Pregúntale

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

Pregúntanos: vite.config.ts O actualizar

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

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

Prueba la compilación de producción

npm run build

Verificar un dist/ carpeta existe con index.html y activos empaquetados.

Paso 4: Agregue Capacitor a su proyecto Base44

Usando Cursor AI (Recomendado)

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

Instalación manual

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Comitar los ios/ y android/ carpetas a git. Capgo El compilador construye lo que hay en esas carpetas.

y el compilador de Capacitor compila lo que hay en esas carpetas.

Actualice capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

Considerar agregar @capgo/capacitor-updater Después de lanzar, así que puedes enviar actualizaciones OTA temprano. Capgo Documentación de actualizaciones en vivo.

Paso 6: Construye y sincroniza

Con cada cambio en la aplicación web:

npm run build
npx cap sync

Paso 7: Construye binarios listos para tiendas con Capgo Constructor (Recomendado)

La prueba en simulador es opcional. Para TestFlight, pruebas internas y presentación en tiendas, utiliza Capgo Constructor para compilar y firmar binarios nativos en la nube.

¿Por qué Capgo para aplicaciones Base44?

• No Mac necesario para iOS — construye desde Windows o Linux
• Mismo CLI que puede ejecutar su agente de IA — ajusta flujos de trabajo de codificación de Base44 → GitHub → Cursor
• Parece con Actualizaciones en vivo — corrige la interfaz y copia en el aire; reconstruye nativo solo cuando cambien plugins o permisos

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. Consulta Administración de credenciales y Construye iOS desde Windows.

Solicita una construcción en la nube

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

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

Sube tu paquete web para actualizaciones OTA:

npx @capgo/cli@latest bundle upload --channel production

8. Paso: Opcional — Prueba localmente en Xcode o Android Studio

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

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Usa IDEs locales para depuración diaria. Usa Capgo Constructor cuando necesites binarios de lanzamiento firmados.

9. Paso: Agrega Características Nativas

Mejora tu aplicación Base44 con capacidades de dispositivo:

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

Pregúntale a Cursor que conecte Compartir, Cámara o Push en tus componentes de React. Después de agregar plugins, ejecuta un nuevo Capgo Constructor construya antes de la presentación de la aplicación.

Paso 10: Optimizar para la producción

Iconos de Aplicación y Pantallas de Inicio

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

Consideraciones del Backend de Base44

Exportados las aplicaciones Base44 pueden llamar al backend hospedado de Base44 y SDK. Eso suele funcionar en Capacitor siempre y cuando:

• Las llamadas API utilizan HTTPS
• Auth redirects work inside the WebView (test login on a real device)
• Los enlaces profundos están configurados si utilizas flujos de enlace mágico o OAuth

Las enlaces profundos estén configurados si utiliza flujos de enlace mágico o OAuth base44.entities.* y sus llamadas relacionadas SDK con su propio API — la capa de interfaz de usuario de React suele persistir.

Resolución de Problemas Comunes

Pantalla en blanco al inicio

• Confirmar base: './' se configura en la configuración de Vite
• Ejecutar npm run build Compare Codepush Step2 Text: ... dist/index.html Compare Step Build Text: ...
• Ejecutar npx cap sync Compare Step Install Text: ...

Errores de construcción en Capgo Constructor

• Commit ios/ and android/ Errores de compilación en __CAPGO_KEEP_0__ Builder
• Ejecuta npx cap sync Ejecuta — sin mantener una granja local de Xcode.
• Nuevos plugins Capacitor requieren una compilación nativa fresca

No disponible en Base44

GitHub export and ZIP download require the Exportar no está disponible en Base44Actualiza en Base44 o copia los archivos manualmente desde la vista Code en niveles inferiores.

Conclusion

Has exportado una aplicación de React generada por Base44, envuelta con Capacitor, y tiene un claro camino hacia binarios firmados de iOS y Android a través Capgo Constructor — sin mantener una granja local de Xcode.

Próximos Pasos

• Capgo Actualizaciones en vivo: Envíe correcciones de UI y copia sin esperar la revisión de la tienda
• Capgo Constructor: Automatice las compilaciones de lanzamiento en CI
• Notificaciones push: Agregue @capacitor/push-notifications : y reconstruya con Capgo Constructor
• Guías relacionadas: Lovable a móvil · Bolt.new a móvil

Regístrese en una cuenta gratuita de Capgo Habilitar actualizaciones en vivo y construcciones nativas en la nube.

Recursos

• Documentación de Base44
• Integración de Base44 GitHub
• Capacitor Documentación
• Capgo Compilaciones Nativas
• Capgo — Live Updates for Capacitor Apps

Siga adelante desde Base44 a aplicaciones móviles nativas con Capacitor

Si está utilizando Base44 para aplicaciones móviles nativas con Capacitor para planificar el trabajo de plugin nativo, conecte con Capgo Directorio de Plugin para el flujo de trabajo del producto en Capgo Directorio de Plugin Capacitor Plugins by Capgo para los detalles de implementación en Capacitor Plugins por Capgo Capgo Compilaciones nativas para el flujo de trabajo del producto en Capgo Compilaciones nativas, y Construir iOS desde Windows sin una Mac para builds de iOS en la nube.