Firebase er en udviklingsplatform fra Google, der er hurtig og nem at konfigurere. I denne vejledning skal vi oprette en grundlæggende applikation, der integrerer Firebase/Firestore og Angular. Vi bruger en pakke kaldet AngularFire — det officielle Vinkelbibliotek til Firebase-såvel som Firebase SDK selv.

brug af skytjenester bliver mere og mere populært, da det sparer tid ikke at skulle oprette din egen sikkerhed, vedligeholdelse osv. Med Googles Firebase opretter vi en gratis Firestore til at fungere som vores database.

Firebase tilbyder også en Realtidsdatabase, men den gemmer alt i et stort JSON-træ.

dette giver en enklere database, men med cloud Firestore, som er det, vi vil bruge, er der fleksible dokumenter, hvilket gør det mere skalerbart til større data. Firestore er også hurtigere og generelt mere intuitiv, hvis du ikke er bekendt med databaser.

Indstil Firebase-konsollen

Du skal starte med at konfigurere dit projekt på Firebase-konsollen. Gå først her for at finde konsollen.

Opret et projekt, giv det et navn, og gå gennem trinene. Når du er færdig, vil du være på projektoversigten.

Nej vi skal tilføje en app. Du skal være på Projektoversigtssiden. Her kan du se “Kom i gang ved at tilføje Firebase til din app”.

gør dette ved at klikke på knappen “<>” (dette er for at tilføje en internetapplikation). Du kan oprette hosting her, men det dækker vi ikke i denne tutorial.

gå videre og registrere app. På Næste side vil du se scripts til opsætning af Firebase SDK. Disse er nyttige, men vi vil senere se, hvordan vi får alt, hvad vi har brug for, hvis du savner dem på denne side. Gå videre og fortsæt med at trøste.

Initialiser Firestore og opret første dokumenter

i Firebase-konsollen, i venstre rude, under udvikle, kan du finde fanen Database. Klik på det, og du vil blive bragt til en side, hvor du kan klikke på “Opret Database”. En modal vises, hvor du kan vælge produktionstilstand eller testtilstand; vi ønsker testtilstand. Det er usikkert, men fint til test.

Hvis du fortsætter, bliver du bedt om at vælge en placering. Gå videre og vælg den rigtige. Når du trykker på Udført, tager det et par minutter at oprette Firestore.

når du er færdig, vil du være i din Firestore. Gå videre og vælg”Start samling”.

en screengrab af konsollen til opsætning af dit Firebase-projekt.

en screengrab af konsollen til opsætning af dit Firebase-projekt.

det vil bede dig om at oprette et samlings-ID; for vores eksempel, lad os bare navngive det “testCollection”. Hit Næste, og det bringer dig til formularen til oprettelse af dit første dokument.

Vi lader dokument — ID ‘ et være tomt-Firestore genererer automatisk dette for dig. Skriv bare “felt”under felt. Derefter vil du se “string” som standardtype. Der er ingen grund til at ændre dette for nu, så bare lad det være som det er. Skriv “værdi1″under værdi. Klik på Gem, og du vil se, at du har oprettet dit første dokument!

for vores eksempel senere, lad os oprette et andet dokument. I den midterste kolonne vil du se ” + Tilføj dokument.”gå videre og klik på det, og du vil blive bragt tilbage til formularen til oprettelse af dokumenter.

Her skal du blot skrive ” felt “under felt og” værdi2 ” under værdi. Klik på Gem. Nu har vi to dokumenter.

Start et nyt Vinkelprojekt

lad os lave vores frontend-projekt med Vinkel CLI (kommandolinjegrænseflade). Åbn terminalvinduet og installer vinkel CLI globalt:

npm install -g @angular/cli

Med dette installeret kan du køre kommandoen ng.

skriv følgende i terminalen:

ng new your-app-name

Du kan navngive dit projekt, hvad du ønsker.

når du får det i gang, vil den kantede CLI føre dig gennem et par konfigurationsindstillinger.

Du kan tilføje routing og derefter vælge, hvilket format du vil have Angular til at generere til din applikation.

efter at det vil gå gennem resten og oprette din Angular app.

når det er færdigt, skal du gå videre og ændre terminalmappen til den, vi lige har lavet:

cd your-app-name

i Vinkelappens bibliotek kan du køre ng serve byg og server din app lokalt.

Opsæt Firebase i Angular-appen

lad os få Firebase SDK ved at køre følgende i din terminal i din Angular project directory:

npm i --save firebase

nu føjes Firebase til dit projekt.

gå til Firebase-konsollen. I menuen til venstre ser du” projektoversigt ” med et tandhjulsikon ved siden af. Klik på ikonet, og derefter Projektindstillinger i pop op-vinduet. Her skal du gå til fanen Generelt og rulle til bunden.

under” Firebase SDK snippet”, klik på radioen bunden ved siden af CDN (det er standard er på automatisk). Her finder du alt hvad du behøver for at forbinde din app til Firebase. F

indfirebaseConfig variabel — vi bliver nødt til at kopiere disse oplysninger til Angular-appen. Ser sådan ud (undtagen alt udfyldes korrekt):

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

i din Vinkelapp skal du navigere til den genererede fil app.module.ts (hvis du oprettede dit Vinkelprojekt gennem CLI: src > app > app.module.ts). I denne fil kan du indsætte hele firebaseConfig variablen (lige under importen er fint).

den næste rækkefølge henter npm-pakkenangular/fire. Med denne pakke vil du være i stand til at interagere med Firebase med lethed.

Du kan installere pakken i dit projekt med følgende kodelinje:

npm i angular/fire

Med dette installeret kan vi tilføje det her i app.module.ts fil:

import { AngularFireModule } from @angular/fire';

nu nede i importarrayet, Initialiser Firebase i din app ved at tilføje følgende kodelinje:

AngularFireModule.initializeApp(firebaseConfig)

denne import er generelt for Firebase, men hvis vi vil tilføje visse tjenester, skal du tilføje dem individuelt.

for Firestore skal du tilføje dette øverst i filen:

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

derefter i importarrayet nær bunden:

AngularFirestoreModule

Implementer i appen

på dette tidspunkt kan det være fornuftigt at oprette en komponent eller to i vores Vinkelapplikation. Du kan oprette en ny komponent i din applikation ved hjælp af CLI i dit projekt.

lad os lave en hjemmekomponent ved at skrive kommandoen i terminalen:

ng g c home

“g c” står for “generer komponent”. Dette genererer en hjemmemappe med fire filer under den: en HTML-fil, en SCSS-fil (eller hvilken styling du bruger), en TypeScript-fil og en .spec-fil.

Hvis du ønsker at springe tilføje .spec fil, propend dette flag til din generere kommando:

ng g c home --skipTests=true

Vi vil gøre vores logik i vores hjem komponent, men lad os ikke glemme at tilføje det i voresapp.component.html fil. Du kan altid tilføje hjemmekomponent til routeren, men for enkelhed, lad os bare tilføje det i HTML.

Hvis du opretter en hjemmekomponent ligesom jeg gjorde, vil vælgeren være “app-home”, så du kan tilføje den et eller andet sted i app.component.html fil som denne

<app-home></app-home>

lad os derefter komme til at udføre vores operationer i hjemmekomponenten.

tidligere oprettede vi en samling i Vores Firestore med navnettestCollection; inden for det er der to dokumenter eller objekter. Lad os først se på at “læse” disse to dokumenter fra vores Firestore.

Læs

i home.component.ts fil, vi kan importere Firestore gennem vores vinkel/brandpakke:

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

efter import kan vi initialisere det i vores konstruktør som denne:

constructor(private firestore: AngularFirestore) {}

det er at tildele vores importerede AngularFirestore aliaset “firestore” — giv det uanset navn du kan lide.

ngOnInit funktionen er et perfekt sted at læse fra Firestore lige uden for gitgo.

Tag et kig på denne kode:

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

lad os gennemgå dette trin for trin: som du sikkert ved,this.firestorehenviser til det alias, vi oprettede til voresAngularFirestore i vores konstruktør.

.collection('testCollection')er, hvordan vi henviser til den samling, vi oprettede tidligere, og .get() får os simpelthen hele samlingen (vi vil dække forespørgsler på enkelte dokumenter i samlingen senere).

Når vi.subscribe til firestore, venter det i det væsentlige asynkront på API for at returnere data. Teknisk set, abonner kommer fra Rksj og er en observerbar, der opdateres, når der er en ændring.

NU Returnerer Firestore altid snapshots af data, hvorfor vi gav det aliasetss. Under snapshot af vores database er docs, som er de data, vi ønsker, og vi kan bruge .forEach array-metoden til at løbe over rækken af docs.

i eksemplet ovenfor fik vidoc.data() fra Firebase Firestore. Dette vil være hele dokumentet, som i vores tilfælde er et objekt med en ejendom. Derfor, når vi skubber det ind i vores array, bliver vi nødt til at initialisere vores array som følgende kode:

myArray: any = 

dette giver os mulighed for at se det i vores HTML, slette hvad der er der, og erstatte det med følgende:

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

en komplet liste i HTML med to værdier.

en komplet liste i HTML med to værdier.

fantastisk! Vi har med succes læst data fra vores Firestore.

skriv

lad os først tilføje ReactFormsModule til app.module.ts, som dette:

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

tilføj ogsåReactiveFormsModule til importarrayet nær bunden.

i voreshome.component.html fil, lad os tilføje en formular til at fange og sende nye data. Skriv noget som dette:

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

nu, hvis du brugte HTML ovenfor, skal du tilføje følgende import til vores home.component.ts fil:

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

tilføj derefter i vores klasse:

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

dette vil acceptere fra HTML, formularen og det input, vi lavede, med formControlName af newValue.

så vi får strengen indtastet fra brugeren i HTML og sender den til at være værdien af et nyt dokument i Vores Firestore. Vi kan gøre det ved at bruge følgende funktion:

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

på samme måde som vi læser fra vores Firestore, skriver vi denne gang med den samme reference for at få vores samling:

this.firestore.collection('testCollection')

denne gang tilføjer vi et dokument med.add. Vi vil tilføje objektet med vores tekst, vi modtog:

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

dette kan se mærkeligt ud, men det er fordi vi får værdien af formularen. Derinde får vi den ejendom, vi hedder newValue. Derfor er det value.newValue.

resten af funktionen er simpelthen en.thenog.catch for at håndtere svaret fra Firestore.

Når du skriver til Firestore, vil svaret (når det lykkes) være et stort, mærkeligt objekt.

da vi ikke læser noget, er den eneste brug af disse handlere, hvis vi vil gøre noget umiddelbart efter at have skrevet til Firestore (som vi gør, når vi ringer .reset() for at rydde formularen).

Hvis du går videre og kører appen som den er (ng serve), vil du bemærke, at den ikke vises på vores liste, når du har indtastet en ny værdi og sendt den til Firebase. Du kan opdatere siden, og den skal vises, hvis skrivningen var vellykket. Hvorfor det?

det er fordi, efter at vi skrev til vores Firestore, læste vi ikke den nye ændring. Med den måde, vores nuværende ngOnInit – funktion er oprettet, observerer vi ikke ændringer.

for at se de nye data skal vi ændre, hvordan vi læser dataene:

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

nu har vi abonneret. Du vil se, at efter at have tilføjet et nyt dokument til databasen, vil det også blive tilføjet til listen i vores app. Den største forskel er, at vi nu abonnerer på .valueChanges().

forespørgsel

lad os tilføje en anden formular, vi kan bruge til at forespørge Firestore baseret på et dokuments værdi:

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

for enkelhed er det nøjagtigt som den første form, men med forskellige navne og en anden funktion. Gå videre og navngiv det som du vil, men bare sørg for at bruge de nye navne og ikke dem, vi brugte i den forrige formular.

Over i typescript-filen skal du sørge for at initialisere formularen øverst i klassen:

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

også her, hvor vi initialiserer alt, tilføj single: any; som en variabel for at sætte vores forespurgte dokument, og message: string; som en variabel for at sætte vores forespurgte dokument, og message: string; som en variabel for fejlmeddelelser.

med det, lad os begynde at opbygge vores onQuery funktion.

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(); }) } }) } }

først ser vi, om brugeren indtaster noget overhovedet. Indgangen kan findes i this.secondForm.value.valueToGet.

så hvis det er tomt, vil vi returnere en besked og ikke sende en tom streng til forespørgsel Firebase. I denne “hvis” – kontrol sørger jeg også for, at vores “single” – variabel er tom, fordi vi måske med succes har spurgt før, men nu vil vi kun sende beskeden om, at formularen ikke kan være tom.

Hvis det ikke er tomt, går vi videre og spørger vores Firestore. Du vil bemærke noget nyt i parameteren” samling ” — i Angular foretager vi faktisk forespørgslen lige inde i denne parameter. refer en henvisning til samlingen, og.where er den mest almindelige måde at forespørge dokumenter i en Firestore-samling.

i .where – metoden fortæller vi først Firebase, hvilket felt der skal forespørges inden for hvert dokument. Alle vores felter er simpelthen “felt”, så det gør det nemt.

derefter bruger vi en komparator,==, som skal spørge om feltetisEqual. Du kan også bruge andre komparatorer som <>= og så videre.

endelig fortæller den tredje parameter Firebase, hvad man skal sammenligne feltet med — i vores tilfælde ønsker vi at placere inputværdien fra brugeren her og se, om den vises som en værdi hvor som helst i Vores Firestore.

en hurtig note om en firestore-begrænsning: forespørgsel med .where – metoden er begrænset.

Du kan tjekke for noget, der er slukket med et bogstav, eller er små bogstaver, hvor Firestore har det gemt som store bogstaver, og det vil ikke returnere det. Du kan gøre ting på frontend for at hjælpe, som at gøre hver bruger input små bogstaver til at matche Firestore, men det kan kun gå så langt.

selvfølgelig kan du trække hele Firestore ind i frontend (som vi gør). Mens forespørgsel ville være bedre, det er måske ikke ideelt, hvis din Firestore er gigantisk. Den foreslåede måde at foretage en fuldtekstsøgning på er at bruge Algolia.

vi vil .get()da vi læser værdien, og vi vil .subscribe som vi gjorde, da vi læste hele samlingen.

men efter at vi har fået snapshotet fra Firestore, vil vi sætte en “hvis” check for at se, om noget returneres. Du kan console.log snapshotet og se om det ikke vil være tomt, selvom der ikke var nogen kamp i Firestore.

mendocs egenskaben på snapshot vil være tom (et tomt array for at være nøjagtigt), hvis der ikke er noget match for vores forespørgsel. Sådan kan vi se, om vores forespørgsel matcher noget eller ej.

igen sender vi beskeden tilbage og indstillersingle variablen til null. Hvis vi finder et match, vil vi gøre det modsatte, indstille meddelelsen til Tom og indstille single variablen til de returnerede data.

nu hvor vi har dataene, lad os gå tilbage til home.component.html. Lad os tilføje nogle HTML til at håndtere vores “message” og “single” variabler:

<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>

ret simpelt her. Vi bruger *ngIf direktivet til kun at vise det matchede dokument, hvis det findes. Som du vil huske, satte vi” single”til null, hvis den ikke blev fundet, så hele *ngIfdiv ville være skjult. Samme med “meddelelsen” – hvis den er indstillet til en tom streng.

Du vil også bemærke, at vi har tilføjet knapper til vores næste afsnit, da vi stadig skal kunne redigere og slette!

opdatering

noget, der i høj grad vil hjælpe os herfra, er at fåid af det dokument, vi har forespurgt.

Vi ved, at vi kun vil redigere eller slette det forespurgte dokument, så lad os få dets id. Som du måske bemærker, når vi opretter dokumenter fra vores app, giver vi dem ikke et id.

plus, da vi oprettede vores dokumenter i Firestore i begyndelsen, lod vi Firestore automatisk generere ids; det samme sker med dem, vi opretter fra vores app. Så hvordan får vi ids?

i vores onQuery funktion, Lad os indstille en henvisning til vores databaseforespørgsel som denne:

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

Afbryd .get() og alt efter det, så på en anden linje, Brug vores reference som denne:

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

…og så videre. Det er stort set det samme.

nu, under abonnementsmetoden, lad os tilføje en anden linje for at få dokumentet id:

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

det er klart, at vi bliver nødt til at initialisere this.id øverst: id: string = ''. Men nu har vi id ‘ et, der skal bruges i både vores redigerings-og sletningsfunktioner, vi opretter.

Tilbage i voreshome.component.html fil, skift den redigeringsknap, vi tidligere oprettede, til følgende:

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

med denneopenEdit() funktion, i Vores TypeScript-fil, kan vi initialisere en redigeringsvariabel:

edit: boolean = false

og opretopenEdit funktion til at skifte det:

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

hver gang funktionen kaldes, får den redigeringsvariablen til at gå fra falsk til sand eller sand til falsk.

Tilføj nu følgende formular i vores HTML-fil. Det kommer op, når redigering er sandt:

<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>

igen, en anden form. Det vigtige her er, at vi ikke vil overskrive hele dokumentet — vi beholder id, men feltet ændres til det, vi indtaster her — det er målet.

ihome.component.ts Initialisermessage2 Variablen for at håndtere en tom indgang og initialisere formularen som vi gjorde med de andre. Opret derefter en onRename funktion.

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; } }

Der er et par nye ting at bemærke her.

først bruger vi .doc metode og indsæt id vi fik fra de foregående trin. Det får dokumentet baseret på id, ikke en forespørgsel.

dernæst bruger vi.update – metoden. Dette overskriver kun den egenskab, vi angiver, i stedet for .set som overskriver hele dokumentet. Med andre ord, hvis vi havde tre felter i dokumentet, kunne vi kun overskrive et med opdateringsmetoden som sådan.

igen læser vi vores liste over dokumenter fra Firestore. Derefter kan vi lynlåse den enkelte forespørgsel, redigeringsfeltet og eventuelle meddelelser, der tidligere var der.

Slet

sletningen, vi vil gøre, er stort set den samme som vores opdatering, bortset fra at vi bruger sletningsmetoden.

først, i vores html, lad os ændre sletningsknappen:

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

nu er alt, hvad der er, at oprette delete funktion.

det kan være klogt at indsætte en advarsel, før brugeren tillader at slette objektet. Tilføj følgende kode til TypeScript-filen:

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

confirm('Delete') vil dukke op en advarsel, som skal bekræftes, før du sletter — det sparer bare brugeren ved et uheld at slette noget utilsigtet.

derefter får vi simpelthen dokumentet ved id vi lagrede, og kalder sletningsmetoden på den. Simpelt er det.

konklusion

Du har nu oprettet en Vinkelapp, der kan oprette, læse, opdatere og slette Firestore-dokumenter! Som du kan se, er Firebase Firestore nem at bruge og klar til at gå. Dette kan nemt opskaleres til tusindvis af komplekse dokumenter.

nu hvor du har en god ide om firestore Basics, skal du tjekke de officielle dokumenter for mere avancerede emner.

Oplev dine Vinkelapps nøjagtigt, hvordan en bruger gør

fejlfinding af Vinkelapplikationer kan være svært, især når brugere oplever problemer, der er vanskelige at gengive. Hvis du er interesseret i at overvåge og spore vinkeltilstand og handlinger for alle dine brugere i produktion, kan du prøve LogRocket. LogRocket Dashboard gratis Prøvebannerhttps://logrocket.com/signup/

LogRocket er som en DVR til internetapps, der optager bogstaveligt talt alt, hvad der sker på din side, herunder netværksanmodninger, JavaScript-fejl og meget mere. I stedet for at gætte, hvorfor der opstår problemer, kan du samle og rapportere om, hvilken tilstand din ansøgning var i, da der opstod et problem.logrocket plugin logger vinkeltilstand og handlinger til LogRocket-konsollen, hvilket giver dig kontekst omkring, hvad der førte til en fejl, og hvilken tilstand applikationen var i, da der opstod et problem.moderniser, hvordan du debugger dine Vinkelapps – Start Overvågning Gratis.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.