Base44 in App Mobili Native con Capacitor

Introduzione

Base44 è un costruttore di app alimentato da intelligenza artificiale che genera applicazioni React complete a partire da promemoria. Puoi spedire un prodotto funzionante nel browser velocemente — ma cosa succede se vuoi che sia su iOS e Android? In questo tutorial, mostriamo come esportare il tuo progetto Base44 e trasformarlo in app mobili native con Capacitor Capacitorpoi, quindi invia i binari di archiviazione firmati Capgo Costruttore Costruttore di costruzione nativa

Costruttore di costruzione nativa

— non è richiesto Mac per iOS.Al termine di questa guida, il tuo'app Base44 esegue nativamente su iOS e Android con accesso alle funzionalità del dispositivo come camera, archiviazione e notifiche push.

Prerequisiti & Tempo di stima:

Tempo richiesto: Any OS (Windows, Mac, or Linux) with Capgo Builder
Requisiti del sistemaPer le costruzioni cloud di iOS
Memoria: 10 GB di spazio gratuito per dipendenze e artefatti di build
RAM: almeno 8 GB

Costi:

Esporta Base44: Piano Builder o superiore (per l'esportazione e il download ZIP di GitHub)
App Store iOS: $99/anno (Account dello sviluppatore Apple)
Google Play Store: $25 una tantum (Account dello sviluppatore Google Play)
Cursor Pro: $20/mese (facoltativo ma consigliato)

Software richiesto:

Node.js 18+
A code editor such as Cursor

Perché trasformare la tua App Base44 in mobile?

Raggiungimento ampliato: Incontrare gli utenti dove si aspettano un'icona di app nativa, non una scheda del browser
Caratteristiche native: Camera, GPS, biometrics, and offline storage through Capacitor plugins
Rilascio su App Store: Pubblicare su Google Play e l'Apple App Store
Fase di iterazione più rapida: Pair Capgo Aggiornamenti in tempo reale con Capgo Builder per le correzioni del layer web senza dover ricostruire i binari nativi ogni volta

Passo 1: Esporta il tuo progetto Base44

Base44 ti consente di esportare code non appena ti trovi sul piano di costruzione Builder o ad un livello superiore. Hai due opzioni principali.

Opzione A: Esporta a GitHub (Consigliato)

Apre il tuo app nel Base44 editor
Clicca l'icona del GitHub icona nel barra superiore
Autentica Base44 Builder e crea o collega un repository
Base44 sincronizza automaticamente il tuo app code con GitHub (sincronizzazione a due vie per i piani supportati)

Vedi documentazione di integrazione di Base44 GitHub per i dettagli.

Opzione B: Scarica come ZIP

Clicca Code nella barra in alto per aprire il browser dei file
Clicca Esporta progetto come ZIP in alto a destra della vista code
Estrai l'archivio sul tuo computer

Apri il Progetto in Cursor

Visita cursor.sh e installa Cursor
Clona il tuo repository GitHub (Git: Clone dal menu della paletta dei comandi) o apri la cartella ZIP estratta con File > Apri cartella

Avvia Cursor

Per il miglior flusso di lavoro con assistenza AI, abilita il modello preferito e consenti l'esecuzione dei comandi nelle impostazioni di Cursor — lo stesso setup descritto nella nostra Lovable alla guida per la mobilità.

Passo 2: Configura il tuo ambiente di sviluppo

Base44 esporta un progetto React standard. Installare le dipendenze e confermare che il server di sviluppo funziona.

Utilizzare Cursor AI (Consigliato)

Tieni premuto Command+K (Mac) o Ctrl+K (Windows) e chiedi:

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

Configurazione manuale

cd your-base44-project
npm install
npm run dev

L'app Base44 in esecuzione localmente

L'app Base44 dovrebbe caricarsi su http://localhost:5173 (Vite) o il portale mostrato nel terminale.

Passo 3: Preparare la build di produzione

Capacitor richiede asset web statici. Le app React di Base44 utilizzano di solito Vite e esportano su dist/.

Configura Vite per Mobile

Domanda di Cursor:

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

O aggiorna vite.config.ts manualmente:

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

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

Testa la versione di produzione

npm run build

Verifica che esista un dist/ cartella con contenuti e risorse bundle. index.html Output di costruzione Base44

Passo 4: Aggiungi __CAPGO_KEEP_0__ al tuo progetto Base44

Step 4: Add Capacitor to Your Base44 Project

Installazione manuale

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

Step 5: Installa Capacitor

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

Inizializzazione di Capacitor per un'app Base44

Commitare ios/ e android/ cartelle a git. Capgo Builder compila ciò che si trova in quelle directory

Passo 5: Configura Capacitor

Aggiornamento 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

Considera di aggiungere @capgo/capacitor-updater in modo che possa inviare aggiornamenti OTA dopo il lancio. Vedi Capgo Live Updates docs.

Passo 6: Costruisci e sincronizza

Ogni volta che cambi l'app web:

npm run build
npx cap sync

Capacitor sincronizzazione completa per un'app Base44

Passo 7: Costruisci Binari Pronti per il Negozio con Capgo Builder (Consigliato)

La prova del simulatore è facoltativa. Per TestFlight, testing interno e sottomissione al negozio, utilizza Capgo Builder costruisci e firma binari nativi in cloud.

Perché Capgo Builder per le app Base44?

Non è richiesto Mac per iOS costruisci da Windows o Linux
Lo stesso CLI che il tuo agente AI può eseguire adatta ai flussi di lavoro di codifica vibe da Base44 → GitHub → Cursor
Siamo abbinati con Aggiornamenti in Tempo Reale correggi l'interfaccia utente e la copia in tempo reale; ricostruisci nativo solo quando cambiano plugin o autorizzazioni

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

Salva le credenziali di firma una volta. Vedi Gestisci le credenziali e Costruisci iOS da Windows.

Richiedi un build cloud

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

Il flusso dei log di costruzione si visualizza nel tuo terminale. Con App Store Connect configurato, i costruzioni iOS possono caricare automaticamente su TestFlight.

Carica il tuo bundle web per le aggiornamenti OTA:

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

Passo 8: Facoltativo — Testa localmente in Xcode o Android Studio

Se hai un Mac o vuoi testare l'emulatore prima dei costruzioni cloud:

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

Xcode apre un progetto Base44 Capacitor

Utilizza gli IDE locali per la debuggazione quotidiana. Utilizza Capgo Builder quando avete bisogno di file binari di rilascio firmati.

Passo 9: Aggiungi Funzionalità Native

Rafforza la tua app Base44 con le capacità del dispositivo:

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

Chiedi a Cursor di collegare Condividi, Camera o Push ai tuoi componenti React. Dopo aver aggiunto i plugin, esegui un nuovo Costruttore Capgo costruisci prima della sottoscrizione del negozio.

Funzionalità native aggiunte a un'app Base44 Capacitor

Passo 10: Ottimizza per la Produzione

Icone dell'App e Schermate di Avvio

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

Considerazioni per il Backend Base44

Le app esportate Base44 possono chiamare il backend ospitato da Base44 e SDK. Funziona di solito in Capacitor fintanto che:

API chiama HTTPS
Le redirect dell'autenticazione funzionano all'interno della WebView (test di accesso su un dispositivo reale)
I collegamenti profondi sono configurati se si utilizzano flussi di login magici o OAuth

Se in seguito migriate dal backend di Base44, pianificate di sostituire base44.entities.* e le relative chiamate SDK con le vostre API — il layer di interfaccia React si trasferisce di solito

Risolvere Problemi Comuni

Schermo bianco all'avvio

Conferma base: './' è impostato nella configurazione di Vite
Eseguisci npm run build e controlla che dist/index.html carichi gli asset con percorsi relativi
Esegui npx cap sync after ogni build web

Error di costruzione in Capgo Builder

Commit ios/ e android/ e invia i file al repository git prima di richiedere un build cloud
Esegui npx cap sync in locale per copiare gli asset web nei progetti nativi
Nuove estensioni Capacitor richiedono un nuovo build nativo

L'esportazione non è disponibile in Base44

L'esportazione GitHub e il download ZIP richiedono il piano Builder o superiore Aggiorna in Base44 o copia manualmente i file dalla vista __CAPGO_KEEP_0__ su livelli inferiori. Upgrade in Base44 or copy files manually from the Code view on lower tiers.

Conclusion

Ha esportato un'app React generata da Base44, l'ha avvolta con Capacitor e ha una chiara via per ottenere binari iOS e Android firmati attraverso Capgo Builder senza dover mantenere una fattoria locale di Xcode.

Next Steps

Capgo Live Updates: Invia aggiornamenti UI e copia senza dover attendere la revisione del negozio
Capgo Builder: Automatizza i build di rilascio in CI
Push Notifications: Aggiungi @capacitor/push-notifications e ricostruisci con Capgo Builder
Guida correlate: Da amare a mobile · Bolt.new a mobile

Iscriviti a un account gratuito di Capgo per abilitare le Aggiornamenti in tempo reale e gli edifici nativi cloud.

Risorse

Continua da Base44 alle App mobili native con Capacitor

Se stai utilizzando Base44 to Native Mobile Apps with Capacitor per pianificare il lavoro del plugin nativo, connettilo con Capgo Plugin Directory per il flusso di lavoro del prodotto nella Capgo Directory dei Plugin. Capacitor Plugins by Capgo Per i dettagli di implementazione in Capacitor Plugins da Capgo. Capgo Native Builds per il flusso di lavoro del prodotto in Capgo Costruzioni native, e Costruire l'App iOS da Windows per costruire applicazioni iOS in cloud senza un Mac.