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

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

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

כיצד ליצור ולהוסיף נתונים למסד נתונים של Firebase

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

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

1. מ דף הבית של Firebase, בחר עבור אל קונסולה בפינה השמאלית העליונה של האתר.
2. תחת "הפרויקטים שלך ב-Firebase", בחר הוסף פרויקט.
3. עקוב אחר ההנחיות כדי ליצור פרויקט חדש.
4. לאחר השלמתו, הפרויקט ייפתח. בצד שמאל של המסך, יש פאנל שמפרט את התכונות ש-Firebase מספקת. העבר את העכבר מעל הסמלים עד שתראה מסד נתונים של Firestore, ובחר בו.
instagram viewer
5. בחר צור מסד נתונים, ופעל לפי ההנחיות כדי ליצור מסד נתונים.
6. בעת בחירת כללי האבטחה, בחר התחל במצב בדיקה. ניתן לשנות זאת מאוחר יותר כדי להבטיח שהנתונים מאובטחים יותר. אתה יכול לקרוא עוד על כללי האבטחה של Firestore בעקבות ה תיעוד Firebase.
7. לאחר השלמתו, מסד הנתונים ייפתח. מבנה מסד הנתונים משתמש באוספים, שהוא בעצם אותו רעיון כמו טבלאות מסד נתונים. לדוגמה, אם הייתם צריכים שתי טבלאות, אחת לאחסון פרטי חשבון ואחת לאחסון פרטי המשתמש, הייתם יוצרים שני אוספים בשם חשבון ומשתמש.
8. בחר התחל איסוף ולהוסיף מזהה אוסף בשם "משתמש".
9. הוסף את הרשומה הראשונה, עם מידע על משתמש אחד. לחץ על הוסף שדה כדי להוסיף שלושה שדות חדשים: firstName (מחרוזת), lastName (מחרוזת) ו-vipMember (בוליאני). ניתן ליצור אוטומטית את מזהה המסמך.
10. נְקִישָׁה להציל.
11. להוספת רשומות נוספות לאוסף "משתמש", לחץ על הוסף מסמך (הוסף מסמך שווה ערך להוספת רשומה או משתמש חדש). הוסף עוד ארבעה משתמשים עם אותם שלושה שדות.

מסד הנתונים מוגדר כעת עם כמה נתוני בדיקה.

כיצד לשלב את Firebase באפליקציה Angular שלך

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

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

   npm i firebase
   

5. לאחר מכן, Firebase יציג כמה פרטי תצורה. שמור את הפרטים הללו ולחץ המשך לקונסולה.
6. בהתבסס על הפרטים שסופקו בשלב הקודם, העתק את הקוד הבא לתוך environment.prod.ts ו- environment.ts ביישום Angular.

   יצוא קונסט סביבת = {
    הפקה: נכון,
    firebaseConfig: {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    projectId: "מזהה-פרויקט שלך",
    storageBucket: "your-storage-buckey",
    messagingSenderId: "your-messaging-sender-id",
    appId: "your-api-id",
    measurementId: "your-measurement-id"
    }
   };
   

7. AngularFirestore מ @angular/fire/firestore ישמש להגדרת Firebase ב-Angular. שימו לב ש-AngularFirestore אינו תואם ל-Angular גרסה 9 ומעלה. באפליקציית Angular המקומית, הפעל:

   npm i @angular/fire
   

8. הוסף את מודולי Firestore והסביבה למקטע הייבוא ​​ב-app.module.ts.

   ייבוא ​​{ AngularFireModule } מ-"@angular/fire";
   יבא את { AngularFirestoreModule } מ-"@angular/fire/firestore";
   ייבוא ​​{ סביבה } מ-"../environments/environment";
   

9. גם את המודולים של Firestore צריך לכלול במערך הייבוא ​​ב-app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

כיצד לאחזר נתונים מ-Firebase באמצעות שירות

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

1. צור קובץ בשם service.ts ב- src/app/services תיקייה.
2. הוסף את מודול AngularFirestore למקטע הייבוא, וכלול אותו בבנאי.

   לייבא { Injectable } מ-'@angular/core';
   ייבא את { AngularFirestore } מ'@angular/fire/firestore';
   @הזרקה({
    providedIn: 'שורש'
   })
   מחלקת יצוא שירות {
    בנאי (db פרטי: AngularFirestore) { }
   }
   

3. הוסף פונקציה שמחזירה הבטחה המכילה רשימה של כל המשתמשים. "this.db.collection('משתמש')" מתייחס לאוסף "משתמש" במסד הנתונים.

   getAllUsers() {
    להחזיר הבטחה חדשה((לפתור)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (משתמשים => resolve (משתמשים));
    })
   }
   

4. כדי להשתמש בפונקציה זו בקובץ TypeScript אחר, ייבא את השירות החדש והוסף אותו לבנאי.

   יבא את { שירות } מ'src/app/services/service
   קונסטרוקטור (שירות פרטי: שירות) {}
   

5. קבל את רשימת כל המשתמשים המשתמשים בפונקציה שנוצרה בקובץ השירותים.

   async getUsers() {
    this.allUsers = await this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

כיצד להוסיף רשומה חדשה למסד הנתונים של Firebase

הוסף רשומה חדשה עבור משתמש למסד הנתונים של Firebase.

1. ב-services.ts, הוסף פונקציה חדשה כדי ליצור רשומה חדשה. פונקציה זו מקבלת מזהה משתמש חדש ואת כל הפרטים שלו. הוא משתמש בפונקציית הסט של Firestore כדי לשלוח את המידע הזה ל-Firebase וליצור רשומה חדשה.

   addNewUser (_newId: any, _fName: string, _lName: string, _vip: boolean) {
    this.db.collection("User").doc (_newId).set({firstName: _fName, lastName: _lName, vipMember: _vip});
   }

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

   this.service.addNewUser("62289836", "ג'יין", "איילה", true);
   

כיצד לעדכן נתונים במסד הנתונים של Firebase

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

1. בקובץ service.ts, צור פונקציה בשם updateUserFirstName(). פונקציה זו תעדכן את השם הפרטי של רשומת משתמש שנבחרה. הפונקציה מקבלת את המזהה של הרשומה שצריך לעדכן, ואת הערך החדש עבור השם הפרטי של המשתמש.

   updateUserFirstName (_id: any, _firstName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName});
   }

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

   updateUserFullName (_id: any, _firstName: string, _lastName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. ניתן להשתמש בכל אחת מהפונקציות לעיל בקבצי TypeScript אחרים.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "קיי");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "קיי", "ג'ונס");

כיצד למחוק רשומה ממסד הנתונים של Firebase

כדי למחוק רשומה, השתמש בפונקציית המחיקה של Firestore.

1. בקובץ service.ts, צור פונקציה בשם deleteUser(). פונקציה זו לוקחת את המזהה של הרשומה שיש למחוק.

   deleteUser (_id: any) {
    this.db.doc(`User/${_id}`).delete();
    }
   

2. לאחר מכן ניתן להשתמש בפונקציה שלעיל בקבצי TypeScript אחרים.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

אחזר נתוני Firebase באמצעות שאילתות ומסננים

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

1. ב-services.ts, צור פונקציה שמקבלת את כל משתמשי ה-VIP (זה אם השדה vipMember מוגדר כ-true). זה מסומן על ידי החלק "ref.where('vipMember', '==', true)" של קריאת Firebase למטה.

   getAllVipMembers() {
    להחזיר הבטחה חדשה((לפתור)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (משתמשים => פתרון (משתמשים))
    })
    }

2. השתמש בפונקציה זו בקובץ TypseScript אחר.

   async getAllVipMembers() {
    this.vipUsers = await this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. ניתן לשנות את השאילתה כדי להוסיף פעולות אחרות כגון סדר לפי, התחל ב, או מגבלה. שנה את הפונקציה getAllVipMembers() ב-services.ts לסדר לפי שם המשפחה. פעולת ההזמנה לפי עשויה לדרוש יצירת אינדקס ב-Firebase. אם זה המקרה, לחץ על הקישור המופיע בהודעת השגיאה במסוף.

   getAllVipMembers() {
    להחזיר הבטחה חדשה((לפתור)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (משתמשים => resolve (משתמשים) )
    })
    }

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

   getAllVipMembers() {
    להחזיר הבטחה חדשה((לפתור)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (משתמשים => פתרון (משתמשים))
    })
    }

הוסף נתונים נוספים ל-Firebase ועוד בקשות באפליקציית Angular

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

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

8 קורסים זוויתיים מובילים למתחילים ומתקדמים

קרא הבא

על הסופר