Early warning system

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 2014-2015

Interne promotor: Tim Dams Externe promotor: Gert Van Rillaer

Versie: 12 juni 2015

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

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

Inhoudsopgave

Dankwoord

i

Abstract

ii

1 Situering

1

2 Bespreking 2.1 Bespreking verschillende technologieën . . . . . . 2.1.1 AngularJS . . . . . . . . . . . . . . . . . 2.2 Nodejs . . . . . . . . . . . . . . . . . . . . . . . 2.2.1 Je kent javascript al . . . . . . . . . . . . 2.3 Ionic . . . . . . . . . . . . . . . . . . . . . . . . 2.3.1 Waarom Ionic . . . . . . . . . . . . . . . 2.4 MongoDB . . . . . . . . . . . . . . . . . . . . . 2.4.1 Wat is mongoDB . . . . . . . . . . . . . 2.5 Supersonic . . . . . . . . . . . . . . . . . . . . . 2.5.1 Wat is Supersonic? . . . . . . . . . . . . . 2.5.2 Wat is Supersonic niet? . . . . . . . . . . 2.6 Meteor . . . . . . . . . . . . . . . . . . . . . . . 2.6.1 Wat is MeteorJS . . . . . . . . . . . . . . 2.7 Polymer.js . . . . . . . . . . . . . . . . . . . . . 2.7.1 Theorie . . . . . . . . . . . . . . . . . . . 2.7.2 Realiteit . . . . . . . . . . . . . . . . . . 2.8 Bespreking Early Warning System . . . . . . . . . 2.8.1 Inleiding . . . . . . . . . . . . . . . . . . 2.8.2 Onderzoek . . . . . . . . . . . . . . . . . 2.8.3 Bespreking verpleger/verpleegster gedeelte 2.8.4 Bespreking dokter/administrator gedeelte . 2.9 Bespreking ING Survey App . . . . . . . . . . . .

iii

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

2 2 2 3 3 6 6 7 7 8 8 8 9 9 11 11 12 12 12 12 13 14 17

INHOUDSOPGAVE

iv

3 Resultaten 3.1 Het project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2 Doelstellingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2.1 Doelstellingen tijdens stage . . . . . . . . . . . . . . . . . . . . . . .

19 19 19 19

4 Besluit 4.1 Nadelen Polymer . . . . . . . . . . . . . . 4.1.1 Compatibiliteit . . . . . . . . . . . 4.1.2 Webcomponents . . . . . . . . . . 4.2 Het gebruik van het Early Warning System 4.3 Huidige problemen Early Warning System . 4.3.1 Performance . . . . . . . . . . . . 4.3.2 Grootte van het project . . . . . . 4.3.3 Compatibiliteit . . . . . . . . . . . 4.3.4 User experience . . . . . . . . . .

. . . . . . . . .

21 21 21 22 26 26 26 26 26 27

A Appendix 1 A.1 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A.2 Referenties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28 28 28

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

Lijst van figuren

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8

Schematische voorstelling van de werking van Schematische voorstelling van de werking van 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 . . . . . . . . . .

. . . . . . . .

5 9 13 14 15 16 17 18

3.1

screenshot graphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

4.1 4.2 4.3 4.4

Vimeo voorbeeld code . . . . . . Custom elements voorbeeld code Datepicker . . . . . . . . . . . . Shadow DOM voorbeeld . . . . .

23 23 24 25

. . . .

. . . .

v

. . . .

. . . .

. . . .

. . . .

meteorjs meteorjs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . .

Hoofdstuk

1

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

Hoofdstuk

2

Bespreking 2.1 2.1.1

Bespreking verschillende technologie¨ en 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

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 2.2.1

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.


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.


Figuur 2.1: Schematische voorstelling van MeteorJS

5


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.

2.3.1

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


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 2.4.1

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.


2.5 2.5.1

8

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.

2.5.2

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


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 2.6.1

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.


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): een protocol voor het verzenden van data over websockets. 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.


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.

2.7.1

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.


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.

2.7.2

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 2.8.1

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.

2.8.2

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


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

2.8.3

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


14

van de applicatie waarin je alleen kan kiezen om een ews-score te laten berekenen.

Figuur 2.4: screenshot verpleger/verpleegster gedeelte

2.8.4

Bespreking dokter/administrator gedeelte

Uitleg dashboard elementen pati¨ ents 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.


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.


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.


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.


Figuur 2.8: screenshot Test graph ING

18

Hoofdstuk

3

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.

3.2.1

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

HOOFDSTUK 3. RESULTATEN een zo goed compatibiliteit met verschillende browsers back-end creëren

Figuur 3.1: screenshot graphs

20

Hoofdstuk

4

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.

4.1.1

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

HOOFDSTUK 4. BESLUIT

4.1.2

22

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:


23

Figuur 4.1: Vimeo voorbeeld code Met Custom Elements kunnen we zelf een ’video-embed’ element definiëren met specifieke eigenschappen en een standaard opmaak:

Figuur 4.2: Custom elements voorbeeld code Shadow DOM Alle traditionele HTML elementen kunnen we normaal gesproken opmaak geven met de programmeertaal CSS. Maar hoe wordt bepaald wat de standaard opmaak is van HTML elementen zonder onze eigen CSS? Denk hierbij aan bijvoorbeeld een button of een input (tekstveld) element. Hetzelfde geldt voor het gedrag van bepaalde elementen; wat gebeurt er met de opmaak als je op een checkbox of radiobutton klikt? De specificaties van het W3C beschrijven hoe de standaard elementen zich zouden moeten gedragen. Browsers dienen zich te houden aan deze richtlijnen. Maar bij nieuwe ontwikkelingen kan het voorkomen dat oudere browsers de nieuwe ontwikkelingen niet ondersteunen. Met behulp van Shadow DOM kunnen er in de toekomst ’patches’ ontwikkeld worden, die er voor zorgen dat de nieuwe ontwikkeling ook in oudere browsers zal werken. Eén van de nieuwe HTML5 elementen is (input type=”date”) waarin via een handige datepicker interface een datum gekozen kan worden. Zie hieronder:


24

Figuur 4.3: Datepicker In bovenstaande afbeelding is goed te zien dat dit element uit meerdere onderdelen bestaat terwijl de code maar slechts 1 tag is. Met behulp van shadow DOM kan elk element wat in de ’schaduw’ ligt bekeken en aangepast worden qua opmaak en gedrag. Het grote voordeel van de Shadow DOM is dat de code die erin zit afgeschermd is van de rest van je code. Dingen die je hierin aanpast zullen geen invloed hebben op de rest van je code. In de afbeelding hieronder is duidelijk te zien wat er in de schaduw verborgen ligt(document-fragment = Shadow DOM).


25

Figuur 4.4: Shadow DOM voorbeeld HTML imports HTML Imports is een methode waarmee het mogelijk is om (externe) blokken HTML op een website in te laden. Deze blokken kunnen bijvoorbeeld een aantal Custom Elements bevatten. Eén van de grootste voordelen is dat deze blokken herbruikt kunnen worden op verschillende plaatsen maar ook op verschillende websites. Je kunt het vergelijken met de onderdelen van een prefab woning. Met behulp van bestaande onderdelen kan er op een snelle manier een nieuwe website in elkaar gezet worden, zonder dat deze volledig uit maatwerk hoeft te bestaan, maar wel een maatwerk dat uitstraling heeft. Toekomst Net zoals vroeger de termen HTML5 en CSS3 nieuw waren, is nu de term Web Components nieuw. Veel mensen waren destijds sceptisch, maar het is nu dé nieuwe standaard voor op het web geworden. Ik verwacht dat dit ook zal gaan met Web Components. Wanneer ontwikkelaars deze nieuwe features gaan gebruiken en ermee zullen gaan experimenteren, dan zal de ontwikkeling op het web ook sneller gaan. Daarnaast verwacht ik dat er een grote community zal ontstaan met herbruikbare Web Components. Met het gebruik van deze Web Components zal er netter en beter geprogrammeerd kunnen worden en wordt het makkelijker om elementen te hergebruiken. Dit zal uiteindelijk betere kwaliteit opleveren en ook de ontwikkelkosten van een website omlaag kunnen brengen. Momenteel hebben nog niet alle browsers deze standaard ingebouwd. Google Chrome is hierin voorloper ten opzichte van andere browsers.


4.2

26

Het gebruik van het Early Warning System

Momenteel zal mijn project vooral gebruikt worden om potentiële klanten te overtuigen om voor CTG te kiezen voor de ontwikkeling van hun eigen Early Warning System. Elk ziekenhuis is sinds 2014 wetgevelijk verplicht om een Early Warning System in te voeren. Het is dan ook logisch dat ze dit niet schriftelijk willen doen maar een ge-automatiseerd proces van willen maken.

4.3

Huidige problemen Early Warning System

Mijn project is zo goed mogelijk afgewerkt, toch zijn er bepaalde punten die ik nog eens wil aanhalen waarvan ik vind dat ze beter kunnen. Performance grootte van het project compatibiliteit User experience

4.3.1

Performance

Performantie van mijn project kan zeer hard verschillen van de devices dat je gebruikt. Dit bijvoorbeeld valt hard op wanneer men mijn applicatie zou willen gebruiken op een oudere tablet. Het gehele applicatie zal wel werken, maar de snelheid varieert waardoor men geen goede user experience zal ondervinden.

4.3.2

Grootte van het project

ondanks het gebruik van performance-based packages zoals vulcanize blijft de laadtijd van mijn applicatie toch wel wat seconden innemen. Vulcanize is een build tool dat al de HTML imports die je gebruikt in één file steekt zodat je een grote vermindering hebt in network requests.

4.3.3

Compatibiliteit

Zoals eerder al vermeld is de compatibiliteit van de verschillende browsers niet ideaal.


4.3.4

27

User experience

Early Warning system is simpel en efficiënt je word geleid door de app dat je via toast berichten extra informatie meegeeft mocht er iets niet duidelijk genoeg zijn. Toch vind ik dat het nog verder kan zeker met de technologie dat nu momenteel ter beschikking is. Je kan via bleutooth werken zodat alle informatie van de monitors, automatisch verwerkt wordt met de applicatie. Dit is iets dat ik zeker in gebruik zie, maar het is een project dat nog in test fase is. Zodra er echt een goede samenwerking met een klant komt, zal dit misschien de vereiste zijn. Momenteel werkt Early Warning system met manueel input van de verschillende readings.

Bijlage

A

Appendix 1 A.1

Bibliografie

1. differential polymer/meteor demo https://github.com/Differential/polymer-demo 2. Meteor JS https://www.meteor.com/ 3. Polymer Js https://www.polymer-project.org 4. Atmosphere https://atmospherejs.com/ 5. Discover Meteor https://www.discovermeteor.com/ 6. Pluralsight http://www.pluralsight.com/ 7. Tom Coleman and Sacha Greif, Discover Meteor Building Real-Time Javascript Web Apps 8. David Turnbull, Your First Meteor Application, A complete beginners guide to Meteor.js 9. Frederik Dietz, AngularJS Succinctly 10. Agus Kurniawan, Node.js Succinctly 11. Agus Kurniawan, MongoDB Succinctly 12. U2U, Client-side web development with HTML5 and javascript

A.2

Referenties

1. http://www.appletips.nl/zelf-ios-apps-ontwikkelen/ 2. http://blog.teamtreehouse.com/ionic-reigniting-native-vs-html5-debate 28

BIJLAGE A. APPENDIX 1

29

3. http://www.burst-digital.com/nl/artikelen/web-components-een-nieuwe-verschuiving-ophet-web/ 4. http://joshowens.me/what-is-meteor-js/ 5. http://www.toptal.com/front-end/polymer-js-the-future-of-web-application-development 6. http://www.sitepoint.com/10-reasons-use-angularjs/ 7. http://nl.wikipedia.org/wiki/MongoDB 8. http://nl.wikipedia.org/wiki/ACID 9. http://www.gajotres.net/best-html5-mobile-app-frameworks-supersonic/ 10. http://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js

Early warning system

Recommend Documents