Laboratorio de código web de Firebase

1. Información general

En este laboratorio de programación, usted aprenderá cómo utilizar Firebase para crear fácilmente aplicaciones web mediante la implementación y el despliegue de un cliente de chat utilizando productos y servicios base de fuego.

3b1284f5144b54f6.png

Lo que aprenderás

  • Sincroniza datos con Cloud Firestore y Cloud Storage para Firebase.
  • Autentica a tus usuarios mediante Firebase Authentication.
  • Implemente su aplicación web en Firebase Hosting.
  • Envía notificaciones con Firebase Cloud Messaging.
  • Recopile los datos de rendimiento de su aplicación web.

Lo que necesitarás

  • El IDE / editor de texto de su elección, como WebStorm , Atom , sublime , o Código VS
  • El gestor de paquetes NPM , que por lo general viene con Node.js
  • Una terminal / consola
  • Un navegador de su elección, como Chrome
  • El código de muestra del laboratorio de código (consulte el siguiente paso del laboratorio de código para saber cómo obtener el código).

2. Obtén el código de muestra

Clonar del codelab repositorio GitHub desde la línea de comandos:

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

Alternativamente, si no lo tiene instalado git, se puede descargar el repositorio como un archivo ZIP .

Importar la aplicación de inicio

Utilizando su IDE, abrir o importar el 📁 web-start del directorio del repositorio clonado. Este 📁 web-start directorio contiene el código de partida para el laboratorio de programación, que será una aplicación de chat en la web completamente funcional.

3. Crea y configura un proyecto de Firebase

Crea un proyecto de Firebase

  1. Iniciar sesión en Firebase .
  2. En la consola Firebase, haga clic en Agregar proyecto, y luego el nombre de su proyecto FriendlyChat Firebase. Recuerde el ID del proyecto para su proyecto de Firebase.
  3. Desactive la opción Habilitar Google Analytics para este proyecto
  4. Haga clic en Crear proyecto.

La aplicación que vamos a crear utiliza productos de Firebase que están disponibles para aplicaciones web:

  • Autenticación de base de fuego para permitir fácilmente a los usuarios suscribirse a su aplicación.
  • Nube Firestore para guardar datos estructurados en la nube y obtener una notificación instantánea cuando cambian los datos.
  • Almacenamiento en la nube para Firebase para guardar archivos en la nube.
  • Firebase hosting para alojar y servir a sus activos.
  • Firebase mensajería en la nube para enviar notificaciones push y notificaciones emergentes del navegador muestran.
  • Supervisión del rendimiento base de fuego a los datos de rendimiento del usuario a cobro revertido para su aplicación.

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

Agrega una aplicación web de Firebase al proyecto

  1. Haga clic en el icono web 58d6543a156e56f9.png para crear una nueva aplicación web de Firebase.
  2. Registrar la aplicación con el apodo amistoso chat, a continuación, seleccione la casilla junto configurar también Firebase Hosting para esta aplicación. Haga clic en Registro de aplicaciones.
  3. En el siguiente paso, verá un objeto de configuración. Copiar sólo el objeto JS (no la rodea HTML) en base de fuego-config.js

Registrar captura de pantalla de la aplicación web

Habilitar el acceso de Google para la autenticación Firebase

Para permitir que los usuarios accedan a la aplicación web con sus cuentas de Google, usaremos el inicio de sesión en Google método.

Usted necesita habilitar Google de inicio de sesión:

  1. En la consola Firebase, busque la sección Generar en el panel izquierdo.
  2. Haga clic en Autenticación, a continuación, haga clic en la pestaña Inicio de sesión método (o haga clic aquí para ir directamente allí).
  3. Habilitar el inicio de sesión en Google proveedor, a continuación, haga clic en Guardar.
  4. Establecer el nombre de cara al público de su aplicación a friendly chat y elegir un correo electrónico de soporte proyecto en el menú desplegable.
  5. Configurar la pantalla de consentimiento de OAuth en el Cloud Console Google y añadir un logotipo:

d89fb3873b5d36ae.png

Habilitar Cloud Firestore

La aplicación web utiliza la nube Firestore para guardar los mensajes de chat y recibir nuevos mensajes de chat.

