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

1. نظرة عامة

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

3b1284f5144b54f6.png

ماذا ستتعلم

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

ماذا ستحتاج

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

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

استنساخ codelab في مستودع جيثب من سطر الأوامر:

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

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

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

استخدام 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 استضافة لهذا التطبيق.
  3. انقر فوق تسجيل التطبيق.
  4. انقر من خلال الخطوات المتبقية. لست بحاجة إلى اتباع التعليمات التي تظهر على الشاشة الآن ؛ ستتم تغطيتها في الخطوات اللاحقة من مختبر الرموز هذا.

ea9ab0db531a104c.png

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

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

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

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

7f3040a646c2e502.png

تفعيل Cloud Firestore

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

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

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

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

24bd1a097492eac6.png

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

يستخدم تطبيق الويب 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 أو أحدث.

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

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

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

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

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

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

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

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

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

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. نحتاج أيضًا إلى تهيئة Firebase SDK بكائن تكوين يحتوي على معلومات حول مشروع Firebase وتطبيق الويب الذي نريد استخدامه. نظرًا لأننا نستخدم Firebase Hosting ، يمكنك استيراد برنامج نصي خاص يقوم بهذا التكوين نيابة عنك. لهذا codelab، لقد أضفت السطر التالي لأنك في الجزء السفلي من 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 الملفات، ثم uncomment السطر التالي.

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

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

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

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

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 لمراقبة الأداء وجمع الآثار التلقائية والتتبعات المخصصة لقياس الأداء الواقعي لتطبيق الدردشة الخاص بك!

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

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

يتعلم أكثر: