क्लाउड फायरस्टोर वेब कोडलैब

1 अवलोकन

लक्ष्य

इस codelab में, आप एक रेस्तरां सिफारिश वेब द्वारा पावर्ड एप्लिकेशन बनाएँगे बादल Firestore

img5.png

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

  • किसी वेब ऐप से Cloud Firestore को डेटा पढ़ें और लिखें
  • क्लाउड फायरस्टोर डेटा में वास्तविक समय में परिवर्तन सुनें
  • Cloud Firestore डेटा सुरक्षित करने के लिए Firebase प्रमाणीकरण और सुरक्षा नियमों का इस्तेमाल करें
  • जटिल क्लाउड फायरस्टोर प्रश्न लिखें

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

इस कोडलैब को शुरू करने से पहले, सुनिश्चित करें कि आपने स्थापित किया है:

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

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

  1. में Firebase कंसोल , परियोजना जोड़ें पर क्लिक करके Firebase परियोजना FriendlyEats नाम।

अपने फायरबेस प्रोजेक्ट के लिए प्रोजेक्ट आईडी याद रखें।

  1. परियोजना बनाएँ क्लिक करें।

हम जिस एप्लिकेशन का निर्माण करने जा रहे हैं, वह वेब पर उपलब्ध कुछ फायरबेस सेवाओं का उपयोग करता है:

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

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

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

हालांकि प्रमाणीकरण इस कोडलैब का फोकस नहीं है, लेकिन हमारे ऐप में प्रमाणीकरण के किसी न किसी रूप का होना महत्वपूर्ण है। हम बेनामी लॉगिन का उपयोग करेंगे - जिसका अर्थ है कि उपयोगकर्ता के लिए प्रेरित किया जा रहा है बिना चुपचाप में हस्ताक्षर किए जाएंगे।

आप बेनामी प्रवेश सक्षम करने की आवश्यकता होगी।

  1. Firebase कंसोल में, बाएं नेविगेशन में खंड बिल्ड खोजें।
  2. प्रमाणीकरण के लिए क्लिक करें, उसके बाद साइन-इन विधि टैब (या यहाँ क्लिक करें सीधे वहाँ जाने के लिए)।
  3. सक्षम बेनामी साइन-इन प्रदाता, फिर सहेजें क्लिक करें।

img7.png

यह एप्लिकेशन को आपके उपयोगकर्ताओं द्वारा वेब ऐप तक पहुंचने पर चुपचाप साइन इन करने की अनुमति देगा। पढ़ने के लिए स्वतंत्र महसूस बेनामी प्रमाणीकरण दस्तावेज़ अधिक जानने के लिए।

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

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

आपको Cloud Firestore को सक्षम करना होगा। Firebase कंसोल की बिल्ड अनुभाग में, इस firestore डाटाबेस पर क्लिक करें। बादल Firestore फलक में डेटाबेस बनाएँ क्लिक करें।

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

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      //
      // WARNING: These rules are insecure! We will replace them with
      // more secure rules later in the codelab
      //
      allow read, write: if request.auth != null;
    }
  }
}

ऊपर दिए गए नियम साइन इन किए हुए उपयोगकर्ताओं के लिए डेटा एक्सेस को प्रतिबंधित करते हैं, जो अनधिकृत उपयोगकर्ताओं को पढ़ने या लिखने से रोकता है। यह सार्वजनिक पहुंच की अनुमति देने से बेहतर है लेकिन अभी भी सुरक्षित नहीं है, हम बाद में कोडलैब में इन नियमों में सुधार करेंगे।

3. नमूना कोड प्राप्त करें

क्लोन GitHub भंडार कमांड लाइन से:

git clone https://github.com/firebase/friendlyeats-web

नमूना कोड 📁 में क्लोन किया जाना चाहिए था friendlyeats-web निर्देशिका। अब से, इस निर्देशिका से अपने सभी आदेश चलाना सुनिश्चित करें:

cd friendlyeats-web

स्टार्टर ऐप आयात करें

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

4. फायरबेस कमांड लाइन इंटरफेस स्थापित करें

फायरबेस कमांड लाइन इंटरफेस (सीएलआई) आपको स्थानीय रूप से अपने वेब ऐप की सेवा करने और अपने वेब ऐप को फायरबेस होस्टिंग पर तैनात करने की अनुमति देता है।

  1. निम्नलिखित npm कमांड चलाकर CLI स्थापित करें:
npm -g install firebase-tools
  1. सत्यापित करें कि निम्न आदेश चलाकर सीएलआई सही ढंग से स्थापित किया गया है:
firebase --version

सुनिश्चित करें कि Firebase CLI का संस्करण v7.4.0 या बाद का संस्करण है।

  1. निम्नलिखित कमांड चलाकर फायरबेस सीएलआई को अधिकृत करें:
