Úpravy v Claude Code (desktop aplikace + browser)

Proč to děláme#

Vibe coding platformy umožňují pohodlně vytvořit plnohodnotné aplikace. Přesto dává smysl nezůstávat se svým projektem pouze v jejich prostředí. Platformy mají ve free verzi významně omezené limity na úpravy. Pokud chcete dělat úprav více nebo pracujete na větším projektu, je potřeba placená verze a i u té kredity velmi rychle dochází. Kromě toho jsme také závislí na třetí straně a některé věci je možné upravovat pouze složitě. A v neposlední řadě, pokud bychom zůstali jen u platforem, tak nám zůstane skryto mnoho radosti z učení se nových věcí :)

Je vhodné tedy v úpravách dále pokračovat přes Claude Code, který je naprostou většinu času tím nejlepším toolem na vibe coding.

Co budeme potřebovat#

Hotový projekt v Lovable nebo jiné VC platformě (z Workshopu 1)
Účet na GitHubu.
V počítači nainstalovaný GitHub Desktop
Vlastní účet v Claude + je vhodné mít desktop aplikaci Claude
Nainstalované VS Code

A ještě pár slov než začneme#

Je vhodné si ujasnit pár pojmů. Detailní popis je ve slovníčku.
Claude - pokud mluvíme pouze o Claude, máme tím na mysli klasický konverzační chatbot, se kterým jsme v kontaktu většinu času. Je schopen nám vygenerovat kus kódu (report, stránka), ale neumí pracovat a přímo upravovat celé repozitáře. Jsme ale schopni mu dát náhled do našeho projektu a používat ho pro konzultace a plánování dalšího rozvoje.

Claude Code - tohle je samostatný produkt/řada produktů, které jsou narozdíl od klasického Claude už schopny pracovat přímo s repozitáři a dělat v nich úpravy. S Claude Code se dnes setkáme v několika variantách:

v prohlížeči
v desktop aplikaci Claude
jako rozšíření ve VS Code
přímo v terminálu

My budeme pracovat v tomto workshopu s prohlížečem + desktop aplikací. Doporučuji desktop aplikaci, která umožňuje i live náhledy projektu, ale pokud ji nemáš nainstalovanou (např. kvůli oprávněním v práci), web verze funguje také dobře.

GitHub Desktop a VS Code - tyto nástroje nám umožňují pracovat s naším projektem lokálně v našem počítači. GitHub Desktop nám stáhne kód projektu počítače a zase zpět na cloud.
VS kód pak umožňuje testovat výsledek našich úprav + přímo zasahovat do kódu, pokud je to potřeba.

Postup krok za krokem - web#

Z minulého workshopu máme už svůj projekt propojený s GitHubem. Stejně tak máme propojený GitHub s Claudem. Pokud tato propojení ještě nemáš, návod je zde.
Otevři si https://claude.ai/code a přihlas se svým Claude účtem
Vyber svůj projekt na GitHub, se kterým chceš pracovat a piš svoje požadavky na úpravy projektu
Když máš úpravy hotové, otevři GitHub desktop aplikaci, přihlas se svým GitHub účtem a naklonuj si vybraný repozitář (tím dostaneš kód projektu k sobě do počítače)
Claude Code ti vytvořil novou větev projektu - v GitHub desktop můžeš přepínat mezi jednotlivými variantami. Pokud by úpravy nedopadly dobře, jedním kliknutím se můžeš vrátit zpět na původní verzi.
Otevři si VS Code a v něm otevři složku s naklonovaným projektem z kroku 4: File->Open Folder.
Cesta bude vypadat cca takto: C:\Users\LadislavUhlir\Documents\GitHub\tvůj projekt
++Ve VS Code udělej tyto kroky:++

Otevři si terminál - ikona vpravo nahoře
dole v nabídce klikni na + a vyber Command Prompt
v terminálu dole napiš "npm install" - tím se nainstalují potřebné závislosti tvého projektu
následně napiš "npm run dev" - tím se ti spustí tvůj projekt lokálně a přes URL, který ti VS code nabídne, můžeš svůj projekt testovat v prohlížeči

Následně můžeš pokračovat v úpravách přes Claude Code v prohlížeči - po každé úpravě, kterou chce udělat, je potřeba v Github desktop kliknout na Pull origin/fetch origin. Tím dojde k automatickým změnám i v testovacím prostředí.
Když máš úpravy hotové, je potřeba dostat tyto úpravy i na live produkci. Claude Code nám totiž vytvořil novou větev projektu a my ji musíme sloučit s hlavní větví. V GitHub desktop otevřu Current Branch, vyberu Main a kliklnu na Choose a branch to merge into main -> následně vyberu tu branch s úpravami od Claude code.

Po sloučení pak kliknu na Push origin -> tím dostaneme aktuální verzi našeho projektu na Github a pokud ho máme už propojený i s hostingem, dojde k aktualizaci. Zároveň tyhle změny uvidíme i v Lovable a jiných platformách a můžeme klidně dál pokračovat tady.

Postup krok za krokem - aplikace Claude#

Z minulého workshopu máme už svůj projekt propojený s GitHubem. Stejně tak máme propojený GitHub s Claudem. Pokud tato propojení ještě nemáš, návod je zde.
Otevři GitHub desktop aplikaci, přihlas se svým GitHub účtem a naklonuj si vybraný repozitář (tím dostaneš kód projektu k sobě do počítače)
Otevři si Claude Desktop aplikaci a přihlas se svým Claude účtem. V panelu vlevo vyber záložku Code
Začni novou session a vyber složku, kam sis v předchozím kroku naklonoval repozitář.
Cesta bude vypadat cca takto: C:\Users\LadislavUhlir\Documents\GitHub\tvůj projekt
Popiš v konverzačním poli jaké úpravy chceš udělat - Claude Code to začne dělat přímo ve složce, kam jsi ho pustil
Otevři si VS Code a v něm otevři složku s naklonovaným projektem z kroku 4: File->Open Folder.
Cesta bude vypadat cca takto: C:\Users\LadislavUhlir\Documents\GitHub\tvůj projekt
POZOR - Claude Code v desktop občas vytvoří úplnou kopii projektu ještě hlouběji, tzv. worktree - v takovém případě bude cesta cca takto: C:\Users\LadislavUhlir\Documents\GitHub\tvůj projekt\claude\worktree\název toho worktree
++Ve VS Code udělej tyto kroky:++

Otevři si terminál - ikona vpravo nahoře
dole v nabídce klikni na + a vyber Command Prompt
v terminálu dole napiš "npm install" - tím se nainstalují potřebné závislosti tvého projektu
následně napiš "npm run dev" - tím se ti spustí tvůj projekt lokálně a přes URL, který ti VS code nabídne, můžeš svůj projekt testovat v prohlížeči

Následně můžeš pokračovat v úpravách přes Claude Code v aplikaci - po každé úpravě dojde k automatickým změnám i v testovacím prostředí.
Když máš úpravy hotové, je potřeba dostat tyto úpravy i na live produkci. Claude Code nám totiž vytvořil novou větev projektu a my ji musíme sloučit s hlavní větví. V GitHub desktop otevřu Current Branch, vyberu Main a kliknu na Choose a branch to merge into main -> následně vyberu tu branch s úpravami od Claude code. Pokud novou větev nevidíme, řekněme Claude Code ať změny commitne. Větev se objeví.