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

ওয়েবের জন্য Firebase কে জানুন

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

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

এই ধাপের স্ক্রিনশট

তুমি কি শিখবে

Firebase Authentication এবং FirebaseUI ব্যবহার করে ব্যবহারকারীদের প্রমাণীকরণ করুন।
ক্লাউড ফায়ারস্টোর ব্যবহার করে ডেটা সিঙ্ক করুন।
একটি ডাটাবেস সুরক্ষিত করার জন্য ফায়ারবেস নিরাপত্তা নিয়ম লিখ।

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

আপনার পছন্দের একটি ব্রাউজার, যেমন Chrome।
stackblitz.com- এ অ্যাক্সেস (কোন অ্যাকাউন্ট বা সাইন-ইনের প্রয়োজন নেই)।
একটি গুগল অ্যাকাউন্ট, যেমন একটি জিমেইল অ্যাকাউন্ট। আমরা আপনার গিটহাব অ্যাকাউন্টের জন্য ইতিমধ্যেই যে ইমেল অ্যাকাউন্টটি ব্যবহার করছেন সেটিই সুপারিশ করছি। এটি আপনাকে স্ট্যাকব্লিটজে উন্নত বৈশিষ্ট্যগুলি ব্যবহার করতে দেয়।
কোডল্যাবের নমুনা কোড। কোডটি কীভাবে পাবেন তার জন্য পরবর্তী ধাপটি দেখুন।

2. শুরুর কোডটি পান

এই কোডল্যাবে, আপনি StackBlitz ব্যবহার করে একটি অ্যাপ তৈরি করতে পারেন, এটি একটি অনলাইন এডিটর যার মধ্যে বেশ কয়েকটি Firebase ওয়ার্কফ্লো ইন্টিগ্রেটেড থাকে। Stackblitz-এর জন্য কোনও সফ্টওয়্যার ইনস্টলেশন বা বিশেষ StackBlitz অ্যাকাউন্টের প্রয়োজন হয় না।

StackBlitz আপনাকে অন্যদের সাথে প্রকল্পগুলি ভাগ করে নিতে দেয়। যাদের কাছে আপনার StackBlitz প্রকল্পের URL আছে তারা আপনার কোড দেখতে এবং আপনার প্রকল্পটি ফোর্ক করতে পারে, কিন্তু তারা আপনার StackBlitz প্রকল্পটি সম্পাদনা করতে পারে না।

শুরুর কোডের জন্য এই URL এ যান: https://stackblitz.com/edit/firebase-gtk-web-start
StackBlitz পৃষ্ঠার শীর্ষে, Fork এ ক্লিক করুন:

এই ধাপের স্ক্রিনশট

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

যদি আপনি দুর্ঘটনাক্রমে ভুল করে ফেলেন, তাহলে এই কোডল্যাবের বিভিন্ন চেকপয়েন্টে স্ট্যাকব্লিটজ লিঙ্ক রয়েছে, যেগুলো সেই বিন্দু পর্যন্ত যোগ করা সমস্ত কোডের সাথে আপডেট করা হয়েছে।

এই চেকপয়েন্টগুলিতে দুটি কাজ নিশ্চিত করুন:

প্রকল্পটি এমনভাবে তৈরি করুন যাতে এটি আপনার নিজস্ব হয়।
Firebase কনসোল থেকে আপনার Firebase প্রজেক্ট কনফিগারেশন অবজেক্ট যোগ করুন (এ বিষয়ে আরও বিস্তারিত কোডল্যাবে পরে)।

৩. ইভেন্টের তথ্য সম্পাদনা করুন

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

শুরু করার জন্য, আসুন StackBlitz ইন্টারফেসের সাথে আরও কিছুটা পরিচিত হই।

StackBlitz-এ, index.html ফাইলটি খুলুন।
event-details-container এবং description-container খুঁজুন, তারপর কিছু ইভেন্টের বিবরণ সম্পাদনা করার চেষ্টা করুন।

আপনি যখন লেখাটি সম্পাদনা করেন, তখন StackBlitz-এ স্বয়ংক্রিয় পৃষ্ঠা পুনরায় লোড নতুন ইভেন্টের বিবরণ প্রদর্শন করে। দারুন, তাই না?

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

আপনার অ্যাপের প্রিভিউ এরকম দেখাবে:

অ্যাপ প্রিভিউ

এই ধাপের স্ক্রিনশট

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

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

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

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

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

কনসোলে Firebase পণ্যগুলি সক্ষম এবং সেট আপ করুন

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

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

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

ব্যবহারকারীদের ওয়েব অ্যাপে সাইন ইন করার অনুমতি দিতে, আপনি এই কোডল্যাবের জন্য ইমেল/পাসওয়ার্ড সাইন-ইন পদ্ধতি ব্যবহার করবেন:

Firebase কনসোলের বাম দিকের প্যানেলে, Build > Authentication এ ক্লিক করুন। তারপর Get Started এ ক্লিক করুন। আপনি এখন Authentication ড্যাশবোর্ডে আছেন, যেখানে আপনি সাইন-আপ করা ব্যবহারকারীদের দেখতে পারবেন, সাইন-ইন প্রদানকারী কনফিগার করতে পারবেন এবং সেটিংস পরিচালনা করতে পারবেন।
সাইন-ইন পদ্ধতি ট্যাবটি নির্বাচন করুন (অথবা সরাসরি ট্যাবে যেতে এখানে ক্লিক করুন )।
প্রোভাইডার অপশন থেকে ইমেল/পাসওয়ার্ড ক্লিক করুন, স্যুইচটি সক্রিয় করুন এ টগল করুন, এবং তারপর সংরক্ষণ করুন এ ক্লিক করুন।

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

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

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

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

৫. ফায়ারবেস যোগ এবং কনফিগার করুন

এখন যেহেতু আপনার ফায়ারবেস প্রজেক্ট তৈরি করা হয়েছে এবং কিছু পরিষেবা সক্রিয় করা হয়েছে, আপনাকে কোডটি বলতে হবে যে আপনি ফায়ারবেস ব্যবহার করতে চান, সেইসাথে কোন ফায়ারবেস প্রজেক্ট ব্যবহার করবেন।

ফায়ারবেস লাইব্রেরি যোগ করুন

আপনার অ্যাপটি Firebase ব্যবহার করার জন্য, আপনাকে অ্যাপটিতে Firebase লাইব্রেরি যোগ করতে হবে। Firebase ডকুমেন্টেশনে বর্ণিত পদ্ধতি অনুসারে এটি করার একাধিক উপায় রয়েছে। উদাহরণস্বরূপ, আপনি Google এর CDN থেকে লাইব্রেরি যোগ করতে পারেন, অথবা আপনি npm ব্যবহার করে স্থানীয়ভাবে ইনস্টল করতে পারেন এবং তারপর Browserify ব্যবহার করলে আপনার অ্যাপে প্যাকেজ করতে পারেন।

StackBlitz স্বয়ংক্রিয় বান্ডলিং প্রদান করে, তাই আপনি আমদানি বিবৃতি ব্যবহার করে Firebase লাইব্রেরিগুলি যোগ করতে পারেন। আপনি লাইব্রেরির মডুলার (v9) সংস্করণগুলি ব্যবহার করবেন, যা "ট্রি শেকিং" নামক একটি প্রক্রিয়ার মাধ্যমে ওয়েবপৃষ্ঠার সামগ্রিক আকার হ্রাস করতে সহায়তা করে। আপনি ডক্সে মডুলার SDK সম্পর্কে আরও জানতে পারেন।

এই অ্যাপটি তৈরি করতে, আপনাকে Firebase Authentication, FirebaseUI এবং Cloud Firestore লাইব্রেরি ব্যবহার করতে হবে। এই কোডল্যাবের জন্য, নিম্নলিখিত আমদানি বিবৃতিগুলি ইতিমধ্যেই index.js ফাইলের শীর্ষে অন্তর্ভুক্ত করা হয়েছে, এবং আমরা প্রতিটি Firebase লাইব্রেরি থেকে আরও পদ্ধতি আমদানি করব:

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

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

Firebase কনসোলে ফিরে, উপরের বাম দিকে Project Overview-এ ক্লিক করে আপনার প্রোজেক্টের ওভারভিউ পৃষ্ঠায় নেভিগেট করুন।
আপনার প্রকল্পের ওভারভিউ পৃষ্ঠার কেন্দ্রে, ওয়েব আইকনে ক্লিক করুন একটি নতুন Firebase ওয়েব অ্যাপ তৈরি করতে।
"ওয়েব অ্যাপ" ডাকনাম দিয়ে অ্যাপটি নিবন্ধন করুন।
এই কোডল্যাবের জন্য, "এই অ্যাপের জন্য ফায়ারবেস হোস্টিং সেট আপ করুন" এর পাশের বাক্সটি চেক করবেন না। আপনি আপাতত StackBlitz এর প্রিভিউ প্যান ব্যবহার করবেন।
অ্যাপ নিবন্ধন করুন এ ক্লিক করুন।
Stackblitz আপনার জন্য আপনার নির্ভরতা পরিচালনা করে, তাই আপনি কনসোলে প্রদর্শিত npm install firebase ধাপটি এড়িয়ে যেতে পারেন।
আপনার ক্লিপবোর্ডে Firebase কনফিগারেশন অবজেক্টটি কপি করুন।
কনসোল করতে Continue এ ক্লিক করুন। আপনার অ্যাপে Firebase কনফিগারেশন অবজেক্ট যোগ করুন:
StackBlitz-এ ফিরে, index.js ফাইলে যান।
Add Firebase project configuration object here মন্তব্য লাইনটি সনাক্ত করুন, তারপর মন্তব্যের ঠিক নীচে আপনার কনফিগারেশন স্নিপেটটি পেস্ট করুন।

আপনার অনন্য Firebase প্রকল্প কনফিগারেশন ব্যবহার করে Firebase সেট আপ করতে initializeApp ফাংশন কল যোগ করুন।

// ...
// Add Firebase project configuration object here
const firebaseConfig = {
  apiKey: "random-unique-string",
  authDomain: "your-projectId.firebaseapp.com",
  databaseURL: "https://your-projectId.firebaseio.com",
  projectId: "your-projectId",
  storageBucket: "your-projectId.firebasestorage.app",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

যদি আপনি firebaseConfig স্নিপেটটি মিস করে থাকেন (অথবা চেকপয়েন্টে এটির প্রয়োজন হয়)...

আপনি Firebase কনসোল থেকে আপনার Firebase প্রকল্প কনফিগারেশন অবজেক্টটি পেতে পারেন।

Firebase কনসোলে, উপরের-বাম কোণে সেটিংস আইকনে ক্লিক করুন, তারপর Project settings নির্বাচন করুন।
সাধারণ ট্যাবে, আপনার অ্যাপস কার্ডে স্ক্রোল করুন।
আপনার ওয়েব অ্যাপে ক্লিক করুন, তারপর Firebase SDK স্নিপেটের জন্য Config বিকল্পটি নির্বাচন করুন।
সম্পূর্ণ কনফিগারেশন স্নিপেটটি আপনার ক্লিপবোর্ডে কপি করুন।

এই ধাপের স্ক্রিনশট

৬. ব্যবহারকারী সাইন-ইন (RSVP) যোগ করুন

এখন যেহেতু আপনি অ্যাপটিতে Firebase যোগ করেছেন, আপনি একটি RSVP বোতাম সেট আপ করতে পারেন যা Firebase Authentication ব্যবহার করে লোকেদের নিবন্ধন করে।

আপনার একটি RSVP বোতামের প্রয়োজন হবে যা ব্যবহারকারীকে তাদের ইমেল ঠিকানা দিয়ে সাইন ইন করতে অনুরোধ করবে। আপনি FirebaseUI কে একটি RSVP বোতামের সাথে সংযুক্ত করে এটি করতে পারেন। FirebaseUI হল একটি লাইব্রেরি যা আপনাকে Firebase Auth এর উপরে একটি পূর্ব-নির্মিত UI দেয়।

FirebaseUI এর জন্য একটি কনফিগারেশন প্রয়োজন ( ডকুমেন্টেশনের বিকল্পগুলি দেখুন) যা দুটি কাজ করে:

FirebaseUI কে বলে যে আপনি ইমেল/পাসওয়ার্ড সাইন-ইন পদ্ধতি ব্যবহার করতে চান।
সফল সাইন-ইনের জন্য কলব্যাক পরিচালনা করে এবং পুনঃনির্দেশ এড়াতে মিথ্যা ফেরত দেয়। আপনি একটি একক-পৃষ্ঠার ওয়েব অ্যাপ তৈরি করছেন বলে আপনি পৃষ্ঠাটি রিফ্রেশ করতে চান না।

FirebaseUI Auth আরম্ভ করতে কোডটি যোগ করুন।

StackBlitz-এ, index.js ফাইলে যান।

উপরে, firebase/auth import স্টেটমেন্টটি খুঁজুন, তারপর getAuth এবং EmailAuthProvider যোগ করুন, যেমন:

// ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';

initializeApp ঠিক পরেই auth অবজেক্টের একটি রেফারেন্স সংরক্ষণ করুন, যেমন:
```
initializeApp(firebaseConfig);
auth = getAuth();
```
লক্ষ্য করুন যে FirebaseUI কনফিগারেশনটি ইতিমধ্যেই শুরুর কোডে দেওয়া আছে। এটি ইতিমধ্যেই ইমেল প্রমাণীকরণ প্রদানকারী ব্যবহার করার জন্য সেটআপ করা আছে।

index.js এ main() ফাংশনের নীচে, FirebaseUI initialization স্টেটমেন্ট যোগ করুন, যেমন:

async function main() {
  // ...

  // Initialize the FirebaseUI widget using Firebase
  const ui = new firebaseui.auth.AuthUI(auth);
}
main();

HTML-এ একটি RSVP বোতাম যোগ করুন

StackBlitz-এ, index.html ফাইলে যান।
নিচের উদাহরণে দেখানো event-details-container ভিতরে একটি RSVP বোতামের জন্য HTML যোগ করুন।

নীচে দেখানো একই id মান ব্যবহার করার ব্যাপারে সতর্ক থাকুন কারণ, এই কোডল্যাবের জন্য, index.js ফাইলে ইতিমধ্যেই এই নির্দিষ্ট আইডিগুলির জন্য হুক রয়েছে।

মনে রাখবেন যে index.html ফাইলে, firebaseui-auth-container আইডি সহ একটি কন্টেইনার রয়েছে। এই আইডিটি আপনি FirebaseUI-তে আপনার লগইন ধরে রাখার জন্য পাঠাবেন।
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
অ্যাপ প্রিভিউ
RSVP বোতামে একটি শ্রোতা সেট আপ করুন এবং FirebaseUI স্টার্ট ফাংশনে কল করুন। এটি FirebaseUI কে বলে যে আপনি সাইন-ইন উইন্ডোটি দেখতে চান।

index.js এ main() ফাংশনের নীচে নিম্নলিখিত কোডটি যোগ করুন:
```
async function main() {
  // ...

  // Listen to RSVP button clicks
  startRsvpButton.addEventListener("click",
   () => {
        ui.start("#firebaseui-auth-container", uiConfig);
  });
}
main();
```

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

StackBlitz এর প্রিভিউ উইন্ডোতে, অ্যাপে সাইন ইন করতে RSVP বোতামে ক্লিক করুন।
- এই কোডল্যাবের জন্য, আপনি যেকোনো ইমেল ঠিকানা ব্যবহার করতে পারেন, এমনকি একটি জাল ইমেল ঠিকানাও, কারণ আপনি এই কোডল্যাবের জন্য একটি ইমেল যাচাইকরণ ধাপ সেট আপ করছেন না।
- যদি আপনি একটি ত্রুটি বার্তা দেখতে পান যেখানে লেখা আছে auth/operation-not-allowed অথবা The given sign-in provider is disabled for this Firebase project , তাহলে নিশ্চিত করুন যে আপনি Firebase কনসোলে সাইন-ইন প্রদানকারী হিসেবে ইমেল/পাসওয়ার্ড সক্ষম করেছেন।
অ্যাপ প্রিভিউ
Firebase কনসোলে Authentication ড্যাশবোর্ডে যান। Users ট্যাবে, আপনি অ্যাপে সাইন ইন করার জন্য যে অ্যাকাউন্ট তথ্য প্রবেশ করিয়েছেন তা দেখতে পাবেন।

UI তে প্রমাণীকরণের অবস্থা যোগ করুন

এরপর, নিশ্চিত করুন যে UI আপনার সাইন ইন থাকা সত্যটি প্রতিফলিত করে।

আপনি Firebase Authentication state listener callback ব্যবহার করবেন, যা ব্যবহারকারীর সাইন-ইন স্ট্যাটাস পরিবর্তন হলেই বিজ্ঞপ্তি পাবে। যদি বর্তমানে কোনও সাইন-ইন করা ব্যবহারকারী থাকে, তাহলে আপনার অ্যাপ "RSVP" বোতামটিকে "লগআউট" বোতামে স্যুইচ করবে।

StackBlitz-এ, index.js ফাইলে যান।

উপরে, firebase/auth import স্টেটমেন্টটি খুঁজুন, তারপর signOut এবং onAuthStateChanged যোগ করুন, যেমন:

// ...
// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {} from 'firebase/firestore';

main() ফাংশনের নীচে নিম্নলিখিত কোডটি যোগ করুন:

async function main() {
  // ...

  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
    } else {
      startRsvpButton.textContent = 'RSVP';
    }
  });
}
main();

বাটন লিসেনারের মধ্যে, বর্তমান ব্যবহারকারী আছে কিনা তা পরীক্ষা করে লগ আউট করুন। এটি করার জন্য, বর্তমান startRsvpButton.addEventListener নিম্নলিখিতটি দিয়ে প্রতিস্থাপন করুন:
```
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener('click', () => {
  if (auth.currentUser) {
    // User is signed in; allows user to sign out
    signOut(auth);
  } else {
    // No user is signed in; allows user to sign in
    ui.start('#firebaseui-auth-container', uiConfig);
  }
});
```

এখন, আপনার অ্যাপের বোতামটি LOGOUT দেখাবে এবং ক্লিক করার পরে এটি RSVP তে ফিরে যাবে।

অ্যাপ প্রিভিউ

এই ধাপের স্ক্রিনশট

আপনি কি আটকে গেছেন অথবা মনে হচ্ছে আপনি হয়তো ট্র্যাক থেকে সরে যাচ্ছেন? কোডল্যাবের এই বিন্দু পর্যন্ত যোগ করা সমস্ত কোড সহ এখানে একটি স্ট্যাকব্লিটজ লিঙ্ক রয়েছে: https://stackblitz.com/edit/firebase-gtk-web-checkpoint1

এই চেকপয়েন্টে দুটি কাজ নিশ্চিত করুন:

প্রকল্পটি এমনভাবে তৈরি করুন যাতে এটি আপনার নিজস্ব হয়।
Firebase কনসোল থেকে আপনার Firebase প্রকল্প কনফিগারেশন অবজেক্ট যোগ করুন।

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

ব্যবহারকারীরা আসছেন জেনে ভালো লাগছে, কিন্তু অ্যাপটিতে অতিথিদের অন্য কিছু করার সুযোগ দেওয়া যাক। যদি তারা একটি গেস্টবুকে বার্তা রেখে যেতে পারে? তারা কেন আসতে আগ্রহী বা কার সাথে দেখা করতে চান তা তারা শেয়ার করতে পারে।

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

ডেটা মডেল

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

ফায়ারস্টোর ডেটা মডেলের গ্রাফিকে একাধিক বার্তা নথি সহ একটি গেস্টবুক সংগ্রহ দেখানো হচ্ছে

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

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

এই বিভাগে, আপনি ব্যবহারকারীদের ডাটাবেসে নতুন বার্তা লেখার কার্যকারিতা যোগ করবেন। প্রথমে, আপনি UI উপাদানগুলির জন্য HTML যোগ করবেন (বার্তা ক্ষেত্র এবং প্রেরণ বোতাম)। তারপর, আপনি কোডটি যোগ করবেন যা এই উপাদানগুলিকে ডাটাবেসের সাথে সংযুক্ত করে।

একটি বার্তা ক্ষেত্রের UI উপাদান এবং একটি প্রেরণ বোতাম যোগ করতে:

StackBlitz-এ, index.html ফাইলে যান।

guestbook-container খুঁজুন, তারপর বার্তা ইনপুট ক্ষেত্র এবং প্রেরণ বোতাম ব্যবহার করে একটি ফর্ম তৈরি করতে নিম্নলিখিত HTML যোগ করুন।

<!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

অ্যাপ প্রিভিউ

এই ধাপের স্ক্রিনশট

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

StackBlitz-এ, index.js ফাইলে যান।

উপরে, firebase/firestore import স্টেটমেন্টটি খুঁজুন, তারপর getFirestore , addDoc , এবং collection যোগ করুন, যেমন:

// ...

// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {
  getFirestore,
  addDoc,
  collection
} from 'firebase/firestore';

এখন আমরা initializeApp ঠিক পরে Firestore db অবজেক্টের একটি রেফারেন্স সংরক্ষণ করব:
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

main() ফাংশনের নীচে, নিম্নলিখিত কোডটি যোগ করুন।

মনে রাখবেন যে auth.currentUser.uid হল স্বয়ংক্রিয়ভাবে তৈরি হওয়া অনন্য আইডির একটি রেফারেন্স যা Firebase Authentication সমস্ত লগ-ইন করা ব্যবহারকারীদের জন্য দেয়।

async function main() {
  // ...

  // Listen to the form submission
  form.addEventListener('submit', async e => {
    // Prevent the default form redirect
    e.preventDefault();
    // Write a new message to the database collection "guestbook"
    addDoc(collection(db, 'guestbook'), {
      text: input.value,
      timestamp: Date.now(),
      name: auth.currentUser.displayName,
      userId: auth.currentUser.uid
    });
    // clear message input field
    input.value = '';
    // Return false to avoid redirect
    return false;
  });
}
main();

শুধুমাত্র সাইন-ইন করা ব্যবহারকারীদের অতিথি বইটি দেখান

আপনি চান না যে কেউ অতিথিদের চ্যাট দেখুক। চ্যাট সুরক্ষিত করার জন্য আপনি যা করতে পারেন তা হল শুধুমাত্র সাইন-ইন করা ব্যবহারকারীদের গেস্টবুক দেখার অনুমতি দেওয়া। যাইহোক, আপনার নিজস্ব অ্যাপের জন্য, আপনি Firebase Security Rules ব্যবহার করে আপনার ডাটাবেসও সুরক্ষিত করতে চাইবেন। (কোডল্যাবে পরে নিরাপত্তা নিয়ম সম্পর্কে আরও তথ্য রয়েছে।)

StackBlitz-এ, index.js ফাইলে যান।

গেস্টবুক লুকানোর এবং দেখানোর জন্য onAuthStateChanged লিসেনার সম্পাদনা করুন।

// ...

// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
  }
});

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

নিশ্চিত করুন যে আপনি অ্যাপটিতে সাইন ইন করেছেন।
"হ্যালো!" এর মতো একটি বার্তা লিখুন, তারপর SEND এ ক্লিক করুন।

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

কিন্তু আপনি Firebase কনসোলে নতুন যোগ করা বার্তাটি দেখতে পাবেন।

Firebase কনসোলে, Firestore Database ড্যাশবোর্ডে , আপনি আপনার নতুন যোগ করা বার্তা সহ guestbook সংগ্রহটি দেখতে পাবেন। যদি আপনি বার্তা পাঠাতে থাকেন, তাহলে আপনার গেস্টবুক সংগ্রহে অনেক নথি থাকবে, যেমন:

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

এই ধাপের স্ক্রিনশট

এই চেকপয়েন্টে দুটি কাজ নিশ্চিত করুন:

প্রকল্পটি এমনভাবে তৈরি করুন যাতে এটি আপনার নিজস্ব হয়।
Firebase কনসোল থেকে আপনার Firebase প্রকল্প কনফিগারেশন অবজেক্ট যোগ করুন।

৮. বার্তা পড়ুন

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

এটা খুবই ভালো যে অতিথিরা ডাটাবেসে বার্তা লিখতে পারেন, কিন্তু তারা এখনও অ্যাপে সেগুলি দেখতে পাচ্ছেন না।

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

আপনি এমন কোড যোগ করবেন যা অ্যাপ থেকে নতুন যোগ করা বার্তাগুলি শোনে। প্রথমে, বার্তাগুলি দেখানোর জন্য HTML-এ একটি বিভাগ যোগ করুন:

StackBlitz-এ, index.html ফাইলে যান।

guestbook-container , guestbook আইডি সহ একটি নতুন বিভাগ যুক্ত করুন।

<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

এরপর, যে শ্রোতা ডেটাতে করা পরিবর্তনগুলি শোনেন তাকে নিবন্ধন করুন:

StackBlitz-এ, index.js ফাইলে যান।
উপরে, firebase/firestore import স্টেটমেন্টটি খুঁজুন, তারপর query , orderBy , এবং onSnapshot যোগ করুন, যেমন:
```
// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
```

main() ফাংশনের নীচে, ডাটাবেসের সমস্ত ডকুমেন্ট (গেস্টবুক বার্তা) লুপ করার জন্য নিম্নলিখিত কোডটি যোগ করুন। এই কোডে কী ঘটছে সে সম্পর্কে আরও জানতে, স্নিপেটের নীচের তথ্যটি পড়ুন।

async function main() {
  // ...

  // Create query for messages
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}
main();

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

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

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

ক্লাউড ফায়ারস্টোর স্বয়ংক্রিয়ভাবে এবং তাৎক্ষণিকভাবে ডাটাবেসে সাবস্ক্রাইব করা ক্লায়েন্টদের সাথে ডেটা সিঙ্ক্রোনাইজ করে।

ডাটাবেসে আগে তৈরি করা বার্তাগুলি অ্যাপে প্রদর্শিত হওয়া উচিত। নতুন বার্তা লিখতে দ্বিধা করবেন না; সেগুলি তাৎক্ষণিকভাবে উপস্থিত হওয়া উচিত।
আপনি যদি একাধিক উইন্ডো বা ট্যাবে আপনার কর্মক্ষেত্র খোলেন, তাহলে বার্তাগুলি রিয়েল টাইমে ট্যাব জুড়ে সিঙ্ক হবে।
(ঐচ্ছিক) আপনি Firebase কনসোলের ডাটাবেস বিভাগে সরাসরি ম্যানুয়ালি মুছে ফেলা, পরিবর্তন করা বা নতুন বার্তা যোগ করার চেষ্টা করতে পারেন; যেকোনো পরিবর্তন UI-তে প্রদর্শিত হবে।

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

অ্যাপ প্রিভিউ

এই ধাপের স্ক্রিনশট

এই চেকপয়েন্টে দুটি কাজ নিশ্চিত করুন:

প্রকল্পটি এমনভাবে তৈরি করুন যাতে এটি আপনার নিজস্ব হয়।
Firebase কনসোল থেকে আপনার Firebase প্রকল্প কনফিগারেশন অবজেক্ট যোগ করুন।

৯. মৌলিক নিরাপত্তা নিয়ম সেট আপ করুন

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

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

আপনি Firebase কনসোলে Cloud Firestore-এর জন্য নিরাপত্তা নিয়ম লিখতে পারেন:

Firebase কনসোলের Build বিভাগে, Firestore Database এ ক্লিক করুন, তারপর Rules ট্যাবটি নির্বাচন করুন (অথবা সরাসরি Rules ট্যাবে যেতে এখানে ক্লিক করুন )।
আজ থেকে কয়েক সপ্তাহের মধ্যে জনসাধারণের অ্যাক্সেসের সময়সীমা সহ নিম্নলিখিত ডিফল্ট সুরক্ষা নিয়মগুলি আপনার দেখা উচিত।

এই ধাপের স্ক্রিনশট

সংগ্রহগুলি সনাক্ত করুন

প্রথমে, অ্যাপটি কোন সংগ্রহগুলিতে ডেটা লেখে তা চিহ্নিত করুন।

বিদ্যমান match /{document=**} ধারাটি মুছে ফেলুন, যাতে আপনার নিয়মগুলি এইরকম দেখায়:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}
```
match /databases/{database}/documents তে, আপনি যে সংগ্রহটি সুরক্ষিত করতে চান তা চিহ্নিত করুন:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}
```

নিরাপত্তা নিয়ম যোগ করুন

যেহেতু আপনি প্রতিটি গেস্টবুক ডকুমেন্টে প্রমাণীকরণ UID ক্ষেত্র হিসেবে ব্যবহার করেছেন, তাই আপনি প্রমাণীকরণ UID পেতে পারেন এবং যাচাই করতে পারেন যে যে কেউ ডকুমেন্টে লেখার চেষ্টা করছেন তার সাথে মিলে যাওয়া প্রমাণীকরণ UID আছে।

নিচে দেখানো নিয়ম অনুসারে আপনার নিয়ম সেটে পঠন এবং লেখার নিয়ম যোগ করুন:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

আপনার নতুন নিয়ম প্রয়োগ করতে প্রকাশ করুন- এ ক্লিক করুন। এখন, গেস্টবুকের জন্য, শুধুমাত্র সাইন-ইন করা ব্যবহারকারীরা বার্তা (যেকোনো বার্তা!) পড়তে পারবেন, তবে আপনি কেবল আপনার ব্যবহারকারী আইডি ব্যবহার করে একটি বার্তা তৈরি করতে পারবেন। আমরা বার্তা সম্পাদনা বা মুছে ফেলার অনুমতিও দিই না।

যাচাইকরণের নিয়ম যোগ করুন

ডকুমেন্টে সমস্ত প্রত্যাশিত ক্ষেত্র উপস্থিত রয়েছে তা নিশ্চিত করতে ডেটা যাচাইকরণ যোগ করুন:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

আপনার নতুন নিয়ম প্রয়োগ করতে প্রকাশ করুন- এ ক্লিক করুন।

শ্রোতাদের রিসেট করুন

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

StackBlitz-এ, index.js ফাইলে যান।

গেস্টবুক সংগ্রহ onSnapshot listener কে subscribeGuestbook নামক একটি নতুন ফাংশনে টেনে আনুন। এছাড়াও, onSnapshot ফাংশনের ফলাফল guestbookListener ভেরিয়েবলে বরাদ্দ করুন।

ফায়ারস্টোর onSnapshot লিসেনার একটি আনসাবস্ক্রাইব ফাংশন প্রদান করে যা আপনি পরে স্ন্যাপশট লিসেনার বাতিল করতে ব্যবহার করতে পারবেন।

// ...
// Listen to guestbook updates
function subscribeGuestbook() {
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  guestbookListener = onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}

unsubscribeGuestbook নামে একটি নতুন ফাংশন যোগ করুন। guestbookListener ভেরিয়েবলটি null কিনা তা পরীক্ষা করুন, তারপর লিসেনার বাতিল করতে ফাংশনটি কল করুন।
```
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}
```

অবশেষে, onAuthStateChanged কলব্যাকে নতুন ফাংশনগুলি যোগ করুন।

if (user) এর নীচে subscribeGuestbook() যোগ করুন।

else স্টেটমেন্টের নীচে unsubscribeGuestbook() যোগ করুন।

// ...
// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
    // Subscribe to the guestbook collection
    subscribeGuestbook();
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
    // Unsubscribe from the guestbook collection
    unsubscribeGuestbook();
  }
});

এই চেকপয়েন্টে দুটি কাজ নিশ্চিত করুন:

প্রকল্পটি এমনভাবে তৈরি করুন যাতে এটি আপনার নিজস্ব হয়।
Firebase কনসোল থেকে আপনার Firebase প্রকল্প কনফিগারেশন অবজেক্ট যোগ করুন।

১০. বোনাস ধাপ: আপনি যা শিখেছেন তা অনুশীলন করুন

একজন অংশগ্রহণকারীর RSVP স্ট্যাটাস রেকর্ড করুন

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

যারা অনুষ্ঠানে যোগ দিতে চান তাদের নিবন্ধন করার জন্য আপনি একটি টগল যোগ করবেন, তারপর কতজন আসছেন তার একটি গণনা সংগ্রহ করবেন।

StackBlitz-এ, index.html ফাইলে যান।

guestbook-container এ, হ্যাঁ এবং না বোতামের একটি সেট যোগ করুন, যেমন:

<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

 </section>
<!-- ... -->

অ্যাপ প্রিভিউ

এই ধাপের স্ক্রিনশট

এরপর, বাটন ক্লিকের জন্য শ্রোতাকে নিবন্ধন করুন। যদি ব্যবহারকারী YES ক্লিক করেন, তাহলে ডাটাবেসে প্রতিক্রিয়া সংরক্ষণ করতে তাদের প্রমাণীকরণ UID ব্যবহার করুন।

StackBlitz-এ, index.js ফাইলে যান।

উপরে, firebase/firestore import স্টেটমেন্টটি খুঁজুন, তারপর doc , setDoc , এবং where যোগ করুন, যেমন:

// ...
// Add the Firebase products and methods that you want to use
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot,
  doc,
  setDoc,
  where
} from 'firebase/firestore';

main() ফাংশনের নীচে, RSVP স্ট্যাটাস শুনতে নিম্নলিখিত কোডটি যোগ করুন:
```
async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();
```

এরপর, attendees নামে একটি নতুন সংগ্রহ তৈরি করুন, তারপর RSVP বোতামে ক্লিক করলে একটি ডকুমেন্ট রেফারেন্স নিবন্ধন করুন। কোন বোতামে ক্লিক করা হয়েছে তার উপর নির্ভর করে সেই রেফারেন্সটিকে true বা false সেট করুন।

প্রথমে, rsvpYes এর জন্য:

// ...
// Listen to RSVP responses
rsvpYes.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attendi()ng: true
  try {
    await setDoc(userRef, {
      attending: true
    });
  } catch (e) {
    console.error(e);
  }
};

তারপর, rsvpNo এর ক্ষেত্রেও একই কথা, কিন্তু false মান সহ:

rsvpNo.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attending: true
  try {
    await setDoc(userRef, {
      attending: false
    });
  } catch (e) {
    console.error(e);
  }
};

আপনার নিরাপত্তা নিয়ম আপডেট করুন

যেহেতু আপনার ইতিমধ্যেই কিছু নিয়ম সেট আপ করা আছে, তাই বোতামগুলির সাথে আপনি যে নতুন ডেটা যোগ করছেন তা প্রত্যাখ্যান করা হবে।

`attendees` সংগ্রহে সংযোজনের অনুমতি দিন

attendees সংগ্রহে যোগ করার অনুমতি দেওয়ার জন্য আপনাকে নিয়মগুলি আপডেট করতে হবে।

attendees সংগ্রহের জন্য, যেহেতু আপনি ডকুমেন্টের নাম হিসেবে প্রমাণীকরণ UID ব্যবহার করেছেন, আপনি এটি ধরে যাচাই করতে পারেন যে জমাদাতার uid এবং তারা যে ডকুমেন্টটি লিখছেন তা একই। আপনি সকলকে অংশগ্রহণকারীদের তালিকা পড়ার অনুমতি দেবেন (যেহেতু সেখানে কোনও ব্যক্তিগত তথ্য নেই), তবে শুধুমাত্র নির্মাতাই এটি আপডেট করতে সক্ষম হবেন।
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
আপনার নতুন নিয়ম প্রয়োগ করতে প্রকাশ করুন- এ ক্লিক করুন।

যাচাইকরণের নিয়ম যোগ করুন

ডকুমেন্টে সমস্ত প্রত্যাশিত ক্ষেত্র উপস্থিত রয়েছে তা নিশ্চিত করতে কিছু ডেটা যাচাইকরণ নিয়ম যোগ করুন:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

আপনার নিয়মগুলি প্রয়োগ করতে প্রকাশ করুন ক্লিক করতে ভুলবেন না!

(ঐচ্ছিক) এখন আপনি বোতামগুলিতে ক্লিক করার ফলাফল দেখতে পারবেন। Firebase কনসোলে আপনার ক্লাউড ফায়ারস্টোর ড্যাশবোর্ডে যান।

RSVP স্ট্যাটাস পড়ুন

এখন যেহেতু আপনি উত্তরগুলি রেকর্ড করেছেন, দেখা যাক কে আসছে এবং UI তে এটি প্রতিফলিত করে।

StackBlitz-এ, index.html ফাইলে যান।

description-container এ, number-attending এর ID সহ একটি নতুন উপাদান যোগ করুন।

<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

এরপর, attendees সংগ্রহের জন্য শ্রোতা নিবন্ধন করুন এবং হ্যাঁ উত্তরের সংখ্যা গণনা করুন:

StackBlitz-এ, index.js ফাইলে যান।

main() ফাংশনের নীচে, RSVP স্ট্যাটাস শুনতে এবং YES ক্লিক গণনা করতে নিম্নলিখিত কোডটি যোগ করুন।

async function main() {
  // ...

  // Listen for attendee list
  const attendingQuery = query(
    collection(db, 'attendees'),
    where('attending', '==', true)
  );
  const unsubscribe = onSnapshot(attendingQuery, snap => {
    const newAttendeeCount = snap.docs.length;
    numberAttending.innerHTML = newAttendeeCount + ' people going';
  });
}
main();

অবশেষে, বর্তমান অবস্থার সাথে সম্পর্কিত বোতামটি হাইলাইট করা যাক।

একটি ফাংশন তৈরি করুন যা বর্তমান প্রমাণীকরণ UID-তে attendees সংগ্রহে একটি এন্ট্রি আছে কিনা তা পরীক্ষা করে, তারপর বোতাম ক্লাসটিকে clicked এ সেট করুন।

// ...
// Listen for attendee list
function subscribeCurrentRSVP(user) {
  const ref = doc(db, 'attendees', user.uid);
  rsvpListener = onSnapshot(ref, doc => {
    if (doc && doc.data()) {
      const attendingResponse = doc.data().attending;

      // Update css classes for buttons
      if (attendingResponse) {
        rsvpYes.className = 'clicked';
        rsvpNo.className = '';
      } else {
        rsvpYes.className = '';
        rsvpNo.className = 'clicked';
      }
    }
  });
}

আর, আনসাবস্ক্রাইব করার জন্য একটি ফাংশন তৈরি করা যাক। ব্যবহারকারী লগ আউট করলে এটি ব্যবহার করা হবে।
```
// ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}
```

প্রমাণীকরণ শ্রোতা থেকে ফাংশনগুলি কল করুন।

// ...
// Listen to the current Auth state
  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
      // Show guestbook to logged-in users
      guestbookContainer.style.display = 'block';

      // Subscribe to the guestbook collection
      subscribeGuestbook();
      // Subscribe to the user's RSVP
      subscribeCurrentRSVP(user);
    } else {
      startRsvpButton.textContent = 'RSVP';
      // Hide guestbook for non-logged-in users
      guestbookContainer.style.display = 'none'
      ;
      // Unsubscribe from the guestbook collection
      unsubscribeGuestbook();
      // Unsubscribe from the guestbook collection
      unsubscribeCurrentRSVP();
    }
  });

একাধিক ব্যবহারকারী হিসেবে লগ ইন করার চেষ্টা করুন এবং প্রতিটি অতিরিক্ত YES বোতাম ক্লিকের সাথে সাথে সংখ্যা বৃদ্ধি দেখুন।

অ্যাপ প্রিভিউ

এই ধাপের স্ক্রিনশট

এই চেকপয়েন্টে দুটি কাজ নিশ্চিত করুন:

প্রকল্পটি এমনভাবে তৈরি করুন যাতে এটি আপনার নিজস্ব হয়।
Firebase কনসোল থেকে আপনার Firebase প্রকল্প কনফিগারেশন অবজেক্ট যোগ করুন।

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

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

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

ফায়ারবেস প্রমাণীকরণ
ফায়ারবেসইউআই
ক্লাউড ফায়ারস্টোর
ফায়ারবেস নিরাপত্তা নিয়ম

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

Firebase ডেভেলপার ওয়ার্কফ্লো সম্পর্কে আরও জানতে চান? আপনার অ্যাপটি সম্পূর্ণরূপে স্থানীয়ভাবে পরীক্ষা এবং চালানোর পদ্ধতি সম্পর্কে জানতে Firebase এমুলেটর কোডল্যাবটি দেখুন।
অন্যান্য Firebase পণ্য সম্পর্কে আরও জানতে চান? হয়তো আপনি ব্যবহারকারীদের আপলোড করা ছবির ফাইল সংরক্ষণ করতে চান? নাকি আপনার ব্যবহারকারীদের কাছে বিজ্ঞপ্তি পাঠাতে চান? Firebase ওয়েব কোডল্যাব দেখুন যেখানে আরও অনেক Firebase পণ্য সম্পর্কে আরও বিস্তারিত তথ্য পাওয়া যাবে।
ক্লাউড ফায়ারস্টোর সম্পর্কে আরও জানতে চান? হয়তো আপনি সাব-কালেকশন এবং লেনদেন সম্পর্কে জানতে চান? ক্লাউড ফায়ারস্টোরের আরও বিস্তারিত তথ্য জানতে ক্লাউড ফায়ারস্টোর ওয়েব কোডল্যাবে যান। অথবা ক্লাউড ফায়ারস্টোর সম্পর্কে জানতে এই ইউটিউব সিরিজটি দেখুন!

আরও জানুন

ফায়ারবেস সাইট: firebase.google.com
ফায়ারবেস ইউটিউব চ্যানেল

কেমন গেল?

আপনার মতামত পেলে আমরা খুশি হব! অনুগ্রহ করে এখানে একটি (খুব) ছোট ফর্ম পূরণ করুন।

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

তুমি কি শিখবে

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

2. শুরুর কোডটি পান

৩. ইভেন্টের তথ্য সম্পাদনা করুন

অ্যাপ প্রিভিউ

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

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

কনসোলে Firebase পণ্যগুলি সক্ষম এবং সেট আপ করুন

Firebase প্রমাণীকরণের জন্য ইমেল সাইন-ইন সক্ষম করুন

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

৫. ফায়ারবেস যোগ এবং কনফিগার করুন

ফায়ারবেস লাইব্রেরি যোগ করুন

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

৬. ব্যবহারকারী সাইন-ইন (RSVP) যোগ করুন

ইমেল সাইন-ইন এবং FirebaseUI ব্যবহার করে আপনার ব্যবহারকারীদের প্রমাণীকরণ করুন

FirebaseUI Auth আরম্ভ করতে কোডটি যোগ করুন।

HTML-এ একটি RSVP বোতাম যোগ করুন

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

UI তে প্রমাণীকরণের অবস্থা যোগ করুন

অ্যাপ প্রিভিউ

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

ডেটা মডেল

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

অ্যাপ প্রিভিউ

শুধুমাত্র সাইন-ইন করা ব্যবহারকারীদের অতিথি বইটি দেখান

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

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

৮. বার্তা পড়ুন

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

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

অ্যাপ প্রিভিউ

৯. মৌলিক নিরাপত্তা নিয়ম সেট আপ করুন

সংগ্রহগুলি সনাক্ত করুন

নিরাপত্তা নিয়ম যোগ করুন

যাচাইকরণের নিয়ম যোগ করুন

শ্রোতাদের রিসেট করুন

১০. বোনাস ধাপ: আপনি যা শিখেছেন তা অনুশীলন করুন

একজন অংশগ্রহণকারীর RSVP স্ট্যাটাস রেকর্ড করুন

অ্যাপ প্রিভিউ

আপনার নিরাপত্তা নিয়ম আপডেট করুন

attendees সংগ্রহে সংযোজনের অনুমতি দিন

যাচাইকরণের নিয়ম যোগ করুন

RSVP স্ট্যাটাস পড়ুন

অ্যাপ প্রিভিউ

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

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

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

আরও জানুন

কেমন গেল?

`attendees` সংগ্রহে সংযোজনের অনুমতি দিন