Hur man lagrar, uppdaterar, tar bort och hämtar data från en Firebase-databas med Angular

Firebase är en plattform som ger dig en mängd tjänster för att hjälpa dig att bygga och skala en applikation. Några av dessa funktioner inkluderar värdtjänster, datalagring och möjligheten att spåra dataanalys.

Den här handledningen fokuserar huvudsakligen på hur man skapar och lägger till data i en Firebase-databas, och hur man skapar, läser, skriver och tar bort operationer till databasen från en lokal Angular-applikation.

Hur man skapar och lägger till data till en Firebase-databas

Förutsatt att du redan har en Angular-applikation installerad och körs lokalt, måste den vara ansluten till en Firebase-databas för att kunna lagra och komma åt data. Om du inte är bekant med Angular kan du läsa mer om Vinkelkoncept, komponenter och den övergripande strukturen för ett vinkelprojekt.

Om du inte redan har en Firebase-databas kan du använda dina Google-kontouppgifter för att logga in på Firebase och följa anvisningarna. När detta är konfigurerat skapar du ett projekt:

1. Från Firebases hemsida, Välj Gå till konsolen i det övre högra hörnet av webbplatsen.
instagram viewer
2. Välj under "Dina Firebase-projekt". Lägg till projekt.
3. Följ anvisningarna för att skapa ett nytt projekt.
4. När projektet är klart öppnas det. På vänster sida av skärmen finns en panel som listar funktionerna som Firebase tillhandahåller. Håll muspekaren över ikonerna tills du ser Firestore-databas, och välj den.
5. Välj Skapa databas, och följ anvisningarna för att skapa en databas.
6. När du väljer säkerhetsregler, välj Starta i testläge. Detta kan ändras senare för att säkerställa att data är säkrare. Du kan läsa mer om Firestore säkerhetsregler genom att följa Firebase dokumentation.
7. När det är klart öppnas databasen. Databasstrukturen använder samlingar, vilket i huvudsak är samma koncept som databastabeller. Om du till exempel behövde två tabeller, en för att lagra kontoinformation och en för att lagra användarinformation, skulle du skapa två samlingar med namnet Konto och Användare.
8. Välj Starta insamlingen och lägg till ett samlings-ID som heter "Användare".
9. Lägg till den första posten, med information om en användare. Klicka på Lägg till fält för att lägga till tre nya fält: förnamn (sträng), efternamn (sträng) och vipMember (boolean). Dokument-ID kan genereras automatiskt.
10. Klick Spara.
11. För att lägga till fler poster till samlingen "Användare", klicka på Lägg till dokument (lägg till dokument motsvarar att lägga till en ny post eller användare). Lägg till ytterligare fyra användare med samma tre fält.

Databasen är nu inställd med en del testdata.

Hur man integrerar Firebase i din Angular-applikation

För att komma åt dessa data i din lokala Angular-applikation, konfigurera först några appinställningar för att ansluta till Firebase-databasen:

1. I Firebase, gå till den vänstra panelen och klicka på Projekt Överblick.
2. Välj webb knapp (indikeras med vinkelparenteser).
3. Registrera din lokala app genom att lägga till namnet på appen.
4. Installera Firebase i din lokala Angular-applikation.

   npm i firebase
   

5. Firebase visar sedan några konfigurationsdetaljer. Spara dessa uppgifter och klicka Fortsätt till konsolen.
6. Baserat på informationen i föregående steg, kopiera följande kod till environment.prod.ts och environment.ts i Angular-applikationen.

   export const miljö = {
    produktion: sant,
    firebaseConfig: {
    apiKey: "din-api-nyckel",
    authDomain: "din-auth-domän",
    projectId: "ditt-projekt-id",
    storageBucket: "din-lagringsbock",
    messagingSenderId: "ditt-meddelande-avsändare-id",
    appId: "ditt-api-id",
    measurementId: "ditt-mått-id"
    }
   };
   

7. AngularFirestore från @angular/fire/firestore kommer att användas för att konfigurera Firebase i Angular. Observera att AngularFirestore inte är kompatibel med Angular version 9 och senare. I den lokala Angular-appen, kör:

   npm i @angular/eld
   

8. Lägg till Firestore- och miljömodulerna i importsektionen i app.module.ts.

   importera { AngularFireModule } från "@angular/fire";
   importera { AngularFirestoreModule } från "@angular/fire/firestore";
   importera { miljö } från "../environments/environment";
   

9. Firestore-modulerna måste också inkluderas i importmatrisen i app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Hur man hämtar data från Firebase med hjälp av en tjänst

Det är vanligtvis bra att ha en eller flera tjänster.ts filer som du använder för att specifikt interagera med databasen. Funktionerna du lägger till i servicefilen kan sedan anropas i andra TypeScript-filer, sidor eller andra komponenter i hela applikationen.

1. Skapa en fil som heter service.ts i src/app/tjänster mapp.
2. Lägg till AngularFirestore-modulen i importsektionen och inkludera den i konstruktorn.

   importera { Injicerbar } från '@angular/core';
   importera { AngularFirestore } från '@angular/fire/firestore';
   @Injicerbar({
    providerIn: 'root'
   })
   exportklass Service {
    konstruktor (privat db: AngularFirestore) { }
   }
   

3. Lägg till en funktion som returnerar ett löfte som innehåller en lista över alla användare. "this.db.collection('Användare')" hänvisar till samlingen "Användare" i databasen.

   getAllUsers() {
    returnera nytt löfte((lösa)=> {
    this.db.collection('Användare').valueChanges({ idField: 'id' }).subscribe (users => resolve (users));
    })
   }
   

4. För att använda den här funktionen i en annan TypeScript-fil, importera den nya tjänsten och lägg till den i konstruktorn.

   importera { Service } från 'src/app/services/service
   konstruktör (privat tjänst: tjänst) {}
   

5. Få listan över alla användare som använder funktionen som skapats i tjänstefilen.

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

Hur man lägger till en ny post i Firebase-databasen

Lägg till en ny post för en användare i Firebase-databasen.

1. I services.ts, lägg till en ny funktion för att skapa en ny post. Denna funktion tar in en ny användares ID och alla deras uppgifter. Den använder Firestores set-funktion för att skicka den informationen till Firebase och skapa en ny post.

   addNewUser (_newId: any, _fName: string, _lName: string, _vip: boolean) {
    this.db.collection("Användare").doc (_newId).set({firstName: _fName, lastName: _lName, vipMember: _vip});
   }

2. Anropa addNewUser()-funktionen i en annan TypeScript-fil. Glöm inte att importera tjänsten och inkludera den i konstruktorn, som visats tidigare. Använd gärna en slumpmässig ID-generator för att skapa det nya ID: t för användaren.

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

Hur man uppdaterar data i Firebase-databasen

Firebase har massor av funktioner som gör det till ett av de bästa tillgängliga verktygen. För att uppdatera vissa fält i en viss post, använd Firestores uppdateringsfunktion.

1. Skapa en funktion som heter updateUserFirstName() i filen service.ts. Denna funktion kommer att uppdatera förnamnet på en vald användarpost. Funktionen tar in ID: t för posten som behöver uppdateras, och det nya värdet för användarens förnamn.

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

2. För att uppdatera flera fält för samma post, expandera bara på fälten som skrivs in i Firestores uppdateringsfunktion. Istället för bara firstName, lägg till lastName för att uppdatera det med ett nytt värde också.

   updateUserFullName (_id: any, _firstName: string, _lastName: string) {
    this.db.doc(`Användare/${_id}`).update({förnamn: _förnamn, efternamn: _efternamn});
   }

3. Vilken som helst av ovanstående funktioner kan användas i andra TypeScript-filer.

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

Hur man tar bort en post från Firebase-databasen

För att radera en post, använd Firestores raderingsfunktion.

1. Skapa en funktion som heter deleteUser() i filen service.ts. Denna funktion tar in ID: t för posten som måste raderas.

   deleteUser (_id: någon) {
    this.db.doc(`User/${_id}`).delete();
    }
   

2. Ovanstående funktion kan sedan användas i andra TypeScript-filer.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Hämta Firebase-data med hjälp av frågor och filter

Filtret "var" kan filtrera resultaten som returneras baserat på ett specifikt villkor.

1. Skapa en funktion i services.ts som får alla VIP-användare (detta är om vipMember-fältet är satt till true). Detta indikeras av "ref.where('vipMember', '==', true)"-delen av Firebase-anropet nedan.

   getAllVipMembers() {
    returnera nytt löfte((lösa)=> {
    this.db.collection('Användare', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (användare => lösa (användare))
    })
    }

2. Använd den här funktionen i en annan TypseScript-fil.

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

3. Frågan kan ändras för att lägga till andra operationer som Order By, Start At eller Limit. Ändra funktionen getAllVipMembers() i services.ts för att sortera efter efternamn. Order By-operationen kan kräva att ett index skapas i Firebase. Om så är fallet, klicka på länken i felmeddelandet i konsolen.

   getAllVipMembers() {
    returnera nytt löfte((lösa)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (users => resolve (users) )
    })
    }

4. Ändra frågan så att den endast returnerar de tre första posterna. Operationerna Start At och Limit kan användas för detta. Detta är användbart om du behöver implementera personsökning, vilket är när ett visst antal poster visas per sida.

   getAllVipMembers() {
    returnera nytt löfte((lösa)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (användare => lösa (användare))
    })
    }

Lägg till mer data i Firebase och fler förfrågningar i Angular-appen

Det finns många andra frågekombinationer du kan utforska när du försöker hämta data från en Firebase-databas. Förhoppningsvis förstår du nu hur man ställer in en enkel Firebase-databas, hur man ansluter den till en lokal Angular-applikation och hur man läser och skriver till databasen.

Du kan också lära dig mer om de andra tjänster som Firebase tillhandahåller. Firebase är en av många plattformar du kan integrera med Angular, och oavsett om du är på nybörjar- eller avancerad nivå finns det alltid så mycket mer att lära.

Topp 8 vinkelkurser för nybörjare och avancerade användare

Läs Nästa

Om författaren