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

1. מבוא

מטרות עסקיות

ב-codelab הזה תוסיפו פונקציונליות לאפליקציה של שוק אונליין בעזרת Firebase Extensions. במהלך ה-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 Realtime Database כדי לשמור נתונים מובנים בענן ולקבל הודעה מיידית כשהנתונים מתעדכנים
• ‫Cloud Storage for Firebase כדי לשמור תמונות בענן

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 הזה, תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אל תפיצו או תחשפו אפליקציה לציבור בלי להוסיף כללי אבטחה לדלי שלכם ב-Storage.
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, כלי עריכה אונליין שמשולבים בו כמה תהליכי עבודה של 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. לוחצים על רישום האפליקציה.
7. מעתיקים את אובייקט ההגדרה של Firebase של האפליקציה ללוח. אל תעתיקו את התגים <script>. הערה: אם תצטרכו למצוא את ההגדרה בהמשך, תוכלו להיעזר בהוראות האלה.

8. לוחצים על המשך אל מסוף Cloud.

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

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

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

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

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

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

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 בצד הלקוח וגם באמצעות Firebase Admin SDK.

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

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

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

פתרון קל יותר

יש לך מזל. יש פתרון קל יותר: Firebase Extensions! אפשר לעיין בקטלוג התוספים הזמינים באתר 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. בלוח הבקרה Functions (פונקציות) במסוף Firebase, לוחצים על הכרטיסייה Logs (יומנים). אמורים לראות יומנים מהפונקציה שמעידים שהיא בוצעה.

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

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

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

הבעיה

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

הפתרון

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

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

1. לוחצים על הלחצן התקנה בדף הפרטים של התוסף.
2. בוחרים את פרויקט Firebase שבו אתם משתמשים עבור אפליקציית האינטרנט שלכם ב-Marketplace.
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 שבו אתם משתמשים עבור אפליקציית האינטרנט שלכם ב-Marketplace.
3. פועלים לפי ההוראות במסך עד שמגיעים לשלב הגדרת התוסף.
4. בשדה נתיבים של Realtime Database, מזינים sellers/{UID}. החלק sellers הוא הצומת שהצאצאים שלו מכילים כתובות אימייל של משתמשים, ו-{UID} הוא תבנית wildcard. במקרה כזה, התוסף ידע שכאשר המשתמש עם ה-UID‏ 1234 ימחק את החשבון שלו, התוסף צריך למחוק את sellers/1234 מהמסד הנתונים.
5. לוחצים על התקנת התוסף.

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

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

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

עם זאת, תוספים לא יכולים לפתור כל בעיה, והבעיה של מחיקת נתוני משתמשים היא דוגמה טובה לכך. התוסף Delete User Data (מחיקת נתוני משתמש) אמנם נותן מענה לתלונה הנוכחית שלפיה האימיילים עדיין חשופים אחרי שהמשתמש מוחק את החשבון שלו, אבל הוא לא מוחק הכול. לדוגמה, רשימת הפריטים עדיין זמינה, וגם כל התמונות ב-Cloud Storage. התוסף Delete User Data (מחיקת נתוני משתמשים) מאפשר לנו להגדיר נתיב ב-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. חוזרים למרכז הבקרה של Realtime Database. הפרטים של בית העסק יימחקו.

7. כל הכבוד!

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

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

מה השלב הבא?

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

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

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

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

מסמכים שימושיים נוספים

ניהול נכסים:

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

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

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