Firebase är en utvecklingsplattform från Google som är snabb och enkel att installera. I denna handledning kommer vi att skapa en grundläggande applikation som integrerar Firebase/Firestore och Angular. Vi kommer att använda ett paket som heter AngularFire — det officiella Vinkelbiblioteket för Firebase-liksom Firebase SDK själv.

att använda molntjänster blir mer och mer populärt, eftersom det sparar tid att inte behöva skapa din egen säkerhet, underhåll etc. Med Googles Firebase kommer vi att skapa en gratis Firestore för att fungera som vår databas.

Firebase erbjuder också en realtidsdatabas, men den lagrar allt i ett stort JSON-träd.

detta ger en enklare databas, men med molnet Firestore, vilket är vad vi kommer att använda, finns det flexibla dokument, vilket gör det mer skalbart för större data. Firestore är också snabbare och övergripande mer intuitivt om du inte är bekant med databaser.

Ställ in Firebase-konsolen

Du måste börja med att ställa in ditt projekt på Firebase-konsolen. Först, gå hit för att hitta konsolen.

skapa ett projekt, ge det ett namn och gå igenom stegen. När du är klar kommer du att vara på Projektöversikten.

Nej vi behöver lägga till en app. Du bör vara på sidan projektöversikt. Här ser du ”kom igång genom att lägga till Firebase i din app”.

gör detta genom att klicka på knappen ”<>” (detta är för att lägga till en webbapplikation). Du kan ställa in värd här, men vi kommer inte att täcka det i den här handledningen.

gå vidare och registrera appen. På Nästa sida ser du skript för att ställa in Firebase SDK. Dessa är användbara, men vi kommer senare att se hur du får allt vi behöver om du saknar dem på den här sidan. Gå vidare och fortsätt att trösta.

initiera Firestore och skapa första dokument

i Firebase-konsolen, i den vänstra rutan, under utveckla, hittar du fliken databas. Klicka på den så kommer du till en sida där du kan klicka på ”Skapa databas”. En modal visas där du kan välja produktionsläge eller testläge; vi vill ha testläge. Det är osäkert, men bra för testning.

om du fortsätter blir du ombedd att välja en plats. Gå vidare och välj den lämpliga. När du trycker på Klar tar det några minuter att ställa in Firestore.

När du är klar kommer du att vara i din Firestore. Gå vidare och välj”Starta samling”.

en skärmbild av konsolen för att ställa in ditt Firebase-projekt.

en skärmbild av konsolen för att ställa in ditt Firebase-projekt.

det kommer att be dig att skapa ett Samlings-ID; för vårt exempel, låt oss bara namnge det ”testCollection”. Hit nästa och det kommer att ta dig till formuläret för att skapa ditt första dokument.

Vi lämnar dokument-ID tomt-Firestore genererar automatiskt detta åt dig. Under fält skriver du bara ”fält”. Då ser du ”sträng” som standardtyp. Det finns ingen anledning att ändra detta för nu, så lämna det bara som det är. Under värde, skriv in ”value1”. Klicka på Spara så ser du att du har skapat ditt första dokument!

för vårt exempel senare, låt oss skapa ett andra dokument. I mittenkolumnen ser du ” + Lägg till dokument.”gå vidare och klicka på det så kommer du tillbaka till formuläret för att skapa dokument.

Här skriver du bara ”fält” Under fält och ”värde2” under värde. Klicka på Spara. Nu har vi två dokument.

starta ett nytt Angular-projekt

Låt oss göra vårt frontend-projekt med Angular CLI (command line interface). Öppna terminalfönstret och installera Angular CLI globalt:

npm install -g @angular/cli

med detta installerat kan du köra kommandotng.

i terminalen skriver du följande:

ng new your-app-name

Du kan namnge ditt projekt vad du vill.

När du väl har börjat kommer Angular CLI att leda dig genom ett par konfigurationsalternativ.

Du kan lägga till routing och sedan välja vilket formatmallar du vill att Angular ska generera för din applikation.

