הוספה מהירה של פונקציונליות חדשה לאפליקציית האינטרנט באמצעות תוספים ל-Firebase

1. מבוא

מטרות עסקיות

ב-Codelab הזה תוסיפו פונקציונליות לאפליקציית שוק אונליין בעזרת תוספים ל-Firebase. ב-Codelab הזה תלמדו איך תוספים יכולים לעזור לכם להקדיש פחות זמן למשימות פיתוח וניהול של אפליקציות.

מה תפַתחו

ב-Codelab הזה, תוסיפו את התכונות הבאות לאפליקציית אינטרנט של זירת מסחר אונליין:

• טעינה מהירה יותר של תמונות כדי לשפר את שימור המשתמשים
• כדאי להגביל את מספר הרשומות במסד הנתונים כדי לשפר את הביצועים ולהפחית את החשבון
• הטמעה של מחיקה אוטומטית של נתוני משתמשים ישנים כדי לשפר את ההגנה על נתוני משתמשים

מה תלמדו

• איך מוצאים תוספים לתרחישי שימוש נפוצים
• איך להתקין ולהגדיר תוסף בפרויקט
• איך לתחזק (לפקח, לעדכן ולהסיר) תוספים בפרויקט

ה-Codelab הזה מתמקד בתוספים ל-Firebase. למידע מפורט על מוצרי Firebase אחרים שמוזכרים ב-codelab הזה, אפשר לעיין בתיעוד של Firebase ובcodelabs אחרים.

מה צריך להכין

• מחשב עם דפדפן אינטרנט מודרני מותקן (מומלץ להשתמש ב-Chrome)
• חשבון Google

2. יצירה והגדרה של פרויקט Firebase

יצירת פרויקט Firebase

1. נכנסים למסוף Firebase באמצעות חשבון Google.
2. לוחצים על הלחצן כדי ליצור פרויקט חדש, ואז מזינים שם לפרויקט (לדוגמה, FriendlyMarket).
   
3. לוחצים על המשך.
4. אם מוצגת בקשה לעשות זאת, קוראים ומאשרים את התנאים של Firebase, ואז לוחצים על המשך.
5. (אופציונלי) מפעילים את העזרה מבוססת-AI במסוף Firebase (שנקראת Gemini ב-Firebase).
6. ב-codelab הזה לא צריך להשתמש ב-Google Analytics, ולכן משביתים את האפשרות Google Analytics.
7. לוחצים על יצירת פרויקט, מחכים שהפרויקט יוקצה ולוחצים על המשך.

האפליקציה שתבנו משתמשת בכמה מוצרי Firebase שזמינים לאפליקציות אינטרנט:

• אימות ב-Firebase כדי לזהות את המשתמשים בקלות
• ‫מסד נתונים בזמן אמת ב-Firebase כדי לשמור נתונים מובְנים בענן ולקבל התראה מיידית כשהנתונים מתעדכנים
• ‫Cloud Storage for Firebase כדי לשמור תמונות בענן

עכשיו תפעילו ותגדירו את מוצרי Firebase האלה באמצעות מסוף Firebase.

שדרוג תוכנית התשלומים של Firebase

כדי להשתמש בתוספים ל-Firebase ובשירותי הענן הבסיסיים שלהם, כמו גם ב-Cloud Storage for Firebase, הפרויקט שלכם ב-Firebase צריך להיות מוגדר בתוכנית התמחור 'תשלום לפי שימוש' (Blaze), כלומר הוא צריך להיות מקושר לחשבון לחיוב ב-Cloud.

• בחשבון לחיוב ב-Cloud צריך להגדיר אמצעי תשלום, כמו כרטיס אשראי.
• אם אתם חדשים ב-Firebase וב-Google Cloud, כדאי לבדוק אם אתם עומדים בדרישות לקבלת קרדיט בשווי 300$ותקופת ניסיון בחינם בחשבון לחיוב ב-Cloud.
• אם אתם משתתפים ב-Codelab כחלק מאירוע, כדאי לשאול את מארגן האירוע אם יש קרדיטים ל-Cloud.

כדי לשדרג את הפרויקט לתוכנית Blaze, פועלים לפי השלבים הבאים:

1. במסוף Firebase, בוחרים באפשרות שדרוג התוכנית.
2. בוחרים בתוכנית Blaze. פועלים לפי ההוראות במסך כדי לקשר חשבון לחיוב ב-Cloud לפרויקט.
   אם הייתם צריכים ליצור חשבון לחיוב ב-Cloud כחלק מהשדרוג, יכול להיות שתצטרכו לחזור לתהליך השדרוג במסוף Firebase כדי להשלים את השדרוג.

הפעלת התחברות באמצעות אימייל

למרות שהאימות לא נמצא במוקד של ה-codelab הזה, חשוב להטמיע באפליקציה צורה כלשהי של אימות כדי לזהות באופן ייחודי את כל מי שמשתמש בה. תתחברו באמצעות כתובת האימייל.

1. במסוף Firebase, לוחצים על Develop (פיתוח) בחלונית הימנית.
2. לוחצים על אימות ואז על הכרטיסייה שיטת כניסה (או לוחצים כאן כדי לעבור ישירות לכרטיסייה שיטת כניסה).
3. ברשימה ספקי כניסה, לוחצים על אימייל/סיסמה, מעבירים את המתג הפעלה למצב מופעל ואז לוחצים על שמירה.

הפעלת מסד נתונים בזמן אמת

האפליקציה משתמשת במסד הנתונים בזמן אמת ב-Firebase כדי לשמור פריטים למכירה.

1. בחלונית הימנית במסוף Firebase, מרחיבים את Build ובוחרים באפשרות מסד נתונים בזמן אמת.
2. לוחצים על יצירת מסד נתונים.
3. בוחרים מיקום למסד הנתונים ולוחצים על הבא.
   באפליקציה אמיתית, כדאי לבחור מיקום שקרוב למשתמשים.
4. לוחצים על התחלת השימוש במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
   בשלבים הבאים של ה-Codelab הזה, תוסיפו כללי אבטחה כדי לאבטח את הנתונים שלכם. אל תפיצו או תחשפו אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה למסד הנתונים.
5. לוחצים על יצירה.

הגדרת כללי אבטחה למסד הנתונים

עכשיו צריך להגדיר את כללי האבטחה שנדרשים לאפליקציה הזו. אלה כמה כללים לדוגמה בסיסיים שיעזרו לכם לאבטח את האפליקציה. הכללים האלה מאפשרים לכל אחד לצפות בפריטים למכירה, אבל רק משתמשים מחוברים יכולים לבצע קריאות וכתיבות אחרות. אין צורך לדאוג לגבי הפרטים של הכללים האלה. אתם רק צריכים להעתיק ולהדביק אותם כדי שהאפליקציה תפעל.

1. בחלק העליון של מרכז הבקרה של מסד נתונים בזמן אמת, לוחצים על הכרטיסייה כללים.

2. מעתיקים את קבוצת הכללים הבאה ומדביקים אותה בשדה הכללים בכרטיסייה כללים:

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. לוחצים על פרסום.

הגדרת Cloud Storage for Firebase

האפליקציה משתמשת ב-Cloud Storage for Firebase כדי לשמור תמונות של פריטים למכירה.

כך מגדירים את Cloud Storage for Firebase בפרויקט Firebase:

1. בחלונית הימנית במסוף Firebase, מרחיבים את האפשרות Build (פיתוח) ובוחרים באפשרות Storage (אחסון).
2. לוחצים על שנתחיל?.
3. בוחרים מיקום לקטגוריית האחסון שמוגדרת כברירת מחדל.
   אפשר להשתמש בקטגוריות במיקומים US-WEST1, US-CENTRAL1 ו-US-EAST1 במסגרת המסלול 'תמיד בחינם' של Google Cloud Storage. התמחור והשימוש בקטגוריות בכל המיקומים האחרים מפורטים במאמר בנושא תמחור ושימוש ב-Google Cloud Storage.
4. לוחצים על התחלת השימוש במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
   בשלבים הבאים של ה-Codelab הזה, תוסיפו כללי אבטחה כדי לאבטח את הנתונים שלכם. אסור להפיץ או לחשוף אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה לדלי האחסון.
5. לוחצים על יצירה.

הגדרת כללי אבטחה למאגר ב-Storage

עכשיו צריך להגדיר את כללי האבטחה שנדרשים לאפליקציה הזו. הכללים האלה מאפשרים רק למשתמשים מאומתים לפרסם תמונות חדשות, אבל הם מאפשרים לכל אחד לצפות בתמונה של פריט שמופיע ברשימה.

1. בחלק העליון של מרכז הבקרה אחסון, לוחצים על הכרטיסייה כללים.

2. מעתיקים את קבוצת הכללים הבאה ומדביקים אותה בשדה הכללים בכרטיסייה כללים:

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. לוחצים על פרסום.

3. הרצת האפליקציה לדוגמה

שכפול הפרויקט ב-StackBlitz

ב-Codelab הזה מוסבר איך ליצור ולפרוס אפליקציה באמצעות StackBlitz, כלי עריכה אונליין שמשולבים בו כמה Workflows של Firebase. לא צריך להתקין תוכנה או ליצור חשבון StackBlitz מיוחד.

ב-StackBlitz אפשר לשתף פרויקטים עם אחרים. אנשים אחרים שיש להם את כתובת ה-URL של פרויקט StackBlitz יכולים לראות את הקוד שלכם ולבצע Fork של הפרויקט, אבל הם לא יכולים לערוך את פרויקט StackBlitz.

1. עוברים לכתובת ה-URL הזו כדי לראות את קוד ההתחלה: https://stackblitz.com/edit/friendlymarket-codelab.
2. בחלק העליון של דף StackBlitz, לוחצים על Fork.

עכשיו יש לכם עותק של קוד ההתחלה כפרויקט StackBlitz משלכם. לא נכנסת לחשבון, ולכן שם החשבון שלך הוא @anonymous, אבל זה בסדר. לפרויקט יש שם ייחודי וכתובת URL ייחודית. כל הקבצים והשינויים נשמרים בפרויקט StackBlitz הזה.

הוספת אפליקציית אינטרנט של Firebase לפרויקט

1. ב-StackBlitz, מציגים את הקובץ src/firebase-config.js. כאן מוסיפים את אובייקט ההגדרה של Firebase.
2. במסוף Firebase, לוחצים על Project Overview בפינה הימנית העליונה כדי לעבור לדף הסקירה הכללית של הפרויקט.
3. במרכז דף הסקירה הכללית של הפרויקט, לוחצים על סמל האינטרנט כדי ליצור אפליקציית אינטרנט חדשה ב-Firebase.
4. רושמים את האפליקציה עם הכינוי FriendlyMarket Codelab.
5. ב-codelab הזה, לא מסמנים את התיבה לצד Also set up Firebase Hosting for this app (הגדרת אירוח ב-Firebase גם לאפליקציה הזו). במקום זאת, תשתמשו בחלונית התצוגה המקדימה של StackBlitz.
6. לוחצים על Register app (רישום האפליקציה).
7. מעתיקים את אובייקט ההגדרה של Firebase באפליקציה ללוח. אל תעתיקו את התגים <script>. הערה: אם תצטרכו למצוא את ההגדרה בהמשך, תוכלו להיעזר בהוראות האלה.

8. לוחצים על Continue to console (המשך אל מסוף Cloud).

מוסיפים את הגדרות הפרויקט לאפליקציה:

1. חוזרים ל-StackBlitz ועוברים לקובץ src/firebase-config.js.
2. מדביקים את קטע ההגדרות בקובץ. אחרי שתעשו את זה, הקוד אמור להיראות כך (אבל עם הערכים של הפרויקט שלכם באובייקט ההגדרה):

מהי נקודת ההתחלה של האפליקציה הזו?

כדאי לעיין בתצוגה המקדימה האינטראקטיבית בצד שמאל של המסך ב-StackBlitz:

ב-codelab הזה מתחילים עם קוד לאפליקציית marketplace בסיסית. כל משתמש יכול לראות רשימה של פריטים למכירה וללחוץ על קישור כדי לראות את דף הפרטים של פריט מסוים. אם המשתמש מחובר לחשבון, הוא יראה את פרטי הקשר של המוכר כדי שיוכל לנהל משא ומתן על המחיר ולקנות את הפריט.

כדאי לנסות את האפליקציה:

1. נכנסים לחשבון באמצעות הלחצן בחלק העליון של מסך הבית. אתם יכולים להשתמש בכתובת אימייל, בשם ובסיסמה מזויפים.
2. כדי ליצור כרטיס מוצר, לוחצים על הלחצן מכירת מוצר בפינה השמאלית התחתונה.
3. בשדה Title (כותרת), מזינים Xylophone.
4. בשדה מחיר מבוקש, מזינים 50.
5. בשדה תיאור הפריט, מזינים את הערך This high quality xylophone can be used to play music..
6. מורידים את התמונה הזו של קסילופון למחשב ומעלים אותה באמצעות הלחצן תמונה של הפריט.

file_downloadהורדת תמונה

7. אחרי שממלאים את כל השדות ומעלים תמונה, לוחצים על פרסום.
8. מאתרים את הכרטיס החדש. לוחצים על הפריט כדי לראות את מסך הפרטים שלו, ואז מרחיבים את החלונית פרטים ליצירת קשר עם המוכר.
9. חוזרים למסוף Firebase. במרכז הבקרה Database, יופיע עכשיו רשומה של הפריט שפרסמתם מתחת לצומת forsale. במרכז הבקרה אחסון, תוכלו למצוא את התמונה שהעליתם גם בנתיב friendlymarket.

4. חיפוש והתקנה של תוסף

הבעיה

אחרי מחקר משתמשים באפליקציה, גיליתם שרוב המשתמשים נכנסים לאתר מהסמארטפון ולא מהמחשב. עם זאת, מהנתונים הסטטיסטיים עולה גם שמשתמשים בנייד נוטים לעזוב את האתר ("נטישה") אחרי כמה שניות בלבד.

מתוך סקרנות, אתם בודקים את האתר שלכם במהירויות חיבור לנייד. (כאן מוסבר איך עושים זאת). התמונות נטענות לאט מאוד ולא נשמרות במטמון בדפדפן. זמן הטעינה הארוך הזה מתרחש בכל צפייה בדף!

הפתרון

אחרי שקראתם על אופטימיזציה של תמונות, החלטתם לבצע שני שלבים כדי לשפר את ביצועי טעינת התמונות:

• דחיסת תמונות. גם טלפונים ניידים מצלמים תמונות ברזולוציה גבוהה בהרבה מזו שנדרשת לאפליקציה הזו. הקטנת גודל הקובץ תזרז את זמני הטעינה בלי שתרגישו ירידה ברזולוציה באפליקציה.
• שמירה במטמון. כברירת מחדל, לאובייקטים ב-Cloud Storage יש כותרות שמורות לדפדפנים לא לשמור תמונות במטמון, כלומר הדפדפן של המשתמש יוריד מחדש את אותה תמונה שוב ושוב. למזלכם, אתם יכולים לשנות את הכותרות האלה כדי לאפשר שמירה במטמון. אפשר להגדיר את הכותרות האלה באמצעות Cloud Storage SDK בצד הלקוח וגם באמצעות SDK של Firebase לאדמינים.

כדי לדחוס תמונות, צריך להגביל את איכות ההעלאה או להשתמש בתהליך בצד השרת שמשנה את גודל התמונות. כדאי לשקול את היתרונות והחסרונות:

• מצד הלקוח. בתהליך בצד הלקוח, אפשר פשוט להגביל את גודל הקובץ של התמונות שמועלות. כלומר, לא צריך לכתוב או לתחזק לוגיקה חדשה של שרת. אבל המשמעות היא גם שהמוכרים צריכים להבין איך לשנות גודל של התמונות שלהם, וזה יכול להיות מסובך ולא אינטואיטיבי, ולמנוע מהם ליצור כרטיס מוצר חדש.
• בצד השרת. אם אתם משתמשים ב-Cloud Functions for Firebase, אתם יכולים להפעיל פונקציה שמשנה את הגודל של תמונה באופן אוטומטי בזמן ההעלאה. כלומר, המוכרים יכולים להעלות תמונות בכל גודל שהם רוצים (בלי שהם צריכים לעשות משהו נוסף), והפונקציה של ה-Backend יכולה לשנות את גודל התמונה בצורה חלקה. יש אפילו דוגמה לפונקציה הזו.

נראה שהפתרון המתאים הוא בצד השרת. אבל גם בפתרון הזה צריך לשכפל את הדוגמה, לפעול לפי הוראות ההגדרה ואז לפרוס את הפונקציה באמצעות Firebase CLI. שינוי הגודל של תמונות נשמע כמו תרחיש שימוש נפוץ. אין פתרון קל יותר?

פתרון קל יותר

יש לך מזל. יש פתרון קל יותר: תוספים ל-Firebase! אפשר לעיין בקטלוג התוספים הזמינים באתר Firebase.

תראו את זה! יש תוסף שנקרא Resize Images (שינוי גודל תמונות). זה נראה מבטיח.

עכשיו אפשר להשתמש בתוסף הזה באפליקציה!

איך מתקינים תוסף

1. כדי לראות מידע נוסף על התוסף, לוחצים על הצגת פרטים. בקטע What you can configure (מה אפשר להגדיר), התוסף מאפשר להגדיר את המאפיינים שרוצים לשנות את הגודל שלהם, ואפשר אפילו להגדיר את כותרת המטמון. יופי!
2. לוחצים על הלחצן Install in console (התקנה במסוף) בדף הפרטים של התוסף. תועברו לדף במסוף Firebase שבו מפורטים כל הפרויקטים שלכם.
3. בוחרים את הפרויקט FriendlyMarket שיצרתם בשביל ה-codelab הזה.
4. פועלים לפי ההוראות במסך עד שמגיעים לשלב הגדרת התוסף. בהוראות יוצג סיכום בסיסי של התוסף, וגם משאבים שהוא ייצור ותפקידי גישה שהוא ידרוש.
5. בשדה **Cache-Control** header for resized images, מזינים את הערך הבא:

public, max-age=31536000

6. משאירים את ערכי ברירת המחדל בשאר הפרמטרים.
7. לוחצים על התקנת התוסף.

בזמן שמחכים לסיום ההתקנה…

התקנה באמצעות ממשק שורת הפקודה של Firebase

אם אתם מעדיפים להשתמש בכלים של שורת הפקודה, אתם יכולים להתקין תוספים ולנהל אותם גם באמצעות Firebase CLI. פשוט משתמשים בפקודה firebase ext, שזמינה בגרסה העדכנית של ה-CLI. מידע נוסף זמין כאן.

(אופציונלי) מידע נוסף על כותרות Cache-Control

הערך public, max-age=31536000 בכותרת Cache-Control מציין שהתמונה תישמר במטמון למשך שנה לכל היותר. מידע נוסף על כותרת Cache-Control זמין במאמר הזה.

עדכון קוד הלקוח

התוסף שהתקנתם כותב תמונה בגודל שונה לאותו מאגר כמו התמונה המקורית. הממדים שהוגדרו מתווספים לשם הקובץ של התמונה שגודלה שונה. לכן, אם נתיב הקובץ המקורי נראה כך: friendlymarket/user1234-car.png, נתיב הקובץ של התמונה שגודלה שונה ייראה כך: friendlymarket/user1234-car_200x200.png.

בואו נעדכן את האפליקציה כך שהיא תאחזר את התמונות המוקטנות במקום את התמונות בגודל מלא.

1. ב-StackBlitz, פותחים את הקובץ src/firebase-refs.js.
2. מחליפים את הפונקציה הקיימת getImageRef בקוד הבא כדי ליצור הפניה לתמונה שגודלה שונה:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

רוצים לנסות?

התוסף הזה עוקב אחרי העלאות של תמונות חדשות, ולכן הגודל של התמונה הקיימת לא ישתנה.

כדי לראות את התוסף בפעולה, יוצרים פוסט חדש:

1. לוחצים על Friendly Market בסרגל העליון של האפליקציה כדי לעבור למסך הבית.
2. כדי ליצור כרטיס מוצר, לוחצים על הלחצן מכירת מוצר בפינה השמאלית התחתונה של האפליקציה.
3. בשדה Title (שם), מזינים Coffee
4. בשדה מחיר מבוקש, מזינים 1
5. בשדה תיאור הפריט, מזינים את הערך הבא: Selling one cafe latte. It has foam art in the shape of a bear.
6. מורידים את התמונה הזו של ספל קפה למחשב ומעלים אותה באמצעות הלחצן תמונה של הפריט. file_downloadהורדת תמונה
7. אחרי שממלאים את כל השדות ומעלים תמונה, לוחצים על פרסום. המוצר 'קפה' יופיע מתחת למוצר 'קסילופון'.
8. במסוף Firebase, בלוח הבקרה Functions (פונקציות), לוחצים על הכרטיסייה Logs (יומנים). אמורים לראות יומנים מהפונקציה שמעידים שהיא בוצעה.

9. עוברים ללוח הבקרה Storage כדי לראות את תמונת הקפה המקורית ואת הגרסה הממוזערת שלה בנתיב friendlymarket.
10. בחלונית התצוגה המקדימה של StackBlitz, טוענים מחדש את מסך הבית של האפליקציה כמה פעמים. תראו שתמונת הקפה נטענת הרבה יותר מהר מתמונת הקסילופון.

התמונה נטענת מהר יותר בטעינת הדף הראשונה כי היא קטנה יותר, ובטעינות הדף הבאות היא נטענת משמירה במטמון הדפדפן במקום להפעיל בקשת רשת.

5. הגדרה מחדש של תוסף

הבעיה

האפליקציה שומרת אוטומטית טיוטות של כרטיסי מוצר של מוֹכרים. המשתמשים אוהבים את התכונה הזו, אבל הנתונים הסטטיסטיים קצת מדאיגים. מהדוחות שלך עולה שרק כ-10% מהטיוטות מתפרסמות בפועל, ו-90% מהן רק תופסות מקום במסד הנתונים שלך.

הפתרון

אחרי כמה חישובים מהירים, אתם מבינים שאתם צריכים לשמור רק כחמש טיוטות בכל זמן נתון.

זוכרים את קטלוג התוספים ל-Firebase? יכול להיות שכבר יש פתרון מוכן למצב הזה. כדאי להתקין את התוסף Limit Child Nodes כדי שמספר הטיוטות השמורות לא יעלה על חמש. התוסף ימחק את הטיוטה הכי ישנה בכל פעם שתוסף טיוטה חדשה.

1. לוחצים על הלחצן התקנה בדף הפרטים של התוסף.
2. בוחרים את פרויקט Firebase שבו אתם משתמשים עבור אפליקציית האינטרנט שלכם בזירת המסחר.
3. פועלים לפי ההוראות במסך עד שמגיעים לשלב הגדרת התוסף.
4. בשדה נתיב למסד נתונים בזמן אמת, מזינים drafts. זהו הנתיב במסד הנתונים שבו נשמרות הטיוטות.
5. בשדה Maximum count of nodes to keep (מספר הצמתים המקסימלי לשמירה), מזינים את הערך 5. כלומר, יישמרו חמש טיוטות לכל פריט, ואם תתווסף טיוטה נוספת, הטיוטה הכי ישנה תימחק אוטומטית.
6. לוחצים על התקנת התוסף.

בזמן שמחכים לסיום ההתקנה...

תוספי מעקב

כשמתקינים תוסף, התהליך יוצר כמה פונקציות. כדאי לבדוק באיזו תדירות הפונקציות האלה פועלות, או לצפות ביומנים ובשיעורי השגיאות. מידע מפורט על מעקב אחרי התוסף זמין במאמר בנושא ניהול תוספים מותקנים. כדי לראות את הפונקציות שנוצרו על ידי התוסף Resize Images בשלב הקודם, פועלים לפי ההוראות במסמכי התיעוד.

הסרת תוספים

כדי להסיר תוסף מהפרויקט, יכול להיות שתתפתו למחוק את הפונקציות הבודדות שהתוסף יוצר, אבל זה עלול להוביל להתנהגות לא צפויה, כי תוסף אחד יכול ליצור כמה פונקציות. כך מסירים תוספים.

הסרת ההתקנה מוחקת את כל המשאבים (כמו פונקציות של התוסף) ואת חשבון השירות שנוצר עבור המופע הזה של התוסף. עם זאת, כל הארטיפקטים שנוצרו על ידי התוסף (כמו תמונות שגודלן שונה) יישארו בפרויקט אחרי הסרת התוסף.

התקנה של כמה עותקים של תוסף בפרויקט אחד

אתם לא מוגבלים להתקנה של מופע אחד של תוסף נתון בפרויקט. אם רוצים להגביל את הערכים בנתיב אחר, אפשר להתקין עוד מופע של התוסף הזה. עם זאת, לצורך ה-codelab הזה, תתקינו את התוסף רק פעם אחת.

הדגמה

1. בודקים שהתחברתם לחשבון שדרכו פרסמתם את התמונה של הקסילופון או של הקפה לאטה
2. יוצרים כמה טיוטות:
3. לוחצים על הלחצן מכירת פריט בפינה השמאלית התחתונה של האפליקציה.
4. עורכים את השם ל'טיוטה 1'.
5. גוללים למטה לקטע טיוטות ורואים את מספר הטיוטות. צריכים להיות לפחות שניים.
6. לוחצים על הלחצן FRIENDLY MARKET (שוק ידידותי) בסרגל האפליקציות העליון. כך תהיה לכם טיוטה שמורה, אבל לא תצטרכו לפרסם אותה.
7. חוזרים על הפעולה עבור 'טיוטה 2', 'טיוטה 3' וכן הלאה עד 'טיוטה 6'.
8. כשיוצרים את 'טיוטה 6', שימו לב ש'טיוטה 1' נעלמת מהקטע טיוטות.
9. כמו שעשיתם עם התוסף Resize Images, אתם יכולים לבדוק את יומני הפונקציות כדי לראות אילו פונקציות הופעלו.

אופס, המגבלה של מספר הטיוטות שניתן לשמור קטנה מדי

צוות תמיכת הלקוחות פונה אליך ומודיע לך שחלק מהמוכרים הפעילים ביותר שלך מתלוננים על כך שהטיוטות שלהם נמחקות לפני שהם יכולים לפרסם אותן. אתם בודקים את החישובים עם חבר הצוות ומגלים שהייתה טעות של פי 10,000!

מה הפתרון? בואו נגדיר מחדש את התוסף שהתקנתם.

1. בחלונית הימנית במסוף Firebase, לוחצים על תוספים.
2. בכרטיס של התוסף המותקן, לוחצים על ניהול.
3. בפינה השמאלית העליונה, לוחצים על הגדרה מחדש של התוסף.
4. משנים את הערך של Maximum count of nodes to keep (מספר הצמתים המקסימלי לשמירה) ל-50000.
5. לוחצים על שמירה.

זה כל מה שצריך לעשות. בזמן שנדרש לעדכון התוסף, אפשר לדבר עם צוות התמיכה ולעדכן אותו שהתיקון כבר נמצא בתהליך פריסה.

6. מחיקה אוטומטית של נתוני משתמשים

הבעיה

צוות תמיכת הלקוחות פנה אליך שוב. מוכרים שמחקו את החשבונות שלהם עדיין מקבלים אימיילים ממשתמשים אחרים, והם כועסים! המוכרים האלה ציפו שכתובות האימייל שלהם יימחקו מהמערכות שלכם כשהם ימחקו את החשבונות שלהם.

כרגע, צוות התמיכה מוחק את הנתונים של כל משתמש באופן ידני, אבל חייבת להיות דרך טובה יותר! אתם חושבים על זה, ושוקלים לכתוב עבודת אצווה משלכם שפועלת מעת לעת ומנקה כתובות אימייל מחשבונות שנמחקו. אבל נראה שמחיקת נתוני משתמשים היא בעיה נפוצה. יכול להיות שגם תוספים ל-Firebase יכולים לעזור לפתור את הבעיה הזו.

הפתרון

תגדירו את התוסף הכלי למחיקת נתוני משתמשים כך שימחק אוטומטית את הצומת users/uid במסד הנתונים כשמשתמש מוחק את החשבון שלו.

1. לוחצים על הלחצן התקנה בדף הפרטים של התוסף.
2. בוחרים את פרויקט Firebase שבו אתם משתמשים עבור אפליקציית האינטרנט שלכם בזירת המסחר.
3. פועלים לפי ההוראות במסך עד שמגיעים לשלב הגדרת התוסף.
4. בשדה נתיבים של מסד נתונים בזמן אמת, מזינים sellers/{UID}. החלק  הוא הצומת שהצאצאים שלו מכילים כתובות אימייל של משתמשים, ו- הוא תבנית wildcard.sellers{UID} במקרה כזה, התוסף ידע שכאשר המשתמש עם ה-UID‏ 1234 ימחק את החשבון שלו, התוסף צריך למחוק את sellers/1234 מהמסד הנתונים.
5. לוחצים על התקנת התוסף.

בזמן שמחכים לסיום ההתקנה...

אני רוצה לדבר איתך על אפשרויות ההתאמה האישית

ב-Codelab הזה ראיתם שתוספים ל-Firebase יכולים לעזור לפתור תרחישי שימוש נפוצים, ושאפשר להגדיר את התוספים כך שיתאימו לצרכים של האפליקציה שלכם.

עם זאת, תוספים לא יכולים לפתור כל בעיה, והבעיה של מחיקת נתוני משתמשים היא דוגמה טובה לכך. התוסף Delete User Data (הכלי למחיקת נתוני משתמשים) אמנם נותן מענה לתלונה הנוכחית שלפיה האימיילים עדיין חשופים אחרי שהמשתמש מוחק את החשבון שלו, אבל הוא לא מוחק הכול. לדוגמה, רשימת הפריטים עדיין זמינה, וגם כל התמונות ב-Cloud Storage יישארו. הכלי למחיקת נתוני משתמשים מאפשר לנו להגדיר נתיב ב-Cloud Storage למחיקה, אבל מכיוון שמשתמשים יכולים להעלות קבצים רבים ושונים עם שמות שונים, לא תוכלו להגדיר את התוסף הזה למחיקה אוטומטית של הארטיפקטים האלה. במקרים כאלה, יכול להיות שיהיה עדיף להשתמש ב-Cloud Functions for Firebase כדי לכתוב קוד שספציפי למודל הנתונים של האפליקציה.

תוספים וחיוב

השימוש בתוספים של Firebase הוא בחינם (אתם משלמים רק על המשאבים הבסיסיים שבהם אתם משתמשים), אבל יכול להיות שחלק מהמשאבים הבסיסיים שנדרשים לתוסף יחייבו חיוב. ה-codelab הזה נועד להשלמה ללא חשבון לחיוב. עם זאת, הגדרה של תוכנית Flame או Blaze מאפשרת גישה להרבה תוספים מעניינים מאוד של Firebase.

לדוגמה, אתם יכולים לקצר כתובות URL, להפעיל שליחת אימייל, לייצא אוספים ל-BigQuery ועוד. כאן אפשר לעיין בקטלוג המלא של התוספים.

אם יש תוסף שהייתם רוצים להשתמש בו אבל הוא לא זמין כרגע, נשמח לשמוע על כך. כדי להציע תוסף חדש, אפשר להגיש בקשה להוספת תכונה לתמיכה של Firebase.

הדגמה

אחרי שמתקינים את התוסף, מוחקים משתמש ובודקים מה קורה:

1. במסוף Firebase, עוברים אל לוח הבקרה של מסד הנתונים בזמן אמת.
2. מרחיבים את הצומת sellers.
3. המידע של כל מוכר מקושר למזהה המשתמש שלו (UID). בוחרים מזהה משתמש (UID).
4. במסוף Firebase, עוברים אל לוח הבקרה של אימות ומאתרים את ה-UID של המשתמש.
5. מרחיבים את התפריט משמאל למזהה המשתמש ובוחרים באפשרות מחיקת החשבון.

6. חוזרים למרכז הבקרה של מסד נתונים בזמן אמת. הפרטים של בית העסק יימחקו!

7. כל הכבוד!

למרות שלא כתבתם הרבה קוד ב-codelab הזה, הוספתם תכונות חשובות לאפליקציית ה-Marketplace שלכם.

למדתם איך למצוא, להגדיר, להתקין ולהגדיר מחדש תוספים. בנוסף, למדתם איך לעקוב אחרי תוספים מותקנים ואיך להסיר אותם, אם יש צורך.

מה השלב הבא?

כדאי לבדוק את התוספים האלה:

• תרגום של מחרוזות טקסט ב-Cloud Firestore (נדרש חשבון לחיוב)
• הוספה של משתמשים חדשים לרשימות תפוצה ב-Mailchimp (נדרש חשבון לחיוב)
• קיצור כתובות URL (נדרש חשבון לחיוב)

צריכים עוד קוד מותאם אישית בצד השרת?

• כדאי לעיין ב-codelab בנושא Cloud Functions for Firebase

מסמכים שימושיים אחרים

ניהול נכסי מידע:

• ניהול תוספים באמצעות Firebase CLI
• הגדרת התראות לגבי תקציב
• בדיקת התדירות שבה תוסף מותקן פועל
• עדכון של תוסף מותקן לגרסה חדשה
• הסרת תוסף

פרטים נוספים על תוספים:

• צפייה בקוד המקור ובמסמכים של כל תוסף ב-GitHub
• מידע על הרשאות וגישה שניתנות לתוסף