Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Atelier de programmation Web Firebase

Dans cet atelier de programmation, vous apprendrez à utiliser Firebase pour créer facilement des applications Web en implémentant 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 de Cloud Storage pour Firebase.
  • Authentifiez vos utilisateurs à l'aide de l'authentification Firebase.
  • Déployez votre application Web sur Firebase Hosting.
  • Envoyez des notifications avec Firebase Cloud Messaging.
  • Collectez les données de performances de votre application Web.

Ce dont vous aurez besoin

  • L'éditeur de texte/IDE 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.)

Clonez le dépôt GitHub du laboratoire 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 de démarrage web-start contient le code de démarrage du laboratoire de programmation, qui sera une application Web de discussion entièrement fonctionnelle.

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 . Mémorisez l'ID de 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 des produits Firebase disponibles pour les applications Web :

  • Authentification Firebase pour permettre facilement à vos utilisateurs de se connecter à 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 Web 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. Cliquez sur les étapes restantes. Vous n'avez pas besoin de suivre les instructions maintenant ; ceux-ci seront couverts dans les étapes ultérieures de ce laboratoire de programmation.

ea9ab0db531a104c.png

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, localisez la section Build dans le panneau de gauche.
  2. Cliquez sur Authentification , puis 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 Friendly Chat et choisissez un e-mail d'assistance Project dans le menu déroulant.
  5. Configurez votre écran d'autorisation 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 discussion et recevoir de nouveaux messages de discussion.

Vous devez 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 l'avertissement sur les règles de sécurité.

Le mode test garantit que nous pouvons librement écrire dans la base de données pendant le développement. Nous allons rendre 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 cette valeur 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 Storage .
  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 sur Cloud Storage. Nous allons rendre 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

L'interface de ligne de commande (CLI) de 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 Firebase CLI est la v4.1.0 ou une version 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 de 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.

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 à partir du répertoire de web-start , exécutez la commande CLI Firebase suivante :
firebase serve --only hosting
  1. Votre ligne de commande devrait 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 qui se trouvent 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é l'interface utilisateur que pour vous.

Construisons maintenant un chat en temps réel !

Importer le SDK Firebase

Nous devons importer le SDK Firebase dans l'application. Il existe plusieurs façons de le faire, 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.

Puisque nous utilisons Firebase Hosting pour servir notre application, nous allons importer les URL locales qui se trouvent dans le fichier index.html (situé dans votre répertoire web-start/public/ ). Pour cet atelier de programmation, nous avons déjà ajouté les lignes suivantes pour vous au bas du fichier index.html , mais vous pouvez vérifier qu'elles sont bien là.

index.html

<script src="/__/firebase/8.6.7/firebase-app.js"></script>
<script src="/__/firebase/8.6.7/firebase-auth.js"></script>
<script src="/__/firebase/8.6.7/firebase-storage.js"></script>
<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>
<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

Au cours de cet atelier de programmation, nous allons utiliser Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging et Performance Monitoring, nous allons donc importer 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.

Configurer Firebase

Nous devons également configurer le SDK Firebase pour lui indiquer quel projet Firebase nous utilisons. Puisque nous utilisons Firebase Hosting, vous pouvez importer un script spécial qui effectuera cette configuration pour vous. Encore une fois, pour cet atelier de programmation, nous avons déjà ajouté la ligne suivante pour vous au bas du fichier public/index.html , mais vérifiez bien qu'elle s'y trouve.

index.html

<script src="/__/firebase/init.js"></script>

Ce script contient la configuration de votre projet Firebase basée sur le projet Firebase que vous avez spécifié précédemment lorsque vous avez exécuté firebase use --add .

N'hésitez pas à inspecter le fichier init.js pour voir à quoi ressemble la configuration de votre projet. Pour ce faire, ouvrez http://localhost:5000/__/firebase/init.js dans votre navigateur. Vous devriez voir quelque chose qui ressemble à ce qui suit :

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

Le SDK Firebase devrait maintenant être prêt à être utilisé puisqu'il est importé et initialisé dans index.html . 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 de signIn est déclenchée. (Nous l'avons déjà configuré pour vous !) Pour cet atelier de programmation, nous souhaitons autoriser Firebase à utiliser Google comme fournisseur d'identité. Nous utiliserons une fenêtre contextuelle, mais plusieurs autres méthodes sont disponibles à partir de Firebase.

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

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

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

  1. Revenez au fichier public/scripts/main.js .
  2. Trouvez la fonction signOut .
  3. Remplacez la fonction entière par le code suivant.

main.js

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

Suivre l'état d'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 fois que l'état d'authentification change.

  1. Revenez au fichier public/scripts/main.js .
  2. Recherchez la fonction initFirebaseAuth .
  3. Remplacez la fonction entière par le code suivant.

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

Le code ci-dessus enregistre la fonction authStateObserver tant qu'observateur d'état d'authentification. Il se déclenchera chaque fois que l'état d'authentification change (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 firebase.auth().currentUser . Auparavant, nous avons configuré la fonction authStateObserver pour qu'elle se déclenche lorsque l'utilisateur se authStateObserver afin que notre interface utilisateur se authStateObserver à jour en conséquence. Il appellera getProfilePicUrl et getUserName lorsqu'il est déclenché.

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

main.js

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

// Returns the signed-in user's display name.
function getUserName() {
  return firebase.auth().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 l'essayer !) Nous devons donc détecter si l'utilisateur est réellement connecté.

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

main.js

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

Tester la connexion à l'application

  1. Si votre application est toujours en cours de diffusion, 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. Après vous être connecté, votre photo de profil et votre nom d'utilisateur devraient s'afficher : c7401b3d44d0d78b.png

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 de base dans Cloud Firestore.

Modèle de données

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

688d7bc5fb662b57.png

Ajouter des messages à Cloud Firestore

Pour stocker les messages de discussion é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 de messages . La méthode add() ajoute un nouveau document avec un ID généré automatiquement à la collection.

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

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

Tester l'envoi de messages

  1. Si votre application est toujours en cours de diffusion, 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 actuelle, car nous devons encore implémenter la récupération des données (la section suivante du laboratoire de programmation).
  3. Vous pouvez voir le message nouvellement ajouté dans votre console Firebase. Ouvrez votre console Firebase. Dans la section Construire , cliquez sur Base de données (ou cliquez ici et sélectionnez votre projet) et vous devriez voir la collection de messages avec votre message nouvellement ajouté :

6812efe7da395692.png

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 allons ajouter du code qui écoute les messages nouvellement ajoutés de l'application. Dans ce code, nous allons enregistrer 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 public/scripts/main.js .
  2. Trouvez la fonction loadMessages .
  3. Remplacez la fonction entière par le code suivant.

main.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.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(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 .collection les données que nous voulons écouter. Dans le code ci-dessus, nous écoutons les changements dans le collection de messages , qui est l'endroit où les messages de discussion sont stockés. Nous appliquons également une limite en n'écoutant que les 12 derniers messages en utilisant .limit(12) et en .limit(12) les messages par date en utilisant .orderBy('timestamp', 'desc') pour obtenir les 12 messages les plus récents.

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

Tester la synchronisation des messages

  1. Si votre application est toujours en cours de diffusion, 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, modifier ou ajouter manuellement de nouveaux messages directement dans la section Base de données de la console Firebase ; tout changement doit être reflété dans l'interface utilisateur.

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

2168dec79b573d07.png

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 for 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 les saveImageMessage suivantes :

  1. Crée un message de discussion « espace réservé » dans le flux de discussion, 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 discussion 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 public/scripts/main.js .
  2. Trouvez la fonction saveImageMessage .
  3. Remplacez la fonction entière par le code suivant.

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(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 en cours de diffusion, 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 à 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.

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

Ajouter l'ID d'expéditeur GCM à la liste blanche

Dans le manifeste de l'application Web , vous devez spécifier le gcm_sender_id , qui est une valeur codée en dur indiquant que FCM est autorisé à envoyer des messages à cette application.

  1. Depuis le répertoire web-start , dans le répertoire public , ouvrez manifest.json .
  2. Ajoutez la valeur de l'ID de l'expéditeur du navigateur dans l'attribut gcm_sender_id exactement comme indiqué ci-dessous. Ne modifiez pas la valeur par rapport à ce qui est indiqué ci-dessous.

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

Ajouter le service worker FCM

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

  1. Depuis le répertoire web-start , dans le répertoire public , créez un nouveau fichier nommé firebase-messaging-sw.js .
  2. Ajoutez le contenu suivant à ce nouveau fichier.

firebase-messages-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

Le technicien de maintenance 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 recevrez 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 saveMessagingDeviceToken , nous appelons la fonction saveMessagingDeviceToken . C'est là que nous obtiendrons le jeton d'appareil FCM à partir du navigateur et l'enregistrerons dans Cloud Firestore.

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

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(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 de l'appareil, l'utilisateur doit autoriser votre application à afficher des notifications (étape suivante du laboratoire de programmation).

Demander des autorisations pour afficher des notifications

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

8b9d0c66dc36153d.png

  1. Revenez au fichier public/scripts/main.js .
  2. Recherchez la fonction requestNotificationsPermissions .
  3. Remplacez la fonction entière par le code suivant.

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

Obtenez votre jeton d'appareil

  1. Si votre application est toujours en cours de diffusion, 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 du labo de programmation.

Envoyer une notification à votre appareil

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

  1. En plus du jeton d'appareil, vous aurez également besoin de la clé de serveur de votre application Firebase. Pour obtenir cette clé, accédez à Firebase Console > Project Settings > Cloud Messaging , puis copiez la Server Key .

Pour envoyer une notification, vous devez envoyer la requête HTTP suivante :

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}
  1. Sur la ligne de commande, exécutez la commande cURL suivante.
curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

Notez que la notification n'apparaîtra que si l'application FriendlyChat est en arrière-plan. Vous devez quitter ou afficher un autre onglet pour que la notification s'affiche. Lorsque l'application est au premier plan, il existe un moyen de récupérer les messages envoyés par FCM .

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

de79e8638a45864c.png

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 des 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 datastore. 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 limitent pas l'accès à la banque de données. Cela signifie que tout utilisateur peut lire et écrire dans toutes les collections de votre banque 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 manières 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 indiqué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 de web-start , ouvrez firestore.rules .
  2. Remplacez les règles par défaut déjà présentes dans le fichier par les règles indiquées ci-dessus.
  3. À partir du répertoire de web-start , ouvrez firebase.json .
  4. Ajoutez l'attribut firestore.rules pointant vers firestore.rules , comme indiqué ci-dessous. (L'attribut d' hosting doit déjà être 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 devrait 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

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 des 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 des fichiers 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 depuis Cloud Storage
  • Assurez-vous que les fichiers téléchargés sont des images
  • Limitez 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 manières 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 indiqué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 de web-start , ouvrez storage.rules .
  2. Remplacez les règles par défaut déjà présentes dans le fichier par les règles indiquées ci-dessus.
  3. À partir du répertoire de web-start , ouvrez firebase.json .
  4. Ajoutez l'attribut storage.rules pointant vers le fichier storage.rules , comme indiqué ci-dessous. (L'attribut d' hosting et de database doit déjà être 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 devrait 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

Vous pouvez utiliser le SDK Performance Monitoring 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 manières 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 avons inclus firebase-performance.js et init.js dans une étape précédente du laboratoire de programmation, il nous suffit d'ajouter une ligne pour indiquer à Performance Monitoring de collecter automatiquement les métriques de charge de page et de demande réseau pour vous lorsque les utilisateurs visitent votre site déployé !

  1. Dans public/scripts/main.js , ajoutez la ligne suivante sous le TODO existant pour initialiser la surveillance des performances.

main.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

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

Le délai de première entrée est utile car le navigateur répondant à une interaction utilisateur donne à vos utilisateurs leurs premières impressions sur la réactivité de votre application.

Le délai de première entrée commence lorsque l'utilisateur interagit pour la première fois avec un élément de la page, comme en cliquant sur un bouton ou un lien hypertexte. Il s'arrête immédiatement après que le navigateur est capable 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 de 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 retard 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éployerez à l'étape suivante), voici une capture d'écran montrant les métriques sur les performances de chargement de page 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 .

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 le déploiement, 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 d' 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 de web-start local de votre application.
  2. Deploy your files to your Firebase project by running the following command:
firebase deploy --except functions
  1. The console should display the following:
=== 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. Visit your web app that's now fully hosted using Firebase Hosting at two of your very own Firebase subdomains:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app .

Alternatively, you can run firebase open hosting:site in the command line.

Visit the documentation to learn more about how Firebase Hosting works .

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

You've used Firebase to build a real-time chat web application!

What we've covered

  • Firebase Authentication
  • Cloud Firestore
  • Firebase SDK for Cloud Storage
  • Firebase Cloud Messaging
  • Firebase Performance Monitoring
  • Firebase Hosting

Next steps

Learn more