Capacitor CLI: Panduan Setup Proyek

Ingin build aplikasi iOS dan Android dengan satu codebase? Capacitor CLI mempermudah prosesnya, memungkinkan Anda membuat aplikasi native menggunakan teknologi web. Berikut yang akan Anda pelajari:

Setup Cepat: Install Capacitor CLI dan inisialisasi proyek Anda dalam hitungan menit.
Integrasi Platform: Tambahkan dukungan iOS dan Android dengan perintah sederhana.
Live Update: Gunakan Capgo untuk pembaruan over-the-air instan.
Perbaikan Umum: Atasi masalah seperti error sinkronisasi atau kegagalan build.

Langkah Utama untuk Memulai:

Instal Node.js, npm, JDK, Xcode, dan Android Studio.
Jalankan npm install @capacitor/core @capacitor/cli dan inisialisasi proyek Anda.
Tambahkan platform iOS dan Android menggunakan npx cap add ios dan npx cap add android.
Opsional: Siapkan Capgo untuk live update aplikasi.

Panduan ini mencakup semua yang Anda butuhkan untuk menyiapkan Capacitor CLI, mengonfigurasi platform, dan mendeploy aplikasi Anda. Mari kita mulai!

Pengenalan Capacitor Konfigurasi

Website Dokumentasi Framework Capacitor

Persyaratan Setup

Untuk memulai, pastikan Anda sudah menginstal tool berikut:

Node.js (versi 14 atau lebih baru) dan npm
Java JDK (versi 11 atau lebih baru)
Xcode (versi 12 atau lebih baru untuk build iOS)
Android Studio (untuk build Android)
Capacitor CLI (versi 6 atau 7)

Opsional: Jika Anda ingin mengaktifkan Live Update, lihat “Panduan Setup Capgo” di bawah.

Langkah Instalasi CLI

Sebelum memulai, pastikan Anda memiliki Node.js, npm, JDK, Xcode, dan Android Studio set up. Jika sudah siap, Anda bisa menginstal Capacitor CLI dengan menjalankan:

npm install --save @capacitor/core @capacitor/cli
npx cap init

Perintah ini menginstal Capacitor dan menyiapkan komponen intinya.

Setelah menyelesaikan langkah ini, lanjut ke Membuat Proyek Baru untuk scaffold aplikasi Anda.

Membuat Proyek Baru

Untuk memulai proyek Anda menggunakan Capacitor CLI, ikuti langkah-langkah berikut:

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

Update File Konfigurasi

Edit file capacitor.config.json untuk menyertakan pengaturan berikut:

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

Setelah diperbarui, gunakan konfigurasi ini untuk mengatur Capacitor untuk proyek Anda.

Setup Platform

Sekarang scaffolding proyek sudah selesai, saatnya mengatur target iOS dan Android.

Tambah iOS dan Android

Mulai dengan menginstal paket platform yang diperlukan menggunakan Capacitor CLI:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

Untuk iOS, pastikan Anda memiliki Xcode 14 atau lebih baru, CocoaPods 1.11 atau lebih baru, dan macOS 12 atau lebih tinggi. Untuk Android, Anda membutuhkan Android Studio Giraffe (2022.3.1+), JDK 17 atau lebih baru, dan Gradle 7.5 atau lebih tinggi.

Setelah terinstal, Anda perlu terus memperbarui native target seiring perubahan pada aplikasi web Anda.

Update Platform

Untuk menyinkronkan platform Anda dengan perubahan web terbaru, ikuti langkah-langkah ini setelah memperbarui web app Anda:

npm run build
npx cap sync

Panduan cap sync perintah ini menangani dua tugas:

Menyalin aset web yang telah diperbarui ke platform native
Memperbarui konfigurasi native dan plugin agar sesuai dengan perubahan terbaru

Setup IDE

Buka proyek khusus platform di IDE yang sesuai:

npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

Di Xcode:

Pilih development team Anda.
Siapkan sertifikat signing.
Perbarui bundle identifier Anda.

Di Android Studio:

Ubah application ID di build.gradle.
Konfigurasikan keystore untuk signing.
Siapkan varian build debug dan release.

Setelah semuanya dikonfigurasi, build proyek menggunakan npx cap build ios atau npx cap build android. Jangan lupa jalankan npx cap sync lagi untuk memastikan semua aset sudah terbaru.

Capgo Panduan Setup

Antarmuka Dashboard Capgo Live Update

Atur Capgo untuk mengaktifkan pembaruan over-the-air instan untuk aplikasi Anda.

Fitur Utama Capgo

Capgo menyediakan beberapa alat untuk menyederhanakan pembaruan aplikasi:

Enkripsi end-to-end memastikan pengiriman pembaruan yang aman.
Pembaruan berjalan di latar belakang saat aplikasi diluncurkan.
Alat analitik membantu melacak tingkat keberhasilan update dan keterlibatan pengguna.
Sebuah rollback satu klik option memungkinkan Anda dengan cepat pulih dari pembaruan yang bermasalah.
Gunakan sistem channel untuk staged rollouts dan pengujian beta.

Cara Install Capgo

Ikuti langkah-langkah berikut untuk memulai dengan Capgo:

Install Capgo CLI:
```
npm install --save @capgo/cli
```
Inisialisasi Capgo di proyek Anda:
```
npx capgo init
```
Build dan rilis update:
```
npm run build
npx capgo release
```
Buka aplikasi untuk memicu proses update di background.

Praktik Terbaik

Gunakan channel untuk menguji update sebelum dirilis ke semua pengguna.
Pantau analytics untuk memastikan update berhasil terkirim dan pengguna tetap aktif.
Aktifkan error tracking untuk mendeteksi dan memperbaiki masalah lebih awal.
Siapkan fitur rollback untuk menangani masalah dengan cepat.

Capgo kompatibel dengan Capacitor 8, terintegrasi mulus dengan pipeline CI/CD, dan memenuhi persyaratan App Store dan Google Play.

Masalah Umum dan Tips

Setelah Anda menyelesaikan setup platform dan Capgo, Anda mungkin akan menemui beberapa error umum. Berikut cara mengatasinya dengan cepat.

Masalah Setup Environment

CLI Tidak Ditemukan Error: Perintah npx cap gagal. Perbaikan: Jalankan npm install --save @capacitor/cli @capacitor/core dan coba lagi.
Versi Node Tidak Cocok Error: perintah CLI gagal karena error versi Node.js. Perbaikan: Instal Node.js versi 14 atau lebih tinggi sesuai persyaratan setup.

Masalah Konfigurasi

Konfigurasi Tidak Cocok Error: Perubahan pada capacitor.config.json tidak berlaku. Perbaikan: Make sure the appId dan webDir nilainya sesuai dengan package.json dan folder output web build.
Error Sinkronisasi Platform Error: Menjalankan npx cap sync menyebabkan konflik versi plugin. Perbaikan: Perbarui @capacitor/android dan @capacitor/ios ke versi major yang sama, lalu jalankan ulang perintah sync.

Build dan Deployment

Kegagalan Build Signing Error: Build iOS atau Android gagal karena sertifikat atau keystore tidak ada. Perbaikan: Ikuti instruksi setup IDE. Untuk iOS, tambahkan tim pengembangan Anda di Xcode. Untuk Android, konfigurasikan keystore di build.gradle.
Direktori Web Tidak Ditemukan Error: npx cap sync tidak dapat menemukan aset web. Perbaikan: Jalankan perintah build web Anda (misalnya, npm run build) sebelum sync platform.

Masalah Live Update

Kegagalan Update Capgo Error: Update tidak muncul di aplikasi produksi. Perbaikan: Periksa kembali kunci Capgo API di capacitor.config.json dan pastikan Anda menargetkan channel yang benar.

Untuk detail lebih lanjut tentang setup khusus platform, lihat kembali bagian Platform Setup. Jika Anda menggunakan live updates, cek Capgo Setup Guide untuk tips troubleshooting tambahan.

Ringkasan

Review Setup

Mulai web app Anda dengan Capacitor CLI, siapkan platform iOS dan Android, dan opsional sertakan Capgo untuk live updates.

Berikut cara memulainya:

Gunakan Capacitor CLI untuk menginisialisasi proyek Anda.
Atur package ID aplikasi Anda dan tentukan direktori output web.
Tambahkan dukungan untuk platform iOS dan Android.
Instal dan atur Capgo dengan perintah berikut: npm install --save @capgo/cli && npx capgo init

Untuk instruksi setup atau troubleshooting yang lebih detail, lihat dokumentasi resmi Capacitor dan Capgo.

Lanjutkan dari Capacitor CLI: Panduan Setup Proyek

Jika Anda menggunakan Capacitor CLI: Panduan Setup Proyek untuk merencanakan operasi dashboard dan API, hubungkan dengan Ringkasan API untuk detail implementasi di API Overview, Pendahuluan untuk detail implementasi di Introduction, Kunci API untuk detail implementasi di API Keys, Perangkat untuk detail implementasi di Devices, dan Bundle untuk detail implementasi di Bundles.