Vibe coding pavyzdžiai: 10 tikrų programėlių tipų, užklausos ir kas nutiko

Dažniausi vibe coding pavyzdžiai – nedidelės, naudingos žiniatinklio programėlės: sekikliai, rezervavimo puslapiai, vidiniai įrankiai, kliento portalai, nukreipimo puslapiai, viktorinos, skydeliai ir paprastos DI priemonės. Žemiau pateikiama dešimt jų. Kiekviename matysite, kas ją kuria, pirmąją užklausą, kas paprastai nutinka ir tolesnę užklausą, kuri tai ištaiso.

Tai sudėtiniai projektai, kuriuos žmonės dažniausiai atneša į DI programėlių kūrėjus, o ne vieno žmogaus atvejo analizės. Užklausos nukopijuojamos. Klaidos – tos, kurios kartojasi, todėl būtent jos naudingiausios. Jei pats vibe coding dar naujas, pradėkite nuo kas yra vibe coding.

1. Asmeninis biudžeto sekiklis

Kas kuria: asmenys, kurie bandė skaičiuokles ir atsisakė.

Pirmoji užklausa:

Sukurk mėnesio biudžeto sekiklį. Pridedu išlaidas su suma, kategorija (maistas, nuoma, transportas, pramogos, kita), data ir pastaba. Parodyk šio mėnesio sumą pagal kategorijas kaip stulpelinę diagramą ir naujausių išlaidų sąrašą. Galiu nustatyti biudžetą kiekvienai kategorijai ir matyti, kiek liko.

Kas nutiko: diagramoje buvo skaičiuojamos visos kada nors įvestos išlaidos, o ne tik šio mėnesio, todėl antrą mėnesį visos kategorijos atrodė viršytos. Be to, sumos, įvestos su kableliu („1,200“), buvo išsaugomos kaip 1.

Taisymo užklausa:

Diagramoje ir sumose turi būti tik pasirinkto mėnesio išlaidos. Viršuje pridėk mėnesio pasirinkėją, pagal nutylėjimą rodantį einamąjį mėnesį. Taip pat priimk sumas, įvestas su kableliais ar tarpais, ir saugok jas kaip skaičius.

Pamoka: „šis mėnesis“ yra taisyklė. Pasakykite taisykles garsiai.

2. Rezervavimo puslapis nedideliam grožio salonui

Kas kuria: smulkaus verslo savininkai, pavargę rezervuoti telefonu ir žinutėmis.

Pirmoji užklausa:

Sukurk mano salono rezervavimo puslapį. Klientai pasirenka paslaugą, datą ir laisvą laiką, tada įveda vardą ir telefoną. Turiu privatų administravimo puslapį, už prisijungimo, kuris rodo rezervacijas pagal dienas.

Kas nutiko: du klientai per minutę užsirezervavo tą patį 10:00 laiką, nes puslapis laisvumą tikrino tik pirmą kartą įkeliant. 90 minučių dažymo rezervacija taip pat neužblokavo vėlesnių laikų.

Taisymo užklausa:

Kai klientas pateikia rezervaciją, serveryje patikrink, ar visi laikai, kuriuos ji apima, vis dar laisvi, ir jei ne – atmesk su pranešimu „Tas laikas ką tik buvo užimtas“. Paslauga užblokuoja visą savo trukmę, todėl 90 minučių rezervacija 10:00 užblokuoja 10:00, 10:30 ir 11:00.

Pamoka: viskas, ką du žmonės gali daryti vienu metu, reikalauja patikrinimo serveryje. Pilną versiją rasite kaip sukurti rezervavimo programėlę.

3. Restorano meniu su QR kodu

Kas kuria: kavinių ir restoranų savininkai, kurie per dažnai perspausdina meniu.

Pirmoji užklausa:

Sukurk mobilų meniu svetainę mano kavinei. Skyriai: pusryčiai, pietūs, gėrimai ir desertai; kiekvienas patiekalas su pavadinimu, kaina, trumpu aprašymu ir mitybos žymomis (veganiška, be glitimo). Man reikia administravimo puslapio patiekalams redaguoti ir pažymėti kaip išparduotus. Parodyk QR kodą, kurį galiu atspausdinti ir kuris veda į meniu.

Kas nutiko: nieko nesugedo, bet meniu lėtai veikė kavinės Wi-Fi, nes kiekvienam patiekalui buvo įkeliamos pilno dydžio telefono nuotraukos.

Taisymo užklausa:

Meniu nuotraukos per sunkios. Įkeltas nuotraukas sumažink iki ne daugiau kaip 800 px pločio, suspausk ir įkelk tingiai, kai lankytojas slenka.

Pamoka: testuokite lėtu ryšiu, o ne tik biure.

4. Įrangos ar atsargų sekiklis komandai

Kas kuria: operacijų darbuotojai, keičiantys bendrą skaičiuoklę.

Pirmoji užklausa:

Sukurk inventoriaus įrankį mūsų sandėlio komandai. Daiktai turi pavadinimą, SKU, kiekį, vietą ir minimalų lygį. Darbuotojai prisijungia, gali pridėti atsargų, nurodydami priežastį pašalinti atsargas, ir mato sąrašą daiktų, kurių yra mažiau nei minimumas, paryškintą raudonai. Saugok kiekvieno pakeitimo istoriją ir kas jį padarė.

Kas nutiko: istorijoje rodomas „naudotojas 3“ vietoj vardų, o pašalinus daugiau atsargų, nei yra, kiekis tapo neigiamas.

Taisymo užklausa:

Istorijoje rodyk asmens vardą, o ne ID. Neleisk pašalinti tiek, kad kiekis nukristų žemiau nulio; vietoj to rodyk „Liko tik 4“.

Pamoka: aprašykite, ko neturi būti galima padaryti, o ne tik ką galima. Mūsų vadovas kaip sukurti inventoriaus programėlę nagrinėja likusius dalykus.

5. Kliento portalas laisvai samdomam specialistui ar studijai

Kas kuria: dizaineriai, buhalteriai, konsultantai ir agentūros.

Pirmoji užklausa:

Sukurk kliento portalą. Klientus kviečiu el. paštu. Kiekvienas klientas prisijungia ir mato tik savo projektus, failus ir sąskaitas bei gali palikti komentarus. Aš prisijungiu kaip administratorius ir matau viską.

Kas nutiko: tai svarbiausia šio sąrašo klaida. Puslapiuose kiekvienas klientas matė tik savo projektus, bet serveris grąžindavo bet kurį projektą, jei pakeitėte numerį adresų juostoje. Naršant kaip vienam klientui to niekada nepastebėjote.

Taisymo užklausa:

Patikrink kiekvieną serverio maršrutą, grąžinantį projektus, failus, komentarus ar sąskaitas. Kiekvienas jų turi patvirtinti, kad prisijungęs klientas yra įrašo savininkas, ir kitaip grąžinti „nerasta“. Tada patikrink: prisijunk kaip klientas A ir pabandyk atidaryti kliento B projektą pagal jo ID.

Pamoka: kažko paslėpimas ekrane nėra tas pats, kas apsaugojimas. Daugiau šia tema – ar vibe coding saugu?.

6. Nukreipimo puslapis su laukiamųjų sąrašu

Kas kuria: steigėjai, testuojantys idėją prieš ją kurdami.

Pirmoji užklausa:

Sukurk nukreipimo puslapį programėlei, kuri padeda korepetitoriams planuoti pamokas ir priimti mokėjimus. Pagrindinis antraštė, paantraštė, el. pašto registracija, trys privalumai, skyrius „kaip tai veikia“ ir DUK. Įrašyk registracijas į duomenų bazę su data ir leisk jas atsisiųsti kaip CSV iš privataus puslapio.

Kas nutiko: per kelias dienas sąrašą užpildė šlamštas iš botų, o puslapyje nebuvo pavadinimo ir aprašymo, todėl bendrinamos nuorodos rodė tuščią peržiūrą.

Taisymo užklausa:

Pridėk paprastą apsaugą nuo botų registracijos formai (paslėptą lauką ir ribą 5 registracijos iš vieno IP per valandą). Pridėk puslapio pavadinimą, meta aprašymą ir socialinio tinklo bendrinimo paveikslėlį.

Pamoka: viešą formą kas nors pastebės. Žr. kaip sukurti laukiamųjų sąrašo puslapį.

7. Viktorinos programėlė mokytojui

Kas kuria: mokytojai ir treneriai, norintys kažko lengvesnio nei MVS.

Pirmoji užklausa:

Sukurk viktorinos programėlę mano klasei. Kuriu viktorinas su pasirinkimo klausimais, kiekvienas su vienu teisingu atsakymu. Mokiniai prisijungia su kodu ir savo vardu, atsako į klausimus ir pabaigoje mato savo rezultatą. Aš matau kiekvienos viktorinos rezultatų lentelę.

Kas nutiko: teisingi atsakymai buvo siunčiami naršyklei kartu su klausimais, todėl smalsus mokinis galėjo juos perskaityti puslapio šaltinio kode. Mokiniai taip pat galėjo pateikti iš naujo, kol pasiekdavo 100%.

Taisymo užklausa:

Neštaisyk teisingų atsakymų į naršyklę. Tikrink atsakymus serveryje po pateikimo. Leisk vieną pateikimą vienam mokinio vardui kiekvienai viktorinai ir parodyk mokytojui, jei kas nors bando dar kartą.

Pamoka: naršyklė priklauso naudotojui. Ten esantį dalyką galima perskaityti.

8. Maža DI priemonė

Kas kuria: rinkodaros specialistai, rašytojai ir steigėjai, norintys turėti sutelktą DI pagalbininką.

Pirmoji užklausa:

Sukurk įrankį, kuris paverčia produkto aprašymą penkiais socialinių tinklų įrašais skirtingais tonais (draugiškas, ekspertiškas, žaismingas, trumpas, ilgas). Naudok DI API. Įklijuoju aprašymą, pasirenku platformą ir gaunu įrašus su kopijavimo mygtukais.

Kas nutiko: pirmoji versija tiesiogiai iš naršyklės kvietė DI paslaugą su API raktu puslapyje, kur kiekvienas galėjo jį nukopijuoti ir padidinti sąskaitą.

Taisymo užklausa:

Perkelk DI iškvietimą į serverį. API raktą saugok kaip paslaptį, niekada frontend kode. Apriboju kiekvieną lankytoją 20 generavimų per dieną.

Pamoka: raktai priklauso serverio paslaptims. Žr. kaip saugiai laikyti API raktus ir kaip pridėti DI funkcijas į programėlę.

9. Arabų ir anglų kalbų verslo svetainė

Kas kuria: įmonės Persijos įlankos regione ir platesniame arabų pasaulyje, aptarnaujančios dviem kalbomis.

Pirmoji užklausa:

Sukurk svetainę mano interjero dizaino įmonei arabų ir anglų kalbomis su kalbos perjungikliu. Puslapiai: pagrindinis, paslaugos, portfelis, apie mus ir kontaktai. Arabų kalba turi būti visiškai iš dešinės į kairę.

Kas nutiko: arabiškas tekstas buvo lygiuojamas į dešinę, bet išdėstymas nebuvo veidrodinis: rodyklės vis dar rodė ne ta kryptimi, o meniu buvo ne toje pusėje. Kai kur telefono numeriai taip pat buvo rodomi atvirkščiai.

Taisymo užklausa:

Arabų kalba veidrodiškai pakeisk visą išdėstymą: nustatyk puslapio kryptį iš dešinės į kairę, meniu perkelk į dešinę, pakreipk krypties ikonas ir palik telefono numerius bei el. paštus kairėn į dešinę arabiško teksto viduje.

Pamoka: iš dešinės į kairę yra išdėstymas, o ne lygiavimas. Mythex palaiko arabų ir kitus iš dešinės į kairę išdėstymus, o užklausas galite rašyti tiesiogiai arabiškai.

10. Sekiklis, virstantis telefono programėle

Kas kuria: treneriai, sporto klubai ir bendruomenių grupės, kurių naudotojai gyvena telefonuose.

Pirmoji užklausa:

Sukurk treniruočių žurnalą savo asmeninių treniruočių klientams. Kiekvienas klientas prisijungia, mato savaitei priskirtą planą, pažymi pratimus ir įrašo svorius. Matau kiekvieno kliento pažangą diagramoje.

Kas nutiko: žiniatinklio programėlė veikė, bet telefonuose mygtukai buvo per maži, kad treniruotės metu juos būtų galima patogiai paliesti, o diagrama buvo neįskaitoma.

Taisymo užklausa:

Suprojektuok tai vienos rankos naudojimui telefone: dideli paspaudimo plotai ekrano apačioje, vienas pratimas viename ekrane su dideliais mygtukais Toliau ir Atlikta bei paprasta savaitės pažangos diagrama.

Pamoka: jei žmonės naudos telefone, pirmiausia projektuokite telefonui. Mythex Pro plane paskelbta programėlė tuomet gali tapti Android programėle, skirta Google Play, ir iPhone programėle, siunčiama į TestFlight; mobilioji programėlė atidaro jūsų paskelbtą programėlę, todėl kiekvienas Publish ją atnaujina. Žr. mobiliųjų programėlių kūrėjo puslapį.

Šių pavyzdžių pagrindas

Visuose dešimtyje klaidos patenka į keletą grupių:

Nė vienam iš šių nereikia skaityti kodo. Reikia testuoti kaip smalsus, šiek tiek priešiškas naudotojas ir tiksliai aprašyti, ką matote.

Išbandykite patys

Pasirinkite pavyzdį, artimiausią jūsų idėjai, nukopijuokite jo pirmąją užklausą ir pakeiskite detales. Tada prieš dalindamiesi naudokite taisymo užklausą kaip kontrolinį sąrašą. Mūsų vibe coding užklausų špargalkėje rasite dar 30, o kaip sukurti programėlę su vibe coding veda vieną projektą nuo idėjos iki paskelbtos programėlės. Kai būsite pasiruošę, pradėkite DI programėlių kūrėjuje arba pasižiūrėkite šablonus – tai padės pradėti.

Klausimai