Se usó la API de Cloud Translation para traducir esta página.

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.

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 comandos:

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

Importar la aplicación de inicio

Usando su IDE, abra o importe el 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éntase libre de configurar el nombre público de su aplicación en Friendly Chat :

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:

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:

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 :

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 use el SDK de Firebase para Cloud Functions, su código de funciones vivirá en el directorio functions (de forma 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":

Esto debería aparecer como:

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ó:

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.

Abra su aplicación en su navegador utilizando la URL de alojamiento (en forma de https://<project-id>.firebaseapp.com ).
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.

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

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:

Compruebe si la imagen está marcada como Adulto o Violento mediante la API de Cloud Vision .
Si la imagen se ha marcado, descárguela en la instancia de Functions en ejecución.
Desenfoca la imagen usando ImageMagick .
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:

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:

Abra su aplicación en su navegador utilizando la URL de alojamiento (en forma de https://<project-id>.firebaseapp.com ).
Una vez que haya iniciado sesión en la aplicación, cargue una imagen:
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:

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

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 ).
Si inicia sesión en la aplicación por primera vez, asegúrese de permitir las notificaciones cuando se le solicite:
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 .
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:

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.
Implemente Cloud Functions con Firebase CLI.

Próximos pasos

Obtén más información sobre otros tipos de activadores de Cloud Functions .
Use Firebase y Cloud Functions con su propia aplicación.

Aprende más

1. Información general

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 comandos:

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

Importar la aplicación de inicio

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

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.

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

Habilitar almacenamiento en la nube

Agregar una aplicación web

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

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

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

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:

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:

Tendremos que habilitar las notificaciones en un momento posterior.

Ahora, agregaremos algunas funciones mediante el SDK de Firebase para Cloud Functions.

6. El directorio de funciones

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

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.

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

Esto debería aparecer como:

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ó:

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

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

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.

Abra su aplicación en su navegador utilizando la URL de alojamiento (en forma de https://<project-id>.firebaseapp.com ).
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.

After you sign in, a welcome message should be displayed automatically:

9. Images moderation

Users can upload all type of images in the chat, and it is always important to moderate offensive images, especially in public social platforms. In FriendlyChat, the images that are being published to the chat are stored into Google Cloud Storage .

With Cloud Functions, you can detect new image uploads using the functions.storage().onFinalize trigger. This will run every time a new file is uploaded or modified in Cloud Storage.

To moderate images, we'll go through the following process:

Check if the image is flagged as Adult or Violent using the Cloud Vision API .
If the image has been flagged, download it on the running Functions instance.
Blur the image using ImageMagick .
Upload the blurred image to Cloud Storage.

Enable the Cloud Vision API

Since we'll be using the Google Cloud Vision API in this function, you must enable the API on your firebase project. Follow this link , then select your Firebase project and enable the API:

Install dependencies

To moderate images, we'll use the Google Cloud Vision Client Library for Node.js, @google-cloud/vision , to run images through the Cloud Vision API to detect inappropriate images.

To install this package into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.

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

This will install the package locally and add them as a declared dependency in your package.json file.

Import and configure dependencies

To import the dependencies that were installed and some Node.js core modules ( path , os and fs ) that we'll need in this section, add the following lines to the top of your index.js file:

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');

Since your function will run inside a Google Cloud environment, there is no need to configure the Cloud Storage and Cloud Vision libraries: they will be configured automatically to use your project.

Detecting inappropriate images

You'll be using the functions.storage.onChange Cloud Functions trigger, which runs your code as soon as a file or folder is created or modified in a Cloud Storage bucket. Add the blurOffensiveImages Function into your index.js file:

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.');
    });

Note that we added some configuration of the Cloud Functions instance that will run the function. With .runWith({memory: '2GB'}) , we're requesting that the instance gets 2GB of memory rather than the default, because this function is memory intensive.

When the function is triggered, the image is ran through the Cloud Vision API to detect if it is flagged as adult or violent. If the image is detected as inappropriate based on these criteria, we're blurring the image, which is done in the blurImage function as we'll see next.

Blurring the image

Add the following blurImage function in your index.js file:

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.');
}

In the above function, the image binary is downloaded from Cloud Storage. The image is then blurred using ImageMagick's convert tool, and the blurred version is re-uploaded on the Storage Bucket. Next, we delete the file on the Cloud Functions instance to free up some disk space, and we do this because the same Cloud Functions instance can get re-used and if files are not cleaned up, it could run out of disk space. Finally, we add a boolean to the chat message indicating the image was moderated, and this will trigger a refresh of the message on the client.

Deploy the Function

The Function will only be active after you've deployed it. On the command line, run firebase deploy --only functions :

firebase deploy --only functions

This is the console output you should see:

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

Test the function

Once the function has deployed successfully:

Open your app in your browser using the hosting URL (in the form of https://<project-id>.firebaseapp.com ).
Once signed into the app, upload an image:
Choose your best offensive image to upload (or you can use this flesh eating Zombie !) and after a few moments, you should see your post refresh with a blurred version of the image:

10. New Message Notifications

In this section, you will add a Cloud Function that sends notifications to participants of the chat when a new message is posted.

Using Firebase Cloud Messaging (FCM), you can reliably send notifications to users across platforms. To send a notification to a user, you need their FCM device token. The chat web app that we are using already collects device tokens from users when they open the app for the first time on a new browser or device. These tokens are stored in Cloud Firestore in the fcmTokens collection.

If you would like to learn how to get FCM device tokens on a web app, you can go through the Firebase Web Codelab .

Send notifications

To detect when new messages are posted, you'll be using the functions.firestore.document().onCreate Cloud Functions trigger, which runs your code when a new object is created at a given path of Cloud Firestore. Add the sendNotifications function into your index.js file:

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.');
    }
  });

In the Function above, we are gathering all users' device tokens from the Cloud Firestore database and sending a notification to each of these using the admin.messaging().sendToDevice function.

Cleanup the tokens

Lastly, we want to remove the tokens that are no longer valid. This happens when the token that we once got from the user is not being used by the browser or device anymore. For instance, this happens if the user has revoked the notification permission for the browser session. To do this, add the following cleanupTokens function in your index.js file:

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);
}

Deploy the Function

The function will only be active after you've deployed it, and to deploy it, run this in command line:

firebase deploy --only functions

This is the console output you should see:

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

Test the function

Once the function has deployed successfully, open your app in your browser using the hosting URL (in the form of https://<project-id>.firebaseapp.com ).
If you sign-in the app for the first time, make sure you allow notifications when prompted:
Close the chat app tab or display a different tab: Notifications appear only if the app is in the background. If you would like to learn how to receive messages while your app is in the foreground, have a look at our documentation .
Using a different browser (or an Incognito window), sign into the app and post a message. You should see a notification displayed by the first browser:

11. Congratulations!

You have used the Firebase SDK for Cloud Functions and added server-side components to a chat app.

What we've covered

Authoring Cloud Functions using the Firebase SDK for Cloud Functions.
Trigger Cloud Functions based on Auth, Cloud Storage, and Cloud Firestore events.
Add Firebase Cloud Messaging support to your web app.
Deploy Cloud Functions using the Firebase CLI.

Próximos pasos

Learn about other Cloud Function trigger types .
Use Firebase and Cloud Functions with your own app.