Adicione novas funcionalidades ao seu app da Web rapidamente com as Extensões do Firebase

1. Introdução

Metas

Neste codelab, você vai adicionar funcionalidades a um app de mercado on-line com a ajuda das Extensões do Firebase. Neste codelab, você vai entender como as extensões podem ajudar você a passar menos tempo em tarefas de desenvolvimento e gerenciamento de apps.

O que você vai criar

Neste codelab, você vai adicionar os seguintes recursos a um app da Web de marketplace on-line:

• Carregue imagens mais rápido para aumentar a retenção de usuários
• Limite as entradas do banco de dados para melhorar o desempenho e reduzir o faturamento
• Implemente a exclusão automática de dados antigos de usuários para melhorar a proteção deles

O que você aprenderá

• Como descobrir extensões para casos de uso comuns
• Como instalar e configurar uma extensão no projeto
• Como manter (monitorar, atualizar e desinstalar) extensões no seu projeto

O foco deste codelab são as Extensões do Firebase. Para informações detalhadas sobre outros produtos do Firebase mencionados neste codelab, consulte a documentação do Firebase e outros codelabs.

Pré-requisitos

• Um computador com um navegador da Web moderno instalado (recomendamos o Chrome)
• Uma Conta do Google

2. Criar e configurar um projeto do Firebase

criar um projeto do Firebase

1. No Console do Firebase, clique em Adicionar projeto e nomeie o projeto como FriendlyMarket.
2. Clique nas opções de criação do projeto. Aceite os termos do Firebase. Pular a configuração do Google Analytics, porque ele não será usado neste app.
3. Aguarde o projeto ser provisionado e clique em Continuar.

O aplicativo que você vai criar usa alguns produtos do Firebase disponíveis para apps da Web:

• Firebase Authentication: usado para identificar os usuários com facilidade
• Use o Firebase Realtime Database para salvar dados estruturados na nuvem e receber notificações instantâneas quando os dados forem atualizados.
• Cloud Storage para Firebase: usado para salvar imagens na nuvem

Agora, você ativará e configurará esses produtos do Firebase usando o Console do Firebase.

Ativar login por e-mail

Embora a autenticação não seja o foco deste codelab, é importante ter alguma forma de autenticação no seu app para identificar exclusivamente quem a usa. Você usará o login por e-mail.

1. No Console do Firebase, clique em Desenvolver no painel esquerdo.
2. Clique em Autenticação e, em seguida, na guia Método de login (ou clique aqui para acessar a guia Método de login).
3. Clique em E-mail/senha na lista Provedores de login, ative a opção Ativar e clique em Salvar.

Ativar o Realtime Database

O app usa o Firebase Realtime Database para salvar itens para venda.

1. Na seção Desenvolver no painel esquerdo do Console do Firebase, clique em Banco de dados.
2. Role a página para baixo depois do painel do Cloud Firestore e clique em Criar banco de dados no painel do Realtime Database.

3. Selecione Iniciar no modo bloqueado e clique em Ativar.

Defina regras de segurança

Agora você definirá as regras de segurança necessárias para o app. Estes são alguns exemplos de regras básicas que ajudam a proteger o app. Com elas, qualquer pessoa pode ver itens à venda, mas elas permitem que apenas usuários conectados façam outras leituras e gravações. Não se preocupe com os detalhes dessas regras. Você só vai copiar e colar as regras para que seu app comece a funcionar.

1. Na parte superior do painel do Realtime Database, clique na guia Regras.

2. Copie e cole o seguinte conjunto de regras no campo "Regras" da guia Regras:

{
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}

3. Clique em Publicar.

Ative o Cloud Storage

O app usa o Cloud Storage para Firebase para salvar imagens de itens para venda.

1. Na seção Desenvolver no painel esquerdo do Console do Firebase, clique em Armazenamento.
2. Clique em Começar.

3. Aceite os padrões para criar o bucket de armazenamento padrão (clique em Próximo, mantenha o local padrão e clique em Concluído).

Agora, você definirá as regras de segurança necessárias para o app. Essas regras só permitem que usuários autenticados postem novas imagens, mas permitem que qualquer pessoa veja a imagem de um item listado.

1. Na parte superior do painel Armazenamento, clique na guia Regras.

2. Copie e cole o seguinte conjunto de regras no campo "Regras" da guia Regras:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    
    match /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
    
  }
}

3. Clique em Publicar.

3. Executar o app de amostra

Dividir o projeto StackBlitz

Neste codelab, você vai criar e implantar um app usando o StackBlitz, um editor on-line que tem vários fluxos de trabalho do Firebase integrados. Não é preciso instalar software nem ter uma conta especial do StackBlitz.

O StackBlitz permite compartilhar projetos com outras pessoas. Outras pessoas que têm o URL do seu projeto do StackBlitz podem ver o código e bifurcar o projeto, mas não podem editá-lo.

1. Acesse este URL para ver o código inicial: https://stackblitz.com/edit/Friendlymarket-codelab.
2. Na parte superior da página do StackBlitz, clique em Fork.

Agora você tem uma cópia do código inicial como seu próprio projeto do StackBlitz. Como você não fez login, o nome da sua "conta" é @anonymous, mas não tem problema. O projeto tem um nome exclusivo e um URL exclusivos. Todos os seus arquivos e alterações são salvos nesse projeto do StackBlitz.

Adicionar um app da Web do Firebase ao projeto

1. No StackBlitz, veja o arquivo src/firebase-config.js. É aqui que você adicionará o objeto de configuração do Firebase.
2. De volta ao console do Firebase, navegue até a página de visão geral do projeto clicando em Visão geral do projeto no canto superior esquerdo.
3. No centro da página de visão geral do projeto, clique no ícone da Web para criar um novo app da Web do Firebase.
4. Registre o app com o apelido FriendlyMarket Codelab.
5. Para este codelab, não marque a caixa ao lado de Também configurar o Firebase Hosting para este app. Você usará o painel de visualização do StackBlitz.
6. Clique em Registrar app.
7. Copie o objeto de configuração do Firebase do seu app para a área de transferência. Não copie as tags <script>. Observação: se você precisar encontrar a configuração mais tarde, siga estas instruções.

8. Clique em Continuar para o Console.

Adicione a configuração do projeto ao seu app:

1. De volta ao StackBlitz, acesse o arquivo src/firebase-config.js.
2. Cole o snippet de configuração no arquivo. Depois disso, o código ficará assim (mas com os valores do seu projeto no objeto de configuração):

Qual é o ponto de partida para este app?

Dê uma olhada na visualização interativa no lado direito da tela do StackBlitz:

Este codelab começa com o código de um app básico do Marketplace. Qualquer usuário pode conferir uma lista de itens à venda e clicar em um link para acessar a página de detalhes de um item. Se um usuário estiver conectado, ele verá as informações de contato do vendedor para negociar um preço e comprar o item.

Teste o app:

1. Faça login com o botão na parte de cima da tela inicial. Você pode usar um endereço de e-mail, um nome e uma senha falsos.
2. Clique no botão Vender algo no canto inferior direito para criar uma listagem.
3. Em Título, insira Xylophone.
4. Em Preço perguntando, insira 50.
5. Em Descrição do item, insira o seguinte: This high quality xylophone can be used to play music.
6. Faça o download desta imagem de um xilofone no computador e faça o upload com o botão PICTURE OF YOUR ITEM.

file_downloadFazer o download da imagem

7. Após preencher todos os campos e fazer o upload de uma imagem, clique em Postar.
8. Encontre sua nova página de detalhes. Clique no item para ver a tela de detalhes e expanda o painel Dados de contato do vendedor.
9. Volte para o Console do Firebase. No painel Banco de dados, vai aparecer uma entrada para o item postado no nó forsale. No painel Armazenamento, você também encontra a imagem que enviou no caminho friendlymarket.

4. Encontrar e instalar uma extensão

