Eindwerk. Lifewatch cockpit. Vlaams Instituut voor de Zee

Transcriptie

1 Eindwerk Studiegebied Handelswetenschappen en Bedrijfskunde Bachelor Toegepaste Informatica Afstudeerrichting - Academiejaar Student Debergh Jens Thema Voorspelling verspreiding mariene diersoorten Stageplaats Vlaams Instituut voor de Zee Wandelaarkaai 7, Oostende 8400

2

3 Woord vooraf Een bachelorproef maken is een laatste stap naar het behalen van een diploma en tegelijk een eerste stap in het bedrijfsleven. Het is een unieke kans om na drie jaar studeren de verworven theoretische en praktische kennis in de praktijk te kunnen omzetten. In de eerste plaats wil ik mijn stagementor Bart Vanhoorne bedanken. U heeft mijn eerste stappen in de bedrijfswereld laten zetten. Bedankt voor uw inzet, uw enthousiasme en voornamelijk uw geduld. Het was een ontzettend leerrijke ervaring. Ook wil ik mijn stagebegeleider Sourie Olivier bedanken voor de hulp bij het realiseren van dit eindwerk en de ondersteuning tijdens de stage. Verder wil ik nog de mensen van de IT-dienst bedanken voor hun advies en het ter beschikking stellen van de nodige apparatuur om te kunnen werken. Door hun kritische discussies en vernieuwende ideeën kon ik steeds verder werken. Tenslotte wil ik nog mijn ouders bedanken. Zij hebben mij de laatste drie jaar gesteund, zowel financieel als moreel. Ik wil hen dan ook oprecht bedanken voor de kansen die ik heb gekregen.

4 Samenvatting Het Vlaams Instituut voor de Zee (VLIZ) is sinds zijn ontstaan in 1999 uitgegroeid tot het coördinatie- en informatieplatform voor zeewetenschappelijk onderzoek in Vlaanderen. Het VLIZ is een knooppunt voor marien en kustgebonden onderzoek, waarbij het als partner in diverse projecten en netwerken de internationale uitstraling van het Vlaams zeewetenschappelijk onderzoek en het internationaal marien onderwijs bevordert en ondersteunt. Uit dit initiatief is de portaalsite lifewatch.be ontwikkeld. Lifewatch is een portaalsite voor marien wetenschappelijk onderzoek. Vanuit deze website hebben onderzoekers toegang tot een grote hoeveelheid data over marien en kustgebonden onderzoeken. Onderzoekers krijgen er bovendien een overzicht van applicaties die hen kunnen assisteren in het onderzoek die zij verrichten. De website dient uitgebreid te worden met een extra applicatie waarbij men seizoenale variaties van diersoorten kan vaststellen. Deze applicatie moet aan de hand van verschillende criteria allerhande diersoorten met hun seizoenale variatie in kaart brengen en overzichtelijk weergeven. Hierdoor kunnen maritieme onderzoekers voorspellingen maken wanneer, waarom en hoe maritieme diersoorten zich verspreiden in het verleden als in de toekomst. VLIZ, portaalsite, marien onderzoek, webapplicaties

5 Abstract The Flanders Marine Institute ( VLIZ ) has become the biggest coordination and information platform for marine research in Flanders. Since its creation in 1999 VLIZ is a hub for marine and coastal research. VLIZ works as a partner in various projects and networks promoting the international image of Flemish marine scientific research and international marine education. From this initiative VLIZ created the portal website lifewatch.be. Lifewatch is a portal for marine research. From this website researchers have access to a large amount of information on marine and coastal research. On the website researchers can obtain a list of applications that could assist them in the research they are performing. The website should have an additional application that could determine seasonal variations of species. Based on different criteria mapping all sorts of species and their seasonal variation should be displayed clearly. This way marine scientists can make predictions when, why and how marine species will spread in the past and in the future. VLIZ, hub, marine research, webapplications

6 Verklarende woordenlijst OBIS EurOBIS APHIA WoRMS BCP Ocean Biogeographic Information System OBIS is een database waar gebruikers biodiversiteit hotspots en groot schalige ecologische patronen kunnen identificeren. Ook kunnen ze aan de hand van de webapplicaties analyses uitvoeren over de dispersie van diersoorten in tijd en ruimte. Bovendien kunnen ze deze overzichtelijke weergeven in grafieken en exporteren om hun vaststellingen te delen. De Europese tak van OBIS verzamelt data over mariene diersoorten binnen de Europese wateren en publiceert deze ook online. Aphia Risso een vissoort. Deze naam wordt gebruikt voor een van de belangrijkste databanken in alle webapplicaties van VLIZ. Aphia is een erkende database die alle gekende vissoorten in de wereld bevat. Alle data in deze databank is zeer strict gecontroleerd door gerenommeerde onderzoekers. World Register Of Marine Species. Een website die zorgt voor een uitgebreide en correcte lijst van geldige namen voor mariene organismes. Ook deze website gebruikt opnieuw de aphia database. Belgian Continental Plat. De grens van de Belgische kust. De afbakening van de Belgische kust tegenover andere landen. Vernaculars De naam van een diersoort in de volksmond. Voorbeeld : Alk => Alca Torda FLOT Lifewatch Deens voor mooi, er goed uitzien. Lifewatch is een regionaal portaal ontwikkeld door VLIZ die een waaier aan webapplicaties ter beschikking stelt voor het onderzoeken van diersoorten.

7 Inhoudsopgave 1 Voorstelling van het bedrijf Stage-opdracht Onderzoeksvraag Analyse Inleiding SWOT Vereisten MoSCoW Use Cases Gebruiker Het ontwerp van de web applicatie Onderzoek Overzicht van software Onderzoek:interne werking software PHP VLIZ modules Midas graph.php Ontwikkeling Installatie van apache Configureren van apache & php Configureren van PHP & mssql Configureren van de database instellingen Installatie client Client libraries Bootstrap jquery & jquery UI FLOT Mustache Installatie server Classes Lang Libraries Options View Index.php Programmatie Server Client Bootstrap jquery & jquery UI FLOT Mustache Bespreking van het project Handleiding voor de gebruiker Zoeken via de homepagina... 41

8 6.1.2 Zoeken via de url Resultaten Kritische reflectie Conclusies Bronnen- & literatuurlijst Overzicht van de bijlagen Bijlage 1: Overzicht FLOT plugins Bijlage 2: IT Stage document Bijlage 3: Sketches & Brainstorm... 58

9 Voorstelling van het bedrijf 1 Voorstelling van het bedrijf Figure Figuur 1 Het Vlaams Instituut voor Zee is een knooppunt voor marien en kustgebonden onderzoek. Als partner in diverse projecten en netwerken ondersteunt en bevordert het VLIZ de internationale uitstraling van het Vlaams zeewetenschappelijk onderzoek en het internationaal marien onderwijs. Het VLIZ ondersteunt vanuit zijn rol als coördinatie- en informatieplatform een duizendtal zeewetenschappers in Vlaanderen. Hierdoor hebben ze een groot netwerk van mariene wetenschappers tot hun beschikking. Naast de permanente aanwezigheid in het onderwijs biedt VLIZ ook een webplatform aan voor maritiem onderzoekers. Deze webapplicaties zijn special ontwikkeld zodat onderzoekers hun onderzoek kunnen staven aan de hand van de verkregen informatie van de applicaties. Ook is VLIZ verantwoordelijk voor het hosten van enkele kritieke applicaties die gebruikt worden door de overheid. Een voorbeeld hiervan is het tsunami alarm in België. VLIZ heeft vijf voor strategische doelstellingen die ze wil bereiken: Het bevorderen van het Vlaams zeewetenschappelijk onderzoek en het hieraan gerelateerde marien en kustgebonden onderwijs. Het bevorderen van de internationale uitstraling van het Vlaams zeewetenschappelijk onderzoek en het bevorderen van het internationaal marien onderwijs. Het fungeren als katalysator en als aanspreekpunt ook internationaal op het gebied van de zeewetenschappen. Het bevorderen van de visibiliteit van het Vlaams zeewetenschappelijk onderzoek bij het grote publiek (popularisering en sensibilisering). Het aanreiken van wetenschappelijke informatie over de zee, de kust en de getijgebonden systemen aan beleidsverantwoordelijken, op een wijze die bruikbaar is voor beleidsvorming en -ondersteuning op het vlak van mariene aangelegenheden.

10 Stage-opdracht 2 Stage-opdracht De opdracht bestaat er in om de huidige webapplicaties uit te bouwen met extra functionaliteit. Er dient onderzocht te worden of er in real-time voorspellingen kunnen worden gedaan van mariene biodiversiteit. In de toekomst wil men een soort cockpit maken die in real-time een aantal voorspellingen doet over diersoorten en hun biodiversiteit. In een eerste fase wordt er gekeken om de verspreiding van soorten te voorspellen, gebaseerd op historische data uit de EurOBIS databank. Uiteindelijk moeten de applicaties schalen naar de OBIS databank. OBIS bevat informatie over diersoorten in de hele wereld. De specifieke stage-opdracht omvat het ontwikkelen van een webapplicatie die de miljoenen gegevens uit de EurOBIS databank filtert voor het BCP en hiervan overzichtelijke grafieken genereert. Zodat biomaritieme wetenschappers reeds voorspellingen kunnen maken over diersoorten binnen het BCP. Figuur 2

11 Onderzoeksvraag 3 Onderzoeksvraag Het Vlaams Instituut voor de Zee wil een platform uitwerken voor het ondersteunen van maritiem onderzoek in België. Het huidige platform dient uitgebreid te worden met een webapplicatie waarbij men seizoenale variatie van diersoorten kan vaststellen. Deze applicatie dient wegwijs te maken in de grote hoeveelheden data die het VLIZ over de jaren heeft verzameld. Het doel van het gemaakte platform is om in de toekomst in real-time voorspellingen te maken gebaseerd op de verzamelde data. Zo kunnen onderzoekers voorspellingen doen over wat, hoe en wanneer diersoorten zich migreren in specifieke seizoenen. Een eerste vraag die hieruit kan afgeleid worden is: Wat is de beste manier om een webapplicatie te bouwen die deze grote hoeveelheden data in real-time traceert, analyseert en weergeeft. Naast informatie generatie wil men deze info kunnen delen via een open standaard die beschikbaar is online. Een voorbeeld hiervan is Geoserver die instaat voor het delen van geospatiale data via open standaarden. Integratie van applicatie data met geoserver zou een oplossing kunnen bieden voor het delen van complexe geospatiale data. De tweede onderzoeksvraag die hieruit kan afgeleid worden is: Hoe integreer je een API met geoserver om als uiteindelijk doel deze data te distribueren via open standaarden.

12 Analyse 4 Analyse 4.1 Inleiding SWOT Strengths Het maken van deze webapplicatie is een nieuwe aanwinst aan het al uitgebreide gamma van analyse tools bij VLIZ. De tool is gratis en zal benaderd worden vanuit de portaalsite. Lifewatch is reeds bekend bij onderzoekers dus de applicatie zal snel in gebruik genomen worden, waardoor eventuele nieuwe ideeën aanbod kunnen komen. Weaknesses Echte zwakheden bevat deze nieuwe applicatie niet. Er is geen concurrentie vanuit andere landen omdat VLIZ een overkoepelende organisatie is in samenwerking met de Europese Unie. Opportunities Door de variatiekaarten hebben onderzoekers de mogelijkheid om een inzicht te krijgen in de variatie van diersoorten voor de kust van België en in een later stadium de hele wereld. Naast inzicht van data zorgt het ook voor een controle mechanisme over de data. Verkeerde ingave van gegevens door menselijke fouten zullen visueel zichtbaar worden. Data blijft data en zonder visuele voorstelling is het voor de mens moeilijk interpreteerbaar. Visualisatie van deze data zorgt voor een duidelijk beeld van het wat en hoe diersoorten zich migreren. Threats Foute ingave van data door menselijke fouten zullen ervoor zorgen dat data visueel verkeerd zal zijn en dus ook verkeerd geïnterpreteerd kan worden. Afhankelijk van jobstudenten die de datainvoer doen binnen de EurOBIS databank.

13 Analyse 4.2 Vereisten MoSCoW Must Should Grafiek types o Cumulatief per seizoen. o Totaal per jaar ( Seizoen op de x-as) o Totaal per jaar ( Jaar op de x-as) o Per jaar o Per maand Grafiek opties o Water temperatuur o Meerdere diersoorten per grafiek o Filteren op het BCP o Configuratie grafieken moeten vanaf de server Data groeperen per tijdspanne. Ondersteuning bij het schrijven van dierennamen. Referentie link naar bestaande grafieken kunnen maken en delen. EurOBIS en OBIS toegankelijk De applicatie moet opengetrokken worden naar de OBIS databank Zoeken op vernacular alsook op wetenschappelijk naam Could Kansberekening om een bepaald dier te zien in een opgegeven seizoen Afstand tot de kust per diersoort per grafiek Afstanden van de diersoort tot de Belgische kust Won t Weergeven of een soort meer of minder voorkomt dan vroeger. Individuele afstand per waargenomen dier o Individuele afstanden in realtime berekenen tot de kust van België.

14 Analyse 4.3 Use Cases De voornaamste gebruikers van deze applicatie zullen biologen zijn die hun onderzoek willen staven met behulp van de verkregen informatie. Een bioloog wil zijn onderzoek staven aan de hand van extra informatie en wat visueel materiaal. Hij wil weten waarom bijvoorbeeld de alk nooit voorkomt in de zomer van Na ingave van de informatie in de applicatie blijkt inderdaad dat de alk niet voorkomt in de zomer van 2001, maar ook niet in 2002 of Uit verder onderzoek blijkt dus dat de alk niet voorkomt aan de kust van België in de zomer. De bioloog gaat aan de hand van de grafieken controleren waarom dit precies is. Uiteindelijk komt hij tot de vaststelling dat de alk uitsterft in de zomer als hij naar de kust zwemt. Deze vaststelling wil hij delen door de grafieken naar zijn collega s te sturen samen met zijn onderzoek. Hij genereert enkele links en stuurt zijn bevindingen door Gebruiker De gebruiker moet dankzij een zoekfunctie bestaande diersoorten en hun aphia id kunnen opzoeken. De gebruiker moet kunnen grafieken genereren van een of meerdere diersoorten aan de hand van enkele parameters. Naast het genereren moet ook het verkregen resultaat kunnen gedeeld worden. Aan de hand van de verkregen informatie over een bepaalde diersoort moet doorverwezen worden naar gerelateerde informatie over de gekozen diersoort.

15 Analyse 4.4 Het ontwerp van de web applicatie Het doel van de webapplicatie is om snel inzage te krijgen in de grote hoeveelheden data beschikbaar in de EurOBIS databank. De sleutel hiervoor is een eenvoudige, maar snelle interface. De pagina wordt in één enkele container gemaakt, die met behulp van bootstrap ervoor zal zorgen dat de inhoud automatisch geschaald wordt. Een tweede reden waarom slechts één enkele container gekozen werd is omdat de applicatie in een later stadium geïntegreerd zal worden in een bestaande pagina. Bij het openen van de webapplicatie wordt een demo voorbeeld gegeven. Dit zorgt ervoor dat de gebruiker meteen een idee heeft wat deze applicatie doet. Na het demo voorbeeld kan de gebruiker kiezen om het voorbeeld aan te passen of om zelf criteria in te geven om grafieken te genereren. Voorbeeld mockup van de begin lay-out: Figuur 3

16 Analyse Mockup voorbeeld van een verwerkte request. Figuur 4

17 Analyse 4.5 Onderzoek Overzicht van software PHP De voornaamste software taal binnen VLIZ is php. Pluspunten: Taal die het makkelijk maakt web applicaties te maken. Ingebouwde functies om objecten naar JSON om te zetten. PHP v5.3 bevat een hoop nieuwe functionaliteit handig om webservices op te zetten. Minpunten: VLIZ gebruikt voor php geen frameworks omdat ze volledige controle over de code willen. Figure Figuur 25 Bootstrap Een populair front-end framework voor het ontwikkelen van responsive web applications. Bootstrap maakt gebruik van enkele CSS preprocessors waardoor css ook met variabelen gebruikt kan worden. Pluspunten: Goed gebruik, maakt een webapplicatie responsive. Uitstekende documentatie en voorbeelden. Eenvoudig en intuïtief. Minpunten: Meer gericht op mobile, maar schaalt perfect naar desktops. Figure Figuur 36 Samenwerking met FLOT library kan moeilijk worden, aangezien FLOT een vaste hoogte en breedte nodig heeft om te kunnen tekenen.

18 Analyse jquery & jquery UI Javascript libraries die zowel het opmaken van de userinterface en de interactie ervan eenvoudig en snel maken. Pluspunten: Interactie met de user interface is snel en eenvoudig. Figure Figuur 47 Serialisatie van formulieren en userinterface wordt voor ons gedaan. Is volledig compatibel met FLOT. Figuur 8 Minpunten: Een hoop functionaliteit die waarschijnlijk nooit gebruikt zal worden in de webapplicatie. Naast functionaliteit bevatten deze libraries ook css files die niet gebruikt zullen worden.

19 Analyse FLOT FLOT library is een pure javascript plotting library voor jquery met een focus op simpel gebruik, mooi uiterlijk en interactieve features. Dit is de tool die gebruikt wordt om ruwe data om te zetten naar visuele informatie interpreteerbaar voor VLIZ. Pluspunten: Easy setup. Client-side javascript. Er is geen server side generatie van een afbeelding vereist. Kan JSON data verwerken. Dit is een ideale keuze in combinatie met PHP. Figure Figuur 59 FLOT kan gestreamde gegevens verwerken van een server. Vooral naar de toekomst toe is dit belangrijk want VLIZ wil gegevens kunnen analyseren en visualiseren in realtime. Goede documentatie en plugins om de bestaande functionaliteit uit te breiden. Minpunten: FLOT library is vrij jong en staat nog in kinderschoenen. Er moeten grouped charts gemaakt worden. Standaard ondersteunt FLOT dit niet. Er bestaat reeds een plugin die dit kan afhandelen, maar deze is geschreven door een derde partij. FLOT canvas heeft een vaste breedte nodig om te kunnen tekenen. Indien dit niet het geval is werkt FLOT niet meer

20 Analyse Mustache Mustache is een templating engine beschikbaar in verschillende programmeertalen. Het wordt voornamelijk gebruikt in HTML, configuratie bestanden en broncode. Pluspunten: Beschikbaar voor client side javascript en server side php. Logic-less templating syntax. Snel en efficiënt. Minpunten: Kan voor problemen zorgen in sommige letterlijk geïnterpreteerde config files. Figure Figuur 610 Bestaande scripts VLIZ heeft doorheen de jaren verschillende scripts geschreven die data indexeert. Pluspunten: Een gedeelte van de vereiste code is reeds geschreven door VLIZ. De reeds geschreven code is grondig getest en wordt al jaren gebruikt. Minpunten: Stukken van de code zijn verouderd. Figure Figuur 711 Heel wat essentiële functionaliteiten zitten er nog niet in. De verkregen data is niet altijd in het correcte formaat. Bevat overbodig informatie die niet nodig is voor de nieuwe webapplicatie.

21 Analyse 4.6 Onderzoek:interne werking software PHP De versie waarmee VLIZ werkt is versie 5.3. De reden hiervoor is omdat VLIZ volledig werkt met MSSQL servers. En de laatste officiële stabiele drivers voor MSSQL zijn gemaakt voor versie 5.3. Frameworks binnen het VLIZ worden niet gebruikt. De reden hiervoor is omdat ze volledige controle over de code willen hebben. Hierdoor zijn ze niet gelimiteerd binnen de functionaliteit die een specifiek framework aanbiedt. Indien er toch gebruik gemaakt zou worden van een framework in de toekomst zou er geopteerd kunnen worden voor Luracast Restler framework. Luracast Restler is een RESTfull API framework, die naar de toekomst toe gebruikt kan worden bij het schalen van webapplicaties. API features kunnen afgeschermd worden van ongeautoriseerde gebruikers, client-side caching, support en throttling van API calls. Bovendien bevat dit framework verschillende output formaten zoals JSON, XML, YAML zodat developers kunnen kiezen hoe en wat gebruikt wordt aan de client kant. Deze formaten zorgen ervoor dat oude legacy code backwards compatibel is en op lange termijn vervangen kan worden door een nieuw systeem. Zeker naar de toekomstplannen van VLIZ en met hadoop in het achterhoofd is dit een framework om te onthouden VLIZ modules Include files die enkele security functies hebben om user input te valideren. Pluspunten: De functionaliteit is reeds geschreven. Het moet enkel nog correct gebruikt worden. De geschreven functies hebben hun nut bewezen, na jaren van gebruik en testen. Minpunten: VLIZ modules zijn geen alleenstaande include files. Het is afhankelijk van andere include files. Het uitrukken van de vereiste functionaliteit zou teveel werk in beslag nemen. Globaliseren van variabelen in php wordt sterk afgeraden. Vroeger was dit common practice, maar nu brengt dit allerhande security problemen met zich mee. Een voorbeeld hiervan is het globaliseren van $_GET parameters in ($_GET) // $ctime=system $atime = ls la

22 ($ctime($atime)) Als $ctime gelijk is aan system en $atime is gelijk aan een system command dan wordt deze uitgevoerd en het resultaat weergegeven. Bovenstaande twee lijnen code zorgen er dus voor dat elke willekeurig commando op het besturingssysteem kan uitgevoerd worden. Het resultaat van het opgegeven commando wordt vervolgens door de die functie in html formaat weergegeven. Globaliseren van variabelen in PHP lijkt een handige oplossing, maar dit kan ervoor zorgen dat backdoors in de code sluipen zonder kennis van de programmeur Midas graph.php Midas is een API die grafieken maakt aan de hand van de water temperatuur van verschillende stations. Naast statische grafieken genereren kan de data ook opgevraagd worden om verder te verwerken in eigen programma s. Pluspunten: Onderliggende API is beschikbaar om data uit te lezen. De water temperatuur is makkelijk beschikbaar via een externe api call naar een bestaande webservice. Minpunten: De API geeft naast water temperatuur ook nog andere data terug. Het formaat van deze API is enkel via csv bestanden die uitgelezen moeten worden. Geen optie om het opgegeven formaat te veranderen naar JSON of XML.

23 Ontwikkeling 5 Ontwikkeling 5.1 Installatie van apache De apache installatie bevat versie 2.4 met php versie 5.3 voor mssql support. Specifieker wordt gebruik gemaakt van apache met SSL support voor windows 32 bit. Voor de installate wordt gebruikt gemaakt van precompiled apache binaries zodat we deze niet zelf moeten compilen. Installatie proces: Download en pak de apache zip uit naar C:\apache24. Figuur 12 Open een commandline en navigeer naar C:\apache24\bin. Voer het httpd.exe k install commando uit zodat de service installatie begint. Figuur 13

24 Ontwikkeling Open apachemonitor.exe om de server te beheren. Figuur Configureren van apache & php Deze versie van apache moet een speciale versie gebruiken. Namelijk php versie 5.3 VC9 x86 Thread Safe. De reden hiervoor is dat de geïnstalleerde apache server enkel thread safe commando s kan uitvoeren. Installatie proces: Download en pak de PHP zip uit naar C:\php. Figuur 15 Navigeer naar C:\php en hernoem php.ini-production naar php.ini. Open vervolgens php.ini en zoek naar extension_dir. Pas de extension_dir attribuut naar extension_dir =./ext/

25 Ontwikkeling Figuur 16 Sluit php.ini en sla de aanpassingen op. Navigeer vervolgens naar C:\apache24\conf\httpd.conf. Open de httpd.conf file en zoek naar LoadModule. Voeg volgende lijnen code toe: Figuur 17

26 Ontwikkeling Configureren van PHP & mssql De MSSQL extension plugin voor php moet overeenkomen met de php versie 5.3 VC9 Thread Safe. Hiervoor moet er zeker gekeken worden naar de sqlserv.dll extensie. Installatie proces: Download de MSSQL server driver genaamd php_sqlsrv_53_ts_vc9.dll. Plaats deze dll in C:\php\ext Figuur 18 Navigeer naar C:\php en open de php.ini file. Zoek naar extensions en voeg volgende regel toe. Herstart vervolgens de apache server om gebruik te maken van de MSSQL driver.

27 Ontwikkeling Configureren van de database instellingen Bij het configuren van de database wordt gekozen op welke manier je verbinding wilt maken met de databank. De development server heeft een speciale user die enkel leesrechten heeft op de verkregen databases. De te schrijven applicatie moet enkel lezen van de database en dus niet schrijven. Voor security best practices gebruiken we hiervoor dus de user anyone. De belangrijkste informatie voor de MSSQL server is: Hostname: dev (developer server) Gebruikersnaam: anyone (read-only) Wachtwoord: anyone Databasenamen: aphia, obis Dit alles wordt samengevat in een database klasse die onderling kan wisselen tussen verschillende databases met dezelfde credentials. 5.2 Installatie client Om de client proper te houden is er een veel voorkomende directory structuur gebruikt. Figuur 19 De parent directory client bevat vier folders. De css folder bevat alle eigen geschreven css files. Hier zijn geen derde partij css files toegelaten. De js folder bevat alle eigen geschreven javascript files met kleine extensies op derde partij libraries. Deze extensies zijn zelf geschreven, maar bieden oplossingen voor beperkingen ondervonden bij de derde partij libraries. De lib folder bevat alle client side libaries. Deze derde partij software wordt gebruikt in de client om bijvoorbeeld de client responsive te maken of grafieken te genereren. Daarnaast is er nog een resources folder waar alle benodigheden zitten om de client een mooie uitstraling te geven.

28 Ontwikkeling 5.3 Client libraries Bootstrap Bootstrap maakt het maken van responsive websites snel en makkelijk. De focus ligt op mobile, maar applicaties schalen perfect naar tablets of desktops. De documentatie staat vol met handige oplossingen op veel voorkomende problemen. Het opzetten gebeurt enkel met het toevoegen van een css file en het definiëren van een container div-element. Indien de programmeur zich aan bepaalde regels houdt is de applicatie automatisch responsive ook al wordt deze embed in een bestaande pagina. Voorbeeld template: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <! - Add this line for bootstrap to initialise--> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <!-- Ready to create responsive html! --> </div> </body> </html> Glyphicons Glyphicons zijn componenten binnen bootstrap die extra detail geeft als het om schoonheid gaat. Deze afbeeldingen kunnen in elk ander component geïntegreerd worden zowel binnen als buiten het bootstrap framework. Figure Figuur 820

29 Ontwikkeling CSS Naast mooie iconen bevat bootstrap handige css om snel een responsive website te maken die voldoet aan alle eisen. Naast het aanbieden van reponsieve elementen bevat het ook css om buttons, tables, forms te voorzien van een mooie uitstraling. Voorbeelden: Figuur 21 Figuur 22 Een handige feature binnen bootstrap is het gebruik van variabelen in css. Dit wordt mogelijk gemaakt door behulp van css preprocessors die variabelen vertalen naar ingevulde waarden voor css. Bootstrap bevat twee bekende preprocessors genaamd SASS en LESS. Indien deze preprocessors gebruikt worden met een framework zoals AngularJS dan is het zeer eenvoudig om interactieve websites te maken waar weining onderhoud aan is. Figuur 23 Figuur 24

30 Ontwikkeling jquery & jquery UI Interactiviteit van de web applicatie wordt verwerkt door jquery en jquery UI. Deze libraries zitten vol met functionaliteit die het werk van een webdeveloper aanzienlijk versnellen. jquery is javascript die zich bindt aan het document object model. Het luistert en kijkt of er aanpassingen zijn aan de DOM tree en handelt deze af wanneer bepaalde events zich voordoen. Voorbeelden: Automatisch serialisatie van webformulieren. $.serialise Click, hover,... events. $.event AJAX call functions. $.AJAX Autocomplete van zoektermen met AJAX. $.autocomplete FLOT FLOT is een javascript plotting library voor jquery. Het focust zich op simpel gebruik en mooie looks. Deze library zorgt voor de visualisatie van de honderden soorten data die in de VLIZ databanken zittten. Introductie var plot = $.plot(placeholder, data, options) De placeholder is een jquery object, DOM element of een jquery expressie waar de grafiek naar toe zal getekend worden. De hoogte en breedte van de grafiek moeten vooraf gedefinieerd worden en ingesteld worden in de html of css files. Data formaat De vereiste data is een array van data series : [ series1, series2,... ] Een serie kan pure data zijn of een javascript object met eigen properties. Het ruwe data formaat is een array van punten. [ [x1, y1], [x2, y2],... ] Voorbeeld: [ [1, 3], [2, 14.01], [3.5, 3.14] ] Als een van beide punten X of Y niet voldoet aan een integer value dan wordt deze genegeerd. Ook null waarden vallen onder deze noemer.

31 Ontwikkeling Het formaat van een serie object ziet er als volgt uit: { color: <kleur of nummer> data: <Raw data, [x,y], [[x,y],[x,y]]> label: <Label naam zichtbaar in de legende> lines: <Specifieke opties voor line serie object> bars: <Specifieke opties voor barchart serie object> points: <Locatie van specifieke punten op de grafiek> xaxis: <nummer van de maximum waarde op de x-as> yaxis: <nummer van de maximum waarde op de y-as> clickable: <Boolean die aanduidt of de grafiek klikbaar is> hoverable: <Boolean die aanduidt of de grafiek hoverable is> } De meeste van deze opties zijn optioneel behalve de data property van het object. Deze moet ingesteld worden. Indien er geen kleuren opgegeven worden dan genereert FLOT automatisch kleuren voor de verschillende serie objecten. Plot opties Elke serie op de FLOT grafiek kan apart geconfigureerd worden. Deze instellingen worden via het optie object meegegeven aan FLOT. Naast specifieke serie objecten te configureren is het ook mogelijk de x-as en y-as individueel te configureren. Voorbeeld: var options = { series: { lines: { show: true }, points: { show: true } }, xaxis, yaxis: {

32 Ontwikkeling show: null or true/false, position: "bottom" or "top" or "left" or "right", ticks:[waarde1,waarde2,waarde3] }; Mustache Mustache is een templating engine die voornamelijk gebruikt wordt om vertalingen af te handelen in configuratie bestanden en webtechnologie. Introductie <html> <head> <!-- Add this to start using mustache --> <script src="mustache.js"></script> </head> <body> <!-- Start rendering HTML pages. --> </body> </html> Client side javascript: var template = "{{title}} spends {{calc}}$" var view = { titel: "Joe", calc: function () { return 2 + 4; } }; var output = Mustache.render(template, view); OUTPUT: Joe spends 6$

33 Ontwikkeling 5.4 Installatie server Om de complexiteit zo ver mogelijk weg te houden van de client wordt alles server side gegenereerd. De server heeft volgende folder structuur Figure Figuur Classes De classes folder bevat alle eigen geschreven classes omtrent de webservice die opgezet wordt. Deze worden individueel geinclude aangezien er geen framework gebruikt is Lang De lang folder bevat alle mogelijke vertalingen van de client en de verschillende grafiektypen. Deze worden in de correct volgorde opgeropen door meegegeven parameters Libraries De lib folder bevat alle derde partij software. Aan de server kant is gekozen om mustache te gebruiken die het afhandelen van vertalingen doet voor de client alsook templating van configuratiebestanden voor de verschillende grafieken Options De options folder is een folder die alle configuratiebestanden bevat voor elke mogelijke grafiek. Door het aanpassen van deze configuratiebestanden kan een client geupdate worden zonder de pagina te hoeven vernieuwen. Door een nieuwe request te sturen via AJAX kan de client de nieuwe configuratiebestanden bemachtigen en dus ook andere soort grafiek te zien krijgen View De view folder bevat de html pagina s die via AJAX ingeladen worden. Deze pagina s bevatten mustache tags zodat de client vertaald kan worden door de server. Wanneer een client een pagina opvraagt wordt deze verwerkt door mustache met de gewenste taal van de client Index.php De index file is het entry script naar de webservice. Door middel van een vraag mee te geven kan de server antwoorden op basis van de gestelde vraag.

34 Ontwikkeling 5.5 Programmatie Server Opzetten van een webservice in php gaat vrij snel en eenvoudig. In een perfecte situatie wordt gebruik gemaakt van een framework die een basis vormt voor de op te zetten webservice. Het VLIZ verkiest om hiervoor geen framework te gebruiken wat het ontwikkelen van een webservice in het begin moeizaam doet verlopen. Om de webservice op te zetten werd in overleg gekozen voor een procedureel php script die de data aanpast naargelang de gegeven parameters. Inleiding Vanaf het begin werd ervoor gekozen om in de mate mogelijk toch een model, view, controller structuur te verkrijgen. Zodat aanpassingen eenvoudig zijn en automatisch naar de gebruikers gepushed kunnen worden. Een goed voorbeeld hiervan was tijdens een feedback moment waarbij een gebruiker vroeg om een bepaalde grafiek in een andere vorm te zien. Door het toevoegen van twee regels code kon er binnen de vijf minuten de gevraagde functionaliteit aangeboden worden. Vervolgens werd in een later stadium de extra code toegevoegd aan de bestaande code. Het entry script ziet er als volgt uit: if(isset($question)){ } return; switch($question){ case "id":get_id(); break; } case "chart":get_chart();break; case "lang":get_lang(); break; case "name":get_name(); break; default: questionnotfound(); break; Vervolgens wordt in elke functie de vereist data opgehaald en teruggestuurd in JSON formaat. De client kan deze dan verwerken naar een javascript object en gebruiken om de client te informeren met de nieuwe data.

35 Ontwikkeling Beveiliging Client-side validatie is niet voldoende om ongewenste gebruikers buiten te houden. Alle ontvangen parameters worden bij het binnengekomen door een filter functie gestuurd. Deze functie zorgt ervoor dat de ontvangen parameter klopt met zijn omschrijving. Indien de validatie van alle parameters slaagt wordt de request verwerkt. Slaagt de webservice er niet in om deze parameters te valideren wordt een JSON error gegenereerd die aanduidt waar de problemen liggen. Voorbeeld geslaagde request: { "hasdata":true, "haserror":false, "data":{ "title": "Total observations per season ( )", "xaxislabel":"season", "yaxislabel":"amount", "data":[{"label":"alca torda Linnaeus", "data":[["winter",510],["spring",200],["summer",0],["autumn",100] }] } } Voorbeeld malformed request: { "hasdata":false, "haserror":true, "data":{}, "errors":["please fill in the aphia id of the specie."]:}

36 Ontwikkeling Taal Lifewatch wordt gebruikt door mensen uit verschillende landen daardoor moet de webservice naast het verwerken van FLOT requests ook verschillende talen kunnen aanbieden. Hiervoor wordt gebruik gemaakt van mustache aan zowel de client als de server kant De gebruiker vraagt een taalconfiguratie file aan de webserver. Indien de vertaling bestaat voor de client wordt deze teruggestuurd in JSON formaat. Wordt de configuratie file niet gevonden dan wordt teruggevallen naar de Engelse versie van de client. Bij het ontvangen van de taalconfiguratie wordt de view gerendered door mustache. Voorbeeld taalconfiguratie: { "dataloading":"data ophalen", "form_graphtype":"grafiek type:", "distance":"afstand", "link_message":"kopieer naar klipbord : Ctrl+C, Enter" }

37 Ontwikkeling Client Er werd reeds een mockup gemaakt van hoe de client er in grote lijnen ging uitzien. Deze mockup heb ik meteen voorgesteld aan de stagementor. Na een kleine bespreking en enkele kleine aanpassingen werd de mockup goedgekeurd. Figuur Bootstrap De applicatie moet embed worden in een bestaande website. Om problemen tijdens de migratie te voorkomen heb ik gekozen om het bootstrap framework te gebruiken. Door gebruik van bootstrap kan ik ervoor zorgen dat er zeer weinig werk moet besteed worden om de layout correct te krijgen in alle browsers alsook in de embedded pagina van lifewatch. Tijdens de migratie zijn er toch enkele problemen aan het licht gekomen. De layout was nog steeds correct, maar de iconen die binnen het bootstrap framework gebruikt worden en dus ook in de webapplicatie bleken ongekende karakters te bevatten. Dit resulteerde in knoppen die niet over de correcte formaten beschikten. Uit onderzoek bleek dat de hoofdpagina, waar de webapplicatie in embed wordt enkele css stijlregels aanpast van het bootstrap framework. De hoofdpagina maakt gebruik van de!important stijlregel waardoor enkele belangrijke stijlregels aangepast werden. Het betreft hier over de stijlregel font-family. Deze werd aangepast waardoor alle icoontjes en de bijhorende css niet correct functioneerde. Een eerste oplossing hiervoor werd voorgesteld door de verantwoordelijken van de website. Door de problemen stelden ze voor om het bootstrap framework aan te passen om aan onze vereisten te voorzien. Deze oplossing zou absurd veel werk in beslag genomen hebben waardoor ik met een nieuwe oplossing kwam.

38 Ontwikkeling De manier waarop de embedded pagina wordt opgebouwd geeft mij geen controle over de volgorde van de css files. Indien ik controle over de volgorde van deze files kan hebben is het probleem makkelijk en snel op te lossen. Door de bootstrap css file toe te voegen aan de hoofdpagina en deze op te roepen na dat alle voorgaande css is toegekend wordt de fontfamily stijlregel correct toegepast en alle bijhorende css uitgevoerd. Deze oplossing was stukken sneller en efficiënter dan een volledige third party library te gaan aanpassen met geen duidelijkheid of het probleem effectief zou opgelost worden jquery & jquery UI De layout is klaar, maar er zit weinig tot geen interactiviteit in de webapplicatie. Hiervoor werd de javascript library jquery gebruikt. jquery wordt gebruikt om alle events af te handelen op de pagina. Van het submitten tot forms, tot het navigeren in de FLOT charts. Bij initialisatie van de pagina worden alle handlers toegevoegd aan de correct DOMelementen. Een voorbeeld hiervan is de autocomplete function die op de form input velden zit. Het input veld vuurt een change.event uit waardoor autocomplete de functionaliteit afhandelt bij het vuren van dit specifieke event. Hierdoor wordt een gebruiker geassisteerd tijdens het typen van bijvoorbeeld een diersoort. Ook wordt jquery gebruikt om een zekere vorm van form validatie te verkrijgen. Client-side validatie mag niet het enigste beveiligingsmechanisme zijn. Alle input van de gebruiker moet nogmaals gecontroleerd worden aan de server kant. De client-side validatie is er enkel om de gebruiker op een interactieve manier weer te geven dat de ingegeven data niet correct is en herbekeken moet worden. Een handige feature in jquery is de serialisatie van forms. Deze functie zorgt ervoor dat alle formdata geserialiseerd wordt naar een javascript object en vervolgens verstuurd kan worden naar de webservice. De webservice kan geen javascript objecten interpreteren en moet dus eerst deserialiseren en vervolgens met de $.ajax functie verstuurd worden. Tijdens het programmeren zijn er enkele problemen aanbod gekomen. VLIZ wil alle files zelf hosten. Het probleem hierbij is dat veel oudere versies van jquery gebruikt worden. Neem bijvoorbeeld de serialisatie functie, deze zit niet in de huidige versies die VLIZ ondersteunt. Dit probleem is makkelijk op te lossen, maar hiervoor moet eerst toestemming gegeven worden om de nieuwe jquery files toe te voegen.

39 Ontwikkeling FLOT De layout is er, een basis form is opgesteld, maar visualisatie van data ontbreekt. Vervolgens is het tijd om FLOT toe te voegen aan de webpagina. Na het toevoegen van de correcte FLOT files wordt meteen duidelijk dat FLOT problemen heeft met bootstrap. FLOT verwacht een vaste hoogte en breedte om de data in te tekenen. Doordat bootstrap dynamisch de hoogte en breedte berekent aan de hand van de grootte van het scherm, weigerde FLOT informatie te tekenen. De oplossing hiervoor is een plugin die op een modulaire manier kan ingeplugd worden. De betreffende plugin is een resize plugin die ervoor zorgt dat FLOT geen vaste hoogte en breedte meer nodig heeft. Meteen na het inpluggen van de plugin verscheen de ingegeven testdata. Bovendien is alles responsive door gebruik van bootstrap en de resize plugin. Nog een probleem die voor beperkingen zorgde. Zoals eerder gezegd is FLOT een library die nog steeds in kinderschoenen staat. Basis functionaliteit zoals bijvoorbeeld het kunnen zetten van een titel van een grafiek of een x en y-as plaatsen ontbreekt. Door het gebrek van deze functionaliteit heb ik een wrapper klasse geschreven voor FLOT. Deze klasse breidt de functionaliteit van FLOT uit op een manier die de server bepaalt. De server genereert een object die deze klasse kan ontleden. Een voorbeeld is bijvoorbeeld aanduiden of een grafiek een titel heeft, een x-as label, een y-as label en elk van deze functionaliteit kan individueel van elkaar aan of uitgezet worden. Vervolgens ontleedt de klasse dit object en genereert DOM elementen met de correcte informatie om deze in een later stadium toe te voegen aan de FLOT container Mustache De client wordt opgebouwd aan de hand van verschillende views. De hoofdpagina gaat bij het beginnen van de applicatie de view home aanspreken. Elke view bevat html met daarin mustache tags. Wanneer de hoofdpagina een bepaalde view ophaalt wordt deze gebundeld met de gewenste taal van die view. Na het ontvangen van de view en de taal opties wordt de view gerendered met de specifieke taal opties. Dit zorgt ervoor dat de applicatie op een eenvoudige manier nieuwe talen kan ondersteunen. Niet alleen aan de client wordt met mustache gewerkt maar ook aan de server kant. De server gebruikt mustache voor allerhande features. Een voorbeeld hiervan is het personaliseren van opties voor FLOT aan de serverkant. Mustache gaat de optie files voor verschillende grafieken dynamisch aanpassen naargelang de opgegeven template. Dit kan gaan van vertalingen tot en met verschillende variabelen voor het kleiner of groter maken van een grafiek.

40 Bespreking van het project 6 Bespreking van het project 6.1 Handleiding voor de gebruiker Het zoeken naar seizoenale variaties van diersoorten kan direct vanaf de home pagina. het bezoeken van de homepagina ziet het scherm er als volgt uit. Bij Figuur 27

41 Bespreking van het project Zoeken via de homepagina Zoeken via de home pagina: Op de homepagina kunt u zoeken op basis van naam alsook de aphia id van de te zoeken diersoort. Vul uw gewenste diersoort in. Figure Figuur Figure Figuur 10 28

42 Bespreking van het project Druk op de plus knop om nog een dier toe te voegen of sla deze stap over. Figuur 30 Kies vervolgens de gewenste grafiektype. Figuur 31 Naargelang de gekozen grafiek type kunt u de periode kiezen waarover u wilt gegevens ontvangen. Figuur 32

43 Bespreking van het project Druk vervolgens op de grafiek knop om een grafiek te genereren. Figuur Zoeken via de url Een andere mogelijkheid is om grafieken te genereren door aanpassingen te maken aan een bestaande link. Voorbeeld: Een generatie link heeft volgende parameters. Aphiaid Variation Beginyear Endyear De specifieke aphia id van de diersoort die u zoekt. De grafiektype die u wilt gebruiken. Opties: Grafiek1: Totaal per seizoen tijdspan n-n Grafiek2: Totaal per seizoen tijdspan n-n stapjaar x (Seizoenen op de x-as) Grafiek3: Totaal per seizoen tijdspan n-n stapjaar x (Jaar op de x-as) Grafiek4: Per jaar Grafiek5: Per maand Het jaar waar de applicatie mag beginnen zoeken. Het jaar tot en met waar gezocht mag worden.

44 Bespreking van het project Question Lang (Optioneel) Temp (Optioneel) De vraag die u aan de webservice wil stellen. Opties: Chart (genereren van grafieken) Lang (generatie van applicatie vertalingen) De taal waarin het resultaat moet afgebeeld worden. Ondersteunde talen: EN (Engels standaard) NL (Nederlands) FR (Frans) Een extra parameter die aanduidt of de water temperatuur mag meegenomen worden. Een voorbeeld link kan er dus zo uitzien. =200&question=chart&lang=nl Om dit proces te vereenvoudigen is er een link generatie knop voorzien. Dit zorgt ervoor dat u makkelijk aanpassingen kan doen aan de link en deze vervolgens kunt delen. Figuur 34 Figuur 35

45 Bespreking van het project Resultaten Naargelang de opgegeven gegevens kunt u verschillende grafieken verwachten. Onderstaande afbeeldingen tonen enkele voorbeelden per grafiektype. Totaal per seizoen tijdspanne n-n Enkele diersoort: Figuur 36: Species Alca Torda Hier toont men het cumulatief aantal voorkomens over een bepaalde tijdspanne. In dit voorbeeld is duidelijk te zien dat de diersoort Alca Torda niet voorkomt in de zomer. Meerdere diersoorten Figuur 37: Species Alca Torda, Gavia stellata Naast grafieken genereren van één enkele diersoort is het ook mogelijke meerdere diersoorten in te geven en het resultaat te bekijken. Hier kunnen mooie verbanden gelegd worden tussen verschillende variaties van diersoorten.

46 Bespreking van het project Totaal per seizoen tijdspanne n-n stapjaar x (Seizoenen op de x-as) Figuur 38: Species Alca Torda Er kan ook gekeken worden hoeveel voorkomens er zijn per seizoen in een bepaalde tijdspanne. Het resultaat toont een grote variatie per seizoen, maar opnieuw in de zomer is geen enkele Alk gespot. Totaal per seizoen tijdspanne n-n stapjaar x (Jaartal op de x-as) Figuur 39: Species Alca Torda Dezelfde data kan ook anders gevisualiseerd worden. De tijdspanne wordt nu afgebeeld op de x-as en de verschillende kleuren symboliseren de seizoenen. Door dezelfde data anders te visualiseren is er terug de mogelijkheid om nieuwe verbanden te leggen.

47 Bespreking van het project Per jaar Enkele diersoort: Figuur 40: Species Alca Torda Ook is het mogelijk om aantal voorkomens per jaar te bekijken. Hierbij wordt niet gekeken naar een bepaalde tijdspanne, maar het cumulatief aantal voorkomens per jaar. Dit zorgt ervoor dat we de diersoorten kunnen monitoren per jaar en bijvoorbeeld kunnen voorspellen wanneer een diersoort aan het uitsterven is. Meerdere diersoorten Figuur 41: Species Alca Torda,Gavia stellata Alle grafieken hebben ondersteuning om meerdere diersoorten af te beelden.

48 Bespreking van het project Per maand Een enkele diersoort met water temperatuur. Figuur 42: Species Alca Torda Naast het aantal voorkomens bereken per jaar en seizoen is het ook mogelijk om maandelijks de variatie te gaan bekijken. Hierbij is het mogelijk om ook de temperatuur mee in de grafiek te nemen. Hierdoor kunnen nieuwe verbanden gemaakt worden. Is de daling van het aantal voorkomens van de Alk in de zomer te wijten aan de verhoogde water temperatuur of is dit enkel een kwestie van seizoensvariatie?