Base44 in App Mobili Native con Capacitor

Introduzione

Base44 è un costruttore di app basato su AI che genera applicazioni React complete a partire da promemoria. Puoi spedire un prodotto funzionante in browser velocemente — ma cosa succede se vuoi che sia su iOS e Android? In questo tutorial, mostreremo come esportare il tuo progetto Base44 e trasformarlo in app mobili native con Capacitor, poi spedire binari di negozio firmati con Capgo Builder — non è richiesta alcuna Mac per iOS.

Al termine di questa guida, la tua app Base44 funziona nativamente su iOS e Android con accesso a funzionalità del dispositivo come fotocamera, archiviazione e notifiche push.

Requisiti & Stima del Tempo

Tempo Richiesto: 2-4 ore per la prima configurazione

Requisiti del Sistema:

Per le costruzioni cloud di iOS: Qualsiasi sistema operativo (Windows, Mac o Linux) con Capgo Builder
Per le costruzioni cloud di Android: Qualsiasi sistema operativo
Spazio di Archiviazione: 10 GB di spazio libero per le dipendenze e gli artefatti di costruzione
RAM: 8 GB minimo

Costi:

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

Software Richiesto:

Node.js 18+
Un editor come code Puntatore

Perché trasformare la tua App Base44 in una Mobile?

Raggiungimento espanso: Incontrare gli utenti dove si aspettano un'icona di app nativa, non una scheda del browser
Funzionalità native: Camera, GPS, biometria e archiviazione offline attraverso plugin Capacitor
Distribuzione App Store: Pubblica su Google Play e l'Apple App Store
Iterazione più veloce: Abbinare Capgo Live Updates con Capgo Builder per 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 una volta che sei sul piano di costruzione o superiore. Hai due opzioni principali.

Opzione A: Esporta in GitHub (Consigliato)

Apre la tua app nell'editor Base44
Clicca sul GitHub icona nella barra in alto
Autorizza Base44 Builder e crea o connetti un repository
Base44 sincronizza automaticamente la tua app code con GitHub (sincronizzazione a due vie supportata dai piani più alti)

Vedi Base44 integrazione GitHub documentazione di base per ulteriori dettagli.

Opzione B: Scarica come ZIP

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

Apri il Progetto in Cursor

Visita cursor.sh e installa Cursor
Copia il tuo repository GitHub (Git: Clone dal menu del comando) o apri la cartella ZIP estratta con File > Apri Cartella

Inizia Cursor

Per il miglior workflow assistito da AI, abilita il modello preferito e consenti l'esecuzione dei comandi nelle impostazioni di Cursor — lo stesso setup descritto nella nostra Guida da amichevole 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.

Usa 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

La tua app Base44 dovrebbe caricare a http://localhost:5173 (Vite) o il portale mostrato nella finestra del 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 del cursore:

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 un dist/ cartella esista con index.html e asset bundle.

Output di Base44

Passo 4: Aggiungi Capacitor al tuo progetto Base44

Usa Cursor AI (Raccomandato)

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

Capacitor inizializzazione per un'app Base44

Comitare ios/ e android/ cartelle a git. Il costruttore Capgo compila ciò che è presente in quelle directory.

Etap 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 al fine di poter inviare aggiornamenti OTA dopo il lancio. Vedi Capgo Live Updates docs.

Etap 6: Costruisci e sincronizza

Ogni volta che modifichi l'app web:

npm run build
npx cap sync

Capacitor sincronizzazione completa per un'app Base44

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

Il testing del simulatore è facoltativo. Per TestFlight, testing interno e sottoscrizione al negozio, utilizza Capgo Builder per compilare e firmare binari nativi in cloud.

Why Capgo Builder per applicazioni Base44?

Non è richiesto Mac per iOS — costruisci da Windows o Linux
Lo stesso CLI il tuo agente AI può eseguire — si adatta alle workflow di codifica vibe da Base44 → GitHub → Cursor
Si abbina con Aggiornamenti in Tempo Reale — correggi l'interfaccia utente e copia i testi in tempo reale; ricostruisci nativo solo quando cambiano plugin o autorizzazioni

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

Richiedi una costruzione 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 terminale. Con App Store Connect configurato, le costruzioni iOS possono caricare automaticamente su TestFlight.

Carica il tuo bundle web per 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 delle costruzioni cloud:

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

Xcode apre un progetto Base44 Capacitor

Usa gli IDE locali per la debuggazione di tutti i giorni. Usa Capgo Builder quando hai bisogno di 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 nei tuoi componenti React. Dopo aver aggiunto i plugin, esegui un nuovo Capgo Costruttore Costruire prima della sottoscrizione di archiviazione.

Caratteristiche native aggiunte a un'app Base44 Capacitor

Passaggio 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 relative al backend Base44

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

API chiamate utilizzano HTTPS
I redirect di autenticazione funzionano all'interno della WebView (testare l'accesso su un dispositivo reale)
I collegamenti profondi sono configurati se si utilizzano flussi di magia-link o OAuth

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

Risoluzione dei Problemi Comuni

Schermo bianco al lancio

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

Errori di build in Capgo Builder

Commit ios/ e android/ To git prima di richiedere un build cloud
Esegui npx cap sync localmente in modo che gli asset web vengano copiati nei progetti nativi
Nuovi plugin Capacitor richiedono un build nativo fresco

Non disponibile l'esportazione in Base44

GitHub esportazione e download ZIP richiedono il Piano Builder o un piano superioreAggiorna in Base44 o copia manualmente i file dal Code view su piani inferiori.

Conclusioni

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

Passaggi successivi

Capgo Aggiornamenti in tempo reale: Invia aggiornamenti UI e di copia senza dover attendere la revisione del negozio
Capgo Costruttore: Automatizza le release build in CI
Notifiche push: Aggiungi @capacitor/push-notifications e ricostruisci con Capgo Costruttore
Guide correlate: Amore per il mobile · Bolt.new per il mobile

Iscriviti a un account Capgo gratuito per abilitare le Aggiornamenti in Tempo Reale e i costrutti nativi cloud.

Risorse

Continua a lavorare da Base44 alle App mobili native con Capacitor

Se stai utilizzando Da Base44 alle App mobili native con Capacitor per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il flusso di lavoro del prodotto nella cartella dei plugin Capgo, i plugin Capacitor di Capgo per i dettagli di implementazione nella cartella dei plugin Capacitor di Capgo, costruzioni native Capgo per il flusso di lavoro del prodotto nelle costruzioni native Capgo, e Costruisci iOS da Windows per le costruzioni cloud di iOS senza un Mac.

Da Base44 a App mobili native con Capacitor