Firebase is een ontwikkelingsplatform van Google dat snel en eenvoudig op te zetten is. In deze tutorial gaan we een basic applicatie opzetten die Firebase/Firestore en Angular integreert. We zullen gebruik maken van een pakket genaamd AngularFire — de officiële Angular library voor Firebase-evenals de Firebase SDK zelf.

het gebruik van cloudservices wordt steeds populairder, omdat het tijd bespaart dat u geen eigen beveiliging, onderhoud, enz.hoeft te maken. Met Google ‘ s Firebase, zullen we het opzetten van een gratis Firestore op te treden als onze database.

Firebase biedt ook een Realtime Database, maar het slaat alles op in één grote JSON-boom.

Dit zorgt voor een eenvoudigere database, maar met de cloud Firestore, die we zullen gebruiken, zijn er flexibele documenten, waardoor het meer schaalbaar is voor grotere data. Firestore is ook sneller en over het algemeen meer intuïtief als je niet bekend bent met databases.

de Firebase console instellen

u moet beginnen met het opzetten van uw project op de Firebase console. Ga eerst naar hier om de console te vinden.

Maak een project aan, geef het een naam en ga door de stappen. Zodra u klaar bent, bent u bij het projectoverzicht.

Nee we moeten een app toevoegen. U moet op de projectoverzicht pagina. Hier zie je”aan de slag door Firebase toe te voegen aan uw app”.

doe dit door te klikken op de”<> ” knop (Dit is om een webapplicatie toe te voegen). U kunt het opzetten van hosting hier, maar we zullen niet dekken dat in deze tutorial.

ga je gang en registreer de app. Op de volgende pagina zie je scripts om de Firebase SDK in te stellen. Deze zijn nuttig, maar we zullen later zien hoe je alles wat we nodig hebben als je ze mist op deze pagina te krijgen. Ga je gang en ga door naar console.

Initialiseer Firestore en maak eerste documenten

in de Firebase console, in het linkerdeelvenster, onder ontwikkelen, kunt u het tabblad Database vinden. Klik erop en je wordt naar een pagina gebracht waar je op “Create Database”kunt klikken. Er verschijnt een modaal waar u de productiemodus of testmodus kunt selecteren; we willen de testmodus. Het is onzeker, maar prima om te testen.

Als u doorgaat, wordt u gevraagd een locatie te selecteren. Ga je gang en kies de juiste. Zodra je op Gereed drukt, duurt het een paar minuten om de Firestore in te stellen.

Als u klaar bent, bent u bij uw Firestore. Ga je gang en selecteer “Start collection”.

een screengrab van de console voor het opzetten van uw Firebase project.

een screengrab van de console voor het opzetten van uw Firebase project.

Het zal u vragen om een collectie-ID aan te maken; voor ons voorbeeld, laten we het gewoon “testCollection”noemen. Druk op Volgende en het brengt u naar het formulier voor het maken van uw eerste document.

We laten het Document-ID leeg — Firestore zal dit automatisch voor u genereren. Typ onder veld “veld”. Dan ziet u “string” als het standaardtype. Er is geen reden om dit te veranderen voor nu, dus laat het zoals het is. Typ onder waarde “value1”. Klik op Opslaan en u zult zien dat u uw eerste document hebt gemaakt!

voor ons voorbeeld later, laten we een tweede document maken. In de middelste kolom ziet u “+ Document toevoegen.”ga je gang en klik op dat en je zal worden teruggebracht naar het document creatie formulier.

Typ hier gewoon “field” onder Field en “value2” onder Value. Klik op Opslaan. Nu hebben we twee documenten.

Start een nieuw Hoekproject

laten we ons frontend project maken met De hoekige CLI (command line interface). Open het terminalvenster en installeer De hoekige CLI globaal:

npm install -g @angular/cli

met dit geà nstalleerd, kunt u het ng commando uitvoeren.

Typ in de terminal het volgende:

ng new your-app-name

u kunt uw project een naam geven zoals u wilt.

als je eenmaal begonnen bent, zal De hoekige CLI je door een paar configuratieopties leiden.

u kunt routing toevoegen en vervolgens kiezen welk stijlblad-formaat u hoekig wilt genereren voor uw toepassing.

daarna zal het door de rest gaan en uw hoekige app maken.

als dat klaar is, ga je gang en verander de terminalmap naar degene die we zojuist gemaakt hebben:

cd your-app-name

In de map van de Angular app kunt u ng serve uw app lokaal bouwen en serveren.

Firebase instellen in de Angular app

laten we de Firebase SDK ophalen door het volgende uit te voeren in uw terminal in uw Angular project directory:

npm i --save firebase

nu wordt Firebase toegevoegd aan uw project.

Ga naar de Firebase console. In het linker menu ziet u” Project overzicht ” met een Tandwiel icoon ernaast. Klik op het pictogram en vervolgens projectinstellingen in het pop-upvenster. Ga hier naar het tabblad Algemeen en scroll naar de onderkant.

onder “Firebase SDK fragment”, klik op de radio onderkant naast CDN (standaard staat het op Automatisch). Hier vindt u alles wat u nodig hebt om uw app aan te sluiten op Firebase. F

IND de firebaseConfig variabele — we moeten deze informatie kopiëren naar de Angular App. Ziet er als volgt uit (behalve dat alles correct wordt ingevuld):

var firebaseConfig = { apiKey: "************************************", authDomain: "*************.firebaseapp.com", databaseURL: "https://************.firebaseio.com", projectId: "***************", storageBucket: "****************.appspot.com", messagingSenderId: "*************", appId: "********************************", measurementId: "****************",};

in uw Angular app, navigeer naar het gegenereerde bestand app.module.ts (Als u uw Angular project hebt aangemaakt via de CLI: src > app > app.module.ts). In dit bestand kunt u het geheel van de firebaseConfig variabele plakken (net onder de import is prima).

het volgende agendapunt is het downloaden van het NPM-pakket angular/fire. Met dit pakket kunt u communiceren met Firebase met gemak zal zijn.

u kunt het pakket in uw project installeren met de volgende regel code:

npm i angular/fire

met dit geïnstalleerd, kunnen we het hier toevoegen in de app.module.ts bestand:

import { AngularFireModule } from @angular/fire';

nu, beneden in de imports array, initialiseer Firebase in uw app door de volgende regel code toevoegen:

AngularFireModule.initializeApp(firebaseConfig)

deze import is voor Firebase in het algemeen, maar als we bepaalde services willen toevoegen, moet je die afzonderlijk toevoegen.

voeg voor de Firestore dit aan de bovenkant van het bestand toe:

import { AngularFirestoreModule } from '@angular/fire/firestore';

dan, in de imports array aan de onderkant:

AngularFirestoreModule

implementeer in de app

Op dit moment kan het zinvol zijn om een of twee componenten aan te maken in onze Hoekapplicatie. U kunt een nieuwe component in uw toepassing maken met behulp van de CLI in uw project.

laten we een home component maken door het commando in de terminal te typen:

ng g c home

De “g c” staat voor “generate component”. Dit genereert een persoonlijke map met vier bestanden eronder: een HTML-bestand, een SCSS-bestand (of welke styling je ook gebruikt), een TypeScript-bestand, en een .spec-bestand.

Als u het toevoegen van de .spec bestand, stuur deze vlag naar je generate Commando:

ng g c home --skipTests=true

We zullen onze logica in onze home component doen, maar laten we niet vergeten om het toe te voegen in ons app.component.html bestand. U kunt altijd home component toe te voegen aan de router, maar voor de eenvoud, laten we gewoon toe te voegen in de HTML.

Als u een home-component net als Ik hebt ingesteld, zal de selector “app-home” zijn, zodat u het ergens in het app.component.html bestand kunt toevoegen zoals dit

<app-home></app-home>

daarna gaan we aan de slag met het uitvoeren van onze bewerkingen in de home-component.

eerder hebben we in onze Firestore een verzameling aangemaakt met de naam testCollection; er zitten twee documenten of objecten in. Laten we eerst kijken naar het “lezen” van deze twee documenten van onze Firestore.

Read

In home.component.ts bestand, kunnen we de Firestore importeren via ons Angular/fire pakket:

import { AngularFirestore } from "@angular/fire/firestore";

na het importeren kunnen we het als volgt initialiseren in onze constructor:

constructor(private firestore: AngularFirestore) {}

dat toewijst onze geïmporteerde AngularFirestore de alias van “Firestore” — geef het welke naam je wilt.

de ngOnInit functie is een perfecte plek om van de Firestore direct van de gitgo te lezen.

kijk eens naar deze code:

this.firestore .collection("testCollection") .get() .subscribe((ss) => { ss.docs.forEach((doc) => { this.myArray.push(doc.data()); }); });

laten we dit stap voor stap doorlopen: zoals u waarschijnlijk weet, verwijst this.firestore naar de alias die we hebben gemaakt voor onze AngularFirestore in onze constructor.

de .collection('testCollection') is hoe we verwijzen naar de collectie die we eerder hebben gemaakt, en de .get() geeft ons gewoon die hele collectie (we zullen het opvragen van afzonderlijke documenten in de collectie later behandelen).

wanneer we .subscribe naar de firestore, is het in wezen asynchroon wachten op API om gegevens te retourneren. Technisch gezien, subscribe komt van RxJS en is een waarneembare die zal worden bijgewerkt wanneer er een verandering.

nu geeft de Firestore altijd snapshots van data terug, daarom gaven we het de alias van ss. Onder de snapshot van onze database is de docs, dat is de data die we willen, en we kunnen de .forEach array methode gebruiken, om de array van docs te lus.

in het voorbeeld hierboven kregen we de doc.data() van Firebase Firestore. Dit zal het hele document zijn, wat in ons geval een object is met één eigenschap. Daarom, als we het in onze array pushen, moeten we onze array initialiseren als de volgende code:

myArray: any = 

Hiermee kunnen we het in onze HTML zien, wissen wat er is, en het vervangen door het volgende:

<ul> <li *ngFor='let doc of myArray'> {{doc.field}} </li> </ul

een volledige lijst in HTML met twee waarden.

een volledige lijst in HTML met twee waarden.

geweldig! We hebben met succes de gegevens van onze Firestore gelezen.

Write

eerst voegen we ReactFormsModule toe aan app.module.ts, zoals dit:

import { ReactiveFormsModule } from "@Angular/forms";

voeg ook ReactiveFormsModule toe aan de import array aan de onderkant.

in ons home.component.html bestand, Laten we een formulier toevoegen om nieuwe gegevens vast te leggen en te verzenden. Schrijf iets als dit:

<form ="this.form"> <input placeholder="New Value" formControlName="newValue" type="text" class="input-field col s12" /> <button (click)="onSubmit()"> Submit </button></form>

Nu, als je de bovenstaande HTML-code toevoegen de volgende importeren om onze home.component.ts bestand:

import { FormControl, FormGroup } from "@Angular/forms";

Vervolgens, in onze klasse, voeg je toe:

form = new FormGroup({ newValue: new FormControl('') })`

Dit zal aanvaarden van de HTML, de vorm en de input die wij hebben gemaakt met de formControlName van de newValue.

dus, we zullen de tekenreeks invoeren van de gebruiker in de HTML en zal het naar de waarde van een nieuw document in onze Firestore. We kunnen dat doen door de volgende functie te gebruiken:

onSubmit() { this.firestore.collection('testCollection').add({ field: this.form.value.newValue }) .then(res => { console.log(res); this.form.reset(); }) .catch(e => { console.log(e); }) }

op dezelfde manier als we lezen uit onze Firestore, zullen we dit keer schrijven met dezelfde referentie om onze collectie te krijgen:

this.firestore.collection('testCollection')

Deze keer zullen we een document toevoegen met .add. We willen het object toevoegen met onze tekst die we hebben ontvangen:

.add({field: this.form.valule.newValue})

Dit kan vreemd lijken, maar het is omdat we de waarde van het formulier krijgen. Hierin krijgen we de eigenschap die we newValuenoemden. Daarom is het value.newValue.

de rest van de functie is gewoon een .then en .catch om het antwoord van de Firestore af te handelen.

bij het schrijven naar de Firestore zal het antwoord (indien succesvol) een groot, vreemd object zijn.

omdat we niets lezen, is het enige gebruik van deze handlers als we iets willen doen direct na het schrijven naar de Firestore (zoals we doen wanneer we .reset() aanroepen om het formulier te wissen).

Als u doorgaat en de app draait zoals het is (ng serve), zult u merken dat het niet op onze lijst verschijnt na het invoeren van een nieuwe waarde en het verzenden naar Firebase. U kunt de pagina vernieuwen en het zou moeten verschijnen, als het schrijven succesvol was. Waarom is dat?

Het is omdat nadat we naar onze Firestore schreven, we de nieuwe wijziging niet hebben gelezen. Met de manier waarop onze huidige ngOnInit functie is ingesteld, observeren we geen veranderingen.

om de nieuwe gegevens te zien, moeten we veranderen hoe we de gegevens lezen:

ngOnInit() { this.docs = ; const collectionRef = this.db.collection('testCollection'); const collectionInstance = collectionRef.valueChanges(); collectionInstance.subscribe(ss => this.myArray = ss); }

nu we geabonneerd zijn. U zult zien dat na het toevoegen van een nieuw document aan de database, het zal ook worden toegevoegd aan de lijst in onze app. Het belangrijkste verschil is dat we nu geabonneerd zijn op .valueChanges().

Query

laten we een ander formulier toevoegen dat we kunnen gebruiken om de Firestore te bevragen op basis van de waarde van een document:

<form ="this.secondForm"> <input placeholder="value1" formControlName="valueToGet" type="text" class="input-field col s12" /> <button (click)="onQuery()"> Query </button></form>

voor de eenvoud is het precies zoals de eerste vorm, maar met verschillende namen en een andere functie. Ga je gang en noem het zoals je wilt, maar zorg ervoor dat je de nieuwe namen gebruikt en niet degene die we in het vorige formulier gebruikten.

Over in het typescript-bestand, zorg ervoor dat u het formulier aan de bovenkant van de klasse initialiseert:

secondForm = new FormGroup({ valueToGet: new FormControl('') })

ook, hier waar we alles initialiseren, voeg single: any; toe als een variabele om ons opgevraagde document te plaatsen, en message: string; als een variabele voor foutmeldingen.

hiermee beginnen we met het bouwen van onze onQuery functie.

onQuery() { if (!this.secondForm.value.valueToGet) { this.message = 'Cannot be empty'; this.single = null; } else { this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet)).get() .subscribe(ss => { if (ss.docs.length === 0) { this.message = 'Document not found! Try again!'; this.single = null; } else { ss.docs.forEach(doc => { this.message = ''; this.single = doc.data(); }) } }) } }

eerst zien we of de gebruiker iets invoert. De invoer kan gevonden worden in this.secondForm.value.valueToGet.

dus, als dat leeg is, willen we een bericht retourneren en geen lege tekenreeks sturen om Firebase te bevragen. In deze” if “check, zorg ik er ook voor dat onze” single ” variabele leeg is, omdat we eerder met succes hebben opgevraagd, maar nu willen we alleen het bericht sturen dat het formulier niet leeg kan zijn.

als het niet leeg is, gaan we verder en vragen onze Firestore. U zult iets nieuws merken in de” collectie ” parameter — in Hoekige we eigenlijk doen de query recht binnen die parameter. ref is een verwijzing naar de collectie, en .where is de meest voorkomende manier om documenten in een Firestore collectie te bevragen.

in de .where methode, vertellen we eerst Firebase welk veld te bevragen binnen elk document. Al onze velden zijn gewoon ‘veld’, dus dat maakt het gemakkelijk.

dan gebruiken we een comparator, ==, die vraagt of het veld isEqual. U kunt ook andere comparators gebruiken zoals <>=, enzovoort.

ten slotte is de derde parameter Firebase vertellen waarmee het veld moet worden vergeleken — in ons geval willen we de invoerwaarde van de gebruiker hier plaatsen en zien of het ergens in onze Firestore als een waarde verschijnt.

een snelle notitie over een Firestore-beperking: querying met de .where methode is beperkt.

u kunt controleren op iets dat met één letter uit Staat, of kleine letters is waar de Firestore het heeft opgeslagen als een hoofdletter, en het zal het niet retourneren. U kunt dingen doen op de frontend om te helpen, zoals het maken van elke gebruiker input kleine letters aan de Firestore, maar dat kan alleen maar zo ver gaan.

natuurlijk kun je de hele Firestore in de frontend trekken (zoals we doen). Terwijl querying zou beter zijn, is het misschien niet ideaal als uw Firestore is gigantisch. De voorgestelde manier om een full-text zoekopdracht uit te voeren is door Algolia te gebruiken.

we zullen .get() omdat we de waarde lezen, en we zullen .subscribe zoals we deden bij het lezen van de hele collectie.

echter, nadat we de snapshot van de Firestore hebben, willen we een “if” – controle plaatsen om te zien of er iets wordt geretourneerd. U kunt console.log de snapshot bekijken en zien of het niet leeg zal zijn, zelfs als er geen overeenkomst was in de Firestore.

maar de eigenschap docs op de snapshot zal leeg zijn (een lege array om precies te zijn) als er geen overeenkomst is voor onze query. Dit is hoe we kunnen zien of onze zoekopdracht overeenkomt met iets of niet.

opnieuw sturen we het bericht terug en zetten de variabele single Op null. Als we een overeenkomst vinden, dan willen we het tegenovergestelde doen, het bericht leeg zetten, en de single variabele instellen op de geretourneerde gegevens.

nu we de gegevens hebben, gaan we terug naar home.component.html. Laten we wat HTML toevoegen om onze “message” en “single” variabelen af te handelen:

<p style="color: red;">{{message || null}}</p><div *ngIf="single"> <h1>{{single.field}}</h1> <button style="background-color: lightblue">Edit</button> <button style="background-color: red">Delete</button></div>

vrij eenvoudig hier. We gebruiken de*ngIf richtlijn om alleen het overeenkomende document te tonen als het gevonden wordt. Zoals u zich zult herinneren, zetten we “single”op null als het niet gevonden werd, dus de gehele *ngIfdiv zou verborgen zijn. Hetzelfde met de “message” – als het is ingesteld op een lege string.

u zult ook merken dat we knoppen hebben toegevoegd voor onze volgende sectie, omdat we nog steeds moeten kunnen bewerken en verwijderen!

Update

iets dat ons vanaf nu enorm zal helpen is het verkrijgen van de id van het document dat we hebben opgevraagd.

we weten dat we alleen dat opgevraagde document zullen bewerken of verwijderen, Dus laten we zijn idophalen. Zoals u wellicht opmerkt, geven we geen idwanneer we documenten maken vanuit onze app.

Plus, toen we onze documenten in de Firestore aan het begin maakten, lieten we de Firestore automatisch de ids genereren; hetzelfde gebeurt met degenen die we vanuit onze app maken. Dus, hoe krijgen we de ids?

In onze onQuery functie, Laten we een referentie instellen naar onze database query als volgt:

const docRef = this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet));

Breek de .get() en alles erna, gebruik dan op een andere regel onze referentie, als volgt:

docRef.get().subscribe(ss => ...)

…enzovoort. Het is in wezen hetzelfde.

nu, onder de subscribe methode, laten we een andere regel toevoegen om het document te krijgen id:

docRef.snapshotChanges().forEach((changes) => { changes.map((a) => { this.id = a.payload.doc.id; });});

uiteraard moeten we this.id aan de bovenkant initialiseren: id: string = ''. Maar, nu hebben we de id te gebruiken in zowel onze bewerken en verwijderen functies die we zullen maken.

terug in ons home.component.html bestand, verander de bewerkingsknop die we eerder gemaakt hebben naar het volgende:

<button style='background-color: lightblue' (click)='openEdit()'>Edit</button>

Met deze openEdit() functie, in ons TypeScript bestand, kunnen we een bewerkvariabele initialiseren:

edit: boolean = false

en maak de openEdit functie om het te schakelen:

openEdit() { this.edit = !this.edit};

elke keer dat de functie wordt aangeroepen, zal het de variabele bewerken van false naar true laten gaan, of true naar false.

Voeg nu in ons HTML-bestand het volgende formulier toe. Het zal verschijnen wanneer bewerken waar is:

<form *ngIf="edit" ="this.editForm"> <input placeholder="{{single.field}}" formControlName="replaceValue" type="text" class="input-field col s12" /> <button (click)="onRename()"> Rename </button></form><p style="color: red;">{{message2 || null}}</p>

opnieuw, een andere vorm. Het belangrijkste hier is dat we niet de hele doc gaan overschrijven — we houden de id, maar het veld zal veranderen naar wat we hier invoeren — dat is het doel.

inhome.component.ts, initialiseer demessage2 variabele om een lege invoer te verwerken en initialiseer de vorm zoals we deden met de andere. Maak vervolgens een onRename functie.

onRename() { if (!this.editForm.value.replaceValue) { this.message2 = "Cannot Be Empty!"; } else { this.firestore.collection('testCollection').doc(this.id).update({ field: this.editForm.value.replaceValue }); this.edit = false; this.message2 = ''; this.single = null; } }

Er zijn een paar nieuwe dingen op te merken.

eerst gebruiken we .doc methode en zetten we de id die we uit de vorige stappen kregen. Dat krijgt het document gebaseerd op de id, geen query.

vervolgens gebruiken we de .update methode. Dit zal alleen de eigenschap die we specificeren overschrijven, in plaats van .set die het hele document overschrijft. Met andere woorden, als we drie velden in het document hadden, konden we er slechts één overschrijven met de updatemethode.

nogmaals, we herlezen onze lijst met documenten van de Firestore. Dan, we kunnen zip-up van de enkele query, bewerken vak, en alle berichten eerder daar.

Delete

De delete die we zullen doen is in principe hetzelfde als onze update, behalve dat we de delete methode zullen gebruiken.

eerst, in onze html, laten we de delete knop Wijzigen:

<button style='background-color: red' (click)='delete()'>Delete</button>

nu, alles wat er is, is het maken van de delete functie.

Het is misschien verstandig om een waarschuwing in te voeren voordat de gebruiker het object mag verwijderen. Voeg de volgende code toe aan het TypeScript — bestand:

delete() { if (confirm('Delete?')) { this.db.collection('testCollection').doc(this.id).delete(); this.edit = false; this.single = null; } }

de confirm('Delete') verschijnt een waarschuwing die moet worden bevestigd voordat u verwijdert-het bespaart de gebruiker alleen van het per ongeluk verwijderen van iets onbedoeld.

daarna krijgen we het document gewoon met de id die we hebben opgeslagen, en roepen we de delete methode op. Zo simpel is het.

conclusie

u hebt nu met succes een hoekige app gemaakt die Firestore-documenten kan maken, lezen, bijwerken en verwijderen! Zoals je kunt zien, Firebase Firestore is makkelijk te gebruiken en klaar om te gaan. Dit kan gemakkelijk worden opgeschaald naar duizenden complexe documenten.

nu je een goed idee hebt van Firestore Basics, bekijk dan de officiële documenten voor meer geavanceerde onderwerpen.

Ervaar uw Hoekapps precies zoals een gebruiker

debuggen Hoekapplicaties kunnen moeilijk zijn, vooral wanneer gebruikers problemen ondervinden die moeilijk te reproduceren zijn. Als u geïnteresseerd bent in het bewaken en volgen van de Hoektoestand en acties voor al uw gebruikers in productie, probeer dan LogRocket. LogRocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket is als een DVR voor web apps, die letterlijk alles opneemt wat er op uw site gebeurt, inclusief netwerkverzoeken, JavaScript-fouten en nog veel meer. In plaats van te raden waarom problemen zich voordoen, kunt u aggregeren en rapporteren in welke staat uw aanvraag zich bevond toen een probleem zich voordeed.

De LogRocket ngrx plugin logt de Hoektoestand en acties naar de LogRocket console, waardoor u context krijgt rond wat tot een fout heeft geleid, en in welke toestand de toepassing zich bevond toen er een probleem optrad.

moderniseren hoe u uw hoekige apps debuggen – start gratis monitoring.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.