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 y un libro de visitas a un evento usando varios productos de Firebase.
Qué aprenderás
- Autentica usuarios con Firebase Authentication y FirebaseUI.
- Sincronizar datos con Cloud Firestore
- Escribir 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 acceder a una cuenta ni a acceder a una cuenta)
- Una Cuenta de Google, como una cuenta de Gmail Te recomendamos la cuenta de correo electrónico que ya usas para tu cuenta de GitHub. Esto te permite utilizar las funciones avanzadas en StackBlitz.
- El código de muestra del codelab Consulta el siguiente paso para saber cómo 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. Las demás personas que tengan la URL del proyecto de StackBlitz podrán ver el código y bifurcar el proyecto, pero no podrán editarlo.
- Ve a esta URL para obtener el código de inicio: https://stackblitz.com/edit/firebase-gtk-web-start
- En la parte superior de la página de StackBlitz, haz clic en Fork:
Ahora tienes una copia del código de partida como tu propio proyecto de StackBlitz, que tiene un nombre único y una URL única. Todos tus archivos y cambios se guardan en este proyecto de StackBlitz.
3. Edita la información del evento
Los materiales iniciales de este codelab proporcionan cierta estructura para la app web, incluidas algunas hojas de estilo y un par de contenedores HTML para la app. Más adelante en este codelab, conectarás estos contenedores a Firebase.
Para comenzar, familiaricémonos un poco más con la interfaz de StackBlitz.
- En StackBlitz, abre el archivo
index.html
. - Busca
event-details-container
ydescription-container
; 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 nuevo evento. Genial, ¿verdad?
<!-- ... -->
<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 el simple hecho de mostrar los eventos no es muy útil para nadie. Agreguemos algunas funcionalidades 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
- Accede a Firebase.
- En Firebase console, haz clic en Agregar proyecto (o Crear un proyecto) y, luego, asigna el nombre Firebase-Web-Codelab a tu proyecto de Firebase.
- Haz clic para avanzar por las opciones de creación de proyectos. Si se te solicita, acepta las condiciones de Firebase. En la pantalla de Google Analytics, haz clic en "No habilitar", ya que no usarás Analytics para esta aplicación.
Para obtener más información sobre los proyectos de Firebase, consulta la Información sobre los proyectos de Firebase.
Habilita y configura los productos de Firebase en la consola.
La app que estás compilando usa varios productos de Firebase que están disponibles para apps web:
- Firebase Authentication y la IU de Firebase para permitir que los usuarios accedan a tu app con facilidad.
- 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 con correo electrónico/contraseña en este codelab:
- En el panel del lado izquierdo de Firebase console, haz clic en Compilar > Autenticación. Luego, haz clic en Comenzar. Ahora te encuentras en el panel de Authentication. Allí puedes ver los usuarios que se registraron, configurar los proveedores de acceso y administrar la configuración.
- Selecciona la pestaña Método de acceso (o haz clic aquí para ir directamente a la pestaña).
- En las opciones del proveedor, haz clic en Correo electrónico/contraseña, cambia la opción a Habilitar y, luego, haz clic en Guardar.
Configura Cloud Firestore
La aplicación web usa Cloud Firestore para guardar los mensajes de chat y recibir mensajes nuevos.
Aquí te mostramos cómo configurar Cloud Firestore:
- En el panel del lado izquierdo de Firebase console, haz clic en Compilar > Base de datos de Firestore. Luego, haz clic en Crear base de datos.
- Haz clic en Crear base de datos.
- Selecciona la opción Comenzar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad. El modo de prueba garantiza que puedas escribir con libertad en la base de datos durante el desarrollo. Haz clic en Siguiente.
- Selecciona la ubicación de tu base de datos (puedes usar la predeterminada). Sin embargo, ten en cuenta que esta ubicación no se puede cambiar más adelante.
- Haz clic en Listo.
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, así como a qué proyecto de Firebase debes usar.
Agrega las bibliotecas de Firebase
Para que tu app use Firebase, debes agregarle las bibliotecas de Firebase. 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 bien instalarlas de forma local con npm y, luego, empaquetarlas en tu app si usas Browserify.
StackBlitz ofrece una función de agrupación automática, por lo que puedes agregar las bibliotecas de Firebase con sentencias 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 código no utilizado”. Obtén más información sobre los SDKs modulares en los documentos.
Para compilar esta app, usarás las bibliotecas de Firebase Authentication, FirebaseUI y Cloud Firestore. Para este codelab, las siguientes sentencias de importación ya se incluyen en la parte superior del archivo index.js
, y importaremos más métodos de cada biblioteca de Firebase a medida que avancemos:
// 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
- Vuelve a Firebase console y haz clic en Descripción general del proyecto en la parte superior izquierda para navegar a la página de descripción general del proyecto.
- En el centro de la página de resumen del proyecto, haz clic en el ícono web para crear una nueva aplicación web de Firebase.
- Registra la app con el sobrenombre Web App.
- En este codelab, NO marques la casilla junto a Configurar también Firebase Hosting para esta app. Por ahora, usarás el panel de vista previa de StackBlitz.
- Haz clic en Registrar app.
- Copia el objeto de configuración de Firebase en el portapapeles.
- Haz clic en Ir a la consola.Agrega el objeto de configuración de Firebase a tu app:
- Vuelve a StackBlitz y ve al archivo
index.js
. - Busca la línea de comentario
Add Firebase project configuration object here
y pega el fragmento de configuración justo debajo del comentario. - 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.appspot.com", messagingSenderId: "random-unique-string", appId: "random-unique-string", }; // Initialize Firebase initializeApp(firebaseConfig);
6. Agregar acceso de usuario (RSVP)
Ahora que agregaste Firebase a la app, puedes configurar un botón para confirmar asistencia que registre a las personas mediante Firebase Authentication.
Autentica a tus usuarios con el Acceso con correo electrónico y FirebaseUI
Para ello, necesitarás un botón para confirmar asistencia, en el que se le pedirá al usuario que acceda con su dirección de correo electrónico. Para ello, conecta FirebaseUI a un botón para confirmar asistencia.FirebaseUI es una biblioteca que ofrece una IU precompilada además de Firebase Auth.
FirebaseUI requiere una configuración (consulta las opciones en la documentación) que cumple las siguientes dos condiciones:
- Le indica a FirebaseUI que quieres usar el método de acceso por correo electrónico/contraseña.
- Controla la devolución de llamada para un acceso exitoso y muestra el valor "false" 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
- En StackBlitz, ve al archivo
index.js
. - En la parte superior, busca la sentencia de importación
firebase/auth
y, luego, agregagetAuth
yEmailAuthProvider
, 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';
- Guarda una referencia al objeto auth inmediatamente después de
initializeApp
, de la siguiente manera:initializeApp(firebaseConfig); auth = getAuth();
- Ten en cuenta que la configuración de FirebaseUI ya se proporciona en el código de partida. Ya está configurada para usar el proveedor de autenticación de correo electrónico.
- En la parte inferior de la función
main()
enindex.js
, agrega la declaración de inicialización de FirebaseUI, como se muestra a continuación:async function main() { // ... // Initialize the FirebaseUI widget using Firebase const ui = new firebaseui.auth.AuthUI(auth); } main();
Agrega un botón para confirmar asistencia al archivo HTML
- En StackBlitz, ve al archivo
index.html
. - Agrega el código HTML del botón para confirmar asistencia dentro de la
event-details-container
, como se muestra en el siguiente ejemplo.
Asegúrate de usar los mismos valores deid
que se muestran a continuación porque, en este codelab, ya existen hooks para estos IDs específicos en el archivoindex.js
.
Ten en cuenta que, en el archivoindex.html
, hay un contenedor con el IDfirebaseui-auth-container
. Este es el ID que pasarás a FirebaseUI para mantener tu información de acceso.
Vista previa de la app<!-- ... --> <section id="event-details-container"> <!-- ... --> <!-- ADD THE RSVP BUTTON HERE --> <button id="startRsvp">RSVP</button> </section> <hr> <section id="firebaseui-auth-container"></section> <!-- ... -->
- Configura un objeto de escucha en el botón de confirmación de asistencia 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ónmain()
enindex.js
:async function main() { // ... // Listen to RSVP button clicks startRsvpButton.addEventListener("click", () => { ui.start("#firebaseui-auth-container", uiConfig); }); } main();
Prueba el acceso a la app
- En la ventana de vista previa de StackBlitz, haz clic en el botón Confirmar asistencia para acceder a la aplicación.
- 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
oThe given sign-in provider is disabled for this Firebase project
, asegúrate de habilitar Correo electrónico/Contraseña como proveedor de acceso en Firebase console.
- Ve al panel Authentication en Firebase console. En la pestaña Usuarios, deberías ver la información de la cuenta que ingresaste para acceder a la app.
Cómo agregar el estado de autenticación a la IU
A continuación, 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ó, tu app cambiará la opción "Confirmar asistencia". a "salir" .
- En StackBlitz, ve al archivo
index.js
. - En la parte superior, busca la sentencia de importación
firebase/auth
y, luego, agregasignOut
yonAuthStateChanged
, 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';
- 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();
- En el objeto de escucha de botones, verifica si hay un usuario actual y sal de él. 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, en el botón de tu app debería aparecer LOGOUT y debería volver a RSVP cuando se haga clic en él.
Vista previa de la app
7. Escriba mensajes en Cloud Firestore
Saber que los usuarios vienen es genial, pero podemos ofrecerles a los invitados algo más para hacer en la app. ¿Y si pudieran dejar mensajes en un libro de visitas? Pueden compartir por qué les entusiasma venir 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; 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
.
Agrega mensajes a Firestore
En esta sección, agregarás la funcionalidad para que los usuarios escriban mensajes nuevos en la base de datos. Primero, agrega el HTML para los elementos de la IU (campo de mensaje y botón de envío). Luego, agregas el código que conecta 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:
- En StackBlitz, ve al archivo
index.html
. - Ubica el
guestbook-container
y, luego, agrega el siguiente código 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 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 del mensaje 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
.
- En StackBlitz, ve al archivo
index.js
. - En la parte superior, busca la sentencia de importación
firebase/firestore
y, luego, agregagetFirestore
,addDoc
ycollection
, 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';
- Ahora, guardaremos una referencia al objeto
db
de Firestore justo después deinitializeApp
:initializeApp(firebaseConfig); auth = getAuth(); db = getFirestore();
- En la parte inferior de la función
main()
, agrega el siguiente código.
Ten en cuenta queauth.currentUser.uid
es una referencia al ID único generado automáticamente que Firebase Authentication proporciona a todos los usuarios que accedieron a sus cuentas.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();
Muestra el libro de visitas solo a los usuarios que accedieron
No quieres que cualquiera vea las fotos de los invitados chat. Algo que puedes hacer para proteger el chat es permitir que solo los usuarios que hayan iniciado sesión vean el libro de visitas. Dicho esto, en el caso de tus propias apps, también recomendamos que protejas tu base de datos con las reglas de seguridad de Firebase. Encontrarás más información sobre las reglas de seguridad más adelante en el codelab.
- En StackBlitz, ve al archivo
index.js
. - 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'; } });
Prueba el envío de mensajes
- Asegúrate de que accediste a la app.
- 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, aún 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.
Pero puedes ver el mensaje que acabas de agregar en Firebase console.
En Firebase console, en el panel Base de datos de Firestore, deberías ver la colección guestbook
con el mensaje que acabas de agregar. Si sigues enviando mensajes, tu colección de Guestbook contendrá muchos documentos como el siguiente:
Firebase console
8. Lea los mensajes
Cómo sincronizar mensajes
Es encantador que los invitados puedan escribir mensajes en la base de datos, pero aún no los pueden ver en la app.
Para mostrar mensajes, deberás agregar objetos de escucha que se activen cuando cambian los datos y, luego, crear un elemento de la IU que muestre los mensajes nuevos.
Agregarás código que escucha los mensajes recién agregados desde la app. Primero, agrega una sección en el código HTML para mostrar los mensajes:
- En StackBlitz, ve al archivo
index.html
. - En
guestbook-container
, agrega una sección nueva con el ID deguestbook
.<!-- ... --> <section id="guestbook-container"> <h2>Discussion</h2> <form><!-- ... --></form> <section id="guestbook"></section> </section> <!-- ... -->
A continuación, registra el objeto de escucha que escucha los cambios realizados en los datos:
- En StackBlitz, ve al archivo
index.js
. - En la parte superior, busca la sentencia de importación
firebase/firestore
y, luego, agregaquery
,orderBy
yonSnapshot
, de la siguiente manera:// ... import { getFirestore, addDoc, collection, query, orderBy, onSnapshot } from 'firebase/firestore';
- En la parte inferior de la función
main()
, agrega el siguiente código para recorrer en bucle 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, consulta la información que aparece 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. La función de devolución de llamada se activa cuando hay cambios en los documentos que coinciden con la consulta. por ejemplo, cuando se borra, se modifica o se agrega un mensaje. Para obtener más información, consulta la documentación de Cloud Firestore.
Prueba 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.
- Los mensajes que creaste anteriormente en la base de datos deberían mostrarse en la app. Siéntete libre de 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 directamente en la sección Base de datos de Firebase console. cualquier cambio debería aparecer en la IU.
¡Felicitaciones! Estás leyendo documentos de Cloud Firestore en tu app.
Vista previa de la app
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 de desarrollo. Como práctica recomendada, debes configurar reglas de seguridad para tu base de datos mientras desarrollas tu app. La seguridad debe ser una parte fundamental 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:
- En la sección Compilación de Firebase console, haz clic en Base de datos de Firestore y, luego, selecciona la pestaña Reglas (o haz clic aquí para ir directamente a la pestaña Reglas).
- 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.
Identifica colecciones
Primero, identifica las colecciones en las que la app escribe datos.
- 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 { } }
- 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
Debido a que usaste el UID de autenticación como un campo en cada documento de libro de visitas, puedes obtener el UID de autenticación y verificar que cualquier persona que intente escribir en el documento tenga un UID de autenticación coincidente.
- 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; } } }
- Haz clic en Publish (Publicar) para implementar las reglas nuevas.Ahora, para el libro de visitas, solo los usuarios que hayan accedido a sus cuentas podrán leer los mensajes (cualquiera), pero solo puedes crear un mensaje con tu ID de usuario. Tampoco permitimos editar ni borrar mensajes.
Agrega reglas de validación
- 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; } } }
- Haz clic en Publicar para implementar tus reglas nuevas.
Cómo restablecer objetos de escucha
Debido a que tu app ahora solo permite que accedan usuarios autenticados, mueve la consulta firestore
del libro de visitas dentro del objeto de escucha de Authentication. De lo contrario, se producirán errores de permisos y la app se desconectará cuando el usuario salga de su cuenta.
- En StackBlitz, ve al archivo
index.js
. - Extrae el objeto de escucha de la colección
onSnapshot
del libro de visitas a una función nueva llamadasubscribeGuestbook
. Además, asigna los resultados de la funciónonSnapshot
a la variableguestbookListener
.
El objeto de escuchaonSnapshot
de Firestore muestra una función de anulación de 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); }); }); }
- Agrega una nueva función debajo llamada
unsubscribeGuestbook
. Verifica si la variableguestbookListener
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 onAuthStateChanged
.
- Agrega
subscribeGuestbook()
en la parte inferior deif (user)
. - Agrega
unsubscribeGuestbook()
en la parte inferior de la sentenciaelse
.// ... // 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(); } });
10. Paso adicional: Practica lo que aprendiste
Cómo grabar el estado de confirmación de asistencia de un asistente
En este momento, tu app solo permite que las personas comiencen a chatear si están interesadas en el evento. Además, la única forma de saber si alguien irá es si lo publica en el chat. Organicémonos y hagamos que las personas sepan 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 la cantidad de personas que asistirán.
- En StackBlitz, ve al archivo
index.html
. - En
guestbook-container
, agrega un conjunto de botones YES y NO, como se muestra a continuación:<!-- ... --> <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 botones. Si el usuario hace clic en SÍ, utiliza su UID de autenticación para guardar la respuesta en la base de datos.
- En StackBlitz, ve al archivo
index.js
. - En la parte superior, busca la sentencia de importación
firebase/firestore
y, luego, agregadoc
,setDoc
ywhere
, 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';
- En la parte inferior de la función
main()
, agrega el siguiente código para escuchar el estado de confirmación de asistencia:async function main() { // ... // Listen to RSVP responses rsvpYes.onclick = async () => { }; rsvpNo.onclick = async () => { }; } main();
- A continuación, crea una colección nueva llamada
attendees
y, si se hace clic en el botón Confirmar asistencia, registra una referencia del documento. Establece la referencia entrue
ofalse
, según el botón en el que se haga clic.
Primero, pararsvpYes
:
Luego, haz lo mismo para// ... // 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); } };
rsvpNo
, pero con el valorfalse
: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
Debido a que ya configuraste algunas reglas, se rechazarán los nuevos datos que agregues con los botones.
Permitir que se agreguen elementos a la colección attendees
Deberás actualizar las reglas para permitir que se agreguen elementos a la colección attendees
.
- En el caso de la colección
attendees
, dado que usaste el UID de autenticación como nombre del documento, puedes tomarlo y verificar que eluid
del remitente sea el mismo que el del documento que está escribiendo. Permitirás que todos lean la lista de asistentes (porque allí no hay datos privados), pero solo el creador debe 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; } } }
- Haz clic en Publicar para implementar tus reglas nuevas.
Agrega reglas de validación
- 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; } } }
- No olvides hacer clic en Publicar para implementar tus reglas.
(Opcional) Ahora puedes ver los resultados cuando haces 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 viene y reflejámoslo en la IU.
- En StackBlitz, ve al archivo
index.html
. - En
description-container
, agrega un elemento nuevo con el ID denumber-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 el número de respuestas YES:
- En StackBlitz, ve al archivo
index.js
. - En la parte inferior de la función
main()
, agrega el siguiente código para escuchar el estado de confirmación de asistencia y registrar SÍ clics.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.
- Crea una función que verifique si el UID de autenticación actual tiene una entrada en la colección
attendees
y, luego, establece la clase del botón enclicked
.// ... // 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'; } } }); }
- Además, crearemos una función para anular la suscripción. Se usará cuando el usuario salga de su cuenta.
// ... function unsubscribeCurrentRSVP() { if (rsvpListener != null) { rsvpListener(); rsvpListener = null; } rsvpYes.className = ''; rsvpNo.className = ''; }
- 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(); } });
- Intenta acceder como varios usuarios y observa que el recuento aumenta con cada clic adicional en el botón SÍ.
Vista previa de la app
11. ¡Felicitaciones!
Usaste Firebase para compilar una aplicación web interactiva 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 para desarrolladores de Firebase? Consulta el codelab del emulador de Firebase para obtener información sobre cómo probar y ejecutar tu app de forma completamente local.
- ¿Quieres obtener más información sobre otros productos de Firebase? ¿Quizás desea almacenar los archivos de imagen que suben los usuarios? ¿O quieres enviarles notificaciones a tus usuarios? Consulta el codelab de Firebase para la Web a fin de ver un codelab que profundiza en muchos más productos de Firebase para la Web.
- ¿Quieres obtener más información sobre Cloud Firestore? Quizás quieras obtener información sobre las subcolecciones y transacciones. Ve al codelab web de Cloud Firestore para ver un codelab que analiza con más detalle sobre 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. Complete un formulario (muy) breve aquí.