Selainpohjainen neulemallin suunnittelusovellus
Varjoranta, Suvi (2025)
2025
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-2025051311179
https://urn.fi/URN:NBN:fi:amk-2025051311179
Tiivistelmä
Toiminnallisen opinnäytetyön tuotoksena kehitettiin selainpohjainen neulemallin suunnittelusovellus. Sovelluksessa luodaan valituilla väreillä interaktiiviseen ruudukkoon malli, jonka pohjalta sovellus tuottaa reaktiivisesti visualisoinnit 2D-kuvana sekä 3D-mallina. Sovelluksessa voidaan mallin suunnittelun ja luonnin lisäksi myös kokeilla erilaisia väriyhdistelmiä ennen varsinaisten tarvikkeiden ostoa. Työssä rajattiin sovellus toimimaan tietokoneilla ja tableteilla yleisimmissä selaimissa.
Keskeinen tietoperusta muodostui sovelluksen kehitykseen valituista tekniikoista. Kieleksi valittiin JavaScript, sovelluskehykseksi Vue.js ja tyylittelyyn Tailwind CSS. 2D- ja 3D-visualisointeja varten käytettiin P5.js- ja Three.js-kirjastoja. Tuotoksen kehitys toteutettiin ketteriä menetelmiä ja Scrumbania noudatellen sprinteittäin keväällä 2025. Koodauksessa hyödynnettiin iteratiivista otetta ja jatkuvaa testausta. Kehitysympäristössä käytettiin Visual Studio Code -koodieditoria sekä Git-versionhallintajärjestelmää.
Opinnäytetyössä käydään läpi tietoperustan jälkeen tuotoksen kehitys alusta julkaisuun sekä esitetään kehityksen aikana otettuja, havainnollistavia kuvakaappauksia sen eri vaiheista. Sovellus saatiin onnistuneesti tuotettua, ja erityisesti onnistuttiin uusien tekniikoiden hyödyntämisessä 2D- ja 3D-visualisointien toteutuksessa. Suorituskyvyn onnistunut optimointi mahdollistaa sovelluksen sujuvan käytön myös vanhemmilla laitteilla. Lähes kaikki sovellukselle asetetut toiminnalliset vaatimukset saavutettiin, ja aikarajoitteiden vuoksi toteuttamatta jääneet toiminnallisuudet jäivät jatkokehityskohteiksi. Näitä ovat mahdollisuus tallentaa käyttäjän luoma suunnitelma siten, että se voidaan myöhemmin avata sovelluksessa uudelleen, sekä ominaisuus, jonka avulla käyttäjä voi itse määrittää ruudukon koon. Pohdinnassa käydään läpi opittuja asioita ja jatkokehityskohteita sekä arvioidaan tuotoksen onnistumista tarkemmin. Opinnäytetyön tuotoksena syntynyt sovellus tarjoaa intuitiivisen ja toimivan työkalun selkeällä käyttöliittymällä. Sovellus julkaistiin Netlify-palveluun.
Keskeinen tietoperusta muodostui sovelluksen kehitykseen valituista tekniikoista. Kieleksi valittiin JavaScript, sovelluskehykseksi Vue.js ja tyylittelyyn Tailwind CSS. 2D- ja 3D-visualisointeja varten käytettiin P5.js- ja Three.js-kirjastoja. Tuotoksen kehitys toteutettiin ketteriä menetelmiä ja Scrumbania noudatellen sprinteittäin keväällä 2025. Koodauksessa hyödynnettiin iteratiivista otetta ja jatkuvaa testausta. Kehitysympäristössä käytettiin Visual Studio Code -koodieditoria sekä Git-versionhallintajärjestelmää.
Opinnäytetyössä käydään läpi tietoperustan jälkeen tuotoksen kehitys alusta julkaisuun sekä esitetään kehityksen aikana otettuja, havainnollistavia kuvakaappauksia sen eri vaiheista. Sovellus saatiin onnistuneesti tuotettua, ja erityisesti onnistuttiin uusien tekniikoiden hyödyntämisessä 2D- ja 3D-visualisointien toteutuksessa. Suorituskyvyn onnistunut optimointi mahdollistaa sovelluksen sujuvan käytön myös vanhemmilla laitteilla. Lähes kaikki sovellukselle asetetut toiminnalliset vaatimukset saavutettiin, ja aikarajoitteiden vuoksi toteuttamatta jääneet toiminnallisuudet jäivät jatkokehityskohteiksi. Näitä ovat mahdollisuus tallentaa käyttäjän luoma suunnitelma siten, että se voidaan myöhemmin avata sovelluksessa uudelleen, sekä ominaisuus, jonka avulla käyttäjä voi itse määrittää ruudukon koon. Pohdinnassa käydään läpi opittuja asioita ja jatkokehityskohteita sekä arvioidaan tuotoksen onnistumista tarkemmin. Opinnäytetyön tuotoksena syntynyt sovellus tarjoaa intuitiivisen ja toimivan työkalun selkeällä käyttöliittymällä. Sovellus julkaistiin Netlify-palveluun.