Invia notifiche per un'app Web utilizzando Cloud Messaging e Cloud Functions

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

1. Panoramica

In questo codelab imparerai come utilizzare Cloud Functions per Firebase per aggiungere funzionalità a un'app Web di chat inviando notifiche agli utenti dell'app di chat.

3b1284f5144b54f6.png

Cosa imparerai

  • Crea Google Cloud Functions utilizzando Firebase SDK.
  • Attiva le funzioni cloud in base agli eventi Auth, Cloud Storage e Cloud Firestore.
  • Aggiungi il supporto di Firebase Cloud Messaging alla tua app web.

Di cosa avrai bisogno

  • Una carta di credito. Cloud Functions for Firebase richiede il piano Firebase Blaze, il che significa che dovrai abilitare la fatturazione sul tuo progetto Firebase utilizzando una carta di credito.
  • L'editor di testo/IDE a tua scelta come WebStorm , Atom o Sublime .
  • Un terminale per eseguire comandi shell con NodeJS v9 installato.
  • Un browser come Chrome.
  • Il codice di esempio. Vedere il passaggio successivo per questo.

2. Ottieni il codice di esempio

Clona il repository GitHub dalla riga di comando:

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

Importa l'app di avviamento

Usando il tuo IDE, apri o importa il file cartella_studio_android.png directory cloud-functions-start dalla directory del codice di esempio. Questa directory contiene il codice iniziale per il codelab che consiste in un'app Web Chat completamente funzionale.

3. Crea un progetto Firebase e configura la tua app

Crea progetto

In Firebase Console , fai clic su Aggiungi progetto e chiamalo FriendlyChat .

Fare clic su Crea progetto .

Esegui l'upgrade al piano Blaze

Per utilizzare Cloud Functions per Firebase, dovrai aggiornare il tuo progetto Firebase al piano di fatturazione Blaze . Ciò richiederà l'aggiunta di una carta di credito o di un altro strumento di fatturazione al tuo account Google Cloud.

Tutti i progetti Firebase, inclusi quelli del piano Blaze, hanno ancora accesso alle quote di utilizzo gratuite per Cloud Functions. I passaggi descritti in questo codelab rientreranno nei limiti di utilizzo del livello gratuito. Tuttavia, vedrai piccoli addebiti ( circa $ 0,03 ) da Cloud Storage che viene utilizzato per ospitare le immagini di build di Cloud Functions.

Se non hai accesso a una carta di credito o ti senti a disagio a continuare con il piano Blaze, prendi in considerazione l'utilizzo della Firebase Emulator Suite che ti consentirà di emulare le funzioni cloud gratuitamente sul tuo computer locale.

Abilita Google Auth

Per consentire agli utenti di accedere all'app, utilizzeremo l'autenticazione di Google che deve essere abilitata.

In Firebase Console, apri la sezione Build > Autenticazione > scheda Metodo di accesso (o fai clic qui per andare lì). Quindi, abilita il provider di accesso a Google e fai clic su Salva . Ciò consentirà agli utenti di accedere all'app Web con i propri account Google.

Inoltre, sentiti libero di impostare il nome pubblico della tua app su Friendly Chat :

8290061806aacb46.png

Abilita archiviazione cloud

L'app utilizza Cloud Storage per caricare le immagini. Per abilitare Cloud Storage sul tuo progetto Firebase, visita la sezione Storage e fai clic sul pulsante Inizia . Segui i passaggi lì e per la posizione di Cloud Storage, ci sarà un valore predefinito da utilizzare. Fare clic su Fatto in seguito.

Aggiungi un'app Web

Su Firebase Console, aggiungi un'app Web. Per farlo, vai su Impostazioni progetto e scorri verso il basso fino a Aggiungi app . Scegli web come piattaforma e seleziona la casella per configurare Firebase Hosting, quindi registra l'app e fai clic su Avanti per il resto dei passaggi, infine facendo clic su Continua alla console .

4. Installare l'interfaccia della riga di comando di Firebase

L'interfaccia a riga di comando (CLI) di Firebase ti consentirà di servire l'app Web in locale e di distribuire l'app Web e le funzioni cloud.

Per installare o aggiornare la CLI, eseguire il seguente comando npm:

npm -g install firebase-tools

Per verificare che la CLI sia stata installata correttamente, aprire una console ed eseguire:

firebase --version

Assicurati che la versione della CLI Firebase sia superiore alla 4.0.0 in modo che abbia tutte le ultime funzionalità richieste per Cloud Functions. In caso contrario, eseguire npm install -g firebase-tools per eseguire l'aggiornamento come mostrato sopra.

Autorizza la CLI di Firebase eseguendo:

firebase login

Assicurati di essere nella directory cloud-functions-start , quindi imposta la CLI Firebase per utilizzare il tuo progetto Firebase:

firebase use --add

Quindi, seleziona il tuo ID progetto e segui le istruzioni. Quando richiesto, puoi scegliere qualsiasi alias, come codelab .

5. Distribuire ed eseguire l'app Web

Ora che hai importato e configurato il tuo progetto, sei pronto per eseguire la web app per la prima volta! Apri una finestra del terminale, vai alla cartella cloud-functions-start e distribuisci l'app Web all'hosting Firebase utilizzando:

firebase deploy --except functions

Questo è l'output della console che dovresti vedere:

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

Apri l'app web

L'ultima riga dovrebbe visualizzare l' URL di hosting. L'app Web dovrebbe ora essere servita da questo URL, che dovrebbe essere nel formato https://<project-id>.firebaseapp.com. Aprilo. Dovresti vedere l'interfaccia utente funzionante di un'app di chat.

Accedi all'app utilizzando il pulsante ACCEDI CON GOOGLE e sentiti libero di aggiungere alcuni messaggi e pubblicare immagini:

3b1284f5144b54f6.png

Se accedi all'app per la prima volta su un nuovo browser, assicurati di consentire le notifiche quando richiesto: 8b9d0c66dc36153d.png

Avremo bisogno di avere le notifiche abilitate in un secondo momento.

Se hai accidentalmente fatto clic su Blocca , puoi modificare questa impostazione facendo clic sul pulsante 🔒 Sicuro a sinistra dell'URL nella Omnibar di Chrome e attivando la barra accanto a Notifiche :

e926868b0546ed71.png

Ora aggiungeremo alcune funzionalità utilizzando l'SDK Firebase per le funzioni cloud.

6. La directory delle funzioni

Cloud Functions ti consente di avere facilmente codice che gira nel Cloud senza dover configurare un server. Illustreremo come creare funzioni che reagiscono agli eventi di database Firebase Auth, Cloud Storage e Firebase Firestore. Cominciamo con Auth.

Quando utilizzi l'SDK Firebase per Cloud Functions, il tuo codice Functions risiederà nella directory functions (per impostazione predefinita). Il tuo codice Functions è anche un'app Node.js e quindi necessita di un package.json che fornisca alcune informazioni sulla tua app ed elenchi le dipendenze.

Per semplificarti le cose, abbiamo già creato il file functions/index.js in cui andrà il tuo codice. Sentiti libero di controllare questo file prima di andare avanti.

cd functions
ls

Se non hai familiarità con Node.js , sarebbe utile saperne di più prima di continuare il codelab.

Il file package.json elenca già due dipendenze richieste: Firebase SDK for Cloud Functions e Firebase Admin SDK . Per installarli localmente, vai alla cartella delle functions ed esegui:

npm install

Diamo ora un'occhiata al file index.js :

index.js

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

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

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

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

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

Importeremo i moduli richiesti e quindi scriveremo tre funzioni al posto dei TODO. Iniziamo con l'importazione dei moduli Node richiesti.

7. Importa i moduli Cloud Functions e Firebase Admin

Durante questo codelab saranno necessari due moduli: firebase-functions consente di scrivere trigger e log di Cloud Functions mentre firebase-admin consente di utilizzare la piattaforma Firebase su un server con accesso come amministratore per eseguire azioni come scrivere su Cloud Firestore o inviare notifiche FCM.

Nel file index.js , sostituisci il primo TODO con il seguente:

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.

Firebase Admin SDK può essere configurato automaticamente quando distribuito in un ambiente Cloud Functions o in altri contenitori di Google Cloud Platform, e ciò accade quando chiamiamo admin.initializeApp() senza argomenti.

Ora aggiungiamo una funzione che viene eseguita quando un utente accede per la prima volta nell'app di chat e aggiungeremo un messaggio di chat per dare il benvenuto all'utente.

8. Benvenuto ai nuovi utenti

Struttura dei messaggi di chat

I messaggi pubblicati nel feed della chat di FriendlyChat vengono archiviati in Cloud Firestore. Diamo un'occhiata alla struttura dati che utilizziamo per un messaggio. Per fare ciò, pubblica un nuovo messaggio nella chat che dice "Hello World":

11f5a676fbb1a69a.png

Questo dovrebbe apparire come:

fe6d1c020d0744cf.png

In Firebase Console, fai clic su Firestore Database nella sezione Build . Dovresti vedere la raccolta di messaggi e un documento contenente il messaggio che hai scritto:

442c9c10b5e2b245.png

Come puoi vedere, i messaggi di chat vengono archiviati in Cloud Firestore come un documento con attributi name , profilePicUrl , text e timestamp aggiunti alla raccolta dei messages .

Aggiunta di messaggi di benvenuto

La prima Cloud Function aggiunge un messaggio che accoglie i nuovi utenti nella chat. Per questo, possiamo utilizzare il trigger functions.auth().onCreate , che esegue la funzione ogni volta che un utente accede per la prima volta all'app Firebase. Aggiungi la funzione addWelcomeMessages nel tuo file index.js :

index.js

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

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

L'aggiunta di questa funzione all'oggetto di exports speciale è il modo in cui Node rende la funzione accessibile al di fuori del file corrente ed è necessario per Cloud Functions.

Nella funzione sopra, stiamo aggiungendo un nuovo messaggio di benvenuto pubblicato da "Firebase Bot" all'elenco dei messaggi di chat. Lo stiamo facendo utilizzando il metodo di add sulla raccolta dei messages in Cloud Firestore, che è dove sono archiviati i messaggi della chat.

Poiché si tratta di un'operazione asincrona, è necessario restituire la promessa che indica quando Cloud Firestore ha terminato la scrittura in modo che le funzioni cloud non vengano eseguite troppo presto.

Distribuisci funzioni cloud

Le funzioni cloud saranno attive solo dopo che le avrai distribuite. Per fare ciò, esegui questo sulla riga di comando:

firebase deploy --only functions

Questo è l'output della console che dovresti vedere:

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

Testare la funzione

Una volta che la funzione è stata distribuita correttamente, dovrai avere un utente che accede per la prima volta.

  1. Apri la tua app nel browser utilizzando l'URL di hosting (sotto forma di https://<project-id>.firebaseapp.com ).
  2. Con un nuovo utente, accedi per la prima volta nella tua app utilizzando il pulsante Accedi .

262535d1b1223c65.png

  1. Dopo aver effettuato l'accesso, dovrebbe essere visualizzato automaticamente un messaggio di benvenuto:

1c70e0d64b23525b.png

9. Moderazione delle immagini

Gli utenti possono caricare tutti i tipi di immagini nella chat ed è sempre importante moderare le immagini offensive, specialmente nelle piattaforme social pubbliche. In FriendlyChat, le immagini che vengono pubblicate nella chat vengono archiviate in Google Cloud Storage .

Con Cloud Functions, puoi rilevare nuovi caricamenti di immagini utilizzando il trigger functions.storage().onFinalize . Verrà eseguito ogni volta che un nuovo file viene caricato o modificato in Cloud Storage.

Per moderare le immagini, eseguiremo il seguente processo:

  1. Verifica se l'immagine è contrassegnata come Adulto o Violenta utilizzando l' API Cloud Vision .
  2. Se l'immagine è stata contrassegnata, scaricala nell'istanza di Functions in esecuzione.
  3. Sfoca l'immagine usando ImageMagick .
  4. Carica l'immagine sfocata su Cloud Storage.

Abilita l'API Cloud Vision

Poiché in questa funzione utilizzeremo l'API di Google Cloud Vision, devi abilitare l'API sul tuo progetto Firebase. Segui questo link , quindi seleziona il tuo progetto Firebase e abilita l'API:

5c77fee51ec5de49.png

Installa le dipendenze

Per moderare le immagini, utilizzeremo la libreria client di Google Cloud Vision per Node.js, @google-cloud/vision , per eseguire le immagini tramite l'API Cloud Vision per rilevare immagini non appropriate.

Per installare questo pacchetto nella tua app Cloud Functions, esegui il comando npm install --save seguente. Assicurati di farlo dalla directory functions .

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

Questo installerà il pacchetto localmente e lo aggiungerà come dipendenza dichiarata nel tuo file package.json .

Importa e configura le dipendenze

Per importare le dipendenze che sono state installate e alcuni moduli core di Node.js ( path , os e fs ) di cui avremo bisogno in questa sezione, aggiungi le seguenti righe all'inizio del tuo file index.js :

index.js

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

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

Poiché la tua funzione verrà eseguita all'interno di un ambiente Google Cloud, non è necessario configurare le librerie Cloud Storage e Cloud Vision: verranno configurate automaticamente per utilizzare il tuo progetto.

Rilevamento di immagini inadeguate

Utilizzerai il trigger functions.storage.onChange Cloud Functions, che esegue il codice non appena un file o una cartella viene creato o modificato in un bucket di Cloud Storage. Aggiungi la funzione blurOffensiveImages nel tuo file index.js :

index.js

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

Nota che abbiamo aggiunto alcune configurazioni dell'istanza di Cloud Functions che eseguirà la funzione. Con .runWith({memory: '2GB'}) , chiediamo che l'istanza ottenga 2 GB di memoria anziché il valore predefinito, perché questa funzione richiede molta memoria.

Quando la funzione viene attivata, l'immagine viene eseguita tramite l'API Cloud Vision per rilevare se è contrassegnata come adulta o violenta. Se l'immagine viene rilevata come inappropriata in base a questi criteri, stiamo sfocando l'immagine, cosa che viene eseguita nella funzione blurImage immagine come vedremo in seguito.

Sfocatura dell'immagine

Aggiungi la seguente funzione blurImage nel tuo file index.js :

index.js

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

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

Nella funzione precedente, l'immagine binaria viene scaricata da Cloud Storage. L'immagine viene quindi sfocata utilizzando lo strumento di convert di ImageMagick e la versione sfocata viene ricaricata nel bucket di archiviazione. Successivamente, eliminiamo il file sull'istanza di Cloud Functions per liberare spazio su disco e lo facciamo perché la stessa istanza di Cloud Functions può essere riutilizzata e se i file non vengono ripuliti, potrebbe esaurire lo spazio su disco. Infine, aggiungiamo un booleano al messaggio di chat che indica che l'immagine è stata moderata e questo attiverà un aggiornamento del messaggio sul client.

Distribuire la funzione

La funzione sarà attiva solo dopo averla distribuita. Sulla riga di comando, esegui firebase deploy --only functions :

firebase deploy --only functions

Questo è l'output della console che dovresti vedere:

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

Testare la funzione

Una volta che la funzione è stata distribuita correttamente:

  1. Apri la tua app nel browser utilizzando l'URL di hosting (sotto forma di https://<project-id>.firebaseapp.com ).
  2. Una volta effettuato l'accesso all'app, carica un'immagine: 4db9fdab56703e4a.png
  3. Scegli la tua migliore immagine offensiva da caricare (oppure puoi usare questo Zombie carnivoro !) e dopo pochi istanti, dovresti vedere il tuo post aggiornarsi con una versione sfocata dell'immagine: 83dd904fbaf97d2b.png

10. Notifiche di nuovi messaggi

In questa sezione, aggiungerai una Funzione Cloud che invia notifiche ai partecipanti alla chat quando viene pubblicato un nuovo messaggio.

Utilizzando Firebase Cloud Messaging (FCM), puoi inviare notifiche in modo affidabile agli utenti su tutte le piattaforme. Per inviare una notifica a un utente, è necessario il token del suo dispositivo FCM. L'app Web di chat che stiamo utilizzando raccoglie già i token del dispositivo dagli utenti quando aprono l'app per la prima volta su un nuovo browser o dispositivo. Questi token sono archiviati in Cloud Firestore nella raccolta fcmTokens .

Se desideri imparare come ottenere i token del dispositivo FCM su un'app Web, puoi consultare Firebase Web Codelab .

Invia notifiche

Per rilevare quando vengono pubblicati nuovi messaggi, utilizzerai il trigger functions.firestore.document().onCreate Cloud Functions, che esegue il codice quando viene creato un nuovo oggetto in un determinato percorso di Cloud Firestore. Aggiungi la funzione sendNotifications nel tuo file index.js :

index.js

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

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

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

Nella funzione sopra, raccogliamo i token dei dispositivi di tutti gli utenti dal database di Cloud Firestore e inviamo una notifica a ciascuno di questi utilizzando la admin.messaging().sendToDevice .

Pulisci i token

Infine, vogliamo rimuovere i token che non sono più validi. Ciò accade quando il token che una volta abbiamo ricevuto dall'utente non viene più utilizzato dal browser o dal dispositivo. Ad esempio, ciò accade se l'utente ha revocato l'autorizzazione di notifica per la sessione del browser. Per fare ciò, aggiungi la seguente funzione cleanupTokens nel tuo file index.js :

index.js

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

Distribuire la funzione

La funzione sarà attiva solo dopo averla distribuita e per distribuirla, esegui questa operazione nella riga di comando:

firebase deploy --only functions

Questo è l'output della console che dovresti vedere:

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

Testare la funzione

  1. Una volta che la funzione è stata distribuita correttamente, apri l'app nel browser utilizzando l'URL di hosting (sotto forma di https://<project-id>.firebaseapp.com ).
  2. Se accedi all'app per la prima volta, assicurati di consentire le notifiche quando richiesto: 8b9d0c66dc36153d.png
  3. Chiudi la scheda dell'app di chat o visualizza una scheda diversa: le notifiche vengono visualizzate solo se l'app è in background. Se desideri imparare a ricevere messaggi mentre la tua app è in primo piano, dai un'occhiata alla nostra documentazione .
  4. Utilizzando un browser diverso (o una finestra di navigazione in incognito), accedi all'app e pubblica un messaggio. Dovresti vedere una notifica visualizzata dal primo browser: 45282ab12b28b926.png

11. Congratulazioni!

Hai utilizzato Firebase SDK per Cloud Functions e aggiunto componenti lato server a un'app di chat.

Di cosa abbiamo parlato

  • Creazione di funzioni cloud utilizzando l'SDK Firebase per funzioni cloud.
  • Attiva le funzioni cloud in base agli eventi Auth, Cloud Storage e Cloud Firestore.
  • Aggiungi il supporto di Firebase Cloud Messaging alla tua app web.
  • Distribuisci le funzioni cloud utilizzando l'interfaccia a riga di comando di Firebase.

Prossimi passi

Per saperne di più