1. Introdução à Implantação de Aplicativos do Google AI Studio [0]

thumbnail Este guia ensina como tornar públicos os aplicativos criados no Google AI Studio, permitindo que sejam usados por outras pessoas ou por você mesmo fora do ambiente de desenvolvimento.

1.1. O Que é o Google AI Studio e Por Que Implantar? [4]

  • O Google AI Studio é uma ferramenta gratuita para criar aplicativos usando modelos de IA poderosos como o Gemini 2.5 Pro. [9]
  • Embora o Google AI Studio seja um ambiente de "sandbox" (ambiente de teste), para usar ou compartilhar um aplicativo, ele precisa ser implantado e hospedado em outro lugar. [12]
  • Este tutorial se aplica a qualquer ecossistema de desenvolvimento de aplicativos que se conecta ao GitHub, não apenas ao Google AI Studio. [14]

1.2. Visão Geral do Processo de Implantação [15]

  • O vídeo abordará uma breve visão geral da criação de aplicativos no Google AI Studio, incluindo novos recursos. [15]
  • Serão apresentadas duas opções principais para implantação: Google Cloud Run e via GitHub usando Vercel ou Netlify. [16]
  • A implantação facilita o teste e a adição de novos recursos ao aplicativo. [17]
  • Serão dadas dicas sobre os próximos passos para o aplicativo, incluindo como usar o Gemini para melhorá-lo e protegê-lo. [18]

2. Criando e Preparando seu Aplicativo no Google AI Studio [22]

thumbnail

Este tópico detalha as atualizações na interface do Google AI Studio, as considerações ao adicionar recursos de IA e a importância de preparar o aplicativo para implantação, incluindo a conexão com o GitHub.

2.1. Novidades e Recursos do Google AI Studio [22]

  • A interface do Google AI Studio foi atualizada, oferecendo opções para vibe code (codificar de forma intuitiva) aplicativos na seção "Build", conversar com o modelo e monitorar o uso no painel. [26]
  • Novos recursos permitem selecionar funcionalidades específicas de IA generativa, como aplicativos de voz conversacionais, integração com a Pesquisa Google, chatbots, transcrição de áudio e recursos de mapa. [33]
  • É possível escolher o modelo de IA a ser usado, com recomendação de manter o Gemini 2.5 Pro por ser um codificador melhor. [36]
  • Ao clicar em "Build", o usuário entra na área de codificação do aplicativo. [38]

2.2. Considerações sobre Recursos de IA Generativa [39]

  • A adição de mais recursos de IA generativa torna o aplicativo mais probabilístico e menos determinístico, introduzindo imprevisibilidade. [39]
  • Isso significa que o aplicativo tenta alcançar um resultado com base na probabilidade estatística, em vez de seguir um caminho "se isto, então aquilo". [42]
  • É recomendado construir o núcleo do aplicativo primeiro e depois adicionar cada recurso de IA individualmente. [43]
  • Mais recursos de IA também significam custos adicionais a longo prazo, pois exigem modelos de IA para serem executados. [44]

2.3. Preparando o Aplicativo para Implantação [47]

  • O foco do vídeo é a implantação de aplicativos criados no Google AI Studio. [48]
  • O aplicativo de exemplo é uma "caixa de entrada de ideias" (idea inbox), um Progressive Web App (PWA) que permite anotar ideias, aplicar templates e baixar arquivos. [50]
  • O objetivo é que este PWA possa ser adicionado à tela inicial do celular e enviar ideias para um aplicativo de anotações como o Obsidian. [54]
  • O vídeo contrasta o aplicativo "sandbox" no Google AI Studio com sites públicos como wandludes.com (implantado em uma plataforma de hospedagem) e wandludes.xyz (arquivos do Obsidian implantados via Netlify a partir do GitHub). [67]
  • O aplicativo "caixa de entrada de ideias" atualmente está em um sandbox e não pode ser visto ou usado por outros, nem no celular. [74]

2.4. Conexão e Versionamento com GitHub [75]

  • Para tornar o aplicativo público, é necessário implantá-lo ou salvá-lo no GitHub e conectá-lo a um sistema de implantação. [75]
  • O GitHub permite controle de versão, rastreando alterações e possibilitando reverter para versões anteriores. [78]
  • É uma boa prática duplicar o aplicativo antes de fazer grandes alterações, criando uma cópia de backup. [79]
  • O GitHub elimina a necessidade de duplicar manualmente, pois salva todos os arquivos de código em um local separado. [81]
  • Problemas de autenticação com o GitHub no Chrome foram resolvidos, permitindo a conexão e autenticação. [84]
  • O aplicativo foi salvo no GitHub, gerando um repositório com todos os arquivos. [86]
  • O GitHub pode ser conectado a plataformas como Vercel ou Netlify para construir e hospedar o aplicativo em um domínio personalizado. [99]
  • Salvar no GitHub cria um histórico completo de versões, com snapshots de cada alteração, permitindo reverter para versões anteriores se necessário. [107]
  • Uma limitação é que o Google AI Studio só pode enviar arquivos para o GitHub (push), não puxá-los de volta (pull). [114]
  • É importante salvar e enviar para o GitHub a cada nova funcionalidade ou correção importante para manter o controle de versão. [117]

3. Implantação via Google Cloud Run [120]

thumbnail

Esta seção detalha o processo de implantação de um aplicativo do Google AI Studio usando o Google Cloud Run, incluindo a configuração do projeto, faturamento e os benefícios de segurança.

3.1. Iniciando a Implantação no Cloud Run [121]

  • A implantação no Google Cloud Run é iniciada clicando em "Deploy app". [124]
  • É necessário selecionar ou criar um projeto na nuvem, nomeado aqui como "idea inbox". [125]
  • A implantação torna o aplicativo acessível via URL público. [129]
  • Uma vantagem crucial é que a chave de API conectada ao Google AI Studio não é exposta no aplicativo, mas continua sendo usada por ele, garantindo segurança. [130]
  • Isso evita que a chave de API seja roubada ou usada indevidamente por terceiros, o que poderia acontecer se fosse exposta diretamente no código do aplicativo. [134]
  • Para usar o Google Cloud Run, é necessário habilitar o faturamento para o projeto. [138]
  • O faturamento não é automático; cobranças só ocorrem se uma conta "pay-as-you-go" for ativada manualmente. [141]

3.2. Configuração e Verificação do Projeto [139]

  • Após habilitar o faturamento, o usuário concorda com os termos e continua. [139]
  • O projeto "idea inbox" é conectado e o Google AI Studio verifica o projeto após a conexão do faturamento. [148]
  • É recomendado revisar os termos de serviço da plataforma para garantir que não haja taxas ocultas ou cessão de propriedade intelectual. [151]

3.3. Implantação e Acesso ao Aplicativo [154]

  • Ao clicar em "Deploy app", o aplicativo é implantado no Cloud Run. [155]
  • O aplicativo implantado recebe um URL público, como idea-inbox-deploy-[long-string]. [159]
  • Este URL permite que o aplicativo seja compartilhado e acessado de qualquer dispositivo, incluindo celulares. [161]
  • O Google Cloud Run oferece uma página de detalhes do aplicativo com informações sobre o URL, a capacidade de testar o aplicativo, editar e implantar novas versões. [164]
  • É possível conectar um repositório do GitHub ao Cloud Run, permitindo continuar o desenvolvimento do aplicativo em produção sem depender apenas do Google AI Studio. [172]
  • Um botão "Redeploy app" permite atualizar o aplicativo com novas funcionalidades. [177]

3.4. Iteração e Atualização do Aplicativo [184]

  • Novas funcionalidades, como um alternador de modo escuro/claro, podem ser adicionadas com a ajuda do Gemini. [185]
  • Após implementar e salvar a nova funcionalidade, o aplicativo pode ser reimplantado para torná-la pública. [187]
  • O processo de implantação leva cerca de 2 minutos para enviar os arquivos, configurar o ambiente e executar o aplicativo. [207]
  • Se uma funcionalidade implementada não funcionar como esperado (como o modo escuro parcial), o aplicativo não deve ser salvo ou enviado para o GitHub para evitar a implantação de uma versão defeituosa. [200]
  • O desenvolvimento continua no modo de desenvolvimento do Google AI Studio até que uma nova versão esteja pronta para ser enviada para produção. [204]

3.5. Dicas de Desenvolvimento e Modularização [210]

  • O aplicativo pode ser executado através de um único arquivo index.tsx, onde o Google reescreve o arquivo inteiro a cada alteração. [211]
  • Para facilitar o desenvolvimento, é recomendado criar uma pasta de componentes com arquivos separados para cada funcionalidade. [214]
  • Essa abordagem, chamada modular app building, permite que o Google corrija apenas funcionalidades específicas em vez de reescrever centenas de linhas de código, reduzindo o risco de erros. [214]

3.6. Salvando e Reimplantando Mudanças [219]

  • Após fazer alterações, o aplicativo é salvo e enviado para o GitHub, que cria automaticamente uma descrição das mudanças. [219]
  • As alterações são "staged" e "committed" no GitHub, criando um snapshot da versão. [223]
  • Em seguida, o aplicativo é reimplantado no Google Cloud Run, selecionando o projeto existente. [225]
  • A nova versão do aplicativo, incluindo a funcionalidade de modo escuro, é disponibilizada após a implantação. [227]

4. Implantação via GitHub com Vercel/Netlify [258]

thumbnail

Esta seção explora a implantação de aplicativos diretamente do GitHub usando plataformas como Vercel e Netlify, destacando a flexibilidade e o fluxo de trabalho automatizado.

4.1. Vantagens da Implantação via GitHub [258]

  • A implantação via GitHub oferece mais flexibilidade em relação ao provedor de hospedagem e ao sistema de implantação. [258]
  • Ao atualizar o aplicativo e enviá-lo para o GitHub, a implantação em plataformas como Vercel é automática. [322]
  • Isso permite que as alterações sejam construídas e apareçam automaticamente no site com um domínio personalizado. [327]

4.2. Configurando o Vercel [261]

  • Plataformas como Vercel ou Netlify podem ser usadas para implantação. [261]
  • O processo envolve criar uma conta no Vercel, preferencialmente usando o GitHub para facilitar a conexão. [263]
  • É necessário instalar o aplicativo do GitHub no Vercel, permitindo acesso a repositórios. [267]
  • Ao importar o repositório "idea inbox" para o Vercel, é possível configurar o projeto. [272]
  • Opções incluem variáveis de ambiente (para chaves de API) e configurações de build. [275]
  • A escolha do framework preset é importante; o Vercel sugere Vite para este aplicativo, com base na análise do arquivo vite.config.js que lida com a chave de API e a execução do aplicativo React. [278]
  • O Google AI Studio pode ser consultado para obter recomendações sobre configurações de implantação. [287]
  • Clicar em "Deploy" inicia o processo de implantação, que leva cerca de 20 segundos. [288]

4.3. Fluxo de Trabalho Automatizado e Domínio Personalizado [293]

  • O Vercel oferece pré-visualizações instantâneas e constrói automaticamente o aplicativo a cada alteração salva no GitHub. [295]
  • É possível adicionar um domínio personalizado. [298]
  • O Vercel fornece um domínio padrão, como idea-inbox.vercel.app, que aponta para a implantação. [304]
  • O aplicativo implantado no Vercel parece funcionar corretamente com o modo escuro/claro. [305]
  • Este fluxo de trabalho automatizado facilita a adição de novas funcionalidades e a atualização do site. [321]

4.4. Implantação com Netlify [328]

  • O mesmo processo pode ser realizado com o Netlify, que é outra opção de provedor de hospedagem e sistema de implantação. [328]

5. Considerações Adicionais para Aplicativos em Produção [331]

thumbnail

Esta seção aborda aspectos importantes a serem considerados ao mover um aplicativo do ambiente de desenvolvimento para produção, como armazenamento persistente, autenticação, segurança e a importância de começar com um MVP (Produto Mínimo Viável).

5.1. Armazenamento Persistente [337]

  • Armazenamento persistente é necessário para salvar dados que não devem ser perdidos ao atualizar a página ou reiniciar o aplicativo. [337]
  • Existem três tipos:
    • Local Storage: Armazena dados no navegador, mas pode ser perdido ao reiniciar o computador. [344]
    • Session Storage: Armazena dados apenas para a sessão atual; são perdidos ao sair da página. [343]
    • Banco de Dados: Opção de backend para salvar dados de forma mais robusta. [344]
  • O Google Cloud Run oferece serviços como Cloud SQL e Cloud Storage. [348]
  • O Vercel também possui suas próprias soluções de banco de dados. [351]
  • É possível usar o Google AI Studio para pesquisar as melhores práticas de armazenamento para recursos específicos do aplicativo. [354]

5.2. Autenticação e Segurança [359]

  • Autenticação envolve controlar quem pode acessar o aplicativo, como "Login com Google" ou e-mail. [359]
  • O Google Cloud Run permite controlar o acesso. [361]
  • É recomendado perguntar ao Google AI Studio sobre a melhor forma de configurar a autenticação, considerando a plataforma de implantação utilizada. [363]
  • A segurança abrange chaves de API, dados do usuário e autenticação, exigindo a configuração de rotas de API seguras. [365]
  • Apenas usuários autenticados devem poder chamar as APIs. [367]

5.3. Boas Práticas de Desenvolvimento [368]

  • Utilizar ferramentas como Google AI Studio, Perplexity ou ChatGPT para obter feedback sobre como melhorar o aplicativo, quais recursos adicionar e quais são as melhores práticas de segurança. [369]
  • Começar com um Produto Mínimo Viável (MVP), a versão mais simples do aplicativo, e adicionar funcionalidades gradualmente. [372]
  • Adicionar um recurso de cada vez, testá-lo e garantir que funcione antes de adicionar o próximo, para evitar quebrar o aplicativo. [375]
  • Introduzir uma seção de componentes para tornar o aplicativo modular, com cada nova funcionalidade em um arquivo separado, facilitando testes e iterações. [377]

5.4. Ferramentas Alternativas e Próximos Passos [384]

  • O processo de fazer alterações no Google AI Studio e enviá-las para implantação pode ser complexo, especialmente ao construir um backend. [384]
  • O Firebase Studio é uma alternativa que oferece um espaço de trabalho de IA full-stack, incluindo bancos de dados e rotas de API. [386]
  • O autor planeja explorar o Firebase Studio e convida os espectadores a compartilhar suas experiências ou solicitar um vídeo sobre o assunto. [390]
  • O vídeo demonstra que qualquer pessoa pode tornar um aplicativo público, usar IA para codificar e implantá-lo para que outros o utilizem. [393]