Postav si s AI svou první užitečnou aplikaci

Krok 1: Popiš problém vlastními slovy

Nakupuje skoro každý, a proto je nákupní seznam ideální první projekt. Nemusíš rozumět programování, abys poznal, jestli nákupní seznam funguje: napíšeš chleba, mléko a vejce, uvidíš celkovou částku a během nákupu věci odškrtáváš. Výsledek můžeš opravdu používat hned tento týden.

Než otevřeš jakýkoli AI nástroj, dokonči na papíře nebo v poznámce tyto tři věty. Je to nejdůležitější programátorská dovednost celé knihy: proměnit přání v konkrétní pravidla.

1. Potřebuji si zapsat… (například: každou položku, kolik kusů potřebuji a cenu za kus).
2. Chci, aby program spočítal… (například: cenu každého řádku a celkovou částku za celý nákup).
3. Poznám, že program funguje, když… (například: dvě položky po 25 Kč ukážou 50 Kč a odškrtnutí položky celkovou částku nezmění).

Krok 2: Postav první malou verzi

První verze je jediný soubor, který se otevře ve webovém prohlížeči. Nemusíš instalovat žádné vývojové prostředí, nepotřebuješ server ani přihlašování. Zkopíruj prompt níže do svého AI asistenta (Claude, ChatGPT nebo podobného) přesně tak, jak je.

Pomoz mi postavit mou první jednoduchou aplikaci. Jsem úplný začátečník.

Vytvoř nákupní seznam v jediném souboru s názvem nakup.html, který otevřu ve webovém prohlížeči. Všechny styly i celý JavaScript dej do tohoto jednoho souboru, bez externích knihoven.

Chci zadat název položky, počet kusů a cenu za jeden kus. Tlačítkem položku přidám do seznamu. Zobraz cenu každého řádku a dole celkovou částku za celý nákup. Umožni mi položku smazat a označit ji jako koupenou. Označení položky jako koupené nesmí změnit celkovou částku.

Odmítni prázdný název, neplatná čísla, zápornou cenu a počet nula nebo menší. V ceně přijímej desetinnou tečku i desetinnou čárku.

Nejdřív stručně vysvětli plán. Pak napiš kompletní kód a přesný postup, jak soubor uložit a otevřít. Zatím nepřidávej žádné další funkce.

1. Zkopíruj kód. Použij tlačítko pro kopírování v odpovědi AI, ať máš celý kód od prvního do posledního řádku.
2. Ulož ho jako nakup.html. Otevři obyčejný textový editor (Notepad ve Windows, TextEdit v režimu prostého textu na Macu), vlož kód a ulož ho jako nakup.html. Jako typ souboru zvol „Všechny soubory“, ne „Textový dokument“.
3. Otevři ho v prohlížeči. Poklepej na soubor nebo ho přetáhni do okna prohlížeče. Měl bys vidět svůj nákupní seznam, ne stránku plnou kódu.

Krok 3: Ověř, že to není jen hezký obrázek

Aplikace, která vypadá správně, ještě není aplikace, která funguje. Projdi tuto tabulku řádek po řádku a porovnej, co vidíš, se správným výsledkem. Tohle je tvůj první skutečný test.

Když některý řádek neprojde, zatím kód neopravuj ručně. Řekni AI přesně, který řádek selhal, co jsi zadal a co jsi místo toho uviděl, a požádej ji, ať opraví jen tento jeden problém.

Krok 4: Udělej jednu změnu sám

Teď udělej první změnu, aniž by ji za tebe napsala AI. Zeptej se AI: „Kde v mém kódu je nadpis aplikace?“ Ukáže ti řádek, který vypadá přibližně jako <h1>Nákupní seznam</h1>.

1. Najdi nadpis. Otevři nakup.html v textovém editoru a najdi řádek, na který tě AI upozornila.
2. Změň text. Nahraď slova mezi <h1> a </h1> vlastním názvem, například „Sobotní nákup“. Ostré závorky nemaž.
3. Ulož a obnov stránku. Ulož soubor, vrať se do prohlížeče a obnov stránku. Měl by se objevit tvůj nový nadpis.

Pak požádej AI, ať ti vysvětlí tvůj vlastní soubor ve třech částech a jako příklad použije tvůj kód. Uvidíš, že každá webová aplikace se skládá ze stejných tří vrstev:

Krok 5: Nauč aplikaci novou dovednost

Skutečné programy rostou po malých krocích. Přidej jednu novou funkci a pak znovu testuj. Pošli AI ve stejné konverzaci tento navazující prompt:

Přidej do mého nákupního seznamu rozpočet. Umožni mi zadat částku, kterou chci utratit. Zobraz, kolik zbývá. Když celková částka rozpočet překročí, zobraz jasné upozornění s částkou, o kolik jsem ho překročil. Všechno ostatní musí fungovat přesně jako dosud. Ukaž mi celý aktualizovaný soubor.

Právě jsi postavil, spustil, otestoval a upravil skutečnou aplikaci. Není to celé programování, ale je to postup, který budeš opakovat v každé další lekci: jasně popsat, nechat AI vygenerovat, ověřit proti očekávaným výsledkům a měnit vždy jen jednu věc.