Definire lo scenario della demo

Questa lezione appartiene al Modulo 16 — Preparazione alla presentazione.

Il lavoro continua il progetto guida, il Registro del laboratorio scolastico. In questa lezione costruisci uno scenario di demo strutturato che mostri le funzionalità principali del Registro in una sequenza logica e spiegabile.

Obiettivo della lezione

Scrivere uno scenario di demo con 5-10 passi che mostrino: registrazione, ricerca, prestito, restituzione, segnalazione guasto e almeno un errore gestito correttamente. Lo scenario deve essere eseguibile in meno di 8 minuti.

Alla fine devi avere: uno scenario scritto, i dati iniziali caricati in localStorage, e una prova completa eseguita almeno una volta.

Perché strutturare lo scenario

Improvvisare la demo è il modo più sicuro per fare errori davanti al docente. Uno scenario strutturato permette di:

• sapere esattamente quali dati devono essere presenti all’inizio
• eseguire ogni passo nella sequenza giusta (non si può chiudere un prestito se non è stato aperto)
• mostrare deliberatamente un errore gestito — dimostrando che il sistema è robusto
• sapere come tornare allo stato iniziale se qualcosa va storto

La struttura dello scenario

Un buono scenario per il Registro ha tre parti:

• Setup — dati iniziali in localStorage (eseguito prima della demo, non durante)
• Sequenza principale — 5-8 passi da eseguire nell’ordine, ognuno con il risultato atteso
• Piano B — cosa fare se un passo fallisce

Procedura guidata

1. Decidi i dati iniziali: quanti strumenti, in quali stati, quanti prestiti già presenti.
2. Scrivi lo script di setup che carica i dati in localStorage.
3. Scrivi la sequenza di passi numerata con risultato atteso per ognuno.
4. Includi almeno un passo che mostra un errore gestito.
5. Decidi il piano B per i passi più rischiosi.
6. Esegui la demo completa una volta e cronometra.

Attività in classe

Compila lo scenario prima di eseguire la prova:

## Scenario demo — Registro del laboratorio

Setup (da fare prima della demo):
- Script di caricamento dati: (sì / no — dove si trova)
- Dati iniziali: N strumenti, M prestiti

Passo 1: (azione)
Risultato atteso:
Piano B se fallisce:

Passo 2:
Risultato atteso:
Piano B:

[...]

Durata stimata: __ minuti
Durata reale nella prova: __ minuti

Spiegazione guidata per studiare

Una demo efficace racconta una storia. Non è “clicco tutti i pulsanti per mostrare che funzionano” — è “immaginate che il tecnico del laboratorio apre il Registro stamattina, vede gli strumenti disponibili, presta l’oscilloscopio a uno studente, poi riceve una segnalazione di guasto sul trapano a colonna”. Questa narrativa rende la demo comprensibile anche a chi non sa nulla di architettura del software.

La scelta di mostrare un errore deliberatamente è importante: dimostra che il sistema è pensato anche per i casi non felici, non solo per il percorso principale. Il docente apprezza vedere che il sistema gestisce correttamente “strumento non disponibile” invece di bloccarsi.

Passo per passo nel progetto

1. Crea o aggiorna lo script di setup. Incollalo nella console del browser prima della demo:

// setup-demo.js — da eseguire in console prima della presentazione

const strumenti = [
  { id: "str-001", name: "Multimetro digitale", category: "misura", status: "disponibile" },
  { id: "str-002", name: "Oscilloscopio 2 canali", category: "misura", status: "disponibile" },
  { id: "str-003", name: "Saldatore a stazione", category: "saldatura", status: "disponibile" },
  { id: "str-004", name: "Trapano a colonna", category: "perforazione", status: "disponibile" },
  { id: "str-005", name: "Alimentatore da banco", category: "alimentazione", status: "guasto" }
];

const prestiti = [];

localStorage.setItem("registro_strumenti", JSON.stringify(strumenti));
localStorage.setItem("registro_prestiti", JSON.stringify(prestiti));

console.log("Setup demo completato: 5 strumenti caricati (1 guasto, 4 disponibili)");

1. Scrivi lo scenario completo con 8 passi:

## Scenario demo — 7 passi, ~6 minuti

SETUP (prima di iniziare):
1. Apri la console del browser
2. Incolla ed esegui setup-demo.js
3. Verifica: 5 strumenti caricati, "Setup demo completato" in console
4. Ricarica la pagina

SEQUENZA DEMO:

Passo 1: Mostrare la lista strumenti
Azione: apri il Registro, mostra la lista degli strumenti
Spiegazione: "Vediamo 5 strumenti. 4 disponibili, 1 guasto (l'alimentatore)"
Risultato atteso: lista visibile con stati corretti

Passo 2: Cercare strumenti per categoria
Azione: cerca "misura" nella barra di ricerca
Spiegazione: "Filtriamo per categoria — vediamo solo multimetro e oscilloscopio"
Risultato atteso: 2 strumenti mostrati

Passo 3: Aprire un prestito
Azione: inserisci "str-002", clicca Presta
Spiegazione: "Prestiamo l'oscilloscopio"
Risultato atteso: "Prestito aperto. ID prestito: ..."

Passo 4: Verificare che lo strumento non è più disponibile
Azione: aggiorna la lista
Spiegazione: "L'oscilloscopio ora è in prestito — non disponibile"
Risultato atteso: stato cambiato a "in-prestito"

Passo 5: Tentare un secondo prestito dello stesso strumento (errore deliberato)
Azione: inserisci "str-002", clicca Presta di nuovo
Spiegazione: "Proviamo a prestarlo di nuovo — il sistema deve bloccarlo"
Risultato atteso: messaggio "Lo strumento non è disponibile."

Passo 6: Restituire lo strumento
Azione: inserisci "str-002", clicca Restituisci
Spiegazione: "Il tecnico restituisce l'oscilloscopio"
Risultato atteso: "Prestito chiuso. Strumento restituito."

Passo 7: Segnalare un guasto
Azione: inserisci "str-003", clicca Segnala Guasto
Spiegazione: "Il saldatore ha un problema — lo segnaliamo"
Risultato atteso: stato cambiato a "guasto"

Passo 8 (opzionale): Mostrare che i dati persistono
Azione: ricarica la pagina
Spiegazione: "I dati sono in localStorage — rimangono dopo il ricaricamento"
Risultato atteso: lista invariata dopo reload

PIANO B:
- Se Presta fallisce con errore inatteso: mostra la console del browser, spiega il messaggio
- Se la lista non si aggiorna: ricarica la pagina e spiega che è un limite dell'implementazione
- Se localStorage è vuoto dopo il reload: riesegui setup-demo.js in console

1. Esegui la demo completa una volta da sola. Cronometra. Se supera gli 8 minuti, accorcia.

2. Eseguila una seconda volta davanti a un compagno che fa da “docente” e fa domande.

Esempio JS — come ripristinare lo stato durante la demo

Se qualcosa va storto durante la demo e i dati si corrompono, puoi ripristinare in pochi secondi:

// incolla in console — ripristina lo stato iniziale della demo
localStorage.removeItem("registro_strumenti");
localStorage.removeItem("registro_prestiti");
// poi esegui di nuovo setup-demo.js

Oppure direttamente:

// reset completo
Object.keys(localStorage)
  .filter(k => k.startsWith("registro_"))
  .forEach(k => localStorage.removeItem(k));
console.log("localStorage resettato");

Prova di comprensione

Rispondi per iscritto:

• Perché lo script di setup va eseguito prima della demo e non durante?
• Qual è il vantaggio di mostrare un errore deliberatamente durante la demo?
• Se il passo 5 (errore deliberato) non funziona — cioè il sistema permette il secondo prestito — cosa significa per l’architettura?
• Come cronometri la demo senza distrarti durante l’esecuzione?

Errori da evitare

• improvvisare la sequenza senza uno scenario scritto;
• non avere i dati iniziali pronti prima di iniziare;
• non aver mai eseguito la demo completa prima della presentazione;
• non includere nessun errore deliberato — la demo sembra troppo “perfetta” e non dimostra la robustezza del sistema.

Prodotto da consegnare

Lo scenario scritto con 5-8 passi, lo script di setup, e la prova completa eseguita almeno una volta. Come verifica: mostra al compagno lo scenario scritto e poi eseguilo dal vivo in meno di 8 minuti.

Checklist di chiusura

• lo scenario ha 5-8 passi scritti con risultato atteso;
• lo script di setup è pronto e funzionante;
• la sequenza include almeno un errore gestito deliberatamente;
• il piano B è definito per i passi più rischiosi;
• la demo completa è stata eseguita e dura meno di 8 minuti.

Risultato atteso

Ho scritto uno scenario di demo con 7 passi.
I dati di setup sono pronti nello script setup-demo.js.
Il passo 5 mostra un errore gestito: "Lo strumento non è disponibile."
Ho eseguito la demo completa in 5 minuti e 30 secondi.
Il piano B: se qualcosa va storto, resetto localStorage e rieseguo il setup.