Saltare al contenuto principale

Come aggiungere dipendenze nei plugin Capacitor

Impara a semplificare la gestione delle dipendenze nei plugin Capacitor su piattaforme diverse con passaggi pratici e migliori pratiche.

Martin Donadieu

Martin Donadieu

Content Marketer

Come aggiungere le dipendenze nei plugin Capacitor

Aggiungere le dipendenze a Capacitor Aggiungere le dipendenze ai plugin può sembrare sovraccarico, ma è più facile quando si suddivide in passaggi chiari. Ecco cosa bisogna sapere:

  1. Capire gli strumenti:

    • JavaScript: Utilizza npm per gestire le dipendenze.
    • IOS: Utilizza CocoaPods o Swift Package Manager (SPM).
    • Android: Utilizza Gradle per la gestione delle dipendenze.
  2. Configura il tuo ambiente di sviluppo:

  3. Inizia il tuo Capacitor progetto di plugin:

    • Usa npm init @capacitor/plugin per creare un nuovo plugin.
  4. Aggiungi dipendenze JavaScript:

    • Usa npm install per le dipendenze di produzione e sviluppo.
    • Aggiorna package.json per includere dipendenze peer come @capacitor/core.
  5. Gestisci le dipendenze specifiche della piattaforma:

    • iOS: Configura CocoaPods o SPM con librerie come Alamofire o SwiftyJSON.
    • Android: Utilizza Gradle per aggiungere dipendenze come Gson o AppCompat.
  6. Optimizza le prestazioni:

    • Pin le versioni, esegui l'audit delle dipendenze e risolvi i conflitti per garantire la stabilità.
  7. Utilizza strumenti come Capgo per aggiornamenti in tempo reale:

    • Aggiorna in tempo reale senza revisioni dell'app store.

Confronto rapido degli strumenti:

Piattaforma Strumento Esempio di dipendenza
JavaScript npm npm install lodash --save
iOS CocoaPods/SPM pod 'Alamofire', '~> 5.6.4'
Android Gradle implementation 'com.google.code.gson:gson:2.10.1'

Perché è importante: La gestione delle dipendenze garantisce che il tuo plugin funzioni senza problemi su tutte le piattaforme, risparmi tempo e evita errori. Scopriamo di più in merito ai passaggi.

Come creare un Capacitor plugin per iOS/Android

Capacitor Documentazione del Framework del Sito Web

Configurazione dell'ambiente di sviluppo

Preparare la configurazione con gli strumenti necessari per gestire Capacitor plugin le dipendenze in modo efficace.

Strumenti di sviluppo richiesti

Ecco una lista degli strumenti che avrete bisogno:

Strumento Versione Proposito
Node.js 16.0.0+ Ambiente di esecuzione JavaScript
npm 8.0.0+ Gestione dei pacchetti
Xcode 14.0+ Sviluppo iOS (solo Mac)
Android Studio Electric Eel+ Sviluppo Android
CocoaPods 1.11.0+ Gestione delle dipendenze iOS
JDK 11+ Strumenti di costruzione Android

Iniziare un nuovo plugin

Usa i Capacitor CLI per avviare il tuo progetto plugin. Ciò include la configurazione delle piattaforme e il nome del plugin utilizzando un formato di dominio inverso (ad esempio, com.mycompany.plugin):

  1. Esegui il seguente comando:
    npm init @capacitor/plugin
  2. Scegli le piattaforme di destinazione (iOS/Android).
  3. Assegna un nome al tuo plugin nel formato di dominio inverso.

Passaggi di configurazione del progetto

  1. Aggiorna package.json

    Modifica il tuo package.json per includere i seguenti:

    {
      "capacitor": {
        "ios": {
          "src": "ios"
        },
        "android": {
          "src": "android"
        }
      },
      "peerDependencies": {
        "@capacitor/core": "^5.0.0"
      }
    }
  2. Configurazione delle piattaforme specifiche

    • For iOS, assicurati che il tuo Podfile includa: Inserisci nel tuo Podfile:Verifica che il tuo:

      platform :ios, '13.0'
      use_frameworks!
    • contenga: Configura le seguenti variabili di ambiente per i tuoi strumenti di sviluppo:Variabile build.gradle Scopo

      android {
          compileSdkVersion 33
          defaultConfig {
              minSdkVersion 22
          }
      }
  3. Valore di esempio

    Set Up Environment Variables

    Configure the following environment variables for your development tools: Variable Purpose
    ANDROID_HOME Posizione di installazione Android SDK /Users/username/Library/Android/sdk
    JAVA_HOME Percorso di installazione JDK /Library/Java/JavaVirtualMachines/jdk-11.0.12.jdk/Contents/Home
    XCODE_SELECT Strumenti di riga di comando Xcode /Applications/Xcode.app/Contents/Developer

Una volta configurato il tuo progetto, sei pronto a passare alla gestione delle dipendenze JavaScript.

Dipendenze JavaScript

La gestione efficace delle dipendenze JavaScript è fondamentale per mantenere prestazioni stabili del plugin.

npm Installazione del Pacchetto

npm

Per installare le dipendenze, utilizza i seguenti comandi:

# Add a production dependency
npm install lodash --save

# Add a development dependency
npm install @types/lodash --save-dev

Assicurati di includere manualmente le dipendenze peer nel tuo package.json file. Verifica tutte le dipendenze per confermare la compatibilità su entrambi i piattaforme web e native.

Gestione di package.json

Ecco un esempio package.json di configurazione:

{
  "name": "my-capacitor-plugin",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.195",
    "@capacitor/core": "^5.0.0"
  },
  "peerDependencies": {
    "@capacitor/core": "^5.0.0"
  }
}

Per mantenere la consistenza, blocca le versioni delle dipendenze in modo appropriato:

Tipo di vincolo Esempio Usa il Caso d'Uso
Esatto “5.0.0” Per le dipendenze critiche che richiedono una versione specifica
Caret “^5.0.0” Consente aggiornamenti minori e patch
Tilde “~5.0.0” Limita gli aggiornamenti alle patch soltanto

Utilizzo di librerie JavaScript

Quando si importano librerie, si concentri sulla riduzione del peso del pacchetto:

// Import only the required function
import { isEqual } from 'lodash';

export class MyPlugin {
  async compare(options: { value1: any, value2: any }): Promise<boolean> {
    return isEqual(options.value1, options.value2);
  }
}

Inoltre, assicurati di gestire correttamente gli errori e di eseguire il controllo di tipo:

import { Plugin } from '@capacitor/core';
import { validate } from 'your-validation-library';

@Plugin({
  name: 'MyPlugin',
  platforms: ['web', 'ios', 'android']
})
export class MyPlugin {
  async validateData(data: unknown): Promise<void> {
    try {
      if (!validate(data)) {
        throw new Error('Invalid data format');
      }
      // Continue processing if valid
    } catch (error) {
      throw new Error(`Validation failed: ${error.message}`);
    }
  }
}

Prossimamente, esplora come gestire le dipendenze specifiche per iOS.

Dipendenze per iOS

Questa sezione spiega come gestire le dipendenze native iOS in Capacitor plugin. Una volta impostate le dipendenze JavaScript, il passo successivo è gestire le dipendenze native iOS.

CocoaPods Setup

CocoaPods

Inizia con l'inizializzare CocoaPods nella directory iOS:

cd ios
pod init

Poi, aggiorna il Plugin.podspec file con le seguenti configurazioni:

Pod::Spec.new do |s|
  s.name = 'MyCapacitorPlugin'
  s.version = '1.0.0'
  s.summary = 'Your plugin description'
  s.platform = :ios, '13.0'
  s.dependency 'Capacitor'
  # Include your iOS dependencies here
  s.dependency 'Alamofire', '~> 5.6.4'
end

Configurazione del Podfile

Dopo aver inizializzato CocoaPods, configura il Podfile per includere Capacitor e qualsiasi altra libreria di terze parti:

platform :ios, '13.0'
use_frameworks!

def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
end

target 'Plugin' do
  capacitor_pods
  # Add third-party dependencies
  pod 'KeychainAccess', '~> 4.2.2'
  pod 'SwiftyJSON', '~> 5.0.1'
end

target 'PluginTests' do
  capacitor_pods
end

Ecco alcuni modelli di configurazione comuni per le dipendenze:

Tipologia di vincolo Esempio Caso d'uso
Versione esatta pod 'KeychainAccess', '4.2.2' Quando è necessario un controllo preciso, come per i componenti di sicurezza
Versione minore pod 'Alamofire', '~> 5.6' Per API stabili che possono ricevere aggiornamenti di patch
Versione maggiore pod 'SwiftyJSON', '> 5.0' Quando è accettabile la flessibilità all'interno degli aggiornamenti

Dipendenze del pacchetto Swift

Se preferite non utilizzare CocoaPods, il gestore dei pacchetti Swift (SPM) è un'alternativa valida. Aggiungere le dipendenze SPM direttamente in Xcode con la seguente configurazione nel tuo Package.swift file:

// Package.swift
dependencies: [
    .package(url: "https://github.com/Alamofire/Alamofire.git", .upToNextMajor(from: "5.6.4")),
    .package(url: "https://github.com/SwiftyJSON/SwiftyJSON.git", from: "5.0.1")
]

To usare le dipendenze SPM nel tuo plugin code, importale e integrali come necessario. Ad esempio:

import Capacitor
import Alamofire

@objc(MyPlugin)
public class MyPlugin: CAPPlugin {
    @objc func makeRequest(_ call: CAPPluginCall) {
        AF.request("https://api.example.com/data").response { response in
            // Process the response
            call.resolve([
                "data": response.data
            ])
        }
    }
}

Questa approccio ti consente di scegliere tra CocoaPods e Swift Package Manager in base alle tue esigenze di progetto.

Dipendenze Android

Configura le dipendenze Android per garantire un'integrazione nativa liscia. Ecco come gestire le dipendenze per il tuo plugin Capacitor.

Gradle Dipendenze

Gradle Build Tool Interface

Aggiungi le seguenti configurazioni al tuo build.gradle file:

android {
    defaultConfig {
        minSdkVersion 22
        targetSdkVersion 33
    }
}

dependencies {
    implementation "androidx.appcompat:appcompat:1.6.1"
    implementation "com.google.code.gson:gson:2.10.1"
    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.20"
    implementation project(':capacitor-android')
}

Definisci versioni aggiuntive nel buildscript blocco:

buildscript {
    ext {
        androidxCoreVersion = '1.10.1'
        kotlinVersion = '1.8.20'
    }
}

Una volta configurate le dipendenze, assicurati di configurare i repository necessari.

Configurazione del Repository

Nella tua configurazione del progetto build.gradle, includi i repository Maven richiesti:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url "https://jitpack.io" }
    }
}

Se stai utilizzando repository Maven personalizzati o privati, aggiungi le credenziali in questo modo:

maven {
    url "https://maven.example.com/releases"
    credentials {
        username = project.findProperty("mavenUsername") ?: System.getenv("MAVEN_USERNAME")
        password = project.findProperty("mavenPassword") ?: System.getenv("MAVEN_PASSWORD")
    }
}

Con i repository configurati, risolvi eventuali conflitti di dipendenza che potrebbero sorgere.

Risoluzione dei Problemi di Conformità

Per gestire i conflitti di dipendenza, applica le risoluzioni di versione nella tua build.gradle:

configurations.all {
    resolutionStrategy {
        force "org.jetbrains.kotlin:kotlin-stdlib:1.8.20"
        force "androidx.core:core-ktx:1.10.1"
    }
}

Ecco le strategie per risolvere i problemi di dipendenza comuni:

Tipo di Problema Strategia Esempio
Conflitto di Versione Forzare una versione specifica force 'com.google.code.gson:gson:2.10.1'
Versioni Multiple Escludere un modulo exclude group: 'org.json', module: 'json'
Problemi Trasversali Usare versioni rigorose strictly 'androidx.core:core-ktx:1.10.1'

Ad esempio, puoi escludere moduli in conflitto in questo modo:

dependencies {
    implementation('library:name:1.0.0') {
        exclude group: 'com.conflicting.dependency'
    }
}

Infine, ottimizza il processo di costruzione abilitando il caching e l'esecuzione in parallelo in gradle.properties:

org.gradle.caching=true
org.gradle.parallel=true
org.gradle.jvmargs=-Xmx2048m

Capgo Integrazione

Capgo Dashboard di Aggiornamento in Tempo Reale Interfaccia

Utilizzando Capgo insieme alla gestione delle dipendenze native e JavaScript rende più veloce e facile l'aggiornamento del tuo plugin.

Informazioni su Capgo

Capgo è una piattaforma di aggiornamento in tempo reale progettata per Capacitor plugin e app. Con oltre 23,5 milioni di aggiornamenti consegnati su 750 app in produzione [1], Capgo consente ai developer di inviare aggiornamenti per le dipendenze e code in modo istantaneo - senza la necessità di una revisione dell'app store. Gli aggiornamenti sono protetti da crittografia end-to-end e rispettano entrambi i requisiti di conformità di Apple e Android.

Capgo Feature di Aggiornamento

Capgo semplifica la gestione delle dipendenze dei plugin con queste funzionalità:

Funzione Cosa fa Metrica chiave
Aggiornamenti in tempo reale Invia aggiornamenti in pochi minuti 95% di aggiornamenti degli utenti entro 24 ore
Aggiornamenti parziali Scarica solo i file modificati 434ms average API response time
Controllo delle versioni Gestisci più versioni Tasso di successo globale del 82%
Sistema dei canali Scegli gruppi di utenti specifici Supporta più canali di distribuzione

