Komponenttisuunnittelu Framerin ja Storybookin avulla
Sassi, Ville-Petteri (2020)
2020
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2020120225680
https://urn.fi/URN:NBN:fi:amk-2020120225680
Tiivistelmä
Tämän opinnäytetyön aiheena on käyttöliittymäkomponenttien suunnittelu- ja luontiprosessi, jossa sovelletaan TypeScript-ohjelmointikieltä yhdessä React-komponenttikirjaston tarjoamien työkalujen ja komponenttien kanssa. Työn aikana käytetään edellä mainittujen tekniikoiden lisäksi käyttöliittymien prototypointityökalua Frameria, sekä käyttöliittymäkehityksen ja dokumentoinnin työkalua Storybookkia.
Toimeksiantajayritys kehittää itselleen yrityksen omaa komponenttikirjastoa, jonka ideana on nopeuttaa ja helpottaa asiakasprojektien kehitysprosessia käyttäen niiden luonnissa yhteisen kirjaston komponentteja. Kyseinen komponenttikirjasto on osa yrityksen kaavailemaa design systeemiä, johon sisältyy tämän opinnäytetyön aikana läpikäytävät käyttöliittymäsuunnittelu- ja luontiprosessit.
Opinnäytetyön teoriaosioissa kerrotaan Reactin, Framerin ja Storybookin toimintamalleista, luontihistoriasta, niiden tarjoamista toiminnallisuuksista, sekä Reactin tapauksessa sen sisarkirjastoista. Teoriaosuudessa käsitellään myös komponenttipohjaisen kehityksen pääperiaatteet ja sen hyödyt sovelluskehityksessä, sekä lyhyesti design systeemi.
Työssä seurataan demottavan komponentin kehitysprosessi käyttöliittymäsuunnittelusta Framer-sovelluksella, lopulta sen luontivaiheeseen. Projektissa kuvataan ensimmäiseksi demottavan komponentin rakennukseen ja testaukseen tarkoitetun hiekkalaatikkoprojektin luonti ja projektissa käytettävien työkalujen testaaminen. Tämän jälkeen työstä siirrytään demottavan komponentin käyttöliittymäsuunnitteluun, jossa sen luonnin aikana käydään yksityiskohtaisesti läpi prosessin elinkaari ja kerrotaan prosessin aikana tehdyt päätökset, sekä Framer-sovelluksessa käytetyt tekniikat. Käyttöliittymäsuunnitelmien teon jälkeen siirrytään itse komponentin konkreettiseen rakentamiseen hiekkalaatikkoprojektissa.
Projektin aikana tarkoitus on luoda toimiva prototyyppi käyttöliittymäkomponentista ja kirjata onnistunut kehitysprosessi. Tämän seurauksena toimeksiantajayritykselle saadaan todiste konseptista käyttää työn aikana käytettyjä sovelluskehitystekniikoita asiakasprojekteissa. Työn lopputuloksena tullaan saamaan aikaiseksi toimiva käyttöliittymäkomponentti, jonka toimeksiantajayritys ottaa käyttöönsä asiakasprojekteissa.
Toimeksiantajayritys kehittää itselleen yrityksen omaa komponenttikirjastoa, jonka ideana on nopeuttaa ja helpottaa asiakasprojektien kehitysprosessia käyttäen niiden luonnissa yhteisen kirjaston komponentteja. Kyseinen komponenttikirjasto on osa yrityksen kaavailemaa design systeemiä, johon sisältyy tämän opinnäytetyön aikana läpikäytävät käyttöliittymäsuunnittelu- ja luontiprosessit.
Opinnäytetyön teoriaosioissa kerrotaan Reactin, Framerin ja Storybookin toimintamalleista, luontihistoriasta, niiden tarjoamista toiminnallisuuksista, sekä Reactin tapauksessa sen sisarkirjastoista. Teoriaosuudessa käsitellään myös komponenttipohjaisen kehityksen pääperiaatteet ja sen hyödyt sovelluskehityksessä, sekä lyhyesti design systeemi.
Työssä seurataan demottavan komponentin kehitysprosessi käyttöliittymäsuunnittelusta Framer-sovelluksella, lopulta sen luontivaiheeseen. Projektissa kuvataan ensimmäiseksi demottavan komponentin rakennukseen ja testaukseen tarkoitetun hiekkalaatikkoprojektin luonti ja projektissa käytettävien työkalujen testaaminen. Tämän jälkeen työstä siirrytään demottavan komponentin käyttöliittymäsuunnitteluun, jossa sen luonnin aikana käydään yksityiskohtaisesti läpi prosessin elinkaari ja kerrotaan prosessin aikana tehdyt päätökset, sekä Framer-sovelluksessa käytetyt tekniikat. Käyttöliittymäsuunnitelmien teon jälkeen siirrytään itse komponentin konkreettiseen rakentamiseen hiekkalaatikkoprojektissa.
Projektin aikana tarkoitus on luoda toimiva prototyyppi käyttöliittymäkomponentista ja kirjata onnistunut kehitysprosessi. Tämän seurauksena toimeksiantajayritykselle saadaan todiste konseptista käyttää työn aikana käytettyjä sovelluskehitystekniikoita asiakasprojekteissa. Työn lopputuloksena tullaan saamaan aikaiseksi toimiva käyttöliittymäkomponentti, jonka toimeksiantajayritys ottaa käyttöönsä asiakasprojekteissa.