Firebase Emulator Suite की मदद से लोकल डेवलपमेंट

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

Cloud Firestore और Cloud Functions जैसे बिना सर्वर वाले बैकएंड टूल इस्तेमाल करना बहुत आसान है, लेकिन इनकी जांच करना मुश्किल है. Firebase लोकल एम्युलेटर सुइट की मदद से, अपनी डेवलपमेंट मशीन पर इन सेवाओं के लोकल वर्शन चलाए जा सकते हैं. इससे, अपना ऐप्लिकेशन जल्दी और सुरक्षित तरीके से डेवलप किया जा सकता है.

ज़रूरी शर्तें

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

आपको क्या करना होगा

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

  • Cloud Firestore: रीयल-टाइम की सुविधाओं के साथ, दुनिया भर में स्केल किया जा सकने वाला, बिना सर्वर वाला NoSQL डेटाबेस.
  • Cloud Functions: बिना सर्वर वाला बैकएंड कोड, जो इवेंट या एचटीटीपी अनुरोधों के रिस्पॉन्स में चलता है.
  • Firebase से पुष्टि करना: मैनेज की गई पुष्टि करने की ऐसी सेवा जो दूसरे Firebase प्रॉडक्ट के साथ इंटिग्रेट होती है.
  • Firebase होस्टिंग: वेब ऐप्लिकेशन के लिए तेज़ और सुरक्षित होस्टिंग.

लोकल डेवलपमेंट चालू करने के लिए, आपको ऐप्लिकेशन को Emulator Suite से कनेक्ट करना होगा.

2589e2f95b74fa88.png

आपको यह भी पता चलेगा कि कैसे:

  • अपने ऐप्लिकेशन को एम्युलेटर सुइट से कनेक्ट करने का तरीका और अलग-अलग एम्युलेटर को कनेक्ट करने का तरीका.
  • Firebase के सुरक्षा नियमों के काम करने का तरीका और लोकल एम्युलेटर के साथ Firestore के सुरक्षा नियमों की जांच करने का तरीका.
  • Firestore इवेंट से ट्रिगर होने वाले Firebase फ़ंक्शन को लिखने का तरीका और Emulator Suite के साथ चलने वाले इंटिग्रेशन टेस्ट को लिखने का तरीका.

2. सेट अप करें

सोर्स कोड पाना

इस कोडलैब में, The Fire Store सैंपल के किसी ऐसे वर्शन से शुरुआत करें जो करीब-करीब पूरा हो चुका है. इसलिए, सबसे पहले आपको सोर्स कोड का क्लोन बनाना होगा:

$ 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 ../

Firebase सीएलआई पाएं

एम्युलेटर सुइट, Firebase सीएलआई (कमांड-लाइन इंटरफ़ेस) का हिस्सा है, जिसे नीचे दिए गए निर्देश का इस्तेमाल करके, आपकी मशीन पर इंस्टॉल किया जा सकता है:

$ npm install -g firebase-tools

इसके बाद, पुष्टि करें कि आपके पास सीएलआई का सबसे नया वर्शन है. यह कोडलैब, 9.0.0 या इसके बाद वाले वर्शन पर काम करेगा. हालांकि, बाद के वर्शन में कुछ और गड़बड़ियां ठीक की गई हैं.

$ firebase --version
9.6.0

अपने Firebase प्रोजेक्ट से कनेक्ट करना

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

अब हमें यह कोड आपके Firebase प्रोजेक्ट से जोड़ना होगा. Firebase सीएलआई में लॉग इन करने के लिए, सबसे पहले यहां दिया गया कमांड चलाएं:

$ firebase login

इसके बाद, प्रोजेक्ट का उपनाम बनाने के लिए, यहां दिया गया कमांड चलाएं. $YOUR_PROJECT_ID को अपने Firebase प्रोजेक्ट के आईडी से बदलें.

$ 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.

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

वेब ऐप्लिकेशन को एम्युलेटर से कनेक्ट करना

लॉग में दी गई टेबल के आधार पर हम देख सकते हैं कि Cloud Firestore एम्युलेटर, पोर्ट 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 फ़ंक्शन ढूंढें. हम देख सकते हैं कि कोड, स्टैंडर्ड Firestore और Auth इंस्टेंस को ऐक्सेस करता है:

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

अब जब ऐप्लिकेशन आपके लोकल मशीन (जिसे होस्टिंग एम्युलेटर के ज़रिए दिखाया जाता है) पर चल रहा है, तो Firestore क्लाइंट, प्रोडक्शन डेटाबेस के बजाय लोकल एम्युलेटर पर भी पॉइंट करता है.

emulatorUI खोलें

