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

১. ভূমিকা

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

পূর্বশর্ত

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

আপনি যা শিখবেন

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

আপনার যা যা লাগবে

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

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

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

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

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

একটি ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন

আপনার যদি আগে থেকেই ফ্লাটার ডেভেলপমেন্ট এনভায়রনমেন্ট তৈরি করা থাকে, তাহলে এই অংশটি এড়িয়ে যান।

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

1. আপনার অপারেটিং সিস্টেমের জন্য ফ্লাটার ডাউনলোড এবং ইনস্টল করুন: ইনস্টল | ফ্লাটার
2. নিশ্চিত করুন যে ফ্লাটার টুলটি আপনার পাথে যুক্ত করা আছে।
3. "একটি এডিটর সেট আপ করুন | ফ্লাটার" অংশে দেখানো অনুযায়ী আপনার ফ্লাটার এডিটর সেট আপ করুন। আপনার এডিটরের জন্য ফ্লাটার এবং ডার্ট প্লাগইন ইনস্টল করতে ভুলবেন না। এই কোডল্যাবের বাকি অংশের জন্য, আপনি অ্যান্ড্রয়েড স্টুডিও ব্যবহার করবেন।
4. কমান্ড লাইন থেকে flutter doctor চালান, যা আপনার সেটআপ স্ক্যান করে এবং ঠিক করার প্রয়োজন এমন কোনো অনুপস্থিত ডিপেন্ডেন্সি থাকলে তার একটি তালিকা তৈরি করে। গুরুত্বপূর্ণ অনুপস্থিত ডিপেন্ডেন্সিগুলো ঠিক করার জন্য নির্দেশাবলী অনুসরণ করুন। মনে রাখবেন, কিছু ডিপেন্ডেন্সি প্রয়োজনীয় নাও হতে পারে। উদাহরণস্বরূপ, আপনি যদি iOS-এর জন্য ডেভেলপ না করেন, তাহলে একটি অনুপস্থিত CocoaPods ডিপেন্ডেন্সি কোনো বড় বাধা সৃষ্টি করবে না।

একটি ফ্লাটার প্রজেক্ট তৈরি করুন

1. আপনার ফ্লাটার অ্যাপ তৈরি করতে নিম্নলিখিত কমান্ডগুলি চালান এবং তারপরে এর ডিরেক্টরিতে যান:

   flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter
   cd fcmflutter
   

2. অ্যান্ড্রয়েড স্টুডিওতে, File -> Open- এ যান, আপনার ফ্লাটার অ্যাপের পাথটি খুঁজুন এবং তারপর অ্যান্ড্রয়েড স্টুডিওতে প্রজেক্টটি খোলার জন্য Open-এ ক্লিক করুন। অ্যাপের কোডটি lib/main.dart ফাইলে রয়েছে।
3. অ্যান্ড্রয়েড স্টুডিও টুলবারে, একটি অ্যান্ড্রয়েড ডিভাইস নির্বাচন করতে ডাউন অ্যারোতে ক্লিক করুন। যদি টার্গেট সিলেক্টরটি খালি থাকে, তবে ভার্চুয়াল অ্যান্ড্রয়েড ডিভাইস ইনস্টল করুন, অথবা আপনি যদি কোনো ওয়েব ব্রাউজার বা আইওএস ডিভাইস থেকে অ্যাপটি চালু করতে চান, তাহলে ক্রোম ব্রাউজার বা আইওএস সিমুলেটর ইনস্টল করুন। টার্গেট ডিভাইসটি খুঁজে পেতে আপনাকে ডিভাইসটি ম্যানুয়ালি চালু করতে এবং তালিকাটি রিফ্রেশ করতে হতে পারে।

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

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

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

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

• একটি ফায়ারবেস প্রজেক্ট।
• একটি কার্যকর ফায়ারবেস সিএলআই।
• ফ্লাটারফায়ারের একটি ইনস্টলেশন।
• flutterfire configure দিয়ে একটি অ্যাপ কনফিগার ও জেনারেট করা হয়েছে।

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

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

1. আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
2. নতুন প্রজেক্ট তৈরি করতে বাটনটিতে ক্লিক করুন এবং তারপর একটি প্রজেক্টের নাম লিখুন (উদাহরণস্বরূপ, fcm4flutter )।
   
3. চালিয়ে যান-এ ক্লিক করুন।
4. অনুরোধ করা হলে, Firebase-এর শর্তাবলী পর্যালোচনা করে গ্রহণ করুন এবং তারপর 'চালিয়ে যান' (Continue ) বোতামে ক্লিক করুন।
5. (ঐচ্ছিক) Firebase কনসোলে AI সহায়তা সক্রিয় করুন (Firebase-এ এটিকে "Gemini" বলা হয়)।
6. এই কোডল্যাবের জন্য আপনার গুগল অ্যানালিটিক্স-এর প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স অপশনটি বন্ধ করে দিন ।
7. Create project-এ ক্লিক করুন, আপনার প্রজেক্টটি প্রস্তুত হওয়া পর্যন্ত অপেক্ষা করুন, এবং তারপর Continue-তে ক্লিক করুন।

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

ফায়ারবেস সিএলআই সেট আপ করুন

আপনার যদি 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_ID
   

   প্রথম ধাপে তৈরি করা Firebase প্রজেক্টের আইডি দিয়ে PROJECT_ID প্রতিস্থাপন করুন। প্ল্যাটফর্ম নির্বাচন করতে অ্যারো কী এবং স্পেস ব্যবহার করুন অথবা ডিফল্ট প্ল্যাটফর্ম ব্যবহার করতে এন্টার চাপুন।

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

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

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

1. Apple ডেভেলপার পেজে যান এবং Keys ট্যাবে থাকা Create a key- তে ক্লিক করুন।

2. কী-টির জন্য নাম লিখুন এবং অ্যাপল পুশ নোটিফিকেশন সার্ভিসেস (APNs) চেক করুন।
3. মূল ফাইলটি ডাউনলোড করুন, যেটির ফাইল এক্সটেনশন হলো .p8 ।
4. Firebase কনসোলে , প্রজেক্টের ' প্রজেক্ট সেটিংস' -এ যান এবং ' ক্লাউড মেসেজিং' ট্যাবটি নির্বাচন করুন।

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

৪. এফসিএম প্রস্তুতি

FCM থেকে বার্তা গ্রহণ করার আগে একটি অ্যাপকে নিম্নলিখিত শর্তগুলো পূরণ করতে হবে:

• FlutterFire শুরু করুন।
• বিজ্ঞপ্তির অনুমতি অনুরোধ করুন।
• রেজিস্ট্রেশন টোকেন পেতে এফসিএম-এ নিবন্ধন করুন।

প্রারম্ভিকীকরণ

সার্ভিসটি চালু করতে, lib/main.dart ফাইলের main ফাংশনটিকে এই কোড দিয়ে প্রতিস্থাপন করুন:

// 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
 // TODO: Subscribe to a topic

 runApp(MyApp());
}

এরপর, 'FlutterFire সেট আপ করুন' -এ যোগ করা প্যাকেজগুলো লোড করতে Android Studio-তে Tools -> Flutter -> Flutter Pub Get চালান এবং Android Studio-তে উপযুক্ত ইন্টেলিসেন্স সেটিং সহ কোডটি প্রদর্শন করুন।

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

অনুমতির জন্য অনুরোধ করুন

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

প্রথমে, এই কোডটি TODO: Request permission কমেন্টের নিচে `main` ফাংশনে কপি করুন। রিটার্ন করা 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) নির্বাচন করুন এবং তারপর অ্যাপটি আবার চালান।

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

নিবন্ধন

TODO: Register with FCM FCM কমেন্টের নিচের এই কোডটি main ফাংশনে কপি করুন। 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 Console-এ Firebase প্রজেক্টের Cloud Messaging ট্যাবটি খুলুন, Web configuration সেকশন পর্যন্ত স্ক্রল করে বিদ্যমান কী পেয়ারটি খুঁজুন, অথবা একটি নতুন কী পেয়ার তৈরি করুন। কী-টি কপি করার জন্য হাইলাইট করা বাটনটিতে ক্লিক করুন, যাতে এটি 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: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

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

// todo Set up background message handler

এরপরে, প্রজেক্ট সেটিংস -> জেনারেল ট্যাবের নিচে স্ক্রল করে ওয়েব অ্যাপ (Web App) খুঁজুন, সেখান থেকে 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. অ্যান্ড্রয়েড স্টুডিওতে, প্রজেক্ট ফাইল ট্রি-তে থাকা ios ফোল্ডারটিতে ক্লিক করুন এবং তারপর Tools -> Flutter -> Open iOS module in XCode নির্বাচন করুন।
2. Xcode চালু হওয়ার পর, প্রোজেক্ট টার্গেটের জন্য Signing & Capabilities ট্যাবে পুশ নোটিফিকেশন এবং ব্যাকগ্রাউন্ড মোড সক্রিয় করুন। আরও তথ্যের জন্য আপনার অ্যাপ কনফিগার করুন দেখুন।
3. অ্যান্ড্রয়েড স্টুডিও টুলবারে, টার্গেট সিলেক্টরে একটি iOS ডিভাইস নির্বাচন করুন এবং অ্যাপটি চালান। নোটিফিকেশন অনুমতি মঞ্জুর হওয়ার পর, রেজিস্ট্রেশন টোকেনটি অ্যান্ড্রয়েড স্টুডিও কনসোলে প্রিন্ট হয়।

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

৫. এফসিএম থেকে বার্তা গ্রহণ করুন

মেসেজ হ্যান্ডলার সেট আপ করুন

অ্যাপটি ফোরগ্রাউন্ড মোডে থাকা অবস্থায় মেসেজ এলে onMessage ইভেন্ট এবং ব্যাকগ্রাউন্ডে থাকা অবস্থায় onBackgroundMessage ইভেন্ট হ্যান্ডেল করতে হবে।

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

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

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 প্যাকেজটি লোড করতে এবং অ্যান্ড্রয়েড স্টুডিওতে উপযুক্ত ইন্টেলিসেন্স সেটিংস সহ কোডটি প্রদর্শন করতে, অ্যান্ড্রয়েড স্টুডিওতে Tools -> Flutter -> Flutter Pub Get চালান।

এরপর, 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 ফাইলের শেষে অবস্থিত মূল State উইজেটটিকে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন, যা State উইজেটের স্ট্রিম কন্ট্রোলারে একটি সাবস্ক্রাইবার যুক্ত করে এবং উইজেটটিতে সর্বশেষ বার্তাটি প্রদর্শন করে।

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

অ্যান্ড্রয়েড/আইওএস এর জন্য ব্যাকগ্রাউন্ড মেসেজ হ্যান্ডলার

অ্যাপটি ব্যাকগ্রাউন্ডে থাকাকালীন 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 ক্লোন করুন এবং অ্যান্ড্রয়েড স্টুডিওতে একটি নতুন প্রজেক্ট হিসেবে খুলুন। সার্ভারটি একটি গ্রেডল-ভিত্তিক জাভা প্রজেক্ট, যা firebase-admin SDK-এর উপর নির্ভরশীল এবং এই SDK-টিই FCM মেসেজ পাঠানোর কার্যকারিতা প্রদান করে।
2. একটি Firebase সার্ভিস অ্যাকাউন্ট সেট আপ করুন যা Firebase অ্যাডমিন SDK-কে FCM API-গুলিতে কল করার অনুমোদন দেয়। Firebase কনসোলে প্রজেক্ট সেটিংস খুলুন এবং সার্ভিস অ্যাকাউন্টস ট্যাবটি নির্বাচন করুন। 'Java' বেছে নিন এবং কনফিগারেশন স্নিপেটটি ডাউনলোড করতে ' 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-এর মাধ্যমে ব্যবহারকারীকে বার্তাটি পাঠানো।

অ্যান্ড্রয়েড অ্যাপটি ব্যাকগ্রাউন্ডে থাকলে, বার্তাটি নোটিফিকেশন ট্রে-তে দেখা যায়।

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

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

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

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

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

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

ক্লায়েন্টের কাছ থেকে একটি বিষয়ে সাবস্ক্রাইব করুন

কোনো টপিকে সাবস্ক্রাইব করতে, এই কোডটি মেইন ফাংশনে TODO: Subscribe to a topic : কমেন্টের নিচে কপি করুন।

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

[ঐচ্ছিক] ওয়েবের জন্য সার্ভার থেকে একটি টপিকে সাবস্ক্রাইব করুন

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

FCM JS SDK বর্তমানে ক্লায়েন্ট-সাইড টপিক সাবস্ক্রিপশন সমর্থন করে না। এর পরিবর্তে, আপনি অ্যাডমিন SDK-এর সার্ভার-সাইড টপিক ম্যানেজমেন্ট API ব্যবহার করে সাবস্ক্রাইব করতে পারেন। FcmSubscriptionManager.java ফাইলের এই কোডটি জাভা অ্যাডমিন SDK ব্যবহার করে সার্ভার-সাইড টপিক সাবস্ক্রিপশনের একটি উদাহরণ। এটি চালানোর আগে আপনার FCM রেজিস্ট্রেশন টোকেন যোগ করতে ভুলবেন না:

 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 " শিরোনামে একটি ডিসপ্লে নোটিফিকেশন তৈরি করে।
• এই বার্তাটি অ্যান্ড্রয়েড ডিভাইসগুলিতে " 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 ফাইলের main ফাংশনে, sendMessageToFcmTopic(); লাইনটির কমেন্ট তুলে দিন। Run-এ ক্লিক করুন। বিষয় বার্তাটি পাঠাতে।

৭. সারসংক্ষেপ এবং পরবর্তী পদক্ষেপ

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

কোডল্যাবস

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

তথ্যসূত্র

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