Deberá habilitar Cloud Firestore:

  1. En la sección de construcción de la consola Firebase, haga clic Firestore base de datos.
  2. Haga clic en Crear base de datos en el panel de la nube Firestore.

729991a081e7cd5.png

  1. Seleccione la opción de inicio en modo de prueba, a continuación, haga clic en Siguiente después de leer el descargo de responsabilidad sobre las reglas de seguridad.

El modo de prueba asegura que podamos escribir libremente en la base de datos durante el desarrollo. Haremos que nuestra base de datos sea más segura más adelante en este laboratorio de código.

77e4986cbeaf9dee.png

  1. Configura la ubicación donde se almacenan tus datos de Cloud Firestore. Puede dejar esto como predeterminado o elegir una región cercana a usted. Haga clic en Listo para el suministro Firestore.

9f2bb0d4e7ca49c7.png

Habilitar almacenamiento en la nube

La aplicación web usa Cloud Storage para Firebase para almacenar, cargar y compartir imágenes.

Deberá habilitar Cloud Storage:

  1. En la sección de construcción de la consola Firebase, haga clic en Almacenamiento.
  2. Si hay de ningún botón Empezar, que significa que el almacenamiento de la nube ya está activado, y que no es necesario seguir los siguientes pasos.
  3. Haga clic en Comenzar.
  4. Lee el aviso sobre las reglas de seguridad para su proyecto Firebase, a continuación, haga clic en Siguiente.

Con las reglas de seguridad predeterminadas, cualquier usuario autenticado puede escribir cualquier cosa en Cloud Storage. Haremos que nuestro almacenamiento sea más seguro más adelante en este laboratorio de código.

62f1afdcd1260127.png

  1. La ubicación de Cloud Storage está preseleccionada con la misma región que elegiste para tu base de datos de Cloud Firestore. Haga clic en Hecho para completar la configuración.

1d7f49ebaddb32fc.png

4. Instale la interfaz de línea de comandos de Firebase

La interfaz de línea de comandos (CLI) de Firebase te permite usar Firebase Hosting para entregar tu aplicación web localmente, así como para implementar tu aplicación web en tu proyecto de Firebase.

  1. Instale la CLI ejecutando el siguiente comando npm:
npm -g install firebase-tools
  1. Verifique que la CLI se haya instalado correctamente ejecutando el siguiente comando:
firebase --version

Asegúrese de que la versión de Firebase CLI sea v4.1.0 o posterior.

  1. Autorice Firebase CLI ejecutando el siguiente comando:
firebase login

Hemos configurado la plantilla de la aplicación web para extraer la configuración de su aplicación para Firebase Hosting del directorio local de su aplicación (el repositorio que clonó anteriormente en el laboratorio de código). Pero para extraer la configuración, necesitamos asociar su aplicación con su proyecto de Firebase.

  1. Asegúrese de que su línea de comandos está accediendo local de su aplicación web-start de directorio.
  2. Asocie su aplicación con su proyecto de Firebase ejecutando el siguiente comando:
firebase use --add
  1. Cuando se le indique, seleccione su identificación del proyecto, a continuación, dar a su proyecto Firebase un alias.

Un alias es útil si tiene varios entornos (producción, preparación, etc.). Sin embargo, para este laboratorio de programación, vamos a utilizar el alias de default .

  1. Siga las instrucciones restantes en su línea de comando.

5. Ejecute la aplicación de inicio localmente

Ahora que ha importado y configurado su proyecto, está listo para ejecutar la aplicación web por primera vez.

  1. En una consola desde la web-start de directorio, ejecute el siguiente comando CLI Firebase:
firebase serve --only hosting
  1. Su línea de comando debería mostrar la siguiente respuesta:
✔  hosting: Local server: http://localhost:5000

Estamos utilizando el alojamiento Firebase emulador para servir a nuestra aplicación localmente. La aplicación web debe estar disponible en http: // localhost: 5000 . Todos los archivos que se encuentran bajo el public subdirectorio se sirven.

  1. Con el navegador, abra su aplicación en http: // localhost: 5000 .

Debería ver la interfaz de usuario de su aplicación FriendlyChat, que no está funcionando (¡todavía!):

4c23f9475228cef4.png

La aplicación no puede hacer nada en este momento, ¡pero con su ayuda lo hará pronto! Hasta ahora, solo hemos diseñado la interfaz de usuario.

¡Construyamos ahora un chat en tiempo real!

6. Importa y configura Firebase

Importar el SDK de Firebase

Necesitamos importar el SDK de Firebase a la aplicación. Hay varias maneras de hacer esto como se describe en la documentación . Por ejemplo, puede importar la biblioteca desde nuestro CDN. O puede instalarlo localmente usando npm, luego empaquetarlo en su aplicación si está usando Browserify.

Vamos a obtener el SDK Firebase de NPM y utilizar webpack para empaquetar nuestro código. Estamos haciendo esto para que Webpack pueda eliminar cualquier código innecesario, manteniendo el tamaño de nuestro paquete JS pequeño para asegurarnos de que nuestra aplicación se cargue lo más rápido posible. Para este laboratorio de programación, que ya hemos creado una web-start/package.json archivo que incluye el SDK Firebase como dependencia, así como las funciones necesarias importados en la parte superior de la web-start/src/index.js .

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

Durante este laboratorio de código, usaremos Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging y Performance Monitoring, por lo que vamos a importar todas sus bibliotecas. En sus futuras aplicaciones, asegúrese de importar solo las partes de Firebase que necesita para acortar el tiempo de carga de su aplicación.

Instale el SDK de Firebase y comience su compilación de Webpack

Necesitamos ejecutar algunos comandos para que la compilación de nuestra aplicación funcione.

  1. Abra una nueva ventana de terminal
  2. Asegúrese de que está en la web-start de directorio
  3. Ejecutar npm install para descargar el SDK Firebase
  4. Ejecutar npm run start para poner en marcha webpack. Webpack ahora reconstruirá continuamente nuestro código fuente para el resto del codelab.

Configurar Firebase

También necesitamos configurar el SDK de Firebase para indicarle qué proyecto de Firebase estamos usando.

  1. Vaya a su configuración del proyecto en la consola Firebase
  2. En la tarjeta "Tus aplicaciones", selecciona el apodo de la aplicación para la que necesitas un objeto de configuración.
  3. Seleccione "Configuración" en el panel de fragmentos del SDK de Firebase.
  4. Copia el fragmento objeto de configuración, a continuación, agregarlo a web-start/src/firebase-config.js .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Ahora, vaya a la parte inferior de web-start/src/index.js y initialize Firebase:

index.js

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

7. Configurar el inicio de sesión del usuario

El SDK Firebase ahora debería estar listo para su uso ya que es importado y inicializado en index.html . Ahora vamos a poner en práctica el usuario de inicio de sesión utilizando la autenticación Firebase .

Autentica a tus usuarios con el inicio de sesión de Google

En la aplicación, cuando un usuario hace clic en el botón Iniciar sesión con Google, el signIn función se activa. (¡Ya lo configuramos para usted!) Para este laboratorio de código, queremos autorizar a Firebase a usar Google como proveedor de identidad. Vamos a utilizar una ventana emergente, pero varios otros métodos están disponibles en Firebase.

  1. En la web-start de directorio, en el subdirectorio src/ , abiertas index.js .
  2. Encuentra la función signIn .
  3. Reemplace toda la función con el siguiente código.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

El signOut función se activa cuando el usuario hace clic en el botón Cerrar sesión.

  1. Ir de nuevo al archivo src/index.js .
  2. Encuentra la función signOutUser .
  3. Reemplace toda la función con el siguiente código.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

Seguimiento del estado de autenticación

Para actualizar nuestra interfaz de usuario en consecuencia, necesitamos una forma de verificar si el usuario inició sesión o no. Con Firebase Authentication, puede registrar un observador en el estado de autenticación que se activará cada vez que cambie el estado de autenticación.

  1. Ir de nuevo al archivo src/index.js .
  2. Encuentra la función initFirebaseAuth .
  3. Reemplace toda la función con el siguiente código.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

El código registra la función authStateObserver como el observador de estado de autenticación. Se activará cada vez que cambie el estado de autenticación (cuando el usuario inicie sesión o cierre sesión). En este punto, actualizaremos la interfaz de usuario para mostrar u ocultar el botón de inicio de sesión, el botón de cierre de sesión, la imagen de perfil del usuario que inició sesión, etc. Todas estas partes de la interfaz de usuario ya se han implementado.

Mostrar la información del usuario que inició sesión

Queremos mostrar la imagen de perfil y el nombre de usuario del usuario que inició sesión en la barra superior de nuestra aplicación. En Firebase, el firmado en los datos del usuario siempre está disponible en el currentUser objeto. Anteriormente, hemos creado la authStateObserver función de gatillo cuando el usuario inicia sesión para que nuestros cambios de interfaz de usuario en consecuencia. Se llamará getProfilePicUrl y getUserName cuando se activa.

  1. Ir de nuevo al archivo src/index.js .
  2. Encuentra las funciones getProfilePicUrl y getUserName .
  3. Reemplace ambas funciones con el siguiente código.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

Mostramos un mensaje de error si el usuario intenta enviar mensajes cuando el usuario no ha iniciado sesión. (¡Sin embargo, puede intentarlo!) Por lo tanto, debemos detectar si el usuario realmente inició sesión.

  1. Ir de nuevo al archivo src/index.js .
  2. Encuentra la función isUserSignedIn .
  3. Reemplace toda la función con el siguiente código.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

Prueba de iniciar sesión en la aplicación

  1. Si su aplicación aún se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute firebase serve --only hosting en la línea de comandos para iniciar servicio de la aplicación desde http: // localhost: 5000 , y luego abrirlo en su navegador.
  2. Inicie sesión en la aplicación con el botón de inicio de sesión y su cuenta de Google. Si aparece un mensaje de error que indica auth/operation-not-allowed , comprobación para asegurarse de que ha habilitado Google Inicio de sesión como un proveedor de autenticación en la consola Firebase.
  3. Después de iniciar sesión, se debe mostrar su foto de perfil y nombre de usuario: c7401b3d44d0d78b.png

8. Escribe mensajes en Cloud Firestore

En esta sección, escribiremos algunos datos en Cloud Firestore para que podamos completar la interfaz de usuario de la aplicación. Esto se puede hacer manualmente con la consola Firebase , pero lo haremos en la propia aplicación para mostrar una escritura básica Nube Firestore.

Modelo de datos

Los datos de Cloud Firestore se dividen en colecciones, documentos, campos y subcolecciones. Vamos a almacenar cada mensaje de la charla como un documento en una colección de nivel superior llamado messages .

688d7bc5fb662b57.png

Agregar mensajes a Cloud Firestore

Para almacenar los mensajes de chat que se escriben los usuarios, vamos a utilizar la nube Firestore .

En esta sección, agregará la funcionalidad para que los usuarios escriban nuevos mensajes en su base de datos. Un usuario hace clic en el botón ENVIAR disparará el siguiente fragmento de código. Se añade un objeto de mensaje con el contenido de los campos del mensaje a la instancia de la nube en el Firestore messages colección. El add() método añade un nuevo documento con un ID generado automáticamente a la colección.

  1. Ir de nuevo al archivo src/index.js .
  2. Encuentra la función saveMessage .
  3. Reemplace toda la función con el siguiente código.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Prueba de envío de mensajes

  1. Si su aplicación aún se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute firebase serve --only hosting en la línea de comandos para iniciar servicio de la aplicación desde http: // localhost: 5000 , y luego abrirlo en su navegador.
  2. Después de iniciar sesión, introduzca un mensaje del tipo "Hola!" Y, a continuación, haga clic en ENVIAR. Esto escribirá el mensaje en Cloud Firestore. Sin embargo, aún no verá los datos en su aplicación web real, porque todavía tenemos que poner en práctica la recuperación de los datos (la siguiente sección del laboratorio de programación).
  3. Puedes ver el mensaje recién agregado en tu Firebase Console. Abre tu Firebase Console. En la sección Construir clic Firestore base de datos (o haga clic aquí y seleccione su proyecto) y debería ver la colección de mensajes con el mensaje que acaba de agregar:

6812efe7da395692.png

9. Leer mensajes

Sincronizar mensajes

Para leer mensajes en la aplicación, necesitaremos agregar oyentes que se activen cuando cambien los datos y luego crear un elemento de interfaz de usuario que muestre nuevos mensajes.

Agregaremos código que escuche los mensajes recién agregados desde la aplicación. En este código, registraremos el oyente que escucha los cambios realizados en los datos. Solo mostraremos los últimos 12 mensajes del chat para evitar mostrar un historial muy largo al cargar.

  1. Ir de nuevo al archivo src/index.js .
  2. Encontrar la función loadMessages .
  3. Reemplace toda la función con el siguiente código.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

Para escuchar los mensajes en la base de datos, se crea una consulta en una colección mediante la collection función para especificar que la colección de los datos que queremos escuchar es en. En el código anterior, estamos escuchando a los cambios dentro de los messages colección, que es donde se almacenan los mensajes de chat. También estamos aplicando un límite de sólo escuchar los 12 últimos mensajes usando .limit(12) y ordenar los mensajes por fecha utilizando orderBy('timestamp', 'desc') para obtener los 12 mensajes más recientes.

El onSnapshot función toma una consulta como primer parámetro, y una función de devolución de llamada como su segundo. La función de devolución de llamada se activará cuando haya cambios en los documentos que coincidan con la consulta. Esto podría ocurrir si un mensaje se elimina, modifica o agrega. Puede leer más sobre esto en la documentación de la nube Firestore .

Probar la sincronización de mensajes

  1. Si su aplicación aún se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute firebase serve --only hosting en la línea de comandos para iniciar servicio de la aplicación desde http: // localhost: 5000 , y luego abrirlo en su navegador.
  2. Los mensajes que creó anteriormente en la base de datos deben mostrarse en la interfaz de usuario de FriendlyChat (ver más abajo). Siéntete libre de escribir nuevos mensajes; deberían aparecer instantáneamente.
  3. (Opcional) Puede probar manualmente la supresión, modificación o adición de nuevos mensajes directamente en la sección Base de datos de la consola Firebase; cualquier cambio debe reflejarse en la interfaz de usuario.

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

2168dec79b573d07.png

10. Enviar imágenes

Ahora agregaremos una función que comparte imágenes.

Si bien Cloud Firestore es bueno para almacenar datos estructurados, Cloud Storage es más adecuado para almacenar archivos. Almacenamiento en la nube para Firebase es un servicio de almacenamiento de archivos / mancha, y lo usaremos para almacenar las imágenes que un usuario comparte el uso de nuestra aplicación.

Guardar imágenes en el almacenamiento en la nube

Para este laboratorio de código, ya hemos agregado un botón que activa un cuadro de diálogo de selector de archivos. Después de seleccionar un archivo, el saveImageMessage función es llamada, y se puede obtener una referencia al archivo seleccionado. El saveImageMessage función logra lo siguiente:

  1. Crea un mensaje de chat de "marcador de posición" en el feed de chat, para que los usuarios vean una animación de "Cargando" mientras cargamos la imagen.
  2. Carga el archivo de imagen para almacenamiento en la nube a esta ruta: /<uid>/<messageId>/<file_name>
  3. Genera una URL legible públicamente para el archivo de imagen.
  4. Actualiza el mensaje de chat con la URL del archivo de imagen recién subido en lugar de la imagen de carga temporal.

Ahora agregará la funcionalidad para enviar una imagen:

  1. Ir de nuevo al archivo src/index.js .
  2. Encuentra la función saveImageMessage .
  3. Reemplace toda la función con el siguiente código.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Prueba de envío de imágenes

  1. Si su aplicación aún se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute firebase serve --only hosting en la línea de comandos para iniciar servicio de la aplicación desde http: // localhost: 5000 , y luego abrirlo en su navegador.
  2. Después de iniciar sesión, haga clic en el botón de carga de la imagen 13734cb66773e5a3.png y seleccione un archivo de imagen con el selector de archivos. Si usted está buscando una imagen, no dude en utilizar esta bonita imagen de una taza de café .
  3. Debería aparecer un nuevo mensaje en la interfaz de usuario de la aplicación con la imagen seleccionada: 3b1284f5144b54f6.png

Si intenta agregar una imagen sin iniciar sesión, debería ver una notificación de Toast que le indica que debe iniciar sesión para agregar imágenes.

11. Mostrar notificaciones

Ahora agregaremos soporte para notificaciones del navegador. La aplicación notificará a los usuarios cuando se publiquen nuevos mensajes en el chat. Firebase mensajería en la nube (FCM) es una solución de mensajería multiplataforma que le permite entregar de forma fiable mensajes y notificaciones sin costo alguno.

Agregar el trabajador del servicio de FCM

La aplicación web necesita un trabajador del servicio que va a recibir notificaciones y pantalla web.

  1. Desde la web-start de directorio, en el src directorio, abierta firebase-messaging-sw.js .
  2. Agregue el siguiente contenido a ese archivo.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

El trabajador del servicio simplemente necesita cargar e inicializar el SDK de Firebase Cloud Messaging, que se encargará de mostrar las notificaciones.

Obtén tokens de dispositivo de FCM

Cuando las notificaciones se han habilitado en un dispositivo o navegador, se le dará un dispositivo token. Este token de dispositivo es lo que usamos para enviar una notificación a un dispositivo o navegador en particular.

Cuando los signos-en el usuario, que llamamos el saveMessagingDeviceToken función. Ahí es donde vamos a llegar el dispositivo token de la FCM navegador y guardarlo en la nube Firestore.

  1. Ir de nuevo al archivo src/index.js .
  2. Encuentra la función saveMessagingDeviceToken .
  3. Reemplace toda la función con el siguiente código.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

Sin embargo, este código no funcionará inicialmente. Para que su aplicación pueda recuperar el token del dispositivo, el usuario debe otorgarle permiso a su aplicación para mostrar notificaciones (siguiente paso del laboratorio de código).

Solicitar permisos para mostrar notificaciones

Cuando el usuario aún no le ha otorgado permiso a su aplicación para mostrar notificaciones, no se le dará un token de dispositivo. En este caso, llamamos a la firebase.messaging().requestPermission() método, que mostrará un cuadro de diálogo del navegador solicitando este permiso ( en los navegadores compatibles ).

8b9d0c66dc36153d.png

  1. Ir de nuevo al archivo src/index.js .
  2. Encontrar la función requestNotificationsPermissions .
  3. Reemplace toda la función con el siguiente código.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Obtén el token de tu dispositivo

  1. Si su aplicación aún se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute firebase serve --only hosting en la línea de comandos para iniciar servicio de la aplicación desde http: // localhost: 5000 , y luego abrirlo en su navegador.
  2. Después de iniciar sesión, debería aparecer el cuadro de diálogo de permisos de notificaciones: bd3454e6dbfb6723.png
  3. Haga clic en Permitir.
  4. Abra la consola JavaScript de su navegador. Debería ver el siguiente mensaje: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Copie el token de su dispositivo. Lo necesitará para la siguiente etapa del laboratorio de código.

Envía una notificación a tu dispositivo

Ahora que tiene el token de su dispositivo, puede enviar una notificación.

  1. Abrir la pestaña de mensajería en la nube de la consola Firebase .
  2. Haga clic en "Nueva notificación"
  3. Ingrese un título de notificación y un texto de notificación.
  4. En el lado derecho de la pantalla, haga clic en "enviar un mensaje de prueba"
  5. Ingrese el token de dispositivo que copió desde la consola JavaScript de su navegador, luego haga clic en el signo más ("+")
  6. Haga clic en "prueba"

Si su aplicación está en primer plano, verá la notificación en la consola de JavaScript.

Si su aplicación está en segundo plano, debería aparecer una notificación en su navegador, como en este ejemplo:

de79e8638a45864c.png

12. Reglas de seguridad de Cloud Firestore

Ver las reglas de seguridad de base de datos

Nube Firestore utiliza un determinado lenguaje de reglas para definir los derechos de acceso, seguridad y validaciones de datos.

Al configurar el proyecto de Firebase al comienzo de este laboratorio de código, elegimos usar las reglas de seguridad predeterminadas del "Modo de prueba" para no restringir el acceso al almacén de datos. En la consola de Firebase , en la ficha Reglas de la sección de base de datos, se puede ver y modificar estas reglas.

En este momento, debería ver las reglas predeterminadas, que no restringen el acceso al almacén de datos. Esto significa que cualquier usuario puede leer y escribir en cualquier colección de su almacén de datos.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Actualizaremos las reglas para restringir cosas usando las siguientes reglas:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Actualizar las reglas de seguridad de la base de datos

Hay dos formas de editar las reglas de seguridad de tu base de datos, ya sea en Firebase console o desde un archivo de reglas local implementado con Firebase CLI.

Para actualizar las reglas de seguridad en Firebase console:

  1. Ir a la sección de base de datos desde el panel izquierdo y, a continuación, haga clic en la ficha Reglas.
  2. Reemplace las reglas predeterminadas que ya están en la consola con las reglas que se muestran arriba.
  3. Haga clic en Publicar.

Para actualizar las reglas de seguridad desde un archivo local:

  1. Desde la web-start de directorio, abierto firestore.rules .
  2. Reemplace las reglas predeterminadas que ya están en el archivo con las reglas que se muestran arriba.
  3. Desde la web-start de directorio, abierta firebase.json .
  4. Añadir los firestore.rules atribuyen señalando firestore.rules , como se muestra a continuación. (El hosting atributo ya debe estar en el archivo.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Implemente las reglas de seguridad con Firebase CLI ejecutando el siguiente comando:
firebase deploy --only firestore
  1. Su línea de comando debería mostrar la siguiente respuesta:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. Reglas de seguridad de Cloud Storage

Ver las reglas de seguridad de Cloud Storage

Almacenamiento en la nube para Firebase utiliza un determinado lenguaje de reglas para definir los derechos de acceso, seguridad y validaciones de datos.

Al configurar el proyecto de Firebase al comienzo de este laboratorio de código, elegimos usar la regla de seguridad predeterminada de Cloud Storage que solo permite a los usuarios autenticados usar Cloud Storage. En la consola de Firebase , en la ficha Reglas de la sección de almacenamiento, puede ver y modificar las reglas. Debería ver la regla predeterminada que permite a cualquier usuario que haya iniciado sesión leer y escribir cualquier archivo en su depósito de almacenamiento.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Actualizaremos las reglas para hacer lo siguiente:

  • Permita que cada usuario escriba solo en sus propias carpetas específicas
  • Permitir que cualquiera lea desde Cloud Storage
  • Asegúrese de que los archivos cargados sean imágenes
  • Restrinja el tamaño de las imágenes que se pueden cargar a un máximo de 5 MB

Esto se puede implementar usando las siguientes reglas:

reglas de almacenamiento

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Actualizar las reglas de seguridad de Cloud Storage

Hay dos formas de editar las reglas de seguridad de almacenamiento: ya sea en Firebase console o desde un archivo de reglas local implementado con Firebase CLI.

Para actualizar las reglas de seguridad en Firebase console:

  1. Vaya a la sección de almacenamiento en el panel izquierdo y, a continuación, haga clic en la ficha Reglas.
  2. Reemplace la regla predeterminada que ya está en la consola con las reglas que se muestran arriba.
  3. Haga clic en Publicar.

Para actualizar las reglas de seguridad desde un archivo local:

  1. Desde la web-start de directorio, abierto storage.rules .
  2. Reemplace las reglas predeterminadas que ya están en el archivo con las reglas que se muestran arriba.
  3. Desde la web-start de directorio, abierta firebase.json .
  4. Añadir los storage.rules atribuyen apuntando a la storage.rules archivo, como se muestra a continuación. (El hosting y la database atributo ya debe estar en el archivo.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Implemente las reglas de seguridad con Firebase CLI ejecutando el siguiente comando:
firebase deploy --only storage
  1. Su línea de comando debería mostrar la siguiente respuesta:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. Recopilar datos de desempeño

Puede usar el SDK de Performance Monitoring para recopilar datos de rendimiento del mundo real de su aplicación y luego revisar y analizar esos datos en Firebase console. Performance Monitoring te ayuda a comprender dónde y cuándo se puede mejorar el rendimiento de tu aplicación para que puedas usar esa información para solucionar problemas de rendimiento.

Hay varias formas de integrarse con el SDK de JavaScript de Firebase Performance Monitoring. En este laboratorio de programación, hemos habilitado Supervisión del rendimiento de las URL de alojamiento. Consulte la documentación para ver otros métodos que permitan el SDK.

Rastreos automáticos

Puesto que ya importamos getPerformance en la parte superior de la web-start/src/index.js , sólo tenemos que añadir una línea para decirle Supervisión del rendimiento de carga de la página de forma automática a cobro revertido y métrica de petición de red para que cuando los usuarios visitan su sitio desplegado!

  1. En web-start/src/index.js , añada la siguiente línea debajo de la existente TODO para inicializar supervisión de rendimiento.

index.js

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

Medir el retardo de la primera entrada (opcional)

Retraso primera entrada es útil, ya que el navegador en respuesta a una interacción con el usuario da a sus usuarios de sus primeras impresiones acerca de la capacidad de respuesta de la aplicación.

La primera demora de entrada comienza cuando el usuario interactúa por primera vez con un elemento de la página, como hacer clic en un botón o hipervínculo. Se detiene inmediatamente después de que el navegador puede responder a la entrada, lo que significa que el navegador no está ocupado cargando o analizando el contenido de su página.

Si desea medir el retraso de la primera entrada, deberá incluir el siguiente código directamente.

  1. Abrir public/index.html .
  2. Elimine el comentario de script la etiqueta en la siguiente línea.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Para leer más sobre la primera polyfill retardo de entrada, echar un vistazo a la documentación .

Ver datos de rendimiento

Dado que aún no ha implementado su sitio (lo implementará en el siguiente paso), aquí hay una captura de pantalla que muestra las métricas sobre el rendimiento de carga de la página que verá en la consola de Firebase dentro de los 30 minutos posteriores a la interacción de los usuarios con su sitio implementado. :

29389131150f33d7.png

Cuando integra el SDK de Performance Monitoring en su aplicación, no necesita escribir ningún otro código antes de que su aplicación comience a monitorear automáticamente varios aspectos críticos del rendimiento. Para las aplicaciones web, el SDK registra aspectos como la primera pintura con contenido, la capacidad de los usuarios para interactuar con su aplicación y más.

También puede configurar seguimientos, métricas y atributos personalizados para medir aspectos específicos de su aplicación. Visita la documentación para aprender más sobre los rastros y métricas personalizadas y atributos personalizados .

15. Implemente su aplicación con Firebase Hosting

Ofertas firebase un servicio de alojamiento para servir a sus activos y aplicaciones web. Puedes implementar tus archivos en Firebase Hosting usando Firebase CLI. Antes de implementar, es necesario especificar en su firebase.json archivo de los archivos locales deben desplegarse. Para este codelab, ya lo hemos hecho por usted porque este paso fue necesario para entregar nuestros archivos durante este codelab. Los ajustes de alojamiento se especifican en el hosting de atributos:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Estos valores indican la CLI que queremos desplegar todos los archivos del ./public directorio ( "public": "./public" ).

  1. Asegúrese de que su línea de comandos está accediendo local de su aplicación web-start de directorio.
  2. Implementa tus archivos en tu proyecto de Firebase ejecutando el siguiente comando:
firebase deploy --except functions
  1. La consola debería mostrar lo siguiente:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Visite su aplicación web que ahora está completamente alojada en una CDN global usando Firebase Hosting en dos de sus propios subdominios de Firebase:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Como alternativa, puede ejecutar firebase open hosting:site en la línea de comandos.

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

Ir a la sección de alojamiento de la consola Firebase de su proyecto para ver la información y las herramientas de alojamiento de utilidad, incluyendo el historial de sus despliega, la funcionalidad para volver a rodar las versiones anteriores de la aplicación, y el flujo de trabajo para configurar un dominio personalizado.

16. ¡Felicitaciones!

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

Lo que hemos cubierto

  • Autenticación de Firebase
  • Cloud Firestore
  • SDK de Firebase para Cloud Storage
  • Mensajería en la nube de Firebase
  • Supervisión del rendimiento de Firebase
  • Alojamiento de Firebase

Próximos pasos

Learn more