Early warning system

Transcriptie

1 Scriptie ingediend tot het behalen van de graad van PROFESSIONELE BACHELOR IN DE ELEKTRONICA-ICT Early warning system Youness El Lamzi Departement Wetenschappen en Techniek Opleiding Elektronica-ICT Academiejaar Interne promotor: Tim Dams Externe promotor: Gert Van Rillaer Versie: 12 juni 2015

2 Dankwoord Ik zou graag CTG willen bedanken voor de kans die ik heb gekregen om bij hen mijn stage te mogen lopen. Ik zou graag ook de mobile unit op ctg willen bedanken voor een zeer aangename tijd en hun hulp tijdens de stage. Daarnaast wil ik mijn beide promoters bedanken: mijn interne promoter Tim Dams voor zijn begeleiding en advies tijdens mijn stageperiode. Mijn externe promoter Gert Van RIllaer voor de hulp en begeleiding tijdens mijn stage. Als laatste wil ik ook nog Kane Geens bedanken voor het mee ontwerpen van mijn poster. Antwerpen, 12 juni 2015 Youness El Lamzi i

3 Abstract Etrinity een dochterbedrijf van CTG dat zeer actief is in de medische sector, is al een bepaalde tijd bezig met een Early warning system. Een Early warning system is eigenlijk een systeem dat tot doel heeft de vitaal bedreigde patiënt vroegtijdig te herkennen en te behandelen op een standaard verpleegeenheid. Dit houd in dat je zal kijken naar de vitale tekenen van een patiënt: namelijk, hartslag, ademhaling, systolische bloeddruk, lichaamstemperatuur en de alertheid van een patiënt. Aan de hand van deze parameters berekent het een score voor de patiënt. Deze scores gaan van 1 tot en met 3 waar 1 staat voor in orde, 2 staat voor een waarschuwing en 3 staat voor kritiek. Door dit toe te passen kan je vitaal bedreigde patiënten zeer snel herkennen. Dit project is uitgeschreven als een bachelor proef en aan mij toegewezen. ii

4 Inhoudsopgave Dankwoord Abstract i ii 1 Situering 1 2 Bespreking Bespreking verschillende technologieën AngularJS Nodejs Je kent javascript al Ionic Waarom Ionic MongoDB Wat is mongodb Supersonic Wat is Supersonic? Wat is Supersonic niet? Meteor Wat is MeteorJS Polymer.js Theorie Realiteit Bespreking Early Warning System Inleiding Onderzoek Bespreking verpleger/verpleegster gedeelte Bespreking dokter/administrator gedeelte Bespreking ING Survey App iii

5 INHOUDSOPGAVE iv 3 Resultaten Het project Doelstellingen Doelstellingen tijdens stage Besluit Nadelen Polymer Compatibiliteit Webcomponents Het gebruik van het Early Warning System Huidige problemen Early Warning System Performance Grootte van het project Compatibiliteit User experience A Appendix 1 28 A.1 Bibliografie A.2 Referenties

6 Lijst van figuren 2.1 Schematische voorstelling van de werking van meteorjs Schematische voorstelling van de werking van meteorjs screenshot van de 1ste versie van EWS screenshot verpleger/verpleegster gedeelte screenshot patiënt profile screenshot readings summary page screenshot SBAR messages screenshot Test graph ING screenshot graphs Vimeo voorbeeld code Custom elements voorbeeld code Datepicker Shadow DOM voorbeeld v

7 Hoofdstuk1 Situering Het doel van de stage was om een demo baar applicatie te maken waarmee je een ews-score kan laten berekenen. De applicatie zou deze info op een overzichtelijke en duidelijke manier moeten tonen zodat de verplegers en dokters op een snel en efficiënt manier kunnen afleiden of er iets mis is. Om een zo goed mogelijk applicatie te maken kreeg ik eerst de opdracht om verschillende opensource frameworks te onderzoeken, zodat ik een zo goed mogelijk framework kon kiezen om mijn applicatie te ontwikkelen. Na dit onderzoeksperiode kon de ontwikkeling van het Early warning system van start gaan. 1

8 Hoofdstuk2 Bespreking 2.1 Bespreking verschillende technologieën AngularJS MVC hoe het echt moet De meeste frameworks implementeren MVC maar hierdoor moet je uw applicatie opsplitsen in MVC componenten, hierdoor moet je uw code op een ander manier gaan schrijven waardoor je alles terug kan verbinden met mekaar. Dit is eigenlijk wel wat extra werk, voor een groot project valt dit goed mee, maar voor een klein project is dit niet aangeraden. Angular is een MVC framework dat je ook vraagt om je applicatie op te splitsen in MVC componenten, het verschil met andere MVC frameworks is dat angular alles zal koppelen voor u. Dit maakt het voor de ontwikkelaar veel makkelijker. Filters Filters filteren de data alvorens ze de view bereiken, dit kan voor verschillende doeleinden gebruikt worden. Zoals decimale getallen, een array orde aanpassen, een array filteren aan de hand van een parameter of zelfs paginering implementeren. Filters zijn ontworpen om standalone functies te zijn zoals directives, het enige verschil is dat filters bedoelt zijn om data te transformeren. 2

9 HOOFDSTUK 2. BESPREKING 3 Minder code schrijven Je moet niet uw eigen MVC pipeline schrijven. De view wordt ontwikkeld in HTML wat beknopter is. Data modellen zijn makkelijk te schrijven zonder getters of setters. Data-binding betekent dat je geen data in de view moet steken. Omdat directives apart is van je app-code kan dit door een team parallel ontwikkeld worden, dit met zo weinig mogelijk integratie problemen. Dan heb je uw filters dat u de mogelijkheid geeft om uw data te manipuleren op view-level, waardoor je uw controllers niet zal moeten aanpassen. Unit testing ready Het geheel van angular is gekoppeld door Dependency injection (DI). Angular gebruikt dit om al uw controllers en scopes te beheren. Omdat al uw controllers rekenen op de DI voor informatie kan je met unit testing gebruik maken van mock data waardoor je zo de gehele werking van je controller kan bestuderen. Wanneer je niet moet kiezen voor angularjs Niet alle web applicaties moeten worden ontwikkeld met angular. Bijvoorbeeld games of een intens wiskundig programma hebben geen baat door angular te gebruiken. 2.2 Nodejs Je kent javascript al Je maakt gebruik van een cliënt framework zoals Angular, Ember, Backbone en een REST-fulserver-side API dat JSON data heen en weer stuurt. Zelfs als je deze frameworks nog niet hebt gebruikt, zou ik het nog steeds overwegen. Als je geen node.js aan de server zijde gebruikt, ben je eigenlijk constant aan het vertalen. Je vertaalt 2 dingen: 1. De logica in je manier van denken 2. De http data van JSON naar je server-side objecten Door middel van javascript doorheen je hele applicatie te gebruiken, win je niet alleen mentale energie maar ook efficiëntie.

10 HOOFDSTUK 2. BESPREKING 4 Het is snel! Node.js is een javascript runtime dat de V8 engine van google gebruikt. De compilatie en uitvoering van javascript door V8 is super snel, dit door het feit dat V8 javascript compileert naar native machine code. Maar het echte magie van node.js is de event loop. De event loop is een single thread dat alle I/O operaties asynchroon uitvoert. Traditionele, I/O operaties werken of te wel synchroon (blocking) of asynchroon dit door middel van threads die parallel staan in te schakelen. Dit oude manier verbruikt veel geheugen en is moeilijk te programmeren. In tegenstelling tot wanneer een node applicatie een I/O operatie moet uitvoeren, het als volgt te werk gaat. Het stuurt een asynchroon taak naar de event loop samen met een callback functie. Met andere woorden reading/writing naar de netwerk connectie, reading/writing naar de filesystem en reading/writing naar de databank, dit zijn allemaal taken dat vaak voorkomen in een web applicatie en deze gebeuren dan ook zeer snel in Node. Node geeft je de mogelijkheid om snel, schaalbare netwerk applicaties te ontwikkelen die gelijktijdige netwerk connecties aankunnen met een hoog troughput.

11 HOOFDSTUK 2. BESPREKING 5 Figuur 2.1: Schematische voorstelling van MeteorJS

