ProCure voor tablet en mobiel Technische handleiding en gebruikshandleiding

ProCure voor tablet en mobiel Technische handleiding en gebruikshandleiding

Project aangeboden door Kimberley Verstraete voor het behalen van de graad van Bachelor in de New Media and Communication Technology Academiejaar 2013-2014 Stageplaats : Integreat te Waregem Stagementor : Wim Cordier Stagebegeleider : Sophie Vanwijnsberghe

ProCure voor tablet en mobiel Technische handleiding en gebruikshandleiding

Project aangeboden door Kimberley Verstraete voor het behalen van de graad van Bachelor in de New Media and Communication Technology Academiejaar 2013-2014 Stageplaats : Integreat te Waregem Stagementor : Wim Cordier Stagebegeleider : Sophie Vanwijnsberghe

Woord vooraf Deze thesis is geschreven als naslagwerk van mijn stage bij Integreat. Dit eindwerk is geschreven voor eindgebruikers van ProCure. Dit project kon niet vlot verlopen zonder enige hulp en steun van derden, daarom wil ik mijn oprechte dank aanbieden aan alle mensen die betrokken waren bij de ondersteuning van dit eindrapport. Eerst en vooral wil ik Howest en Integreat bedanken, omdat ze mij de kans gaven deze opdracht in optimale omstandigheden uit te werken. Ik bedank mijn stagebegeleider Sophie Vanwijnsberghe voor haar onmisbare bijdrage, voor al haar ideeën en de eerlijke feedback. Tevens bedank ik mijn colleaga’s Wim Cordier, Johannes Dursin, Stefaan Missiaen, Bart Bultinck, Benny Declerq en Karolien Sabbe voor de ondersteuning en aanmoediging. Tot slot bedank ik mijn vrienden en familie voor alle steun.

Verklarende woordenlijst API

Een application programming interface (API) is een verzameling definities op basis waarvan een computerprogramma kan communiceren met een ander programma of onderdeel (meestal in de vorm van bibliotheken).

Back end

Datgene wat onzichtbaar is voor de gebruiker van een programma: uitlezen van nieuwsberichten uit een database, registeren van een nieuwe gebruiker, uploaden van bestanden, berekeningen, etc.

Dienstverplaatsing

Verplaatsing met de auto van een locatie naar de locatie waar de job uitgeoefend wordt.

Fietsverplaatsing

Verplaatsing met de fiets van de woonplaats van de weknemer naar de locatie waar de job uitgeoefend wordt.

Front end

Datgene wat zichtbaar is voor de bezoeker van een programma: de afbeeldingen, het webdesign, de lettertypen, etc.

GKG

Campus Graaf Karel De Goedelaan van de Hogeschool West-Vlaanderen.

ID

Unieke identiteit.

Intercampus verplaatsing

Verplaatsing met de fiets van de ene campus naar een andere campus.

JSON

Afkorting voor JavaScript Object Notation. Deelverzameling van de programmeertaal JavaScript die gebruikt wordt voor het uitwisselen van datastructuren, vooral in web applicaties voor het asynchroon gegevens ophalen van webservers.

MVVM

Een ontwerp patroon in programmeertalen. MVVM staat voor model-view-viewmodel. Dit patroon laat ons toe om op een gestructureerde manier applicaties te bouwen. Het is tevens het meest gebruikte patroon in de XAML wereld. Models in een MVVM applicatie zijn de voorstellingen van de data. View in een MVVM applicatie is het visuele van de applicatie.

ViewModel is verantwoordelijk voor het uitvoeren van acties uit de view, de view voorzien van data uit het model en het tonen van de juiste View. Platform

Een basis waarop software ontwikkeld wordt.

Portable Class Library

Een project dat helpt om snel en gemakkelijk cross-platform apps en bibliotheken te bouwen voor Microsoft-platforms.

ProCure

Applicatie voor aankoopbeheer.

SLA

Afkorting voor Service Level Agreement. Overeenkomst tussen aanbieder en afnemer.

Storagefile

Een plaats waar gegevens kunnen opgeslagen worden.

Web Service

Een web service kan omschreven worden als een interface van een applicatiecomponent, die toegankelijk is via standaard web protocollen, en waarbij meestal wordt gecommuniceerd via XML zonder menselijke tussenkomst.

Wireframe

Blauwdruk van de applicatie. Schets van de lay-out van de applicatie.

XAML

Afkorting voor Extensible Application Markup Language. Het is een declaratieve taal van Microsoft gebaseerd op XML. De taal wordt gebruikt om gestructureerde waarden en objecten te initialiseren.

XML

Afkorting voor Extensible Markup Language. Het is een standaard syntax van formele opmaaktalen waarmee men gestructureerde gegevens kan weergeven in de vorm van platte tekst.

1 INHOUDSOPGAVE 2

Stagebedrijf ..................................................................................................................................... 5 2.1

Identificatiegegevens stagebedrijf .......................................................................................... 5

2.2

Voorstelling ............................................................................................................................. 5

3

Stage opdracht ................................................................................................................................ 6

4

Eerste analyse lay-out ..................................................................................................................... 9 4.1

5

Wireframes .............................................................................................................................. 9

4.1.1

Login ................................................................................................................................ 9

4.1.2

Overzicht........................................................................................................................ 11

4.1.3

Dienstverplaatsing eigen wagen ................................................................................... 12

4.1.4

Fietsvergoeding ............................................................................................................. 15

4.1.5

Terugvordering kosten .................................................................................................. 17

Technische handleiding ................................................................................................................. 18 5.1

Algemeen............................................................................................................................... 18

5.1.1

Backend ......................................................................................................................... 18

5.1.2

Frontend ........................................................................................................................ 20

5.2

Login ...................................................................................................................................... 20

5.3

Keuzescherm ......................................................................................................................... 20

5.4

Dienstverplaatsing eigen wagen ........................................................................................... 22

5.4.1 5.5

Woon-werkverkeer fietsvergoeding ..................................................................................... 23

5.5.1

Standaard fietsvergoeding ............................................................................................ 23

5.5.2

Route ............................................................................................................................. 23

5.5.3

Interne campus.............................................................................................................. 23

5.6 6

Nieuwe bestemming ..................................................................................................... 22

Terugvordering eigen kosten ................................................................................................ 23

Gebruikershandleiding .................................................................................................................. 25 6.1

Login ...................................................................................................................................... 25

6.2

Keuzescherm ......................................................................................................................... 26

6.3

Dienstverplaatsing eigen wagen ........................................................................................... 26

6.3.1

Overzicht........................................................................................................................ 27

6.3.2

Overzicht item ............................................................................................................... 27

6.3.3

Nieuw............................................................................................................................. 29

6.4

Fietsvergoeding ..................................................................................................................... 34

6.4.1

Overzicht........................................................................................................................ 35

6.4.2

Nieuw............................................................................................................................. 36 1

6.5

Terugvordering eigen kosten ................................................................................................ 40

6.5.1

Overzicht........................................................................................................................ 41

6.5.2

Nieuw............................................................................................................................. 42

6.6

Afmelden ............................................................................................................................... 43

7

Besluit ............................................................................................................................................ 44

8

Bronvermelding ............................................................................................................................... 1

2

Lijst van figuren Figuur 1 Integreat .................................................................................................................................... 5 Figuur 2 Aankoopflow ............................................................................................................................. 7 Figuur 3 Wireframe tablet login .............................................................................................................. 9 Figuur 4 Wireframe keuzescherm ......................................................................................................... 10 Figuur 5 Wireframe tablet overzicht dienstverplaatsing eigen wagen ................................................. 11 Figuur 6 Wireframe tablet nieuwe aanvraag dienstverplaatsing eigen wagen(1/2) ........................... 12 Figuur 7 Wireframe tablet nieuwe aanvraag dienstverplaatsing eigen wagen (2/2) ........................... 13 Figuur 8 Wireframe tablet nieuwe standaard bestemming dienstverplaatsing eigen wagen .............. 13 Figuur 9 Wireframe tablet nieuwe geavanceerde bestemming dienstverplaatsing eigen wagen ....... 14 Figuur 10 Wireframe tablet nieuwe aanvraag fietsvergoeding ............................................................ 15 Figuur 11 Wireframe tablet nieuwe route fietsvergoeding .................................................................. 16 Figuur 12 Wireframe tablet nieuwe interne campus fietsvergoeding .................................................. 16 Figuur 13 Wireframe tablet nieuwe aanvraag terugvordering eigen kosten........................................ 17 Figuur 14 Login pagina .......................................................................................................................... 25 Figuur 15 Keuze pagina ......................................................................................................................... 26 Figuur 16 Tile dienstverplaatsing eigen wagen ..................................................................................... 27 Figuur 17 Overzicht pagina dienstverplaatsing eigen wagen ................................................................ 27 Figuur 18 Detail pagina dienstverplaatsing eigen wagen...................................................................... 28 Figuur 19 Nieuw tile dienstverplaatsing eigen wagen .......................................................................... 29 Figuur 20 Nieuwe aanvraag algemene gegevens dienstverplaatsing eigen wagen .............................. 30 Figuur 21 Nieuwe ingevulde aanvraag algemene gegevens dienstverplaatsing eigen wagen ............. 31 Figuur 22 Nieuwe aanvraag bestemming toevoegen dienstverplaatsing eigen wagen ....................... 32 Figuur 23 Campussen dienstverplaatsing eigen wagen ........................................................................ 33 Figuur 24 Andere locatie dienstverplaatsing eigen wagen ................................................................... 33 Figuur 25 Geavanceerde bestemming dienstverplaatsing eigen wagen .............................................. 34 Figuur 26 Tile fietsvergoeding ............................................................................................................... 35 Figuur 27 Overzicht pagina fietsvergoeding .......................................................................................... 35 Figuur 28 Detail pagina fietsvergoeding................................................................................................ 36 Figuur 29 Nieuw tile fietsvergoeding .................................................................................................... 36 Figuur 30 Nieuwe aanvraag algemene gegevens fietsvergoeding ........................................................ 37 Figuur 31 Standaard fietsvergoeding .................................................................................................... 38 Figuur 32 fietsvergoeding pdf download .............................................................................................. 38 Figuur 33 Fietsvergoeding pdf ............................................................................................................... 39 Figuur 34 Nieuwe aanvraag geavanceerde fietsvergoeding ................................................................. 39 Figuur 35 Opslaan routes ...................................................................................................................... 40 Figuur 36 Tile terugvordering eigen kosten .......................................................................................... 40 Figuur 37 Overzicht pagina terugvordering eigen kosten ..................................................................... 41 Figuur 38 Detail pagina terugvordering eigen kosten ........................................................................... 41 Figuur 39 Nieuw tile terugvordering eigen kosten................................................................................ 42 Figuur 40 Nieuwe aanvraag terugvordering eigen kosten .................................................................... 42 Figuur 41 Details login gebruiker........................................................................................................... 43

