Atelier de programmation Web Firebase

1. Vue d'ensemble

Dans cet atelier de programmation, vous apprendrez à utiliser Firebase pour créer facilement des applications Web en mettant en œuvre et en déployant un client de chat à l'aide des produits et services Firebase.

3b1284f5144b54f6.png

Ce que vous apprendrez

  • Synchronisez les données à l'aide de Cloud Firestore et Cloud Storage pour Firebase.
  • Authentifiez vos utilisateurs à l'aide de Firebase Authentication.
  • Déployez votre application Web sur Firebase Hosting.
  • Envoyez des notifications avec Firebase Cloud Messaging.
  • Collectez les données de performance de votre application Web.

Ce dont vous aurez besoin

  • L'éditeur IDE/texte de votre choix, tel que WebStorm , Atom , Sublime ou VS Code
  • Le gestionnaire de packages npm , qui est généralement fourni avec Node.js
  • Un terminal/console
  • Un navigateur de votre choix, tel que Chrome
  • L'exemple de code du laboratoire de programmation (voir l'étape suivante du laboratoire de programmation pour savoir comment obtenir le code.)

2. Obtenez l'exemple de code

Clonez le dépôt GitHub de l'atelier de programmation à partir de la ligne de commande :

git clone https://github.com/firebase/codelab-friendlychat-web

Alternativement, si vous n'avez pas installé git, vous pouvez télécharger le référentiel sous forme de fichier ZIP .

Importer l'application de démarrage

À l'aide de votre IDE, ouvrez ou importez le répertoire 📁 web-start à partir du référentiel cloné. Ce répertoire 📁 web-start contient le code de démarrage du codelab, qui sera une application Web de chat entièrement fonctionnelle.

3. Créer et configurer un projet Firebase

Créer un projet Firebase

  1. Connectez-vous à Firebase .
  2. Dans la console Firebase, cliquez sur Ajouter un projet , puis nommez votre projet Firebase FriendlyChat . N'oubliez pas l'ID de projet pour votre projet Firebase.
  3. Décochez Activer Google Analytics pour ce projet
  4. Cliquez sur Créer un projet .

L'application que nous allons créer utilise les produits Firebase disponibles pour les applications Web :

  • Firebase Authentication pour permettre à vos utilisateurs de se connecter facilement à votre application.
  • Cloud Firestore pour enregistrer des données structurées sur le cloud et recevoir une notification instantanée lorsque les données changent.
  • Cloud Storage pour Firebase pour enregistrer des fichiers dans le cloud.
  • Firebase Hosting pour héberger et servir vos actifs.
  • Firebase Cloud Messaging pour envoyer des notifications push et afficher les notifications contextuelles du navigateur.
  • Firebase Performance Monitoring pour collecter des données sur les performances des utilisateurs pour votre application.

Certains de ces produits nécessitent une configuration spéciale ou doivent être activés à l'aide de la console Firebase.

Ajouter une application Web Firebase au projet

  1. Cliquez sur l'icône Internet 58d6543a156e56f9.png pour créer une nouvelle application Web Firebase.
  2. Enregistrez l'application avec le surnom Friendly Chat , puis cochez la case à côté de Configurer également l'hébergement Firebase pour cette application . Cliquez sur Enregistrer l'application .
  3. À l'étape suivante, vous verrez un objet de configuration. Copiez uniquement l'objet JS (pas le HTML environnant) dans firebase-config.js

Enregistrer la capture d'écran de l'application Web

Activer la connexion Google pour l'authentification Firebase

Pour permettre aux utilisateurs de se connecter à l'application Web avec leurs comptes Google, nous utiliserons la méthode de connexion Google .

Vous devez activer la connexion Google :

  1. Dans la console Firebase, recherchez la section Build dans le panneau de gauche.
  2. Cliquez sur Authentification , puis cliquez sur l'onglet Méthode de connexion (ou cliquez ici pour y accéder directement).
  3. Activez le fournisseur de connexion Google , puis cliquez sur Enregistrer .
  4. Définissez le nom public de votre application sur Conversation conviviale et choisissez un e-mail de support de projet dans le menu déroulant.
  5. Configurez votre écran de consentement OAuth dans Google Cloud Console et ajoutez un logo :

d89fb3873b5d36ae.png

Activer Cloud Firestore

L'application Web utilise Cloud Firestore pour enregistrer les messages de chat et recevoir de nouveaux messages de chat.

Vous devrez activer Cloud Firestore :

  1. Dans la section Build de la console Firebase, cliquez sur Firestore Database .
  2. Cliquez sur Créer une base de données dans le volet Cloud Firestore.

729991a081e7cd5.png

  1. Sélectionnez l'option Démarrer en mode test , puis cliquez sur Suivant après avoir lu la clause de non-responsabilité concernant les règles de sécurité.

Le mode test garantit que nous pouvons écrire librement dans la base de données pendant le développement. Nous rendrons notre base de données plus sécurisée plus tard dans cet atelier de programmation.

77e4986cbeaf9dee.png

  1. Définissez l'emplacement où vos données Cloud Firestore sont stockées. Vous pouvez laisser cela par défaut ou choisir une région proche de chez vous. Cliquez sur Terminé pour provisionner Firestore.

9f2bb0d4e7ca49c7.png

Activer le stockage en nuage

L'application Web utilise Cloud Storage pour Firebase pour stocker, télécharger et partager des images.

Vous devez activer Cloud Storage :

  1. Dans la section Build de la console Firebase, cliquez sur Stockage .
  2. S'il n'y a pas de bouton Démarrer , cela signifie que le stockage Cloud est déjà activé et que vous n'avez pas besoin de suivre les étapes ci-dessous.
  3. Cliquez sur Commencer .
  4. Lisez la clause de non-responsabilité concernant les règles de sécurité de votre projet Firebase, puis cliquez sur Suivant .

Avec les règles de sécurité par défaut, tout utilisateur authentifié peut écrire n'importe quoi dans Cloud Storage. Nous rendrons notre stockage plus sécurisé plus tard dans cet atelier de programmation.

62f1afdcd1260127.png

  1. L'emplacement Cloud Storage est présélectionné avec la même région que vous avez choisie pour votre base de données Cloud Firestore. Cliquez sur Terminé pour terminer la configuration.

1d7f49ebaddb32fc.png

4. Installez l'interface de ligne de commande Firebase

L'interface de ligne de commande (CLI) Firebase vous permet d'utiliser Firebase Hosting pour servir votre application Web localement, ainsi que de déployer votre application Web sur votre projet Firebase.

  1. Installez la CLI en exécutant la commande npm suivante :
npm -g install firebase-tools
  1. Vérifiez que la CLI a été correctement installée en exécutant la commande suivante :
firebase --version

Assurez-vous que la version de la CLI Firebase est v4.1.0 ou ultérieure.

  1. Autorisez la CLI Firebase en exécutant la commande suivante :
firebase login

Nous avons configuré le modèle d'application Web pour extraire la configuration de votre application pour l'hébergement Firebase à partir du répertoire local de votre application (le référentiel que vous avez cloné précédemment dans l'atelier de programmation). Mais pour extraire la configuration, nous devons associer votre application à votre projet Firebase.

  1. Assurez-vous que votre ligne de commande accède au répertoire web-start local de votre application.
  2. Associez votre application à votre projet Firebase en exécutant la commande suivante :
firebase use --add
  1. Lorsque vous y êtes invité, sélectionnez votre ID de projet , puis attribuez un alias à votre projet Firebase.

Un alias est utile si vous avez plusieurs environnements (production, staging, etc.). Cependant, pour cet atelier de programmation, utilisons simplement l'alias de default .

  1. Suivez les instructions restantes sur votre ligne de commande.

5. Exécutez l'application de démarrage localement

Maintenant que vous avez importé et configuré votre projet, vous êtes prêt à exécuter l'application Web pour la première fois.

  1. Dans une console du répertoire web-start , exécutez la commande CLI Firebase suivante :
firebase serve --only hosting
  1. Votre ligne de commande doit afficher la réponse suivante :
✔  hosting: Local server: http://localhost:5000

Nous utilisons l'émulateur Firebase Hosting pour servir notre application localement. L'application Web devrait maintenant être disponible à partir de http://localhost:5000 . Tous les fichiers situés dans le sous-répertoire public sont servis.

  1. À l'aide de votre navigateur, ouvrez votre application à l'adresse http://localhost:5000 .

Vous devriez voir l'interface utilisateur de votre application FriendlyChat, qui ne fonctionne pas (encore !) :

4c23f9475228cef4.png

L'application ne peut rien faire pour le moment, mais avec votre aide, elle le fera bientôt ! Jusqu'à présent, nous n'avons présenté que l'interface utilisateur pour vous.

Construisons maintenant un chat en temps réel !

6. Importer et configurer Firebase

Importer le SDK Firebase

Nous devons importer le SDK Firebase dans l'application. Il existe plusieurs façons de procéder, comme décrit dans notre documentation . Par exemple, vous pouvez importer la bibliothèque depuis notre CDN. Ou vous pouvez l'installer localement à l'aide de npm, puis l'empaqueter dans votre application si vous utilisez Browserify.

Nous allons obtenir le SDK Firebase de npm et utiliser Webpack pour regrouper notre code. Nous faisons cela pour que Webpack puisse supprimer tout code inutile, en gardant la taille de notre bundle JS petite pour nous assurer que notre application se charge le plus rapidement possible. Pour cet atelier de programmation, nous avons déjà créé un fichier web-start/package.json qui inclut le SDK Firebase en tant que dépendance, ainsi que importé les fonctions nécessaires en haut de web-start/src/index.js .

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

Au cours de cet atelier de programmation, nous allons utiliser Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging et Performance Monitoring. Nous importons donc toutes leurs bibliothèques. Dans vos futures applications, assurez-vous de n'importer que les parties de Firebase dont vous avez besoin, afin de raccourcir le temps de chargement de votre application.

Installez le SDK Firebase et démarrez votre build Webpack

Nous devons exécuter quelques commandes pour lancer la construction de notre application.

  1. Ouvrir une nouvelle fenêtre de terminal
  2. Assurez-vous que vous êtes dans le répertoire web-start
  3. Exécutez npm install pour télécharger le SDK Firebase
  4. Exécutez npm run start pour démarrer Webpack. Webpack reconstruira désormais continuellement notre code source pour le reste du laboratoire de programmation.

Configurer Firebase

Nous devons également configurer le SDK Firebase pour lui indiquer quel projet Firebase nous utilisons.

  1. Accédez aux paramètres de votre projet dans la console Firebase
  2. Dans la carte "Vos applications", sélectionnez le pseudo de l'application pour laquelle vous avez besoin d'un objet de configuration.
  3. Sélectionnez "Config" dans le volet d'extraits du SDK Firebase.
  4. Copiez l'extrait d'objet de configuration, puis ajoutez-le à web-start/src/firebase-config.js .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Maintenant, allez au bas de web-start/src/index.js et initialisez Firebase :

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. Configurer la connexion de l'utilisateur

Le SDK Firebase devrait maintenant être prêt à l'emploi puisqu'il est importé et initialisé dans index.js . Nous allons maintenant implémenter la connexion des utilisateurs à l'aide de Firebase Authentication .

Authentifiez vos utilisateurs avec Google Sign-In

Dans l'application, lorsqu'un utilisateur clique sur le bouton Se connecter avec Google , la fonction signIn est déclenchée. (Nous avons déjà configuré cela pour vous !) Pour cet atelier de programmation, nous souhaitons autoriser Firebase à utiliser Google en tant que fournisseur d'identité. Nous utiliserons une fenêtre contextuelle, mais plusieurs autres méthodes sont disponibles auprès de Firebase.

  1. Dans le répertoire web-start , dans le sous-répertoire src/ , ouvrez index.js .
  2. Trouvez la fonction signIn .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

La fonction signOut est déclenchée lorsque l'utilisateur clique sur le bouton Déconnexion .

  1. Revenez au fichier src/index.js .
  2. Trouvez la fonction signOutUser .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

Suivre l'état de l'authentification

Pour mettre à jour notre interface utilisateur en conséquence, nous avons besoin d'un moyen de vérifier si l'utilisateur est connecté ou déconnecté. Avec Firebase Authentication, vous pouvez enregistrer un observateur sur l'état d'authentification qui sera déclenché à chaque changement d'état d'authentification.

  1. Revenez au fichier src/index.js .
  2. Trouvez la fonction initFirebaseAuth .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

Le code ci-dessus enregistre la fonction authStateObserver en tant qu'observateur d'état d'authentification. Il se déclenchera à chaque changement d'état d'authentification (lorsque l'utilisateur se connecte ou se déconnecte). C'est à ce stade que nous mettrons à jour l'interface utilisateur pour afficher ou masquer le bouton de connexion, le bouton de déconnexion, la photo de profil de l'utilisateur connecté, etc. Toutes ces parties de l'interface utilisateur ont déjà été implémentées.

Afficher les informations de l'utilisateur connecté

Nous souhaitons afficher la photo de profil et le nom d'utilisateur de l'utilisateur connecté dans la barre supérieure de notre application. Dans Firebase, les données de l'utilisateur connecté sont toujours disponibles dans l'objet currentUser . Auparavant, nous avons configuré la fonction authStateObserver pour qu'elle se déclenche lorsque l'utilisateur se connecte afin que notre interface utilisateur se mette à jour en conséquence. Il appellera getProfilePicUrl et getUserName lorsqu'il sera déclenché.

  1. Revenez au fichier src/index.js .
  2. Recherchez les fonctions getProfilePicUrl et getUserName .
  3. Remplacez les deux fonctions par le code suivant.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

Nous affichons un message d'erreur si l'utilisateur essaie d'envoyer des messages alors qu'il n'est pas connecté. (Vous pouvez cependant essayer !) Nous devons donc détecter si l'utilisateur est réellement connecté.

  1. Revenez au fichier src/index.js .
  2. Recherchez la fonction isUserSignedIn .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

Testez la connexion à l'application

  1. Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur.
  2. Connectez-vous à l'application à l'aide du bouton de connexion et de votre compte Google. Si vous voyez un message d'erreur indiquant auth/operation-not-allowed , vérifiez que vous avez activé Google Sign-in en tant que fournisseur d'authentification dans la console Firebase.
  3. Une fois connecté, votre photo de profil et votre nom d'utilisateur doivent s'afficher : c7401b3d44d0d78b.png

8. Écrivez des messages sur Cloud Firestore

Dans cette section, nous allons écrire des données dans Cloud Firestore afin de pouvoir remplir l'interface utilisateur de l'application. Cela peut être fait manuellement avec la console Firebase , mais nous le ferons dans l'application elle-même pour démontrer une écriture Cloud Firestore de base.

Modèle de données

Les données Cloud Firestore sont divisées en collections, documents, champs et sous-collections. Nous stockerons chaque message du chat en tant que document dans une collection de niveau supérieur appelée messages .

688d7bc5fb662b57.png

Ajouter des messages à Cloud Firestore

Pour stocker les messages de chat écrits par les utilisateurs, nous utiliserons Cloud Firestore .

Dans cette section, vous allez ajouter la fonctionnalité permettant aux utilisateurs d'écrire de nouveaux messages dans votre base de données. Un utilisateur cliquant sur le bouton ENVOYER déclenchera l'extrait de code ci-dessous. Il ajoute un objet de message avec le contenu des champs de message à votre instance Cloud Firestore dans la collection messages . La méthode add() ajoute un nouveau document avec un ID généré automatiquement à la collection.

  1. Revenez au fichier src/index.js .
  2. Trouvez la fonction saveMessage .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Tester l'envoi de messages

  1. Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur.
  2. Après vous être connecté, saisissez un message tel que "Salut !", puis cliquez sur ENVOYER . Cela écrira le message dans Cloud Firestore. Cependant, vous ne verrez pas encore les données dans votre application Web réelle , car nous devons encore implémenter la récupération des données (la section suivante du codelab).
  3. Vous pouvez voir le message nouvellement ajouté dans votre console Firebase. Ouvrez votre console Firebase. Sous la section Build , cliquez sur Firestore Database (ou cliquez ici et sélectionnez votre projet) et vous devriez voir la collection de messages avec votre message nouvellement ajouté :

6812efe7da395692.png

9. Lire les messages

Synchroniser les messages

Pour lire les messages dans l'application, nous devrons ajouter des écouteurs qui se déclenchent lorsque les données changent, puis créer un élément d'interface utilisateur qui affiche les nouveaux messages.

Nous ajouterons un code qui écoute les nouveaux messages ajoutés à partir de l'application. Dans ce code, nous enregistrerons l'écouteur qui écoute les modifications apportées aux données. Nous n'afficherons que les 12 derniers messages du chat pour éviter d'afficher un très long historique lors du chargement.

  1. Revenez au fichier src/index.js .
  2. Trouvez la fonction loadMessages .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

Pour écouter les messages dans la base de données, nous créons une requête sur une collection en utilisant la fonction collection pour spécifier dans quelle collection se trouvent les données que nous voulons écouter. Dans le code ci-dessus, nous écoutons les changements dans les messages collection, qui est l'endroit où les messages de chat sont stockés. Nous appliquons également une limite en n'écoutant que les 12 derniers messages à l'aide de .limit(12) et en triant les messages par date à l'aide de orderBy('timestamp', 'desc') pour obtenir les 12 messages les plus récents.

La fonction onSnapshot prend une requête comme premier paramètre et une fonction de rappel comme second. La fonction de rappel sera déclenchée en cas de modification des documents correspondant à la requête. Cela peut se produire si un message est supprimé, modifié ou ajouté. Vous pouvez en savoir plus à ce sujet dans la documentation de Cloud Firestore .

Tester la synchronisation des messages

  1. Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur.
  2. Les messages que vous avez créés précédemment dans la base de données doivent être affichés dans l'interface utilisateur de FriendlyChat (voir ci-dessous). N'hésitez pas à écrire de nouveaux messages; ils devraient apparaître instantanément.
  3. (Facultatif) Vous pouvez essayer de supprimer, de modifier ou d'ajouter manuellement de nouveaux messages directement dans la section Base de données de la console Firebase ; toute modification doit être reflétée dans l'interface utilisateur.

Toutes nos félicitations! Vous lisez des documents Cloud Firestore dans votre application !

2168dec79b573d07.png

10. Envoyer des images

Nous allons maintenant ajouter une fonctionnalité qui partage des images.

Alors que Cloud Firestore est bon pour stocker des données structurées, Cloud Storage est mieux adapté pour stocker des fichiers. Cloud Storage pour Firebase est un service de stockage de fichiers/blobs, et nous l'utiliserons pour stocker toutes les images qu'un utilisateur partage à l'aide de notre application.

Enregistrer des images dans Cloud Storage

Pour cet atelier de programmation, nous avons déjà ajouté pour vous un bouton qui déclenche une boîte de dialogue de sélection de fichiers. Après avoir sélectionné un fichier, la fonction saveImageMessage est appelée et vous pouvez obtenir une référence au fichier sélectionné. La fonction saveImageMessage accomplit ce qui suit :

  1. Crée un message de chat "espace réservé" dans le flux de chat, afin que les utilisateurs voient une animation "Chargement" pendant que nous téléchargeons l'image.
  2. Importe le fichier image dans Cloud Storage vers ce chemin : /<uid>/<messageId>/<file_name>
  3. Génère une URL publiquement lisible pour le fichier image.
  4. Met à jour le message de chat avec l'URL du fichier image nouvellement téléchargé au lieu de l'image de chargement temporaire.

Vous allez maintenant ajouter la fonctionnalité pour envoyer une image :

  1. Revenez au fichier src/index.js .
  2. Trouvez la fonction saveImageMessage .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Tester l'envoi d'images

  1. Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur.
  2. Après vous être connecté, cliquez sur le bouton de téléchargement d'image 13734cb66773e5a3.png et sélectionnez un fichier image à l'aide du sélecteur de fichiers. Si vous cherchez une image, n'hésitez pas à utiliser cette jolie photo d'une tasse de café .
  3. Un nouveau message devrait apparaître dans l'interface utilisateur de l'application avec l'image sélectionnée : 3b1284f5144b54f6.png

Si vous essayez d'ajouter une image alors que vous n'êtes pas connecté, vous devriez voir une notification Toast vous indiquant que vous devez vous connecter pour ajouter des images.

11. Afficher les notifications

Nous allons maintenant ajouter la prise en charge des notifications du navigateur. L'application avertira les utilisateurs lorsque de nouveaux messages seront publiés dans le chat. Firebase Cloud Messaging (FCM) est une solution de messagerie multiplateforme qui vous permet d'envoyer des messages et des notifications de manière fiable et sans frais.

Ajouter le service worker FCM

L'application Web a besoin d'un agent de service qui recevra et affichera les notifications Web.

  1. Depuis le répertoire web-start , dans le répertoire src , ouvrez firebase-messaging-sw.js .
  2. Ajoutez le contenu suivant à ce fichier.

firebase-messagerie-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

Le service worker doit simplement charger et initialiser le SDK Firebase Cloud Messaging, qui se chargera d'afficher les notifications.

Obtenir des jetons d'appareil FCM

Lorsque les notifications ont été activées sur un appareil ou un navigateur, vous recevez un jeton d'appareil . Ce jeton d'appareil est ce que nous utilisons pour envoyer une notification à un appareil particulier ou à un navigateur particulier.

Lorsque l'utilisateur se connecte, nous appelons la fonction saveMessagingDeviceToken . C'est là que nous obtiendrons le jeton d'appareil FCM du navigateur et l'enregistrerons dans Cloud Firestore.

  1. Revenez au fichier src/index.js .
  2. Recherchez la fonction saveMessagingDeviceToken .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

Cependant, ce code ne fonctionnera pas initialement. Pour que votre application puisse récupérer le jeton d'appareil, l'utilisateur doit accorder à votre application l'autorisation d'afficher des notifications (étape suivante de l'atelier de programmation).

Demander des autorisations pour afficher les notifications

Lorsque l'utilisateur n'a pas encore accordé à votre application l'autorisation d'afficher des notifications, vous ne recevrez pas de jeton d'appareil. Dans ce cas, nous appelons la méthode firebase.messaging().requestPermission() , qui affichera une boîte de dialogue du navigateur demandant cette autorisation ( dans les navigateurs pris en charge ).

8b9d0c66dc36153d.png

  1. Revenez au fichier src/index.js .
  2. Trouvez la fonction requestNotificationsPermissions .
  3. Remplacez la fonction entière par le code suivant.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Obtenez votre jeton d'appareil

  1. Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur.
  2. Une fois connecté, la boîte de dialogue d'autorisation des notifications devrait apparaître : bd3454e6dbfb6723.png
  3. Cliquez sur Autoriser .
  4. Ouvrez la console JavaScript de votre navigateur. Vous devriez voir le message suivant : Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Copiez le jeton de votre appareil. Vous en aurez besoin pour la prochaine étape de l'atelier de programmation.

Envoyer une notification à votre appareil

Maintenant que vous avez votre jeton d'appareil, vous pouvez envoyer une notification.

  1. Ouvrez l' onglet Cloud Messaging de la console Firebase .
  2. Cliquez sur "Nouvelle notification"
  3. Entrez un titre de notification et un texte de notification.
  4. Sur le côté droit de l'écran, cliquez sur "envoyer un message de test"
  5. Entrez le jeton d'appareil que vous avez copié depuis la console JavaScript de votre navigateur, puis cliquez sur le signe plus ("+")
  6. Cliquez sur "tester"

Si votre application est au premier plan, vous verrez la notification dans la console JavaScript.

Si votre application est en arrière-plan, une notification doit apparaître dans votre navigateur, comme dans cet exemple :

de79e8638a45864c.png

12. Règles de sécurité Cloud Firestore

Afficher les règles de sécurité de la base de données

Cloud Firestore utilise un langage de règles spécifique pour définir les droits d'accès, la sécurité et les validations de données.

Lors de la configuration du projet Firebase au début de cet atelier de programmation, nous avons choisi d'utiliser les règles de sécurité par défaut du "mode test" afin de ne pas restreindre l'accès au magasin de données. Dans la console Firebase , dans l'onglet Règles de la section Base de données , vous pouvez afficher et modifier ces règles.

À l'heure actuelle, vous devriez voir les règles par défaut, qui ne restreignent pas l'accès au magasin de données. Cela signifie que n'importe quel utilisateur peut lire et écrire dans n'importe quelle collection de votre magasin de données.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Nous mettrons à jour les règles pour restreindre les choses en utilisant les règles suivantes :

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Mettre à jour les règles de sécurité de la base de données

Il existe deux façons de modifier les règles de sécurité de votre base de données, soit dans la console Firebase, soit à partir d'un fichier de règles local déployé à l'aide de la CLI Firebase.

Pour mettre à jour les règles de sécurité dans la console Firebase :

  1. Accédez à la section Base de données dans le panneau de gauche, puis cliquez sur l'onglet Règles .
  2. Remplacez les règles par défaut déjà présentes dans la console par les règles présentées ci-dessus.
  3. Cliquez sur Publier .

Pour mettre à jour les règles de sécurité à partir d'un fichier local :

  1. À partir du répertoire web-start , ouvrez firestore.rules .
  2. Remplacez les règles par défaut qui sont déjà dans le fichier par les règles indiquées ci-dessus.
  3. À partir du répertoire web-start , ouvrez firebase.json .
  4. Ajoutez l'attribut firestore.rules pointant vers firestore.rules , comme indiqué ci-dessous. (L'attribut hosting doit déjà figurer dans le fichier.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Déployez les règles de sécurité à l'aide de la CLI Firebase en exécutant la commande suivante :
firebase deploy --only firestore
  1. Votre ligne de commande doit afficher la réponse suivante :
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. Règles de sécurité du stockage Cloud

Afficher les règles de sécurité de Cloud Storage

Cloud Storage pour Firebase utilise un langage de règles spécifique pour définir les droits d'accès, la sécurité et les validations de données.

Lors de la configuration du projet Firebase au début de cet atelier de programmation, nous avons choisi d'utiliser la règle de sécurité Cloud Storage par défaut qui autorise uniquement les utilisateurs authentifiés à utiliser Cloud Storage. Dans la console Firebase , dans l'onglet Règles de la section Stockage , vous pouvez afficher et modifier les règles. Vous devriez voir la règle par défaut qui permet à tout utilisateur connecté de lire et d'écrire n'importe quel fichier dans votre compartiment de stockage.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Nous mettrons à jour les règles pour effectuer les opérations suivantes :

  • Autoriser chaque utilisateur à écrire uniquement dans ses propres dossiers spécifiques
  • Autoriser tout le monde à lire à partir de Cloud Storage
  • Assurez-vous que les fichiers téléchargés sont des images
  • Restreindre la taille des images pouvant être téléchargées à 5 Mo maximum

Cela peut être mis en œuvre en utilisant les règles suivantes :

règles.de.stockage

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Mettre à jour les règles de sécurité de Cloud Storage

Il existe deux façons de modifier vos règles de sécurité de stockage : soit dans la console Firebase, soit à partir d'un fichier de règles local déployé à l'aide de la CLI Firebase.

Pour mettre à jour les règles de sécurité dans la console Firebase :

  1. Accédez à la section Stockage dans le panneau de gauche, puis cliquez sur l'onglet Règles .
  2. Remplacez la règle par défaut qui est déjà dans la console par les règles présentées ci-dessus.
  3. Cliquez sur Publier .

Pour mettre à jour les règles de sécurité à partir d'un fichier local :

  1. Dans le répertoire web-start , ouvrez storage.rules .
  2. Remplacez les règles par défaut qui sont déjà dans le fichier par les règles indiquées ci-dessus.
  3. À partir du répertoire web-start , ouvrez firebase.json .
  4. Ajoutez l'attribut storage.rules pointant vers le fichier storage.rules , comme indiqué ci-dessous. (L'attribut hosting et database doit déjà figurer dans le fichier.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Déployez les règles de sécurité à l'aide de la CLI Firebase en exécutant la commande suivante :
firebase deploy --only storage
  1. Votre ligne de commande doit afficher la réponse suivante :
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. Recueillir des données sur les performances

Vous pouvez utiliser le SDK de surveillance des performances pour collecter des données de performances réelles à partir de votre application, puis examiner et analyser ces données dans la console Firebase. La surveillance des performances vous aide à comprendre où et quand les performances de votre application peuvent être améliorées afin que vous puissiez utiliser ces informations pour résoudre les problèmes de performances.

Il existe différentes façons d'intégrer le SDK JavaScript Firebase Performance Monitoring. Dans cet atelier de programmation, nous avons activé la surveillance des performances à partir des URL d'hébergement . Reportez-vous à la documentation pour voir d'autres méthodes d'activation du SDK.

Traces automatiques

Étant donné que nous importons déjà getPerformance en haut de web-start/src/index.js , il nous suffit d'ajouter une ligne pour indiquer à Performance Monitoring de collecter automatiquement les métriques de chargement de page et de demande réseau pour vous lorsque les utilisateurs visitent votre site déployé !

  1. Dans web-start/src/index.js , ajoutez la ligne suivante sous le TODO existant pour initialiser la surveillance des performances.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

Mesurer le premier délai d'entrée (optionnel)

Le délai de première saisie est utile car le navigateur qui répond à une interaction de l'utilisateur donne à vos utilisateurs leurs premières impressions sur la réactivité de votre application.

Le premier délai de saisie commence lorsque l'utilisateur interagit pour la première fois avec un élément de la page, par exemple en cliquant sur un bouton ou un lien hypertexte. Il s'arrête immédiatement après que le navigateur est en mesure de répondre à l'entrée, ce qui signifie que le navigateur n'est pas occupé à charger ou à analyser le contenu de votre page.

Si vous souhaitez mesurer le premier délai d'entrée, vous devrez inclure directement le code suivant.

  1. Ouvrez public/index.html .
  2. Décommentez la balise script sur la ligne suivante.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Pour en savoir plus sur le premier polyfill de délai d'entrée, consultez la documentation .

Afficher les données de performances

Étant donné que vous n'avez pas encore déployé votre site (vous le déploierez à l'étape suivante), voici une capture d'écran montrant les métriques sur les performances de chargement des pages que vous verrez dans la console Firebase dans les 30 minutes suivant l'interaction des utilisateurs avec votre site déployé :

