इस पेज का अनुवाद Cloud Translation API से किया गया है.

वेब के लिए Firebase के बारे में जानें

1 अवलोकन

इस कोडलैब में, आप इंटरैक्टिव वेब एप्लिकेशन बनाने के लिए फायरबेस की कुछ मूलभूत बातें सीखेंगे। आप कई Firebase उत्पादों का उपयोग करके एक ईवेंट RSVP और गेस्टबुक चैट ऐप बनाएंगे।

इस चरण का स्क्रीनशॉट

आप क्या सीखेंगे

Firebase प्रमाणीकरण और FirebaseUI के साथ उपयोगकर्ताओं को प्रमाणित करें।
क्लाउड फायरस्टोर का उपयोग करके डेटा सिंक करें।
डेटाबेस को सुरक्षित करने के लिए फायरबेस सुरक्षा नियम लिखें।

आपको किस चीज़ की ज़रूरत पड़ेगी

आपकी पसंद का ब्राउज़र, जैसे क्रोम।
Stackblitz.com तक पहुंच (कोई खाता या साइन-इन आवश्यक नहीं)।
एक Google खाता, एक जीमेल खाते की तरह। हम उस ईमेल खाते की अनुशंसा करते हैं जिसका आप पहले से ही अपने GitHub खाते के लिए उपयोग करते हैं। यह आपको StackBlitz में उन्नत सुविधाओं का उपयोग करने की अनुमति देता है।
कोडलैब का नमूना कोड। कोड कैसे प्राप्त करें, इसके लिए अगला चरण देखें।

2. प्रारंभिक कोड प्राप्त करें

इस कोडलैब में, आप एक ऑनलाइन संपादक StackBlitz का उपयोग करके एक ऐप बनाते हैं, जिसमें कई Firebase वर्कफ़्लो एकीकृत होते हैं। Stackblitz को किसी सॉफ़्टवेयर इंस्टॉलेशन या विशेष StackBlitz खाते की आवश्यकता नहीं है।

StackBlitz आपको दूसरों के साथ प्रोजेक्ट साझा करने देता है। अन्य लोग जिनके पास आपका स्टैकब्लिट्ज प्रोजेक्ट यूआरएल है, वे आपका कोड देख सकते हैं और आपकी परियोजना को फोर्क कर सकते हैं, लेकिन वे आपके स्टैकब्लिट्ज प्रोजेक्ट को संपादित नहीं कर सकते हैं।

आरंभिक कोड के लिए इस URL पर जाएं: https://stackblitz.com/edit/firebase-gtk-web-start
StackBlitz पृष्ठ के शीर्ष पर, Fork क्लिक करें:

इस चरण का स्क्रीनशॉट

अब आपके पास अपने स्वयं के StackBlitz प्रोजेक्ट के रूप में प्रारंभिक कोड की एक प्रति है, जिसमें एक अद्वितीय URL के साथ एक अद्वितीय नाम है। आपकी सभी फ़ाइलें और परिवर्तन इस StackBlitz प्रोजेक्ट में सहेजे गए हैं।

बस अगर आप पटरी से उतर जाते हैं, तो इस कोडलैब में विभिन्न चौकियों पर स्टैकब्लिट्ज लिंक होते हैं, जो उस बिंदु तक जोड़े गए सभी कोड के साथ अपडेट होते हैं।

सुनिश्चित करें कि आप इन चौकियों पर दो काम करते हैं:

परियोजना को फोर्क करें ताकि यह आपका अपना हो।
Firebase कंसोल से अपना Firebase प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें (उस पर बाद में कोडलैब में अधिक)।

3. घटना की जानकारी संपादित करें

इस कोडलैब के लिए शुरुआती सामग्री वेब ऐप के लिए कुछ संरचना प्रदान करती है, जिसमें कुछ स्टाइलशीट और ऐप के लिए कुछ HTML कंटेनर शामिल हैं। बाद में इस कोडलैब में, आप इन कंटेनरों को Firebase से जोड़ देंगे।

आरंभ करने के लिए, आइए StackBlitz इंटरफ़ेस से थोड़ा और परिचित हों।

StackBlitz में, index.html फ़ाइल खोलें।
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>

<!-- ... -->

आपके ऐप का पूर्वावलोकन कुछ इस तरह दिखना चाहिए:

ऐप पूर्वावलोकन

इस चरण का स्क्रीनशॉट

4. एक फायरबेस प्रोजेक्ट बनाएं और सेट करें

ईवेंट जानकारी प्रदर्शित करना आपके अतिथियों के लिए बहुत अच्छा है, लेकिन केवल ईवेंट दिखाना किसी के लिए भी बहुत उपयोगी नहीं है. आइए इस ऐप में कुछ गतिशील कार्यक्षमता जोड़ें। इसके लिए आपको Firebase को अपने ऐप से जोड़ना होगा। Firebase के साथ आरंभ करने के लिए, आपको एक Firebase प्रोजेक्ट बनाना और सेट करना होगा।

एक फायरबेस प्रोजेक्ट बनाएं

फायरबेस में साइन इन करें।
Firebase कंसोल में, प्रोजेक्ट जोड़ें (या प्रोजेक्ट बनाएं ) पर क्लिक करें, फिर अपने Firebase प्रोजेक्ट को Firebase-Web-Codelab नाम दें।
परियोजना निर्माण विकल्पों के माध्यम से क्लिक करें। संकेत मिलने पर Firebase की शर्तें स्वीकार करें. Google Analytics स्क्रीन पर, "सक्षम न करें" पर क्लिक करें, क्योंकि आप इस ऐप के लिए Analytics का उपयोग नहीं करेंगे।

Firebase प्रोजेक्ट के बारे में और जानने के लिए, Firebase प्रोजेक्ट को समझें देखें.

कंसोल में Firebase उत्पादों को सक्षम और सेट अप करें

आप जिस ऐप्लिकेशन का निर्माण कर रहे हैं, वह ऐसे कई Firebase उत्पादों का उपयोग करता है जो वेब ऐप्लिकेशन के लिए उपलब्ध हैं:

अपने उपयोगकर्ताओं को आसानी से आपके ऐप में साइन इन करने की अनुमति देने के लिए फायरबेस प्रमाणीकरण और फायरबेस यूआई ।
क्लाउड पर संरचित डेटा को सहेजने के लिए क्लाउड फायरस्टोर और डेटा में परिवर्तन होने पर तुरंत सूचना प्राप्त करें।
अपने डेटाबेस को सुरक्षित करने के लिए फायरबेस सुरक्षा नियम ।

इनमें से कुछ उत्पादों को विशेष कॉन्फ़िगरेशन की आवश्यकता होती है या Firebase कंसोल का उपयोग करके सक्षम करने की आवश्यकता होती है।

उपयोगकर्ताओं को वेब ऐप में साइन इन करने की अनुमति देने के लिए, आप इस कोडलैब के लिए ईमेल/पासवर्ड साइन-इन पद्धति का उपयोग करेंगे:

फायरबेस कंसोल के बाईं ओर के पैनल में, बिल्ड > प्रमाणीकरण पर क्लिक करें। इसके बाद गेट स्टार्टेड पर क्लिक करें। अब आप प्रमाणीकरण डैशबोर्ड में हैं, जहां आप साइन-अप उपयोगकर्ता देख सकते हैं, साइन-इन प्रदाताओं को कॉन्फ़िगर कर सकते हैं और सेटिंग प्रबंधित कर सकते हैं।
साइन-इन विधि टैब चुनें (या सीधे टैब पर जाने के लिए यहां क्लिक करें )।
प्रदाता विकल्पों में से ईमेल/पासवर्ड पर क्लिक करें, स्विच को सक्षम करें पर टॉगल करें और फिर सहेजें पर क्लिक करें।

क्लाउड फायरस्टोर सेट करें

वेब ऐप चैट संदेशों को सहेजने और नए चैट संदेश प्राप्त करने के लिए क्लाउड फायरस्टोर का उपयोग करता है।

Cloud Firestore कैसे सेट करें, यह यहां बताया गया है:

फायरबेस कंसोल के बाईं ओर के पैनल में, बिल्ड > फायरस्टोर डेटाबेस पर क्लिक करें। फिर डेटाबेस बनाएं पर क्लिक करें।
डेटाबेस बनाएँ पर क्लिक करें।
स्टार्ट इन टेस्ट मोड विकल्प चुनें। सुरक्षा नियमों के बारे में अस्वीकरण पढ़ें। परीक्षण मोड सुनिश्चित करता है कि आप विकास के दौरान डेटाबेस को स्वतंत्र रूप से लिख सकते हैं। अगला क्लिक करें।

सावधानी: इस कोडलैब के पहले चरण में, आप परीक्षण मोड का उपयोग करते हैं। हालांकि, बाद में कोडलैब में, आप अपने डेटाबेस को सुरक्षित करने के लिए फायरबेस सुरक्षा नियम लिखेंगे।
आपके ऐप्स के लिए, विशेष रूप से प्रोडक्शन ऐप्स के लिए, यह बहुत महत्वपूर्ण है कि आप सुरक्षा नियमों का उपयोग करके अपने डेटाबेस को सुरक्षित करें। Firebase दस्तावेज़ में सुरक्षा नियमों के बारे में और जानें।
अपने डेटाबेस के लिए स्थान का चयन करें (आप केवल डिफ़ॉल्ट का उपयोग कर सकते हैं)। हालांकि, ध्यान दें कि इस स्थान को बाद में नहीं बदला जा सकता है।
हो गया क्लिक करें.

5. Firebase जोड़ें और कॉन्फ़िगर करें

अब जब आपने अपना फायरबेस प्रोजेक्ट बना लिया है और कुछ सेवाएं सक्षम हैं, तो आपको वह कोड बताना होगा जो आप फायरबेस का उपयोग करना चाहते हैं, साथ ही साथ किस फायरबेस प्रोजेक्ट का उपयोग करना है।

फायरबेस लाइब्रेरी जोड़ें

अपने ऐप्लिकेशन के लिए Firebase का इस्तेमाल करने के लिए, आपको ऐप्लिकेशन में Firebase लाइब्रेरी जोड़नी होगी. ऐसा करने के कई तरीके हैं, जैसा कि फायरबेस दस्तावेज़ीकरण में वर्णित है । उदाहरण के लिए, आप Google के सीडीएन से पुस्तकालय जोड़ सकते हैं, या आप उन्हें स्थानीय रूप से npm का उपयोग करके स्थापित कर सकते हैं और फिर यदि आप Browserify का उपयोग कर रहे हैं तो उन्हें अपने ऐप में पैकेज कर सकते हैं।

StackBlitz स्वचालित बंडलिंग प्रदान करता है, जिससे आप आयात विवरण का उपयोग करके फायरबेस लाइब्रेरी जोड़ सकते हैं। आप पुस्तकालयों के मॉड्यूलर (v9) संस्करणों का उपयोग करेंगे, जो वेबपेज के समग्र आकार को कम करने में मदद करते हैं, हालांकि एक प्रक्रिया जिसे "ट्री शेकिंग" कहा जाता है। आप डॉक्स में मॉड्यूलर एसडीके के बारे में अधिक जान सकते हैं।

इस ऐप को बनाने के लिए, आप फायरबेस ऑथेंटिकेशन, फायरबेसयूआई और क्लाउड फायरस्टोर लाइब्रेरी का उपयोग करते हैं। इस कोडलैब के लिए, निम्न आयात विवरण पहले से ही 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 कंसोल में वापस, ऊपर बाईं ओर प्रोजेक्ट अवलोकन पर क्लिक करके अपने प्रोजेक्ट के अवलोकन पृष्ठ पर नेविगेट करें।
अपने प्रोजेक्ट के अवलोकन पृष्ठ के केंद्र में, वेब आइकन पर क्लिक करें एक नया फायरबेस वेब ऐप बनाने के लिए।
वेब ऐप उपनाम के साथ ऐप को पंजीकृत करें।
इस कोडलैब के लिए, इस ऐप के लिए फायरबेस होस्टिंग भी सेट करें के आगे वाले बॉक्स को चेक न करें। आप अभी के लिए StackBlitz के पूर्वावलोकन फलक का उपयोग करेंगे।
रजिस्टर ऐप पर क्लिक करें।
स्टैकब्लिट्ज आपके लिए आपकी निर्भरता का प्रबंधन करता है, इसलिए आप npm npm install firebase चरण को छोड़ सकते हैं जो कंसोल में प्रदर्शित होता है।
Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को अपने क्लिपबोर्ड पर कॉपी करें।
कंसोल के लिए जारी रखें पर क्लिक करें। अपने ऐप में फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें:
StackBlitz में वापस, index.js फ़ाइल पर जाएँ।
यहां Add Firebase project configuration object here पता लगाएं, टिप्पणी लाइन, फिर अपना कॉन्फ़िगरेशन स्निपेट टिप्पणी के ठीक नीचे पेस्ट करें।

अपने अद्वितीय फायरबेस प्रोजेक्ट कॉन्फ़िगरेशन का उपयोग करके फायरबेस सेट करने के लिए 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.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

यदि आप firebaseConfig स्निपेट चूक गए हैं (या चेकपॉइंट पर इसकी आवश्यकता है)...

आप अपने Firebase प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट को Firebase कंसोल से प्राप्त कर सकते हैं।

फायरबेस कंसोल में, ऊपरी-बाएँ कोने में सेटिंग आइकन पर क्लिक करें, फिर प्रोजेक्ट सेटिंग्स चुनें।
सामान्य टैब में, अपने ऐप्स कार्ड तक नीचे स्क्रॉल करें।
अपने वेब ऐप पर क्लिक करें, फिर फायरबेस एसडीके स्निपेट के लिए कॉन्फिग विकल्प चुनें।
संपूर्ण कॉन्फ़िगरेशन स्निपेट को अपने क्लिपबोर्ड पर कॉपी करें।

इस चरण का स्क्रीनशॉट

6. उपयोगकर्ता साइन-इन (आरएसवीपी) जोड़ें

अब जब आपने ऐप में फायरबेस जोड़ लिया है, तो आप एक आरएसवीपी बटन सेट कर सकते हैं जो फायरबेस प्रमाणीकरण का उपयोग करने वाले लोगों को पंजीकृत करता है।

आपको एक RSVP बटन की आवश्यकता होगी जो उपयोगकर्ता को उनके ईमेल पते से साइन इन करने के लिए प्रेरित करे। आप FirebaseUI को RSVP बटन से जोड़कर ऐसा कर सकते हैं। FirebaseUI एक लाइब्रेरी है जो आपको Firebase Auth के शीर्ष पर एक पूर्व-निर्मित UI प्रदान करती है।

FirebaseUI को एक कॉन्फ़िगरेशन की आवश्यकता होती है ( दस्तावेज़ीकरण में विकल्प देखें) जो दो काम करता है:

FirebaseUI को बताता है कि आप ईमेल/पासवर्ड साइन-इन पद्धति का उपयोग करना चाहते हैं।
एक सफल साइन-इन के लिए कॉलबैक को हैंडल करता है और रीडायरेक्ट से बचने के लिए गलत रिटर्न देता है। आप नहीं चाहते कि पेज रीफ्रेश हो क्योंकि आप एक पेज का वेब ऐप बना रहे हैं।

FirebaseUI Auth को इनिशियलाइज़ करने के लिए कोड जोड़ें

StackBlitz में, index.js फ़ाइल पर जाएँ।
सबसे ऊपर, 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';
```
initializeApp ऐप के ठीक बाद ऑथ ऑब्जेक्ट का संदर्भ सहेजें, जैसे:
```
initializeApp(firebaseConfig);
auth = getAuth();
```
ध्यान दें कि FirebaseUI कॉन्फ़िगरेशन पहले से ही शुरुआती कोड में दिया गया है। यह ईमेल प्रमाणीकरण प्रदाता का उपयोग करने के लिए पहले से ही सेटअप है।
index.js में main() फंक्शन के नीचे, FirebaseUI इनिशियलाइज़ेशन स्टेटमेंट जोड़ें, जैसे:
```
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 कंसोल में ईमेल/पासवर्ड को साइन-इन प्रदाता के रूप में सक्षम किया है।
ऐप पूर्वावलोकन
फायरबेस कंसोल में ऑथेंटिकेशन डैशबोर्ड पर जाएं। उपयोगकर्ता टैब में, आपको उस खाता जानकारी को देखना चाहिए जिसे आपने ऐप में साइन इन करने के लिए दर्ज किया था।

UI में प्रमाणीकरण स्थिति जोड़ें

इसके बाद, सुनिश्चित करें कि UI इस तथ्य को दर्शाता है कि आपने साइन इन किया है।

आप फायरबेस प्रमाणीकरण स्थिति श्रोता कॉलबैक का उपयोग करेंगे, जो उपयोगकर्ता की साइन-इन स्थिति में परिवर्तन होने पर अधिसूचित हो जाता है। यदि वर्तमान में कोई साइन-इन उपयोगकर्ता है, तो आपका ऐप "RSVP" बटन को "लॉगआउट" बटन पर स्विच कर देगा।

StackBlitz में, index.js फ़ाइल पर जाएँ।
सबसे ऊपर, 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';
```

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 प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें।

7. क्लाउड फायरस्टोर को संदेश लिखें

यह जानकर कि उपयोगकर्ता आ रहे हैं, बहुत अच्छा है, लेकिन आइए मेहमानों को ऐप में कुछ और करने दें। क्या होगा यदि वे एक अतिथि पुस्तिका में संदेश छोड़ सकते हैं? वे साझा कर सकते हैं कि वे आने के लिए उत्साहित क्यों हैं या वे किससे मिलने की उम्मीद करते हैं।

उन चैट संदेशों को संग्रहीत करने के लिए जो उपयोगकर्ता ऐप में लिखते हैं, आप क्लाउड फायरस्टोर का उपयोग करेंगे।

डेटा मॉडल

Cloud Firestore एक NoSQL डेटाबेस है, और डेटाबेस में संग्रहीत डेटा को संग्रह, दस्तावेज़, फ़ील्ड और उप-संग्रह में विभाजित किया जाता है। आप चैट के प्रत्येक संदेश को guestbook नामक एक शीर्ष-स्तरीय संग्रह में एक दस्तावेज़ के रूप में संग्रहीत करेंगे।

फायरस्टोर डेटा मॉडल ग्राफ़िक एकाधिक संदेश दस्तावेज़ों के साथ गेस्टबुक संग्रह दिखा रहा है

फायरस्टोर में संदेश जोड़ें

इस खंड में, आप डेटाबेस में नए संदेश लिखने के लिए उपयोगकर्ताओं के लिए कार्यक्षमता जोड़ेंगे। सबसे पहले, आप 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>

<!-- ... -->

ऐप पूर्वावलोकन

इस चरण का स्क्रीनशॉट

भेजें बटन पर क्लिक करने वाला उपयोगकर्ता नीचे दिए गए कोड स्निपेट को ट्रिगर करेगा। यह डेटाबेस के guestbook संग्रह में संदेश इनपुट फ़ील्ड की सामग्री जोड़ता है। विशेष रूप से, addDoc विधि संदेश सामग्री को एक नए दस्तावेज़ (स्वचालित रूप से जेनरेट की गई आईडी के साथ) में guestbook संग्रह में जोड़ती है।

StackBlitz में, index.js फ़ाइल पर जाएँ।

सबसे ऊपर, 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';

अब हम initializeApp ऐप के ठीक बाद फायरस्टोर db ऑब्जेक्ट के संदर्भ को सेव करेंगे:
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

main() फ़ंक्शन के निचले भाग में, निम्न कोड जोड़ें।

ध्यान दें कि auth.currentUser.uid ऑटो-जेनरेटेड यूनिक आईडी का संदर्भ है जो फायरबेस ऑथेंटिकेशन सभी लॉग-इन उपयोगकर्ताओं के लिए देता है।

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

अतिथिपुस्तिका केवल साइन-इन किए हुए उपयोगकर्ताओं को दिखाएं

आप नहीं चाहते कि कोई भी मेहमानों की चैट देखे। चैट को सुरक्षित करने के लिए आप जो एक काम कर सकते हैं, वह यह है कि केवल साइन-इन किए हुए उपयोगकर्ताओं को ही गेस्टबुक देखने की अनुमति दी जाए। उस ने कहा, अपने स्वयं के ऐप्स के लिए, आप अपने डेटाबेस को फायरबेस सुरक्षा नियमों के साथ भी सुरक्षित करना चाहेंगे। (बाद में कोडलैब में सुरक्षा नियमों के बारे में अधिक जानकारी है।)

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

संदेश भेजने का परीक्षण करें

सुनिश्चित करें कि आपने ऐप में साइन इन किया है।
"अरे वहाँ!" जैसा संदेश दर्ज करें, फिर भेजें पर क्लिक करें।

यह क्रिया आपके क्लाउड फायरस्टोर डेटाबेस को संदेश लिखती है। हालांकि, आप अभी तक अपने वास्तविक वेब ऐप में संदेश नहीं देख पाएंगे क्योंकि आपको अभी भी डेटा पुनर्प्राप्त करने को लागू करने की आवश्यकता है। आप इसे आगे करेंगे।

लेकिन आप नए जोड़े गए संदेश को फायरबेस कंसोल में देख सकते हैं।

फायरबेस कंसोल में, फायरस्टोर डेटाबेस डैशबोर्ड में, आपको अपने नए जोड़े गए संदेश के साथ guestbook संग्रह देखना चाहिए। यदि आप संदेश भेजते रहते हैं, तो आपके गेस्टबुक संग्रह में कई दस्तावेज़ होंगे, जैसे:

फायरबेस कंसोल

इस चरण का स्क्रीनशॉट

सुनिश्चित करें कि आप इस चेकपॉइंट पर दो काम करते हैं:

परियोजना को फोर्क करें ताकि यह आपका अपना हो।
Firebase कंसोल से अपना Firebase प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें।

8. संदेश पढ़ें

संदेशों को सिंक्रनाइज़ करें

यह अच्छा है कि मेहमान डेटाबेस में संदेश लिख सकते हैं, लेकिन वे उन्हें अभी तक ऐप में नहीं देख सकते हैं।

संदेशों को प्रदर्शित करने के लिए, आपको श्रोताओं को जोड़ना होगा जो डेटा बदलने पर ट्रिगर करते हैं, फिर एक 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 /फायरस्टोर इंपोर्ट स्टेटमेंट का पता लगाएं, फिर 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 में कोई भी परिवर्तन दिखाई देना चाहिए।

बधाई हो! आप अपने ऐप में Cloud Firestore दस्तावेज़ पढ़ रहे हैं!

ऐप पूर्वावलोकन

इस चरण का स्क्रीनशॉट

सुनिश्चित करें कि आप इस चेकपॉइंट पर दो काम करते हैं:

परियोजना को फोर्क करें ताकि यह आपका अपना हो।
Firebase कंसोल से अपना Firebase प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें।

9. बुनियादी सुरक्षा नियम स्थापित करें

आपने शुरू में परीक्षण मोड का उपयोग करने के लिए क्लाउड फायरस्टोर की स्थापना की, जिसका अर्थ है कि आपका डेटाबेस पढ़ने और लिखने के लिए खुला है। हालाँकि, आपको केवल विकास के प्रारंभिक चरणों के दौरान ही परीक्षण मोड का उपयोग करना चाहिए। सर्वोत्तम अभ्यास के रूप में, आपको अपना ऐप विकसित करते समय अपने डेटाबेस के लिए सुरक्षा नियम स्थापित करने चाहिए। सुरक्षा आपके ऐप की संरचना और व्यवहार का अभिन्न अंग होनी चाहिए।

सुरक्षा नियम आपको अपने डेटाबेस में दस्तावेज़ों और संग्रहों तक पहुँच को नियंत्रित करने की अनुमति देते हैं। लचीला नियम सिंटैक्स आपको ऐसे नियम बनाने की अनुमति देता है जो किसी विशिष्ट दस्तावेज़ पर संचालन के लिए पूरे डेटाबेस में सभी लिखने से मेल खाते हैं।

आप Firebase कंसोल में Cloud Firestore के लिए सुरक्षा नियम लिख सकते हैं:

फायरबेस कंसोल के बिल्ड सेक्शन में, फायरस्टोर डेटाबेस पर क्लिक करें, फिर नियम टैब चुनें (या सीधे नियम टैब पर जाने के लिए यहां क्लिक करें )।
आज से कुछ हफ़्ते बाद आपको सार्वजनिक-पहुँच समय सीमा के साथ निम्नलिखित डिफ़ॉल्ट सुरक्षा नियम देखने चाहिए।

इस चरण का स्क्रीनशॉट

संग्रह की पहचान करें

सबसे पहले, उन संग्रहों की पहचान करें जिन पर ऐप डेटा लिखता है।

मौजूदा 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 श्रोता पर गेस्टबुक संग्रह को एक नए फ़ंक्शन में खींचें जिसे 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 चर शून्य नहीं है, फिर श्रोता को रद्द करने के लिए फ़ंक्शन को कॉल करें।
```
// ...
// 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 प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें।

10. बोनस चरण: आपने जो सीखा है उसका अभ्यास करें

एक सहभागी की प्रतिसाद स्थिति रिकॉर्ड करें

अभी, आपका ऐप लोगों को केवल तभी चैट करना शुरू करने देता है, जब वे ईवेंट में रुचि रखते हैं। साथ ही, किसी के आने के बारे में आप केवल तभी जान सकते हैं जब वे उसे चैट में पोस्ट करते हैं। आइए संगठित हों और लोगों को बताएं कि कितने लोग आ रहे हैं।

आप उन लोगों को पंजीकृत करने के लिए एक टॉगल जोड़ेंगे जो ईवेंट में भाग लेना चाहते हैं, फिर कितने लोग आ रहे हैं, इसकी गणना करें।

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

ऐप पूर्वावलोकन

इस चरण का स्क्रीनशॉट

इसके बाद, श्रोता को बटन क्लिक के लिए पंजीकृत करें। यदि उपयोगकर्ता हाँ क्लिक करता है, तो डेटाबेस में प्रतिक्रिया को सहेजने के लिए उनके प्रमाणीकरण यूआईडी का उपयोग करें।

StackBlitz में, index.js फ़ाइल पर जाएँ।
सबसे ऊपर, 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';
```
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 कंसोल में अपने Cloud Firestore डैशबोर्ड पर जाएं।

RSVP स्थिति पढ़ें

अब जबकि आपने प्रतिक्रियाएं रिकॉर्ड कर ली हैं, आइए देखें कि कौन आ रहा है और इसे UI में प्रतिबिंबित करें।

StackBlitz में, index.html फ़ाइल पर जाएँ।

description-container , number-attending आईडी के साथ एक नया तत्व जोड़ें।

<!-- ... -->

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

<!-- ... -->

इसके बाद, attendees के संग्रह के लिए श्रोता को पंजीकृत करें और हाँ प्रतिक्रियाओं की संख्या गिनें:

StackBlitz में, index.js फ़ाइल पर जाएँ।

main() फ़ंक्शन के निचले भाग में, RSVP स्थिति सुनने और हाँ क्लिकों की गणना करने के लिए निम्न कोड जोड़ें।

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

अंत में, वर्तमान स्थिति के अनुरूप बटन को हाइलाइट करें।

एक फ़ंक्शन बनाएं जो जांचता है कि वर्तमान प्रमाणीकरण यूआईडी में 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();
      // 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();
    }
  });

एकाधिक उपयोगकर्ताओं के रूप में लॉग इन करने का प्रयास करें और प्रत्येक अतिरिक्त हाँ बटन क्लिक के साथ गिनती में वृद्धि देखें।

ऐप पूर्वावलोकन

इस चरण का स्क्रीनशॉट

सुनिश्चित करें कि आप इस चेकपॉइंट पर दो काम करते हैं:

प्रोजेक्ट को फोर्क करें ताकि यह आपका अपना हो।
Firebase कंसोल से अपना Firebase प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें।

11. बधाई!

आपने इंटरैक्टिव, रीयल-टाइम वेब एप्लिकेशन बनाने के लिए Firebase का उपयोग किया है!

हमने क्या कवर किया है

फायरबेस प्रमाणीकरण
फायरबेसयूआई
क्लाउड फायरस्टोर
फायरबेस सुरक्षा नियम

अगले कदम

Firebase डेवलपर वर्कफ़्लो के बारे में अधिक जानना चाहते हैं? अपने ऐप को पूरी तरह से स्थानीय रूप से परीक्षण और चलाने के तरीके के बारे में जानने के लिए फायरबेस एमुलेटर कोडलैब देखें ।
अन्य Firebase उत्पादों के बारे में अधिक जानना चाहते हैं? हो सकता है कि आप उन छवि फ़ाइलों को संग्रहीत करना चाहते हैं जिन्हें उपयोगकर्ता अपलोड करते हैं? या अपने उपयोगकर्ताओं को सूचनाएं भेजें? ऐसे कोडलैब के लिए Firebase वेब कोडलैब देखें , जो वेब के लिए और भी कई Firebase उत्पादों पर अधिक गहराई से जाता है।
क्लाउड फायरस्टोर के बारे में अधिक जानना चाहते हैं? शायद आप उपसंग्रह और लेन-देन के बारे में जानना चाहते हैं? क्लाउड फायरस्टोर पर अधिक गहराई में जाने वाले कोडलैब के लिए क्लाउड फायरस्टोर वेब कोडलैब पर जाएं। या Cloud Firestore को जानने के लिए इस YouTube श्रृंखला को देखें !

और अधिक जानें

फायरबेस साइट: firebase.google.com
फायरबेस यूट्यूब चैनल

यह कैसे हुआ?

हमें आपकी राय जान कर खुशी होगी! कृपया यहां एक (बहुत) संक्षिप्त फॉर्म भरें।

वेब के लिए Firebase के बारे में जानें

1 अवलोकन

आप क्या सीखेंगे

आपको किस चीज़ की ज़रूरत पड़ेगी

2. प्रारंभिक कोड प्राप्त करें

3. घटना की जानकारी संपादित करें

ऐप पूर्वावलोकन

4. एक फायरबेस प्रोजेक्ट बनाएं और सेट करें

एक फायरबेस प्रोजेक्ट बनाएं

कंसोल में Firebase उत्पादों को सक्षम और सेट अप करें

फायरबेस प्रमाणीकरण के लिए ईमेल साइन-इन सक्षम करें

क्लाउड फायरस्टोर सेट करें

5. Firebase जोड़ें और कॉन्फ़िगर करें

फायरबेस लाइब्रेरी जोड़ें

अपने Firebase प्रोजेक्ट में एक Firebase वेब ऐप्लिकेशन जोड़ें

6. उपयोगकर्ता साइन-इन (आरएसवीपी) जोड़ें

ईमेल साइन-इन और FirebaseUI के साथ अपने उपयोगकर्ताओं को प्रमाणित करें

FirebaseUI Auth को इनिशियलाइज़ करने के लिए कोड जोड़ें

HTML में RSVP बटन जोड़ें

ऐप में साइन इन करने का परीक्षण करें

UI में प्रमाणीकरण स्थिति जोड़ें

ऐप पूर्वावलोकन

7. क्लाउड फायरस्टोर को संदेश लिखें

डेटा मॉडल

फायरस्टोर में संदेश जोड़ें

ऐप पूर्वावलोकन

अतिथिपुस्तिका केवल साइन-इन किए हुए उपयोगकर्ताओं को दिखाएं

संदेश भेजने का परीक्षण करें

फायरबेस कंसोल

8. संदेश पढ़ें

संदेशों को सिंक्रनाइज़ करें

संदेशों को सिंक्रनाइज़ करने का परीक्षण करें

ऐप पूर्वावलोकन

9. बुनियादी सुरक्षा नियम स्थापित करें

संग्रह की पहचान करें

सुरक्षा नियम जोड़ें

सत्यापन नियम जोड़ें

श्रोताओं को रीसेट करें

10. बोनस चरण: आपने जो सीखा है उसका अभ्यास करें

एक सहभागी की प्रतिसाद स्थिति रिकॉर्ड करें

ऐप पूर्वावलोकन

अपने सुरक्षा नियम अपडेट करें

attendees के संग्रह में परिवर्धन की अनुमति दें

सत्यापन नियम जोड़ें

RSVP स्थिति पढ़ें

ऐप पूर्वावलोकन

11. बधाई!

हमने क्या कवर किया है

अगले कदम

और अधिक जानें

यह कैसे हुआ?

`attendees` के संग्रह में परिवर्धन की अनुमति दें