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

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

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

3b1284f5144b54f6.png

আপনি কি শিখবেন

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

আপনি কি প্রয়োজন হবে

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

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

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

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

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

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

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

3. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন৷

একটি ফায়ারবেস প্রকল্প তৈরি করুন

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

আপনার ফায়ারবেস প্রকল্পের জন্য প্রজেক্ট আইডি মনে রাখবেন।

  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

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

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

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

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

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

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

Firebase কমান্ড-লাইন ইন্টারফেস (CLI) আপনাকে Firebase হোস্টিং ব্যবহার করার অনুমতি দেয় স্থানীয়ভাবে আপনার ওয়েব অ্যাপ পরিবেশন করার পাশাপাশি আপনার 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. আমাদের একটি কনফিগারেশন অবজেক্টের সাথে Firebase SDK আরম্ভ করতে হবে যাতে Firebase প্রকল্প এবং যে ওয়েব অ্যাপটি আমরা ব্যবহার করতে চাই সে সম্পর্কে তথ্য রয়েছে। যেহেতু আমরা ফায়ারবেস হোস্টিং ব্যবহার করছি, আপনি একটি বিশেষ স্ক্রিপ্ট আমদানি করতে পারেন যা আপনার জন্য এই কনফিগারেশনটি করবে। এই 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();

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

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

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

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

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

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

আমরা User Timeing 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>
  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>

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

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

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

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

  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 কনসোল এবং পারফরমেন্স ট্যাবে যান। আপনি যদি "SDK সনাক্ত করা হয়েছে" দেখানো একটি স্বাগত বার্তা দেখতে পান, তাহলে আপনি সফলভাবে Firebase পারফরম্যান্স মনিটরিং-এর সাথে একত্রিত হয়েছেন!

30df67e5a07d03b0.png

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

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

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

নতুন বার্তাগুলি আপনার নির্বাচিত চিত্রগুলির সাথে অ্যাপের UI-তে প্রদর্শিত হওয়া উচিত।

11. ড্যাশবোর্ড মনিটর করুন

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

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

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

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

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

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

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

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

26a2be152a77ffb9.png

12. অভিনন্দন!

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

আমরা যা কভার করেছি:

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

আরও জানুন: