Converti la tua App amata in iOS e Android con Capacitor

Introduzione

Lovable è un costruttore di app AI che trasforma le richieste in app React funzionanti in pochi minuti. Puoi distribuire velocemente nell'ambiente browser — ma cosa succede se vuoi la tua app sullo Store App e Google Play, seduta sulla home screen come ogni altra app nativa?

Questa guida guida attraverso il percorso completo: esporta da Lovable, avvolgi l'app web con __CAPGO_KEEP_0__ e Capacitorcostruisci binari iOS e Android firmati in cloud con Capgo Builder (nessuna Mac richiesta), aggiungi una vera funzione nativa e invia una correzione di layout in tempo reale con Capgo Live Updates.

Utilizziamo Cursor in tutto il corso — il suo AI può eseguire la maggior parte dei comandi del terminale per te se preferisci non scriverli manualmente.

Tempo richiesto: circa 1–2 ore la prima volta, per lo più configurazione dell'account e attesa dei build in cloud.

Al termine, avrai:

• Un'app nativa iOS e Android costruita dalla cloud — senza Xcode o Android Studio sulla strada principale
• L'applicazione in esecuzione su un dispositivo reale (TestFlight, installazione diretta o testing interno di Play)
• Una funzione di camera funzionante che solo un'app nativa può offrire
• Aggiornamenti in tempo reale configurati in modo che le correzioni UI e CSS siano inviate senza la revisione dello store

Requisiti

Costi (solo per pubblicare pubblicamente):

Facoltativo (solo simulatore locale):

Puoi saltare entrambi. La principale via in questa guida costruisce in cloud e installa su dispositivi reali senza di essi.

Nota Rapida sulle Frameworks Amabili

Prima di toccare code, sai che il tipo di app web generata da Lovable influenza il wrapping mobile.

Per molto tempo, il default di Lovable era un applicazione web monopagina (SPA) React + Vite. A partire da maggio 2026, le nuove app Lovable possono utilizzare TanStack con rendering server-side (SSR) di default. Il SSR è ottimo per il web, ma Capacitor avvolge un costruito staticamente – una cartella di HTML, CSS e JavaScript con un index.html in profondità — che si trova all'interno dell'applicazione sul dispositivo.

Un'applicazione SSR (Server-Side Rendering) aspetta un server per renderizzare pagine su ogni richiesta. Non c'è un server all'interno di un telefono, quindi per Capacitor vuoi output statico, generato dal client.

Cosa fare:

• Iniziare da zero: Chiedi a Lovable un'applicazione unica (SPA) o saltare la SSR per ottenere un output statico una cartella. dist/ Già su TanStack Start (SSR):
• Configuralo per pre-renderizzare o ottenere un output statico SPA. L'unica richiesta è una cartella di build statica contenente Progetti Lovable Next.js legacy: index.html.
• Legacy Next.js Lovable projects: Usa esportazione statica — l'output va a out/ invece di dist/.

Quale framework tu utilizzi, punta Capacitor’s webDir in quella cartella. Per una SPA Vite, quella cartella è dist.

Passo 1 — Esporta la tua App amata in GitHub

Lovable mantiene la tua code nel suo editor fino a quando non connetti GitHub.

1. Apri il tuo progetto Lovable nel browser
2. Clicca Aggiorna (in alto a destra) se necessario, poi apri Git nel menu a sinistra
3. Scegli GitHubautorizza Lovable e collega il tuo account
4. Lovable crea un repository e invia automaticamente il tuo app

✅ Successo: Visita github.com/YOUR-USERNAME/your-app mostra la tua app code.

Passo 2 — Configura il cursore e clona il tuo progetto

Prima di poter lavorare con la tua code localmente, avrai bisogno di un code editor. Consigliamo Cursor, un editor basato su intelligenza artificiale che può eseguire comandi del terminale per te.

Scarica e installa Cursor

1. Visita cursor.sh e scarica la versione per il tuo sistema operativo
2. Installa Cursor seguendo il wizard di installazione
3. Una volta installato, apri Cursor

Configura il cursore per lo sviluppo AI

Per l'esperienza migliore, configura il cursore prima di iniziare:

1. Acquista un piano per il cursore — Sebbene il cursore offra un livello gratuito, un piano Pro ($20/mese) ti dà completamenti AI illimitati, accesso a Claude e GPT-4, e esecuzione di comandi
2. Apri le impostazioni del cursore tramite Command+, (Mac) o Ctrl+, (Windows)

3. Abilita i modelli AI — Assicurati che le funzionalità AI siano abilitate:

4. Seleziona il Modello Preferito — Scegli Claude o GPT-4 per i migliori risultati:

5. Consenti l'Esecuzione dei Comandi — Abilita il Cursor per eseguire i comandi per te:

Copia il tuo Repository nel Cursor

1. In Cursor, premi Shift+Command+P (Mac) o Shift+Ctrl+P (Windows) per aprire la palette dei comandi
2. Inserisci ‘clone’ e seleziona Git: Clone“
3. Paste il tuo repository GitHub URL: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Scegli una cartella dove desideri salvare il progetto

5. Cursor clonerà e aprirà il tuo progetto

Passo 3 — Installa le dipendenze e esegui localmente

Metodo 1: Utilizzando Cursor AI (Consigliato)

1. Apre la scheda AI di Cursor premendo Command+K (Mac) o Ctrl+K (Windows)
2. Inserisci il seguente comando:

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

L'AI rileverà automaticamente il tuo sistema operativo, installerà Node.js e eseguirà npm installe inizia il server di sviluppo con npm run dev.

Metodo 2: Installazione manuale

Apri il terminale in Cursor premendo Shift+Command+T (Mac) o Shift+Ctrl+T (Windows), quindi:

Per macOS:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

Per Windows:

1. Scarica l'installer 24 LTS da nodejs.org
2. Esegui l'installatore
3. Apri il terminale e esegui:

cd your-lovable-app
npm install
npm run dev

Le app Lovable tipicamente eseguono su http://localhost:8080 o http://localhost:5173 — utilizza l'indirizzo che il tuo terminale stampa.

Premi Ctrl + C per fermare il server di sviluppo quando sei pronto a continuare.

✅ Risultato: La tua app si apre nel browser con la sua interfaccia utente funzionante.

Passo 4 — Prepara la produzione Static Build

Capacitor richiede una build di produzione prima di aggiungere piattaforme native.

React + Vite (applicazioni più amate)

Metodo 1: Utilizzo di Cursor AI (Consigliato)

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

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

Metodo 2: Configurazione manuale

Conferma vite.config.ts utilizza una base relativa quindi gli asset si caricano all'interno della WebView nativa:

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

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

Costruisci e verifica:

npm run build

Devi vedere un dist/ cartella con index.html a radice.

Progetti Next.js Legacy

Se il tuo repository utilizza Next.js, chiedi a Cursor:

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

O segui Converti la tua App Next.js in Mobile per il full next.config setup, quindi utilizza webDir: 'out' in Capacitor al posto di dist.

✅ Riuscito: Esiste un cartello di costruzione statica (dist/ o out/) con index.html.

Passo 5 — Aggiungi Capacitor e piattaforme native

Capacitor avvolge la tua app web in vere gusci iOS e Android — non è necessario alcuna riscrittura.

Metodo 1: Utilizzando Cursor AI (Consigliato)

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

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

L'AI chiederà il nome della tua app e ID bundle (ad esempio com.yourcompany.myapp).

Metodo 2: Installazione Manuale

npm install @capacitor/core @capacitor/cli
npx cap init

Quando viene richiesto:

Scegli un ID del pacchetto che effettivamente possiedi. Gli ID dei pacchetti sono univoci a livello globale. Utilizza un ID a dominio inverso basato su un dominio che controlli fin dall'inizio — modificandolo in seguito significa trovare e sostituire in tutto il codice e ricostruire. ios/ e android/ e

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Configura Capacitor

Metodo 1: Utilizzando Cursor AI (Consigliato)

Domanda a Cursor:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Per l'esportazione statica di Next.js, chiedigli di utilizzare out invece.

Metodo 2: Configurazione Manuale

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

Costruisci e sincronizza

Metodo 1: Utilizza Cursor AI (Consigliato)

Dì a Cursor:

Build the production web app and sync it with Capacitor platforms

Metodo 2: Comandi Manuali

npm run build
npx cap sync

Il tuo progetto ora assomiglia a:

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

Non è necessario CocoaPods. Capacitor 8 utilizza il gestore di pacchetti Swift per le dipendenze iOS automaticamente.

✅ Risultato: ios/ e android/ cartelle appaiono e il terminale mostra Sync finished.

Step 6 — Controlla il tuo .gitignore

Capgo Builder compila dal tuo repository Git, quindi ios/ e android/ deve essere commesso. Un errore comune è ignorarlo alla radice del repository.

Conferma:

• Radice .gitignore ignori node_modules e dist (il cloud ricostruisce dist durante le costruzioni web)
• ios/ e android/ stessi sono no ignorati

✅ Successo: git status mostra ios/ e android/ pronto a commitare (non ignorato).

Step 7 — Commit e Push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Successo: Il tuo GitHub repo mostra il ios/ e android/ cartelle.

Passo 8 — Costruisci binari pronti per la distribuzione con il costruttore Capgo

Non hai bisogno di un Mac o di una pipeline locale Xcode/Android Studio per distribuire. Il costruttore Capgo compila, firma e può inviare build iOS e Android dal cloud.

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. Utilizza le nostre strumenti gratuiti se hai bisogno di aiuto per generarle:

• Generatore di certificato iOS
• Generatore di keystore Android
• Cercatore di UDID iOS — registra il tuo iPhone per build di sviluppo

Vedi Gestione delle credenziali e Costruisci iOS da Windows.

Richiedi un build cloud

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --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.

Installa su un dispositivo reale:

• iOS: TestFlight (consigliato) o un build di sviluppo con il tuo dispositivo UDID registrato
• Android: Pista di testing interno di Google Play o un APK/AAB firmato

✅ Riuscito: Un build firmato si completa e puoi installarlo su un dispositivo reale.

Step 9 — Opzionale: Testa Localmente in Xcode o Android Studio

Se hai un Mac o desideri testare l'emulatore prima delle costruzioni cloud:

Per iOS

Metodo 1: Utilizzando Cursor AI (Consigliato)

Open the iOS project in Xcode

Metodo 2: Comando Manuale

npx cap open ios

Prima configurazione di Xcode:

1. Scegli un simulatore dalla casella a discesa dei dispositivi (ad esempio iPhone 15)
2. Per dispositivi reali: abilita Gestisci automaticamente la firma e seleziona il tuo team di sviluppatore Apple
3. Clicca il pulsante ▶️ Play — la prima costruzione richiede 5–10 minuti

Per Android

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Open the Android project in Android Studio

Metodo 2: Comando manuale

npx cap open android

Primo setup di Studio Android:

1. Installa i pacchetti mancanti SDK se richiesto
2. Crea un emulatore nel Gestore dispositivi (ad esempio Pixel 6, API 33+)
3. Clicca sul pulsante di esecuzione verde ▶️ — primo build richiede 5-15 minuti

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

✅ Successo: L'app si apre nel simulatore o nell'emulatore mostrando il tuo contenuto amato.

Passo 10 — Abilita Live Reload (Development)

Accelerare l'iterazione puntando la shell nativa al tuo server di sviluppo locale.

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Dì a Cursor:

Set up live reload for Capacitor development with my local IP address

Metodo 2: Configurazione manuale

1. Trova l'indirizzo IP locale:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. Aggiorna capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

Utilizza porta 8080 o 3000 se è questo che npm run dev stampa.

3. Applica modifiche:

npx cap copy

✅ Successo: Le modifiche al tuo web code vengono ricolate in tempo reale sul dispositivo o simulatore.

Passo 11 — Aggiungi una funzionalità nativa: La fotocamera

Un Capacitor plugin consente a JavaScript di chiamare funzionalità reali del dispositivo. Aggiungeremo il plugin della fotocamera in modo che gli utenti possano scattare una foto — qualcosa che una scheda del browser non può fare in modo affidabile.

Metodo 1: Utilizza Cursor AI (Consigliato)

Digli a Cursor:

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Metodo 2: Installazione manuale

npm install @capacitor/camera
npx cap sync

iOS — aggiungi a ios/App/App/Info.plist all'interno del livello superiore <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — aggiungi all'interno <manifest> in android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

Aggiungere un plugin richiede un costruzione nativa fresca attraverso Capgo Builder prima che funzioni sui dispositivi.

✅ Risultato: Camera code compila e npx cap sync termina senza errori.

Step 12 — Aggiungi Aggiornamenti in Tempo Reale Capgo

Tutti i cambiamenti nativi normalmente vanno attraverso la revisione dell'app store. Aggiornamenti in Tempo Reale Capgo Aggiorna i cambiamenti del tuo layer web dell'app (HTML, CSS, JS, immagini) in pochi minuti.

Installa l'aggiornatore nella tua prima versione in modo che non ti trovi mai bloccato in attesa della revisione quando devi distribuire un fix.

npm install @capgo/capacitor-updater
npx cap sync

Aggiungi a capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

Inizializza nella tua entry dell'app (ad esempio src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Commit, invia e esegui un nuovo build del costruttore Capgo Builder in modo che l'aggiornatore SDK sia nel shell nativo.

Carica i bundle web dopo il lancio:

npm run build
npx @capgo/cli@latest bundle upload --channel production

Vedi Documentazione degli Aggiornamenti in Tempo Reale Capgo.

✅ Successo: Aggiornamento plugin è installato e notifyAppReady() eseguito all'avvio.

Passaggio 13 — Risolvi lo Spazio della Barra di Stato con un Aggiornamento in Tempo Reale

Sulla reale iPhone, il tuo header potrebbe essere posizionato sotto la barra di stato (orologio e batteria). Moderno Capacitor disegna edge-to-edge, quindi il tuo app deve rispettare gli insetti di area sicura: env(safe-area-inset-top), -bottom, -left, -right.

Molti app di Lovable già gestiscono l'insetto inferiore ma utilizzano un padding superiore fissato (come pt-6) senza l'insetto superiore.

1. Conferma viewport-fit=cover in index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. Correggi i titoli superiori – utilizza max() per mantenere lo spazio di padding web e crescere su dispositivi con notch:

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

In Cursor o Lovable, chiedi:

“Il contenuto dell'app viene eseguito sotto la barra di stato in alto su dispositivi mobili. Aggiungi env(safe-area-inset-top) al padding superiore di ogni intestazione di pagina utilizzando max(), mantenendo il padding esistente come minimo.”

3. Invia la correzione via aria – si tratta di CSS puro, non di rebuild nativo necessario:

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

Forza la chiusura dell'app sul tuo dispositivo, riaprila, aspetta ~15–30 secondi e aprila nuovamente. La barra dei titoli dovrebbe essere sotto la barra di stato — corretta senza revisione della store.”

✅ Successo: Contenuto superiore elimina la barra di stato dopo l'applicazione del bundle OTA.

For deeper layout work, see @capgo/tailwind-capacitor e Capacitor schermo intero.

Passo 14 — Prepara la tua lista di prodotto

La tua app è stata creata, è installabile e puoi distribuire aggiornamenti istantanei. La pubblicazione sulle store pubbliche è perlopiù questione di documentazione:

• Icona dell'app – 1024×1024px per iOS (nessuna trasparenza), 512×512px per Google Play
• Sfondi – Apple richiede screenshot iPhone 6.9“ (1320×2868px)
• Nome, sottotitolo, descrizione, parole chiave dell'app
• URL della politica sulla privacy — richiesto da entrambe le piattaforme, anche per le app gratuite
• Classificazione di età — questionario in ogni console
• Divulgazioni sulla raccolta dei dati — Etichette di privacy di Apple e sicurezza dei dati di Google

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Set up app icons and splash screens for my Capacitor app

Metodo 2: Configurazione manuale

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

Cosa rimane prima della 'live':

1. Test di chiusura di Google Play Per conti personali creati dopo il 13 Novembre 2023: almeno 12 tester per 14 giorni consecutivi prima dell'accesso alla produzione. L'iOS non ha equivalente.
2. Invia alla revisione — Apple ~3–5 giorni, Google ~3–7 giorni dopo che sono soddisfatti i requisiti di testing.

Vedi il nostro guida di revisione dell'app per primi tempi per il checklist completo.

Errori comuni (e come risolverli)

• Could not find the web assets directory: ./dist — Esegui npm run build prima npx cap add o npx cap sync. Assicurati che webDir in capacitor.config.ts corrisponda al tuo output del framework (dist per Vite, out per l'esportazione statica di Next.js).
• “Questo ID dell'app … non è disponibile” — Gli ID dei bundle sono univoci a livello globale. Scegli un ID di dominio inverso che controlli.
• L'edizione iOS fallisce dopo aver modificato l'ID del bundle — L'ID nella tua progetto nativo deve corrispondere a Apple App Store Connect. Trova e sostituisci in tutto il codice ios/ e android/, commit, ricostruisci.
• Schermo bianco all'avvio — Imposta base: './' in configurazione di Vite, ricostruisci e esegui npx cap sync.
• Contenuto sotto la barra dello stato — Aggiungi viewport-fit=cover e env(safe-area-inset-top) padding (Step 13).
• APK firmato in modalità debug — Google Play rifiuta gli edifici di debug. Utilizza un edificio di rilascio firmato con il tuo keystore.
• La distribuzione è stata rifiutata — la versione esiste già — Aggiorna la versione/n° di costruzione nei progetti nativi e ricostruisci.

Per Capgo problemi del costruttore, vedi Troubleshooting Build nativo e Debugging Aggiornamenti in tempo reale.

Conclusioni

Hai portato un'app web amabile a iOS e Android nativi — costruita in cloud senza Mac, con una funzione di camera reale e una correzione di layout spedita in rete. Quel che è difficile è stato fatto.

Passaggi successivi

• Capgo Aggiornamenti in tempo reale — Invia UI e correzioni di copia senza dover attendere la revisione del negozio
• Capgo Costruttore — Automatizza i build di rilascio in CI
• Capgo Directory del plugin — Biometria, notifiche push, geolocalizzazione e altro
• Guide correlate: Base44 per dispositivi mobili · Bolt.new per dispositivi mobili

Iscriviti a un account Capgo gratuito per abilitare gli Aggiornamenti in tempo reale e i build nativi del cloud.

Risorse

• Documentazione amabile
• Capacitor Documentazione
• Capgo Costruzione nativa
• Capgo — Aggiornamenti in tempo reale per le app Capacitor
• Costruisci iOS da Windows
• Esporta statica Next.js per dispositivi mobili

Continua da Converti la tua app amabile in iOS e Android con Capacitor

Se stai utilizzando Converti la tua app amabile in iOS e Android con Capacitor per pianificare il lavoro di plugin nativo, connettilo con Capgo Directory dei plugin per il flusso di lavoro del prodotto nella cartella di 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.