Funções do Cloud para Firebase

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

1. Visão Geral

Neste codelab, você aprenderá a usar o SDK do Firebase para Google Cloud Functions para melhorar um aplicativo Web de bate-papo e como usar o Cloud Functions para enviar notificações aos usuários do aplicativo de bate-papo.

3b1284f5144b54f6.png

O que você vai aprender

  • Crie o Google Cloud Functions usando o SDK do Firebase.
  • Acione o Cloud Functions com base em eventos Auth, Cloud Storage e Cloud Firestore.
  • Adicione o suporte do Firebase Cloud Messaging ao seu aplicativo da Web.

O que você precisará

  • Um cartão de crédito. O Cloud Functions para Firebase requer o plano Firebase Blaze, o que significa que você terá que ativar o faturamento em seu projeto Firebase usando um cartão de crédito.
  • O IDE/editor de texto de sua escolha, como WebStorm , Atom ou Sublime .
  • Um terminal para executar comandos shell com o NodeJS v9 instalado.
  • Um navegador como o Chrome.
  • O código de exemplo. Veja o próximo passo para isso.

2. Obtenha o código de amostra

Clone o repositório do GitHub na linha de comando:

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

Importar o aplicativo inicial

Usando seu IDE, abra ou importe o android_studio_folder.png diretório cloud-functions-start do diretório de código de amostra. Esse diretório contém o código inicial do codelab, que consiste em um aplicativo Web de bate-papo totalmente funcional.

3. Crie um projeto do Firebase e configure seu aplicativo

Criar projeto

No Firebase Console , clique em Add Project e chame-o de FriendlyChat .

Clique em Criar projeto .

Atualize para o plano Blaze

Para usar o Cloud Functions para Firebase, você precisará atualizar seu projeto do Firebase para o plano de faturamento Blaze . Isso exigirá que você adicione um cartão de crédito ou outro instrumento de faturamento à sua conta do Google Cloud.

Todos os projetos do Firebase, incluindo os do plano Blaze, ainda têm acesso às cotas de uso gratuito do Cloud Functions. As etapas descritas neste codelab estarão dentro dos limites de uso do nível gratuito. No entanto, você verá pequenas cobranças ( cerca de US$ 0,03 ) do Cloud Storage, que é usado para hospedar suas imagens de compilação do Cloud Functions.

Se você não tiver acesso a um cartão de crédito ou se sentir desconfortável em continuar com o plano Blaze, considere usar o Firebase Emulator Suite , que permitirá emular o Cloud Functions gratuitamente em sua máquina local.

Ativar autenticação do Google

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

No Firebase Console, abra a seção Build > Autenticação > guia Método de login (ou clique aqui para ir até lá). 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, sinta-se à vontade para definir o nome público do seu aplicativo como Friendly Chat :

8290061806aacb46.png

Ativar armazenamento em nuvem

O aplicativo usa o Cloud Storage para fazer upload de fotos. Para ativar o Cloud Storage em seu projeto do Firebase, acesse a seção Armazenamento e clique no botão Começar . Siga as etapas e, para o local do Cloud Storage, haverá um valor padrão a ser usado. Clique em Concluído depois.

Adicionar um aplicativo da Web

No Firebase Console, adicione um aplicativo da Web. Para fazer isso, vá para Configurações do projeto e role para baixo até Adicionar aplicativo . Escolha a web como a plataforma e marque a caixa para configurar o Firebase Hosting, registre o aplicativo e clique em Avançar para o restante das etapas e, por último, clique em Continuar no console .

4. Instale a interface de linha de comando do Firebase

A interface de linha de comando (CLI) do Firebase permitirá que você veicule o aplicativo Web localmente e implante seu aplicativo Web e o Cloud Functions.

Para instalar ou atualizar a 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 Firebase CLI está acima de 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 atualizar conforme mostrado acima.

Autorize a Firebase CLI executando:

firebase login

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

firebase use --add

Em seguida, selecione o ID do projeto e siga as instruções. Quando solicitado, você pode escolher qualquer Alias, como codelab .

5. Implante e execute o aplicativo Web

Agora que você importou e configurou seu projeto, está pronto para executar o aplicativo Web pela primeira vez! Abra uma janela de terminal, navegue até a pasta cloud-functions-start e implante o aplicativo da Web na hospedagem do Firebase usando:

firebase deploy --except functions

Esta é a saída do console que você deve 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

Abra o aplicativo da web

A última linha deve exibir o URL de hospedagem. O aplicativo da web agora deve ser veiculado a partir desse URL, que deve estar no formato https://<project-id>.firebaseapp.com. Abra. Você deve ver a interface do usuário em funcionamento de um aplicativo de bate-papo.

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

3b1284f5144b54f6.png

Se você entrar no aplicativo pela primeira vez em um novo navegador, certifique-se de permitir notificações quando solicitado: 8b9d0c66dc36153d.png

Precisaremos ativar as notificações posteriormente.

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

e926868b0546ed71.png

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

6. O Diretório de Funções

O Cloud Functions permite que você tenha facilmente código que é executado na nuvem sem precisar configurar um servidor. Veremos como criar funções que reagem a eventos de banco de dados Firebase Auth, Cloud Storage e Firebase Firestore. Vamos começar com Auth.

Ao usar o SDK do Firebase para Cloud Functions, seu código de funções ficará no diretório de functions (por padrão). Seu código do Functions também é um aplicativo Node.js e, portanto, precisa de um package.json que fornece algumas informações sobre seu aplicativo e lista as dependências.

Para facilitar para você, já criamos o arquivo functions/index.js onde seu código irá. Sinta-se à vontade para inspecionar este arquivo antes de prosseguir.

cd functions
ls

Se você não estiver familiarizado com o Node.js , aprender mais sobre ele antes de continuar o codelab seria útil.

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

npm install

Vamos agora dar uma olhada no 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 escreveremos três Funções no lugar dos TODOs. Vamos começar importando os módulos Node necessários.

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

Dois módulos serão necessários durante este codelab: firebase firebase-functions permite gravar gatilhos e logs 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, e isso acontece quando chamamos admin.initializeApp() sem argumentos.

Agora, vamos adicionar uma Função que é executada quando um usuário faz login pela primeira vez no aplicativo de bate-papo e adicionaremos uma mensagem de bate-papo para dar as boas-vindas ao usuário.

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

Estrutura de mensagens de bate-papo

As mensagens postadas no feed de bate-papo do FriendlyChat são armazenadas no Cloud Firestore. Vamos dar uma olhada na estrutura de dados que usamos para uma mensagem. Para fazer isso, poste uma nova mensagem no chat que diz "Hello World":

11f5a676fbb1a69a.png

Isso deve aparecer como:

fe6d1c020d0744cf.png

No Firebase Console, clique em Firestore Database na seção Build . Você deve ver a coleção de mensagens e um documento contendo a mensagem que você escreveu:

442c9c10b5e2b245.png

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

Adicionando mensagens de boas-vindas

A primeira Função do Cloud adiciona uma mensagem que dá as boas-vindas aos novos usuários ao chat. Para isso, podemos usar o acionador functions.auth().onCreate , que executa a função sempre que um usuário faz login pela primeira vez no aplicativo Firebase. Adicione a função addWelcomeMessages ao seu 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 de exports especial é a maneira do Node de tornar a função acessível fora do arquivo atual e é necessário 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. Estamos fazendo isso usando o método add na coleção de messages no 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 de gravar para que o Cloud Functions não seja executado muito cedo.

Implantar funções de nuvem

O Cloud Functions só ficará ativo depois de implantado. Para fazer isso, execute isso na linha de comando:

firebase deploy --only functions

Esta é a saída do console que você deve 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

Teste a função

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

  1. Abra seu aplicativo no navegador usando o URL de hospedagem (no formato https://<project-id>.firebaseapp.com ).
  2. Com um novo usuário, faça login pela primeira vez em seu aplicativo usando o botão Entrar .
  • Se você já tiver feito login no aplicativo, poderá abrir o Firebase Console Authentication e excluir sua conta da lista de usuários. Em seguida, faça login novamente.

262535d1b1223c65.png

  1. Depois de entrar, uma mensagem de boas-vindas deve ser exibida automaticamente:

1c70e0d64b23525b.png

9. Moderação de imagens

Os usuários podem fazer upload de todo tipo de imagem no chat, e é sempre importante moderar imagens ofensivas, principalmente em plataformas sociais públicas. No FriendlyChat, as imagens que estão sendo publicadas no chat são armazenadas no Google Cloud Storage .

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

Para moderar imagens, passaremos pelo seguinte processo:

  1. Verifique se a imagem está sinalizada como Adulta ou Violent usando a API Cloud Vision .
  2. Se a imagem tiver sido sinalizada, baixe-a na instância do Functions em execução.
  3. Desfoque a imagem usando ImageMagick .
  4. Faça upload da imagem borrada para o Cloud Storage.

Ative a API Cloud Vision

Como usaremos a API Google Cloud Vision nesta função, você deve ativar a API em seu projeto do Firebase. Siga este link , selecione seu projeto do Firebase e ative a API:

5c77fee51ec5de49.png

Instalar dependências

Para moderar imagens, usaremos a biblioteca de cliente do Google Cloud Vision para Node.js, @google-cloud/vision , para executar imagens por meio da API Cloud Vision para detectar imagens inadequadas.

Para instalar este pacote em seu aplicativo Cloud Functions, execute o seguinte comando npm install --save . Certifique-se de fazer isso no diretório de functions .

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

Isso instalará o pacote localmente e os adicionará como uma dependência declarada em seu 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 ) que precisaremos nesta seção, adicione as seguintes linhas ao topo do seu 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 sua função será executada em um ambiente do Google Cloud, não há necessidade de configurar as bibliotecas do Cloud Storage e do Cloud Vision: elas serão configuradas automaticamente para usar seu projeto.

Detectando imagens impróprias

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

Observe que 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 obtenha 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 pela API Cloud Vision para detectar se está sinalizada como adulta ou violenta. Se a imagem for detectada como inadequada com base nesses critérios, estamos desfocando a imagem, o que é feito na função blurImage como veremos a seguir.

Desfocando a imagem

Adicione a seguinte função blurImage em seu 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, o binário da imagem é baixado do Cloud Storage. A imagem é então desfocada usando a ferramenta de convert do ImageMagick, e a versão desfocada é carregada novamente no Storage Bucket. Em seguida, excluímos o arquivo na instância do Cloud Functions para liberar espaço em disco, e fazemos isso porque a mesma instância do Cloud Functions pode ser reutilizada e, se os arquivos não forem limpos, poderá ficar sem espaço em disco. Por fim, adicionamos um booleano à mensagem de bate-papo indicando que a imagem foi moderada, e isso acionará uma atualização da mensagem no cliente.

Implantar a função

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

firebase deploy --only functions

Esta é a saída do console que você deve 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

Teste a função

Depois que a função for implantada com sucesso:

  1. Abra seu aplicativo no navegador usando o URL de hospedagem (no formato https://<project-id>.firebaseapp.com ).
  2. Depois de fazer login no aplicativo, faça upload de uma imagem: 4db9fdab56703e4a.png
  3. Escolha sua melhor imagem ofensiva para enviar (ou você pode usar este zumbi comedor de carne !) e depois de alguns momentos, você verá sua postagem atualizar com uma versão borrada da imagem: 83dd904fbaf97d2b.png

10. Notificações de Novas Mensagens

Nesta seção, você adicionará uma Função do Cloud que envia notificações aos participantes do bate-papo quando uma nova mensagem é postada.

Com o Firebase Cloud Messaging (FCM), você pode enviar notificações de forma confiável aos usuários em todas as plataformas. Para enviar uma notificação a um usuário, você precisa do token do dispositivo FCM dele. O aplicativo web de bate-papo que estamos usando já coleta tokens de dispositivo dos usuários quando eles abrem o aplicativo pela primeira vez em um novo navegador ou dispositivo. Esses tokens são armazenados no Cloud Firestore na coleção fcmTokens .

Se você quiser saber como obter tokens de dispositivo FCM em um aplicativo da Web, acesse o Firebase Web Codelab .

Enviar notificações

Para detectar quando novas mensagens são postadas, você usará o acionador functions.firestore.document().onCreate 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 seu 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 admin.messaging().sendToDevice .

Limpe 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 em seu 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 implantá-la e, para implantá-la, execute isto na linha de comando:

firebase deploy --only functions

Esta é a saída do console que você deve 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

Teste a função

  1. Depois que a função for implantada com sucesso, abra seu aplicativo no navegador usando o URL de hospedagem (no formato https://<project-id>.firebaseapp.com ).
  2. Se você entrar no aplicativo pela primeira vez, certifique-se de permitir notificações quando solicitado: 8b9d0c66dc36153d.png
  3. Feche a guia do aplicativo de bate-papo ou exiba uma guia diferente: as notificações aparecem apenas se o aplicativo estiver em segundo plano. Se você quiser saber como receber mensagens enquanto seu aplicativo estiver em primeiro plano, consulte nossa documentação .
  4. Usando um navegador diferente (ou uma janela anônima), faça login no aplicativo e publique uma mensagem. Você deve ver uma notificação exibida pelo primeiro navegador: 45282ab12b28b926.png

11. Parabéns!

Você usou o SDK do Firebase para Cloud Functions e adicionou componentes do lado do servidor a um aplicativo de bate-papo.

O que cobrimos

  • Criação do Cloud Functions usando o SDK do Firebase para Cloud Functions.
  • Acione o Cloud Functions com base em eventos Auth, Cloud Storage e Cloud Firestore.
  • Adicione o suporte do Firebase Cloud Messaging ao seu aplicativo da Web.
  • Implante o Cloud Functions usando a Firebase CLI.

Próximos passos

Saber mais