Esta página foi traduzida pela API Cloud Translation.

Enviar notificações para um app da Web usando o Cloud Messaging e o Cloud Functions

1. Visão geral

Neste codelab, você vai aprender a usar o Cloud Functions para o Firebase e adicionar funcionalidades a um app de chat da Web enviando notificações aos usuários.

O que você vai aprender

Criar funções do Google Cloud Functions usando o SDK do Firebase
Acionar o Cloud Functions com base nos eventos Auth, Cloud Storage e Cloud Firestore
Tornar o app da Web compatível com o Firebase Cloud Messaging

Pré-requisitos

Um cartão de crédito. O Cloud Functions para Firebase requer o plano Firebase Blaze. Isso significa que você precisará ativar o faturamento no seu projeto do Firebase com um cartão de crédito.
O ambiente de desenvolvimento integrado/editor de texto que você preferir, como WebStorm, Atom ou Sublime.
Um terminal para executar comandos do shell com NodeJS v9 instalado.
Um navegador como o Chrome.
O exemplo de código. Confira a próxima etapa.

2. Acessar o exemplo de código

Clone o repositório do GitHub (link em inglês) na linha de comando:

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

Importar o app inicial

Usando seu ambiente de desenvolvimento integrado, abra ou importe o diretório cloud-functions-start do diretório de exemplo de código. Esse diretório contém o código inicial do codelab, que consiste em um app de chat da Web totalmente funcional.

3. Criar um projeto do Firebase e configurar seu app

Criar projeto

No Console do Firebase, clique em Adicionar projeto e chame-o de FriendlyChat.

Clique em Criar projeto.

Fazer upgrade para o plano Blaze

Para usar o Cloud Functions para Firebase e o Cloud Storage para Firebase, seu projeto do Firebase precisa estar no plano de preços de pagamento por uso (Blaze), o que significa que ele está vinculado a uma conta do Cloud Billing.

Uma conta do Cloud Billing exige uma forma de pagamento, como cartão de crédito.
Se você ainda não conhece o Firebase e o Google Cloud, confira se você se qualifica para receber um crédito de US$300 e uma conta de teste sem custo financeiro do Cloud Billing.
Se você estiver fazendo este codelab como parte de um evento, pergunte ao organizador se há créditos do Cloud disponíveis.

Se você não tiver acesso a um cartão de crédito ou não quiser continuar com o plano de preços Blaze, use o Pacote de emuladores do Firebase, que permite emular o Cloud Functions sem custo financeiro na máquina local.

Todos os projetos do Firebase, incluindo aqueles no plano de preços Blaze, ainda têm acesso às cotas de uso sem custos financeiros do Cloud Functions. As etapas descritas neste codelab se enquadram nos limites de uso do nível sem custo financeiro. No entanto, você vai notar pequenas cobranças (cerca de US$ 0,03) do Cloud Storage, que é usado para hospedar as imagens de build do Cloud Functions.

Para fazer upgrade do seu projeto para o plano Blaze, siga estas etapas:

No console do Firebase, selecione Fazer upgrade do seu plano.
Selecione o plano Blaze. Siga as instruções na tela para vincular uma conta do Cloud Billing ao seu projeto.
Se você precisou criar uma conta do Cloud Billing como parte desse upgrade, talvez seja necessário voltar ao fluxo de upgrade no console do Firebase para concluir o upgrade.

Ativar o Google Auth

Para permitir que os usuários façam login no app, vamos usar a autenticação do Google, que precisa ser ativada.

No Console do Firebase, abra a seção Versão > Autenticação > guia Método de login (ou clique aqui para acessar). Em seguida, ative o provedor de login do Google e clique em Salvar. Isso permitirá que os usuários façam login no aplicativo da Web com suas Contas do Google.

Além disso, fique à vontade para definir o nome público do app como Friendly Chat:

Configurar o Cloud Storage para Firebase

O app usa o Cloud Storage para fazer upload de fotos.

Confira como configurar o Cloud Storage para Firebase no seu projeto do Firebase:

No painel esquerdo do Console do Firebase, expanda Build e selecione Storage.
Clique em Começar.
Selecione um local para o bucket do Storage padrão.
Os buckets em US-WEST1, US-CENTRAL1 e US-EAST1 podem aproveitar o nível "Sempre gratuito" do Google Cloud Storage. Os buckets em todos os outros locais seguem os preços e o uso do Google Cloud Storage.
Clique em Iniciar no modo de teste. Leia a exoneração de responsabilidade sobre as regras de segurança.
Não distribua nem exponha um app publicamente sem adicionar regras de segurança ao bucket do Storage.
Clique em Criar.

Adicionar um app da Web

No Console do Firebase, adicione um app da Web. Para isso, acesse Configurações do projeto e role a tela para baixo até Adicionar app. Escolha a Web como plataforma e marque a caixa para configurar o Firebase Hosting. Em seguida, registre o app e clique em Próxima para concluir as etapas restantes. Por fim, clique em Continuar para o console.

4. Instalar a interface de linha de comando do Firebase

A interface de linha de comando (CLI) do Firebase permite disponibilizar o app da Web localmente e implantar o app da Web e o Cloud Functions.

Para instalar ou fazer upgrade da CLI, execute o seguinte comando npm:

npm -g install firebase-tools

Para verificar se a CLI foi instalada corretamente, abra um console e execute:

firebase --version

Verifique se a versão da CLI do Firebase é superior à 4.0.0 para que ela tenha todos os recursos mais recentes necessários para o Cloud Functions. Caso contrário, execute npm install -g firebase-tools para fazer upgrade, conforme mostrado acima.

Autorize a CLI do Firebase executando o seguinte comando:

firebase login

Verifique se você está no diretório cloud-functions-start e configure a CLI do Firebase para usar seu projeto do Firebase:

firebase use --add

Em seguida, selecione o ID do projeto e siga as instruções. Quando solicitado, escolha qualquer alias, como codelab.

5. Implante e execute o app da Web

Agora que você importou e configurou seu projeto, está tudo pronto para executar o app da Web pela primeira vez. Abra uma janela de terminal, navegue até a pasta cloud-functions-start e implante o app da Web no Firebase Hosting usando:

firebase deploy --except functions

Esta é a resposta do console que você deverá 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

Abrir o app da Web

A última linha vai mostrar o URL de hospedagem. O app da Web será exibido por esse URL, que precisa estar no formato https://<project-id>.firebaseapp.com. Abra-o. Você verá a IU de um app de chat.

Faça login no app usando o botão FAZER LOGIN COM O GOOGLE e sinta-se à vontade para adicionar algumas mensagens e postar imagens:

Se você fizer login no app pela primeira vez em um novo navegador, permita as notificações quando solicitado:

As notificações vão precisar ser ativadas mais tarde.

Se você clicou acidentalmente em Bloquear, pode mudar essa configuração clicando no botão 🔒 Seguro à esquerda do URL na omnibox do Chrome e alternando a barra ao lado de Notificações:

Agora, vamos adicionar algumas funcionalidades usando o SDK do Firebase para Cloud Functions.

6. O diretório de funções

Com o Cloud Functions, é fácil ter código que é executado no Cloud sem precisar configurar um servidor. Vamos mostrar como criar funções que reagem aos eventos do banco de dados do Firebase Auth, Cloud Storage e Firebase Firestore. Vamos começar com o Auth.

Ao usar o SDK do Firebase para Cloud Functions, o código do Functions fica no diretório functions (por padrão). O código do Functions também é um app do Node.js e, portanto, precisa de um package.json que forneça algumas informações sobre o aplicativo e liste as dependências.

Para facilitar, já criamos o arquivo functions/index.js, onde o código será colocado. Sinta-se à vontade para inspecionar esse arquivo antes de continuar.

cd functions
ls

Se você não conhece o Node.js, saiba mais sobre ele antes de continuar o codelab.

O arquivo package.json já lista duas dependências necessárias: o SDK do Firebase para Cloud Functions e o SDK Admin do Firebase. Para instalá-los localmente, acesse a pasta functions e execute:

npm install

Vamos analisar o arquivo 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.

Importaremos os módulos necessários e, em seguida, escreveremos três funções no lugar de TODOs. Vamos começar importando os módulos Node necessários.

7. Importe os módulos do Cloud Functions e do Firebase Admin

Dois módulos serão necessários durante este codelab: firebase-functions permite gravar acionadores e registros do Cloud Functions, enquanto firebase-admin permite usar a plataforma Firebase em um servidor com acesso de administrador para realizar ações como gravar no Cloud Firestore ou enviar notificações do FCM.

No arquivo index.js, substitua o primeiro TODO pelo seguinte:

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.

O SDK Admin do Firebase pode ser configurado automaticamente quando implantado em um ambiente do Cloud Functions ou em outros contêineres do Google Cloud Platform. Isso acontece quando chamamos admin.initializeApp() sem argumentos.

Agora, vamos adicionar uma função que será executada quando um usuário fizer login pela primeira vez no app de chat. Adicionaremos uma mensagem de chat para dar as boas-vindas ao usuário.

8. Dê boas-vindas aos novos usuários

Estrutura de mensagens do chat

As mensagens postadas no feed de chat do FriendlyChat são armazenadas no Cloud Firestore. Vamos conferir a estrutura de dados que usamos para uma mensagem. Para fazer isso, envie uma nova mensagem no chat dizendo "Hello World":

Ele deve aparecer assim:

No Console do Firebase, clique em Banco de dados do Firestore na seção Build. Serão exibidos a coleção de mensagens e um documento com a mensagem que você escreveu:

Como você pode ver, as mensagens de chat são armazenadas no Cloud Firestore como um documento com os atributos name, profilePicUrl, text e timestamp adicionados à coleção messages.

Como adicionar mensagens de boas-vindas

A primeira função do Cloud adiciona uma mensagem de boas-vindas aos novos usuários no chat. Para isso, podemos usar o gatilho functions.auth().onCreate, que executa a função sempre que um usuário faz login pela primeira vez no app do Firebase. Adicione a função addWelcomeMessages ao arquivo 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.');
});

Adicionar essa função ao objeto exports especial é a maneira de o Node tornar a função acessível fora do arquivo atual e é obrigatória para o Cloud Functions.

Na função acima, estamos adicionando uma nova mensagem de boas-vindas postada pelo "Firebase Bot" à lista de mensagens de chat. Para isso, usamos o método add na coleção messages do Cloud Firestore, que é onde as mensagens do chat são armazenadas.

Como essa é uma operação assíncrona, precisamos retornar a Promise indicando quando o Cloud Firestore terminou a gravação para que o Cloud Functions não seja executado muito cedo.

Implantar o Cloud Functions

Os Cloud Functions só ficam ativos depois de serem implantados. Para fazer isso, execute o seguinte na linha de comando:

firebase deploy --only functions

Esta é a resposta do console que você deverá 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

Testar a função

Depois que a função for implantada, você precisará de um usuário que faça login pela primeira vez.

Abra o app no navegador usando o URL de hospedagem (no formato https://<project-id>.firebaseapp.com).
Com um novo usuário, faça login pela primeira vez no app usando o botão Fazer login.

Se você já tiver feito login no app, abra a Authentication do Console do Firebase e exclua sua conta da lista de usuários. Em seguida, faça login novamente.

Após o login, uma mensagem de boas-vindas será exibida automaticamente:

9. Moderação de imagens

Os usuários podem fazer upload de todos os tipos de imagens no chat, e é sempre importante moderar imagens ofensivas, especialmente em plataformas sociais públicas. No FriendlyChat, as imagens que estão sendo publicadas no chat são armazenadas em buckets do Cloud Storage.

Com o Cloud Functions, você pode detectar novos uploads de imagens usando o acionador functions.storage().onFinalize. Ele será executado sempre que um novo arquivo for carregado ou modificado no Cloud Storage.

Para moderar imagens, realizaremos o seguinte processo:

Verifique se a imagem está sinalizada como "Para adultos" ou "Violenta" usando a API Cloud Vision.
Se a imagem tiver sido sinalizada, faça o download na instância do Functions em execução.
Desfoque a imagem usando o ImageMagick.
Faça upload da imagem borrada no Cloud Storage.

Ative a API Cloud Vision

A API Google Cloud Vision será usada nessa função. Por isso, você precisa ativar a API no seu projeto do Firebase. Acesse este link, selecione seu projeto do Firebase e ative a API:

Instalar dependências

Para moderar imagens, vamos usar a biblioteca de cliente do Google Cloud Vision para Node.js, @google-cloud/vision, para executar imagens na API Cloud Vision e detectar imagens inadequadas.

Para instalar esse pacote no app Cloud Functions, execute o comando npm install --save a seguir. Faça isso no diretório functions.

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

Isso vai instalar o pacote localmente e adicioná-lo como uma dependência declarada no arquivo package.json.

Importar e configurar dependências

Para importar as dependências que foram instaladas e alguns módulos principais do Node.js (path, os e fs) necessários nesta seção, adicione as seguintes linhas à parte de cima do arquivo 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');

Como a função será executada em um ambiente do Google Cloud, não é necessário configurar as bibliotecas do Cloud Storage e do Cloud Vision. Elas serão configuradas automaticamente para usar seu projeto.

Como detectar imagens inadequadas

Você vai usar o gatilho functions.storage.onChange do Cloud Functions, que executa o código assim que um arquivo ou uma pasta é criado ou modificado em um bucket do Cloud Storage. Adicione a função blurOffensiveImages ao arquivo 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.');
    });

Adicionamos algumas configurações da instância do Cloud Functions que executará a função. Com .runWith({memory: '2GB'}), estamos solicitando que a instância receba 2 GB de memória em vez do padrão, porque essa função consome muita memória.

Quando a função é acionada, a imagem é executada na API Cloud Vision para detectar se ela foi sinalizada como conteúdo adulto ou violento. Se a imagem for detectada como inadequada com base nesses critérios, ela será desfocada, o que é feito na função blurImage, como veremos a seguir.

Desfocar a imagem

Adicione a seguinte função blurImage ao arquivo 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.');
}

Na função acima, é feito o download do binário da imagem do Cloud Storage. Em seguida, a imagem é desfocada usando a ferramenta convert do ImageMagick, e a versão desfocada é carregada novamente no bucket do Storage. Em seguida, excluímos o arquivo na instância do Cloud Functions para liberar espaço em disco. Isso é feito porque a mesma instância do Cloud Functions pode ser reutilizada e, se os arquivos não forem limpos, ela poderá ficar sem espaço em disco. Por fim, adicionamos um booleano à mensagem do chat indicando que a imagem foi moderada, o que aciona uma atualização da mensagem no cliente.

Implantar a função

A função só vai ficar ativa depois de ser implantada. Na linha de comando, execute firebase deploy --only functions:

firebase deploy --only functions

Esta é a resposta do console que você deverá 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

Testar a função

Depois que a função for implantada, faça o seguinte:

Abra o app no navegador usando o URL de hospedagem (no formato https://<project-id>.firebaseapp.com).
Depois de fazer login no app, faça upload de uma imagem:
Escolha uma imagem bastante ofensiva para fazer upload ou use este zumbi comendo carne humana. Depois de alguns instantes, você vai notar que a postagem foi atualizada com uma versão borrada da imagem:

10. Notificações de novas mensagens

Nesta seção, você vai adicionar uma função do Cloud que envia notificações aos participantes do chat quando uma nova mensagem é postada.

Com o Firebase Cloud Messaging (FCM), é possível enviar notificações de forma confiável aos usuários em várias plataformas. Para enviar uma notificação a um usuário, você precisa do token de dispositivo do FCM dele. O app de chat da Web que usamos já coleta tokens de dispositivo dos usuários quando eles abrem o app pela primeira vez em um novo navegador ou dispositivo. Esses tokens são armazenados no Cloud Firestore na coleção fcmTokens.

Se quiser saber como acessar os tokens de dispositivo do FCM em um app da Web, consulte o Firebase Web Codelab.

Enviar notificações

Para detectar quando novas mensagens são postadas, use o gatilho functions.firestore.document().onCreate do Cloud Functions, que executa seu código quando um novo objeto é criado em um determinado caminho do Cloud Firestore. Adicione a função sendNotifications ao arquivo 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.');
    }
  });

Na função acima, estamos reunindo os tokens de dispositivo de todos os usuários do banco de dados do Cloud Firestore e enviando uma notificação para cada um deles usando a função admin.messaging().sendToDevice.

Limpar os tokens

Por fim, queremos remover os tokens que não são mais válidos. Isso acontece quando o token que recebemos do usuário não está mais sendo usado pelo navegador ou dispositivo. Por exemplo, isso acontece se o usuário revogou a permissão de notificação para a sessão do navegador. Para fazer isso, adicione a seguinte função cleanupTokens ao arquivo 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);
}

Implantar a função

A função só ficará ativa depois de implantada. Para implantá-la, execute o seguinte na linha de comando:

firebase deploy --only functions

Esta é a resposta do console que você deverá 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

Testar a função

Depois que a função for implantada, abra o app no navegador usando o URL de hospedagem (no formato https://<project-id>.firebaseapp.com).
Se você fizer login no app pela primeira vez, permita as notificações quando solicitado:
Fechar a guia do app de chat ou mostrar outra guia: as notificações só vão aparecer se o app estiver em segundo plano. Para saber como receber mensagens enquanto o app está em primeiro plano, consulte nossa documentação.
Usando um navegador diferente (ou uma janela anônima), faça login no app e poste uma mensagem. Você vai notar uma notificação exibida pelo primeiro navegador:

11. Parabéns!

Você usou o SDK do Firebase para o Cloud Functions e adicionou componentes do servidor a um app de chat.

O que vimos

Criar Funções do Cloud usando o SDK do Firebase para o Cloud Functions
Acionar o Cloud Functions com base nos eventos Auth, Cloud Storage e Cloud Firestore
Tornar o app da Web compatível com o Firebase Cloud Messaging
Implante o Cloud Functions usando a CLI do Firebase.

Próximas etapas

Saiba mais sobre outros tipos de acionadores da Função do Cloud.
Use o Firebase e o Cloud Functions com seu app.

Enviar notificações para um app da Web usando o Cloud Messaging e o Cloud Functions

1. Visão geral

O que você vai aprender

Pré-requisitos

2. Acessar o exemplo de código

Importar o app inicial

3. Criar um projeto do Firebase e configurar seu app

Criar projeto

Fazer upgrade para o plano Blaze

Ativar o Google Auth

Configurar o Cloud Storage para Firebase

Adicionar um app da Web

4. Instalar a interface de linha de comando do Firebase

5. Implante e execute o app da Web

Abrir o app da Web

6. O diretório de funções

index.js

7. Importe os módulos do Cloud Functions e do Firebase Admin

index.js

8. Dê boas-vindas aos novos usuários

Estrutura de mensagens do chat

Como adicionar mensagens de boas-vindas

index.js

Implantar o Cloud Functions

Testar a função

9. Moderação de imagens

Ative a API Cloud Vision

Instalar dependências

Importar e configurar dependências

index.js

Como detectar imagens inadequadas

index.js

Desfocar a imagem

index.js

Implantar a função

Testar a função

10. Notificações de novas mensagens

Enviar notificações

index.js

Limpar os tokens

index.js

Implantar a função

Testar a função

11. Parabéns!

O que vimos

Próximas etapas

Saiba mais