Sådan oprettes en Firebase Angular-app med auth og en realtidsdatabase

I lang tid ledte jeg efter en god Portfolio-webapp, der kan hjælpe mig med nemt at spore mine Cryptocurrency-fortjeneste / tab, indtil jeg har besluttet at udvikle sådan alene ved hjælp af Firebase og Angular ! Ja, det er så let, lad mig forklare dig hvorfor.
Firebase giver det perfekte værktøj til applikationer med brugergodkendelse og behov i realtid til databaselagring. Det giver rig dokumentation med en række dev-eksempler for at hjælpe alle med at få en bedre forståelse af, hvordan man opretter stjerneapps.
Jeg har dækket bootstrapping af Angular- applikationen ved hjælp af Ignite UI CLI i et andet blogindlæg.
Denne artikel sigter mod at:
- Gå gennem Firebase installation og opsætning.
- Konfigurer Firebase-godkendelse.
- Implementere lagring og synkronisering af databaser i realtid.
- Tilføj observerbare datatjenester.
- Visualiser dataene i et kantet program.
Konfigurer en Firebase-konto
Jeg vil gennemgå de trin, vi har taget for at oprette Portfolio Firebase-kontoen. Projekter oprettes fra Firebase-konsollen ved at vælge Tilføj et nyt projekt. Når formularen Opret projekt er sendt, vil du se følgende projektoversigt.

Under afsnittet Projektoversigt kan du finde alle udviklingsværktøjer, der bruges til godkendelse og datalagring. Her findes også den konfiguration, der bruges i Portfolio Web App. Denne konfiguration genereres ved at trykke på Tilføj Firebase til din webapp , og den tilføjes senere i programmets app.module.ts- fil.
Lad os vende tilbage til sidepanelet til venstre og vælge Godkendelse . Herfra har vi adgang til de login -metoder, som vi har brug for i appen. Naviger til fanen Log ind, der kan du se de udbydere, der er aktiveret og brugt i Portfolio-applikationen - Google, Facebook og E-mail / adgangskodeudbyder .
Login-udbydere lader brugere godkende med Firebase ved hjælp af deres Facebook- og Google-konti ved at integrere deres logins i appen. Hvad angår udbyderen af e-mail / adgangskode, repræsenterer den en simpel godkendelsesmekanisme ved kun at bruge e-mail og adgangskode. Firebase Auth leverer indbyggede valideringsregler, der verificerer brugerindtastningerne, så vi behøver ikke konfigurere noget ekstra her.

Den “sværeste” del her var konfigurationen af Facebook-udbyderen, fordi vi havde brug for en Facebook-applikation for at godkende login. Vi har oprettet en FB-app fra Facebook-udviklere, der gav os det app-id og den apphemmelighed, der blev anmodet om fra Firebase.

Både API-id og hemmelighed skal udfyldes, når Facebook-udbyderen aktiveres. Hvad angår Auth-omdirigerings-URI (fra udbydervinduet), skal den indsættes under Facebook/Facebook Login/Products section/Valid Auth Redirect URIs
.
Lad os fortsætte med Firebase-konsollen. Fra siden Databasevisning har vi oprettet en database i realtid.

I denne visning kan vi finde oplysninger om applikationsdataelementerne og skrive / læse sikkerhedsregler. Nedenfor er de regler, der bruges af portefølje-applikationen:
{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}
Denne sikkerhedsregelkonfiguration tillader kun godkendte brugere at være i stand til at læse og skrive i vores database. Hvis du vil lære at definere mere avancerede regler, anbefaler jeg stærkt at tjekke afsnittet Official Security & Rules.
Okay, hvor var vi? Nu hvor vi har gennemgået oprettelsen af Portfolio Firebase-kontoen , lad os se, hvordan Firebase-udviklingsprojektet blev oprettet.
Hvis vi ikke allerede havde oprettet et projekt, ville jeg have anbefalet at starte med installation af firebase CLI, der giver en række forskellige værktøjer til styring og implementering af Firebase-projekter. MEN vi har bootstrapped Portfolio Angular Project med Ignite UI CLI, så vi havde bare brug for at installere AngularFire og Firebase fra npm . Vi har brug for begge pakker for at kommunikere med Firebase. AngularFire er det officielle bibliotek for Firebase og Angular-udvikling.
npm install firebase @angular/fire --save
Alle AngularFire-moduler, der bruges i applikationen, tilføjes i app.module.ts
filen:
- FirestoreModule er nødvendigt til databasefunktionerne som at arbejde med samlinger, forespørgsler og tjenester til datastreaming og -manipulation.
- FireAuthModule erbehov for godkendelsesfunktioner som overvågning af godkendelsestilstand, Log-in-udbydere og sikkerhed.
- FireDatabaseModule giver os mulighed for at arbejde med Realtime-databaser. Det er meget effektivt til mobil- og webapps, der kræver synkroniserede stater på tværs af klienter i Realtime.
Nu hvor vi ved, hvordan appen oprindeligt blev konfigureret, kan vi se på de andre Firebase-funktioner , der bruges.
Godkendelse
Vi brugerAngularFireAuth
servicefor at overvåge app-godkendelsestilstanden. AngularFireAuth.auth
returnerer en initialiseret firebase.auth.Auth
instans, der giver os mulighed for at logge brugere ind og ud. Appen viser loginfunktioner ved hjælp af tre udbydere: Facebook, Google og E-mail.
Firebase-brugerinstans bevares for hver udbyder, der er knyttet til brugeren, og når en bruger er registreret eller logger på, bliver denne bruger den aktuelle bruger af Auth-forekomsten. Forekomsten fortsætter brugerens tilstand, så opdatering af siden eller genstart af applikationen ikke mister brugerens oplysninger.
Vi bruger signInWithRedirect
metoden til både Facebook- og Google-udbydere for at logge ind ved at omdirigere til login-siden. Adgangskodebaseret kontooprettelse bruges til e-mail-loginudbyderen,createUserWithEmailAndPassword
og signInWithEmailAndPassword
er de metoder, der er ansvarlige for oprettelse og login af brugerkontoen.

Jeg anbefaler de officielle Firebase-dokumenter for mere detaljerede oplysninger om godkendelse og brugerens livscyklus.
Realtidsdatabasehandlinger
Firebase tilbyder to skybaserede, klienttilgængelige databaseløsninger, og vi bruger Firebases originale database - Realtime. Tjek forskellene mellem Realtime og Cloud firestore på den officielle dokumentationsside.
AngularFireDatabase
og AngularFireList
tjenester bruges i Portfolio-appen til nemt at hente, gemme og fjerne data.
AngularFireDatabase
kan injiceres gennem konstruktøren af en komponent eller @Injectable()
service. I vores tilfælde bruger vi den anden tilgang:
Data hentes gennem AngularFireDatabase
service, der udfylder en observerbar liste over BlockItems
.AngularFire
giver metoder som den, snapshotChanges()
der returnerer Observerbar af data som et synkroniseret array. Det er meget praktisk, hvis du vil begrænse begivenhedshandlinger, som tilføjet , ændret , fjernet og flyttet . Som standard lytter den til alle fire, men du kan kun være interesseret i en af disse begivenheder, og du kan angive, hvilken af dem du vil bruge. I vores ansøgning abonnerer vi på dem alle.
Tilføjelse af et nyt element, opdaterer en eksisterende, eller fjerne det fra listen opnås ved brug push()
, update()
og remove()
metoder.
Hver datoperationsmetode returnerer et løfte, selvom vi ikke behøver at bruge færdiggørelsesløftet til at angive succes, fordi realtidsdatabasen holder listen synkroniseret.
Observerbare
CoinItem-tjeneste
Cryptocompare API-tjeneste administrerer async-data og udsender flere værdier ad gangen med Observables
. Vi bruger HttpClient get()
metoden til at anmode om data fra ressourcen og abonnere på den for at omdanne dem til Observable Array ofCoinItem
objekter, som vil blive brugt senere af vores igxGrid
, igxList
og igxCard
komponenter.
Rx.js giver os mulighed for at cache resultatet af HTTP-anmodningen. Vi henter disse data oprindeligt, cache dem og bruger den cachelagrede version i applikationens levetid. Kombinationen af publishReply(1, 300000)
og refCount()
gør følgende.
Efter at vi abonnerer på listen Mønter, bliver resultatet cachelagret, og vi behøver ikke at foretage en ny HTTP-anmodning.
BlockItem-tjeneste
Porteføljekryptomøntsdata sikres ved getItemsList()
hjælp af en metode, der returnerer observerbar BlockItem
rækkesom igxGrid
komponenten abonnerer på. Kun godkendte brugere kan bruge denne tjeneste på grund af det AngularFireList
, vi manipulerer, er forbundet med unikke bruger-id'er.
Visualiser dataene
Til visualiseringen bruger vi UI-komponenter fra Ignite UI til Angularlibrary. Disse komponenter er ansvarlige for datahåndtering, samtidig med at de giver adgang til brugerdefinerede skabeloner og opdateringer i realtid med intuitiv API ved hjælp af minimal mængde kode.
igxGrid
Rutenettebinding [data]
bruges til at passere det returnerede BlockItem
array. Hver
The component provides straightforward event handlers and API for CRUD operations. Handlers like
updateRow
and deleteRow
are implementing additional logic like AngularFireList
manipulation and coin item restore logic with the igxSnackbar
.
igxCard
Cards are used to provide general information of Crypto coins using CSS Flexbox layout. These Card components can be filtered with the
igxFilter
directive, which can be used to filter different data sources. igxFilter
can be applied as a pipe or as a directive.
igxFinancialChart
The Chart offers multiple ways in which the data can be visualized and interpreted, once it is returned by the service. There are several display modes for price and volume, and in our case we use
chartType=”candle”
.
The financial chart component analyzes and selects data columns automatically:
-
Date/Time
column to use for x-axis
-
Open
, High
, Low
, Close
, Volume
columns or the first 5 numeric columns for y-axis
Theming
IgniteUI for Angular bases its component designs on the Material Design Principles and with just a few lines of code, we can easily change the colors, sizes, typography, and overall look and feel of our components.
Now that we’ve provided all base definitions needed for the
igx-theme,
and have configured the igx-dark-theme
mixin, we need to only apply .light-theme
and .dark-theme
CSS classes somewhere at DOM element root level and toggle it on button click.
Result

Wrapping up
Everything is possible with the right tooling. We have created a Portfolio Web application using the full power of the Angular Framework, Firebase Authentication services, and Cloud Database store/synchronization.
You can find the GitHub repository and the actual portfolio application here.
Feel free to share in the comments below any questions that you have, suggestions as to what can be improved or changed in the app, or any problems that you’ve encountered while configuring your Firebase account or application.