firebase login

हमने आपके ऐप की स्थानीय निर्देशिका और फ़ाइलों से फायरबेस होस्टिंग के लिए आपके ऐप के कॉन्फ़िगरेशन को खींचने के लिए वेब ऐप टेम्प्लेट सेट किया है। लेकिन ऐसा करने के लिए, हमें आपके ऐप्लिकेशन को आपके Firebase प्रोजेक्ट से संबद्ध करना होगा।

  1. सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय निर्देशिका तक पहुंच रही है।
  2. निम्न आदेश चलाकर अपने ऐप्लिकेशन को अपने Firebase प्रोजेक्ट से संबद्ध करें:
firebase use --add
  1. संकेत मिलने पर, अपने प्रोजेक्ट ID चयन करें, फिर अपने Firebase परियोजना एक उपनाम दे।

यदि आपके पास एकाधिक वातावरण (उत्पादन, स्टेजिंग, आदि) हैं तो एक उपनाम उपयोगी है। हालांकि, इस codelab के लिए, चलो बस के अन्य नाम का उपयोग करते हैं default

  1. अपनी कमांड लाइन में शेष निर्देशों का पालन करें।

5. स्थानीय सर्वर चलाएँ

हम वास्तव में अपने ऐप पर काम शुरू करने के लिए तैयार हैं! आइए अपना ऐप स्थानीय रूप से चलाएं!

  1. निम्नलिखित फायरबेस सीएलआई कमांड चलाएँ:
firebase emulators:start --only hosting
  1. आपकी कमांड लाइन को निम्नलिखित प्रतिक्रिया प्रदर्शित करनी चाहिए:
hosting: Local server: http://localhost:5000

हम प्रयोग कर रहे हैं Firebase होस्टिंग एमुलेटर स्थानीय स्तर पर हमारे एप्लिकेशन की सेवा के लिए। वेब अनुप्रयोग अब से उपलब्ध होना चाहिए http: // localhost: 5000

  1. पर अपने एप्लिकेशन खोलें http: // localhost: 5000

आपको FriendlyEats की अपनी कॉपी देखनी चाहिए जिसे आपके Firebase प्रोजेक्ट से जोड़ा गया है।

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

img2.png

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

इस सेक्शन में, हम Cloud Firestore को कुछ डेटा लिखेंगे ताकि हम ऐप के UI को पॉप्युलेट कर सकें। इस के माध्यम से मैन्युअल रूप से किया जा सकता है Firebase कंसोल , लेकिन हम एप्लिकेशन को स्वयं एक बुनियादी बादल Firestore लिखने का प्रदर्शन करने में कर देंगे।

डेटा मॉडल

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

img3.png

बाद में, हम एक subcollection कहा जाता है में एक समीक्षा संग्रहीत करेंगे ratings प्रत्येक रेस्तरां के तहत।

img4.png

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

हमारे ऐप में मुख्य मॉडल ऑब्जेक्ट एक रेस्तरां है। चलो कुछ कोड है कि करने के लिए एक रेस्तरां दस्तावेज़ कहते हैं लिखने restaurants संग्रह।

  1. अपने डाउनलोड की गई फ़ाइलें, खुले से scripts/FriendlyEats.Data.js
  2. समारोह का पता लगाएं FriendlyEats.prototype.addRestaurant
  3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

कोड ऊपर करने के लिए एक नया दस्तावेज़ कहते हैं restaurants संग्रह। दस्तावेज़ डेटा एक सादे JavaScript ऑब्जेक्ट से आता है। हम पहले एक बादल Firestore संग्रह के लिए एक संदर्भ हो रही द्वारा यह कर restaurants तो add के डेटा ing।

आइए रेस्तरां जोड़ें!

  1. अपने ब्राउज़र में अपने FriendlyEats ऐप पर वापस जाएं और उसे रीफ़्रेश करें।
  2. क्लिक करें नकली डाटा जोड़ें।

एप्लिकेशन स्वचालित रूप से, रेस्तरां वस्तुओं की एक यादृच्छिक सेट जनरेट फिर अपने फोन करेगा addRestaurant कार्य करते हैं। हालांकि, अगर आप अभी भी अपने वास्तविक वेब अनुप्रयोग में डेटा देख नहीं होगा, क्योंकि हम अभी भी डेटा (codelab के अगले अनुभाग) को पुन: प्राप्त लागू करना होगा।

आप पर नेविगेट करते हैं बादल Firestore टैब Firebase कंसोल में, हालांकि, अब आप में नए दस्तावेज़ों देखना चाहिए restaurants संग्रह!

img6.png

बधाई हो, आपने अभी-अभी एक वेब ऐप से Cloud Firestore को डेटा लिखा है!

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

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

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

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

  1. फाइल करने के लिए वापस जाने के लिए scripts/FriendlyEats.Data.js
  2. समारोह का पता लगाएं FriendlyEats.prototype.getAllRestaurants
  3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

उपरोक्त कोड में, हम एक प्रश्न जो शीर्ष स्तर के संग्रह नामित से 50 रेस्तरां करने के लिए पुनः प्राप्त करेगा निर्माण restaurants है, जो औसत रेटिंग (वर्तमान में सभी शून्य) द्वारा आदेश दिया गया है। के बाद हम इस क्वेरी घोषित, हम यह करने के लिए पारित getDocumentsInQuery() विधि है जो लोड हो रहा है और डेटा प्रतिपादन के लिए जिम्मेदार है।

हम एक स्नैपशॉट श्रोता जोड़कर ऐसा करेंगे।

  1. फाइल करने के लिए वापस जाने के लिए scripts/FriendlyEats.Data.js
  2. समारोह का पता लगाएं FriendlyEats.prototype.getDocumentsInQuery
  3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

FriendlyEats.Data.js

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

उपरोक्त कोड में, query.onSnapshot क्वेरी के परिणाम के लिए एक परिवर्तन होता है हर बार अपने कॉलबैक ट्रिगर किया जाएगा।

  • पहली बार, कॉलबैक क्वेरी के पूरे परिणाम सेट के साथ शुरू हो रहा है - पूरे अर्थ restaurants बादल Firestore से संग्रह। यह तो करने के लिए सभी अलग-अलग दस्तावेज़ों से गुजरता renderer.display कार्य करते हैं।
  • जब एक दस्तावेज़ हटा दी जाती है, change.type के बराबर removed । तो इस मामले में, हम एक फ़ंक्शन को कॉल करेंगे जो रेस्टोरेंट को UI से हटा देता है।

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

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

img5.png

8. प्राप्त करें () डेटा

अब तक, हम उपयोग करने के लिए कैसे दिखाया है onSnapshot वास्तविक समय में अद्यतन पुनः प्राप्त करने के; हालाँकि, यह हमेशा वैसा नहीं होता जैसा हम चाहते हैं। कभी-कभी यह केवल एक बार डेटा लाने के लिए अधिक समझ में आता है।

जब कोई उपयोगकर्ता आपके ऐप में किसी विशिष्ट रेस्तरां में क्लिक करता है तो हम एक ऐसी विधि लागू करना चाहेंगे जो ट्रिगर हो।

  1. आपकी फ़ाइल में वापस जाएं scripts/FriendlyEats.Data.js
  2. समारोह का पता लगाएं FriendlyEats.prototype.getRestaurant
  3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

इस पद्धति को लागू करने के बाद, आप प्रत्येक रेस्तरां के लिए पृष्ठ देख सकेंगे। सूची में बस एक रेस्तरां पर क्लिक करें और आपको रेस्तरां का विवरण पृष्ठ देखना चाहिए:

img1.png

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

9. डेटा को सॉर्ट और फ़िल्टर करें

वर्तमान में, हमारा ऐप रेस्तरां की एक सूची प्रदर्शित करता है, लेकिन उपयोगकर्ता के पास उनकी आवश्यकताओं के आधार पर फ़िल्टर करने का कोई तरीका नहीं है। इस अनुभाग में, आप फ़िल्टरिंग सक्षम करने के लिए Cloud Firestore की उन्नत क्वेरी का उपयोग करेंगे।

यहाँ सब को लाने के लिए एक सरल प्रश्न का एक उदाहरण है Dim Sum रेस्तरां:

var filteredQuery = query.where('category', '==', 'Dim Sum')

जैसा कि इसके नाम से स्पष्ट है, where() विधि हमारे क्वेरी डाउनलोड संग्रह जिसका क्षेत्रों प्रतिबंध हम को पूरा के सदस्य ही कर देगा। इस मामले में, यह केवल रेस्तरां डाउनलोड करेंगे जहां category है Dim Sum

हमारे ऐप में, उपयोगकर्ता "सैन फ्रांसिस्को में पिज्जा" या "लॉस एंजिल्स में समुद्री भोजन लोकप्रियता द्वारा आदेशित" जैसी विशिष्ट क्वेरी बनाने के लिए कई फ़िल्टरों को श्रृंखलाबद्ध कर सकता है।

हम एक ऐसी विधि बनाएंगे जो एक क्वेरी तैयार करेगी जो हमारे उपयोगकर्ताओं द्वारा चुने गए कई मानदंडों के आधार पर हमारे रेस्तरां को फ़िल्टर करेगी।

  1. आपकी फ़ाइल में वापस जाएं scripts/FriendlyEats.Data.js
  2. समारोह का पता लगाएं FriendlyEats.prototype.getFilteredRestaurants
  3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

कोड ऊपर कई कहते हैं where फिल्टर और एक भी orderBy खंड एक यौगिक उपयोगकर्ता इनपुट के आधार पर क्वेरी बनाने के लिए। हमारी क्वेरी अब केवल उन रेस्तरां को लौटाएगी जो उपयोगकर्ता की आवश्यकताओं से मेल खाते हैं।

अपने ब्राउज़र में अपने FriendlyEats ऐप को रीफ़्रेश करें, फिर सत्यापित करें कि आप मूल्य, शहर और श्रेणी के आधार पर फ़िल्टर कर सकते हैं। परीक्षण के दौरान, आपको अपने ब्राउज़र के JavaScript कंसोल में ऐसी त्रुटियां दिखाई देंगी जो इस प्रकार हैं:

The query requires an index. You can create it here: https://console.firebase.google.com/project/.../database/firestore/indexes?create_index=...

ये त्रुटियां इसलिए हैं क्योंकि क्लाउड फायरस्टोर को अधिकांश मिश्रित प्रश्नों के लिए अनुक्रमणिका की आवश्यकता होती है। क्वेरीज़ पर आवश्यक अनुक्रमणिकाएँ Cloud Firestore को तेज़ी से बड़े पैमाने पर बनाए रखती हैं।

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

10. अनुक्रमणिका तैनात करें

अगर हम अपने ऐप में हर पथ का पता नहीं लगाना चाहते हैं और प्रत्येक इंडेक्स निर्माण लिंक का पालन करते हैं, तो हम फायरबेस सीएलआई का उपयोग करके एक साथ कई इंडेक्स आसानी से तैनात कर सकते हैं।

  1. यदि आपके ऐप की डाउनलोड की स्थानीय निर्देशिका में, आप एक मिल जाएगा firestore.indexes.json फ़ाइल।

यह फ़ाइल फ़िल्टर के सभी संभावित संयोजनों के लिए आवश्यक सभी अनुक्रमणिका का वर्णन करती है।

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}
  1. इन अनुक्रमणिकाओं को निम्न आदेश के साथ परिनियोजित करें:
firebase deploy --only firestore:indexes

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

11. लेनदेन में डेटा लिखें

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

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

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

  1. आपकी फ़ाइल में वापस जाएं scripts/FriendlyEats.Data.js
  2. समारोह का पता लगाएं FriendlyEats.prototype.addRating
  3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

FriendlyEats.Data.js

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  var collection = firebase.firestore().collection('restaurants');
  var document = collection.doc(restaurantID);
  var newRatingDocument = document.collection('ratings').doc();

  return firebase.firestore().runTransaction(function(transaction) {
    return transaction.get(document).then(function(doc) {
      var data = doc.data();

      var newAverage =
          (data.numRatings * data.avgRating + rating.rating) /
          (data.numRatings + 1);

      transaction.update(document, {
        numRatings: data.numRatings + 1,
        avgRating: newAverage
      });
      return transaction.set(newRatingDocument, rating);
    });
  });
};

ऊपर ब्लॉक में, हम सांख्यिक के मूल्यों को अद्यतन करने के एक सौदे को गति प्रदान avgRating और numRatings रेस्टोरेंट दस्तावेज़ में। एक ही समय में, हम नए जोड़ने rating को ratings subcollection।

12. अपना डेटा सुरक्षित करें

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

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

आग की दुकान.नियम

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data) 
      && (key in request.resource.data) 
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys()) 
                    && unchanged("name");
      
      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

ये नियम यह सुनिश्चित करने के लिए एक्सेस को प्रतिबंधित करते हैं कि क्लाइंट केवल सुरक्षित परिवर्तन करें। उदाहरण के लिए:

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

वैकल्पिक रूप से फायरबेस कंसोल का उपयोग करने के लिए, आप अपने फायरबेस प्रोजेक्ट में नियमों को लागू करने के लिए फायरबेस सीएलआई का उपयोग कर सकते हैं। Firestore.rules अपने काम करने निर्देशिका में फ़ाइल पहले से ही ऊपर से नियम शामिल हैं। इन नियमों को अपने स्थानीय फाइल सिस्टम (फायरबेस कंसोल का उपयोग करने के बजाय) से लागू करने के लिए, आप निम्न आदेश चलाएंगे:

firebase deploy --only firestore:rules

13. निष्कर्ष

इस कोडलैब में, आपने सीखा कि क्लाउड फायरस्टोर के साथ बुनियादी और उन्नत रीड और राइट कैसे करें, साथ ही सुरक्षा नियमों के साथ डेटा एक्सेस कैसे सुरक्षित करें। आप में पूर्ण समाधान पा सकते हैं quickstarts-js भंडार

क्लाउड फायरस्टोर के बारे में अधिक जानने के लिए, निम्नलिखित संसाधनों पर जाएँ: