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

1. نظرة عامة

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

ماذا ستتعلم

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

ماذا ستحتاج

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

2. احصل على نموذج التعليمات البرمجية

استنساخ مستودع GitHub الخاص بـ codelab من سطر الأوامر:

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

بدلاً من ذلك ، إذا لم يكن لديك git مثبتًا ، فيمكنك تنزيل الريبو كملف مضغوط .

قم باستيراد تطبيق المبتدئين

باستخدام IDE الخاص بك ، افتح أو قم باستيراد دليل 📁 performance-monitoring-start directory من المستودع المستنسخ. يحتوي دليل performance-monitoring-start 📁 هذا على رمز البداية لمختبر الرموز ، وهو تطبيق دردشة على الويب.

3. إنشاء مشروع Firebase وإعداده

أنشئ مشروع Firebase

1. في وحدة تحكم Firebase ، انقر على إضافة مشروع .
2. قم بتسمية مشروع Firebase FriendlyChat .

تذكر معرّف المشروع لمشروع Firebase الخاص بك.

3. انقر فوق إنشاء مشروع .

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

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

تفعيل تسجيل الدخول إلى Google لمصادقة Firebase

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

ستحتاج إلى تمكين تسجيل الدخول إلى Google :

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

تفعيل Cloud Firestore

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

ستحتاج إلى تمكين Cloud Firestore:

1. في قسم التطوير بوحدة تحكم Firebase ، انقر على قاعدة البيانات .
2. انقر على إنشاء قاعدة بيانات في جزء Cloud Firestore.
3. حدد خيار البدء في وضع الاختبار ، ثم انقر فوق تمكين بعد قراءة إخلاء المسؤولية حول قواعد الأمان.

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

تفعيل التخزين السحابي

يستخدم تطبيق الويب Cloud Storage لـ Firebase لتخزين الصور وتحميلها ومشاركتها.

ستحتاج إلى تمكين التخزين السحابي:

1. في قسم التطوير بوحدة تحكم Firebase ، انقر على التخزين .
2. انقر فوق البدء .
3. اقرأ إخلاء المسؤولية حول قواعد الأمان لمشروع Firebase الخاص بك ، ثم انقر فوق حسنًا .

يشتمل رمز البداية على قاعدة أمان أساسية ، والتي سنقوم بنشرها لاحقًا في مختبر الرموز.

4. قم بتثبيت واجهة سطر أوامر Firebase

تسمح لك واجهة سطر أوامر Firebase (CLI) باستخدام Firebase Hosting لخدمة تطبيق الويب الخاص بك محليًا وكذلك لنشر تطبيق الويب الخاص بك في مشروع Firebase الخاص بك.

1. قم بتثبيت CLI باتباع هذه الإرشادات في مستندات Firebase.
2. تحقق من تثبيت CLI بشكل صحيح عن طريق تشغيل الأمر التالي في الجهاز الطرفي:

firebase --version

تأكد من أن إصدارك من Firebase CLI هو v8.0.0 أو أحدث.

3. قم بتفويض Firebase CLI عن طريق تشغيل الأمر التالي:

firebase login

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

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

firebase use --add

6. عند المطالبة ، حدد معرّف المشروع الخاص بك ، ثم امنح مشروع Firebase اسمًا مستعارًا.

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

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

5. التكامل مع مراقبة أداء Firebase

هناك طرق مختلفة للتكامل مع Firebase Performance Monitoring SDK للويب (راجع الوثائق للحصول على التفاصيل). في مختبر الشفرات هذا ، سنعمل على تمكين مراقبة الأداء من عناوين URL للاستضافة .

أضف مراقبة الأداء وقم بتهيئة Firebase

1. افتح ملف src/index.js ، ثم أضف السطر التالي أسفل TODO لتضمين Firebase Performance Monitoring SDK.

index.js

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

2. نحتاج أيضًا إلى تهيئة Firebase SDK بكائن تكوين يحتوي على معلومات حول مشروع Firebase وتطبيق الويب الذي نريد استخدامه. نظرًا لأننا نستخدم Firebase Hosting ، يمكنك استيراد برنامج نصي خاص يقوم بهذا التكوين نيابة عنك. بالنسبة إلى مختبر الشفرات هذا ، قمنا بالفعل بإضافة السطر التالي لك في الجزء السفلي من الملف 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 Performance Monitoring في شفرتك!

في الخطوات التالية ، ستتعرف على كيفية إضافة تتبعات مخصصة باستخدام مراقبة أداء 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. [تمديد] إضافة تتبع مخصص مع واجهة برمجة تطبيقات توقيت المستخدم

تم تصميم حزمة تطوير البرامج (SDK) لمراقبة أداء Firebase بحيث يمكن تحميلها بشكل غير متزامن ، وبالتالي لن تؤثر سلبًا على أداء تطبيقات الويب أثناء تحميل الصفحة. قبل تحميل SDK ، لا يتوفر Firebase Performance Monitoring API. في هذا السيناريو ، لا يزال بإمكانك إضافة تتبعات مخصصة باستخدام User Timing API . ستلتقط SDK لأداء Firebase المدد من المقياس () وتسجيلها كتتبعات مخصصة.

سنقوم بقياس مدة تحميل البرامج النصية لتصميم التطبيق باستخدام 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 Hosting

بعد إضافة Firebase Performance Monitoring إلى التعليمات البرمجية الخاصة بك ، اتبع هذه الخطوات لنشر التعليمات البرمجية الخاصة بك على Firebase Hosting:

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

4. قم بزيارة تطبيق الويب الخاص بك الذي يتم استضافته بالكامل الآن باستخدام Firebase Hosting في اثنين من نطاقات Firebase الفرعية الخاصة بك: https://<projectId>.firebaseapp.com و https://<projectId>.web.app .

تحقق من تمكين مراقبة الأداء

افتح وحدة تحكم Firebase وانتقل إلى علامة تبويب الأداء . إذا رأيت رسالة ترحيب توضح "تم اكتشاف SDK" ، فهذا يعني أنك قد نجحت في التكامل مع Firebase Performance Monitoring!

إرسال رسالة مصورة

قم بإنشاء بعض بيانات الأداء عن طريق إرسال الصور في تطبيق الدردشة الخاص بك.

1. بعد تسجيل الدخول إلى تطبيق الدردشة الخاص بك ، انقر فوق زر تحميل الصورة .
2. حدد ملف صورة باستخدام منتقي الملفات.
3. حاول إرسال صور متعددة (يتم تخزين بعض العينات في public/images/ ) بحيث يمكنك اختبار توزيع المقاييس المخصصة والسمات المخصصة.

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

11. مراقبة لوحة القيادة

بعد نشر تطبيق الويب الخاص بك وإرسال رسائل الصور كمستخدم ، يمكنك مراجعة بيانات الأداء في لوحة معلومات مراقبة الأداء (في وحدة تحكم Firebase).

الوصول إلى لوحة القيادة الخاصة بك

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

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

بعد معالجة مراقبة الأداء لبيانات تطبيقك ، سترى علامات تبويب على طول الجزء العلوي من لوحة التحكم. تأكد من إعادة التحقق لاحقًا إذا كنت لا ترى أي بيانات أو علامات تبويب حتى الآن.

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

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

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

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

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

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

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

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

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

12. مبروك!

لقد قمت بتمكين Firebase SDK لمراقبة الأداء وجمع الآثار التلقائية والتتبعات المخصصة لقياس الأداء الواقعي لتطبيق الدردشة الخاص بك!

ما قمنا بتغطيته:

• إضافة Firebase Performance Monitoring SDK إلى تطبيق الويب الخاص بك.
• إضافة آثار مخصصة إلى التعليمات البرمجية الخاصة بك.
• تسجيل مقاييس مخصصة مرتبطة بالتتبع المخصص.
• تجزئة بيانات الأداء باستخدام السمات المخصصة.
• فهم كيفية استخدام لوحة معلومات مراقبة الأداء لاكتساب رؤى حول أداء تطبيقك.

يتعلم أكثر:

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