Cara Kustomisasi Build Script dengan Capacitor CLI

Capacitor CLI memungkinkan Anda menyesuaikan proses build aplikasi untuk platform iOS, Android, dan web. Dengan mengubah build script, Anda bisa:

• Mempercepat update: Push perubahan secara instan tanpa delay App Store.
• Kontrol deployment: Roll back update atau targetkan grup user tertentu.
• Amankan aplikasi Anda: Gunakan enkripsi untuk melindungi update.
• Optimalkan build: Sesuaikan pengaturan untuk kebutuhan platform.

Ringkasan Fitur Utama:

• File Konfigurasi: Gunakan capacitor.config.json dan package.json untuk mengelola pengaturan build.
• Custom Script: Tambahkan tugas prebuild dan postbuild untuk otomatisasi.
• Build Hooks: Jalankan code pada tahap tertentu dalam proses build.
• Variabel Environment: Mempermudah build khusus environment dengan .env tersebut.

Capgo, sebuah tool deployment, mempercepat proses ini dengan update otomatis, pelacakan versi, dan optimasi performa global. Baca selengkapnya untuk mempelajari cara setup dan kustomisasi build script Anda agar lebih efisien.

Memperkenalkan Capacitor Konfigurasi

Proses Build Default di Capacitor

Memahami cara Capacitor menangani proses build default sangat penting jika Anda ingin melakukan kustomisasi secara efektif. Di bawah ini, kami akan membedah proses build Capacitor CLI beserta file konfigurasinya.

Langkah Build Standar

Capacitor menggunakan proses bertahap untuk mengubah web app Anda menjadi build spesifik platform. Berikut adalah apa yang terjadi selama proses build default:

File Konfigurasi Utama

Dua file konfigurasi utama menentukan cara Capacitor menangani build Anda:

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

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}

• appId: ID unik untuk aplikasi Anda.
• appName: Nama aplikasi Anda.
• webDir: Menentukan di mana Capacitor harus mencari aset web (misalnya, dist).
• plugins: Memungkinkan Anda mengatur konfigurasi spesifik plugin, seperti opsi SplashScreen.

package.json
File ini berisi build scripts dan dependencies yang memengaruhi proses build:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}

• Panduan webDir pengaturan di capacitor.config.json memberitahu Capacitor lokasi aset web yang sudah dikompilasi untuk dimasukkan ke dalam Native Build.
• Setelah melakukan perubahan pada capacitor.config.json, Anda perlu menjalankan cap sync untuk memastikan proyek native Anda diperbarui.

Selanjutnya, kita akan membahas cara mengubah pengaturan ini untuk menyesuaikan build Anda lebih lanjut.

Mengubah Build Script

Anda bisa menyesuaikan proses build default Capacitor agar lebih pas dengan kebutuhan proyek. Caranya:

Pengaturan File Konfigurasi

Anda dapat menyesuaikan proses build dengan mengedit capacitor.config.json file berikut. Berikut contoh konfigurasinya:

{
  "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 utama yang bisa Anda ubah:

• webDir: Menentukan lokasi aset web hasil kompilasi Anda.
• server: Mengatur development server, termasuk hostname dan izin navigasi.
• android/ios: Memungkinkan pengaturan build khusus platform, seperti detail keystore untuk Android atau opsi provisioning untuk iOS.

Membuat Script NPM

Untuk merampingkan workflow, tambahkan script kustom NPM ke package.json file. Berikut contohnya:

{
  "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 postbuild: Gunakan ini untuk tugas seperti setup environment atau mengirim notifikasi saat build selesai.
• build:platform: Perintah spesifik platform untuk build aplikasi Android atau iOS.

Anda bisa meningkatkan otomatisasi lebih jauh dengan menambahkan build hooks.

Setup Build Hooks

Untuk kontrol lebih lanjut, gunakan build hooks untuk menjalankan code kustom pada titik tertentu selama proses build. Berikut contoh konfigurasinya 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 build hooks, Anda bisa:

• Validasi persyaratan sebelum build dimulai
• Transformasi asset selama proses berlangsung
• Trigger notifikasi pada poin-poin penting
• Update nomor versi secara otomatis
• Jalankan automated tests dengan lancar

Pendekatan ini memberi Anda fleksibilitas dan kontrol lebih besar atas seluruh lifecycle build.

Kustomisasi Build Lanjutan

Saat mengerjakan proyek besar, optimasi proses build bisa berdampak besar. Berikut cara menangani build spesifik environment dan kustomisasi platform secara efektif.

Variabel Environment

Siapkan environment variables dengan membuat .env file terpisah untuk setiap environment:

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

Kemudian, konfigurasi build script Anda untuk memuat file yang sesuai berdasarkan environment:

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 agar sesuai dengan kebutuhan spesifik platform.

Build Khusus Platform

Untuk kustomisasi build 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 ini memungkinkan Anda menyesuaikan build untuk setiap platform, memastikan deployment yang lebih lancar.

Tips tambahan untuk optimasi build Anda:

• Gunakan partial updates untuk menghemat waktu deployment
• Siapkan error tracking untuk identifikasi masalah dengan cepat
• Buat sistem channel untuk versi beta testing
• Aktifkan end-to-end encryption untuk distribusi yang aman

Jika dipadukan dengan tools seperti Capgo untuk analitik dan update yang aman, teknik ini memberi Anda kontrol lebih pada proses deployment [1].

Masalah & Solusi Build Script

Saat bekerja dengan konfigurasi build kustom, menangani error dengan cepat sangat krusial agar proses build tetap berjalan lancar.

Perbaiki Error Umum

Banyak masalah build script berasal dari setup environment atau dependency. Berikut cara mengatasi beberapa yang umum:

Environment Variable Hilang

Jika Anda menemui error seperti ini:

error: Cannot find environment configuration for BUILD_ENV

Anda bisa memperbaikinya dengan membuat .env.local file di root directory proyek Anda. Berikut contohnya:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Build Gagal pada Platform Tertentu

Untuk error signing Android, gunakan command ini:

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

Untuk masalah provisioning profile iOS, coba ini:

npx cap build ios --configuration=release --type=development

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

Tes Build Script

Setelah error teratasi, validasi build script Anda dengan langkah-langkah berikut:

• Verifikasi Otomatis: Jalankan perintah utama untuk memastikan proses build berjalan sesuai ekspektasi.

npm run build
npx cap sync
npx cap copy

• Validasi Environment: Periksa apakah ada environment variable yang kurang sebelum memulai build.

const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});

• Debugging Build Script: Tambahkan script mendetail untuk mendeteksi potensi masalah selama build.

{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

Tips tambahan untuk testing:

• Gunakan Docker container untuk mengisolasi build.
• Validasi file konfigurasi sebelum memulai proses.
• Tes dengan berbagai Node.js versi.
• Pastikan persyaratan spesifik platform terpenuhi.
• Pantau performa build untuk potensi peningkatan.

Capgo Fitur Build

Capgo membawa build script ke level berikutnya dengan deployment otomatis, meningkatkan efisiensi dan menyederhanakan proses.

Update Aplikasi Cepat

Performa update Capgo mengesankan:

• 95% pengguna aktif menerima update dalam 24 jam.
• Tingkat keberhasilan 82% untuk pengiriman update di seluruh dunia.
• Rata-rata waktu respons API adalah 434ms secara global.

Platform ini memakai partial update, artinya hanya perubahan yang diunduh. Pendekatan ini mengurangi penggunaan bandwidth dan mempercepat proses update. Selain itu, seluruh proses build sepenuhnya otomatis, sehingga hemat waktu dan tenaga.

Otomatisasi Build

Capgo bekerja mulus dengan platform CI/CD utama, dengan beragam integrasi:

Setup build otomatis biasanya memakan biaya sekitar $300 per bulan, yang jauh lebih hemat biaya dibanding solusi tradisional yang bisa mencapai $6.000 per tahun.

Standar Keamanan

Capgo mengutamakan keamanan dengan framework tangguh yang mencakup:

• Enkripsi end-to-end untuk paket update.
• Manajemen key yang aman.
• Kepatuhan terhadap panduan Apple dan Google.

Fitur Version Control

• Opsi rollback instan.
• Pelacakan versi deployment.
• Manajemen update channel untuk rilis bertahap.

Framework keamanan ini telah diuji secara ketat di ratusan aplikasi enterprise. Untuk tim yang butuh keamanan ekstra, Capgo juga menawarkan solusi self-hosted dengan konfigurasi yang dapat disesuaikan.

Sistem channel Capgo membuat distribusi update jadi fleksibel. Developer bisa menargetkan grup user tertentu dengan versi berbeda, sangat cocok untuk beta testing atau rollout bertahap.

Ringkasan

Ringkasan Langkah Build

Script build kustom memungkinkan deployment otomatis dan konsisten dengan memanfaatkan build hooks, environment variables, dan command khusus platform. Proses ini membangun fondasi kuat untuk peningkatan deployment yang dimungkinkan oleh Capgo.

Manfaat Capgo

Capgo menyederhanakan deployment dan telah berhasil mengirimkan lebih dari 23,5 juta update di 750 aplikasi produksi [1]. Sistem partial update-nya mengurangi penggunaan bandwidth dan waktu deployment.

Platform ini menyediakan update cepat, optimasi performa global, end-to-end encryption untuk keamanan, dan sistem distribusi berbasis channel yang fleksibel. Setup ini mendukung update bertarget, beta testing, dan kepatuhan terhadap pedoman app store sambil tetap menjaga framework keamanan yang kuat.

Lanjutkan dari Cara Kustomisasi Build Script dengan Capacitor CLI

Jika Anda menggunakan Cara Kustomisasi Build Script dengan Capacitor CLI untuk merencanakan otomatisasi CI/CD, hubungkan dengan CI/CD Capgo untuk workflow produk di Capgo CI/CD, Capgo Native Build untuk workflow produk di Capgo Native Builds, Integrasi Capgo untuk alur kerja produk di Integrasi Capgo, Integrasi CI/CD untuk detail implementasi di Integrasi CI/CD, dan Integrasi GitHub Actions untuk detail implementasi di Integrasi GitHub Actions.