Kaip sukurti programėlę su vibe coding: nuo idėjos iki publikuotos programėlės

Kad sukurtumėte programėlę su vibe coding, parašykite vieno puslapio pirmosios versijos aprašymą, perduokite jį AI programėlių kūrimo įrankiui kaip pirmąją užklausą, tada plėskite programėlę mažais išbandytais žingsniais: duomenys, prisijungimas, pagrindinė darbo eiga, poliravimas, saugumo peržiūra ir galiausiai publikavimas. Šis vadovas seka vieną pavyzdinį projektą, jogos studijos klasių rezervavimo programėlę, per visus etapus, su kiekviename žingsnyje naudotomis užklausomis.

Jei niekada taip nieko nekūrėte, mūsų vibe coding pamoka pradedantiesiems pradeda mažiau. Platesnei apžvalgai, nesusijusiai tik su vibe coding, žr. kaip sukurti programėlę su AI.

Projektas

Įsivaizduokite jogos studijos savininkę Sarą, kuri veda aštuonias klases per savaitę. Rezervacijos ateina per WhatsApp; ji laiko popierinį sąrašą kiekvienai klasei ir dažnai perpildo vietas. Ji nori:

• Studentai matytų savaitės tvarkaraštį ir rezervuotų vietą.
• Kiekviena klasė turėtų talpą.
• Ji turėtų sąrašą kiekvienai klasei, kurį galėtų patikrinti prie durų.
• Studentai galėtų atšaukti likus ne mažiau nei dviem valandoms.

Tai visa pirmoji versija. Jokių mokėjimų, narystių ar programėlių parduotuvės. Tai ateina vėliau arba niekada.

1 žingsnis: parašykite vieno puslapio specifikaciją

Prieš atidarydami bet kokį įrankį, paprastais žodžiais užsirašykite pirmąją versiją. Dešimt minučių čia sutaupo valandas derinimo. Naudinga forma:

• Kas naudoja: studentai (rezervuoja ir atšaukia), Sara (tvarko klases ir mato sąrašus).
• Ekranai: tvarkaraštis, klasės informacija, mano rezervacijos, administratoriaus klasės, administratoriaus klasės sąrašas.
• Duomenys: klasės (pavadinimas, mokytojas, pradžios laikas, trukmė, talpa), rezervacijos (studentas, klasė, būsena), studentai (vardas, el. paštas, telefonas).
• Taisyklės: nerezervuoti pilnos klasės; viena rezervacija vienam studentui vienai klasei; atšaukti likus ne mažiau nei dviem valandoms; administravimo puslapius mato tik Sara.
• Ne v1: mokėjimai, klasių paketai, laukiamųjų sąrašai, priminimai.

Sąrašas „Ne v1“ yra svarbiausias. Būtent jis padeda išlaikyti kūrimą įgyvendinamą. Mūsų vadovas kaip rašyti produkto reikalavimų dokumentą su AI eina toliau, jei norite išsamesnės specifikacijos.

2 žingsnis: pasirinkite įrankį, kuris tvarko visą ciklą

Programėlei su duomenų baze, prisijungimais ir viešu URL naudokite AI programėlių kūrimo įrankį, kuris vykdo kodą, prijungia duomenų bazę ir publikuoja, o ne pokalbio asistentą, kuris pateikia failus. Mūsų vibe coding įrankių palyginimas išvardija parinktis. Čia naudosime Mythex, nes jis apima kiekvieną žingsnį vienoje vietoje: pokalbį, gyvą peržiūrą, tikrą duomenų bazę ir failų saugyklą bei publikavimą vienu paspaudimu.

3 žingsnis: pirmoji užklausa

Paverskite specifikaciją į vieną pastraipą. Nekopijuokite visos dokumento su visomis detalėmis iš karto; pateikite esmę, o likusius dalykus pridėkite žingsniais.

Sukurkite klasių rezervavimo programėlę mano jogos studijai. Studentai registruojasi su vardu, el. paštu ir telefonu, mato šios savaitės tvarkaraštį ir rezervuoja vietą klasėje. Kiekviena klasė turi pavadinimą, mokytoją, pradžios laiką, trukmę ir talpą; pilna klasė rodo „Pilna“ ir negali būti rezervuota. Studentai mato savo rezervacijas ir gali atšaukti likus ne mažiau nei dviem valandoms iki klasės. Aš esu administratorius: galiu pridėti ir redaguoti klases bei matyti, kas užsiregistravęs į kiekvieną. Ramus, paprastas dizainas, gerai veikiantis telefonuose.

Jei nesate tikri, ar įrankis suprato, paprašykite pirmiausia plano. Mythex Plan režimas prieš rašydamas kodą išdėsto ekranus ir duomenis, o jūs juos patvirtinate.

4 žingsnis: pagrindinio ciklo veikimas

Pagrindinis ciklas yra vienintelis dalykas, dėl kurio programėlė egzistuoja: studentas rezervuoja klasę, o Sara ją mato. Testuokite tik tai:

1. Prisiregistruokite kaip studentas ir rezervuokite klasę.
2. Atidarykite administratoriaus vaizdą. Ar rezervacija ten yra?
3. Rezervuokite tą pačią klasę dar kartą. Turėtų atsisakyti.
4. Nustatykite klasės talpą 2, rezervuokite iš dviejų studentų paskyrų ir pabandykite trečią.

Na šiame etape dažniausiai iškyla dvi problemos. Tvarkaraštis rodo laikus serverio laiko juostoje, o ne studijos. Ir patikrinimas „Pilna“ vyksta tik puslapyje, todėl greitas dvigubas paspaudimas sukuria dvi rezervacijas.

Rodykite visus klasių laikus studijos laiko juostoje, [Asia/Dubai], nepriklausomai nuo to, kaip nustatytas lankytojo įrenginys.

Tikrinkite talpą ir dublikuotas rezervacijas serveryje sukuriant rezervaciją, o ne tik puslapyje. Jei du užklausos ateina kartu dėl paskutinės vietos, turi pavykti tik viena.

Prieš pridėdami bet ką kita, ištaisykite pagrindinį ciklą. Viskas kita nuo jo priklauso.

5 žingsnis: pridėkite likusias taisykles, po vieną žinutėje

Dabar pereikite specifikacijos taisykles po vieną:

Studentai gali atšaukti rezervaciją likus ne mažiau nei dviem valandoms iki klasės pradžios. Po to paslėpkite atšaukimo mygtuką ir serveryje atmeskite atšaukimą su aiškiu pranešimu.

Tik mano paskyra gali atidaryti administratoriaus puslapius. Įsitikinkite, kad tai tikrinama serveryje kiekvienam administratoriaus veiksmui, o ne tik paslepiant meniu.

Po kiekvieno testuokite ir pereikite prie kito tik tada, kai veikia. Jei pakeitimas ką nors sugadina, grįžkite prie paskutinio gero kontrolinio taško ir pabandykite aiškesnę užklausą, o ne krauti pataisymus vieną ant kito.

6 žingsnis: pagerinkite tai, ką pastebės tikri vartotojai

Tikri vartotojai pastebi smulkmenas. Trumpas sąrašas Sarai programėlei:

• Tuščios būsenos: „Šią savaitę klasių dar nėra“, o ne tuščias puslapis.
• Patvirtinimas: „Jūs užsiregistravote į Vinyasa, antradienį 18:00“ po rezervacijos.
• Telefono išdėstymas: dideli mygtukai, tvarkaraštis įskaitomas 375 px ekrane.
• Likusios vietos: „Liko 3 vietos“ kiekvienoje klasės kortelėje, kad studentai rezervuotų greičiau.

Kiekvienoje klasės kortelėje rodykite likusias vietas, pvz., „Liko 3 iš 12“. Po rezervacijos rodykite patvirtinimą su klasės pavadinimu, diena ir laiku bei mygtuku į mano rezervacijas.

7 žingsnis: testuokite kaip nepažįstamasis

Prieš leisdami kam nors kitam naudoti, skirkite pusvalandį bandydami ją sulaužyti:

Taip pat galite paprašyti DI praeiti per ribinius atvejus:

Išvardykite dešimt dalykų, kuriuos tikras studentas galėtų padaryti ir kurie galėtų sugadinti rezervavimą ar atšaukimą, išbandykite kiekvieną ir ištaisykite tai, kas nepavyksta. Pasakykite, ką pakeitėte.

8 žingsnis: saugumo peržiūra

Ši programėlė saugo vardus, el. paštus ir telefono numerius, todėl trumpa saugumo peržiūra verta. Pagrindiniai klausimai:

• Ar vienas studentas gali matyti kito rezervacijas ar kontaktinius duomenis?
• Ar naršyklėje veikiančiame kode yra raktų ar slaptažodžių?
• Ar registracijos forma apsaugota nuo robotų?
• Ar yra duomenų atsarginė kopija?

Mūsų puslapis apie ar vibe coding saugus paaiškina kiekvieną patikrinimą ir pateikia jiems užklausas, o saugumo kontrolinis sąrašas AI kurtoms programėlėms yra ilgoji versija.

9 žingsnis: publikuokite

Kai pagrindinis ciklas, taisyklės ir patikrinimai praeina, publikuokite. Mythex tai vienas paspaudimas, o programėlė gauna viešą URL su jau paruoštu duomenų baze ir talpinimu. „Pro“ planu galite prijungti savo domeną, pavyzdžiui, book.sarasyoga.com; žr. kaip prijungti pasirinktinį domeną.

Prieš siųsdami nuorodą, dar kartą patikrinkite publikuotą versiją. Rezervuokite klasę iš telefono. Gamyba ir peržiūra turėtų veikti vienodai, bet patikrinkite.

10 žingsnis: pirmieji vartotojai ir kita versija

Pirmiausia nuorodą duokite penkiems reguliariems studentams, o ne visiems. Paprašykite, kad per ją rezervuotų kitą klasę ir papasakotų, kas buvo painu. Tada ištaisykite tris dalykus, kuriuos jie pamini pirmiausia.

Po kelių savaičių realaus naudojimo v2 sąrašas tokiai programėlei paprastai susidaro pats: laukiamųjų sąrašas pilnoms klasėms, el. laiško priminimai vakarą prieš, ir klasių paketai, apmokami internetu. Kiekvienas jų gauna tą patį požiūrį: aprašykite keliomis eilutėmis, paprašykite užklausos, išbandykite, publikuokite. Mokėjimų pridėjimui žr. kaip pridėti mokėjimus prie programėlės. Apie žinios skleidimą – kaip paleisti programėlę ir pritraukti pirmuosius vartotojus.

Pavertimas telefono programėle

Daugelis studijų nori piktogramos ant studentų telefonų. Mythex Pro planu publikuota programėlė gali tapti Android programėle (failu, kurį galite įkelti į Google Play) ir iPhone programėle, išsiųsta į TestFlight naudojant jūsų App Store Connect raktą, be Mac kompiuterio. Telefono programėlė atidaro publikuotą žiniatinklio programėlę, todėl kiekvieną kartą publikavus atnaujinimą, jį turi ir telefono programėlė.

Ką iš to pasiimti

Pats kūrimas buvo trumpoji dalis. Tai, kas padarė programėlę naudingą, buvo specifikacijos sąrašas „ne v1“, pagrindinio ciklo testavimas prieš bet ką kita, serverio pusės taisyklės talpai ir prieigai bei penki tikri vartotojai prieš penkiasdešimt. Štai kaip atrodo vibe coding, kai programėlė turi veikti kitiems žmonėms.

Pasiruošę išbandyti savo? Parašykite vieno puslapio specifikaciją, tada įklijuokite pirmąją pastraipą į AI programėlių kūrimo įrankį. Jei norite pamatyti daugiau programėlių tipų ir užklausas, už jų, skaitykite mūsų vibe coding pavyzdžius.

Klausimai