Come creare un'app con il vibe coding: dall'idea all'app pubblicata

Per creare un'app con il vibe coding, scrivi una descrizione di una pagina della prima versione, dai questa descrizione a un app builder con AI come primo prompt, poi fai crescere l'app in piccoli passi testati: dati, login, il flusso di lavoro principale, rifiniture, una revisione di sicurezza e infine la pubblicazione. Questa guida segue un progetto d'esempio, un'app di prenotazione delle lezioni per un piccolo studio di yoga, in ogni fase, con i prompt usati a ogni passaggio.

Se non hai mai costruito nulla in questo modo, la nostra guida al vibe coding per principianti parte da un livello più semplice. Per una panoramica più ampia non legata al vibe coding, vedi come creare un'app con l'AI.

Il progetto

Immagina Sara, la proprietaria di uno studio di yoga, che organizza otto lezioni a settimana. Le prenotazioni arrivano via WhatsApp; lei tiene un elenco cartaceo per ogni lezione e spesso fa overbooking. Vuole che:

• Gli allievi vedano il calendario della settimana e prenotino un posto.
• Ogni lezione abbia una capienza massima.
• Lei abbia un elenco per ogni lezione da controllare all'ingresso.
• Gli allievi possano cancellarsi fino a due ore prima.

Questa è l'intera prima versione. Niente pagamenti, niente abbonamenti, niente app store. Quelli arrivano dopo, o mai.

Passo 1: scrivi una specifica di una pagina

Prima di aprire qualsiasi strumento, scrivi la prima versione in parole semplici. Dieci minuti qui fanno risparmiare ore di botta e risposta. Una struttura utile:

• Chi la usa: gli allievi (prenotano e cancellano), Sara (gestisce le lezioni e vede gli elenchi).
• Schermate: calendario, dettaglio lezione, le mie prenotazioni, admin lezioni, admin elenco lezione.
• Dati: lezioni (nome, insegnante, orario di inizio, durata, capienza), prenotazioni (allievo, lezione, stato), allievi (nome, email, telefono).
• Regole: nessuna prenotazione per una lezione al completo; una sola prenotazione per allievo per lezione; cancellazione fino a due ore prima; solo Sara vede le pagine admin.
• Non nella v1: pagamenti, pacchetti di lezioni, liste d'attesa, promemoria.

La lista « non nella v1 » è la parte più importante. È ciò che rende il progetto realizzabile. La nostra guida su come scrivere un documento dei requisiti di prodotto con l'AI va oltre, se vuoi una specifica più completa.

Passo 2: scegli uno strumento che copra l'intero ciclo

Per un'app con database, login e un URL pubblico, usa un app builder con AI che esegue il codice, collega un database e pubblica, invece di un assistente di chat che ti consegna dei file. Il nostro confronto degli strumenti di vibe coding elenca le opzioni. Qui useremo Mythex perché copre ogni passaggio in un unico posto: chat, anteprima dal vivo, un database e archiviazione di file reali, e la pubblicazione con un clic.

Passo 3: il primo prompt

Trasforma la specifica in un paragrafo. Non incollare tutto il documento con ogni dettaglio in una volta; dai il nucleo e aggiungi il resto a passi.

Crea un'app per prenotare le lezioni del mio studio di yoga. Gli allievi si registrano con nome, email e telefono, vedono il calendario di questa settimana e prenotano un posto in una lezione. Ogni lezione ha un nome, un insegnante, un orario di inizio, una durata e una capienza; una lezione al completo mostra « Completa » e non può essere prenotata. Gli allievi vedono le proprie prenotazioni e possono cancellarle fino a due ore prima della lezione. Io sono l'admin: posso aggiungere e modificare le lezioni e vedere l'elenco di chi è prenotato per ciascuna. Design calmo e semplice che funzioni bene sul telefono.

Se non sei sicuro che lo strumento abbia capito, chiedi prima un piano. In Mythex, la modalità Plan definisce schermate e dati prima di scrivere il codice, e tu lo approvi.

Passo 4: fai funzionare il ciclo base

Il ciclo base è l'unica cosa per cui l'app esiste: un allievo prenota una lezione, e Sara la vede. Testa solo questo:

1. Registrati come allievo e prenota una lezione.
2. Apri la vista admin. La prenotazione c'è?
3. Prenota di nuovo la stessa lezione. Dovrebbe rifiutare.
4. Imposta la capienza di una lezione a 2, prenota da due account allievo, poi prova un terzo.

In questa fase di solito emergono due problemi. Il calendario mostra gli orari nel fuso orario del server, non quello dello studio. E il controllo « Completa » avviene solo nella pagina, quindi un doppio clic veloce crea due prenotazioni.

Mostra tutti gli orari delle lezioni nel fuso orario dello studio, [Asia/Dubai], indipendentemente dall'impostazione del dispositivo del visitatore.

Verifica capienza e prenotazioni duplicate sul server quando viene creata una prenotazione, non solo nella pagina. Se due richieste arrivano insieme per l'ultimo posto, una sola deve riuscire.

Sistema il ciclo base prima di aggiungere altro. Tutto il resto dipende da lui.

Passo 5: aggiungi le regole rimanenti, una per messaggio

Ora passa in rassegna le regole della specifica una alla volta:

Gli allievi possono cancellare una prenotazione fino a due ore prima dell'inizio della lezione. Dopo quel termine, nascondi il pulsante di cancellazione e rifiuta la cancellazione sul server con un messaggio chiaro.

Solo il mio account può aprire le pagine admin. Assicurati che questo venga verificato sul server per ogni azione admin, non solo nascondendo il menu.

Dopo ciascuna, testala e passa alla successiva solo quando funziona. Se una modifica rompe qualcosa, torna all'ultimo checkpoint funzionante e prova una richiesta più chiara invece di accumulare correzioni sopra.

Passo 6: rifinisci ciò che gli utenti reali noteranno

Gli utenti reali notano le piccole cose. Un breve elenco per l'app di Sara:

• Stati vuoti: « Nessuna lezione in programma questa settimana » invece di una pagina bianca.
• Conferma: « Sei prenotata per Vinyasa, martedì alle 18:00 » dopo la prenotazione.
• Layout per telefono: pulsanti grandi, calendario leggibile su uno schermo da 375 px.
• Posti rimasti: « 3 posti liberi » su ogni scheda lezione, così gli allievi prenotano prima.

Su ogni scheda lezione mostra i posti rimasti, ad esempio « 3 su 12 liberi ». Dopo la prenotazione, mostra una conferma con nome della lezione, giorno e orario e un pulsante per andare alle mie prenotazioni.

Passo 7: testa come farebbe un estraneo

Prima che lo usi qualcun altro, dedica mezz'ora a provare a romperlo:

Puoi anche chiedere all'AI di passare in rassegna i casi limite:

Elenca dieci cose che un allievo reale potrebbe fare e che potrebbero rompere la prenotazione o la cancellazione, testa ciascuna e correggi ciò che fallisce. Dimmi cosa hai cambiato.

Passo 8: una revisione di sicurezza

Questa app memorizza nomi, email e numeri di telefono, quindi una breve revisione di sicurezza vale la pena. Le domande principali:

• Un allievo può vedere le prenotazioni o i dati di contatto di un altro?
• Ci sono chiavi o password nel codice che gira nel browser?
• Il modulo di registrazione è protetto contro i bot?
• Esiste un backup dei dati?

La nostra pagina su se il vibe coding è sicuro spiega ciascun controllo e fornisce prompt per farli, e la checklist di sicurezza per app costruite con AI è la versione completa.

Passo 9: pubblica

Quando il ciclo base, le regole e i controlli passano, pubblica. Su Mythex è un clic: l'app riceve un URL pubblico con database e hosting già pronti. Con Pro puoi collegare un tuo dominio, come book.sarasyoga.com; vedi come collegare un dominio personalizzato.

Prima di inviare il link, controlla ancora una volta la versione pubblicata. Prenota una lezione dal telefono. Produzione e anteprima dovrebbero comportarsi allo stesso modo, ma verificalo.

Passo 10: primi utenti e la versione successiva

Invia il link prima a cinque allievi abituali, non a tutti. Chiedi loro di prenotare la prossima lezione tramite l'app e di dirti cosa non era chiaro. Poi correggi le prime tre cose che segnalano.

Dopo alcune settimane di uso reale, una lista v2 per un'app come questa si scrive quasi da sola: una lista d'attesa per le lezioni al completo, promemoria via email la sera prima e pacchetti di lezioni pagabili online. Ognuna segue lo stesso schema: specificala in poche righe, scrivi il prompt, testala, pubblica. Per aggiungere i pagamenti, vedi come aggiungere pagamenti alla tua app. Per farla conoscere, come lanciare un'app e ottenere i primi utenti.

Trasformarla in un'app per telefono

Molti studi vogliono un'icona sul telefono dei propri allievi. Con Mythex Pro, l'app pubblicata può diventare un'app Android (un file da caricare su Google Play) e un'app per iPhone inviata a TestFlight con la tua chiave di App Store Connect, senza un Mac. L'app per telefono apre l'app web pubblicata, quindi ogni volta che pubblichi un aggiornamento, anche l'app per telefono lo riceve.

Cosa portarsi a casa

La costruzione in sé è stata la parte breve. Ciò che ha reso l'app utilizzabile è stata la lista « non nella v1 » della specifica, il test del ciclo base prima di qualsiasi altra cosa, le regole di capienza e accesso applicate sul server, e cinque utenti reali prima di cinquanta. È questo che significa il vibe coding quando l'app deve funzionare per altre persone.

Pronto a provarci con la tua? Scrivi la tua specifica di una pagina, poi incolla il primo paragrafo nel builder AI. Se vuoi vedere altri tipi di app e i prompt che li hanno generati, leggi i nostri esempi di vibe coding.

Domande