Cum să stocați, să actualizați, să ștergeți și să preluați date dintr-o bază de date Firebase folosind Angular

Firebase este o platformă care vă oferă o multitudine de servicii pentru a ajuta la construirea și scalarea unei aplicații. Unele dintre aceste caracteristici includ servicii de găzduire, stocare de date și capacitatea de a urmări analiza datelor.

Acest tutorial se concentrează în principal pe cum să creați și să adăugați date la o bază de date Firebase și cum să efectuați operațiuni de creare, citire, scriere și ștergere în baza de date dintr-o aplicație locală Angular.

Cum să creați și să adăugați date la o bază de date Firebase

Presupunând că aveți deja o aplicație Angular configurată și care rulează local, va trebui să fie conectată la o bază de date Firebase pentru a stoca și a accesa date. Dacă nu sunteți familiarizat cu Angular, puteți citi mai multe despre Concepte unghiulare, componente și structura generală a unui proiect unghiular.

Dacă nu aveți deja o bază de date Firebase, puteți utiliza datele de conectare ale contului Google pentru a vă conecta la Firebase și pentru a urma instrucțiunile. Odată configurat, creați un proiect:

1. Din Pagina de pornire a Firebase, Selectați Accesați Consolă în colțul din dreapta sus al site-ului.
2. Sub „Proiectele tale Firebase”, selectează Adăugați proiect.
3. Urmați instrucțiunile pentru a crea un nou proiect.
4. Odată finalizat, proiectul se va deschide. În partea stângă a ecranului, există un panou care listează funcțiile oferite de Firebase. Treceți cu mouse-ul peste pictograme până când vedeți Baza de date Firestore, și selectați-l.
5. Selectați Creați baza de date, și urmați instrucțiunile pentru a crea o bază de date.
6. Când selectați regulile de securitate, selectați Începeți în modul de testare. Acest lucru poate fi modificat ulterior pentru a se asigura că datele sunt mai sigure. Puteți citi mai multe despre regulile de securitate Firestore urmând Documentația Firebase.
7. Odată finalizată, baza de date se va deschide. Structura bazei de date folosește Colecții, care este în esență același concept ca și tabelele bazei de date. De exemplu, dacă aveți nevoie de două tabele, unul pentru a stoca informațiile despre cont și unul pentru a stoca informațiile despre utilizator, ați crea două colecții denumite Cont și Utilizator.
8. Selectați Începeți colectarea și adăugați un ID de colecție numit „Utilizator”.
9. Adăugați prima înregistrare, cu informații despre un utilizator. Click pe Adăugați câmp pentru a adăuga trei câmpuri noi: firstName (șir), lastName (șir) și vipMember (boolean). ID-ul documentului poate fi generat automat.
10. Clic salva.
11. Pentru a adăuga mai multe înregistrări la colecția „Utilizator”, faceți clic pe Adăugați document (adăugare document este echivalentul cu adăugarea unei noi înregistrări sau utilizator). Adăugați încă patru utilizatori cu aceleași trei câmpuri.

Baza de date este acum configurată cu câteva date de testare.

Cum să integrați Firebase în aplicația dvs. angulară

Pentru a accesa aceste date în aplicația locală Angular, mai întâi configurați câteva setări ale aplicației pentru a vă conecta la baza de date Firebase:

1. În Firebase, accesați panoul din stânga și faceți clic pe rezumatul proiectului.
2. Selectează Web butonul (indicat prin paranteze unghiulare).
3. Înregistrați-vă aplicația locală adăugând numele aplicației.
4. Instalați Firebase în aplicația locală Angular.

   npm i firebase
   

