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

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

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

59abdefbcc23bbbe.png

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- ... -->

আপনার অ্যাপের পূর্বরূপ দেখতে এইরকম কিছু হওয়া উচিত:

অ্যাপের পূর্বরূপ

908cc57ce3a5b5fe.png

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

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

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

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

Firebase প্রকল্পগুলি সম্পর্কে আরও জানতে, 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. সম্পন্ন ক্লিক করুন।

5. Firebase যোগ করুন এবং কনফিগার করুন

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

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

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

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

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

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

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

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

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

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

FirebaseUI প্রমাণ শুরু করতে কোড যোগ করুন

  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. লক্ষ্য করুন যে ফায়ারবেসইউআই কনফিগারেশনটি ইতিমধ্যেই প্রারম্ভিক কোডে সরবরাহ করা হয়েছে। ইমেল প্রমাণীকরণ প্রদানকারী ব্যবহার করার জন্য এটি ইতিমধ্যেই সেট আপ করা হয়েছে৷
  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 আপনি সাইন ইন করেছেন তা প্রতিফলিত করে৷

আপনি ফায়ারবেস প্রমাণীকরণ স্টেট লিসেনার কলব্যাক ব্যবহার করবেন, যা ব্যবহারকারীর সাইন-ইন স্থিতি পরিবর্তিত হলেই বিজ্ঞপ্তি দেওয়া হয়। যদি বর্তমানে একজন সাইন-ইন করা ব্যবহারকারী থাকে, তাহলে আপনার অ্যাপটি "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

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

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

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

তথ্য মডেল

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

b447950f9f993789.png

Firestore এ বার্তা যোগ করুন

এই বিভাগে, আপনি ডাটাবেসে নতুন বার্তা লিখতে ব্যবহারকারীদের জন্য কার্যকারিতা যোগ করবেন। প্রথমে, আপনি 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

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

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

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

বার্তাগুলি প্রদর্শন করতে, আপনাকে এমন শ্রোতাদের যোগ করতে হবে যা ডেটা পরিবর্তন হলে ট্রিগার করে, তারপরে একটি 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

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

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

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

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

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

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

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

  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();
      }
    });
    

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

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

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

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

  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;

    }
  }
}

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

আরএসভিপি স্ট্যাটাস পড়ুন

এখন যেহেতু আপনি প্রতিক্রিয়াগুলি রেকর্ড করেছেন, আসুন দেখি কে আসছে এবং এটি 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

11. অভিনন্দন!

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

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

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

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

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

আরও জানুন

কেমন যাচ্ছে?

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