Kuinka tallentaa, päivittää, poistaa ja noutaa tietoja Firebase-tietokannasta Angularin avulla

Firebase on alusta, joka tarjoaa sinulle monia palveluita, jotka auttavat sovelluksen rakentamisessa ja skaalaamisessa. Joitakin näistä ominaisuuksista ovat isännöintipalvelut, tietojen tallennus ja mahdollisuus seurata data-analytiikkaa.

Tämä opetusohjelma keskittyy pääasiassa tietojen luomiseen ja lisäämiseen Firebase-tietokantaan sekä tietokantaan luonti-, luku-, kirjoitus- ja poistotoimintojen suorittamiseen paikallisesta Angular-sovelluksesta.

Tietojen luominen ja lisääminen Firebase-tietokantaan

Olettaen, että sinulla on jo Angular-sovellus asennettuna ja käynnissä paikallisesti, se on yhdistettävä Firebase-tietokantaan tietojen tallentamista ja käyttöä varten. Jos Angular ei ole sinulle tuttu, voit lukea siitä lisää Kulmakäsitteet, komponentit ja Angular-projektin yleinen rakenne.

Jos sinulla ei vielä ole Firebase-tietokantaa, voit kirjautua Firebaseen Google-tilisi tunnistetiedoilla ja seurata ohjeita. Kun tämä on määritetty, luo projekti:

1. From Firebasen kotisivu, valitse Siirry konsoliin sivuston oikeassa yläkulmassa.
instagram viewer
2. Valitse Firebase-projektisi kohdasta Lisää projekti.
3. Luo uusi projekti seuraamalla ohjeita.
4. Kun projekti on valmis, se avautuu. Näytön vasemmalla puolella on paneeli, jossa luetellaan Firebasen tarjoamat ominaisuudet. Vie hiiri kuvakkeiden päälle, kunnes näet Firestore-tietokantaja valitse se.
5. Valitse Luo tietokanta, ja noudata kehotteita luodaksesi tietokanta.
6. Kun valitset suojaussääntöjä, valitse Aloita testitilassa. Tätä voidaan muuttaa myöhemmin tietojen turvallisuuden varmistamiseksi. Voit lukea lisää Firestoren tietoturvasäännöistä seuraavasta Firebase-dokumentaatio.
7. Kun se on valmis, tietokanta avautuu. Tietokantarakenne käyttää kokoelmia, joka on olennaisesti sama käsite kuin tietokantataulukot. Jos esimerkiksi tarvitsit kaksi taulukkoa, joista toisen tallentaa tilitietoja ja toisen käyttäjän tietoja, luo kaksi kokoelmaa nimeltä Tili ja Käyttäjä.
8. Valitse Aloita kerääminen ja lisää kokoelmatunnus nimeltä "Käyttäjä".
9. Lisää ensimmäinen tietue, jossa on tiedot yhdestä käyttäjästä. Klikkaa Lisää kenttä lisätäksesi kolme uutta kenttää: etunimi (merkkijono), sukunimi (merkkijono) ja vipMember (boolean). Asiakirjan tunnus voidaan luoda automaattisesti.
10. Klikkaus Tallentaa.
11. Lisää tietueita "Käyttäjä"-kokoelmaan napsauttamalla Lisää asiakirja (lisää asiakirja vastaa uuden tietueen tai käyttäjän lisäämistä). Lisää neljä muuta käyttäjää samoilla kolmella kentällä.

Tietokanta on nyt määritetty testitiedoilla.

Firebasen integroiminen Angular-sovellukseesi

Jos haluat käyttää näitä tietoja paikallisessa Angular-sovelluksessasi, määritä ensin joitain sovelluksen asetuksia yhteyden muodostamiseksi Firebase-tietokantaan:

1. Siirry Firebasessa vasemmanpuoleiseen paneeliin ja napsauta Projektin Yleiskatsaus.
2. Valitse Web -painiketta (merkitty kulmasulkeilla).
3. Rekisteröi paikallinen sovelluksesi lisäämällä sovelluksen nimi.
4. Asenna Firebase paikalliseen Angular-sovellukseesi.

   npm Firebase
   

5. Firebase näyttää sitten joitain määritystietoja. Tallenna nämä tiedot ja napsauta Jatka konsoliin.
6. Kopioi seuraava koodi edellisessä vaiheessa annettujen tietojen perusteella Angular-sovelluksen ympäristö.prod.ts- ja ympäristö.ts-tiedostoihin.

   vienti const ympäristö = {
    tuotanto: totta,
    firebaseConfig: {
    apiKey: "oma-api-avain",
    authDomain: "oma-auth-verkkotunnus",
    projectId: "your-projekti-id",
    storageBucket: "your-storage-bickey",
    messagingSenderId: "your-messaging-sender-id",
    appId: "oma-api-id",
    mittaustunnus: "your-measurement-id"
    }
   };
   

7. AngularFirestore alkaen @kulma/fire/firestore käytetään Firebasen määrittämiseen Angularissa. Huomaa, että AngularFirestore ei ole yhteensopiva Angular-version 9 tai uudemman kanssa. Suorita paikallisessa Angular-sovelluksessa:

   npm i @kulma/tuli
   

8. Lisää Firestore- ja ympäristömoduulit app.module.ts-tiedoston tuontiosioon.

   tuo { AngularFireModule } osoitteesta "@angular/fire";
   tuo { AngularFirestoreModule } osoitteesta "@angular/fire/firestore";
   tuo { ympäristö } osoitteesta "../environments/environment";
   

9. Firestore-moduulit on myös sisällytettävä app.module.ts-tiedoston tuontitaulukkoon.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Tietojen hakeminen Firebasesta palvelun avulla

Yleensä on hyvä käytäntö olla yksi tai useampi palvelut.ts tiedostot, joita käytät erityisesti vuorovaikutukseen tietokannan kanssa. Palvelutiedostoon lisäämäsi toiminnot voidaan sitten kutsua muissa TypeScript-tiedostoissa, sivuilla tai muissa osissa kaikkialla sovelluksessa.

1. Luo tiedosto nimeltä service.t src/app/services kansio.
2. Lisää AngularFirestore-moduuli tuontiosioon ja sisällytä se konstruktoriin.

   tuo { Injectable } osoitteesta @angular/core;
   tuo { AngularFirestore } osoitteesta @angular/fire/firestore;
   @Injektoitava({
    tarjotaan: 'juuri'
   })
   vientiluokan palvelu {
    rakentaja (yksityinen tietokanta: AngularFirestore) { }
   }
   

3. Lisää funktio, joka palauttaa lupauksen, joka sisältää luettelon kaikista käyttäjistä. "this.db.collection('Käyttäjä')" viittaa tietokannan "Käyttäjä"-kokoelmaan.

   getAllUsers() {
    palauta uusi lupaus((ratkaise)=> {
    this.db.collection('Käyttäjä').valueChanges({ idField: 'id' }).subscribe (käyttäjät => ratkaise (käyttäjät));
    })
   }
   

4. Jos haluat käyttää tätä toimintoa toisessa TypeScript-tiedostossa, tuo uusi palvelu ja lisää se konstruktoriin.

   tuo { Service } osoitteesta 'src/app/services/service
   rakentaja (yksityinen palvelu: palvelu) {}
   

5. Hanki luettelo kaikista käyttäjistä käyttämällä palvelutiedostoon luotua toimintoa.

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

Uuden tietueen lisääminen Firebase-tietokantaan

Lisää käyttäjälle uusi tietue Firebase-tietokantaan.

1. Luo uusi tietue lisäämällä Service.ts-tiedostoon uusi toiminto. Tämä toiminto ottaa vastaan ​​uuden käyttäjätunnuksen ja kaikki hänen tiedot. Se käyttää Firestoren asetustoimintoa tietojen lähettämiseen Firebaselle ja uuden tietueen luomiseen.

   addNewUser (_newId: mikä tahansa, _fName: merkkijono, _lName: merkkijono, _vip: boolean) {
    this.db.collection("Käyttäjä").doc (_newId).set({etunimi: _fName, sukunimi: _lNimi, vipJäsen: _vip});
   }

2. Kutsu addNewUser()-funktio toisessa TypeScript-tiedostossa. Muista tuoda palvelu ja sisällyttää se konstruktoriin, kuten aiemmin on esitetty. Voit vapaasti käyttää satunnaistunnusgeneraattoria luodaksesi käyttäjälle uuden tunnuksen.

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

Firebase-tietokannan tietojen päivittäminen

Firebasessa on monia toimintoja tehdä siitä yksi parhaista saatavilla olevista työkaluista. Käytä Firestoren päivitystoimintoa päivittääksesi tietyn tietueen tietyt kentät.

1. Luo service.ts-tiedostoon funktio nimeltä updateUserFirstName(). Tämä toiminto päivittää valitun käyttäjätietueen etunimen. Toiminto ottaa päivitettävän tietueen tunnuksen ja käyttäjän etunimen uuden arvon.

   updateUserFirstName (_id: mikä tahansa, _firstName: merkkijono) {
    this.db.doc(`Käyttäjä/${_id}`).update({etunimi: _etunimi});
   }

2. Jos haluat päivittää useita kenttiä samalle tietueelle, laajenna vain Firestoren päivitystoimintoon syötettävät kentät. Pelkän etunimen sijaan lisää sukunimi päivittääksesi myös sen uudella arvolla.

   updateUserFullName (_id: mikä tahansa, _firstName: merkkijono, _lastName: merkkijono) {
    this.db.doc(`Käyttäjä/${_id}`).update({etunimi: _etunimi, sukunimi: _sukunimi});
   }

3. Mitä tahansa yllä olevista toiminnoista voidaan käyttää muissa TypeScript-tiedostoissa.

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

Tietueen poistaminen Firebase-tietokannasta

Voit poistaa tietueen Firestoren poistotoiminnolla.

1. Luo service.ts-tiedostoon funktio nimeltä deleteUser(). Tämä toiminto ottaa poistettavan tietueen tunnuksen.

   deleteUser (_id: mikä tahansa) {
    this.db.doc(`Käyttäjä/${_id}`).delete();
    }
   

2. Yllä olevaa toimintoa voidaan sitten käyttää muissa TypeScript-tiedostoissa.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Hae Firebase-tietoja kyselyjen ja suodattimien avulla

"Missä"-suodatin voi suodattaa palautetut tulokset tietyn ehdon perusteella.

1. Luo Services.ts: ssä funktio, joka saa kaikki VIP-käyttäjät (tämä on jos vipMember-kentän arvo on tosi). Tämä osoitetaan Firebase-kutsun alla olevalla osalla "ref.where('vipMember', '==', true)".

   getAllVipMembers() {
    palauta uusi lupaus((ratkaise)=> {
    this.db.collection('Käyttäjä', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (käyttäjät => ratkaise (käyttäjät))
    })
    }

2. Käytä tätä toimintoa toisessa TypseScript-tiedostossa.

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

3. Kyselyä voidaan muokata lisäämään muita toimintoja, kuten Järjestä, Aloita tai Rajoitus. Muokkaa getAllVipMembers()-funktiota services.ts: ssä sukunimen mukaan. Order By -toiminto saattaa edellyttää indeksin luomista Firebasessa. Jos näin on, napsauta konsolin virheilmoituksessa olevaa linkkiä.

   getAllVipMembers() {
    palauta uusi lupaus((ratkaise)=> {
    this.db.collection('Käyttäjä', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (käyttäjät => ratkaise (käyttäjät) )
    })
    }

4. Muokkaa kyselyä niin, että se palauttaa vain kolme ensimmäistä tietuetta. Tätä varten voidaan käyttää Start At- ja Limit -operaatioita. Tämä on hyödyllistä, jos sinun on otettava käyttöön sivutus, jolloin sivulla näytetään tietty määrä tietueita.

   getAllVipMembers() {
    palauta uusi lupaus((ratkaise)=> {
    this.db.collection('Käyttäjä', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (käyttäjät => ratkaise (käyttäjät))
    })
    }

Lisää tietoja Firebaseen ja lisää pyyntöjä Angular-sovelluksessa

Voit tutkia monia muita kyselyyhdistelmiä yrittäessäsi noutaa tietoja Firebase-tietokannasta. Toivottavasti ymmärrät nyt yksinkertaisen Firebase-tietokannan luomisen, sen yhdistämisen paikalliseen Angular-sovellukseen ja tietokannan lukemiseen ja kirjoittamiseen.

Saat myös lisätietoja muista Firebasen tarjoamista palveluista. Firebase on yksi monista alustoista, jotka voit integroida Angulariin, ja riippumatta siitä, oletko aloittelija vai edistynyt, opittavaa on aina niin paljon.

8 parasta kulmakurssia aloittelijoille ja kokeneille käyttäjille

Lue Seuraava

Kirjailijasta