Comment ajouter des dépendances dans les plugins Capacitor

L'ajout de dépendances à des plugins __CAPGO_KEEP_0__ peut sembler compliqué, mais il est plus facile lorsqu'on le divise en étapes claires. Voici ce que vous devez savoir : Capacitor Comprenez les outils

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:

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

3. Commencez 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.
   • Mettre à jour package.json pour inclure les dépendances de pair comme @capacitor/core.

5. Gérer 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. Optimiser les performances:

   • Gérer les versions, auditer les dépendances et résoudre 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 des Outils:

Pourquoi cela compte: Gérer efficacement les 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

Configuration de votre environnement de développement

Préparez votre configuration avec les outils nécessaires pour gérer plugin Capacitor les dépendances sont effectivement.

Outils de développement requis

Voici une liste d'outils dont vous aurez besoin :

Lancement d'un nouveau plugin

Utilisez les Capacitor CLI pour démarrer votre projet de plugin. Cela inclut la configuration des plateformes et la nomination de votre plugin à l'aide d'un format de domaine inversé (par exemple, com.mycompany.plugin):

1. Exécutez la commande suivante :
   npm init @capacitor/plugin
2. Sélectionnez vos plateformes cibles (iOS/Android).
3. Attribuez un nom à votre plugin au format domaine-réversible.

Étapes de configuration du projet

1. Mettre à jour package.json

   Modifiez votre package.json pour qu'il inclue les éléments suivants :

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

2. Configuration de mise en œuvre spécifique au plateforme

   • Pour iOS, assurez-vous que votre fichier 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 suivantes pour vos outils de développement :

   Variable

   Objectif	Valeur d'exemple	ANDROID_HOME
   Emplacement Android __CAPGO_KEEP_0__	/Users/username/Library/Android/SDK	/Users/username/Library/Android/sdk
   Chemin d'installation de JDK	/Library/Java/JavaVirtualMachines/jdk-11.0.12.jdk/Contents/Home	Configurez les variables d'environnement suivantes pour vos outils de développement :
   XCODE_SELECT	Outils 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

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

Gestion de 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, bloquez les versions des dépendances de manière appropriée :

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'une vérification de type appropriées :

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, le prochain pas consiste à gérer les dépendances natives iOS.

CocoaPods Configuration

Commencez par initialiser CocoaPods dans votre répertoire iOS :

cd ios
pod init

Mise à jour de votre fichier Plugin.podspec 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 fichier 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 :

Dépendances de packages Swift

Si vous préférez ne pas utiliser CocoaPods, le gestionnaire de packages Swift (SPM) est une bonne 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 les dépendances SPM dans votre plugin code, importez-les et intégrez-les comme nécessaire. 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 le gestionnaire de packages Swift en fonction des 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 block :

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 des répertoires

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 répertoires configurés, résolvez les conflits de dépendances qui peuvent survenir.

Résolution des problèmes de compatibilité

Gérer les conflits de dépendances nécessite l'application de 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 :

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

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

Enfin, 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

L'utilisation de Capgo aux côtés de la gestion de dépendances natives et JavaScript rend l'actualisation de votre plugin plus rapide et plus facile.

À propos de Capgo

Capgo est une plateforme de mise à jour en temps réel conçue pour les plugins et les applications Capacitor . Avec plus de 23,5 millions de mises à jour délivrées dans 750 applications de production [1], Capgo permet aux développeurs de pousser des mises à jour pour les dépendances et les code instantanément - aucune revue de l'App Store n'est requise. Les mises à jour sont sécurisées par cryptage de bout en bout et répondent aux normes de conformité Apple et Android.

Caractéristiques de mise à jour Capgo

Capgo simplifie la gestion des dépendances de plugins avec ces caractéristiques :

Source : [1]

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

Configurer 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. Configurez 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. Ajoutez 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 à 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 rôle-back automatique et la traçabilité des erreurs aident à résoudre rapidement les problèmes, ce qui permet de maintenir vos mises à jour de plugins en cours de manière fluide.

Conclusion

Révision du processus

La gestion des 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 :

En utilisant des outils d'actualisation en temps réel comme Capgo , vous pouvez simplifier et améliorer ces pratiques en activant des mises à jour en temps réel.

Capgo : avantages

Capgo simplifie le processus de gestion des dépendances tout en offrant une performance solide. Il atteint un impressionnant taux 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. Ici est 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:

Continuez à partir de Comment ajouter des dépendances dans les Capacitor Plugins

Si vous utilisez Comment ajouter des dépendances dans les Capacitor Plugins pour planifier le travail de plugin natif, connectez-le à Capgo Répertoire de plugins pour le flux de travail du produit dans Capgo Répertoire de plugins, Capacitor Plugins par Capgo pour le détail d'implémentation dans Capacitor Plugins par Capgo, Ajouter ou Mettre à jour les plugins pour le détail d'implémentation dans Ajouter ou Mettre à jour les plugins, Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans Alternatives de plugins d'entreprise Ionic, et Capgo Bâtiments natifs pour le flux de travail du produit dans Capgo Bâtiments natifs.