Fonctions Cloud pour Firebase

1. Vue d'ensemble

Dans cet atelier de programmation, vous apprendrez à utiliser le SDK Firebase pour Google Cloud Functions pour 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 des fonctions Cloud 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 for Firebase nécessite le forfait 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 v8 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 discussion entièrement fonctionnelle.

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

Créer un projet

Dans la console Firebase cliquez sur Ajouter un projet et appeler FriendlyChat.

Cliquez sur Créer un projet.

Passez au forfait Blaze

Pour utiliser les fonctions Cloud 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 seront comprises 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 la console Firebase ouvrir la Section Développement> Authentification> onglet SIGNE DE MÉTHODE (ou cliquez ici pour aller là - bas) , vous devez activer la connexion Google fournisseur et cliquez sur Enregistrer. Cela permettra aux utilisateurs de se connecter à l'application Web avec leurs comptes Google.

Aussi ne hésitez pas à 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 photos. Pour activer Cloud Storage sur votre projet Firebase visitez la section Stockage et cliquez sur le bouton pour commencer. Cliquez ensuite obtenu lorsque vous recevez l'avertissement sur les règles de sécurité.

842ad84821323ef5.png

4. Installez l'interface de ligne de commande Firebase

L'interface de ligne de commande (CLI) de Firebase 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 la cloud-functions-start répertoire puis configurez la CLI Firebase d'utiliser votre projet Firebase:

firebase use --add

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

5. Déployez et exécutez 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 console au cloud-functions-start dossier et exécuter firebase deploy --except functions des firebase deploy --except functions cela ne déployer l'application Web pour l' hébergement Firebase:

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 servie à 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 aurons besoin que vous ayez activé les notifications ultérieurement.

Si vous avez cliqué par erreur sur bloc , vous pouvez modifier ce paramètre en cliquant sur le bouton 🔒 sécurisé à gauche de l'URL dans la Omnibar Chrome et en sélectionnant Notifications> Toujours autoriser sur ce site:

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 un serveur. Nous allons vous montrer comment créer des fonctions qui réagissent aux événements Firebase Auth, Cloud Storage et Firebase Realtime Database. 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 le rendre plus facile pour vous , nous avons déjà créé les functions/index.js fichier où votre code sera. N'hésitez pas à inspecter ce dossier avant d'aller de l'avant.

cd functions
ls

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

Le fichier package.json 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 exécuter localement npm install des functions dossier:

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 d'abord 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, le firebase-functions le module nous permet d'écrire les fonctions de Cloud déclencher des règles, tandis que le firebase-admin le module permet d'utiliser la plate - forme Firebase sur un serveur avec accès admin, par exemple pour écrire à la Cloud Firestore ou envoyer des notifications 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 SDK Firebase Admin peut être configuré automatiquement lorsqu'il est déployé sur un environnement Cloud Functions ou d'autres conteneurs Google Cloud Platform. C'est ce que nous faisons ci - dessus lorsque vous appelez admin.initializeApp();

Ajoutons maintenant une fonction qui s'exécute lorsqu'un utilisateur se connecte pour la première fois dans votre 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. Regardons la structure de données que nous utilisons pour un message. Pour ce faire, publiez un nouveau message sur le chat qui lit "Hello World" :

11f5a676fbb1a69a.png

Cela devrait apparaître comme :

fe6d1c020d0744cf.png

Dans votre console d'application Firebase cliquez sur la base de données sous la section Développement. 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 le Cloud Firestore comme un document avec le name , profilePicUrl , text et timestamp attributs ajoutés au messages collection.

Ajout de messages de bienvenue

La première fonction Cloud ajoute un message qui accueille de nouveaux utilisateurs dans 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 votre 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) => {
  console.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(),
  });
  console.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 discussion. Nous faisons cela en utilisant l' add méthode sur les messages collection dans le Cloud Firestore qui est où les messages de chat sont stockés.

Comme il est une opération asynchrone, nous avons besoin de retourner la promesse indiquant quand l'écriture Nuage Firestore terminée, de sorte que les fonctions ne quitte pas l'exécution trop tôt.

Déployer la fonction

La fonction ne sera active qu'une fois que vous l'aurez déployée. Sur la piste de ligne de commande 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: 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

Tester 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 êtes déjà connecté à l'application que vous pouvez ouvrir la section Console d' authentification Firebase et supprimer votre compte dans la liste des utilisateurs. Puis 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 tout type 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. Cela s'exécutera chaque fois qu'un nouveau fichier est importé ou modifié dans Cloud Storage.

Pour modérer les images, nous allons suivre 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 , sélectionnez votre projet Firebase et activer l'API:

5c77fee51ec5de49.png

Installer les dépendances

Pour modérer les images, nous aurons besoin de quelques packages Node.js :

  • Le Google Cloud Vision Client Library pour Node.js: @ cloud / google vision pour exécuter l'image à travers le Cloud Vision API pour détecter des images inappropriées.
  • Une bibliothèque Node.js nous permettant d'exécuter des processus: l' enfant processus promesse d'exécuter ImageMagick depuis l'outil de ligne de commande ImageMagick est pré-installé sur toutes les instances de fonctions.

Pour installer ces deux paquets 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@0.12.0 child-process-promise@2.2.1

Cela installera les deux paquets localement et les ajouter en tant que dépendances déclarées dans votre package.json fichier.

Importer et configurer les dépendances

Pour importer les deux 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 ajouter les lignes suivantes en haut de votre index.js fichier:

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision();
const spawn = require('child-process-promise').spawn;

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 configurées automatiquement 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 image = {
        source: {imageUri: `gs://${object.bucket}/${object.name}`},
      };

      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(image);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.types.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        console.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      console.log('The image', object.name, 'has been detected as OK.');
    });

Notez que nous avons ajouté une certaine configuration de l'instance Fonctions Cloud 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, cela vous aidera comme cela la fonction est gourmande en 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 qui se fait dans la blurImage fonction que nous 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});
  console.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await spawn('convert', [tempLocalFile, '-channel', 'RGBA', '-blur', '0x24', tempLocalFile]);
  console.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  console.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  console.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  console.log('Marked the image as moderated in the database.');
}

Dans la fonction ci-dessus, le binaire de l'image est téléchargé à partir de Cloud Storage. Ensuite , l'image est 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, car la même instance Cloud Functions peut être réutilisée et si les fichiers ne sont pas nettoyés, le disque peut être épuisé. Enfin, nous ajoutons un booléen au message de discussion indiquant que l'image a été modérée, cela déclenchera un rafraîchissement du message sur le client.

Déployer la fonction

La fonction ne sera active qu'une fois que vous l'aurez déployée. Sur la piste de ligne de commande 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

Tester 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, téléchargez 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 post avec 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 à vos utilisateurs une plate - forme croisée et fiable. 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à des jetons d'appareil auprès 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 que vous allez utiliser la 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);
      console.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 sa session de navigateur. Pour ce faire , ajoutez les éléments suivants 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) {
     console.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'une fois que vous l'aurez déployée. Sur la piste de ligne de commande 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: 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

Tester 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 , un coup d' 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 Cloud Functions à l'aide du SDK Firebase pour Cloud Functions.
  • Déclenchez des fonctions Cloud en fonction des événements Auth, Cloud Storage et Cloud Firestore.
  • Ajoutez la prise en charge de Firebase Cloud Messaging à votre application Web.
  • Déploiement de Cloud Functions à l'aide de la CLI Firebase.

Prochaines étapes

Apprendre encore plus