Kaip saugoti, atnaujinti, ištrinti ir gauti duomenis iš „Firebase“ duomenų bazės naudojant „Angular“.

„Firebase“ yra platforma, teikianti daugybę paslaugų, padedančių kurti ir keisti taikomąją programą. Kai kurios iš šių funkcijų apima prieglobos paslaugas, duomenų saugojimą ir galimybę sekti duomenų analizę.

Šioje mokymo programoje daugiausia dėmesio skiriama tam, kaip kurti ir įtraukti duomenis į „Firebase“ duomenų bazę ir kaip atlikti duomenų bazės kūrimo, skaitymo, rašymo ir trynimo operacijas iš vietinės „Angular“ programos.

Kaip sukurti ir pridėti duomenis prie „Firebase“ duomenų bazės

Darant prielaidą, kad „Angular“ programa jau nustatyta ir veikia vietoje, ji turės būti prijungta prie „Firebase“ duomenų bazės, kad būtų galima saugoti ir pasiekti duomenis. Jei nesate susipažinę su Angular, galite perskaityti daugiau Kampinės koncepcijos, komponentai ir bendra kampinio projekto struktūra.

Jei dar neturite „Firebase“ duomenų bazės, galite naudoti „Google“ paskyros kredencialus, kad prisijungtumėte prie „Firebase“ ir vykdytumėte raginimus. Kai tai bus nustatyta, sukurkite projektą:

1. Iš
   instagram viewer
   „Firebase“ pagrindinis puslapis, pasirinkite Eikite į konsolę viršutiniame dešiniajame svetainės kampe.
2. Skiltyje „Jūsų Firebase projektai“ pasirinkite Pridėti projektą.
3. Vykdykite nurodymus, kad sukurtumėte naują projektą.
4. Kai projektas bus baigtas, jis bus atidarytas. Kairėje ekrano pusėje yra skydelis, kuriame išvardytos „Firebase“ teikiamos funkcijos. Užveskite pelės žymeklį virš piktogramų, kol pamatysite Firestore duomenų bazėir pasirinkite jį.
5. Pasirinkite Sukurti duomenų bazę, ir vadovaukitės raginimais sukurti duomenų bazę.
6. Rinkdamiesi saugos taisykles pasirinkite Pradėkite bandymo režimu. Tai vėliau gali būti pakeista, kad duomenys būtų saugesni. Daugiau apie „Firestore“ saugos taisykles galite perskaityti vadovaudamiesi „Firebase“ dokumentacija.
7. Kai baigsite, atsidarys duomenų bazė. Duomenų bazės struktūroje naudojami rinkiniai, kurie iš esmės yra ta pati sąvoka kaip ir duomenų bazių lentelės. Pavyzdžiui, jei jums reikia dviejų lentelių, vienos paskyros informacijai saugoti, o kitos naudotojo informacijai saugoti, sukurkite dvi kolekcijas, pavadintas Paskyra ir Vartotojas.
8. Pasirinkite Pradėti kolekciją ir pridėkite Kolekcijos ID pavadinimu „Vartotojas“.
9. Pridėkite pirmąjį įrašą su informacija apie vieną vartotoją. Spustelėkite Pridėti lauką pridėti tris naujus laukus: vardas (eilutė), pavardė (eilutė) ir vipMember (loginis). Dokumento ID gali būti sugeneruotas automatiškai.
10. Spustelėkite Sutaupyti.
11. Norėdami pridėti daugiau įrašų į kolekciją „Vartotojas“, spustelėkite Pridėti dokumentą (pridėti dokumentą prilygsta naujo įrašo arba vartotojo įtraukimui). Pridėkite dar keturis vartotojus su tais pačiais trimis laukais.

Dabar duomenų bazė sukurta su kai kuriais bandymų duomenimis.

Kaip integruoti „Firebase“ į „Angular“ programą

Norėdami pasiekti šiuos duomenis vietinėje Angular programoje, pirmiausia sukonfigūruokite kai kuriuos programos nustatymus, kad galėtumėte prisijungti prie „Firebase“ duomenų bazės:

1. „Firebase“ eikite į kairįjį skydelį ir spustelėkite projekto apžvalga.
2. Pasirinkite Žiniatinklis mygtukas (pažymėtas kampiniais skliaustais).
3. Užregistruokite vietinę programą pridėdami programos pavadinimą.
4. Įdiekite „Firebase“ vietinėje „Angular“ programoje.

   npm ir firebase
   

