Skúsil som použiť Vibe Coding na vytvorenie vlastnej produktivity aplikácie.

Od chvíle, keď sa na scéne objavili AI chatboty ako ChatGPT, nastal mierny panika ohľadom toho, že AI zoberie všetky naše pracovné miesta. Aj keď sú stále veci, ktoré AI chatboty ešte nedokážu, jednou z oblastí, v ktorej sa preukázali ako pôsobivé, je programovanie.

Teraz je možné, aby si ktokoľvek vytvoril svoj vlastný kód pomocou AI chatbotov jednoducho tým, že vysvetlí, čo chce robiť v pokyne, technika, ktorá sa nazýva vibe coding. Rozhodol som sa vyskúšať vibe coding, aby som zistil, či by som mohol vytvoriť jednoduchú aplikáciu bez toho, aby som sám napísal jediný riadok kódu.

Čo je Vibe kódovanie?

Vibe coding je metóda vytvárania softvéru alebo aplikácií pomocou nástrojov AI, ako sú chatboti, na generovanie kódu na základe písaných opisov. Ak chcete napríklad vytvoriť hru na rolovanie na strane, namiesto toho, aby ste písali kód sami, jednoducho vysvetlíte AI chatbotovi, čo chcete, aby hra robila, a chatbot pre vás vygeneruje celý kód.

Potom môžete svoju tvorbu vylepšiť ďalšími príkazmi, žiadajúc chatbot, aby vykonal zmeny v správaní hry alebo opravil všetky chyby, ktoré sa objavia. Pomocou chatbota na vylepšovanie kódu môžete vytvoriť funkčný softvér bez napísania jediného riadku kódu.

Výber nápadu na vytvorenie

Mám trochu skúseností s kódovaním, ale chcel som zistiť, či môžem použiť vibe kódovanie na vytvorenie niečoho bez nutnosti robiť akékoľvek zmeny v kóde sám. Nechcel som ísť do niečoho príliš zložitým; len som chcel zistiť, či vibe kódovanie funguje na vytvorenie užitočnej a funkčnej aplikácie čisto tým, že opíšem, čo chcem.

Vždy som mal problémy s produktivitou, zistil som, že sa ľahko rozptýlim, a vyskúšal som mnoho aplikácií, aby som to vyriešil. Pomodoro metóda, ktorá pozostáva z 25 minút sústredenej práce nasledovaných päťminútovou prestávkou, mi pomohla, ale stále som zistil, že sa počas sústredených relácií rozptýlim. Taktiež som zistil, že blokovanie času je užitočné.

Rozhodol som sa pokúsiť vytvoriť aplikáciu, ktorá by kombinovala oboje. Vytvorila by 30-minútové bloky času, ktoré by som mohol vyplniť úlohami, ktoré som chcel splniť. Každý blok by mal svoj vlastný Pomodoro časovač, ktorý by som mohol spustiť z bloku, a na konci každej 25-minútovej pracovnej relácie by ma požiadať, aby som zaznamenal akékoľvek rozptýlenia, ktoré sa vyskytli. To by mi pomohlo sledovať veci, ktoré kradnú moju pozornosť, aby som mohol prísť na spôsoby, ako zastaviť tieto rozptýlenia.

Výber modelu ChatGPT

Teraz som mal svoj plán, bol som takmer pripravený začať. Mám predplatné ChatGPT Plus, takže to bol chatbot, ktorého som plánoval použiť. Ďalším rozhodnutím bolo vybrať, ktorý model použiť v ChatGPT. Všetky modely dokážu zvládať programovanie do istej miery.

Niektoré modely podporujú funkciu Canvas, ktorá otvorí samostatné okno pre váš kód, ale keďže kódujem intuitívne a nechcem sa dotýkať kódu, to nebolo dôležité. Nakoniec som si vybral model o3-mini-high, ktorý je založený na modeli o3-mini, ktorý má dobrú povesť pre kódovanie. Model o3-mini-high je údajne inteligentnejší, hoci to trvá trochu dlhšie.

Prvé pokusy o vytvorenie mojej aplikácie zvládli základy.

Začal som tým, že som popísal, čo presne chcem, aby aplikácia robila. Snažil som sa zahrnúť čo najviac funkcií, ktoré som chcel. Toto bola najťažšia časť celého procesu; potreboval som jasnú predstavu o tom, čo presne chcem, aby aplikácia robila, a potreboval som to opísať čo najpresnejšie. To by zabezpečilo, že výsledok bude čo najbližšie tomu, čo som chcel.

Napísal som výzvu, ktorá obsahovala väčšinu funkcií, ktoré som chcel zahrnúť, a model začal premýšľať. Po jednej minúte a 19 sekundách (viem, lebo mi to povedal) ChatGPT vytvoril blok kódu. Skopíroval som ho do TextEditu, uložil ho ako HTML súbor a keď som otvoril súbor, aplikácia sa načítala v mojom prehliadači.

Prvá snaha bola celkom dobrá; mala vyznačené bloky času a priestory na zadávanie názvov pracovných blokov, výber času a pridávanie ich do rozvrhu. Bola tu jasná tlačidlo na vymazanie rozvrhu, ktoré vyčistilo celú stránku.

Akonáhle som zadal názov pre reláciu, mohol som kliknúť na ikonu "Prehrať" pre túto reláciu, aby sa spustil 25-minútový časovač, po ktorom by sa spustil päťminútový časovač na prestávku. Doteraz dobré. Toto však nebol konečný produkt, takže som musel vykonať niektoré zmeny.

Použitie ďalších pokynov na opravu odpočítavacieho časovača a rozloženia

S usporiadaním bol problém; časové bloky boli usporiadané tak, že časy sa zvyšovali horizontálne po obrazovke, ale ja som chcel, aby sa časy zvyšovali vertikálne v stĺpcoch. Toto som vo svojej počiatočnej výzve nešpecifikoval, takže to bola moja chyba.

Okrem toho som chcel, aby časovač otvoril ako okno na celú obrazovku. To by pomohlo zablokovať všetky ostatné aplikácie a dalo by mi to menej rozptýlenia (aplikáciu by som spúšťal na svojom MacBooku, kým by som pracoval na svojom iMacu).

Zadával som príkaz, v ktorom som vysvetlil, čo chcem opraviť, spolu s niekoľkými ďalšími úpravami, a ChatGPT premýšľal ďalších 44 sekúnd, kým nevytvoril nový kód. Po spustení nového kódu som zistil, že moje pokyny pre rozloženie boli príliš nejasné; časy boli teraz v jednej dlhéj vertikálnej kolónke namiesto siete, ktorú som pôvodne požadoval. To bola dôležitá lekcia o vibe kódovaní: Výsledky sú len také dobré, ako vaše pokyny.

Pridal som ďalší podnet na objasnenie a po ďalších 39 sekundách som dostal opravený kód. Spustenie novej verzie mi dalo rozloženie, ktoré som chcel, a opravilo aj ostatné úpravy, o ktoré som požiadal.

Bol tu aj problém s odpočítavaním. Fungoval dobre, keď bola obrazovka odpočítavania v popredí, ale ak som začal používať iné aplikácie, odpočítavanie neprebiehalo presne. Ak som použil inú aplikáciu na minútu, časovač by sa napríklad znížil iba o 30 sekúnd.

Pridal som ďalšiu žiadosť, aby som opravil problém s časovačom a vysvetlil, že chcem, aby sa čas meral presne aj vtedy, keď aplikácia nie je v strede pozornosti. Po ďalších 72 sekundách bol kód vygenerovaný a problém s časovačom bol vyriešený.

Žiadosť o ďalší kód na automatické vyplnenie polí

Ďalší problém bola vec, ktorú som nezohľadnil, keď som písal svoj počiatočný príkaz. Pri plánovaní svojho dňa by som pravdepodobne zaplnil každú časovú blokáciu po poradí. V súčasnej podobe aplikácia automaticky vyplňovala časové pole časom ďalšieho dostupného bloku.

Avšak, keďže väčšina mojich úloh zvyčajne trvá viac ako 25 minút, zvyčajne vložím niekoľko blokov pre tú istú úlohu, takže dávalo zmysel, aby názov relácie zachoval názov predchádzajúceho bloku, kým nebude prepisovaný.

Napísal som ďalší dopyt a ChatGPT si robil svoju prácu. Po minúte sa vygeneroval kód. Takmer fungoval podľa očakávaní, ale bol tu jeden problém. Ak som vybral alternatívny čas pomocou rozbaľovacieho menu, relácia bola pridaná do nasledujúceho dostupného slotu, nie do času, ktorý som vybral. Ďalší rýchly dopyt a o 15 sekúnd neskôr bol problém opravený.

Pridanie spôsobu na zaznamenávanie rozptýlení

Uvedomil som si, že mi v pôvodnom príkaze chýbala jedna kľúčová časť. Jedna z vecí, ktorú som chcel od mojej aplikácie, bola schopnosť zaznamenávať čokoľvek, čo ma počas mojej sústredenej pracovnej relácie rozptýlilo. To by mi pomohlo určiť najbežnejšie príčiny mojich rozptýlení a pokúsiť sa nájsť spôsoby, ako ich minimalizovať.

Toto bolo miesto, kde som sa pokúsil o niečo trochu iné. Môj prvý príkaz vynechal niektoré kľúčové informácie, takže som sa pýtal, či mi ChatGPT môže pomôcť aj napísať prompt na kódovanie atmosféry. Otvoril som model GPT-4o, vysvetlil som, čo chcem, trochu záhadne, a požiadal som ho, aby mi dal prompt, ktorý by som mohol použiť na vykonanie potrebných zmien v mojom kóde.

Vzal som výsledný prompt a vložil ho do svojej chatovacej miestnosti o kódovaní, a ChatGPT aktualizoval kód za mňa. Potreboval som ešte niekoľko úprav, aby to fungovalo dokonale, ale čoskoro som mal všetky funkcie, ktoré som potreboval pre svoju aplikáciu.

Ukončená aplikácia robí všetko, čo som požiadal, a bola vytvorená bez toho, aby som napísal jediný riadok kódu. Som si istý, že časom urobím niektoré vylepšenia (na začiatku to nevyzerá skvele), ale už ju používam na plánovanie mojich dní a udržanie sa sústredeného na úlohy, ktoré mám pred sebou.

'Práca s aplikáciami' je užitočná, keď funguje.

Veľmi užitočná funkcia, ktorú som použil pri vytváraní tejto aplikácie, sa nazýva Pracovať s aplikáciami. Vďaka tejto funkcii môže desktopová aplikácia ChatGPT komunikovať s inými aplikáciami, ktoré máte otvorené na svojom počítači. Použil som TextEdit na zadanie počiatočného kódu a stlačením tlačidla Pracovať s aplikáciami v ChatGPT som mohol prepojiť s mojím súborom TextEdit.

Výhodou je, že kedykoľvek zmením akýkoľvek kód, ChatGPT môže automaticky vykonať zmeny v súbore TextEdit za mňa, bez toho aby som musel všetko kopírovať a vkladať sám. Jediné, čo musím urobiť, je uložiť súbor a obnoviť si prehliadač, aby som vyskúšal aktualizovanú verziu.

Toto však nefunguje vždy. Zdá sa, že ak je aplikácia, s ktorou pracujete, na pozadí príliš dlho, spojenie sa stratí a kód sa už nebude aktualizovať.

Vibe kódovanie môže fungovať s trochou trpezlivosti

Moja aplikácia nie je zázrakom modernej technológie, ale presne robí to, čo som chcel, a je úplne použiteľná. A čo viac, beží lokálne a nič ma to nestojí, na rozdiel od niektorých produktívnych aplikácií, ktoré som používal predtým. Dokázal som ju zostaviť za niečo viac než hodinu a mohlo to byť oveľa rýchlejšie, keby som si všetko predtým poriadne premyslel.

Počas celého procesu som sa ani raz nedotkol kódu; všetky zmeny boli vykonané prostredníctvom príkazov. Aj keby som nemal žiadne znalosti programovania, dokázal by som dosiahnuť rovnaký výsledok. Je to skvelý vstupný bod pre neprogramátorov, aby objavili, čo je možné, ale zatiaľ žiadnych vývojárov softvéru nenahradí.

Kódovanie pomocou Vibe je stále vzdialené od dokonalosti a vyžaduje si trpezlivosť na riešenie problémov, na ktoré narazíte. Musíte byť tiež veľmi jasní vo svojich podnetoch. Avšak, ak sa s tým vydržíte, je ohromujúce, čo môžete vytvoriť bez toho, aby ste napísali jediný riadok vlastného kódu.