Update UI Aplikasi Android dengan FCM dan Broadcast Receiver

Jika kamu pernah menggunakan firebase realtime database atau firestore, kemungkinan besar kamu akan terkesima dengan kecepatan perubahan data pada tampilan pengguna dengan latensi yang sangat rendah.

Pada tutorial ini saya akan memberi contoh kasus “perhitungan” pengunjung pada sebuah toko, dimana terdapat sebuah aplikasi untuk memantau jumlah pengunjung secara “realtime”.

Kita akan membuat tampilan seperti mockup di atas, di mana terdapat tampilan angka yang menunjukkan jumlah pengunjung. FCM akan bertugas memicu sebuah function pada aplikasi kita dengan bantuan Broadcast Receiver untuk memperabaharui tampilan.

Pertama-tama, kita perlu setup firebase di project yang telah kita buat. Untuk mempermudah setup firebase kamu bisa menggunakan Assistant di Android Studio (Tools -> Firebase). Atau kamu juga bisa setup manual dengan menambahkan dependcies dibawah ini dan mendownload file credential di console firebas.

Buatlah sebuah class yang mewarisi kelas FirebaseMessagingService(). Kelas ini akan bertugas untuk mengatur jalannya firebase cloud messaging kamu, mulai dari menerima remote message dan perubahan token.

Device token ini juga dibutuhkan oleh backend service yang kita gunakan sebagai identifier kemana sebuah pesan atau notifikasi akan dikirim. Dengan begitu kamu juga perlu mengirimkan token baru ke server jika terdapat perubahan.

Tambahkan baris di atas pada function onMessageReceived. Baris kode ini akan bertugas untuk membuat service yang akan dijalankan dengan enqueueWork(context, intent).

Kelas di atas bertugas untuk menangani JobIntentService yang akan kita gunakan untuk mengirim sebuah broadcast ketika sebuah service dijalankan.

Selanjutnya adalah daftarkan service dari kelas firebase messaging dan AddService yang telah kita buat.

Isi dari body http request yang dibuat terdiri dari key “to” dengan value device token. Anda dapat memanggil fungsi seperti contoh di bawah untuk mengetahui token dari device yang kamu gunakan. Dan terdapat juga key “data” dengan value json object yang bebas kita isi, bisa berupa sebuah flag ataupun response dari server yang dapat kita gunakan untuk memperbaharui tampilan UI.

Jika kamu dapat lihat dengan jelih, isi dari data merupakan sebuah key “type” yang digunakan sebagai flag pada fungsi onMessageReceived.

Selanjutnya, http request juga membutuhkan header seperti gambar di bawah ini.

key Authorization kamu bisa dapatkan di project setting -> Cloud Messaging

Selanjutnya tambahkan baris diatas pada MainActivity. Variabel numberOfVisitor akan kita gunakan untuk tracking jumlah pengunjung dan broadCastReceiver digunakan untuk menerima event yang akan digunakan untuk mengupdate UI.

Selanjutnya kita perlu register broadcast receiver dan intent yang telah kita buat di AddService.kt untuk menerima event di MainActivity.

Jangan lupa untuk menambahkan unregisterReceiver pada lifecycle onDestroy() dan onPause() karena kita juga melakukan register pada state onResume() seperti contoh diatas untuk menghindari memory leak.

Ayo kita tes!

Terlihat bahwa ketika mengirim notifikasi atau remote message melalui FCM, tampilan UI langsung mengalami perubahan. Dengan cara ini kamu bisa gunakan men-trigger sebuah fungsi untuk menarik data dari server atau menerima data yang berisi json object berupa response dari server.

Sebagai challenge kamu dapat fork repo yang saya telah buat di bawah dan tambahkan method mengurangi pengunjung sebagai bahan latihan kamu. Selamat mencoba, yeay!

Disclaimer: Kamu tetap perlu membuat project firebase sendiri dan meng-import credential firebase berupa file .json kedalam project Android Studio ini.

Related posts:

La paz canaliza la energía que necesitamos para resolver en nuestras vidas los conflictos y las paradojas. Nos ayuda a vivir una vida compatible con nuestras necesidades y deseos, dándonos la…

I first came across the social media schedule tool, Buffer, a few years ago right when I was moving back to the San Francisco Bay Area. I had a bit of a need to move back, but also was headed toward…

Minha vontade mesmo era te ligar agora. Agora mesmo. Não que eu tenha algo de extraordinário pra te falar, mas ouvir sua voz está em um dos motivos mais pertinentes que consegui pensar. Eu sei que é…