Guia Prático de Desenvolvimento

Do zero ao aplicativo

Siga este caminho estruturado e profissional para transformar sua ideia em um software funcional usando o poder da Inteligência Artificial.

1

Escolha o Contexto

Defina se o projeto fará parte do ecossistema SAAM CR ou se é um projeto independente.

2

Escolha sua Ferramenta

Selecione o ambiente ideal para gerar seu código. Clique no card para ver as instruções.

Google AI Studio

Plataforma oficial do Google para prototipagem rápida com os modelos Gemini.

Lovable

Ferramenta focada em criar interfaces e componentes React com IA.

Base44

Plataforma no-code/low-code para construção de aplicações empresariais.

3

O Prompt Especializado

Copie esta instrução base (adaptada para a stack escolhida) e cole na ferramenta.

prompt-saam.txt

          
Onde colar?

No Google AI Studio:

  1. Clique em ⚙️ Model: Gemini 3.1 Pro Preview.
  2. Na telinha, clique em System instructions.
  3. Cole o prompt e salve.
Dica de Ouro

No Google AI Studio, você pode anexar imagens (como um rascunho feito à mão ou um print de tela) junto com este prompt. A IA usará a imagem como referência visual para construir a interface exatamente como você imaginou.

4

Exemplo Prático

Veja o que uma pessoa sem experiência em código conseguiu criar usando o prompt do SAAM CR.

O Prompt usado no Gemini
1
Etapa 1 — O Contexto

"Essa tela seria para o departamento de CS. O objetivo é automatizar o processo que hoje é feito em planilhas: registrar contatos com clientes, anotar o retorno de cada contato e saber quando entrar em contato novamente, de acordo com os POPs que a gente segue."

2
Etapa 2 — O Problema

"Hoje a gente trabalha com POPs do fluxo e com o Kanban do Bitrix. A ideia é unificar tudo: ter o cadastro do cliente com informações de contato, registrar cada contato e já saber a próxima data de retorno, sem precisar ir na planilha."

3
Etapa 3 — A Referência

"Kanban, igual ao Bitrix."

Gestão de Monitoramento CS

Saudáveis
2
Neutros
2
Frios
1
Em Risco
2
Contatos Hoje
0
Próximos Contatos
3
Contatos em Atraso
2
Categoria:

Clientes sem observação

2
MOEDA ASSESSORIA (000001)
Assessoria Financeira
Cat. C Saudável
Próximo Contato:30/04/2026
Último Contato:27/01/2026 às 10:30
TENTATIVAS1/3

Clientes Frios

1
FARMÁCIA CENTRAL (000005)
Farmacêutico
Cat. B Neutro
Próximo Contato:03/04/2026
TENTATIVAS1/3

Em Acompanhamento

1
CONTATO VENCIDO
COUTO II (000003)
Varejo
Cat. D Frio
Próximo Contato:11/03/2026
Último Contato:10/01/2026 às 14:15
TENTATIVAS3/3
5

Conectar ao Banco de Dados

Opcional — use o Supabase para salvar dados de verdade na sua aplicação.

Quero conectar com banco de dados
Ative para ver o passo a passo completo de configuração com o Supabase.
Criar conta no Supabase supabase.com
  • Acesse supabase.com e clique em Sign In
  • Clique em "Don't have an account? Sign up"
  • Preencha e-mail e senha para criar sua conta
Criar uma Organização
  • Dê um nome para a organização (ex: saam teste)
  • Tipo: Personal  |  Plano: Free – $0/mês
  • Clique em Create organization
Criar um Projeto
  • Clique em Create new project
  • Escolha a organização criada, dê um nome ao projeto
  • Defina uma senha forte para o banco de dados — guarde ela!
  • Região: Americas  |  Deixe Enable Data API marcado
  • Clique em Create new project e aguarde a criação
4
Copiar as Credenciais da API
  • No menu lateral, vá em Project Settings
  • Clique em Data API e copie a API URL
  • Depois clique em API Keys
  • Copie a chave chamada Publishable key (anon/public)
Project Settings → Data API → API URL Project Settings → API Keys → Publishable key
5
Enviar o Prompt de Integração no Gemini

No chat do Google AI Studio, cole o prompt abaixo com os dados do seu projeto:

prompt-supabase.txt
Quero fazer uma integração com o banco de dados do Supabase. Esses são os dados do projeto para integração: SUPABASE_URL: SUPABASE_ANON_KEY: Crie estas variáveis para eu somente colocar valores via Secrets.
6
Aplicar as Variáveis e Rodar o SQL
  • O Gemini vai criar as variáveis — ele pedirá os valores. Preencha com a API URL e a Publishable key copiadas
  • Clique em Apply para salvar as variáveis
  • O Gemini vai gerar um SQL para criar as tabelas no banco
  • Vá ao Supabase → menu lateral → SQL Editor
  • Cole o SQL gerado e clique em Run

Após rodar o SQL com sucesso, volte ao chat do Gemini e avise: "Rodei o SQL, tudo funcionando!" — ele vai continuar a construção do sistema já integrado ao banco de dados.