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

Memulai Layanan dengan Ionik: Push

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Dalam tutorial ini, Anda akan belajar tentang Ionic Push, layanan ionik yang memudahkan pengiriman notifikasi push ke pengguna Anda.

Ionic Push memungkinkan Anda mengirim notifikasi push ke pengguna aplikasi Anda. Ini bisa digerakkan kapan pun Anda mau. Misalnya, saat itu ulang tahun pengguna, Anda dapat mengirimkan pemberitahuan push kepada mereka secara otomatis untuk menyambut mereka.

Bagaimana Itu Bekerja

Ionic Push berfungsi sebagai perantara antara perangkat pengguna dan Firebase Cloud Messaging. Langkah pertama adalah agar aplikasi mengirim token ke server Push ionik. Token perangkat ini berfungsi sebagai ID yang mengacu pada perangkat tertentu. Setelah server memiliki token tersebut, mereka sekarang dapat mengajukan permintaan ke server Firebase Cloud Messaging untuk benar-benar mengirim notifikasi push ke perangkat. Di setiap perangkat Android, layanan Google Play berjalan, disebut layanan Google Cloud Messaging. Ini memungkinkan perangkat menerima notifikasi push dari platform Firebase Cloud Messaging.

Berikut adalah bagan yang menunjukkan alur pemberitahuan push:

Push notification flow

Apa yang akan Anda Bangun?

Anda akan membuat aplikasi sederhana yang dapat menerima notifikasi push melalui Ionic Push. Ini juga akan menggunakan layanan Ionic Auth untuk login pengguna. Ini memungkinkan kita untuk mencoba notifikasi push yang ditargetkan yang hanya akan mengirim notifikasi ke pengguna tertentu. Aplikasi ini akan memiliki dua halaman: halaman login dan halaman pengguna. Pengguna seharusnya hanya dapat menerima pemberitahuan saat mereka login.

Untuk memberi gambaran bagaimana pemberitahuan akan terlihat, inilah tangkapan layar pemberitahuan yang diterima saat aplikasi terbuka:

in-app notification

Di sisi lain, inilah pemberitahuan yang terlihat saat aplikasi ditutup:

closed-app notification

Menyiapkan Push Notifications untuk Android

Pada bagian ini, kita akan mengkonfigurasi Firebase dan layanan awan (cloud services) Ionic untuk memungkinkan notifikasi push. Pemberitahuan push di Android terutama ditangani oleh Firebase Cloud Messaging Service. Ionic Push hanya lapisan di atas layanan ini yang memudahkan untuk bekerja dengan notifikasi push di aplikasi ionik.

Buat Aplikasi Firebase

Langkah pertama adalah membuat proyek Firebase baru. Anda bisa melakukannya dengan pergi ke Firebase Console dan mengklik tombol Add project. Anda akan melihat formulir berikut:

Create Firebase Project

Masukkan nama project dan klik tombol Create Project.

Setelah project dibuat, Anda akan diarahkan ke dasbor project. Dari sana, klik ikon roda gigi tepat di samping tab Overview dan pilih Project Settings.

Pada halaman pengaturan, klik pada tab Cloud Messaging. Di sana Anda akan menemukan Server Key dan Sender ID. Catat ini karena Anda akan membutuhkannya nanti.

Cloud messaging settings

Buat Aplikasi Ionic

Selanjutnya, Anda perlu membuat aplikasi ionik di situs Ionic. Ini memungkinkan Anda bekerja dengan layanan Ionic Push dan layanan ionik lainnya. Jika Anda belum memiliki akun ionik, Anda dapat membuatnya dengan mendaftar. Setelah membuat akun, Anda akan diarahkan ke dasbor tempat Anda dapat membuat aplikasi baru.

Create Ionic App

Buat Profil Keamanan

Setelah aplikasi Anda dibuat, buka Settings> Certificates dan klik tombol New Security Profile. Masukkan nama deskriptif untuk Profile Name dan setel Type ke Development untuk saat ini:

Create new security profile

Profil Keamanan (security profiles) berfungsi sebagai cara untuk menyimpan dengan aman kredensial Firebase Cloud Messaging yang Anda dapatkan sebelumnya. Setelah dibuat, itu akan tercantum dalam tabel. Klik tombol Edit di samping security profiles yang baru dibuat. Kemudian klik pada tab Android. Paste nilai untuk Server Key yang Anda dapatkan sebelumnya dari konsol Firebase ke kolom FCM Server Key. Terakhir, klik Save untuk menyimpan perubahan.

Add Firebase Cloud Messaging credentials

Bootstrap sebuah Aplikasi Ionik Baru

Buat proyek Ionic 2 yang baru dengan menggunakan template kosong:

Setelah proyek dibuat, pasang plugin phonegap-plugin-push. Isi ID Pengirim yang Anda dapatkan dari konsol Firebase tadi:

Selanjutnya, Anda perlu menginstal plugin Ionic Cloud. Hal ini memudahkan untuk bekerja dengan layanan ionik di dalam aplikasi:

Terakhir, Anda perlu memperbarui file konfigurasi ionik sehingga Ionic mengetahui bahwa project spesifik ini harus diberikan ke aplikasi ionik yang Anda buat sebelumnya. Anda dapat melakukannya dengan menyalin ID aplikasi di halaman dasbor aplikasi ionik Anda. Anda dapat menemukan ID aplikasi tepat di bawah nama aplikasi. Setelah Anda menyalinnya, buka file .io-config.json dan ionic.config.json dan paste nilainya untuk app_id.

Membangun App

Sekarang Anda siap untuk membangun aplikasi. Hal pertama yang perlu Anda lakukan adalah menjalankan server pengembangan ionik sehingga Anda dapat segera melihat perubahan saat Anda mengembangkan aplikasi:

Setelah proses kompilasi selesai, akses URL pengembangan di browser Anda.

Tambahkan Ionic App dan Push Settings

Buka file src/app/app.module.ts dan tambahkan pengaturan untuk notifikasi aplikasi (core) dan push notifications (push). App_id adalah ID dari aplikasi ion yang Anda buat tadi. Sender_id adalah ID pengirim yang Anda dapatkan sebelumnya dari konsol Firebase. Di bawah objek pluginConfig, Anda dapat menetapkan pengaturan push notification secara opsional. Di bawah ini kita hanya menyetel setelan sound dan vibrate ke true agar memberitahukan perangkat keras agar bisa menjalankan pemberitahuan suara atau getaran jika perangkat berada dalam mode senyap. Jika Anda ingin tahu lebih banyak tentang opsi konfigurasi apa yang tersedia, lihat dokumentasi pada opsi Pemberitahuan Push untuk Android.

Selanjutnya, biarkan Ionic tahu bahwa Anda ingin menggunakan cloudSettings:

Halaman Utama

Halaman awal default dalam template kosong akan berfungsi sebagai halaman login. Buka file halaman/home/home.html dan tambahkan yang berikut ini:

Untuk menjaga hal-hal sederhana, kita hanya memiliki tombol login dan bukan form login penuh. Ini berarti bahwa kredensial yang akan kita gunakan untuk login tertanam dalam kode itu sendiri.

Selanjutnya, buka file src/pages/home/home.ts dan tambahkan yang berikut ini:

Memecah kode di atas, pertama kita mengimpor pengendali yang dibutuhkan untuk bekerja dengan navigation, loaders, dan alerts:

Kemudian impor layanan yang dibutuhkan untuk bekerja dengan Push and Auth.

Setelah ditambahkan, impor halaman User. Comment untuk saat ini karena kita belum membuat halaman itu. Jangan lupa uncomment ini nanti setelah halaman user sudah siap.

Di konstruktor, periksa apakah pengguna saat ini diautentikasi. Segera arahkan ke halaman pengguna jika mereka:

Untuk fungsi login, tampilkan loader dan atur agar secara otomatis memberhentikan setelah 5 detik. Dengan cara ini jika ada yang salah dengan kode autentikasi, pengguna tidak dibiarkan dengan animasi pemuatan tak terbatas:

Setelah itu, login pengguna dengan kredensial hard-coded dari pengguna yang telah ditambahkan di aplikasi Anda:

Jika Anda belum memiliki pengguna yang ada, dasbor Ionic tidak benar-benar memungkinkan Anda membuat user baru, walaupun Anda dapat membuat pengguna tambahan setelah Anda memiliki setidaknya satu pengguna. Jadi cara termudah untuk membuat pengguna baru adalah dengan memanggil metode signup() dari layanan Auth. Cukup uncomment pada kode login diatas dan ganti dengan yang berikut. Perhatikan bahwa Anda dapat membuat user/pengguna dari browser karena skema otentikasi email / kata sandi hanya menggunakan permintaan HTTP.

Setelah Anda memiliki pengguna yang dapat Anda masuki, Anda dapat melanjutkan dan menghapus kode pendaftaran dan memberi tanda comment pada kode login .

Di dalam fungsi callback sukses untuk login, Anda perlu memanggil metode register() dari layanan Push. Langkah penting ini memungkinkan perangkat menerima notifikasi push. Ini membuat permintaan ke layanan Ionic Push untuk mendapatkan token perangkat. Seperti yang disebutkan di bagian Cara Bekerja sebelumnya, token perangkat ini berfungsi sebagai pengenal unik untuk perangkat sehingga dapat menerima notifikasi push.

Hal yang hebat tentang Ionic Push adalah integrasinya dengan Ionic Auth. Alasan mengapa kami mendaftarkan token perangkat tepat setelah login karena integrasi ini. Ketika Anda memanggil metode saveToken(), cukup cerdas untuk mengenali bahwa pengguna saat ini masuk. Jadi, secara otomatis pengguna ini diberikan ke perangkat. Ini kemudian memungkinkan Anda mengirim nota push khusus kepada pengguna tersebut.

Halaman Pengguna

Halaman pengguna adalah halaman yang menerima notifikasi push. Buat dengan perintah Ionic generate:

Ini akan membuat direktori src/pages/user-page dengan tiga file di dalamnya. Buka file user-page.html dan tambahkan yang berikut ini:

Untuk menjaga hal-hal sederhana, yang kita miliki hanyalah sebuah tombol untuk membuat pengguna log out. Tujuan utama halaman ini adalah menerima dan menampilkan notifikasi push saja. Tombol logout hanya ditambahkan karena kebutuhan untuk mencatat pengguna dan menguji apakah mereka masih dapat menerima pemberitahuan setelah keluar log.

Selanjutnya, buka file user-page.ts dan tambahkan yang berikut ini:

Kode di atas cukup jelas, jadi saya hanya membahas bagian yang berhubungan dengan notifikasi. Kode di bawah ini menangani notifikasi. Menggunakan metode subscribe() untuk berlangganan pemberitahuan push masuk atau yang dibuka. Ketika saya mengatakan "opened", itu berarti pengguna telah menyentuh notifikasi di area notifikasi. Saat ini terjadi, aplikasi diluncurkan, dan fungsi panggilan balik yang Anda kirim ke metode subscribe() dipanggil. Di sisi lain, pemberitahuan push masuk terjadi saat aplikasi baru dibuka. Saat pemberitahuan push dikirim, fungsi callback ini juga dipanggil. Satu-satunya perbedaan adalah tidak lagi masuk ke area notifikasi.

Untuk setiap notifikasi, argumen yang dilewatkan ke fungsi callback berisi muatan objek:

Push notification payload

Dalam kode di atas, kita hanya menggunakan title dan text yang akan disediakan sebagai konten peringatan. Namun, kami tidak terbatas hanya pada peringatan saja-seperti yang dapat Anda lihat dari tangkapan layar di atas, ada objek playload yang menyimpan data tambahan yang ingin Anda sampaikan ke setiap notifikasi. Anda benar-benar dapat menggunakan data ini untuk mengarahkan aplikasi yang akan dilakukan saat menerima pemberitahuan seperti ini. Pada contoh di atas, is_cat disetel ke 1, dan kami dapat mengubah aplikasinya menjadi gambar kucing jika menerima pemberitahuan ini. Kemudian di bagian Sending Push Notifications, Anda akan mempelajari cara menyesuaikan playload untuk setiap pemberitahuan.

Menjalankan Aplikasi di Perangkat

Sekarang saatnya untuk menguji aplikasi di perangkat. Silakan menambahkan platform dan membangun aplikasi untuk platform itu. Disini kami menggunakan Android:

Salin file .apk di dalam folder platform/android/build/outputs/apk ke perangkat Anda dan pasanglah.

Memecahkan Build Errors

Pertama kali saya mencoba menjalankan perintah build, saya mendapat error berikut:

Android build error

Jika Anda mendapatkan error yang sama, ikuti saja. Jika Anda belum menemukan error maka Anda dapat melanjutkan ke bagian berikutnya.

Masalahnya di sini adalah komponen SDK yang disebutkan tidak terpasang, atau mungkin ada update penting yang perlu diinstal. Namun, pesan kesalahannya agak menyesatkan, karena hanya mengatakan bahwa perjanjian lisensi perlu diterima.

Jadi untuk memecahkan masalah, luncurkan installer SDK Android lalu cek Android Support Repository dan Google Repository. Setelah itu, klik tombol Install dan setujui perjanjian lisensi untuk menginstal komponen.

Mengirim Notifikasi Push

Setelah memasang apl pada perangkat Anda, sekarang saatnya untuk benar-benar mengirim beberapa notifikasi push. Berikut adalah beberapa skenario yang bisa Anda uji:

  • Saat pengguna belum masuk (logged in)
  • saat pengguna sudah masuk
  • Untuk semua pengguna
  • Untuk pengguna yang cocok dengan kueri tertentu
  • Saat aplikasi dibuka
  • Saat aplikasi ditutup

Langkah pertama dalam mengirim notifikasi push adalah membuka dasbor aplikasi ionik Anda dan klik pada tab Push. Karena ini adalah pertama kalinya Anda menggunakan layanan ini, Anda harus melihat layar berikut:

create your first push

Silakan klik tombol Create your first Push. Ini akan mengarahkan Anda ke halaman untuk membuat notifikasi push. Di sini Anda bisa memasukkan nama campaign, judul dan teks notifikasi, dan data tambahan yang ingin Anda sampaikan. Di sini kami menetapkan is_cat menjadi 1.

push details

Selanjutnya, Anda dapat menetapkan opsi pemberitahuan push untuk iOS atau Android secara opsional. Karena kami hanya akan mengirim ke perangkat Android, kami hanya menetapkan opsi untuk Android:

android push options

Langkah selanjutnya adalah memilih pengguna yang akan menerima notifikasi. Di sini Anda dapat memilih Semua Pengguna All Users jika Anda ingin mengirim pemberitahuan ke semua perangkat yang terdaftar untuk notifikasi push.

Select users to push to

Jika Anda hanya ingin mengirim ke pengguna tertentu, Anda juga dapat memfilternya:

push to selected users

Perhatikan bahwa daftar pengguna dihuni dari pengguna yang terdaftar melalui layanan Auth.

Langkah terakhir adalah memilih kapan harus mengirim notifikasi. Karena kita hanya menguji, kita bisa mengirimkannya segera. Mengklik tombol Send This Push akan mengirimkan pemberitahuan ke pengguna yang Anda pilih.

Schedule push

Kesimpulan dan Langkah Selanjutnya

Dalam tutorial ini, Anda telah belajar tentang Ionic Push dan bagaimana membuat notifikasi push lebih mudah diterapkan. Melalui dasbor ionik, Anda dapat menyesuaikan pemberitahuan yang Anda kirim kepada pengguna. Ini juga memungkinkan Anda memilih pengguna mana yang ingin Anda kirimi notifikasi.

Ini bagus jika Anda belum memiliki back end yang ada. Tapi jika Anda sudah memiliki back end, Anda mungkin bertanya bagaimana Anda bisa menggunakan Ionic Push dengan aplikasi web Anda yang ada. Nah, jawabannya adalah Ionic HTTP API. Ini memungkinkan Anda mengirim permintaan HTTP dari server web Anda ke server ionik kapan pun kondisi tertentu terpenuhi. Permintaan yang Anda kirim akan memicu notifikasi push untuk dikirim ke pengguna Anda. Jika Anda ingin mempelajari lebih lanjut, Anda dapat melihat dokumentasi untuk Ionic Push Service.

Dan saat Anda berada di sini, lihat beberapa kursus dan tutorial lainnya di Ionic 2!

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.