Reaaliaikaisen tulospalvelun hyödyntäminen amerikkalaisen jalkapallon ottelulähetyksissä

Abstract

Suomessa amerikkalaisen jalkapallon lajiliitto SAJL edellyttää, että pelin aikana tilanne ja tulokset kirjataan liiton viralliseen järjestelmään sekä tulospalveluun. Otteluista tuotetaan videotallenne, ja osa peleistä striimataan suorana. Striimien seuraaminen on kuitenkin haastavaa ilman reaaliaikaista ottelugrafiikkaa, sillä katsoja ei välttämättä tiedä pistetilannetta, neljännestä tai hyökkäysyritysten määrää Työn tavoitteena oli kehittää pienimuotoinen, helposti integroitava reaaliaikainen grafiikkatyökalu, joka parantaa striimien seurattavuutta ja tuo lähetyksiin ammattimaisemman ilmeen. Kehitysprosessi sisälsi grafiikan rakenteen määrittelyn, mock-datan hyödyntämisen sekä erillisen rajapinnan integroinnin, jolla voitiin todistaa, että grafiikka toimii myös oikean datan kanssa. Toteutus rakennettiin Next.js-kehyksen avulla käyttäen Tailwind CSS -kirjastoa visuaaliseen toteutukseen. Datan päivitys toteutettiin SWR-kirjaston avulla, joka mahdollisti lähes reaaliaikaisen tiedon päivittymisen ilman WebSocket-toteutusta. Toteutuksessa panostettiin helppokäyttöisyyteen ja siihen, että grafiikkaa voidaan hallita ja päivittää striimin aikana erillisen käyttöliittymän kautta. Tuloksena syntyi toimiva grafiikkaratkaisu, joka ositti, että reaaliaikainen ottelugrafiikka voidaan toteuttaa helposti myös web-teknologioilla ilman erillisiä järjestelmiä. Kehitetty ratkaisu parantaa amerikkalaisen jalkapallon striimattujen otteluiden informatiivisuutta sekä loi pohjan jatkokehitykselle. Johtopäätöksenä todettiin, että web-teknologioihin perustuva grafiikka ratkaisu tarjoaa kustannustehokkaan ja laajennettavan tavan toteuttaa reaaliaikaisia grafiikoita esimerkiksi urheilulähetyksiin.