de Zdravko Kolev

Cum să construiți o aplicație Firebase Angular cu autentificare și o bază de date în timp real

Cum sa construiti o aplicatie Firebase Angular cu autentificare si

Pentru o lungă perioadă de timp, am căutat o aplicație web de portofoliu bună, care să mă poată ajuta să îmi urmăresc cu ușurință profiturile / pierderile din criptomonedă până când am decis dezvolta astfel pe cont propriu cu ajutorul Firebase și unghiular! Da, este atât de ușor, permiteți-mi să vă explic de ce.

Firebase oferă instrumentele perfecte pentru aplicații cu autentificare de utilizator și Baza de date în timp real nevoile de depozitare. Oferă bogat documentație cu o varietate de dev exemple pentru a ajuta pe oricine să înțeleagă mai bine cum să creeze aplicații stelare.

Am acoperit Unghiular bootstrapping al aplicației, folosind Aprindeți UI CLI, in alt postare pe blog.

Acest articol are ca scop:

Configurați un cont Firebase

Vreau să parcurg pașii pe care i-am făcut pentru a configura contul Portfolio Firebase. Proiectele sunt create din Consola Firebase prin alegere Adăugați un proiect nou. Odata ce Creați un proiect formularul este trimis, veți vedea următoarea prezentare generală a proiectului.

Cum sa construiti o aplicatie Firebase Angular cu autentificare si
Prezentare generală a proiectului Firebase

În secțiunea Prezentare generală a proiectului, puteți găsi toate instrumentele de dezvoltare care sunt utilizate pentru autentificare și stocarea datelor. Aici este localizată și configurația care este utilizată în Portfolio Web App. Această configurație este generată prin apăsare Adăugați Firebase în aplicația dvs. web, și este adăugat ulterior în aplicație app.module.ts fişier.

Să revenim la bara laterală din stânga și să selectăm Autentificare. De aici avem acces la Metode de conectare de care avem nevoie în aplicație. Navigați la fila Conectare, acolo puteți vedea furnizorii care sunt activați și utilizați în aplicația Portofoliu – Google, Facebook și furnizor de e-mail / parolă.

Furnizorii de conectare permit utilizatorilor să se autentifice cu Firebase folosind conturile lor Facebook și Google, integrându-și datele de conectare în aplicație. În ceea ce privește furnizorul de e-mail / parolă, acesta reprezintă un mecanism simplu de autentificare utilizând numai e-mail și parolă. Firebase Auth oferă reguli de validare încorporate care verifică intrările utilizatorului, deci nu este nevoie să configurăm ceva suplimentar aici.

1611577931 644 Cum sa construiti o aplicatie Firebase Angular cu autentificare si

Partea „cea mai dificilă” de aici a fost configurația furnizorului Facebook, deoarece aveam nevoie să avem un Aplicația Facebook pentru a autentifica autentificarea. Am creat o aplicație FB de la Dezvoltatori Facebook care ne-a furnizat ID-ul aplicației și secretul aplicației solicitate de la Firebase.

1611577932 129 Cum sa construiti o aplicatie Firebase Angular cu autentificare si

Ambii ID API și Secret trebuie completat atunci când activați furnizorul Facebook. cât despre URI de redirecționare Auth (din fereastra furnizorului) ar trebui lipit sub Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

Să continuăm cu consola Firebase. Din pagina de vizualizare a bazei de date, am creat un Baza de date în timp real.

1611577932 673 Cum sa construiti o aplicatie Firebase Angular cu autentificare si
Vizualizarea bazei de date Firebase

În această vizualizare, putem găsi informații despre elementele de date ale aplicației și să scriem / citim reguli de securitate. Mai jos sunt regulile utilizate de aplicația Portofoliu:

{  "rules": {    "items": {      "$uid": {        ".read": "$uid === auth.uid",        ".write": "$uid === auth.uid"      }    }  }}

Această configurație a regulii de securitate va permite doar utilizatorilor autentificați să poată citi și scrie în baza noastră de date. Dacă doriți să aflați cum să definiți reguli mai avansate, vă recomandăm să verificați Securitate și reguli oficiale secțiune.

Bine, unde eram? Acum că am trecut prin Portofoliu Cont Firebase creație, să vedem cum Proiect de dezvoltare Firebase a fost creat.

Dacă nu am avea deja un proiect creat, aș fi recomandat să începem cu instalarea firebase CLI, care oferă o varietate de instrumente pentru gestionarea și implementarea proiectelor Firebase. DAR am pornit Portofoliu proiect angular cu Ignite UI CLI, așa că a trebuit doar să instalăm AngularFire și Firebase din npm. Avem nevoie de ambele pachete pentru a comunica cu Firebase. AngularFire este biblioteca oficială pentru dezvoltarea Firebase și Angular.

npm install firebase @angular/fire --save

Toate modulele AngularFire care sunt utilizate în aplicație sunt adăugate în app.module.ts fişier:

  • FirestoreModule este necesar pentru funcțiile bazei de date, cum ar fi lucrul cu colecții, interogări și servicii pentru transmiterea și manipularea datelor.
  • FireAuthModule este necesare pentru funcții de autentificare precum monitorizarea stării de autentificare, furnizorii de logare și securitate.
  • FireDatabaseModule ne permite să lucrăm cu baze de date în timp real. Este foarte eficient pentru aplicațiile mobile și web care necesită stări sincronizate între clienți în timp real.

Singurul modul comun care nu este utilizat în aplicația Portofoliu este AngularFireStorageModule. Puteți utiliza acest modul pentru a stoca și distribui rapid și ușor conținut generat de utilizatori, cum ar fi fotografii și videoclipuri, precum și pentru a monitoriza încărcările și metadatele asociate fișierelor.

Acum, că știm cum a fost configurată inițial aplicația, ne putem uita la cealaltă Caracteristici Firebase care sunt folosite.

Autentificare

Folosim AngularFireAuth serviciu pentru a monitoriza starea de autentificare a aplicației. AngularFireAuth.auth returnează un inițializat firebase.auth.Auth de exemplu, permițându-ne să conectăm și deconectăm utilizatorii. Aplicația demonstrează capacitățile de conectare utilizând trei furnizori: Facebook, Google și e-mail.

Instanța de utilizator Firebase este păstrată pentru fiecare furnizor conectat la utilizator și, atunci când un utilizator este înregistrat sau se conectează, utilizatorul respectiv devine utilizatorul actual al instanței Auth. Instanța persistă starea utilizatorului, astfel încât reîmprospătarea paginii sau repornirea aplicației să nu piardă informațiile utilizatorului.

Folosim signInWithRedirect atât pentru furnizorii Facebook, cât și pentru Google, pentru a vă conecta redirecționând la pagina de conectare. Cont bazat pe parolă crearea este utilizată pentru furnizorul de conectare prin e-mail, createUserWithEmailAndPassword și signInWithEmailAndPassword sunt metodele responsabile pentru crearea și conectarea contului de utilizator.

Cum sa construiti o aplicatie Firebase Angular cu autentificare si
Vizualizare cont pe bază de parolă

Recomand documentele oficiale Firebase pentru informații mai detaliate despre autentificare și ciclul de viață al utilizatorului.

Acțiuni de baze de date în timp real

Firebase oferă două soluții de baze de date accesibile pentru clienți, bazate pe cloud, și folosim baza de date originală Firebase – în timp real. Verificați diferențele dintre Timp real și Cloud Firestore pe oficial pagina de documentare.

AngularFireDatabase și AngularFireList serviciile sunt utilizate în aplicația Portofoliu pentru a prelua, salva și elimina date cu ușurință.

AngularFireDatabase poate fi injectat prin constructorul unei componente sau @Injectable() serviciu. În cazul nostru folosim a doua abordare:

Datele sunt recuperate prin AngularFireDatabase , care completează lista observabilă de BlockItems. AngularFire oferă metode precum snapshotChanges() care returnează Observabil de date ca o matrice sincronizată. Este foarte util dacă doriți să limitați acțiunile evenimentului, cum ar fi adăugat, schimbat, îndepărtat și mutat. În mod implicit, îi ascultă pe toți cei patru, cu toate acestea, este posibil să fiți interesat doar de unul dintre aceste evenimente și puteți specifica care dintre ele doriți să le utilizați. În aplicația noastră, suntem abonați la toate.

Adăugarea unui element nou, actualizarea unuia existent sau eliminarea acestuia din listă se realizează prin utilizarea push(), update() și remove() metode.

Fiecare metodă de operare a datelor returnează o promisiune, deși nu este necesar să folosim promisiunea de finalizare pentru a indica succesul, deoarece baza de date în timp real menține lista sincronizată.

Observabile

Serviciu CoinItem

Serviciul API Cryptocompare gestionează date asincronizate și emite mai multe valori la un moment dat cu Observables. Folosim HttpClient get()metodă de solicitare a datelor de la resursa și abonați-vă la el, pentru a-l transforma în matrice observabilă a CoinItem obiecte, care vor fi utilizate ulterior de către igxGrid, igxList, și igxCard componente.

Rx.js ne permite să memorăm în cache rezultatul cererii HTTP. Preluăm aceste date inițial, le stocăm în cache și folosim versiunea cache pe durata de viață a aplicației. Combinația dintre publishReply(1, 300000) și refCount() face următoarele.

publishReply (1, 300000) îi spune lui Rx să cache cea mai recentă valoare emisă și să rămână valabilă timp de 5 minute. După acest timp, va invalida memoria cache.

refCount () îi spune lui Rx să păstreze Observabilul în viață atâta timp cât există abonați.

Acum, după ce ne-am abonat la lista de monede, rezultatul va fi stocat în cache și nu va mai fi nevoie să facem o altă solicitare HTTP.

Serviciu BlockItem

Datele portofoliului Crypto Coins sunt asigurate de getItemsList() metoda care returnează Observable BlockItem matrice la care igxGrid componentă este abonată. Numai utilizatorii autentificați pot utiliza acest serviciu din cauza AngularFireList pe care îl manipulăm este asociat cu ID-uri de utilizator unice.

Vizualizați datele

Pentru vizualizare, folosim UI Components din Aprindeți interfața pentru Angularbibliotecă. Aceste componente sunt responsabile pentru gestionarea datelor, oferind în același timp acces la șabloane personalizate și actualizări în timp real, cu API intuitiv, prin utilizarea unui cod de sumă minimă.

igxGrid

Grile [data] legarea proprietății este utilizată pentru a trece returnat BlockItem matrice. Fiecare <igx-column> reprezintă un câmp al obiectului și este utilizat pentru a defini caracteristici precum editarea și sortarea. Coloanele sunt șablonabile și cu help de Angular conducte, putem declara cu ușurință transformări de afișare-valoare în ele. Folosim o țeavă zecimală pentru a schimba numărul minim de cifre întregi înainte de punctul zecimal.

Componenta oferă gestionare de evenimente simplă și API pentru operațiuni CRUD. Manipulatorilor le place updateRow și deleteRow implementează logică suplimentară precum AngularFireList manipularea și restabilirea logicii cu monedele igxSnackbar.

igxCard

Carduri sunt utilizate pentru a furniza informații generale despre monedele Crypto folosind CSS Aspect flexbox. Aceste componente ale cardului pot fi filtrate cu igxFilter directivă, care poate fi utilizată pentru a filtra diferite surse de date. igxFilter poate fi aplicat ca țeavă sau ca directivă.

igxFinancialChart

Diagrama oferă mai multe moduri în care datele pot fi vizualizate și interpretate, odată ce sunt returnate de către serviciu. Există mai multe moduri de afișare pentru preț și volum, iar în cazul nostru îl folosim chartType=”candle”.

Componenta graficului financiar analizează și selectează automat coloanele de date:
Date/Time coloană de utilizat x-axis
Open, High, Low, Close, Volume coloane sau primele 5 coloane numerice pentru y-axis

Theming

IgniteUI for Angular își bazează proiectarea componentelor pe Principiile de proiectare a materialelor și cu doar câteva linii de cod, putem schimba cu ușurință culorile, dimensiunile, tipografia și aspectul general al componentelor noastre.

Acum că am furnizat toate definițiile de bază necesare pentru igx-theme, și au configurat fișierul igx-dark-theme mixin, trebuie să aplicăm numai .light-theme și .dark-theme Clase CSS undeva la nivelul rădăcinii elementului DOM și comutați-l la clic pe buton.

Rezultat

1611577933 479 Cum sa construiti o aplicatie Firebase Angular cu autentificare si

Înfășurându-se

Totul este posibil cu sculele potrivite. Am creat o aplicație web de portofoliu utilizând puterea maximă a cadrului angular, a serviciilor de autentificare Firebase și a stocării / sincronizării bazei de date cloud.

Puteți găsi Depozitul GitHub și portofoliul propriu-zis cerere aici.

Simțiți-vă liber să împărtășiți în comentariile de mai jos orice întrebări pe care le aveți, sugestii cu privire la ce poate fi îmbunătățit sau modificat în aplicație sau orice probleme pe care le-ați întâmpinat la configurarea contului sau aplicației Firebase