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 simpel.
Live Updates: Gunakan Capgo untuk update over-the-air instan.
Solusi Umum: Atasi masalah seperti error sync atau build gagal.

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 app.

Panduan ini membahas semua yang Anda butuhkan untuk setup Capacitor CLI, konfigurasi platform, dan deploy aplikasi Anda. Mari kita mulai!

Memperkenalkan Capacitor Konfigurasi

Website Dokumentasi Framework Capacitor

Persyaratan Setup

Untuk memulai, pastikan Anda sudah menginstal tools berikut:

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

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

Langkah Instalasi CLI

Sebelum mulai, pastikan Anda sudah punya 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 langkah ini selesai, lanjut ke Membuat Proyek Baru untuk membuat 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

Memperbarui 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 menyiapkan Capacitor pada proyek Anda.

Setup Platform

Setelah scaffolding proyek selesai, saatnya menyiapkan target iOS dan Android.

Menambahkan iOS dan Android

Mulai dengan menginstal paket spesifik platform yang diperlukan menggunakan Capacitor CLI:

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

Untuk iOS, pastikan Anda menggunakan Xcode 14 atau versi terbaru, CocoaPods 1.11 atau yang lebih baru, dan macOS 12 atau lebih tinggi. Untuk Android, Anda memerlukan Android Studio Giraffe (2022.3.1+), JDK 17 atau versi terbaru, dan Gradle 7.5 atau versi di atasnya.

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

Update Platform

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

npm run build
npx cap sync

Skill cap sync perintah ini menangani dua tugas:

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

Setup IDE

Buka proyek spesifik 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.
Update bundle identifier Anda.

Di Android Studio:

Ubah application ID di build.gradle.
Konfigurasi keystore untuk signing.
Siapkan build variant debug dan release.

Setelah semua dikonfigurasi, build project menggunakan npx cap build ios atau npx cap build android. Jangan lupa jalankan npx cap sync lagi untuk memastikan semua asset sudah up to date.

Capgo Panduan Setup

Antarmuka Dashboard Capgo Live Update

Siapkan Capgo untuk mengaktifkan update over-the-air instan pada aplikasi Anda.

Fitur Utama Capgo

Capgo menawarkan beberapa tools untuk mempermudah update aplikasi:

Enkripsi end-to-end memastikan pengiriman update yang aman.
Update berjalan di latar belakang saat aplikasi dijalankan.
Tools analytics membantu melacak tingkat keberhasilan update dan engagement pengguna.
Sebuah rollback sekali klik opsi ini memungkinkan Anda pulih dengan cepat dari update yang bermasalah.
Gunakan sistem channel untuk staged rollout dan beta testing.

Instalasi Capgo

Ikuti langkah-langkah ini untuk mulai menggunakan Capgo:

Instal 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 mengetes update sebelum dirilis ke semua user.
Pantau analytics untuk memastikan update terkirim sukses dan user tetap engaged.
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 CI/CD pipeline, dan memenuhi syarat Apple serta Google store.

Masalah Umum dan Tips

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

Masalah Setup Environment

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

Masalah Konfigurasi

Ketidakcocokan Konfigurasi Error: Perubahan pada capacitor.config.json tidak akan diterapkan. Solusi: 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. Solusi: Update @capacitor/android dan @capacitor/ios ke versi major yang sama, lalu jalankan kembali perintah sync.

Build dan Deployment

Kegagalan Build Signing Error: Build iOS atau Android gagal karena sertifikat atau keystore hilang. Solusi: Ikuti instruksi setup IDE. Untuk iOS, tambahkan development team di Xcode. Untuk Android, konfigurasi keystore di build.gradle.
Web Directory Tidak Ditemukan Error: npx cap sync tidak dapat menemukan web assets. Perbaiki: Jalankan perintah web build Anda (misalnya, npm run build) sebelum melakukan sync platform.

Masalah Live Update

Kegagalan Update Capgo Error: Update tidak muncul di aplikasi production. Perbaiki: Double-check your kunci Capgo API di capacitor.config.json dan pastikan Anda menargetkan channel yang benar.

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

Ringkasan

Review Setup

Mulai web app Anda dengan Capacitor CLI, setup platform iOS dan Android, serta opsional tambahkan Capgo untuk live updates.

Berikut cara memulainya:

Gunakan Capacitor CLI untuk inisialisasi project Anda.
Set up package ID aplikasi Anda dan tentukan direktori output web.
Tambahkan dukungan untuk platform iOS dan Android.
Install dan setup Capgo dengan perintah berikut: npm install --save @capgo/cli && npx capgo init

Untuk instruksi setup detail atau troubleshooting, cek dokumentasi resmi Capacitor dan Capgo.

Lanjutkan dari Capacitor CLI: Project Setup Guide

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