Atelier de programmation Web Firebase

Dans ce codelab, vous apprendrez à utiliser Firebase pour créer facilement des applications Web en mettant en œuvre et le déploiement d' un client de messagerie instantanée en utilisant 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 IDE / texte de votre choix, comme WebStorm , Atom , Sublime , ou le code VS
  • Le gestionnaire de paquets NPM , qui vient généralement 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.)

Clone du codelab référentiel GitHub à partir de la ligne de commande:

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

Sinon, si vous ne l' avez pas git installé, vous pouvez télécharger le référentiel en tant que fichier ZIP .

Importer l'application de démarrage

Utilisation de votre IDE, ouvrir ou importer le 📁 web-start répertoire à partir du référentiel cloné. Cette 📁 web-start répertoire contient le code de départ pour la codelab, qui sera une application web de chat entièrement fonctionnel.

Créer un projet Firebase

  1. Se connecter à Firebase .
  2. Dans la console Firebase, cliquez sur Ajouter un projet, puis le nom de votre projet Firebase FriendlyChat. Mémorisez l'ID de votre projet Firebase.
  3. Décochez la case 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 :

  • Firebase authentification pour permettre facilement vos utilisateurs de se connecter à votre application.
  • Cloud Firestore pour enregistrer des données structurées sur le nuage et la notification instantanée obtenir des modifications de données.
  • Cloud Storage pour Firebase pour enregistrer des fichiers dans le nuage.
  • Hébergement Firebase à l' hôte et de servir vos actifs.
  • Firebase Nuage de messagerie pour envoyer des notifications push et navigateur d'affichage des notifications pop - up.
  • Firebase Contrôle des performances de recueillir des données de performance utilisateur 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 amical chat, puis cochez la case à côté de Firebase également mis en place d' hébergement pour cette application. Cliquez sur l' application de vous inscrire.
  3. À l'étape suivante, vous verrez un objet de configuration. Copier tout l'objet JS (pas autour HTML) dans Firebase-config.js

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

Activer la connexion dans Google pour l' authentification Firebase

Pour permettre aux utilisateurs de se connecter à l'application Web avec leur compte Google, nous allons utiliser le signe dans Google méthode.

Vous devez activer la connexion Google:

  1. Dans la console Firebase, recherchez la section de construction dans le panneau gauche.
  2. Cliquez sur Authentification, puis cliquez sur le signe dans l' onglet méthode (ou cliquez ici pour aller directement là - bas).
  3. Activer le signe dans Google fournisseur, puis cliquez sur Enregistrer.
  4. Définissez le nom destiné au public de votre application Friendly chat et choisissez un e - mail de soutien du projet dans le menu déroulant.
  5. Configurez votre écran de consentement OAuth dans la console Google Cloud et ajouter un logo:

d89fb3873b5d36ae.png

Activer Cloud Firestore

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

Vous devez activer Cloud Firestore :

  1. Dans la section de construction de la console Firebase, cliquez sur la base de données Firestore.
  2. Cliquez sur Créer la base de données dans le volet Nuage Firestore.

729991a081e7cd5.png

  1. Sélectionnez l'option Démarrer dans le mode de 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 la fourniture 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 de construction de la console Firebase, cliquez sur Stockage.
  2. S'il n'y a pas bouton Commencer, cela signifie que Cloud Storage est déjà activé, et vous n'avez pas besoin de suivre les étapes ci - dessous.
  3. Cliquez pour commencer.
  4. Lire l'avertissement sur les règles de sécurité pour 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 local de votre application web-start répertoire.
  2. Associez votre application à votre projet Firebase en exécutant la commande suivante :
firebase use --add
  1. Lorsque vous êtes invité, sélectionnez votre ID projet, puis donnez votre projet Firebase un alias.

Un alias est utile si vous avez plusieurs environnements (production, staging, etc.). Cependant, pour ce codelab, nous allons simplement utiliser 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 web-start répertoire, exécutez la commande Firebase CLI 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' hébergement Firebase émulateur pour servir notre application localement. L'application Web doit maintenant être disponible à partir de http: // localhost: 5000 . Tous les fichiers qui se trouvent sous le public sous - répertoire sont servis.

  1. En utilisant votre navigateur, ouvrez votre application à 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 y a 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.

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 ce codelab, nous avons déjà créé un web-start/package.json fichier qui inclut le SDK Firebase comme une dépendance, ainsi que les fonctions importées 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 web-start répertoire
  3. Exécutez npm install pour télécharger le SDK Firebase
  4. Exécutez npm run start pour démarrer Webpack. Webpack va maintenant reconstruire continuellement notre code de cours 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 à vos paramètres de projet dans la console Firebase
  2. Dans la fiche "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 de l' objet de configuration, puis l' ajouter à 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 fond de web-start/src/index.js et initialize Firebase:

index.js

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

Le SDK Firebase devrait maintenant être prêt à l' emploi car il est importé et initialisé dans index.html . Nous allons maintenant mettre en œuvre à l' aide de connexion utilisateur Firebase authentification .

Authentifiez vos utilisateurs avec Google Sign-In

Dans l'application, lorsqu'un utilisateur clique sur le bouton Connectez - vous avec Google, la signIn fonction 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 allons utiliser un pop - up, mais plusieurs autres méthodes sommes disponibles à partir de Firebase.

  1. Dans le web-start répertoire, 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 signOut fonction est déclenchée lorsque l'utilisateur clique sur le bouton Déconnexion.

  1. Retour 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 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. Retour 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 que l'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. En Firebase, la signature dans les données de l' utilisateur est toujours disponible dans le currentUser objet. Plus tôt, nous avons mis en place la authStateObserver fonction de déclenchement lorsque l'utilisateur se connecte en sorte que nos mises à jour de l' interface utilisateur en conséquence. Il appellera getProfilePicUrl et getUserName lors du déclenchement.

  1. Retour au fichier src/index.js .
  2. Trouvez 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 l'essayer !) Nous devons donc détecter si l'utilisateur est réellement connecté.

  1. Retour au fichier src/index.js .
  2. Trouvez 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;
}

Tester la connexion à l'application

  1. Si votre application est toujours en cours de diffusion, actualisez votre application dans le navigateur. Dans le cas contraire, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application de http: // localhost: 5000 , puis ouvrez - le 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 , assurez - vous que vous avez activé de session Google 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 se faire manuellement avec la console Firebase , mais nous allons le faire dans l'application elle - même pour démontrer un nuage Firestore écriture de base.

Modèle de données

Les données Cloud Firestore sont divisées en collections, documents, champs et sous-collections. Nous enregistrons chaque message de chat comme un document dans une collection de niveau supérieur appelé messages .

688d7bc5fb662b57.png

Ajouter des messages à Cloud Firestore

Pour enregistrer les messages de chat qui sont écrits par les utilisateurs, nous allons utiliser Nuage 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 en cliquant sur le bouton ENVOYER déclenche l'extrait de code ci - dessous. Il ajoute un objet de message avec le contenu des champs de message à votre instance Cloud Firestore dans les messages collection. L' add() méthode ajoute un nouveau document avec un identifiant généré automatiquement à la collection.

  1. Retour 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 en cours de diffusion, actualisez votre application dans le navigateur. Dans le cas contraire, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application de http: // localhost: 5000 , puis ouvrez - le dans votre navigateur.
  2. Après avoir signé, entrez un message tel que « Hé! », 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 parce que nous avons encore besoin de mettre en œuvre 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. Dans la section de construction cliquez sur Firestore 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

Synchronisez 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. Retour au fichier src/index.js .
  2. Trouver 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 collection fonction pour spécifier quelle collection les données que nous voulons écouter est. Dans le code ci - dessus, nous sommes à votre écoute aux changements dans les messages collection, qui est l'endroit où les messages de discussion sont stockés. Nous appliquons également une limite de seulement écouter les 12 derniers messages en utilisant .limit(12) et de commander les messages par date en utilisant orderBy('timestamp', 'desc') pour obtenir les 12 messages les plus récents.

La onSnapshot fonction prend une requête en tant que premier paramètre, et une fonction de rappel en tant que seconde. 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 lire plus à ce sujet dans la documentation Firestore - Cloud .

Tester la synchronisation des messages

  1. Si votre application est toujours en cours de diffusion, actualisez votre application dans le navigateur. Dans le cas contraire, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application de http: // localhost: 5000 , puis ouvrez - le 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 manuellement, la modification ou l' ajout de nouveaux messages directement dans la section de 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 pour Firebase est un service de stockage de fichiers / blob, et nous allons l' utiliser pour stocker des images utilisateur partage en utilisant notre application.

Enregistrer des images sur 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 saveImageMessage fonction est appelée, et vous pouvez obtenir une référence au fichier sélectionné. La saveImageMessage fonction accomplit ce qui suit:

  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. Uploads le fichier image pour Cloud Storage à 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. Retour 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 en cours de diffusion, actualisez votre application dans le navigateur. Dans le cas contraire, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application de http: // localhost: 5000 , puis ouvrez - le 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 êtes à la recherche d'une image, vous pouvez utiliser cette belle 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.

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 Nuage de messagerie (FCM) est une solution de messagerie multi-plateforme qui vous permet de diffuser de manière fiable des messages et des notifications sans frais.

Ajouter le service worker FCM

L'application Web a besoin d' un travailleur de service qui recevra les notifications Web d'affichage.

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

firebase-messages-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 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 périphérique ou d'un navigateur, vous recevrez un jeton appareil. Ce jeton d'appareil est ce que nous utilisons pour envoyer une notification à un appareil particulier ou à un navigateur particulier.

Lorsque les signes-à l' utilisateur, nous appelons la saveMessagingDeviceToken fonction. Voilà où nous allons obtenir le dispositif de jeton FCM à partir du navigateur et enregistrez - Cloud Firestore.

  1. Retour au fichier src/index.js .
  2. Trouvez 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 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 le firebase.messaging().requestPermission() Méthode, qui affiche une boîte de dialogue de navigateur demandant cette autorisation ( dans les navigateurs pris en charge ).

8b9d0c66dc36153d.png

  1. Retour au fichier src/index.js .
  2. Trouver 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 en cours de diffusion, actualisez votre application dans le navigateur. Dans le cas contraire, exécutez firebase serve --only hosting sur la ligne de commande pour commencer à servir l'application de http: // localhost: 5000 , puis ouvrez - le 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. Ouvrez l' onglet Nuage de messagerie de la console Firebase .
  2. Cliquez sur "Nouvelle notification"
  3. Saisissez 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. Saisissez 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 devrait apparaître dans votre navigateur, comme dans cet exemple :

de79e8638a45864c.png

Voir les règles de sécurité de base de données

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

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 de base de données, vous pouvez visualiser 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. Allez à la section de base de données à partir du panneau 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. Depuis le web-start répertoire, ouvert 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. Depuis le web-start répertoire, ouvert firebase.json .
  4. Ajouter les firestore.rules attribut pointant vers firestore.rules , comme indiqué ci - dessous. (L' hosting attribut doit être déjà 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 spécifique des règles langage pour définir les droits d'accès, de sécurité et de validation 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 de stockage, vous pouvez visualiser 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. Allez à la section Stockage du 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. Depuis le web-start répertoire, ouvert 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. Depuis le web-start répertoire, ouvert firebase.json .
  4. Ajouter l' storage.rules attribut pointant vers le storage.rules fichier, comme indiqué ci - dessous. (L' hosting et la database de database attribut doit être déjà 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 ce codelab, nous avons permis Suivi des performances des URL d' hébergement. Reportez - vous à la documentation pour voir d' autres méthodes permettant de le SDK.

Traces automatiques

Puisque nous importons déjà getPerformance en haut de web-start/src/index.js , nous avons juste besoin d'ajouter une ligne à dire Suivi des performances à la charge page Collect automatiquement et les paramètres de demande de réseau pour vous lorsque les utilisateurs visitent votre site déployé!

  1. Dans web-start/src/index.js , ajoutez la ligne suivante en dessous de la existante TODO pour initialiser la surveillance de la performance.

index.js

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

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

Délai d'entrée premier est utile car le navigateur en réponse à une interaction de l' 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. Ouvert public/index.html .
  2. Supprimez le script étiquette 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, jetez un oeil à 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. Visitez la documentation pour en savoir plus sur les traces personnalisées et des mesures et des attributs personnalisés .

Offres Firebase un service d' hébergement pour servir vos actifs et des 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 firebase.json fichier que les 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ées dans l' hosting attribut:

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 du ./public répertoire ( "public": "./public" ).

  1. Assurez - vous que votre ligne de commande accède local de votre application web-start répertoire.
  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

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

Visitez la documentation pour en savoir plus sur la façon dont fonctionne l' hébergement Firebase .

Aller à la console Firebase section d' hébergement de votre projet pour afficher les informations d'hébergement et des outils utiles, y compris l'historique de vos Déploie, la fonctionnalité de revenir à des versions précédentes de votre application, et le flux de travail pour mettre en place un domaine personnalisé.

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

Apprendre encore plus