Lekce 4 - Wireframy a kontrola specifikace ve VS Code s Codexem Nové

V minulé lekci, Specifikace MVP ve VS Code s Codexem, jsme ve Visual Studio Code rozšířili specifikaci portálu EnergoSun o cílový proces, uživatelské role, rozsah MVP a základní pravidla požadavku.

V tomto tutoriálu kurzu vývoje aplikací s AI navrhneme základní obrazovky portálu interních požadavků EnergoSun. Pomocí ChatGPT vytvoříme jednoduché wireframy, jejich obsah zapíšeme ve Visual Studio Code do souboru SPEC.md a doplníme akceptační kritéria. Nakonec pomocí Codexu zkontrolujeme konzistenci specifikace.

Programový kód zatím vytvářet nebudeme. Nejprve chceme ověřit, že navržené rozhraní a pravidla odpovídají rozsahu MVP.

Základní obrazovky

Než začneme programovat, pomůže nám představit si základní obrazovky aplikace. Jednoduchý náčrt uživatelského rozhraní označujeme jako wireframe. Můžeme si jej představit jako plánek místnosti, který ukazuje umístění důležitých částí, ale zatím neřeší barvy, dekorace ani konečný vzhled.

Wireframy použité v tomto tutoriálu jsme vytvořili pomocí AI podle dosavadního obsahu SPEC.md. Stejný postup si můžeme vyzkoušet také sami. Pro vytvoření wireframu nemusíme používat Codex. Prompt můžeme vložit například do ChatGPT a nechat si vytvořit jednoduchý obrázek:

Podle následující specifikace navrhni jednoduché černobílé
low-fidelity wireframy interní webové aplikace.

Potřebuji tři obrazovky:
1. přehled požadavků,
2. formulář nového požadavku,
3. detail požadavku.

Použij pouze funkce uvedené ve specifikaci.
Nepřidávej další funkce ani konečný grafický design.

[sem vložíme obsah SPEC.md]

Výstup:

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