Tutorial Push Notification pada Flutter Menggunakan Firebase Cloud Messaging Untuk Pemula

Push notification merupakan salah satu cara untuk memberikan informasi yang realtime kepada pengguna aplikasi kita. Push notification ini sering digunakan oleh aplikasi-aplikasi yang saat ini kita gunakan. Contohnya pada saat pembayaran, anda mendapatkan notifikasi "pembayaran sukses" saat anda telah membayar. Mengapa pada tutorial ini menggunakan firebase? jawabannya hanya 1, gratis, haha. Oiya, tutorial ini khusus untuk pemula, jadi bagi temen-temen yang sudah banyak tau, mungkin bisa langsung melihat pada button navigasi yang ada di pojok kanan bawah ya, disitu ada daftar headingnya. Terimakasih

1. Setup Firebase

Sebelum kita memulai tutorial kali ini, kita harus membuat sebuah project pada firebase dengan menggunakan akun google kita.

1. Kunjungi halaman firebase.google.com 
2. Lalu pencet tombol sign in, untuk masuk ke akun anda
3. Setelah berhasil masuk, anda bisa pencet tombol go to console.
   
   
   
4. Lalu pencet tombol Create a project
   
   
   
5. Isi semua dengan benar
   
   
   saya mengisinya seperti ini
   
   
   
6. Anda bisa lanjutkan ini dengan mengaktifkan Google Analytics atau tidak. Jika anda menggunakan google analytics, maka nanti ketika menggunakan flutter harus menginstall firebase_analytics pada flutter package anda
   
   
   
7. Mulai buat project dengan lokasi anda
   
   
   
8. Dan, selamat. Project telah dibuat

2. Create New Flutter Project

1. Pilih folder atau directory yang anda inginkan pada command line anda
2. Lalu jalankan flutter create dengan nama project yang anda inginkan. Contohnya seperti berikut
   
   

   flutter create learn_pn

3. Tunggu hingga selesai dan buka dengan VS Code

3. Install Firebase CLI

1. Anda bisa menggunakan npm (Jika anda kebingungan untuk menginstall npm anda bisa menginstall node.js terlebih dahulu.) untuk menginstall firebase cli, dengan melakukan command sebagai berikut
   
   

   npm instal -g firebase-tools

4. Firebase Login

1. Setelah menginstall firebase cli, anda diharuskan login pada project anda terlebih dahulu dengan menjalankan command:
   
   

   firebase login

2. Setelah itu anda bisa melanjutkan login menggunakan akun google anda

5. Install Flutter Fire Command Line

1. Masuk ke project flutter anda
2. Jalankan
   
   

   dart pub global activate flutterfire_cli

   
   
3. Bagi anda yang menggunakan mac, anda bisa export path pada file .zshrc anda dengan cara
   Buka file pada ~/.zshrc lalu tambahkan kode berikut
   
   

   export PATH="$PATH":"$HOME/.pub-cache/bin"

6. Konfigurasi Flutter Project

1. Install firebase_core pada project flutter anda dengan cara menjalankan cli di bawah
   
   

   flutter pub add firebase_core

2. Install firebase_messaging pada project flutter anda dengan cara menjalankan cli di bawah
   
   

   flutter pub add firebase_messaging

3. Bagi anda yang tadi mengaktifkan google analytics mohon install firebase_analytics dengan cara menjalankan cli di bawah
   
   

   flutter pub add firebase_analytics

4. Setelah semua terinstall anda bisa menggunakan setup platform android, apk, web, dan desktop dengan mudah karena kita sudah menggunakan flutterfire. Jadi yang kita lakukan sekarang adalah menjalankan cli di bawah
   
   

   flutterfire configure

   
   
5. Setelah empat langkah diatas terselesaikan, anda akan mendapatkan file firebase_options.dart secara otomatis.
6. Import dua file di bawah untuk inisialisasi pada file lib/main.dart anda.
   
   

   import 'package:firebase_core/firebase_core.dart';
   import 'package:learn_pn/firebase_options.dart';

7. Lakukan inisialisasi awal pada method void main yang ada pada file lib/main.dart anda. Contohnya seperti dibawah:
   
   

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
       options: DefaultFirebaseOptions.currentPlatform,
     );
   
     runApp(const MyApp());
   }

7. Menjalankan Push Notification pada Background Process

Setelah konfirgurasi flutter project selesai. Anda bisa menerima background message atau bahkan foreground message pada aplikasi anda. Berikut adalah tahapan-tahapannya.

1. Buat instance dari FirebaseMessaging
   
   

   final _firebaseMessaging = FirebaseMessaging.instance;

2. Tambahkan request permission dan ambil token dengan kode di bawah pada method main di file lib/main.dart anda. contohnya seperti ini
   
   

   await _firebaseMessaging.requestPermission();
   final fcmToken = await FirebaseMessaging.instance.getToken();

   Contoh full method main
   
   

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
       options: DefaultFirebaseOptions.currentPlatform,
     );
     await _firebaseMessaging.requestPermission();
     final fcmToken = await FirebaseMessaging.instance.getToken();
     debugPrint("fcm token: $fcmToken");
   
     runApp(const MyApp());
   }

3. Buat method untuk menghandle background message, method ini harus top-level yang berarti dia harus diluar class ataupun method lainnya.
   
   

   Future<void> handleBackgroundMessage(RemoteMessage message) async {
     print("title: ${message.notification?.title}");
     print("body: ${message.notification?.body}");
     print("payload: ${message.data}");
   }

4. Setelah method terbuat, panggil method tersebut dengan event onBackgroundMessage, berikut adalah contohnya
   
   

   FirebaseMessaging.onBackgroundMessage(handleBackgroundMessage);

5. Jalankan flutter run. 
   
   

   flutter run

   Atau anda bisa tekan f5 pada VS code anda untuk menjalankan aplikasi flutter
6. Full code ada di bawah
   
   

   import 'package:firebase_core/firebase_core.dart';
   import 'package:firebase_messaging/firebase_messaging.dart';
   import 'package:flutter/material.dart';
   import 'package:learn_pn/firebase_options.dart';
   
   final _firebaseMessaging = FirebaseMessaging.instance;
   
   Future<void> handleBackgroundMessage(RemoteMessage message) async {
     print("title: ${message.notification?.title}");
     print("body: ${message.notification?.body}");
     print("payload: ${message.data}");
   }
   
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
       options: DefaultFirebaseOptions.currentPlatform,
     );
   
     await _firebaseMessaging.requestPermission();
     final fcmToken = await FirebaseMessaging.instance.getToken();
     debugPrint("fcm token: $fcmToken");
     FirebaseMessaging.onBackgroundMessage(handleBackgroundMessage);
   
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               const Text(
                 'You have pushed the button this many times:',
               ),
               Text(
                 '$_counter',
                 style: Theme.of(context).textTheme.headlineMedium,
               ),
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: const Icon(Icons.add),
         ),
       );
     }
   }

   
   

8. Testing Background Service

Tahap ini adalah tahap dimana kita mencoba menguji notifikasi background service yang telah kita buat. Background service ini akan muncul hanya ketika aplikasi dalam kondisi hibernate, jika anda sedang menjalankan atau membuka aplikasinya, maka background message tidak bisa diterima. Untuk langkah-langkah pengujian, anda bisa mengikuti video di bawah