Kako pohraniti, ažurirati, izbrisati i dohvatiti podatke iz Firebase baze podataka pomoću Angulara

Firebase je platforma koja vam pruža mnoštvo usluga za pomoć u izgradnji i skaliranju aplikacije. Neke od tih značajki uključuju usluge hostinga, pohranu podataka i mogućnost praćenja analize podataka.

Ovaj vodič se uglavnom fokusira na to kako stvoriti i dodati podatke Firebase bazi podataka te kako izvesti operacije kreiranja, čitanja, pisanja i brisanja u bazi podataka iz lokalne aplikacije Angular.

Kako stvoriti i dodati podatke Firebase bazi podataka

Pod pretpostavkom da već imate postavljenu i lokalno pokrenutu aplikaciju Angular, morat će biti povezana s Firebase bazom podataka kako bi pohranila i pristupila podacima. Ako niste upoznati s Angularom, možete pročitati više o tome Angular koncepti, komponente i cjelokupna struktura Angular projekta.

Ako još nemate Firebase bazu podataka, možete koristiti vjerodajnice svog Google računa za prijavu na Firebase i slijediti upute. Nakon što je ovo postavljeno, kreirajte projekt:

1. Iz Početna stranica Firebasea, Odaberi Idite na Konzolu u gornjem desnom kutu stranice.
instagram viewer
2. U odjeljku "Vaši Firebase projekti" odaberite Dodaj projekt.
3. Slijedite upute za stvaranje novog projekta.
4. Nakon završetka, projekt će se otvoriti. Na lijevoj strani zaslona nalazi se ploča koja navodi značajke koje Firebase pruža. Zadržite pokazivač iznad ikona dok ne vidite Firestore baza podataka, i odaberite ga.
5. Odaberi Napravite bazu podataka, i slijedite upute za stvaranje baze podataka.
6. Prilikom odabira sigurnosnih pravila, odaberite Pokrenite u testnom načinu rada. To se kasnije može promijeniti kako bi podaci bili sigurniji. Više o sigurnosnim pravilima Firestorea možete pročitati slijedeći Firebase dokumentacija.
7. Nakon dovršetka, otvorit će se baza podataka. Struktura baze podataka koristi zbirke, što je u biti isti koncept kao i tablice baze podataka. Na primjer, ako su vam bile potrebne dvije tablice, jedna za pohranjivanje podataka o računu, a jedna za pohranu podataka o korisniku, izradili biste dvije zbirke pod nazivom Račun i Korisnik.
8. Odaberi Započni prikupljanje i dodajte ID zbirke pod nazivom "Korisnik".
9. Dodajte prvi zapis s podacima o jednom korisniku. Kliknite na Dodaj polje za dodavanje tri nova polja: firstName (string), prezime (string) i vipMember (boolean). ID dokumenta može se automatski generirati.
10. Klik Uštedjeti.
11. Za dodavanje više zapisa u zbirku "Korisnik", kliknite na Dodaj dokument (dodavanje dokumenta je ekvivalent dodavanju novog zapisa ili korisnika). Dodajte još četiri korisnika s ista tri polja.

Baza podataka je sada postavljena s nekim testnim podacima.

Kako integrirati Firebase u vašu Angular aplikaciju

Da biste pristupili ovim podacima u lokalnoj aplikaciji Angular, prvo konfigurirajte neke postavke aplikacije za povezivanje s Firebase bazom podataka:

1. U Firebaseu idite na lijevu ploču i kliknite na Pregled projekta.
2. Odaberite mreža gumb (označen kutnim zagradama).
3. Registrirajte svoju lokalnu aplikaciju dodavanjem naziva aplikacije.
4. Instalirajte Firebase u svoju lokalnu Angular aplikaciju.

   npm i firebase
   

5. Firebase će tada prikazati neke pojedinosti o konfiguraciji. Spremite ove detalje i kliknite Nastavite do Konzole.
6. Na temelju pojedinosti navedenih u prethodnom koraku, kopirajte sljedeći kod u environment.prod.ts i environment.ts u aplikaciji Angular.

   izvoz konstantnog okruženja = {
    produkcija: istina,
    firebaseConfig: {
    apiKey: "vaš-api-ključ",
    authDomain: "vaša-auth-domena",
    ID projekta: "id vašeg projekta",
    storageBucket: "vaš-storage-buckey",
    messagingSenderId: "vaš-messaging-sender-id",
    appId: "vaš-api-id",
    Id mjerenja: "id vašeg mjerenja"
    }
   };
   

7. AngularFirestore od @angular/fire/firestore koristit će se za konfiguriranje Firebasea u Angularu. Imajte na umu da AngularFirestore nije kompatibilan s Angular verzijom 9 i novijim. U lokalnoj aplikaciji Angular pokrenite:

   npm i @angular/fire
   

8. Dodajte module Firestore i okruženje u odjeljak uvoza u app.module.ts.

   import { AngularFireModule } iz "@angular/fire";
   import { AngularFirestoreModule } iz "@angular/fire/firestore";
   import { okoliš } iz "../environments/environment";
   

9. Moduli Firestore također moraju biti uključeni u niz importova u app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Kako dohvatiti podatke iz Firebasea pomoću usluge

Obično je dobra praksa imati jednu ili više njih usluge.ts datoteke koje koristite za posebnu interakciju s bazom podataka. Funkcije koje dodate u datoteku usluga mogu se zatim pozvati u drugim TypeScript datotekama, stranicama ili drugim komponentama u cijeloj aplikaciji.

1. Napravite datoteku pod nazivom service.ts u src/app/services mapu.
2. Dodajte modul AngularFirestore u odjeljak uvoza i uključite ga u konstruktor.

   import { Injectable } iz '@angular/core';
   import { AngularFirestore } iz '@angular/fire/firestore';
   @Injekcioni ({
    osigurano u: 'root'
   })
   izvoz klase usluga {
    konstruktor (privatni db: AngularFirestore) { }
   }
   

3. Dodajte funkciju koja vraća obećanje koje sadrži popis svih korisnika. "this.db.collection('Korisnik')" odnosi se na kolekciju "Korisnik" u bazi podataka.

   getAllUsers() {
    vratiti novo obećanje((razriješi)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (korisnici => razriješiti (korisnici));
    })
   }
   

4. Za korištenje ove funkcije u drugoj datoteci TypeScript, uvezite novu uslugu i dodajte je u konstruktor.

   uvoz { Service } iz 'src/app/services/service
   konstruktor (privatna usluga: usluga) {}
   

5. Dobijte popis svih korisnika koristeći funkciju kreiranu u datoteci usluga.

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

Kako dodati novi zapis u Firebase bazu podataka

Dodajte novi zapis za korisnika u Firebase bazu podataka.

1. U services.ts dodajte novu funkciju za stvaranje novog zapisa. Ova funkcija preuzima ID novog korisnika i sve njegove pojedinosti. Koristi funkciju postavljanja Firestorea za slanje tih informacija Firebaseu i stvaranje novog zapisa.

   addNewUser (_newId: bilo koji, _fName: string, _lName: string, _vip: boolean) {
    this.db.collection("Korisnik").doc (_newId).set({ime: _fName, prezime: _lName, vipČlan: _vip});
   }

2. Pozovite funkciju addNewUser() u drugoj datoteci TypeScript. Nemojte zaboraviti uvesti uslugu i uključiti je u konstruktor, kao što je prikazano ranije. Slobodno upotrijebite generator slučajnih ID-ova za kreiranje novog ID-a za korisnika.

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

Kako ažurirati podatke u bazi podataka Firebase

Firebase ima puno funkcija koje čine ga jednim od najboljih dostupnih alata. Za ažuriranje određenih polja u određenom zapisu upotrijebite Firestoreovu funkciju ažuriranja.

1. U datoteci service.ts stvorite funkciju pod nazivom updateUserFirstName(). Ova funkcija će ažurirati ime odabranog korisničkog zapisa. Funkcija preuzima ID zapisa koji treba ažurirati i novu vrijednost za ime korisnika.

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

2. Da biste ažurirali više polja za isti zapis, samo proširite polja koja se unose unutar Firestoreove funkcije ažuriranja. Umjesto samo ime, dodajte prezime da biste i to ažurirali novom vrijednošću.

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

3. Bilo koja od gore navedenih funkcija može se koristiti u drugim TypeScript datotekama.

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

Kako izbrisati zapis iz Firebase baze podataka

Za brisanje zapisa koristite funkciju brisanja Firestorea.

1. U datoteci service.ts stvorite funkciju pod nazivom deleteUser(). Ova funkcija preuzima ID zapisa koji treba izbrisati.

   deleteUser (_id: bilo koji) {
    this.db.doc(`Korisnik/${_id}`).delete();
    }
   

2. Gornja funkcija se zatim može koristiti u drugim TypeScript datotekama.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Dohvatite Firebase podatke pomoću upita i filtara

Filtar "gdje" može filtrirati rezultate koji se vraćaju na temelju određenog uvjeta.

1. U services.ts stvorite funkciju koja dobiva sve VIP korisnike (ovo je ako je polje vipMember postavljeno na true). To je naznačeno "ref.where('vipMember', '==', true)" u nastavku Firebase poziva.

   getAllVipMembers() {
    vratiti novo obećanje((razriješi)=> {
    this.db.collection('Korisnik', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (korisnici => razriješi (korisnici))
    })
    }

2. Koristite ovu funkciju u drugoj TypseScript datoteci.

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

3. Upit se može izmijeniti kako bi se dodale druge operacije kao što su Narudžba po, Početak od ili Ograničenje. Izmijenite funkciju getAllVipMembers() u services.ts tako da se poreda po prezimenu. Operacija Order By može zahtijevati stvaranje indeksa u Firebaseu. Ako je to slučaj, kliknite na vezu u poruci o pogrešci na konzoli.

   getAllVipMembers() {
    vratiti novo obećanje((razriješi)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (korisnici => razriješi (korisnici) )
    })
    }

4. Izmijenite upit tako da vrati samo prva tri zapisa. Za to se mogu koristiti operacije Start At i Limit. Ovo je korisno ako trebate implementirati stranice, a to je kada se po stranici prikazuje određeni broj zapisa.

   getAllVipMembers() {
    vratiti novo obećanje((razriješi)=> {
    this.db.collection('Korisnik', ref => ref.where('vipMember', '==', true).orderBy('prezime').startAt (0).limit (3)).valueChanges() .subscribe (korisnici => razriješiti (korisnici))
    })
    }

Dodajte više podataka u Firebase i više zahtjeva u aplikaciji Angular

Postoje mnoge druge kombinacije upita koje možete istražiti kada pokušavate dohvatiti podatke iz Firebase baze podataka. Nadamo se da sada razumijete kako postaviti jednostavnu Firebase bazu podataka, kako je povezati s lokalnom Angular aplikacijom i kako čitati i pisati u bazu podataka.

Također možete saznati više o drugim uslugama koje Firebase pruža. Firebase je jedna od mnogih platformi koje možete integrirati s Angularom, i bez obzira na to jeste li na početnoj ili naprednoj razini, uvijek se može naučiti još mnogo toga.

Top 8 kutnih tečajeva za početnike i napredne korisnike

Pročitajte dalje

O autoru