Comment ajouter des dépendances dans les plugins Capacitor

Ajouter des dépendances à Capacitor Les plugins peuvent sembler écrasants, mais il est plus facile de les gérer lorsqu'on les divise en étapes claires. Voici ce qu'il faut savoir.

1. Les dépendances ajoutées aux:

   • JavaScript: Use npm gérer les dépendances.
   •  : Utilisez: Use 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. Démarrer votre Capacitor projet de plugin:

   • 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. Optimisez les performances:

   • Fixer les versions, auditer les dépendances et résoudre les conflits pour garantir la stabilité.

7. Utilisez des outils comme Capgo Mises à jour en temps réel:

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

Comparaison Rapide des Outils:

Pourquoi cela compteGérer efficacement les dépendances garantit que votre plugin fonctionne sans heurts sur plusieurs plateformes, économise du temps et évite les erreurs. Découvrons les étapes en détail.

Comment créer un Capacitor plugin iOS/Android

Configuration de votre environnement de développement

Préparez votre environnement avec les outils nécessaires pour gérer plugin Capacitor outils de développement requis

Outils de développement requis

Voici la liste des outils dont vous aurez besoin :

Démarrer 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 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 en format de domaine inversé.

Étapes de configuration du projet

1. Mise à jour package.json

   Modifier votre package.json pour y inclure les éléments suivants :

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

2. Configuration par plateforme

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

     platform :ios, '13.0'
     use_frameworks!

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

     android {
         compileSdkVersion 33
         defaultConfig {
             minSdkVersion 22
         }
     }

3. Configurez les Variables d'Environnement

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

   But	Purpose	ANDROID_HOME
   Environnement	Emplacement Android SDK	/Users/username/Bibliothèque/Android/sdk
   JAVA_HOME	Chemin d'installation de 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 êtes prêt à passer à la gestion des dépendances JavaScript.

Dépendances JavaScript

Gérer efficacement les dépendances JavaScript est essentiel pour maintenir une performance stable des plugins.

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

Gestion de package.json

Voici un exemple package.json de 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

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

Gardez également un bon contrôle des erreurs et des types.

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 aux plateformes 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, passez à la gestion de vos dépendances natives iOS.

CocoaPods Configuration

Initialisez CocoaPods dans votre répertoire iOS.

cd ios
pod init

Mettez ensuite à jour Plugin.podspec Ensuite, mettez à jour votre

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

fichier avec les configurations suivantes :

Après l'initialisation de CocoaPods, configurez le fichier Podfile pour 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épendances 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 Swift Package Manager en fonction de vos besoins de 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 configurer les répertoires nécessaires.

Configuration du répertoire

Dans votre projet build.gradleIncluez les référentiels Maven requis :

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

Si vous utilisez des référentiels Maven personnalisés ou privés, ajoutez vos 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éférentiels 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 :

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

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

Optimisez ensuite votre processus de build en activant la mise en cache et l'exécution parallèle. gradle.properties:

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

Capgo Intégration

Utiliser Capgo en parallèl’avec la gestion de dépendances natives et JavaScript facilite et accélère la mise à jour de votre plugin.

À propos de Capgo

Capgo est une plateforme live update conçue pour les plugins et les applications Capacitor. Avec plus de 23,5 millions d'actualisations délivrées dans 750 applications de production [1], Capgo permet aux développeurs de pousser des mises à jour pour les dépendances et 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é d'Apple et d'Android.

Capgo Mise à jour

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

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.

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. Configurez les préférences d'actualisation

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

3. Ajoutez la logique d'actualisation

   Ajoutez ce code à votre fichier principal de plugin 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 continuellement à 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 retrait automatique et la traçabilité des erreurs aident à résoudre rapidement les problèmes, garantissant que vos mises à jour de plugin fonctionnent sans heurt.

Conclusion

Révision du processus

Gérer les dépendances pour les plugins Capacitor implique d'aligner les 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é stable et efficace de plugin.

Meilleures pratiques

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

Using live update tools like Capgo can further simplify and improve these practices by enabling real-time updates.

Capgo Benefits

Capgo simplifie le processus de gestion des dépendances tout en offrant une performance exceptionnelle. Il atteint un résultat impressionnant 95% user update rate within 24 hours et maintient une réponse globale de temps de API 434ms [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.

Voici un aperçu rapide des performances de Capgo.

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

Si vous utilisez __CAPGO_KEEP_0__ Comment ajouter des dépendances dans les Capacitor Plugins pour planifier le travail de plugin natif, le connecter avec Répertoire du Plugin Capgo pour le flux de travail du produit dans le répertoire du plugin Capgo Capacitor Plugins by Capgo Au sujet des détails d'implémentation dans les Capacitor Plugins par Capgo Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans l'ajout ou la mise à jour des plugins. Alternatives aux Plugins Entreprise Ionic pour le flux de travail du produit dans les alternatives Ionic Enterprise Plugin Capgo Builds Natives Au sujet du flux de travail produit dans Capgo Builds Natives.