वेब के लिए, Firebase की परफ़ॉर्मेंस मॉनिटर करना

1. खास जानकारी

इस कोडलैब में, आपको चैट वेब ऐप्लिकेशन की परफ़ॉर्मेंस मेज़र करने के लिए, Firebase की परफ़ॉर्मेंस मॉनिटरिंग का इस्तेमाल करने का तरीका पता चलेगा. लाइव डेमो देखने के लिए, https://fireperf-friendlychat.web.app/ पर जाएं.

आपको इनके बारे में जानकारी मिलेगी

• अपने वेब ऐप्लिकेशन में Firebase की परफ़ॉर्मेंस मॉनिटरिंग सुविधा जोड़ने का तरीका. इससे, आपको पेज लोड और नेटवर्क अनुरोध जैसी मेट्रिक मिलती हैं.
• कस्टम ट्रेस की मदद से, कोड के किसी खास हिस्से को मेज़र करने का तरीका.
• कस्टम ट्रेस से जुड़ी अतिरिक्त, कस्टम मेट्रिक रिकॉर्ड करने का तरीका.
• कस्टम एट्रिब्यूट की मदद से, परफ़ॉर्मेंस डेटा को और सेगमेंट में बांटने का तरीका.
• अपने वेब ऐप्लिकेशन की परफ़ॉर्मेंस को समझने के लिए, परफ़ॉर्मेंस मॉनिटरिंग डैशबोर्ड का इस्तेमाल करने का तरीका.

आपको इन चीज़ों की ज़रूरत होगी

• आपकी पसंद का आईडीई या टेक्स्ट एडिटर, जैसे कि WebStorm, Atom, Sublime या VS Code
• टर्मिनल/कंसोल
• Chrome जैसा कोई ब्राउज़र
• कोडलैब का सैंपल कोड (कोड पाने का तरीका जानने के लिए, इस कोडलैब का अगला सेक्शन देखें.)

2. सैंपल कोड पाना

कमांड लाइन से, कोडलैब के GitHub डेटा स्टोर करने की जगह को क्लोन करें:

git clone https://github.com/firebase/codelab-friendlychat-web

इसके अलावा, अगर आपने git इंस्टॉल नहीं किया है, तो रिपो को ज़िप फ़ाइल के तौर पर डाउनलोड किया जा सकता है.

स्टार्टर ऐप्लिकेशन इंपोर्ट करना

अपने IDE का इस्तेमाल करके, क्लोन की गई रिपॉज़िटरी से 📁 performance-monitoring-start डायरेक्ट्री खोलें या इंपोर्ट करें. इस 📁 performance-monitoring-start डायरेक्ट्री में, कोडलैब का शुरुआती कोड मौजूद है. यह एक चैट वेब ऐप्लिकेशन है.

3. Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

Firebase प्रोजेक्ट बनाना

1. Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें.
2. अपने Firebase प्रोजेक्ट को FriendlyChat नाम दें.

अपने Firebase प्रोजेक्ट का प्रोजेक्ट आईडी याद रखें.

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

Firebase के प्लान की कीमत अपग्रेड करना

'Firebase के लिए Cloud Storage' का इस्तेमाल करने के लिए, आपका Firebase प्रोजेक्ट पे-ऐज़-यू-गो (Blaze) कीमत वाले प्लान पर होना चाहिए. इसका मतलब है कि यह Cloud Billing खाते से लिंक होना चाहिए.

• Cloud Billing खाते के लिए, क्रेडिट कार्ड जैसा पेमेंट का कोई तरीका होना ज़रूरी है.
• अगर आपने Firebase और Google Cloud का इस्तेमाल पहले कभी नहीं किया है, तो देखें कि क्या आपको 300 डॉलर का क्रेडिट और मुफ़्त में आज़माने के लिए Cloud Billing खाता मिल सकता है.
• अगर आपने किसी इवेंट के तहत यह कोडलैब किया है, तो इवेंट के आयोजक से पूछें कि क्या कोई Cloud क्रेडिट उपलब्ध है.

अपने प्रोजेक्ट को Blaze प्लान पर अपग्रेड करने के लिए, यह तरीका अपनाएं:

1. Firebase कंसोल में, अपना प्लान अपग्रेड करें को चुनें.
2. ब्लेज़ प्लान चुनें. अपने प्रोजेक्ट से क्लाउड बिलिंग खाता लिंक करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.
   अगर आपको इस अपग्रेड के तहत क्लाउड बिलिंग खाता बनाना पड़ा है, तो अपग्रेड पूरा करने के लिए, आपको Firebase Console में अपग्रेड फ़्लो पर वापस जाना पड़ सकता है.

प्रोजेक्ट में Firebase वेब ऐप्लिकेशन जोड़ना

1. नया Firebase वेब ऐप्लिकेशन बनाने के लिए, वेब आइकॉन पर क्लिक करें.
2. ऐप्लिकेशन को कोई दूसरा नाम Friendly Chat देकर रजिस्टर करें. इसके बाद, इस ऐप्लिकेशन के लिए Firebase होस्टिंग भी सेट अप करें के बगल में मौजूद बॉक्स को चुनें.
3. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
4. बाकी चरणों को पूरा करने के लिए, आगे दिए गए निर्देशों का पालन करें. आपको अब स्क्रीन पर दिए गए निर्देशों का पालन करने की ज़रूरत नहीं है. इन निर्देशों के बारे में, इस कोडलैब के अगले चरणों में बताया जाएगा.

Firebase की पुष्टि करने के लिए, Google साइन इन की सुविधा चालू करना

उपयोगकर्ताओं को अपने Google खातों से चैट ऐप्लिकेशन में साइन इन करने की अनुमति देने के लिए, हम Google साइन-इन के तरीके का इस्तेमाल करेंगे.

आपको Google साइन इन की सुविधा चालू करनी होगी:

1. Firebase कंसोल में, बाएं पैनल में डेवलप करें सेक्शन ढूंढें.
2. पुष्टि करें पर क्लिक करें. इसके बाद, साइन इन करने का तरीका टैब ( कंसोल पर जाएं) पर क्लिक करें.
3. साइन इन करने के लिए Google की सुविधा चालू करें. इसके बाद, सेव करें पर क्लिक करें.

Cloud Firestore सेट अप करना

वेब ऐप्लिकेशन, चैट मैसेज सेव करने और नए चैट मैसेज पाने के लिए, Cloud Firestore का इस्तेमाल करता है.

अपने Firebase प्रोजेक्ट में Cloud Firestore सेट अप करने का तरीका यहां बताया गया है:

1. Firebase कंसोल के बाएं पैनल में, बिल्ड करें को बड़ा करें. इसके बाद, Firestore डेटाबेस चुनें.
2. डेटाबेस बनाएं पर क्लिक करें.
3. डेटाबेस आईडी को (default) पर सेट रहने दें.
4. अपने डेटाबेस के लिए कोई जगह चुनें. इसके बाद, आगे बढ़ें पर क्लिक करें.
   असल ऐप्लिकेशन के लिए, आपको ऐसी जगह चुननी होगी जो आपके उपयोगकर्ताओं के आस-पास हो.
5. टेस्ट मोड में शुरू करें पर क्लिक करें. सुरक्षा नियमों के बारे में डिसक्लेमर पढ़ें.
   इस कोडलैब में आगे, आपको अपने डेटा को सुरक्षित रखने के लिए सुरक्षा नियम जोड़ने होंगे. अपने डेटाबेस के लिए सुरक्षा नियम जोड़े बिना, ऐप्लिकेशन को सार्वजनिक तौर पर न डिस्ट्रिब्यूट या एक्सपोज़ करें.
6. बनाएं पर क्लिक करें.

Firebase के लिए Cloud Storage सेट अप करना

वेब ऐप्लिकेशन, फ़ोटो को स्टोर करने, अपलोड करने, और शेयर करने के लिए, Firebase के लिए Cloud Storage का इस्तेमाल करता है.

अपने Firebase प्रोजेक्ट में, 'Firebase के लिए Cloud Storage' सेट अप करने का तरीका यहां बताया गया है:

1. Firebase कंसोल के बाएं पैनल में, बिल्ड को बड़ा करें. इसके बाद, स्टोरेज चुनें.
2. शुरू करें पर क्लिक करें.
3. अपनी डिफ़ॉल्ट स्टोरेज बकेट के लिए कोई जगह चुनें.
   US-WEST1, US-CENTRAL1, और US-EAST1 में मौजूद बकेट, Google Cloud Storage के लिए "हमेशा मुफ़्त" टीयर का फ़ायदा ले सकती हैं. अन्य सभी जगहों की बकेट के लिए, Google Cloud Storage की कीमत और इस्तेमाल लागू होता है.
4. टेस्ट मोड में शुरू करें पर क्लिक करें. सुरक्षा नियमों के बारे में डिसक्लेमर पढ़ें.
   इस कोडलैब में आगे, आपको अपने डेटा को सुरक्षित रखने के लिए सुरक्षा नियम जोड़ने होंगे. अपनी स्टोरेज बकेट के लिए सुरक्षा नियम जोड़े बिना, न किसी ऐप्लिकेशन को सार्वजनिक तौर पर डिस्ट्रिब्यूट या एक्सपोज़ करें.
5. बनाएं पर क्लिक करें.

4. Firebase का कमांड-लाइन इंटरफ़ेस इंस्टॉल करना

Firebase कमांड-लाइन इंटरफ़ेस (CLI) की मदद से, Firebase होस्टिंग का इस्तेमाल करके अपने वेब ऐप्लिकेशन को स्थानीय तौर पर दिखाया जा सकता है. साथ ही, अपने वेब ऐप्लिकेशन को Firebase प्रोजेक्ट में डिप्लॉय किया जा सकता है.

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

firebase --version

पक्का करें कि आपके पास Firebase CLI का 8.0.0 या उसके बाद का वर्शन हो.

3. यहां दिया गया कमांड चलाकर, Firebase CLI को अनुमति दें:

firebase login

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

4. पक्का करें कि आपकी कमांड लाइन, आपके ऐप्लिकेशन की लोकल performance-monitoring-start डायरेक्ट्री को ऐक्सेस कर रही हो.
5. अपने ऐप्लिकेशन को Firebase प्रोजेक्ट से जोड़ने के लिए, यह कमांड चलाएं:

firebase use --add

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

अगर आपके पास एक से ज़्यादा एनवायरमेंट (प्रोडक्शन, स्टेजिंग वगैरह) हैं, तो कोई दूसरा नाम देना फ़ायदेमंद होता है. हालांकि, इस कोडलैब के लिए, सिर्फ़ default के उपनाम का इस्तेमाल करें.

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

5. Firebase की परफ़ॉर्मेंस मॉनिटरिंग सुविधा के साथ इंटिग्रेट करना

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

परफ़ॉर्मेंस मॉनिटरिंग जोड़ना और Firebase को शुरू करना

1. src/index.js फ़ाइल खोलें. इसके बाद, Firebase परफ़ॉर्मेंस मॉनिटरिंग SDK टूल को शामिल करने के लिए, TODO के नीचे यह लाइन जोड़ें.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. हमें Firebase SDK टूल को ऐसे कॉन्फ़िगरेशन ऑब्जेक्ट के साथ भी शुरू करना होगा जिसमें Firebase प्रोजेक्ट और उस वेब ऐप्लिकेशन के बारे में जानकारी हो जिसका हमें इस्तेमाल करना है. हम Firebase होस्टिंग का इस्तेमाल कर रहे हैं. इसलिए, आपके पास एक खास स्क्रिप्ट इंपोर्ट करने का विकल्प है. यह स्क्रिप्ट आपके लिए यह कॉन्फ़िगरेशन करेगी. इस कोडलैब के लिए, हमने public/index.html फ़ाइल में सबसे नीचे यह लाइन पहले ही जोड़ दी है. हालांकि, इसकी दोबारा जांच कर लें.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. परफ़ॉर्मेंस मॉनिटरिंग शुरू करने के लिए, src/index.js फ़ाइल में TODO के नीचे यह लाइन जोड़ें.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

जब उपयोगकर्ता आपकी साइट का इस्तेमाल करेंगे, तब परफ़ॉर्मेंस मॉनिटरिंग की सुविधा, पेज लोड और नेटवर्क अनुरोध की मेट्रिक अपने-आप इकट्ठा करेगी! पेज लोड के अपने-आप जनरेट होने वाले ट्रेस के बारे में ज़्यादा जानने के लिए, दस्तावेज़ देखें.

फ़र्स्ट इनपुट डिले पॉलीफ़िल लाइब्रेरी जोड़ना

फ़र्स्ट इनपुट डिले काफ़ी काम का है, क्योंकि उपयोगकर्ता के इंटरैक्शन का जवाब देने वाले ब्राउज़र से, उपयोगकर्ताओं को आपके ऐप्लिकेशन के रिस्पॉन्सिव होने के बारे में पहला इंप्रेशन मिलता है.

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

परफ़ॉर्मेंस मॉनिटरिंग इंटिग्रेशन के लिए, यह पॉलीफ़िल लाइब्रेरी ज़रूरी नहीं है.

public/index.html फ़ाइल खोलें. इसके बाद, नीचे दी गई लाइन से कमरेंट हटाएं.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

अब आपने अपने कोड में Firebase की परफ़ॉर्मेंस मॉनिटरिंग सुविधा को इंटिग्रेट कर लिया है!

यहां दिए गए चरणों में, Firebase परफ़ॉर्मेंस मॉनिटरिंग का इस्तेमाल करके कस्टम ट्रेस जोड़ने के बारे में बताया गया है. अगर आपको सिर्फ़ अपने-आप जनरेट होने वाले ट्रेस इकट्ठा करने हैं, तो "डिप्लॉय करें और इमेज भेजना शुरू करें" सेक्शन में जाएं.

6. अपने ऐप्लिकेशन में कस्टम ट्रेस जोड़ना

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

1. src/index.js फ़ाइल में, परफ़ॉर्मेंस ऑब्जेक्ट पाएं. इसके बाद, इमेज मैसेज अपलोड करने के लिए कस्टम ट्रेस बनाएं.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. कस्टम ट्रेस रिकॉर्ड करने के लिए, आपको ट्रेस के शुरू और खत्म होने की जगह की जानकारी देनी होगी. ट्रेस को टाइमर के तौर पर देखा जा सकता है.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

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

7. अपने ऐप्लिकेशन में कस्टम मेट्रिक जोड़ें.

कस्टम ट्रेस को और भी कॉन्फ़िगर किया जा सकता है, ताकि उसके दायरे में होने वाले परफ़ॉर्मेंस से जुड़े इवेंट के लिए कस्टम मेट्रिक रिकॉर्ड की जा सकें. उदाहरण के लिए, मेट्रिक का इस्तेमाल करके यह जांच की जा सकती है कि पिछले चरण में तय किए गए कस्टम ट्रेस के लिए, इमेज के साइज़ का अपलोड के समय पर असर पड़ता है या नहीं.

1. पिछले चरण में बनाए गए कस्टम ट्रेस (src/index.js फ़ाइल में तय किए गए) का पता लगाएं.
2. अपलोड की गई इमेज का साइज़ रिकॉर्ड करने के लिए, TODO के नीचे यह लाइन जोड़ें.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

इस मेट्रिक की मदद से, परफ़ॉर्मेंस मॉनिटरिंग की सुविधा चालू की जा सकती है. इससे कस्टम ट्रेस की अवधि के साथ-साथ, अपलोड की गई इमेज का साइज़ भी रिकॉर्ड किया जा सकता है.

8. अपने ऐप्लिकेशन में कस्टम एट्रिब्यूट जोड़ना

पिछले चरणों के आधार पर, कस्टम ट्रेस पर कस्टम एट्रिब्यूट भी इकट्ठा किए जा सकते हैं. कस्टम एट्रिब्यूट की मदद से, आपके ऐप्लिकेशन के हिसाब से कैटगरी के आधार पर डेटा को सेगमेंट में बांटा जा सकता है. उदाहरण के लिए, MIME टाइप की जांच करने के लिए, इमेज फ़ाइल का MIME टाइप इकट्ठा किया जा सकता है. इससे यह पता चलता है कि MIME टाइप से परफ़ॉर्मेंस पर क्या असर पड़ सकता है.

1. अपनी src/index.js फ़ाइल में तय किए गए कस्टम ट्रेस का इस्तेमाल करें.
2. अपलोड की गई इमेज का MIME टाइप रिकॉर्ड करने के लिए, TODO के नीचे यह लाइन जोड़ें.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

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

9. [बढ़ाएं] User Timing API की मदद से कस्टम ट्रेस जोड़ना

Firebase परफ़ॉर्मेंस मॉनिटरिंग SDK टूल को इस तरह से डिज़ाइन किया गया है कि इसे अलग-अलग समय पर लोड किया जा सके. इससे, पेज लोड होने के दौरान वेब ऐप्लिकेशन की परफ़ॉर्मेंस पर बुरा असर नहीं पड़ता. SDK टूल लोड होने से पहले, Firebase परफ़ॉर्मेंस मॉनिटरिंग एपीआई उपलब्ध नहीं होता. इस स्थिति में, User Timing API का इस्तेमाल करके, अब भी कस्टम ट्रेस जोड़े जा सकते हैं. Firebase परफ़ॉर्मेंस SDK टूल, measure() से अवधि को चुनकर, उन्हें कस्टम ट्रेस के तौर पर लॉग करेगा.

हम User Timing API का इस्तेमाल करके, ऐप्लिकेशन की स्टाइलिंग स्क्रिप्ट लोड होने में लगने वाले समय को मेज़र करने जा रहे हैं.

1. public/index.html फ़ाइल में, ऐप्लिकेशन स्टाइलिंग स्क्रिप्ट लोड होने की शुरुआत को मार्क करने के लिए, यह लाइन जोड़ें.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. ऐप्लिकेशन स्टाइलिंग स्क्रिप्ट लोड होने के आखिर में मार्क करने और शुरू और खत्म होने के बीच की अवधि को मेज़र करने के लिए, ये लाइनें जोड़ें.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

यहां बनाई गई एंट्री, Firebase की परफ़ॉर्मेंस मॉनिटरिंग सुविधा की मदद से अपने-आप इकट्ठा हो जाएगी. आपको बाद में Firebase परफ़ॉर्मेंस कंसोल में, loadStyling नाम का कस्टम ट्रेस दिखेगा.

10. डिप्लॉय करना और इमेज भेजना शुरू करना

Firebase होस्टिंग पर डिप्लॉय करना

अपने कोड में Firebase की परफ़ॉर्मेंस मॉनिटरिंग सुविधा जोड़ने के बाद, Firebase होस्टिंग पर अपना कोड डिप्लॉय करने के लिए यह तरीका अपनाएं:

1. पक्का करें कि आपकी कमांड लाइन, आपके ऐप्लिकेशन की लोकल performance-monitoring-start डायरेक्ट्री को ऐक्सेस कर रही हो.
2. यह कमांड चलाकर, अपनी फ़ाइलों को Firebase प्रोजेक्ट में डिप्लॉय करें:

firebase deploy

3. कंसोल में ये चीज़ें दिखनी चाहिए:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.firebasestorage.app
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. अपने वेब ऐप्लिकेशन पर जाएं, जो अब Firebase होस्टिंग का इस्तेमाल करके, आपके दो Firebase सबडोमेन: https://<projectId>.firebaseapp.com और https://<projectId>.web.app पर पूरी तरह से होस्ट किया गया है.

पुष्टि करना कि परफ़ॉर्मेंस मॉनिटरिंग की सुविधा चालू है

Firebase कंसोल खोलें और परफ़ॉर्मेंस टैब पर जाएं. अगर आपको "SDK टूल का पता चला" वाला वेलकम मैसेज दिखता है, तो इसका मतलब है कि आपने Firebase परफ़ॉर्मेंस मॉनिटरिंग के साथ इंटिग्रेशन कर लिया है!

इमेज मैसेज भेजना

चैट ऐप्लिकेशन में इमेज भेजकर, परफ़ॉर्मेंस का कुछ डेटा जनरेट करें.

1. अपने चैट ऐप्लिकेशन में साइन इन करने के बाद, इमेज अपलोड करने के लिए बने बटन पर क्लिक करें.
2. फ़ाइल पिकर का इस्तेमाल करके, कोई इमेज फ़ाइल चुनें.
3. एक से ज़्यादा इमेज भेजकर देखें (public/images/ में कुछ सैंपल सेव किए गए हैं), ताकि कस्टम मेट्रिक और कस्टम एट्रिब्यूट के डिस्ट्रिब्यूशन की जांच की जा सके.

आपके चुने गए इमेज के साथ-साथ, नए मैसेज भी ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में दिखने चाहिए.

11. डैशबोर्ड को मॉनिटर करना

वेब ऐप्लिकेशन को डिप्लॉय करने और उपयोगकर्ता के तौर पर इमेज मैसेज भेजने के बाद, परफ़ॉर्मेंस मॉनिटरिंग डैशबोर्ड (Firebase कंसोल में) में परफ़ॉर्मेंस डेटा की समीक्षा की जा सकती है.

अपना डैशबोर्ड ऐक्सेस करना

1. Firebase कंसोल में, वह प्रोजेक्ट चुनें जिसमें आपका Friendly Chat ऐप्लिकेशन है.
2. बाईं ओर मौजूद पैनल में, क्वालिटी सेक्शन ढूंढें और परफ़ॉर्मेंस पर क्लिक करें.

डिवाइस पर मौजूद डेटा की समीक्षा करना

परफ़ॉर्मेंस मॉनिटरिंग के बाद, आपको डैशबोर्ड में सबसे ऊपर टैब दिखेंगे. अगर आपको अभी तक कोई डेटा या टैब नहीं दिखता है, तो बाद में देखें.

1. डिवाइस पर टैब पर क्लिक करें.

• पेज लोड होने में लगने वाला समय टेबल में, परफ़ॉर्मेंस की अलग-अलग मेट्रिक दिखती हैं. ये मेट्रिक, आपका पेज लोड होने के दौरान, परफ़ॉर्मेंस मॉनिटरिंग की सुविधा अपने-आप इकट्ठा करती है.
• अवधि टेबल में, आपके ऐप्लिकेशन के कोड में तय किए गए कस्टम ट्रेस दिखते हैं.

2. ट्रैस की खास मेट्रिक की समीक्षा करने के लिए, समयावधि टेबल में saveImageMessage पर क्लिक करें.

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

4. पिछले चरण में एग्रीगेट करें के बगल में मौजूद, समय के साथ पर क्लिक करें. कस्टम ट्रेस की अवधि भी देखी जा सकती है. इकट्ठा किए गए डेटा की ज़्यादा जानकारी देखने के लिए, ज़्यादा देखें पर क्लिक करें.

5. इसके बाद, खुलने वाले पेज पर imageType पर क्लिक करके, इमेज के MIME टाइप के हिसाब से, विज्ञापन दिखने की अवधि के डेटा को सेगमेंट में बांटा जा सकता है. यह खास डेटा, आपके कस्टम ट्रेस में जोड़े गए imageType एट्रिब्यूट की वजह से लॉग किया गया था.

नेटवर्क डेटा की समीक्षा करना

एचटीटीपी/एस नेटवर्क अनुरोध एक रिपोर्ट है, जो नेटवर्क कॉल के जवाब मिलने में लगने वाले समय और पेलोड के साइज़ को कैप्चर करती है.

1. परफ़ॉर्मेंस मॉनिटरिंग डैशबोर्ड की मुख्य स्क्रीन पर वापस जाएं.
2. अपने वेब ऐप्लिकेशन के लिए, नेटवर्क अनुरोध की एंट्री की सूची देखने के लिए, नेटवर्क टैब पर क्लिक करें.
3. धीमे अनुरोधों की पहचान करने के लिए, उन्हें ब्राउज़ करें और अपने ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने के लिए, उन्हें ठीक करने की प्रोसेस शुरू करें!

12. बधाई हो!

आपने परफ़ॉर्मेंस मॉनिटर करने के लिए, Firebase SDK टूल को चालू किया हो. साथ ही, अपने चैट ऐप्लिकेशन की असल परफ़ॉर्मेंस को मेज़र करने के लिए, अपने-आप जनरेट होने वाले ट्रेस और कस्टम ट्रेस इकट्ठा किए हों!

हमने इनके बारे में बताया है:

• अपने वेब ऐप्लिकेशन में Firebase की परफ़ॉर्मेंस मॉनिटरिंग SDK टूल जोड़ना.
• अपने कोड में कस्टम ट्रेस जोड़ना.
• कस्टम ट्रेस से जुड़ी कस्टम मेट्रिक रिकॉर्ड करना.
• कस्टम एट्रिब्यूट का इस्तेमाल करके, परफ़ॉर्मेंस डेटा को सेगमेंट में बांटना.
• अपने ऐप्लिकेशन की परफ़ॉर्मेंस के बारे में अहम जानकारी पाने के लिए, परफ़ॉर्मेंस मॉनिटरिंग डैशबोर्ड का इस्तेमाल करने का तरीका.

ज़्यादा जानें:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/