Saltare al contenuto principale

Capacitor CLI: Guida di configurazione del progetto

Impara a configurare Capacitor CLI per la creazione di app nativi iOS e Android utilizzando tecnologie web in pochi passaggi facili.

Capacitor CLI: Guida di 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:

  • Setup rapido: 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 realeUtilizza Capgo per aggiornamenti in tempo reale istantanei.
  • Soluzioni Comuni: Risolvi problemi come errori di sincronizzazione o fallimenti di costruzione.

Passaggi Chiave per Iniziare:

  1. Installare Node.js, npm, JDK Xcode, e Android Studio.
  2. Eseguire npm install @capacitor/core @capacitor/cli e inizializza il tuo progetto.
  3. Aggiungi le piattaforme iOS e Android utilizzando npx cap add ios E e npx cap add android.
  4. Facoltativo: configurare Capgo per aggiornamenti in tempo reale app updates.

Questo guide copre tutto ciò di cui hai bisogno per configurare Capacitor CLI, configurare le piattaforme e distribuire la tua app. Iniziamo!

__CAPGO_KEEP_0__ Capacitor Configure

Documentazione del sito web del framework Capacitor

Requisiti di configurazione

Per iniziare, assicurati di avere installati gli strumenti seguenti:

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

Facoltativo: Se desideri abilitare gli aggiornamenti in tempo reale, consulta la “Guida di configurazione del progetto Capgo” di seguito.

CLI I passaggi di installazione

Prima di iniziare, assicurati di avere Node.js, npm, JDK, Xcode, e Android Studio configurato. 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 di base.

Dopo aver completato questo passaggio, passa a Crea un nuovo progetto per creare la struttura della tua applicazione.

Crea un nuovo progetto

Iniziare con il tuo progetto utilizzando Capacitor CLIseguire 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"
  }
}

Dopo l'aggiornamento, utilizza questa configurazione per configurare Capacitor per il tuo progetto.

Configurazione della piattaforma

Ora che la struttura del progetto è completata, è 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 versione 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 delle piattaforme

Per sincronizzare le piattaforme con le modifiche più recenti dell'app 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 alle piattaforme native
  • Aggiorna le configurazioni e i plugin native per adattarsi alle ultime modifiche

Impostazione IDE

Apre i progetti specifici per 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.

Nell'ambiente Android Studio:

  1. Modifica l'ID dell'applicazione in build.gradle.
  2. Configura il keystore per la firma.
  3. Configura entrambe le varianti di build, debug e release.

Quando tutto è configurato, costruisci i progetti utilizzando npx cap build ios o npx cap build androidNon dimenticare di eseguire npx cap sync Quando tutto è configurato, costruisci i progetti utilizzando

Capgo Setup Guide

Capgo Live Update Dashboard Interface

Configura Capgo per abilitare gli aggiornamenti in tempo reale per il tuo'app.

Caratteristiche chiave di Capgo

Capgo offers several tools to streamline app updates:

  • Crittografia end-to-end assicura la consegna sicura degli aggiornamenti.
  • Updates run in background al lancio dell'applicazione.
  • strumenti di analisi aiuto per monitorare le tassi di aggiornamento e l'engagement degli utenti.
  • Una opzione di rollback l'opzione ti consente di recuperare velocemente da aggiornamenti problematici.
  • Usa il Utilizza il per rollout in fase di testing beta.

Installazione Capgo

Segui questi passaggi per iniziare con Capgo:

  1. Installa il Capgo CLI:

    npm install --save @capgo/cli
  2. Inizia Capgo nel tuo progetto:

    npx capgo init
  3. Costruisci e rilascia aggiornamenti:

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

Pratiche ottimali

  • Utilizza 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 presto.
  • Tenere pronto il feature di rollback per affrontare velocemente qualsiasi problema.

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

Problemi comuni e consigli

Dopo aver completato l'installazione della piattaforma e di Capgo, potresti incontrare alcuni errori comuni. Ecco come risolverli velocemente.

Il problema di configurazione dell'ambiente

  • CLI non trovato Errore: Il comando npx cap fallisce. Fix: Esegui npm install --save @capacitor/cli @capacitor/core e riprova.

  • Errore di versione di Node ErroreComandi CLI falliscono a causa di errori di versione di Node.js. Risoluzione: Installa Node.js versione 14 o superiore come descritto nelle richieste di configurazione.

Problemi di Configurazione

  • Configurazione Mancante Errore: Le modifiche in capacitor.config.json non hanno effetto. Risoluzione: Assicurati che il appId e il webDir i valori corrispondono al tuo progetto package.json e il cartellone di output di costruzione web.

  • Errori di sincronizzazione di piattaforma Errore: Esecuzione npx cap sync risulta in conflitti di versione del plugin. Risoluzione: Aggiorna @capacitor/android e @capacitor/ios Ricompila alla versione maggiore corrente e ripeti il comando di sincronizzazione.

Costruzione e Distribuzione

  • Costruzione e distribuzione Errore: gli 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 riesco a trovare gli asset web. Risoluzione: esegui il comando di build web (ad esempio npm run build:) prima di sincronizzare le piattaforme.

Live Update Problemi

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

Summary

Risoluzione

Avvia il tuo'app web con Capacitor CLI, configura le piattaforme iOS e Android, e opzionalmente include Capgo per aggiornamenti 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 Guida di configurazione per ulteriori suggerimenti di risoluzione dei problemi.

  • Usa i Capacitor CLI per inizializzare il tuo progetto.
  • Configura il tuo ID pacchetto dell'app e definisci il percorso 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: Project Setup Guide 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 nei dispositivi Bundles per i dettagli di implementazione in Dispositivi, e

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.

Supporto umano da Martin

Inizia subito

Ultimi articoli dal nostro Blog

Capgo ti offre le migliori informazioni che ti servono per creare un'app mobile davvero professionale.