अपने वेब ब्राउज़र में, http://127.0.0.1:4000/ पर जाएं. आपको Emulator Suite का यूज़र इंटरफ़ेस (यूआई) दिखेगा.

एम्युलेटर के यूज़र इंटरफ़ेस (यूआई) की होम स्क्रीन

Firestore एम्युलेटर का यूज़र इंटरफ़ेस (यूआई) देखने के लिए क्लिक करें. --import फ़्लैग के साथ इंपोर्ट किए गए डेटा की वजह से, items कलेक्शन में पहले से डेटा मौजूद है.

4ef88d0148405d36.png

4. ऐप्लिकेशन चलाएं

ऐप्लिकेशन खोलें

अपने वेब ब्राउज़र में, http://127.0.0.1:5000 पर जाएं. इसके बाद, आपको अपनी मशीन पर The Fire Store लोकल कैंपेन दिखेगा!

939f87946bac2ee4.png

ऐप्लिकेशन का इस्तेमाल करना

होम पेज पर कोई आइटम चुनें और कार्ट में जोड़ें पर क्लिक करें. माफ़ करें, आपको यह गड़बड़ी दिखेगी:

a11bd59933a8e885.png

चलिए, इस गड़बड़ी को ठीक करते हैं! एम्युलेटर में सब कुछ चल रहा है. इसलिए, हम प्रयोग कर सकते हैं और असली डेटा पर असर डालने के बारे में चिंता नहीं करते.

5. ऐप्लिकेशन को डीबग करना

गड़बड़ी का पता लगाएं

ठीक है, चलिए Chrome डेवलपर कंसोल पर नज़र डालते हैं. कंसोल पर गड़बड़ी देखने के लिए Control+Shift+J (Windows, Linux, Chrome OS) या Command+Option+J (Mac) दबाएं:

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

आहा! हमने ऐप्लिकेशन में साइन इन नहीं किया है. Firebase के पुष्टि करने वाले दस्तावेज़ों के मुताबिक, जब हम साइन इन नहीं होते हैं, तब 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;
    }

    // ...
  }

ऐप्लिकेशन की जांच करना

अब पेज को रीफ़्रेश करें और फिर कार्ट में जोड़ें पर क्लिक करें. आपको इस बार एक और अच्छी गड़बड़ी मिलेगी:

c65f6c05588133f7.png

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

हालांकि, ऐसा लगता है कि आंकड़े बिलकुल सही नहीं हैं:

239f26f02f959eef.png

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

6. लोकल फ़ंक्शन ट्रिगर

कार्ट में जोड़ें पर क्लिक करने से, ऐसे इवेंट की चेन खुल जाती है जिनमें एक से ज़्यादा एम्युलेटर शामिल होते हैं. Firebase सीएलआई लॉग में, आपको कार्ट में कोई आइटम जोड़ने के बाद कुछ इस तरह के मैसेज दिखेंगे:

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

ये लॉग तैयार करने में चार मुख्य इवेंट हुए और आपको यूज़र इंटरफ़ेस (यूआई) अपडेट मिला:

68c9323f2ad10f7a.png

1) Firestore राइट - क्लाइंट

Firestore कलेक्शन /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) Cloud फ़ंक्शन को ट्रिगर किया गया

Cloud फ़ंक्शन 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) Firestore राइट - एडमिन

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

4) Firestore रीड - क्लाइंट

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

public/js/homepage.js

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

रीकैप

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

db82eef1706c9058.gif

लेकिन रुकें, यहां और भी हैं! अगले सेक्शन में, आपको इनके बारे में जानकारी मिलेगी:

  • Firebase एम्युलेटर का इस्तेमाल करने वाले यूनिट टेस्ट लिखने का तरीका.
  • अपने सुरक्षा नियमों को डीबग करने के लिए, Firebase एम्युलेटर का इस्तेमाल करने का तरीका.

7. अपने ऐप्लिकेशन के हिसाब से, सुरक्षा के नियम बनाना

हमारा वेब ऐप्लिकेशन डेटा को पढ़ता और लिखता है, लेकिन अभी तक हमने सुरक्षा को लेकर बिलकुल भी चिंता नहीं की है. Cloud Firestore एक सिस्टम का इस्तेमाल करता है, जिसे "सुरक्षा के नियम" कहते हैं. का इस्तेमाल करके यह एलान किया जा सकता है कि डेटा को पढ़ने और उसमें बदलाव करने का ऐक्सेस किसके पास है. Emulator Suite इन नियमों को प्रोटोटाइप करने का एक बेहतरीन तरीका है.

एडिटर में 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. सुरक्षित कार्ट ऐक्सेस

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

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

फ़ंक्शन/test.js

  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} में दिए गए स्टेटमेंट अपडेट करें:

