Migrasi dari App Center ke Capgo

Ringkasan Migrasi

• Capgo adalah layanan yang membantu tim developer mengirim update langsung ke aplikasi yang sudah dideploy.
• Aplikasi JS Capacitor yang dibuat dengan jQuery Mobile, Framework 7, Sencha, KendoUI, Ionic, atau bahkan solusi custom Anda sendiri bisa dimigrasi. Aplikasi Ionic yang sudah ada tidak diperlukan..
• Colt menawarkan layanan yang setara untuk App Center Build (build aplikasi Android/iOS). Untuk layanan Test, Diagnostics, dan Analytics.

Catatan

Jika aplikasi Anda masih menggunakan Cordova, Anda perlu migrasi ke Capacitor terlebih dahulu sebelum migrasi ke Capgo.

Dibangun oleh tim Ionic sebagai penerus spiritual Cordova, Capacitor memungkinkan development lebih dekat ke tooling dan kapabilitas native dengan tujuan memberikan user experience dan performa yang lebih baik.

Untungnya, proses migrasi ini mudah dan mayoritas plugin Cordova kompatibel dengan Capacitor. Mulai migrasi di sini.

Tentang Capgo

Capgo, menangani update aplikasi seiring waktu. Tim developer bisa fokus sepenuhnya pada fitur unik aplikasi mereka dan menyerahkan proses delivery aplikasi yang rumit kepada Capgo.

Capgo mengisi celah antara web delivery dan mobile.

Prasyarat Capgo

Seperti App Center, Capgo mendukung aplikasi yang di-host di repositori Git pada Azure DevOps, Bitbucket, GitHub, dan GitLab.

Instal Capgo CLI

catatan

Pastikan Node dan NPM sudah terinstal di komputer Anda sebelum melanjutkan. Selalu gunakan versi LTS terbaru Capgo tidak mendukung versi lama.

Buat package.json dan file konfigurasi Capacitor

catatan

Sebelum memulai, saya sarankan membuat perubahan di branch Git baru.

Sejak Capgo dibuat untuk mengotomasi aplikasi capacitor, dan membutuhkan satu file yang mungkin belum ada di aplikasi Anda. Pertama, buat capacitor.config.json file. Cara termudah untuk membuatnya adalah dengan menjalankan di root aplikasi Anda:

npm install @capacitor/core

Lalu, inisialisasi Capacitor menggunakan kuesioner CLI:

npx cap init

CLI akan mengajukan beberapa pertanyaan, dimulai dari nama aplikasi dan package ID yang ingin Anda gunakan untuk aplikasi Anda.

Terakhir, commit file baru ke proyek Anda:

git add .git commit -m "added package json and capacitor config" && git push

Migrasikan Code

Sekarang setelah Anda memiliki yang baru diperlukan Capgo file sudah siap, sekarang kita bisa fokus ke aplikasi itu sendiri. Capgo mengharapkan seluruh aplikasi yang sudah di-build berada di dalam direktori bernama dist.

Jika code hasil build Anda tidak berada di dalam dist direktori, ubah nilai ini di file konfigurasi Capacitor.

Berikut adalah gambaran struktur direktori aplikasi Anda:

Konfigurasi Capgo

Setelah aplikasi Anda siap untuk Capgo integrasi, saatnya mendaftar dan dapatkan key API untuk upload versi pertama Anda! Mulai dengan signing up for a Capgo account.

Setelah login ke Capgo, buka halaman Account, lalu klik API key, kemudian klik key ‘write’ untuk menyalinnya ke clipboard.

Install Capgo SDK

Dari command line, langsung di dalam root folder aplikasi Capacitor Anda, jalankan perintah berikut:

npm i @capgo/capacitor-updater && npx cap sync Untuk menginstal plugin ke aplikasi Capacitor Anda.

Kemudian tambahkan code ini ke aplikasi Anda sebagai pengganti CodePush:

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Ini akan memberi tahu native plugin bahwa instalasi berhasil.

Deploy Live Updates (Alternatif CodePush)

Fitur Live Update bekerja dengan menggunakan Capgo SDK di aplikasi native Anda untuk listen ke Deploy Channel Destination tertentu. Saat build Web di-assign ke Channel Destination, update tersebut akan di-deploy ke perangkat pengguna yang menjalankan binary yang dikonfigurasi untuk listen ke Channel Destination tersebut.

Login ke Capgo CLOUD

Pertama, gunakan all apikey yang ada di akun Anda untuk login dengan CLI:

npx @capgo/cli@latest login YOURKEY

Tambahkan app pertama Anda

Mari kita mulai dengan membuat app di Capgo Cloud menggunakan CLI.

npx @capgo/cli@latest app add

Perintah ini akan menggunakan semua variabel yang ditentukan dalam file config Capacitor untuk membuat app.

Upload bundle pertama Anda

Jalankan perintah untuk build code Anda dan kirim ke Capgo dengan:

npx @capgo/cli@latest bundle upload --channel production

Secara default, nama versi akan mengikuti yang ada di package.json Anda.

Cek Capgo jika build tersedia.

Anda bahkan bisa mencobanya dengan app sandbox mobile saya.

Jadikan channel default

Setelah Anda mengirimkan aplikasi ke Capgo, Anda perlu membuat channel Anda default agar aplikasi bisa menerima update dari Capgo.

npx @capgo/cli@latest channel set production -s default

Konfigurasikan aplikasi untuk memvalidasi update

Tambahkan konfigurasi ini ke file JavaScript utama Anda.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Lalu jalankan npm run build && npx cap copy untuk memperbarui aplikasi Anda.

Terima Live Update di Perangkat

Agar aplikasi Anda menerima live update dari Deploy, Anda perlu menjalankan aplikasi di device atau emulator. Cara termudah adalah dengan menjalankan perintah berikut untuk membuka aplikasi lokal di emulator atau device yang terhubung ke komputer Anda.

npx cap run [ios | android]

Buka aplikasi, pindahkan ke background lalu buka kembali, Anda akan melihat di logs bahwa aplikasi sudah melakukan update.

Selamat! 🎉 Anda berhasil men-deploy Live Update pertama Anda. Ini baru awal dari apa yang bisa Anda lakukan dengan Live Updates. Untuk info lebih lanjut, lihat dokumentasi Live Updates.

Hapus Dependensi App Center

Setelah mengintegrasikan layanan Capgo, Anda sebaiknya menghapus semua referensi ke App Center. Selain praktik terbaik untuk menghapus code/services yang tidak terpakai, menghapus SDK juga dapat memperkecil ukuran aplikasi Anda.

Pertama, buka terminal lalu uninstall plugin App Center:

    cordova plugin remove cordova-plugin-appcenter-analytics cordova-plugin-appcenter-crashes cordova-plugin-code-push

Selanjutnya, buka config.xml dan hapus baris berikut preference nilai berikut. Bentuknya akan terlihat seperti:

    <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000000" /><preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" /><preference name="CodePushPublicKey" value="YOUR-PUBLIC-KEY" />

Jika Anda menggunakan App Center Analytics di aplikasi Anda, hapus bagian berikut preferences elemen berikut: APPCENTER_ANALYTICS_ENABLE_IN_JS dan APPCENTER_CRASHES_ALWAYS_SEND.

Hapus berikut ini <access /> elemen berikut:

    <access origin="https://codepush.appcenter.ms" /><access origin="https://codepush.blob.core.windows.net" /><access origin="https://codepushupdates.azureedge.net" />

Hapus referensi CodePush di CSP meta tag di index.html file (https://codepush.appcenter.ms):

    <meta http-equiv="Content-Security-Policy" content="default-src https://codepush.appcenter.ms 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

Terakhir, di dalam aplikasi Anda, hapus semua code referensi ke layanan App Center, seperti codePush.sync();.

Langkah Berikutnya

Anda telah bermigrasi dari App Center ke Capgo, memanfaatkan Live Updates. Ini baru awal dari apa yang bisa Anda lakukan dengan Capgo. Jelajahi sisa layanan yang mencakup Channel (lingkungan multiple) dan override. Integrasi Cloud CLI, gunakan Capgo di platform CI/CD pilihan Anda (seperti GitHub Action, GitLab, Jenkins, dan lainnya).

Kirim update aplikasi otomatis

Jika code Anda dihosting di GitHub, Anda dapat mengatur build dan rilis otomatis dalam beberapa langkah tambahan, berkat GitHub actions.

Saya telah membuat artikel kedua untuk memungkinkan Anda melakukannya.

Kredit

Terima kasih banyak kepada Ionic, artikel ini berdasarkan pada artikel ini yang ditulis ulang dengan chat-gpt-3 dan disesuaikan.

Lanjutkan dari Migrasi App Center ke Capgo

Jika Anda menggunakan Migrasi dari App Center ke Capgo untuk merencanakan migrasi dan operasional enterprise, hubungkan dengan Capgo Enterprise untuk workflow produk di Capgo Enterprise, Alternatif Plugin Ionic Enterprise untuk workflow produk di Alternatif Plugin Ionic Enterprise, Alternatif Capgo untuk alur kerja produk di Alternatif Capgo, Konsultasi Capgo untuk alur kerja produk di Capgo Consulting, dan Dukungan Premium Capgo untuk alur kerja produk di Capgo Premium Support.