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

1 अवलोकन

लक्ष्य

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cloud 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

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

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

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

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

1. निम्नलिखित एनपीएम कमांड चलाकर सीएलआई स्थापित करें:

npm -g install firebase-tools

2. सत्यापित करें कि निम्न कमांड चलाकर CLI सही तरीके से स्थापित किया गया है:

firebase --version

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

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

firebase login

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

4. सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय निर्देशिका तक पहुंच रही है।
5. निम्न आदेश चलाकर अपने ऐप को अपने फायरबेस प्रोजेक्ट से संबद्ध करें:

firebase use --add

6. संकेत मिलने पर, अपनी प्रोजेक्ट आईडी चुनें, फिर अपने फायरबेस प्रोजेक्ट को एक उपनाम दें।

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

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

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

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

1. निम्नलिखित फायरबेस सीएलआई कमांड चलाएँ:

firebase emulators:start --only hosting

2. आपकी कमांड लाइन को निम्नलिखित प्रतिक्रिया प्रदर्शित करनी चाहिए:

hosting: Local server: http://localhost:5000

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

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

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

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

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

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

डेटा मॉडल

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

बाद में, हम प्रत्येक समीक्षा को प्रत्येक रेस्तरां के अंतर्गत ratings नामक एक उपसंग्रह में संग्रहीत करेंगे।

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

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

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

फ्रेंडलीईट्स.डेटा.जेएस

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

उपरोक्त कोड restaurants संग्रह में एक नया दस्तावेज़ जोड़ता है। दस्तावेज़ डेटा एक सादे जावास्क्रिप्ट ऑब्जेक्ट से आता है। हम पहले क्लाउड फायरस्टोर संग्रह restaurants का संदर्भ प्राप्त करके ऐसा करते हैं, फिर डेटा add ।

चलो रेस्तरां जोड़ें!

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

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

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

बधाई हो, आपने अभी-अभी एक वेब ऐप से क्लाउड फायरस्टोर को डेटा लिखा है!

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

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

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

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

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

फ्रेंडलीईट्स.डेटा.जेएस

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.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 से हटा देता है।

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

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

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

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

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

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

फ्रेंडलीईट्स.डेटा.जेएस

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

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

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

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

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

यहां सभी Dim Sum रेस्तरां लाने के लिए एक सरल क्वेरी का उदाहरण दिया गया है:

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

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

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

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

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

फ्रेंडलीईट्स.डेटा.जेएस

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 क्लॉज जोड़ता है। हमारी क्वेरी अब केवल वही रेस्तरां लौटाएगी जो उपयोगकर्ता की आवश्यकताओं से मेल खाते हों।

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

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

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

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

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

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

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

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

firestore.indexes.json

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

   ...

 ]
}

2. निम्न आदेश के साथ इन अनुक्रमणिकाओं को परिनियोजित करें:

firebase deploy --only firestore:indexes

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

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

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

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

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

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

फ्रेंडलीईट्स.डेटा.जेएस

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

firestore.rules

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. निष्कर्ष

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

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

• क्लाउड फायरस्टोर का परिचय
• डेटा संरचना का चयन
• क्लाउड फायरस्टोर वेब नमूने