Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
ترجمت واجهة Cloud Translation API‏ هذه الصفحة.
Switch to English

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

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

3b1284f5144b54f6.png

ماذا ستتعلم

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

ماذا ستحتاج

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

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

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

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

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

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

أنشئ مشروع Firebase

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

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

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

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

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

ea9ab0db531a104c.png

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

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

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

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

d89fb3873b5d36ae.png

تفعيل Cloud Firestore

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

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

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

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

24bd1a097492eac6.png

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

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

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

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

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

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

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

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

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

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

  1. تأكد من وصول سطر الأوامر إلى دليل performance-monitoring-start المحلي للتطبيق.
  2. اربط تطبيقك بمشروع Firebase عن طريق تشغيل الأمر التالي:
firebase use --add
  1. عند المطالبة ، حدد معرّف المشروع الخاص بك ، ثم امنح مشروع Firebase اسمًا مستعارًا.

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

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

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

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

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

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. نحتاج أيضًا إلى تهيئة Firebase SDK بكائن تكوين يحتوي على معلومات حول مشروع Firebase وتطبيق الويب الذي نريد استخدامه. نظرًا لأننا نستخدم Firebase Hosting ، يمكنك استيراد برنامج نصي خاص يقوم بهذا التكوين نيابة عنك. بالنسبة لمعمل الشفرات هذا ، قمنا بالفعل بإضافة السطر التالي لك في الجزء السفلي من الملف public/index.html ، ولكن تحقق مرة أخرى من وجوده.

index.html

<script src="/__/firebase/init.js"></script>
  1. في الملف public/scripts/main.js ، أضف السطر التالي أسفل TODO لتهيئة مراقبة الأداء.

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

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

أضف أول مكتبة 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. إذا كنت تريد فقط جمع الآثار التلقائية ، فانتقل إلى قسم "النشر وبدء إرسال الصور".

تسمح لك مراقبة الأداء بإنشاء آثار مخصصة . التتبع المخصص هو تقرير عن مدة كتلة التنفيذ في تطبيقك. تقوم بتعريف بداية ونهاية التتبع المخصص باستخدام واجهات برمجة التطبيقات التي توفرها SDK.

  1. في الملف public/scripts/main.js ، احصل على كائن أداء ، ثم أنشئ public/scripts/main.js مخصصًا لتحميل رسالة صورة.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
  1. لتسجيل تتبع مخصص ، تحتاج إلى تحديد نقطة البداية ونقطة التوقف للتتبع. يمكنك التفكير في التتبع على أنه جهاز توقيت.

main.js

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

 ...

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

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

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

  1. حدد موقع التتبع المخصص من الخطوة السابقة (المحدد في ملف public/scripts/main.js ).
  2. أضف السطر التالي أسفل TODO لتسجيل حجم الصورة التي تم تحميلها.

main.js

 ...

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

 ...

يتيح هذا المقياس مراقبة الأداء لتسجيل مدة التتبع المخصصة بالإضافة إلى حجم الصورة التي تم تحميلها.

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

  1. استخدم التتبع المخصص المحدد في ملف public/scripts/main.js
  2. أضف السطر التالي أسفل TODO لتسجيل نوع MIME للصورة التي تم تحميلها.

main.js

 ...

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

 ...

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

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

انشر في Firebase Hosting

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

  1. تأكد من وصول سطر الأوامر إلى دليل performance-monitoring-start المحلي للتطبيق.
  2. انشر ملفاتك في مشروع Firebase عن طريق تشغيل الأمر التالي:
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 Hosting في اثنين من نطاقات Firebase الفرعية الخاصة بك: https://<projectId>.firebaseapp.com و https://<projectId>.web.app .

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

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

ac917a089e9c89d1.png

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

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

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

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

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

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

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

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

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

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

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

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

1ab598284eea6581.png

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

ما غطيناه:

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

يتعلم أكثر: