Bagaimana Mengcustomisasi Skrip Pembangunan dengan Capacitor CLI

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

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

Ringkasan Cepat Fitur Utama:

• File Konfigurasi: Gunakan capacitor.config.json dan package.json Mengelola pengaturan pembangunan.
• Skrip Kustom: Tambahkan tugas prebuild dan postbuild untuk otomatisasi.
• Gantungan Pembangunan: Jalankan code pada tahap-tahap spesifik 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. Selanjutnya, pelajari cara mengatur dan mengcustomisasi skrip pembangunan Anda untuk efisiensi maksimum.

Introducing Capacitor Konfigurasi

Proses Pembangunan Default di Capacitor

Mengerti bagaimana Capacitor mengelola proses pembangunan defaultnya sangat penting jika Anda ingin mengcustomisasi proses tersebut 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 adalah apa yang terjadi selama proses pembangunan default:

Konfigurasi Utama File

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: Specifies where Capacitor should look for the web assets (e.g., 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 Mengatakan Capacitor di mana lokasinya untuk menyimpan aset web yang 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 mempersonalisasi pembangunan Anda lebih lanjut.

Pengaturan Skrip Pembangunan

Anda dapat mengatur ulang proses pembangunan Capacitor untuk lebih sesuai dengan kebutuhan proyek Anda. Berikut adalah cara:

Pengaturan File Konfigurasi

Anda dapat mengatur ulang proses pembangunan dengan mengedit file capacitor.config.json . 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 utama yang dapat Anda modifikasi:

• webDir: Menentukan lokasi aset web yang dikompilasi Anda.
• server: Mengatur server pengembangan, termasuk hostname dan izin navigasi.
• android/ios: Mengizinkan pengaturan build spesifik platform, seperti detail keystore untuk Android atau opsi penyediaan 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 proses build selesai. postbuild: Perintah spesifik platform untuk membuat aplikasi Android atau iOS.
• build:platformAnda dapat meningkatkan otomatisasi dengan menambahkan hook build.

Pengaturan Hook Build

Untuk kontrol yang lebih lanjut, gunakan hook build untuk menjalankan __CAPGO_KEEP_0__ kustom pada titik tertentu selama proses build. Contoh pengaturan 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 server pengembangan, termasuk hostname dan izin navigasi.

• Validasi persyaratan sebelum proses pembangunan dimulai
• Mengubah asset selama proses
• Mengaktifkan pemberitahuan pada titik-titik kunci
• Mengupdate nomor versi secara otomatis
• Menggunakan 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 mengatasi pembangunan spesifik lingkungan dan pengaturan platform secara efektif.

Variabel Lingkungan

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

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

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

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

Andalah terlebih dahulu pengaturan ini untuk memenuhi persyaratan platform tertentu.

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 pengembangan menjadi lebih lancar.

Tips tambahan untuk mengoptimalkan build Anda termasuk:

• Menggunakan pembaruan parsial untuk menghemat waktu selama proses pengiriman
• Mengatur pengawasan kesalahan untuk cepat mengidentifikasi masalah
• Membuat sistem saluran untuk versi pengujian beta
• Memungkinkan enkripsi ujung ke ujung 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 & Perbaikan

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

Perbaiki Kesalahan Umum

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

Variabel Lingkungan 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

Gagal Bangun Platform-Spesifik

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

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 berikut:

• Verifikasi Otomatis: Jalankan perintah kunci untuk memastikan proses build berjalan seperti yang diharapkan.

npm run build
npx cap sync
npx cap copy

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

• Pengujian 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 berbagai versi Node.js Pastikan persyaratan spesifik platform telah dipenuhi.
• Perhatikan kinerja proses pembangunan untuk kemungkinan perbaikan.
• __CAPGO_KEEP_0__

Capgo [Build Features]

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

Pembaruan Aplikasi Cepat

Kinerja pembaruan Capgo 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, yang berarti hanya perubahan yang diunduh. Pendekatan ini mengurangi penggunaan bandwidth dan mempercepat proses pembaruan. Selain itu, proses pembangunan secara keseluruhan sepenuhnya otomatis, sehingga menghemat waktu dan upaya.

Automasi Pembangunan

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

Mengatur build otomatis biasanya membutuhkan biaya sekitar $300 per bulan, yang jauh lebih hemat biaya dibandingkan dengan solusi tradisional yang bisa mencapai $6,000 setahun.

Standar Keamanan

Capgo memprioritaskan keamanan dengan kerangka yang kuat yang mencakup:

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

Fitur Pengendalian Versi

• Opsi rollback instan.
• Pantau versi pengiriman.
• Manajemen saluran pembaruan untuk rilis yang disiapkan.

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.

Ringkasan

Ringkasan Langkah Pembangunan

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]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 saluran yang fleksibel. Konfigurasi ini mendukung pembaruan yang ditargetkan, tes beta, dan kinerja keamanan yang kuat.

Teruskan dari Cara Mengcustom Build Script dengan Capacitor CLI

Jika Anda menggunakan Cara Mengcustom Build Script dengan Capacitor CLI untuk merencanakan otomatisasi CI/CD, hubungkannya dengan Capgo Otomatisasi CI/CD untuk alur kerja produk di Capgo Otomatisasi CI/CD, Capgo Pembangunan Natively untuk alur kerja produk di Capgo Pembangunan Natively, Capgo Integrasi untuk alur kerja produk di Capgo Integrasi, Integrasi CI/CD untuk detail implementasi di Integrasi CI/CD, dan Aksi Integrasi GitHub untuk detail implementasi di Aksi Integrasi GitHub.