Fonctions Cloud pour Firebase

1. Vue d'ensemble

Dans cet atelier de programmation, vous apprendrez à utiliser le SDK Firebase pour Google Cloud Functions afin d'améliorer une application Web Chat et à utiliser Cloud Functions pour envoyer des notifications aux utilisateurs de l'application Chat.

3b1284f5144b54f6.png

Ce que vous apprendrez

  • Créez des fonctions Google Cloud à l'aide du SDK Firebase.
  • Déclenchez Cloud Functions en fonction des événements Auth, Cloud Storage et Cloud Firestore.
  • Ajoutez la prise en charge de Firebase Cloud Messaging à votre application Web.

Ce dont vous aurez besoin

  • Une carte de crédit. Cloud Functions pour Firebase nécessite le plan Firebase Blaze, ce qui signifie que vous devrez activer la facturation sur votre projet Firebase à l'aide d'une carte de crédit.
  • L'éditeur IDE / texte de votre choix tels que WebStorm , Atom ou sublime .
  • Un terminal pour exécuter des commandes shell avec NodeJS v9 installé.
  • Un navigateur tel que Chrome.
  • L'exemple de code. Voir l'étape suivante pour cela.

2. Obtenez l'exemple de code

Cloner le dépôt GitHub à partir de la ligne de commande:

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

Importer l'application de démarrage

À l'aide de votre IDE, ouvrez ou importez le android_studio_folder.png cloud-functions-start répertoire à partir du répertoire des exemples de code. Ce répertoire contient le code de démarrage du laboratoire de programmation qui consiste en une application Web de chat entièrement fonctionnelle.

3. Créez un projet Firebase et configurez votre application

Créer un projet

Dans Firebase Console , cliquez sur Ajouter un projet et appeler FriendlyChat.

Cliquez sur Créer un projet.

Passez au forfait Blaze

Pour utiliser les fonctions Cloud pour Firebase, vous devrez Upgade votre projet Firebase au plan de facturation Blaze . Cela vous obligera à ajouter une carte de crédit ou un autre instrument de facturation à votre compte Google Cloud.

Tous les projets Firebase, y compris ceux du plan Blaze, ont toujours accès aux quotas d'utilisation gratuits pour Cloud Functions. Les étapes décrites dans cet atelier de programmation s'inscriront dans les limites d'utilisation de l'offre gratuite. Cependant, vous verrez de petites charges ( environ 0,03 $ ) de Cloud Storage qui est utilisé pour héberger vos images construire des fonctions Cloud.

Si vous n'avez pas accès à une carte de crédit ou sont mal à l' aise de continuer avec le plan Blaze, pensez à utiliser l' émulateur Firebase Suite qui vous permettra de simuler des fonctions de Cloud gratuitement sur votre machine locale.

Activer l'authentification Google

Pour permettre aux utilisateurs de se connecter à l'application, nous utiliserons l'authentification Google qui doit être activée.

Dans Firebase Console, ouvrez la section de construction> Authentification> Inscription dans l' onglet méthode (ou cliquez ici pour y aller). Ensuite, activez la connexion Google fournisseur et cliquez sur Enregistrer. Cela permettra aux utilisateurs de se connecter à l'application Web avec leurs comptes Google.

En outre, vous pouvez définir le nom public face de votre application Friendly chat:

8290061806aacb46.png

Activer le stockage en nuage

L'application utilise Cloud Storage pour télécharger des images. Pour activer Cloud Storage sur votre projet Firebase, visitez la section Stockage et cliquez sur le bouton pour commencer. Suivez les étapes ici, et pour l'emplacement Cloud Storage, il y aura une valeur par défaut à utiliser. Cliquez sur Terminé après.

Ajouter une application Web

Sur la console Firebase, ajoutez une application Web. Pour ce faire, allez dans Paramètres du projet et faites défiler jusqu'à Ajouter application. Choisissez Web comme la plate - forme et cochez la case pour la mise en place Firebase Hébergement, puis enregistrez l'application et cliquez sur Suivant pour le reste des étapes, en cliquant enfin sur Continuer à la console.

4. Installez l'interface de ligne de commande Firebase

L'interface de ligne de commande Firebase (CLI) vous permettra de servir l'application Web localement et de déployer votre application Web et Cloud Functions.

Pour installer ou mettre à niveau la CLI, exécutez la commande npm suivante :

npm -g install firebase-tools

Pour vérifier que la CLI a été correctement installée, ouvrez une console et exécutez :

firebase --version

Assurez - vous que la version de la CLI Firebase est au- dessus 4.0.0 de sorte qu'il a toutes les dernières fonctionnalités requises pour les fonctions Cloud. Sinon, exécutez npm install -g firebase-tools pour mettre à niveau , comme indiqué ci - dessus.

Autorisez la CLI Firebase en exécutant :

firebase login

Assurez - vous que vous êtes dans le cloud-functions-start répertoire, puis configurez la CLI Firebase d'utiliser votre projet Firebase:

firebase use --add

Ensuite, sélectionnez votre ID de projet et suivez les instructions. Lorsque vous êtes invité, vous pouvez choisir un alias, tels que codelab .

5. Déployer et exécuter l'application Web

Maintenant que vous avez importé et configuré votre projet, vous êtes prêt à exécuter l'application Web pour la première fois ! Ouvrez une fenêtre de terminal, accédez au cloud-functions-start dossier, et déployer l'application Web pour Firebase hébergement en utilisant:

firebase deploy --except functions

Voici la sortie de la console que vous devriez voir :

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

Ouvrez l'application Web

La dernière ligne doit afficher l'URL d' hébergement. L'application Web doit maintenant être diffusée à partir de cette URL, qui doit être au format https://<project-id>.firebaseapp.com. Ouvrez-le. Vous devriez voir l'interface utilisateur fonctionnelle d'une application de chat.

Connectez-vous à l'application en utilisant le bouton AVEC ACCES GOOGLE et vous pouvez ajouter des messages et des images post:

3b1284f5144b54f6.png

Si vous vous connectez à l'application pour la première fois sur un nouveau navigateur, assurez-vous d'autoriser les notifications lorsque vous y êtes invité : 8b9d0c66dc36153d.png

Nous devrons activer les notifications ultérieurement.

Si vous avez accidentellement cliqué sur Bloquer, vous pouvez modifier ce paramètre en cliquant sur le bouton 🔒 sécurisé à gauche de l'URL dans la Omnibar Chrome et le bar à côté de basculer à Notifications:

e926868b0546ed71.png

Nous allons maintenant ajouter des fonctionnalités à l'aide du SDK Firebase pour Cloud Functions.

6. Le répertoire des fonctions

Cloud Functions vous permet d'avoir facilement du code qui s'exécute dans le Cloud sans avoir à configurer de serveur. Nous verrons comment créer des fonctions qui réagissent aux événements de base de données Firebase Auth, Cloud Storage et Firebase Firestore. Commençons par Auth.

Lorsque vous utilisez le SDK Firebase pour les fonctions de Cloud, votre code Fonctions habitera sous la functions répertoire (par défaut). Votre code Fonctions est aussi une Node.js application et a donc besoin d' un package.json qui donne des informations sur votre application et dépendances listes.

Pour ce plus facile pour vous, nous avons déjà créé les functions/index.js fichier où votre code sera. N'hésitez pas à inspecter ce fichier avant d'aller de l'avant.

cd functions
ls

Si vous n'êtes pas familier avec Node.js , en apprendre davantage à ce sujet avant de poursuivre la codelab serait utile.

Le package.json fichier répertorie déjà deux dépendances nécessaires: le SDK Firebase pour les fonctions de Cloud et le Firebase Administrateur SDK . Pour les installer localement, accédez aux functions dossier et exécuter:

npm install

Jetons maintenant un coup d' oeil au index.js fichier:

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.

Nous allons importer les modules requis, puis écrire trois fonctions à la place des TODO. Commençons par importer les modules Node requis.

7. Importez les modules Cloud Functions et Firebase Admin

Deux modules seront nécessaires au cours de cette codelab: firebase-functions permet l' écriture Fonctions de Cloud déclencheurs et les journaux tout en firebase-admin permet d' utiliser la plate - forme Firebase sur un serveur avec accès admin à faire des actions telles que l' écriture Cloud Firestore ou l' envoi de notifications de la FCM.

Dans le index.js fichier, remplacez la première TODO par ce qui suit:

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.

Le Firebase Administrateur SDK peut être configuré automatiquement lorsqu'il est déployé sur un nuage Fonctions environnement ou autres conteneurs Google Cloud Platform, et cela se produit lorsque nous appelons admin.initializeApp() sans argument.

Maintenant, ajoutons une fonction qui s'exécute lorsqu'un utilisateur se connecte pour la première fois dans l'application de chat, et nous ajouterons un message de chat pour souhaiter la bienvenue à l'utilisateur.

8. Bienvenue aux nouveaux utilisateurs

Structure des messages de discussion

Les messages publiés sur le fil de discussion FriendlyChat sont stockés dans Cloud Firestore. Examinons la structure de données que nous utilisons pour un message. Pour ce faire, publiez un nouveau message sur le chat indiquant "Hello World":

11f5a676fbb1a69a.png

Cela devrait apparaître comme suit :

fe6d1c020d0744cf.png

Dans Firebase Console, cliquez sur la base de données Firestore dans la section de construction. Vous devriez voir la collection de messages et un document contenant le message que vous avez écrit :

442c9c10b5e2b245.png

Comme vous pouvez le voir, des messages de chat sont stockés dans un nuage Firestore comme document avec name , profilePicUrl , text et timestamp attributs ajoutés au messages collection.

Ajouter des messages de bienvenue

La première fonction Cloud ajoute un message qui accueille de nouveaux utilisateurs sur le chat. Pour cela, nous pouvons utiliser le déclencheur functions.auth().onCreate , qui exécute la fonction chaque fois qu'un utilisateur signe en pour la première fois dans l'application Firebase. Ajouter la addWelcomeMessages fonction dans votre index.js fichier:

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

L' ajout de cette fonction à la spéciale exports objet est la manière de nœud de rendre la fonction accessible à l' extérieur du fichier en cours et il est nécessaire pour les fonctions Cloud.

Dans la fonction ci-dessus, nous ajoutons un nouveau message de bienvenue publié par "Firebase Bot" à la liste des messages de chat. Nous faisons cela en utilisant l' add méthode sur les messages collection en nuage Firestore, qui est l' endroit où les messages de chat sont stockés.

Comme il est une opération asynchrone, nous avons besoin de retourner la promesse indiquant quand Firestore - Cloud a fini d' écrire de sorte que les fonctions de Cloud n'exécutent pas trop tôt.

Déployer des fonctions cloud

Les fonctions Cloud ne seront actives qu'une fois que vous les aurez déployées. Pour ce faire, exécutez ceci sur la ligne de commande :

firebase deploy --only functions

Voici la sortie de la console que vous devriez voir :

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

Testez la fonction

Une fois la fonction déployée avec succès, vous aurez besoin d'un utilisateur qui se connecte pour la première fois.

  1. Ouvrez votre application dans votre navigateur en utilisant l'URL d' hébergement (sous forme de https://<project-id>.firebaseapp.com ).
  2. Avec un nouvel utilisateur, connectez - vous pour la première fois dans votre application en utilisant le bouton Connexion.
  • Si vous avez déjà signé dans le, application , vous pouvez ouvrir Firebase Console d' authentification et supprimer votre compte à partir de la liste des utilisateurs. Ensuite, reconnectez-vous.

262535d1b1223c65.png

  1. Une fois connecté, un message de bienvenue devrait s'afficher automatiquement :

1c70e0d64b23525b.png

9. Modération des images

Les utilisateurs peuvent télécharger tous les types d'images dans le chat, et il est toujours important de modérer les images offensantes, en particulier sur les plateformes sociales publiques. En FriendlyChat, les images qui sont publiés sur le chat sont stockés dans Google Cloud Storage .

Avec des fonctions Cloud, vous pouvez détecter les nouveaux ajouts d'images en utilisant le functions.storage().onFinalize déclencheur. Cette opération s'exécutera chaque fois qu'un nouveau fichier sera importé ou modifié dans Cloud Storage.

Pour modérer les images, nous suivrons le processus suivant :

  1. Vérifiez si l'image est marquée comme adulte ou violent en utilisant l' API Cloud Vision .
  2. Si l'image a été signalée, téléchargez-la sur l'instance Functions en cours d'exécution.
  3. Brouiller l'image en utilisant ImageMagick .
  4. Importez l'image floue dans Cloud Storage.

Activer l'API Cloud Vision

Étant donné que nous utiliserons l'API Google Cloud Vision dans cette fonction, vous devez activer l'API sur votre projet Firebase. Suivez ce lien , puis sélectionnez votre projet Firebase et activer l'API:

5c77fee51ec5de49.png

Installer les dépendances

Pour des images modérées, nous allons utiliser la bibliothèque du client Google Cloud Vision pour Node.js, @ / vision de Google Cloud , pour lancer des images via le Cloud Vision API pour détecter des images inappropriées.

Pour installer ce package dans votre application Fonctions Nuage, exécutez la commande suivante npm install --save commande. Assurez - vous que vous le faites à partir du functions répertoire.

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

Cela installera le paquet localement et les ajouter comme une dépendance déclarée dans votre package.json fichier.

Importer et configurer des dépendances

Pour importer les dépendances qui ont été installés et certains modules de base Node.js ( path , os et fs ) que nous aurons besoin dans cette section, ajoutez les lignes suivantes en haut de votre index.js fichier:

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

Étant donné que votre fonction s'exécutera dans un environnement Google Cloud, il n'est pas nécessaire de configurer les bibliothèques Cloud Storage et Cloud Vision : elles seront automatiquement configurées pour utiliser votre projet.

Détecter les images inappropriées

Vous utiliserez le functions.storage.onChange Fonctions nuage déclencheur qui exécute votre code dès qu'un fichier ou un dossier est créé ou modifié dans un seau Cloud Storage. Ajouter la blurOffensiveImages fonction dans votre index.js fichier:

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

Notez que nous avons ajouté une configuration de l'instance Cloud Functions qui exécutera la fonction. Avec .runWith({memory: '2GB'}) , nous demandons que l'instance obtient 2 Go de mémoire plutôt que la valeur par défaut, car cette fonction est de mémoire.

Lorsque la fonction est déclenchée, l'image est exécutée via l'API Cloud Vision pour détecter si elle est signalée comme adulte ou violente. Si l'image est détectée comme non convenable en fonction de ces critères, nous brouillant l'image, ce qui se fait dans la blurImage fonction comme nous le verrons ensuite.

Brouiller l'image

Ajoutez ce qui suit blurImage fonction dans votre index.js fichier:

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

Dans la fonction ci-dessus, le fichier binaire de l'image est téléchargé à partir de Cloud Storage. L'image est alors floue à l' aide de ImageMagick convert l'outil, et la version floue est re-téléchargé sur le seau de stockage. Ensuite, nous supprimons le fichier sur l'instance Cloud Functions pour libérer de l'espace disque, et nous le faisons parce que la même instance Cloud Functions peut être réutilisée et si les fichiers ne sont pas nettoyés, il pourrait manquer d'espace disque. Enfin, nous ajoutons un booléen au message de chat indiquant que l'image a été modérée, et cela déclenchera un rafraîchissement du message sur le client.

Déployer la fonction

La fonction ne sera active qu'après l'avoir déployée. Sur la ligne de commande, exécutez firebase deploy --only functions :

firebase deploy --only functions

Voici la sortie de la console que vous devriez voir :

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

Testez la fonction

Une fois la fonction déployée avec succès :

  1. Ouvrez votre application dans votre navigateur en utilisant l'URL d' hébergement (sous forme de https://<project-id>.firebaseapp.com ).
  2. Une fois connecté à l'application, importez une image : 4db9fdab56703e4a.png
  3. Choisissez votre meilleure image offensive à télécharger (ou vous pouvez utiliser cette mangeuse de chair Zombie !) Et après quelques instants, vous devriez voir votre rafraîchissement après une version floue de l'image: 83dd904fbaf97d2b.png

10. Notifications de nouveaux messages

Dans cette section, vous allez ajouter une fonction Cloud qui envoie des notifications aux participants du chat lorsqu'un nouveau message est publié.

En utilisant Firebase - Cloud Messaging (FCM), vous pouvez envoyer des notifications aux utilisateurs de manière fiable sur toutes les plateformes. Pour envoyer une notification à un utilisateur, vous avez besoin de son jeton d'appareil FCM. L'application Web de chat que nous utilisons collecte déjà les jetons d'appareil des utilisateurs lorsqu'ils ouvrent l'application pour la première fois sur un nouveau navigateur ou appareil. Ces jetons sont stockés dans Nuage Firestore dans la fcmTokens collection.

Si vous voulez savoir comment obtenir des jetons de périphérique FCM sur une application Web, vous pouvez passer par le Firebase Web Codelab .

Envoyer des notifications

Pour détecter les nouveaux messages sont affichés, vous utiliserez le functions.firestore.document().onCreate Fonctions nuage déclencheur qui exécute le code lorsqu'un nouvel objet est créé à un chemin donné du Cloud Firestore. Ajouter la sendNotifications fonction dans votre index.js fichier:

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

Dans la fonction ci - dessus, nous recueillons des jetons d'appareil de tous les utilisateurs de la base de données cloud Firestore et l' envoi d' une notification à chacun de ces utilisant le admin.messaging().sendToDevice fonction.

Nettoyer les jetons

Enfin, nous voulons supprimer les jetons qui ne sont plus valides. Cela se produit lorsque le jeton que nous avons obtenu de l'utilisateur n'est plus utilisé par le navigateur ou l'appareil. Par exemple, cela se produit si l'utilisateur a révoqué l'autorisation de notification pour la session du navigateur. Pour ce faire, ajoutez la ligne suivante cleanupTokens fonction dans votre index.js fichier:

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

Déployer la fonction

La fonction ne sera active qu'après l'avoir déployée, et pour la déployer, exécutez ceci en ligne de commande :

firebase deploy --only functions

Voici la sortie de la console que vous devriez voir :

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

Testez la fonction

  1. Une fois que la fonction a déployé avec succès, ouvrez votre application dans votre navigateur en utilisant l'URL d' hébergement (sous forme de https://<project-id>.firebaseapp.com ).
  2. Si vous vous connectez à l'application pour la première fois, assurez-vous d'autoriser les notifications lorsque vous y êtes invité : 8b9d0c66dc36153d.png
  3. Fermez l'onglet de l'application de chat ou affichez un autre onglet : les notifications n'apparaissent que si l'application est en arrière-plan. Si vous souhaitez apprendre à recevoir des messages pendant que votre application est au premier plan, jetez un oeil à notre documentation .
  4. À l'aide d'un autre navigateur (ou d'une fenêtre de navigation privée), connectez-vous à l'application et publiez un message. Vous devriez voir une notification affichée par le premier navigateur : 45282ab12b28b926.png

11. Félicitations !

Vous avez utilisé le SDK Firebase pour Cloud Functions et ajouté des composants côté serveur à une application de chat.

Ce que nous avons couvert

  • Création de fonctions Cloud à l'aide du SDK Firebase pour Cloud Functions.
  • Déclenchez Cloud Functions en fonction des événements Auth, Cloud Storage et Cloud Firestore.
  • Ajoutez la prise en charge de Firebase Cloud Messaging à votre application Web.
  • Déployez Cloud Functions à l'aide de la CLI Firebase.

Prochaines étapes

Apprendre encore plus