Early warning systembeta.eaict.ap.be/wp-content/uploads/2015/06/...Abstract Etrinity een...

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 DamsExterne 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 temogen lopen. Ik zou graag ook de mobile unit op ctg willen bedanken voor een zeer aangenametijd en hun hulp tijdens de stage. Daarnaast wil ik mijn beide promoters bedanken: mijn internepromoter Tim Dams voor zijn begeleiding en advies tijdens mijn stageperiode. Mijn externepromoter Gert Van RIllaer voor de hulp en begeleiding tijdens mijn stage. Als laatste wil ik ooknog Kane Geens bedanken voor het mee ontwerpen van mijn poster.

Antwerpen, 12 juni 2015Youness El Lamzi

i

Abstract

Etrinity een dochterbedrijf van CTG dat zeer actief is in de medische sector, is al een bepaaldetijd bezig met een Early warning system. Een Early warning system is eigenlijk een systeemdat tot doel heeft de vitaal bedreigde patient vroegtijdig te herkennen en te behandelen op eenstandaard verpleegeenheid. Dit houd in dat je zal kijken naar de vitale tekenen van een patient:namelijk, hartslag, ademhaling, systolische bloeddruk, lichaamstemperatuur en de alertheid vaneen patient. Aan de hand van deze parameters berekent het een score voor de patient. Dezescores 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 patienten zeer snelherkennen. Dit project is uitgeschreven als een bachelor proef en aan mij toegewezen.

ii

Inhoudsopgave

Dankwoord i

Abstract ii

1 Situering 1

2 Bespreking 22.1 Bespreking verschillende technologieen . . . . . . . . . . . . . . . . . . . . . 2

2.1.1 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22.2 Nodejs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2.1 Je kent javascript al . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.3 Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.3.1 Waarom Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.4 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.4.1 Wat is mongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.5 Supersonic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.5.1 Wat is Supersonic? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.5.2 Wat is Supersonic niet? . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.6 Meteor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.6.1 Wat is MeteorJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.7 Polymer.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.7.1 Theorie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.7.2 Realiteit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.8 Bespreking Early Warning System . . . . . . . . . . . . . . . . . . . . . . . . 122.8.1 Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.8.2 Onderzoek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.8.3 Bespreking verpleger/verpleegster gedeelte . . . . . . . . . . . . . . . 132.8.4 Bespreking dokter/administrator gedeelte . . . . . . . . . . . . . . . . 14

2.9 Bespreking ING Survey App . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

iii

INHOUDSOPGAVE iv

3 Resultaten 193.1 Het project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.2 Doelstellingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.2.1 Doelstellingen tijdens stage . . . . . . . . . . . . . . . . . . . . . . . 19

4 Besluit 214.1 Nadelen Polymer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.1.1 Compatibiliteit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.1.2 Webcomponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4.2 Het gebruik van het Early Warning System . . . . . . . . . . . . . . . . . . . 264.3 Huidige problemen Early Warning System . . . . . . . . . . . . . . . . . . . . 26

4.3.1 Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264.3.2 Grootte van het project . . . . . . . . . . . . . . . . . . . . . . . . . 264.3.3 Compatibiliteit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264.3.4 User experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

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

Lijst van figuren

2.1 Schematische voorstelling van de werking van meteorjs . . . . . . . . . . . . . 52.2 Schematische voorstelling van de werking van meteorjs . . . . . . . . . . . . . 92.3 screenshot van de 1ste versie van EWS . . . . . . . . . . . . . . . . . . . . . 132.4 screenshot verpleger/verpleegster gedeelte . . . . . . . . . . . . . . . . . . . 142.5 screenshot patient profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.6 screenshot readings summary page . . . . . . . . . . . . . . . . . . . . . . . 162.7 screenshot SBAR messages . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.8 screenshot Test graph ING . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.1 screenshot graphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.1 Vimeo voorbeeld code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234.2 Custom elements voorbeeld code . . . . . . . . . . . . . . . . . . . . . . . . 234.3 Datepicker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244.4 Shadow DOM voorbeeld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

v

Hoofdstuk1Situering

