Enviar notificaciones para una aplicación web usando Cloud Messaging y Cloud Functions

1. Información general

En este codelab, aprenderá cómo usar Cloud Functions para Firebase para agregar funcionalidad a una aplicación web de chat mediante el envío de notificaciones a los usuarios de la aplicación de chat.

3b1284f5144b54f6.png

lo que aprenderás

  • Cree funciones de Google Cloud utilizando el SDK de Firebase.
  • Active funciones en la nube basadas en eventos de autenticación, almacenamiento en la nube y Cloud Firestore.
  • Agregue compatibilidad con Firebase Cloud Messaging a su aplicación web.

Lo que necesitarás

  • Una tarjeta de crédito. Cloud Functions para Firebase requiere el plan Firebase Blaze, lo que significa que deberá habilitar la facturación en su proyecto de Firebase mediante una tarjeta de crédito.
  • El IDE/editor de texto de su elección, como WebStorm , Atom o Sublime .
  • Una terminal para ejecutar comandos de shell con NodeJS v9 instalado.
  • Un navegador como Chrome.
  • El código de muestra. Vea el siguiente paso para esto.

2. Obtenga el código de muestra

Clona el repositorio de GitHub desde la línea de comando:

git clone https://github.com/firebase/friendlychat

Importar la aplicación de inicio

Usando su IDE, abra o importe el android_studio_folder.png directorio cloud-functions-start del directorio de código de muestra. Este directorio contiene el código inicial para el codelab, que consta de una aplicación web Chat completamente funcional.

3. Crea un proyecto de Firebase y configura tu aplicación

Crear proyecto

En Firebase Console , haga clic en Agregar proyecto y llámelo FriendlyChat .

Haga clic en Crear proyecto .

Actualiza al plan Blaze

Para utilizar Cloud Functions para Firebase, deberá actualizar su proyecto de Firebase al plan de facturación Blaze . Esto requerirá que agregue una tarjeta de crédito u otro instrumento de facturación a su cuenta de Google Cloud.

Todos los proyectos de Firebase, incluidos los del plan Blaze, aún tienen acceso a las cuotas de uso gratuitas de Cloud Functions. Los pasos descritos en este codelab estarán dentro de los límites de uso de la capa gratuita. Sin embargo, verá pequeños cargos ( alrededor de $0,03 ) de Cloud Storage que se utiliza para alojar sus imágenes de compilación de Cloud Functions.

Si no tiene acceso a una tarjeta de crédito o no se siente cómodo al continuar con el plan Blaze, considere usar Firebase Emulator Suite , que le permitirá emular Cloud Functions de forma gratuita en su máquina local.

Habilitar la autenticación de Google

Para permitir que los usuarios inicien sesión en la aplicación, usaremos la autenticación de Google, que debe estar habilitada.

En Firebase Console, abra la sección Compilación > Autenticación > pestaña Método de inicio de sesión (o haga clic aquí para ir allí). Luego, habilite el proveedor de inicio de sesión de Google y haga clic en Guardar . Esto permitirá a los usuarios iniciar sesión en la aplicación web con sus cuentas de Google.

Además, siéntete libre de configurar el nombre público de tu aplicación en Friendly Chat :

8290061806aacb46.png

Habilitar almacenamiento en la nube

La aplicación utiliza Cloud Storage para cargar imágenes. Para habilitar Cloud Storage en su proyecto de Firebase, visite la sección Almacenamiento y haga clic en el botón Comenzar . Siga los pasos allí y, para la ubicación de Cloud Storage, habrá un valor predeterminado para usar. Haga clic en Listo después.

Agregar una aplicación web

En Firebase Console, agregue una aplicación web. Para hacerlo, vaya a Configuración del proyecto y desplácese hacia abajo hasta Agregar aplicación . Elija web como plataforma y marque la casilla para configurar Firebase Hosting, luego registre la aplicación y haga clic en Siguiente para el resto de los pasos, y finalmente haga clic en Continuar a la consola .

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

La interfaz de línea de comandos (CLI) de Firebase le permitirá servir la aplicación web localmente e implementar su aplicación web y funciones en la nube.

Para instalar o actualizar la CLI, ejecute el siguiente comando npm:

npm -g install firebase-tools

Para verificar que la CLI se haya instalado correctamente, abra una consola y ejecute:

firebase --version

Asegúrese de que la versión de Firebase CLI sea superior a 4.0.0 para que tenga todas las funciones más recientes necesarias para Cloud Functions. De lo contrario, ejecute npm install -g firebase-tools para actualizar como se muestra arriba.

Autorice Firebase CLI ejecutando:

firebase login

Asegúrese de estar en el directorio cloud-functions-start , luego configure Firebase CLI para usar su proyecto Firebase:

firebase use --add

A continuación, seleccione su ID de proyecto y siga las instrucciones. Cuando se le solicite, puede elegir cualquier alias, como codelab .

5. Implemente y ejecute la aplicación web.

Ahora que ha importado y configurado su proyecto, ¡está listo para ejecutar la aplicación web por primera vez! Abra una ventana de terminal, navegue hasta la carpeta cloud-functions-start e implemente la aplicación web en el hosting de Firebase usando:

firebase deploy --except functions

Esta es la salida de la consola que deberías ver:

i deploying database, storage, hosting
✔  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
✔  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
✔  hosting: ./ folder uploaded successfully
✔ storage: rules file compiled successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

✔ Deploy complete!

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

Abra la aplicación web

La última línea debe mostrar la URL de alojamiento. La aplicación web ahora debería entregarse desde esta URL, que debe tener el formato https://<project-id>.firebaseapp.com. Abrelo. Deberías ver la interfaz de usuario en funcionamiento de una aplicación de chat.

Inicie sesión en la aplicación utilizando el botón INICIAR SESIÓN CON GOOGLE y siéntase libre de agregar algunos mensajes y publicar imágenes:

3b1284f5144b54f6.png

Si inicia sesión en la aplicación por primera vez en un navegador nuevo, asegúrese de permitir notificaciones cuando se le solicite: 8b9d0c66dc36153d.png

Necesitaremos habilitar las notificaciones más adelante.

Si accidentalmente hizo clic en Bloquear , puede cambiar esta configuración haciendo clic en el botón 🔒 Seguro a la izquierda de la URL en Chrome Omnibar y alternando la barra junto a Notificaciones :

e926868b0546ed71.png

Ahora, agregaremos algunas funciones utilizando el SDK de Firebase para funciones en la nube.

6. El directorio de funciones

Cloud Functions le permite tener fácilmente código que se ejecuta en la nube sin tener que configurar un servidor. Explicaremos cómo crear funciones que reaccionen a los eventos de bases de datos de Firebase Auth, Cloud Storage y Firebase Firestore. Comencemos con la autenticación.

Cuando utilice el SDK de Firebase para Cloud Functions, su código de Functions residirá en el directorio functions (de forma predeterminada). Su código de Functions también es una aplicación Node.js y, por lo tanto, necesita un package.json que brinde información sobre su aplicación y enumere las dependencias.

Para ponértelo más fácil, ya hemos creado el archivo functions/index.js donde irá tu código. No dude en inspeccionar este archivo antes de seguir adelante.

cd functions
ls

Si no está familiarizado con Node.js , sería útil obtener más información antes de continuar con el codelab.

El archivo package.json ya enumera dos dependencias requeridas: Firebase SDK para Cloud Functions y Firebase Admin SDK . Para instalarlos localmente, vaya a la carpeta functions y ejecute:

npm install

Ahora echemos un vistazo al archivo index.js :

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Importaremos los módulos necesarios y luego escribiremos tres funciones en lugar de los TODO. Comencemos importando los módulos de Node necesarios.

7. Importe los módulos Cloud Functions y Firebase Admin

Se necesitarán dos módulos durante este codelab: firebase-functions permite escribir activadores y registros de Cloud Functions, mientras que firebase-admin permite usar la plataforma Firebase en un servidor con acceso de administrador para realizar acciones como escribir en Cloud Firestore o enviar notificaciones de FCM.

En el archivo index.js , reemplace el primer TODO con lo siguiente:

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

El SDK de Firebase Admin se puede configurar automáticamente cuando se implementa en un entorno de Cloud Functions u otros contenedores de Google Cloud Platform, y esto sucede cuando llamamos a admin.initializeApp() sin argumentos.

Ahora, agreguemos una función que se ejecuta cuando un usuario inicia sesión por primera vez en la aplicación de chat y agregaremos un mensaje de chat para darle la bienvenida al usuario.

8. Dar la bienvenida a nuevos usuarios

Estructura de mensajes de chat

Los mensajes publicados en el feed de chat de FriendlyChat se almacenan en Cloud Firestore. Echemos un vistazo a la estructura de datos que utilizamos para un mensaje. Para hacer esto, publique un nuevo mensaje en el chat que diga "Hola mundo":

11f5a676fbb1a69a.png

Esto debería aparecer como:

fe6d1c020d0744cf.png

En Firebase Console, haga clic en Firestore Database en la sección Construir . Deberías ver la colección de mensajes y un documento que contiene el mensaje que escribiste:

442c9c10b5e2b245.png

Como puede ver, los mensajes de chat se almacenan en Cloud Firestore como un documento con atributos name , profilePicUrl , text y timestamp agregados a la colección messages .

Agregar mensajes de bienvenida

La primera función de la nube agrega un mensaje que da la bienvenida a los nuevos usuarios al chat. Para esto, podemos usar el activador functions.auth().onCreate , que ejecuta la función cada vez que un usuario inicia sesión por primera vez en la aplicación Firebase. Agregue la función addWelcomeMessages a su archivo index.js :

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

Agregar esta función al objeto exports especiales es la forma en que Node hace que la función sea accesible fuera del archivo actual y es necesario para Cloud Functions.

En la función anterior, agregamos un nuevo mensaje de bienvenida publicado por "Firebase Bot" a la lista de mensajes de chat. Hacemos esto usando el método add en la colección messages en Cloud Firestore, que es donde se almacenan los mensajes del chat.

Dado que se trata de una operación asincrónica, debemos devolver la Promesa que indica cuándo Cloud Firestore ha terminado de escribir para que Cloud Functions no se ejecute demasiado pronto.

Implementar funciones en la nube

Las Cloud Functions solo estarán activas después de que las hayas implementado. Para hacerlo, ejecute esto en la línea de comando:

firebase deploy --only functions

Esta es la salida de la consola que deberías ver:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
✔  functions[addWelcomeMessages]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

Probar la función

Una vez que la función se haya implementado correctamente, necesitará un usuario que inicie sesión por primera vez.

  1. Abra su aplicación en su navegador usando la URL de alojamiento (en el formato https://<project-id>.firebaseapp.com ).
  2. Con un nuevo usuario, inicie sesión por primera vez en su aplicación usando el botón Iniciar sesión .

262535d1b1223c65.png

  1. Después de iniciar sesión, debería aparecer automáticamente un mensaje de bienvenida:

1c70e0d64b23525b.png

9. Moderación de imágenes

Los usuarios pueden subir todo tipo de imágenes en el chat y siempre es importante moderar las imágenes ofensivas, especialmente en las plataformas sociales públicas. En FriendlyChat, las imágenes que se publican en el chat se almacenan en Google Cloud Storage .

Con Cloud Functions, puede detectar nuevas cargas de imágenes utilizando el activador functions.storage().onFinalize . Esto se ejecutará cada vez que se cargue o modifique un nuevo archivo en Cloud Storage.

Para moderar imágenes, seguiremos el siguiente proceso:

  1. Compruebe si la imagen está marcada como Adulta o Violenta mediante la API de Cloud Vision .
  2. Si la imagen ha sido marcada, descárguela en la instancia de Functions en ejecución.
  3. Desenfoca la imagen usando ImageMagick .
  4. Sube la imagen borrosa a Cloud Storage.

Habilite la API de Cloud Vision

Dado que usaremos la API de Google Cloud Vision en esta función, debes habilitar la API en tu proyecto de Firebase. Siga este enlace , luego seleccione su proyecto de Firebase y habilite la API:

5c77fee51ec5de49.png

Instalar dependencias

Para moderar imágenes, usaremos la biblioteca cliente de Google Cloud Vision para Node.js, @google-cloud/vision , para ejecutar imágenes a través de la API de Cloud Vision para detectar imágenes inapropiadas.

Para instalar este paquete en su aplicación Cloud Functions, ejecute el siguiente comando npm install --save . Asegúrese de hacer esto desde el directorio functions .

npm install --save @google-cloud/vision@2.4.0

Esto instalará el paquete localmente y lo agregará como una dependencia declarada en su archivo package.json .

Importar y configurar dependencias

Para importar las dependencias que se instalaron y algunos módulos principales de Node.js ( path , os y fs ) que necesitaremos en esta sección, agregue las siguientes líneas en la parte superior de su archivo index.js :

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

const path = require('path');
const os = require('os');
const fs = require('fs');

Dado que su función se ejecutará dentro de un entorno de Google Cloud, no es necesario configurar las bibliotecas Cloud Storage y Cloud Vision: se configurarán automáticamente para usar su proyecto.

Detectar imágenes inapropiadas

Utilizará el activador de funciones de nube functions.storage.onChange , que ejecuta su código tan pronto como se crea o modifica un archivo o carpeta en un depósito de Cloud Storage. Agregue la función blurOffensiveImages a su archivo index.js :

index.js

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const imageUri = `gs://${object.bucket}/${object.name}`;
      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(imageUri);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.protos.google.cloud.vision.v1.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        functions.logger.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      functions.logger.log('The image', object.name, 'has been detected as OK.');
    });

Tenga en cuenta que agregamos alguna configuración de la instancia de Cloud Functions que ejecutará la función. Con .runWith({memory: '2GB'}) , solicitamos que la instancia obtenga 2 GB de memoria en lugar del valor predeterminado, porque esta función consume mucha memoria.

Cuando se activa la función, la imagen se ejecuta a través de la API de Cloud Vision para detectar si está marcada como adulta o violenta. Si la imagen se detecta como inapropiada según estos criterios, la desenfocamos, lo cual se hace en la función blurImage , como veremos a continuación.

Desenfocando la imagen

Agregue la siguiente función blurImage en su archivo index.js :

index.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

En la función anterior, la imagen binaria se descarga desde Cloud Storage. Luego, la imagen se difumina utilizando la herramienta convert de ImageMagick y la versión difuminada se vuelve a cargar en el depósito de almacenamiento. A continuación, eliminamos el archivo en la instancia de Cloud Functions para liberar algo de espacio en el disco, y lo hacemos porque la misma instancia de Cloud Functions se puede reutilizar y, si los archivos no se limpian, podría quedarse sin espacio en el disco. Finalmente, agregamos un valor booleano al mensaje de chat que indica que la imagen fue moderada y esto activará una actualización del mensaje en el cliente.

Implementar la función

La función solo estará activa después de que la hayas implementado. En la línea de comando, ejecute firebase deploy --only functions :

firebase deploy --only functions

Esta es la salida de la consola que deberías ver:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

Probar la función

Una vez que la función se haya implementado correctamente:

  1. Abra su aplicación en su navegador usando la URL de alojamiento (en el formato https://<project-id>.firebaseapp.com ).
  2. Una vez que haya iniciado sesión en la aplicación, cargue una imagen: 4db9fdab56703e4a.png
  3. Elige tu mejor imagen ofensiva para subir (¡o puedes usar este zombi carnívoro !) y después de unos momentos, deberías ver tu publicación actualizarse con una versión borrosa de la imagen: 83dd904fbaf97d2b.png

10. Notificaciones de mensajes nuevos

En esta sección, agregará una función en la nube que envía notificaciones a los participantes del chat cuando se publica un nuevo mensaje.

Con Firebase Cloud Messaging (FCM), puede enviar notificaciones de manera confiable a usuarios en todas las plataformas. Para enviar una notificación a un usuario, necesita el token de su dispositivo FCM. La aplicación web de chat que estamos utilizando ya recopila tokens de dispositivo de los usuarios cuando abren la aplicación por primera vez en un nuevo navegador o dispositivo. Estos tokens se almacenan en Cloud Firestore en la colección fcmTokens .

Si desea aprender cómo obtener tokens de dispositivos FCM en una aplicación web, puede consultar Firebase Web Codelab .

Enviar notificaciones

Para detectar cuándo se publican nuevos mensajes, utilizará el activador functions.firestore.document().onCreate Cloud Functions, que ejecuta su código cuando se crea un nuevo objeto en una ruta determinada de Cloud Firestore. Agregue la función sendNotifications a su archivo index.js :

index.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

En la función anterior, recopilamos los tokens de dispositivos de todos los usuarios de la base de datos de Cloud Firestore y enviamos una notificación a cada uno de ellos mediante la función admin.messaging().sendToDevice .

Limpiar las fichas

Por último, queremos eliminar los tokens que ya no son válidos. Esto sucede cuando el navegador o el dispositivo ya no utiliza el token que alguna vez obtuvimos del usuario. Por ejemplo, esto sucede si el usuario ha revocado el permiso de notificación para la sesión del navegador. Para hacer esto, agregue la siguiente función cleanupTokens en su archivo index.js :

index.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     functions.logger.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens that are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

Implementar la función

La función solo estará activa después de que la hayas implementado y, para implementarla, ejecuta esto en la línea de comando:

firebase deploy --only functions

Esta es la salida de la consola que deberías ver:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful updating operation.
✔  functions[sendNotifications]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

Probar la función

  1. Una vez que la función se haya implementado correctamente, abra su aplicación en su navegador usando la URL de alojamiento (en el formato https://<project-id>.firebaseapp.com ).
  2. Si inicia sesión en la aplicación por primera vez, asegúrese de permitir notificaciones cuando se le solicite: 8b9d0c66dc36153d.png
  3. Cierre la pestaña de la aplicación de chat o muestre una pestaña diferente: las notificaciones aparecen solo si la aplicación está en segundo plano. Si desea saber cómo recibir mensajes mientras su aplicación está en primer plano, consulte nuestra documentación .
  4. Usando un navegador diferente (o una ventana de incógnito), inicie sesión en la aplicación y publique un mensaje. Deberías ver una notificación mostrada por el primer navegador: 45282ab12b28b926.png

11. ¡Felicitaciones!

Usó el SDK de Firebase para Cloud Functions y agregó componentes del lado del servidor a una aplicación de chat.

Lo que hemos cubierto

  • Creación de Cloud Functions utilizando el SDK de Firebase para Cloud Functions.
  • Active funciones en la nube basadas en eventos de autenticación, almacenamiento en la nube y Cloud Firestore.
  • Agregue compatibilidad con Firebase Cloud Messaging a su aplicación web.
  • Implemente Cloud Functions mediante Firebase CLI.

Próximos pasos

Aprende más