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

1- نظرة عامة

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

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

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

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

المتطلبات

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

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

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

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

بدلاً من ذلك، إذا لم يكن لديك git مثبّتًا، يمكنك تنزيل المستودع كملف 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)، ما يعني أنّه مرتبط بحساب على "الفوترة في السحابة الإلكترونية".

• يتطلّب حساب "الفوترة في Google 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. انقر على إنشاء.

إعداد "مساحة التخزين في السحابة الإلكترونية" لبرنامج 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 CLI عن طريق تنفيذ الأمر التالي:

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

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 في جدول المدّات لمراجعة مقاييس محدّدة للتتبّع.

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/‎