𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗽𝗲𝗿 𝗯𝗶𝗻𝗴𝗵𝗲𝗼𝗻𝗶: 𝗰𝗼𝗺𝗲 𝗵𝗼 𝗰𝗿𝗲𝗮𝘁𝗼 𝘂𝗻'𝗮𝗽𝗽 𝘄𝗲𝗯 𝗽𝗵𝗼𝘁𝗼 𝗯𝗼𝗼𝘁𝗵
Sono uno scrittore, non un programmatore. Le mie competenze tecniche si sono fermate all'HTML di base nel 1999.
La scorsa settimana ho costruito il mio primo vero strumento. Ho usato Claude per fare "vibe coding" di un'app web photo booth funzionante per MLH.
Ecco come un non-programmatore ha costruito un'app funzionale per eventi dal vivo.
𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 MLH organizza molti eventi. Avevamo bisogno di un photo booth basato su browser.
- I partecipanti aprono un link sul loro telefono.
- Scattano un selfie o caricano una foto.
- Aggiungono una cornice personalizzata.
- Salvano la foto nella galleria del telefono.
- Nessun account. Nessun app store. Solo un link.
𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆 Volevo usare un framework complesso. Claude mi ha convinto a non farlo.
Per gli eventi dal vivo, meno componenti mobili ci sono, meglio è. Ho costruito l'intero strumento in un unico file index.html. Utilizza HTML, CSS e JavaScript. Non c'è alcun passaggio di build complesso. Rimane su GitHub Pages gratuitamente.
𝗧𝗵𝗲 𝗣𝗿𝗶𝘃𝗮𝗰𝘆 𝗕𝗼𝗻𝘂𝘀 Ho usato un canvas HTML per combinare la foto e la cornice. Tutta l'elaborazione avviene nel browser dell'utente. La foto non viene mai caricata su un server. Questo la rende privata e sicura per i partecipanti.
𝗧𝗵𝗲 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗠𝗮𝗴𝗶𝗰 Un sito statico può comunque avere un backend. Ho usato Supabase per l'archiviazione.
- Gli organizzatori caricano le cornici in un bucket di Supabase.
- I partecipanti visualizzano quelle cornici tramite il sito.
- La sicurezza risiede nelle policy del database, non in password nascoste.
𝗧𝗵𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀 Il vibe coding aiuta con l'architettura, ma bisogna prestare attenzione ai dettagli operativi:
- I database "dormono". Ho imparato ad attivare il mio progetto Supabase il giorno prima di un evento.
- Sicurezza delle immagini. Ho dovuto aggiungere una riga di codice specifica per consentire al canvas di utilizzare immagini remote.
- Esperienza utente. Sui telefoni, il tasto "scarica" è difficile da trovare. Ho modificato il codice per utilizzare il menu di condivisione nativo del mobile. Questo invia la foto direttamente nella galleria del telefono.
𝗠𝘆 𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗼𝗿 𝗬𝗼𝘂
- Scegli un progetto con confini ben definiti. Un photo booth ha un traguardo chiaro. Un'app social no.
- Chiedi all'IA il "perché". Il ragionamento è più importante del codice.
- Leggi i diff. Non lasciare che l'IA modifichi il tuo sito senza la tua revisione.
- Prendi in mano le decisioni. L'IA gestisce la sintassi, ma tu gestisci i vincoli.
Il vibe coding non consiste nel saltare il lavoro. Consiste nel concentrarsi sui problemi giusti.
Vibe Coding per principianti: come ho costruito una web app per photo booth funzionante con Claude
Hai mai avuto la sensazione di poter costruire un'intera applicazione semplicemente descrivendola? Non scrivendo ogni singola riga di codice, ma comunicando la tua "visione" o, come si dice ora, la tua "vibe"?
Benvenuti nell'era del vibe coding.
Recentemente, ho sperimentato con Claude 3.5 Sonnet per vedere quanto fosse possibile spingersi oltre il semplice "aiutami a scrivere questa funzione" e arrivare a "costruisci questo per me". Il risultato? Una web app per un photo booth completamente funzionante, creata quasi interamente attraverso il dialogo.
Cos'è il Vibe Coding?
Il "vibe coding" non riguarda l'assenza di programmazione, ma un cambiamento di paradigma. Invece di concentrarti sulla sintassi, sui punti e virgola mancanti o sulla gestione manuale della memoria, ti concentri sull'intento e sull'esperienza utente.
In pratica, agisci come un direttore d'orchestra o un product manager. Tu fornisci la direzione, il gusto e la visione (la "vibe"), mentre l'IA si occupa della realizzazione tecnica.
Il Progetto: Una Web App per Photo Booth
Volevo qualcosa di visivo, interattivo e immediato. Un'app che permettesse di:
- Accedere alla webcam.
- Vedere un countdown.
- Scattare una foto.
- Applicare filtri divertenti.
- Scaricare l'immagine.
Il Processo
1. Il Prompt Iniziale
Non ho iniziato con una struttura di file complessa. Ho iniziato con un prompt molto semplice:
"Voglio creare una web app per un photo booth. Deve usare HTML, CSS e JavaScript puro. L'utente deve poter vedere la propria immagine dalla webcam, avere un countdown di 3 secondi prima dello scatto e poter applicare filtri come bianco e nero o seppia. Mantieni un design moderno e pulito."
Claude ha generato un file unico (o una struttura base) che funzionava quasi immediatamente.
2. Iterazione e Raffinamento
Qui è dove il "vibe coding" prende davvero vita. Invece di cercare di capire perché un elemento CSS non era centrato, ho semplicemente detto:
"Il pulsante di scatto è un po' troppo piccolo e non si vede bene sopra il video. Rendilo più grande, rotondo e con un effetto neon blu. Inoltre, sposta il countdown al centro dello schermo."
Ho descritto l'estetica e il comportamento, e Claude ha aggiornato il codice.
3. Gestione degli Errori (Debugging tramite "Vibe")
Naturalmente, ci sono stati dei problemi. Ad esempio, il filtro non si applicava correttamente all'immagine scaricata, ma solo alla visualizzazione in tempo reale.
Invece di analizzare i log della console per ore, ho descritto il problema:
"Ehi, c'è un problema. Quando scarico la foto, i filtri non sono visibili. L'immagine scaricata sembra la versione originale senza filtri. Puoi sistemarlo?"
Claude ha capito che doveva utilizzare un canvas per "disegnare" l'immagine con i filtri applicati prima del download.
Cosa ho imparato
Il vibe coding non sostituisce la necessità di capire come funziona il software, ma abbassa drasticamente la barriera all'ingresso per la prototipazione rapida.
I punti chiave:
- L'importanza della chiarezza: Più sei preciso nella descrizione della "vibe", migliore sarà il risultato.
- Iterazione rapida: Non cercare la perfezione al primo colpo. Costruisci una base e poi rifinisci.
- Il ruolo del programmatore: Il nostro lavoro si sta spostando dalla scrittura del codice alla validazione del codice e alla progettazione del sistema.
Conclusione
Costruire questa app è stato incredibilmente soddisfacente. Non ho passato ore a combattere con la sintassi, ma ho passato il tempo a pensare a come rendere l'esperienza divertente per l'utente.
Il futuro della programmazione non è solo scrivere codice, è comunicare idee.