Láká vás tvorba webových aplikací pomocí AI, ale nevíte, jak začít? Tohle je video pro naprosté začátečníky. Ukážeme si, jak si instalujete Claude Code a jak si vytvoříte svou první webovou aplikaci - krok za krokem.
Souhrn a Popis Videa: Claude Code pro začátečníky
-
Úvod a Představení Claude Code
-
Příprava Terminálu
-
Instalace a Spuštění Claude Code
-
[02:02] Instalace Claude Code se provádí pomocí příkazu zkopírovaného z webu Anthropic, zadáním do terminálu.
-
[03:23] Spuštění Claude Code příkazem
claudez pracovního adresáře, který je určen pro vývoj projektu. -
[04:15] Vysvětlení a zapnutí režimu Sandbox (přidáním parametru k příkazu
claude) – tento režim zvyšuje bezpečnost tím, že omezuje operace AI mimo pracovní adresář a komunikaci s internetem.
-
-
Prostředí a Financování
-
[06:03] Popis spartánského prostředí, které zobrazuje kontextové informace a používaný model (Sonet 4.5).
-
[06:32] Důležité: Vysvětlení cenových režimů – doporučení registrace a použití režimu Pro za 17 USD měsíčně namísto staršího, dražšího režimu platby za tokeny přes API.
-
[08:26] Popis příkazového řádku (prompt) pro komunikaci s AI a statusového řádku (Context, připojení k GitHubu).
-
-
Návrh a Zadání Projektu (PRD)
-
[10:27] Doporučený postup: Namísto primitivního zadání vytvořit Product Requirement Document (PRD).
-
[10:56] Definování ukázkové aplikace “Hot or Not” pro výběr ze dvou obrazů, s cílem hostovat ji na platformě Cloudflare Free tier(zdarma), aby AI zvolila vhodnou technologii.
-
[12:31] Upřesnění požadavků s Claude (použít top 100 obrazů po roce 1850, data z WikiArt, metadata zobrazit až po volbě, duplicitní hlasování řešit přes
localStorage). -
[17:49] Claude generuje PRD, navrhuje technologie vhodné pro Cloudflare (Frontend: React/Vite, Backend: Cloudflare Workers, Databáze: D1 - SQLite, Styling: Tailwind CSS).
-
-
Implementace a Nasazení
-
[19:45] Vytvoření plánu implementace pomocí příkazu
vytvořme plán implementace...a odvolání se na PRD soubor (@Art_Battle_PRD.md). -
[23:11] Spuštění kompletní implementace, která trvá přibližně 10 minut a vytvoří 36 souborů.
-
[24:23] Vytvoření souhrnné dokumentace projektu do souboru
cloud.mdpomocí příkazuinit, pro budoucí použití AI. -
[26:48] Nasazení (deployment) aplikace na Cloudflare pomocí příkazu
proveď deployment na cloudflare.
-
-
Testování a Závěr
-
[27:40] Testování živé aplikace na frontendové URL a zjištění prvního nedostatku (stránka se neobnoví po hlasování).
-
[28:45] Následuje fáze ladění (dopilovávání) projektu, která je přenechána uživatelům pro další experimenty.
-
[29:44] Závěrečné doporučení k experimentování a odkaz na web vibecoding.cz pro více informací o programování s AI.
-
Video si můžete spustit také přímo na Youtube: Začínáme vibecoding s Claude Code
| 