Vibe coding: creare da sé una piccola app

Con il vibe coding descrivi a parole tue cosa vuoi creare. L’assistente scrive il codice, mostra il risultato e lo modifica in base al tuo feedback. Non devi saper programmare. Puoi creare ad esempio un quiz per una formazione, un piccolo gioco o uno strumento utile per i tuoi colleghi.

Ti serve solo l’applicazione desktop. Non devi installare Node.js né git: l’app li include già.

1. Scegli una cartella di lavoro

Crea una cartella vuota sul tuo computer, ad esempio QuizFormazione, e sceglila come cartella di lavoro della tua chat. Come fare è spiegato in Accesso ai file locali. L’assistente lavora solo in questa cartella.

2. Descrivi cosa vuoi

Spiega nel modo più concreto possibile cosa vuoi creare. Ad esempio:

Crea un quiz per un workshop sulla sicurezza delle informazioni come un’unica pagina HTML. Dieci domande a scelta multipla, con pulsanti grandi, un punteggio alla fine e un pulsante per ricominciare.

Una pagina semplice come questa viene mostrata dall’assistente con il server web integrato dell’app. Il risultato compare nel browser integrato: il pulsante Browser (l’icona del globo) a destra nella barra superiore. Maggiori informazioni in Server locali e browser integrato.

Non sei soddisfatto? Di’ semplicemente cosa va cambiato:

Rendi verdi i pulsanti e, in caso di risposta sbagliata, mostra quella giusta.

Le tue foto e far guardare l’assistente

Allega una foto al messaggio e chiedi:

Metti questa foto nella pagina web.

L’assistente salva la foto nella cartella del progetto, per esempio in img/, e la inserisce nella pagina. Funziona anche con un’immagine che l’assistente ha appena creato per te.

Qualcosa non va nella pagina del browser integrato? Chiedi:

Guarda cosa non va nella pagina.

L’assistente esamina il testo, uno screenshot e i messaggi di errore della pagina. Vedi Far guardare l’assistente.

Quando l’assistente apre lui stesso una pagina nel browser integrato, aspetta che sia caricata e ne vede i messaggi di errore, per esempio un errore di script o un file che non si carica. Li corregge prima di dire che funziona. Poi prova la pagina come un utente: fa clic sui pulsanti, compila i campi, preme i tasti e corregge gli errori che compaiono. Se tutto funziona come intendi lo controlli tu.

3. App più grandi

Se vuoi qualcosa di più grande, come un’app con più schermate, l’assistente può creare un progetto con, ad esempio, Vite e React:

In questa cartella crea un’app React con Vite con cui i colleghi possono prenotare una sala riunioni. Installa tutto, avvia l’app e mostra il risultato.

L’avvio di un progetto di questo tipo (ad esempio con npm create vite@latest) lo approvi sulla scheda del comando. Poi l’assistente installa dei pacchetti. Approvi anche questo, oppure attivi Consenti installazioni di pacchetti senza chiedere. Vedi Installare pacchetti. Non vuoi una scheda per ogni comando? Scegli Considera attendibile questo progetto sulla prima scheda.

4. Salva le versioni

Una versione è un’istantanea del tuo progetto. Se una modifica non ti piace, puoi tornare a una versione precedente. Al momento giusto chiedi all’assistente:

Salva una versione.

La prima volta l’assistente avvia una cronologia delle versioni per la cartella. I file che sembrano contenere segreti, come password o chiavi (anche le chiavi API di Google), non finiscono mai in una versione. L’assistente ti avvisa se salta qualcosa.

5. Metti il tuo progetto su GitHub

Su GitHub conservi il tuo progetto online. Così hai una copia di backup e puoi continuare a lavorarci su un altro computer.

Collegare GitHub

Ognuno collega il proprio account GitHub. Non hai ancora un account? Creane prima uno gratuito su github.com/signup.

1. Vai su Impostazioni e in Stato desktop cerca il pannello GitHub.
2. Fai clic su Collega GitHub. L’app mostra un codice e apre github.com/login/device nel browser.
3. Inserisci il codice su GitHub (con Copia codice lo copi) e concedi l’autorizzazione. Se la pagina non si è aperta, fai clic su Apri GitHub.
4. Il pannello ora mostra Collegato come @tuo-nome.

Cosa chiede GitHub. GitHub mostra l’app AI-School Desktop di HandiHow-B-V e chiede l’accesso ai tuoi repository (repo): lettura e scrittura, anche nei repository privati. Questo accesso serve per creare e aggiornare il tuo progetto. Concedilo solo se la pagina è su github.com.

Codice scaduto? Il codice vale circa 15 minuti. Se è scaduto, fai di nuovo clic su Collega GitHub.

Repository di un’organizzazione:

• Se l’organizzazione limita le app di terze parti, fai clic su Request (richiedi accesso) accanto all’organizzazione nella schermata di autorizzazione. Puoi farlo anche in seguito su github.com/settings/applications > AI-School Desktop.
• Un proprietario dell’organizzazione lo approva in Settings > Third-party access > OAuth application policy dell’organizzazione.
• Senza questa approvazione i tuoi repository funzionano, quelli dell’organizzazione no.

Usare un altro account? Fai clic su Scollega ed esci da github.com nel browser (oppure usa una finestra privata) prima di collegare di nuovo. Altrimenti GitHub usa l’account con cui hai già effettuato l’accesso.

nota

Le versioni precedenti dell’app mostrano «L’accesso con GitHub non è ancora disponibile in questa versione dell’app.» In tal caso aggiorna l’app.

Pubblicare online e aggiornare

Poi chiedi ad esempio:

Metti questo progetto su GitHub.

L’assistente mostra una scheda con l’indirizzo esatto e le etichette Integrato nell’app e Rete attiva. Fai clic su Esegui per continuare o su Rifiuta per fermarti. Un nuovo repository è privato, a meno che tu non ne chieda uno pubblico. Se l’indirizzo non è github.com o il repository diventa pubblico, la scheda ti avvisa. Quando pubblichi online, vedi quali file vengono inviati.

In seguito puoi usare ad esempio:

• "Pubblica online la nuova versione." L’assistente invia le tue nuove versioni a GitHub.
• "Recupera la versione più recente." L’assistente scarica le modifiche da GitHub.
• "Scarica il progetto https://github.com/nome/progetto in questa cartella." L’assistente scarica un progetto esistente.

Un progetto pubblico puoi scaricarlo anche senza collegamento. Per pubblicare online e creare un nuovo repository serve il collegamento.

6. Consigli per la sicurezza

• I nuovi repository sono privati. Rendine uno pubblico solo se tutti possono vedere il codice.
• Non inserire mai password, chiavi o altri segreti nella tua app.
• Usi una chiave API di Google (inizia con AIza, come la chiave web di un’app Firebase)? Mettila in un file che l’assistente tiene fuori dalle versioni, come .env. Se la chiave resta nel codice, quel file non viene pubblicato online.
• Controlla sempre l’indirizzo sulla scheda prima di fare clic su Esegui.
• Il collegamento viene salvato in forma crittografata nel tuo account utente su questo computer. L’assistente non vede mai la tua chiave GitHub. Se lavori su un computer condiviso, alla fine fai clic su Scollega.
• Scollega rimuove il collegamento solo da questo computer. Se vuoi revocare completamente l’accesso, fallo su GitHub in Settings > Applications.