Reaaliaikainen tulosjärjestelmä äänestyssovelluksessa

Abstract

Opinnäytetyössä tehtiin tanssikilpailuissa käytettävään äänestyssovellukseen toiminnallisuus, jolla voidaan esittää ääntenlaskun tilanne reaaliaikaisesti. Työn tavoite oli tuoda lisää viihdearvoa toimeksiantajan, Groove Connection Oy:n, järjestämien tanssikilpailujen osallistujille ja osallistaa yleisöä paremmin esitysten katsomiseen ja parien kannustamiseen. Sovellusta pyrittiin kehittämään siten, että se palvelisi tapahtumissa paremmin ja saisi tunnettuutta.

Opinnäytetyön tarkoituksena oli luoda olemassa olevaan äänestyssovellukseen ominaisuus, joka laskee annetut äänet ja esittää ne reaaliaikaisesti, kun äänestys on vielä käynnissä. Tämä toteutettiin hyödyntämällä Googlen Firebase-pilvipalvelun Cloud Firestore-tietokantaa, joka mahdollistaa reaaliaikaisen kyselyn. Reactin eri ominaisuudet mahdollistivat sovellukseen lähetetyn datan esittämisen päivittämättä koko komponenttia, joka olisi hidastanut sovellusta.

Opinnäytetyön tuloksena toteutettiin toimeksiantajan pyytämä reaaliaikaisuus, ja samalla helpotettiin sovelluksen ylläpitoa siirtämällä backendin toiminnallisuudet Firebaseen. Reaaliaikainen äänten päivitys sovellukseen toteutettiin hyödyntämällä Firestoren reaaliaikaista kyselyä eli onSnapshot-toimintoa. Reaaliaikaisen kyselyn avulla sovelluksen ei tarvitse kysellä palvelimelta tietyin väliajoin, onko tietokantaan tullut muutoksia, vaan Firestore palauttaa tietoja aina muutosten ilmetessä.

As a result of this thesis, a real-time results system for an existing voting application was created. This functionality allows dance competition participants and audience to follow voting results in real time while the voting is happening. The goal of this thesis was to create more entertainment value for dance competitions, organized by the client Groove Connections Oy, and involve the audience better in the competitions and cheering on the dancing couples.

The thesis’ purpose was to create the additional functionality to an existing voting application that counts the votes and displays them in real time while the voting is ongoing. This was implemented using Google Firebase cloud services Cloud Firestore-database and its real-time queries. With real-time query, or on Snap-shot-functionality, the application does not have to poll backend repeatedly, but Firestore sends the changed data every time the data changes. The features of React made fast updates to frontend possible by updating only the changed data, not the whole component.

The real-time functionality was created successfully and in addition to client's requests, the applications backend was moved to Google Firebase, which made the application easier to maintain.