এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

AngularFire ওয়েব কোডল্যাব

1. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবে, আপনি শিখবেন কিভাবে AngularFire ব্যবহার করে Firebase পণ্য এবং পরিষেবা ব্যবহার করে একটি চ্যাট ক্লায়েন্ট বাস্তবায়ন এবং স্থাপন করে ওয়েব অ্যাপ্লিকেশন তৈরি করতে হয়।

A chat app where users are discussing Firebase

তুমি কি শিখবে

অ্যাঙ্গুলার এবং ফায়ারবেস ব্যবহার করে একটি ওয়েব অ্যাপ তৈরি করুন।
Firebase-এর জন্য Cloud Firestore এবং Cloud Storage ব্যবহার করে ডেটা সিঙ্ক করুন।
Firebase প্রমাণীকরণ ব্যবহার করে আপনার ব্যবহারকারীদের প্রমাণীকরণ করুন।
Firebase অ্যাপ হোস্টিং-এ আপনার ওয়েব অ্যাপ স্থাপন করুন।
ফায়ারবেস ক্লাউড মেসেজিং এর মাধ্যমে বিজ্ঞপ্তি পাঠান।
আপনার ওয়েব অ্যাপের পারফর্ম্যান্স ডেটা সংগ্রহ করুন।

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

একটি GitHub অ্যাকাউন্ট
আপনার ফায়ারবেস প্রকল্পকে ব্লেজ মূল্য পরিকল্পনায় আপগ্রেড করার ক্ষমতা
আপনার পছন্দের IDE/টেক্সট এডিটর, যেমন WebStorm , Sublime , অথবা VS Code
প্যাকেজ ম্যানেজার npm , যা সাধারণত Node.js এর সাথে আসে
একটি টার্মিনাল/কনসোল
আপনার পছন্দের একটি ব্রাউজার, যেমন Chrome
কোডল্যাবের নমুনা কোড (কোডটি কীভাবে পাবেন তার জন্য কোডল্যাবের পরবর্তী ধাপটি দেখুন।)

2. নমুনা কোড পান

একটি GitHub সংগ্রহস্থল তৈরি করুন

কোডল্যাব সোর্সটি https://github.com/firebase/codelab-friendlychat-web এ পাওয়া যাবে। এই রিপোজিটরিতে একাধিক প্ল্যাটফর্মের জন্য নমুনা প্রকল্প রয়েছে। তবে, এই কোডল্যাবটি শুধুমাত্র angularfire-start ডিরেক্টরি ব্যবহার করে।

angularfire-start ফোল্ডারটি আপনার নিজস্ব সংগ্রহস্থলে অনুলিপি করুন:

একটি টার্মিনাল ব্যবহার করে, আপনার কম্পিউটারে একটি নতুন ফোল্ডার তৈরি করুন এবং নতুন ডিরেক্টরিতে পরিবর্তন করুন:
```
mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
```
শুধুমাত্র angularfire-start ফোল্ডারটি আনতে giget npm প্যাকেজটি ব্যবহার করুন:
```
npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
```
গিট দিয়ে স্থানীয়ভাবে পরিবর্তনগুলি ট্র্যাক করুন:
```
git init

git add .

git commit -m "codelab starting point"

git branch -M main
```
একটি নতুন GitHub সংগ্রহস্থল তৈরি করুন: https://github.com/new । আপনার পছন্দের যেকোনো নাম দিন।
1. GitHub আপনাকে একটি নতুন রিপোজিটরি URL দেবে যা https://github.com/[user-name]/[repository-name].git অথবা git@github.com:[user-name]/[repository-name].git এর মতো দেখতে হবে। এই URL টি কপি করুন।
আপনার নতুন GitHub রিপোজিটরিতে স্থানীয় পরিবর্তনগুলি পুশ করুন। আপনার রিপোজিটরি URL-কে your-repository-url প্লেসহোল্ডারের পরিবর্তে নিম্নলিখিত কমান্ডটি চালান।
```
git remote add origin your-repository-url

git push -u origin main
```
এখন আপনার GitHub রিপোজিটরিতে স্টার্টার কোডটি দেখতে পাবেন।

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

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

আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ, FriendlyChat )।
এই প্রকল্পের নামটি Firebase ইন্টারফেসে একটি প্রদর্শন নাম হিসেবে ব্যবহৃত হয় এবং Firebase এই প্রকল্পের নামের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে একটি অনন্য প্রকল্প আইডি তৈরি করে। মনে রাখবেন যে আপনি ঐচ্ছিকভাবে এখনই সম্পাদনা আইকনে ক্লিক করে আপনার পছন্দের প্রকল্প আইডি সেট করতে পারেন, তবে প্রকল্প তৈরির পরে আপনি এই আইডি পরিবর্তন করতে পারবেন না।
আপনার প্রজেক্ট আইডি মনে রাখবেন কারণ পরে Firebase CLI তে আপনার Firebase প্রজেক্ট সনাক্ত করার জন্য এটির প্রয়োজন হবে। যদি আপনি আপনার আইডি ভুলে যান, তাহলে আপনি এটি পরে Project Settings এ খুঁজে পেতে পারেন।
চালিয়ে যান ক্লিক করুন।
যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
(ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন ।
Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।

আপনার Firebase মূল্য পরিকল্পনা আপগ্রেড করুন

Firebase-এর জন্য Firebase অ্যাপ হোস্টিং এবং ক্লাউড স্টোরেজ ব্যবহার করার জন্য, আপনার Firebase প্রকল্পটি pay-as-you go (Blaze) মূল্য পরিকল্পনায় থাকা প্রয়োজন, যার অর্থ এটি একটি Cloud Billing অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

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

আপনার প্রকল্পটিকে ব্লেজ প্ল্যানে আপগ্রেড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করতে নির্বাচন করুন।
ব্লেজ প্ল্যানটি নির্বাচন করুন। আপনার প্রকল্পের সাথে একটি ক্লাউড বিলিং অ্যাকাউন্ট লিঙ্ক করতে অন-স্ক্রিন নির্দেশাবলী অনুসরণ করুন।
এই আপগ্রেডের অংশ হিসেবে যদি আপনার একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করার প্রয়োজন হয়, তাহলে আপগ্রেড সম্পূর্ণ করার জন্য আপনাকে Firebase কনসোলে আপগ্রেড ফ্লোতে ফিরে যেতে হতে পারে।

প্রকল্পে একটি Firebase ওয়েব অ্যাপ যোগ করুন

ওয়েব আইকনে ক্লিক করুন একটি নতুন Firebase ওয়েব অ্যাপ তৈরি করতে।
"Friendly Chat" ডাকনাম দিয়ে অ্যাপটি নিবন্ধন করুন। "Also set up Firebase Hosting for this app" এর পাশের বাক্সটি চেক করবেন না। "Register app" এ ক্লিক করুন।
পরবর্তী ধাপে, আপনি একটি কনফিগারেশন অবজেক্ট দেখতে পাবেন। আপনার এখন এটির প্রয়োজন নেই। কনসোল করতে Continue এ ক্লিক করুন।

ওয়েব অ্যাপ রেজিস্টার করার স্ক্রিনশট

Firebase পণ্য সেট আপ করুন

আপনি যে অ্যাপ্লিকেশনটি তৈরি করতে যাচ্ছেন তাতে ওয়েব অ্যাপের জন্য উপলব্ধ Firebase পণ্য ব্যবহার করা হয়েছে:

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

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

প্রমাণীকরণ সেট আপ করুন

ব্যবহারকারীদের তাদের Google অ্যাকাউন্ট দিয়ে ওয়েব অ্যাপে সাইন ইন করার অনুমতি দিতে, আপনাকে Google সাইন-ইন পদ্ধতি ব্যবহার করতে হবে।

Firebase কনসোলে, Authentication এ নেভিগেট করুন।
শুরু করুন ক্লিক করুন।
অতিরিক্ত প্রদানকারী কলামে, Google > সক্ষম করুন এ ক্লিক করুন।
প্রকল্পের জন্য পাবলিক-ফেসিং নামের টেক্সট বক্সে, একটি স্মরণীয় নাম লিখুন, যেমন My Next.js app ।
প্রকল্পের জন্য সহায়তা ইমেল ড্রপ-ডাউন থেকে, আপনার ইমেল ঠিকানা নির্বাচন করুন।
সংরক্ষণ করুন ক্লিক করুন।

ক্লাউড ফায়ারস্টোর সেট আপ করুন

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

আপনার Firebase প্রকল্পে Cloud Firestore কীভাবে সেট আপ করবেন তা এখানে দেওয়া হল:

Firebase কনসোলের বাম প্যানেলে, Build প্রসারিত করুন এবং তারপর Firestore database নির্বাচন করুন।
ডাটাবেস তৈরি করুন ক্লিক করুন।
ডাটাবেস আইডি (default) এ সেট করে রাখুন।
আপনার ডাটাবেসের জন্য একটি অবস্থান নির্বাচন করুন, তারপর পরবর্তী ক্লিক করুন।
একটি আসল অ্যাপের জন্য, আপনাকে এমন একটি অবস্থান বেছে নিতে হবে যা আপনার ব্যবহারকারীদের কাছাকাছি।
পরীক্ষা মোডে শুরু করুন ক্লিক করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন।
এই কোডল্যাবে পরে, আপনার ডেটা সুরক্ষিত করার জন্য আপনি সুরক্ষা নিয়ম যোগ করবেন। আপনার ডাটাবেসের জন্য সুরক্ষা নিয়ম যোগ না করে কোনও অ্যাপ সর্বজনীনভাবে বিতরণ বা প্রকাশ করবেন না ।
তৈরি করুন ক্লিক করুন।

Firebase এর জন্য ক্লাউড স্টোরেজ সেট আপ করুন

ওয়েব অ্যাপটি ছবি সংরক্ষণ, আপলোড এবং শেয়ার করার জন্য Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করে।

আপনার Firebase প্রকল্পে Firebase এর জন্য ক্লাউড স্টোরেজ কীভাবে সেট আপ করবেন তা এখানে দেওয়া হল:

Firebase কনসোলের বাম প্যানেলে, Build প্রসারিত করুন এবং তারপর Storage নির্বাচন করুন।
শুরু করুন ক্লিক করুন।
আপনার ডিফল্ট স্টোরেজ বাকেটের জন্য একটি অবস্থান নির্বাচন করুন।
US-WEST1 , US-CENTRAL1 , এবং US-EAST1 এর বাকেটগুলি Google ক্লাউড স্টোরেজের জন্য "সর্বদা বিনামূল্যে" স্তরের সুবিধা নিতে পারে। অন্যান্য সমস্ত অবস্থানের বাকেটগুলি Google ক্লাউড স্টোরেজের মূল্য এবং ব্যবহার অনুসরণ করে।
পরীক্ষা মোডে শুরু করুন ক্লিক করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন।
এই কোডল্যাবে পরে, আপনার ডেটা সুরক্ষিত করার জন্য আপনি সুরক্ষা নিয়ম যুক্ত করবেন। আপনার স্টোরেজ বাকেটের জন্য সুরক্ষা নিয়ম যুক্ত না করে কোনও অ্যাপ সর্বজনীনভাবে বিতরণ বা প্রকাশ করবেন না ।
তৈরি করুন ক্লিক করুন।

৪. ফায়ারবেস কমান্ড-লাইন ইন্টারফেস ইনস্টল করুন

ফায়ারবেস কমান্ড-লাইন ইন্টারফেস (CLI) আপনাকে স্থানীয়ভাবে আপনার ওয়েব অ্যাপ পরিবেশন করতে এবং আপনার ফায়ারবেস প্রকল্পে আপনার ওয়েব অ্যাপ স্থাপন করতে ফায়ারবেস হোস্টিং ব্যবহার করতে দেয়।

নিম্নলিখিত npm কমান্ডটি চালিয়ে CLI ইনস্টল করুন:

npm -g install firebase-tools@latest

নিম্নলিখিত কমান্ডটি চালিয়ে CLI সঠিকভাবে ইনস্টল করা হয়েছে কিনা তা যাচাই করুন:

firebase --version

নিশ্চিত করুন যে Firebase CLI এর সংস্করণটি v13.9.0 বা তার পরবর্তী সংস্করণ।

নিম্নলিখিত কমান্ডটি চালিয়ে Firebase CLI অনুমোদন করুন:

firebase login

আপনি আপনার অ্যাপের স্থানীয় ডিরেক্টরি (কোডল্যাবে আপনি আগে ক্লোন করা রিপোজিটরি) থেকে Firebase Hosting-এর জন্য আপনার অ্যাপের কনফিগারেশন টেনে আনতে ওয়েব অ্যাপ টেমপ্লেট সেট আপ করেছেন। কিন্তু কনফিগারেশন টেনে আনতে, আপনাকে আপনার অ্যাপটিকে আপনার Firebase প্রজেক্টের সাথে সংযুক্ত করতে হবে।

নিশ্চিত করুন যে আপনার কমান্ড লাইনটি আপনার অ্যাপের স্থানীয় angularfire-start ডিরেক্টরিতে অ্যাক্সেস করছে।
নিম্নলিখিত কমান্ডটি চালিয়ে আপনার অ্যাপটিকে আপনার ফায়ারবেস প্রকল্পের সাথে সংযুক্ত করুন:

firebase use --add

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

যদি আপনার একাধিক পরিবেশ (প্রোডাকশন, স্টেজিং, ইত্যাদি) থাকে তবে একটি উপনাম কার্যকর। তবে, এই কোডল্যাবের জন্য, আসুন কেবল default উপনাম ব্যবহার করি।

আপনার কমান্ড লাইনের অবশিষ্ট নির্দেশাবলী অনুসরণ করুন।

৫. অ্যাঙ্গুলারফায়ার ইনস্টল করুন

প্রকল্পটি চালানোর আগে, নিশ্চিত করুন যে আপনার Angular CLI এবং AngularFire সেট আপ আছে।

একটি কনসোলে, নিম্নলিখিত কমান্ডটি চালান:

npm install -g @angular/cli

তারপর, angularfire-start ডিরেক্টরি থেকে একটি কনসোলে, নিম্নলিখিত Angular CLI কমান্ডটি চালান:

ng add @angular/fire

এটি আপনার প্রকল্পের জন্য প্রয়োজনীয় সমস্ত নির্ভরতা ইনস্টল করবে।

অনুরোধ করা হলে, স্পেস বার দিয়ে ng deploy -- hosting আনচেক করুন। তীর কী এবং স্পেস বার দিয়ে নিম্নলিখিত বৈশিষ্ট্যগুলি নির্বাচন করুন:
- Authentication
- Firestore
- Cloud Messaging
- Cloud Storage
enter টিপুন এবং বাকি প্রম্পটগুলি অনুসরণ করুন।
"Install AngularFire" কমিট বার্তা সহ একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।

৬. একটি অ্যাপ হোস্টিং ব্যাকএন্ড তৈরি করুন

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

এই বিভাগের শেষে, আপনার GitHub-এ থাকা রিপোজিটরির সাথে একটি অ্যাপ হোস্টিং ব্যাকএন্ড সংযুক্ত থাকবে যা আপনার main শাখায় একটি নতুন কমিট পুশ করার সাথে সাথে স্বয়ংক্রিয়ভাবে আপনার অ্যাপের একটি নতুন সংস্করণ পুনরায় তৈরি করবে এবং রোলআউট করবে।

ফায়ারবেস কনসোলে অ্যাপ হোস্টিং পৃষ্ঠায় নেভিগেট করুন:

'শুরু করুন' বোতাম সহ অ্যাপ হোস্টিং কনসোলের শূন্য অবস্থা

ব্যাকএন্ড তৈরির প্রবাহ শুরু করতে "শুরু করুন" এ ক্লিক করুন। আপনার ব্যাকএন্ডটি নিম্নরূপ কনফিগার করুন:
আপনার আগে তৈরি করা GitHub রিপোজিটরিটি সংযোগ করার জন্য প্রথম ধাপে প্রম্পটগুলি অনুসরণ করুন।
স্থাপনার সেটিংস সেট করুন:
1. রুট ডিরেক্টরিটি / হিসাবে রাখুন
2. লাইভ শাখাটিকে main সেট করুন
3. স্বয়ংক্রিয় রোলআউট সক্ষম করুন
তোমার ব্যাকএন্ডের নাম দাও friendlychat-codelab ।
"একটি ফায়ারবেস ওয়েব অ্যাপ তৈরি করুন বা সংযুক্ত করুন" বিভাগে, "একটি বিদ্যমান ফায়ারবেস ওয়েব অ্যাপ নির্বাচন করুন" ড্রপ ডাউন থেকে আপনি আগে কনফিগার করা ওয়েব অ্যাপটি বেছে নিন।
"Finish and deploy" এ ক্লিক করুন। কিছুক্ষণ পর, আপনাকে একটি নতুন পৃষ্ঠায় নিয়ে যাওয়া হবে যেখানে আপনি আপনার নতুন অ্যাপ হোস্টিং ব্যাকএন্ডের অবস্থা দেখতে পাবেন!
দ্রষ্টব্য : কনসোল থেকে লিঙ্কগুলি অনুসরণ করে আপনি আপনার অ্যাপ হোস্টিং ব্যাকএন্ডের জন্য অন্তর্নিহিত গুগল ক্লাউড পরিষেবাগুলি পর্যবেক্ষণ করতে পারেন। লগ এবং মেট্রিক্স দেখুন এ আরও জানুন।
আপনার রোলআউট সম্পন্ন হলে, "ডোমেইন" এর অধীনে আপনার বিনামূল্যের ডোমেইনটিতে ক্লিক করুন। DNS প্রচারের কারণে এটি কাজ শুরু করতে কয়েক মিনিট সময় নিতে পারে।

আপনি প্রাথমিক ওয়েব অ্যাপটি স্থাপন করেছেন! প্রতিবার যখন আপনি আপনার GitHub রিপোজিটরির main শাখায় একটি নতুন কমিট পুশ করবেন, তখন আপনি Firebase কনসোলে একটি নতুন বিল্ড এবং রোলআউট শুরু হতে দেখবেন এবং রোলআউট সম্পূর্ণ হওয়ার পরে আপনার সাইটটি স্বয়ংক্রিয়ভাবে আপডেট হবে।

'শুরু করুন' বোতাম সহ অ্যাপ হোস্টিং কনসোলের শূন্য অবস্থা

আপনার FriendlyChat অ্যাপের সাইন-ইন স্ক্রিনটি দেখতে পাবেন, যা (এখনও!) কাজ করছে না।

অ্যাপটি এখন কিছুই করতে পারছে না, কিন্তু আপনার সাহায্যে, এটি শীঘ্রই করবে!

এবার একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করা যাক।

৭. ফায়ারবেস আমদানি এবং কনফিগার করুন

ফায়ারবেস কনফিগার করুন

আপনি কোন Firebase প্রকল্পটি ব্যবহার করছেন তা জানার জন্য আপনাকে Firebase SDK কনফিগার করতে হবে।

Firebase কনসোলে আপনার প্রোজেক্ট সেটিংসে যান।
"আপনার অ্যাপস" কার্ডে, যে অ্যাপটির জন্য আপনার একটি কনফিগ অবজেক্ট প্রয়োজন তার ডাকনাম নির্বাচন করুন।
Firebase SDK স্নিপেট প্যান থেকে "Config" নির্বাচন করুন।

তুমি দেখতে পাবে যে তোমার জন্য /angularfire-start/src/environments/environment.ts একটি পরিবেশ ফাইল তৈরি করা হয়েছে।

কনফিগ অবজেক্ট স্নিপেটটি কপি করুন, তারপর এটি angularfire-start/src/firebase-config.js এ যোগ করুন।

`environment.ts`

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

AngularFire সেটআপ দেখুন

আপনি দেখতে পাবেন যে কনসোলে আপনার নির্বাচিত বৈশিষ্ট্যগুলি /angularfire-start/src/app/app.config.ts ফাইলে স্বয়ংক্রিয়ভাবে যুক্ত হয়েছে। এটি আপনার অ্যাপকে Firebase বৈশিষ্ট্য এবং কার্যকারিতা ব্যবহার করতে দেয়।

৮. ব্যবহারকারীর সাইন-ইন সেট আপ করুন

AngularFire এখন ব্যবহারের জন্য প্রস্তুত হবে কারণ এটি app.config.ts এ আমদানি এবং শুরু করা হয়েছে। আপনি এখন Firebase Authentication ব্যবহার করে ব্যবহারকারীর সাইন-ইন বাস্তবায়ন করতে যাচ্ছেন।

একটি অনুমোদিত ডোমেন যোগ করুন

Firebase Authentication শুধুমাত্র আপনার নিয়ন্ত্রণে থাকা ডোমেনের একটি সেট তালিকা থেকে সাইন-ইন করার অনুমতি দেয়। ডোমেনের তালিকায় আপনার বিনামূল্যের অ্যাপ হোস্টিং ডোমেন যোগ করুন:

অ্যাপ হোস্টিং -এ নেভিগেট করুন।
আপনার ব্যাকএন্ডের ডোমেনটি কপি করুন।
প্রমাণীকরণ সেটিংসে নেভিগেট করুন।
অনুমোদিত ডোমেইন ট্যাবটি নির্বাচন করুন।
"ডোমেইন যোগ করুন" এ ক্লিক করুন এবং আপনার অ্যাপ হোস্টিং ব্যাকএন্ডের ডোমেইনটি পেস্ট করুন।

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

সাবডিরেক্টরি /src/app/services/ তে, chat.service.ts খুলুন।
login ফাংশনটি খুঁজুন।
সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

`chat.service.ts`

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

ব্যবহারকারী যখন লগ আউট বোতামে ক্লিক করেন তখন logout ফাংশনটি ট্রিগার হয়।

src/app/services/chat.service.ts ফাইলটিতে ফিরে যান।
ফাংশন logout খুঁজুন।
সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

`chat.service.ts`

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

প্রমাণীকরণের অবস্থা ট্র্যাক করুন

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

src/app/services/chat.service.ts ফাইলটিতে ফিরে যান।
user$ ভ্যারিয়েবল অ্যাসাইনমেন্ট খুঁজুন।

`chat.service.ts`

// observable that is updated when the auth state changes
user$ = user(this.auth);

উপরের কোডটি AngularFire ফাংশন user কল করে যা একটি পর্যবেক্ষণযোগ্য ব্যবহারকারীকে ফেরত পাঠায়। প্রতিবার প্রমাণীকরণের অবস্থা পরিবর্তন হলে (যখন ব্যবহারকারী সাইন ইন বা সাইন আউট করে) এটি ট্রিগার করবে। FriendlyChat-এর Angular টেমপ্লেট উপাদানগুলি UI আপডেট করার জন্য, পুনঃনির্দেশিত করার জন্য, হেডার নেভিতে ব্যবহারকারীকে প্রদর্শন করার জন্য, এবং আরও অনেক কিছু করার জন্য এই পর্যবেক্ষণযোগ্য ব্যবহার করে।

অ্যাপে লগ ইন করার পরীক্ষা করুন

"Google Authentication যোগ করা হচ্ছে" এই কমিট বার্তাটি সহ একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।
Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
ওয়েব অ্যাপে, পৃষ্ঠাটি রিফ্রেশ করুন এবং সাইন-ইন বোতাম এবং আপনার গুগল অ্যাকাউন্ট ব্যবহার করে অ্যাপে লগ ইন করুন। যদি আপনি auth/operation-not-allowed লেখা একটি ত্রুটি বার্তা দেখতে পান, তাহলে নিশ্চিত করুন যে আপনি Firebase কনসোলে একটি প্রমাণীকরণ প্রদানকারী হিসাবে গুগল সাইন-ইন সক্ষম করেছেন।
লগ ইন করার পর, আপনার প্রোফাইল ছবি এবং ব্যবহারকারীর নাম প্রদর্শিত হবে:

৯. ক্লাউড ফায়ারস্টোরে বার্তা লিখুন

এই বিভাগে, আপনি ক্লাউড ফায়ারস্টোরে কিছু ডেটা লিখবেন যাতে আপনি অ্যাপের UI পূরণ করতে পারেন। এটি Firebase কনসোল দিয়ে ম্যানুয়ালি করা যেতে পারে, তবে আপনাকে একটি মৌলিক ক্লাউড ফায়ারস্টোর লেখা প্রদর্শনের জন্য অ্যাপেই এটি করতে হবে।

ডেটা মডেল

ক্লাউড ফায়ারস্টোর ডেটা সংগ্রহ, নথি, ক্ষেত্র এবং উপ-সংগ্রহে বিভক্ত। আপনি চ্যাটের প্রতিটি বার্তাকে messages নামক একটি শীর্ষ-স্তরের সংগ্রহে একটি নথি হিসাবে সংরক্ষণ করবেন।

688d7bc5fb662b57.png সম্পর্কে

ক্লাউড ফায়ারস্টোরে বার্তা যোগ করুন

ব্যবহারকারীদের লেখা চ্যাট বার্তা সংরক্ষণ করতে, আপনি ক্লাউড ফায়ারস্টোর ব্যবহার করবেন।

এই বিভাগে, আপনি ব্যবহারকারীদের জন্য আপনার ডাটাবেসে নতুন বার্তা লেখার কার্যকারিতা যোগ করবেন। SEND বোতামে ক্লিক করলে একজন ব্যবহারকারী নীচের কোড স্নিপেটটি ট্রিগার করবে। এটি messages সংগ্রহের আপনার ক্লাউড ফায়ারস্টোর ইনস্ট্যান্সে বার্তা ক্ষেত্রের বিষয়বস্তু সহ একটি বার্তা বস্তু যোগ করবে। add() পদ্ধতিটি সংগ্রহে স্বয়ংক্রিয়ভাবে তৈরি আইডি সহ একটি নতুন নথি যোগ করবে।

src/app/services/chat.service.ts ফাইলটিতে ফিরে যান।
addMessage ফাংশনটি খুঁজুন।
সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

`chat.service.ts`

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

বার্তা পাঠানোর পরীক্ষা করুন

"Post new chats to Firestore" এই কমিট মেসেজ দিয়ে একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।
Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
FriendlyChat রিফ্রেশ করুন। লগ ইন করার পর, "Hey there!" এর মতো একটি বার্তা লিখুন, এবং তারপর SEND এ ক্লিক করুন। এটি বার্তাটি ক্লাউড ফায়ারস্টোরে লেখা হবে। তবে, আপনি এখনও আপনার আসল ওয়েব অ্যাপে ডেটা দেখতে পাবেন না কারণ আপনাকে এখনও ডেটা পুনরুদ্ধার করতে হবে (কোডল্যাবের পরবর্তী বিভাগ)।
আপনি আপনার Firebase কনসোলে নতুন যোগ করা বার্তাটি দেখতে পাবেন। আপনার এমুলেটর স্যুট UI খুলুন। Build বিভাগের অধীনে Firestore Database এ ক্লিক করুন (অথবা এখানে ক্লিক করুন এবং আপনার নতুন যোগ করা বার্তা সহ বার্তা সংগ্রহটি দেখতে পাবেন:

6812efe7da395692.png সম্পর্কে

১০. বার্তা পড়ুন

বার্তাগুলি সিঙ্ক্রোনাইজ করুন

অ্যাপে বার্তা পড়ার জন্য, আপনাকে একটি পর্যবেক্ষণযোগ্য যোগ করতে হবে যা ডেটা পরিবর্তনের সময় ট্রিগার করবে এবং তারপরে একটি UI উপাদান তৈরি করবে যা নতুন বার্তা দেখায়।

আপনি এমন একটি কোড যোগ করবেন যা অ্যাপ থেকে নতুন যোগ করা বার্তাগুলি শোনে। এই কোডে, আপনি messages সংগ্রহের স্ন্যাপশট পুনরুদ্ধার করবেন। লোড করার সময় খুব দীর্ঘ ইতিহাস প্রদর্শন এড়াতে আপনি চ্যাটের শেষ ১২টি বার্তা প্রদর্শন করবেন।

src/app/services/chat.service.ts ফাইলটিতে ফিরে যান।
ফাংশনটি খুঁজুন loadMessages ।
সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

`chat.service.ts`

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

ডাটাবেসে বার্তা শোনার জন্য, আপনি collection ফাংশন ব্যবহার করে একটি কোয়েরি তৈরি করেন, যেখানে আপনি যে ডেটা শুনতে চান তা কোন সংগ্রহে রয়েছে তা নির্দিষ্ট করে। উপরের কোডে, আপনি messages সংগ্রহের মধ্যে পরিবর্তনগুলি শুনছেন, যেখানে চ্যাট বার্তাগুলি সংরক্ষণ করা হয়। আপনি limit(12) ব্যবহার করে শুধুমাত্র শেষ 12টি বার্তা শুনে এবং orderBy('timestamp', 'desc') ব্যবহার করে তারিখ অনুসারে বার্তাগুলি অর্ডার করে 12টি নতুন বার্তা পেতে একটি সীমা প্রয়োগ করছেন।

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

বার্তা সিঙ্ক্রোনাইজ করার পরীক্ষা করুন

"Show new chats in the UI" এই কমিট মেসেজ দিয়ে একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।
Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
FriendlyChat রিফ্রেশ করুন। ডাটাবেসে আগে তৈরি করা বার্তাগুলি FriendlyChat UI তে প্রদর্শিত হবে (নীচে দেখুন)। নতুন বার্তা লিখতে দ্বিধা করবেন না; সেগুলি তাৎক্ষণিকভাবে প্রদর্শিত হবে।
(ঐচ্ছিক) আপনি এমুলেটর স্যুটের ফায়ারস্টোর বিভাগে সরাসরি ম্যানুয়ালি মুছে ফেলা, পরিবর্তন করা বা নতুন বার্তা যোগ করার চেষ্টা করতে পারেন; যেকোনো পরিবর্তন UI-তে প্রতিফলিত হওয়া উচিত।

অভিনন্দন! আপনি আপনার অ্যাপে ক্লাউড ফায়ারস্টোর ডকুমেন্ট পড়ছেন!

১১. এআই বৈশিষ্ট্য যোগ করুন

চ্যাট অ্যাপে দরকারী সহায়ক বৈশিষ্ট্য যোগ করতে আপনি Google AI ব্যবহার করবেন।

একটি গুগল এআই এপিআই কী পান

গুগল এআই স্টুডিওতে নেভিগেট করুন এবং API কী তৈরি করুন ক্লিক করুন।
এই কোডল্যাবের জন্য আপনার তৈরি করা Firebase প্রকল্পটি নির্বাচন করুন। প্রম্পটটি একটি Google Cloud প্রকল্পের জন্য, কিন্তু প্রতিটি Firebase প্রকল্পই একটি Google Cloud প্রকল্প।
বিদ্যমান প্রকল্পে API কী তৈরি করুন ক্লিক করুন
ফলাফল প্রাপ্ত API কীটি কপি করুন

একটি এক্সটেনশন ইনস্টল করুন

এই এক্সটেনশনটি একটি ক্লাউড ফাংশন স্থাপন করবে যা ফায়ারস্টোরের messages সংগ্রহে প্রতিবার একটি নতুন ডকুমেন্ট যোগ করার সাথে সাথে ট্রিগার হবে। ফাংশনটি জেমিনিকে কল করবে এবং ডকুমেন্টের response ফিল্ডে তার প্রতিক্রিয়া লিখবে।

জেমিনি এপিআই এক্সটেনশন পৃষ্ঠার সাহায্যে বিল্ড চ্যাটবটে ফায়ারবেস কনসোলে ইনস্টল করুন ক্লিক করুন।
প্রম্পটগুলি অনুসরণ করুন। কনফিগার এক্সটেনশন ধাপে পৌঁছানোর পরে, নিম্নলিখিত প্যারামিটার মানগুলি সেট করুন:
- Gemini API প্রদানকারী: Google AI
- গুগল এআই এপিআই কী: আপনার আগে তৈরি করা কীটি পেস্ট করুন এবং সিক্রেট তৈরি করুন এ ক্লিক করুন।
- ফায়ারস্টোর সংগ্রহের পথ: messages
- প্রম্পট ক্ষেত্র: text
- প্রতিক্রিয়া ক্ষেত্র: response
- অর্ডার ক্ষেত্র: timestamp
- প্রসঙ্গ: Keep your answers short, informal, and helpful. Use emojis when possible.
এক্সটেনশন ইনস্টল করুন ক্লিক করুন
এক্সটেনশনটি ইনস্টল করা শেষ না হওয়া পর্যন্ত অপেক্ষা করুন।

AI বৈশিষ্ট্য পরীক্ষা করুন

AI এক্সটেনশন থেকে উত্তর পড়ার জন্য FriendlyChat-এ ইতিমধ্যেই কোড রয়েছে। এটি পরীক্ষা করার জন্য আপনাকে কেবল একটি নতুন চ্যাট বার্তা পাঠাতে হবে!

FriendlyChat খুলুন এবং একটি বার্তা পাঠান।
কিছুক্ষণ পরে, আপনার বার্তার পাশে একটি প্রতিক্রিয়া পপ আপ দেখতে পাবেন। এর শেষে একটি ✨ ai generated নোট রয়েছে যা স্পষ্ট করে তোলে যে এটি জেনারেটিভ AI দিয়ে তৈরি করা হয়েছে, প্রকৃত ব্যবহারকারী নয়।

১২. ছবি পাঠান

আপনি এখন এমন একটি বৈশিষ্ট্য যুক্ত করবেন যা ছবি শেয়ার করে।

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

ক্লাউড স্টোরেজে ছবি সংরক্ষণ করুন

এই কোডল্যাবের জন্য, আপনি ইতিমধ্যেই একটি বোতাম যুক্ত করেছেন যা একটি ফাইল পিকার ডায়ালগ ট্রিগার করে। একটি ফাইল নির্বাচন করার পরে, saveImageMessage ফাংশনটি কল করা হয় এবং আপনি নির্বাচিত ফাইলটির একটি রেফারেন্স পেতে পারেন। saveImageMessage ফাংশনটি নিম্নলিখিত কাজগুলি সম্পন্ন করে:

চ্যাট ফিডে একটি "প্লেসহোল্ডার" চ্যাট বার্তা তৈরি করে, যাতে ব্যবহারকারীরা ছবি আপলোড করার সময় "লোড হচ্ছে" অ্যানিমেশন দেখতে পান।
ক্লাউড স্টোরেজে ছবির ফাইলটি এই পথে আপলোড করে: /<uid>/<file_name>
ইমেজ ফাইলের জন্য একটি সর্বজনীনভাবে পঠনযোগ্য URL তৈরি করে।
অস্থায়ী লোডিং ছবির পরিবর্তে নতুন আপলোড করা ছবির ফাইলের URL দিয়ে চ্যাট বার্তা আপডেট করে।

এখন আপনি একটি ছবি পাঠানোর কার্যকারিতা যোগ করবেন:

src/chat.service.ts ফাইলে ফিরে যান।
saveImageMessage ফাংশনটি খুঁজুন।
সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

চ্যাট.সার্ভিস.টিএস

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);

    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

ছবি পাঠানোর পরীক্ষা করুন

"ছবি পোস্ট করার ক্ষমতা যোগ করুন" এই বার্তাটি সহ একটি কমিট তৈরি করুন এবং এটি আপনার GitHub সংগ্রহস্থলে পুশ করুন।
Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
FriendlyChat রিফ্রেশ করুন। লগ ইন করার পর, নীচে বাম দিকের ছবি আপলোড বোতামে ক্লিক করুন। এবং ফাইল পিকার ব্যবহার করে একটি ছবির ফাইল নির্বাচন করুন। যদি আপনি একটি ছবি খুঁজছেন, তাহলে একটি কফি কাপের এই সুন্দর ছবিটি ব্যবহার করতে দ্বিধা করবেন না।
আপনার নির্বাচিত ছবির সাথে অ্যাপের UI-তে একটি নতুন বার্তা উপস্থিত হওয়া উচিত:

সাইন ইন না করে যদি আপনি একটি ছবি যোগ করার চেষ্টা করেন, তাহলে আপনি একটি ত্রুটি দেখতে পাবেন যেখানে বলা হবে যে ছবি যোগ করার জন্য আপনাকে সাইন ইন করতে হবে।

১৩. বিজ্ঞপ্তি দেখান

এখন আপনি ব্রাউজার বিজ্ঞপ্তির জন্য সমর্থন যোগ করবেন। চ্যাটে নতুন বার্তা পোস্ট করা হলে অ্যাপটি ব্যবহারকারীদের অবহিত করবে। ফায়ারবেস ক্লাউড মেসেজিং (FCM) একটি ক্রস-প্ল্যাটফর্ম মেসেজিং সমাধান যা আপনাকে নির্ভরযোগ্যভাবে বার্তা এবং বিজ্ঞপ্তি সরবরাহ করতে দেয়।

FCM পরিষেবা কর্মী যোগ করুন

ওয়েব অ্যাপটির জন্য একজন পরিষেবা কর্মীর প্রয়োজন যিনি ওয়েব বিজ্ঞপ্তি গ্রহণ এবং প্রদর্শন করবেন।

AngularFire যোগ করার সময় মেসেজিং প্রোভাইডারটি ইতিমধ্যেই সেট আপ করা উচিত ছিল, নিশ্চিত করুন যে নিম্নলিখিত কোডটি /angularfire-start/src/app/app.config.ts এর আমদানি বিভাগে বিদ্যমান।

provideMessaging(() => {
    return getMessaging();
}),

`app/app.config.ts`

পরিষেবা কর্মীকে কেবল Firebase Cloud Messaging SDK লোড এবং আরম্ভ করতে হবে, যা বিজ্ঞপ্তি প্রদর্শনের যত্ন নেবে।

FCM ডিভাইস টোকেন পান

যখন কোনও ডিভাইস বা ব্রাউজারে বিজ্ঞপ্তি সক্রিয় করা হবে, তখন আপনাকে একটি ডিভাইস টোকেন দেওয়া হবে। এই ডিভাইস টোকেনটিই আপনি কোনও নির্দিষ্ট ডিভাইস বা নির্দিষ্ট ব্রাউজারে বিজ্ঞপ্তি পাঠাতে ব্যবহার করেন।

ব্যবহারকারী সাইন ইন করলে, আপনি saveMessagingDeviceToken ফাংশনে কল করবেন। সেখানেই আপনি ব্রাউজার থেকে FCM ডিভাইস টোকেন পাবেন এবং এটি ক্লাউড ফায়ারস্টোরে সংরক্ষণ করবেন।

`chat.service.ts`

saveMessagingDeviceToken ফাংশনটি খুঁজুন।
সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

`chat.service.ts`

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });

        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

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

