Crie seu primeiro app útil com IA

Passo 1: Descreva o problema com suas próprias palavras

Fazer compras é algo que quase todo mundo faz, e isso o torna um primeiro projeto perfeito. Você não precisa entender de programação para saber se uma lista de compras funciona: você digita pão, leite e ovos, vê o total e vai marcando os itens conforme compra. O resultado é algo que você pode usar de verdade já nesta semana.

Antes de abrir qualquer ferramenta de IA, complete estas três frases no papel ou em uma nota. Esta é a habilidade de programação mais importante do livro inteiro: transformar um desejo em regras concretas.

1. Preciso anotar… (por exemplo: cada item, quantas unidades preciso e o preço de uma).
2. Quero que o programa calcule… (por exemplo: o preço de cada linha e o total de toda a compra).
3. Vou saber que o programa funciona quando… (por exemplo: dois itens a R$ 25 mostrarem R$ 50, e marcar um item como comprado não alterar o total).

Passo 2: Crie a primeira versão pequena

A primeira versão é um único arquivo que abre no seu navegador. Não há ambiente de programação para instalar, nem servidor, nem login. Copie o prompt abaixo para o seu assistente de IA (Claude, ChatGPT ou similar) exatamente como está.

Me ajude a criar meu primeiro app simples. Sou totalmente iniciante.

Crie uma lista de compras em um único arquivo chamado compra.html que eu possa abrir no meu navegador. Coloque todos os estilos e todo o JavaScript dentro desse mesmo arquivo, sem bibliotecas externas.

Quero digitar o nome do item, a quantidade e o preço de uma unidade. Um botão adiciona o item à lista. Mostre o preço de cada linha e, embaixo, o total de toda a compra. Permita que eu exclua um item e o marque como comprado. Marcar um item como comprado não deve alterar o total.

Recuse nome vazio, números inválidos, preço negativo e quantidade igual a zero ou menor. Aceite no preço tanto a vírgula quanto o ponto decimal.

Primeiro explique o plano brevemente. Depois escreva o código completo e os passos exatos para salvar e abrir o arquivo. Não adicione nenhum outro recurso por enquanto.

1. Copie o código. Use o botão de copiar na resposta da IA para pegar o código inteiro, da primeira à última linha.
2. Salve como compra.html. Abra um editor de texto simples (Notepad no Windows, TextEdit no modo de texto simples no Mac), cole o código e salve como compra.html. Escolha "Todos os arquivos" como tipo de arquivo, e não "Documentos de texto".
3. Abra no navegador. Clique duas vezes no arquivo ou arraste-o para uma janela do navegador. Você deve ver a sua lista de compras, e não uma página cheia de código.

Passo 3: Confira se não é só uma imagem bonita

Um app que parece certo não é o mesmo que um app que funciona. Percorra esta tabela uma linha de cada vez e compare o que você vê com o resultado correto. Este é o seu primeiro teste de verdade.

Se alguma linha falhar, ainda não corrija o código na mão. Diga à IA exatamente qual linha falhou, o que você digitou e o que viu no lugar, e peça que ela corrija só esse problema.

Passo 4: Faça você mesmo uma alteração

Agora faça a sua primeira alteração sem que a IA a escreva por você. Pergunte à IA: "Onde fica o título do app no meu código?" Ela vai apontar uma linha parecida com <h1>Lista de compras</h1>.

1. Encontre o título. Abra compra.html no seu editor de texto e encontre a linha que a IA indicou.
2. Mude o texto. Substitua as palavras entre <h1> e </h1> pelo seu próprio título, por exemplo "Compras de sábado". Não apague os sinais de menor e maior.
3. Salve e atualize. Salve o arquivo, volte ao navegador e atualize a página. O seu novo título deve aparecer.

Depois peça à IA que explique o seu próprio arquivo em três partes, usando o seu código como exemplo. Você vai ver que todo app web é feito das mesmas três camadas:

Passo 5: Ensine uma nova habilidade ao app

Programas de verdade crescem em passos pequenos. Adicione um único recurso novo e teste de novo. Envie à IA esta continuação na mesma conversa:

Adicione um orçamento à minha lista de compras. Deixe-me digitar o valor que quero gastar. Mostre quanto ainda sobra. Se o total passar do orçamento, mostre um aviso claro com o valor que ultrapassei. Todo o resto deve continuar funcionando exatamente como antes, e me mostre o arquivo completo atualizado.

Agora você criou, executou, testou e alterou um app de verdade. Isso não é tudo o que existe em programação, mas é a rotina que você vai repetir em todas as lições seguintes: descrever com clareza, deixar a IA gerar, conferir com os resultados esperados e alterar uma coisa de cada vez.