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

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

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

3b1284f5144b54f6.png সম্পর্কে

তুমি কি শিখবে

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

তোমার যা লাগবে

  • আপনার পছন্দের IDE অথবা টেক্সট এডিটর, যেমন WebStorm , Atom , Sublime , অথবা VS Code
  • একটি টার্মিনাল/কনসোল
  • আপনার পছন্দের একটি ব্রাউজার, যেমন Chrome
  • কোডল্যাবের নমুনা কোড (কোডটি কীভাবে পাবেন তার জন্য এই কোডল্যাবের পরবর্তী অংশটি দেখুন।)

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

কমান্ড লাইন থেকে কোডল্যাবের গিটহাব রিপোজিটরি ক্লোন করুন:

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

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

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

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

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

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

  1. আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
  2. একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ, FriendlyChat )।
  3. চালিয়ে যান ক্লিক করুন।
  4. যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
  5. (ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
  6. এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন ।
  7. Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।

আপনার Firebase মূল্য পরিকল্পনা আপগ্রেড করুন

Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করার জন্য, আপনার Firebase প্রকল্পটি pay-as-you go (Blaze) মূল্য পরিকল্পনায় থাকা প্রয়োজন, যার অর্থ এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

আপনার প্রকল্পটিকে ব্লেজ প্ল্যানে আপগ্রেড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করতে নির্বাচন করুন।
  2. ব্লেজ প্ল্যানটি নির্বাচন করুন। আপনার প্রকল্পের সাথে একটি ক্লাউড বিলিং অ্যাকাউন্ট লিঙ্ক করতে অন-স্ক্রিন নির্দেশাবলী অনুসরণ করুন।
    এই আপগ্রেডের অংশ হিসেবে যদি আপনার একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করার প্রয়োজন হয়, তাহলে আপগ্রেড সম্পূর্ণ করার জন্য আপনাকে Firebase কনসোলে আপগ্রেড ফ্লোতে ফিরে যেতে হতে পারে।

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

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

অনুসরণ

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

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

আপনাকে গুগল সাইন-ইন সক্ষম করতে হবে:

  1. ফায়ারবেস কনসোলে, বাম প্যানেলে ডেভেলপ বিভাগটি সনাক্ত করুন।
  2. Authentication এ ক্লিক করুন, তারপর Sign-in method ট্যাবে ক্লিক করুন ( console এ যান )।
  3. গুগল সাইন-ইন প্রদানকারী সক্ষম করুন, এবং তারপর সংরক্ষণ করুন এ ক্লিক করুন।

7f3040a646c2e502.png সম্পর্কে

ক্লাউড ফায়ারস্টোর সেট আপ করুন

ওয়েব অ্যাপটি চ্যাট বার্তা সংরক্ষণ এবং নতুন চ্যাট বার্তা গ্রহণের জন্য ক্লাউড ফায়ারস্টোর ব্যবহার করে।

আপনার Firebase প্রকল্পে Cloud Firestore কীভাবে সেট আপ করবেন তা এখানে দেওয়া হল:

  1. Firebase কনসোলের বাম প্যানেলে, Build প্রসারিত করুন এবং তারপর Firestore database নির্বাচন করুন।
  2. ডাটাবেস তৈরি করুন ক্লিক করুন।
  3. ডাটাবেস আইডি (default) এ সেট করে রাখুন।
  4. আপনার ডাটাবেসের জন্য একটি অবস্থান নির্বাচন করুন, তারপর পরবর্তী ক্লিক করুন।
    একটি আসল অ্যাপের জন্য, আপনাকে এমন একটি অবস্থান বেছে নিতে হবে যা আপনার ব্যবহারকারীদের কাছাকাছি।
  5. পরীক্ষা মোডে শুরু করুন ক্লিক করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন।
    এই কোডল্যাবে পরে, আপনার ডেটা সুরক্ষিত করার জন্য আপনি সুরক্ষা নিয়ম যোগ করবেন। আপনার ডাটাবেসের জন্য সুরক্ষা নিয়ম যোগ না করে কোনও অ্যাপ সর্বজনীনভাবে বিতরণ বা প্রকাশ করবেন না ।
  6. তৈরি করুন ক্লিক করুন।

Firebase এর জন্য ক্লাউড স্টোরেজ সেট আপ করুন

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

আপনার Firebase প্রকল্পে Firebase এর জন্য ক্লাউড স্টোরেজ কীভাবে সেট আপ করবেন তা এখানে দেওয়া হল:

  1. Firebase কনসোলের বাম প্যানেলে, Build প্রসারিত করুন এবং তারপর Storage নির্বাচন করুন।
  2. শুরু করুন ক্লিক করুন।
  3. আপনার ডিফল্ট স্টোরেজ বাকেটের জন্য একটি অবস্থান নির্বাচন করুন।
    US-WEST1 , US-CENTRAL1 , এবং US-EAST1 এর বাকেটগুলি Google ক্লাউড স্টোরেজের জন্য "সর্বদা বিনামূল্যে" স্তরের সুবিধা নিতে পারে। অন্যান্য সমস্ত অবস্থানের বাকেটগুলি Google ক্লাউড স্টোরেজের মূল্য এবং ব্যবহার অনুসরণ করে।
  4. পরীক্ষা মোডে শুরু করুন ক্লিক করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন।
    এই কোডল্যাবে পরে, আপনার ডেটা সুরক্ষিত করার জন্য আপনি সুরক্ষা নিয়ম যুক্ত করবেন। আপনার স্টোরেজ বাকেটের জন্য সুরক্ষা নিয়ম যুক্ত না করে কোনও অ্যাপ সর্বজনীনভাবে বিতরণ বা প্রকাশ করবেন না ।
  5. তৈরি করুন ক্লিক করুন।

৪. ফায়ারবেস কমান্ড-লাইন ইন্টারফেস ইনস্টল করুন

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

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

নিশ্চিত করুন যে আপনার Firebase CLI এর সংস্করণটি v8.0.0 বা তার পরবর্তী সংস্করণের।

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

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

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

যদি আপনার একাধিক পরিবেশ (প্রোডাকশন, স্টেজিং, ইত্যাদি) থাকে তবে একটি উপনাম কার্যকর। তবে, এই কোডল্যাবের জন্য, আসুন কেবল default উপনাম ব্যবহার করি।

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

৫. ফায়ারবেস পারফরম্যান্স মনিটরিংয়ের সাথে একীভূত করুন

ওয়েবের জন্য Firebase Performance Monitoring SDK-এর সাথে একীভূত করার বিভিন্ন উপায় রয়েছে (বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন)। এই কোডল্যাবে, আমরা Hosting URL গুলি থেকে কর্মক্ষমতা পর্যবেক্ষণ সক্ষম করব।

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

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

ইনডেক্স.জেএস 

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

index.html সম্পর্কে 

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

ইনডেক্স.জেএস 

// 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 Performance Monitoring এর সাথে ইন্টিগ্রেশন সম্পন্ন করেছেন!

নিম্নলিখিত ধাপগুলিতে, আপনি Firebase Performance Monitoring ব্যবহার করে কাস্টম ট্রেস যোগ করার পদ্ধতি শিখবেন। আপনি যদি শুধুমাত্র স্বয়ংক্রিয় ট্রেস সংগ্রহ করতে চান, তাহলে "Deploy and start sending images" বিভাগে যান।

৬. আপনার অ্যাপে একটি কাস্টম ট্রেস যোগ করুন

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

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

ইনডেক্স.জেএস 

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

ইনডেক্স.জেএস 

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

 ...

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

আপনি সফলভাবে একটি কাস্টম ট্রেস সংজ্ঞায়িত করেছেন! আপনার কোড স্থাপনের পরে, যদি কোনও ব্যবহারকারী একটি ছবি বার্তা পাঠান তবে কাস্টম ট্রেসের সময়কাল রেকর্ড করা হবে। এটি আপনাকে ধারণা দেবে যে বাস্তব বিশ্বের ব্যবহারকারীরা আপনার চ্যাট অ্যাপে ছবি পাঠাতে কত সময় নেয়।

৭. আপনার অ্যাপে একটি কাস্টম মেট্রিক যোগ করুন।

আপনি একটি কাস্টম ট্রেস কনফিগার করতে পারেন যাতে এর পরিধির মধ্যে ঘটে যাওয়া পারফরম্যান্স-সম্পর্কিত ইভেন্টগুলির জন্য কাস্টম মেট্রিক্স রেকর্ড করা যায়। উদাহরণস্বরূপ, আপনি একটি মেট্রিক ব্যবহার করে তদন্ত করতে পারেন যে আপলোডের সময়টি শেষ ধাপে সংজ্ঞায়িত কাস্টম ট্রেসের জন্য একটি ছবির আকার দ্বারা প্রভাবিত হয় কিনা।

  1. পূর্ববর্তী ধাপ থেকে কাস্টম ট্রেসটি সনাক্ত করুন (আপনার src/index.js ফাইলে সংজ্ঞায়িত)।
  2. আপলোড করা ছবির আকার রেকর্ড করতে TODO এর নিচে নিম্নলিখিত লাইনটি যোগ করুন।

ইনডেক্স.জেএস 

 ...

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

 ...

এই মেট্রিকটি কর্মক্ষমতা পর্যবেক্ষণকে কাস্টম ট্রেস সময়কাল এবং আপলোড করা ছবির আকার রেকর্ড করতে সক্ষম করে।

৮. আপনার অ্যাপে একটি কাস্টম অ্যাট্রিবিউট যোগ করুন

পূর্ববর্তী ধাপগুলির উপর ভিত্তি করে, আপনি আপনার কাস্টম ট্রেসগুলিতে কাস্টম অ্যাট্রিবিউটগুলিও সংগ্রহ করতে পারেন। কাস্টম অ্যাট্রিবিউটগুলি আপনার অ্যাপের নির্দিষ্ট বিভাগ অনুসারে ডেটা ভাগ করতে সাহায্য করতে পারে। উদাহরণস্বরূপ, MIME টাইপ কীভাবে কর্মক্ষমতাকে প্রভাবিত করতে পারে তা তদন্ত করার জন্য আপনি চিত্র ফাইলের MIME টাইপ সংগ্রহ করতে পারেন।

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

ইনডেক্স.জেএস 

 ...

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

 ...

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

৯. [এক্সটেন্ড] ইউজার টাইমিং এপিআই দিয়ে একটি কাস্টম ট্রেস যোগ করুন

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

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

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

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

  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.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
  1. আপনার নিজস্ব দুটি Firebase সাবডোমেনে Firebase Hosting ব্যবহার করে সম্পূর্ণরূপে হোস্ট করা ওয়েব অ্যাপটি দেখুন: https://<projectId>.firebaseapp.com এবং https://<projectId>.web.app ।

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

Firebase কনসোলটি খুলুন এবং Performance ট্যাবে যান। যদি আপনি "SDK সনাক্ত করা হয়েছে" দেখানো একটি স্বাগত বার্তা দেখতে পান, তাহলে আপনি Firebase Performance Monitoring-এর সাথে সফলভাবে ইন্টিগ্রেট করেছেন!

30df67e5a07d03b0.png সম্পর্কে

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

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

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

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

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

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

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

  1. Firebase কনসোলে , আপনার Friendly Chat অ্যাপ আছে এমন প্রকল্পটি নির্বাচন করুন।
  2. বাম প্যানেলে, গুণমান বিভাগটি খুঁজুন এবং কর্মক্ষমতা ক্লিক করুন।

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

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

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

অনুসরণ

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

c3cbcfc0c739a0a8.png সম্পর্কে

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

16983baa31e05732.png সম্পর্কে

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

8e5c9f32f42a1ca1.png সম্পর্কে

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

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

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

26a2be152a77ffb9.png সম্পর্কে

১২. অভিনন্দন!

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

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

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

আরও জানুন: