फायरबेस एमुलेटर सुइट के साथ स्थानीय विकास

1. शुरू करने से पहले

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

आवश्यक शर्तें

  • एक साधारण संपादक जैसे विज़ुअल स्टूडियो कोड, एटम, या सबलाइम टेक्स्ट
  • Node.js 10.0.0 या उच्चतर (Node.js स्थापित करने के लिए, nvm का उपयोग करें , अपने संस्करण की जांच करने के लिए, node --version चलाएं)
  • जावा 7 या उच्चतर (जावा स्थापित करने के लिए इन निर्देशों का उपयोग करें , अपने संस्करण की जांच करने के लिए, java -version चलाएं)

आप क्या करोगे

इस कोडलैब में, आप एक सरल ऑनलाइन शॉपिंग ऐप चलाएंगे और डीबग करेंगे जो कई फायरबेस सेवाओं द्वारा संचालित है:

  • क्लाउड फायरस्टोर: वास्तविक समय क्षमताओं वाला विश्व स्तर पर स्केलेबल, सर्वर रहित, NoSQL डेटाबेस।
  • क्लाउड फ़ंक्शंस : एक सर्वर रहित बैकएंड कोड जो घटनाओं या HTTP अनुरोधों के जवाब में चलता है।
  • फायरबेस प्रमाणीकरण : एक प्रबंधित प्रमाणीकरण सेवा जो अन्य फायरबेस उत्पादों के साथ एकीकृत होती है।
  • फायरबेस होस्टिंग : वेब ऐप्स के लिए तेज़ और सुरक्षित होस्टिंग।

स्थानीय विकास को सक्षम करने के लिए आप ऐप को एमुलेटर सूट से कनेक्ट करेंगे।

2589e2f95b74fa88.png

आप यह भी सीखेंगे कि कैसे:

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

2. सेटअप

स्रोत कोड प्राप्त करें

इस कोडलैब में, आप द फायर स्टोर नमूने के एक संस्करण के साथ शुरुआत करते हैं जो लगभग पूरा हो चुका है, इसलिए सबसे पहले आपको स्रोत कोड को क्लोन करना होगा:

$ git clone https://github.com/firebase/emulators-codelab.git

फिर कोडलैब निर्देशिका में जाएँ, जहाँ आप इस कोडलैब के शेष भाग के लिए काम करेंगे:

$ cd emulators-codelab/codelab-initial-state

अब, निर्भरताएँ स्थापित करें ताकि आप कोड चला सकें। यदि आप धीमे इंटरनेट कनेक्शन पर हैं तो इसमें एक या दो मिनट लग सकते हैं:

# Move into the functions directory
$ cd functions

# Install dependencies
$ npm install

# Move back into the previous directory
$ cd ../

फायरबेस सीएलआई प्राप्त करें

एमुलेटर सूट फायरबेस सीएलआई (कमांड-लाइन इंटरफ़ेस) का हिस्सा है जिसे निम्नलिखित कमांड के साथ आपकी मशीन पर स्थापित किया जा सकता है:

$ npm install -g firebase-tools

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

$ firebase --version
9.6.0

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

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

अब हमें इस कोड को आपके फायरबेस प्रोजेक्ट से कनेक्ट करना होगा। सबसे पहले फायरबेस सीएलआई में लॉग इन करने के लिए निम्नलिखित कमांड चलाएँ:

$ firebase login

इसके बाद प्रोजेक्ट उपनाम बनाने के लिए निम्न कमांड चलाएँ। $YOUR_PROJECT_ID अपने फायरबेस प्रोजेक्ट की आईडी से बदलें।

$ firebase use $YOUR_PROJECT_ID

अब आप ऐप चलाने के लिए तैयार हैं!

3. एमुलेटर चलाएँ

इस अनुभाग में, आप ऐप को स्थानीय रूप से चलाएंगे। इसका मतलब यह है कि एम्यूलेटर सुइट को बूट करने का समय आ गया है।

एम्यूलेटर प्रारंभ करें

कोडलैब स्रोत निर्देशिका के अंदर से, एमुलेटर शुरू करने के लिए निम्नलिखित कमांड चलाएँ:

$ firebase emulators:start --import=./seed

आपको इस तरह कुछ आउटपुट देखना चाहिए:

$ firebase emulators:start --import=./seed
i  emulators: Starting emulators: auth, functions, firestore, hosting
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: database, pubsub
i  firestore: Importing data from /Users/samstern/Projects/emulators-codelab/codelab-initial-state/seed/firestore_export/firestore_export.overall_export_metadata
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://127.0.0.1:5000
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/Users/samstern/Projects/emulators-codelab/codelab-initial-state/functions" for Cloud Functions...
✔  functions[calculateCart]: firestore function initialized.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://127.0.0.1:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ 127.0.0.1:5000 │ n/a                             │
└────────────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at 127.0.0.1:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

एक बार जब आप सभी एमुलेटर प्रारंभ संदेश देख लेते हैं, तो ऐप उपयोग के लिए तैयार है।

वेब ऐप को एमुलेटर से कनेक्ट करें

लॉग में तालिका के आधार पर हम देख सकते हैं कि क्लाउड फायरस्टोर एमुलेटर पोर्ट 8080 पर सुन रहा है और प्रमाणीकरण एमुलेटर पोर्ट 9099 पर सुन रहा है।

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ 127.0.0.1:5000 │ n/a                             │
└────────────────┴────────────────┴─────────────────────────────────┘

आइए आपके फ्रंटएंड कोड को प्रोडक्शन के बजाय एम्यूलेटर से कनेक्ट करें। public/js/homepage.js फ़ाइल खोलें और onDocumentReady फ़ंक्शन ढूंढें। हम देख सकते हैं कि कोड मानक फायरस्टोर और ऑथ उदाहरणों तक पहुंचता है:

public/js/homepage.js

  const auth = firebaseApp.auth();
  const db = firebaseApp.firestore();

आइए स्थानीय अनुकरणकर्ताओं को इंगित करने के लिए db और auth ऑब्जेक्ट को अपडेट करें:

public/js/homepage.js

  const auth = firebaseApp.auth();
  const db = firebaseApp.firestore();

  // ADD THESE LINES
  if (location.hostname === "127.0.0.1") {
    console.log("127.0.0.1 detected!");
    auth.useEmulator("http://127.0.0.1:9099");
    db.useEmulator("127.0.0.1", 8080);
  }

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

एमुलेटरयूआई खोलें

अपने वेब ब्राउज़र में, http://127.0.0.1:4000/ पर जाएँ। आपको एम्यूलेटर सुइट यूआई देखना चाहिए।

एमुलेटर यूआई होम स्क्रीन

फायरस्टोर एम्यूलेटर के लिए यूआई देखने के लिए क्लिक करें। --import ध्वज के साथ आयातित डेटा के कारण items संग्रह में पहले से ही डेटा शामिल है।

4ef88d0148405d36.png

4. ऐप चलाएं

ऐप खोलें

अपने वेब ब्राउज़र में, http://127.0.0.1:5000 पर नेविगेट करें और आपको अपनी मशीन पर स्थानीय रूप से चलने वाला फायर स्टोर देखना चाहिए!

939f87946bac2ee4.png

ऐप का उपयोग करें

मुखपृष्ठ पर एक आइटम चुनें और कार्ट में जोड़ें पर क्लिक करें। दुर्भाग्य से, आपको निम्नलिखित त्रुटि का सामना करना पड़ेगा:

a11bd59933a8e885.png

आइए उस बग को ठीक करें! क्योंकि सब कुछ एमुलेटर में चल रहा है, हम प्रयोग कर सकते हैं और वास्तविक डेटा को प्रभावित करने की चिंता नहीं कर सकते।

5. ऐप को डीबग करें

बग ढूंढें

ठीक है, आइए Chrome डेवलपर कंसोल देखें। कंसोल पर त्रुटि देखने के लिए Control+Shift+J (विंडोज़, लिनक्स, क्रोम ओएस) या Command+Option+J (मैक) दबाएँ:

74c45df55291dab1.png

ऐसा लगता है जैसे addToCart विधि में कुछ त्रुटि थी, आइए उस पर एक नज़र डालें। हम उस विधि में uid नामक किसी चीज़ तक पहुंचने का प्रयास कहां करते हैं और यह null क्यों होगा? अभी यह विधि public/js/homepage.js में इस तरह दिखती है:

public/js/homepage.js

  addToCart(id, itemData) {
    console.log("addToCart", id, JSON.stringify(itemData));
    return this.db
      .collection("carts")
      .doc(this.auth.currentUser.uid)
      .collection("items")
      .doc(id)
      .set(itemData);
  }

अहा! हम ऐप में साइन इन नहीं हैं. फायरबेस प्रमाणीकरण दस्तावेज़ों के अनुसार, जब हम साइन इन नहीं होते हैं, तो auth.currentUser null है। आइए उसके लिए एक चेक जोड़ें:

public/js/homepage.js

  addToCart(id, itemData) {
    // ADD THESE LINES
    if (this.auth.currentUser === null) {
      this.showError("You must be signed in!");
      return;
    }

    // ...
  }

ऐप का परीक्षण करें

अब, पेज को रिफ्रेश करें और फिर Add to Cart पर क्लिक करें। इस बार आपको एक अच्छी त्रुटि मिलनी चाहिए:

c65f6c05588133f7.png

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

हालाँकि, ऐसा नहीं लगता कि संख्याएँ बिल्कुल भी सही हैं:

239f26f02f959eef.png

चिंता न करें, हम जल्द ही उस बग को ठीक कर देंगे। सबसे पहले, आइए गहराई से जानें कि जब आपने अपने कार्ट में कोई आइटम जोड़ा तो वास्तव में क्या हुआ।

6. स्थानीय फ़ंक्शन ट्रिगर

कार्ट में जोड़ें पर क्लिक करने से घटनाओं की एक श्रृंखला शुरू हो जाती है जिसमें कई एमुलेटर शामिल होते हैं। फायरबेस सीएलआई लॉग में, आपको अपने कार्ट में कोई आइटम जोड़ने के बाद निम्नलिखित संदेशों जैसा कुछ देखना चाहिए:

i  functions: Beginning execution of "calculateCart"
i  functions: Finished "calculateCart" in ~1s

उन लॉग और आपके द्वारा देखे गए यूआई अपडेट को उत्पन्न करने के लिए चार प्रमुख घटनाएं हुईं:

68c9323f2ad10f7a.png

1) फायरस्टोर राइट - क्लाइंट

फायरस्टोर संग्रह /carts/{cartId}/items/{itemId}/ में एक नया दस्तावेज़ जोड़ा गया है। आप इस कोड को public/js/homepage.js के अंदर addToCart फ़ंक्शन में देख सकते हैं:

public/js/homepage.js

  addToCart(id, itemData) {
    // ...
    console.log("addToCart", id, JSON.stringify(itemData));
    return this.db
      .collection("carts")
      .doc(this.auth.currentUser.uid)
      .collection("items")
      .doc(id)
      .set(itemData);
  }

2) क्लाउड फ़ंक्शन ट्रिगर हुआ

क्लाउड फ़ंक्शन calculateCart onWrite ट्रिगर का उपयोग करके कार्ट आइटम पर होने वाले किसी भी लेखन ईवेंट (बनाएं, अपडेट करें या हटाएं) को सुनता है, जिसे आप functions/index.js में देख सकते हैं:

फ़ंक्शन/index.js

exports.calculateCart = functions.firestore
    .document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      try {
        let totalPrice = 125.98;
        let itemCount = 8;

        const cartRef = db.collection("carts").doc(context.params.cartId);

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    }
);

3) फायरस्टोर राइट - एडमिन

calculateCart फ़ंक्शन कार्ट में मौजूद सभी आइटमों को पढ़ता है और कुल मात्रा और कीमत जोड़ता है, फिर यह "कार्ट" दस्तावेज़ को नए योग के साथ अपडेट करता है (ऊपर cartRef.update(...) देखें)।

4) फायरस्टोर रीड - क्लाइंट

कार्ट में परिवर्तनों के बारे में अपडेट प्राप्त करने के लिए वेब फ्रंटएंड की सदस्यता ली गई है। क्लाउड फ़ंक्शन द्वारा नए योग लिखने और यूआई को अपडेट करने के बाद इसे वास्तविक समय का अपडेट मिलता है, जैसा कि आप public/js/homepage.js में देख सकते हैं:

public/js/homepage.js

this.cartUnsub = cartRef.onSnapshot(cart => {
   // The cart document was changed, update the UI
   // ...
});

संक्षिप्त

अच्छा काम! आपने बस एक पूरी तरह से स्थानीय ऐप सेट किया है जो पूरी तरह से स्थानीय परीक्षण के लिए तीन अलग-अलग फायरबेस एमुलेटर का उपयोग करता है।

db82eef1706c9058.gif

लेकिन रुकिए, और भी बहुत कुछ है! अगले भाग में आप सीखेंगे:

  • फायरबेस एमुलेटर का उपयोग करने वाले यूनिट परीक्षण कैसे लिखें।
  • अपने सुरक्षा नियमों को डीबग करने के लिए फायरबेस एमुलेटर का उपयोग कैसे करें।

7. अपने ऐप के अनुरूप सुरक्षा नियम बनाएं

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

संपादक में, फ़ाइल emulators-codelab/codelab-initial-state/firestore.rules खोलें। आप देखेंगे कि हमारे नियमों में तीन मुख्य अनुभाग हैं:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // User's cart metadata
    match /carts/{cartID} {
      // TODO: Change these! Anyone can read or write.
      allow read, write: if true;
    }

    // Items inside the user's cart
    match /carts/{cartID}/items/{itemID} {
      // TODO: Change these! Anyone can read or write.
      allow read, write: if true;
    }

    // All items available in the store. Users can read
    // items but never write them.
    match /items/{itemID} {
      allow read: if true;
    }
  }
}

अभी कोई भी हमारे डेटाबेस में डेटा पढ़ और लिख सकता है! हम यह सुनिश्चित करना चाहते हैं कि केवल वैध परिचालन ही हो और हम कोई संवेदनशील जानकारी लीक न करें।

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

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // User's cart metadata
    match /carts/{cartID} {
      // UPDATE THIS LINE
      allow read, write: if false;
    }

    // Items inside the user's cart
    match /carts/{cartID}/items/{itemID} {
      // UPDATE THIS LINE
      allow read, write: if false;
    }

    // All items available in the store. Users can read
    // items but never write them.
    match /items/{itemID} {
      allow read: if true;
    }
  }
}

8. एमुलेटर और परीक्षण चलाएँ

एमुलेटर प्रारंभ करें

कमांड लाइन पर, सुनिश्चित करें कि आप emulators-codelab/codelab-initial-state/ में हैं। हो सकता है कि आपके पास अभी भी पिछले चरणों से चलने वाले एमुलेटर हों। यदि नहीं, तो एमुलेटर फिर से शुरू करें:

$ firebase emulators:start --import=./seed

एक बार जब एमुलेटर चल रहे हों, तो आप उनके विरुद्ध स्थानीय स्तर पर परीक्षण चला सकते हैं।

परीक्षण चलाएँ

निर्देशिका emulators-codelab/codelab-initial-state/ से एक नए टर्मिनल टैब में कमांड लाइन पर

सबसे पहले फ़ंक्शंस निर्देशिका में जाएँ (हम कोडलैब के शेष भाग के लिए यहीं रहेंगे):

$ cd functions

अब फ़ंक्शंस निर्देशिका में मोचा परीक्षण चलाएँ, और आउटपुट के शीर्ष पर स्क्रॉल करें:

# Run the tests
$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    1) can be created and updated by the cart owner
    2) can be read only by the cart owner

  shopping cart items
    3) can be read only by the cart owner
    4) can be added only by the cart owner

  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items


  0 passing (364ms)
  1 pending
  4 failing

अभी हमें चार असफलताएँ मिली हैं। जैसे ही आप नियम फ़ाइल बनाते हैं, आप अधिक परीक्षणों को पास होते देखकर प्रगति को माप सकते हैं।

9. सुरक्षित कार्ट पहुंच

पहली दो विफलताएँ "शॉपिंग कार्ट" परीक्षण हैं जो इसका परीक्षण करती हैं:

  • उपयोगकर्ता केवल अपनी स्वयं की कार्ट बना और अपडेट कर सकते हैं
  • उपयोगकर्ता केवल अपनी कार्ट ही पढ़ सकते हैं

फ़ंक्शन/परीक्षण.जेएस

  it('can be created and updated by the cart owner', async () => {
    // Alice can create her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    }));

    // Bob can't create Alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    }));

    // Alice can update her own cart with a new total
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").update({
      total: 1
    }));

    // Bob can't update Alice's cart with a new total
    await firebase.assertFails(bobDb.doc("carts/alicesCart").update({
      total: 1
    }));
  });

  it("can be read only by the cart owner", async () => {
    // Setup: Create Alice's cart as admin
    await admin.doc("carts/alicesCart").set({
      ownerUID: "alice",
      total: 0
    });

    // Alice can read her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart").get());

    // Bob can't read Alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart").get());
  });

आइए इन परीक्षाओं को पास करें। संपादक में, सुरक्षा नियम फ़ाइल, firestore.rules खोलें, और match /carts/{cartID} के भीतर विवरण अपडेट करें:

firestore.rules

rules_version = '2';
service cloud.firestore {
    // UPDATE THESE LINES
    match /carts/{cartID} {
      allow create: if request.auth.uid == request.resource.data.ownerUID;
      allow read, update, delete: if request.auth.uid == resource.data.ownerUID;
    }

    // ...
  }
}

ये नियम अब केवल कार्ट मालिक को पढ़ने और लिखने की अनुमति देते हैं।

आने वाले डेटा और उपयोगकर्ता के प्रमाणीकरण को सत्यापित करने के लिए, हम दो ऑब्जेक्ट का उपयोग करते हैं जो प्रत्येक नियम के संदर्भ में उपलब्ध हैं:

  • request ऑब्जेक्ट में उस ऑपरेशन के बारे में डेटा और मेटाडेटा शामिल है जिसका प्रयास किया जा रहा है।
  • यदि कोई फायरबेस प्रोजेक्ट फायरबेस प्रमाणीकरण का उपयोग कर रहा है, तो request.auth ऑब्जेक्ट उस उपयोगकर्ता का वर्णन करता है जो अनुरोध कर रहा है।

10. कार्ट एक्सेस का परीक्षण करें

जब भी firestore.rules सहेजा जाता है तो एमुलेटर सुइट स्वचालित रूप से नियमों को अपडेट कर देता है। आप नियम अपडेट किए गए संदेश के लिए एम्यूलेटर चलाने वाले टैब में देखकर यह पुष्टि कर सकते हैं कि एमुलेटर ने Rules updated :

5680da418b420226.png

परीक्षण दोबारा चलाएँ, और जाँचें कि पहले दो परीक्षण अब पास हो गए हैं:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    ✓ can be created and updated by the cart owner (195ms)
    ✓ can be read only by the cart owner (136ms)

  shopping cart items
    1) can be read only by the cart owner
    2) can be added only by the cart owner

  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items

  2 passing (482ms)
  1 pending
  2 failing

अच्छा काम! अब आपने शॉपिंग कार्ट तक पहुंच सुरक्षित कर ली है। चलिए अगली असफल परीक्षा की ओर बढ़ते हैं।

11. यूआई में "कार्ट में जोड़ें" प्रवाह की जांच करें

अभी, हालांकि कार्ट मालिक अपने कार्ट में पढ़ते और लिखते हैं, लेकिन वे अपने कार्ट में अलग-अलग आइटम को पढ़ या लिख ​​नहीं सकते हैं। ऐसा इसलिए है क्योंकि मालिकों के पास कार्ट दस्तावेज़ तक पहुंच है, लेकिन उनके पास कार्ट के आइटम उपसंग्रह तक पहुंच नहीं है।

यह उपयोगकर्ताओं के लिए एक टूटी हुई स्थिति है।

वेब यूआई पर वापस लौटें, जो http://127.0.0.1:5000, और अपने कार्ट में कुछ जोड़ने का प्रयास करें। आपको एक Permission Denied त्रुटि मिलती है, जो डिबग कंसोल से दिखाई देती है, क्योंकि हमने अभी तक उपयोगकर्ताओं को items उपसंग्रह में बनाए गए दस्तावेज़ों तक पहुंच प्रदान नहीं की है।

12. कार्ट आइटम तक पहुंच की अनुमति दें

ये दो परीक्षण पुष्टि करते हैं कि उपयोगकर्ता केवल अपने कार्ट से आइटम जोड़ सकते हैं या पढ़ सकते हैं:

  it("can be read only by the cart owner", async () => {
    // Alice can read items in her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart/items/milk").get());

    // Bob can't read items in alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart/items/milk").get())
  });

  it("can be added only by the cart owner",  async () => {
    // Alice can add an item to her own cart
    await firebase.assertSucceeds(aliceDb.doc("carts/alicesCart/items/lemon").set({
      name: "lemon",
      price: 0.99
    }));

    // Bob can't add an item to alice's cart
    await firebase.assertFails(bobDb.doc("carts/alicesCart/items/lemon").set({
      name: "lemon",
      price: 0.99
    }));
  });

इसलिए हम एक नियम लिख सकते हैं जो पहुंच की अनुमति देता है यदि वर्तमान उपयोगकर्ता के पास कार्ट दस्तावेज़ पर ओनरयूआईडी के समान यूआईडी है। चूँकि create, update, delete के लिए अलग-अलग नियम निर्दिष्ट करने की आवश्यकता नहीं है, आप एक write नियम का उपयोग कर सकते हैं, जो डेटा को संशोधित करने वाले सभी अनुरोधों पर लागू होता है।

आइटम उपसंग्रह में दस्तावेज़ों के लिए नियम अद्यतन करें। कंडीशनल में get फायरस्टोर से एक मान पढ़ रहा है - इस मामले में, कार्ट दस्तावेज़ पर ownerUID

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ...

    // UPDATE THESE LINES
    match /carts/{cartID}/items/{itemID} {
      allow read, write: if get(/databases/$(database)/documents/carts/$(cartID)).data.ownerUID == request.auth.uid;
    }

    // ...
  }
}

13. कार्ट आइटम एक्सेस का परीक्षण करें

अब हम परीक्षण दोबारा चला सकते हैं. आउटपुट के शीर्ष तक स्क्रॉल करें और जांचें कि अधिक परीक्षण पास हुए हैं:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping carts
    ✓ can be created and updated by the cart owner (195ms)
    ✓ can be read only by the cart owner (136ms)

  shopping cart items
    ✓ can be read only by the cart owner (111ms)
    ✓ can be added only by the cart owner


  adding an item to the cart recalculates the cart total. 
    - should sum the cost of their items


  4 passing (401ms)
  1 pending

अच्छा! अब हमारे सभी टेस्ट पास हो गए हैं. हमारा एक परीक्षण लंबित है, लेकिन हम कुछ ही चरणों में उस तक पहुंच जाएंगे।

14. "कार्ट में जोड़ें" प्रवाह को दोबारा जांचें

वेब फ्रंट एंड ( http://127.0.0.1:5000 ) पर लौटें और कार्ट में एक आइटम जोड़ें। यह पुष्टि करने के लिए एक महत्वपूर्ण कदम है कि हमारे परीक्षण और नियम ग्राहक द्वारा आवश्यक कार्यक्षमता से मेल खाते हैं। (याद रखें कि पिछली बार जब हमने यूआई को आज़माया था तो उपयोगकर्ता अपने कार्ट में आइटम जोड़ने में असमर्थ थे!)

69ad26cee520bf24.png

जब firestore.rules सहेजा जाता है तो क्लाइंट स्वचालित रूप से नियमों को पुनः लोड करता है। तो, कार्ट में कुछ जोड़ने का प्रयास करें।

संक्षिप्त

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

ba5440b193e75967.gif

लेकिन रुकिए, और भी बहुत कुछ है!

यदि आप जारी रखेंगे तो आप सीखेंगे:

  • फ़ायरस्टोर ईवेंट द्वारा ट्रिगर किए गए फ़ंक्शन को कैसे लिखें
  • ऐसे परीक्षण कैसे बनाएं जो कई एमुलेटरों पर काम करते हों

15. क्लाउड फ़ंक्शंस परीक्षण सेट करें

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

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

संपादक में, emulators-codelab/codelab-initial-state/functions/test.js फ़ाइल खोलें और फ़ाइल में अंतिम परीक्षण तक स्क्रॉल करें। अभी, इसे लंबित के रूप में चिह्नित किया गया है:

//  REMOVE .skip FROM THIS LINE
describe.skip("adding an item to the cart recalculates the cart total. ", () => {
  // ...

  it("should sum the cost of their items", async () => {
    ...
  });
});

परीक्षण को सक्षम करने के लिए, .skip हटा दें, ताकि यह इस तरह दिखे:

describe("adding an item to the cart recalculates the cart total. ", () => {
  // ...

  it("should sum the cost of their items", async () => {
    ...
  });
});

इसके बाद, फ़ाइल के शीर्ष पर REAL_FIREBASE_PROJECT_ID वैरिएबल ढूंढें और इसे अपनी वास्तविक फायरबेस प्रोजेक्ट आईडी में बदलें।

// CHANGE THIS LINE
const REAL_FIREBASE_PROJECT_ID = "changeme";

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

d6d0429b700d2b21.png

16. फ़ंक्शंस परीक्षणों के माध्यम से चलें

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

एक कार्ट बनाएं

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

it("should sum the cost of their items", async () => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    await aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    ...
  });

