Ajouter rapidement de nouvelles fonctionnalités à votre application Web avec les extensions Firebase

1. Introduction

Objectifs

Dans cet atelier de programmation, vous allez ajouter des fonctionnalités à une application de place de marché en ligne à l'aide des extensions Firebase. Cet atelier de programmation vous permettra de comprendre comment les extensions peuvent vous aider à passer moins de temps sur les tâches de développement et de gestion d'applications.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez ajouter les fonctionnalités suivantes à une application Web de place de marché en ligne :

• Charger les images plus rapidement pour fidéliser les utilisateurs
• Limiter les entrées dans votre base de données pour améliorer les performances et réduire votre facture
• Implémenter la suppression automatique des anciennes données utilisateur pour renforcer la protection de ces données

Points abordés

• Découvrir des extensions pour des cas d'utilisation courants
• Installer et configurer une extension dans votre projet
• Gérer les extensions dans votre projet (surveillance, mise à jour et désinstallation)

Cet atelier de programmation porte sur les extensions Firebase. Pour en savoir plus sur les autres produits Firebase mentionnés dans cet atelier de programmation, consultez la documentation Firebase et les autres ateliers de programmation.

Prérequis

• Un ordinateur équipé d'un navigateur Web récent (Chrome est recommandé)
• Un compte Google

2. Créer et configurer un projet Firebase

Créer un projet Firebase

1. Connectez-vous à la console Firebase à l'aide de votre compte Google.
2. Cliquez sur le bouton pour créer un projet, puis saisissez un nom de projet (par exemple, FriendlyMarket).
   
3. Cliquez sur Continuer.
4. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase, puis cliquez sur Continuer.
5. (Facultatif) Activez l'assistance IA dans la console Firebase (appelée "Gemini dans Firebase").
6. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Google Analytics.
7. Cliquez sur Créer un projet, attendez que votre projet soit provisionné, puis cliquez sur Continuer.

L'application que vous allez créer utilise quelques produits Firebase disponibles pour les applications Web :

• Firebase Authentication, pour identifier facilement vos utilisateurs
• Firebase Realtime Database, pour enregistrer des données structurées dans le cloud et recevoir une notification instantanée en cas de mise à jour des données
• Cloud Storage for Firebase, pour enregistrer des images dans le cloud

Vous allez maintenant activer et configurer ces produits Firebase à l'aide de la console Firebase.

Passer à un forfait Firebase supérieur

Pour utiliser les extensions Firebase et leurs services cloud sous-jacents, ainsi que Cloud Storage pour Firebase, votre projet Firebase doit être associé au forfait Blaze avec paiement à l'usage, ce qui signifie qu'il est associé à un compte de facturation Cloud.

• Un compte de facturation Cloud nécessite un mode de paiement, comme une carte de crédit.
• Si vous débutez avec Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300$et à un compte de facturation Cloud pour l'essai sans frais.
• Si vous effectuez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur si des crédits Cloud sont disponibles.

Pour passer à la formule Blaze, procédez comme suit :

1. Dans la console Firebase, sélectionnez Passer à une formule supérieure.
2. Sélectionnez le forfait Blaze. Suivez les instructions à l'écran pour associer un compte de facturation Cloud à votre projet.
   Si vous avez dû créer un compte de facturation Cloud lors de cette mise à niveau, vous devrez peut-être revenir au processus de mise à niveau dans la console Firebase pour la finaliser.

Activer la connexion par e-mail

Bien que cet aspect ne soit pas l'objectif principal de cet atelier de programmation, il est important d'avoir une forme d'authentification dans votre application pour identifier de manière unique chaque utilisateur. Vous vous connecterez avec votre adresse e-mail.

1. Dans la console Firebase, cliquez sur Développer dans le panneau de gauche.
2. Cliquez sur Authentification, puis sur l'onglet Méthode de connexion (ou cliquez ici pour accéder directement à l'onglet Méthode de connexion).
3. Cliquez sur Adresse e-mail/Mot de passe dans la liste Fournisseurs de connexion, mettez le bouton bascule Activer en position activée, puis cliquez sur Enregistrer.

Activer Realtime Database

L'application utilise Firebase Realtime Database pour enregistrer les articles à vendre.

1. Dans le panneau de gauche de la console Firebase, développez Créer, puis sélectionnez Realtime Database.
2. Cliquez sur Créer une base de données.
3. Sélectionnez un emplacement pour votre base de données, puis cliquez sur Suivant.
   Pour une application réelle, choisissez un emplacement proche de vos utilisateurs.
4. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Dans les prochaines étapes de cet atelier, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez publiquement une application sans ajouter de règles de sécurité pour votre base de données.
5. Cliquez sur Créer.

Définir des règles de sécurité pour votre base de données

Vous allez maintenant définir les règles de sécurité nécessaires pour cette application. Voici quelques exemples de règles de base pour vous aider à sécuriser votre application. Ces règles permettent à quiconque de consulter les articles en vente, mais elles n'autorisent que les utilisateurs connectés à effectuer d'autres lectures et écritures. Ne vous inquiétez pas des détails de ces règles. Vous allez simplement les copier et les coller pour que votre application soit opérationnelle.

1. En haut du tableau de bord Realtime Database, cliquez sur l'onglet Règles.

2. Copiez et collez l'ensemble de règles suivant dans le champ des règles de l'onglet Règles :

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. Cliquez sur Publier.

Configurer Cloud Storage for Firebase

L'application utilise Cloud Storage for Firebase pour enregistrer les images des articles à vendre.

Voici comment configurer Cloud Storage for Firebase dans votre projet Firebase :

1. Dans le panneau de gauche de la console Firebase, développez Créer, puis sélectionnez Stockage.
2. Cliquez sur Commencer.
3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
   Les buckets situés dans les régions US-WEST1, US-CENTRAL1 et US-EAST1 peuvent profiter du niveau"Toujours sans frais" pour Google Cloud Storage. Les buckets situés dans toutes les autres régions sont soumis aux tarifs et à l'utilisation de Google Cloud Storage.
4. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Dans les prochaines étapes de cet atelier, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez publiquement une application sans ajouter de règles de sécurité pour votre bucket Storage.
5. Cliquez sur Créer.

Configurer des règles de sécurité pour votre bucket Storage

Vous allez maintenant définir les règles de sécurité nécessaires pour cette application. Ces règles autorisent uniquement les utilisateurs authentifiés à publier de nouvelles images, mais elles autorisent tout le monde à afficher l'image d'un article listé.

1. En haut du tableau de bord Stockage, cliquez sur l'onglet Règles.

2. Copiez et collez l'ensemble de règles suivant dans le champ des règles de l'onglet Règles :

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. Cliquez sur Publier.

3. Exécuter l'application exemple

Forker le projet StackBlitz

Dans cet atelier de programmation, vous allez créer et déployer une application à l'aide de StackBlitz, un éditeur en ligne qui intègre plusieurs workflows Firebase. Stackblitz ne nécessite aucune installation de logiciel ni aucun compte StackBlitz spécial.

StackBlitz vous permet de partager des projets avec d'autres utilisateurs. Les autres personnes qui disposent de l'URL de votre projet StackBlitz peuvent voir votre code et créer un fork de votre projet, mais elles ne peuvent pas le modifier.

1. Accédez à cette URL pour obtenir le code de démarrage : https://stackblitz.com/edit/friendlymarket-codelab.
2. En haut de la page StackBlitz, cliquez sur Fork (Dupliquer).

Vous disposez maintenant d'une copie du code de départ sous la forme de votre propre projet StackBlitz. Comme vous ne vous êtes pas connecté, votre "compte " s'appelle @anonymous, mais ce n'est pas grave. Le projet possède un nom et une URL uniques. Tous vos fichiers et modifications sont enregistrés dans ce projet StackBlitz.

Ajouter une application Web Firebase au projet

1. Dans StackBlitz, affichez votre fichier src/firebase-config.js. C'est ici que vous ajouterez l'objet de configuration Firebase.
2. De retour dans la console Firebase, accédez à la page de présentation de votre projet en cliquant sur Vue d'ensemble du projet en haut à gauche.
3. Au centre de la page de présentation de votre projet, cliquez sur l'icône Web  pour créer une application Web Firebase.
4. Enregistrez l'application avec le nom FriendlyMarket Codelab.
5. Pour cet atelier de programmation, ne cochez pas la case Configurer également Firebase Hosting pour cette application. Vous allez utiliser le volet d'aperçu StackBlitz à la place.
6. Cliquez sur Enregistrer l'application.
7. Copiez l'objet de configuration Firebase de votre application dans le presse-papiers. Ne copiez pas les balises <script>. Remarque : Si vous avez besoin de retrouver la configuration ultérieurement, suivez ces instructions.

8. Cliquez sur Accéder à la console.

Ajoutez la configuration de votre projet à votre application :

1. Dans StackBlitz, revenez au fichier src/firebase-config.js.
2. Collez l'extrait de configuration dans le fichier. Une fois cette opération effectuée, le résultat doit se présenter comme suit (mais avec les valeurs de votre propre projet dans l'objet de configuration) :

Quel est le point de départ de cette application ?

Consultez l'aperçu interactif sur la droite de l'écran StackBlitz :

Dans cet atelier de programmation, vous allez commencer par utiliser le code d'une application Marketplace de base. Tout utilisateur peut afficher une liste d'articles à vendre et cliquer sur un lien pour afficher la page d'informations d'un article. Si un utilisateur est connecté, il verra les coordonnées du vendeur afin de pouvoir négocier un prix et acheter l'article.

Essayer l'application :

1. Connectez-vous à l'aide du bouton en haut de l'écran d'accueil. Vous pouvez utiliser une fausse adresse e-mail, un faux nom et un faux mot de passe.
2. Cliquez sur le bouton Vendre un article en bas à droite pour créer une fiche.
3. Pour Titre, saisissez Xylophone.
4. Dans le champ Prix demandé, saisissez 50.
5. Dans le champ Description de l'article, saisissez This high quality xylophone can be used to play music..
6. Téléchargez cette image d'un xylophone sur votre ordinateur, puis importez-la à l'aide du bouton PHOTO DE VOTRE ARTICLE.

file_download Télécharger l'image

7. Après avoir rempli tous les champs et importé une image, cliquez sur Publier.
8. Recherchez votre nouvelle fiche. Cliquez sur votre article pour afficher l'écran de détails, puis développez le panneau Coordonnées du vendeur.
9. Revenez à la console Firebase. Dans le tableau de bord Database (Base de données), une entrée s'affiche pour l'élément que vous avez publié sous le nœud forsale. Dans le tableau de bord Storage (Stockage), vous trouverez également l'image que vous avez importée dans le chemin d'accès friendlymarket.

4. Rechercher et installer une extension

Le problème

Après avoir effectué des études utilisateur pour votre application, vous constatez que la plupart des utilisateurs visitent votre site depuis leur smartphone, et non depuis leur ordinateur. Toutefois, vos statistiques montrent également que les utilisateurs mobiles ont tendance à quitter votre site ("churn") après seulement quelques secondes.

Par curiosité, vous testez votre site avec des vitesses de connexion mobile. (Pour savoir comment procéder, cliquez ici.) Vous constatez que les images mettent beaucoup de temps à se charger et ne sont pas mises en cache dans le navigateur. Ce long temps de chargement est subi à chaque page vue.

Solution

Après avoir lu comment optimiser les images, vous décidez de suivre deux étapes pour améliorer les performances de chargement des images :

• Compressez les images. Même les téléphones mobiles prennent des photos avec une résolution bien supérieure à celle nécessaire pour cette application. La réduction de la taille des fichiers accélérera les temps de chargement sans diminution notable de la résolution dans l'application.
• Mise en cache Par défaut, les objets Cloud Storage comportent des en-têtes qui indiquent aux navigateurs de ne pas mettre en cache les images. Cela signifie que le navigateur d'un utilisateur téléchargera la même image encore et encore. Heureusement, vous pouvez modifier ces en-têtes pour autoriser la mise en cache. Le SDK Cloud Storage côté client et le SDK Firebase Admin vous permettent de définir ces en-têtes.

Pour compresser des images, vous devez limiter la qualité d'importation ou disposer d'un processus côté serveur qui redimensionne les images. Examinons les compromis :

• Côté client : Pour un processus côté client, vous pouvez simplement limiter la taille des fichiers des images importées. Cela signifie que vous n'avez pas besoin d'écrire ni de gérer de nouvelle logique de serveur. Toutefois, cela signifie également que vos vendeurs doivent trouver comment redimensionner leurs propres images, ce qui constitue un obstacle pénible et peu intuitif à la création d'une fiche.
• Côté serveur : Si vous utilisez Cloud Functions for Firebase, vous pouvez déclencher une fonction qui redimensionne automatiquement une image lors de son importation. Cela signifie que les marchands peuvent importer des images de la taille de leur choix (sans effort supplémentaire), et que votre fonction de backend peut redimensionner l'image de manière fluide. Un exemple est même disponible pour cette fonction.

Il semble que le côté serveur soit la meilleure solution. Toutefois, cette idée implique toujours de cloner l'exemple, de suivre ses instructions de configuration, puis de déployer la fonction avec la CLI Firebase. Le redimensionnement des images semble être un cas d'utilisation très courant. N'existe-t-il pas une solution plus simple ?

Une solution plus simple

Vous avez de la chance. Il existe une solution plus simple : les extensions Firebase. Consultons le catalogue des extensions disponibles sur le site Web de Firebase.

Regardez-moi ça ! Il existe une extension appelée "Resize Images" (Redimensionner les images). Ça a l'air prometteur.

Utilisons cette extension dans votre application.

Installer une extension

1. Cliquez sur Afficher les détails pour en savoir plus sur cette extension. Sous Éléments configurables, l'extension vous permet de définir les dimensions de redimensionnement et même l'en-tête de cache. Parfait !
2. Cliquez sur le bouton Installer dans la console sur la page d'informations de l'extension. Vous serez redirigé vers une page de la console Firebase qui liste tous vos projets.
3. Sélectionnez le projet FriendlyMarket que vous avez créé pour cet atelier de programmation.
4. Suivez les instructions à l'écran jusqu'à l'étape Configurer l'extension. Les instructions affichent un résumé de base de l'extension, ainsi que les ressources qu'elle créera et les rôles d'accès dont elle a besoin.
5. Dans le champ En-tête Cache-Control pour les images redimensionnées, saisissez ce qui suit :

public, max-age=31536000

6. Conservez les valeurs par défaut des autres paramètres.
7. Cliquez sur Installer l'extension.

En attendant la fin de l'installation :

Installer avec l'interface de ligne de commande Firebase

Si vous êtes plus à l'aise avec les outils de ligne de commande, vous pouvez également installer et gérer les extensions à l'aide de la CLI Firebase. Il vous suffit d'utiliser la commande firebase ext, disponible dans la dernière version de la CLI. Pour en savoir plus, cliquez ici.

(Facultatif) En savoir plus sur les en-têtes Cache-Control

La valeur public, max-age=31536000 de l'en-tête Cache-Control signifie que l'image sera mise en cache pendant un an maximum. Pour en savoir plus sur l'en-tête Cache-Control, consultez cette documentation.

Mettre à jour le code client

L'extension que vous avez installée écrit une image redimensionnée dans le même bucket que l'image d'origine. Les dimensions configurées sont ajoutées au nom de fichier de l'image redimensionnée. Ainsi, si le chemin d'accès au fichier d'origine ressemble à friendlymarket/user1234-car.png, celui de l'image redimensionnée ressemblera à friendlymarket/user1234-car_200x200.png.

Modifions l'application pour qu'elle récupère les images redimensionnées au lieu des images en taille réelle.

1. Dans StackBlitz, ouvrez le fichier src/firebase-refs.js.
2. Remplacez la fonction getImageRef existante par le code suivant pour créer une référence pour l'image redimensionnée :

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Tester les fichiers

Étant donné que cette extension surveille les nouvelles images importées, votre image existante ne sera pas redimensionnée.

Créez un post pour voir l'extension en action :

1. Cliquez sur Friendly Market dans la barre supérieure de votre application pour accéder à l'écran d'accueil.
2. Cliquez sur le bouton Vendre un article en bas à droite de l'application pour créer une fiche.
3. Pour Titre, saisissez Coffee.
4. Pour Prix demandé, saisissez 1.
5. Dans le champ Description de l'article, saisissez Selling one cafe latte. It has foam art in the shape of a bear.
6. Téléchargez cette image d'une tasse de café sur votre ordinateur, puis importez-la à l'aide du bouton PHOTO DE VOTRE ARTICLE. file_download Télécharger l'image
7. Après avoir rempli tous les champs et importé une image, cliquez sur Publier. L'annonce de café s'affiche sous le xylophone.
8. Dans le tableau de bord Functions de la console Firebase, cliquez sur l'onglet Logs (Journaux). Vous devriez voir les journaux de la fonction indiquant qu'elle a été exécutée.

9. Accédez au tableau de bord Stockage pour afficher l'image de café d'origine et une version redimensionnée dans le chemin d'accès friendlymarket.
10. Dans le volet d'aperçu StackBlitz, actualisez l'écran d'accueil de votre application plusieurs fois. Vous devriez remarquer que l'image de la tasse de café se charge beaucoup plus rapidement que celle du xylophone.

L'image se charge plus rapidement lors du premier chargement de la page, car elle est plus petite. Lors des actualisations suivantes, elle se charge à partir du cache du navigateur au lieu de déclencher une requête réseau.

5. Reconfigurer une extension

Le problème

Votre application enregistre automatiquement les versions brouillon d'une fiche de vendeur. Vos utilisateurs apprécient cette fonctionnalité, mais vos statistiques sont un peu inquiétantes. Vos rapports indiquent qu'environ 10 % des brouillons sont réellement publiés, et que les 90 % restants ne font qu'occuper de l'espace dans votre base de données.

Solution

Après quelques calculs approximatifs, vous réalisez que vous n'avez besoin d'enregistrer qu'environ cinq brouillons à la fois.

Vous vous souvenez du catalogue d'extensions Firebase ? Il existe peut-être déjà une solution pour cette situation. Installons l'extension Limit Child Nodes pour que le nombre de brouillons enregistrés ne dépasse pas cinq. L'extension supprime le brouillon le plus ancien chaque fois qu'un nouveau brouillon est ajouté.

1. Cliquez sur le bouton Installer sur la page de détails de l'extension.
2. Choisissez le projet Firebase que vous utilisez pour votre application Web de place de marché.
3. Suivez les instructions à l'écran jusqu'à l'étape Configurer l'extension.
4. Dans le champ Chemin Realtime Database, saisissez drafts. Il s'agit du chemin d'accès dans la base de données où les brouillons sont enregistrés.
5. Dans le champ Nombre maximal de nœuds à conserver, saisissez 5. Cela signifie que cinq brouillons seront enregistrés pour chaque fiche. Si un autre brouillon est ajouté, le plus ancien sera automatiquement supprimé.
6. Cliquez sur Installer l'extension.

Pendant que l'installation se termine…

Extensions de surveillance

Lorsque vous installez une extension, le processus crée plusieurs fonctions. Vous pouvez vérifier la fréquence d'exécution de ces fonctions, ou afficher les journaux et les taux d'erreur. Pour savoir comment surveiller votre extension, consultez Gérer les extensions installées. Suivez les instructions de la documentation pour afficher les fonctions créées par l'extension Resize Images à l'étape précédente.

Désinstaller des extensions

Pour supprimer une extension de votre projet, vous pourriez être tenté de supprimer les fonctions individuelles qu'elle crée. Toutefois, cela peut entraîner un comportement inattendu, car une extension peut créer plusieurs fonctions. Découvrez comment désinstaller une extension dans la documentation.

La désinstallation supprime toutes les ressources (comme les fonctions de l'extension) et le compte de service créé pour cette instance de l'extension. Toutefois, tous les artefacts créés par l'extension (comme les images redimensionnées) seront conservés dans votre projet après la désinstallation de l'extension.

Installer plusieurs copies d'une extension dans un même projet

Vous n'êtes pas limité à l'installation d'une seule instance d'une extension donnée dans un projet. Si vous souhaitez limiter les entrées dans un autre chemin d'accès, vous pouvez installer une autre instance de cette extension. Toutefois, pour les besoins de cet atelier de programmation, vous n'installerez l'extension qu'une seule fois.

Voir une démo

1. Assurez-vous d'être connecté au compte que vous avez utilisé pour publier le xylophone ou le latte.
2. Générez quelques suggestions :
3. Cliquez sur le bouton Vendre un article en bas à droite de l'application.
4. Modifiez le titre en le remplaçant par "Brouillon 1".
5. Faites défiler la page jusqu'à la section Brouillons et consultez le nombre de brouillons. Il doit y en avoir au moins deux.
6. Cliquez sur le bouton FRIENDLY MARKET dans la barre d'application supérieure. Vous aurez ainsi un brouillon enregistré, mais vous n'aurez pas besoin de le publier.
7. Répétez l'opération pour "Brouillon 2", "Brouillon 3", etc. jusqu'à "Brouillon 6".
8. Lorsque vous créez "Brouillon 6", notez que "Brouillon 1" disparaît de la section Brouillons.
9. Comme vous l'avez fait avec l'extension Resize Images, vous pouvez consulter les journaux des fonctions pour voir quelles fonctions ont été déclenchées.

Oups, la limite de brouillons à conserver est trop faible

Votre équipe d'assistance client vous contacte pour vous informer que certains de vos vendeurs les plus prolifiques se plaignent de la suppression de leurs brouillons avant qu'ils puissent les publier. Vous vérifiez vos calculs avec votre coéquipier et vous vous rendez compte que vous vous êtes trompé d'un facteur 10 000 !

Comment corriger ce problème ? Reconfigurons l'extension installée.

1. Dans le volet de gauche de la console Firebase, cliquez sur Extensions.
2. Sur la fiche de l'extension installée, cliquez sur Gérer.
3. En haut à droite, cliquez sur Reconfigurer l'extension.
4. Définissez Nombre maximal de nœuds à conserver sur 50000.
5. Cliquez sur Enregistrer.

Et c'est tout ce que vous avez à faire ! Pendant le temps nécessaire à la mise à jour de l'extension, vous pouvez contacter votre équipe d'assistance et l'informer qu'un correctif est déjà en cours de déploiement.

6. Supprimer automatiquement les données utilisateur

Le problème

Votre équipe du service client vous a recontacté. Des vendeurs qui ont supprimé leur compte reçoivent toujours des e-mails d'autres utilisateurs, et ils sont furieux ! Ces vendeurs s'attendaient à ce que leurs adresses e-mail soient supprimées de vos systèmes lorsqu'ils ont supprimé leurs comptes.

Pour le moment, l'assistance supprime manuellement les données de chaque utilisateur, mais il doit exister une meilleure solution ! Vous y réfléchissez et envisagez d'écrire votre propre job par lot qui s'exécute périodiquement et supprime les adresses e-mail des comptes supprimés. Mais la suppression des données utilisateur semble être un problème assez courant. Les extensions Firebase peuvent peut-être vous aider à résoudre ce problème.

Solution

Vous allez configurer l'extension Delete User Data pour supprimer automatiquement le nœud users/uid dans la base de données lorsqu'un utilisateur supprime son compte.

1. Cliquez sur le bouton Installer sur la page de détails de l'extension.
2. Choisissez le projet Firebase que vous utilisez pour votre application Web de place de marché.
3. Suivez les instructions à l'écran jusqu'à l'étape Configurer l'extension.
4. Dans le champ Chemins d'accès Realtime Database, saisissez sellers/{UID}. La partie sellers correspond au nœud dont les enfants contiennent les adresses e-mail des utilisateurs, et {UID} est un caractère générique. Avec cette configuration, l'extension saura que lorsque l'utilisateur dont l'UID est 1234 supprime son compte, l'extension doit supprimer sellers/1234 de la base de données.
5. Cliquez sur Installer l'extension.

Pendant que l'installation se termine…

Parlons de la personnalisation

Dans cet atelier de programmation, vous avez vu que les extensions Firebase peuvent vous aider à résoudre des cas d'utilisation courants et qu'elles sont configurables pour répondre aux besoins de votre application.

Toutefois, les extensions ne peuvent pas résoudre tous les problèmes, et la suppression des données utilisateur en est un bon exemple. Bien que l'extension Delete User Data réponde à la réclamation actuelle selon laquelle les adresses e-mail sont toujours exposées après la suppression d'un compte utilisateur, elle ne supprime pas tout. Par exemple, la fiche de l'article reste disponible, et toutes les images dans Cloud Storage sont également conservées. L'extension "Supprimer les données utilisateur" nous permet de configurer un chemin Cloud Storage à supprimer, mais comme les utilisateurs peuvent importer de nombreux fichiers différents avec des noms différents, vous ne pourrez pas configurer cette extension pour supprimer automatiquement ces artefacts. Dans ce cas, Cloud Functions for Firebase peut être plus adapté, car il vous permet d'écrire du code spécifique au modèle de données de votre application.

Extensions et facturation

L'utilisation des extensions Firebase est sans frais (vous n'êtes facturé que pour les ressources sous-jacentes que vous utilisez), mais certaines des ressources sous-jacentes nécessaires à une extension peuvent nécessiter la facturation. Cet atelier de programmation a été conçu pour être réalisé sans compte de facturation. Toutefois, la configuration d'un forfait Flame ou Blaze permet de débloquer de nombreuses extensions Firebase très intéressantes.

Par exemple, vous pouvez raccourcir des URL, déclencher des e-mails, exporter des collections vers BigQuery et bien plus encore. Pour consulter le catalogue complet des extensions, cliquez ici.

Si vous souhaitez qu'une extension soit disponible, mais qu'elle ne l'est pas pour le moment, n'hésitez pas à nous en faire part. Envoyez une demande de fonctionnalité à l'assistance Firebase pour suggérer une nouvelle extension.

Voir une démo

Une fois l'installation de votre extension terminée, supprimez un utilisateur et observez ce qui se passe :

1. Dans la console Firebase, accédez au tableau de bord Realtime Database.
2. Développez le nœud sellers.
3. Les informations de chaque vendeur sont associées à son UID utilisateur. Choisissez l'UID d'un utilisateur.
4. Dans la console Firebase, accédez au tableau de bord Authentication et recherchez l'UID de l'utilisateur.
5. Développez le menu à droite de l'UID, puis sélectionnez Supprimer le compte.

6. Revenez au tableau de bord Realtime Database. Les informations sur le vendeur disparaîtront.

7. Félicitations !

Même si vous n'avez pas écrit beaucoup de code dans cet atelier de programmation, vous avez ajouté des fonctionnalités importantes à votre application de place de marché.

Vous avez appris à découvrir, configurer, installer et reconfigurer des extensions. Vous avez également appris à surveiller les extensions installées et à les désinstaller si nécessaire.

Étapes suivantes

Découvrez d'autres extensions :

• Traduire des chaînes de texte dans Cloud Firestore (compte de facturation requis)
• Ajouter des utilisateurs aux listes de diffusion Mailchimp (compte de facturation requis)
• Raccourcir les URL (compte de facturation requis)

Besoin d'un code côté serveur plus personnalisé ?

• Consultez l'atelier de programmation Cloud Functions for Firebase.

Autres documents utiles

Gérer les extensions :

• Essayer de gérer des extensions avec la CLI Firebase
• Définir des alertes de budget
• Vérifier la fréquence d'exécution d'une extension installée
• Mettre à jour une extension installée vers une nouvelle version
• Désinstaller une extension

En savoir plus sur les extensions :

• Consultez le code source et la documentation de chaque extension sur GitHub.
• En savoir plus sur les autorisations et l'accès accordés à une extension