O problema

Depois de fazer algumas pesquisas de usuário para seu aplicativo, você descobre que a maioria dos usuários acessa seu site a partir do smartphone, não do computador. No entanto, suas estatísticas também mostram que os usuários de dispositivos móveis tendem a sair do site ("desistência") após apenas alguns segundos.

Curiosamente, você testa seu site com as velocidades de conexão móvel. Saiba como fazer isso aqui. Você descobre que as imagens demoram muito para carregar e não estão armazenadas em cache no navegador. Esse longo tempo de carregamento ocorre em todas as visualizações de página.

Solução

Depois de ler como otimizar imagens, você decide seguir duas etapas para melhorar o desempenho de carregamento de imagens:

• Compacte as imagens. Até mesmo celulares tiram imagens com resolução muito maior do que o necessário para as necessidades deste aplicativo. Reduzir o tamanho do arquivo acelera o tempo de carregamento sem uma queda perceptível na resolução do aplicativo.
• Armazenamento em cache. Por padrão, os objetos do Cloud Storage têm cabeçalhos que orientam os navegadores a não armazenar imagens em cache. Isso significa que o navegador do usuário fará o download da mesma imagem diversas vezes. Felizmente, você pode alterar esses cabeçalhos para permitir o armazenamento em cache. O SDK do Cloud Storage do lado do cliente e o SDK Admin do Firebase permitem que você defina esses cabeçalhos.

Para compactar imagens, você precisa limitar a qualidade do upload ou ter um processo do lado do servidor que redimensione as imagens. Vamos considerar as vantagens e desvantagens:

• Lado do cliente Para um processo do lado do cliente, é possível simplesmente limitar o tamanho do arquivo para as imagens enviadas. Isso significa que você não precisa escrever ou manter novas lógicas de servidor. No entanto, isso também significa que os vendedores precisam descobrir como redimensionar as próprias imagens, o que é uma barreira dolorosa e não intuitiva para criar uma nova página de detalhes.
• Lado do servidor. Se você usar o Cloud Functions para Firebase, será possível acionar uma função que redimensiona automaticamente uma imagem no upload. Isso significa que os vendedores podem fazer upload do tamanho de imagem que quiserem (sem trabalho extra para eles) e a função de back-end pode redimensionar a imagem sem problemas. Existe até uma amostra disponível para essa função.

Parece que o lado do servidor é o caminho a seguir, mas essa ideia ainda envolve clonar o exemplo, seguir as instruções de configuração dele e, em seguida, implantar a função com a CLI do Firebase. O redimensionamento de imagens parece um caso de uso comum. Não existe uma solução mais fácil?

Uma solução mais fácil

Você está com sorte. Existe uma solução mais fácil: as Extensões do Firebase! Vamos conferir o catálogo de extensões disponíveis no site do Firebase.

Veja só! Há uma extensão chamada "Resize Images". Isso parece promissor.

Vamos usar essa extensão no seu app.

Instalar uma extensão

1. Clique em Ver detalhes para mais informações sobre a extensão. Em O que você pode configurar, a extensão permite definir as dimensões que você quer redimensionar, e é possível até mesmo definir o cabeçalho do cache. Perfeito!
2. Clique no botão Install in console na página de detalhes da extensão. Você será direcionado a uma página do Console do Firebase que lista todos os seus projetos.
3. Escolha o projeto FriendlyMarket que você criou para este codelab.
4. Siga as instruções na tela até chegar à etapa Configurar extensão. As instruções vão mostrar um resumo básico da extensão, bem como os recursos que ela vai criar e os papéis de acesso necessários.
5. No campo **Cache-Control**cabeçalho para imagens redimensionadas, digite o seguinte:

public, max-age=31536000

6. Não altere os valores dos outros parâmetros.
7. Clique em Instalar extensão.

Enquanto você aguarda a conclusão da instalação...

Como instalar com a interface de linha de comando do Firebase

Se você preferir usar ferramentas de linha de comando, as extensões também poderão ser instaladas e gerenciadas usando a CLI do Firebase. Basta usar o comando firebase ext, disponível na versão mais recente da CLI. Confira mais informações neste link.

(Opcional) Saiba mais sobre cabeçalhos de controle de cache

O valor de cabeçalho Cache-Control public, max-age=31536000 significa que a imagem será armazenada em cache por até um ano. Para saber mais sobre o cabeçalho Cache-Control, confira esta documentação.

Atualizar código do cliente

A extensão instalada grava uma imagem redimensionada no mesmo bucket da imagem original. A imagem redimensionada tem as dimensões configuradas anexadas ao nome do arquivo. Portanto, se o caminho do arquivo original for friendlymarket/user1234-car.png, o caminho do arquivo da imagem redimensionada será semelhante a friendlymarket/user1234-car_200x200.png.

Vamos atualizar o app para que ele busque as imagens redimensionadas em vez das imagens no tamanho original.

1. No StackBlitz, abra o arquivo src/firebase-refs.js.
2. Substitua a função getImageRef atual pelo código abaixo para criar uma referência para a imagem redimensionada:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Testar

Como essa extensão aguarda novos uploads, a atual não será redimensionada.

Crie uma nova postagem para conferir a extensão em ação:

1. Clique em Friendly Market na barra superior do seu app para navegar até a tela inicial.
2. Clique no botão Vender algo no canto inferior direito do app para criar uma página de detalhes.
3. Em Título, insira Coffee.
4. Em Preço perguntando, insira 1
5. Em Item Description, insira o seguinte: Selling one cafe latte. It has foam art in the shape of a bear.
6. Faça o download desta imagem de uma xícara de café no computador e faça o upload com o botão PITURA DO SEU ITEM. file_downloadFazer o download da imagem
7. Após preencher todos os campos e fazer o upload de uma imagem, clique em Postar. Você verá a lista de cafés abaixo do xilofone.
8. No painel Funções do Console do Firebase, clique na guia Registros. Você vai encontrar registros da função que mostram que ela foi executada.

9. Acesse o painel Armazenamento para ver a imagem de café original e uma versão redimensionada no caminho friendlymarket.
10. No painel de visualização do StackBlitz, recarregue a tela inicial do app algumas vezes. A imagem do café será carregada de maneira significativamente mais rápida do que a do xilofone.

A imagem carrega mais rápido no primeiro carregamento de página porque é menor e, nas atualizações de páginas subsequentes, ela é carregada do cache do navegador em vez de acionar uma solicitação de rede.

5. Reconfigurar uma extensão

O problema

Seu app salva automaticamente versões de rascunho da página de detalhes do vendedor. Seus usuários gostam desse recurso, mas suas estatísticas são um pouco preocupadas. Seus relatórios dizem que apenas cerca de 10% dos rascunhos foram realmente postados, e os outros 90% estão apenas ocupando espaço em seu banco de dados.

Solução

Depois de alguns cálculos indiretos, você percebe que só precisa salvar cerca de cinco rascunhos a cada vez.

Lembra-se do catálogo de Extensões do Firebase? Talvez já exista uma solução criada para essa situação. Vamos instalar a extensão Limit Child Nodes para manter automaticamente o número de rascunhos salvos em cinco ou menos. A extensão exclui o rascunho mais antigo sempre que um novo é adicionado.

1. Clique no botão Install na página de detalhes da extensão.
2. Escolha o projeto do Firebase que você está usando no app da Web do Marketplace.
3. Siga as instruções na tela até chegar à etapa Configurar extensão.
4. Para o Caminho do Realtime Database, insira drafts. Esse é o caminho no banco de dados onde os rascunhos são salvos.
5. Em Número máximo de nós a serem mantidos, insira 5. Isso significa que cinco rascunhos da página de detalhes de cada item serão salvos e, se outro for adicionado, o rascunho mais antigo será excluído automaticamente.
6. Clique em Instalar extensão.

Enquanto você aguarda a conclusão da instalação...

Extensões de monitoramento

Quando você instala uma extensão, o processo cria várias funções. É possível verificar com que frequência essas funções são executadas ou visualizar registros e taxas de erro. Para informações detalhadas sobre como monitorar sua extensão, consulte Gerenciar extensões instaladas. Siga as instruções da documentação para visualizar as funções criadas pela extensão Resize Images na etapa anterior.

Como desinstalar extensões

Para remover uma extensão do seu projeto, você pode ficar tentado a excluir as funções individuais que uma extensão cria, mas isso pode levar a um comportamento inesperado, já que uma extensão pode criar várias funções. Saiba como desinstalar uma extensão na documentação.

A desinstalação exclui todos os recursos (como funções da extensão) e a conta de serviço criada para essa instância da extensão. No entanto, os artefatos criados pela extensão (como as imagens redimensionadas) permanecerão no seu projeto após a desinstalação da extensão.

Como instalar várias cópias de uma extensão em um único projeto

Você não precisa instalar uma única instância de uma determinada extensão em um projeto. Se quiser limitar entradas em outro caminho, instale outra instância dessa extensão. No entanto, para os fins deste codelab, você vai instalar a extensão apenas uma vez.

Veja isso na prática

1. Verifique se você fez login com a conta usada para postar o xilofone ou o café com leite.
2. Gere alguns rascunhos:
3. Clique no botão Vender algo no canto inferior direito do app.
4. Edite o título para dizer "Rascunho 1".
5. Role para baixo até a seção Rascunhos e veja o número de rascunhos. Deve haver pelo menos dois.
6. Clique no botão MERCADO OTIMIZADO na barra de apps superior. Dessa forma, você terá um rascunho salvo, mas não precisa postá-lo.
7. Repita para o "Rascunho 2", "Rascunho 3" e assim por diante até o "Rascunho 6".
8. Quando você criar um "Rascunho 6", observe que esse último desaparece da seção Rascunhos.
9. Assim como você fez com a extensão Resize Images, verifique os registros de funções para saber quais funções foram acionadas.

O limite de rascunhos a serem mantidos é muito pequeno

A equipe de suporte ao cliente entrou em contato com você para informar que alguns dos seus vendedores mais produtivos estão reclamando que os rascunhos deles estão sendo excluídos antes da publicação. Você confere seus cálculos com o colega de equipe e percebe que ela estava errada em 10.000!

Como você pode corrigir isso? Vamos reconfigurar a extensão instalada.

1. No painel esquerdo do Console do Firebase, clique em Extensões.
2. No card da extensão instalada, clique em Gerenciar.
3. No canto superior direito, clique em Reconfigurar extensão.
4. Altere Número máximo de nós a serem mantidos para 50000.
5. Clique em Salvar.

Isso é tudo o que você precisa fazer. Enquanto a extensão leva para ser atualizada, converse com a equipe de suporte e informe que uma correção já está sendo implantada.

6. Excluir os dados do usuário automaticamente

O problema

Sua equipe de suporte ao cliente entrou em contato com você novamente. Os vendedores que excluíram as contas ainda estão recebendo e-mails de outros usuários e estão com raiva! Esses vendedores esperavam que os endereços de e-mail deles fossem excluídos dos seus sistemas quando excluíssem as contas.

Por enquanto, o suporte exclui manualmente os dados de cada usuário, mas deve haver uma maneira melhor. Pense nisso e considere escrever seu próprio job em lote que seja executado periodicamente e apague endereços de e-mail de contas excluídas. Mas a exclusão dos dados dos usuários parece um problema bastante comum. Talvez as Extensões do Firebase também possam ajudar a resolver esse problema.

Solução

Configure a extensão Excluir dados do usuário para excluir automaticamente o nó users/uid do banco de dados quando um usuário excluir a conta.

1. Clique no botão Install na página de detalhes da extensão.
2. Escolha o projeto do Firebase que você está usando no app da Web do Marketplace.
3. Siga as instruções na tela até chegar à etapa Configurar extensão.
4. Para Caminhos do Realtime Database, insira sellers/{UID}. A parte sellers é o nó cujos filhos contêm endereços de e-mail do usuário, e {UID} é um caractere curinga. Com essa configuração, a extensão vai saber que, quando o usuário com o UID 1234 excluir a conta, a extensão precisará remover sellers/1234 do banco de dados.
5. Clique em Instalar extensão.

Enquanto você aguarda a conclusão da instalação...

Vamos falar sobre personalização

Neste codelab, você viu que as Extensões do Firebase podem ajudar a resolver casos de uso comuns e que as extensões são configuráveis para atender às necessidades do seu app.

No entanto, as extensões não podem resolver todos os problemas, e o problema da exclusão de dados do usuário é um bom exemplo disso. Embora a extensão "Excluir dados do usuário" resolva a questão atual de que os e-mails continuam sendo expostos após o usuário excluir a conta, ela não exclui tudo. Por exemplo, a listagem do item ainda está disponível, e as imagens no Cloud Storage também ficarão lá. A extensão "Excluir dados do usuário" permite configurar um caminho do Cloud Storage a ser excluído, mas como os usuários podem fazer upload de muitos arquivos diferentes com muitos nomes diferentes, não é possível configurar essa extensão para excluir esses artefatos automaticamente. Em situações como essa, o Cloud Functions para Firebase pode ser a melhor opção para que você possa escrever um código específico para o modelo de dados do seu app.

Extensões e faturamento

As extensões do Firebase em si não têm custos de uso (você paga apenas pelos recursos subjacentes que usar), mas alguns dos recursos subjacentes necessários por uma extensão podem exigir faturamento. Este codelab foi projetado para ser concluído sem uma conta de faturamento. No entanto, configurar um plano Flame ou Blaze desbloqueia muitas extensões interessantes do Firebase.

Por exemplo, é possível encurtar URLs, acionar e-mails, exportar coleções para o BigQuery e muito mais. Confira o catálogo completo de extensões aqui.

Se você gostaria de ter uma extensão, mas ela não está disponível no momento, adoraríamos saber mais. Envie uma solicitação de recurso para o suporte do Firebase para sugerir uma nova extensão.

Veja isso na prática

Após a instalação da extensão, exclua um usuário e veja o que acontece:

1. No Console do Firebase, acesse o painel do Realtime Database.
2. Expanda o nó sellers.
3. As informações de cada vendedor são inseridas no UID do usuário dele. Escolha o UID de um usuário.
4. No Console do Firebase, acesse o painel Autenticação e encontre o UID do usuário em questão.
5. Expanda o menu à direita do UID e selecione Delete Account.

6. Volte para o painel do Realtime Database. As informações do vendedor também desaparecerão.

7. Parabéns!

Embora você não tenha escrito muito código neste codelab, você adicionou recursos importantes ao app do Marketplace.

Você aprendeu a descobrir, configurar, instalar e reconfigurar extensões. Além disso, você aprendeu a monitorar extensões instaladas e a desinstalá-las, se necessário.

Qual é a próxima etapa?

Confira algumas destas outras extensões:

• Traduzir strings de texto no Cloud Firestore (é necessário ter uma conta de faturamento)
• Adicionar novos usuários às listas de e-mails do Mailchimp (é necessário ter uma conta de faturamento)
• Encurtar URLs (é necessária uma conta de faturamento)

Precisa de mais códigos personalizados no lado do servidor?

• Confira o codelab do Cloud Functions para Firebase

Outros documentos úteis

Como gerenciar extensões:

• Gerenciar extensões com a CLI do Firebase
• Definir alertas de orçamento
• Verificar com que frequência uma extensão instalada está em execução
• Atualizar uma extensão instalada para uma nova versão
• Desinstalar uma extensão

Saber mais sobre os detalhes das extensões:

• Veja o código-fonte e os documentos de cada extensão no GitHub
• Saiba mais sobre as permissões e o acesso concedidos a uma extensão