Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Memulai Layanan Ionic: Terapkan

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Salah satu kekuatan Ionic adalah dalam layanan yang ditawarkannya di atas framework. Ini termasuk layanan untuk mengautentikasi pengguna aplikasi Anda, pemberitahuan push, dan analitik. Dalam seri ini, kami belajar tentang layanan tersebut dengan membuat aplikasi yang memanfaatkannya.

Dalam posting ini, kita akan melihat Ionic Deploy. Layanan ini memungkinkan Anda mempublikasikan perubahan ke aplikasi Ionic Anda tanpa perlu mengkompilasi ulang dan mengirimkannya kembali ke app store. Ini sangat berguna untuk dengan cepat mendorong perbaikan bug, pembaruan kecil dan perubahan kosmetik lainnya ke aplikasi. Dengan fitur "Deploy Channels", Anda juga dapat melakukan pengujian A/B dengan memperkenalkan perubahan kode yang berbeda ke saluran penerapan yang berbeda.

Tidak semua perubahan yang ingin Anda perkenalkan ke aplikasi Anda dapat didorong menggunakan Ionic Deploy. Hanya perubahan pada HTML, CSS, JavaScript, dan aset Anda di bawah direktori www dapat didorong dengan cara ini. Perubahan biner seperti pembaruan untuk versi platform Cordova, plugin Cordova (baik memperbarui yang sudah ada atau menambahkan yang baru), dan aset aplikasi seperti ikon dan splash screen tidak dapat didorong menggunakan Ionic Deploy.

Bagaimana itu bekerja

Di aplikasi Ionic Anda, Anda dapat memiliki kode yang akan memeriksa penyebaran yang tersedia (pembaruan). Secara default, ini akan memeriksa penerapan di saluran production. Tetapi Anda juga dapat menentukan saluran lain untuk menerima pembaruan dari.

Anda kemudian dapat mendorong perubahan Anda menggunakan perintah ionic upload. Ini akan mengunggah perubahan Anda ke Ionic Cloud. Setelah diunggah, Anda dapat memilih saluran mana yang ingin Anda terapkan, dan apakah akan diterapkan sekarang atau nanti.

Menerapkan ke saluran yang dipantau aplikasi Anda akan memicu kode di aplikasi Anda untuk dieksekusi. Kode itu kemudian bertanggung jawab untuk mengunduh pembaruan, mengekstraknya, dan memuat ulang aplikasi untuk menerapkan perubahan.

Apa yang Akan Anda Bangun

Di pos ini, Anda akan menggunakan baris perintah untuk mendorong perubahan dan menguji apakah penerapan berfungsi sebagaimana yang diharapkan. Untuk menjaga semuanya tetap sederhana, perubahan yang akan kami perkenalkan akan lebih banyak pada UI. Untuk setiap penerapan, kami akan mengubah nomor versi yang ditampilkan untuk aplikasi. Kami juga akan mengubah gambar yang ditampilkan di aplikasi untuk menunjukkan bahwa aset dapat diperbarui juga.

Pengaturan

Sekarang setelah Anda memiliki gagasan tentang cara kerja Ionic Deploy dan apa yang akan Anda bangun, saatnya untuk mengotori tangan Anda dengan benar-benar membuat aplikasi yang menggunakan Ionic Deploy. Mulai dengan bootstrap aplikasi Ionic baru:

Perintah di atas akan membuat aplikasi baru menggunakan template tab. Navigasi di dalam direktori deployApp setelah selesai menginstal:

Selanjutnya, Anda perlu menginstal paket @ionic/cloud-angular. Ini adalah pustaka JavaScript untuk layanan Ionic Cloud. Ini memungkinkan kita untuk berinteraksi dengan layanan Ionic Deploy dan layanan Ionic lainnya melalui kode JavaScript.

Setelah selesai menginstal, Anda sekarang dapat menginisialisasi aplikasi Ionic baru berdasarkan aplikasi ini. Sebelum Anda melakukannya, pastikan Anda sudah memiliki akun Ionic. Alat baris perintah akan meminta Anda untuk masuk dengan akun Ionic Anda jika Anda belum melakukannya.

Ini akan membuat aplikasi baru bernama "deployApp" (atau apa pun yang Anda beri nama aplikasi saat Anda menjalankan boot aplikasi Ionic baru) di bawah dasbor aplikasi Ionic Anda.

Setelah Anda memverifikasi bahwa aplikasi terdaftar di dasbor Ionic Anda, kembali ke terminal dan instal plugin Deploy:

Perhatikan bahwa plugin ini adalah yang benar-benar mengangkat berat. Paket @ionic/cloud-angular hanya mengekspos API yang diperlukan untuk dengan mudah bekerja dengan layanan Ionic di dalam aplikasi Ionic.

Bekerja dengan Deploy

Sekarang setelah Anda melakukan semua pengaturan yang diperlukan, saatnya untuk menambahkan kode untuk memeriksa dan menerapkan pembaruan. Tetapi sebelum Anda melakukan itu, pertama-tama layani aplikasi melalui peramban Anda:

Ini memungkinkan Anda untuk memeriksa apakah kode yang Anda tambahkan berfungsi atau tidak. Dengan cara ini Anda dapat melakukan koreksi yang diperlukan segera setelah Anda melihat kesalahan.

Buka file src/app/app.module.ts. Di bawah impor SplashScreen, mengimpor layanan yang diperlukan untuk bekerja dengan Ionic Cloud:

Selanjutnya, tambahkan app_id dari aplikasi Ionic Anda. Anda dapat menemukannya di dasbor aplikasi Ionic Anda, tepat di bawah nama aplikasi.

Setelah Anda menambahkan itu, Anda sekarang dapat memasukkannya sebagai salah satu modul aplikasi:

Selanjutnya, buka file src/app/app.component.ts. Tepat di bawah Impor TabsPage, meliputi:

Di constructor(), tambahkan layanan yang kami impor sebelumnya:

Menyetel Kanal Penempatan

Karena kami masih mengembangkan aplikasi, setel saluran penerapan ke dev:

Kemudian, jika Anda ingin beralih ke saluran produksi, Anda dapat menghapus baris ini karena production adalah saluran default untuk penerapan. Jika Anda telah membuat saluran lain, Anda juga dapat memasukkan namanya di sini.

Bekerja dengan Snapshots

Anda dapat mengakses serangkaian foto yang sebelumnya telah diunduh oleh aplikasi. Variabel snapshots adalah larik yang berisi ID dari masing-masing snapshot.

Kami tidak akan benar-benar menggunakan snapshot untuk aplikasi ini, tetapi sebaiknya Anda tahu bahwa aplikasi menyimpan jenis informasi ini untuk digunakan nanti. Dalam contoh di bawah ini, kita akan melihat daftar foto-foto lama dan menghapus masing-masing untuk membebaskan beberapa ruang pada perangkat.

Memeriksa Pembaruan

Untuk memeriksa pembaruan, gunakan metode check(). Ini mengembalikan nilai boolean yang memberi tahu Anda apakah snapshot baru tersedia atau tidak. Secara default, penerapan terbaru akan membuat cuplikan baru. Jadi hanya penerapan terbaru yang akan diterapkan jika Anda mendorong dua pembaruan secara berurutan.

Jika snapshot tersedia untuk diunduh, Anda bisa mendapatkan informasi tambahan tentang itu dengan memanggil metode getMetaData(). Metadata ini dapat ditambahkan ke penyebaran melalui dasbor aplikasi Ionic. Pasangan kunci-nilai dapat ditambahkan di sini, dan masing-masing menjadi tersedia sebagai properti untuk objek metadata. Nantinya, kami akan menggunakan metadata untuk menyesuaikan pesan yang ditampilkan di aplikasi setiap kali pembaruan baru tersedia.

Selanjutnya, tunjukkan pesan peringatan konfirmasi untuk membiarkan pengguna memutuskan apakah mereka ingin mengunduh pembaruan atau tidak:

Anda mungkin khawatir bahwa ini akan mengganggu pengguna jika mereka terus menerima permintaan untuk memperbarui aplikasi mereka jika mereka tetap merespons "Tidak". Lebih sering bahwa tidak, meskipun, ini sebenarnya hal yang baik. Seharusnya tidak ada alasan bagi pengguna untuk menolak pembaruan jika itu akan meningkatkan pengalaman mereka.

Mengunduh dan Menerapkan Pembaruan

Ketika pengguna setuju, Anda dapat melanjutkan dan mengunduh pembaruan. Ini mungkin memerlukan waktu beberapa saat tergantung pada koneksi internet Anda dan perangkat Anda. Setelah pembaruan diunduh, tunjukkan loader untuk menarik perhatian pengguna saat mengekstraksi. Setelah diekstraksi, muat ulang aplikasi dan sembunyikan loader.

Lihatlah file app.components.ts yang diperbarui yang akan terlihat setelah semua perubahan tersebut.

Menginstal Aplikasi pada Perangkat

Sekarang kode untuk memeriksa penyebaran ditambahkan, kita dapat membangun aplikasi dan menginstalnya di perangkat. Sisa dari perubahan yang akan kami perkenalkan akan terutama didorong melalui layanan Ionic Deploy.

Lanjutkan dan tambahkan platform android ke proyek Ionic Anda dan buat file .apk dengan perintah berikut:

Ini akan membuat file android-debug.apk di dalam folder platforms/android/build/outputs/apk. Salin ke perangkat Anda dan instal.

Mendorong Perubahan

Sekarang saatnya bagi kita untuk mendorong beberapa perubahan ke aplikasi. Untuk mencobanya, cukup buat beberapa perubahan kecil pada UI aplikasi. Dan sekarang Anda dapat mengunggah perubahan:

Menambahkan Metadata

Setelah selesai diunggah, entri baru akan tercantum dalam Recent Activity Anda. Klik tautan Edit entri itu. Ini akan memungkinkan Anda untuk menambahkan catatan, informasi dan metadata versi ke rilis khusus tersebut. Selalu ada baiknya untuk menambahkan catatan sehingga Anda tahu apa itu rilis khusus. Setelah Anda melakukannya, klik tab Metadata dan tambahkan yang berikut:

add metadata

Kemudian klik tombol Save untuk melakukan perubahan Anda. Terakhir, klik tombol Deploy untuk menyebarkan rilis. Setelah aplikasi mengambil perubahan, metadata yang Anda berikan juga tersedia.

Anda dapat melihat bahwa sekarang menampilkan nomor versi rilis:

version number

Versi

Terkadang Anda akan mendorong pembaruan dengan Ionic Deploy, tetapi juga membangun kembali dan mengirimkan paket-paket tersebut ke aplikasi yang dibundel di App Store. Hati-hati, karena Ionic tidak tahu bahwa aplikasi Anda sudah berisi pembaruan itu, dan aplikasi Anda akan meminta pengguna untuk mengunduh pembaruan terbaru saat pertama kali aplikasi Anda dijalankan.

Fitur versi dapat membantu mencegah hal ini. Dengan fitur versi, Anda dapat menentukan versi aplikasi yang dapat menerima pembaruan:

  • Minimum: hanya digunakan jika versi aplikasi saat ini lebih tinggi atau sama dengan versi ini.
  • Maximum: hanya digunakan jika versi aplikasi saat ini sama atau lebih rendah dari versi ini.
  • Equivalent: jangan lakukan penerapan jika versi aplikasi saat ini sama dengan versi ini.

Anda dapat menambahkan informasi versi dengan mengklik tautan EDIT pada rilis tertentu, dan kemudian pergi ke tab VERSIONING. Dari sana, Anda dapat menentukan versi (baik iOS atau Android) yang ingin Anda targetkan.

Versioning

Apa yang dilakukan Ionic adalah membandingkan versi ini dengan yang Anda tentukan dalam file config.xml Anda:

Jika versi aplikasi berada di antara minimum dan maximum yang ditentukan, rilis akan diambil. Dan jika versi aplikasi sama dengan nilai versi equivalent, rilis diabaikan. Jadi untuk screenshot di atas, jika versi yang ditunjukkan dalam file config.xml adalah 0.0.1, rilis akan diabaikan oleh aplikasi.

Pembaruan Aset

Perubahan selanjutnya yang akan kita lakukan adalah menampilkan gambar.

Hal pertama yang perlu Anda lakukan adalah mencari gambar. Taruh di dalam folder src/assets/img dan hubungkan dari file src/pages/home/home.html:

Unggah perubahan Anda sebagai rilis baru ke Ionic Deploy.

Setelah diunggah, buka dasbor aplikasi Ionic Anda dan perbarui rilis dengan catatan dan version yang sesuai di metadata. Simpan perubahan dan terapkan.

Membuka aplikasi sekarang harus mengambil rilis baru ini, dan memperbarui itu akan menerapkan perubahan ke UI.

asset changes

Menerapkan Saluran

Secara default, Ionic Deploy memiliki tiga saluran yang dapat Anda terapkan ke: dev, staging, dan production. Tetapi Anda juga dapat membuat saluran baru untuk aplikasi Anda untuk mendengarkan pembaruan. Anda dapat melakukannya dengan mengeklik ikon roda gigi di tab Ionic Deploy di dasbor aplikasi Anda:

Create Deploy Channel

Ini berguna untuk hal-hal seperti pengujian A/B, sehingga Anda dapat mendorong perubahan khusus hanya untuk pengguna tertentu.

Jangan lupa untuk memperbarui kode Anda untuk menggunakan saluran penerapan spesifik:

Rollback

Jika Anda telah mendorong sesuatu yang seharusnya tidak Anda miliki, Anda bisa menggunakan fitur rollback. Dengan fitur ini, Anda dapat mendorong rilis sebelumnya kembali ke pengguna Anda.

Perhatikan bahwa Anda tidak dapat memperbaiki kode yang rusak dengan menggulir kembali! Misalnya, jika Anda memiliki kesalahan sintaks dalam kode JavaScript Anda, itu akan merusak seluruh aplikasi dan kode untuk memeriksa pembaruan tidak akan pernah berjalan. Untuk memperbaiki kesalahan semacam itu, satu-satunya hal yang dapat Anda lakukan adalah merilis versi baru di app store.

Anda dapat melakukan rollback dengan mengeklik tautan Roll back to here di sebarang deploy yang diberikan.

Rollback

Ini akan meminta Anda untuk mengkonfirmasi apakah Anda ingin memutar kembali atau tidak. Setelah dikonfirmasi, itu akan secara otomatis ditetapkan sebagai rilis saat ini. Jadi kode untuk mengambil rilis baru akan mengenalinya sebagai rilis terbaru dan akan meminta pengguna untuk memperbarui. Rolled back releases akan memiliki ikon refresh oranye.

Anda juga dapat menerapkan rilis tertentu dengan mengklik tautan Deploy di samping rilis yang ingin Anda terapkan.

Menggunakan Hook Git

Anda dapat mengotomatiskan penyebaran pembaruan aplikasi pada Ionic Deploy dengan Git hook. Git hook memungkinkan Anda menjalankan skrip sebelum atau setelah peristiwa Git spesifik seperti komit, push, dan terima. Dalam hal ini kita akan menggunakan hook pre-push untuk mengunggah perubahan kita ke Ionic Cloud tepat sebelum perintah git push melakukan fungsinya.

Mulai dengan mengganti nama contoh skrip pra-push ke nama sebenarnya yang diakui oleh Git:

Buka file di editor teks Anda dan ganti kontennya dengan yang berikut:

Sekarang komit perubahan Anda dan dorong mereka ke repo jarak jauh:

Tepat sebelum perintah git push dijalankan, ionic upload akan dieksekusi.

Anda juga dapat secara otomatis menyebarkan rilis jika Anda ingin:

Ini tidak akan berfungsi untuk contoh kami, karena Anda tidak dapat menentukan metadata!

Jika Anda ingin mengambil proses penyebaran lebih lanjut, saya sarankan Anda memeriksa API HTTP untuk Ionic Deploy. Ini memungkinkan Anda untuk menerapkan perubahan secara terprogram ke aplikasi Anda dari server Integrasi Berkelanjutan. Ini memungkinkan Anda untuk memperbarui nomor versi dan metadata pada penerapan Anda juga. Semua ini dapat dilakukan secara otomatis dan tanpa menyentuh dasbor aplikasi Ionic.

Kesimpulan

Itu dia! Dalam tutorial ini Anda telah belajar tentang Ionic Deploy dan bagaimana Anda dapat menggunakannya untuk mendorong pembaruan ke aplikasi Ionic Anda. Ini adalah fitur canggih yang memungkinkan Anda membuat versi dan pembaruan sistem yang kuat ke dalam aplikasi Anda.

Pantau terus untuk konten lainnya di Ionic dan di layanan cloud seperti Ionic Deploy! Jika Anda ingin pengenalan lengkap untuk memulai pengembangan aplikasi Ionic 2, lihat kursus kami di Envato Tuts+.

Dan periksa beberapa posting kami yang lain tentang pengembangan aplikasi seluler Ionic dan lintas platform.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.