Firebase এমুলেটর স্যুট ব্যবহার করে আপনার ফ্লাটার অ্যাপের জন্য স্থানীয় উন্নয়ন

1. আপনি শুরু করার আগে

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

পূর্বশর্ত

এই কোডল্যাব ধরে নেয় যে আপনার কিছু ফ্লটার অভিজ্ঞতা আছে। যদি তা না হয়, আপনি প্রথমে মৌলিক বিষয়গুলো শিখতে চাইতে পারেন। নিম্নলিখিত লিঙ্কগুলি সহায়ক:

• ফ্লটার উইজেট ফ্রেমওয়ার্ক ঘুরে দেখুন
• আপনার প্রথম ফ্লটার অ্যাপ লিখুন, পার্ট 1 কোডল্যাব ব্যবহার করে দেখুন

আপনার কিছু ফায়ারবেসের অভিজ্ঞতাও থাকা উচিত, কিন্তু আপনি যদি কখনোই ফায়ারবেসকে ফ্লাটার প্রজেক্টে যোগ না করেন তাহলে ঠিক আছে। আপনি যদি Firebase কনসোলের সাথে অপরিচিত হন, অথবা আপনি Firebase-এ সম্পূর্ণ নতুন হয়ে থাকেন, তাহলে প্রথমে নিম্নলিখিত লিঙ্কগুলি দেখুন:

• ফায়ারবেস ফান্ডামেন্টাল ডক্স
• ফ্লাটার কোডল্যাবের সাথে ফায়ারবেসকে জানুন ।

আপনি যা তৈরি করবেন

এই কোডল্যাব একটি সাধারণ জার্নালিং অ্যাপ্লিকেশন তৈরির মাধ্যমে আপনাকে গাইড করে। অ্যাপ্লিকেশনটিতে একটি লগইন স্ক্রীন এবং একটি স্ক্রীন থাকবে যা আপনাকে অতীতের জার্নাল এন্ট্রি পড়তে এবং নতুন তৈরি করতে দেয়৷

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

আপনি শিখবেন কীভাবে ফায়ারবেস ব্যবহার শুরু করবেন এবং কীভাবে আপনার ফ্লাটার ডেভেলপমেন্ট ওয়ার্কফ্লোতে ফায়ারবেস এমুলেটর স্যুটকে একীভূত ও ব্যবহার করবেন। এই Firebase বিষয়গুলি কভার করা হবে:

• ফায়ারবেস এমুলেটর স্যুট
• ফায়ারবেস প্রমাণ
• ফায়ারবেস ফায়ারস্টোর ডাটাবেস

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

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

• Flutter এর কাজের জ্ঞান, এবং SDK ইনস্টল করা আছে
• ইন্টেলিজ জেটব্রেন বা ভিএস কোড টেক্সট এডিটর
• গুগল ক্রোম ব্রাউজার (বা ফ্লটারের জন্য আপনার অন্য পছন্দের ডেভেলপমেন্ট টার্গেট। এই কোডল্যাবের কিছু টার্মিনাল কমান্ড অনুমান করবে যে আপনি Chrome এ আপনার অ্যাপ চালাচ্ছেন)

2. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন৷

ফায়ারবেসের ওয়েব কনসোলে একটি ফায়ারবেস প্রজেক্ট তৈরি করা আপনার প্রথম কাজটি সম্পূর্ণ করতে হবে। এই কোডল্যাবের বেশিরভাগই এমুলেটর স্যুটের উপর ফোকাস করবে, যা স্থানীয়ভাবে চলমান UI ব্যবহার করে, তবে আপনাকে প্রথমে একটি সম্পূর্ণ ফায়ারবেস প্রকল্প সেট আপ করতে হবে।

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

1. Firebase কনসোলে সাইন ইন করুন।
2. Firebase কনসোলে, প্রজেক্ট যোগ করুন (বা একটি প্রকল্প তৈরি করুন ) এ ক্লিক করুন এবং আপনার Firebase প্রকল্পের জন্য একটি নাম লিখুন (উদাহরণস্বরূপ, " Firebase-Flutter-Codelab") ।

3. প্রকল্প তৈরির বিকল্পগুলির মাধ্যমে ক্লিক করুন। অনুরোধ করা হলে Firebase শর্তাবলী স্বীকার করুন। Google Analytics সেট আপ করা এড়িয়ে যান, কারণ আপনি এই অ্যাপের জন্য Analytics ব্যবহার করবেন না।

ফায়ারবেস প্রকল্পগুলি সম্পর্কে আরও জানতে, ফায়ারবেস প্রকল্পগুলি বুঝতে দেখুন।

আপনি যে অ্যাপটি তৈরি করছেন সেটি দুটি Firebase পণ্য ব্যবহার করে যা Flutter অ্যাপের জন্য উপলব্ধ:

• আপনার ব্যবহারকারীদের আপনার অ্যাপে সাইন ইন করার অনুমতি দেওয়ার জন্য Firebase প্রমাণীকরণ ।
• ক্লাউড ফায়ারস্টোর ক্লাউডে স্ট্রাকচার্ড ডেটা সংরক্ষণ করতে এবং ডেটা পরিবর্তন হলে তাত্ক্ষণিক বিজ্ঞপ্তি পেতে।

এই দুটি পণ্যের বিশেষ কনফিগারেশন প্রয়োজন বা Firebase কনসোল ব্যবহার করে সক্ষম করা প্রয়োজন।

ক্লাউড ফায়ারস্টোর সক্ষম করুন

Flutter অ্যাপটি জার্নাল এন্ট্রি সংরক্ষণ করতে ক্লাউড ফায়ারস্টোর ব্যবহার করে।

ক্লাউড ফায়ারস্টোর সক্ষম করুন:

1. Firebase কনসোলের বিল্ড বিভাগে, ক্লাউড ফায়ারস্টোরে ক্লিক করুন।
2. ডাটাবেস তৈরি করুন ক্লিক করুন।
3. স্টার্ট ইন টেস্ট মোড বিকল্পটি নির্বাচন করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন. টেস্ট মোড নিশ্চিত করে যে আপনি বিকাশের সময় অবাধে ডাটাবেসে লিখতে পারেন। পরবর্তী ক্লিক করুন.
4. আপনার ডাটাবেসের জন্য অবস্থান নির্বাচন করুন (আপনি শুধু ডিফল্ট ব্যবহার করতে পারেন)। মনে রাখবেন এই অবস্থানটি পরে পরিবর্তন করা যাবে না।
5. সক্ষম করুন ক্লিক করুন।

3. Flutter অ্যাপ সেট আপ করুন৷

আমরা শুরু করার আগে আপনাকে স্টার্টার কোড ডাউনলোড করতে হবে এবং Firebase CLI ইনস্টল করতে হবে।

স্টার্টার কোড পান

কমান্ড লাইন থেকে GitHub সংগ্রহস্থল ক্লোন করুন:

git clone https://github.com/flutter/codelabs.git flutter-codelabs

বিকল্পভাবে, আপনার যদি GitHub এর cli টুল ইনস্টল করা থাকে:

gh repo clone flutter/codelabs flutter-codelabs

নমুনা কোডটি flutter-codelabs ডিরেক্টরিতে ক্লোন করা উচিত, যেখানে কোডল্যাবগুলির একটি সংগ্রহের জন্য কোড রয়েছে। এই কোডল্যাবের কোডটি flutter-codelabs/firebase-emulator-suite এ রয়েছে।

flutter-codelabs/firebase-emulator-suite এর অধীনে ডিরেক্টরি কাঠামো দুটি Flutter প্রকল্প নিয়ে গঠিত। একটিকে complete বলা হয়, যা আপনি যদি এড়িয়ে যেতে চান বা আপনার নিজের কোড ক্রস-রেফারেন্স করতে চান তাহলে উল্লেখ করতে পারেন। অন্য প্রকল্পটিকে start বলা হয়।

আপনি যে কোড দিয়ে শুরু করতে চান flutter-codelabs/firebase-emulator-suite/start ডিরেক্টরিতে রয়েছে। আপনার পছন্দের IDE-এ সেই ডিরেক্টরিটি খুলুন বা আমদানি করুন।

cd flutter-codelabs/firebase-emulator-suite/start

Firebase CLI ইনস্টল করুন

Firebase CLI আপনার Firebase প্রকল্পগুলি পরিচালনা করার জন্য সরঞ্জাম সরবরাহ করে। এমুলেটর স্যুট ব্যবহার করার জন্য CLI প্রয়োজন, তাই আপনাকে এটি ইনস্টল করতে হবে।

CLI ইনস্টল করার বিভিন্ন উপায় রয়েছে। সবচেয়ে সহজ উপায়, আপনি যদি MacOS বা Linux ব্যবহার করেন, তাহলে আপনার টার্মিনাল থেকে এই কমান্ডটি চালান:

curl -sL https://firebase.tools | bash

CLI ইনস্টল করার পরে, আপনাকে অবশ্যই Firebase দিয়ে প্রমাণীকরণ করতে হবে।

1. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার Google অ্যাকাউন্ট ব্যবহার করে ফায়ারবেসে লগ ইন করুন:

firebase login

2. এই কমান্ডটি আপনার স্থানীয় মেশিনকে Firebase এর সাথে সংযুক্ত করে এবং আপনাকে আপনার Firebase প্রকল্পগুলিতে অ্যাক্সেস প্রদান করে।

3. আপনার ফায়ারবেস প্রকল্পগুলি তালিকাভুক্ত করে পরীক্ষা করুন যে CLI সঠিকভাবে ইনস্টল করা আছে এবং আপনার অ্যাকাউন্টে অ্যাক্সেস রয়েছে। নিম্নলিখিত কমান্ড চালান:

firebase projects:list

4. প্রদর্শিত তালিকাটি Firebase কনসোলে তালিকাভুক্ত Firebase প্রকল্পগুলির মতোই হওয়া উচিত৷ আপনার অন্তত ফায়ারবেস-ফ্লাটার-কোডেল্যাব দেখা উচিত।

FlutterFire CLI ইনস্টল করুন

FlutterFire CLI Firebase CLI-এর উপরে তৈরি করা হয়েছে এবং এটি আপনার Flutter অ্যাপের সাথে একটি Firebase প্রকল্পকে একীভূত করা সহজ করে তোলে।

প্রথমে, CLI ইনস্টল করুন:

dart pub global activate flutterfire_cli

নিশ্চিত করুন যে CLI ইনস্টল করা হয়েছে। Flutter প্রকল্প ডিরেক্টরির মধ্যে নিম্নলিখিত কমান্ডটি চালান এবং নিশ্চিত করুন যে CLI সাহায্য মেনুটি আউটপুট করে।

flutterfire --help

আপনার Flutter অ্যাপে আপনার Firebase প্রোজেক্ট যোগ করতে Firebase CLI এবং FlutterFire CLI ব্যবহার করুন

দুটি CLI ইনস্টল করার সাথে, আপনি পৃথক ফায়ারবেস পণ্য (যেমন ফায়ারস্টোর) সেট আপ করতে পারেন, এমুলেটরগুলি ডাউনলোড করতে পারেন এবং মাত্র কয়েকটি টার্মিনাল কমান্ড দিয়ে আপনার ফ্লাটার অ্যাপে Firebase যোগ করতে পারেন।

প্রথমে, নিম্নলিখিতগুলি চালিয়ে Firebase সেট আপ শেষ করুন:

firebase init

এই কমান্ডটি আপনাকে আপনার প্রোজেক্ট সেট আপ করার জন্য প্রয়োজনীয় একাধিক প্রশ্নের মধ্য দিয়ে নিয়ে যাবে। এই স্ক্রিনশটগুলি প্রবাহ দেখায়:

1. বৈশিষ্ট্য নির্বাচন করতে বলা হলে, "Firestore" এবং "Emulators" নির্বাচন করুন। (কোনও প্রমাণীকরণ বিকল্প নেই, কারণ এটি কনফিগারেশন ব্যবহার করে না যা আপনার ফ্লাটার প্রকল্প ফাইল থেকে পরিবর্তনযোগ্য।)
2. এরপরে, অনুরোধ করা হলে "একটি বিদ্যমান প্রকল্প ব্যবহার করুন" নির্বাচন করুন।

3. এখন, পূর্ববর্তী ধাপে আপনি যে প্রকল্পটি তৈরি করেছেন তা নির্বাচন করুন: flutter-firebase-codelab।

4. এরপরে, আপনাকে তৈরি করা ফাইলগুলির নামকরণ সম্পর্কে একাধিক প্রশ্ন জিজ্ঞাসা করা হবে। আমি ডিফল্ট নির্বাচন করতে প্রতিটি প্রশ্নের জন্য "এন্টার" চাপার পরামর্শ দিই।
5. অবশেষে, আপনাকে এমুলেটর কনফিগার করতে হবে। তালিকা থেকে Firestore এবং প্রমাণীকরণ নির্বাচন করুন, এবং তারপর প্রতিটি এমুলেটরের জন্য ব্যবহার করার জন্য নির্দিষ্ট পোর্ট সম্পর্কে প্রতিটি প্রশ্নের জন্য "এন্টার" টিপুন। আপনার ডিফল্ট নির্বাচন করা উচিত, হ্যাঁ, আপনি এমুলেটর UI ব্যবহার করতে চান কিনা জিজ্ঞাসা করা হলে।

প্রক্রিয়া শেষে, আপনি একটি আউটপুট দেখতে পাবেন যা নিম্নলিখিত স্ক্রিনশটের মত দেখাচ্ছে।

গুরুত্বপূর্ণ : আপনার আউটপুট আমার থেকে কিছুটা আলাদা হতে পারে, যেমনটি নীচের স্ক্রিনশটে দেখা গেছে, কারণ চূড়ান্ত প্রশ্নটি "না" তে ডিফল্ট হবে যদি আপনি ইতিমধ্যেই এমুলেটরগুলি ডাউনলোড করে থাকেন৷

FlutterFire কনফিগার করুন

এর পরে, আপনি আপনার ফ্লাটার অ্যাপে ফায়ারবেস ব্যবহার করার জন্য প্রয়োজনীয় ডার্ট কোড তৈরি করতে FlutterFire ব্যবহার করতে পারেন।

flutterfire configure

এই কমান্ডটি চালানো হলে, আপনি কোন ফায়ারবেস প্রকল্পটি ব্যবহার করতে চান এবং কোন প্ল্যাটফর্ম সেট আপ করতে চান তা নির্বাচন করার জন্য আপনাকে অনুরোধ করা হবে। এই কোডল্যাবে, উদাহরণগুলি ফ্লটার ওয়েব ব্যবহার করে, তবে আপনি সমস্ত বিকল্প ব্যবহার করার জন্য আপনার ফায়ারবেস প্রকল্প সেট আপ করতে পারেন।

নিম্নলিখিত স্ক্রিনশটগুলি আপনাকে উত্তর দিতে হবে এমন প্রম্পটগুলি দেখায়৷

এই স্ক্রিনশটটি প্রক্রিয়ার শেষে আউটপুট দেখায়। আপনি যদি Firebase এর সাথে পরিচিত হন তবে আপনি লক্ষ্য করবেন যে আপনাকে কনসোলে অ্যাপ্লিকেশন তৈরি করতে হবে না এবং FlutterFire CLI আপনার জন্য এটি করেছে।

Flutter অ্যাপে Firebase প্যাকেজ যোগ করুন

চূড়ান্ত সেটআপ পদক্ষেপটি হল প্রাসঙ্গিক ফায়ারবেস প্যাকেজগুলি আপনার ফ্লাটার প্রকল্পে যোগ করা। টার্মিনালে, নিশ্চিত করুন যে আপনি flutter-codelabs/firebase-emulator-suite/start এ Flutter প্রকল্পের মূলে আছেন। তারপরে, নিম্নলিখিত তিনটি কমান্ড চালান:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add cloud_firestore

এই অ্যাপ্লিকেশন আপনি ব্যবহার করবেন শুধুমাত্র প্যাকেজ.

4. ফায়ারবেস এমুলেটর সক্ষম করা

এখনও অবধি, ফ্লাটার অ্যাপ এবং আপনার ফায়ারবেস প্রজেক্ট এমুলেটরগুলি ব্যবহার করতে সক্ষম হওয়ার জন্য সেট আপ করা হয়েছে, তবে আপনাকে এখনও স্থানীয় পোর্টগুলিতে বহির্গামী ফায়ারবেস অনুরোধগুলিকে পুনরায় রুট করতে ফ্লটার কোড বলতে হবে।

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

main.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import 'app_state.dart';
import 'firebase_options.dart';
import 'logged_in_view.dart';
import 'logged_out_view.dart';


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

 if (kDebugMode) {
   try {
     FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
     await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
   } catch (e) {
     // ignore: avoid_print
     print(e);
   }
 }

 runApp(MyApp());
}

কোডের প্রথম কয়েকটি লাইন Firebase শুরু করে। প্রায় সর্বজনীনভাবে, আপনি যদি ফায়ারবেসের সাথে একটি ফ্লাটার অ্যাপে কাজ করেন, আপনি WidgetsFlutterBinding.ensureInitialized এবং Firebase.initializeApp কল করে শুরু করতে চান।

এর পরে, লাইন দিয়ে শুরু হওয়া কোডটি if (kDebugMode) আপনার অ্যাপকে বলে যে কোনো প্রোডাকশন ফায়ারবেস প্রকল্পের পরিবর্তে এমুলেটরগুলিকে লক্ষ্য করতে। kDebugMode নিশ্চিত করে যে এমুলেটরগুলিকে টার্গেট করা তখনই ঘটবে যদি আপনি একটি উন্নয়ন পরিবেশে থাকেন। যেহেতু kDebugMode একটি ধ্রুবক মান, ডার্ট কম্পাইলার সেই কোড ব্লকটিকে সম্পূর্ণভাবে রিলিজ মোডে সরিয়ে ফেলতে জানে।

এমুলেটরগুলি শুরু করুন

আপনি Flutter অ্যাপ শুরু করার আগে আপনার এমুলেটরগুলি শুরু করা উচিত। প্রথমে, টার্মিনালে এটি চালিয়ে এমুলেটরগুলি শুরু করুন:

firebase emulators:start

এই কমান্ডটি এমুলেটরগুলিকে বুট করে, এবং লোকালহোস্ট পোর্টগুলিকে প্রকাশ করে যার সাথে আমরা তাদের সাথে যোগাযোগ করতে পারি। আপনি যখন সেই কমান্ডটি চালান, তখন আপনি এর অনুরূপ আউটপুট দেখতে পাবেন:

এই আউটপুট আপনাকে বলে যে কোন এমুলেটরগুলি চলছে এবং আপনি কোথায় এমুলেটর দেখতে যেতে পারেন৷ প্রথমে, localhost:4000 এ এমুলেটর UI দেখুন।

এটি স্থানীয় এমুলেটরের UI এর জন্য হোমপেজ। এটি উপলব্ধ সমস্ত এমুলেটর তালিকাভুক্ত করে এবং প্রতিটিতে স্ট্যাটাস চালু বা বন্ধ সহ লেবেল করা হয়।

5. Firebase Auth এমুলেটর

আপনি যে প্রথম এমুলেটরটি ব্যবহার করবেন সেটি হল প্রমাণীকরণ এমুলেটর। UI-তে প্রমাণীকরণ কার্ডে "এমুলেটরে যান" ক্লিক করে Auth এমুলেটর দিয়ে শুরু করুন এবং আপনি এইরকম দেখতে একটি পৃষ্ঠা দেখতে পাবেন:

এই পৃষ্ঠাটির Auth ওয়েব কনসোল পৃষ্ঠার সাথে মিল রয়েছে৷ এটিতে অনলাইন কনসোলের মতো ব্যবহারকারীদের তালিকাভুক্ত একটি টেবিল রয়েছে এবং আপনাকে ম্যানুয়ালি ব্যবহারকারীদের যোগ করার অনুমতি দেয়। এখানে একটি বড় পার্থক্য হল যে এমুলেটরগুলিতে উপলব্ধ একমাত্র প্রমাণীকরণ পদ্ধতি বিকল্পটি ইমেল এবং পাসওয়ার্ডের মাধ্যমে। স্থানীয় উন্নয়নের জন্য এটিই যথেষ্ট।

এর পরে, আপনি Firebase Auth এমুলেটরে একজন ব্যবহারকারীকে যোগ করার প্রক্রিয়ার মধ্য দিয়ে যাবেন, এবং তারপর সেই ব্যবহারকারীকে Flutter UI এর মাধ্যমে লগ ইন করবেন।

একজন ব্যবহারকারী যোগ করুন

"ব্যবহারকারী যোগ করুন" বোতামে ক্লিক করুন, এবং এই তথ্য দিয়ে ফর্মটি পূরণ করুন:

• প্রদর্শনের নাম: ড্যাশ
• ইমেইল: dash@email.com
• পাসওয়ার্ড: ড্যাশওয়ার্ড

ফর্ম জমা দিন, এবং আপনি টেবিলে এখন একজন ব্যবহারকারীকে অন্তর্ভুক্ত দেখতে পাবেন। এখন আপনি সেই ব্যবহারকারীর সাথে লগ ইন করতে কোডটি আপডেট করতে পারেন।

logged_out_view.dart

LoggedOutView উইজেটের একমাত্র কোড যা আপডেট করতে হবে তা হল কলব্যাকে যা ট্রিগার হয় যখন একজন ব্যবহারকারী লগইন বোতাম টিপে। এই মত দেখতে কোড আপডেট করুন:

class LoggedOutView extends StatelessWidget {
 final AppState state;
 const LoggedOutView({super.key, required this.state});
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Firebase Emulator Suite Codelab'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
          Text(
           'Please log in',
            style: Theme.of(context).textTheme.displaySmall,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ElevatedButton(
             onPressed: () async {
              await state.logIn('dash@email.com', 'dashword').then((_) {
                if (state.user != null) {
                 context.go('/');
                }
              });
              },
              child: const Text('Log In'),
          ),
        ),
      ],
    ),
   ),
  );
 }
}

আপডেট করা কোডটি TODO স্ট্রিংগুলিকে আপনার প্রমাণ এমুলেটরে তৈরি করা ইমেল এবং পাসওয়ার্ড দিয়ে প্রতিস্থাপন করে। এবং পরের লাইনে, if(true) লাইনটি কোড দ্বারা প্রতিস্থাপিত হয়েছে যা চেক করে যে state.user নাল কিনা। AppClass কোডটি এই বিষয়ে আরও আলোকপাত করে।

app_state.dart

AppState এ কোডের দুটি অংশ আপডেট করতে হবে। প্রথমে, ক্লাস মেম্বার AppState.user কে firebase_auth প্যাকেজ থেকে User টাইপ দিন, Object টাইপ না করে।

দ্বিতীয়ত, নীচে দেখানো হিসাবে AppState.login পদ্ধতিটি পূরণ করুন:

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user; // <-- changed variable type
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 } 
 // ...
}

ব্যবহারকারীর জন্য টাইপ সংজ্ঞা এখন User? . সেই User শ্রেণীটি Firebase Auth থেকে আসে এবং প্রয়োজনীয় তথ্য প্রদান করে যেমন User.displayName , যা একটু আলোচনা করা হয়েছে।

Firebase Auth-এ একটি ইমেল এবং পাসওয়ার্ড সহ ব্যবহারকারী লগ ইন করার জন্য এটি মৌলিক কোডের প্রয়োজন৷ এটি সাইন ইন করার জন্য FirebaseAuth-এ একটি কল করে, যা একটি Future<UserCredential> অবজেক্ট প্রদান করে। ভবিষ্যৎ সম্পন্ন হলে, এই কোডটি চেক করে যে UserCredential সাথে কোনো User সংযুক্ত আছে কিনা। যদি শংসাপত্রের বস্তুতে একজন ব্যবহারকারী থাকে, তাহলে একজন ব্যবহারকারী সফলভাবে লগ ইন করেছেন এবং AppState.user সম্পত্তি সেট করা যেতে পারে। যদি না থাকে, তাহলে একটি ত্রুটি ছিল, এবং এটি মুদ্রিত হয়েছে।

মনে রাখবেন যে এই পদ্ধতিতে কোডের একমাত্র লাইন যা এই অ্যাপের জন্য নির্দিষ্ট (সাধারণ FirebaseAuth কোডের পরিবর্তে) হল _listenForEntries পদ্ধতিতে কল করা, যা পরবর্তী ধাপে কভার করা হবে।

TODO: অ্যাকশন আইকন - আপনার অ্যাপটি পুনরায় লোড করুন, এবং তারপর এটি রেন্ডার করার সময় লগইন বোতাম টিপুন। এটি অ্যাপটিকে এমন একটি পৃষ্ঠায় নেভিগেট করতে দেয় যেখানে বলা হয় "আসুন, ব্যক্তি!" শীর্ষে প্রমাণীকরণ অবশ্যই কাজ করছে, কারণ এটি আপনাকে এই পৃষ্ঠায় নেভিগেট করার অনুমতি দিয়েছে, তবে ব্যবহারকারীর প্রকৃত নাম প্রদর্শনের জন্য logged_in_view.dart এ একটি ছোটখাট আপডেট করতে হবে।

logged_in_view.dart

LoggedInView.build পদ্ধতিতে প্রথম লাইনটি পরিবর্তন করুন:

class LoggedInView extends StatelessWidget {
 final AppState state;
 LoggedInView({super.key, required this.state});

 final PageController _controller = PageController(initialPage: 1);

