Tri greške u aplikaciji. Sve tri su moje.

Šta odnosiš iz ove epizode

• Svako pitanje koje ti agent postavi pre koda je rupa u tvom dokumentu.
• Agent ne doda ništa što nisi napisao, ni stavku u meniju.
• Edge case koji je opisan u specifikaciji znači da aplikacija kaže šta se desilo umesto da pukne.
• Testiraj kao običan čovek koji dolazi na sajt, ne preko direktnog linka koji samo ti znaš.
• Kod je gotov kad agent završi. Proizvod nije.

Šta Claude Code uradi kad mu daš PRD?

Pročita ceo dokument, napravi plan i pre prvog reda koda postavi pitanja za sve što mu nije jasno.

U ovoj epizodi je dobio dokument iz prethodne epizode, onaj koji sam pisao sat vremena. Iz njega je izvukao logiku ocenjivanja, formu sa imenom i saglasnošću, praćenje događaja u GA4 i zaštitu od botova, honeypot i ograničenje broja zahteva. Honeypot je skriveno polje koje čovek ne vidi, a bot ga popuni i tako se oda. Od istog dokumenta je napravio i CLAUDE.md, fajl sa pravilima i tačnim tekstovima, da svaka sledeća sesija na projektu drži iste smernice. Tek kad sam odgovorio na pitanja, krenuo je da piše kod, korak po korak, po planu. Taj deo traje nekoliko minuta i nema šta da se gleda. Na kraju dobiješ izveštaj šta je urađeno, i tu počinje tvoj pravi posao, a to je provera.

Zašto agent postavlja pitanja pre nego što krene?

Zato što je dokument imao rupe, a rečeno mu je da ne sme da izmišlja.

Pitao me je tri stvari. Šta tačno ide korisniku na mail kao šablon. Gde aplikacija živi, na poddomenu ili na putanji glavnog sajta. I kakav je vizuelni stil, jer sam napisao da treba da prati postojeći sajt, ali nisam napisao koji je to sajt. Nijedno od ta tri pitanja nije bila njegova slabost. Sva tri su stvari koje sam ja podrazumevao, a nisam ih napisao. Da mu nisam zabranio da izmišlja, popunio bi te praznine po svojoj proceni i ja bih to video tek na kraju. Zato su pitanja dobar znak. Kad agent ne pita ništa, to ne znači da je dokument savršen. Češće znači da je negde sam doneo odluku umesto tebe, a ti ne znaš gde.

Da li treba da odobravaš svaki korak agenta?

Ne moraš. Ja to radim jer mi je kasnija provera mnogo lakša.

Claude Code ima više načina rada. U automatskom sam sebi odobrava korake i radi bez prekida, i za projekat ove veličine bi verovatno bio sasvim u redu. Ja ipak volim da pročitam svaki korak pre nego što ga prihvatim. Razlog je praktičan. Ako usput vidim da nešto ne radi onako kako smo se dogovorili, ispravim ga odmah, dok je ispravka jedna rečenica. Ako to otkrijem tek na kraju, ispravka znači vraćanje unazad kroz ceo projekat. Zato je završna provera brža kad si pratio rad usput. Usput ćeš videti i komande koje ti ne znače ništa, recimo kad proverava koje verzije Node.js-a i npm-a imaš na računaru. Te hijeroglife ne moraš da znaš. Dovoljno je da razumeš šta pokušava da uradi i da odobriš kad ima smisla.

Zašto agent proverava Node.js i npm?

Zato što ih treba aplikaciji koju pravi, ne samom Claude Code-u.

Ovo je lako pomešati sa prethodnom epizodom, gde smo Claude Code instalirali bez npm-a. To i dalje važi, alatu npm ne treba. Ali kviz koji agent pravi je Node.js aplikacija, a npm je Node package manager, program koji instalira sve delove od kojih se ta aplikacija sastoji. Pre nego što krene da gradi, agent proverava da li je to već na tvom računaru. Kod mene jeste, jer sam ranije pravio aplikacije, pa sam samo potvrdio da nastavi. Kod tebe će ta provera verovatno vratiti da ništa nije pronađeno. To nije greška. Agent će ti onda reći da prvo mora to da instalira i tražiće dozvolu. Tek posle toga može da napravi ono što je u planu.

Šta znači da aplikacija radi samo na localhostu?

Da radi samo na tvom računaru i da je niko drugi ne može otvoriti.

Kad agent završi, aplikaciju pokreće lokalno, i u pretraživaču vidiš adresu koja počinje sa localhost. To je tvoj laptop, ne internet. Možeš da je testiraš, ali ne možeš nikome da pošalješ link. Da bi kviz stvarno bio dostupan ljudima, potreban je zaseban posao: server, domen, ključevi za servise poput onog koji šalje mailove, i održavanje svega toga da nastavi da radi. To je DevOps, peta od pet uloga u razvoju softvera, i jedini deo koji u ovoj epizodi nedostaje. Ovaj kviz živi na Railway-u, a o serverima, bazama i servisima kao što su Cloudflare, Railway i Vercel pričaću u posebnim epizodama. Taj deo niko ne pominje kad priča koliko je lako napraviti aplikaciju sa AI, a košta i vreme i novac.

Zašto su edge case-ovi u specifikaciji važni?

Zato što aplikacija tada zna šta da kaže kad nešto pođe naopako, umesto da pukne.

Primer iz ove epizode je bio slučajan. Kad sam na kraju kviza ostavio mail, slanje nije uspelo, jer ključ za Resend, servis koji šalje mailove, još nije bio podešen. To nije bag, to je deo DevOps posla koji nedostaje. Ali aplikacija nije pukla. Rekla je da nešto nije prošlo, da je rezultat i dalje tu i da probam ponovo za minut. To je tačno ono što piše u dokumentu, u delu sa edge case-ovima. Da taj slučaj nije bio opisan, korisnik bi dobio neku nerazumljivu grešku na ekranu, i to je užasno iskustvo za nekoga ko je upravo odvojio dva minuta da prođe tvoj kviz. Edge case se ne piše zato što očekuješ da će se desiti. Piše se zato što će se desiti nekome, i bolje je da aplikacija tada zna šta da kaže.

Kako se testira aplikacija koju je napravio AI?

Tako što je čačkaš i koristiš kao neko ko o njoj ne zna ništa.

Prvi deo je ono što svi preskoče: namerno unosiš pogrešne stvari. Gde se očekuje tekst, ukucaš broj. U polje za mail ukucaš nešto što nije mail i vidiš da li ga prihvata. Kod mene je jedno polje prihvatilo broj iako nije trebalo, a validacija za mail je radila. Drugi deo je teži, jer zahteva da zaboraviš šta znaš. Ja sam kviz testirao preko direktnog linka i sve je radilo. Tek kad sam otišao na sajt kao običan posetilac, video sam da kviz nigde ne postoji. Nema ga u meniju. Agent ga je napravio na putanji koju sam tražio, ali nigde nisam napisao da treba da se doda u meni, pa nije ni dodao. Uradio je tačno ono što sam napisao. Zato testiraj iz ugla čoveka koji dolazi na sajt i ne zna gde je šta.

Kad menjaš dokument, a kad samo kažeš agentu?

Dokument menjaš kad se menja suština proizvoda. Sitnicu koju si zaboravio kažeš direktno.

Stavka u meniju nije razlog da se otvara cela specifikacija. Za takvu ispravku sam otvorio terminal, ušao u folder projekta sa cd, pokrenuo claude i napisao mu jednu rečenicu: pročitaj CLAUDE.md da dobiješ kontekst i dodaj link ka kvizu u glavni meni, jer je ovako nevidljiv. CLAUDE.md je tu bitan, jer iz njega agent zna na kom je projektu i po kojim pravilima radi, pa ne moraš sve da mu objašnjavaš iznova. Posle par sekundi je meni imao tri stavke: epizode, alati, kviz. Popravka je bila trivijalna, a greška zapravo i nije njegova. Da sam to napisao na vreme, ne bi bilo šta da se popravlja. Ali ako se menja šta proizvod radi, za koga je ili kako izgleda njegov glavni tok, to ide u dokument, da i sledeća sesija zna.

Koliko košta aplikacija napravljena sa Claude Code-om?

Pretplata od dvadeset dolara mesečno, sat vremena za dokument i održavanje koje niko ne računa.

Pretplata na Claude Code je jedini trošak koji vidiš na računu. Sat vremena pisanja specifikacije je jednokratno ulaganje, ali to je sat koji ne može da preskoči niko ko želi da dobije ono što je tražio. Treći trošak je DevOps, dakle server, servisi i održavanje, i o njemu se najmanje priča iako postoji svakog meseca. Za to sam dobio kviz koji radi i prikuplja kontakte, a nisam napisao nijedan red koda. Ono što nisam dobio je pamet, jer su sve greške u ovoj epizodi bile u mom dokumentu. Kviz nije savršen. Voleo bih da rezultat izgleda bolje i da stiže kao PDF, i to je posao za sledeću epizodu, kroz isti projekat. Kod je gotov kad agent završi. Proizvod je gotov kad ga ti proveriš.

Često postavljana pitanja

Da li je agent napravio greške u kodu?

Nije. Sve tri greške u ovoj epizodi potiču iz dokumenta: pogrešan link, link koji fali i stavka u meniju koja nije napisana.

Moram li da imam instaliran Node.js?

Za Claude Code ne. Za aplikaciju koju agent pravi verovatno da, i agent će ti sam reći i ponuditi da ga instalira.

Koliko traje pravljenje aplikacije?

Kod se piše nekoliko minuta. Duže traju dokument pre toga i provera posle.

Zašto mail nije stigao tokom testa?

Ključ za servis koji šalje mailove još nije bio podešen. To je DevOps deo, ne greška u kodu.

Gde mogu da probam kviz?

Na mirkoradeka.com/kviz. Ako nađeš grešku koju sam propustio, napiši je u komentaru ispod videa.

Gde je šablon po kom je pisan dokument?

Na strani sa alatima, kao „Šablon PRD dokumenta”.

Transkript

Uvod

Tri greške u ovoj aplikaciji, i sve tri su moje. Agent je uradio tačno ono što sam napisao, a to je zapravo bio problem.

Ja sam Mirko. Ne pišem kod rukom, pišem specifikacije. Prošli put sam pisao pripremni dokument sat vremena i nisam napisao nijednu liniju koda. Dao sam ga agentu, i danas gledamo šta je agent od toga napravio.

Plan i pitanja

Kao što vidite, pročitao je ceo PRD. Ima i plan, i ima par pitanja koja mu trebaju pre nego što krene sa kodom.

Logika ocenjivanja, super. Ime, saglasnost, forma, dobro. GA4 event tracking. Honeypot plus rate limit zaštita, dobro. Ovo je zaštita od botova. Honeypot nije ništa drugo nego mamac za botove, ajde tako da kažem.

Napravio je i CLAUDE.md iz PRD-a, pravila i tačne tekstove, da svaka sesija koda drži iste smernice.

Ajmo na par pitanja. Prompt kaže da korisnik dobija rezultat i PRD šablon na mail. Šta tačno treba da mu pošaljem kao šablon? Poslaću vam fajl koji ću dostaviti.

Gde tačno treba da živi aplikacija? Poddomen quiz.mirkoradeka.com ili putanja mirkoradeka.com/kviz?

Dobro zapamti ovaj kadar.

Ajde, recimo ovako. Vizuelni stil treba da prati postojeći sajt. Imaš li nešto na šta mogu da se oslonim, repo, boje, fontovi? Sajt je na mirkoradeka.com, izvuci sve odatle.

Tri pitanja su rupe u mom dokumentu

E sad, sva tri pitanja su ustvari rupe u mom dokumentu. Ja nisam napisao šta tačno ide na mail. Nisam napisao gde aplikacija živi. Nisam napisao kako izgleda. Rekao sam da ima postojeći sajt, ali nisam rekao koji je to sajt, i on je to morao da pita, jer sam mu rekao da nema pravo da izmišlja.

Postoji nekoliko različitih modova. Ima auto mod, gde on sam sebi prihvata korake, i to je okej. Generalno smo možda za ovaj projekat i mogli to da uradimo, ali ja zaista volim da čitam, every step of the way, jer je onaj poslednji QA deo dosta lakši kad usput mogu da ga korigujem, ako vidim da nešto nije napravio kako smo se dogovorili.

Node.js i npm

Sad, da se ne iznenadite šta on pokušava da shvati. npm je Node package manager, i on pokušava da sazna verziju Node.js-a i npm-a, da li ih zapravo imam instalirane na računaru. Kod vas će verovatno vratiti ništa, i onda će morati prvo to da instalira da bi mogao da napravi sve ovo.

Samo da ne pomešamo sa prošlom epizodom. Claude Code-u ovo ne treba, treba aplikaciji koju on pravi. Kod mene će pronaći, jer sam već pravio aplikacije, tako da mu kažem yes. On će sad da ide po onom planu i jedno po jedno da implementira stvari.

Implementacija

E, i ovo sad traje nekoliko minuta i u principu nema šta da se gleda. On će sad ići po planu, korak po korak. Usput sam sebe testira, ali ti i dalje moraš da testiraš, i ono što dobiješ na kraju je jedan summary, i tu počinje tvoj pravi QA posao.

Ovo su u principu ti hijeroglifi koje zaista ne morate znati.

I upravo je završio. Daje nam raport.

Izveštaj i čije su greške

Kaže da ima dve stvari koje je morao da reši usput. Za politiku privatnosti sam mu dao pogrešan URL, a za epizodu jedan link nije našao, pa ga je uzeo sa sajta.

E sad, obrati pažnju čije su ovo greške. Ja sam mu dao pogrešan link i ja mu nisam dao link ka epizodi. Oba je rešio sam, svaka čast, i nijednu grešku nije napravio, ali ja sam taj koji ga je misleadovao.

Deo koji nedostaje je DevOps deo. To je onaj peti posao iz druge epizode. Za tri, četiri epizode ću pričati generalno o tom DevOps-u, o setovanju servera, baze, servisa, Cloudflare, Railway, Vercel i tako dalje.

Pokretanje na mom računaru

I sad ćete videti kako ću tražiti od njega da pokrene aplikaciju kod mene na računaru, da vidimo šta je napravio. Ovo sad radi samo na mom laptopu i niko drugi ne može da ga otvori. To je taj localhost koji ćete videti gore. Zato posle ovoga ide onaj odvojeni, dodatni DevOps posao, da bi to moglo zapravo da ode na internet. Ja ću mu zatražiti da ovde, na mom računaru, lokalno pokrene ovaj kviz.

Možeš li da pokreneš app lokalno, da mogu da istestiram?

Prolazak kroz kviz

Dakle, uzmemo ovo. Sad idem u ovaj prozor browsera. Evo ga tu kod mene.

Da li je ovo tvoj pilot proces? Četiri pitanja, dva minuta, saznaćeš da li je proces koji želiš da automatizuješ dobar za početak. Kreni.

Koji proces proveravaš? Automatizacija slanja fakture na kraju meseca. Dalje.

Koliko često radiš ovaj proces? Faktura ide jednom mesečno, ali se sati opisuju svaki dan. Svaki dan.

Možeš li da opišeš proces od početka do kraja, a da ne kažeš zavisi? Da.

Kada se napravi greška, ko će je prvi primetiti? Ja ili kolega, pre nego što ode dalje.

Kada bi ovaj proces sutra radio neko drugi, da li bi uradio isto kao i ti? Da.

Zeleno svetlo. Proces se radi često, znaš da ga opišeš, greška se vidi na vreme i zna se kako se radi. Kreći.

Link ka kvizu je u opisu. Prođi ga i napiši mi na kom si pitanju pao, ako si pao. A ako nađeš grešku koju sam ja propustio, napiši mi u komentaru, i najbolje će ući u sledeću epizodu.

Ostavi mi mail i poslaću ti rezultat i šablon po kom sam napravio ovaj kviz. Hajde, recimo, moj mail.

Kad mail ne ode

Ovo sad neće raditi. Pošalji mi. On bi trebalo da kaže: „Nešto nije prošlo. Tvoj rezultat je i dalje tu, probaj ponovo za minut.”

I kao što sam rekao, mail neće otići, jer API ključ za servis koji koristimo za mail, a zove se Resend, nije podešen. To nije bug, to je DevOps deo koji svakako fali, i primetili ste da je aplikacija zapravo lepo odreagovala na to. Nije pukla, jer smo taj edge case zapravo zatvorili, nego je rekla da nešto nije prošlo i da probaš ponovo.

To je ono što piše u dokumentu, sa onim edge case-ovima, i eto zašto su bitni. Da to nismo opisali, pukla bi cela aplikacija, izašao bi neki suludi error, i to bi bilo užasno iz ugla user experience-a.

U međuvremenu sam ključ podesio, tako da će tebi mail stići. Ovo ovde ostavljam, jer je u suštini dobar primer: kad edge case postoji u dokumentu, aplikacija ti kaže šta se desilo umesto da pukne.

Čačkanje

E, i ovo je onaj deo koji svi preskoče, a to je da čačkamo ovo. Ajde, na primer, da probamo ovako. O, prošlo. Ne bi trebalo da prihvati baš broj, ali ajde da probamo ovako. Još nije, super. Ajde da probamo mail, na primer. Slažem se, pošalji mi. Opa: „Ovaj email ne izgleda tačno. Proveri ga.” Super. Znači, neku validaciju je napravio.

Okej. Tako da, odlično. Vratimo na početak. Super.

Kviz koji nigde ne postoji

Sad, pokazao sam vam ovo, radi. I sad je ovo prava ona stvar za koju sam vam rekao da je jako bitna, koliko dobro specificirate. On će da izbaci ono što ste mu vi rekli. Ono što mu vi ne kažete, to neće izbaciti.

Da vam pokažem samo o čemu pričam. Ako ukucam mirkoradeka.com/kviz, sletim na ovo i to funkcioniše, jelte. Međutim, ako sam na mom sajtu, kao što vidite, taj kviz zapravo nigde ne postoji. Dakle, šta je on uradio? Ja sam mu tamo rekao da putanja treba da bude /kviz.

Gde tačno treba da živi aplikacija? Poddomen quiz.mirkoradeka.com ili putanja mirkoradeka.com/kviz?

I on ga je napravio, ali nigde nisam spomenuo da u meni treba da se doda kviz. Uradio je tačno ono što sam napisao. Tako da je ovo upravo ono što sam vam rekao: testirajte iz ugla običnog čoveka.

Ja naravno nisam testirao kao običan čovek koji dođe na moj sajt i kaže, aha, gde je ta stvar sa automatizacijom, nego sam koristio direktan link, i sve je funkcionisalo najnormalnije.

Popravka

Za jednu stavku u meniju stvarno neću dirati PRD. Kazaću mu direktno, ali tražiću da prvo pročita CLAUDE.md, da bi znao koji projekat radi i da bi dobio kontekst. U dokument bih dopisivao kad se menja nešto što je core deo proizvoda, a ovo je samo nešto što sam ja, u principu, zaboravio.

Da bismo ispravili, otvorite terminal, uđite u folder, jel tako, cd. Kad smo ušli, da bismo otvorili Claude, claude.

I tu smo. I šta ćemo sad da uradimo? Kažemo: pročitaj CLAUDE.md da dobiješ kontekst i dodaj mirkoradeka.com/kviz u glavni meni, jer je ovako taj kviz zapravo nevidljiv.

Kao što možete videti, jako jednostavno. Epizode, alati, kviz. Tu je.

Šta me je ovo koštalo

Popravka je bila trivijalna, a greška to i nije. Da sam ovo napisao na vreme, u suštini ne bih imao šta da popravljam. Sad, da li mi se dopada kako je ispalo? Ima tu sitnih korekcija, ali ništa strašno. U suštini, kod je gotov, proizvod nije.

Šta me je ovo koštalo? Hajde da to sumiramo. Pretplata na Claude Code od dvadeset dolara. Mojih sat vremena da napravim dokument, to je one off. I održavanje, taj DevOps deo. O tome niko ne priča, ali i to košta.

Šta sam u principu dobio? Dobio sam lead gen kviz, odnosno aplikaciju koja radi. Nisam napisao nijedan jedini red koda sa svojih deset prstiju.

I šta nisam dobio? Pamet, pošto su sve greške bile moje.

Kviz nije ispao savršen. Voleo bih da sam video malo bolji taj rezultat i da je sve to u PDF-u. Zato ću sledeći put srediti postojeći projekat kroz Claude Code, i to je manje više to.

Pozdrav.