Kako shraniti, posodobiti, izbrisati in pridobiti podatke iz baze podatkov Firebase z uporabo Angular

Firebase je platforma, ki vam ponuja številne storitve za pomoč pri gradnji in prilagajanju aplikacije. Nekatere od teh funkcij vključujejo storitve gostovanja, shranjevanje podatkov in možnost sledenja analitiki podatkov.

Ta vadnica se osredotoča predvsem na to, kako ustvariti in dodati podatke v bazo podatkov Firebase ter kako izvesti operacije ustvarjanja, branja, pisanja in brisanja v bazo podatkov iz lokalne aplikacije Angular.

Kako ustvariti in dodati podatke v zbirko podatkov Firebase

Ob predpostavki, da že imate lokalno nastavljeno in zagnano aplikacijo Angular, jo bo treba za shranjevanje in dostop do podatkov povezati z bazo podatkov Firebase. Če niste seznanjeni z Angularom, si lahko preberete več o tem Koncepti, komponente in celotna struktura Angular projekta.

Če še nimate baze podatkov Firebase, se lahko s poverilnicami Google Računa prijavite v Firebase in sledite pozivom. Ko je to nastavljeno, ustvarite projekt:

1. Od Domača stran Firebase, izberite Pojdite na konzolo v zgornjem desnem kotu spletnega mesta.
instagram viewer
2. V razdelku »Vaši projekti Firebase« izberite Dodaj projekt.
3. Sledite navodilom za ustvarjanje novega projekta.
4. Ko bo zaključen, se bo projekt odprl. Na levi strani zaslona je plošča, ki navaja funkcije, ki jih ponuja Firebase. Premaknite miškin kazalec nad ikone, dokler ne vidite Baza podatkov Firestorein jo izberite.
5. Izberite Ustvari bazo podatkov, in sledite navodilom za ustvarjanje baze podatkov.
6. Ko izbirate varnostna pravila, izberite Zaženite v testnem načinu. To lahko pozneje spremenite, da zagotovite večjo varnost podatkov. Več o varnostnih pravilih Firestore si lahko preberete na naslednji strani Dokumentacija Firebase.
7. Ko bo končana, se bo odprla baza podatkov. Struktura baze podatkov uporablja zbirke, kar je v bistvu enak koncept kot tabele baze podatkov. Če bi na primer potrebovali dve tabeli, eno za shranjevanje podatkov o računu in eno za shranjevanje podatkov o uporabniku, bi ustvarili dve zbirki z imenom Račun in Uporabnik.
8. Izberite Začnite zbirati in dodajte ID zbirke z imenom "Uporabnik".
9. Dodajte prvi zapis z informacijami o enem uporabniku. Kliknite na Dodaj polje da dodate tri nova polja: firstName (niz), priimek (niz) in vipMember (boolean). ID dokumenta je mogoče samodejno ustvariti.
10. Kliknite Shrani.
11. Če želite v zbirko »Uporabnik« dodati več zapisov, kliknite na Dodaj dokument (dodajanje dokumenta je enakovredno dodajanju novega zapisa ali uporabnika). Dodajte še štiri uporabnike z istimi tremi polji.

Baza podatkov je zdaj nastavljena z nekaterimi testnimi podatki.

Kako integrirati Firebase v vašo aplikacijo Angular

Za dostop do teh podatkov v lokalni aplikaciji Angular najprej konfigurirajte nekaj nastavitev aplikacije za povezavo z bazo podatkov Firebase:

1. V Firebase pojdite na levo ploščo in kliknite Pregled projekta.
2. Izberite spletu gumb (označen z kotnimi oklepaji).
3. Registrirajte svojo lokalno aplikacijo tako, da dodate ime aplikacije.
4. Namestite Firebase v vašo lokalno aplikacijo Angular.

   npm i firebase
   

5. Firebase bo nato prikazal nekaj podrobnosti konfiguracije. Shranite te podrobnosti in kliknite Nadaljujte do konzole.
6. Na podlagi podrobnosti, navedenih v prejšnjem koraku, kopirajte naslednjo kodo v environment.prod.ts in environment.ts v aplikaciji Angular.

   izvozi const okolje = {
    produkcija: res,
    firebaseConfig: {
    apiKey: "vaš-api-ključ",
    authDomain: "vaša-avth-domena",
    projectId: "vaš-projekt-id",
    storageBucket: "vaš-storage-buckey",
    messagingSenderId: "your-messaging-sender-id",
    appId: "vaš-api-id",
    Id meritve: "id vaše meritve"
    }
   };
   

7. AngularFirestore iz @angular/fire/firestore bo uporabljen za konfiguracijo Firebase v Angular. Upoštevajte, da AngularFirestore ni združljiv z različico Angular 9 in novejšimi. V lokalni aplikaciji Angular zaženite:

   npm i @angular/fire
   

8. Dodajte modul Firestore in okolje v razdelek za uvoz v app.module.ts.

   uvozi { AngularFireModule } iz "@angular/fire";
   uvozi { AngularFirestoreModule } iz "@angular/fire/firestore";
   uvozi {okolje} iz "../environments/environment";
   

9. Module Firestore je treba vključiti tudi v matriko uvozov v app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Kako pridobiti podatke iz Firebase z uporabo storitve

Običajno je dobra praksa imeti enega ali več storitve.ts datoteke, ki jih uporabljate za posebno interakcijo z bazo podatkov. Funkcije, ki jih dodate v datoteko storitev, lahko nato pokličete v drugih datotekah TypeScript, straneh ali drugih komponentah v celotni aplikaciji.

1. Ustvarite datoteko z imenom service.ts v src/app/services mapo.
2. Dodajte modul AngularFirestore v razdelek za uvoze in ga vključite v konstruktor.

   uvozi { Injectable } iz '@angular/core';
   uvozi { AngularFirestore } iz '@angular/fire/firestore';
   @Injekcijsko ({
    pod pogojem: 'root'
   })
   izvozni razred storitev {
    konstruktor (zasebni db: AngularFirestore) { }
   }
   

3. Dodajte funkcijo, ki vrne obljubo, ki vsebuje seznam vseh uporabnikov. "this.db.collection('Uporabnik')« se nanaša na zbirko »Uporabnik« v bazi podatkov.

   getAllUsers() {
    vrnite novo obljubo((resolve)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (uporabniki => razreši (uporabniki));
    })
   }
   

4. Če želite to funkcijo uporabiti v drugi datoteki TypeScript, uvozite novo storitev in jo dodajte v konstruktor.

   uvozite { Service } iz 'src/app/services/service
   konstruktor (zasebna storitev: storitev) {}
   

5. Pridobite seznam vseh uporabnikov s funkcijo, ustvarjeno v datoteki storitev.

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

Kako dodati nov zapis v zbirko podatkov Firebase

Dodajte nov zapis za uporabnika v zbirko podatkov Firebase.

1. V services.ts dodajte novo funkcijo, da ustvarite nov zapis. Ta funkcija sprejme nov ID uporabnika in vse njegove podrobnosti. Za pošiljanje teh informacij v Firebase in ustvarjanje novega zapisa uporablja nastavljeno funkcijo Firestore.

   addNewUser (_newId: poljuben, _fName: niz, _lName: niz, _vip: boolean) {
    this.db.collection("Uporabnik").doc (_newId).set({firstName: _fName, priimek: _lName, vipMember: _vip});
   }

2. Pokličite funkcijo addNewUser() v drugi datoteki TypeScript. Ne pozabite uvoziti storitve in jo vključiti v konstruktor, kot je prikazano prej. Za ustvarjanje novega ID-ja za uporabnika lahko uporabite generator naključnih ID-jev.

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

Kako posodobiti podatke v bazi podatkov Firebase

Firebase ima veliko funkcij, ki naj postane eno najboljših orodij, ki so na voljo. Če želite posodobiti določena polja v določenem zapisu, uporabite funkcijo posodobitve Firestore.

1. V datoteki service.ts ustvarite funkcijo, imenovano updateUserFirstName(). Ta funkcija bo posodobila ime izbranega uporabniškega zapisa. Funkcija prevzame ID zapisa, ki ga je treba posodobiti, in novo vrednost za ime uporabnika.

   updateUserFirstName (_id: kateri koli, _firstName: niz) {
    this.db.doc(`Uporabnik/${_id}`).update({firstName: _firstName});
   }

2. Če želite posodobiti več polj za isti zapis, samo razširite polja, ki jih vnesete v funkcijo posodabljanja Firestore. Namesto samo ime dodajte priimek, da ga posodobite tudi z novo vrednostjo.

   updateUserFullName (_id: kateri koli, _firstName: niz, _lastName: niz) {
    this.db.doc(`Uporabnik/${_id}`).update({firstName: _firstName, priimek: _lastName});
   }

3. Katero koli od zgornjih funkcij je mogoče uporabiti v drugih datotekah TypeScript.

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

Kako izbrisati zapis iz baze podatkov Firebase

Za brisanje zapisa uporabite funkcijo brisanja Firestore.

1. V datoteki service.ts ustvarite funkcijo, imenovano deleteUser(). Ta funkcija prevzame ID zapisa, ki ga je treba izbrisati.

   deleteUser (_id: kateri koli) {
    this.db.doc(`Uporabnik/${_id}`).delete();
    }
   

2. Zgornjo funkcijo lahko nato uporabite v drugih datotekah TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Pridobite podatke Firebase s poizvedbami in filtri

Filter "kje" lahko filtrira rezultate, ki se vrnejo na podlagi določenega pogoja.

1. V services.ts ustvarite funkcijo, ki pridobi vse VIP uporabnike (to je, če je polje vipMember nastavljeno na true). To je označeno z delom "ref.where('vipMember', '==', true)" spodnjega klica Firebase.

   getAllVipMembers() {
    vrnite novo obljubo((resolve)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (uporabniki => razreši (uporabniki))
    })
    }

2. Uporabite to funkcijo v drugi datoteki TypseScript.

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

3. Poizvedbo lahko spremenite tako, da dodate druge operacije, kot so Naroči po, Začni pri ali Omejitev. Spremenite funkcijo getAllVipMembers() v storitvi services.ts, da jo razvrstite po priimku. Operacija Order By lahko zahteva, da se v Firebase ustvari indeks. Če je temu tako, kliknite povezavo v sporočilu o napaki v konzoli.

   getAllVipMembers() {
    vrnite novo obljubo((resolve)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (uporabniki => razreši (uporabniki) )
    })
    }

4. Spremenite poizvedbo tako, da bo vrnila samo prve tri zapise. Za to lahko uporabite operaciji Start at in Limit. To je uporabno, če morate implementirati ostranjevanje, ko je prikazano določeno število zapisov na stran.

   getAllVipMembers() {
    vrnite novo obljubo((resolve)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (uporabniki => razreši (uporabniki))
    })
    }

Dodajte več podatkov v Firebase in več zahtev v aplikaciji Angular

Obstaja veliko drugih kombinacij poizvedb, ki jih lahko raziščete, ko poskušate pridobiti podatke iz baze podatkov Firebase. Upajmo, da zdaj razumete, kako nastaviti preprosto bazo podatkov Firebase, kako jo povezati z lokalno aplikacijo Angular in kako brati in pisati v bazo podatkov.

Izvedete lahko tudi več o drugih storitvah, ki jih ponuja Firebase. Firebase je ena izmed mnogih platform, ki jih lahko integrirate z Angularom, in ne glede na to, ali ste na začetni ali napredni ravni, se je vedno treba naučiti še veliko več.

8 najboljših kotnih tečajev za začetnike in napredne uporabnike

Preberite Naprej

O avtorju