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 spedire in browser velocemente — ma cosa 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 Capacitor, crea app iOS e Android firmate in cloud con __CAPGO_KEEP_1__ Builder e invia aggiornamenti via aria. Capgo Costruttore (nessuna Mac richiesta), aggiungi una vera funzione nativa e invia una correzione di layout in tempo reale con Capgo Aggiornamenti in tempo reale.

Utilizziamo Cursor in tutto il suo 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 del conto e attesa dei costruzioni in cloud.

Al termine, avrai:

• Un'app nativa iOS e Android costruita dal 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 per che le correzioni UI e CSS siano distribuite senza la revisione del negozio

Prerequisiti

Costi (solo per pubblicare pubblicamente):

Facoltativo (solo simulatore locale):

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

Nota veloce sulle framework amabili

Prima di toccare code, sappiate che il tipo di app web che Lovable genera influenza il wrapping mobile.

Da molto tempo, il default di Lovable era una app singola di pagina (SPA) React + Vite. A partire da maggio 2026, le nuove app Lovable possono utilizzare TanStack Start con rendering server-side (SSR) di default. Il SSR è ottimo per il web, ma Capacitor avvolge una costruzione statica — una cartella di HTML, CSS e JavaScript con un index.html al suo interno — che viene spedita all'interno dell'app sul dispositivo.

Un'app SSR aspetta un server per rendere le pagine su ogni richiesta. Non c'è un server all'interno di un telefono, quindi per Capacitor desideri output statico generato dal client.

Cosa fare:

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

Quale che sia il framework che utilizzi, puntate Capacitor webDir a quel 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 in menu a sinistra
3. Scegli GitHub, autorizza Lovable e collega la tua account
4. Lovable crea un repository e sposta automaticamente il tuo app

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

Passo 2 — Imposta Cursor e clona il tuo progetto

Prima di poter lavorare con il tuo code localmente, avrai bisogno di un code editor. Cursor, un editor potenziato da AI 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 Cursor per lo Sviluppo AI

Per l'esperienza migliore, configura Cursor prima di iniziare:

1. Acquista un Piano Cursor – Mentre Cursor offre un livello gratuito, un piano Pro (20€/mese) ti offre completamenti AI illimitati, accesso a Claude e GPT-4, e esecuzione di comandi
2. Apre le Impostazioni di Cursor tramite Command+, (Mac) o Ctrl+, (Windows)

3. Abilita i Modelli AI – Assicurati che le funzionalità AI siano abilitate:

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

5. Consenti l'Esecuzione del Comando — Abilita il Puntatore del Cursor per eseguire comandi per te:

Clona 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. Digita ‘clone’ e seleziona Git: Clona
3. Incolla l'URL del tuo repository GitHub : 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, eseguirà npm install, e avvierà 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'installatore 24 LTS da nodejs.org Esegui l'installatore
2. Apri il terminale e esegui:
3. Apri il terminale e esegui:

cd your-lovable-app
npm install
npm run dev

Le app Lovable tipicamente si 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.

✅ Successo: 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 (la maggior parte delle app Lovable)

Metodo 1: Utilizzando Cursor AI (Consigliato)

Premi 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 del WebView nativo:

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

Dovresti vedere un dist/ cartella con index.html al suo interno.

Progetti Next.js Legacy Lovable

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.

✅ Successo: Esiste un cartello di build statico (dist/ o out/) con index.html.

Passo 5 — Aggiungi Capacitor e piattaforme native

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

Metodo 1: Utilizzo di 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 del tuo 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 ios/ e android/ e ricostruisci.

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

Configura Capacitor

Metodo 1: Utilizzo di Cursor AI (Consigliato)

Chiedi 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: Utilizzo di Cursor AI (Consigliato)

Dichiara 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/ appare e il terminale mostra Sync finished.

Passo 6 - Controlla il tuo .gitignore

Capgo Costruttore compila a partire dal tuo repository Git, quindi ios/ e android/ devono essere commessi. Un errore comune è ignorarli nella radice del repository.

Conferma:

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

✅ Successo: git status Mostra ios/ E android/ pronto per il commit (non ignorato).

Passo 7 — Commit e Push

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

✅ Successo: La tua GitHub repo mostra i ios/ E android/ cartelle.

Passo 8 — Costruisci Binari di Magazzino-Pronti con Capgo Builder

Non è necessario un Mac o una pipeline locale Xcode/Android Studio per distribuire. Capgo Builder compila, firma e può inviare costruzioni iOS e Android dal cloud.

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

• Generatore di Certificato iOS
• Generatore di Keystore Android
• Finder di UDID iOS — registra il tuo iPhone per costruzioni 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: Google Play internal testing track o un APK/AAB di rilascio firmato

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

Passo 9 — Opzionale: Testa localmente in Xcode o Android Studio

Se hai un Mac o vuoi testare con l'emulatore prima dei build cloud:

Per iOS

Metodo 1: Utilizzo di Cursor AI (Raccomandato)

Open the iOS project in Xcode

Metodo 2: Comando manuale

npx cap open ios

Prima configurazione di Xcode:

1. Seleziona un simulatore dal menu 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 sul pulsante ▶️ Play — il primo build 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

Prima configurazione dello studio Android:

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

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

✅ Successo: L'App si apre nel simulatore o 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;

Usa il porto 8080 o 3000 se è quello npm run dev che stampa.

3. Applica le modifiche:

npx cap copy

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

Passaggio 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: Utilizzo di Cursor AI (Consigliato)

Dichiara 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.

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

Passo 12 — Aggiungi Capgo Aggiornamenti in tempo reale

Ogni cambiamento nativo normalmente va in rassegna della store dell'app. Capgo Aggiornamenti in Tempo Reale Invia modifiche al layer web del tuo app (HTML, CSS, JS, immagini) in pochi minuti.

Installa l'aggiornatore nella tua prima release in modo che non ti ritrovi ad aspettare la revisione quando devi rilasciare una correzione.

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 nell'entry del tuo app (ad esempio src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

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

Carica bundle web dopo il lancio:

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

Vedi Capgo Aggiornamenti in Tempo Reale - Documentazione.

✅ Successo: Plugin aggiornatore installato e notifyAppReady() Esegue il caricamento all'avvio.

Passaggio 13 — Risolvi lo spazio della barra dello stato con un aggiornamento in tempo reale.

Sul tuo iPhone reale, il tuo header potrebbe trovarsi sotto la barra dello stato (orologio e batteria). Moderno Capacitor disegna dall'orlo all'orlo, quindi il tuo app deve rispettare gli insetti di area sicura. Molti app Lovable già gestiscono l'insetto inferiore ma utilizzano un padding superiore fissato (come : env(safe-area-inset-top), -bottom, -left, -right.

) senza l'insetto superiore. pt-61. Conferma

in viewport-fit=cover 2. Correggi i header superiori index.html:

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

— utilizza — use max() To mantenere lo spazio 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'applicazione si esegue sotto la barra dello 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: — questo è pura CSS, nessuna ricostruzione nativa necessaria:

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

Chiudi forzatamente l'app sul tuo dispositivo, riaprila, aspetta ~15–30 secondi e aprila nuovamente. L'intestazione dovrebbe essere posizionata sotto la barra dello stato — corretto senza revisione dello store.

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

Per lavori di layout più approfonditi, vedi @capgo/tailwind-capacitor e Capacitor schermo da bordo a bordo.

Passo 14 — Prepara la tua lista di negozio

La tua app è stata creata, è installabile e puoi inviare aggiornamenti istantanei. L'uscita sulle store pubbliche è perlopiù questione di documentazione:

• Icona dell'app — 1024×1024px per iOS (nessuna trasparenza), 512×512px per Google Play
• Screenshot — Apple richiede screenshot iPhone 6.9“ (1320×2868px)
• Nome, sottotitolo, descrizione, parole chiave dell'app
• URL della politica sulla privacy — richiesta da entrambe le store, anche per le app gratuite
• Classificazione di età — questionario in ogni console
• Divulgazioni sulla raccolta dei dati — Etichette di privacy Apple e sicurezza dei dati 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 Google Play (contabilità personali create dopo il 13 Novembre 2023): almeno 12 tester per 14 giorni consecutivi prima dell'accesso alla produzione. L'iOS non ha equivalente.
2. Invia per la revisione — Apple ~3–5 giorni, Google ~3–7 giorni dopo che sono stati soddisfatti i requisiti di testing.

Vedi il nostro guida di revisione dell'applicazione per la prima volta per la lista completa.

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 all'output del tuo framework (dist per Vite, out per l'esportazione statica di Next.js).
• “L'ID dell'applicazione … non è disponibile” — I D dei bundle sono univoci a livello globale. Scegli un ID a dominio inverso che controlli.
• iOS build fallisce dopo aver modificato l'ID del bundle — L'ID nel tuo progetto nativo deve corrispondere a Apple App Store Connect. Trova e sostituisci in tutto il codice ios/ e android/, commit, ricostruisci.
• Schermo bianco al lancio — Imposta base: './' nel config 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 (Passaggio 13).
• APK firmato in modalità debug — Google Play rifiuta gli edifici di debug. Utilizza un edificio di rilascio firmato con la tua chiave di sicurezza.
• La distribuzione è stata rifiutata — la versione esiste già — Aggiorna la versione/n° di costruzione nei progetti nativi e ricostruisci.

Per i problemi del Capgo Builder, vedi Trattamento dei problemi di costruzione nativa e Debugging delle Aggiornamenti in tempo reale.

Conclusioni

Hai portato un'app web amabile a iOS e Android nativi — costruita in cloud senza un Mac, con una funzione di camera reale e una correzione di layout inviata in rete. Quella è la parte difficile fatta.

Passaggi successivi

• Aggiornamenti in tempo reale Capgo — Correggi UI e testi senza attendere la revisione del negozio
• Capgo Costruttore — Automatizza i build dei rilasci nella CI
• Capgo Directory del Plugin — Biometria, notifiche push, geolocalizzazione e altro
• Guida correlata: Base44 per dispositivi mobili · Bolt.new per dispositivi mobili

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

Risorse

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

Continua a lavorare da Converti la tua App amata in iOS e Android con Capacitor

Se stai utilizzando Converti la tua App amata in iOS e Android con Capacitor per pianificare il lavoro di plugin nativo, connettilo con Directory dei plugin Capgo per il flusso di lavoro del prodotto in Directory dei plugin Capgo Plugin Capacitor da Capgo per i dettagli di implementazione nei plugin Capacitor di Capgo, Capgo Costruzione Nativa per il workflow del prodotto in Capgo Costruzione Nativa, e Costruisci iOS da Windows per le costruzioni iOS cloud senza un Mac.