Lompat ke konten utama
Capacitor

Mengupdate dari Capacitor 4 ke Capacitor 5: Panduan Langkah demi Langkah

Pelajari cara mengupdate proyek Anda dari Capacitor 4 ke Capacitor 5 dengan perubahan yang minimal, termasuk mengupdate plugin resmi dan alat yang diperlukan.

Martin Donadieu

Martin Donadieu

Spesialis Konten

Mengupdate dari Capacitor 4 ke Capacitor 5: Panduan Langkah demi Langkah

Dibandingkan dengan pembaruan sebelumnya, transisi dari Capacitor 4 ke Capacitor 5 melibatkan perubahan yang minimal. Panduan ini menyediakan instruksi langkah demi langkah untuk mengupdate proyek Anda ke Capacitor 5, serta daftar perubahan yang memecahkan untuk plugin resmi.

Perhatian: Capacitor 5 memerlukan NodeJS 16 atau lebih tinggi, karena Node 12 telah mencapai akhir masa pakai dan Node 14 akan mencapai akhir masa pakai pada tanggal 30 April 2023. Disarankan untuk menggunakan versi LTS terbaru dari NodeJS.

  1. Pasang versi __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ di proyek Anda: latest version of the Capacitor CLI in your project:

    npm i -D @capacitor/cli@latest
  2. Jalankan perintah berikut untuk membiarkan CLI menghandle migrasi:

    npx cap migrate

    Jika ada langkah migrasi yang tidak dapat dicapai, informasi tambahan akan disediakan dalam output terminal. Langkah migrasi manual tercantum di bawah ini.

  3. Jika Anda telah menginstal ekstensi VS Code, periksa bagian rekomendasi ekstensi untuk menemukan opsi untuk memigrasikan proyek Anda ke Capacitor 5.

Mengupgrade Capacitor 4 Proyek iOS ke Capacitor 5

  1. Mengupgrade Xcode: Capacitor 5 memerlukan Xcode 14.1+.

  2. Mengupdate .gitignore: Buatlah perubahan berikut pada file Anda .gitignore file:

    - App/Podfile.lock
    + App/output
  3. Mengupdate Assets untuk menggunakan ikon aplikasi tunggal: Xcode 14 mendukung ikon aplikasi tunggal berukuran 1024x1024. Bersihkan AppIcon.appiconset Anda dengan menghapus semua ukuran yang tidak perlu.

