Gradnja aplikacije z AI: Ko gre načrtovanje predaleč 😅 (+ Izbira IDE)

Raziskovanje različnih pristopov k programiranju s pomočjo AI in izzivi pretirano podrobnega načrtovanja

Read in English

Tukaj je nadaljevanje mojega eksperimenta gradnje aplikacije z AI orodji.

Prejšnji teden sem ti pokazal, kako sem od ideje prišel do začetnih zahtev (project requirements document ali krajše PRD) za aplikacijo “Mind Fitness Now”. Obljubil sem, da nadaljujem s praktičnim delom — in tukaj je!

Ampak naj te spomnim, to ni le še ena aplikacija. Čeprav jo gradim za demonstracijo, sem želel ustvariti nekaj resnično uporabnega. Nekaj, kar bo uporabnika naredilo boljšega pri zavedanju lastnih misli — ker tam se vse začne, kajne? 😉

Če na hitro povzamem: misli vodijo dejanja in oblikujejo naša počutja. Če uspemo večino časa biti zavestni svojih misli, smo že skoraj zmagali. 💪 Če te zaidejo, jih samo preusmerimo tam kamor želimo.

Zanka “še samo to dodam”

Tole mi je bilo pa med pripravo PRD-ja najbolj fascinantno: Nekajkrat sem se ujel v zanko, da bi že takoj na začetku v aplikacijo dodal funkcionalnosti, ki so se mi zdele nujne. Recimo, poslušal sem dva YouTube posnetka o self-development, dobil super ideje in takoj odhitel do Gemini-ja, s katerim sva oblikovala PRD. Nadaljeval sem pogovor v smislu: “Veš kaj, uporabniku bi res koristilo, če dodava še to in to…”

In kaj se je zgodilo? Gemini (ki sem mu na začetku rekel: Act as the best psychologist and game designer) je začel “razmišljati”. Pojasnil mi je prednosti in slabosti mojega predloga, na koncu pa zaključil: “Sliši se dobro, ampak začni z minimumom.” To se je ponovilo še nekajkrat! Njegova vztrajnost pri tem, da ostanem osredotočen na MVP (Minimum Viable Product), me je prepričala. Rekel sem si, okej, zaupal mu bom. Dajmo mu priložnost 🙂

Torej, PRD dokument z jasnimi zahtevami imam.

Izbira razvojnega okolja (IDE)

Super, načrt je tu. Zdaj pa rabim okolje, kamor bom ta načrt “vnesel” in iz katerega bo prišla ven dejanska mobilna aplikacija. Kot sem omenjal v preteklih newsletterjih, za to potrebujemo IDE (Integrated Development Environment) oz. program za pisanje kode, ki ima danes pogosto že vgrajenega AI asistenta.

Najbolj popularne možnosti za delo z AI:

Za lažji začetek priporočam Cursor ali Windsurf. Oba imata brezplačni preizkusni mesec, tako da lahko vidiš, kateri ti bolj ustreza. Glavna prednost je, da ne potrebuješ dodatnih nastavitev za AI. Kasneje, če te bo zanimala optimizacija stroškov, ti lahko pokažem, kako urediti dostope prek VS Code.

PS: Če se ti zatakne, ne pozabi na ChatGPT ali YouTube vodiče — vedno pomagajo!

Tehnike za delo z AI programerjem

Ko imamo orodje (IDE z AI), potrebujemo še dober način dela oz. workflow. Kako AI asistentu dati naloge, da bo naredil čim manj napak in čim bolj kakovostno kodo?

Obstaja več pristopov, jaz sem preizkusil dva, ki sta zanimiva za bolj kvalitetno programiranje z AI-jem:

(Mimogrede, Cline in Roocode imata podobne funkcionalnosti, npr. Boomerang Tasks, že vgrajene.)

Oglejmo si najprej Claude Task Master.

Kaj je Claude Task Master?

