Checkpoints
Create a Firebase project
/ 25
Register your app
/ 25
Set up authentication and a database
/ 25
Add a customer page to your web app
/ 25
Criar um app da Web sem servidor com o Firebase
- GSP643
- Visão geral
- Objetivos
- Tarefa 1: como provisionar o ambiente do Firebase
- Tarefa 2: instalar a CLI do Firebase
- Tarefa 3: configurar um banco de dados do Firestore
- Tarefa 4: criar um projeto do Firebase
- Tarefa 5: registrar o app
- Tarefa 6: autenticar-se no Firebase e implantar
- Tarefa 7: configurar a autenticação e um banco de dados
- Tarefa 8: cenário: configurar o aplicativo
- Tarefa 9: configurar a autenticação do Firestore e adicionar um login ao seu app da Web
- Tarefa 10: implantar o aplicativo
- Tarefa 11: adicionar uma página de cliente ao seu app da Web
- Tarefa 12: permitir que os usuários agendem horários
- Tarefa 13: conferir as atualizações em tempo real no Firestore
- Parabéns!
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:
- Ativar a API do Firebase no seu projeto do Google Cloud
- Criar e configurar um projeto do Firebase
- 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:
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.
Tarefa 1: como provisionar o ambiente 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:
- Adicionar a CLI do Firestore ao projeto do Google Cloud
- Criar um banco de dados do Firestore
- Configurar um projeto do Firebase
- Estabelecer políticas de segurança
Agora ajude o Pedro a realizar essas tarefas.
Tarefa 2: instalar a CLI do Firebase
-
Copie o link do IDE exibido no painel "Detalhes do laboratório" e cole-o em uma nova guia do navegador para abrir o Cloud Code.
-
Abra um terminal para acessar a linha de comando. No painel à esquerda, clique em Menu do aplicativo () > Terminal > Novo terminal.
-
Clone o repositório do GitHub na linha de comando:
-
No painel à esquerda, clique no ícone do Explorer e, depois, em Abrir pasta > pet-theory > lab02. Clique em OK.
-
Abra um terminal.
-
Instale os pacotes de nós necessários:
Saída:
Agora está tudo pronto para criar um banco de dados do Firestore.
Tarefa 3: configurar um banco de dados do Firestore
No terminal, prepare o ambiente para usar um banco de dados do Firestore.
- Configure a região do projeto como
:
-
Ative os aplicativos do
App Engine
:gcloud app create --region={{{project_0.startup_script.app_region|REGION}}} -
Crie um banco de dados do Firestore:
gcloud firestore databases create --region={{{project_0.startup_script.app_region|REGION}}}
Agora você está pronto para criar um projeto do Firestore que vai ser vinculado à sua conta do Google Cloud.
Tarefa 4: criar um projeto do Firebase
Abra o Console do Firebase em uma janela anônima.
-
No canto superior direito da página, clique no ícone e verifique se a conta do Qwiklabs conectada é a de estudante provisionada para este laboratório.
-
Em seguida, clique em Adicionar projeto. Quando o nome do projeto for solicitado, use o ID dele no menu suspenso.
-
Aceite os termos do Firebase e clique em Continuar. Confirme o plano de faturamento "Pagamento por utilização".
-
Clique em Continuar e, na página seguinte, desative o Google Analytics para o projeto do Firebase.
-
Em seguida, clique em Adicionar Firebase. Clique em Continuar quando um prompt for exibido informando que seu novo projeto está pronto:
Teste a tarefa concluída
Clique em Verificar meu progresso para conferir o objetivo.
Tarefa 5: registrar o app
Depois de concluir a última etapa, você vai estar no Console do Firebase. Se você fechar a página, abra outra guia anônima e use o link a seguir para o console do Firebase.
- Selecione o ícone da Web (destacado abaixo) na lista de ícones "Comece adicionando o Firebase ao seu aplicativo":
-
Quando o "Apelido do app" for solicitado, digite Pet Theory.
-
Depois disso, marque a caixa ao lado de "Também configurar o Firebase Hosting para o app".
-
Clique no botão Registrar app.
-
Clique em Próxima > Próxima > Continuar no console. Agora você deverá ver o seguinte:
Você configurou o Firebase para o projeto. Em seguida, você inicializará o projeto para fazer referência ao host do Firebase.
Teste a tarefa concluída
Clique em Verificar meu progresso para conferir o objetivo.
Tarefa 6: autenticar-se no Firebase e implantar
Use o ambiente de desenvolvimento integrado para se conectar ao Firebase e implante seu aplicativo. Insira os comandos no terminal disponível no editor.
- Autentique-se no Firebase:
-
Digite Y caso seja perguntado se o Firebase pode coletar informações de registros de erros e pressione Enter.
-
Copie e cole o URL em uma nova guia anônima do navegador e pressione Enter. Clicar diretamente no link vai resultar em um erro.
-
Selecione sua conta de laboratório e clique em Permitir. Clique em Sim, acabei de executar este comando para continuar e confirme seu ID de sessão clicando em Sim, este é meu ID de sessão. Você receberá um código de acesso:
-
Copie o código de acesso, cole-o no prompt do Cloud Shell Inserir código de autorização: e pressione Enter. Você vai receber uma resposta como esta:
Saída:
- Agora inicialize um novo projeto do Firebase no seu diretório de trabalho atual:
Ao executar esse comando, você receberá orientações para configurar o diretório do projeto e os produtos do Firebase.
- Você será solicitado a selecionar os recursos da Firebase CLI para configurar nesta pasta. 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:
- Em seguida, 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 seu projeto do Qwiklabs na lista, ele começa com "qwiklabs-gcp-", 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.
Você vai receber esta resposta:
Agora a configuração local está concluída. Agora a etapa de autenticação do banco de dados é necessária para fornecer acesso entre os serviços.
Tarefa 7: configurar a autenticação e um banco de dados
Volte ao Console do Firebase para concluir essa etapa.
-
Clique no botão Visão geral do projeto no menu de navegação à esquerda.
-
Selecione o bloco Authentication e clique em Comece agora:
-
Clique em Provedores de login e depois no item Google.
-
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. A página será parecida com esta:
- Depois de verificar os itens acima, clique no botão Salvar.
A autenticação do Firestore está configurada. Na etapa a seguir, você trabalhará na hospedagem do aplicativo com o Firebase.
Teste a tarefa concluída
Clique em Verificar meu progresso para conferir o objetivo.
Tarefa 8: cenário: configurar o aplicativo
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ê pode 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:
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 ver essas atualizações... Pedro |
Ruby, consultora |
Oi, Pedro. Você pode fazer a maior parte do trabalho pesado com as bibliotecas do Firebase. Ver as atualizações no navegador é tão simples quanto chamar Faça as alterações, implante-as e veja todas elas no site! Ruby |
Pedro, administrador de TI |
Oi, Ruby. Ah, bom saber! A hospedagem do Firebase me parece cada vez melhor. :-) Pedro |
Agora que o Pedro entende melhor o que é necessário, você o ajudará a implantar a Pet Theory como um aplicativo do Firebase.
Tarefa 9: configurar a autenticação do Firestore e adicionar um login ao seu app da Web
Volte ao terminal para essa etapa. A sessão da linha de comando ainda deve estar aberta desde a inicialização anterior do Firebase.
- Execute este comando para listar as pastas e os arquivos no seu diretório
lab02
:
- Verifique se a resposta é parecida com esta:
- Use o editor de código para abrir
pet-theory/lab02/firestore.rules
:
Tarefa 10: implantar o aplicativo
Com todas as mudanças feitas, está tudo pronto para implantar o aplicativo. Confira se você ainda está na pasta pet-theory/lab02.
- Execute o comando a seguir para implantar o aplicativo do Firebase:
Saída:
- Copie o URL de hospedagem (parecido com
[PROJECT-ID].web.app
) e cole esse endereço em uma nova guia. - Clique no botão Fazer login com o Google:
- Selecione sua Conta do Google. A seguinte página é aberta:
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 11: adicionar uma página de cliente ao seu app da Web
Volte ao terminal e use o editor para ver os arquivos na pasta pública.
- Abra o arquivo
customer.js
e depois copie e cole o seguinte código:
- Abra o arquivo
styles.css
e cole este código:
- Na linha de comando, execute o seguinte:
Saída:
- 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. Insira algumas informações do cliente (invente um nome e um número de telefone) e clique em Salvar perfil.
- Volte ao console do Firebase e clique em Build > Banco de dados do Firestore para consultar as informações do perfil salvas:
- 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.
Tarefa 12: permitir que os usuários agendem horários
Crie a página para os usuários agendarem horários.
-
Retorne à guia "Editor de código". Você precisa adicionar códigos a dois arquivos no diretório
public
. -
No menu lateral, selecione appointments.html e cole este código:
- Agora abra o arquivo appointments.js e cole este código:
- Agora que os arquivos foram criados, veja as alterações. Execute este comando no Cloud Shell para implantar seu aplicativo:
Saída:
- Atualize sua guia do app da Web, onde antes havia uma página em branco. Agende algumas consultas:
-
Agora acesse o console do Firebase, clique em Build > Banco de dados do Firestore e selecione a coleção
appointments
que você criou com seu usuário. -
Vai aparecer um conjunto de códigos de horários semelhante a este:
Tarefa 13: conferir as atualizações em tempo real no Firestore
O Firestore é um banco de dados em tempo real. Para aproveitar esse recurso, adicione atualizações em tempo real ao aplicativo.
-
Abra uma nova guia do navegador e a direcione para [PROJECT ID].web.app. Depois faça login usando o botão do Google e clique em Horários.
-
Coloque as duas guias do navegador lado a lado. Na primeira janela do navegador, agende uma nova consulta.
-
Agora olhe para a outra guia do navegador: você verá a consulta adicionada automaticamente, sem precisar atualizar:
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.
- Acesse o console do Firebase, clique na guia Dados no Cloud Firestore e edite os dados. Você pode até mesmo excluir a coleção
appointments
no seu registro de usuário. As duas janelas do navegador continuarão atualizando em tempo real.
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 30 de janeiro de 2024
Laboratório testado em 8 de janeiro de 2023
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.