Pelaajastatistiikkaa seuraavan web-sovelluksen kehitys TypeScriptillä
Savolainen, Miikka (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-2025120231750
https://urn.fi/URN:NBN:fi:amk-2025120231750
Tiivistelmä
Opinnäytetyössä luodaan tilastopalvelu Counter-Strike 2 -pelin Faceit-alustan pelaajille. Faceit on ulkopuolinen alusta, jossa pelaajat kilpailevat Faceitin oman taitotasojärjestelmän mukaisesti. Aiemmin käytössä olleet tilastosovellukset olivat vanhentuneita tai hankalakäyttöisiä, joten paremmalle ratkaisulle oli kysyntää. Tekijä oli itse pitkään Faceitin käyttäjä ja näki mahdollisuuden toteuttaa nykyaikaisen statistiikkasovelluksen, joka kokoaa pelaajan tärkeimmät tilastot yhteen näkymään. Aihe oli ajankohtainen modernin e-urheilun kentällä, jossa pelaajadataa hyödynnetään yhä enemmän, ja avoimien rajapintojen sekä modernien web-teknologioiden ansiosta yksittäinen kehittäjä pystyi toteuttamaan kilpailukykyisen ratkaisun tähän tarpeeseen.
Työn päätavoitteena oli kehittää web-sovellus, joka hakee luotettavasti Faceit-alustan avoimista rajapinnoista yksittäisen pelaajan profiilin, otteluhistorian ja keskeiset pelitilastot ja esittää ne selkeästi käyttöliittymässä. Lisäksi sovelluksen tuli toimia teknisesti moitteettomasti, eli palauttaa ajantasaista tietoa ilman virheitä. Tavoite rajattiin koskemaan yhden pelaajan tilastoja kerrallaan. Työssä ei toteutettu joukkueiden tai usean pelaajan vertailuja eikä kehittyneitä analytiikkatoimintoja, kuten tekoälypohjaisia ennusteita. Rajaus piti projektin realistisena opinnäytetyön laajuuteen nähden. Tavoitteena oli tuottaa toimiva prototyyppi, jota voidaan myöhemmin kehittää kohti laajempaa, mahdollisesti kaupallista sovellusta.
Työn tietoperustassa perehdyttiin sovelluksessa käytettyihin web-teknologioihin (JavaScript, TypeScript, React, Next.js, Tailwind CSS) sekä ohjelmistokehityksen työkaluihin. Teoriaosuudessa käsiteltiin esimerkiksi käyttöliittymäsuunnittelun ja käyttäjäkokemuksen periaatteita, Faceitin rajapinnan hyödyntämistä ja siihen liittyvää tietoturvaa, kuten API-avainten suojattua hallintaa. Tietoperustassa käsiteltiin myös projektissa hyödynnettyjä työkaluja, kuten Git-versionhallintaa ja Vercel-pilvipalvelua.
Projekti toteutettiin toiminnallisena opinnäytetyönä kehittämällä Faceit-statistiikkasovelluksen prototyyppi iteratiivisella kehitysmenetelmällä. Työ aloitettiin sovelluksen toiminnallisuuksien suunnittelulla ja käyttöliittymän hahmottelulla, minkä jälkeen varsinainen ohjelmointi toteutettiin Next.js-kehyksellä hyödyntäen Reactia ja TypeScriptiä. Sovellus integroitiin Faceitin REST-rajapintaan ja julkaistiin pilvipalvelussa testikäyttöä varten. Kehityksen aikana käyttöliittymää muokattiin palautteen perusteella selkeyden parantamiseksi. Toteutuksessa huomioitiin tietoturva, esimerkiksi API-avainten suojattu käyttö ympäristömuuttujien avulla.
Työn tuloksena on valmistunut toimiva ja käyttäjäystävällinen sovellusprototyyppi, joka hakee käyttäjän syöttämän Faceit-pelaajan profiilin, otteluhistorian ja keskeiset tilastot luotettavasti yhden haun perusteella ja esittää ne selkeästi yhdessä näkymässä, täyttäen sille asetetut tavoitteet.
Työn päätavoitteena oli kehittää web-sovellus, joka hakee luotettavasti Faceit-alustan avoimista rajapinnoista yksittäisen pelaajan profiilin, otteluhistorian ja keskeiset pelitilastot ja esittää ne selkeästi käyttöliittymässä. Lisäksi sovelluksen tuli toimia teknisesti moitteettomasti, eli palauttaa ajantasaista tietoa ilman virheitä. Tavoite rajattiin koskemaan yhden pelaajan tilastoja kerrallaan. Työssä ei toteutettu joukkueiden tai usean pelaajan vertailuja eikä kehittyneitä analytiikkatoimintoja, kuten tekoälypohjaisia ennusteita. Rajaus piti projektin realistisena opinnäytetyön laajuuteen nähden. Tavoitteena oli tuottaa toimiva prototyyppi, jota voidaan myöhemmin kehittää kohti laajempaa, mahdollisesti kaupallista sovellusta.
Työn tietoperustassa perehdyttiin sovelluksessa käytettyihin web-teknologioihin (JavaScript, TypeScript, React, Next.js, Tailwind CSS) sekä ohjelmistokehityksen työkaluihin. Teoriaosuudessa käsiteltiin esimerkiksi käyttöliittymäsuunnittelun ja käyttäjäkokemuksen periaatteita, Faceitin rajapinnan hyödyntämistä ja siihen liittyvää tietoturvaa, kuten API-avainten suojattua hallintaa. Tietoperustassa käsiteltiin myös projektissa hyödynnettyjä työkaluja, kuten Git-versionhallintaa ja Vercel-pilvipalvelua.
Projekti toteutettiin toiminnallisena opinnäytetyönä kehittämällä Faceit-statistiikkasovelluksen prototyyppi iteratiivisella kehitysmenetelmällä. Työ aloitettiin sovelluksen toiminnallisuuksien suunnittelulla ja käyttöliittymän hahmottelulla, minkä jälkeen varsinainen ohjelmointi toteutettiin Next.js-kehyksellä hyödyntäen Reactia ja TypeScriptiä. Sovellus integroitiin Faceitin REST-rajapintaan ja julkaistiin pilvipalvelussa testikäyttöä varten. Kehityksen aikana käyttöliittymää muokattiin palautteen perusteella selkeyden parantamiseksi. Toteutuksessa huomioitiin tietoturva, esimerkiksi API-avainten suojattu käyttö ympäristömuuttujien avulla.
Työn tuloksena on valmistunut toimiva ja käyttäjäystävällinen sovellusprototyyppi, joka hakee käyttäjän syöttämän Faceit-pelaajan profiilin, otteluhistorian ja keskeiset tilastot luotettavasti yhden haun perusteella ja esittää ne selkeästi yhdessä näkymässä, täyttäen sille asetetut tavoitteet.