Como eu construí o Orçamento no Zap

Construí o Orçamento no Zap com IA em 9 fases pequenas, num só dia: primeiro a conta do total com testes automáticos, depois o formulário, o PDF gerado no próprio celular, o envio pelo WhatsApp e, por último, o login. Cada fase só começou depois que a anterior foi testada.

O problema: preço mandado por áudio

O pintor visita a casa, mede a parede, combina o serviço e depois manda o preço. Quase sempre por áudio, ou numa mensagem solta no meio da conversa. O cliente ouve uma vez, esquece o valor, pede de novo e fica com a impressão de que aquilo saiu no improviso. Com o eletricista e a diarista acontece a mesma coisa.

Foi para essa pessoa que fiz o Orçamento no Zap, o segundo app que construí com o Método Micro App, depois do Cardápio no Zap. A frase do problema ficou assim: "Para pintores, eletricistas, diaristas e outros profissionais autônomos, que perdem tempo e passam pouca confiança quando mandam preço por áudio ou em mensagem solta, o meu app monta um orçamento bonito em cerca de 1 minuto e ajuda a mandar o PDF no WhatsApp do cliente."

É um app para internet, não um aplicativo de celular: abre por um link, sem baixar nada na loja. Dá para ver funcionando em orcamento-no-zap-app.pages.dev.

Um exemplo de como isso costuma acontecer: o eletricista manda o preço num áudio de dois minutos, misturando mão de obra, material e a visita. O cliente ouve no meio do trabalho, pela metade, e na hora de decidir não lembra se os R$ 900 eram com ou sem material. Ele pergunta de novo, o profissional responde outro áudio, e a conversa esfria. Um orçamento escrito, com cada item e o total, corta essa volta antes que ela comece.

Como a construção foi feita

Neste app eu fiz uma experiência. Escrevi o briefing e deixei o Claude Code, a IA que uso no curso, fazer os dois papéis: o do aluno, que pede em português, e o da IA, que constrói. Tudo ficou anotado num diário, fase por fase, com hora, erro e conserto. É desse diário que saem os números deste artigo. A construção inteira, da primeira tela à página de venda, aconteceu no dia 11 de novembro de 2026, em 9 fases.

O corte, antes de qualquer código

Ficaram no app: os dados do profissional, o cliente, os itens com quantidade e preço, a validade, as observações, o total calculado, o PDF e o envio pelo WhatsApp. Ficaram de fora sete coisas: pagamento online, nota fiscal, agenda de serviços, estoque de material, desconto e parcelamento calculados, assinatura digital e logotipo do profissional.

Todas são boas ideias, e todas ficaram para depois pelo mesmo motivo: nenhuma delas impede o cliente de receber um orçamento claro, com o total certo, no celular dele. Este precisava resolver uma coisa só, e bem.

O limite que desenhou o app inteiro

Antes de começar, apareceu um limite que muda tudo: o link do WhatsApp (aquele wa.me que abre uma conversa) só leva texto. Ele não anexa arquivo. Nenhum app consegue mandar um PDF por ele.

Se esse limite aparecesse só na fase do envio, eu teria um app quase pronto prometendo uma coisa impossível. Como ele estava escrito na ficha do projeto desde o início, o plano já nasceu com dois caminhos. No celular, o app usa o compartilhamento do próprio aparelho (o botão que abre a lista de aplicativos), que leva o PDF quando o navegador deixa. Quando não deixa, o app baixa o PDF, abre o WhatsApp com a mensagem pronta e explica na tela onde tocar para anexar.

Toda ideia tem uma coisa assim, que parece simples e que a ferramenta não deixa fazer. É muito melhor achar isso no papel do que com o app pronto. Para mim, esse cuidado anda junto com validar a ideia antes de construir.

A conta que não pode errar centavo

A primeira fase não tinha formulário. Era só um orçamento de exemplo na tela, de um pintor inventado, com uma faixa vermelha avisando que nomes, telefone e preços eram inventados. E com testes automáticos para a conta do total.

Teste automático é um pedacinho de código que confere outro código sozinho, toda vez que alguma coisa muda. Ele veio antes de tudo por um motivo concreto: o computador, se ninguém cuidar, soma 0,10 + 0,10 + 0,10 e chega em 0,30000000000000004. Num orçamento, um centavo errado faz o cliente desconfiar do resto. Por isso o app guarda o dinheiro em centavos inteiros, e quem usa nem fica sabendo que esse cuidado existe. Saíram 22 testes na primeira fase; no fim da construção eram 58.

O total do exemplo dá para conferir na calculadora: 38 m² de pintura a R$ 18,00 (R$ 684,00), 12,5 m² de massa corrida a R$ 22,00 (R$ 275,00), 2 latas de tinta a R$ 389,90 (R$ 779,80) e R$ 65,00 de lixa, fita e lona. Soma: R$ 1.803,80, igual à tela.

E testei o erro de propósito. No preço do chuveiro, escrevi "12O", com a letra O no lugar do zero, coisa que acontece quando se digita rápido no celular. O campo ficou vermelho, apareceu "Use só números, como 80,00" e o item saiu da conta. O total caiu de R$ 373,63 para R$ 253,63, sem somar nenhum valor maluco.

Por que o app parece placa de muro

O visual saiu de um sorteio da skill de design Impeccable, entre 7 mundos ligados ao público. Caiu a placa pintada à mão, aquela que se vê em muro de bairro anunciando pintor e eletricista. O app continua sendo um formulário simples. A placa aparece só onde uma placa apareceria: no nome do app, no total e no topo do PDF, com uma letra grossa e uma sombra vermelha pintada, em azul anil, vermelho zarcão e amarelo ocre.

A placa amarela do total fica presa embaixo da tela, sempre à vista, e o número é repintado a cada mudança de preço. Só que ela criou um problema: num dos testes, o robô não conseguiu tocar na opção "30 dias" da validade, porque a placa estava em cima do campo. Ele tropeçou nisso antes de qualquer pessoa, e a página ganhou uma folga no pé para o campo em foco nunca ficar escondido.

Como o PDF foi testado

O PDF é desenhado no próprio celular, por uma ferramenta chamada jsPDF, e nada vai para a internet. Ele tem o topo azul com o nome do profissional na letra pintada, o número e a data, a tabela separada em serviços e materiais com subtotais, o total na placa amarela e as observações. Quando é exemplo, leva a mesma faixa vermelha de aviso.

Olhar o PDF na tela não bastou. O arquivo foi conferido por dentro: o texto lido do PDF trazia o nome do profissional, os 4 itens, o total de R$ 1.803,80, a validade de 26/11/2026 e os acentos certos (o Ç, o ã e o ² do metro quadrado). A lista de fontes do arquivo confirmava que a letra pintada tinha ido mesmo para dentro do PDF.

Depois veio o teste que eu mais gosto de contar: um orçamento com 45 itens. O PDF tinha que continuar na página seguinte, com o cabeçalho da tabela repetido. Continuou, em 3 páginas, com o total de R$ 900,00 (45 × R$ 20,00). Mas a primeira linha da página 2 e da página 3 saía numa letra pequena e em negrito. Era um erro de verdade, que um orçamento curto nunca mostraria. A troca de página mudava a letra, e a correção foi conferida de novo nas 3 páginas.

Teve também um susto. Na primeira vez que o PDF foi gerado, veio o rascunho antigo no lugar do exemplo, como se o app tivesse voltado atrás sozinho. O app estava certo: na primeira vez que a ferramenta do PDF é usada, o servidor de teste prepara a biblioteca e recarrega a página. Isso só acontece no computador de quem está construindo, nunca no app publicado.

Mandar no WhatsApp, do jeito que dá

No celular que aceita compartilhar arquivo, aparece um botão verde, "Mandar o PDF no WhatsApp", que abre a lista de aplicativos do aparelho já com o PDF e a mensagem. No computador, ou no celular que não aceita, a tela diz a verdade: "O link do WhatsApp leva só o texto. Ele não consegue anexar o PDF sozinho." E mostra 3 passos numerados: baixar o PDF, abrir a conversa com a mensagem pronta e anexar o arquivo pelo clipe de papel.

Quando a ferramenta tem um limite, o app não esconde. Explica na tela, em uma frase, e mostra o caminho.

A mensagem vai escrita. Com os nomes do exemplo, ela começa assim: "Olá, Marta! Segue o orçamento nº 0001 de Carlos Souza (Pintor). Total: R$ 1.803,80. Válido até 26/11/2026." No computador, o app mostra os passos mesmo quando o navegador tem o botão de compartilhar, porque o WhatsApp do computador quase nunca aparece nessa lista, e os passos funcionam sempre.

Para testar o caminho do celular, a IA usou um truque que eu acho bonito. Abriu uma janela imitando um Android e trocou o compartilhamento por um gravador, que anota tudo o que o app entrega ao aparelho. O gravador registrou 1 arquivo, do tipo PDF, com 10.187 bytes, e a mensagem completa. Era exatamente o pacote que o celular repassa ao WhatsApp.

Uma dica para quem for construir algo parecido: abra o seu app nos dois tipos de celular que o seu público usa, Android e iPhone. Cada navegador decide do seu jeito o que pode compartilhar, e é por isso que o Orçamento no Zap tem os dois caminhos. Com compartilhamento, vai o arquivo. Sem ele, aparecem os três passos. Nos dois casos, o profissional consegue mandar o orçamento.

O login: pronto, testado e desligado

Aqui está a maior diferença para o Cardápio. Lá existia um dono só. Aqui são muitos profissionais, e um não pode ver o cliente do outro. Por isso a segunda parte da construção trouxe login com e-mail e senha no Supabase (o serviço de banco de dados que o curso usa) e regras de RLS. RLS quer dizer "segurança por linha": uma regra dentro do próprio banco que diz que cada pessoa só lê e muda as linhas que são dela. Mesmo que alguém mexa no app, o banco recusa.

Só que, na construção, não dava para criar conta no Supabase. Então o app ganhou duas formas de funcionar. Sem o banco ligado, ele funciona inteiro em modo local e guarda o rascunho no próprio aparelho. Com o banco ligado, aparecem o botão Entrar e a tela Meus orçamentos. Isso evita um problema clássico de iniciante: o app que não abre porque o banco ainda não está pronto.

As regras foram testadas num banco que roda dentro do próprio computador, imitando o Supabase. Foram 26 testes, e os 26 passaram. Entre eles: a conta B não vê, não muda e não apaga nada da conta A, e visitante sem login não lê tabela nenhuma.

E o teste com duas contas achou o erro mais sério do projeto. Quando a conta A saía e a conta B entrava no mesmo celular, os dados de A subiam para a conta de B. A regra do banco não pegaria isso, porque era o próprio app mandando os dados já com o login de B. Agora, ao sair da conta, o app apaga o rascunho e os dados da pessoa daquele aparelho. Eles continuam guardados na conta.

Esse tipo de erro só aparece quando você testa com duas contas no mesmo aparelho.

Hoje, o Orçamento no Zap funciona sem conta: o orçamento fica guardado no próprio celular. O login já está escrito e testado, pronto para ser ligado quando o banco de dados for criado.

A landing e um segundo olhar

A página de venda pediu uma mudança no próprio app: exemplos por profissão. Agora há um orçamento pronto de pintor (R$ 1.803,80), de eletricista (R$ 937,40) e de diarista (R$ 350,00), todos marcados como exemplo. Na landing, a pessoa troca a profissão e vê o orçamento real daquela profissão. E tem uma seção inteira chamada "O link do WhatsApp não anexa arquivo". Prefiro que a pessoa saiba disso antes de usar a descobrir depois, com o cliente esperando.

No fim, um revisor de design separado, outro agente que não viu a construção, só o resultado, olhou tudo. Na primeira rodada achou 5 problemas, como o topo do app andando para os lados no celular. Depois das correções, 4 estavam resolvidos, 1 ficou pela metade e surgiram 2 novos. Teve uma segunda rodada de correções, e parei aí. Uma delas: num celular estreito, o total da placa saía cortado ("R$ 1.803,8"). No Lighthouse, a nota do Google de 0 a 100, medido no meu computador, a landing tirou 98 em desempenho e 100 em acessibilidade, boas práticas e SEO.

O que este app me ensinou

Olhando para trás, os momentos que mais valeram neste projeto foram os erros que apareceram cedo. A placa cobrindo o campo da validade, a letra trocada na página 2 do PDF, os dados da conta A indo parar na conta B. Todos apareceram porque alguém testou de um jeito meio chato: com 45 itens, com a letra O no lugar do zero, com duas contas no mesmo celular.

A outra coisa que fica é a honestidade com o limite. O WhatsApp não anexa arquivo pelo link, e o app diz isso na tela, na landing e nas perguntas frequentes. Prefiro um app que explica com clareza o que faz a um que promete demais e frustra o primeiro cliente. E foi esse limite, descoberto no papel, que deu ao app os dois caminhos de envio.

Alguns desses tropeços estão na lista dos erros mais comuns de quem cria o primeiro app com IA, e o e-book grátis "O app de uma função só" conta por que um app pequeno é o melhor primeiro projeto. O passo a passo completo, do problema real ao app no ar em 7 dias, pedindo em português, está no Método Micro App.

Perguntas frequentes

O link do WhatsApp consegue mandar o PDF junto?

Não. O link do WhatsApp só leva texto. No celular, o Orçamento no Zap usa o compartilhamento do próprio aparelho, que leva o PDF quando o navegador permite. Quando não dá, o app baixa o PDF, abre a conversa com a mensagem pronta e mostra onde tocar para anexar.

O PDF do orçamento vai para a internet?

Não. O PDF é desenhado no próprio celular, por uma ferramenta chamada jsPDF. Ele só sai do aparelho quando o profissional manda para o cliente.

Preciso criar conta para usar o Orçamento no Zap?

Na versão descrita neste artigo, não. O app funciona sem conta e guarda o rascunho no próprio aparelho. O login com e-mail e senha está pronto no código e só aparece quando o banco de dados for ligado.

Preciso baixar o app na loja?

Não. É um app para internet, não um aplicativo de celular: abre por um link, direto no navegador.