Lompat ke konten utama

Cara Menambahkan Dependensi di Plugin Capacitor

Belajar untuk mengalirkan manajemen dependensi di plugin Capacitor di berbagai platform dengan langkah-langkah praktis dan praktik terbaik.

Martin Donadieu

Martin Donadieu

Pengembang Konten

Bagaimana Menambahkan Dependensi di Plugin Capacitor

Menambahkan dependensi ke Capacitor plugin dapat terasa menghawatirkan, tetapi lebih mudah ketika dibagi menjadi langkah-langkah yang jelas. Berikut ini yang perlu Anda ketahui:

  1. Pahami alat-alat:

  2. Node.js:

  3. Mulai Proyek Baru Anda projek plugin Capacitor:

    • Gunakan npm init @capacitor/plugin Membuat plugin baru.
  4. Tambahkan dependensi JavaScript:

    • Gunakan npm install untuk dependensi produksi dan pengembangan.
    • Perbarui package.json termasuk dependensi peer seperti @capacitor/core.
  5. Atasi dependensi spesifik platform:

    • iOS: Konfigurasi CocoaPods atau SPM dengan library seperti Alamofire atau SwiftyJSON.
    • Android: Gunakan Gradle untuk menambahkan dependensi seperti Gson atau AppCompat.
  6. Optimalkan kinerja:

    • Pin versi, audit dependensi, dan selesaikan konflik untuk memastikan stabilitas.
  7. Gunakan alat seperti Capgo update secara langsung:

    • Segera push perubahan tanpa ulasan toko aplikasi.

Perbandingan Cepat dari Alat:

PlatformAlatKetergantungan Contoh
JavaScriptnpmnpm install lodash --save
iOSCocoaPods/SPMpod 'Alamofire', '~> 5.6.4'
AndroidGradleimplementation 'com.google.code.gson:gson:2.10.1'

Mengapa ini penting: Mengelola dependensi dengan efektif memastikan plugin Anda berjalan lancar di berbagai platform, menghemat waktu, dan menghindari kesalahan. Mari kita telusuri lebih dalam ke langkah-langkahnya.

Cara membuat sebuah Capacitor plugin untuk iOS/Android

Capacitor Dokumentasi Framework Website

Mengatur Lingkungan Pengembangan Anda

Siapkan pengaturan Anda dengan alat-alat yang diperlukan untuk mengelola Capacitor plugin dependensi dengan efektif.

Alat-Alat Pengembangan yang Diperlukan

Berikut adalah daftar alat yang Anda butuhkan:

AlatVersiTujuan
Node.js16.0.0+Lingkungan runtime JavaScript
npm8.0.0+Pengelolaan Paket
Xcode14.0+Pengembangan iOS (hanya untuk Mac)
Android StudioElectric Eel+Pengembangan Android
CocoaPods1.11.0+Manajemen Dependensi iOS
JDK11+Alat Bina Android

Membuat Plugin Baru

Gunakan Capacitor CLI untuk memulai proyek plugin Anda. Ini termasuk mengatur platform dan memberi nama plugin menggunakan format domain terbalik (misalnya, com.mycompany.plugin):

  1. Jalankan perintah berikut:
    npm init @capacitor/plugin
  2. Pilih platform target (iOS/Android).
  3. Tetapkan nama plugin dalam format domain terbalik.

Langkah-Langkah Pengaturan Proyek

  1. Perbarui package.json

    Ubah pengaturan Anda untuk mencakup hal berikut: package.json __CAPGO_KEEP_0__

    {
      "capacitor": {
        "ios": {
          "src": "ios"
        },
        "android": {
          "src": "android"
        }
      },
      "peerDependencies": {
        "@capacitor/core": "^5.0.0"
      }
    }
  2. Pengaturan Platform-Spesifik

    • Untuk iOS, pastikan Podfile Anda mencakup:

      platform :ios, '13.0'
      use_frameworks!
    • Untuk Android, pastikan Anda memeriksa bahwa build.gradle mengandung:

      android {
          compileSdkVersion 33
          defaultConfig {
              minSdkVersion 22
          }
      }
  3. Atur Variabel Lingkungan

    Konfigurasi variabel lingkungan berikut untuk alat pengembangan Anda:

    VariabelTujuanContoh Nilai
    ANDROID_HOMELokasi Android SDK/Users/username/Library/Android/sdk
    JAVA_HOMERute instalasi JDK/Library/Java/JavaVirtualMachines/jdk-11.0.12.jdk/Contents/Home
    XCODE_SELECTAlat perintah garis perintah Xcode/Applications/Xcode.app/Contents/Developer

Setelah proyek Anda terkonfigurasi, Anda siap untuk melanjutkan ke pengelolaan dependensi JavaScript.

Dependensi JavaScript

Pengelolaan dependensi JavaScript yang efektif merupakan kunci untuk menjaga kinerja plugin yang stabil.

npm Pemasangan Paket

npm

Untuk memasang dependensi, gunakan perintah-perintah berikut:

# Add a production dependency
npm install lodash --save

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

Pastikan untuk secara manual mengikutsertakan dependensi peer di dalam package.json file. Uji semua dependensi untuk memastikan konsistensi di kedua platform web dan native.

Pengelolaan package.json

Berikut adalah contoh package.json konfigurasi:

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

Untuk menjaga konsistensi, pastikan versi dependensi yang tepat:

__CAPGO_KEEP_0__Jenis KeterbatasanContoh
Penggunaan”5.0.0”Sesuai
Untuk dependensi kritis yang memerlukan versi tertentu”^5.0.0”Caret
Mengizinkan pembaruan minor dan patch”~5.0.0”Tilde

Menghambat pembaruan hanya pada patch

Menggunakan Perpustakaan JavaScript

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

Pastikan penanganan kesalahan dan pengecekan jenis data yang tepat:

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

Selanjutnya, cari tahu cara mengatasi ketergantungan platform spesifik untuk iOS.

Ketergantungan iOS

Bagian ini menjelaskan cara mengelola ketergantungan native iOS di CapacitorSetelah Anda telah mengatur ketergantungan JavaScript, langkah berikutnya adalah mengatasi ketergantungan native iOS.

CocoaPods Setup

CocoaPods

Mulai dengan menginisialisasi CocoaPods di direktori iOS Anda:

cd ios
pod init

Kemudian, update Plugin.podspec dengan konfigurasi-konfigurasi berikut:

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

Konfigurasi Podfile

Setelah menginisialisasi CocoaPods, konfigurasi Podfile untuk termasuk Capacitor dan library ketiga pihak tambahan lainnya:

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

Berikut beberapa pola konfigurasi dependensi yang umum:

Tipe KeterbatasanContohPenggunaan
Versi Samapod 'KeychainAccess', '4.2.2'Ketika kontrol yang tepat diperlukan, seperti untuk komponen keamanan
Versi Minorpod 'Alamofire', '~> 5.6'Untuk API stabil yang mungkin menerima update patch
Versi Utamapod 'SwiftyJSON', '> 5.0'Ketika fleksibilitas di seluruh update diterima

Ketergantungan Paket Swift

Jika Anda lebih suka tidak menggunakan CocoaPods, Pengelola Paket Swift (SPM) adalah alternatif yang baik. Tambahkan ketergantungan SPM secara langsung di Xcode dengan konfigurasi berikut di file: Package.swift Untuk menggunakan ketergantungan SPM di plugin __CAPGO_KEEP_0__, impor dan integrasikan sesuai kebutuhan. Misalnya:

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

Ketergantungan Android

Tetapkan ketergantungan Android untuk memastikan integrasi native yang lancar. Berikut cara mengelola ketergantungan untuk plugin __CAPGO_KEEP_0__ Anda.

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

Ketergantungan Gradle Build Tool Interface

Tambahkan konfigurasi berikut ke file:

Untuk menggunakan ketergantungan SPM di plugin __CAPGO_KEEP_0__, impor dan integrasikan sesuai kebutuhan. Misalnya: build.gradle Dengan cara ini, Anda dapat memilih antara CocoaPods dan Pengelola Paket Swift berdasarkan kebutuhan proyek Anda.

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

Tentukan versi tambahan di blok: buildscript blok:

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

Setelah ketergantungan konfigurasi, pastikan untuk mengatur repositori yang diperlukan.

Konfigurasi Repositori

Pada tingkat proyek Anda, build.gradle, termasuk repositori Maven yang diperlukan:

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

Jika Anda menggunakan repositori Maven khusus atau privat, tambahkan kredential seperti ini:

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

Setelah repositori diatur, alihkan masalah ketergantungan yang mungkin timbul.

Mengatasi Masalah Kompabilitas

Untuk menangani konflik ketergantungan, terapkan resolusi versi di build.gradle:

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

Berikut adalah strategi untuk menyelesaikan masalah ketergantungan umum:

Tipe MasalahStrategiContoh
Konflik VersiTetapkan versi tertentuforce 'com.google.code.gson:gson:2.10.1'
Banyak VersiEksklusi Modulexclude group: 'org.json', module: 'json'
Masalah TransitifGunakan versi ketatstrictly 'androidx.core:core-ktx:1.10.1'

Misalnya, Anda dapat mengesklusi modul yang saling bersaing seperti ini:

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

Akhirnya, optimalkan proses pembangunan Anda dengan mengaktifkan caching dan eksekusi paralel di gradle.properties:

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

Capgo Capgo

Dashboard Antarmuka Perbarui Langsung Capgo

