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

1. מבוא

מטרות עסקיות

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

מה תפַתחו

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

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

מה תלמדו

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

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

מה צריך

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

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

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

1. במסוף Firebase, לוחצים על Add project (הוספת פרויקט) ומעניקים לפרויקט ב-Firebase את השם FriendlyMarket.
2. לוחצים על האפשרויות ליצירת פרויקט. מאשרים את התנאים של Firebase. מדלגים על הגדרת Google Analytics כי לא תשתמשו ב-Analytics באפליקציה הזו.
3. ממתינים עד להקצאת המשאבים לפרויקט ולוחצים על המשך.

באפליקציה שתבנו נעשה שימוש בכמה מוצרים של 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. לוחצים על Authentication (אימות) ואז על הכרטיסייה Sign-in method (שיטת כניסה) (או לוחצים כאן כדי לעבור ישירות לכרטיסייה Sign-in method).
3. לוחצים על אימייל/סיסמה ברשימה ספקי כניסה, מעבירים את המתג הפעלה למצב מופעל ולוחצים על שמירה.

הפעלת Realtime Database

האפליקציה משתמשת ב-Firebase Realtime Database כדי לשמור פריטים למכירה.

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

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

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

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

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. לוחצים על Publish (פרסום).

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

הגדרת כללי אבטחה לקטגוריה של Storage

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

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

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

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

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

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

הסתעפות (fork) של פרויקט StackBlitz

בקודלאב הזה תלמדו איך לפתח ולפרוס אפליקציה באמצעות StackBlitz, עורך אונליין שמשולב בו מספר תהליכי עבודה של Firebase. כדי להשתמש ב-Stackblitz לא צריך להתקין תוכנה או חשבון 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. בקודלאב הזה, לא מסמנים את התיבה לצד Also set up Firebase Hosting for this app (גם להגדיר אירוח ב-Firebase לאפליקציה הזו). במקום זאת, תשתמשו בחלונית התצוגה המקדימה של StackBlitz.
6. לוחצים על רישום האפליקציה.
7. מעתיקים ללוח את אובייקט התצורה של האפליקציה ב-Firebase. לא מעתיקים את התגים <script>. הערה: אם תצטרכו למצוא את ההגדרה בשלב מאוחר יותר, תוכלו להיעזר בהוראות האלה.

8. לוחצים על Continue to console.

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

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

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

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

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

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

1. נכנסים באמצעות הלחצן בחלק העליון של מסך הבית. אתם יכולים להשתמש בכתובת אימייל, בשם ובסיסמה מזויפים.
2. לוחצים על הלחצן למכירה בפינה השמאלית התחתונה כדי ליצור כרטיס מוצר.
3. בשדה Title, מזינים Xylophone.
4. בשדה Asking Price, מזינים 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, אתם יכולים להפעיל פונקציה שמשנה את הגודל של תמונה באופן אוטומטי בזמן ההעלאה. כלומר, המוכרים יכולים להעלות תמונות בכל גודל שהם רוצים (בלי עבודה נוספת מצדם), והפונקציה בקצה העורפי יכולה לשנות את גודל התמונה בצורה חלקה. יש אפילו דוגמה לפונקציה הזו!

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

פתרון קל יותר

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

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

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

התקנת תוסף

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

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. כדי ליצור ערך ref לתמונה ששיניתם את הגודל שלה, מחליפים את הפונקציה הקיימת 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. בשדה Asking Price, מזינים 1
5. בשדה תיאור פריט, מזינים את הערך הבא: Selling one cafe latte. It has foam art in the shape of a bear.
6. מורידים את התמונה הזו של כוס קפה למחשב ומעלים אותה באמצעות הלחצן תמונה של הפריט. file_downloadהורדת התמונה
7. אחרי שממלאים את כל השדות ומעלים תמונה, לוחצים על פרסום. דף המוצר של הקפה יופיע מתחת לכלי הנגינה Xylophone.
8. בלוח הבקרה Functions במסוף Firebase, לוחצים על הכרטיסייה Logs. אמורים להופיע יומנים מהפונקציה שמראים שהיא בוצעה.

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

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

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

הבעיה

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

הפתרון

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

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

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

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

מעקב אחרי תוספים

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

הסרת תוספים

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

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

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

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

הדגמה

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. בפינה הימנית העליונה, לוחצים על Reconfigure extension (הגדרה מחדש של התוסף).
4. משנים את הערך של Maximum count of nodes to keep ל-50000.
5. לוחצים על שמירה.

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

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

הבעיה

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

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

הפתרון

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

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

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

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

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

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

תוספים וחיובים

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

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

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

הדגמה

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

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

6. חוזרים למרכז הבקרה של Realtime Database. פרטי בית העסק יוסרו.

7. כל הכבוד!

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

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

מה השלב הבא?

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

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

רוצים להוסיף עוד קוד מותאם אישית בצד השרת?

• הקודלאב של Cloud Functions for Firebase

מסמכים מועילים אחרים

ניהול התוספים:

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

מידע נוסף על תוספים:

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