Přeskočit na obsah
AI Coding Crash Course v2

Lekce 01.1: Kam směřujeme (Where We’re Going)

⏱️ 4 min čtení • Lekce 01.1

🧠 Mentální model & teoretický rozbor

Většina vývojářů zažívá při práci s AI kódovacími asistenty dvě fáze:

  1. Fáze medových týdnů: Vytvoření nového projektu na zelené louce působí jako čistá magie. Model během vteřin vygeneruje kostru aplikace, komponenty i CSS.
  2. Kocovina reality: Jakmile projekt dosáhne několika desítek souborů, reálné databáze a produkčních závislostí, magie vyprchá. Agent začne navrhovat protichůdné změny, rozbíjí již fungující kód, generuje stovky řádků zbytečného balastu a každá další oprava trvá déle než ta předchozí.

Tento stav se nazývá „Say and Pray“ (Vibe Coding). Vývojář zadá vágní přání do chatu a modlí se, aby výsledek fungoval. Pokud nefunguje, tráví čas vysvětlováním, opakováním a frustrací.

AMATÉRSKÝ PŘÍSTUP (VIBE CODING):
Prompt ──> Obří generovaný balík kódu ──> Rozbitý build ──> Vyčerpaný vývojář opravuje kód ručně


PROFESIONÁLNÍ PŘÍSTUP (REAL ENGINEERING):
Specifikace ──> Grilování ──> TDD Test (Red) ──> Chirurgický zásah agenta ──> Zelený test (Green) ──> Commit

Real Engineering staví na tom, že AI agent není všemocný architekt, ale extrémně rychlý, leč bezestavový juniorní vykonavatel. Vaší rolí je být nekompromisním tech leadem, který přesně řídí kontextové okno, definuje akceptační kritéria a kontroluje kvalitu pomocí deterministických mantinelů (kompilátor, linter, automatizované testy).

🏢 Realistický scénář z praxe

Představte si Next.js aplikaci s TypeScriptem a Prisma ORM pro správu uživatelských účtů.

  • Vibe coder napíše do agenta: „Přidej do aplikace možnost dvoufaktorového ověření (2FA) pomocí SMS a e-mailu.“
    • Výsledek: Agent začne chaoticky upravovat 12 souborů najednou, nainstaluje 3 nekompatibilní balíčky, smaže stávající session middleware a po 10 minutách projekt ani nezkompiluje.
  • Real Engineer postupuje fraktálně:
    1. Nejprve nechá agenta prověřit existující autentizační schéma.
    2. Spustí proces grilování, aby vyjasnil, kde se budou ukládat šifrované klíče a jaké SMS API se použije.
    3. Vytvoří izolovaný ticket pouze pro databázovou migraci tabulky TwoFactorConfirmation.
    4. Tento krok exekvuje v čistém sezení, otestuje a okamžitě commitne.

💻 Konkrétní ukázky kódu & promptů

Ukázka: Jak vypadá profesionální inženýrský prompt vs. Vibe prompt

❌ Špatný prompt (Vibe coding):

Ahoj, potřebuju upravit auth systém, aby podporoval zamykání účtů po 5 neúspěšných pokusech. Udělej to nějak hezky a otestuj to.

✅ Správný inženýrský prompt (Real Engineering):

Kontext: Pracujeme na zabezpečení přihlašování v src/lib/auth/login.ts.
Úkol: Implementuj zamykání účtu po 5 neúspěšných pokusech o heslo během 15 minut.


Omezení a mantinely:
1. Použij Redis klíč `failed_attempts:${email}` s TTL 900s (viz existující redis client v src/lib/redis.ts).
2. Neupravuj schéma Prisma databáze.
3. Napiš unit test do src/lib/auth/__tests__/login-lockout.test.ts pokrývající:
   - 4 neúspěšné pokusy -> povolen další pokus.
   - 5. neúspěšný pokus -> vyhození výjimky AccountLockedError (status 423).
   - Úspěšné přihlášení -> smazání počítadla pokusů.
4. Po implementaci spusť pouze tento test: `npm test -- login-lockout.test.ts`.

⚠️ Analýza selhání & Anti-patterns

Co se stane, když selže inženýrský dohled (The Slop Compound Effect):

  1. Halucinace neexistujících metod: Agent použije metodu knihovny, která byla odstraněna před dvěma verzemi (např. staré API Next.js res.unstable_revalidate()).
  2. Kaskádové rozbití typů: Pokud agentovi neposkytnete přesné rozhraní, začne všude doplňovat any nebo @ts-ignore, čímž zničí typovou bezpečnost celého modulu.
  3. Kontextové vyhoření: Agent se pokusí problém vyřešit přepsáním jiného souboru, tím rozbije další modul a během 5 minut je vaše kontextové okno plné chybových hlášení.

🛠️ Inženýrský postup krok za krokem (Playbook)

  1. Audit stavu repozitáře: Před jakoukoliv prací s agentem spusťte git status. Pracovní strom musí být 100% čistý.
  2. Formulace hypotézy a mantinelů: Zapište si na papír nebo do ticketu, které soubory se smí měnit a které jsou striktně zakázané.
  3. Zadání s verifikačním příkazem: Každý prompt musí končit příkazem, jak má agent ověřit, že úkol splnil (linter nebo unit test).
  4. Inspekce diffu: Před commitem vždy zkontrolujte git diff. Nikdy necommitujte změny, které jste neviděli na vlastní oči.

🧪 Praktické cvičení (Hands-on Lab)

Úkol:

Otevřete terminál ve svém TypeScript projektu a vyzkoušejte si formulovat imperativní prompt pro přidání pomocné utility slugify(input: string): string.

Zadání cvičení: Napište pro agenta instrukci, která zajistí:

  • Funkce převede české znaky s diakritikou na ASCII (např. čučoriedka -> cucoriedka).
  • Nahradí mezery a nepovolené znaky pomlčkami.
  • Výstup bude pouze malými písmeny.
  • Vznikne selhávající test ve Vitestu před samotnou implementací.
🔍 Klikněte pro zobrazení vzorového řešení 
Úkol: Vytvoř utilitu slugify s podporou české diakritiky v src/utils/slugify.ts.


Postup:
1. Nejprve vytvoř test src/utils/__tests__/slugify.test.ts s těmito testovacími případy:
   - "Příliš žluťoučký kůň" -> "prilis-zlutoucky-kun"
   - "  Hello, World! -- " -> "hello-world"
   - "Multiple   Spaces & Special#Chars" -> "multiple-spaces-special-chars"
2. Spusť test přes `npx vitest run src/utils/__tests__/slugify.test.ts` a ověř, že selhává (Red).
3. Implementuj funkci v src/utils/slugify.ts pomocí standardního `normalize("NFD")`.
4. Spusť test znovu a ověř, že prochází (Green).