 @override
 Widget build(BuildContext context) {
   final name = state.user!.displayName ?? 'No Name';

   return Scaffold(
 // ...

এখন, এই লাইনটি AppState অবজেক্টের User প্রপার্টি থেকে displayName ধরেছে। আপনি যখন আপনার প্রথম ব্যবহারকারীকে সংজ্ঞায়িত করেছিলেন তখন এই displayName এমুলেটরে সেট করা হয়েছিল। আপনার অ্যাপটি এখন "ওয়েলকাম ব্যাক, ড্যাশ!" আপনি যখন TODO পরিবর্তে লগ ইন করেন।

6. ফায়ারস্টোর এমুলেটরে ডেটা পড়ুন এবং লিখুন

প্রথমে, ফায়ারস্টোর এমুলেটরটি দেখুন। এমুলেটর UI হোমপেজে ( localhost:4000 ), Firestore কার্ডে "এমুলেটরে যান" এ ক্লিক করুন। এটি এই মত হওয়া উচিত:

এমুলেটর:

ফায়ারবেস কনসোল:

আপনার যদি Firestore নিয়ে কোনো অভিজ্ঞতা থাকে, তাহলে আপনি লক্ষ্য করবেন যে এই পৃষ্ঠাটি Firebase কনসোল Firestore পৃষ্ঠার মতো দেখতে। যদিও কয়েকটি উল্লেখযোগ্য পার্থক্য রয়েছে।

1. আপনি একটি বোতামে ট্যাপ দিয়ে সমস্ত ডেটা সাফ করতে পারেন। এটি উত্পাদন ডেটার সাথে বিপজ্জনক হবে, তবে দ্রুত পুনরাবৃত্তির জন্য সহায়ক! আপনি যদি একটি নতুন প্রকল্পে কাজ করেন এবং আপনার ডেটা মডেল পরিবর্তন হয়, তাহলে এটি পরিষ্কার করা সহজ।
2. একটি "অনুরোধ" ট্যাব আছে। এই ট্যাবটি আপনাকে এই এমুলেটরে করা আগত অনুরোধগুলি দেখতে দেয়। আমি এই ট্যাবটি নিয়ে একটু বিস্তারিত আলোচনা করব।
3. নিয়ম, সূচী বা ব্যবহারের জন্য কোন ট্যাব নেই। একটি টুল আছে (পরবর্তী বিভাগে আলোচনা করা হয়েছে) যা নিরাপত্তা নিয়ম লিখতে সাহায্য করে, কিন্তু আপনি স্থানীয় এমুলেটরের জন্য নিরাপত্তা নিয়ম সেট করতে পারবেন না।

এই তালিকার সংক্ষিপ্তসারে, Firestore-এর এই সংস্করণটি বিকাশের সময় উপযোগী আরও সরঞ্জাম সরবরাহ করে এবং উত্পাদনে প্রয়োজনীয় সরঞ্জামগুলি সরিয়ে দেয়।

Firestore এ লিখুন

এমুলেটরে 'রিকোয়েস্ট' ট্যাব নিয়ে আলোচনা করার আগে প্রথমে একটি অনুরোধ করুন। এই কোড আপডেট প্রয়োজন. Firestore এ একটি নতুন জার্নাল Entry লিখতে অ্যাপে ফর্মটি ওয়্যারিং করে শুরু করুন।

একটি Entry জমা দেওয়ার জন্য উচ্চ-স্তরের প্রবাহ হল:

1. ব্যবহারকারী ফর্ম পূরণ করে এবং Submit বোতাম টিপুন
2. UI কল করে AppState.writeEntryToFirebase
3. AppState.writeEntryToFirebase Firebase এ একটি এন্ট্রি যোগ করে

ধাপ 1 বা 2 এ জড়িত কোডগুলির কোনটি পরিবর্তন করার প্রয়োজন নেই। ধাপ 3-এর জন্য শুধুমাত্র যে কোডটি যোগ করতে হবে সেটি AppState ক্লাসে যোগ করা হবে। AppState.writeEntryToFirebase এ নিম্নলিখিত পরিবর্তন করুন।

app_state.dart

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user;
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 }

 void writeEntryToFirebase(Entry entry) {
   FirebaseFirestore.instance.collection('Entries').add(<String, String>{
     'title': entry.title,
     'date': entry.date.toString(),
     'text': entry.text,
   });
 }
 // ...
}

writeEntryToFirebase পদ্ধতির কোডটি Firestore-এ "Entry" নামক সংগ্রহের একটি রেফারেন্স দখল করে। তারপরে এটি একটি নতুন এন্ট্রি যোগ করে, যা Map<String, String> টাইপের হতে হবে।

এই ক্ষেত্রে, ফায়ারস্টোরে "এন্ট্রি" সংগ্রহটি বিদ্যমান ছিল না, তাই ফায়ারস্টোর একটি তৈরি করেছে।

সেই কোড যোগ করে, হট রিলোড করুন বা আপনার অ্যাপ রিস্টার্ট করুন, লগ ইন করুন এবং EntryForm ভিউতে নেভিগেট করুন। আপনি যা চান Strings দিয়ে ফর্মটি পূরণ করতে পারেন। (তারিখ ক্ষেত্রটি যেকোনও স্ট্রিং গ্রহণ করবে, কারণ এটি এই কোডল্যাবের জন্য সরলীকৃত করা হয়েছে। এটিতে কোনোভাবেই DateTime অবজেক্টের জন্য শক্তিশালী বৈধতা বা যত্ন নেই।)

ফর্ম জমা চাপুন. অ্যাপে কিছুই ঘটবে না, তবে আপনি এমুলেটর UI এ আপনার নতুন এন্ট্রি দেখতে পাবেন।

Firestore এমুলেটরে অনুরোধ ট্যাব

UI-তে, Firestore এমুলেটরে নেভিগেট করুন এবং "ডেটা" ট্যাবে দেখুন। আপনার দেখতে হবে যে এখন আপনার ডাটাবেসের মূলে "এন্ট্রি" নামে একটি সংগ্রহ রয়েছে। এটিতে একটি নথি থাকা উচিত যাতে আপনি ফর্মে প্রবেশ করানো একই তথ্য ধারণ করেন৷

এটি নিশ্চিত করে যে AppState.writeEntryToFirestore কাজ করেছে, এবং এখন আপনি অনুরোধ ট্যাবে অনুরোধটি আরও অন্বেষণ করতে পারেন৷ এখন সেই ট্যাবে ক্লিক করুন।

ফায়ারস্টোর এমুলেটর অনুরোধ

এখানে, আপনার এমন একটি তালিকা দেখতে হবে যা এর মতো দেখাচ্ছে:

আপনি সেই তালিকার যে কোনো আইটেমে ক্লিক করতে পারেন এবং বেশ কিছু সহায়ক তথ্য দেখতে পারেন। একটি নতুন জার্নাল এন্ট্রি তৈরি করার জন্য আপনার অনুরোধের সাথে সঙ্গতিপূর্ণ তালিকা CREATE আইটেমটিতে ক্লিক করুন। আপনি এই মত দেখতে একটি নতুন টেবিল দেখতে পাবেন:

উল্লিখিত হিসাবে, Firestore এমুলেটর আপনার অ্যাপের নিরাপত্তা বিধি বিকাশের জন্য সরঞ্জাম সরবরাহ করে। এই ভিউটি দেখায় যে আপনার নিরাপত্তা নিয়মের কোন লাইনে এই অনুরোধটি পাস হয়েছে (বা ব্যর্থ হয়েছে, যদি এটি হয়)। একটি আরও শক্তিশালী অ্যাপে, নিরাপত্তা বিধিগুলি বাড়তে পারে এবং একাধিক অনুমোদন পরীক্ষা থাকতে পারে। এই দৃশ্যটি অনুমোদনের নিয়মগুলি লিখতে এবং ডিবাগ করতে সহায়তা করতে ব্যবহৃত হয়।

এটি মেটাডেটা এবং প্রমাণীকরণ ডেটা সহ এই অনুরোধের প্রতিটি অংশ পরিদর্শন করার একটি সহজ উপায় প্রদান করে৷ এই তথ্য জটিল অনুমোদন নিয়ম লিখতে ব্যবহার করা হয়.

ফায়ারস্টোর থেকে পড়া

Firestore সংযুক্ত ডিভাইসে আপডেট করা ডেটা পুশ করতে ডেটা সিঙ্ক্রোনাইজেশন ব্যবহার করে। ফ্লটার কোডে, আপনি ফায়ারস্টোর সংগ্রহ এবং নথিগুলি শুনতে (বা সদস্যতা নিতে পারেন) এবং ডেটা পরিবর্তনের সময় আপনার কোডটি জানানো হবে। এই অ্যাপে, AppState._listenForEntries নামক পদ্ধতিতে Firestore আপডেট শোনার কাজ করা হয়।

এই কোডটি যথাক্রমে AppState._entriesStreamController এবং AppState.entries নামক StreamController এবং Stream সাথে একত্রে কাজ করে। সেই কোডটি ইতিমধ্যেই লেখা আছে, যেমন Firestore থেকে ডেটা প্রদর্শনের জন্য UI-তে প্রয়োজনীয় সমস্ত কোড।

নীচের কোডের সাথে মেলে _listenForEntries পদ্ধতি আপডেট করুন:

app_state.dart

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user;
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 }

 void writeEntryToFirebase(Entry entry) {
   FirebaseFirestore.instance.collection('Entries').add(<String, String>{
     'title': entry.title,
     'date': entry.date.toString(),
     'text': entry.text,
   });
 }

 void _listenForEntries() {
   FirebaseFirestore.instance
       .collection('Entries')
       .snapshots()
       .listen((event) {
     final entries = event.docs.map((doc) {
       final data = doc.data();
       return Entry(
         date: data['date'] as String,
         text: data['text'] as String,
         title: data['title'] as String,
       );
     }).toList();

     _entriesStreamController.add(entries);
   });
 }
 // ...
}

