Dokumentace
Průvodce spuštěním e-shopu
Kompletní návod jak zprovoznit váš e-shop. Žádné programování — vše zvládnete podle tohoto průvodce.
Odhadovaný čas: 1-2 hodiny
Většinu času zabere vytváření účtů u služeb. Samotné nasazení je otázkou minut.
Obsah
Claude Code vám pomůže
Pokud narazíte na jakýkoliv problém, spusťte Claude Code v terminálu příkazem claude a popište mu co se děje. AI asistent vám pomůže problém vyřešit.
Co budete potřebovat
Základní věci, které budete potřebovat pro spuštění e-shopu:
Základní požadavky
Počítač
Windows, Mac nebo Linux — cokoliv funguje
E-mailová adresa
Pro registrace u služeb (Vercel, Stripe...)
Co obdržíte po nákupu
ZIP soubor se složkou projektu
Obsahuje kompletní zdrojový kód e-shopu, který rozbalíte a můžete začít upravovat
Platební karta (pro Stripe ověření)
Stripe vyžaduje ověření karty při registraci. Nic se vám nestrhne — je to jen pro ověření identity.
Žádné speciální znalosti nejsou potřeba
Slovníček pojmů
Než začnete, je dobré vědět co jednotlivé nástroje a služby dělají. Tady je stručný přehled:
Programy na vašem počítači
Claude Code
Váš AI asistent. Běží v terminálu a pomáhá vám s čímkoliv — nastavení, úpravy, opravy. Stačí mu napsat co potřebujete a on to udělá za vás.
Terminál
Černé okno pro zadávání příkazů. Na Windows "Příkazový řádek" (cmd), na Mac "Terminal". Budete ho používat jen pro spuštění Claude Code.
Node.js
Program, který umožňuje spouštět e-shop na vašem počítači. Nainstalujete ho jednou a pak na něj můžete zapomenout.
VS Code(volitelné)
Editor pro prohlížení souborů. Není nutný — Claude Code zvládne vše sám. Hodí se pokud chcete vidět strukturu projektu.
Online služby
Vercel
Hosting — místo kde váš e-shop běží na internetu. Pro malé projekty je zdarma. Stará se o rychlost a dostupnost 24/7.
GitHub(volitelné)
Úložiště pro váš kód. Jako Dropbox, ale pro programátory. Není nutný, ale usnadňuje propojení s Vercelem.
Neon
Databáze — místo kde se ukládají produkty, objednávky, zákazníci. Bezplatná verze bohatě stačí.
Stripe
Platební brána — zpracovává platby kartou, Apple Pay, Google Pay. Platíte jen provizi z transakcí.
Resend
Služba pro odesílání e-mailů zákazníkům — potvrzení objednávky, info o odeslání. 3000 e-mailů měsíčně zdarma.
Nebojte se
Instalace Node.js
Proč ruční instalace? Node.js běží na pozadí a umožňuje e-shopu fungovat. Stačí ho nainstalovat jednou — všechny další příkazy už za vás spustí Claude Code.
- 1
Jděte na nodejs.org
- 2
Klikněte na tlačítko "Get Node.js®"
- 3
Na stránce Download vyberte verzi LTS (doporučená, aktuálně v24)
Stránka automaticky pozná váš systém a nabídne správný soubor
- 4
Otevřete stažený soubor → klikejte "Next" až do konce
- 5
Restartujte počítač
Registrace Claude Code
Claude Code je AI asistent, který vám pomůže s veškerým nastavením e-shopu.
AVytvoření účtu u Anthropic
- 1
Jděte na console.anthropic.com
- 2
Klikněte na "Sign Up" a vytvořte si účet (můžete použít Google účet)
- 3
Vyberte si tarif — doporučujeme Claude Pro ($20/měsíc)
Doporučené tarify:
- Claude Pro — $20/měsíc — ideální pro většinu uživatelů
- Claude Max — $100/měsíc — pro intenzivní používání
Předplatné je výrazně levnější než placení přes API kredity.
BInstalace Claude Code
- 1
Otevřete terminál:
- Windows: Win + R, napište
cmd, Enter - Mac: Cmd + Space, napište "Terminal", Enter
- Windows: Win + R, napište
- 2
Zkopírujte tento příkaz do terminálu a stiskněte Enter:
npm install -g @anthropic-ai/claude-code - 3
Počkejte až se instalace dokončí (může to trvat minutu)
CPrvní spuštění a přihlášení
- 1
V terminálu napište:
claude - 2
Při prvním spuštění se otevře prohlížeč pro přihlášení k vašemu Anthropic účtu
- 3
Přihlaste se a povolte přístup
- 4
Claude Code je připraven! Od teď s ním můžete komunikovat přímo v terminálu
Připraveno!
Vytvoření účtů u služeb
E-shop využívá několik bezplatných služeb. U každé si vytvořte účet.
Vercel
Hosting — kde bude e-shop běžet
- 1
Jděte na vercel.com
- 2
Klikněte na "Sign Up" a zaregistrujte se (doporučuji přes GitHub nebo e-mail)
- 3
Potvrďte e-mail pokud je to vyžadováno
Neon
Databáze — kde se ukládají produkty a objednávky
- 1
Jděte na neon.tech
- 2
Klikněte na "Sign Up" a zaregistrujte se
- 3
Po přihlášení klikněte na "New Project"
- 4
Pojmenujte projekt (např. "muj-eshop") a vyberte region eu-central-1 (Frankfurt)
Po vytvoření zkopírujte Connection string — uložte si ho!
Stripe
Platby — zpracování plateb kartou
- 1
Jděte na stripe.com
- 2
Klikněte na "Start now" a vytvořte účet
- 3
Projděte procesem ověření firmy/živnosti (můžete dokončit později)
- 4
V Dashboardu: Developers → API keys — zkopírujte oba klíče
Resend
E-maily — odesílání e-mailů zákazníkům
- 1
Jděte na resend.com
- 2
Zaregistrujte se a přihlaste
- 3
Jděte do API Keys a vytvořte nový klíč — uložte si ho!
Shrnutí — měli byste mít:
- ✓ Účet na Vercel
- ✓ Neon Connection string (databáze)
- ✓ Stripe Publishable key a Secret key
- ✓ Resend API key
Příprava projektu
Teď připravíme e-shop na vašem počítači.
Rozbalte projekt
Rozbalte ZIP soubor a přesuňte složku kam chcete (např. na Plochu)
Otevřete terminál ve složce
Windows: Otevřete složku → pravý klik → "Otevřít v Terminálu"
Mac: Pravý klik na složku → "New Terminal at Folder"
Spusťte Claude Code
Řekněte Claude Code co potřebujete
Claude Code udělá vše za vás — nastaví konfiguraci, nainstaluje závislosti, spustí e-shop.
"Nastav e-shop s těmito údaji:
- - Neon database: [váš connection string]
- - Stripe publishable key: [klíč]
- - Stripe secret key: [klíč]
- - Resend API key: [klíč]
A pak spusť e-shop lokálně."
Claude Code automaticky vytvoří konfiguraci, nainstaluje vše potřebné a spustí e-shop na localhost:3000
Lokální vývoj vs. produkce
E-shop můžete spustit dvěma způsoby.
Lokální vývoj
Na vašem počítači
E-shop vidíte jen vy. Pro testování a úpravy.
- •Testování nových funkcí
- •Úprava designu a obsahu
- •Experimentování bez rizika
Adresa:
http://localhost:3000Produkce
Na internetu (Vercel)
E-shop vidí všichni na internetu. Pro ostrý provoz.
- •Ostrý provoz e-shopu
- •Přijímání objednávek
- •Skutečné platby a doručení
Adresa:
https://vas-eshop.vercel.appZákladní příkazy v terminálu
Tyto příkazy budete používat nejčastěji.
npm installjednou na začátkuNainstaluje všechny potřebné knihovny.
npm run devlokální vývojSpustí e-shop na localhost:3000
npm run buildpřed nasazenímPřipraví e-shop pro produkci.
git add . && git commit -m "popis" && git pushnasazení změnNahraje změny na GitHub → Vercel automaticky nasadí.
npx prisma db pushdatabázeAktualizuje strukturu databáze.
claudeAI asistentSpustí Claude Code — pak mu pište co potřebujete.
Doporučený postup
npm run dev) → 2. Otestujte → 3. npm run build → 4. git pushNasazení na internet
Teď e-shop nahrajeme na Vercel, aby byl dostupný na internetu.
Možnost A: Přes GitHub (doporučeno)
- 1
Řekněte Claude Code:
"Vytvoř nový GitHub repozitář a nahraj tam tento projekt"
- 2
Ve Vercel dashboardu klikněte na "Add New Project"
- 3
Propojte svůj GitHub účet a vyberte repozitář
- 4
V sekci "Environment Variables" přidejte všechny proměnné z
.env - 5
Klikněte na "Deploy" a počkejte
Možnost B: Přes Vercel CLI
- 1
Nainstalujte Vercel CLI:
npm install -g vercel - 2
Spusťte nasazení:
vercel - 3
Odpovězte na otázky (většinou stačí Enter)
- 4
Po nasazení přidejte environment variables ve Vercel dashboardu
Hotovo!
vas-projekt.vercel.appNastavení plateb (Stripe)
Aby platby fungovaly, musíte nastavit webhook ve Stripe.
- 1
V Stripe dashboardu: Developers → Webhooks
- 2
Klikněte na "Add endpoint"
- 3
Jako Endpoint URL zadejte:
https://vase-domena.cz/api/stripe/webhookNahraďte doménu vaší skutečnou doménou nebo Vercel URL
- 4
Vyberte události:
- • payment_intent.succeeded
- • payment_intent.payment_failed
- • payment_intent.processing
- • checkout.session.completed
- • charge.succeeded
- • charge.updated
- 5
Klikněte na "Add endpoint"
- 6
Zkopírujte Signing secret (whsec_...) → přidejte do Vercel jako
STRIPE_WEBHOOK_SECRET
Přidání vlastní domény
Pokud chcete používat vlastní doménu místo vercel.app adresy.
- 1
Kupte si doménu u registrátora (Wedos, Forpsi, IONOS...)
- 2
Ve Vercel dashboardu: Settings → Domains
- 3
Přidejte vaši doménu
- 4
Vercel vám ukáže DNS záznamy pro nastavení u registrátora
- 5
Počkejte na propagaci DNS (většinou minuty, max 24 hodin)
První kroky po spuštění
E-shop běží! Všechny kroky můžete provést pomocí Claude Code.
Změna admin hesla (důležité!)
Výchozí přihlašovací údaje jsou veřejně známé. Je důležité je ihned změnit.
Řekněte Claude Code:
"Změň admin heslo na [vaše nové heslo]"
Nastavte info o obchodě
"Změň název e-shopu na [název] a nastav kontaktní email na [email]"
Přizpůsobte design
"Změň primární barvu e-shopu na modrou"
Přidejte produkty
"Přidej novou kategorii Oblečení" nebo "Přidej produkt Tričko za 499 Kč"
Nastavte dopravu
"Nastav cenu dopravy PPL na 99 Kč"
Nastavte e-maily
"Změň email odesílatele na info@muj-eshop.cz"
Otestujte objednávku
"Pomoz mi otestovat celý proces objednávky"
Pamatujte
Potřebujete pomoct?
Pokud si nevíte rady, Claude Code vám pomůže. Případně se na mě obraťte e-mailem.
