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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

1 अवलोकन

लक्ष्य

इस कोडलैब में, आप Cloud Firestore द्वारा संचालित एक रेस्तरां अनुशंसा वेब ऐप का निर्माण करेंगे।

img5.png

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

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

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

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

  • npm जो आमतौर पर Node.js के साथ आता है - Node v8 की सिफारिश की जाती है
  • आपकी पसंद का IDE/पाठ संपादक, जैसे WebStorm , Atom , VS Code , या Sublime

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

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

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

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

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

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

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

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

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

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

आपको बेनामी लॉगिन को सक्षम करना होगा।

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

img7.png

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

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

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

आपको Cloud Firestore को सक्षम करना होगा। फायरबेस कंसोल के बिल्ड सेक्शन में, फायरस्टोर डेटाबेस पर क्लिक करें। क्लाउड फायरस्टोर फलक में डेटाबेस बनाएं पर क्लिक करें।

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

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

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

अपने IDE (WebStorm, Atom, Sublime, Visual Studio Code...) का उपयोग करके 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. संकेत मिलने पर, अपना प्रोजेक्ट आईडी चुनें, फिर अपने फायरबेस प्रोजेक्ट को एक उपनाम दें।

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

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

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

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

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

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

  1. अपना ऐप http://localhost:5000 पर खोलें।

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

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

img2.png

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

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

डेटा मॉडल

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

img3.png

बाद में, हम प्रत्येक समीक्षा को प्रत्येक रेस्तरां के अंतर्गत 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 संग्रह में एक नया दस्तावेज़ जोड़ता है। दस्तावेज़ डेटा एक सादे जावास्क्रिप्ट ऑब्जेक्ट से आता है। हम ऐसा पहले क्लाउड फायरस्टोर संग्रह restaurants का संदर्भ प्राप्त करके करते हैं और फिर डेटा add हैं।

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

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

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

यदि आप फायरबेस कंसोल में क्लाउड फायरस्टोर टैब पर नेविगेट करते हैं, हालांकि, अब आपको 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);
};

उपरोक्त कोड में, हम एक क्वेरी का निर्माण करते हैं, जो restaurants नाम के शीर्ष-स्तरीय संग्रह से 50 रेस्तरां तक ​​पुनर्प्राप्त करेगी, जो औसत रेटिंग (वर्तमान में सभी शून्य) द्वारा आदेशित हैं। इस क्वेरी को घोषित करने के बाद, हम इसे 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 संग्रह। इसके बाद यह सभी अलग-अलग दस्तावेज़ों को 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 रेटिंग के संख्यात्मक मूल्यों को अपडेट करने के लिए एक लेनदेन को ट्रिगर करते हैं। साथ ही, हम ratings उपसंग्रह में नई rating जोड़ते हैं।

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

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

  1. फायरबेस कंसोल के बिल्ड सेक्शन में, फायरस्टोर डेटाबेस पर क्लिक करें।
  2. क्लाउड फायरस्टोर अनुभाग में नियम टैब पर क्लिक करें (या सीधे वहां जाने के लिए यहां क्लिक करें )।
  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. निष्कर्ष

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

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