Graafisen käyttöliittymän tyyliopas ja sen noudattamisen ohjelmallinen valvonta

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