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

1. הקדמה

מטרות

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

מה שתבנה

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

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

מה תלמד

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

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

מה אתה צריך

• מחשב עם דפדפן אינטרנט מודרני מותקן (מומלץ כרום)
• חשבון גוגל

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

צור פרויקט Firebase

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

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

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

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

אפשר התחברות לאימייל

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

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

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

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

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

3. בחר התחל במצב נעול ולאחר מכן לחץ על הפעל .

הגדר כללי אבטחה

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

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 כדי לשמור תמונות של פריטים למכירה.

1. בקטע פיתוח בחלונית השמאלית של מסוף Firebase, לחץ על אחסון .
2. לחץ על התחל .

3. קבל את ברירות המחדל ליצירת דלי האחסון המוגדר כברירת מחדל (לחץ על הבא , שמור על מיקום ברירת המחדל ולחץ על סיום ).

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

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. לחץ על פרסם .

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

מזלג את פרויקט StackBlitz

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

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

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

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

הוסף אפליקציית Firebase Web לפרויקט

1. ב-StackBlitz, הצג את קובץ src/firebase-config.js שלך. זה המקום שבו תוסיף את אובייקט התצורה של Firebase.
2. בחזרה למסוף Firebase, נווט אל דף הסקירה הכללית של הפרויקט שלך על ידי לחיצה על סקירת פרויקט בפינה הימנית העליונה.
3. במרכז דף הסקירה הכללית של הפרויקט שלך, לחץ על סמל האינטרנט כדי ליצור אפליקציית אינטרנט חדשה של Firebase.
4. רשום את האפליקציה עם הכינוי FriendlyMarket Codelab .
5. עבור מעבד קוד זה, אל תסמן את התיבה שליד הגדר גם אירוח Firebase עבור אפליקציה זו . אתה הולך להשתמש בחלונית התצוגה המקדימה של StackBlitz במקום זאת.
6. לחץ על הרשמה אפליקציה .
7. העתק את אובייקט תצורת Firebase של האפליקציה שלך ללוח. אל תעתיק את תגי <script> . הערה: אם תצטרך למצוא את התצורה מאוחר יותר, עקוב אחר ההוראות כאן .

8. לחץ על המשך למסוף .

הוסף את תצורת הפרויקט שלך לאפליקציה שלך:

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

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

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

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

נסה את האפליקציה:

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

file_download הורד תמונה

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

4. מצא והתקן הרחבה

הבעיה

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

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

הפתרון

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

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

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

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

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

פתרון קל יותר

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

תסתכל על זה! יש הרחבה בשם "שינוי גודל תמונות". זה נראה מבטיח.

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

התקן הרחבה

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

public, max-age=31536000

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

בזמן שאתה מחכה להשלמת ההתקנה...

התקנה עם ממשק שורת הפקודה של Firebase

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

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

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

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

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

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

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

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. עבור כותרת , הזן Coffee
4. עבור המחיר המבוקש , הזן 1
5. עבור תיאור פריט , הזן את הפרטים הבאים: Selling one cafe latte. It has foam art in the shape of a bear .
6. הורד תמונה זו של כוס קפה למחשב שלך, והעלה אותה באמצעות הלחצן PICTURE OF YOUR ITEM . file_download הורד תמונה
7. לאחר שתמלא את כל השדות והעלאת תמונה, לחץ על פרסם . אתה תראה את רשימת הקפה מופיעה מתחת לקסילופון!
8. בלוח המחוונים של פונקציות במסוף Firebase, לחץ על הכרטיסייה יומנים . אתה אמור לראות יומנים מהפונקציה שמראים שהיא בוצעה.

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

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

5. הגדר מחדש הרחבה

הבעיה

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

הפתרון

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

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

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

בזמן שאתה מחכה להשלמת ההתקנה...

ניטור הרחבות

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

הסרת התקנת הרחבות

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

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

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

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

ראה את זה בפעולה

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

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

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

איך אתה יכול לתקן את זה? בואו להגדיר מחדש את התוסף המותקן!

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

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

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

הבעיה

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

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

הפתרון

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

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

בזמן שאתה מחכה להשלמת ההתקנה...

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

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

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

הרחבות וחיוב

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

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

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

ראה את זה בפעולה

לאחר השלמת ההתקנה של התוסף שלך, מחק משתמש וראה מה קורה:

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

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

7. מזל טוב!

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

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

מה הלאה?

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

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

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

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

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

ניהול הרחבות:

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

למד את הפרטים העדינים יותר על הרחבות:

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