এই কোডটি ফায়ারস্টোরে "এন্ট্রি" সংগ্রহের কথা শোনে। যখন ফায়ারস্টোর এই ক্লায়েন্টকে নতুন ডেটা আছে বলে বিজ্ঞপ্তি দেয়, তখন এটি সেই ডেটা পাস করে এবং _listenForEntries এর কোডটি তার সমস্ত চাইল্ড ডকুমেন্টকে এমন একটি বস্তুতে পরিবর্তন করে যা আমাদের অ্যাপ ব্যবহার করতে পারে ( Entry )। তারপর, এটি _entriesStreamController নামক StreamController সেই এন্ট্রিগুলি যুক্ত করে (যা UI শুনছে)। এই কোড শুধুমাত্র আপডেট প্রয়োজন.

অবশেষে, মনে করুন যে AppState.logIn পদ্ধতিটি _listenForEntries এ একটি কল করে, যা ব্যবহারকারীর লগ ইন করার পরে শোনার প্রক্রিয়া শুরু করে।

// ...
Future<void> logIn(String email, String password) async {
 final credential = await FirebaseAuth.instance
     .signInWithEmailAndPassword(email: email, password: password);
 if (credential.user != null) {
   user = credential.user!;
   _listenForEntries();
 } else {
   print('no user!');
 }
}
// ...

এখন অ্যাপটি চালান। এটি এই মত হওয়া উচিত:

7. এমুলেটরে ডেটা রপ্তানি এবং আমদানি করুন

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

এমুলেটর ডেটা রপ্তানি করুন

প্রথমত, আপনার ইতিমধ্যে থাকা এমুলেটর ডেটা রপ্তানি করুন। যখন এমুলেটরগুলি এখনও চলছে, একটি নতুন টার্মিনাল উইন্ডো খুলুন এবং নিম্নলিখিত কমান্ডটি প্রবেশ করান:

firebase emulators:export ./emulators_data

.emulators_data হল একটি আর্গুমেন্ট, যা Firebase কে বলে যে ডেটা কোথায় এক্সপোর্ট করতে হবে। যদি ডিরেক্টরিটি বিদ্যমান না থাকে তবে এটি তৈরি করা হয়। আপনি সেই ডিরেক্টরির জন্য যে কোনো নাম ব্যবহার করতে পারেন।

আপনি যখন এই কমান্ডটি চালান, আপনি টার্মিনালে এই আউটপুটটি দেখতে পাবেন যেখানে আপনি কমান্ডটি চালান:

i  Found running emulator hub for project flutter-firebase-codelab-d6b79 at http://localhost:4400
i  Creating export directory /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data
i  Exporting data to: /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data
✔  Export complete

এবং যদি আপনি টার্মিনাল উইন্ডোতে স্যুইচ করেন যেখানে এমুলেটরগুলি চলছে, আপনি এই আউটপুটটি দেখতে পাবেন:

i  emulators: Received export request. Exporting data to /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data.
✔  emulators: Export complete.

এবং পরিশেষে, আপনি যদি আপনার প্রজেক্ট ডিরেক্টরিতে তাকান, আপনি ./emulators_data নামক একটি ডিরেক্টরি দেখতে পাবেন, যেটিতে আপনার সংরক্ষিত ডেটা সহ অন্যান্য মেটাডেটা ফাইলগুলির মধ্যে JSON ফাইল রয়েছে।

এমুলেটর ডেটা আমদানি করুন

এখন, আপনি আপনার উন্নয়ন কর্মপ্রবাহের অংশ হিসাবে সেই ডেটা আমদানি করতে পারেন, এবং আপনি যেখান থেকে ছেড়েছিলেন সেখানে শুরু করতে পারেন।

প্রথমে, আপনার টার্মিনালে CTRL+C টিপে এমুলেটরগুলি চলমান থাকলে তা বন্ধ করুন।

এরপরে, emulators:start কমান্ডটি চালান যা আপনি ইতিমধ্যেই দেখেছেন, কিন্তু একটি পতাকা সহ এটি বলে যে কোন ডেটা আমদানি করতে হবে:

firebase emulators:start --import ./emulators_data

যখন এমুলেটরগুলি তৈরি হয়, তখন localhost:4000 এ এমুলেটর UI-তে নেভিগেট করুন এবং আপনি পূর্বে যে ডেটা নিয়ে কাজ করছেন সেই একই ডেটা দেখতে পাবেন।

এমুলেটর বন্ধ করার সময় স্বয়ংক্রিয়ভাবে ডেটা রপ্তানি করুন

প্রতিটি ডেভেলপমেন্ট সেশনের শেষে ডেটা রপ্তানি করার কথা মনে না করে আপনি এমুলেটরগুলি ছেড়ে দিলে আপনি স্বয়ংক্রিয়ভাবে ডেটা রপ্তানি করতে পারেন।

আপনি যখন আপনার এমুলেটরগুলি শুরু করেন, তখন দুটি অতিরিক্ত পতাকা সহ emulators:start কমান্ড চালান।

firebase emulators:start --import ./emulators_data --export-on-exit

ভয়লা ! আপনি এই প্রকল্পের জন্য এমুলেটরগুলির সাথে কাজ করার সময় আপনার ডেটা এখন সংরক্ষণ করা হবে এবং পুনরায় লোড করা হবে৷ আপনি –export-on-exit flag আর্গুমেন্ট হিসাবে একটি ভিন্ন ডিরেক্টরিও নির্দিষ্ট করতে পারেন, কিন্তু এটি ডিফল্ট হবে যে ডিরেক্টরিটি –import এ পাস করা হয়েছে।

আপনি এই বিকল্পগুলির যে কোনও সংমিশ্রণও ব্যবহার করতে পারেন। এটি ডক্সের নোট : এক্সপোর্ট ডিরেক্টরিটি এই পতাকা দিয়ে নির্দিষ্ট করা যেতে পারে: firebase emulators:start --export-on-exit=./saved-data । যদি --import ব্যবহার করা হয়, রপ্তানি পথ ডিফল্ট একই হয়; যেমন: firebase emulators:start --import=./data-path --export-on-exit । শেষ পর্যন্ত, যদি ইচ্ছা হয়, --import এবং --export-on-exit পতাকাগুলিতে বিভিন্ন ডিরেক্টরি পাথ পাস করুন।

8. অভিনন্দন!

আপনি ফায়ারবেস এমুলেটর এবং ফ্লটারের সাথে উঠুন এবং চালানো সম্পূর্ণ করেছেন৷ আপনি গিথুবের "সম্পূর্ণ" ডিরেক্টরিতে এই কোডল্যাবের সম্পূর্ণ কোডটি খুঁজে পেতে পারেন: ফ্লাটার কোডল্যাবস

আমরা কভার করেছি কি

• Firebase ব্যবহার করতে একটি Flutter অ্যাপ সেট আপ করা হচ্ছে
• একটি ফায়ারবেস প্রকল্প সেট আপ করা হচ্ছে
• FlutterFire CLI
• ফায়ারবেস CLI
• ফায়ারবেস প্রমাণীকরণ এমুলেটর
• ফায়ারবেস ফায়ারস্টোর এমুলেটর
• এমুলেটর ডেটা আমদানি এবং রপ্তানি করা

পরবর্তী পদক্ষেপ

• Flutter-এ Firestore এবং প্রমাণীকরণ ব্যবহার সম্পর্কে আরও জানুন: Flutter Codelab-এর জন্য Firebase জানুন
• এমুলেটর অফার করে এমন অন্যান্য ফায়ারবেস সরঞ্জামগুলি অন্বেষণ করুন:
• ক্লাউড স্টোরেজ
• ক্লাউড ফাংশন
• রিয়েলটাইম ডাটাবেস
• আপনার অ্যাপে দ্রুত Google প্রমাণীকরণ যোগ করতে FlutterFire UI অন্বেষণ করুন।

আরও জানুন

• ফায়ারবেস সাইট: firebase.google.com
• ফ্লটার সাইট: flutter.dev
• FlutterFire Firebase ফ্লটার উইজেট: firebase.flutter.dev
• ফায়ারবেস ইউটিউব চ্যানেল
• ফ্লাটার ইউটিউব চ্যানেল

স্পার্কি আপনার জন্য গর্বিত!