So erstellen Sie eine Firebase Angular-App mit Authentifizierung und einer Echtzeitdatenbank

Lange Zeit suchte ich nach einer guten Portfolio-Web-App, mit der ich meine Gewinne / Verluste aus der Kryptowährung einfach nachverfolgen kann, bis ich mich entschlossen habe, diese mithilfe von Firebase und Angular selbst zu entwickeln ! Ja, so einfach ist das. Lassen Sie mich Ihnen erklären, warum.

Firebase bietet das perfekte Tool für Anwendungen mit Benutzerauthentifizierung und Echtzeitdatenbankspeicheranforderungen. Es bietet eine umfangreiche Dokumentation mit einer Vielzahl von Entwicklungsbeispielen, damit jeder besser verstehen kann, wie herausragende Apps erstellt werden.

Ich habe das Bootstrapping der Angular- Anwendung mithilfe der Ignite UI CLI in einem anderen Blog-Beitrag behandelt.

Dieser Artikel zielt darauf ab:

  • Führen Sie die Installation und Einrichtung von Firebase durch.
  • Richten Sie die Firebase-Authentifizierung ein.
  • Implementieren Sie das Speichern und Synchronisieren von Echtzeitdatenbanken.
  • Fügen Sie Observable-Datendienste hinzu.
  • Visualisieren Sie die Daten in einer Angular-Anwendung.

Konfigurieren Sie ein Firebase-Konto

Ich möchte die Schritte ausführen, die wir zum Einrichten des Portfolio Firebase-Kontos unternommen haben. Projekte werden über die Firebase-Konsole erstellt, indem Sie Neues Projekt hinzufügen wählen . Sobald das Formular zum Erstellen eines Projekts gesendet wurde, wird die folgende Projektübersicht angezeigt.

Im Abschnitt Projektübersicht finden Sie alle Entwicklungstools, die für die Authentifizierung und Datenspeicherung verwendet werden. Hier befindet sich auch die Konfiguration, die in der Portfolio Web App verwendet wird. Diese Konfiguration wird durch Drücken von Add Firebase zu Ihrer Webanwendung generiert und später in der Datei app.module.ts der Anwendung hinzugefügt .

Kehren wir zur linken Seitenleiste zurück und wählen Sie Authentifizierung . Von hier aus haben wir Zugriff auf die Anmeldemethoden , die wir in der App benötigen. Navigieren Sie zur Registerkarte Anmelden. Dort sehen Sie die Anbieter, die in der Portfolio-Anwendung aktiviert und verwendet werden - Google, Facebook und E-Mail- / Kennwortanbieter .

Mit Anmeldeanbietern können sich Benutzer über ihre Facebook- und Google-Konten bei Firebase authentifizieren, indem sie ihre Anmeldungen in die App integrieren. Der E-Mail- / Passwortanbieter stellt einen einfachen Authentifizierungsmechanismus dar, bei dem nur E-Mail und Passwort verwendet werden. Firebase Auth bietet integrierte Validierungsregeln zur Überprüfung der Benutzereinträge, sodass wir hier keine zusätzlichen Einstellungen vornehmen müssen.

Der „schwierigste“ Teil hier war die Konfiguration des Facebook-Anbieters, da wir eine Facebook-Anwendung benötigen, um die Anmeldung zu authentifizieren. Wir haben eine FB-App von Facebook-Entwicklern erstellt, die uns die von Firebase angeforderte App-ID und das App-Geheimnis zur Verfügung gestellt hat.

Sowohl API-ID als auch Secret sollten ausgefüllt werden, wenn der Facebook-Anbieter aktiviert wird. Der Auth-Redirect-URI (aus dem Provider-Fenster) sollte unter eingefügt werden Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

Fahren wir mit der Firebase-Konsole fort. Auf der Seite Datenbankansicht haben wir eine Echtzeitdatenbank erstellt .

In dieser Ansicht finden wir Informationen zu den Anwendungsdatenelementen und schreiben / lesen Sicherheitsregeln. Nachfolgend sind die Regeln aufgeführt, die von der Portfolio-Anwendung verwendet werden:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}
Mit dieser Sicherheitsregelkonfiguration können nur authentifizierte Benutzer in unserer Datenbank lesen und schreiben. Wenn Sie erfahren möchten, wie Sie erweiterte Regeln definieren, empfehlen wir Ihnen dringend, den Abschnitt Offizielle Sicherheit und Regeln zu lesen.

Okay, wo waren wir? Nachdem wir die Erstellung des Portfolio Firebase-Kontos durchlaufen haben, sehen wir uns an , wie das Firebase-Entwicklungsprojekt erstellt wurde.

Wenn wir noch kein Projekt erstellt hätten, hätte ich empfohlen, mit der Installation der Firebase-CLI zu beginnen, die eine Vielzahl von Tools zum Verwalten und Bereitstellen von Firebase-Projekten bietet. ABER wir haben das Portfolio Angular Project mit Ignite UI CLI gebootet , sodass wir AngularFire und Firebase nur von npm installieren mussten . Wir benötigen beide Pakete, um mit Firebase zu kommunizieren. AngularFire ist die offizielle Bibliothek für die Entwicklung von Firebase und Angular.

npm install firebase @angular/fire --save

Alle AngularFire-Module, die in der Anwendung verwendet werden, werden in der app.module.tsDatei hinzugefügt :

  • FirestoreModule wird für Datenbankfunktionen wie das Arbeiten mit Sammlungen, Abfragen und Diensten für Daten-Streaming und -Manipulation benötigt.
  • FireAuthModule istWird für Authentifizierungsfunktionen wie Überwachung des Authentifizierungsstatus, Anmeldeanbieter und Sicherheit benötigt.
  • Mit FireDatabaseModule können wir mit Echtzeitdatenbanken arbeiten. Es ist sehr effizient für mobile und Web-Apps, die synchronisierte Zustände zwischen Clients in Echtzeit erfordern.
Das einzige allgemeine Modul, das in der Portfolio-App nicht verwendet wird, ist AngularFireStorageModule. Mit diesem Modul können Sie schnell und einfach benutzergenerierte Inhalte wie Fotos und Videos speichern und bereitstellen sowie Uploads und Metadaten überwachen, die mit Dateien verknüpft sind.

Nachdem wir nun wissen, wie die App ursprünglich konfiguriert wurde, können wir uns die anderen verwendeten Firebase-Funktionen ansehen .

Authentifizierung

Wir gebrauchenAngularFireAuth Bedienungum den App-Authentifizierungsstatus zu überwachen. AngularFireAuth.authGibt eine initialisierte firebase.auth.AuthInstanz zurück, mit der wir Benutzer an- und abmelden können. Die App demonstriert Anmeldefunktionen mit drei Anbietern: Facebook, Google und E-Mail.

Die Firebase-Benutzerinstanz wird für jeden mit dem Benutzer verknüpften Anbieter beibehalten. Wenn ein Benutzer registriert ist oder sich anmeldet, wird dieser Benutzer zum aktuellen Benutzer der Auth-Instanz. Die Instanz behält den Status des Benutzers bei, damit beim Aktualisieren der Seite oder beim Neustart der Anwendung die Benutzerinformationen nicht verloren gehen.

Wir verwenden die signInWithRedirectMethode sowohl für Facebook- als auch für Google-Anbieter, um uns durch Weiterleiten auf die Anmeldeseite anzumelden. Die passwortbasierte Kontoerstellung wird für den E-Mail-Anmeldeanbieter verwendet.createUserWithEmailAndPasswordund signInWithEmailAndPasswordsind die Methoden, die für die Erstellung und Anmeldung des Benutzerkontos verantwortlich sind.

Ich empfehle die offiziellen Firebase-Dokumente für detailliertere Informationen zur Authentifizierung und zum Benutzerlebenszyklus.

Echtzeit-Datenbankaktionen

Firebase bietet zwei Cloud-basierte, auf Clients zugängliche Datenbanklösungen an. Wir verwenden die ursprüngliche Datenbank von Firebase - Realtime. Überprüfen Sie die Unterschiede zwischen Realtime und Cloud Firestore auf der offiziellen Dokumentationsseite.

AngularFireDatabaseund AngularFireListDienste werden in der Portfolio-App verwendet, um Daten einfach abzurufen, zu speichern und zu entfernen.

AngularFireDatabasekann durch den Konstruktor einer Komponente oder injiziert werden @Injectable()Bedienung. In unserem Fall verwenden wir den zweiten Ansatz:

Daten werden über die abgerufen AngularFireDatabaseService, der die beobachtbare Liste von füllt BlockItems.AngularFirebietet Methoden wie diese snapshotChanges(), die Observable of data als synchronisiertes Array zurückgeben. Es ist sehr praktisch , wenn Sie Ereignisaktionen beschränken möchten, wie hinzugefügt , geändert , entfernt und bewegt . Standardmäßig werden alle vier Ereignisse abgehört. Möglicherweise sind Sie jedoch nur an einem dieser Ereignisse interessiert, und Sie können angeben, welches davon Sie verwenden möchten. In unserer Bewerbung haben wir alle abonniert.

Hinzufügen ein neues Element, einen vorhandenen aktualisieren oder sie aus der Liste zu entfernen wird durch die Verwendung erreicht push(), update()und remove()Methoden.

Jede Datenoperationsmethode gibt ein Versprechen zurück, obwohl wir das Abschlussversprechen nicht verwenden müssen, um den Erfolg anzuzeigen, da die Echtzeitdatenbank die Liste synchron hält.

Observables

CoinItem-Dienst

Der Cryptocompare-API-Dienst verwaltet asynchrone Daten und gibt mit mehrere Werte gleichzeitig aus Observables. Wir verwenden die HttpClient get()Methode, um die Daten von der Ressource anzufordern und zu abonnieren, um sie in Observable Array of umzuwandelnCoinItemObjekte, die später von unseren verwendet igxGridwerden igxList, und igxCardKomponenten.

Mit Rx.js können wir das Ergebnis der HTTP-Anforderung zwischenspeichern. Wir rufen diese Daten zunächst ab, zwischenspeichern sie und verwenden die zwischengespeicherte Version während der Lebensdauer der Anwendung. Die Kombination von publishReply(1, 300000)und refCount()bewirkt Folgendes.

publishReply (1, 300000) weist Rx an, den zuletzt ausgegebenen Wert zwischenzuspeichern und 5 Minuten lang gültig zu bleiben. Nach dieser Zeit wird der Cache ungültig. refCount () weist Rx an, das Observable am Leben zu halten, solange Abonnenten vorhanden sind.

Nachdem wir die Münzliste abonniert haben, wird das Ergebnis zwischengespeichert, und wir müssen keine weitere HTTP-Anfrage stellen.

BlockItem-Dienst

Die Daten von Portfolio Crypto Coins werden durch eine getItemsList()Methode sichergestellt , die das Observable- BlockItemArray zurückgibtdie die igxGridKomponente abonniert hat. Nur authentifizierte Benutzer können diesen Dienst verwenden, da die von AngularFireListuns manipulierten Benutzer eindeutigen Benutzer-IDs zugeordnet sind.

Visualisieren Sie die Daten

Für die Visualisierung verwenden wir UI-Komponenten aus der Ignite UI for Angularlibrary. Diese Komponenten sind für die Datenverarbeitung verantwortlich und bieten Zugriff auf benutzerdefinierte Vorlagen und Echtzeitaktualisierungen mit intuitiver API unter Verwendung von Code mit minimaler Menge.

igxGrid

Die [data]Bindung der Grids- Eigenschaften wird verwendet, um das zurückgegebene BlockItemArray zu übergeben. Jedermn> 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

Original text


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.