3

Inleiding Deze handleiding is niet enkel bestemd voor technici die verder ontwikkelen voor de ProCure app, maar ook voor de eindgebruikers van de app. Dit werkstuk is voornamelijk een handleiding voor ProCure, een aankoopbeheersysteem. Daarbij wordt stap voor stap beschreven hoe ProCure efficiënt gebruikt kan worden door de eindgebruikers. Bovendien wordt ProCure technisch beknopt toegelicht. In hoofdstuk 1 wordt het stagebedrijf voorgesteld. Bovendien worden de identificatie gegevens van Integreat toegelicht. Hoofdstuk 2 bespreek de stageopdracht. In hoofdstuk 3 worden de wireframes van de eerste versie overlopen. In hoofdstuk 4 worden de technische basisconcepten van ProCure uitgewerkt. Dit licht een aantal onderdelen toe die een belangrijke rol spelen bij het ontwikkelen van de ProCure app. In hoofdstuk 5 wordt stap voor stap overlopen hoe de applicatie gebruikt moet worden door de eindgebruikers

4

2 STAGEBEDRIJF 2.1 IDENTIFICATIEGEGEVENS STAGEBEDRIJF InteGreat NV. Potegemstraat 17 bus 5 B-8790 Waregem M: info[at]integreat.be Tel: +32 (0)56 61 78 97 Fax: +32 (0)56 61 78 98 BE 0 884 768 177 RPR Kortrijk ING 363-0063587-92

2.2 VOORSTELLING

Figuur 1 Integreat

Integreat begeleidt organisaties in het implementeren en onderhouden van IT projecten op niveau van serverinfrastructuur, communicatiesoftware en integratie met telefonie. De stage opdracht omtrent de applicatie sluit aan bij het onderdeel communicatiesoftware.

Integreat heeft veel ervaring met aankoopsoftware voor hogescholen en overheidsinstellingen. Ze zijn vooruitstrevend, naast de software voor aankoop wordt er ook gewerkt aan een software voor de verkoopzijde. 5

3 STAGE OPDRACHT Procure is een softwarepakket dat aankopen beheert startend van de aanvraag tot de uiteindelijke betaling van de factuur. Het softwareprogramma “Procure” heeft een beperkt aantal gebruikers binnen de organisatie, maar “Procure.Web”, het webformulier om een bestelaanvraag te plaatsen, is toegankelijk voor alle werknemers van Howest. Op vandaag wordt de eerste versie van Procure.Web nog steeds gebruikt door een 500-tal Howest-medewerkers.

6

Hieronder is de aankoopflow van Howest waarneembaar. Er zijn vier diverse flows. Bij het tweede voorbeeld zal een werknemer van Howest een fietsvergoeding, onkostennota, … ingeven. Indien dit gecontroleerd en goedgekeurd is door het ankerpunt, zal de boekhouder er een factuur van maken. Als het bedrag meer dan 8500 euro bedraagt zal de financiële directeur dit eerst moeten goedkeuren voor de boekhouder er een factuur van mag maken.

Figuur 2 Aankoopflow

7

De gebruiksvriendelijkheid van de eerste versie van ProCure is ondermaats, daarom kwam er een nieuwe versie namelijk ProCure.Web. Deze versie moet eenvoudig en snel te gebruiken zijn vanaf elke locatie. Vandaar de vraag van veel eindgebruikers om ProCure.Web mobiel te maken (Android, IOS of Windows). De app procure.web, het webformulier om een bestelaanvraag te plaatsen is tot op de dag van vandaag alleen toegankelijk op het web. Het gebruik van smartphones en tablets hebben een stijging tegenover voorgaande jaren. De eindgebruikers nemen sneller de tablet of de smartphone om iets op te zoeken of iets in te geven. Van daar is het essentieel om ook een smartphone en tablet versie aan te bieden van “Procure.Web”. Zo kan de gebruiker tijdens een pauze snel even zijn vergoedingen ingeven en moet de pc daarvoor niet opgestart worden. De opdracht bestaat er in om verder te bouwen op de bestaande module van ProCure.Web. Dit is een webbased module gekoppeld aan het aankoopbeheer. In dit aankoopbeheer kan een gebruiker diverse vergoedingen aanvragen. De verschillende aanvragen voor de mobile applicatie zijn: 

Dienstverplaatsing eigen wagen



Woon-Werkverkeer fietsvergoeding



Terugvordering eigen kosten

Dit in tegenstelling tot de ProCure.Web based applicatie: 

Dienstverplaatsing eigen wagen



Woon-werkverkeer fietsvergoeding



Woon-werkverkeer openbaar vervoer



Terugvordering eigen kosten



Gastspreker



Andere aankopen

Nu geven de howest-medewerkers hun fietsvergoeding in via de webbrowser. Indien dit goedgekeurd wordt door een leiding gevende kan er overgegaan worden tot uitbetaling van deze vergoeding.

8

4 EERSTE ANALYSE LAY-OUT 4.1 WIREFRAMES De volgende schetsen zijn het resultaat van de eerste analyse van ProCure. Na het bestuderen van de bestaande ProCure.Web mocht er een eerste schets voorgelegd worden. Dit werd dan later goed gekeurd door de leiding gevende. Ook werden later aanpassingen uitgevoerd die waargenomen kunnen worden in de handleidingen. 4.1.1

