Base44 in App Mobili Native con Capacitor

Introduzione

Base44 è un costruttore di app alimentato dall'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 applicazioni mobili native con Capacitor, quindi invia i binari di archiviazione firmati con Capgo Builder — non è richiesta alcuna Mac per iOS.

Alla fine di questa guida, la tua app Base44 esegue nativamente su iOS e Android con accesso alle funzionalità del dispositivo come camera, archiviazione e notifiche push.

Requisiti e stime di tempo

Tempo richiesto: 2-4 ore per la configurazione per la prima volta

Requisiti del sistema:

Per le costruzioni cloud di iOS: Qualsiasi OS (Windows, Mac o Linux) con Capgo Builder
Per le costruzioni cloud di Android: Qualsiasi OS
Memoria: 10GB di spazio gratuito per dipendenze e artefatti di costruzione
RAM: 8GB minimo

Costi:

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

Software richiesto:

Node.js 18+
Un editor come code Cursor

Perché trasformare la tua App Base44 in Mobile?

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

Opzione A: Esporta su GitHub (Consigliato)

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

Vedi Documentazione di integrazione 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 repo GitHub (Git: Clone dalla palette dei comandi) o apri la cartella ZIP estratta con File > Apri Cartella

Avvia Cursor

Per il miglior workflow assistito dall'IA, abilita il modello preferito e consenti l'esecuzione dei comandi nelle impostazioni di Cursor — lo stesso setup descritto nella nostra Lovable a mobile guide.

Passo 2: Configura l'ambiente di sviluppo

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

Usare Cursor AI (Consigliato)

Premere Command+K (Mac) o Ctrl+K (Windows) e chiedere:

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 port da mostrare nel terminale.

Passo 3: Preparare la build di produzione

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

Configura Vite per Mobile

Domanda 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 index.html e asset bundle.

Output di costruzione Base44

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

Capacitor initialization for a Base44 app

Commitare ios/ e android/ cartelle al repository Git. Il costruttore Capgo 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 anticipo in modo da poter inviare aggiornamenti OTA dopo il lancio. Consulta Capgo documentazione aggiornamenti in tempo reale.

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 verifica del simulatore è facoltativa. Per TestFlight, la verifica interna e la presentazione al negozio, utilizza Capgo Builder per compilare e firmare binari nativi nel 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 — si adatta alle workflow di codifica vibe da Base44 → GitHub → Cursor
Compatibile con Aggiornamenti in Tempo Reale — correggi l'interfaccia utente e copia i dati 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 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

I log di costruzione scorrono nel tuo 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 debuggistica di tutti i giorni. Usa Capgo Builder quando hai bisogno di binari di rilascio firmati.

Passo 9: Aggiungi Funzionalità Native

Migliora 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 nelle tue componenti React. Dopo aver aggiunto i plugin, esegui un nuovo Capgo Builder costruisci prima della sottoscrizione di archiviazione.

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 Backend per Base44

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

API chiamate utilizzano HTTPS
Le redirect autenticazione funzionano dentro il WebView (test login su un dispositivo reale)
I collegamenti profondi sono configurati se si utilizzano flussi di link magici o OAuth

Se in seguito migrare su un backend diverso da Base44, pianifica di sostituire base44.entities.* e le relative SDK chiamate con le proprie API — il layer UI React si trasferisce di solito.

Risolvere Problemi Comuni

Schermo bianco all'avvio

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

Errori di costruzione in Capgo Builder

Commit ios/ e android/ prima di richiedere una costruzione cloud, caricare su git
Eseguire npx cap sync localmente in modo che gli asset web vengano copiati nei progetti nativi
Nuove estensioni Capacitor richiedono una costruzione nativa fresca

L'esportazione non è disponibile in Base44

GitHub esportazione e download ZIP richiedono il piano Builder o superiore Aggiorna in Base44 o copia manualmente i file dal __CAPGO_KEEP_0__ view su livelli inferioriAggiorna in Base44 o copia manualmente i file dal Code view su livelli inferiori

Conclusione

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

Passaggi successivi

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

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

Risorse

Continua da Base44 alle App mobili native con Capacitor

Se stai utilizzando 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 flusso di lavoro del prodotto in Capgo Costruzioni native Costruisci iOS da Windows per le costruzioni cloud di iOS senza un Mac

Base44 per Applicazioni Mobili Native con Capacitor