Přeskočit na obsah
AI Školení

Mini-projekt: tvá první AI-assisted aplikace (90 min, 3 fáze)

⏱ Odhadovaný čas 90 min
📍 Pozice Den 3, blok 6 / 7
🎯 Po tomto bloku budeš umět
  • Postavil(a) jsi svou první AI-assisted aplikaci ve 3 fázích
  • Iteroval(a) jsi se CC: V1 (funguje) → V2 (vylepšeno)
  • Máš soubor, který si můžeš odnést a reálně používat

🎯 3 fáze × 30 min s milestones

Sekce “🎯 3 fáze × 30 min s milestones”

Pokud si v půlce fáze ztracený/á, napiš Miroslavovi. Nezasekni se sám/sama 30 min.

⏱ Checkpointy

Sekce “⏱ Checkpointy”
PoMáš mít
30 minSpuštěný CC v nové složce, první prompt odeslaný
60 minV1 — aplikace, která se dá spustit / otevřít
90 minV2 — o 1 vylepšení oproti V1

Nouzový plán: Pokud jsi po 75 min stále ve Fázi 1 → přeskoč na Fázi 2 s backup zadáním: „CC, vytvoř minimální funkční verzi, nemusí to být krásné.”

🚀 Vyber si variantu

Sekce “🚀 Vyber si variantu”

Co budeš stavět

Sekce “Co budeš stavět”

Kvízová hra v prohlížeči (HTML + JavaScript) — 5 otázek o tvém oblíbeném tématu (hry / sci-fi / historie / technologie). Hráč klikne odpověď, hra počítá skóre. Výsledky uloží do prohlížeče (localStorage).

Fáze 1 (0–30 min): Setup + první prompt

Sekce “Fáze 1 (0–30 min): Setup + první prompt”

  1. Nová složka pro projekt (vše v VSCode):

    • File → Open Folder… → Desktop → tlačítko „New Folder” → napiš kviz-hra → Enter → Open
    • VSCode se přepne do nové (prázdné) složky
    • Otevři integrovaný terminál: Ctrl + `
    • Spusť: claude

  2. První prompt (zkopíruj a uprav podle sebe):

    Jsi zkušený web developer, který umí psát jednoduché HTML+JavaScript hry.
    

    Vytvoř kvízovou hru v jednom souboru `kviz.html` (HTML + CSS + JS inline),
    která:
    - Má 5 otázek o tématu "videohry 90. let" (můžeš upravit téma)
    - Každá otázka má 4 možnosti A/B/C/D jako klikatelná tlačítka
    - Po kliknutí se hned ukáže správná/špatná + další otázka
    - Na konci vypíše skóre (např. 4/5) + tlačítko "Hraj znovu"
    - Ulož skóre s datem do localStorage, ať vidím historii
    - Vzhled:
      * Pozadí: jemný gradient (např. z #e0f2fe do #f0fdf4)
      * Tlačítka odpovědí: velká, s hover efektem, zaoblené rohy (border-radius 8px)
      * Emoji ikony u výsledků (✅ správně / ❌ špatně / 🎉 konec hry)
      * Font: sans-serif (system-ui, Segoe UI), velikost 18px+
      * Centrovaná karta uprostřed obrazovky, max-width 600px, padding 2rem
    

    Mysli krok za krokem:
    1. Navrhni 5 otázek se správnými odpověďmi
    2. Napiš strukturu HTML
    3. Přidej CSS a JS
    4. Vytvoř soubor a řekni, jak ho mám otevřít
    

    Pokud něco nevíš, řekni to a zeptej se.

  3. CC navrhne plán, schval a Allow once na vytvoření souboru.

Checkpoint 30 min: ✅ Máš kviz.html ve složce. Dvojklik na něj → otevře se v prohlížeči — nemusí fungovat vše, hlavně ať se soubor otevře.

Fáze 2 (30–60 min): V1 — funkční verze

Sekce “Fáze 2 (30–60 min): V1 — funkční verze”

  1. Otevři hru:

    • V VSCode v levém panelu klikni pravým na kviz.html → „Reveal in File Explorer”
    • V Průzkumníku dvojklik → otevře se v Chrome/Edge
    • Nebo: přetáhni kviz.html přímo do okna prohlížeče

  2. Zkus hrát. Co nefunguje?

    • Otázky se neobjevují? Skóre špatně? Tlačítka neklikatelná?

  3. Řekni CC: „Když kliknu na odpověď, [popis co se děje / neděje]. Oprav.”

  4. Iteruj, dokud hra neprojde všech 5 otázek a ukáže konečné skóre.

Checkpoint 60 min: ✅ Hra projde všech 5 otázek v prohlížeči, vypíše skóre, ukládá historii do localStorage.

Fáze 3 (60–90 min): V2 — vylepšení

Sekce “Fáze 3 (60–90 min): V2 — vylepšení”

Začni tímhle (doporučeno):

  • A) Více otázek s náhodným výběrem — „Přidej 10 dalších otázek (celkem 15). Náhodně vyber 5 při každé hře. Použij Math.random() — pokud nevíš jak, zeptej se.”
    • 👍 Nejlepší ROI: jedno volání random a hra je okamžitě zajímavější.

Pokud zbývá čas a baví tě to, zkus ještě jedno z:

  • B) Kategorie obtížnosti — „Rozděl otázky na 3 kategorie (snadné / střední / těžké). Hráč si vybere na úvodní obrazovce.”
  • C) Historie skóre — „Na konci hry ukaž všechny moje minulé výsledky z localStorage v přehledné tabulce (datum, skóre).”
  • D) Časovač — „Přidej 15s časový limit na každou otázku. Pokud nestihnu, je to špatná odpověď.”

Checkpoint 90 min: ✅ V2 má alespoň A (více otázek s random výběrem), pořád funguje v prohlížeči. Bonus: B/C/D když zbyde čas.

💡 Meta-lekce

Sekce “💡 Meta-lekce”

Co sis dnes osvojil/a?

  1. Claude Code pracuje s tvými soubory — ne jen chat
  2. První prompt je klíčový (dej mu strukturu, priority, jasný output)
  3. Iterace — spustit → vidět → opravit → znova
  4. V2 vylepšení — jednou máš funkční V1, přidávat features je snadné

Tohle je workflow skutečného developera s AI. Od dneška víš, jak to funguje.

Pokračovat na blok 06: Kvíz + reflexe →