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.tsfilen:

  • 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.
Det eneste almindelige modul, der ikke bruges i Portfolio-appen, er AngularFireStorageModule. Du kan bruge dette modul til hurtigt og nemt at gemme og servere brugergenereret indhold som fotos og videoer samt overvåge uploads og metadata tilknyttet filer.

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.authreturnerer en initialiseret firebase.auth.Authinstans, 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 signInWithRedirectmetoden til både Facebook- og Google-udbydere for at logge ind ved at omdirigere til login-siden. Adgangskodebaseret kontooprettelse bruges til e-mail-loginudbyderen,createUserWithEmailAndPasswordog signInWithEmailAndPassworder 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.

AngularFireDatabaseog AngularFireListtjenester bruges i Portfolio-appen til nemt at hente, gemme og fjerne data.

AngularFireDatabasekan injiceres gennem konstruktøren af ​​en komponent eller @Injectable()service. I vores tilfælde bruger vi den anden tilgang:

Data hentes gennem AngularFireDatabaseservice, der udfylder en observerbar liste over BlockItems.AngularFiregiver 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 ofCoinItemobjekter, som vil blive brugt senere af vores igxGrid, igxListog igxCardkomponenter.

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.

publishReply (1, 300000) beder Rx om at cache den senest udsendte værdi og forblive gyldig i 5 minutter. Efter dette tidspunkt annullerer det cachen. refCount () fortæller Rx at holde den observerede i live, så længe der er nogen abonnenter.

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 BlockItemrækkesom igxGridkomponenten 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 BlockItemarray. Hver mn> represents a field of the object and it is used to define features like editing and sorting. The columns are templatable, and with the help of Angular pipes, we can declare display-value transformations in them easily. We use a decimal pipe to change the minimum number of integer digits before the decimal point.

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.