Vai direttamente al contenuto principale

Guida di configurazione del progetto Capacitor CLI

Impara a configurare Capacitor CLI per creare applicazioni nativi iOS e Android utilizzando tecnologie web in pochi passaggi facili.

Martin Donadieu

Martin Donadieu

Content Marketer

Guida di configurazione del progetto Capacitor CLI

Vuoi creare applicazioni iOS e Android con un unico codice? Capacitor CLI simplifies the process, letting you create native apps using web technologies. Here’s what you’ll learn:

  • Configurazione rapida: Installare Capacitor CLI e inizializzare il tuo progetto in pochi minuti.
  • Integrazione di piattaforma: Aggiungere il supporto per iOS e Android con semplici comandi.
  • Aggiornamenti in tempo realecontext: Pagina/Area: Sezione del problema/soluzione. Ruolo: Intestazione della sezione o pagina. Visto in: pagina premium-support.astro. Messaggio chiave `ps_help_updates_title` (Ps Aiuto Aggiornamenti Titolo). Capgo : __CAPGO_KEEP_0__
  • context: Frammento di testo HTML da una stringa di Capgo UI più lunga (chiave padre `submitting_a_pr_to_capgo`). Pagina/Area: Sito web di marketing di Capgo. Ruolo: Frase di copertina del sito web. Visto in: pagina contribuire.astro. Preservare i termini del prodotto/marca e dei sviluppatori esattamente. Messaggio chiave `submitting_a_pr_to_capgo` (Invio di un PR a Capgo).: per aggiornamenti in tempo reale via rete.

Soluzioni comuni per problemi frequenti (Common Fixes): Troubleshooting degli errori di sincronizzazione o delle fallite di costruzione (Troubleshoot issues like sync errors or build failures).

  1. Installa Node.jse il npm, JDK Xcodee Android Studio.
  2. Esegui npm install @capacitor/core @capacitor/cli e inizializza il tuo progetto.
  3. Aggiungi le piattaforme iOS e Android utilizzando npx cap add ios e npx cap add android.
  4. Opzionale: Configura Capgo per aggiornamenti live dell'app app.

Questa guida copre tutto ciò di cui hai bisogno per configurare Capacitor CLI, configurare le piattaforme e distribuire la tua app. Siamo pronti ad iniziare!

Introduzione Capacitor Configura

Documentazione del framework Capacitor

Requisiti di configurazione

Per iniziare, assicurati di avere installati i seguenti strumenti:

  • Node.js (versione 14 o successiva) e npm
  • Sistema di sviluppo Java JDK (versione 11 o successiva)
  • Xcode (versione 12 o successiva per costruzioni iOS)
  • Android Studio (per costruzioni Android)
  • Capacitor CLI Facoltativo:

Se desiderate abilitare le aggiornamenti in tempo reale, consultate la guida di " __CAPGO_KEEP_0__ Guida di configurazione"Capgo Setup Guide__CAPGO_KEEP_0__ Passaggi di installazione

CLI Installation Steps

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

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

Questo comando installa il Capacitor e configura i suoi componenti di base.

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

Creazione di un nuovo progetto

Per iniziare 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.

Configurazione della piattaforma

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

Aggiunta di 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

For 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 installato, avrai bisogno di mantenere aggiornate le tue target native con le modifiche alla tua applicazione web.

Aggiornamenti delle piattaforme

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

npm run build
npx cap sync

La cap sync comando gestisce due compiti:

  • Copia gli asset web aggiornati alle piattaforme native
  • Aggiorna le configurazioni e i plugin native per adattarsi alle modifiche più recenti

Configurazione dell'IDE

Apre i progetti specifici della piattaforma negli IDE appropriati:

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

In Xcode:

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

In Android Studio:

  1. Modifica l'ID dell'applicazione in build.gradle.
  2. Configura il keystore per la firma.
  3. Configura 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 assicurarsi che tutti gli asset siano aggiornati.

Capgo Guida di configurazione

Capgo Dashboard di aggiornamento in tempo reale

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

Caratteristiche chiave di Capgo

Capgo offre diverse funzionalità per semplificare gli aggiornamenti delle app:

  • La crittografia end-to-end assicura la consegna sicura degli aggiornamenti.
  • Gli aggiornamenti vengono eseguiti in background quando l'app si avvia.
  • strumenti di analisi aiutano a tracciare i tassi di successo degli aggiornamenti e l'engagement degli utenti.
  • A un'opzione di rollback un-click vi consente di recuperare rapidamente dagli aggiornamenti problematici.
  • Utilizzare il sistema di canale per roll-out stagionali e test beta. Installa __CAPGO_KEEP_0__

Segui questi passaggi per iniziare con Capgo:

Installa il Capgo __CAPGO_KEEP_1__

  1. Install the Capgo CLI:

    npm install --save @capgo/cli
  2. Avvia Capgo in il tuo progetto:

    npx capgo init
  3. Costruisci e rilascia aggiornamenti:

    npm run build
    npx capgo release
  4. Apre l'applicazione per attivare il processo di aggiornamento in background.

Pratiche Consigliate

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

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

Issue e Consigli Comuni

Una volta completata la configurazione della piattaforma e di Capgo, potresti affrontare 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.

  • Mancanza di versione di Node Errore: I comandi di CLI falliscono a causa di errori di versione di Node.js. Risoluzione: Install Node.js versione 14 o superiore come descritto nelle richieste di configurazione.

Problemi di Configurazione

  • Mancanza di Configurazione Errore: Cambiamenti in capacitor.config.json non hanno effetto. Risolvi: Assicurati che i appId e webDir valori corrispondano a quelli del tuo progetto e al cartello di output della build web. package.json Errori di sincronizzazione del Platform

  • e Errore: Esecuzione npx cap sync risulta in conflitti di versione del plugin. Risoluzione: Aggiorna @capacitor/android e @capacitor/ios alla stessa versione maggiore, esegui quindi nuovamente il comando di sincronizzazione.

Costruzione e Distribuzione

  • Fallimenti di firma di costruzione Errore: Le costruzioni 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 riesco a trovare gli asset web. Risolvi: Esegui il comando di costruzione web (ad esempio, npm run build) prima di sincronizzare le piattaforme.

Problemi di Aggiornamento in Tempo Reale

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

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

Prosegui con Capacitor CLI: Guida alla configurazione del progetto

Se stai utilizzando Capacitor CLI: Guida alla configurazione del progetto per pianificare dashboard e API operazioni, 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 Pacchetti per i dettagli di implementazione in Pacchetti.

Aggiornamenti in Tempo Reale per le app Capacitor

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Quando un bug del layer web è attivo, invia la correzione attraverso __CAPGO_KEEP_0__ invece di aspettare giorni per l'approvazione della store. Gli utenti ricevono l'aggiornamento in background mentre le modifiche native rimangono nel normale percorso di revisione.

Area di contesto: Sito web di marketing Capgo. Ruolo: Descrizione di supporto o meta descrizione. Visto in: componente GetStarted.astro. Preservare i termini del prodotto/marca Capgo esattamente. Chiave del messaggio `instant_updates_for_capacitor_apps_description` (Descrizione degli Aggiornamenti in Tempo Reale per le App Capacitor).

Sostegno umano da Martin

Capgo gives you the best insights you need to create a truly professional mobile app.