Tuesday, December 17, 2019

Flutter : Membuat Push Notification dengan Firebase Cloud Messaging

Membuat Push Notification pada Futter dengan FCM
Membuat Push Notification dengan Firebase Clound Messaging (FCM) pada Flutter - Salah satu fitur wajib sebuah aplikasi mobile yang enterprise adalah mampu mengirimkan informasi dari server suatu saat jika ada informasi yang penting sehingga pengguna mendapatkan informasi yang cepat dan tepat.

Notifikasi yang dikirimkan dari server harus bersifat aktif dan mampu mengakomodasi kepentingan aplikasi, dengan cara notifikasi akan tetap muncul tanpa aplikasi sedang berjalan saat itu dan ini berlaku pada semua platform / mobile OS baik Android maupun iOS.

Untuk menghadirkan fitur Push Notification pada aplikasi mobile yang kita buat baik di iOS maupun Android yaitu menggunakan fasilitas API dari firebase dengan nama Firebase Cloud Messaging (FCM). Banyak sekali kelebihan dari FCM ini sehingga sangat cocok untuk digunakan sebagai pilihan utama kita dalam pembuatan Push Notification aplikasi mobile, tanpa harus membuat kode-kode yang panjang.

Kenapa harus menggunakan FCM?

Seperti yang kita singgung sebelumnya bahwa kelebihan utama dari FCM ini sebenarnya adalah sangat ringkas, sehingga dapat menghemat waktu pembuatan Push Notification multi platform pada Flutter.

Dapat anda bayangkan, jika anda membuat Push Notification anda sendiri maka anda perlu menyiapkan mekanisme dan pemlihan teknologi sendiri (misal websocket, tcp socket, dll) belum lagi ditambah pembuatan service yang terpisah pada iOS dan Android. Jadi dengan kata lain, efisien adalah alasan utama kita menggunakan FCM untuk fitur Push Notification aplikasi mobile kita.

Dengan FCM ini kode yang kita tulis untuk menerima notifikasi di sisi klien sangatlah sederhana, karena Flutter telah menyediakan Plugin / Library yang lengkap untuk melakukan hal tersebut.

Membuat Projek Flutter untuk Push Notification FCM

Pada tutorial kali ini, untuk pembuatan / setup konfigurasi projek firebase tidak akan dibahas ulang, karena pada projek kali ini kita akan melanjutkan / memodifikasi tutorial sebelumnya yaitu : Membuat Login Akun Google dengan Firebase, ada baiknya anda mengikuti tutorial tersebut dan mngikuti langkah-langkah pembuatan projek pada Firebase untuk keperluan tutorial ini.

1. Membuat Projek di Flutter

PENTING! : Pada projek kali ini kita akan meneruskan kode projek Login dengan akun Google seperti tutorial sebelumnya yang mempunya nama package : "net.eduprog.eduprog_login_with_google".

2. Menambahkan Package di pubspec.yaml

Untuk keperluan pembuatan Push Notification dengan FCM ini kita harus menambahkan package "firebase_messaging" pada file pubspec.yaml seperti gambar dibawah ini:
pubspec.yaml
Setelah anda menambahkan package, seperti biasa lakukan proses Packages get dengan menekan menu aplikasi Android Studio anda.

3. Membuat File-File Source Code

Langkah selanjutnya adalah menulis kode-kode pada projek Flutter kita, dengan struktur sebagai berikut:

Setelah anda menambahkan package yang diperlukan untuk projek Flutter kita kali ini, saatnya untuk membuat file-file Source Code dengan struktu sebagai berikut ini:
  • main.dart (file utama)
  • util\screen_util.dart (file source untuk class bantuan screen)
  • page\login_page.dart (file source untuk menerima notifikasi melalui komponen snackbar)
Kode masing-masing file:

4. Menjalankan Projek ke Virtual Device

Setelah menyelesaikan semua langkah-langkah sebelumnya, sekarang anda bisa memulai mencoba hasil program / aplikasi mobile yang kita buat dari Flutter di atas.
Hasil Aplikasi

5. Mengirimkan Notification dari Server (Firebase)

Setelah anda menjalankan apliasi ke real/virtual device, waktunya kita akan mencoba mengiriman notifikasi ke klien melalui server.

Ikuti langkah-langkah nya sebagai berikut:

1) Buka projek Firebase anda, yang anda gunakan untuk pembuatan aplikasi tersebut di atas.
projek firebase
2) Buka menu Grow --> Cloud Messaging (lihat sebelah sisi kiri), lalu akan muncul tampilan sbb:
Menu Cloud Messaging
3) Buatlah notifikasi baru dengan cara menekan tombol New Notification pada kanan atas.
Mengisi notifikasi
Isi Notification title dan Notification text sesuai keingingan anda, informasi ini yang akan di tangkap di klien atau akan muncul di panel notifikasi OS Mobile pada kondisi aplikasi kita jika tidak aktif (sedang berjalan).

Setelah anda mengisi Notification title dan Notification text lalu tekan tombol Next untuk mengisi langkah selanjutnya yaitu mengisi target, islah target sebagai app dan pilih package aplikasi yang sesuai dengan target (nama package) aplikasi yang sedang anda buat.
 
Mengisi Target
Setelah anda mengisi target lalu isi bagian Scheduling dengan Now agar notifikasi muncul saat itu juga.

4) Publish Notifikasi
Setelah anda mengisi semua infromasi notifikasi pada langkah sebelumnya, lalu klik tombol Review maka akan muncul jendela review, lalu klik Publish untuk segera mengirimkan notifikasi ke aplikasi / device dimana aplikasi tersebut di install.

Review Message
5) Hasil Notifikasi
Setelah anda menekan Publish lalu notifikasi akan segera dikirimkan ke aplikasi / device dimana aplikasi diinstall, seperti berikut ini:
Hasil Aplikasi
Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: