GSP643

Visão geral

Há 12 anos, Lilian fundou a rede de clínicas veterinárias Pet Theory. A Pet Theory expandiu-se 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, Lilian pediu a Pedro, do departamento de TI, e a Ruby, 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 o 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 de cima:

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 Ruby envia um e-mail ao Pedro:

Ruby, consultora de software	Oi, Pedro. Excelente trabalho na semana passada. É bom ver que os dados da clínica foram migrados para o Firestore. Parece que a próxima tarefa é usar o Firebase para hospedar o site da Pet Theory. Ruby
Pedro, administrador de TI	Oi, Ruby. Nunca ouvi falar da hospedagem do Firebase. Quais são os benefícios? Por onde devo começar? Pedro
Ruby, consultora de software	Oi, Pedro. O principal benefício da hospedagem do Firebase é o fato de não usar servidor, ou seja, não há infraestrutura para gerenciar. As regras de segurança também são incorporadas ao aplicativo. Por isso, as permissões podem ser restritas para minimizar problemas ao manipular dados do cliente. O Firebase também tem um modelo de "pagamento por utilização", o que significa que é uma plataforma abrangente de desenvolvimento móvel para nosso caso de uso. Ruby
Pedro, administrador de TI	Oi, Ruby. Parece que o Firebase facilitará muito o gerenciamento da segurança e da infraestrutura, que é uma grande parte do meu trabalho. Também fico feliz por não sermos cobrados pelos servidores inativos. Pedro

A Ruby 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 para acessar o URL do console do Firebase.

Quando a solicitação aparecer, insira:

• nome de usuário como
• senha como

Observação:
um projeto do Firebase com a etiqueta foi provisionado. Selecione esse projeto para acessar os produtos do Firebase e siga este tutorial.

Na tela de visão geral do projeto do Firebase, insira os seguintes comandos:

1. Selecione o ícone da Web (destacado abaixo) na lista de ícones "Comece adicionando o Firebase ao seu aplicativo":

   

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

   Pet Theory

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

4. Clique no menu suspenso de implantação e selecione Criar um novo site.

5. Altere o padrão para incluir o prefixo do estudante.

   student-bucket-{{{ project_0.project_id | "PREFIX" }}}-1 Observação:
   verifique se o menu suspenso do site contém student-bucket--1 antes de continuar. O domínio do site será baseado nessa configuração.

6. Clique no botão Registrar app.

7. Clique em Próxima > Próxima > Continuar no console.

   Observação:
   a alteração do domínio padrão do site do Firebase vai exigir mudanças no ambiente local.
   Mais especificamente, precisamos:
   1. Atualizar o firebase.json para incluir o ID do site personalizado. Configurar destinos de implantação para seus sites
   2. Usar o ID do site quando utilizar o comando firebase deploy --only hosting:student-bucket--1

O aplicativo do Firebase foi configurado.

Teste a tarefa concluída

Clique em Verificar meu progresso para conferir o objetivo.

Registrar seu app do Firebase

Tarefa 2: ativar os produtos do Firebase

Firebase Authentication

No console do Firebase, vamos configurar o Firebase Authentication.

1. Clique no botão do menu suspenso Build no painel de navegação à esquerda.

2. Selecione o bloco Authentication e clique em Comece agora:

3. Clique na guia Método de login e depois no item Google.

4. Clique no botão Ativar no canto superior direito e, no E-mail de suporte do projeto, selecione sua conta de laboratório na lista suspensa.

   {{{ user_0.username | "USERNAME" }}}

   A página será parecida com esta:

5. Depois de verificar os itens acima, clique no botão Salvar.

   Observação:
   ao usar um domínio personalizado com o Firebase, você também precisa alterar a configuração "Domínios autorizados".

6. Clique na guia Configurações

7. No título Domínios, clique no item de menu Domínios autorizados.

   A página será parecida com esta:

8. Clique no botão Adicionar domínio

9. Insira o seguinte domínio:

   student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app Observação:
   adicionar o domínio personalizado permite que o fluxo OAuth do Firebase funcione corretamente.

10. Clique no botão Adicionar

Teste a tarefa concluída

Clique em Verificar meu progresso para conferir o objetivo.

Configurar o Firebase Authentication

Firebase Firestore

No console do Firebase, vamos configurar o Firebase Authentication.

1. Clique no botão do menu suspenso Build no painel de navegação à esquerda.

2. Selecione o bloco Banco de dados do Firestore e clique em Criar banco de dados:

3. Aceite as configurações padrão e clique em Avançar.

4. Clique em Criar para provisionar o Cloud Firestore.

5. Clique na guia Regras

   Observação:
   queremos atualizar as regras de segurança do banco de dados do Firestore para usar a autenticação. Nas novas regras, permitimos leitura/gravação no banco de dados se o usuário for autenticado.

6. Atualize as regras da seguinte maneira:

   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; } } }

Agora você configurou o Firebase Authentication e o Firestore com um identificador de site personalizado. 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 à Ruby pedindo ajuda...

Pedro, administrador de TI	Olá, Ruby. Agradeço todas as dicas. Parece que o ambiente do Firebase está configurado. Minha próxima tarefa é implantar o código dos desenvolvedores do site. Você consegue me ajudar a entender o que isso implica e o que preciso fazer agora? Pedro
Ruby, consultora	Oi, Pedro. Excelente notícia. Enviarei instruções sobre como executar o aplicativo e adicionar os seguintes recursos: Configurar a autenticação da Web para login. Permitir que os detalhes do cliente sejam registrados na página "Perfil". Criar um portal de autoatendimento para consultas. Ruby
Pedro, engenheiro de DevOps	Oi, Ruby. Parece que isso será um pouco trabalhoso. Isso significa que terei que fazer alterações estruturais sempre que quiser adicionar algo? Sem contar o tempo que levará para exibir essas atualizações... Pedro
Ruby, consultora	Oi, Pedro. É possível fazer a maior parte do trabalho pesado com as bibliotecas do Firebase. O Firebase tem ótimas ferramentas de linha de comando para ajudar a conectar seu localhost ao projeto de back-end do Firebase. Use firebase init para informar ao Firebase quais produtos você quer usar. Depois que o projeto estiver configurado, basta chamar firebase deploy na linha de comando. Ruby
Pedro, administrador de TI	Oi, Ruby. Ah, bom saber! A hospedagem do Firebase me parece cada vez melhor. :-) Pedro

Tarefa 3: instalar a CLI do Firebase

Use o ambiente de desenvolvimento integrado para se conectar ao Firebase e implante seu aplicativo.

Observação:
o ambiente de desenvolvimento foi pré-configurado com as ferramentas do Firebase.

1. Copie o link do ambiente de desenvolvimento integrado no painel "Detalhes do laboratório"

   {{{ project_0.startup_script.service_url | "IDE" }}}

2. Cole o link em uma nova guia anônima do navegador para abrir o Cloud Code.

3. Abra um terminal clicando em Menu do aplicativo () > Terminal > Novo terminal.

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

   git clone https://github.com/rosera/pet-theory.git

5. No painel à esquerda, clique no ícone do Explorer e, depois, em Abrir pasta > pet-theory > lab02. Clique em OK.

   Observação:
   se o pop-up Do you trust the authors of the files in this folder? aparecer, marque a caixa e clique em Yes, I trust the authors.

6. Abra um terminal novamente clicando em Menu do aplicativo () > Terminal > Novo terminal.

7. Atualize os pacotes do nó:

   npm i

   Exemplo de saída:

   added 630 packages, and audited 631 packages in 42s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New minor version of npm available! 10.7.0 -> 10.8.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3 npm notice To update run: npm install -g npm@10.8.3 npm notice npm warn using --force Recommended protections disabled. up to date, audited 631 packages in 2s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

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

Tarefa 4: autorizar o acesso ao Firebase

No ambiente de desenvolvimento integrado, 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 caso seja perguntado se o Firebase pode coletar informações de registros de erros e pressione Enter.

3. Copie e cole o URL em uma nova guia anônima do navegador e, depois, pressione Enter. Clicar diretamente no link vai resultar em um erro.

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

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

6 Confirme seu ID de sessão clicando em Sim, este é meu ID de sessão.

7. Você receberá um código de acesso:

8. Copie o código de acesso, 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:

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net Observação:
neste ponto, o localhost está vinculado ao projeto de back-end do Firebase.

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, 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. Você será solicitado a selecionar os recursos da CLI do Firebase para 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. Precisamos dos 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é Use an existing project e pressione Enter.
   • Selecione o ID do projeto na lista e pressione Enter.
   • Selecione a tecla Enter e depois insira N para manter seu arquivo firestore.rules.
   • Pressione Enter e Y para manter seu arquivo firestore.indexes.json.
   • Selecione Enter para manter seu diretório público e depois insira N para proibir regravações no seu arquivo /index.html.
   • Pressione Enter para configurar builds e implantações automáticas com o "GitHub?" e insira N.
   • Digite N quando aparecer uma solicitação para substituir seu arquivo 404.html.
   • Digite N quando solicitado a substituir seu arquivo index.html.

   Exemplo de saída:

   ✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

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

Tarefa 6: implantar no Firebase

Continue no terminal para esta etapa. Confira se você ainda está na pasta pet-theory/lab02.

1. Edite o firebase.json e atualize a seção de hospedagem com o site

   Resposta esperada

   { ... "hosting": { "site": "student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1", ... } }

2. Implante seu aplicativo do Firebase usando o valor do ID do site, por exemplo:

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

   Saída:

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

3. Copie o URL de hospedagem (parecido com .web.app) e abra em uma nova guia anônima.

   https://student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.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 o erro This browser is not supported or 3rd party cookies and data may be disabled ocorrer, ative os cookies no navegador.

   

   Isso pode ser feito no Chrome clicando no ícone de olho na extremidade direita da guia do URL e seguindo os links azuis no pop-up. Clique no link Site not working? para atualizar as configurações do seu 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:student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1

   Saída:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://student-bucket-{{{ project_0.project_id| "site" }}}-1.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). Fazer isso 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:

   João

   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.

Adicionar uma página de cliente ao seu app da Web

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.

Última atualização manual: 16 de outubro de 2024

Último teste do laboratório: 16 de outubro de 2024

Copyright 2024 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.