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 di browser — ma cosa se vuoi la tua app sullo Store App e Google Play, seduta sulla schermata iniziale come ogni altra app nativa?

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

Utilizziamo Cursor in tutto — 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, principalmente impostazione 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 sui 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 una app singola pagina (SPA) React + ViteA partire da maggio 2026, le nuove app Lovable possono utilizzare TanStack con rendering server-side (SSR) di default. Il SSR è grande per il web, ma Capacitor avvolge una costruzione statica — una cartella di HTML, CSS e JavaScript con un index.html in profondità — che si trova all'interno dell'applicazione sul dispositivo.

Un'app SSR (Server-Side Rendering) aspetta che un server generi pagine per 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 pagina (SPA) o saltare la SSR per ottenere un statico dist/ cartella.
• Già su TanStack Start (SSR): Configuralo per pre-renderizzare o generare un statico SPA. L'unica richiesta è una cartella di build statica contenente index.html.
• Progetti Lovable Next.js legacy: Usa esportazione statica — l'output va a out/ invece di dist/.

Quale che sia il framework che utilizzi, punti Capacitor’s webDir in quel folder. Per una SPA Vite, quel folder è 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 sposta automaticamente il tuo app

✅ Successo: Visita github.com/YOUR-USERNAME/your-app mostra la tua app's 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 di 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 offre completamenti di 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 di AI — Assicurati che le funzionalità di AI siano abilitate:

4. Scegli 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 in 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 avvia il server di sviluppo con npm run dev.

Metodo 2: Installazione manuale

Apre la finestra del 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
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.

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

Passo 4 — Prepara la produzione Static Build

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

React + Vite (le app più amate)

Metodo 1: Utilizzando Cursor AI (Raccomandato)

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 i file 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

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

Progetti Lovable 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)

Clicca 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

Il AI ti chiederà il nome della tua app e l'ID del 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 (Raccomandato)

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 (Raccomandato)

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/ le cartelle appaiono e il terminale mostra Sync finished.

Passo 6 — Controlla il tuo .gitignore

Capgo Costruttore 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 e sono android/ non sono ignorate Successo: mostra

✅ e git status pronte per il commit (non ignorate). ios/ Passo 7 — Commit e Push android/ Successo:

il tuo __CAPGO_KEEP_0__ repo mostra il

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

✅ e Your GitHub repo shows the ios/ e android/ cartelle.

Passaggio 8 — Costruisci file 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. Capgo Costruttore Il costruttore __CAPGO_KEEP_0__ 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 i 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

Il flusso dei log di build si visualizza 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 firmato

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

Passo 9 — Facoltativo: 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 — 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. Crea 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 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;

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

3. Applica modifiche:

npx cap copy

✅ Successo: Modifiche al tuo web code si riscalda in tempo reale sul dispositivo o simulatore.

Passo 11 — Aggiungi una funzionalità nativa: La fotocamera

Un Capacitor plugin consente a JavaScript di chiamare funzionalità di dispositivo reali. 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 (Raccomandato)

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.

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

Step 12 — Aggiungi Capgo Aggiornamenti in Tempo Reale

Tutti i cambiamenti nativi normalmente vanno attraverso la revisione dell'app store. Capgo Aggiornamenti in Tempo Reale invia cambiamenti al 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 inviare 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 Capgo Builder build 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 Capgo Aggiornamenti in Tempo Reale docs.

Per automatizzare questo upload ogni volta che qualcuno clicca Pubblica in Lovable, segui Automatizza Capgo Aggiornamenti in Tempo Reale da Lovable con GitHub Azioni.

✅ Successo: Il plugin di aggiornamento è installato e notifyAppReady() si esegue all'avvio.

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

Su un iPhone reale, il tuo header potrebbe essere posizionato sotto la barra di stato (orologio e batteria). Il moderno Capacitor disegna fino all'orlo, quindi il tuo app deve rispettare gli insetti di area sicura 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 il padding web e aumentare 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 scorre sotto la barra di stato in alto su mobile. 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 è CSS puro, 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 l'app sul tuo dispositivo, riaprila, aspetta ~15–30 secondi, e aprila di nuovo. Il header dovrebbe essere sotto la barra dello stato — risolto senza revisione dello store.

✅ Successo: Il contenuto superiore cancella la barra dello stato dopo l'applicazione del bundle OTA.

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

Fase 14 — Prepara la tua lista dello store

La tua app è stata creata, installabile e puoi inviare aggiornamenti istantanei. Andare in live sulle store pubbliche è perlopiù burocrazia:

• Icon della app --- 1024×1024px per iOS (nessuna trasparenza), 512×512px per Google Play
• Schermate — Apple richiede screenshot di iPhone 6.9“ (1320×2868px)
• Nome dell'app, sottotitolo, descrizione, parole chiave
• URL della politica sulla privacy — richiesto da entrambe le piattaforme, anche per le app gratuite
• Classificazione di età — questionario in ogni console
• Disclosures sulla raccolta dei dati — Etichette di nutrizione sulla 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 di “live”:

1. Test di chiusura su Google Play (contabilità personale create dopo il 13 Novembre 2023): almeno 12 tester per 14 giorni consecutivi prima dell'accesso alla produzione. L'iOS non ha un 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 per l'app di prima volta per il checklist completo.

Errori comuni (e come risolverli)

• Could not find the web assets directory: ./dist — Esegui npm run build prima di npx cap add o npx cap sync. Assicurati di webDir in capacitor.config.ts corrisponde al tuo framework di output (dist per Vite, out per Next.js static export).
• “Questo ID dell'app … non è disponibile” — Gli ID dei bundle sono univoci a livello globale. Scegli un ID inverso-domain che controlli.
• L'errore di costruzione iOS si verifica 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 ios/ e android/, commit, ricostruisci.
• Schermo bianco all'avvio — Imposta base: './' in configurazione Vite, ricostruisci e esegui npx cap sync.
• Contenuto sotto la barra di stato — Aggiungi viewport-fit=cover e env(safe-area-inset-top) padding (Passaggio 13).
• APK firmata in modalità debug — Google Play rifiuta le costruzioni in modalità debug. Utilizza una costruzione di rilascio firmata con il tuo keystore.
• La distribuzione è stata rifiutata — esiste già una versione — Incrementa la versione/numero di costruzione nei progetti nativi e ricostruisci.

Per Capgo problemi del costruttore, vedi Trattamento dei problemi di costruzione nativa Ecco il resto Aggiornamenti in tempo reale per la debug.

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 via aria. Quel che è difficile è stato fatto.

Passaggi successivi

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

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

Risorse

• Dokumentazione amabile
• Dokumentazione Capacitor
• Costrutti nativi Capgo
• Capgo — Aggiornamenti in Tempo Reale per le App Capacitor
• Costruisci iOS da Windows
• Export statico Next.js per dispositivi mobili

Continua a procedere da Converti la Tua App Amabile in iOS e Android con Capacitor

Se stai utilizzando Converti la tua App amata in iOS e Android con Capacitor per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il workflow 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 workflow del prodotto in Capgo Costruzioni native, e Costruisci iOS da Windows per le costruzioni cloud di iOS senza un Mac.