Tilanhallinta moderneissa verkkosovelluksissa

Abstract

Tässä opinnäytetyössä kehitetään toimeksiantajan sähkökäyttöisten linja-autojen latauspisteiden hallinnointisovellukselle tehokas tilanhallintajärjestelmä sekä tutkitaan modernien verkkosovellusten tilanhallinnan osa-alueita.

Reaktiivinen ohjelmointi on keskeinen käsite sovellusten tilanhallinnassa. Reaktiivisen ohjelmoinnin periaattein kehitetyt tilanhallintakirjastot suorittavat ja hallinnoivat muutoksia sovelluksessa reaaliaikaisesti ja tehokkaasti. JavaScript-pohjaisten ohjelmistojen reaktiivisen ohjelmoinnin mahdollistava kirjasto on RxJS, josta on jatkokehitetty FCMS-sovelluksessa käytettävä Akita-tilanhallintakirjasto. Akita hallitsee sovelluksissa tilaa käyttämällä tietovarastoja ja niitä muokkaavia kutsupalveluita sekä kyselymetodeja, jotka noutavat tietoa tietovarastosta.

Fleet Charging Management System eli FCMS on sähköisten linja-autojen lataamispisteiden hallinnointiin ja lataamiseen kehitetty sovellus. Sovelluksessa käyttäjälle tarjotaan varikon hallinnointinäkymä päänäkymänä sekä satelliittinäkymä, jossa on myös suodattamistoimintoja. Molemmat näkymät näyttävät varikolla olevat latauspisteet ja niissä olevat latauslaitteet.

FCMS-sovellus hyödyntää tilanhallinnassaan Akitan lisäksi myös selaimen ja palvelimen välisen reaaliaikaisen kommunikoinnin sallivaa WebSockets-teknologiaa. WebSockets on suosittu teknologia muun muassa pikaviestinpalveluissa ja verkkopeleissä. Sovellus vaatii käyttäjältä sisäänkirjautumisen, joka toimii kolmannen osapuolen (Auth0) rajapinnan kautta. Sovellus on kehitetty TypeScriptiä käyttävällä Angular2+-ohjelmistokehyksellä. TypeScript on verkkosovelluksissa suosittu, JavaScriptiksi suoraan kääntyvä ohjelmointikieli, joka tarjoaa vahvan tyypittämisen tuen.

Työssä kehitettiin Akitaa ja WebSocketsia käyttäen työn toimeksiantajan sovellukselle tehokkaasti toimiva tilanhallinta. Sovelluksen kehityksen aikana keskityttiin ohjelmiston kattavaan dokumentointiin, hyvän ohjelmoinnin periaatteita noudattavan koodin tuottamiseen ja sovelluksen luotettavan toiminnan takaamiseen.

The subject of this thesis was to develop an efficient state management solution to the client’s web application which manages electric bus charging stations and to research different areas of state management in modern web applications.

Reactive programming is a central concept in state management software. State management libraries that have been developed with reactive programming principles can manage the application’s state changes efficiently and in real-time. RxJS is a library that allows reactive programming in JavaScript-based applications. Akita state management library, which is used in FCMS-application, has been developed on top of RxJS. Akita manages state by using data stores, services that call changes to them, and query methods that fetch information from the stores.

Fleet Charging Management System, or FCMS, is an application developed to manage electrical buses charging stations and their chargers. The app provides two main views to the user, the main view which shows a location’s charging stations and its chargers, and a satellite view that shows chargers and filtering functionality.

FCMS uses the Akita library and WebSockets technology in its state management. WebSockets opens a real-time, effective, bidirectional interactive communication session between the user’s browser and a server. WebSockets is a popular technology also used in chat applications and online games. FCMS is a closed application that requires the user to log in. The login functionality works through a third-party interface provided by Auth0. The application is developed with a TypeScript framework called Angular. TypeScript is a programming language that builds on JavaScript, offers strong typing functionality, and is widely used in web applications.

The application’s state management, developed with Akita and WebSockets, was found to be effective. During the app’s development, the focus was on extensive documentation of the software, producing code that is clean and following the principles of good programming and to ensure that the app functions in a reliable way.