Comment ajouter des dépendances dans les plugins Capacitor

Ajouter des dépendances aux Capacitor plugins peut sembler complexe, mais c'est plus simple quand on le décompose en étapes claires. Voici ce qu'il faut savoir :

1. Comprendre 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:

   • Installez des outils comme Node.js, npm, Xcode, Android Studio, CocoaPods et JDK.

3. Commencez votre projet de plugin Capacitor:

   • Utilisez npm init @capacitor/plugin pour créer un nouveau plugin.

4. Ajoutez des dépendances JavaScript:

   • Utilisez npm install pour les dépendances de production et de développement.
   • Mise à jour package.json pour inclure des peer dependencies comme @capacitor/core.

5. Gérer les dépendances spécifiques aux plateformes:

   • iOS: Configurez CocoaPods ou SPM avec des librairies comme Alamofire ou SwiftyJSON.
   • Android: Utilisez Gradle pour ajouter des dépendances comme Gson ou AppCompat.

6. Optimiser les performances:

   • Fixez les versions, auditez les dépendances et résolvez les conflits pour garantir la stabilité.

7. Utilisez des outils comme Capgo pour les live updates:

   • Push updates instantly without app store reviews.

Comparatif rapide des outils:

Pourquoi c'est important: Gérer efficacement les dépendances garantit le bon fonctionnement de votre plugin sur toutes les plateformes, vous fait gagner du temps et évite les erreurs. Voyons cela en détail.

Comment créer un Capacitor plugin pour iOS/Android

Configurer votre environnement de développement

Préparez votre environnement avec les outils nécessaires pour gérer Plugin Capacitor efficacement les dépendances.

Outils de développement requis

Voici la liste des outils dont vous aurez besoin :

Créer un nouveau plugin

Utilisez le Capacitor CLI pour lancer votre projet de plugin. Cela inclut la configuration des plateformes et le nommage de votre plugin au format reverse-domain (ex : 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 au format reverse-domain.

Étapes de configuration du projet

1. Mise à jour package.json

   Modifiez votre package.json pour inclure ce qui suit :

   {
     "capacitor": {
       "ios": {
         "src": "ios"
       },
       "android": {
         "src": "android"
       }
     },
     "peerDependencies": {
       "@capacitor/core": "^5.0.0"
     }
   }

2. Configuration spécifique à la plateforme

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

     platform :ios, '13.0'
     use_frameworks!

   • Pour Android, vérifiez que votre build.gradle contient :

     android {
         compileSdkVersion 33
         defaultConfig {
             minSdkVersion 22
         }
     }

3. Configurer les variables d'environnement

   Configurez les variables d'environnement suivantes pour vos outils de développement :

   Variable	Finalité	Valeur d'exemple
   ANDROID_HOME	Emplacement SDK d'Android	/Users/username/Library/Android/sdk
   JAVA_HOME	Chemin d'installation du JDK	/Library/Java/JavaVirtualMachines/jdk-11.0.12.jdk/Contents/Home
   XCODE_SELECT	Outils de ligne de commande Xcode	/Applications/Xcode.app/Contents/Developer

Une fois votre projet configuré, vous pouvez passer à la gestion des dépendances JavaScript.

Dépendances JavaScript

Une gestion efficace des dépendances JavaScript est essentielle pour maintenir la stabilité des plugins.

npm Installation des packages

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 peer dependencies dans votre package.json fichier. Testez toutes les dépendances pour confirmer la compatibilité sur les plateformes web et natives.

Gérer le package.json

Voici un exemple package.json configuration :

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

Pour maintenir la cohérence, verrouillez les versions des dépendances de manière appropriée :

Utilisation de bibliothèques JavaScript

When importing libraries, focus on reducing the bundle size:

// 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 également une gestion d'erreurs et un typage 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 à la plateforme pour iOS.

Dépendances iOS

Cette section explique comment gérer les dépendances natives iOS dans Plugins Capacitor. Une fois vos dépendances JavaScript configurées, l'étape suivante consiste à gérer les dépendances natives iOS.

CocoaPods Configuration

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 du Podfile

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

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 courants de configuration de dépendances :

Dépendances Swift Package

Si vous préférez ne pas utiliser CocoaPods, Swift Package Manager (SPM) est une excellente alternative. Ajoutez les dépendances SPM directement dans Xcode avec la configuration suivante dans votre Package.swift fichier :

// 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")
]

Pour utiliser des dépendances SPM dans votre plugin code, importez-les et intégrez-les selon vos besoins. Par exemple :

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

Cette approche vous permet de choisir entre CocoaPods et Swift Package Manager selon les besoins de votre projet.

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 Capacitor.

Gradle Dépendances

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 paramétrer les dépôts nécessaires.

Configuration des dépôts

Dans votre projet au niveau racine build.gradle, incluez les dépôts Maven requis :

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

Si vous utilisez des dépôts Maven personnalisés ou privés, ajoutez les identifiants comme ceci :

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

Les dépôts étant configurés, gérez les éventuels conflits de dépendances.

Résolution des problèmes de compatibilité

Pour gérer les conflits de dépendances, appliquez des résolutions de version 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 :

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

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

Enfin, optimisez votre processus de build en activant le 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

L'utilisation de Capgo combinée à la gestion des dépendances natives et JavaScript rend la mise à jour de votre plugin plus rapide et plus simple.

À propos de Capgo

Capgo est une plateforme live update conçue pour les Capacitor plugins et applications. Avec plus de 23,5 millions de mises à jour livrées sur 750 applications en production [1], Capgo permet aux développeurs de pousser instantanément des mises à jour pour les dépendances et code — sans passer par la revue des stores. Les mises à jour sont sécurisées par un chiffrement de bout en bout et respectent les normes de conformité Apple et Android.

Fonctionnalités de mise à jour Capgo

Capgo simplifie la gestion des dépendances de plugins avec ces fonctionnalités :

Source : [1]

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

Configuration de Capgo

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

1. Installez le CLI de Capgo

   Exécutez la commande suivante dans votre terminal :

   npx @capgo/cli init

2. Configurer les préférences de mise à jour

   Utilisez le dashboard Capgo pour configurer vos canaux de déploiement et vos préférences. Les configurations cloud et self-hosted sont toutes deux prises en charge.

3. Ajouter la logique de mise à jour

   Ajoutez ce 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 pour livrer en continu à nos utilisateurs ! » - Rodrigo Mantica

Capgo propose également un dashboard analytics pour obtenir des insights en temps réel sur le taux de succès des mises à jour et l'activité des utilisateurs. Des fonctionnalités comme le rollback en un clic et le suivi des erreurs aident à résoudre rapidement tout problème, garantissant la fluidité de vos mises à jour de plugins.

Conclusion

Revue du processus

La gestion des dépendances pour les plugins Capacitor nécessite d'aligner les composants natifs (iOS et Android) avec leurs équivalents JavaScript pour garantir une intégration fluide. Ce processus inclut des configurations spécifiques à chaque plateforme et la gestion des packages JavaScript pour obtenir les meilleures performances. Suivre les étapes décrites ci-dessous aidera à maintenir des fonctionnalités de plugin stables et efficaces.

Bonnes pratiques

Pour gérer efficacement les dépendances, suivez ces bonnes pratiques :

L'utilisation d'outils live update comme Capgo peut simplifier et améliorer ces pratiques en permettant des Live Update en temps réel.

Avantages de Capgo

Capgo simplifie la gestion des dépendances tout en offrant de hautes performances. Il atteint un niveau impressionnant de 95 % de mises à jour utilisateurs en 24 heures et maintient un temps de réponse API global de 434 ms [1]. Grâce au chiffrement de bout en bout, il garantit des mises à jour sécurisées conformes aux directives d'Apple et d'Android. Pour les équipes gérant plusieurs versions de plugins, le système de canaux de Capgo permet des déploiements ciblés pour des groupes d'utilisateurs spécifiques.

Voici un aperçu des performances de Capgo :

Continuer la lecture : Comment ajouter des dépendances dans les plugins Capacitor

Si vous utilisez Comment ajouter des dépendances dans les plugins Capacitor pour planifier le travail sur un plugin natif, connectez-l’à Répertoire des plugins Capgo pour le workflow produit dans le répertoire des plugins Capgo, Plugins Capacitor par Capgo pour les détails d'implémentation dans les plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Adding or Updating Plugins, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, et Capgo Native Build pour le workflow produit dans les Capgo Native Builds.