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

1 अवलोकन

लक्ष्य

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

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

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

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

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

• npm जो आम तौर पर Node.js के साथ आता है - Node 16+ की अनुशंसा की जाती है
• आपकी पसंद का आईडीई/टेक्स्ट एडिटर, जैसे वेबस्टॉर्म , वीएस कोड , या सबलाइम

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

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

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

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

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

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

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

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

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

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

आपको अनाम लॉगिन सक्षम करना होगा.

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

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

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

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

आपको क्लाउड फायरस्टोर को सक्षम करना होगा। फ़ायरबेस कंसोल के बिल्ड अनुभाग में, फ़ायरस्टोर डेटाबेस पर क्लिक करें। क्लाउड फायरस्टोर फलक में डेटाबेस बनाएं पर क्लिक करें।

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

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 friendlyeats-web निर्देशिका में क्लोन किया जाना चाहिए था। अब से, अपने सभी आदेश इस निर्देशिका से चलाना सुनिश्चित करें:

cd friendlyeats-web/vanilla-js

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

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

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

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

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

npm -g install firebase-tools

2. निम्नलिखित आदेश चलाकर सत्यापित करें कि सीएलआई सही ढंग से स्थापित किया गया है:

firebase --version

सुनिश्चित करें कि फायरबेस सीएलआई का संस्करण v7.4.0 या बाद का है।

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

firebase login

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

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 पर खोलें।

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

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

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

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

डेटा मॉडल

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

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

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

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

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

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

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 के बराबर होता है। तो इस मामले में, हम एक फ़ंक्शन कॉल करेंगे जो रेस्तरां को यूआई से हटा देगा।

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

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

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();
};

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

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

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.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 ऐप को रिफ्रेश करें, फिर सत्यापित करें कि आप कीमत, शहर और श्रेणी के अनुसार फ़िल्टर कर सकते हैं। परीक्षण करते समय, आपको अपने ब्राउज़र के जावास्क्रिप्ट कंसोल में त्रुटियाँ दिखाई देंगी जो इस तरह दिखाई देंगी:

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

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

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

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.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. डिफ़ॉल्ट को निम्नलिखित नियमों से बदलें, फिर प्रकाशित करें पर क्लिक करें।

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

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

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

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

14. [वैकल्पिक] ऐप जांच के साथ लागू करें

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

सबसे पहले, आपको ऐप चेक और रीकैप्चा सक्षम करना होगा।

रीकैप्चा एंटरप्राइज को सक्षम करना

1. क्लाउड कंसोल में, सुरक्षा के अंतर्गत reCaptcha Enterprise ढूंढें और चुनें।
2. संकेत के अनुसार सेवा सक्षम करें, और कुंजी बनाएं पर क्लिक करें।
3. संकेत के अनुसार एक प्रदर्शन नाम इनपुट करें, और अपने प्लेटफ़ॉर्म प्रकार के रूप में वेबसाइट का चयन करें।
4. अपने तैनात यूआरएल को डोमेन सूची में जोड़ें, और सुनिश्चित करें कि "चेकबॉक्स चुनौती का उपयोग करें" विकल्प अचयनित है।
5. कुंजी बनाएं पर क्लिक करें, और जेनरेट की गई कुंजी को सुरक्षित रखने के लिए कहीं संग्रहीत करें। आपको इस चरण में बाद में इसकी आवश्यकता होगी.

ऐप जांच सक्षम करना

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

ऐप चेक अब लागू किया जाना चाहिए! अपने ऐप को रीफ्रेश करें और एक रेस्तरां बनाने/देखने का प्रयास करें। आपको त्रुटि संदेश मिलना चाहिए:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

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

FriendlyEats.View.js फ़ाइल पर नेविगेट करें, और initAppCheck फ़ंक्शन को अपडेट करें और ऐप चेक को आरंभ करने के लिए अपनी reCaptcha कुंजी जोड़ें।

FriendlyEats.prototype.initAppCheck = function() {
    var appCheck = firebase.appCheck();
    appCheck.activate(
    new firebase.appCheck.ReCaptchaEnterpriseProvider(
      /* reCAPTCHA Enterprise site key */
    ),
    true // Set to true to allow auto-refresh.
  );
};

appCheck इंस्टेंस को आपकी कुंजी के साथ ReCaptchaEnterpriseProvider के साथ आरंभ किया गया है, और isTokenAutoRefreshEnabled आपके ऐप में टोकन को ऑटो-रीफ्रेश करने की अनुमति देता है।

स्थानीय परीक्षण को सक्षम करने के लिए, वह अनुभाग ढूंढें जहां ऐप को FriendlyEats.js फ़ाइल में प्रारंभ किया गया है, और FriendlyEats.prototype.initAppCheck फ़ंक्शन में निम्न पंक्ति जोड़ें:

if(isLocalhost) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

यह आपके स्थानीय वेब ऐप के कंसोल में एक डिबग टोकन लॉग करेगा:

App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.

अब, फायरबेस कंसोल में ऐप चेक के ऐप व्यू पर जाएं।

ओवरफ़्लो मेनू पर क्लिक करें, और डिबग टोकन प्रबंधित करें चुनें।

फिर, डिबग टोकन जोड़ें पर क्लिक करें और संकेत के अनुसार डिबग टोकन को अपने कंसोल से पेस्ट करें।

बधाई हो! ऐप चेक अब आपके ऐप में काम करना चाहिए।