Como criar um app Android no Anti-Gravity

Autoria: Google Antigravity · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: How to Build an Android App on Antigravity · Canal: Google Antigravity · 04:17 · Assistir no YouTube

Tópicos: Agentes de IA, Engenharia de software com IA, Ferramentas de desenvolvimento com IA

Resumo

O vídeo demonstra como criar um app de teoria musical para Android usando Stitch para projetar as telas e Anti-Gravity para implementá-las. A integração com o Stitch MCP permite que o agent acesse os designs, enquanto o plugin Build with Google Android fornece as skills necessárias para usar o Android CLI. O agent cria o app com componentes nativos, testa as telas no emulador e, por fim, executa o app em um dispositivo Android real. O resultado usa views do Jetpack Compose e pode ser refinado com novos prompts.

Pontos-chave

O app de exemplo ensina notas, escalas e acordes.
Os designs podem ser criados no Stitch antes de serem enviados ao agent no Anti-Gravity.
A configuração do Stitch MCP permite ao agent acessar as telas e os recursos exportados.
O plugin Build with Google Android adiciona skills e contexto para usar o Android CLI e depurar problemas.
O agent pode criar o app e iniciá-lo no emulador Android.
O vídeo orienta o agent a usar views nativas em vez de uma web view.
O Anti-Gravity verifica o app com capturas de tela e comandos enviados ao emulador.
O app pode ser executado em um dispositivo real conectado por USB, com a depuração USB ativada.

Capítulos

Início	Capítulo	Resumo
00:00	Visão geral e criação dos designs	O vídeo apresenta o app de teoria musical e mostra como iniciar seus designs no Stitch.
01:04	Integração do Stitch e configuração do Android	As telas são exportadas, o Stitch MCP é configurado e o plugin Build with Google Android é instalado.
02:10	Construção do app no emulador	O prompt e as telas são enviados ao agent, que cria o app e o inicia no emulador.
03:14	Verificação e execução em um dispositivo real	O app é testado com views nativas no emulador e, depois, executado em um telefone conectado.

Citações

Hoje, quero mostrar como você pode criar um app Android inteiro no Anti-Gravity. — 00:00

Você pode fazer isso em qualquer ordem: começar no Anti-Gravity e trazer as telas depois, ou começar no Stitch e pedir ao agent que as crie. — 00:33

Crie um app Android usando estas telas e execute-o no emulador. — 02:42

Estas são views reais do Jetpack Compose. — 03:45

Conseguimos criar nosso primeiro app Android usando Anti-Gravity, Stitch e o plugin Build with Google Android CLI. — 04:17

Conceitos e entidades

Antigravity (ferramenta): Ambiente usado para coordenar o agent, integrar ferramentas e criar e testar o app Android.
Stitch (ferramenta): Ferramenta usada para criar as telas do app e exportá-las para o Anti-Gravity.
MCP (conceito): Protocolo cuja integração permite ao agent acessar as ferramentas do Stitch.
Android CLI (ferramenta): Interface de linha de comando do ecossistema Android, que o agent pode usar com o contexto fornecido pelo plugin.
Build with Google Android plugin (ferramenta): Plugin que fornece skills e orientações para o agent trabalhar com ferramentas e recursos do Android.
Jetpack Compose (conceito): Toolkit usado no app para criar views nativas para Android.
Android emulator (ferramenta): Emulador usado para executar e testar o app durante o desenvolvimento.

Tradução completa (pt-BR)

00:00 Hoje, quero mostrar como você pode criar um aplicativo Android inteiramente no Anti-Gravity, usando ferramentas como Stitch e também o Android CLI. Também temos muitas ferramentas avançadas do ecossistema Google e outras coisas que você pode descobrir na seção Build with Google, assim como no marketplace de MCP. Hoje, vamos criar um aplicativo de teoria musical que permite aprender notas, escalas e acordes. Vamos começar no Stitch, com os designs. Depois, vamos levá-los para o Anti-Gravity para criar as telas como componentes nativos de verdade e, por fim, vamos executá-lo em um dispositivo real. Agora, posso abrir o Stitch. É aqui que podemos dar a

00:33 ideia do aplicativo de forma abstrata. Você pode fazer isso em qualquer ordem: pode começar no Anti-Gravity e depois trazer as telas ou começar no Stitch e, em seguida, pedir ao agent que as crie. Aqui, temos o prompt do nosso aplicativo, que é um aplicativo de aprendizado de teoria musical em que o usuário aprende notas, escalas e acordes. Podemos simplesmente iniciar o processo no Stitch para que ele comece a criar e compor nossas telas, e podemos decidir se queremos refiná-las mais ou levá-las diretamente ao agent. O primeiro passo vai apenas nos pedir para confirmar quais telas queremos criar, e podemos

01:04 dizer que queremos prosseguir com as quatro primeiras telas para dispositivos móveis. Aqui, podemos ver o agent criando as telas e cada um dos elementos individuais. Agora, podemos ver que todas as telas estão prontas e temos uma boa visão geral das diferentes telas de alto nível que serão adicionadas ao aplicativo. Em seguida, podemos selecionar as quatro telas e clicar em exportar. Você pode ir até MCP, clicar em configurar MCP e verá Anti-Gravity no menu suspenso. Podemos copiar isso para o nosso agent e voltar ao Anti-Gravity. Então, podemos dizer: “Configure o servidor MCP do Stitch.”

01:37 Aqui, o agent está adicionando o servidor MCP ao nosso registro global de MCP dentro do Anti-Gravity. Isso permite que esta conversa acesse a ferramenta MCP do Stitch. O próximo passo é adicionar o plugin Build with Google Android ao Anti-Gravity. Podemos fazer isso acessando as configurações do projeto, entrando em personalizações, rolando até o final e procurando a seção de plugins Build with Google. Podemos ver o Anti-Gravity no topo e clicar em baixar. Ao clicar em baixar nos plugins Build with Google para Android, vamos baixar as skills necessárias para chamar o Android CLI. Isso

02:10 dá ao agent contexto sobre como chamar as várias partes do ecossistema Android, além de indicar onde procurar quando precisar depurar diferentes problemas. Depois, podemos fechar e voltar ao nosso prompt. Podemos voltar ao Stitch e, agora que configuramos o MCP, copiar o prompt. Voltando ao Anti-Gravity, podemos colar esse prompt, que dá ao Anti-Gravity o contexto sobre quais telas ele precisa buscar usando as ferramentas MCP que acabamos de adicionar. Em seguida, podemos adicionar um prompt na parte de baixo que diga: “Crie um aplicativo Android usando estas telas e execute-o no emulador.” Então, basta enviar

02:42 isso ao nosso agent, e ele começará a criar o aplicativo em segundo plano. Aqui, ele vai nos pedir para aprovar a ferramenta, o que podemos fazer e permitir no nosso projeto. Podemos ver que ele iniciou o emulador Android, que podemos mover para o lado. Já podemos ver que o Anti-Gravity iniciou um aplicativo Hello World no emulador. Aqui, estamos apenas orientando o agent a usar visualizações nativas em vez de uma visualização web.

03:14 Aqui, podemos ver o Anti-Gravity verificando o aplicativo Android ao fazer capturas de tela e enviar comandos ao emulador para tocar nas várias abas dentro do aplicativo. Aqui, podemos ver a visão geral final que o Anti-Gravity preparou. Ela inclui todas as telas que ele buscou no Stitch, tanto o HTML quanto as imagens que usou como entrada, além de uma análise detalhada do que ele realmente criou. Podemos testar o aplicativo no emulador Android clicando nas telas e conferindo se ele realmente funciona, e podemos

03:45 testar algumas coisas diferentes aqui. Elas usam visualizações reais do Jetpack Compose, e podemos personalizá-las ainda mais enviando novos prompts ao agent para que ele as crie para nós. Ao criar aplicativos Android no Anti-Gravity e querer instalá-los em um dispositivo real, basta conectar o telefone, e será solicitado que você habilite a depuração USB, caso ainda não tenha feito isso. Em seguida, podemos pedir ao agent que execute o aplicativo em um dispositivo real conectado. E, como você pode ver, podemos tocar nas telas

04:17 e interagir com ele exatamente como fizemos no emulador Android. Também podemos fazer o teste que vimos antes. E pronto: conseguimos criar nosso primeiro aplicativo Android usando Anti-Gravity, Stitch e o plugin Android CLI do Build with Google. Espero que este seja apenas o começo da sua jornada criando aplicativos Android com o Anti-Gravity. Há muito para explorar no ecossistema Android, então não deixe de conferir a documentação para desenvolvedores Android. Mal podemos esperar para ver o que você vai criar.

Transcrição original

[00:00] Today, I want to walk through how you can build an Android application all inside of Anti-Gravity using tools like Stitch as well as the Android CLI. We also have [music] a lot of rich tools from the Google ecosystem and other things that you can find out in the Build with Google section as well as the MCP marketplace. Today, we’re going to be building a music theory app that lets you learn notes, scales, and chords. We’re going to start in Stitch with the designs. We’re going to then going to bring it into Anti-Gravity to build out the screens as real native components, and then finally, we’re going to run it on a real device. Now, I can open up Stitch. This is where we can give the

[00:33] idea for the application in an abstract form. You can do this in any order, whether you’re starting in Anti-Gravity and then bringing the screens in later [music] or starting with Stitch and then giving it to the agent to build. Here, we have the prompt for our application, which is a music theory learning application where the user learns notes, [music] scales, and chords. And we can just kick this off to Stitch to have it start building and composing our screens, and we can decide if we want to refine it further or bring them right to the agent. The first step is just going to ask us to [music] confirm which screens we want to build, and we can go ahead

[01:04] and say we want to proceed with the first four mobile screens. Here, we can see the agent building out the screens as well as each of the individual elements. We can see now that all the screens are complete, and we have a nice overview of the different high-level screens that will be added to the application. We can then select all four screens and click export. You can go down to MCP, click set up MCP, and you’ll see Anti-Gravity [music] in the drop-down. We can copy this to our agent and go back to Anti-Gravity, and we can say, [music] “Set up the Stitch MCP server.”

[01:37] Here, the agent is adding the MCP server to our global MCP registry inside of Anti-Gravity. This allows this conversation to be able to access the Stitch MCP tool. The next step is going to be to add the Build [music] with Google Android plugin inside of Anti-Gravity. We can do that by going into our project settings, going into customizations, scrolling to the bottom, and we can see this Build with Google plugin section. We can see Anti-Gravity here at top, and we can click download. By clicking download inside the Build with Google plugins for Android, we’re going to download the skills that are needed to be able to call the Android CLI. This

[02:10] gives the agent context about how to call the various parts of the Android ecosystem, as well as places to look when it needs to debug various things. Then, we can close and get back to [music] our prompt. We can go back to Stitch, and now that we have the MCP set up, [music] we can copy the prompt. Going back to Anti- to Gravity, we can [music] paste in that prompt, which just gives Anti-Gravity the context for which screens it needs to pull [music] using the MCP tools that we just added. We then can add a prompt at the bottom that says, “Build an Android application using [music] these screens, and run it on the emulator.” We then can just send

[02:42] it off to our agent, and it’ll start building the app in the background. Here, it’s going to ask us to approve the tool, which we can do and allow it inside [music] of our project. And we can see that it launched the Android emulator, which we can move over to the side. We can see that Anti-Gravity has launched a Hello World application on the emulator already. Here, we’re just steering the agent to use native views instead of a web view.

[03:14] Here, we can see Anti-Gravity verifying the Android application by taking screenshots and sending commands to the emulator to tap on the various tabs [music] inside the application. Here, we can see the final overview that Anti-Gravity has put together. It includes all the screens that it pulled from Stitch, grabbing both the HTML and the images that it used as input, and a deep dive into what it actually built. We can test out the application on the Android emulator by clicking around and seeing that it does, in fact, work, and we can

[03:45] >> [music] >> test out a couple different things here. These are using real Jetpack Compose views, and we can customize this further by giving it further prompts to the agent to build for us. When you’re building Android applications inside of Anti-Gravity, and you want to deploy it on a real device, all you have to do is plug in your phone and you’ll be prompted to enable USB debugging if you haven’t done that before. We can then ask the agent to run the application on a connected real device. And as you can see, we can tap around

[04:17] and play with it just like we did inside the Android emulator. We can even take [music] the quiz that we saw earlier. And just like that, we were able to build our first Android application using anti-gravity, [music] Stitch, and the Build with Google Android CLI plugin. Hopefully, this is just the start of your journey with building with Android applications using anti-gravity. There is so much to explore with the Android ecosystem, so make sure to check out the Android developer documentation. We cannot wait to see what you’ll build.