Capacitor CLI: Panduan Pengaturan Proyek

Ingin membuat aplikasi iOS dan Android dengan satu basis kode? Capacitor CLI simplifies the process, letting you create native apps using web technologies. Here’s what you’ll learn:

Pengaturan Cepat: Install Capacitor CLI and initialize your project in minutes.
Integrasi Platform: Tambahkan dukungan iOS dan Android dengan perintah sederhana.
Pembaruan Langsung: Gunakan Capgo untuk pembaruan instan secara daring. Capgo __CAPGO_KEEP_0__
__CAPGO_KEEP_1__: Atasi masalah seperti kesalahan sinkronisasi atau gagal build.

Langkah Utama untuk Memulai:

Pasang 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: Atur Capgo untuk update live Aplikasi update.

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

Pengenalan Capacitor konteks: Halaman/area: Halaman produk update live. Peran: Judul bagian atau halaman. Dilihat di: halaman live-update.astro. Simpan Capgo produk/merek dan istilah pengembang secara tepat. Pesan kunci `live_update_platform_capacitor_title` (Judul Platform Update Live Capacitor)

Capacitor Framework Documentation Website

Player Video YouTube

Persyaratan Pengaturan

Untuk memulai, pastikan Anda telah menginstal alat-alat berikut: Node.js (versi 14 atau lebih baru) dan npm
JDK Java (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: Jika Anda ingin mengaktifkan pembaruan langsung, lihatlah “Capgo Panduan Pengaturan” di bawah.

CLI Langkah Pemasangan

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

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

Perintah ini menginstal Capacitor dan mengatur komponen inti.

Setelah menyelesaikan langkah ini, lanjutkan ke Membuat Projek Baru untuk mengatur aplikasi Anda.

Membuat Projek Baru

Untuk memulai dengan projek 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 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 projek Anda.

Pengaturan Platform

Sekarang bahwa pengaturan projek 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

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 memerlukan Android Studio Giraffe (2022.3.1+), JDK 17 atau lebih baru, dan Gradle 7.5 atau lebih tinggi. 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 7.5 atau lebih tinggi. Setelah itu, Anda perlu memperbarui target native Anda untuk mengikuti perubahan aplikasi web Anda. Pembaruan Platform

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

Perintah ini menghandle dua tugas:

npm run build
npx cap sync

Perintah ini menghandle dua tugas: cap sync Perintah ini menghandle dua tugas:

Menyalin 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

In Xcode:

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

In Android Studio:

Ubah ID aplikasi. build.gradle.
Konfigurasi keystore untuk tanda tangan.
Tetapkan varian pembangunan debug dan release.

Ketika semua konfigurasi telah selesai, bangunlah proyek menggunakan npx cap build ios atau npx cap build androidUntuk memastikan semua aset tetap up-to-date, jangan lupa menjalankan npx cap sync lagi.

Capgo __CAPGO_KEEP_0__ Dashboard Interface Live Update

Set up Capgo untuk memungkinkan pembaruan instan secara daring untuk aplikasi Anda.

Fitur Utama Capgo

Capgo menawarkan beberapa alat untuk mempercepat pembaruan aplikasi:

Capgo offers several tools to streamline app updates:

menggunakan pengiriman pembaruan yang aman. __CAPGO_KEEP_0__
Perbarui berjalan di latar belakang ketika aplikasi diluncurkan.
Alat analitik membantu mengikuti tingkat kesuksesan perbarui dan partisipasi pengguna.
Satu opsi pengembalian ke awal memungkinkan Anda untuk segera pulih dari perbarui yang bermasalah.
Pakai sistem saluran untuk peluncuran berjenjang dan pengujian beta. Memasang __CAPGO_KEEP_0__

Capgo

Ikuti langkah-langkah ini untuk memulai dengan Capgo:

Pasang Capgo CLI:
```
npm install --save @capgo/cli
```
Mulai Capgo dalam proyek Anda:
```
npx capgo init
```
Bangun dan rilis pembaruan:
```
npm run build
npx capgo release
```
Buka aplikasi untuk mengaktifkan 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.
Aktifkan pengawasan kesalahan untuk menangkap dan memperbaiki masalah-masalah awal.
Siapkan fitur rollback untuk segera menangani masalah-masalah.

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

Masalah Umum dan Tips

Setelah Anda menyelesaikan Capgo dan pengaturan platform, Anda mungkin mengalami beberapa kesalahan umum. Berikut cara mengatasi masalah tersebut dengan cepat.

Masalah Pengaturan Lingkungan

CLI Tidak Ditemukan Error: Perintah npx cap gagal. Solusi: Jalankan npm install --save @capacitor/cli @capacitor/core dan coba lagi.
Perbedaan Versi Node 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 Pengaturan

Tidak Sesuai Konfigurasi Error: Perubahan tidak berlaku. capacitor.config.json Fix : Pastikan nilai dan appId nilai tersebut sesuai dengan proyek Anda. webDir values package.json dan folder keluaran build web.
Platform Sync Errors Error: Running npx cap sync menghasilkan konflik versi plugin. Fix: Update @capacitor/android dan @capacitor/ios ke versi mayor yang sama, lalu jalankan perintah sinkronisasi lagi.

Build dan Deployment

Build Signing Failures Error: iOS atau Android build gagal karena sertifikat atau keystore yang 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.

Masalah Update Langsung

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

For informasi lebih lanjut tentang pengaturan platform khusus, kunjungi bagian Pengaturan Platform. Jika Anda bekerja dengan perbarui hidup, kunjungi Panduan Pengaturan 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 perbarui hidup.

Ini cara untuk memulai:

Pakai Capacitor CLI untuk menginisialisasi proyek Anda.
Konfigurasi ID paket aplikasi Anda dan definisikan direktori output 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 Overview untuk detail implementasi di API Overview, Intro untuk detail implementasi di Intro, Kunci API untuk detail implementasi di Kunci API Perangkat untuk detail implementasi di Perangkat, dan Paket untuk detail implementasi di Paket.