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 برای وب

در این Codelab ، شما می آموزید که چگونه از Firebase Performance Monitoring برای اندازه گیری عملکرد یک برنامه وب چت استفاده کنید. برای دیدن نسخه ی نمایشی زنده به https://fireperf-friendlychat.web.app/ مراجعه کنید .

3b1284f5144b54f6.png

آنچه خواهید آموخت

  • چگونه می توان Firebase Performance Monitoring را به برنامه وب خود اضافه کرد تا از معیارهای خارج از جعبه خارج شود (بارگذاری صفحه و درخواست های شبکه).
  • نحوه اندازه گیری یک قطعه کد خاص با ردیابی های سفارشی.
  • نحوه ضبط معیارهای اضافی و سفارشی مرتبط با ردیابی سفارشی.
  • چگونه داده های عملکرد خود را با ویژگی های سفارشی بیشتر تقسیم بندی کنیم.
  • چگونه می توان از داشبورد نظارت بر عملکرد برای درک عملکرد برنامه وب خود استفاده کرد.

آنچه شما نیاز دارید

  • IDE یا ویرایشگر متن مورد نظر شما ، مانند WebStorm ، Atom ، Sublime یا VS Code
  • یک ترمینال / کنسول
  • مرورگری به انتخاب شما ، مانند Chrome
  • کد نمونه کدلاپ (برای چگونگی دریافت کد به بخش بعدی این Codelab مراجعه کنید.)

مخزن GitHub codelab را از خط فرمان کلون کنید :

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

متناوباً ، اگر git نصب ندارید ، می توانید repo را به عنوان یک فایل zip بارگیری کنید .

برنامه شروع کننده را وارد کنید

با استفاده از IDE خود ، فهرست 📁 performance-monitoring-start از مخزن شبیه سازی شده باز یا وارد کنید. این پوشه 📁 performance-monitoring-start شامل کد شروع برای codelab است که یک برنامه وب چت است.

یک پروژه Firebase ایجاد کنید

  1. در کنسول Firebase ، روی Add Project کلیک کنید.
  2. پروژه Firebase خود را FriendlyChat نامگذاری کنید.

شناسه پروژه را برای پروژه Firebase خود به خاطر بسپارید.

  1. روی ایجاد پروژه کلیک کنید.

یک برنامه وب Firebase به پروژه اضافه کنید

  1. روی نماد وب کلیک کنید 58d6543a156e56f9.png برای ایجاد یک برنامه وب جدید Firebase.
  2. برنامه را با نام مستعار Friendly Chat و سپس کادر کنار Also set up Firebase Hosting برای این برنامه را علامت بزنید.
  3. ثبت برنامه را کلیک کنید.
  4. مراحل باقی مانده را کلیک کنید. اکنون نیازی نیست که دستورالعمل های روی صفحه را دنبال کنید. این موارد در مراحل بعدی این كد كتاب پوشش داده خواهد شد.

ea9ab0db531a104c.png

ورود به سیستم Google برای تأیید اعتبار Firebase را فعال کنید

برای اجازه دادن به کاربران برای ورود به برنامه گپ با حساب های Google خود ، از روش ورود به سیستم Google استفاده می کنیم.

باید ورود به سیستم Google را فعال کنید:

  1. در کنسول Firebase ، قسمت Develop را در پانل سمت چپ قرار دهید.
  2. روی تأیید اعتبار کلیک کنید ، سپس روی برگه ورود به سیستم کلیک کنید ( به کنسول بروید ).
  3. ارائه دهنده ورود به سیستم Google را فعال کنید و سپس روی ذخیره کلیک کنید.

d89fb3873b5d36ae.png

Cloud Firestore را فعال کنید

برنامه وب از Cloud Firestore برای ذخیره پیام های گپ و دریافت پیام های گپ جدید استفاده می کند.

شما باید Cloud Firestore را فعال کنید:

  1. در بخش توسعه کنسول Firebase ، روی پایگاه داده کلیک کنید.
  2. در پنجره Cloud Firestore روی ایجاد پایگاه داده کلیک کنید.
  3. گزینه Start in test mode را انتخاب کنید ، سپس پس از مطالعه سلب مسئولیت در مورد قوانین امنیتی ، بر روی Enable کلیک کنید.

کد شروع کننده این Codelab شامل قوانین ایمن تری است. بعداً آنها را در كد Codelab مستقر خواهیم كرد.

24bd1a097492eac6.png

Cloud Storage را فعال کنید

برنامه وب از Cloud Storage for Firebase برای ذخیره ، بارگذاری و اشتراک تصاویر استفاده می کند.

شما باید Cloud Storage را فعال کنید:

  1. در بخش توسعه کنسول Firebase ، روی ذخیره سازی کلیک کنید.
  2. روی شروع کلیک کنید.
  3. سلب مسئولیت در مورد قوانین امنیتی برای پروژه Firebase خود، و سپس کلیک کردم آن.

کد شروع شامل یک قانون اساسی امنیتی است ، که بعداً آن را در کدهای برنامه اعمال خواهیم کرد.

رابط خط فرمان Firebase (CLI) به شما امکان می دهد از Firebase Hosting برای سرویس محلی برنامه وب خود و همچنین استقرار برنامه وب خود در پروژه Firebase خود استفاده کنید.

  1. با دنبال کردن این دستورالعمل ها در اسناد Firebase ، CLI را نصب کنید.
  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 خود بدهید.

نام مستعار در صورت داشتن چندین محیط (تولید ، صحنه پردازی و غیره) مفید است. با این حال ، برای این Codelab ، اجازه دهید فقط از نام مستعار default .

  1. دستورالعمل های باقی مانده را در خط فرمان خود دنبال کنید.

روش های مختلفی برای ادغام با Firebase Performance Monitoring SDK برای وب وجود دارد (برای اطلاعات بیشتر به اسناد مراجعه کنید). در این Codelab ، نظارت بر عملکرد را از طریق URL های میزبان فعال خواهیم کرد.

نظارت بر عملکرد را اضافه کرده و Firebase را مقداردهی اولیه کنید

  1. پرونده public/index.html باز کنید ، سپس خط زیر را در زیر TODO تا شامل SDK Firebase Performance Monitoring باشد.

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. همچنین باید Firebase SDK را با یک شی object پیکربندی که شامل اطلاعاتی درباره پروژه Firebase و برنامه وب مورد نظر ما است ، شروع کنیم. از آنجا که ما از Firebase Hosting استفاده می کنیم ، می توانید یک اسکریپت ویژه وارد کنید که این پیکربندی را برای شما انجام دهد. برای این Codelab ، ما در زیر فایل 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();

Monitoring Performance اکنون هنگام استفاده کاربران از سایت شما ، به طور خودکار بارگیری صفحه و معیارهای درخواست شبکه را برای شما جمع می کند! برای کسب اطلاعات بیشتر در مورد ردیابی خودکار بارگذاری صفحه ، به اسناد مراجعه کنید .

اولین کتابخانه تأخیر ورودی 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 Performance Monitoring آشنا می شوید. اگر فقط می خواهید ردیابی های خودکار را جمع آوری کنید ، به بخش "استقرار و شروع به ارسال تصاویر" بروید.

نظارت بر عملکرد به شما امکان می دهد ردیابی های سفارشی ایجاد کنید. ردیابی سفارشی گزارشی است برای مدت زمان بلوک اجرا در برنامه شما. شما شروع و پایان یک ردیابی سفارشی را با استفاده از API های ارائه شده توسط SDK تعریف می کنید.

  1. در پرونده public/scripts/main.js ، یک شی performance عملکرد دریافت کنید ، سپس یک ردیابی سفارشی برای بارگذاری پیام تصویری ایجاد کنید.

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. برای ضبط نوع MIME تصویر بارگذاری شده ، خط زیر را در زیر TODO اضافه کنید.

main.js

 ...

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

 ...

این ویژگی نظارت بر عملکرد را برای طبقه بندی مدت زمان ردیابی سفارشی بر اساس نوع تصویر بارگذاری شده امکان پذیر می کند.

Firebase Performance Monitoring SDK به گونه ای طراحی شده است که می تواند به صورت هم زمان بارگیری شود و بنابراین بر عملکرد برنامه های وب هنگام بارگذاری صفحه تأثیر منفی نخواهد گذاشت. قبل از بارگیری SDK ، API نظارت بر عملکرد Firebase در دسترس نیست. در این سناریو ، شما همچنان می توانید با استفاده از User Timing 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 Performance Monitoring جمع می شود. بعداً می توانید ردیابی سفارشی به نام loadStyling در کنسول Firebase 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 را باز کرده و به تب Performance بروید. اگر پیام خوش آمدگویی را مشاهده کردید که "SDK شناسایی شد" ، پس با موفقیت با Firebase Performance Monitoring ادغام شدید!

ac917a089e9c89d1.png

