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

1 अवलोकन

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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>

<!-- ... -->

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

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

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

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

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

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

  1. फायरबेस में साइन इन करें।
  2. Firebase कंसोल में, प्रोजेक्ट जोड़ें (या प्रोजेक्ट बनाएं ) पर क्लिक करें, फिर अपने Firebase प्रोजेक्ट को Firebase-Web-Codelab नाम दें।

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

  3. परियोजना निर्माण विकल्पों के माध्यम से क्लिक करें। संकेत मिलने पर Firebase की शर्तें स्वीकार करें. Google Analytics स्क्रीन पर, "सक्षम न करें" पर क्लिक करें, क्योंकि आप इस ऐप के लिए Analytics का उपयोग नहीं करेंगे।

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

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

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

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

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

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

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

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

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

  2. साइन-इन विधि टैब चुनें (या सीधे टैब पर जाने के लिए यहां क्लिक करें )।

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

  3. प्रदाता विकल्पों में से ईमेल/पासवर्ड पर क्लिक करें, स्विच को सक्षम करें पर टॉगल करें और फिर सहेजें पर क्लिक करें।

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

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

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

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

  1. फायरबेस कंसोल के बाईं ओर के पैनल में, बिल्ड > फायरस्टोर डेटाबेस पर क्लिक करें। फिर डेटाबेस बनाएं पर क्लिक करें।
  2. डेटाबेस बनाएँ पर क्लिक करें।

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

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

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

  4. अपने डेटाबेस के लिए स्थान का चयन करें (आप केवल डिफ़ॉल्ट का उपयोग कर सकते हैं)। हालांकि, ध्यान दें कि इस स्थान को बाद में नहीं बदला जा सकता है।

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

  5. हो गया क्लिक करें.

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 वेब ऐप्लिकेशन जोड़ें

  1. Firebase कंसोल में वापस, ऊपर बाईं ओर प्रोजेक्ट अवलोकन पर क्लिक करके अपने प्रोजेक्ट के अवलोकन पृष्ठ पर नेविगेट करें।
  2. अपने प्रोजेक्ट के अवलोकन पृष्ठ के केंद्र में, वेब आइकन पर क्लिक करें वेब ऐप आइकन एक नया फायरबेस वेब ऐप बनाने के लिए।

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

  3. वेब ऐप उपनाम के साथ ऐप को पंजीकृत करें।
  4. इस कोडलैब के लिए, इस ऐप के लिए फायरबेस होस्टिंग भी सेट करें के आगे वाले बॉक्स को चेक न करें। आप अभी के लिए StackBlitz के पूर्वावलोकन फलक का उपयोग करेंगे।
  5. रजिस्टर ऐप पर क्लिक करें।

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

  6. Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को अपने क्लिपबोर्ड पर कॉपी करें।

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

  7. कंसोल के लिए जारी रखें पर क्लिक करें। अपने ऐप में फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें:
  8. StackBlitz में वापस, index.js फ़ाइल पर जाएँ।
  9. यहां Add Firebase project configuration object here पता लगाएं, टिप्पणी लाइन, फिर अपना कॉन्फ़िगरेशन स्निपेट टिप्पणी के ठीक नीचे पेस्ट करें।
  10. अपने अद्वितीय फायरबेस प्रोजेक्ट कॉन्फ़िगरेशन का उपयोग करके फायरबेस सेट करने के लिए 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);
    

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

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

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

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

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

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

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. index.js में main() फंक्शन के नीचे, 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. event-details-container के अंदर RSVP बटन के लिए HTML जोड़ें जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है।

    नीचे दिखाए गए समान 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>
    <!-- ... -->
    
    ऐप पूर्वावलोकन

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

  3. RSVP बटन पर श्रोता सेट करें और FirebaseUI प्रारंभ फ़ंक्शन को कॉल करें। यह FirebaseUI को बताता है कि आप साइन-इन विंडो देखना चाहते हैं।

    index.js में main() फ़ंक्शन के निचले भाग में निम्न कोड जोड़ें:
    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 कंसोल में ईमेल/पासवर्ड को साइन-इन प्रदाता के रूप में सक्षम किया है।
    ऐप पूर्वावलोकन

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

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

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

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

अब, आपके ऐप में बटन LOGOUT दिखाना चाहिए, और इसे क्लिक करने पर RSVP पर वापस स्विच करना चाहिए।

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

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

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

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

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

डेटा मॉडल

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

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

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

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

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

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

भेजें बटन पर क्लिक करने वाला उपयोगकर्ता नीचे दिए गए कोड स्निपेट को ट्रिगर करेगा। यह डेटाबेस के 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. अब हम initializeApp ऐप के ठीक बाद फायरस्टोर db ऑब्जेक्ट के संदर्भ को सेव करेंगे:
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. 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();
    

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

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

  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. "अरे वहाँ!" जैसा संदेश दर्ज करें, फिर भेजें पर क्लिक करें।

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

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

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

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

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

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 फ़ंक्शन दो पैरामीटर लेता है: उपयोग करने के लिए क्वेरी और कॉलबैक फ़ंक्शन। जब क्वेरी से मेल खाने वाले दस्तावेज़ों में कोई परिवर्तन होता है तो कॉलबैक फ़ंक्शन चालू हो जाता है। यह तब हो सकता है जब कोई संदेश हटा दिया जाता है, संशोधित किया जाता है या जोड़ा जाता है। अधिक जानकारी के लिए, क्लाउड फायरस्टोर दस्तावेज़ीकरण देखें।

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

क्लाउड फायरस्टोर स्वचालित रूप से और तुरंत डेटाबेस की सदस्यता लेने वाले ग्राहकों के साथ डेटा को सिंक्रनाइज़ करता है।

  • आपके द्वारा डेटाबेस में पहले बनाए गए संदेशों को ऐप में प्रदर्शित किया जाना चाहिए। नए संदेश लिखने के लिए स्वतंत्र महसूस करें; उन्हें तत्काल प्रकट होना चाहिए।
  • यदि आप अपने कार्यक्षेत्र को कई विंडो या टैब में खोलते हैं, तो संदेश वास्तविक समय में सभी टैब में समन्वयित होंगे।
  • (वैकल्पिक) आप Firebase कंसोल के डेटाबेस अनुभाग में सीधे नए संदेशों को मैन्युअल रूप से हटाने, संशोधित करने या जोड़ने का प्रयास कर सकते हैं; UI में कोई भी परिवर्तन दिखाई देना चाहिए।

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

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

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

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

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

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

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

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

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

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

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

  1. मौजूदा match /{document=**} खंड हटाएं, ताकि आपके नियम इस तरह दिखें:
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
      }
    }
    
  2. 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 है।

  1. नीचे दिखाए अनुसार अपने नियम सेट में पढ़ने और लिखने के नियम जोड़ें:
    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;
        }
      }
    }
    
  2. अपने नए नियमों को लागू करने के लिए प्रकाशित करें पर क्लिक करें। अब, गेस्टबुक के लिए, केवल साइन-इन उपयोगकर्ता ही संदेश पढ़ सकते हैं (कोई भी संदेश!), लेकिन आप केवल अपनी उपयोगकर्ता आईडी का उपयोग करके एक संदेश बना सकते हैं। हम संदेशों को संपादित या हटाए जाने की भी अनुमति नहीं देते हैं।

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

  1. यह सुनिश्चित करने के लिए डेटा सत्यापन जोड़ें कि दस्तावेज़ में सभी अपेक्षित फ़ील्ड मौजूद हैं:
    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;
        }
      }
    }
    
  2. अपने नए नियमों को लागू करने के लिए प्रकाशित करें पर क्लिक करें।

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

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

  1. StackBlitz में, index.js फ़ाइल पर जाएँ।
  2. 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);
        });
      });
    }
    
  3. unsubscribeGuestbook नामक एक नया फ़ंक्शन जोड़ें। जांचें कि क्या guestbookListener चर शून्य नहीं है, फिर श्रोता को रद्द करने के लिए फ़ंक्शन को कॉल करें।
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

अंत में, onAuthStateChanged कॉलबैक में नए फ़ंक्शन जोड़ें।

  1. if (user) के नीचे subscribeGuestbook() जोड़ें।
  2. 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();
      }
    });
    

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

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

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

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

  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() फ़ंक्शन के निचले भाग में, RSVP स्थिति सुनने के लिए निम्न कोड जोड़ें:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. इसके बाद, एक नया संग्रह बनाएं, जिसे 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 के संग्रह में जोड़ने की अनुमति देने के लिए आपको नियमों को अपडेट करना होगा।

  1. 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;
        }
      }
    }
    
  2. अपने नए नियमों को लागू करने के लिए प्रकाशित करें पर क्लिक करें।

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

  1. यह सुनिश्चित करने के लिए कुछ डेटा सत्यापन नियम जोड़ें कि सभी अपेक्षित फ़ील्ड दस्तावेज़ में मौजूद हैं:
    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;
    
        }
      }
    }
    
  2. अपने नियमों को लागू करने के लिए प्रकाशित करें पर क्लिक करना न भूलें!

(वैकल्पिक) अब आप बटन क्लिक करने के परिणाम देख सकते हैं। Firebase कंसोल में अपने Cloud Firestore डैशबोर्ड पर जाएं।

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() फ़ंक्शन के निचले भाग में, 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();
    

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

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

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

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

11. बधाई!

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

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

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

अगले कदम

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

और अधिक जानें

यह कैसे हुआ?

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