Cum să construiești o aplicație cu vibe coding: de la idee la aplicația publicată

Ca să construiești o aplicație cu vibe coding, scrii o descriere de o pagină a primei versiuni, o dai unui constructor de aplicații cu AI ca prim prompt, apoi faci aplicația să crească în pași mici, testați: date, login, fluxul principal de lucru, finisaj, o verificare de securitate și, la final, publicarea. Acest ghid urmărește un proiect exemplu, o aplicație de rezervări la clase pentru un mic studio de yoga, prin fiecare etapă, cu prompturile folosite la fiecare pas.

Dacă nu ai construit niciodată ceva în acest fel, tutorialul de vibe coding pentru începători pornește mai mic. Pentru o imagine de ansamblu care nu se limitează la vibe coding, vezi cum să construiești o aplicație cu AI.

Proiectul

Imagină-ți o proprietară de studio de yoga, Sara, care ține opt clase pe săptămână. Rezervările vin pe WhatsApp; ea ține o listă de hârtie pentru fiecare clasă și adesea suprarezervă. Ea își dorește:

• Ca studenții să vadă orarul săptămânii și să-și rezerve un loc.
• Ca fiecare clasă să aibă o capacitate.
• O listă per clasă pe care o poate verifica la ușă.
• Ca studenții să poată anula cu cel mult două ore înainte.

Asta este întreaga primă versiune. Fără plăți, fără abonamente, fără store de aplicații. Acestea vin mai târziu sau niciodată.

Pasul 1: Scrie o specificație de o pagină

Înainte să deschizi vreun instrument, scrie prima versiune în cuvinte simple. Zece minute aici economisesc ore de discuții. O formă utilă:

• Cine o folosește: studenții (rezervă și anulează), Sara (gestionează clasele, vede listele).
• Ecrane: orar, detaliile clasei, rezervările mele, clase admin, lista clasei admin.
• Date: clase (nume, profesor, ora de start, durată, capacitate), rezervări (student, clasă, stare), studenți (nume, e-mail, telefon).
• Reguli: nu rezervi o clasă plină; o rezervare per student per clasă; anulare cu cel mult două ore înainte; doar Sara vede paginile de admin.
• Nu în v1: plăți, pachete de clase, liste de așteptare, memento-uri.

Lista „nu în v1” contează cel mai mult. Ea este cea care face ca proiectul să poată fi terminat. Ghidul nostru despre cum să scrii un document de cerințe de produs cu AI merge mai departe, dacă vrei o specificație mai completă.

Pasul 2: Alege un instrument care acoperă tot ciclul

Pentru o aplicație cu bază de date, login și un URL public, folosește un constructor de aplicații cu AI care rulează codul, atașează o bază de date și publică, nu un asistent de chat care îți dă fișiere. Comparația noastră a instrumentelor de vibe coding enumeră opțiunile. Aici folosim Mythex, pentru că acoperă fiecare pas într-un singur loc: chat, previzualizare live, o bază de date reală și stocare de fișiere și publicare dintr-un clic.

Pasul 3: Primul prompt

Transformă specificația într-un paragraf. Nu lipi tot documentul deodată cu toate detaliile; dă nucleul și adaugă restul pe etape.

Construiește o aplicație de rezervări la clase pentru studioul meu de yoga. Studenții se înregistrează cu nume, e-mail și telefon, văd orarul săptămânii și își rezervă un loc la o clasă. Fiecare clasă are un nume, un profesor, o oră de start, o durată și o capacitate; o clasă plină afișează „Completă” și nu se poate rezerva. Studenții își văd rezervările și pot anula cu cel mult două ore înainte de clasă. Eu sunt administratorul: pot adăuga și edita clase și pot vedea lista celor care s-au înscris la fiecare. Design calm și simplu, care funcționează bine pe telefoane.

Dacă nu ești sigur că instrumentul a înțeles, cere mai întâi un plan. În Mythex, modul Plan așază ecranele și datele înainte să scrie cod, iar tu le aprobi.

Pasul 4: Fă să funcționeze bucla de bază

Bucla de bază este lucrul pentru care există aplicația: un student rezervă o clasă, iar Sara o vede. Testează doar asta:

1. Înregistrează-te ca student, rezervă o clasă.
2. Deschide vederea de admin. Este rezervarea acolo?
3. Rezervă aceeași clasă din nou. Ar trebui să refuze.
4. Setează capacitatea unei clase la 2, rezervă-o din două conturi de student, încearcă a treia.

În acest punct apar de obicei două probleme. Orarul afișează orele în fusul orar al serverului, nu al studioului. Iar verificarea „Completă” se face doar în pagină, deci un dublu-clic rapid creează două rezervări.

Afișează toate orele claselor în fusul orar al studioului, [Asia/Dubai], indiferent cum este setat dispozitivul vizitatorului.

Verifică capacitatea și rezervările duplicate pe server, când se creează o rezervare, nu doar în pagină. Dacă două cereri sosesc simultan pentru ultimul loc, doar una ar trebui să reușească.

Repară bucla de bază înainte să adaugi orice altceva. Totul depinde de ea.

Pasul 5: Adaugă regulile rămase, câte una pe mesaj

Acum parcurge regulile din specificație, una câte una:

Studenții pot anula o rezervare cu cel mult două ore înainte de începerea clasei. După aceea, ascunde butonul de anulare și refuză anularea pe server, cu un mesaj clar.

Doar contul meu poate deschide paginile de admin. Asigură-te că acest lucru este verificat pe server pentru fiecare acțiune de admin, nu doar prin ascunderea meniului.

După fiecare, testează și treci mai departe doar când funcționează. Dacă o modificare strică ceva, revino la ultimul punct de control bun și încearcă o cerere mai clară, în loc să adaugi corecturi peste corecturi.

Pasul 6: Finisează ce vor observa utilizatorii reali

Utilizatorii reali observă lucruri mici. O listă scurtă pentru aplicația Sarei:

• Stări goale: „Nu există încă clase în această săptămână” în loc de o pagină goală.
• Confirmare: „Ești rezervat pentru Vinyasa, marți la 18:00” după rezervare.
• Aspect pe telefon: butoane mari, orarul lizibil pe un ecran de 375 px.
• Locuri rămase: „3 locuri rămase” pe fiecare card de clasă, ca studenții să rezerve mai repede.

Pe fiecare card de clasă arată locurile rămase, de exemplu „3 din 12 rămase”. După rezervare, arată o confirmare cu numele clasei, ziua și ora și un buton către rezervările mele.

Pasul 7: Testează ca un străin

Înainte ca altcineva să o folosească, petrece o jumătate de oră încercând s-o strici:

Poți cere și AI-ului să parcurgă cazuri limită:

Listează zece lucruri pe care le-ar putea face un student real și care ar putea strica rezervarea sau anularea, testează fiecare și repară ce pică. Spune-mi ce ai schimbat.

Pasul 8: O verificare de securitate

Această aplicație stochează nume, e-mailuri și numere de telefon, deci o verificare scurtă de securitate merită. Întrebările principale:

• Poate un student să vadă rezervările sau datele de contact ale altui student?
• Există chei sau parole în codul care rulează în browser?
• Este formularul de înregistrare protejat împotriva botilor?
• Există o copie de rezervă a datelor?

Pagina noastră despre dacă vibe coding-ul este sigur explică fiecare verificare și oferă prompturi pentru ele, iar lista de verificare de securitate pentru aplicațiile construite cu AI este versiunea lungă.

Pasul 9: Publică

Când bucla de bază, regulile și verificările trec, publică. Pe Mythex este un singur clic, iar aplicația primește un URL public cu baza de date și găzduirea deja configurate. Pe Pro poți conecta propriul domeniu, de exemplu book.sarasyoga.com; vezi cum să conectezi un domeniu personalizat.

Înainte să trimiți linkul, verifică încă o dată versiunea publicată. Rezervă o clasă de pe telefon. Producția și previzualizarea ar trebui să se comporte la fel, dar confirmă.

Pasul 10: Primii utilizatori și versiunea următoare

Dă linkul mai întâi la cinci studenți obișnuiți, nu la toți. Roagă-i să-și rezerve următoarea clasă prin el și să-ți spună ce a fost confuz. Apoi repară primele trei lucruri pe care le menționează.

După câteva săptămâni de utilizare reală, o listă v2 pentru o aplicație ca asta se scrie aproape singură: o listă de așteptare pentru clasele pline, memento-uri pe e-mail în seara dinaintea clasei și pachete de clase plătite online. Fiecare primește același tratament: o specificație în câteva rânduri, un prompt, un test, publicare. Pentru adăugarea plăților, vezi cum să adaugi plăți în aplicația ta. Pentru a face cunoscută aplicația, cum să lansezi o aplicație și să obții primii utilizatori.

Transformarea într-o aplicație pentru telefon

Multe studiouri vor o iconiță pe telefoanele studenților. Pe Mythex Pro, aplicația publicată poate deveni o aplicație Android (un fișier pe care îl poți încărca în Google Play) și o aplicație pentru iPhone trimisă în TestFlight cu propria cheie App Store Connect, fără Mac. Aplicația de telefon deschide aplicația web publicată, deci de fiecare dată când publici o actualizare, aplicația de telefon o primește și ea.

Ce să iei de aici

Construcția în sine a fost partea scurtă. Ce a făcut aplicația utilizabilă a fost lista „nu în v1” din specificație, testarea buclei de bază înainte de orice altceva, regulile de capacitate și acces aplicate pe server și cinci utilizatori reali înainte de cincizeci. Asta arată vibe coding-ul atunci când aplicația trebuie să funcționeze pentru alți oameni.

Ești gata să încerci pe a ta? Scrie specificația de o pagină, apoi lipește primul paragraf în constructorul de aplicații cu AI. Dacă vrei să vezi mai multe tipuri de aplicații și prompturile din spatele lor, citește exemplele de vibe coding.

Întrebări