O teu setor: anteprojeto e personalização

A partir de hoje o Mini-CRM é teu: planeias o projeto num anteprojeto e adaptas o CRM à tua empresa — nome, cores, estados dos clientes e campos novos.

🎯 No fim desta aula vais conseguir

Escrever o anteprojeto da tua aplicação de gestão: o problema, os objetivos, as funcionalidades e o calendário.
Adaptar o nome, as cores e os estados dos clientes ao setor da tua empresa.
Acrescentar um campo novo «de ponta a ponta» (formulário → registo → tabela → edição), seguindo uma receita.
Testar cada alteração antes de passares à seguinte.

🧰 Antes de começar

Abre a pasta meu-crm no VS Code e o index.html com o Live Server.
Confirma que o teu CRM da aula 16 funciona: cria um cliente, abre a ficha e exporta para Excel.
Faz uma cópia de segurança do projeto antes de mexeres: no Explorador de Ficheiros, clica com o botão direito na pasta meu-crm → Comprimir para → Ficheiro ZIP (ou Enviar para → Pasta comprimida (zipada), conforme a versão do Windows). Muda o nome do zip para meu-crm-antes-aula17.zip. Se estragares alguma coisa hoje, tens para onde voltar.
Lembra-te do setor que escolheste na aula 1 (ginásio, oficina, imobiliária…). É com ele que vais trabalhar até ao fim do módulo.

😕 Faltaste à aula 16 ou o teu projeto não funciona? Descarrega o ponto de controlo da aula 16, descompacta-o e trabalha a partir dele.

💡 Os números de linha indicados nesta página são os do ponto de controlo da aula 16. Se fizeste exercícios extra, no teu ficheiro podem ser outros: usa Ctrl+F no VS Code para procurar o texto indicado.

⚠️ RGPD — só dados inventados. O teu CRM vai ser mostrado à turma e publicado na Internet (aula 19). Nunca escrevas nomes, telefones, emails ou NIF de pessoas reais — nem os teus, nem os da família, nem os dos colegas. Inventa tudo.

Parte A — O plano: o anteprojeto (≈ 25 min)

1 O que é um anteprojeto

Antes de construir uma casa, o arquiteto desenha a planta e combina com o dono o que vai ser feito e quando fica pronto. Em informática é igual: antes de programar, escreve-se um anteprojeto — um documento curto que diz para quem é a aplicação, que problema resolve, o que vai fazer e quando.

O anteprojeto serve para três coisas: pensares antes de mexer no código; o professor aprovar o plano (e avisar-te se é demasiado ou pouco); e, no fim, comparares o que planeaste com o que fizeste.

Para te inspirares, vê o que cada setor costuma guardar sobre os clientes:

Setor	Campos novos (ideias)	Estados dos clientes	As «oportunidades» são…
Ginásio	Plano (Mensal / Trimestral / Anual), Data de inscrição, Objetivo	Experimental / Sócio / Suspenso	Planos anuais, treinos personalizados
Oficina	Matrícula, Marca e modelo, Ano do carro, Próxima revisão	Orçamento / Cliente / Inativo	Orçamentos de reparação
Imobiliária	Tipo de imóvel (T1, T2, moradia), Orçamento máximo (€), Zona pretendida, Compra ou arrendamento	Interessado / Comprador / Arquivado	Vendas e arrendamentos
Cabeleireiro / estética	Serviço preferido, Aniversário, Profissional preferido	Novo / Habitual / Ausente	Pacotes (noivas, tratamentos)
Loja (roupa, informática…)	Produto de interesse, Nº do cartão de cliente, Tamanho	Visitante / Cliente / Inativo	Encomendas grandes, clientes empresariais
Restaurante / pastelaria	Prato preferido, Nº de pessoas habitual, Dia preferido	Novo / Habitual / Ausente	Eventos, jantares de grupo, catering
Clínica (dentária, veterinária…)	Data da última consulta, Especialidade, (veterinária) Nome e espécie do animal	Novo / Paciente / Alta	Planos de tratamento, orçamentos
Escola de condução	Categoria da carta (A, B…), Nº de aulas feitas, Data do exame	Inscrito / Aluno / Encartado	Pacotes de aulas

💡 Repara que os estados são sempre uma só palavra, sem espaços. Vais perceber porquê no passo 4.

🔒 Dados sensíveis: informações de saúde (alergias, tratamentos, consultas) são dados sensíveis no RGPD. Numa empresa a sério exigem proteção extra. No projeto podes ter estes campos, mas com dados 100% inventados.

2 Preencher o anteprojeto

Abre a ficha de anteprojeto (abre num separador novo).
Preenche todos os pontos. Escreve frases completas, como se explicasses o projeto ao dono da empresa.
Nas personalizações, indica pelo menos 3 (por exemplo: 2 campos novos + estados do setor). Sê realista: tens 3 aulas.
Nos campos novos, indica para cada um o nome que aparece no ecrã, o tipo (texto, número, data, lista) e o id que vais usar no código: sem espaços nem acentos e, se tiver duas palavras, junta-as com a segunda começada por maiúscula (plano, matricula, dataInscricao).
No fim, carrega em Imprimir / guardar PDF e guarda o PDF na tua pasta (ou imprime). Mostra-o ao professor.

✅ Deves ver: por baixo dos botões da ficha, a indicação «✓ Guardado neste browser às …» sempre que escreves alguma coisa.

😕 Perdi o que tinha escrito / não aparece «Guardado»

O texto fica guardado só neste browser, neste computador. Se mudares de computador, de browser ou usares uma janela anónima, a ficha aparece vazia.
Nos computadores da escola, os dados do browser podem ser apagados quando terminas a sessão. Por isso, guarda em PDF no fim de cada aula (Imprimir → Destino: Guardar como PDF).
Se aparecer «Este browser não deixa guardar», continua a preencher e guarda em PDF antes de fechares a página.

Parte B — A cara da tua empresa: nome, cores e estados (≈ 30 min)

3 Nome, slogan e cores

Já fizeste isto nas aulas 1 e 3. Agora confirma que bate certo com o teu anteprojeto. No index.html, troca o nome da empresa e o slogan no topo:

Muda também, no mesmo ficheiro:

o título do separador do browser, na linha 6: <title>Mini-CRM · FitPorto Ginásio</title>;
o rodapé (perto do fim): troca O Teu Nome pelo teu nome.

Depois, no style.css, muda as cores da tua empresa dentro de :root:

💡 No VS Code, ao lado de cada cor aparece um quadradinho colorido. Passa o rato por cima dele e abre-se um seletor de cores. A --cor-principal-escura deve ser um pouco mais escura do que a principal.

✅ Deves ver: o topo com o nome da tua empresa e as tuas cores, o nome certo no separador do browser e o teu nome no rodapé.

4 Os estados dos clientes do teu setor

«Lead / Cliente / Inativo» são palavras de vendas. Num ginásio faz mais sentido «Experimental / Sócio / Suspenso». O problema: o estado está escrito em vários sítios do código e tem de estar escrito exatamente igual em todos — mesmas letras, mesmos acentos, mesmas maiúsculas. É como um carimbo: se num sítio está «Sócio» e noutro «socio», para o computador são duas coisas diferentes.

🤔 Prevê: se mudares os estados no formulário mas te esqueceres do style.css, o que achas que acontece à etiqueta colorida do estado na tabela?

Vamos usar como exemplo os estados de um ginásio. Troca-os pelos do teu anteprojeto. São 4 sítios:

4.1 · O formulário

4.2 · O filtro por cima da tabela

4.3 · As cores das etiquetas

A etiqueta de cada cliente recebe a classe estado- seguida do estado (por exemplo estado-Sócio). Por isso, o nome da classe no CSS tem de ser igual ao estado. É também por isso que um estado não pode ter espaços: «Em espera» daria a classe partida estado-Em espera.

4.4 · O painel

O painel conta os clientes que estão no primeiro estado (os «Leads»). Em desenharPainel(), no app.js, troca o estado na comparação e o título do cartão:

💡 Não precisas de mudar o nome da variável leads: o utilizador nunca a vê. Muda só o que aparece no ecrã.

⚠️ Procura outros sítios. Se fizeste exercícios ou desafios de outras aulas (clientes de exemplo da aula 8, botão ⭐ da aula 9, contagem por estado da aula 10, KPI «Clientes inativos» da aula 15), eles também usam os estados antigos. No VS Code carrega em Ctrl+Shift+F (pesquisar em todos os ficheiros) e procura 'Lead', 'Cliente' e 'Inativo' (com as plicas). Troca cada um pelo estado equivalente do teu setor.

4.5 · E os clientes que já tinhas?

Os clientes já guardados no browser continuam com o estado antigo: mudar o código não muda os dados. Tens duas hipóteses:

editar cada cliente (✏️), escolher o estado novo e guardar; ou
apagar os dados de teste e começar de novo: F12 → separador Aplicação (Application) → Armazenamento local (Local Storage) → clica no endereço do teu CRM (ex.: http://127.0.0.1:5500) → na tabela, clica com o botão direito na linha crm_clientes → Eliminar (Delete) → F5.

✅ Deves ver: os teus estados no formulário e no filtro; cada cliente novo com a etiqueta colorida do seu estado; no painel, o cartão com o título novo a contar os clientes do primeiro estado.

😕 Não funciona?

A etiqueta aparece cinzenta (sem cor) → o nome no CSS não é igual ao do <option>. Compara letra a letra: maiúsculas e acentos contam. Ou o estado tem um espaço.
O filtro não mostra ninguém → a opção do filtro está escrita de forma diferente da do formulário, ou estás a filtrar clientes antigos que ainda têm o estado antigo.
O cartão do painel mostra sempre 0 → em desenharPainel() ainda está 'Lead', ou o estado está escrito de outra forma.
Estraguei tudo → descompacta o meu-crm-antes-aula17.zip e recomeça este passo com calma.

Parte C — Campos novos: a receita (≈ 35 min)

5 A receita do campo novo

Acrescentar um campo é como acrescentar uma coluna a uma folha de Excel, mas no CRM a informação tem de passar por vários «balcões»: o utilizador escreve-a no formulário, o guardarCliente guarda-a no registo, a tabela mostra-a e o editarCliente devolve-a ao formulário. Se faltar um balcão, a informação perde-se pelo caminho.

Já fizeste isto na aula 12 com a Cidade! A receita tem sempre os mesmos sítios:

Sítio	Ficheiro e função	Para quê
1 · O campo no formulário	`index.html`, dentro de `<form id="form-cliente">`	Para o utilizador escrever.
2 · O valor no registo	`app.js`, objeto `cliente` em `guardarCliente()`	Para ficar guardado no browser.
3 · O valor de volta ao formulário	`app.js`, `editarCliente()`	Para se poder alterar.
4 · A coluna na tabela	`index.html` (`<th>`) + `app.js`, `linhaCliente()` (`<td>`)	Para se ver.
5 · A pesquisa (opcional)	`app.js`, `clientesVisiveis()`	Para encontrar clientes por esse campo.
6 · O Excel (opcional)	`app.js`, `exportarClientesCSV()`	Para aparecer no relatório.

O que muda de campo para campo é só o tipo do sítio 1:

Tipo	HTML	Exemplos
Texto curto	`<input type="text" id="matricula">`	Matrícula, Marca e modelo
Número	`<input type="number" id="orcamento" min="0">`	Orçamento máximo (€), Nº de aulas
Data	`<input type="date" id="dataInscricao">`	Data de inscrição, Próxima revisão
Lista de opções	`<select id="plano"><option>Mensal</option>…</select>`	Plano, Tipo de imóvel
Sim / Não	`<select id="newsletter"><option>Não</option><option>Sim</option></select>`	Aceita receber novidades

💡 Para «sim/não» usa uma lista com Sim e Não. Uma caixa de seleção (checkbox) funciona de outra maneira (usa .checked em vez de .value) e complica a receita.

Vamos fazer juntos um campo que serve para qualquer setor: «Como nos conheceu». As empresas usam-no para saber que publicidade resulta (Instagram? Recomendação de um amigo?). O id vai ser origem.

6 Sítio 1 — o campo no formulário

No index.html, procura o <label> do NIF dentro do formulário de clientes. Cola o campo novo por baixo dele (antes do <label> do Estado):

⚠️ O id é a «morada» do campo. Tem de ser único na página (não pode haver outro elemento com id="origem") e vais escrevê-lo igualzinho no app.js.

✅ Deves ver: a lista «Como nos conheceu» no formulário. Ainda não faz nada: se guardares um cliente, a escolha perde-se.

7 Sítios 2 e 3 — guardar e editar

🤔 Prevê: se acrescentares o campo ao formulário mas não ao guardarCliente, o que fica guardado no browser? E o que aparece quando carregas em ✏️?

Sítio 2. No app.js, em guardarCliente(), o objeto cliente junta todos os campos. Acrescenta uma linha logo a seguir à linha do nif (a linha que começa por nif:):

⚠️ Vírgulas! Dentro do objeto, cada linha acaba com uma vírgula, exceto a última (criadoEm). Se te esqueceres de uma vírgula, o app.js inteiro deixa de funcionar. Num campo de texto, acrescenta .trim() antes da vírgula (como no nif), para tirar os espaços a mais.

Sítio 3. Em editarCliente(), acrescenta uma linha a seguir à linha do NIF (document.getElementById('nif').value = cliente.nif;):

O || '' quer dizer «ou, se não houver nada, texto vazio». Os clientes que criaste antes de hoje não têm o campo origem (fica undefined). Sem o || '', aparecia a palavra «undefined» nos campos de texto.

8 Sítio 4 — a coluna na tabela

A tabela tem duas partes: o cabeçalho (<th>), que está no index.html, e as linhas (<td>), que são criadas pelo linhaCliente(). A coluna nova tem de estar na mesma posição nas duas. Vamos pô-la a seguir ao Telefone.

💡 Se na aula 12 acrescentaste a Cidade (ou outras colunas), conta as colunas: a ordem dos <th> tem de ser igual à ordem dos <td>.

9 Testar o campo novo

Grava os dois ficheiros (Ctrl+S) e volta ao CRM.
Cria um cliente novo (inventado!) e escolhe «Recomendação» em «Como nos conheceu».
Carrega em ✏️ nesse cliente: a lista deve mostrar «Recomendação». Muda para «Google» e guarda.
Carrega em F5: o valor continua lá?
Abre o DevTools → Aplicação → Armazenamento local → crm_clientes e procura "origem" no cliente novo.

✅ Deves ver: a coluna «Como nos conheceu» na tabela, preenchida no cliente novo e vazia nos antigos; ao editar, a lista mostra o valor guardado; depois de F5, continua tudo lá.

😕 Não funciona?

Cannot read properties of null (reading 'value') → o id no HTML não é igual ao do getElementById (ex.: id="Origem" e 'origem'), ou não gravaste o index.html.
A tabela ficou vazia e nenhum botão funciona → erro de sintaxe no app.js. Abre a Consola (F12): Unexpected identifier quase sempre é uma vírgula em falta no objeto cliente.
Aparece undefined na coluna → falta o || '', ou o nome no linhaCliente é diferente do nome no objeto (ex.: cliente.Origem).
As colunas estão desalinhadas (os valores aparecem debaixo do título errado) → o <th> e o <td> não estão na mesma posição, ou esqueceste-te do <th>.
Ao editar, o campo aparece vazio → falta o sítio 3 (editarCliente).
Depois de F5 o valor desaparece → falta o sítio 2 (guardarCliente).

10 Sítios 5 e 6 (opcionais) — pesquisa e Excel

Sítio 5 — pesquisar também pelo campo novo. Em clientesVisiveis(), a linha const nomePassa = … decide se um cliente passa na pesquisa. Acrescenta-lhe um «ou» (||) com o campo novo. Deve ficar assim:

💡 Se na aula 12 já tinhas uma versão com várias linhas || (empresa, email, cidade), não apagues nada: acrescenta só a linha do origem antes do ; final (e tira o ; da linha de cima).

Sítio 6 — o campo no ficheiro Excel. Em exportarClientesCSV(), acrescenta o título da coluna à primeira lista e o valor à segunda, na mesma posição:

✅ Deves ver: ao escrever «insta» na pesquisa, aparecem os clientes que vieram do Instagram; no Excel exportado, uma coluna «Como nos conheceu».

🔎 Investiga

No DevTools (Aplicação → Armazenamento local → crm_clientes), compara um cliente antigo com o cliente novo. Que campo tem um e o outro não? Porquê?
Em linhaCliente(), tira o || '' do campo novo e recarrega. O que aparece nos clientes antigos? Volta a pôr.
No style.css, escreve um dos teus estados com uma letra minúscula diferente (ex.: .estado-sócio). A etiqueta continua colorida? Porquê? Volta a pôr como estava.
Muda a ordem das opções do <select id="estado">. Qual passa a aparecer escolhida quando o formulário é limpo? Qual faz mais sentido ser a primeira no teu setor?

✍️ Tarefas do projeto (contam para a avaliação)

A partir de hoje, em vez de exercícios, tens tarefas do teu projeto. Não há código pronto: usa a receita, o teu anteprojeto e o que aprendeste.

T1 · Anteprojeto entregue

Preenche a ficha de anteprojeto por completo, guarda-a em PDF (ou imprime-a) e mostra-a ao professor para aprovação.

💡 O professor pode pedir-te para mudares alguma coisa (por exemplo, se o teu setor for igual ao de um colega, ou se as personalizações forem demasiado difíceis para 3 aulas). Corrige e volta a mostrar.

T2 · Nome, cores e estados do teu setor

O CRM tem o nome, o slogan e as cores da tua empresa, o teu nome no rodapé e os estados do teu setor nos 4 sítios (formulário, filtro, CSS e painel), sem restos dos estados antigos.

💡 Usa Ctrl+Shift+F para procurar 'Lead' em todos os ficheiros. Não deve sobrar nenhum (a não ser em comentários).

T3 · Dois campos novos de ponta a ponta

Acrescenta pelo menos 2 campos do teu anteprojeto, cada um nos 4 sítios obrigatórios: formulário, guardarCliente, editarCliente e tabela (<th> + <td>). Experimenta tipos diferentes (por exemplo, uma lista e uma data).

💡 Faz um campo de cada vez e testa-o (passo 9) antes de começares o seguinte. O campo «Como nos conheceu» foi o exemplo da aula: podes mantê-lo, mas não conta para esta tarefa.

⭐ Desafio · O campo novo em todo o lado

Faz com que um dos teus campos novos apareça também na pesquisa, no Excel e na ficha do cliente (o texto por baixo do nome quando carregas em 👁️).

💡 Para a ficha, procura em verCliente() a linha que junta cliente.empresa + ' · ' + cliente.email + …. Como acrescentarias mais um ' · ' e o teu campo?

📦 O que mostrar ao professor

T1: o anteprojeto está completo, guardado em PDF (ou impresso) e foi mostrado ao professor.
O topo, o separador do browser e o rodapé têm o nome da minha empresa e o meu nome.
As cores são as da minha empresa.
T2: os estados novos aparecem no formulário e no filtro, com cor, e o painel conta-os.
T3: o meu 1.º campo novo aparece no formulário, na tabela e volta ao formulário quando edito.
T3: o meu 2.º campo novo também.
Fiz um zip do projeto no fim da aula (cópia de segurança).

⏱️ Se sobrar tempo

Faz o desafio ⭐.
Adapta os tipos de interação ao teu setor (no <select id="int-tipo"> do index.html). Ex.: numa oficina, «Entrega do carro». Se fizeste o E1 da aula 13 (ícones), acrescenta o ícone do tipo novo em iconeTipo().
Muda textos visíveis para a linguagem do teu setor (ex.: «Clientes» → «Sócios» no título da secção e no menu). Muda só o texto: nunca os id nem os nomes das funções.
Queres mudar as fases das oportunidades? Só os nomes de 'Novo', 'Proposta' e 'Negociação', na linha const FASES = [...] do app.js. Não mexas em 'Ganho' nem em 'Perdido' (o painel e o botão ▶ usam-nos). Atenção: as oportunidades que já tinhas com as fases antigas deixam de aparecer no quadro.

🤖 Pedir ajuda à IA (opcional)

Hoje a IA pode ajudar-te a pensar no teu setor — não a escrever o código. Copia este pedido, troca o texto entre [ ] e cola-o numa IA gratuita:

📖 Palavras novas

Anteprojeto: Documento curto, escrito antes de programar, que diz para quem é a aplicação, que problema resolve, o que vai fazer, com que recursos e quando.
Requisito / funcionalidade: Uma coisa que a aplicação tem de fazer, ex.: «registar a matrícula do carro de cada cliente».
Personalização: Alteração que adapta uma aplicação a uma empresa ou setor (campos, estados, textos, cores).
Campo «de ponta a ponta»: Campo que funciona em todo o percurso: escreve-se no formulário, guarda-se, vê-se na tabela e pode ser editado.
Calendarização: Plano do que vais fazer em cada aula, com prazos.
|| '': «Ou texto vazio»: se o valor da esquerda não existir (undefined), usa-se ''.
Dados sensíveis (RGPD): Dados que exigem proteção especial, como os de saúde. Num projeto escolar, usa sempre dados inventados.