29389131150f33d7.png

Lorsque vous intégrez le SDK de surveillance des performances dans votre application, vous n'avez pas besoin d'écrire d'autre code avant que votre application ne commence à surveiller automatiquement plusieurs aspects critiques des performances. Pour les applications Web, le SDK enregistre des aspects tels que la première peinture de contenu, la possibilité pour les utilisateurs d'interagir avec votre application, etc.

Vous pouvez également configurer des traces, des métriques et des attributs personnalisés pour mesurer des aspects spécifiques de votre application. Consultez la documentation pour en savoir plus sur les traces et métriques personnalisées et les attributs personnalisés .

15. Déployez votre application à l'aide de Firebase Hosting

Firebase propose un service d'hébergement pour servir vos actifs et vos applications Web. Vous pouvez déployer vos fichiers sur Firebase Hosting à l'aide de la CLI Firebase. Avant de déployer, vous devez spécifier dans votre fichier firebase.json quels fichiers locaux doivent être déployés. Pour cet atelier de programmation, nous l'avons déjà fait pour vous, car cette étape était nécessaire pour servir nos fichiers pendant cet atelier de programmation. Les paramètres d'hébergement sont spécifiés sous l'attribut hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Ces paramètres indiquent à la CLI que nous voulons déployer tous les fichiers dans le répertoire ./public ( "public": "./public" ).

  1. Assurez-vous que votre ligne de commande accède au répertoire web-start local de votre application.
  2. Déployez vos fichiers dans votre projet Firebase en exécutant la commande suivante :
firebase deploy --except functions
  1. La console doit afficher les éléments suivants :
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Visitez votre application Web qui est désormais entièrement hébergée sur un CDN mondial à l'aide de Firebase Hosting sur deux de vos propres sous-domaines Firebase :
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Alternativement, vous pouvez exécuter firebase open hosting:site dans la ligne de commande.

Consultez la documentation pour en savoir plus sur le fonctionnement de Firebase Hosting .

Accédez à la section Hébergement de la console Firebase de votre projet pour afficher des informations et des outils d'hébergement utiles, y compris l'historique de vos déploiements, la fonctionnalité permettant de revenir aux versions précédentes de votre application et le flux de travail pour configurer un domaine personnalisé.

16. Félicitations !

Vous avez utilisé Firebase pour créer une application Web de chat en temps réel !

Ce que nous avons couvert

  • Authentification Firebase
  • Cloud Firestore
  • SDK Firebase pour Cloud Storage
  • Messagerie cloud Firebase
  • Surveillance des performances de Firebase
  • Hébergement Firebase

Prochaines étapes

Learn more