Login

Wanneer de applicatie opgestart is, wordt er genavigeerd naar het login scherm.

Figuur 3 Wireframe tablet login

9

Als het inloggen foutloos verloopt zal de applicatie navigeren naar het keuzescherm met drie verschillende onderdelen, namelijk: “Dienstverplaatsing eigen wagen”, “Fietsvergoeding” en “Terugvordering eigen kosten”.

Figuur 4 Wireframe keuzescherm

10

4.1.2

Overzicht

Wanneer de tile “Dienstverplaatsing eigen wagen”, “Fietsvergoeding” of “Terugvordering eigen kosten” aangeklikt wordt, wordt er een overzicht weer gegeven van dat type aanvraag. Daar kan er nagegaan worden of de aanvraag al dan niet verwerkt is. Hieronder kan de tile “Dienstverplaatsing eigen wagen” waargenomen worden. De tiles “Fietsvergoeding” en “Terugvordering eigen kosten” zijn gelijkaardig aan de onderstaande tile.

Figuur 5 Wireframe tablet overzicht dienstverplaatsing eigen wagen

11

4.1.3

Dienstverplaatsing eigen wagen

Wanneer op de tile “Dienstverplaatsing eigen wagen” geklikt wordt, dan zal de app een overzicht tonen van de “Dienstverplaatsing eigen wagen”. Links naast het overzicht staan er drie knoppen. Wanneer er op de eerste knop geklikt wordt, navigeert de app naar een scherm om een nieuwe aanvraag “Dienstverplaatsing eigen wagen” toe te voegen. Die hieronder waargenomen kan worden.

Figuur 6 Wireframe tablet nieuwe aanvraag dienstverplaatsing eigen wagen(1/2)

12

Wanneer men op de knop “Bestemming toevoegen” klikt, wordt er genavigeerd naar het onderstaande scherm.

Figuur 7 Wireframe tablet nieuwe aanvraag dienstverplaatsing eigen wagen (2/2)

Wanneer er vervolgens op “Nieuw” geklikt wordt onder bestemming, kan er een nieuwe bestemming toegevoegd worden. Hier kan gekozen worden tussen een standaard of een geavanceerde aanvraag.

Figuur 8 Wireframe tablet nieuwe standaard bestemming dienstverplaatsing eigen wagen

13

Figuur 9 Wireframe tablet nieuwe geavanceerde bestemming dienstverplaatsing eigen wagen

Wanneer er geklikt wordt op de tweede knop, navigeert de app naar het overzicht van de aanvragen “Dienstverplaatsing eigen wagen”. Tot slot kan er terug genavigeerd worden naar het keuzescherm door te klikken op de derde knop.

14

4.1.4

Fietsvergoeding

Wanneer er op de tile “Fietsvergoeding” geklikt wordt, zal er automatisch genavigeerd worden naar de overzicht pagina van “Fietsvergoeding”. Ook hier zijn er drie knoppen zoals bij “Dienstverplaatsing eigen wagen” met bijna dezelfde functie. Wanneer er geklikt wordt op de eerste knop “Nieuw”, zal er een mogelijkheid zijn om een nieuwe aanvraag “Fietsvergoeding” toe te voegen.

Figuur 10 Wireframe tablet nieuwe aanvraag fietsvergoeding

15

Hier kan er gekozen worden tussen een standaard, geavanceerde route of geavanceerde interne campus fietsvergoeding.

Figuur 11 Wireframe tablet nieuwe route fietsvergoeding

Figuur 12 Wireframe tablet nieuwe interne campus fietsvergoeding

16

4.1.5

Terugvordering kosten

Wanneer er op de tile “Terugvordering kosten” geklikt wordt, zal de app automatisch navigeren naar de overzicht pagina van “Terugvordering kosten”. Dit scherm heeft ook drie knoppen die dezelfde functie uitoefenen als bij de voorgaande tiles. Bij de nieuwe aanvraag is er maar één keuze.

Figuur 13 Wireframe tablet nieuwe aanvraag terugvordering eigen kosten

17

5 TECHNISCHE HANDLEIDING 5.1 ALGEMEEN 5.1.1

Backend

5.1.1.1 Models Er wordt gebruik gemaakt van een Portable Class Library, dit kan hergebruikt worden in verschillende soorten projecten. Bij het aanmaken kan er gekozen worden op welke platformen de library zal gebruikt worden. Dit kan later gewijzigd worden in de properties van het project. Vervolgens worden de classes toegevoegd. Omdat de database reeds bestaat is het belangrijk om rekening te houden met de namen van de classes. Wanneer er gegevens van de tabel “ProCure_User” nodig zijn, moet er in het project een classe aangemaakt worden met de naam “ProCure_User”. Daarnaast moet er ook aangegeven worden welke property de id is. 5.1.1.2 Web API Er wordt gebruik gemaakt van een web service, ASP.NET MVC 4 Web Application. Dit laat toe eenvoudig een JSON web service te gaan opzetten. In de file web.config wordt de connectie met de database gemaakt. De connectie met de database zal gebeuren via DbContext. Voor elke database wordt er een web API gemaakt met een bijhorende context. Deze context erft over van DbContext. Deze classe zorgt voor de verbinding met de database. Om de juiste database te gebruiken moet er nog een connectiestring toegevoegd worden aan de web.config file. Hierbij is de naam van da connectionstring essentieel. Deze moet dezelfde naam hebben als de context classe (bv. MainContext). In de Context classes wordt er aangeven welke tabellen er aangemaakt worden. Vervolgens moet de database access laag geschreven worden. Er wordt gebruik gemaakt van de volgende ontwerp patronen: 

Repository Pattern



Unit Of Work Pattern

Het repository patroon is een patroon waar er voor ieder model een eigen klasse aangemaakt wordt. Die klasse wordt gebruikt om de data te wijzigen, toe te voegen of verwijderen.

18

Het unit of work patroon is een patroon waar een aantal gegroepeerde operaties uitgevoerd worden op de database. De laatste stap aan de server kant is het opzetten van de web service. Er kan op een eenvoudige manier methodes aangemaakt worden die aanspreekbaar zijn via het web. De data zal via het JSON formaat verzonden worden.

19

5.1.2 Frontend Er wordt gebruik gemaakt van het MVVM (model-view-viewmodel) patroon, dit laat de gebruiker toe om een gestructureerde applicatie te bouwen dat ook zeer eenvoudig onderhoudsvriendelijk is. 5.1.2.1 Model Dit zijn de Classes. 5.1.2.2 View De XAML code is de store app of phone app is de view. 5.1.2.3 Viewmodel Een viewmodel is een classe die erft van ViewModelBase. Dit wordt gekoppeld aan een view met behulp van XAML databinding. Vanuit ViewModel worden verschillende services aangeroepen die data ophalen of wegschrijven. In de service zijn er functies die HttpRequests uitvoeren naar de JSON service. 5.1.2.4 Windows store applicatie In de App.xaml file is er een instantie gemaakt van de ViewModelLocator. Zo kan er een view gekoppeld worden aan een viewmodel. De layout wordt helemaal in XAML uitgewerkt. De tiles zullen zich altijd in het midden van de view bevinden.

5.2 LOGIN Wanneer er een gebruikersnaam ingegeven wordt, zullen de databases opgehaald worden die voor die gebruiker beschikbaar zijn. De app is gekoppeld aan een webservice die gebruik maakt van Active Directory. Als de database geselecteerd is, het wachtwoord en de gebruikersnaam ingevuld zijn, wordt het wachtwoord en gebruikersnaam gecontroleerd. Als dit correct is, wordt gecontroleerd of de database bestaat. Als dit bestaat zal men controleren of de gebruiker toegang heeft tot de database. Indien al deze controles positief zijn, wordt de gebruiker opgeslagen in de filestorage. Verder wordt gecontroleerd of de gebruiker actief is en of het een administrator is.

5.3 KEUZESCHERM Als er genavigeerd wordt naar het keuzescherm, zullen de velden die betrekking hebben tot de aanvragen in de filestorage leeggemaakt worden. Dit voorkomt het vollopen van de filestorage.

20

De knop afmelden die op elke pagina kan teruggevonden worden, navigeert naar de loginpagina. Deze knop verwijdert ook alles in de storagefile.

21

5.4 DIENSTVERPLAATSING EIGEN WAGEN Bij een nieuwe aanvraag worden er nieuwe objecten aangemaakt, namelijk: “ProCure_DocumentHeader”, “ProCure_DocumentDetail”, “ProCure_Invoice” en één of meerdere objecten van “ProCure_DocumentDetail_Expense”. Bij een nieuwe aanvraag zijn er twee views: 

Algemene view



Bestemming toevoegen

5.4.1

Nieuwe bestemming

5.4.1.1 Standaard verplaatsing Eerst worden de ingegeven adresgegevens gecontroleerd. Als alles foutloos is ingevuld, wordt voor elke datum die geselecteerd is een object ProCure_DocumentDetail_Expense aangemaakt. Hier worden de dag, adresgegevens en afstand van de verplaatsing in bewaard. Het annuleren brengt de gebruiker naar de vorige pagina. Dit gebeurt ook bij het verzenden. In dit overzicht is ook de toegevoegde ProCure_DocumentDetail te zien. 5.4.1.2 Geavanceerde verplaatsing Na klikken op de knop toevoegen zal eerst gecontroleerd worden of het ingegeven adres volledig is en of het adres geldig is. Daarna zal er bij een geldig adres een of meerdere nieuwe objecten ProCure_DocumentDetail_Expense aangemaakt worden met de ingevulde gegevens. Als de checkbox “Heen en terug” is aangevinkt zullen er extra objecten ProCure_DocumentDetail_Expense aangemaakt worden. Hier worden de start bestemming van het vorige ProCure_DocumentDetail_Expense object, de eindbestemming van het huidige ProCure_DocumentDetail_Expense object. Als alles correct is, zullen de aangemaakte gegevens worden weggeschreven naar de database.

22

5.5 WOON-WERKVERKEER FIETSVERGOEDING Bij een nieuwe aanvraag worden er nieuwe objecten aangemaakt, namelijk: “ProCure_DocumentHeader”, “ProCure_DocumentDetail”, “ProCure_DocumentDetail_Expense” en “ProCure_Invoice”. Bij een nieuwe aanvraag voor woon-werkverkeer zijn er drie opties: 

Standaardfietsvergoeding



Geavanceerde fietsvergoeding route



Geavanceerde fietsvergoeding interne campus

5.5.1 Standaard fietsvergoeding Bij een standaardfietsvergoeding zal er een object “ProCure_DocumentDetail_Expense” aangemaakt worden. Hier worden de start en eindbestemming in opgeslagen met de afstand. De afstand wordt automatisch berekend met behulp van bing maps API. De startbestemming is altijd het thuisadres en de eindbestemming is de geselecteerde campus. Wanneer de checkbox “Geavanceerde fietsvergoeding” aangeduid is, zijn er twee opties: route of interne campus. 5.5.2 Route Voor deze optie wordt voor elke tussenstop een nieuw object “ProCure_DocumentDetail_Expense” aangemaakt. 5.5.3 Interne campus Voor deze optie wordt net als bovenstaande optie een nieuw object “ProCure_DocumentDetail_Expense” aangemaakt. Met als begin locatie het adres van de eerste geselecteerde campus en als eind locatie het adres van de tweede geselecteerde campus. Verder moet er nog een datum geselecteerd zijn. Als dit voor één datum is zal de app niets extra moeten aanmaken. Als dit voor bijvoorbeeld twee datums zijn, zal het twee “DocumentDetail_ExpenseDetail” moeten aanmaken. Het eerste “DocumentDetail_ExpenseDetail” object en het tweede “DocumentDetail_ExpenseDetail” object zullen bijna het zelfde zijn, behalve dat ze verschillen van datum.

5.6 TERUGVORDERING EIGEN KOSTEN Bij een nieuwe aanvraag worden er nieuwe objecten aangemaakt, namelijk: “ProCure_DocumentHeader”, “ProCure_DocumentDetail” en “ProCure_Invoice”.

23

Wanneer er op “Annuleren” gedrukt wordt zal de app terug navigeren naar de overzicht pagina. Bij het verzenden worden de bovenstaande objecten verzonden naar de database. En krijgt de gebruiker de nodige feedback.

24

6 GEBRUIKERSHANDLEIDING 6.1 LOGIN Voordat er ingelogd wordt, is het belangerijk te weten dat er alleen ingelogd kan worden wanneer de persoon in kwestie: 

als personeelslid bij een organisatie geregistreerd staat



toegang heeft tot een bepaalde database

Inloggen kan in drie stappen: 

Voer de gebruikersnaam in (vervolgens verschijnen de databases waar de persoon in kwestie toegang tot heeft)



Voer het wachtwoord in



Selecteer een databank en klik op “Aanmelden”

Figuur 14 Login pagina

25

6.2 KEUZESCHERM Nadat er ingelogd is op ProCure app verschijnt het startscherm. Hier kan de aanvraag gekozen worden. De keuze is beperkt tot “Terugvorderingen”. Dit in tegenstelling tot de web applicatie, daar zijn er twee categorieën: “Aanvragen” en “Terugvorderingen”.

Figuur 15 Keuze pagina

Bij de categorie “Terugvorderingen” zijn er de volgende opties: 

Dienstverplaatsing eigen wagen



Woon-werkverkeer fietsvergoeding



Terugvorderingen eigen kosten

Daarnaast is er ook een tile met de instellingen van de gebruiker.

6.3 DIENSTVERPLAATSING EIGEN WAGEN Wanneer er geklikt wordt op de knop “Dienstverplaatsing eigen wagen” zal er genavigeerd worden naar overzicht scherm “Dienstverplaatsing eigen wagen”.

26

Figuur 16 Tile dienstverplaatsing eigen wagen

6.3.1

Overzicht

Bij het klikken op “Dienstverplaatsing eigen wagen” gaat de app verder naar dat specifiek onderdeel.

Figuur 17 Overzicht pagina dienstverplaatsing eigen wagen

Standaard wordt er een overzicht weergegeven van de laatste 10 aanvragen. Hier kunnen alle aanvragen waargenomen worden van de gekozen categorie (hier dienstverplaatsing van eigen wagen) met hun huidige status. Als er geklikt wordt op 6.3.2

rechts naast het document nummer, zal de aanvraag openen.

Overzicht item

Bij het openklikken van een aanvraag, wordt er een overzicht van de dataillijnen weergegeven. Bij dit type zijn dit de “dienstverplaatsing” en de “parkeerkosten”.

27

Figuur 18 Detail pagina dienstverplaatsing eigen wagen

Wanneer er bijvoorbeeld op de “dienstverplaatsing” geklikt wordt, wordt er rechts een overzicht van alle aanvragen voor de dienstverplaatsing weergegeven. Er kan gebruik gemaakt worden van een knop op het toestel of rechts onder op de ‘Annuleer’ knop om te navigeren naar de vorige view.

28

6.3.3

Nieuw

Figuur 19 Nieuw tile dienstverplaatsing eigen wagen

Wanneer er geklikt wordt op de knop “Nieuw” onder de tile “Dienstverplaatsing eigen wagen”, zal er een nieuwe aanvraag kunnen aangemaakt worden voor “Dienstverplaatsing eigen wagen”. 6.3.3.1

Algemene gegevens

Hieronder kan er een nieuwe aanvraag aangevraagd worden voor “Dienstverplaatsing eigen wagen”.

29

Figuur 20 Nieuwe aanvraag algemene gegevens dienstverplaatsing eigen wagen

Eerst zal er een scherm met algemene informatie kunnen ingevuld worden. De algemene gegevens omvatten: 

Gegevens van de aanvrager



De organisatie eenheid waar de aanvraag naar verzonden wordt



Het ankerpunt (leidinggevende) dat de aanvraag zal behandelen



Een foto, indien er parkeerkosten toegevoegd worden

Hieronder kan er een scherm waargenomen worden van een ingevulde aanvraag.

30

Figuur 21 Nieuwe ingevulde aanvraag algemene gegevens dienstverplaatsing eigen wagen

Wanneer de “Details aanvrager” aangevinkt wordt, zal er extra informatie van de gebruiker die ingelogd is verschijnen. Vervolgens kan de aanvraag enerzijds geannuleerd worden door op de knop “Annuleren” te drukken. Anderzijds kan worden verder gegaan door op de knop “Bestemming toevoegen” te klikken. 6.3.3.2

Nieuwe bestemmingen

Gewone bestemming Het scherm dat hieronder waargenomen kan worden is van toepassing op een gewone verplaatsing. Dit betekent concreet van adres A naar adres B en terug, als de optie “Heen en Terug” aangevinkt is.

31

Figuur 22 Nieuwe aanvraag bestemming toevoegen dienstverplaatsing eigen wagen

Zowel de start als eindbestemming hebben drie mogelijkheden: 

Thuisadres



Campus



Andere locatie

Thuisadres Wanneer het thuisadres aangevinkt wordt, zullen de adresgegevens van de ingelogde persoon in de database automatisch opgevraagd worden. Als de optie “Toon thuisadres” aangevinkt wordt, kan nagekeken worden of de gegevens al dan niet correct zijn.

Campus Hier zullen de campussen of verschillende afdelingen opgehaald worden. 32

Figuur 23 Campussen dienstverplaatsing eigen wagen

Andere locatie Deze optie biedt de gebruiker een mogelijkheid om een willekeurige plaats van vertrek of aankomst in te geven.

Figuur 24 Andere locatie dienstverplaatsing eigen wagen

Vervolgens moeten de dagen geselecteerd worden voor de verplaatsing. Dit is beperkt tot de huidige dag. Tot slot kunnen de parkeerkosten toegevoegd worden, door de optie “Parkeerkosten” aan te vinken. Dan zal de gebruiker de mogelijkheid krijgen om het bedrag en de valuta in te geven. Als alles foutloos is ingevuld kan dit bevestigd worden door op de knop “Opslaan” te drukken. Wanneer de optie “Geavanceerde dienstverplaatsing” aangevinkt wordt, zal er een andere view waarneembaar zijn. Dit wordt in het volgende puntje “Geavanceerde bestemming” verder besproken.

33

Geavanceerde bestemming

Figuur 25 Geavanceerde bestemming dienstverplaatsing eigen wagen

Om een nieuwe tussenstop toe te voegen, klikt de gebruiker op de optie “Toevoegen”. Vervolgens zal de gebruiker de start en eindbestemming moeten invullen. Hieronder valt: 

Adres



Gemeente



Land

Als de gebruiker op “Opslaan” wordt dit toegevoegd aan een lijst en kunnen er eventueel nog meerdere locaties toegevoegd worden. Wanneer de gebruiker een tweede locatie toevoegt zal het vertrekpunt automatisch de eindbestemming zijn van de vorige locatie. Gegevens kunnen ook verwijderd worden. Vervolgens moet er nog een “Reden voor de verplaatsing” ingegeven worden en dagen geselecteerd worden. Tot slot kunnen hier ook parkeerkosten ingegeven worden.

6.4 FIETSVERGOEDING Wanneer er geklikt wordt op de knop “Woon-werkverkeer fietsvergoeding”, navigeert de app naar het overzicht scherm “Woon-werkverkeer fietsvergoeding”.

34

Figuur 26 Tile fietsvergoeding

6.4.1

Overzicht

Figuur 27 Overzicht pagina fietsvergoeding

Standaard wordt er een overzicht weergegeven van de laatste 10 aanvragen. Hier kunnen alle aanvragen waargenomen worden van de gekozen categorie (hier Woon-werkverkeer fietsvergoeding van eigen wagen) met hun huidige status.

Als er geklikt wordt op

rechts naast het document nummer, zal de aanvraag openen.

35

Figuur 28 Detail pagina fietsvergoeding

6.4.2

Nieuw

Figuur 29 Nieuw tile fietsvergoeding

De bovenstaande knop start een nieuwe aanvraag “Fietsvergoeding”.

36

6.4.2.1

Algemene gegevens

Figuur 30 Nieuwe aanvraag algemene gegevens fietsvergoeding

Deze wizard bestaat uit 1 scherm waar de gebruiker meerdere soorten fietsvergoedingen op kan aanvragen. Deze soorten zijn: 

Standaard fietsvergoeding (bv. van het thuisadres naar campus RDR)



Fietsvergoeding geavanceerde route (bv: van adres a naar adres b en terug)



Interne campus verplaatsing (bv van campus RDR naar campus GKG)

Ook hier kunnen de gegevens nagegaan worden van de ingelogde persoon, door de optie “Detail aanvrager” aan te vinken. Vervolgens moeten de volgende onderdelen geselecteerd worden: 

Organisatie eenheid



Ankerpunt



Maand



Dagen selecteren

Verder is er ook een bijlagen overzicht. Hier kan er geen bijlage toegevoegd worden, maar bij het verzenden van de aanvraag wordt een bijlage aangemaakt die achteraf bekeken kan worden. Standaard fietsvergoeding 37

