Sådan gemmer, opdaterer, sletter og henter data fra en Firebase-database ved hjælp af Angular

Firebase er en platform, der giver dig et væld af tjenester til at hjælpe med at bygge og skalere en applikation. Nogle af disse funktioner inkluderer hostingtjenester, datalagring og muligheden for at spore dataanalyse.

Denne vejledning fokuserer hovedsageligt på, hvordan man opretter og tilføjer data til en Firebase-database, og hvordan man udfører oprettelse, læsning, skrivning og sletning af databasen fra en lokal Angular-applikation.

Sådan oprettes og tilføjes data til en Firebase-database

Forudsat at du allerede har en Angular-applikation sat op og kører lokalt, skal den være forbundet til en Firebase-database for at kunne gemme og få adgang til data. Hvis du ikke er bekendt med Angular, kan du læse mere om Vinkelkoncepter, komponenter og den overordnede struktur af et vinkelprojekt.

Hvis du ikke allerede har en Firebase-database, kan du bruge dine Google-kontooplysninger til at logge ind på Firebase og følge vejledningen. Når dette er sat op, skal du oprette et projekt:

1. Fra Firebases hjemmeside, Vælg Gå til konsol i øverste højre hjørne af webstedet.
instagram viewer
2. Vælg under "Dine Firebase-projekter". Tilføj projekt.
3. Følg vejledningen for at oprette et nyt projekt.
4. Når projektet er afsluttet, åbnes det. På venstre side af skærmen er der et panel, der viser de funktioner, Firebase tilbyder. Hold markøren over ikonerne, indtil du ser Firestore database, og vælg det.
5. Vælg Opret database, og følg vejledningen for at oprette en database.
6. Når du vælger sikkerhedsreglerne, skal du vælge Start i testtilstand. Dette kan ændres senere for at sikre, at dataene er mere sikre. Du kan læse mere om Firestore sikkerhedsregler ved at følge Firebase dokumentation.
7. Når det er afsluttet, åbnes databasen. Databasestrukturen bruger samlinger, hvilket i det væsentlige er det samme koncept som databasetabeller. Hvis du f.eks. havde brug for to tabeller, en til at gemme kontooplysninger og en til at gemme brugeroplysninger, ville du oprette to samlinger med navnet Konto og Bruger.
8. Vælg Start indsamling og tilføje et samlings-id kaldet "Bruger".
9. Tilføj den første post med oplysninger om én bruger. Klik på Tilføj felt for at tilføje tre nye felter: fornavn (streng), efternavn (streng) og vipMember (boolesk). Dokument-ID'et kan automatisk genereres.
10. Klik Gemme.
11. Klik på for at tilføje flere poster til samlingen "Bruger". Tilføj dokument (tilføj dokument svarer til at tilføje en ny post eller bruger). Tilføj yderligere fire brugere med de samme tre felter.

Databasen er nu sat op med nogle testdata.

Sådan integrerer du Firebase i din Angular-applikation

For at få adgang til disse data i din lokale Angular-applikation skal du først konfigurere nogle appindstillinger for at oprette forbindelse til Firebase-databasen:

1. I Firebase skal du gå til panelet til venstre og klikke på Projektoversigt.
2. Vælg Web knap (angivet med vinkelparenteser).
3. Registrer din lokale app ved at tilføje navnet på appen.
4. Installer Firebase i din lokale Angular-applikation.

   npm i firebase
   

5. Firebase vil derefter vise nogle konfigurationsdetaljer. Gem disse detaljer og klik Fortsæt til konsol.
6. Baseret på detaljerne i det foregående trin, kopier følgende kode til environment.prod.ts og environment.ts i Angular-applikationen.

   eksport const miljø = {
    produktion: sandt,
    firebaseConfig: {
    apiKey: "din-api-nøgle",
    authDomain: "dit-auth-domæne",
    projectId: "dit-projekt-id",
    storageBucket: "din-storage-buckey",
    messagingSenderId: "dit-besked-afsender-id",
    appId: "dit-api-id",
    measurementId: "dit-måle-id"
    }
   };
   

7. AngularFirestore fra @angular/fire/firestore vil blive brugt til at konfigurere Firebase i Angular. Bemærk, at AngularFirestore ikke er kompatibel med Angular version 9 og nyere. I den lokale Angular-app skal du køre:

   npm i @angular/ild
   

8. Tilføj Firestore- og miljømodulerne til importsektionen i app.module.ts.

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

9. Firestore-modulerne skal også inkluderes i import-arrayet i app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Sådan henter du data fra Firebase ved hjælp af en tjeneste

Det er normalt god praksis at have en eller flere tjenester.ts filer, som du bruger til specifikt at interagere med databasen. De funktioner, du tilføjer til servicefilen, kan derefter kaldes i andre TypeScript-filer, sider eller andre komponenter i hele applikationen.

1. Opret en fil kaldet service.ts i src/app/tjenester folder.
2. Tilføj AngularFirestore-modulet til importsektionen, og medtag det i konstruktøren.

   importer { Injicerbar } fra '@angular/kerne';
   importer { AngularFirestore } fra '@angular/fire/firestore';
   @Injicerbar({
    providerIn: 'root'
   })
   eksportklasse Service {
    konstruktør (privat db: AngularFirestore) { }
   }
   

3. Tilføj en funktion, der returnerer et løfte, der indeholder en liste over alle brugere. "this.db.collection('Bruger')" henviser til "Bruger"-samlingen i databasen.

   getAllUsers() {
    returnere nyt løfte((løse)=> {
    this.db.collection('Bruger').valueChanges({ idField: 'id' }).subscribe (brugere => resolve (brugere));
    })
   }
   

4. For at bruge denne funktion i en anden TypeScript-fil skal du importere den nye tjeneste og tilføje den til konstruktøren.

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

5. Få listen over alle brugere ved hjælp af funktionen oprettet i servicefilen.

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

Sådan tilføjer du en ny post til Firebase-databasen

Tilføj en ny registrering for en bruger til Firebase-databasen.

1. Tilføj en ny funktion i services.ts for at oprette en ny post. Denne funktion tager en ny brugers ID og alle deres detaljer ind. Den bruger Firestores sætfunktion til at sende disse oplysninger til Firebase og oprette en ny post.

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

2. Kald funktionen addNewUser() i en anden TypeScript-fil. Glem ikke at importere tjenesten og inkludere den i konstruktøren, som vist tidligere. Brug gerne en tilfældig ID-generator til at oprette det nye ID til brugeren.

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

Sådan opdaterer du data i Firebase-databasen

Firebase har masser af funktioner gør det til et af de bedste tilgængelige værktøjer. For at opdatere bestemte felter i en bestemt post skal du bruge Firestores opdateringsfunktion.

1. I filen service.ts skal du oprette en funktion kaldet updateUserFirstName(). Denne funktion vil opdatere fornavnet på en valgt brugerpost. Funktionen indtager ID'et for den post, der skal opdateres, og den nye værdi for brugerens fornavn.

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

2. For at opdatere flere felter for den samme post, skal du blot udvide de felter, der indtastes i Firestores opdateringsfunktion. I stedet for kun fornavn skal du tilføje efternavn for også at opdatere det med en ny værdi.

   updateUserFullName (_id: any, _firstName: string, _lastName: string) {
    this.db.doc(`Bruger/${_id}`).update({fornavn: _fornavn, efternavn: _efternavn});
   }

3. Enhver af ovenstående funktioner kan bruges i andre TypeScript-filer.

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

Sådan sletter du en post fra Firebase-databasen

For at slette en post skal du bruge Firestores slettefunktion.

1. I filen service.ts skal du oprette en funktion kaldet deleteUser(). Denne funktion indtager ID'et for den post, der skal slettes.

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

2. Ovenstående funktion kan derefter bruges i andre TypeScript-filer.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Hent Firebase-data ved hjælp af forespørgsler og filtre

"Hvor"-filteret kan filtrere de resultater, der returneres baseret på en specifik betingelse.

1. I services.ts skal du oprette en funktion, der får alle VIP-brugere (dette er hvis vipMember-feltet er sat til sand). Dette er angivet af "ref.where('vipMember', '==', true)"-delen af ​​Firebase-kaldet nedenfor.

   getAllVipMembers() {
    returnere nyt løfte((løse)=> {
    this.db.collection('Bruger', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (brugere => resolve (brugere))
    })
    }

2. Brug denne funktion i en anden TypseScript-fil.

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

3. Forespørgslen kan ændres for at tilføje andre operationer såsom Bestil efter, Start ved eller Begræns. Rediger funktionen getAllVipMembers() i services.ts for at sortere efter efternavnet. Bestil efter-handlingen kræver muligvis, at der oprettes et indeks i Firebase. Hvis dette er tilfældet, skal du klikke på linket i fejlmeddelelsen i konsollen.

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

4. Rediger forespørgslen til kun at returnere de første tre poster. Operationerne Start ved og Limit kan bruges til dette. Dette er nyttigt, hvis du skal implementere sidesøgning, hvilket er, når et vist antal poster vises pr. side.

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

Tilføj flere data til Firebase og flere anmodninger i Angular-appen

Der er mange andre forespørgselskombinationer, du kan udforske, når du forsøger at hente data fra en Firebase-database. Forhåbentlig forstår du nu, hvordan man opsætter en simpel Firebase-database, hvordan man forbinder den til en lokal Angular-applikation, og hvordan man læser og skriver til databasen.

Du kan også lære mere om de andre tjenester, som Firebase leverer. Firebase er en af ​​de mange platforme, du kan integrere med Angular, og uanset om du er på begynder- eller avanceret niveau, er der altid så meget mere at lære.

Top 8 vinkelkurser for begyndere og avancerede brugere

Læs Næste

Om forfatteren