Envíe notificaciones para una aplicación web usando Cloud Messaging y Cloud Functions

1. Información general

En este laboratorio de código, aprenderá a 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 con el SDK de Firebase.
  • Active Cloud Functions en función de los eventos Auth, Cloud Storage 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 con 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 carpeta_estudio_de_android.png directorio cloud-functions-start desde el directorio de código de muestra. Este directorio contiene el código inicial para el laboratorio de código que consiste en una aplicación web de chat completamente funcional.

3. Cree un proyecto de Firebase y configure su aplicación

Crear proyecto

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

Haga clic en Crear proyecto .

Actualizar al plan Blaze

Para usar Cloud Functions para Firebase, deberá actualizar su proyecto de Firebase al plan de facturación de 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 laboratorio de código estarán dentro de los límites de uso del nivel gratuito. 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 con 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 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 Generar > 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 almacenamiento en la nube, 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, finalmente haga clic en Continuar a la consola .

4. Instalar 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 requeridas 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úrate de estar en el directorio cloud-functions-start , luego configura la CLI de Firebase para usar tu proyecto de 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 a la carpeta cloud-functions-start e implemente la aplicación web en el alojamiento 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

Abre la aplicación web

La última línea debe mostrar la URL de alojamiento. La aplicación web ahora debe servirse desde esta URL, que debe tener el formato https://<project-id>.firebaseapp.com. Abrelo. Debería 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 las notificaciones cuando se le solicite: 8b9d0c66dc36153d.png

Tendremos que habilitar las notificaciones en un momento posterior.

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 mediante el SDK de Firebase para Cloud Functions.

6. El directorio de funciones

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

Cuando utilice el SDK de Firebase para Cloud Functions, su código de funciones se ubicará en el directorio functions (de manera predeterminada). Su código de funciones 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 facilitarle las cosas, ya hemos creado el archivo functions/index.js donde irá su código. Siéntase libre de 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 al respecto antes de continuar con el laboratorio de código.

El archivo package.json ya enumera dos dependencias requeridas: Firebase SDK for 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 :

índice.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 requeridos y luego escribiremos tres funciones en lugar de TODO. Comencemos con la importación de los módulos de Nodo requeridos.

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

Se requerirán dos módulos durante este laboratorio de código: 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:

índice.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 ejecute cuando un usuario inicie sesión por primera vez en la aplicación de chat y agregaremos un mensaje de chat para darle la bienvenida.

8. Dar la bienvenida a nuevos usuarios

Estructura de los mensajes de chat

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

11f5a676fbb1a69a.png

Esto debería aparecer como:

fe6d1c020d0744cf.png

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

442c9c10b5e2b245.png

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

Adición de mensajes de bienvenida

La primera Cloud Function 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 en su archivo index.js :

índice.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 necesaria 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. Estamos haciendo 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 asíncrona, 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

Cloud Functions solo estará activo 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, deberá tener un usuario que inicie sesión por primera vez.

  1. Abra su aplicación en su navegador utilizando la URL de alojamiento (en forma de 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 .
  • Si ya inició sesión en la aplicación, puede abrir Firebase Console Authentication y eliminar su cuenta de la lista de usuarios. Luego, vuelva a iniciar sesión.

262535d1b1223c65.png

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

1c70e0d64b23525b.png

9. Moderación de imágenes

Los usuarios pueden cargar 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 mediante el activador functions.storage().onFinalize . Esto se ejecutará cada vez que se cargue o modifique un archivo nuevo en Cloud Storage.

Para moderar imágenes, seguiremos el siguiente proceso:

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

Habilitar la API de Cloud Vision

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

5c77fee51ec5de49.png

Instalar dependencias

Para moderar las 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 centrales 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 :

índice.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.

Detección de imágenes inapropiadas

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

índice.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 de la predeterminada, 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, estamos desenfocando la imagen, lo que se hace en la función blurImage como veremos a continuación.

Borrando la imagen

Agrega la siguiente función blurImage en tu archivo index.js :

índice.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, el binario de la imagen se descarga desde Cloud Storage. Luego, la imagen se desenfoca con la herramienta convert de ImageMagick y la versión desenfocada 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 puede reutilizarse 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 haya implementado. En la línea de comando, ejecuta 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 con éxito:

  1. Abra su aplicación en su navegador utilizando la URL de alojamiento (en forma de https://<project-id>.firebaseapp.com ).
  2. Una vez que haya iniciado sesión en la aplicación, cargue una imagen: 4db9fdab56703e4a.png
  3. Elija su mejor imagen ofensiva para cargar (¡o puede usar este zombi carnívoro !) y después de unos momentos, debería ver que su publicación se actualiza 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 los usuarios en todas las plataformas. Para enviar una notificación a un usuario, necesita su token de 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 obtener información sobre cómo obtener tokens de dispositivo FCM en una aplicación web, puede visitar Firebase Web Codelab .

Enviar notificaciones

Para detectar cuándo se publican nuevos mensajes, usará 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 en su archivo index.js :

índice.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 todos los tokens de dispositivos de 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 utilizan el token que una vez recibimos 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 :

índice.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 comandos:

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 utilizando la URL de alojamiento (en forma de https://<project-id>.firebaseapp.com ).
  2. Si inicia sesión en la aplicación por primera vez, asegúrese de permitir las 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 obtener información sobre 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ía 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 con el SDK de Firebase para Cloud Functions.
  • Active Cloud Functions en función de los eventos Auth, Cloud Storage y Cloud Firestore.
  • Agregue compatibilidad con Firebase Cloud Messaging a su aplicación web.
  • Implementa Cloud Functions con Firebase CLI.

Próximos pasos

Aprende más