Käyttöliittymän toteutus React-kirjaston avulla
Angervuori, Silja (2022)
2022
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2022120526480
https://urn.fi/URN:NBN:fi:amk-2022120526480
Tiivistelmä
Insinöörityön tavoitteena oli toteuttaa uusi käyttöliittymä olemassa olevaan web-sovellukseen, jossa oli käytetty perinteistä HTML-esitystapaa. Uuden käyttöliittymän toteutustavaksi valittiin React-teknologia. Se mahdollistaisi nykyaikaisemman käyttöliittymän ja ulkoasun toteutettuna niin sanottuna SPA-sovelluksena (Single-Page Application). SPA-sovellus ladataan kokonaisuudessaan käyttäjän selaimelle ennen sivun käyttöä. Tämä yhdistettynä Reactin dynaamiseen käyttöliittymän rakentamiseen (VDOM) johtaa erinomaiseen suorituskykyyn.
Aluksi työssä tutustuttiin olemassa olevaan sovelluksen toiminnallisuuteen ja sen sovelluslogiikkaan sekä sen rakenteeseen. Käyttöliittymäsuunnitelma tehtiin Adobe XD -vektorityökalun avulla ja samalla tutustuttiin ulkoasusuunnittelun periaatteisiin. Seuraavaksi perehdyttiin responsiivisen suunnittelun perusteisiin, minkä tavoitteena oli toteuttaa skaalautuva näyttö. Lopuksi käyttöliittymäsuunnitelman komponentit toteutettiin vastaavanlaisilla Reactin komponenteilla, jotka toteutettiin Visual Studio Code -kehitysympäristössä.
Lopputuloksena saatiin kerrosarkkitehtuurilla toteutettu interaktiivinen React-pohjainen käyttöliittymä, joka skaalautuu hyvin sekä tietokone- että mobiilinäytöille. Kerrosarkkitehtuurin käyttö puolestaan loi pohjan helposti kehitettävälle ja jatkossa ylläpidettävälle sovellukselle. Jatkossa sovellusta olisi helppo kehittää puhtaan mobiilisovelluksen suuntaan käyttäen React Native -ohjelmistokehystä.
Aluksi työssä tutustuttiin olemassa olevaan sovelluksen toiminnallisuuteen ja sen sovelluslogiikkaan sekä sen rakenteeseen. Käyttöliittymäsuunnitelma tehtiin Adobe XD -vektorityökalun avulla ja samalla tutustuttiin ulkoasusuunnittelun periaatteisiin. Seuraavaksi perehdyttiin responsiivisen suunnittelun perusteisiin, minkä tavoitteena oli toteuttaa skaalautuva näyttö. Lopuksi käyttöliittymäsuunnitelman komponentit toteutettiin vastaavanlaisilla Reactin komponenteilla, jotka toteutettiin Visual Studio Code -kehitysympäristössä.
Lopputuloksena saatiin kerrosarkkitehtuurilla toteutettu interaktiivinen React-pohjainen käyttöliittymä, joka skaalautuu hyvin sekä tietokone- että mobiilinäytöille. Kerrosarkkitehtuurin käyttö puolestaan loi pohjan helposti kehitettävälle ja jatkossa ylläpidettävälle sovellukselle. Jatkossa sovellusta olisi helppo kehittää puhtaan mobiilisovelluksen suuntaan käyttäen React Native -ohjelmistokehystä.