Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
इस पेज का अनुवाद Cloud Translation API से किया गया है.
Switch to English

वेब के लिए Firebase पता करें

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

59abdefbcc23bbbe.png

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

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

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

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

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

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

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

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

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



<!-- ... -->

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

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

908cc57ce3a5b5fe.png

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

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

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

a67c239f8cc7f4b5.png

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

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

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

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

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

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

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

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

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

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

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

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

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

फायरबेस पुस्तकालयों को जोड़ें

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

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

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

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

// Firebase App (the core Firebase SDK) is always required
// and must be listed first
import firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

import * as firebaseui from "firebaseui";

प्रोजेक्ट में फायरबेस वेब ऐप जोड़ें

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

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

  1. StackBlitz में वापस, index.js फ़ाइल पर जाएं।
  2. Add Firebase project configuration object here टिप्पणी लाइन में Add Firebase project configuration object here , और टिप्पणी के ठीक नीचे अपना कॉन्फ़िगरेशन स्निपेट चिपकाएँ।
  3. अपने अद्वितीय Firebase प्रोजेक्ट कॉन्फ़िगरेशन का उपयोग करके Firebase सेट करने के लिए initializeApp फ़ंक्शन कॉल जोड़ें।
// ...

// Add Firebase project configuration object here
var 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
firebase.initializeApp(firebaseConfig);

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

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

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

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

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

सबसे पहले, FirebaseUI को इनिशियलाइज़ करने के लिए कोड जोड़ें:

  1. StackBlitz में, index.js फ़ाइल पर जाएं। ध्यान दें कि FirebaseUI कॉन्फ़िगरेशन पहले से ही उपलब्ध है।
  2. index.js, के निचले भाग में index.js, FirebaseUI initialization statement जोड़ें, जैसे:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

अगला, HTML में RSVP बटन जोड़ें:

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

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

ध्यान दें कि index.html फ़ाइल में, आईडी firebaseui-auth-container । यह वह आईडी है जिसे आप अपने लॉगिन को होल्ड करने के लिए फायरबेसियू पास करेंगे।

<!-- ... -->

<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

  1. RSVP बटन पर एक श्रोता सेट करें और FirebaseUI प्रारंभ फ़ंक्शन को कॉल करें। यह FirebaseUI को बताता है कि आप साइन-इन विंडो देखना चाहते हैं। index.js के नीचे निम्नलिखित कोड जोड़ें:
// ... 
// At the bottom

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

ऐप में साइन इन टेस्ट करें

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

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

3024f90b52ad55fe.png

682fc0eca86a99fc.png

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

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

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

  1. StackBlitz में, index.js फ़ाइल पर जाएं।
  2. नीचे दिए गए कोड जोड़ें:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. बटन श्रोता में, जांचें कि क्या वर्तमान उपयोगकर्ता है और उन्हें लॉग आउट करें। ऐसा करने के लिए, निम्न के साथ वर्तमान startRsvpButton.addEventListener को बदलें :
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener("click",
 () => {
    if (firebase.auth().currentUser) {
      // User is signed in; allows user to sign out
      firebase.auth().signOut();
    } else {
      // No user is signed in; allows user to sign in
      ui.start("#firebaseui-auth-container", uiConfig);
    }
});

अब बटन को लॉग इन दिखाना चाहिए, और क्लिक करने पर RSVP पर वापस जाएं।

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

4c540450924f1607.png

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

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

डेटा मॉडल

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

b447950f9f993789.png

Firestore में संदेश जोड़ें

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

संदेश क्षेत्र और भेजें बटन के UI तत्वों को जोड़ने के लिए, निम्नलिखित कार्य करें:

  1. StackBlitz में, index.html फ़ाइल पर जाएँ।
  2. guestbook-container पता लगाएँ, और संदेश इनपुट फ़ील्ड और भेजें बटन के साथ एक फॉर्म बनाने के लिए निम्न HTML जोड़ें।
0 बी 5 बी 975 एफ 90

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

4a892284443cf73d.png

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

  1. StackBlitz में, index.js फ़ाइल पर जाएं।
  2. फ़ाइल के निचले भाग में, निम्न कोड जोड़ें।

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

// ..
// Listen to the form submission
form.addEventListener("submit", (e) => {
 // Prevent the default form redirect
 e.preventDefault();
 // Write a new message to the database collection "guestbook"
 firebase.firestore().collection("guestbook").add({
   text: input.value,
   timestamp: Date.now(),
   name: firebase.auth().currentUser.displayName,
   userId: firebase.auth().currentUser.uid
 })
 // clear message input field
 input.value = ""; 
 // Return false to avoid redirect
 return false;
});

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

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

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

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

  1. सुनिश्चित करें कि आप एप्लिकेशन में साइन इन हैं।
  2. "हे वहाँ!" जैसे संदेश दर्ज करें और फिर भेजें पर क्लिक करें।

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

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

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

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

713870af0b3b63c.png

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

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

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

आप उस कोड को जोड़ेंगे जो ऐप से नए जोड़े गए संदेशों को सुनता है। संदेश दिखाने के लिए सबसे पहले 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. फ़ाइल के निचले भाग में, डेटाबेस में सभी दस्तावेजों (गेस्टबुक संदेश) के माध्यम से लूप में निम्न कोड जोड़ें:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((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);
 });
});

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

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

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

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

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

बधाई हो! आप अपने ऐप में क्लाउड फायरस्टार दस्तावेज़ पढ़ रहे हैं!

ऐप पी समीक्षा

e30df0a9614bae7d.png

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

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

आप फायरबेस कंसोल में क्लाउड फायरस्टार के लिए सुरक्षा नियम लिख सकते हैं:

  1. Firebase कंसोल के डेवलपमेंट सेक्शन में, डेटाबेस पर क्लिक करें और फिर रूल्स टैब चुनें (या सीधे रूल्स टैब पर जाने के लिए यहां क्लिक करें )।
  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 संग्रह onSnapshot श्रोता को एक नए फ़ंक्शन में subscribeGuestbook जिसे subscribeGuestbook कहते हैं। इसके अलावा, onSnapshot फ़ंक्शन के परिणामों को guestbookListener वैरिएबल पर असाइन करें।

इस firestore onSnapshot श्रोता रिटर्न एक सदस्यता समाप्त समारोह है कि आप बाद में स्नैपशॉट श्रोता रद्द करने के लिए उपयोग करने में सक्षम हो जाएगा।

0a5752470
  1. बिना unsubscribeGuestbook नामक एक नया फ़ंक्शन जोड़ें। जांचें कि क्या guestbookListener चर शून्य नहीं है, और फिर श्रोता को रद्द करने के लिए फ़ंक्शन को कॉल करें।
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. अंत में, नए कार्यों को onAuthStateChanged callback (निम्न दो चरणों का उपयोग करें) में जोड़ें।
  2. if (user) के निचले भाग में subscribeGuestbook() जोड़ें।
  3. else विवरण के निचले भाग में unsubscribeGuestbook() जोड़ें।
// ...
firebase.auth().onAuthStateChanged((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();
}
});

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

StackBlitz को बताने के लिए आप StackBlitz के Firebase इंटीग्रेशन का उपयोग कर सकते हैं, जिस Firebase प्रोजेक्ट में आप संपत्ति को तैनात करना चाहते हैं:

  1. यदि आपने StackBlitz में GitHub के साथ पहले से साइन इन नहीं किया है, तो दाईं ओर साइन इन करें पर क्लिक करें और फिर अपने GitHub खाते के क्रेडेंशियल दर्ज करें।

99a41778bb3c194c.png

  • यदि आपके पास पहले से GitHub खाता है, तो अपने GitHub खाते का उपयोग करने के लिए साइन इन करें।
  • यदि आपके पास पहले से GitHub खाता नहीं है, तो उसी ईमेल पते का उपयोग करके एक GitHub खाता बनाएं जिसे आपने Firebase में साइन इन किया था।
  1. अब बाएं पैनल में फायरबेस आइकन होना चाहिए।

2981c2e3ad13c2c1.png 3. Google में साइन इन पर क्लिक करें । उसी ईमेल पते का उपयोग करके साइन इन करें जिसका उपयोग आपने Firebase में साइन इन करने के लिए किया था। 4. फायरबेस परियोजनाओं की सूची से, अपने फायरबेस-वेब-कोडेलैब परियोजना का चयन करें।

StackBlitz के साथ Firebase होस्टिंग पर नियोजित करना वस्तुतः एक-क्लिक ऑपरेशन है:

  1. StackBlitz कार्यक्षेत्र में, पृष्ठ के बाईं ओर स्थित पर क्लिक करें । हाँ, यह बात है। एक कदम! 8fe6c0bfc04c8935.png

फायरबेस होस्टिंग कैसे काम करती है, इसके बारे में अधिक जानने के लिए प्रलेखन पर जाएँ।

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

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

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

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

  1. StackBlitz में, index.html फ़ाइल पर जाएँ।
  2. guestbook-container , हाँ और NO बटन का एक सेट जोड़ें, जैसे:
03 बीडीए 17 ए 10

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

73ca99ca35c13ee7.png

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

  1. StackBlitz में, index.js फ़ाइल पर जाएं।
  2. फ़ाइल के नीचे, RSVP स्थिति को सुनने के लिए निम्न कोड जोड़ें:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. एक नया संग्रह बनाएं जिसे attendees कहा जाता है, फिर एक दस्तावेज़ संदर्भ दर्ज करें यदि या तो RSVP बटन पर क्लिक किया गया है।
  2. उस बटन को क्लिक करने के आधार पर उस संदर्भ को true या false पर सेट करें।

सबसे पहले, rsvpYes :

// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd yes, save a document with attending: true
 userDoc.set({
   attending: true
 }).catch(console.error)
}

फिर, rsvpNo लिए rsvpNo , लेकिन मूल्य false :

rsvpNo.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd no, save a document with attending: false
 userDoc.set({
   attending: false
 }).catch(console.error)
}

नियम जोड़ें

क्योंकि आपके पास पहले से ही कुछ नियम हैं, जो नए डेटा आप बटनों के साथ जोड़ रहे हैं, वे अस्वीकृत होने वाले हैं। आपको 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;
    }
  }
}

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

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

0733341 सीएफ 0

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

RSVP स्टेटस पढ़ें

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

  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. फ़ाइल के नीचे, RSVP स्थिति को सुनने के लिए और YES क्लिकों को गिनने के लिए निम्न कोड जोड़ें।
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. अंत में, आइए वर्तमान स्थिति के अनुरूप बटन को उजागर करें। जांचें कि क्या वर्तमान प्रमाणीकरण यूआईडी में attendees संग्रह में एक प्रविष्टि है, और फिर clicked करने के लिए कक्षा सेट करें।
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((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";
     }
   }
 });
}
  1. इसके अलावा, सदस्यता समाप्त करने के लिए एक समारोह बनाते हैं। उपयोगकर्ता द्वारा लॉग आउट करने पर इसका उपयोग किया जाएगा।
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. ऑथेंटिकेशन श्रोता से कार्यों को कॉल करें।
// ...

// Listen to the current Auth state
firebase.auth().onAuthStateChanged((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 guestbook collection
  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();

}
});
  1. कई उपयोगकर्ताओं के रूप में लॉग इन करने का प्रयास करें और प्रत्येक अतिरिक्त YES बटन क्लिक के साथ गिनती वृद्धि देखें।

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

3df607d3e0b3c35.png

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

हमने जो कवर किया है

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

अगले कदम

और अधिक जानें

यह कैसे हुआ?

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