Ideja je, da sistem iz zahtev samodejno ustvari vse potrebne naloge (taske). Po želji lahko izvedeš analizo zahtevnosti in za težje naloge dodatno poženeš ustvarjanje manjših, bolj obvladljivih podnalog (subtasks).

Moj postopek s Task Master:

(Če te tehnični detajli ne zanimajo, lahko skočiš spodaj direktno na rezultat. Naj ti povem da ni šlo po pričakovanjih.)

  1. Namestitev pripomočka (globalno): ` npm install -g task-master-ai

    `

  2. Inicializacija v projektu: ` task-master init

    `

  3. Konfiguracija:

    • Preimenuj .env.example v .env
    • Dodaj svoj ANTHROPIC_API_KEY (za Claude model)
    • Dodaj svoj PERPLEXITY_API_KEY (za funkcijo raziskovanja - opcijsko)

  4. Dodaj PRD:

    • Svoj PRD dokument sem dodal v mapo projekta.

  5. Analiza PRD in kreiranje taskov: ` task-master parse-prd ime_tvoje_prd_datoteke.txt

    `

  6. Seznam osnovnih taskov: ` task-master list

    `

  7. Analiza kompleksnosti (opcijsko): ` task-master analyze-complexity task-master complexity-report

    `

  8. **Razdelitev taskov na podtaske (z raziskavo):**Uporabil sem Perplexity, da mi pomaga definirati podrobne korake za vsak task: `

    Primer za task z ID-jem 5, želim 6 podtaskov

    task-master expand —id=5 —num=6 —research —prompt=“Razdeli ta task na podrobne korake za implementacijo.” *(Seveda zamenjaš*—id*,* —num*in*—prompt` s svojimi vrednostmi)

  9. Končni seznam taskov s podtaski: task-master list with-subtasks

Rezultat moje uporabe Task Master

Na papirju zgleda super, kajne? Podrobna navodila za AI asistenta. Ampak rezultat zame… ni bil optimalen.

Zakaj?

Da bi AI programer imel čim bolj jasen cilj, sem vsak task res podrobno raziskal in razdelil na mikro podtaske. Splošno velja: bolj jasna navodila -> boljši rezultat. Ampak v mojem primeru…

…se je zgodil “over engineering” plana. Preveč podrobno planiranje.

AI je sicer sledil navodilom, ampak celoten proces je postal preveč rigidn in počasen. Namesto da bi izkoristil sposobnost AI-ja za razumevanje širšega konteksta, sem ga omejil na izvajanje zelo majhnih, specifičnih korakov. To je vzelo veliko časa za pripravo, končni rezultat pa ni bil nujno boljši, kot če bi mu dal malo bolj splošna navodila.

Primer enega taska in kako mi je Task Master (s pomočjo Perplexity) razdelal ta task v podrobne podtaske:

​PRIMER KOMPLEKSNIH SUBTASKOV​

Za kreiranje subtaskov sem porabil 34 centov na Perplexity API-ju.

Za končno izvedbo vseh taskov (z vsemi subtaski) je bilo izvršenih 137 klicev v Cursorju, modela Claude 3.7 Sonnet.

Pred začetkom

Na koncu

Ustvarjenih je bilo 262 datotek in 44k vrstic kode 🫣

Eksperiment je trajal cca 6 ur.

Zaključek

Več kot je kode, več možnosti je za napake. Čeprav delaš teste za sproti.

Naslednjič ti pokažem še drugi pristop (Cursor Memory Bank), oziroma kako sem iz vsakega pristopa potegnil najboljše in poenostavil proces. Z veliko manj klici in boljšim rezultatom. In rezultati doseženimi v manj kot 1 uri.

Evo, “da malce podražim” pa prilagam prvi rezultat štirih različnih testov, katere opišem naslednjič:

Prvi rezultat 4 različnih modelov oz workflow-ov

Te zanima končen rezultat? Ostaniva na vezi.

Se slišiva, Primož