12 HOOFDSTUK 2. BESPREKING 6 Tooling Npm is de Node.js package manager en het is zeer handig. Npm is snel en consistent. Het specifiëren en installeren van project dependencies gebeurt vlot en snel. Het houd verschillende packages van verschillende projecten afzonderlijk zodat je geen versie conflicten kan krijgen, je kan ook de globale installaties uitvoeren van shell commands. Real-time made easy Als node.js geen probleem heeft met verschillende connecties, dan is het logisch dat het ook geen probleem zal geven met multi-user, real-time web applicaties zoals chat en games. De event-loop van node regelt al de benodigdheden voor een multi-user ervaring. De kracht van real-time komt van de websocket protocol. Websockets zijn two-way communicatie kanalen tussen de cliënt en de server. Dus de server kan data pushen naar de client, even simpel zoals de cliënt dit doet naar de server. Websockets werken via TCP waardoor ze de overhead van http vermijden. Socket.io is één van de populairste websocket library. 2.3 Ionic Wat is Ionic Ionic is een verzameling van HTML, CSS en javascript componenten, dat de nadruk leggen op performantie en die geoptimaliseerd zijn voor de ontwikkeling van mobiele applicaties. de technologieën dat gebruikt worden in Ionic zijn Cordova, de opensource component van de Phonegap platform, Sass en AngularJS. Het geeft je de mogelijkheid om cross-platform te gaan ontwikkelen, dit betekent dus dat je uw code maar één keer zal moet schrijven Waarom Ionic Je moet niet meer uw eigen UI code schrijven Ionic geeft je de mogelijkheid om UI componenten te gaan gebruiken en je kan ze nog aanpassen met behulp van de CSS extensie taal Sass. Performantie van web views Web views dat werden gebruikt in applicaties hadden vaak niet de performantie van de web browsers op de smartphone. Maar nu zijn er SDK s voor de ontwikkeling van web applicaties

13 HOOFDSTUK 2. BESPREKING 7 met meer moderne, meer performantere web views. Dit betekent dat hybrid HTML5 applicaties sneller worden. Ionic kijkt vooruit Ionic maakt dus gebruik van AngularJS en Sass. Met versie 1.0 dat momenteel in gebruik is, zijn ze druk bezig met de ontwikkeling van versie 2.0. Dit versie zal gebruik maken van Angular 2.0 en Typescript. 2.4 MongoDB Wat is mongodb MongoDB is een opensource document-georienteerde database en is geschreven in C++. Er is geen schema, de documenten worden in de vorm van BSON (binair JSON) opgeslagen en de structuur van deze documenten is flexibel. De database kan gemakkelijk gedistribueerd worden, de data wordt dan over meerdere computers verspreid op gedistribueerde gegevensverwerking mogelijk te maken. MongoDB is geen relationeel databasemanagementsysteem (DBMS), er is geen ondersteuning voor joins en voldoet ook niet aan de ACID-regels want de ondersteuning voor transacties is beperkt. Met ACID bedoel ik het volgende: ˆ Atomair: de mate waarin het DBMS garandeert dat een transactie ofwel geheel wordt uigevoerd, ofwel geheel nietig is. ˆ Consistent: Een transactie creëert ofwel een nieuwe geldige staat of herstelt de staat die er was (in geval van een fout of een probleem). Dit impliceert dat na de transactie alle integriteitsregels van de database moeten gelden. ˆ Geïsoleerd: transacties worden geïsoleerd van elkaar uitgevoerd, dat wil zeggen dat transacties die tegelijkertijd worden uitgevoerd geen inzicht hebben in elkaars tussenresultaten. ˆ Duurzaam: waardoor een voltooide transactie later niet ongeldig gemaakt kan worden. Databases die voldoen aan de ACID-regels worden veelal gebruikt bij financiële instellingen. Sinds ngeveer 2005 gebruiken steeds meer sociale netwerksites zoals bijvoorbeeld Facebook databases die niet aan de ACID-regels voldoen. Databases die niet voldoen aan de ACID-regels zijn uitstekend geschikt voor gedistribueerde gegevensverwerking als consistentie geen vereiste is.

