Lance seu videogame baseado na Web 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 jogo de vídeo baseado na Web e em turnos usando um banco de dados do Firestore com Event Sourcing (para persistir ações de jogo como uma sequência de eventos para que os jogadores possam conferir o histórico de partidas e voltar a turnos anteriores) 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 front-end, a lógica de Event Sourcing e o código de interação do banco de dados. Depois que o app estiver pronto, você vai 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 de jogo de vídeo multiplayer baseado em turnos.
• Implementar suporte para um código de jogo curto compartilhável ou um link de participação para permitir que os amigos se conectem à mesma partida.
• Implementar o armazenamento do banco de dados do Firestore com um padrão de Event Sourcing para rastrear históricos de partidas e permitir viagens no tempo de jogo (desfazer ou reproduzir turnos).
• 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 testes 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 jogo de pilha completa usando linguagem natural.
• Como implementar um padrão arquitetônico de Event Sourcing usando o Cloud Firestore para armazenar o histórico de jogos.
• 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 conta do Google.
   • Dica: use uma conta pessoal do Google 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. Confira 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, sem estabelecer uma conta do Cloud Billing 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 jogo de vídeo baseado em turnos 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, lógica de jogo e persistência de Event Sourcing.

1. Navegue até 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 aplicativo de jogo de vídeo baseado em turnos:

   Build a web-based, turn-based Tic-Tac-Toe game using
   Firebase as a backend. Users must be able to securely sign in
   using Google Sign-In, start a new game match, make moves, and play
   against an AI player or another user. Any algorithm used for the
   game opponent AI should use simple algorithms like min/max and the
   app should not make any calls to an LLM like the Gemini API. To
   support multiplayer matches, the application must generate a short
   game code or share link that players can easily copy and send to a
   friend to join the match. Use Firestore and an event sourcing
   pattern to save a history of every move (turn) as a separate event
   document in a subcollection under the game document. The
   application must reconstruct the current game state by replaying
   these events, and must allow users to view previous turns and opt
   to restore/roll back the game to a prior turn's state.
   

   Este link vai preencher automaticamente a caixa de comando para você.
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. Nos bastidores:
   • 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 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 testes.
   • 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.
   
3. Depois de fazer login, inicie uma nova partida de jogo, copie o código de jogo curto gerado ou compartilhe o link e verifique se ele pode ser usado para participar da partida.
4. Faça vários movimentos e verifique se o histórico de partidas é renderizado corretamente.
5. Tente voltar aos turnos anteriores da partida. Verifique se o tabuleiro ou o estado são atualizados para refletir esse ponto anterior no histórico de jogos e se você pode restaurar ou reverter para esse estado.
6. Se você quiser mudar o estilo ou o comportamento, instrua o agente pela janela de chat. Por exemplo:
   • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
   • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
7. 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.
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.
   • Opcionalmente, você pode especificar um prefixo de URL .ai.studio personalizado (por exemplo, your-portfolio-name.ai.studio) como parte da configuração de implantação.
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 os bastidores para saber 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 de 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 de 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 jogo de vídeo baseado em turnos diretamente do Google AI Studio.

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

Para continuar sua jornada, acesse goo.gle/builders para o próximo laboratório.

Saiba mais

• Guia de regras de segurança do Firestore
• Documentos do Cloud Run
• Criar apps no Google AI Studio