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

1 अवलोकन

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

59abdefbcc23bbbe.png

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

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

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

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

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

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

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

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

अब आपके पास अपने स्वयं के StackBlitz प्रोजेक्ट के रूप में प्रारंभिक कोड की एक प्रति है। जब से तुम में हस्ताक्षर नहीं किए, तो आपके खाते में कहा जाता है @anonymous , लेकिन परियोजना, एक अनन्य नाम है एक अद्वितीय 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>

<!-- ... -->

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

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

908cc57ce3a5b5fe.png

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

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

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

  1. में प्रवेश करें Firebase
  2. Firebase कंसोल में, क्लिक परियोजना जोड़ें (या एक प्रोजेक्ट बना), तो आपके Firebase परियोजना Firebase-वेब Codelab नाम।
    a67c239f8cc7f4b5.png
  3. परियोजना निर्माण विकल्पों के माध्यम से क्लिक करें। संकेत मिलने पर Firebase की शर्तें स्वीकार करें. Google Analytics सेट करना छोड़ दें, क्योंकि आप इस ऐप के लिए Analytics का उपयोग नहीं करेंगे।

Firebase परियोजनाओं के बारे में अधिक जानने के लिए, Firebase परियोजनाओं को समझें

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

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

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

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

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

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

  1. Firebase कंसोल में, बाएं पैनल में बिल्ड क्लिक करें।
  2. प्रमाणीकरण, उसके बाद साइन-इन विधि टैब पर क्लिक करें (या यहां क्लिक करें साइन-इन विधि टैब पर सीधे जाने के लिए)।
  3. प्रदाताओं साइन-इन सूची में ईमेल / पासवर्ड पर क्लिक करें, स्थिति पर स्विच सक्षम निर्धारित करते हैं, फिर सहेजें क्लिक करें।
    4c88427cfd869bee.png

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

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

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

  1. Firebase कंसोल की बिल्ड अनुभाग में, इस firestore डाटाबेस पर क्लिक करें।
  2. डेटाबेस बनाएँ क्लिक करें।
    3ce19fd6467e51c5.png
  3. परीक्षण मोड विकल्प में प्रारंभ का चयन करें। सुरक्षा नियमों के बारे में अस्वीकरण पढ़ें। परीक्षण मोड सुनिश्चित करता है कि आप विकास के दौरान डेटाबेस को स्वतंत्र रूप से लिख सकते हैं। अगला क्लिक करें।
    56369cebb9300eb.png
  4. अपने डेटाबेस के लिए स्थान का चयन करें (आप केवल डिफ़ॉल्ट का उपयोग कर सकते हैं)। हालांकि, ध्यान दें कि इस स्थान को बाद में नहीं बदला जा सकता है।
    32f815f4648c3174.png
  5. पूर्ण क्लिक करें।

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

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

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

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

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

इस ऐप को बनाने के लिए, आप फायरबेस ऑथेंटिकेशन, फायरबेसयूआई और क्लाउड फायरस्टोर लाइब्रेरी का उपयोग करते हैं। इस codelab के लिए, निम्न आयात बयान पहले से ही के शीर्ष पर शामिल किए गए हैं index.js फ़ाइल, और हम एक Firebase पुस्तकालय से अधिक तरीकों का आयात हो जाएगा के रूप में हम चले:

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

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

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

import * as firebaseui from 'firebaseui';

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

  1. Firebase कंसोल में वापस, शीर्ष में परियोजना अवलोकन पर क्लिक करके अपने प्रोजेक्ट की अवलोकन पृष्ठ पर छोड़ दिया है।
  2. अपने प्रोजेक्ट के अवलोकन पृष्ठ के केंद्र में, वेब आइकन पर क्लिक करें b286f3d215e1f578.png एक नया फायरबेस वेब ऐप बनाने के लिए।
    c167e9526fad2825.png
  3. उपनाम वेब एप्लिकेशन के साथ एप्लिकेशन पंजीकृत।
  4. इस codelab के लिए, बॉक्स इसके अलावा इस एप्लिकेशन के लिए होस्टिंग Firebase की स्थापना को चेक नहीं करते। आप अभी के लिए StackBlitz के पूर्वावलोकन फलक का उपयोग करेंगे।
  5. रजिस्टर ऐप्लिकेशन क्लिक करें।
    c85ac8aa351e2560.png
  6. कॉपी Firebase विन्यास वस्तु अपने क्लिपबोर्ड।
    ed1e598c6132f734.png
  7. सांत्वना देने पर क्लिक करें।

अपने ऐप्लिकेशन में Firebase कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें:

  1. StackBlitz में वापस, के लिए जाना index.js फ़ाइल।
  2. पता लगाएँ Add Firebase project configuration object here टिप्पणी लाइन है, तो बस टिप्पणी नीचे अपना विन्यास टुकड़ा चिपकाने।
  3. जोड़े initializeApp समारोह कॉल अपने अद्वितीय Firebase परियोजना विन्यास का उपयोग कर Firebase स्थापित करने के लिए।
    // ...
    // Add Firebase project configuration object here
    const firebaseConfig = {
      apiKey: "random-unique-string",
      authDomain: "your-projectId.firebaseapp.com",
      databaseURL: "https://your-projectId.firebaseio.com",
      projectId: "your-projectId",
      storageBucket: "your-projectId.appspot.com",
      messagingSenderId: "random-unique-string",
      appId: "random-unique-string",
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig);
    

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

अब जब कि तुम एप्लिकेशन को Firebase जोड़ दिया है, तो आप उस का उपयोग कर रजिस्टरों लोगों को एक RSVP बटन सेट कर सकते हैं Firebase प्रमाणीकरण

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

आपको एक RSVP बटन की आवश्यकता होगी जो उपयोगकर्ता को उनके ईमेल पते से साइन इन करने के लिए प्रेरित करे। आप hooking द्वारा यह कर सकता हूँ FirebaseUI एक RSVP button.FirebaseUI करने के लिए एक पुस्तकालय है जो आप Firebase प्रमाणीकरण के शीर्ष पर पहले से बने यूआई देता है।

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. के तल में main() में समारोह index.js ,, FirebaseUI प्रारंभ बयान जोड़ सकते हैं ताकि तरह:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

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

  1. StackBlitz में, करने के लिए जाना index.html फ़ाइल।
  2. अंदर एक RSVP बटन के लिए HTML जोड़ें event-details-container के रूप में नीचे उदाहरण में दिखाया।

    एक ही उपयोग करने के लिए सावधान रहें id मान ही दिखाए नीचे के रूप में, क्योंकि इस codelab के लिए, देखते हैं पहले से ही में इन विशिष्ट आईडी के लिए हुक index.js फ़ाइल।

    नोट में है कि index.html फ़ाइल, वहाँ आईडी के साथ एक कंटेनर है firebaseui-auth-container । यह वह आईडी है जिसे आप अपना लॉगिन रखने के लिए FirebaseUI को पास करेंगे।
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    
    अनुप्रयोग पूर्वावलोकन
    ab9ad7d61bb7b28c.png
  3. RSVP बटन पर श्रोता सेट करें और FirebaseUI प्रारंभ फ़ंक्शन को कॉल करें। यह FirebaseUI को बताता है कि आप साइन-इन विंडो देखना चाहते हैं।

    के नीचे निम्न कोड जोड़ें main() में समारोह index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

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

  1. StackBlitz की पूर्वावलोकन विंडो में, ऐप में साइन इन करने के लिए RSVP बटन पर क्लिक करें।
    • इस कोडलैब के लिए, आप किसी भी ईमेल पते का उपयोग कर सकते हैं, यहां तक ​​कि नकली ईमेल पते का भी, क्योंकि आप इस कोडलैब के लिए ईमेल सत्यापन चरण सेट नहीं कर रहे हैं।
    • आप बताते हुए एक त्रुटि संदेश देखते हैं auth/operation-not-allowed या The given sign-in provider is disabled for this Firebase project , यह सुनिश्चित करें कि आप एक साइन-इन प्रदाता Firebase कंसोल में के रूप में सक्षम ईमेल / पासवर्ड बनाने के लिए जाँच करें।
    ऐप पूर्वावलोकन
    3024f90b52ad55fe.png
  2. पर जाएं प्रमाणीकरण डैशबोर्ड Firebase कंसोल में। उपयोगकर्ता टैब में, आप है कि आप एप्लिकेशन में प्रवेश करने के लिए दर्ज की गई खाता जानकारी देखना चाहिए। 682fc0eca86a99fc.png

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

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

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

  1. StackBlitz में, करने के लिए जाना index.js फ़ाइल।
  2. शीर्ष पर, पता लगाने firebase/auth इंपोर्ट स्टेटमेंट, तो जोड़ने के signOut और onAuthStateChanged :, इसलिए जैसे
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. के निचले भाग में निम्न कोड जोड़ें main() समारोह:
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. बटन श्रोता में, जांचें कि क्या कोई वर्तमान उपयोगकर्ता है और उन्हें लॉग आउट करें। ऐसा करने के लिए, वर्तमान की जगह startRsvpButton.addEventListener : निम्नलिखित के साथ
    // ...
    // Called when the user clicks the RSVP button
    startRsvpButton.addEventListener('click', () => {
      if (auth.currentUser) {
        // User is signed in; allows user to sign out
        signOut(auth);
      } else {
        // No user is signed in; allows user to sign in
        ui.start('#firebaseui-auth-container', uiConfig);
      }
    });
    

अब, अपने अनुप्रयोग में बटन लॉगआउट दिखाना चाहिए, और जब क्लिक करते ही यह RSVP लिए वापस आ जाएगा।

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

4c540450924f1607.png

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

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

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

डेटा मॉडल

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

b447950f9f993789.png

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

इस खंड में, आप डेटाबेस में नए संदेश लिखने के लिए उपयोगकर्ताओं के लिए कार्यक्षमता जोड़ेंगे। सबसे पहले, आप UI तत्वों (संदेश फ़ील्ड और भेजें बटन) के लिए HTML जोड़ें। फिर, आप उस कोड को जोड़ते हैं जो इन तत्वों को डेटाबेस से जोड़ता है।

संदेश फ़ील्ड के UI तत्व और भेजें बटन जोड़ने के लिए:

  1. StackBlitz में, करने के लिए जाना index.html फ़ाइल।
  2. पता लगाएँ guestbook-container , तो संदेश इनपुट क्षेत्र और भेजें बटन के साथ एक फार्म बनाने के लिए निम्नलिखित HTML जोड़ें।
    <!-- ... -->
    
     <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form id="leave-message">
         <label>Leave a message: </label>
         <input type="text" id="message">
         <button type="submit">
           <i class="material-icons">send</i>
           <span>SEND</span>
         </button>
       </form>
    
     </section>
    
    <!-- ... -->
    

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

4a892284443cf73d.png

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

  1. StackBlitz में, करने के लिए जाना index.js फ़ाइल।
  2. शीर्ष पर, पता लगाने firebase/firestore इंपोर्ट स्टेटमेंट, तो जोड़ने getFirestore , addDoc , और collection : है, तो जैसे
    // ...
    
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {
      getFirestore,
      addDoc,
      collection
    } from 'firebase/firestore';
    
  3. अब हम firestore करने के लिए एक संदर्भ बचा लेंगे db के बाद वस्तु सही initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. के तल में main() समारोह है, तो निम्न कोड जोड़ें।

    ध्यान दें कि auth.currentUser.uid स्वत: जनरेट अद्वितीय ID के लिए एक संदर्भ है कि Firebase प्रमाणीकरण के लिए सभी लॉग-इन उपयोगकर्ताओं देता है।
    async function main() {
      // ...
    
      // Listen to the form submission
      form.addEventListener('submit', async e => {
        // Prevent the default form redirect
        e.preventDefault();
        // Write a new message to the database collection "guestbook"
        addDoc(collection(db, 'guestbook'), {
          text: input.value,
          timestamp: Date.now(),
          name: auth.currentUser.displayName,
          userId: auth.currentUser.uid
        });
        // clear message input field
        input.value = '';
        // Return false to avoid redirect
        return false;
      });
    }
    main();
    

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

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

  1. StackBlitz में, करने के लिए जाना index.js फ़ाइल।
  2. संपादित onAuthStateChanged छिपाने के लिए श्रोता और गेस्टबुक दिखा।
    // ...
    
    // Listen to the current Auth state
    onAuthStateChanged(auth, user => {
      if (user) {
        startRsvpButton.textContent = 'LOGOUT';
        // Show guestbook to logged-in users
        guestbookContainer.style.display = 'block';
      } else {
        startRsvpButton.textContent = 'RSVP';
        // Hide guestbook for non-logged-in users
        guestbookContainer.style.display = 'none';
      }
    });
    

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

  1. सुनिश्चित करें कि आपने ऐप में साइन इन किया है।
  2. इस तरह के "यहां देखें!" के रूप में एक संदेश दर्ज करें, फिर भेजें पर क्लिक करें।

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

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

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

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

713870af0b3b63c.png

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

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

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

संदेशों को प्रदर्शित करने के लिए, आपको श्रोताओं को जोड़ना होगा जो डेटा में परिवर्तन होने पर ट्रिगर करते हैं, फिर एक UI तत्व बनाएं जो नए संदेश दिखाता है।

आप कोड जोड़ेंगे जो ऐप से नए जोड़े गए संदेशों को सुनता है। सबसे पहले, संदेश दिखाने के लिए HTML में एक अनुभाग जोड़ें:

  1. StackBlitz में, करने के लिए जाना index.html फ़ाइल।
  2. में guestbook-container , की आईडी के साथ एक नया अनुभाग जोड़ guestbook
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

इसके बाद, श्रोता को पंजीकृत करें जो डेटा में किए गए परिवर्तनों को सुनता है:

  1. StackBlitz में, करने के लिए जाना index.js फ़ाइल।
  2. शीर्ष पर, पता लगाने firebase/firestore इंपोर्ट स्टेटमेंट, तो जोड़ने query , orderBy , और onSnapshot :, इसलिए जैसे
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. के तल में main() समारोह, सभी दस्तावेजों (गेस्टबुक संदेश) डेटाबेस में लूप करने के लिए निम्न कोड जोड़ें। इस कोड में क्या हो रहा है, इसके बारे में अधिक जानने के लिए, स्निपेट के नीचे दी गई जानकारी पढ़ें।
    async function main() {
      // ...
    
      // Create query for messages
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      onSnapshot(q, snaps => {
        // Reset page
        guestbook.innerHTML = '';
        // Loop through documents in database
        snaps.forEach(doc => {
          // Create an HTML entry for each document and add it to the chat
          const entry = document.createElement('p');
          entry.textContent = doc.data().name + ': ' + doc.data().text;
          guestbook.appendChild(entry);
        });
      });
    }
    main();
    

डेटाबेस में संदेशों को सुनने के लिए, आप का उपयोग करके एक विशिष्ट संग्रह पर एक प्रश्न बना लिया है collection कार्य करते हैं। कोड में परिवर्तन को सुनता ऊपर guestbook संग्रह है, जो जहां चैट संदेशों जमा हो जाती है। संदेश भी तिथि के अनुसार क्रमबद्ध कर रहे हैं, का उपयोग कर orderBy('timestamp', 'desc') शीर्ष पर नवीनतम संदेश प्रदर्शित करने के लिए।

onSnapshot उपयोग करने के लिए क्वेरी तथा उसे कॉलबैक फ़ंक्शन: समारोह दो पैरामीटर लेता है। क्वेरी से मेल खाने वाले दस्तावेज़ों में कोई भी परिवर्तन होने पर कॉलबैक फ़ंक्शन चालू हो जाता है। यह तब हो सकता है जब कोई संदेश हटा दिया जाता है, संशोधित किया जाता है या जोड़ा जाता है। अधिक जानकारी के लिए, बादल Firestore प्रलेखन

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

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

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

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

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

e30df0a9614bae7d.png

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

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

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

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

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

7767a2d2e64e7275.png

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

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

में match /databases/{database}/documents , संग्रह आप सुरक्षित करना चाहते हैं की पहचान:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

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

चूंकि आपने प्रत्येक गेस्टबुक दस्तावेज़ में प्रमाणीकरण यूआईडी को फ़ील्ड के रूप में उपयोग किया है, आप प्रमाणीकरण यूआईडी प्राप्त कर सकते हैं और सत्यापित कर सकते हैं कि दस्तावेज़ को लिखने का प्रयास करने वाले किसी भी व्यक्ति के पास मिलान करने वाला प्रमाणीकरण यूआईडी है।

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

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

अब, अतिथिपुस्तिका के लिए, केवल साइन-इन उपयोगकर्ता ही संदेश पढ़ सकते हैं (कोई भी संदेश!), लेकिन आप केवल अपनी उपयोगकर्ता आईडी का उपयोग करके एक संदेश बना सकते हैं। हम संदेशों को संपादित या हटाने की अनुमति भी नहीं देते हैं।

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

यह सुनिश्चित करने के लिए डेटा सत्यापन जोड़ें कि दस्तावेज़ में सभी अपेक्षित फ़ील्ड मौजूद हैं:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

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

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

  1. गेस्टबुक संग्रह खींचो onSnapshot नामक एक नया समारोह में श्रोता subscribeGuestbook । इसके अलावा, के परिणाम आवंटित onSnapshot को समारोह guestbookListener चर।

    इस firestore onSnapshot श्रोता रिटर्न एक सदस्यता समाप्त समारोह है कि आप बाद में स्नैपशॉट श्रोता रद्द करने के लिए उपयोग करने में सक्षम हो जाएगा।
    // ...
    // Listen to guestbook updates
    // Listen to guestbook updates
    function subscribeGuestbook() {
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      guestbookListener = onSnapshot(q, snaps => {
        // Reset page
        guestbook.innerHTML = '';
        // Loop through documents in database
        snaps.forEach(doc => {
          // Create an HTML entry for each document and add it to the chat
          const entry = document.createElement('p');
          entry.textContent = doc.data().name + ': ' + doc.data().text;
          guestbook.appendChild(entry);
        });
      });
    }
    
  2. एक नया कार्य नीचे बुलाया जोड़े unsubscribeGuestbook । जाँच करें कि क्या guestbookListener चर अशक्त नहीं है, तो श्रोता रद्द करने के लिए फ़ंक्शन को कॉल करें।
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

अंत में, के लिए नए कार्यों को जोड़ने onAuthStateChanged कॉलबैक।

  1. जोड़े subscribeGuestbook() के तल पर if (user)
  2. जोड़े unsubscribeGuestbook() के तल पर else बयान।
    // ...
    // Listen to the current Auth state
    onAuthStateChanged(auth, user => {
      if (user) {
        startRsvpButton.textContent = 'LOGOUT';
        // Show guestbook to logged-in users
        guestbookContainer.style.display = 'block';
        // Subscribe to the guestbook collection
        subscribeGuestbook();
      } else {
        startRsvpButton.textContent = 'RSVP';
        // Hide guestbook for non-logged-in users
        guestbookContainer.style.display = 'none';
        // Unsubscribe from the guestbook collection
        unsubscribeGuestbook();
      }
    });
    

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

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

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

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

  1. StackBlitz में, करने के लिए जाना index.html फ़ाइल।
  2. में guestbook-container ,, हाँ और नहीं बटन का एक सेट जोड़ सकते हैं ताकि तरह:
    <!-- ... -->
      <section id="guestbook-container">
       <h2>Are you attending?</h2>
         <button id="rsvp-yes">YES</button>
         <button id="rsvp-no">NO</button>
    
       <h2>Discussion</h2>
    
       <!-- ... -->
    
     </section>
    <!-- ... -->
    

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

73ca99ca35c13ee7.png

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

  1. StackBlitz में, करने के लिए जाना index.js फ़ाइल।
  2. शीर्ष पर, पता लगाने firebase/firestore इंपोर्ट स्टेटमेंट, तो जोड़ने doc , setDoc , और where है, तो जैसे:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot,
      doc,
      setDoc,
      where
    } from 'firebase/firestore';
    
  3. के तल में main() समारोह, प्रतिसाद स्थिति पर सुनने के लिए निम्न कोड जोड़ें:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. कहा जाता है एक नया संग्रह बनाने attendees , तो एक दस्तावेज़ संदर्भ रजिस्टर यदि या तो RSVP बटन क्लिक किया जाता है।
  5. करने के लिए कि संदर्भ सेट true या false पर निर्भर करते हुए बटन क्लिक किया जाता है।

    सबसे पहले, के लिए rsvpYes :
    // ...
    // Listen to RSVP responses
    rsvpYes.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attendi()ng: true
      try {
        await setDoc(userRef, {
          attending: true
        });
      } catch (e) {
        console.error(e);
      }
    };
    
    फिर, के लिए एक ही rsvpNo , लेकिन मूल्य के साथ false :
    rsvpNo.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attending: true
      try {
        await setDoc(userRef, {
          attending: false
        });
      } catch (e) {
        console.error(e);
      }
    };
    

नियम जोड़ें

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

के लिए attendees संग्रह, क्योंकि आप दस्तावेज़ नाम के रूप में प्रमाणीकरण यूआईडी का इस्तेमाल किया है, आप इसे हड़पने और सत्यापित करें कि सबमिट करने वाले कर सकते हैं uid दस्तावेज़ वे लिख रहे हैं के समान है। आप सभी को उपस्थित लोगों की सूची पढ़ने की अनुमति देंगे (क्योंकि वहां कोई निजी डेटा नहीं है), लेकिन केवल निर्माता ही इसे अपडेट करने में सक्षम होना चाहिए।

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

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

यह सुनिश्चित करने के लिए डेटा सत्यापन जोड़ें कि दस्तावेज़ में सभी अपेक्षित फ़ील्ड मौजूद हैं:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

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

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() समारोह, प्रतिसाद स्थिति पर सुनने और हाँ क्लिक की गणना करने के लिए निम्न कोड जोड़ें।
    async function main() {
      // ...
    
      // Listen for attendee list
      const attendingQuery = query(
        collection(db, 'attendees'),
        where('attending', '==', true)
      );
      const unsubscribe = onSnapshot(attendingQuery, snap => {
        const newAttendeeCount = snap.docs.length;
        numberAttending.innerHTML = newAttendeeCount + ' people going';
      });
    }
    main();
    

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

  1. एक समारोह है कि चेकों वर्तमान प्रमाणीकरण यूआईडी में एक प्रविष्टि है कि क्या बनाएं attendees संग्रह है, तो बटन वर्ग के लिए सेट clicked
    // ...
    // Listen for attendee list
    function subscribeCurrentRSVP(user) {
      const ref = doc(db, 'attendees', user.uid);
      rsvpListener = onSnapshot(ref, doc => {
        if (doc && doc.data()) {
          const attendingResponse = doc.data().attending;
    
          // Update css classes for buttons
          if (attendingResponse) {
            rsvpYes.className = 'clicked';
            rsvpNo.className = '';
          } else {
            rsvpYes.className = '';
            rsvpNo.className = 'clicked';
          }
        }
      });
    }
    
  2. साथ ही, सदस्यता समाप्त करने के लिए एक फ़ंक्शन बनाते हैं। इसका उपयोग तब किया जाएगा जब उपयोगकर्ता लॉग आउट करेगा।
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. प्रमाणीकरण श्रोता से कार्यों को कॉल करें।
    // ...
    // Listen to the current Auth state
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
          // Show guestbook to logged-in users
          guestbookContainer.style.display = 'block';
    
          // Subscribe to the guestbook collection
          subscribeGuestbook();
          // Subcribe to the user's RSVP
          subscribeCurrentRSVP(user);
        } else {
          startRsvpButton.textContent = 'RSVP';
          // Hide guestbook for non-logged-in users
          guestbookContainer.style.display = 'none'
          ;
          // Unsubscribe from the guestbook collection
          unsubscribeGuestbook();
          // Unsubscribe from the guestbook collection
          unsubscribeCurrentRSVP();
        }
      });
    
  4. एक से अधिक उपयोगकर्ता के रूप में प्रवेश करने का प्रयास और प्रत्येक अतिरिक्त हां बटन पर क्लिक के साथ गिनती वृद्धि होती है।

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

3df607d3e0b3c35.png

11. बधाई!

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

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

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

अगले कदम

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

और अधिक जानें

यह कैसे हुआ?

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