Kuidas ehitada Firebase Angulari rakendus koos autentimise ja reaalajas andmebaasiga

Pikka aega otsisin head Portfolio veebirakendust, mis aitaks mul oma krüptoraha kasumeid / kahjumeid hõlpsalt jälgida, kuni olen otsustanud Firebase'i ja Angulari abil ise sellist välja arendada ! Jah, see on nii lihtne, lubage mul teile selgitada, miks.

Firebase pakub täiuslikku tööriista kasutajate autentimise ja reaalajas andmebaasi salvestamise vajadustega rakenduste jaoks. See pakub rikkalikku dokumentatsiooni koos mitmesuguste arendusnäidetega, et aidata kellelgi paremini mõista, kuidas täherakendusi luua.

Olen käsitlenud Angulari rakenduse alglaadimist, kasutades Ignite UI CLI-d, ühes teises ajaveebipostituses.

Selle artikli eesmärk on:

  • Tehke Firebase'i installimine ja seadistamine.
  • Seadistage Firebase'i autentimine.
  • Rakendage andmebaasi reaalajas salvestamine ja sünkroonimine.
  • Lisage jälgitavad andmesideteenused.
  • Visualiseerige andmeid nurgarakenduses.

Konfigureerige Firebase'i konto

Soovin läbi viia sammud, mille oleme Portfolio Firebase'i konto seadistamiseks teinud. Projektid luuakse Firebase'i konsoolist, valides Lisa uus projekt. Pärast projekti loomise vormi esitamist näete järgmist projekti ülevaadet.

Jaotises Projekti ülevaade leiate kõik arendustööriistad, mida kasutatakse autentimiseks ja andmete salvestamiseks. Siin asub ka konfiguratsioon, mida kasutatakse portfelli veebirakenduses. Selle konfiguratsiooni genereerimiseks vajutage oma veebirakendusse Firebase'i lisamine ja see lisatakse hiljem rakenduse app.module.ts faili.

Naaseme vasakpoolsele küljeribale ja valige Autentimine . Siit on meil juurdepääs rakenduses vajalikele sisselogimismeetoditele . Liikuge vahekaardile Sisselogimine. Seal näete teenusepakkujaid, mis on rakenduses Portfolio lubatud ja kasutatud - Google, Facebook ja E-posti / parooli pakkuja .

Sisselogimisteenuste pakkujad lasevad kasutajatel Firebase'is oma Facebooki ja Google'i kontode abil autentida, integreerides oma sisselogimised rakendusse. Mis puudutab e-posti / parooli pakkujat, siis see tähendab lihtsat autentimismehhanismi, kasutades ainult e-posti ja parooli. Firebase Auth pakub sisseehitatud valideerimisreegleid, mis kontrollivad kasutaja sisestusi, nii et meil pole vaja siin midagi täiendavat konfigureerida.

Kõige keerukam osa oli siin Facebooki pakkuja konfiguratsioon, sest sisselogimise autentimiseks oli meil vaja Facebooki rakendust . Oleme loonud FB rakenduse Facebooki arendajatelt, mis andis meile Firebase'ilt taotletud rakenduse ID ja rakenduse saladuse.

Facebooki pakkuja lubamisel tuleks täita nii API ID kui ka Secret . Mis puutub Auth ümbersuunamise URI-d (pakkuja aknast), siis see tuleks kleepida alla Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

Jätkame Firebase'i konsooliga. Andmebaasi vaate lehelt oleme loonud reaalajas andmebaasi.

Selles vaates leiame teavet rakenduse andmeüksuste ja turvaeeskirjade kirjutamise / lugemise kohta. Allpool on reeglid, mida rakendus Portfolio kasutab:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}
See turvareegli konfiguratsioon võimaldab ainult autentitud kasutajatel meie andmebaasis lugeda ja kirjutada. Kui soovite õppida täpsemate reeglite määratlemist, soovitan tungivalt vaadata jaotist Ametlikud turvalisus ja reeglid.

Okei, kus me olime? Nüüd, kui oleme läbi teinud Portfolio Firebase'i konto loomise, vaatame, kuidas Firebase'i arendusprojekt loodi.

Kui meil pole veel projekti loodud, oleksin soovitanud alustada Firebase CLI installimisega, mis pakub Firebase'i projektide haldamiseks ja juurutamiseks mitmesuguseid tööriistu. AGA oleme käivitanud Portfolio Angular Projecti koos Ignite UI CLI-ga, nii et meil oli vaja lihtsalt installida AngularFire ja Firebase alates npm . Firebase'iga suhtlemiseks vajame mõlemat paketti. AngularFire on Firebase'i ja nurkade arendamise ametlik raamatukogu.

npm install firebase @angular/fire --save

Kõik AngularFire moodulid, mida rakenduses kasutatakse, lisatakse app.module.tsfaili:

  • FirestoreModule on vajalik andmebaasi funktsioonide jaoks, näiteks andmete voogesituse ja manipuleerimise kogude, päringute ja teenustega töötamiseks.
  • FireAuthModule onvajalik autentimisfunktsioonide jaoks, näiteks autentimise oleku jälgimine, sisselogimispakkujad ja turvalisus.
  • FireDatabaseModule võimaldab meil töötada reaalajas andmebaasidega. See on väga tõhus mobiil- ja veebirakenduste jaoks, mis nõuavad reaalajas klientide vahel sünkroonitud olekuid.
Ainus levinud moodul, mida rakenduses Portfolio ei kasutata, on AngularFireStorageModule. Selle mooduli abil saate kiiresti ja hõlpsalt salvestada ja teenindada kasutajate loodud sisu, näiteks fotosid ja videoid, samuti jälgida failidega seotud üleslaadimisi ja metaandmeid.

Nüüd, kui teame, kuidas rakendus algselt konfigureeriti, võime heita pilgu teistele kasutatavatele Firebase'i funktsioonidele .

Autentimine

Me kasutameAngularFireAuth teenusrakenduse autentimise oleku jälgimiseks. AngularFireAuth.authtagastab initsialiseeritud firebase.auth.Autheksemplari, mis võimaldab meil kasutajaid sisse ja välja logida. Rakendus näitab sisselogimisvõimalusi kolme teenusepakkuja abil: Facebook, Google ja Email.

Firebase'i kasutajaeksemplari hoitakse iga kasutajaga lingitud pakkuja jaoks ja kui kasutaja on registreeritud või sisse logitud, saab sellest kasutajast Auth-eksemplari praegune kasutaja. Eksemplar püsib kasutaja olekus, nii et lehe värskendamine või rakenduse taaskäivitamine ei kaota kasutaja teavet.

Me kasutame signInWithRedirectmeetodit nii Facebooki kui ka Google'i pakkujate jaoks sisselogimiseks sisselogimislehele suunamise kaudu. E-posti sisselogimise pakkuja jaoks kasutatakse paroolipõhist konto loomist,createUserWithEmailAndPasswordja signInWithEmailAndPasswordon meetodid, mis vastutavad kasutajakonto loomise ja sisselogimise eest.

Autentimise ja kasutaja elutsükli kohta täpsema teabe saamiseks soovitan ametlikke Firebase'i dokumente.

Reaalajas andmebaasi toimingud

Firebase pakub kahte pilvepõhist kliendile ligipääsetavat andmebaasilahendust ja me kasutame Firebase'i algset andmebaasi - Reaalajas. Vaadake ametliku dokumentatsiooni lehel erinevusi reaalajas ja pilve tuletõrje vahel.

AngularFireDatabaseja AngularFireListteenuseid kasutatakse rakenduses Portfell andmete hõlpsaks hankimiseks, salvestamiseks ja eemaldamiseks.

AngularFireDatabasesaab süstida läbi komponendi konstruktori või @Injectable()teenus. Meie puhul kasutame teist lähenemist:

Andmed leitakse AngularFireDatabaseteenus, mis täidab vaadeldava loendi BlockItems.AngularFirepakub selliseid meetodeid, snapshotChanges()mis tagastab sünkroonitud massiivina andmete jälgitavuse. See on väga mugav, kui soovite piirata sündmuste toiminguid, näiteks lisada , muuta , eemaldada ja teisaldada . Vaikimisi kuulab see kõiki nelja, kuid teid võib huvitada ainult üks neist sündmustest ja saate määrata, milliseid neist soovite kasutada. Oleme oma rakenduses kõik need tellinud.

Lisades uue elemendi, ajakohastada olemasolevat või eemaldada loendist on saavutatud kasutades push(), update()ja remove()meetodeid.

Iga andmeoperatsioonimeetod tagastab lubaduse, kuigi me ei pea edukuse näitamiseks kasutama lõpetamislubadust, kuna reaalajas andmebaas hoiab loendit sünkroonis.

Vaatlusalused

Teenus CoinItem

Cryptocompare API teenus haldab asünkroonitud andmeid ja väljastab korraga mitu väärtust Observables. Me kasutame HttpClient get()meetodit ressursilt andmete küsimiseks ja nende tellimiseks, et teisendada need jälgitavaks massiiviksCoinItemVastuväiteid, mida kasutatakse hiljem meie igxGrid, igxListja igxCardkomponente.

Rx.js võimaldab meil HTTP-päringu tulemust vahemällu salvestada. Esmalt hankime need andmed, salvestame need vahemällu ja kasutame vahemällu salvestatud versiooni rakenduse eluea jooksul. Kombinatsioon publishReply(1, 300000)ja refCount()teeb järgmist.

publishReply (1, 300000) käsib Rxil vahemällu salvestada uusim väljastatud väärtus ja jääda kehtima 5 minutiks. Selle aja möödudes muudab see vahemälu kehtetuks. refCount () käsib Rx-l jälgida, et jälgitav oleks elus, kuni tellijaid on.

Nüüd, kui oleme müntide loendi tellinud, salvestatakse tulemus vahemällu ja me ei pea uut HTTP-päringut tegema.

Teenus BlockItem

Portfelli krüptomüntide andmed tagatakse getItemsList()meetodiga, mis tagastab jälgitava BlockItemmassiivimillele igxGridkomponent on tellitud. Ainult autentitud kasutajad saavad seda teenust kasutada, kuna see AngularFireList, millega me manipuleerime, on seotud ainulaadsete kasutaja ID-dega.

Visualiseerige andmeid

Visualiseerimiseks kasutame nurkraamatukogu jaoks Ignite UI kasutajaliidese komponente. Need komponendid vastutavad andmetöötluse eest, pakkudes samal ajal juurdepääsu intuitiivse API-ga kohandatud mallidele ja reaalajas värskendustele, kasutades minimaalse hulga koodi.

igxGrid

Võrgu [data]omaduste sidumist kasutatakse tagastatud BlockItemmassiivi edastamiseks. Iga 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.