Capacitor CLI: Panduan Pengaturan Proyek

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

Konfigurasi Cepat: Pasang Capacitor CLI dan inisialisasi proyek Anda dalam beberapa menit.
Pengintegrasian Platform: Tambahkan dukungan iOS dan Android dengan perintah sederhana.
Perbarui Langsungcontext Capgo untuk pembaruan instan melalui udara.
Pemecahan Masalah Umum: Mengatasi masalah seperti kesalahan sinkronisasi atau gagal bangun.

Peta Langkah Utama untuk Memulai:

Install Node.js, npm, JDK, Xcode, dan Studio Android.
Jalankan npm install @capacitor/core @capacitor/cli langkah-langkah untuk memulai:
Tambahkan platform iOS dan Android menggunakan npx cap add ios dan npx cap add android.
Opsional: Atur Capgo untuk pembaruan hidup pembaruan aplikasi.

Guid ini mencakup semua yang Anda butuhkan untuk mengatur Capacitor CLI, mengonfigurasi platform, dan mengirimkan aplikasi. Mari kita mulai!

Pengenalan Capacitor Konfigurasi

Capacitor Dokumentasi Situs Web Framework

Persyaratan Pengaturan

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

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

Opsional: Jika Anda ingin mengaktifkan pembaruan live, lihat "Capgo Panduan Pengaturan” di bawah.

CLI Langkah Pemasangan

Sebelum memulai, pastikan Anda memiliki Node.js, npm, JDK, Xcode, dan Studio Android tersedia. Setelah siap, Anda dapat menginstal Capacitor CLI dengan menjalankan:

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

Penggunaan 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 dengan proyek Anda menggunakan Capacitor CLIikuti 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 berkas untuk termasuk 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.

Pengaturan Platform

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

Menambahkan 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

Pastikan Anda memiliki Xcode 14 atau lebih baru untuk iOS. Gradle 1.11 atau lebih baru, dan macOS 12 atau lebih tinggi. Untuk Android, Anda memerlukan Android Studio Giraffe (2022.3.1+), JDK 17 atau lebih baru, dan Gradle Pembaruan Platform

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

Perbarui Platform

Ikuti langkah-langkah berikut setelah memperbarui aplikasi web Anda untuk sinkronkan platform Anda dengan perubahan web terbaru.

npm run build
npx cap sync

The cap sync Perintah mengelola dua tugas:

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:

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

Dalam Xcode:

Pilih tim pengembangan Anda.
Atur sertifikat tanda tangan.
Perbarui identifikasi paket Anda.

Dalam Android Studio:

Modify the application ID in build.gradle.
Konfigurasi keystore untuk tanda tangan.
Atur kedua varian pembangunan debug dan rilis.

Ketika semua telah dikonfigurasi, bangun proyek menggunakan npx cap build ios atau npx cap build androidJangan lupa menjalankan npx cap sync lagi untuk memastikan semua aset sudah terkini.

Capgo Panduan Pengaturan

Capgo Live Update Interface Dashboard

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

Fitur Utama Capgo

Capgo menawarkan beberapa alat untuk mempercepat pembaruan aplikasi:

Enkripsi akhir-ke-akhir menjamin pengiriman update yang aman.
Mengupdate berjalan di latar belakang ketika aplikasi diluncurkan.
Alat analitik membantu mengukur tingkat kesuksesan update dan partisipasi pengguna.
A rollback satu klik Mengizinkan Anda untuk segera pulih dari pembaruan yang tidak berjalan lancar.
Gunakan Menggunakan sistem saluran untuk peluncuran peringkat dan pengujian beta.

Memasang Capgo

Ikuti langkah-langkah ini untuk memulai dengan Capgo:

Pasang Capgo CLI:
```
npm install --save @capgo/cli
```
Initialize Capgo dalam proyek Anda:
```
npx capgo init
```
Membangun dan merilis pembaruan:
```
npm run build
npx capgo release
```
Buka aplikasi untuk memicu proses pembaruan latar belakang.

Praktik Terbaik

Gunakan saluran untuk menguji pembaruan sebelum mengeluarkannya kepada semua pengguna.
Pantau analitis untuk memastikan pembaruan disampaikan dengan sukses dan pengguna tetap terlibat.
Enable error tracking to catch and fix issues early.
Siapkan fitur rollback untuk segera menangani masalah-masalah apa pun.

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

Masalah Umum dan Tips

Setelah Anda menyelesaikan pengaturan platform dan Capgo, Anda mungkin akan menghadapi beberapa kesalahan umum. Berikut cara mengatasi mereka dengan cepat.

Masalah Pengaturan Lingkungan

CLI Tidak Ditemukan Error: Perintah npx cap gagal. Fix: Jalankan npm install --save @capacitor/cli @capacitor/core dan coba lagi.
Versi Node Tidak Sesuai Error: Perintah CLI gagal karena kesalahan versi Node.js. Fix: Pasang Node.js versi 14 atau lebih tinggi seperti yang dijelaskan dalam persyaratan pengaturan.

Masalah Konfigurasi

Konfigurasi Tidak Sesuai Error: Perubahan tidak berlaku. capacitor.config.json : Pastikan Anda untuk memeriksa Fix: Make sure the appId context webDir nilai-nilai sesuai dengan proyek Anda package.json dan folder keluaran build web.
Gagal Sinkronisasi Platform Gagal: Menjalankan npx cap sync menghasilkan konflik versi plugin. Perbaiki: Perbarui @capacitor/android dan @capacitor/ios to the same major version, then rerun the sync command.

Pembangunan dan Pengiriman

Pengembangan dan Pengiriman Proyek Error: iOS atau Android build gagal karena sertifikat atau keystore hilang. Fix: 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. Fix: Jalankan perintah build web Anda (misalnya, npm run build) sebelum sinkronisasi platform.

Live Update Masalah

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

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

Summary

Pengaturan Proyek

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

Berikut cara untuk memulai:

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

Untuk instruksi pengaturan rinci atau troubleshooting, lihat dokumentasi resmi Capacitor dan Capgo.

Teruskan dari Capacitor CLI: Panduan Pengaturan Proyek

Jika Anda menggunakan Capacitor CLI: Panduan Pengaturan Proyek untuk merencanakan dashboard dan operasi API, hubungkan dengan API Ringkasan untuk detail implementasi di API Ringkasan, __CAPGO_KEEP_0__ untuk detail implementasi di Pengenalan Kunci API untuk detail implementasi di Kunci API Peralatan untuk detail implementasi di Perangkat. Bundles untuk detail implementasi di Paket.