Firebase Cloud Messaging'i kullanarak Flutter uygulaması için bildirim gönderip alın

1. Giriş

Son Güncelleme Tarihi: 04.04.2022

Bu codelab'de, Flutter kullanarak Firebase Cloud Messaging (FCM) ile çok platformlu uygulama geliştirme süreci açıklanmaktadır. Uygulamanın bir parçasını yazdıktan sonra uygulamayı üç platformda (Android, iOS ve web) sorunsuz bir şekilde geliştirip çalıştıracaksınız. Ayrıca FCM'yi Flutter'a entegre etmeyi ve mesaj almak ve göndermek için kod yazmayı da öğreneceksiniz. Son olarak codelab'de, FCM HTTP v1 API'nin platforma özgü engellemeler özelliği yer almaktadır. Bu özellik, farklı platformlarda farklı davranışları olan tek bir mesaj göndermenize olanak tanır.

Ön koşul

Flutter ile ilgili temel bilgileri edinin.

Neler öğreneceksiniz?

  • Flutter uygulaması nasıl kurulur ve oluşturulur?
  • FCM bağımlılıkları nasıl eklenir?
  • Uygulamanıza tek bir FCM mesajı gönderme.
  • Uygulamanıza konu FCM mesajları gönderme.

Gerekenler

  • Android Studio'nun Dart ve Flutter eklentileriyle yapılandırılmış En Son Kararlı Sürümü.

Codelab'i aşağıdaki cihazlardan birini kullanarak çalıştırabilirsiniz:

İsteğe bağlı olarak, iOS platformunu kullanarak codelab'i çalıştırmak için iOS cihaza, Apple Geliştirici hesabına ve XCode yüklü bir macOS cihaza ihtiyacınız vardır.

2. Flutter kurulumu

Zaten kurulu bir Flutter geliştirme ortamınız varsa bu bölümü atlayın.

Flutter geliştirme ortamını kurmak için aşağıdaki adımları uygulayın:

  1. İşletim sisteminize uygun Flutter'ı indirip yükleyin: Yükle | Fırfır Kollu
  2. Flutter aracının yolunuza eklendiğinden emin olun.
  3. Flutter için düzenleyicinizi şurada gösterildiği gibi kurun: Düzenleyici kurma | Flutter Düzenleyiciniz için Flutter ve Dart eklentilerini yüklediğinizden emin olun. Codelab'in geri kalanında Android Studio'yu kullanacaksınız.
  4. Komut satırından, ayarlarınızı tarayıp düzeltilmesi gereken eksik bağımlılıkları listeleyen flutter doctor komutunu çalıştırın. Eksik olan önemli bağımlılıkları düzeltmek için talimatları uygulayın. Bazı bağımlılıkların gerekli olmayabileceğini unutmayın. Örneğin, iOS için uygulama geliştirmeyecekseniz eksik bir CocoaPods bağımlılığı, engelleyen bir sorun olmayacaktır.
  5. fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter dizininde Flutter uygulamanızı oluşturmak için bu komutu çalıştırın, ardından dizinleri fcmflutter olarak değiştirin.
  1. Android Studio'da Dosya -> Aç'ı tıklayın, Flutter uygulamanızın yolunu bulun ve ardından projeyi Android Studio'da açmak için 'ı tıklayın. Uygulama kodu, lib/main.dart dosyasının içindedir.

Android Studio araç çubuğundaki Aşağı oku tıklayarak bir Android cihaz seçin. Hedef seçici boşsa uygulamayı bir web tarayıcısından veya iOS cihazdan başlatmayı tercih ederseniz sanal Android cihazları ya da Chrome Tarayıcı veya iOS simülatörünü yükleyin. Hedef cihazı bulmak için cihazı manuel olarak başlatmanız ve listeyi yenilemeniz gerekebilir.

Derleme hedefi menüsü açılır okunun vurgulandığı Android Studio araç çubuğu.

Uygulamayı başlatmak için Run 'ı (Çalıştır) Android Studio'daki çalıştırma düğmesi tıklayın.

Kullanıma sunulan Flutter demo uygulamasının kullanıcı arayüzü

Tebrikler! Flutter uygulamasını başarıyla oluşturdunuz.

3. Firebase ve FlutterFire kurulumu

Flutter kullanarak Firebase Cloud Messaging ile entegre olan bir uygulama geliştirmek için gerekenler:

  • Bir Firebase projesi.
  • Çalışan bir Firebase CLI.
  • FlutterFire kurulumu.
  • flutterfire configure ile yapılandırılıp oluşturulan bir uygulama.

Firebase projenizi oluşturma

Zaten bir Firebase projeniz varsa bu adımı atlayabilirsiniz.

  1. Google Hesabınız varsa Firebase'i açıp Google Hesabınızla oturum açın, ardından Konsola git'i tıklayın.
  2. Firebase konsolunda Proje ekle'yi tıklayın. Proje oluşturma talimatlarını uygulayın. Bu projede kullanılmayacağından Bu proje için Google Analytics'i etkinleştir'i işaretlemeyin.
  3. Proje oluşturulduktan sonra Projeye Genel Bakış'ın yanındaki dişli simgesini tıklayarak projenin Proje Ayarları'na gidin.

Firebase konsolunda proje ayarları menüsü simgesinin ve

Proje Kimliği, projeyi benzersiz şekilde tanımlamak için kullanılır ve Proje adı'ndan farklı olabilir. Proje Kimliği, daha sonra FlutterFire'ı kurmak için kullanılacaktır.

Firebase konsolunda proje kimliğinin vurgulandığı kırpılmış ekran görüntüsü

Tebrikler! Firebase projesini başarıyla oluşturdunuz.

Firebase CLI'ı ayarlama

Firebase CLI'ı ayarladıysanız bu adımı atlayabilirsiniz.

Firebase CLI'yı indirip yüklemek için Firebase CLI referansı sayfasına gidin. Aşağıdaki komutla Google Hesabınızla Firebase'e giriş yapın:

firebase login

FlutterFire'ı kurma

  1. flutter pub add firebase_core komutunu kullanarak FlutterFire eklentisini yükleyin.
  2. FCM eklentisini yükleyin: flutter pub add firebase_messaging
  3. FlutterFire KSA'yı ayarlayın: dart pub global activate flutterfire_cli
  4. Firebase projesini Flutter'da yapılandırın: flutterfire configure --project=fcm4flutter. Platformları seçmek için ok tuşlarını ve boşluk tuşunu kullanın veya varsayılan platformları kullanmak için Enter tuşuna basın.

Bu codelab, varsayılan platformları (Android, iOS ve web) kullanır ancak yalnızca bir veya iki platform seçebilirsiniz. iOS paket kimliği istenirse com.flutter.fcm.fcmflutter kimliğini veya kendi iOS paket kimliğinizi [company domain name].[project name] biçiminde girin. Komut yüklendikten sonra Firebase Konsolu sayfasını yenileyin. Firebase projesi kapsamında seçili platformlar için uygulamalar oluşturduğunu görürsünüz.

Firebase konsolunun seçili platformlar için oluşturulan uygulamaları gösteren kırpılmış ekran görüntüsü

Bu komut, lib dizini altında başlatma için gereken tüm seçenekleri içeren bir firebase_options.dart dosyası oluşturur.

iOS için Cloud Messaging'i kurma

  1. Apple geliştirici sayfasına gidin ve Anahtarlar sekmesinde Anahtar oluştur'u tıklayın.

Anahtar oluşturma için sayfa bileşenlerini vurgulayan Apple geliştirici sayfasının kırpılmış ekran görüntüsü

  1. Anahtarın adını girin ve Apple Anında Bildirim Hizmetleri (APN'ler) seçeneğini işaretleyin. Yeni anahtar adının metin kutusunun vurgulandığı Apple geliştirici sayfasının kırpılmış ekran görüntüsü
  2. .p8 dosya uzantısına sahip anahtar dosyasını indirin. Anahtar indirme düğmesinin vurgulandığı Apple geliştirici sayfasının kırpılmış ekran görüntüsü
  3. Firebase konsolunda projenin Proje Ayarları'na gidin ve Cloud Messaging sekmesini seçin.

Proje ayarlarını güncellemeye yönelik bileşenlerin vurgulandığı Firebase konsolu sayfasının kırpılmış ekran görüntüsü

Cloud Messaging sekmesinin vurgulandığı Firebase Console sayfasının kırpılmış ekran görüntüsü

  1. iOS uygulaması için APNs anahtar dosyasını Cloud Messaging sekmesine yükleyin. Cloud Messaging sekmesinden APNs anahtar kimliğini ve Apple üyelik merkezinde bulunan ekip kimliğini girin. APNs Kimlik Doğrulama Anahtarı yükleme düğmelerinin vurgulandığı Firebase konsolu sayfasının kırpılmış ekran görüntüsü

4. FCM hazırlığı

Bir uygulamanın FCM'den mesaj alabilmesi için öncelikle şunları yapması gerekir:

  • FlutterFire'ı başlatın.
  • Bildirim izinleri isteyin.
  • Kayıt jetonu almak için FCM'ye kaydolun.

Başlatma

Hizmeti başlatmak için ana işlevi (lib/main.dart) şu kodla değiştirin:

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by 
flutterfire configure
import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler

 runApp(MyApp());
}

Ardından Araçlar -> Flutter -> FlutterFire'ı kurma bölümünde eklenen paketleri yüklemek için Android Studio'da Flutter Pub Get'i kullanın ve kodu, Android Studio'da uygun Intellisense ayarıyla görüntüleyin.

Bu işlem, oluşturulan firebase_options.dart dosyasından içe aktarılan mevcut DefaultFirebaseOptions.currentPlatform platformu için FlutterFire'ı başlatır. initializeApp işlevinin eşzamansız bir işlev olduğunu ve await anahtar kelimesinin, uygulamayı çalıştırmadan önce başlatma işleminin tamamlanmasını sağladığını unutmayın.

İzin iste

Uygulamanın bildirim almak için kullanıcıdan izin istemesi gerekir. firebase_messaging tarafından sağlanan requestPermission yöntemi, kullanıcının izin vermesini veya izni reddetmesini isteyen bir iletişim kutusu veya pop-up gösterir.

Öncelikle bu kodu TODO: Request permission yorumunun altındaki ana işleve kopyalayın. Döndürülen settings, kullanıcının izin verip vermediğini belirtir. Yalnızca kullanıcının erişim gerektiren bir özelliği kullanması gerektiğinde (ör. kullanıcı, uygulama ayarlarında bildirimleri etkinleştirdiğinde) izin istemenizi öneririz. Bu codelab'de, basitlik sağlamak için uygulama başlangıcında izin istiyoruz.

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

Ardından, Android Studio araç çubuğundaki hedef seçiciden Chrome (web) uygulamasını seçip uygulamayı yeniden çalıştırın.

Android Studio araç çubuğunda hedef seçici ve Çalıştır düğmesi bulunan kırpılmış ekran görüntüsü

Ardından, izin isteyen bir pop-up'ın yer aldığı Chrome sekmesi açılır. Allow seçeneğini tıklarsanız Android Studio konsolunda bir günlük görürsünüz: Permission granted: AuthorizationStatus.authorized. İzin isteğine izin verdikten veya isteği engellediğinizde, yanıtınız tarayıcıda uygulamanızla birlikte depolanır ve pop-up tekrar gösterilmez. Android Studio'da web uygulamasını tekrar çalıştırdığınızda iznin tekrar istenebileceğini unutmayın. Chrome sekmesinin kırpılmış ekran görüntüsü ve ekranda .

Kayıt

FCM'ye kaydolmak için bu kodu TODO: Register with FCM yorumunun altındaki ana işleve kopyalayın. getToken çağrısı, uygulama sunucusu veya güvenilir sunucu ortamı tarafından kullanıcılara ileti göndermek için kullanılabilecek bir kayıt jetonu döndürür.

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

Android Studio araç çubuğundan bir Android cihaz seçin ve uygulamayı çalıştırın. Android Studio konsolunda kayıt jetonu şu şekilde yazdırılır:

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

Daha sonra mesaj göndermek için kullanacağınızdan bu adresi bir metin düzenleyiciye kopyalayın.

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

Web'de mesaj almak için ek adımlar

Web uygulamalarının kayıt jetonunu almak ve gelen mesajları dinlemek için iki ek adıma ihtiyacı vardır. Desteklenen web push hizmetlerine gönderme isteklerini yetkilendirmek için web'in getToken adresine bir VAPID anahtarı iletmesi gerekir.

İlk olarak Firebase konsolunda Firebase projesinin Cloud Messaging sekmesini açın, mevcut anahtar çiftini bulmak için sayfayı Web yapılandırması bölümüne kaydırın veya yeni bir anahtar çifti oluşturun. VapidKey olarak kullanılabilmesi için, vurgulanan düğmeyi tıklayarak anahtarı kopyalayın.

Anahtar çiftinin vurgulandığı Web yapılandırma sayfasının Web Push Sertifikaları bileşeninin kırpılmış ekran görüntüsü

Ardından, Kayıt bölümündeki kayıt kodunu şu kodla değiştirin ve vapidKey'i güncelleyin:

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

Sonra, projenizin kök dizininde bulunan web/ dizininin altında bir firebase-messaging-sw.js dosyası oluşturun. Web uygulamasının onMessage etkinliklerini almasına izin vermek için aşağıdakini firebase-messaging-sw.js öğesine kopyalayın. Daha fazla bilgi için Hizmet çalışanında bildirim seçeneklerini ayarlama başlıklı makaleye bakın.

importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

Bundan sonra, Proje Ayarları altında -> Genel sekmesine gidip aşağı kaydırarak Web Uygulaması'nı bulun, firebaseConfig kod bölümünü kopyalayın ve firebase-messaging-sw.js içine yapıştırın. Firebase yapılandırma sayfasının Web Uygulaması bileşeninin kırpılmış ekran görüntüsü

Son olarak, Android Studio araç çubuğundaki hedef seçiciden Chrome (web) öğesini seçin ve uygulamayı çalıştırın. Android Studio konsolunda kayıt jetonu şu şekilde yazdırılır:

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

Kayıt jetonunu bir metin düzenleyiciye kopyalayın. Böylece, daha sonra ileti göndermek için bu jetonu kullanabilirsiniz.

iOS'te mesaj almak için ek adımlar

FCM'den mesaj almak için iOS cihazların Xcode'da Push Bildirimleri'ni ve Arka Plan Modları'nı etkinleştirmesi gerekir:

  1. Android Studio'da proje adını sağ tıklayın ve ardından Flutter'ı seçin -> iOS modülünü Xcode'da açın. Şu öğenin kırpılmış ekran görüntüsü:
  2. Xcode başlatıldıktan sonra, Oturum açma ve oturum açma ekranında Push Bildirimleri'ni ve Arka Plan Modları'nı Proje hedefinin Özellikler sekmesi. Daha fazla bilgi için Uygulamanızı yapılandırma sayfasına göz atın.
  3. Android Studio araç çubuğundaki hedef seçiciden bir iOS cihazı seçin ve uygulamayı çalıştırın. Bildirim izni verildikten sonra kayıt jetonu Android Studio konsolunda yazdırılır.

Bildirim gönderme izni isteyen bir iOS uygulamasının kırpılmış ekran görüntüsü

Tebrikler, uygulamanızı FCM'ye başarıyla kaydettiniz. Sonraki bölümde açıklandığı gibi, iletileri almaya hazırsınız.

5. FCM'den mesaj al

İleti işleyicileri ayarlama

Uygulamanın, mesajlar ön plan modundayken gelen onMessage etkinliklerini ve uygulama arka plandayken onBackgroundMessage etkinliklerini işlemesi gerekir.

Ön plan mesaj işleyicisi

Öncelikle, mesajları etkinlik işleyiciden kullanıcı arayüzüne aktarmak için main.dart dosyasındaki TODO: Add stream controller yorumundan sonra bir akış denetleyicisi ekleyin.

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

