Πώς να αποθηκεύσετε, να ενημερώσετε, να διαγράψετε και να ανακτήσετε δεδομένα από μια βάση δεδομένων Firebase χρησιμοποιώντας το Angular

Το Firebase είναι μια πλατφόρμα που σας παρέχει μια πληθώρα υπηρεσιών για να σας βοηθήσει με τη δημιουργία και την κλιμάκωση μιας εφαρμογής. Ορισμένες από αυτές τις δυνατότητες περιλαμβάνουν υπηρεσίες φιλοξενίας, αποθήκευση δεδομένων και δυνατότητα παρακολούθησης αναλυτικών στοιχείων δεδομένων.

Αυτό το σεμινάριο εστιάζει κυρίως στον τρόπο δημιουργίας και προσθήκης δεδομένων σε μια βάση δεδομένων Firebase και στον τρόπο εκτέλεσης λειτουργιών δημιουργίας, ανάγνωσης, εγγραφής και διαγραφής στη βάση δεδομένων από μια τοπική εφαρμογή Angular.

Πώς να δημιουργήσετε και να προσθέσετε δεδομένα σε μια βάση δεδομένων Firebase

Αν υποθέσουμε ότι έχετε ήδη εγκαταστήσει και εκτελείται τοπικά μια εφαρμογή Angular, θα πρέπει να είναι συνδεδεμένη σε μια βάση δεδομένων Firebase προκειμένου να αποθηκεύει και να έχει πρόσβαση σε δεδομένα. Εάν δεν είστε εξοικειωμένοι με το Angular, μπορείτε να διαβάσετε περισσότερα Γωνιακές έννοιες, στοιχεία και η συνολική δομή ενός Angular έργου.

Εάν δεν διαθέτετε ήδη βάση δεδομένων Firebase, μπορείτε να χρησιμοποιήσετε τα διαπιστευτήρια του λογαριασμού σας Google για να συνδεθείτε στο Firebase και να ακολουθήσετε τις οδηγίες. Μόλις ρυθμιστεί, δημιουργήστε ένα έργο:

1. Από Αρχική σελίδα του Firebase, επιλέξτε Μεταβείτε στην Κονσόλα στην επάνω δεξιά γωνία του ιστότοπου.
2. Στην ενότητα "Τα έργα σας στο Firebase", επιλέξτε Προσθήκη έργου.
3. Ακολουθήστε τις οδηγίες για να δημιουργήσετε ένα νέο έργο.
4. Μόλις ολοκληρωθεί, το έργο θα ανοίξει. Στην αριστερή πλευρά της οθόνης, υπάρχει ένας πίνακας που παραθέτει τις δυνατότητες που παρέχει το Firebase. Τοποθετήστε το δείκτη του ποντικιού πάνω από τα εικονίδια μέχρι να δείτε Βάση δεδομένων Firestoreκαι επιλέξτε το.
5. Επιλέγω Δημιουργία βάσης δεδομένων, και ακολουθήστε τις οδηγίες για να δημιουργήσετε μια βάση δεδομένων.
6. Όταν επιλέγετε τους κανόνες ασφαλείας, επιλέξτε Εκκίνηση σε δοκιμαστική λειτουργία. Αυτό μπορεί να αλλάξει αργότερα για να διασφαλιστεί ότι τα δεδομένα είναι πιο ασφαλή. Μπορείτε να διαβάσετε περισσότερα σχετικά με τους κανόνες ασφαλείας του Firestore ακολουθώντας τα Τεκμηρίωση Firebase.
7. Μόλις ολοκληρωθεί, θα ανοίξει η βάση δεδομένων. Η δομή της βάσης δεδομένων χρησιμοποιεί Συλλογές, η οποία είναι ουσιαστικά η ίδια έννοια με τους πίνακες βάσεων δεδομένων. Για παράδειγμα, εάν χρειάζεστε δύο πίνακες, έναν για την αποθήκευση πληροφοριών λογαριασμού και έναν για την αποθήκευση των πληροφοριών χρήστη, θα δημιουργήσατε δύο συλλογές με το όνομα Λογαριασμός και Χρήστης.
8. Επιλέγω Έναρξη συλλογής και προσθέστε ένα αναγνωριστικό συλλογής που ονομάζεται "Χρήστης".
9. Προσθέστε την πρώτη εγγραφή, με πληροφορίες για έναν χρήστη. Κάντε κλικ στο Προσθήκη πεδίου για να προσθέσετε τρία νέα πεδία: firstName (string), lastName (string) και vipMember (boolean). Το αναγνωριστικό εγγράφου μπορεί να δημιουργηθεί αυτόματα.
10. Κάντε κλικ Αποθηκεύσετε.
11. Για να προσθέσετε περισσότερες εγγραφές στη συλλογή "Χρήστης", κάντε κλικ στο Προσθήκη εγγράφου (η προσθήκη εγγράφου ισοδυναμεί με την προσθήκη νέας εγγραφής ή χρήστη). Προσθέστε τέσσερις ακόμη χρήστες με τα ίδια τρία πεδία.

Η βάση δεδομένων έχει πλέον ρυθμιστεί με ορισμένα δεδομένα δοκιμής.

Πώς να ενσωματώσετε το Firebase στη Angular Application σας

Για να αποκτήσετε πρόσβαση σε αυτά τα δεδομένα στην τοπική σας εφαρμογή Angular, πρώτα διαμορφώστε ορισμένες ρυθμίσεις εφαρμογής για σύνδεση στη βάση δεδομένων Firebase:

1. Στο Firebase, μεταβείτε στον αριστερό πίνακα και κάντε κλικ στο Επισκόπηση έργου.
2. Επίλεξε το Ιστός κουμπί (υποδεικνύεται από γωνιακές αγκύλες).
3. Καταχωρίστε την τοπική σας εφαρμογή προσθέτοντας το όνομα της εφαρμογής.
4. Εγκαταστήστε το Firebase στην τοπική σας εφαρμογή Angular.

   npm i firebase
   

5. Το Firebase θα εμφανίσει στη συνέχεια ορισμένες λεπτομέρειες διαμόρφωσης. Αποθηκεύστε αυτές τις λεπτομέρειες και κάντε κλικ Συνεχίστε στην Κονσόλα.
6. Με βάση τις λεπτομέρειες που παρέχονται στο προηγούμενο βήμα, αντιγράψτε τον ακόλουθο κώδικα στο περιβάλλον.prod.ts και στο περιβάλλον.ts στην εφαρμογή Angular.

   περιβάλλον εξαγωγής const = {
    παραγωγή: αλήθεια,
    firebaseConfig: {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    projectId: "your-project-id",
    storageBucket: "your-storage-buckey",
    messagingSenderId: "your-messaging-sender-id",
    appId: "your-api-id",
    MetrimentId: "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 χρησιμοποιώντας μια υπηρεσία

Συνήθως είναι καλή πρακτική να έχετε ένα ή περισσότερα υπηρεσίες.τσ αρχεία που χρησιμοποιείτε για την ειδική αλληλεπίδραση με τη βάση δεδομένων. Οι συναρτήσεις που προσθέτετε στο αρχείο υπηρεσιών μπορούν στη συνέχεια να καλούνται σε άλλα αρχεία TypeScript, σελίδες ή άλλα στοιχεία σε όλη την εφαρμογή.

1. Δημιουργήστε ένα αρχείο που ονομάζεται service.ts στο src/app/services ντοσιέ.
2. Προσθέστε τη λειτουργική μονάδα AngularFirestore στην ενότητα εισαγωγών και συμπεριλάβετέ την στον κατασκευαστή.

   εισαγωγή { Injectable } από το '@angular/core';
   εισαγωγή { AngularFirestore } από το '@angular/fire/firestore';
   @Ενέσιμα({
    παρέχεταιΣε: «ρίζα»
   })
   Εξαγωγή κλάσης Υπηρεσία {
    κατασκευαστής (ιδιωτικό db: AngularFirestore) { }
   }
   

3. Προσθέστε μια συνάρτηση που επιστρέφει μια υπόσχεση που περιέχει μια λίστα με όλους τους χρήστες. "this.db.collection('Χρήστης')" αναφέρεται στη συλλογή "Χρήστης" στη βάση δεδομένων.

   getAllUsers() {
    επιστροφή νέας υπόσχεσης((επίλυση)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (χρήστες => επίλυση (χρήστες));
    })
   }
   

4. Για να χρησιμοποιήσετε αυτήν τη συνάρτηση σε ένα άλλο αρχείο TypeScript, εισαγάγετε τη νέα υπηρεσία και προσθέστε την στον κατασκευαστή.

   εισαγωγή { Service } από το 'src/app/services/service
   κατασκευαστής (ιδιωτική υπηρεσία: Υπηρεσία) {}
   

5. Λάβετε τη λίστα όλων των χρηστών που χρησιμοποιούν τη συνάρτηση που δημιουργήθηκε στο αρχείο υπηρεσιών.

   async getUsers() {
    this.allUsers = περιμένω this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Πώς να προσθέσετε μια νέα εγγραφή στη βάση δεδομένων Firebase

Προσθέστε μια νέα εγγραφή για έναν χρήστη στη βάση δεδομένων Firebase.

1. Στο services.ts, προσθέστε μια νέα συνάρτηση για να δημιουργήσετε μια νέα εγγραφή. Αυτή η λειτουργία λαμβάνει το αναγνωριστικό ενός νέου χρήστη και όλα τα στοιχεία του. Χρησιμοποιεί τη λειτουργία set του 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", "Jane", "Doe", 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", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

Πώς να διαγράψετε μια εγγραφή από τη βάση δεδομένων Firebase

Για να διαγράψετε μια εγγραφή, χρησιμοποιήστε τη λειτουργία διαγραφής του Firestore.

1. Στο αρχείο service.ts, δημιουργήστε μια συνάρτηση που ονομάζεται deleteUser(). Αυτή η λειτουργία λαμβάνει το αναγνωριστικό της εγγραφής που πρέπει να διαγραφεί.

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

2. Η παραπάνω συνάρτηση μπορεί στη συνέχεια να χρησιμοποιηθεί σε άλλα αρχεία TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Ανάκτηση δεδομένων Firebase χρησιμοποιώντας ερωτήματα και φίλτρα

Το φίλτρο "where" μπορεί να φιλτράρει τα αποτελέσματα που επιστρέφονται με βάση μια συγκεκριμένη συνθήκη.

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.

   ασυγχρονισμός getAllVipMembers() {
    this.vipUsers = περιμένω this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. Το ερώτημα μπορεί να τροποποιηθεί για να προσθέσει άλλες λειτουργίες όπως Order By, Start At ή Limit. Τροποποιήστε τη συνάρτηση getAllVipMembers() στο services.ts για να παραγγείλετε το επώνυμο. Η λειτουργία Order By ενδέχεται να απαιτεί τη δημιουργία ενός ευρετηρίου στο Firebase. Εάν συμβαίνει αυτό, κάντε κλικ στον σύνδεσμο που παρέχεται στο μήνυμα σφάλματος στην κονσόλα.

   getAllVipMembers() {
    επιστροφή νέας υπόσχεσης((επίλυση)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (χρήστες => επίλυση (χρήστες) )
    })
    }

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 γωνιακά μαθήματα για αρχάριους και προχωρημένους χρήστες

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα