Firebase ক্লাউড মেসেজিং ব্যবহার করে একটি Flutter অ্যাপের জন্য বিজ্ঞপ্তি পাঠান এবং গ্রহণ করুন

1। পরিচিতি

সর্বশেষ আপডেট : 2022-04-04

এই কোডল্যাব আপনাকে ফ্লটার ব্যবহার করে Firebase ক্লাউড মেসেজিং (FCM) সহ একটি মাল্টি-প্ল্যাটফর্ম অ্যাপ তৈরির প্রক্রিয়ার মধ্য দিয়ে নিয়ে যায়। আপনি অ্যাপটির বাস্তবায়নের একটি অংশ লিখবেন, এবং তারপর এটিকে তিনটি প্ল্যাটফর্মে নির্বিঘ্নে তৈরি এবং চালাবেন: Android, iOS এবং ওয়েব। আপনি ফ্লটারে কীভাবে FCM সংহত করতে হয় এবং বার্তাগুলি গ্রহণ এবং পাঠাতে কীভাবে কোড লিখতে হয় তাও শিখবেন। অবশেষে, কোডল্যাব FCM HTTP v1 API-এর প্ল্যাটফর্ম-নির্দিষ্ট ব্লক বৈশিষ্ট্য প্রবর্তন করে, যা আপনাকে একটি বার্তা পাঠাতে দেয় যার বিভিন্ন প্ল্যাটফর্মে ভিন্ন আচরণ রয়েছে।

পূর্বশর্ত

ফ্লটারের প্রাথমিক ধারণা।

আপনি কি শিখবেন

• কিভাবে একটি ফ্লাটার অ্যাপ সেট আপ এবং তৈরি করবেন।
• কিভাবে FCM নির্ভরতা যোগ করতে হয়।
• কীভাবে আপনার অ্যাপে একক FCM বার্তা পাঠাবেন।
• কীভাবে আপনার অ্যাপে বিষয়ের FCM বার্তা পাঠাবেন।

আপনি কি প্রয়োজন হবে

• অ্যান্ড্রয়েড স্টুডিওর সর্বশেষ স্থিতিশীল সংস্করণটি ডার্ট এবং ফ্লাটার প্লাগইনগুলির সাথে কনফিগার করা হয়েছে৷

আপনি নিম্নলিখিত ডিভাইসগুলির যেকোনো একটি ব্যবহার করে কোডল্যাব চালাতে পারেন:

• আপনার কম্পিউটারের সাথে সংযুক্ত একটি শারীরিক Android ডিভাইস।
• একটি অ্যান্ড্রয়েড এমুলেটর ( অ্যান্ড্রয়েড এমুলেটরে অ্যাপ চালান দেখুন)।
• আপনার পছন্দের একটি ব্রাউজার, যেমন Chrome।

ঐচ্ছিকভাবে, iOS প্ল্যাটফর্ম ব্যবহার করে কোডল্যাব চালানোর জন্য, আপনার একটি iOS ডিভাইস, একটি Apple বিকাশকারী অ্যাকাউন্ট, এবং XCode ইনস্টল সহ একটি macOS ডিভাইস প্রয়োজন৷

2. ফ্লটার সেটআপ

আপনার যদি ইতিমধ্যেই একটি ফ্লটার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করা থাকে, তাহলে এই বিভাগটি এড়িয়ে যান।

একটি ফ্লাটার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করতে, এই ধাপগুলি অনুসরণ করুন:

1. আপনার অপারেটিং সিস্টেমের জন্য Flutter ডাউনলোড এবং ইনস্টল করুন: ইনস্টল করুন | ফ্লাটার
2. নিশ্চিত করুন যে আপনার পাথে ফ্লটার টুল যোগ করা হয়েছে।
3. ফ্লটারের জন্য আপনার সম্পাদক সেট আপ করুন যেমনটি একটি সম্পাদক সেট আপ করুন | Flutter আপনার সম্পাদকের জন্য Flutter এবং Dart প্লাগইন ইনস্টল করতে ভুলবেন না। বাকি কোডল্যাবের জন্য, আপনি অ্যান্ড্রয়েড স্টুডিও ব্যবহার করবেন।
4. কমান্ড লাইন থেকে, flutter doctor চালান, যা আপনার সেটআপের মাধ্যমে স্ক্যান করে এবং যেকোন অনুপস্থিত নির্ভরতাগুলিকে তালিকাভুক্ত করে যা ঠিক করা দরকার। কোনো গুরুত্বপূর্ণ অনুপস্থিত নির্ভরতা ঠিক করতে নির্দেশাবলী অনুসরণ করুন। মনে রাখবেন কিছু নির্ভরতা প্রয়োজন নাও হতে পারে। উদাহরণস্বরূপ, আপনি যদি iOS এর জন্য বিকাশ করতে যাচ্ছেন না, তাহলে একটি অনুপস্থিত CocoPods নির্ভরতা একটি ব্লকিং সমস্যা হবে না।
5. fcmflutter ডিরেক্টরিতে আপনার Flutter অ্যাপ তৈরি করতে এই কমান্ডটি চালান flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter , এবং তারপর ডিরেক্টরিগুলি fcmflutter এ পরিবর্তন করুন৷

6. অ্যান্ড্রয়েড স্টুডিওতে, ফাইলে যান -> খুলুন , আপনার ফ্লাটার অ্যাপের পথটি খুঁজুন এবং তারপরে অ্যান্ড্রয়েড স্টুডিওতে প্রকল্পটি খুলতে ওপেন ক্লিক করুন। অ্যাপ কোডটি lib/main.dart ফাইলে রয়েছে।

অ্যান্ড্রয়েড স্টুডিও টুলবারে, একটি অ্যান্ড্রয়েড ডিভাইস নির্বাচন করতে নিচের তীরটিতে ক্লিক করুন। টার্গেট সিলেক্টর খালি থাকলে, ভার্চুয়াল অ্যান্ড্রয়েড ডিভাইস ইনস্টল করুন, অথবা যদি আপনি কোনো ওয়েব ব্রাউজার বা iOS ডিভাইস থেকে অ্যাপটি চালু করতে চান তাহলে Chrome ব্রাউজার বা iOS সিমুলেটর ইনস্টল করুন। লক্ষ্য ডিভাইসটি খুঁজে পেতে আপনাকে ম্যানুয়ালি ডিভাইসটি চালু করতে হবে এবং তালিকাটি রিফ্রেশ করতে হবে।

রান ক্লিক করুন অ্যাপটি চালু করতে।

অভিনন্দন! আপনি সফলভাবে একটি Flutter অ্যাপ তৈরি করেছেন।

3. ফায়ারবেস এবং ফ্লাটারফায়ার সেটআপ

Flutter ব্যবহার করে Firebase ক্লাউড মেসেজিং-এর সাথে সংহত একটি অ্যাপ তৈরি করতে, আপনার প্রয়োজন:

• একটি ফায়ারবেস প্রকল্প।
• একটি কার্যকরী ফায়ারবেস CLI।
• FlutterFire এর একটি ইনস্টলেশন।
• flutterfire configure সাথে একটি অ্যাপ কনফিগার করা এবং জেনারেট করা হয়েছে।

আপনার ফায়ারবেস প্রকল্প তৈরি করুন

আপনার যদি আগে থেকেই একটি Firebase প্রকল্প থাকে, তাহলে আপনি এই ধাপটি এড়িয়ে যেতে পারেন।

1. আপনার যদি একটি Google অ্যাকাউন্ট থাকে, Firebase খুলুন এবং আপনার Google অ্যাকাউন্ট দিয়ে সাইন ইন করুন এবং তারপর কনসোলে যান ক্লিক করুন।
2. ফায়ারবেস কনসোলে, প্রকল্প যোগ করুন ক্লিক করুন। একটি প্রকল্প তৈরি করতে নির্দেশাবলী অনুসরণ করুন. এই প্রকল্পের জন্য Google Analytics সক্ষম করুন চেক করবেন না কারণ আপনি এই প্রকল্পে এটি ব্যবহার করবেন না৷
3. প্রোজেক্ট তৈরি হওয়ার পর, প্রোজেক্ট ওভারভিউ- এর পাশে গিয়ার আইকনে ক্লিক করে প্রোজেক্টের প্রোজেক্ট সেটিংসে নেভিগেট করুন।

প্রজেক্ট আইডিটি প্রজেক্টটিকে অনন্যভাবে সনাক্ত করতে ব্যবহৃত হয় এবং এটি প্রজেক্টের নাম থেকে আলাদা হতে পারে। প্রোজেক্ট আইডি পরে FlutterFire সেট আপ করতে ব্যবহার করা হবে।

অভিনন্দন! আপনি সফলভাবে একটি Firebase প্রকল্প তৈরি করেছেন।

Firebase CLI সেট আপ করুন

আপনার কাছে Firebase CLI সেট আপ থাকলে, আপনি এই ধাপটি এড়িয়ে যেতে পারেন।

Firebase CLI ডাউনলোড এবং ইনস্টল করতে Firebase CLI রেফারেন্সে যান। নিম্নলিখিত কমান্ড দিয়ে আপনার Google অ্যাকাউন্ট দিয়ে Firebase লগ ইন করুন:

firebase login

FlutterFire সেট আপ করুন

1. কমান্ড ব্যবহার করে FlutterFire প্লাগইন ইনস্টল করুন: flutter pub add firebase_core
2. FCM প্লাগইন ইনস্টল করুন: flutter pub add firebase_messaging
3. FlutterFire CLI সেট আপ করুন: dart pub global activate flutterfire_cli
4. ফ্লটারে ফায়ারবেস প্রজেক্ট কনফিগার করুন: flutterfire configure --project=fcm4flutter. প্ল্যাটফর্মগুলি নির্বাচন করতে তীর কী এবং স্থান ব্যবহার করুন বা ডিফল্ট প্ল্যাটফর্মগুলি ব্যবহার করতে এন্টার টিপুন।

এই কোডল্যাবটি ডিফল্ট প্ল্যাটফর্ম (অ্যান্ড্রয়েড, আইওএস এবং ওয়েব) ব্যবহার করে, তবে আপনি শুধুমাত্র একটি বা দুটি প্ল্যাটফর্ম নির্বাচন করতে পারেন। iOS বান্ডেল আইডির জন্য অনুরোধ করা হলে, com.flutter.fcm.fcmflutter বা আপনার নিজের iOS বান্ডেল আইডি [company domain name].[project name] বিন্যাসে লিখুন। কমান্ডটি সম্পূর্ণ হওয়ার পরে, Firebase কনসোল পৃষ্ঠাটি রিফ্রেশ করুন। আপনি দেখতে পাবেন যে এটি Firebase প্রকল্পের অধীনে নির্বাচিত প্ল্যাটফর্মগুলির জন্য অ্যাপ তৈরি করেছে।

এই কমান্ডটি lib ডিরেক্টরির অধীনে একটি firebase_options.dart ফাইল তৈরি করে, যেটিতে আরম্ভ করার জন্য প্রয়োজনীয় সমস্ত বিকল্প রয়েছে।

iOS এর জন্য ক্লাউড মেসেজিং সেট আপ করুন

1. অ্যাপল বিকাশকারী পৃষ্ঠায় নেভিগেট করুন এবং কী ট্যাবে একটি কী তৈরি করুন ক্লিক করুন।

2. কীটির নাম লিখুন এবং Apple Push Notifications Services (APNs) চেক করুন।
3. কী ফাইলটি ডাউনলোড করুন, যার একটি .p8 ফাইল এক্সটেনশন রয়েছে।
4. Firebase কনসোলে , প্রজেক্টের প্রজেক্ট সেটিংসে নেভিগেট করুন এবং ক্লাউড মেসেজিং ট্যাবটি বেছে নিন।

5. ক্লাউড মেসেজিং ট্যাবে iOS অ্যাপের জন্য APNs কী ফাইল আপলোড করুন। ক্লাউড মেসেজিং ট্যাব এবং টিম আইডি থেকে APNs কী আইডি লিখুন, যা অ্যাপল সদস্যতা কেন্দ্রে পাওয়া যাবে।

4. FCM প্রস্তুতি

একটি অ্যাপ FCM থেকে বার্তা গ্রহণ করার আগে, এটির প্রয়োজন:

• FlutterFire শুরু করুন।
• বিজ্ঞপ্তি অনুমতি অনুরোধ.
• একটি রেজিস্ট্রেশন টোকেন পেতে FCM এর সাথে নিবন্ধন করুন৷

আরম্ভ

পরিষেবা শুরু করতে, এই কোড দিয়ে প্রধান ফাংশন ( lib/main.dart ) প্রতিস্থাপন করুন:

// 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());
}

তারপর টুলগুলি চালান -> Flutter -> Flutter Pub সেট আপ ফ্লুটারফায়ারে যোগ করা প্যাকেজগুলি লোড করতে অ্যান্ড্রয়েড স্টুডিওতে যান এবং অ্যান্ড্রয়েড স্টুডিওতে উপযুক্ত ইন্টেলিসেন্স সেটিং সহ কোডটি প্রদর্শন করুন৷

এটি বর্তমান প্ল্যাটফর্ম DefaultFirebaseOptions.currentPlatform এর জন্য FlutterFire শুরু করে, যা তৈরি করা firebase_options.dart ফাইল থেকে আমদানি করা হয়। নোট করুন যে initializeApp একটি অ্যাসিঙ্ক্রোনাস ফাংশন, এবং await কীওয়ার্ডটি নিশ্চিত করে যে অ্যাপ্লিকেশনটি চালানোর আগে প্রাথমিককরণ সম্পূর্ণ হয়েছে।

অনুমতির অনুরোধ

বিজ্ঞপ্তি পাওয়ার জন্য অ্যাপটিকে ব্যবহারকারীর অনুমতি চাইতে হবে। firebase_messaging দ্বারা প্রদত্ত requestPermission পদ্ধতিটি একটি ডায়ালগ বা পপআপ দেখায় যা ব্যবহারকারীকে অনুমতি দিতে বা অস্বীকার করার অনুরোধ করে।

প্রথমে, TODO: Request permission মন্তব্যের অধীনে প্রধান ফাংশনে এই কোডটি কপি করুন। প্রত্যাবর্তিত settings আপনাকে বলে যে ব্যবহারকারী অনুমতি দিয়েছেন কিনা। আমরা শুধুমাত্র তখনই অনুমতির অনুরোধ করার পরামর্শ দিই যখন ব্যবহারকারীর এমন একটি বৈশিষ্ট্য ব্যবহার করতে হয় যার জন্য অ্যাক্সেসের প্রয়োজন হয় (যেমন, যখন ব্যবহারকারী অ্যাপ সেটিংসে বিজ্ঞপ্তিগুলি চালু করে)। এই কোডল্যাবে, আমরা সরলতার জন্য অ্যাপ স্টার্টআপের অনুমতির অনুরোধ করি।

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}');
 }

এরপরে, অ্যান্ড্রয়েড স্টুডিও টুলবারে, লক্ষ্য নির্বাচক থেকে Chrome (web) নির্বাচন করুন এবং তারপরে আবার অ্যাপটি চালান।

তারপরে, অনুমতি চেয়ে একটি পপআপ সহ একটি Chrome ট্যাব চালু হয়। আপনি যদি Allow এ ক্লিক করেন, তাহলে আপনি Android স্টুডিও কনসোলে একটি লগ দেখতে পাবেন: Permission granted: AuthorizationStatus.authorized । আপনি অনুমতির অনুরোধ অনুমোদন বা ব্লক করার পরে, আপনার প্রতিক্রিয়া ব্রাউজারে আপনার অ্যাপের সাথে সংরক্ষণ করা হয় এবং পপ-আপটি আবার দেখানো হয় না। মনে রাখবেন যে আপনি যখন অ্যান্ড্রয়েড স্টুডিওতে আবার ওয়েব অ্যাপ চালাবেন, তখন আপনাকে আবার অনুমতির জন্য অনুরোধ করা হতে পারে।

নিবন্ধন

TODO: Register with FCM ৷ getToken কলটি একটি রেজিস্ট্রেশন টোকেন প্রদান করে যা অ্যাপ সার্ভার বা বিশ্বস্ত সার্ভার পরিবেশ ব্যবহারকারীদের বার্তা পাঠাতে ব্যবহার করতে পারে।

// 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');
}

অ্যান্ড্রয়েড স্টুডিও টুলবারে, একটি অ্যান্ড্রয়েড ডিভাইস নির্বাচন করুন এবং অ্যাপটি চালান। অ্যান্ড্রয়েড স্টুডিও কনসোলে, নিবন্ধন টোকেনটি এভাবে প্রিন্ট করা হয়:

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

এটি একটি পাঠ্য সম্পাদকে অনুলিপি করুন, যেহেতু আপনি এটি পরে বার্তা পাঠানোর জন্য ব্যবহার করবেন৷

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

ওয়েবে বার্তা পাওয়ার জন্য অতিরিক্ত পদক্ষেপ

রেজিস্ট্রেশন টোকেন পেতে এবং ইনকামিং মেসেজ শোনার জন্য ওয়েব অ্যাপের দুটি অতিরিক্ত ধাপ প্রয়োজন। সমর্থিত ওয়েব পুশ পরিষেবাগুলিতে অনুরোধ পাঠানোর অনুমোদন দেওয়ার জন্য ওয়েবকে getToken এর জন্য একটি VAPID কী পাস করতে হবে৷

প্রথমে, Firebase কনসোলে Firebase প্রকল্পের ক্লাউড মেসেজিং ট্যাবটি খুলুন, বিদ্যমান কী জোড়া খুঁজতে ওয়েব কনফিগারেশন বিভাগে স্ক্রোল করুন, অথবা একটি নতুন কী জোড়া তৈরি করুন। কীটি অনুলিপি করতে হাইলাইট করা বোতামে ক্লিক করুন যাতে এটি একটি vapidKey হিসাবে ব্যবহার করা যায়।

এরপরে, এই কোড দিয়ে রেজিস্ট্রেশন বিভাগে রেজিস্ট্রেশন কোড প্রতিস্থাপন করুন এবং তারপর vapidKey আপডেট করুন:

// 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');
 }

তারপর, আপনার প্রোজেক্টের রুটে web/ ডিরেক্টরির নীচে একটি firebase-messaging-sw.js ফাইল তৈরি করুন। ওয়েব অ্যাপটিকে onMessage ইভেন্টগুলি পেতে অনুমতি দিতে নিম্নলিখিতটি firebase-messaging-sw.js এ অনুলিপি করুন৷ আরও তথ্যের জন্য পরিষেবা কর্মীর মধ্যে বিজ্ঞপ্তি বিকল্পগুলি সেট করা দেখুন৷

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

এর পরে, প্রজেক্ট সেটিংস -> সাধারণ ট্যাবের অধীনে, স্ক্রোল করুন এবং ওয়েব অ্যাপটি খুঁজুন, firebaseConfig কোড বিভাগটি অনুলিপি করুন এবং এটি firebase-messaging-sw.js এ পেস্ট করুন।

অবশেষে, অ্যান্ড্রয়েড স্টুডিও টুলবারে, টার্গেট সিলেক্টরে Chrome (web) নির্বাচন করুন এবং অ্যাপটি চালান। অ্যান্ড্রয়েড স্টুডিও কনসোলে, নিবন্ধন টোকেনটি এভাবে প্রিন্ট করা হয়:

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

একটি টেক্সট এডিটরে নিবন্ধন টোকেনটি অনুলিপি করুন যাতে আপনি পরে বার্তা পাঠাতে এটি ব্যবহার করতে পারেন।

iOS-এ বার্তা পাওয়ার জন্য অতিরিক্ত পদক্ষেপ

FCM থেকে বার্তাগুলি পেতে, iOS ডিভাইসগুলিকে Xcode-এ পুশ বিজ্ঞপ্তি এবং ব্যাকগ্রাউন্ড মোডগুলি সক্ষম করতে হবে:

1. অ্যান্ড্রয়েড স্টুডিওতে, প্রকল্পের নামের উপর ডান-ক্লিক করুন এবং তারপরে ফ্লটার -> Xcode-এ iOS মডিউল খুলুন নির্বাচন করুন।
2. Xcode চালু হওয়ার পরে, প্রকল্প লক্ষ্যের জন্য সাইনিং এবং সক্ষমতা ট্যাবে পুশ বিজ্ঞপ্তি এবং পটভূমি মোড সক্ষম করুন। আরও তথ্যের জন্য আপনার অ্যাপ কনফিগার করুন দেখুন।
3. অ্যান্ড্রয়েড স্টুডিও টুলবারে, লক্ষ্য নির্বাচকে একটি iOS ডিভাইস নির্বাচন করুন এবং অ্যাপটি চালান। বিজ্ঞপ্তির অনুমতি মঞ্জুর হওয়ার পরে, রেজিস্ট্রেশন টোকেনটি অ্যান্ড্রয়েড স্টুডিও কনসোলে প্রিন্ট করা হয়।

অভিনন্দন, আপনি সফলভাবে আপনার অ্যাপটি FCM-এর সাথে নিবন্ধন করেছেন। আপনি বার্তা গ্রহণের জন্য প্রস্তুত, যেমনটি পরবর্তী বিভাগে বর্ণিত হয়েছে।

5. FCM থেকে বার্তা গ্রহণ করুন৷

বার্তা হ্যান্ডলার সেট আপ করুন

অ্যাপটি ফোরগ্রাউন্ড মোডে থাকাকালীন বার্তাগুলি আসার সময় অ্যাপটিকে onMessage ইভেন্টগুলি পরিচালনা করতে হবে এবং যখন অ্যাপটি ব্যাকগ্রাউন্ডে থাকে তখন onBackgroundMessage ইভেন্টগুলি পরিচালনা করতে হবে৷

ফোরগ্রাউন্ড মেসেজ হ্যান্ডলার

প্রথমে, মন্তব্যের পরে একটি স্ট্রীম কন্ট্রোলার যোগ করুন TODO: Add stream controller ইভেন্ট হ্যান্ডলার থেকে UI-তে বার্তা পাঠানোর জন্য ফাইল main.dart এ স্ট্রিম কন্ট্রোলার যোগ করুন।

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

নির্ভরতা rxdart যোগ করতে, প্রকল্প ডিরেক্টরি থেকে এই কমান্ডটি চালান: flutter pub add rxdart ।

এর পরে, টুলগুলি চালান -> ফ্লাটার -> ফ্লাটার পাব rxdart.dart প্যাকেজ লোড করতে অ্যান্ড্রয়েড স্টুডিওতে উপযুক্ত ইন্টেলিসেন্স সেটিংস সহ কোডটি প্রদর্শন করতে অ্যান্ড্রয়েড স্টুডিওতে যান৷

তারপর, মন্তব্যের পরে ফোরগ্রাউন্ড বার্তাগুলি শুনতে একটি ইভেন্ট হ্যান্ডলার যোগ করুন TODO: Set up foreground message handler ৷ এটি লগ প্রিন্ট করে এবং স্ট্রিম কন্ট্রোলারে বার্তা প্রকাশ করে।

 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);
 });

তারপরে, মূল স্টেট উইজেটটি main.dart ফাইলে এই কোড দিয়ে প্রতিস্থাপন করুন, যা স্টেট উইজেটে স্ট্রিম কন্ট্রোলারে একজন গ্রাহককে যুক্ত করে এবং উইজেটে শেষ বার্তা প্রদর্শন করে।

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-এর জন্য পটভূমি বার্তা হ্যান্ডলার

অ্যাপটি ব্যাকগ্রাউন্ডে থাকাকালীন বার্তাগুলি onBackgroundMessage হ্যান্ডলার দ্বারা পরিচালিত হয়৷ হ্যান্ডলার একটি শীর্ষ-স্তরের ফাংশন হওয়া উচিত। বার্তাগুলি পরিচালনা করে ( হ্যান্ডলিং ইন্টারঅ্যাকশন দেখুন) বা অ্যাপ সার্ভারের সাথে সিঙ্ক করে অ্যাপটিকে অগ্রভাগে আনা হলে UI আপডেট করা যেতে পারে।

মন্তব্যের পরে হ্যান্ডলার ফাংশন তৈরি করুন TODO: Define the background message handler এবং মন্তব্যের পরে এটিকে প্রধান ফাংশনে কল করুন TODO: Set up background message handler ৷

// 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());
}

ওয়েবের জন্য পটভূমি বার্তা হ্যান্ডলার

FlutterFire firebase_messaging সংস্করণ 11.2.8 অনুযায়ী, ওয়েব-ভিত্তিক প্ল্যাটফর্মে ব্যাকগ্রাউন্ড বার্তা পরিচালনার জন্য একটি ভিন্ন প্রবাহের প্রয়োজন। অতএব, আপনাকে পরিষেবা কর্মী web/firebase-messaging-sw.js এ একটি পৃথক বার্তা হ্যান্ডলার যোগ করতে হবে।

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

অ্যাপ সার্ভার সেট আপ করুন

1. অ্যান্ড্রয়েড স্টুডিওতে https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server প্রজেক্ট খুলে স্টার্টার সার্ভার কোড আমদানি করুন। সার্ভারটি ফায়ারবেস-অ্যাডমিন SDK-এর উপর নির্ভরতা সহ একটি গ্রেডল-ভিত্তিক জাভা প্রকল্প, যা FCM বার্তা প্রেরণ কার্যকারিতা প্রদান করে।
2. একটি Firebase পরিষেবা অ্যাকাউন্ট সেট আপ করুন যা Firebase অ্যাডমিন SDK-কে FCM API-তে কল অনুমোদন করতে দেয়৷ Firebase কনসোলে প্রজেক্ট সেটিংস খুলুন এবং পরিষেবা অ্যাকাউন্ট ট্যাব নির্বাচন করুন। 'জাভা' নির্বাচন করুন এবং কনফিগারেশন স্নিপেট ডাউনলোড করতে Generate new private key ক্লিক করুন।
3. ফাইলটিকে service-account.json এ পুনঃনামকরণ করুন এবং সার্ভার প্রকল্পের src/main/resources পাথে অনুলিপি করুন।

একটি পরীক্ষা বার্তা পাঠান

FcmSender.java ফাইলে, sendMessageToFcmRegistrationToken একটি ডেটা পেলোড সহ একটি বিজ্ঞপ্তি বার্তা রচনা করে৷ রেজিস্ট্রেশন টোকেন সেই অ্যাপ ইন্সট্যান্সকে লক্ষ্য করে যেখানে মেসেজ পাঠানো হয়েছে।

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. রেজিস্ট্রেশন সেকশন থেকে কপি করা অ্যান্ড্রয়েড রেজিস্ট্রেশন টোকেনটি কপি করুন এবং ভ্যারিয়েবল registrationToken ভ্যালুতে পেস্ট করুন।
2. রান ক্লিক করুন প্রধান ফাংশন চালাতে এবং FCM এর মাধ্যমে ব্যবহারকারীকে বার্তা পাঠাতে।

যখন অ্যান্ড্রয়েড অ্যাপটি ব্যাকগ্রাউন্ডে থাকে, তখন বার্তাটি বিজ্ঞপ্তি ট্রেতে উপস্থিত হয়।

যখন অ্যান্ড্রয়েড অ্যাপটি ফোরগ্রাউন্ডে থাকে, তখন আপনি অ্যান্ড্রয়েড স্টুডিও কনসোলে একটি লগ দেখতে পাবেন: "একটি ফোরগ্রাউন্ড বার্তা পরিচালনা করা"। বার্তার বিষয়বস্তু UI-তেও প্রদর্শিত হয় কারণ UI নতুন বার্তাগুলির জন্য স্ট্রিম কন্ট্রোলারে সাবস্ক্রাইব করা হয়েছে।

আপনি যদি রেজিস্ট্রেশন টোকেন পেস্ট করেন এবং অ্যাপ সার্ভার বা অন্য বিশ্বস্ত সার্ভার পরিবেশ থেকে বার্তা পাঠান, তাহলে আপনি একই আচরণ দেখতে পাবেন:

• যখন ওয়েব অ্যাপটি ব্যাকগ্রাউন্ডে থাকে (অর্থাৎ, যখন এটি অন্য উইন্ডোতে লুকানো থাকে বা অন্য ট্যাব সক্রিয় থাকে), তখন আপনি একটি ওয়েব বিজ্ঞপ্তি দেখতে পাবেন।

• যখন ওয়েব অ্যাপটি অগ্রভাগে থাকে, আপনি ওয়েবে ডান-ক্লিক করে এবং Inspect নির্বাচন করে Chrome কনসোলে লগ দেখতে পারেন৷ বার্তার বিষয়বস্তু UI-তেও প্রদর্শিত হয়।

6. একটি বিষয় বার্তা পাঠান

FCM HTTP v1 API-এর প্ল্যাটফর্ম ওভাররাইড বৈশিষ্ট্যটি বিভিন্ন প্ল্যাটফর্মে বিভিন্ন আচরণের জন্য একটি বার্তা প্রেরণের অনুরোধকে সক্ষম করে। এই বৈশিষ্ট্যটির একটি ব্যবহারের ক্ষেত্রে প্ল্যাটফর্মের উপর ভিত্তি করে বিভিন্ন বিজ্ঞপ্তি বার্তা সামগ্রী প্রদর্শন করা। বিষয় মেসেজিং সহ একাধিক ডিভাইস (যা একাধিক প্ল্যাটফর্ম জুড়ে থাকতে পারে) লক্ষ্য করার সময় বৈশিষ্ট্যটি সবচেয়ে বেশি ব্যবহৃত হয়। এই বিভাগটি আপনাকে প্রতিটি প্ল্যাটফর্মের জন্য কাস্টমাইজ করা একটি বিষয়ের বার্তা আপনার অ্যাপকে প্রাপ্ত করার জন্য পদক্ষেপের মধ্য দিয়ে চলে।

ক্লায়েন্ট থেকে একটি বিষয় সদস্যতা

একটি বিষয় সাবস্ক্রাইব করতে, Flutter অ্যাপের main.dart ফাইলে প্রধান ফাংশন শেষে messaging.subscribeToTopic পদ্ধতিতে কল করুন।

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

[ঐচ্ছিক] ওয়েব সার্ভার থেকে একটি বিষয় সদস্যতা

আপনি যদি ওয়েব প্ল্যাটফর্মে বিকাশ না করেন তবে আপনি এই বিভাগটি এড়িয়ে যেতে পারেন।

FCM JS SDK বর্তমানে ক্লায়েন্ট-সাইড বিষয় সদস্যতা সমর্থন করে না। পরিবর্তে, আপনি অ্যাডমিন SDK-এর সার্ভার-সাইড টপিক ম্যানেজমেন্ট API ব্যবহার করে সদস্যতা নিতে পারেন। এই কোডটি জাভা অ্যাডমিন SDK-এর সাথে সার্ভার-সাইড বিষয় সাবস্ক্রিপশনকে চিত্রিত করে।

 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());
 }

অ্যাপ সার্ভার খুলুন এবং রান ক্লিক করুন FcmSubscriptionManager.java ফাইলে প্রধান ফাংশন চালানোর জন্য:

একটি বিষয়ে প্ল্যাটফর্ম ওভাররাইড সহ একটি বার্তা পাঠান৷

এখন আপনি একটি বিষয় প্ল্যাটফর্ম ওভাররাইড বার্তা পাঠাতে প্রস্তুত৷ নিম্নলিখিত কোড স্নিপেটে:

• আপনি একটি বেস মেসেজ এবং " A new app is available " শিরোনাম সহ একটি প্রেরণের অনুরোধ তৈরি করুন৷
• বার্তাটি iOS এবং ওয়েব প্ল্যাটফর্মে " A new app is available " শিরোনাম সহ একটি প্রদর্শন বিজ্ঞপ্তি তৈরি করে৷
• বার্তাটি Android ডিভাইসে " A new Android app is available " শিরোনাম সহ একটি প্রদর্শন বিজ্ঞপ্তি তৈরি করে৷

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 ফাইলের প্রধান ফাংশনে, uncomment sendMessageToFcmTopic(); . রান ক্লিক করুন বিষয় বার্তা পাঠাতে.

7. সারাংশ এবং পরবর্তী কি

সংক্ষেপে বলতে গেলে, আপনি ফ্লটার এবং এফসিএম ব্যবহার করে মাল্টি-প্ল্যাটফর্ম অ্যাপ ডেভেলপমেন্টকে জড়িত করার বিষয়ে শিখেছেন, যার মধ্যে রয়েছে পরিবেশ সেটআপ, নির্ভরশীলতা একীকরণ এবং বার্তা গ্রহণ ও পাঠানো। আরও গভীরে যেতে, নিম্নলিখিত উপকরণগুলি দেখুন:

কোডল্যাব

• ব্যবহারকারীর প্রমাণীকরণ এবং সিঙ্কিং ডেটা সহ অন্যান্য ফায়ারবেস পণ্যগুলির সাথে ফ্লটার কীভাবে কাজ করে সে সম্পর্কে আরও জানতে, ফ্লটারের জন্য ফায়ারবেস সম্পর্কে জানুন দেখুন।
• অ্যাপ-মধ্যস্থ বার্তা এবং বিষয় সহ FCM সম্পর্কে আরও জানতে: ব্যবহারকারীদের বার্তা পাঠাতে FCM এবং FIAM ব্যবহার করুন এবং FCM বিষয়গুলি ব্যবহার করে আপনার প্রথম মাল্টিকাস্ট পুশ বার্তা

তথ্যসূত্র

• ফায়ারবেস সাইট
• ফ্লাটার সাইট
• ফ্লাটারফায়ার ফায়ারবেস ফ্লাটার উইজেট
• ফায়ারবেস ইউটিউব চ্যানেল
• ফ্লাটার ইউটিউব চ্যানেল