Fonte: [1]

Capgo funziona in modo trasparente con strumenti CI/CD come GitHub Actions, GitLab CI e Jenkins, automatizzando l'aggiornamento delle dipendenze e garantendo versioni plugin coerenti. Questi strumenti rendono più facile integrare Capgo nel tuo workflow.

Impostazione di Capgo

Segui questi passaggi per integrare Capgo nel tuo progetto:

  1. Installa il Capgo CLI

    Esegui il seguente comando nella tua finestra di comando:

    npx @capgo/cli init
  2. Configura le Preferenze di Aggiornamento

    Utilizza il Capgo dashboard per configurare i canali di distribuzione e le preferenze. Sono supportate sia le configurazioni ospitate sul cloud che quelle auto-ospitate.

  3. Aggiungi Logica di Aggiornamento

    Aggiungi questo code al tuo file plugin principale per abilitare gli aggiornamenti:

    import { Capgo } from '@capgo/capacitor-updater';
    
    // Initialize Capgo
    const capgo = new Capgo({
      appId: 'YOUR_APP_ID',
      channel: 'production'
    });
    
    // Check for updates
    await capgo.checkForUpdate();

“Pratichiamo lo sviluppo agile e @Capgo è essenziale per consegnare continuamente ai nostri utenti!” - Rodrigo Mantica

Capgo fornisce anche un dashboard di analisi per ottenere informazioni in tempo reale sulle tassi di successo degli aggiornamenti e l'attività degli utenti. Caratteristiche come il rollback con un clic e la tracciatura degli errori aiutano a risolvere qualsiasi problema velocemente, mantenendo gli aggiornamenti dei plugin in esecuzione in modo fluido.

Conclusione

Revisione del Processo

La gestione delle dipendenze per i plugin Capacitor prevede l'allineamento dei componenti nativi (iOS e Android) con i loro omologhi JavaScript per garantire un'integrazione liscia. Questo processo include le impostazioni specifiche per piattaforma e la gestione dei pacchetti JavaScript per ottenere il miglior rendimento. Seguendo i passaggi descritti si potranno mantenere funzionalità plugin stabili ed efficienti.

Pratiche Consigliate

Per gestire le dipendenze in modo efficace, considera queste pratiche:

Esercitazione Beneficio Come implementare
Pinning della versione Evita problemi inaspettati Utilizza versioni fisse in package.json
Isolamento della piattaforma Minimizza conflitti Dipendenze native separate
Aggiornamenti regolari Migliora la sicurezza Applica patch critici con urgenza
Verifica delle dipendenze Detects rischi Esegui npm audit spesso

Utilizzando strumenti di aggiornamento in tempo reale come Capgo si possono semplificare e migliorare queste pratiche consentendo aggiornamenti in tempo reale.

Capgo Benefits

Capgo semplifica il processo di gestione delle dipendenze mentre fornisce una forte prestazione. Raggiunge un'impressionante 95% di aggiornamenti degli utenti entro 24 ore e mantiene un tempo di risposta globale di API di 434ms [1]. Con crittografia end-to-end, assicura aggiornamenti sicuri che rispettano sia le linee guida di Apple che quelle di Android. Per gli squadre che gestiscono diverse versioni di plugin, il sistema dei canali di Capgo consente deployment mirati per gruppi di utenti specifici.

Ecco un rapido sguardo alle prestazioni di Capgo:

Metrico Valore
Tempo di Risposta Globale API 434ms
Tasso di Aggiornamento Protetto 82%
Tasso di Aggiornamento Utente (24 Ore) 95%

Continua da Come Aggiungere Dipendenze nei Plugin Capacitor

Se stai utilizzando Come Aggiungere Dipendenze nei Plugin Capacitor per pianificare il lavoro dei plugin nativi, connettilo con Directory dei Plugin Capgo per il flusso di lavoro del prodotto nella Directory dei Plugin Capgo, Plugins da Capacitor sviluppati da Capgo per i dettagli di implementazione in Plugins da Capacitor sviluppati da Capgo, Aggiunta o Aggiornamento di Plugins per i dettagli di implementazione in Aggiunta o Aggiornamento di Plugins, Alternative per Plugin Enterprise di Ionic per il workflow del prodotto in Alternative per Plugin Enterprise di Ionic, e Capgo Costruzione Nativa per il workflow del prodotto in Capgo Costruzione Nativa.

Aggiornamenti in tempo reale per le Capacitor app

Quando un bug del layer web è attivo, invia la correzione attraverso Capgo 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.

Inizia Ora

Ultimi articoli dal nostro Blog

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