14 HOOFDSTUK 2. BESPREKING Supersonic Wat is Supersonic? Appgyver ontwikkelaars noemen dit framework een game-changer. Het is een fork van Ionic dat u niet meer zal laten twijfelen over de performantie van hybrid apps. De user-interface stijl van Supersonic is perfect om snel en efficiënt complexe mobiele applicaties te ontwikkelen. Wat het nog interessanter maakt is de look and feel van je mobiele applicatie. één van de meest belangrijke features is de Supersonic Data feature, met een simpel javasscript syntax kan je communiceren met elke dataset in uw backend. het is een compleet framework met een wizard voor de communicatie met een REST api naar keuze, een data browser om je backend data aan te passen en een CRUD scaffold generator. Je krijgt ook een gratis development database voor de ontwikkeling van je app. Supersonic data is ontwikkeld om zeer goed te werken in combinatie met angularjs. Een ander voordeel is dat je Cordova/Phonegap niet meer zal moeten gebruiken, in plaats daarvan heeft Supersonic een verzameling van API s dat zorgen voor de communicatie met de native mogelijkheden van uw mobiel toestel. Je kan natuurlijk ng steeds core-api s van cordova gebruiken in combinatie met de directives van angularjs. Features zoals Facebook login en push notifications kan je gebruiken via Appgyver-maintained plugins. Je hebt het hele native zijde onder controle en dat is wat ontwikkelaars graag horen. De wrapping service is ook een pluspunt je hoeft niet alleen Supersonic te gebruiken, je kan ook gebruik maken van Ionic, Famo.us en OnsenUI. Dit zijn één voor één user-interface frameworks. Supersonic bied je ook een groot selectie aan CSS componenten(alles wat je in Ionic hebt, heb je ook hier), ook al zijn de slide menu, tab bar en navigatie bar ook in native form beschikbaar. Je kan nog steeds native componenten stylen met behulp van CSS, er zijn er zelfs een paar beschikbaar als HTML elementen Wat is Supersonic niet? Supersonic heeft hetzelfde probleem als Ionic en Jquery mobile. Als je niet bereid bent om zware aanpassingen te brengen op vlak van design dan lijkt je applicatie weer een kopie van al de ander bijna niet aangepaste Ionic applicaties. Als je interesse ligt bij HTML5 markup based frameworks, is dit geen framework voor u. Een ander groot probleem is black-boxing. Supersonic is alleen handig als je het gebruikt in combinatie met appgyver cloud services. je kan geen Supersonic applicatie ontwikkelen zonder deze cloud services. Dit betekent dus dat je uw code zal moet delen met een third party bedrijf. Veel ontwikkelaars willen dit niet, de meest gebruikelijke reden hiervoor is risico s op vlak van

15 HOOFDSTUK 2. BESPREKING 9 security. Een ander nadeel is ook dat je bent verbonden aan de Apgyver services. Wat als ze hun privacy policies updaten of ze worden betalend? De volgende zijn de main features van Supersonic: ˆ Simpel ˆ één van de snelste mobile frameworks ˆ Ios en Android support ˆ fork van Ionic met ondersteuning voor AngularJS ˆ ngcordova ondersteuning ˆ alleen voor de ontiwkkeling van mobiele applicaties ˆ native animaties ˆ CLI support (open source) 2.6 Meteor Wat is MeteorJS MeteorJS is een samenhangend ontwikkeling platform, een collectie van verschillende libraries en packages dat samenhangen in een manier dat webontwikkeling makkelijker maakt. Het heeft iets weg van andere frameworks en libraries, maar dan met als verschil dat het je een manier bied om een volledig applicatie van scratch op te bouwen, zelfs een business case applicatie dat klaar is voor productie. Dit zonder dat je andere frameworks nodig hebt.

16 HOOFDSTUK 2. BESPREKING 10 Figuur 2.2: Schematische voorstelling van MeteorJS Command line tool De command line tool is eigenlijk hetgeen dat meteor zo compleet maakt, het heeft alles wat je nodig hebt zoals coffeescript of less compiler support. Het geheel package systeem is hierin verwerkt. isobuild is een isomorphic package systeem dat je toelaat om makkelijk packages te installeren via Atmosphere, npm en cordova plugins. Server De server is een node.js applicatie met bepaalde libraries dat de communicatie tooelaat over DDP en EJSON naar de front-end. ˆ Node.js: een javascript server. ˆ Connect: een library voor de http-response output van een app. ˆ Mongo (database driver): een simpele driver om te communiceren met MongoDB data. ˆ Livequery: een library waardoor je in een reactieve manier query s kan uitvoeren op de mongo data. ˆ Fibers/futures: een wrapper library voor Node.js om callback spaghetti te vermijden. Communication layer de communication layer is het echte magie dat de server en cliënt zijde samenvoegt. EJSON word gebruikt voor de serializatie en deserializatie van de data dat wordt verstuurd via DDP. ˆ DDP (distributed data protocol): websockets. een protocol voor het verzenden van data over ˆ EJSON: een extensie van JSON waardoor je meer data types kan verzenden zoals dates en binary. Browser Het browser gedeelte van de platform word verstuurt met zo weinig mogelijk HTML en een beetje javascript dat de omgeving laad. Heel veel code is opgebouwd op Jquery en underscore.js als fundering. Servers zijn van nature synchroon, browsers en javascript zijn van nature assynchroon. De volgende libraries geeft meteor zijn reactief gedrag. ˆ Tracker: de hoofdketen van het reactieve front-end.

17 HOOFDSTUK 2. BESPREKING 11 ˆ Spacebars: een aanpassing van Handlebars, gebouwd om reactief te zijn. ˆ Blaze: een reactief library dat Tracker en Spacebars samenkoppeld om een live updating user-interface te vormen. De opbouw lijkt op AngularJS, Backbone, React en Knockout maar gewoon veel simpeler. ˆ Minimongo: een cliënt-side mongo library. Cordova Het cordova gedeelte is mee verwerkt in de command line tool en de package system. Een simpel commando zoals: meteor add-platform android geeft je al meteen een android omgeving waarvan je vervolgens een android build van kan maken door het volgende commando: meteor build android. Meteor maakt het zo gemakkelijk voor een ontwikkelaar om vanuit één codebase een app build te maken voor 3 platformen namelijk web, android en ios. Packages Voor de duidelijkheid de packages in Meteorjs zijn zo belangrijk. Door een package zoals accounts-ui of accounts-google aan je Meteor project toe te voegen, moet je niet meer stil staan bij de complexiteit dat komt kijken bij een authenticatie of oauth authorizatie. Deze packages zijn libraries dat dit al voor u oplossen. Het is zo simpel als een functie aan te roepen met een paar parameters. Het feit dat je kleine delen van functionaliteit zo makkelijk kan toevoegen aan je bestaand project is weer een feit waarom Meteor aan populariteit wint. 2.7 Polymer.js Eerst en vooral wil ik je een verduidelijking geven over wat Polymer.js echt is en niet wat ze je wijs maken dat ze zijn Theorie Zodra je begint met polymer te bestuderen kan je niet anders dan op te merken dat het html elementen terug centraal zet in web ontwikkeling. Met polymer kan je je eigen elementen ontwikkelen en ze gebruiken in een polymer project. Hierdoor maak je een complex project schaalbaar en onderhoudbaar. Het gaat allemaal over nieuwe html elementen aanmaken dat je nadien kan gebruiken in uw HTML pagina s. Je kan ook html elementen gebruiken van anderen zonder dat je de complexiteit er achter moet begrijpen.

18 HOOFDSTUK 2. BESPREKING 12 HTML elementen zijn dan ook de bouwstenen van het web voegt polymer er aan toe. Ze willen dan ook dat je bestaande elementen uitbreid en zo nog meer krachtige web componenten opbouwd, in plaats van markup te vervangen door klodders van scripts in hun woorden. Polymer gelooft in de browser zijn native technologieën te gebruiken in plaats van te rekenen op complexe javascript libraries. Dat is dus de theorie er achter wat volgt is de realiteit Realiteit Polymer zijn philosofisch benadering is zeker niet verkeerd, het is gewoon een idee dat zijn tijd ver vooruit is. Polymer stelt veel eisen aan de browser dat het gebruikt. Rekenen op technologieën dat nog midden in een process van standaardisatie zijn(door W3C). dit zijn technologieën dat zeker standaard in browsers zullen komen, maar momenteel zijn ze er nog niet. Een oplossing hiervoor is om polyfills te gebruiken. Polyfills zijn downloadbare stukken javascript code dat de features die momenteel nog niet in de browsers zijn verwerkt, aanbieden. Dus als ik het goed begrijp, gaan we javascript libraries(polyfills) gebruiken om te vermijden dat we javascript libraries gaan moeten gebruiken. Dit is dus momenteel niet ideaal, maar als de browser support volledig is dan pas kan polymer uitgroeien. Dit wil niet zeggen dat je het niet kan gebruiken, het komt er gewoon op neer dat je je moet verwachten aan een niet al te goede compatibiliteit van verschillende browsers en niet al te beste performantie. Maar dit mag geen probleem veroorzaken om een goed demo te hebben voor het uiteindelijk applicatie. 2.8 Bespreking Early Warning System Inleiding Het early warning system houdt een score bij per patiënt. Deze score wordt bepaald aan de hand van de verschillende readings die een gebruiker moet ingeven. Zoals ik al eerder heb vermeld zijn er 2 delen in dit applicatie een verpleger / verpleegster gedeelte en een dokter/ administrator gedeelte Onderzoek Als eerste is er een onderzoek gedaan naar het reeds al bestaande ews applicatie dat mijn bedrijfspromoter Gert Van Rillaer heeft ontwikkeld. Dit zag er zeer goed uit, maar dit werkte nog niet met een backend, de data werd opgehaald uit een lokale datasource. Door de werking van de bestaande applicatie te zien, kreeg ik al meteen een goed beeld van wat ze graag zouden zien. Ews is namelijk een ge-automatiseerd process waardoor je makkelijk een ews-score kan

19 HOOFDSTUK 2. BESPREKING 13 laten berekenen, maar dit vond ik iets te weinig om als bachelor proef af te werken. Zo kwam het idee om een geheel medisch sector omgeving op te bouwen waarin je dit dan koppelt met een ews-score berekening. Dit is voor de pre-sales een zeer goed manier om de werking van een ews-score in een bestaand medisch sector omgeving te laten zien. 1ste ews.jpg Figuur 2.3: screenshot van de 1ste versie van EWS Bespreking verpleger/verpleegster gedeelte De verpleger/verpleegster gedeelte is zeer simpel, dit is gedaan voor de gewone gebruikers dat snel en efficiënt een ews-score willen berekenen voor de patiënt. De gebruikers kunnen zich inloggen via een user-id dat bestaat uit 4 cijfers. Dit user-id is gekoppeld aan een identiteit, dus ieder user heeft zijn eigen user-id. Zodra je bent ingelogd kom je terecht op het dashboard

20 HOOFDSTUK 2. BESPREKING 14 van de applicatie waarin je alleen kan kiezen om een ews-score te laten berekenen. Figuur 2.4: screenshot verpleger/verpleegster gedeelte Bespreking dokter/administrator gedeelte Uitleg dashboard elementen patiënts Hier krijgt de administrator een lijst met alle patiënten, elk patiënt heeft zijn eigen patiënten profiel en een manier om al zijn of haar data aan te passen. De patiënten profiel geeft de informatie weer van de patiënt, hier kan je ook alle readings van een patiënt zien, met grafieken dat de evolutie van de verschillende readings laten zien. De update information page geeft u dan weer de mogelijkheid om alle readings te verwijderen maar ja kan ook kiezen om een reading apart te verwijderen.

21 HOOFDSTUK 2. BESPREKING 15 Figuur 2.5: screenshot patiënt profile Readings De readings pagina bestaat uit 3 tabs. De eerste tab is een lijst met alle patiënten, hier zal je moeten kiezen bij welke patiënt je een ews-score wilt berekenen. Eenmaal je keuze gemaakt ga je naar de 2de tab hier word je geleid om elke reading in te geven. De verschillende readings nl: hartslag, ademhaling, lichaamstemperatuur, alertheid en systolische bloeddruk worden opgevraagd. Na dat je dit allemaal hebt ingegeven wordt er een ews-score berekend.

22 HOOFDSTUK 2. BESPREKING 16 Figuur 2.6: screenshot readings summary page Messages Hier krijg je terug een lijst met alle patiënten. Elk patiënt heeft de mogelijkheid om een SBARboodschap te hebben. SBAR staat voor situation, background, assesment en recommendation. Dit is de manier dat ze communiceren in de medische sector, door dit toe te passen krijgt men meteen een volledig beeld van een patiënt.

23 HOOFDSTUK 2. BESPREKING 17 Figuur 2.7: screenshot SBAR messages 2.9 Bespreking ING Survey App Mijn Early Warning System was eigenlijk zo goed als af, dus heb ik in samenspraak met mijn bedrijfspromoter besloten om mee te werken aan een prototype van het ING survey App. Dit is een quiz dat er voor moet zorgen dat je per sessie van vragen real-time de antwoorden die de deelnemers geven kan zien. Ze vonden dat Meteor misschien wel het geschikte framework hiervoor was vooral voor het real-time gedeelte.

24 HOOFDSTUK 2. BESPREKING 18 Figuur 2.8: screenshot Test graph ING

25 Hoofdstuk3 Resultaten 3.1 Het project De opdracht van het project was het ontwerpen van een webapplicatie door gebruik te maken van HTML5/CSS3 en Javascript. In dit project moest er een manier gevonden worden om zo efficiënt mogelijk een Ews-score te bepalen voor een patiënt. Hierbij kwam ook het idee om dit te bouwen in een geheel ziekenhuis omgeving met patiënten profielen en grafieken dat een evolutie in tijd weergeven. 3.2 Doelstellingen De grote doelstellingen van het project zijn volledig afgerond. Het resultaat is een applicatie waarmee gemakkelijk en snel kan gewerkt worden om een ews-score te bepalen Doelstellingen tijdens stage ˆ onderzoek naar de meest ideale frameworks ˆ Een mobiele applicatie maken ˆ Ews-score laten berekenen ˆ medische sector omgeving creëren ˆ testing op verschillende devices ˆ Demo vooor pre-sales 19

26 HOOFDSTUK 3. RESULTATEN 20 ˆ een zo goed compatibiliteit met verschillende browsers ˆ back-end creëren Figuur 3.1: screenshot graphs

27 Hoofdstuk4 Besluit Zoals eerder in mijn resultaten al besproken zijn alle vooropgestelde doelstellingen afgerond. De webapplicatie kan gebruikt worden om een Ews-score te berekenen plus de juiste adviseringen mee te geven. Het geeft ook een overzichtelijk patiënten profiel met zich mee. SBAR communicatie is er mee in verwerkt voor een duidelijk verhaal met elk patiënt mee te geven. 4.1 Nadelen Polymer Nu dat ik doorheen mijn stage periode gebruik heb gemaakt van Polymer, zijn er mij een aantal nadelen opgevallen Compatibiliteit Vooral het compatibiliteit met verschillende browsers was een probleem, hierdoor is er heel veel tijd verloren gegaan aan zaken dat normaal gezien wel moeten werken. Chrome is de enigste browser dat in theorie geen problemen heeft met polymer, dit was in de praktijk wel niet zo. firefox kwam op de 2de plaats het had hier en daar wat kleine verschillen maar al bij al werkt de gehele applicatie zoals het werkt in chrome. Safari en internet explorer gaven mij de meeste problemen. De bovenstaande problemen hebben allemaal te maken met het webcomponents verhaal. 21

28 HOOFDSTUK 4. BESLUIT Webcomponents Wat zijn webcomponents? Eén van de laatste HTML5 features die gespicifieerd zijn voor het W3C (organisatie die standaarden voor webtalen(zoals HTML5) ontwikkelt) zijn Web Components. Volgens het W3C kunnen Web Components als volgt worden samengevat: Web Components zijn herbruikbare HTML widgets die de standaard functionaliteiten van HTML5 uitbreiden op een geavanceerde manier. Samen vormen de Web Components een krachtige combinatie waarmee ontwikkelaars hun applicaties een stuk flexibeler en efficiënter kunnen opzetten. Als we het ontwikkelen van een website vergelijken met het bouwen van een huis, dan zijn Web Components de tools van een bouwvakker en een architect. De Web Components die momenteel ontwikkeld worden bestaan uit: ˆ HTML templates: Een bibliotheek van bouwtekeneningen ˆ Custom Elements: De tools aan een gereedschapsriem van de ontwikkelaar ˆ Shadow DOM: Het cement van een website ˆ HTML imports: Prefab onderdelen van een website HTML Templates HTML Templates kunnen gezien worden als een afgeschermd stukje code van een pagina. Anders gezegd: de ladenkast vol met bouwtekeningen van een architect. Het afgeschermde stukje code heeft pas invloed op een pagina wanneer het geactiveerd wordt. Op dit moment is het zo dat er op een website bijvoorbeeld elementen zoals afbeeldingen en externe scripts geladen worden, terwijl het inladen daarvan in eerste instantie niet noodzakelijk is. Met behulp van HTML templates kan dit in de toekomst voorkomen worden, wat de snelheid van een website ten goede zal komen. Vooral bij mobiele websites zal dit een flinke impact hebben voor de totale performance. Custom Elements De gereedschapsriem van een website-ontwikkelaar is inmiddels zo vol gehangen met verschillende webtalen en bijbehorende codes, dat er dubbelingen of onnodig uitgebreide coderingen zijn ontstaan. We moeten weer terug naar de basis, naar een lichtere gereedschapsriem. Dat kan straks met Custom Elements. Custom Elements zorgen ervoor dat een website-ontwikkelaar de bestaande HTML5 code kan uitbreiden met zijn eigen elementen. Code voor het embedden van een video van Vimeo ziet er bijvoorbeeld zo uit: