Prosessikaavion esittäminen web-käyttöliittymässä : case KyberVALIOT-yhteistyöhanke
Pietarinen, Ville-Pekka (2020)
Pietarinen, Ville-Pekka
2020
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2020112023506
https://urn.fi/URN:NBN:fi:amk-2020112023506
Tiivistelmä
Tutkimus toteutettiin toimeksiantona Turun ammattikorkeakoululle osana KyberVALIOT-yhteistyöhanketta. Työn tavoitteena oli tutkia Turun ammattikorkeakoulun älylaitteen testausprosessikaaviota ja toteuttaa kaavion sisältävä interaktiivinen web-käyttöliittymä. Teoreettisessa osassa tarkasteltiin prosessikaavion määritelmää ja prosessikuvaamisen tasoja, joilla hahmotetaan kuvauksien yksityiskohtaisuutta. Lisäksi selvitettiin sovellettavan kaavion tietorakennetta ja sen määritelmää niiltä osin kuin käytännön toteutuksessa nähtiin tarpeelliseksi.
Työ tehtiin tapaustutkimuksena, jossa käytettiin konstruktiivista tutkimusmenetelmää. Työn keskeistä tulosta edustaa web-käyttöliittymätoteutus, joka keskittyi kaavion visualisoinnin ympärille. Tunnistettua tietorakennetta soveltaen kaavio mallinnettiin uudelleen CSV-muotoon tietorakenteen helpomman hallittavuuden takia. Toteutuksen aikana vertailtiin valitun JavaScript-visualisointikirjaston asettelualgoritmeja ja niiden piirtämiä kaavioita, joiden selkeydessä havaittiin eroja. Kaavion selkeää visualisointia tukevaa algoritmia hyödyntäen verkkosivu ohjelmoitiin esittämään kaavio, ja luotiin visualisoinnin sisältävä React-komponentti, joka liitettiin osaksi web-käyttöliittymäkokonaisuutta.
Verkkosivu toteutettiin tyyliteltyjä React-komponentteja tarjoavalla Material-UI-kirjastolla, jota ohjelmoitiin JavaScript-kieltä laajentavalla TypeScriptillä. Käyttöliittymälle suoritettiin kolme testitapausta, joissa käyttöliittymä toimi määritetyissä tapauksissa odotetusti. Lopuksi tarkasteltiin tuloksien merkitystä ja pohdittiin jatkokehitysehdotuksia, jotka sisältävät muun muassa käyttöliittymässä valittujen prosessivaiheiden tallennuksen.
Työn tuloksista oli merkittävää hyötyä laitetestausautomaation suunnittelussa ja jatkokehityksessä. The thesis was commissioned by Turku University of Applied Sciences as part of the collaborative project CyberELITE. The goal of the thesis was to analyse a process diagram developed by Turku University of Applied Sciences and implement a web interface which would include the diagram visualised. In the theoretical part, the definition of a process diagram was studied with additional attention to process modelling levels. Also, the data structure of the applied diagram was identified, and its theoretical fundamentals were presented. The thesis is a case study performed with a constructive research method.
The implementation of the web interface was built around diagram visualisation. The diagram's identified data structure was applied in the remodelling of the diagram from PDF file format to CSV format. After loading the diagram data into a JavaScript library capable of the visualisation, different layout algorithms were compared. Differences in readability were noticed between algorithm-produced layout drawings. Using the most natural layout producing algorithm, a website was programmed to present the process diagram. The visualisation was wrapped into a React component which was later integrated into the web interface. Utilising a Material-UI library offering styled React components, the interface was realised using TypeScript programming language which provides static typing to the otherwise dynamically typed JavaScript. The implemented interface was tested with three use cases in which the interface functioned as expected.
Finally, the results were analysed and proposals for further development were considered. Save functionality for selected process phases was suggested, among other things.
The implemented web interface provided considerable benefit to the planning and further development of smart device testing within the project.
Työ tehtiin tapaustutkimuksena, jossa käytettiin konstruktiivista tutkimusmenetelmää. Työn keskeistä tulosta edustaa web-käyttöliittymätoteutus, joka keskittyi kaavion visualisoinnin ympärille. Tunnistettua tietorakennetta soveltaen kaavio mallinnettiin uudelleen CSV-muotoon tietorakenteen helpomman hallittavuuden takia. Toteutuksen aikana vertailtiin valitun JavaScript-visualisointikirjaston asettelualgoritmeja ja niiden piirtämiä kaavioita, joiden selkeydessä havaittiin eroja. Kaavion selkeää visualisointia tukevaa algoritmia hyödyntäen verkkosivu ohjelmoitiin esittämään kaavio, ja luotiin visualisoinnin sisältävä React-komponentti, joka liitettiin osaksi web-käyttöliittymäkokonaisuutta.
Verkkosivu toteutettiin tyyliteltyjä React-komponentteja tarjoavalla Material-UI-kirjastolla, jota ohjelmoitiin JavaScript-kieltä laajentavalla TypeScriptillä. Käyttöliittymälle suoritettiin kolme testitapausta, joissa käyttöliittymä toimi määritetyissä tapauksissa odotetusti. Lopuksi tarkasteltiin tuloksien merkitystä ja pohdittiin jatkokehitysehdotuksia, jotka sisältävät muun muassa käyttöliittymässä valittujen prosessivaiheiden tallennuksen.
Työn tuloksista oli merkittävää hyötyä laitetestausautomaation suunnittelussa ja jatkokehityksessä.
The implementation of the web interface was built around diagram visualisation. The diagram's identified data structure was applied in the remodelling of the diagram from PDF file format to CSV format. After loading the diagram data into a JavaScript library capable of the visualisation, different layout algorithms were compared. Differences in readability were noticed between algorithm-produced layout drawings. Using the most natural layout producing algorithm, a website was programmed to present the process diagram. The visualisation was wrapped into a React component which was later integrated into the web interface. Utilising a Material-UI library offering styled React components, the interface was realised using TypeScript programming language which provides static typing to the otherwise dynamically typed JavaScript. The implemented interface was tested with three use cases in which the interface functioned as expected.
Finally, the results were analysed and proposals for further development were considered. Save functionality for selected process phases was suggested, among other things.
The implemented web interface provided considerable benefit to the planning and further development of smart device testing within the project.