Modernit verkkosivut Firebase-tietokantapalvelulla

Abstract

Insinöörityön tarkoituksena oli luoda modernit ja suorituskyvyltään kevyet verkkosivut tekemällä käyttöliittymä React-ohjelman ja tiedonsiirto Firebase-palvelun avulla. Keskiössä oli noudattaa olio-ohjelmoinnin periaatteita verkkoympäristössä ja toteuttaa tähän pohjautuen SPA-malli, jossa sivut visualisoidaan yhden HTML-tiedoston kautta. Sivusto tehtiin Steam-jakeluun tulevaa Hunters of Hubertus -tietokonepeliä varten.

Pääohjelmointikielenä oli JavaScript ja sen tukena HTML-merkintäkieli ja CSS-tyylittelykieli. Näillä kielillä rakennetaan funktionaalisuutta, ulkoasuelementtejä ja visuaalista määrittelyä nykyaikaisten vaatimusten verkkosivuihin. Ison osan muodostavat myös React-ohjelman ladattavat laajennuskirjastot, joiden implementointia voi itse muokata aiemmin mainituilla kielillä. Lisäkirjastoja on saatavilla Node Package Managerin välityksellä lukemattomia, ja monet niistä ovat pitkälle standardoituja ja kehitettyjä.

Haastavinta oli alustaa tarvittavat asetukset tiedonsiirtoon palvelimelle, mutta Firebasen hyvä dokumentaatio antoi tarkat ohjeet kaikkiin vaadittaviin toimenpiteisiin muun muassa autentikointisäännöissä ja rajapintansa sisäänrakennettujen funktioiden käyttöönotossa.

SPA-malli toteutui onnistuneesti Reactin tehokkaan virtuaalisen DOM-puurakennemallin ansiosta, joka auttaa ohittamaan päivittämättömiä haaroja ja säästää näin suorituskykyä, ja helposti lähestyttävän komponenttien rakentamisen. Firebase oli optimaalinen valinta niin käyttäjäystävällisyyden kuin edistyneen React-rajapintansa ansiosta.

Lopputuloksena syntyi tekninen verkkosivusto, josta löytyy yleiset toiminnot ja jonka osia voi päivittää helposti erityisesti Reactin komponenttipainotteisuuden ansiosta. Toimiva runko mahdollistaa projektin uusiokäytön, kun ohjelmointirivejä on käytännöllistä optimoida eristetysti rikkomatta kokonaisuutta ja uusia komponentteja on nopea rakentaa vanhojen pohjalta unohtamatta kattavaa lisäkirjastoa.

The aim of this thesis was to create modern and performance-clever webpages by doing the interface with React-software and data transfer handling with Firebase-service. At the center was to follow principles of object-oriented programming in the web environment and based on this to implement a SPA-model which visualizes pages from a single HTML document. The site was made for Hunters of Hubertus-PC-game which will be Steam-published.

The main programming language was JavaScript supported with HTML-markup language and CSS-styling language. With these languages the functionality, layout elements and visual defining could be built to modern standard pages. Big part also is React's extension libraries which can be modified with abovesaid languages. There are numerous extensions available through Node Package Manager and many of them are well standardized and developed.

The most challenging task was to initialize needed settings for data transfer to the server, but Firebase's good documentation gave instructions to all required actions including authentication rules and implementation of API's build-in functions.

SPA-model was successfully created due to React's powerful virtual DOM-tree model, which helped to pass the nodes not needing updating and so increased the performance, and user friendly and advanced interface.

The outcome was a technical web page having usual features and easily updated parts especially due to React's component-minded approach. Well-made frame makes it possible to reuse the project when code lines can be optimized with isolation without breaking the entire program and new components are build fast using the existing ones and not to mention add-on libraries.