Kuidas ma loovkoodisin kodulehele hinnakalkulaatori
Inga Külmoja
Klient eeldab üha enam, et saab kiire ülevaate hindadest mitte ainult toodete, vaid ka teenuste puhul. Tihtipeale ongi teenused standardsed ja hinnalipiku lisamine võrdlemisi lihtne. Sisuloome ja turundusteenuse puhul on asi keerulisem, kuid mitte võimatu: ehitasin hinnakalkulaatori ühele meie teenustest — veebilehe loomisele. Allpool kirjeldan töökäiku.
Pliiats ja paber ennekõike
Alustuseks mõtlesin läbi hinnakalkulaatori loogika paberi peal — millest ja kui palju sõltub hind, kus võiks asja lihtsustada, millised valikud võiksid kliendi jaoks olla arusaadavad. Olin näinud hinnakalkulaatoreid, mis kujutasid endast pikka joru raskesti hoomatavaid küsimusi. Seda tahtsin küll iga hinna eest vältida. Niisiis, pidin kõvasti lihtsustama. Seda leevendas maagiline sõna “orienteeruvalt” hinna juures ja teenuse kirjeldus samal lehel.
Ideede genereerimine AIga
Teatasin Gemini Brainstormer Gemile, et soovin loovkoodida (ehk AI abiga valmistada) hinnakalkulaatori. Sain selle peale portsu küsimusi, millele vastasin. Nii läks planeerimine käima.
Suhtlesin AIga inglise keeles, kuid (peaaegu) sama hästi saab seda teha ka eesti keeles. Gemini asemel võib kasutada ka ChatGPT-d, Claude’i või mõnda muud endale meelepärast AId.
Mõne aja pärast kirjutas Gemini mulle valmis prompti, millega ehitada hinnakalkulaatorit Cursoris. Siis tuli mulle järsku meelde, et vajan kalkulaatorit eesti keeles. Seega, peavad ka väljade nimetused olema eestikeelsed. Gemini tõlkis ja mina kohendasin.
Vestluse lõpus ütles Gemini nagu muuseas, et kodulehel kasutamiseks peaks Cursori loodud kood olema täielikult HTML formaadis ja lisas prompti lõppu vastava lause. See oli väga hea lisandus, sest ma ise polnud osanud sellele mõelda.
Nii nägi välja lõplik Gemini prompt Cursori jaoks.
Gemini promptiga Cursorisse
Cursoris tegin lahti planeerimise režiimi ja palusin tal Gemini prompti selgemaks ja paremaks kirjutada. Sündis põhjalik planeerimisfail.
Vestlus Cursori planeerimisrežiimis toimub loomulikus keeles koodivabalt.
Siis uurisin, kas Cursoril on mulle asjasse puutuvaid küsimusi ja vastasin neile.
Cursori planeerija küsib täpsustusi ja pakub kohe mugavalt juurde ka vastusevariante.
Näiteks polnud mina ega Gemini mõelnud sellele, millised valikud peaksid olema hinnakalkulaatori laadimisel vaikimisi aktiivsed. Või siis sellele, kas kujundus peaks olema heledates või tumedates toonides. Palusin, et taust oleks läbipaistev — nii sulandus kalkulaator paremini meie kodulehele.
Ja siis sai asuda plaani järgi ehitama. Kõlab tähtsalt, aga tuli kõigest vajutada nuppu ja üsna pea oligi HTML kood valmis. Tegin koodiga faili veebilehitsejas lahti ja märkasin ebavajalikuna tunduvat vahepealkirja. Palusin Cursoril see eemaldada.
Cursorist kodulehele
Sisestasin tuunitud hinnakalkulaatori HTML koodi me kodulehele ja vaatasin, kuidas kõik tundub ja toimib. Kontrollisin erinevaid ekraanisuurusi. Siis tegin Cursoris viimase muudatuse — palusin tal asendada numbrite sinine värv me kodulehe rohelise vastu. Kopeerisin koodi uuesti ja oligi valmis.
(Täpsemalt öeldes jäi veel kirjutada ja küljendada tekst hinnakalkulaatori lehele — see võttis vaat et rohkemgi aega kui kalkulaator ise.)
