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

1. ভূমিকা

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

পূর্বশর্ত

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

তুমি কি শিখবে

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

তোমার যা লাগবে

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

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

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

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

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

একটি Flutter ডেভেলপমেন্ট পরিবেশ সেট আপ করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

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

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

  1. আপনার Flutter অ্যাপ তৈরি করতে নিম্নলিখিত কমান্ডগুলি চালান, এবং তারপরে এর ডিরেক্টরিতে নেভিগেট করুন:
    flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter
    cd fcmflutter
    
  2. অ্যান্ড্রয়েড স্টুডিওতে, File -> Open এ যান, আপনার Flutter অ্যাপের পথটি খুঁজুন এবং তারপর Android স্টুডিওতে প্রজেক্টটি খুলতে Open এ ক্লিক করুন। অ্যাপ কোডটি lib/main.dart ফাইলে রয়েছে।
  3. অ্যান্ড্রয়েড স্টুডিও টুলবারে, একটি অ্যান্ড্রয়েড ডিভাইস নির্বাচন করতে ডাউন তীর চিহ্নে ক্লিক করুন। যদি টার্গেট সিলেক্টর খালি থাকে, তাহলে ভার্চুয়াল অ্যান্ড্রয়েড ডিভাইস ইনস্টল করুন, অথবা যদি আপনি ওয়েব ব্রাউজার বা iOS ডিভাইস থেকে অ্যাপটি চালু করতে চান তবে Chrome ব্রাউজার বা iOS সিমুলেটর ইনস্টল করুন। টার্গেট ডিভাইসটি খুঁজে পেতে আপনাকে ম্যানুয়ালি ডিভাইসটি চালু করতে এবং তালিকাটি রিফ্রেশ করতে হতে পারে।

একটি অ্যান্ড্রয়েড স্টুডিও টুলবার যেখানে বিল্ড টার্গেট মেনু ড্রপ ডাউন তীরটি হাইলাইট করা হয়েছে।

রান ক্লিক করুন অ্যান্ড্রয়েড স্টুডিওতে রান বোতাম অ্যাপটি চালু করতে।

একটি চালু হওয়া ফ্লাটার ডেমো অ্যাপের UI

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

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

Flutter ব্যবহার করে Firebase Cloud Messaging এর সাথে একীভূত একটি অ্যাপ তৈরি করতে, আপনার প্রয়োজন:

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

আপনার Firebase প্রকল্প তৈরি করুন

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

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

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

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

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

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

firebase login

FlutterFire সেট আপ করুন

অ্যান্ড্রয়েড স্টুডিওতে আপনার প্রোজেক্টের কমান্ড লাইনটি খুলুন ( View -> Tool Windows -> Terminal ) এবং 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. Flutter-এ Firebase প্রকল্পটি কনফিগার করুন:
    flutterfire configure --PROJECT_ID
    
    প্রথম ধাপে তৈরি করা Firebase প্রকল্পের আইডি দিয়ে PROJECT_ID প্রতিস্থাপন করুন। প্ল্যাটফর্মগুলি নির্বাচন করতে তীর কী এবং স্পেস ব্যবহার করুন অথবা ডিফল্ট প্ল্যাটফর্মগুলি ব্যবহার করতে Enter টিপুন।

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

নির্বাচিত প্ল্যাটফর্মগুলির জন্য তৈরি অ্যাপগুলি দেখানো ফায়ারবেস কনসোলের একটি ক্রপ করা স্ক্রিনশট

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

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

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

অ্যাপল ডেভেলপার পৃষ্ঠার একটি ক্রপ করা স্ক্রিনশট যা কী তৈরির জন্য পৃষ্ঠার উপাদানগুলিকে হাইলাইট করে।

  1. কীটির নাম লিখুন এবং অ্যাপল পুশ নোটিফিকেশন সার্ভিসেস (APNs) চেক করুন। অ্যাপল ডেভেলপার পৃষ্ঠার একটি ক্রপ করা স্ক্রিনশট যা নতুন কী নামের টেক্সট বক্সটি হাইলাইট করছে।
  2. কী ফাইলটি ডাউনলোড করুন, যার একটি .p8 ফাইল এক্সটেনশন রয়েছে। অ্যাপল ডেভেলপার পৃষ্ঠার একটি ক্রপ করা স্ক্রিনশট যেখানে একটি কী ডাউনলোড করার বোতামটি হাইলাইট করা হয়েছে।
  3. ফায়ারবেস কনসোলে , প্রকল্পের প্রকল্প সেটিংসে নেভিগেট করুন এবং ক্লাউড মেসেজিং ট্যাবটি নির্বাচন করুন।

ফায়ারবেস কনসোল পৃষ্ঠার একটি ক্রপ করা স্ক্রিনশট যা আপডেট প্রজেক্ট সেটিংসের উপাদানগুলিকে হাইলাইট করে।

ক্লাউড মেসেজিং ট্যাব হাইলাইট করে ফায়ারবেস কনসোল পৃষ্ঠার একটি ক্রপ করা স্ক্রিনশট

  1. iOS অ্যাপের জন্য APNs কী ফাইলটি ক্লাউড মেসেজিং ট্যাবে আপলোড করুন। ক্লাউড মেসেজিং ট্যাব থেকে APNs কী আইডি এবং টিম আইডি লিখুন, যা অ্যাপল সদস্যতা কেন্দ্রে পাওয়া যাবে। ফায়ারবেস কনসোল পৃষ্ঠার একটি ক্রপ করা স্ক্রিনশট যা APN প্রমাণীকরণ কী আপলোড করার জন্য বোতামগুলি হাইলাইট করে।

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

কোনও অ্যাপ 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
 // TODO: Subscribe to a topic

 runApp(MyApp());
}

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

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

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

অ্যাপটিকে বিজ্ঞপ্তি পাওয়ার জন্য ব্যবহারকারীর অনুমতি নিতে হবে। 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 Studio কনসোলে একটি লগ দেখতে পাবেন: Permission granted: AuthorizationStatus.authorized । অনুমতি অনুরোধটি অনুমোদন বা ব্লক করার পরে, আপনার প্রতিক্রিয়া আপনার অ্যাপের সাথে ব্রাউজারে সংরক্ষণ করা হবে এবং পপ-আপটি আর প্রদর্শিত হবে না। মনে রাখবেন যে যখন আপনি Android Studio তে আবার ওয়েব অ্যাপটি চালাবেন, তখন আপনাকে আবার অনুমতির জন্য অনুরোধ করা হতে পারে।

একটি ক্রোম ট্যাবের ক্রপ করা স্ক্রিনশট যেখানে পপআপটি জিজ্ঞাসা করছে

নিবন্ধন

এই কোডটি TODO: Register with FCM FCM" মন্তব্যের নীচের প্রধান ফাংশনে কপি করুন। 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 Console-এ 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: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

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

// todo Set up background message handler

এরপর, Project Settings -> General ট্যাবের অধীনে, স্ক্রোল করে Web App খুঁজে বের করুন, firebaseConfig কোড বিভাগটি কপি করুন এবং firebase-messaging-sw.js এ পেস্ট করুন। Firebase কনফিগারেশন পৃষ্ঠার ওয়েব অ্যাপ কম্পোনেন্টের একটি ক্রপ করা স্ক্রিনশট

অবশেষে, অ্যান্ড্রয়েড স্টুডিও টুলবারে, টার্গেট সিলেক্টর থেকে 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 -> XCode এ iOS মডিউল খুলুন নির্বাচন করুন।
  2. Xcode চালু হওয়ার পর, প্রকল্প লক্ষ্যের জন্য Signing & Capabilities ট্যাবে Push Notifications এবং Background Modes সক্ষম করুন। আরও তথ্যের জন্য আপনার অ্যাপ কনফিগার করুন দেখুন।
  3. অ্যান্ড্রয়েড স্টুডিও টুলবারে, টার্গেট সিলেক্টর থেকে একটি iOS ডিভাইস নির্বাচন করুন এবং অ্যাপটি চালান। বিজ্ঞপ্তির অনুমতি পাওয়ার পর, অ্যান্ড্রয়েড স্টুডিও কনসোলে নিবন্ধন টোকেনটি প্রিন্ট করা হয়।

iOS অ্যাপ বিজ্ঞপ্তি পাঠানোর অনুমতি চাইছে

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

৫. 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

এরপর, Tools -> Flutter -> Flutter Pub চালান। rxdart.dart প্যাকেজটি লোড করতে Android Studio-তে যান এবং Android Studio-তে উপযুক্ত Intellisense সেটিংস সহ কোডটি প্রদর্শন করুন।

তারপর, মন্তব্যের পরে ফোরগ্রাউন্ড বার্তা শোনার জন্য একটি ইভেন্ট হ্যান্ডলার যোগ করুন 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 সংস্করণ ১১.২.৮ অনুসারে, ওয়েব-ভিত্তিক প্ল্যাটফর্মগুলিতে ব্যাকগ্রাউন্ড বার্তা পরিচালনা করার জন্য একটি ভিন্ন প্রবাহ প্রয়োজন। অতএব, আপনাকে service worker 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 কনসোলে Project Settings খুলুন এবং Service accounts ট্যাব নির্বাচন করুন। 'Java' নির্বাচন করুন এবং কনফিগারেশন স্নিপেট ডাউনলোড করতে Generate new private key ক্লিক করুন। প্রজেক্ট সেটিংস পৃষ্ঠার সার্ভিস অ্যাকাউন্ট কম্পোনেন্টের অ্যাডমিন SDK কনফিগারেশন স্নিপেট হাইলাইট করে একটি ক্রপ করা স্ক্রিনশট।
  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 এর মাধ্যমে ব্যবহারকারীর কাছে বার্তা পাঠানোর জন্য। অ্যান্ড্রয়েড স্টুডিওতে FcmSender.java প্রধান ফাংশনের পাশে দেখানো রান আইকনের একটি ক্রপ করা স্ক্রিনশট।

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

অ্যান্ড্রয়েড নোটিফিকেশন ট্রেতে প্রদর্শিত একটি বার্তার একটি ক্রপ করা স্ক্রিনশট

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

অ্যান্ড্রয়েড অ্যাপে প্রদর্শিত মেসেজের কন্টেন্টের একটি ক্রপ করা স্ক্রিনশট

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

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

Chrome ব্রাউজারে দেখানো একটি ওয়েব বিজ্ঞপ্তির একটি ক্রপ করা স্ক্রিনশট

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

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

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 ফাইলে প্রধান ফাংশন চালানোর জন্য:

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

৭. সারাংশ এবং এরপর কী

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

কোডল্যাব

তথ্যসূত্র