Lompat ke konten utama

Cara Mengatur Skrip Pembangunan dengan Capacitor CLI

Pelajari cara mengatur skrip pembangunan Anda menggunakan Capacitor CLI untuk pengiriman yang efisien dan pembaruan aplikasi yang disesuaikan di berbagai platform.

Martin Donadieu

Martin Donadieu

Spesialis Konten

Cara Mengatur Skrip Pembangunan dengan Capacitor CLI

Capacitor CLI memungkinkan Anda untuk mengatur proses pembangunan aplikasi Anda untuk platform iOS, Android, dan web. Dengan mengatur skrip pembangunan, Anda dapat:

  • Meningkatkan kecepatan: Mengirimkan perubahan secara instan tanpa adanya penundaan dari toko aplikasi.
  • Mengontrol pengiriman: Membalikkan pembaruan atau menargetkan kelompok pengguna tertentu.
  • Mengamankan aplikasi AndaGunakan enkripsi untuk melindungi pembaruan.
  • Optimalkan pembangunan: Atur pengaturan untuk kebutuhan spesifik platform.

Ringkasan Cepat Fitur Utama:

  • File Konfigurasi: Gunakan capacitor.config.json dan package.json untuk mengelola pengaturan pembangunan.
  • Skrip Kustom: Tambahkan tugas pra-pembangunan dan pasca-pembangunan untuk otomatisasi.
  • Hook Pembangunan: Jalankan code pada tahap spesifik proses pembangunan.
  • Variabel Lingkungan: Sederhanakan pembangunan spesifik lingkungan dengan .env file.

Capgo, alat pengaturan pengembangan, memperbaiki proses ini dengan perbaruan otomatis, pengawasan versi, dan optimasi kinerja global. Baca terus untuk mengetahui cara mengatur skrip pembangunan Anda untuk efisiensi maksimum.

Mengenalkan Capacitor Konfigurasi

Capacitor Dokumentasi Framework Website

Proses Pembangunan Default di Capacitor

Mengerti bagaimana Capacitor mengelola proses pembangunan defaultnya sangat penting jika Anda ingin mengustomisasi dengan efektif. Di bawah ini, kita akan memecah proses pembangunan Capacitor CLI dan file konfigurasi utamanya.

Langkah Pembangunan Standar

Capacitor menggunakan proses langkah demi langkah untuk mengubah aplikasi web Anda menjadi build-platform khusus. Berikut ini adalah apa yang terjadi selama proses pembangunan default:

FaseDeskripsiHasil
Build WebMengompilasi aset web menggunakan alat-alat framework AndaBundle web yang dioptimalkan
Salin AsetMenggerakkan aset web ke folder platform nativeDirektori asset spesifik platform
Build NativMenggunakan perintah build spesifik platformBinari siap digunakan
VerifikasiMengecek integritas dan dependensi buildStatus dan peringatan build

File Konfigurasi Utama

Two key configuration files shape how Capacitor handles your builds:

capacitor.config.json
This is the core configuration file for your Capacitor project. It sets important parameters for your builds:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appId: Identifikasi unik untuk aplikasi Anda.
  • appName: Nama aplikasi Anda.
  • webDir: Menentukan di mana Capacitor harus mencari aset web (misalnya, dist).
  • plugins: Memungkinkan Anda untuk mengonfigurasi pengaturan plugin khusus, seperti opsi SplashScreen.

package.json
File ini mencakup skrip pembangunan dan dependensi yang mempengaruhi proses pembangunan:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • Pengaturan webDir pengaturan dalam capacitor.config.json menunjukkan kepada Capacitor di mana lokasi aset web yang dikompilasi Anda untuk dimasukkan dalam pembangunan native.
  • Setelah membuat perubahan pada capacitor.config.json, Anda perlu menjalankan cap sync untuk memastikan proyek native Anda diperbarui.

Selanjutnya, kita akan menjelajahi bagaimana Anda dapat mengubah pengaturan ini untuk mengcustomisasi pembangunan Anda lebih lanjut.

Mengubah Skrip Pembangunan

Anda dapat menyesuaikan proses pembangunan Capacitor default untuk memenuhi kebutuhan proyek Anda. Berikut cara melakukannya:

Pengaturan File Konfigurasi

Anda dapat menyesuaikan proses pembangunan dengan mengedit file capacitor.config.json Pengaturan file di bawah ini adalah contoh konfigurasi:

{
  "appId": "com.example.app",
  "webDir": "www",
  "server": {
    "hostname": "localhost",
    "androidScheme": "https",
    "iosScheme": "https",
    "allowNavigation": ["*.example.com"]
  },
  "android": {
    "buildOptions": {
      "keystorePath": "release.keystore",
      "keystorePassword": "mypassword",
      "keystoreAlias": "release",
      "keystoreAliasPassword": "mypassword"
    }
  },
  "ios": {
    "scheme": "App",
    "automaticProvisioning": true
  }
}

Berikut beberapa pengaturan kunci yang dapat Anda modifikasi:

  • webDir: Menentukan lokasi aset web yang telah dikompilasi.
  • server: Mengatur server pengembangan, termasuk hostname dan izin navigasi.
  • android/ios: Mengizinkan pengaturan spesifik platform, seperti detail keamanan Android atau pilihan pengaturan iOS.

Membuat Skrip NPM

Untuk mempercepat alur kerja, tambahkan skrip NPM kustom ke file package.json Berikut adalah contoh:

{
  "scripts": {
    "prebuild": "node ./scripts/prepare-env.js",
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "build:ios": "cap build ios --release",
    "build:android": "cap build android --release",
    "postbuild": "node ./scripts/notify-completion.js"
  }
}
  • prebuild dan postbuildPakai untuk tugas seperti mengatur lingkungan atau mengirim notifikasi ketika proses build selesai.
  • build:platformPerintah khusus platform untuk membangun aplikasi Android atau iOS.

Anda dapat mengambil otomatisasi lebih lanjut dengan menambahkan hook pembangunan.

Pengaturan Hook

Untuk kontrol yang lebih lanjut, gunakan hook pembangunan untuk menjalankan code kustom pada titik-titik tertentu selama proses pembangunan. Berikut adalah contoh pengaturan di capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  plugins: {
    CapacitorHooks: {
      beforeBuild: async () => {
        console.log('Running pre-build tasks...');
        // Add your pre-build tasks here
      },
      afterBuild: async () => {
        console.log('Running post-build tasks...');
        // Add your post-build tasks here
      }
    }
  }
};

export default config;

Dengan hook pembangunan, Anda dapat:

  • Periksa persyaratan sebelum proses pembangunan dimulai
  • Mengubah aset selama proses
  • Mengaktifkan notifikasi pada titik-titik kritis
  • Mengupdate nomor versi secara otomatis
  • Lakukan tes otomatis dengan lancar

Menggunakan pendekatan ini memberikan Anda fleksibilitas dan kontrol yang lebih besar atas seluruh siklus pembangunan.

Pengembangan Lanjutan dengan Opsi yang Lebih Luas

Ketika bekerja pada proyek yang lebih besar, mengoptimalkan proses pembangunan dapat membuat perbedaan besar. Berikut cara mengatasi pembangunan yang spesifik lingkungan dan personalisasi platform dengan efektif.

Variabel Lingkungan

Atur variabel lingkungan dengan membuat variabel terpisah .env berkas untuk setiap lingkungan:

  • .env.development
  • .env.staging
  • .env.production

Lalu, atur skrip pembangunan Anda untuk memuat file yang sesuai berdasarkan lingkungan:

import { defineConfig } from '@capacitor/cli';

export default defineConfig({
  ios: {
    buildConfig: {
      environment: process.env.BUILD_ENV || 'development',
      configurations: {
        development: {
          signing: {
            debug: true,
            automaticProvisioning: true
          }
        },
        production: {
          signing: {
            release: true,
            provisioningProfile: 'dist/profile.mobileprovision'
          }
        }
      }
    }
  }
});

Anda dapat menyesuaikan pengaturan ini lebih lanjut untuk memenuhi kebutuhan spesifik platform.

Builds yang Spesifik Platform

Untuk mengatur konfigurasi build untuk Android dan iOS, gunakan struktur berikut:

const platformConfig = {
  android: {
    buildType: process.env.BUILD_TYPE || 'debug',
    keystoreConfig: {
      path: process.env.KEYSTORE_PATH,
      password: process.env.KEYSTORE_PASSWORD,
      alias: process.env.KEYSTORE_ALIAS
    }
  },
  ios: {
    scheme: process.env.APP_SCHEME || 'App',
    xcodePreferences: {
      automaticSigning: false,
      developmentTeam: process.env.DEVELOPMENT_TEAM
    }
  }
};

Konfigurasi-konfigurasi ini memungkinkan Anda untuk menyesuaikan pembangunan untuk setiap platform, sehingga proses peluncuran menjadi lebih lancar.

FiturAndroidiOS
Simbol-Simbol DebugProGuard file mappingfile dSYM
Variasi Pembangunandebug, rilis, stagingdebug, rilis
Code SigningManajemen KeystoreProfil Pengaturan
Pengelolaan AssetOptimasi res/drawableKatalog Asset

Tips tambahan untuk mengoptimalkan build Anda termasuk:

  • Menggunakan pembaruan parsial untuk menghemat waktu selama proses deployment
  • Mengatur pengawasan kesalahan untuk menemukan masalah dengan cepat
  • Membuat sistem saluran untuk versi beta
  • Mengaktifkan enkripsi akhir ke akhir untuk distribusi yang lebih aman

Ketika digabungkan dengan Capgo untuk analisis dan pembaruan yang aman, teknik-teknik ini memberikan Anda lebih banyak kontrol atas proses deployment [1].

Masalah Skrip Build & Solusi

Ketika bekerja dengan konfigurasi build kustom, menangani kesalahan dengan cepat sangat penting untuk menjaga proses build berjalan lancar

Memperbaiki Kesalahan Umum

Banyak masalah skrip pembangunan berasal dari pengaturan lingkungan atau masalah dependensi. Berikut cara menangani beberapa masalah yang umum:

__CAPGO_KEEP_0__

Jika Anda mengalami kesalahan seperti ini:

error: Cannot find environment configuration for BUILD_ENV

Anda dapat memperbaikinya dengan membuat sebuah .env.local file di direktori root proyek Anda. Berikut contoh:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Kegagalan Pembangunan Berdasarkan Platform

Untuk kesalahan tanda tangan Android, gunakan perintah ini:

npx cap build android --keystorePassword=$KEYSTORE_PASSWORD --keystoreAlias=$KEYSTORE_ALIAS

Untuk masalah profil pengaturan iOS, coba ini:

npx cap build ios --configuration=release --type=development
Tipe KesalahanPenyebab UmumSolusi
Konfigurasi Tanda TanganRincian keystore hilangSetel KEYSTORE_PATH dan kreditensi
Lingkungan PembangunanVariabel-variabel tidak terdefinisiBuat file spesifik platform .env File-file yang dipergunakan
KetergantunganPerbedaan versiUpdate package.json dan sinkron

Setelah menerapkan perbaikan, pastikan perubahan Anda solid dengan menjalankan tes pembangunan yang menyeluruh.

Test Skrip Pembangunan

Setelah kesalahan-kesalahan diselesaikan, validasi skrip pembangunan Anda dengan langkah-langkah ini:

  • Pengujian Otomatis: Jalankan perintah kunci untuk memastikan proses pembangunan berjalan seperti yang diharapkan.
npm run build
npx cap sync
npx cap copy
  • Validasi Lingkungan: Periksa variabel lingkungan yang hilang sebelum memulai pembangunan.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Pengujian Skrip Pembangunan: Tambahkan skrip rinci untuk menangkap potensi masalah selama pembangunan.
{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

Tips tambahan untuk pengujian:

  • Gunakan kontainer Docker untuk mengisolasi pembangunan. Docker
  • Validasi file konfigurasi sebelum memulai proses.
  • Test dengan beberapa versi Node.js versi.
  • Konfirmasikan persyaratan spesifik platform telah terpenuhi.
  • Perhatikan kinerja pembangunan untuk kemungkinan perbaikan.

Capgo Fitur Pembangunan

Capgo Dashboard Antarmuka Perbarui Hidup

Capgo membawa skrip pembangunan ke tingkat berikutnya dengan pengaturan otomatis, meningkatkan efisiensi dan menyederhanakan proses.

Perbarui Aplikasi Cepat

Capgo’s kinerja perbarui sangat impresif:

  • 95% dari pengguna aktif menerima update dalam waktu 24 jam.
  • 82% tingkat kesuksesan Untuk pengiriman update secara global.
  • Waktu respons rata-rata API 434ms secara global.

Platform ini menggunakan pembaruan parsial, yang berarti hanya perubahan yang diunduh. Pendekatan ini mengurangi penggunaan bandwidth dan mempercepat proses pembaruan. Selain itu, proses pembangunan seluruhnya sepenuhnya otomatis, sehingga menghemat waktu dan upaya.

Automasi Pembangunan

Capgo bekerja dengan lancar di berbagai platform CI/CD besar, menawarkan berbagai pilihan integrasi:

Platform Integrasi Pembangunan dan Pengeluaran (CI/CD)Fitur IntegrasiManfaat
Aksi GitHubPembangunan otomatis, Pengaktifan peluncuranPengembangan terus-menerus
Pengaturan GitLab CIAutomasi aliran, Pengendalian versiAlur kerja yang terstruktur
JenkinsAlur kerja khusus, Pengait pembangunanDapat diukur untuk perusahaan besar

Biasanya biaya untuk mengatur pembangunan otomatis adalah sekitar 300 per bulan, yang jauh lebih hemat biaya dibandingkan dengan solusi tradisional yang dapat mencapai hingga Rp 6.000 per tahun.

Standar Keamanan

Capgo memprioritaskan keamanan dengan kerangka kerja yang kuat yang mencakup:

  • Enkripsi akhir ke akhir untuk paket update.
  • Pengelolaan kunci yang aman.
  • Kemampuan pengendalian versi yang sesuai dengan pedoman Apple dan Google.

Fitur Pengendalian Versi

  • Opsi rollback instan.
  • Pengikatan versi untuk pelacakan peluncuran.
  • Manajemen saluran update untuk rilis yang dipersiapkan.

Kerangka keamanan ini telah diuji secara ketat di atas ratusan aplikasi perusahaan. Untuk tim yang membutuhkan keamanan tambahan, Capgo juga menawarkan solusi self-hosted dengan konfigurasi yang dapat disesuaikan.

Capgo’s sistem saluran membuat distribusi update fleksibel. Pengembang dapat menargetkan kelompok pengguna tertentu dengan versi yang berbeda, sempurna untuk tes beta atau peluncuran secara bertahap.

Ringkasan

Ringkasan Proses Pembangunan

Skrip pembangunan kustom memungkinkan pengaturan otomatis dan konsisten untuk pengiriman dengan mengandalkan hook pembangunan, variabel lingkungan, dan perintah spesifik platform. Proses-proses ini menciptakan dasar yang kuat untuk perbaikan pengiriman yang mungkin dilakukan dengan Capgo.

Kelebihan Capgo

Capgo memudahkan pengiriman, telah berhasil mengirimkan lebih dari 23,5 juta pembaruan di atas 750 aplikasi produksi [1]. Sistem pembaruan parsialnya mengurangi penggunaan bandwidth dan waktu pengiriman.

Platform ini menyediakan pembaruan cepat, optimasi kinerja global, enkripsi akhir-ke-akhir untuk keamanan, dan sistem distribusi berbasis saluran yang fleksibel. Konfigurasi ini mendukung pembaruan yang sasaran, pengujian beta, dan konsistensi dengan pedoman aplikasi toko sambil menjaga kerangka keamanan yang kuat.

Perbarui Hidup untuk Capacitor aplikasi

Ketika bug layer web hidup, kirimkan perbaikan melalui Capgo bukan menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan perbarui 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 membuat aplikasi mobile yang profesional secara benar.