Menggunakan Capgo bersama dengan pengelolaan dependensi native dan JavaScript membuat perbarui plugin Anda lebih cepat dan lebih mudah.

Tentang Capgo

Capgo adalah platform perbarui langganan yang dirancang untuk plugin dan aplikasi Capacitor . Dengan lebih dari 23,5 juta perbarui yang disampaikan di 750 aplikasi produksi [1], Capgo memungkinkan pengembang untuk memperbarui dependensi dan code secara instan - tidak ada review toko aplikasi yang diperlukan. Perbarui yang aman dengan enkripsi akhir-ke-akhir dan memenuhi standar kelayakan Apple dan Android.

Fitur Perbarui Capgo

Capgo memudahkan mengelola dependensi plugin dengan fitur-fitur ini:

FiturApa yang DilakukanIndikator Utama
Perbarui LangsungSampaikan perbarui dalam menit95% tingkat pembaruan pengguna dalam 24 jam
Pembaruan SebagianUnduh hanya file yang berubah434ms waktu respons rata-rata API
Pengendalian VersiKelola beberapa versi82% tingkat kesuksesan global
Sistem SaluranTargetkan kelompok pengguna spesifikMendukung beberapa saluran pengiriman

Sumber: [1]

Capgo berjalan lancar dengan alat CI/CD seperti GitHub Actions, GitLab CI, dan Jenkins, mengautomatisasi pembaruan dependensi dan memastikan versi plugin konsisten. Alat-alat ini membuat lebih mudah untuk mengintegrasikan Capgo ke dalam alur kerja Anda.

Mengatur Capgo

Ikuti langkah-langkah ini untuk mengintegrasikan Capgo ke dalam proyek Anda:

  1. Instal Capgo CLI

    Jalankan perintah berikut di terminal Anda:

    npx @capgo/cli init
  2. Konfigurasi Preferensi Perbarui

    Gunakan dashboard Capgo untuk mengatur saluran dan preferensi pengiriman. Kedua konfigurasi yang di-host di awan dan self-hosted mendukung.

  3. Tambahkan Logika Perbarui

    Tambahkan code ini ke file plugin utama Anda untuk memungkinkan perbarui:

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

“Kami menerapkan pengembangan agile dan @Capgo sangat kritis dalam menyampaikan secara terus-menerus kepada pengguna kami!” - Rodrigo Mantica

Capgo juga menyediakan dashboard analitik untuk memahami secara real-time tingkat keberhasilan perbarui dan aktivitas pengguna. Fitur seperti rollback satu-klik dan pelacakan kesalahan membantu menyelesaikan masalah dengan cepat, sehingga perbarui plugin Anda berjalan lancar.

Kesimpulan

Ulasan Proses

Mengelola dependensi untuk Capacitor plugin melibatkan menyinkronkan komponen native (iOS dan Android) dengan lawan JavaScriptnya untuk memastikan integrasi yang lancar. Proses ini melibatkan pengaturan spesifik platform dan mengelola paket JavaScript untuk mencapai kinerja yang optimal. Mengikuti langkah-langkah yang telah ditetapkan akan membantu menjaga fungsi plugin yang stabil dan efisien.

Praktik Terbaik

Untuk mengelola dependensi dengan efektif, pertimbangkan prinsip-prinsip berikut:

PraktikManfaatCara Mengimplementasikan
Penguncian VersiMenghindari masalah yang tidak terdugaGunakan versi yang tetap dalam package.json
Pengisolasi PlatformMengurangi konflikMengisolasi dependensi native
Perbaruan TeraturMeningkatkan keamananTerapkan patch kritis dengan segera
Pengauditan DependensiMendeteksi RisikoJalankan npm audit seringkali

Menggunakan alat pembaruan langsung seperti Capgo dapat memudahkan dan meningkatkan praktek-praktek ini dengan memungkinkan pembaruan waktu nyata.

Keuntungan Capgo

Capgo mempercepat proses manajemen dependensi sambil memberikan kinerja yang kuat. Ia mencapai prestasi yang impresif 95% tingkat pembaruan pengguna dalam waktu 24 jam dan menjaga waktu respons global API 434ms [1]Dengan enkripsi akhir-ke-akhir, itu memastikan pembaruan yang aman yang sesuai dengan pedoman Apple dan Android. Untuk tim yang mengelola beberapa versi plugin, sistem saluran Capgo memungkinkan peluncuran sasaran untuk kelompok pengguna tertentu.

Berikut adalah penampilan cepat dari Capgo:

MetrikNilai
Waktu Respons Global API434ms
Rasio Kesuksesan Pembaruan82%
Tingkat Pembaruan Pengguna (24 Jam)95%
Pembaruan Langsung untuk Aplikasi Capacitor

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo daripada menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan pembaruan di latar belakang sementara perubahan native tetap dalam jalur ulasan normal.

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk menciptakan aplikasi mobile yang profesional.