Base44 a App Mobili Native con 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 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 Capacitorpoi spedisci binari di store firmati con Costruttore Capgo — non è richiesto alcun Mac per iOS.

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

Prerequisiti & Stima del Tempo

Tempo richiesto: 2-4 ore per prima configurazione

Requisiti del sistema:

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

Costi:

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

Software richiesto:

Node.js 18+
Un editor code come 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, biometria e archiviazione offline attraverso plugin Capacitor
Distribuzione dell'applicazione: Pubblica su Google Play e l'App Store di Apple
Iterazione più rapida: Unisci Capgo Live Update con Capgo Builder per riparazioni del layer web senza 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 su GitHub (Consigliato)

Apri il tuo app nella Base44 editor
Clicca il GitHub icona nella barra in alto
Autorizza 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 Base44 GitHub per ulteriori informazioni.

Opzione B: Scarica come ZIP

Clicca Code nella barra in alto per aprire il browser dei file
Clicca Esporta progetto come ZIP nella parte superiore 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 dalla finestra di comando) o apri il cartellone ZIP estratto con File > Apri cartellone

Inizia Cursor

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

Passo 2: Configura il tuo ambiente di sviluppo

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

Usando Cursor AI (Consigliato)

Press 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 su http://localhost:5173 (Vite) o il portale mostrato nella finestra del terminale.

Passo 3: Preparare la versione di produzione

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

Configurare Vite per il Mobile

Domanda Cursor:

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

O aggiornare vite.config.ts manualmente:

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

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

Testare la versione di produzione

npm run build

Verifica un dist/ un cartello esiste con index.html e asset bundle.

Output di costruzione Base44

Passo 4: Aggiungi Capacitor al tuo progetto Base44

Utilizza 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

Aggiungi al ios/ e android/ cartelle a git. Capgo Builder compila ciò che si trova 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 prima per poter inviare aggiornamenti OTA dopo il lancio. Vedi Capgo documentazione aggiornamenti in tempo reale.

Passo 6: Costruisci e sincronizza

Ogni volta che modifichi 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)

Il testing del simulatore è facoltativo. Per TestFlight, testing interno e invio alla store, utilizza Capgo Builder per compilare e firmare binari nativi in cloud.

Perché Capgo Builder per le app Base44?

No Mac necessario per iOS — costruisci da Windows o Linux
Lo stesso CLI che il tuo agente AI può eseguire — adatta i flussi di lavoro di codifica dal Base44 → GitHub → Cursor
Compatibile con gli aggiornamenti in tempo reale — correggi l'interfaccia utente e copia i dati in aria; ricostruisci nativo solo quando cambiano plugin o autorizzazioni

Imposta 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. Vedi La gestione delle credenziali e Costruire l'App iOS da Windows.

Costruisci iOS da Windows

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 dei build scorrono nel tuo terminale. Con App Store Connect configurato, i build 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 build 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 quotidiana. Usa Costruttore Capgo quando hai bisogno di binari di rilascio firmati.

Passo 9: Aggiungi Funzionalità Native

Rafforza il tuo 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 Costruttore Capgo costruisci prima di archiviare la versione di distribuzione.

Caratteristiche 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 Base44 esportate possono chiamare il backend ospitato di Base44 e SDK. Di solito funziona in Capacitor fintanto che:

API chiamate utilizzano HTTPS
Auth redirects work inside the WebView (test login on a real device)
I collegamenti profondi sono configurati se utilizzi flussi di login magici o OAuth

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

Risoluzione dei problemi comuni

Schermo bianco al lancio

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

Errore di costruzione in Capgo Builder

Commit ios/ Aggiungi android/ prima di richiedere una costruzione cloud
Esegui npx cap sync gli asset web vengono copiati nei progetti nativi localmente
Nuove estensioni Capacitor richiedono una nuova compilazione nativa

Non disponibile l'esportazione in Base44

GitHub esportazione e download ZIP richiedono il piano di costruzione o un piano superiore. Aggiorna in Base44 o copia manualmente i file dal Code visualizza su livelli inferiori.

Conclusioni

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

Next Steps

Aggiornamenti in tempo reale Capgo: Invia aggiornamenti UI e copia senza attendere la revisione del negozio
Capgo Costruttore: Automatizza le release build in CI
Push Notifiche: Aggiungi @capacitor/push-notifications e ricostruisci con Capgo Costruttore
Guida correlate: Lovabile su mobile · Bolt.new su mobile

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

Risorse

Continua da Base44 alle Applicazioni Mobili Nativa con Capacitor

Se stai utilizzando Base44 per le Applicazioni Mobili Nativa con Capacitor per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il workflow del prodotto nella directory del plugin Capgo Capacitor Plugins by Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Capgo Native Builds per il workflow del prodotto in Plugin Capgo, e Costruisci iOS da Windows per le costruzioni cloud di iOS senza un Mac.

Base44 to Native Mobile Apps with Capacitor