Gegevens opslaan, bijwerken, verwijderen en ophalen uit een Firebase-database met Angular

Firebase is een platform dat u een groot aantal services biedt om u te helpen bij het bouwen en schalen van een applicatie. Sommige van deze functies omvatten hostingservices, gegevensopslag en de mogelijkheid om gegevensanalyses bij te houden.

Deze zelfstudie richt zich voornamelijk op het maken en toevoegen van gegevens aan een Firebase-database en het uitvoeren van bewerkingen voor het maken, lezen, schrijven en verwijderen van de database vanuit een lokale Angular-toepassing.

Gegevens maken en toevoegen aan een Firebase-database

Ervan uitgaande dat u al een Angular-toepassing hebt die lokaal is ingesteld en wordt uitgevoerd, moet deze worden verbonden met een Firebase-database om gegevens op te slaan en te openen. Als u niet bekend bent met Angular, kunt u meer lezen over: Angular-concepten, componenten en de algemene structuur van een Angular-project.

Als u nog geen Firebase-database heeft, kunt u de inloggegevens van uw Google-account gebruiken om u aan te melden bij Firebase en de aanwijzingen te volgen. Zodra dit is ingesteld, maakt u een project aan:

1. Van De startpagina van Firebase, selecteer Ga naar console in de rechterbovenhoek van de site.
2. Selecteer onder "Uw Firebase-projecten" Project toevoegen.
3. Volg de aanwijzingen om een ​​nieuw project te maken.
4. Na voltooiing wordt het project geopend. Aan de linkerkant van het scherm bevindt zich een paneel met de functies die Firebase biedt. Plaats de muisaanwijzer op de pictogrammen totdat u ziet Firestore-databaseen selecteer het.
5. Selecteer database maken, en volg de aanwijzingen om een ​​database te maken.
6. Selecteer bij het selecteren van de beveiligingsregels: Start in testmodus. Dit kan later worden gewijzigd om ervoor te zorgen dat de gegevens veiliger zijn. U kunt meer lezen over Firestore-beveiligingsregels volgens de: Firebase-documentatie.
7. Na voltooiing wordt de database geopend. De databasestructuur maakt gebruik van Collecties, wat in wezen hetzelfde concept is als databasetabellen. Als u bijvoorbeeld twee tabellen nodig heeft, één om accountgegevens op te slaan en één om gebruikersgegevens op te slaan, maakt u twee verzamelingen met de namen Account en Gebruiker.
8. Selecteer Verzamelen starten en voeg een collectie-ID toe met de naam "Gebruiker".
9. Voeg het eerste record toe, met informatie over één gebruiker. Klik op Voeg veld toe om drie nieuwe velden toe te voegen: firstName (string), lastName (string) en vipMember (boolean). De document-ID kan automatisch worden gegenereerd.
10. Klik Opslaan.
11. Om meer records toe te voegen aan de "Gebruiker" collectie, klik op Document toevoegen (document toevoegen is het equivalent van het toevoegen van een nieuw record of nieuwe gebruiker). Voeg nog vier gebruikers toe met dezelfde drie velden.

De database is nu ingesteld met enkele testgegevens.

Hoe Firebase in uw hoekapplicatie te integreren

Om toegang te krijgen tot deze gegevens in uw lokale Angular-toepassing, moet u eerst enkele app-instellingen configureren om verbinding te maken met de Firebase-database:

1. Ga in Firebase naar het linkerdeelvenster en klik op Projectoverzicht.
2. Selecteer de Web knop (aangegeven door punthaken).
3. Registreer uw lokale app door de naam van de app toe te voegen.
4. Installeer Firebase in uw lokale Angular-toepassing.

   npm ik vuurbasis
   

5. Firebase geeft dan enkele configuratiedetails weer. Bewaar deze gegevens en klik op Doorgaan naar console.
6. Kopieer op basis van de details in de vorige stap de volgende code naar environment.prod.ts en environment.ts in de Angular-toepassing.

   export const omgeving = {
    productie: waar,
    firebaseConfig: {
    apiKey: "uw-api-sleutel",
    authDomain: "uw-auth-domein",
    projectId: "uw-project-id",
    storageBucket: "uw-opslag-buckey",
    messagingSenderId: "uw-berichten-afzender-id",
    appId: "uw-api-id",
    MeasurementId: "uw-meet-ID"
    }
   };
   

7. AngularFirestore van @hoekig/vuur/vuurplaats wordt gebruikt om Firebase in Angular te configureren. Merk op dat AngularFirestore niet compatibel is met Angular versie 9 en hoger. Voer in de lokale Angular-app uit:

   npm i @hoekig/vuur
   

8. Voeg de Firestore- en omgevingsmodules toe aan de importsectie in app.module.ts.

   importeer {AngularFireModule} van "@angular/fire";
   importeer {AngularFirestoreModule} van "@angular/fire/firestore";
   importeer {omgeving } uit "../environments/environment";
   

9. De Firestore-modules moeten ook worden opgenomen in de importarray in app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Gegevens ophalen uit Firebase met behulp van een service

Het is meestal een goede gewoonte om er één of meerdere te hebben diensten.ts bestanden die u gebruikt om specifiek met de database te communiceren. De functies die u aan het servicesbestand toevoegt, kunnen vervolgens worden aangeroepen in andere TypeScript-bestanden, pagina's of andere componenten in de hele toepassing.

1. Maak een bestand met de naam service.ts in de src/app/services map.
2. Voeg de AngularFirestore-module toe aan de importsectie en neem deze op in de constructor.

   importeer { Injectable } van '@angular/core';
   importeer {AngularFirestore} van '@angular/fire/firestore';
   @Injecteerbaar({
    verstrektIn: 'root'
   })
   exportklasse Dienst {
    constructor (private db: AngularFirestore) { }
   }
   

3. Voeg een functie toe die een belofte retourneert die een lijst van alle gebruikers bevat. "deze.db.collection('Gebruiker')" verwijst naar de verzameling "Gebruiker" in de database.

   getAllUsers() {
    retourneer nieuwe belofte((oplossen)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (users => resolve (users));
    })
   }
   

4. Om deze functie in een ander TypeScript-bestand te gebruiken, importeert u de nieuwe service en voegt u deze toe aan de constructor.

   importeer { Service } van 'src/app/services/service
   constructeur (privédienst: Dienst) {}
   

5. Verkrijg de lijst van alle gebruikers die de functie gebruiken die is gemaakt in het services-bestand.

   asynchrone getUsers() {
    this.allUsers = wacht op this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Een nieuw record toevoegen aan de Firebase-database

Voeg een nieuw record voor een gebruiker toe aan de Firebase-database.

1. Voeg in services.ts een nieuwe functie toe om een ​​nieuw record aan te maken. Deze functie neemt de ID van een nieuwe gebruiker en al hun details op. Het gebruikt de set-functie van Firestore om die informatie naar Firebase te sturen en een nieuw record te maken.

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

2. Roep de functie addNewUser() aan in een ander TypeScript-bestand. Vergeet niet om de service te importeren en op te nemen in de constructor, zoals eerder getoond. Voel je vrij om een ​​willekeurige ID-generator te gebruiken om de nieuwe ID voor de gebruiker te maken.

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

Gegevens bijwerken in de Firebase-database

Firebase heeft veel functies die: maak het een van de beste beschikbare tools. Gebruik de updatefunctie van Firestore om bepaalde velden in een bepaald record bij te werken.

1. Maak in het bestand service.ts een functie met de naam updateUserFirstName(). Deze functie werkt de voornaam van een gekozen gebruikersrecord bij. De functie neemt de ID van het record dat moet worden bijgewerkt, en de nieuwe waarde voor de voornaam van de gebruiker.

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

2. Als u meerdere velden voor hetzelfde record wilt bijwerken, hoeft u alleen maar de velden uit te breiden die zijn ingevoerd in de updatefunctie van Firestore. Voeg in plaats van alleen voornaam, achternaam toe om die ook bij te werken met een nieuwe waarde.

   updateUserFullName (_id: elke, _firstName: string, _lastName: string) {
    this.db.doc(`Gebruiker/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Elk van de bovenstaande functies kan worden gebruikt in andere TypeScript-bestanden.

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

Een record verwijderen uit de Firebase-database

Gebruik de verwijderfunctie van Firestore om een ​​record te verwijderen.

1. Maak in het bestand service.ts een functie met de naam deleteUser(). Deze functie neemt de ID op van het record dat moet worden verwijderd.

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

2. De bovenstaande functie kan vervolgens worden gebruikt in andere TypeScript-bestanden.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Firebase-gegevens ophalen met behulp van query's en filters

Het "waar"-filter kan de resultaten filteren die worden geretourneerd op basis van een specifieke voorwaarde.

1. Maak in services.ts een functie die alle VIP-gebruikers ophaalt (dit is als het vipMember-veld is ingesteld op true). Dit wordt aangegeven door het "ref.where('vipMember', '==', true)" gedeelte van de Firebase-aanroep hieronder.

   getAllVipMembers() {
    retourneer nieuwe belofte((oplossen)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (users => resolve (users))
    })
    }

2. Gebruik deze functie in een ander TypseScript-bestand.

   asynchrone getAllVipMembers() {
    this.vipUsers = wacht op this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. De query kan worden gewijzigd om andere bewerkingen toe te voegen, zoals Order By, Start At of Limit. Wijzig de functie getAllVipMembers() in services.ts om op achternaam te bestellen. Voor de Order By-bewerking moet mogelijk een index worden gemaakt in Firebase. Als dit het geval is, klikt u op de link in het foutbericht in de console.

   getAllVipMembers() {
    retourneer nieuwe belofte((oplossen)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (users => resolve (gebruikers) )
    })
    }

4. Pas de query aan zodat alleen de eerste drie records worden geretourneerd. Hiervoor kunnen de bewerkingen Start At en Limit worden gebruikt. Dit is handig als u paging moet implementeren, waarbij een bepaald aantal records per pagina wordt weergegeven.

   getAllVipMembers() {
    retourneer nieuwe belofte((oplossen)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (gebruikers => oplossen (gebruikers))
    })
    }

Voeg meer gegevens toe aan Firebase en meer verzoeken in de Angular-app

Er zijn veel andere combinaties van zoekopdrachten die u kunt gebruiken wanneer u gegevens probeert op te halen uit een Firebase-database. Hopelijk begrijp je nu hoe je een eenvoudige Firebase-database opzet, hoe je deze verbindt met een lokale Angular-toepassing en hoe je de database leest en schrijft.

U kunt ook meer te weten komen over de andere services die Firebase biedt. Firebase is een van de vele platforms die u met Angular kunt integreren, en of u nu een beginner of gevorderd bent, er valt altijd zoveel meer te leren.

Top 8 hoekcursussen voor beginners en gevorderden

Lees volgende

Over de auteur