مراقبة أداء Firebase للويب

1- نظرة عامة

في هذا الدرس التطبيقي حول الترميز، ستتعلم كيفية استخدام ميزة "مراقبة أداء Firebase" لقياس أداء تطبيق ويب للدردشة. انتقِل إلى https://fireperf-Friendlychat.web.app/ لمشاهدة عرض توضيحي مباشر.

يهدف هذا الدليل التعليمي إلى إنشاء تطبيقات ويب باستخدام دليل Firebase التعليمي لإنشاء تطبيقات ويب الذي يشرح كيفية إنشاء تطبيق محادثات باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase على الويب. إذا كنت تريد التعرّف على كيفية استخدام منصة Firebase على الويب من خلال إنشاء تطبيق محادثات، اتّبِع الدرس التطبيقي حول الترميز في Firebase على الويب أولاً. إذا كنت تعرف كيفية استخدام منصة Firebase وواجهة سطر الأوامر وتريد التعرُّف على ميزة "مراقبة أداء Firebase"، فأنت في المكان الصحيح.

ما ستتعرّف عليه

• كيفية إضافة ميزة "مراقبة الأداء في Firebase" إلى تطبيق الويب للحصول على مقاييس جاهزة للاستخدام (تحميل الصفحة وطلبات الشبكة)
• كيفية قياس جزء معيّن من الرمز البرمجي باستخدام عمليات التتبّع المخصّصة
• كيفية تسجيل مقاييس مخصّصة إضافية مرتبطة بتتبُّع مخصَّص
• كيفية تقسيم بيانات الأداء بشكل أكبر باستخدام سمات مخصّصة
• كيفية استخدام لوحة بيانات مراقبة الأداء لفهم أداء تطبيق الويب

المتطلبات

• حزمة تطوير البرامج (IDE) أو محرِّر نصوص من اختيارك، مثل WebStorm أو Atom أو Sublime أو VS Code
• نافذة طرفية/وحدة تحكّم
• متصفح من اختيارك، مثل Chrome
• رمز نموذجي للدرس التطبيقي حول الترميز (اطّلِع على القسم التالي من هذا الدرس التطبيقي لمعرفة كيفية الحصول على الرمز).

2- الحصول على نموذج الرمز

استنسِخ مستودع GitHub الخاص ببرنامج التعليم البرمجي من سطر الأوامر:

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

بدلاً من ذلك، إذا لم يكن git مثبّتًا لديك، يمكنك تنزيل Repo كملف ZIP.

يحتوي مستودع friendlychat-web على نماذج مشاريع لمنصات متعددة.

لا يستخدم هذا الدليل التعليمي سوى المستودعَين التاليَين:

• 📁 performance-monitoring-start: رمز البدء الذي ستستند إليه خلال هذا الدرس التطبيقي حول الترميز
• 📁 performance-monitoring: الرمز الكامل لنموذج التطبيق المكتمل.

ملاحظة: إذا كنت تريد تشغيل التطبيق النهائي، لا يزال عليك إنشاء مشروع 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

لاستخدام Cloud Storage لبرنامج Firebase، يجب أن يكون مشروعك في Firebase ضمن خطة تسعير "الدفع حسب الاستخدام" (Blaze)، ما يعني أنّه مرتبط بحساب فوترة Cloud.

• يتطلب حساب الفوترة في Cloud طريقة دفع، مثل بطاقة الائتمان.
• إذا كنت حديث العهد باستخدام Firebase وGoogle Cloud، تحقّق ممّا إذا كنت مؤهلاً للحصول على رصيد بقيمة 300 دولار أمريكي وحساب "الفوترة في السحابة الإلكترونية" في الفترة التجريبية المجانية.
• إذا كنت تنفّذ هذا الدرس التطبيقي حول الترميز كجزء من حدث، اسأل المنظِّم عما إذا كانت هناك أي أرصدة متوفرة في Cloud.

لترقية مشروعك إلى خطة Blaze، اتّبِع الخطوات التالية:

1. في "وحدة تحكُّم Firebase"، اختَر ترقية خطتك.
2. اختَر خطة Blaze. اتّبِع التعليمات الظاهرة على الشاشة لربط حساب "فوترة على Cloud" بمشروعك.
   إذا كنت بحاجة إلى إنشاء حساب "فوترة على Cloud" كجزء من هذه الترقية، قد تحتاج إلى الرجوع إلى مسار الترقية في وحدة تحكّم Firebase لإكمال الترقية.

ملاحظة: يمكنك الرجوع إلى خطة الأسعار غير المدفوعة (Spark) بعد إكمال هذا الدليل التعليمي.

إضافة تطبيق ويب Firebase إلى المشروع

1. انقر على رمز الويب لإنشاء تطبيق ويب جديد على Firebase.
2. سجِّل التطبيق باستخدام اللقب Friendly Chat، ثم ضَع علامة في المربّع بجانب إعداد "استضافة Firebase" لهذا التطبيق أيضًا.
3. انقر على تسجيل التطبيق.
4. انقر على الخطوات المتبقية. لست بحاجة إلى اتّباع التعليمات الظاهرة على الشاشة الآن، وسنتناولها في الخطوات اللاحقة في هذا الدرس التطبيقي حول الترميز.

تفعيل ميزة "تسجيل الدخول بحساب Google" لمصادقة Firebase

للسماح للمستخدمين بتسجيل الدخول إلى تطبيق المحادثة باستخدام حساباتهم على Google، سنستخدم طريقة تسجيل الدخول من Google.

يجب تفعيل تسجيل الدخول باستخدام Google:

1. في وحدة تحكّم Firebase، ابحث عن قسم تطوير في اللوحة اليمنى.
2. انقر على المصادقة، ثم انقر على علامة التبويب طريقة تسجيل الدخول (الانتقال إلى وحدة التحكّم).
3. فعِّل مقدّم خدمة تسجيل الدخول في Google، ثم انقر على حفظ.

إعداد Cloud Firestore

يستخدم تطبيق الويب Cloud Firestore لحفظ رسائل المحادثة وتلقّي رسائل جديدة.

في ما يلي كيفية إعداد Cloud Firestore في مشروع Firebase:

1. في اللوحة اليمنى من "وحدة تحكُّم Firebase"، وسِّع إنشاء، ثم اختَر قاعدة بيانات Firestore.
2. انقر على إنشاء قاعدة بيانات.
3. اترك رقم تعريف قاعدة البيانات مضبوطًا على (default).
4. اختَر موقعًا جغرافيًا لقاعدة بياناتك، ثم انقر على التالي.
   إذا كان لديك تطبيق حقيقي، عليك اختيار موقع قريب من المستخدمين.
5. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية بشأن قواعد الأمان.
   في وقت لاحق من هذا الدليل التعليمي، ستضيف قواعد أمان لتأمين بياناتك. لا توزِّع تطبيقًا علنًا أو تعرضه بدون إضافة قواعد أمان لقاعدة بياناتك.
6. انقر على إنشاء.

إعداد خدمة Cloud Storage لمنصّة Firebase

يستخدم تطبيق الويب ميزة "التخزين في السحابة الإلكترونية" من Firebase لتخزين الصور وتحميلها ومشاركتها.

في ما يلي كيفية إعداد ميزة "التخزين في السحابة الإلكترونية" لبرنامج Firebase في مشروعك على Firebase:

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.
2. تأكَّد من تثبيت واجهة برمجة التطبيقات بشكل صحيح من خلال تنفيذ الأمر التالي في وحدة طرفية:

firebase --version

تأكَّد من أنّ إصدار Firebase CLI هو 8.0.0 أو إصدار أحدث.

3. فوّض واجهة سطر الأوامر في Firebase من خلال تشغيل الأمر التالي:

firebase login

