Crie seu primeiro app da Web com suporte a banco de dados usando o Google AI Studio e o Cloud SQL

1. Antes de começar

Se você já tentou organizar uma corrida de fim de semana com amigos ou vizinhos, sabe como é difícil: os locais de encontro se perdem em chats em grupo sem fim, as pessoas perguntam constantemente qual é o ritmo de todos e os novatos nunca têm certeza de quem vai aparecer.

Neste codelab, você vai resolver esse problema do dia a dia criando o Running Club, um web app acolhedor em que corredores locais podem navegar pelas rotas favoritas, agendar encontros de fim de semana, confirmar presença com um clique e conversar com outros corredores.

Por que esse app precisa de um banco de dados?

Um app da comunidade precisa de uma memória confiável, conhecida como banco de dados. Quando um corredor adiciona uma nova rota panorâmica, confirma presença na corrida de sábado pela manhã ou posta um comentário perguntando sobre o estacionamento, essas informações não podem desaparecer quando ele fecha o smartphone ou desliga o computador. Um banco de dados mantém todas as rotas, listas de participantes e mensagens dos membros armazenadas e organizadas com segurança para que todos no clube vejam informações atualizadas sempre que abrirem o app.

Você vai criar esse app usando o modo de criação do Google AI Studio. Não é preciso escrever códigos complexos nem configurar uma infraestrutura técnica. Basta descrever o que você quer em linguagem simples. O Google AI Studio gera o app, conecta um banco de dados Cloud SQL para PostgreSQL real para lembrar seus dados e publica o app no Cloud Run para que sua comunidade possa começar a usar imediatamente.

O que você vai criar

Você vai criar e lançar o Running Club, um app da Web da comunidade que inclui:

• Login do Google: login rápido e seguro usando uma Conta do Google.
• Perfis de corredores: perfis de membros que mostram preferências de corrida e ritmo desejado.
• Biblioteca de trajetos: uma coleção de trajetos favoritos do bairro com distância, dificuldade de subida e pontos de encontro.
• Próxima programação de corridas: um quadro de eventos para organizar as próximas corridas em grupo e vinculá-las a rotas.
• Confirmações simples: um botão de um clique para os membros dizerem "Eu vou" e ver quem mais vai.
• Realizar discussões: um espaço para comentários em cada execução para coordenar detalhes, fazer perguntas e compartilhar atualizações.

O que você vai aprender

• Como criar um app da Web funcional no Google AI Studio usando um único comando em linguagem simples.
• Como o Google AI Studio configura o Login do Google automaticamente.
• Como o Google AI Studio cria e conecta um banco de dados Cloud SQL para PostgreSQL real para lembrar seus dados.
• Como adicionar novos recursos e expandir seu banco de dados apenas conversando com a IA.
• Como verificar se os dados do seu clube ficam salvos com segurança em todas as visitas.
• Como publicar seu app na Internet com o Cloud Run.
• Como visualizar seu app e banco de dados ativos no console do Google Cloud.

O que é necessário

• Um navegador da Web moderno, como o Google Chrome.
• Uma Conta do Google padrão para fazer login no Google AI Studio.

Qualificação e limites da edição Starter do Cloud SQL

Destaques do nível Starter: você pode criar e implantar até dois aplicativos de pilha completa com o Cloud SQL sem custo financeiro e sem configurar uma conta de faturamento.

O Google AI Studio oferece o nível Starter do Google Cloud para ajudar os criadores a testar apps generativos e bancos de dados gerenciados:

• Qualificação:
  • Disponível para pessoas que usam uma Conta do Google padrão.
  • As contas inelegíveis incluem usuários com contas de faturamento do Google Cloud atuais ou anteriores, bem como contas associadas ao Google Workspace, ao Google Workspace for Education ou ao Google para organizações sem fins lucrativos.
  • Se a sua conta não se qualificar para o nível Starter, ainda será possível concluir este codelab selecionando um projeto na nuvem do Google Cloud com o faturamento ativado no AI Studio.
• Especificações de recursos:
  • Provisiona uma instância da Edição para desenvolvedores do Cloud SQL para PostgreSQL executando o PostgreSQL 18.
  • Inclui 0, 5 vCPU, 2 GB de RAM e 1 GB de armazenamento. Isso é suficiente para você fazer centenas de visitas diárias por alguns meses ou mais, dependendo da atividade.
  • Oferece suporte ao escalonamento para zero, pausando automaticamente a computação quando não há conexões de banco de dados ativas para conservar a cota.
• Quota:
  • Inclui uma cota mensal sem custo financeiro de 50 unidades de computação e 10 GB de armazenamento.

2. Abrir o Google AI Studio e iniciar um novo app

Para começar, abra o Google AI Studio no navegador. Esse é seu espaço de trabalho de criação, onde você pode criar e testar apps apenas descrevendo o que precisa.

Etapa 1: fazer login no Google AI Studio

1. Abra seu navegador da Web (como o Google Chrome) e acesse aistudio.google.com.
2. Clique em Começar e faça login com sua Conta do Google padrão, como a do Gmail.

3. Se os Termos de Serviço forem exibidos na sua primeira visita, leia e aceite-os para continuar.

Etapa 2: iniciar um novo aplicativo

1. No painel da parte de baixo, clique em Começar a criar ou em + Novo app no painel à direita.

3. Começar com um comando simples e o Firebase Authentication

Você não precisa de diagramas de arquitetura complexos para começar. É possível iniciar o aplicativo inicial, configurar o Login do Google e conectar seu banco de dados com uma única frase.

Insira o comando inicial

Na caixa de comando do modo de criação do AI Studio, insira o seguinte comando e pressione Enter:

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

Este link preencherá automaticamente a caixa de comando para você.

Entender seu espaço de trabalho

Depois que você enviar o comando, o Google AI Studio vai abrir o espaço de trabalho completo do aplicativo. Confira as três áreas principais na tela:

• A caixa de chat / comando (parte de baixo): é aqui que você continua conversando com a IA em linguagem simples para adicionar recursos, ajustar designs ou fazer perguntas.
• Área de arquivos e código (lado esquerdo): mostra os arquivos que a IA cria nos bastidores. Não é necessário escrever ou editar código, mas esse painel permite que você assista a IA criar as partes do seu app.
• A janela de visualização dinâmica (lado direito): mostra o app em funcionamento em tempo real. Você pode clicar em botões, digitar em campos de texto e testar o app diretamente nessa janela assim que ele for gerado.
• O editor de código (lado direito): mostra o código real gerado pela IA. É possível editar, mas não é obrigatório.
• Implantação e compartilhamento (canto superior direito): é aqui que você pode implantar seu app na Internet e compartilhar com outras pessoas.

O que o Google AI Studio faz automaticamente

Enquanto a IA processa sua solicitação, você pode acompanhar a criação do app etapa por etapa:

1. Configura o Login do Google: a IA integra automaticamente o Login do Google para que os corredores possam fazer login com segurança usando as Contas do Google. Não é necessário gerenciar senhas de usuários ou configurações de segurança.
2. Conecta um banco de dados real: a IA configura um banco de dados gerenciado do Cloud SQL para armazenar os dados da sua comunidade. Se for o caso, clique para ativar o banco de dados do seu projeto.

3. Organiza suas tabelas de dados (schema.ts): pense em um esquema de banco de dados como uma coleção de planilhas organizadas. A IA cria automaticamente a estrutura de armazenamento do seu app:
   • Tabela users: armazena perfis, nomes, avatares e ritmo de corrida dos membros.
   • Tabela runs: armazena eventos programados com título, distância, ritmo desejado, local e data.
   • Tabela comments: armazena mensagens e perguntas deixadas pelos corredores em cada corrida.
   Todas essas mudanças são feitas automaticamente na área de código. Para ver como essas categorias são organizadas, mude de Prévia para a guia Código. Mas não é necessário escrever o código por conta própria. Tudo é feito automaticamente.Observação: nunca é necessário escrever ou editar esse código manualmente. A IA atualiza ele para você sempre que você pede novos recursos.
4. Cria a interface visual: a IA cria as páginas da Web que aparecem na tela, incluindo o cabeçalho, a lista de execuções futuras, o formulário de criação de eventos e a seção de comentários.

Verificar a autenticação e executar a postagem

Quando a geração terminar, teste o novo app no painel Visualização:

1. Na janela de visualização, clique em Login de membro ou no botão Postar próxima corrida, que vai acionar a autenticação.
2. Faça a autenticação com sua Conta do Google usando a caixa de diálogo do Firebase Auth.
3. Depois de fazer login, seu nome e avatar do perfil do Google vão aparecer na barra de navegação, e suas preferências de ritmo serão gerenciadas automaticamente.
4. No formulário "Postar próxima execução", insira um título, como Morning 5K Shakeout.
5. Selecione uma data e hora e insira um local de reunião (como Central Park West Entrance).
6. Clique em PublishRun.
7. Confirme se a nova corrida aparece imediatamente no feed de próximas corridas, mostrando o nome do seu perfil autenticado e o selo de ritmo como organizador.
8. Poste uma mensagem rápida na seção de discussão da corrida (como Bringing extra water bottles!) e verifique se ela aparece na conversa por comentários.

4. Criar uma biblioteca de rotas

Os clubes de corrida costumam reutilizar rotas locais conhecidas. Em vez de digitar as mesmas informações de rota várias vezes, os membros podem salvar rotas favoritas em um catálogo e anexá-las sempre que agendarem uma corrida.

Pedir para a IA adicionar a biblioteca de rotas

Na caixa de comando do chat, digite a seguinte solicitação e pressione Enter:

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

Como a IA vincula rotas a execuções nos bastidores

Para isso, a IA cria automaticamente uma nova tabela de armazenamento para rotas e a conecta diretamente à tabela execuções. Essa conexão permite que o app extraia automaticamente detalhes de distância e local sempre que um organizador escolhe um trajeto.

Não é necessário tocar nesse código. A IA atualiza a estrutura do banco de dados para você.

Teste sua nova biblioteca de rotas na prévia

Quando a IA terminar de atualizar o app, teste o novo recurso de rotas na janela de prévia dinâmica:

1. Na navegação do app, clique na guia Biblioteca de rotas. Se não houver essa guia, verifique a parte de baixo da prévia dinâmica. Talvez seja necessário clicar no botão Salvar para atualizar a prévia. Se isso não ajudar, tente interagir com a IA na janela de chat e pergunte onde está sua biblioteca de rotas.
2. Clique em Salvar nova rota (ou Adicionar rota) e preencha alguns detalhes de exemplo:
   • Título da rota: Riverfront Trail Loop
   • Distância: 8.5 km
   • Dificuldade: Moderate
   • Local de início: Waterfront Pier 4
3. Clique em Salvar na biblioteca.
4. Agora, programe uma execução usando essa rota clicando no botão Programar execução diretamente no card da nova rota.
5. Observe como a distância, a dificuldade e os detalhes do local são preenchidos automaticamente para você.
6. Clique em Publicar execução e verifique se a nova execução do grupo aparece no feed da página inicial.

5. Implementar confirmações de presença e convites de membros

Os apps da comunidade precisam da sua participação! Você pode permitir que os corredores vejam quem vai participar de uma corrida futura, se inscrevam com um clique e compartilhem um link de convite com amigos.

Pedir para a IA adicionar confirmações de presença e convites

Na caixa de comando do chat, digite a seguinte solicitação e pressione Enter:

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

Como a IA rastreia os participantes nos bastidores

Para acompanhar quais corredores vão participar de cada corrida, a IA cria automaticamente uma tabela rsvps no seu banco de dados. Pense nisso como uma ficha de inscrição digital que vincula o nome de um corredor a um evento específico.

Não é necessário escrever ou editar esse código. A IA gerencia essa planilha de inscrição no seu banco de dados automaticamente.

Testar confirmações de presença e convites na prévia

Depois que a IA terminar de atualizar o app, teste os novos recursos de confirmação de presença na janela de visualização em tempo real:

1. Na janela de prévia, encontre uma corrida futura no seu feed inicial.
2. Clique no botão Participar da corrida (ou Confirmar presença).
3. Confirme se seu nome e avatar aparecem na seção Participantes e se o contador de participantes aumenta em 1.
4. Clique em Copiar link do convite e verifique se um link compartilhável foi gerado.

6. Teste de persistência de dados e redução da escala a zero do Cloud SQL

Ao criar um app, o mais importante é saber que as informações da sua comunidade estão seguras. Se você atualizar o navegador, fechar a guia ou desligar o computador, é importante que todas as rotas salvas, confirmações de presença e discussões ainda estejam lá quando você voltar.

Nesta etapa, você vai testar se os dados estão salvos com segurança no banco de dados do Cloud SQL e aprender como o Google Cloud economiza energia e custos quando o app está inativo.

Teste atualizar o app

1. Clique no botão Recarregar na janela de visualização do AI Studio ou atualize a guia do navegador.

2. Confira seu app na prévia: tudo o que você criou (perfil de membro, rotas salvas, corridas programadas, confirmações de presença e comentários) ainda está no mesmo lugar.
3. O app não apenas armazenou informações temporariamente na tela, mas também as armazenou com segurança no banco de dados do Cloud SQL.

Como o Cloud SQL economiza energia e custos ("redução da escala a zero")

O que acontece quando ninguém está usando o app do clube de corrida no meio da noite?

• Hibernação automática ("redução da escala a zero"): quando ninguém está visitando o app ou se inscrevendo para corridas, o banco de dados se pausa automaticamente para economizar recursos.
• Ativação instantânea: assim que um corredor abre o app ou clica em um link de convite, o banco de dados é ativado instantaneamente com todas as informações salvas prontas para uso.
• Custo ocioso zero: como ele entra em modo de espera quando está inativo, você não usa recursos de computação quando o app está parado.

Por que um banco de dados real é importante: como a IA organizou suas informações em tabelas conectadas, seu app fica organizado. Por exemplo, se uma execução for cancelada e excluída, todos os comentários anexados a ela serão limpos automaticamente para que não restem mensagens confusas.

7. Publicar e implantar no Cloud Run

Agora que o app Running Club foi criado e testado na prévia, é hora de compartilhá-lo com sua comunidade. Não é necessário comprar hospedagem na Web nem configurar servidores. Você pode lançar seu app na Internet com um único clique.

Publicar o app na Web

1. No canto superior direito do Google AI Studio, clique no botão Publicar.
2. Uma janela de resumo aparece confirmando os detalhes:
   • Hospedagem: hospedado e implantado no Google Cloud Run.
   • Serviços conectados: Login do Google e seu banco de dados do Cloud SQL.
3. Clique em Publicar para lançar o app.

Abrir e compartilhar seu app ativo

1. Quando a publicação é concluída, o Google AI Studio fornece seu endereço da Web ativo e um QR code.
2. Clique no link para abrir o web app ativo em uma nova guia do navegador ou leia o QR code com a câmera do smartphone.
3. Teste no seu smartphone: faça login no smartphone, confirme presença em uma das corridas que você agendou antes no computador e veja a contagem de participantes ser atualizada em tempo real, tudo isso com a tecnologia do seu banco de dados compartilhado do Cloud SQL.

8. (Bônus) Inspecionar seus recursos no console do Google Cloud

Exploração extra: esta etapa é totalmente opcional. Seu app já está ativo e funcionando. Se quiser saber mais sobre o Google Cloud e ver o que a IA criou por baixo dos panos, acompanhe para explorar sua infraestrutura ativa.

Quando o Google AI Studio cria e implanta seu app, ele não o bloqueia em uma caixa preta particular. Em vez disso, ele cria serviços reais do Google Cloud prontos para produção em seu nome. Pense no console do Google Cloud como o centro de controle em que você pode ver seu app e banco de dados ativos.

Etapa 1: abrir o console do Google Cloud

1. Em uma nova guia do navegador, abra o Console do Google Cloud.
2. Na parte de cima da tela, clique no menu suspenso do projeto e selecione o projeto criado para seu app do AI Studio. O nome dele geralmente começa com continual-run-.

Etapa 2: ver onde o app da Web é executado (Cloud Run)

1. Na barra de pesquisa na parte de cima, digite Cloud Run e selecione essa opção nos resultados.
2. Clique no nome do app (por exemplo, running-club).
3. Aqui você pode conferir o mecanismo que hospeda seu site:
   • Métricas: gráficos úteis que mostram quantas pessoas estão visitando seu site.
   • Registros: um registro em tempo real da atividade que mostra o que acontece quando os visitantes interagem com seu app.

Etapa 3: veja seu banco de dados em ação (Cloud SQL)

1. Na barra de pesquisa na parte de cima, digite Cloud SQL e selecione essa opção nos resultados.
2. Clique na instância do banco de dados PostgreSQL.
3. Aqui você pode conferir os detalhes do banco de dados ativo, confirmando que ele está ativo e pronto para armazenar os dados do seu clube de corrida.

9. Limpar recursos

Se você criou esse app como um projeto de prática, é fácil excluí-lo. Se você planeja continuar usando o app Running Club com sua comunidade, deixe-o em execução.

1. No Google AI Studio, clique em Meus apps na barra lateral esquerda.
2. Encontre o app Running Club.
3. Clique em Excluir app (ou no ícone de lixeira). Isso desativa sua página da Web publicada e remove o banco de dados de teste em uma única etapa.

10. Parabéns

Você criou, personalizou e publicou seu primeiro app da Web com suporte a banco de dados usando o Google AI Studio e o Cloud SQL.

Acesse este link para reivindicar o selo Jornada do Builder concluída.

Para continuar sua jornada, acesse goo.gle/builders e faça o próximo laboratório.

O que você realizou

• Criou um app com linguagem simples: criou um app completo de clube de corrida da comunidade com comandos simples.
• Login do Google ativado: configure o login seguro com as Contas do Google automaticamente.
• Conectamos um banco de dados real: rotas armazenadas, execuções programadas, confirmações de presença e discussões com segurança no Cloud SQL.
• Recursos adicionados por conversa: crie uma biblioteca de rotas e acompanhe confirmações de presença apenas conversando com a IA.
• Publicado na Web: implante seu app na Internet com um clique e teste em vários dispositivos.
• Conheça os bastidores: saiba como o Google Cloud hospeda seu app da Web e banco de dados ativos.

A seguir

Você pode continuar conversando com a IA no Google AI Studio para expandir seu app com novos recursos:

• Mapas interativos: peça para a IA adicionar prévias de mapas e trajetos de GPS.
• Encontrar um parceiro de corrida: peça à IA para sugerir parceiros de corrida com metas de ritmo semelhantes.
• Previsões do tempo: peça para a IA mostrar as previsões do tempo para o fim de semana nos próximos cards de corrida.
• Compartilhamento de fotos: peça à IA para permitir que os corredores compartilhem fotos depois de uma corrida em grupo.

Leitura adicional

• Documentação do Google AI Studio
• Como implantar apps no Google AI Studio
• Visão geral do Cloud SQL para PostgreSQL
• Programação com tecnologia de IA e Cloud SQL
• Documentação do Cloud Run