বিজ্ঞপ্তি দেখানোর জন্য অনুমতির অনুরোধ করুন

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

8b9d0c66dc36153d.png সম্পর্কে

src/app/services/chat.service.ts ফাইলটিতে ফিরে যান।
ফাংশনটি খুঁজুন requestNotificationsPermissions ।
সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

`chat.service.ts`

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

আপনার ডিভাইসের টোকেন পান

"ছবি পোস্ট করার ক্ষমতা যোগ করুন" এই বার্তাটি সহ একটি কমিট তৈরি করুন এবং এটি আপনার GitHub সংগ্রহস্থলে পুশ করুন।
Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
FriendlyChat রিফ্রেশ করুন। লগ ইন করার পরে, বিজ্ঞপ্তি অনুমতি ডায়ালগটি প্রদর্শিত হবে:
অনুমতি দিন ক্লিক করুন।
আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোলটি খুলুন। আপনি নিম্নলিখিত বার্তাটি দেখতে পাবেন: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
আপনার ডিভাইস টোকেনটি কপি করুন। কোডল্যাবের পরবর্তী পর্যায়ে আপনার এটির প্রয়োজন হবে।

আপনার ডিভাইসে একটি বিজ্ঞপ্তি পাঠান

এখন যেহেতু আপনার ডিভাইসের টোকেন আছে, আপনি একটি বিজ্ঞপ্তি পাঠাতে পারেন।

Firebase কনসোলের ক্লাউড মেসেজিং ট্যাবটি খুলুন।
"নতুন বিজ্ঞপ্তি" এ ক্লিক করুন।
একটি বিজ্ঞপ্তির শিরোনাম এবং বিজ্ঞপ্তির টেক্সট লিখুন।
স্ক্রিনের ডান দিকে, "একটি পরীক্ষামূলক বার্তা পাঠান" এ ক্লিক করুন।
আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোল থেকে কপি করা ডিভাইস টোকেনটি লিখুন, তারপর প্লাস ("+") চিহ্নে ক্লিক করুন।
"পরীক্ষা" ক্লিক করুন

যদি আপনার অ্যাপটি ফোরগ্রাউন্ডে থাকে, তাহলে আপনি জাভাস্ক্রিপ্ট কনসোলে বিজ্ঞপ্তিটি দেখতে পাবেন।

যদি আপনার অ্যাপটি ব্যাকগ্রাউন্ডে থাকে, তাহলে আপনার ব্রাউজারে একটি বিজ্ঞপ্তি প্রদর্শিত হবে, যেমনটি এই উদাহরণে দেখানো হয়েছে:

de79e8638a45864c.png সম্পর্কে

১৪. ক্লাউড ফায়ারস্টোর নিরাপত্তা নিয়ম

ডাটাবেস নিরাপত্তা নিয়ম দেখুন

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

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

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

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

ফায়ারস্টোর.নিয়ম

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

আপনার এমুলেটর স্যুটে নিরাপত্তা নিয়মগুলি স্বয়ংক্রিয়ভাবে আপডেট হওয়া উচিত।

ক্লাউড স্টোরেজের নিরাপত্তা নিয়ম দেখুন

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

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

নিম্নলিখিত কাজগুলি করার জন্য আপনাকে নিয়মগুলি আপডেট করতে হবে:

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

নিম্নলিখিত নিয়মগুলি ব্যবহার করে এটি বাস্তবায়ন করা যেতে পারে:

স্টোরেজ.নিয়ম

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

১৫. অভিনন্দন!

আপনি একটি রিয়েল-টাইম চ্যাট ওয়েব অ্যাপ্লিকেশন তৈরি করতে Firebase ব্যবহার করেছেন!

তুমি যা কভার করেছো

ফায়ারবেস অ্যাপ হোস্টিং
ফায়ারবেস প্রমাণীকরণ
ক্লাউড ফায়ারস্টোর
ক্লাউড স্টোরেজের জন্য ফায়ারবেস SDK
ফায়ারবেস ক্লাউড মেসেজিং
ফায়ারবেস পারফর্মেন্স মনিটরিং

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

