Vibe coding piemēri: 10 reālu lietotņu veidi, uzvednes un kas noiet greizi

Visbiežākie vibe coding piemēri ir mazas, noderīgas tīmekļa lietotnes: izsekotāji, rezervāciju lapas, iekšējie rīki, klientu portāli, nolaišanās lapas, viktorīnas, paneļi un vienkārši AI rīki. Zemāk ir desmit no tiem. Katram redzēsi, kas to veido, pirmo uzvedni, ko parasti noiet greizi, un uzvedni labojumam.

Tie ir apkopojumi no projektiem, ko cilvēki visbiežāk nes AI lietotņu veidotājiem, nevis viena cilvēka gadījumu izpētes. Uzvednes var kopēt. Kļūdas ir tās, kas atkārtojas, un tāpēc tās ir noderīgākā daļa. Ja pats vibe coding ir jauns, sāc ar kas ir vibe coding.

1. Personīgais budžeta izsekotājs

Kas to veido: cilvēki, kas izmēģinājuši izklājlapas un padevušies.

Pirmā uzvedne:

Izveido mēneša budžeta izsekotāju. Pievienoju izdevumus ar summu, kategoriju (ēdiens, īre, transports, izklaide, cits), datumu un piezīmi. Parādi šī mēneša kopsummu katrai kategorijai kā joslu diagrammu un nesenu izdevumu sarakstu. Varu iestatīt budžetu katrai kategorijai un redzēt, cik vēl palicis.

Kas noiet greizi: diagramma skaitīja katru jebkad ievadīto izdevumu, nevis tikai šī mēneša, tāpēc otrajā mēnesī katra kategorija izskatījās pārtērēta. Turklāt summas, ievadītas ar komatu („1,200“), tika saglabātas kā 1.

Labojuma uzvedne:

Diagrammai un kopsummām jāiekļauj tikai izdevumi no izvēlētā mēneša. Pievieno mēneša izvēlni augšā, kas pēc noklusējuma rāda tekošo mēnesi. Pieņem arī summas, kas ievadītas ar komatiem vai atstarpēm, un saglabā tās kā skaitļus.

Mācība: „šis mēnesis“ ir noteikums. Saki noteikumus skaļi.

2. Rezervāciju lapa mazam salonam

Kas to veido: mazo biznesu īpašnieki, kas noguruši rezervēt pa tālruni un ziņām.

Pirmā uzvedne:

Izveido rezervāciju lapu manam salonam. Klienti izvēlas pakalpojumu, datumu un brīvu laiku, tad ievada vārdu un tālruni. Man ir privāta administratora lapa aiz pieteikšanās, kas rāda rezervācijas pa dienām.

Kas noiet greizi: divi klienti rezervēja vienu un to pašu 10:00 laiku ar minūtes starpību, jo lapa pārbaudīja pieejamību tikai tad, kad tā pirmo reizi ielādējās. Arī 90 minūšu krāsošanas rezervācija neaizņēma nākamos laikus.

Labojuma uzvedne:

Kad klients iesniedz rezervāciju, serverī pārbaudi, ka katrs laiks, ko tā aptver, joprojām ir brīvs, un noraidi ar paziņojumu „Šis laiks tikko tika aizņemts“, ja nav. Pakalpojums aizņem visu savu garumu, tāpēc 90 minūšu rezervācija plkst. 10:00 aizņem 10:00, 10:30 un 11:00.

Mācība: viss, ko divi cilvēki var izdarīt vienlaikus, prasa pārbaudi serverī. Pilnu versiju skat. kā izveidot rezervāciju lietotni.

3. Restorāna ēdienkarte ar QR kodu

Kas to veido: kafejnīcu un restorānu īpašnieki, kas pārāk bieži pārdrukā ēdienkartes.

Pirmā uzvedne:

Izveido mobilu ēdienkartes vietni manai kafejnīcai. Sadaļas brokastīm, pusdienām, dzērieniem un desertiem, katrai pozīcijai nosaukums, cena, īss apraksts un diētas atzīmes (vegāns, bez glutēna). Vajag administratora lapu pozīciju rediģēšanai un atzīmēšanai kā izpārdotas. Parādi izdrukājamu QR kodu, kas ved uz ēdienkarti.

Kas noiet greizi: nekas nesalūza, bet ēdienkarte kafejnīcas Wi-Fi bija lēna, jo katrai pozīcijai ielādējās pilnizmēra tālruņa fotogrāfijas.

Labojuma uzvedne:

Ēdienkartes attēli ir par smagiem. Pielāgo augšupielādētos attēlus līdz maksimāli 800 px platumā, saspied tos un ielādē slinki, apmeklētājam ritinot.

Mācība: testē lēnā savienojumā, nevis tikai savā birojā.

4. Aprīkojuma vai krājumu izsekotājs komandai

Kas to veido: darbības speciālisti, kas aizstāj kopīgu izklājlapu.

Pirmā uzvedne:

Izveido krājumu rīku mūsu noliktavas komandai. Vienumiem ir nosaukums, SKU, daudzums, atrašanās vieta un minimālais līmenis. Darbinieki pierakstās un var pievienot krājumus, noņemt krājumus ar iemeslu un redzēt vienumu sarakstu zem minimuma, izcelts sarkanā krāsā. Glabā katras izmaiņas vēsturi un to, kas tās veica.

Kas noiet greizi: vēsturē rādījās „lietotājs 3“, nevis vārdi, un, noņemot vairāk krājumu nekā bija pieejams, daudzums kļuva negatīvs.

Labojuma uzvedne:

Vēsturē rādi personas vārdu, nevis tās ID. Neatļauj noņemt tādu daudzumu, kas nolaistu daudzumu zem nulles; rādi „Krājumā tikai 4“.

Mācība: apraksti, kas būtu jāpadara neiespējams, nevis tikai to, kas būtu jāļauj. Mūsu ceļvedis par krājumu lietotnes veidošanu aptver pārējo.

5. Klientu portāls freelanceram vai studijai

Kas to veido: dizaineri, grāmatveži, konsultanti un aģentūras.

Pirmā uzvedne:

Izveido klientu portālu. Klientus uzaicinu pa e-pastu. Katrs klients pierakstās un redz tikai savus projektus, failus un rēķinus un var atstāt komentārus. Es pierakstos kā administrators un redzu visu.

Kas noiet greizi: šī ir svarīgākā kļūda sarakstā. Lapas rādīja katram klientam tikai viņa projektus, bet serveris atgrieza jebkuru projektu, ja adreses joslā mainīja numuru. Klikšķinot kā vienam klientam, tas nekad neparādījās.

Labojuma uzvedne:

Pārskati katru servera maršrutu, kas atgriež projektus, failus, komentārus vai rēķinus. Katram jāpārbauda, ka pierakstījies klients ir ieraksta īpašnieks, citādi jāatgriež „nav atrasts“. Pēc tam pārbaudi: pierakstās kā klients A un mēģini atvērt klienta B projektu pēc tā ID.

Mācība: kaut ko paslēpt ekrānā nav tas pats, kas to aizsargāt. Vairāk par to skat. vai vibe coding ir drošs?.

6. Nolaišanās lapa ar gaidīšanas sarakstu

Kas to veido: dibinātāji, kas pārbauda ideju, pirms to veido.

Pirmā uzvedne:

Izveido nolaišanās lapu lietotnei, kas palīdz pasniedzējiem plānot stundas un iekasēt maksu. Galvenais virsraksts, apakšvirsraksts, e-pasta reģistrācija, trīs ieguvumi, sadaļa kā tas darbojas un BUJ. Saglabā reģistrācijas datubāzē ar datumu un ļauj man lejupielādēt tās kā CSV no privātas lapas.

Kas noiet greizi: dažu dienu laikā sarakstu piepildīja atkritumu reģistrācijas no botiem, un lapai nebija nosaukuma vai apraksta, tāpēc kopīgotas saites rādīja tukšu priekšskatījumu.

Labojuma uzvedne:

Pievieno reģistrācijas veidlapai pamata aizsardzību pret botiem (paslēptu lauku un ierobežojumu 5 reģistrācijas uz IP stundā). Pievieno lapas nosaukumu, meta aprakstu un attēlu kopīgošanai sociālajos tīklos.

Mācība: publiska veidlapa tiek atrasta. Skat. kā izveidot gaidīšanas sarakstu.

7. Viktorīnu lietotne skolotājam

Kas to veido: skolotāji un treneri, kas grib kaut ko vieglāku par LMS.

Pirmā uzvedne:

Izveido viktorīnu lietotni manai klasei. Veidoju viktorīnas ar izvēles jautājumiem un vienu pareizo atbildi katram. Skolēni pievienojas ar kodu un savu vārdu, atbild uz jautājumiem un beigās redz savu rezultātu. Es redzu rezultātu tabulu katrai viktorīnai.

Kas noiet greizi: pareizās atbildes tika nosūtītas pārlūkprogrammai kopā ar jautājumiem, tāpēc ziņkārīgs skolēns tās varēja izlasīt lapas pirmkodā. Skolēni arī varēja iesniegt atkārtoti, līdz dabūja 100%.

Labojuma uzvedne:

Nesūti pareizās atbildes pārlūkprogrammai. Pārbaudi atbildes serverī pēc iesniegšanas. Atļauj vienu iesniegumu vienam skolēna vārdam katrā viktorīnā un parādi skolotājam, ja kāds mēģina vēlreiz.

Mācība: pārlūkprogramma pieder lietotājam. Viss, kas tur ir, var tikt izlasīts.

8. Neliels AI rīks

Kas to veido: mārketinga speciālisti, rakstnieki un dibinātāji, kas grib fokusētu AI palīgu.

Pirmā uzvedne:

Izveido rīku, kas produkta aprakstu pārvērš piecās sociālo mediju ziņās dažādos toņos (draudzīgs, eksperta, rotaļīgs, īss, garš). Izmanto AI API. Ielīmēju aprakstu, izvēlos platformu un saņemu ziņas ar kopēšanas pogām.

Kas noiet greizi: pirmā versija tieši no pārlūkprogrammas izsauca AI pakalpojumu ar API atslēgu lapas iekšienē, kur jebkurš to varēja nokopēt un palielināt rēķinu.

Labojuma uzvedne:

Pārvieto AI izsaukumu uz serveri. Glabā API atslēgu kā noslēpumu, nekad frontend kodā. Ierobežo katram apmeklētājam 20 ģenerācijas dienā.

Mācība: atslēgas pieder noslēpumiem serverī. Skat. kā droši glabāt API atslēgas un kā pievienot AI funkcijas savai lietotnei.

9. Arābu un angļu valodas biznesa vietne

Kas to veido: uzņēmumi Persijas līcī un plašākajā arābu pasaulē, kas apkalpo divas valodas.

Pirmā uzvedne:

Izveido vietni manam interjera dizaina uzņēmumam arābu un angļu valodā ar valodas pārslēgu. Lapas: sākums, pakalpojumi, portfolio, par mums un kontakti. Arābu valodai jābūt pilnībā no labās uz kreiso.

Kas noiet greizi: arābu teksts bija izlīdzināts pa labi, bet izkārtojums nebija spoguļots: bultiņas joprojām rādīja nepareizi un izvēlne atradās nepareizajā pusē. Tālruņu numuri dažviet rādījās atpakaļgriezti.

Labojuma uzvedne:

Arābu valodā spoguļo visu izkārtojumu: lapas virzienu iestati no labās uz kreiso, izvēlni novieto labajā pusē, apgriez virziena ikonas un tālruņu numurus un e-pastus arābu tekstā saglabā no kreisās uz labo.

Mācība: no labās uz kreiso ir izkārtojums, nevis izlīdzināšana. Mythex apstrādā arābu un citus no labās uz kreiso izkārtojumus, un vari uzvednes rakstīt tieši arābu valodā.

10. Izsekotājs, kas kļūst par telefona lietotni

Kas to veido: treneri, sporta zāles un kopienu grupas, kuru lietotāji dzīvo savos tālruņos.

Pirmā uzvedne:

Izveido treniņu žurnālu maniem personīgās treniņu klientiem. Katrs klients pierakstās, redz nedēļas plānu, ko esmu piešķīris, atzīmē vingrinājumus un ieraksta svarus. Es redzu katra klienta progresu diagrammā.

Kas noiet greizi: tīmekļa lietotne darbojās, bet telefonos pogas bija pārāk mazas, lai treniņa laikā tās varētu nospiest, un diagramma bija nesalasāma.

Labojuma uzvedne:

Izveido to lietošanai ar vienu roku telefonā: lielas pieskaršanās zonas ekrāna apakšā, viens vingrinājums uz ekrānu ar lielām pogām Nākamais un Pabeigts un vienkārša nedēļas progresa diagramma.

Mācība: ja cilvēki to lietos telefonā, vispirms projektē telefonam. Mythex Pro plānā publicēto lietotni pēc tam var pārvērst Android lietotnē Google Play un iPhone lietotnē, ko nosūta uz TestFlight; telefona lietotne atver tavu publicēto lietotni, tāpēc katra publicēšana to atjaunina. Skat. lapu mobilo lietotņu veidotājs.

Šo piemēru pamatā esošie modeļi

Visos desmit gadījumos kļūdas ietilpst dažās grupās:

Neviena no tām neprasa lasīt kodu. Tās prasa testēt kā ziņkārīgam, nedaudz naidīgam lietotājam un precīzi aprakstīt, ko redzi.

Izmēģini pats

Izvēlies piemēru, kas vistuvāk tavai idejai, nokopē tā pirmo uzvedni un maini detaļas. Tad izmanto labojuma uzvedni kā kontrolsarakstu, pirms kopīgo. Mūsu vibe coding uzvedņu cheat sheet ir vēl 30, un kā veidot lietotni ar vibe coding iziet vienu projektu no idejas līdz publicētai lietotnei. Kad esi gatavs, sāc to AI lietotņu veidotājā vai apskati veidnes, lai sāktu ātrāk.

Jautājumi