Lompat ke konten utama

Capacitor CLI: Panduan Pengaturan Proyek

Pelajari cara mengatur Capacitor CLI untuk membuat aplikasi iOS dan Android asli menggunakan teknologi web dalam beberapa langkah yang mudah.

Martin Donadieu

Martin Donadieu

Spesialis Konten

Capacitor CLI: Panduan Pengaturan Proyek

Ingin membuat aplikasi iOS dan Android dengan satu basis kode? Capacitor CLI mempercepat proses, memungkinkan Anda membuat aplikasi native menggunakan teknologi web. Berikut ini yang akan Anda 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_KEEP_0__ untuk pembaruan over-the-air instan. Capgo : Atasi masalah seperti kesalahan sinkronisasi atau gagal build.
  • Langkah-Langkah Utama untuk Memulai: __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

  1. Pasang Node.js, npm, JDK, Xcode, dan Android Studio.
  2. Jalankan npm install @capacitor/core @capacitor/cli dan inisialisasi proyek Anda.
  3. Tambahkan platform iOS dan Android menggunakan npx cap add ios dan npx cap add android.
  4. Opsional: Atur Capgo untuk pembaruan aplikasi hidup secara langsung. dan.

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

Pengenalan Capacitor Dokumentasi Situs Web Framework __CAPGO_KEEP_0__

Capacitor Framework Documentation Website

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

Node.js

  • (versi 14 atau lebih baru) dan __CAPGO_KEEP_0__ npm
  • __CAPGO_KEEP_1__ (versi 11 atau lebih baru)
  • Xcode (versi 12 atau lebih baru untuk pembangunan iOS)
  • Android Studio (untuk pembangunan Android)
  • Capacitor CLI (versi 6 atau 7)

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

CLI Langkah-Langkah Pemasangan

Pastikan Anda telah memiliki Node.js, npm, JDK, Xcode, dan Android Studio tersedia sebelum melanjutkan. 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 Proyek Baru untuk mengatur aplikasi Anda.

Membuat Proyek Baru

Untuk memulai dengan 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

Sunting file untuk mencakup pengaturan berikut: capacitor.config.json Setelah diperbarui, gunakan konfigurasi ini untuk mengatur __CAPGO_KEEP_0__ untuk proyek Anda.

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

Once updated, use this configuration to set up Capacitor for your project.

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

Menambahkan iOS dan Android

Mulai dengan menginstal paket spesifik platform menggunakan __CAPGO_KEEP_0__ __CAPGO_KEEP_1__:

Start by installing the necessary platform-specific packages using the 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 membutuhkan Android Studio Giraffe (2022.3.1+), JDK 17 atau lebih baru, dan Gradle 7.5 atau di atas.

Setelah terinstal, Anda perlu memperbarui target native Anda untuk mengikuti 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 menghandle dua tugas: cap sync Mengcopy aset web yang diperbarui ke platform native

  • Mengupdate konfigurasi dan plugin native untuk menyesuaikan perubahan terbaru
  • The

Konfigurasi IDE

Buka proyek-proyek khusus platform di IDE yang sesuai:

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

Pada Xcode:

  1. Pilih tim pengembangan.
  2. Konfigurasi sertifikat tanda tangan.
  3. Perbarui identifikasi paket Anda.

Pada Android Studio:

  1. Ubah ID aplikasi di build.gradle.
  2. Konfigurasi keystore untuk tanda tangan.
  3. Konfigurasi varian build debug dan release.

Setelah semuanya 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 Pemasangan

Capgo Dashboard Interface Live Update

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 pembaruan yang aman.
  • Pembaruan berjalan di latar belakang ketika aplikasi diluncurkan.
  • Alat analitik membantu mengukur tingkat kesuksesan pembaruan dan keterlibatan pengguna.
  • A opsi pengembalian satu-klik memungkinkan Anda untuk segera pulih dari pembaruan yang bermasalah.
  • Gunakan sistem saluran untuk peluncuran berjenjang dan pengujian beta. Menginstal __CAPGO_KEEP_0__

Ikuti langkah-langkah ini untuk memulai dengan Capgo:

Pasang Capgo __CAPGO_KEEP_1__

  1. Install the Capgo CLI:

    npm install --save @capgo/cli
  2. Mulai Capgo di proyek Anda:

    npx capgo init
  3. Buat dan rilis pembaruan:

    npm run build
    npx capgo release
  4. 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 berhasil dan pengguna tetap terlibat.
  • Aktifkan penggunaan tracking kesalahan untuk menangkap dan memperbaiki masalah-masalah awal.
  • Siapkan fitur rollback untuk segera menangani masalah-masalah yang mungkin timbul.

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 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. Perbaiki: Jalankan npm install --save @capacitor/cli @capacitor/core dan coba lagi.

  • Perbedaan Versi Node Error: Perintah CLI gagal karena kesalahan versi Node.js. Perbaiki: Instal Node.js versi 14 atau lebih tinggi seperti yang dijelaskan dalam persyaratan pengaturan.

Masalah Pengaturan

  • Tidak Sesuai Pengaturan Error: Perubahan pada capacitor.config.json tidak berlaku. Perbaiki: Pastikan Anda telah mengatur appId dan webDir nilai-nilai sesuai dengan folder keluaran web proyek Anda. package.json Masalah Sinkronisasi Platform

  • Pastikan Anda telah mengatur folder keluaran web proyek Anda dan folder output web. Error: Berjalan npx cap sync menghasilkan konflik versi plugin. Fix: Perbarui @capacitor/android dan @capacitor/ios ke versi mayor yang sama, kemudian jalankan perintah sinkronisasi lagi.

Pembangunan dan Pengembangan

  • Gagal Tanda Tangan Pembangunan Error: Pembangunan iOS atau Android 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. Perbaiki: Jalankan perintah build web Anda (misalnya npm run build) sebelum sinkronisasi platform.

Issue Pembaruan Langsung

  • Capgo Gagal Pembaruan Error: Pembaruan tidak muncul di aplikasi produksi. Perbaiki: Periksa kembali __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Anda. Capgo API kunci Anda dalam capacitor.config.json dan pastikan Anda mengarahkan saluran yang benar.

Untuk informasi lebih lanjut tentang pengaturan spesifik platform, kunjungi kembali bagian Pengaturan Platform. Jika Anda bekerja dengan pembaruan langsung, kunjungi Capgo Panduan Pengaturan untuk mendapatkan 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 langsung.

Ini cara Anda untuk memulai:

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

Untuk instruksi pengaturan rinci atau troubleshooting, cek 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, hubungkannya dengan Ringkasan API untuk detail implementasi dalam Ringkasan API Intro untuk detail implementasi dalam Intro Kunci API untuk detail implementasi dalam Kunci API Perangkat untuk detail implementasi di Perangkat, dan Paket untuk detail implementasi di Paket.

Perbaruan Hidup untuk Aplikasi Capacitor

Ketika bug layer web masih hidup, kirimkan perbaikan melalui Capgo bukan menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan perbaruan di latar belakang sementara perubahan native tetap dalam jalur ulasan normal.

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk menciptakan aplikasi mobile yang benar-benar profesional.