1- نظرة عامة
في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية استخدام ميزة "مراقبة أداء Firebase" لقياس أداء تطبيق ويب للدردشة. انتقِل إلى https://fireperf-Friendlychat.web.app/ لمشاهدة عرض توضيحي مباشر.
المعلومات التي ستطّلع عليها
- كيفية إضافة ميزة "مراقبة أداء Firebase" إلى تطبيق الويب للحصول على مقاييس جاهزة (تحميل الصفحة وطلبات الشبكة)
- طريقة قياس جزء معيّن من الرمز باستخدام بيانات تتبُّع مخصّصة
- كيفية تسجيل مقاييس مخصّصة إضافية مرتبطة بتتبُّع مخصَّص
- كيفية تقسيم بيانات الأداء بشكل أكبر باستخدام السمات المخصّصة
- كيفية استخدام لوحة بيانات مراقبة الأداء لفهم أداء تطبيق الويب
المتطلبات
2- الحصول على الرمز النموذجي
استنسِخ مستودع GitHub في الدرس التطبيقي حول الترميز من سطر الأوامر:
git clone https://github.com/firebase/codelab-friendlychat-web
بدلاً من ذلك، إذا لم يكن git مثبّتًا لديك، يمكنك تنزيل Repo كملف ZIP.
استيراد تطبيق إجراء التفعيل
افتح دليل performance-monitoring-start أو استورِده باستخدام بيئة التطوير المتكاملة (IDE) من المستودع المنسوخ. يحتوي دليل performance-monitoring-start هذا 📁 على رمز البدء للدرس التطبيقي حول الترميز، وهو تطبيق ويب للدردشة.
3- إنشاء مشروع على Firebase وإعداده
إنشاء مشروع على Firebase
- في وحدة تحكُّم Firebase، انقر على إضافة مشروع.
- أدخِل اسمًا لمشروعك في Firebase "
FriendlyChat".
تذكّر رقم تعريف مشروعك على Firebase.
- انقر على إنشاء مشروع.
إضافة تطبيق ويب Firebase إلى المشروع
- انقر على رمز الويب
لإنشاء تطبيق ويب جديد على Firebase. - سجِّل التطبيق باستخدام اللقب
Friendly Chat، ثم ضَع علامة في المربّع بجانب إعداد "استضافة Firebase" لهذا التطبيق أيضًا. - انقر على تسجيل التطبيق.
- انقر على الخطوات المتبقية. لست بحاجة إلى اتّباع التعليمات الظاهرة على الشاشة الآن. سوف نتناولها في خطوات لاحقة من هذا الدرس التطبيقي حول الترميز.
تفعيل ميزة "تسجيل الدخول بحساب Google" لمصادقة Firebase
للسماح للمستخدمين بتسجيل الدخول إلى تطبيق المحادثة باستخدام حساباتهم على Google، سنستخدم طريقة تسجيل الدخول من Google.
يجب تفعيل تسجيل الدخول باستخدام Google:
- في وحدة تحكُّم Firebase، ابحث عن قسم التطوير في اللوحة اليمنى.
- انقر على المصادقة، ثم انقر على علامة التبويب طريقة تسجيل الدخول ( انتقِل إلى وحدة التحكّم).
- فعِّل مقدِّم خدمة تسجيل الدخول باستخدام Google، ثم انقر على حفظ.
تفعيل Cloud Firestore
يستخدم تطبيق الويب Cloud Firestore لحفظ رسائل المحادثة وتلقّي رسائل جديدة.
يجب تفعيل Cloud Firestore:
- في قسم التطوير ضمن وحدة تحكُّم Firebase، انقر على قاعدة البيانات.
- انقر على إنشاء قاعدة بيانات في لوحة Cloud Firestore.
- حدِّد الخيار البدء في وضع الاختبار، ثم انقر على تفعيل بعد قراءة بيان إخلاء المسؤولية بشأن قواعد الأمان.
يتضمّن رمز التفعيل الخاص بهذا الدرس التطبيقي حول الترميز قواعد أكثر أمانًا. وسننشرها لاحقًا في الدرس التطبيقي حول الترميز.
تفعيل Cloud Storage
يستخدم تطبيق الويب Cloud Storage for Firebase لتخزين الصور وتحميلها ومشاركتها.
يجب تفعيل Cloud Storage:
- في قسم التطوير ضمن وحدة تحكُّم Firebase، انقر على مساحة التخزين.
- انقر على البدء.
- اقرأ بيان إخلاء المسؤولية بشأن قواعد الأمان لمشروعك على Firebase، ثم انقر على حسنًا.
يتضمن رمز البدء قاعدة أمان أساسية سيتم نشرها لاحقًا في الدرس التطبيقي حول الترميز.
4. تثبيت واجهة سطر أوامر Firebase
تتيح لك واجهة سطر أوامر Firebase (CLI) استخدام ميزة "استضافة Firebase" لعرض تطبيق الويب محليًا ونشر تطبيق الويب في مشروع Firebase.
- ثبِّت واجهة سطر الأوامر باتّباع هذه التعليمات في مستندات Firebase.
- تحقق من تثبيت واجهة سطر الأوامر بشكل صحيح من خلال تشغيل الأمر التالي في وحدة طرفية:
firebase --version
تأكَّد من أنّ إصدار واجهة سطر الأوامر في Firebase هو 8.0.0 أو إصدار أحدث.
- فوّض واجهة سطر الأوامر في Firebase من خلال تشغيل الأمر التالي:
firebase login
لقد أعددنا نموذج تطبيق الويب لسحب إعدادات تطبيقك لـ "استضافة Firebase" من الدليل المحلي لتطبيقك (المستودع الذي استنسخته سابقًا في الدرس التطبيقي حول الترميز). ولكن لسحب الإعدادات، نحتاج إلى ربط تطبيقك بمشروعك في Firebase.
- تأكد من وصول سطر الأوامر إلى دليل
performance-monitoring-startالمحلي لتطبيقك. - اربط تطبيقك بمشروع Firebase من خلال تشغيل الأمر التالي:
firebase use --add
- اختَر رقم تعريف مشروعك عندما يُطلب منك ذلك، ثم امنح مشروعك في Firebase اسمًا مستعارًا.
يكون الاسم المستعار مفيدًا إذا كانت لديك بيئات متعددة (الإنتاج، والمراحل، وما إلى ذلك). في هذا الدرس التطبيقي حول الترميز، لنستخدم الاسم المستعار default.
- اتبع التعليمات المتبقية في سطر الأوامر.
5- الدمج مع مراقبة أداء Firebase
تتوفّر طرق مختلفة للدمج مع حزمة تطوير البرامج (SDK) الخاصة بمراقبة أداء Firebase للويب (يُرجى الرجوع إلى المستندات للاطّلاع على التفاصيل). في هذا الدرس التطبيقي حول الترميز، سنفعِّل مراقبة الأداء من خلال استضافة عناوين URL.
إضافة ميزة تتبُّع الأداء وإعداد Firebase
- افتح ملف
src/index.js، ثم أضِف السطر التالي أسفلTODOلتضمين حزمة SDK لمراقبة أداء Firebase.
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- نحتاج أيضًا إلى إعداد حزمة تطوير البرامج (SDK) لمنصّة Firebase باستخدام كائن ضبط يحتوي على معلومات عن مشروع Firebase وتطبيق الويب الذي نريد استخدامه. ونظرًا لأننا نستخدم استضافة Firebase، يمكنك استيراد نص برمجي خاص لتنفيذ هذه الإعدادات نيابةً عنك. لقد أضفنا السطر التالي في أسفل ملف
public/index.htmlفي هذا الدرس التطبيقي، ولكن يُرجى التحقّق مرة أخرى من وجوده.
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- في ملف
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).
- في ملف
src/index.js، احصل على عنصر أداء، ثم أنشِئ تتبُّعًا مخصّصًا لتحميل رسالة صورة.
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- لتسجيل عملية تتبُّع مخصّصة، عليك تحديد نقطة البداية ونقطة التوقف لعملية التتبُّع. يمكنك اعتبار التتبّع كموقت.
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
لقد حددت عملية تتبُّع مخصّصة بنجاح. بعد نشر الرمز، سيتم تسجيل مدة التتبُّع المخصَّص إذا أرسل المستخدم رسالة صورة. سيعطيك هذا فكرة عن المدة التي يستغرقها المستخدمون الحقيقيون لإرسال الصور في تطبيق الدردشة لديك.
7- أضِف مقياسًا مخصَّصًا إلى تطبيقك.
يمكنك ضبط تتبُّع الأداء المخصّص أيضًا لتسجيل المقاييس المخصّصة للأحداث ذات الصلة بالأداء التي تقع ضمن نطاقه. على سبيل المثال، يمكنك استخدام مقياس للتحقّق ممّا إذا كان وقت التحميل قد تأثّر بحجم الصورة في عمليات التتبُّع المخصّصة التي حدّدناها في الخطوة الأخيرة.
- حدِّد موقع التتبُّع المخصّص من الخطوة السابقة (المحدّدة في ملف
src/index.js). - أضِف السطر التالي أسفل
TODOلتسجيل حجم الصورة التي تم تحميلها.
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
ويتيح هذا المقياس مراقبة الأداء لتسجيل مدة التتبُّع المخصّصة بالإضافة إلى حجم الصورة التي يتم تحميلها.
8- إضافة سمة مخصصة إلى تطبيقك
بناءً على الخطوات السابقة، يمكنك أيضًا جمع السمات المخصّصة في بيانات التتبّع المخصّصة. يمكن أن تساعد السمات المخصّصة في تقسيم البيانات حسب فئات خاصة بتطبيقك. على سبيل المثال، يمكنك جمع نوع MIME لملف الصورة للتحقيق في كيفية تأثير نوع MIME في الأداء.
- يمكنك استخدام سجلّ التتبُّع المخصّص المحدّد في ملف
src/index.js. - أضِف السطر التالي أسفل
TODOلتسجيل نوع MIME للصورة التي تم تحميلها.
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
تتيح هذه السمة تتبُّع الأداء لتصنيف مدة التتبُّع المخصّصة استنادًا إلى نوع الصورة التي تم تحميلها.
9- [Extend] إضافة عملية تتبُّع مخصَّصة باستخدام User Timing API
تم تصميم حزمة تطوير البرامج (SDK) لمراقبة أداء Firebase بحيث يمكن تحميلها بشكل غير متزامن، وبالتالي لن تؤثر سلبًا في أداء تطبيقات الويب أثناء تحميل الصفحة. قبل تحميل حزمة تطوير البرامج (SDK)، لا تكون واجهة برمجة التطبيقات Firebase Performance Monitoring API متاحة. في هذا السيناريو، لا يزال بإمكانك إضافة عمليات تتبُّع مخصّصة باستخدام User Timing API. ستلتقط حزمة تطوير البرامج (SDK) لأداء Firebase المُدد من measure() وستسجّلها كتتبُّعات مخصّصة.
سنقيس مدة تحميل النصوص البرمجية لتصميم التطبيقات باستخدام User Timing API.
- في ملف
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>
- أضِف الأسطر التالية لتحديد نهاية تحميل النصوص البرمجية لتصميم التطبيق ولقياس المدة بين البداية والنهاية.
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 Performance Monitoring. ستتمكّن لاحقًا من العثور على تتبُّع مخصّص باسم loadStyling في "وحدة تحكّم الأداء في Firebase".
10- النشر وبدء إرسال الصور
النشر إلى "استضافة Firebase"
بعد إضافة مراقبة أداء Firebase إلى الرمز، اتّبِع الخطوات التالية لنشر الرمز في استضافة Firebase:
- تأكد من وصول سطر الأوامر إلى دليل
performance-monitoring-startالمحلي لتطبيقك. - انشر ملفاتك في مشروع Firebase من خلال تشغيل الأمر التالي:
firebase deploy
- يجب أن تعرض وحدة التحكم ما يلي:
=== 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
- انتقِل إلى تطبيق الويب الذي تمت استضافته بالكامل الآن باستخدام ميزة "استضافة Firebase" في اثنين من نطاقات Firebase الفرعية:
https://<projectId>.firebaseapp.comوhttps://<projectId>.web.app.
التحقّق من تفعيل ميزة مراقبة الأداء
افتح وحدة تحكُّم Firebase وانتقِل إلى علامة التبويب الأداء. إذا ظهرت لك رسالة ترحيب تشير إلى أنّه "تم اكتشاف حزمة SDK"، يعني ذلك أنّه تم الدمج بنجاح مع Firebase Performance Monitoring.
إرسال رسالة تتضمّن صورة
يمكنك إنشاء بعض بيانات الأداء عن طريق إرسال الصور في تطبيق المحادثة.
- بعد تسجيل الدخول إلى تطبيق المحادثات، انقر على زر تحميل الصورة
. - اختَر ملف صورة باستخدام أداة اختيار الملفات.
- جرِّب إرسال صور متعددة (تم تخزين بعض النماذج في
public/images/) حتى تتمكّن من اختبار توزيع المقاييس والسمات المخصّصة.
من المفترض أن تظهر الرسائل الجديدة في واجهة مستخدم التطبيق مع الصور التي اخترتها.
11- مراقبة لوحة البيانات
بعد نشر تطبيق الويب وإرسال رسائل مصوّرة كمستخدم، يمكنك مراجعة بيانات الأداء في لوحة بيانات مراقبة الأداء (في "وحدة تحكُّم Firebase").
الوصول إلى لوحة البيانات
- في وحدة تحكُّم Firebase، اختَر المشروع الذي يتضمّن تطبيق
Friendly Chat. - في اللوحة اليمنى، ابحث عن قسم الجودة، ثم انقر على الأداء.
مراجعة البيانات على الجهاز فقط
بعد أن تنتهي مراقبة الأداء من معالجة بيانات تطبيقك، ستظهر لك علامات تبويب في أعلى لوحة البيانات. احرِص على التحقّق مرة أخرى لاحقًا إذا لم تظهر لك أي بيانات أو علامات تبويب حتى الآن.
- انقر على علامة التبويب على الجهاز.
- يعرض جدول عمليات تحميل الصفحة مقاييس الأداء المختلفة التي تجمعها أداة مراقبة الأداء تلقائيًا أثناء تحميل صفحتك.
- يعرض جدول المدد أي آثار مخصّصة حدّدتها في رمز تطبيقك.
- انقر على saveImageMessage في جدول المدد لمراجعة مقاييس محدّدة في عملية التتبّع.
- انقر على تجميع لمراجعة توزيع أحجام الصور. يمكنك الاطّلاع على المقياس الذي أضفته لقياس حجم الصورة لعملية التتبُّع المخصّصة هذه.
- انقر على خيار على مدار الوقت بجانب تجميع في الخطوة السابقة. يمكنك أيضًا عرض مدة عملية التتبُّع المخصّصة. انقر على عرض المزيد لمراجعة البيانات التي تم جمعها بمزيد من التفاصيل.
- في الصفحة التي يتم فتحها، يمكنك تقسيم بيانات المدة حسب نوع MIME للصورة من خلال النقر على imageType. تم تسجيل هذه البيانات المحدّدة بسبب السمة imageType التي أضفتها إلى عملية التتبُّع المخصَّصة.
مراجعة بيانات الشبكة
طلب الشبكة HTTP/S هو تقرير يسجّل وقت الاستجابة وحجم الحمولة لمكالمات الشبكة.
- ارجع إلى الشاشة الرئيسية للوحة بيانات مراقبة الأداء.
- انقر على علامة التبويب الشبكة للاطّلاع على قائمة بإدخالات طلبات الشبكة لتطبيق الويب.
- يمكنك الاطّلاع عليها لتحديد الطلبات البطيئة وبدء العمل على إيجاد حلّ لتحسين أداء تطبيقك.
12- تهانينا
لقد فعَّلت حزمة تطوير البرامج (SDK) لمنصّة Firebase لتتبُّع الأداء وجمع بيانات التتبُّع التلقائية والتتبُّعات المخصَّصة لقياس الأداء الفعلي لتطبيق المحادثة.
المواضيع التي تناولناها:
- جارٍ إضافة حزمة تطوير البرامج (SDK) الخاصة بمراقبة أداء Firebase إلى تطبيق الويب
- إضافة آثار تتبُّع مخصَّصة إلى الرمز
- تسجيل المقاييس المخصّصة المرتبطة بسجلّ التتبّع المخصّص
- تقسيم بيانات الأداء باستخدام سمات مخصصة.
- التعرّف على كيفية استخدام لوحة بيانات مراقبة الأداء للحصول على إحصاءات حول أداء تطبيقك