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

এই codelab, আপনি বেসিক কিছু শিখবেন Firebase ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরি করুন। আপনি একটি ফায়ারবেস পণ্য ব্যবহার করে একটি ইভেন্ট RSVP এবং অতিথি বই চ্যাট অ্যাপ তৈরি করবেন।

59abdefbcc23bbbe.png

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

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

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

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

এই codelab, আপনি ব্যবহার করে একটি অ্যাপ তৈরী StackBlitz রয়েছে বিভিন্ন Firebase এটা একত্রিত Workflows একটি অনলাইন এডিটর। Stackblitz এর জন্য কোন সফটওয়্যার ইনস্টলেশন বা বিশেষ StackBlitz অ্যাকাউন্টের প্রয়োজন নেই।

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

  1. প্রারম্ভিক কোড জন্য এই URL যান: https://stackblitz.com/edit/firebase-gtk-web-start
  2. StackBlitz পৃষ্ঠার উপরের, কাঁটাচামচ ক্লিক করুন: f5135360aef481cc.png

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

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

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

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

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

<!-- ... -->

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

<!-- ... -->

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

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

908cc57ce3a5b5fe.png

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

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

  1. সাইন ইন করুন Firebase
  2. Firebase কনসোলে, ক্লিক করুন প্রকল্প যোগ (অথবা একটি প্রকল্প তৈরি করুন), তারপর আপনার Firebase প্রকল্পের Firebase ওয়েব-Codelab নাম দিন।
    a67c239f8cc7f4b5.png
  3. প্রকল্প তৈরির বিকল্পগুলির মাধ্যমে ক্লিক করুন। অনুরোধ করা হলে Firebase শর্তাবলী গ্রহণ করুন। গুগল অ্যানালিটিক্স সেট আপ করা এড়িয়ে যান, কারণ আপনি এই অ্যাপের জন্য অ্যানালিটিক্স ব্যবহার করবেন না।

Firebase প্রকল্পগুলি সম্পর্কে আরও জানতে, Firebase প্রকল্প বুঝুন

কনসোলে ফায়ারবেস পণ্য সক্ষম করুন

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

  • Firebase অনুমোদনFirebase UI 'তে সহজে আপনার ব্যবহারকারীদের আপনার অ্যাপ্লিকেশানে সাইন ইন করতে অনুমতি দেয়।
  • ক্লাউড Firestore মেঘ কাঠামোবদ্ধ ডেটা সংরক্ষণ এবং ডেটা পরিবর্তন ঝটপট বিজ্ঞপ্তি পাবেন।
  • Firebase সিকিউরিটি রুলস আপনার ডাটাবেস সুরক্ষিত করতে।

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

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

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

  1. Firebase কনসোলে, বাম প্যানেলে বিল্ড ক্লিক করুন।
  2. প্রমাণীকরণ, তারপরে সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন (অথবা এখানে ক্লিক করুন সাইন-ইন পদ্ধতি ট্যাবে সরাসরি যেতে)।
  3. প্রদানকারীর সাইন-ইন তালিকায় ইমেইল / পাসওয়ার্ড ক্লিক করুন, অবস্থান উপর স্যুইচটি সক্ষম করুন সেট, তারপর সংরক্ষণ ক্লিক করুন।
    4c88427cfd869bee.png

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

ওয়েব অ্যাপ্লিকেশন ব্যবহার ক্লাউড Firestore চ্যাট বার্তা সংরক্ষণ করুন এবং নতুন চ্যাট বার্তা প্রাপ্ত সদস্যতা।

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

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

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

Firebase লাইব্রেরি যোগ করুন

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

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

এই অ্যাপটি তৈরি করতে, আপনি Firebase প্রমাণীকরণ, FirebaseUI এবং ক্লাউড ফায়ারস্টোর লাইব্রেরি ব্যবহার করেন। এই codelab, নিম্নলিখিত আমদানি বিবৃতি ইতিমধ্যে উপরের অন্তর্ভুক্ত করা হয় 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 ওয়েব অ্যাপ যুক্ত করুন

  1. Firebase কনসোলে ফিরে যান, উপরে প্রজেক্ট সারসংক্ষেপ ক্লিক করে আপনার প্রকল্পের ওভারভিউ পৃষ্ঠায় নেভিগেট ত্যাগ করেন।
  2. আপনার প্রকল্পের ওভারভিউ পৃষ্ঠার কেন্দ্রে, ওয়েব আইকনে ক্লিক করুন b286f3d215e1f578.png একটি নতুন Firebase ওয়েব অ্যাপ তৈরি করতে।
    c167e9526fad2825.png
  3. ডাক নাম ওয়েব অ্যাপ দেয়ার মাধ্যমে অ্যাপ্লিকেশান নিবন্ধন করুন।
  4. এই codelab জন্য বক্স এছাড়াও এই app এর জন্য হোস্টিং Firebase সেট আপ পরবর্তী চেক করবেন না। আপনি আপাতত StackBlitz এর প্রিভিউ ফলক ব্যবহার করবেন।
  5. নিবন্ধন অ্যাপ্লিকেশন ক্লিক করুন।
    c85ac8aa351e2560.png
  6. কপি Firebase কনফিগারেশন বস্তুর আপনার ক্লিপবোর্ডে।
    ed1e598c6132f734.png
  7. কনসোলে অবিরত ক্লিক করুন।

আপনার অ্যাপে Firebase কনফিগারেশন অবজেক্ট যোগ করুন:

  1. StackBlitz পিছনে, এখানে যান index.js ফাইল।
  2. নির্ণয় করুন Add Firebase project configuration object here মন্তব্য লাইন, তারপর মন্তব্য নিচে আপনার কনফিগারেশন স্নিপেট আটকান।
  3. যোগ initializeApp ফাংশন কল আপনার অনন্য Firebase প্রকল্পের কনফিগারেশন ব্যবহার Firebase সেট আপ করার জন্য।
    // ...
    // 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.appspot.com",
      messagingSenderId: "random-unique-string",
      appId: "random-unique-string",
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig);
    

এখন যেহেতু আপনি অ্যাপ্লিকেশানে Firebase জুড়েছেন, আপনি যে ব্যবহার রেজিস্টার লোকের কোনো জবাব বোতাম সেট আপ করতে পারেন Firebase প্রমাণীকরণ

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

আপনার একটি RSVP বোতাম লাগবে যা ব্যবহারকারীকে তার ইমেল ঠিকানা দিয়ে সাইন ইন করতে অনুরোধ করবে। আপনি আপ hooking এটা করতে পারেন FirebaseUI একটি জবাব button.FirebaseUI করার জন্য একটি লাইব্রেরি যা আপনি Firebase প্রমাণীকরণ উপরে একটি প্রি-নির্মিত UI 'তে দেয়।

FirebaseUI একটি কনফিগারেশন (ইন অপশন দেখতে প্রয়োজন ডকুমেন্টেশন ) যে দুটি জিনিস আছে:

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

FirebaseUI Auth আরম্ভ করার জন্য কোড যোগ করুন

  1. StackBlitz ইন, এখানে যান index.js ফাইল।
  2. উপরের দিকে অবস্থান নির্ণয়, firebase/auth আমদানি বিবৃতি তারপর যোগ getAuth এবং EmailAuthProvider : তাই মত
    // ...
    // Add the Firebase products and methods that you want to use
    import { getAuth, EmailAuthProvider } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. প্রমাণীকরণ বস্তুর পরে একটি রেফারেন্স সংরক্ষণ initializeApp : তাই মত
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. লক্ষ্য করুন যে FirebaseUI কনফিগারেশন ইতিমধ্যে প্রারম্ভিক কোডে প্রদান করা হয়েছে। এটি ইমেইল অথ প্রোভাইডার ব্যবহার করার জন্য ইতিমধ্যেই সেটআপ করা আছে।
  5. নীচের অংশে অবস্থিত main() ফাংশন index.js , FirebaseUI আরম্ভের বিবৃতি যোগ করুন যেমন:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

HTML- এ একটি RSVP বাটন যুক্ত করুন

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

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

    নোট যে index.html ফাইল, সেখানে আইডি দিয়ে একটি ধারক এর firebaseui-auth-container । এই আইডি যা আপনি আপনার লগইন ধরে রাখতে FirebaseUI- এ পাঠাবেন।
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    
    অ্যাপ প্রিভিউ
    ab9ad7d61bb7b28c.png
  3. RSVP বোতামে একটি শ্রোতা সেট আপ করুন এবং FirebaseUI স্টার্ট ফাংশন কল করুন। এটি FirebaseUI কে বলে যে আপনি সাইন-ইন উইন্ডো দেখতে চান।

    নীচে নিম্নলিখিত কোড যোগ করুন main() ফাংশন index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

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

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

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

পরবর্তী, নিশ্চিত করুন যে UI আপনি সাইন ইন করেছেন তা প্রতিফলিত করে।

আপনি Firebase প্রমাণীকরণ রাজ্য শ্রোতা কলব্যাক ব্যবহার করবেন, যখনই ব্যবহারকারীর সাইন-ইন স্ট্যাটাস পরিবর্তন হবে তখনই বিজ্ঞপ্তি পাবে। বর্তমানে সাইন-ইন করা ব্যবহারকারী থাকলে, আপনার অ্যাপ "RSVP" বোতামটিকে "লগআউট" বোতামে স্যুইচ করবে।

  1. StackBlitz ইন, এখানে যান index.js ফাইল।
  2. উপরের দিকে অবস্থান নির্ণয়, firebase/auth আমদানি বিবৃতি তারপর যোগ 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';
    
  3. নীচে নিম্নলিখিত কোড যোগ করুন main() ফাংশন:
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. বোতাম শ্রোতার মধ্যে, একটি বর্তমান ব্যবহারকারী আছে কিনা তা পরীক্ষা করুন এবং তাদের লগ আউট করুন। এই কাজের জন্য, বর্তমান প্রতিস্থাপন 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);
      }
    });
    

এখন, আপনার অ্যাপে বোতাম লগ-আউট দেখানো উচিত, এবং যখন এটি ক্লিক করা হলে এটি জবাব ফিরে যান উচিত নয়।

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

4c540450924f1607.png

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

বার্তা ব্যবহারকারীরা অ্যাপ্লিকেশানে লিখতে চ্যাট সংরক্ষণ করতে, আপনাকে ব্যবহার করব ক্লাউড Firestore

তথ্য মডেল

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

b447950f9f993789.png

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

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

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

  1. StackBlitz ইন, এখানে যান index.html ফাইল।
  2. নির্ণয় 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>
    
    <!-- ... -->
    

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

4a892284443cf73d.png

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

  1. StackBlitz ইন, এখানে যান index.js ফাইল।
  2. উপরের দিকে অবস্থান নির্ণয়, firebase/firestore আমদানি বিবৃতি তারপর যোগ 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';
    
  3. এখন আমরা Firestore একটি রেফারেন্স সংরক্ষণ করব db পর বস্তুর ডান initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. নীচের অংশে অবস্থিত main() ফাংশন, নিম্নলিখিত কোড যোগ করুন।

    মনে রাখবেন যে, auth.currentUser.uid স্বয়ংক্রিয়ভাবে তৈরি অনন্য আইডি একটি রেফারেন্স যে Firebase প্রমাণীকরণের জন্য সব লগ-ইন করা ব্যবহারকারীরা দেয়।
    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 সিকিউরিটি রুলস । (কোডল্যাবে পরে নিরাপত্তার নিয়ম সম্পর্কে আরও তথ্য আছে।)

  1. StackBlitz ইন, এখানে যান index.js ফাইল।
  2. সম্পাদনা করুন 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';
      }
    });
    

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

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

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

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

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

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

713870af0b3b63c.png

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

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

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

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

  1. StackBlitz ইন, এখানে যান index.html ফাইল।
  2. ইন guestbook-container , এর আইডি দিয়ে একটি নতুন বিভাগ যোগ guestbook
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

পরবর্তী, শ্রোতা নিবন্ধন করুন যা ডেটাতে করা পরিবর্তনের জন্য শোনে:

  1. StackBlitz ইন, এখানে যান index.js ফাইল।
  2. উপরের দিকে অবস্থান নির্ণয়, firebase/firestore আমদানি বিবৃতি তারপর যোগ query , orderBy এবং onSnapshot : তাই মত
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. নীচের অংশে অবস্থিত 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 ব্যবহারের প্রশ্নের সাথে এবং একটি কলব্যাক ফাংশন: ফাংশন দুটি প্যারামিটার নেয়। ক্যোয়ারীর সাথে মেলে এমন নথিতে কোনো পরিবর্তন হলে কলব্যাক ফাংশনটি চালু হয়। এটি হতে পারে যদি কোনও বার্তা মুছে ফেলা হয়, সংশোধন করা হয় বা যোগ করা হয়। আরো তথ্যের জন্য, দেখুন ক্লাউড Firestore ডকুমেন্টেশন

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

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

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

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

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

e30df0a9614bae7d.png

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

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

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

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

7767a2d2e64e7275.png

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

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

ইন 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.
  }
}

নিরাপত্তা বিধি যোগ করুন

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

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

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 প্রমাণীকরণ শ্রোতা ভিতরে জিজ্ঞাস্য। অন্যথায়, অনুমতি ত্রুটি ঘটবে এবং ব্যবহারকারী লগ আউট করার সময় অ্যাপটি বিচ্ছিন্ন হয়ে যাবে।

  1. ছবি সংগ্রহ টানুন onSnapshot নামের একটি নতুন ফাংশন মধ্যে শ্রোতা subscribeGuestbook । এছাড়াও, ফলাফল নির্ধারণ onSnapshot ফাংশন guestbookListener পরিবর্তনশীল।

    Firestore onSnapshot শ্রোতা ফেরৎ একটি সদস্যতা ত্যাগের ফাংশন যা আপনি পরে স্ন্যাপশট শ্রোতা বাতিল করতে ব্যবহার করতে সক্ষম হবেন।
    // ...
    // Listen to guestbook updates
    // 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);
        });
      });
    }
    
  2. একটি নতুন ফাংশন নীচে নামক যোগ unsubscribeGuestbook । তা পরীক্ষা করুন guestbookListener পরিবর্তনশীল নাল না হয়, তাহলে শ্রোতা বাতিল করতে ফাংশন কল।
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

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

  1. যোগ subscribeGuestbook() নীচের অংশে অবস্থিত if (user)
  2. যোগ unsubscribeGuestbook() নীচের অংশে অবস্থিত else বিবৃতি।
    // ...
    // 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();
      }
    });
    

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

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

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

  1. StackBlitz ইন, এখানে যান index.html ফাইল।
  2. ইন 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>
    <!-- ... -->
    

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

73ca99ca35c13ee7.png

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

  1. StackBlitz ইন, এখানে যান index.js ফাইল।
  2. উপরের দিকে অবস্থান নির্ণয়, firebase/firestore আমদানি বিবৃতি তারপর যোগ 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';
    
  3. নীচের অংশে অবস্থিত main() ফাংশন, জবাব অবস্থা শোনার জন্য নিচের কোডটি যুক্ত করুন:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. নামক একটি নতুন সংগ্রহ তৈরি করুন attendees , তারপর একটি নথি রেফারেন্স রেজিস্টার যদি পারেন জবাব বোতাম এ ক্লিক করেছেন।
  5. যে রেফারেন্স সেট 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 সংগ্রহ, যেহেতু আপনি নথিতে নামের প্রমাণীকরণ ইউআইডি ব্যবহৃত, আপনি এটি দখল এবং যাচাই করুন যে জমাকারীর করতে 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;

    }
  }
}

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

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

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

  1. StackBlitz ইন, এখানে যান index.html ফাইল।
  2. ইন description-container , এর আইডি দিয়ে একটি নতুন উপাদান যোগ number-attending
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

এর পরে, জন্য শ্রোতা রেজিস্টার করো attendees সংগ্রহ ও হ্যাঁ জবাব দিচ্ছে সংখ্যা গণনা:

  1. StackBlitz ইন, এখানে যান index.js ফাইল।
  2. নীচের অংশে অবস্থিত main() ফাংশন, জবাব অবস্থা শুনতে এবং হ্যাঁ ক্লিক গণনা নিম্নলিখিত কোড যোগ করুন।
    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();
    

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

  1. একটি ফাংশন যে চেক বর্তমান প্রমাণীকরণ ইউআইডি একটি এন্ট্রি আছে কিনা তৈরি করুন 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';
          }
        }
      });
    }
    
  2. এছাড়াও, আসুন সদস্যতা ত্যাগ করার জন্য একটি ফাংশন করি। ব্যবহারকারী লগ আউট করলে এটি ব্যবহার করা হবে।
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. প্রমাণীকরণ শ্রোতা থেকে ফাংশন কল করুন।
    // ...
    // 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();
          // Subcribe 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();
        }
      });
    
  4. একাধিক ব্যবহারকারী হিসাবে লগ-ইন ব্যবহার করে দেখুন এবং প্রতিটি অতিরিক্ত হ্যাঁ বাটনে ক্লিক গণনা বৃদ্ধি দেখুন।

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

3df607d3e0b3c35.png

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

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

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

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

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

আরো জানুন

কেমন যাচ্ছে?

আমরা আপনার প্রতিক্রিয়া চাই! একটি (খুব) শর্ট ফর্মটি পূরণ করুন এখানে