Firebase Er en utviklingsplattform Av Google som er rask og enkel å sette opp. I denne opplæringen skal vi sette opp en grunnleggende applikasjon som integrerer Firebase / Firestore og Angular. Vi skal bruke en pakke som heter AngularFire-den offisielle Angular bibliotek For Firebase-samt Firebase SDK selv.

bruk av skytjenester blir stadig mer populært, da det sparer tid å ikke måtte lage din egen sikkerhet, vedlikehold, etc. Med Googles Firebase vil Vi sette opp en Gratis Firestore for å fungere som vår database.

Firebase tilbyr også En Sanntidsdatabase, men den lagrer alt i ett stort json-tre.

dette gir en enklere database, men med cloud Firestore, som er det vi skal bruke, er det fleksible dokumenter, noe som gjør det mer skalerbart for større data. Firestore er også raskere og generelt mer intuitivt hvis du ikke er kjent med databaser.

Sett Opp Firebase-konsollen

du må starte med å sette opp prosjektet ditt På Firebase-konsollen. Først, gå hit for å finne konsollen.

Opprett et prosjekt, gi det et navn, og gå gjennom trinnene. Når Du er ferdig, vil Du være på Prosjektoversikten.

Nei vi må legge til en app. Du bør være på Prosjektoversiktssiden. Her ser du «Kom i gang ved å legge Til Firebase i appen din».

Gjør dette ved å klikke på»<> » – knappen (dette er for å legge til et webprogram). Du kan sette opp hosting her, men vi vil ikke dekke det i denne opplæringen.

gå videre og registrer appen. På neste side vil du se skript for å sette Opp Firebase SDK. Disse er nyttige, men vi vil se senere hvordan du får alt vi trenger hvis du savner dem på denne siden. Gå videre og fortsett å konsolere.

Initialiser Firestore og opprett første dokumenter

I Firebase-konsollen, i venstre rute, Under Utvikle, finner Du Database-Fanen. Klikk på den, og du vil bli brakt til en side der du kan klikke på «Opprett Database». En modal vises der du kan velge produksjonsmodus eller testmodus; vi vil ha testmodus. Det er usikkert, men greit for testing.

hvis du fortsetter, blir du bedt om å velge et sted. Gå videre og velg den riktige. Når du trykker ferdig, vil det ta noen minutter å sette Opp Firestore.

når du er ferdig, vil du være på Din Firestore. Gå videre og velg «Start samling».

en screengrab av konsollen for å sette Opp Firebase prosjektet.

en screengrab av konsollen for å sette Opp Firebase prosjektet.

det vil be deg om å opprette En Samling ID; for vårt eksempel, la oss bare nevne det «testCollection». Hit neste og det vil bringe deg til skjemaet for å lage ditt første dokument.

Vi vil la Dokumentet id blank-Firestore vil automatisk generere dette for deg. Under Felt skriver du bare «felt». Da vil du se «streng» som standardtype. Det er ingen grunn til å endre dette for nå, så bare la det være som det er. Skriv inn «verdi1» under Verdi. Klikk lagre og du vil se at du har opprettet ditt første dokument!

for vårt eksempel senere, la oss lage et annet dokument. I den midterste kolonnen vil du se » + Legg Til Dokument.»gå videre og klikk på det, og du vil bli brakt tilbake til dokumentopprettingsskjemaet.

her skriver du bare «felt» under Felt og «verdi2» under Verdi. Klikk på lagre. Nå har vi to dokumenter.

Start et Nytt Angular-prosjekt

La oss lage vårt frontend-prosjekt med Angular CLI (command line interface). Åpne terminalvinduet og installer Vinkel CLI globalt:

npm install -g @angular/cli

med dette installert kan du kjøre kommandoenng.

i terminalen skriver du inn følgende:

ng new your-app-name

du kan navngi prosjektet ditt uansett hva du ønsker.

når Du kommer i gang, Vil Angular CLI lede deg gjennom et par konfigurasjonsalternativer.

du kan legge til ruting, og deretter velge hvilket stilarkformat Du vil At Angular skal generere for programmet.

Etter det vil det gå gjennom resten og lage Din Angular app.

Når det er ferdig, fortsett og endre terminalkatalogen til den vi nettopp har laget:

cd your-app-name

I Angular appens katalog kan du kjøre ng serve bygg og server appen din lokalt.

Sett Opp Firebase i Angular app

La oss få Firebase SDK ved å kjøre følgende i terminalen i Angular prosjektkatalogen:

npm i --save firebase

Nå Firebase er lagt til prosjektet.

gå til Firebase-konsollen. På venstre meny vil du se «Prosjektoversikt» med et tannhjulikonet ved siden av det. Klikk på ikonet, Og Deretter Prosjektinnstillinger i popup-vinduet. Her går Du Til Kategorien Generelt, og bla til bunnen.

under «Firebase SDK snippet», klikk på radio bunnen VED SIDEN AV CDN (det er standard er På Automatisk). Her finner du alt du trenger for å koble appen Til Firebase. F

indfirebaseConfig variabelen – vi må kopiere denne informasjonen til Angular-Appen. Ser slik ut (bortsett fra at alt fylles ut riktig):

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

inne I Angular-appen, naviger Til den genererte filen app.module.ts( hvis Du opprettet Angular-prosjektet ditt gjennom CLI: src > app > app.module.ts). I denne filen kan du lime inn helefirebaseConfig variabelen (like under importen er bra).

neste rekkefølge av virksomheten laster ned npm-pakken angular/fire. Med denne pakken vil du kunne samhandle Med Firebase med letthet.

du kan installere pakken i prosjektet med følgende linje med kode:

npm i angular/fire

med dette installert, kan vi legge det her i app.module.ts fil:

import { AngularFireModule } from @angular/fire';

nå, ned i import array, initialiser firebase i appen Din Ved å legge til følgende kodelinje:

AngularFireModule.initializeApp(firebaseConfig)

denne importen er For Firebase generelt, men hvis vi vil legge til bestemte tjenester, må du legge til dem individuelt.

for Firestore, legg til dette toppen av filen:

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

deretter, i import array nær bunnen:

AngularFirestoreModule

Implementere i app

på dette tidspunktet, kan det være fornuftig å lage en komponent eller to i Vår Vinkel program. Du kan opprette en ny komponent i programmet ved HJELP AV CLI i prosjektet.

La oss lage en hjemmekomponent ved å skrive kommandoen i terminalen:

ng g c home

«g c» står for «generer komponent». Dette vil generere en hjemmemappe med fire filer under den: EN HTML-fil, EN SCSS-fil (eller hva styling du bruker), En TypeScript-fil og en .spec fil.

hvis du vil hoppe over å legge til .

ng g c home --skipTests=true

vi skal gjøre vår logikk i vårt hjem komponent, men la oss ikke glemme å legge den i vår app.component.html fil. Du kan alltid legge til hjemmekomponent til ruteren, men for enkelhet, la oss bare legge den til I HTML.

hvis du setter opp en hjemmekomponent akkurat som jeg gjorde, vil velgeren være «app-home», slik at du kan legge den til et sted i app.component.html fil som dette

<app-home></app-home>

etter det, la oss komme til å gjøre vår virksomhet i hjemmekomponenten.

tidligere opprettet vi en samling i Vår Firestore kalt testCollection; innenfor det er det to dokumenter eller objekter. La oss først se på å «Lese» disse to dokumentene fra Vår Firestore.

Les

ihome.component.ts fil, kan Vi importere Firestore gjennom Vår Vinkel/brann pakke:

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

etter import, kan vi initialisere det i vår konstruktør som dette:

constructor(private firestore: AngularFirestore) {}

som tilordner vår importerteAngularFirestore aliaset «firestore» — gi det det navnet Du liker.

ngOnInit funksjonen er et perfekt sted å lese Fra Firestore rett utenfor gitgo.

Ta en titt på denne koden:

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

La oss gå gjennom dette trinn for trinn: som du sikkert vet,this.firestore refererer til aliaset vi opprettet for vår AngularFirestore i vår konstruktør.

.collection('testCollection') er hvordan vi refererer til samlingen vi opprettet tidligere, og .get() får oss ganske enkelt hele samlingen (vi vil dekke spørring av enkeltdokumenter i samlingen senere).

Når vi .subscribe til firestore, er det i hovedsak asynkront venter PÅ API for å returnere data. Teknisk, abonner kommer Fra RxJS og er En Observerbar som vil oppdatere når det er en endring.

Nå Returnerer Firestore alltid øyeblikksbilder av data, og derfor ga vi det aliaset til ss. Under snapshot av vår database er docs, som er dataene vi ønsker ,og vi kan bruke.forEach array-metoden, for å sløyfe over rekke dokumenter.

i eksemplet ovenfor fikk vi doc.data() Fra Firebase Firestore. Dette vil være hele dokumentet, som i vårt tilfelle er et objekt med en eiendom. Derfor, når vi skyver den inn i vårt utvalg, må vi initialisere vårt utvalg som følgende kode:

myArray: any = 

dette tillater oss å se DET i VÅR HTML, slette hva som er der, og erstatte det med følgende:

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

en komplett liste I HTML med to verdier.

en komplett liste I HTML med to verdier.

Flott! Vi har lest data fra Vår Firestore.

Skriv

La Oss først legge til ReactFormsModule til app.module.ts, slik som dette:

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

legg også til ReactiveFormsModule til importmatrisen nær bunnen.

i vårhome.component.html fil, la oss legge til et skjema for å fange og sende nye data. Skriv noe slikt:

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

Nå, hvis DU brukte HTML ovenfor, legg til følgende import til vår home.component.ts fil:

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

deretter, i vår klasse, legg til:

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

dette vil akseptere fra html, skjemaet og inngangen vi laget, med formControlName av newValue.

Så vil vi få strengen inn fra brukeren I HTML og vil sende den til å være verdien av et nytt dokument i Vår Firestore. Vi kan gjøre det ved å bruke følgende funksjon:

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åte som vi leser fra Vår Firestore, vil vi skrive denne gangen med samme referanse for å få vår samling:

this.firestore.collection('testCollection')

Denne gangen vil vi legge til et dokument med .add. Vi vil legge til objektet med teksten vi mottok:

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

Dette kan se rart ut, men det er fordi vi får verdien Av Skjemaet. Der får vi eiendommen vi heter newValue. Det er derfor det er value.newValue.

resten av funksjonen er ganske enkelt en .then og .catch for å håndtere responsen fra Firestore.

når du skriver Til Firestore, vil svaret (når vellykket) være et stort, merkelig objekt.Siden vi ikke leser noe, er den eneste bruken av disse behandlerne hvis vi vil gjøre noe umiddelbart etter å ha skrevet Til Firestore(som vi gjør når vi ringer .reset() for å fjerne skjemaet).

hvis du går videre og kjører appen som den er (ng serve), vil du legge merke til at den ikke vises på listen vår etter at du har skrevet inn en ny verdi og sendt Den til Firebase. Du kan oppdatere siden, og den skal dukke opp, hvis skrivingen var vellykket. Hvorfor det?

Det er fordi etter at vi skrev til Vår Firestore, vi ikke lese den nye endringen. Med måten vår nåværende ngOnInit funksjon er satt opp, observerer vi ikke endringer.

for å se de nye dataene må vi endre hvordan vi leser dataene:

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

nå har Vi abonnert. Du vil se at etter å ha lagt til et nytt dokument i databasen, vil det også bli lagt til listen i vår app. Hovedforskjellen er at vi nå abonnerer på .valueChanges().

Query

La oss legge til et annet skjema vi kan bruke til å spørre Firestore basert på et dokument verdi:

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

for enkelhet er det akkurat som det første skjemaet, men med forskjellige navn og en annen funksjon. Gå videre og navngi det som du vil, men bare sørg for å bruke de nye navnene og ikke de vi brukte i forrige skjema.

Over i typescript-filen må du sørge for å initialisere skjemaet øverst i klassen:

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

også her oppe hvor vi initialiserer alt, legg tilsingle: any;som en variabel for å sette vårt spørrede dokument, ogmessage: string;som en variabel for feilmeldinger .

Med det, la oss begynne å bygge våronQuery funksjon.

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 brukeren legger inn noe i det hele tatt. Inngangen kan bli funnet i this.secondForm.value.valueToGet.

Så, hvis det er tomt, vil vi returnere en melding og ikke sende en tom streng til query Firebase. I denne» if «- sjekken sørger jeg også for at vår» single » variabel er tom, fordi vi kanskje har spurt før, men nå vil vi bare sende meldingen om at skjemaet ikke kan være tomt.

hvis det ikke er tomt, går vi videre og spør Vår Firestore. Du vil legge merke til noe nytt i parameteren «collection» — I Angular gjør vi faktisk spørringen rett innenfor den parameteren. ref er en referanse til samlingen, og .where er den vanligste måten å spørre dokumenter i En Firestore-samling.

i.where – metoden forteller Vi Først Firebase hvilket felt som skal spørres i hvert dokument. Alle våre felt er ganske enkelt «felt», så det gjør det enkelt.

deretter bruker vi en komparator, ==, som er å spørre om feltet isEqual. Du kan også bruke andre komparatorer som <>=, og så videre.

Endelig er Den tredje parameteren forteller Firebase hva du skal sammenligne feltet til – i vårt tilfelle, vi ønsker å sette inn verdien fra brukeren her og se om det vises som en verdi hvor som helst i Vår Firestore.

et raskt notat om En Firestore-begrensning: spørring med .where – metoden er begrenset.

Du kan sjekke om noe som er av med en bokstav, eller er små bokstaver der Firestore har det lagret som en stor bokstav, og det vil ikke returnere det. Du kan gjøre ting på frontend for å hjelpe, som å gjøre hver brukerinngang små bokstaver for å matche Firestore, men det kan bare gå så langt.

selvfølgelig kan du trekke hele Firestore inn i frontend (som vi gjør). Mens spørring ville være bedre, kan det ikke være ideelt hvis Firestore er gigantisk. Den foreslåtte måten å gjøre et fulltekstsøk på er Å bruke Algolia.

Vi vil .get() siden vi leser verdien, og vi vil .subscribe som vi gjorde da vi leste hele samlingen.

Men Etter at vi får stillbildet fra Firestore, vil vi sette inn en «if» – sjekk for å se om noe returneres. Du kanconsole.log stillbildet og se om det ikke vil være tomt selv om Det ikke var noen kamp i Firestore.

mendocs – egenskapen på stillbildet vil være tom (en tom matrise for å være nøyaktig) hvis det ikke er noen kamp for spørringen vår. Dette er hvordan vi kan fortelle om vår spørring samsvarer med noe eller ikke.

Igjen sender vi meldingen tilbake og settersingle variabelen til null. Hvis vi finner en kamp, vil vi gjøre det motsatte, sette meldingen til tom og settesingle variabelen til de returnerte dataene.

Nå som vi har dataene, la oss gå tilbake til home.component.html. La oss legge TIL LITT HTML for å håndtere våre» 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>

Ganske enkelt her. Vi bruker *ngIf direktivet for å bare vise det samsvarende dokumentet hvis det er funnet. Som du vil huske, setter vi «single» til null hvis den ikke ble funnet, slik at hele *ngIfdiv ville være skjult. Samme med «melding» — hvis den er satt til en tom streng.

Du vil også legge merke til at vi har lagt til knapper for vår neste del, siden vi fortsatt må kunne redigere og slette!

Update

Noe som vil hjelpe oss herfra, er å få id av dokumentet vi har spurt.

Vi vet at vi bare vil redigere eller slette det forespurte dokumentet, så la oss få det id. Som du kanskje legger merke til, når vi lager dokumenter fra appen vår, gir vi dem ikke en id.

Plus, Da vi opprettet våre dokumenter I Firestore i begynnelsen, la Vi Firestore automatisk generereids; det samme skjer med de vi lager fra vår app. Så, hvordan får vi id s?

I vår onQuery funksjon, la oss sette en referanse til vår database spørring som dette:

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

Bryt av .get() og alt etter det, så, på en annen linje, bruk vår referanse, slik:

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

