KAPITEL 5 - RESULTAT
5.1 T ESTNING
5.1.2 Visual Studio Debugger
Visual Studio har en inbyggd debugger som bygger och förbereder testmiljön Ripple, kopplar konsoller och andra komponenter till testmiljön för att utvecklaren ska kunna avlusa sitt projekt. Debuggern kopplar dessa komponenter till emulatorn:
Javascript Console
Javascript Console visar outputs från debug loggar, javascript felmeddelanden, varningar och andra meddelanden.
DOM explorer
DOM explorer är en del av Visual Studio Debugger som visar hela DOM-strukturen [25] och
tillåter utvecklare att observera och manipulera det under debugprocessen.
36 5.1.3 Färdig app
Fig 5.1: Inloggningssida Fig 5.2: Huvudsida
När appen startas så laddas och visas loginsidan enlig figur 5.1. På loginsidan finns två logotyper, en på toppen av sidan och en annan under loginknappen. Mellan de två logotyperna finns två formulär och en knapp, det ena formuläret efterfrågar ett användarnamn och det andra ett lösenord. Knappen skickar formulärdatan för autentisering.
Väl inloggad visas huvudsidan enligt figur 5.2, i toppen av sidan ligger ett sidhuvud med flikar för navigering som kommer att vara synligt även vid sidbyte, så den ligger kvar även i andra sidor. Nedanför sidhuvudet är appens huvudområde där den markerade flikens sida visas. Vid appens start är huvudsidans flik markerad, den har en mätarliknande ikon.
Centrerat i toppen av huvudsidan finns ett canvaselement som ritar en halvcirkulär mätare med en visare som representerar den nuvarande energianvändningen. Beroende på visarens position så justeras mätarbågens färg där den blir grönare desto bättre det går och rödare för sämre. Om det skulle vara svårt att läsa av värdet endast från mätaren så står jämförelsevärdet i klartext direkt under mätaren. I botten av huvudsidan finns två stycken fält reserverade för driftinfo och sammanläggning av anläggningarnas totala energianvändning för en viss tidsperiod.
37
Fig 5.3: a) Anläggningssidan, b) Info pop-up.
Anläggningssidan nås genom knappen i sidhuvudet med en kryssruteikon. Sidan innehåller en lista med anläggningar samt en sökruta som tar emot text för att filtrera listan. Listan är placerad under sökrutan.
Det skapas ett listelement för varje registrerad anläggning och varje listelement har en kryssruta för markering och avmarkering, denna är markerad från början, samt att de har en knapp för att visa ytterligare information om anläggningen i en liten pop-up ruta enligt fig 5.3b. De markerade listelementen får sin data inlagd i en lista som används för att visa sin data på huvud- och grafsidan.
38
Fig 5.4: a) Grafsidan, b) Rapport pop-up.
Grafsidan nås genom knappen i sidhuvudet med en grafpilsikon. På grafsidan finns ett grafelement som visar all data för alla markerade anläggningar över en viss tidsperiod, nuvarande för varje dag över en månad.
Under grafen finns tre knappar, en för att kunna ändra mätperiod som saknar funktion, en knapp för att ändra grafens typ mellan stolp- och linjegraf och en sista knapp som visar grafens data i en lista i en pop-up enligt fig 5.4b. När mobilen läggs ned på sidan ställs skärmen om och grafen tar upp hela höjden och bredden av skärmen samt att knapparna skjuts ned utanför skärmen men kan nås genom att skrolla ned.
Fig 5.5: Olika typer av grafer.
39
Fig 5.6: a) Inställningssidan, b) Prefens-modal, c) Manual-modal, d) Om-modal
Inställningssidan nås genom knappen i sidhuvudet med en kugghjulsikon. På inställningssidan finns fyra knappar varav tre av dem aktiverar och visar modaler. Gemensamt för alla modaler är att alla har en OK-knapp som stänger ner modalen och en kryssknapp i övre högra hörnet.
Första knappen, preferenser, aktiverar och visar en modal där det ska finnas ett antal element för att ställa in diverse preferenser för appen, nuvarande endast en slider och en på-av knapp vilka saknar funktioner.
Andra knappen, manual och kontakt, aktiverar en modal innehållande en logotyp i topp och text under som kan beskriva hur appen fungerar om det skulle behövas samt ett område för kontaktinformation.
Tredje knappen, om appen, startar även den en modal, denna modal innehåller endast lite text med appens versionsnummer och utvecklare.
Fjärde knappen, logga ut, loggar ut användaren och rensar all data.
40
Kapitel 6 - Slutsats
I detta kapitel beskrivs alla slutsatser och tidsåtgång som lagts ned på projektet. Kapitlet innehåller diskussioner om vad som kunde gjorts annorlunda och vad som inte var avklarat vid projektets slut utan lämnas till arbete i framtiden.
6.1 Slutsatser
Vid projekttidens slut så var appen i prototypstadiet, fullt fungerande på testenheterna.
Användaren kunde logga in med testuppgifter och bli autentiserade i appen lokalt utan hjälp från utomstående servrar. Sidorna i appen visar hur REM-sidan kan reflekteras i appform med nya, mer underhållande funktioner som att se hur mycket bättre energianvändandet har gått jämfört med tidigare värden i form av ett grafiskt element istället för REM-graferna.
Många önskade funktioner hann inte implementeras under projekttidens gång. Det största uteblivandet var appens koppling till Rejlers API då det var en av de huvudsakliga funktionerna som eftertraktades. Utan kopplingen så användes testfiler för att härma ett API så mycket som möjligt.
Andra funktioner som uteblev var möjligheten för användaren att sätta egna energimål för att ytterligare engagera användaren i sitt sparande. Detta är en viktig funktion för att appen ska bli mer interaktiv och inte bara kunna visa data. Inställningssidan är också inkomplett och många funktioner saknas för att användaren ska kunna anpassa appen efter eget behov som exempelvis inställningar för tidsintervall för mätningar.
6.2 Tidsåtgång
fig 6.1 Estimerat kontorsschema
41
Vid projektets början antogs det att jobbet skulle fördelas över tre arbetsdagar i veckan med Karlstads Universitets mall för upplägg av examensarbete inom datavetenskap.
fig 6.2 faktiskt kontorsschema
Den faktiska tidsplanen blev fyra arbetsdagar i veckan. Det blev mer arbete än vad som estimerats.
6.2.1 Vad kunde göras annorlunda?
I projektets början användes inga överliggande ramverk som gör utvecklingen enklare. Efter flera veckors tid utvecklades appen med endast grundverktyg och mycket blev hårdkodat. När VS15 installerades så byggdes appen om från grunden med det nyinstallerade ramverket Ionic. En annan punkt är att istället för att utdaterade versioner av mjukvara användes så skulle mer aktuella versioner ersatt dem. I flera veckor användes VS13 som innehöll utdaterade Cordova-ramverk och emulatorer innan det ersattes av VS15.
6.2.2 Problem
Appen var tänkt att från början vara kopplad till ett API som framställts av Rejlers i Motala, men då det inte kunde nås under projektets gång så har lokala testfiler fått användas, för att efterlikna ett API så mycket som möjligt. Rejlers API var under utveckling och kunde endast nås genom Rejlers fasta nätverk där vi inte hade tillräcklig åtkomstnivå. Detta tillsammans med andra säkerhetsaspekter som stod i vägen gjorde det omöjligt för oss att kunna nå Rejlers API från telefonerna. Under projektets gång uppstod två återkommande felmeddelanden som hindrade arbetets fortgång och nämns här som mindre problem:
Unable to Attach
Om VS15 inte är installerat på systemdisken till datorn kan felet Unable to Attach framstå när emulatorn och debuggern startas och dödar debug-processen och stänger ned emulatorn. Felet
42
gör att processen avbryts och emulatorn måste startas på nytt. Det är ett slöseri med tid. Felet undveks genom att bygga och starta projektet utan debugger en gång, efter det stängs inte emulatorn ned när felet uppstår, men debug-processen stängs av.
I Haz Cheeseburger?!?!
Om emulatorn saknar någon funktion för hårdvarutolkning så framstår felet ”I Haz Cheezeburger?!?!”. Felet låter något skämtaktigt men är ett genuint felmeddelande i Rippleemulatorn. I VS13 så uppkom detta fel varje gång emulatorn startades och det verkade inte finnas någon lösning på det, så ett kodblock som dolde rutan användes. I VS15 framstod endast felet i emulatorn vid användning av kommandona screen.lockOrientation() och screen.unlockOrientation() vilka var tänkta att användas över hela appen så även om användaren lutade enheten låg skärmen kvar i samma läge utom på grafsidan där grafen syns bättre i liggande läge.
6.2.3 Framtida arbete
Appens protoypstadium innebär att det finns mycket mer att implementera. Appen har många områden som saknar eller har minimal funktion. Följande arbete kvarstår:
• koppling saknas till Rejlers API då det inte var färdigt/tillgängligt under projektets gång
• lägga till flera varianter av jämförelsefunktioner, som jämförelse med anläggningar av samma typ och storlek, som efterfrågats men inte hunnits med under projektets gång
• lägga till funktionalitet för att ändra språk i appen för de regioner som finns på Energitjänsters REM dvs. finska, norska och engelska
• lägga till fungerande preferenser för appen som tillåter användaren att ändra färger, standard grafvariant, standard tidsperiod för mätning, mål i energianvändning och annat
43
Referenser
[1] ”Hem | Rejlers”. [Online]. Tillgänglig vid: http://www.rejlers.se/. [Åtkomstdatum: 28-dec-2015].
[2] ”Startsida Rejlers Energitjänster AB”. [Online]. Tillgänglig vid:
http://www.komplettaenergitjanster.se/. [Åtkomstdatum: 28-dec-2015].
[3] ”Application Programming Interface – Wikipedia”. [Online]. Tillgänglig vid:
https://sv.wikipedia.org/wiki/Application_Programming_Interface. [Åtkomstdatum: 28-dec-2015].
[4] ”Rejlers Energitjänster”. [Online]. Tillgänglig vid: https://www.tp.rejlers.se/rem/.
[Åtkomstdatum: 28-dec-2015].
[5] ”Kalkylbladsprogram | Prova Excel utan kostnad”. [Online]. Tillgänglig vid:
https://products.office.com/sv-se/excel. [Åtkomstdatum: 28-dec-2015].
[6] ”PDF-filer, Adobe Portable Document Format | Adobe Acrobat DC”. [Online]. Tillgänglig vid: https://acrobat.adobe.com/se/sv/products/about-adobe-pdf.html. [Åtkomstdatum: 28-dec-2015].
[7] ”Android”. [Online]. Tillgänglig vid: https://www.android.com/. [Åtkomstdatum: 28-dec-2015].
[8] ”iOS 9 - Apple (SE)”. [Online]. Tillgänglig vid: http://www.apple.com/se/ios/.
[Åtkomstdatum: 28-dec-2015].
[9] ”Windows Phone – Microsoft”. [Online]. Tillgänglig vid: https://www.microsoft.com/sv-se/windows/phones. [Åtkomstdatum: 28-dec-2015].
[10] ”BlackBerry Enterprise Mobility, BBM, Smartphones & Support - United States”.
[Online]. Tillgänglig vid: http://us.blackberry.com/home.html. [Åtkomstdatum: 28-dec-2015].
[11] ”Greenely”. [Online]. Tillgänglig vid: http://www.greenely.se/. [Åtkomstdatum: 28-dec-2015].
[12] ”Apache Cordova”. [Online]. Tillgänglig vid: https://cordova.apache.org/.
[Åtkomstdatum: 28-dec-2015].
[13] ”PhoneGap | Home”. [Online]. Tillgänglig vid: http://phonegap.com/. [Åtkomstdatum:
28-dec-2015].
[14] ”html5.org — HTML revisited”. [Online]. Tillgänglig vid: https://html5.org/.
[Åtkomstdatum: 28-dec-2015].
44
[15] ”Cascading Style Sheets”. [Online]. Tillgänglig vid: http://www.w3.org/Style/CSS/.
[Åtkomstdatum: 28-dec-2015].
[16] ”JavaScript.com”. [Online]. Tillgänglig vid: https://www.javascript.com/.
[Åtkomstdatum: 28-dec-2015].
[17] ”About Objective-C”. [Online]. Tillgänglig vid:
https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/Programming WithObjectiveC/Introduction/Introduction.html. [Åtkomstdatum: 28-dec-2015].
[18] ”Adobe Sverige: Lösningar för kreativitet, marknadsföring och dokumenthantering”.
[Online]. Tillgänglig vid: http://www.adobe.com/se/#. [Åtkomstdatum: 28-dec-2015].
[19] ”Apache RippleTM”. [Online]. Tillgänglig vid: http://ripple.incubator.apache.org/.
[Åtkomstdatum: 28-dec-2015].
[20] ”Visual Studio - Microsoft Developer Tools”. [Online]. Tillgänglig vid:
https://www.visualstudio.com/. [Åtkomstdatum: 28-dec-2015].
[21] ”Mars Eclipse”. [Online]. Tillgänglig vid: https://eclipse.org/. [Åtkomstdatum: 28-dec-2015].
[22] ”Xcode - What’s New - Apple Developer”. [Online]. Tillgänglig vid:
https://developer.apple.com/xcode/. [Åtkomstdatum: 28-dec-2015].
[23] ”Mac - Apple”. [Online]. Tillgänglig vid: http://www.apple.com/mac/. [Åtkomstdatum:
28-dec-2015].
[29] ”OAuth 2.0 — OAuth”. [Online]. Tillgänglig vid: http://oauth.net/2/. [Åtkomstdatum: 28-dec-2015].
[30] ”Google”. [Online]. Tillgänglig vid: https://www.google.se/. [Åtkomstdatum: 28-dec-2015].
45
[31] ”Facebook”. [Online]. Tillgänglig vid: https://www.facebook.com/. [Åtkomstdatum: 28-dec-2015].
[32] ”Välkommen till Twitter - Logga in eller Registrera dig”. [Online]. Tillgänglig vid:
https://twitter.com/. [Åtkomstdatum: 28-dec-2015].
[33] ”Skype | Gratis samtal till släkt och vänner”. [Online]. Tillgänglig vid:
http://www.skype.com/sv/. [Åtkomstdatum: 28-dec-2015].
[34] ”Viber | Free calls, text and picture sharing with anyone, anywhere!” [Online]. Tillgänglig vid: http://www.viber.com/en/. [Åtkomstdatum: 28-dec-2015].
[35] ”Ionic: Advanced HTML5 Hybrid Mobile App Framework”. [Online]. Tillgänglig vid:
http://ionicframework.com/. [Åtkomstdatum: 28-dec-2015].
[36] ”Software development kit - Wikipedia, the free encyclopedia”. [Online]. Tillgänglig vid:
https://en.wikipedia.org/wiki/Software_development_kit. [Åtkomstdatum: 28-dec-2015].
[37] ”AngularJS — Superheroic JavaScript MVW Framework”. [Online]. Tillgänglig vid:
https://angularjs.org/. [Åtkomstdatum: 28-dec-2015].
[38] ”Ladda ned gratis Java-programvara”. [Online]. Tillgänglig vid:
https://www.java.com/sv/download/. [Åtkomstdatum: 28-dec-2015].
[39] ”C# Programming Guide”. [Online]. Tillgänglig vid: https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx. [Åtkomstdatum: 28-dec-2015].
[40] ”Download Android Studio and SDK Tools | Android Developers”. [Online]. Tillgänglig vid: http://developer.android.com/sdk/index.html. [Åtkomstdatum: 28-dec-2015].
[41] ”Chartist - Simple responsive charts”. [Online]. Tillgänglig vid:
https://gionkunz.github.io/chartist-js/. [Åtkomstdatum: 28-dec-2015].
[42] ”gauge.js”. [Online]. Tillgänglig vid: http://bernii.github.io/gauge.js/. [Åtkomstdatum:
28-dec-2015].
[43] ”JSON”. [Online]. Tillgänglig vid: http://www.json.org/. [Åtkomstdatum: 28-dec-2015].
[44] ”Uniform Resource Locator - Wikipedia, the free encyclopedia”. [Online]. Tillgänglig vid: https://en.wikipedia.org/wiki/Uniform_Resource_Locator. [Åtkomstdatum: 28-dec-2015].
[45] ”Chrome DevTools Overview - Google Chrome”. [Online]. Tillgänglig vid:
https://developer.chrome.com/devtools. [Åtkomstdatum: 28-dec-2015].
[46] ”AngularJS: API: $q”. [Online]. Tillgänglig vid:
https://docs.angularjs.org/api/ng/service/$q. [Åtkomstdatum: 07-jan-2016].
[47] ”Hyper-V overview”. [Online]. Tillgänglig vid:
https://technet.microsoft.com/library/hh831531.aspx. [Åtkomstdatum: 07-jan-2016].
46
Appendix:
HTML taggar
<html> - Denna tagg meddelar browsern att dokumentet är ett HTML-dokument och ska tolkas därefter. Alla taggar i ett HTML-dokument är osynliga när dokumentet är publicerat för visning eller förhandsgranskning.
<head> - Headtaggen innehåller alla beroenden för scripts, CSS och metainformation.
<body> - Allt som ska vara synligt och animeras visas inom bodytaggen, samt alla sidor och dess CSS.
<div> - En uppdelning av HTML-dokumentet.
<canvas> - HTML målarduk, ritas på med javascript.
<ul><li> - Osorterad lista och dess listelement.
<label> - En etikett, Ionic använder labels på vissa objekt för att identifiera dem.
<ion-nav-view> - En ionictagg där navigationsdata visas.
<ion-view> - En ionictagg där en sida kan laddas in.
<ion-content> - Innehåll på en sida läggs i denna ionictagg.
<input> - En tagg som tar emot ett inmatningselement (text, password, submit, ).
<ion-tabs><ion-tab> - Ionictagg med en rad tabbar kopplade till andra sidor.
<meta> - Metatagg, säger hur data får displayas och hämtas.
<link> - Länkar till externa stylesheets.
<script> - Hämtar/kör skript.