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

1. نظرة عامة

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

3b1284f5144b54f6.png

ما ستتعلمه

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

ماذا ستحتاج

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

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

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

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

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

قم باستيراد تطبيق البداية

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

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

إنشاء مشروع 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 ، ثم انقر فوق حفظ .

7f3040a646c2e502.png

تمكين سحابة Firestore

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

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

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

يتضمن رمز البدء لهذا الدرس التطبيقي حول التعليمات البرمجية قواعد أكثر أمانًا. سنقوم بنشرها لاحقًا في Codelab.

24bd1a097492eac6.png

تمكين التخزين السحابي

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

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

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

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

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

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

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

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

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

لقد قمنا بإعداد قالب تطبيق الويب لسحب تكوين تطبيقك لـ Firebase Hosting من الدليل المحلي لتطبيقك (المستودع الذي قمت باستنساخه مسبقًا في Codelab). ولكن لسحب التكوين، نحتاج إلى ربط تطبيقك بمشروع Firebase الخاص بك.

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

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

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

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';
  1. نحتاج أيضًا إلى تهيئة Firebase SDK باستخدام كائن تكوين يحتوي على معلومات حول مشروع Firebase وتطبيق الويب الذي نريد استخدامه. وبما أننا نستخدم استضافة Firebase، يمكنك استيراد برنامج نصي خاص يقوم بهذا التكوين نيابةً عنك. بالنسبة لهذا الدرس التطبيقي حول التعليمات البرمجية، قمنا بالفعل بإضافة السطر التالي لك في أسفل الملف public/index.html ، ولكن تأكد مرة أخرى من وجوده هناك.

Index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. في ملف 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");
  1. لتسجيل تتبع مخصص، يتعين عليك تحديد نقطة البداية ونقطة التوقف للتتبع. يمكنك التفكير في التتبع كمؤقت.

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 . سوف يقوم 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. ستتمكن من العثور على تتبع مخصص يسمى loadStyling في وحدة تحكم أداء Firebase لاحقًا.

10. نشر الصور وبدء إرسالها

النشر إلى استضافة Firebase

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

  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 في اثنين من نطاقات Firebase الفرعية الخاصة بك: https://<projectId>.firebaseapp.com و https://<projectId>.web.app .

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

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

30df67e5a07d03b0.png

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

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

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

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

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

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

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

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

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

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

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

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

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

26a2be152a77ffb9.png

12. تهانينا!

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

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

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

يتعلم أكثر: