Capacitor CLI: Panduan Pengaturan Proyek

Ingin membuat aplikasi iOS dan Android dengan satu basis kode? Capacitor CLI memudahkan prosesnya, memungkinkan Anda membuat aplikasi native menggunakan teknologi web. Berikut ini yang Anda akan pelajari:

Pengaturan Cepat: Pasang Capacitor CLI dan inisialisasi proyek Anda dalam beberapa menit.
Integrasi Platform: Tambahkan dukungan iOS dan Android dengan perintah sederhana.
Pembaruan Langsung: Gunakan Capgo untuk pembaruan di udara instan.
Pemecahan Umum: Atasi masalah seperti kesalahan sinkronisasi atau gagal bangun.

Langkah-Langkah Utama untuk Mulai:

Pasang Node.js, npm, JDK, Xcode, dan Android Studio.
Jalankan npm install @capacitor/core @capacitor/cli dan inisialisasi proyek Anda.
Menambahkan platform iOS dan Android menggunakan npx cap add ios dan npx cap add android.
Opsional: Atur Capgo untuk pembaruan aplikasi live Pembaruan Aplikasi.

Petunjuk ini mencakup segala yang Anda perlukan untuk mengatur Capacitor CLI, mengonfigurasi platform, dan mengirimkan aplikasi Anda. Mari kita mulai!

Pengenalan Capacitor Konfigurasi

Capacitor Dokumentasi Framework Situs Web

Persyaratan Pengaturan

Untuk memulai, pastikan Anda telah menginstal alat-alat berikut:

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

Opsional: If you want to enable live updates, check out the “Petunjuk Pengaturan CapgoLangkah-Langkah Pemasangan __CAPGO_KEEP_0__

CLI Installation Steps

Node.js __CAPGO_KEEP_0__, npm, Xcode, , danAndroid Studio terpasang. Setelah siap, Anda dapat menginstal __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ dengan menjalankan: set up. Once ready, you can install the Capacitor CLI by running:

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

Perintah ini menginstal Capacitor dan mengatur komponen inti-nya.

Setelah menyelesaikan langkah ini, lanjutkan ke Membuat Proyek Baru untuk mengatur 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

Mengupdate File Konfigurasi

Ubah capacitor.config.json file untuk mencakup 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.

Konfigurasi Platform

Sekarang bahwa kerangka proyek telah selesai, saatnya untuk mengatur target iOS dan Android.

Mengambahkan iOS dan Android

Mulai dengan menginstal paket spesifik platform 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 akan memerlukan Android Studio Giraffe (2022.3.1+), JDK 17 atau lebih baru, dan Gradle 7.5 atau di atas.

Setelah diinstal, Anda akan perlu memperbarui target native Anda dengan perubahan aplikasi web Anda.

Pembaruan Platform

Untuk sinkronisasi platform Anda dengan perubahan web terbaru, ikuti langkah-langkah ini setelah memperbarui aplikasi web Anda:

npm run build
npx cap sync

Perintah ini mengelola dua tugas: cap sync Mengcopy aset web yang diperbarui ke platform native

Mengupdate konfigurasi dan plugin native untuk menyesuaikan perubahan terbaru
Pengaturan IDE

Buka proyek platform khusus di IDE yang sesuai:

Pada Xcode:

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

Pilih tim pengembangan Anda.

Atur sertifikat tanda tangan.
Perbarui identifikasi paket Anda.
Pada Android Studio:

Ubah ID aplikasi Anda.

Modifikasi ID aplikasi Anda. build.gradle.
Konfigurasi keystore untuk tanda tangan.
Atur kedua varian pembangunan debug dan rilis.

Ketika semuanya telah dikonfigurasi, bangun proyek menggunakan npx cap build ios atau npx cap build android. Jangan lupa menjalankan npx cap sync lagi untuk memastikan semua aset sudah terupdate.

Capgo Petunjuk Pengaturan

Capgo Dashboard Antarmuka Perbarui Langsung

Atur Capgo untuk memungkinkan pembaruan instan secara daring untuk aplikasi Anda.

Fitur Utama Capgo

Capgo menawarkan beberapa alat untuk mempercepat pembaruan aplikasi:

Enkripsi ujung ke ujung menjamin pengiriman update yang aman.
Update berjalan di latar belakang ketika aplikasi diluncurkan.
Alat analitik membantu mengikuti tingkat kesuksesan update dan partisipasi pengguna.
Opsi rollback satu-klik memungkinkan Anda untuk segera pulih dari update yang bermasalah.
Pilih sistem saluran untuk peluncuran rolut dan pengujian beta.

Menginstal Capgo

Ikuti langkah-langkah ini untuk memulai dengan Capgo:

Pasang Capgo CLI:
```
npm install --save @capgo/cli
```
Inisialisasi Capgo dalam proyek Anda:
```
npx capgo init
```
Buat dan rilis update:
```
npm run build
npx capgo release
```
Buka aplikasi untuk mengaktifkan proses pembaruan latar belakang.

Praktik Terbaik

Gunakan saluran untuk menguji pembaruan sebelum mengeluarkannya ke semua pengguna.
Monitor analitis untuk memastikan pembaruan disampaikan dengan sukses dan pengguna tetap terlibat.
Aktifkan pemantauan kesalahan untuk menangkap dan memperbaiki masalah-masalah awal.
Siapkan fitur rollback untuk segera menangani masalah apa pun.

Capgo kompatibel dengan Capacitor 8, terintegrasi dengan lancar dengan pipeline CI/CD, dan memenuhi persyaratan toko Apple dan Google.

Masalah Umum dan Tips

Setelah Anda menyelesaikan platform dan Capgo setup, Anda mungkin mengalami beberapa kesalahan umum. Berikut cara menanganinya dengan cepat.

Masalah Pengaturan Lingkungan

CLI Tidak Ditemukan Error: Perintah npx cap Gagal. Perbaiki: Jalankan npm install --save @capacitor/cli @capacitor/core dan coba lagi.
Versi Node Tidak Sesuai ErrorKarena masalah versi Node.js, perintah CLI gagal. PerbaikiInstall versi Node.js 14 atau lebih tinggi seperti yang dijelaskan dalam persyaratan pengaturan.

Masalah Pengaturan

Kesalahan Pengaturan ErrorPerubahan pada capacitor.config.json tidak berlaku. PerbaikiPastikan Anda untuk appId dan webDir nilai-nilainya sesuai dengan proyek Anda. package.json dan folder keluaran build web.
Platform Sync Error Kesalahan : Berjalan npx cap sync dapat menyebabkan konflik versi plugin. Perbaiki : Perbarui @capacitor/android dan @capacitor/ios ke versi mayor yang sama, kemudian jalankan perintah sinkronisasi lagi.

Build dan Pengembangan

Gagal Signing Build Error: Pembangunan iOS atau Android gagal karena sertifikat atau keystore yang hilang. Pemecahan Masalah: Ikuti instruksi pengaturan IDE. Untuk iOS, tambahkan tim pengembangan Anda di Xcode. Untuk Android, konfigurasi keystore di build.gradle.
Direktori Web Tidak Ditemukan Error: npx cap sync Tidak dapat menemukan aset web. Pemecahan Masalah: Jalankan perintah pembangunan web Anda (misalnya, __CAPGO_KEEP_0__ ) sebelum sinkronisasi platform. npm run buildIssue Pembaruan Hidup

__CAPGO_KEEP_0__

Capgo Gagal Update __CAPGO_KEEP_0__: Pembaruan tidak muncul di aplikasi produksi. __CAPGO_KEEP_0__: Periksa kembali Capgo API di capacitor.config.json dan pastikan Anda mengarahkan ke saluran yang benar.

Untuk informasi lebih lanjut tentang pengaturan spesifik platform, kunjungi bagian Pengaturan Platform. Jika Anda bekerja dengan pembaruan hidup, lihat Panduan Capgo untuk tips tambahan untuk memecahkan masalah.

Ringkasan

Ulasan Pengaturan

Mulai aplikasi web Anda dengan Capacitor CLI, atur platform iOS dan Android, dan secara opsional termasuk Capgo untuk pembaruan hidup.

Berikut cara memulai:

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

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

Teruskan dari Capacitor CLI: Panduan Setup Proyek

Jika Anda menggunakan Capacitor CLI: Panduan Setup Proyek untuk merencanakan dashboard dan operasi API, hubungkannya dengan API Ringkasan untuk detail implementasi di API Ringkasan, Pengenalan untuk detail implementasi di Pengenalan, API Kunci untuk detail implementasi di API Kunci, Perangkat untuk detail implementasi di Perangkat, dan Paket untuk detail implementasi di Paket.