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

1. खास जानकारी

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

आपको इनके बारे में जानकारी मिलेगी

• Firebase से पुष्टि करने और FirebaseUI की मदद से उपयोगकर्ताओं की पुष्टि करें.
• Cloud Firestore का इस्तेमाल करके डेटा सिंक करें.
• डेटाबेस को सुरक्षित रखने के लिए, Firebase के सुरक्षा नियम लिखें.

आपको इन चीज़ों की ज़रूरत होगी

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

2. शुरुआती कोड पाएं

इस कोडलैब में, StackBlitz का इस्तेमाल करके ऐप्लिकेशन बनाया जा सकता है. यह एक ऑनलाइन एडिटर है, जिसमें कई Firebase वर्कफ़्लो इंटिग्रेट किए गए हैं. Stackbltz के लिए किसी सॉफ़्टवेयर को इंस्टॉल करने या खास StackBlitz खाते की ज़रूरत नहीं होती है.

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

1. शुरुआती कोड के लिए, इस यूआरएल पर जाएं: https://stackbltz.com/edit/firebase-gtk-web-start
2. StackBlitz पेज पर सबसे ऊपर, Fork पर क्लिक करें:

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

3. इवेंट की जानकारी में बदलाव करें

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

शुरू करने के लिए, चलिए 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>

<!-- ... -->

आपके ऐप्लिकेशन की झलक कुछ ऐसी दिखनी चाहिए:

ऐप्लिकेशन की झलक

4. Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

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

Firebase प्रोजेक्ट बनाना

1. Firebase में साइन इन करें.
2. Firebase कंसोल में, प्रोजेक्ट जोड़ें (या प्रोजेक्ट बनाएं) पर क्लिक करें, फिर अपने Firebase प्रोजेक्ट को Firebase-Web-Codelab का नाम दें.
   
   
   
   
3. प्रोजेक्ट बनाने के विकल्पों पर क्लिक करें. अनुरोध किए जाने पर, Firebase की शर्तें स्वीकार करें. Google Analytics स्क्रीन पर, "चालू न करें" पर क्लिक करें, क्योंकि इस ऐप्लिकेशन के लिए Analytics का इस्तेमाल नहीं किया जाएगा.

Firebase प्रोजेक्ट के बारे में ज़्यादा जानने के लिए, Firebase प्रोजेक्ट के बारे में जानकारी लेख पढ़ें.

कंसोल में Firebase प्रॉडक्ट को चालू और सेट अप करना

आप जो ऐप्लिकेशन बना रहे हैं वह कई Firebase प्रॉडक्ट का इस्तेमाल करता है, जो वेब ऐप्लिकेशन के लिए उपलब्ध हैं:

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

इनमें से कुछ प्रॉडक्ट के लिए खास कॉन्फ़िगरेशन की ज़रूरत होती है या उन्हें Firebase कंसोल का इस्तेमाल करके चालू करना पड़ता है.

Firebase से पुष्टि करने के लिए, ईमेल से साइन-इन करने की सुविधा चालू करना

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

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

Cloud Firestore सेट अप करना

चैट मैसेज सेव करने और नए चैट मैसेज पाने के लिए वेब ऐप्लिकेशन Cloud Firestore का इस्तेमाल करता है.

Cloud Firestore को सेट अप करने का तरीका यहां बताया गया है:

1. Firebase कंसोल के बाएं पैनल में, बिल्ड पर क्लिक करें > फ़ायरस्टोर डेटाबेस. इसके बाद, डेटाबेस बनाएं पर क्लिक करें.
2. डेटाबेस बनाएं पर क्लिक करें.
   
   
   
   
3. टेस्ट मोड में शुरू करें विकल्प चुनें. सुरक्षा के नियमों से जुड़ा डिसक्लेमर पढ़ें. टेस्ट मोड से यह पक्का होता है कि डेवलपमेंट के दौरान डेटाबेस में अपने हिसाब से बदलाव किया जा सके. आगे बढ़ें पर क्लिक करें.
   
   
   
   
4. अपने डेटाबेस के लिए जगह चुनें (आपके पास सिर्फ़ डिफ़ॉल्ट डेटाबेस का इस्तेमाल करने का विकल्प होता है). हालांकि, ध्यान दें कि यह स्थान बाद में बदला नहीं जा सकता.
   
   
   
   
5. हो गया पर क्लिक करें.

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

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

