Lekce 5 - První HTML rozhraní ve VS Code s Codexem Nové

V minulé lekci, Wireframy a kontrola specifikace ve VS Code s Codexem, jsme ve Visual Studio Code navrhli wireframy portálu EnergoSun, doplnili akceptační kritéria a pomocí Codexu zkontrolovali konzistenci specifikace.

V tomto tutoriálu kurzu vývoje aplikací s AI vytvoříme ve Visual Studio Code pomocí Codexu první část uživatelského rozhraní portálu EnergoSun. Codex přečte soubor SPEC.md a podle něj připraví statickou stránku v jazyce HTML.

Půjde zatím pouze o statický prototyp, který zobrazí ukázkový obsah, ale nebude skutečně zpracovávat požadavky. Naším cílem není naučit se HTML nazpaměť. Chceme pochopit, jakou roli má HTML ve webové aplikaci, jak zkontrolovat práci agenta a jak si nejasnou část kódu nechat vysvětlit.

HTML

Část webové aplikace, kterou uživatel vidí a ovládá v prohlížeči, označujeme jako frontend. HTML v něm popisuje především strukturu a význam obsahu – například nadpis, tabulku, formulář nebo tlačítko. Konkrétní podobu HTML si ukážeme za chvíli.

Ukázka budoucí podoby portálu

Na začátku vývoje nepotřebujeme vytvářet celé MVP najednou. Nejprve připravíme statický HTML prototyp, tedy jednoduchou stránku s předem vloženým obsahem.

V tomto kroku zobrazíme dvě části, které už známe z návrhu obrazovek:

• přehled požadavků žadatele,
• formulář nového požadavku.

Detail požadavku zatím záměrně nebudeme vytvářet. Rozdělení práce na menší kroky nám umožní snadněji kontrolovat, co agent skutečně změnil.

...konec náhledu článku...
Pokračuj dál