Rifinire e prepararsi al lancio

Trasformare un programma funzionante in un prodotto finito

⏱ Stima ~9 min

01 · Leggi

Il tuo gioco funziona. Due giocatori possono trovarsi, giocare a tic-tac-toe in tempo reale e le disconnessioni vengono gestite con eleganza. Ma funzionare e essere finito sono cose diverse.

Un progetto finito ha un'UI pulita, un README che spiega cos'è, nessun debug log abbandonato nel codice e una cronologia git ordinata. Questa è la differenza tra un side project e un pezzo di portfolio — qualcosa che mostreresti davvero a un altro ingegnere o a chi ti assume.

Questa lezione riguarda l'ultimo 10% che fa brillare il primo 90% di fatica.

Punti chiave

Un programma che funziona non è uguale a un programma finito
Rifinire significa: UI pulita, README, niente debug log, git ordinato
Il README è la prima cosa che chiunque vede quando guarda il tuo progetto
Questa è la differenza tra un side project e un pezzo di portfolio

02 · Modello di prompt

Chiedi a Claude di migliorare la rifinitura visiva del gioco. Dagli un feedback preciso su cosa ti sembra grezzo.

Migliora l'UI del gioco di tic-tac-toe. Requisiti specifici: (1) Aggiungi un'animazione di transizione fluida quando un simbolo compare in una cella. (2) Quando qualcuno vince, evidenzia le tre celle vincenti con un colore di sfondo diverso. (3) Aggiungi un indicatore visivo per mostrare di chi è il turno — ad esempio fai pulsare il testo di stato o cambia il colore in base al simbolo del giocatore corrente. (4) Disabilita il pulsante Find Game durante la ricerca di un avversario e mostra uno spinner o un'animazione di caricamento. (5) Assicurati che il gioco sia bello anche su mobile — il tabellone deve ridimensionarsi automaticamente su schermi piccoli.

03 · Modello di prompt

Ogni progetto ha bisogno di un README. Chiedi a Claude di scriverne uno che spieghi cos'è il progetto, come si avvia e quali tecnologie usa.

Aiutami a creare un README.md per il mio progetto di tic-tac-toe. Deve contenere: (1) Titolo e una descrizione in una frase. (2) Sezione 'How to Play' che spiega il flusso di gioco (trovare un avversario, giocare a turni, vincere o pareggiare). (3) Sezione 'Tech Stack' con l'elenco di Node.js, Express, Socket.io e HTML/CSS/JS puri. (4) Sezione 'Run Locally' con istruzioni passo-passo: clone, npm install, node server.js, aprire localhost:3000. (5) Sezione 'How It Works' con una breve spiegazione dell'architettura client-server e della comunicazione WebSocket. Mantienilo conciso — nessuno legge un README da 500 righe.

04 · Lista di controllo

Segui questa checklist di preparazione al lancio. Ogni punto distingue un progetto amatoriale da uno professionale.

Rimossi tutti i console.log di debug (mantieni solo i log di connessione/disconnessione in server.js)
L'UI del gioco appare pulita — niente elementi sovrapposti, layout rotti o testo segnaposto
Il README spiega cos'è il progetto e come avviarlo
Creato un file .gitignore che esclude node_modules/
Nessun URL localhost scritto nel codice — si usano percorsi relativi così funziona anche in deploy
Testato di nuovo il flusso completo del gioco dopo tutte le modifiche di rifinitura

05 · Pratica reale

Inizializza il repository git, fai il primo commit e fai push su GitHub. È lo stesso flusso che hai imparato al Livello 4.

06 · Quiz

Perché rimuovere le istruzioni console.log di debug prima del lancio?

Rallentano significativamente il server
Espongono lo stato interno a chiunque apra DevTools, ingombrano i log del server e rendono più difficile trovare i problemi reali
JavaScript non permette console.log in modalità production
Socket.io va in conflitto con console.log

07 · Completa

Il file _____ dice agli altri ingegneri cos'è il tuo progetto, come installarlo e come avviarlo.

Altre lezioni di questo capitolo

⚠ L'esperienza interattiva completa richiede JavaScript. Attivalo e ricarica la pagina.

※ Questo è un progetto educativo indipendente — non è un prodotto ufficiale di Anthropic. Claude™ è un marchio di Anthropic, PBC.