ارسال پیام تصویری

با ارسال تصاویر در برنامه گپ خود ، برخی از داده های عملکرد را ایجاد کنید.

  1. پس از ورود به برنامه گپ خود ، روی دکمه بارگذاری تصویر کلیک کنید 13734cb66773e5a3.png .
  2. با استفاده از انتخابگر پرونده ، یک فایل تصویری را انتخاب کنید.
  3. سعی کنید چندین تصویر ارسال کنید (چند نمونه در public/images/ ذخیره می شود public/images/ ) تا بتوانید توزیع معیارهای سفارشی و ویژگی های سفارشی را آزمایش کنید.

پیام های جدید باید همراه با تصاویر انتخابی شما در UI برنامه نمایش داده شوند.

پس از استقرار برنامه وب و ارسال پیام های تصویری به عنوان کاربر ، می توانید داده های عملکرد را در داشبورد نظارت بر عملکرد (در کنسول Firebase) مرور کنید.

به داشبورد خود دسترسی پیدا کنید

  1. در کنسول Firebase ، پروژه ای را که برنامه Friendly Chat شما دارد انتخاب کنید.
  2. در پانل سمت چپ ، قسمت Quality را پیدا کرده و روی Performance کلیک کنید.

داده های روی دستگاه را مرور کنید

پس از پردازش اطلاعات عملکرد برنامه نظارت بر عملکرد ، زبانه هایی را در بالای داشبورد مشاهده خواهید کرد. اگر هنوز داده یا برگه ای مشاهده نکردید ، بعداً دوباره بررسی کنید.

  1. روی تب On device کلیک کنید.
  • جدول بارگذاری صفحه ، معیارهای مختلف عملکردی را نشان می دهد که هنگام بارگیری صفحه شما ، نظارت بر عملکرد به طور خودکار جمع آوری می شود.
  • جدول Durations هر ردیابی سفارشی را که در کد برنامه خود تعریف کرده اید نشان می دهد.
  1. برای بررسی معیارهای خاص ردیابی ، روی saveImageMessage در جدول Durations کلیک کنید.

e28758fd02d9ffac.png

  1. برای بررسی توزیع اندازه تصویر ، روی Aggregate کلیک کنید. می توانید معیاری را که برای اندازه گیری اندازه تصویر برای این ردیابی سفارشی اضافه کرده اید ، مشاهده کنید.

c3cbcfc0c739a0a8.png

  1. با مرور زمان که در مرحله قبل در کنار جمع است کلیک کنید. همچنین می توانید مدت زمان ردیابی سفارشی را مشاهده کنید. برای بررسی جزئیات بیشتر اطلاعات جمع آوری شده ، روی مشاهده بیشتر کلیک کنید.

16983baa31e05732.png

  1. در صفحه باز شده ، می توانید داده های مدت زمان را بر اساس نوع MIME تصویر با کلیک کردن بر روی imageType تقسیم بندی کنید . این داده های خاص به دلیل ویژگی imageType که به ردیابی سفارشی خود اضافه کرده اید ، ثبت شده است.

8e5c9f32f42a1ca1.png

داده های شبکه را مرور کنید

درخواست شبکه HTTP / S گزارشی است که زمان پاسخگویی و اندازه بارگذاری تماس های شبکه را ضبط می کند.

  1. به صفحه اصلی داشبورد نظارت بر عملکرد برگردید.
  2. برای دیدن لیستی از ورودی های درخواست شبکه برای برنامه وب خود ، روی زبانه شبکه کلیک کنید.
  3. برای شناسایی درخواستهای کند ، در آنها مرور کنید و شروع به کار در مورد رفع اشکال برای بهبود عملکرد برنامه خود کنید!

1ab598284eea6581.png

شما Firebase SDK را برای نظارت بر عملکرد فعال کرده و ردیابی های خودکار و ردیابی های سفارشی را برای اندازه گیری عملکرد واقعی برنامه چت خود جمع آوری کرده اید!

آنچه ما پوشش داده ایم:

  • افزودن SDK عملکرد عملکرد Firebase به برنامه وب خود.
  • افزودن ردیابی های سفارشی به کد شما.
  • ثبت معیارهای سفارشی مرتبط با ردیابی سفارشی.
  • تقسیم بندی داده های عملکرد با استفاده از ویژگی های سفارشی.
  • درک نحوه استفاده از داشبورد نظارت بر عملکرد برای کسب اطلاعات در مورد عملکرد برنامه شما.

بیشتر بدانید: