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
Nemusíte umět programovat. Claude Code vás provede všemi kroky a udělá složité věci za vás.
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. Nemusíte umět programovat.
Terminál
Černé okno pro zadávání příkazů. Na Windows se jmenuje "Příkazový řádek" (cmd), na Mac "Terminal". Vypadá to složitě, ale 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 - běží na pozadí.
VS Code (volitelné)
Editor pro prohlížení a úpravu souborů. Není nutný - Claude Code zvládne vše sám. Hodí se pokud chcete vidět strukturu projektu nebo ručně upravit nějaký soubor.
Online služby
Vercel
Hosting - místo kde váš e-shop běží na internetu. Jako pronájem prostoru pro web, ale pro malé projekty je zdarma. Stará se o to, aby byl e-shop rychlý a dostupný 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 a zálohování změn.
Neon
Databáze - místo kde se ukládají produkty, objednávky, zákazníci. Jako Excel tabulka, ale mnohem výkonnější. Bezplatná verze bohatě stačí.
Stripe
Platební brána - zpracovává platby kartou, Apple Pay, Google Pay. Největší na světě, používá ji Shopify, Amazon i Booking. 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, což pro začátek bohatě stačí.
Nebojte se
Nemusíte rozumět všemu do detailu. Claude Code vás provede celým procesem a vysvětlí vše co budete potřebovat vědět.
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 (Windows/Mac) 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. Stačí mu říct co potřebujete a on to udělá za vás.
AVytvoření účtu u Anthropic
- 1
Jděte na:
https://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. Pro jednorázové nastavení e-shopu vám Pro tarif bohatě stačí.
BInstalace Claude Code
- 1
Otevřete terminál:
- • Windows: Stiskněte Win + R, napište
cmda stiskněte Enter - • Mac: Otevřete Spotlight (Cmd + Space), napište "Terminal" a stiskněte Enter
- • Windows: Stiskněte 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!
Od tohoto momentu můžete Claude Code požádat o cokoliv. Stačí napsat co potřebujete a on to udělá.
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)
- 5
Po vytvoření zkopírujte Connection string - vypadá nějak takto:
postgresql://user:pass@ep-xxx.eu-central-1.aws.neon.tech/dbnameUložte si ho, budete ho potřebovat později!
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 jděte do Developers → API keys
Zkopírujte Publishable key a Secret key
Uložte si oba klíče, budete je potřebovat!
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 API klíč!
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 → klikněte pravým → "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. Pochopení rozdílu vám pomůže při práci.
Lokální vývoj
Na vašem počítači
Co to je?
E-shop běží na vašem počítači. Vidíte ho jen vy na adrese localhost:3000.
Kdy použít?
- •Testování nových funkcí
- •Úprava designu a obsahu
- •Experimentování bez rizika
Adresa:
http://localhost:3000Produkce
Na internetu (Vercel)
Co to je?
E-shop běží na serverech Vercelu. Vidí ho všichni na internetu.
Kdy použít?
- •Ostrý provoz e-shopu
- •Přijímání objednávek od zákazníků
- •Skutečné platby a doručení
Adresa:
https://vas-eshop.vercel.app>_Základní příkazy v terminálu
Tyto příkazy budete používat nejčastěji. Všechny se spouští v terminálu ve složce projektu.
npm installjednou na začátkuNainstaluje všechny potřebné knihovny. Spusťte po stažení projektu nebo když něco nefunguje.
npm run devlokální vývojSpustí e-shop na vašem počítači. Po spuštění ho uvidíte na localhost:3000
npm run buildpřed nasazenímPřipraví e-shop pro produkci. Ověří, že vše funguje správně. Spusťte před nahráním na Vercel.
git add . && git commit -m "popis změny" && git pushnasazení změnNahraje změny na GitHub. Vercel automaticky detekuje změny a nasadí novou verzi e-shopu.
npx prisma db pushdatabázeAktualizuje strukturu databáze. Použijte když změníte schema.prisma nebo při prvním nastavení.
claudeAI asistentSpustí Claude Code. Pak mu můžete psát co potřebujete a on to udělá za vás.
Doporučený postup
1. Upravujte lokálně (npm run dev) → 2. Otestujte že vše funguje → 3. Spusťte npm run build → 4. Nahrajte změny (git push)
Nasazení na internet
Teď e-shop nahrajeme na Vercel, aby byl dostupný na internetu.
Možnost A: Přes GitHub (doporučeno)
Pokud máte GitHub účet, toto je nejjednodušší způsob.
- 1
Řekněte Claude Code:
"Vytvoř nový GitHub repozitář a nahraj tam tento projekt"
- 2
V Vercel dashboardu klikněte na "Add New Project"
- 3
Propojte svůj GitHub účet a vyberte repozitář s e-shopem
- 4
V sekci "Environment Variables" přidejte všechny proměnné z vašeho
.envsouboruTip: Řekněte Claude Code "ukaž mi obsah .env souboru" a pak hodnoty zkopírujte
- 5
Klikněte na "Deploy" a počkejte
Možnost B: Přes Vercel CLI
Alternativní způsob přímo z terminálu.
- 1
Nainstalujte Vercel CLI:
npm install -g vercel - 2
Spusťte nasazení:
vercel - 3
Odpovězte na otázky (stačí většinou potvrdit Enterem)
- 4
Po nasazení přidejte environment variables ve Vercel dashboardu
Hotovo!
Váš e-shop by měl být nyní dostupný na adrese typu vas-projekt.vercel.app
Nastavení plateb (Stripe)
Aby platby fungovaly správně, musíte nastavit webhook ve Stripe.
- 1
V Stripe dashboardu jděte do Developers → Webhooks
- 2
Klikněte na "Add endpoint"
- 3
Jako Endpoint URL zadejte:
https://vase-domena.cz/api/stripe/webhookNahraďte "vase-domena.cz" vaší skutečnou doménou nebo Vercel URL
- 4
Vyberte události (Events) - klikněte na "Select events":
- • 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 (začíná na "whsec_") a přidejte ho do Vercel environment variables jako
STRIPE_WEBHOOK_SECRET
Tip: Řekněte Claude Code "Pomoz mi nastavit Stripe webhook" a on vás provede celým procesem.
Přidání vlastní domény
Pokud chcete používat vlastní doménu (např. vas-eshop.cz) místo vercel.app adresy.
- 1
Kupte si doménu u registrátora (Wedos, Forpsi, IONOS...)
- 2
Ve Vercel dashboardu jděte do Settings → Domains
- 3
Přidejte vaši doménu
- 4
Vercel vám ukáže DNS záznamy, které je potřeba nastavit u registrátora
- 5
Počkejte na propagaci DNS (může trvat až 24 hodin, většinou ale minuty)
Tip: Po přidání domény nezapomeňte aktualizovat Stripe webhook URL na novou doménu!
První kroky po spuštění
E-shop běží! Všechny následující kroky můžete provést pomocí Claude Code - stačí mu říct co potřebujete.
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]"
Claude Code bezpečně zahashuje heslo a uloží ho do databáze.
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" nebo "Nahraď logo za obrázek z /logo.png"
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č" nebo "Přidej osobní odběr zdarma"
Nastavte e-maily
"Změň email odesílatele na info@muj-eshop.cz"
Otestujte objednávku
"Pomoz mi otestovat celý proces objednávky"
Pamatujte
Claude Code zvládne prakticky cokoliv. Pokud si nevíte rady, prostě mu popište co potřebujete - změnit texty, barvy, přidat funkce, opravit chyby. On najde řešení.
Potřebujete pomoct?
Pokud si nevíte rady, Claude Code vám pomůže. Případně se na mě obraťte e-mailem.