Mengupgrade Capacitor 4 Proyek Android ke Capacitor 5

  1. Mengupgrade Android Studio: Capacitor 5 memerlukan Android Studio Flamingo | 2022.2.1 atau lebih baru karena penggunaan Gradle 8, yang memerlukan Java JDK 17. Java 17 dikirimkan bersama Android Studio Flamingo, jadi tidak perlu download tambahan.

  2. Jalankan Asisten Perbarui AGP: Android Studio dapat membantu dengan beberapa perubahan terkait Gradle dan memindahkan paket ke file build. Untuk memulai, jalankan Tools -> AGP Upgrade Assistant.

  3. Perbarui Variabel Proyek Android: Dalam file Anda, perbarui nilai-nilai Anda ke minimum baru sebagai berikut: variables.gradle Perbarui Layanan Google

    minSdkVersion = 22
    compileSdkVersion = 33
    targetSdkVersion = 33
    androidxActivityVersion = '1.7.0'
    androidxAppCompatVersion = '1.6.1'
    androidxCoordinatorLayoutVersion = '1.2.0'
    androidxCoreVersion = '1.10.0'
    androidxFragmentVersion = '1.5.6'
    coreSplashScreenVersion = '1.0.0'
    androidxWebkitVersion = '1.6.1'
    junitVersion = '4.13.2'
    androidxJunitVersion = '1.1.5'
    androidxEspressoCoreVersion = '3.5.1'
    cordovaAndroidVersion = '10.1.1'
  4. Perbarui Plugin Gradle ke 8.0.0:

    # build.gradle
    dependencies {
    -       classpath 'com.google.gms:google-services:4.3.13'
    +       classpath 'com.google.gms:google-services:4.3.15'
    }
  5. Perbarui Penggabung Gradle ke 8.0.2:

    # build.gradle
    dependencies {
    -       classpath 'com.android.tools.build:gradle:7.2.1'
    +       classpath 'com.android.tools.build:gradle:8.0.0'
    }
  6. Nonaktifkan Jetifier:

    # gradle-wrapper.properties
    distributionBase=GRADLE_USER_HOME
    distributionPath=wrapper/dists
    - distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
    + distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-all.zip
    zipStoreBase=GRADLE_USER_HOME
    zipStorePath=wrapper/dists
  7. Pindahkan paket ke:

    # gradle.properties
    android.useAndroidX=true
    - android.enableJetifier=true
  8. Perbarui androidScheme build.gradle:

    # AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
    - <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    -     package="[YOUR_PACKAGE_ID]">
    + <manifest xmlns:android="http://schemas.android.com/apk/res/android">
    # build.gradle
    android {
    +     namespace "[YOUR_PACKAGE_ID]"
          compileSdkVersion rootProject.ext.compileSdkVersion
  9. Perbarui Penggabung Gradle ke 8.0.2: Di Capacitor 6, https akan menjadi pengaturan default untuk androidScheme untuk aplikasi yang sudah ada untuk memungkinkan aplikasi Capacitor menggunakan fitur Autofill sistem dengan lebih baik. Untuk menghindari kehilangan data sebagai hasil dari perubahan ini, atur scheme ke http sudah sekarang, bahkan jika itu adalah pengaturan default saat ini.

    {
      server: {
        androidScheme: "http"
      }
    }
  10. Update Versi Kotlin: Jika proyek Anda menggunakan Kotlin, update kotlin_version ke '1.8.20'.

Pengubah Fungsi Plugin

Fungsi pengubah plugin yang telah diubah atau dihapus. Perbarui code Anda sesuai:

  • Aksi Sheet
  • Pengguna Browser
  • Kamera
  • Perangkat
  • Lokasi Geografis
  • Peta Google
  • Pemberitahuan Lokal
  • Pemberitahuan Push
  • Bar Status

Sheet Aksi

  • Perbarui androidxMaterialVersion variabel ke 1.8.0.

Browser

  • Perbarui androidxBrowserVersion variabel ke 1.5.0.

Kamera

  • Untuk Android 13, tambahkan izin membaca gambar media (<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>) di AndroidManifest.xml.
  • Perbarui androidxMaterialVersion ke 1.8.0.
  • Perbarui androidxExifInterfaceVersion ke 1.3.6.

Perangkat

  • Ubah DeviceId.uuid ke DeviceId.identifier.
  • Pada iOS 16+, DeviceInfo.name akan mengembalikan nama perangkat umum kecuali Anda menambahkan izin yang tepat __CAPGO_KEEP_0__.

Lokasi Geografis

  • Perbarui playServicesLocationVersion ke 21.0.1.

Peta Google

  • Perbarui variabel-variabel berikut:
    • googleMapsPlayServicesVersion ke 18.1.0.
    • googleMapsUtilsVersion ke 3.4.0.
    • googleMapsKtxVersion ke 3.4.0.
    • googleMapsUtilsKtxVersion ke 3.4.0.
    • kotlinxCoroutinesVersion ke 1.6.4.
    • androidxCoreKTXVersion ke 1.10.0.
    • kotlin_version ke 1.8.20.

Pemberitahuan Lokal

  • Untuk Android 13, periksa izin runtime baru diperlukan untuk mengatur pemberitahuan lokal ketika menargetkan SDK 33. Panggil checkPermissions() dan requestPermissions() sesuai.

Pemberitahuan Push

  • Untuk Android 13, periksa izin runtime baru diperlukan untuk menerima pemberitahuan push ketika menargetkan SDK 33. Panggil checkPermissions() dan requestPermissions() sesuai.
  • Perbarui firebaseMessagingVersion variabel ke 23.1.2.

Status Bar

  • Pada iOS, animasi status bar bawaan telah diubah menjadi FADE.

Dengan mengikuti langkah-langkah ini dan memperbarui code Anda sesuai, Anda seharusnya telah berhasil memperbarui proyek Anda dari Capacitor 4 ke Capacitor 5. Pastikan untuk menguji aplikasi Anda secara menyeluruh untuk memastikan bahwa semua fitur dan plugin berfungsi seperti yang diharapkan.

Teruskan dari Migrasi dari Capacitor 4 ke Capacitor 5: Panduan Langkah demi Langkah

Jika Anda menggunakan Migrasi dari Capacitor 4 ke Capacitor 5: Panduan Langkah demi Langkah untuk merencanakan kerja plugin native, hubungkannya dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo Plugin-Plugin Capacitor oleh Capgo untuk detail implementasi di Plugin-Plugin Capacitor oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Perusahaan Ionic untuk alur kerja produk di Alternatif Plugin Perusahaan Ionic, dan Capgo Pembangunan Natively untuk alur kerja produk di Capgo Pembangunan Natively.

Pembaruan Langsung untuk Capacitor apps

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

Mulai Sekarang

Terbaru dari Blog Kami

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