Aller directement au contenu principal

Comment ajouter des dépendances dans les plugins Capacitor

Apprenez à rationaliser la gestion des dépendances dans les plugins Capacitor sur plusieurs plateformes avec des étapes pratiques et des meilleures pratiques.

Martin Donadieu

Martin Donadieu

Spécialiste du contenu

Comment ajouter des dépendances dans les plugins Capacitor

Ajouter des dépendances à __CAPGO_KEEP_0__ Ajouter des dépendances à Capacitor Les plugins peuvent sembler surchargés, mais c'est plus facile lorsqu'ils sont décomposés en étapes claires. Voici ce dont vous avez besoin de savoir :

  1. Comprenez les outils:

    • JavaScript: Utilisez npm pour gérer les dépendances.
    • iOS: Utilisez CocoaPods ou Swift Package Manager (SPM).
    • Android: Utilisez Gradle pour la gestion des dépendances.
  2. Configurez votre environnement de développement:

  3. Démarrer votre Capacitor plugin projet:

    • Utilisez npm init @capacitor/plugin pour créer un nouveau plugin.
  4. Ajoutez les dépendances JavaScript:

    • Utilisez npm install pour les dépendances de production et de développement.
    • Mettez à jour package.json pour inclure les dépendances de pair comme @capacitor/core.
  5. Gérez les dépendances spécifiques à la plateforme:

    • iOS: Configurez CocoaPods ou SPM avec des bibliothèques comme Alamofire ou SwiftyJSON.
    • Android: Utilisez Gradle pour ajouter des dépendances comme Gson ou AppCompat.
  6. Optimisation de la performance:

    • Fixez les versions, vérifiez les dépendances et résolvez les conflits pour garantir la stabilité.
  7. Utilisez des outils comme Capgo pour les mises à jour en temps réel:

    • Publiez des mises à jour instantanément sans passer par les app stores.

Comparaison rapide d'outils:

PlateformeOutilExemple de dépendance
JavaScriptnpmnpm install lodash --save
iOSCocoaPods/SPMpod 'Alamofire', '~> 5.6.4'
AndroidGradleimplementation 'com.google.code.gson:gson:2.10.1'

Pourquoi cela compteGestion efficace des dépendances garantit que votre plugin fonctionne sans heurt sur plusieurs plateformes, économise du temps et évite les erreurs. Découvrons les étapes plus en détail.

Comment créer un Capacitor plugin pour iOS/Android

Capacitor Documentation du Framework Site Web

Configuration de votre environnement de développement

Préparez votre configuration avec les outils nécessaires pour gérer efficacement Capacitor plugin les dépendances de manière efficace.

Outils de développement requis

Voici une liste d'outils dont vous aurez besoin :

OutilVersionObjectif
Node.js16.0.0+Environnement de temps d'exécution JavaScript
npm8.0.0+Gestion de packages
Xcode14.0+Développement iOS (Mac uniquement)
Android StudioElectric Eel+Développement Android
CocoaPods1.11.0+Gestion de dépendances iOS
JDK11+Outils de construction Android

Lancement d'un nouveau plugin

Utilisez les Capacitor CLI pour démarrer votre projet de plugin. Cela inclut la configuration des plateformes et le nommage de votre plugin en utilisant un format de domaine inversé (par exemple, com.mycompany.plugin):

  1. Exécutez la commande suivante :
    npm init @capacitor/plugin
  2. Choisissez vos plateformes cibles (iOS/Android).
  3. Attribuez un nom à votre plugin sous la forme d'un nom de domaine inversé.

Étapes de configuration du projet

  1. Mettre à jour package.json

    Modifiez votre package.json afin de le rendre compatible avec les éléments suivants :

    {
      "capacitor": {
        "ios": {
          "src": "ios"
        },
        "android": {
          "src": "android"
        }
      },
      "peerDependencies": {
        "@capacitor/core": "^5.0.0"
      }
    }
  2. Configuration de la plateforme spécifique

    • Pour iOS, assurez-vous que votre fichier Podfile inclut :

      platform :ios, '13.0'
      use_frameworks!
    • Pour Android, vérifiez votre build.gradle contient :

      android {
          compileSdkVersion 33
          defaultConfig {
              minSdkVersion 22
          }
      }
  3. Configurer les variables d'environnement suivantes pour vos outils de développement :

    Variable

    ButValeur d'exempleANDROID_HOME
    Emplacement Android de __CAPGO_KEEP_0__/Users/username/Library/Android/SDK/Users/username/Library/Android/sdk
    JAVA_HOMEChemin d'installation de JDK/Library/Java/JavaVirtualMachines/jdk-11.0.12.jdk/Contents/Home
    XCODE_SELECTOutils de ligne de commande Xcode/Applications/Xcode.app/Contents/Developer

Une fois votre projet configuré, vous êtes prêt à passer à la gestion des dépendances JavaScript.

Dépendances JavaScript

