Επιλύστε το σφάλμα "το ερώτημα απαιτεί ευρετήριο" και κάντε τα ερωτήματά σας στο Firebase να λειτουργούν σε αρμονία με την εφαρμογή Angular.
Ένα από τα χαρακτηριστικά του Firebase είναι ότι μπορείτε να δημιουργήσετε μια βάση δεδομένων NoSQL αποθηκευμένη στο cloud. Μπορείτε επίσης να ενσωματώσετε αυτήν τη βάση δεδομένων σε εφαρμογές που αναπτύσσετε και μπορείτε να αποθηκεύσετε, να ενημερώσετε και να διαγράψετε δεδομένα μέσα στη βάση δεδομένων.
Μπορείτε επίσης να ρωτήσετε τη βάση δεδομένων Firebase από την εφαρμογή Angular. Το Firebase απαιτεί να καταχωρίσετε συνδυασμούς πεδίων για ένα ερώτημα που χρησιμοποιεί πολλά πεδία. Αυτό επιτρέπει στο Firebase να τα αναζητά εύκολα όταν καλείτε το ερώτημα σε άλλη χρονική στιγμή.
Ρυθμίστε τη βάση δεδομένων Angular App και Firebase
Πριν γράψετε τα ερωτήματά σας στο Firebase, θα χρειαστεί να δημιουργήσετε μια γωνιακή εφαρμογή και μια βάση δεδομένων Firebase. Θα χρειαστεί επίσης να διαμορφώσετε την εφαρμογή Angular για να συνδεθείτε στη βάση δεδομένων σας.
- Εάν δεν έχετε μια υπάρχουσα εφαρμογή Angular, μπορείτε να χρησιμοποιήσετε το καινούργιο εντολή για τη δημιουργία ενός νέου έργου με όλα τα απαραίτητα αρχεία Angular.
ng νέοςνέος-γωνιακή-εφαρμογή - Δημιουργώ ένα νέα βάση δεδομένων Firebase για την εφαρμογή Angular συνδέοντας στο Firebase και ακολουθώντας τις προτροπές για να δημιουργήσετε ένα νέο έργο Firebase.
- Στη νέα σας βάση δεδομένων Cloud Firestore, δημιουργήστε δύο συλλογές (γνωστές και ως πίνακες) για ένα "Προϊόν" και έναν "Προμηθευτή". Ένας προμηθευτής μπορεί να παρέχει πολλά προϊόντα. Κάθε προϊόν συνδέεται επίσης με τον προμηθευτή χρησιμοποιώντας το πεδίο "supplierId".
- Εισαγάγετε τα ακόλουθα δεδομένα στον πίνακα "Προϊόν". Εισαγάγετε τα πεδία name, productId και providerId ως συμβολοσειρές. Εισαγάγετε τα πεδία τιμή και in Stock ως αριθμούς.Ακολουθεί ένα παράδειγμα που δείχνει πώς πρέπει να φαίνεται:
Ταυτότητα εγγράφου Πεδία προϊόν 1 - όνομα: "Κορδέλες"
- τιμή: 12,99
- σε απόθεμα: 10
- productId: "P1"
- Αναγνωριστικό προμηθευτή: "S1"
προϊόν 2 - όνομα: "Μπαλόνια"
- τιμή: 1,5
- σε απόθεμα: 2
- productId: "P2"
- Αναγνωριστικό προμηθευτή: "S1"
προϊόν 3 - όνομα: "Χαρτί"
- τιμή: 2,99
- σε απόθεμα: 20
- productId: "P3"
- Αναγνωριστικό προμηθευτή: "S1"
προϊόν 4 - όνομα: "Πίνακας"
- τιμή: 199
- σε απόθεμα: 1
- productId: "P4"
- Αναγνωριστικό προμηθευτή: "S2"
- Εισαγάγετε τα ακόλουθα δεδομένα στον πίνακα "Προμηθευτής". Εισαγάγετε όλα τα πεδία ως συμβολοσειρές.Δείτε πώς πρέπει να μοιάζει η καταχώριση προμηθευτή1:
Ταυτότητα εγγράφου Πεδία προμηθευτής 1 - όνομα: "Προμηθευτής τεχνών και χειροτεχνίας"
- τοποθεσία: "Καλιφόρνια, ΗΠΑ"
- Αναγνωριστικό προμηθευτή: "S1"
προμηθευτής 2 - όνομα: "Καταπληκτικά τραπέζια"
- τοποθεσία: "Σίδνεϊ, Αυστραλία"
- Αναγνωριστικό προμηθευτή: "S2"
- Εγκαθιστώ γωνιακός/πυρ στην εφαρμογή σας.
npm i @γωνιώδης/fire - Στο Firebase, ανοίξτε το Ρυθμίσεις έργου. Κάντε κλικ στο λογότυπο των γωνιακών αγκύλων για να προσθέσετε το Firebase στην εφαρμογή Angular.
- Το Firebase θα σας παρέχει λεπτομέρειες διαμόρφωσης που μπορείτε να χρησιμοποιήσετε για να συνδέσετε την εφαρμογή Angular στη βάση δεδομένων Firebase.
- Αντικαταστήστε τα περιεχόμενα στο περιβάλλοντα/περιβάλλον.τσ με τον παρακάτω κωδικό. Θα χρειαστεί να αλλάξετε τις τιμές εντός firebaseConfig. Αλλάξτε τα για να ταιριάζουν με τη διαμόρφωση που σας παρείχε το Firebase στο προηγούμενο βήμα.
εξαγωγήσυνθ περιβάλλον = {
παραγωγή: ψευδής,
firebaseConfig: {
apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
authDomain: "muo-firebase-queries.firebaseapp.com",
projectId: "muo-firebase-queries",
storageBucket: "muo-firebase-queries.appspot.com",
messagingSenderId: "569911365044",
Αναγνωριστικό εφαρμογής: "1:569911365044:ιστός:9557bfef800caa5cdaf6e1"
}
}; - Εισαγάγετε το περιβάλλον από πάνω, μαζί με τις μονάδες Angular Firebase src/app/app.module.ts.
εισαγωγή { περιβάλλον } από "../περιβάλλοντα/περιβάλλον";
εισαγωγή { AngularFireModule } από '@angular/fire/compat';
εισαγωγή { AngularFirestoreModule } από "@angular/fire/compat/firestore"; - Προσθέστε τις μονάδες Firebase στον πίνακα εισαγωγής:
AngularFirestoreModule,
AngularFireModule.initializeApp(περιβάλλον.firebaseConfig)
Πώς να γράψετε ένα σύνθετο ερώτημα Firebase σε ένα αρχείο υπηρεσιών
Μπορείτε να υποβάλετε ερωτήματα σε πίνακες στη βάση δεδομένων Firebase χρησιμοποιώντας ένα αρχείο υπηρεσιών.
- Δημιουργήστε έναν νέο φάκελο που ονομάζεται "υπηρεσίες". Μέσα στο φάκελο, δημιουργήστε ένα νέο αρχείο που ονομάζεται "service.ts".
- Προσθέστε την εισαγωγή, τον κατασκευαστή και την κλάση AngularFirestore στο αρχείο.
εισαγωγή { Ενέσιμο } από '@angular/core';
εισαγωγή { AngularFirestore } από '@angular/fire/compat/firestore';
@Ενέσιμα({
παρέχεταιΣε: 'ρίζα'
})
εξαγωγήτάξηΥπηρεσία{
κατασκευαστής(ιδιωτικό db: AngularFirestore) { }
} - Σε αυτό το παράδειγμα ερωτήματος, παραθέστε τα προϊόντα με βάση το όνομα ενός προμηθευτή. Επιπλέον, φιλτράρετε τη λίστα για να εμφανίζεται μόνο το στοιχείο με το χαμηλότερο απόθεμα. Επειδή το Firebase δεν είναι μια ορθολογική βάση δεδομένων, θα χρειαστεί να υποβάλουμε ερωτήματα στους δύο ξεχωριστούς πίνακες χρησιμοποιώντας περισσότερα από ένα ερωτήματα.
- Για να το κάνετε αυτό, δημιουργήστε μια νέα συνάρτηση που ονομάζεται getSupplier(), για να χειριστείτε το πρώτο ερώτημα. Η συνάρτηση θα επιστρέψει τη σειρά στον πίνακα "Προμηθευτής" που ταιριάζει με το όνομα.
getSupplier (όνομα: συμβολοσειρά) {
ΕΠΙΣΤΡΟΦΗνέοςΥπόσχεση((επίλυση)=> {
this.db.collection('Προμηθευτής', αναφ. => ref.where('όνομα', '==', όνομα)).valueChanges().subscribe (supplier => επίλυση (προμηθευτής))
})
} - Δημιουργήστε μια άλλη συνάρτηση που ονομάζεται getProductsFromSupplier(). Αυτό το ερώτημα υποβάλλει ερωτήματα στη βάση δεδομένων για Προϊόντα που σχετίζονται με έναν συγκεκριμένο προμηθευτή. Επιπλέον, το ερώτημα παραγγέλνει επίσης αποτελέσματα από το πεδίο "inStock" και εμφανίζει μόνο την πρώτη εγγραφή στη λίστα. Με άλλα λόγια, θα επιστρέψει το προϊόν για έναν συγκεκριμένο προμηθευτή, με το χαμηλότερο πλήθος "inStock".
getProductsFromSupplier (supplierId: string) {
ΕΠΙΣΤΡΟΦΗνέοςΥπόσχεση((επίλυση)=> {
this.db.collection('Προϊόν', αναφ. => ref.where('Αναγνωριστικό προμηθευτή', '==', providerId).orderBy('σε απόθεμα').startAt (0).όριο (1)).valueChanges().subscribe (προϊόν => επίλυση (προϊόν))
})
} - Στο src/app/app.component.ts αρχείο, εισάγετε την υπηρεσία.
εισαγωγή { Υπηρεσία } από 'src/app/services/service'; - Προσθέστε έναν κατασκευαστή μέσα στην κλάση AppComponent και προσθέστε την υπηρεσία στον κατασκευαστή.
κατασκευαστής(ιδιωτική υπηρεσία: Υπηρεσία) { } - Δημιουργήστε μια νέα συνάρτηση που ονομάζεται getProductStock(). Αυτή η λειτουργία θα εκτυπώσει το προϊόν με το χαμηλότερο απόθεμα που παρέχει ένας συγκεκριμένος προμηθευτής. Φροντίστε να καλέσετε τη νέα λειτουργία στο ngOnInit() συνάρτηση και δηλώστε μια μεταβλητή για να αποθηκεύσετε το αποτέλεσμα.
προϊόντα: οποιαδήποτε;
ngOnInit(): κενός {
Αυτό.getProductStock();
}
ασυγχρονισμός getProductStock() {} - μεσα στην getProductStock() λειτουργία, χρησιμοποιήστε τα δύο ερωτήματα από το αρχείο υπηρεσιών. Χρησιμοποιήστε το πρώτο ερώτημα για να λάβετε το αρχείο ενός προμηθευτή με βάση το όνομα. Στη συνέχεια, χρησιμοποιήστε το providerId ως όρισμα για το δεύτερο ερώτημα, το οποίο θα βρει το προϊόν από αυτόν τον προμηθευτή, με το χαμηλότερο απόθεμα.
αφήνω προμηθευτής = αναμένωΑυτό.service.getSupplier('Προμηθευτής τεχνών και χειροτεχνίας');
Αυτό.προϊόντα = αναμένωΑυτό.service.getProductsFromSupplier (προμηθευτής[0].supplierId); - Αφαιρέστε τα περιεχόμενα στο src/app/app.component.html αρχείο και αντικαταστήστε το με το ακόλουθο:
<h2> Προϊόντα με το χαμηλότερο απόθεμα από "Προμηθευτής Τεχνών και Χειροτεχνίας"</h2>
<div *ngFor="ας στοιχείο των προϊόντων">
<Π> Όνομα: {{item.name}} </Π>
<Π> Αριθμός σε απόθεμα: {{item.inStock}} </Π>
<Π> Τιμή: ${{item.price}} </Π>
</div> - Εκτελέστε την εφαρμογή σε ένα πρόγραμμα περιήγησης ιστού χρησιμοποιώντας το ng σερβίρετε εντολή.
ng σερβίρετε - Ανοίξτε τον ιστότοπό σας χρησιμοποιώντας οποιοδήποτε πρόγραμμα περιήγησης. Από προεπιλογή, το Angular φιλοξενεί την εφαρμογή στο localhost: 4200.
- Τα δεδομένα σας δεν θα εμφανίζονται σωστά στην οθόνη. Κάντε δεξί κλικ στην ιστοσελίδα και κάντε κλικ στο Επιθεωρώ για να ανοίξετε τα εργαλεία προγραμματιστή του προγράμματος περιήγησής σας.
- Πλοηγηθείτε στο Κονσόλα αυτί. Θα εμφανιστεί ένα σφάλμα για να σας ενημερώσει ότι το ερώτημα θα απαιτεί ευρετήριο.
Πώς να δημιουργήσετε ένα σύνθετο ευρετήριο για το ερώτημά σας
Το Firebase δημιουργεί ευρετήρια για ερωτήματα που μπορούν να περιέχουν πολλά πεδία. Σύμφωνα με την Τεκμηρίωση Firebase, λειτουργεί ως χάρτης, έτσι ώστε το Firebase να μπορεί να αναζητήσει τη θέση των πεδίων που περιέχονται στο ερώτημα.
- Στην κονσόλα, κάντε κλικ στον σύνδεσμο που εμφανίζεται το σφάλμα.
- Συνδεθείτε στον λογαριασμό σας στο Firebase.
- Θα εμφανιστεί ένα μήνυμα που σας ζητά να δημιουργήσετε ένα ευρετήριο για το ερώτημα Firebase. Κάντε κλικ στο Δημιουργία ευρετηρίου.
- Το Firebase θα ευρετηριάσει τα πεδία που χρησιμοποιεί το ερώτημά σας. Περιμένετε μερικά λεπτά μέχρι να αλλάξει η κατάσταση από "Κτίριο" σε "Ενεργοποιημένο".
- Ανανεώστε το πρόγραμμα περιήγησής σας. Το ερώτημα θα εκτελεστεί και θα επιστρέψει το σωστό αποτέλεσμα στην αρχική σελίδα. Εάν ανοίξετε το πρόγραμμα εντοπισμού σφαλμάτων της κονσόλας χρησιμοποιώντας τα εργαλεία προγραμματιστή του προγράμματος περιήγησής σας, το σφάλμα δεν θα πρέπει πλέον να υπάρχει.
Ερώτηση για τη βάση δεδομένων Firebase σας
Το Firebase σάς επιτρέπει να δημιουργήσετε μια βάση δεδομένων NoSQL στο cloud. Στη συνέχεια, μπορείτε να ενσωματώσετε αυτήν τη βάση δεδομένων σε εφαρμογές Angular που αναπτύσσετε. Μπορείτε να δημιουργήσετε διαφορετικούς τύπους ερωτημάτων για αποθήκευση, ενημέρωση ή διαγραφή δεδομένων. Μπορείτε επίσης να δημιουργήσετε ένα ερώτημα που χρησιμοποιεί πολλά πεδία ταυτόχρονα.
Όταν δημιουργείτε ένα ερώτημα που χρησιμοποιεί πολλά πεδία, η προσπάθεια εκτέλεσης του θα προκαλέσει σφάλμα. Θα χρειαστεί να καταχωρίσετε τον συνδυασμό πεδίων που χρησιμοποιείται στο ερώτημα, έτσι ώστε το Firebase να μπορεί να τον αναζητήσει εύκολα κάθε φορά που εκτελείτε το ερώτημα.
Μπορείτε επίσης να μάθετε για άλλους τρόπους ρύθμισης μιας βάσης δεδομένων NoSQL, όπως πώς να ρυθμίσετε μια βάση δεδομένων χρησιμοποιώντας το MongoDB.