फ़ंक्शन को ट्रिगर करें

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

it("should sum the cost of their items", async () => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    await aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    //  Trigger calculateCart by adding items to the cart
    const aliceItemsRef = aliceCartRef.collection("items");
    await aliceItemsRef.doc("doc1").set({name: "nectarine", price: 2.99});
    await aliceItemsRef.doc("doc2").set({ name: "grapefruit", price: 6.99 });

    ...
    });
  });

परीक्षण अपेक्षाएँ निर्धारित करें

कार्ट दस्तावेज़ में किसी भी बदलाव के लिए श्रोता को पंजीकृत करने के लिए onSnapshot() का उपयोग करें। onSnapshot() एक फ़ंक्शन लौटाता है जिसे आप श्रोता को अपंजीकृत करने के लिए कॉल कर सकते हैं।

इस परीक्षण के लिए, दो आइटम जोड़ें जिनकी कुल लागत $9.98 है। फिर, जांचें कि कार्ट में अपेक्षित itemCount और totalPrice है या नहीं। यदि हां, तो फ़ंक्शन ने अपना काम किया।

it("should sum the cost of their items", (done) => {
    const db = firebase
        .initializeAdminApp({ projectId: REAL_FIREBASE_PROJECT_ID })
        .firestore();

    // Setup: Initialize cart
    const aliceCartRef = db.doc("carts/alice")
    aliceCartRef.set({ ownerUID: "alice", totalPrice: 0 });

    //  Trigger calculateCart by adding items to the cart
    const aliceItemsRef = aliceCartRef.collection("items");
    aliceItemsRef.doc("doc1").set({name: "nectarine", price: 2.99});
    aliceItemsRef.doc("doc2").set({ name: "grapefruit", price: 6.99 });
    
    // Listen for every update to the cart. Every time an item is added to
    // the cart's subcollection of items, the function updates `totalPrice`
    // and `itemCount` attributes on the cart.
    // Returns a function that can be called to unsubscribe the listener.
    await new Promise((resolve) => {
      const unsubscribe = aliceCartRef.onSnapshot(snap => {
        // If the function worked, these will be cart's final attributes.
        const expectedCount = 2;
        const expectedTotal = 9.98;
  
        // When the `itemCount`and `totalPrice` match the expectations for the
        // two items added, the promise resolves, and the test passes.
        if (snap.data().itemCount === expectedCount && snap.data().totalPrice == expectedTotal) {
          // Call the function returned by `onSnapshot` to unsubscribe from updates
          unsubscribe();
          resolve();
        };
      });
    });
   });
 });

17. परीक्षण चलाएँ

हो सकता है कि आपके पास अभी भी पिछले परीक्षणों से चलने वाले एमुलेटर हों। यदि नहीं, तो एमुलेटर प्रारंभ करें। कमांड लाइन से, चलाएँ

$ firebase emulators:start --import=./seed

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

$ cd functions

अब यूनिट परीक्षण चलाएं, आपको कुल 5 परीक्षण देखने चाहिए:

$ npm test

> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping cart creation
    ✓ can be created by the cart owner (82ms)

  shopping cart reads, updates, and deletes
    ✓ cart can be read by the cart owner (42ms)

  shopping cart items
    ✓ items can be read by the cart owner (40ms)
    ✓ items can be added by the cart owner

  adding an item to the cart recalculates the cart total. 
    1) should sum the cost of their items

  4 passing (2s)
  1 failing

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

18. एक फ़ंक्शन लिखें

इस परीक्षण को ठीक करने के लिए, आपको functions/index.js में फ़ंक्शन को अपडेट करना होगा। हालाँकि इस फ़ंक्शन का कुछ भाग लिखा गया है, यह पूर्ण नहीं है। यह फ़ंक्शन वर्तमान में इस प्रकार दिखता है:

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      let totalPrice = 125.98;
      let itemCount = 8;
      try {
        
        const cartRef = db.collection("carts").doc(context.params.cartId);

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

फ़ंक्शन कार्ट संदर्भ को सही ढंग से सेट कर रहा है, लेकिन फिर totalPrice और itemCount के मानों की गणना करने के बजाय, यह उन्हें हार्डकोडेड में अपडेट करता है।

के माध्यम से प्राप्त करें और पुनरावृत्त करें

items उपसंग्रह

items उपसंग्रह बनने के लिए एक नया स्थिरांक, itemsSnap प्रारंभ करें। फिर, संग्रह के सभी दस्तावेज़ों को दोबारा दोहराएं।

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }


      try {
        let totalPrice = 125.98;
        let itemCount = 8;

        const cartRef = db.collection("carts").doc(context.params.cartId);
        // ADD LINES FROM HERE
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
        })
        // TO HERE
       
        return cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

कुल कीमत और आइटम संख्या की गणना करें

सबसे पहले, आइए totalPrice और itemCount के मानों को शून्य से प्रारंभ करें।

फिर, तर्क को हमारे पुनरावृत्ति ब्लॉक में जोड़ें। सबसे पहले, जांचें कि आइटम की कीमत है या नहीं। यदि आइटम में कोई मात्रा निर्दिष्ट नहीं है, तो इसे 1 पर डिफ़ॉल्ट होने दें। फिर, itemCount के चल रहे कुल में मात्रा जोड़ें। अंत में, वस्तु की कीमत को मात्रा से गुणा करके totalPrice के चालू योग में जोड़ें:

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      try {
        // CHANGE THESE LINES
        let totalPrice = 0;
        let itemCount = 0;

        const cartRef = db.collection("carts").doc(context.params.cartId);
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
          // ADD LINES FROM HERE
          if (itemData.price) {
            // If not specified, the quantity is 1
            const quantity = itemData.quantity ? itemData.quantity : 1;
            itemCount += quantity;
            totalPrice += (itemData.price * quantity);
          }
          // TO HERE
        })

        await cartRef.update({
          totalPrice,
          itemCount
        });
      } catch(err) {
      }
    });

आप डिबग की सफलता और त्रुटि स्थिति में सहायता के लिए लॉगिंग भी जोड़ सकते हैं:

// Recalculates the total cost of a cart; triggered when there's a change
// to any items in a cart.
exports.calculateCart = functions
    .firestore.document("carts/{cartId}/items/{itemId}")
    .onWrite(async (change, context) => {
      console.log(`onWrite: ${change.after.ref.path}`);
      if (!change.after.exists) {
        // Ignore deletes
        return;
      }

      let totalPrice = 0;
      let itemCount = 0;
      try {
        const cartRef = db.collection("carts").doc(context.params.cartId);
        const itemsSnap = await cartRef.collection("items").get();

        itemsSnap.docs.forEach(item => {
          const itemData = item.data();
          if (itemData.price) {
            // If not specified, the quantity is 1
            const quantity = (itemData.quantity) ? itemData.quantity : 1;
            itemCount += quantity;
            totalPrice += (itemData.price * quantity);
          }
        });

        await cartRef.update({
          totalPrice,
          itemCount
        });

        // OPTIONAL LOGGING HERE
        console.log("Cart total successfully recalculated: ", totalPrice);
      } catch(err) {
        // OPTIONAL LOGGING HERE
        console.warn("update error", err);
      }
    });

19. परीक्षण पुनः चलाएँ

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

$ npm test
> functions@ test .../emulators-codelab/codelab-initial-state/functions
> mocha

  shopping cart creation
    ✓ can be created by the cart owner (306ms)

  shopping cart reads, updates, and deletes
    ✓ cart can be read by the cart owner (59ms)

  shopping cart items
    ✓ items can be read by the cart owner
    ✓ items can be added by the cart owner

  adding an item to the cart recalculates the cart total. 
    ✓ should sum the cost of their items (800ms)


  5 passing (1s)

अच्छा काम!

20. स्टोरफ्रंट यूआई का उपयोग करके इसे आज़माएं

अंतिम परीक्षण के लिए, वेब ऐप ( http://127.0.0.1:5000/ ) पर वापस लौटें और कार्ट में एक आइटम जोड़ें।

69ad26cee520bf24.png

पुष्टि करें कि कार्ट सही कुल के साथ अपडेट होता है। ज़बरदस्त!

संक्षिप्त

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

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

c6a7aeb91fe97a64.gif