Firebase लाइब्रेरी जोड़ना

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

StackBlitz में ऑटोमैटिक बंडलिंग की सुविधा मिलती है, ताकि आप इंपोर्ट स्टेटमेंट का इस्तेमाल करके Firebase लाइब्रेरी जोड़ सकें. लाइब्रेरी के मॉड्यूलर (v9) वर्शन का इस्तेमाल किया जाएगा, जिससे "पेड़ का झटका देना" नाम की प्रोसेस के ज़रिए वेबपेज के कुल साइज़ को कम करने में मदद मिलती है. मॉड्यूलर SDK टूल के बारे में ज़्यादा जानने के लिए, दस्तावेज़ों में जाएं.

इस ऐप्लिकेशन को बनाने के लिए, आप Firebase से पुष्टि, FirebaseUI, और Cloud Firestore लाइब्रेरी का इस्तेमाल करते हैं. इस कोडलैब के लिए, index.js फ़ाइल के सबसे ऊपर ये इंपोर्ट स्टेटमेंट पहले से ही शामिल होते हैं. साथ ही, हम हर Firebase लाइब्रेरी से और भी तरीके इंपोर्ट करते रहेंगे:

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

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

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

import * as firebaseui from 'firebaseui';

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

1. Firebase कंसोल में वापस आने के बाद, सबसे ऊपर बाईं ओर प्रोजेक्ट की खास जानकारी पर क्लिक करके, अपने प्रोजेक्ट की खास जानकारी देने वाले पेज पर जाएं.
2. नया Firebase वेब ऐप्लिकेशन बनाने के लिए, अपने प्रोजेक्ट की खास जानकारी देने वाले पेज के बीच में मौजूद वेब आइकॉन पर क्लिक करें.
   
   
   
   
3. ऐप्लिकेशन को वेब ऐप्लिकेशन उपनाम से रजिस्टर करें.
4. इस कोडलैब के लिए, इस ऐप्लिकेशन के लिए Firebase होस्टिंग की सुविधा भी सेट अप करें के बगल में मौजूद बॉक्स को न चुनें. फ़िलहाल, आपको StackBlitz के झलक पैनल का इस्तेमाल करना होगा.
5. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
   
   
   
   
6. Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को अपने क्लिपबोर्ड पर कॉपी करें.
   
   
   
   
7. कंसोल पर जारी रखें पर क्लिक करें.अपने ऐप्लिकेशन में Firebase कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें:
8. StackBlitz पर वापस जाएं, index.js फ़ाइल पर जाएं.
9. Add Firebase project configuration object here टिप्पणी लाइन पर जाएं. इसके बाद, टिप्पणी के ठीक नीचे अपना कॉन्फ़िगरेशन स्निपेट चिपकाएं.
10. अपने यूनीक Firebase प्रोजेक्ट कॉन्फ़िगरेशन का इस्तेमाल करके, Firebase सेट अप करने के लिए, initializeApp फ़ंक्शन कॉल जोड़ें.

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

6. उपयोगकर्ता को साइन इन करने का ऐक्सेस दें (जवाब दें)

आपने Firebase को ऐप्लिकेशन में जोड़ लिया है. इसलिए, अब जवाब देने का बटन सेट अप किया जा सकता है. यह बटन, Firebase से पुष्टि करने की सुविधा का इस्तेमाल करके, लोगों को रजिस्टर करता है.

ईमेल साइन इन और FirebaseUI की मदद से अपने उपयोगकर्ताओं की पुष्टि करना

आपको एक 'जवाब दें' बटन की ज़रूरत होगी, जिसमें उपयोगकर्ता को अपने ईमेल पते से साइन इन करने के लिए कहा जाएगा. FirebaseUI को 'जवाब दें' बटन से जोड़कर ऐसा किया जा सकता है.FirebaseUI एक लाइब्रेरी है जिसमें आपको Firebase पुष्टि के ऊपर पहले से बना यूज़र इंटरफ़ेस (यूआई) मिलता है.

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. ध्यान दें कि FirebaseUI कॉन्फ़िगरेशन शुरुआती कोड में पहले से मौजूद है. ईमेल की पुष्टि करने वाली कंपनी का इस्तेमाल करने के लिए इसे पहले से ही सेटअप किया जा चुका है.
5. index.js में main() फ़ंक्शन के सबसे नीचे, FirebaseUI शुरू करने का स्टेटमेंट जोड़ें, जैसे कि:

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

एचटीएमएल में 'जवाब दें' बटन जोड़ना

1. StackBlitz में, index.html फ़ाइल पर जाएं.
2. event-details-container में जवाब दें बटन का एचटीएमएल जोड़ें, जैसा कि नीचे उदाहरण में दिखाया गया है.
   
   ध्यान रखें कि नीचे बताई गई 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. 'जवाब दें' बटन पर लिसनर सेट अप करें और 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 की झलक विंडो में, ऐप्लिकेशन में साइन इन करने के लिए 'जवाब दें' बटन पर क्लिक करें.
   • इस कोडलैब के लिए, किसी भी ईमेल पते का इस्तेमाल किया जा सकता है. यहां तक कि नकली ईमेल पते का भी इस्तेमाल किया जा सकता है. ऐसा इसलिए, क्योंकि कोडलैब के लिए ईमेल पते की पुष्टि करने का तरीका सेट अप नहीं किया जा रहा है.
   • अगर आपको auth/operation-not-allowed या The given sign-in provider is disabled for this Firebase project बताने वाला गड़बड़ी का मैसेज दिखता है, तो पक्का करें कि आपने Firebase कंसोल में, साइन-इन करने की सेवा देने वाले के तौर पर ईमेल/पासवर्ड को चालू किया हो.
   ऐप्लिकेशन की झलक
   
   
   
   
2. Firebase कंसोल में, पुष्टि करने के डैशबोर्ड पर जाएं. उपयोगकर्ता टैब में, आपको खाते की वह जानकारी दिखेगी जिसे आपने ऐप्लिकेशन में साइन इन करने के लिए डाला है.
   
   
   
   

यूज़र इंटरफ़ेस में पुष्टि करने की स्थिति जोड़ना

इसके बाद, पक्का करें कि यूज़र इंटरफ़ेस (यूआई), वह जानकारी दिखाता हो जिससे आपने साइन इन किया है.

आपको Firebase ऑथेंटिकेशन स्टेट लिसनर कॉलबैक का इस्तेमाल करना होगा. उपयोगकर्ता के साइन इन स्टेटस में बदलाव होने पर, इसे सूचना दी जाती है. अगर फ़िलहाल कोई साइन-इन किया हुआ उपयोगकर्ता है, तो आपका ऐप्लिकेशन "जवाब दें" पर स्विच कर देगा "लॉगआउट करें" बटन पर जाएं बटन.

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

अब, आपके ऐप्लिकेशन में मौजूद बटन पर लॉगआउट दिखना चाहिए. साथ ही, क्लिक किए जाने पर, यह वापस जवाब दें पर स्विच हो जाएगा.

ऐप्लिकेशन की झलक

7. Cloud Firestore पर मैसेज लिखें

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

ऐप्लिकेशन में उपयोगकर्ताओं के लिखे गए चैट मैसेज सेव करने के लिए, आपको Cloud Firestore का इस्तेमाल करना होगा.

डेटा मॉडल

Cloud Firestore एक NoSQL डेटाबेस है. साथ ही, डेटाबेस में सेव किया गया डेटा, कलेक्शन, दस्तावेज़, फ़ील्ड, और सब-कलेक्शन में बंटा होता है. आपको चैट के हर मैसेज को टॉप-लेवल कलेक्शन में दस्तावेज़ के तौर पर सेव करना होगा. इस कलेक्शन को guestbook कहा जाता है.

Firestore में मैसेज जोड़ना

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

मैसेज फ़ील्ड के यूज़र इंटरफ़ेस (यूआई) एलिमेंट और 'भेजें' बटन जोड़ने के लिए:

1. StackBlitz में, index.html फ़ाइल पर जाएं.
2. guestbook-container को ढूंढें. इसके बाद, मैसेज इनपुट फ़ील्ड और 'भेजें' बटन की मदद से फ़ॉर्म बनाने के लिए, यहां दिया गया एचटीएमएल कोड जोड़ें.

   <!-- ... -->
   
    <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 के ठीक बाद, Firestore db ऑब्जेक्ट का रेफ़रंस सेव करेंगे:

   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. "नमस्ते!" जैसा कोई मैसेज डालें. इसके बाद, भेजें पर क्लिक करें.

यह कार्रवाई आपके Cloud Firestore डेटाबेस में मैसेज लिख देती है. हालांकि, आपको अब भी अपने असल वेब ऐप्लिकेशन में मैसेज नहीं दिखेगा, क्योंकि आपको अब भी डेटा वापस पाने की प्रोसेस लागू करनी है. आगे आपको ऐसा करना होगा.

हालांकि, जोड़ा गया नया मैसेज, Firebase कंसोल में देखा जा सकता है.

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

Firebase कंसोल

8. मैसेज पढ़ना

मैसेज सिंक करना

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

मैसेज दिखाने के लिए, आपको ऐसे लिसनर जोड़ने होंगे जो डेटा में बदलाव होने पर ट्रिगर होते हैं. इसके बाद, आपको नए मैसेज दिखाने वाला यूज़र इंटरफ़ेस (यूआई) एलिमेंट बनाना होगा.

आपको ऐप्लिकेशन से नए जोड़े गए नए मैसेज सुनने वाला कोड जोड़ना होगा. पहले, मैसेज दिखाने के लिए एचटीएमएल में कोई सेक्शन जोड़ें:

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

मैसेज को सिंक करने की सुविधा की जांच करना

Cloud Firestore, डेटाबेस की सदस्यता लेने वाले क्लाइंट के साथ डेटा को अपने-आप और तुरंत सिंक करता है.

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

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

ऐप्लिकेशन की झलक

9. सुरक्षा के बुनियादी नियम सेट अप करना

आपने शुरुआत में Cloud Firestore को टेस्ट मोड का इस्तेमाल करने के लिए सेट अप किया था. इसका मतलब है कि आपके डेटाबेस में पढ़ने और लिखने की अनुमति है. हालांकि, आपको डेवलपमेंट के बेहद शुरुआती चरणों में ही टेस्ट मोड का इस्तेमाल करना चाहिए. सबसे सही तरीका यह है कि अपना ऐप्लिकेशन बनाते समय, आपको अपने डेटाबेस के लिए सुरक्षा के नियम सेट अप करने चाहिए. सुरक्षा आपके ऐप्लिकेशन के स्ट्रक्चर और व्यवहार में शामिल होनी चाहिए.

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

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

1. Firebase कंसोल के बिल्ड सेक्शन में, डेटा फिर से स्टोर करें पर क्लिक करें. इसके बाद, नियम टैब चुनें या सीधे नियम टैब पर जाने के लिए यहां क्लिक करें.
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.
     }
   }
   

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

आपने हर गेस्टबुक दस्तावेज़ में, पुष्टि करने का यूआईडी का इस्तेमाल फ़ील्ड के तौर पर किया है. इसलिए, आपको पुष्टि करने का यूआईडी मिल सकता है. साथ ही, यह पुष्टि की जा सकती है कि जिस व्यक्ति को दस्तावेज़ लिखने की कोशिश करनी है उसके पास, पुष्टि करने का यूआईडी मेल खाता हो.

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 वैरिएबल को असाइन करें.
   
   The Firestore 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 कॉलबैक में नए फ़ंक्शन जोड़ें.

4. if (user) के नीचे subscribeGuestbook() जोड़ें.
5. 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() फ़ंक्शन के सबसे नीचे यह कोड जोड़ें:

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

4. इसके बाद, attendees नाम से एक नया कलेक्शन बनाएं. अगर 'जवाब दें' बटन पर क्लिक किया जाता है, तो दस्तावेज़ का रेफ़रंस रजिस्टर करें. कौनसा बटन क्लिक किया गया है, इसके आधार पर उस रेफ़रंस को 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 और उसका दस्तावेज़ एक ही है. ऐसा करने पर, मीटिंग में शामिल सभी लोगों को मीटिंग में शामिल होने का मौका मिलेगा. इसकी वजह यह है कि इसमें कोई निजी डेटा मौजूद नहीं है. हालांकि, इस सूची को सिर्फ़ क्रिएटर ही अपडेट कर पाएगा.

   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 डैशबोर्ड पर जाएं.

जवाब का स्टेटस देखना

अब आपने जवाब रिकॉर्ड कर लिए हैं. आइए, देखते हैं कि कौन-कौन आ रहा है और उसे यूज़र इंटरफ़ेस (यूआई) में दिखाते हैं.

1. StackBlitz में, index.html फ़ाइल पर जाएं.
2. description-container में, number-attending आईडी के साथ एक नया एलिमेंट जोड़ें.

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

इसके बाद, attendees कलेक्शन के लिए लिसनर को रजिस्टर करें और हां के जवाबों की गिनती करें:

3. StackBlitz में, index.js फ़ाइल पर जाएं.
4. जवाब की स्थिति सुनने और हां क्लिक की गिनती करने के लिए, 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();
   

आखिर में, मौजूदा स्थिति से जुड़े बटन को हाइलाइट करते हैं.

5. ऐसा फ़ंक्शन बनाएं जो यह जांच करे कि 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';
         }
       }
     });
   }
   

6. साथ ही, आइए सदस्यता छोड़ने का फ़ंक्शन बनाते हैं. उपयोगकर्ता के लॉग आउट करने पर इसका इस्तेमाल किया जाएगा.

   // ...
   function unsubscribeCurrentRSVP() {
     if (rsvpListener != null) {
       rsvpListener();
       rsvpListener = null;
     }
     rsvpYes.className = '';
     rsvpNo.className = '';
   }
   

7. ऑथेंटिकेशन लिसनर से फ़ंक्शन को कॉल करें.

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

8. एक से ज़्यादा उपयोगकर्ताओं के तौर पर लॉग इन करने की कोशिश करें और हां बटन पर हर बार क्लिक करने से, गिनती में बढ़ोतरी देखें.

ऐप्लिकेशन की झलक

11. बधाई हो!

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

इसमें हमने इन विषयों के बारे में बताया

• Firebase से पुष्टि करना
• Firebaseयूज़र इंटरफ़ेस (यूआई)
• Cloud Firestore
• Firebase के सुरक्षा नियम

अगले चरण

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

ज़्यादा जानें

• Firebase साइट: firebase.google.com
• Firebase का YouTube चैनल

आपका अनुभव कैसा रहा?

हमें आपकी राय जानकर बेहद खुशी होगी! कृपया यहां एक बहुत छोटा फ़ॉर्म भरें.