Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

Application en temps réel avec Angular et FireBase

Par le passé, je me suis fortement intéressé aux applications en temps réel. Je m’étais attaqué aux différentes façons que les technologies de l’époque nous offraient pour y parvenir, comme le periodic polling, le long polling et les websockets. Ça restait relativement complexe et coûteux à mettre en place dans une application traditionnelle, donc ces technos étaient plus réservées à des cas d’utilisation bien précis, comme les réseaux sociaux, les applications collaboratives, etc..

Aujourd’hui, je vous présente comme faire une application en temps réel avec Angular et la base de données temps réel de Firebase.

Attends, Sylvain… une application sans backend ?

Yup.

Qu’est qu’une BD Temps Réel ?

La base de données en temps réel (RTDB) de Firebase est une BD no sql documentaire autogérée et hébergée dans le cloud. Elle permet de syncroniser les données stockées au format JSON avec tous les clients en temps réel via une des méthodes énumérées en introduction.

Un autre gros avantage de la RTDB vient du fait qu’elle fonctionne même si le client est hors ligne. Toute transaction faite pendant qu’un client est hors ligne sera écrite dans un stockage local, puis synchronisée dès que la connexion se rétablie.

De plus, RTDB nous offre un système de règles définies au format JSON pour permettre d’appliquer des validations au niveau de l’accès aux données. Par validations, j’entends des validations standard de données, mais aussi des validations au niveau du jeton d’accès de l’utilisateur.

Pourquoi il n’y a pas de backend ?

Comme expliqué juste avant, Firebase gère déjà le processus d’authentification des utilisateurs. En étant authentifié auprès de Firebase, un jeton est émit à l’utilisateur qui doit être envoyé lors de chaque accès à un élément dans la BD. Vous savez aussi, comme mentionné au paragraphe ci-dessus, que RTBD permet d’appliquer des validations sur les données et sur le jeton d’accès pour permettre ou non l’accès à certaines données.

Il y a un cas bien précis que nous avons eu besoin d’ajouter une cloud function à notre projet. Je vous en parle dans la section sécurité, plus bas.

Création d’une application ToDo

Parce que j’adore toujours refaire le même projet dans des technos différentes, faisons une application de gestion de tâches en collaboration en temps réel.

Création du projet FireBase

Rendez-vous sur https://console.firebase.google.com/ pour créer votre projet Firebase. Vous devrez probablement activer une facturation auprès de Google si ce n’est pas déjà fait via Google Cloud. Par contre, l’utilisation de la BD en temps réel est gratuite pour une utilisation en mode preuve de concept. Vous serez facturer uniquement après un certain nombre d’accès, de stockage, ou de transfert réseau.

Puis, lorsque vous voyez :

On est presque prêt à partir. Il nous reste simplement à récupérer notre configuration Firebase pour le client Angular. Depuis votre tableau de bord Firebase, créer une nouvelle application web en cliquant sur l’icône, comme ci-dessous :

Firebase devrait vous poser quelques questions concernant votre application. Répondez au meilleur de vos connaissances 😛 On devrait vous remettre quelque chose qui ressemble à ceci :

N’utilisez pas ce code, j’ai altéré les clés. Il ne fonctionnera pas, utilisez ce que Firebase vous donne.

Création de l’application Angular

Depuis un dossier sur votre poste :

Puis, ajoutons Angular Firebase au projet pour pouvoir se connecter facilement à notre base de données :

Afin de configurer Angular Firebase, ajoutons les propriétés ci-dessus au environment.ts d’Angular, dans notre projet :

De cette façon, nous pourrions avoir une configuration Firebase pour la dev et la prod, par exemple. Dernier truc pour la configuration d’Angular Firebase, c’est l’importation dans le module principal du module AngularFirebase :

Et on est prêt à coder 🙂 Commençons simplement par la vue :

Ensuite, il nous faut un objet pour représenter la tâche à faire. Gardons-là simple, mais remarquez la propriété key de la classe. Cette propriété nous servira à stocker la clé d’identification unique de l’objet dans la BD temps réel.

Puis, créons le code du composant. Remarquez l’utilisation du TodoService qui n’existe pas encore, nous y viendrons à la suite!

Jusqu’ici, tout devrait vous sembler du code Angular normal. Nous souscrivons sur le service de todos afin d’être notifié par la base de données via l’observable retourné. Pour la création, on ne fait qu’appeler le service de création d’un todo. Remarquez qu’on ne traite pas le nouveau todo pour l’ajouter à la liste de todos, puisque la BD temps réel va nous avertir de l’ajout, il s’ajoutera par lui-même à la liste via la souscription. Voyons le service :

Ici, on identifie les objets JSON stockés en BD via un chemin d’accès, comme une URL, soit « todos ». Un exemple plus complexe pourrait ressembler à « settings/calendar-settings/latest », qui pourrait contenir un objet de configuration d’un calendrier. Donc, le principe est d’utiliser une référence à la collection d’objets dans la BD temps réel et cette dernière va nous avertir de changement via l’observable retourné par la méthode allTodos().

À ce moment, si vous exécutez l’application, vous devriez être en mesure d’ajouter des todo à votre BD. Vous pouvez aussi tester via la console Firebase de mettre à jour un objet en BD, votre liste de todos devrait se rafraichir automatiquement.

La sécurité

Bon, là je vous entends me crier après : Mais, Sylvain, on peut écrire en BD sans authentification ? Oui, et non 🙂 Je le permets ici pour des fins de simplicité, mais il est possible d’utiliser l’authentification Firebase pour forcer l’utilisateur à s’authentifier, puis à ajouter des règles dans la BD temps réel pour bloquer la lecture ou l’écriture. Dans la console Firebase, dans votre BD temps réel, choisissez l’onglet « Rules ». La mienne ressemble à :

Ceci signifie que, pour tous les objets de la BD, la lecture et l’écriture sera activée sans authentification jusqu’au 14 août 2021. Voyons une règle un peu plus complèxe :

Ici, auth.token est une variable founie par Firebase qui nous permet d’obtenir les claims associées au jeton. On s’attend donc à ce que l’utilisateur authentifié aie le rôle admin. Il peut y avoir plusieurs façon de gérer les claims d’un utilisateur, mais un bon exemple est de créer une Cloud Function dans le projet Firebase qui sera appellée à la création d’un nouvel utilisateur. À la création, vous pourriez valider, par exemple, que son adresse courriel se trouve dans un groupe précis et lui ajouter la claim admin si tel est le cas.

Si, dans un autre cas, nous voudrions avoir des données accessible uniquement à un utilisateur, nous pourrions stocker les todos sous « todos/public » pour les todos partagés et sous « todos/[userIdFromToken] » pour les todos privés. En ajoutant une règle comme celle-ci, seulement l’utilisateur propriétaire pourrait voir ses todos :

Conclusion

Firebase et AngularFirebase nous offre des outils puissants, vous l’avez lu, pour créer des applications en temps réel. Je vous lance donc la question : Qu’est qui justifierait de ne pas utiliser une base de données en temps réel ? J’aimerais bien avoir votre opinion en commentaires 🙂

Merci pour votre lecture! Cheers!

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 30 autres abonnés