Programiranje z UI

Cilji

• Razumeti, kako UI piše kodo in zakaj mora človek rezultat preizkusiti.
• Napisati skripto, ki avtomatizira opravilo na računalniku (preimenovanje datotek, obdelava Excela).
• Z UI poiskati in popraviti napako iz sporočila o napaki.
• S Claude Code ali podobnim orodjem zgraditi in objaviti majhno spletno orodje.

Glavna vaja

Zgradite in objavite majhno delujoče orodje: kalkulator, obrazec, stran z informacijami ali pretvornik datotek, ki ga boste ali bo vaša ekipa res uporabljala.

Zakaj ta delavnica

Veliko drobnih težav v podjetju bi rešil program, ki ga nihče ne napiše, ker je premajhen za razvijalce in prevelik za Excel. Z UI lahko tudi človek brez programerskega znanja v nekaj urah naredi kalkulator ponudb, pretvornik izvozov ali preprosto spletno stran. Razvijalci pa del rutinskega dela prepustijo orodju. Oboji se morajo naučiti istega: preizkušati, razumeti meje in ne objaviti ničesar, česar ne razumejo dovolj.

Potek

Čas	Del	Kaj delamo
0:00–0:10	Uvod	Kaj bi si želeli, da bi obstajalo kot majhno orodje?
0:10–0:30	Kako UI programira	Od pogovora do agenta, ki sam ureja datoteke in zaganja ukaze. Claude Code, Cursor, Copilot, pogovor v brskalniku.
0:30–0:55	Skripta in napaka	Skripta za obdelavo mape datotek. Namerna napaka, sporočilo, popravek.
0:55–1:10	Vibe coding	Opis v naravnem jeziku, majhni koraki, preizkus po vsakem koraku, git kot varnostna mreža.
1:10–1:20	Odmor
1:20–2:35	Vaja: zgradi in objavi	Posamezno ali v parih. Izvajalec kroži.
2:35–3:00	Predstavitve	Vsak pokaže delujoče orodje na javnem naslovu.

Vsebina

Stopnje

1. Pogovor. V Claude ali ChatGPT opišete, kaj potrebujete, dobite kodo, jo kopirate in zaženete. Dobro za kratke skripte.
2. Artefakt v brskalniku. Claude in ChatGPT znata majhno aplikacijo (HTML, JavaScript) prikazati in zagnati kar v pogovoru. Za kalkulatorje in prototipe brez namestitve.
3. Agent za programiranje. Claude Code (v terminalu, urejevalniku ali brskalniku) sam bere in ureja datoteke projekta, zaganja ukaze in teste. Opišete cilj, agent predlaga spremembe, vi jih odobrite.

Skripta z namerno napako

Primer iz pisarne: mapa racuni/ ima Excel prodaja.xlsx s stolpci Datum, Kupec, Količina, Cena. Želite skupni znesek po kupcu v novi datoteki. Poziv:

V mapi je datoteka prodaja.xlsx s stolpci Datum, Kupec, Količina, Cena.
Napiši Python skripto, ki za vsakega kupca izračuna vsoto Količina * Cena
in rezultat shrani v skupaj.xlsx. Pred kodo v dveh stavkih povej, kaj bo
skripta naredila, in kako jo namestim in zaženem. Ne spreminjaj izvirne datoteke.

Skripta se sesuje, ker ima Excel stolpec »Kolicina« brez strešice. Sporočilo o napaki je videti takole:

KeyError: 'Količina'

Popravek ni ugibanje, ampak nov poziv z vsem, kar imamo:

Skripta se je sesula pri vrstici z df["Količina"]:
KeyError: 'Količina'
Pred tem sem zagnal: python skupaj.py
Naj najprej izpiše imena stolpcev v datoteki, nato pa popravi skripto tako,
da imena stolpcev prebere iz datoteke in sporoči, če katerega ni.

Agent ugotovi, da se stolpec imenuje »Kolicina«, popravi kodo in doda jasno sporočilo. Na tem primeru pokažite, da branje sporočila in navedba, kaj ste naredili prej, rešita večino napak.

Vibe coding brez kaosa

»Vibe coding« pomeni gradnjo z opisovanjem v naravnem jeziku, ne da bi kodo pisali sami. Deluje, če se držite pravil:

• Najprej načrt. »Preden začneš, opiši, katere datoteke boš naredil in kako bo delovalo.« Popravite načrt, nato gradite.
• Majhni koraki. Ena funkcija naenkrat, preizkus po vsakem koraku.
• Git. Po vsakem delujočem koraku shranite različico. Ko gre kaj narobe, se vrnete.
• Napake prilepite v celoti. Sporočilo o napaki in kaj ste naredili tik pred tem.
• Razumeti vsaj, kaj dela. Zahtevajte razlago v preprostem jeziku. Česar ne razumete, ne objavite z dostopom do pravih podatkov.

Delovni primer: kalkulator cene prevoza

Zamislite si špediterja ali pekarno z dostavo, ki mora vsakič ročno računati ceno prevoza. Orodje: ena spletna stran, kjer vnesete razdaljo v km in težo v kg ter dobite okvirno ceno. Cene v primeru so ponazoritvene; vnesite svoje.

Korak 0: navodila projekta. V prazni mapi ustvarite datoteko CLAUDE.md, ki jo agent prebere ob vsakem začetku:

# Kalkulator cene prevoza

## Kaj je to
Ena statična spletna stran (index.html, style.css, script.js). Brez strežnika,
brez knjižnic, brez shranjevanja podatkov.

## Pravila
- Vsa besedila v slovenščini, zneski v evrih z vejico (12,50 EUR).
- Cenik je v ločeni datoteki cenik.js, da ga lahko uredim brez posega v kodo.
- Preveri vnos: samo števila večja od 0, sicer jasno sporočilo.
- Ne dodajaj ničesar, česar nisem zahteval. Ne namešaj paketov.
- Po vsaki spremembi povej, kako jo preizkusim.

## Ukazi
- Preizkus: odpri index.html v brskalniku.

Zaporedje pozivov.

1. Cilj in načrt:

   Preberi CLAUDE.md. Želim kalkulator cene prevoza: uporabnik vnese razdaljo (km)
   in težo (kg), stran pokaže ceno. Cena = osnova 8 EUR + 0,45 EUR na km +
   0,03 EUR na kg. Še ne piši kode. Opiši načrt: katere datoteke in kaj bo v njih.
   

   Preberite načrt, popravite (npr. »cenik naj bo v ločeni datoteki«).
2. Prva različica: Izvedi načrt. Samo osnovni izračun, brez olepšav. Povej, kako preizkusim. Odprite stran, vnesite 100 km in 200 kg. Pričakovano: 8 + 45 + 6 = 59,00 EUR.
3. Shranitev: Inicializiraj git repozitorij in shrani to različico z opisom »osnovni izračun«.
4. Preverjanje vnosa: Dodaj preverjanje: prazno polje, negativno število ali črke naj pokažejo sporočilo, ne rezultata. Preizkusite, shranite.
5. Izboljšava: Dodaj dostavni popust: nad 500 kg je cena na kg 0,02 EUR. Pokaži razčlenitev cene (osnova, km, teža). Preizkusite, shranite.
6. Objava:

   Pripravi vse za objavo na GitHub Pages. Povej mi ukaze, ki jih moram
   izvesti za nov javni repozitorij, ali jih izvedi, ko potrdim. Nikjer ne sme
   biti gesel ali ključev.
   

   Nato na GitHubu v nastavitvah repozitorija (Pages) izberite vejo main in korensko mapo. Po minuti ali dveh je stran na naslovu uporabnik.github.io/ime-repozitorija.
7. Pregled: Razloži mi v preprostem jeziku, kaj počne script.js, vrstico za vrstico, in kaj se zgodi pri vnosu 0. Šele po razlagi delite povezavo.

Kaj lahko nerazvijalec varno objavi

Statične strani in orodja, ki tečejo v brskalniku in ne hranijo podatkov: kalkulator, pretvornik, informativna stran, kviz. Za objavo zadoščajo brezplačne storitve (GitHub Pages, Netlify, Cloudflare Pages) ali artefakt v orodju UI z javno povezavo.

Česar brez razvijalca ne objavite: prijave uporabnikov, plačil, obrazcev, ki zbirajo osebne podatke, povezav s poslovnimi sistemi. Tu so varnostne napake lahke in drage. Pomislite tudi, da je javni repozitorij res javen: v ceniku ali komentarjih ne sme biti notranjih podatkov, ki niso namenjeni strankam.

Za razvijalce

• Testi najprej: naj agent napiše teste, nato kodo, ki jih izpolni.
• Pregled kode ostane: UI koda gre skozi isti pregled kot človeška.
• Navodila projekta (na primer CLAUDE.md) z opisom arhitekture, ukazov in pravil, da agent dela kot ekipa.
• Skrivnosti (ključi, gesla) nikoli v pozive ali repozitorij.
• Poziv za pregled: »Preglej razlike od zadnje shranjene različice in poišči napake, varnostna tveganja in mesta brez testov. Ne spreminjaj kode, samo poročaj.«

Vaja: zgradi in objavi

Priprava. Vsak ima prenosnik, račun GitHub in dostop do Claude Code (ali Claude/ChatGPT v brskalniku za tiste brez namestitve). Izvajalec pripravi seznam idej: kalkulator cene prevoza, pretvornik CSV izvoza v drugo obliko, stran z urnikom delavnic, kviz za uvajanje novih sodelavcev, generator podpisov za e-pošto.

Koraki in vloga izvajalca.

Korak	Kaj naredite	Kaj dela izvajalec	Pričakovani rezultat
1	Zapišite v petih stavkih: kaj orodje dela, za koga, kaj vnese uporabnik, kaj dobi, kaj ne sme narediti. Iz tega sestavite CLAUDE.md.	Prebere opise in zavrne prevelike ideje (»CRM«).	Kratek opis in datoteka CLAUDE.md.
2	Zahtevajte načrt in ga popravite.	Preveri, da načrt ni daljši od ene strani.	Seznam datotek in delovanja.
3	Gradite v korakih: osnovna funkcija, preizkus, shranitev v git.	Kroži, pomaga ob napakah, opomni na shranjevanje.	Delujoča osnovna različica, vsaj ena shranjena različica.
4	Dodajte eno izboljšavo (oblikovanje, preverjanje vnosa, prenos rezultata).	Preveri, ali udeleženec razume, kaj se je spremenilo.	Druga shranjena različica.
5	Namerno vnesite nesmiseln podatek (prazno, negativno, besedilo). Popravite.	Pokaže napako iz enega para in kako jo popraviti.	Orodje pokaže jasno sporočilo.
6	Objavite na GitHub Pages ali Netlify in pošljite povezavo sosedu, da preizkusi na telefonu.	Preveri, da v repozitoriju ni ključev ali osebnih podatkov.	Javni naslov, ki deluje na drugi napravi.

Za hitrejše: dodajte prenos rezultata (CSV ali tisk), stran za mobilnik in kratko navodilo za uporabnike; ali zahtevajte pregled kode s pozivom iz razdelka za razvijalce.

Za počasnejše: izberite najmanjšo idejo (generator podpisov, informativna stran) ali delajte v paru z izvajalcem po zaporedju iz delovnega primera, korak za korakom. Če namestitev ne deluje, gradite v artefaktu v brskalniku in objavite z javno povezavo.

Kako preverimo, da so cilji doseženi

• Vsak udeleženec pokaže delujoče orodje na javnem naslovu, ki ga sosed odpre na telefonu.
• Orodje pri nesmiselnem vnosu prikaže sporočilo, ne napačnega rezultata.
• V zgodovini gita so vsaj tri shranjene različice z razumljivimi opisi.
• Udeleženec z lastnimi besedami razloži, kaj orodje dela in česa nikoli ne bi objavil brez razvijalca.

Pogoste napake

• Prevelik prvi korak (»naredi mi CRM«).
• Zaporedni popravki brez shranjevanja, dokler vse ne preneha delovati.
• Kopiranje kode z ključi in gesli v javni repozitorij.
• Objava orodja, ki zbira podatke, brez razmisleka o zasebnosti.
• Napaka, opisana z »ne dela«, brez sporočila o napaki in brez opisa, kaj ste naredili prej.
• Zaupanje rezultatu, ki ga niste preizkusili z računom, ki ga poznate vnaprej.

Po delavnici

• Orodje dajte v uporabo trem sodelavcem in zapišite njihove pripombe. Popravite z UI.
• Zapišite še eno idejo za orodje in jo zgradite sami.

Za izvajalca

• Preverite namestitev Claude Code in dostop do GitHub pri vseh udeležencih dan prej (kratek preizkus po e-pošti).
• Pripravljen repozitorij-predloga s prazno statično stranjo in navodili za objavo.
• Rezervni načrt za tiste brez namestitve: gradnja v artefaktu v brskalniku.