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

1. Introdução

Metas

Neste codelab, você adicionará funcionalidades a um aplicativo de mercado on-line com a ajuda do Firebase Extensions . Neste codelab, você entenderá como as extensões podem ajudar você a gastar menos tempo em tarefas de desenvolvimento e gerenciamento de apps.

3b6977f679c67db.png

O que você construirá

Neste codelab, você adicionará os seguintes recursos a um app 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 reduzir sua fatura
  • Implementar a exclusão automática de dados antigos do usuário para melhorar 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 se concentra nas 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 .

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 Firebase

Crie 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 do 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 for Firebase para salvar imagens na nuvem

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

Habilitar 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 todos que o utilizam. 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, 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 Ativar para a posição ativado e clique em Salvar .

ed0f449a872f7287.png

Habilitar banco de dados em tempo real

O aplicativo usa o Firebase Realtime Database para salvar itens à 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, passando pelo painel Cloud Firestore e clique em Criar banco de dados no painel Realtime Database .

cf8de951d2ab2e94.png

  1. Selecione Iniciar em modo bloqueado e clique em Ativar .

Defina regras de segurança

Agora, você definirá as regras de segurança necessárias para este aplicativo. Estes são alguns exemplos de regras básicas para ajudar a proteger seu aplicativo. Essas regras permitem que qualquer pessoa visualize itens à venda, mas permitem que apenas usuários conectados realizem outras leituras e gravações. Não se preocupe com as especificidades destas 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 .

e233a24a38b37e95.png

  1. Copie e cole o seguinte conjunto de regras no campo de 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"
      }
  }
}
  1. Clique em Publicar .

Habilitar 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 .

889013b9c7b8897c.png

  1. Aceite os padrões para criar seu bucket de armazenamento padrão (clique em Avançar , mantenha o local padrão e clique em Concluído ).

Agora, você definirá as regras de segurança necessárias para este aplicativo. Essas regras permitem apenas que usuários autenticados postem 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 .

e7003646b429500b.png

  1. Copie e cole o seguinte conjunto de regras no campo de 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;
    }
    
  }
}
  1. Clique em Publicar .

3. Execute o aplicativo de exemplo

Bifurque o projeto StackBlitz

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

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

  1. Vá para este URL para obter o código inicial: https://stackblitz.com/edit/friendlymarket-codelab .
  2. No topo da página StackBlitz, clique em Fork .

22c44cf92ed26208.png

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 uma URL exclusiva. Todos os seus arquivos e alterações são salvos neste projeto StackBlitz.

Adicione 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 58d6543a156e56f9.png para criar um novo aplicativo da Web do Firebase. 88c964177c2bccea.png
  4. Registre o aplicativo com o apelido FriendlyMarket Codelab .
  5. Neste codelab, não marque a caixa ao lado de Configurar também o Firebase Hosting para este aplicativo . 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 aplicativo para a área de transferência. Não copie as tags <script> . Nota: Se precisar encontrar a configuração posteriormente, siga as instruções aqui .

6c0519e8f48a3a6f.png

  1. Clique em Continuar para consolar .

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 snippet de configuração no arquivo. Depois de fazer isso, deverá ficar assim (mas com os valores do seu próprio projeto no objeto de configuração):

177602cbe84f873d.png

Qual é o ponto de partida para este aplicativo?

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

f3ec800f27fa49b7.png

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 poder 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 Preço pedido , insira 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 IMAGEM DO SEU ITEM .

  1. Depois de preencher todos os campos e fazer upload de uma imagem, clique em Postar .
  2. 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 .
  3. Volte para o console do Firebase. No painel do banco de dados , você verá agora uma entrada para o item postado 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 com usuários do seu aplicativo, você descobre que a maioria dos usuários visita seu site a partir de smartphones, não de desktops. No entanto, suas estatísticas também mostram que os usuários de dispositivos móveis tendem a sair do seu site ("desligamento") 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 nem são armazenadas em cache no navegador. Esse longo tempo de carregamento ocorre em cada visualização de página!

A solução

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

  • Compactar imagens. Até os telefones celulares tiram imagens com resolução muito maior do que o necessário para as necessidades deste aplicativo. Reduzir o tamanho do arquivo irá acelerar o tempo 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 armazenarem imagens em cache, o que significa que o navegador do usuário fará o download da mesma imagem repetidamente. Felizmente, você pode alterar esses cabeçalhos para permitir o armazenamento em cache. Tanto o SDK do Cloud Storage do lado do cliente quanto o SDK Admin do Firebase permitem definir esses cabeçalhos.

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

  • Do lado do cliente . Para um processo do lado do cliente, você pode simplesmente 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 a criação de uma nova listagem.
  • 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 clonar o exemplo , seguir suas instruções de configuração e, em seguida, implantar a função com a CLI do Firebase. Redimensionar 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: Extensões do Firebase! Vamos verificar o catálogo de extensões disponíveis no site do Firebase .

e6bc3874cf23f34f.png

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

Vamos usar esta extensão no 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 você deseja redimensionar e você pode 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 acessará as funções necessárias.
  5. No campo ** Cache-Control **para imagens redimensionadas , insira o seguinte:

public, max-age=31536000

  1. Deixe os outros parâmetros com seus valores padrão.
  2. Clique em Instalar extensão .

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

Instalando com a interface de linha de comando do Firebase

Se você se sentir mais confortável com 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. Mais informações podem ser encontradas aqui .

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

O valor do cabeçalho Cache-Control 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 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 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. Para Título , insira Coffee
  4. Para Preço pedido , insira 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 IMAGEM DO SEU ITEM .
  7. Depois de preencher todos os campos e fazer upload de uma imagem, clique em Postar . Você verá a lista de café abaixo do xilofone!
  8. No painel Funções do console do Firebase, clique na guia Logs . Você deverá ver os logs da função que mostram que ela foi executada.

486d1226be84bb44.png

  1. Vá para o painel de armazenamento para ver a imagem original do café e uma versão redimensionada no caminho friendlymarket .
  2. No painel de visualização do StackBlitz, recarregue a tela inicial do seu 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 subsequentes da página, ela carrega do cache do navegador em vez de acionar uma solicitação de rede.

5. Reconfigure uma extensão

O problema

Seu aplicativo salva automaticamente 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 postados e os outros 90% estão apenas ocupando espaço no seu banco de dados.

A solução

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

Lembra daquele catálogo de extensões do Firebase? 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 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 . Este é o caminho no banco de dados onde os rascunhos são salvos.
  5. Em Contagem máxima de nós a serem mantidos , insira 5 . Isso significa que serão salvos cinco rascunhos para cada listagem de item e, se outro for adicionado, o rascunho mais antigo será automaticamente excluído.
  6. Clique em Instalar extensão .

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

Extensões de monitoramento

Ao instalar uma extensão, o processo cria diversas funções. Você pode verificar com que frequência essas funções são 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 da documentação para visualizar as funções criadas pela extensão Resize Images na etapa anterior.

Desinstalando extensões

Para remover uma extensão do seu projeto, você pode ficar tentado a excluir as funções individuais criadas por uma extensão, mas isso pode levar a um comportamento inesperado, já que uma extensão pode criar diversas funções. Aprenda 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, quaisquer artefatos criados pela extensão (como imagens redimensionadas) permanecerão no seu projeto após a desinstalação da extensão.

Instalando múltiplas 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 desta extensão. No entanto, para este codelab, você instalará a extensão apenas uma vez.

Veja-o em ação

  1. Certifique-se de estar conectado 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 aplicativo
  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. Deveria haver pelo menos dois.
  6. Clique no botão MERCADO AMIGÁVEL na barra superior do aplicativo. Dessa forma, você terá um rascunho salvo, mas não precisará publicá-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. Assim como fez com a extensão Resize Images, você pode verificar os logs de funções para ver quais funções foram acionadas.

Ops, o limite de rascunhos a serem mantidos é 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 50000 .
  5. Clique em Salvar .

E isso é tudo que você precisa fazer! Durante o tempo que a extensão leva para ser atualizada, você pode conversar 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 recebem 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 excluíssem suas contas.

Por enquanto, o suporte tem excluído 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 a exclusão de dados do usuário parece 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 Excluir dados do usuário 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 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 dos usuários e {UID} é um curinga. Com esta configuração, a extensão saberá que quando o usuário com UID 1234 excluir sua conta, a extensão deverá excluir sellers/1234 do banco de dados.
  5. Clique em Instalar extensão .

Enquanto você espera 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 podem ser configuradas para atender às necessidades do seu app.

No entanto, as extensões não resolvem 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 atenda à 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 vários nomes diferentes, não será possível 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 código específico para o modelo de dados do seu aplicativo.

Extensões e cobrança

O uso das extensões do Firebase é gratuito (você só será cobrado pelos recursos subjacentes que usar), mas alguns dos recursos subjacentes necessários para uma extensão podem exigir cobrança. 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 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 ela não estiver disponível no momento, adoraríamos saber mais sobre ela! Registre uma solicitação de recurso ao suporte do Firebase para sugerir uma nova extensão.

Veja-o em ação

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

2e03923c9d7f1f29.png

  1. 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 extensões instaladas e como desinstalá-las, se necessário.

Qual é o próximo?

Confira algumas dessas outras extensões:

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

Outros documentos úteis

Gerenciando extensões:

Aprendendo os detalhes mais sutis sobre extensões: