Aplicaciones móviles nativas con Base44 y Capacitor

Introducción

Base44 es un constructor de aplicaciones móviles impulsado por inteligencia artificial que genera aplicaciones React completas a partir de promps. Puedes enviar un producto funcionante en el navegador rápido — pero ¿qué pasa si quieres que esté en iOS y Android? En este tutorial, mostramos cómo exportar tu proyecto Base44 y convertirlo en aplicaciones móviles nativas con CapacitorEntonces envíe los binarios de tienda firmados con Capgo Constructor — no se requiere Mac para iOS.

Al final de esta guía, su aplicación Base44 se ejecuta de forma nativa en iOS y Android con acceso a características del dispositivo como cámara, almacenamiento y notificaciones push.

Requisitos previos & Estimación de tiempo

Tiempo requerido: 2-4 horas para la configuración de primera vez

Requisitos del sistema:

Para las compilaciones de nube de iOS: Cualquier OS (Windows, Mac o Linux) con Capgo Constructor
Para las compilaciones de nube de Android: Cualquier OS
Almacenamiento: 10GB de espacio gratuito para dependencias y artefactos de compilación
Memoria RAM: 8GB mínimo

Gastos:

Exportación Base44: Plan Builder o superior (para GitHub exportación y descarga de 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 como code Cursor

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

Alcance ampliado: Conoce 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 de Capacitor
Distribución en la Tienda de Aplicaciones: Publica en Google Play y la Tienda de Aplicaciones de Apple
Iteración más rápida: Pair Capgo Actualizaciones en vivo con Capgo Constructor para reparaciones de layer web sin tener que reconstruir binarios nativos cada vez

Paso 1: Exportar su proyecto Base44

Base44 le permite exportar code una vez que esté en el plan de construcción o superior . Tiene dos opciones principalesOpción A: Exportar a __CAPGO_KEEP_0__ (Recomendado)

Option A: Export to GitHub (Recommended)

Haga clic en el icono
__CAPGO_KEEP_0__ GitHub Autorizar
Base44 lets you export __CAPGO_KEEP_0__ once you are on the Builder plan or higher Constructor 44 Builder y crea o conecta un repositorio
Base44 sincroniza automáticamente tu aplicación code con GitHub (sincronización bidireccional en planes soportados)

Ver Documentación de integración de Base44 GitHub para detalles.

Opción B: Descargar como ZIP

Hacer clic Code en la barra superior para abrir el explorador de archivos
Hacer clic Exportar proyecto como ZIP In la esquina superior derecha de la vista code
Extraiga el archivo en su computadora

Abra el Proyecto en Cursor

Visite cursor.sh y instale Cursor
Clone su repositorio GitHub (Git: Clone desde la paleta de comandos) o abra la carpeta ZIP extraída con Archivo > Abrir Carpeta

Inicie Cursor

Para el mejor flujo de trabajo con asistencia de inteligencia artificial, active su modelo preferido y permita la ejecución de comandos en las configuraciones de Cursor — el mismo conjunto de configuraciones descrito en nuestra Guía amable a móvil.

Paso 2: Configura tu entorno de desarrollo

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

Usar Cursor AI (Recomendado)

Presiona Command+K (Mac) o Ctrl+K (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

La aplicación Base44 está funcionando localmente

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

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

Capacitor necesita activos web estáticos. Las aplicaciones de React de Base44 suelen utilizar Vite y enviar a dist/.

Configure Vite para móviles

Pregúntale a Cursor:

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

O actualice vite.config.ts manualmente:

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

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

Pruebe la compilación de producción

npm run build

Verifique que un dist/ carpeta exista con index.html y activos empaquetados.

Salida de compilación Base44

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

Capacitor inicialización para una aplicación Base44

Comite los ios/ y android/ carpetas a git. Capgo Constructor compila lo que está en esas carpetas.

Paso 5: Configure Capacitor

Actualizar 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 antes para que puedas enviar actualizaciones OTA después del lanzamiento. Consulte Capgo actualizaciones en vivo docs.

Paso 6: Compilar y Sincronizar

Cada vez que cambies la aplicación web:

npm run build
npx cap sync

Capacitor sincronización completa para una aplicación Base44

Step 7: Construye Binarios Listos para la Tienda con Capgo Constructor (Recomendado)

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

¿Por qué Capgo Constructor para aplicaciones Base44?

No se requiere Mac para iOS — construye desde Windows o Linux
Lo mismo que CLI que puede ejecutar tu agente de IA — se ajusta a los flujos de trabajo de codificación en vivo de Base44 → GitHub → Cursor
Compatibilidad con Actualizaciones en Vivo — corrige la interfaz de usuario y copia en el aire; reconstruye nativo solo cuando cambien plugins o permisos

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

Almacena credenciales de firma una vez. Consulte Gestió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, las construcciones de iOS pueden subir a TestFlight automáticamente.

Sube tu paquete web para actualizaciones OTA:

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

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

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

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

Xcode abriendo un proyecto Base44 Capacitor

Utiliza IDEs locales para depuración diaria. Utiliza Capgo Builder When necesitas binarios de liberación firmados.

Step 9: Agregar Características Nativas

Mejora tu aplicación Base44 con capacidades de dispositivo:

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

Pide a Cursor que conecte Compartir, Cámara o Notificaciones a tus componentes de React. Después de agregar plugins, ejecuta un nuevo Capgo Constructor construye antes de la presentación en tiendas.

Características nativas agregadas a una aplicación Base44 Capacitor

Step 10: Optimizar para 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

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

API utiliza HTTPS
Funcionan las redirecciones de autenticación dentro de la WebView (prueba de inicio de sesión en un dispositivo real)
Se configuran los enlaces profundos si utiliza flujos de enlace mágico o OAuth

Si más tarde migra de la base de datos de Base44, planifique reemplazar base44.entities.* y llamadas relacionadas SDK con sus propias API — la capa de interfaz de usuario de React suele sobrevivir

Resolución de Problemas Comunes

Pantalla blanca al lanzar

Confirmar base: './' se establece en la configuración de Vite
Ejecutar npm run build y verificar que dist/index.html carga activos con rutas relativas
Ejecutar npx cap sync después de cada construcción web

Errores de construcción en Capgo Builder

Commit ios/ y android/ antes de solicitar una construcción en la nube, sube a git
Ejecutar npx cap sync localmente para que los activos web se copien en los proyectos nativos
Los nuevos plugins de Capacitor requieren una construcción nativa fresca

No disponible para exportar en Base44

GitHub export y descarga ZIP requieren el plan Builder o superior Actualiza en Base44 o copia los archivos manualmente desde la vista de __CAPGO_KEEP_0__ en niveles inferioresActualiza en Base44 o copia los archivos manualmente desde la vista de Code en niveles inferiores

Conclusión

Exportaste una aplicación de React generada por Base44, la envolviste con Capacitor y tienes un claro camino hacia binarios firmados de iOS y Android a través de Capgo Builder — sin mantener una granja local de Xcode.

Pasos siguientes

Capgo Live Updates: Envía correcciones de interfaz de usuario y texto sin esperar la revisión de la tienda
Capgo Builder: Automatiza compilaciones de lanzamiento en CI
Notificaciones push: Agrega @capacitor/push-notifications y reconstruye con Capgo Builder
Guías relacionadas: Amable a móvil · Bolt.new a móvil

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

Recursos

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

Si estás utilizando Aplicaciones móviles nativas con Capacitor para planificar el trabajo de plugins nativos, 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 Compilaciones nativas, y Compilar iOS desde Windows para realizar compilaciones de iOS en la nube sin un Mac.

Aplicaciones Móviles Nativas con Capacitor