rxdart bağımlılığı eklemek için proje dizininden şu komutu çalıştırın: flutter pub add rxdart.

Ardından Araçlar'ı çalıştırın -> Çıplaklık -> rxdart.dart paketini yüklemek ve kodu Android Studio'da uygun Intellisense ayarlarıyla görüntülemek için Android Studio'da Flutter Pub Get.

Ardından, TODO: Set up foreground message handler yorumundan sonra ön plan mesajlarını dinlemek için bir etkinlik işleyici ekleyin. Günlükleri yazdırır ve mesajı akış denetleyicisine yayınlar.

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

Ardından main.dart dosyasındaki orijinal Durum widget'ını bu kodla değiştirin. Bu kod, Durum widget'ında akış denetleyicisine bir abone ekler ve widget'taki son mesajı gösterir.

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

Android/iOS için arka plan mesaj işleyicisi

Mesajlar, uygulama arka plandayken onBackgroundMessage işleyicisi tarafından işlenir. İşleyici, üst düzey bir işlev olmalıdır. Kullanıcı arayüzü, mesajlar işlenerek (bkz. Etkileşimi yönetme) veya uygulama sunucusuyla senkronize edilerek uygulama ön plana getirildiğinde güncellenebilir.

Ana işlevin dışında, TODO: Define the background message handler yorumundan sonra işleyici işlevi oluşturun ve TODO: Set up background message handler yorumundan sonra ana işlevde bunu çağırın.

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

Web için arka plan mesaj işleyici

FlutterFire firebase_messaging 11.2.8 sürümünden itibaren, web tabanlı platformlarda arka plan mesajlarının işlenmesi farklı bir akış gerektirir. Dolayısıyla, web/firebase-messaging-sw.js hizmet çalışanına ayrı bir mesaj işleyici eklemeniz gerekir.

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

Uygulama sunucusunu ayarlama

  1. Android Studio'da https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server projesini açarak başlangıç sunucu kodunu içe aktarın. Sunucu, FCM mesajı gönderme işlevini sağlayan firebase-admin SDK'sına bağımlı olan Gradle tabanlı bir Java projesidir.
  2. Firebase Admin SDK'nın, FCM API'lerine yapılan çağrıları yetkilendirmesine olanak tanıyan bir Firebase Hizmet Hesabı oluşturun. Firebase konsolunda Proje Ayarları'nı açın ve Hizmet hesapları sekmesini seçin. "Java"yı seçin ve yapılandırma snippet'ini indirmek için Generate new private key'yi tıklayın. Proje ayarları sayfasının Hizmet hesapları bileşeninin Yönetici SDK&#39;sı yapılandırma snippet&#39;ini vurgulayan kırpılmış ekran görüntüsü
  3. Dosyayı service-account.json olarak yeniden adlandırın ve sunucu projesinin src/main/resources yoluna kopyalayın.

Test mesajı gönderme

FcmSender.java dosyasında sendMessageToFcmRegistrationToken, veri yükü içeren bir bildirim mesajı oluşturur. Kayıt jetonu, mesajın gönderildiği uygulama örneğini hedefler.

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }
  1. Kayıt bölümünden kopyalanan Android kayıt jetonunu kopyalayın ve registrationToken değişkeninin değerine yapıştırın.
  2. Ana işlevi çalıştırmak ve mesajı FCM üzerinden kullanıcıya göndermek için Çalıştır Android Studio&#39;daki çalıştırma düğmesi tıklayın. Android Studio&#39;da FcmSender.java ana işlevinin yanında gösterilen Çalıştır simgesinin kırpılmış ekran görüntüsü

Android uygulaması arka plandayken bildirim tepsisinde ileti görünür.

Android bildirim tepsisinde görünen bir mesajın kırpılmış ekran görüntüsü

Android uygulaması ön plandayken Android Studio konsolunda "Ön plan mesajını işleme" adlı bir günlük görürsünüz. Kullanıcı arayüzü, yeni mesajlar için akış denetleyicisine abone olduğundan mesaj içeriği, kullanıcı arayüzünde de gösterilir.

Android uygulamasında görüntülenen mesaj içeriğinin kırpılmış ekran görüntüsü

Kayıt jetonunu yapıştırıp mesajı uygulama sunucusundan veya başka bir güvenilir sunucu ortamından gönderirseniz benzer bir davranış görürsünüz:

  • Web uygulaması arka plandayken (ör. başka bir pencere tarafından gizlendiğinde veya başka bir sekme etkinse) bir web bildirimi görürsünüz.

Chrome Tarayıcı&#39;da gösterilen bir web bildiriminin kırpılmış ekran görüntüsü

  • Web uygulaması ön plandayken web'i sağ tıklayıp Inspect seçeneğini belirleyerek Chrome Console'da günlüğü görüntüleyebilirsiniz. Mesaj içeriği, kullanıcı arayüzünde de gösterilir. Chrome Console&#39;un hata ayıklama günlüklerini içeren kırpılmış ekran görüntüsü.

6. Konu mesajı gönder

FCM HTTP v1 API'sinin platform geçersiz kılma özelliği, mesaj gönderme isteğinin farklı platformlarda farklı davranışlara sahip olmasını sağlar. Bu özelliğin kullanım alanlarından biri, platforma göre farklı bildirim mesajı içerikleri göstermektir. Bu özellik en çok, konu mesajlarıyla birlikte birden fazla cihaz hedeflenirken (birden fazla platformu kapsayabilir) kullanılır. Bu bölüm, uygulamanızın her platform için özelleştirilmiş bir konu mesajı almasını sağlayacak adımlarda size yol gösterir.

İstemcinin bir konusuna abone olma

Bir konuya abone olmak için Flutter uygulamasının main.dart dosyasında ana işlevin sonundaki messaging.subscribeToTopic yöntemini çağırın.

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[İsteğe bağlı] Web sunucusundaki bir konuya abone olma

Web platformunda geliştirme yapmıyorsanız bu bölümü atlayabilirsiniz.

FCM JS SDK'sı şu anda istemci tarafı konu aboneliklerini desteklememektedir. Bunun yerine, Yönetici SDK'sinin sunucu tarafı konu yönetimi API'sini kullanarak abone olabilirsiniz. Bu kodda, Java Admin SDK ile sunucu tarafı konu aboneliği gösterilmektedir.

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

Uygulama sunucusunu açın ve ana işlevi FcmSubscriptionManager.java dosyasında çalıştırmak için Çalıştır Android Studio&#39;daki çalıştırma düğmesi tıklayın:

Android Studio&#39;da FcmSubscriptionManager.java ana işlevinin yanında gösterilen Çalıştır simgesinin kırpılmış ekran görüntüsü

Bir konuya platform geçersiz kılmaları içeren mesaj gönderin

Artık konu platformu geçersiz kılma mesajı göndermeye hazırsınız. Aşağıdaki kod snippet'inde:

  • Temel mesaj ve "A new app is available" başlığıyla bir gönderme isteği oluşturursunuz.
  • Mesaj, "A new app is available" başlıklı bir görüntülü bildirim oluşturur Google'dan bahsetmek istiyorum.
  • Bu mesaj, "A new Android app is available" başlıklı bir görüntülü bildirim oluşturur Android cihazlarda kullanın.
private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

FcmSender.java dosyasının ana işlevinde sendMessageToFcmTopic(); açıklamasını kaldırın. Konu mesajını göndermek için Çalıştır Android Studio&#39;daki çalıştırma düğmesi tıklayın.

7. Özet ve sırada ne var?

Özetlemek gerekirse, Flutter ve FCM'yi kullanarak çok platformlu uygulama geliştirmeyi nasıl kullanacağınızı öğrendiniz. Flutter ve FCM, bu bilgiler arasında ortam kurulumu, bağımlılık entegrasyonu, mesaj alma ve gönderme özellikleri yer alıyor. Daha ayrıntılı bilgi edinmek için aşağıdaki materyalleri inceleyin:

Codelabs

References