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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इन चेकपॉइंट पर, ये दो काम ज़रूर करें:

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

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

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

शुरू करने के लिए, चलिए StackBlitz इंटरफ़ेस के बारे में ज़्यादा जानें.

StackBlitz में, index.html फ़ाइल खोलें.
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 प्रोजेक्ट बनाना

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

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

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

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

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

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

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

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

Cloud Firestore सेट अप करना

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

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

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

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

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

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

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

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

इस ऐप्लिकेशन को बनाने के लिए, Firebase Authentication, 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 वेब ऐप्लिकेशन जोड़ना

Firebase कंसोल में वापस जाकर, सबसे ऊपर बाईं ओर मौजूद प्रोजेक्ट की खास जानकारी पर क्लिक करके, अपने प्रोजेक्ट के होम पेज पर जाएं.
अपने प्रोजेक्ट की खास जानकारी वाले पेज के बीच में, वेब आइकॉन पर क्लिक करके नया Firebase वेब ऐप्लिकेशन बनाएं.
ऐप्लिकेशन को वेब ऐप्लिकेशन के नाम से रजिस्टर करें.
इस कोडलैब के लिए, इस ऐप्लिकेशन के लिए Firebase होस्टिंग भी सेट अप करें के बगल में मौजूद बॉक्स को न चुनें. फ़िलहाल, आपको StackBlitz के झलक पैनल का इस्तेमाल करना होगा.
ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
Stackblitz आपकी डिपेंडेंसी मैनेज करता है, ताकि आप कंसोल में दिखाए गए npm install firebase चरण को छोड़ सकें.
Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को अपने क्लिपबोर्ड पर कॉपी करें.
कंसोल पर जाएं पर क्लिक करें.अपने ऐप्लिकेशन में Firebase कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें:
StackBlitz पर वापस जाकर, index.js फ़ाइल पर जाएं.
Add Firebase project configuration object here टिप्पणी वाली लाइन ढूंढें. इसके बाद, टिप्पणी के ठीक नीचे अपना कॉन्फ़िगरेशन स्निपेट चिपकाएं.

अपने यूनीक 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.firebasestorage.app",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

अगर आपको firebaseConfig स्निपेट नहीं मिला है या आपको किसी चेकपॉइंट पर इसकी ज़रूरत है, तो...

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

Firebase कंसोल में, सबसे ऊपर बाएं कोने में मौजूद सेटिंग आइकॉन पर क्लिक करें. इसके बाद, प्रोजेक्ट सेटिंग चुनें.
सामान्य टैब में, नीचे की ओर स्क्रोल करके आपके ऐप्लिकेशन कार्ड पर जाएं.
अपने वेब ऐप्लिकेशन पर क्लिक करें. इसके बाद, Firebase SDK टूल के स्निपेट के लिए कॉन्फ़िगर करें विकल्प चुनें.
पूरे कॉन्फ़िगरेशन स्निपेट को अपने क्लिपबोर्ड पर कॉपी करें.

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

6. उपयोगकर्ता के साइन इन करने की सुविधा जोड़ना (RSVP)

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

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

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

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

StackBlitz में, index.html फ़ाइल पर जाएं.
event-details-container के अंदर, जवाब देने के लिए बटन का एचटीएमएल जोड़ें, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है.

नीचे दी गई 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>

```
ऐप्लिकेशन की झलक
'हां में जवाब दें' बटन पर एक लिसनर सेट अप करें और FirebaseUI के start फ़ंक्शन को कॉल करें. इससे FirebaseUI को पता चलता है कि आपको साइन-इन विंडो देखनी है.

index.js में main() फ़ंक्शन के नीचे यह कोड जोड़ें:
```
async function main() {
  // ...

  // Listen to RSVP button clicks
  startRsvpButton.addEventListener("click",
   () => {
        ui.start("#firebaseui-auth-container", uiConfig);
  });
}
main();
```

ऐप्लिकेशन में साइन इन करने की जांच करना

StackBlitz की झलक वाली विंडो में, ऐप्लिकेशन में साइन इन करने के लिए, 'रजिस्ट्रेशन की पुष्टि करें' बटन पर क्लिक करें.
- इस कोडलैब के लिए, किसी भी ईमेल पते का इस्तेमाल किया जा सकता है. यहां तक कि किसी फ़र्ज़ी ईमेल पते का भी इस्तेमाल किया जा सकता है. इसकी वजह यह है कि इस कोडलैब के लिए, ईमेल पते की पुष्टि करने का चरण सेट अप नहीं किया जा रहा है.
- अगर आपको गड़बड़ी का कोई मैसेज मिलता है, जिसमें auth/operation-not-allowed या The given sign-in provider is disabled for this Firebase project लिखा है, तो पक्का करें कि आपने Firebase कंसोल में, साइन इन करने के लिए ईमेल/पासवर्ड को चालू किया हो.
ऐप्लिकेशन की झलक
Firebase कंसोल में, पुष्टि डैशबोर्ड पर जाएं. उपयोगकर्ता टैब में, आपको उस खाते की जानकारी दिखेगी जिसका इस्तेमाल करके आपने ऐप्लिकेशन में साइन इन किया था.

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

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

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

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 पर वापस स्विच हो जाना चाहिए.

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

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

क्या आपको कोई समस्या आ रही है या आपको लगता है कि आप सही दिशा में नहीं जा रहे हैं? यहां StackBlitz का एक लिंक दिया गया है. इसमें कोडलैब के इस चरण तक जोड़े गए सभी कोड अपडेट किए गए हैं: https://stackblitz.com/edit/firebase-gtk-web-checkpoint1

इस चेकपॉइंट पर, ये दो काम ज़रूर करें:

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

7. Cloud Firestore में मैसेज लिखना

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

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

डेटा मॉडल

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

Firestore डेटा मॉडल का ग्राफ़िक, जिसमें कई मैसेज दस्तावेज़ों के साथ मेहमानो की किताब का कलेक्शन दिखाया गया है

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

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

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

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

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 कलेक्शन में, अपने-आप जनरेट हुए आईडी वाले नए दस्तावेज़ में जोड़ता है.

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 के ठीक बाद, Firestore db ऑब्जेक्ट का रेफ़रंस सेव करेंगे:
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

main() फ़ंक्शन के सबसे नीचे, यह कोड जोड़ें.

ध्यान दें कि auth.currentUser.uid, अपने-आप जनरेट हुए यूनीक आईडी का रेफ़रंस है. Firebase Authentication, लॉग इन किए हुए सभी उपयोगकर्ताओं को यह आईडी देता है.

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 के सुरक्षा नियमों की मदद से भी अपने डेटाबेस को सुरक्षित रखना होगा. (कोडलैब में आगे, सुरक्षा नियमों के बारे में ज़्यादा जानकारी दी गई है.)

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

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

पक्का करें कि आपने ऐप्लिकेशन में साइन इन किया हो.
कोई मैसेज लिखें, जैसे कि "नमस्ते!". इसके बाद, भेजें पर क्लिक करें.

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

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

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

Firebase कंसोल

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

इस चेकपॉइंट पर, ये दो काम ज़रूर करें:

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

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

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

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

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

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

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

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

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

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

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

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

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

इस चेकपॉइंट पर, ये दो काम ज़रूर करें:

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

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

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

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

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

Firebase कंसोल के बिल्ड सेक्शन में, 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.
  }
}
```

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

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

अपने नियम सेट में, पढ़ने और लिखने के नियमों को नीचे दिखाए गए तरीके से जोड़ें:

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 फ़ाइल पर जाएं.
subscribeGuestbook नाम के नए फ़ंक्शन में, मेहमानों के लिए बनाए गए बुक onSnapshot के कलेक्शन को शामिल करें. साथ ही, onSnapshot फ़ंक्शन के नतीजों को guestbookListener वैरिएबल को असाइन करें.

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);
    });
  });
}
```
इसके नीचे, unsubscribeGuestbook नाम का एक नया फ़ंक्शन जोड़ें. देखें कि guestbookListener वैरिएबल शून्य है या नहीं. इसके बाद, listener को रद्द करने के लिए फ़ंक्शन को कॉल करें.
```
// ...
// 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>
<!-- ... -->

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

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

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

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() फ़ंक्शन के सबसे नीचे, न्योते के जवाब की स्थिति जानने के लिए यह कोड जोड़ें:
```
async function main() {
  // ...

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

attendees कलेक्शन के लिए, आपने दस्तावेज़ के नाम के तौर पर पुष्टि करने वाले यूआईडी का इस्तेमाल किया है. इसलिए, इसे हासिल करके पुष्टि की जा सकती है कि दस्तावेज़ सबमिट करने वाले व्यक्ति का uid, उस दस्तावेज़ से मेल खाता है जिसे वह लिख रहा है. आपके पास मीटिंग में शामिल लोगों की सूची को सभी के लिए पढ़ने की अनुमति देने का विकल्प होता है. ऐसा इसलिए, क्योंकि इसमें कोई निजी डेटा नहीं होता. हालांकि, इसे सिर्फ़ क्रिएटर ही अपडेट कर सकता है.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
नए नियमों को लागू करने के लिए, पब्लिश करें पर क्लिक करें.

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

डेटा की पुष्टि करने के कुछ नियम जोड़ें, ताकि यह पक्का किया जा सके कि दस्तावेज़ में सभी ज़रूरी फ़ील्ड मौजूद हैं:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}
```
अपने नियमों को लागू करने के लिए, पब्लिश करें पर क्लिक करना न भूलें!

(ज़रूरी नहीं) अब बटन पर क्लिक करके नतीजे देखे जा सकते हैं. Firebase कंसोल में, अपने Cloud Firestore डैशबोर्ड पर जाएं.

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

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

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

description-container में, number-attending का आईडी वाला नया एलिमेंट जोड़ें.

<!-- ... -->

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

<!-- ... -->

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

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

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

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

एक फ़ंक्शन बनाएं, जो यह जांच करे कि पुष्टि करने के लिए इस्तेमाल किए जा रहे मौजूदा यूआईडी की 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();
      // 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();
    }
  });

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

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

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

इस चेकपॉइंट पर, ये दो काम ज़रूर करें:

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

11. बधाई हो!

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

हमने क्या-क्या शामिल किया है

Firebase से पुष्टि करना
FirebaseUI
Cloud Firestore
Firebase के सुरक्षा नियम

अगले चरण

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Firebase Authentication के लिए, ईमेल से साइन इन करने की सुविधा चालू करना

Cloud Firestore सेट अप करना

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

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

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

6. उपयोगकर्ता के साइन इन करने की सुविधा जोड़ना (RSVP)

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

FirebaseUI Auth को शुरू करने के लिए कोड जोड़ना

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

ऐप्लिकेशन में साइन इन करने की जांच करना

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

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

7. Cloud Firestore में मैसेज लिखना

डेटा मॉडल

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

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

मेहमानों के लिए बनी किताब को सिर्फ़ साइन इन किए हुए उपयोगकर्ताओं को दिखाना

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

Firebase कंसोल

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

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

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

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

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

कलेक्शन की पहचान करना

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

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

लिसनर की संख्या रीसेट करना

10. बोनस चरण: आपने जो सीखा है उसकी प्रैक्टिस करना

इवेंट में शामिल होने वाले व्यक्ति के जवाब का स्टेटस रिकॉर्ड करना

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

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

attendees कलेक्शन में जोड़ने की अनुमति दें

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

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

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

11. बधाई हो!

हमने क्या-क्या शामिल किया है

अगले चरण

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

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

`attendees` कलेक्शन में जोड़ने की अनुमति दें