Ficha prática: ponto de situação

Fim da primeira parte: hoje vês, sozinho, o que já consegues fazer no teu CRM, durante 90 minutos. A ficha não tem nota: serve para tu e o professor saberem o que já dominas antes da segunda parte. O que fizeres fica no teu projeto.

🎯 O que vais mostrar hoje

Parte 1 — acrescentar um campo novo ao CRM de ponta a ponta: formulário, registo guardado, tabela, edição e pesquisa (10 pontos).
Parte 2 — criar uma consulta nova no CRM, com uma caixa de seleção (4 pontos).
Parte 3 — escrever consultas SQL sobre os dados do teu CRM, no laboratório (6 pontos).

🧰 Antes de começar

Regras

A ficha é individual: não podes falar com os colegas nem trocar ficheiros.
Podes consultar o site do curso (todas as aulas) e os teus apontamentos.
Não podes usar IA (ChatGPT, Claude, Gemini, Copilot…) nem outros sites de ajuda. Se usares IA, a ficha deixa de te dizer o que consegues fazer sozinho.
Duração: 90 minutos, incluindo a entrega. O professor avisa quando faltarem 15 minutos.
Podes fazer as partes pela ordem que quiseres. Cada alínea tem pontos próprios: se uma não funcionar, as outras contam na mesma.

Preparação (5 minutos)

Faz uma cópia de segurança: no Explorador de Ficheiros, copia a pasta meu-crm e cola-a com o nome meu-crm-copia. Se estragares alguma coisa, podes voltar atrás. Trabalha sempre na pasta meu-crm.
Abre a pasta meu-crm no VS Code e o index.html com o Live Server.
Abre a Consola (F12) e confirma que não há erros vermelhos e que consegues criar, editar e apagar um cliente.

😕 O teu projeto não funciona? Avisa o professor e descarrega o ponto de controlo da aula 11. Atenção: esse projeto não tem o campo Cidade nem os teus exercícios, e não traz clientes (cria alguns).

📋 Pontuação (para saberes como estás)

Parte	Alínea	Pontos
1 · Campo Cidade de ponta a ponta	a) Campo no formulário	1,5
	b) Guardar a cidade no registo	2
	c) Coluna Cidade na tabela	2,5
	d) Editar a cidade	2
	e) Pesquisar pela cidade	2
2 · Consulta «Só com email»	a) Caixa de seleção na barra de pesquisa	1,5
2 · Consulta «Só com email»	b) Filtro a funcionar	2,5
3 · SQL no laboratório	1) Clientes de uma cidade	1,5
	2) Número de clientes por cidade	2
	3) Leads, do mais recente para o mais antigo	2
	Ficheiro `ficha12.sql`	0,5
Total		20

Parte 1 — O campo Cidade de ponta a ponta (10 pontos · ≈ 40 min)

1 A empresa quer saber de que cidade é cada cliente

Acrescenta ao CRM o campo Cidade. No fim, tem de ser possível escrever a cidade ao criar um cliente, vê-la na tabela, alterá-la ao editar e pesquisar por ela.

a) Campo no formulário (1,5 pontos)

No formulário de clientes, depois do NIF, tem de existir uma caixa de texto com a etiqueta Cidade e com id="cidade". Se fizeste o E1 da aula 2, já a tens: confirma que o id está exatamente assim.

b) Guardar a cidade no registo (2 pontos)

Na função guardarCliente, o objeto do cliente tem de passar a ter a propriedade cidade, com o que foi escrito na caixa (sem espaços a mais).

✔️ Como verificar: cria um cliente com cidade e, no DevTools (Aplicação → Armazenamento local → crm_clientes), confirma que o registo tem "cidade":"…".

c) Coluna Cidade na tabela (2,5 pontos)

Na tabela de clientes, tem de aparecer uma coluna Cidade logo a seguir ao Telefone: o cabeçalho no index.html e a célula de cada cliente na função linhaCliente. As colunas não podem ficar desalinhadas, e os clientes sem cidade mostram a célula vazia (nunca «undefined»).

d) Editar a cidade (2 pontos)

Ao clicar em ✏️, a caixa Cidade tem de ser preenchida com a cidade do cliente (função editarCliente). Se a mudares e gravares, a tabela mostra a cidade nova, no mesmo cliente.

e) Pesquisar pela cidade (2 pontos)

A barra de pesquisa tem de encontrar clientes também pela cidade: escrever porto mostra os clientes do Porto. A pesquisa pelo nome tem de continuar a funcionar, e a pesquisa não pode dar erro por causa dos clientes sem cidade.

ℹ️ Informação útil: os clientes que criaste antes de hoje não têm cidade, por isso cliente.cidade é undefined. A expressão cliente.cidade || '' quer dizer «a cidade do cliente ou, se não tiver, um texto vazio».

📚 Para rever: aula 2 (formulário e tabela), aula 7 (linhaCliente), aula 8 (guardarCliente), aula 9 (editarCliente) e aula 10 (clientesVisiveis e o desafio da pesquisa).

Parte 2 — Uma consulta nova no CRM (4 pontos · ≈ 20 min)

2 Só os clientes com email

A equipa comercial vai enviar uma campanha por email e quer ver só os clientes que têm email.

a) Caixa de seleção na barra de pesquisa (1,5 pontos)

Na barra de pesquisa (a <div class="filtros">), acrescenta uma caixa de seleção (checkbox) com o texto «Só com email». Sempre que a marcas ou desmarcas, a tabela tem de ser desenhada outra vez.

b) O filtro a funcionar (2,5 pontos)

Quando a caixa está marcada, a tabela mostra só os clientes com o email preenchido. Quando está desmarcada, mostra todos. O filtro tem de funcionar em conjunto com a pesquisa e com o filtro de estado (por exemplo: Leads + só com email).

ℹ️ Informação útil:

Uma caixa de seleção escreve-se <input type="checkbox" id="…">. Para o texto aparecer ao lado, põe a caixa e o texto dentro de um <label> … </label>.
O aviso onchange corre quando a caixa é marcada ou desmarcada.
Em JavaScript, document.getElementById('…').checked vale true se a caixa estiver marcada e false se não estiver.
Se a caixa aparecer por cima do texto (o style.css põe todos os input com largura 100%), acrescenta style="width:auto" ao <input>.

📚 Para rever: aula 10 — repara como funciona a variável estadoPassa dentro de clientesVisiveis.

Parte 3 — SQL no laboratório (6 pontos · ≈ 25 min)

3 Consultas SQL sobre os teus clientes

Prepara os dados: no teu CRM (já com a Parte 1 feita), garante que tens pelo menos 6 clientes com cidade, com pelo menos duas cidades repetidas e pelo menos 2 Leads. (Para dar cidade a um cliente antigo, basta editá-lo e gravar.) Depois abre o sql-lab.html com o Live Server e clica em 📥 Usar os meus dados do CRM. À esquerda, a tabela clientes tem de mostrar a coluna cidade.

Escreve e testa estas consultas:

(1,5 pontos) O nome, o telefone e a cidade dos clientes de uma cidade à tua escolha.
(2 pontos) O número de clientes por cidade.
(2 pontos) O nome e a data de criação (criadoEm) dos Leads, do mais recente para o mais antigo.

Ficheiro ficha12.sql (0,5 pontos): na pasta meu-crm, cria o ficheiro ficha12.sql e copia para lá as 3 consultas, cada uma por baixo do seu comentário:

ℹ️ Informação útil:

Se a coluna cidade não aparecer no laboratório, ainda não gravaste nenhum cliente com a Parte 1 feita, ou abriste o laboratório antes de gravar: clica outra vez em 📥 Usar os meus dados do CRM.
Na consulta 2 pode aparecer uma linha com a cidade vazia ou NULL: são clientes sem cidade. É normal.
Se todos os teus clientes tiverem a mesma data, a consulta 3 não mostra bem a ordem. Podes mudar a data de um cliente na Consola do CRM, por exemplo: clientes[0].criadoEm = '2026-09-01'; guardar('clientes', clientes); (e depois voltas a carregar os dados no laboratório).

📚 Para rever: aula 11, passos 2 a 4.

📦 Entrega

Antes de entregares, confirma:

Gravei todos os ficheiros (no VS Code, nenhum separador mostra o ponto ● de «por gravar»).
Depois de F5, o CRM abre sem erros vermelhos na Consola.
Parte 1: crio um cliente com cidade, vejo-a na tabela, edito-a e encontro-o pela pesquisa.
Parte 2: a caixa «Só com email» filtra a tabela.
Parte 3: o ficheiro ficha12.sql está na pasta meu-crm, com as 3 consultas.

Depois, compacta e entrega:

Fecha o VS Code. No Explorador de Ficheiros, clica com o botão direito na pasta meu-crm e escolhe Comprimir para ficheiro ZIP (no Windows 10: Enviar para → Pasta comprimida (zipada)).
Muda o nome do ficheiro para NomeApelido-aula12.zip (por exemplo, AnaSilva-aula12.zip).
Entrega o ficheiro da forma que o professor indicar.

💡 O zip leva o teu código, mas não leva os teus clientes (esses ficam no browser). Não faz mal: o professor testa o teu CRM com clientes dele. É por isso que as consultas SQL têm de estar no ficha12.sql.

⏱️ Se acabares antes do tempo

Volta a testar tudo, alínea a alínea, com a tabela de pontuação à frente.
Testa casos especiais: um cliente sem cidade, um cliente sem email, a pesquisa com maiúsculas (PORTO).
Confirma que o nome do zip está certo e que, ao abri-lo, lá dentro está a pasta meu-crm com o ficha12.sql.

📖 Onde está cada coisa no teu projeto

Formulário de clientes: index.html, dentro de <form id="form-cliente">.
Barra de pesquisa e filtros: index.html, na <div class="filtros">, por cima da tabela.
Cabeçalho da tabela: index.html, dentro de <thead>.
guardarCliente(): app.js: junta os dados do formulário num objeto e grava-o.
linhaCliente(cliente): app.js: cria o HTML de uma linha da tabela.
editarCliente(id): app.js: passa os dados de um cliente para o formulário.
clientesVisiveis(): app.js: a consulta — filtra (pesquisa, estado) e ordena os clientes.
Laboratório SQL: sql-lab.html, aberto com o Live Server no mesmo endereço do CRM.