Criar um sistema do zero parecia algo restrito a programadores experientes.
Hoje, com ferramentas como o Google AI Studio integrado ao Google Stitch, qualquer pessoa consegue desenvolver aplicações funcionais, com banco de dados real e publicação na nuvem, sem pagar absolutamente nada.
Este artigo mostra exatamente como fazer isso, desde a criação do layout até a publicação do sistema em produção.
O que você vai construir
Ao longo deste tutorial, você vai criar um CRM (Customer Relationship Manager) completo, com as seguintes funcionalidades:
- Tela de login com autenticação real
- Listagem e gerenciamento de contatos
- Operações de CRUD (criar, ler, atualizar e deletar registros)
- Banco de dados conectado via Supabase
- Publicação gratuita no Vercel
- Versionamento de código com GitHub
Tudo isso usando inteligência artificial para gerar o código, sem precisar escrever uma linha manualmente.
Passo 1: Criando o Layout com Google Stitch
O primeiro passo é criar a interface visual da aplicação.
Para isso, acesse o Google Stitch diretamente pelo navegador.
Essa plataforma da Google permite gerar layouts completos para sites e aplicativos apenas descrevendo o que você quer.
No campo de prompt, escreva algo como:
Crie um CRM com dashboard, lista de contatos e pipeline de vendas
Selecione o modo “web” e aguarde a geração.
O Stitch vai criar várias telas automaticamente, incluindo um painel principal, uma tela de contatos e um pipeline.
Se quiser simplificar, delete o pipeline e mantenha apenas o dashboard e os contatos.
Menos funcionalidades no início significa menos chances de erro.
O Stitch também gera o código HTML de cada tela.
Você pode visualizá-lo clicando em “More” e depois em “Show Code”.
Esse código será usado como referência para a próxima etapa.
Passo 2: Gerando a Aplicação no Google AI Studio
Com o layout pronto, selecione as telas no Stitch, clique em “Export” e escolha a opção de exportar para o AI Studio.
Adicione uma descrição como “torne esse CRM real” e confirme a criação.
Dentro do Google AI Studio, você verá as imagens e o código do Stitch sendo usados como referência.
Antes de gerar o projeto, configure o framework que será utilizado.
Clique na opção de framework e selecione:
Next.js
O Next.js é uma das ferramentas mais utilizadas no desenvolvimento web moderno.
Ele oferece uma base sólida para construir aplicações completas, com suporte a front-end e back-end no mesmo projeto.
Clique em “Build” e aguarde.
O AI Studio vai gerar toda a estrutura do projeto automaticamente.
Entendendo Front-end e Back-end
Enquanto o sistema é gerado, vale entender dois conceitos essenciais:
O front-end é tudo que você vê e interage na tela, seja no celular, tablet ou computador.
Já o back-end é o servidor que processa as informações e responde às solicitações do front-end.
Entre os dois, existe a API, que funciona como uma ponte de comunicação.
Um exemplo prático: quando você faz um Pix pelo seu banco, o aplicativo do banco (front-end) se comunica com o Banco Central (back-end) através de uma API.
Essa mesma estrutura é o que você vai construir aqui.
Passo 3: Implementando o CRUD de Contatos
Quando o projeto estiver gerado, teste as funcionalidades disponíveis.
É provável que algumas abas não funcionem ainda, como filtros e buscas.
O próximo passo é pedir ao AI Studio para implementar o CRUD completo de contatos.
No campo de chat do AI Studio, envie o seguinte prompt:
Implemente o CRUD completo do contato: criar, ler, atualizar e deletar
Aguarde a geração.
Depois, teste cada operação:
- Adicione um contato novo
- Edite as informações
- Tente deletar um registro
Se alguma função não funcionar corretamente, basta informar o erro no chat e pedir a correção.
Fonte: Imagem gerada por IA. Modelo: black-forest-labs/flux.2-klein-4b
O AI Studio identifica os problemas e aplica as correções automaticamente.
Passo 4: Criando Login com Autenticação Real via Supabase
Para que o sistema tenha um login funcional de verdade, você precisa de um banco de dados.
O Supabase é a solução ideal para isso: gratuito, completo e fácil de integrar.
Acesse supabase.com, crie uma conta e inicie um novo projeto.
Durante a configuração, escolha a região Brasil (South America, São Paulo) para melhor desempenho.
Guarde a senha gerada automaticamente.
Dentro do Supabase, você terá acesso a:
- Editor de tabelas (Table Editor)
- Editor SQL
- Autenticação de usuários
- Storage para arquivos
Para criar um usuário de teste, vá em “Authentication”, clique em “Add User” e preencha com seu e-mail e uma senha segura.
Conectando o AI Studio ao Supabase
De volta ao Google AI Studio, envie o seguinte prompt:
Faça a integração com o Supabase e gere as migrations necessárias
O sistema vai solicitar duas variáveis de ambiente:
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
Essas informações estão disponíveis no painel do Supabase, em “Settings” > “API”.
Copie e cole cada valor no campo correspondente dentro do AI Studio.
Rodando as Migrations no Supabase
O AI Studio vai gerar um arquivo de migration com a estrutura das tabelas.
Localize esse arquivo na aba de código do projeto, copie todo o conteúdo e acesse o SQL Editor no Supabase.
Cole o código e clique em “Run”.
Se tudo correr bem, você verá as tabelas criadas automaticamente, incluindo a tabela de contatos, atividades e tarefas.
Acesse “Table Editor” para confirmar a estrutura.
Passo 5: Publicando com GitHub e Vercel
Com o sistema funcionando localmente no AI Studio, é hora de publicar em um servidor real.
O processo envolve dois serviços gratuitos: GitHub para versionamento e Vercel para hospedagem.
Criando o Repositório no GitHub
Dentro do AI Studio, clique em “Publish” e selecione a opção de exportar para o GitHub.
Crie uma conta no GitHub caso ainda não tenha, autorize a integração e crie um repositório privado com o nome do seu projeto.
Faça o primeiro commit para enviar todos os arquivos.
Fazendo o Deploy no Vercel
Acesse vercel.com, crie uma conta usando o GitHub e importe o repositório recém-criado.
O Vercel vai identificar automaticamente que o projeto usa Next.js.
Antes de finalizar o deploy, configure as variáveis de ambiente:
NEXT_PUBLIC_SUPABASE_URL=sua_url_aqui
NEXT_PUBLIC_SUPABASE_ANON_KEY=sua_chave_aqui
Esses valores são os mesmos que você usou no AI Studio.
Clique em “Deploy” e aguarde.
Em poucos minutos, sua aplicação estará disponível em um endereço público no formato nomedobprojeto.vercel.app.
Atualizando a Aplicação
Sempre que quiser fazer alterações, basta voltar ao AI Studio, fazer as modificações necessárias e realizar um novo commit para o GitHub.
O Vercel detecta automaticamente as mudanças e atualiza a aplicação em produção.
Você pode usar o recurso “Annotate App” do AI Studio para marcar elementos visuais diretamente na interface e pedir ajustes específicos, como remover textos, alterar cores ou reorganizar componentes.
Resumindo
Criar um sistema completo com autenticação, banco de dados e publicação na nuvem deixou de ser privilégio de quem sabe programar.
Com o Google AI Studio, Google Stitch, Supabase, GitHub e Vercel, você tem uma stack completa e gratuita para desenvolver aplicações reais.
O segredo está em trabalhar de forma incremental: implemente uma funcionalidade por vez, teste, faça o commit e avance.
Assim você mantém controle sobre o que foi feito e pode corrigir erros com facilidade.
O próximo passo é explorar mais telas, adicionar relatórios, notificações e personalizar o sistema de acordo com as suas necessidades.
Fonte do conteúdo: este artigo foi escrito a partir do estudo e análise do vídeo do YouTube https://www.youtube.com/watch?v=JEESRkJ0fXA.
