Ajoutez rapidement de nouvelles fonctionnalités à votre application Web grâce aux 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 aidera à comprendre comment les extensions peuvent vous aider à passer moins de temps sur les tâches de développement et de gestion des 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 améliorer la rétention des 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 améliorer leur protection

Points abordés

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

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

Prérequis

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

2. Créer et configurer un projet Firebase

Créer un projet Firebase

1. Dans la console Firebase, cliquez sur Ajouter un projet, puis nommez le projet Firebase FriendlyMarket.
2. Cliquez sur les options souhaitées. Acceptez les conditions d'utilisation de Firebase. Passez l'étape de configuration d'Analytics (vous n'en aurez pas besoin pour cette application).
3. Attendez que le 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 for 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 pouvez bénéficier d'un crédit de 300$et d'un compte de facturation Cloud en essai sans frais.
• Si vous suivez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur s'il existe des crédits Cloud disponibles.

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

1. Dans la console Firebase, sélectionnez l'option Mettre à niveau votre forfait.
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 dans le cadre de cette migration, vous devrez peut-être revenir au flux de migration dans la console Firebase pour la terminer.

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, afin d'identifier de manière unique tous les utilisateurs. Vous utiliserez la connexion par e-mail.

1. Dans la console Firebase, cliquez sur Développer dans le panneau de gauche.
2. Cliquez sur Authentication (Authentification), puis sur l'onglet Sign-in Method (Méthode de connexion). Vous pouvez également cliquer ici pour accéder directement à l'onglet Sign-in Method (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 (Base de données en temps réel).
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 de programmation, vous allez ajouter des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à 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 à cette application. Voici quelques exemples de règles de base pour sécuriser votre application. Ces règles permettent à tous les utilisateurs de voir les articles en vente, mais seules les personnes connectées peuvent effectuer d'autres lectures et écritures. Ne vous préoccupez pas des détails de ces règles. Vous allez simplement les copier-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 "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 Build (Compilation), puis sélectionnez Storage (Stockage).
2. Cliquez sur Commencer.
3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
   Les buckets dans 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 zones géographiques 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 de programmation, vous allez ajouter des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à 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 à cette application. Ces règles n'autorisent que les utilisateurs authentifiés à publier de nouvelles images, mais elles permettent à tous les utilisateurs de voir l'image d'un article listé.

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

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

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
   
       match /{allPaths=**} {
         allow read, write: if request.auth != null;
       }
   
       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 intégrant plusieurs workflows Firebase. Stackblitz ne nécessite aucune installation logicielle ni aucun compte StackBlitz spécial.

StackBlitz vous permet de partager des projets avec d'autres utilisateurs. Les autres utilisateurs qui disposent de l'URL de votre projet StackBlitz peuvent voir votre code et créer une fourchette de votre projet, mais ils 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 en tant que 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 Project Overview (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 surnom FriendlyMarket Codelab.
5. Pour cet atelier de programmation, ne cochez pas la case à côté de 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 devez retrouver la configuration ultérieurement, suivez ces instructions.

8. Cliquez sur Accéder à la console.

Ajoutez la configuration de votre projet à votre application:

1. De retour dans StackBlitz, accédez au fichier src/firebase-config.js.
2. Collez votre extrait de configuration dans le fichier. Il 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 ?

Examinez l'aperçu interactif sur le côté droit de l'écran StackBlitz:

Cet atelier de programmation commence par le code d'une application de place de marché de base. Tout utilisateur peut afficher une liste d'articles en vente et cliquer sur un lien pour afficher la page d'informations d'un article. Si un utilisateur est connecté, il voit les coordonnées du vendeur afin de pouvoir négocier un prix et acheter l'article.

Essayez l'application:

1. Se connecter à l'aide du bouton en haut de l'écran d'accueil Vous pouvez utiliser une adresse e-mail, un nom et un mot de passe factices.
2. Cliquez sur le bouton Vendre un article en bas à droite pour créer une fiche.
3. Dans le champ Titre, saisissez Xylophone.
4. Dans le champ Prix demandé, saisissez 50.
5. Dans Description de l'article, saisissez ce qui suit: 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 IMAGE DE VOTRE ARTICLE.

file_downloadTélécharger l'image

7. Une fois que vous avez rempli tous les champs et importé une image, cliquez sur Publier.
8. Recherchez votre nouvelle fiche. Cliquez sur votre article pour afficher son écran d'informations, 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 désormais 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 recherches sur les utilisateurs de votre application, vous découvrez que la plupart d'entre eux accèdent à votre site depuis leur smartphone, et non depuis leur ordinateur. Toutefois, vos statistiques montrent également que les utilisateurs d'appareils mobiles ont tendance à quitter votre site (ou "churn") au bout de quelques secondes seulement.

Vous décidez de tester votre site avec des vitesses de connexion mobile. (Découvrez comment procéder ici.) Vous constatez que le chargement des images prend beaucoup de temps et qu'elles ne sont pas mises en cache dans le navigateur. Ce long temps de chargement est appliqué à chaque page vue.

Solution

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

• Compressez les images. Même les téléphones mobiles prennent des images avec une résolution bien supérieure à celle requise pour les besoins de cette application. Réduire la taille des fichiers accélère les temps de chargement sans que la résolution ne baisse de manière notable 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 réimportera la même image encore et encore. Heureusement, vous pouvez modifier ces en-têtes pour autoriser le 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 soit limiter la qualité d'importation, soit utiliser un processus côté serveur qui redimensionne les images. Voyons les compromis:

• Côté client. Pour un processus côté client, vous pouvez simplement limiter la taille des fichiers pour les images importées. Vous n'avez donc pas besoin d'écrire ni de gérer de nouvelle logique de serveur. Cependant, 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 vendeurs peuvent importer n'importe quelle taille d'image (sans travail supplémentaire pour eux), et que votre fonction backend peut redimensionner l'image sans problème. Un exemple est même disponible pour cette fonction.

Il semble que le côté serveur soit la 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 d'images semble être un cas d'utilisation 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 "Redimensionner les images". Cela semble 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 auxquelles vous souhaitez redimensionner l'image, et même de définir l'en-tête du cache. Parfait !
2. Cliquez sur le bouton Installer dans la console sur la page d'informations de l'extension. Vous êtes alors 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 aura besoin.
5. Dans le champ En-tête pour les images redimensionnées **Cache-Control**, 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.

Pendant que l'installation se termine…

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 des 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. Par conséquent, si le chemin d'accès au fichier d'origine se présentait sous la forme friendlymarket/user1234-car.png, le chemin d'accès au fichier de l'image redimensionnée se présentera sous la forme 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. Dans le champ Titre, saisissez Coffee.
4. Dans le champ Prix demandé, saisissez 1.
5. Dans 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 IMAGE DE VOTRE ARTICLE. file_downloadTélécharger l'image
7. Après avoir rempli tous les champs et importé une image, cliquez sur Publier. La fiche du café s'affiche sous le xylophone.
8. Dans le tableau de bord Fonctions de la console Firebase, cliquez sur l'onglet Journaux. Vous devriez voir les journaux de la fonction indiquant qu'elle a été exécutée.

9. Accédez au tableau de bord Storage (Stockage) pour afficher à la fois l'image du café d'origine et une version redimensionnée dans le chemin friendlymarket.
10. Dans le volet d'aperçu StackBlitz, actualisez l'écran d'accueil de votre application plusieurs fois. Vous devriez constater que l'image du 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 de page 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 de la fiche d'un vendeur. Vos utilisateurs apprécient cette fonctionnalité, mais vos statistiques sont un peu inquiétantes. Vos rapports indiquent que seuls environ 10% des brouillons sont effectivement publiés, et que les 90% restants ne servent qu'à prendre de la place dans votre base de données.

Solution

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

Vous vous souvenez de ce catalogue d'extensions Firebase ? Il est possible qu'une solution ait déjà été créée pour cette situation. Installons l'extension Limit Child Nodes (Limiter les nœuds enfants) pour que le nombre de brouillons enregistrés soit automatiquement limité à cinq ou moins. L'extension supprime le brouillon le plus ancien chaque fois qu'un nouveau brouillon est ajouté.

1. Cliquez sur le bouton Install (Installer) sur la page d'informations 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 d'article. Si vous en ajoutez un autre, 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 consulter 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 Redimensionner les images à l'étape précédente.

Désinstaller des extensions

Pour supprimer une extension de votre projet, vous pouvez ê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) resteront 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é à installer 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é avec le compte que vous avez utilisé pour publier le xylophone ou le café au lait.
2. Générez des suggestions:
3. Cliquez sur le bouton Vendre un article en bas à droite de l'application.
4. Modifiez le titre pour qu'il indique "Brouillon 1".
5. Faites défiler la page jusqu'à la section Brouillons et affichez le nombre de brouillons. Il doit y en avoir au moins deux.
6. Cliquez sur le bouton FRIENDLY MARKET (Marché respectueux) 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 le brouillon 6, le brouillon 1 disparaît de la section Brouillons.
9. Comme vous l'avez fait avec l'extension Redimensionner les images, vous pouvez consulter les journaux des fonctions pour voir quelles fonctions ont été déclenchées.

Oops, la limite de brouillons à conserver est trop faible

Votre équipe d'assistance client vous contacte et vous informe que certains de vos vendeurs les plus prolifiques se plaignent de la suppression de leurs brouillons avant qu'ils ne puissent les publier. Vous vérifiez vos calculs avec votre collègue et vous réalisez que vous vous êtes trompé d'un facteur 10 000 !

Comment pouvez-vous résoudre 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 que l'extension est mise à jour, vous pouvez contacter votre équipe d'assistance et lui indiquer 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é. Les vendeurs qui ont supprimé leur compte reçoivent toujours des e-mails d'autres utilisateurs et sont en colère. 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 y avoir une meilleure solution. Vous réfléchissez à la question et envisagez d'écrire votre propre tâche par lot qui s'exécute régulièrement et supprime les adresses e-mail des comptes supprimés. Cependant, la suppression des données utilisateur semble être un problème assez courant. Les extensions Firebase peuvent également vous aider à résoudre ce problème.

Solution

Vous allez configurer l'extension Supprimer les données utilisateur 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 Install (Installer) sur la page d'informations 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 avec l'UID 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 en fonction des besoins de votre application.

Cependant, 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 "Supprimer les données utilisateur" réponde à la plainte actuelle selon laquelle les e-mails sont toujours exposés après la suppression d'un compte utilisateur, elle ne supprime pas tout. Par exemple, la fiche de l'article est toujours disponible, et les images stockées dans Cloud Storage le resteront également. L'extension "Supprimer les données utilisateur" nous permet de configurer un chemin Cloud Storage à supprimer. Toutefois, comme les utilisateurs peuvent importer de nombreux fichiers différents avec de nombreux 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 vous pouvez é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 ne payez que les ressources sous-jacentes que vous utilisez), mais certaines des ressources sous-jacentes nécessaires à une extension peuvent être facturées. Cet atelier de programmation a été conçu pour être effectué sans compte de facturation. Toutefois, configurer un forfait Flame ou Blaze vous permet de profiter de nombreuses extensions Firebase très intéressantes.

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

Si vous souhaitez disposer d'une extension qui n'est pas disponible 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 Firebase Realtime Database.
2. Développez le nœud sellers.
3. Les informations de chaque vendeur sont associées à son UID utilisateur. Sélectionnez l'UID d'un utilisateur.
4. Dans la console Firebase, accédez au tableau de bord "Authentication" (Authentification), puis recherchez l'UID de l'utilisateur.
5. Développez le menu situé à droite de l'UID, puis sélectionnez Supprimer le compte.

6. Revenez au tableau de bord Realtime Database. Les informations sur le vendeur seront supprimées.

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 quelques-unes de ces 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 des URL (compte de facturation requis)

Besoin de plus de code côté serveur personnalisé ?

• Consultez l'atelier de programmation Cloud Functions for Firebase

Autres documents utiles

Gérer les extensions :

• Essayez de gérer les 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:

• Consulter 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