फ़ायरस्टोर.नियम

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 ऑब्जेक्ट में उस कार्रवाई का डेटा और मेटाडेटा होता है जिसकी कोशिश की जा रही है.
  • अगर कोई Firebase प्रोजेक्ट, Firebase से पुष्टि करने की सुविधा का इस्तेमाल कर रहा है, तो 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
    }));
  });

इसलिए, हम एक ऐसा नियम बना सकते हैं जो ऐक्सेस की अनुमति देता है. हालांकि, इसके लिए ज़रूरी है कि मौजूदा उपयोगकर्ता के पास, कार्ट दस्तावेज़ के मालिक के UID जैसा ही यूआईडी हो. आपको create, update, delete के लिए अलग-अलग नियम तय करने की ज़रूरत नहीं है. इसलिए, आपके पास write नियम का इस्तेमाल करने का विकल्प है. यह नियम, डेटा में बदलाव करने वाले सभी अनुरोधों पर लागू होता है.

आइटम सब-कलेक्शन में मौजूद दस्तावेज़ों के नियम अपडेट करें. कंडिशनल में get, Firestore से मिली वैल्यू को पढ़ रहा है. इस मामले में, कार्ट के दस्तावेज़ में मौजूद 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

लेकिन इंतज़ार करें, अभी और भी बहुत कुछ है!

जारी रखने पर आपको जानकारी मिलेगी:

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

15. Cloud Functions की जांच सेट अप करें

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

एम्युलेटर सुइट की मदद से, Cloud Functions की जांच करना बहुत आसान हो गया है. यहां तक कि वे फ़ंक्शन भी इस्तेमाल किए जा सकते हैं जो Cloud Firestore और दूसरी सेवाओं का इस्तेमाल करते हैं.

एडिटर में, 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 वैरिएबल ढूंढें और उसे अपने असली Firebase प्रोजेक्ट आईडी में बदलें.:

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

अगर आपको अपना प्रोजेक्ट आईडी याद नहीं है, तो आप 'Firebase कंसोल' की प्रोजेक्ट सेटिंग में जाकर, अपना Firebase प्रोजेक्ट आईडी देख सकते हैं:

d6d0429b700d2b21.png

16. फ़ंक्शन टेस्ट देखें

यह टेस्ट, Cloud Firestore और Cloud Functions के बीच इंटरैक्शन की पुष्टि करता है. इसलिए, इसमें पिछले कोडलैब के टेस्ट के मुकाबले ज़्यादा सेटअप शामिल होता है. आइए, इस टेस्ट के बारे में जानते हैं और यह भी जानते हैं कि इसमें किस तरह के नतीजे मिल सकते हैं.

कार्ट बनाना

Cloud Functions, भरोसेमंद सर्वर एनवायरमेंट में चलता है और 'एडमिन SDK' की ओर से इस्तेमाल किए जाने वाले सेवा खाते की पुष्टि करने की सुविधा का इस्तेमाल कर सकता है . सबसे पहले, आप initializeApp के बजाय initializeAdminApp का इस्तेमाल करके ऐप्लिकेशन शुरू करते हैं. इसके बाद, उस कार्ट के लिए DocumentReference बनाएं जिसमें हम आइटम जोड़ेंगे और कार्ट शुरू करेंगे:

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

अब यूनिट टेस्ट करें, आपको कुल पांच टेस्ट दिखेंगे:

$ 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. Storeफ़्रंट यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके इसे आज़माएं

आखिरी टेस्ट के लिए, वेब ऐप्लिकेशन ( http://127.0.0.1:5000/) पर वापस जाएं और कार्ट में कोई आइटम जोड़ें.

69ad26cee520bf24.png

पुष्टि करें कि कार्ट में मौजूद वैल्यू की कुल कीमत सही है. शानदार!

रीकैप

आपने 'Firebase के लिए Cloud Functions' और Cloud Firestore के बीच के एक जटिल टेस्ट केस को देखा है. आपने टेस्ट पास बनाने के लिए Cloud Function लिखा है. आपने यह भी पुष्टि की है कि यूज़र इंटरफ़ेस (यूआई) में नई सुविधा काम कर रही है! आपने यह सब कुछ स्थानीय तौर पर किया और अपनी मशीन पर एम्युलेटर चलाए.

आपने एक ऐसा वेब क्लाइंट भी बनाया है जो लोकल एम्युलेटर पर चल रहा है. साथ ही, आपने डेटा की सुरक्षा के लिए ज़रूरत के हिसाब से सुरक्षा के नियम बनाए हैं. साथ ही, स्थानीय एम्युलेटर का इस्तेमाल करके, सुरक्षा के नियमों की जांच की है.

c6a7aeb91fe97a64.gif