Descubre Firebase para la Web

1. Descripción general

En este codelab, aprenderás algunos de los conceptos básicos de Firebase para crear aplicaciones web interactivas. Compilarás una app de chat para confirmar asistencia a eventos y libros de visitas con varios productos de Firebase.

Qué aprenderás

• Autentica usuarios con Firebase Authentication y FirebaseUI.
• Sincronizar datos con Cloud Firestore
• Escribe reglas de seguridad de Firebase para proteger una base de datos.

Requisitos

• El navegador que elijas, como Chrome
• Acceso a stackblitz.com (no es necesario tener una cuenta ni acceder).
• Una Cuenta de Google, como una cuenta de Gmail. Te recomendamos que uses la cuenta de correo electrónico que ya usas para tu cuenta de GitHub. Esto te permite usar funciones avanzadas en StackBlitz.
• El código de muestra del codelab. Consulta el siguiente paso para obtener el código.

2. Obtén el código de partida

En este codelab, compilarás una app con StackBlitz, un editor en línea que tiene varios flujos de trabajo de Firebase integrados. Stackblitz no requiere la instalación de software ni una cuenta especial de StackBlitz.

StackBlitz te permite compartir proyectos con otras personas. Otras personas que tengan la URL de tu proyecto de StackBlitz pueden ver tu código y crear una bifurcación de tu proyecto, pero no pueden editarlo.

1. Ve a esta URL para obtener el código de partida: https://stackblitz.com/edit/firebase-gtk-web-start
2. En la parte superior de la página de StackBlitz, haz clic en Fork:

Ahora tienes una copia del código inicial como tu propio proyecto de StackBlitz, que tiene un nombre único, junto con una URL única. Todos tus archivos y cambios se guardan en este proyecto de StackBlitz.

En caso de que te salgas del camino, hay vínculos de StackBlitz en varios puntos de control de este codelab, actualizados con todo el código agregado hasta ese punto.

Asegúrate de hacer dos cosas en estos puntos de control:

1. Crea una bifurcación del proyecto para que sea tuyo.
2. Agrega el objeto de configuración de tu proyecto de Firebase desde Firebase console (hablaremos de esto más adelante en el codelab).

3. Cómo editar la información del evento

Los materiales iniciales de este codelab proporcionan cierta estructura para la app web, incluidos algunos diseños de página y un par de contenedores HTML para la app. Más adelante en este codelab, conectarás estos contenedores a Firebase.

Para comenzar, familiarízate un poco más con la interfaz de StackBlitz.

1. En StackBlitz, abre el archivo index.html.
2. Busca event-details-container y description-container y, luego, intenta editar algunos detalles del evento.

A medida que editas el texto, la recarga automática de la página en StackBlitz muestra los detalles del evento nuevo. 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 tu app debería verse de la siguiente manera:

Vista previa de la app

4. Crea y configura un proyecto de Firebase

Mostrar la información del evento es excelente para tus invitados, pero solo mostrar los eventos no es muy útil para nadie. Agreguemos algunas funciones dinámicas a esta app. Para ello, deberás conectar Firebase a tu app. Para comenzar con Firebase, deberás crear y configurar un proyecto de Firebase.

Crea un proyecto de Firebase

1. Accede a Firebase.
2. En Firebase console, haz clic en Add Project (o Create a project) y, luego, asígnale el nombre Firebase-Web-Codelab.
   
   
   
   
3. Haz clic en las opciones de creación del proyecto. Si se te solicita, acepta las condiciones de Firebase. En la pantalla de Google Analytics, haz clic en "No habilitar", ya que no utilizarás Analytics para esta app.

Para obtener más información sobre los proyectos de Firebase, consulta Información sobre los proyectos de Firebase.

Habilita y configura productos de Firebase en la consola

La app que estás compilando usa varios productos de Firebase que están disponibles para aplicaciones web:

• Firebase Authentication y la IU de Firebase para permitir que los usuarios accedan a tu app de forma sencilla
• Cloud Firestore, a fin de guardar datos estructurados en la nube y recibir notificaciones al instante cuando se modifiquen los datos
• Reglas de seguridad de Firebase para proteger tu base de datos.

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

Habilita el acceso con correo electrónico para Firebase Authentication

Para permitir que los usuarios accedan a la aplicación web, usarás el método de acceso Correo electrónico/Contraseña en este codelab:

1. En el panel izquierdo de Firebase console, haz clic en Build > Authentication. Luego, haz clic en Comenzar. Ahora estás en el panel de autenticación, donde puedes ver a los usuarios registrados, configurar proveedores de acceso y administrar la configuración.
   
   
   
   
2. Selecciona la pestaña Método de acceso (o haz clic aquí para ir directamente a la pestaña).
   
   
   
   
3. Haz clic en Correo electrónico/contraseña en las opciones del proveedor, activa el interruptor Habilitar y, luego, haz clic en Guardar.
   
   
   
   

Configura Cloud Firestore

La app web usa Cloud Firestore para guardar mensajes de chat y recibir mensajes nuevos.

Sigue estos pasos para configurar Cloud Firestore en tu proyecto de Firebase:

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Base de datos de Firestore.
2. Haz clic en Crear base de datos.
3. Deja el ID de la base de datos establecido en (default).
4. Selecciona una ubicación para tu base de datos y, luego, haz clic en Siguiente.
   Para una app real, debes elegir una ubicación que esté cerca de tus usuarios.
5. Haz clic en Iniciar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu base de datos.
6. Haz clic en Crear.

5. Agrega y configura Firebase

Ahora que creaste tu proyecto de Firebase y habilitaste algunos servicios, debes indicarle al código que quieres usar Firebase y qué proyecto de Firebase usar.

Agrega las bibliotecas de Firebase

Para que tu app use Firebase, debes agregar las bibliotecas de Firebase a la app. Existen varias formas de hacerlo, como se describe en la documentación de Firebase. Por ejemplo, puedes agregar las bibliotecas de la CDN de Google o instalarlas de forma local con npm y, luego, empaquetarlas en tu app si usas Browserify.

StackBlitz proporciona un empaquetado automático para que puedas agregar las bibliotecas de Firebase con instrucciones de importación. Usarás las versiones modulares (v9) de las bibliotecas, que ayudan a reducir el tamaño general de la página web a través de un proceso llamado "eliminación de árboles". Puedes obtener más información sobre los SDKs modulares en la documentación.

Para compilar esta app, usarás las bibliotecas de Firebase Authentication, FirebaseUI y Cloud Firestore. En este codelab, las siguientes sentencias de importación ya se incluyen en la parte superior del archivo index.js, y a medida que avancemos, importaremos más métodos de cada biblioteca de Firebase:

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

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

Agrega una app web de Firebase a tu proyecto de Firebase

1. En Firebase console, haz clic en Descripción general del proyecto en la parte superior izquierda para navegar a la página de descripción general de tu proyecto.
2. En el centro de la página de descripción general de tu proyecto, haz clic en el ícono de Web para crear una nueva aplicación web de Firebase.
   
   
   
   
3. Registra la app con el sobrenombre App web.
4. En este codelab, NO marques la casilla junto a Configurar Firebase Hosting para esta app también. Por ahora, usarás el panel de vista previa de StackBlitz.
5. Haz clic en Registrar app.

   Stackblitz administra tus dependencias por ti, por lo que puedes omitir el paso npm install firebase que se muestra en la consola.

   
   
   
   
   
6. Copia el objeto de configuración de Firebase en el portapapeles.
   
   
   
   
7. Haz clic en Continuar a la consola.Agrega el objeto de configuración de Firebase a tu app:
8. En StackBlitz, ve al archivo index.js.
9. Busca la línea de comentario Add Firebase project configuration object here y, luego, pega el fragmento de configuración debajo del comentario.
10. Agrega la llamada a función initializeApp para configurar Firebase con la configuración única de tu proyecto de Firebase.

    // ...
    // Add Firebase project configuration object here
    const firebaseConfig = {
      apiKey: "random-unique-string",
      authDomain: "your-projectId.firebaseapp.com",
      databaseURL: "https://your-projectId.firebaseio.com",
      projectId: "your-projectId",
      storageBucket: "your-projectId.firebasestorage.app",
      messagingSenderId: "random-unique-string",
      appId: "random-unique-string",
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig);
    

Si te perdiste el fragmento firebaseConfig (o lo necesitas en un punto de control), haz lo siguiente:

Puedes obtener el objeto de configuración de tu proyecto de Firebase desde Firebase console.

1. En Firebase console, haz clic en el ícono de configuración en la esquina superior izquierda y, luego, selecciona Configuración del proyecto.
2. En la pestaña General, desplázate hacia abajo hasta la tarjeta Tus apps.
3. Haz clic en tu app web y, luego, selecciona la opción Configuración para el fragmento del SDK de Firebase.
4. Copia todo el fragmento de configuración en el portapapeles.

6. Agrega el acceso de usuarios (confirmación de asistencia)

Ahora que agregaste Firebase a la app, puedes configurar un botón de RSVP que registre a las personas con Firebase Authentication.

Autentica a tus usuarios con el Acceso con correo electrónico y FirebaseUI

Necesitarás un botón para confirmar la asistencia que le solicite al usuario que acceda con su dirección de correo electrónico. Para ello, conecta FirebaseUI a un botón de RSVP.FirebaseUI es una biblioteca que te brinda una IU precompilada en Firebase Auth.

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

• Le indica a FirebaseUI que deseas usar el método de acceso Correo electrónico/Contraseña.
• Controla la devolución de llamada para un acceso correcto y muestra un valor falso para evitar un redireccionamiento. No quieres que la página se actualice porque estás compilando una app web de una sola página.

Agrega el código para inicializar FirebaseUI Auth

1. En StackBlitz, ve al archivo index.js.
2. En la parte superior, busca la sentencia de importación firebase/auth y, luego, agrega getAuth y EmailAuthProvider, de la siguiente manera:

   // ...
   // Add the Firebase products and methods that you want to use
   import { getAuth, EmailAuthProvider } from 'firebase/auth';
   
   import {} from 'firebase/firestore';
   

3. Guarda una referencia al objeto de autenticación justo después de initializeApp, de la siguiente manera:

   initializeApp(firebaseConfig);
   auth = getAuth();
   

4. Ten en cuenta que la configuración de FirebaseUI ya se proporciona en el código de partida. Ya está configurado para usar el proveedor de autenticación de correo electrónico.
5. En la parte inferior de la función main() en index.js, agrega la sentencia de inicialización de FirebaseUI de la siguiente manera:

   async function main() {
     // ...
   
     // Initialize the FirebaseUI widget using Firebase
     const ui = new firebaseui.auth.AuthUI(auth);
   }
   main();
   
   

Agrega un botón de confirmación de asistencia al código HTML

1. En StackBlitz, ve al archivo index.html.
2. Agrega el código HTML de un botón para confirmar asistencia dentro de event-details-container, como se muestra en el siguiente ejemplo.
   
   Ten cuidado de usar los mismos valores de id que se muestran a continuación porque, para este codelab, ya hay hooks para estos IDs específicos en el archivo index.js.
   
   Ten en cuenta que, en el archivo index.html, hay un contenedor con el ID firebaseui-auth-container. Este es el ID que pasarás a FirebaseUI para conservar tu acceso.

   <!-- ... -->
   
   <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 app
   
   
   
   
3. Configura un objeto de escucha en el botón RSVP y llama a la función de inicio de FirebaseUI. Esto le indica a FirebaseUI que quieres ver la ventana de acceso.
   
   Agrega el siguiente código al final de la función main() en index.js:

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

Cómo probar el acceso a la app

1. En la ventana de vista previa de StackBlitz, haz clic en el botón RSVP para acceder a la app.
   • En este codelab, puedes usar cualquier dirección de correo electrónico, incluso una falsa, ya que no configurarás un paso de verificación por 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, asegúrate de haber habilitado Correo electrónico o contraseña como proveedor de acceso en Firebase console.
   Vista previa de la app
   
   
   
   
2. Ve al panel de Autenticación en Firebase console. En la pestaña Usuarios, deberías ver la información de la cuenta que ingresaste para acceder a la app.
   
   
   
   

Sugerencia: Consulta la documentación de Firebase para aprender a usar FirebaseUI y Firebase Authentication para agregar proveedores de accesos con redes sociales (como GitHub, Google y Facebook) a tu app.

Cómo agregar el estado de autenticación a la IU

Luego, asegúrate de que la IU refleje que accediste a tu cuenta.

Usarás la devolución de llamada del objeto de escucha de estado de Firebase Authentication, que recibe una notificación cada vez que cambia el estado de acceso del usuario. Si hay un usuario que accedió, la app cambiará el botón "Confirmar asistencia" por un botón "Salir".

1. En StackBlitz, ve al archivo index.js.
2. En la parte superior, busca la sentencia de importación firebase/auth y, luego, agrega signOut y onAuthStateChanged, de la siguiente manera:

   // ...
   // Add the Firebase products and methods that you want to use
   import {
     getAuth,
     EmailAuthProvider,
     signOut,
     onAuthStateChanged
   } from 'firebase/auth';
   
   import {} from 'firebase/firestore';
   

3. Agrega el siguiente código en la parte inferior de la función main():

   async function main() {
     // ...
   
     // Listen to the current Auth state
     onAuthStateChanged(auth, user => {
       if (user) {
         startRsvpButton.textContent = 'LOGOUT';
       } else {
         startRsvpButton.textContent = 'RSVP';
       }
     });
   }
   main();
   

4. En el objeto de escucha de botones, verifica si hay un usuario actual y haz que salga. Para ello, reemplaza el startRsvpButton.addEventListener actual por lo siguiente:

   // ...
   // Called when the user clicks the RSVP button
   startRsvpButton.addEventListener('click', () => {
     if (auth.currentUser) {
       // User is signed in; allows user to sign out
       signOut(auth);
     } else {
       // No user is signed in; allows user to sign in
       ui.start('#firebaseui-auth-container', uiConfig);
     }
   });
   

Ahora, el botón de tu app debería mostrar LOGOUT y debería volver a RSVP cuando se haga clic en él.

Vista previa de la app

¿Te sientes bloqueado o crees que te estás desviando del camino? Este es un vínculo de StackBlitz que se actualizó con todo el código agregado hasta este punto del codelab: https://stackblitz.com/edit/firebase-gtk-web-checkpoint1

Asegúrate de hacer lo siguiente en este punto de control:

1. Crea una bifurcación del proyecto para que sea tuyo.
2. Agrega el objeto de configuración de tu proyecto de Firebase desde Firebase console.

7. Escriba mensajes en Cloud Firestore

Saber que los usuarios llegarán es genial, pero demos a los invitados algo más que hacer en la app. ¿Qué tal si pudieran dejar mensajes en un libro de visitas? Pueden compartir por qué les entusiasma asistir o a quién esperan conocer.

Para almacenar los mensajes de chat que los usuarios escriben en la app, usarás Cloud Firestore.

Modelo de datos

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

Sugerencia: Para obtener más información sobre el modelo de datos de Cloud Firestore, lee sobre los documentos y las colecciones en la documentación de Cloud Firestore. También puedes mirar una serie de videos en la que se describe el modelo de datos NoSQL de Cloud Firestore, las consultas y otras funciones interesantes que puedes realizar con este servicio.

Cómo agregar mensajes a Firestore

En esta sección, agregarás la funcionalidad para que los usuarios escriban mensajes nuevos en la base de datos. Primero, agregas el código HTML para los elementos de la IU (campo de mensaje y botón de envío). Luego, agregas el código que vincula estos elementos a la base de datos.

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

1. En StackBlitz, ve al archivo index.html.
2. Busca el guestbook-container y, luego, agrega el siguiente código HTML para crear un formulario con el campo de entrada de mensajes y el botón de envío.

   <!-- ... -->
   
    <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 app

Los usuarios que hagan clic en el botón ENVIAR activarán el fragmento de código que aparece abajo. Agrega el contenido del campo de entrada de mensajes a la colección guestbook de la base de datos. Específicamente, el método addDoc agrega el contenido del mensaje a un documento nuevo (con un ID generado automáticamente) a la colección guestbook.

1. En StackBlitz, ve al archivo index.js.
2. En la parte superior, busca la sentencia de importación firebase/firestore y, luego, agrega getFirestore, addDoc y collection, de la siguiente manera:

   // ...
   
   // Add the Firebase products and methods that you want to use
   import {
     getAuth,
     EmailAuthProvider,
     signOut,
     onAuthStateChanged
   } from 'firebase/auth';
   
   import {
     getFirestore,
     addDoc,
     collection
   } from 'firebase/firestore';
   

3. Ahora, guardaremos una referencia al objeto db de Firestore justo después de initializeApp:

   initializeApp(firebaseConfig);
   auth = getAuth();
   db = getFirestore();
   

4. En la parte inferior de la función main(), agrega el siguiente código.
   
   Ten en cuenta que auth.currentUser.uid es una referencia al ID único generado automáticamente que Firebase Authentication proporciona a todos los usuarios que accedieron.

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

Mostrar el libro de visitas solo a los usuarios que hayan accedido a sus cuentas

No quieres que cualquier persona vea el chat de los invitados. Para proteger el chat, puedes permitir que solo los usuarios que hayan accedido a sus cuentas puedan ver el libro de visitas. Dicho esto, para tus propias apps, te recomendamos que también protejas tu base de datos con las reglas de seguridad de Firebase. (Más adelante en el codelab, encontrarás más información sobre las reglas de seguridad).

1. En StackBlitz, ve al archivo index.js.
2. Edita el objeto de escucha onAuthStateChanged para ocultar y mostrar el libro de visitas.

   // ...
   
   // Listen to the current Auth state
   onAuthStateChanged(auth, 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';
     }
   });
   

Cómo probar el envío de mensajes

1. Asegúrate de haber accedido a la app.
2. Ingresa un mensaje, como "Hola", y haz clic en ENVIAR.

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

Sin embargo, puedes ver el mensaje nuevo que agregaste en Firebase console.

En Firebase console, en el panel de Base de datos de Firestore, deberías ver la colección guestbook con el mensaje que agregaste recientemente. Si sigues enviando mensajes, tu colección de libros de visitas contendrá muchos documentos, como este:

Firebase console

¿Te sientes bloqueado o crees que te estás desviando del camino? Este es un vínculo de StackBlitz actualizado con todo el código agregado hasta este punto del codelab: https://stackblitz.com/edit/firebase-gtk-web-checkpoint2

Asegúrate de hacer lo siguiente en este punto de control:

1. Crea una bifurcación del proyecto para que sea tuyo.
2. Agrega el objeto de configuración de tu proyecto de Firebase desde Firebase console.

8. Lea los mensajes

Cómo sincronizar mensajes

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

Para mostrar mensajes, deberás agregar objetos de escucha que se activen cuando cambien los datos y, luego, crear un elemento de la IU que muestre los mensajes nuevos.

Agregarás código que detecte los mensajes agregados recientemente desde la app. Primero, agrega una sección en el HTML para mostrar los mensajes:

1. En StackBlitz, ve al archivo index.html.
2. En guestbook-container, agrega una sección nueva con el ID de guestbook.

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

A continuación, registra el objeto de escucha que detecta los cambios realizados en los datos:

1. En StackBlitz, ve al archivo index.js.
2. En la parte superior, busca la sentencia de importación firebase/firestore y, luego, agrega query, orderBy y onSnapshot, de la siguiente manera:

   // ...
   import {
     getFirestore,
     addDoc,
     collection,
     query,
     orderBy,
     onSnapshot
   } from 'firebase/firestore';
   

3. En la parte inferior de la función main(), agrega el siguiente código para recorrer todos los documentos (mensajes del libro de visitas) de la base de datos. Para obtener más información sobre lo que sucede en este código, lee la información que se encuentra debajo del fragmento.

   async function main() {
     // ...
   
     // Create query for messages
     const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
     onSnapshot(q, 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);
       });
     });
   }
   main();
   

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

La función onSnapshot toma dos parámetros: la consulta que se usará y una función de devolución de llamada. Esta se activa cuando se realizan cambios en los documentos que coincidan con la consulta. por ejemplo, cuando se borre, se modifique o se agregue un mensaje. Para obtener más información, consulta la documentación de Cloud Firestore.

Sugerencia: Para una actualización más rápida, puedes actualizar solo los documentos modificados, en lugar de toda la lista. Obtén más información en la documentación de Cloud Firestore.

Cómo probar la sincronización de mensajes

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

• Los mensajes que creaste antes en la base de datos deberían mostrarse en la app. No dudes en escribir mensajes nuevos; deberían aparecer al instante.
• Si abres tu lugar de trabajo en varias ventanas o pestañas, los mensajes se sincronizarán en tiempo real en todas las pestañas.
• (Opcional) Puedes intentar borrar, modificar o agregar mensajes nuevos de forma manual y directamente en la sección Database de Firebase console. Los cambios deberían aparecer en la IU.

¡Felicitaciones! Estás leyendo documentos de Cloud Firestore en tu app.

Vista previa de la app

¿Te sientes bloqueado o crees que te estás desviando del camino? Este es un vínculo de StackBlitz actualizado con todo el código agregado hasta este punto del codelab: https://stackblitz.com/edit/firebase-gtk-web-checkpoint3

Asegúrate de hacer lo siguiente en este punto de control:

1. Crea una bifurcación del proyecto para que sea tuyo.
2. Agrega el objeto de configuración de tu proyecto de Firebase desde Firebase console.

9. Configura reglas de seguridad básicas

Inicialmente, configuraste Cloud Firestore para usar el modo de prueba, lo que significa que tu base de datos está abierta para operaciones de lectura y escritura. Sin embargo, solo debes usar el modo de prueba durante las primeras etapas del desarrollo. Como práctica recomendada, debes configurar reglas de seguridad para tu base de datos a medida que desarrollas tu app. La seguridad debe ser parte integral de la estructura y el comportamiento de tu app.

Las reglas de seguridad te permiten controlar el acceso a los documentos y las colecciones de tu base de datos. La sintaxis de reglas flexibles te permite crear reglas que coincidan con todo, desde todas las operaciones de escritura en 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 Build de Firebase console, haz clic en Base de datos de Firestore y, luego, selecciona la pestaña Rules (o haz clic aquí para ir directamente a la pestaña Rules).
2. Deberías ver las siguientes reglas de seguridad predeterminadas, con un límite de tiempo de acceso público dentro de un par de semanas.

Consulta la documentación de las reglas de seguridad de Firebase o esta playlist de YouTube para obtener más información sobre las reglas de seguridad.

Cómo identificar colecciones

Primero, identifica las colecciones en las que la app escribe datos.

1. Borra la cláusula match /{document=**} existente para que tus reglas se vean de la siguiente manera:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
     }
   }
   

2. En match /databases/{database}/documents, identifica la colección que deseas proteger:

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

Agrega reglas de seguridad

Como usaste el UID de Authentication como un campo en cada documento del libro de visitas, puedes obtener el UID de Authentication y verificar que cualquier persona que intente escribir en el documento tenga un UID de Authentication coincidente.

1. Agrega las reglas de lectura y escritura a tu 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;
       }
     }
   }
   

2. Haz clic en Publicar para implementar tus reglas nuevas.Ahora, en el libro de visitas, solo los usuarios que hayan accedido pueden leer los mensajes (cualquier mensaje), pero solo puedes crear un mensaje con tu ID de usuario. Tampoco permitimos que se editen ni borren los mensajes.

Agrega reglas de validación

1. Agrega la validación de datos para asegurarte 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;
       }
     }
   }
   

2. Haz clic en Publicar para implementar tus reglas nuevas.

Cómo restablecer los objetos de escucha

Como tu app ahora solo permite que los usuarios autenticados accedan, debes mover la consulta firestore del libro de visitas dentro del objeto de escucha de Authentication. De lo contrario, se producirán errores de permiso y la app se desconectará cuando el usuario salga de su cuenta.

1. En StackBlitz, ve al archivo index.js.
2. Extrae el objeto de escucha onSnapshot de la colección de libros de invitados a una función nueva llamada subscribeGuestbook. Además, asigna los resultados de la función onSnapshot a la variable guestbookListener.
   
   El objeto de escucha onSnapshot de Firestore muestra una función de anulación de la suscripción que podrás usar para cancelar el objeto de escucha de instantáneas más adelante.

   // ...
   // Listen to guestbook updates
   function subscribeGuestbook() {
     const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
     guestbookListener = onSnapshot(q, 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);
       });
     });
   }
   

3. Agrega una función nueva debajo llamada unsubscribeGuestbook. Verifica si la variable guestbookListener no es nula y, luego, llama a la función para cancelar el objeto de escucha.

   // ...
   // Unsubscribe from guestbook updates
   function unsubscribeGuestbook() {
     if (guestbookListener != null) {
       guestbookListener();
       guestbookListener = null;
     }
   }
   

Por último, agrega las funciones nuevas a la devolución de llamada de onAuthStateChanged.

4. Agrega subscribeGuestbook() en la parte inferior de if (user).
5. Agrega unsubscribeGuestbook() en la parte inferior de la sentencia else.

   // ...
   // Listen to the current Auth state
   onAuthStateChanged(auth, 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();
     }
   });
   

¿Te sientes bloqueado o crees que te estás desviando del camino? Este es un vínculo de StackBlitz actualizado con todo el código agregado hasta este punto del codelab: https://stackblitz.com/edit/firebase-gtk-web-checkpoint4

Asegúrate de hacer lo siguiente en este punto de control:

1. Crea una bifurcación del proyecto para que sea tuyo.
2. Agrega el objeto de configuración de tu proyecto de Firebase desde Firebase console.

10. Paso adicional: Practica lo que aprendiste

Cómo registrar el estado de confirmación de asistencia de un asistente

En este momento, tu app solo permite que las personas comiencen a chatear si les interesa el evento. Además, la única forma de saber si alguien vendrá es si lo publica en el chat. Organízate y avísale a las personas cuántas personas asistirán.

Agregarás un botón de activación para registrar a las personas que quieran asistir al evento y, luego, recopilarás un recuento de cuántas personas asistirán.

1. En StackBlitz, ve al archivo index.html.
2. En guestbook-container, agrega un conjunto de botones SÍ y NO, de la siguiente manera:

   <!-- ... -->
     <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 app

A continuación, registra el objeto de escucha para los clics en el botón. Si el usuario hace clic en YES, usa su UID de Authentication para guardar la respuesta en la base de datos.

1. En StackBlitz, ve al archivo index.js.
2. En la parte superior, busca la sentencia de importación firebase/firestore y, luego, agrega doc, setDoc y where, de la siguiente manera:

   // ...
   // Add the Firebase products and methods that you want to use
   import {
     getFirestore,
     addDoc,
     collection,
     query,
     orderBy,
     onSnapshot,
     doc,
     setDoc,
     where
   } from 'firebase/firestore';
   

3. En la parte inferior de la función main(), agrega el siguiente código para escuchar el estado de RSVP:

   async function main() {
     // ...
   
     // Listen to RSVP responses
     rsvpYes.onclick = async () => {
     };
     rsvpNo.onclick = async () => {
     };
   }
   main();
   
   

4. A continuación, crea una colección nueva llamada attendees y, luego, registra una referencia de documento si se hace clic en cualquiera de los botones de RSVP. Establece 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 = async () => {
     // Get a reference to the user's document in the attendees collection
     const userRef = doc(db, 'attendees', auth.currentUser.uid);
   
     // If they RSVP'd yes, save a document with attendi()ng: true
     try {
       await setDoc(userRef, {
         attending: true
       });
     } catch (e) {
       console.error(e);
     }
   };
   

   Luego, lo mismo para rsvpNo, pero con el valor false:

   rsvpNo.onclick = async () => {
     // Get a reference to the user's document in the attendees collection
     const userRef = doc(db, 'attendees', auth.currentUser.uid);
   
     // If they RSVP'd yes, save a document with attending: true
     try {
       await setDoc(userRef, {
         attending: false
       });
     } catch (e) {
       console.error(e);
     }
   };
   

Actualiza tus reglas de seguridad

Como ya tienes configuradas algunas reglas, se rechazarán los datos nuevos que agregues con los botones.

Permite que se agreguen elementos a la colección attendees.

Deberás actualizar las reglas para permitir la adición a la colección attendees.

1. En el caso de la colección attendees, como usaste el UID de Authentication como nombre del documento, puedes tomarlo y verificar que el uid del remitente sea el mismo que el documento que está escribiendo. Permitirás que todos puedan leer 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;
       }
     }
   }
   

2. Haz clic en Publicar para implementar tus reglas nuevas.

Agrega reglas de validación

1. Agrega algunas reglas de validación de datos para asegurarte 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;
   
       }
     }
   }
   

2. No olvides hacer clic en Publicar para implementar tus reglas.
   

(Opcional) Ahora puedes ver los resultados de hacer clic en los botones. Ve al panel de Cloud Firestore en Firebase console.

Cómo leer el estado de confirmación de asistencia

Ahora que registraste las respuestas, veamos quién vendrá y cómo se reflejará en la IU.

1. En StackBlitz, ve al archivo index.html.
2. En description-container, agrega un elemento nuevo con el ID de number-attending.

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

A continuación, registra el objeto de escucha para la colección attendees y cuenta la cantidad de respuestas YES:

3. En StackBlitz, ve al archivo index.js.
4. En la parte inferior de la función main(), agrega el siguiente código para escuchar el estado de RSVP y contar los clics en SÍ.

   async function main() {
     // ...
   
     // Listen for attendee list
     const attendingQuery = query(
       collection(db, 'attendees'),
       where('attending', '==', true)
     );
     const unsubscribe = onSnapshot(attendingQuery, snap => {
       const newAttendeeCount = snap.docs.length;
       numberAttending.innerHTML = newAttendeeCount + ' people going';
     });
   }
   main();
   

Por último, destaquemos el botón correspondiente al estado actual.

5. Crea una función que verifique si el UID de Authentication actual tiene una entrada en la colección attendees y, luego, establece la clase de botón en clicked.

   // ...
   // Listen for attendee list
   function subscribeCurrentRSVP(user) {
     const ref = doc(db, 'attendees', user.uid);
     rsvpListener = onSnapshot(ref, 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';
         }
       }
     });
   }
   

6. Además, hagamos una función para cancelar la suscripción. Se usará cuando el usuario salga de su cuenta.

   // ...
   function unsubscribeCurrentRSVP() {
     if (rsvpListener != null) {
       rsvpListener();
       rsvpListener = null;
     }
     rsvpYes.className = '';
     rsvpNo.className = '';
   }
   

7. Llama a las funciones desde el objeto de escucha de Authentication.

   // ...
   // Listen to the current Auth state
     // Listen to the current Auth state
     onAuthStateChanged(auth, 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 user's RSVP
         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();
       }
     });
   

8. Intenta acceder como varios usuarios y observa cómo aumenta el recuento con cada clic adicional en el botón SÍ.

Vista previa de la app

¿Te sientes bloqueado o crees que te estás desviando del camino? Este es un vínculo de StackBlitz actualizado con todo el código agregado hasta este punto del codelab: https://stackblitz.com/edit/firebase-gtk-web-checkpoint5

Asegúrate de hacer lo siguiente en este punto de control:

1. Crea una bifurcación del proyecto para que sea tuyo.
2. Agrega el objeto de configuración de tu proyecto de Firebase desde Firebase console.

11. ¡Felicitaciones!

Usaste Firebase para compilar una aplicación web interactiva y en tiempo real.

Temas abordados

• Firebase Authentication
• FirebaseUI
• Cloud Firestore
• Reglas de seguridad de Firebase

Próximos pasos

• ¿Quieres obtener más información sobre el flujo de trabajo de los desarrolladores de Firebase? Consulta el codelab del emulador de Firebase para aprender a probar y ejecutar tu app de forma completamente local.
• ¿Quieres obtener más información sobre otros productos de Firebase? ¿Quizás quieras almacenar los archivos de imagen que suben los usuarios? ¿O enviar notificaciones a tus usuarios? Consulta el codelab de Firebase para la Web, en el que se profundiza en muchos más productos de Firebase para la Web.
• ¿Quieres obtener más información sobre Cloud Firestore? ¿Quizás quieras obtener más información sobre las subcolecciones y las transacciones? Consulta el codelab de Cloud Firestore para la Web si quieres ver un codelab que profundiza en Cloud Firestore. También puedes consultar esta serie de YouTube para conocer Cloud Firestore.

Más información

• Sitio de Firebase: firebase.google.com
• Canal de YouTube de Firebase

¿Cómo te fue?

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