Crea la tua prima app utile con l'IA

Passo 1: Descrivi il problema con parole tue

Fare la spesa è una cosa che fanno quasi tutti, e proprio per questo è un primo progetto perfetto. Non serve capire di programmazione per capire se una lista della spesa funziona: scrivi pane, latte e uova, vedi il totale e spunti le voci man mano che le compri. Il risultato è qualcosa che puoi usare davvero già questa settimana.

Prima di aprire qualsiasi strumento di IA, completa queste tre frasi su carta o in una nota. È la competenza di programmazione più importante di tutto il libro: trasformare un desiderio in regole concrete.

1. Devo annotare… (per esempio: ogni articolo, quanti me ne servono e il prezzo di uno).
2. Voglio che il programma calcoli… (per esempio: il prezzo di ogni riga e il totale di tutta la spesa).
3. Saprò che il programma funziona quando… (per esempio: due articoli a 25 € danno 50 €, e spuntare un articolo non cambia il totale).

Passo 2: Costruisci la prima piccola versione

La prima versione è un singolo file che si apre nel browser. Non c'è nessun ambiente di sviluppo da installare, nessun server e nessun login. Copia il prompt qui sotto nel tuo assistente IA (Claude, ChatGPT o simili) esattamente com'è.

Aiutami a costruire la mia prima app semplice. Sono un principiante assoluto.

Crea una lista della spesa in un unico file chiamato spesa.html che io possa aprire nel mio browser. Metti tutti gli stili e tutto il JavaScript dentro questo stesso file, senza librerie esterne.

Voglio inserire il nome dell'articolo, la quantità e il prezzo di un singolo pezzo. Un pulsante aggiunge l'articolo alla lista. Mostra il prezzo di ogni riga e, in fondo, il totale di tutta la spesa. Permettimi di eliminare un articolo e di segnarlo come comprato. Segnare un articolo come comprato non deve cambiare il totale.

Rifiuta un nome vuoto, i numeri non validi, un prezzo negativo e una quantità pari a zero o inferiore. Nel prezzo accetta sia la virgola sia il punto decimale.

Prima spiega brevemente il piano. Poi scrivi il codice completo e i passaggi esatti per salvare e aprire il file. Per ora non aggiungere altre funzioni.

1. Copia il codice. Usa il pulsante di copia nella risposta dell'IA, così prendi tutto il codice, dalla prima all'ultima riga.
2. Salvalo come spesa.html. Apri un semplice editor di testo (Notepad su Windows, TextEdit in modalità solo testo su Mac), incolla il codice e salvalo come spesa.html. Come tipo di file scegli «Tutti i file», non «Documenti di testo».
3. Aprilo nel browser. Fai doppio clic sul file oppure trascinalo in una finestra del browser. Dovresti vedere la tua lista della spesa, non una pagina piena di codice.

Passo 3: Verifica che non sia solo una bella immagine

Un'app che sembra giusta non è la stessa cosa di un'app che funziona. Scorri questa tabella una riga alla volta e confronta ciò che vedi con il risultato corretto. È il tuo primo vero test.

Se una riga non va, non correggere ancora il codice a mano. Di' all'IA esattamente quale riga non ha funzionato, cosa hai inserito e cosa hai visto invece, e chiedile di correggere solo quel problema.

Passo 4: Fai una modifica da solo

Ora fai la tua prima modifica senza che sia l'IA a scriverla per te. Chiedi all'IA: «Dov'è il titolo dell'app nel mio codice?». Ti indicherà una riga simile a <h1>Lista della spesa</h1>.

1. Trova il titolo. Apri spesa.html nel tuo editor di testo e trova la riga che ti ha indicato l'IA.
2. Cambia il testo. Sostituisci le parole tra <h1> e </h1> con un titolo tuo, per esempio «Spesa del sabato». Non cancellare le parentesi angolari.
3. Salva e aggiorna. Salva il file, torna al browser e aggiorna la pagina. Dovrebbe comparire il tuo nuovo titolo.

Poi chiedi all'IA di spiegarti il tuo file in tre parti, usando il tuo codice come esempio. Vedrai che ogni app web è costruita con gli stessi tre livelli:

Passo 5: Insegna all'app una nuova abilità

I programmi veri crescono a piccoli passi. Aggiungi una sola funzione nuova, poi testa di nuovo. Manda all'IA questo messaggio di seguito nella stessa conversazione:

Aggiungi un budget alla mia lista della spesa. Fammi scrivere la cifra che voglio spendere. Mostra quanto mi resta. Se il totale supera il budget, mostra un avviso chiaro con l'importo di cui lo sto superando. Tutto il resto deve continuare a funzionare esattamente come prima, e mostrami il file completo aggiornato.

Hai appena costruito, avviato, testato e modificato una vera app. Non è tutta la programmazione, ma è la routine che ripeterai in ogni lezione successiva: descrivere con chiarezza, lasciare che l'IA generi, verificare rispetto ai risultati attesi e cambiare una cosa alla volta.