Razvojaplikacijezavodenjeinsojenjetekemˇsportnegaplezanja VidˇCufar

(1)

Univerza v Ljubljani

Fakulteta za raˇ cunalniˇ stvo in informatiko

Vid ˇ Cufar

Razvoj aplikacije za vodenje in sojenje tekem ˇ sportnega plezanja

DIPLOMSKO DELO

VISOKOˇSOLSKI STROKOVNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE

RA ˇCUNALNIˇSTVO IN INFORMATIKA

Mentor : doc. dr. Jure ˇ Zabkar

Ljubljana, 2021

(2)

tatov diplomske naloge je potrebno pisno privoljenje avtorja, fakultete ter mentorja.

Besedilo je oblikovano z urejevalnikom besedil L^ATEX.

(3)

Kandidat: Vid ˇCufar

Naslov: Razvoj aplikacije za vodenje in sojenje tekem ˇsportnega plezanja Vrsta naloge: Diplomska naloga na visokoˇsolskem programu prve stopnje Raˇcunalniˇstvo in informatika

Mentor: doc. dr. Jure ˇZabkar

Opis:

Sojenje tekem ˇsportnega plezanja je tehnoloˇsko ˇse precej nerazvito; obiˇcajno se na tekmovanjih na lokalni ravni sodniˇske ocene vnaˇsajo v Excelove pregle- dnice, veliko je kopiranja in prepisovanja podatkov. V sklopu diplomskega dela razvijte zaledni in ˇcelni del spletne aplikacije za podporo vodenju in sojenju tekem ˇsportnega plezanja.

Title: Development of an application for conducting and scoring sport climbing competitions

Description:

Scoring in sport climbing competitions is technologically obsolete; in local competitions, the judges usually use MS Excel spreadsheets, which demand lots of copy-pasting of data. In your diploma thesis, develop a backend and a frontend of a web application for conducting and scoring sport climbing competitions.

(4)

(5)

Za pomoˇc in podporo pri ˇstudiju bi se rad zahvalil druˇzini.

Posebna zahvala za usmerjanje in pomoˇc pri diplomskem delu gre mentorju doc. dr. Juretu ˇZabkarju.

(6)

(7)

Kazalo

Povzetek Abstract

1 Uvod 1

1.1 Analiza obstojeˇcih reˇsitev . . . 2

1.2 Motivacija . . . 2

2 Uporabljene tehnologije 5 2.1 TypeScript . . . 5

2.2 React . . . 6

2.3 GraphQL . . . 9

2.4 Apollo . . . 9

2.5 Prisma . . . 10

2.6 PostgreSQL . . . 11

3 Zaledni sistemi 13 3.1 Podatkovni model in hranjenje podatkov . . . 13

3.2 Aplikacijski programski vmesnik . . . 16

4 Spletna aplikacija 27 4.1 Uporabniˇski vmesnik . . . 27

4.2 Komunikacija in pridobivanje podatkov iz zalednih sistemov . 28 4.3 Overjanje in nadzor uporabnikov . . . 30

4.4 Opis strukture in delovanje spletne aplikacije . . . 33

(8)

5.2 Testiranje uporabniˇskega vmesnika s pomoˇcjo sledenja pogledu 42

6 Zakljuˇcek 47

6.1 Nadaljnje delo . . . 48

Priloge 49

Literatura 51

(9)

Seznam uporabljenih kratic

kratica angleˇsko slovensko API Application Programming In-

terface

Aplikacijski programski vmesnik

JSON JavaScript Object Notation Tekstovna datoteka s strukturo JavaScript objekta

XML Extensible Markup Language Razˇsirljivi oznaˇcevalni jezik URL Uniform Resource Locator Spletni naslov

HTML HyperText Markup Language Jezik za oznaˇcevanje nadbese- dila

CSS Cascading Style Sheets Kaskadne stilske podloge DOM Document Object Model Dokumentno objektni model JSX JavaScript and XML JavaScript in XML

HTTP Hypertext Transfer Protocol Protokol za prenos hiperteksta JWT JSON Web Token JSON spletni ˇzeton

SPA Single-page application Eno-stranska aplikacijan MPA Multi-page application Veˇc-stranska aplikacijan ORM Object–relational mapping Objektno-relacijsko mapiranje

(10)

(11)

Povzetek

Naslov: Razvoj aplikacije za vodenje in sojenje tekem ˇsportnega plezanja Avtor: Vid ˇCufar

ˇSportno plezanje iz leta v leto postaja bolj poznan in priljubljen ˇsport. Na podroˇcju plezalnih tekmovanj so uporabljene tehnologije in procesi ˇse teh- noloˇsko zastareli ter potrebni modernizacije. V diplomskem delu predstavimo razvoj spletne aplikacije za vodenje in sojenje tekem ˇsportnega plezanja. Spletna aplikacija in streˇznik sta bila razvita v programskem jeziku TypeScript in modernih tehnologijah, kot so React, GraphQL, Prisma in podatkovno bazo PostgreSQL. Diplomsko delo opisuje proces naˇcrtovanja in razvoja zalednih (angl. backend) in ˇcelnih (angl. frontend) sistemov ter podatkovne baze. Predstavlja uporabljene tehnologije, kjer smo se osredotoˇcili na njihove prednosti in slabosti ter na teˇzave na katere smo naleteli med samim razvojem. Zakljuˇcimo s primerjavo razvite aplikacije s trenutnimi reˇsitvami ter analizo ustreznosti in uˇcinkovitosti na simuliranem tekmovanju.

Kljuˇcne besede: spletna aplikacija, ˇsportno plezanje, TypeScript, React, GraphQL, Apollo, Prisma, PostgreSQL.

(12)

(13)

Abstract

Title: Development of an application for conducting and scoring sport climbing competitions

Author: Vid ˇCufar

Sport climbing is becoming a more famous and popular sport from year to year. In the field of climbing competitions, the technologies and processes used are still technologically obsolete and in need of modernization. In my diploma thesis I present the development of a web application for conducting and judging sport climbing competitions. The web application and server were developed in the TypeScript programming language and modern technologies such as React, GraphQL, Prisma and PostgreSQL database. The diploma thesis describes the process of planning and development of backend, frontend systems and databases. It presents the technologies used, where I focused on their strengths and weaknesses and the problems I encountered during the development itself. I conclude with a comparison of the developed application with current solutions and an analysis of suitability and efficiency in a simulated competition.

Keywords: web application, sport climbing, TypeScript, React, GraphQL, Apollo, Prisma, PostgreSQL.

(14)

(15)

Poglavje 1 Uvod

Spletne aplikacije in moˇznost dostopa do podatkov na vsakem koraku se nam dandanes zdijo samoumevne. ˇSportno plezanje in tekmovanja postajajo vedno bolj popularna, zato je tudi na tem podroˇcju potrebno slediti novim trendom in modernizirati obstojeˇce reˇsitve.

Poznamo tri glavne discipline ˇsportno plezalnih tekmovanj: teˇzavnost, hitrost in balvani. Pri teˇzavnostnem plezanju je cilj tekmovalca doseˇci ˇcimveˇcjo viˇsino na plezalni smeri. Rezultati se doloˇcijo na podlagi doseˇzene viˇsine, v primeru izenaˇcenih rezultatov pa se upoˇsteva ˇcas, ki ga je tekmovalec porabil na steni [24]. Hitrostno plezanje je disciplina pri kateri je hitrost edini de- javnik. Plezalna smer je standardizirana in enaka na vseh tekmovanjih. ˇCas plezanja se doloˇci z mehansko-elektriˇcnim merjenjem ˇcasa, ki se zaˇcne, ko tekmovalec dvigne nogo s tal in zakljuˇci s pritiskom na stikalo na vrhu smeri [25]. Balvansko plezanje sestoji iz plezanja po krajˇsih smereh, brez varovanja in vrvi. Od ostalih disciplin se razlikuje po tem, da lahko tekmovalec veˇckrat poskusi smer. Rezultat vsakega tekmovalca se doloˇci glede na skupno ˇstevilo konˇcanih smeri in ˇstevilo potrebnih poskusov [23].

Organizacija tekme in vodenje rezultatov je lahko velik zalogaj, predvsem ˇce se med tem ne posluˇzujemo modernih orodij. Cilj diplomskega dela je razviti spletno aplikacijo, ki bo organizatorjem olajˇsala delo in zmanjˇsala moˇznosti za napake v podatkih, uporabnikom oziroma gledalcem pa omogoˇcila

1

(16)

uˇcinkovit pregled nad podatki.

1.1 Analiza obstojeˇ cih reˇ sitev

Na lokalnih tekmovanjih se vodenje prijav tekmovalcev in rezultatov ureja v preglednicah programa Excel. To je sicer boljˇsa reˇsitev kot hranjenje podatkov na papirju, a ima precej pomanjkljivosti in zahteva veliko roˇcnega dela ter kopiranja in prepisovanja podatkov. Najveˇcja pomanjkljivost takih sistemov je beleˇzenje in priprava rezultatov, saj se ti zberejo in vpiˇsejo ˇsele, ko s plezanjem zakljuˇcijo vsi tekmovalci kategorije.

Svetovna in mednarodna tekmovanja ˇze nekaj let uporabljajo sisteme, ki omogoˇcajo vodenje dogodkov in tekmovanj z uporabo namensko razvitih aplikacij. Velika prednost teh sistemov je spremljanje rezultatov v ˇzivo (pred koncem tekmovanja), kar omogoˇca pregled rezultatov uporabnikom, ki se dogodka ne morejo udeleˇziti. Ker so podatki o tekmovanjih in tekmovalcih shranjeni v enotni podatkovni bazi, ti sistemi omogoˇcajo tudi prikaze sku- pnih rezultatov in raznih statistik o tekmovalcih. Pomanjkljivost omenjenih sistemov je njihova zaprtost, saj so bili namensko razviti za veˇcje organizacije in poslediˇcno niso na voljo za uporabno na lokalnih in drˇzavnih tekmovanjih.

1.2 Motivacija

Kot tekmovalni ˇsportni plezalec sem pri izvedbi tekmovanj in dogodkov, opa- zil pomanjkanje digitalizacije. Sojenje tekmovalcev in beleˇzenje sprotnih rezultatov se zapisuje na papir oziroma v programska orodja, kot na primer Excel. Trenuten postopek je problematiˇcen predvsem zato, ker ni mogoˇce zanesljivo prikazovati rezultatov v ˇzivo. Prav tako je verjetnost za napake v podatkih veˇcja, ker se ti veˇckrat roˇcno prepisujejo. S spletno aplikacijo lahko te probleme odpravimo, poleg tega pa organizatorjem, sodnikom in uporabnikom ponudimo boljˇso izkuˇsnjo.

V okviru diplomskega dela, so v 2. poglavju predstavljene tehnologije,

(17)

Diplomska naloga 3 ki so bile uporabljene pri razvoju spletne aplikacije in streˇznika. Tretje poglavje opisuje arhitekturo, naˇcrtovanje in proces razvoja zalednih sistemov.

V 4. poglavju predstavimo razvoj uporabniˇskega vmesnika, povezavo ˇcelnega dela z zalednimi sistemi in strukturo spletne aplikacije. Sledi poglavje, kjer opiˇsemo rezultate testiranja spletne aplikacije na simuliranem tekmovanju.

Predstavimo tudi testiranje uporabniˇske izkuˇsnje in vmesnika s pomoˇcjo sledenja pogledu (angl. eye tracking). V zadnjem poglavju je povzetek in ugotovitve diplomskega dela.

(18)

(19)

Poglavje 2

Uporabljene tehnologije

2.1 TypeScript

TypeScript je odprtokodni programski jezik, ki nadgrajuje JavaScript, eno najpogosteje uporabljenih orodij za razvoj programske opreme [21]. Je razˇsiritev JavaScripta in v programski jezik dodaja neobvezno statiˇcno tipiziranje. Tipi razvijalcu omogoˇcajo jasno definicijo objektov, boljˇso dokumentacijo programske kode in zaznavanje napak ˇze med samim razvojem. To je predvsem pomembno pri razvoju obseˇznih aplikacij, kjer brez tipizacije hitro pride do napak, ki jih je teˇzko analizirati. Prav tako omogoˇca hiter razvoj in manj preglavic pri preoblikovanju (angl. refactoring) programske kode. Program- sko kodo TypeScript je potrebno prevesti s pomoˇcjo prevajalnika TypeScript ali Babel v programski jezik JavaScript [4].

Prikaz prednosti TypeScripta pred JavaScriptom:

Koda 2.1: Seˇstevanje ˇstevila in seznama v JavaScriptu

1 420 + [] // Vrne znakovni niz: "420"

5

(20)

Koda 2.2: Seˇstevanje ˇstevila in seznama v TypeScriptu

1 420 + [] // Vrne napako: "Operator '+' cannot be applied to types 'number' and 'never[]'."

,→

Koda 2.3: Klic funkcije z napaˇcnim tipom argumenta v JavaScriptu

1 function divideByTwo(input) {

2 return input / 2;

3 }

4

5 divideByTwo('a'); // Vrne NaN

Koda 2.4: Klic funkcije z napaˇcnim tipom argumenta v TypeScriptu

1 function divideByTwo(input: number) {

2 return input / 2;

3 }

4

5 divideByTwo('a'); // Vrne napako: "Argument of type 'string' is not assignable to parameter of type 'number'."

,→

Zgornja dva primera demonstrirata moˇc tipov, ki jih ponuja programski jezik TypeScript v primerjavi z JavaScriptom, ki v ozadju tipe samodejno preoblikuje, razvijalcu pa ob tem ne vrne nobene napake. V nekaterih primerih lahko pride tudi nepriˇcakovanega rezultata.

2.2 React

V zadnij letih so SPA postale vse bolj priljubljene v sodobnem spletnem razvoju. Za razliko od MPA omogoˇcajo hitro in nemoteˇce spreminjanje spletne vsebine, brez ponovnega nalaganja oziroma osveˇzevanja spletne strani [9].

(21)

Diplomska naloga 7 Zasluge za hiter razvoj gredo predvsem razliˇcnim knjiˇznicam in program- skim ogrodjem (angl. framework) napisanih v JavaScriptu. Ena od knjiˇznic je React, ki je odprtokodna knjiˇznica razvita s strani podjetja Facebook.

React je bil razvit za reˇsevanje problemov, povezanih z razvojem zapletenih uporabniˇskih vmesnikov.

2.2.1 DOM in virtualni DOM

Celotna struktura spletne strani je predstavljena z uporabo DOMa, ki ga sestavljajo HTML elementi, s katerimi je mogoˇce upravljati na razliˇcne naˇcine:

spreminjanje, brisanje in dodajane novih elementov. Za interakcijo z DO- Mom se uporablja programski jezik JavaScript. Pri manipulaciji velikega ˇstevila HTML elementov pa lahko pride do poslabˇsanja zmogljivosti, kar ne- gativno vpliva na uporabniˇsko izkuˇsnjo.

Koncept virtualnega DOMa je bil ustvarjen prav z razlogom reˇsevanja problema zmogljivosti. Znaˇcilnost knjiˇznice React je, da upravlja z virtual- nim DOMom, ki je nekoliko okrnjena kopija obiˇcajnega DOMa, knjiˇznici pa omogoˇca hitrejˇso in bolj efektivno manipulacijo HTML elementov.

2.2.2 JSX

JSX je razˇsiritev programskega jezika JavaScript, ki predstavlja naˇcin opiso- vanja elementov s kombinacijo HTML oznak in JavaScripta [17]. JSX izrazi so prevedeni v JavaScript, kar razvijalcu omogoˇca uporabo teh v zankah in spremenljivkah.

Koda 2.5: Primer definicije JSX elementa

1 const name = 'Janez Novak';

2 const element = <h1>Pozdravljen, {name}!</h1>;

(22)

2.2.3 Prikaz elementov

Najmanjˇsi gradniki React aplikacije so elementi. Definicija najpreprostejˇsega elementa je prikazana v primeru 2.5. Elementi v Reactu so obiˇcajni Java- Script objekti, kar omogoˇca hitro in preprosto manipulacijo. React za prikaz elementov uporablja metodo ReactDOM.render(). Ta sprejme tri parame- tre: element ki ga ˇzelimo prikazati, DOM element, kateremu bo dodan prvi argument in neobvezno funkcijo povratnega klica (angl. callback function) [17].

Koda 2.6: Primer prikaza preprostega elementa

1 ReactDOM.render(

2 element,

3 document.getElementById('root')

4 );

2.2.4 Komponente

Komponente so v Reactu namenjene zdruˇzevanju in prikazu veˇc elementov hkrati. Razvijalcu omogoˇcajo, da komponento uporabi na veˇc naˇcinov in s tem zmanjˇsa koliˇcino programske kode. Komponente je tako tudi laˇzje vzdrˇzevati in nadgrajevati. Podobne so funkcijam JavaScripta, saj stanje shranjujejo preko lastnosti (angl. props), vraˇcajo pa React elemente, kateri se nato prikaˇzejo na spletni strani.

2.2.5 Stanje

Vsaka React komponenta ima lahko stanje. To je objekt, ki hrani lokalno stanje komponente in ji daje interaktivnost. Za razliko od lastnosti (angl.

props), ki predstavljajo vhodne podatke komponente, stanje hrani podatke ustvarjene neposredno v komponenti [18].

(23)

Diplomska naloga 9

2.3 GraphQL

GraphQL je poizvedbni jezik za razvoj APIjev. Ni vezan na nobeno posebno bazo podatkov ali mehanizem za shranjevanje, temveˇc je podprt z obstojeˇco programsko kodo in podatki [6]. Definicija GraphQL objektov opredeljuje njihove tipe, ter tipe polj oziroma lastnosti, ki jih hranijo.

Ob izdaji GraphQL specifikacije, so jo nekateri postavili kot nadomestek REST APIjev. Reˇsuje obiˇcajne teˇzave arhitekture REST, kot so pretirano pridobivanje (angl. over-fetching), upravljanje konˇcnih toˇck (angl. endpo- int management), doloˇcanje razliˇcic (angl. versioning) in opredelitev sheme (angl. schema definition).

2.4 Apollo

Apollo je obseˇzna JavaScript knjiˇznica namenjena upravljanju stanja. Omgoˇca upravljanje lokalnih in oddaljenih podatkov pridobljenih iz GraphQL ser- visa. V React aplikaciji ga lahko uporabimo za pridobivanje, predpomnjenje in spreminjanje podatkov oziroma stanja aplikacije, hkrati pa nam omogoˇca reaktivne posodobitve uporabniˇskega vmesnika [2].

Nekaj lastnosti knjiˇznice Apollo:

• Deklarativno pridobivanje podatkov: Podatke pridobimo s pomoˇcjo poizvedb, brez predhodne inicializacije stanja,

• Odliˇcna izkuˇsnja za razvijalce: Zelo dobra podpora za programski jezik TypeScript in razhroˇsˇcevanje (angl. debugging) programske kode,

• Zasnovan za knjiˇznico React: Omogoˇca uporabno najnovejˇsih funkcij Reacta, kot so kljuke (angl. hooks).

(24)

2.5 Prisma

Prisma je odprtokoden ORM (angl. Object–relational mapping) nove gene- racije. Sestavljen je iz naslednjih delov:

• Odjemalec: Samodejno ustvarjen in varno oblikovalec poizvedb poizvedb za Node.js in TypeScript,

• Migracijski sistem: Orodje za migracijo sprememb modelov in podatkovne baze,

• Prisma Studio: grafiˇcni vmesnik za ogled in urejanje podatkov v vaˇsi bazi podatkov.

Odjemalec Prisma se lahko uporablja v katerikoli Node.js ali TypeScript zaledni aplikaciji, vkljuˇcno z aplikacijami brez streˇznika in mikro storitvami.

Lahko se uporablja za delo z REST, GraphQL ter gRPC APIji ali v ostalih aplikacijah, kjer je potrebna podatkovna baza [16].

Slika 2.1: Povezava Prisme z ostalimi sistemi [8]

(25)

Diplomska naloga 11

2.6 PostgreSQL

PostgreSQL je zmogljiv, odprtokodni sistem objektno-relacijskih podatkovnih baz, ki uporablja in razˇsirja programski jezik SQL v kombinaciji s ˇstevilnimi funkcijami, ki omogoˇcajo varno in uˇcinkovito shranjevanje ter manipulacijo podatkov. Zaˇcetki PostgreSQLa segajo v leto 1986 kot del projekta PO- STGRES, na Univerzi v Berkeleyju in ima veˇc kot 30 let aktivnega razvoja [14].

Moˇcan ugled si je prisluˇzil s svojo arhitekturo, zanesljivostjo, celovitostjo podatkov, robustnim naborom funkcij, razˇsirljivostjo in predanostjo odprto- kodne skupnosti. PostgreSQL deluje na vseh veˇcjih operacijskih sistemih, od leta 2001 pa je skladen tudi z ACID (angl. atomicity, consistency, isolation, durability), ki ga sestavljajo [5]:

• Atomarnost: transakcija se mora izvesti do konca ali pa v celoti za- vrniti - potrebno je opraviti vse zahtevanje spremembe ali pa nobene.

• Konsistentnost: Transakcija transforima stanje podatkovne baze iz enega veljavnega stanja v drugo veljavno stanje. Transakcija je veljavna le, ˇce upoˇsteva vse integritetne omejitve podatkovne baze. ˇCe stanje po izvedbi transakcije ni veˇc veljavno, se transakcija zavrne v celoti.

• Samostojnost/izolacija/neodvisnost: Rezultat izvedbe transakcije je drugim transakcijam prikrit, dokler se ta ne izvede do konca.

• Trajnost: Rezultati uspeˇsno izvedene transakcije so trajno shranjeni in dostopni tudi, ˇce se takoj po izvedbi transakcije sistem poruˇsi.

(26)

(27)

Poglavje 3

Zaledni sistemi

V tem poglavju je predstavljen zaledni del, ki prestavlja najobseˇznejˇsi del razvite spletne aplikacije¹. Zaledni del primarno skrbi za hranjenje ter operacije nad podatki, odjemalcu pa s pomoˇcjo GraphQL poizvedb omogoˇca prikaz le teh. Skrbi tudi za overjanje in nadzor uporabnikov in na podlagi njihovih pravic dovoljuje oziroma zavraˇca zahtevane operacije.

3.1 Podatkovni model in hranjenje podatkov

Podatki se hranijo v podatkovni bazi PostgreSQL, ki je bila primarno izbrana zaradi dobre podpore s knjiˇznico Prisma. Ta nam omogoˇca, da podatkovni model opiˇsemo v posebnem jeziku, ki je namenjen modeliranju podatkov.

Podatkovni model je shranjen v definiciji sheme iz katere se s pomoˇcjo generatorja ustvarijo ustrezne tabele, relacije in entitete v podatkovni bazi.

3.1.1 Definicija Prisma sheme

Shema je obiˇcajno definirana v datoteki schema.prisma, ki poleg podatkovnega modela vsebuje tudi konfiguracijske podatke za dostop do podatkovne baze (glej primer 3.1) in definicijo klienta za odjemalca (glej primer 3.2).

1https://github.com/cufarvid/climb-comp

13

(28)

Koda 3.1: Nastavitev podatkovne baze v Prisma shemi

1 datasource db {

2 provider = "postgresql"

3 url = env("DATABASE_URL")

4 }

Koda 3.2: Nastavitev klienta v Prisma shemi

1 generator client {

2 provider = "prisma-client-js"

3 previewFeatures = ["orderByAggregateGroup"]

4 }

Tipiziranje Prisma sheme

V kolikor ˇzelimo samodejno ustvarjene podatkovne modele ˇse dodatno tipi- zirati, potrebujemo knjiˇznico typegraphql-prisma [11], ki iz Prisma sheme generira razreˇsevalce (angl. resolvers) in podatkovne tipeTypeGraphQL [20].

Te podatkovne tipe lahko potem uporabimo za striktno tipiziranje podatkov na zalednem in ˇcelnem delu spletne aplikacije.

Koda 3.3: Nastavitev generatorja podatkovnih tipov v Prisma shemi

1 generator typegraphql {

2 provider = "typegraphql-prisma"

3 }

Definicija podatkovnega modela

Podatke opiˇsemo v posebnem programskem jeziku, ki nam omogoˇca definicijo tipov posameznih polj, njihovih privzetih vrednosti in relacij na druge modele (glej primer 3.4).

(29)

Diplomska naloga 15 Koda 3.4: Opis modela v Prisma shemi

1 model Result {

2 id Int @id @default(autoincrement())

3 createdAt DateTime @default(now())

4 updatedAt DateTime @updatedAt

5 score Int

6 competition Competition @relation(fields: [competitionId], references: [id])

,→

7 competitionId Int

8 competitor Competitor @relation(fields: [competitorId], references: [id])

,→

9 competitorId Int

10 approvedBy User @relation(fields: [approvedById], references: [id])

,→

11 approvedById Int

12 }

Migracije

Prisma vkljuˇcuje orodje za migracijo sheme podatkovne baze. Omogoˇca nam:

• Sinhronizacijo definicije podatkovnega modela Prisma sheme s podatkovno bazo,

• Ohranitev obstojeˇcih podatkov v podatkovni bazi tudi ob spremembah podatkovnega modela.

Migracijsko orodje ustvari zgodovino SQL migracijskih datotek in igra veliko vlogo pri razvoju ter postavitvi (angl. deployment) aplikacije [15].

3.1.2 Podatkovni model

V kolikor se v Prisma shemi pojavijo napake, nas migracijsko orodje (glej 3.1.1) na to opozori in migracije ne izvede. Tabele in relacije podatkovnega modela so tako samodejno ustvarjene iz modelov, ki smo jih definirali v

(30)

Prisma shemi. Slika 6.1 prikazuje vizualizacijo podatkovnega modela spletne aplikacije.

3.2 Aplikacijski programski vmesnik

Na zalednem delu ApolloServerprejema in obdeluje zahteve, ki jih prejme od odjemalca ApolloClient. Streˇznik ima informacijo o GraphQL shemi, katera opisuje dovoljene poizvedbe, tipe ter povezave med njimi, ne defi- nira pa izvora podatkov. Temu so namenjeni razreˇsevalci (angl. resolvers) oziroma razreˇsevalne funkcije.

3.2.1 Razreˇ sevalci

Tudi tukaj nam Prisma generator prihrani nekaj dela, saj nam ob vsaki migraciji (glej 3.1.1) zgenerira razreˇsevalce, ki smo jih definirali v Prisma shemi (glej. 3.1.1). Pripravi razreˇsevalce za osnovne operacije, kot so:

• query: poizvedovanje po podatkih, z moˇznostjo sortiranja in omejeva- nja ˇstevila zapisov,

• group: grupiranje,

• aggregate: zdruˇzevanje/agregacija,

• insert: dodajanje novih zapisov,

• update: posodabljenje,

• delete: brisanje.

Napredne operacije

Za bolj napredne in uˇcinkovite operacije je potrebno implementirati svoje razreˇsevalce. Uporaba knjiˇznice typegraphql-prisma nam omogoˇca, da jih implementiramo kot TypeScript razrede iz katerih nato generator pripravi

(31)

Diplomska naloga 17 ustrezne poizvedbe, mutacije in podatkovne tipe ter jih doda v definicijo sheme. Poleg tega nam knjiˇznica omogoˇca uporabo dekoratorjev (angl. de- corators), ki so posebna vrsta deklaracije, katero lahko dodamo deklaraciji razreda, metodi, lastnosti ali parametru. S pomoˇcjo dekoratorjev znatno zmanjˇsamo koliˇcino programske kode, saj z njihovo pomoˇcjo razreˇsevalce lahko deklariramo v enem samem razredu (glej primer 3.5).

Koda 3.5: Primer razreˇsevalca z uporabo dekoratorjev

1 @Resolver(() => Competitor)

2 export class CompetitorResolver {

3 @Query(() => Competitor)

4 async getCompetitorForScoring(

5 @Ctx() { prisma }: Context,

6 @Arg('data') { startNumber, competitionId }:

FindStartListInput,

,→

7 ): Promise<Competitor> {

8 const startList = prisma.startList.findFirst({

9 where: { startNumber: startNumber, competitionId:

competitionId },

,→

10 });

11

12 const competitor = await startList.competitor();

13

14 if (!competitor)

15 throw new ApolloError(

16 `No competitor found for starting number

£{startNumber}.`,

,→

17 );

18

19 return competitor;

20 }

21 }

Definicija naprednega razreˇsevalca

GraphQL shemo z razreˇsevalci po meri pripravimo s pomoˇcjo metodebuildSchema, ki je del knjiˇznicetype-graphql. Spodnji primer 3.6 prikazuje definicijo na-

(32)

prednega razreˇsevalca prikazanega v primeru 3.5.

Koda 3.6: Definicija naprednega razreˇsevalca

1 const schema = await tq.buildSchema({

2 resolvers: [

3 ...resolvers,

4 CompetitorResolver,

5 ],

6 emitSchemaFile: path.resolve(__dirname, 'schema.gql'),

7 });

3.2.2 Metode za odjemalca

Odjemalec s streˇznikom komunicira s pomoˇcjo GraphQL poizvedb in mutacij. Streˇznik zahtevo obdela in odjemalcu vrne podatke, ki jih je ta zahteval.

Velika prednost uporabe orodja GraphQL je ta, da se odjemalec lahko odloˇci katere podatke ˇzeli pridobiti. Vse razpoloˇzljive operacije so definirane v GraphQL shemi, ki je poznana tako streˇzniku kot tudi odjemalcu.

Slika 3.1 na levi strani prikazuje primer enostavne poizvedbe napisane v programskem jeziku GraphQL, na desni pa odgovor v JSON obliki, ki ga je vrnil streˇznik.

Iz slike 3.2 je razvidno, da so podatkovni tipi argumentov in odgovora poizvedbe jasno definirani. Poizvedbe prikazane na sliki lepo prikaˇzejo avtomatsko ustvarjene poizvedbe ter podatkovne tipe, opisane v toˇckah 3.1.1 in 3.2.1.

(33)

Diplomska naloga 19

Slika 3.1: GraphQL poizvedba in odgovor streˇznika

(34)

Slika 3.2: GraphQL poizvedbe definirane v shemi

(35)

Diplomska naloga 21

3.2.3 Sojenje in izraˇ cun rezultatov tekmovalca

Odjemalcu je na voljo veˇc kot 100 poizvedb in mutacij, s katerimi lahko pri- dobiva in manipulira podatke ter proˇzi razliˇcne sinhrone in asinhrone operacije. Zaradi obseˇznosti zalednega dela, bom v tem odstavku predstavil kljuˇcni funkcionalnosti spletne aplikacije - sojenje in izraˇcun rezultatov tekmovalca.

Sojenje

Pred zaˇcetkom tekmovanja je vsakemu tekmovalcu dodeljena ˇstartna ˇstevilka, ki ga enoliˇcno identificira. Ta se v tekoˇcem tekmovanju uporablja za vnos rezultatov s strani sodnika in identifikacijo tekmovalca v zalednih sistemih.

Spletna aplikacija podpira sojenje treh disciplin ˇsportnega plezanja, ki se v smislu doseˇzenih ciljev med seboj precej razlikujejo (glej 1).

Sojenje je tako razdeljeno na tri mutacije:

• scoreBoulder: balvansko plezanje,

• scoreLead: teˇzavnostno plezanje,

• scoreSpeed: hitrostno plezanje.

Vsem je skupno, da dobijo podatek o uporabniku aplikacije - v tem primeru je to sodnik, ki mora imeti pravice za sojenje na tekoˇcem tekmovanju in izbrani smeri. Mutacije kot argumente dobijo tudi ˇstartno ˇstevilko tekmovalca, ˇstevilko smeri sojenja, ˇcas plezanja ter rezultat, ki ga je tekmovalec dosegel (glej primer 3.7). Omogoˇceno je tudi opcijsko dodajanje komentarja.

Koda 3.7: Definicija vhodnih parametrov mutacije

1 @InputType()

2 export class ScoreInput {

3 @Field()

4 competitorId: number;

5

6 @Field()

(36)

7 routeId: number;

8

9 @Field({ nullable: true })

10 score: string;

11

13 time: number;

14

16 comment?: string;

17 }

Izhod mutacije pa vsebuje sporoˇcilo o uspeˇsnosti operacije in morebitne napake, do katerih je priˇslo med obdelavo rezultata (glej primer 3.8). Ti podatki so po vnosu na uporabniˇskem vmesniku, prikazani uporabniku aplikacije - sodniku.

Koda 3.8: Definicija izhodnih parametrov mutacije

1 @ObjectType()

2 export class ScoreOutput {

3 @Field()

4 message: string;

5

7 warning?: string;

8 }

Spodnji primer 3.9 prikazuje mutacijo za sojenje tekem teˇzavnostnega plezanja. Ker gre za operacije s podatkovno bazo, ki so asinhrone, je metodo potrebno oznaˇciti s predponoasync njen rezultat pa oviti s tipomPromise.

Uporaba predpone aync nam omogoˇca, da znotraj metode uporabimo operator await, kar pomeni, da gre za asinhron klic na katerega rezultat ˇzelimo poˇcakati [12].

Vsi podatki so pred zapisom v podatkovno bazo potrjeni (angl. validated),

(37)

Diplomska naloga 23 v primeru neuspeˇsne operacije pa se vrne ustrezno obvestilo o napaki. Upo- rabnik je obveˇsˇcen tudi v primeru, da je posodobil obstojeˇci zapis oziroma rezultat.

Koda 3.9: Mutacija za sojenje teˇzavnostnega plezanja

1 @Mutation(() => ScoreOutput)

2 async scoreLead(

3 @Ctx() { prisma, user }: Context,

4 @Arg('data') { competitorId, routeId, score, time }:

ScoreInput,

,→

5 ): Promise<ScoreOutput> {

6 if (!user) throw new ApolloError('Unauthorized', '401');

7

8 // Check if score/height is valid

9 if (!ScoreLeadRegex.test(score))

10 throw new ApolloError(`Score '£{score}' is not a valid.`);

11

12 try {

13 // Check if score already exists

14 const prevScore = await prisma.scoreLead.findFirst({

15 where: {

16 routeId: routeId,

17 competitorId: competitorId,

18 },

19 });

20

21 const scoreData = { height: score, time };

22

23 if (!prevScore) {

24 // Not scored yet, create new score

25 await prisma.scoreLead.create({

26 data: {

27 ...scoreData,

28 competitor: { connect: { id: competitorId } },

29 route: { connect: { id: routeId } },

30 },

31 });

32

33 return {

34 message: `Score '£{score}' submitted successfully.`,

35 };

(38)

36 } else {

37 // In case of repeating the same route, update existing record

,→

38 await prisma.scoreLead.update({

39 where: { id: prevScore.id },

40 data: {

41 ...scoreData,

42 },

43 });

44

45 return {

46 message: `Score '£{score}' submitted successfully.`,

47 warning: `You updated existing value of '£{prevScore.height}'.`,

,→

48 };

49 }

50 } catch (e) {

51 console.error(e);

52 throw new ApolloError(`Error submitting score '£{score}'.`);

,→

53 }

54 }

Izraˇcun rezultatov

Implementacija izraˇcuna sledi pravilom mednarodne zveze za ˇsportno plezanje - IFSC, ki so javno objavljena in dostopna na njihovi spletni strani [7]. Nekateri deli so prirejeni za zahteve lokalnih tekmovanj v Sloveniji in po smernicah komisije za ˇsportno plezanje - KˇSP [10].

Rezultati so razdeljeni na dva tipa:

• liveResults: rezultati v ˇzivo, ki se izraˇcunajo na odjemalˇcevo zahtevo,

• finalResults: konˇcni rezultati, ki so potrjeni s strani glavnega sodnika in so objavljeni po zakljuˇcku tekmovanja.

(39)

Diplomska naloga 25 Vsi rezultati se izraˇcunavajo za podano tekmovanje in kategorijo. Spodnji primer 3.10 prikazuje poizvedbo za izraˇcun rezultatov v ˇzivo. Podatki se pogosto spreminjajo, zato jih nikamor ne zapisujemo, odjemalcu pa vrnemo najnovejˇse stanje.

V primeru konˇcnih rezultatov, so ti najprej pregledani in potrjeni s strani glavnega sodnika, nato pa zapisani v tabelo - tukaj izraˇcuni niso veˇc potrebni, saj lahko vrnemo zapisano stanje. Skupni rezultati in statistike se izraˇcunavajo iz konˇcnih rezultatov.

Koda 3.10: Poizvedba za pridobivanje rezultatov teˇzavnostnega plezanja

1 @Query(() => ResultOutput)

2 async getLeadCompResults(

3 @Ctx() { prisma }: Context,

4 @Arg('data') { competitionId, categoryId }: ResultInput,

5 ): Promise<ResultOutput> {

6 // Fetch scores & do initial ordering by height and time

7 const scores = await prisma.scoreLead.findMany({

8 where: {

9 route: { competitionId: competitionId, categoryId:

categoryId },

,→

10 },

11 include: { route: true, competitor: true },

12 orderBy: [{ height: 'desc' }, { time: 'asc' }],

13 });

14

15 if (!scores) throw new ApolloError('No competitions found');

16

17 const results = getLeadResults(scores);

18

19 return { results: results.map(resultRankMapper) };

20 }

(40)

(41)

Poglavje 4

Spletna aplikacija

4.1 Uporabniˇ ski vmesnik

Uporabniˇski vmesnik je bil s pomoˇcjo knjiˇznice React (glej 2.2), razvit v programskem jeziku TypeScript (glej 2.1). Za upravljanje s stanjem celotnega uporabniˇskega vmesnika je bil poleg konteksta (angl. context) - ponuja nam ga React, uporabljen tudi ApolloClient, ki je del knjiˇznice Apollo GraphQL.

Pri razvoju uporabniˇskega vmesnika smo uporabili knjiˇznico antd, ki vsebuje nabor visoko kakovostnih komponent in predstavitev za izgradnjo bogatih ter interaktivnih uporabniˇskih vmesnikov [1]. Velika prednost te knjiˇznice je tudi to, da je napisana v TypeScriptu, podpira veˇcjeziˇcnost in prilagajanje tem.

Celoten razvoj so zelo poenostavili avtomatsko ustvarjeni tipi iz GraphQL sheme. Za ustvarjanje tipov smo uporabili knjiˇznico graphql-codegen [19].

Ta nam z malo konfiguracije (glej primer 4.1) ustvari podatkovne tipe, ki jih lahko uporabljamo tako na zalednem, kot tudi ˇcelnem delu spletne aplikacije.

27

(42)

Koda 4.1: Primer konfiguracije knjiˇznice graphql-codegen

1 overwrite: true

2 schema: "src/schema.gql"

3 generates:

4 ../client/src/types/__generated__/index.ts:

5 plugins:

6 - "typescript"

4.2 Komunikacija in pridobivanje podatkov iz zalednih sistemov

Odjemalec s pomoˇcjo ApolloClient na sreˇznik poˇslje zahtevo s poizvedbo ali mutacijo, katero ta obdela in odjemalcu vrne odgovor. Za komunikacijo z ApolloServer je odjemalca potrebno ustrezno konfigurirati (glej primer 4.2).

Koda 4.2: Primer konfiguracije ApolloClient

1 const httpLink: ApolloLink = createHttpLink({

2 uri: 'http://localhost:4000',

3 });

4

5 const cache: InMemoryCache = new InMemoryCache();

6

7 export const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({

,→

8 link: httpLink,

9 cache: new InMemoryCache(),

10 });

Konfiguracijo klienta nato komponenti ApolloProvider podamo kot la- stnost (angl. prop). Ker ˇzelimo, da je z zalednimi sistemi mogoˇce komunici- rati iz vseh delov uporabniˇskega vmesnika, smo komponentoApolloProvider postavili na najviˇsji nivo (glej primer 4.3) React DOMa.

(43)

Diplomska naloga 29 Koda 4.3: Konfiguracija ApolloProvider

1 ReactDOM.render(

2 <React.StrictMode>

3 <ApolloProvider client={client}>

4 <BrowserRouter>

5 <App />

6 </BrowserRouter>

7 </ApolloProvider>

8 </React.StrictMode>,

9 document.getElementById('root'),

10 );

4.2.1 Poˇ siljanje poizvedb in mutacij

Kot opisano v toˇcki 3.2.2, odjemalec pripravi GraphQL poizvedbo ali mutacijo ter jo poˇslje streˇzniku v obdelavo. Vse poizvedbe, mutacije in njihovi vhodni argumenti so tipizirani, kar odjemalcu poenostavi preverjanje ustreznosti podatkov prejetih s streˇznika.

Za pisanje poizvedb GraphQL v programskem jeziku TypeScript, lahko uporabimo funkcijogql(glej primer 4.4), ki je del ogrodjaApollo. To je posebna funkcija, saj omogoˇca oznaˇcevanje znakovnih predlog (angl. tagged templates), kar pomeni, da lahko nad podanim znakovnim nizom izvede razliˇcne operacije in vrne spremenjeni niz [13].

Koda 4.4: Definicija poizvedbe za pridobivanje seznama regij

1 export const LIST_REGIONS = gql`

2 query {

3 regions(orderBy: [{ id: asc }]) {

4 id

5 name

6 }

7 }

8 `;

(44)

Pripravljene poizvedbe in mutacije lahko potem v React komponenti po- kliˇcemo z uporabo posebnih kljuk (angl. hooks) useQuery (glej primer 4.5 - 6. vrstica) oziroma useMutation. Nekateri podatki se prikazujejo v veˇc komponentah, na razliˇcne naˇcine, zato je v teh primerih smiselno pripraviti kljuko (angl. hook) po meri (glej primer 4.5). Tako lahko znatno zmanjˇsamo velikost in kompleksnost komponent, saj logiko za komunikacijo s streˇznikom prestavimo v posebno funkcijo.

Koda 4.5: Definicija kljuge (angl. hook) za pridobivanje seznama regij

1 interface UseRegions extends QueryHookBase {

2 regions: Region[] | undefined;

3 }

4

5 export const useRegions = (): UseRegions => {

6 const { data, error, loading } = useQuery<Query>(LIST_REGIONS);

,→

7

8 return { regions: data?.regions, error, loading };

9 };

4.3 Overjanje in nadzor uporabnikov

Ker gre za beleˇzenje rezultatov na tekmovanju, je integriteta podatkov kljuˇcnega pomena. Uporabniki spletne aplikacije so razdeljeni na dve glavni skupini - javni in zasebni, slednja pa ˇse na veˇc podskupin. Pravice za izvajanje operacij se ob vsaki poslani poizvedbi ali mutaciji preverijo na streˇzniku ter odjemalcu v primeru ustreznih pravic vrnejo zahtevane podatke.

Javni uporabniki, gledalci oziroma obiskovalci spletne strani imajo pravice za ogled osnovnih pogledov, kot so seznam tekem, sezon, tekmovalcev in rezultatov.

Zasebni uporabniki se zaradi razliˇcnih vlog na tekmovanju, delijo na pod-

(45)

Diplomska naloga 31 skupine:

• User: moˇznost ogleda strani, ki niso javno dostopne. Nima pravic za spreminjanje podatkov in je namenjen za uvajanje in spoznavanje s spletno aplikacijo.

• Judge: vloga za sodnike tekmovanj.

• Moderator: nadzorniki ostalih uporabnikov - lahko tudi predstavniki ˇsportnih klubov, ki urejajo tekmovalce svojega kluba.

• Administrator: skrbniki sistema.

Za overjanje uporabnikov smo uporabili JWT - JSON spletni ˇzeton. JWT je odprt standard, ki opredeljuje kompakten in samostojen naˇcin za varen prenos informacij med sistemi, v obliki JSON objekta. Te podatke je mogoˇce preveriti in jim zaupati, ker so digitalno podpisani [3]. Lahko se podpiˇse s skrivnostjo (angl. secret) ali parom javnih/zasebnih kljuˇcev z uporabo sistemov za kriptiranje.

Uporabnik po uspeˇsni prijavi, s strani streˇznika dobi JWT, ki ga enoliˇcno identificira. Tega potem z vsako naslednjo zahtevo na streˇznik, vkljuˇci v HTTP glavo, natanˇcneje v del Authorization. Na odjemalˇcevi strani se JWT hrani v lokalni shrambi (angl. local storage), v HTTP glavo pa ga ob vsaki zahtevi doda ApolloClient, za kar ga je potrebno ustrezno konfigurirati (glej primer 4.6).

Koda 4.6: Konfiguracija JWT v ApolloClient

1 const authLink: ApolloLink = setContext((_, { headers }) => {

2 const token = localStorage.getItem('token');

3 // Return the headers to the context so httpLink can read them

,→

4 return {

5 headers: {

6 ...headers,

(46)

7 authorization: token ? `Bearer £{token}` : '',

8 },

9 };

10 });

11

12 export const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({

,→

13 link: authLink.concat(httpLink),

14 cache,

15 });

Streˇznik JWT pridobi iz HTTP glave, ga s skrivnostjo dekodira in na podlagi rezultata nastavi ustreznega uporabnika (glej primer 4.7), ki je potem v kontekstu na voljo vsem razreˇsevalcem.

Koda 4.7: Overjanje JWT na streˇzniku

1 const server: ApolloServer = new ApolloServer({

2 schema,

3 context: async ({ req }): Promise<Context> => {

4 try {

5 const token =

req.headers.authorization?.replace('Bearer', '');

,→

6 if (!token) return { prisma, user: null };

7

8 const decoded = jwt.verify(token.trim(), process.env.JWT_SECRET) as {

,→

9 email: string;

10 };

11 const user: User = await prisma.user.findFirst({

12 where: { email: decoded.email },

13 });

14

15 return { prisma, user };

16 } catch (e) {

17 console.error(e);

18 return { prisma, user: null };

19 }

20 },

21 });

(47)

Diplomska naloga 33

4.4 Opis strukture in delovanje spletne apli- kacije

Spletna aplikacija poleg sojenja tekmovanj in prikaza rezultatov omogoˇca tudi vodenje oziroma izvedbo tekmovanj. Moderatorji in administratorji imajo moˇznost dodajanja, urejanja in brisanja lig, tekmovanj, tekmovalcev ter ostalih uporabnikov aplikacije. V nadaljevanju opiˇsem kljuˇcne poglede oziroma strani spletne aplikacije, nekatere strani so zaradi obseˇznosti aplikacije izpuˇsˇcene.

4.4.1 Glavna stran

Glavna stran je javno dostopna in namenjena informiranju uporabnikov o najnovejˇsih dogodkih, tekmovanjih in rezultatih. Administratorji aplikacije imajo kontrolo nad vsebino, ki se prikaˇze na tej strani.

Prihajajoˇca tekmovanja

Seznam prihajajoˇcih tekmovanj, ki vsebuje tekmovanja od trenutnega da- tuma. Nudi hiter pregled nad tekmovanji, njihovo lokacijo, tipom in zaˇcetkom tekmovanja. Za prikaz vseh tekmovanj (brez ˇcasovne omejitve) lahko uporabnik to stori s klikom na povezavo Show all, podrobnosti posameznega tekmovanja pa odpre s klikom na povezavo More (glej sliko 4.1).

Slika 4.1: Seznam prihajajoˇcih tekmovanj na glavni strani aplikacije

(48)

4.4.2 Nadzorna ploˇ sˇ ca

Najbolj obseˇzen del spletne aplikacije je zagotovo nadzorna ploˇsˇca. Ta zdruˇzuje vse strani in operacije, ki so na voljo prijavljenih uporabnikom - sodnikom, moderatorjem in administratorjem. Strani znotraj (glej sliko 4.2) nadzorne ploˇsˇce se uporabniku prikaˇzejo glede na njegovo uporabniˇsko vlogo oziroma pravice. Uporabnik se med stranmi premika z izborom v stranskem meniju nadzorne ploˇsˇce, katerega je mogoˇce tudi minimizirati.

Slika 4.2: Nadzorna ploˇsˇca za prijavljene uporabnike

Sojenje

Ta stran je namenjena sodnikom tekmovanj, ki med tekmovanjem vnaˇsajo rezultate tekmovalcev. Sodnik v vnosno polje vpiˇse unikatno ˇstevilko tekmovalca in sproˇzi iskanje s klikom na gumb Search (glej sliko 4.2). V primeru, da tekmovalec z vpisano ˇstartno ˇstevilko ne obstaja, je sodnik obveˇsˇcen o napaki (glej sliko 4.3).

Slika 4.3: Obvestilo, ko tekmovalec za sojenje ni najden

(49)

Diplomska naloga 35 Ob vnosu veljavne ˇstartne ˇstevilke se sodniku pod vnosno masko odpre segment za vnos rezultatov (glej sliko 4.4). Struktura tega segmenta je odvisna od tekoˇcega tekmovanja in smeri za katero sodni vpisuje rezultate. Omenjene in ostale osebne informacije lahko uporabnik najde s klikom na uporabnika v desnem zgornjem kotu aplikacije, ki odpre stranski segment za hiter pregled in urejanje nastavitev (glej sliko 4.5).

Slika 4.4: Stran za vnos rezultatov izbranega tekmovalca

Slika 4.5: Stranski segment za pregled in urejanje osebnih podatkov prija- vljenega uporabnika

(50)

Strani za pregled, urejanje in dodajanje podatkov

Administratorji imajo popoln nadzor nad podatki znotraj spletne aplikacije.

Za delo s podatki so na voljo naslednje strani:

• Routes: plezalne smeri. Prikaz in urejanje imena, kategorije, tipa, tekmovanja, postavljalca in sodnika smeri (glej sliko 4.6).

• Users: uporabniki. Prikaz in urejanje osebnih podatkov ter tipa uporabnika spletne aplikacije.

• Competitions: tekmovanja. Prikaz in urejanje imena, opisa, lokacije, tipa ter zaˇcetka in konca tekmovanja.

• Seasons: tekmovalne sezone. Prikaz in urejanje imena, opisa ter zaˇcetka in konca tekmovalne sezone.

• Competitors: tekmovalci. Prikaz in urejanje osebnih podatkov tekmovalec, njihove kategorije in kluba za katerega tekmujejo.

• Clubs: klubi. Prikaz in urejanje imena, naslova in regije ˇsportnega kluba.

Vsak zapis, ki omogoˇca urejanje ima ob strani gumbEdit(glej sliko 4.6).

Po kliku na gumb se uporabniku odpre pojavno okno, kjer lahko podatke poljubno ureja. Vnosna polja, ki drˇzijo vrednosti ˇsifrantov, kot so drˇzava ali regija, omogoˇcajo izbor vrednosti iz spustnega seznama (glej sliko 4.7). Pred shranjevanjem so vsi podatki validirani - na primer: ime uporabnika ne sme biti prazno. Enako velja za dodajanje novih zapisov, katere lahko uporabnik doda s klikom na gumb Add new, ta se nahaja nad tabelami, ki dovoljujejo dodajane novih zapisov. Brisanje podatkov je mogoˇce samo v primerih, ko ti nimajo referenc na druge objekte.

(51)

Diplomska naloga 37

Slika 4.6: Stran za pregled, urejanje in dodajanje plezalnih smeri

Slika 4.7: Pojavno okno za urejanje podatkov uporabnika

4.4.3 Rezultati

Pregled rezultatov je javno dostopen. Obiskovalcu spletne strani omogoˇca filtriranje oziroma omejevanje po razliˇcnih parametrih:

(52)

• Leto: leto oziroma sezona tekmovanja.

• Tekmovanje: tekmovanje za katerega ˇzelimo prikazati rezultate. Vre- dnosti spustnega seznama so odvisne od izbranega leta oziroma sezone (glej sliko 4.8).

• Kategorija: kategorija za katero ˇzelimo prikazati rezultate.

Slika 4.8: Izbor filtriranja rezultatov tekmovanja

Slika 4.9: Stran za prikaz rezultatov tekmovanja

(53)

Diplomska naloga 39

4.4.4 Tekmovanja

Ta stran je prav tako javno dostopna, obiskovalcem spletne strani pa omogoˇca pregled tekmovanj (glej sliko 4.10). Uporabnik lahko prikazan nabor tekmovanj omeji z izbiro leta oziroma tekmovalne sezone. Vsako izmed prikazanih tekmovanj nudi njegove osnovne podatke, veˇc podrobnosti pa lahko uporabnik prikaˇze s klikom na povezavo More (glej tudi 4.4.1). Podrobnosti izbranega tekmovanja vsebujejo informacijo o zaˇcetku in koncu, tipu, in lokaciji tekmovanja (glej sliko 4.11). Na tej strani je dostopna tudi ˇstartna lista in konˇcni rezultati, ˇce so ti ˇze bili pripravljeni in potrjeni. V kolikor je administrator za tekmovanje omogoˇcil prijave preko spleta, se lahko tekmovalci na tekmo prijavijo preko obrazca s klikom na gumb Registration.

Slika 4.10: Stran za prikaz tekmovanj

(54)

Slika 4.11: Stran za prikaz podrobnosti tekmovanja

(55)

Poglavje 5

Testiranje spletne aplikacije

5.1 Testiranje na simulaciji tekmovanja

Za tip simuliranega tekmovanja smo izbrali balvansko plezanje. Pri tej obliki tekmovanja je zaradi narave te discipline, ˇstevilo zabeleˇzenih rezultatov najveˇcje. Tekmovanje je potekalo v treh glavnih delih:

• Kvalifikacije,

• Polfinale,

• Finale.

V vsakem delu tekmovanja, so imeli tekmovalci na voljo 5 balvanskih problemov, na vsakem izmed njih so lahko za plezanje porabili 5 minut.

Cilj tekmovalca je v najmanj poskusih doseˇci vrh ali bonus oprimek, ki se obiˇcajno nahaja nekje na polovici balvanskega problema. Temu sledi, da zmaga tekmovalec, ki v najmanj poskusih doseˇze najveˇcje ˇstevilo vrhov oziroma bonusov.

5.1.1 Cilj testiranja

Glavni cilj testiranja je bil pridobiti informacije o

”obnaˇsanju“ spletne aplikacije v produkcijskem okolju. Iz lastnih izkuˇsen namreˇc vem, da obiˇcajno

41

(56)

ravno v teh primerih pride do napak in nepriˇcakovanega obnaˇsanja sistemov.

Prav tako je sistem pred pravim tekmovanjem potrebno dobro testirati in odpraviti morebitne napake.

Poleg samega delovanja sistema pa nas je zanimal tudi odziv uporabnikov spletne aplikacije. Med tekmovanjem z aplikacijo najveˇc upravljajo sodniki, zato je njihova uporabniˇska izkuˇsnja kljuˇcnega pomena. Na drugi strani so tekmovalci in gledalci, ki med tekmovanjem spremljajo rezultate, kateri morajo predstavljati realno stanje tekmovanja.

5.1.2 Rezultati testiranja

Tekmovanje je po vzpostavitvi streˇznika potekalo nemoteno. Sodniki so rezultate vnaˇsali preko mobilnih telefonov, tabliˇcnih in prenosnih raˇcunalnikov.

Odziv sodnikov je bil pozitiven, pridobili pa smo nekaj predlogov za izbolˇsave uporabniˇskega vmesnika, predvsem s strani sodnikov, ki so rezultate vnaˇsali preko mobilnih telefonov. Odzivnost oziroma hitrost spletne aplikacije je bila po priˇcakovanjih zelo dobra. Potrebno je izpostaviti, da je na simulaciji tekmovanja sodelovalo le 10 tekmovalcev, na obiˇcajnem tekmovanju pa jih ponavadi med 20 in 40.

Streˇznik je med testiranjem dosegel zanemarljive obremenitve, saj soˇcasno pleza toliko tekmovalcev hkrati, kot je na voljo balvaskih problemov. Na tekmah hitrostnega in teˇzavnostnega plezanje so te obremenitve ˇse niˇzje.

5.2 Testiranje uporabniˇ skega vmesnika s pomoˇ cjo sledenja pogledu

Sledenje pogledu uporabnika med uporabo raˇcunalnika je najbolj priljubljeno v industriji iger in medicinskih aplikacijah. Prvi sistemi so za sledenje pogledu uporabljali spletne kamere, sˇcasoma pa so se v ta namen razvile posebne naprave, ki jih odlikuje veˇcja natanˇcnost in temu primerno viˇsja cena [22].

(57)

Diplomska naloga 43 Sledenje pogledu smo v okviru diplomske naloge uporabili za ocenjevanje uˇcinkovitosti uporabniˇskega vmesnika. V testiranju sta sodelovala dva uporabnika - prvi je spletno aplikacijo ˇze uporabljal, drugi pa se je na testiranju z njo prviˇc seznanil. Testiranje smo izvedli s pomoˇcjo napraveTobii Pro Nano, ki jo je priskrbel mentor doc. dr. Jure ˇZabkar.

Za namene primerjave rezultatov, sta oba uporabnika sledila vnaprej doloˇcenim akcijam:

1. Prijavi se z uporabniˇskim imenom in geslom, 2. Odpri nadzorno ploˇsˇco,

3. Preveri uporabniˇske nastavitve, 4. Odpri stran za sojenje tekmovalca, 5. Sodi tekmovalcu s ˇstartno ˇstevilko 101,

6. Odpri tekmovalca s ˇstartno ˇstevilko 103 ampak mu ne sodi, 7. Popravi rezultat tekmovalca s ˇstartno ˇstevilko 101,

8. Odjavi se,

9. Odpri seznam tekmovanj,

10. Odpri rezultate za dogovorjeno tekmo.

5.2.1 Rezultati testiranja

Rezultati so bili v smislu razlik med uporabnikoma presenetljivi. Priˇcakovali smo veˇc razlik v hitrosti premikanja med elementi na spletni strani. Enega izmed razlogov za dobljene rezultate lahko zagotovo pripiˇsemo preprostemu uporabniˇskemu vmesniku, ki nima moteˇcih dejavnikov. V testiranju smo se osredotoˇcili predvsem na strani za sojenje tekmovalcev ter pregled tekmovanj in rezultatov, te bodo namreˇc med najbolj obiskanimi.

(58)

V nadaljevanju so predstavljene razlike med pogledom poznavalca in novega uporabnika spletne aplikacije. Spodnji sliki 5.1 in 5.2 prikazujeta najbolj opazno razliko med dvema uporabnika. Opazimo lahko, da se je pogled poznavalca na ciljno mesto prestavil ˇze preden se je na zaslonu prikazala vsebina strani.

Slika 5.1: Pogled poznavalca Slika 5.2: Pogled novega uporabnika

Iz slik 5.3 in 5.4 je lepo razvidna razlika v ˇcasu, ki ga je uporabnik po- treboval za prepoznavanje elementov na strani.

Slika 5.3: Pogled poznavalca Slika 5.4: Pogled novega uporabnika

(59)

Diplomska naloga 45 Obvestila o napakah in uspeˇsnem vpisu rezultatov so se izkazala za zelo uporabna. Oba testiranca sta jih namreˇc takoj zaznala (glej sliko 5.5).

Slika 5.5: Pogled uporabnika ob prikazu obvestila o napaˇcni ˇstartni ˇstevilki tekmovalca

Pri pregledu seznama tekmovanj in rezultatov opaznih razlik ni bilo, na sliki 5.6 lahko opazimo premike pogleda od leve proti desni in nadaljevanje v spustni seznam za izbor tekmovanja.

Slika 5.6: Sledenje pogleda na strani za prikaz rezultatov tekmovanja

(60)

(61)

Poglavje 6 Zakljuˇ cek

V diplomskem delu smo najprej predstavili kljuˇcna orodja in tehnologije s katerimi smo si pomagali pri razvoju. V nadaljevanju smo opisali strukturo zalednih sistemov in ˇcelnega dela ter predstavili osnovne gradnike izdelane spletne aplikacije.

Razvita spletna aplikacija ponuja reˇsitev za organizatorje tekmovanj ˇspor- tnega plezanja, ki trenutno postopke vodijo roˇcno ali pa bi jih ˇzeleli ˇse dodatno optimizirati. Organizatorjem nudi celosten pregled nad podatki, s katerimi preko nadzorne ploˇsˇce preprosto upravljajo. Omogoˇca jim vodenje tekmovanj, sodnikov, tekmovalcev, plezalnih smeri, rezultatov in ostalih delov tekmovanja. Sodniki tekmovanj za vnos rezultatov potrebujejo le napravo z dostopom do interneta, gledalci pa lahko rezultate nemoteno spremljajo tudi od doma.

Aplikacija je bila uspeˇsno testirana na simuliranem tekmovanju, kjer se je izkazala tako iz uporabniˇskega kot tudi organizatorjevega pogleda. Prav tako je prestala vsebinske teste, s katerimi smo preverjali ustreznost izraˇcuna rezultatov in ostalih kritiˇcnih operacij. Vsekakor pa bi bilo pred organizacijo veˇcjega tekmovanja opraviti ˇse dodatne stresne teste.

47

(62)

6.1 Nadaljnje delo

Trenutno stanje spletne aplikacije je primerno za uporabo na tekmovanjih v balvanskem, hitrostnem in teˇzavnostnem plezanju. Ti trije tipi so prisotni na vseh vrstah tekmovanj, vsekakor pa bi bi lahko dodali ˇse podporo za plezanje v ”duelu“.

Za boljˇso uporabniˇsko izkuˇsnjo, predvsem na mobilnih telefonih, smo ˇze pripravili prototip, ki bo na voljo v naslednji razliˇcici spletne aplikacije.

Veliko predlogov za izboljˇsave smo pridobili na simulaciji tekmovanja, ki je bila izvedena v sklopu diplomskega dela.

Razvita aplikacija bo uporabljena na lokalih tekmovanjih, kjer bo s poveˇca- nim ˇstevilom uporabnikov in njihovimi predlogi, postopoma pridobivala nove funkcionalnosti in nadgradnje. Med razvojem in testiranjem se je pojavilo nekaj idej, ki bi organizatorjem, sodnikom, tekmovalcev ˇse dodatno olajˇsale delo ter ponudile boljˇso uporabniˇsko izkuˇsnjo:

• Uvoz tekmovalcev izcsv alixslx datoteke,

• Vodenje stanja plaˇcil ob registraciji na tekmovanje,

• Uporabniˇski profili, ki tekmovalcem omogoˇcajo urejanje svojih podatkov,

• Shranjevanje

”priljubljenih“ tekmovalcev za hitrejˇsi pregled rezultatov.

(63)

Priloge

49

(64)

Slika 6.1: Podatkovni model spletne aplikacije

(65)

Literatura

[1] ant design. Ant Design of React. Dosegljivo: https://ant.design/

docs/react/introduce, 2021. [Dostopano: 20. 8. 2021].

[2] Apollo. Apollo GraphQL. Dosegljivo: https://www.apollographql.

com/docs/react/#features, 2021. [Dostopano: 16. 8. 2021].

[3] Auth0. JWT - Introduction. Dosegljivo: https://jwt.io/

introduction, 2021. [Dostopano: 20. 8. 2021].

[4] Boris Cherny. Programming TypeScript. O’Reilly Media, Inc., 2019.

[5] colos.fri.uni lj.si. Arhitektura SUPB. Dosegljivo: http:

//colos.fri.uni-lj.si/ERI/RACUNALNISTVO/PODATKOVNE_BAZE/

arhitektura_supb.html, 2021. [Dostopano: 16. 8. 2021].

[6] GraphQL. GraphQL. Dosegljivo: https://graphql.org/learn/, 2021.

[Dostopano: 16. 8. 2021].

[7] IFSC. IFSC - Rules. Dosegljivo: https://www.ifsc-climbing.org/

index.php/world-competition/rules, 2021. [Dostopano: 20. 8. 2021].

[8] Søren Bramer Schmidt in Johannes Schickling. Prisma raises $4.5M to build the GraphQL data layer for all databases. Dosegljivo:

https://www.prisma.io/blog/prisma-raises-4-5m-to-build- the-graphql-data-layer-for-all-databases-663484df0f60, 2021.

[Dostopano: 20. 8. 2021].

51

(66)

[9] Vipul A. M. in Prathamesh Sonpatki. ReactJS by Example - Building Modern Web Applications with React. Packt, 2016.

[10] KˇSP. Pravilnik o organizaciji in sojenju tekmovanj za drˇzavno prvenstvo Republike Slovenije v ˇsportnem plezanju. Dosegljivo:

https://ksp.pzs.si/javno/dokumenti/tekmovalni%20pravilnik%

20dp%202022.pdf, 2021. [Dostopano: 20. 8. 2021].

[11] Micha l Lytek. TypeGraphQL & Prisma integration. Dosegljivo: https:

//github.com/MichalLytek/typegraphql-prisma, 2021. [Dostopano:

17. 8. 2021].

[12] Mozilla. JavaScript - await. Dosegljivo: https://developer.mozilla.

org/en-US/docs/Web/JavaScript/Reference/Operators/await, 2021. [Dostopano: 20. 8. 2021].

[13] Mozilla. JavaScript - Tagged templates. Dosegljivo: https:

//developer.mozilla.org/en-US/docs/Web/JavaScript/

Reference/Template_literals#tagged_templates, 2021. [Do- stopano: 20. 8. 2021].

[14] PostgreSQL. About PostgreSQL. Dosegljivo: https://www.

postgresql.org/about/, 2021. [Dostopano: 16. 8. 2021].

[15] Prisma. Prisma Migrate. Dosegljivo: https://www.prisma.io/docs/

concepts/components/prisma-migrate, 2021. [Dostopano: 17. 8.

2021].

[16] Prisma. What is Prisma? Dosegljivo: https://www.prisma.io/docs/

concepts/overview/what-is-prisma, 2021. [Dostopano: 16. 8. 2021].

[17] ReactJS. Introducing JSX. Dosegljivo: https://reactjs.org/docs/

introducing-jsx.html, 2021. [Dostopano: 16. 8. 2021].

[18] ReactJS. State and Lifecycle. Dosegljivo: https://reactjs.org/docs/

state-and-lifecycle.html, 2021. [Dostopano: 16. 8. 2021].

(67)

Diplomska naloga 53 [19] Dotan Simha. GraphQL Code Generator. Dosegljivo: https://www.

graphql-code-generator.com/, 2021. [Dostopano: 20. 8. 2021].

[20] TypeGraphQL. TypeGraphQL introduction. Dosegljivo: https://

typegraphql.com/docs/introduction.html, 2021. [Dostopano: 17.

8. 2021].

[21] TypeScript. TypeScript. Dosegljivo: https://www.typescriptlang.

org/, 2021. [Dostopano: 16. 8. 2021].

[22] Luka Vranjeˇs and Jure ˇZabkar. Sledenje pogledu s spletno kamero. InIn- terakcija ˇclovek-raˇcunalnik v informacijski druˇzbi [Elektronski vir]: zbornik 22. Mednarodne multikonference Informacijska druˇzba - IS 2019, 9. oktober 2019: zvezek H = Human-Computer Interaction in Infor- mation Society: proceedings of the 22nd International Multiconference Information Society - IS 2019, 9 October, 2019, Ljubljana, Slovenia:

volume H, Interakcija ˇclovek-raˇcunalnik v informacijski druˇzbi [Elek- tronski vir]: zbornik 22. Mednarodne multikonference Informacijska druˇzba - IS 2019, 9. oktober 2019: zvezek H = Human-Computer Interaction in Information Society: proceedings of the 22nd Inter- national Multiconference Information Society - IS 2019, 9 October, 2019, Ljubljana, Slovenia: volume H, page 17–20. Institut “Joˇzef Stefan”, 2019. URL http://library.ijs.si/Stacks/Proceedings/

InformationSociety/2019/IS2019_Volume_H%20-%20HCI.pdf. Nasl.

z nasl. zaslona Opis vira z dne 7. 9. 2020 Bibliografija: str. 20 Povzetek.

[23] Wikipedia. Bouldering. Dosegljivo: https://en.wikipedia.org/

wiki/Bouldering, 2021. [Dostopano: 10. 6. 2021].

[24] Wikipedia. Lead climbing. Dosegljivo: https://en.wikipedia.org/

wiki/Lead_climbing, 2021. [Dostopano: 10. 6. 2021].

[25] Wikipedia. Speed climbing. Dosegljivo: https://en.wikipedia.org/

wiki/Speed_climbing, 2021. [Dostopano: 10. 6. 2021].