Base44 to Native Mobile Apps with Capacitor

Introduzione

Base44 è un costruttore di app alimentato dall'IA 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, poi spedisci binari di store firmati con Capgo Builder — non è richiesta alcuna Mac per iOS.

Con la fine di questo tutorial, il tuo app Base44 funziona in modo nativo su iOS e Android con accesso a funzionalità di dispositivo come camera, archiviazione e notifiche push.

Prerequisiti & Tempo Stimato

Tempo Richiesto: 2-4 ore per la prima configurazione

Requisiti del Sistema:

• For iOS cloud builds: Qualsiasi sistema operativo (Windows, Mac o Linux) con Capgo Builder
• For Android cloud builds: Qualsiasi sistema operativo
• Storage: 10 GB di spazio gratuito per le dipendenze e gli artefatti di build
• RAM: 8 GB minimo

Costs:

• Base44 export: Pianificatore o un piano superiore (per l'esportazione GitHub e il download ZIP)
• IOS App Store: $99/anno (Account di sviluppatore Apple)
• Store di Giocattoli Android: $25 una tantum (Google Play Developer)
• Cursor Pro: $20/mese (facoltativo ma consigliato)

Software richiesto:

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

Perché trasformare il tuo Base44 App in mobile?

• Raggiungimento ampliato: Incontrare gli utenti dove si aspettano un'icona di app nativa, non una scheda del browser
• Funzionalità native: Camera, GPS, rilevamento biometrico e archiviazione offline attraverso Capacitor plugin
• Capacità di distribuzione su App Store: Pubblica sul Google Play e sull'Apple App Store
• Iterazione più rapida: Pair Capgo Live Updates con Capgo Builder per riparazioni della 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 o a un livello superiore. Hai due principali opzioni.

Opzione A: Esporta a GitHub (Consigliato)

1. Apre il tuo app nella Base44 editor
2. Clicca sul GitHub icona nella barra in alto
3. Autenticati Base44 Builder e crea o collega un repository
4. 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

1. Clicca Code in il menu superiore per aprire il browser dei file
2. Clicca Esporta progetto come ZIP in l'angolo superiore destro della vista code
3. Estrai l'archivio sul tuo computer

Apri il Progetto in Cursor

1. Visita cursor.sh e installa Cursor
2. Clona il tuo repo GitHub (Git: Clone dal menu delle palette di comando) o apri la cartella ZIP estratta con File > Apri Cartella

Per il miglior workflow assistito dall'IA, abilita il modello preferito e consenti l'esecuzione delle istruzioni nei impostazioni del Cursor — lo stesso setup descritto nel nostro Guida da amare a mobile.

Passo 2: Configura il tuo ambiente di sviluppo

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

Utilizza 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

La tua app Base44 dovrebbe caricare a http://localhost:5173 (Vite) o il port che viene mostrato nel terminale.

Passo 3: Preparare la costruzione di produzione

Capacitor richiede asset web statici. Le app React Base44 tipicamente utilizzano Vite e esportano a dist/.

Configura Vite per il Mobile

Domanda a 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 costruzione di produzione

npm run build

Verifica che esista un dist/ cartella con index.html e asset bundle.

Passo 4: Aggiungi Capacitor al tuo progetto Base44

Utilizza Cursor AI (Consigliato)

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

Installazione manuale

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

Aggiungi i ios/ e android/ cartelle al repository Git. Il costruttore Capgo compila ciò che è presente in quelle directory.

Passo 5: Configura Capacitor

Aggiorna 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 aggiornamenti prima della tua release, in modo da poter inviare aggiornamenti OTA dopo il lancio. Vedi Capgo Aggiornamenti in tempo reale docs.

Passo 6: Costruisci e sincronizza

Tutte le volte che modifichi l'app web:

npm run build
npx cap sync

Passo 7: Costruisci binari pronti per il negozio con Capgo Builder (Consigliato)

La prova del simulatore è facoltativa. Per TestFlight, testing interno e sottoscrizione al negozio, utilizza Capgo Builder Nota sulle credenziali di Appflow: utilizza __CAPGO_KEEP_0__ Builder per compilare e firmare binari nativi in cloud.

Perché Capgo Builder per le app Base44?

• Non è richiesto un Mac per iOS — costruisci da Windows o Linux
• Lo stesso CLI che il tuo agente AI può eseguire — adatta ai workflow di programmazione da Base44 → GitHub → Cursor
• Si integra con Aggiornamenti in Tempo Reale — correggi l'interfaccia utente e copia i dati in tempo reale; ricostruisci nativamente solo quando cambiano plugin o autorizzazioni

Configura il costruttore Capgo

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 sola. Vedi Gestione delle Credenziali e Costruisci iOS da Windows.

Richiedi un costrutto in 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 gli aggiornamenti OTA:

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

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

If you have a Mac or want emulator testing before cloud builds:

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

Usa IDE locali per la debuggazione di ogni giorno. Usa Capgo Builder quando hai bisogno di binari di rilascio firmati.

Passo 9: Aggiungi Funzionalità Native

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

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

Chiedi a Cursor di collegare Condivisione, Camera o Push ai tuoi componenti React. Dopo aver aggiunto plugin, esegui un nuovo Capgo Builder costruisci prima della sottoscrizione al negozio.

Passo 10: Ottimizza per la Produzione

Icone dell'app e schermate di benvenuto

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

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

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

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

Risolvere i problemi comuni

Schermo bianco all'avvio

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

Build errors in Capgo Builder

• Errori di build in __CAPGO_KEEP_0__ Builder ios/ Aggiungi android/ e
• al repository Git prima di richiedere un build cloud npx cap sync Esegui
• New Capacitor plugins require a fresh native build

Non disponibile l'esportazione in Base44

GitHub esportazione e download ZIP richiedono il __CAPGO_KEEP_0__ piano o un piano superiore. Aggiorna in Base44 o copia manualmente i file dalla vista Code su livelli inferiori.

Conclusioni

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

Passaggi successivi

• Capgo Aggiornamenti in tempo reale: Invia correzioni UI e copia senza dover aspettare la revisione del negozio
• Capgo Builder: Automate release builds in CI
• Notifiche Push: Aggiungi @capacitor/push-notifications : e ricostruisci con Capgo Builder
• Guida correlata: Porta a mobile Lovable · Porta a mobile Bolt.new

Iscriviti a un account gratuito di Capgo per abilitare le Aggiornamenti in tempo reale e le costruzioni native in cloud.

Risorse

• Documentazione Base44
• Integrazione Base44 GitHub
• Capacitor Documentazione
• Capgo Costruzioni native
• Capgo — Aggiornamenti in tempo reale per le Capacitor Applicazioni

Continua a lavorare da Base44 alle Applicazioni Mobili native con Capacitor

Se stai utilizzando Base44 alle Applicazioni Mobili native con Capacitor per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il flusso di lavoro del prodotto in Capgo Directory dei Plugin Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Capgo Costruzioni native per il workflow del prodotto in Capgo Costruzioni native, e Costruisci iOS da Windows per le costruzioni cloud iOS senza un Mac.