Hvordan lagre, oppdatere, slette og hente data fra en Firebase-database ved å bruke Angular

Firebase er en plattform som gir deg en rekke tjenester for å hjelpe deg med å bygge og skalere en applikasjon. Noen av disse funksjonene inkluderer vertstjenester, datalagring og muligheten til å spore dataanalyse.

Denne opplæringen fokuserer hovedsakelig på hvordan du oppretter og legger til data i en Firebase-database, og hvordan du utfører opprettelse, lesing, skriving og sletting av databasen fra en lokal Angular-applikasjon.

Hvordan lage og legge til data i en Firebase-database

Forutsatt at du allerede har en Angular-applikasjon satt opp og kjører lokalt, må den kobles til en Firebase-database for å lagre og få tilgang til data. Hvis du ikke er kjent med Angular, kan du lese mer om Vinkelkonsepter, komponenter og den overordnede strukturen til et vinkelprosjekt.

Hvis du ikke allerede har en Firebase-database, kan du bruke Google-kontolegitimasjonen din til å logge på Firebase og følge instruksjonene. Når dette er satt opp, lag et prosjekt:

1. Fra Firebase sin hjemmeside, plukke ut Gå til konsoll øverst til høyre på nettstedet.
instagram viewer
2. Velg under «Dine Firebase-prosjekter». Legg til prosjekt.
3. Følg instruksjonene for å opprette et nytt prosjekt.
4. Når prosjektet er fullført, åpnes det. På venstre side av skjermen er det et panel som viser funksjonene Firebase tilbyr. Hold musepekeren over ikonene til du ser Firestore-database, og velg den.
5. Plukke ut Lag database, og følg instruksjonene for å opprette en database.
6. Når du velger sikkerhetsreglene, velg Start i testmodus. Dette kan endres senere for å sikre at dataene er sikrere. Du kan lese mer om Firestore-sikkerhetsregler ved å følge Firebase-dokumentasjon.
7. Når den er fullført, åpnes databasen. Databasestrukturen bruker samlinger, som i hovedsak er det samme konseptet som databasetabeller. Hvis du for eksempel trengte to tabeller, en for å lagre kontoinformasjon og en for å lagre brukerinformasjon, ville du opprette to samlinger kalt Konto og Bruker.
8. Plukke ut Start innsamlingen og legg til en samlings-ID kalt "Bruker".
9. Legg til den første posten, med informasjon om én bruker. Klikk på Legg til felt for å legge til tre nye felt: fornavn (streng), etternavn (streng) og vipMember (boolsk). Dokument-ID-en kan genereres automatisk.
10. Klikk Lagre.
11. For å legge til flere poster i «Bruker»-samlingen, klikk på Legg til dokument (legg til dokument tilsvarer å legge til en ny post eller bruker). Legg til ytterligere fire brukere med de samme tre feltene.

Databasen er nå satt opp med noen testdata.

Slik integrerer du Firebase i Angular-applikasjonen din

For å få tilgang til disse dataene i din lokale Angular-applikasjon, konfigurer først noen appinnstillinger for å koble til Firebase-databasen:

1. I Firebase, gå til venstre panel og klikk på prosjekt oversikt.
2. Velg Web knapp (indikert med vinkelparenteser).
3. Registrer din lokale app ved å legge til navnet på appen.
4. Installer Firebase i din lokale Angular-applikasjon.

   npm i firebase
   

5. Firebase vil da vise noen konfigurasjonsdetaljer. Lagre disse detaljene og klikk Fortsett til konsoll.
6. Basert på detaljene i forrige trinn, kopier følgende kode til environment.prod.ts og environment.ts i Angular-applikasjonen.

   eksport konst miljø = {
    produksjon: sant,
    firebaseConfig: {
    apiKey: "din-api-nøkkel",
    authDomain: "ditt-auth-domene",
    projectId: "din-prosjekt-ID",
    storageBucket: "din-lagringsbøtte",
    messagingSenderId: "din-meldingssender-id",
    appId: "din-api-id",
    measurementId: "din-måle-ID"
    }
   };
   

7. AngularFirestore fra @angular/fire/firestore vil bli brukt til å konfigurere Firebase i Angular. Merk at AngularFirestore ikke er kompatibel med Angular versjon 9 og nyere. I den lokale Angular-appen, kjør:

   npm i @angular/brann
   

8. Legg Firestore- og miljømodulene til importseksjonen i app.module.ts.

   importer { AngularFireModule } fra "@angular/fire";
   importer { AngularFirestoreModule } fra "@angular/fire/firestore";
   importer { miljø } fra "../environments/environment";
   

9. Firestore-modulene må også inkluderes i importmatrisen i app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Slik henter du data fra Firebase ved hjelp av en tjeneste

Det er vanligvis god praksis å ha en eller flere tjenester.ts filer som du bruker til spesifikt samhandling med databasen. Funksjonene du legger til i tjenestefilen kan deretter kalles i andre TypeScript-filer, sider eller andre komponenter i hele applikasjonen.

1. Opprett en fil kalt service.ts i src/app/tjenester mappe.
2. Legg til AngularFirestore-modulen til importseksjonen, og inkluder den i konstruktøren.

   importer { Injectable } fra '@angular/core';
   importer { AngularFirestore } fra '@angular/fire/firestore';
   @Injiserbar({
    providerIn: 'root'
   })
   eksportklasse Tjeneste {
    konstruktør (privat db: AngularFirestore) { }
   }
   

3. Legg til en funksjon som returnerer et løfte som inneholder en liste over alle brukere. "this.db.collection('Bruker')" refererer til "Bruker"-samlingen i databasen.

   getAllUsers() {
    returnere nytt løfte((løse)=> {
    this.db.collection('Bruker').valueChanges({ idField: 'id' }).subscribe (brukere => løse (brukere));
    })
   }
   

4. For å bruke denne funksjonen i en annen TypeScript-fil, importer den nye tjenesten og legg den til konstruktøren.

   importer { Service } fra 'src/app/services/service
   konstruktør (privat tjeneste: tjeneste) {}
   

5. Få listen over alle brukere som bruker funksjonen opprettet i tjenestefilen.

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

Slik legger du til en ny post i Firebase-databasen

Legg til en ny oppføring for en bruker i Firebase-databasen.

1. I services.ts, legg til en ny funksjon for å opprette en ny post. Denne funksjonen tar inn en ny brukers ID og alle detaljer. Den bruker Firestores set-funksjon for å sende denne informasjonen til Firebase og opprette en ny post.

   addNewUser (_newId: any, _fName: string, _lName: string, _vip: boolean) {
    this.db.collection("Bruker").doc (_newId).set({fornavn: _fName, etternavn: _lName, vipMember: _vip});
   }

2. Kall funksjonen addNewUser() i en annen TypeScript-fil. Ikke glem å importere tjenesten og inkludere den i konstruktøren, som vist tidligere. Bruk gjerne en tilfeldig ID-generator for å lage den nye IDen for brukeren.

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

Slik oppdaterer du data i Firebase-databasen

Firebase har mange funksjoner som gjør det til et av de beste tilgjengelige verktøyene. For å oppdatere visse felt i en bestemt post, bruk Firestores oppdateringsfunksjon.

1. I service.ts-filen oppretter du en funksjon kalt updateUserFirstName(). Denne funksjonen vil oppdatere fornavnet til en valgt brukerpost. Funksjonen tar inn IDen til posten som må oppdateres, og den nye verdien for brukerens fornavn.

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

2. For å oppdatere flere felt for samme post, utvider du bare feltene som legges inn i Firestores oppdateringsfunksjon. I stedet for bare fornavn, legg til etternavn for å oppdatere det med en ny verdi også.

   updateUserFullName (_id: any, _firstName: string, _lastName: string) {
    this.db.doc(`Bruker/${_id}`).update({fornavn: _fornavn, etternavn: _etternavn});
   }

3. Enhver av funksjonene ovenfor kan brukes i andre TypeScript-filer.

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

Slik sletter du en post fra Firebase-databasen

For å slette en post, bruk Firestores slettefunksjon.

1. I service.ts-filen oppretter du en funksjon kalt deleteUser(). Denne funksjonen tar inn IDen til posten som må slettes.

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

2. Funksjonen ovenfor kan deretter brukes i andre TypeScript-filer.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Hent Firebase-data ved å bruke spørringer og filtre

"Hvor"-filteret kan filtrere resultatene som returneres basert på en bestemt betingelse.

1. I services.ts oppretter du en funksjon som får alle VIP-brukere (dette er hvis vipMember-feltet er satt til true). Dette indikeres av "ref.where('vipMember', '==', true)"-delen av Firebase-kallet nedenfor.

   getAllVipMembers() {
    returnere nytt løfte((løse)=> {
    this.db.collection('Bruker', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (brukere => løse (brukere))
    })
    }

2. Bruk denne funksjonen i en annen TypseScript-fil.

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

3. Spørringen kan endres for å legge til andre operasjoner som Bestill etter, Start ved eller Begrens. Endre getAllVipMembers()-funksjonen i services.ts for å bestille etter etternavnet. Bestill etter-operasjonen kan kreve at en indeks opprettes i Firebase. Hvis dette er tilfelle, klikker du på lenken i feilmeldingen i konsollen.

   getAllVipMembers() {
    returnere nytt løfte((løse)=> {
    this.db.collection('Bruker', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (brukere => resolve (brukere) )
    })
    }

4. Endre spørringen slik at den bare returnerer de tre første postene. Start At og Limit-operasjonene kan brukes til dette. Dette er nyttig hvis du trenger å implementere personsøking, som er når et visst antall poster vises per side.

   getAllVipMembers() {
    returnere nytt løfte((løse)=> {
    this.db.collection('Bruker', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (brukere => løse (brukere))
    })
    }

Legg til flere data i Firebase og flere forespørsler i Angular-appen

Det er mange andre spørringskombinasjoner du kan utforske når du prøver å hente data fra en Firebase-database. Forhåpentligvis forstår du nå hvordan du setter opp en enkel Firebase-database, hvordan du kobler den til en lokal Angular-applikasjon og hvordan du leser og skriver til databasen.

Du kan også lære mer om de andre tjenestene Firebase tilbyr. Firebase er en av de mange plattformene du kan integrere med Angular, og uansett om du er på nybegynner- eller avansert nivå, er det alltid så mye mer å lære.

Topp 8 vinkelkurs for nybegynnere og avanserte brukere

Les Neste

Om forfatteren