5. Firebase va afișa apoi câteva detalii de configurare. Salvați aceste detalii și faceți clic Continuați la Consolă.
6. Pe baza detaliilor furnizate în pasul anterior, copiați următorul cod în environment.prod.ts și environment.ts în aplicația Angular.

   export const mediu = {
    producție: adevărat,
    firebaseConfig: {
    apiKey: „cheia-ta-api”,
    authDomain: „domeniul-vou-auth”,
    projectId: „id-proiectul-dvs”,
    storageBucket: „buckey-de-stocare”,
    messagingSenderId: „codul-expeditorului-de-mesajare”,
    appId: „id-ul-api”,
    measurementId: „codul-măsurării-dvs.”
    }
   };
   

7. AngularFirestore de la @unghiular/foc/foc va fi folosit pentru a configura Firebase în Angular. Rețineți că AngularFirestore nu este compatibil cu Angular Versiunea 9 și mai sus. În aplicația locală Angular, rulați:

   npm i @unghiular/foc
   

8. Adăugați modulele Firestore și mediu la secțiunea de importuri din app.module.ts.

   import { AngularFireModule } din „@angular/fire”;
   import { AngularFirestoreModule } din „@angular/fire/firestore”;
   import { mediu } din „../environments/environment”;
   

9. De asemenea, modulele Firestore trebuie să fie incluse în matricea de importuri din app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Cum să preluați date din Firebase utilizând un serviciu

De obicei, este o practică bună să aveți unul sau mai multe servicii.ts fișierele pe care le utilizați pentru a interacționa în mod specific cu baza de date. Funcțiile pe care le adăugați în fișierul de servicii pot fi apoi apelate în alte fișiere TypeScript, pagini sau alte componente din cadrul aplicației.

1. Creați un fișier numit service.ts în fișierul src/app/services pliant.
2. Adăugați modulul AngularFirestore la secțiunea de importuri și includeți-l în constructor.

   import { Injectable } din „@angular/core”;
   import { AngularFirestore } din „@angular/fire/firestore”;
   @Injectabil({
    furnizat în: „rădăcină”
   })
   Export class Service {
    constructor (db privat: AngularFirestore) { }
   }
   

3. Adăugați o funcție care returnează o promisiune care conține o listă a tuturor utilizatorilor. "this.db.collection('Utilizator')" se referă la colecția "Utilizator" din baza de date.

   getAllUsers() {
    returnează noua Promisiune((rezolvare) => {
    this.db.collection('Utilizator').valueChanges({ idField: 'id' }).subscribe (utilizatori => rezolvare (utilizatori));
    })
   }
   

4. Pentru a utiliza această funcție într-un alt fișier TypeScript, importați noul serviciu și adăugați-l la constructor.

   importați { Service } din 'src/app/services/service
   constructor (serviciu privat: Service) {}
   

5. Obțineți lista tuturor utilizatorilor folosind funcția creată în fișierul de servicii.

   async getUsers() {
    this.allUsers = așteaptă this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Cum să adăugați o înregistrare nouă la baza de date Firebase

Adăugați o înregistrare nouă pentru un utilizator în baza de date Firebase.

1. În services.ts, adăugați o nouă funcție pentru a crea o nouă înregistrare. Această funcție preia un ID de utilizator nou și toate detaliile acestuia. Utilizează funcția de setare a Firestore pentru a trimite acele informații către Firebase și pentru a crea o înregistrare nouă.

   addNewUser (_newId: orice, _fName: șir, _lName: șir, _vip: boolean) {
    this.db.collection("Utilizator").doc (_newId).set({firstName: _fName, lastName: _lName, vipMember: _vip});
   }

2. Apelați funcția addNewUser() într-un alt fișier TypeScript. Nu uitați să importați serviciul și să îl includeți în constructor, așa cum sa arătat mai devreme. Simțiți-vă liber să utilizați un generator de ID aleatoriu pentru a crea noul ID pentru utilizator.

   this.service.addNewUser("62289836", "Jane", "Doe", true);
   

Cum se actualizează datele din baza de date Firebase

Firebase are o mulțime de funcții care fă-l unul dintre cele mai bune instrumente disponibile. Pentru a actualiza anumite câmpuri dintr-o anumită înregistrare, utilizați funcția de actualizare a Firestore.

1. În fișierul service.ts, creați o funcție numită updateUserFirstName(). Această funcție va actualiza prenumele unei înregistrări ale utilizatorului. Funcția include ID-ul înregistrării care trebuie actualizată și noua valoare pentru prenumele utilizatorului.

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

2. Pentru a actualiza mai multe câmpuri pentru aceeași înregistrare, extindeți doar câmpurile introduse în funcția de actualizare a Firestore. În loc de doar firstName, adăugați lastName pentru a-l actualiza și cu o nouă valoare.

   updateUserFullName (_id: orice, _firstName: șir, _lastName: șir) {
    this.db.doc(`Utilizator/${_id}`).update({prenume: _prenume, prenume: _prenume});
   }

3. Oricare dintre funcțiile de mai sus poate fi utilizată în alte fișiere TypeScript.

   this.service.updateUserFirstName ("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName ("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

Cum să ștergeți o înregistrare din baza de date Firebase

Pentru a șterge o înregistrare, utilizați funcția de ștergere a Firestore.

1. În fișierul service.ts, creați o funcție numită deleteUser(). Această funcție preia ID-ul înregistrării care trebuie șters.

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

2. Funcția de mai sus poate fi utilizată apoi în alte fișiere TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Preluați datele Firebase folosind interogări și filtre

Filtrul „unde” poate filtra rezultatele care sunt returnate în funcție de o anumită condiție.

1. În services.ts, creați o funcție care primește toți utilizatorii VIP (asta dacă câmpul vipMember este setat la adevărat). Acest lucru este indicat de partea „ref.where('vipMember', '==', true)” a apelului Firebase de mai jos.

   getAllVipMembers() {
    returnează noua Promisiune((rezolvare) => {
    this.db.collection('Utilizator', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (utilizatori => rezolvare (utilizatori))
    })
    }

2. Utilizați această funcție într-un alt fișier TypseScript.

   asincron getAllVipMembers() {
    this.vipUsers = așteaptă this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. Interogarea poate fi modificată pentru a adăuga alte operațiuni, cum ar fi Comandă după, Începe la sau Limitează. Modificați funcția getAllVipMembers() în services.ts pentru a ordona după nume de familie. Operația Order By poate necesita crearea unui index în Firebase. Dacă acesta este cazul, faceți clic pe linkul furnizat în mesajul de eroare din consolă.

   getAllVipMembers() {
    returnează noua Promisiune((rezolvare) => {
    this.db.collection('Utilizator', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (utilizatori => rezolvare (utilizatori) )
    })
    }

4. Modificați interogarea pentru a returna numai primele trei înregistrări. Operațiunile Start At și Limit pot fi utilizate pentru aceasta. Acest lucru este util dacă trebuie să implementați paginarea, adică atunci când un anumit număr de înregistrări sunt afișate pe pagină.

   getAllVipMembers() {
    returnează noua Promisiune((rezolvare) => {
    this.db.collection('Utilizator', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (utilizatori => rezolvă (utilizatori))
    })
    }

Adăugați mai multe date la Firebase și mai multe solicitări în aplicația Angular

Există multe alte combinații de interogări pe care le puteți explora atunci când încercați să preluați date dintr-o bază de date Firebase. Sperăm că acum înțelegeți cum să configurați o bază de date Firebase simplă, cum să o conectați la o aplicație Angular locală și cum să citiți și să scrieți în baza de date.

De asemenea, puteți afla mai multe despre celelalte servicii pe care le oferă Firebase. Firebase este una dintre numeroasele platforme pe care le puteți integra cu Angular și, indiferent dacă sunteți la un nivel începător sau avansat, există întotdeauna multe de învățat.

Top 8 cursuri Angular pentru începători și utilizatori avansați

Citiți în continuare

Despre autor