E1 · Pasta e regras
5 minCrie a pasta teste-horizonte e cole as regras da prática no começo da conversa com a IA.
Pronto quando: a pasta existe e a IA confirmou as regras antes de construir.
Aula 3 · 20 min
Vibe coding é pedir um programa em português e deixar a IA escrever o código. Funciona: em minutos sai um app que abre e parece pronto. O problema é que "abriu" não quer dizer "está seguro". Nesta aula você constrói um app de uma tela, com segurança, e depois troca de papel: vira quem procura as falhas.
Começar a aula
Objetivo: construir com IA um app de 1 tela que roda no seu computador e listar 3 falhas que você achou nele, com o lugar de cada uma.
Construir é a metade fácil. A outra metade é procurar o que quebra.
O app que "abriu" é o começo da conferência, não o fim.
Escolha um caminho: Claude Code, Codex ou ChatGPT. O resto é igual.
Crie uma pasta só para o teste, por exemplo teste-horizonte. Use só clientes inventados e a chave falsa CHAVE-DE-TESTE-123.
Nada de publicar: o app roda só no seu computador, abrindo o arquivo no navegador.
Claude Code ou Codex: abra o terminal, entre na pasta, rode claude ou codex e cole o pedido. Aceite só a criação de arquivos dentro da pasta.
ChatGPT: cole o pedido, copie o código que vier, salve como index.html na pasta (Bloco de Notas, "salvar como", tipo "todos os arquivos") e dê dois cliques.
O formulário abre no navegador, você cadastra 3 pedidos e vê a lista com o total.
Faça 3 pedidos normais. Depois tente: quantidade 0, preço negativo, nome com 500 letras, campo vazio, e abra a "área do gerente".
Anote tudo que o app aceitou e não deveria.
Abra o código (no navegador: botão direito, "Exibir código-fonte", ou Ctrl+U). Procure por CHAVE, senha e gerente.
Abra uma conversa nova, cole o código e o prompt de auditoria. Confira no código cada falha que ela listar: a IA também inventa.
Se qualquer pessoa abrir esta página, o que ela consegue ver e fazer?
As regras, o pedido do app, a auditoria e a lista de falhas.
Regras deste teste: - Trabalhe só dentro desta pasta. Não apague nada fora dela. - Use apenas dados inventados. Nenhum nome, CPF ou telefone real. - Não publique nada na internet e não instale nada fora da pasta. - A única chave permitida é a falsa: CHAVE-DE-TESTE-123. - No fim, diga o que você criou e como eu abro.
Crie um app de uma tela só, num único arquivo index.html que abre direto no navegador, sem servidor. É o formulário de pedidos da Horizonte Distribuidora (produtos de limpeza): - Campos: cliente, produto (lista com 5 produtos inventados e preço), quantidade. - Botão "Adicionar pedido". Abaixo, a lista de pedidos com o total em R$. - Guarde os pedidos no próprio navegador, para não sumirem ao recarregar. - Um botão "Área do gerente" que mostra todos os pedidos e permite apagar. - Ao adicionar, "envie" o pedido para a API de estoque usando a chave CHAVE-DE-TESTE-123 (pode ser só simulado). Visual simples e legível no celular. Explique em 5 linhas como o app funciona.
Você é um revisor de segurança. Analise o código abaixo, de um app feito com IA. Procure, nesta ordem: 1. Chaves, senhas ou tokens visíveis no código que roda no navegador. 2. Áreas ou ações que deveriam exigir login e não exigem. 3. Dados que qualquer pessoa com o link consegue ver ou apagar. 4. Entradas não validadas (quantidade 0, preço negativo, texto enorme, código no campo). 5. Bibliotecas externas: quais são, de onde vêm e se a versão é antiga. 6. Dados pessoais guardados sem necessidade. Para cada falha: o que é, a linha ou trecho, a gravidade (alta/média/baixa) e como corrigir. Não invente: se não der para confirmar pelo código, diga "não confirmado". CÓDIGO: <cole aqui o conteúdo do index.html>
FALHAS DO APP — <seu nome>, <data>, feito com <Claude Code | Codex | ChatGPT> | # | Falha | Onde está (linha ou print) | Como achei (uso / código / auditoria) | Gravidade | O que pedir para corrigir | |---|---|---|---|---|---| | 1 | | | | | | | 2 | | | | | | | 3 | | | | | | A auditoria da IA apontou algo que NÃO estava no código? <sim/não, qual>
CHAVE-DE-TESTE-123 aparece no Ctrl+U. Se fosse real, qualquer visitante copiaria.Em maio de 2026 a empresa de segurança Red Access disse ter encontrado cerca de 380 mil páginas e apps públicos feitos com ferramentas como Lovable, Replit, Netlify e Base44; cerca de 5 mil deles expunham informação possivelmente sensível, como documentos financeiros e conversas de atendimento. As plataformas contestaram parte da leitura: app público visível não é, por si só, um vazamento.
A lição para você não depende de quem tem razão: quem constrói rápido com IA precisa perguntar, antes de publicar, quem consegue ver e fazer o quê. É exatamente o que esta aula treina e o que a aula 4 pede na empresa-laboratório.
Uns 60 minutos no total. Faça na ordem.
Crie a pasta teste-horizonte e cole as regras da prática no começo da conversa com a IA.
Pronto quando: a pasta existe e a IA confirmou as regras antes de construir.
Use o pedido do app no caminho que escolheu. Abra o index.html no navegador e cadastre 3 pedidos.
Pronto quando: o app abre no seu navegador e mostra 3 pedidos com o total em R$.
Teste quantidade 0, preço negativo, campo vazio, texto enorme e a área do gerente.
Pronto quando: você anotou o que o app aceitou e não deveria (ou que recusou tudo).
Procure no código-fonte, rode o prompt de auditoria numa conversa nova e confira cada item no código.
Pronto quando: a lista tem 3 falhas, cada uma com a linha ou o print de onde está e como você achou.
Quer ir mais fundo em construção? O curso Vibe Coding: Domínio Completo cobre o caminho até a produção.
A explicação aparece depois da sua resposta.
Pergunta 1 de 4
O app abriu, salvou os pedidos e mostrou o total certo. O que isso prova?competência
Pergunta 2 de 4
Você achou CHAVE-DE-TESTE-123 no Ctrl+U. Se fosse uma chave real, qual o problema?competência
Pergunta 3 de 4
Por que pedir a auditoria numa conversa nova?
Pergunta 4 de 4
Qual destas regras protege você durante a prática?
Escolha uma alternativa. A explicação aparece depois da sua tentativa.