Implementering av Gamification
Implementering av Gamification-tekniker i AFRY: s produktionsuppföljningssystem Pulse
Implementation of Gamification
Implementation of Gamification techniques in AFRY: s production overview system Pulse
John Caesar
Sebastian Halvarsson
Fakulteten för hälsa, natur- och teknikvetenskap Datavetenskap
C-uppsats 15hp
Handledare: Jonathan Vestin Examinator: Tobias Pulls Datum: 200603
F¨orord
Tack till de anst¨allda inom sektionen Digital Solutions, AFRY, f¨or m˚anga trevliga samtalstillf¨allen s˚av¨al tekniska som vardagliga. Speciellt tack till Jonas Nilsson och Samuel H¨aggmyr f¨or all teknisk hj¨alp och feedback som ni bidragit med. Slutligen tack till v˚ara handledare Katarina Friberg och Jonathan Vestin.
Sammanfattning
M˚alet med detta arbete ¨ar att demonstrera en eller flera Gamification-varianter i ett existerande system som AFRY utvecklar. Detta utf¨ordes i tv˚a olika faser - en d¨ar det unders¨oktes olika Gamification-varianter, en d¨ar implementationen av dessa varianter skedde. I denna rapport visas och beskrivs designen av implementation, och resultatet av implementationen. Det beskrivs ocks˚a vad som skiljer den plane- rade implementationen och den realiserade implementationen, samt ges f¨orslag p˚a funktionalitet som kan vidareutvecklas i framtiden.
Abstract
The goal of this project is to demonstrate one or more Gamification variants in an existing system that AFRY develops. This happened in two different phases - one where different Gamification variants were researched, one where the implemen- tation of some of the variants were performed. This report describes and shows the design, and the result of the implementation. It also describes the difference between the planned implementation and the actual implementation. Even more, it contains some proposals for functionality that can be developed further in the future.
Inneh˚all
F¨orord i
Sammanfattning iii
Abstract v
Figurer xi
1 Introduktion 1
1.1 Arbetsgivaren . . . 2
1.2 Uppdraget . . . 2
1.3 M˚al & syfte . . . 3
2 Bakgrund 4 2.1 Vad ¨ar Gamification? . . . 4
2.2 Nutida exempel p˚a Gamification . . . 5
2.2.1 Steam . . . 5
2.2.2 Khan Academy . . . 6
2.2.3 Twitch . . . 7
2.3 Verktyg . . . 7
2.3.1 TypeScript . . . 7
2.3.2 Aurelia . . . 8
2.3.3 jQuery . . . 8
2.3.4 Flexbox . . . 9
2.3.5 Microsoft SQL Server . . . 9
2.3.6 LINQ . . . 9
2.3.7 Entity Framework . . . 10
2.3.8 DTO . . . 11
2.4 Manifacturing Execution System . . . 11
2.5 Pulse . . . 11
2.5.1 Infrastruktur . . . 13
2.5.2 LINQ-skript f¨or ny sida inom Pulse . . . 14
3 Projektdesign 15 3.1 Valda moment . . . 15
3.1.1 Utm¨arkelser . . . 15
3.1.2 Bel¨oningar . . . 17
3.1.3 Mini-Spel . . . 19
3.2 Entitetsdiagram . . . 19
3.3 Bortvalda moment . . . 21
3.3.1 Rankingsystem . . . 21
3.3.2 Po¨angsystem . . . 21
4 Projektimplementering 23 4.1 Utm¨arkelsesidan . . . 23
4.1.1 Popup-f¨onster . . . 25
4.1.2 Utm¨arkelse-ikon i huvudmenyn . . . 26
4.1.3 Uppdelning av avklarade och icke-avklarade utm¨arkelser . 26 4.2 Sidnummersystem . . . 27
4.3 Databas och fr˚agor . . . 28
4.4 Bel¨oningssidan . . . 29
4.4.1 Aktivering av bel¨oningar . . . 31
4.4.2 Tema och typsnitt . . . 32
4.4.3 Titel . . . 32
5 Resultat 34 5.1 F¨or¨andringar fr˚an designen . . . 34
5.2 Uteblivna features . . . 35
5.3 Anv¨andning av Gamification-systemet . . . 36
5.4 L¨ardomar f¨or framtiden . . . 37
5.5 Framtida utvecklingsm¨ojligheter . . . 37
6 Slutsats 38
Referenser 40
Figurer
1 Trendkurva f¨or s¨oktermen Gamification . . . 5
2 Oversikt av Aurelia . . . .¨ 8
3 Anv¨andning av LINQ . . . 10
4 Genererar klasser av databasen. . . 10
5 En ¨overblick av Pulse stacken. . . 12
6 Overblick av frontend-lagret i Pulse. . . .¨ 13
7 Overblick av mellanlagret. . . .¨ 14
8 Overblick av backend-lagret. . . .¨ 14
9 Prototyp av utm¨arkelse-panelen . . . 16
10 Prototyp av pokalikon. . . 16
11 Prototyp av pokalikon med h¨andelser att visa. . . 17
12 Prototyp av tema-ikon . . . 18
13 Prototyp av titelval . . . 19
14 Prototyp f¨or relationer i databasen . . . 20
15 Utm¨arkelsekomponenten . . . 24
16 Markeringar f¨or flexboxar och flexitems. . . 25
17 Ett popupf¨onster . . . 26
18 Sidnummersystemet med sida 1 vald. . . 27
19 Tv˚a bel¨oningskomponenter med varierande m¨angd bel¨oningar. . . 30
20 En anv¨andare som applicerat ett tema, och ett typsnitt. . . 33
21 En anv¨andare som applicerat ett tema, och en titel. . . 33
22 Gamification-fliken i menyn . . . 35
1 Introduktion
Spel ¨ar n˚agot som finns i m˚anga olika former. Det finns t.ex. datorspel, br¨adspel och rollspel. Att spela ¨ar n˚agot som de flesta m¨anniskor tycker ¨ar kul och uppskattar, och f¨or dessa m¨anniskor f¨orekommer spel ofta som ett inslag i deras vardag. Men t¨ank om det vore m¨ojligt att anv¨anda spel i andra sammanhang? Exempelvis att en hemsida som l¨ar ut olika spr˚akkurser ger dig po¨ang f¨or hur m˚anga kurser du klarat av? Eller att samma hemsida ger dig ett m¨arke, n¨ar du klarat av en viss kurs, som andra anv¨andare kan se? Det ¨ar precis detta som Gamification ¨ar - n¨ar ett koncept inom spelv¨arlden appliceras p˚a ett annat anv¨andningsomr˚ade. Ett annat, mer konkret exempel, ¨ar bensinmacken INGO [1]. Vid nedladdning av deras mobilapplikation f˚ar en kund m¨ojligheten att t¨avla om gratis bensin, genom att varje vecka k¨ora olika mini-spel, och ifall kunden g¨or bra fr˚an sig f˚ar den ett visst antal liter bensin som pris.
Detta kapitel inneh˚aller information om projektets arbetsgivare, uppdrag, m˚al och syfte. Arbetsgivaren ¨ar AFRY [2] som ¨ar ett stort konsultf¨oretag inom digitali- sering och urbanisering. Uppdraget g˚ar ut p˚a att unders¨oka Gamification-varianter och presentera n˚agra av dessa i en ”proof of concept” demo. Syftet ¨ar att AFRY har n˚agot extra att visa upp vid f¨ors¨aljning av produkter, och d¨armed ge dem ett
¨overtag i f¨orhandlingar.
Kapitel 2 f¨orklarar mer djupg˚aende bakgrunden till Gamification, bakgrunden till de verktyg vi valt, och ¨aven bakgrunden f¨or det system som vi utf¨ort detta projekt inom. I kapitel 3 presenteras designen samt de moment som valts ut, och de moment som valts bort. I det fj¨arde kapitlet g˚ar vi igenom sj¨alva implementeringen av designen. Kapitel 5 g˚ar igenom resultatet av implementeringen och beskriver exempelvis saker som ¨andrats fr˚an designen. I det sista kapitlet, kapitel 6, g˚ar vi igenom de slutsatser som vi dragit.
1.1 Arbetsgivaren
AFRY [3] ¨ar ett f¨oretag som har visionen att vara ledande inom design, r˚adgivning och teknik p˚a den internationella marknaden. Tidigare gjorde de besiktningsupp- drag p˚a ˚angpannor men numera fokuserar de p˚a att skapa h˚allbara l¨osningar inom digitalisering och urbanisering. AFRY har ¨over 17 000 anst¨allda och finns i 48 l¨ander runt om i v¨arlden [2].
AFRY best˚ar av fem divisioner; Energy, Management Consulting, Industrial &
Digital Solutions, Infrastructure and Process Industries. Uppdraget ligger under Digitial Solutions och handleds av Katarina Friberg, som ¨ar anst¨alld som konsult p˚a AFRY:s kontor i Karlstad. Under projektets g˚ang har ¨aven Jonas Nilsson och Samuel H¨aggmyr, tv˚a konsulter som jobbar med Pulse, som beskriv i kapitel 2.5, varit tillg¨angliga som tekniska bollplank. Ang˚aende utrustningen som beh¨ovdes f¨or projektet uppstod ett problem i b¨orjan, d¨ar nya datorer som best¨allts av arbets- givaren ej levererades i tid. Detta innebar att eget material fick anv¨andas och att
˚atkomst till viss programvara ej var m¨ojligt, fram tills att arbetsgivaren ˚aterst¨allt tv˚a
¨aldre datorer. Leverenas av nyare utrustning uteblev dessv¨arre och de ˚aterst¨allda datorerna fick anv¨andas under resten av projektets g˚ang.
1.2 Uppdraget
AFRY vill att deras applikationer ska vara roliga att anv¨anda, och att de ska anv¨andas mycket. Ett s¨att att g¨ora detta p˚a ¨ar genom att anv¨anda Gamification, t.ex.
med quests, utm¨arkelser, p˚ask¨agg o.s.v. Den sv˚ara biten ¨ar hur Gamification kan anv¨andas s˚a att det passar in och blir en naturlig del av en applikation. Uppdraget g˚ar ut p˚a att unders¨oka olika varianter av Gamification och d¨arefter skapa ett ”proof of concept” demo d¨ar n˚agra av varianterna har implementerats.
1.3 M˚al & syfte
M˚alet ¨ar att demonstrera en eller flera Gamification-tekniker, genom implemen- tering av dessa i ett program som AFRY utvecklar, Pulse. Syftet ¨ar att kunna visa p˚a en innovativ funktionalitet som ¨okar engagemanget fr˚an anv¨andarna. Vid f¨ors¨aljingstillf¨allen av Pulse till en ny kund kan detta anv¨andas f¨or att visa att deras produkt har n˚agot extra att bidra med, och d¨armed ge ett litet ¨overtag n¨ar det kommer till f¨orhandlingarna.
2 Bakgrund
Gamification ¨ar ett relativt nytt begrepp, och det ¨ar fr¨amst p˚a de senare ˚aren som fenomenet har blivit popul¨art. M˚anga k¨anner d¨arf¨or inte till vad det inneb¨ar, vilket f¨orklaras i detta kapitel. Slutligen beskrivs de tekniker och metoder som anv¨ants i implementeringen.
2.1 Vad ¨ar Gamification?
Ordet Gamification definierades ˚ar 2006 f¨or f¨orsta g˚angen, enligt f¨oljande mening:
the process of adding games or gamelike elements to something (such as a task) so as to encourage participation [4]
Detta skulle kunna ¨overs¨attas som att Gamification ¨ar en process som anv¨ander spel eller spelliknande inslag f¨or att uppmuntra deltagande i en uppgift. ¨Aven fast sj¨alva ordet ¨ar tills synes relativt nytt, ¨ar inte fenomenet som s˚adant det.
Genom st¨orre delen av historien har inslag av spel och lekar anv¨ants i en m¨angd olika situationer. Ett specifikt exempel ¨ar milit¨aren, som har en hundra˚arig, om inte tusen˚arig, historia av att anv¨anda en form av spel f¨or att planera anfall eller unders¨oka olika krigsscenarion. Detta har skett genom anv¨andning av figurer som representerar olika sidors trupper i ett krig, och en karta som visar omr˚adet d¨ar kriget ska ¨aga rum [5]. Detta kan j¨amf¨oras med dagens moderna br¨adspel, som ¨ar uppbyggd p˚a ett liknande s¨att.
Sedan dess har anv¨andandet av Gamification accelererat. I och med digitalise- ringen av samh¨allet har Gamification blivit allt vanligare. Dels har datorspel blivit allt mer popul¨art, men ¨aven inslag av Gamification inom e-handel och applikationer har blivit en vanlig metod f¨or att motivera anv¨andarna att spendera mer tid hos dem.
Inom exempelvis e-handel kan detta leda till h¨ogre f¨ors¨aljning. Ett exempel p˚a mo- dern Gamification som inte sker prim¨art digitalt ¨ar livsmedelsbutiken Coop [6] som
Figur 1: Trendkurva f¨or s¨oktermen Gamification [8]
anv¨ander ett po¨ang-och-rabattsystem, vilket ¨ar en vanlig teknik inom Gamification.
Ett annat exempel p˚a detta ¨ar inom aff¨arsv¨arlden, i form av att ha v¨anskapliga lekar eller spel f¨or att skapa sammanh˚allning inom ett f¨oretag eller p˚a en arbetsplats [7].
Detta brukar refereras som teambuilding.
Den ¨okade anv¨andningen av Gamification har lett till att intresset ocks˚a har
¨okat, vilket syns tydligt i s¨oktrenden f¨or Gamification i Google Trends, se figur 1.
2.2 Nutida exempel p˚a Gamification
I detta underkapitel kommer n˚agra nutida exempel p˚a Gamification att presenteras mer utf¨orligt. F¨oljande exempel implementerar delar av Gamification p˚a olika s¨att, och visar d¨armed att det finns olika s¨att att anv¨anda Gamification f¨or att lyckas engagera sina anv¨andare.
2.2.1 Steam
Steam [9] ¨ar en dataspeltj¨anst d¨ar anv¨andare kan k¨opa spel digitalt, sedan ladda ned dem till sin dator och d¨arefter spela dem. Varje anv¨andare har ett konto och en profilsida d¨ar det st˚ar information om anv¨andaren, s˚a som vilka spel denne
¨ager och hur mycket anv¨andaren har spelat dem. Steam ¨ar ett bra exempel p˚a hur
Gamification kan se ut, eftersom speltj¨ansten applicerar flera olika av delar av Gamification p˚a ett framg˚angsrikt s¨att. Till att b¨orja med finns det m˚anga olika utm¨arkelser tillg¨angliga, och en anv¨andare kan v¨alja att visa dessa p˚a dennes profilsida n¨ar m˚alet f¨or dem har uppfyllts. Sedan finns det s˚a kallade ”m¨arken”, vilket ¨ar en slags digital vara som lagras p˚a ditt konto. Dessa m¨arken kan v¨axlas in i utbyte mot att anv¨andarens profil f˚ar Experience Points (XP), vilket ¨ar ett po¨angsystem inom dataspelsv¨arlden. N¨ar en profil har uppn˚att en viss m¨angd XP s˚a v¨axlar den upp till en h¨ogre niv˚a, vilket inneb¨ar att kontot och profilsidan f˚ar tillg˚ang till ut¨okade funktioner.
Steams aktiva community med m˚anga anv¨andare, i kombination med deras Gamification i form av exempelvis utm¨arkelser och m¨arken, g¨or att anv¨andarna l¨att kan j¨amf¨ora dessa med varandra, och p˚a s˚a vis bli ¨annu mer motiverade att engagera sig mer p˚a plattformen.
2.2.2 Khan Academy
Khan Academy [10] ¨ar ett digitalt l¨aroinstitut, d¨ar l¨arare kan publicera material som andra kan ta del av. Khan Academy applicerar en form av Gamification som g˚ar ut p˚a att l˚ata anv¨andaren tj¨ana m¨arken som l˚ases upp vid genomf¨orning av olika uppgifter. En uppgift kan exempelvis vara ”Complete a coding challenge”, d¨ar anv¨andaren f˚ar ett m¨arke n¨ar denne har genomf¨ort uppgiften. Det finns m˚anga olika s¨att f¨or anv¨andaren att tj¨ana dessa m¨arken, som att delta i fr˚agesport, f¨olja en l¨arare eller titta p˚a f¨orel¨asningar. Varje anv¨andare har en egen profil d¨ar de kan skriva sin biografi och visa upp sina intj¨anade m¨arken. N¨ar anv¨andaren loggar in p˚a sidan s˚a visas f¨oreslagna m¨arken som anv¨andaren ¨ar n¨ara att l˚asa upp, och ¨aven rekommendationer om m¨arken som anv¨andaren kan sikta p˚a h¨arn¨ast.
2.2.3 Twitch
Twitch ¨ar en hemsida som ¨ar till f¨or att m¨anniskor och f¨oretag l¨att ska kunna n˚a ut till andra m¨anniskor genom lives¨andningar. Personer som bes¨oker Twitch klassificeras antingen som ˚ask˚adare eller streamer, d¨ar ˚ask˚adare ¨ar de som ser p˚a lives¨andningar, medan streamers ¨ar de som s¨ander. Streamers f˚ar en egen ”kanal”, eller undersida, d¨ar endast deras egna s¨andningar visas.
Twitch:s form av Gamification best˚ar av att varje kanal har ett eget po¨angsystem.
Ask˚adare kan tj¨ana po¨ang p˚a en m¨angd olika vis, t.ex. genom att helt enkelt˚ spendera tid i kanalen, genom att vara aktiv i den tillh¨orande chatten som finns, eller genom att betala en liten summa m˚anadsvis. Dessa po¨ang kan anv¨andas f¨or olika bel¨oningar, som m¨ojligheten att f˚a ett chattmeddelande att bli extra synligt eller att f˚a tillg˚ang till vissa exklusiva ikoner f¨or en begr¨ansad tid. P˚a detta s¨att motiveras anv¨andarna att spendera mer tid hos Twitch.
2.3 Verktyg
I f¨oljande underkapitel presenteras de verktyg och tekniker som anv¨ands inom detta projekt.
2.3.1 TypeScript
TypeScript [11] ¨ar ett skriptspr˚ak som anv¨ands f¨or webbprogrammering. Det ¨ar en utbyggnad av det redan etablerade och mycket v¨al anv¨anda spr˚aket JavaScript. Syf- tet med TypeScript ¨ar att tillhandah˚alla ett mer kraftfullt spr˚ak ¨an JavaScript, som ska underl¨atta f¨or att utveckla st¨orre projekt, n˚agot som ofta en kr¨aver en tydlig och
¨oversk˚adlig struktur vilket kan vara sv˚art att f˚a till i JavaScript. Detta sker genom anv¨andning av exempelvis klasser, gr¨anssnitt och ett rikt typ-system. TypeScript omvandlas till JavaScript vid kompilering, vilket inneb¨ar att all JavaScript-kod
Figur 2: ¨Oversikt av Aurelia
ocks˚a kan k¨oras som TypeScript, men d¨ar motsatsen inte g¨aller.
2.3.2 Aurelia
Aurelia [12] ¨ar ett ramverk som ¨ar till f¨or att bygga ett rikt och en flexibelt frontend f¨or applikationer, oavsett om detta g¨aller webb, mobiler eller desktops. Det best˚ar av en samling funktionsorienterade JavaScript-moduler, som alla erbjuder kraftfulla funktioner. Detta g¨or det l¨att att hantera olika komponenter och element, t.ex. hur dessa kan kopplas ihop och interagera med varandra, se figur 2.
Den frontend som skapas med hj¨alp av Aurelia blir en SPA, Single Page Application, som inneb¨ar att sidan uppdateras i realtid vid f¨or¨andringar, vilket betyder att webbl¨asaren aldrig beh¨over ladda om sidan [13]. Aurelia kan hantera b˚ade JavaScript och TypeScript.
2.3.3 jQuery
jQuery [14] ¨ar ett JavaScript-bibliotek som f¨orenklar programmering inom Ja- vaScript. Det underl¨attar f¨or¨andring och formatering av HTML-dokument och
CSS-filer, samt hantering av events, animering och dylikt. jQuery har ¨aven st¨od f¨or m˚anga olika webbl¨asare.
2.3.4 Flexbox
Flexbox [15] ¨ar en webblayout-modell i CSS. En flexbox:s inneh˚all kallas flex- items, och dessa kan ordnas enligt en kolumn eller en rad. N¨ar inneh˚allet ¨overstiger en flexbox:s storlek s˚a kommer flexboxen att expandera automatiskt, f¨or att g¨ora plats. Inneh˚allet, flex-items, ¨ar vanliga HTML-element, som i sin tur ocks˚a kan vara en Flexbox. Detta inneb¨ar att Flexbox m¨ojligg¨or f¨or en utvecklare att enkelt forma en hemsida enligt dennes ¨onskem˚al.
2.3.5 Microsoft SQL Server
Microsoft SQL Server [16] ¨ar Microsofts egna databasserver. Det ¨ar en s˚a kallad relationsdatabas, vilket inneb¨ar att den ¨ar uppbyggd av entiteter varav dessa kan ha olika relationer till varandra. En relationsdatabas ¨ar den vanligaste typen av databas som anv¨ands, men det finns ocks˚a andra typer, s˚a som grafdatabas och dokumentdatabas. Microsoft SQL server anv¨ander ett fr˚agespr˚ak, Structured Query Language (SQL), f¨or att st¨alla ”fr˚agor” till databasen. N¨ar en fr˚aga st¨alls skickas ett svar tillbaka i retur, vilket kan vara t.ex. en text-str¨ang, flera rader i en kolumn eller en hel tabell. Detta spr˚ak, SQL-spr˚aket, ¨ar satt som standard f¨or moderna relationsdatabaser [17].
2.3.6 LINQ
Language Integrated Query(LINQ) [18] ¨ar en teknologi f¨or att skriva mer typs¨akra fr˚agor till en databas. Tanken med LINQ ¨ar att programmeraren kan anv¨anda sig av typer och objektorientering f¨or att st¨alla fr˚agor till databasen, precis som vanlig
Figur 3: Anv¨andning av LINQ
Figur 4: Genererar klasser av databasen.
C# - kod. Se figur 3. Detta inneb¨ar att en programmerare slipper l¨ara sig syntaxen till flera olika spr˚ak, t.ex. SQL och C#. Ist¨allet r¨acker det med bara C#.
2.3.7 Entity Framework
Entity Framework [19] anv¨ands f¨or att ¨overs¨atta en databas och dess tabeller till klasser som till˚ater programmeraren att skapa objekt av dem, se figur 4. Data- basfr˚agor och svar kan d¨arefter skrivas i LINQ eller i vanligt SQL-format, och i fr˚agorna anv¨ands de objekt som skapats genom Entity Framework [20] [21].
2.3.8 DTO
Data Transferable Object(DTO) [22] ¨ar ett koncept inom objektorientering. Syftet med att anv¨anda ett DTO ¨ar att minska belastningen p˚a databasen genom att fr˚aga efter en m¨angd data och sedan spara denna data i ett tempor¨art objekt, ist¨allet f¨or att beh¨ova fr˚aga databasen upprepade g˚anger. N¨ar datan har h¨amtats och ligger i DTO:n beh¨over inte databasen fr˚agas mer utan ist¨allet kan DTO:n anv¨andas f¨or att plocka ut data n¨ar det beh¨ovs.
2.4 Manifacturing Execution System
Ett Manifacturing Execution System, f¨orkortat MES, ¨ar ett koncept f¨or att sam- la ihop en m¨angd olika data f¨or en produktionsanl¨aggning p˚a en l¨attillg¨anglig plattform [23]. En produktionsanl¨aggning kan t.ex. vara en fabrik som tillver- kar pappersmassa. Exempelvis kan datan best˚a av m¨atv¨arden fr˚an tillverkningen, timr¨akning f¨or anst¨allda, loggbok och en lista p˚a de problem som uppst˚att under produktion.
Ett MES anv¨ands inom olika industrier f¨or att f˚a en ¨overblick ¨over samtliga operationer som finns hos en produktionsanl¨aggning. Exempelvis om en anl¨aggning producerar leksaker ¨ar det viktigt att h˚alla koll p˚a vilka som produceras, hur snabbt de kan tillverkas och kvaliteten p˚a dem.
2.5 Pulse
Pulse ¨ar ett MES med ett modernt webgr¨anssnitt utvecklat av AFRY, se figur 5, och det ¨ar inom Pulse som v˚art projekt har utf¨orts i. Pulse ¨ar skapat med anpassningsbarhet i ˚atanke och l˚ater anv¨andarna skapa en egen vy. D¨ar visas olika paneler som presenterar data eller till˚ater anv¨andaren skapa inl¨agg, meddelanden eller godk¨anna beslut. Pulse skapades f¨or att ers¨atta nuvarande manuella MES
Figur 5: En ¨overblick av Pulse stacken.
som anv¨ands p˚a m˚anga av industrif¨oretagen. Exempelvis s˚a utf¨ors kommunikation mellan olika arbetsskift ofta via post-it notiser eller via excel-ark. Detta leder ofta till s¨amre effektivitet och det ¨ar inte alltid som kommunikationss¨attet fungerar som t¨ankt. Pulse ¨ar till f¨or att effektivisera kommunikation och ge anv¨andare just den information de beh¨over. Pulse ¨ar ocks˚a ett samlingsverktyg f¨or att digitalisera rutiner och godk¨annande av kontrollarbete p˚a maskiner. En rutin kan inneb¨ara att vissa m¨atv¨arden ska kontrolleras innan ett skift slutar. Genom att digitalisera kvitteringen av detta s˚a ges en garanti p˚a att kontroller genomf¨ors kontinuerligt och om ett fel hittas s˚a anges tydlig information om vad som g˚att fel.
Pulse anv¨ander sig av ett v¨arde som kallas f¨or TAK (OEE p˚a engelska) [24]
och best˚ar av tre m¨atv¨arden; tillg¨anglighet, anl¨aggningsutnyttjande och kvalit´e.
Dessa v¨arden best¨ammer akt¨oren sj¨alv hur de m¨ats, men tillsammans ska de ge en ¨overblick om akt¨orens nuvarande produktionsanl¨aggning. Tillg¨anglighet syftar p˚a andelen av den planerade drifttiden som anv¨ands till produktion. Anl¨aggnings- utnyttjande syftar p˚a hur optimalt maskinerna k¨ors under drifttiden av produktionen.
Kvalit´e syftar p˚a m¨angden av det producerade materialet som beh¨over sl¨angas eller omarbetas.
Figur 6: ¨Overblick av frontend-lagret i Pulse.
2.5.1 Infrastruktur
Pulse ¨ar uppbyggt av tre olika lager. Det f¨orsta lagret kallas frontend-lagret, och
¨ar det som finns n¨armast anv¨andaren. D¨arefter kommer mellanlagret som hante- rar databasfr˚agor och svar. Sist kommer backend-lagret, som best˚ar av entiteter genererade av Entity Framework.
Frontend-lagret best˚ar i grunden av tv˚a filer, en HTML-fil och en TypeScript-fil, se figur 6. I HTML-filen ligger den HTML-kod som formar sj¨alva grunden av en sida, och sedan anv¨ands TypeScript-filen f¨or att m¨ojligg¨ora mer avancerad och interaktiv funktionalitet till sidan. Med hj¨alp av Aurelia ¨ar det m¨ojligt att via HTML-element anropa metoder som finns i TypeScript-filen.
Ut¨over detta finns det ocks˚a en proxy-klass, som anv¨ands i TypeScript-filen.
Via denna kommunicerar frontend-lagret med mellanlagret, f¨or att skicka fr˚agor och ta emot svar fr˚an databasen, se figur 7. Proxyklassens fr˚aga inneh˚aller data som beh¨ovs f¨or att st¨alla fr˚agan till databasen. Exempel p˚a denna data kan vara den nuvarande anv¨andarens id. I mellanlagret s˚a tar Controller-klassen emot TypeScript- fr˚agan och g¨or om den till ett motsvarande objekt i C#. Controllern skickar sedan vidare objektet till det sista lagret i backend, se figur 8.
I backend-lagret finns entitetsklasser genererade med hj¨alp av Entity Fram- ework. Dessa C# klasser representerar tabellerna i databasen och m¨ojligg¨or att fr˚agan skickad av mellanlagret kan skrivas i LINQ-form.
Figur 7: ¨Overblick av mellanlagret.
Figur 8: ¨Overblick av backend-lagret.
2.5.2 LINQ-skript f¨or ny sida inom Pulse
F¨or att skapa en ny sida inom Pulse s˚a beh¨over klasser f¨or de tidigare n¨amnda lagren skapas. I Pulse finns det ett LINQ-skript som anv¨ands f¨or att skapa just denna struktur. Skriptet skapar de filer som beh¨ovs, t.ex. TypeScript, C#, och HTML-filer, och placerar dessa p˚a r¨att st¨allen. Detta g¨or att all l¨ankning mellan olika sidor blir korrekt. Skriptet skapar ocks˚a en koppling till databasen, som g˚ar via en sidas proxy-klass.
3 Projektdesign
I detta kapitel beskrivs de tekniker inom Gamification som vi valde att ursprungli- gen ha med i designen av v˚ar implementation. Huvudtekniken ¨ar utm¨arkelser som anv¨andare ska kunna f˚a genom att klara olika uppdrag. N¨ar ett visst antal uppdrag avklarats f˚ar anv¨andaren en bel¨oning. Deras design och applicering beskrivs h¨ar.
Sist f¨orklarar vi hur databasen h¨anger samman med ¨ovriga designen, och tar upp vissa Gamification-tekniker som vi valt att inte ha med.
3.1 Valda moment
H¨ar f¨orklaras de tekniker inom Gamficiation som valts f¨or detta projekt, d¨ar h¨ansyn har tagits till vad som ¨ar l¨ampligt inom ramen f¨or Pulse och den anv¨andargrupp som anv¨ander Pulse, vilket ¨ar arbetare p˚a produktionsanl¨aggningar. De huvudsakliga teknikerna ¨ar utm¨arkelser, bel¨oningar och teman.
3.1.1 Utm¨arkelser
Utm¨arkelser ska inneh˚alla fyra saker: en titel, en beskrivning, en bild och andelen andra anv¨andare som klarat samma utm¨arkelse.
Anv¨andaren kan tilldelas bel¨oningar n¨ar olika utm¨arkelser slutf¨orts. Dessa bel¨oningar l˚aser upp olika teman och typsnitt som anv¨andaren kan anv¨anda f¨or att anpassa sitt grafiska gr¨anssnitt. Vid olika evenemang eller h¨ogtider som p˚ask och jul kan samma teman visas f¨or alla anv¨andare, i syfte att uppmuntra anv¨andarna att utforska den Gamification som finns, om de inte redan gjort det. Till detta utm¨arkelse-system ska det finnas en utm¨arkelsesida d¨ar anv¨andaren kan kontrollera sina personliga inst¨allningar f¨or Gamification. I dessa inst¨allningar kan bland annat f¨oljande utf¨oras; inaktivering och aktivering av personlig Gamification, och m¨ojligheter f¨or anpassning av teman i paneler. P˚a denna sida visas dels utm¨arkelser
Figur 9: Prototyp av utm¨arkelse-panelen
Figur 10: Prototyp av pokalikon.
som anv¨andaren har tilldelats och ej tilldelade utm¨arkelser som tv˚a olika grupper, och dels en flik f¨or att se m¨ojliga bel¨oningar.
Ut¨over den personliga sidan f¨or anv¨andaren kan en utm¨arkelse-panel visas. D¨ar kan anv¨andaren se information om sina senaste utm¨arkelser, se figur 9. Panelen har ¨aven en l¨ank till utm¨arkelsesidan. Det ska ocks˚a finnas en utm¨arkelseikon i huvudmenyn, som ska leda till utm¨arkelsesidan. Se figur 10. Denna ikon ska ha en notis-funktion som visar hur m˚anga nya utm¨arkelser som anv¨andaren har f˚att, enligt figur 11. Detta g¨or det smidigt f¨or anv¨andarna att se n¨ar de f˚att en ny utm¨arkelse och de kan d˚a g˚a direkt till sidan genom att klicka p˚a ikonen.
Sparandet av en anv¨andares framsteg f¨or en utm¨arkelse kan exempelvis ske genom skickande av ett objekt inneh˚allande en liten m¨angd data inom systemet, s˚a kallat meddelandeobjekt. Detta meddelandeobjekt kan exempelvis inneh˚alla;
Figur 11: Prototyp av pokalikon med h¨andelser att visa.
anv¨andarens id, utm¨arkelsens id, ett v¨arde f¨or hur mycket framsteg anv¨andaren har gjort och ifall anv¨andaren har genomf¨ort utm¨arkelsen. Meddelandetobjektet ska skickas igenom systemet s˚a att alla instanser av klasser som lyssnar efter denna typ av meddelandeobjekt kan ta del av datan. Systemet kan p˚a detta vis veta n¨ar databasen beh¨over kontaktas f¨or att spara eller uppdatera anv¨andarens data.
Ett exempel p˚a en utm¨arkelse kan vara att ing˚a i ett arbetsskift som klarar att h˚alla ett visst TAK-v¨arde i ett visst antal dagar i rad. Denna utm¨arkelse kan exempelvis p˚averka anv¨andaren att delta mer aktivt under ett arbetsskift. Andra exempel p˚a utm¨arkelser kan vara att; bes¨oka utm¨arkelsesidan en g˚ang eller aktivera ett uppl˚ast tema. Dessa typer av utm¨arkelser b¨or uppmuntra anv¨andaren att engagera sig mer i Pulse genom att ¨oka nyfikenheten f¨or bel¨oningar.
3.1.2 Bel¨oningar
H¨ar f¨orklaras vilka bel¨oningar som finns och hur dessa ska se ut och implementeras.
De best˚ar av teman, typsnitt och titlar. Detta ¨ar l¨ampliga bel¨oningar eftersom anv¨andaren d˚a kan anpassa sitt gr¨anssnitt till att se ut som hur denne vill, vilket
¨okar troligheten till att anv¨andaren spenderar mer tid inom systemet.
Tema
Ett tema ¨ar n˚agot som kan l˚asas upp n¨ar en viss utm¨arkelse, eller vissa utm¨arkelser, uppn˚as. Anv¨andaren kan v¨alja bland uppl˚asta teman via en tema-ikon, figur 12.
Det aktuella temat f¨argar bakgrunden p˚a paneler, och menyraden i Pulse. Vissa teman ¨ar uppl˚asta f¨or alla men ¨ar bara tillg¨angliga vid h¨ogtider som jul och p˚ask.
Figur 12: Prototyp av tema-ikon
Tanken med att ha speciella teman ¨ar att skapa en samh¨orighet samt att f˚a fler intresserade att utforska mer av Gamification-systemet.
Typsnitt
Anv¨andaren kan l˚asa upp olika typsnitt som kan anv¨andas i Pulse:s sid-och hu- vudmeny, figur 12. Ett annorlunda typsnitt kan hj¨alpa till att v¨acka nyfikenhet hos mottagaren samt att bryta tristessen hos anv¨andaren. Typsnitten ¨ar f¨orvalda och fokuserar p˚a att variera texten med sm˚a modifikationer, det ska fortfarande vara ett tydligt typsnitt som ¨ar l¨attl¨ast.
Titlar
Anv¨andaren kan l˚asa upp titlar som kan anv¨andas i meddelanden och inl¨agg, figur 13. En titel kommer att visas bredvid anv¨andarens namn och ¨ar valfri att anv¨anda.
Figur 13: Prototyp av titelval
3.1.3 Mini-Spel
Ett mini-spel ska finnas tillg¨angligt vid specifika tillf¨allen, som ¨ar n¨ar anv¨andarens internetanslutning g˚ar ner. Syftet med detta ¨ar att motivera anv¨andaren att stanna kvar vid sidan, ist¨allet f¨or att t.ex. ¨oppna en ny flik och g¨ora n˚agot annat. Det kan ocks˚a ses som en v¨alkommen, och f¨orhoppningsvis tillf¨allig, paus fr˚an arbetet. N¨ar internetanslutningen ¨ar tillbaka st¨angs spelet ner s˚a att anv¨andaren kan forts¨atta fokusera p˚a det den ska g¨ora.
Vi fick inspiration av Google till att implementera detta. De har n¨amligen ett eget spel som dyker upp n¨ar en anv¨andare av Google Chrome tappar internetanslut- ningen [25].
3.2 Entitetsdiagram
Ett entitetsdiagram b¨or anv¨andas n¨ar n˚agonting ska lagras i en databas. I detta pro- jekt beh¨ovs en databas eftersom alla utm¨arkelser, teman och bel¨oningar inneh˚aller mycket information, och detta m˚aste lagras n˚agonstans. Dessutom ¨ar databasen n¨odv¨andig f¨or att anv¨andare ska kunna beh˚alla sina inst¨allningar ¨over olika sessio- ner, t.ex. om en anv¨andare har valt ett visst tema s˚a vill anv¨andaren att n¨asta g˚ang denne ¨ar inloggad s˚a ska det tema som anv¨andaren valt appliceras.
Figur 14: Prototyp f¨or relationer i databasen
I databasen beh¨over det sparas uppgifter om alla utm¨arkelser som finns, alla teman som finns, alla bel¨oningar som finns samt alla titlar och fonter. Till detta beh¨ovs ¨aven kopplingstabeller s˚a att det g˚ar att kontrollera vilka anv¨andare som har vilka utm¨arkelser eller bel¨oningar. Detta modelleras enligt v˚art entitetsdiagram, se figur 14.
Databasen som implementeringen kommer ske emot ¨ar inte en ny databas, utan
¨ar den databas som Pulse anv¨ander. Detta ¨ar naturligt eftersom v˚art projekt jobbar inuti Pulse, allts˚a beh¨over vi anv¨anda vissa delar av Pulse:s infrastruktur. Databasen
¨ar en Microsoft SQL Server.
3.3 Bortvalda moment
De f¨oljande delarna ¨ar moment som anv¨ands i vissa Gamification-projekt, men som valdes bort i designen f¨or detta projekt. Dessa moment ¨ar relaterade med risker som kan ¨aventyra anv¨andarnas laganda negativt.
3.3.1 Rankingsystem
Ett rankingsystem tillhandah˚aller anv¨andaren med en direkt j¨amf¨orelse med andra anv¨andare. Den positiva effekten som kan utvinnas av detta ¨ar h¨ojd t¨avlingsinstinkt.
Aven m˚algruppen som inte h˚aller Gamification som en viktig faktor i sin arbetsvar-¨ dag kan k¨anna viss nyfikenhet och intresse f¨or systemet. Det finns dock vissa risker med rankingsystem. En av dessa risker handlar om socialt v¨alm˚aende, vilket b¨or v¨arnas om n¨ar det kommer till f¨oretag och dess anst¨allda. Ett f¨oretag, som AFRY, vill givetvis ha personal som ¨ar mer engagerade i arbetet, men de vill inte samtidigt riskera att personalen blir osams eller m˚ar d˚aligt p˚a grund av att de ligger f¨or l˚angt ned i rankningssystemet. En l¨osning som delvis l¨oser detta ¨ar en topplista. D˚a kvar- st˚ar ett annat problem dock, n¨amligen att de anst¨allda kan r˚aka f¨orsumma arbetet eftersom de ¨ar f¨or upptagna att ligga f¨orst i topplistan. Med dessa konsekvenser som grund valde vi att inte ha varken ett rankingsystem eller en topplista i v˚art projekt.
3.3.2 Po¨angsystem
En teknik som skulle kunna inf¨oras i Pulse ¨ar ett po¨angsystem. Detta skulle kunna fungera b˚ade i kombination med utm¨arkelser, exempelvis genom att utm¨arkelser ger po¨ang, men ocks˚a som ett eget system. D˚a skulle anv¨andarna f˚a po¨ang f¨or att g¨ora uppgifter, som kan anv¨andas f¨or att l˚asa upp bel¨oningar. Att vi valde att inte ha med detta ¨ar p˚a grund av tv˚a anledningar - dels blir det mer komplicerat, b˚ade att g¨ora systemet, men ocks˚a f¨or anv¨andarna att f¨orst˚a det. Dessutom blir det
alldeles f¨or l¨att f¨or anv¨andarna att j¨amf¨ora deras framsteg med varandra, j¨amf¨ort med utm¨arkelser d¨ar en anv¨andare m˚aste r¨akna alla de avklarade utm¨arkelserna denna har. Detta kan leda till os¨amja eller att anst¨allda m˚ar d˚aligt, vilket ¨ar d˚aligt f¨or ett f¨oretag och dess arbetsmilj¨o.
4 Projektimplementering
I detta kapitel beskrivs hur vi genomf¨orde implementation. Utm¨arkelser och dess sida f¨orklaras ganska detaljerat, precis som bel¨oningar, och hur de fungerar, ocks˚a g¨ors. Sedan beskrivs andra delar av implementationen lite mer grundl¨aggande. Ge- nom hela kapitlet f¨orekommer kodexempel i olika spr˚ak, s˚a som HTML, TypeScript och C#.
4.1 Utm¨arkelsesidan
F¨orsta steget i projektet var att skapa en ny sida inom Pulse. Denna sida ¨ar till f¨or att kunna se alla utm¨arkelser som anv¨andaren har. F¨or att g¨ora detta anv¨ande vi det LINQ-skript som beskrivs i 2.5.2. Detta skript sk¨oter om det mesta, d.v.s. skapar filer som beh¨ovs och ser till att de inneh˚aller r¨att information. N˚agra sm˚a detaljer beh¨ovde ¨andras, t.ex. namnet p˚a nya sidan.
Efter att sidan genererats valde vi att skapa en DTO f¨or utm¨arkelser, Achieve- mentItemDTO. Detta gjorde vi genom att skapa en TypeScript-fil i samma mapp som ¨ovriga filer tillh¨orande utm¨arkelsesidan. I denna skapade vi en klass som inneh˚aller variabler f¨or titeln, beskrivningen, ikonen och andelen andra anv¨andare som klarat utm¨arkelsen.
e x p o r t c l a s s A c h i e v e m e n t I t e m D T O { p u b l i c t i t l e : s t r i n g;
p u b l i c r a r i t y : n u m b e r; p u b l i c d e s c r i p t i o n : s t r i n g; p u b l i c i c o n ?: s t r i n g;
}
D¨arefter skapade vi en komponent som representerar en utm¨arkelse, se figur 15.
Detta skedde genom vi att anv¨ande Flexboxar i flera lager. F¨orst en stor Flexbox som representerar hela komponenten, sedan ytterligare tre flexboxar inuti. Dessa placerade vi i en kolumn, d.v.s. p˚a varandra. I den ¨oversta t¨ankte vi att titeln och andelen andra anv¨andare som har samma utm¨arkelse ska ligga, medan i den
Figur 15: Utm¨arkelsekomponenten
mellersta t¨ankte vi att ikonen och beskrivningen ska ligga, och slutligen i den understa t¨ankte vi att anv¨andarens framsteg ska ligga. Denna struktur kan ses i figur 16. F¨or att visa r¨att data beh¨over den datan h¨amtas n˚agonstans, allts˚a beh¨over objekt skapas utifr˚an utm¨arkelsesidans DTO. Detta skedde genom att vi skapade en array, AchivementItems, av typen AchievementItemDTO. Detta h¨ande i TypeScript-filen.
Eftersom vi ¨annu inte hade koppling till databasen skapade vi statiska objekt av samma typ och tillskrev dem manuellt data. Sist skrev vi en loop som pushar in alla objekt i arrayen.
I n¨asta steg gick vi till HTML-filen och skapade en for-loop i den div-tag som representerar hela utm¨arkelsekomponenten. Hur l¨ange denna loop k¨ors beror p˚a hur l˚ang arrayen ¨ar, och f¨or varje iteration skapas en ny instans av utm¨arkelsekomponenten.
F¨or varje iteration skriver den ocks˚a ut den data som tillh¨or den nya instansen, genom att anv¨anda loopens index.
<div c l a s s=" item - box - b a s e " r e p e a t .for=" i of A c h i e v e m e n t I t e m s . l e n g t h ">
<div c l a s s=" item - box - t i t l e ">
$ { a c h i e v e m e n t I t e m s [ i ]. t i t l e }
< /div>
< /div>
Figur 16: Markeringar f¨or flexboxar och flexitems.
4.1.1 Popup-f¨onster
Ett problem vi uppt¨ackte n¨ar vi f¨orst skapade objekt av utm¨arkelsesidans DTO var att om en utm¨arkelse har en beskrivning som ¨ar v¨aldigt l˚ang, och tar upp mer yta ¨an vad som f˚ar plats, beh¨over en kortare beskrivning visas ist¨allet. Detta l¨oste vi genom att implementera en metod i TypeScript-filen f¨or den nuvarande sidan.
Denna metod har som uppgift att r¨akna antal tecken i beskrivningen och ge tillbaka en kortare version av den. I den kortare versionen placerar vi ett antal punkter f¨or att indikera att det finns mer text att visa. Efter det provade vi f¨orst att skapa en hover-funktion f¨or att visa hela beskrivingen av en utm¨arkelse n¨ar en anv¨andare placerar musen ¨over utm¨arkelsekomponenten. Det visade sig att detta inte passade in i hur resten av Pulse ser ut och vi valde d¨arf¨or att ignorera hover-funktionen och ha ett popup-f¨onster ist¨allet. I Pulse finns det redan en existerande komponent som anv¨ander sig av popup-funktionalitet, och med den komponenten som mall skapade vi ett popup-f¨onster genom att anv¨anda en existerande Pulse-klass. Popup- f¨onstret aktiverar vi genom att i HTML-filen, n¨ar anv¨andaren trycker p˚a en specifik utm¨arkelse, anropa en metod i den nuvarande sidans TypeScript-fil. Denna ¨oppnar ett nytt f¨onster. Till metoden skickas det med vilken titel som f¨onstret ska ha samt att det bara ska finnas en knapp i form av ett kryss.
Resultatet av popupf¨onstret kan ses i figur 17.
Figur 17: Ett popupf¨onster
4.1.2 Utm¨arkelse-ikon i huvudmenyn
Eftersom Pulse redan har en ikon implementerad i huvudmenyn valde vi att titta p˚a hur de har gjort. Sj¨alva strukturen av huvudmenyn g˚ar att finna i en HTML-fil, och det ¨ar ocks˚a d¨ar vi kunde se hur en ikon ¨ar uppbyggd. Med detta som hj¨alp skapade vi en ny ikon f¨or utm¨arkelser. Genom att s¨atta vissa egenskaper best¨amde vi att den nya ikonen ska ligga bredvid den andra. Den nya ikonen skulle ocks˚a ha en annan bild. Funktionaliteten sker genom ett metodanrop i den HTML-tag som h˚aller sj¨alva ikonen. Dock hann vi aldrig implementera ett system f¨or hantering av riktig data, s˚a i nul¨aget visar ikonen en slumpad siffra ist¨allet f¨or antalet nya utm¨arkelser som anv¨andaren har f˚att sedan denne sist bes¨okte utm¨arkelsesidan.
4.1.3 Uppdelning av avklarade och icke-avklarade utm¨arkelser
N¨asta steg n¨ar det kommer till utm¨arkelser var att dela upp dem p˚a ett s¨att s˚a att det g˚ar att skilja mellan de utm¨arkelser en anv¨andare har f˚att, och de utm¨arkelser en anv¨andare inte har f˚att. Ist¨allet f¨or att g¨ora det enligt designen valde vi att skapa en ny sida, genom LINQ-skriptet fr˚an kapitel 2.5.2. Denna nya sida f˚ar inneh˚alla alla utm¨arkelser en anv¨andare inte har, medan den ursprungliga sidan f˚ar inneh˚alla alla utm¨arkelser som anv¨andaren har. Eftersom det enda som skiljer sidorna ˚at
¨ar vilka utm¨arkelser som visas var det l¨att f¨or oss att ¨overf¨ora ”utm¨arkelsesidans”
Figur 18: Sidnummersystemet med sida 1 vald.
funktionalitet till den nya sidan. Det som beh¨ovde ¨andras var vilka utm¨arkelse- objekt som h¨amtas, vilket vi styrde genom att skapa en ny databasfr˚aga som h¨amtar ut alla utm¨arkelser d¨ar anv¨andaren inte har 100% i framsteg.
4.2 Sidnummersystem
Efter att vi hade skapat objekt utifr˚an utm¨arkelsesidans DTO ins˚ag vi att det beh¨ovs n˚agon form av ett smidigt anv¨andarsystem f¨or att bl¨addra bland de tillg¨angliga utm¨arkelserna. Vi valde d¨arf¨or att skapa ett sidnummersystem, se figur 18. Anled- ningen till att vi valde just det tillv¨agag˚angss¨attet ¨ar att det inte avviker fr˚an den nuvarande standarden i Pulse d˚a anv¨andaren ej beh¨over scrolla bland utm¨arkelserna p˚a sidan.
F¨or att skapa sidnummersystemet s˚a b¨orjade vi med att g¨ora den grafiska representationen. ¨Aven h¨ar anv¨ande vi flexboxar f¨or att placera alla figurer och pilar p˚a r¨att plats. Sedan anv¨andes den nuvarande sidans TypeScript-fil f¨or att ordna sj¨alva funktionaliteten och att h˚alla reda p˚a vilket sidnummer som anv¨andaren ¨ar p˚a i nul¨aget, och med hj¨alp av detta ber¨akna vilka sidkomponenter som ska visas p˚a n¨asta och f¨org˚aende sida. Vi la ocks˚a till tv˚a kontroller f¨or n¨ar anv¨andaren st˚ar p˚a f¨orsta eller sista sidnumret och trycker p˚a v¨anster respektive h¨ogerpilen s˚a ska anv¨andaren stanna kvar p˚a nuvarande sidnummer.
4.3 Databas och fr˚agor
I databasen s˚a valde vi f¨orst att skapa alla de tabeller som vi beskrev i entitetsdia- grammet i kapitel 3.2. Vi skapade tabellerna med hj¨alp av det grafiska gr¨anssnittet i Microsoft SQL Server Management Studio [26]. I samtliga av v˚ara tabeller la vi till kolumner s˚a som; created, update och changed f¨or att f¨olja den nuvarande konven- tion i de tabeller som existerar i databasen. Med hj¨alp av det grafiska gr¨anssnittet skapade vi ¨aven prim¨arnycklar f¨or v˚ara tabeller. F¨or att s¨atta ut fr¨ammandenycklar skrev vi SQL-fr˚agor d¨ar vi skapade f¨orh˚allanden mellan tabellerna. En av de exi- sterande tabellerna f¨or anv¨andare, User, kopplar vi m˚anga fr¨ammandenycklar till d˚a v˚ara tabeller ofta har anv¨andarens id som en del av prim¨arnyckeln. Slutligen s˚a anv¨ande vi det grafiska gr¨anssnittet f¨or att skriva in n˚agra rader data i tabellerna f¨or att sedan kunna testa v˚ara fr˚agor i Pulse. N¨ar tabellerna och datan ¨ar redo s˚a genererar vi entitetsklasser till projektet med hj¨alp av Entity Framework. Vi kan d¨armed modellera v˚ara fr˚agor med objektorientering.
Ett exempel p˚a en fr˚aga vi har implementerat ¨ar hur vi laddar vilka utm¨arkelser som en anv¨andare har. Eftersom fr˚agan ska skickas tillbaka i form av ett objekt, s˚a skapar vi ett DTO, AchievementUserDTO. I detta objekt sparar vi information om de utm¨arkelser som ska visas f¨or anv¨andaren.
p u b l i c c l a s s A c h i e v e m e n t U s e r D T O {
p u b l i c int U s e r I d { get ; set ; } p u b l i c s t r i n g U s e r N a m e { get ; set ; }
p u b l i c List < A c h i e v e m e n t D T O > A c h i e v e m e n t s { get ; set ; }
p u b l i c A c h i e v e m e n t U s e r D T O ( U s e r u s e r ) { U s e r I d = u s e r . U s e r I d ;
U s e r N a m e = u s e r . U s e r N a m e ;
A c h i e v e m e n t s = new List < A c h i e v e m e n t D T O >() ; }
}
F¨or att st¨alla fr˚agan s˚a anv¨ander vi oss av LINQ. I den vill vi h¨amta vilka utm¨arkelser som en anv¨andare har klarat av. Det f¨orsta vi g¨or i fr˚agan ¨ar att
plocka ut den anv¨andare som matchar anv¨andarens anv¨andarnamn fr˚an entiteten Users.
var u s e r = _ c f C o n t e x t . U s e r s . A s N o T r a c k i n g () . T o L i s t () . S e l e c t (
u = > new A c h i e v e m e n t U s e r D T O ( u ) ) . W h e r e (
u = > u . U s e r N a m e == r e q u e s t . U s e r N a m e ) . F i r s t () ;
Efter att vi har sparat anv¨andaren som vi ¨ar intresserad av i variabeln user s˚a kan vi anv¨anda anv¨andarens id f¨or att hitta alla objekt i entiteten AchievementUserIds d¨ar villkoret ¨ar att; anv¨andarens id matchar och framsteget ¨ar 100 %. Detta formulerar vi i f¨oljande fr˚aga.
var C o m p l e t e d A c h i e v e m e n t s = _ c f C o n t e x t . A c h i e v e m e n t s U s e r I d s . I n c l u d e (
b = > b . A c h i e v e m e n t ) .
A s N o T r a c k i n g () . T o L i s t () . W h e r e (
au = > au . A c h i v e m e n t P r o g r e s s
== (d e c i m a l) 100 &&
au . U s e r I d == u s e r . U s e r I d ) . S e l e c t (
a = > new A c h i e v e m e n t D T O ( a . A c h i e v e m e n t , a .
A c h i v e m e n t P r o g r e s s ) ) . T o L i s t () ;
De utm¨arkelser som matchar sparas som en lista i variabeln CompletedAchieve- ments. N¨ar vi nu har informationen vi beh¨over fr˚an databasen s˚a returnerar vi ett svarsobjekt med information i.
4.4 Bel¨oningssidan
Bel¨oningssidan skapar vi f¨or att visa upp de tillg¨angliga bel¨oningarna som finns samt att l˚ata anv¨andaren v¨alja mellan bel¨oningar som denne vill aktivera. Vi b¨orjade d¨arf¨or med att skapa bel¨oningssidan med hj¨alp av LINQ-skriptet n¨amnt tidigare i kapitel 2.5.2. Efter detta steg skapade vi strukturen f¨or bel¨oningskomponenten med hj¨alp av flexboxar. Den slutgiltiga grafiska representationen av bel¨onings- komponenten kan ses i figur 19.
Figur 19: Tv˚a bel¨oningskomponenter med varierande m¨angd bel¨oningar.
F¨or att kunna visa varierande bel¨oningar s˚a valde vi att implementera en s˚a generell DTO som m¨ojligt f¨or att kunna uppfylla detta. Denna kallar vi f¨or AwardItemDTO och den ¨ar mer komplex ¨an den tidigare DTO:n vi beskrev i kapitel 4.1.
e x p o r t c l a s s A w a r d I t e m D T O { p u b l i c t i t l e : s t r i n g;
p u b l i c r e q u i r e m e n t : n u m b e r;
p u b l i c a w a r d I t e m B o d i e s : A w a r d I t e m B o d y [] = [];
c o n s t r u c t o r( a w a r d : A w a r d D T O ) { c o n s t b o d y T o k e n : s t r i n g = ’ * ’;
t h i s. t i t l e = a w a r d . R e w a r d T i t l e ;
t h i s. r e q u i r e m e n t = a w a r d . R e q u i r e m e n t ;
a w a r d . A w a r d I t e m B o d y . s p l i t ( b o d y T o k e n ) . f o r E a c h ((
a w a r d B o d y I t e m ) = > t h i s. a w a r d I t e m B o d i e s . p u s h (new A w a r d I t e m B o d y ( a w a r d B o d y I t e m ) ) ) ;
}
F¨or att kunna forma bel¨oningskomponenten p˚a ett generellt s¨att s˚a bygger vi upp DTO:n av n˚agra enklare variabler s˚a som, titel och krav f¨or att l˚asa upp bel¨oningen.
Dessa kompletterar vi med en lista som inneh˚aller de olika bel¨oningstyperna som kan ges i en bel¨oningskomponent. I AwardItemDTOs konstruktor s˚a tolkar vi en l˚ang str¨ang av information som beskriver antalet instanser av klassen Awar- dItemBody som ska finnas i listan. N¨ar dessa instanser skapas och placeras i listan kommer de att ha r¨att information d˚a dessa instanser i sin tur tolkar datan i AwardItemBody-konstruktorn och delar ut datan till sina variabler.
e x p o r t c l a s s A w a r d I t e m B o d y { p u b l i c h e a d e r : s t r i n g; p u b l i c i c o n N a m e ?: s t r i n g;
p u b l i c a w a r d I t e m B o d y S l o t s : A w a r d I t e m B o d y S l o t [] = [];
c o n s t r u c t o r( a w a r d B o d y I t e m : s t r i n g) { c o n s t i t e m B o d y T o k e n : s t r i n g = ’ # ’;
c o n s t a w a r d I t e m B o d y S l o t s = a w a r d B o d y I t e m . s p l i t ( i t e m B o d y T o k e n ) ;
c o n s t p a r t s = a w a r d I t e m B o d y S l o t s . s p l i c e (0 , 1) [ 0 ] . s p l i t (’ ,
’) ;
t h i s. h e a d e r = p a r t s [ 0 ] ; t h i s. i c o n N a m e = p a r t s [ 1 ] ;
a w a r d I t e m B o d y S l o t s . f o r E a c h (( a w a r d I t e m B o d y S l o t ) = > t h i s. a w a r d I t e m B o d y S l o t s . p u s h (new A w a r d I t e m B o d y S l o t (
a w a r d I t e m B o d y S l o t ) ) ) ; }
}
Ett exempel p˚a en datastr¨ang f¨or bel¨oning 1, se figur 19, som vi skickar till AwardItemDTO:s konstruktor ¨ar skriven p˚a f¨oljande s¨att:
Tema,fa fa-paint-brush#P˚ask Tema,1*Titel,fa fa-header
#Byggare Bob,1*Font,fa fa-font#Courier New,1
Genom att avgr¨ansa datan med tecknet # s˚a vet konstruktorn att inneh˚allet mellan avgr¨ansningarna ¨ar instanser av AwardItemDTO:s lista. Vi delar sedan upp datan ytterligare med hj¨alp av * tecknet.
4.4.1 Aktivering av bel¨oningar
N¨ar anv¨andaren trycker p˚a en vald bel¨oning i bel¨oningskomponenten, t.ex. ett tema (se figur 19), s˚a anropas en funktion i TypeScript-filen.
c l i c k .d e l e g a t e=" a c t i v a t e A w a r d ( a w a r d I t e m s [ i ]. a w a r d I t e m B o d i e s [ j ]. header , a w a r d I t e m s [ i ]. a w a r d I t e m B o d i e s [ j ].
a w a r d I t e m B o d y S l o t s [ k ]. id ) "
Funktionen tar emot vilken typ av bel¨oning det ¨ar som anv¨andaren har tryckt p˚a samt vilket id bel¨oningen har. Om anv¨andaren har tryckt p˚a en titel s˚a anv¨ander vi ett meddelandeobjekt, med den nya titeln som inneh˚all, f¨or att notifiera andra
klasser, s˚a som huvudmenyn, att anv¨andarens titel har uppdaterats. Om anv¨andaren ist¨allet trycker p˚a ett tema eller typsnitt s˚a anropar vi en jQuery-funktion f¨or att
¨andra elementen i huvud- och sidmenyn.
4.4.2 Tema och typsnitt
Vi b¨orjade med att implementera teman genom att anv¨anda generella regler f¨or vilka element som ska p˚averkas n¨ar jQuery-funktionen nedan k¨ors.
p r i v a t e c h a n g e P r o p e r t i e s ( s t y l e : S t y l e D a t a D T O []) {
s t y l e . f o r E a c h (( s ) = > s . i s H o v e r ? t h i s. s e t O n H o v e r ( s ) : $ ( s . n a m e ) . css ( s . p r o p e r t y , s . v a l u e ) ) ;
}
En nackdel med detta uppt¨acktes snabbt d˚a det var sv˚art att begr¨ansa reglerna f¨or att enbart applicera temat p˚a huvud- och sidmenyn. Vi skapade d¨arf¨or ett DTO, StyleDataDTO, f¨or att anv¨anda jQuery-funktionen p˚a enskilda specifika element i huvud- och sidmenyn.
e x p o r t c l a s s S t y l e D a t a D T O { p u b l i c n a m e : s t r i n g;
p u b l i c p r o p e r t y : s t r i n g;
p u b l i c v a l u e : s t r i n g;
p u b l i c i s H o v e r : b o o l e a n = f a l s e; }
Uppgiften f¨or detta DTO ¨ar att spara all information som ett tema eller typsnitt beh¨over ha f¨or att appliceras p˚a sid- och huvudmenyn. N¨ar vi applicerar ett tema s˚a skickar vi in en lista av detta DTO till jQuery-funktionen som anv¨ander variablerna i DTO:n f¨or att applicera temat p˚a elementen. Anv¨andarna kan ¨aven v¨alja typsnitt, implementation av detta har vi gjort enligt samma m¨onster som temat. I figur 20 har en anv¨andare valt jultemat tillsammans med ett typsnitt.
4.4.3 Titel
F¨or att implementera titlar s˚a beh¨ovde vi fundera ut hur vi kan notifiera andra sidor ¨an den nuvarande sidan. Detta l¨oste vi genom att implementera ett medde-
Figur 20: En anv¨andare som applicerat ett tema, och ett typsnitt.
Figur 21: En anv¨andare som applicerat ett tema, och en titel.
landeobjekt som andra klasser lyssnar efter, specifikt klasserna som ¨ar beroende av anv¨andarens namn. I Pulse finns det existerande meddelande-och mottagare- funktioner, s˚a det enda vi beh¨ovde implementera f¨or att uppfylla denna funktionali- tet var att skapa en meddelandeklass som inneh˚aller den nya titel som anv¨andaren har valt. I figur 21 har en anv¨andare aktiverat en titel.
5 Resultat
H¨ar ber¨attas om resultatet av de valda Gamification-tekniker som vi har valt att im- plementera, t.ex. vilka f¨or¨andringar som har skett fr˚an designen och saker som har tagits bort av olika sk¨al. Det diskuteras ocks˚a om framtida utvecklingsm¨ojligheter inom ramen f¨or de Gamification-tekniker som anv¨ants och l¨ardomar som har dragits av detta projekt.
Det som har implementerats ¨ar tv˚a utm¨arkelsesidor, en f¨or avklarade utm¨arkelser och en f¨or icke-avklarade utm¨arkelser. D¨ar kan anv¨andaren se och bl¨addra bland olika utm¨arkelser, och varje utm¨arkelse har en popup-funktion som visar hela beskrivningen. Sedan har en bel¨oningssida implementerats, d¨ar olika bel¨oningar visas, kan bl¨addras mellan, och kan v¨aljas. Till alla sidor har databasen kopplats, och olika databas-fr˚agor har formulerats f¨or att h¨amta olika typer av data.
5.1 F¨or¨andringar fr˚an designen
Efter implementationen finns det vissa aspekter som har f¨or¨andrats j¨amtf¨ort med hur de ska se ut och fungera enligt designen. Det finns flera anledningar till detta, men i huvudsak kan de sammanfattas som att momenten var f¨or komplicerade, eller att det inte var tillr¨ackligt med tid kvar.
En av sakerna som ¨andrats ¨ar utm¨arkelsesidan. Enligt designen ska utm¨arkelse- sidan inneh˚alla tv˚a olika grupper f¨or avklarade respektive icke-avklarade utm¨arkelser, och en flik f¨or att se m¨ojliga bel¨oningar. Detta har ¨andrats till att ist¨allet ha tre olika sidor som inneh˚aller avklarade utm¨arkelser, icke-avklarade utm¨arkelser samt bel¨oningar. Alla dessa l¨ankas i sidmenyn d¨ar de ligger under en egen flik kallad Gamification, se figur 22. Anledningen till detta ¨ar att skapandet av en sida var smi- digt, och det kom med m˚anga saker automatiskt, t.ex. blev all l¨ankning korrekt fr˚an b¨orjan. Dessutom passade det b¨attre in i hur Pulse ¨ar uppbyggt, vilket underl¨attar
Figur 22: Gamification-fliken i menyn f¨or anv¨andarna.
Ytterligare en f¨or¨andring ¨ar tema-ikonen, och hur en anv¨andare v¨aljer bland sina teman, typsnitt och titlar. Det finns ingen tema-ikon, utan ist¨allet en bel¨oningssida.
H¨ar syns alla bel¨oningar, och f¨or att v¨alja ett s¨arskilt tema eller typsnitt trycker du helt enkelt p˚a det du vill anv¨anda. Teman ¨ar dessutom bara applicerade p˚a huvud-och sidmenyn, men inte p˚a olika paneler. De ¨ar of¨or¨andrade fr˚an hur de ser ut i Pulse originellt.
5.2 Uteblivna features
Prioriteringen av f¨orslag och ¨onskem˚al har i samr˚ad med arbetsgivaren omv¨arderats kontinuerligt under projektets g˚ang. De vanligaste anledningarna till ompriorite- ringen var: begr¨ansningar inom Pulse, tids˚atg˚ang f¨or implementering och redun- dans av funktionalitet. Under st¨orre delen av den tidiga implementeringsfasen s˚a minskades arbetskraften p˚a grund av l¨angre sjukdomstid, vilket ledde till att st¨orre nedsk¨arningar fick g¨oras p˚a vissa f¨orslag.
Ett f¨orslag som kom in fr˚an arbetsgivaren i ett sent skede av projektdesignen
var konceptet att ha ett mini-spel f¨or anv¨andaren n¨ar ett fel uppst˚ar i Pulse. I kapitel 3.1.3 beskrevs den planerade implementation av konceptet, men eftersom detta mini-spel hade l˚ag prioritet s˚a togs den bort helt och h˚allet n¨ar brist p˚a tid uppstod.
En annan planerad feature som inte blev av p˚a grund av l˚ag prioritet var s¨okning och sortering av utm¨arkelserna. Tanken var att n¨ar anv¨andaren bes¨oker en av utm¨arkelsesidorna s˚a skulle anv¨andaren kunna v¨alja att sortera utm¨arkelser via olika alternativ s˚a som; namn, framsteg och andelen andra anv¨andare som har denna utm¨arkelse.
I en tidig del av projektets designfas var tanken att anv¨andaren skulle kunna ha en egen panel f¨or utm¨arkelser p˚a sin nuvarande arbetssk¨arm, se kapitel 3.1.1. Efter ett tag ins˚ags att den tid som skulle beh¨ova l¨aggas p˚a en utm¨arkelse-panel var f¨or stor f¨or att det skulle vara v¨art att g¨ora det, i j¨amf¨orelse med andra saker som var kvar och beh¨ovde implementeras.
Sp˚arning av en anv¨andares framsteg f¨or olika utm¨arkelser ¨ar en funktion som
¨ar n¨odv¨andig f¨or att hela utm¨arkelse-systemet ska fungera. P˚a grund av tidsbrist hanns detta dock inte med, men vid vidareutveckling av prototypen ¨ar detta n˚agot som b¨or tas itu med.
5.3 Anv¨andning av Gamification-systemet
F¨orsta steget f¨or att kunna anv¨anda Gamification-systemet i en framtida produkt- version av Pulse ¨ar att vidareutveckla det, eftersom det i nul¨aget saknar ett f˚atal funktioner som kr¨avs. Detta b¨or dock g˚a relativt snabbt, eftersom systemet har f¨oljt de standarder och konventioner som anv¨ands inom Pulse. N¨ar detta ¨ar gjort b¨or det vara redo f¨or att implementeras i framtida produktversioner relativt sm¨artfritt.
5.4 L¨ardomar f¨or framtiden
Det finns m˚anga saker som kan tas med fr˚an detta projekt. Fr¨amst att spendera mer tid p˚a sj¨alva designen, och se till att denna ¨ar v¨al genomt¨ankt i alla aspekter, eftersom vi sj¨alva inte hade en tillr¨ackligt genomt¨ankt design och d˚a fick spendera tid p˚a att omarbeta vissa delar av den vid implementeringen. Sedan att inte un- derskatta ett existerande system och dess komplexitet, utan att vara ute i god tid med att f¨ors¨oka f¨orst˚a detta. Exempelvis genom att fr˚aga efter dokumentation som f¨orklarar den ¨overgripande strukturen.
5.5 Framtida utvecklingsm¨ojligheter
Pulse ¨ar ett stort projekt och det finns m˚anga intressanta delar av Pulse d¨ar ytter- ligare Gamification-tekniker kan implementeras. I v˚ar prototyp s˚a har vi valt att fokusera p˚a anv¨andarens personliga sidor. En framtida id´e som vi tycker ¨ar intres- sant ¨ar att ¨oka integration mellan anv¨andarna ytterligare, genom att exempelvis ut¨oka funktionaliteten f¨or titlar. I nul¨aget ¨ar funktionaliteten implementerad s˚a att titeln endast visas f¨or den inloggade anv¨andaren, ist¨allet f¨or att ¨aven visas f¨or andra vid exempelvis meddelanden och kvittenser.
6 Slutsats
Arbetet har i sitt slutskede uppn˚att den reviderade m¨angd funktionalitet som kom- mits ¨overens om med handledarna hos AFRY, och d¨armed har det uppsatta m˚alet uppn˚atts.
I designkapitlet identifieras de tekniker inom Gamification som anses vara mest l¨ampliga f¨or ett arbetsverktyg som Pulse. Framf¨orallt betonas utm¨arkelser som den teknik som st¨orre delen av arbetet kommer handla om. I kapitlet beskrivs och visas ocks˚a hur implementeringen av utm¨arkelser, och dess bel¨oningar, ska se ut.
I implementeringskapitlet visas det hur implementeringen av olika features och funktioner har utf¨orts. Detta sker i textform, med st¨od av bilder och kodexempel.
De features som skrivs om mest ¨ar utm¨arkelsesidan och bel¨oningssidan, vilka i sin tur inneh˚aller en rad underrubriker.
I resultatkapitlet ber¨attas det om funktionalitet som implementerats p˚a ett annorlunda vis ¨ar hur den har designats, samt funktionalitet som uteblivit helt och h˚allet. F¨or¨andringarna f¨orklaras oftast av tv˚a anledningar - dels att ¨andringen skapar en b¨attre struktur och design som passar in i Pulse, dels en brist p˚a tid. I kapitlet n¨amns ¨aven l¨ardomar som har dragits av genomf¨orandet av detta arbete.
En av dessa ¨ar att inte underskatta ett system som Pulse, d˚a det visade sig vara relativt komplext.
Aven om inte alla planerade features har implementerats, har ¨and˚a de viktigaste¨ hunnits med. Framf¨orallt utm¨arkelser och det som kretsar kring dem, exempelvis bel¨oningar. Utm¨arkelser och bel¨oningar saknar dock vissa funktioner som kr¨avs f¨or att systemet ska vara helt komplett och redo att anv¨andas av arbetsgivaren. Ett exempel p˚a detta ¨ar att det beh¨ovs ett s¨att att tilldela en anv¨andare en viss utm¨arkelse n¨ar denne uppfyllt ett visst kriterium. Detta ¨ar en sak som skulle kunna arbetas p˚a i framtiden. Ytterligare saker som skulle kunna utvecklas mer ¨ar funktionaliteten f¨or teman, exempelvis skulle ett tema kunna p˚averka fler delar av en sida ¨an vad den
g¨or nu, och bel¨oningar, d¨ar andra typer skulle kunna hittas p˚a. Ut¨over detta finns det s¨akert otaliga andra saker som kan utvecklas, i och med att Gamification ¨ar s˚a brett.
Referenser
[1] SFR (se). INGO - L˚agt pris p˚a drivmedel.URL: https://www.ingo.se/
sv_SE (h¨amtad 2020-05-15).
[2] About us. en.URL: https://afry.com/en/about-us (h¨amtad 2020-05-08).
[3] Offices. en. URL: https://afry.com/en/offices (h¨amtad 2020-05-08).
[4] Gamification — Definition of Gamification by Merriam-Webster. URL: https://www.merriam- webster.com/dictionary/gamification#
h1 (h¨amtad 2020-02-28).
[5] Roger Smith. ”The Long History of Gaming in Military Training”. en. I:
Simulation & Gaming 41.1 (febr. 2010), s. 6–19. ISSN: 1046-8781.DOI: 10 . 1177 / 1046878109334330. URL: https : / / doi . org / 10 . 1177 / 1046878109334330 (h¨amtad 2020-06-10).
[6] Upp till 5 % n¨ar du handlar p˚a Coop. sv-se.URL: https://www.coop.se/
medlem/5-procent/ (h¨amtad 2020-05-08).
[7] Gabe Zichermann och Christopher Cunningham. Gamification by design:
implementing game mechanics in web and mobile apps. 1st. ed. OCLC:
ocn711045699. Sebastopol, Calif: O’Reilly Media, 2011.ISBN: 9781449397678.
[8] Google Trends.URL: https://trends.google.com/trends/explore?
date=all&q=%5C%2Fm%5C%2F0cm8xv9 (h¨amtad 2020-02-28).
[9] Welcome to Steam.URL: https://store.steampowered.com/ (h¨amtad 2020-02-27).
[10] Khan Academy — Free Online Courses, Lessons & Practice. en. URL: https://www.khanacademy.org/ (h¨amtad 2020-05-10).
[11] TypeScript - JavaScript that scales.URL: http://citeseerx.ist.psu.
edu/viewdoc/download?doi=10.1.1.650.1531&rep=rep1&type=pdf (h¨amtad 2020-02-07).
[12] What is Aurelia? URL: https://aurelia.io/docs/overview/what- is-aurelia (h¨amtad 2020-02-07).
[13] What is single-page application (SPA)? - Definition from WhatIs.com. en.
URL: https://whatis.techtarget.com/definition/single-page- application-SPA (h¨amtad 2020-05-06).
[14] JS Foundation- js.foundation. jQuery. en-US.URL: https://jquery.com/
(h¨amtad 2020-03-13).
[15] Flexbox. en. URL: https://developer.mozilla.org/en- US/docs/
Learn/CSS/CSS_layout/Flexbox (h¨amtad 2020-06-10).
[16] SQL Server 2019. URL: http : / / www . microsoft . com / sqlserver (h¨amtad 2020-02-28).
[17] 14:00-17:00. ISO/IEC 9075-1:2016. en. URL: https://www.iso.org/
cms/render/live/en/sites/isoorg/contents/data/standard/06/
35/63555.html (h¨amtad 2020-05-10).
[18] BillWagner. Language-Integrated Query (LINQ) (C#). en-us.URL: https:
/ / docs . microsoft . com / en - us / dotnet / csharp / programming - guide/concepts/linq/ (h¨amtad 2020-04-03).
[19] wadepickett. Entity Framework documentation. en-us.URL: https://docs.
microsoft.com/en-us/ef/ (h¨amtad 2020-05-04).
[20] smitpatel. Querying Data - EF Core. en-us.URL: https://docs.microsoft.
com/en-us/ef/core/querying/ (h¨amtad 2020-05-05).
[21] smitpatel. Raw SQL Queries - EF Core. en-us. URL: https : / / docs . microsoft . com / en - us / ef / core / querying / raw - sql (h¨amtad 2020-05-05).
[22] Archiveddocs. Data Transfer Object. en-us.URL: https://docs.microsoft.
com/en-us/previous-versions/msp-n-p/ff649585(v%5C%3dpandp.
10) (h¨amtad 2020-04-03).
[23] J¨urgen Kletti. Manufacturing execution system-MES. Springer, 2007.
[24] What Is OEE (Overall Equipment Effectiveness)? — OEE. URL: https:
//www.oee.com/ (h¨amtad 2020-04-16).
[25] As the Chrome dino runs, we caught up with the Googlers who built it. en.
Sept. 2018.URL: https://blog.google/products/chrome/chrome- dino/ (h¨amtad 2020-05-04).
[26] markingmyname. SQL Server Management Studio (SSMS) - SQL Server Management Studio (SSMS). en-us.URL: https://docs.microsoft.com/
en- us/sql/ssms/sql- server- management- studio- ssms (h¨amtad 2020-05-11).
