Lompat ke konten utama

Bagaimana 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

Pengiklan Konten

Bagaimana Cara Mengatur Skrip Pembangunan dengan Capacitor CLI

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

  • Meningkatkan Kinerja: Mengirimkan perubahan secara instan tanpa adanya penundaan dari toko aplikasi.
  • Mengontrol Pengiriman: Mengembalikan perubahan atau mengarahkan pengguna ke kelompok tertentu.
  • Mengamankan Aplikasi: Menggunakan enkripsi untuk melindungi perubahan.
  • Mengoptimalkan Pembangunan: Mengatur pengaturan untuk kebutuhan platform yang spesifik.

Ringkasan Cepat Fitur Utama:

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

CapgoAlat pengembangan ini, __CAPGO_KEEP_0__ , mempercepat proses ini dengan perbaruan otomatis, pengawasan versi, dan optimasi kinerja global. Baca terus untuk mengetahui cara mengatur dan mengcustomisasi skrip pembangunan Anda untuk efisiensi maksimum.

Introducing __CAPGO_KEEP_0__ Konfigurasi Capacitor __CAPGO_KEEP_0__ Framework Dokumentasi Situs Web

Capacitor Framework Documentation Website

Mengerti bagaimana Capacitor mengelola proses pembangunan baku-nya sangat penting jika Anda ingin mengcustomisasi-nya dengan efektif. Di bawah ini, kita akan memecah-mecah proses pembangunan __CAPGO_KEEP_1__ __CAPGO_KEEP_2__ dan file konfigurasi utamanya.

Understanding how Capacitor handles its default build process is crucial if you want to customize it effectively. Below, we’ll break down the Capacitor CLI’s build process and its key configuration files.

__CAPGO_KEEP_1__ __CAPGO_KEEP_2__

Capacitor menggunakan proses langkah demi langkah untuk mengubah aplikasi web Anda menjadi bangun-bangun spesifik platform. Berikut adalah apa yang terjadi selama proses bangun-bangun default:

Fase Deskripsi Keluaran
Bangun Web Mengompilasi aset web menggunakan alat-alat framework Anda Bundel web yang dioptimalkan
Salin Aset Menggerakkan aset web ke folder-folder platform native Direktori aset platform spesifik
Bangun Nativ Menggunakan perintah-perintah bangun-bangun platform spesifik File Binari yang Dapat Dibangun secara Langsung
Verifikasi Mengecek integritas dan dependensi build Status dan Peringatan Build

File Konfigurasi Utama

Dua file konfigurasi utama ini 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 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 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.

Mengubah Skrip Pembangunan

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

Pengaturan File Konfigurasi

Anda dapat menyesuaikan 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 utama 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 pembangunan spesifik platform, seperti detail keamanan Android atau pilihan pengaturan iOS.

Membuat NPM Skrip

Untuk mempercepat alur kerja, tambahkan skrip NPM kustom ke package.json file. 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 postbuild: Gunakan untuk tugas seperti mengatur lingkungan atau mengirimkan pemberitahuan ketika pembangunan selesai.
  • build:platform: Perintah spesifik platform untuk membangun aplikasi Android atau iOS.

Anda dapat mengambil otomatisasi lebih jauh dengan menambahkan hook build.

Pengaturan Hook Build

Untuk kontrol yang lebih maju, gunakan hook build untuk menjalankan code yang disesuaikan pada titik-titik tertentu selama proses build. 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 menggunakan hook build, Anda dapat:

  • Mengvalidasi persyaratan sebelum proses build dimulai
  • Mengubah aset selama proses
  • Mengaktifkan notifikasi pada titik-titik kunci
  • Mengupdate nomor versi secara otomatis
  • Menjalankan tes otomatis dengan lancar

Pengaturan ini memberikan fleksibilitas dan kontrol yang lebih besar atas seluruh siklus build.

Pengaturan Build Lanjutan

Ketika bekerja pada proyek yang lebih besar, fine-tuning proses build dapat membuat perbedaan besar. Berikut adalah cara untuk mengatasi build yang spesifik lingkungan dan pengaturan platform dengan efektif.

Variabel Lingkungan

Atur 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

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

Buat untuk Platform Tertentu

Untuk mengcustomisasi build untuk Android dan iOS, gunakan struktur berikut:

Konfigurasi ini memungkinkan Anda untuk menyesuaikan build untuk setiap platform, sehingga proses pengiriman menjadi lebih lancar.

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

Fitur

Android iOS Simbol Debugging
__CAPGO_KEEP_0__ ProGuard file mapping file dSYM
Variasi Pembangunan debug, rilis, tahap pengujian debug, rilis
Code Signing Manajemen Keamanan Keystore Manajemen Profil Pengaturan
Manajemen Asset Optimasi Aset res/drawable Katalog Aset

Tips tambahan untuk mengoptimalkan build Anda termasuk:

  • Menggunakan 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 akhir-ke-akhir untuk distribusi yang lebih aman

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

Masalah Skrip Build & Perbaikan

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

Perbaiki Kesalahan Umum

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

Variabel Lingkungan Hilang

Jika Anda mengalami kesalahan seperti ini:

error: Cannot find environment configuration for BUILD_ENV

Anda bisa memperbaikinya dengan membuat sebuah .env.local file di direktori root projek Anda. Berikut contoh:

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 pengembangan iOS, coba ini:

npx cap build ios --configuration=release --type=development
Tipe Kesalahan Penyebab Umum Solusi
Konfigurasi Tanda Tangan Detail keystore yang hilang Atur KEYSTORE_PATH dan kreditensi
Lingkungan Pembangunan Variabel-variabel yang tidak terdefinisi Buat spesifikasi platform .env file-file
Ketergantungan Kesalahan versi Perbarui package.json dan sinkron

Setelah menerapkan perbaikan, pastikan perubahan Anda solid dengan menjalankan tes bangun yang teliti.

Tes Skrip Bangun

Setelah kesalahan diselesaikan, validasi skrip bangun 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}`);
  }
});
  • Debug 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 Docker kontainer untuk mengisolasi pembangunan.
  • Validasi file konfigurasi sebelum memulai proses.
  • Uji dengan beberapa Node.js versi.
  • Pastikan persyaratan platform khusus telah dipenuhi.
  • Perhatikan kinerja pembangunan untuk kemungkinan perbaikan.

Capgo Buat Fitur

Capgo Dashboard Pembaruan Langsung Antarmuka

Capgo meningkatkan skrip pembangunan ke tingkat berikutnya dengan pengaturan 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 update di seluruh dunia.
  • Waktu respons rata-rata API sebesar 434ms secara global.

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

Automasi Pembangunan

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

Platform CI/CD Fitur Integrasi Manfaat
Aksi GitHub Pembangunan otomatis, Pengaktifan Deploy Pengiriman Terus Menerus
GitLab CI Automasi Pipeline, Pengendalian Versi Alur Kerja yang Dipercepat
Jenkins Tata Kerja Kustom, Hook Pembangunan Skalabel untuk Perusahaan Besar

Mengatur Build Otomatis biasanya memerlukan biaya sekitar $300 per bulanyang 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 akhir ke akhir untuk paket update.
  • Pengelolaan kunci yang aman.
  • Kemampuan kompatibilitas dengan pedoman Apple dan Google.

Fitur Pengendalian Versi

  • Opsi rollback instan.
  • Pengawasan versi pengiriman.
  • Pengelolaan saluran update untuk rilis yang dipersiapkan.

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 Manfaat

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

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

Lanjutkan dari Cara Mengatur Skrip Pembangunan dengan Capacitor CLI

Jika Anda menggunakan Cara Mengatur Skrip Pembangunan dengan Capacitor CLI untuk merencanakan otomatisasi CI/CD, hubungkan dengan Capgo CI/CD untuk alur kerja produk di Capgo CI/CD, Capgo Pembangunan Natively untuk alur kerja produk di Capgo Pembangunan Natively, Integrasi Capgo untuk alur kerja produk di Integrasi Capgo Integrasi CI/CD untuk detail implementasi di Integrasi CI/CD Integrasi Aksi GitHub untuk detail implementasi di Integrasi Aksi GitHub

Pembaruan Hidup untuk Capacitor aplikasi

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 membuat aplikasi mobile yang benar-benar profesional.