Wanneer de gebruiker de standaardfietsvergoeding doorloopt zal er een bestemming (campus) geselecteerd moeten worden.

Figuur 31 Standaard fietsvergoeding

Na dit weg geschreven is naar de database zal de applicatie een pdf downloaden.

Figuur 32 fietsvergoeding pdf download

In de onderstaande afbeelding kan de gedownloade pdf waargenomen worden.

38

Figuur 33 Fietsvergoeding pdf

Wanneer de gebruiker “Geavanceerde fietsvergoeding” aanduidt, zijn er twee opties “Route” of “Interne campus verplaatsing”. Fietsvergoeding geavanceerde route Hier krijgt de gebruiker de mogelijkheid om routes toe te voegen.

Figuur 34 Nieuwe aanvraag geavanceerde fietsvergoeding

39

Wanneer er op “Opslaan” gedrukt wordt, worden de gegevens opgeslagen en het venster gesloten.

Figuur 35 Opslaan routes

Als er geklikt wordt op het vuilbakje rechts naast een tussenstop, kan de tussenstop verwijderd worden. Interne campus verplaatsing Bij de ingaven van een interne campus verplaatsing moet de gebruiker de campus van vertrek en de campus van aankomst selecteren.

6.5 TERUGVORDERING EIGEN KOSTEN Wanneer de gebruiker klikt op de knop “Terugvordering eigen kosten” komt de gebruiker op het overzicht scherm “Terugvordering eigen kosten”.

Figuur 36 Tile terugvordering eigen kosten

40

6.5.1

Overzicht

Hier kan de gebruiker het overzicht scherm “Terugvordering eigen kosten” bekijken.

Figuur 37 Overzicht pagina terugvordering eigen kosten

Bij elke aanvraag kan er een overzicht van de kosten waargenomen worden.

Als er geklikt wordt op

rechts naast het document nummer, zal de aanvraag openen.

Figuur 38 Detail pagina terugvordering eigen kosten

41

6.5.2

Nieuw

Wanneer er op de knop “Nieuw” geklikt wordt. Zal de gebruiker navigeren naar de view voor een nieuwe aanvraag “Terugvordering eigen kosten”.

Figuur 39 Nieuw tile terugvordering eigen kosten

6.5.2.1

Algemene gegevens

Hieronder kan de gebruiker waarnemen welke gegevens er nodig zijn om een nieuwe aanvraag in te dienen voor “Terugvordering eigen kosten”.

Figuur 40 Nieuwe aanvraag terugvordering eigen kosten

Ook hier worden de gegevens van de ingelogde persoon automatisch opgehaald uit de databank. Dit kan nagekeken worden door de optie “Detail aanvrager” aan te vinken.

42

Figuur 41 Details login gebruiker

Vervolgens zal het volgende ingegeven moeten worden: 

De omschrijving en het totaal



Het bedrag van de kosten

Verder zal nog het volgende geselecteerd moeten worden: 

BTW percentage



Organisatie eenheid



Ankerpunt



Maand

Tot slot moet de gebruiker een bewijs van de betaling toevoegen, door een lokaal bestand te selecteren.

6.6 AFMELDEN Wanneer de gebruiker de applicatie wilt verlaten kan er geklikt worden op de knop “Afmelden” dat altijd rechtsboven kan terug gevonden worden.

43

7 BESLUIT De doelstelling van de stage was verder bouwen op de bestaande module van ProCure.Web. Dit is een webbased module gekoppeld aan het aankoopbeheer. In dit aankoopbeheer kan een gebruiker diverse vergoedingen aanvragen. De verschillende aanvragen voor de mobile applicatie zijn: 

Dienstverplaatsing eigen wagen



Woon-Werkverkeer fietsvergoeding



Terugvordering eigen kosten

Hiervan is er een gebruikers en technische handleiding beschreven. De grootste uitdaging bij dit project was de vereisten afwegen tegen de mogelijkheden. De stage bij Integreat was een interessante ervaring. Er werd geleerd hoe theoretische kennis in de praktijk toepassen wordt. Daarnaast is goed communiceren noodzakelijk op de werkvloer wat soms ontbrak. Bij Integreat heerste een goede werksfeer, wat de kern is van een goede motivatie. Zelfredzamer, zelfdiscipline en assertiviteit zijn noodzakelijk.

44

8 BRONVERMELDING “front-end-en-back-end” [Online].Available: http://www.uptime.nl/2013/02/front-end-en-backend/#.U1EEKfl_uog “Integreat” [Online].Available: http://www.integreat.be/ “XML” [Online].Available: http://nl.wikipedia.org/wiki/XML “Cross-Platform Development with the Portable Class Library” [Online].Available: http://msdn.microsoft.com/en-us/library/gg597391(v=vs.110).aspx “Platform” [Online].Available: http://nl.wikipedia.org/wiki/Platform_(informatica) “JSON” [Online].Available: http://nl.wikipedia.org/wiki/JSON “Wireframe” [Online].Available: http://www.veltenmedia.nl/van-wireframe-tot-website/ “Webservice” [Online].Available: http://nl.wikipedia.org/wiki/Webservice “application programming interface (API)” [Online].Available: http://nl.wikipedia.org/wiki/Application_programming_interface D. De Preester, “MVVM”, 2014, pp. 1-

1