Pulizia finale della demo

Questa lezione appartiene al Modulo 23 — Preparazione della consegna finale estesa.

Cosa significa “pulire” la demo

Pulire la demo non significa renderla perfetta — significa rimuovere tutto ciò che distrae dalla valutazione del lavoro reale. Chi valuta deve vedere il progetto funzionante, non i residui del processo di sviluppo.

Ci sono quattro categorie di pulizia:

1. Pulizia del codice — console.log di debug, codice commentato, variabili inutilizzate
2. Pulizia dei dati — localStorage con dati di test, dati incoerenti, stato inaspettato
3. Pulizia della documentazione — README con sezioni incomplete o placeholder, link rotti
4. Pulizia dell’ambiente — schede del browser aperte, errori in console, URL sbagliati

Pulizia 1: codice

Rimuovere console.log di debug

// ❌ Da rimuovere prima della consegna
function registraPrestito(comando) {
  console.log("comando ricevuto:", comando);       // debug
  console.log("archivio stato:", archivioStrumenti.leggiTutti()); // debug
  const strumento = archivioStrumenti.trovaPerId(comando.strumentoId);
  console.log("strumento trovato:", strumento);    // debug
  // ...
}

// ✅ Dopo la pulizia
function registraPrestito(comando) {
  const strumento = archivioStrumenti.trovaPerId(comando.strumentoId);
  // ...
}

Eccezione: i console.error nei blocchi catch vanno tenuti — sono logging legittimo, non debug.

Rimuovere codice commentato

// ❌ Da rimuovere
// function vecchiaVersione(id) {
//   return localStorage.getItem(id);
// }

// if (DEBUG_MODE) {
//   mostraStatoInterno();
// }

Il codice commentato crea rumore. Se serve per storia, è nel git history.

Verificare import inutilizzati

// ❌ Import che non vengono usati
import { vecchiaFunzione } from "./utils.js"; // non usato
import { mappaDeprecata } from "./mapping.js"; // non usato

Pulizia 2: dati

Preparare dati di esempio coerenti

Prima della valutazione, carica nel Registro uno scenario di dati pulito e realistico:

Strumenti da avere nel localStorage per la demo:
- Trapano elettrico (Elettrico, disponibile)
- Multimetro digitale (Misura, disponibile)
- Saldatore a stagno (Elettrico, disponibile)
- Seghetto alternativo (Manuale, in_manutenzione) — utile per mostrare lo stato
- Pinza amperometrica (Misura, guasto) — utile per mostrare l'errore di prestito

Creare un file datiIniziali.js

Invece di caricare i dati manualmente prima di ogni demo, prepara un file che li carica automaticamente se localStorage è vuoto:

// src/datiIniziali.js
export const strumentiIniziali = [
  { id: "s1", nome: "Trapano elettrico", categoria: "Elettrico", stato: "disponibile" },
  { id: "s2", nome: "Multimetro digitale", categoria: "Misura", stato: "disponibile" },
  { id: "s3", nome: "Saldatore a stagno", categoria: "Elettrico", stato: "disponibile" },
  { id: "s4", nome: "Seghetto alternativo", categoria: "Manuale", stato: "in_manutenzione" },
  { id: "s5", nome: "Pinza amperometrica", categoria: "Misura", stato: "guasto" }
];

// In main.js — carica i dati iniziali se localStorage è vuoto
const esistenti = archivioStrumenti.leggiTutti();
if (esistenti.length === 0) {
  strumentiIniziali.forEach(s => archivioStrumenti.salva(s));
}

Pulizia 3: documentazione

README — sezioni da verificare

Apri il README e controlla che ogni sezione sia completa:

Sezioni obbligatorie nel README:
[ ] Nome del progetto e breve descrizione (1-2 frasi)
[ ] Come avviare (comandi precisi, senza ambiguità)
[ ] Struttura delle cartelle con descrizione di ogni livello
[ ] Funzioni principali (cosa sa fare il Registro)
[ ] Scelte architetturali (almeno una con motivazione)
[ ] Limiti noti (almeno uno — onestà intellettuale)
[ ] Come eseguire i test (se presenti)

Placeholder da rimuovere

❌ "[Inserire qui la spiegazione]"
❌ "TODO: completare questa sezione"
❌ "Vedi lezione X per dettagli"
❌ Link che puntano a localhost ma non funzionano dalla cartella

Pulizia 4: ambiente

Checklist pre-valutazione

Ambiente:
[ ] Il progetto si apre correttamente con doppio click su index.html (o server locale)
[ ] La console del browser non mostra errori rossi all'avvio
[ ] localStorage è nello stato corretto (svuotato e ripopolato con dati iniziali)
[ ] Le schede del browser sono pulite (no tab con versioni vecchie aperte)
[ ] L'editor mostra il file corretto (no modifiche non salvate)

Contenuto:
[ ] Tutti i console.log di debug sono rimossi
[ ] Il codice commentato inutile è rimosso
[ ] Il README è completo e leggibile
[ ] I dati di esempio sono caricati e realistici
[ ] Il diagramma (se presente) è coerente con il codice attuale

Procedura guidata

1. Esegui grep per console.log in tutti i file JS — rimuovi quelli di debug, tieni i console.error.
2. Cerca commenti // che contengono codice inattivo — rimuovili.
3. Svuota localStorage e carica i dati di esempio.
4. Apri il README e completa ogni sezione incompleta.
5. Apri il progetto su un browser pulito (o in incognito) e verifica che parta senza errori.
6. Controlla la console: nessun errore rosso.

Attività in classe

## Pulizia finale — log delle modifiche

console.log rimossi:
  - [file:riga] — motivo rimozione

Codice commentato rimosso:
  - [file:riga]

README sezioni completate:
  - [sezione]

Dati di esempio preparati: sì/no
  - Strumenti disponibili: [n]
  - Strumenti in altri stati: [n]

Errori in console dopo pulizia: sì/no (quali?)

Tempo stimato per avviare il progetto da zero: _____ secondi

Spiegazione guidata per studiare

La pulizia della demo è l’ultimo passo prima della valutazione — e spesso il più trascurato. Un progetto con console.log di debug sparse, dati incoerenti in localStorage, o un README con placeholder non trasmette competenza — trasmette fretta.

Il punto centrale è: chi valuta vede il prodotto finito, non il processo di sviluppo. Il processo ha valore, ma va raccontato in retrospettiva — non lasciato come residuo nel codice.

Il rischio tipico è aggiungere funzionalità all’ultimo momento invece di pulire ciò che esiste. Un progetto pulito e completo al 70% è più forte di un progetto al 90% con debug visibili e README a metà.

Passo per passo nel progetto

1. Apri ogni file JS — cerca console.log manualmente o con grep.
2. Per ogni console.log: è debug (rimuovi) o logging legittimo con console.error (tieni)?
3. Svuota localStorage (DevTools → Application → Clear storage).
4. Carica i dati di esempio tramite il file datiIniziali.js o manualmente.
5. Apri il progetto in una finestra in incognito — simula “prima volta”.
6. Leggi il README come se fossi un valutatore esterno — è comprensibile?

Esempio da leggere lentamente

Checklist di pulizia completata — cosa ho fatto:

1. Rimosso 7 console.log da registraPrestito.js e ui.js.
   Tenuto console.error nei blocchi catch — è logging legittimo.

2. Rimosso blocco di codice commentato in archivioLocalStorage.js
   (vecchia versione di salva() che non usavo più).

3. Svuotato localStorage. Caricato datiIniziali.js con 5 strumenti.
   Verificato che i filtri funzionino con i nuovi dati.

4. Completato README: aggiunta sezione "Come avviare" con comando
   python3 -m http.server 8000, e sezione "Limiti noti" con
   "i dati non sono protetti — chiunque con accesso al browser può modificarli".

5. Aperto in incognito: nessun errore in console, il progetto parte correttamente.

Prova di comprensione

• Hai rimosso tutti i console.log di debug? Come li hai trovati?
• Il README ha tutte le sezioni obbligatorie complete?
• Il progetto si apre correttamente in una finestra in incognito senza errori?

Errori da evitare

• rimuovere console.error insieme ai console.log — i log degli errori servono;
• dimenticare di aggiornare il README dopo l’ultima modifica al codice;
• lasciare dati di test in localStorage — la demo parte da uno stato imprevisto;
• fare pulizia e modificare logica nello stesso passo — separa le due operazioni.

Prodotto da consegnare

Può essere:

• il log delle modifiche di pulizia (cosa è stato rimosso, dove);
• una screenshot della console del browser dopo la pulizia (nessun errore rosso);
• il README completato con tutte le sezioni obbligatorie.

Checklist di chiusura

• Nessun console.log di debug nei file JS (i console.error sono ok)
• Nessun codice commentato inutile
• localStorage svuotato e ripopolato con dati di esempio realistici
• README completo: avvio, struttura, funzioni, scelte, limiti
• Il progetto si apre senza errori in una finestra in incognito
• Nessun errore rosso in console all’avvio

Domande per la revisione

• Quanti console.log hai rimosso? In quali file erano concentrati?
• Il README descriveva il progetto com’è adesso, o come era settimane fa?
• Quanto tempo ci vuole per avviare il progetto da zero su un computer diverso?

Risultato atteso

Alla fine lo studente deve saper dire:

Ho rimosso [n] console.log di debug dai file [lista].
Ho preparato [n] strumenti di esempio in localStorage.
Il README ha queste sezioni complete: [lista].
Il progetto si apre correttamente in incognito senza errori in console.

Se questa spiegazione non è possibile, la lezione non è ancora davvero conclusa.