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:

  • Percepatkan pembaruan: Push perubahan secara instan tanpa menunggu delay toko aplikasi.
  • Kontrol pengiriman: Roll back pembaruan atau targetkan kelompok pengguna tertentu.
  • Jaminan keamanan aplikasi: Gunakan enkripsi untuk melindungi pembaruan.
  • Optimalkan pembangunan: Tambahkan pengaturan untuk kebutuhan spesifik platform.

Ringkasan Cepat Fitur Utama:

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

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

Introducing Capacitor Konfigurasi

Capacitor Dokumentasi Situs Web Framework

Proses Pembangunan Default di Capacitor

Mengerti bagaimana Capacitor mengelola proses pembangunan defaultnya sangat penting jika Anda ingin mengcustominya 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 yang spesifik platform. Berikut ini adalah apa yang terjadi selama proses pembangunan default:

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

File Konfigurasi Utama

Dua file konfigurasi utama menentukan bagaimana Capacitor mengelola build Anda:

capacitor.config.json
Ini adalah file konfigurasi inti untuk proyek Capacitor Anda. Ini menetapkan parameter penting untuk build Anda:

{
  "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 termasuk skrip build dan dependensi yang mempengaruhi proses build:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • Pengaturan webDir dalam capacitor.config.json menginformasikan Capacitor tentang lokasi aset web yang telah dikompilasi untuk dimasukkan ke 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 cara Anda dapat mengubah pengaturan ini untuk mengcustomisasi pembangunan Anda lebih lanjut.

Pengaturan Skrip Pembangunan

Anda dapat menyesuaikan proses pembangunan Capacitor untuk lebih sesuai dengan kebutuhan proyek Anda. Berikut cara melakukannya:

Pengaturan File Konfigurasi

Anda dapat mengatur proses pembangunan dengan mengedit capacitor.config.json file. Berikut 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 adalah 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 build spesifik platform, seperti detail keystore untuk Android atau opsi provisi untuk iOS.

Membuat NPM Skrip

Untuk mempercepat alur kerja Anda, tambahkan skrip NPM kustom ke file Anda. Contoh berikut: package.json dan

{
  "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 : Gunakan untuk tugas seperti mengatur lingkungan atau mengirimkan pemberitahuan ketika build selesai. postbuild: Perintah spesifik platform untuk membuat aplikasi Android atau iOS.
  • build:platformAnda dapat meningkatkan otomatisasi dengan menambahkan hook build.

Setup Hook Build

Untuk kontrol yang lebih lanjut, gunakan hook build untuk menjalankan __CAPGO_KEEP_0__ kustom pada titik spesifik selama proses build. Contoh setup berikut:

For more advanced control, use build hooks to execute custom code at specific points during the build process. Here’s an example setup in 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;

: Mengatur skrip untuk menjalankan pada titik spesifik selama proses build.

  • Validasi persyaratan sebelum proses pembangunan dimulai
  • Transformasi aset selama proses
  • Tetapkan pemberitahuan pada titik-titik kunci
  • Perbarui nomor versi secara otomatis
  • Jalankan tes otomatis dengan lancar

Pendekatan ini memberikan fleksibilitas dan kontrol yang lebih besar atas seluruh siklus pembangunan.

Pengaturan Pembangunan Lanjutan

Ketika bekerja pada proyek yang lebih besar, mengoptimalkan proses pembangunan dapat membuat perbedaan besar. Berikut cara untuk mengelola pembangunan spesifik lingkungan dan pengaturan platform secara efektif.

Variabel Lingkungan

Tetapkan variabel lingkungan dengan membuat file yang terpisah untuk setiap lingkungan: .env Lalu, atur skrip pembangunan Anda untuk memuat file yang sesuai berdasarkan lingkungan:

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

This approach gives you greater flexibility and control over the entire build lifecycle.

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.

Pembangunan Platform-Spesifik

Untuk mengcustomisasi pembangunan 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 pengiriman menjadi lebih lancar.

FiturAndroidiOS
Simbol-Simbol DebugProGuard file mappingfile dSYM
Variasi Pembangunandebug, release, stagingdebug, release
Code SigningPengelolaan KeystoreManajemen Profil Pengaturan
Pengelolaan AsetOptimasi res/drawableKatalog Aset

Tips tambahan untuk mengoptimalkan build Anda termasuk:

  • Menggunakan pembaruan parsial untuk menghemat waktu selama proses pengiriman
  • Mengatur pengawasan kesalahan untuk mempercepat identifikasi masalah
  • Membuat sistem saluran untuk versi pengujian beta
  • Mengaktifkan enkripsi akhir-ke-akhir untuk distribusi yang aman

Ketika dipasangkan dengan alat seperti Capgo untuk analisis dan pembaruan yang aman, teknik-teknik ini memberi Anda lebih banyak kontrol atas proses pengembangan Anda [1].

Masalah Skrip Bangun dan Solusi

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

Memperbaiki Kesalahan Umum

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

Variabel Lingkungan yang Hilang

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 Bangun yang Spesifik untuk Platform

Untuk kesalahan tanda tangan Android, gunakan perintah ini:

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

Untuk masalah profil pengembangan iOS, coba ini:

npx cap build ios --configuration=release --type=development
Tipe ErrorPenyebab UmumSolusi
Konfigurasi Tanda TanganDetail keystore hilangAtur KEYSTORE_PATH dan kreditensi
Lingkungan PembangunanVariabel tidak terdefinisiBuat file spesifik platform .env file
DependenciesPerbedaan versiUpdate package.json dan sinkron

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

Tes Skrip Build

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

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

Tips tambahan untuk pengujian:

  • Menggunakan Docker kontainer untuk mengisolasi proses pembangunan.
  • Validasi file konfigurasi sebelum memulai proses.
  • Pengujian dengan menggunakan beberapa versi Node.js Pastikan persyaratan spesifik platform telah dipenuhi.
  • Perhatikan kinerja proses pembangunan untuk kemungkinan perbaikan.
  • __CAPGO_KEEP_0__

Capgo Membangun Fitur

Capgo Dashboard Pembaruan Hidup

Capgo membawa skrip pembangunan ke tingkat berikutnya dengan pengiriman otomatis, meningkatkan efisiensi dan memudahkan proses.

Pembaruan Aplikasi Cepat

Capgo’s kinerja pembaruan sangat impresif:

  • 95% pengguna aktif menerima pembaruan dalam waktu 24 jam.
  • 82% tingkat kesuksesan untuk pengiriman pembaruan di seluruh dunia.
  • Waktu respons API rata-rata 434ms secara global.

Platform ini menggunakan pembaruan parsial, artinya hanya perubahan yang diunduh. Pendekatan ini mengurangi penggunaan bandwidth dan mempercepat proses pembaruan. Selain itu, proses pembangunan secara keseluruhan sepenuhnya otomatis, menyelamatkan waktu dan upaya.

Automasi Pembangunan

Capgo secara lancar bekerja dengan platform CI/CD utama, menawarkan berbagai integrasi:

Platform CI/CDFitur IntegrasiManfaat
GitHub AksiPembangunan otomatis, Trigger DeployPengiriman terus-menerus
GitLab CIAutomasi aliran, Pengendalian versiAlur kerja yang terstruktur
JenkinsAlur kerja kustom, Hook pembangunanSkalabel untuk perusahaan besar

Mengatur pembangunan otomatis biasanya membutuhkan biaya sekitar $300 per bulan, yang jauh lebih hemat biaya dibandingkan dengan solusi tradisional yang dapat mencapai $6,000 setiap tahun.

Standar Keamanan

Capgo memprioritaskan keamanan dengan kerangka kerja yang kuat yang mencakup:

  • Enkripsi akhir-ke-akhir untuk paket update.
  • Pengelolaan kunci yang aman.
  • Komitmen dengan pedoman Apple dan Google.

Fitur Pengendalian Versi

  • [Instant rollback options.]
  • [Pengembalian Instan]
  • [Deployment version tracking.]

This security framework has been rigorously tested across hundreds of enterprise applications. For teams needing extra security, Capgo also offers self-hosted solutions with customizable configurations.

Capgo’s channel system makes update distribution flexible. Developers can target specific user groups with different versions, perfect for beta testing or gradual rollouts.

[Pengelolaan Saluran Pembaruan untuk Rilis yang Dipersiapkan]

[Ini kerangka keamanan 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.]

Custom build scripts allow for automated and consistent deployments by leveraging build hooks, environment variables, and platform-specific commands. These processes create a solid foundation for deployment improvements made possible with Capgo.

Capgo Benefits

Capgo simplifies deployment, having successfully delivered over 23.5 million updates across 750 production apps [1][Ringkasan Langkah Pembangunan]

[Skrip pembangunan yang dapat disesuaikan memungkinkan pengembangan otomatis dan konsisten dengan menggunkan hook pembangunan, variabel lingkungan, dan perintah spesifik platform. Proses-proses ini menciptakan dasar yang kuat untuk perbaikan pengembangan yang mungkin dilakukan dengan Capgo.]

Pembaruan Langsung untuk Aplikasi Capacitor

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo bukan menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan pembaruan 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 menciptakan aplikasi mobile yang profesional.