1. סקירה כללית
בקודלאב הזה תלמדו איך להשתמש ב-Firebase Performance Monitoring כדי למדוד את הביצועים של אפליקציית צ'אט לאינטרנט. אפשר להיכנס לכתובת https://fireperf-friendlychat.web.app/ כדי לראות הדגמה בזמן אמת.
מה תלמדו
- איך מוסיפים את Firebase Performance Monitoring לאפליקציית האינטרנט כדי לקבל מדדים מוכנים לשימוש (טעינה של דפים ובקשות לרשת).
- איך מודדים קטע קוד ספציפי באמצעות מעקבים מותאמים אישית.
- איך מתעדים מדדים מותאמים אישית נוספים שמקושרים למעקב מותאם אישית.
- איך לפלח את נתוני הביצועים עוד יותר באמצעות מאפיינים מותאמים אישית.
- איך משתמשים בלוח הבקרה למעקב אחר ביצועים כדי להבין את הביצועים של אפליקציית האינטרנט.
מה צריך
2. קבלת קוד לדוגמה
משכפלים את מאגר הנתונים ב-GitHub של הקוד למעבדה משורת הפקודה:
git clone https://github.com/firebase/codelab-friendlychat-web
לחלופין, אם git לא מותקן, אפשר להוריד את המאגר כקובץ zip.
ייבוא האפליקציה לתחילת הדרך
באמצעות סביבת הפיתוח המשולבת, פותחים או מייבאים את התיקייה 📁 performance-monitoring-start מהמאגר שהועתק. הספרייה 📁 performance-monitoring-start מכילה את הקוד ההתחלתי של ה-Codelab, שהוא אפליקציית צ'אט לאינטרנט.
3. יצירת פרויקט Firebase והגדרתו
יצירת פרויקט Firebase
- במסוף Firebase, לוחצים על Add Project (הוספת פרויקט).
- נותנים שם לפרויקט ב-Firebase –
FriendlyChat.
חשוב לזכור את מזהה הפרויקט ב-Firebase.
- לוחצים על Create Project.
שדרוג של תוכנית התמחור ב-Firebase
כדי להשתמש ב-Cloud Storage for Firebase, פרויקט Firebase צריך להיות בתוכנית התמחור 'תשלום לפי שימוש' (Blaze), כלומר הוא צריך להיות מקושר לחשבון לחיוב ב-Cloud.
- בחשבון לחיוב ב-Cloud נדרש אמצעי תשלום, כמו כרטיס אשראי.
- אם אתם משתמשים חדשים ב-Firebase וב-Google Cloud, כדאי לבדוק אם אתם זכאים לקרדיט בסך 300$ולחשבון לחיוב ב-Cloud בתקופת ניסיון בחינם.
- אם אתם מבצעים את הקודלאב הזה כחלק מאירוע, כדאי לשאול את המארגן אם יש זיכויים ב-Cloud שזמינים.
כדי לשדרג את הפרויקט לתוכנית Blaze:
- במסוף Firebase, בוחרים באפשרות שדרוג התוכנית.
- בוחרים את תוכנית Blaze. פועלים לפי ההוראות במסך כדי לקשר חשבון לחיוב ב-Cloud לפרויקט.
אם נדרשת יצירת חשבון לחיוב ב-Cloud כחלק מהשדרוג, יכול להיות שתצטרכו לחזור לתהליך השדרוג במסוף Firebase כדי להשלים את השדרוג.
הוספת אפליקציית אינטרנט של Firebase לפרויקט
- לוחצים על סמל האינטרנט
כדי ליצור אפליקציית אינטרנט חדשה ב-Firebase. - רושמים את האפליקציה עם הכינוי
Friendly Chatומסמנים את התיבה שלצד Also set up Firebase Hosting for this app (הגדרת אירוח ב-Firebase גם לאפליקציה הזו). - לוחצים על רישום האפליקציה.
- לוחצים על השלבים הנותרים. אין צורך לפעול לפי ההוראות במסך בשלב הזה. הן יפורטו בשלבים מאוחרים יותר ב-Codelab הזה.
הפעלת כניסה באמצעות חשבון Google לאימות ב-Firebase
כדי לאפשר למשתמשים להיכנס לאפליקציית הצ'אט באמצעות חשבונות Google שלהם, נשתמש בשיטת הכניסה של Google.
צריך להפעיל את הכניסה באמצעות Google:
- במסוף Firebase, מאתרים את הקטע Develop בחלונית השמאלית.
- לוחצים על Authentication (אימות) ואז על הכרטיסייה Sign-in method (שיטת כניסה) (כניסה למסוף).
- מפעילים את ספק הכניסה Google ולוחצים על שמירה.
הגדרת Cloud Firestore
אפליקציית האינטרנט משתמשת ב-Cloud Firestore כדי לשמור הודעות צ'אט ולקבל הודעות צ'אט חדשות.
כך מגדירים את Cloud Firestore בפרויקט Firebase:
- בחלונית הימנית של מסוף Firebase, מרחיבים את Build ובוחרים באפשרות Firestore database.
- לוחצים על Create database.
- משאירים את הערך
(default)בשדה Database ID. - בוחרים מיקום למסד הנתונים ולוחצים על הבא.
באפליקציה אמיתית, כדאי לבחור מיקום קרוב למשתמשים. - לוחצים על התחלה במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
בהמשך הסדנה תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אסור להפיץ או לחשוף אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה למסד הנתונים. - לוחצים על יצירה.
הגדרה של Cloud Storage for Firebase
אפליקציית האינטרנט משתמשת ב-Cloud Storage for Firebase כדי לאחסן, להעלות ולשתף תמונות.
כך מגדירים את Cloud Storage for Firebase בפרויקט Firebase:
- בחלונית הימנית של מסוף Firebase, מרחיבים את Build ובוחרים באפשרות Storage.
- לוחצים על תחילת העבודה.
- בוחרים מיקום לקטגוריית ברירת המחדל של האחסון.
קטגוריות ב-US-WEST1, ב-US-CENTRAL1וב-US-EAST1יכולות ליהנות מהתוכנית 'תמיד בחינם' ב-Google Cloud Storage. קטגוריות בכל המיקומים האחרים כפופות לתמחור ולשימוש ב-Google Cloud Storage. - לוחצים על התחלה במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
בהמשך הסדנה תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אין להפיץ או לחשוף אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה לקטגוריית האחסון. - לוחצים על יצירה.
4. התקנה של ממשק שורת הפקודה של Firebase
ממשק שורת הפקודה (CLI) של Firebase מאפשר לכם להשתמש באירוח ב-Firebase כדי להציג את אפליקציית האינטרנט באופן מקומי, וגם לפרוס את אפליקציית האינטרנט בפרויקט Firebase.
- כדי להתקין את ה-CLI, פועלים לפי ההוראות האלה במסמכי התיעוד של Firebase.
- מריצים את הפקודה הבאה במסוף כדי לוודא שה-CLI הוטמע כמו שצריך:
firebase --version
מוודאים שהגרסה של Firebase CLI היא v8.0.0 ואילך.
- מריצים את הפקודה הבאה כדי להעניק הרשאה ל-CLI של Firebase:
firebase login
הגדרנו את התבנית של אפליקציית האינטרנט כדי למשוך את ההגדרות של האפליקציה לאירוח ב-Firebase מהספרייה המקומית של האפליקציה (המאגר ששכפלתם מוקדם יותר ב-codelab). אבל כדי לאחזר את ההגדרות, אנחנו צריכים לשייך את האפליקציה לפרויקט Firebase שלכם.
- צריך לוודא ששורת הפקודה ניגשת לספרייה המקומית
performance-monitoring-startשל האפליקציה. - כדי לשייך את האפליקציה לפרויקט Firebase, מריצים את הפקודה הבאה:
firebase use --add
- כשמופיעה בקשה, בוחרים את מזהה הפרויקט ומעניקים לפרקוט ב-Firebase כינוי.
כתובת אימייל חלופית שימושית אם יש לכם כמה סביבות (ייצור, Staging וכו'). עם זאת, ב-codelab הזה נשתמש רק בכינוי default.
- פועלים לפי שאר ההוראות בשורת הפקודה.
5. שילוב עם Firebase Performance Monitoring
יש כמה דרכים לשלב את ה-SDK למעקב ביצועים באינטרנט של Firebase (פרטים נוספים זמינים במסמכי התיעוד). ב-codelab הזה נפעיל מעקב אחר ביצועים מכתובות URL מתארחות.
הוספת מעקב אחר ביצועים והפעלה של Firebase
- פותחים את הקובץ
src/index.jsומוסיפים את השורה הבאה מתחת ל-TODOכדי לכלול את ה-SDK למעקב ביצועים של Firebase.
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- אנחנו צריכים גם לאתחל את Firebase SDK באמצעות אובייקט תצורה שמכיל מידע על פרויקט Firebase ועל אפליקציית האינטרנט שבה אנחנו רוצים להשתמש. מכיוון שאנחנו משתמשים ב-Firebase Hosting, אפשר לייבא סקריפט מיוחד שיבצע את ההגדרה הזו בשבילכם. כבר הוספנו את השורה הבאה לקובץ
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 הראשונה להשהיה לאחר קלט (FID)
השהיה לאחר קלט ראשוני היא מדד שימושי, כי התגובה של הדפדפן לאינטראקציה של המשתמש נותנת למשתמשים את ההתרשמוות הראשונות שלהם לגבי המהירות של האפליקציה.
ההשהיה לאחר קלט ראשוני מתחילה כשהמשתמש מבצע אינטראקציה ראשונית עם רכיב בדף, למשל לחיצה על לחצן או על היפר-קישור. הוא נפסק מיד אחרי שהדפדפן יכול להגיב לקלט, כלומר הדפדפן לא עסוק בטעינת התוכן או בניתוח שלו.
ספריית ה-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 בקוד.
בשלבים הבאים נסביר איך מוסיפים מעקבים מותאמים אישית באמצעות Firebase Performance Monitoring. אם רוצים לאסוף רק את הטראסים האוטומטיים, עוברים לקטע 'פריסה והפעלת שליחת תמונות'.
6. הוספת מעקב מותאם אישית לאפליקציה
בעזרת Performance Monitoring אפשר ליצור מעקבים בהתאמה אישית. מעקב מותאם אישית הוא דוח על משך הזמן של בלוק ביצוע באפליקציה. אתם מגדירים את ההתחלה והסיום של מעקב מותאם אישית באמצעות ממשקי ה-API שסופקו על ידי ה-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. [הרחבה] הוספת ניתוח נתונים מותאם אישית באמצעות User Timing API
ה-SDK של Firebase Performance Monitoring תוכנן כך שניתן יהיה לטעון אותו באופן אסינכרוני, כדי שלא ישפיע לרעה על הביצועים של אפליקציות אינטרנט במהלך טעינת הדף. לפני טעינת ה-SDK, ממשק ה-API של מעקב הביצועים ב-Firebase לא זמין. בתרחיש הזה, עדיין תוכלו להוסיף מעקבים מותאמים אישית באמצעות User Timing API. Firebase Performance SDK יזהה את משכי הזמן מ-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'. מאוחר יותר תוכלו למצוא את המעקב המותאם אישית שנקרא loadStyling במסוף הביצועים של Firebase.
10. פריסה והתחלת שליחת תמונות
פריסה ב-Firebase Hosting
אחרי שמוסיפים את Firebase Performance Monitoring לקוד, מבצעים את השלבים הבאים כדי לפרוס את הקוד ב-Firebase Hosting:
- צריך לוודא ששורת הפקודה ניגשת לספרייה המקומית
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.firebasestorage.app
✔ 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 Hosting בשני תת-דומיינים משלכם ב-Firebase:
https://<projectId>.firebaseapp.comו-https://<projectId>.web.app.
מוודאים שמעקב הביצועים מופעל
פותחים את מסוף Firebase ועוברים לכרטיסייה ביצועים. אם מופיעה הודעת הפתיחה 'זוהתה ערכת SDK', סימן שהשלמתם את השילוב עם Firebase Performance Monitoring.
שליחת הודעת תמונה
אתם יכולים לשלוח תמונות באפליקציית הצ'אט כדי ליצור נתוני ביצועים מסוימים.
- אחרי שנכנסים לאפליקציית הצ'אט, לוחצים על לחצן העלאת התמונה
. - בוחרים קובץ תמונה באמצעות בורר הקבצים.
- כדאי לנסות לשלוח כמה תמונות (כמה דוגמאות מאוחסנות ב-
public/images/) כדי שתוכלו לבדוק את ההפצה של מדדים מותאמים אישית ומאפיינים מותאמים אישית.
ההודעות החדשות אמורות להופיע בממשק המשתמש של האפליקציה יחד עם התמונות שבחרתם.
11. מעקב אחרי מרכז הבקרה
אחרי הפריסה של אפליקציית האינטרנט ושליחת הודעות תמונה כמשתמשים, תוכלו לבדוק את נתוני הביצועים במרכז הבקרה למעקב אחר ביצועים (במסוף Firebase).
כניסה למרכז הבקרה
- במסוף Firebase, בוחרים את הפרויקט שבו נמצאת האפליקציה
Friendly Chat. - בחלונית הימנית, מאתרים את הקטע איכות ולוחצים על ביצועים.
בדיקת הנתונים ששמורים במכשיר
אחרי שמערכת המעקב אחר הביצועים תעבד את נתוני האפליקציה, יופיעו כרטיסיות בחלק העליון של מרכז הבקרה. אם עדיין לא מופיעים נתונים או כרטיסיות, כדאי לבדוק שוב מאוחר יותר.
- לוחצים על הכרטיסייה במכשיר.
- בטבלה טעינות דפים מוצגים מדדי הביצועים השונים שנאספים באופן אוטומטי על ידי מעקב הביצועים בזמן הטעינה של הדף.
- בטבלה משכי זמן מוצגים כל הקווים המותאמים אישית שהגדרתם בקוד של האפליקציה.
- לוחצים על saveImageMessage בטבלה Durations כדי לבדוק מדדים ספציפיים של המעקב.
- לוחצים על צבירה כדי לבדוק את ההפצה של גדלי התמונות. אפשר לראות את המדד שהוספתם כדי למדוד את גודל התמונה בניתוח המותאם אישית הזה.
- לוחצים על Over time (לאורך זמן) לצד Aggregate (צבירה) בשלב הקודם. אפשר גם לראות את משך הזמן של המעקב המותאם אישית. לוחצים על הצגת פרטים נוספים כדי לבדוק את הנתונים שנאספו בפירוט רב יותר.
- בדף שנפתח, אפשר לפלח את נתוני משך הזמן לפי סוג ה-MIME של התמונה בלחיצה על imageType. הנתונים הספציפיים האלה נרשמו ביומן בגלל המאפיין imageType שהוספתם למעקב המותאם אישית.
בדיקת נתוני הרשת
בקשת רשת HTTP/S היא דוח שמתעד את זמן התגובה ואת גודל המטען השימושי של קריאות לרשת.
- חוזרים למסך הראשי של לוח הבקרה למעקב אחר ביצועים.
- לוחצים על הכרטיסייה רשת כדי לראות רשימה של רשומות של בקשות רשת לאפליקציית האינטרנט.
- תוכלו לעיין בהן כדי לזהות בקשות איטיות ולהתחיל לעבוד על תיקון כדי לשפר את הביצועים של האפליקציה.
12. כל הכבוד!
הפעלתם את ה-SDK של Firebase לצורך ניטור ביצועים ואספתם נתוני מעקב אוטומטיים ונתוני מעקב מותאמים אישית כדי למדוד את הביצועים בפועל של אפליקציית הצ'אט שלכם.
מה עסקנו בו:
- הוספת ה-SDK של Firebase Performance Monitoring לאפליקציית האינטרנט.
- הוספת מעקבים מותאמים אישית לקוד.
- הקלטת מדדים מותאמים אישית שמקושרים למעקב המותאם אישית.
- פילוחים של נתוני הביצועים באמצעות מאפיינים מותאמים אישית.
- איך משתמשים בלוח הבקרה למעקב אחר ביצועים כדי לקבל תובנות לגבי ביצועי האפליקציה.