Lompat ke konten utama

Bagaimana Cara Mengatur Skrip Pembangunan dengan Capacitor CLI

Apa itu Cara Mengatur Skrip Pembangunan dengan Capacitor CLI untuk Pengiriman Efisien dan Update Aplikasi yang Disesuaikan di Berbagai Platform.

How to Customize Build Scripts dengan Capacitor CLI

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

  • Mempercepat updatePush perubahan secara instan tanpa menunggu proses penyimpanan aplikasi.
  • Memantau pengiriman: Mengembalikan update atau mengarahkan pengguna tertentu.
  • Mengamankan aplikasi: Menggunakan enkripsi untuk melindungi update.
  • Mengoptimalisasi pembangunan: Mengatur pengaturan untuk kebutuhan platform tertentu.

Ringkasan Cepat Fitur Utama:

  • Konfigurasi File: Gunakan capacitor.config.json dan package.json untuk mengelola pengaturan build.
  • Skrip Kustom: Tambahkan tugas prebuild dan postbuild untuk otomatisasi.
  • Gagang Build: Jalankan code pada tahap-tahap tertentu dari proses build.
  • Variabel Lingkungan: Sederhanakan build yang spesifik lingkungan dengan .env file.

CapgoAlat pengembangan ini, , meningkatkan proses ini dengan update otomatis, pemantauan versi, dan optimasi kinerja global. Lanjutkan membaca untuk mengetahui cara mengatur dan mengcustomisasi skrip pembangunan Anda untuk efisiensi maksimum.

Introducing Capacitor Konfigurasi

Referensi Dokumentasi Framework Capacitor

Proses Pembangunan Bawaan di Capacitor

Mengerti bagaimana Capacitor mengelola proses pembangunan bawaannya sangat penting jika Anda ingin mengcustomisasi proses tersebut dengan efektif. Di bawah ini, kami akan menjelaskan proses pembangunan Capacitor CLI dan file konfigurasi utamanya.

Langkah-Langkah Pembangunan Standar

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

Phase Deskripsi Hasil
Build Web Mengompilasi aset web menggunakan alat-alat framework Anda Bundle web yang dioptimalkan
Salin Aset Menggerakkan aset web ke folder-folder platform native Direktori aset platform khusus
Build Native Jalankan perintah pembangunan spesifik platform Melakukan perintah build platform khusus
Verifikasi Memeriksa integritas dan dependensi pembangunan Status dan peringatan pembangunan

File Konfigurasi Utama

Dua file konfigurasi utama menentukan bagaimana Capacitor mengelola pembangunan Anda:

capacitor.config.json
File konfigurasi inti untuk proyek Capacitor Anda. Ini menetapkan parameter penting untuk pembangunan 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 khusus plugin, 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"
  }
}
  • The webDir pengaturan di capacitor.config.json menunjukkan Capacitor tempat untuk mencari aset web yang telah dikompilasi 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 cara Anda dapat memodifikasi pengaturan ini untuk mempersonalisasi pembangunan Anda lebih lanjut.

Mengubah Skrip Pembangunan

Anda dapat mengatur ulang 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 beberapa pengaturan kunci yang dapat Anda modifikasi:

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

Membuat Skrip NPM

Untuk mempercepat alur kerja, tambahkan skrip NPM kustom ke dalam package.json file. Berikut 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 postbuildGunakanlah untuk tugas seperti mengatur lingkungan atau mengirimkan notifikasi ketika proses build selesai.
  • build:platformPerintah khusus platform untuk membangun aplikasi Android atau iOS.

: Perintah spesifik platform untuk membuat aplikasi Android atau iOS.

Konfigurasi Hook Pembangunan

Untuk kendali yang lebih maju, gunakan hook pembangunan untuk menjalankan code kustom secara spesifik pada titik-titik tertentu selama proses pembangunan. Berikut adalah contoh konfigurasi 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 menggunakan hook pembangunan, Anda dapat:

  • Memvalidasi persyaratan sebelum pembangunan dimulai
  • Mengubah aset selama proses pembangunan
  • Mengaktifkan notifikasi pada titik-titik kunci
  • Mengupdate nomor versi secara otomatis
  • Menggunakan tes otomatis secara lancar

Metode ini memberikan fleksibilitas dan kendali 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 efektif untuk mengatasi pembangunan yang spesifik lingkungan dan pengaturan platform.

Variabel Lingkungan

Atur variabel lingkungan dengan membuat file tersendiri .env berkas untuk setiap lingkungan:

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

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

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 untuk Platform

Untuk mengcustomisasi 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 ini memungkinkan Anda untuk menyesuaikan pembangunan untuk setiap platform, sehingga proses pengiriman menjadi lebih lancar.

Android iOS iOS
Simbol Debug ProGuard berkas peta berkas dSYM
Variasi Pembangunan debug, rilis, tahap pengujian debug, rilis
Code Signing Manajemen Keamanan Manajemen Profil Pengaturan
Manajemen Aset optimasi res/drawable Katalog Aset

Tips tambahan untuk mengoptimalkan pembangunan Anda termasuk:

  • Memanfaatkan pembaruan parsial untuk menghemat waktu selama proses pengiriman
  • Mengatur pengawasan kesalahan untuk mengidentifikasi masalah dengan cepat
  • Membuat sistem saluran untuk versi pengujian beta
  • Mengaktifkan enkripsi ujung-ke-ujung untuk distribusi yang lebih aman

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

Masalah Skrip Pembangunan & Perbaikan

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

Perbaiki Kesalahan Umum

Banyak masalah skrip pembangunan 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. Contoh berikut ini:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Kegagalan Pembangunan Platform-Spesifik

Untuk kesalahan tanda tangan Android, gunakan perintah ini:

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

Untuk masalah profil penyediaan iOS, coba ini:

npx cap build ios --configuration=release --type=development
Jenis Kesalahan Pemicu Umum Solution
Konfigurasi Tanda Tangan Detail keystore yang hilang Set KEYSTORE_PATH dan kreditensi
Lingkungan Pembangunan Variabel-variabel yang tidak terdefinisi Buat skrip bangun yang spesifik .env file
Ketergantungan Perbedaan versi Update package.json dan sinkronisasi

Setelah menerapkan perbaikan, pastikan perubahan Anda stabil 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
  • 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}`);
  }
});
  • Debugging 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:

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

Capgo Fitur Pembangunan

Capgo Live Update Antarmuka Dashboard

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.
  • Respon rata rata API sebesar 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.

Pengautomatan Pembangunan

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

Platform CI/CD Fitur Integrasi Manfaat
GitHub Aksi Pembangunan Otomatis, Pengaktifan Deploy Pengiriman Terus-Menerus
GitLab CI Automasi aliran, Pengendalian versi Alur kerja yang terstruktur
Jenkins Alur kerja kustom, Hook pembangunan Skalabel untuk perusahaan besar

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

Standar Keamanan

Capgo memprioritaskan keamanan dengan kerangka kerja yang kuat yang mencakup:

  • Enkripsi ujung ke ujung untuk paket update.
  • Manajemen kunci yang aman.
  • Pengaturan kompatibilitas dengan pedoman Apple dan Google.

Fitur Pengendalian Versi.

  • Opsi rollback instan.
  • Pengaturan Versi Pengiriman.
  • Pengelolaan saluran pembaruan untuk rilis yang dipersiapkan.

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

Sistem saluran Capgo membuat distribusi pembaruan fleksibel. Pengembang dapat menargetkan kelompok pengguna tertentu dengan versi yang berbeda, sempurna untuk tes beta atau peluncuran perlahan.

Ringkasan.

Tinjauan Langkah Pembangunan.

Skrip pembangunan yang dapat disesuaikan memungkinkan pengembang untuk melakukan pengiriman otomatis dan konsisten dengan menggunakan hook pembangunan, variabel lingkungan, dan perintah spesifik platform. Proses-proses ini menciptakan dasar yang kuat untuk perbaikan pengiriman yang dapat dilakukan dengan Capgo.

Keuntungan Capgo

Capgo mempercepat proses pengiriman, telah berhasil mengirimkan lebih dari 23,5 juta update ke 750 aplikasi produksi [1]. Sistem update parsialnya mengurangi penggunaan bandwidth dan waktu pengiriman.

The platform menyediakan update cepat, optimasi kinerja global, enkripsi akhir-ke-akhir untuk keamanan, dan sistem distribusi berbasis saluran yang fleksibel. Konfigurasi ini mendukung update yang sasaran, pengujian beta, dan kinerja keamanan yang kuat.

Teruskan dari Cara Mengatur Skrip Pembangunan dengan Capacitor CLI

Jika Anda menggunakan Cara Mengatur Skrip Pembangunan dengan Capacitor CLI untuk merencanakan otomatisasi CI/CD, hubungkannya 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 Actions Integration untuk detail implementasi di GitHub Integrasi Aksi.

Pembaruan Langsung untuk Aplikasi Capacitor

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

Dukungan Manusia dari Martin

Mulai Sekarang

Terbaru dari Blog Kami

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