1. diel - Vývoj s AI - Príprava VS Code a Codexu Nové

Vítame vás v kurze vývoja aplikácií s AI. V tomto úvodnom tutoriále spoznáme prístupy vibe coding, agentic coding a spec-driven development. Predstavíme si modelovú firmu EnergoSun, nainštalujeme Visual Studio Code a Codex a založíme prvý projekt. Naučíme sa tak pripraviť prostredie, v ktorom bude AI pomáhať s vývojom skutočnej webovej aplikácie.

Projekt a cieľ kurzu

Naším prvým projektom bude portál interných požiadaviek spoločnosti EnergoSun. Zamestnanci do neho budú zadávať prevádzkové požiadavky a sledovať ich riešenie. Ukážeme si prípravu zadania aj kontrolu kódu.

Prvú aplikáciu budeme zámerne vytvárať po malých častiach. Hoci by AI dokázala pripraviť mnoho funkcií súčasne, budeme postupovať krok za krokom. Pri každej zmene si vysvetlíme, čo AI vykonala, prečo to urobila a ako môžeme výsledok skontrolovať.

Po osvojení týchto postupov sa pustíme do väčšieho nadväzujúceho projektu. Získané znalosti nám umožnia zadávať agentovi celé funkčné celky a vytvárať aplikáciu výrazne rýchlejšie. Cieľom kurzu je naučiť sa vývoj s AI nielen používať, ale aj riadiť a kontrolovať.

Vibe coding a agentic coding

Pokiaľ AI zadáme len „Vytvor aplikáciu pre zamestnancov“ a potom skúšame, či výsledok funguje, môžeme veľmi rýchlo získať prototyp. Takýto prístup sa často označuje ako vibe coding. Spoliehame sa predovšetkým na to, čo aplikácia robí, a vytvorenému kódu nemusíme podrobne rozumieť.

Pri agentic codingu zadávame úlohy AI agentovi, ktorý vie pracovať so súbormi projektu a používať vývojové nástroje. My stanovujeme cieľ, kontrolujeme navrhnuté zmeny a overujeme výsledky. Agent tak prácu vykonáva, ale zodpovednosť za výslednú aplikáciu zostáva na nás.

Samotné používanie agenta však nezaručuje, že vytvorenému kódu rozumieme. Preto si budeme jednotlivé zmeny vysvetľovať a učiť sa, ako ich správnosť overiť.

V kurze budeme uprednostňovať riadenú prácu s agentom a porozumenie jeho výstupom, pretože budujeme aplikáciu určenú pre konkrétne firemné potreby.

Vývoj podľa špecifikácie

Pri vývoji s AI je dôležité nielen kontrolovať vytvorený kód, ale taktiež vedieť, čo má výsledná aplikácia spĺňať. Pokiaľ agentovi odovzdáme neúplné zadanie, musia si niektoré rozhodnutia domyslieť.

Preto budeme používať spec-driven development (SDD), teda vývoj založený na špecifikácii. Najskôr popíšeme požiadavky na aplikáciu a až podľa nich budeme zadávať vývojové úlohy.

Požiadavky na absolvovanie kurzu

Na absolvovanie kurzu si pripravíme počítač s podporovanou verziou Windows, macOS alebo Linuxu, pripojenie k internetu a možnosť inštalovať programy. Potrebujeme aj účet ChatGPT s prístupom k Codexu. Konkrétna dostupnosť a limity použitia AI závisia od aktuálnych podmienok tarify.

Základná orientácia v súboroch a priečinkoch je výhodou. Nemusíme však poznať všetky technológie, ktoré agent použije pri vývoji. Dôležité časti si priebežne vysvetlíme.

Pokiaľ s umelou inteligenciou ešte len začíname, môžeme si najskôr prejsť náš kurz Základy umelej inteligencie, ktorý vysvetľuje základné princípy AI a prácu s promptami.

Modelová spoločnosť EnergoSun

Naša modelová spoločnosť EnergoSun sro navrhuje a inštaluje fotovoltaické elektrárne, batériové úložiská a súvisiace energetické riešenia. Zaisťuje obchodnú komunikáciu, technickú prípravu zákaziek, montáže aj prevádzkovú administratívu. Má 15 zamestnancov v kancelárskych a terénnych roliach.

Organizačná štruktúra

Spoločnosť tvorí vedenie (jeden človek), obchodný manažment (jeden), technický manažment (jeden), obchodníci (dva), technická príprava (dva), montážny tím (päť), marketing (jeden), HR a administratíva (jeden) a účtovníctvo (jeden). Jednotlivé role majú odlišné zodpovednosti.

Portál interných požiadaviek

Zamestnanci potrebujú napríklad opraviť telefón alebo získať prístup k zdieľanej zložke. Požiadavky prichádzajú e-mailom, chatom, telefonicky alebo osobne. Môžu sa stratiť pri odovzdávaní a nemusí byť jasné, kto ich rieši.

Pre EnergoSun preto vytvoríme webový portál interných požiadaviek, ktorý ponúkne jedno miesto na evidenciu požiadaviek, ich stavov a zodpovedných pracovníkov. Samotnú opravu telefónu alebo objednanie vybavenia aplikácie nevykoná. Umožní však sledovať priebeh riešenia.

Príprava vývojového prostredia

Aplikácia bude tvorená viacerými súbormi. Potrebujeme preto prostredie, v ktorom ich môžeme vytvárať, upravovať a spravovať pohromade.

Zvolili sme Visual Studio Code (VS Code), bezplatný editor programového kódu od spoločnosti Microsoft. Okrem súborov ponúka rozšírenie, integrovaný terminál a ďalšie pomôcky na vývoj. Môžeme si ho predstaviť ako pracovný stôl, na ktorom máme zadanie, zdrojové súbory aj AI agenta.

Alternatívou je napríklad Cursor alebo Windsurf, teda editory so zabudovanými AI funkciami. Vývoj s AI je možné riadiť aj prostredníctvom terminálových agentov. VS Code sme vybrali kvôli jeho rozšírenosti a možnosti používať ho aj bez AI. Princípy, ktoré sa naučíme, sú prenositeľné do iných prostredí.

Inštalácia VS Code

Pokiaľ VS Code nemáme, stiahneme ho z oficiálneho webu Visual Studio Code a nainštalujeme s odporúčaným nastavením pre náš operačný systém:

Po spustení sa zobrazí hlavné okno editora:

Vľavo nájdeme Panel aktivít. Cez Prieskumníka budeme prechádzať súbory a cez Rozšírenie pridávať ďalšie funkcie. Rozloženie sa môže líšiť podľa verzie.

Zoznámenie s Codexom

Codex je programovací AI agent od OpenAI. Zatiaľ čo bežnému chatu by sme museli obsah súborov často kopírovať, Codex dokáže pracovať priamo s otvoreným projektom. Vie prechádzať kód, navrhovať a upravovať súbory alebo pomáhať so spúšťaním testov. Rozsah jeho akcií závisí od dostupných nástrojov a oprávnení.

Medzi alternatívy patrí Claude Code alebo Gemini CLI. Agentné funkcie ponúkajú aj niektoré AI editory. My použijeme Codex vo VS Code, aby sme mali súbory, zadanie a prácu agenta na jednom mieste a mohli zmeny ľahko kontrolovať.

Codex nie je automatickou autoritou. Za vhodnosť riešenia, kontrolu zmien a overenie funkčnosti stále zodpovedáme my.

Inštalácia Codexu

V Paneli aktivít otvoríme Rozšírenie. Vo Windows môžeme použiť aj Ctrl + Shift + X. Do vyhľadávania zadáme Codex.

Vyhľadáme rozšírenie vydané spoločnosťou OpenAI:

Klikneme na Nainštalovať, otvoríme panel Codexu a podľa pokynov sa prihlásime účtom ChatGPT:

Dostupnosť Codexu a jeho limity sa môžu meniť. Pri vyčerpaní limitu môže byť nutné počkať na jeho obnovenie. Podrobnosti overíme v pomocníkovi OpenAI. V niektorých prostrediach môže byť potrebné ďalšie systémové nastavenie.

Založenie projektu

Každú aplikáciu uložíme do vlastného priečinka, aby Codex mohol ľahko rozpoznať súbory projektu. Na disku vytvoríme zložku interni-pozadavky.

V názve vynecháme medzery a diakritiku. Vo VS Code zvolíme Súbor -> Otvoriť zložku a našu zložku otvoríme:

Otvorená zložka tvorí pracovný priestor (workspace). Obsahuje dokumentáciu, budúce zdrojové súbory aj nastavenia projektu.

Dôveryhodnosť pracovného priestoru

VS Code sa môže opýtať, či zložke dôverujeme. Ak sa otvorí v Obmedzenom režime, môžeme v stavovom riadku zvoliť zmenu dôveryhodnosti a potvrdiť Dôverovať:

Dôveru potvrdzujeme iba pri vlastných zložkách alebo projektoch so známym obsahom. Cudzie projekt môže obsahovať nebezpečné príkazy či nastavenia.

Máme pripravené VS Code, Codex aj prázdnu zložku projektu. Poznáme účel aplikácie EnergoSun a rozumieme tomu, prečo budeme vývoj riadiť pomocou špecifikácie. Pri práci s agentom budeme kontrolovať jeho kroky a výsledky, nie iba prijímať vygenerovaný kód.