Capacitor CLI: Guida alla configurazione del progetto

Vuoi creare app iOS e Android con un unico codice? Capacitor CLI semplifica il processo, consentendo di creare app native utilizzando tecnologie web. Ecco cosa imparerai:

Impostazione rapida: Installa Capacitor CLI e inizializza il tuo progetto in pochi minuti.
Integrazione di piattaforma: Aggiungi supporto per iOS e Android con semplici comandi.
Aggiornamenti in tempo reale: Utilizza __CAPGO_KEEP_0__ Capgo per aggiornamenti in tempo reale via rete.
Soluzioni comuni: Risolvi problemi come errori di sincronizzazione o fallimenti di compilazione.

Passaggi chiave per iniziare:

Installare Node.js, npm, JDK, Xcode, e Android Studio.
Eseguire npm install @capacitor/core @capacitor/cli e inizializza il tuo progetto.
Aggiungi piattaforme iOS e Android utilizzando npx cap add ios e npx cap add android.
Facoltativo: Configura Capgo per aggiornamenti live aggiornamenti dell'app.

Questa guida copre tutto ciò di cui hai bisogno per configurare Capacitor CLI, configurare le piattaforme e distribuire il tuo app. Sprofondiamo!

Introduzione Capacitor Configura

Capacitor Framework Documentation Website

Requisiti di configurazione

Per iniziare, assicurati di avere gli strumenti seguenti installati:

Node.js (versione 14 o successiva) e npm
Java JDK (versione 11 o successiva)
Xcode (versione 12 o successiva per costruzioni iOS)
Android Studio (per costruzioni Android)
Capacitor CLI (versione 6 o 7)

Facoltativo: If you want to enable live updates, check out the “Capgo Setup Guide” below.

CLI Installation Steps

Prima di iniziare, assicurati di avere Node.js, npm, JDK, Xcode, e Android Studio configurati. Una volta pronto, puoi installare il Capacitor CLI eseguendo:

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

Questo comando installa Capacitor e configura i suoi componenti principali.

Dopo aver completato questo passaggio, procedere a Creazione di un Nuovo Progetto per creare la struttura della tua applicazione.

Creazione di un Nuovo Progetto

Per iniziare con il tuo progetto utilizzando Capacitor CLI, segui questi passaggi:

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

Aggiornamento del File di Configurazione

Modifica il capacitor.config.json file per includere le seguenti impostazioni:

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

Una volta aggiornato, utilizza questa configurazione per configurare Capacitor per il tuo progetto.

Impostazione della piattaforma

Ora che la struttura del progetto è stata creata, è il momento di configurare i target iOS e Android.

Aggiungere iOS e Android

Inizia installando i pacchetti specifici per piattaforma utilizzando il Capacitor CLI:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

Per iOS, assicurati di avere Xcode 14 o successivo, CocoaPods 1.11 o più recente, e macOS 12 o superiore. Per Android, avrai bisogno di Android Studio Giraffe (2022.3.1+), JDK 17 o successivo, e Gradle 7.5 o superiore.

Una volta installati, avrai bisogno di mantenere aggiornati i target nativi con le modifiche all'applicazione web.

Aggiornamenti della piattaforma

Per sincronizzare le piattaforme con le modifiche più recenti dell'applicazione web, segui questi passaggi dopo aver aggiornato l'app web:

npm run build
npx cap sync

Il cap sync comando gestisce due compiti:

Copia gli asset web aggiornati sulle piattaforme native
Aggiorna le configurazioni e i plugin native per adattarsi alle ultime modifiche

Setup IDE

Apri i progetti specifici per piattaforma nei relativi IDE:

npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

In Xcode:

Scegli il tuo team di sviluppo.
Configura i certificati di firma.
Aggiorna il tuo identificatore di bundle.

In Android Studio:

Modifica l'ID dell'applicazione in build.gradle.
Configura il keystore per la firma.
Imposta sia le varianti di build di debug che di rilascio.

Quando tutto è configurato, costruisci i progetti utilizzando npx cap build ios o npx cap build android. Non dimenticare di eseguire npx cap sync nuovamente per assicurarti che tutti gli asset siano aggiornati.

Capgo Guida di configurazione

Capgo Dashboard di aggiornamento in tempo reale dell'interfaccia

Imposta Capgo per abilitare aggiornamenti in tempo reale istantanei per la tua app.

Caratteristiche chiave di Capgo

Capgo offre diverse funzionalità per semplificare gli aggiornamenti dell'app:

Crittografia end-to-end assicura la consegna sicura degli aggiornamenti.
Gli aggiornamenti eseguono in background quando l'app viene avviata.
Gli strumenti di analisi aiutano a tracciare i tassi di successo degli aggiornamenti e l'engagement degli utenti.
Un opzione di rollback a un click
consente di recuperare rapidamente dagli aggiornamenti problematici. Utilizza il sistema dei canali per roll-out programmato e test beta.

Installa Capgo

Segui questi passaggi per iniziare con Capgo:

Installa il Capgo CLI:
```
npm install --save @capgo/cli
```
Inizia Capgo nel tuo progetto:
```
npx capgo init
```
Costruisci e rilascia aggiornamenti:
```
npm run build
npx capgo release
```
Apri l'app per attivare il processo di aggiornamento in background.

Pratiche raccomandate

Usa i canali per testare gli aggiornamenti prima di distribuirli a tutti gli utenti.
Monitora le analisi per assicurarti che gli aggiornamenti siano consegnati con successo e gli utenti rimangano coinvolti.
Abilita la tracciatura degli errori per catturare e risolvere problemi in modo tempestivo.
Mantieni pronto il feature di rollback per risolvere velocemente qualsiasi problema.

Capgo è compatibile con Capacitor 8, si integra facilmente con i pipeline CI/CD e rispetta le richieste degli store Apple e Google.

Problemi comuni e consigli

Una volta completata la piattaforma e la configurazione di Capgo, potresti incontrare alcuni errori comuni. Ecco come risolverli velocemente.

Problemi di configurazione dell'ambiente

CLI Non Trovato Errore: Il comando npx cap fallisce. Risoluzione: Esegui npm install --save @capacitor/cli @capacitor/core e riprova.
Versione Node Mismatch Errore: I CLI comandi falliscono a causa di errori di versione di Node.js. Risoluzione: Installa la versione di Node.js 14 o superiore come descritto nelle richieste di configurazione.

Problemi di Configurazione

Mancanza di Configurazione Errore: Le modifiche in capacitor.config.json non hanno effetto. Risoluzione: Assicurati di appId Ecco i risultati: webDir Ecco i valori che corrispondono al tuo progetto: package.json Ecco la cartella di output di costruzione web.
Errori di sincronizzazione della piattaforma Errore: Esecuzione npx cap sync i risultati in conflitti di versione del plugin. Risolvi: Aggiorna @capacitor/android Ecco i valori che corrispondono al tuo progetto: @capacitor/ios e la cartella di output di costruzione web.

aggiornando a la stessa versione maggiore, quindi esegui nuovamente il comando di sincronizzazione.

Fallimenti della firma di build Errore: I build iOS o Android falliscono a causa di certificati mancanti o di un keystore. Risoluzione: Segui le istruzioni di configurazione dell'IDE. Per iOS, aggiungi il tuo team di sviluppo in Xcode. Per Android, configura il keystore in build.gradle.
Directory Web Non Trovata Errore: npx cap sync non si trovano gli asset web. Risoluzione: Esegui il comando di build web (ad esempio, npm run build) prima di sincronizzare le piattaforme.

Issue di Aggiornamento in Tempo Reale

Aggiornamenti Falliti Capgo Errore: Gli aggiornamenti non vengono visualizzati nell'app di produzione. Risoluzione: Controlla nuovamente la tua Capgo API chiave in capacitor.config.json e assicurati di essere in grado di raggiungere il canale corretto.

Per ulteriori informazioni sulla configurazione specifica della piattaforma, visita la sezione di configurazione della piattaforma. Se stai lavorando con aggiornamenti in tempo reale, consulta la Capgo Guida di configurazione per ulteriori consigli di risoluzione dei problemi.

Riepilogo

Revisione della configurazione

Inizia l'app web con Capacitor CLI, configura le piattaforme iOS e Android e, facoltativamente, include Capgo per gli aggiornamenti in tempo reale.

Ecco come iniziare:

Usa i Capacitor CLI per inizializzare il tuo progetto.
Configura l'ID del pacchetto dell'app e definisci la directory di output web.
Aggiungi supporto per le piattaforme iOS e Android.
Installa e configura Capgo con il seguente comando: npm install --save @capgo/cli && npx capgo init

Per istruzioni di configurazione dettagliate o per risolvere problemi, consulta la documentazione ufficiale di Capacitor e Capgo.

Continua da Capacitor CLI: Guida alla configurazione del progetto

Se stai utilizzando Capacitor CLI: Guida alla configurazione del progetto per pianificare il dashboard e le operazioni di API, connettilo con API Overview per i dettagli di implementazione in API Overview, Introduzione per i dettagli di implementazione in Introduzione, API Chiavi per i dettagli di implementazione in API Chiavi, Dispositivi per i dettagli di implementazione in Dispositivi, e Bundle per i dettagli di implementazione in Bundle.

Capacitor CLI: Guida di configurazione del progetto