Andmete salvestamine, värskendamine, kustutamine ja Firebase'i andmebaasist Angulari abil andmete toomine

Firebase on platvorm, mis pakub teile palju teenuseid, mis aitavad rakendusi luua ja skaleerida. Mõned neist funktsioonidest hõlmavad hostimisteenuseid, andmesalvestust ja andmeanalüüsi jälgimise võimalust.

See õpetus keskendub peamiselt Firebase'i andmebaasi andmete loomisele ja lisamisele ning sellele, kuidas kohalikust Angulari rakendusest andmebaasi luua, lugeda, kirjutada ja kustutada.

Firebase'i andmebaasi andmete loomine ja lisamine

Eeldades, et teil on juba Angulari rakendus seadistatud ja see töötab kohapeal, peab see andmete salvestamiseks ja neile juurde pääsemiseks olema ühendatud Firebase'i andmebaasiga. Kui te Angulariga tuttav pole, saate selle kohta rohkem lugeda Nurgakontseptsioonid, komponendid ja nurgaprojekti üldine struktuur.

Kui teil veel Firebase'i andmebaasi pole, saate Firebase'i sisse logimiseks kasutada oma Google'i konto mandaate ja järgida juhiseid. Kui see on seadistatud, looge projekt:

1. Alates Firebase'i koduleht, valige Minge konsooli saidi paremas ülanurgas.
instagram viewer
2. Tehke jaotises „Teie Firebase'i projektid” valik Lisa projekt.
3. Uue projekti loomiseks järgige juhiseid.
4. Pärast lõpetamist projekt avaneb. Ekraani vasakus servas on paneel, mis loetleb Firebase'i pakutavad funktsioonid. Hõljutage kursorit ikoonide kohal, kuni näete Firestore'i andmebaasja valige see.
5. Valige Loo andmebaas, ja järgige andmebaasi loomiseks juhiseid.
6. Turvareeglite valimisel valige Käivitage testrežiimis. Seda saab hiljem muuta, et tagada andmete turvalisus. Lisateavet Firestore'i turvareeglite kohta saate lugeda järgmiselt Firebase'i dokumentatsioon.
7. Pärast lõpetamist avaneb andmebaas. Andmebaasi struktuur kasutab kogusid, mis on sisuliselt sama kontseptsioon kui andmebaasitabelid. Näiteks kui teil on vaja kahte tabelit, millest üks salvestab kontoteavet ja teine ​​​​kasutaja teabe salvestamiseks, peaksite looma kaks kogu nimega Konto ja Kasutaja.
8. Valige Alusta kogumist ja lisage kogu ID nimega "Kasutaja".
9. Lisage esimene kirje ühe kasutaja teabega. Kliki Lisa väli kolme uue välja lisamiseks: eesnimi (string), perekonnanimi (string) ja vipMember (tõveväärtus). Dokumendi ID saab automaatselt genereerida.
10. Klõpsake Salvesta.
11. Rohkemate kirjete lisamiseks kogusse "Kasutaja" klõpsake nuppu Lisa dokument (dokumendi lisamine on samaväärne uue kirje või kasutaja lisamisega). Lisage veel neli kasutajat samade kolme väljaga.

Andmebaas on nüüd seadistatud mõningate testandmetega.

Kuidas integreerida Firebase oma Angular-rakendusse

Nendele andmetele juurdepääsuks kohalikus Angulari rakenduses seadistage Firebase'i andmebaasiga ühenduse loomiseks esmalt mõned rakenduse seaded.

1. Firebase'is minge vasakpoolsele paneelile ja klõpsake nuppu projekti ülevaade.
2. Valige võrk nuppu (näidatud nurksulgudega).
3. Registreerige oma kohalik rakendus, lisades rakenduse nime.
4. Installige Firebase oma kohalikku Angulari rakendusse.

   npm ja firebase
   

5. Seejärel kuvab Firebase mõned konfiguratsiooni üksikasjad. Salvestage need andmed ja klõpsake Jätkake konsooliga.
6. Eelmises etapis esitatud üksikasjade põhjal kopeerige järgmine kood rakenduse Angular kaustadesse Environment.prod.ts ja Environment.ts.

   ekspordi const keskkond = {
    tootmine: tõsi,
    firebaseConfig: {
    apiKey: "teie-api-võti",
    authDomain: "teie-auth-domeen",
    projekti ID: "teie projekti ID",
    storageBucket: "your-storage-bckey",
    messagingSenderId: "teie-sõnumside-saatja-id",
    appId: "teie-api-id",
    mérésId: "teie mõõtmise ID"
    }
   };
   

7. AngularFirestore alates @angular/fire/firestore kasutatakse Firebase'i konfigureerimiseks Angularis. Pange tähele, et AngularFirestore ei ühildu Angulari versiooniga 9 ja uuemate versioonidega. Käivitage kohalikus rakenduses Angular:

   npm i @nurk/tulekahju
   

8. Lisage Firestore'i ja keskkonnamoodulid saidi app.module.ts impordi jaotisesse.

   importida { AngularFireModule } failist "@angular/fire";
   import { AngularFirestoreModule } kohast "@angular/fire/firestore";
   import { keskkond } saidist "../environments/environments";
   

9. Firestore'i moodulid tuleb lisada ka faili app.module.ts impordi massiivi.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Kuidas Firebase'ist teenuse abil andmeid hankida

Tavaliselt on hea tava kasutada ühte või mitut teenused.ts failid, mida kasutate spetsiaalselt andmebaasiga suhtlemiseks. Teenuste faili lisatavaid funktsioone saab seejärel kutsuda välja teistes TypeScript-failides, lehtedel või muudes kogu rakenduse komponentides.

1. Looge failis service.ts fail src/app/services kausta.
2. Lisage moodul AngularFirestore impordi jaotisesse ja lisage see konstruktorisse.

   import { Injectable } from '@angular/core';
   import { AngularFirestore } kohast '@angular/fire/firestore';
   @Süstitav({
    sätestatud: "juur"
   })
   ekspordiklassi teenus {
    konstruktor (privaatne db: AngularFirestore) { }
   }
   

3. Lisage funktsioon, mis tagastab lubaduse, mis sisaldab kõigi kasutajate loendit. "this.db.collection('Kasutaja')" viitab andmebaasis olevale kogule "Kasutaja".

   getAllUsers() {
    tagasta uus lubadus((lahendada)=> {
    this.db.collection('Kasutaja').valueChanges({ idField: 'id' }).subscribe (kasutajad => lahenda (kasutajad));
    })
   }
   

4. Selle funktsiooni kasutamiseks mõnes teises TypeScript-failis importige uus teenus ja lisage see konstruktorisse.

   importige { Service } saidist 'src/app/services/service
   ehitaja (erateenus: teenus) {}
   

5. Hankige kõigi teenuste failis loodud funktsiooni kasutavate kasutajate loend.

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

Kuidas Firebase'i andmebaasi uut kirjet lisada

Lisage Firebase'i andmebaasi kasutaja jaoks uus kirje.

1. Teenuses services.ts lisage uue kirje loomiseks uus funktsioon. See funktsioon võtab sisse uue kasutaja ID ja kõik tema andmed. See kasutab selle teabe Firebase'i saatmiseks ja uue kirje loomiseks Firestore'i seatud funktsiooni.

   addNewUser (_newId: mis tahes, _fName: string, _lName: string, _vip: tõeväärtus) {
    this.db.collection("Kasutaja").doc (_newId).set({eesnimi: _fName, perekonnanimi: _lNimi, vipLiige: _vip});
   }

2. Kutsuge funktsioon addNewUser() mõnes teises TypeScript-failis. Ärge unustage teenust importida ja lisada seda konstruktorisse, nagu varem näidatud. Kasutajale uue ID loomiseks kasutage julgelt juhusliku ID generaatorit.

   this.service.addNewUser("62289836", "Jane", "Doe", tõsi);
   

Kuidas Firebase'i andmebaasis andmeid värskendada

Firebase'il on palju funktsioone muuta see üheks parimaks saadaolevaks tööriistaks. Konkreetse kirje teatud väljade värskendamiseks kasutage Firestore'i värskendusfunktsiooni.

1. Looge failis service.ts funktsioon nimega updateUserFirstName(). See funktsioon värskendab valitud kasutajakirje eesnime. Funktsioon võtab sisse värskendamist vajava kirje ID ja kasutaja eesnime uue väärtuse.

   updateUserFirstName (_id: mis tahes, _firstName: string) {
    this.db.doc(`Kasutaja/${_id}`).update({eesnimi: _eesnimi});
   }

2. Sama kirje mitme välja värskendamiseks laiendage lihtsalt Firestore'i värskendusfunktsiooni sisestatavaid välju. Lihtsalt eesnime asemel lisage perekonnanimi, et värskendada seda ka uue väärtusega.

   updateUserFullName (_id: mis tahes, _eesnimi: string, _lastName: string) {
    this.db.doc(`Kasutaja/${_id}`).update({eesnimi: _eesnimi, perekonnanimi: _perenimi});
   }

3. Kõiki ülaltoodud funktsioone saab kasutada teistes TypeScript-failides.

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

Kirje kustutamine Firebase'i andmebaasist

Kirje kustutamiseks kasutage Firestore'i kustutamisfunktsiooni.

1. Looge failis service.ts funktsioon nimega deleteUser(). See funktsioon võtab sisse kustutatava kirje ID.

   deleteUser (_id: mis tahes) {
    this.db.doc(`Kasutaja/${_id}`).delete();
    }
   

2. Ülaltoodud funktsiooni saab seejärel kasutada teistes TypeScript-failides.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Firebase'i andmete toomine päringute ja filtrite abil

Filter „kus” saab filtreerida konkreetse tingimuse alusel tagastatavaid tulemusi.

1. Looge saidis services.ts funktsioon, mis hangib kõik VIP-kasutajad (see on siis, kui väli vipMember on seatud väärtusele Tõene). Sellele viitab alloleva Firebase'i kutse osa "ref.where('vipMember', '==', true)".

   getAllVipMembers() {
    tagasta uus lubadus((lahendada)=> {
    this.db.collection('Kasutaja', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (kasutajad => lahenda (kasutajad))
    })
    }

2. Kasutage seda funktsiooni mõnes teises TypeScript-failis.

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

3. Päringut saab muuta, et lisada muid toiminguid, nagu Järjesta, Alusta või Piirang. Muutke saidis services.ts funktsiooni getAllVipMembers() perekonnanime järgi järjestamiseks. Toiming Tellimuse alusel võib nõuda indeksi loomist Firebase'is. Kui see nii on, klõpsake konsooli veateates olevat linki.

   getAllVipMembers() {
    tagasta uus lubadus((lahendada)=> {
    this.db.collection('Kasutaja', ref => ref.where('vipMember', '==', true).orderBy('perenimi')).valueChanges().subscribe (kasutajad => lahenda (kasutajad) )
    })
    }

4. Muutke päringut, et tagastada ainult kolm esimest kirjet. Selleks saab kasutada tehteid Start At ja Limit. See on kasulik, kui peate juurutama lehitsemist, mis tähendab, et ühel lehel kuvatakse teatud arv kirjeid.

   getAllVipMembers() {
    tagasta uus lubadus((lahendada)=> {
    this.db.collection('Kasutaja', ref => ref.where('vipMember', '==', true).orderBy('perenimi').startAt (0).limit (3)).valueChanges() .subscribe (kasutajad => lahenda (kasutajad))
    })
    }

Lisage Firebase'i rohkem andmeid ja lisage rakenduses Angular rohkem taotlusi

Firebase'i andmebaasist andmete toomisel saate uurida palju muid päringukombinatsioone. Loodetavasti saate nüüd aru, kuidas seadistada lihtsat Firebase'i andmebaasi, kuidas seda kohaliku Angulari rakendusega ühendada ning kuidas andmebaasi lugeda ja sinna kirjutada.

Samuti saate lisateavet teiste Firebase'i pakutavate teenuste kohta. Firebase on üks paljudest platvormidest, mille saate Angulariga integreerida, ja olenemata sellest, kas olete algaja või edasijõudnu tasemel, on teil alati palju rohkem õppida.

8 parimat nurgakursust algajatele ja edasijõudnutele

Loe edasi

Autori kohta