TEXT ČLÁNKU JE POSKYTOVÁN „TAK, JAK JE", BEZ JAKÝCHKOLI ZÁRUK, VÝSLOVNÝCH NEBO PŘEDPOKLÁDANÝCH. POUŽITÍ NA VLASTNÍ ODPOVĚDNOST.
V předchozím článku Může si databázovou aplikaci vyrobit neprogramátor? jsme si ukázali databázovou aplikaci, kterou může udělat člověk, který není programátor.
V tomto článku se dostávám k tomu, jak ji může udělat. V minulém článku jsem řadu věcí přeskočil. Zde také záměrně přeskočím práci s databází, bylo by toho hodně najednou. Prvním krokem zde je nainstalování Claude Code na vašem počítači. Proč právě Claude Code? Protože ho ovládám a vím, jak s ním dosáhnout toho, co je potřeba, takže vám to můžu sdělit. A taky proto, že nic lepšího momentálně neexistuje.
Důležité varování. Claude Code bude pracovat přímo se soubory ve vašem počítači. Žádný izolovaný ostrůvek. Pěkně drsný kontaktní sport.
Když se kouknete na graf výše, i většina programátorů užívá jen Codex ve Visual Studio Code. Tedy o stupínek níž, co se týče kontaktnosti, než bude mít vaše Claude Code. Ten se nedostane jen na funkce, které může ovládat jen administrátor vašeho PC. Určitě mu nedávejte svůj mail, vytvořte mu vlastní e-mail. Přístup do prohlížeče skrze MCP (jestli se k tomu někdy dostanete) dávejte také na jiný prohlížeč, než ten, který běžně používáte. Třeba já mám Chrome on – Chromium já. Paranoici zavírají Claude Code do jakéhosi počítače v počítači — kontejneru. Při zachování určitých drobných opatření, jako ty výše, to ale v případě Claude Code není nutné a naopak by to omezilo přístup k tomu, co je třeba.
Takže znovu: může vám Claude Code smazat soubory na vašem počítači? Může. Nepracujete zde s deterministickým programem, ale se statistickým modelem a je vždy nenulová pravděpodobnost, že vám je vymaže.
Hodně velká pravděpodobnost je zvlášť tehdy, když považuje za logické, že když maže tohle, tak vymaže i tohleto. Pro jentakmirnixtyrnix mazání je pravděpodobnost miniaturní, třeba 0,00000001 %. Pravděpodobnost pomýleného mazání „protože je to přece logické" je ale třeba už 1 %. Co z toho plyne? AI za vás udělá úplně všechno. Jenom jedno slovo před ní neříkejte a mazání souborů proveďte ručně. Smazání tabulky databáze je už docela pruda, tak to mu nechejte udělat, ale předtím zálohujte.
Napadne vás, proč to teda dělat, když je to tak nebezpečné? Tak ten důvod je jednoduchý. Vaše výkonnost a schopnosti se zmnohonásobí. Nejdůležitější je kontext. Člověk má kontextuální paměť — tedy paměť na věci, které při přemýšlení využívá. A do souvislosti najednou dává jen 4 kousky. Ano, čtyři. AI tu samou věc zvládne s milionem. 1 000 000 : 4 — to je celý ten důvod.
Jeden programátor dal na internet metaforu starých programátorských časů, které odcházejí pryč, jako kdysi ten Divoký západ. Je to z toho filmu, jak zálesák našel medvídě a to si vychoval na pěkného medvěda a pak spolu chodili nádhernou přírodou. Tak to je nenávratně v čudu — mít své programátorské nástroje, ty si dokonale ovládnout a pak s tím celej život frajeřit. Jak řekl Samuel Colt (a Claude): „Bůh stvořil muže silné a slabé, já jsem to srovnal." Konec výjimečnosti, ty kouzla teď dokáže s Claude Code skoro každý.
Do komentáře jsem mu dal alegorii dnešní doby. Takhle si nějak představuji Claude Code a sebe. Žádný krotký medvídek. Mimochodem s chlapíkem z filmu jsme si celkem podobní.
Tak. Povinné bububu máme za sebou a teď k dalším věcem.
Ještě poznámka. Jestli vás v dalších odstavcích zachvátí pocit „tohle už na mě začíná být moc" — běžte rovnou na předposlední kapitolu. Možná využijete právě té alternativy.
Na Claude Code potřebuje účet u Anthropic a placené předplatné. Začněte na claude.com: založte si účet a předplaťte si nejlevnější plán Claude Pro za cca 20 dolarů měsíčně.
To vám dává možnost pracovat s webovou aplikací na claude.ai, jako je Chat GPT, dále s aplikací s obdobnou filosofií, jako má Google Gemini. A nakonec pomocí Claude Code. A právě Claude Code je ta věc, která za vás napíše software.
Claude.ai si hned spusťte v prohlížeči. Funguje jako Chat GPT a poslouží dobře k tomu, aby vás provedl instalací a já se zde nemusel obšírně rozepisovat. Co člověka hned překvapí, je komunikace. GPT bývá arogantní rozumbrada, Claude kooperující kolega.
Ptejte se na instalaci Claude Code v terminálu pomocí curl, či pokud jste ve Windows v PowerShellu pomocí irm. Vždy uveďte váš operační systém. Po instalaci pak už stačí jen znovu otevřít terminál a spustit claude. Na začátku je pár otázek, hlavně pak licencování. Vše je hodně jednoduché, pokud máte licenci na gmail adresu.
Vydatně se ptejte Claude.ai — nějak se rozepisovat s podrobným postupem s takovým našeptávačem nedává smysl. Zde stačí základní operace. Celkem mě v tomto kontextu baví vznik poradenských společností na používání Claude Code. Takže Claude vám najde a vyrobí úplně všechno. Jenom vám neporadí sám se sebou, a proto byste si měli někomu zaplatit 😂😂😂😂😂.
Když je instalace hotová, zavřete a otevřete znova terminál. Napíšete claude, stisknete Enter a začne to fungovat. Teď už nemusíte vůbec nic. Všechno za vás obstará Claude Code.
Claude Code je nutné spustit v nějakém adresáři, kde budete pracovat. Adresář není sandbox, Claude Code se dostane i do jiných adresářů. Spíše jde o to, že když řeknete „udělej mi soubor klusackova_departures.html", udělá ho právě tam. Jakýsi implicitní středobod práce. A hlavně, opětovným spuštěním v tomto adresáři si pamatuje vše, co bylo předtím. Jinde ne.
Pokud nejste příliš zběhlí v používání terminálu, ten adresář si vytvořte ve File Manageru. Pravým myšítkem na tom adresáři dejte otevřít terminál a v terminálu napište claude + Enter. Na slovo terminál pak už zapomeňte.
No a podadresář, to už dělat nemusíte, vlastně už vůbec nic dělat nemusíte. Prostě:
USER: zaloz mi adresar pokusy; budeme ted pracovat tam
Co teda teď naprogramujeme? Aplikaci, která vám poví, kdy vyrazit z kanceláře, abyste pohodlně stihli tramvaj, která navazuje na vlak. Z jedné konkrétní stanice do jednoho konkrétního cíle — nic lépe nedokumentuje změnu ve vývoji software. Je milion takových možných aplikací, co avizují odchod z kanceláře na dopravní spojení. A je rozumné jich s dnešními prostředky milion vyrobit, aby každá přesně odpovídala vašemu konkrétnímu případu, bez nějakého klikání a konfigurování. Dále v článku bude rozebrána ekonomika takové aplikace. A bude pro vás naprosto šokující.
Hotový výsledek je tady — můžete si ho prohlédnout naživo.
Nejdříve je nutné získat data pro tuto aplikaci. Žádné online datové rozhraní není k dispozici.
Použijeme statickou sadu z dopravního podniku KORDIS JMK. To je standardní formát jízdních řádů definovaný Googlem, který distribuuje většina městských dopravců na světě. Stahuje se to jako jeden ZIP soubor z https://kordis-jmk.cz/gtfs/gtfs.zip — uvnitř je pár CSV tabulek (zastávky, linky, spoje, časy odjezdů, kalendář platnosti).
Ale tohle na začátku nevíte, takže:
USER: najdi mi nejaky verejny zdroj o jizdnich radech Jihomoravskeho kraje.
A poté, když se dovíte, že jsou to jen data ke stažení:
USER: stahni jizdni rady pro trasu Klusackova-Brno, Hlavni nadrazi a Brno, hlavni nadrazi-Blansko. Pak z toho vyber typicky tyden Po-Ne pro tyto spoje, tj. treba tento je beze svatku. Nasledne projdi den po dni; kdykoli se konkretni den lisi od sablony Po-Ne, uloz ho zvlast jako vyjimku s celym dennim rozpisem. Zaloz soubor klusackova_departures.html a tam to dej jako data. Nasledne dopln do html aplikaci: zobrazuj cas nejblizsiho odjezdu tramvaje, ktera navazuje na nejaky konkretni vlak. Vem 5 nejblizsich vlaku Brno hl.n. → Blansko, k nim najdi vhodnou tramvaj 12 z Klusackovy, a zobraz cas odjezdu te nejblizsi tramvaje. Data z JSONu vloz primo do HTML, ze aplikace funguje dvojklikem bez serveru.
Když to vyrobíte ve svém počítači, stránku klusackova_departures.html jednoduše otevřete ve svém prohlížeči.
Nyní je nutno se pozastavit. Vyrobili jste první verzi aplikace. Jak? „… zobrazuj čas nejbližšího odjezdu tramvaje, která navazuje na nějaký konkrétní vlak …" — přesně takto. To je dnes programátorský jazyk, říká se mu čeština, každý to umí od 1–2 let. Kdo má hodinu času a chuť si to osahat, ten dnes zvládne.
Není dobré aplikaci dělat jedním promptem, ale iterativně. Nakonec i kdybychom se o to pokusili, budou určitě úpravy, třeba jen se nám nebude líbit layout apod. Ten náš první prompt byl první iterace. Pro jistotu jsem ale i naznačil, co asi tak bude s daty dělat.
Takže teď už má uvnitř strategii, že najde 5 vlaků, na ně napojí 5 tramvají a najde ten poslední spoj, který ještě neodjel. Takže zpřesníme:
USER: uprav, aby ta tramvaj byla vybrana tak, ze bude 5 minut na prestup na vlak. Taky zobrazuj jen takovou tramvaj, ktera pojede az nejmene za 10 minut; vystup uprav takto: Vyrazit za M min SS s (cas do odchodu na tramvaj) -> jaka tramvaj HH:MM (nasledujici zarovnej vpravo) Cas celkem: XX min (doba cesty Klusackova - Blansko) prestup X min -> (oznaceni vlaku)
Další prompt:
USER: zobraz mi takto tri nejblizsi spoje, kde je cas do odjezdu tramvaje vice nez 10 minut. Nad to jeste pridej spoje, kde tramvaj jeste neodjela, ale uz je k ni mene jak 10 minut — ty zobraz sedym textem (uz na ne nestihneme dojit). Pod nadpisem zobraz zelene aktualni cas HH:MM:SS.
Shrnutí všech příkazů, co jsme použili, neuškodí:
To Claude Code přeložil na tohle — HTML + CSS + JavaScript. Nijak se toho nelekejte, já to už taky moc nečtu, dal jsem pro zajímavost:
<!doctype html>
<html lang="cs">
<head>
<meta charset="utf-8">
<title>Vyrazit</title>
<style>
body { font: 16px/1.5 system-ui, sans-serif; background: #1a1a1a; color: #eee;
max-width: 720px; margin: 2rem auto; padding: 1rem; }
h1 { font-size: 1rem; color: #888; font-weight: normal; margin-bottom: 0.3rem; }
.clock { font-family: monospace; color: #4caf50; font-size: 1.15rem;
margin-bottom: 1.3rem; letter-spacing: 0.05em; }
.conn { display: grid; grid-template-columns: 1fr auto auto;
column-gap: 1.5rem; row-gap: 0.3rem;
background: #222; border-radius: 8px;
padding: 0.9rem 1.1rem; margin-bottom: 0.6rem;
align-items: baseline; }
.conn.dim { color: #666; }
.conn.dim .tramVal,
.conn.dim .vyrazit b { color: #666; }
.vyrazit { grid-column: 1; grid-row: 1; font-size: 1.05rem; }
.vyrazit b { color: #fff; }
.tramVal { grid-column: 2; grid-row: 1; font-family: monospace; color: #4caf50; text-align: right; font-size: 1.05rem; }
.celkem { grid-column: 3; grid-row: 1; color: #888; white-space: nowrap; }
.prestup { grid-column: 1; grid-row: 2; color: #888; font-size: 0.95rem; }
.vlakName { grid-column: 2 / span 2; grid-row: 2; color: #888; text-align: right; font-size: 0.95rem; }
.none { color: #666; font-style: italic; }
</style>
</head>
<body>
<h1>Klusáčkova → Brno hl.n. → Blansko</h1>
<div class="clock" id="clock"></div>
<div id="out"></div>
<script>
const SCHEDULE = {...data...};
const TRANSFER_MIN = 5;
const URGENT_MIN = 10;
function dayData(d) {
const iso = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
if (SCHEDULE.exceptions[iso]) return SCHEDULE.exceptions[iso];
return SCHEDULE.template[['ne','po','ut','st','ct','pa','so'][d.getDay()]];
}
function toTs(dateObj, hhmm) {
const [h, m] = hhmm.split(':').map(Number);
const d = new Date(dateObj);
d.setHours(h, m, 0, 0);
return d.getTime();
}
function flat(kind) {
const out = [];
for (let off = 0; off < 2; off++) {
const day = new Date();
day.setHours(0, 0, 0, 0);
day.setDate(day.getDate() + off);
const data = dayData(day);
for (const it of data[kind]) {
out.push({ ...it, depTs: toTs(day, it.dep), arrTs: toTs(day, it.arr) });
}
}
return out;
}
function fmtCountdown(ms) {
const total = Math.max(0, Math.floor(ms/1000));
const m = Math.floor(total/60);
const s = total % 60;
return `za ${m} min ${String(s).padStart(2,'0')} s`;
}
function fmtClock() {
const d = new Date();
return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`;
}
function render() {
document.getElementById('clock').textContent = fmtClock();
const now = Date.now();
const trains = flat('trains').filter(t => t.depTs > now).sort((a,b) => a.depTs - b.depTs);
const trams = flat('trams');
// pro kazdy vlak posledni tramvaj kterou stihne (5 min prestup), tram musi byt v budoucnu
const allConns = [];
const seen = new Set();
for (const train of trains) {
const tram = trams
.filter(t => t.depTs > now && t.arrTs + TRANSFER_MIN*60*1000 <= train.depTs)
.sort((a,b) => b.depTs - a.depTs)[0];
if (!tram) continue;
if (seen.has(tram.depTs)) continue;
seen.add(tram.depTs);
allConns.push({ tram, train });
}
allConns.sort((a,b) => a.tram.depTs - b.tram.depTs);
// sede (tram odjizdi do 10 min) + 3 normalni (tram > 10 min)
const dim = allConns.filter(c => c.tram.depTs - now < URGENT_MIN*60*1000);
const normal = allConns.filter(c => c.tram.depTs - now >= URGENT_MIN*60*1000).slice(0, 3);
const conns = [...dim, ...normal];
const out = document.getElementById('out');
if (!conns.length) { out.innerHTML = '<p class="none">Nic v dohledu.</p>'; return; }
out.innerHTML = conns.map(({tram, train}) => {
const transferMin = Math.round((train.depTs - tram.arrTs) / 60000);
const totalMin = Math.round((train.arrTs - tram.depTs) / 60000);
const untilTram = tram.depTs - now;
const isDim = untilTram < URGENT_MIN*60*1000;
return `
<div class="conn ${isDim ? 'dim' : ''}">
<div class="vyrazit">Vyrazit <b>${fmtCountdown(untilTram)}</b></div>
<div class="tramVal">→ tram 12 ${tram.dep}</div>
<div class="celkem">Čas celkem: <b>${totalMin} min</b></div>
<div class="prestup">přestup ${transferMin} min</div>
<div class="vlakName">→ ${train.line} ${train.dep} ${train.headsign}</div>
</div>`;
}).join('');
}
render();
setInterval(render, 1000);
</script>
</body>
</html>To je trochu analogie dřívějších dob, kdy nějaký umělý jazyk — třeba BASIC — byl překládán na strojový kód, který už procesor přímo vykonává. V tomto novém světě je tím „vyšším jazykem" prostá čeština; „překladačem" Claude Code; „strojový kód" interpretuje váš prohlížeč.
Hello world v BASICu vypadal takhle:
A jeho překlad do strojového kódu (pro procesor Intel 286 pod DOSem) takhle:
Na tom je legrační, že Claude Code zvládl i ten překlad do strojového kódu 😊😊😊😊.
Tohle je moje aplikace. Jezdím z Klusáčkové do Blanska. Vy ale nejedete odsud tam. Jezdíte odjinud někam jinam. Tak pro vás bude aplikace jiná.
Klasický programátor by řekl: udělejme jednu, která pojme všechny případy, a uživatel si nastaví. Otevřete settings, vyplníte dvanáct polí, vyberete z pěti menu — a po pár pokusech máte to, co potřebujete.
Nová logika je jiná. Každý může mít vyrobenu svoji aplikaci přesně. Bez settings, bez voleb, bez kompromisů. Řeknete „chci tohle pro tohle" — a je hotová. Sousedovi druhou. Tetě třetí.
Miliony lidí, miliony odjezdových míst, miliony aplikací. Pro každou blbost a přesně podle toho, jak ji ten konkrétní člověk potřebuje. To je exploze programování. Ne stejný software pro víc lidí — víc software pro každého, jak chce.
Možná je to nový styl osobního pracovního prostředí. Sada osobních dashboardů, každý přesně pro to, co ten jeden člověk denně dělá. Vlastní operační systém pro vlastní život.
Spočítejme to. Hledat spojení v IDOSu vám zabere v průměru řekněme tři minuty. Můžete to dělat tak desetkrát týdně. To je třicet minut týdně, 26 hodin ročně — tři pracovní dny a kus navíc, které jste strávili klikáním ve formuláři.
S touhle aplikací: otevřete, číslo je tam. A ne nějaký odjezd, ke kterému musíte dopočítat čas na cestu. Je tam čas odchodu z kanceláře.
A to je jen jedna aplikace. Pak je tu vyplňování formulářů, kontrola stavu objednávek, hledání informací v Excelu, který by mohl být databázovou aplikací — věci, které se počítají v minutách a sčítají do hodin.
Tohle je ekonomika, která dřív platila jen pro velké projekty. Pár hodin ročně ušetřených u jedné aplikace se nevyplatilo postavit proti programátorské práci. Teď, když ta aplikace stojí třeba hodinu vašeho či programátorského času s AI, vyplatí se to vlastně vždycky, když děláte cokoli třeba jen pár minut denně či pár hodin týdně. Z 26 hodin ročně se stanou 2.
A na závěr trochu jiný příklad. Roky jsem hledal jednu věc: timer, který by mi odkrajoval čas práce, abych se zvedl, prošel, udělal několik dřepů. Bez nastavení, zda chci stopky či hodiny, a s jednoduchým způsobem zadání a jednoduchým ovládáním. Existující aplikace měly spoustu voleb, a přesto dělaly to, co by měly, trochu jinak. Hlavně nezpůsobily řádný poplach, ale současně jsem potřeboval, aby byly trochu nevtíravé — je přece potřeba dokončit těch pár kliků.
Před týdnem jsem si vyrobil přesně to. Bleskově vyrobeno. Pípne tehdy, kdy má. Blikne tak, jak má. Bez nastavení. Funguje. A konečně zdravý život, dřepů nepočítaných.
Je o tom, že každá hloupost, kterou jste roky chtěli a neměli, je teď možná. A to jsem programátor. Přesto jsem si ten čas neudělal, až teď.
Pokud čtete, kýváte hlavou, ale představa, že se s tím budete dlouze učit, vás ubíjí — můžete to celé obejít. Někdo vám to postaví. Možná že je to i levnější než pálení vašeho času. Někdy je dobré si od programátora udělat aspoň základ a poté uzpůsobovat sám.
Zde zadáte zase jen slovní zadání, ale celé to půjde přes zprostředkovatele — programátora.
A nebojte se, není tam robot. Chatovat budete s programátorem — člověkem. Za přihlášení a dotaz nic nedáte. S trochou štěstí to navíc může být jen recyklace nějakého už jednou použitého řešení.
Naše aplikace má jeden háček: za pár měsíců budou jízdní řády neaktuální a aplikaci musíte dodat novou. To je pár minut práce, Claude si poznamenal, jak na to přímo do aplikace, ale stejně to nechcete.
Nastupuje zase ta naše neúprosná ekonomika 15 minut × 12 měsíců × 5 let = 15 hodin. Dva pracovní dny byste na tom za 5 let nechali, za půl hodiny ale můžete mít hotovo. Ty dva dny si zase můžete připočítat k dovolené, co vám tyhle miniaplikace zachrání.
V příštím článku proto tuto činnost zautomatizujeme. Použijeme k tomu právě to, co jsme zde vynechali — Supabase Postgres databázi. Vaše osobní cloudová databáze. Na cokoli, včetně třeba komentovaných alb rodinných obrázků. Do určité velikosti zcela zdarma.
Supabase potom občas jízdní řády stáhne, rozzipuje a uloží do tabulek. Ty staré smaže. Odtud si je pak bude vaše aplikace brát. A už na to nemusíte až do konce vesmíru sáhnout.
Takže v příštím článku si Supabase zprovozníte a naučíte se ji skrze Claude Code dirigovat.
Naviděnou.