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

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

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

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

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

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

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

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

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

कमांड लाइन से, कोडलैब की GitHub रिपॉज़िटरी का क्लोन बनाएं:

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

इसके अलावा, अगर आपने GitHub फ़ाइल इंस्टॉल नहीं की है, तो रेपो को ZIP फ़ाइल के रूप में डाउनलोड करें.

friendlychat-web डेटा स्टोर करने की जगह में, एक से ज़्यादा प्लैटफ़ॉर्म के लिए सैंपल प्रोजेक्ट शामिल हैं.

यह कोडलैब सिर्फ़ इन दो डेटा स्टोर करने की जगहों का इस्तेमाल करता है:

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

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

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

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

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

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

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

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

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

अहम जानकारी: आपके Firebase प्रोजेक्ट को FriendlyChat, नाम दिया जाएगा, लेकिन Firebase अपने-आप उसे friendlychat-1234 फ़ॉर्म में एक यूनीक प्रोजेक्ट आईडी असाइन करेगा. यह यूनीक आइडेंटिफ़ायर, असल में आपके प्रोजेक्ट की पहचान करने का तरीका है (इसमें सीएलआई भी शामिल है), जबकि FriendlyChat सिर्फ़ एक डिसप्ले नेम है.

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

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

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

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

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

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

Cloud Firestore को चालू करें

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

आपको Cloud Firestore को चालू करना होगा:

1. Firebase कंसोल के डेवलप करें सेक्शन में, डेटाबेस पर क्लिक करें.
2. Cloud Firestore पैनल में डेटाबेस बनाएं पर क्लिक करें.
3. टेस्ट मोड में चालू करें विकल्प को चुनें. इसके बाद, सुरक्षा के नियमों से जुड़ा डिसक्लेमर पढ़ने के बाद, चालू करें पर क्लिक करें.

इस कोडलैब के लिए स्टार्टर कोड में ज़्यादा सुरक्षित नियम शामिल हैं. हम उन्हें बाद में कोडलैब (कोड बनाना सीखना) में डिप्लॉय करेंगे.

Cloud Storage चालू करना

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

आपको Cloud Storage चालू करना होगा:

1. Firebase कंसोल के डेवलप करें सेक्शन में, स्टोरेज पर क्लिक करें.
2. शुरू करें पर क्लिक करें.
3. अपने Firebase प्रोजेक्ट के लिए सुरक्षा नियमों से जुड़ा डिसक्लेमर पढ़ें. इसके बाद, ठीक है पर क्लिक करें.

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

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

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

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

firebase --version

पक्का करें कि आपके Firebase सीएलआई का वर्शन v8.0.0 या उसके बाद का वर्शन हो.

3. नीचे दिए गए निर्देश की मदद से, Firebase सीएलआई को अनुमति दें:

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 परफ़ॉर्मेंस मॉनिटर करने वाले SDK टूल के साथ इंटिग्रेट करने के और भी तरीके हैं. ज़्यादा जानकारी के लिए, वेब के लिए परफ़ॉर्मेंस मॉनिटर करने की सुविधा का इस्तेमाल शुरू करना देखें.

यहां दिए गए तरीके से, 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. अपने ऐप्लिकेशन में कस्टम एट्रिब्यूट जोड़ना

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

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

index.js

 ...

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

 ...

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

9. [Extend] User Timing API की मदद से कस्टम ट्रेस जोड़ें

Firebase परफ़ॉर्मेंस मॉनिटर करने वाले SDK टूल को डिज़ाइन किया गया था, ताकि इसे एसिंक्रोनस रूप से लोड किया जा सके. इसलिए, पेज लोड के दौरान वेब ऐप्लिकेशन की परफ़ॉर्मेंस पर इसका गलत असर न पड़े. SDK टूल लोड होने से पहले, Firebase Performance Monitoring API उपलब्ध नहीं होता. इस स्थिति में, 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.appspot.com
✔  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 कंसोल में) में परफ़ॉर्मेंस का डेटा देखा जा सकता है.

ध्यान दें: आम तौर पर, परफ़ॉर्मेंस डेटा 12 घंटे में दिखने लगता है. अगर आपको 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/