Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.
Se usó la API de Cloud Translation para traducir esta página.
Switch to English

Conozca Firebase para la web

En este laboratorio de código, aprenderá algunos de los conceptos básicos de Firebase para crear aplicaciones web interactivas. Construirá e implementará una aplicación de chat de libro de visitas y RSVP para eventos con varios productos de Firebase.

59abdefbcc23bbbe.png

Lo que aprenderás

  • Autentica usuarios con Firebase Authentication y FirebaseUI.
  • Sincroniza datos con Cloud Firestore.
  • Escribe reglas de seguridad de Firebase para proteger una base de datos.
  • Implementa una aplicación web en Firebase Hosting.

Lo que necesitarás

  • Un navegador de su elección, como Chrome.
  • Acceso a stackblitz.com (no es necesario iniciar sesión ni cuenta).
  • Una cuenta de Google, como una cuenta de Gmail. Recomendamos la cuenta de correo electrónico que ya usa para su cuenta de GitHub. Esto le permite utilizar funciones avanzadas en StackBlitz.
  • El código de muestra del codelab. Consulte el siguiente paso para saber cómo obtener el código.

En este laboratorio de código, usted crea e implementa una aplicación con StackBlitz , un editor en línea que tiene varios flujos de trabajo de Firebase integrados. Stackblitz no requiere instalación de software ni cuenta especial de StackBlitz.

StackBlitz te permite compartir proyectos con otros. Otras personas que tienen la URL de su proyecto StackBlitz pueden ver su código y bifurcar su proyecto, pero no pueden editar su proyecto StackBlitz.

  1. Vaya a esta URL para obtener el código de inicio: ** https: //stackblitz.com/edit/firebase-gtk-web-** start
  2. En la parte superior de la página StackBlitz, haga clic en Bifurcación : f5135360aef481cc.png

Ahora tiene una copia del código inicial como su propio proyecto StackBlitz. Como no @anonymous sesión, su cuenta se llama @anonymous , pero el proyecto tiene un nombre único, junto con una URL única. Todos sus archivos y cambios se guardan en este proyecto StackBlitz.

Los materiales iniciales para este laboratorio de código proporcionan cierta estructura para la aplicación web, incluidas algunas hojas de estilo y un par de contenedores HTML para la aplicación. Más adelante en este laboratorio de código, conectará estos contenedores a Firebase.

Para comenzar, familiaricémonos un poco con la interfaz StackBlitz.

  1. En StackBlitz, abra el archivo index.html .
  2. Busque el event-details-container description-container e intente editar algunos detalles del evento.

A medida que edita el texto, la recarga automática de la página en StackBlitz muestra los detalles del nuevo evento. Genial, ¿no?

<!-- ... -->

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



<!-- ... -->

La vista previa de su aplicación debería verse así:

Vista previa de la aplicación

908cc57ce3a5b5fe.png

Mostrar la información del evento es excelente para sus invitados, pero mostrar los eventos no es muy útil para nadie. Agreguemos alguna funcionalidad dinámica a esta aplicación. Para ello, deberá conectar Firebase a su aplicación. Para comenzar con Firebase, deberá crear y configurar un proyecto de Firebase.

Crea un proyecto de Firebase

  1. Inicie sesión en Firebase .
  2. En Firebase console, haz clic en Agregar proyecto (o Crear un proyecto ) y nombra tu proyecto de Firebase Firebase-Web-Codelab .

a67c239f8cc7f4b5.png

  1. Haga clic en las opciones de creación de proyectos. Acepte los términos de Firebase si se le solicita. Omita la configuración de Google Analytics, porque no utilizará Analytics para esta aplicación.

Para obtener más información sobre los proyectos de Firebase, consulte Comprender los proyectos de Firebase .

La aplicación que está creando utiliza varios productos de Firebase que están disponibles para aplicaciones web:

  • Firebase Authentication y Firebase UI para permitir que sus usuarios inicien sesión en su aplicación fácilmente.
  • Cloud Firestore para guardar datos estructurados en la nube y recibir notificaciones instantáneas cuando los datos cambian.
  • Reglas de seguridad de Firebase para proteger su base de datos.
  • Firebase Hosting para alojar y servir sus activos.

Algunos de estos productos necesitan una configuración especial o deben habilitarse mediante la consola de Firebase.

Habilita el inicio de sesión por correo electrónico para Firebase Authentication

Para permitir que los usuarios inicien sesión en la aplicación web, utilizará el método de inicio de sesión de correo electrónico / contraseña para este laboratorio de código:

  1. En Firebase console, haz clic en Desarrollar en el panel izquierdo.
  2. Haga clic en Autenticación y luego en la pestaña Método de inicio de sesión (o haga clic aquí para ir directamente a la pestaña Método de inicio de sesión ).
  3. Haga clic en Correo electrónico / Contraseña en la lista de proveedores de inicio de sesión , configure el interruptor Habilitar en la posición de encendido y luego haga clic en Guardar . 4c88427cfd869bee.png

Habilitar Cloud Firestore

La aplicación web usa Cloud Firestore para guardar mensajes de chat y recibir nuevos mensajes de chat.

Habilita Cloud Firestore:

  1. En la sección Desarrollar de Firebase console, haz clic en Base de datos .
  2. En Cloud Firestore , haz clic en Crear base de datos . 3ce19fd6467e51c5.png
  1. Seleccione la opción Iniciar en modo de prueba . Lea el descargo de responsabilidad sobre las reglas de seguridad. El modo de prueba garantiza que pueda escribir libremente en la base de datos durante el desarrollo. Haga clic en Siguiente . 56369cebb9300eb.png
  1. Seleccione la ubicación de su base de datos (puede usar la predeterminada). Tenga en cuenta que esta ubicación no se puede cambiar más adelante. 32f815f4648c3174.png
  2. Haz clic en Listo .

Ahora que tiene su proyecto de Firebase creado y algunos servicios habilitados, debe indicarle al código que desea usar Firebase, así como qué proyecto de Firebase usar.

Agrega las bibliotecas de Firebase

Para que su aplicación use Firebase, debe agregar las bibliotecas de Firebase a la aplicación. Hay varias formas de hacer esto, como se describe en la documentación de Firebase . Por ejemplo, puede agregar las bibliotecas del CDN de Google, o puede instalarlas localmente usando npm y luego empaquetarlas en su aplicación si está usando Browserify.

StackBlitz proporciona agrupación automática, por lo que puede agregar las bibliotecas de Firebase mediante declaraciones de importación.

Para compilar esta aplicación, usa las bibliotecas Firebase Authentication, FirebaseUI y Cloud Firestore. Para este laboratorio de código, las siguientes líneas ya están incluidas en la parte superior del archivo index.js :

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

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

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

import * as firebaseui from "firebaseui";

Agrega una aplicación web de Firebase al proyecto

  1. De vuelta en Firebase console, navega a la página de descripción general de tu proyecto haciendo clic en Descripción general del proyecto en la parte superior izquierda.
  2. En el centro de la página de descripción general de su proyecto, haga clic en el ícono web b286f3d215e1f578.png para crear una nueva aplicación web de Firebase. c167e9526fad2825.png
  3. Registre la aplicación con el apodo de aplicación web .
  4. Para este laboratorio de código, no marque la casilla junto a Configurar también Firebase Hosting para esta aplicación . Utilizará el panel de vista previa de StackBlitz por ahora.
  5. Haga clic en Registrar aplicación . c85ac8aa351e2560.png
  6. Copie elobjeto de configuración de Firebase en el portapapeles. ed1e598c6132f734.png
  7. Haga clic en Continuar a la consola .

Agrega el objeto de configuración de Firebase a tu aplicación:

  1. De vuelta en StackBlitz, vaya al archivo index.js .
  2. Busque la línea de comentario Add Firebase project configuration object here y pegue el fragmento de configuración justo debajo del comentario.
  3. Agrega la llamada a la función initializeApp para configurar Firebase usando tu configuración de proyecto de Firebase única.
// ...

// 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);

Ahora que ha agregado Firebase a la aplicación, puede configurar un botón RSVP que registra a las personas que usan Firebase Authentication .

Autentica a tus usuarios con el inicio de sesión por correo electrónico y FirebaseUI

Necesitará un botón RSVP que le pide al usuario que inicie sesión con su dirección de correo electrónico. Puedes hacer esto conectando FirebaseUI a un botón RSVP. FirebaseUI es una biblioteca que te brinda una IU prediseñada además de Firebase Auth.

FirebaseUI requiere una configuración (consulte las opciones en la documentación ) que hace dos cosas:

  1. Le dice a FirebaseUI que desea utilizar el método de inicio de sesión de correo electrónico / contraseña .
  2. Maneja la devolución de llamada para un inicio de sesión exitoso y devuelve falso para evitar una redirección. No desea que la página se actualice, porque está creando una aplicación web de una sola página.

Primero, agregue el código para inicializar FirebaseUI:

  1. En StackBlitz, vaya al archivo index.js . Tenga en cuenta que la configuración de FirebaseUI ya se proporciona.
  2. En la parte inferior de index.js, agregue la declaración de inicialización de FirebaseUI, así:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

A continuación, agregue un botón RSVP al HTML:

  1. En StackBlitz, vaya al archivo index.html .
  2. Agregue el HTML para un botón RSVP dentro del event-details-container del event-details-container como se muestra en el siguiente ejemplo.

Tenga cuidado de utilizar los mismos valores de id que se muestran a continuación porque, para este laboratorio de código, ya hay enlaces para estas ID específicas en el archivo index.js .

Tenga en cuenta que en el archivo index.html , hay un contenedor con el ID firebaseui-auth-container . Esta es la ID que pasará a FirebaseUI para mantener su inicio de sesión.

<!-- ... -->

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

Vista previa de la aplicación

ab9ad7d61bb7b28c.png

  1. Configure un oyente en el botón RSVP y llame a la función de inicio de FirebaseUI. Esto le dice a FirebaseUI que desea ver la ventana de inicio de sesión. Agrega el siguiente código al final de index.js :
// ... 
// At the bottom

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

Prueba de iniciar sesión en la aplicación

  1. En la ventana de vista previa de StackBlitz, haga clic en el botón RSVP para iniciar sesión en la aplicación.
  • Para este codelab, puede usar cualquier dirección de correo electrónico, incluso una dirección de correo electrónico falsa, ya que no está configurando un paso de verificación de correo electrónico para este codelab.
  • Si ves un mensaje de error que indica auth/operation-not-allowed o The given sign-in provider is disabled for this Firebase project , verifica que hayas habilitado Correo electrónico / Contraseña como proveedor de inicio de sesión en Firebase console.
  1. Ve al panel de autenticación en Firebase console. En la pestaña Usuarios , debería ver la información de la cuenta que ingresó para iniciar sesión en la aplicación.

Vista previa de la aplicación

3024f90b52ad55fe.png

682fc0eca86a99fc.png

Agregar estado de autenticación a la interfaz de usuario

Ahora asegúrese de que la interfaz de usuario refleje el hecho de que ha iniciado sesión.

Utilizará la devolución de llamada del oyente de estado de Firebase Authentication, que recibe una notificación cada vez que cambia el estado de inicio de sesión del usuario. Si actualmente hay un usuario, cambiará el botón RSVP a un botón para cerrar sesión.

  1. En StackBlitz, vaya al archivo index.js .
  2. Agrega el siguiente código en la parte inferior:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. En el oyente de botones, compruebe si hay un usuario actual y cierre la sesión. Para hacer esto, reemplace el startRsvpButton.addEventListener actual con lo siguiente:
// ...
// 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);
    }
});

Ahora el botón debería mostrar LOGOUT y volver a RSVP cuando se hace clic en él.

Vista previa de la aplicación

4c540450924f1607.png

Saber que los usuarios van a venir es genial, pero demos a los invitados algo más que hacer en la aplicación. ¿Y si pudieran dejar mensajes en un libro de visitas? Pueden compartir por qué están emocionados de venir o con quién esperan conocer.

Para almacenar los mensajes de chat que los usuarios escriben en la aplicación, usará Cloud Firestore .

Modelo de datos

Cloud Firestore es una base de datos NoSQL y los datos almacenados en la base de datos se dividen en colecciones, documentos, campos y subcolecciones. Almacenará cada mensaje del chat como un documento en una colección de nivel superior llamada guestbook .

b447950f9f993789.png

Agregar mensajes a Firestore

En esta sección, agregará la funcionalidad para que los usuarios escriban nuevos mensajes en la base de datos. Primero, agrega el HTML para los elementos de la interfaz de usuario (campo de mensaje y botón de envío) y luego agrega el código que conecta estos elementos a la base de datos.

Para agregar los elementos de la interfaz de usuario de un campo de mensaje y un botón de envío, haga lo siguiente:

  1. En StackBlitz, vaya al archivo index.html .
  2. Busque el guestbook-container del guestbook-container y agregue el siguiente HTML para crear un formulario con el campo de entrada del mensaje y el botón enviar.
<!-- ... -->

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

<!-- ... -->

Vista previa de la aplicación

4a892284443cf73d.png

Un usuario que haga clic en el botón ENVIAR activará el siguiente fragmento de código. Agrega el contenido del campo de entrada del mensaje a la colección de libros de guestbook de la base de datos. Específicamente, el método add agrega el contenido del mensaje a un nuevo documento (con un ID generado automáticamente) a la colección de guestbook .

  1. En StackBlitz, vaya al archivo index.js .
  2. En la parte inferior del archivo, agregue el siguiente código.

Tenga en cuenta que firebase.auth().currentUser.uid es una referencia al ID único generado automáticamente que proporciona Firebase Authentication para todos los usuarios que firebase.auth().currentUser.uid sesión.

// ..
// 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;
});

Mostrar el libro de visitas solo a los usuarios que hayan iniciado sesión

No querrás que cualquiera vea el chat de los invitados. Una cosa que puede hacer para proteger el chat es permitir que solo los usuarios que hayan iniciado sesión vean el libro de visitas. Dicho esto, para sus propias aplicaciones, también querrá proteger su base de datos con las reglas de seguridad de Firebase . (Hay más información sobre las reglas de seguridad más adelante en el laboratorio de código).

  1. En StackBlitz, vaya al archivo index.js .
  2. Edite el oyente onAuthStateChanged para ocultar y mostrar el libro de visitas.
// ...
// 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";
 }
});

Prueba de envío de mensajes

  1. Asegúrese de haber iniciado sesión en la aplicación.
  2. Ingrese un mensaje como "¡Hola!", Y luego haga clic en ENVIAR .

Esta acción escribe el mensaje en tu base de datos de Cloud Firestore. Sin embargo, aún no verá el mensaje en su aplicación web real porque aún necesita implementar la recuperación de datos. Lo harás a continuación.

Pero puede ver el mensaje recién agregado en la consola de Firebase.

En Firebase console, en el panel de la base de datos , deberías ver la colección de guestbook con tu mensaje recién agregado. Si sigues enviando mensajes, tu colección de libros de visitas contendrá muchos documentos, como este:

Consola de Firebase

713870af0b3b63c.png

Sincronizar mensajes

Es encantador que los invitados puedan escribir mensajes en la base de datos, pero aún no pueden verlos en la aplicación.

Para mostrar mensajes, deberá agregar oyentes que se activen cuando cambien los datos y luego crear un elemento de interfaz de usuario que muestre nuevos mensajes.

Agregará código que escuche los mensajes recién agregados desde la aplicación. Primero, agregue una sección en el HTML para mostrar mensajes:

  1. En StackBlitz, vaya al archivo index.html .
  2. En guestbook-container , agregue una nueva sección con el ID del guestbook de guestbook .
<!-- ... -->

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

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

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

 </section>

<!-- ... -->

A continuación, registre el oyente que escucha los cambios realizados en los datos:

  1. En StackBlitz, vaya al archivo index.js .
  2. En la parte inferior del archivo, agregue el siguiente código para recorrer todos los documentos (mensajes del libro de visitas) en la base de datos:
// ...
// 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);
 });
});

Para escuchar los mensajes en la base de datos, cree una consulta en una colección específica usando la función .collection . El código anterior escucha los cambios en la colección de guestbook , que es donde se almacenan los mensajes de chat. Los mensajes también están ordenados por fecha, usando .orderBy('timestamp', 'desc') para mostrar los mensajes más nuevos en la parte superior.

La función .onSnapshot toma un parámetro: una función de devolución de llamada. La función de devolución de llamada se activa cuando hay cambios en los documentos que coinciden con la consulta. Esto podría ocurrir si un mensaje se elimina, modifica o agrega. Para obtener más información, consulte la documentación de Cloud Firestore .

Probar la sincronización de mensajes

Cloud Firestore sincroniza los datos de forma automática e instantánea con los clientes suscritos a la base de datos.

  1. Los mensajes que creó anteriormente en la base de datos deben mostrarse en la aplicación. Siéntete libre de escribir nuevos mensajes; deberían aparecer instantáneamente.
  2. Si abre su espacio de trabajo en varias ventanas o pestañas, los mensajes se sincronizarán en tiempo real entre las pestañas.
  3. (Opcional) Puede intentar eliminar, modificar o agregar nuevos mensajes manualmente directamente en la sección Base de datos de Firebase console; cualquier cambio debería aparecer en la interfaz de usuario.

¡Felicidades! ¡Estás leyendo documentos de Cloud Firestore en tu aplicación!

Revisión de la aplicación p

e30df0a9614bae7d.png

Inicialmente configuró Cloud Firestore para usar el modo de prueba, lo que significa que su base de datos está abierta para lecturas y escrituras. Sin embargo, solo debe usar el modo de prueba durante las primeras etapas del desarrollo. Como práctica recomendada, debe configurar reglas de seguridad para su base de datos a medida que desarrolla su aplicación. La seguridad debe ser parte integral de la estructura y el comportamiento de su aplicación.

Las reglas de seguridad le permiten controlar el acceso a documentos y colecciones en su base de datos. La sintaxis de reglas flexible le permite crear reglas que coincidan con cualquier cosa, desde todas las escrituras en toda la base de datos hasta las operaciones en un documento específico.

Puedes escribir reglas de seguridad para Cloud Firestore en Firebase console:

  1. En la sección Desarrollar de la consola de Firebase, haga clic en Base de datos y luego seleccione la pestaña Reglas (o haga clic aquí para ir directamente a la pestaña Reglas ).
  2. Debería ver las siguientes reglas de seguridad predeterminadas, junto con una advertencia acerca de que las reglas son públicas.

7767a2d2e64e7275.png

Identificar colecciones

Primero, identifique las colecciones en las que la aplicación escribe datos.

En match /databases/{database}/documents , identifique la colección que desea proteger:

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

Agregar reglas de seguridad

Como usó el UID de autenticación como un campo en cada documento del libro de visitas, puede obtener el UID de autenticación y verificar que cualquier persona que intente escribir en el documento tenga un UID de autenticación coincidente.

Agregue las reglas de lectura y escritura a su conjunto de reglas como se muestra a continuación:

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;
    }
  }
}

Ahora, para el libro de visitas, solo los usuarios que hayan iniciado sesión pueden leer mensajes (¡cualquier mensaje!), Pero solo puede crear un mensaje con su ID de usuario. Tampoco permitimos que los mensajes se editen o eliminen.

Agregar reglas de validación

Agregue validación de datos para asegurarse de que todos los campos esperados estén presentes en el documento:

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;
    }
  }
}

Restablecer oyentes

Debido a que su aplicación ahora solo permite que los usuarios autenticados inicien sesión, debe mover la consulta del almacén de firestore del libro de visitas dentro del oyente de autenticación. De lo contrario, se producirán errores de permisos y la aplicación se desconectará cuando el usuario cierre la sesión.

  1. Extraiga la colección de onSnapshot visitas onSnapshot oyente en una nueva función llamada subscribeGuestbook . Además, asigne los resultados de la función onSnapshot a la variable guestbookListener .

El oyente de Firestore onSnapshot devuelve una función de cancelación de suscripción que podrá usar para cancelar el oyente de instantáneas más adelante.

// ...
// 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. Agregue una nueva función debajo llamada unsubscribeGuestbook . Compruebe si la variable guestbookListener no es nula y luego llame a la función para cancelar el oyente.
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. Finalmente, agregue las nuevas funciones a la onAuthStateChanged llamada onAuthStateChanged (use los siguientes dos pasos).
  2. Agregue subscribeGuestbook() al final de if (user) .
  3. Agregue unsubscribeGuestbook() al final de la instrucción 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 ofrece un servicio de alojamiento para servir los activos de su aplicación web. Puedes implementar tus archivos y la configuración de alojamiento en Firebase Hosting mediante la interfaz de línea de comandos (CLI) de Firebase. ¡Pero para este laboratorio de código, está utilizando StackBlitz , que ha integrado Firebase CLI en su espacio de trabajo!

Puede usar la integración de Firebase de StackBlitz para indicarle a StackBlitz en qué proyecto de Firebase le gustaría implementar activos:

  1. Si aún no ha iniciado sesión con GitHub en StackBlitz, haga clic en Iniciar sesión en la parte superior derecha y luego ingrese las credenciales de su cuenta de GitHub.

99a41778bb3c194c.png

  • Si ya tiene una cuenta de GitHub, inicie sesión con su cuenta de GitHub.
  • Si aún no tiene una cuenta de GitHub, cree una cuenta de GitHub con la misma dirección de correo electrónico que utilizó para iniciar sesión en Firebase.
  1. Ahora debería haber un icono de Firebase en el panel izquierdo.

2981c2e3ad13c2c1.png 3. Haga clic en Iniciar sesión en Google . Inicie sesión con la misma dirección de correo electrónico que utilizó para iniciar sesión en Firebase. 4. De la lista de proyectos de Firebase, seleccione su proyecto de Firebase-Web-Codelab .

La implementación en Firebase Hosting con StackBlitz es literalmente una operación de un clic:

  1. En el espacio de trabajo de StackBlitz, haga clic en Implementar en el lado izquierdo de la página. Sí, eso es todo. ¡Un paso! 8fe6c0bfc04c8935.png

Visita la documentación para obtener más información sobre cómo funciona Firebase Hosting .

Vaya a la sección Alojamiento de la consola de Firebase de su proyecto para ver información y herramientas útiles de alojamiento, incluido el historial de sus implementaciones, la funcionalidad para volver a versiones anteriores de su aplicación y el flujo de trabajo para configurar un dominio personalizado.

Registrar el estado de RSVP de un asistente

En este momento, su aplicación solo permite que las personas comiencen a chatear si están interesadas en el evento. Además, la única forma de saber si alguien va a venir es si lo publica en el chat. Organicemos y hagamos saber a la gente cuántas personas vendrán.

Agregará una palanca para registrar a las personas que quieran asistir al evento, luego recopile un recuento de cuántas personas asistirán.

  1. En StackBlitz, vaya al archivo index.html .
  2. En guestbook-container , agregue un conjunto de botones YES y NO , así:
<!-- ... -->
  <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>
<!-- ... -->

Vista previa de la aplicación

73ca99ca35c13ee7.png

A continuación, registre al oyente para hacer clic en los botones. Si el usuario hace clic en , utilice su UID de autenticación para guardar la respuesta en la base de datos.

  1. En StackBlitz, vaya al archivo index.js .
  2. En la parte inferior del archivo, agregue el siguiente código para escuchar el estado de RSVP:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. Cree una nueva colección llamada attendees , luego registre una referencia de documento si se hace clic en cualquiera de los botones RSVP.
  2. Establezca esa referencia en true o false según el botón en el que se haga clic.

Primero, para 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)
}

Entonces, lo mismo para rsvpNo , pero con el valor 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)
}

Agregar reglas

Debido a que ya tiene configuradas algunas reglas, los nuevos datos que está agregando con los botones serán rechazados. Deberá actualizar las reglas para permitir agregar a la colección de attendees .

Para la colección de attendees , dado que usó el UID de autenticación como el nombre del documento, puede tomarlo y verificar que el uid del uid sea ​​el mismo que el documento que están escribiendo. Permitirá que todos lean la lista de asistentes (ya que no hay datos privados allí), pero solo el creador debería poder actualizarla.

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

Agregar reglas de validación

Agregue validación de datos para asegurarse de que todos los campos esperados estén presentes en el documento:

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;

    }
  }
}

(Opcional) Ahora puede ver los resultados de hacer clic en los botones. Ve a tu panel de Cloud Firestore en Firebase console.

Leer el estado de RSVP

Ahora que ha registrado las respuestas, veamos quién viene y reflejémoslo en la interfaz de usuario.

  1. En StackBlitz, vaya al archivo index.html .
  2. En description-container , agregue un nuevo elemento con el ID de number-attending .
<!-- ... -->

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

<!-- ... -->

A continuación, registre al oyente para la colección de attendees y cuente el número de respuestas :

  1. En StackBlitz, vaya al archivo index.js .
  2. En la parte inferior del archivo, agregue el siguiente código para escuchar el estado de RSVP y contar los clics .
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. Finalmente, resaltemos el botón correspondiente al estado actual. Compruebe si el UID de autenticación actual tiene una entrada en la colección de attendees y luego configure la clase para hacer 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. Además, creemos una función para cancelar la suscripción. Esto se utilizará cuando el usuario cierre la sesión.
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. Llame a las funciones desde el oyente de autenticación.
// ...

// 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. Intente iniciar sesión como varios usuarios y observe cómo aumenta la cuenta con cada clic adicional en el botón .

Vista previa de la aplicación

3df607d3e0b3c35.png

¡Usaste Firebase para crear una aplicación web interactiva en tiempo real!

Lo que hemos cubierto

  • Autenticación de Firebase
  • FirebaseUI
  • Cloud Firestore
  • Reglas de seguridad de Firebase
  • Alojamiento de Firebase

Próximos pasos

  • ¿Quieres obtener más información sobre otros productos de Firebase? ¿Quizás desea almacenar archivos de imagen que cargan los usuarios? ¿O enviar notificaciones a sus usuarios? Consulte el laboratorio de código web de Firebase para obtener un laboratorio de código que profundiza en muchos más productos de Firebase para la web.
  • ¿Quieres obtener más información sobre Cloud Firestore? ¿Quizás quieras aprender sobre subcolecciones y transacciones? Dirígete al laboratorio de código web de Cloud Firestore para obtener un laboratorio de código que profundiza en Cloud Firestore. ¡O echa un vistazo a esta serie de YouTube para conocer Cloud Firestore !

Aprende más

¿Como le fue?

Nos encantaría recibir tus comentarios! Complete un formulario (muy) breve aquí .