arrow_back

Criar um app da Web sem servidor com o Firebase

Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

Criar um app da Web sem servidor com o Firebase

Lab 1 hora universal_currency_alt 5 créditos show_chart Intermediário
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

GSP643

Laboratórios autoguiados do Google Cloud

Logotipo da Pet Theory

Informações gerais

Nos laboratórios da Quest Google Cloud Run Serverless Workshop, você analisará um cenário de negócios fictício e ajudará no plano de migração sem servidor dos personagens.

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, a Lilian pediu ao Pedro, do departamento de TI, e à Ruby, uma consultora, para criarem um sistema baseado na nuvem que fosse facilmente escalonável.

No laboratório anterior, "Como migrar dados para um banco de dados do Firestore", você aprendeu a usar o Firestore para hospedar dados de clientes. 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:

Diagrama da arquitetura

O que você vai aprender

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 fundamental que pressupõe familiaridade com o Console do Cloud e os ambientes shell. Além disso, ter experiência com o Firebase é útil, mas não é obrigatório. Antes de começar o laboratório, recomendamos que você conclua este Qwiklab:

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:

Botão "Abrir editor"

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

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

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

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

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

Observação: o ambiente de desenvolvimento foi pré-configurado com as ferramentas do Firebase.
  1. 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.

  2. Abra um terminal para acessar a linha de comando. No painel à esquerda, clique em Menu do aplicativo (Ícone do menu do aplicativo) > Terminal > Novo terminal.

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

git clone https://github.com/rosera/pet-theory.git
  1. No painel à esquerda, clique no ícone do Explorer e, depois, em Abrir pasta > pet-theory > lab02. Clique em OK.

  2. Abra um terminal.

  3. Instale os pacotes de nós necessários:

npm i && npm audit fix --force

Saída:

+ firebase-tools@10.7.0 added 3 packages from 11 contributors, removed 1 package and updated 8 packages in 79.808s

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.

  1. Configure a região do projeto como :
gcloud config set compute/region {{{project_0.default_region|REGION}}}
  1. Ative os aplicativos do App Engine:

    gcloud app create --region={{{project_0.startup_script.app_region|REGION}}}
  2. 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.

Observação: o laboratório inclui permissões para o Firebase. Copie o link do console para acessar o Firebase. Use o nome de usuário/a senha fornecidos no laboratório para se autenticar no Firebase.
  1. 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.

  2. Em seguida, clique em Adicionar projeto. Quando o nome do projeto for solicitado, use o ID dele no menu suspenso.

  3. Aceite os termos do Firebase e clique em Continuar. Confirme o plano de faturamento "Pagamento por utilização".

  4. Clique em Continuar e, na página seguinte, desative o Google Analytics para o projeto do Firebase.

  5. Em seguida, clique em Adicionar Firebase. Clique em Continuar quando um prompt for exibido informando que seu novo projeto está pronto:

Prompt indicando que o projeto está pronto

Teste a tarefa concluída

Clique em Verificar meu progresso para conferir o objetivo.

Criar um projeto do Firebase

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.

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

Ícone da Web destacado

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

  2. Depois disso, marque a caixa ao lado de "Também configurar o Firebase Hosting para o app".

  3. Clique no botão Registrar app.

  4. Clique em Próxima > Próxima > Continuar no console. Agora você deverá ver o seguinte:

Escolha um produto para adicionar ao app

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.

Registrar o app

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.

  1. Autentique-se no Firebase:
firebase login --no-localhost
  1. Digite Y caso seja perguntado se o Firebase pode coletar informações de registros de erros e pressione Enter.

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

  3. 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:

  4. 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:

✔ Success! Logged in as gcpstaging86673_student@qwiklabs.net
  1. Agora inicialize um novo projeto do Firebase no seu diretório de trabalho atual:
firebase init

Ao executar esse comando, você receberá orientações para configurar o diretório do projeto e os produtos do Firebase.

  1. 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:
? 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
  1. 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:

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

  1. Clique no botão Visão geral do projeto no menu de navegação à esquerda.

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

  3. Clique em Adicionar novo provedor 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. A página será parecida com esta:

Botão "Ativar" destacado e menu suspenso "E-mail de suporte do projeto"

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

Configurar a autenticação e um banco de dados

Tarefa 8: cenário: configurar o aplicativo

Você ajudou o Pedro a configurar um ambiente operacional no Firebase Hosting em que um desenvolvedor da 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

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

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

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

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 firebase deploy pela linha de comando.

Faça as alterações, implante-as e veja todas elas no site!

Ruby

Pedro

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.

  1. Execute este comando para listar as pastas e os arquivos no seu diretório lab02:
ls -1
  1. Verifique se a resposta é parecida com esta:
README.md firebase.json firestore.indexes.json firestore.rules node_modules package-lock.json package.json public solution
  1. Use o editor de código para abrir pet-theory/lab02/firestore.rules:
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; } } } Observação: a configuração vai garantir que o usuário do banco de dados Firestore possa acessar apenas os próprios dados. O arquivo firestore.rules é usado para fornecer segurança ao banco de dados do Firestore. Saiba mais sobre a segurança do banco de dados do Firestore.

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.

  1. Execute o comando a seguir para implantar o aplicativo do Firebase:
firebase deploy

Saída:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app
  1. Copie o URL de hospedagem (parecido com [PROJECT-ID].web.app) e cole esse endereço em uma nova guia.
  2. Clique no botão Fazer login com o Google:
Observação: se o erro Não há suporte para o navegador ou cookies e dados de terceiros estão desativados ocorrer, ative os cookies no navegador. Mensagem de erro de cookies de terceiros Para fazer isso, acesse o 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.
  1. Selecione sua Conta do Google. A seguinte página é aberta:

Página de perfil

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.

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.

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.

  1. Abra o arquivo 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, }) })
  1. Abra o arquivo 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; } }
  1. Na linha de comando, execute o seguinte:
firebase deploy

Saída:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app
  1. 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.

Formulário de perfil

  1. Volte ao console do Firebase e clique em Build > Banco de dados do Firestore para consultar as informações do perfil salvas:

Cloud Firestore, página com a guia "Dados"

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

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

Tarefa 12: permitir que os usuários agendem horários

Crie a página para os usuários agendarem horários.

  1. Retorne à guia "Editor de código". Você precisa adicionar códigos a dois arquivos no diretório public.

  2. No menu lateral, selecione appointments.html e cole este código:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pet Theory appointments</title> <script src="/__/firebase/6.4.2/firebase-app.js"></script> <script src="/__/firebase/6.4.2/firebase-auth.js"></script> <script src="/__/firebase/6.4.2/firebase-firestore.js"></script> <script src="/__/firebase/init.js"></script> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <div id="message"> <h2>Scheduled appointments</h2> <div id="appointments"></div> <hr/> <h2>Schedule a new appointment</h2> <select id="timeslots"> <option value="0">Choose time</option> </select> <br><br> <button id="makeAppointment">Schedule</button> </div> <script src="appointments.js"></script> </body> </html>
  1. Agora abra o arquivo appointments.js e cole este código:
let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); const appColl = db.collection('customers').doc(user.email).collection('appointments'); appColl.orderBy('time').onSnapshot(function(snapshot) { const div = document.getElementById('appointments'); div.innerHTML = ''; snapshot.docs.forEach(appointment => { div.innerHTML += formatDate(appointment.data().time) + '<br/>'; }) if (div.innerHTML == '') { div.innerHTML = 'No appointments scheduled'; } }); } }); const timeslots = document.getElementById('timeslots'); getOpenTimes().forEach(time => { timeslots.add(new Option(formatDate(time), time)); }); document.getElementById('makeAppointment').addEventListener('click', function(ev) { const millis = parseInt(timeslots.selectedOptions[0].value); if (millis > 0) { const db = firebase.firestore(); db.collection('customers').doc(user.email).collection('appointments').add({ time: millis }) timeslots.remove(timeslots.selectedIndex); } }) function getOpenTimes() { const retVal = []; let startDate = new Date(); startDate.setMinutes(0); startDate.setSeconds(0); startDate.setMilliseconds(0); let millis = startDate.getTime(); while (retVal.length < 5) { const hours = Math.floor(Math.random() * 5) + 1; millis += hours * 3600 * 1000; if (isDuringOfficeHours(millis)) { retVal.push(millis); } } return retVal; } function isDuringOfficeHours(millis) { const aDate = new Date(millis); return aDate.getDay() != 0 && aDate.getDay() != 6 && aDate.getHours() >= 9 && aDate.getHours() <= 17; } function formatDate(millis) { const aDate = new Date(millis); const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return days[aDate.getDay()] + ' ' + aDate.getDate() + ' ' + months[aDate.getMonth()] + ', ' + aDate.getHours() + ':' + (aDate.getMinutes() < 10? '0'+aDate.getMinutes(): aDate.getMinutes()); }
  1. Agora que os arquivos foram criados, veja as alterações. Execute este comando no Cloud Shell para implantar seu aplicativo:
firebase deploy

Saída:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app
  1. Atualize sua guia do app da Web, onde antes havia uma página em branco. Agende algumas consultas:

Janela de agendamentos

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

  2. Vai aparecer um conjunto de códigos de horários semelhante a este:

códigos dos agendamentos

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.

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

  2. Coloque as duas guias do navegador lado a lado. Na primeira janela do navegador, agende uma nova consulta.

  3. Agora olhe para a outra guia do navegador: você verá a consulta adicionada automaticamente, sem precisar atualizar:

Janela de agendamentos

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.

  1. 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ê explorou e implantou um código que permite que os usuários agendem consultas e viu as atualizações do Firebase em tempo real no seu app da Web. Você está pronto para participar de mais laboratórios neste programa de aprendizado.

Termine a Quest

Este laboratório autoguiado faz parte das Quests Google Cloud Run Serverless Workshop e Build Apps & Websites with Firebase. Uma Quest é uma série de laboratórios relacionados que formam um programa de aprendizado. Ao concluir uma Quest, você ganha um selo como reconhecimento da sua conquista. É possível publicar os selos e incluir um link para eles no seu currículo on-line ou nas redes sociais. Inscreva-se em qualquer Quest que tenha este laboratório para receber os créditos de conclusão na mesma hora. Consulte o catálogo do Google Cloud Ensina para ver todas as Quests disponíveis.

Comece o próximo laboratório

Continue sua Quest com os próximos laboratórios da série: Como usar o Cloud Run para criar um app sem servidor que gera arquivos PDF ou Como usar o pipeline do Cloud Build e do Firebase para implantar um site criado no Hugo.

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 28 de setembro de 2023

Laboratório testado em 28 de setembro 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.