Henna-Riikka Ka i
G aa isen käy ölii ymän yyliopas ja sen nouda amisen
ohjelmallinen al on a
Tie o ekniikan p o g adu - u kielma
21. ma askuu a 2024
Jy äskylän yliopis o
In o maa io eknologian iedekun a
Tekijä: Henna-Riikka Ka i
Yh eys iedo : [email p o ec ed]
Ohjaaja: Tommi Mikkonen
Työn nimi: G aa isen käy ölii ymän yyliopas ja sen nouda amisen ohjelmallinen al on a
Ti le in English: G aphical UI s yle guide and p og amma ic moni o ing o i s compliance
Työ: P o g adu - u kielma
Opin osuun a: Ohjelmis o- ja ie oliikenne ekniikka
Si umää ä: 101+0
Tii is elmä: Toimi a ja yylikäs g aa inen käy ölii ymä on ä keä osa ohjelmis okehi ys ä
ja aiku aa me ki ä äs i käy äjäkokemukseen ja sen myö ä uo een laa uun ja kaupalliseen
menes ykseen. Tehokas käy ölii ymäsuunni elu puoles aan nojaa oimi aan komponen iki -
jas oon ja sen uudelleen käy e ä iin, keskenään uo o aiku a iin komponen eihin. Kun o -
ganisaa iossa usea kehi äjä luo a uusia komponen eja, loppu ulos on usein epäyh enäinen
ja kehi äjänsä näköinen. Selkeällä ja ohjelmallises i es a a alla yyliohjeis uksella oidaan
käy ölii ymien ilmeeseen saada kai a ua yh enäisyy ä, oimi uu a ja laa ua.
Tämän suunni elu u kimuksen uloksena o eu e iin kohdeo ganisaa iolle käy ölii ymän yy-
liopas ja malli sen isuaalisis a eg essio es eis ä. Kohdeo ganisaa io on keskisuomalainen oh-
jelmis oalan y i ys, joka uo aa SaaS-pal eluja lähinnä ene gia oimialan a peisiin. Tyyliopas
o eu e iin olemassa ole an komponen iki jas on yh ey een osaksi suu empaa kokonaisuu -
a. Se sisälsi joukon o ganisaa iospesi ejä uudelleenkäy e ä iä g aa isia komponen eja, sekä
ohjee ypog a ias a, ikoneis a, ä eis ä ja si umalleis a. Tyylin al ojaksi ali iin Vi es ima-
ge snapsho s, joka so el uu niin yksi äis en komponen ien kuin kokonais en si unäkymien
snapsho - es aukseen ja in eg oi uu helpos i käy össä ole aan Vi e-ympä is öön, jossa oimin-
nallinen es aus suo i e aan jo Vi es :illä. Tu kimus sisälsi myös ohjee komponen iki jas on e-
kons uk iolle niin, e ä yylioppaas a saadaan elä ä ja ylläpide ä ä. Tu kimus an aa a okas a
in o maa io a ja oimi ia esime kkejä kohdeo ganisaa iolle ja oimii mallina myös muille.
A ainsana : p o g adu - u kielma , käy ölii ymän yyliopas, käy ölii ymän isuaalinen es-
aus, komponen iki jas o, suunni elujä jes elmä
i
Abs ac : A unc ional and elegan g aphical use in e ace is an impo an pa o so wa e
de elopmen and has a signi ican impac on use expe ience and impac s he quali y and com-
me cial success o he p oduc . E ec i e use in e ace design, in u n, elies on a unc ional
componen lib a y and i s eusable, mu ually in e ac ing componen s. When se e al de elope s
in an o ganiza ion c ea e new componen s, he esul is o en inconsis en and looks like i s
de elope . Wi h clea and p og amma ically es able s yle guidelines, he desi ed consis ency,
unc ionali y and quali y can be achie ed in he appea ance o use in e aces.
As a esul o his design science esea ch, a use in e ace s yle guide and a model o i s isual
eg ession es s we e implemen ed o he a ge o ganiza ion. The a ge o ganiza ion is a cen -
al Finnish so wa e company ha p oduces SaaS se ices mainly o he needs o he ene gy
sec o . The s yle guide was implemen ed in connec ion wi h an exis ing componen lib a y as
pa o a la ge whole. I included a se o o ganiza ion-speci ic eusable g aphic componen s,
as well as ins uc ions on ypog aphy, icons, colo s and page empla es. Vi es image snapsho s
was chosen as he ool o con ol he usage o he s yle guide, which is sui able o snapsho es-
ing o bo h indi idual componen s and en i e page iews and easily in eg a es in o he exis ing
Vi e en i onmen , whe e unc ional es ing is al eady pe o med wi h Vi es . The s udy also
included ins uc ions o econs uc ing he componen lib a y so ha he s yle guide is ali e
and main ainable. This esea ch p o ides aluable in o ma ion and wo king examples o he
a ge o ganiza ion and also se es as a model o o he s.
Keywo ds: Mas e ’s Theses, GUI S yle Guide, GUI Visual Tes ing, Componen Lib a y, GUI
Design Sys em
ii
Koodilohko
Koodilohko 1 Ko a a a Ale -esiin ymä..................................................38
Koodilohko 2 Ale -esiin ymänko aa akoodi. ..........................................38
Koodilohko 3 Bu on-esiin ymä.............................................................39
Koodilohko 4 Fo m-esiin ymänko aa akoodi. ............................................41
Koodilohko 5 Ko a a a Menu-esiin ymä. ..................................................43
Koodilohko 6 Menu-esiin ymänko aa akoodi. ............................................44
Koodilohko 7 Ko a a a Modal-esiin ymä..................................................46
Koodilohko 8 Modal-esiin ymänko aa akoodi. ..........................................46
Koodilohko 9 Komponen in pa ame ina saama oimin opainikejoukko. ...................46
Koodilohko 10 Ko a a a Popo e -esiin ymä. .............................................48
Koodilohko 11 Popo e -esiin ymän ko aa a koodi. .......................................49
Koodilohko 12 Ko a a a B andTable-esiin ymä. ........................................51
Koodilohko 13 B andTable-esiin ymän ko aa a koodi. ..................................51
Koodilohko 14 Ko a a a Tool ip-esiin ymä. .............................................53
Koodilohko 15 Tool ip-esiin ymän ko aa a koodi. .......................................53
Koodilohko 16 Vi es -syn aksi, koko si un es i. ..............................................63
Koodilohko 17 Plaw igh -syn aksi, koko si un es i. ..........................................63
Koodilohko 18 Cyp ess-syn aksi, koko si un es i.............................................63
Koodilohko 19 Vi es -syn aksi, komponen in es i.............................................64
Koodilohko 20 Plaw igh -syn aksi, komponen in es i. .......................................64
Koodilohko 21 Cyp ess-syn aksi, komponen in es i. .........................................64
iii
Ku io
Ku io1.Suunni elujä jes emä. .................................................................. 7
Ku io 2. Suunni elu u kimuksen aihee He ne (2007) mallin mukaan, apaa käännös.....14
Ku io 3. Komponen iki jas on ekninen oimin aympä is ö. ...................................20
Ku io 4. Komponen iki jas on Playg ound-ympä is ö. .........................................21
Ku io 5. Asiakkaan laskusi un uo a a komponen i In oices. ............................23
Ku io 6. In oices-komponen in akenne UML-kaa iona....................................24
Ku io 7. Vaa imusmää i ely: yylioppaan yleise aa imukse . ................................27
Ku io 8. Vaa imusmää i ely: yylioppaan yyleihin lii y ä aa imukse ......................29
Ku io 9. Vaa imusmää i ely: yylioppaan komponen eihin lii y ä aa imukse .............31
Ku io 10. Vaa imusmää i ely: yylioppaan malleihin lii y ä aa imukse ....................32
Ku io 11. Vaa imusmää i ely: yylin al ojan aa imukse . ....................................32
Ku io 12. Yhden sisällön si umalli komponen in sisäisen ma ginaalin kanssa. ...............56
Ku io 13. Yhden sisällön si umalli ilman komponen in sisäis ä ma ginaalia. .................56
Ku io 14. Kahden sisällön si umalli oisen komponen in sisäisen ma ginaalin kanssa........57
Ku io 15. Kahden sisällön si umalli ma ginaali on komponen i ko os e una. ...............57
Ku io 16. Kahden sisällön si umalli ma ginaalia sisäl ä ä komponen i ko os e una. .......58
Ku io17.Vi es ,kokosi un es i.................................................................65
Ku io18.Vi es ,komponen in es i. .............................................................65
Ku io19.Playw igh ,kokosi un es i. ..........................................................66
Ku io20.Playw igh ,komponen in es i.........................................................66
Ku io21.Cyp ess,kokosi un es i. .............................................................66
Ku io22.Cyp ess,komponen in es i............................................................66
Ku io 23. Ensimmäisen a sinaisen es iajon ulokse ...........................................70
Ku io 24. Koko es isi un yöpöy ä-näkymän poikkeamaku a (T1)............................71
Ku io 25. Koko es isi un mobile-näkymän poikkeamaku a (T2)..............................71
Ku io 26. Koko es isi un able -näkymän poikkeamaku a (T3). ..............................72
Ku io 27. P imää ipainikkeen ulkoasu es in (T4) poikkeamaku a. ............................72
Ku io 28. P imää i ä ilaa ikon ulkoasu es in (T7) poikkeamaku a. ...........................73
Ku io 29. In olaa ikon ho e - es in (T8) poikkeamaku a. ......................................73
Ku io 30. Dialogi es in (T9) poikkeamaku a. ...................................................74
Ku io 31. Ponnahdusikkuna es in (T10) poikkeamaku a. ......................................74
Ku io 32. In olaa ikon ho e - es in (T8) oinen poikkeamaku a. ..............................75
Ku io 33. Dialogi es in (T9) oinen poikkeamaku a. ...........................................75
Ku io 34. Ponnahdusikkuna es in (T10) oinen poikkeamaku a................................76
Ku io 35. Dialogi es in (T9) kolmas poikkeamaku a. ..........................................76
Ku io 36. E aluoin i I, oiminnallisuus: huomio ja ja ko oimenpi ee .........................79
Ku io 37. E aluoin i I, käy e ä yys: huomio ja ja ko oimenpi ee ............................80
Ku io 38. E aluoin i I, ehokkuus: huomio ja ja ko oimenpi ee ..............................80
Ku io 39. E aluoin i I, ylläpi o: huomio ja ja ko oimenpi ee .................................81
Tauluko
Taulukko 1. Chak a:n Ale -komponen ia käy ä ä komponen i . ..........................38
Taulukko 2. Ki jas on Ale -komponen ia ku su a komponen i . ...........................39
i

Taulukko 3. Chak a:n Fo m-komponen ia käy ä ä komponen i . ............................41
Taulukko 4. AkamonFo m-komponen iin a i a a lisäpa ame i ...........................42
Taulukko 5. Chak a:n Menu-komponen ia käy ä ä komponen i . ............................43
Taulukko 6. AkamonMenu-komponen iin a i a a lisäpa ame i ...........................45
Taulukko 7. Chak a:n Modal-komponen ia käy ä ä komponen i . ..........................45
Taulukko 8. AkamonModal-komponen iin a i a a lisäpa ame i . ........................47
Taulukko 9. Chak a:n Popo e -komponen ia käy ä ä komponen i . .......................48
Taulukko 10. AkamonPopo e -komponen iin a i a a lisäpa ame i . ...................49
Taulukko 11. Ki jas on Popo e -komponen ia käy ä ä komponen i . .....................50
Taulukko 12. Chak a:n Table-komponen ia käy ä ä komponen i . .........................50
Taulukko 13. AkamonTable-komponen iin a i a a lisäpa ame i ........................52
Taulukko 14. Ki jas on Tool ip-komponen ia käy ä ä komponen i . .....................53
Taulukko 15. AkamonTool ip-komponen iin a i a a lisäpa ame i . ...................54
Sisällys
1 JOHDANTO ................................................................................ 1
2 TUTKIMUKSEN VIITEKEHYS JA MÄÄRITELMÄT ................................. 3
2.1 Komponen iläh öinen kehi ys ja koodin uudelleenkäy ö ......................... 3
2.2 G aa ise komponen iki jas o ....................................................... 4
2.3 Käy ölii ymän yyliopas............................................................ 5
2.4 Suunni elujä jes elmä ............................................................... 6
2.5 Tyylin al on a........................................................................ 8
3 TUTKIMUSKYSYMYKSET, TUTKIMUSMENETELMÄ JA SEN SOVELTA-
MINEN......................................................................................11
3.1 Tu kimuskysymykse .................................................................11
3.2 Tu kimusmene elmänpe iaa ee ....................................................11
3.3 Tu kimusmene elmän keskeise aihee .............................................14
3.4 Mene elmän käy ö ässä u kimuksessa ............................................15
3.5 Tu kimuksen aihee .................................................................16
3.5.1 Nyky ilan ka oi us: äsmällisyyssykli ........................................16
3.5.2 Ta oi e ilan ka oi us: ele anssisykli.........................................16
3.5.3 Tyyliopas:suunni elusykli....................................................17
3.5.4 Ohjee komponen iki jas on ekons uk iolle: suunni elusykli.............17
3.5.5 Tyylin al oja: suunni elusykli................................................17
3.6 A e ak ine aluoin i .................................................................17
4 TYÖKALUN SUUNNITTELU JA TOTEUTUS SYKLEITTÄIN.......................19
4.1 Täsmällisyyssykli - komponen iki jas on nyky ila.................................19
4.1.1 Modulaa inen uo e akenne ...................................................19
4.1.2 Tekninen o eu us ..............................................................20
4.1.3 Komponen iki jas on komponen i ...........................................21
4.1.4 Tuo e ungo ja komponen ien akenne .......................................22
4.1.5 Komponen ien yyli...........................................................24
4.2 Rele anssisykli: yökalun aa imukse ja hy äksymisk i ee i .....................26
4.2.1 Tyylioppaan aa imukse ......................................................26
4.2.2 Tyyleihin lii y ä aa imukse ................................................29
4.2.3 Tyylioppaaseen sisälly e ä ä komponen i ja niiden aa imukse ..........30
4.2.4 Malleihin lii y ä aa imukse ................................................31
4.2.5 Tyylin al ojan aa imukse ...................................................32
4.3 Suunni elusykli: yylioppaan o eu us ..............................................33
4.3.1 Komponen i ...................................................................33
4.3.2 Tyyli ...........................................................................35
4.3.3 Malli ...........................................................................36
4.4 Suunni elusykli: komponen iki jas on muu okse .................................37
4.4.1 Komponen i ...................................................................37
4.4.2 Tyyli ...........................................................................54
4.4.3 Malli ...........................................................................55
4.5 Suunni elusykli: yylin al ojan o eu us............................................58
4.5.1 Tes aus yökalujenesi ely .....................................................59
i
4.5.2 Työkalujen e ailua ja yylin al ojana käy e ä än es ausympä is ön
alin a ..........................................................................62
4.5.3 Tes aus yökalun käy ööno o komponen iki jas ossa.......................67
4.5.4 Käy ölii ymän isuaalise es i ..............................................68
4.5.5 Työkalun so el u uus yylin al ojaksi .......................................76
5 ARTEFAKTIN EVALUOINTI JA TULOKSET ITERAATIOITTAIN ..................78
5.1 Tyyliopas, ensimmäisen e aluoinnin ulokse .......................................78
5.1.1 Laa u aa imus en äy yminen ................................................78
5.1.2 Lähdekoodine aluoin i........................................................81
5.2 Tyyliopas, oisen e aluoinnin ulokse ..............................................81
5.3 Tyylin al oja, ensimmäisen e aluoinnin ulokse ..................................83
5.4 A e ak inkokonaisa io.............................................................84
6 YHTEENVETOJAPOHDINTA ..........................................................86
LÄHTEET.........................................................................................90
ii
1 Johdan o
G aa inen käy ölii ymä (GUI) on digi aalinen käy ölii ymä, jossa käy äjä uo o aiku aa
e ilais en g aa is en komponen ien kanssa. Tällaisia o a esime kiksi ku akkee , painikkee ,
aliko ja e ilaise lomakkee . G aa isessa käy ölii ymässä ole a isuaalise elemen i a joa-
a käy äjälle in o maa io a ja mahdollis a a oimin oja, joi a hän oi ehdä esime kiksi lähe -
ääkseen ie oa e eenpäin.(HubSpo 2024) Toimi a ja yylikäs käy ölii ymä on ä keä osa oh-
jelmis okehi ys ä, aiku aa me ki ä äs i käy äjäkokemukseen ja ukee a kaisujen kaupallis a
menes ys ä.
G aa is en käy ölii ymien suunni elussa on asapaino el a a mm. helppokäy öisyyden, oi-
minnallisuuden, u allisuuden ja houku ele an ulkoasun älillä. Käy äjä aa i a yhä dynaa-
misempia käy ölii ymiä ja odo a a niiden oimi an monenlaisilla lai eilla (Lynch ja Ho on
2016). Vaadi aan opi a uu a, johdonmukaisuu a ja saa u e a uu a (HEAVY.AI 2024). Näi-
hin seikkoihin oidaan aiku aa käy ölii ymän g aa isilla komponen eilla. Suunni elun e-
hokkuu a oidaan pa an aa ekemällä komponen eis a uudelleenkäy e ä iä ja jä jes ämällä ne
komponen iki jas oon.
Kohdeo ganisaa io Akamon Inno a ions Oy kehi ää ohjelmis o uo ei a, joi a käy ä ä usea
asiakkaa . Tuo ee ää älöidään asiakkaan a peiden mukaan komponen eis a koos e uis a uo-
e ungois a. Asiakas o eu us en ois eisuu a ähen ämään on pe us e u käy ölii ymäkompo-
nen ien ki jas o, jonka uudelleenkäy e ä iä komponen eja o eu a a usea kehi äjä . Käy ö-
lii ymien yh enäinen ulkoasu on kui enkin ämän myö ä kä siny . On luo a a ohjeis us, jonka
pohjal a jokainen kehi äjä oi saada aikaan yh iön ilmeen mukaisia uo ei a. Pelkkä ohjeis-
us ei kui enkaan ii ä, aan komponen ien ja niis ä koos e ujen käy ölii ymien as aa uus
yylioppaaseen on a kas e a a ohjelmallises i. Tu kimusongelma on näin ollen olemassa.
Tässä u kimuksessa suunni el iin ja o eu e iin kohdeo ganisaa iolle heidän a koi us aan as-
aa a yyliohjeis us, joka lii e iin olennaiseksi osaksi olemassa ole aa komponen iki jas oa.
Laadi iin ohjee ki jas on aken een ekons uoimiseksi niin, e ä kaikki komponen ien yyli-
mää i ykse löy y ä yhdes ä paikas a, jolloin niiden ylläpi o helpo uu me ki ä äs i. Tyylien
al on aa a en akenne iin malli käy ölii ymän isuaalisis a eg essio es eis ä.
Lu ussa 2 esi ellään u kimuksen ii ekehys. Puhu aan komponen iläh öises ä kehi ykses ä,
komponen ien uudelleenkäy ös ä ja niiden jä jes ämises ä ki jas oon. Esi ellään käsi ee käy -
1
•Malli ase ele a a omi , molekyyli ja o ganismi jä jes ykseen muodos aen si usuun-
ni elmia. Esime kkinä oisi olla aikkapa e usi un ase elu, jossa halli u kokonaisuus
syn yy useas a osas a. Mallien a koi us on pi ää yllä komponen ien jä jes ys ä si ulla,
ei keski yä sen sisäl öön.
•Näkymä muodos u a , kun malleihin lisä ään odellis a sisäl öä. Lopullis en näkymien
pe us eella oidaan ha ai a a e a muunnella malleja, jo a kokonaisuudes a saadaan
oimi a monenlaisella sisällöllä.
Tyylioppaan ja suunni elujä jes elmän aken amisessa a omisuunni elun mene elmäs ä oi ol-
la hyö yä. F os muis u aa, e ä aiheiden suo i usjä jes ys ä ei ole a koin säädel y. Tä keäm-
pää on aja ella mene elmää henkisenä mallina, jonka a ulla ymmä ämme pai si kokonaisuu a,
myös pieniä yksi yiskoh ia. (F os 2016)
2.5 Tyylin al on a
Kun suunni elujä jes elmä on luo u, sen käy öä ulee myös al oa. Tyylioppaan ja digi aalisen
uo een älinen yh eys on näin muodos e u mu a sen hyödyn ämises ä ei ole a muu a. S aa -
isen yylioppaan kohdalla sen nouda aminen jää kehi äjän as uulle. Ohjeiden sisäis äminen
ja niiden a kka so el aminen paineen alla on yksilöllis ä ja epä a maa. Elä än yylioppaan
apauksessa yyliohjeen nouda aminen on pääosin au oma isoi ua. Mikään ei kui enkaan ek-
nises i es ä kehi äjää lisäämäs ä esime kiksi yylimää i yksiä käy ämiinsä komponen eihin.
On ol a a jokin keino, jolla yyliohjeen nouda amis a oidaan al oa.
G aa iseen käy ölii ymä es aukseen kuuluu sekä isuaalis a e ä oiminnallis a es aus a. Käy -
ölii ymän oiminnallinen es aus koe aan ä keänä osana kehi ys yö ä, koska sillä a mis e-
aan, e ä so ellus oimii odo us en mukaises i. Visuaalinen es aus sen sijaan koe aan usein
oissijaiseksi. Sillä on kui enkin käy äjäkokemuksen kannal a ä keä me ki ys ja se aiku aa
suo aan uo een laa uun ja usko a uu een (So wa e Tes ing Help 2023). Tässä u kimuksessa
keski y ään ain käy ölii ymän isuaaliseen es aamiseen ja sen myö ä yylin al on aan.
Käy ölii ymän isuaalinen es aus a koi aa e oa aisuuksien ha ainnoin ia so elluksen sisäl-
lössä ja ulkoasussa, eli siinä, mis ä elemen eis ä si u koos uu, mi en ne on ase el u ja mil ä ne
näy ä ä ja un u a . Si un sisällön oikeellisuu a a ioidaan elemen ien sijainnin, muodon ja
koon pe us eella. Va mis e aan, e ei ä elemen i sijoi u päällekkäin ja e ä ne o a näky is-
sä. Ulkoasun oikeellisuus odenne aan a kas elemalla mm. ä ejä, on eja, ki kkau a ja kon -
8

as ia. Tänä päi änä oman haas eensa uo a e ilaise käy öjä jes elmä , e kkoselaime , eso-
luu io ja lisäksi al a a mää ä e ilaisia lai ei a. Visuaalisen es auksen a oi eena on myös
a mis aa, e ä so ellus näy ää oikeal a ja ulkoasu on yh enäinen huolima a käy äjän ali se-
mas a yhdis elmäs ä.(So wa e Tes ing Help 2023)
Visuaalinen es aus oidaan o eu aa manuaalises i, a kas elemalla kah a ilanneku aa ie ek-
käin ja e simällä poikkea uuksia (So wa e Tes ing Help 2023). Ihmissilmä ha ai see ii ä ä
e oa aisuude , eikä pikselin a kkuudelle a i se mennä, jos koko yylioppaan a oi eena on
yh enäinen ilme. Tällainen es aus on kui enkin käsi yö ä ja yön laa u on yksilöllis ä. Yksi
es aaja ha ai see e o ois a a kemmin. Lisäksi eh ä ä aikeu uu me ki ä äs i, kun a kas e -
a aa sisäl öä on paljon, ai kun jokainen mahdollinen näy öyhdis elmä on u ki a a e ikseen.
Visuaalinen es aus oidaan o eu aa myös au omaa ises i niin, e ä ohjelmis o suo i aa ele-
men ien isuaalisen e ailun e ilaisissa näy öyhdis elmissä. Tämä oi apah ua kahdella a-
alla: snapsho - es auksena ai ekoälyalgo i meihin ja ie okonenäköön pe us u ana es aukse-
na (So wa e Tes ing Help 2023).
Val aosa ma kkinoilla ole is a isuaalisen es auksen yökaluis a käy ää snapsho - ekniikkaa.
Siinä ohjelma o aa es auksen e i aiheissa käy ölii ymäs ä ku akaappauksia, joi a e a aan
e okkiku iin. Ve ailu apah uu u kimalla ku ien bi ika oja, käymällä läpi jokainen pik-
selipa i uo ollaan, jolloin i heilmoi us syn yy, kun pikseleiden älillä on e oja. Tes auksen
jälkeen ohjelma luo apo in, jo a es aaja oi analysoida. Tällä a oin i hei ä oidaan löy ää
a kemmin, nopeammin ja johdonmukaisemmin kuin ihmissilmällä. Mene elmään lii yy kui-
enkin haas ei a. E ilaise selaime , näy önohjaime ja esoluu io , jopa ende öin ialgo i mi ai-
heu a a me ki ykse ömiä pikselie oja, eikä kyse ole aidos a isuaalises a i hees ä. Tes aajan
analyysin a aan jää löy ää odellise i hee , mikä jälleen aa ii manuaalis a yö ä (Xu 2022).
Mode nein apa on ekoälyalgo i mien ja ie okonenäön käy ö isuaalisessa es aamisessa.
Kaikes a ohjelmis o es auksessa käy e ys ä ekoälys ä, on isuaalisella AI- es aamisella ollu
iime uosina suu in aiku us (Volk 2021). Pe iaa e on samanlainen kuin snapsho - es auksessa,
ku akaappauksia o e aan es auksen ede essä, mu a ku ien e ailu apah uu ekoälya us ei-
ses i. Pikselien e ailun sijaan ie okonenäön a ulla kone koulu e aan unnis amaan elemen e-
jä käy ölii ymäs ä ja käsi elemään isuaalis a ie oa ku en ihmisnäkö. Ihmisen näkö pe us uu
e kkokal on, näköhe mojen ja isuaalisen ai okuo en yh eis oimin aan (Pandey 2022). Tie o-
konenäkö hyödyn ää kame oi a, da aa ja algo i meja suo i aakseen saman oiminnon (Pandey
2022). Tällainen mene elmä luo huoma a as i ähemmän i heellisiä häly yksiä (engl. alse
9
posi i es) kuin pikselikoh ainen e ailu (Ba a 2024) ja sillä oidaan analysoida uhansia ku-
ia sekunnissa (Pandey 2022).
Tämän u kimuksen pui eissa e si ään pa hai en so el u a mene elmä ja yökalu kehi e ä än
yylioppaan yylin al ojaksi. Jos päädy ään ma kkinoilla almiina ole aan a kaisuun, on ä -
keää, e ä se aipuu myös käy ölii ymän oiminnalliseen es aukseen huolima a sii ä, e ä ämä
u kimus keski yy isuaaliseen es aukseen. Näin ali un yökalun äysi po en iaali on mahdol-
lis a hyödyn ää ja kossa.
10
3 Tu kimuskysymykse , u kimusmene elmä ja sen
so el aminen
Tu kimusongelmana on, kuinka säily ää käy ölii ymän yh enäinen isuaalinen ilme, kun ke-
hi äjiä on mon a ja jokaisella oma apansa oimia. Keski y ään liikaa oiminnallisuu een ja
isuaalise seika jää ä oissijaisiksi, aikka niillä on ä keä me ki ys uo een laa uun ja kau-
palliseen menes ykseen.
3.1 Tu kimuskysymykse
Tu kimusongelman pe us eella oidaan ase aa seu aa a u kimuskysymykse :
•TK1: Mi ä asioi a yylioppaan äy yy sisäl ää, jo a a mis e aan käy ölii ymän
yh enäinen ilme ja pa anne aan käy äjäkokemus a?
• ATK1: Kuinka yyliopas ulee aken aa, jo a se oimii yhdessä olemassa ole an kompo-
nen iki jas on kanssa?
• ATK2: Mi ä muu oksia ki jas on komponen eihin on eh ä ä, jo a yylimää i ys en yl-
läpi o oidaan keski ää yh een paikkaan?
• ATK3: Mi en a mis e aan, e ä e i kehi äjien luoma komponen i as aa a anne uja
yyliohjei a?
•TK2: Mi ä aih oeh oja on olemassa al oa komponen eis a koos e un käy ölii y-
män isuaalis a ilme ä ja as aa uu a yylioppaaseen?
Näis ä kysymyksis ä ensimmäinen ja iimeinen o a a sinaise u kimuskysymykse ja ki ey -
ä ä u kimuksen a oi een. Ali u kimuskysymyksiä käy e ään apuna u kimuksen osa a oi -
eiden saa u amisessa.
3.2 Tu kimusmene elmän pe iaa ee
Tie ojä jes elmä ie een u kimus a luonneh i a kaksi oisiaan äyden ä ää mu a e illis ä pa a-
digmaa: käy äy ymis iede (engl. beha io al science) ja suunni elu iede (engl. design science).
Käy äy ymis iede py kii kehi ämään ja oden amaan eo ioi a, jo ka seli ä ä ai ennus a-
a ihmis en ai o ganisaa ion käy äy ymis ä. Suunni elu iede sen sijaan py kii laajen amaan
ihmis en ja o ganisaa ioiden almiuksia luomalla uusia inno a ii isia yökaluja, a e ak eja.
11
(He ne ym. 2004)
Tämän u kimuksen mene elmänä on suunni elu u kimus (engl. design science esea ch), jon-
ka uloksena suunni ellaan ja o eu e aan uusi a e ak i, yökalu, joka a kaisee kohdeo gani-
saa ion ongelman. Suunni elu u kimus on siis a kaisukeskeis ä u kimus a, jossa käy ännön
ongelmaan hae aan oimi aa a kaisua. Tu kimuksen uloksena suunni ellaan jokin uusi, inno-
a ii inen IT-a e ak i, joka a kaisee a kaisema oman ongelman, ai a joaa ehokkaamman
a kaisun jo aiemmin a kais uun ongelmaan. Mene elmän a oi eena on pa an aa sekä eo iaa
e ä käy än öä kehi ämällä a e ak eja, jo ka as aa a odellisiin haas eisiin. Suunni elu u ki-
mukseen kuuluu näiden a e ak ien aken aminen, niiden hyödyllisyyden ja ehokkuuden es-
aaminen sekä edelleen jalos aminen es aukses a saadun palau een ja a ioinnin pe us eella
(He ne ym. 2004; Pe e s ym. 2007).
Suunni elun käsi e ekniikassa on u u jo a haisil a ajoil a, mu a a sinainen suunni elu u -
kimus, sen muodollinen unnus aminen s uk u oi una u kimusmene elmänä nousi esiin as-
a 1990-lu ulla, kun halu iin e o aa puh aas i eo ee inen yö käy ännön a kaisujen kehi ä-
mises ä. Alan He ne in ja hänen kollegoidensa uonna 2004 julkaisemaa a ikkelia ” Design
Science in In o ma ion Sys ems Resea ch” pide ään aka eemisessa ki jallisuudessa laajal i pe-
us a anlaa uisena.
He ne ym. (2004) mukaan suunni elu u kimukselle luon eenomais a on se, e ä a kais a a-
na on ns. iheliäinen ongelma, jolle he ie ojä jes elmä ie een osal a mää i ele ä seu aa a
unnusme ki :
• epä akaa aa imukse ja ajoi ukse , jo ka pe us u a huonos i mää i el yyn kon eks iin
• monimu kainen uo o aiku ussuhde ongelman ja sen a kaisun osakomponen ien älillä
• luon ainen jous a uus muu aa suunni elup osesseja sekä a e ak eja
• k ii inen iippu uus ihmisen kogni ii isis a ky yis ä ehokkaiden a kaisujen uo ami-
seksi
• k ii inen iippu uus ihmisen sosiaalisis a ky yis ä ehokkaiden a kaisujen uo amisek-
si.
He ne ym. (2004) mukaan suunni elu ie een pa adigmassa ie o ja ymmä ys alli se as a
ongelmas a ja sen a kaisu saa u e aan aken amalla ja hyödyn ämällä suunni el ua a e ak-
ia. Suunni elup osessi sisäl ää sa jan asian un ija oimia, joka joh aa inno a ii isen a e ak in
luomiseen. A e ak in e aluoin i puoles aan an aa palau e a ja lisää ymmä ys ä ongelmas a
12
pa an aen näin sekä uo een laa ua ja e ä i se suunni elup osessia. Tällais a akenna-e aluoi-
silmukkaa i e oidaan usei a ke oja, kunnes a e ak i saa lopullisen muo onsa (Ma ch ja Smi h
1995). Tällä a oin suunni elu ie een u kija kehi ää samaan aikaan sekä suunni elup osessia
e ä suunni el ua a e ak ia osana u kimus a (He ne ym. 2004). Suunni elu u kimus a koske-
assa a ikkelissaan He ne ym. (2004) mää i ele ä sei semän ohjenuo aa u kimusmene el-
män ymmä ämiseen, o eu amiseen ja a ioin iin:
1. Luodaan inno a ii inen ja a koi uksenmukainen a e ak i. Suunni elu u kimuksen
ulos on mää i elmänsä mukaan a koi uksenmukainen IT-a e ak i, joka on luo u a kai-
semaan ä keä o ganisa o inen ongelma. Se on ku a a a ehokkaas i, jo a se oidaan
o eu aa ja so el aa asianmukaisella a alla ympä is össä, johon se on suunni el u.
2. Ongelma on a koin mää i e y. Koska a e ak in ulee olla a koi uksenmukainen, sen
ulee luoda hyödyllinen a kaisu mää i el yyn ongelmaan. Ta oi eena on hankkia ie oa
ja ymmä ys ä, joka mahdollis aa ähän as i a kaisema omien, ä keiden liike oimin-
aongelmien eknologiapohjais en a kaisujen kehi ämisen ja o eu amisen. Suunni e-
lu iede lähes yy ä ä a oi e a aken amalla inno a ii isia a e ak eja, jois a jokaisen on
a jo a a uu a ie oa ja haas e a a en ise a kaisu . Ongelma oidaan mää i ellä e oiksi
a oi e ilan ja jä jes elmän nykyisen ilan älillä. Ongelman a kaisu on e sin äp osessi,
jossa e si ään ehokkain a a kaisua näiden e ojen ähen ämiseksi ai pois amiseksi.
3. A e ak in e aluoin i on a kaise aa. Suunni ellun a e ak in hyödyllisyys, laa u ja
ehokkuus on osoi e a a a kas i hy in o eu e ujen a ioin imene elmien a ulla. IT-
a e ak eja oidaan a ioida oimi uuden, äydellisyyden, johdonmukaisuuden, a kkuu-
den, suo i usky yn, luo e a uuden, käy e ä yyden ja yh eensopi uuden o ganisaa ioon
ja muiden asiaankuulu ien laa ua ibuu ien pe us eella. A ioin i aihe an aa olennais a
palau e a suunni elup osessin ja kehi e ä än uo een laadus a. A e ak i on äydellinen
ja ehokas, kun se äy ää sen ongelman aa imukse ja ajoi ukse , siinä liike oimin aym-
pä is össä, jossa sen oli a koi us oimia.
4. Tu kimuksen ulee a jo a jokin selkeä panos. Tehokkaan suunni elu u kimuksen on
a jo a a selkeä panos joko suunni elua e ak iin, suunni elun pe us uksiin ja/ ai suun-
ni elun mene elmiin lii yen. Useimmi en u kimuksen a joama panos on suunni el u
IT-a e ak i.
13

5. A e ak in ulee olla äsmällises i mää i el y, i allises i esi e y ja johdonmukai-
nen. Täsmällisyys lii yy apaan, jolla u kimus suo i e aan. Suunni elu u kimus edel-
ly ää äsmällis en mene elmien so el amis a sekä suunni ellun a e ak in aken amisessa
e ä sen a ioinnissa.
6. Suunni elu iede oimii pa haan a kaisun e sin äp osessina. Suunni elu u kimus on
pohjimmil aan e sin äp osessi ehokkaan a kaisun löy ämiseksi. Ra kaisua hae aan i e-
oiden, kunnes pa as ja op imaalisin ulos saa u e aan.
7. Suunni elu u kimuksen ulokse on kommunikoi a a ehokkaas i. Suunni elu u -
kimuksen ulokse ulee esi ää sekä eknologiao ien oi uneelle e ä joh amisläh öiselle
yleisölle. Tämä an aa o ganisaa iolle mahdollisuuden hyödyn ää a e ak in a joamia e u-
ja ja an aa samalla myös u kijoille mahdollisuuden aken aa kumula ii is a ie opohjaa.
Näin luodaan ymmä ys ä p osesseis a, joilla a e ak i on akenne u ja kuinka si ä on
a ioi u.
3.3 Tu kimusmene elmän keskeise aihee
Siinä missä He ne ym. (2004) mää i ele ä u kimusmene elmän yleise ohjenuo a , keski -
yy He ne (2007) a ikkelissaan analysoimaan u kimusp osessia kolmen läheises i oisiinsa
lii y än oimin asyklin kau a, jo ka on esi e y ku iossa 2.
Ku io 2. Suunni elu u kimuksen aihee He ne (2007) mallin mukaan, apaa käännös.
14
Rele anssisyklissä (engl. ele ance cycle) mää i ellään aa imukse , jo ka syn y ä u kimuk-
sen kon eks uaalises a ympä is ös ä, ku en ihmise , o ganisaa io ja eknise jä jes elmä . Sa-
malla py i ään unnis amaan uusia mahdollisuuksia ja ongelmia kyseisessä ympä is össä. Vaa-
imus en lisäksi ele anssisyklissä mää i ellään myös hy äksymisk i ee i u kimus ulos en lo-
pullis a a ioin ia a en. Suunni elu u kimuksen uo os, a e ak i palau e aan ympä is öönsä
ken ä es aus a a en. Rele anssisyklin oinen i e aa io alkaa palau eella ken ä es aukses a
ja e enee u kimus aa imus en uudelleenmää i ykseen odellisen kokemuksen pe us eella. Re-
le anssisykli yhdis ää näin u kimusp ojek in kon eks uaalisen ympä is ön suunni elu ie een
oimin oihin.
Täsmällisyyssyklissä (engl. igo cycle) a kas ellaan eo ioi a ja mene elmiä, alan kokemus-
a ja asian un emus a sekä so ellusalueel a löy ynei ä a e ak eja ja p osesseja, eli u kimuksen
ie opohjaa. Tu kimuksen aikana syn y ä uusi ie o lisä ään olemassa ole aan ie opohjaan. Täl-
laisia lisäyksiä oi a olla laajennukse eo ioihin, uude a e ak i sekä u kimuksen pe us eella
syn y ä kokemus. Näin oidaan a ioida u kimusp ojek in inno a ii isuu a. Tällä a oin äs-
mällisyyssykli yhdis ää suunni elu ie een oiminno ie opohjaan.
Suunni elusykli (engl. design cycle) on jokaisen suunni elu u kimusp ojek in sydän. Tässä
syklissä i e oidaan a sinaisen a e ak in ja p osessien akennus- ja e aluoin i aihei a, kunnes
halu u loppu ulos saa u e aan. He ne (2007) pi ää ä keänä ymmä ää suunni elusyklin iip-
pu an kahdes a muus a syklis ä. A e ak ia a ioidaan sille ele anssisyklissä ase e uja aa i-
muksia as aan. Suunni elu- ja e aluoin i eo ia ja -me odi puoles aan pohjau u a äsmälli-
syyssykliin.
He ne (2007) mukaan näiden kolmen syklin on ol a a läsnä ja selkeäs i unnis e a issa hy äs-
sä suunni elu ie een u kimusp ojek issa. Tämä e o aa suunni elu u kimuksen sel äs i muis a
u kimuspa adigmois a.
3.4 Mene elmän käy ö ässä u kimuksessa
Suunni elu u kimuksen alin a ämän u kimuksen mene elmäksi on pe us el ua, koska u ki-
mus on selkeäs i a kaisuläh öinen ja on olemassa ai o ongelma. Tu kimuksen uloksena suun-
ni ellaan ja o eu e aan uusi a e ak i, yökalu, joka as aa kohdeo ganisaa ion konk ee iseen
haas eeseen. To eu e a aa a e ak ia u ki aan ja e aluoidaan siinä kon eks issa, jossa sillä on
a koi us. Samalla uo e aan uu a ymmä ys ä ilan ees a, jossa a e ak i aiku aa.
15
Kohdeo ganisaa ion ongelma lukeu uu iheliäiseksi. Vuo o aiku ussuhde nykyisen komponen -
iki jas on komponen ien älillä on monimu kainen, eikä ue yylil ään yh enäisen ilmeen muo-
dos us a. Kyseessä on lisäksi ongelma, jonka a kaisu pe us uu ihmisen sekä kogni ii isiin e ä
sosiaalisiin kykyihin. Kun usea kehi äjä luo a komponen eja ilman yh eisiä ohjei a, loppu-
ulos on ah as i iippu ainen ekijänsä eknisis ä aidois a, aja usmallis a ja sii ä kuinka hän
i se on eh ä än ymmä äny . To eu us iippuu myös yhmädynamiikas a ja sii ä, mi en ehok-
kaas i iimi yö ä hyödynne ään pa haan a kaisun saa u amiseksi.
3.5 Tu kimuksen aihee
Tu kimus o eu e aan syklei äin He ne (2007) mallia mukaillen. Rele anssisyklissä sel i e-
ään o eu e a an yökalun aa imukse ja hy äksymisk i ee i . Täsmällisyyssyklissä sel i e-
ään u kimuksen ie opohja, olemassa ole a a kaisu , yösken ely a a , ie ämys, kokemus ja
asian un emus. Tu kimuksen ä kein sykli on kui enkin suunni elusykli, jo a i e oiden suun-
ni ellaan ja o eu e aan yökalu kohdeo ganisaa ion a peisiin. Jokaisen i e aa ion pää eeksi
suo i e aan e aluoin i. Lopuksi pala aan ele anssisykliin a ioimaan, kuinka hy in ase e u
aa imukse äy yi ä ja äsmällisyyssykliin sel i ämään, mi ä uu a ie ämys ä a e ak i lisäsi
ie opohjaan.
3.5.1 Nyky ilan ka oi us: äsmällisyyssykli
Ensin on muodos e a a ku a kohdeo ganisaa ion ämänhe kises ä oimin a a as a, eknisis ä
a kaisuis a sekä näihin lii y is ä haas eis a. Tu ki aan komponen iki jas on sisäl öä ja poimi-
aan kaikki se, mikä oisi jollain lailla lii yä käy ölii ymän ilmeeseen. Kuinka laajal i Cha-
k a UI -komponen eja on käy össä ja mi ä yylejä niihin lii yy? Ku a aan esime kinomaises i,
kuinka uo e ungo aken u a ki jas on komponen eis a.
3.5.2 Ta oi e ilan ka oi us: ele anssisykli
Mää i ellään, mi kä komponen i ulisi sisälly ää yylioppaaseen ja millaisia a iaa ioi a niis ä
ulisi olla. Tämän pe us eella muodos e aan yylioppaan a oi e ila. Mää i ellään myös, mil-
ä osin komponen ien ulisi olla muoka a issa asiakas o eu uksissa ja kuinka ämä ulee o-
eu aa. Millaisia asioi a yylin al ojan halu aan a kas a an yksi äisis ä komponen eis a ja
edelleen uo e ungois a? Ka oi e aan saa a illa ole ien es i yökalujen ki jo ja ali aan u ki-
muksessa käy e ä ä yökalu . Pää e ään, mi en yökalun onnis umis a a ioidaan u kimuksen
16
pää eeksi ja mi kä o a hy äksymisk i ee i .
3.5.3 Tyyliopas: suunni elusykli
Suunni ellaan ja o eu e aan yylioppaan sisäl ö, akenne, a i a a komponen i ja niiden e i
a iaa io . Ki joi e aan niihin lii y ä dokumen aa io sekä yleise yyliohjee . To eu us e aluoi-
daan ja a i aessa suo i e aan uusi i e aa io.
3.5.4 Ohjee komponen iki jas on ekons uk iolle: suunni elusykli
Nykyisen komponen iki jas on koko ja akenne huomioiden äydellisen ekons uk ion o eu -
aminen u kimuksen pui eissa on mahdo on a. Sen sijaan laadi aan ohjee komponen iki -
jas on ekons uk iolle. Täsmällisyyssyklissä ke ä yjen ie ojen pe us eella ohjeis e aan koh-
deo ganisaa io a komponen ien yylimää i ys en pois amisessa ja siinä, kuinka ii aaminen
yylioppaan komponen eihin ehokkaimmin apah uisi. Ohja aan myös si umallien käy ööno-
ossa ja muu oksissa o ganismikoh ais en näy e-ikkunoiden (Playg ound) esi yksissä. Mää i el-
lään oimenpi ee aihei ain, jo a aikaansaadaan komponen iki jas o, joka pe us uu elä ään
ja helpos i ylläpide ä ään yylioppaaseen.
3.5.5 Tyylin al oja: suunni elusykli
Suo i e aan u kimukseen ali ujen es i yökalujen e ailu o eu amalla kullakin yökalulla
sama muu aman komponen in es ijoukko. E aluoidaan e ailun ulokse ja ali aan a si-
naisessa yylin al ojassa käy e ä ä yökalu. Suunni ellaan ja o eu e aan isuaalise käy ö-
lii ymä es i . Yksi äis en komponen ien sekä mahdollisuuksien mukaan uo e unkojen näy e-
ikkunoiden g aa inen ulkoasu es a aan ohjelmallises i. Komponen iki jas oon lii e ään apo i
isuaalisen es auksen ilas a ja koodika a uudes a. To eu us e aluoidaan ja a i aessa suo i-
e aan uusi i e aa io.
3.6 A e ak in e aluoin i
Suunni elusyklien i e aa ioiden pää eeksi suo i e aan a e ak in e aluoin i. A ioidaan, äy -
ääkö suunni el u ja o eu e u yökalu i e aa iolle ase e u aa imukse . A ioidaan myös, kuin-
ka he kkä yökalu on ympä is ön muu oksille ai muu oksille i se yökalussa eli kuinka yökalun
ja ympä is ön uo o aiku us muu uu, jos ympä is ö ai yökalu i se muu uu.
17
Ku io 6. In oices-komponen in akenne UML-kaa iona.
In oices-komponen i on hy ä esime kki uo e ungon yhdes ä moduulis a, joka oimii i se-
näises i. Se oidaan joko sisälly ää ai jä ää pois asiakas o eu ukses a. Samalla pe iaa eella
oimii esime kiksi Messages-komponen i. Sen o eu ukseen a i aan 19 ki jas ossa ole an
komponen in yh eis yö ä. Samaan apaan aken u a uo e ungon muu kin moduuli .
4.1.5 Komponen ien yyli
Käy ölii ymän pääasiallinen ilme aken uu ällä he kellä Chak a UI -komponen ien ul-
koasus a. Kui enkin ain ha oin, on komponen eja käy e y sellaisenaan. Val aosa Chak a-
komponen eis a on jollain a alla yyli el y: käy e y ie yä a ian ia, ä iä, kokoa, ma ginaa-
leja ai älis yksiä. Kaikki nämä yylimuo oilu on o eu e u ki jas on komponen ien sisällä
niin, e ä jokaisella Chak a-ins anssilla saa aa olla e ilaise yylimää ee . Sama mää ee osi -
ain ois u a kin, mu a o eu us apa selkeäs i hankaloi aa yylin ylläpi oa ja mahdollis a muu-
os a. Esime kiksi Chak a:n Bu on-komponen i on käy össä 42 e i komponen issa, jois a lä-
hes kaikkien yh eydessä on jonkinlainen muo oilu. Jos painikkeen ulkoasua halu aan yh enäis-
24

ää, on muu os eh ä ä jokaiseen Bu on-komponen in ins anssiin. Käy ölii ymäs ä löy yy
ällä he kellä 17 e ilais a painike a, jois a useimmilla on edelleen painikkeen ilaan lii y iä,
osin oisis aan poikkea ia muo oiluja.
Si ujen ase elussa on käy e y monenlais a o eu us apaa. Vaikka yleisilme näy ää yh enäisel-
ä, sen akaa löy yy e i komponen ein o eu e uja aken ei a. Chak a UI:lla on almiina mai-
nio yhmi elykomponen i S ack, jos a edelleen on olemassa almii VS ack- ja HS ack
- o eu ukse ( e ikaalinen ja ho ison aalinen). Näi ä on käy e y keskimää in 30 komponen-
issa ku akin, mu a niiden lisäksi si uase elua on o eu e u hämmäs y ä än usein Flex- ja
Box-komponen ein. Jälkimmäise oimi a ässä a koi uksessa kyllä, mu a aa i a enemmän
yylimää i yksiä näy ääkseen samal a kuin almii yhmi elyyn a koi e u komponen i . Yh-
enäisen ilmeen ja koodin lue a uuden uoksi olisi hy ä käy ää samoja yh eises i ali uja
komponen eja.
Komponen ien esponsii isuus on o eu e u aih ele in a oin. Useimma komponen i oimi-
a e i kokoisilla näy öillä, mu a jälleen o eu us apa on e ilainen. Osa komponen eis a käy ää
Chak a:n almis a hookia, useB eakpoin Value, jolla elemen ien yyli sido aan uudun
kokoon muu ujan a ulla. Val aosalla komponen eis a esponsii isuus pe us uu Chak a:n si-
sään akenne uihin ai ekoh iin (engl. b eakpoin ), jo ka oidaan mää i ellä kullekin p ojek ille
eeman yh eydessä. Komponen eille anne aan ällöin ku akin ai ekoh aa as aa a yylimää e.
Jos eemassa ei näi ä koh ia ole mää i el y, käy e ään Chak a:n ole usase uksia. Tällaisen es-
ponsii isuuden oi edelleen o eu aa aulukko- ai olio-syn aksina. Molemma a a o a käy-
össä ämän he ken komponen iki jas ossa. Jälleen, ähin äänkin koodin lue a uu a helpo -
aisi yh enäinen apa oimia.
Elemen ien koko oidaan ilmais a useilla e i a oilla ja mi ayksiköillä. Ki jas on komponen-
eissa kokoja on mää i el y ainakin yksiköissä px, em, h ja %. Lisäksi Chak a:n elemen i-
koh aisis a koko-ominaisuuksis a on käy össä älis yksille ja ma ginaaleille objek imuo o, esi-
me kiksi 2, joka as aa kokoa 0.5 em ai 8px. Teks in koko on yleensä mää i el y Chak a:n
ole uskokoja käy äen, ku en sm,md,lg, mu a poikkea ia apoja löy yy myös, jopa kompo-
nen ien sisäl ä. Myös eks in paksuudessa, o sikoiden yylissä sekä monissa muissa ominai-
suuksissa on käy össä e ilaisia apoja saa u aa jokin loppu ulos.
Val aosa komponen ien yyleis ä on siis mää i el y kunkin ins anssin yh eydessä. Maini a-
koon ielä, e ä ämän lisäksi esime kiksi Da ePicke -komponen illa on äysin oma e illinen
CSS- iedos onsa, jos a komponen in ulkoasu hae aan. Myös komponen i , joiden o eu uksessa
25
on käy e y cha s.js- ai VisX- isualisoin ia aiheu a a poikkeuksen oimin a a assa. Näiden
osal a mää i ykse joko hae aan ole uksena käy e ä äs ä ki jas os a ai anne aan akioina kom-
ponen in o eu uksen yh eydessä.
Edellä maini u epäjohdonmukaisuude ja ylläpi oa hankaloi a a akenne kielii yh eisen yyli-
oppaan puu ees a. Suu ena haas eena p ojek in onnis umiselle on se, e ä ki jas ossa on jo al-
a a mää ä almis a oimi aa koodia. Tä ä u kimus a ehdessä ki jas o on käy össä ja muun uu
koko ajan. Elä än yylioppaan sisälly äminen ki jas oon ja komponen ien nykyis en yylien
ohjaaminen yh een paikkaan aa ii aken een massii is a uudelleen jä jes elyä. Uuden oimin-
a a an hy äksyminen ja sen omaksuminen osaksi u iinia aa ii o ganisaa iol a ah aa si ou-
umis a ja jous oa. Ta koi us on lopul a helpo aa kehi äjien yö ä, ei hankaloi aa si ä.
4.2 Rele anssisykli: yökalun aa imukse ja hy äksymisk i ee i
Tässä lu ussa esi ellään yylioppaalle ja sen al ojalle ase e u aa imukse . To eu e a an yö-
kalun a oi e ila mää i ellään aa imusmää i elyn a ulla, joka jae aan kah een osaan, yyli-
oppaan ja yylin al ojan aa imuksiin. Tyylioppaan osal a mää i ellään yleise aa imukse ,
yyleihin lii y ä aa imukse sekä o eu e a ien komponen ien aa imukse . Tyylin al ojan
osal a keski y ään yökalun alin aan ja sille mää i el ä iin yleisiin aa imuksiin. Lu ussa esi-
ellään myös, mi en a e ak in onnis umis a a ioidaan u kimuksen pää eeksi ja mi kä o a sen
hy äksymisk i ee i .
4.2.1 Tyylioppaan aa imukse
Ku iossa 7 on esi e y yylioppaalle ase e u yleise aa imukse , jo ka ka a a yylioppaan si-
jainnin, aken een ja o eu uksen lisäksi aa imuksia mm. komponen ien nimeämiseen, koo-
dauskäy än öön ja dokumen oin iin lii yen. Myös asiakas o eu uksia a en a i a a ää ä-
löin i ja sen aiku ukse monikäy öisiin g aa isiin komponen eihin on o e a a huomioon a-
oi e ilaa mää i el äessä. Yleis en aa imus en yh eydessä ase e aan myös yylioppaan hy äk-
symisk i ee i . Tämän u kimuksen a oi eena on o eu aa sellainen osa yyliopas a, jo a oi-
daan käy ää esime kkinä yön ja kamisessa koh i äydellis ä yyliopas a ja edelleen suunni e-
lujä jes elmää.
26
Ku io 7. Vaa imusmää i ely: yylioppaan yleise aa imukse .
Tyylioppaan sijain i, akenne ja ekninen o eu us olemassa ole aan komponen iki jas oon näh-
den on a kkaan mie i ä ä. Komponen iki jas o sisäl ää jo unsaas i oimi aa koodia, jonka
e ak o oin i lii yy olennaisena osana yylioppaan käy ööno oon, kun o eu e aan elä ää yy-
liopas a. So elluksissa käy e ä ien komponen ien ulisi oida ongelmi a hyödyn ää yyliki -
jas oon luo uja komponen eja.
Ensimmäinen aja us on luoda yyliopas komponen iki jas on Playg ound-p ojek in sisälle.
Tyyliki jas on pohja luo aisiin S o ybook-ohjelmis olla (S o ybook 2024), joka on a oimen
lähdekoodin käy ölii ymä yökalu. S o ybook:illa oidaan luoda, a kas ella ja es a a kom-
27
ponen eja e is yksissä muus a ohjelmis os a. S o ybook:in keskeisin hyö y syn yy au omaa i-
ses i muodos u as a komponen ien ka alogimaises a esi ykses ä käy ölii ymässä, jossa kom-
ponen ien e i a iaa ioi a on helppo sela a. Ka alogi sisäl ää myös komponen ikoh ais a doku-
men aa io a, joka syn yy ai a a komponen ien luonnin yh eydessä.
Kokeil aessa ällais a o eu us a syn yy aja us sii ä, oisiko yyliopas ko a a koko Playg ound-
p ojek in, joka ällä he kellä oimii komponen iki jas on ”näy eikkunana”. Nykyisessä
Playg ound:issa ei esi e ä yksi äisiä komponen eja aan almii a, monimu kaisia kokonai-
suuksia, jois a so elluksen a sinaise si u muodos u a . S o ybook:in akenne oi aisiin mää-
i ellä niin, e ä sen pienimmä komponen i (a omi ) muodos aisi a suu empia kokonaisuuk-
sia (molekyyli , o ganismi ) ja edelleen malleja. Nämä moduuli edus aisi a yylioppaan sisäl-
öä ja olisi a komponen iki jas on käy e ä issä. Kun S o ybookin malleihin lisä äisiin da aa,
syn yisi ä näkymä , jo ka esi äisi ä käy ännössä saman asian, kuin Playg ound ällä he kellä.
Näin e illis ä Playg ound:ia ei a i aisi, aan S o ybook oimisi sekä yylioppaan, e ä almii-
den si ujen näy eikkunan oolissa.
Vaih oeh ona keskus ellaan myös yylioppaan o eu ukses a ilman e illis ä yökalua. Myös äl-
löin komponen iki jas on nykyise komponen i pilko aisiin pienempiin, uudelleenkäy e ä-
iin osiin, jois a suu empia kokonaisuuksia koo aisiin. Ongelmaksi muodos uisi yyliki jas on
komponen ien esi ely ja dokumen oin i, koska a sinainen ka alogi olisi koo a a komponen-
eis a e ikseen ja eh ä ä joko manuaalises i ai jonkinlais a koodigene aa o ia käy äen. Ra-
kenne olisi kui enkin selkeä, komponen i olisi a helpos i löyde ä issä ilman e illisiä kansioi-
a ai a e a e illiselle selainikkunalle. Tyyliopas olisi näin Playg ound:in sisällä, paikassa,
johon kehi äjä o a jo almiiksi o unee . Lisäksi Playg ound:issa jo almiina ole a au en-
ikoin i mahdollis aisi da an hakemisen a i aessa. Molemmilla a oilla yylikomponen ien
hakeminen ki jas on monimu kaisimpien komponen ien käy öön onnis uu.
Keskus elujen ja useiden demojen pohjal a päädy iin lopul a a kaisuun, jossa yyliopas pe-
us e aan ilman e illis ä yökalua komponen iki jas on juu ikansioon, ja sen isuaalinen e i-
ys osaksi nykyis ä Playg ound-käy ölii ymää. Tyylikomponen i luodaan p ojek in juu een,
componen s > UI-kansioon. Lisäksi kohdeo ganisaa ion kanssa so i iin, e ä yylioppaan en-
simmäinen o eu us olisi suomenkielinen, huolima a sii ä, e ä koodi on dokumen oi u englan-
niksi. O ganisaa ion nykyisen aken een ja käy äjäys ä ällisyyden uoksi ohjee on hy ä olla
kehi äjien äidinkielellä.
28
4.2.2 Tyyleihin lii y ä aa imukse
Tyylioppaan Tyyli -osiossa käsi ellään ypog a ia, ikoni , älis ys ja ä i . Ku iossa 8 on
esi e y yylioppaan yyleihin lii y ä aa imukse .
Ku io 8. Vaa imusmää i ely: yylioppaan yyleihin lii y ä aa imukse .
Typog a ia sisäl ää käy e ä ä on i , sekä ohjee leipä eks in ja o sikoiden johdonmukaiseen
käy öön. Ikonien osal a aa imuksia mää i ellään ainoas aan pe usikoneille, koska ku i usi-
29

konei a ei o eu uksen ässä aiheessa a i a. Välis yksen osal a mää i ellään ilankäy öön ja
elemen ien sijoi eluun lii y ä seika ja kuinka mää i el yjä a oja käy e ään. Vä ien käy ölle
mää i ellään e ilaisia a pei a, anne aan ehdo us ä ipale ien käy ös ä ja esi ellään so elluk-
sessa a i a a ä ipale i . Kunkin yylielemen in osal a o e aan myös kan aa eema iedos on
ää älöin iin asiakas o eu uksia a en.
4.2.3 Tyylioppaaseen sisälly e ä ä komponen i ja niiden aa imukse
Keskus eluissa ode aan, e ei yylioppaassa ole jä ke ää ois aa kaikkia Chak a UI:n kompo-
nen eja, aan ulee keski yä niihin, joi a halu aan muo oilla eni en. Val aosa Chak a UI:n kom-
ponen eis a on käy össä mil ei sellaisenaan ja olisi ässä aiheessa hyödy ön ä kopioida jokais-
a yylioppaaseen. Toki pidemmälle mie i ynä ja iippu uuden mahdollisen pu kamisen uoksi
jokaisen a i a an komponen in ulisi olla osana yyliopas a. Tässä aiheessa pää e ään kes-
ki yä yylin kannal a olennaisiin komponen eihin.
Ku iossa 9 on esi e y yylioppaan alus a a aa imukse komponen ien osal a. Joukkoon on
ali u ain ne komponen i , joilla a ellaan ole an eni en me ki ys ä yh enäisen yylin luomi-
sessa. Esime kkikomponen iksi ali aan yksiseli eises i painikekomponen i Bu on, jonka
me ki ys yh iön ilmeen kannal a on olennaisin. To eu us aiheessa oidaan aa imuksia muo-
ka a, jos huoma aan jonkin olennaisen komponen in puu u an ai jonkin ole an lisäa ol aan
a pee on.
Painikkeen ja ypog a ian yh eydessä maini ujen o sikon (Heading) ja leipä eks in (Tex )
lisäksi mukaan ali aan aa imusmää i ely aiheessa he ä e (Ale ), alikko (Menu), dialogi
(Menu), ponnahdusikkuna (Popo e ) ja lisä ie okomponen i Tool ip. Lomakkeen (Fo m)
yh eydessä mää i ellään e ilaise syö eken ä . Lisäksi aa imuksiin ki ja aan ie ys i myös au-
lukkokomponen i (Table).
G aa is en, o ganisaa iospesi ien komponen ien o eu us on olennainen osa yylioppaan
suunni elu- ja o eu us yö ä. Komponen ien monikäy öisyys e ilaisissa yh eyksissä halu aan
a mis aa u kimalla a kkaan niiden nykyis ä käy ö a koi us a, ajapin oja ja uo o aiku us a
ois en komponen ien kanssa. Täl ä osin suunni eluun a a aan enemmän aikaa.
30
Ku io 9. Vaa imusmää i ely: yylioppaan komponen eihin lii y ä aa imukse .
4.2.4 Malleihin lii y ä aa imukse
Ku iossa 10 on esi e y yylioppaan si umalleihin lii y ä aa imukse . Mää i ellään si ulle
aami ja se, mi en sisäl ö muodos uu. Tyylioppaassa esi ellään esime kinomaises i e ilaisia
31
si umalleja, joiden esponsii is a esi ys apaa oi kokeilla pienen ämällä uu ukokoa.
Ku io 10. Vaa imusmää i ely: yylioppaan malleihin lii y ä aa imukse .
4.2.5 Tyylin al ojan aa imukse
Tyylin al ojalle ase e u aa imukse on esi e y ku iossa 11. Vaa imukse ka a a yylin al-
ojan sijainnin, oiminnan ja o eu uksen lisäksi aa imuksia mm. es auksen ajoi ukseen, i -
hema ginaaliin ja koodika a uu een lii yen. Vaa imusmää i elyn yh eydessä ase e aan yylin-
al ojalle myös hy äksymisk i ee i .
Ku io 11. Vaa imusmää i ely: yylin al ojan aa imukse .
32
4.3 Suunni elusykli: yylioppaan o eu us
Vaa imusmää i elyyn pe us uen yyliopas o eu e aan ilman e illis ä yökalua osaksi
Playg ound-käy ölii ymää. To eu us aloi e aan si u alikon muu oksilla. Käy ölii ymän si u-
alikkoon lisä ään älio siko UI-Komponen i ,UI-Tyyli ja UI-Malli , jo ka sisäl-
ä ä kaikki yylioppaan osa . Playg ound:in si u löy y ä edelleen Sie a-componen s-
alikos a.
4.3.1 Komponen i
Jo a komponen ien unnis us alikos a olisi kehi äjille helppoa, niiden nime jä e ään englan-
nin kielelle. Tyylioppaan si u halu aan pi ää yksinke aisena ja keskenään samanlaisina. Si un
o sakkeen alla on lyhy ku aus komponen in a koi ukses a. Kohdeo ganisaa ion oi e on, e ei
liian pi kiä dokumen aa ioi a lisä äisi, koska esime ki puhu a pa emmin puoles aan. Kehi ä-
jä halua a löy ää hakemansa nopeas i ja isuaalinen e sio edesau aa ä ä pa emmin. Kom-
ponen ien si ulla on kolme älileh eä: Esime ki , joka esi elee kaiken a peellisen kom-
ponen iin lii y än eks ein ja isuaalisessa muodossa, P opsi , jossa on aulukkomuodossa
esi e ynä kaikki komponen illa ole a ominaisuude sekä Pa ame i , jossa esi ellään kom-
ponen in o ganisaa iospesi i pa ame i . Kunkin esime kin jälkeen käy äjän on mahdollisuus
a a a lähdekoodi ja kopioida se leikepöydälle.
Bu on. Esime kkikomponen iksi ali un Bu on-komponen in luominen aloi aa yyli-
oppaan sisällön muodos uksen. Bu on:is a esi ellään a ian i , la aus ila ja es e y ila.
Bu on:in osal a aja us o ganisaa iospesi is ä komponen is a ei oimi. On helpompi so el aa
Chak a:n Bu on-komponen ia sellaisenaan ja muodos aa siihen e ilaisia a ian eja käy -
öä a en. Tällainen lähes ymis apa on kohdeo ganisaa ion oi e, aikka se ikkoo yh enäisen
linjan o eu us a an suh een. Alun pe in aja uksena oli mahdollisuus a i aessa pu kaa ah a
Chak a- iippu uus ja ämä apa ei ue uo a pe iaa e a. Chak a:n a joama a ian imene ely on
kiel ämä ä oimi a ja ällä oidaan äl ää jokaiselle e ilaiselle painikkeille oman komponen in
luominen. Va ian ien muo oilu o eu e aan ohjelmis on eema iedos ossa. Kullakin a ian illa
on nimi, joka anne aan komponen in ku sun yh eydessä. Teema iedos o huoleh ii, e ä a ian -
i on halu unlainen. Va ian eja o a p ima y,seconda y,ou line,ghos ja link.
La aus- ja es e y ila näy e ään kaikille a ian eille. Teema iedos o on muoka a issa, jolloin
myös painikkeille saadaan halu aessa asiakkaan oi eiden mukainen ulkoasu.
Inpu ja Fo m. E äs kohdeo ganisaa iolle pään ai aa aiheu anu seikka on ollu lomak-
33
_ac i e={{ colo : ’whi e’, bg: ’b and.300’ }}
_ ocus={{
boxShadow: ’none’,
colo : ’whi e’,
bg: ’b and.300’,
}}
onClick={onClickRe u n}
>
Takaisin uo e alin aan
</Bu on>
...
Koodilohko 3. Bu on-esiin ymä.
Painikkeen le eys on yleises i anne u ominaisuus, yleensä hae aan äy ä le ey ä. Kanna aa
poh ia, olisiko hyö yä a ian is a, jolle olisi ase e u äysi le eys jo almiiksi. Ole uksena pai-
nike o aa eks insä aa iman le eyden. Jos halu aan painikkeen äy ä än koko käy össä ole a
ila, le eys on anne a a e ikseen. Painikkeen a ian i on ki ja u iedos oon akamon-chak a-
base- heme. s ja nii ä oidaan a peen aa iessa muoka a ai luoda lisää.
Fo m. Lomakkei a esiin yy ki jas on 19 komponen issa, jois a kahdella on edelleen iip-
pu uuksia muualla. Fo mInpu -komponen ia käy ää 2 komponen ia ja Fo mRadio-
komponen ia 5 muu a ki jas on komponen ia. Tyylioppaan lomakegene aa o in sopi uus äy-
yy a kis aa komponen i ke allaan. Ta oi e ila on, e ä kaikki so elluksen lomakkee oi ai-
siin luoda yh eis ä lomakegene aa o ia käy äen eikä e illisiä monikäy öiseksi a koi e uja lo-
makkeen osia a i aisi. Chak a UI:n Fo m:ia käy ä ä komponen i on esi e y aulukossa
3.
40

Komponen in sijain ipolku Komponen in nimi
playg ound/s c/componen s/ A e ageP ice
s c/componen s/ BasicIn o ma ion
s c/componen s/.../ Au oma icSignUpCheckbox
s c/componen s/.../ Con ac In o ma ion
s c/componen s/.../ Te msO Sale
s c/componen s/.../ Consump ionInpu s
s c/componen s/.../ Con ac Te mina ionFo m
s c/componen s/.../ Da ePicke Cus omInpu
s c/componen s/.../ Yea lySa ings
s c/componen s/.../ E mFo mInpu
s c/componen s/.../ E mManualGs nSelec Modal
s c/componen s/.../ E mMe e ingPoin Fo mSec ionConsump ion
s c/componen s/.../ E mO e Summa yCa dSendToEmailModal
s c/componen s/.../ Fo mInpu
s c/componen s/.../ Fo mRadio
playg ound/s c/componen s/ Login
s c/componen s/.../ MessageFo m
s c/componen s/.../ NewCon ac Modal
s c/componen s/ P oduc Compa ison
Taulukko 3. Chak a:n Fo m-komponen ia käy ä ä komponen i .
Esime kkinä muoka aan NewCon ac Modal-komponen in Fo m:ia käy ä ää osuu a
alla ole an koodilohkon 4 mukaan (lähdekoodin i imää än uoksi lohkossa näy e ään ain
muu e u osuus). Komponen in käy ämä skeema iedos o löy yy UI/schemas-kansios a nimellä
NewCon ac Schema. s. Tyylikomponen iin a i a a lisäpa ame i on esi e y jäljempänä
aulukossa 4.
...
<AkamonFo m
bu onTex ={ (’bu on:submi ’)}
columns={2}
onFo mSubmi ={() => {
console.log(’add handleSubmi -me hod he e’);
}}
41
schemada a={{
alida ionSchema,
ieldMe ada a,
}}
/>
...
Koodilohko 4. Fo m-esiin ymän ko aa a koodi.
Pa ame i Seli ys
schemada a:
alida ionSchema:
T; ieldMe ada a:
Reco d<s ing, any>;
Skeeman uon i oli aiemmin akenne u AkamonFo m:in si-
sälle. Ny se hae aan komponen ia ku su aessa ja äli e ään
pa ame ina lomakegene aa o ille.
Taulukko 4. AkamonFo m-komponen iin a i a a lisäpa ame i .
Muu os en yh eydessä e ilais en skeemojen käy ö on mahdollis e u AkamonFo m-
komponen in genee isellä yypillä. Näin TypeSc ip osaa dynaamises i pää ellä a i a a yy-
pi skeeman pe us eella. Myös ende Fo mCon ol-komponen in pa ame eihin ja nii-
den yyppeihin on eh y muu oksia, jo a e ilais en skeemojen käy ö on mahdollis a. Lisäksi
Inpu - yyppi swi ch on lisä y ende Fo mCon ol-komponen iin.
Pohdi a aksi jää, a i aanko olemassa ole ien lisäksi mui a inpu - yyppejä. Ta peellisia
oisi a olla ainakin lii een la aaminen ( ile) ja liukusäädin ( ange slide ). Ta -
i aessa lisä ään e ilaisia yyppejä ende Fo mCon ol-komponen in case-lis aan.
onSubmi - apah uman käynnis ää AkamonFo m:illa ole a painike. Jos lomake on sisäl-
ly e y dialogiin, onko a koi us, e ä dialogi sulkeu uu lomakkeen lähe yksen yh eydessä?
Esime kkikomponen issa lomakkeen lähe ys on lii e y modaalin oimin opainikkeisiin. Olisi-
ko lomake monikäy öisempi, jos se ei sisäl äisi lähe yspainike a? Lisäksi AkamonFo m:illa
ole an pe uu uspainikkeen eks i on ko akooda u. Sen oisi a i aessa uoda myös pa ame -
ina samaan apaan kuin lähe yspainikkeen eks in. Tyylioppaan oisen e aluoinnin jälkeen
lomakekomponen ia on muu e u edelleen niin, e ä skeema iedos o on en is ä genee isempi ja
sisäl ää iedon a i a is a sa akkeis a.
Menu. Ki jas on komponen eis a 3 käy ää Chak a UI:n Menu-komponen ia. Poh ia kanna ai-
42
si lisäksi, oisiko joi akin Selec -komponen eja muun aa AkamonMenu-komponen eiksi,
jolloin yyli nouda aisi pa emmin yh enäis ä ilme ä. Selec -komponen i on käy össä
ki jas on 12 komponen issa ja sen muo oilu on huoma a as i ajoi e umpaa, kuin Menu-
komponen in. Chak a UI:n Menu:a käy ä ä komponen i on esi e y aulukossa 5 .
Komponen in sijain ipolku Komponen in nimi
s c/componen s/.../ AsyncMe e ingPoin Lis
s c/componen s/.../ Ene gyT ansi ionMe e ingPoin Lis
playg ound/s c/componen s/.../ LanguageSelec o
Taulukko 5. Chak a:n Menu-komponen ia käy ä ä komponen i .
Esime kkinä muoka aan LanguageSelec o -komponen ia alla ole ien koodilohkojen 5
ja 6 mukaan. Tyylikomponen iin a i aan lisäpa ame eja, jo ka on esi e y jäljempänä aulu-
kossa 6. Samalla lisä ään yylimuo oilu ex T ans o m: capi alize painikkeen sekä
alin a aih oeh ojen eks iin, jo a eks i alka a isolla ki jaimella. Esime kkikomponen issa
on lisäksi yylimuo oiluja, jo ka ässä muu oksessa on jä e y o eu ama a. Näi ä o a ikonien
ä i ys ja painikkeen kulmien pyö is ykse .
...
<Menu colo Scheme="pu ple">
<MenuBu on
w=" ull"
as={Bu on}
a ian ="ou line"
bo de Radius="sm"
le Icon={
<MdOu lineLanguage colo ={ligh || ’whi e’} />
}
colo ={colo || ’g ay.700’}
igh Icon={
<Che onDownIcon colo ={ligh || ’whi e’} />
}
>
{languages. ind((lng) =>
43
lng. alue === selec edLocale)?.label}
</MenuBu on>
<MenuLis >
{languages.so ().map((lng) => (
<MenuI em
isDisabled={lng. alue === selec edLocale}
key={lng. alue}
onClick={() => handleLocaleChange(lng. alue)}
s yle={{ ex T ans o m: ’capi alize’ }}
>
{lng.label}
</MenuI em>
))}
</MenuLis >
</Menu>
...
Koodilohko 5. Ko a a a Menu-esiin ymä.
...
<AkamonMenu
menuOp ions={op ionsLis }
bu onWid h={’ ull’}
bu onS a e={
languages. ind((lng)
=> lng. alue === selec edLocale)?.label
}
le Icon={<MdOu lineLanguage />}
a ian ={’ou line’}
/>
...
Koodilohko 6. Menu-esiin ymän ko aa a koodi.
44
Pa ame i Seli ys
bu onWid h?: s ing Valinnainen painikkeen le eys, jos halu aan esime kiksi koko
aamin le yinen painike. Ole uksena painikkeen le eys mu-
kau uu eks in le eyden mukaan.
bu onS a e?: s ing Valinnainen painikkeessa aloi ushe kellä näky ä eks i, ole uk-
sena ei mi ään.
le Icon?: Reac Elemen Valinnainen ikoni menupainikkeen asempaan lai aan. Oikeas-
sa laidassa on au omaa ises i alas e o alikon nuoli, asem-
massa laidassa ei mi ään.
a ian ?: s ing Painikkeen alinnainen a ian i yylimuo oilua a en. Ole-
uksena ei a ian ia, jolloin käy e ään p ima y-muo oilua.
Taulukko 6. AkamonMenu-komponen iin a i a a lisäpa ame i .
Modal. Dialogeja käy e ään ki jas on 10 komponen issa. Jokainen esiin ymä ulee py kiä ko -
aamaan AkamonModal-komponen illa, joka sisällön osal a aipuu moneen e i a koi ukseen.
Komponen ia oidaan muoka a, jos huoma aan, e ä lisäominaisuuksille on a e a. Chak a
UI:n Modal:ia käy ä ä alla ole assa aulukossa 7 esi e y komponen i .
Komponen in sijain ipolku Komponen in nimi
s c/componen s/ AgeRes ic ion
s c/componen s/ CookieModal
s c/componen s/.../ E mNa iga ionBlocke
s c/componen s/.../ E mManualGs nSelec Modal
s c/componen s/.../ E mO e Summa yCa dSendToEmailModal
s c/componen s/.../ MessageModal
s c/componen s/.../ NewCon ac Modal
s c/componen s/.../ Wea he S a ionSelec
s c/componen s/.../ Repo Modal
s c/componen s/ Selec Cus ome
Taulukko 7. Chak a:n Modal-komponen ia käy ä ä komponen i .
Esime kkinä muoka aan AgeRes ic ion-komponen ia koodilohkojen 7 ja 8 mukaan. Esi-
me kki AkamonModal-komponen in a i semas a oimin opainikejoukos a on esi e y alinna
lohkossa 9. Tyylikomponen iin a i aan lisäpa ame eja, jo ka on esi e y aulukossa 8.
45

...
<Modal
isOpen={isOpen} onClose={onClose}
closeOnO e layClick={ alse}>
<ModalO e lay />
<ModalCon en >
<ModalHeade >
{ (’heade ’, { ns: ’ageRes ic ion’ })}
</ModalHeade >
<ModalBody>
{ (’in o’, { ns: ’ageRes ic ion’ })}
</ModalBody>
<ModalFoo e >
<Bu on {...bu onP ops}
w=" ull"
onClick={() => onClickClose()}>
{ (’con i m’, { ns: ’bu on’ })}
</Bu on>
</ModalFoo e >
</ModalCon en >
</Modal>
...
Koodilohko 7. Ko a a a Modal-esiin ymä.
...
<AkamonModal
isOpen={isOpen}
onClose={onClose}
closeOnO e layClick={ alse}
i le={ (’heade ’, { ns: ’ageRes ic ion’ })}
con en ={ (’in o’, { ns: ’ageRes ic ion’ })}
ac ionBu ons={ac ionBu ons}
/>
...
Koodilohko 8. Modal-esiin ymän ko aa a koodi.
46
...
cons ac ionBu ons = [
{
a ian : ’p ima y’,
ex : (’con i m’, { ns: ’bu on’ }),
onAc ionBu onClick: () => {
onClickClose();
},
shouldClose: ue,
wid h: ’ ull’,
},
];
...
Koodilohko 9. Komponen in pa ame ina saama oimin opainikejoukko.
Pa ame i Seli ys
igge Bu on: Reac Node Valinnainen dialogin a aa a elemen i. Pa ame ina anne -
aessa oi olla joko painike, ikoni ai jokin muu elemen i.
Modal:in a au uminen oi pe us ua myös eh olauseeseen, jol-
loin e illis ä igge iä ei a i a.
onClose: () => oid Dialogin sulke a oimin o anne aan ku sun yh eydessä, koska
oi olla a peen suo i aa e ilaisia oimin oja dialogin sulkeu-
uessa.
Taulukko 8. AkamonModal-komponen iin a i a a lisäpa ame i .
Toimin opainikkeiden le eys oidaan an aa alinnaisena ie ona painikkeiden objek ijou-
kossa, ominaisuus on lisä y Ac ionBu on- yyppiin. Samoin Dialogin a aa a painike
on pois e u AkamonModal-komponen in sisäl ä. On myös lisä y mahdollisuus an aa
closeOnO e layClick-ominaisuus komponen iku sun yh eydessä. Chak a:n Modal-
komponen in ole us on ue. Samoin dialogin koko oidaan ny äli ää komponen iku sussa.
Chak a:n ole us on md. Voisi olla hy ä poh ia, mille muille dialogin ominaisuuksille saa aisi
olla a e a. AkamonModal-komponen ia oidaan muoka a käy ö a koi us en mukaan,
kui enkin niin, e ä o eu us pysyy monikäy öisenä.
47
Popo e . Ponnahdusikkunoi a käy e ään neljässä ki jas on komponen issa. Yksi näis ä
on monikäy öiseksi komponen iksi a koi e u Popo e , jo a edelleen ku suu 7 muu a ki -
jas on komponen ia. Chak a UI:n Popo e :ia käy ä ä komponen i on esi e y aulukossa 9.
Komponen in sijain ipolku Komponen in nimi
s c/componen s/.../ Popo e Bu on
s c/componen s/.../ In oiceS a usPopo e
s c/componen s/ Ma ke ingApp o al
s c/componen s/ Popo e
Taulukko 9. Chak a:n Popo e -komponen ia käy ä ä komponen i .
Esime kkinä muoka aan ki jas on Popo e -komponen i käy ämään AkamonPopo e -
komponen ia alla ole ien koodilohkojen 10 ja 11 mukaan, jolloin siihen sidoksissa ole ien
komponen ien ulisi ko jau ua ke alla. Tyylikomponen iin a i a a lisäpa ame i on esi-
e y jäljempänä aulukossa 10.
...
<Popo e igge ="ho e " {...popo e P ops}>
<Popo e T igge >
{child en ||
<In oOu lineIcon
da a- es id="de aul -popo e -icon" />}
</Popo e T igge >
<Popo e Con en >
<Popo e Heade >
{heade }
</Popo e Heade >
<Popo e CloseBu on />
<Popo e Body ex Align="le ">
<S ack>
{ ool ips?.map(( ool ip) => (
<Tex key={ ool ip}>{ ool ip}</Tex >
))}
</S ack>
48
</Popo e Body>
</Popo e Con en >
</Popo e >
...
Koodilohko 10. Ko a a a Popo e -esiin ymä.
...
<AkamonPopo e
igge ="ho e "
igge Bu on={
<In oOu lineIcon
ma gin={0}
boxSize="30px" />
}
i le={heade }
con en ={
<S ack>
{ ool ips?.map(( ool ip) => (
<Tex key={ ool ip}>{ ool ip}</Tex >
))}
</S ack>
}
{...popo e P ops}
/>
...
Koodilohko 11. Popo e -esiin ymän ko aa a koodi.
Pa ame i Seli ys
igge Bu on: Reac Node Ponnahdusikkunan a aa a painike. Pa ame ina anne aessa
oi olla joko painike, ikoni ai jokin muu elemen i.
igge : s ing Toimin o, joka a aa ponnahdusikkunan (click/ho e ). Tä-
mä pa ame i sisäl yy Chak a:n Popo e P ops:iin, jo en si-
ä ei a i se e ikseen esi ellä. Sil i, jos halu aan yliki joi aa
ole us igge i, se on anne a a komponen ille ku sun yh eydes-
sä.
Taulukko 10. AkamonPopo e -komponen iin a i a a lisäpa ame i .
49
Mone komponen eis a a i se a ympä illeen e ilaisia aameja, jo a komponen in sisäis en
elemen ien ase elu oimii halu ulla a alla. Vaikka komponen in ulommainen aami ase e -
aisiin si umalliin ilman e illis ä älis ys ä, aus an ollessa ä i ön, i se sisäl ö ei äy ä koko
ilaa. Komponen i näy ä ä ole an ase el u e ilaisin älis yksin ja yh enäinen ilme hajoaa.
Alla ole issa ku ioissa 12 ja 13 on esime kki samas a komponen is a, jois a ylemmän aami
sisäl ää e ikaalis a ma ginaalia ja alemman ei. O sikon ja si usisällön älis ys on ämän
uoksi e ilainen ja joh aisi kahden si un epäyh enäiseen ulkoasuun.
Ku io 12. Yhden sisällön si umalli komponen in sisäisen ma ginaalin kanssa.
Ku io 13. Yhden sisällön si umalli ilman komponen in sisäis ä ma ginaalia.
Myös innakkain ase el una o sikon ja sisällön äliseen e oon aiku aa komponen iin a-
kenne u ma ginaali, mu a innakkaise sisällö ase u a samalla lailla keskenään, koska
56

