Lekce 1 - Vývoj s AI - Příprava VS Code a Codexu Nové

Vítáme vás v kurzu vývoje aplikací s AI. V tomto úvodním tutoriálu poznáme přístupy vibe coding, agentic coding a spec-driven development. Představíme si modelovou firmu EnergoSun, nainstalujeme Visual Studio Code a Codex a založíme první projekt. Naučíme se tak připravit prostředí, ve kterém bude AI pomáhat s vývojem skutečné webové aplikace.

Projekt a cíl kurzu

Naším prvním projektem bude portál interních požadavků společnosti EnergoSun. Zaměstnanci do něj budou zadávat provozní požadavky a sledovat jejich řešení. Ukážeme si přípravu zadání i kontrolu kódu.

První aplikaci budeme záměrně vytvářet po malých částech. Přestože by AI dokázala připravit mnoho funkcí současně, budeme postupovat krok za krokem. U každé změny si vysvětlíme, co AI provedla, proč to udělala a jak můžeme výsledek zkontrolovat.

Po osvojení těchto postupů se pustíme do většího navazujícího projektu. Získané znalosti nám umožní zadávat agentovi celé funkční celky a vytvářet aplikaci výrazně rychleji. Cílem kurzu je naučit se vývoj s AI nejen používat, ale také řídit a kontrolovat.

Vibe coding a agentic coding

Pokud AI zadáme jen "Vytvoř aplikaci pro zaměstnance" a pak zkoušíme, zda výsledek funguje, můžeme velmi rychle získat prototyp. Takový přístup se často označuje jako vibe coding. Spoléháme se především na to, co aplikace dělá, a vytvořenému kódu nemusíme podrobně rozumět.

Při agentic codingu zadáváme úkoly AI agentovi, který umí pracovat se soubory projektu a používat vývojové nástroje. My stanovujeme cíl, kontrolujeme navržené změny a ověřujeme výsledky. Agent tak práci provádí, ale odpovědnost za výslednou aplikaci zůstává na nás.

Samotné používání agenta ovšem nezaručuje, že vytvořenému kódu rozumíme. Proto si budeme jednotlivé změny vysvětlovat a učit se, jak jejich správnost ověřit.

V kurzu budeme upřednostňovat řízenou práci s agentem a porozumění jeho výstupům, protože budujeme aplikaci určenou pro konkrétní firemní potřeby.

Vývoj podle specifikace

Při vývoji s AI je důležité nejen kontrolovat vytvořený kód, ale také vědět, co má výsledná aplikace splňovat. Pokud agentovi předáme neúplné zadání, musí si některá rozhodnutí domyslet.

Proto budeme používat spec-driven development (SDD), tedy vývoj založený na specifikaci. Nejdříve popíšeme požadavky na aplikaci a teprve podle nich budeme zadávat vývojové úkoly.

Požadavky na absolvování kurzu

Pro absolvování kurzu si připravíme počítač s podporovanou verzí Windows, macOS nebo Linuxu, připojení k internetu a možnost instalovat programy. Potřebujeme také účet ChatGPT s přístupem k Codexu. Konkrétní dostupnost a limity použití AI závisejí na aktuálních podmínkách tarifu.

Základní orientace v souborech a složkách je výhodou. Nemusíme však znát všechny technologie, které agent při vývoji použije. Důležité části si průběžně vysvětlíme.

Pokud s umělou inteligencí teprve začínáme, můžeme si nejprve projít náš kurz Základy umělé inteligence, který vysvětluje základní principy AI a práci s prompty.

Modelová společnost EnergoSun

Naše modelová společnost EnergoSun s.r.o. navrhuje a instaluje fotovoltaické elektrárny, bateriová úložiště a související energetická řešení. Zajišťuje obchodní komunikaci, technickou přípravu zakázek, montáže i provozní administrativu. Má 15 zaměstnanců v kancelářských a terénních rolích.

Organizační struktura

Společnost tvoří vedení (jeden člověk), obchodní management (jeden), technický management (jeden), obchodníci (dva), technická příprava (dva), montážní tým (pět), marketing (jeden), HR a administrativa (jeden) a účetnictví (jeden). Jednotlivé role mají odlišné odpovědnosti.

Portál interních požadavků

Zaměstnanci potřebují například opravit telefon nebo získat přístup ke sdílené složce. Požadavky přicházejí e-mailem, chatem, telefonicky či osobně. Mohou se ztratit při předávání a nemusí být jasné, kdo je řeší.

Pro EnergoSun proto vytvoříme webový portál interních požadavků, který nabídne jedno místo pro evidenci požadavků, jejich stavů a odpovědných pracovníků. Samotnou opravu telefonu nebo objednání vybavení aplikace neprovede. Umožní však sledovat průběh řešení.

Příprava vývojového prostředí

Aplikace bude tvořena více soubory. Potřebujeme proto prostředí, ve kterém je můžeme vytvářet, upravovat a spravovat pohromadě.

Zvolili jsme Visual Studio Code (VS Code), bezplatný editor programového kódu od společnosti Microsoft. Kromě souborů nabízí rozšíření, integrovaný terminál a další pomůcky pro vývoj. Můžeme si jej představit jako pracovní stůl, na kterém máme zadání, zdrojové soubory i AI agenta.

Alternativou je například Cursor nebo Windsurf, tedy editory se zabudovanými AI funkcemi. Vývoj s AI lze řídit také prostřednictvím terminálových agentů. VS Code jsme vybrali kvůli jeho rozšířenosti a možnosti používat jej i bez AI. Principy, které se naučíme, jsou přenositelné do jiných prostředí.

Instalace VS Code

Pokud VS Code nemáme, stáhneme jej z oficiálního webu Visual Studio Code a nainstalujeme s doporučeným nastavením pro náš operační systém:

Po spuštění se zobrazí hlavní okno editoru:

Vlevo najdeme Panel aktivit. Přes Průzkumníka budeme procházet soubory a přes Rozšíření přidávat další funkce. Rozložení se může lišit podle verze.

Seznámení s Codexem

Codex je programovací AI agent od OpenAI. Zatímco běžnému chatu bychom museli obsah souborů často kopírovat, Codex dokáže pracovat přímo s otevřeným projektem. Umí procházet kód, navrhovat a upravovat soubory nebo pomáhat se spouštěním testů. Rozsah jeho akcí závisí na dostupných nástrojích a oprávněních.

Mezi alternativy patří Claude Code nebo Gemini CLI. Agentní funkce nabízejí rovněž některé AI editory. My použijeme Codex ve VS Code, abychom měli soubory, zadání a práci agenta na jednom místě a mohli změny snadno kontrolovat.

Codex není automatickou autoritou. Za vhodnost řešení, kontrolu změn a ověření funkčnosti stále odpovídáme my.

Instalace Codexu

V Panelu aktivit otevřeme Rozšíření. Ve Windows můžeme použít také Ctrl + Shift + X. Do vyhledávání zadáme Codex.

Vyhledáme rozšíření vydané společností OpenAI:

Klikneme na Nainstalovat, otevřeme panel Codexu a podle pokynů se přihlásíme účtem ChatGPT:

Dostupnost Codexu a jeho limity se mohou měnit. Při vyčerpání limitu může být nutné počkat na jeho obnovení. Podrobnosti ověříme v nápovědě OpenAI. V některých prostředích může být potřeba další systémové nastavení.

Založení projektu

Každou aplikaci uložíme do vlastní složky, aby Codex mohl snadno rozpoznat soubory projektu. Na disku vytvoříme složku interni-pozadavky.

V názvu vynecháme mezery a diakritiku. Ve VS Code zvolíme Soubor -> Otevřít složku a naši složku otevřeme:

Otevřená složka tvoří pracovní prostor (workspace). Obsahuje dokumentaci, budoucí zdrojové soubory i nastavení projektu.

Důvěryhodnost pracovního prostoru

VS Code se může zeptat, zda složce důvěřujeme. Pokud se otevře v Omezeném režimu, můžeme ve stavovém řádku zvolit změnu důvěryhodnosti a potvrdit Důvěřovat:

Důvěru potvrzujeme pouze u vlastních složek nebo projektů se známým obsahem. Cizí projekt může obsahovat nebezpečné příkazy či nastavení.

Máme připravené VS Code, Codex i prázdnou složku projektu. Známe účel aplikace EnergoSun a rozumíme tomu, proč budeme vývoj řídit pomocí specifikace. Při práci s agentem budeme kontrolovat jeho kroky a výsledky, nikoli pouze přijímat vygenerovaný kód.