Hosszú ideig kerestem egy jó Portfolio webalkalmazást, amely segítségével könnyedén nyomon követhetem a kriptovaluta nyereségemet / veszteségemet, amíg el nem döntöttem, hogy a Firebase és az Angular segítségével egyedül fejlesztem ki ezeket ! Igen, ez ilyen egyszerű, hadd magyarázzam el neked, miért.
A Firebase tökéletes eszközt kínál a felhasználói hitelesítéssel és valós idejű adatbázis-tárolási igényekkel rendelkező alkalmazásokhoz. Gazdag dokumentációt és különféle fejlesztési példákat tartalmaz, amelyek segítségével bárki jobban megismerheti a csillagos alkalmazások létrehozásának módját.
Egy másik blogbejegyzésben kitértem az Angular alkalmazás bootstrapelésére az Ignite UI CLI használatával.
A cikk célja:
- Végezze el a Firebase telepítését és beállítását.
- Állítsa be a Firebase-hitelesítést.
- Valós idejű adatbázis-tárolás és szinkronizálás megvalósítása.
- Adja hozzá a Megfigyelhető adatszolgáltatásokat.
- Vizualizálja az adatokat egy szögletes alkalmazásban.
Konfigurálja a Firebase-fiókot
Végig szeretném járni a Portfolio Firebase-fiók beállításához szükséges lépéseket. A projektek a Firebase konzolból jönnek létre az Új projekt hozzáadása elem kiválasztásával . Miután elküldte a Projekt létrehozása űrlapot, megjelenik a következő Projekt áttekintés.
A Projektáttekintés részben megtalálhatja az összes fejlesztési eszközt, amelyet a hitelesítéshez és az adattároláshoz használnak. Itt található a Portfolio webalkalmazásban használt konfiguráció is. Ezt a konfigurációt úgy hozza létre, hogy megnyomja a Firebase hozzáadása a webalkalmazáshoz lehetőséget , majd később hozzáadja az alkalmazás app.module.ts fájljához.
Térjünk vissza a bal oldali oldalsávra, és válasszuk a Hitelesítés lehetőséget . Innen hozzáférünk az alkalmazásban szükséges bejelentkezési módszerekhez . Navigáljon a Bejelentkezés fülre, ahol láthatja a Portfolio alkalmazásban engedélyezett és használt szolgáltatókat - Google, Facebook és E-mail / jelszó szolgáltató .
A bejelentkezési szolgáltatók lehetővé teszik a felhasználóknak, hogy a Facebook és a Google-fiókok használatával hitelesítsék magukat a Firebase-ben a bejelentkezési adatok integrálásával az alkalmazásba. Ami az E-mail / jelszó szolgáltatót illeti, egyszerű hitelesítési mechanizmust képvisel, kizárólag e-mail és jelszó használatával. A Firebase Auth beépített ellenőrzési szabályokat biztosít a felhasználói bejegyzések ellenőrzéséhez, ezért itt nem kell konfigurálnunk valami további beállítást.
A „legtrükkösebb” rész itt a Facebook szolgáltató konfigurációja volt, mert a bejelentkezés hitelesítéséhez rendelkeznünk kellett egy Facebook alkalmazással . Hoztunk létre egy FB alkalmazást a Facebook fejlesztőktől, amely megadta nekünk a Firebase-től kért alkalmazásazonosítót és alkalmazástitkot.
Az API azonosítót és a Titkot is ki kell tölteni, amikor engedélyezi a Facebook szolgáltatót. Ami az Auth átirányítási URI-t illeti (a szolgáltató ablakából), azt be kell illeszteni Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.
Folytassuk a Firebase konzollal. Az Adatbázis nézet oldalon létrehoztunk egy valós idejű adatbázist.
Ebben a nézetben információkat találhatunk az alkalmazás adatelemeiről és az írási / olvasási biztonsági szabályokról. Az alábbiakban bemutatjuk a Portfolio alkalmazás által használt szabályokat:
{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}Oké, hol voltunk? Most, hogy elvégeztük a Portfolio Firebase fiók létrehozását, nézzük meg, hogyan jött létre a Firebase fejlesztési projekt .
Ha még nem készítettünk volna egy projektet, akkor azt javasoltam, hogy kezdjem a firebase CLI telepítését, amely számos eszközt biztosít a Firebase projektek kezeléséhez és telepítéséhez. DE elindítottuk a Portfolio Angular Project programot az Ignite UI CLI-vel, ezért csak telepítenünk kellett az AngularFire és a Firebase programokat npm-től . Mindkét csomagra szükségünk van a Firebase-nel való kommunikációhoz. Az AngularFire a Firebase és az Angular fejlesztés hivatalos könyvtára.
npm install firebase @angular/fire --saveAz alkalmazásban használt összes AngularFire modul hozzáadódik a app.module.tsfájlhoz:
- A FirestoreModule szükséges az adatbázis-szolgáltatásokhoz, például az adatfolyamokhoz és a manipulációkhoz tartozó gyűjteményekkel, lekérdezésekkel és szolgáltatásokkal való együttműködéshez.
- A FireAuthModule azszükségesek a hitelesítési funkciókhoz, például a hitelesítési állapot figyelemmel kíséréséhez, a bejelentkezési szolgáltatókhoz és a biztonsághoz.
- A FireDatabaseModule lehetővé teszi számunkra, hogy valós idejű adatbázisokkal dolgozzunk. Nagyon hatékony azoknak a mobil- és webalkalmazásoknak, amelyek valós idejű szinkronizált állapotokat igényelnek az ügyfelek között.
Most, hogy tudjuk, hogyan konfigurálták az alkalmazást eredetileg, áttekinthetjük a Firebase többi használt funkcióját .
Hitelesítés
HasználunkAngularFireAuth szolgáltatásaz alkalmazás hitelesítési állapotának figyelemmel kísérésére. AngularFireAuth.authvisszaad egy inicializált firebase.auth.Authpéldányt, lehetővé téve számunkra a felhasználók be- és kijelentkezését. Az alkalmazás három szolgáltató segítségével demonstrálja a bejelentkezési képességeket: Facebook, Google és Email.
A Firebase felhasználói példány minden, a felhasználóhoz kapcsolt szolgáltató számára megmarad, és amikor egy felhasználót regisztrálnak vagy bejelentkezik, akkor az a felhasználó lesz az Auth példány jelenlegi felhasználója. A példány megtartja a felhasználó állapotát, hogy az oldal frissítése vagy az alkalmazás újraindítása ne veszítse el a felhasználó adatait.
A signInWithRedirectFacebook és a Google szolgáltatók számára egyaránt alkalmazunk egy módszert a bejelentkezési oldalra történő átirányítással történő bejelentkezéshez. Jelszóalapú fiók létrehozása az e-mail bejelentkezési szolgáltatóhoz használható,createUserWithEmailAndPasswordés signInWithEmailAndPasswordazok a módszerek, amelyek felelősek a felhasználói fiók létrehozásáért és a bejelentkezésért.
A hitelesítésről és a felhasználói életciklusról részletesebb információkért a hivatalos Firebase dokumentumokat ajánlom.
Valós idejű adatbázis-műveletek
A Firebase két felhőalapú, kliens által elérhető adatbázis-megoldást kínál, mi pedig a Firebase eredeti adatbázisát - a Realtime-ot - használjuk. Nézze meg a Realtime és a Cloud firestore közötti különbségeket a hivatalos dokumentáció oldalon.
AngularFireDatabaseés AngularFireListszolgáltatásokat használnak a Portfolio alkalmazásban az adatok egyszerű lekérésére, mentésére és eltávolítására.
AngularFireDatabaseinjektálható egy alkatrész konstruktorán keresztül, vagy @Injectable()szolgáltatás. Esetünkben a második megközelítést alkalmazzuk:
Az adatokat a AngularFireDatabaseszolgáltatás, amely kitölti a megfigyelhető listát BlockItems.AngularFireolyan módszereket nyújt snapshotChanges(), amelyek szinkronizált tömbként adják meg az Observable of data-t. Nagyon hasznos, ha korlátozni szeretné az esemény műveleteit, például hozzáadni , megváltoztatni , eltávolítani és áthelyezni . Alapértelmezés szerint mind a négyet meghallgatja, azonban lehet, hogy csak az egyik ilyen esemény érdekli, és megadhatja, hogy melyiket szeretné használni. Jelentkezésünkben mindegyikre feliratkoztunk.
Új tétel hozzáadása, frissítése egy meglévő, vagy eltávolítja a listából alkalmazásával érjük el push(), update()és remove()módszereket.
Minden adatkezelési módszer ígéretet ad vissza, bár a teljesítés ígéretét nem kell használnunk a siker jelzésére, mert a valós idejű adatbázis szinkronban tartja a listát.
Megfigyelhetők
CoinItem szolgáltatás
A Cryptocompare API szolgáltatás az aszinkron adatokat kezeli, és egyszerre több értéket bocsát ki Observables. HttpClient get()Módszert használunk az adatok lekérésére az erőforrástól és feliratkozásukra annak érdekében, hogy azokat megfigyelhető tömbvé alakítsuk átCoinItemtárgyak, amelyek később felhasználható a mi igxGrid, igxListés igxCardalkatrészek.
Az Rx.js lehetővé teszi számunkra, hogy gyorsítótárba tegyük a HTTP kérés eredményét. Ezeket az adatokat először lekérjük, gyorsítótárba helyezzük, és az alkalmazás élettartama alatt a gyorsítótárazott verziót használjuk. A kombináció publishReply(1, 300000)és refCount()a következőket teszi.
Miután feliratkoztunk az Érmék listára, az eredmény tárolódik, és nem kell újabb HTTP-kérelmet benyújtanunk.
BlockItem szolgáltatás
A portfólió kriptoérmék adatait az getItemsList()Observable BlockItemtömböt eredményező módszer biztosítjaamelyre az igxGridalkatrész feliratkozott. Csak hitelesített felhasználók használhatják ezt a szolgáltatást, mivel az AngularFireListáltalunk manipulált egyedi felhasználói azonosítókhoz van társítva.
Vizualizálja az adatokat
A megjelenítéshez az Ignite UI for Angularlibrary felhasználói felületének összetevőit használjuk. Ezek az összetevők felelősek az adatkezelésért, miközben hozzáférést biztosítanak az egyéni sablonokhoz és a valós idejű frissítésekhez, intuitív API-val, minimális mennyiségű kód felhasználásával.
igxGrid
[data]A visszaadott BlockItemtömb átadásához a rács tulajdonságkötést használják . Minden egyes
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.
