Infonäyttöohjelmiston käyttöliittymän suunnittelu ja toteutus
Seppänen, Sari (2024)
2024
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-2024112529836
https://urn.fi/URN:NBN:fi:amk-2024112529836
Tiivistelmä
Opinnäytetyön tavoitteena oli suunnitella ja toteuttaa käyttöliittymä infonäyttöä varten. Toimeksiantaja halusi näytössä näkyvän lähimpien linja-autopysäkkien ja rautatieasemalta lähtevien junien aikataulut. Toimeksiantajana toimi LUT tilapalvelut.
Kehityksessä käytettiin Vue.js-kehysohjelmistoa, sekä reititykseen Vue Router ja Vuex tilanhallintaa. Ohjelmointikielenä käytettiin TypeScriptiä. Ulkoasun suunnittelussa hyödynnettiin Figmaa. Infonäyttö tulisi sijaitsemaan LAB-ammattikorkeakoulun kampuksen aulassa, minkä vuoksi suunnittelun avuksi käytettiin LAB:in brändiohjeistusta. Aikataulut päätettiin selkeyden vuoksi jakaa linja-auto- ja junanäkymiin. Näkymissä näkyvät aikataulujen tärkeimmät tiedot kuten esimerkiksi määränpää ja lähtöaika.
Ohjelmistoon lisättiin myös selkeyden vuoksi ja esteettisistä syistä animaatioita. Koska halutut animaatiot olivat yksinkertaisia, ne ovat tehty käyttäen Vue.js:n omia Transition- ja TransitionGroup-komponentteja sekä CSS animaatiokeinoja. Animaatioita käytettiin esimerkiksi näkymien alareunassa kulkeviin kulkuneuvoihin, jotka liukuvat näytön poikki näkymän vaihtumisvälin mukaan.
Työ valmistui ajallaan ja ilman suurempia vastoinkäymisiä. Toimeksiantaja on tyytyväinen lopputulokseen. Ohjelmisto on asennettu ja sijaitsee LAB-ammattikorkeakoulun Mukkulankadun kampuksen aulassa.
Kehityksessä käytettiin Vue.js-kehysohjelmistoa, sekä reititykseen Vue Router ja Vuex tilanhallintaa. Ohjelmointikielenä käytettiin TypeScriptiä. Ulkoasun suunnittelussa hyödynnettiin Figmaa. Infonäyttö tulisi sijaitsemaan LAB-ammattikorkeakoulun kampuksen aulassa, minkä vuoksi suunnittelun avuksi käytettiin LAB:in brändiohjeistusta. Aikataulut päätettiin selkeyden vuoksi jakaa linja-auto- ja junanäkymiin. Näkymissä näkyvät aikataulujen tärkeimmät tiedot kuten esimerkiksi määränpää ja lähtöaika.
Ohjelmistoon lisättiin myös selkeyden vuoksi ja esteettisistä syistä animaatioita. Koska halutut animaatiot olivat yksinkertaisia, ne ovat tehty käyttäen Vue.js:n omia Transition- ja TransitionGroup-komponentteja sekä CSS animaatiokeinoja. Animaatioita käytettiin esimerkiksi näkymien alareunassa kulkeviin kulkuneuvoihin, jotka liukuvat näytön poikki näkymän vaihtumisvälin mukaan.
Työ valmistui ajallaan ja ilman suurempia vastoinkäymisiä. Toimeksiantaja on tyytyväinen lopputulokseen. Ohjelmisto on asennettu ja sijaitsee LAB-ammattikorkeakoulun Mukkulankadun kampuksen aulassa.