Inicie seu app da Web de tarefas com IA

1. Introdução

Visão geral

Onde começa a criação com IA hoje? Para a maioria de nós, isso começa com uma consulta ou um protótipo simples. O Google AI Studio oferece um modo de criação (muitas vezes chamado de "vibe coding") que permite projetar, testar e criar aplicativos da Web de pilha completa usando a geração de código com tecnologia dos modelos do Gemini.

Neste codelab, você vai criar um aplicativo de tarefas colaborativo com um banco de dados Firestore para armazenamento persistente e o Firebase Authentication para logins de usuários. O agente do AI Studio vai configurar todos os serviços de back-end e escrever o código de interação do front-end e do banco de dados. Depois que o app estiver pronto, você o implantará diretamente no Cloud Run com um único clique.

Atividades deste laboratório

  • Peça ao Google AI Studio para criar um protótipo de um aplicativo da Web de lista de tarefas colaborativa.
  • Configure e ative a integração do Firebase para provisionar um banco de dados do Firestore e configurar a autenticação do Login do Google.
  • Teste o aplicativo no sandbox de prévia interativa.
  • Implante o aplicativo no Cloud Run diretamente da interface do Google AI Studio.

O que você vai aprender

  • Como usar o modo de criação do Google AI Studio para prototipar rapidamente um serviço de pilha completa usando linguagem natural.
  • Como o Google AI Studio configura automaticamente as integrações do Firebase Firestore e do Firebase Authentication.
  • Como implantar seu aplicativo do AI Studio como um contêiner sem servidor no Cloud Run.
  • Como inspecionar registros de banco de dados e status de segurança no console do Firebase.

2. Configuração do projeto

Antes de iniciar o AI Studio, verifique o status da sua conta e os pré-requisitos.

Informações da Conta do Google e da camada

  1. Se você ainda não tiver uma, crie uma Conta do Google.
    • Dica: use uma Conta do Google pessoal neste laboratório, se possível. Contas de grupo, corporativas ou escolares podem aplicar políticas do Workspace que desativam recursos experimentais ou integrações na nuvem.
  2. Revise os detalhes de faturamento das implantações:
    • Nível Starter do Google Cloud: permite publicar até dois aplicativos full-stack em uma região selecionada sem custo financeiro e sem estabelecer uma conta de faturamento completa do Google Cloud.
    • Implantação padrão: conecta-se a um projeto pago do Google Cloud e aumenta os limites de armazenamento, os recursos de CPU e as APIs.

3. Criar um app de tarefas no modo de criação do AI Studio

Vamos criar o shell do aplicativo e pedir ao assistente de código de IA para criar camadas de segurança e persistência.

  1. Acesse o painel de apps do Google AI Studio e clique em Novo app.
  2. Na caixa de comando do chat, insira a descrição do seu aplicativo de tarefas: 
    Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.
  3. Clique em Build para iniciar o processo de geração do aplicativo.

Quando o agente do AI Studio reconhece a necessidade de armazenamento de banco de dados e login seguro do usuário, ele aciona o fluxo automatizado de configuração do Firebase.

  1. Após cerca de um minuto, um card de integração para Ativar o Firebase aparece no espaço de trabalho.
  2. Clique no botão Ativar o Firebase para confirmar e aceitar os Termos de Serviço.
  3. O agente vai executar a configuração em segundo plano. Em segundo plano:
    • Uma instância de banco de dados do Firestore é provisionada.
    • O Firebase Authentication é ativado com o Login do Google.
    • Uma configuração de conta de serviço é estabelecida (por exemplo, criando src/lib/firebase.ts com credenciais da API).
    • Um firestore.rules que contém limites de segurança padrão (regras de isolamento do usuário) é adicionado.

4. Teste e repita

Antes de lançar o serviço, faça verificações de validação na prévia interativa.

  1. Abra o painel de visualização no Google AI Studio.
  2. Clique no botão "Login" para acionar a autenticação do Login do Google na sandbox.
    • Observação sobre a correção de erros: durante a geração ou o teste, você pode enfrentar problemas de tempo de execução, erros de compilação ou falhas de permissão do Firestore devido ao desalinhamento das regras de segurança. Se isso acontecer, o AI Studio vai mostrar um botão Corrigir no chat. Assim, você pode pedir ao agente para diagnosticar e corrigir o problema automaticamente.
    Local do botão de correção do Google AI Studio
  3. Depois de fazer login, adicione várias tarefas (por exemplo, "Revisar a documentação do Cloud Run", "Concluir o Codelab").
  4. Marque algumas tarefas como concluídas e exclua uma para garantir que os manipuladores do lado do cliente e o estado do banco de dados sejam atualizados corretamente.
  5. Se você quiser mudar o estilo ou o comportamento, instrua o agente na janela de chat. Por exemplo:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. Aguarde o agente atualizar a base de código e confira as atualizações no navegador de prévia.

5. Implantar no Cloud Run

Quando o protótipo estiver totalmente funcional, implante-o como um serviço público no Cloud Run.

  1. No canto superior direito do Google AI Studio, clique no botão Publicar para iniciar o assistente de implantação.Localização do botão "Publicar" do Google AI Studio
  2. Clique em Começar para configurar seu projeto na nuvem do Google Cloud.
    • Verifique se o menu suspenso Projeto do Google Cloud de destino corresponde ao projeto associado ao seu espaço de trabalho.
    • O AI Studio vai gerar automaticamente um identificador de serviço exclusivo para a instância do Cloud Run.
  3. Se esta for sua primeira implantação e você estiver usando parâmetros padrão do Google Cloud, talvez seja necessário especificar um tipo de organização e fornecer detalhes de faturamento.
  4. Clique em Publicar app.
  5. As etapas de build e registro de contêiner e implantação de serviço acontecem em segundo plano. Esse processo normalmente leva de 2 a 4 minutos.
  6. Quando a implantação terminar, copie o URL do aplicativo gerado e acesse o link do aplicativo ativo em uma guia do navegador.
  7. Teste o aplicativo da Web ativo no seu navegador.

6. Inspecionar no console do Firebase

Confira como os esquemas de dados e os usuários são rastreados.

  1. Navegue até o console do Firebase.
  2. Selecione seu projeto (que tem o rótulo AI Studio ou o ID do projeto vinculado manualmente).
  3. No painel de navegação à esquerda, selecione Build > Banco de dados do Firestore:
    • Confira as coleções e os documentos do banco de dados criados pelo seu aplicativo.
    • Verifique se cada documento tem um ID de proprietário que corresponde às credenciais de autenticação do usuário ativo.
  4. Selecione a guia Segurança no painel do Firestore para analisar as diretivas de segurança geradas automaticamente que limitam as permissões de leitura e gravação aos proprietários de documentos verificados.
  5. Acesse Segurança > Autenticação para ver a lista de credenciais de usuário ativas preenchidas durante os testes de login.

7. Limpeza

Para evitar cobranças inesperadas ou limpar os recursos do seu espaço de trabalho:

  1. No Google AI Studio, acesse a página de apps.
  2. Encontre o aplicativo na grade ou lista.
  3. Clique no ícone da lixeira para excluir o estado do app e cancelar a publicação do serviço no Cloud Run.
  4. Se você fez a implantação usando um projeto padrão e quer desligar todos os recursos completamente, acesse as Configurações do projeto do console do Google Cloud e exclua o projeto subjacente.

8. Conclusão

Parabéns! Você projetou, desenvolveu e implantou um aplicativo da Web de pilha completa diretamente do Google AI Studio.

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.

Saiba mais