Efter det kommer det att gå igenom resten och skapa din Angular-app.

När det är klart, fortsätt och ändra terminalkatalogen till den vi just gjort:

cd your-app-name

i Angular-appens katalog kan du körang serve Bygg och servera din app lokalt.

Ställ in Firebase i Angular-appen

Låt oss få Firebase SDK genom att köra följande i din terminal i din Angular-projektkatalog:

npm i --save firebase

nu läggs Firebase till i ditt projekt.

gå till Firebase-konsolen. På den vänstra menyn ser du” projektöversikt ” med en kugghjulsikon bredvid. Klicka på ikonen och sedan på Projektinställningar i popup-fönstret. Här går du till fliken Allmänt och bläddrar till botten.

under ”Firebase SDK snippet”, klicka på radio botten bredvid CDN (det är standard är på automatisk). Här hittar du allt du behöver för att ansluta din app till Firebase. F

IndfirebaseConfig variabel — vi måste kopiera denna information till Angular-appen. Ser ut så här (förutom att allt kommer att fyllas i korrekt):

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

inuti din Angular-app, navigera till den genererade filen app.module.ts (om du skapade ditt Angular-projekt genom CLI: src > app > app.module.ts). I den här filen kan du klistra in hela variabeln firebaseConfig (precis under importen är bra).

nästa arbetsplan är att ladda ner npm-paketet angular/fire. Med detta paket kommer du att kunna interagera med Firebase med lätthet.

Du kan installera paketet i ditt projekt med följande kodrad:

npm i angular/fire

med det här installerat kan vi lägga till det här i app.module.ts fil:

import { AngularFireModule } from @angular/fire';

nu, ner i importmatrisen, initiera Firebase i din app genom att lägga till följande kodrad:

AngularFireModule.initializeApp(firebaseConfig)

denna import är för Firebase i allmänhet, men om vi vill lägga till vissa tjänster måste du lägga till dem individuellt.

För Firestore, Lägg till detta överst i filen:

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

sedan, i importmatrisen nära botten:

AngularFirestoreModule

implementera i appen

Vid denna tidpunkt kan det vara meningsfullt att skapa en komponent eller två i vår Vinkelapplikation. Du kan skapa en ny komponent i din applikation med hjälp av CLI i ditt projekt.

Låt oss göra en hemkomponent genom att skriva kommandot i terminalen:

ng g c home

”g c” står för ”generera komponent”. Detta genererar en hemmapp med fyra filer under den: en HTML-fil, en SCSS-fil (eller vilken styling du använder), en TypeScript-fil och en .spec-fil.

om du vill hoppa över att lägga till .spec fil, propend denna flagga till generera kommando:

ng g c home --skipTests=true

Vi kommer att göra vår logik i vårt hem komponent, men låt oss inte glömma att lägga till den i vår app.component.html fil. Du kan alltid lägga till hemkomponent till routern, men för enkelhetens skull, låt oss bara lägga till den i HTML.

om du ställer in en hemkomponent precis som jag gjorde kommer väljaren att vara ”app-home”, så du kan lägga till den någonstans i filen app.component.html så här

<app-home></app-home>

låt oss sedan göra vår verksamhet i hemkomponenten.

tidigare skapade vi en samling i vår Firestore med namnet testCollection; inom det finns två dokument eller objekt. Låt oss först titta på att ”läsa” dessa två dokument från vår Firestore.

Läs

i home.component.ts — filen kan vi importera Firestore genom vårt Angular/fire-paket:

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

efter import kan vi initiera det i vår konstruktör så här:

constructor(private firestore: AngularFirestore) {}

som tilldelar vårt importerade AngularFirestore aliaset ”firestore” – ge det vilket namn du vill.

ngOnInit funktionen är en perfekt plats att läsa från Firestore direkt från gitgo.

ta en titt på den här koden:

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

Låt oss gå igenom detta steg för steg: som du säkert vet, this.firestore hänvisar till aliaset vi skapade för vårt AngularFirestore I vår konstruktör.

.collection('testCollection') är hur vi hänvisar till den samling vi skapade tidigare, och .get() får oss helt enkelt hela samlingen (vi kommer att täcka att fråga enstaka dokument i samlingen senare).

När vi .subscribe till firestore väntar det i huvudsak asynkront på API för att returnera data. Tekniskt, prenumerera kommer från RxJS och är en observerbar som kommer att uppdateras när det sker en förändring.

NU Returnerar Firestore alltid ögonblicksbilder av data, varför vi gav det aliaset för ss. Under ögonblicksbilden av vår databas finns docs, som är de data vi vill ha, och vi kan använda .forEach array-metoden, för att slinga över matrisen av docs.

i exemplet ovan fick vi doc.data() från Firebase Firestore. Detta kommer att vara hela dokumentet, vilket i vårt fall är ett objekt med en egenskap. Därför, när vi trycker in den i vår array, måste vi initiera vår array som följande kod:

myArray: any = 

detta gör att vi kan se den i vår HTML, radera vad som finns där och ersätta det med följande:

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

en komplett lista i HTML med två värden.

en komplett lista i HTML med två värden.

bra! Vi har framgångsrikt läst data från vår Firestore.

skriv

Låt oss först lägga till ReactFormsModule till app.module.ts, så här:

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

lägg också till ReactiveFormsModule I importmatrisen nära botten.

i vår home.component.html fil, låt oss lägga till ett formulär för att fånga och skicka nya data. Skriv något så här:

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

Nu, om du använde HTML ovan, lägg till följande import till vår home.component.ts fil:

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

lägg sedan till i vår klass:

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

detta kommer att acceptera från HTML, formuläret och inmatningen vi gjorde, med formControlName av newValue.

Så vi kommer att få strängen in från användaren i HTML och skickar den till värdet av ett nytt dokument i vår Firestore. Vi kan göra det genom att använda följande 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å samma sätt som vi läser från vår Firestore skriver vi den här gången med samma referens för att få vår samling:

this.firestore.collection('testCollection')

den här gången lägger vi till ett dokument med .add. Vi vill lägga till objektet med vår text vi fått:

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

detta kan se konstigt ut, men det beror på att vi får värdet på formuläret. Där inne får vi egenskapen vi heter newValue. Det är därför det är value.newValue.

resten av funktionen är helt enkelt en .then och .catch för att hantera svaret från Firestore.

När du skriver till Firestore kommer svaret (när det lyckas) att vara ett stort, konstigt objekt.

eftersom vi inte läser någonting är den enda användningen av dessa hanterare om vi vill göra något omedelbart efter att ha skrivit till Firestore (som vi gör när vi ringer .reset() för att rensa formuläret).

Om du går vidare och kör appen som den är (ng serve) kommer du att märka att den inte kommer att visas på vår lista efter att du har angett ett nytt värde och skickat det till Firebase. Du kan uppdatera sidan och den ska dyka upp om skrivningen lyckades. Varför är det så?

det beror på att efter att vi skrev till vår Firestore läste vi inte den nya ändringen. Med det sätt som vår nuvarande ngOnInit – funktion är inställd, observerar vi inte förändringar.

för att se de nya uppgifterna måste vi ändra hur vi läser data:

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

nu har vi prenumererat. Du ser att efter att ha lagt till ett nytt dokument i databasen kommer det också att läggas till i listan i vår app. Huvudskillnaden är att vi nu prenumererar på .valueChanges().

Query

Låt oss lägga till ett annat formulär som vi kan använda för att fråga Firestore baserat på ett dokuments värde:

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

För enkelhetens skull är det precis som den första formen, men med olika namn och en annan funktion. Gå vidare och namnge det som du vill, men se bara till att använda de nya namnen och inte de vi använde i föregående formulär.

över i typescript-filen, se till att initiera formuläret högst upp i klassen:

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

också här uppe där vi initierar allt, lägg till single: any; som en variabel för att sätta vårt frågade dokument och message: string; som en variabel för att sätta variabel för felmeddelanden.

med det, låt oss börja bygga vår 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 användaren matar in någonting alls. Ingången finns i this.secondForm.value.valueToGet.

Så, om det är tomt, vill vi returnera ett meddelande och inte skicka en tom sträng för att fråga Firebase. I den här” if ” – kontrollen ser jag också till att vår ”single” – variabel är tom, eftersom vi kanske har frågat tidigare, men nu vill vi bara skicka meddelandet att formuläret inte kan vara tomt.

om det inte är tomt, går vi vidare och frågar vår Firestore. Du kommer att märka något nytt i parametern” collection ” — i Angular gör vi faktiskt frågan direkt i den parametern. ref är en referens till samlingen, och .where är det vanligaste sättet att fråga dokument i en Firestore-samling.

i metoden.where berättar vi först Firebase vilket fält som ska frågas i varje dokument. Alla våra fält är helt enkelt” fält”, så det gör det enkelt.

sedan använder vi en komparator, ==, vilket är att fråga om fältet isEqual. Du kan också använda andra komparatorer som <>= och så vidare.

slutligen berättar den tredje parametern Firebase vad man ska jämföra fältet med-i vårt fall vill vi sätta inmatningsvärdet från användaren här och se om det visas som ett värde någonstans i vår Firestore.

en snabb anteckning på en Firestore-begränsning: att fråga med .where metoden är begränsad.

Du kan söka efter något som är avstängt med en bokstav, eller är små bokstäver där Firestore har sparat det som en stor bokstav, och det kommer inte att returnera det. Du kan göra saker på frontend för att hjälpa till, som att göra varje användarinmatning små bokstäver för att matcha Firestore, men det kan bara gå så långt.

Naturligtvis kan du dra hela Firestore i frontend (som vi gör). Medan frågan skulle vara bättre, kanske det inte är perfekt om din Firestore är gigantisk. Det föreslagna sättet att göra en fulltextsökning är att använda Algolia.

Vi kommer .get() eftersom vi läser värdet, och vi kommer .subscribe som vi gjorde när vi läste hela samlingen.

men efter att vi har fått ögonblicksbilden från Firestore vill vi sätta in en ”if” – kontroll för att se om något returneras. Du kan console.log ögonblicksbilden och se om den inte kommer att vara tom även om det inte fanns någon matchning i Firestore.

men egenskapendocs på ögonblicksbilden kommer att vara tom (en tom array för att vara exakt) om det inte finns någon matchning för vår fråga. Så här kan vi se om vår fråga matchar något eller inte.

återigen skickar vi tillbaka meddelandet och ställer in single variabeln till null. Om vi hittar en matchning vill vi göra motsatsen, ställa in meddelandet till tomt och ställa in variabeln single till den returnerade data.

nu när vi har data, låt oss gå tillbaka till home.component.html. Låt oss lägga till lite HTML för att hantera våra ”message” och ”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>

ganska enkelt här. Vi använder *ngIf – direktivet för att bara visa det matchade dokumentet om det hittas. Som du kommer ihåg ställer vi in” single”till null om det inte hittades, så hela *ngIfdiv skulle döljas. Samma med ”meddelandet” – om det är inställt på en tom sträng.

Du kommer också att märka att vi lagt till knappar för vårt nästa avsnitt, eftersom vi fortfarande måste kunna redigera och ta bort!

Uppdatering

något som i hög grad hjälper oss härifrån är att få id I dokumentet vi har frågat.

vi vet att vi bara kommer att redigera eller ta bort det frågade dokumentet, så låt oss få dess id. Som du kanske märker, när vi skapar dokument från vår app, ger vi dem inte ett id.

Plus, när vi skapade våra dokument i Firestore i början låter vi Firestore automatiskt generera ids; samma sak händer med de vi skapar från vår app. Så, hur får vi id s?

i vår onQuery – funktion, låt oss ange en referens till vår databasfråga så här:

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

Bryt av .get() och allt efter det, använd sedan på en annan rad vår referens, så här:

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

…och så vidare. Det är i huvudsak samma sak.

nu, under prenumerationsmetoden, låt oss lägga till en annan rad för att få dokumentet id:

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

självklart måste vi initiera this.id överst: id: string = ''. Men nu har vi id att använda i både våra Redigera och radera funktioner vi kommer att skapa.

tillbaka i vår home.component.html fil, ändra redigeringsknappen som vi tidigare skapat till följande:

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

med denna openEdit() funktion, i vår TypeScript-fil kan vi initiera en redigeringsvariabel:

edit: boolean = false

och skapa funktionen openEdit för att växla den:

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

varje gång funktionen anropas kommer den att göra redigeringsvariabeln från falsk till sann, eller sann till falsk.

lägg nu till följande formulär i vår HTML-fil. Det kommer upp när redigering är 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>

igen, en annan form. Det viktiga här är att vi inte kommer att skriva över hela dokumentet-vi behåller id, men fältet kommer att ändras till vad vi än skriver in här — det är målet.

ihome.component.ts, initieramessage2 variabel för att hantera en tom ingång och initiera formuläret som vi gjorde med de andra. Skapa sedan enonRename – 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; } }

det finns ett par nya saker att märka här.

först använder vi .doc – metoden och lägger in id vi fick från tidigare steg. Det får dokumentet baserat på id, inte en fråga.

därefter använder vi .update – metoden. Detta skriver bara över egenskapen vi anger istället för .set som skriver över hela dokumentet. Med andra ord, om vi hade tre fält i dokumentet, kunde vi bara skriva över ett med uppdateringsmetoden så.

återigen läser vi vår lista över dokument från Firestore. Sedan kan vi zip upp den enda frågan, redigeringsrutan och alla meddelanden som tidigare fanns.

ta bort

raderingen vi kommer att göra är i princip densamma som vår uppdatering, förutom att vi kommer att använda raderingsmetoden.

först, i vår html, låt oss ändra delete-knappen:

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

Nu är allt som finns att skapa funktionen delete.

det kan vara klokt att lägga in en varning innan användaren tillåter att ta bort objektet. Lägg till följande kod i TypeScript-filen:

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

confirm('Delete') kommer att dyka upp en varning som måste bekräftas innan du tar bort — det sparar bara användaren från att oavsiktligt radera något oavsiktligt.

därefter får vi helt enkelt dokumentet med id vi lagrade och kallar raderingsmetoden på den. Enkelt är det.

slutsats

Du har nu skapat en Angular-app som kan skapa, läsa, uppdatera och ta bort Firestore-dokument! Som du kan se är Firebase Firestore lätt att använda och redo att gå. Detta kan enkelt uppskalas till tusentals komplexa dokument.

Nu när du har en bra uppfattning om grunderna i Firestore, kolla in de officiella dokumenten för mer avancerade ämnen.

Upplev dina vinklade appar exakt hur en användare gör

felsökning av vinklade applikationer kan vara svårt, särskilt när användare upplever problem som är svåra att reproducera. Om du är intresserad av att övervaka och spåra Vinkeltillstånd och åtgärder för alla dina användare i produktion, prova LogRocket. LogRocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket är som en DVR för webbappar, registrerar bokstavligen allt som händer på din webbplats inklusive nätverksförfrågningar, JavaScript-fel och mycket mer. Istället för att gissa varför problem uppstår kan du aggregera och rapportera om vilket tillstånd din ansökan var i när ett problem inträffade.

LogRocket ngrx-plugin loggar Vinkeltillstånd och åtgärder till LogRocket-konsolen, vilket ger dig sammanhang kring vad som ledde till ett fel och vilket tillstånd applikationen var i när ett problem uppstod.

modernisera hur du felsöker dina Angular-appar-börja övervaka gratis.

Lämna ett svar

Din e-postadress kommer inte publiceras.