Hydranten Controle Applicatie voor de Brandweer Antwerpen

Scriptie ingediend tot het behalen van de graad van PROFESSIONELE BACHELOR IN DE ELEKTRONICA-ICT

Hydranten Controle Applicatie voor de Brandweer Antwerpen Jesse Lauwers en Cedric Snijers Departement Wetenschappen en Techniek Opleiding Elektronica-ICT Academiejaar 2014-2015

Interne promotor: Tim Dams Externe promotor: Gert Van de Wouwer

Versie: 12 juni 2015

Voorwoord

Deze bachelorproef is gemaakt als finale opdracht tot onze opleiding. Het is een reflectie van wat we de voorbije drie jaar tijdens onze opleiding hebben gedaan om tot dit eindresultaat te komen. Zo’n eindresultaat komt natuurlijk niet helemaal van onszelf en dus zijn er wat mensen te bedanken: Eerst zouden wij Tim Dams (promotor en docent aan AP Hogeschool Antwerpen) willen bedanken om het mogelijk te maken deze bachelorproef te kunnen doen. Ook willen we Digipolis bedanken met in het bijzonder Gert Van de Wouwer (promotor en projectleider op Digipolis Antwerpen) en Ian De Herdt (externe developer bij Digipolis Antwerpen) die ons tijdens het project begeleid hebben en waar we altijd terecht konden met vragen. Last but not least, bedanken we elkaar voor de hulp en medewerking aan dit project. Antwerpen, 12 juni 2015 Jesse Lauwers, Cedric Snijers

i

Abstract De bedoeling van onze stage was een applicatie te schrijven die het controleren van hydranten rond Antwerpen vergemakkelijkt/digitaliseert. Dit hebben we gedaan door 2 applicaties te schrijven, één voor een manager en één voor de controleploeg. Het was de bedoeling dat een controleploeg rond zou rijden, met een tablet, door Antwerpen en de hydranten controleren. Als er iets mis is met een hydrant of de status van het hydrant anders is dan initieel op de tablet werd aangegeven moest de controleur dit kunnen aanpassen. Eenmaal klaar moest de ploeg terug naar de kazerne rijden zodat de tablet verbinding kan maken met het netwerk en deze aanpassingen doorvoeren naar de backend server database. Als er veranderingen gemaakt waren, moesten deze nog goedgekeurd worden door de manager. Dit hebben we mogelijk gemaakt via een web applicatie. Op deze applicatie kon de manager dan nagaan of de aanpassingen die de controleurs gemaakt hadden, wel goed zijn. Als hij beslist dat het goed is, word onze backend database gesynct met een GIS server.

ii

Inhoudsopgave

Voorwoord

i

Abstract

ii

1 Situering 1.1 As Is . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 To Be . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 1 2

2 Bespreking Ontwikkeling 2.1 Database . . . . . . . 2.2 Service Agents . . . . 2.3 Data Access . . . . . 2.4 Entities . . . . . . . . 2.5 Business . . . . . . . 2.6 API . . . . . . . . . . 2.7 Web UI Application . 2.8 Mobile UI Application 2.9 Unit Tests . . . . . .

. . . . . . . . .

3 5 6 7 8 9 10 11 13 15

. . . . . .

16 16 17 17 18 18 19

4 Resultaten 4.1 Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.2 Backend Applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20 20 20

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

3 Bespreking Software 3.1 Microsoft Visual Studio Ultimate 2013 3.2 Team Foundation Server . . . . . . . . 3.3 SQL Server Management Studio . . . . 3.4 SqliteBrowser . . . . . . . . . . . . . 3.5 Fiddler4 . . . . . . . . . . . . . . . . 3.6 Axure RP Pro . . . . . . . . . . . . .

iii

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

. . . . . . . . .

. . . . . .

INHOUDSOPGAVE

4.3

4.2.1 User stories . . . . . . 4.2.2 WebUI Application . . Frontend Applicatie . . . . . 4.3.1 User Stories . . . . . 4.3.2 Mobile UI Application

iv . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

20 21 24 24 26

5 Besluit

30

A Installatie Instructies voor de Mobile UI Applicatie

32

Lijst van figuren

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11

Architectuur . . . . . MS SQL Database . . GIS API call . . . . . Entity Framework . . UOW en Repository . AutoMapper . . . . . Dependency Injection MVC . . . . . . . . . Bootstrap . . . . . . Bootstrap Datepicker LeafletJS . . . . . . .

3.1 3.2 3.3 3.4 3.5 3.6 4.1 4.2 4.3 4.4 4.5 4.6

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

4 5 6 7 8 9 10 11 12 12 14

Visual Studio . . . . . . . . . . Team Foundation Server . . . . SQL Server Management Studio SqliteBrowser logo . . . . . . . Fiddler werking . . . . . . . . . Axure logo . . . . . . . . . . .

. . . . . . logo . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

16 17 17 18 18 19

WebUI applicatie . . . . . . . . WebUI, hydranten goedkeuren . MobileUI applicatie . . . . . . . MobileUI, verschillende markers MobileUI, marker pop-up . . . MobileUI, controle uitvoeren . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

22 24 26 27 28 29

A.1 Certificaat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A.2 Powershell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32 33

. . . . . .

. . . . . .

v

Hoofdstuk

1

Situering Alle hydranten in Antwerpen, welgeteld 22976, moeten jaarlijks gecontroleerd worden. Dit wordt gedaan, door brandweerlieden, verspreid over het hele jaar. Elke brandweerkazerne heeft zijn eigen sectoren, deze sectoren zijn toegewezen aan de verschillende ploegen in die kazerne. Een ploeg staat in om de hydranten in zijn sector te controleren en in het geval dat er één niet bruikbaar is, dit te melden of zelf te repareren indien mogelijk. Aangezien dit momenteel allemaal schriftelijk gedaan wordt, wat een verspilling van papier is, zoekt de brandweer de tijd bij te benen en digitaal te gaan. Onze taak is dus om in opdracht van Digipolis Antwerpen, met als klant Brandweer Antwerpen, een project te maken om dit proces te digitaliseren.

1.1

As Is

De controle van hydranten is in de huidige vorm vrij omslachtig. Het begint allemaal met een manager die dagelijks een excel sheet binnen krijgt met de te controleren hydranten. Deze sheet zal hij vervolgens printen en meegeven aan ploegen die toegewezen zijn aan de sectoren van de hydranten die een controle nodig hebben, minstens één maal per jaar per hydrant. Eenmaal ter plaatsen en de hydrant gevonden is, kan de ploeg de controle uitvoeren. De controleur schrijft zijn bevindingen neer en doet dit tot zijn ronde compleet is. Nadat de ploeg klaar is met controleren keren ze terug naar de kazerne. Hier geven ze het papier terug af aan de manager, die deze dan handmatig zal nakijken. Als de manager tevreden is met een inspectie geeft hij deze opnieuw in in een excel sheet. Deze wordt op zijn beurt dan terug online geplaatst en indien nodig zal er iemand toegewezen worden om herstellingen te gaan uitvoeren.

1

HOOFDSTUK 1. SITUERING

1.2

2

To Be

Brandweer Antwerpen wil dit proces dus graag digitaliseren. Dit is het verhaal hoe zij het het project voor zich zien. De hydranten manager kan een web applicatie openen, waarin hij een duidelijk overzicht kan krijgen welke hydranten dringend gecontroleerd moeten worden op basis van de datum van de laatste controle. Ook wil de manager hier de mogelijkheid hebben om hydranten een prioriteit te geven, onafhankelijk van het tijdstip van de laatste controle. De manager zal dan ploegen naar de sectoren sturen die een controle nodig hebben. De ploeg zal in de kazerne, voor de controle, de laatste versie van de database met alle hydranten binnen halen op hun mobiele device zodat ze hier offline mee kunnen werken. Eenmaal dit klaar is kunnen ze vertrekken en hun lokale database aanpassen ter plaatse van de hydranten. Dit doen ze door de hydrant aan te klikken op de device en dan te kiezen om te controleren. Hun bevindingen worden lokaal opgeslagen en zo terug meegenomen naar de kazerne. Eenmaal daar maakt het device terug verbinding met het internet. De controleur is klaar met zijn controle en heeft enkel nog maar zijn bevindingen te syncen naar de database van de manager. De manager kijkt deze controles nog een laatste maal na en zal deze dan uploaden, zodat er indien nodig een reparatie gepland word.

Hoofdstuk

2

Bespreking Ontwikkeling We hebben dit project opgedeeld in verschillende delen die samen de architectuur vormen. Dit hebben we gedaan omdat het zo een beter overzicht geeft van het totale plaatje, ook is het makkelijker om eventuele aanpassingen te maken tijdens de ontwikkeling. Onze architectuur bestaat uit volgende lagen: Database Service Agents Data Access Entities Business API Web UI Application Mobile UI Application Unit Tests

Deze onderdelen zullen uitgelegd worden in de komende hoofdstukken samen met de verschillende technologieën die we gebruikt hebben.

3

HOOFDSTUK 2. BESPREKING ONTWIKKELING

Figuur 2.1: Architectuur

4


2.1

5

Database

Wij gebruiken een Microsoft Standard Query Language database om alle hydranten van de stad Antwerpen op te slaan. Updates die gemaakt worden door gebruikers in eind-applicaties worden ook hierin opgeslagen. Als er aanpassingen gemaakt worden in de tablet applicatie worden deze eerst in een SQLite database opgeslagen. Vanaf je een internet verbinding hebt, heb je de mogelijkheid om deze aanpassingen te syncen met de MS SQL database. Als de manager een aanpassing maakt in de web applicatie word deze rechtstreeks in de MS SQL database doorgevoerd. De database word gehost op een Microsoft SQL server. Dit relationeel database management systeem zorgt ervoor dat data kan worden opgeslagen en opgehaald worden. Een relationeel database management systeem werkt op het principe van een relationeel database model waarbij de tabellen verschillende relaties hebben onder elkaar. Het ophalen en wegschrijven wordt gedaan door een query taal. De query taal die door ons wordt gebruikt is SQL. SQLite is ook een database management systeem maar verschilt van het Microsoft systeem in dat het mee ge¨ınstalleerd wordt met de applicatie zelf en gebruikt geen client-server systeem. SQLite schrijft dus direct naar bestanden die op het systeem staan. Databases die worden onderhouden door software die SQLite gebruikt kunnen dus makkelijk gekop¨ıeerd worden om bijvoorbeeld ergens anders te gebruiken of de data in een browser te laten zien.

Figuur 2.2: MS SQL Database SQL maakt voornamelijk gebruik van vier commando’s nl. SELECT, INSERT, UPDATE en DELETE. Hiermee kan je de basisbewerkingen in SQL uitvoeren. Bij die commando’s moet je statements toevoegen die er voor zorgen dat de query uitgevoerd kan worden op een tabel. Het FROM keyword selecteert welke database je zal gebruiken. Hierna kunnen dan verschillende selectie criteria komen zoals bv. WHERE, ORDERBY, GROUPBY, JOIN enz... Deze zorgen ervoor dat je query resultaten gefilterd worden zodat je de data kan krijgen die je nodig hebt.


6

SQLite gebruikt ook zijn eigen query taal. Deze query taal begrijpt een groot deel van de standaard keywords en syntax van SQL omdat het daarop gebaseerd is. De syntax die wij gebruiken in onze applicaties wordt zonder problemen ondersteund door SQLite. Om SQLite in je project te gebruiken moet je een SDK voor Visual Studio installeren. Daarna kan je de C library invoegen en referencen naar het project waarin je het wil gaan gebruiken. Wij gebruiken databases als opslag voor onze hydranten en om deze te queryen zodat we ze kunnen bewerken in onze applicaties en terug invoegen tijdens een synchronisatie.

2.2

Service Agents

Service agents zorgen voor het ophalen van de data die we nodig hebben in onze applicaties. Wij hebben een service agent geschreven die alle hydranten uit Antwerpen gaat ophalen van een GIS server omdat alle data zich daar bevindt. Het downloaden en opslaan van alle informatie over de hydranten in onze eigen database is nodig omdat we geen toestemming hebben om zomaar aanpassingen te maken op deze GIS server zelf. Een GIS is een geografisch informatie systeem, het is een systeem dat ontworpen is om verschillende soorten geografische data bij te houden. Onze GIS houdt de informatie van verschillende geografische lagen in en rond Antwerpen bij. Voor onze stage opdracht hebben wij maar één laag nodig, de hydranten laag. Deze laag houdt bijvoorbeeld de ligging, coördinaten, status enz... bij over elk hydrant. Het ophalen van deze data gebeurd aan de hand van een RESTful service. Een RESTful web API service is een service die gebaseerd is op een Representational State Transfer architectuur. REST word vooral gebruikt om performante, schaalbare web services te maken.

Figuur 2.3: GIS API call Een RESTful API werkt met URIs die data terug sturen door het HTTP protocol te gebruiken. Door HTTP GET en POST methodes te gebruiken kan je data ophalen of bewerken via URIs, DELETE wordt gebruikt om data te verwijderen. Data die je ophaalt kan vesrchillende vormen hebben, in ons geval is dit tekst. Deze tekst is geformat in een JSON formaat.


7

JavaScript Object Notation is een manier om informatie te parsen, de JSON data is leesbaar en kan makkelijk gegenereerd worden door verschillende programmeertalen. Het kan gebruikt worden als een alternatief voor XML. In onze service agent gebruiken we een WebClient die een GET request gaat doen op de server. Dit kan niet zomaar want je moet inloggen op de server. Geldige login gegevens kan je krijgen door de CredentialCache te gebruiken om je windows credentials op te vragen en zo mee te sturen in de request. Als de WebClient alle JSON data heeft gedownload, deserializeren we het om in C# objecten te zetten die dan kunnen worden weggeschreven naar de MS SQL database.

2.3

Data Access

De data access laag zorgt voor de logica om te lezen en schrijven van en naar de database. We doen dit met behulp van Entity Framework Code First dat Unit of Work en Repository patterns implementeert. Entity Framework is een data-access technologie van Microsoft. Het wordt gebruikt om de taak van ontwikkelaars te vergemakkelijken door er voor te zorgen dat tabellen en relaties daartussen automatisch worden opgesteld in de database aan de hand van objecten en hun properties. Hierdoor kunnen ontwikkelaars zich meer richten op code in plaats van over de data opslag te moeten nadenken. Entity Framework kan worden toegevoegd aan een project door een NuGet package te installeren.

Figuur 2.4: Entity Framework

Entity Framework kan gebruikt worden op twee manieren: Code First Database First

Wij hebben Code First gebruikt omdat we nog geen database model hadden. Code First zorgt ervoor dat we een domein model kunnen opstellen in C# zonder te moeten nadenken over hoe de relaties in de database gaan zijn. Als het domein model opgesteld is geef je elk object in je domein een context. Deze context is de connectie met de database. Om de database te genereren, gebruikt Entity Framework vastgestelde regels die ervoor zorgen dat alle relaties en properties juist overgezet worden. Deze regels kunnen aangepast worden via een Fluent API of Data Annotations als je bijvoorbeeld iets anders wil dan wat EF standaard doet.


8

De Fluent API is veel uitgebreider dan Data anotations, omdat wij maar één object hebben om in de database te zetten was het gebruik van Data Annotations voldoende. Data annotations kunnen worden toegevoegd met rechte haken boven de property met daartussen de data annotation die van toepassing is. Data annotations kunnen bijvoorbeeld de primary key veranderen, maximale lengte van een veld limiteren, velden op required zetten enz... Database First wordt gebruikt als je al een bestaande database hebt. Hier kan je aan de hand van een edmx bestand de tabellen en hun relaties samenstellen. Dit wordt meer gebruikt door database designers dan programmeurs. Het edmx bestand wordt dan door Entity Framework ingelezen en aangepast om de database aan te passen naar hoe de designer het gedesigned heeft in de edmx editor. Om lees en schrijf operaties te kunnen uitvoeren van applicaties naar de database hebben we repository en unit of work patterns gebruikt. Deze patterns creëren een abstractie tussen de data access en business layer van onze applicatie. Ze worden vooral gebruikt om data access gecentraliseerd en makkelijk testbaar te houden. Voor elke entiteit die in de database moet worden opgeslagen, wordt een repository gemaakt. In deze repositories worden basis CRUD operaties ge¨ımplementeerd; create, read, update en delete. Als je dus iets wil aanpassen aan een entry in de database moet je eerst de repository aanroepen die dan op zijn beurt een unit of work gebruikt om de aanpassing door te voeren. Een unit of work zorgt ervoor dat verschillende aanpassingen in één transactie worden doorgestuurd naar de database. De unit of work word dus gebruikt zodat we niet voor elke kleine aanpassing Figuur 2.5: UOW en Reposieen connectie moeten maken met de database maar dat alles in tory één keer verzonden kan worden.

2.4

Entities

Dit zijn onze C# klassen. We hebben dit opgedeeld in een domein en een GIS gedeelte. Het domein wordt weggeschreven naar de MS SQL database terwijl het GIS gedeelte wordt gebruikt door de service agent om de data van de GIS server te halen. Voor het domein hebben we Data Annotations gebruikt omdat het gepersisteerd moet worden naar een database via EF. Ook zijn er repositories geschreven voor de domein klassen die ervoor zorgen dat de data bewerkt kan worden zoals in de vorige hoofdstukken al werd uitgelegd.


9

Het GIS gedeelte is een hydrant klasse die de properties heeft zoals de hydranten die we downloaden. Het wordt alleen gebruikt om de hydranten in een C# object te krijgen. Daarna wordt het met AutoMapper gemapt naar het hydrant object van het domein omdat er nog een aantal extra velden moeten worden toegevoegd. De extra velden die wij toevoegen zijn de velden die aangepast zullen worden in de applicaties maar zijn afhankelijk van een Id van een hydrant. Deze velden zijn aangeduid door er vooraf HCA (hydranten controle applicatie) te zetten. Deze properties geven informatie over de controleur van het hydrant, de status sinds de laatste controle, verschillende data zoals wanneer de goedkeuring door de manager en laatste controle zijn gebeurt en een opmerking die de controleur kan toevoegen.

AutoMapper wordt gebruikt om het mappen van het ene object naar het andere object te vergemakkelijken. Dit gebeurt door ingestelde conventies zodat we zelf enkel nog maar iets moeten configureren als een property op een andere manier moet worden gemapt. Ook zorgt AutoMapper ervoor dat je mappings getest kunnen worden. Automapper toevoegen tot je project Figuur 2.6: Autokan via NuGet. Mapper

2.5

Business

In de business laag zit de functionaliteit om te persisteren die zal gebruikt worden door de applicaties. Er wordt gebruik gemaakt van de repositories en unit of work die we hiervoor hebben geschreven. Voor de implementatie hebben we alles opgedeeld in readers, writers en validators. We hebben twee readers, één voor het lezen van de GIS-laag en een andere om de hydranten uit te lezen. De laag-reader maakt gebruik van onze service agent om alle hydranten te downloaden van de GIS server. Als alle 23.000 hydranten zijn gedownload worden ze in een lijst van GIShydrant entiteiten gestoken en via een mapper toegevoegd aan een lijst van hydrant objecten uit ons domein. De hydranten-reader heeft twee methodes om de hydranten uit onze lokale database te lezen, nl. ze allemaal uitlezen of aan de hand van een Id een enkele hydrant uitlezen. Dit gebeurt door eerst een unit of work aan te maken om dan de repository aan te roepen. Als dit is uitgevoerd gaat de unit of work de transactie met de database maken om de data in te lezen. We hebben maar één writer nodig omdat we maar één object opslaan in de database, het hydrant. Deze writer heeft de mogelijkheid om in te voegen, up te daten of te verwijderen. Deze operaties worden eerst gevalideerd door een validator die we hiervoor hebben geschreven omdat er geen foute data mag toegevoegd worden.


10

De validatie bestaat vooral uit if statements die afgaan of de data wel het juiste formaat heeft. Als er een fout gevonden wordt krijg je een foutmelding terug en word er niets naar de database geschreven of verwijderd. Als er geen fout gevonden wordt zal er net zoals bij de readers een unit of work gestart worden en de repository aangeroepen worden om de aanpassing door te sturen naar de MS SQL database. Doorheen de code in de business laag hebben we het Dependency Injection pattern gebruikt. Dit is een software design pattern dat voor inversion of control zorgt. Dependency injection zorgt ervoor dat modules in je code los gekoppeld kunnen worden. Er word een builder gebruikt die de klassen aanmaakt. Die klassen gebruiken een interface van de services die ze gaan implementeren om de methoden van die services te kunnen aanroepen. Vanaf de klasse is aangemaakt gaat de builder de service injecteren in de klasse als een dependency. Je gebruikt eigenlijk een placeholder voor de module die gebruikt zal worden. Het voordeel hiervan is dat je code makkelijker opnieuw gebruikt kan worden, beter testbaar en onderhoudbaar is. Het kan bijvoorbeeld Figuur 2.7: Dependency Injection ook gebruikt worden om alle logica buiten de client te houden zodat veranderingen een minimaal effect hebben op de client. Nadelen van dependency injection zijn dat het moeilijker wordt om ingewerkt te geraken in een bestaand project omdat er extra stappen moeten gevolgd worden om door de code te lezen. Dit hebben we vooral gemerkt tijdens het research. Een ander nadeel is bijvoorbeeld dat er meer code moet geschreven worden dan wanneer de code zonder dit pattern zou worden geschreven. Het pattern kan op 3 manieren gebruikt worden: interface injection, constructor injection en setter injection. Interface injection is de manier waarop wij het hebben toegepast. Hierbij wordt er een interface geschreven voor elke service en die interface wordt overal gereferenced in plaats van de service zelf. Constructor en setter injection doen de injectie hetzelfde maar dan in de plaats van via een interface wordt het gedaan via de setter en constructor.

2.6

API

We hebben een web Application Program Interface geschreven om de data van de hydranten via het internet beschikbaar te maken. Wij hebben de API vooral gebruikt in onze Windows 8 applicatie die HTTP requests doet om daarmee te verbinden.


11

Microsoft heeft een framework ontwikkelt dat het makkelijk maakt om web API’s te bouwen genaamd ASP.NET Web API 2. ASP.NET is een open source server-side web development framework en wordt gebruikt om in .NET web applicaties te ontwikkelen. ASP.NET gebruikt de term ’routes’ om de URIs van de API voor te stellen. Om API routes te configureren kan je overerven van de ApiController klasse. Deze klasse heeft alle functionaliteit die je nodig gaat hebben om met die route data door te sturen. De routes zelf worden gedefinieerd door IHttpActionResult methodes, ze maken gebruik van onze readers en writers om de data van de database te halen en in een XML formaat weer te geven in een browser. Je hebt de mogelijkheid om via attributen in te stellen of je HTTP GET of POST wil gebruiken, GET om hydramten op te halen en POST om up te daten. De namen van de routes kan je met een Route() attribuut geven, bijvoorbeeld: [Route(’allehydranten/’)]. Deze route zal dan afhankelijk van wat er in de bijhorende ActionResult geprogrammeerd is iets met de hydranten in de database doen. We hebben geen mogelijkheid gegeven om hydranten te verwijderen via de API want in ons geval zou dat nooit gebruikt moeten worden en is het ook zeker niet de bedoeling om een gebruiker dit te laten doen.

2.7

Web UI Application

Deze applicatie wordt gebruikt door de manager. Het is een ASP.NET MVC5 app die geschreven is in Razor HTML en C#. ASP.NET MVC5 gebruikt een Model-View-Controller software architecture pattern. Het is een pattern dat gebruikt wordt voor het schrijven van user interfaces. Wat het juist doet is het opdelen van je applicatie in drie componenten en er voor zorgen dat data tussen deze drie componenten wordt gedeeld om op een goede manier informatie aan de gebruiker te laten zien. Het model is de centrale component bij MVC, het houdt alle data bij die een applicatie kan gebruiken en stuurt deze door naar de view als dit nodig is. Een controller manipuleert de data van het model aan de hand van hoe de gebruiker input geeft via de user interface. De view neemt de data van het model en toont deze aan de user in een HTML pagina.

Figuur 2.8: MVC

ASP.NET MVC5 gebruikt een view engine genaamd Razor. Dit is een server-side HTML genererende taal die wij vooral gebruiken om de tabellen op de web pagina’s te vullen met data. De controllers zijn geschreven in C#. Voor de layout van de web pagina’s gebruiken we Bootstrap, dit is een HTML, CSS en JavaScript framework om mobiele websites te schrijven. Hierdoor ziet de web applicatie er goed uit en wordt alles schaalbaar op verschillende resoluties.


12

De controllers in onze applicatie erven over van de Controller klasse in de System.Net.MVC namespace. Deze klasse zorgt voor methoden die antwoorden op HTTP requests voor een ASP.NET website. In onze controller staat vooral logica om de filters op de hydranten tabel toe te passen. Om de hydranten op te halen hebben we voor de web applicatie Entity Framework Database First gebruikt. We hebben deze keer voor Database first gekozen omdat we al een database hadden. Om verbinding met de database te kijgen moesten we een wizard volgen om een aantal dingen in te sellen waaronder bijvoorbeeld een connectionstring, welke entities we willen importeren. Voor de views hebben we Bootstrap gebruikt. Bootstrap toevoegen in een ASP.NET web applicatie kan gewoon via een Nuget package te downloaden. Het biedt een aantal JavaScript en CSS componenten aan. De JavaScript componenten gebruiken JQuery om functionaliteit te bieden zoals modals, dropdowns, alerts, tooltips enz... Terwijl de CSS componenten een stijl geven Figuur 2.9: Bootstrap aan de verschillende HTML elementen. Het inloggen gebeurt door een alert waarin je je gebruikersnaam en wachtwoord moet ingeven. Dit wordt dan doorgestuurd naar een Active Directory om te checken of je wel toegang hebt tot de applicatie. Als je geen toegang hebt krijg je een ASP.NET error page. De hoofdpagina bestaat uit een tabel met filters om de hydranten te kunnen managen. Er wordt gebruik gemaakt van Razor om de data van de hydranten weer te geven in de tabel. De tabel heeft maar 10 resultaten per pagina om een goed overzicht te geven. Danzij Razor kunnen we in een loop alle entries van de tabel op de server genereren en doorsturen als een HTML pagina zonder JavaScript te moeten gebruiken. Elke entry is gekleurd om aan te geven waneer de laatste controle gebeurd is. Dit gebeurt ook door Razor waarbij de prioriteit wordt uitgelezen om dan een de toepassende kleur te geven. Door middel van paging kan je door meerdere hydranten browsen en wordt enkel de tabel herladen en niet de hele pagina. Als de manager andere resultaten wil zien is er de mogelijkheid om te filteren op elke kolom. Bij gebruik van meerdere filters word er AND gebruikt om resultaten weer te geven. De filters werken met behulp van ViewBags, deze zorgen ervoor dat je variabelen kan bijhouden en naar de controllers kan sturen. In deze controllers worden dan de hydranten gefilterd en terug gestuurd naar de pagina om de resultaten in een tabel te laten zien. Voor filters waar je een datum moet invoeren hebben we een datepicker toegevoegd. Aangezien dit geen standaard functionaliteit is binnen bootstrap hebben we een door de community gemaakte bootstrap- Figuur 2.10: Bootstrap datepicker van GitHub gehaald. Dit zorgt ervoor dat je een datum Datepicker kan kiezen in een pop-up en het zo goed geformat wordt, zo kunnen er geen parse fouten voorkomen bij het zoeken naar een datum.


13

Op de details pagina staan alle properties van een hydrant terug om bv. na te gaan of je wel het juiste hydrant hebt. Er is ook een pagina die enkel de gecontroleerde hydranten weergeeft. Hier kan de manager goedkeuren om ze naar de GIS te sturen. Een manager kan er ook voor zorgen dat bepaalde hydranten prioriteit krijgen om gecontroleerd te worden. Dit kan hij doen door een checkbox aan te vinken. Als deze checkbox van waarde verandert, wordt er via een JavaScript functie een JQuery post gedaan die de waarde doorstuurt naar de controller. De controller gaat dan op zijn beurt de waarde schrijven in de database.

2.8

Mobile UI Application

De mobile UI is een Windows 8 applicatie die gebruikt wordt door de controleurs en zal op een tablet werken. In deze applicatie wordt een kaart getoond met alle hydranten van Antwerpen op. Buiten de kaart is er ook de mogelijkheid om hydranten te filteren zodat niet altijd alles moet worden getoond op de kaart. De Windows 8 app is geschreven in HTML, CSS en JavaScript. Deze windows applicatie maakt gebruikt van WinJS, dit is een JavaScript library om universele windows store apps te schrijven. Ook werkt het samen met verschillende andere JavaScript libraries zoals bijvoorbeeld JQuery en AngularJS. Windows 8 applicaties maken gebruik van een manifest dat verschillende standaard instellingen bijhoudt. Een aantal voorbeelden van dingen dat het manifest doet zijn: Display namen Splash sreens Publish opties

Verder moet je in het manifest ook aanvragen doen om bepaalde resources te mogen gebruiken van de pc waar de applicatie op word ge¨ınstalleerd voorbeelden van deze kunnen zijn: Internet Locatie Webcam Enterprise Authentication

Daarnaast kan je nog een aantal filetypes associëren met de applicatie zodat deze binnen de app gebruikt kunnen worden.


14

Doorheen de JavaScript van de app wordt AngularJS gebruikt. Dit is een open-source web development framework ontwikkeld door Google. Het doel van Angular is om een MVC architectuur in web applicaties in te werken, door gebruik te maken van dependency injection en server-side services naar de client-side te brengen. Het maakt websites meer dynamisch door de syntaxis van HTML uit te breiden, data binding te gebruiken enz... Om de kaart te tonen hebben we gebruik gemaakt van een JavaScript library genaamd ’Leaflet’. Dit geeft ons bijna alle functionaliteit die we nodig gaan hebben om de map te gebruiken. De map die we gebruiken komt van OpenStreetMaps. Omdat we zoveel hydranten op de kaart tonen, hebben we Figuur 2.11: LeafletJS gebruik gemaakt van een plug-in bij leaflet die er voor zorgt dat de markers geclusterd worden aan de hand van het zoom level op de kaart. Als we dit niet gebruiken dan loopt de app vast omdat er teveel getekend moet worden. Alle lealet plugins en leaflet zelf zijn te vinden op GitHub of op de leaflet website. Leaflet is een open-source library om mobiel-vriendelijke interactieve kaarten te kunnen toevoegen. Om leaflet te gebruiken binnen AngularJS gebruiken we een leaflet-angular-directive. Dit implementeert alle functionaliteit van leaflet zelf, maar dan binnen Angular. Als je gaat filteren hebben we gebruik gemaakt van ’Ladda’. Ladda zorgt ervoor dat je een laad icoon krijgt over de HTML buttons om aan te geven dat de applicatie bezig is. Dit geeft een goede aanduiding dat er iets gebeurd, want als je niets filtert duurt het lang om alle 23.000 hydranten in te laden. Niet alleen moeten ze ingeladen worden, maar ook geclusterd en getoond worden op de kaart. Om op datum te filteren hebben we een bootstrap datepicker gebruikt. Dit zorgt voor het gemakkelijk formatten en kiezen van een datum. De lokale database met hydranten word aangeroepen via SQLiteJS. Deze JavaScript library gebruikt de SQLite C library om succesvol met een database te communiceren. Alle communicatie moet asynchroon gaan want zo werken Windows 8 applicaties. Het is natuurlijk de bedoeling dat de app up-to-date blijft, om de juiste hydrant info te tonen. Daarom is er ook een mogelijkheid om te syncen vanaf je een internet verbinding hebt. Het syncen gaat eerst checken of er al een database is. Als er geen database is gaat het alle hydranten downloaden via de API die we geschreven hebben. Als er al wel een database is, gaat de app checken welke hydranten aangepast zijn, om deze dan eerst via de API in de MS SQL database up te daten en daarna terug alle hydranten te downloaden.


2.9

15

Unit Tests

Unit tests waren maar een klein deel van de ontwikkeling. We hebben enkel tests geschreven om de backend te testen. We hebben ze enkel geschreven om het persisteren naar de database te testen. We hebben ze opgedeeld in Reader en Writer tests. De reader tests zorgen ervoor dat we data uit de database kunnen lezen en kijkt of wat er gereturned word niet null is. Als het niet null is, wordt er getest of de hoeveelheid entries in de database wel correct is. De writer tests zijn iets meer uitgebreid. Hier maken we ook gebruik van de service agent die de hydranten download van de GIS API server en deze dan allemaal insert in de MS SQL database. Ook wordt er getest of entries upgedate of verwijdert kunnen worden.

Hoofdstuk

3

Bespreking Software Zonder de nodige software was dit project enorm moeilijker of zelfs onmogelijk geweest om te maken. Je hebt natuurlijk een ontwikkelomgeving nodig om je code te schrijven. Software die we zoal gebruikt hebben: Microsoft Visual Studio Ultimate 2013 Team Foundation Server SQL Server Management Studio SQLiteBrowser Fiddler4 Axure RP Pro

3.1

Microsoft Visual Studio Ultimate 2013

Microsoft Visual Studio is een programmeerontwikkelomgeving van, zoals de naam wel duidelijk maakt, Microsoft. Visual Studio wordt voornamelijk gebruikt om in de talen Visual Basic.Net, C#, C++, en F# te programmeren. Daardoor is het ook een zeer geschikte tool om ASP.NET-webapplicaties, XML-webservices, desktopapplicaties en mobiele toepassingen te ontwikkelen, voor windows omgevingen dan toch. Wat perfect voor ons uit kwam! Ons project is namelijk een ASP.NET, MVC project als backend. Voor onze API hebben gebruik gemaakt van XML en we hebben een windows 8 applicate voor mobiele devices en desktop. Visual Studio is ook ontworpen

16

Figuur 3.1: Visual Studio logo

HOOFDSTUK 3. BESPREKING SOFTWARE

17

om het .Net-framework te ondersteunen waar ons project volledig op steunt.

3.2

Team Foundation Server

Bij Digipolis wordt er gebruik gemaakt van een Team Foundation Server, ofwel TFS. Deze tool wordt gebruikt om makkelijk in team te werken aan een project, wat een goede ondersteuning is bij een agile werkomgeving. Aangezien TFS een Microsoft product is, werkt het goed samen met Visual Studio. Zo konden we makkelijk aan verschillende onderdelen werken en pushen/syncen wanneer we er mee klaar waren. Ook kwam dit van pas op moment dat we volledig de bal mis sloegen, je kan makkelijk een versie terug gaan en met een schone lei beginnen. Een andere nuttige functie van TFS, is het ’mergen’ in Visual Studio. Team Als de server merkt dat er meerdere mensen aan hetzelfde document Figuur 3.2: gewerkt hebben, waardoor er conflicten ontstaan zijn, zal hij dit Foundation Server logo weergeven en de optie geven om te ’mergen’. De gebruiker krijgt dan drie vensters te zien: een scherm met de online versie aanwezig op de server, zijn eigen versie die hij wil pushen en de uiteindelijk vorm die het document zal aannemen. Het programma geeft duidelijk weer met kleuren waar er aanpassingen geweest zijn, rood waar code verwijdert is en groen voor een toevoeging. De gebruiker kan dan door middel van checkboxes kiezen welke veranderingen hij wil behouden. Indien zelfs nodig is het mogelijk om code te schrijven in het output scherm.

3.3

SQL Server Management Studio

SQL Server Management Studio, opnieuw een Microsoft product, wordt gebruikt om te configureren, managen en administreren van alle componenten van een Microsoft SQL Server. Dit was een grote hulp voor ons project aangezien de ArcGIS server veel meer lagen bevat dan wij nodig hebben, we mogen ook niet zomaar gaan aanpassen op deze ArcGIS. Wat we wel mogen is data hier van af halen. We halen de hydranten-laag van de ArcGIS en slagen die op in SQL database. Omdat dit toch nog een aanzienlijk aantal hydranten is, 22976, was deze server management studio zeer praktisch. We konden makkelijk queryen in onze SQL database wat een goed overzicht gaf. Door dit overzicht moesten we ook niet een reader gebruiken om de resultaten Figuur 3.3: SQL Servan een write te controleren. Het was makkelijk om een attribuut aan ver Management Studio logo


18

te passen, als we snel iets wouden testen zonder hier ook weer logica voor te moeten schrijven.

3.4

SqliteBrowser

Voor onze mobiele applicatie hadden we nood aan lokale opslag, deze moet namelijk offline kunnen werken. Daarom hebben we gebruik gemaakt van een SQLite database, maar opnieuw hadden we hier moeilijk overzicht over wat er nu wel en niet in/uit ging. Na wat opzoek werk kwamen we uit op SQLiteBrowser, een handige tool die bijna hetzelfde is als de SQL Server Management Studio. Bij het inladen van een database krijg je vier tabbladen: Database Structure, Browse Data, Edit Pragmas en Execute SQL. Het Figuur 3.4: SqliteBrow’Database Structure’-tabblad toont alle tabellen aanwezig in je ser logo database, deze kan je dan verder inspecteren waar je alle attributen te zien krijgt. Ook krijg je een duidelijk overzicht van welke soort de attributen zijn: integer, tekst, boolean, enzovoort. De primaire en vreemde sleutels kan je ook zeer makkelijk terug vinden in dit overzicht. In het ’Browse Data’-tabblad kan je een tabel kiezen waarvan je de inhoud wil bekijken. Het is echter ook mogelijk om in elke kolom van de tabel te filteren of je kan ook meteen naar een bepaalt index nummer gaan. Hierdoor kan je zeer makkelijk specifieke data opzoeken. Als je snel even iets wou aanpassen kan je dit doen door een te dubbelklikken op een veld in het browse venster, maar voor grote aanpassingen of zoekopdrachten maak je gebruik van het ’Execute SQL’-tabblad. Met behulp van SQL statements, kan je hier alle CRUD-operaties uitvoeren die nodig zijn op je database.

3.5

Fiddler4

Fiddler is aan applicatie geschreven door Telerik dat gebruikt wordt voor HTTP debugging. Fiddler controleert al het HTTP en HTTPS trafiek, en logt dit. Wij hebben dit voornamelijk gebruikt tijdens het schrijven van de API. Het maken van POST en GET statements liep niet altijd van Figuur 3.5: Fiddler werking


19

leien dakje, met Fiddler konden we de error berichten analyseren en de nodige aanpassingen maken waar nodig.

3.6

Axure RP Pro

In het begin van ons project hebben een deel analyse gedaan. Onder dit gedeelte viel dan ook het ontwikkelen van wireframes. Axure RP Pro is een wireframing, rapid prototyping, documentatie en specificatie tool gericht op het ontwikkelen van web en desktop applicaties. Het programma is veel klik en drop, wat het zeer makkelijk maakt om basic layouts mee te maken. Als je echter de tijd hebt, en de nodige kennis van het programma, kan je er ware meesterwerken mee maken. Een voorbeeld hiervan in ons eigen project was het volgende: We hebben een tabel waar een sorteer functie in nodig was, is op zich Figuur 3.6: Axure logo simpel genoeg. In Axure is dit jammer genoeg wel iets moeilijker, vooral ook tijdrovend. De tabel heeft geen sorteer functie in dit programma, mar je kan het wel zelf maken. Je kan de headers van de kolommen een functie geven bij het klikken, hier werd het dan een functie om een geheel nieuwe tabel te tonen in plaats van die te sorteren. Je moet dus nog wel je data handmatig sorteren en deze dan tonen bij de druk op de knop, maar de klant weet dit niet en ziet de tabel gewoon sorteren bij een presentatie. Dankzij de wireframes die we hier in gemaakt hebben, kregen we een duidelijk overizcht van wat we precies in onze applicatie wouden. Het gaf ons ook een duidelijker beeld hoe we de userstories uit konden werken. Na het bespreken van de wireframes met onze promotor waren de userstories veel duidelijker uitgewerkt.

Hoofdstuk

4

Resultaten 4.1

Inleiding

Na het opstellen van de Business (Entity framework, readers en writers), de Resource Access(repositories, unit of work en service agents) en de API om met dit alles te communiceren, zijn we begonnen aan de front- en backend applicaties. Hiervoor hadden enkele user stories gekregen en besproken in samenwerking met onze promotor Gert Van De Wouwer. We hebben hier zoveel mogelijk van afgewerkt om, met als resultaat twee werkende applicaties in beta, die een goed beeld schetsen wat de mogelijkheden zijn naar de klant.

4.2

Backend Applicatie

4.2.1

User stories

User Story backend 1: Als hydranten manager kan ik een lijst overzicht krijgen van alle hydranten in de GIS database. De formatering hiervan is tien hydraten per pagina. User Story backend 2: Als hydranten manager kan ik de lijst van hydranten queryen en sorteren, zodat ik een overzicht ven de gecontroleerde en nog te controleren hydranten heb.

Acceptatiecriteria: – Ik kan sorteren op DatumlaatsteControle, NaamLaatsteControleur, StatusLaatsteControle. zowel opgaand als afgaand.

20

HOOFDSTUK 4. RESULTATEN

21

– Ik kan AND-filters bouwen met deze velden: * StatusLaatsteControle * NaamLaatsteControleur * DatumLaatsteControle groter of kleiner dan een opgegeven datum

– De filters zijn altijd zichtbaar. – Ik kan de filters wissen met een knop. User Story backend 3: Als hydranten manager kan ik een hydrant aanduiden als ’Prioritair Controleren’, zodat de hydranten controle ploeg dit duidelijk kan zien tijdens hun controle. User Story backend 4: Als hydranten manager wil ik een overzicht kunnen zien welke hydranten gecontroleerd zijn.

Acceptatiecriteria: – Ik krijg een overzicht van gecontroleerde hydranten die nog niet goedgekeurd zijn – Ik kan deze hydranten goedkeuren, zodat deze data in de MySQL database opgeslagen wordt. – De goedkeuring en datum er van wordt ingevuld.

4.2.2

WebUI Application

Overzicht De eerste stap voor de WebUI applicatie was dus een overzicht krijgen van alle hydranten in de MS SQL database, ook moesten de belangrijkste attributen zichtbaar zijn hierin. Als de hydranten manager meer details wil weten over een bepaalde hydrant, kan hij die zien door op de ’Details’ link te klikken. Deze details-pagina geeft alle attributen van het hydrant weer in een overzichtelijke lijst. Het overzicht van de hydranten wordt opgedeeld in pagina’s van tien, zo hebben we een niet te drukke pagina en kan je ook makkelijker op een tablet of dergelijken het overzicht gebruiken. Als extra hebben we aan deze pagina kleuren per hydrant gegeven. Deze kleuren geven weer hoe dringend de hydrant gecontroleerd moet worden(rood is zeer dringend, oranje matig en groen niet), op basis van de datum van de laatste controle. De groene kleur wil zeggen ’laatst gecontroleerd tussen dit en een half jaar’, oranje ’tussen een half jaar en een jaar’ en rood ’langer geleden dan een jaar’.


22

Figuur 4.1: WebUI applicatie. Queryen en filteren Eenmaal dit compleet was konden we beginnen aan user story twee, het queryen en sorteren van de hydranten. Het sorteren moet maar op drie verschillende attributen kunnen: DatumlaatsteControle, NaamLaatsteControleur en StatusLaatsteControle, dit zowel op- als aflopend. We hebben echter voor ook op Id een sorteer functie gemaakt omdat dit ons ook zeer handig leek. De attributen die sorteerbaar zijn duidelijk zichtbaar doordat ze een blauwe naam hebben. Het sorteren werkt zeer makkelijk, de gebruiker hoeft enkel te klikken op de titel van de kolom in de tabel dewelke hij wil sorteren. Door nogmaals op hetzelfde attribuut te klikken kan je veranderen tussen open aflopend sorteren. Het sorteren werkt slechts in een kolom tegelijkertijd, als je in een andere kolom gaat sorteren wordt er naar de anderen niet meer gekeken. Als je terug het standaard overzicht wil verkrijgen, klik op je op het ’Id’ attribuut. Dit is namelijk de default optie voor het sorteren, en krijg je dus te zien bij het openen van de pagina. Het filteren kan op elk attribuut gedaan worden. De manager moet slechts zijn argumenten in de tekstvelden bovenaan de tabel invullen, en dan de knop ’Filter’ aanklikken. Het aanklikken van de knop zal de pagina refreshen en enkel de gewenste resultaten tonen. De attributen waar hij niets mee wil doen, laat hij gewoon leeg en zullen ook niet gefilterd worden. Als de manager toch niet tevreden is met de filter, kan hij de tekstvelden handmatig leegmaken of de ’Verwijder Filters’ knop gebruiken. Deze knop maakt alle tekst velden leeg en refresht de pagina waardoor alle hydranten weer zichtbaar worden.


23

De verschillende attributen, vereisten elk een andere manier om te filteren. Attributen met nummers zoals ’Id’ en ’Postcode’ moeten helemaal juist ingegeven worden om resultaten op te leveren. Zo krijg je bijvoorbeeld als je ’1’ in vult bij ’Id’ enkel hydrant 1 te zien, en niet elke hydrant die een ’1’ in zijn id heeft. En krijg je enkel bij de volledige postcode, bijvoorbeeld ’2070’ de hydranten in dat gebied te zien. Andere kolommen zoals ’Straatnaam’, ’Sector’ en ’Opmerking’, kunnen iets ’vager’ ingevuld worden. Als je bijvoorbeeld alle hydrant op pleinen in Zwijndrecht wil tonen, kan je gewoon ’plein’ en ’zwij’ invullen voor dit resultaat. Andere kolommen die een kleiner aantal verschillende waarden bevatten, hebben we voorzien van een dropdown lijst. Deze worden automatisch ingevuld, met alle verschillende waarden die de kolom bevat in de MS SQL database, bij het refreshen/openen van de pagina. Zo kan je bijvoorbeeld alle hydranten bekijken die het laatst gecontroleerd zijn door ’Snijers’ of ’Lauwers’. Een laatste soort data waar we op moeten kunnen filteren, is een datum. Hiervoor gebruiken we de Datepicker van Bootstrap. De manager kiest een datum uit de kalender en of hij resultaten wil krijgen van voor, na of op deze datum. Een voorbeeld hiervan is bijvoorbeeld dat de manager wil zien welke hydrant gecontroleerd zijn op de dag van vandaag, hij kiest de ’op’ optie en klikt op het tekstvak ’Datum’ waar hij de juiste datum kiest. Eenmaal op ’Filter’ geklikt, krijgt hij alle hydranten te zien die op die datum gecontroleerd zijn. Prioritair Controleren De derde user story hield in dat de manager een prioriteit moet kunnen instellen voor eender welke hydrant. In de tabel vinden we de kolom ’Controle Prioriteit’ terug. Onder deze kolom heeft elke hydrant een eigen checkbox, welke de manager kan aan- of afvinken. Wanneer een hydrant een vink krijgt zal de pagina refreshen en zal de kleur, als deze al niet rood is, veranderen naar een rode kleur. Dit wordt dan ook meteen opgeslagen in de MS SQL database, zodat een controleur dit duidelijk te zien krijgt in zijn applicatie (meer hierover onder Frontend Applicatie). Bij het afvinken wordt er ook een refresh uitgevoerd en wordt de kleur van de hydrant terug bepaald door de datum van de laatste controle. De MS SQL database krijgt ook weer een update, waardoor de controleur ook op de hoogte is. Gecontroleerde Hydranten Door op de knop ’Goed te keuren hydranten’ te klikken, krijgt de manager een overzicht (vergelijkbaar met de startpagina) met alle gecontroleerde hydranten die wachten op goedkeuring. Hier kan de manager beslissen of een controle op een hydrant goed is gebeurd, of niet. Het is ook de bedoeling dat de manager hier een controle kan afkeuren, maar wegens een foute gedachtegang en het te laat opmerken hebben we dit niet meer kunnen implementeren. Bij het goedkeuren van de controle, wordt de datum van de goedkeuring aangepast en zal de controleur applicatie ook niet meer tonen dat het wacht op goedkeuring.


24

Figuur 4.2: WebUI, hydranten goedkeuren.

4.3 4.3.1

Frontend Applicatie User Stories

User Story frontend 1: Als hydranten controle ploeg kan ik een visueel overzicht krijgen van de Hydranten, zodat ik weet welke hydranten al gecontroleerd zijn en welke nog te controleren zijn. Acceptatiecriteria:

– Ik kan de kaart met de hydranteniconen zien, in-uit zoomen (pinchen), pannen. Dit werkt met muis, of op touch-screen zonder muis. – De hydranten clusteren automatische op hogere zoomlevels. – Ik kan de kaart centreren op een bepaalde straat. – Als ik op een hydrant klik (of druk), zie ik de attributen. User Story frontend 2: Als hydranten controle ploeg kan ik een visueel overzicht krijgen van de Hydranten, zodat ik een overzicht heb over het aantal hydranten op een gekozen plaats, en gegevens van een individuele hydrant kan raadplegen. Acceptatiecriteria:

– Ik kan een filter instellen * Toon alle hydranten die op ’Prioritair te controleren staan’.


25

* Toon alle hydranten met bepaalde data.

– Ik kan alle hydranten van Antwerpen bekijken. – Ik kan alle hydranten in een sector bekijken. – Bepaalde hydranten hebben andere iconen/kleuren. * Prioritair te controleren hydranten hebben een uitroepteken als icoon. * Hydranten die meer als een jaar niet gecontroleerd zijn hebben een rode kleur. * Hydranten die langer dan een half jaar en korter dan een jaar geleden gecontroleerd geweest zijn, hebben een oranje kleur. * Hydranten die het afgelopen half jaar gecontroleerd geweest zijn, hebben een groene kleur. * Hyranten die gecontroleerd zijn, maar de controle nog niet van is goedgekeurd, hebben een grijze kleur. User Story frontend 3: Als hydranten controle ploeg kan ik het resultaat van een hydrantcontrole in de app invoeren. Acceptatiectriteria: Flow

– Klik hydrant – Klik ’Edit data’ – Hydrant controle ploeg moet een status selecteren – Als ’niet actief’, moet een opmerking verplicht ingevuld worden. – Hydrante controle ploeg kan controle bevestigen en opslaan. Dan wordt datum laatste controle en naam laatste controleur worden automatisch ingevuld, prioriteit wordt op ’geen prioriteit’ gezet. – Hydrante controle ploeg kan controle annuleren. De view wordt afgesloten en er word geen data aangepast User Story frontend 4: Als hydranten controle ploeg kan ik de hydrantendatabase syncen. Een sync knop:

– De bevindingen van de controle ploeg worden naar de MS SQL database geschreven. – De controle applicatie haalt daarna de MS SQL database binnen.


4.3.2

26

Mobile UI Application

Figuur 4.3: MobileUI applicatie.

Overzicht Bij het opstarten zal, indien er een lokale database aanwezig is op het device, de applicatie deze beginnen inladen en alle hydranten tonen op de leaflet (die gebruik maakt van OpenStreetMaps). De hydranten worden op de kaart geplaatst door middel van coördinaten, meegeleverd via de GIS, met de leaflet markers plugin. De markers worden geclusterd met behulp van de leaflet marker cluster plugin. Deze plugin clustert de markers op basis van afstand tussen verschillende hydranten op schaal, hoe verder je uit zoomt hoe groter een cluster wordt. De markers en de clusters hebben allemaal verschillende kleuren met elk hun betekenis er aan. De clusters zijn donkerder van kleur naarmate er meer markers in één cluster zitten. Markers hebben twee verschillende vormen: een uitroepteken ofwel een een gewone marker. Die gewone marker kan dan weer van kleur verschillen: groen, oranje, rood of grijs.


27

Uitroepteken: Hydrant met een handmatig ingestelde prioriteit, dus dringend controleren. Groen: Hydrant dat het laatste half jaar nog gecontroleerd is, niet dringend. Oranje: Hydrant dat tussen een jaar/half jaar nog gecontroleerd is, middelmatig dringend. Rood: Hydrant meer als een jaar niet gecontroleerd, dringend controleren. Grijs: Hydrant gecontroleerd, nog niet goedgekeurd door de manager.

Figuur 4.4: MobileUI, verschillende markers. Bij het aanklikken van deze markers, krijg je een pop-up te zien met enkele van de belangrijkste attributen van de hydrant. In deze pop-up krijg je ook de optie om een controle uit te voeren door op de ’Edit data’ knop te klikken. Filters en Straat zoom Het filteren van de hydranten werkt in de mobile applicatie ongeveer hetzelfde als bij de WebUI. Filteren op een getal, zoals ’Id’ en ’Postcode’, moeten helemaal juist zijn. Als je bij ’Id’ bijvoorbeeld ’5’ in geeft en op ’Filter hydranten’ klikt, krijg je enkel het hydrant met die id te zien op de kaart. Of als je voor de postcode gaat krijg je bij ’2070’ alle hydranten te zien met die postcode, ’20’ ingeven zal je niets opleveren. Straat en sector kan je de volledige naam ingeven, maar ook een gedeelte. Door ’plein’ in te geven bij de ’Straat’ filter krijg je een overzicht van alle hydranten in Antwerpen, gelegen op een plein. De dropdown lijsten en datepickers spreken voor zich, je kiest wat voor hydrant je zoekt en je krijgt deze op de kaart te zien na het drukken op de filter knop. Als je een overzicht wilt van alle hydranten in Antwerpen, gebruik je de ’Clear Filters’-knop (als er filters ingevuld zijn) en dan ’Filter hydranten’. Na enkele ogenblikken laden krijg je ze alle 23000 te zien.


28

Figuur 4.5: MobileUI, pop-up bij het aanklikken van een marker. Een extra optie waar ook vraag naar was in user story 1, is het centreren op een straat. Deze functie kan je gebruiken door de volledige straatnaam in te vullen onder ’Ga naar’ en op de ’Ga’ knop te klikken. We hebben de keuze gemaakt de volledige naam te gebruiken zodat er geen dubbelzinnigheden zijn. Er zijn bijvoorbeeld meerdere pleinen in Antwerpen, waardoor de kans groot is dat je naar het verkeerde gestuurd wordt. Met het duwen op de ’Ga’-knop wordt er gezocht naar een hydrant in de database met die straatnaam. Eenmaal er zo een hydrant gevonden is, zal de kaart pannen naar de coördinaten van dat hydrant. Controle Uitvoeren Zoals eerder vermeld krijg je in de marker pop-up een ’Edit data’ knop te zien. Als je deze aan klikt krijgen een nieuwe pop-up. Hierin kan de controleur kiezen of de hydrant ’actief’ of ’niet actief’ is. Als er voor ’niet actief’ gekozen wordt is het verplicht om een opmerking in te vullen, bij ’actief’ is dit optioneel. Eenmaal alle verplichte velden ingevuld zijn kan de controleur zijn bevindingen lokaal opslagen in een SQLite database. Als er tijdens de controle, op eender welke moment, de controleur toch besluit niet door te gaan, kan hij altijd op ’annuleren’ klikken. Bij het aanklikken van deze knop, sluit de controle pop-up en gebeurd er voor de rest niets.


29

Figuur 4.6: MobileUI, pop-up waarin de controleur zijn bevinding in voegt. Syncen Een laatste functie van de mobiele applicatie waar we nog niet over gesproken hebben is de ’sync hydranten’ knop. Bij het aanklikken van deze knop zal, indien er internet verbinding is, de applicatie uit de lokale database de gecontroleerde hydranten halen en syncen naar de MS SQL database. Vanaf dat deze operatie voltooid is, gaat de applicatie ook nog de laatste versie van de MS SQL database ophalen en zijn lokale SQLite database er mee overschrijven. Het syncen gaat snel genoeg tot we op het punt komen van de SQLite database overschrijven. Dit stuk is vrij traag en kan tot enkele minuten duren. Het is dus het beste als dit syncen enkel uitgevoerd wordt een paar minuten voor de controle en nog eens als de controleur terug komt van de controle.

Hoofdstuk

5

Besluit Dit project heeft toch wel onze ogen geopend. Het niveau verschil tussen programmeren in de les of werken aan een project in een bedrijf is totaal niet met elkaar te vergelijken. Op school zijn we gewoon om aan kleinere projecten te werken, waardoor je code overzichtelijk blijft ook al steek je er niet zo heel veel structuur in. Het project dat we bij Digipolis gemaakt hebben was van een veel grotere schaal en moesten we dan ook veel meer gestructureerd werken. Het is ook een MVC applicatie, waardoor je zeker je mappen structuur moet onderhouden. Maar hoe hard het verschil ook was, we hebben er veel uit opgestoken. We hebben niet enkel met C# gewerkt, maar ook met JavaScript en AngularJS wat minder in de les was voorgekomen. We hebben ook voor het eerst met Razor gewerkt, wat ook een aangename ervaring was. Al bij al dus veel geleerd uit deze stage en zeker een voldaan gevoel. Het resultaat dat we bereikt hebben is zeker iets waar we tevreden over kunnen zijn. We hebben twee werkende applicaties die zo goed als alle functionaliteiten bevatten die in de user stories stonden. Er zijn hier een daar nog wel schoonheidsfoutjes, die we met iets meer tijd hadden kunnen oplossen. Maar we hebben gekozen om meer tijd te steken in een functionele app te schrijven, dan alles dat perfect werkt. Niet alleen wij, maar ook onze promotor was tevreden van ons werk. Het is niet en afgewerkt product, maar wel een goede beta. Ze gingen het zeker laten zien aan de brandweer (de klant), om dan te beslissen hoe ze er verder mee gaan. De kans is er echter wel dat het opzij gezet wordt aangezien het project niet meer zo een hoge prioriteit was voor de brandweer. Om nog even terug te komen op wat nog niet naar wens is. Tegen het einde van de stage kwamen we nog op een probleem dat we gemist hadden door een verkeerde visie. De manager kan momenteel geen controles afkeuren omdat updates automatisch in MS SQL database geschreven worden. Pas dan kan de manager goedkeuren, maar het is niet mogelijk om die data update om te draaien. Dit kan opgelost worden door een extra tabel in de database toe te voegen, waar de updates opgeslagen worden tot goedkeuring. Na deze goedkeuring zou je de ’master’ dan wel kunnen overschrijven. Ook hadden we graag ook nog de kaart offline werkende gekregen. 30

HOOFDSTUK 5. BESLUIT

31

Momenteel werken we nog met een online versie van Open Street Maps, wat zeker zijn job goed doet. Het spijtige is, is dat je nu niet echt een controle kan gaan uitvoeren ter plaatse. Of toch niet met mobiele devices zonder mobiele data-opties.

Bijlage

A

Installatie Instructies voor de Mobile UI Applicatie Windows 8 applicaties moeten niet altijd via de Windows Store ge¨ınstalleerd worden. Een andere mogelijkheid is deze applicaties sideloaden, wat veel gebruikt wordt voor apps die privé worden gebruikt. Om de tablet applicatie voor de controleurs te installeren kan je volgende stappen gebruiken: 1. Installeer het certificaat dat bij de applicatie komt Dit certificaat kan je vinden in ”AppPackages/Digipolis.HydrantenControle.MobileUI.App 1.0.0.0 x86 Debug Test/”

Figuur A.1: Certificaat

32

BIJLAGE A. INSTALLATIE INSTRUCTIES VOOR DE MOBILE UI APPLICATIE

33

2. Als je het certificaat hebt gevonden, rechterklik daar dan op en kies ”certificaat installeren” 3. In de wizard die geopend wordt kies je volgende opties: ’lokale computer’ Volgende Kies ’Ja’ als Windows Gebruikersaccount Controle op de voorgrond komt ’alle certificaten in het onderstaande archief opslaan’

4. Druk dan op bladeren waardoor een nieuw venster word geopend In dit venster kies je het volgende: ’Vertrouwdebasiscertificeringinstanties’ Volgende Voltooien

Nu heb je het certificaat geinstalleerd dat ervoor zorgt dat Windows zal toelaten om deze app te installeren. 5. Open Windows PowerShell en gebruik volgende commando’s: Import-Module Appx ’Add-AppxPackage padNaarDe.appxFile -DependencyPath padNaarDependencies/

Figuur A.2: Powershell

Bibliografie

[1] Angularjs. http://angularjs.org. [2] Automapper. http://www.automapper.org. [3] Axure rp. http://en.wikipedia.org/wiki/Axure RP. [4] Bootstrap. http://getbootstrap.com/. [5] Dependency injection msdn. http://msdn.microsoft.com/en-us/library/ff921152.aspx. [6] Dependency injection wikipedia. http://en.wikipedia.org/wiki/Dependency injection. [7] Entity framework. http://msdn.microsoft.com/en-us/data/ee712907. [8] Entity framework. http://www.asp.net/entity-framework. [9] Gis. http://en.wikipedia.org/wiki/Geographic information system. [10] Leaflet. http://leafletjs.com/. [11] Microsoft sql server. http://en.wikipedia.org/wiki/Microsoft SQL Server. [12] Microsoft visual studio. http://nl.wikipedia.org/wiki/Microsoft Visual Studio. [13] Repository msdn. http://msdn.microsoft.com/en-us/library/ff649690.aspx. [14] Sql. http://en.wikipedia.org/wiki/SQL. [15] Sql server management Management Studio.

studio.

http://en.wikipedia.org/wiki/SQL Server

[16] Sqlite. http://www.sqlite.org/. [17] Sqlite browser. http://sqlitebrowser.org/. [18] Sqlite wikipedia. http://en.wikipedia.org/wiki/SQLite. [19] Team foundation server. http://en.wikipedia.org/wiki/Team Foundation Server.

34

BIBLIOGRAFIE

35

[20] Telerik fiddler. http://www.telerik.com/fiddler. [21] Web api. http://en.wikipedia.org/wiki/Web API. [22] Rowen Miller Julia Lerman. Programming Entity Framework Code First. O’Reilly, 2005.

Hydranten Controle Applicatie voor de Brandweer Antwerpen

Recommend Documents