Comment créer une application Firebase Angular avec authentification et une base de données en temps réel

Pendant longtemps, je cherchais une bonne application Web Portfolio qui puisse m'aider à suivre facilement mes profits / pertes de crypto-monnaie jusqu'à ce que je décide de la développer moi-même avec l'aide de Firebase et Angular ! Oui, c'est aussi simple que ça, laissez-moi vous expliquer pourquoi.

Firebase offre l'outillage parfait pour les applications avec des besoins d'authentification utilisateur et de stockage de base de données en temps réel. Il fournit une documentation riche avec une variété d'exemples de développement pour aider tout le monde à mieux comprendre comment créer des applications stellaires.

J'ai couvert le démarrage de l'application Angular , à l'aide d'Ignite UI CLI, dans un autre article de blog.

Cet article vise à:

  • Suivez l'installation et la configuration de Firebase.
  • Configurez l'authentification Firebase.
  • Implémentez le stockage et la synchronisation de la base de données en temps réel.
  • Ajoutez des services de données observables.
  • Visualisez les données dans une application angulaire.

Configurer un compte Firebase

Je souhaite passer en revue les étapes que nous avons suivies pour configurer le compte Portfolio Firebase. Les projets sont créés à partir de la console Firebase en choisissant Ajouter un nouveau projet. Une fois le formulaire de création de projet soumis, vous verrez l'aperçu du projet suivant.

Dans la section Présentation du projet, vous pouvez trouver tous les outils de développement utilisés pour l'authentification et le stockage des données. Ici se trouve également la configuration utilisée dans l'application Web Portfolio. Cette configuration est générée en appuyant sur Ajouter Firebase à votre application Web , et elle est ensuite ajoutée dans le fichier app.module.ts de l'application .

Revenons à la barre latérale à gauche et sélectionnez Authentification . De là, nous avons accès aux méthodes de connexion dont nous avons besoin dans l'application. Accédez à l'onglet Connexion, où vous pouvez voir les fournisseurs qui sont activés et utilisés dans l'application Portfolio - Google, Facebook et fournisseur de messagerie / mot de passe .

Les fournisseurs de connexion permettent aux utilisateurs de s'authentifier auprès de Firebase à l'aide de leurs comptes Facebook et Google en intégrant leurs identifiants dans l'application. Quant au fournisseur d'email / mot de passe, il représente un mécanisme d'authentification simple en utilisant uniquement l'email et le mot de passe. Firebase Auth fournit des règles de validation intégrées vérifiant les entrées utilisateur, nous n'avons donc pas besoin de configurer quelque chose de supplémentaire ici.

La partie «la plus délicate» ici était la configuration du fournisseur Facebook car nous devions avoir une application Facebook pour authentifier la connexion. Nous avons créé une application FB des développeurs Facebook qui nous a fourni l'ID d'application et le secret d'application demandés à Firebase.

L' ID API et le secret doivent être renseignés lors de l'activation du fournisseur Facebook. Quant à l' URI de redirection Auth (à partir de la fenêtre du fournisseur), il doit être collé sous Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

Continuons avec la console Firebase. Depuis la page d'affichage de la base de données, nous avons créé une base de données en temps réel.

Dans cette vue, nous pouvons trouver des informations sur les éléments de données d'application et les règles de sécurité en écriture / lecture. Voici les règles utilisées par l'application Portfolio:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}
Cette configuration de règle de sécurité permettra uniquement aux utilisateurs authentifiés de pouvoir lire et écrire dans notre base de données. Si vous souhaitez apprendre à définir des règles plus avancées, je vous recommande vivement de consulter la section Sécurité et règles officielles.

Ok, où en étions-nous? Maintenant que nous sommes passés par la création du compte Portfolio Firebase , voyons comment le projet de développement Firebase a été créé.

Si nous n'avions pas déjà créé de projet, j'aurais recommandé de commencer par installer la CLI Firebase, qui fournit une variété d'outils pour gérer et déployer des projets Firebase. MAIS nous avons amorcé le projet Angular Portfolio avec l'interface de ligne de commande Ignite, nous avons donc juste besoin d'installer AngularFire et Firebase à partir de npm . Nous avons besoin des deux packages pour communiquer avec Firebase. AngularFire est la bibliothèque officielle pour le développement Firebase et Angular.

npm install firebase @angular/fire --save

Tous les modules AngularFire utilisés dans l'application sont ajoutés dans le app.module.tsfichier:

  • FirestoreModule est nécessaire pour les fonctionnalités de base de données telles que le travail avec des collections, des requêtes et des services pour le streaming et la manipulation de données.
  • FireAuthModule estnécessaire pour les fonctionnalités d'authentification telles que la surveillance de l'état d'authentification, les fournisseurs de connexion et la sécurité.
  • FireDatabaseModule nous permet de travailler avec des bases de données en temps réel. Il est très efficace pour les applications mobiles et Web qui nécessitent des états synchronisés entre les clients en temps réel.
Le seul module commun qui n'est pas utilisé dans l'application Portfolio est AngularFireStorageModule. Vous pouvez utiliser ce module pour stocker et diffuser rapidement et facilement du contenu généré par les utilisateurs comme des photos et des vidéos, ainsi que pour surveiller les téléchargements et les métadonnées associées aux fichiers.

Maintenant que nous savons comment l'application a été configurée initialement, nous pouvons jeter un œil aux autres fonctionnalités de Firebase qui sont utilisées.

Authentification

Nous utilisonsAngularFireAuth un servicepour surveiller l'état d'authentification de l'application. AngularFireAuth.authrenvoie une firebase.auth.Authinstance initialisée , nous permettant de connecter et de déconnecter les utilisateurs. L'application démontre les capacités de connexion à l'aide de trois fournisseurs: Facebook, Google et Email.

L'instance utilisateur Firebase est conservée pour chaque fournisseur lié à l'utilisateur, et lorsqu'un utilisateur est enregistré ou se connecte, cet utilisateur devient l'utilisateur actuel de l'instance Auth. L'instance conserve l'état de l'utilisateur afin que l'actualisation de la page ou le redémarrage de l'application ne perde pas les informations de l'utilisateur.

Nous utilisons la signInWithRedirectméthode pour les fournisseurs Facebook et Google, afin de nous connecter en redirigeant vers la page de connexion. La création de compte basée sur un mot de passe est utilisée pour le fournisseur de connexion par e-mail,createUserWithEmailAndPasswordet signInWithEmailAndPasswordsont les méthodes responsables de la création et de la connexion du compte utilisateur.

Je recommande la documentation officielle de Firebase pour des informations plus détaillées sur l'authentification et le cycle de vie des utilisateurs.

Actions de base de données en temps réel

Firebase propose deux solutions de base de données basées sur le cloud et accessibles au client, et nous utilisons la base de données originale de Firebase - Realtime. Découvrez les différences entre Realtime et Cloud Firestore sur la page de documentation officielle.

AngularFireDatabaseet AngularFireListLes services sont utilisés dans l'application Portfolio pour récupérer, enregistrer et supprimer facilement des données.

AngularFireDatabasepeut être injecté via le constructeur d'un composant ou @Injectable()un service. Dans notre cas, nous utilisons la deuxième approche:

Les données sont récupérées via le AngularFireDatabaseservice, qui remplit la liste Observable de BlockItems.AngularFirefournit des méthodes comme snapshotChanges()celle qui renvoie Observable des données sous forme de tableau synchronisé. C'est très pratique si vous souhaitez limiter les actions d'événement, telles que l' ajout , la modification , la suppression et le déplacement . Par défaut, il écoute les quatre, cependant, vous ne pouvez être intéressé que par l'un de ces événements et vous pouvez spécifier lequel d'entre eux vous souhaitez utiliser. Dans notre application, nous sommes abonnés à tous.

Ajout d' un nouvel élément, la mise à jour d' un existant, ou le retirer de la liste est réalisée à l'aide push(), update()et les remove()méthodes.

Chaque méthode d'opération de données renvoie une promesse, bien que nous n'ayons pas besoin d'utiliser la promesse d'achèvement pour indiquer le succès, car la base de données en temps réel maintient la liste synchronisée.

Observables

Service CoinItem

Le service API Cryptocompare gère les données asynchrones et émet plusieurs valeurs à la fois avec Observables. Nous utilisons la HttpClient get()méthode pour demander les données de la ressource et y souscrire, afin de les transformer en tableau observable deCoinItemobjets, qui seront utilisés plus tard par nos igxGrid, igxListet des igxCardcomposants.

Rx.js nous permet de mettre en cache le résultat de la requête HTTP. Nous récupérons ces données dans un premier temps, les mettons en cache et utilisons la version mise en cache pendant la durée de vie de l'application. La combinaison de publishReply(1, 300000)et refCount()fait ce qui suit.

publishReply (1, 300000) indique à Rx de mettre en cache la dernière valeur émise et de rester valide pendant 5 minutes. Passé ce délai, cela invalidera le cache. refCount () dit à Rx de garder l'Observable en vie tant qu'il y a des abonnés.

Maintenant, après nous être abonné à la liste des pièces, le résultat sera mis en cache et nous n'aurons pas besoin de faire une autre requête HTTP.

Service BlockItem

Les données de Portfolio Crypto Coins sont assurées par une getItemsList()méthode qui renvoie un BlockItemtableau observableauquel le igxGridcomposant est abonné. Seuls les utilisateurs authentifiés peuvent utiliser ce service car AngularFireListnous manipulons est associé à des identifiants d'utilisateurs uniques.

Visualisez les données

Pour la visualisation, nous utilisons des composants d'interface utilisateur de l'interface utilisateur Ignite pour Angularlibrary. Ces composants sont responsables de la gestion des données tout en fournissant un accès à des modèles personnalisés et des mises à jour en temps réel, avec une API intuitive, en utilisant un code de quantité minimale.

igxGrid

La [data]liaison de propriété Grids est utilisée pour transmettre le BlockItemtableau renvoyé . Chaquemn> 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.