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, ela começa com uma consulta ou um protótipo simples. O Google AI Studio oferece um modo de criação avançado (geralmente chamado de "vibe coding") que permite projetar, testar e criar aplicativos da Web de pilha completa usando a geração de código orientada por modelos do Gemini.

Neste codelab, você vai criar um aplicativo colaborativo de tarefas com um banco de dados do 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ê poderá implantá-lo diretamente no Cloud Run com um único clique.

Atividades deste laboratório

  • Solicitar ao Google AI Studio que crie um protótipo de um aplicativo da Web colaborativo de lista de tarefas.
  • Configurar e ativar a integração do Firebase para provisionar um banco de dados do Firestore e configurar a autenticação do Login do Google.
  • Testar o aplicativo no ambiente de simulação de visualização interativa.
  • Implantar o aplicativo no Cloud Run diretamente na interface do Google AI Studio.

O que você vai aprender

  • Como usar o modo de criação do Google AI Studio para criar rapidamente um protótipo de um serviço de pilha completa usando linguagem natural.
  • Como o Google AI Studio configura automaticamente as integrações do Firebase Firestore e do Authentication.
  • Como implantar o aplicativo do AI Studio como um contêiner sem servidor no Cloud Run.
  • Como inspecionar registros de banco de dados e o 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 do nível

  1. Se você ainda não tiver uma Conta do Google, crie uma.
    • Dica: use uma Conta do Google pessoal para este 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 de pilha completa em uma região selecionada sem custo financeiro, sem estabelecer uma conta de faturamento completa do Google Cloud.
    • Implantação padrão: conecta-se a um projeto na nuvem pago do Google Cloud e expande 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 solicitar ao assistente de código de IA que crie camadas de segurança e persistência.

  1. Navegue até o painel "Apps" do Google AI Studio e clique em Novo app.
  2. Na caixa de comando de chat, insira a descrição do 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 Criar 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 de configuração automatizado 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 do 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 que contém credenciais de 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 iniciar o serviço, execute verificações de validação na visualização 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 no ambiente de simulação.
    • Observação sobre a correção de erros: durante a geração ou o teste, você pode enfrentar problemas 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, permitindo que você peça ao agente para diagnosticar e reparar 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 documentos do Cloud Run", "Concluir o codelab").
  4. Marque algumas tarefas como concluídas e exclua uma para garantir que os gerenciadores do lado do cliente e as atualizações de estado do banco de dados sejam feitos corretamente.
  5. Se você quiser mudar o estilo ou o comportamento, instrua o agente pela 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 o navegador de visualização para ver as atualizações.

5. Implantar no Cloud Run

Depois que 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 criação, registro e implantação de contêineres acontecem em segundo plano. Esse processo normalmente é concluído em 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 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 Criar > Banco de dados do Firestore:
    • Confira as coleções e os documentos do banco de dados criados pelo 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 revisar as diretivas de segurança geradas automaticamente que limitam as permissões de leitura e gravação aos proprietários de documentos verificados.
  5. Navegue até Segurança > Autenticação para conferir a lista de credenciais de usuário ativas preenchidas durante os testes de login.

7. Limpeza

Para evitar cobranças de faturamento imprevistas ou limpar os recursos do espaço de trabalho:

  1. No Google AI Studio, acesse a página "Apps".
  2. Encontre seu aplicativo na grade ou na 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 quiser desligar todos os recursos inteiramente, 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 colaborativo de pilha completa diretamente do Google AI Studio.

Para receber o selo de conclusão de um laboratório de criadores de conteúdo e encontrar outro laboratório para continuar sua jornada, acesse goo.gle/builders.

Saiba mais