Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Cette page a été traduite par l'API Cloud Translation.
Switch to English

Découvrez Firebase pour le Web

Dans cet atelier de programmation, vous apprendrez certaines des bases de Firebase pour créer des applications Web interactives. Vous allez créer et déployer une application de discussion d'événement RSVP et de livre d'or à l'aide de plusieurs produits Firebase.

59abdefbcc23bbbe.png

Ce que tu apprendras

  • Authentifiez les utilisateurs avec l'authentification Firebase et FirebaseUI.
  • Synchronisez les données à l'aide de Cloud Firestore.
  • Écrivez des règles de sécurité Firebase pour sécuriser une base de données.
  • Déployez une application Web sur Firebase Hosting.

Ce dont vous aurez besoin

  • Un navigateur de votre choix, tel que Chrome.
  • Accès à stackblitz.com (pas de compte ni de connexion nécessaire).
  • Un compte Google, comme un compte Gmail. Nous vous recommandons le compte de messagerie que vous utilisez déjà pour votre compte GitHub. Cela vous permet d'utiliser les fonctionnalités avancées de StackBlitz.
  • Exemple de code du laboratoire de codes. Consultez l'étape suivante pour savoir comment obtenir le code.

Dans ce laboratoire de codes, vous créez et déployez une application à l'aide de StackBlitz , un éditeur en ligne qui intègre plusieurs flux de travail Firebase. Stackblitz ne nécessite aucune installation de logiciel ni compte StackBlitz spécial.

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

  1. Accédez à cette URL pour le code de départ: https://stackblitz.com/edit/firebase-gtk-web-start
  2. En haut de la page StackBlitz, cliquez sur Fork : f5135360aef481cc.png

Vous avez maintenant une copie du code de départ en tant que votre propre projet StackBlitz. Comme vous ne vous êtes pas connecté, votre compte s'appelle @anonymous , mais le projet a un nom unique, ainsi qu'une URL unique. Tous vos fichiers et modifications sont enregistrés dans ce projet StackBlitz.

Les matériaux de départ de ce laboratoire de codes fournissent une structure pour l'application Web, y compris des feuilles de style et quelques conteneurs HTML pour l'application. Plus tard dans ce codelab, vous connecterez ces conteneurs à Firebase.

Pour commencer, familiarisons-nous un peu plus avec l'interface StackBlitz.

  1. Dans StackBlitz, ouvrez le fichier index.html .
  2. Localisez le event-details-container et le event-details-container description-container et essayez de modifier certains détails de l'événement.

Lorsque vous modifiez le texte, le rechargement automatique de la page dans StackBlitz affiche les nouveaux détails de l'événement. Cool, ouais?

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>



<!-- ... -->

L'aperçu de votre application devrait ressembler à ceci:

Aperçu de l'application

908cc57ce3a5b5fe.png

L'affichage des informations sur l'événement est idéal pour vos invités, mais le simple fait d'afficher les événements n'est pas très utile pour personne. Ajoutons des fonctionnalités dynamiques à cette application. Pour cela, vous devrez connecter Firebase à votre application. Pour démarrer avec Firebase, vous devez créer et configurer un projet Firebase.

Créer un projet Firebase

  1. Connectez-vous à Firebase .
  2. Dans la console Firebase, cliquez sur Ajouter un projet (ou Créer un projet ) et nommez votre projet Firebase Firebase-Web-Codelab .

a67c239f8cc7f4b5.png

  1. Cliquez sur les options de création de projet. Acceptez les conditions de Firebase si vous y êtes invité. Ignorez la configuration de Google Analytics, car vous n'utiliserez pas Analytics pour cette application.

Pour en savoir plus sur les projets Firebase, consultez Comprendre les projets Firebase .

L'application que vous créez utilise plusieurs produits Firebase disponibles pour les applications Web:

  • L'authentification Firebase et l' interface utilisateur Firebase permettent à vos utilisateurs de se connecter facilement à votre application.
  • Cloud Firestore pour enregistrer des données structurées sur le cloud et recevoir une notification instantanée lorsque les données changent.
  • Règles de sécurité Firebase pour sécuriser votre base de données.
  • Firebase Hosting pour héberger et servir vos actifs.

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

Activer la connexion par e-mail pour l'authentification Firebase

Pour permettre aux utilisateurs de se connecter à l'application Web, vous utiliserez la méthode de connexion par e-mail / mot de passe pour ce codelab:

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

Activer Cloud Firestore

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

Activez Cloud Firestore:

  1. Dans la section Développer de la console Firebase, cliquez sur Base de données .
  2. Sous Cloud Firestore , cliquez sur Créer une base de données . 3ce19fd6467e51c5.png
  1. Sélectionnez l'option Démarrer en mode test . Lisez la clause de non-responsabilité concernant les règles de sécurité. Le mode test garantit que vous pouvez écrire librement dans la base de données pendant le développement. Cliquez sur Suivant . 56369cebb9300eb.png
  1. Sélectionnez l'emplacement de votre base de données (vous pouvez simplement utiliser la valeur par défaut). Notez que cet emplacement ne peut pas être modifié ultérieurement. 32f815f4648c3174.png
  2. Cliquez sur Terminé .

Maintenant que votre projet Firebase est créé et que certains services sont activés, vous devez indiquer au code que vous souhaitez utiliser Firebase, ainsi que le projet Firebase à utiliser.

Ajouter les bibliothèques Firebase

Pour que votre application utilise Firebase, vous devez ajouter les bibliothèques Firebase à l'application. Il existe plusieurs façons de procéder, comme décrit dans la documentation Firebase . Par exemple, vous pouvez ajouter les bibliothèques à partir du CDN de Google, ou vous pouvez les installer localement à l'aide de npm, puis les empaqueter dans votre application si vous utilisez Browserify.

StackBlitz fournit un regroupement automatique, vous pouvez donc ajouter les bibliothèques Firebase à l'aide d'instructions d'importation.

Pour créer cette application, vous utilisez les bibliothèques Firebase Authentication, FirebaseUI et Cloud Firestore. Pour ce codelab, les lignes suivantes sont déjà incluses en haut du fichier index.js :

// Import stylesheets
import "./style.css";

// Firebase App (the core Firebase SDK) is always required
// and must be listed first
import firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

import * as firebaseui from "firebaseui";

Ajouter une application Web Firebase au projet

  1. De retour dans la console Firebase, accédez à la page de présentation de votre projet en cliquant sur Présentation du projet en haut à gauche.
  2. Au centre de la page de présentation de votre projet, cliquez sur l'icône Web b286f3d215e1f578.png pour créer une nouvelle application Web Firebase. c167e9526fad2825.png
  3. Enregistrez l'application avec le surnom Web App .
  4. Pour ce codelab, ne cochez pas la case à côté de Configurer également Firebase Hosting pour cette application . Vous allez utiliser le volet de visualisation de StackBlitz pour le moment.
  5. Cliquez sur Enregistrer l'application . c85ac8aa351e2560.png
  6. Copiez l'objet de configuration Firebase dans le presse-papiers. ed1e598c6132f734.png
  7. Cliquez sur Continuer vers la console .

Ajoutez l'objet de configuration Firebase à votre application:

  1. De retour dans StackBlitz, accédez au fichier index.js .
  2. Localisez la ligne de commentaire Add Firebase project configuration object here et collez votre extrait de configuration juste en dessous du commentaire.
  3. Ajoutez l'appel de fonction initializeApp pour configurer Firebase à l'aide de votre configuration de projet Firebase unique.
// ...

// Add Firebase project configuration object here
var firebaseConfig = {
  apiKey: "random-unique-string",
  authDomain: "your-projectId.firebaseapp.com",
  databaseURL: "https://your-projectId.firebaseio.com",
  projectId: "your-projectId",
  storageBucket: "your-projectId.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Maintenant que vous avez ajouté Firebase à l'application, vous pouvez configurer un bouton RSVP qui enregistre les personnes à l'aide de l' authentification Firebase .

Authentifiez vos utilisateurs avec Email Sign-In et FirebaseUI

Vous aurez besoin d'un bouton RSVP qui invite l'utilisateur à se connecter avec son adresse e-mail. Vous pouvez le faire en connectant FirebaseUI à un bouton RSVP. FirebaseUI est une bibliothèque qui vous donne une interface utilisateur prédéfinie en plus de Firebase Auth.

FirebaseUI nécessite une configuration (voir les options dans la documentation ) qui fait deux choses:

  1. Indique à FirebaseUI que vous souhaitez utiliser la méthode de connexion par e-mail / mot de passe .
  2. Gère le rappel pour une connexion réussie et renvoie false pour éviter une redirection. Vous ne souhaitez pas que la page s'actualise, car vous créez une application Web d'une seule page.

Tout d'abord, ajoutez le code pour initialiser FirebaseUI:

  1. Dans StackBlitz, accédez au fichier index.js . Notez que la configuration FirebaseUI est déjà fournie.
  2. Au bas de index.js, ajoutez l'instruction d'initialisation FirebaseUI, comme ceci:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

Ensuite, ajoutez un bouton RSVP au HTML:

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Ajoutez le code HTML pour un bouton RSVP à l'intérieur du event-details-container de event-details-container comme indiqué dans l'exemple ci-dessous.

Veillez à utiliser les mêmes valeurs d' id que celles indiquées ci-dessous car, pour ce codelab, il existe déjà des hooks pour ces identifiants spécifiques dans le fichier index.js .

Notez que dans le fichier index.html , il y a un conteneur avec l'ID firebaseui-auth-container . Il s'agit de l'ID que vous passerez à FirebaseUI pour conserver votre connexion.

<!-- ... -->

<section id="event-details-container">
    <!-- ... -->
    <!-- ADD THE RSVP BUTTON HERE -->
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<!-- ... -->

Aperçu de l'application

ab9ad7d61bb7b28c.png

  1. Configurez un écouteur sur le bouton RSVP et appelez la fonction de démarrage FirebaseUI. Cela indique à FirebaseUI que vous souhaitez voir la fenêtre de connexion. Ajoutez le code suivant au bas de index.js :
// ... 
// At the bottom

// Listen to RSVP button clicks
startRsvpButton.addEventListener("click",
 () => {
      ui.start("#firebaseui-auth-container", uiConfig);
});

Tester la connexion à l'application

  1. Dans la fenêtre d'aperçu de StackBlitz, cliquez sur le bouton RSVP pour vous connecter à l'application.
  • Pour ce codelab, vous pouvez utiliser n'importe quelle adresse e-mail, même une fausse adresse e-mail, car vous ne configurez pas d'étape de vérification de courrier électronique pour ce codelab.
  • Si vous voyez un message d'erreur indiquant que l' auth/operation-not-allowed ou que The given sign-in provider is disabled for this Firebase project , vérifiez que vous avez activé Email / mot de passe en tant que fournisseur de connexion dans la console Firebase.
  1. Accédez au tableau de bord d' authentification dans la console Firebase. Dans l'onglet Utilisateurs , vous devriez voir les informations de compte que vous avez entrées pour vous connecter à l'application.

Aperçu de l'application

3024f90b52ad55fe.png

682fc0eca86a99fc.png

Ajouter un état d'authentification à l'interface utilisateur

Assurez-vous maintenant que l'interface utilisateur reflète le fait que vous êtes connecté.

Vous utiliserez le rappel de l'écouteur d'état d'authentification Firebase, qui est notifié chaque fois que l'état de connexion de l'utilisateur change. S'il y a actuellement un utilisateur, vous basculerez le bouton RSVP sur un bouton de déconnexion.

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Ajoutez le code suivant en bas:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. Dans l'écouteur de bouton, vérifiez s'il existe un utilisateur actuel et déconnectez-le. Pour ce faire, remplacez l'actuel startRsvpButton.addEventListener par ce qui suit:
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener("click",
 () => {
    if (firebase.auth().currentUser) {
      // User is signed in; allows user to sign out
      firebase.auth().signOut();
    } else {
      // No user is signed in; allows user to sign in
      ui.start("#firebaseui-auth-container", uiConfig);
    }
});

Maintenant, le bouton doit afficher LOGOUT et revenir à RSVP lorsque l'utilisateur clique dessus.

Aperçu de l'application

4c540450924f1607.png

Savoir que les utilisateurs arrivent est formidable, mais donnons aux invités quelque chose d'autre à faire dans l'application. Et s'ils pouvaient laisser des messages dans un livre d'or? Ils peuvent expliquer pourquoi ils sont ravis de venir ou qui ils espèrent rencontrer.

Pour stocker les messages de chat que les utilisateurs écrivent dans l'application, vous utiliserez Cloud Firestore .

Modèle de données

Cloud Firestore est une base de données NoSQL et les données stockées dans la base de données sont divisées en collections, documents, champs et sous-collections. Vous stockerez chaque message du chat en tant que document dans une collection de premier niveau appelée guestbook .

b447950f9f993789.png

Ajouter des messages à Firestore

Dans cette section, vous allez ajouter la fonctionnalité permettant aux utilisateurs d'écrire de nouveaux messages dans la base de données. Tout d'abord, vous ajoutez le HTML pour les éléments de l'interface utilisateur (champ de message et bouton d'envoi), puis vous ajoutez le code qui relie ces éléments à la base de données.

Pour ajouter les éléments d'interface utilisateur d'un champ de message et d'un bouton d'envoi, procédez comme suit:

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Localisez le guestbook-container et ajoutez le code HTML suivant pour créer un formulaire avec le champ de saisie du message et le bouton d'envoi.
<!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

Aperçu de l'application

4a892284443cf73d.png

Un utilisateur qui clique sur le bouton ENVOYER déclenchera l'extrait de code ci-dessous. Il ajoute le contenu du champ de saisie du message à la collection de guestbook de la base de données. Plus précisément, la méthode add ajoute le contenu du message à un nouveau document (avec un ID généré automatiquement) à la collection de guestbook .

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Au bas du fichier, ajoutez le code suivant.

Notez que firebase.auth().currentUser.uid est une référence à l'ID unique généré automatiquement que Firebase Authentication donne pour tous les utilisateurs connectés.

// ..
// Listen to the form submission
form.addEventListener("submit", (e) => {
 // Prevent the default form redirect
 e.preventDefault();
 // Write a new message to the database collection "guestbook"
 firebase.firestore().collection("guestbook").add({
   text: input.value,
   timestamp: Date.now(),
   name: firebase.auth().currentUser.displayName,
   userId: firebase.auth().currentUser.uid
 })
 // clear message input field
 input.value = ""; 
 // Return false to avoid redirect
 return false;
});

Afficher le livre d'or uniquement aux utilisateurs connectés

Vous ne voulez pas que n'importe qui puisse voir le chat des invités. Une chose que vous pouvez faire pour sécuriser le chat est d'autoriser uniquement les utilisateurs connectés à consulter le livre d'or. Cela dit, pour vos propres applications, vous voudrez également sécuriser votre base de données avec Firebase Security Rules . (Vous trouverez plus d'informations sur les règles de sécurité plus loin dans le codelab.)

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Modifiez l'écouteur onAuthStateChanged pour masquer et afficher le livre d'or.
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
 if (user){
   startRsvpButton.textContent = "LOGOUT";
   // Show guestbook to logged-in users
   guestbookContainer.style.display = "block";
 }
 else{
   startRsvpButton.textContent = "RSVP";
   // Hide guestbook for non-logged-in users
   guestbookContainer.style.display = "none";
 }
});

Tester l'envoi de messages

  1. Assurez-vous que vous êtes connecté à l'application.
  2. Saisissez un message tel que "Salut!", Puis cliquez sur ENVOYER .

Cette action écrit le message dans votre base de données Cloud Firestore. Cependant, vous ne verrez pas encore le message dans votre application Web réelle, car vous devez toujours implémenter la récupération des données. Vous ferez cela ensuite.

Mais vous pouvez voir le message nouvellement ajouté dans la console Firebase.

Dans la console Firebase, dans le tableau de bord de la base de données , vous devriez voir la collection de guestbook avec votre message nouvellement ajouté. Si vous continuez à envoyer des messages, votre collection de livres d'or contiendra de nombreux documents, comme ceci:

Console Firebase

713870af0b3b63c.png

Synchroniser les messages

C'est bien que les invités puissent écrire des messages dans la base de données, mais ils ne peuvent pas encore les voir dans l'application.

Pour afficher les messages, vous devez 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.

Vous allez ajouter un code qui écoute les messages nouvellement ajoutés à partir de l'application. Tout d'abord, ajoutez une section dans le HTML pour afficher les messages:

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Dans le guestbook-container , ajoutez une nouvelle section avec l'ID du guestbook d' guestbook .
<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

Ensuite, enregistrez l'écouteur qui écoute les modifications apportées aux données:

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Au bas du fichier, ajoutez le code suivant pour parcourir tous les documents (messages du livre d'or) de la base de données:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((snaps) => {
 // Reset page
 guestbook.innerHTML = "";
 // Loop through documents in database
 snaps.forEach((doc) => {
   // Create an HTML entry for each document and add it to the chat
   const entry = document.createElement("p");
   entry.textContent = doc.data().name + ": " + doc.data().text;
   guestbook.appendChild(entry);
 });
});

Pour écouter les messages de la base de données, créez une requête sur une collection spécifique à l'aide de la fonction .collection . Le code ci-dessus écoute les changements dans la collection de guestbook , où sont stockés les messages de discussion. Les messages sont également classés par date, en utilisant .orderBy('timestamp', 'desc') pour afficher les messages les plus récents en haut.

La fonction .onSnapshot prend un paramètre: une fonction de rappel. La fonction de rappel est déclenchée lorsque des modifications sont apportées aux documents correspondant à la requête. Cela peut se produire si un message est supprimé, modifié ou ajouté. Pour plus d'informations, consultez la documentation Cloud Firestore .

Tester les messages de synchronisation

Cloud Firestore synchronise automatiquement et instantanément les données avec les clients abonnés à la base de données.

  1. Les messages que vous avez créés précédemment dans la base de données doivent être affichés dans l'application. N'hésitez pas à écrire de nouveaux messages; ils devraient apparaître instantanément.
  2. Si vous ouvrez votre espace de travail dans plusieurs fenêtres ou onglets, les messages seront synchronisés en temps réel entre les onglets.
  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; toute modification doit apparaître dans l'interface utilisateur.

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

Examen de l' application p

e30df0a9614bae7d.png

Vous avez initialement configuré Cloud Firestore pour utiliser le mode test, ce qui signifie que votre base de données est ouverte aux lectures et aux écritures. Cependant, vous ne devez utiliser le mode test qu'au tout début du développement. En tant que meilleure pratique, vous devez configurer des règles de sécurité pour votre base de données lorsque vous développez votre application. La sécurité doit faire partie intégrante de la structure et du comportement de votre application.

Les règles de sécurité vous permettent de contrôler l'accès aux documents et aux collections de votre base de données. La syntaxe flexible des règles vous permet de créer des règles qui correspondent à tout, de toutes les écritures à l'ensemble de la base de données aux opérations sur un document spécifique.

Vous pouvez écrire des règles de sécurité pour Cloud Firestore dans la console Firebase:

  1. Dans la section Développer de la console Firebase, cliquez sur Base de données , puis sélectionnez l'onglet Règles (ou cliquez ici pour accéder directement à l'onglet Règles ).
  2. Vous devriez voir les règles de sécurité par défaut suivantes, ainsi qu'un avertissement indiquant que les règles sont publiques.

7767a2d2e64e7275.png

Identifier les collections

Tout d'abord, identifiez les collections dans lesquelles l'application écrit des données.

Dans match /databases/{database}/documents , identifiez la collection que vous souhaitez sécuriser:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

Ajouter des règles de sécurité

Étant donné que vous avez utilisé l'UID d'authentification comme champ dans chaque document de livre d'or, vous pouvez obtenir l'UID d'authentification et vérifier que toute personne tentant d'écrire dans le document possède un UID d'authentification correspondant.

Ajoutez les règles de lecture et d'écriture à votre ensemble de règles comme indiqué ci-dessous:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

Désormais, pour le livre d'or, seuls les utilisateurs connectés peuvent lire les messages (n'importe quel message!), Mais vous ne pouvez créer un message qu'à l'aide de votre ID utilisateur. Nous n'autorisons pas non plus la modification ou la suppression des messages.

Ajouter des règles de validation

Ajoutez la validation des données pour vous assurer que tous les champs attendus sont présents dans le document:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

Réinitialiser les auditeurs

Étant donné que votre application permet désormais uniquement aux utilisateurs authentifiés de se connecter, vous devez déplacer la requête firestore du livre d'or dans l'écouteur d'authentification. Sinon, des erreurs d'autorisation se produiront et l'application sera déconnectée lorsque l'utilisateur se déconnectera.

  1. Tirez la collection de livres d'or onSnapshot écouteur onSnapshot dans une nouvelle fonction appelée subscribeGuestbook . onSnapshot également les résultats de la fonction onSnapshot à la variable guestbookListener .

L' onSnapshot Firestore onSnapshot renvoie une fonction de désabonnement que vous pourrez utiliser pour annuler l'écouteur d'instantané plus tard.

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((snaps) => {
   // Reset page
   guestbook.innerHTML = "";
   // Loop through documents in database
   snaps.forEach((doc) => {
     // Create an HTML entry for each document and add it to the chat
     const entry = document.createElement("p");
     entry.textContent = doc.data().name + ": " + doc.data().text;
     guestbook.appendChild(entry);
   });
 });
};
  1. Ajoutez une nouvelle fonction en dessous appelée unsubscribeGuestbook . Vérifiez si la variable guestbookListener n'est pas nulle, puis appelez la fonction pour annuler l'écouteur.
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. Enfin, ajoutez les nouvelles fonctions au rappel onAuthStateChanged (utilisez les deux étapes suivantes).
  2. Ajoutez subscribeGuestbook() au bas de if (user) .
  3. Ajoutez unsubscribeGuestbook() au bas de l'instruction else .
// ...
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

  // Subscribe to the guestbook collection
  subscribeGuestbook();
}
else{
  startRsvpButton.textContent = "RSVP";
  // Hide guestbook for non-logged-in users
  guestbookContainer.style.display = "none";

  // Unsubscribe from the guestbook collection
  unsubscribeGuestbook();
}
});

Firebase propose un service d'hébergement pour servir les actifs de votre application Web. Vous pouvez déployer vos fichiers et votre configuration d'hébergement sur Firebase Hosting à l'aide de l'interface de ligne de commande (CLI) Firebase. Mais pour ce codelab, vous utilisez StackBlitz , qui a intégré la CLI Firebase dans son espace de travail!

Vous pouvez utiliser l'intégration Firebase de StackBlitz pour indiquer à StackBlitz sur quel projet Firebase vous souhaitez déployer des ressources:

  1. Si vous ne vous êtes pas déjà connecté avec GitHub dans StackBlitz, cliquez sur Se connecter en haut à droite, puis saisissez les informations d'identification de votre compte GitHub.

99a41778bb3c194c.png

  • Si vous possédez déjà un compte GitHub, connectez-vous à l'aide de votre compte GitHub.
  • Si vous ne possédez pas encore de compte GitHub, créez un compte GitHub en utilisant la même adresse e-mail que celle que vous avez utilisée pour vous connecter à Firebase.
  1. Il devrait maintenant y avoir une icône Firebase dans le panneau de gauche.

2981c2e3ad13c2c1.png 3. Cliquez sur Se connecter à Google . Connectez-vous en utilisant la même adresse e-mail que celle que vous avez utilisée pour vous connecter à Firebase. 4. Dans la liste des projets Firebase, sélectionnez votre projet Firebase-Web-Codelab .

Le déploiement sur Firebase Hosting avec StackBlitz est littéralement une opération en un seul clic:

  1. Dans l'espace de travail StackBlitz, cliquez sur Déployer sur le côté gauche de la page. Oui, c'est ça. Un pas! 8fe6c0bfc04c8935.png

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

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

Enregistrer le statut RSVP d'un participant

À l'heure actuelle, votre application permet simplement aux gens de commencer à discuter s'ils sont intéressés par l'événement. De plus, la seule façon de savoir si quelqu'un vient est de le publier dans le chat. Organisons-nous et disons aux gens combien de personnes viennent.

Vous allez ajouter une bascule pour enregistrer les personnes qui souhaitent assister à l'événement, puis collecter un décompte du nombre de personnes qui viennent.

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Dans le guestbook-container , ajoutez un ensemble de boutons OUI et NON , comme ceci:
<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

 </section>
<!-- ... -->

Aperçu de l'application

73ca99ca35c13ee7.png

Ensuite, enregistrez l'auditeur pour les clics sur les boutons. Si l'utilisateur clique sur OUI , utilisez son UID d'authentification pour enregistrer la réponse dans la base de données.

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Au bas du fichier, ajoutez le code suivant pour écouter l'état RSVP:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. Créez une nouvelle collection appelée attendees , puis enregistrez une référence de document si l'un des boutons RSVP est cliqué.
  2. Définissez cette référence sur true ou false selon le bouton sur lequel vous avez cliqué.

Tout d'abord, pour rsvpYes :

// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd yes, save a document with attending: true
 userDoc.set({
   attending: true
 }).catch(console.error)
}

Ensuite, la même chose pour rsvpNo , mais avec la valeur false :

rsvpNo.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd no, save a document with attending: false
 userDoc.set({
   attending: false
 }).catch(console.error)
}

Ajouter des règles

Étant donné que certaines règles sont déjà définies, les nouvelles données que vous ajoutez avec les boutons seront rejetées. Vous devrez mettre à jour les règles pour permettre l'ajout à la collection des attendees .

Pour la collection des attendees , puisque vous avez utilisé l'UID d'authentification comme nom de document, vous pouvez le récupérer et vérifier que l' uid l' uid est le même que le document qu'il écrit. Vous autoriserez tout le monde à lire la liste des participants (car il n'y a pas de données privées), mais seul le créateur devrait pouvoir la mettre à jour.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

Ajouter des règles de validation

Ajoutez la validation des données pour vous assurer que tous les champs attendus sont présents dans le document:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

(Facultatif) Vous pouvez maintenant afficher les résultats en cliquant sur les boutons. Accédez à votre tableau de bord Cloud Firestore dans la console Firebase.

Lire l'état RSVP

Maintenant que vous avez enregistré les réponses, voyons qui vient et reflétez-le dans l'interface utilisateur.

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Dans description-container , ajoutez un nouvel élément avec l'ID du number-attending .
<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

Ensuite, enregistrez l'auditeur pour la collection des attendees et comptez le nombre de réponses OUI :

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Au bas du fichier, ajoutez le code suivant pour écouter l'état RSVP et compter les clics OUI .
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. Enfin, mettons en évidence le bouton correspondant à l'état actuel. Vérifiez si l'UID d'authentification actuel a une entrée dans la collection des attendees , puis définissez la classe sur un clicked .
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((doc) => {
   if (doc && doc.data()){
     const attendingResponse = doc.data().attending;

     // Update css classes for buttons
     if (attendingResponse){
       rsvpYes.className="clicked";
       rsvpNo.className="";
     }
     else{
       rsvpYes.className="";
       rsvpNo.className="clicked";
     }
   }
 });
}
  1. Faisons également une fonction de désabonnement. Cela sera utilisé lorsque l'utilisateur se déconnectera.
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. Appelez les fonctions à partir de l'écouteur d'authentification.
// ...

// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

  // Subscribe to the guestbook collection
  subscribeGuestbook();
  // Subscribe to the guestbook collection
  subscribeCurrentRSVP(user);
}
else{
  startRsvpButton.textContent = "RSVP";
  // Hide guestbook for non-logged-in users
  guestbookContainer.style.display = "none";

  // Unsubscribe from the guestbook collection
  unsubscribeGuestbook();
  // Unsubscribe from the guestbook collection
  unsubscribeCurrentRSVP();

}
});
  1. Essayez de vous connecter en tant qu'utilisateurs multiples et voyez le nombre augmenter à chaque clic supplémentaire sur le bouton OUI .

Aperçu de l'application

3df607d3e0b3c35.png

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

Ce que nous avons couvert

  • Authentification Firebase
  • FirebaseUI
  • Cloud Firestore
  • Règles de sécurité Firebase
  • Hébergement Firebase

Prochaines étapes

  • Vous souhaitez en savoir plus sur les autres produits Firebase? Vous souhaitez peut-être stocker des fichiers image que les utilisateurs téléchargent? Ou envoyer des notifications à vos utilisateurs? Consultez le laboratoire de codes Web Firebase pour un laboratoire de codes qui approfondit de nombreux autres produits Firebase pour le Web.
  • Vous souhaitez en savoir plus sur Cloud Firestore? Vous souhaitez peut-être en savoir plus sur les sous-collections et les transactions? Rendez-vous sur le laboratoire de codes Web Cloud Firestore pour un laboratoire de codes qui approfondit davantage Cloud Firestore. Ou consultez cette série YouTube pour découvrir Cloud Firestore !

Apprendre encore plus

Comment c'était?

Nous aimerions vos retours. Veuillez remplir un (très) court formulaire ici .