La gestion efficace des dépendances JavaScript est essentielle pour maintenir une performance stable du plugin.

npm Installation de package

npm

Pour installer les dépendances, utilisez les commandes suivantes :

# Add a production dependency
npm install lodash --save

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

Assurez-vous d'inclure manuellement les dépendances de peer dans votre fichier. package.json Testez toutes les dépendances pour confirmer la compatibilité sur les deux plateformes web et natives.

Gestion de package.json

Voici un exemple de configuration : package.json Pour maintenir la cohérence, bloquez les versions des dépendances de manière appropriée :

{
  "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"
  }
}

Type de contrainte

ExempleUtilisationExact
Pour les dépendances critiques nécessitant une version spécifique”5.0.0”Caret
__CAPGO_KEEP_0__”^5.0.0”Permet les mises à jour mineures et les correctifs
Tilde”~5.0.0”Restreint les mises à jour aux correctifs uniquement

Utilisation des bibliothèques JavaScript

Lors de l'importation de bibliothèques, concentrez-vous sur la réduction de la taille du bundle :

// 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);
  }
}

Assurez-vous également d'une gestion des erreurs et d'un contrôle des types appropriés :

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}`);
    }
  }
}

Ensuite, découvrez comment gérer les dépendances spécifiques au plateau pour iOS.

Dépendances iOS

Cette section explique comment gérer les dépendances natives iOS dans Capacitor pluginsUne fois que vous avez configuré vos dépendances JavaScript, la prochaine étape consiste à gérer les dépendances natives iOS.

CocoaPods Configuration

CocoaPods

Commencez par initialiser CocoaPods dans votre répertoire iOS :

cd ios
pod init

Ensuite, mettez à jour votre Plugin.podspec fichier avec les configurations suivantes :

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

Configuration de Podfile

Après avoir initialisé CocoaPods, configurez le Podfile pour y inclure Capacitor et toute autre bibliothèque tiers supplémentaire :

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

Voici quelques modèles de configuration de dépendance courants :

Type de contrainteExempleUtilisation
Version exactepod 'KeychainAccess', '4.2.2'Lorsqu'une contrôle précis est nécessaire, comme pour les composants de sécurité
Version mineurepod 'Alamofire', '~> 5.6'Pour les API stables qui peuvent recevoir des mises à jour de patch
Version majeurepod 'SwiftyJSON', '> 5.0'Lorsque la flexibilité à travers les mises à jour est acceptable

Dépendances de package Swift

Si vous préférez ne pas utiliser CocoaPods, le gestionnaire de package Swift (SPM) est une bonne alternative. Ajoutez les dépendances SPM directement dans Xcode avec la configuration suivante dans votre Package.swift Pour utiliser les dépendances SPM dans votre plugin __CAPGO_KEEP_0__, importez-les et intégrez-les comme nécessaire. Par exemple :

// 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 use SPM dependencies in your plugin code, import them and integrate as needed. For example:

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
            ])
        }
    }
}

Dépendances Android

Configurez les dépendances Android pour garantir une intégration native fluide. Voici comment gérer les dépendances pour votre plugin __CAPGO_KEEP_0__

Set up Android dependencies to ensure smooth native integration. Here’s how to manage dependencies for your Capacitor plugin.

Gradle Dépendances

Interface de l'outil de construction Gradle

Ajoutez les configurations suivantes à votre build.gradle fichier :

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')
}

Définissez des versions supplémentaires dans le buildscript Bloc :

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

Une fois les dépendances configurées, assurez-vous de configurer les répertoires nécessaires.

Configuration du répertoire

Dans votre niveau de projet build.gradle, incluez les répertoires Maven requis :

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

Si vous utilisez des répertoires Maven personnalisés ou privés, ajoutez des informations d'identification comme suit :

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

Une fois les dépôts configurés, résolvez les conflits de dépendances qui peuvent survenir.

Résoudre les problèmes de compatibilité

Pour gérer les conflits de dépendances, appliquez des résolutions de versions dans votre build.gradle:

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

Voici des stratégies pour résoudre les problèmes de dépendances courants :

Type de problèmeStratégieExemple
Conflit de versionForcer une version spécifiqueforce 'com.google.code.gson:gson:2.10.1'
Plusieurs versionsExclure un moduleexclude group: 'org.json', module: 'json'
Problèmes transitatifsUtilisez des versions strictesstrictly 'androidx.core:core-ktx:1.10.1'

Par exemple, vous pouvez exclure les modules en conflit comme ceci :

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

Finalement, optimisez votre processus de construction en activant la mise en cache et l'exécution parallèle dans gradle.properties:

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

Capgo Intégration

Capgo Tableau de bord d'actualisation en direct Interface

L'utilisation de Capgo en conjonction avec la gestion de dépendances native et JavaScript rend l'actualisation de votre plugin plus rapide et plus facile.

À propos de Capgo

Capgo est une plateforme d'actualisation en direct conçue pour les plugins et les applications Capacitor. [1], Capgo allows developers to push updates for dependencies and code instantly - no app store review required. Updates are secured with end-to-end encryption and meet both Apple and Android compliance standards.

Capgo permet aux développeurs de pousser des actualisations pour les dépendances et les __CAPGO_KEEP_1__ instantanément - aucune revue d'application requise.

Capgo simplifies managing plugin dependencies with these features:

FonctionnalitéCe qu'il faitIndicateur clé
Mises à jour en temps réelMise à jour en quelques minutesTaux de mise à jour utilisateur de 95% en 24 heures
Mises à jour partiellesTéléchargement uniquement des fichiers modifiés434ms average API response time
Contrôle de versionGestion de plusieurs versionsTaux de réussite mondial de 82%
Système de canalCibler des groupes d'utilisateurs spécifiquesSupporte plusieurs canaux de déploiement

Source : [1]

Capgo fonctionne de manière fluide avec les outils CI/CD comme GitHub Actions, GitLab CI et Jenkins, automatisant les mises à jour de dépendances et garantissant des versions cohérentes de plugins. Ces outils facilitent l'intégration de Capgo dans votre flux de travail.

Configuration de Capgo

Suivez ces étapes pour intégrer Capgo dans votre projet :

  1. Installez le Capgo CLI

    Exécutez la commande suivante dans votre terminal :

    npx @capgo/cli init
  2. Configurer les préférences de mise à jour

    Utilisez le tableau de bord de Capgo pour configurer les canaux de déploiement et les préférences. Les configurations hébergées dans le cloud et auto-hébergées sont prises en charge.

  3. Ajouter la logique de mise à jour

    Ajoutez ceci code à votre fichier de plugin principal pour activer les mises à jour :

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

“Nous pratiquons le développement agile et @Capgo est essentiel à la livraison continue à nos utilisateurs !” - Rodrigo Mantica

Capgo fournit également un tableau de bord d'analytique pour des informations en temps réel sur les taux de réussite des mises à jour et l'activité des utilisateurs. Les fonctionnalités comme le retour en arrière en un clic et le suivi des erreurs aident à résoudre rapidement les problèmes, ce qui permet de maintenir vos mises à jour de plugin en cours de roulement.

Conclusion

Révision du processus

Gérer les dépendances pour les plugins Capacitor implique l'alignement des composants natifs (iOS et Android) avec leurs équivalents JavaScript pour garantir une intégration fluide. Ce processus comprend des paramétrages spécifiques aux plateformes et la gestion de packages JavaScript pour atteindre la meilleure performance. Suivre les étapes décrites aidera à maintenir une fonctionnalité de plugin stable et efficace.

Meilleures pratiques

Pour gérer efficacement les dépendances, considérez ces pratiques :

PratiqueAvantageComment mettre en œuvre
Fixation de versionÉvite les problèmes inattendusUtilisez des versions fixes dans package.json
Isolateur de plateformeMinimise les conflitsDépendances natives séparées
Mises à jour régulièresAméliore la sécuritéAppliquez les correctifs critiques rapidement
Audit des dépendancesDétermine les risquesExécutez npm audit fréquemment

En utilisant des outils d'actualisation en temps réel comme Capgo peut simplifier encore et améliorer ces pratiques en permettant des mises à jour en temps réel.

Capgo Benefits

Capgo simplifie le processus de gestion des dépendances tout en offrant une performance solide. Il atteint un taux impressionnant d'actualisation des utilisateurs de 95% en 24 heures et maintient un temps de réponse global __CAPGO_KEEP_0__ de 434ms. Avec une encryption de bout en bout, il garantit des mises à jour sécurisées qui répondent aux deux lignes directrices d'Apple et d'Android. Pour les équipes gérant plusieurs versions de plugins, le système de canal de API permet des déploiements ciblés pour des groupes d'utilisateurs spécifiques. Voici un aperçu rapide des performances de __CAPGO_KEEP_0__ : [1]. With end-to-end encryption, it ensures secure updates that comply with both Apple and Android guidelines. For teams managing multiple plugin versions, Capgo’s channel system allows targeted deployments for specific user groups.

Here’s a quick look at Capgo’s performance:

Temps de réponse global __CAPGO_KEEP_0__434ms
API Benefits__CAPGO_KEEP_0__ simplifies the dependency management process while delivering strong performance. It achieves an impressive
Taux de Succès de Mise à Jour82%
Taux de Mise à Jour des Utilisateurs (24 Heures)95%
Mises à jour en temps réel pour les applications Capacitor

Lorsqu'un bug de la couche web est en ligne, expédiez la correction à travers Capgo au lieu d'attendre des jours pour l'approbation de la boutique d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les modifications natives restent dans le chemin de revue normal.

Commencez maintenant

Dernières actualités de notre blog

Capgo vous offre les meilleures informations dont vous avez besoin pour créer une application mobile vraiment professionnelle.