Desenvolver apps full-stack no Google AI Studio

O Google AI Studio agora oferece suporte ao desenvolvimento full stack, permitindo que você crie aplicativos que vão além dos protótipos do lado do cliente. Com um ambiente de execução do lado do servidor, é possível gerenciar secrets, conectar-se a APIs externas e criar experiências multijogador em tempo real.

Ambiente de execução do lado do servidor

Os aplicativos do Google AI Studio agora podem incluir um componente do lado do servidor (Node.js). Isso permite que você:

  • Execute a lógica do lado do servidor: execute códigos que não devem ser expostos ao cliente.
  • Acesse pacotes npm: o agente Antigravity pode instalar e usar pacotes do vasto ecossistema npm.
  • Gerencie secrets: use chaves e credenciais de API com segurança.

Usar pacotes npm

Não é necessário executar npm install manualmente. Basta pedir ao agente para adicionar funcionalidades que exigem um pacote, e ele vai processar a instalação e a importação.

Exemplo: > "Use axios para buscar dados da API externa."

Gerenciar secrets com segurança

Com o código do lado do servidor e o gerenciamento de secrets, agora é possível criar apps que interagem com o mundo.

Chave da API Gemini

Ao criar um novo app que usa a API Gemini, o AI Studio configura automaticamente a GEMINI_API_KEY como um secret do lado do servidor. Não é necessário fazer a configuração manual. É possível conferir essa chave no painel Secrets em "Configurações". As chamadas da API Gemini do seu app são feitas pelo código do lado do servidor usando essa chave, então ela nunca é exposta no navegador.

Chaves de API de terceiros

Para outros serviços, é possível adicionar chaves de API manualmente:

  • APIs de terceiros: conecte-se a serviços como Stripe, SendGrid ou APIs REST personalizadas.
  • Bancos de dados: conecte-se a bancos de dados externos (por exemplo, pelo Supabase, Firebase, ou MongoDB Atlas) para manter os dados além da sessão.

Ao criar apps reais, muitas vezes é necessário se conectar a serviços de terceiros (como Twilio, Slack ou bancos de dados) que exigem chaves de API. É possível adicionar chaves manualmente seguindo estas etapas:

  1. Adicionar um secret: acesse o menu Configurações no Google AI Studio e procure a seção "Secrets".
  2. Armazenar a chave: adicione suas chaves de API ou tokens secretos aqui.
  3. Acessar no código: o agente pode escrever um código do lado do servidor que acessa esses secrets com segurança (normalmente por variáveis de ambiente), garantindo que eles nunca sejam expostos ao navegador do lado do cliente.

Quando necessário, o agente também vai mostrar um card no chat pedindo que você adicione chaves sempre que um novo secret for necessário ou quando uma nova chave for detectada nas variáveis de ambiente do projeto.

Integração do Firebase para banco de dados e autenticação

O Google AI Studio agora facilita a adição de um banco de dados ou autenticação ao seu app por meio de uma integração do Firebase. O agente Antigravity pode provisionar e configurar automaticamente os seguintes serviços para você:

  • Banco de dados do Firestore: um banco de dados de nuvem NoSQL flexível e escalonável para armazenar e sincronizar dados no desenvolvimento do cliente e do lado do servidor.
  • Firebase Authentication: permite que os usuários façam login no seu aplicativo com segurança usando fluxos de "Fazer login com o Google".

Basta pedir ao agente para "adicionar um banco de dados ao meu app" ou "configurar o Login do Google", e ele vai processar a configuração e a geração de código necessárias para você.

O Firebase permite que você comece sem custo financeiro e, opcionalmente, faça o escalonamento com uma conta paga sempre que estiver pronto para mais cota ou para usar recursos pagos.

Configurar o OAuth

Um caso de uso importante para o gerenciamento de secrets é configurar o OAuth para se conectar a outros sites ou apps. Quando o comando inclui instruções sobre como se conectar a um app de terceiros que exige autenticação OAuth, o agente fornece instruções sobre como configurar o OAuth para esse aplicativo. Essas instruções incluem os URLs de callback necessários para configurar o aplicativo OAuth. Também é possível encontrar os URLs de callback em Integrações no painel "Configurações".

Criar experiências multijogador

O ambiente de execução full stack permite recursos de colaboração em tempo real.

  • Estado em tempo real: é possível pedir ao agente para criar recursos como "um chat ao vivo", "uma lousa colaborativa" ou "um jogo multijogador".
  • Sessões sincronizadas: o servidor gerencia o estado, permitindo que vários usuários interajam com a mesma instância do aplicativo em tempo real.

Exemplo de comando: > "Crie um jogo multijogador em que os jogadores possam ver os cursores uns dos outros."

Dicas para testar apps multijogador

É possível testar o modo multijogador de duas maneiras antes de implantar o app.

  1. Abra o app no modo de build do Google AI Studio em várias guias. Ao desenvolver no modo de build, o app fica em um contêiner de desenvolvimento. Abrir o app em várias guias permite simular vários jogadores usando o app.
  2. Compartilhe o app com outras pessoas usando o menu Compartilhar no canto superior direito. Em seguida, use o URL compartilhado na guia Integrações do menu Compartilhar para usar o app com os jogadores com quem você o compartilhou.

Práticas recomendadas

  • Chamadas da API Gemini: seu GEMINI_API_KEY é configurado automaticamente como um secret do lado do servidor. Faça chamadas da API Gemini no código do lado do servidor usando essa chave. É possível conferir no painel Secrets.
  • Segurança de secrets: sempre use o gerenciador de secrets para chaves confidenciais. Nunca as codifique nos seus arquivos.
  • Separação de problemas: mantenha a lógica da interface no framework do lado do cliente (React/Angular) e a lógica de negócios/processamento de dados no lado do servidor.
  • Tratamento de erros: verifique se o código do lado do servidor processa erros de chamadas de API externas de maneira robusta para evitar que o app falhe.

A seguir