…og så videre. Det er i hovedsak det samme.

Nå, under abonnementsmetoden, la oss legge til en annen linje for å få dokumentet id:

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

Selvfølgelig må Vi initialisere this.id øverst: id: string = ''. Men nå har vi id å bruke i både våre redigere og slette funksjoner vi vil opprette.

Tilbake i vår home.component.html fil, endre redigeringsknappen vi tidligere opprettet til følgende:

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

med denne openEdit() funksjon, i Vår TypeScript-fil, kan vi initialisere en redigeringsvariabel:

edit: boolean = false

og opprett openEdit – funksjonen for å veksle den:

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

Hver gang funksjonen kalles, vil den gjøre redigeringsvariabelen gå fra falsk til sann, eller sann til falsk.

nå, i VÅR HTML-fil, legg til følgende skjema. Det kommer opp når rediger er sant:

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

Igjen, en annen form. Det viktigste her er at vi ikke kommer til å overskrive hele doc — vi vil beholde id, men feltet vil endres til hva vi skriver inn her — det er målet.

ihome.component.ts, initialisermessage2 variabelen for å håndtere en tom inngang og initialiser skjemaet som vi gjorde med de andre. Opprett deretter en onRename – funksjon.

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

Det er et par nye ting å legge merke til her.

først bruker vi .doc metoden og legger inn id vi fikk fra de forrige trinnene. Det blir dokumentet basert på id, ikke en spørring.

Deretter bruker vi.update – metoden. Dette vil bare overskrive egenskapen vi angir, i stedet for .set som overskriver hele dokumentet. Med andre ord, hvis vi hadde tre felt i dokumentet, kunne vi overskrive bare en med oppdateringsmetoden slik.

Igjen leser vi vår liste over dokumenter fra Firestore. Deretter kan vi zip opp enkelt spørring, redigeringsboksen, og eventuelle meldinger tidligere der.

Delete

slettingen vi vil gjøre er i utgangspunktet den samme som vår oppdatering, bortsett fra at vi vil bruke slettemetoden.

Først, i vår html, la oss endre sletteknappen:

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

nå er alt som er, å lagedelete – funksjonen.

det kan være lurt å legge inn en advarsel før brukeren kan slette objektet. Legg til følgende kode I TypeScript-filen:

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

confirm('Delete') vil dukke opp et varsel som må bekreftes før du sletter — det sparer bare brukeren fra å slette noe utilsiktet ved et uhell.

etter det får vi bare dokumentet med id vi lagret, og kaller slettemetoden på den. Så enkelt er det.

Konklusjon

Du har nå opprettet En Angular app som Kan Opprette, Lese, Oppdatere og Slette Firestore dokumenter! Som du kan se, Er Firebase Firestore enkel å bruke og klar til å gå. Dette kan enkelt oppskaleres til tusenvis av komplekse dokumenter.

Nå som Du har en god ide Om Firestore Basics, sjekk ut de offisielle dokumentene for mer avanserte emner.

Opplev Vinkelappene dine nøyaktig hvordan en bruker Gjør

Feilsøking Av Vinkelprogrammer kan være vanskelig, spesielt når brukere opplever problemer som er vanskelige å reprodusere. Hvis Du er interessert i å overvåke Og spore Vinkeltilstand og handlinger for alle brukerne i produksjon, kan Du prøve LogRocket. LogRocket Dashboard Gratis Prøveversjon Bannerhttps://logrocket.com/signup/

LogRocket er som en DVR for web apps, opptak bokstavelig talt alt som skjer på nettstedet ditt, inkludert nettverksforespørsler, JavaScript-feil, Og mye mer. I stedet for å gjette hvorfor problemer oppstår, kan du samle og rapportere om hvilken tilstand søknaden din var i da et problem oppstod.LogRocket ngrx plugin logger Vinkeltilstand og handlinger Til LogRocket-konsollen, noe som gir deg kontekst rundt hva som førte til en feil, og hvilken tilstand programmet var i da det oppstod et problem.Moderniser hvordan du feilsøker Vinkelappene dine-Start overvåking gratis.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.