Het doel van de stage was om een demo baar applicatie te maken waarmee je een ews-scorekan laten berekenen. De applicatie zou deze info op een overzichtelijke en duidelijke maniermoeten tonen zodat de verplegers en dokters op een snel en efficient manier kunnen afleidenof er iets mis is. Om een zo goed mogelijk applicatie te maken kreeg ik eerst de opdracht omverschillende opensource frameworks te onderzoeken, zodat ik een zo goed mogelijk frameworkkon kiezen om mijn applicatie te ontwikkelen. Na dit onderzoeksperiode kon de ontwikkelingvan het Early warning system van start gaan.

1

Hoofdstuk2Bespreking

2.1 Bespreking verschillende technologieen

2.1.1 AngularJS

MVC hoe het echt moet

De meeste frameworks implementeren MVC maar hierdoor moet je uw applicatie opsplitsen inMVC componenten, hierdoor moet je uw code op een ander manier gaan schrijven waardoorje alles terug kan verbinden met mekaar. Dit is eigenlijk wel wat extra werk, voor een grootproject valt dit goed mee, maar voor een klein project is dit niet aangeraden. Angular is eenMVC framework dat je ook vraagt om je applicatie op te splitsen in MVC componenten, hetverschil met andere MVC frameworks is dat angular alles zal koppelen voor u. Dit maakt hetvoor de ontwikkelaar veel makkelijker.

Filters

Filters filteren de data alvorens ze de view bereiken, dit kan voor verschillende doeleindengebruikt worden. Zoals decimale getallen, een array orde aanpassen, een array filteren aande hand van een parameter of zelfs paginering implementeren. Filters zijn ontworpen omstandalone functies te zijn zoals directives, het enige verschil is dat filters bedoelt zijn om datate transformeren.

2

HOOFDSTUK 2. BESPREKING 3

Minder code schrijven

Je moet niet uw eigen MVC pipeline schrijven. De view wordt ontwikkeld in HTML watbeknopter is. Data modellen zijn makkelijk te schrijven zonder getters of setters. Data-bindingbetekent dat je geen data in de view moet steken. Omdat directives apart is van je app-code kandit 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 aluw controllers en scopes te beheren. Omdat al uw controllers rekenen op de DI voor informatiekan je met unit testing gebruik maken van mock data waardoor je zo de gehele werking van jecontroller kan bestuderen.

Wanneer je niet moet kiezen voor angularJS

Niet alle web applicaties moeten worden ontwikkeld met angular. Bijvoorbeeld games of eenintens wiskundig programma hebben geen baat door angular te gebruiken.

2.2 Nodejs

2.2.1 Je kent javascript al

Je maakt gebruik van een client framework zoals Angular, Ember, Backbone en een REST-ful-server-side API dat JSON data heen en weer stuurt. Zelfs als je deze frameworks nog niet hebtgebruikt, zou ik het nog steeds overwegen. Als je geen node.js aan de server zijde gebruikt, benje 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 mentaleenergie maar ook efficientie.


Het is snel!

Node.js is een javascript runtime dat de V8 engine van google gebruikt. De compilatie enuitvoering van javascript door V8 is super snel, dit door het feit dat V8 javascript compileertnaar native machine code. Maar het echte magie van node.js is de event loop. De event loopis een single thread dat alle I/O operaties asynchroon uitvoert. Traditionele, I/O operatieswerken of te wel synchroon (blocking) of asynchroon dit door middel van threads die parallelstaan 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 volgtte werk gaat. Het stuurt een asynchroon taak naar de event loop samen met een callbackfunctie. Met andere woorden reading/writing naar de netwerk connectie, reading/writing naarde filesystem en reading/writing naar de databank, dit zijn allemaal taken dat vaak voorkomenin een web applicatie en deze gebeuren dan ook zeer snel in Node. Node geeft je de mogelijkheidom snel, schaalbare netwerk applicaties te ontwikkelen die gelijktijdige netwerk connectiesaankunnen met een hoog troughput.


Figuur 2.1: Schematische voorstelling van MeteorJS


Tooling

Npm is de Node.js package manager en het is zeer handig. Npm is snel en consistent. Hetspecifieren en installeren van project dependencies gebeurt vlot en snel. Het houd verschillendepackages van verschillende projecten afzonderlijk zodat je geen versie conflicten kan krijgen, jekan 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 ookgeen probleem zal geven met multi-user, real-time web applicaties zoals chat en games. Deevent-loop van node regelt al de benodigdheden voor een multi-user ervaring. De kracht vanreal-time komt van de websocket protocol. Websockets zijn two-way communicatie kanalentussen de client en de server. Dus de server kan data pushen naar de client, even simpel zoalsde client dit doet naar de server. Websockets werken via TCP waardoor ze de overhead vanhttp vermijden. Socket.io is een van de populairste websocket library.

2.3 Ionic

Wat is Ionic

Ionic is een verzameling van HTML, CSS en javascript componenten, dat de nadruk leggenop performantie en die geoptimaliseerd zijn voor de ontwikkeling van mobiele applicaties. detechnologieen dat gebruikt worden in Ionic zijn Cordova, de opensource component van dePhonegap platform, Sass en AngularJS. Het geeft je de mogelijkheid om cross-platform te gaanontwikkelen, dit betekent dus dat je uw code maar een 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 aanpassenmet 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 webbrowsers op de smartphone. Maar nu zijn er SDK’s voor de ontwikkeling van web applicaties


met meer moderne, meer performantere web views. Dit betekent dat hybrid HTML5 applicatiessneller 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 Angular2.0 en Typescript.

2.4 MongoDB

2.4.1 Wat is mongoDB

MongoDB is een opensource document-georienteerde database en is geschreven in C++. Er isgeen schema, de documenten worden in de vorm van BSON (binair JSON) opgeslagen en destructuur van deze documenten is flexibel. De database kan gemakkelijk gedistribueerd worden,de data wordt dan over meerdere computers verspreid op gedistribueerde gegevensverwerkingmogelijk te maken. MongoDB is geen relationeel databasemanagementsysteem (DBMS), er isgeen ondersteuning voor joins en voldoet ook niet aan de ACID-regels want de ondersteuningvoor transacties is beperkt. Met ACID bedoel ik het volgende:

� Atomair: de mate waarin het DBMS garandeert dat een transactie ofwel geheel wordtuigevoerd, ofwel geheel nietig is.

� Consistent: Een transactie creeert ofwel een nieuwe geldige staat of herstelt de staat dieer was (in geval van een fout of een probleem). Dit impliceert dat na de transactie alleintegriteitsregels van de database moeten gelden.

� Geısoleerd: transacties worden geısoleerd van elkaar uitgevoerd, dat wil zeggen dat trans-acties 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 financiele instellingen.Sinds ngeveer 2005 gebruiken steeds meer sociale netwerksites zoals bijvoorbeeld Facebookdatabases die niet aan de ACID-regels voldoen. Databases die niet voldoen aan de ACID-regelszijn uitstekend geschikt voor gedistribueerde gegevensverwerking als consistentie geen vereisteis.


2.5 Supersonic

2.5.1 Wat is Supersonic?

Appgyver ontwikkelaars noemen dit framework een game-changer. Het is een fork van Ionic datu niet meer zal laten twijfelen over de performantie van hybrid apps. De user-interface stijl vanSupersonic is perfect om snel en efficient complexe mobiele applicaties te ontwikkelen. Wat hetnog interessanter maakt is de look and feel van je mobiele applicatie.

een van de meest belangrijke features is de Supersonic Data feature, met een simpel javasscriptsyntax kan je communiceren met elke dataset in uw backend. het is een compleet frameworkmet een wizard voor de communicatie met een REST api naar keuze, een data browser omje backend data aan te passen en een CRUD scaffold generator. Je krijgt ook een gratisdevelopment database voor de ontwikkeling van je app. Supersonic data is ontwikkeld om zeergoed te werken in combinatie met angularJS.

Een ander voordeel is dat je Cordova/Phonegap niet meer zal moeten gebruiken, in plaatsdaarvan heeft Supersonic een verzameling van API’s dat zorgen voor de communicatie met denative mogelijkheden van uw mobiel toestel. Je kan natuurlijk ng steeds core-api’s van cordovagebruiken in combinatie met de directives van angularJS. Features zoals Facebook login en pushnotifications kan je gebruiken via Appgyver-maintained plugins. Je hebt het hele native zijdeonder controle en dat is wat ontwikkelaars graag horen. De wrapping service is ook een pluspuntje hoeft niet alleen Supersonic te gebruiken, je kan ook gebruik maken van Ionic, Famo.us enOnsenUI. Dit zijn een voor een user-interface frameworks.

Supersonic bied je ook een groot selectie aan CSS componenten(alles wat je in Ionic hebt, hebje 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 paarbeschikbaar als HTML elementen.

2.5.2 Wat is Supersonic niet?

Supersonic heeft hetzelfde probleem als Ionic en Jquery mobile. Als je niet bereid bent omzware aanpassingen te brengen op vlak van design dan lijkt je applicatie weer een kopie van alde 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 incombinatie met appgyver cloud services. je kan geen Supersonic applicatie ontwikkelen zonderdeze 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


security. Een ander nadeel is ook dat je bent verbonden aan de Apgyver services. Wat als zehun privacy policies updaten of ze worden betalend?

De volgende zijn de main features van Supersonic:

� Simpel� een 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

2.6.1 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 heeftiets weg van andere frameworks en ’libraries’, maar dan met als verschil dat het je een manierbied om een volledig applicatie van scratch op te bouwen, zelfs een business case applicatie datklaar is voor productie. Dit zonder dat je andere frameworks nodig hebt.


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 watje nodig hebt zoals coffeescript of less compiler support. Het geheel package systeem is hierinverwerkt. ’isobuild’ is een isomorphic package systeem dat je toelaat om makkelijk packages teinstalleren via Atmosphere, npm en cordova plugins.

Server

De server is een node.js applicatie met bepaalde libraries dat de communicatie tooelaat overDDP 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 demongo 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 client zijde samenvoegt. EJSONword 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 overwebsockets.

� EJSON: een extensie van JSON waardoor je meer data types kan verzenden zoals datesen binary.

Browser

Het browser gedeelte van de platform word verstuurt met zo weinig mogelijk HTML en eenbeetje javascript dat de omgeving laad. Heel veel code is opgebouwd op Jquery en underscore.jsals fundering. Servers zijn van nature synchroon, browsers en javascript zijn van natureassynchroon. De volgende libraries geeft meteor zijn reactief gedrag.

� Tracker: de hoofdketen van het reactieve front-end.


� Spacebars: een aanpassing van Handlebars, gebouwd om reactief te zijn.

� Blaze: een reactief library dat ’Tracker’ en ’Spacebars’ samenkoppeld om een live updatinguser-interface te vormen. De opbouw lijkt op AngularJS, Backbone, React en Knockoutmaar gewoon veel simpeler.

� Minimongo: een client-side mongo library.

Cordova

Het cordova gedeelte is mee verwerkt in de command line tool en de package system. Eensimpel commando zoals: ’meteor add-platform android’ geeft je al meteen een android omgevingwaarvan je vervolgens een android build van kan maken door het volgende commando: ’meteorbuild android’. Meteor maakt het zo gemakkelijk voor een ontwikkelaar om vanuit een codebaseeen 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 stilstaan bij de complexiteit dat komt kijken bij een authenticatie of oauth authorizatie. Dezepackages zijn libraries dat dit al voor u oplossen. Het is zo simpel als een functie aan te roepenmet een paar parameters.

Het feit dat je kleine delen van functionaliteit zo makkelijk kan toevoegen aan je bestaandproject 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 jewijs 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 htmlelementen terug centraal zet in web ontwikkeling. Met polymer kan je je eigen elementenontwikkelen en ze gebruiken in een polymer project. Hierdoor maak je een complex projectschaalbaar en onderhoudbaar. Het gaat allemaal over nieuwe html elementen aanmaken dat jenadien kan gebruiken in uw HTML pagina’s. Je kan ook html elementen gebruiken van anderenzonder dat je de complexiteit er achter moet begrijpen.


HTML elementen zijn dan ook de bouwstenen van het web voegt polymer er aan toe. Zewillen dan ook dat je bestaande elementen uitbreid en zo nog meer krachtige web componentenopbouwd, in plaats van markup te vervangen door ’klodders van scripts’ in hun woorden.Polymer gelooft in de browser zijn native technologieen te gebruiken in plaats van te rekenenop 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 zijntijd ver vooruit is. Polymer stelt veel eisen aan de browser dat het gebruikt. Rekenen optechnologieen dat nog midden in een process van standaardisatie zijn(door W3C). dit zijntechnologieen dat zeker standaard in browsers zullen komen, maar momenteel zijn ze er nogniet. Een oplossing hiervoor is om polyfills te gebruiken. Polyfills zijn downloadbare stukkenjavascript 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 vermijdendat we javascript libraries gaan moeten gebruiken. Dit is dus momenteel niet ideaal, maar alsde browser support volledig is dan pas kan polymer uitgroeien. Dit wil niet zeggen dat je hetniet kan gebruiken, het komt er gewoon op neer dat je je moet verwachten aan een niet al tegoede compatibiliteit van verschillende browsers en niet al te beste performantie.

Maar dit mag geen probleem veroorzaken om een goed demo te hebben voor het uiteindelijkapplicatie.

2.8 Bespreking Early Warning System

2.8.1 Inleiding

Het early warning system houdt een score bij per patient. Deze score wordt bepaald aan dehand van de verschillende readings die een gebruiker moet ingeven. Zoals ik al eerder hebvermeld 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 mijnbedrijfspromoter Gert Van Rillaer heeft ontwikkeld. Dit zag er zeer goed uit, maar dit werktenog niet met een backend, de data werd opgehaald uit een lokale datasource. Door de werkingvan de bestaande applicatie te zien, kreeg ik al meteen een goed beeld van wat ze graag zoudenzien. Ews is namelijk een ge-automatiseerd process waardoor je makkelijk een ews-score kan


laten berekenen, maar dit vond ik iets te weinig om als bachelor proef af te werken. Zo kwamhet idee om een geheel medisch sector omgeving op te bouwen waarin je dit dan koppelt meteen ews-score berekening. Dit is voor de pre-sales een zeer goed manier om de werking van eenews-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 datsnel en efficient een ews-score willen berekenen voor de patient. De gebruikers kunnen zichinloggen 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


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

patients

Hier krijgt de administrator een lijst met alle patienten, elk patient heeft zijn eigen patientenprofiel en een manier om al zijn of haar data aan te passen. De patienten profiel geeft deinformatie weer van de patient, hier kan je ook alle readings van een patient zien, met grafiekendat de evolutie van de verschillende readings laten zien. De update information page geeftu dan weer de mogelijkheid om alle readings te verwijderen maar ja kan ook kiezen om eenreading apart te verwijderen.


Figuur 2.5: screenshot patient profile

Readings

De readings pagina bestaat uit 3 tabs. De eerste tab is een lijst met alle patienten, hierzal je moeten kiezen bij welke patient je een ews-score wilt berekenen. Eenmaal je keuzegemaakt ga je naar de 2de tab hier word je geleid om elke reading in te geven. De verschillendereadings nl: hartslag, ademhaling, lichaamstemperatuur, alertheid en systolische bloeddrukworden opgevraagd. Na dat je dit allemaal hebt ingegeven wordt er een ews-score berekend.


Figuur 2.6: screenshot readings summary page

Messages

Hier krijg je terug een lijst met alle patienten. Elk patient heeft de mogelijkheid om een SBAR-boodschap 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 menmeteen een volledig beeld van een patient.


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 mijnbedrijfspromoter besloten om mee te werken aan een prototype van het ING survey App. Ditis een quiz dat er voor moet zorgen dat je per sessie van vragen real-time de antwoorden diede deelnemers geven kan zien. Ze vonden dat Meteor misschien wel het geschikte frameworkhiervoor was vooral voor het real-time gedeelte.


Figuur 2.8: screenshot Test graph ING

Hoofdstuk3Resultaten

3.1 Het project

De opdracht van het project was het ontwerpen van een webapplicatie door gebruik te makenvan HTML5/CSS3 en Javascript. In dit project moest er een manier gevonden worden om zoefficient mogelijk een Ews-score te bepalen voor een patient. Hierbij kwam ook het idee omdit te bouwen in een geheel ziekenhuis omgeving met patienten profielen en grafieken dat eenevolutie in tijd weergeven.

3.2 Doelstellingen

De grote doelstellingen van het project zijn volledig afgerond. Het resultaat is een applicatiewaarmee 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 creeren

� testing op verschillende devices

� Demo vooor pre-sales

19

HOOFDSTUK 3. RESULTATEN 20

� een zo goed compatibiliteit met verschillende browsers

� back-end creeren

Figuur 3.1: screenshot graphs

Hoofdstuk4Besluit

Zoals eerder in mijn resultaten al besproken zijn alle vooropgestelde doelstellingen afgerond. Dewebapplicatie kan gebruikt worden om een Ews-score te berekenen plus de juiste adviseringenmee te geven. Het geeft ook een overzichtelijk patienten profiel met zich mee. SBARcommunicatie is er mee in verwerkt voor een duidelijk verhaal met elk patient mee te geven.

4.1 Nadelen Polymer

Nu dat ik doorheen mijn stage periode gebruik heb gemaakt van Polymer, zijn er mij een aantalnadelen opgevallen.

4.1.1 Compatibiliteit

Vooral het compatibiliteit met verschillende browsers was een probleem, hierdoor is er heel veeltijd verloren gegaan aan zaken dat normaal gezien wel moeten werken. Chrome is de enigstebrowser 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 werktde gehele applicatie zoals het werkt in chrome. Safari en internet explorer gaven mij de meesteproblemen. De bovenstaande problemen hebben allemaal te maken met het webcomponentsverhaal.

21

HOOFDSTUK 4. BESLUIT 22

4.1.2 Webcomponents

Wat zijn webcomponents?

Een van de laatste HTML5 features die gespicifieerd zijn voor het W3C (organisatie diestandaarden voor webtalen(zoals HTML5) ontwikkelt) zijn Web Components.

Volgens het W3C kunnen Web Components als volgt worden samengevat: ”Web Componentszijn herbruikbare HTML widgets die de standaard functionaliteiten van HTML5 uitbreidenop een geavanceerde manier.”Samen vormen de Web Components een krachtige combinatiewaarmee ontwikkelaars hun applicaties een stuk flexibeler en efficienter kunnen opzetten.

Als we het ontwikkelen van een website vergelijken met het bouwen van een huis, dan zijnWeb Components de tools van een bouwvakker en een architect. De Web Components diemomenteel 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 afgeschermdestukje code heeft pas invloed op een pagina wanneer het geactiveerd wordt. Op dit momentis het zo dat er op een website bijvoorbeeld elementen zoals afbeeldingen en externe scriptsgeladen worden, terwijl het inladen daarvan in eerste instantie niet noodzakelijk is. Met behulpvan HTML templates kan dit in de toekomst voorkomen worden, wat de snelheid van eenwebsite ten goede zal komen. Vooral bij mobiele websites zal dit een flinke impact hebben voorde totale performance.

Custom Elements

De gereedschapsriem van een website-ontwikkelaar is inmiddels zo vol gehangen met verschil-lende webtalen en bijbehorende codes, dat er dubbelingen of onnodig uitgebreide coderingenzijn ontstaan. We moeten weer terug naar de basis, naar een lichtere gereedschapsriem. Datkan straks met Custom Elements.

Custom Elements zorgen ervoor dat een website-ontwikkelaar de bestaande HTML5 code kanuitbreiden met zijn eigen elementen. Code voor het embedden van een video van Vimeo ziet erbijvoorbeeld zo uit:


Figuur 4.1: Vimeo voorbeeld code

Met Custom Elements kunnen we zelf een ’video-embed’ element definieren met specifiekeeigenschappen en een standaard opmaak:

Figuur 4.2: Custom elements voorbeeld code

Shadow DOM

Alle traditionele HTML elementen kunnen we normaal gesproken opmaak geven met deprogrammeertaal CSS. Maar hoe wordt bepaald wat de standaard opmaak is van HTMLelementen 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 ermet de opmaak als je op een checkbox of radiobutton klikt?

De specificaties van het W3C beschrijven hoe de standaard elementen zich zouden moetengedragen. Browsers dienen zich te houden aan deze richtlijnen. Maar bij nieuwe ontwikkelingenkan het voorkomen dat oudere browsers de nieuwe ontwikkelingen niet ondersteunen. Metbehulp van Shadow DOM kunnen er in de toekomst ’patches’ ontwikkeld worden, die er voorzorgen dat de nieuwe ontwikkeling ook in oudere browsers zal werken.

Een van de nieuwe HTML5 elementen is (input type=”date”) waarin via een handige datepickerinterface een datum gekozen kan worden. Zie hieronder:


Figuur 4.3: Datepicker

In bovenstaande afbeelding is goed te zien dat dit element uit meerdere onderdelen bestaatterwijl de code maar slechts 1 tag is.

Met behulp van shadow DOM kan elk element wat in de ’schaduw’ ligt bekeken en aangepastworden qua opmaak en gedrag. Het grote voordeel van de Shadow DOM is dat de code dieerin zit afgeschermd is van de rest van je code. Dingen die je hierin aanpast zullen geen invloedhebben op de rest van je code. In de afbeelding hieronder is duidelijk te zien wat er in deschaduw verborgen ligt(document-fragment = Shadow DOM).


Figuur 4.4: Shadow DOM voorbeeld

HTML imports

HTML Imports is een methode waarmee het mogelijk is om (externe) blokken HTML op eenwebsite in te laden. Deze blokken kunnen bijvoorbeeld een aantal Custom Elements bevatten.Een van de grootste voordelen is dat deze blokken herbruikt kunnen worden op verschillendeplaatsen maar ook op verschillende websites. Je kunt het vergelijken met de onderdelen van eenprefab woning. Met behulp van bestaande onderdelen kan er op een snelle manier een nieuwewebsite in elkaar gezet worden, zonder dat deze volledig uit maatwerk hoeft te bestaan, maarwel een maatwerk dat uitstraling heeft.

Toekomst

Net zoals vroeger de termen HTML5 en CSS3 nieuw waren, is nu de term Web Componentsnieuw. Veel mensen waren destijds sceptisch, maar het is nu de nieuwe standaard voor ophet web geworden. Ik verwacht dat dit ook zal gaan met Web Components. Wanneerontwikkelaars deze nieuwe features gaan gebruiken en ermee zullen gaan experimenteren, dan zalde ontwikkeling op het web ook sneller gaan. Daarnaast verwacht ik dat er een grote communityzal ontstaan met herbruikbare Web Components. Met het gebruik van deze Web Componentszal er netter en beter geprogrammeerd kunnen worden en wordt het makkelijker om elementente hergebruiken. Dit zal uiteindelijk betere kwaliteit opleveren en ook de ontwikkelkosten vaneen website omlaag kunnen brengen.

Momenteel hebben nog niet alle browsers deze standaard ingebouwd. Google Chrome is hierinvoorloper ten opzichte van andere browsers.


4.2 Het gebruik van het Early Warning System

Momenteel zal mijn project vooral gebruikt worden om potentiele klanten te overtuigen omvoor CTG te kiezen voor de ontwikkeling van hun eigen Early Warning System. Elk ziekenhuisis sinds 2014 wetgevelijk verplicht om een Early Warning System in te voeren. Het is danook logisch dat ze dit niet schriftelijk willen doen maar een ge-automatiseerd proces van willenmaken.

4.3 Huidige problemen Early Warning System

Mijn project is zo goed mogelijk afgewerkt, toch zijn er bepaalde punten die ik nog eens wilaanhalen 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. Ditbijvoorbeeld valt hard op wanneer men mijn applicatie zou willen gebruiken op een ouderetablet. Het gehele applicatie zal wel werken, maar de snelheid varieert waardoor men geengoede user experience zal ondervinden.

4.3.2 Grootte van het project

ondanks het gebruik van performance-based packages zoals vulcanize blijft de laadtijd van mijnapplicatie toch wel wat seconden innemen.

Vulcanize is een build tool dat al de HTML imports die je gebruikt in een file steekt zodat jeeen 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 User experience

Early Warning system is simpel en efficient je word geleid door de app dat je via toast berichtenextra informatie meegeeft mocht er iets niet duidelijk genoeg zijn. Toch vind ik dat het nogverder kan zeker met de technologie dat nu momenteel ter beschikking is. Je kan via bleutoothwerken 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 erecht een goede samenwerking met een klant komt, zal dit misschien de vereiste zijn. Momenteelwerkt Early Warning system met manueel input van de verschillende readings.

BijlageAAppendix 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-op-het-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 systembeta.eaict.ap.be/wp-content/uploads/2015/06/...Abstract Etrinity een...

Documents

Transcript of Early warning systembeta.eaict.ap.be/wp-content/uploads/2015/06/...Abstract Etrinity een...