Lompat ke konten utama

Mengatur CI/CD untuk Aplikasi Capacitor

Pelajari cara mempercepat rilis aplikasi Anda untuk iOS dan Android menggunakan alur CI/CD, meningkatkan efisiensi dan mengurangi kesalahan.

Martin Donadieu

Martin Donadieu

Pengembang Konten

Mengatur CI/CD untuk Aplikasi Capacitor

Mau rilis aplikasi iOS dan Android yang lebih cepat dan bebas kesalahan? Alur CI/CD untuk Capacitor mengautomasi pembangunan, pengujian, dan pengiriman, mengurangi waktu rilis hingga 70% dan kesalahan 60%. Panduan ini mencakup segala yang Anda butuhkan, dari mengatur lingkungan hingga mengautomasi pembaruan hidup dengan Capgo.

Poin Utama:

  • Mengapa CI/CD penting untuk Capacitor aplikasi: Meningkatkan kecepatan build dengan 78% dan mengurangi penolakan toko oleh 60%.
  • Alat-alat penting: Xcode, Android Studio, CocoaPods, dan lain-lain.
  • Pengaturan Pipa:Mengautomasi tugas seperti npx cap syncPengaturan Kependekan:
  • Live updates with CapgoPengaturan Kependekan:

Pengaturan Kependekan:

  1. Pengaturan Kependekan: Pengaturan Kependekan:
  2. Pengaturan Kependekan: Pengaturan Kependekan: capacitor.config.ts Pengaturan Kependekan:
  3. Pengaturan Kependekan: Pengaturan Kependekan:
  4. Pengaturan Kependekan: : Gunakan caching, pembangunan paralel, dan alur kerja kondisional.
  5. Tambahkan pembaruan waktu nyata: Integrasi Capgo untuk pembaruan OTA yang aman dengan peluncuran fase.

Dengan CI/CD, aplikasi Capacitor mencapai rilis yang lebih cepat, lebih halus, sambil mengurangi kesalahan dan intervensi manual. Siap untuk mengoptimalisasi alur kerja Anda? Mari kita mulai!

Integrasi Pipa CI/CD Anda yang Sedia Ada dengan Kemampuan Mobile

Mengatur Lingkungan CI/CD Anda

Setelah Anda memiliki dasar-dasar CI/CD, langkah selanjutnya adalah mengatur lingkungan. Ini adalah tulang punggung otomatisasi yang dapat diandalkan.

Pengaturan Alat dan Perangkat Lunak

Pastikan Anda memiliki alat-alat kunci ini terinstal:

Untuk Pengembangan iOS:

  • Xcode 14 atau yang lebih baru
  • Xcode Command Line Tools
  • CocoaPods untuk mengelola dependensi

Untuk Pengembangan Android:

  • Android Studio
  • Android SDK 33 atau di atasnya
  • Java Development Kit (JDK)

Untuk memastikan Xcode Command Line Tools Anda telah terinstal, gunakan:

xcode-select -p

Membuat sebuah Capacitor Project

Capacitor Dokumentasi Framework Website

Project Anda Capacitor harus dikonfigurasi dengan benar untuk alur kerja CI/CD. capacitor.config.ts File ini berada di pusat pengaturan ini:

const config: CapacitorConfig = {
  appId: 'com.example.app',
  webDir: 'build',
  ios: { 
    scheme: 'MyApp'
  }
}

File ini memastikan proyek Anda sesuai dengan persyaratan CI/CD.

Pengaturan Variabel Lingkungan

Menangani kredensial dengan aman adalah bagian penting dari menghubungkan pengaturan lingkungan dengan alur kerja CI/CD.

Variabel Utama untuk Didefinisikan:

  • BUILD_ENV: Menentukan tahap pengembangan (misalnya, production)
  • IOS_SIGNING_IDENTITY: Sertifikat code Anda untuk tanda tangan
  • ANDROID_KEYSTORE_PATH: Jalur ke keystore Android Anda

Untuk pembangunan Android, generate secara dinamis file local.properties selama proses CI:

echo "sdk.dir=$ANDROID_SDK_ROOT" > android/local.properties

Ketika bekerja dengan pembangunan iOS, pastikan platform CI Anda mendukung agent macOS.

To check if lingkunganmu sudah siap:

node --version | grep "v16" && xcodebuild -version | grep "Xcode 14" || exit 1

Mengelola kunci dan kredit dengan tepat dapat mengurangi kemungkinan penolakan aplikasi di toko aplikasi, seperti yang disebutkan dalam statistik sebelumnya [1].

Membuat Pipa CI/CD

Setelah lingkunganmu sudah siap, langkah berikutnya adalah mengatur pipa CI/CD untuk aplikasi CapacitorPipeline ini harus mengelola baik aset web maupun bangunan platform native dengan efisien

Pemasangan dan Perbaruan Dependensi

Dalam lingkungan CI/CD, mengelola dependensi memerlukan kontrol versi yang ketat. Mulai dengan proses instalasi yang bersih:

npm install --ignore-scripts
npm install @capacitor/cli

Menggunakan caching dependensi dapat mempercepat proses build. Misalnya, Pengguna Azure DevOps telah melihat waktu build mereka meningkat 40-60% dengan setup ini: Pengaturan Build iOS dan Android

- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    path: |
      node_modules
      android/.gradle
      ios/Pods

Pengguna Azure DevOps telah melihat waktu build mereka meningkat 40-60% dengan setup ini:

Berikut cara mengonfigurasi build untuk kedua platform:

Konfigurasi Build iOS:

steps:
  - task: InstallAppleCertificate@2
    inputs:
      certSecureFile: 'certificate.p12'
      certPwd: $(P12_PASSWORD)
  - script: |
      xcodebuild -workspace ios/App/App.xcworkspace -scheme App -configuration Release -archivePath ios/App/App.xcarchive archive

Konfigurasi Build Android:

cd android
./gradlew bundleRelease

Langkah-Langkah Pengujian dan Pengembangan

Lakukan pengujian platform secara paralel menggunakan strategi matrix:

test:
  steps:
    - run: npm run test:unit
    - run: npm run test:e2e
    - name: Run Platform Tests
      matrix:
        platform: [ios, android]
      run: npm run test:${{ matrix.platform }}

Untuk pengembangan, atur penanganan artefak platform khusus:

PlatformJenis ArtefakSaluran Distribusi
iOS.ipaApp Store Connect
Android.aabPenggunaan Google Play Console

Menggunakan pembangunan parallel dapat mengurangi waktu eksekusi pipeline secara signifikan ketika dikonfigurasi dengan benar.

Saat Anda telah memvalidasi dan memaketkan build Anda, Anda siap untuk melanjutkan ke update hidup dengan Capgo (dibahas di bagian berikutnya).

sbb-itb-f9944d2

Menambahkan Capgo Untuk Update Hidup

Antarmuka Dashboard Update Hidup Capgo

Integrasi Capgo ke dalam alur kerja Anda meningkatkan proses CI/CD Anda dengan memungkinkan update setelah rilis. Berikut cara mengaturnya:

Konfigurasi Pipeline Capgo

Pertama, instal Capgo CLI dalam lingkungan pipeline Anda:

steps:
  - name: Install Capgo CLI
    run: npm install -g @capgo/cli
  - name: Configure Authentication
    env:
      CAPGO_KEY: ${{ secrets.CAPGO_API_KEY }}

Penambahan ini memperluas siklus CI/CD Anda dengan mengintegrasikan manajemen pembaruan ke dalam proses pembangunan dan pengiriman otomatis Anda. Selanjutnya, termasuk perintah unggah setelah langkah-langkah pembangunan Anda: Untuk

pembaruan yang aman

- name: Upload Update
  run: |
    capgo upload --api-key $CAPGO_KEY --bundle ./build/app-release.apk
    capgo deploy v${VERSION} --channel production

, atur pengaturan validasi seperti ini: __CAPGO_KEEP_0__ Ringkasan FiturFitur

{
  "verification": {
    "checksum": "strict",
    "certificatePinning": true,
    "updateTimeout": 500
  }
}

Capgo Features Overview

__CAPGO_KEEP_0__Deskripsi
Enkripsi Akhir ke AkhirSignifikan mengurangi kesalahan penginstalan.
Penginstalan Berdasarkan SaluranMengadaptasi pembaruan untuk lingkungan tertentu.
Pembaruan BerperingkatMengatur pembaruan agar didistribusikan secara bertahap.

Pedoman Pembaruan OTA

Perkuat proses pengujian Anda dengan mengikuti kunci ini setelah penginstalan:

Strategi Penginstalan Berperingkat

Gunakan roll-out yang berperingkat untuk mengontrol bagaimana pembaruan didistribusikan:

- name: Staged Rollout
  run: |
    capgo deploy v1.2.3 --group "beta-users" --rollout 10%
    capgo deploy v1.2.3 --rollout 50%

Pengawasan Pembaruan

Perhatikanlah beberapa indikator ini:

  • Tingkat Adopsi : Coba capai 40-60% dalam waktu 24 jam pertama.
  • Sesi Tanpa Kecelakaan : Pastikan di atas 99,5%.
  • Waktu Verifikasi : Pastikan di bawah 500ms.

Jika kecelakaan melebihi tingkat yang dapat diterima, otomatis lakukan rollback:

- name: Rollback Check
  run: |
    if [ $(capgo stats --version v1.2.3 --metric crashes) -gt 2 ]; then
      capgo rollback --channel production
    fi

Meningkatkan Kinerja Pipa

Mengfokuskan pada tiga area kunci ini dapat menyebabkan peningkatan yang signifikan pada pipa Anda:

Optimasi Kecepatan Pembangunan

Untuk perubahan web saja, menggunakan npx cap sync Waktu dapat diselamatkan dengan melompati pembangunan penuh asli, mengurangi waktu pembangunan sekitar 40%. Berikut cara Anda dapat menerapkan pembangunan kondisional:

- name: Build Strategy
  run: |
    [ "$WEB_ONLY" = true ] && npx cap sync || (./gradlew assembleRelease && xcodebuild ...)

Metode ini memastikan bahwa hanya komponen yang diperlukan yang dibangun kembali, mempercepat proses.

Pengaturan Kontrol Versi

Mengautomasi pengaturan kontrol versi dapat memudahkan alur kerja Anda. Gunakan skrip berikut untuk menetapkan versi dan nomor pembangunan secara dinamis:

- name: Set Version
  run: |
    VERSION=$(node -p "require('./package.json').version")
    BUILD_NUMBER=$GITHUB_RUN_NUMBER
    echo "APP_VERSION=${VERSION}" >> $GITHUB_ENV
    echo "BUILD_ID=${BUILD_NUMBER}" >> $GITHUB_ENV

Selain itu, pengaturan versi semantik yang diotomatisasi dapat ditetapkan dengan konfigurasi ini:

{
  "scripts": {
    "version": "standard-version",
    "build:prod": "npm version patch && ionic build --prod"
  }
}

Praktik-praktik ini memberikan kerangka yang kuat untuk mengikuti dan meningkatkan kinerja pipa melalui metrik seperti:

  • Waktu pembangunan per tahap
  • Effisiensi cache (rasio tembak/lewat)
  • Penggunaan sumber daya puncak

Pengaturan Lingkungan Multi

Manajemen lingkungan yang berbeda dapat disederhanakan dengan menggunakan konfigurasi spesifik lingkungan. Berikut contoh pengaturan:

LingkunganKonfigurasi File
Pengembangan.env.dev
Pengujian.env.staging
ProduksiGudang Keamanan

Anda dapat mengonfigurasi lingkungan secara dinamis dengan skrip ini:

- name: Configure Environment
  env:
    API_KEY: ${{ secrets.ENV_SPECIFIC_API_KEY }}
    BUNDLE_ID: ${{ parameters.bundleId }}
  run: |
    echo "ENVIRONMENT=${{ parameters.environment }}" >> $GITHUB_ENV
    echo "API_ENDPOINT=${{ parameters.apiUrl }}" >> $GITHUB_ENV

Menggabungkan konfigurasi ini dengan Capgo’s channel-based deployment memungkinkan pembaruan yang tepat dan spesifik lingkungan. Hal ini memastikan peluncuran yang lebih halus dan kontrol yang lebih baik atas perilaku aplikasi di lingkungan yang berbeda.

Ringkasan

Peran CI/CD dalam Pengembangan

Menggunakan alur CI/CD untuk aplikasi Capacitor secara signifikan meningkatkan efisiensi alur kerja. Menurut data industri, tim dapat mencapai 50-70% siklus rilis yang lebih cepat terima kasih pada pembangunan iOS dan Android yang bersamaan [3]. Mengotomasi tugas seperti instalasi dependensi dan sinkronisasi platform mengurangi kesalahan penginstalan dengan 40-60% [1][2].

For instance, teams leveraging Azure DevOps pipelines have automated processes such as sequential build steps and Xcode packaging. They also use parameterized environments for both development and production. This approach removes the need for manual Gradle and Xcode CLI operations, ensuring reliable artifact creation every time.

These improvements lay the groundwork for streamlined update management when paired with Capgo.

Capgo for Update Management

Capgo works seamlessly with CI/CD pipelines to deliver instant updates while staying compliant with app store policies. Updates are only deployed after passing automated testing gates built into the pipeline.

Dengan menggabungkan pembangunan otomatis dengan peluncuran fase, tim mencapai hasil yang impresif: 80% penutupan pengguna dalam 7 hari dan kemampuan rollback dalam kurang dari satu jam.

Strategi umum melibatkan peluncuran track pengembangan parallel. Pembangunan otomatis digunakan untuk pengujian internal, sementara peluncuran fase mengarahkan segment pengguna. Ini memastikan update yang cepat dan aman, didukung oleh uji otomatis yang ketat. [1].

FAQs

Bagaimana membuat aplikasi Capacitor?

Membangun aplikasi Capacitor melibatkan beberapa langkah yang sederhana:

  1. Sesuaikan lingkungan Anda: Pasang Node.js dan npm pada sistem Anda. Kemudian, gunakan Ionic CLI untuk memulai proyek baru dengan dukungan Capacitor:

    ionic start myApp tabs --capacitor
  2. Menambahkan dukungan platform: Tambahkan platform yang ingin Anda target, seperti iOS atau Android:

    npx cap add ios
    npx cap add android
  3. Sinkronkan web code Anda: Pastikan web code Anda sejalan dengan platform native dengan menjalankan:

    npx cap sync

Langkah sinkronisasi sangat penting untuk menjaga aplikasi konsisten di semua platform dan memastikan operasi lancar di pipeline CI/CD. Untuk informasi lebih lanjut tentang mengatur lingkungan Anda, lihat bagian Tools.

Teruskan dari Mengatur CI/CD untuk Aplikasi Capacitor

Jika Anda menggunakan Mengatur CI/CD untuk Aplikasi Capacitor untuk merencanakan otomatisasi CI/CD, hubungkan dengan Capgo CI/CD untuk alur kerja produk di Capgo CI/CD, Capgo Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ, Capgo Integrasi untuk alur kerja produk di Capgo Integrasi, Integrasi CI/CD untuk detail implementasi di Integrasi CI/CD, dan GitHub Integrasi Aksi untuk detail implementasi di GitHub Integrasi Aksi.

Update Hidup untuk Aplikasi Capacitor

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

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk membuat aplikasi mobile yang benar-benar profesional.