Front-end webklient for Enoro AS

Transkript

1 Front-end webklient for Enoro AS Hovudprosjekt Kim René Merkesvik Anders Aalen Andrii Petrychak Lenkje til nettstad: Avdeling for Ingeniør og Naturfag HO2-300 Hovudprosjekt vår 2015

2 STUDENTRAPPORT Postadresse: Postboks 523, 6803 Førde Telefon: Fax: TITTEL Front-end webklient for Enoro AS RAPPORTNR. V.01 DATO PROSJEKTITTEL HO2-300 Hovudprosjekt Forfattarar Kim René Merkesvik Anders Aalen Andrii Petrychak OPPDRAGSGJEVAR ENORO AS TILGJENGE Open TAL SIDER ANSVARLEGRE RETTLEIAR Joar Sande Tormod Iversen SAMMANDRAG Rapporten omhandlar løysing av Bacheloroppgåva til tre avgangsstudentar ved Høgskulen i Sogn og Fjordane i Sogn og Fjordane, ingeniør elektro- og automatiseringsteknikk, våren Hovudmålet med prosjektet var å utvikla ein front-end for Enoro AS som skal presentere straumforbruk og temperatur visuelt for kundane til kraftbransjen. Rapporten gjennomgår teorien, utviklingsverktøya, utviklinga og produktet. Det er utvikla og testa ein prototype med responsivt webdesign slik at websida automatisk vert tilpassa skjermen den blir nytta på. SUMMARY The report describes the Bachelor project of three automation technology graduate students at Sogn og Fjordane University College, spring The main goal of the project was to develop a front-end web application for Enoro AS. The application should visually represent electricity consumption data and temperature forecast for customers in electric power industry. The report covers the underlying theory, development tools, development process and the software product as a result. A prototype of the responsive web-client has been developed during this Bachelor project, so that this software could be used on devices with different screen sizes and operating systems. EMNEORD: Front-end, API, HTML, CSS, JavaScript, jquery, AJAX, JSON, Database, MVC

3 Forord Ved siste semester på Høgskulen i Sogn og Fjordane, avdeling for ingeniør og naturfag, skal studentane skrive Bacheloroppgåve. Oppgåva omhandlar 20 studiepoeng og tel 2/3 av siste semester. Oppgåva kan studentane definere sjølve, men det vert oppmoda at oppgåva kjem frå ein ekstern oppdragsgjevar, slik at oppgåva vert så nær verkelegheita som mogleg. Prosjektgruppa har fått oppdrag å utarbeide ein front-end web klient for Enoro AS i Dale, der ein skal visuelt presentere data frå Enoro sin eksisterande API. Dette er eit prosjekt som omhandla programutvikling og er relevant for ingeniørutdanninga i automasjon. Stor takk til Enoro AS som har gitt oss denne oppgåva. Vidare vil vi takke Styringsgruppa for rådgjeving og gode tilbakemeldingar. Ingvild Leite for god rettleiing. VRI-prosjektet for økonomisk støtte til gjennomføring av oppgåva. Lenkje til nettstad: Prosjektgruppa: Kim René Merkesvik Anders Aalen Andrii Petrychak Prosjektleiar Gruppemedlem Gruppemedlem Styringsgruppe: Prosjektansvarleg er Joar Sande. Kontaktperson hos Enoro AS Tormod Iversen Førde ANDRII PETRYCHAK ANDERS AALEN KIM RENÉ MERKESVIK

4 Fagtermar AJAX API Back-End Bootstrap CSS Database DOM DOM-element Front-end Git GUI HTML HTTP Java Java Swing JavaFX JavaScript jquery JSON Responsiv layout REST UI URL Asynchronous JavaScript and XML Application Programming Interface Server Front-end rammeverk Cascading Style Sheets Strukturert samling av data Document Object Model Document-, Object- og Model element Webapplikasjonsklient Versjonskontrollsystem Graphical User Interface HyperText Markup Language Hypertext Transfer Protocol Objektorientert programmeringsspråk Grafisk brukargrensesnitt (GUI) Java Grafisk brukargrensesnitt (GUI) Java Et skriptspråk Liten, rask og funksjonsrik Javascript bibliotek JavaScript Object Notation Tilpassing til forskjellige skjermar Representional state transfer User Interface Uniform Resource Locator

5 Innhaldsliste Forord... 3 Samandrag Innleiing Programmeringsspråk Val av programmeringsspråk Teori Front- end (Klient) HTML5 (Hyper Text Markup Language 5) CSS (Cascading Style Sheets) Javascript AJAX (Asynchronous JavaScript and XML) jquery JSON (JavaScript Object Notation) Bootstrap Highcharts Back- end (Server- side) API Database ASP.NET MVC Epoch Time Origin Resource Sharing Utviklingsverktøy SublimeText Git GitHub Google Chrome Postman REST Client Visual Studio Inspinia Admin Theme Utvikling av front- end web klient Krav for spørjing mot API Manuell testing av resurs Spørjing i front- end klienten mot Enoro AS sin API Respons frå Enoro AS sin API Visualisering med Highcharts... 17

6 5.5 Vêrvarsel Produkt Front- end webklient Drøfting av resultat Vidare utvikling Konklusjon Prosjektadministrasjon Organisering Oppdragsgjevar Styringsgruppe Prosjektgruppa Prosjektsperiodar Gjennomføring i forhold til plan Rammer Milepelar Møteplan Møter med oppdragsgjevar Heimesida Kritiske suksessfaktorar Dokumentstyring Prosjektevaluering Lister Referansekjelder Figurar Tabellar Vedlegg... 30

7 Samandrag Dette var vår bacheloroppgåve som avgangsstudentar ved Høgskulen i Sogn og Fjordane, ingeniør elektro- og automatiseringsteknikk, våren Gruppa fekk i oppdrag å utvikle ein front-end web klient programvare for Enoro AS som leverer programvareløysingar til energibransjen i Noreg og i Europa. Ein front-end er ofte brukt omgrep på ein brukarapplikasjon til ein web-teneste. Brukaren skal oppleve at det er enkelt å finne fram og skaffe seg oversikt over tilgjengelege funksjonar i grensesnittet. Hovudmålet med prosjektet var å utvikle ein front-end web-klient for Enoro AS, som kan nyttast for å visa straumforbruk og temperatur for kundane til kraftbransjen. Strømforbruk skulle presenterast for forskjellige målepunkt frå databasen til Enoro AS. Vi har henta temperaturprognose for målepunkta frå nettstaden Yr.no ved å skrive inn stadnamn. Resultatet er ein fungerande prototype som vi er godt nøgde med og vi har fått gode tilbakemeldingar frå Enoro AS på utviklinga av front-end, og for framsyninga av data. Det er utvikla og testa ein prototype med responsivt webdesign slik at websida automatisk vert tilpassa skjermen den blir nytta på. Vi brukte Highcharts får å presentere data over effektforbruk med interaktive diagram, men det var ikkje fastsett som eit mål. Vêrprognosen varsle brukaren om framtidig temperaturforandringar. Ein kan legge til fleire funksjonar med tanke vidareutvikling, fors å gje brukarane meir energieffektivt energiforbruk. Varmekjelder, alder og størrelsen på bustanden kunna vore mogleg å legge inn for brukarane for å få målretta Enøk-tips til eit meir energieffektivt energiforbruk..

8 1 Innleiing I sjette og siste semester av ingeniørutdanninga ved Høgskulen i Sogn og Fjordane, Ingeniør elektro- automatiseringsteknikk. skal studentane gjennomføre ein avsluttande bacheloroppgåve som utgjer 20 av totalt 180 studiepoeng. Oppdragsgjevaren til prosjektet var Enoro AS i Dale i Sunnfjord, bedrifta levera programvareløysingar for kundeinformasjon for kraftbransjen i Norge og Europa. Bedrifta har vakse til ein anerkjent leverandør av programvareløysingar til energibransjen i Norge. Bakgrunnen for prosjektet er at Enoro AS ønska i framtida å tilby ein front-end retta mot sluttbrukarane til kraftbransjen. Føremålet med front-end, er at kundar av kraftbransjen skulle kunne nytte denne for å få presentert straumforbruket sitt. Brukarane skal og får vita den kommande prognose for utetemperaturen, dette vil gje ein indikasjon på om framtidig forbruk. Hovudmål for oppgåva er å utvikle ein front-end web klient for Enoro AS som kunne nyttast for å visa straumforbruk og temperatur for kundane til kraftbransjen. Delmål: Undersøke kva teknologi som bør leggast til grunn for framtidas front-end løysningar for Enoro AS sine kundar, og korleis teknologien kan nyttast for å auke brukarvenlegheita for brukarane. Hente data frå Enoro AS Front-end skal ha responsivt design slik at framvisinga vert tilpassa automatisk skjermen den blir vist på. Utvikle og teste ein prototype. Lære å bruke MS Project som ein del av prosjektstyringa. 1

9 2 Programmeringsspråk I dette kapitlet vert val av programmeringsspråk grunngjeve. 2.1 Val av programmeringsspråk Enoro AS gav oss mogelegheita til å velje fritt kva slags teknologiar som skulle nyttast i dette prosjektet, så lenge vi henta data frå deira database. Gruppa såg etter teknologiar som både ville løyse oppgåva på ein god måte, samtidig som teknologien skulle vere framtidsaktuell. Vi diskuterte metodar med Enoro AS for mogelege løysingar for å hente- og presentere data frå deira database. Frå skulen hadde vi erfaringar med Java og MySQL. Enoro AS presenterte for oss deira API (Application Programming Interface) som brukar REST-basert kommunikasjon. Vi valte å bruke eksisterande API som grensesnitt mellom databasen og front-end webklienten, fordi det gjer fleksibilitet av datapresentasjon. Data i JSON format kan analyserast og visast på universell måte og gruppa kan legge tyngda på å utvikle front-end webklientsida. Som programmeringsspråk valte vi ei HTML5 løysing. HTML5 i front-end web utvikling er raskt veksande, og har i praksis vorte den nye standarden i front-end web-utvikling. Det fins mange opne kjeldebibliotek, som jquery og Bootstrap som forenklar utviklinga av ei webløysing. For å presentere data i front-enden har vi valt og interaktive diagram frå HighCharts. Enoro AS bruker og HighCharts for presentasjon av grafar. 2

10 3 Teori I dette kappitlet tar vi føre oss teori, metodar og modeller som var av betyding for utviklinga av front-enden og back-enden. 3.1 Front-end (Klient) Ein front-end er ofte brukt omgrep på ein brukarapplikasjon til ein web-teneste. Webapplikasjon vert kjørt direkte i ein nettlesar. Ein front-end er skrive i HTML, CSS og Javascript, og brukar rammeverket til jquery (JavaScript bibliotek). Front-endwebtenesta kommuniserer med sin back-end via ressursane som ligg i back-end API. Under utvikling av ein front-end er grafisk design viktig for å lage eit brukarvennleg grensesnitt. Det er viktig at brukaren opplever at det er enkelt å finne fram og å skaffe seg oversikt over tilgjengelege funksjoner i grensesnittet. [1] HTML5 (Hyper Text Markup Language 5) HTML er eit felles markeringspråk for alle nettsider å fortel nettlesaren korleis strukturen og omrisset av nettsida ser ut. HTML5 er ein vidareutvikla versjon for eit auka bruk av multimedia på nettet. Kodane kallast tagger (tags) å fortel om teksten er ei overskrift, vanleg tekstavsnitt, tabell, punktliste eller ei lenke. Taggane for tekstens funksjon refererer til eit stilark (stylesheet) som styrer oppsettet og strukturen til dokumentet. [2] CSS (Cascading Style Sheets) CSS er stilark-språk som definerer utsjånaden til eit HTML-dokument. Utgangspunktet for CSS er at ein skal spare arbeid med utvikling av store nettsider, der fonter, fargeinformasjonen og animasjon som blir lagt til kvar enkelt side blir ein lang og kostbar prosess. CSS-informasjonen ligg ofte i ei eiga fil, der ein kan endre utsjånaden av heile nettstader ved å endre berre ei fil. [3] Javascript Javascript kom til då etterspurnaden om dynamiske nettsider var etterlengta. JavaScript gjer det mogeleg å konstruere nettsidene med dynamisk oppførsel og animasjon, som gjer brukarvenleg og auka oppleving (respons) for brukaren. 3

11 3.1.4 AJAX (Asynchronous JavaScript and XML) AJAX er utvikla for å gje web-applikasjonar ein raskar og meir responsiv brukar oppleving. Dette vert gjort ved at websida i bakgrunnen utvekslar informasjon med serveren. Dermed må ein ikkje laste heile web-sida når brukaren gjer ei forandring. Brukaren vil gjerne ikkje merke denne informasjonsflyten. Dette gjev ei betre brukaroppleving. Andre sider som ikkje bruker AJAX må gjerne laste heile websida på nytt når det vert gjort forandringar, noko som tek lenger tid. [4] jquery Jquery er eit JavaScript bibliotek utvikla for å forenkle front-end utvikling. jquery sin syntax gjer det lettare å navigere i eit dokument, velje DOM-element, opprette animasjonar, handtere handlingar og utvikle Ajax applikasjonar. Jquery gjer det også mogeleg å lage programvareutvidingar til JavaScript biblioteket. [5] Jquery AJAX GET metode Dei to mest vanlige metodar mellom ein klient og server er GET og POST. GET Spør om data frå ein bestemt ressurs JSON (JavaScript Object Notation) JSON er ein enkel open tekstbasert standard for datautveksling. JSON er opphaveleg basert på ei undergruppe av JavaScript, men er uavhengig av dette eller andre programmeringspråk. Det at JSON brukar framgangsmåtar som er kjent for programmeraren som har bakgrunn frå andre programmeringspråk gjer det til eit ideelt datautvekslingsspråk. JSON blir brukt først og fremst til å overføre data mellom ein server og ein web-applikasjon, som eit alternative til XML. Til bruk i AJAXapplikasjonar er JSON svært godt eigna. [6] Bootstrap 3 Twitter Bootstrap er for tida ein av dei mest populære og nytta front-end rammeverket. Det er eit gratis og gjennomtesta rammeverk for raskare og enklare webutvikling. Bootstrap er utvikla av Twitter for å forbetre utviklinga av det populære nettsamfunnet Twitter. Dei fant ut at andre kunne ha bruk for rammeverket til å lage fine websider og web-applikasjonar. Løysinga er kompatibel med dei nyaste versjonane av dei store nettlesarane. Ein brukar HTML, CSS og Javascript til 4

12 utvikling av brukargrensesnitt for knappar, skjema, navigasjon og andre grensesnittkomponentar. [7] Highcharts Highcharts er ein enkel måte å lage interaktive diagram til webapplikasjonar med JavaScript-bibliotek som fungerer på alle moderne nettlesarar. Highcharts er åpent for bruk til private heimesider, skulesider og ikkje-kommersielle websider utan lisens. Ein kan legge til endringar til kjedekoden som gjev rom for personlig modifikasjonar og fleksibilitet. Highcharts bygger på teknologiar som finnast i nettlesaren så ein treng ikkje å installere programtillegg som Flash eller Java. Det trengst heller ikkje nokon installasjon på webserveren, sidan Highcharts bruker rammeverk som jquery, MooTools eller Prototype. Highcharts er utvikla av Highsoft AS som er lokalisert i Vik i Sogn. [8] 3.2 Back-end (Server-side) Back-end er serversida som er grensesnittet mellom front-end og databasen. Det som inngår i back-end er det som skjer bak kulissane i ein web-applikasjon. Det vil seie alle handlingane som vert gjort før det kjem til nettlesaren din. Eit vanleg oppsett for ein back-end er ein web server, ein applikasjon og ein database. [9] API API er eit programmeringsgrensesnitt som gjer det mogeleg å overføre informasjon automatisk mellom ulike program som er sett opp for å kommunisere med kvarandre. Ein av fordelane er at eksterne programmerarar kan lage applikasjon og tilføre ekstra tenester på ein enklare måte frå denne forbindelsen. Det er vanlig at programvareutviklarane lagar API til sine programsystem. [10] Database Ein database er ei strukturert samling av data. Det vert som regel brukt eit databasesystem som heiter DBMS (Database Management System) til å administrere ein database. Databasesystemet sørgjer for å implementere ein eller fleire databasar og utfører visse tenester etter førespurnad frå ein klient som er satt opp til å sende førespurnad til databasesystemet. Dette kan være eit eksternt program. [11] 5

13 3.2.3 ASP.NET MVC ASP.NET er eit server-side web-applikasjon rammeverk. Eit utviklingsmiljø for å lage nettsider med HTML, CSS og Javacript. APS.NET er skreve i C#, kjelde kode open og støtter MVC utviklingsmodell. Model View Controller (MVC) arkitekturen, blei utvikla av Smalltalk for å gje eit brukargrensesnitt for underliggande datamodellar. Programvarearkitekturen deler programmet inn i data (model) og brukargrensesnitt (view). Dette kan ein sjå i figur 1. Figur 1 Model View Controller Model Inneheld klasser og forretningslogikk. Objektet er bygget utan tanke for korleis visninga blir presentert til brukaren. View presenterer data frå datamodellen til brukaren. Består av ein samling av klassar som representera elementa i brukargrensesnittet. Controller kommuniser mellom klassar i model og view, og representerer klassene som forbinde model og view. Fordelen med MVC arkitekturen er loose coupling (laus kopling) mellom model, view og controller. Dei tre klassane er avskilt og jobbar sjølvstendig utan større tilknytingar 6

14 til kvarandre. Koplinga mellom elementa er basert på kunnskap ein har om eit andre element. ASP.NET er eit web rammeverk til Microsoft og MVC er ein Visual Studio mal for å skrive MVC arktikturen inni. [12] Epoch Time Med tidstempel kan ein samanlikne to datoar heilt nøyaktig, sjå figur 2. Tidsstempelet er sekunder etter 1 januar 1970 (Unix Epoch Time). [13] Nøkkel Unix Epoch Time Lesbar tid / menneskeleg tid "fromtime" Januar 2010 kl. 00:00:00 CET GMT +1:00 "totime" Januar 2010 kl. 00:00:00 CET GMT +1:00 Figur 2 Timestamp to Human Time Origin Resource Sharing W3C standarden CORS gjer de mogleg for nettsider å sende fungerande AJAX spørjingar frå eit domene til ein anna domene. Utan CORS vil kommunikasjonen mislykkast fordi nettlesaren ikkje vil tillate å opprette AJAX-kommunikasjon til ressursar som ikkje var ein del av utgangspunktet for forbindelsen. Døme: til [14] 7

15 4 Utviklingsverktøy I dette kapittelet er de skrivet om utviklingsverktøya vi har brukt i prosjektet. 4.1 SublimeText SublimeText er ein kjeldekode-editor, sjå figur 3. Editoren har gode funksjoner, snarvegar og syntaks utheving som kan være tidssparande for utvikling av kode. [15] Figur 3 Utsnitt av SublimeText Funksjonane i SublimeText kan utvidas med ulike programvarepakkar. Ein programvarepakke legger til ein eller fleire bestemte funksjonar til eit eksisterande program. Package Control, er ein programvarepakke handsamar som gjer det enkelt å finna, installera og oppdatera andre programvarepakkar iform av ei liste. [16] Emmet er ein programvarepakke som gjer de raskare å skrive HTML- og CSS kode med forkortingar og snarvegar. Emmet utvidar forkortingane til gyldige HTML- kodar, som er tidssparande. Samt at det er gunstig fordi HTML og CSS ikkje er eit kompilert språk, som medfører at ein kan skrive feil i koden utan at dette vert oppdaga. [17] 8

16 4.2 Git Git er eit verktøy for versjonskontroll og kodedeling mellom programvareutviklara. Det er lagt vekt på fart, dataintegritet og støtte for distribuerte system. Ein kan lagra heile historikken for koden og sjå korleis han har utvikla seg. Dette gjer det lettare å samarbeida, fordi kvar utviklar kan sjå heile utviklingshistorikken og ein unngår kodekonflikt. [18] 4.3 GitHub Vi har valt å bruke GitHub som versjonskontroll system. I motsetning til Git, som er et kommandolinje verktøy, gir GitHub eit web-basert grafisk grensesnitt. [19] 4.4 Google Chrome Google Chrome ein stilmessig rein lettlesar og ein av dei mest brukte. Chrome har innebygt utviklings- og feilsøkingsverktøy og eit stort bibliotek med utvidingar og addons for å tilføre tilpassa funksjonalitet for brukaren. [20] Figur 4 Google Chrome 9

17 4.5 Postman REST Client Postman REST klient er utvikla av Twitter. Klienten lar ein skrive og overvake HTTPførespurnadar til blant anna API-ar. Testing av webtenester kan vere tungvindt sidan ein har behov for å sjå kva som skjer med spørjinga og data ein motteke. Postman Klienten kan kjørast i Google Chrome. [21] Figur 5 Postman web REST klient 4.6 Visual Studio 2013 Microsoft Visual Studio er et utviklingsmiljø for å lage, kjøre og feilsøke i programmer. Ved hjelp av dette programmet kan man utvikle alt frå enkle konsollprogrammer til avanserte grafiske Windows programmer. [22] Figur 6 Visual Studio

18 4.7 Inspinia Admin Theme Inspinia er ein front-end mal med eit stilrent oppsett bygget på Twitter Bootstrap. Malen gir eit responsivt design som fungerer på tvers av ulike einingar som mobiltelefoner, nettbrett og datamaskinar. Responsiv design vil si at design på nettsida forandrar seg etter størrelsen på skjermen. Fordelen av dette er at ein bygg opp kunn ein side og dermed slepp å lage ulike side for ulike skjermar. Det er viktig å tenke på korleis man bygger opp sida, ein viser mindre informasjon på ein mindre skjerm og legger til elementær når innhaldet blir vist på ein større skjerm. Hovudinnhaldet må være avklart med tanke på korleis dette blir vist på ein mindre skjerm. I døme ser ein korleis oppbygningen av innhaldet kan sjå ut og korleis innhaldet blir vist på ulike skjermar. Det mørkaste feltet er hovudinnhaldet. Figur 7 Døme på responsiv design Eit flat brukar grensesnitt gir eit minimalistisk og reint grensesnitt. Bruken av ikonar, flate illustrasjonar, reine farger, minimal skyggelegging og tydelige skrift gir eit reinare oppsett og er mykje brukt i flate grensesnitt. Saman med eit responsivt design er flat brukar grensesnitt godt egna til mobilskjermar. Lett grafikk gir raskar nedlastingstid som gir ein betre oppleving av front-enden for brukaren. [23] 11

19 5 Utvikling av front-end web klient I dette kapitlet presentera vi Enoro AS sin API og manuell testing av ressursar ved hjelp av Postman. AJAX spørjinga i front-end mot API og JSON responsen API-en sende tilbake. Samt at vi vise presentasjonen med HighCharts. Tilkoplinga mot yr sin API vert forklart samt korleis vi behandla data for framsyning av meteogram. 5.1 Krav for spørjing mot API. Enoro AS sin API har støtte for ulike metodar for å få tilgang til dei ressursane APIen støttar. Vi brukar resursen Consumption, som inneheld dei data over effektforbruk vi skal presentere. Consumption-ressursen er lukka utan brukarnamn og passord. Consumption har støtte for å returnere XML-, JSON- og CSV format. I prosjektet brukar vi JSON som har støtte for GET spørjingar i APIen. Figur 8 ElWin Customer Web API v1.3.4 JSON formatet er definert som eit objekt med ein eller fleire nøkkelverdiar. Verdiane kan vere ein boolsk verdi, eit tall, ein streng, ein tabell eller ein anna objekt. 12

20 5.1.1 Manuell testing av resurs Vi testa tilgangen til Enoro AS sin API resurs Consumption med Postman, ein httpklient for Google Chrome. Figur 9 Testing av forbindelse med Postman Rest Client Vi får tilbakemelding STATUS 200 OK frå Enoro AS sin API. 200 OK er standard respons for ein vellykka HTTP førespurnad. Responsen innehalde og data som blei spurt om i spørjinga. Feil i spørjing gir 400 Bad Request. Serveren kan då ikkje behandle førespurnaden. Mens 404 Not Found blir vist ved ugyldig førespurnad. Utan gyldig brukarnamn og passord får vi 500 Inertnal Server Error. Denne feilen indikerer at ein uventa tilstand er oppstått. 13

21 5.2 Spørjing i front-end klienten mot Enoro AS sin API Klienten brukar AJAX til å utveksle data med serveren. AJAX gjer det mogleg for klienten å oppdatere informasjonen på web-sida utan å laste hele sida på nytt. Dette gjør at klienten blir opplevd raskare og vil bruke mindre trafikk på internett. Vi har laga fleire ulike metodar i back-end serveren for å sette saman ein spørjing ut i frå kva data vi vil ha presentert. Metodane for å vise effektforbruk grafisk vel brukaren frå menyen Power Consumpions. Metoden som blir kjørt er avhengig av oppløysinga brukaren velje på presentasjonen av data over effektforbruket. Oppløysinga kan visast over time, dag, veke, månad eller år. Figuren under visar vala brukaren får i metode for Consumption Monthly for visi Figur 10 Utklipp frå front-end Power Consumption Monthly Ein AJAX GET HTTP spørjestring med informasjon om en bestemt bruker, oppløysinga på data og periode blir sendt til Enoro AS sin API. Det blir bygd ein dynamisk URL ved hjelp av ApiProxy Controller som ligg i back-end serveren. For kvar gang brukaren velje ein spørjing, blir det sett saman ein dynamisk URL, og ein ny forbindelse til Enoro AS sin API blir oppretta. 14

22 Figur 11 API PROXY Controller ApiProxy Controller koden har vi fått av Enoro AS får å sette opp AJAX kommunikasjonen til deira API. on=week&fromtime= &toTime= Figur 12 Døme på URL-string som blir bygd opp av PROXY Controller 15

23 5.3 Respons frå Enoro AS sin API Vi får data frå serveren som en matrise av JSON objekt. Talet på objekt som blir returnert er avhengig av valt periode- og oppløysinga brukaren vel på presentasjonen av data. [ - { "customerid": , "contractno": 1, "fromtime": "\/Date( )\/", "totime": "\/Date( )\/", "value": , "meterunit": "kwh" } ] Figur 13 Døme på ein respons av AJAX objekt frå APIen Json formatet er lettlest for både menneske og maskiner. Tabellar og liste er definert med [ ]. Objektet er definert mellom { }, nøkkelen er separert frå verdiane med :. Verdiar som er definert mellom er streng. 16

24 5.4 Visualisering med Highcharts Vi tar dei data vi trenger og presentere dei i nettlesaren ved å bruke "Highcharts" Javascript-bibliotek (parsing), sjå figur 13 for koden som ligger bak og framsyning av graf. $('#consumption- monthly- line- chart').highcharts({ chart: { type: 'line' }, title: { text: charttitle }, subtitle: { text: '' }, xaxis: { categories: xaxislabels }, yaxis: { title: { text: yaxislabel + ', ' + meterunit } }, plotoptions: { line: { datalabels: { enabled: true }, enablemousetracking: false } }, series: [{ name: seriesname + ': ' + customerid, data: powerconsumptiondata }] }); Figur 14 Utklipp av Consumption Monthly Line Chart med bilete av framsyninga 17

25 5.5 Vêrvarsel Vi hentar vêrdata frå yr sin API ved å legge til varsel.xml på slutten av ein URL-en i front-end, som vist i figur 12 nedanfor. r.xml Figur 15 Døme på URL forspørsel streng til yr Yr sin API returnera XML (Extensible Markup Language markeringsspråk) ved hjelp av meteogram frå Highsoft får vi presentert vêrvarselet, sjå figur 16. Figur 16 Presentasjon av meteogram. Vêrvarsel frå yr.no, levert av Meteorologisk institutt og NRK. I programkoden vår har vi laga ein varsling til brukaren dersom temperaturen går under 0 grader celsius. Temperaturvarslet vil da kome opp på skjermen til brukaren når han logger seg på front-end-en. 18

26 6 Produkt I dette kapittelet presentera vi produktet i sin heilheit, med dei viktigaste funksjonane. 6.1 Front-end webklient Vi har laga ein fungerande front-end prototype i Inspinia Admin Theme, sjå figur 15, som presentera straumforbruk etter kunde-id og målepunkt-id. Brukaren kan sjå straumforbruk per veke, månad og år i menyen under Power Consuption. I menyen under Temperature Forecast vert vêrdata presentert etter lokasjon, samt at brukaren får opp varsel dersom prognosen er minder en null grader celsius. Figur 17 Monthly Power Consumption. 19

27 7 Drøfting av resultat Vi opplevde lite problem i forbindelse med utviklinga av front-end klienten. I starten av utviklinga imiterte vi eigne data (modifiserte data), før vi tilkopla oss Enoro AS sin API for å nytte deira data. Vi hadde då ein front-end som fungerte på deira lokal nettverk. For å få oppretta forbindelse utanfrå fekk hjelp av Enoro AS til å sette opp API PROXY Controller for MVC-førespurnad. Tidlegare hadde vi sette opp spørjestringen i dei ulike metodane for Power Consupmtion med vanlig HTTPrequest. ASP.NET MVC gjor det mogleg for CORS-førespurnad, slik at nettsida kan gjøre AJAX forespørsel til Web API frå eit anna utgangspunkt. 8 Vidare utvikling Front-end klienten har store muligheiter for vidareutvikling. Ein kan legge til fleire funksjonar med tanke på å gje brukarane meir energieffektivt energiforbruk. Varmekjelder, alder og størrelsen på bustanden kunna vore mogleg å legge inn for brukarane for å få målretta Enøk-tips. Energiselskapa kunne då gje brukarane målretta reklame og sal av produkt, til dømes på varmepumper. Vidare kunne det vert utvikling av front-end direkte mot smarthus løysingar. Frontenden kunna styrt varme og ventilasjon i forhold til kommande temperatur prognose. Enkelte stader kan bli problem ved lading av el-bilar i byggefelt, då trafoen og nettet ikkje er dimensjonert for lasta. Ei utvikling av front-enden til overvaking av ladekontakt for el-bil forhold til effektutak og samtidighetsfaktor. 20

28 9 Konklusjon Hovudmålet med prosjektet var å utvikle ein front-end web-klient for Enoro AS, som kan nyttast for å visa straumforbruk og temperatur for kundane til kraftbransjen. Vi valte å bruke ei web-teknologi til tross for at vi ikkje hadde nokon erfaringar frå dette før. Web-løysingar er sterkt i vekst og HTLM5 er blitt ein standard for utvikling av front-end. For å gjennomføre oppgåva måtte gruppa tileigne seg mykje kunnskap utover det studiane inneheld. Gruppa har teke interaktive nettkurs på Codecademy.com som tilbyr opplæring i rammeverka HTML og CSS, Javascript og jquery. Utviklingsverktøyet SublimeText har vi brukt mykje i prosjektet. Tida vi brukte på å sette seg inn i funksjonar til programmet, har lønna seg i ettertid. Alle kode har vert på GitHub som held kontroll på versjonar av datafiler og endringar. Prototypen oppfyller dei spesifikasjonane som blei sett når prosjektet starta. Gruppa har undersøkt kva teknologi som bør leggast til grunn for framtidas front-endløysningar for Enoro AS sine kundar. Vi har også undersøkt korleis teknologien kan nyttast for å auke brukarvenlegheita for brukarane. Det er utvikla og testa ein prototype med responsivt webdesign slik at websida automatisk vert tilpassa skjermen den blir nytta på. Data over effektforbruk blir henta frå Enoro AS sin API. Vêrdata blir henta frå yr sin API. Vi brukt Highcharts får å presentere data over effektforbruk og vêrdata med interaktive diagram. Enoro AS hjelpte oss mykje under gjennomføringa. Resultatet er ein fungerande prototype som vi er godt nøgde med og vi har fått gode tilbakemeldingar frå Enoro AS på utviklinga av front-end, og for framsyninga av data. 21