Aula 07 · App simples com dados: lista, formulário e salvar · Criar com IA sem ser Programador

Nesta aula

Um site mostra. Uma ferramenta guarda. A diferença é uma linha de JavaScript e uma decisão sobre onde os dados vivem.

A partir daqui o curso muda de assunto: sai do site público e entra na ferramenta interna, aquela coisa que a equipe usa todo dia e que hoje vive numa planilha ou num caderno. O primeiro passo é um cadastro simples: uma lista, um formulário para adicionar, um botão para apagar, e os dados que continuam lá quando você fecha e abre de novo. Parece pouco. É a base de quase toda ferramenta interna que já construí.

Ao final, você vai saber pedir à IA um app de cadastro que funciona sem servidor, só no navegador.
Vai entender onde os dados ficam quando usam o armazenamento do navegador, e o que isso permite e proíbe.
Vai sair com um cadastro funcionando, com dados inventados, testado e com exportação para arquivo.

O que muda quando o app guarda dados

Até a aula 6, o navegador só lia arquivos. Agora ele vai reagir: quando a pessoa digita um nome e clica em "adicionar", algo precisa acontecer. Esse "algo" é o JavaScript, a terceira linguagem da página. HTML diz o que existe, CSS diz como aparece, JavaScript diz o que acontece. Você não vai escrever JavaScript. Vai reconhecer, no arquivo, que a parte entre <script> e </script> é o comportamento, e que é ali que a IA mexe quando você pede "ao clicar, faça tal coisa".

A segunda mudança é a pergunta que todo app com dados precisa responder: onde os dados ficam? Há três respostas possíveis para quem não programa, e a escolha define tudo.

No navegador

O navegador tem um armazenamento próprio por site (localStorage). Os dados ficam naquele computador, naquele navegador. Sem servidor, sem conta, sem custo. Ideal para uso pessoal ou de um posto de trabalho.

Em arquivo

O app exporta um arquivo (CSV ou JSON) que você guarda onde quiser, e importa de volta. Serve como backup do primeiro caso e como ponte para planilhas.

Num servidor

Os dados ficam num banco de dados na nuvem, e várias pessoas acessam de vários lugares. É o que a maioria quer no fim, e é o que sai do escopo deste curso: exige login, permissões e backup. Aula 11 fala de quando chamar alguém.

Vamos usar as duas primeiras juntas: guardar no navegador e exportar para arquivo. É o combo que resolve a ferramenta de uma pessoa ou de um balcão, sem depender de ninguém.

Cuidado

Armazenamento no navegador não é lugar para dado sensível de terceiros. Nome e telefone de cliente já é dado pessoal; queixa de saúde é dado sensível pela LGPD; CPF e dados financeiros, mesmo não entrando na lista legal de "sensíveis", causam prejuízo direto se vazarem. A regra da aula 1 continua: se a ferramenta vai guardar isso, é caso para profissional, com controle de acesso e backup. Use o cadastro desta aula para o que é do negócio, não das pessoas: tarefas, insumos, fornecedores, pedidos internos, fila de produção.

Como os dados ficam no navegador, na prática

O localStorage é uma gaveta que o navegador reserva para cada endereço. O app escreve ali um texto (os dados, num formato chamado JSON, que é uma lista legível de campos e valores) e lê de volta quando a página abre. Três consequências que você precisa saber, porque a IA não vai avisar:

É por computador e por navegador. O que você cadastrou no Chrome do computador do balcão não aparece no Firefox, nem no seu notebook, nem no celular. Cada um tem a própria gaveta.
É por endereço. Se você abre o app pelo arquivo (file://) e depois pelo site publicado, são duas gavetas diferentes. Escolha um jeito de abrir e use sempre o mesmo.
Some quando o navegador é limpo. "Limpar dados de navegação", janela anônima, reinstalação, tudo isso apaga a gaveta. Por isso o botão de exportar não é luxo: é o backup.

E quanto cabe? O suficiente para milhares de registros de texto. Para uma lista de tarefas, um controle de insumos ou uma fila de pedidos, sobra. Para fotos, não serve.

Exemplo real

Uma cozinha de marmitas anota os pedidos do dia num caderno e no fim conta o que sobrou. Com a IA, a dona montou uma página com formulário (cliente, prato, quantidade, hora) e uma lista que soma as quantidades por prato. Abre no tablet da cozinha, sempre pelo mesmo atalho. No fim do dia, clica em "exportar" e o arquivo vai para a pasta do mês. Nada de servidor, nada de mensalidade. O caderno foi aposentado em uma semana.

O pedido para a IA

Crie uma pasta nova para a ferramenta, separada da pasta do site (por exemplo, pedidos-cozinha), e abra a ferramenta de IA nela. O pedido segue o padrão do curso: contexto, o que faz, regras técnicas, o que não faz, explicação no fim.

Contexto: sou dona de uma cozinha de marmitas e quero uma ferramenta interna simples, usada num único tablet, para anotar os pedidos do dia. Tarefa: crie nesta pasta um arquivo index.html com um app de cadastro: um formulário com os campos cliente (texto), prato (lista de opções: frango, carne, vegetariano), quantidade (número) e hora (texto); um botão "adicionar"; uma lista dos pedidos com botão "apagar" em cada linha; um resumo com a soma de quantidades por prato; um botão "exportar" que baixa um arquivo JSON com todos os pedidos; e um botão "limpar tudo" que pede confirmação. Regras técnicas: tudo em um único arquivo (HTML, CSS e JavaScript dentro dele); os dados devem ficar salvos no localStorage do navegador e continuar lá ao fechar e abrir a página; sem bibliotecas externas; sem internet; funciona em tablet e celular; idioma pt-BR e charset utf-8; botões grandes. O que NÃO faz: não envia nada para servidor nenhum, não pede login, não guarda telefone nem endereço. Depois de criar, me explique em uma lista curta: onde no arquivo está a parte que salva no localStorage, onde está a parte que monta a lista, e como eu testaria que os dados sobrevivem a fechar o navegador.

Repare no "O que NÃO faz". Sem isso, a IA às vezes acrescenta campo de telefone "para facilitar" ou sugere mandar os dados para um serviço. Você define o limite. E repare no último item: você está pedindo o roteiro de teste junto com o código. É um hábito que vale para tudo.

Lendo o que ela gerou

Abra o arquivo no editor. Além do HTML e do CSS que você já reconhece, vai encontrar o bloco <script>. Não precisa entender cada linha. Procure por três palavras que aparecem em quase todo app assim:

localStorage.setItem: é o momento em que o app grava os dados na gaveta.
localStorage.getItem: é o momento em que ele lê a gaveta ao abrir a página.
addEventListener('click': é "quando clicar neste botão, faça isto". Cada botão tem um.

Achou os três? Você já sabe ler o app no nível que precisa. Quando um botão não funcionar, você vai dizer "o addEventListener do botão exportar não parece estar fazendo nada", e a IA vai direto ao ponto.

Testar com dado inventado, e o que testar

Cadastre cinco pedidos inventados. Use nomes que não existem ("Cliente Teste 1") e quantidades diferentes. Depois faça a bateria:

Persistência: feche a aba, feche o navegador, abra de novo pelo mesmo caminho. Os cinco continuam lá?
Soma: o resumo por prato bate com o que você cadastrou? Confira na mão.
Apagar: apague um do meio. A lista e a soma se atualizam? Feche e abra: continua apagado?
Exportar: clique em exportar. Um arquivo baixou? Abra no editor: os dados estão lá, legíveis?
Campos vazios: tente adicionar sem preencher nada. O app avisa ou adiciona uma linha em branco? Se adicionar, é um ajuste a pedir.
Celular: abra num celular. Os botões são clicáveis com o dedo? O formulário cabe na tela?

Dica

O item 5 é onde a maioria dos apps gerados falha na primeira versão. A IA constrói o caminho feliz; os casos estranhos (campo vazio, quantidade negativa, nome com 200 letras) você precisa pedir. Uma linha resolve: "não deixe adicionar com cliente vazio nem quantidade menor que 1; mostre um aviso curto".

Prática · 10 min

Monte um cadastro simples que sobrevive a fechar o navegador

Crie uma pasta nova para a ferramenta (nome sem espaço nem acento) e abra a ferramenta de IA dentro dela.
Adapte o pedido desta aula ao seu caso: troque cozinha e pratos pelo seu negócio (tarefas da recepção, insumos da oficina, fila de produção da gráfica, encomendas da padaria). Mantenha as regras técnicas e o "o que NÃO faz".
Aprove a criação, abra o index.html no navegador e cadastre cinco registros inventados.
Rode a bateria de seis testes da seção anterior. Anote o que falhou.
Peça as correções, uma por vez, no formato da aula 5. Repita os testes que falharam.
Abra o arquivo no editor e localize localStorage.setItem, localStorage.getItem e um addEventListener. Salve uma cópia como index-v1.html.

Entregável: a ferramenta de cadastro funcionando no navegador, com cinco registros inventados que sobrevivem a fechar e abrir, o arquivo exportado aberto no editor, e a cópia index-v1.html.

Resumo da aula

JavaScript é o que acontece quando a pessoa interage. Fica no bloco script; você reconhece, não escreve.
Três lugares para dados: navegador (localStorage), arquivo exportado, servidor. O curso usa os dois primeiros juntos.
localStorage é por computador, por navegador e por endereço; some com limpeza. Exportar é o backup.
Não guarde dado sensível de terceiros aí. Use para tarefas, insumos, fornecedores, pedidos internos.
O pedido tem "o que NÃO faz" e pede o roteiro de teste junto com o código.
Teste persistência, soma, apagar, exportar, campos vazios e celular, sempre com dado inventado.

Quiz da aula

Quatro perguntas para fixar. A melhor nota fica guardada para o certificado.

App simples com dados: lista, formulário e salvar