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 sugerencias. 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 Capacitor, luego 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 ejecuta natively en iOS y Android con acceso a características de dispositivo como cámara, almacenamiento y notificaciones push.

Requisitos previos & Estimación de tiempo

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

Requisitos del sistema:

Para las compilaciones de nube de iOS: Cualquier sistema operativo (Windows, Mac o Linux) con Capgo Constructor
Para las compilaciones de nube de Android: Cualquier sistema operativo
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 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 Base44 App a 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
Mayor iteración: Pair Capgo Actualizaciones en vivo con Capgo Constructor para correcciones en la capa 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
Paso 2: Exportar a __CAPGO_KEEP_0__ Constructor Base44 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 navegador 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
Copie 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 setup descrito en nuestra Guía de 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 o Ctrl+K 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 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 Mobile

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 Live Updates 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

Paso 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
Mismo CLI que puede ejecutar su agente de IA — se ajusta a los flujos de trabajo de codificación en vivo de Base44 → GitHub → Cursor
Pares con Actualizaciones en Vivo — corrija la interfaz y copie en el aire; reconstruya 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

Almacene las credenciales de firma una vez. Consulte Administración de credenciales y Construya iOS desde Windows.

Solicite 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 su terminal. Con la configuración de App Store Connect, las construcciones de iOS pueden subir a TestFlight automáticamente.

Suba su paquete web para actualizaciones OTA:

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

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

Si tiene un Mac o quiere 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

Use IDEs locales para depuración diaria. Use Capgo Builder cuando necesites binarios de liberación firmados.

Paso 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 Push en 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

Paso 10: Optimizar para Producción

Íconos de Aplicación y Pantallas de Splash

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 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
Los redireccionamientos de autenticación funcionan dentro de la vista de WebView (prueba de inicio de sesión en un dispositivo real)
Los enlaces profundos están configurados si utilizas flujos de enlace mágico o OAuth

Si más tarde migras a un backend diferente de Base44, planifica reemplazar base44.entities.* y llamadas relacionadas SDK con tus propias API — la capa de interfaz de usuario de React suele sobrevivir

Resolución de Problemas Comunes

Pantalla blanca al iniciar

Confirmar base: './' está configurado 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
Ejecuta 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 la exportación 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

Has exportado una aplicación de React generada por Base44, la ha envuelto con Capacitor, y tiene 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íe correcciones de interfaz de usuario y texto sin esperar la revisión de la tienda
Capgo Builder: Automatice la creación de versiones de lanzamiento en CI
Notificaciones push: Agregue @capacitor/push-notifications y reconstruya 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, conecte 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