Adicione novas funcionalidades ao seu aplicativo da Web rapidamente com as extensões do Firebase

1. Introdução

Metas

Neste codelab, você adicionará funcionalidade a um aplicativo de mercado on-line com a ajuda das Extensões do Firebase . Por meio deste codelab, você entenderá como as extensões podem ajudar você a gastar menos tempo em tarefas de desenvolvimento e gerenciamento de aplicativos.

O que você vai construir

Neste codelab, você adicionará os seguintes recursos a um aplicativo da Web de mercado on-line:

• Carregue imagens mais rapidamente para aumentar a retenção de usuários
• Limite as entradas em seu banco de dados para melhorar o desempenho e diminuir sua fatura
• Implemente a exclusão automática de dados antigos do usuário para aprimorar a proteção dos dados do usuário

O que você aprenderá

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

Este codelab é focado nas Extensões do Firebase. Para informações detalhadas sobre outros produtos Firebase mencionados neste codelab, consulte a documentação do Firebase e outros codelabs .

O que você precisará

• Um computador com um navegador moderno instalado (recomenda-se o Chrome)
• Uma conta do Google

2. Crie e configure um projeto do Firebase

Criar um projeto do Firebase

1. No console do Firebase , clique em Adicionar projeto e nomeie o projeto do Firebase como FriendlyMarket .
2. Clique nas opções de criação do projeto. Aceite os termos do Firebase. Ignore a configuração do Google Analytics, porque você não usará o Analytics neste aplicativo.
3. Aguarde o provisionamento do projeto e clique em Continuar .

O aplicativo que você criará usa alguns produtos Firebase disponíveis para aplicativos da web:

• Firebase Authentication para identificar facilmente seus usuários
• Firebase Realtime Database para salvar dados estruturados na nuvem e receber notificações instantâneas quando os dados forem atualizados
• Cloud Storage para Firebase para salvar imagens na nuvem

Agora você ativará e configurará esses produtos Firebase usando o Firebase console.

Ativar login de e-mail

Embora a autenticação não seja o foco deste codelab, é importante ter alguma forma de autenticação em seu aplicativo para identificar exclusivamente todos que o usam. Você usará o login de e-mail.

1. No console do Firebase, clique em Desenvolver no painel esquerdo.
2. Clique em Autenticação e, em seguida, clique na guia Método de login (ou clique aqui para ir diretamente para a guia Método de login ).
3. Clique em E-mail/Senha na lista Provedores de login , defina o botão Habilitar para a posição ligado e clique em Salvar .

Ativar banco de dados em tempo real

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

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

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

Definir regras de segurança

Agora, você definirá as regras de segurança necessárias para este aplicativo. Estes são alguns exemplos básicos de regras para ajudar a proteger seu aplicativo. Essas regras permitem que qualquer pessoa visualize itens à venda, mas permitem que apenas usuários conectados façam outras leituras e gravações. Não se preocupe com as especificidades dessas regras; você apenas irá copiá-los e colá-los para colocar seu aplicativo em funcionamento.

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

2. Copie e cole o seguinte conjunto de regras no campo de regras na 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 .

Ativar armazenamento em nuvem

O aplicativo usa Cloud Storage for Firebase para salvar imagens de itens à 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 seu bucket de armazenamento padrão (clique em Next , mantenha o local padrão e clique em Done ).

Agora, você definirá as regras de segurança necessárias para este aplicativo. Essas regras permitem apenas que usuários autenticados publiquem novas imagens, mas permitem que qualquer pessoa visualize 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 de regras na 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. Execute o aplicativo de exemplo

Fork o projeto StackBlitz

Neste codelab, você criará e implantará um aplicativo usando o StackBlitz , um editor on-line com vários fluxos de trabalho do Firebase integrados. Stackblitz não requer instalação de software ou conta StackBlitz especial.

StackBlitz permite que você compartilhe projetos com outras pessoas. Outras pessoas que têm a URL do seu projeto StackBlitz podem ver seu código e bifurcar seu projeto, mas não podem editar seu projeto StackBlitz.

1. Acesse este URL para obter 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 StackBlitz. Como você não fez login, sua "conta" se chama @anonymous , mas tudo bem. O projeto tem um nome exclusivo, juntamente com um URL exclusivo. Todos os seus arquivos e alterações são salvos neste projeto StackBlitz.

Adicionar um Firebase Web App ao projeto

1. No StackBlitz, visualize seu 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 seu projeto clicando em Visão geral do projeto no canto superior esquerdo.
3. No centro da página de visão geral do seu projeto, clique no ícone da web para criar um novo Firebase Web App.
4. Registre o aplicativo com o apelido Codelab FriendlyMarket .
5. Para este codelab, não marque a caixa ao lado de Also set up Firebase Hosting for this app . Em vez disso, você usará o painel de visualização do StackBlitz.
6. Clique em Registrar aplicativo .
7. Copie o objeto de configuração do Firebase do seu app para a área de transferência. Não copie as tags <script> . Nota: Se você precisar encontrar a configuração posteriormente, siga as instruções aqui .

8. Clique em Continuar para console .

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

1. De volta ao StackBlitz, acesse o arquivo src/firebase-config.js .
2. Cole seu trecho de configuração no arquivo. Depois de fazer isso, deve ficar assim (mas com os valores do seu próprio projeto no objeto de configuração):

Qual é o ponto de partida para este aplicativo?

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

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

Experimente o aplicativo:

1. Faça login com o botão na parte superior da tela inicial. Você pode usar um endereço de e-mail, nome e senha falsos.
2. Clique no botão Vender algo no canto inferior direito para criar uma listagem.
3. Para Título , insira Xylophone .
4. Para Asking Price , digite 50 .
5. Para descrição do item , insira o seguinte: This high quality xylophone can be used to play music.
6. Baixe esta imagem de um xilofone para o seu computador e carregue-a com o botão FOTO DO SEU ITEM .

file_download Baixar imagem

7. Depois de preencher todos os campos e fazer upload de uma imagem, clique em Postar .
8. Encontre sua nova listagem. Clique no seu item para ver a tela de detalhes e expanda o painel de informações de contato do vendedor .
9. Volte para o console do Firebase. No painel Banco de dados , agora você verá uma entrada para o item que você postou no nó forsale . No painel de armazenamento , você também encontrará a imagem que carregou no caminho friendlymarket .

4. Encontre e instale uma extensão

O problema

Depois de fazer algumas pesquisas de usuário para seu aplicativo, você descobre que a maioria dos usuários visita seu site a partir de seus smartphones, não de seus computadores. No entanto, suas estatísticas também mostram que os usuários móveis tendem a deixar seu site ("churn") após apenas alguns segundos.

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

A solução

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

• Comprimir imagens. Mesmo os telefones celulares capturam imagens com resolução muito maior do que o necessário para as necessidades deste aplicativo. Reduzir o tamanho do arquivo acelerará os tempos de carregamento sem uma queda perceptível na resolução do aplicativo.
• Cache . Por padrão, os objetos do Cloud Storage têm cabeçalhos que informam aos navegadores para não armazenar imagens em cache, o que significa que o navegador do usuário fará o download da mesma imagem várias vezes! Felizmente, você pode alterar esses cabeçalhos para permitir o armazenamento em cache. Tanto o Cloud Storage SDK do lado do cliente quanto o Firebase Admin SDK permitem que você defina esses cabeçalhos.

Para compactar imagens, você precisará limitar a qualidade do upload ou ter um processo do lado do servidor que redimensione as imagens. Vamos considerar as compensações:

• Do lado do cliente . Para um processo do lado do cliente, você pode apenas limitar o tamanho do arquivo para imagens carregadas. Isso significa que você não precisa escrever ou manter nenhuma nova lógica de servidor. No entanto, isso também significa que seus vendedores precisam descobrir como redimensionar suas próprias imagens, o que é uma barreira dolorosa e pouco intuitiva para criar uma nova listagem.
• Do lado do servidor . Se você usar o Cloud Functions para Firebase, poderá acionar uma função que redimensiona automaticamente uma imagem no upload. Isso significa que os vendedores podem fazer upload de qualquer tamanho de imagem que desejarem (sem trabalho extra para eles) e sua função de back-end pode redimensionar a imagem perfeitamente. Existe até uma amostra disponível para esta função!

Parece que o lado do servidor é o caminho a percorrer. Mas essa ideia ainda envolve a clonagem da amostra , seguindo suas instruções de configuração e, em seguida, implantando a função com o Firebase CLI. Redimensionar imagens parece um caso de uso tão comum. Não há uma solução mais fácil?

Uma solução mais fácil

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

Olhe para isso! Existe uma extensão chamada "Redimensionar imagens". Isso parece promissor.

Vamos usar esta extensão em seu aplicativo!

Instalar uma extensão

1. Clique em Ver detalhes para ver mais informações sobre esta extensão. Em O que você pode configurar , a extensão permite definir as dimensões para as quais deseja redimensionar e até definir o cabeçalho do cache. Perfeito!
2. Clique no botão Instalar no console na página de detalhes da extensão . Você será direcionado para 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 mostrarão um resumo básico da extensão, bem como quaisquer recursos que ela criará e funções de acesso necessárias.
5. No campo ** Cache-Control **cabeçalho para imagens redimensionadas , digite o seguinte:

public, max-age=31536000

6. Deixe os outros parâmetros em seus valores padrão.
7. Clique em Instalar extensão .

Enquanto espera a conclusão da instalação...

Instalação com a interface de linha de comando do Firebase

Se você se sentir mais confortável com as ferramentas de linha de comando, as extensões também podem ser instaladas e gerenciadas usando o Firebase CLI! Basta usar o comando firebase ext , disponível na versão mais recente da CLI. Mais informações podem ser encontradas aqui .

(Opcional) Saiba mais sobre os cabeçalhos Cache-Control

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

Atualizar código do cliente

A extensão que você instalou grava uma imagem redimensionada no mesmo compartimento da imagem original. A imagem redimensionada tem as dimensões configuradas anexadas ao seu nome de arquivo. Assim, se o caminho do arquivo original for parecido com friendlymarket/user1234-car.png , o caminho do arquivo da imagem redimensionada será parecido com friendlymarket/user1234-car_200x200.png .

Vamos atualizar o aplicativo para que ele busque as imagens redimensionadas em vez das imagens em tamanho real.

1. No StackBlitz, abra o arquivo src/firebase-refs.js .
2. Substitua a função getImageRef existente pelo código a seguir 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)
  };
}

teste

Como esta extensão monitora novos uploads de imagens, sua imagem existente não será redimensionada.

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

1. Clique em Friendly Market na barra superior do seu aplicativo para navegar até a tela inicial.
2. Clique no botão Vender algo no canto inferior direito do aplicativo para criar uma listagem.
3. Em Title , insira Coffee
4. Para Asking Price , digite 1
5. Para Descrição do item , insira o seguinte: Selling one cafe latte. It has foam art in the shape of a bear .
6. Baixe esta imagem de uma xícara de café para o seu computador e carregue-a com o botão FOTO DO SEU ITEM . file_download Baixar imagem
7. Depois de preencher todos os campos e fazer upload de uma imagem, clique em Postar . Você verá a lista de cafés abaixo do xilofone!
8. No painel Functions no Firebase console, clique na guia Logs . Você deve ver os logs da função que mostram que ela foi executada.

9. Acesse o painel Armazenamento para ver a imagem original do café e uma versão redimensionada no caminho friendlymarket .
10. No painel de visualização do StackBlitz, recarregue a tela inicial do aplicativo algumas vezes. Você deve notar que a imagem do café carrega significativamente mais rápido do que a imagem do xilofone.

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

5. Reconfigurar uma extensão

O problema

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

A solução

Depois de alguns cálculos no verso do envelope, você percebe que só precisa salvar cerca de cinco rascunhos a qualquer momento.

Lembra daquele catálogo de Firebase Extensions? Talvez já exista uma solução construída para esta 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 excluirá o rascunho mais antigo sempre que um novo rascunho for adicionado.

1. Clique no botão Instalar na página de detalhes da extensão .
2. Escolha o projeto do Firebase que você está usando para seu aplicativo da web do Marketplace.
3. Siga as instruções na tela até chegar à etapa Configurar extensão .
4. Para Caminho do banco de dados em tempo real , insira drafts . Este é o caminho no banco de dados onde os rascunhos são salvos.
5. Para Contagem máxima de nós a serem mantidos , insira 5 . Isso significa que cinco rascunhos para cada listagem de itens serão salvos e, se outro for adicionado, o rascunho mais antigo será excluído automaticamente.
6. Clique em Instalar extensão .

Enquanto espera a conclusão da instalação...

Extensões de monitoramento

Quando você instala uma extensão, o processo cria várias funções. Você pode querer verificar com que frequência essas funções estão sendo executadas ou visualizar logs e taxas de erro. Para obter informações detalhadas sobre como monitorar sua extensão, consulte Gerenciar extensões instaladas . Siga as instruções na documentação para visualizar as funções criadas pela extensão Resize Images na etapa anterior.

Desinstalando extensões

Para remover uma extensão de 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, pois 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 para a extensão) e a conta de serviço criada para essa instância da extensão. No entanto, quaisquer artefatos criados pela extensão (como as imagens redimensionadas) permanecerão em seu projeto após a desinstalação da extensão.

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

Você não está limitado a instalar uma única instância de uma determinada extensão em um projeto. Se você quiser limitar as entradas em outro caminho, poderá instalar outra instância dessa extensão. No entanto, para este codelab, você instalará a extensão apenas uma vez.

Veja em ação

1. Verifique se você está conectado com a conta que usou para postar o xilofone ou latte
2. Gere alguns rascunhos:
3. Clique no botão Vender algo no canto inferior direito do aplicativo
4. Edite o título para dizer "Rascunho 1".
5. Role para baixo até a seção Rascunhos e visualize o número de rascunhos. Deve haver pelo menos dois.
6. Clique no botão FRIENDLY MARKET na barra de aplicativos superior. Dessa forma, você terá um rascunho salvo, mas não precisará postá-lo.
7. Repita para "Rascunho 2", "Rascunho 3" e assim por diante até "Rascunho 6".
8. Ao criar o "Rascunho 6", observe que o "Rascunho 1 desaparece da seção Rascunhos .
9. Como você fez com a extensão Redimensionar imagens, você pode verificar os logs de funções para ver quais funções foram acionadas.

Ups, o limite de rascunhos a manter é muito pequeno

Sua equipe de suporte ao cliente entra em contato e informa que alguns de seus vendedores mais prolíficos estão reclamando que seus rascunhos estão sendo excluídos antes que possam publicá-los. Você verifica sua matemática com seu colega de equipe e percebe que sua matemática estava errada por um fator de 10.000!

Como você pode consertar isso? Vamos reconfigurar a extensão instalada!

1. No painel esquerdo do console do Firebase, clique em Extensões .
2. No cartão da extensão instalada, clique em Gerenciar .
3. No canto superior direito, clique em Reconfigurar extensão .
4. Altere a contagem máxima de nós para manter em 50000 .
5. Clique em Salvar .

E isso é tudo que você precisa fazer! No tempo que a extensão leva para atualizar, você pode falar com sua equipe de suporte e informá-los de que uma correção já está sendo implantada.

6. Exclua automaticamente os dados do usuário

O problema

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

Por enquanto, o suporte excluiu manualmente os dados de cada usuário, mas deve haver uma maneira melhor! Você pensa sobre isso e considera escrever seu próprio trabalho em lote que é executado periodicamente e limpa endereços de e-mail de contas excluídas. Mas excluir dados do usuário parece ser um problema bastante comum. Talvez as Extensões do Firebase também possam ajudar a resolver esse problema.

A solução

Você configurará a extensão Delete User Data para excluir automaticamente o nó users/uid no banco de dados quando um usuário excluir sua conta.

1. Clique no botão Instalar na página de detalhes da extensão .
2. Escolha o projeto do Firebase que você está usando para seu aplicativo 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 curinga. Com esta configuração, o ramal saberá que quando o usuário com o UID 1234 deletar sua conta, o ramal deverá deletar sellers/1234 do banco de dados.
5. Clique em Instalar extensão .

Enquanto espera a conclusão da instalação...

Vamos falar sobre customização

Neste codelab, você viu que as Firebase Extensions 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 a questão da exclusão de dados do usuário é um bom exemplo disso. Embora a extensão Excluir dados do usuário trate da reclamação atual de que os e-mails ainda são expostos depois que um usuário exclui sua conta, a extensão não excluirá tudo. Por exemplo, a listagem de itens ainda está disponível e todas as imagens no Cloud Storage também permanecerão. A extensão Excluir dados do usuário nos permite configurar um caminho do Cloud Storage para exclusão, mas como os usuários podem fazer upload de muitos arquivos diferentes com muitos nomes diferentes, você não poderá configurar essa extensão para excluir automaticamente esses artefatos. Para situações como essa, o Cloud Functions para Firebase pode ser mais adequado para que você possa escrever um código específico para o modelo de dados do seu aplicativo.

Extensões e faturamento

As próprias extensões do Firebase não têm custo para usar (você é cobrado apenas pelos recursos subjacentes que usa), mas alguns dos recursos subjacentes necessários para uma extensão podem exigir cobrança. Este codelab foi desenvolvido para ser concluído sem uma conta de faturamento. No entanto, configurar um plano Flame ou Blaze desbloqueia muitas extensões realmente interessantes do Firebase.

Por exemplo, você pode encurtar URLs , acionar e-mails , exportar coleções para o BigQuery e muito mais! Confira o catálogo completo de extensões aqui .

Se houver uma extensão que você gostaria de ter, mas não está disponível no momento, adoraríamos saber sobre ela! Envie uma solicitação de recurso ao Firebase Support para sugerir uma nova extensão.

Veja em ação

Após a conclusão da instalação de sua 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 digitadas em seu UID de usuário. Escolha o UID de um usuário.
4. No console do Firebase, acesse o painel Authentication e localize o UID do usuário.
5. Expanda o menu à direita do UID e selecione Excluir conta .

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

7. Parabéns!

Mesmo que você não tenha escrito muito código neste codelab, você adicionou recursos importantes ao seu aplicativo do Marketplace.

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

Qual é o próximo?

Confira algumas dessas outras extensões:

• Traduzir strings de texto no Cloud Firestore (conta de cobrança necessária)
• Adicione novos usuários às listas de e-mail do Mailchimp (é necessária uma conta de cobrança)
• Encurtar URLs (conta de cobrança necessária)

Precisa de mais código personalizado do lado do servidor?

• Confira o codelab do Cloud Functions para Firebase

Outros documentos úteis

Gerenciando extensões:

• Tente gerenciar extensões com o Firebase CLI
• Definir alertas de orçamento
• Verifique com que frequência uma extensão instalada está em execução
• Atualize uma extensão instalada para uma nova versão
• Desinstalar uma extensão

Aprendendo os detalhes mais sutis sobre extensões:

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