כיצד להשתמש בשאילתות Firebase מורכבות ב-Angular

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

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

הגדר את אפליקציית Angular ואת מסד הנתונים של Firebase

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

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

   ng חָדָשׁחָדָשׁ-זוויתי-אפליקציה

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

   מזהה מסמך	שדות
   מוצר1	שם: "סרטים" מחיר: 12.99 במלאי: 10 מזהה מוצר: "P1" ספק מזהה: "S1"
   מוצר2	שם: "בלונים" מחיר: 1.5 במלאי: 2 מזהה מוצר: "P2" ספק מזהה: "S1"
   מוצר3	שם: "נייר" מחיר: 2.99 במלאי: 20 מזהה מוצר: "P3" ספק מזהה: "S1"
   מוצר4	שם: "שולחן" מחיר: 199 במלאי: 1 מזהה מוצר: "P4" ספק מזהה: "S2"

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

   מזהה מסמך	שדות
   ספק 1	שם: "ספק אומנות ואומנות" מיקום: "קליפורניה, ארה"ב" ספק מזהה: "S1"
   ספק2	שם: "שולחנות מדהימים" מיקום: "סידני, אוסטרליה" ספק מזהה: "S2"

   כך אמור להיראות ערך הספק 1:
6. להתקין זוויתי/אש לתוך האפליקציה שלך.

   npm i @זוויתי/fire

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

   יְצוּאconst סביבה = {
    הפקה: שֶׁקֶר,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-queries",
    storageBucket: "muo-firebase-queries.appspot.com",
    messagingSenderId: "569911365044",
    appId: "1:569911365044:web:9557bfef800caa5cdaf6e1"
    }
   };

10. ייבא את הסביבה מלמעלה, יחד עם מודולי Angular Firebase אל src/app/app.module.ts.

    יְבוּא { סביבה } מ "../environments/environment";
    יְבוּא { AngularFireModule } מ '@angular/fire/compat';
    יְבוּא { AngularFirestoreModule } מ "@angular/fire/compat/firestore";

11. הוסף את מודולי Firebase למערך הייבוא:

    AngularFirestoreModule,
    AngularFireModule.initializeApp(סביבה.firebaseConfig)

כיצד לכתוב שאילתת Firebase מורכבת בקובץ שירותים

אתה יכול לבצע שאילתות בטבלאות במסד הנתונים של Firebase שלך ​​באמצעות קובץ שירותים.

1. צור תיקיה חדשה בשם "שירותים". בתוך התיקיה, צור קובץ חדש בשם "service.ts".
2. הוסף לקובץ את הייבוא, הבנאי והמחלקה של AngularFirestore.

   יְבוּא { הזרקה } מ '@angular/core';
   יְבוּא { AngularFirestore } מ '@angular/fire/compat/firestore';
   @ניתן להזרקה({
    מסופק ב: 'שורש'
   })
   יְצוּאמעמדשֵׁרוּת{
   בַּנַאִי(db פרטי: AngularFirestore) { }
   }

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

   getSupplier (שם: מחרוזת) {
   לַחֲזוֹרחָדָשׁהַבטָחָה((לפתור)=> {
    this.db.collection('ספק', ref => ref.where('שֵׁם', '==', name)).valueChanges().subscribe (ספק => לפתור (ספק))
    })
    }

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

   getProductsFromSupplier (SupplierId: string) {
   לַחֲזוֹרחָדָשׁהַבטָחָה((לפתור)=> {
    this.db.collection('מוצר', ref => ref.where('ספק מזהה', '==', providerId).orderBy('במלאי').startAt (0).limit (1)).valueChanges().subscribe (מוצר => לפתור (מוצר))
    })
    }

6. בתוך ה src/app/app.component.ts קובץ, ייבא את השירות.

   יְבוּא { שירות } מ 'src/app/services/service';

7. הוסף בנאי בתוך המחלקה AppComponent, והוסף את השירות לבנאי.

   בַּנַאִי(שירות פרטי: שירות) { }

8. צור פונקציה חדשה בשם getProductStock(). פונקציה זו תדפיס את המוצר עם המלאי הנמוך ביותר שספק מסוים מספק. הקפד לקרוא לפונקציה החדשה ב- ngOnInit() פונקציה, ולהכריז על משתנה לאחסון התוצאה.

   מוצרים: כל;
   ngOnInit(): בָּטֵל {
   זֶה.getProductStock();
   }
   אסינכרון getProductStock() {
   }

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

   תן ספק = לְהַמתִיןזֶה.service.getSupplier('ספק אומנות ואומנות'); 
   זֶה.מוצרים = לְהַמתִיןזֶה.service.getProductsFromSupplier (ספק[0].supplierId);

10. הסר את התוכן ב- src/app/app.component.html קובץ, והחליפו אותו בקובץ הבא:

    <h2> מוצרים עם המלאי הנמוך ביותר מ "ספק אומנויות ואומנות"</h2>
    <div *ngFor="לתת פריט של מוצרים">
    <ע> שם: {{item.name}} </p>
    <ע> מספר במלאי: {{item.inStock}} </p>
    <ע> מחיר: ${{item.price}} </p>
    </div>

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

    לשרת

12. פתח את האתר שלך באמצעות כל דפדפן אינטרנט. כברירת מחדל, Angular מארח את האפליקציה ב מארח מקומי: 4200.
13. הנתונים שלך לא יוצגו על המסך בצורה נכונה. לחץ לחיצה ימנית על דף האינטרנט ולחץ על לִבדוֹק כדי לפתוח את כלי המפתחים של הדפדפן שלך.
14. נווט אל לְנַחֵם לשונית. תוצג שגיאה כדי ליידע אותך שהשאילתה תדרוש אינדקס.

כיצד ליצור אינדקס מורכב עבור השאילתה שלך

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

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

שאילתה על מסד הנתונים של Firebase שלך

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

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

אתה יכול גם ללמוד על דרכים אחרות להגדיר מסד נתונים NoSQL, כגון כיצד להגדיר מסד נתונים באמצעות MongoDB.