5. Tada „Firebase“ parodys tam tikrą konfigūracijos informaciją. Išsaugokite šią informaciją ir spustelėkite Eikite į konsolę.
6. Remdamiesi ankstesniame veiksme pateikta informacija, nukopijuokite šį kodą į Environment.prod.ts ir Environment.ts Angular programoje.

   eksportuoti const aplinką = {
    gamyba: tiesa,
    firebaseConfig: {
    apiKey: „jūsų api raktas“,
    authDomain: "jūsų-auth-domain",
    projekto ID: „jūsų projekto ID“,
    storageBucket: „jūsų saugyklos bakas“,
    messagingSenderId: "jūsų pranešimų siuntėjo ID",
    appId: "jūsų-api-id",
    mérés ID: „jūsų matavimo ID“
    }
   };
   

7. AngularFirestore iš @angular/fire/firestore bus naudojamas „Firebase“ konfigūruoti „Angular“. Atminkite, kad AngularFirestore nesuderinamas su Angular 9 ir naujesne versija. Vietinėje Angular programoje paleiskite:

   npm i @kampinis/ugnis
   

8. Pridėkite Firestore ir aplinkos modulius prie app.module.ts importavimo skilties.

   importuoti { AngularFireModule } iš „@angular/fire“;
   importuoti { AngularFirestoreModule } iš „@angular/fire/firestore“;
   importuoti { aplinką } iš "../environments/environments";
   

9. Firestore moduliai taip pat turi būti įtraukti į app.module.ts importavimo masyvą.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Kaip gauti duomenis iš „Firebase“ naudojant paslaugą

Paprastai gera praktika yra turėti vieną ar kelis paslaugos.ts failus, kuriuos naudojate konkrečiai sąveikai su duomenų baze. Į paslaugų failą įtrauktos funkcijos gali būti iškviestos kituose „TypeScript“ failuose, puslapiuose ar kituose programos komponentuose.

1. Sukurkite failą, pavadintą service.ts src/app/services aplanką.
2. Įtraukite AngularFirestore modulį į importavimo skyrių ir įtraukite jį į konstruktorių.

   importuoti { Injectable } iš '@angular/core';
   importuoti { AngularFirestore } iš '@angular/fire/firestore';
   @Injekcinis({
    Pateikta: 'root'
   })
   eksporto klasės paslauga {
    konstruktorius (privatus db: AngularFirestore) { }
   }
   

3. Pridėkite funkciją, kuri grąžina pažadą su visų vartotojų sąrašu. "this.db.collection("Vartotojas")“ reiškia duomenų bazėje esantį rinkinį „Vartotojas“.

   getAllUsers() {
    grąžinti naują pažadą((išspręsti)=> {
    this.db.collection('Vartotojas').valueChanges({ idField: 'id' }).subscribe (naudotojai => išspręsti (naudotojai));
    })
   }
   

4. Norėdami naudoti šią funkciją kitame TypeScript faile, importuokite naują paslaugą ir pridėkite ją prie konstruktoriaus.

   importuoti { Service } iš 'src/app/services/service
   konstruktorius (privati ​​paslauga: paslauga) {}
   

5. Gaukite visų vartotojų sąrašą naudodami paslaugų faile sukurtą funkciją.

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

Kaip pridėti naują įrašą prie „Firebase“ duomenų bazės

Pridėkite naują naudotojo įrašą į „Firebase“ duomenų bazę.

1. Paslaugose.ts pridėkite naują funkciją, kad sukurtumėte naują įrašą. Ši funkcija perima naują vartotojo ID ir visą jo informaciją. Šiai informacijai į „Firebase“ siųsti ir naujam įrašui sukurti naudojama „Firestore“ nustatymo funkcija.

   addNewUser (_newId: bet koks, _fName: eilutė, _lName: eilutė, _vip: loginis) {
    this.db.collection("Vartotojas").doc (_newId).set({vardas: _fVardas, pavardė: _lVardas, vipMember: _vip});
   }

2. Iškvieskite funkciją addNewUser() kitame „TypeScript“ faile. Nepamirškite importuoti paslaugos ir įtraukti ją į konstruktorių, kaip parodyta anksčiau. Nesivaržykite naudoti atsitiktinių ID generatorių, kad sukurtumėte naują vartotojo ID.

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

Kaip atnaujinti duomenis „Firebase“ duomenų bazėje

„Firebase“ turi daug funkcijų padaryti jį vienu geriausių turimų įrankių. Norėdami atnaujinti tam tikrus konkretaus įrašo laukus, naudokite „Firestore“ naujinimo funkciją.

1. Faile service.ts sukurkite funkciją updateUserFirstName(). Ši funkcija atnaujins pasirinkto vartotojo įrašo vardą. Funkcija paima įrašo, kurį reikia atnaujinti, ID ir naują vartotojo vardo reikšmę.

   updateUserFirstName (_id: bet koks, _firstName: eilutė) {
    this.db.doc(`Vartotojas/${_id}`).update({firstName: _firstName});
   }

2. Norėdami atnaujinti kelis to paties įrašo laukus, tiesiog išplėskite laukus, įvedamus Firestore naujinimo funkcijoje. Vietoj vardo pridėkite pavardę, kad ją atnaujintumėte nauja verte.

   updateUserFullName (_id: bet koks, _firstName: eilutė, _lastName: eilutė) {
    this.db.doc(`Vartotojas/${_id}`).update({vardas: _vardas, pavardė: _pavardė});
   }

3. Bet kuri iš aukščiau paminėtų funkcijų gali būti naudojama kituose TypeScript failuose.

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

Kaip ištrinti įrašą iš „Firebase“ duomenų bazės

Norėdami ištrinti įrašą, naudokite „Firestore“ trynimo funkciją.

1. Faile service.ts sukurkite funkciją deleteUser(). Ši funkcija paima įrašo, kurį reikia ištrinti, ID.

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

2. Aukščiau nurodyta funkcija gali būti naudojama kituose TypeScript failuose.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Gaukite „Firebase“ duomenis naudodami užklausas ir filtrus

Filtras „kur“ gali filtruoti rezultatus, kurie pateikiami pagal konkrečią sąlygą.

1. Paslaugose.ts sukurkite funkciją, kuri gautų visus VIP vartotojus (tai yra, jei vipMember laukas nustatytas kaip tiesa). Tai nurodo toliau esančioje Firebase iškvietimo dalyje „ref.where('vipMember', '==', true)“.

   getAllVipMembers() {
    grąžinti naują pažadą((išspręsti)=> {
    this.db.collection('Vartotojas', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (naudotojai => išspręsti (naudotojai))
    })
    }

2. Naudokite šią funkciją kitame „TypseScript“ faile.

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

3. Užklausą galima modifikuoti, kad būtų pridėtos kitos operacijos, pvz., užsakymas pagal, pradėti nuo arba limitas. Pakeiskite getAllVipMembers() funkciją serveryje services.ts pagal pavardę. Norint atlikti užsakymą pagal operaciją, sistemoje „Firebase“ gali reikėti sukurti indeksą. Jei taip, spustelėkite nuorodą, pateiktą klaidos pranešime konsolėje.

   getAllVipMembers() {
    grąžinti naują pažadą((išspręsti)=> {
    this.db.collection('Vartotojas', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (naudotojai => išspręsti (naudotojai) )
    })
    }

4. Modifikuokite užklausą, kad būtų pateikti tik pirmieji trys įrašai. Tam galima naudoti operacijas Pradėti nuo ir Limit. Tai naudinga, jei reikia įdiegti puslapius, ty tada, kai puslapyje rodomas tam tikras įrašų skaičius.

   getAllVipMembers() {
    grąžinti naują pažadą((išspręsti)=> {
    this.db.collection('Vartotojas', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .Prenumeruoti (naudotojai => išspręsti (naudotojai))
    })
    }

Pridėkite daugiau duomenų prie „Firebase“ ir daugiau užklausų „Angular“ programoje

Yra daug kitų užklausų derinių, kuriuos galite ištirti bandydami gauti duomenis iš „Firebase“ duomenų bazės. Tikimės, kad dabar supratote, kaip nustatyti paprastą „Firebase“ duomenų bazę, kaip prijungti ją prie vietinės „Angular“ programos ir kaip skaityti bei rašyti duomenų bazėje.

Taip pat galite sužinoti daugiau apie kitas „Firebase“ teikiamas paslaugas. „Firebase“ yra viena iš daugelio platformų, kurias galite integruoti su „Angular“, ir nesvarbu, ar esate pradedančiojo, ar pažengusio lygio, visada reikia dar daug išmokti.

8 geriausi kampiniai kursai pradedantiesiems ir pažengusiems

Skaitykite toliau

Apie autorių