Push Notification Flutter Firebase Go - AnakInformatika

Halo AnakInformatika! Pernah kebayang bagaimana aplikasi favoritmu bisa tiba-tiba mengirim notifikasi "Diskon Flash Sale!" atau "Ada pesan baru!" meskipun aplikasinya sedang tidak dibuka? Nah, itu semua berkat fitur ajaib yang namanya Push Notification. Fitur ini krusial banget untuk menjaga interaksi pengguna dan memastikan informasi penting sampai tepat waktu.

Dalam tutorial mendalam kali ini, kita akan bedah tuntas cara Membuat Fitur Push Notification di Flutter Menggunakan Firebase dan Backend Go. Kenapa kombinasi ini? Flutter itu jagoannya UI/UX yang cantik dan cross-platform, Firebase (khususnya Firebase Cloud Messaging atau FCM) adalah "kurir pos" paling diandalkan untuk mengirim notifikasi, dan Go adalah pilihan backend yang super efisien dan cepat untuk memicu pengiriman notifikasi tersebut. Kombinasi yang pas, kan?

Anggap saja begini: aplikasi Flutter-mu adalah rumah, dan notifikasi adalah surat penting. Firebase Cloud Messaging (FCM) itu kantor posnya yang punya daftar alamat semua rumah (device). Nah, backend Go kita ini adalah "asisten" yang menulis surat (pesan notifikasi) dan menyerahkannya ke kantor pos (FCM) untuk dikirimkan ke rumah-rumah yang tepat. Keren, kan?

💡 Tip: Push Notification bukan cuma untuk promosi, lho! Fitur ini juga bisa dipakai untuk notifikasi transaksi, chat baru, update status, atau pengingat penting lainnya yang membuat user experience jadi jauh lebih baik.

Prasyarat: Apa Saja yang Perlu Kamu Siapkan?

Sebelum kita terjun ke lautan kode, pastikan kamu sudah punya beberapa "perlengkapan tempur" ini:

Flutter SDK: Pastikan sudah terinstal dan versi stabil terbaru.
Go: Versi 1.18 atau yang lebih baru terinstal di sistemmu.
Akun Google & Proyek Firebase: Siapkan satu proyek Firebase baru atau gunakan yang sudah ada.
IDE: Visual Studio Code (VS Code) sangat direkomendasikan untuk Flutter dan Go.
Pemahaman Dasar Flutter & Go: Kamu sudah familiar dengan sintaks dasar dan konsep pengembangan aplikasi di kedua platform ini.
Emulator/Perangkat Fisik: Untuk menguji notifikasi di Android atau iOS.

Langkah-Langkah Praktis: Membangun Sistem Notifikasi

Oke, siapkan kopi dan mari kita mulai petualangan coding kita!

1. Setup Proyek Firebase dan Aplikasi Flutter

Langkah pertama adalah menyiapkan fondasi di Firebase dan menghubungkannya dengan aplikasi Flutter kita.

1.1. Buat Proyek Firebase Baru

Buka Firebase Console.
Klik "Add project" atau "Tambahkan proyek".
Ikuti langkah-langkah untuk membuat proyek baru. Beri nama yang mudah diingat, misalnya "AnakInformatikaPush".

1.2. Tambahkan Aplikasi Flutter ke Proyek Firebase

Di dalam proyek Firebase-mu, tambahkan aplikasi Android dan iOS. Ini penting agar Firebase bisa mengenali aplikasi kita.

Di halaman overview proyek, klik ikon Android dan iOS.
Untuk Android:
- Masukkan nama package aplikasi Flutter-mu (biasanya ada di `android/app/src/main/AndroidManifest.xml` di atribut `package`). Contoh: `com.anakinformatika.pushnotification`.
- Daftarkan aplikasi.
- Download file `google-services.json` dan letakkan di folder `android/app/`.
- Tambahkan konfigurasi Firebase ke file `android/build.gradle` dan `android/app/build.gradle` seperti yang diinstruksikan Firebase (biasanya berupa `classpath 'com.google.gms:google-services:X.X.X'` dan `apply plugin: 'com.google.gms.google-services'`).
Untuk iOS:
- Masukkan Bundle ID aplikasi Flutter-mu (bisa dilihat di Xcode, di bagian General > Identity).
- Daftarkan aplikasi.
- Download file `GoogleService-Info.plist` dan letakkan di folder `ios/Runner/` di Xcode. Pastikan file tersebut ditambahkan ke target aplikasi.
- Aktifkan Push Notifications dan Background Modes (Remote notifications) di Xcode pada bagian "Signing & Capabilities".

⚠️ Catatan Penting: Pastikan kamu mengaktifkan "Cloud Messaging API (Legacy)" di Google Cloud Console. Cari proyekmu, lalu ke "APIs & Services" > "Enabled APIs & Services". Cari "Cloud Messaging" dan pastikan statusnya "Enabled". Kita akan butuh Server Key dari sini. Di Firebase Console, masuk ke "Project settings" > "Cloud Messaging" untuk mendapatkan Server Key (Legacy). Simpan baik-baik!

2. Konfigurasi Flutter untuk Menerima Notifikasi

Sekarang, mari kita siapkan aplikasi Flutter kita agar bisa menerima dan memproses notifikasi.

2.1. Tambahkan Dependencies

Buka file `pubspec.yaml` di proyek Flutter-mu dan tambahkan dependencies berikut:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.24.2 # Versi bisa berbeda, sesuaikan dengan terbaru
  firebase_messaging: ^14.7.12 # Versi bisa berbeda, sesuaikan dengan terbaru

Setelah itu, jalankan `flutter pub get` di terminal.

2.2. Inisialisasi Firebase dan Handle Notifikasi

Buka file `main.dart` dan tambahkan kode untuk inisialisasi Firebase serta logika untuk menangani notifikasi.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

// Top-level function untuk menangani pesan di background/terminated
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp(); // Pastikan Firebase sudah diinisialisasi
  print("Handling a background message: ${message.messageId}");
  // Di sini kamu bisa melakukan hal-hal lain seperti menyimpan notifikasi ke database lokal
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // Pastikan Flutter bindings sudah diinisialisasi
  await Firebase.initializeApp(); // Inisialisasi Firebase

  // Daftarkan handler untuk pesan di background/terminated
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Push Notification',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _token;
  String _message = 'Tidak ada notifikasi';

  @override
  void initState() {
    super.initState();
    _initFirebaseMessaging();
  }

  Future<void> _initFirebaseMessaging() async {
    FirebaseMessaging messaging = FirebaseMessaging.instance;

    // 1. Minta Izin Notifikasi (khusus iOS & web)
    NotificationSettings settings = await messaging.requestPermission(
      alert: true,
      announcement: false,
      badge: true,
      carPlay: false,
      criticalAlert: false,
      provisional: false,
      sound: true,
    );

    print('User granted permission: ${settings.authorizationStatus}');

    // 2. Dapatkan FCM Token perangkat
    String? token = await messaging.getToken();
    setState(() {
      _token = token;
    });
    print("FCM Token: $_token");

    // 3. Listener untuk token refresh (kalau token berubah)
    messaging.onTokenRefresh.listen((newToken) {
      setState(() {
        _token = newToken;
      });
      print("New FCM Token: $newToken");
      // Kirim token baru ini ke backend server-mu!
    }).onError((err) {
      print("Error refreshing token: $err");
    });

    // 4. Handle pesan saat aplikasi di foreground
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Got a message whilst in the foreground!');
      print('Message data: ${message.data}');

      if (message.notification != null) {
        print('Message also contained a notification: ${message.notification?.title} - ${message.notification?.body}');
        setState(() {
          _message = 'Foreground Notifikasi: ${message.notification?.title ?? ''} - ${message.notification?.body ?? ''}';
        });
        // Tampilkan notifikasi lokal jika ingin (misal pakai flutter_local_notifications)
      }
    });

    // 5. Handle pesan saat aplikasi dibuka dari notifikasi (terminated state)
    RemoteMessage? initialMessage = await messaging.getInitialMessage();
    if (initialMessage != null) {
      print('App opened from terminated state by notification!');
      print('Initial message: ${initialMessage.notification?.title} - ${initialMessage.notification?.body}');
      setState(() {
        _message = 'Opened from terminated: ${initialMessage.notification?.title ?? ''} - ${initialMessage.notification?.body ?? ''}';
      });
    }

    // 6. Handle pesan saat aplikasi dibuka dari notifikasi (background state)
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('App opened from background by notification!');
      print('Message opened app: ${message.notification?.title} - ${message.notification?.body}');
      setState(() {
        _message = 'Opened from background: ${message.notification?.title ?? ''} - ${message.notification?.body ?? ''}';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Push Notification'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'FCM Token Kamu:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              SelectableText(
                _token ?? 'Token belum tersedia',
                textAlign: TextAlign.center,
                style: const TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 30),
              const Text(
                'Status Notifikasi Terakhir:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              Text(
                _message,
                textAlign: TextAlign.center,
                style: const TextStyle(fontSize: 16, color: Colors.green),
              ),
              const SizedBox(height: 20),
              const Text(
                'Salin FCM Token di atas untuk mengirim notifikasi dari backend Go!',
                textAlign: TextAlign.center,
                style: TextStyle(fontStyle: FontStyle.italic, color: Colors.grey),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

💡 Tip: Pastikan kamu memahami perbedaan penanganan notifikasi di `onMessage` (saat aplikasi foreground), `onBackgroundMessage` (saat aplikasi background/terminated), dan `onMessageOpenedApp` / `getInitialMessage` (saat aplikasi dibuka dari notifikasi). Ini penting untuk user experience yang seamless.

3. Membangun Backend Go untuk Mengirim Notifikasi

Setelah Flutter siap, sekarang giliran backend Go kita untuk bertugas sebagai "pengirim surat" ke FCM.

3.1. Buat Proyek Go Baru

Buat folder baru untuk proyek Go-mu, misalnya `go-fcm-backend`. Inisialisasi modul Go:

mkdir go-fcm-backend
cd go-fcm-backend
go mod init go-fcm-backend

3.2. Implementasi Logic Pengiriman Notifikasi

Buat file `main.go` dan tambahkan kode berikut. Pastikan kamu sudah menyimpan Server Key (Legacy) dari Firebase Console yang sudah kita dapatkan di langkah 1.2.

package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"io/ioutil"
	"log"
	"net/http"
	"os" // Untuk membaca environment variable
)

// Struktur request notifikasi dari client ke backend Go kita
type NotificationRequest struct {
	Token string `json:"token"` // FCM Token dari perangkat target
	Title string `json:"title"`
	Body  string `json:"body"`
	Data  map[string]string `json:"data,omitempty"` // Data tambahan (opsional)
}

func main() {
	// Ambil Server Key dari Environment Variable untuk keamanan
	// CARA SET: export FCM_SERVER_KEY="YOUR_FIREBASE_SERVER_KEY_HERE"
	fcmServerKey := os.Getenv("FCM_SERVER_KEY")
	if fcmServerKey == "" {
		log.Fatal("FCM_SERVER_KEY environment variable not set. Please set it.")
	}

	http.HandleFunc("/send-notification", func(w http.ResponseWriter, r *http.Request) {
		if r.Method != http.MethodPost {
			http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
			return
		}

		var req NotificationRequest
		decoder := json.NewDecoder(r.Body)
		if err := decoder.Decode(&req); err != nil {
			http.Error(w, "Invalid request body", http.StatusBadRequest)
			return
		}

		if req.Token == "" {
			http.Error(w, "FCM Token is required", http.StatusBadRequest)
			return
		}

		// Payload untuk FCM API
		fcmPayload := map[string]interface{}{
			"to": req.Token, // Mengirim ke satu token spesifik
			"notification": map[string]string{
				"title": req.Title,
				"body":  req.Body,
			},
			"data": req.Data, // Mengirim data tambahan
		}

		payloadBytes, err := json.Marshal(fcmPayload)
		if err != nil {
			http.Error(w, "Failed to marshal FCM payload", http.StatusInternalServerError)
			return
		}

		// Buat HTTP request ke FCM API
		fcmURL := "https://fcm.googleapis.com/fcm/send"
		httpClient := &http.Client{}
		fcmReq, err := http.NewRequest("POST", fcmURL, bytes.NewBuffer(payloadBytes))
		if err != nil {
			http.Error(w, "Failed to create FCM request", http.StatusInternalServerError)
			return
		}

		// Tambahkan header yang diperlukan
		fcmReq.Header.Set("Content-Type", "application/json")
		fcmReq.Header.Set("Authorization", "key="+fcmServerKey)

		// Kirim request ke FCM
		resp, err := httpClient.Do(fcmReq)
		if err != nil {
			http.Error(w, "Failed to send request to FCM", http.StatusInternalServerError)
			return
		}
		defer resp.Body.Close()

		// Baca respons dari FCM
		body, err := ioutil.ReadAll(resp.Body)
		if err != nil {
			log.Printf("Error reading FCM response: %v", err)
			http.Error(w, "Failed to read FCM response", http.StatusInternalServerError)
			return
		}

		log.Printf("FCM Response Status: %s", resp.Status)
		log.Printf("FCM Response Body: %s", string(body))

		if resp.StatusCode != http.StatusOK {
			http.Error(w, fmt.Sprintf("FCM returned error: %s", string(body)), resp.StatusCode)
			return
		}

		w.WriteHeader(http.StatusOK)
		w.Write([]byte("Notification sent successfully!"))
	})

	port := ":8080"
	log.Printf("Go FCM Backend running on port %s", port)
	log.Fatal(http.ListenAndServe(port, nil)) // Start server
}

⚠️ Catatan Penting: Jangan pernah menyimpan FCM Server Key langsung di kode (hardcode) dalam aplikasi produksi. Selalu gunakan environment variable atau secret manager. Untuk testing lokal, kamu bisa set manual di terminal: `export FCM_SERVER_KEY="YOUR_SERVER_KEY_HERE"` sebelum menjalankan aplikasi Go.

3.3. Jalankan Backend Go

Buka terminal di folder `go-fcm-backend` dan jalankan:

# Pastikan FCM_SERVER_KEY sudah di-set
go run main.go

Kamu akan melihat output seperti:

2023/11/27 10:00:00 Go FCM Backend running on port :8080

4. Menguji Fitur Push Notification di Flutter

Sekarang saatnya kita uji coba apakah sistem notifikasi kita bekerja dengan baik!

Jalankan Aplikasi Flutter: Buka proyek Flutter-mu di VS Code atau IDE lain, lalu jalankan di emulator atau perangkat fisik (Android/iOS).
Salin FCM Token: Setelah aplikasi berjalan, kamu akan melihat FCM Token tercetak di console atau di layar aplikasi (sesuai contoh kode Flutter kita). Salin token tersebut.
Kirim Notifikasi dari Postman/cURL: Gunakan Postman, Insomnia, atau cURL untuk mengirim permintaan POST ke backend Go kita.

Contoh request menggunakan cURL:

curl -X POST \
  http://localhost:8080/send-notification \
  -H 'Content-Type: application/json' \
  -d '{
    "token": "PASTE_FCM_TOKEN_KAMU_DI_SINI",
    "title": "Halo AnakInformatika!",
    "body": "Ini notifikasi pertama dari backend Go kita!",
    "data": {
      "page": "home",
      "id": "123"
    }
  }'

Ganti `PASTE_FCM_TOKEN_KAMU_DI_SINI` dengan FCM Token yang kamu dapatkan dari aplikasi Flutter.

Ekspektasi Hasil:

Jika aplikasi Flutter-mu sedang di foreground, kamu akan melihat print log "Got a message whilst in the foreground!" dan teks notifikasi di aplikasi.
Jika aplikasi Flutter-mu di background atau terminated, kamu akan melihat notifikasi muncul di status bar perangkatmu.
Di console backend Go, kamu akan melihat log respons dari FCM.

💡 Tip: Saat menguji notifikasi di background/terminated, pastikan aplikasi Flutter-mu benar-benar tertutup atau di-minimize. Untuk Android, kamu bisa geser aplikasi dari recent apps. Untuk iOS, swipe up dari app switcher.

Best Practices & Tips untuk Push Notification

Implementasi dasar sudah jadi, tapi ada beberapa hal yang perlu kamu perhatikan untuk implementasi yang lebih robust dan profesional:

Manajemen Token FCM:
- Simpan FCM Token di database backend-mu, bukan hanya di memori. Hubungkan token dengan ID user agar kamu tahu notifikasi ini untuk siapa.
- Saat token di-refresh (`onTokenRefresh`), pastikan backend-mu di-update dengan token yang baru.
- Tangani token yang invalid: Jika FCM mengembalikan error "NotRegistered" atau "InvalidRegistration", hapus token tersebut dari database-mu.
Payload `notification` vs `data`:
- `notification`: Digunakan untuk menampilkan notifikasi di system tray. Jika aplikasi di background/terminated, system OS yang akan menampilkannya.
- `data`: Digunakan untuk mengirim data kustom. Selalu diterima oleh aplikasi, baik di foreground, background, maupun terminated (lewat `onBackgroundMessage`). Ini ideal untuk "silent push" atau notifikasi yang memicu update data di aplikasi tanpa menampilkan UI notifikasi.
- Untuk kombinasi, kirim keduanya!
Notification Channels (Android): Di Android Oreo (API 26) ke atas, kamu wajib mengelompokkan notifikasi ke dalam "channels". Ini memungkinkan user mengelola preferensi notifikasi secara lebih granular. Implementasikan di Flutter dengan `flutter_local_notifications` untuk menampilkan notifikasi lokal.
Keamanan Backend: Endpoint `/send-notification` kita saat ini terbuka. Di aplikasi sungguhan, kamu harus menambahkan autentikasi dan otorisasi agar hanya user atau sistem yang berwenang yang bisa mengirim notifikasi.
Error Handling yang Robust: Pastikan backend Go-mu memiliki error handling yang lebih lengkap, termasuk retry mechanism jika FCM mengalami masalah sementara.
Pengujian Menyeluruh: Uji notifikasi di berbagai kondisi aplikasi (foreground, background, terminated) dan di berbagai perangkat/versi OS.

Kesimpulan

Selamat! Kamu sudah berhasil Membuat Fitur Push Notification di Flutter Menggunakan Firebase dan Backend Go. Sekarang aplikasi Flutter-mu punya kemampuan untuk berkomunikasi secara instan dengan penggunanya, meningkatkan engagement dan memberikan pengalaman yang lebih baik.

Meskipun tutorial ini memberikan fondasi yang kuat, dunia push notification itu luas dan banyak fitur lanjutan yang bisa dieksplorasi (seperti notifikasi spesifik topik, notifikasi berdasarkan segmentasi user, hingga integrasi dengan layanan analitik). Jangan ragu untuk bereksperimen dan mengembangkan lebih jauh sesuai kebutuhan aplikasi kamu.

Punya pertanyaan, ide, atau mungkin menemukan cara yang lebih elegan? Yuk, diskusikan di kolom komentar di bawah! Sampai jumpa di tutorial AnakInformatika berikutnya!

#Flutter #mobile developer

Notifikasi Instan! Panduan Lengkap Membuat Push Notification di Flutter dengan Firebase & Backend Go

Daftar isi

Prasyarat: Apa Saja yang Perlu Kamu Siapkan?

Langkah-Langkah Praktis: Membangun Sistem Notifikasi

1. Setup Proyek Firebase dan Aplikasi Flutter

1.1. Buat Proyek Firebase Baru

1.2. Tambahkan Aplikasi Flutter ke Proyek Firebase

2. Konfigurasi Flutter untuk Menerima Notifikasi

2.1. Tambahkan Dependencies

2.2. Inisialisasi Firebase dan Handle Notifikasi

3. Membangun Backend Go untuk Mengirim Notifikasi

3.1. Buat Proyek Go Baru

3.2. Implementasi Logic Pengiriman Notifikasi

3.3. Jalankan Backend Go

4. Menguji Fitur Push Notification di Flutter

Best Practices & Tips untuk Push Notification

Kesimpulan