GSP643

Visão geral

Há 12 anos, Lilian fundou a rede de clínicas veterinárias Pet Theory. A Pet Theory expandiu rapidamente nos últimos anos. O antigo sistema de consultas não consegue lidar com o aumento da demanda nem permite que os clientes agendem as consultas. Por isso, a Lilian pediu ao Pedro, do departamento de TI, e à Raquel, uma consultora, para criarem um sistema baseado na nuvem que fosse facilmente escalonável. Neste laboratório, você criará um app da web completo com o Firebase para que os usuários registrem informações e agendem consultas em tempo real.

Arquitetura

Este diagrama mostra uma visão geral dos serviços que você vai usar e como eles se conectam:

Objetivos

Neste laboratório, você vai aprender a:

• Configurar o Firestore Security para automatizar a autenticação e a autorização do lado do servidor.
• Adicionar o Login do Google ao seu app da web.
• Configurar seu banco de dados para que os usuários possam adicionar as informações de contato.
• Analisar e implantar um código que permita que os usuários agendem consultas.
• Analisar as atualizações em tempo real do Firebase no seu app da web.

Pré-requisitos

Este é um laboratório de nível intermediário, então é preciso ter experiência com o console do Cloud e os ambientes shell. Além disso, não é obrigatório, mas é muito útil ter experiência com o Firebase. Antes de começar este laboratório, recomendamos que você conclua o mencionado abaixo:

• Como importar dados para um banco de dados do Firestore

Você também precisa ter noções básicas sobre edição de arquivos. Use seu editor de texto favorito (como o nano, o vi etc.) ou inicie o editor de código do Cloud Shell, disponível na barra superior:

Quando estiver tudo pronto, role a tela para baixo e siga as etapas a seguir para configurar o ambiente do laboratório.

Back-end do Firebase

A Raquel envia um e-mail ao Pedro:

A Raquel envia um e-mail ao Pedro com algumas informações básicas, e eles fazem uma reunião para decidir as principais atividades. Nessa reunião, fica definido que ele precisa fazer o seguinte:

• Configurar um projeto do Firebase.
• Estabelecer políticas de segurança.
• Adicionar a CLI do Firestore ao projeto do Google Cloud.

Agora, ajude o Pedro a realizar essas tarefas.

Tarefa 1: registrar um aplicativo do Firebase

Abra uma janela anônima e acesse o console do Firebase.

Quando a solicitação aparecer, insira:

• Nome de usuário:
• Senha:

1. Se solicitado, aceite os Termos e Condições do Firebase e clique em Continuar.

2. Na página "Visão geral do projeto", clique em + Adicionar app e selecione o ícone da web.

3. Quando o "Apelido do app" for solicitado, digite Pet Theory.

4. Marque a caixa ao lado de Também configurar o Firebase Hosting para este app.

5. No menu suspenso do site, selecione Criar um novo site ou verifique se ele corresponde ao ID do seu projeto (ou conforme as instruções nos detalhes do laboratório).

6. Clique no botão Registrar app.

7. Nas etapas seguintes (Adicionar SDK do Firebase, Instalar a CLI do Firebase e Implantar no Firebase Hosting), clique em Próxima ou Continuar no console para retornar ao painel principal.

O aplicativo do Firebase foi configurado.

Teste a tarefa concluída

Clique em Verificar meu progresso para conferir o objetivo.

Tarefa 2: ativar os produtos do Firebase

Firebase Authentication

No console do Firebase, configure o Firebase Authentication para permitir que os usuários façam login com o Google.

1. No menu de navegação à esquerda, clique em Autenticação (você pode encontrar em Atalhos do projeto ou Categorias de produtos > Segurança se não estiver fixado).

2. Se esta for sua primeira vez, clique em Começar.

3. Na guia Método de login, selecione Google na lista de provedores.

4. Na caixa de diálogo de configuração, clique no botão Ativar.

5. Selecione seu e-mail de suporte no menu suspenso e clique em Salvar.

6. Para adicionar o domínio personalizado para autorização, clique na guia Configurações na parte de cima da página Autenticação.

7. Selecione Domínios autorizados no menu à esquerda do painel de configurações.

8. Clique no botão Adicionar domínio.

9. Insira o seguinte domínio (substituindo pelo ID do projeto, se necessário):

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. Clique no botão Adicionar.

Teste a tarefa concluída

Clique em Verificar meu progresso para conferir o objetivo.

Firebase Firestore

Em seguida, configure o banco de dados do Firestore.

1. No menu de navegação à esquerda, em Bancos de dados e armazenamento, clique em Firestore.

2. Na página de destino do Cloud Firestore, clique no botão Criar banco de dados.

3. Na Etapa 1: selecionar edição, escolha Edição Standard e clique em Próxima.

4. Em Etapa 2: ID e local do banco de dados, selecione o local apropriado (por exemplo, nam5 ou aceite o padrão) e clique em Próxima.

5. Na Etapa 3: configurar, selecione Iniciar no modo de teste e clique em Criar.

6. Depois que o banco de dados for provisionado, clique na guia Regras.

7. Substitua as regras de segurança pelas seguintes para permitir que usuários autenticados leiam/gravem os próprios dados:

   rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } }

Clique em Publicar para implantar as alterações no Firebase.

Agora você configurou o Firebase Authentication e o Firestore. A configuração do back-end foi concluída.

Firebase Localhost

Você ajudou o Pedro a configurar um ambiente operacional no Firebase Hosting em que um desenvolvedor web pode implantar códigos próprios.

No entanto, o Pedro nunca ativou o Firebase Authentication nem implantou código no Firebase. Por isso, ele envia um e-mail à Raquel pedindo ajuda...

Tarefa 3: clonar o repositório e instalar as dependências

Nesta tarefa, você vai usar o Cloud Shell e o editor do Cloud Shell para clonar o código do aplicativo e instalar os pacotes necessários do Node.js.

1. Na mesma janela anônima que você está usando para o console do Firebase, abra uma nova guia, acesse o console do Google Cloud e aceite os Termos de Serviço, se solicitado.

2. Clique em Ativar o Cloud Shell na barra de ferramentas do console do Google Cloud.

3. No terminal do Cloud Shell, execute o comando a seguir para copiar os arquivos do laboratório do bucket do Cloud Storage:

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. Para visualizar e editar o código, clique no botão Abrir editor na barra de ferramentas do Cloud Shell.

5. No editor do Cloud Shell, acesse a pasta pet-theory/lab02 no explorador de arquivos.

6. Abra um terminal no editor do Cloud Shell (ou use o terminal do Cloud Shell atual) e mude para o diretório lab02:

   cd pet-theory/lab02

7. Execute o comando a seguir para instalar os pacotes do Node.js:

   npm install Observação: o ambiente do Cloud Shell já vem com o Node.js e o npm pré-instalados.

Agora vincule o aplicativo ao projeto de back-end do Firebase.

Tarefa 4: autorizar o acesso ao Firebase

No ambiente de desenvolvimento integrado (IDE), conecte o Firebase e implante seu aplicativo.

1. Digite o comando a seguir para autorizar o acesso ao projeto do Firebase:

   firebase login --no-localhost

   Observação:

   O Firebase vai tentar autorizar o ambiente local a se conectar ao projeto do Firebase. Portanto, verifique se a atividade do navegador é realizada em uma janela anônima para facilitar essa ação com as credenciais adequadas.

2. Digite Y para ativar os recursos do Gemini no Firebase.

3. Digite Y caso seja perguntado se o Firebase pode coletar informações de registros de erros e pressione ENTER.

4. Clique no URL gerado para abrir outra guia na mesma janela anônima.

5. Selecione sua conta do laboratório e clique em Permitir.

6. Clique em Sim, acabei de executar este comando para continuar.

7. Clique em Sim, este é meu ID de sessão para confirmar seu ID de sessão.

8. Copie o código de acesso gerado, cole-o no prompt do Cloud Shell Insira o código de autorização: e pressione ENTER.

Você vai receber uma resposta como esta:

Exemplo de saída:

O Firebase está conectado e autorizado. A próxima etapa é inicializar os produtos do Firebase que serão usados.

Tarefa 5: inicializar os produtos do Firebase

No ambiente de desenvolvimento integrado (IDE, na sigla em inglês), informe ao Firebase quais produtos são necessários.

1. Inicialize um novo projeto do Firebase no seu diretório de trabalho atual:

   firebase init

   Observação:

   Ao executar esse comando, você vai receber orientações para configurar o diretório do projeto e os produtos do Firebase. Selecione os recursos da CLI do Firebase que deseja configurar nesta pasta. Use as teclas de seta para rolar a lista para cima e para baixo. Use a BARRA DE ESPAÇO para selecionar a opção de produto.

2. Selecione os seguintes produtos:

   • Firestore
   • Hosting

3. Use as teclas de seta e a barra de espaço para selecionar Firestore e Hosting. Verifique se o shell corresponde ao código mostrado a seguir e pressione Enter:

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. Conclua as etapas restantes para configurar o Firebase:

   • Vá com a seta para baixo até Usar um projeto atual e pressione Enter.
   • Selecione o ID do projeto na lista e pressione Enter.
   • Pressione N e depois ENTER para manter seu arquivo firestore.rules.
   • Pressione N e depois ENTER para manter seu arquivo firestore.indexes.json.
   • Pressione ENTER para manter seu diretório público.
   • Pressione N para proibir regravações no seu arquivo index.html e depois pressione ENTER.
   • Pressione N quando perguntado se quer configurar builds e implantações automáticas com o GitHub e pressione ENTER.
   • Pressione N quando solicitado a substituir seu arquivo 404.html.
   • Pressione N quando solicitado a substituir seu arquivo index.html.
   • Pressione Y quando perguntado se você quer instalar as habilidades do agente para o Firebase e depois pressione ENTER.

   Exemplo de saída:

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

Agora a configuração local está concluída.

Tarefa 6: implantar no Firebase

Continue no Cloud Shell para esta etapa. Confira se você está no editor de código, na pasta pet-theory/lab02.

1. Edite o firebase.json e atualize a seção hosting com a chave site:

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. Abra o terminal e implante seu aplicativo do Firebase usando o valor do ID do site, por exemplo:

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Saída:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. Clique no URL de hospedagem gerado (parecido com .web.app) para abrir em uma nova guia anônima:

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   Importante:

   Não use credenciais pessoais como autenticação neste laboratório. Use a conta para fazer o login do Google.

4. Clique no botão Fazer login com o Google:

   Observação:

   Se você encontrar a mensagem de erro Não há suporte para o navegador ou cookies e dados de terceiros estão desativados, ative os cookies no seu navegador.

   

   No Chrome, clique no ícone de olho na extremidade direita da guia do URL e siga os links azuis no pop-up. Clique no link Site indisponível? para atualizar as configurações do navegador e aceitar os cookies.

5. Faça login com o nome de usuário fornecido (por exemplo, ). A seguinte página é aberta:

   

   Uma pequena empresa como a Pet Theory não tem os recursos nem as habilidades necessárias para isso. Nesse caso, é muito melhor permitir que os usuários do aplicativo façam login com uma Conta do Google própria ou com uma conta de qualquer outro provedor de identidade.

   Observação:

   Gerenciar senhas é uma tarefa difícil e pode expor sua empresa a mais riscos. Além disso, os usuários não querem criar mais um ID e senha de usuário.

Agora que você implantou o código, os usuários podem usar a autenticação do Google para acessar o app de horários.

Tarefa 7: adicionar uma página de cliente ao seu app da web

Volte ao terminal e use o editor para exibir os arquivos na pasta pública.

1. Abra o arquivo public/customer.js e depois copie e cole o seguinte código:

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. Abra o arquivo public/styles.css e cole este código:

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. Na linha de comando do terminal, execute o seguinte comando:

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Saída:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. Vá até a guia do aplicativo e force a atualização da página usando CMND+SHIFT+R (Mac) ou CTRL+SHIFT+R (Windows). Atualizar do modo simples não vai mostrar as atualizações necessárias.

   

5. Insira algumas informações do cliente (invente um nome e um número de telefone):

   Nome do cliente:

   John

   Telefone do cliente:

   98473757454

6. Clique em Salvar perfil.

7. Volte para o console do Firebase.

8. Clique em Build > Banco de dados do Firestore para conferir as informações do perfil salvas:

   

9. Retorne à página do app da web e clique no link Consultas. Uma página em branco será exibida porque o código dos agendamentos ainda não foi implantado.

Teste a tarefa concluída

Clique em Verificar meu progresso para conferir o objetivo.

Muito legal!

O Firestore atualiza os clientes (apps da web e nativos para dispositivos móveis) em tempo real, sem que o usuário precise atualizar ou recarregar.

Parabéns!

Neste laboratório, você criou um aplicativo da web robusto sem servidor com o Firebase. Após criar e configurar um projeto do Firebase, você adicionou o Firestore Security para automatizar a autenticação e a autorização do lado do servidor. Depois, você adicionou o Login do Google ao seu app da web e configurou o banco de dados para que os usuários possam adicionar informações de contato e consultas. Por fim, você conheceu e implantou um código que permite que os usuários agendem consultas e acompanhou as atualizações do Firebase em tempo real no seu app da web. Você tem tudo o que precisa para participar de mais laboratórios neste programa de aprendizado.

Próximas etapas / Saiba mais

• Google Cloud: O que é a computação sem servidor?

Treinamento e certificação do Google Cloud

Esses treinamentos ajudam você a aproveitar as tecnologias do Google Cloud ao máximo. Nossas aulas incluem habilidades técnicas e práticas recomendadas para ajudar você a alcançar rapidamente o nível esperado e continuar sua jornada de aprendizado. Oferecemos treinamentos que vão do nível básico ao avançado, com opções de aulas virtuais, sob demanda e por meio de transmissões ao vivo para que você possa encaixá-las na correria do seu dia a dia. As certificações validam sua experiência e comprovam suas habilidades com as tecnologias do Google Cloud.

Manual atualizado em 31 de maio de 2026

Laboratório testado em 31 de maio de 2026

Copyright 2026 Google LLC. Todos os direitos reservados. Google e o logotipo do Google são marcas registradas da Google LLC. Todos os outros nomes de produtos e empresas podem ser marcas registradas das respectivas empresas a que estão associados.