1. Visão geral
Neste codelab, você vai criar um aplicativo da Web "Snake & Beats", um jogo Snake retrô com um player de música integrado. Você vai usar o Gemini para gerar um aplicativo React de arquivo único com uma estética neon, depois controle de versões e implantá-lo no Cloud Run.
Atividades deste laboratório
- Criar e dar comandos: use o modo "Criar" do Google AI Studio para gerar um jogo funcional com um único comando.
- Refine com instruções do sistema: faça um "teste de vibe" na sua IA definindo uma personalidade persistente para edições futuras.
- Salvar no GitHub: inicialize um novo repositório diretamente do AI Studio.
- Implantar no Cloud Run: envie seu jogo para o Google Cloud Run com um clique.
O que você vai aprender
- Como usar o modo de criação no Google AI Studio para prototipagem rápida de apps.
- Como usar as instruções do sistema para manter uma "vibe de programação" consistente durante a iteração.
- Como conectar o Google AI Studio ao GitHub e ao Cloud Run.
O que é necessário
- Navegador da Web Google Chrome
- Uma conta do Gmail
- Um projeto do Cloud com faturamento ativado
- Uma chave da API Gemini
- Uma conta do GitHub
2. Antes de começar
- No console do Google Cloud, na página de seletor de projetos, selecione ou crie um projeto do Google Cloud.
- Verifique se o faturamento está ativado para seu projeto do Cloud. Saiba como verificar se o faturamento está ativado em um projeto .
3. Criação e comando (o núcleo)
Vamos começar criando todo o aplicativo de uma só vez. Faça login no Google AI Studio e confira se você está na interface de criação.
- Insira o comando de build: cole o seguinte comando detalhado na caixa de chat:
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- Selecione seu modelo: no painel de configurações à direita, confira se o Gemini 3.0 Pro (ou o modelo de prévia mais recente) está selecionado para a geração de código mais rápida.
- Executar: clique em Build ou pressione Cmd + Enter.
- Prévia: o Gemini vai gerar o código e geralmente renderizar uma prévia dinâmica no lado direito (como mostrado abaixo):
4. Refinar com anotação, imagens e voz
Às vezes, é difícil descrever uma mudança visual em palavras. Com o modo de anotação, você pode desenhar na prévia do app para comunicar sua visão instantaneamente.
Usar o modo de anotação
- Ativar o modo de anotação: na interface do AI Studio, confira o painel lateral à esquerda ou a barra de ferramentas na parte de baixo da janela de visualização e selecione a ferramenta de anotação ou refinamento.
- Marcar seu app:
- Desenhar: use a ferramenta de caixa para desenhar um retângulo ao redor do contador de pontuação.
- Comentário: digite um comando anexado à caixa: "Aumente, digitalize e faça um efeito de falha nessa fonte".
- Esboço: use a ferramenta de seta para apontar para os botões "Reproduzir/Pausar".
- Comentário: digite "Mude para ícones de neon brilhantes".
- Iterar: clique em "Adicionar ao chat" e em Enviar comando. O Gemini vai interpretar suas marcações visuais e os comandos de texto para atualizar o código.
- Verificar: assista à atualização de teste ao vivo. Seu feedback visual agora vai aparecer no código.
Entrada de texto por voz (The Spoken Vibe)
Às vezes, é mais fácil falar do que escrever sobre a "vibe".
- Ação: clique no ícone de microfone na barra de entrada (ao lado do botão +).
- Conversação: "Ei, a animação da cobra está muito lenta. Acelere e faça com que a cauda deixe um rastro brilhante".
- Enviar: o Gemini converte sua voz em texto e aplica as mudanças.
5. Definir instruções do sistema e recriar
Ao contrário de um comando normal, a instrução de sistema persiste durante toda a sessão. É o melhor lugar para definir padrões de programação, convenções de nomenclatura ou uma persona visual específica que não deve mudar.
- Abra as configurações avançadas: na interface do Google AI Studio (modo de criação), procure a caixa "Instruções do sistema". Se ele não estiver visível, clique em "Configurações" (ícone de engrenagem) ou "Configurações avançadas" na parte de cima ou ao lado do painel de chat.
- Adicione a instrução "Vibe": cole a instrução a seguir na caixa de texto. Isso define um perfil de "Glitch Art" para nosso jogo:
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- Acionamento da mudança: mudar a instrução do sistema não reescreve o código automaticamente. Você precisa pedir para o Gemini aplicar essas novas regras.
- Feche o painel de configurações.
- Na entrada de chat/comando, digite: "Recrie a interface do aplicativo para seguir estritamente as novas instruções do sistema".
- Clique em "Executar / Enviar".
- Observe a atualização: o Gemini vai reconhecer a mudança.
6. Salvar no GitHub
Em vez de baixar arquivos e usar a linha de comando, vamos usar a integração do GitHub para inicializar um repositório instantaneamente.
- Localize a integração: na barra de ferramentas superior da interface do Google AI Studio, procure o ícone do GitHub entre os ícones "Download" e "Implantar".
- Conectar sua conta: clique no ícone. Se esta for a primeira vez, você vai precisar autorizar o Google AI Studio a acessar sua conta do GitHub.
- Criar o repositório: uma caixa de diálogo vai aparecer com o título "Preencha as informações abaixo para criar seu repositório".
- Nome do repositório: insira um nome, por exemplo, "Jogo da cobrinha gerado com IA usando React."
- Descrição do repositório: insira uma descrição.
- Visibilidade: selecione "Público" (para facilitar o compartilhamento) ou "Privado".
- Enviar para o GitHub: clique no botão "Criar repositório Git".
7. Implantar no Cloud Run
Agora que o aplicativo está pronto e salvo no GitHub, vamos implantá-lo no Cloud Run.
- Iniciar implantação: clique no botão destacado abaixo. Ele fica no canto superior direito da página do AI Studio.
- Selecionar projeto: clique no menu suspenso "Selecionar um projeto do Cloud" e escolha seu projeto.
- Solução de problemas: se você não encontrar seu projeto no menu suspenso, clique em "Importar projeto" e selecione o projeto no painel "Importar projeto".
- Verificação de faturamento: depois que você seleciona o projeto, ele é verificado para confirmar se o faturamento está ativado. Essa verificação será aprovada automaticamente, já que anexamos a conta de faturamento ao projeto na seção "Antes de começar".
- Implantar: clique no botão "Implantar app" e aguarde a implantação do aplicativo no Cloud Run. Observação: o nome do serviço do Cloud Run será gerado automaticamente.
- A implantação será concluída em alguns minutos, e você vai receber o URL do aplicativo. Ao clicar no URL, você vê o aplicativo da Web implantado ao vivo na Internet.
8. Limpar
Para evitar cobranças na sua conta do Google Cloud pelos recursos usados nesta postagem, siga estas etapas:
- No console do Google Cloud, acesse a página Gerenciar recursos.
- Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir.
- Na caixa de diálogo, digite o ID do projeto e clique em Desligar para excluir o projeto.
9. Parabéns
Parabéns! Você concluiu a programação de um aplicativo no AI Studio e o implantou no Cloud Run.
O AI Studio é uma plataforma ideal para desenvolver e testar aplicativos, permitindo que os usuários visualizem imediatamente seus designs em ação.
A integração perfeita do AI Studio com o Cloud Run permite que os usuários implantem os aplicativos diretamente no Google Cloud sem dificuldades. O uso do Cloud Run concede todos os benefícios inerentes de um ambiente sem servidor, eliminando as complexidades e a sobrecarga do gerenciamento de infraestrutura.