Postav si s AI svoju prvú užitočnú aplikáciu

Krok 1: Opíš problém vlastnými slovami

Nakupuje takmer každý, a preto je nákupný zoznam ideálny prvý projekt. Nemusíš rozumieť programovaniu, aby si spoznal, či nákupný zoznam funguje: napíšeš chlieb, mlieko a vajcia, uvidíš celkovú sumu a počas nákupu veci odškrtávaš. Výsledok môžeš naozaj používať hneď tento týždeň.

Skôr než otvoríš akýkoľvek AI nástroj, dokonči na papieri alebo v poznámke tieto tri vety. Je to najdôležitejšia programátorská zručnosť celej knihy: premeniť želanie na konkrétne pravidlá.

1. Potrebujem si zapísať… (napríklad: každú položku, koľko kusov potrebujem a cenu za kus).
2. Chcem, aby program vypočítal… (napríklad: cenu každého riadku a celkovú sumu za celý nákup).
3. Spoznám, že program funguje, keď… (napríklad: dve položky po 25 € ukážu 50 € a odškrtnutie položky celkovú sumu nezmení).

Krok 2: Postav prvú malú verziu

Prvá verzia je jediný súbor, ktorý sa otvorí vo webovom prehliadači. Nemusíš inštalovať žiadne vývojové prostredie, nepotrebuješ server ani prihlasovanie. Skopíruj prompt nižšie do svojho AI asistenta (Claude, ChatGPT alebo podobného) presne tak, ako je.

Pomôž mi postaviť moju prvú jednoduchú aplikáciu. Som úplný začiatočník.

Vytvor nákupný zoznam v jedinom súbore s názvom nakup.html, ktorý otvorím vo webovom prehliadači. Všetky štýly aj celý JavaScript daj do tohto jedného súboru, bez externých knižníc.

Chcem zadať názov položky, počet kusov a cenu za jeden kus. Tlačidlom položku pridám do zoznamu. Zobraz cenu každého riadku a dole celkovú sumu za celý nákup. Umožni mi položku zmazať a označiť ju ako kúpenú. Označenie položky ako kúpenej nesmie zmeniť celkovú sumu.

Odmietni prázdny názov, neplatné čísla, zápornú cenu a počet nula alebo menej. V cene prijímaj desatinnú bodku aj desatinnú čiarku.

Najprv stručne vysvetli plán. Potom napíš kompletný kód a presný postup, ako súbor uložiť a otvoriť. Zatiaľ nepridávaj žiadne ďalšie funkcie.

1. Skopíruj kód. Použi tlačidlo na kopírovanie v odpovedi AI, aby si mal celý kód od prvého po posledný riadok.
2. Ulož ho ako nakup.html. Otvor obyčajný textový editor (Notepad vo Windows, TextEdit v režime obyčajného textu na Macu), vlož kód a ulož ho ako nakup.html. Ako typ súboru zvoľ „Všetky súbory“, nie „Textový dokument“.
3. Otvor ho v prehliadači. Dvakrát klikni na súbor alebo ho pretiahni do okna prehliadača. Mal by si vidieť svoj nákupný zoznam, nie stránku plnú kódu.

Krok 3: Over, že to nie je len pekný obrázok

Aplikácia, ktorá vyzerá správne, ešte nie je aplikácia, ktorá funguje. Prejdi túto tabuľku riadok po riadku a porovnaj, čo vidíš, so správnym výsledkom. Toto je tvoj prvý skutočný test.

Ak niektorý riadok neprejde, zatiaľ kód neopravuj ručne. Povedz AI presne, ktorý riadok zlyhal, čo si zadal a čo si namiesto toho uvidel, a požiadaj ju, aby opravila iba tento jeden problém.

Krok 4: Urob jednu zmenu sám

Teraz urob prvú zmenu bez toho, aby ju za teba napísala AI. Opýtaj sa AI: „Kde v mojom kóde je nadpis aplikácie?“ Ukáže ti riadok, ktorý vyzerá približne ako <h1>Nákupný zoznam</h1>.

1. Nájdi nadpis. Otvor nakup.html v textovom editore a nájdi riadok, na ktorý ťa AI upozornila.
2. Zmeň text. Nahraď slová medzi <h1> a </h1> vlastným názvom, napríklad „Sobotný nákup“. Lomené zátvorky nemaž.
3. Ulož a obnov stránku. Ulož súbor, vráť sa do prehliadača a obnov stránku. Mal by sa objaviť tvoj nový nadpis.

Potom požiadaj AI, aby ti vysvetlila tvoj vlastný súbor v troch častiach a ako príklad použila tvoj kód. Uvidíš, že každá webová aplikácia sa skladá z rovnakých troch vrstiev:

Krok 5: Nauč aplikáciu novú zručnosť

Skutočné programy rastú po malých krokoch. Pridaj jednu novú funkciu a potom znova testuj. Pošli AI v tej istej konverzácii tento nadväzujúci prompt:

Pridaj do môjho nákupného zoznamu rozpočet. Umožni mi zadať sumu, ktorú chcem minúť. Zobraz, koľko zostáva. Keď celková suma prekročí rozpočet, zobraz jasné upozornenie so sumou, o koľko som ho prekročil. Všetko ostatné musí fungovať presne ako doteraz. Ukáž mi celý aktualizovaný súbor.

Práve si postavil, spustil, otestoval a upravil skutočnú aplikáciu. Nie je to celé programovanie, ale je to postup, ktorý budeš opakovať v každej ďalšej lekcii: jasne opísať, nechať AI vygenerovať, overiť voči očakávaným výsledkom a meniť vždy iba jednu vec.