ওয়েবের জন্য ফায়ারবেস পারফরমেন্স মনিটরিং

1। সংক্ষিপ্ত বিবরণ

এই কোডল্যাবে, আপনি শিখবেন কিভাবে চ্যাট ওয়েব অ্যাপের পারফরম্যান্স পরিমাপ করতে ফায়ারবেস পারফরমেন্স মনিটরিং ব্যবহার করতে হয়। পরিদর্শন https://fireperf-friendlychat.web.app/ একটি লাইভ ডেমো দেখতে।

3b1284f5144b54f6.png

আপনি যা শিখবেন

  • আউট-অফ-দ্য-বক্স মেট্রিক্স (পেজ লোড এবং নেটওয়ার্ক রিকোয়েস্ট) পেতে আপনার ওয়েব অ্যাপে ফায়ারবেস পারফরম্যান্স মনিটরিং কিভাবে যোগ করবেন।
  • কাস্টম ট্রেস দিয়ে কোডের একটি নির্দিষ্ট টুকরা কিভাবে পরিমাপ করা যায়।
  • কাস্টম ট্রেসের সাথে যুক্ত অতিরিক্ত, কাস্টম মেট্রিকগুলি কীভাবে রেকর্ড করবেন।
  • কাস্টম অ্যাট্রিবিউট দিয়ে কিভাবে আপনার পারফরম্যান্স ডেটাকে আরও ভাগ করা যায়।
  • আপনার ওয়েব অ্যাপের পারফরম্যান্স বুঝতে পারফরম্যান্স মনিটরিং ড্যাশবোর্ড কীভাবে ব্যবহার করবেন।

আপনার যা লাগবে

  • আইডিই বা পাঠ্য যেমন আপনার পছন্দের এডিটর, WebStorm , অ্যাটম , সাবলাইম বা বনাম কোড
  • একটি টার্মিনাল/কনসোল
  • আপনার পছন্দের একটি ব্রাউজার, যেমন ক্রোম
  • কোডল্যাবের নমুনা কোড (কিভাবে কোড পেতে হয় তার জন্য এই কোডল্যাবের পরবর্তী অংশ দেখুন।)

2. নমুনা কোড পান

ক্লোন codelab এর GitHub সংগ্রহস্থলের কম্যান্ড লাইন থেকে:

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

অন্যথা, আপনি Git ইনস্টল না থাকে তাহলে, আপনি পারেন একটি জিপ ফাইল হিসেবে রেপো ডাউনলোড

স্টার্টার অ্যাপ আমদানি করুন

আপনার আইডিই খোলা ব্যবহার করে, বা 📁 আমদানি performance-monitoring-start ক্লোন সংগ্রহস্থল থেকে নির্দেশিকা। এই 📁 performance-monitoring-start ডিরেক্টরির codelab, যা একটি চ্যাট ওয়েব অ্যাপ্লিকেশন জন্য শুরু কোড রয়েছে।

3. একটি Firebase প্রকল্প তৈরি করুন এবং সেট আপ করুন

একটি Firebase প্রকল্প তৈরি করুন

  1. ইন Firebase কনসোল , ক্লিক করুন প্রকল্প যুক্ত করো।
  2. আপনার Firebase প্রকল্পের নাম FriendlyChat

আপনার Firebase প্রকল্পের জন্য প্রকল্প আইডি মনে রাখবেন।

  1. প্রকল্প তৈরি করুন ক্লিক করুন।

প্রকল্পে একটি Firebase ওয়েব অ্যাপ যুক্ত করুন

  1. ওয়েব আইকনে ক্লিক করুন 58d6543a156e56f9.png একটি নতুন Firebase ওয়েব অ্যাপ তৈরি করতে।
  2. ডাকনামে অ্যাপ্লিকেশন নিবন্ধন Friendly Chat , এবং তারপর বক্স এছাড়াও এই app এর জন্য হোস্টিং Firebase সেট আপ পরবর্তী চেক করুন।
  3. নিবন্ধন অ্যাপ্লিকেশন ক্লিক করুন।
  4. বাকি ধাপগুলি ক্লিক করুন। আপনাকে এখনই অন-স্ক্রিন নির্দেশাবলী অনুসরণ করতে হবে না; এগুলি এই কোডল্যাবের পরবর্তী ধাপে অন্তর্ভুক্ত করা হবে।

ea9ab0db531a104c.png

Firebase প্রমাণীকরণের জন্য Google সাইন-ইন সক্ষম করুন

ব্যবহারকারীরা তাদের Google অ্যাকাউন্টের সঙ্গে চ্যাট অ্যাপ্লিকেশন সাইন ইন করার অনুমতি দিতে, আমরা Google সাইন-ইন পদ্ধতি ব্যবহার করব।

আপনি Google সাইন-ইন সক্ষম করতে হবে:

  1. Firebase কনসোলে, বাম প্যানেলে বিকাশ অধ্যায় নির্ধারণ করুন।
  2. প্রমাণীকরণ ক্লিক করুন, তারপর ক্লিক সাইন-ইন পদ্ধতি ট্যাব ( কনসোল যেতে )।
  3. Google সাইন-ইন প্রদানকারী সক্ষম করুন, এবং তারপর সংরক্ষণ ক্লিক করুন।

7f3040a646c2e502.png

ক্লাউড ফায়ারস্টোর সক্ষম করুন

ওয়েব অ্যাপ্লিকেশন ব্যবহার ক্লাউড Firestore চ্যাট বার্তা সংরক্ষণ করুন এবং নতুন চ্যাট বার্তা প্রাপ্ত সদস্যতা।

আপনাকে ক্লাউড ফায়ারস্টোর সক্ষম করতে হবে:

  1. ইন Firebase কনসোল অধ্যায় বিকাশ এর ডাটাবেজ এ ক্লিক করুন।
  2. ক্লাউড Firestore ফলকে ডেটাবেস তৈরি করে ক্লিক করুন।
  3. পরীক্ষা মোডে বিকল্প স্টার্ট নির্বাচন করুন, তারপর নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ার পর সক্ষম করুন এ ক্লিক করুন।

এই কোডল্যাবের স্টার্টার কোডে আরো নিরাপদ নিয়ম অন্তর্ভুক্ত রয়েছে। আমরা সেগুলি পরে কোডল্যাবে স্থাপন করব।

24bd1a097492eac6.png

ক্লাউড স্টোরেজ সক্ষম করুন

ওয়েব অ্যাপ ফায়ারবেসের জন্য ক্লাউড স্টোরেজ ব্যবহার করে ছবি সংরক্ষণ, আপলোড এবং শেয়ার করার জন্য।

আপনাকে ক্লাউড স্টোরেজ সক্ষম করতে হবে:

  1. ইন Firebase কনসোল অধ্যায় বিকাশ এর সংগ্রহস্থল ক্লিক করুন।
  2. শুরু করা যাক ক্লিক করুন।
  3. আপনার Firebase প্রকল্পের জন্য নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন, এবং তারপর পেয়েছেন এটি ক্লিক করুন।

শুরুর কোডটিতে একটি মৌলিক নিরাপত্তা নিয়ম অন্তর্ভুক্ত রয়েছে, যা আমরা পরে কোডল্যাবে স্থাপন করব।

4. Firebase কমান্ড-লাইন ইন্টারফেস ইনস্টল করুন

ফায়ারবেস কমান্ড-লাইন ইন্টারফেস (সিএলআই) আপনাকে আপনার ওয়েব অ্যাপটি স্থানীয়ভাবে পরিবেশন করার পাশাপাশি আপনার ওয়েব অ্যাপকে আপনার ফায়ারবেস প্রকল্পে স্থাপন করতে ফায়ারবেস হোস্টিং ব্যবহার করতে দেয়।

  1. অনুসরণ করে CLI ইনস্টল করুন এই নির্দেশাবলী Firebase ডক্সে।
  2. একটি টার্মিনালে নিম্নলিখিত কমান্ডটি চালানোর মাধ্যমে CLI সঠিকভাবে ইনস্টল করা হয়েছে তা যাচাই করুন:
firebase --version

আপনার Firebase CLI এর ভার্সন v8.0.0 বা তার পরে আছে তা নিশ্চিত করুন।

  1. নিম্নলিখিত কমান্ডটি চালানোর মাধ্যমে Firebase CLI অনুমোদন করুন:
firebase login

আমরা আপনার অ্যাপের স্থানীয় ডিরেক্টরি (যে কোডটি আপনি আগে কোডল্যাবে ক্লোন করেছিলেন) থেকে Firebase হোস্টিংয়ের জন্য আপনার অ্যাপের কনফিগারেশন টানতে ওয়েব অ্যাপ টেমপ্লেট সেট আপ করেছি। কিন্তু কনফিগারেশন টানতে, আমাদের আপনার অ্যাপকে আপনার ফায়ারবেস প্রকল্পের সাথে যুক্ত করতে হবে।

  1. নিশ্চিত করুন যে আপনার কমান্ড লাইন আপনার অ্যাপ্লিকেশনের স্থানীয় অ্যাক্সেস করছে করুন performance-monitoring-start নির্দেশিকা।
  2. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার অ্যাপকে আপনার ফায়ারবেস প্রকল্পের সাথে সংযুক্ত করুন:
firebase use --add
  1. অনুরোধ করা হলে, আপনার প্রকল্প আইডি নির্বাচন করুন, এবং তারপর আপনার ফায়ারবেস প্রকল্পকে একটি উপনাম দিন।

যদি আপনার একাধিক পরিবেশ (উত্পাদন, মঞ্চায়ন, ইত্যাদি) থাকে তবে একটি উপনাম দরকারী। যাইহোক, এই codelab জন্য, এর ঠিক উপনাম ব্যবহার করার অনুমতি default

  1. আপনার কমান্ড লাইনে বাকি নির্দেশাবলী অনুসরণ করুন।

5. ফায়ারবেস পারফরমেন্স মনিটরিং এর সাথে সংহত করুন

(পড়ুন আছে Firebase পারফরমেন্স ওয়েবের জন্য SDK এর মনিটরিং সাথে সংহত করতে বিভিন্ন উপায় আছে ডকুমেন্টেশন বিস্তারিত জানার জন্য)। এই codelab, আমরা হোস্টিং URL গুলি থেকে পর্যবেক্ষণ কর্মক্ষমতা সক্ষম করব।

কর্মক্ষমতা পর্যবেক্ষণ যোগ করুন এবং Firebase আরম্ভ করুন

  1. খুলুন src/index.js ফাইল, তারপর নিচের লাইন যোগ TODO Firebase কর্মক্ষমতা নিরীক্ষণের SDK এর অন্তর্ভুক্ত করা।

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. আমাদের ফায়ারবেস এসডিকে একটি কনফিগারেশন অবজেক্ট দিয়ে আরম্ভ করতে হবে যাতে ফায়ারবেস প্রকল্প এবং আমরা যে ওয়েব অ্যাপটি ব্যবহার করতে চাই সে সম্পর্কে তথ্য রয়েছে। যেহেতু আমরা ফায়ারবেস হোস্টিং ব্যবহার করছি, আপনি একটি বিশেষ স্ক্রিপ্ট আমদানি করতে পারেন যা আপনার জন্য এই কনফিগারেশনটি করবে। এই codelab জন্য, আমরা ইতিমধ্যে নীচে আপনার জন্য নিম্নলিখিত লাইন যোগ করেছি public/index.html ফাইল, কিন্তু দুবার-যাচাই করুন এটি নেই।

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. ইন src/index.js ফাইল, নিচের লাইন যোগ TODO কর্মক্ষমতা নিরীক্ষণের আরম্ভ করতে।

index.js

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

পারফরম্যান্স মনিটরিং এখন স্বয়ংক্রিয়ভাবে আপনার জন্য পৃষ্ঠা লোড এবং নেটওয়ার্ক অনুরোধ মেট্রিক্স সংগ্রহ করবে যখন ব্যবহারকারীরা আপনার সাইট ব্যবহার করবে! ডকুমেন্টেশন পড়ুন স্বয়ংক্রিয় পৃষ্ঠা লোড ট্রেস সম্পর্কে আরো জানতে।

প্রথম ইনপুট বিলম্ব পলিফিল লাইব্রেরি যোগ করুন

প্রথম ইনপুট বিলম্ব যেহেতু ব্রাউজার একটি ব্যবহারকারীর কোনো ভূমিকা সাড়া আপনার অ্যাপের সংবেদনশীলতা সম্পর্কে ব্যবহারকারীরা তাদের প্রথম ইমপ্রেশন দেয় দরকারী।

প্রথম ইনপুট বিলম্ব শুরু হয় যখন ব্যবহারকারী প্রথমে পৃষ্ঠার একটি উপাদানের সাথে ইন্টারঅ্যাক্ট করে, যেমন একটি বোতাম বা হাইপারলিঙ্ক ক্লিক করা। ব্রাউজার ইনপুটে সাড়া দিতে সক্ষম হওয়ার সাথে সাথে এটি বন্ধ হয়ে যায়, যার অর্থ ব্রাউজার আপনার বিষয়বস্তু লোড বা বিশ্লেষণে ব্যস্ত নয়।

এই পলিফিল লাইব্রেরি পারফরম্যান্স মনিটরিং ইন্টিগ্রেশনের জন্য alচ্ছিক।

খুলুন public/index.html ফাইল, তারপর uncomment নিম্নলিখিত লাইন।

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 পারফরমেন্স মনিটরিং ব্যবহার করে কাস্টম ট্রেস যোগ করা সম্পর্কে জানতে পারেন। আপনি যদি শুধুমাত্র স্বয়ংক্রিয় ট্রেস সংগ্রহ করতে চান, তাহলে "স্থাপন করুন এবং ছবি পাঠানো শুরু করুন" বিভাগে যান।

6. আপনার অ্যাপে একটি কাস্টম ট্রেস যুক্ত করুন

কর্মক্ষমতা নিরীক্ষণের কাস্টম ট্রেস তৈরি করতে পারবেন। একটি কাস্টম ট্রেস হল আপনার অ্যাপের একটি এক্সিকিউশন ব্লকের সময়কালের প্রতিবেদন। আপনি SDK দ্বারা প্রদত্ত API গুলি ব্যবহার করে একটি কাস্টম ট্রেসের শুরু এবং শেষ নির্ধারণ করেন।

  1. ইন src/index.js ফাইল, একটি কার্যকারিতা বস্তুর পান, তারপরে একটি চিত্র বার্তা আপলোড করার জন্য একটি কাস্টম ট্রেস তৈরি করুন।

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. একটি কাস্টম ট্রেস রেকর্ড করার জন্য, আপনাকে ট্রেসটির জন্য প্রারম্ভিক বিন্দু এবং স্টপিং পয়েন্ট নির্দিষ্ট করতে হবে। আপনি একটি টাইমার হিসাবে একটি ট্রেস মনে করতে পারেন।

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 টাইপ সংগ্রহ করতে পারেন।

  1. কাস্টম ট্রেস আপনার সংজ্ঞায়িত ব্যবহার করুন src/index.js ফাইল।
  2. নিচের লাইন যোগ করুন TODO আপলোড ইমেজ MIME প্রকার রেকর্ড করতে।

index.js

 ...

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

 ...

এই বৈশিষ্ট্যটি আপলোড করা ছবির প্রকারের উপর ভিত্তি করে কাস্টম ট্রেস সময়কালকে শ্রেণীবদ্ধ করতে পারফরম্যান্স মনিটরিং সক্ষম করে।

9. [প্রসারিত করুন] ব্যবহারকারীর সময় API এর সাথে একটি কাস্টম ট্রেস যুক্ত করুন

ফায়ারবেস পারফরমেন্স মনিটরিং এসডিকে ডিজাইন করা হয়েছিল যাতে এটি অ্যাসিঙ্ক্রোনাসভাবে লোড করা যায়, এবং তাই এটি পৃষ্ঠা লোডের সময় ওয়েব অ্যাপের পারফরম্যান্সকে নেতিবাচকভাবে প্রভাবিত করবে না। SDK লোড হওয়ার আগে, Firebase Performance Monitoring API উপলব্ধ নয়। এই দৃশ্যকল্প ইন, আপনি কি এখনও ব্যবহার করে কাস্টম ট্রেস যুক্ত করতে সক্ষম হয় ব্যবহারকারী টাইমিং এপিআই । Firebase কর্মক্ষমতা SDK থেকে মেয়াদের তুলে নেব পরিমাপ () এবং তাদেরকে কাস্টম ট্রেস হিসাবে লগ ইন করুন।

আমরা ইউজার টাইমিং এপিআই ব্যবহার করে অ্যাপ স্টাইলিং স্ক্রিপ্ট লোড করার সময়কাল পরিমাপ করতে যাচ্ছি।

  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>
  1. অ্যাপ স্টাইলিং স্ক্রিপ্ট লোডের শেষ চিহ্নিত করতে এবং শুরু এবং শেষের মধ্যে সময়কাল পরিমাপ করতে নিম্নলিখিত লাইনগুলি যুক্ত করুন।

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>

আপনি এখানে যে এন্ট্রি তৈরি করেছেন তা স্বয়ংক্রিয়ভাবে ফায়ারবেস পারফরমেন্স মনিটরিং দ্বারা সংগ্রহ করা হবে। তোমাকে ডেকেছিলাম একটি কাস্টম ট্রেস খুঁজে পেতে সক্ষম হতে হবে loadStyling Firebase পারফরমেন্স কনসোলে পরে।

10. স্থাপন করুন এবং ছবি পাঠানো শুরু করুন

ফায়ারবেস হোস্টিংয়ে স্থাপন করুন

আপনার কোডে ফায়ারবেস পারফরম্যান্স মনিটরিং যোগ করার পর, ফায়ারবেস হোস্টিংয়ে আপনার কোড স্থাপন করতে এই ধাপগুলি অনুসরণ করুন:

  1. নিশ্চিত করুন যে আপনার কমান্ড লাইন আপনার অ্যাপ্লিকেশনের স্থানীয় অ্যাক্সেস করছে করুন performance-monitoring-start নির্দেশিকা।
  2. নিচের কমান্ডটি চালিয়ে আপনার ফাইলগুলিকে আপনার ফায়ারবেস প্রকল্পে স্থাপন করুন:
firebase deploy
  1. কনসোল নিম্নলিখিত প্রদর্শন করা উচিত:
=== 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
  1. : যে এখন সম্পূর্ণরূপে হোস্টিং Firebase ব্যবহার হোস্ট আপনার খুব নিজের Firebase সাবডোমেন দুই আপনার ওয়েব অ্যাপ্লিকেশন যান https://<projectId>.firebaseapp.com এবং https://<projectId>.web.app

যাচাই করুন যে কর্মক্ষমতা পর্যবেক্ষণ সক্ষম

ওপেন Firebase কনসোল এবং পারফরমেন্স ট্যাবে যান। যদি আপনি একটি স্বাগত বার্তা দেখেন যা "এসডিকে সনাক্ত" দেখায়, তাহলে আপনি সফলভাবে ফায়ারবেস পারফরম্যান্স মনিটরিং এর সাথে একীভূত হয়েছেন!

30df67e5a07d03b0.png

চিত্র বার্তা পাঠান

আপনার চ্যাট অ্যাপে ছবি পাঠিয়ে কিছু পারফরম্যান্স ডেটা তৈরি করুন।

  1. আপনার চ্যাট অ্যাপে সাইন ইন করার পর ইমেজ আপলোড বাটনে ক্লিক করুন 13734cb66773e5a3.png
  2. ফাইল পিকার ব্যবহার করে একটি ছবি ফাইল নির্বাচন করুন।
  3. একাধিক চিত্র পাঠানোর চেষ্টা করুন (কয়েক নমুনা সংরক্ষিত থাকে public/images/ ) যাতে কাস্টম মেট্রিক্স এবং কাস্টম বৈশিষ্ট্যাবলী বিতরণের পরীক্ষা করতে পারেন।

আপনার নির্বাচিত ছবি সহ অ্যাপের UI- এ নতুন বার্তা প্রদর্শন করা উচিত।

11. ড্যাশবোর্ড পর্যবেক্ষণ করুন

আপনার ওয়েব অ্যাপ স্থাপন এবং ব্যবহারকারী হিসেবে ইমেজ বার্তা পাঠানোর পর, আপনি পারফরম্যান্স মনিটরিং ড্যাশবোর্ডে (ফায়ারবেস কনসোলে) পারফরম্যান্স ডেটা পর্যালোচনা করতে পারেন।

আপনার ড্যাশবোর্ড অ্যাক্সেস করুন

  1. ইন Firebase কনসোল , প্রকল্প আপনার আছে নির্বাচন Friendly Chat অ্যাপ্লিকেশান।
  2. বাম প্যানেলের মধ্যে কোয়ালিটির অধ্যায় সনাক্ত, ও পারফরমেন্স ক্লিক করুন।

ডিভাইসের ডেটা পর্যালোচনা করুন

কর্মক্ষমতা পর্যবেক্ষণ আপনার অ্যাপের ডেটা প্রক্রিয়া করার পরে, আপনি ড্যাশবোর্ডের উপরের অংশে ট্যাব দেখতে পাবেন। আপনি যদি এখনও কোন ডেটা বা ট্যাব দেখতে না পান তবে পরে আবার পরীক্ষা করতে ভুলবেন না।

  1. ডিভাইস ট্যাবে ক্লিক করুন।
  • পৃষ্ঠা লোড সারণি কর্মক্ষমতা স্বয়ংক্রিয়ভাবে পর্যবেক্ষণ শো বিভিন্ন কর্মক্ষমতা বৈশিষ্ট্যের মান সংগ্রহ করা হয় যখন আপনার পৃষ্ঠার লোড হচ্ছে।
  • সময়কাল টেবিল দেখায় যা আপনি আপনার অ্যাপ্লিকেশনের কোডে সংজ্ঞায়িত করেছি কোনো কাস্টম ট্রেস।
  1. ট্রেস জন্য নির্দিষ্ট বৈশিষ্ট্যের মান পর্যালোচনা করতে সময়কাল টেবিলে saveImageMessage ক্লিক করুন।

e28758fd02d9ffac.png

  1. মাপের চিত্র বিতরণের পর্যালোচনা করতে মোট ক্লিক করুন। এই কাস্টম ট্রেসের জন্য ছবির আকার পরিমাপ করার জন্য আপনি যোগ করা মেট্রিক দেখতে পারেন।

c3cbcfc0c739a0a8.png

  1. ওভার সময় পূর্ববর্তী ধাপে মোট পরবর্তী ক্লিক করুন। এছাড়াও আপনি কাস্টম ট্রেস স্থিতিকাল দেখতে পারেন। আরো আরো বিস্তারিত সংগৃহীত ডেটা পর্যালোচনা করতে ক্লিক করুন।

16983baa31e05732.png

  1. পৃষ্ঠা খোলে যা, আপনি imageType ক্লিক করে সেগমেন্ট ইমেজ MIME প্রকার দ্বারা সময়কাল তথ্য পারেন। এই নির্দিষ্ট ডেটা ইমেজ টাইপ বৈশিষ্ট্যের কারণে লগ করা হয়েছে যা আপনি আপনার কাস্টম ট্রেসে যুক্ত করেছেন।

8e5c9f32f42a1ca1.png

নেটওয়ার্ক ডেটা পর্যালোচনা করুন

একটি HTTP / এস নেটওয়ার্ক অনুরোধের একটি রিপোর্ট যে যেমনটি প্রতিক্রিয়া সময় ও নেটওয়ার্ক কল পে লোড আকার।

  1. পারফরম্যান্স মনিটরিং ড্যাশবোর্ডের মূল পর্দায় ফিরে যান।
  2. আপনার ওয়েব অ্যাপের জন্য নেটওয়ার্ক অনুরোধের এন্ট্রির একটি তালিকা দেখতে নেটওয়ার্ক ট্যাবে ক্লিক করুন।
  3. ধীর অনুরোধগুলি সনাক্ত করতে তাদের মাধ্যমে ব্রাউজ করুন এবং আপনার অ্যাপের কর্মক্ষমতা উন্নত করার জন্য একটি ফিক্সে কাজ শুরু করুন!

26a2be152a77ffb9.png

12. অভিনন্দন!

আপনি পারফরম্যান্স পর্যবেক্ষণের জন্য ফায়ারবেস এসডিকে সক্ষম করেছেন এবং আপনার চ্যাট অ্যাপের বাস্তব বিশ্বের পারফরম্যান্স পরিমাপ করার জন্য স্বয়ংক্রিয় ট্রেস এবং কাস্টম ট্রেস সংগ্রহ করেছেন!

আমরা যা আচ্ছাদিত করেছি:

  • আপনার ওয়েব অ্যাপে Firebase পারফরমেন্স মনিটরিং SDK যোগ করা।
  • আপনার কোডে কাস্টম ট্রেস যোগ করা।
  • কাস্টম ট্রেসের সাথে আবদ্ধ কাস্টম মেট্রিক রেকর্ড করা।
  • কাস্টম অ্যাট্রিবিউট ব্যবহার করে পারফরম্যান্স ডেটা সেগমেন্ট করা।
  • আপনার অ্যাপের পারফরম্যান্স সম্পর্কে অন্তর্দৃষ্টি পেতে পারফরম্যান্স মনিটরিং ড্যাশবোর্ড কীভাবে ব্যবহার করবেন তা বোঝা।

আরো জানুন: