S TARTPROCESSEN

Detta avsnitt förklarar initieringsprocessen vid appens start och vad som sker i bakgrunden vid navigering för att visa sidor och liknande.

1. Startup-initiering av Cordova

Användaren startar applikationen på enheten. Cordova bildar en wrapper (omslag) och initierar appens startsida vilket bildar själva appen. Cordova är ett omslag till en intern webbläsare (WebView) som innehåller startsidan index.html som i sin tur innehåller alla sidor och funktioner som bildar appen. Wrappern bildar ett appskal som gör att index.html och alla undersidor kan nå enhetens funktioner som exempelvis kamera eller accelerometer om de behövs.

2. Ladda beroenden, bootstrappa Angular

Efter att wrappern skapats så börjar index.html att ladda alla beroenden som appen behöver för att fungera. Det viktigaste beroendet för appen är Angular som skapar appens ruttkarta förklarad i steg 4 i detta avsnitt. Angular initieras inom head-taggen likt alla andra beroenden.

Angular letar per automatik upp ng-app direktivet vilket blir grunden för Angularapplikationen. Om den hittas så förebereder Angular att ladda associerade moduler och controllers. Energiappens ng-app finns i body-taggen med associerad modul

”EnergyApp” och controller ”AppCtrl”.

Angular skapar en injektor som hanterar olika bakgrundsaktiviteter för modulen och kopplar den till WebViewens DOM. Detta gör appens DOM dynamisk och kan ändras i realtid genom Angular. I Rejlers EnergiApp kan nästan allting ändras dynamiskt då ng-app direktivet finns i body-taggen. Denna process som initierar Angular kallas populärt för automatisk "bootstrap".

26

Fig 4.4: Cordovas wrapper som omsluter index.html + beroenden och bildar en WebView.

Det är viktigt att lägga märke till är ng-controller direktivet inom bodyelementet. Controllern AppCtrl skapar ett nytt scopeobjekt som endast kan nås och manipuleras inom just denna bodytagg samt alla underelement i taggen med samma controller.

3. Initiera tillämpade skript, alla moduler kör .config och .run block

App.js är nästa skript som initieras och det är det första skriptet som inte är ett bibliotek- eller ramverksskript. I skriptet finns en modul kallad EnergyApp. Denna modul länkar ihop alla moduler i alla egenskrivna skriptfiler så för ordningens skull är de uppdelade i app.js, controllers.js och services.js.

Moduler kör sina .config och .run kodblock i ordning. Configs körs som ett komplement till modulen, skapar variabler och dylikt, medan .run block kan jämföras med main-funktioner som körs vid appens start och när de blir anropade av någon annan funktion.

4. .config block körs

App.js börjar med ett .configblock som innehåller en ”stateprovider”. Blocket .config stateprovider sätter upp alla möjliga rutter till de olika sidorna så att navigering i appen kan jämföras med en finit automat (state machine). Alla HTML-sidor motsvarar tillstånd som appen kan ha. Om appen försöker nå en odefinierad rutt så omdirigeras appen till loginsidan som standard. Appen har en meny med fyra knappar, tabs.html, och den är abstrakt i ruttkartan eftersom den endast är mellanhand i navigeringen och visar vilken sida som är

27

aktiv. Efter att alla rutter har kartlagts så laddas standardrutten, dvs. loginsidan in i HTML-sidans bodytagg.

fig 4.5: Ruttkarta över appen. Vid varje tillståndsbyte körs en autentiseringskoll.

Services.js har också ett configblock som körs direkt vid appstart, .config AuthInterceptor.

Den används för att initiera interceptorn i applikationen. En HTTP-Interceptor, genskjutare, genskjuter HTTP-anrop innan de lämnas över till en server och genskjuter också svaren från servern. En token är ett objekt för autentiseringssyften och HTTP-anrop. När något gör en förfrågan om att hämta data från en server och använder en felaktig eller utgången token så kommer genskjutaren svara beroende på felmeddelandet den får från servern. Detta hindrar datan från att nå programkoden om fallet var ett felmeddelande. När användaren försöker logga in så skickas en unik token via URL från autentiseringservern som används för den användaren.

5. .run block körs

Blocket .run statechange körs vid appens start samt varje gång användaren byter mellan tillstånd. Den kollar om användaren fortfarande är autentiserad medan bytet äger rum. Om användaren av någon anledning inte skulle vara autentiserad så hindrar den appen att byta till nästa tillstånd utan visar loginrutan. Den är mycket viktig för appens säkerhet.

Blocket .run backbutton körs varje gång tillbakaknappen trycks ned på telefonen eller surfplattan. Om nuvarande tillstånd är loginrutan så avslutas appen när man trycker på den. I andra tillstånd gör inte backknappen någonting.

28

6. Startsidan login.html

När alla .config och .run kodblock har körts fortsätter Angular med att initiera ngcontroller=”AppCtrl” direktivet i bodytaggen. AppCtrl ligger över appens alla tillstånd och reagerar på när användaren inte längre är inloggad av någon anledning. Då visas en popupruta och byter tillstånd till loginsidan.

Efter att alla automatiska funktioner och tjänster har startats och ruttkartan har initierats är användaren på appens loginsida, login.html, genom .run Statechange. Loginsidan har den redan nämnda associerade controllern, LoginCtrl. Den hanterar vad som händer när användaren försöker logga in. När ett giltigt lösenord och användarnamn har skrivits in trycker användaren på loginknappen. Bakgrundstjänsterna returnerar att allt är ok, loginrutan tas bort och controllern dirigerar om tillståndet till huvudsidan, home.html. Om uppgifterna är felaktiga visas en popup som säger att inloggningen misslyckades.

7. Autentisering och säkerhet

När användaren försöker logga in sker mycket i bakgrunden gällande autentisering och säkerhet. När användaren tryckt på loginknappen startas en loginfunktion inom LoginCtrl som förväntar sig en respons från en så kallad promisetjänst [46] innan den loggar in användaren eller ej. Loginfunktionen tar användarnamnet och lösenordet som användaren skrivit in och anropar en promiseservice.

Promiseservicen hjälper till att köra funktioner asynkront och använda dessa funktioners returvärden, oberoende av vad controllern som anlitade promiseservicen eller funktionen håller på med under den tiden. En controller som väntar på något från en promiseservice kan fortsätta att styra logik och anropa andra tjänster. När controllern fått svar från en promiseservice så fortsätter anropsfunktionen som vanligt. Ett vanligt svar från en promiseservice är ”resolve”, om funktionen lyckades, eller ”reject”, om funktionen misslyckades och controllern agerar då beroende på svaret.

8. Promisefunktion VAR LOGIN (username, password)

Promisefunktionen returnerar en resolve(Login success) eller reject(login failed) beroende på om användarnamnet och lösenordet som användaren har skrivit in stämmer överens med Rejlers databas. Om uppgifterna stämmer, levereras en access token från inloggningsservern

29

Användaren har nu möjligheten att använda sidhuvudets flikmeny för navigering, tabs.html.

Den har automatiskt byggts upp av stateprovider och är alla andra tillståndens förälder i ruttkartan. Detta betyder att det är denna sida som styr vad som ska visas i appens huvudområde. Anl.html, home.html, dia.html och set.html kan alla nås genom tabs.html.

Gemensamt för alla tillstånd är att innan deras sida visas så körs den tillhörande controllern.

Home.html

I och med att home.html är den första sidan som visas efter autentisering, körs sidans tillhörande controller först, HomeCtrl. Denna controller sköter visningen av mätaren som reflekterar användarens energihantering. Den hämtar också aktuell driftinfo från Rejlers servrar samt visar en sammanfattad rapport om total produktion och total förbrukning i kilowatt-timmar (kWh). Varje gång användaren byter tillstånd till denna sida kollar controllern om användaren ändrat listan av anläggningar. Vid ändring av listan ritas mätaren om för att reflektera detta, annars är den kvar i ursprungligt tillstånd. Mätaren ritas ut med hjälp av gauge.js-biblioteket och listan av anläggningar.

Anl.html

AnlCtrl anropar flera services och factories som hämtar och uppdaterar olika listor med JSON-objekt som är alla anläggningar. Första anropet är till en factory, goFetch, som hämtar en hel JSON-fil till en controllers scope beroende på vilken controller som anropade goFetch.

GoFetch använder sig av promisefunktionen $http för att kunna hämta filen.

Efter detta visas Anl.html som skriver ut anläggningarna i en Ionic-checkbox lista där alla listobjekt är ikryssade första gången sidan visas. Listan är responsiv och kommer köra en funktion i controllern, updateAnl, varje gång användaren markerar/avmarkerar ett listobjekt.

Denna funktion anropar servicen ActiveAnl som hanterar en bakomliggande array som