suu emman elemen in ko keus mää ää sisäl ö i in ko keuden ja sisäl ö on keski e y. Ku iois-
sa 14, 15 ja 16 asen komponen i ei sisällä e ikaalis a ma ginaalia ja oikea sisäl ää.
Ku io 14. Kahden sisällön si umalli oisen komponen in sisäisen ma ginaalin kanssa.
Ku io 15. Kahden sisällön si umalli ma ginaali on komponen i ko os e una.
57
Ku io 16. Kahden sisällön si umalli ma ginaalia sisäl ä ä komponen i ko os e una.
Si umallin käy ööno o ja sen oiminnan hyödyn äminen aa ii si ujen läpikäyn iä yksi ke al-
laan. Komponen ien uloimmissa kää eissä ole a ma ginaali ulee mahdollisuuksien mukaan
pois aa ja sisempien kää eiden älis ysominaisuuksien me ki ys a kas ella e ikseen. Tällä he -
kellä sisäl ö i in elemen i on keski e y e ikaalises i, jolloin i i näy ää hy äl ä, kun sisällö
o a keskenään samankal aise . Kahden hy in e ilaisen ja e ikokoisen elemen in sijoi aminen
samalle i ille oi aa ia keski yksen pois amis a. Hyödyllis ä olisi myös u kia, missä kaik-
kialla älis ys-ominaisuu a (engl. spacing ) käy e ään ja ko a a esiin ymä yylioppaassa esi-
ellyillä älis ysa oilla.
4.5 Suunni elusykli: yylin al ojan o eu us
Ma kkinoilla on unsaas i almii a isuaaliseen eg essio es aukseen a koi e uja ohjelmis oja.
Tyylioppaan suunni elun ja o eu uksen iedessä suunni el ua kauemmin ode aan, e ei ämän
u kimuksen pui eissa ole mahdollis a o eu aa ekoälyyn, ie okonenäköön ja koneoppimiseen
pe us u aa isuaalis a es aus a. Sen sijaan y i e ään löy ää pa as snapsho - ekniikalla oimi-
a yökalu, joka suo i aa a i a a isuaalise eg essio es i ja aipuu ja kossa mahdollises i
myös oiminnalliseen es aukseen.
58
4.5.1 Tes aus yökalujen esi ely
Esi ellään kolme snapsho - ekniikkaan ja pikseli e ailuun pe us u aa yökalua aih oeh oina
yylin al ojaksi. Sen lisäksi ke o aan lyhyes i myös e ääs ä eköälyä käy ä äs ä yökalus a,
koska on hyödyllis ä hieman poh ia myös ekoälyyn pe us u an mallin oimin alogiikkaa, jo a
ymmä ys saa a illa ole is a aih oehdois a lisään yy. Kohdeo ganisaa io oi halu essaan ha -
ki a sellaiseen malliin sii ymis ä ule aisuudessa.
Vi es image snapsho s. Komponen iki jas on oiminnallis a es aus a hoide aan ällä he kellä
Vi es -ohjelmis olla, mikä on e i yises i Vi e-p ojek ien käy öön suunni el u es ausympä is-
ö. Tämän uoksi Vi es :in aipu uus isuaaliseen es aukseen halu aan u kia ensimmäisenä.
Vi es :issä on olemassa snapsho -ominaisuus, jossa ohjelmis o o aa ilanneku an anne us a a -
os a ja e aa si ä si en es in innalle allenne uun e e enssi iedos oon. Vaikka ekniikkaa
käy e ään myös koodi i ien ja iedos ojen e ailuun, ämän u kimuksen pui eissa keski y-
ään nimenomaan ku ien e ailuun keskenään. Ku ien snapsho - es aukseen a i aan a uksi
Jes -laajennus, jes -image-snapsho s, joka luo Puppe ee -ki jas oa käy äen ku an es a a as a
käy ölii ymäs ä ai yksi äises ä komponen is a ja e aa si ä pikseli asolla aiemmalla es ia-
jolla muodos e uun e e enssiku aan. Tes i epäonnis uu, jos kaksi ilanneku aa ei ä äsmää:
joko muu os on odo ama on ai e e enssiku a on päi i e ä ä uu een e sioon. (You 2024b)
Käy ännössä oimin a on seu aa anlainen:
•Tallenne aan e e enssiku a. Ensimmäisellä es iajolla Puppe ee na igoi käy ölii y-
mässä halu ulle si ulle ja o aa ku an es in koh eena ole as a näkymäs ä ai yksi äises ä
komponen is a. Ku a allenne aan e e enssiku aksi seu aa ille es iajoille.
•O e aan ku akaappaus. Seu aa illa es iajoilla Puppe ee allen aa uuden ku an es i-
ku ana, jo a jes -image-snapsho si en e aa aiemmin allenne uun e e enssiku aan.
•Suo i e aan pikseli e ailu. Uu a es iku aa e a aan e e enssiku aan pikseli pikse-
lil ä. Työkalu laskee pikselie o ja e aa ulos a anne uun ole anssiin. Tole anssi oi-
daan mää i ellä es i ke allaan ja näin ase aa iukemma ai löysemmä aja es auksen
koh een mukaan.
•Esi e ään ulokse . Jos ole anssi aja yli y ä , yökalu allen aa poikkeamaku an, jossa
muu okse näky ä ko os e una. Ku a on kolmen ku an sa ja, jossa esi e ään asemmal-
la odo e u ku a ( e e enssiku a), oikealla odellinen ku a ja keskellä i hee .
Tämän jälkeen kehi äjän äy yy a kas ella uloksia ja a ioida, onko kyse aha omas a poik-
59
keamas a ai halu aanko e e enssiku aa muu aa. Jos muu os on a koi uksellinen, e e ens-
siku a päi i e ään as aamaan uu a ilanne a komennolla -u. Koska Vi es on jo käy össä
ki jas on oiminnallisessa es auksessa, on luonnollis a, e ä se ali aan yhdeksi aih oehdoksi
myös isuaaliseen es aukseen.
Playw igh isual compa isons. Toinen Vi e-p ojek ien kanssa hy in yh eensopi a es ausym-
pä is ö on Mic oso in kehi ämä Playw igh Tes , joka on ehokas usei a selaimia uke a oi-
minnalliseen sekä end- o-end - es aukseen so el u a yökalu. Kohdeo ganisaa io on u kimuk-
sen ede essä esi äny kiinnos us a ä ä ohjelmis oa koh aan, jo en sen aipumis a isuaali-
seen es aukseen halu aan myös u kia. Playw igh Tes a joaa samanlaise oiminnallisuude
snapsho - es aukseen kuin Vi es , joskin e ilaisin ki jas oin. Playw igh o aa i se ku akaap-
paukse ja käy ää ku ien e ailussa Pixelma ch-ki jas oa.
Käy ännössä oimin a on seu aa anlainen:
•Tallenne aan e e enssiku a . Ensimmäisellä ajolla Playw igh luo e e enssiku a o -
aen usei a ku ia ja kahden pe äkkäisen ku an as a essa oisiaan, jälkimmäinen allen-
ne aan e e enssiku aksi.
•O e aan es iku a . Seu aa illa es iajoilla o e aan uusia ku akaappauksia e a a aksi
e e enssiku iin. Koska ku akaappaukse aih ele a e ilaisissa selaimissa ja alus oissa,
Playw igh -dokumen aa iossa suosi ellaan o amaan e illise ku a e ilaisille ympä is öil-
le.
•Suo i e aan e ailu. Pikseli e ailun suo i aa Pixelma ch-ki jas o, jolle oidaan mää-
i ää ole anssi aja . Esime kiksi e ilais en ympä is öjen es aamisessa on hyödyllis ä
sallia pieniä e oja ilman, e ä es i epäonnis uu.
•Rapo oidaan ulokse . Tes in epäonnis uessa i hee apo oidaan kolmena ku ana,
jois a ensimmäinen on e e enssiku a, oinen es iajon yh eydessä o e u ku a ja kol-
mannessa ku assa esi e ään isuaalise poikkeama ko os e una. Ku a on allenne u
e illisinä .png- iedos oina es - esul s-kansioon.
Näiden aiheiden jälkeen es aajan on a ioi a a es aukse ulokse ja pää e ä ä ko ja aan-
ko i he ai halu aanko e e enssiku aa muu aa. Uuden e e enssiku an allen aminen onnis-
uu ai a a es iajon yh eydessä anne a alla komennolla -upda e-snapsho s. (Mic oso
2024a)
Cyp ess image snapsho . Reac -so ellus en kanssa hy in oimi a ja Vi e-so elluksia uke a
60
Cyp ess a joaa laajan uen end- o-end- ja oiminalliselle es aukselle. Lisäosien myö ä myös
isuaalinen eg essio es aus on mahdollis a. Cyp ess käy ää snapsho -ku ien o amiseen li-
säosaa cyp ess-image-snapsho , jolla o e aan ku a koko es a a as a so ellukses a ai ie ys ä
elemen is ä. Ku aa e a aan aiemmin hy äksy yyn pe usku aan, ku en edellä esi e yissä yö-
kaluissa. Vaih oeh ona on olemassa myös kaupallinen yökalu, Cyp ess Visual Tes ing (Cyp ess
Cloud), joka suo i aa snapsho - e ailun pil essä ja sisälly ää isuaalisen eg essio es auksen
osaksi CI/CD-pu kea. (Cyp ess.io 2024)
Käy ännön oimin a es auksessa on ai an samanlainen, kuin edellä esi el yjen yökalujen osal-
a. Ensimmäisellä ajolla muodos e aan e e enssiku a, jo a as aan a sinais en es iajojen ku-
akaappauksia a ioidaan. Vi hee es iajossa uo a a poikkeamaku an, jossa asemmalla esi-
ellään odo e u ulos ja oikealla a sinainen es in ulos, e o ko os e uina keskimmäisessä
ku assa. Edellisis ä yökaluis a poike en Cyp essiin kuuluu käy ölii ymä yökalu, jossa es i
oidaan ajaa ja niiden uloksia a kas ella.
Cyp ess:iin, ku en muihinkin suosi uihin es ausalus oihin on saa a illa myös isuaaliseen es-
aukseen suunni el uja Pluginei a. Näis ä maini akoon esime kkinä Appli ools Eyes, jonka oi-
min aa a kas ellaan seu aa assa.
Appli ools Eyes. Appli ools on suosi u ekoälya us einen es aus a kaisu, joka in eg oi uu
helpos i useimpiin nykyaikaisiin es ausalus oihin, ku en yllä maini u Vi es , Playw igh ja
Cyp ess. Sen keskeinen komponen i on Appli ools Eyes, joka käy ää Visual AI- ekoälyä ja
ku an unnis us ekniikoi a isuaalis en e ojen ha ai semiseksi käy ölii ymän ku akaappauk-
sissa, jo a nii ä oidaan a kas ella ihmissilmän a oin. Ku akaappauksia oidaan a ioida
useilla e i alus oilla ja lai eilla yhden es iajosa jan aikana. Tekoäly osaa e o aa me ki yk-
sellise isuaalise e o pienis ä ende öin ie ois a, joihin pikseli e ailussa usein ake u aan.
Appli ools Eyes:ille oidaan mää i ää aluei a, esim. päi ämää iä ja ilmoi uksia, jo ka se oi
ohi aa. Vaih oeh oises i dynaaminen sisäl ö oidaan ohi aa ekoälyn a ulla. Pääasiassa es-
aus apah uu hy in samalla a alla kuin pe in eisessä snapsho -pikseli e ailumallissa, mu a
ulokse o a luo e a ampia ja manuaalisen yön mää ä ähäisempi.
Tes auksen aihee Appli ools Eyes:illa:
•In eg oin i. Työkalu in eg oidaan käy össä ole aan es ausympä is öön ja es i mää i-
ellään o amaan ku akaappauksia joko kokonaisis a si uis a ai yksi äisis ä komponen-
eis a.
61

•O e aan ku akaappaukse . Tes iajoilla Appli ools Eyes allen aa ku akaappaukse ja
e aa nii ä e e enssiku iin. E oa aisuude apo oidaan pil ipohjaisessa käy ölii y-
mässä poikkeamaku ina.
•Rapo oidaan ulokse . Appli ools:in apo oin i yökalu, Tes Manage a joaa käy ä-
jäys ä ällisen a an analysoida es ien uloksia. Eyes on jo almiiksi pois anu ää iä
posi ii isia häly yksiä, jo en a kas el a aa jää kehi äjälle ähemmän.
•Hy äksy ään ai hylä ään muu okse . Uusien e e enssiku ien allen aminen apah uu
helpos i Task Manage in kau a.
Tällaisen ekoälya us eisen yökalun me ki ys ko os uu siinä, e ä kehi äjille jää ähemmän
manuaalis a yö ä. Useiden e ilais en lai e- selain- ja alus ayhdis elmien sekä e ilais en eso-
luu ioiden es aaminen käy ekoälyl ä ai a a. Visual AI osaa suoda aa me ki ykse ömä e o
oikeis a i heis ä, ehdä alus a iippuma omia e ailuja, huomioida käy ölii ymän mukau u-
misen e ikokoisille näy öille ja ohi aa dynaamisen sisällön aiheu ama i hee . Tällä a alla
es auksen a kkuus pa anee, es isyklien läpimeno nopeu uu ja oidaan es a a yhä suu empia
mää iä käy ölii ymäkomponen eja samalla ajolla. (Appli ools 2024)
Ma kkinoilla on unsaas i myös mui a ekoälyyn ja koneoppimiseen pe us u ia es aus yökalu-
ja, ku en LambdaTes , Func ionize, Tes im.io ja Pe cy sekä lukuisia mui a. Ne käy ä ä eko-
älyä es ausp osessin e i aiheissa es ien ki joi amises a p osessin au oma isoin iin. Tä ä u -
kimus a a en eh y 18 kaupalliseen e kkosi us oon pe us u a ka saus kui enkin nos i Appli-
ools:in useimmin kolmen kä keen, kun analysoi iin 70 e ilais a isuaalisen es auksen yöka-
lua niis ä eh yjen pa emmuus e ailujen a ulla. Työkaluja ilmes yy ma kkinoille koko ajan ja
käy e yn ekoälyn osuus kas aa myös isuaalisen es auksen sa alla.
4.5.2 Työkalujen e ailua ja yylin al ojana käy e ä än es ausympä is ön alin a
Työkalujen e ailua a en luodaan uusi Reac Vi e-so ellus, jossa on yksinke ainen
p o iili ie oja allen a a käy ölii ymäsi u sisäl äen lomakkeen syö eken ineen ja allennus-
painikkeineen. Kaikki kolme es aus yökalua asenne aan ja kon igu oidaan a koi us a a en
ähän so ellukseen, jo a e ailu oidaan suo i aa samanlaisella sisällöllä. Kon igu oin i on
haas a in a Cyp ess:issä, Playw igh :issa asennus ja käy ööno o sujuu helpoi en. Luodaan
kullakin yökalulla kaksi es iä, oinen, joka a kis aa kokonaisen e kkosi un ja oinen,
joka u kii yksi äisen painike-komponen in. Tes ien syn aksi on hy in samanlainen kaikissa
yökaluissa. Koska Vi es käy ää Puppe ee -ki jas oa apuna, on siinä sen uoksi muu ama
62
koodi i i enemmän. Lisäksi snapsho ille on Vi es :issa anne a a a kempia pa ame eja, kuin
muiden yökalujen apauksessa. Koko si un es issä na igoidaan ensin halu ulle e kkosi ulle
ja o e aan si us a ku akaappaus. Alla ole issa koodilohkoissa 16, 17 ja 18 esi e ään kullakin
yökalulla ki joi e u es i apaukse .
i (’p o ile’, async () => {
cons b owse = awai puppe ee .launch();
cons page = awai b owse .newPage();
awai page.go o(’h p://localhos :5173/p o ile’);
cons imageBu e = awai page.sc eensho ({
ype: ’png’,
encoding: ’base64’,
ullPage: ue });
expec (Bu e . om(imageBu e , ’base64’))
. oMa chImageSnapsho ();
});
Koodilohko 16. Vi es -syn aksi, koko si un es i.
es ("p o ile isual es ", async ({ page }) => {
awai page.go o("h p://localhos :5173/p o ile");
expec (awai page.sc eensho ())
. oMa chSnapsho ("p o ile.png");
});
Koodilohko 17. Plaw igh -syn aksi, koko si un es i.
i ("should ma ch he p o ile snapsho ", () => {
cy. isi ("/p o ile");
cy.ma chImageSnapsho ("p o ile");
});
Koodilohko 18. Cyp ess-syn aksi, koko si un es i.
Tes a essa yksi äis ä komponen ia, hakeudu aan ensin halu ulle e kkosi ulle, e si ään siel ä
es a a a h ml-elemen i, jos a ku akaappaus o e aan. Elemen iä oidaan h ml- agin lisäksi
e siä myös luokan ai id:n pe us eella. Alla ole issa koodilohkoissa 19, 20 ja 21 esi e ään
syn aksi e i yökaluilla.
63
i (’p o ilebu on’, async () => {
cons b owse = awai puppe ee .launch();
cons page = awai b owse .newPage();
awai page.go o(’h p://localhos :5173/p o ile’);
cons bu onComponen = awai page.$(’bu on’);
i (bu onComponen ) {
cons image = awai bu onComponen .sc eensho ({
ype: ’png’,
encoding: ’base64’ });
expec (Bu e . om(image, ’base64’))
. oMa chImageSnapsho ();
} else {
h ow new E o ("Bu on no ound on he page.");
}
awai b owse .close();
});
Koodilohko 19. Vi es -syn aksi, komponen in es i.
es ("p o ile bu on componen ", async ({ page }) => {
awai page.go o("h p://localhos :5173/p o ile");
cons bu onComponen = awai page.loca o ("bu on");
awai expec (bu onComponen )
. oHa eSc eensho ("p o ileBu on.png");
});
Koodilohko 20. Plaw igh -syn aksi, komponen in es i.
i ("should ma ch he bu on snapsho ", () => {
cy. isi ("/p o ile");
cy.ge ("bu on")
.ma chImageSnapsho ("p o ilebu on-snapsho ");
});
Koodilohko 21. Cyp ess-syn aksi, komponen in es i.
Cyp ess De Tools -käy ölii ymä on in o ma ii inen, es ien ajo sujuu näppä äs i si ä kau -
a. Muissa yökaluissa ei sellais a ole, aan es ien ajo apah uu komen o i il ä. Ensimmäisellä
es iajolla kukin ohjelma allen aa e e enssiku an p o iilisi us a ja sillä ole as a painikkees-
64
a. Tehdään käy ölii ymään ulkoasuun aiku a ia muu oksia: kas a e aan painikkeen kokoa,
muu e aan sen eks iä ja lisä ään lomakkeen alin a uu uun eks iä. Tämän jälkeen es i aje-
aan uudelleen. Odo e us i es i epäonnis u a . Poikkeamaku a allen u a kaikkien ohjelmis-
ojen apauksessa omaan e illiseen kansioonsa, jos a ne o a helpos i löyde ä issä. Vi es ja
Cyp ess esi ä ä poikkeama kolmen ku an sa jana, kun Playw igh :issa ku a allen u a e il-
lisinä iedos oina. Kolmen ku an sa jas a poikkeama löy y ä helpommin, kun kaikkia ku ia
oi ka sella samanaikaises i.
Tes ien a kkuudessa on e oja. Vi es :in ja Playw igh :in ilmoi ama i hee oli a o-
dellis en muu os en aiheu amia, kun Cyp ess ilmoi i lisäksi i heis ä, jo ka ei ä ollee
odellisia. Kaikissa ohjelmis oissa on mahdollis a mää i ellä ole anssi, jo a es iajoissa so-
elle aan. Vi es :in poikkeamaku a p o iilisi ulle ja painikkeelle on esi e y ku ioissa 17 ja 18.
Ku io 17. Vi es , koko si un es i.
Ku io 18. Vi es , komponen in es i.
Vi es :issä asemmalle ulos uu e e enssiku a, oikealle odellinen ku a ja keskellä näky ä
ko os e una i hee näiden älillä. Tes i odo e us i ko os aa painikkeen muu uneen ko keuden,
painikkeessa ole an eks in ja alin a uu uun lisä yn eks in.
Playw igh allensi seu aa anlaise kolme e illis ä ku aa epäonnis uneiden es ien pohjal a
(ku io 19 ja 20). Vasemmalla on odellinen ku a, oikealla e e enssiku a ja keskellä näky ä
i hee . Tulos on hy in samanlainen kuin Vi es :illä.
65
ain 4 pikselin e o ko keudessa. Sallimalla ku an kokoe o , saa aisiin sel ille ä keämpää
ie oa pikselipoikkeamis a. Responsii inen ase elu oidaan kui enkin a kas aa ku ios a 26.
Ku io 26. Koko es isi un able -näkymän poikkeamaku a (T3).
T4. exis ence & appea ance o a p ima y bu on E o : Expec ed image o be he same size
as he snapsho (92x40), bu was di e en (124x64). Painikkeelle anne u äy e näkyy selkeäs i
ku iossa 27. Painikkeen koko ja eks in paikka muu uu.
Ku io 27. P imää ipainikkeen ulkoasu es in (T4) poikkeamaku a.
T7. exis ence & appea ance o a p ima y colo box E o : Expec ed image o be he
same size as he snapsho (166x130), bu was di e en (166x195). Elemen in muu unu koko
nähdään selkeäs i myös ku ios a 28. Tähän es iin oisi yhdis ää myös komponen in ä in
a kas uksen ilman ku akaappaus a, ku en es issä T12. Snapsho - es i paljas aisi muu uneen
ä in kui enkin myös, mu a e illinen ä i es i an aisi lisäin o maa io a.
72

Ku io 28. P imää i ä ilaa ikon ulkoasu es in (T7) poikkeamaku a.
T8. es page a e ho e ing he ool ip E o : Expec ed image o be he same size as he
snapsho (1200x1300), bu was di e en (1200x1312). Tes in ulos on esi e y ku iossa 29.
Animaa ioiden osal a kanna aa es iin lisä ä ajas in ai jollain muulla a alla a mis aa, e ä
animaa io on almis ku aa o e aessa. Luonnollises i si ulla ole a muu kin i hee näky ä
ku assa, a koi uksenmukaisempaa olisi a kas ella komponen ia e illään.
Ku io 29. In olaa ikon ho e - es in (T8) poikkeamaku a.
T9. modal componen a e clicking a modal bu on E o : Expec ed image o be he
same size as he snapsho (448x247), bu was di e en (446x247). Dialogille eh y sijainnin
muu os ei paljas u poikkeamaku assa (ku io 30), koska es in koh eena on pelkkä kompo-
nen i. Ku aan pii yy sen sijaan paljon ylimää äis ä. Ensimmäisen painikkeen eks in muu os
ali e a as i hukkuu kohinaan.
73
Ku io 30. Dialogi es in (T9) poikkeamaku a.
T10. es page a e clicking a popo e bu on E o : Expec ed image o be he same size
as he snapsho (1200x1300), bu was di e en (1200x1312). Ponnahdusikkuna es in lisäa o
isuaalisen es auksen kannal a on ähäinen, koska es a aan jälleen koko si ua, ku en ku ios a
31 nähdään. Toiminnallisuuden osal a oidaan kui enkin ode a, e ä ikkuna on a au unu
painikkeen painalluksen myö ä. Jos mui a i hei ä ei si ulla olisi, ulos olisi huoma a as i
käy ökelpoisempi.
Ku io 31. Ponnahdusikkuna es in (T10) poikkeamaku a.
T13. ex o he heading Asse ionE o : expec ed ’Tyylioppaan es isi u’ o be ’Tyylioppaan
es isi u’. Ilman ku akaappaus a o eu e u es i ke o a i hees ä sanallises i. Vi he ies i on
in o ma ii inen ja sen a ulla pääs ään i heeseen helpos i käsiksi.
Ko ja aan ehdy muu okse akaisin alkuase elmaan ja aje aan es i uudelleen. Ny kaikkien
es ien odo e aan onnis u an. Kui enkin kolme apah umia sisäl ä ää es iä epäonnis uu edel-
leen ( es i T8, T9 ja T10).
74
T8. es page a e ho e ing he ool ip E o : Expec ed image o ma ch o be a close ma ch
o snapsho bu was 0.4953846153846154% di e en om snapsho (7728 di e ing pixels).
Ny Vi es apo oi ajaan puolen p osen in pikselipoikkeamas a. Komponen issa ei pi äisi
enää olla i he ä, mu a ku iossa 32 kui enkin ko os uu i he komponen in ho e - ilassa.
Ku io 32. In olaa ikon ho e - es in (T8) oinen poikkeamaku a.
T9. modal componen a e clicking a modal bu on E o : Expec ed image o be he
same size as he snapsho (448x247), bu was di e en (446x246). Samoin dialogin osal a
apo oidaan edelleen poikkeamas a, jo a ei pi äisi enää olla (ku io 33).
Ku io 33. Dialogi es in (T9) oinen poikkeamaku a.
T10. es page a e clicking a popo e bu on E o : Expec ed image o ma ch o be a close
ma ch o snapsho bu was 0.008397435897435% di e en om snapsho (131 di e ing pixels)
Ponnahdusikkunan apauksessa i he on niin pieni, e ä se on uskin ha ai a issa (ku io 34).
75
Ku io 34. Ponnahdusikkuna es in (T10) oinen poikkeamaku a.
Toisen es iajon ku is a pää ellen poikkeama o a ää iä häly yksiä. Vi he apo is a nähdään
myös e ojen ole an hy in pieniä. Kas a e aan näiden es ien osal a i hema ginaalia ja aje aan
es i uudelleen. Modal-komponen in es i (T9) epäonnis uu edelleen, muu mene ä läpi.
Epäonnis uneen es in poikkeamaku as a (ku io 35) kui enkin nähdään, e ei kyse ole odelli-
ses a i hees ä.
Ku io 35. Dialogi es in (T9) kolmas poikkeamaku a.
4.5.5 Työkalun so el u uus yylin al ojaksi
Vi es , jes -image-snapsho :in ja Puppe ee -ki jas on a us uksella oisi oimia käy ölii ymä-
komponen ien isuaalisessa eg essio es auksessa, mu a kohdeo ganisaa ion apauksessa ja -
ko u kimus a aadi aan. Epäjohdonmukaise ää ä häly ykse ja aja ainen apo oin i aiku -
a a es ien luo e a uu een. Tes ien syn aksi on kui enkin selkeää ja esime kkejä löy yy do-
kumen aa ios a. Vaikka suu in osa i heis ä jää kiinni kokonais en si ujen ku issa, on kom-
ponen eja kui enkin syy ä a kas ella myös e ikseen. Tällöin poikkeama ule a selkeämmin
esiin ja es iajoja oidaan äsmen ää ongelmakoh iin.
Tä ä u kimus a a en eh y simulaa io on oki keino ekoinen, koska i hee o a ennal a ie-
76
dossa. Vää ien i heiden e o aminen odellisis a i heis ä saa aa ainakin aluksi un ua yö-
lääl ä. Tole anssin kas a aminen es ikoh aises i oi au aa, kun opi aan unnis amaan i hee ,
jo ka o a ihmissilmälläkin ha ai a issa. Tekoälypohjaise a kaisu as aa a juu i ähän on-
gelmaan ja osaa a e o ella me ki yksellise isuaalise e o pienis ä ende öin ie ois a.
Vi es so el uu myös oiminnalliseen es aukseen ja onkin sil ä osin jo kohdeo ganisaa ion käy-
össä. Se on myös in eg oi a issa yleises i käy e yihin CI/CD- yökaluihin. Visualisen es aus-
yökalun ehokkuus ja suo i uskyky ja ku an ohjelmis okehi yksen pu kessa on kui enkin a -
ioi a a e ikseen.
77

5 A e ak in e aluoin i ja ulokse i e aa ioi ain
Suunni elusyklien i e aa ioiden pää eeksi suo i e aan a e ak in e aluoin i. Tässä lu ussa esi-
ellään a ioinnin ulokse ja niiden pe us eella suo i e a a ja ko oimenpi ee .
5.1 Tyyliopas, ensimmäisen e aluoinnin ulokse
Alla ku a aan ensimmäisen e aluoinnin uloksia laa u aa imus en äy ymisen ja yylioppaan
lähdekoodin osal a. Tyylioppaalle ase e iin seu aa a laa u aa imukse : oiminnallisuus, käy-
e ä yys, ehokkuus ja ylläpide ä yys. Toiminnallisuudella a koi e aan si ä, e ä yyliopas so-
el uu käy öön, johon se on a koi e u ja hoi aa sille mää i elly oimenpi ee . Käy e ä yys
puoles aan a koi aa yylioppaan helppokäy öisyy ä, eli si ä, e ä se on ii ä än in ui ii inen
ja opi a a, ehokas ja yksinke ainen käy ää. Tehokkuus a koi aa, e ä yyliopas ei hukkaa
käy äjänsä aikaa ai jä jes elmän esu sseja ja oimii ehokkaas i siinä a koi uksessa, johon se
on luo u. Ylläpide ä yys lii yy yylioppaan elinkaa een ja siihen, e ei se ole ke aluon oinen
p ojek i aan elää so elluksen mukana ja pysyy ajan asalla.
Näi ä asioi a a kas ellaan yylioppaan o eu us a e aluoi aessa, aa imusmää i ely mielessä
pi äen. A ioinnin suo i aa kohdeo ganisaa ion ohjaaja. Ensimmäisen e aluoinnin pohjal a o-
eu e aan oinen i e aa io yylioppaan kehi ykses ä, jossa alla maini u asia py i ään ko jaa-
maan. I e aa ion pää eeksi yyliopas ja sen lähdekoodi a ioidaan uudelleen.
5.1.1 Laa u aa imus en äy yminen
Toiminnallisuuden osal a a ioija pi ää yyliopas a selkeänä, uskoo käy äjän saa an nopeas i
yleisku an sii ä, mi ä on a jolla ja uo an käy ölii ymäkehi äjien yöhön selkey ä. O gani-
saa io asois en komponen ien almiiksi ajoi e un spesi ioinnin usko aan helpo a an kaikkien
yö ä.
Ja ko oimenpi ei ä aiheu a a ensimmäisen e aluoinnin pe us eella muu ama seika . Tyyliop-
paan olisi hy ä olla näky illä myös ki jau uma omille käy äjille. Ensimmäisessä yylioppaan
e siossa esi ellään myös joi akin ei-spesi ejä komponen eja, ku en Inpu , joiden a peelli-
suus jää ähäiseksi. Jo a kokonaisuus olisi ii is, nämä on syy ä pois aa. Lisäksi ensimmäisen
e sion lomakekomponen i, aikkakin oimii yksinke aisen lomakkeen luon iin, aa ii muok-
kaus a. Käy ökelpoisempi olisi skeemapohjainen lomakegene aa o i, jossa myös sa akkeiden
78
käy äminen olisi mahdollis a. A ioija maini see lyhyes i myös es aukses a, jossa yylioppaan
esime kkisi un mallia as aan oi aisiin es a a komponen eissa eh yjä muu oksia. Kyseessä
olisi näin ollen isuaalinen eg essio es aus snapsho - ekniikalla. Vä ipale iin ja sen käy -
ööno on aiku uksiin on pala a a seu aa issa aiheissa. Aja uksena on, e ä Sie a- eemassa
mää i ellään so elluksen pe us ä i käy äen yylioppaan jao elua (p ima y, seconda y jne),
jo ka oidaan yliki joi aa asiakaskoh aises i eema iedos ossa (cus omTheme). Näiden
ä ipale ien käy ööno o aa ii me ki ä iä muu oksia komponen iki jas on nykyisessä a-
ken eessa ja he ä ää keskus elua uuden, o ganisaa ion b ändiin pe us u an demoso elluksen
luomises a. Ku iossa 36 on esi e y e aluoinnin ulokse oiminnallisuuden osal a, sekä aadi -
a a ja ko oimenpi ee ja o eu us.
Ku io 36. E aluoin i I, oiminnallisuus: huomio ja ja ko oimenpi ee
Käy e ä yydes ä p ojek in ässä aiheessa maini aan ain, e ä yyliopas on selkeä käy ää.
Ohjaaja maini see dokumen aa ion löyde ä yyden kui enkin kä si än yyliohjeen ollessa pel-
käs ään Gi hub- eposi o iossa. Julkaisua ulko e kkoon oidaan ha ki a, jolloin ulee a ioida
uudes aan myös Websc ape -komponen in käy ö ja alkupe äise ekijänoikeude . Tyyliop-
paan komponen ien esi elyis ä puu u a koodiesime ki . Nämä o a edelly yksenä yyliop-
paan käy e ä yydelle. Ku iossa 37 on esi e y e aluoinnin ulokse käy e ä yyden osal a, se-
kä aadi a a ja ko oimenpi ee ja o eu us.
79
Ku io 37. E aluoin i I, käy e ä yys: huomio ja ja ko oimenpi ee
Tehokkuudes a a ioija maini see, e ä kokonaisuus on nopeas i sela a issa ja hae a a ie o
on helppo löy ää. Si ujen jakaminen kehi äjien älillä on mahdollis a, koska so elluksen
ei i kulke a osoi e i illä. Lisäksi a ioija esi ää oi een yylioppaan sisällön indeksoinnis a
ja haku oiminnos a, kun ominaisuuksien mää ä kas aa. Ku iossa 38 on esi e y e aluoinnin
ulokse ehokkuuden osal a, sekä aadi a a ja ko oimenpi ee ja o eu us.
Ku io 38. E aluoin i I, ehokkuus: huomio ja ja ko oimenpi ee
Tyylioppaan ylläpidon a ioija uskoo ole an helppoa, koska kaikki sisäl ö löy yy saman e-
posi o ion sisäl ä. Hän huomioi kui enkin ylläpidon ole an manuaalis a, johon helpo us a oisi
uoda esime kiksi au omaa inen koodin gene oin i lähdekoodin pe us eella. Kun yylioppaa-
seen lisä ään komponen eja, niiden esi ys ja dokumen aa io on luo a a manuaalises i. E a-
luoinnin uloksia läpikäydessä keskus ellaan sii ä, mikä ämän ominaisuuden me ki ys on.
Vaikkei yyliopas a oi aisi pi ää ajan asalla päi i äin, ajoi e aisi säännöllises i yylikompo-
nen ien ja oppaan a kis us, jolloin ke alla päi i e äisiin as aamaan oisiaan. Samalla eh-
äisiin muu oksia jo olemassa ole iin yylioppaan si uihin, mikäli komponen eihin on eh y
muu oksia. Ku iossa 39 on esi e y e aluoinnin ulokse ylläpidon osal a, sekä aadi a a ja -
ko oimenpi ee ja o eu us.
80
Ku io 39. E aluoin i I, ylläpi o: huomio ja ja ko oimenpi ee
5.1.2 Lähdekoodin e aluoin i
Myös yylioppaan komponen ien lähdekoodi a ioidaan. Osa a ioiduis a iedos ois a sisäl ää
yylioppaan esi ykseen lii y ää koodia, mu a al aosa a iois a kohdis uu kui enkin o ganisaa-
iospesi eihin komponen eihin. Templaa ien osal a a ioija ehdo aa ole us älis yksen mää i -
elemis ä, jolloin komponen ia ku su aessa ei äl ämä ä a i sisi an aa älis ysa oa. He ä -
ees ä a ioija maini see, e ei s a us-pa ame ia a i sisi e ikseen mää i ellä, koska se kuuluu
Chak a UI:n pa ame eihin. Näin ollen spesi i s a us-pa ame i ei anna mi ään lisäa oa. Lisäk-
si a ioija ehdo aa yypin Requi eA Leas One käy ämis ä o sikon ja ku auksen osal a.
On kuulemma a allis a, e ä joissain yh eyksissä käy e ään ain ois a, jolloin joko o sikko ai
ku aus anne aan. B andTablen alue-ominaisuu een on jääny yypiksi any, mikä saa aa
aiheu aa ongelmia. Tämä on syy ä ko ja a as aamaan salli uja yyppejä. Lomakekomponen-
is a a ioija keho aa ekemään skeemapohjaisen e sion, ku en oiminnallisuuden a ioinnissa
maini aan. Taulukon osal a a ain ie ona käy e y indeksi saa aa myös aiheu aa ongelmia. A -
ioija ehdo aa ken än nimen käy ämis ä a aimena indeksin sijaan. Tyylioppaan esi yssi uilla
on jonkin e an ois oa, jos a on py i ä ä e oon. Samoin kehi ys aiheessa asenne u iippu-
uude , jo ka ei ä ässä e siossa ole enää käy össä, on syy ä pois aa. Esi yksessä ole ien esi-
me kki aulukoiden es ida a olisi hy ä muun aa JSON-muo oon ja sii ää omaan kansioonsa.
Näin samaa da aa oi aisiin käy ää myös so ellus a es a essa. Tyyli iedos on osal a oi o aan
jae ujen ominaisuuksien mää i elemis ä ainoas aan yhdessä paikassa, jolloin niiden ylläpi o
helpo uu.
5.2 Tyyliopas, oisen e aluoinnin ulokse
Toinen e aluoin i on luonnollises i ensimmäis ä ke yempi, koska a ioidaan pääasiassa en-
simmäisen e aluoinnin pe us eella eh yjä muu oksia. Laa u aa imus en osal a me ki ä impiä
muu oksia o a seu aa a :
81
jo ka oimi a pai si i sekseen myös hy änä lisänä snapsho - es aukselle. Tekoälyyn pe us u a
es aus ähen ää me ki ä äs i manuaalis a yö ä, jo a snapsho - es eihin ainakin aluksi lii yy.
Kun opi aan ymmä ämään syy pikseli e ailun aiheu amille ää ille i heille ja mää i ele-
mään oikeanlaise ole anssi , oi snapsho - es aukses akin olla al a a hyö y.
Tämän u kimuksen yh enä haas eena oli komponen iki jas on laajuus ja monimu kaise kes-
kenään uo o aiku a a komponen i . Tu kimussuunni elmas a joudu iin ämän uoksi pai-
koi ellen poikkeamaan. Haas eena oli myös ja ku as i muu u a ympä is ö ki jas on ollessa
käy össä ja kehi yessä koko ajan. Pelkäs ään nyky ilan ka oi uksen ja ki jas on ekons uk ion
älillä oli uusia komponen eja ilmes yny unsaas i.
Tyylien osal a pohdin aa aiheu i se osiasia, e ä Playg ound-ympä is ö on ain kehi äjille a -
koi e u yökalu. Va sinaise asiakas o eu ukse o a lähes poikkeukse a ää älöi yjä asiakkaan
oman yylin mukaan. Tämä aiheu i hämmennys ä e enkin ä imaailman suunni elussa. Tä -
keämpää oli luoda ä ikoodi us ja ekninen o eu us sille, e ä ää älöin i olisi ja kossa helppoa
ja ehokas a. Voisi kui enkin olla jä ke ää poh ia Playg ound:in hyödyn ämis ä demoympä is-
önä myyn i ilan eissa. Tällöin kohdeo ganisaa ion omaan b ändiin pe us u alla yh enäisellä
ulkoasulla oisi olla kaupallis a me ki ys ä.
Tyylioppaan käy ööno o aa ii ki jas on aken een me ki ä ää uudelleenjä jes elyä ja yhden
uni e saalin mallin yh eenso i aminen kaikkiin olemassa ole iin käy ö a koi uksiin un uu
lähes mahdo omal a. Työ kanna aakin aloi aa uusis a komponen eis a ja pikkuhiljaa sii yä
ekons uoimaan mui a komponen eja. Tässä u kimuksessa o eu e iin aihio, jo a seu aamalla
a oi e ilaan on mahdollis a pääs ä.
Pohdi a aa jäi siis paljonkin ja ja ko u kimuksellekin on sijaa. Komponen iki jas on ah a
Chak a UI - iippu uus on olemassa. Vaiku aako he ki si en julkais u uusi e sio 3.0 ki jas on
komponen ien ai yylioppaan esi yksen oimin aan? Tu kimuksen alussa puhu iin mahdol-
lisuudes a aja a ämä iippu uus o ganisaa iospesi eihin komponen eihin, jolloin a i aessa
iippu uus olisi helppo pu kaa. Tämä kui enkin aa isi huoma a as i laajemman mää än spesi-
ejä komponen eja, joiden aken amiseen ei ämän u kimuksen pui eissa ollu mahdollisuu a.
Tyylin al ojan osal a olisi hyödyllis ä u kia ekoälypohjaisia a kaisuja a kemmin. Löy yisi-
kö siel ä malli, joka suoda aisi ii ä än mää än ää iä i hei ä ja oimisi ehokkaas i CI/CD-
pu kessa? Tu kimuksessa esi ellyn mallin osal a huol a aiheu aa es ien luo e a uus ja a i -
a an manuaalisen yön mää ä. Työkalu an aa kui enkin kohdeo ganisaa iolle mallin, jo a edel-
88

leen kehi ämällä oidaan pääs ä halu uun loppu ulokseen.
Tu kimus lisäsi unsaas i uu a in o maa io a sii ä, kuinka olemassa ole ia epäkoh ia ko jaa-
malla pääs ään a oi e ilaan. Se a joaa hy än pohjan käy ölii ymäkehi yksen yksinke ais a-
miselle ja ehos amiselle koh i yh enäis ä, laadukas a ja ha monis a uo epe he ä.
89
Läh ee
Adebayo, Segun. 2024. “Chak a UI Documen a ion”. Vii a u 19. ma askuu a 2024. h ps:
//chak a-ui.com.
Appli ools. 2024. “Appli ools Documen a ion”. Vii a u 16. ma askuu a 2024. h ps://appli oo
ls.com/.
Ba a , Michael. 2024. “Wha is Visual Tes ing?” Vii a u 16. helmikuu a 2024. h ps://appli o
ols.com/blog/ isual- es ing/.
Coleman, Tom. 2017. “Componen -D i en De elopmen : Build UIs in a be e way: om he
componen up”. Vii a u 12. helmikuu a 2024. h ps://medium.com/@ measday/componen -
d i en-de elopmen -ce1109d56c8e.
Componen D i en. n.d. “Componen D i en Use In e aces”. Vii a u 12. helmikuu a 2024.
h ps://www.componen d i en.o g.
Cyp ess.io. 2024. “Cyp ess Documen a ion”. Vii a u 15. ma askuu a 2024. h ps://docs.cyp e
ss.io.
Delong, Sa a. 2020. “Why You Need o C ea e a Da a Visualiza ion S yle Guide o Tell G ea
S o ies (Pa 1)”. Vii a u 14. helmikuu a 2024. h ps://depic da as udio.com/why-you-need-
o-c ea e-a-da a- isualiza ion-s yle-guide- o- ell-g ea -s o ies/.
Fea he , Ian. 2014. “A Main ainable S yle Guide”. Vii a u 15. helmikuu a 2024. h ps://engine
e ing.lonelyplane .com/2014/05/18/a-main ainable-s yleguide.h ml.
Fessenden, The ese. 2021. “Design Sys ems 101”. Vii a u 13. helmikuu a 2024. h ps://www.
nng oup.com/a icles/design-sys ems-101/.
Founda ion, G aphQL. 2024. “G aphQL Documen a ion”. Vii a u 19. ma askuu a 2024. h ps:
//g aphql.o g.
F iedman, Vi aly. 2016. “Taking The Pa e n Lib a y To The Nex Le el”. Vii a u 13. helmi-
kuu a 2024. h ps://www.smashingmagazine.com/2016/10/ aking-pa e n-lib a ies-nex -le el/.
F os , B ad. 2016. A omic Design. Pi sbu gh, PA. Vii a u 14. helmikuu a 2024. h ps://a omic
design.b ad os .com/ able-o -con en s/.
90
HEAVY.AI. 2024. “G aphical Use In e ace (GUI)”. Vii a u 18. ma askuu a 2024. h ps:
//www.hea y.ai/ echnical-glossa y/g aphical-use -in e ace.
He ne , Alan R. 2007. “A Th ee Cycle View o Design Science Resea ch”. Scandina ian Jou -
nal o In o ma ion Sys ems 19 (2): 87–92. Vii a u 7. helmikuu a 2024. h p://aisel.aisne .o g/
sjis/ ol19/iss2/4.
He ne , Alan R., Sal a o e T. Ma ch, Jinsoo Pa k ja Sudha Ram. 2004. “Design Science in
In o ma ion Sys ems Resea ch”. MIS Qua e ly 28 (1): 75–105. h ps://doi.o g/10.2307/
25148625.
HubSpo . 2024. “Wha is a GUI?” Vii a u 18. ma askuu a 2024. h ps://blog.hubspo .com/
websi e/wha -is-gui.
Kalia, Anshul ja Sumesh Sood. 2017. “Conce ns in Main aining Reusable So wa e Compo-
nen s and he Possible Solu ions”. Indian Jou nal o Science and Technology 10 (23): 1–10.
h ps://doi.o g/10.17485/ijs /2017/ 10i23/108703.
Kholma o a, Alla. 2017. Design Sys ems. F eibu g, Ge many: Smashing Media AG. Vii a u
15. helmikuu a 2024. h ps://www.smashingmagazine.com/p o ide/eBooks/design-sys ems.
pd .
Lynch, Pa ick J. ja Sa ah Ho on. 2016. Web S yle Guide, 4 h Edi ion: Founda ions o Use
Expe ience Design. 4. painos. London, UK: Yale Uni e si y P ess.
Ma ch, Sal a o e T. ja Ge ald F. Smi h. 1995. “Design and na u al science esea ch on in o -
ma ion echnology”. Decision Suppo Sys ems 15 (4): 251–266. h ps://doi.o g/10.1016/0167-
9236(94)00041-2.
Me a. 2024. “Reac Documen a ion”. Vii a u 19. ma askuu a 2024. h ps:/ eac .de .
Mic oso . 2024a. “Playw igh Documen a ion”. Vii a u 15. ma askuu a 2024. h ps://playw
igh .de .
. 2024b. “TypeSc ip Documen a ion”. Vii a u 19. ma askuu a 2024. h ps://www.
ypesc ip lang.o g.
Ne ille, Ka . 2010. “How To Design S yle Guides Fo B ands And Websi es”. Vii a u 14. hel-
mikuu a 2024. h ps://www.smashingmagazine.com/2010/07/designing-s yle-guidelines- o -
b ands-and-websi es/.
91
OpenJSFounda ion. 2024. “Node.js Documen a ion”. Vii a u 19. ma askuu a 2024. h ps://
nodejs.o g.
Osmani, Addy. n.d. “Componen s Should Be Focused, Independen , Reusable, Small and Tes-
able (FIRST)”. Vii a u 12. helmikuu a 2024. h ps://addyosmani.com/ i s /.
Pandey, Sakshi. 2022. “How AI in Visual Tes ing is ans o ming he Tes ing Landscape”.
Vii a u 16. helmikuu a 2024. h ps://www.b owse s ack.com/guide/how-ai-in- isual- es ing-
is-e ol ing.
Pe e s, Ken, Tuu e Tuunanen, Ma cus A. Ro henbe ge ja Sami Cha e jee. 2007. “A Design
Science Resea ch Me hodology o In o ma ion Sys ems Resea ch”. Jou nal o Managemen
In o ma ion Sys ems 24 (3): 45–77. h ps://doi.o g/10.2753/MIS0742-1222240302.
Qu eshi, M.R.J. ja S.A. Hussain. 2008. “A eusable so wa e componen -based de elopmen
p ocess model”. Ad ances in Enginee ing So wa e 39 (2): 88–94. Vii a u 12. helmikuu a 2024.
h ps://www.sciencedi ec .com/science/a icle/abs/pii/S0965997807000294.
Sa ing, Jona han. 2019. “A Guide o Componen D i en De elopmen (CDD): Le componen s
d i e he de elopmen o you applica ions.” Vii a u 12. helmikuu a 2024. h ps://i nex .io/a-
guide- o-componen -d i en-de elopmen -cdd-1516 65d8b55.
So wa e Tes ing Help. 2023. “Guide To Visual Reg ession Tes ing Wi h Visual Tes ing Tools”.
Vii a u 15. helmikuu a 2024. h ps://www.so wa e es inghelp.com/ isual- alida ion- es ing/.
S o ybook. 2024. “S o ybook Documen a ion”. Vii a u 19. ma askuu a 2024. h ps://s o yboo
k.js.o g.
UPXin. 2023. “Wha is a Componen Lib a y, and Why Should You Use One o UI De elop-
men ?” Vii a u 13. helmikuu a 2024. h ps://www.uxpin.com/s udio/blog/ui-componen -
lib a y/.
Vale, Tassio, I ica C nko ic, Edua do San ana de Almeida, Paulo Anselmo da Mo a Sil ei a
Ne o, Ygua a ã Ce quei a Ca alcan i ja Sil io Rome o de Lemos Mei a. 2016. “Twen y-eigh
yea s o componen -based so wa e enginee ing”. Jou nal o Sys ems and So wa e 111:128–
148. h ps://doi.o g/h ps://doi.o g/10.1016/j.jss.2015.09.019.
92
Volk, To s en. 2021. “Sep embe 2021 EMA Resea ch Repo : Dis up ing he Economics o
So wa e Tes ing Th ough AI”. Vii a u 15. helmikuu a 2024. h ps://ewig5q 9cgn.exac dn.
com/wp-con en /uploads/2021/09/EMA-Appli ools-Dis up ingTes ingEconomics-092121.
pd .
Xu, Da id. 2022. “E e y hing you need o know abou Visual Reg ession Tes ing in 2022”.
Vii a u 15. helmikuu a 2024. h ps://da id-x.medium.com/ he-s a e-o - isual- eg ession-
es ing-in-2022-5de10 e8 6 .
You, E an. 2024a. “Vi e Documen a ion”. Vii a u 19. ma askuu a 2024. h ps:// i ejs.de .
. 2024b. “Vi es Documen a ion”. Vii a u 15. ma askuu a 2024. h ps:// i es .de .
93