Ajoutez 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 marché en ligne à l'aide des extensions Firebase . Grâce à cet atelier de programmation, vous comprendrez comment les extensions peuvent vous aider à consacrer moins de temps aux tâches de développement et de gestion d'applications.

Ce que vous construirez

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

• Chargez les images plus rapidement pour augmenter la fidélisation des utilisateurs
• Limitez les entrées dans votre base de données pour améliorer les performances et réduire votre facture
• Mettre en œuvre la suppression automatique des anciennes données utilisateur pour améliorer la protection des données utilisateur

Ce que vous apprendrez

• Comment découvrir des extensions pour les cas d'utilisation courants
• Comment installer et configurer une extension dans votre projet
• Comment maintenir (surveiller, mettre à jour et désinstaller) les extensions dans votre projet

Cet atelier de programmation se concentre sur les extensions Firebase. Pour des informations détaillées sur les autres produits Firebase mentionnés dans cet atelier de programmation, reportez-vous à la documentation Firebase et aux autres ateliers de programmation .

Ce dont vous aurez besoin

• Un ordinateur avec un navigateur Web moderne installé (Chrome est recommandé)
• Un compte Google

2. Créez et configurez un projet Firebase

Créer un projet Firebase

1. Dans la console Firebase , cliquez sur Ajouter un projet et nommez le projet Firebase FriendlyMarket .
2. Cliquez sur les options de création de projet. Acceptez les conditions de Firebase. Ignorez la configuration de Google Analytics, car vous n'utiliserez pas Analytics dans 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 :

• Authentification Firebase pour identifier facilement vos utilisateurs
• Base de données en temps réel Firebase pour enregistrer des données structurées dans le cloud et recevoir une notification instantanée lorsque les données sont mises à jour
• Cloud Storage pour Firebase pour enregistrer des images dans le cloud

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

Activer la connexion par e-mail

Bien que l'authentification ne soit pas au centre de cet atelier de programmation, il est important de disposer d'une certaine forme d'authentification dans votre application, afin d'identifier de manière unique tous ceux qui l'utilisent. Vous utiliserez la connexion par e-mail.

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

Activer la base de données en temps réel

L'application utilise la base de données Firebase Realtime pour enregistrer les articles à vendre.

1. Dans la section Développer du panneau de gauche de la console Firebase, cliquez sur Base de données .
2. Faites défiler la page au-delà du volet Cloud Firestore et cliquez sur Créer une base de données dans le volet Base de données en temps réel .

3. Sélectionnez Démarrer en mode verrouillé , puis cliquez sur Activer .

Définir des règles de sécurité

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 d'afficher les articles à vendre, mais elles autorisent uniquement 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 de la base de données en temps réel, 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 .

Activer le stockage cloud

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

1. Dans la section Développement du panneau de gauche de la console Firebase, cliquez sur Stockage .
2. Cliquez sur Commencer .

3. Acceptez les valeurs par défaut pour créer votre compartiment de stockage par défaut (cliquez sur Suivant , conservez l'emplacement par défaut, puis cliquez sur Terminé ).

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 permettent à quiconque de visualiser l'image d'un élément répertorié.

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 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écutez l'exemple d'application

Forkez 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 de logiciel ni compte StackBlitz spécial.

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

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

Vous disposez maintenant d'une copie du code de départ en tant que propre projet StackBlitz. Parce que vous n'êtes pas connecté, votre « compte » s'appelle @anonymous , mais ce n'est pas grave. Le projet a un nom unique, ainsi qu'une URL unique. 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 Présentation 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 nouvelle application Web Firebase.
4. Enregistrez l'application avec le pseudo 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 votre presse-papiers. Ne copiez pas les balises <script> . Remarque : Si vous devez retrouver la configuration ultérieurement, suivez les instructions ici .

8. Cliquez sur Continuer pour consoler .

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. Après cela, cela devrait ressembler à ceci (mais avec les valeurs de votre propre projet dans l'objet de configuration) :

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

Jetez un œil à l'aperçu interactif sur le côté droit de l'écran StackBlitz :

Cet atelier de programmation commence par le code d'une application Marketplace de base. Tout utilisateur peut consulter une liste d'articles à vendre et cliquer sur un lien pour afficher la page de détails 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.

Essayez l'application :

1. Connectez-vous avec le bouton en haut de l'écran d'accueil. Vous pouvez utiliser une fausse adresse e-mail, un nom et un mot de passe.
2. Cliquez sur le bouton Vendre quelque chose dans le coin inférieur droit pour créer une annonce.
3. Pour Titre , saisissez Xylophone .
4. Pour Prix demandé , entrez 50 .
5. Pour 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 et téléchargez-la avec le bouton IMAGE DE VOTRE ARTICLE .

file_download Télécharger l'image

7. Après avoir rempli tous les champs et téléchargé une image, cliquez sur Publier .
8. Trouvez votre nouvelle annonce. Cliquez sur votre article pour voir son écran de détails, puis développez le panneau d'informations de contact du vendeur .
9. Revenez à la console Firebase. Dans le tableau de bord de la base de données , vous verrez maintenant une entrée pour l'article que vous avez publié sous le nœud forsale . Dans le tableau de bord Stockage , vous trouverez également l'image que vous avez téléchargée dans le chemin friendlymarket .

4. Recherchez et installez une extension

Le problème

Après avoir effectué quelques recherches sur les utilisateurs de votre application, vous découvrez que la plupart des utilisateurs visitent votre site depuis leur smartphone et non depuis leur ordinateur. Cependant, vos statistiques montrent également que les utilisateurs mobiles ont tendance à quitter votre site (« churn ») après seulement quelques secondes.

Curieux, vous testez votre site avec les débits de connexion mobile. (Découvrez comment procéder ici .) Vous constatez que les images prennent beaucoup de temps à se charger et ne sont pas du tout mises en cache dans le navigateur. Ce long temps de chargement est encouru à chaque page vue !

La 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 :

• Compresser les images. Même les téléphones mobiles prennent des images avec une résolution bien supérieure à celle nécessaire pour les besoins de cette application. La réduction de la taille du fichier accélérera les temps de chargement sans baisse notable de la résolution dans l'application.
• Mise en cache . Par défaut, les objets Cloud Storage ont des en-têtes qui indiquent aux navigateurs de ne pas mettre les images en cache, ce qui signifie que le navigateur d'un utilisateur téléchargera à nouveau 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 devrez soit limiter la qualité de téléchargement, soit disposer d'un processus côté serveur qui redimensionne les images. Considérons les compromis :

• Côté client . Pour un processus côté client, vous pouvez simplement limiter la taille du fichier des images téléchargées. Cela signifie que vous n'avez pas besoin d'écrire ou de maintenir une nouvelle logique de serveur. Cependant, cela signifie également que vos vendeurs doivent trouver comment redimensionner leurs propres images, ce qui constitue un obstacle douloureux et peu intuitif à la création d'une nouvelle annonce.
• Du côté serveur . Si vous utilisez Cloud Functions pour Firebase, vous pouvez déclencher une fonction qui redimensionne automatiquement une image lors du téléchargement. Cela signifie que les vendeurs peuvent télécharger la taille d’image de leur choix (aucun travail supplémentaire pour eux) et que votre fonction backend peut redimensionner l’image de manière transparente. Il y a même un échantillon disponible pour cette fonction !

Il semble que le côté serveur soit la voie à suivre. Mais 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'y a-t-il pas une solution plus simple ?

Une solution plus simple

Tu es chanceux. Il existe une solution plus simple : les extensions Firebase ! Vérifions le catalogue des extensions disponibles sur le site Web Firebase .

Regarde ç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 Voir les détails pour afficher plus d'informations sur cette extension. Sous Ce que vous pouvez configurer , l'extension vous permet de définir les dimensions que vous souhaitez redimensionner, et vous pouvez même définir l'en-tête du cache. Parfait!
2. Cliquez sur le bouton Installer dans la console sur la page de détails de l'extension . Vous serez redirigé vers une page de console Firebase qui répertorie tous vos projets.
3. Choisissez le projet FriendlyMarket que vous avez créé pour cet atelier de programmation.
4. Suivez les instructions à l'écran jusqu'à ce que vous atteigniez l'étape Configurer l'extension . Les instructions montreront un résumé de base de l'extension, ainsi que toutes les ressources qu'elle créera et accédera aux rôles dont elle a besoin.
5. Dans le champ d'en-tête ** Cache-Control **pour les images redimensionnées , saisissez ce qui suit :

public, max-age=31536000

6. Laissez les autres paramètres à leurs valeurs par défaut.
7. Cliquez sur Installer l'extension .

Pendant que vous attendez la fin de l'installation...

Installation avec l'interface de ligne de commande Firebase

Si vous êtes plus à l'aise avec les outils de ligne de commande, les extensions peuvent également être installées et gérées à l'aide de la CLI Firebase ! Utilisez simplement la commande firebase ext , disponible dans la dernière version de la CLI. Plus d'informations peuvent être trouvées ici .

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

La valeur d'en-tête Cache-Control public, max-age=31536000 signifie que l'image sera mise en cache pendant 1 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 compartiment que l'image d'origine. L'image redimensionnée a les dimensions configurées ajoutées à son nom de fichier. Ainsi, si le chemin du fichier d'origine ressemblait à friendlymarket/user1234-car.png , le chemin du fichier de l'image redimensionnée ressemblera à friendlymarket/user1234-car_200x200.png .

Mettons à jour l'application afin 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)
  };
}

Testez-le

Étant donné que cette extension surveille les nouveaux téléchargements d'images, votre image existante ne sera pas redimensionnée.

Créez un nouveau message 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 quelque chose dans le coin inférieur droit de l'application pour créer une annonce.
3. Pour Titre , saisissez Coffee
4. Pour Prix demandé , entrez 1
5. Pour Description de l'article , saisissez ce qui suit : 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 et téléchargez-la avec le bouton IMAGE DE VOTRE ARTICLE . file_download Télécharger l'image
7. Après avoir rempli tous les champs et téléchargé une image, cliquez sur Publier . Vous verrez la liste des cafés apparaître 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 qui montrent qu'elle a été exécutée.

9. Accédez au tableau de bord Stockage pour voir à la fois l’image originale du café et une version redimensionnée dans le chemin friendlymarket .
10. Dans le volet d'aperçu de StackBlitz, rechargez l'écran d'accueil de votre application plusieurs fois. Vous devriez remarquer que l’image du café se charge beaucoup plus rapidement que l’image du xylophone.

L'image se charge plus rapidement lors du chargement de la première page car elle est plus petite, et 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 préliminaires de l'annonce d'un vendeur. Vos utilisateurs aiment cette fonctionnalité, mais vos statistiques sont un peu inquiétantes. Vos rapports indiquent que seulement 10 % environ des brouillons sont réellement publiés et que les 90 % restants occupent simplement de l'espace dans votre base de données.

La solution

Après quelques calculs au fond de l'enveloppe, vous réalisez qu'il vous suffit de sauvegarder environ cinq brouillons à la fois.

Vous vous souvenez de ce catalogue d'extensions Firebase ? Il existe peut-être une solution déjà élaborée pour cette situation. Installons l'extension Limit Child Nodes pour maintenir automatiquement le nombre de brouillons enregistrés à cinq ou moins. L'extension supprimera 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 Marketplace.
3. Suivez les instructions à l'écran jusqu'à ce que vous atteigniez l'étape Configurer l'extension .
4. Pour Chemin d'accès à la base de données en temps réel , saisissez drafts . Il s'agit du chemin dans la base de données où les brouillons sont enregistrés.
5. Pour Nombre maximum de nœuds à conserver , entrez 5 . Cela signifie que cinq brouillons pour la liste de chaque élément seront enregistrés, et si un autre est ajouté, le brouillon le plus ancien sera automatiquement supprimé.
6. Cliquez sur Installer l'extension .

En attendant la fin de l'installation...

Extensions de surveillance

Lorsque vous installez une extension, le processus crée plusieurs fonctions. Vous souhaiterez peut-être vérifier la fréquence d'exécution de ces fonctions ou afficher les journaux et les taux d'erreur. Pour des informations détaillées sur la façon de 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ésinstallation des extensions

Pour supprimer une extension de votre projet, vous pourriez être tenté de supprimer les fonctions individuelles créées par une extension, mais cela peut entraîner un comportement inattendu, puisqu'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. Cependant, 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.

Installation de plusieurs copies d'une extension dans un seul 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, 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.

Voyez-le en action

1. Assurez-vous que vous êtes connecté avec le compte que vous avez utilisé pour publier le xylophone ou le café au lait.
2. Générez des brouillons :
3. Cliquez sur le bouton Vendre quelque chose dans le coin inférieur droit de l'application
4. Modifiez le titre pour dire « Brouillon 1 ».
5. Faites défiler jusqu'à la section Brouillons et affichez le nombre de brouillons. Il devrait y en avoir au moins deux.
6. Cliquez sur le bouton FRIENDLY MARKET dans la barre supérieure de l'application. De cette façon, vous aurez un brouillon enregistré mais vous n’aurez pas besoin de le publier.
7. Répétez l'opération pour « Draft 2 », « Draft 3 » et ainsi de suite jusqu'à « Draft 6 ».
8. Lorsque vous créez « Brouillon 6 », remarquez que « Brouillon 1 » disparaît de votre section Brouillons .
9. Comme vous l'avez fait avec l'extension Resize Images, vous pouvez consulter les journaux des fonctions pour voir quelles fonctions se sont déclenchées.

Oups, la limite des brouillons à conserver est trop petite

Votre équipe de support client vous contacte et vous fait savoir que certains de vos vendeurs les plus prolifiques se plaignent que leurs brouillons sont supprimés avant de pouvoir les publier. Vous vérifiez vos calculs avec votre coéquipier et vous réalisez que vos calculs étaient erronés d'un facteur 10 000 !

Comment peux-tu réparer cela? Reconfigurons l'extension installée !

1. Dans le volet gauche de la console Firebase, cliquez sur Extensions .
2. Sur la fiche de l'extension installée, cliquez sur Gérer .
3. Dans le coin supérieur droit, cliquez sur Reconfigurer l'extension .
4. Modifiez le nombre maximum de nœuds pour le conserver à 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 parler à votre équipe d'assistance et lui faire savoir qu'un correctif est déjà en cours de déploiement.

6. Supprimer automatiquement les données utilisateur

Le problème

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

Pour l'instant, le support supprime manuellement les données de chaque utilisateur, mais il doit y avoir une meilleure solution ! Vous y réfléchissez et envisagez d'écrire votre propre travail par lots qui s'exécute périodiquement et efface les adresses e-mail des comptes supprimés. Mais la suppression des données utilisateur semble être un problème assez courant. Peut-être que les extensions Firebase peuvent également aider à résoudre ce problème.

La 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 Installer sur la page de détails de l'extension .
2. Choisissez le projet Firebase que vous utilisez pour votre application Web Marketplace.
3. Suivez les instructions à l'écran jusqu'à ce que vous atteigniez l'étape Configurer l'extension .
4. Pour les chemins de base de données en temps réel , saisissez sellers/{UID} . La partie sellers est le 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 de 1234 supprime son compte, l'extension doit supprimer sellers/1234 de la base de données.
5. Cliquez sur Installer l'extension .

En attendant la fin de l'installation...

Parlons de personnalisation

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

Cependant, les extensions ne peuvent pas résoudre tous les problèmes, et la question de 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 qu'un utilisateur supprime son compte, l'extension ne supprimera pas tout. Par exemple, la liste des articles est toujours disponible et toutes les images dans Cloud Storage resteront également. L'extension Supprimer les données utilisateur nous permet de configurer un chemin de stockage Cloud à supprimer, mais comme les utilisateurs peuvent télécharger de nombreux fichiers différents avec de nombreux noms différents, vous ne pourrez pas configurer cette extension pour supprimer automatiquement ces artefacts. Pour des situations comme celle-ci, Cloud Functions pour Firebase pourrait être mieux adapté afin que vous puissiez écrire du code spécifique au modèle de données de votre application.

Extensions et facturation

Les extensions Firebase elles-mêmes sont gratuites à utiliser (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 une facturation. Cet atelier de programmation a été conçu pour être réalisé sans compte de facturation. Cependant, la mise en place d'un plan Flame ou Blaze débloque de nombreuses extensions Firebase vraiment intéressantes.

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

S'il y a une extension que vous aimeriez avoir, mais qu'elle n'est pas disponible pour le moment, nous serions ravis d'en entendre parler ! Déposez une demande de fonctionnalité auprès de l'assistance Firebase pour suggérer une nouvelle extension.

Voyez-le en action

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

1. Dans la console Firebase, accédez à votre tableau de bord Realtime Database .
2. Développez le nœud sellers .
3. Les informations de chaque vendeur sont saisies sur leur UID utilisateur. Choisissez l'UID d'un utilisateur.
4. Dans la console Firebase, accédez à votre tableau de bord d'authentification et recherchez cet UID utilisateur.
5. Développez le menu à droite de l'UID et sélectionnez Supprimer le compte .

6. Revenez au tableau de bord de votre base de données en temps réel . Les informations du vendeur auront disparu !

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 Marketplace.

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

Et après?

Découvrez quelques-unes de ces autres extensions :

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

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

• Consultez l'atelier de programmation Cloud Functions pour Firebase

Autres documents utiles

Gestion des extensions :

• Essayez de gérer les extensions avec la CLI Firebase
• Définir des alertes budgétaires
• Vérifiez 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

Apprendre les détails les plus fins sur les extensions :

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