আরও জানুন

firebase.google.com সম্পর্কে

১৬. [ঐচ্ছিক] অ্যাপ চেকের মাধ্যমে প্রয়োগ করুন

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

প্রথমে, আপনাকে অ্যাপ চেক এবং রিক্যাপচা সক্ষম করতে হবে।

রিক্যাপচা এন্টারপ্রাইজ সক্ষম করা হচ্ছে

ক্লাউড কনসোলে, সিকিউরিটির অধীনে reCaptcha Enterprise খুঁজুন এবং নির্বাচন করুন।
অনুরোধ অনুসারে পরিষেবাটি সক্রিয় করুন এবং Create Key এ ক্লিক করুন।
অনুরোধ অনুসারে একটি প্রদর্শন নাম লিখুন এবং আপনার প্ল্যাটফর্মের ধরণ হিসাবে ওয়েবসাইট নির্বাচন করুন।
আপনার স্থাপন করা URL গুলি ডোমেন তালিকায় যোগ করুন এবং নিশ্চিত করুন যে "চেকবক্স চ্যালেঞ্জ ব্যবহার করুন" বিকল্পটি অনির্বাচিত আছে।
Create Key এ ক্লিক করুন, এবং তৈরি করা কীটি নিরাপদ রাখার জন্য কোথাও সংরক্ষণ করুন। এই ধাপে পরে আপনার এটির প্রয়োজন হবে।

অ্যাপ চেক সক্ষম করা হচ্ছে

ফায়ারবেস কনসোলে, বাম প্যানেলে বিল্ড বিভাগটি সনাক্ত করুন।
অ্যাপ চেক এ ক্লিক করুন, তারপর অ্যাপ চেক এ নেভিগেট করতে সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন।
Register এ ক্লিক করুন এবং অনুরোধ করা হলে আপনার reCaptcha Enterprise কী লিখুন, তারপর Save এ ক্লিক করুন।
APIs View-এ, Storage নির্বাচন করুন এবং Enforce এ ক্লিক করুন। Cloud Firestore-এর ক্ষেত্রেও একই কাজ করুন।

অ্যাপ চেক এখন কার্যকর করা উচিত! আপনার অ্যাপটি রিফ্রেশ করুন এবং চ্যাট বার্তাগুলি দেখার বা পাঠানোর চেষ্টা করুন। আপনার ত্রুটি বার্তাটি পাওয়া উচিত:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

এর মানে হল অ্যাপ চেক ডিফল্টভাবে অবৈধ অনুরোধগুলিকে ব্লক করছে। এখন আপনার অ্যাপে বৈধতা যোগ করা যাক।

আপনার environment.ts ফাইলে যান এবং environment অবজেক্টে reCAPTCHAEnterpriseKey যোগ করুন।

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.firebasestorage.app',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

আপনার reCaptcha এন্টারপ্রাইজ টোকেন দিয়ে key এর মান প্রতিস্থাপন করুন।

তারপর, app.config.ts ফাইলে যান এবং নিম্নলিখিত আমদানিগুলি যোগ করুন:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

একই app.config.ts ফাইলে, নিম্নলিখিত গ্লোবাল ভ্যারিয়েবল ঘোষণা যোগ করুন:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

আমদানিতে, ReCaptchaEnterpriseProvider দিয়ে অ্যাপ চেকের ইনিশিয়ালাইজেশন যোগ করুন এবং টোকেনগুলিকে স্বয়ংক্রিয়ভাবে রিফ্রেশ করার অনুমতি দেওয়ার জন্য isTokenAutoRefreshEnabled true সেট করুন।

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

স্থানীয় পরীক্ষার অনুমতি দিতে, self.FIREBASE_APPCHECK_DEBUG_TOKEN কে true তে সেট করুন। যখন আপনি localhost এ আপনার অ্যাপ রিফ্রেশ করবেন, তখন এটি কনসোলে একটি ডিবাগ টোকেন লগ করবে যেমন:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

এখন, Firebase কনসোলে অ্যাপস ভিউ অফ অ্যাপ চেক-এ যান।

ওভারফ্লো মেনুতে ক্লিক করুন এবং ডিবাগ টোকেন পরিচালনা করুন নির্বাচন করুন।

তারপর, "ডিবাগ টোকেন যোগ করুন" এ ক্লিক করুন এবং অনুরোধ অনুসারে আপনার কনসোল থেকে ডিবাগ টোকেনটি পেস্ট করুন।

chat.service.ts ফাইলে যান এবং নিম্নলিখিত আমদানি যোগ করুন:

import { AppCheck } from '@angular/fire/app-check';

একই chat.service.ts ফাইলে, অন্যান্য Firebase পরিষেবার পাশাপাশি App Check ইনজেক্ট করুন।

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

"অ্যাপ চেকের মাধ্যমে অননুমোদিত ক্লায়েন্টদের ব্লক করুন" এই কমিট বার্তাটি সহ একটি কমিট তৈরি করুন এবং এটি আপনার গিটহাব রিপোজিটরিতে পুশ করুন।
Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।

অভিনন্দন! অ্যাপ চেক এখন আপনার অ্যাপে কাজ করা উচিত।

1. সংক্ষিপ্ত বিবরণ

তুমি কি শিখবে

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

2. নমুনা কোড পান

একটি GitHub সংগ্রহস্থল তৈরি করুন

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

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

আপনার Firebase মূল্য পরিকল্পনা আপগ্রেড করুন

প্রকল্পে একটি Firebase ওয়েব অ্যাপ যোগ করুন

Firebase পণ্য সেট আপ করুন

প্রমাণীকরণ সেট আপ করুন

ক্লাউড ফায়ারস্টোর সেট আপ করুন

Firebase এর জন্য ক্লাউড স্টোরেজ সেট আপ করুন

৪. ফায়ারবেস কমান্ড-লাইন ইন্টারফেস ইনস্টল করুন

৫. অ্যাঙ্গুলারফায়ার ইনস্টল করুন

৬. একটি অ্যাপ হোস্টিং ব্যাকএন্ড তৈরি করুন

৭. ফায়ারবেস আমদানি এবং কনফিগার করুন

ফায়ারবেস কনফিগার করুন

AngularFire সেটআপ দেখুন

৮. ব্যবহারকারীর সাইন-ইন সেট আপ করুন

একটি অনুমোদিত ডোমেন যোগ করুন

Google সাইন-ইনের মাধ্যমে আপনার ব্যবহারকারীদের প্রমাণীকরণ করুন

প্রমাণীকরণের অবস্থা ট্র্যাক করুন

অ্যাপে লগ ইন করার পরীক্ষা করুন

৯. ক্লাউড ফায়ারস্টোরে বার্তা লিখুন

ডেটা মডেল

ক্লাউড ফায়ারস্টোরে বার্তা যোগ করুন

বার্তা পাঠানোর পরীক্ষা করুন

১০. বার্তা পড়ুন

বার্তাগুলি সিঙ্ক্রোনাইজ করুন

বার্তা সিঙ্ক্রোনাইজ করার পরীক্ষা করুন

১১. এআই বৈশিষ্ট্য যোগ করুন

একটি গুগল এআই এপিআই কী পান

একটি এক্সটেনশন ইনস্টল করুন

AI বৈশিষ্ট্য পরীক্ষা করুন

১২. ছবি পাঠান

ক্লাউড স্টোরেজে ছবি সংরক্ষণ করুন

ছবি পাঠানোর পরীক্ষা করুন

১৩. বিজ্ঞপ্তি দেখান

FCM পরিষেবা কর্মী যোগ করুন

FCM ডিভাইস টোকেন পান

বিজ্ঞপ্তি দেখানোর জন্য অনুমতির অনুরোধ করুন

আপনার ডিভাইসের টোকেন পান

আপনার ডিভাইসে একটি বিজ্ঞপ্তি পাঠান

১৪. ক্লাউড ফায়ারস্টোর নিরাপত্তা নিয়ম

ডাটাবেস নিরাপত্তা নিয়ম দেখুন

ক্লাউড স্টোরেজের নিরাপত্তা নিয়ম দেখুন

১৫. অভিনন্দন!

তুমি যা কভার করেছো

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

আরও জানুন

১৬. [ঐচ্ছিক] অ্যাপ চেকের মাধ্যমে প্রয়োগ করুন