لقد أعددنا نموذج تطبيق الويب لسحب إعدادات تطبيقك في "استضافة Firebase" من الدليل المحلي لتطبيقك (المستودع الذي نسخته سابقًا في ورشة رموز البرامج). ولكن لسحب الإعدادات، يجب ربط تطبيقك بمشروعك على Firebase.

4. تأكَّد من أنّ سطر الأوامر يصل إلى دليل performance-monitoring-start المحلي لتطبيقك.
5. اربط تطبيقك بمشروع Firebase من خلال تشغيل الأمر التالي:

firebase use --add

6. اختَر رقم تعريف مشروعك عندما يُطلب منك ذلك، ثمّ أدخِل اسمًا بديلاً لمشروعك على Firebase.

يكون الاسم المعرِّف مفيدًا إذا كانت لديك بيئات متعددة (مثل مرحلة الإنتاج والاختبار وما إلى ذلك). ومع ذلك، في هذا الدليل التعليمي حول الرموز البرمجية، لنستخدم العنوان البديل default.

7. اتبع التعليمات المتبقية في سطر الأوامر.

5- الدمج مع مراقبة أداء Firebase

تتوفّر طرق مختلفة للدمج مع حزمة تطوير البرامج (SDK) الخاصة بمراقبة أداء Firebase للويب (يُرجى الرجوع إلى المستندات للاطّلاع على التفاصيل). في هذا الدليل التعليمي حول رموز البرامج، سنفعّل ميزة مراقبة الأداء من عناوين URL المستضافة.

إضافة ميزة "مراقبة الأداء" وبدء استخدام Firebase

1. افتح ملف src/index.js، ثم أضِف السطر التالي أسفل TODO لتضمين حزمة SDK لمراقبة أداء Firebase.

index.js

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

2. نحتاج أيضًا إلى إعداد حزمة تطوير البرامج (SDK) لمنصّة Firebase باستخدام كائن ضبط يحتوي على معلومات عن مشروع 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();

ستجمع الآن أداة "مراقبة الأداء" تلقائيًا مقاييس تحميل الصفحة وطلبات الشبكة عندما يستخدم المستخدمون موقعك الإلكتروني. يمكنك الرجوع إلى المستندات لمزيد من المعلومات حول عمليات تتبُّع تحميل الصفحات تلقائيًا.

إضافة مكتبة polyfill الأولى لتأخير الإدخال

تُعد مهلة الاستجابة الأولى مفيدةً لأن استجابة المتصفح لتفاعل المستخدم تمنح المستخدمين انطباعاتهم الأولى حول مدى استجابة تطبيقك.

يبدأ مهلة الإدخال الأول عندما يتفاعل المستخدم لأول مرة مع عنصر على الصفحة، مثل النقر على زر أو رابط تشعبي. ويتوقف هذا الإجراء فورًا بعد أن يتمكّن المتصفّح من الاستجابة للإدخال، ما يعني أنّ المتصفّح ليس مشغولاً بتحميل المحتوى أو تحليله.

مكتبة polyfill هذه اختيارية لدمج مراقبة الأداء.

افتح ملف 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" في الرمز البرمجي.

هناك أيضًا طرق أخرى للدمج مع حزمة تطوير البرامج (SDK) لميزة "مراقبة الأداء" من 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 في الأداء.

1. يمكنك استخدام سجلّ التتبُّع المخصّص المحدّد في ملف src/index.js.
2. أضِف السطر التالي أسفل TODO لتسجيل نوع MIME للصورة التي تم تحميلها.

index.js

 ...

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

 ...

تتيح هذه السمة تتبُّع الأداء لتصنيف مدة التتبُّع المخصّصة استنادًا إلى نوع الصورة التي تم تحميلها.

9- [إضافة] إضافة تتبع مخصّص باستخدام User Timing API

تم تصميم حزمة تطوير البرامج (SDK) لمراقبة أداء Firebase بحيث يمكن تحميلها بشكل غير متزامن، وبالتالي لن تؤثر سلبًا في أداء تطبيقات الويب أثناء تحميل الصفحة. قبل تحميل حزمة تطوير البرامج (SDK)، لا تكون واجهة برمجة التطبيقات Firebase Performance Monitoring API متاحة. في هذا السيناريو، سيظل بإمكانك إضافة عمليات تتبُّع مخصّصة باستخدام User Timing API. ستلتقط حزمة تطوير البرامج (SDK) لأداء Firebase المدة من 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". ستتمكّن لاحقًا من العثور على تتبُّع مخصّص باسم loadStyling في "وحدة تحكّم الأداء في Firebase".

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).

ملاحظة: تظهر بيانات الأداء عادةً في غضون 12 ساعة. احرص على التحقّق مرة أخرى لاحقًا إذا لم تظهر لك أي نتائج في "وحدة تحكُّم Firebase".

الوصول إلى لوحة البيانات

1. في وحدة تحكُّم Firebase، اختَر المشروع الذي يتضمّن تطبيق Friendly Chat.
2. في اللوحة اليمنى، حدِّد موقع قسم الجودة، ثم انقر على الأداء.

مراجعة البيانات على الجهاز

بعد أن تنتهي مراقبة الأداء من معالجة بيانات تطبيقك، ستظهر لك علامات تبويب في أعلى لوحة البيانات. يُرجى التحقّق مرة أخرى لاحقًا إذا لم تظهر لك أي بيانات أو علامات تبويب حتى الآن.

1. انقر على علامة التبويب على الجهاز.

• يعرض جدول عمليات تحميل الصفحة مقاييس الأداء المختلفة التي تجمعها أداة مراقبة الأداء تلقائيًا أثناء تحميل صفحتك.
• يعرض جدول المدد أي آثار مخصّصة حدّدتها في رمز تطبيقك.

2. انقر على saveImageMessage في جدول Durations لمراجعة مقاييس محدّدة في عملية التتبّع.

3. انقر على تجميع لمراجعة توزيع أحجام الصور. يمكنك الاطّلاع على المقياس الذي أضفته لقياس حجم الصورة لهذا التتبّع المخصّص.

4. انقر على خيار على مدار الوقت بجانب تجميع في الخطوة السابقة. يمكنك أيضًا عرض مدة عملية التتبُّع المخصّصة. انقر على عرض المزيد لمراجعة البيانات التي تم جمعها بمزيد من التفاصيل.

5. في الصفحة التي يتم فتحها، يمكنك تقسيم بيانات المدة حسب نوع MIME للصورة من خلال النقر على imageType. تم تسجيل هذه البيانات المحدّدة بسبب سمة imageType التي أضفتها إلى التتبّع المخصّص.

مراجعة بيانات الشبكة

طلب شبكة HTTP/S هو تقرير يسجّل وقت الاستجابة وحجم الحمولة لطلبات البيانات من الشبكة.

1. ارجع إلى الشاشة الرئيسية في لوحة بيانات مراقبة الأداء.
2. انقر على علامة التبويب الشبكة للاطّلاع على قائمة بإدخالات طلبات الشبكة لتطبيق الويب.
3. يمكنك الاطّلاع عليها لتحديد الطلبات البطيئة وبدء العمل على إيجاد حلّ لتحسين أداء تطبيقك.

12- تهانينا!

لقد فعّلت حزمة تطوير البرامج (SDK) لمنصّة Firebase من أجل مراقبة الأداء وجمع عمليات التتبّع التلقائية والتتبّع المخصّص لقياس الأداء الفعلي لتطبيق المحادثات.

المواضيع التي تناولناها:

• إضافة حزمة تطوير البرامج (SDK) لميزة "مراقبة الأداء" في Firebase إلى تطبيق الويب
• إضافة عمليات تتبُّع مخصّصة إلى الرمز البرمجي
• تسجيل المقاييس المخصّصة المرتبطة بسجلّ التتبّع المخصّص
• تقسيم بيانات الأداء باستخدام السمات المخصّصة
• التعرّف على كيفية استخدام لوحة بيانات مراقبة الأداء للحصول على إحصاءات حول أداء تطبيقك

مزيد من المعلومات:

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