RenalClick : Sistema per a l'autogestió de la malaltia...
Transcript of RenalClick : Sistema per a l'autogestió de la malaltia...
Sistema per a l’autogestió
de la malaltia renal crònica
Memòria del Treball Final de Grau
Grau de Multimèdia
en l’àrea de Desenvolupament d’Aplicacions Interactives
Autor: Roger Sales López
Consultor: Kenneth Capseta Nieto
Professor: Carlos Casado Martínez
16 de juny del 2015
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
2
Grau de Multimèdia Universitat Oberta de Catalunya
Crèdits i copyright
El contingut d’aquest document es troba sota una llicència Creative Commons by-nc-sa. Aquesta llicència
comporta les següents condicions:
- Reconeixement: en qualsevol explotació de l’obra autoritzada per la llicència farà falta reconèixer-
ne l’autoria.
- No comercial: l’explotació de l’obra queda limitada a usos no comercials.
- Compartir igual: l’explotació autoritzada inclou la creació d’obres derivades sempre que
mantinguin la mateixa llicència en ser divulgades.
La plataforma desenvolupada és una idea original d’un grup d’infermeria del Servei de Nefrologia de
l’Hospital de Sabadell: la Laura Picazo, la Carme Grau i la Raquel Garcia. La Unitat d’Innovació Parc Taulí,
a qui van acudir les infermeres per donar viabilitat a la idea, va acabar de donar forma al projecte amb
la participació activa de l’autor d’aquesta memòria.
Considerant el marc regulador de la innovació de la Corporació Sanitària Parc Taulí, la propietat
intel·lectual pertany al grup d’infermeria del Servei de Nefrologia, i la propietat industrial del producte
desenvolupat (dret d’explotació) està reservat a la pròpia institució.
Llicències de llibreries i plugins emprats
- JQuery Mobile: llicència MIT
- Phonegap: llicència Apache
- jqPlot: llicència MIT i GPL
- Charts.js: llicència MIT
- DataTables: llicència MIT
Imatges iconogràfiques de les aplicacions
- Flaticon (amb autoria de Freepik): llicència Creative Commons 3.0 By-SA
Totes aquestes llicències anteriors permeten fer un ús lliure de les aplicacions desenvolupades, amb les
atribucions que corresponguin en cada cas.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
3
Grau de Multimèdia Universitat Oberta de Catalunya
L’esforç, la il·lusió, l’esperança, el fracàs, l’èxit. Tot el
que m’hagi de donar la vida, ho comparteixo amb tu,
mare.
Fa poc més d’un any que ja no ets amb mi, però allà
on siguis, et dedico aquest treball, perquè també hi ha
una part teva.
Sempre viuràs en mi.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
4
Grau de Multimèdia Universitat Oberta de Catalunya
Abstract
Un 7% de la població pateix una malaltia renal crònica (MRC), fet que els porta a seguir un tractament
renal substitutiu, l’eficàcia del qual depèn, en major part, del bon seguiment que facin de les pautes
marcades pel seu metge. Aquest projecte tracta el desenvolupament i la implementació d’un sistema que
permeti a aquests pacients tenir una participació activa en la gestió de la seva malaltia i, per tant, millorar
l’adherència al tractament. Alhora, es crea una plataforma a través de la qual el professional sanitari pot
seguir l’estat del pacient en tot moment, evitant en molts casos les consultes presencials.
La idea del projecte sorgeix dels problemes detectats per un grup d’infermeria de diàlisi de l’Hospital de
Sabadell, amb el recolzament del qual s’ha pogut concebre i desenvolupar el sistema. El resultat són dos
sistemes paral·lels: una aplicació mòbil i una plataforma web, la primera d’ús per als pacients i la segona
d’ús per als professionals sanitaris.
Davant el repte de crear una aplicació mòbil sense conèixer els llenguatges nadius dels sistemes operatius
d’aquests dispositius (Android, iOS, entre d’altres), s’opta per l’ús de llenguatges més familiars, com són
HTML, Javascript i CSS, per a crear una aplicació híbrida que després serà traduïda a cada llenguatge
concret per mitjà de l’API de Phonegap Build. Aquesta aplicació podrà ser descarregada per un pacient
amb MRC amb la finalitat de millorar l’autogestió de la malaltia, per mitjà de registres de constants i de
signes i símptomes. D’altra banda, la plataforma web permetrà als centres sanitaris tenir un control dels
seus pacients i, en base als registres fets per aquests, valorar de manera més acurada la seva evolució i
proposar tractaments més personalitzats.
A l’espera de realitzar les primeres validacions clíniques amb usuaris reals, el sistema, batejat sota el nom
de Renalclick, té un objectiu molt clar que espera assolir: millorar la qualitat de vida dels pacients afectats
per MRC.
Paraules clau: salut, malaltia renal crònica, multimèdia, Phonegap, JQuery, Javascript, PHP, aplicació
mòbil, Android, disseny adaptatiu
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
5
Grau de Multimèdia Universitat Oberta de Catalunya
Agraïments
Gràcies a l’equip de professionals de la Unitat d’Innovació Parc Taulí i de les infermeres de diàlisi de
l’Hospital de Sabadell pel suport proporcionat durant aquests tres mesos i per ajudar-me a validar el
desenvolupament en les seves diferents etapes. Ara estem més a prop d’aconseguir que Renalclick sigui
una realitat.
Gràcies a la UOC per proporcionar-me un camí amb el grau de multimèdia, amb el qual espero fer un
punt i apart en la meva vida.
Gràcies a l’equip de professors i consultors de la universitat, per guiar-me i per les paraules d’ànim en
moments en què, sense saber-ho, em feien falta.
Però, sobretot, gràcies a la meva parella, que ho és tot per mi i que per mi ho ha donat tot. No tinc
paraules per agrair-li els sacrificis que ha fet perquè jo pugui arribar fins aquí, avui, quan escric les últimes
paraules d’aquesta memòria, però no és amb paraules que es demostren les coses, sinó amb fets, i el fet
és que tinc la resta de la vida per demostrar-li el meu agraïment.
I a la meva família: pare, germà, avis, nebots, cunyats i cunyades, gràcies, només per ser-hi, que ja és dir.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
6
Grau de Multimèdia Universitat Oberta de Catalunya
Notacions i convencions
Títol de capítol: Droid Serif, 22pt,
blanc, fons verd fosc
Títol de subapartat: Droid Sans, 20pt, gris
Text per a blocs d’informació: Droid Sans, 16pt, gris
Text normal: Droid Sans, 10pt, negre
Text ressaltat: Droid Sans, 10pt, negreta, negre
Text per al peu de les imatges o figures: Droid Sans, 9pt, centrat, verd fosc
Text que transcriu part del codi desenvolupat: Courier New, 10pt, blau
Text per a les notes a peu de pàgina: Droid Sans, 8pt, gris
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
7
Grau de Multimèdia Universitat Oberta de Catalunya
Índex de capítols
1. Introducció......................................................................................................................................................................... 9 1.1. Motivacions personals ............................................................................................................................................... 9 1.2. Justificació del projecte ........................................................................................................................................... 10
2. Definició del projecte ...................................................................................................................................................... 12 2.1. Cicle de vida del sistema ......................................................................................................................................... 12 2.2. Funcionalitats de l’aplicació mòbil .......................................................................................................................... 13 2.3. Funcionalitats de la plataforma web ...................................................................................................................... 14
3. Objectius .......................................................................................................................................................................... 15 3.1. Tasques per assolir els objectius ............................................................................................................................ 15 3.2. Consideracions als objectius marcats .................................................................................................................... 16
4. Escenari actual ................................................................................................................................................................ 17 5. Continguts ........................................................................................................................................................................ 19
5.1. Plataforma web ........................................................................................................................................................ 19 5.2. Aplicació mòbil ......................................................................................................................................................... 20
6. Metodologia ..................................................................................................................................................................... 23 7. Arquitectura del sistema ................................................................................................................................................. 24
7.1. Client ......................................................................................................................................................................... 24 7.2. Servidor .................................................................................................................................................................... 24 7.3. Base de dades .......................................................................................................................................................... 25
8. Plataforma de desenvolupament ................................................................................................................................... 27 8.1. Maquinari ................................................................................................................................................................. 27 8.2. Programari ............................................................................................................................................................... 27 8.3. Altres......................................................................................................................................................................... 28
9. Planificació ....................................................................................................................................................................... 29 9.1. Diagrama de Gantt .................................................................................................................................................. 30
10. Procés de desenvolupament ........................................................................................................................................ 31 11. Solucions de disseny ..................................................................................................................................................... 37
11.1. Identitat corporativa ............................................................................................................................................. 37 11.2. Prototips ................................................................................................................................................................. 40
12. APIs utilitzades .............................................................................................................................................................. 47 13. Perfils d’usuari ............................................................................................................................................................... 49 14. Usabilitat ........................................................................................................................................................................ 50 15. Seguretat ........................................................................................................................................................................ 52 16. Versions del sistema ..................................................................................................................................................... 53 17. Requisits i instruccions d’instal·lació ............................................................................................................................ 54 18. Bugs ................................................................................................................................................................................ 55 19. Anàlisi de mercat ........................................................................................................................................................... 57 20. Projecció a futur ............................................................................................................................................................ 60 21. Conclusions .................................................................................................................................................................... 61 Annex 1: Lliurables del projecte ......................................................................................................................................... 62 Annex 2: Codi font ............................................................................................................................................................... 63 Annex 3: Llibreries externes emprades ............................................................................................................................. 79 Annex 4: Captures de pantalla............................................................................................................................................ 81 Annex 5: Business plan ....................................................................................................................................................... 87 Annex 6: Glossari ................................................................................................................................................................. 89 Annex 7: Bibliografia ........................................................................................................................................................... 90
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
8
Grau de Multimèdia Universitat Oberta de Catalunya
Índex de figures
Figura 1: Cicle de la gestió d'usuaris en les dues plataformes del sistema. .................................................................... 13
Figura 2: Taules que formen part de la base de dades i relacions que s’estableixen entre elles. ................................. 25
Figura 3: Arquitectura client-servidor del sistema desenvolupat. ................................................................................... 26
Figura 4: Diagrama de Gantt del projecte, amb la planificació temporal de fases i tasques. ........................................ 30
WIREFRAMES
Figura 5: Pantalla d'inici de sessió (app). ........................................................................................................................... 40
Figura 6: Pantalla de benvinguda per completar el perfil, abans d'utilitzar l'aplicació (app)......................................... 40
Figura 7: Pantalla principal amb els accessos als diferents mòduls (app)....................................................................... 41
Figura 8: Pantalla del mòdul de control de líquids (registre de constants en l’hemodiàlisi), per a un pacient que mai ha realitzat un registre (app). ............................................................................................................................................. 41
Figura 9: Pantalla de registre de líquids, amb les variables del pes i de la diüresi residual (app). ................................ 42
Figura 10: Pantalla de control de líquids per a un pacient que ja ha realitzat un registre previ i per tant pot visualitzar les dades introduïdes de manera gràfica (app). ................................................................................................................ 42
Figura 11: Pantalla d’inici d’un centre administrador, amb la llista de pacients i l’accés a donar d’alta a nous (web). 43
Figura 12: Pantalla per a donar d’alta a un nou pacient, que si és amb tractament d’hemodiàlisi deixarà veure els dos camps per al pes sec i el pes màxim (web). ....................................................................................................................... 44
Figura 13: Vista d’un pacient concret, amb les tres opcions bàsiques de menú: el registre de constants fet amb l’app, el registre de signes i símptomes i les alertes amb alarmes enviades segons el registre efectuat (web). .................... 45
Figura 14: Vista de l’opció de signes i símptomes, dins de la vista d’un pacient, organitzada per anys, mesos i dies, de manera molt semblant a l’app (web). ................................................................................................................................ 46
CAPTURES DE PANTALLA REALS
Figura 15: Pantalla d’inici de sessió (app). ......................................................................................................................... 81
Figura 16: Principals accessos del pacient amb tractament d’hemodiàlisi (app). ........................................................... 81
Figura 17: Registre del pes del pacient amb tractament d’hemodiàlisi (app). ................................................................ 82
Figura 18: Registre de la diüresi residual del pacient amb tractament d’hemodiàlisi (app). ......................................... 82
Figura 19: Principals accessos del pacient amb trasplantament renal (app). ................................................................. 82
Figura 20: Registre de la pressió arterial del pacient amb trasplantament renal (app). ................................................ 82
Figura 21: Principals accessos del pacient amb tractament de diàlisi peritoneal (app). ................................................ 83
Figura 22: Registre de pes, pressió arterial, ultrafiltració i diüresi del pacient amb diàlisi peritoneal (app). ............... 83
Figura 23: Llista de signes i símptomes en diàlisi peritoneal, que varien segons el tractament (app). ......................... 83
Figura 24: Registre de signes i símptomes del pacient d’hemodiàlisi (app). ................................................................... 83
Figura 25: Pantalla d'inici, amb la llista de pacients actius (web). ................................................................................... 84
Figura 26: Vista d'un pacient d'hemodiàlisi amb els registres del pes (web). ................................................................. 84
Figura 27: Vista dels signes i símptomes del mateix pacient (web). ................................................................................ 85
Figura 28: Vista de les alarmes generades pel pacient (web). .......................................................................................... 85
Figura 29: Vista dels registres de tensió arterial d'un pacient trasplantat (web). ........................................................... 86
Figura 30: Vista del registre de líquids d'un pacient amb diàlisi peritoneal (web).......................................................... 86
Figura 31: Pàgina d'alta de pacient, amb les validacions Ajax executant-se (web). ........................................................ 87
Figura 32: Pàgina de perfil del centre (web). ..................................................................................................................... 87
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
9
Grau de Multimèdia Universitat Oberta de Catalunya
1. Introducció
El propòsit d’aquest Treball Final de Grau és desenvolupar, a mode de prototip, una aplicació mòbil que
ajudi els pacients amb malaltia renal crònica (MRC) a comprometre’s amb el tractament i guanyar
confiança en la gestió de la seva malaltia. Així mateix, s’inclou en aquest projecte el desenvolupament
d’una plataforma web per mitjà de la qual el professional sanitari podrà fer un seguiment dels seus
pacients en base a la utilització que aquests facin de l’aplicació mòbil. D’aquesta manera, el projecte porta
per títol “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”, i s’emmarca en l’àrea de
“Desenvolupament d’aplicacions interactives”, dins del grau de Multimèdia de la Universitat Oberta de
Catalunya.
1.1. Motivacions personals
Des de fa més de set anys, treballo a la Unitat d’Innovació Parc Taulí (UDIPT). La unitat depèn
orgànicament de la Fundació Parc Taulí, entitat que gestiona tota la recerca, la docència i la innovació
que sorgeix de la Corporació Sanitària Parc Taulí (CSPT), institució de la ciutat de Sabadell que està
conformada per vuit centres (Hospital de Sabadell, UDIAT Centre de Diagnòstic, Albada Centre
Sociosanitari, Sabadell Gent Gran – Centre de Serveis, Atenció Primària Parc Taulí, Salut Mental Parc Taulí,
Atenció a la Dependència i Fundació Parc Taulí) que donen cobertura en assistència sanitària a tota la
població de referència.
La UDIPT, creada l’any 2006, ha consolidat durant aquest temps un procés d’innovació que li permet
donar suport als professionals de la CSPT “perquè les seves idees arribin al mercat, transformant el
coneixement científic, mèdic i assistencial en benefici de la salut i la societat i generant oportunitats de
negoci. En aquest sentit es promou la cultura d'innovació, amb l'objectiu d'incorporar-la en l'activitat
diària assistencial; la col·laboració amb les empreses, universitats i altres institucions i la participació en
projectes d'R+D+I. Totes aquestes accions contribueixen a incrementar la participació dels sectors públic
i privat en el procés d'innovació tecnològica contribuint així al desenvolupament del territori.”1
Durant el 2014, la unitat va rebre la visita de l’equip d’infermeria nefrològica de l’Hospital de Sabadell,
amb una idea dispersa però un objectiu molt concret: augmentar la qualitat de vida dels seus pacients
en tractament renal substitutiu. La feina va començar per la creació d’un espai web, dins del web
corporatiu de l’hospital, sota el nom de “Guia per al pacient amb insuficiència renal”2, amb la finalitat de
ser un espai de consulta tant per malalts com per cuidadors.
1 http://www.tauli.cat/fundacio/unitat-innovacio 2 http://www.tauli.cat/hospital/pacient-renal
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
10
Grau de Multimèdia Universitat Oberta de Catalunya
Les inquietuds de l’equip d’infermeria, però, anaven més enllà d’una guia purament informativa. Van
parlar d’una aplicació mòbil en la mateixa temàtica de la malaltia renal crònica i conjuntament es va
definir el projecte que es desenvoluparà en aquest treball.
La UDIPT acostuma a portar projectes d’innovació en l’àrea de dispositius mèdics o tecnologies de la
informació i comunicació, sobretot programaris de gestió. La dificultat d’aquest projecte de nefrologia és
l’elevat pressupost que demanen les empreses desenvolupadores d’aplicacions mòbils, en ser, a més, un
sector en auge en l’àmbit de la salut. A banda de l’anterior, la propietat intel·lectual i industrial del
producte resultant quedava en entredit, ja que l’única possibilitat de finançament provenia de les
farmacèutiques i aquestes, difícilment, cedirien la propietat perquè la nostra institució en fes l’explotació
comercial.
Sent així, vaig proposar als meus responsables aprofitar aquest projecte com a treball final del grau de
multimèdia. La intenció seria desenvolupar el sistema a mode de prototip, que donés una mica més de
visió de conjunt a les empreses interessades i aconseguíssim disminuir els costos de desenvolupament
si veien que teníem molta feina avançada.
Des d’un punt de vista poètic, si es vol mirar així, el projecte també es presentava com l’oportunitat
perfecta per acabar la meva formació professional, ja que, tot i haver estudiat anteriorment Disseny
Gràfic i actualment el grau de Multimèdia, la meva vida universitària va començar com a estudiant de la
Llicenciatura de Medicina durant tres anys; ara, doncs, podia aglutinar les dues disciplines en un únic
projecte que tindria en compte tècniques del disseny i la programació, sota uns criteris (quina informació
mostro i quan la mostro) purament assistencials i mèdics.
1.2. Justificació del projecte
7 de cada 100 persones pateixen una MRC, és a dir, un dels dos
ronyons, o els dos, no funcionen com haurien de fer-ho i això
els porta a seguir un tractament substitutiu: hemodiàlisi, diàlisi
peritoneal o trasplantament renal. En el cas de l’hemodiàlisi, la
sang del pacient passa per una màquina, que fa la funció del
ronyó i neteja la sang abans de tornar-la cap al pacient. En la
diàlisi peritoneal, la neteja es fa utilitzant la membrana
peritoneal, a través de la qual s’infon el líquid de diàlisi, que romandrà en l’espai abdominal durant unes
hores per captar les toxines i l’aigua sobrants del cos. Per als pacients trasplantats, la solució passa per
substituir el ronyó malalt per un de sa provinent d’un donant.
Tant l'hemodiàlisi com la diàlisi peritoneal són tractaments substitutius renals de molt llarga duració que
fa que els pacients es desmotivin, en haver de seguir unes pautes dietètiques molt estrictes que, en cas
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
11
Grau de Multimèdia Universitat Oberta de Catalunya
d’ignorar-se, podrien provocar-los conseqüències greus per a la salut. Els pacients trasplantats, d’altra
banda, han de tenir una gran adherència al pla terapèutic, a fi d’allargar la vida del nou ronyó i mantenir
una bona qualitat de vida.
El personal d’infermeria del Servei de Nefrologia de l’Hospital de Sabadell creu demostrat que un bon
control de la malaltia renal, amb un seguiment de la medicació i un estil de vida saludable, pot millorar
la qualitat de vida del pacient en tractament substitutiu renal i també la del seu entorn. El fet que els
pacients renals estiguin lligats de forma contínua a l’hospital no facilita que prenguin consciència de la
importància de la seva participació en la gestió de la malaltia. Així, donar-los la possibilitat d’implicar-se
en les decisions terapèutiques pot comportar una major adherència i un compromís major amb
l’autocura.
Internet s’ha convertit en la major font d’informació sanitària, tant per a pacients com per a professionals.
A Espanya, la taxa d’utilització actual de serveis e-health és una de les mes altes d’Europa, de manera que
Internet i les aplicacions mòbils són la principal via d’accés a la informació mèdica.
Actualment, els pacients amb MRC i els seus familiars demanden informació mitjançant la via telefònica
o de manera presencial a les consultes mèdiques. No existeix cap aplicació mòbil, ni cap plataforma
virtual, que englobi la gestió del pacient en tractament substitutiu renal de manera integral.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
12
Grau de Multimèdia Universitat Oberta de Catalunya
2. Definició del projecte
El projecte “Renalclick: sistema per a l’autogestió de la malaltia renal crònica” inclou el desenvolupament
de dos sistemes paral·lels connectats sota una mateixa base de dades. La finalitat és dissenyar i
programar les dues interfícies tenint en compte qui les utilitzarà (un professional sanitari en el cas de la
plataforma web, un pacient en el cas de l’aplicació mòbil), prioritzant en tots dos casos la usabilitat dels
sistemes i sota un mateix criteri gràfic.
2.1. Cicle de vida del sistema
Tot el sistema cobra vida en el moment que l’administrador principal (Superadministrador) dóna d’alta
un centre sanitari (Administrador), per exemple l’Hospital de Sabadell, ja que serà el primer en realitzar
les validacions futures. L’usuari i contrasenya proporcionats serviran per entrar a la plataforma web, de
manera que tot el personal assistencial relacionat amb el pacient renal hi tindrà accés, sempre que la
institució així ho consideri.
Un cop dins de la plataforma, l’Administrador tindrà la capacitat de donar d’alta usuaris que es trobaran
sempre dins de la seva xarxa. Aquests usuaris correspondran als pacients renals de l’Hospital de Sabadell
i les dades d’usuari i contrasenya seran proporcionats al pacient en el moment de donar-lo d’alta, per
exemple durant la consulta mèdica.
L’usuari serà informat de l’existència de l’aplicació mòbil que s’haurà de baixar de la tenda d’aplicacions
que correspongui (Play Store, Apple Store, etc.), i a la qual podrà accedir amb l’usuari i contrasenya
lliurats. Sense aquestes dades, tot i que l’aplicació estarà disponible per tal que qualsevol persona amb
un telèfon intel·ligent la pugui descarregar, no es podrà avançar més enllà de la primera pantalla.
Un cop descarregada l’aplicació i creat el perfil bàsic, que inclou el tipus de tractament substitutiu que
segueix el pacient (hemodiàlisi, diàlisi peritoneal i trasplantament renal), l’usuari tindrà accés a un menú
que li permetrà gestionar la seva malaltia, millorant la seva adherència al tractament i, en conseqüència,
la seva qualitat de vida, a la vegada que el centre administrador podrà monitorar el pacient i fer un
seguiment de la seva evolució per mitjà de la plataforma web.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
13
Grau de Multimèdia Universitat Oberta de Catalunya
Figura 1: Cicle de la gestió d'usuaris en les dues plataformes del sistema.
2.2. Funcionalitats de l’aplicació mòbil
Tots els pacients amb un usuari i contrasenya que hagin descarregat l’aplicació al seu mòbil podran:
- Controlar i registrar el seu pes actual i la diüresi residual (en el cas de pacients amb tractament
d’hemodiàlisi).
- Controlar i registrar la tensió arterial i la diüresi (en el cas de pacients trasplantats).
- Controlar i registrar el pes, la tensió arterial, la ultrafiltració i la diüresi (en el cas de pacients amb
diàlisi peritoneal).
- Registrar signes i símptomes.
- Gestionar la medicació, segons el tractament que segueixin.
- Rebre alarmes intel·ligents per mitjà de notificacions programades per aparèixer quan es
presentin certes combinacions durant el registre als quatre mòduls anteriors.
- Consultar pautes d’alimentació.
- Consultar vídeos d’exemple per practicar exercici físic ajustat a la seva malaltia.
- Accedir a una galeria de música i sons relaxants d’ajuda en moments on la seva ansietat acostuma
a pujar (sessions d’hemodiàlisi, col·locació del catèter en diàlisi peritoneal, etc.).
- Registrar i consultar les cites mèdiques programades en el futur.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
14
Grau de Multimèdia Universitat Oberta de Catalunya
- Consultar part de la guia per al pacient amb insuficiència renal, inclosa actualment en el web de
l’Hospital de Sabadell.
- Disposar d’un accés ràpid als telèfons principals de consulta amb el seu equip mèdic de
nefrologia.
2.3. Funcionalitats de la plataforma web
L’equip mèdic de nefrologia d’un centre que disposi de permisos com a administrador d’una xarxa en el
sistema podrà:
- Donar d’alta al seus pacients, proporcionant-los un usuari i contrasenya per a l’aplicació mòbil.
- Obtenir una relació de tots els pacients que actualment disposen d’usuari i contrasenya.
- Visualitzar, per a cada pacient, la seva evolució quant a:
Paràmetres introduïts pels pacients, segons el tipus de tractament que segueixen.
Signes i símptomes.
Gestió de la medicació.
Historial d’alarmes.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
15
Grau de Multimèdia Universitat Oberta de Catalunya
3. Objectius
A l’apartat anterior, s’ha definit el projecte tal i com seria en el cas hipotètic d’estar completament
desenvolupat. En el marc del treball de final de grau, però, el projecte resulta massa complex com per
ser desenvolupat per una única persona en el marge aproximat de tres mesos que dura el semestre.
Per tant, es detallen a continuació els objectius marcats i que el sistema haurà de complir en el moment
de l’entrega final:
- Pel cas de la plataforma web:
Obligatòriament: capacitat per part de l’administrador de donar d’alta a nous usuaris
(pacients).
Obligatòriament: visualització dels mòduls desenvolupats per a l’aplicació mòbil, que
permetin fer un seguiment de la interacció del pacient amb l’aplicació.
Si els mòduls desenvolupats ho permeten, visualització de l’historial d’alarmes
intel·ligents.
- Pel cas de l’aplicació mòbil:
Obligatòriament: capacitat per part dels usuaris (pacients) de registrar-se amb les dades
d’usuari lliurades per part de l’administrador.
Obligatòriament: implementació del mòdul de registre i control del pes i de la diüresi
residual (hemodiàlisi), del mòdul de registre i control de la tensió arterial i diüresi
(trasplantament renal), i del mòdul de registre i control del pes, tensió arterial,
ultrafiltració i diüresi (diàlisi peritoneal), que permeti als pacients fer un seguiment de la
seva malaltia de manera clara i senzilla, segons les pautes marcades per la pròpia
aplicació.
Opcionalment, i depenent de la disponibilitat del temps, implementació del mòdul de
registre de signes i símptomes i del mòdul de gestió de la medicació.
Si els mòduls anteriors ho permeten, implementació d’alguna alarma intel·ligent.
3.1. Tasques per assolir els objectius
Els objectius anteriors defineixen el que el sistema serà capaç de fer quan el semestre finalitzi. Les
següents tasques, que més endavant es recolliran a l’apartat de la planificació, faran possible que el
sistema es doti d’aquestes capacitats.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
16
Grau de Multimèdia Universitat Oberta de Catalunya
En concret:
- Fer un estudi del funcionament del framework Phonegap, per a la implementació de l’aplicació
mòbil, i d’altres frameworks que puguin ser útils per a construir tot el sistema.
- Crear un model de dades que permeti la gestió d’usuaris, seguint el model de la figura 1.
- Reservar un servidor web i de base de dades per allotjar el sistema.
- Dissenyar la identitat corporativa del sistema: naming, marca i identitat visual de l’aplicació mòbil
i de la plataforma web.
- Dissenyar els prototips de baixa i alta fidelitat.
- Dissenyar i implementar, com a mínim, el mòdul de registre de constants a l’aplicació mòbil per
als tres tipus de tractaments substitutius renals.
- Dissenyar i implementar, a la plataforma web, la visualització dels mòduls desenvolupats per a
l’aplicació mòbil.
3.2. Consideracions als objectius marcats
Durant la creació del model de dades, és important tenir en compte no només els objectius de cara al
treball d’aquesta assignatura, sinó pensant en el futur del sistema. Així, tot i que el desenvolupament
doni per implementar un únic mòdul de registre i control de constants, les taules i les relacions creades
a la base de dades han d’estar fetes de manera que permetin que el sistema sigui escalable i pugui créixer
per incorporar tots els mòduls restants.
Això és també vàlid per al sistema d’arxius que es creïn en el servidor. Tot i haver de respondre per
obtenir les dades d’un únic mòdul (en el cas que només es pugui desenvolupar un), l’escalabilitat també
ha d’estar present en aquest sentit.
Aquesta memòria, a no ser que s’indiqui expressament el contrari, considerarà només aquells objectius
que són obligatoris que el sistema compleixi en el moment de l’entrega.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
17
Grau de Multimèdia Universitat Oberta de Catalunya
4. Escenari actual
Sobre l’ús de dispositius mòbils
A Espanya, l’ús de telèfons intel·ligents (dispositius mòbils amb connexió a Internet) està creixent de
manera significativa. Només l’any 2013, hem passat d’un 59% a un 80% d’usuaris que utilitza aquests
dispositius, i està quasi al mateix nivell que l’ús dels ordinadors (portàtils o de sobretaula).
Avui dia, els dos sistemes operatius més usats pels usuaris són iOS i Android:
Situació actual del mercat de dispositius mòbils i tauletes, quant al sistema operatiu que empren3
Ambdós sistemes posseeixen les dues tendes d’aplicacions més grans del mercat. El framework
Phonegap, que s’utilitzarà en aquest projecte, permet la compilació i exportació de l’aplicació en aquests
dos sistemes operatius, però per a l’abast del projecte només s’exportarà a Android, principalment
perquè resulta més econòmic. Si el pressupost del projecte ho permet, es crearà més endavant un ID de
desenvolupador d’iOS per poder compilar aplicacions per a aquest sistema operatiu.
Sobre les apps en salut
Actualment existeixen 97.000 aplicacions de salut al mercat, sent la tercera categoria que més ha crescut
per darrere de jocs i utilitats. La previsió de creixement encara és més sorprenent, situant-se en un 23%
3 Dades proporcionades per > Net Market Share
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
18
Grau de Multimèdia Universitat Oberta de Catalunya
en els propers cinc anys. Tenint en compte que l’any 2013 les aplicacions en salut van generar uns
ingressos de 3.300 milions d’euros, la consultora PriceWaterHouseCoopers ha estimat que aquesta xifra
pujarà fins als 16.600 milions d’euros l’any 20174.
Tot i tenir un mercat tan potencial, el sector sanitari i les farmacèutiques han actuat amb cautela a l’hora
d’endinsar-se en aquest entorn a causa de la por que els infon incomplir la pobra normativa que els
vincula5:
- En el món de les apps, les barreres legals no estan delimitades clarament i les normes aplicables
són desconegudes per la majoria.
- Segons el Real Decret 1591/2009 del 16 d’octubre, si una app o programa informàtic rep la
qualificació de producte sanitari, haurà de sotmetre’s sota la vigilància de l’Agència Espanyola de
Medicaments i Productes Sanitaris.
- La llei de protecció de dades també és molt estricte sobre el tractament de les dades personals
(més encara si es tracta de dades sanitàries) i la protecció de les mateixes.
- En parlar d’aplicacions en salut, cal ser especialment curós amb els continguts, ja que una mala
gestió dels mateixos pot provocar efectes nocius per a la salut de les persones que les utilitzen i
repercutir en la reputació de l’empresa titular.
A pesar de l’anterior, actualment hi ha fórmules per aconseguir una homologació de les aplicacions
mòbils sanitàries, que depenen en bona part de la ubicació territorial i de les expectatives o ambicions
del projecte:
- El Marcatge CE és el que aporta més valor, ja que eleva l’aplicació a la categoria de dispositiu
mèdic, però també té un cost econòmic considerable.
- El Col·legi Oficial de Metges de Barcelona (COMB) compta amb la seva pròpia homologació, en
base a uns requisits que li són propis.
- Andalusia també compta amb una homologació pròpia (AppSaludable), d’aplicació a tot el
territori i que està considerada com la més avançada en aquest camp, per ser pionera i per la
seva fiabilitat.
- A Catalunya, TicSalut està promovent la creació de la seva pròpia homologació (iSalut), però
actualment està en una fase molt primitiva i la fiabilitat és fluixa.
4 El Derecho, 6 de maig del 2014: “Los Riesgos jurídicos de las apps de salud”, per Eloi Font Mante i Ramón Cifuentes Ventura. 5 Ecija, 23 d’abril de 2014: “mHealth: Salud en tu móvil”, per Teresa Pereyra.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
19
Grau de Multimèdia Universitat Oberta de Catalunya
5. Continguts
El conjunt del sistema està format per dues plataformes diferenciades, amb usuaris i funcionalitats
diferents, però interconnectades sota una mateixa base de dades.
5.1. Plataforma web
La plataforma web és la interfície dissenyada per al seguiment i control del pacient per part del personal
sanitari del centre administrador.
Pantalla d’inici
En iniciar sessió, el web proporciona una llista de tots els pacients en seguiment actualment (és a dir, que
han descarregat l’aplicació mòbil) i, per mitjà d’enllaços, s’entra a cadascun dels perfils per obtenir un
detall del seu perfil (edat, tractament, etc.) i de les constants registrades, que variarà segons el tractament
que segueixen.
A la part superior, es disposa d’una opció per donar d’alta a nous pacients que desitgin adherir-se al
sistema. En el moment de la consulta mèdica, si el pacient accepta, el professional dóna d’alta a un nou
usuari i és redirigit a una pantalla on introduirà:
- Un nom d’usuari, basat en el nom i cognoms del pacient. Es fan comprovacions asíncrones per
assegurar que aquell nom d’usuari no estigui ja en ús.
- Una contrasenya, acordada amb el pacient perquè li sigui fàcil de recordar però que compleixi
certs criteris de seguretat.
- Un correu electrònic, a fi d’enviar-li les dades d’accés, tot i que seria recomanable que es pogués
emportar un paper amb les dades impreses, per assegurar que no s’extraviïn.
- El pes sec i pes màxim del pacient (en cas de pacients amb hemodiàlisi), una dada que només el
professional podrà introduir i modificar, segons l’evolució del pacient.
Pantalla de constants del pacient amb hemodiàlisi
- Es visualitzarà una gràfica de línia, que mostrarà l’evolució del pes del pacient dels últims 7 dies
(per defecte).
- El marge temporal es podrà modificar manualment.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
20
Grau de Multimèdia Universitat Oberta de Catalunya
- No veurà la diüresi residual, ja que es considera una dada que només aporta valor al propi pacient
per a l’autogestió de la malaltia, però no al professional que en fa el seguiment.
- Hi haurà un botó per modificar el pes sec i màxim del pacient, si així ho considera segons
l’evolució.
Pantalla de constants del pacient trasplantat
- Gràfica de línia d’evolució de la tensió arterial.
- En situacions normals, el pacient es prendrà la tensió un cop al més, de manera que es mostraran
els últims 6 mesos quan hi hagi prou marge de temps.
- Valor de la diüresi per a cada una de les preses.
Pantalla de constants del pacient amb diàlisi peritoneal
- Taula que mostra els valors del pes, la tensió arterial, la ultrafiltració i la diüresi dels últims 7 dies.
- Les preses són diàries, pel qual cada dia hi haurà valors de les quatre constants.
5.2. Aplicació mòbil
L’aplicació mòbil és d’ús exclusiu per al pacient o cuidador, depenent de la situació personal de cada
usuari, i està dissenyada per potenciar l’adherència al tractament de manera ràpida i intuïtiva, fent que
la corba d’aprenentatge sigui pràcticament nul·la.
Pantalla d’inici de sessió
Quan el pacient accedeix per primera vegada, després de descarregar-la de la tenda d’aplicacions que
pertoqui segons el sistema operatiu del seu telèfon mòbil, introdueix el nom d’usuari i la contrasenya
proporcionats en el moment de la consulta mèdica. A continuació és redirigit a una pantalla on pot
completar el seu perfil (edat, sexe i tipus de tractament). Aquest perfil sempre podrà ser editat
posteriorment, en cas de necessitat.
Pantalla del menú principal
Un cop completat el perfil, l’usuari és redirigit a la pantalla de menú, on apareix el bloc principal de
registre de constants, que varia en funció del tractament que segueix el pacient. A mida que es vagin
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
21
Grau de Multimèdia Universitat Oberta de Catalunya
desenvolupant nous mòduls en el futur (registre de signes i símptomes, medicació, etc.), aquests aniran
apareixent a l’aplicació per mitjà d’actualitzacions periòdiques, de manera que aquesta pantalla estarà
formada per un menú d’accessos als diferents mòduls.
En les pantalles de registre de constants següents, sempre es visualitzaran enllaços sobre com prendre-
les o mesurar-les, segons el cas concret de cada tractament.
Pantalla de registre de constants: hemodiàlisi
Si l’usuari no ha registrat mai el pes ni la diüresi, un botó el convida a fer el seu primer registre:
- A la pantalla de registre, es diferencien clarament les dues constants a registrar: el pes i la diüresi
residual.
Si l’usuari ja havia registrat el seu pes i la diüresi amb anterioritat, podrà veure:
- Una gràfica representada per una figura d’un home, que s’omplirà d’aigua, des dels peus fins al
cap, segons la proximitat de l’últim pes registrat respecte al seu pes màxim. El color de l’aigua
també avisarà del perill en l’augment de pes (verd pes correcte, taronja pes elevat, vermell pes
massa proper al màxim). Un missatge de text, a sota de la figura de l’home, donarà les indicacions
pertinents sobre l’evolució i recomanacions breus.
- Una gràfica de línia per mostrar l’evolució de la diüresi residual en els últims 7 dies.
- Un botó per fer un nou registre del pes i de la diüresi residual.
El registre ha de ser diari, pel qual des del moment del primer registre, l’aplicació enviarà una notificació
a l’usuari cada 24 hores.
Pantalla de registre de constants: trasplantament renal
Si el pacient no ha registrat mai la tensió arterial, un botó el convida a fer el seu primer registre:
- A la pantalla de registre, es diferencia clarament per introduir el valor de tensió sistòlica i
diastòlica.
- Només es donarà la opció de comptabilitzar la diüresi en cas que la tensió arterial sigui elevada.
Si el pacient ja havia registrat la tensió arterial amb anterioritat, podrà veure:
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
22
Grau de Multimèdia Universitat Oberta de Catalunya
- Una gràfica de línies, on es podrà veure l’evolució dels dos valors de tensió en els últims 6 mesos,
o els mesos que hagin passat si encara no s’arriba als 6.
- Un missatge de text, a sota de la gràfica, donarà les indicacions pertinents sobre l’evolució i
recomanacions breus.
- Un botó per fer un nou registre de la tensió.
El registre és mensual, pel qual des del moment del primer registre, l’aplicació enviarà una notificació a
l’usuari cada 30 dies.
Pantalla de registre de constants: diàlisi peritoneal
Si el pacient no ha registrat mai el pes, la tensió, la ultrafiltració i la diüresi, un botó el convida a fer el seu
primer registre:
- A la pantalla de registre, es diferencia clarament per introduir els quatre valors.
- Quant al pes, independentment de cada pacient, estarà programat per donar una alarma en cas
de pujar en més d’1,5kg.
Si el pacient ja havia registrat els quatre valors amb anterioritat, podrà veure:
- Taula amb l’evolució dels quatre valors en els últims 7 dies (o els dies que hagi fet el registre si
no arriba a 7).
- Un missatge de text, a sota de la taula, donarà les indicacions pertinents sobre l’evolució i
recomanacions breus.
- Un botó per fer un nou registre de les quatre constants.
El registre és diari, pel qual des del moment del primer registre, l’aplicació enviarà una notificació a
l’usuari cada 24 hores.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
23
Grau de Multimèdia Universitat Oberta de Catalunya
6. Metodologia
Bona part de la càrrega de feina d’aquest projecte inclou codificació, tant per la part de l’aplicació mòbil
com de la plataforma web. Així, es pot agafar de referència el model en cascada per definir les etapes
de desenvolupament del programari, entenent que cada etapa no podrà començar fins que l’anterior no
hagi finalitzat.
Concretament, les etapes del model en cascada són:
- Anàlisi i definició de requeriments, en base a l’estudi conjunt amb els usuaris.
- Disseny del sistema i del programari, que inclou també els requeriments a nivell de maquinari,
així com el model de dades que acaba definint l’arquitectura completa del sistema.
- Implementació, creada a partir de la codificació d’unitats de programes que hauran de ser
funcionals per sí mateixes.
- Integració i prova del sistema, on cada unitat de programa s’inclou en el sistema complet i es
verifica que compleix amb els requeriments.
- Funcionament i manteniment, amb el sistema funcionant de manera pràctica en un entorn real,
que ajuda a detectar errors invisibles fins al moment i millorar les unitats individuals.
En base a aquest model en cascada, que revisa al final de cada etapa si el projecte pot avançar cap a la
següent etapa, es pot combinar amb la planificació de les PACS de l’assignatura, de manera que el
projecte s’organitza en quatre fases principals:
- Fase 1, que acabarà amb l’entrega de la primera PAC el 10 de març, i que es basarà en l’anàlisi i
definició de requeriments.
- Fase 2, que acabarà amb l’entrega de la segona PAC el 8 d’abril, i on es treballarà el disseny del
sistema i del programari, així com de la identitat corporativa.
- Fase 3, que acabarà amb l’entrega de la tercera PAC el 10 de maig, en la qual, després de treballar
els prototips de baixa i alta fidelitat, es començarà amb la implementació de l’aplicació mòbil.
- Fase 4, que acabarà amb l’entrega de la quarta PAC el 16 de juny, que inclourà la implementació
de la plataforma web, així com la integració i verificació del sistema i la resta de tasques previstes
per a aquesta entrega, com ara el vídeo de presentació.
Com que la memòria és una part molt important del treball final, el procés de documentació es farà a
mida que es vagi avançant en el projecte, així com la correcció de les versions anteriors després de
l’entrega i dels comentaris del consultor de l’assignatura.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
24
Grau de Multimèdia Universitat Oberta de Catalunya
7. Arquitectura del sistema
El sistema desenvolupat segueix l’arquitectura bàsica de client – servidor web – base de dades, amb la
peculiaritat que, per la part del client, hi ha dos accessos diferenciats al sistema que depenen dels poders
subministrats: administrador d’una xarxa o usuari final.
7.1. Client
Si el client és un administrador de xarxa, haurà de disposar d’un navegador web actualitzat que llegeixi
les etiquetes HTML5, com ara <canvas> o els diferents tipus de <input> (date, email, entre d’altres), així
com el llenguatge Javascript en què es basa bona part de la representació gràfica de les dades. A banda
de l’anterior, qualsevol ordinador o dispositiu connectat a Internet serà suficient per accedir a la
plataforma web del sistema. Les accions que els usuaris podran fer estan molt definides i facilitades pels
diferents botons presents a la interfície, pel qual no es requereixen coneixements previs de programació
o disseny web per poder utilitzar el sistema.
Si el client és un pacient, haurà de disposar d’un telèfon intel·ligent o tauleta amb un sistema operatiu
modern que tingui la seva corresponent tenda d’aplicacions. En el moment de finalitzar el projecte, un
pacient que vulgui utilitzar l’aplicació haurà de tenir un dispositiu mòbil amb sistema operatiu Android,
així com un nom d’usuari i una contrasenya que li seran proporcionats pel centre administrador.
7.2. Servidor
El servidor web allotja tots els arxius PHP que contenen els serveis webs que permeten el funcionament
tant de l’aplicació mòbil com de la plataforma web, enviant peticions i respostes gràcies a Ajax en el
primer cas i pàgines HTML en el segon. Són servidors de lloguer Linux, pel qual corren amb Apache, amb
PHP versió 5.4, i també compta amb MySQL versió 5.5.40.
Més dades sobre aquest servidor:
- Espai total d’emmagatzematge de 4GB.
- Tràfic de dades màxim al mes de 90GB.
- 100 comptes de correu.
- Còpies de seguretat incrementals diàries, de manera automàtica.
- Possibilitat de crear il·limitades bases de dades.
- phpMyAdmin i phpPgMyAdmin per a gestionar les bases de dades.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
25
Grau de Multimèdia Universitat Oberta de Catalunya
7.3. Base de dades
La base de dades allotja la lògica de dades del sistema, emmagatzemant les dels usuaris administradors
i usuaris pacients, així com les dades que aquests últims envien a través de l’aplicació mòbil. El motor
emprat és MySQL en la seva versió 5.5.40.
Figura 2: Taules que formen part de la base de dades i relacions que s’estableixen entre elles.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
26
Grau de Multimèdia Universitat Oberta de Catalunya
Amb tot l’anterior, es pot representar l’arquitectura client-servidor del sistema per mitjà del següent
esquema, on es pot veure que la diferència entre l’aplicació mòbil i la plataforma web és que la primera
fa ús d’Ajax per a JQuery per enviar peticions als serveis web PHP i rebre’n resposta, i que per tant aquests
serveis són diferents en ambdós casos, ja que estan dissenyats per a rebre peticions i enviar respostes
específiques per a cada plataforma.
Figura 3: Arquitectura client-servidor del sistema desenvolupat.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
27
Grau de Multimèdia Universitat Oberta de Catalunya
8. Plataforma de desenvolupament
8.1. Maquinari
Tot el projecte s’ha desenvolupat amb un ordinador de sobretaula Medion, equipat amb:
- Processador Pentium® Dual-Core 2.5GHz.
- Memòria RAM de 8GB.
- Targeta gràfica NVIDIA GeForce G210.
- Targeta de xarxa D-Link DGE-528T Gigabit Ethernet Adapter, per a una connexió de fibra òptica
de 100Mbps de baixada i 10Mbps de pujada.
No és possible conèixer el maquinari del costat de servidor, ja que és de lloguer i les dades que ofereix
el proveïdor tenen a veure amb les capacitats de xarxa, però no amb els components de maquinari. No
obstant, és un dels proveïdors més fiables quant a la velocitat de transferència de dades i a la seguretat
i control d’aquestes, pel qual és d’esperar que els equips disposats compleixin amb les necessitats del
sistema que es desenvoluparà.
Val a dir que, en el moment de fer la compra, van sorgir dubtes entre un sistema d’allotjament compartit
o un servidor dedicat. El proveïdor sí que proporciona, en aquest cas, dades concretes del maquinari dels
equips6, però l’elevat preu feia pensar que ara per ara, en una etapa de desenvolupament i primeres
proves pilot, seria suficient disposar d’un allotjament compartit.
8.2. Programari
A continuació, es llista el programari emprat des de l’equip de treball local i la seva finalitat:
- Windows 7 Professional SP1: sistema operatiu que permet fer córrer tota la resta de programes.
- Adobe Dreamweaver CS6: programari per a l’edició de codi HTML, CSS, PHP i Javascript, així com
per a l’organització dels fitxers tant en el treball en vista local com remota. També disposa d’un
marc de treball per a treballar amb JQuery Mobile.
- WampServer64: en la seva versió 2.5, compta amb Apache 2.4.9, PHP 5.5.12 i MySQL 5.6.17, i
permet utilitzar l’ordinador com un servidor web de prova, agilitzant el procés de programació i
en definitiva permetent construir un sistema estable abans de ser pujat al servidor web remot.
6 https://ca.dinahosting.com/dedicats
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
28
Grau de Multimèdia Universitat Oberta de Catalunya
- Freehand MX: programa d’edició de gràfics vectorials, molt anterior a l’Illustrator d’Adobe però
que personalment resulta més àgil per a vectors simples com ara la iconografia de les interfícies,
que és la finalitat per la qual s’ha treballat amb aquest programari de Macromedia.
- Adobe Photoshop CS6: l’editor d’imatges per excel·lència, que també s’ha utilitzat per a la creació
d’alguns elements de la identitat corporativa.
- Adobe Illustrator CS6: programari per a la creació i edició d’imatges vectorials, que s’ha utilitzat
per a l’exportació de les imatges i icones de l’aplicació en format .svg, que permet visualitzar-les
nítidament, independentment de la resolució de la pantalla.
- Microsoft Word 2010: essencialment, per a l’edició d’aquesta memòria.
Sobre el programari del servidor, compta amb sistema operatiu Linux, PHP versió 5.4 i MySQL 5.5.
8.3. Altres
A banda del maquinari i programari anterior, cal esmenar la web-app Moqups7, creada per Evercoder
Software SRL, un grup de sis enginyers romanesos que permet fer prototips de baixa fidelitat d’interfícies
interactives, tot des de qualsevol navegador web que sigui compatible amb HTML5, ja que aprofita les
característiques i avantatges d’aquesta nova versió del llenguatge.
Creació d’una de les pantalles de la plataforma web amb Moqups.
7 https://moqups.com
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
29
Grau de Multimèdia Universitat Oberta de Catalunya
9. Planificació
La planificació principal del projecte ve marcada per l’entrega de les PACS en la planificació general de
l’assignatura:
- PAC 1: entrega màxima el 10 de març.
- PAC 2: entrega màxima el 8 d’abril.
- PAC 3: entrega màxima el 10 de maig.
- Entrega final: entrega màxima el 16 de juny.
Aquesta planificació, combinada amb el model en cascada per al desenvolupament de programari,
defineix les fites principals del projecte i servirà de base, alhora, per estructurar tota la càrrega de treball
en fases i tasques:
Fase 1: Anàlisi i definició de requeriments
- Documentació de la memòria: introducció, descripció, objectius, metodologia i planificació.
Fase 2: Disseny del sistema i del maquinari
- Disposició del servidor web i BBDD.
- Estudi de Phonegap.
- Creació del model de dades.
- Disseny de la identitat corporativa: naming, marca i identitat visual.
- Documentació de la memòria.
- Revisió i entrega.
Fase 3: Implementació
- Disseny dels prototips de baixa i alta fidelitat.
- Implementació de mòduls a l’aplicació mòbil.
- Documentació de la memòria.
- Revisió i entrega.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
30
Grau de Multimèdia Universitat Oberta de Catalunya
Fase final: Implementació, integració i verificació
- Implementació de mòduls a la plataforma web.
Vistes.
Gestió d’usuaris.
- Prova pilot.
- Documentació final de la memòria.
- Presentació audiovisual.
- Autoinforme d’avaluació.
- Revisió i entrega.
9.1. Diagrama de Gantt
Les fases anteriors es veuen reflectides en el següent Diagrama de Gantt, on també queda fixada la
planificació temporal de totes les tasques que inclouen:
Figura 4: Diagrama de Gantt del projecte, amb la planificació temporal de fases i tasques.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
31
Grau de Multimèdia Universitat Oberta de Catalunya
10. Procés de desenvolupament
Anàlisi de continguts
El primer pas per a desenvolupar el sistema ha estat acordar, juntament amb l’equip d’infermeria de
diàlisi, quines són les especificacions mèdiques del sistema. És a dir:
- Pel mòdul de constants, quines constants ha de registrar cada pacient i en quines condicions i
com se li presenta la informació.
- Què ha de visualitzar el professional sanitari quan vegi el perfil de cada pacient, quant al mòdul
de constants.
- Quins signes i símptomes poden registrar els pacients, segons el tractament que fan, i inici de
definició de les alarmes.
En base a la informació proporcionada, un cop estudiada, s’ha pogut veure l’abast real de l’aplicació i la
idoneïtat de centrar-me, de moment, en el mòdul de constants per assegurar complir els objectius.
Anàlisi tècnica
Després de veure els requisits del sistema, s’ha fet un estudi de la tecnologia necessària que permeti fer
realitat el projecte. S’ha convingut que, pel cas de l’aplicació mòbil, es farà ús del framework Phonegap,
que permet compilar aplicacions híbrides a partir d’HTML, CSS i Javascript. Altres frameworks i llibreries
utilitzades:
- JQuery Mobile, que facilita el desenvolupament de l’aplicació en aportar mòduls predissenyats
(formularis, maquetació, animacions, validacions i canvis de pantalla del costat del client, etc.).
- Charts.js, una extensió que dibuixa gràfics de tot tipus a partir de les dades passades per
paràmetre.
- JPlot, semblant a l’anterior però compatible amb JQuery Mobile.
Com que Phonegap no admet PHP, el codi Javascript de l’aplicació farà ús de serveis web (llenguatge PHP)
allotjats en el servidor i per mitjà d’Ajax per JQuery es podran retornar les dades requerides en la pàgina
concreta.
Quant a la plataforma web, es muntarà un sistema d’arxius PHP que es basarà en sessions d’usuari, a fi
de permetre que els centres administradors puguin gestionar les seves xarxes en tres senzilles pàgines:
inici de sessió, visió global de tots els pacients i vista d’un pacient en particular.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
32
Grau de Multimèdia Universitat Oberta de Catalunya
Naming i hosting
La idea del projecte parteix de l’equip d’infermeria i vaig pensar que seria just deixar que elles proposessin
un nom per al sistema, tenint en compte també que podrà ser una eina que empraran en el seu dia a dia
laboral. Després d’estudiar vàries propostes i veure’n la disponibilitat de dominis, així com la possible
semblança amb altres productes o serveis relacionats amb el camp i l’especialitat, es decideix el nom de
Renalclick. Per tant, l’aplicació mòbil portarà aquest nom i es fa la reserva dels dominis renalclick.com i
renalclick.es.
S’opta per un allotjament compartit a Dinahosting, una empresa dedicada al lloguer de servidors amb
anys d’experiència que ens donen la confiança suficient com per utilitzar-lo almenys durant l’etapa de
prova pilot, i més endavant estudiar la possibilitat d’un hosting dedicat si el pressupost i el futur del
projecte ho permeten.
Model de dades
Es crea el primer model de dades (Figura 2), pensant en la versió 0 de l’aplicació un cop lliurat aquest
projecte. Per mitjà d’aquest model, es podrà desenvolupar el mòdul de registre de constants i
implementar algun sistema de notificacions per a la presa de les mateixes. Addicionalment, es prepara
la base de dades per suportar també el desenvolupament del mòdul de registre de signes i símptomes,
depenent del temps disponible i l’estabilitat del sistema en aquesta primera versió.
Anàlisi formal
Per a qualsevol aplicació interactiva, és tan important la lògica (programació) com la vista (interfície
gràfica). A fi de tenir unes mínimes pautes per a la creació dels prototips i l’estilització CSS, s’estableixen
uns criteris d’identitat corporativa que inclouen el disseny de la marca, els colors i les tipografies.
D’aquesta manera, tant l’aplicació mòbil com la plataforma web es correspondran visualment i es farà
evident que ambdues formen part d’un mateix sistema.
Es fa també una aproximació a l’estructura de la interfície per mitjà de prototips de baixa fidelitat de
l’aplicació mòbil i la plataforma web orientades al pacient que segueix un tractament d’hemodiàlisi, que
serviran com a referència per als altres dos tractaments.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
33
Grau de Multimèdia Universitat Oberta de Catalunya
Desenvolupament de l’aplicació mòbil
La corba d’aprenentatge amb JQuery Mobile ha estat exponencial, molt lenta al principi per assegurar
que el desenvolupament posterior fos estable i no haver de rectificar criteris essencials quan el codi
implementat ja fos molt extens. El primer pas va ser baixar l’SDK8 d’Android i crear una clau vàlida per a
permetre l’exportació de l’apk 9 des de Phonegap Build.
La majoria de control de botons (canviar de pantalla, enviar registres, carregar registres) s’han realitzat
per codi Javascript i JQuery, ja que JQuery Mobile conté una bona bateria de funcions que permeten
controlar tant la càrrega de pàgines (abans de carregar-se, quan ja s’hagi carregat, quan ja s’hagi carregat
però abans d’activar tots els objectes del DOM10) com la interacció entre l’usuari i l’aplicació (en clicar, en
introduir un valor, en seleccionar ...). Durant aquesta etapa s’han realitzat revisions dels dissenys inicials,
que han experimentat canvis i actualitzacions segons les necessitats detectades en el desenvolupament.
Entre aquestes revisions, convé ressaltar:
- Modificació dels prototips de baixa fidelitat respecte a la maqueta final implementada. Hi ha
opcions que s’ha vist que no eren necessàries (com ara informar a l’usuari de la data i hora en
què es realitzava un registre, o la ubicació del botó del menú a totes les pàgines), o d’altres que
mancaven (com els missatges informatius en base als registres efectuats).
- Modificació del model de dades, amb l’addició de taules no contemplades (com la taula per a les
mesures parcials de la pressió arterial en pacients amb trasplantament renal, o les taules per a
les alarmes generades per a cadascun dels tres tipus de pacients), o modificació de columnes en
taules concretes (per exemple l’eliminació del DNI a la taula pacient, ja que no és rellevant, o
modificació del tipus a les columnes pes –de DECIMAL (4,2) a DECIMAL (4,1)- o les columnes
ultrafiltració i diüresi – de DECIMAL (4,2) a INT(4)-).
- Canvi de llibreria per a dibuixar els gràfics, de Charts.js a JPlot, ja que el primer no és compatible
amb JQuery Mobile.
Sempre sorgien idees per millorar el codi font de l’aplicació, però el temps de desenvolupament va
finalitzar amb la tercera entrega parcial del projecte i calia començar amb el desenvolupament de la
plataforma web. Tot i així, s’han pogut acomplir els següents objectius per als tres tipus de pacients:
- Implementació del mòdul de registre de constants.
- Implementació del mòdul de registre de signes i símptomes.
- Implementació d’alarmes intel·ligents, segons el registre efectuat pel pacient.
8 “Software Development Kit”, que permet desenvolupar aplicacions i executar-les des d’un emulador Android. 9 Format específic per a les aplicacions Android que estan preparades per ser instal·lades en un dispositiu mòbil. 10 “Document Object Model”, referit a l’estàndard d’accés al contingut, l’estructura o l’estil d’un document XML / HTML. Més informació: http://www.w3schools.com/dom/
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
34
Grau de Multimèdia Universitat Oberta de Catalunya
Desenvolupament de la plataforma web
Tot i estar en format web, la versió de Renalclick per al professional sanitari té més d’eina de gestió que
no de lloc web, tal i com s’entén un web avui dia. És per això que des de l’inici es va descartar emprar
qualsevol tipus d’eina de gestió de continguts, ja que caldria fer moltes modificacions d’entrada per
adaptar-lo a les necessitats concretes del projecte, i es va resoldre que la millor alternativa era començar
l’espai des de zero.
Així, s’han creat un conjunt de vistes principals a l’arrel del directori, que corresponen a les pàgines PHP
que es muntaran des del servidor i s’enviaran al client amb la informació que aquest sol·liciti:
- login.php: inici de sessió, només vàlida per a centres donats d’alta amb els permisos com a
administradors.
- principal.php: amb la vista de pacients actius (donats d’alta i que utilitzen l’aplicació mòbil) i
pacients inactius (donats d’alta però que no han entrat a l’aplicació mòbil).
- pacient.php: perfil d’un pacient concret, amb els tres blocs de registre de constants, registre de
signes i símptomes i alarmes intel·ligents generades en base als registres.
- alta.php: pàgina per donar d’alta un nou pacient, amb una informació mínima d’aquest i deixant
constància, sobretot, del nom d’usuari i la contrasenya d’inici de sessió a l’aplicació mòbil.
- perfil.php: informació del centre, amb possibilitat de modificar les dades.
Aquestes vistes estan complementades amb altres arxius PHP, inclosos per codi amb el mètode
include(“arxiu.php”), que acaben de conformar l’HTML enviat al client, com les opcions de menú o el
mòdul de registre de constants segons el tractament.
Tot i no entrar dins de les especificacions inicials, un cop el web estava prou avançat, es va veure la
necessitat que la plataforma estigués adaptada a dispositius mòbils. És una eina que principalment
s’utilitzarà des de la consulta mèdica, amb un ordinador de sobretaula, però el professional sanitari
podria intentar accedir des del seu telèfon mòbil o tauleta en un altre context. Així, es modifica la fulla
d’estils CSS per afegir media querys11 que, a banda de complir amb el disseny adaptatiu, ocultaran l’accés
a les següents funcionalitats per entendre que no són prioritàries en la interacció amb dispositius mòbils:
- Donar d’alta a pacients.
- Visualitzar i modificar el perfil del centre.
- Modificar el pes sec i pes màxim de pacients d’hemodiàlisi.
11 Consulta que pren el mitjà i una declaració de característiques que limiten els estils inclosos als dispositius que les compleixen; per exemple, declarant un ample màxim (max-width:650px). Així, quan l’ample de la finestra sigui inferior a aquest valor, tota la declaració d’estils següents afectarà al dispositiu i es sobreescriuran les declaracions anteriors, en cas d’existir.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
35
Grau de Multimèdia Universitat Oberta de Catalunya
Fruit del disseny adaptatiu, es veu la necessitat de tenir algun sistema per fer que les taules s’adaptin
també a l’ample de la finestra, en bones condicions de lectura i amb ordenació de dades. Per aquesta
raó, s’inclou el plugin “DataTables”, basat en Javascript i JQuery que permet, no només ordenar les
columnes automàticament i paginar les files, sinó que també s’adapta a tots els dispositius amagant les
columnes que no hi caben en noves files imbricades dins de la fila principal, de manera elegant i usable.
Les columnes “Tratamiento” i “Fecha alta” no hi caben, pel qual s’han disposat com a files filles per a cada una de les files principals, que només es mostren amb la columna “Nombre y apellidos”.
Pensant també en el registre de constants del pes i de la tensió arterial, que són les que fan servir les
gràfiques del plugin Chart.js, es veu que en un dispositiu mòbil no es poden recuperar 30 registres per a
cada pàgina visualitzada perquè la informació queda molt atapeïda. Per això, es configura el sistema de
manera que el número de registres recuperats queda supeditat a una variable global que variarà en
funció de l’ample del dispositiu: 30 registres en dispositius superiors a 550px, 10 registres per a la resta.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
36
Grau de Multimèdia Universitat Oberta de Catalunya
Esquerra: vista d’una pacient amb transplantament renal, en una finestra major de 550px. Dreta: mateixa vista, però en una finestra sensiblement inferior que només recupera, per tant, 10 registres per petició i que prescindeix de les dades en els eixos: clicant sobre cada punt, es visualitzen els valors de la mateixa manera que ocorre en la
vista de l’esquerra.
Amb l’experiència proporcionada pel desenvolupament de l’aplicació mòbil, es fa ús també de tecnologies
Ajax per fer peticions asíncrones amb el servidor i anar recuperant registres anteriors de constants sense
necessitat de recarregar tota la pàgina, de manera que només es redibuixa la gràfica segons els valors
recuperats. A més, amb JQuery s’implementa la visibilitat o ocultació de capes, aconseguint així que la
pàgina de la vista de pacient només s’hagi de carregar una única vegada per veure’n tot el contingut.
Tots els plugins requereixen un grau de personalització, cal llegir atentament la documentació de què
disposen i codificar només allò necessari per obtenir el resultat desitjat. Al final, però, s’ha aconseguit
que DataTables, juntament amb Charts, serveixin per al propòsit de la plataforma web de Renalclick:
mostrar, per a cada pacient, el registre de la seva interacció amb l’aplicació mòbil.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
37
Grau de Multimèdia Universitat Oberta de Catalunya
11. Solucions de disseny
El sistema s’ha batejat sota el nom de Renalclick, a petició de l’equip d’infermeres de l’Hospital de
Sabadell. Per tant, Renalclick aglutina l’aplicació mòbil i el web, i el disseny gràfic ha d’estar compartit per
ambdues plataformes.
Val a dir que JQuery Mobile és un framework que imposa solucions de disseny a les interfícies que es
van creant. Pot interpretar-se com un avantatge o com un inconvenient; pel cas que ocupa amb aquest
treball, s’ha aprofitat per centrar l’atenció en la programació de l’aplicació mòbil, ja que no s’haurà de
començar una estilització CSS des de zero.
L’aplicació mòbil i el web compartiran els elements que es descriuran en el següent subapartat d’identitat
corporativa: marca, tipografies, color i iconografia. Així mateix, s’introduiran els prototips de baixa
fidelitat per a ambdues plataformes.
11.1. Identitat corporativa
Marca
El símbol, un monograma12 format per les inicials R i C, s’utilitzarà com a element
identificador en aplicacions reduïdes, per exemple en la icona de l’aplicació mòbil.
12 Segons la RAE, el monograma s’entén com l’ “enllaç de dos o més lletres, generalment les inicials de noms i cognoms, que com a abreviatura es fa servir en segells, marques, etc.”.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
38
Grau de Multimèdia Universitat Oberta de Catalunya
Color
Color principal del sistema. Verd associat a salut, però intens i amb vida que li aporta
modernitat.
RGB (123,165,29)
Hexadecimal (#7ba51d)
Color complementari al principal (estats hover, degradats, ombres).
RGB (93,129,6)
Hexadecimal (#5d8106)
Color de fons de les plataformes, per destacar textos en caixes totalment blanques.
RGB (240,240,240)
Hexadecimal (#f0f0f0)
Tipografia
La tipografia escollida per ser mostrada tant en l’aplicació mòbil com en la plataforma web és la Roboto,
que tot i tenir una família extensa de quasi deu tipus diferents, bàsicament es farà ús de la regular, bold
i italic. La raó de l’elecció d’aquesta tipografia és per les seves línies senzilles i la seva bona llegibilitat en
mides per a telèfons intel·ligents; de fet, va ser creada per al llançament de la versió 4 d’Android, Ice
Cream Sandwich, sota una llicència Apache però liberalitzada per a la seva descàrrega gratuïta el gener
del 2012.
Roboto regular
Roboto bold
Roboto itàlic
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
39
Grau de Multimèdia Universitat Oberta de Catalunya
Iconografia
JQuery Mobile incorpora, a banda dels estils per als diferents elements HTML, un paquet d’icones en
format png i svg que es poden aplicar als botons i elements de formulari per remarcar-ne la funcionalitat.
Icones predefinides a JQuery Mobile, amb la cadena de text que cal acompanyar a l’atribut data-icon per a fer aparèixer la icona a l’element on s’aplica.
També calia, però, incorporar noves icones per representar els principals accessos de l’aplicació. Aquestes
icones s’han obtingut del web Flaticon – Free Vector Icons13, un lloc web amb infinitat d’icones vectorials
de lliure descàrrega sota una llicència Creative Commons, amb la condició d’acreditar degudament als
seus autors en un lloc visible; en el cas de l’aplicació, a l’apartat “Sobre aquesta aplicació”.
Icones per als accessos de control del pes, control de la pressió arterial, control de líquids i signes i símptomes (amb colors diferenciats respecte al verd de l’aplicació però que hi combinen), així com un vist per a accions
completades i el botó per esborrar registres.
13 http://www.flaticon.com/
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
40
Grau de Multimèdia Universitat Oberta de Catalunya
11.2. Prototips
Si bé és cert que cada tractament mostra unes opcions específiques per a cada tipus de pacient, a
continuació s’adjunten les captures dels wireframes de baixa fidelitat, tant de l’aplicació mòbil com de la
plataforma web, per al pacient que segueix un tractament d’hemodiàlisi. Per als altres dos tractaments
(diàlisi peritoneal i trasplantament renal) la interfície serà bàsicament la mateixa, canviant el nom dels
textos, les variables i els gràfics d’evolució.
Aplicació mòbil
(Esquerra) Figura 5: Pantalla d'inici de sessió (app).
(Dreta) Figura 6: Pantalla de benvinguda per completar el perfil, abans d'utilitzar l'aplicació (app).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
41
Grau de Multimèdia Universitat Oberta de Catalunya
(Esquerra) Figura 7: Pantalla principal amb els accessos als diferents mòduls (app).
(Dreta) Figura 8: Pantalla del mòdul de control de líquids (registre de constants en l’hemodiàlisi), per a un pacient que mai ha realitzat un registre (app).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
42
Grau de Multimèdia Universitat Oberta de Catalunya
(Esquerra) Figura 9: Pantalla de registre de líquids, amb les variables del pes i de la diüresi residual (app).
(Dreta) Figura 10: Pantalla de control de líquids per a un pacient que ja ha realitzat un registre previ i per tant pot visualitzar les dades introduïdes de manera gràfica (app).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
43
Grau de Multimèdia Universitat Oberta de Catalunya
Plataforma web
Figura 11: Pantalla d’inici d’un centre administrador, amb la llista de pacients i l’accés a donar d’alta a nous (web).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
44
Grau de Multimèdia Universitat Oberta de Catalunya
Figura 12: Pantalla per a donar d’alta a un nou pacient, que si és amb tractament d’hemodiàlisi deixarà veure els dos camps per al pes sec i el pes màxim (web).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
45
Grau de Multimèdia Universitat Oberta de Catalunya
Figura 13: Vista d’un pacient concret, amb les tres opcions bàsiques de menú: el registre de constants fet amb l’app, el registre de signes i símptomes i les alertes amb alarmes enviades segons el registre efectuat (web).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
46
Grau de Multimèdia Universitat Oberta de Catalunya
Figura 14: Vista de l’opció de signes i símptomes, dins de la vista d’un pacient, organitzada per anys, mesos i dies, de manera molt semblant a l’app (web).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
47
Grau de Multimèdia Universitat Oberta de Catalunya
12. APIs utilitzades
JQuery Mobile
JQuery Mobile és una llibreria basada en JQuery, que
alhora és una llibreria Javascript que permet interactuar
amb els elements HTML, manipular el DOM i fulles d’estil o crear animacions del costat del client, amb
resultats que aporten molt dinamisme a les pàgines web, que acostumen a ser estàtiques. Per ser una
llibreria lliure de codi obert, i per la reduïda quantitat de codi necessari per a aconseguir els diferents
efectes, el seu ús està molt estès.
JQuery Mobile és una extensió de JQuery pensada per al desenvolupament web de dispositius de petita
mida (telèfons intel·ligents i tauletes), permetent crear interfícies més usables que s’apropen més a les
aplicacions mòbils que no pas al web tradicional. Tenint coneixements d’HTML5, CSS i Javascript, es poden
crear aplicacions web de manera ràpida i funcional, ja que d’alguna manera aquesta llibreria imposa uns
estils predeterminats que faciliten el desenvolupament però que sempre podran ser estilitzats per la mà
de cada desenvolupador, a fi d’aportar personalitat a cada projecte. En aquest sentit, existeix l’aplicació
“Theme Roller for Jquery Mobile”14, un web on de manera molt interactiva hom pot crear unes interfícies
personalitzades a nivell de color, ombres i degradats que després es poden exportar com a fulles d’estils
que s’integraran en el projecte.
Interfície del “Theme Roller for JQuery”, on s’ha creat un tema “A” personalitzat.
14 http://themeroller.jquerymobile.com/
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
48
Grau de Multimèdia Universitat Oberta de Catalunya
A l’hora de treballar amb JQuery Mobile, Adobe facilita el desenvolupament per mitjà de Dreamweaver,
ja que permet crear un projecte per a dispositius mòbils tot descarregant la llibreria i les fulles d’estil per
defecte, que es substituirien per les creades amb Theme Roller i s’actualitzaria JQuery a la versió 1.10.2 i
JQuery Mobile a la 1.4.5.
Phonegap Build
Phonegap és un framework que permet emprar les tecnologies bàsiques
del desenvolupament web (HTML, CSS3 i Javascript) i aplicar-les en el
camp de les aplicacions mòbils sense haver de conèixer els llenguatges
específics de cada plataforma. Així, fent un únic desenvolupament web,
és a dir, utilitzant un únic codi, Phonegap permet fer la compilació i
exportació cap als següents sistemes operatius: Androido, iOS, Windows
Phone, BlackBerry OS, Web OS, Symbiam i Bada. Va ser concebut com un programari lliure de la mà de
Nitobi i, tot i ser adquirit l’octubre del 2011 per Adobe, aquest va donar-lo a la fundació Apache per a
mantenir-ne la integritat.
El servei Phonegap Build, creat per Adobe, permet fer la compilació i exportació de l’aplicació prenent
com a font una carpeta comprimida amb tot el projecte web (HTML, CSS i JS), a la qual adjunta tots els
fitxers necessaris per a crear l’aplicació mòbil, incloent el cordova.js (o phonegap.js), l’arxiu principal del
framework de Phonegap, i l’arxiu de configuració config.xml (a no ser que l’usuari el defineixi
personalment). És un servei gratuït només per a la primera aplicació i de pagament per a les successives.
Espai de l’aplicació Renalclick a Phonegap Build, preparat per a l’exportació ja sigui per descàrrega directa o capturant el codi QR.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
49
Grau de Multimèdia Universitat Oberta de Catalunya
13. Perfils d’usuari
El sistema Renalclick contempla tres tipus principals d’usuaris:
- Superadministrador. S’entén com a superadministrador la institució propietària dels drets
d’explotació de la tecnologia desenvolupada amb el sistema Renalclick (el Parc Taulí Sabadell en
aquest cas), que té els privilegis per donar d’alta a centres administradors a través d’una interfície
pròpia, que no entra dins dels objectius d’aquest treball però que s’acabarà desenvolupant a fi
de poder crear centres administradors (alta, modificació i baixa) sense necessitat d’entrar
directament a la base de dades.
- Centre administrador. S’entén com a centre tots aquells hospitals, clíniques, consultes
mèdiques, centres d’atenció primària, etc., que acostumin a tractar pacients amb malaltia renal
crònica i que estiguin fent-los seguiment quant al tractament que fan. Cada centre administrador
disposa d’un nom d’usuari i una contrasenya per accedir a la plataforma web, des de la qual pot
visualitzar els pacients en seguiment i fer valoracions de la seva evolució a distància. Així, el centre
donarà a conèixer les dades d’accés a tots aquells professionals en plantilla de l’especialitat de
nefrologia que consideri que han d’entrar a la plataforma web, tenint en compte que existeixen
unes úniques dades d’accés per a cada centre. La finalitat de la Unitat d’Innovació Parc Taulí, si el
projecte prospera i s’aconsegueix el finançament apropiat, és que el Parc Taulí Sabadell actuï com
a superadministrador de la xarxa, i que per mitjà d’acords de cessió de llicència amb els centres
interessats, es donin d’alta com a centres administradors de Renalclick.
- Pacient. És el gruix principal del sistema i l’usuari pel qual s’han centrat tots els esforços de
disseny per a crear l’aplicació mòbil, a fi que pugui ser usada tenint en compte que l’edat mitja
dels pacients amb malaltia renal crònica està al voltant dels 55 anys. El pacient només podrà
utilitzar l’aplicació si forma part d’un centre administrador amb una llicència de Renalclick, ja que
serà el propi centre qui donarà d’alta als seus pacients, normalment en el context d’una consulta
mèdica, i pactarà amb ell el nom d’usuari i la contrasenya que, més endavant, haurà d’introduir
a l’aplicació quan la descarregui de la corresponent tenda d’aplicacions.
Es pot veure representat el cicle de vida de la gestió d’usuaris a la figura 1 d’aquesta memòria.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
50
Grau de Multimèdia Universitat Oberta de Catalunya
14. Usabilitat
Aconseguir que un web estigui dissenyat de tal manera que els usuaris hi interactuïn de manera intuïtiva,
ràpida i còmode, és difícilment assolible sense emprar la metodologia del disseny centrat en l’usuari.
Aquesta metodologia té en compte les necessitats dels usuaris potencials de l’aplicació que s’està
desenvolupant com a base de les decisions de disseny, en un procés iteratiu d’anàlisi, disseny i avaluació
que a cada volta implementa millores en base als problemes detectats anteriorment.
Renalclick s’ha gestat com un projecte col·laboratiu amb l’equip d’infermeria del Servei de Nefrologia de
l’Hospital de Sabadell. A més de ser una idea que té l’origen en el propi equip assistencial, aquest també
ha participat de les principals decisions de disseny (quina informació mèdica introduïm i com la
mostrem). D’altra banda, la idea va sorgir de les necessitats i problemes que elles mateixes han detectat
en el seu dia a dia, tractant pacients amb malaltia renal crònica, observant les mancances dels
tractaments actuals i descobrint les oportunitats que s’han portat cap al sistema desenvolupat. Així, tot i
que els pacients no han participat de manera directa en el disseny de l’aplicació (tot i que està previst fer
una prova pilot on els pacients sí que en formaran part), l’equip d’infermeria ha actuat com a representant
de les necessitats d’aquests, ja que cal tenir en compte que el criteri mèdic, en aquest cas, és tant
important com l’experiència d’usuari.
Principis de la usabilitat i que el sistema compleix
- Coherència. Des d’un punt de vista gràfic, s’han definit unes pautes d’identitat corporativa
(colors, tipografia, logotip) que ajudaran a fer que les diferents pantalles siguin coherents entre
elles. Pensant en l’aplicació mòbil, sempre s’ubicarà el botó de menú a dalt a la dreta, i per tornar
enrere a dalt a l’esquerra. Els botons d’acció (registrar dades, accessos principals) tenen el mateix
aspecte i tractament de manera que l’usuari els pot reconèixer i aprendre molt més ràpidament
a navegar per l’aplicació.
- Interacció. El principi d’interacció parla del fet que quan un usuari prem algun botó present a
l’aplicació, aquesta ha de donar alguna resposta per fer saber que l’acció està tenint efectes i que
passarà alguna cosa, idealment allò que l’usuari espera obtenir. També ha de donar la llibertat
de poder-se moure endavant i endarrere per si vol anar per un altre camí i l’usuari ha de tenir
clar que disposa d’aquesta llibertat. El disseny que proporciona JQuery Mobile facilita complir
aquest principi, juntament amb la disposició dels botons de menú i enrere en la mateixa ubicació.
- Informació, comunicació i retroalimentació. És un dels punts més importants: l’aplicació
mòbil és en definitiva un sistema dissenyat per millorar la vida dels pacients amb malaltia renal
crònica, i els missatges que arriben al pacient, tant sobre allò que ha de fer, allò que ha fet bé o
allò que no hauria de tornar a fer, han de ser el més precisos i efectius possible, pensant en el
dia a dia del pacient, quan farà servir l’aplicació i en quin context. El resultat d’aquest anàlisi és
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
51
Grau de Multimèdia Universitat Oberta de Catalunya
que els missatges han d’estar escrits en un to amable, entenedor i concís, lliure de tecnicismes i
el més proper al llenguatge estàndard d’un pacient tipus. Sobretot pensant també en l’aplicació,
on sovint es faran connexions amb la base de dades per a desar o recollir informació, caldrà tenir
a l’usuari informat en tot moment quan s’estiguin processant aquestes dades (animacions de
càrrega, barres de procés, etc.).
- Control. És important que l’usuari pugui tenir un control sobre la informació presentada per
assolir un cert nivell de personalització, fet que es tradueix en una millor satisfacció en
l’experiència i un estalvi de temps per accedir a les funcionalitats més freqüents. Aquest criteri
està més present en la plataforma web, on el professional sanitari, en tenir una versió per a
escriptori del sistema, pot assolir un millor control sobre la informació (mides del text, criteris
temporals per visualitzar les dades de constants del pacient, entre d’altres).
- Opcions. És convenient que els usuaris puguin tenir diferents maneres per arribar a trobar el
que busquen. La majoria d’interfícies de Renalclick contenen una iconografia acompanyada de
text, botons i enllaços directes en el text, que amplien les possibilitats d’interacció i fan d’aquesta
una experiència més enriquidora.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
52
Grau de Multimèdia Universitat Oberta de Catalunya
15. Seguretat
En el capítol 4 d’aquesta memòria, on es parlava de l’escenari actual quant a les aplicacions en salut, s’ha
vist que, tot i ser un mercat molt potent que està en creixement exponencial en xifres de negoci i ús
popular, els seus principals actors (sector sanitari i farmacèutiques) hi estan entrant tímidament, degut a
una regulació deficient i uns condicionants que poden malmetre la seva imatge, sobretot en referència a
la protecció de dades del pacient i a les possibles conseqüències nocives per a aquest d’un ús indegut de
la informació mèdica inclosa en l’aplicació.
La protecció de les dades és una tasca que en bona part depèn del servei d’allotjament web contractat i
de la responsabilitat de l’empresa que hi ha al darrera. Dinahosting, a banda de les mesures de seguretat
per assegurar la integritat física dels seus servidors (alimentació garantida, control ambiental, control
contra fugues i incendis), posa a disposició dels clients protocols per a garantir la protecció de dades
davant el possible atac de tercers: protocols de seguretat en el tauler personal, verificació en dos passes,
sistemes addicionals de seguretat (desactivació de serveis FTP o SSH, restricció d’accés per IP), comptes
de correu amb eines avançades antispam i antivirus, i, evidentment, còpies incrementals diàries i una
setmanal que es conserven un mínim de 30 dies15.
Però es prenen altres mesures de seguretat que tenen a veure amb la protecció de dades i que depenen
únicament de la programació del sistema:
- Assignació de permisos segons el tipus d’usuari (centre administrador o pacient) per a limitar els
accessos a la plataforma web i a l’aplicació mòbil.
- Limitació en l’accés a la base de dades: els pacients només poden incloure noves dades en el
registre de constants i en els signes i símptomes, modificar les seves dades personals i en cap cas
eliminar registres, tret dels signes i símptomes; el centres administradors, només accediran a la
base de dades per donar d’alta o de baixa a pacients, i en el cas de pacients amb hemodiàlisi
modificar-los el pes sec i el pes màxim, sense poder realitzar altres modificacions o eliminacions
que les que tinguin a veure amb el seu perfil com a centre.
- Només existirà un usuari superadministrador, amb limitació d’accés per IP, que podrà gestionar
les altes i baixes de centres administradors per mitjà d’una aplicació web (no contemplada per a
aquest projecte final de grau), sense poder accedir a cap més dada dels centres o dels pacients a
no ser que s’accedeixi directament a la base de dades amb phpmyadmin o similar.
15 Dinahosting: “Garanties de tenir el teu allotjament web a Dinahosting”.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
53
Grau de Multimèdia Universitat Oberta de Catalunya
16. Versions del sistema
La finalitat de Renalclick és convertir-se en un sistema homologat16, pel qual sorgeix la necessitat de fer
una prova pilot amb pacients reals que puguin validar l’aplicació i serveixi alhora per identificar possibles
errades i millores. Aquesta validació, que es faria amb un grup reduït i representatiu de l’usuari tipus de
Renalclick, comptaria amb una versió zero del sistema, amb les següents característiques:
- Implementació del web, amb capacitat per a donar d’alta a nous usuaris i accedir al perfil de
cadascun d’ells per veure les dades introduïdes a l’aplicació mòbil.
- Implementació, a l’aplicació mòbil, dels mòduls de registre de constants i registre de signes i
símptomes.
- Estilització CSS amb un acabat definitiu o proper a l’esperat.
- L’accés del superadministrador a la base de dades seria directe, sense aplicació web intermitja.
Després de la prova pilot, un cop fet l’anàlisi dels problemes detectats, es passaria a la versió 1.0 del
sistema, que es llançaria més enllà de l’entrega d’aquest projecte i que inclouria tot l’anterior i apart:
- Rectificació dels problemes detectats a la prova pilot i incorporació de millores en la programació.
- Accés a la base de dades, per part del superadministrador, per mitjà d’una aplicació web que
permeti donar d’alta i baixa a centres administradors.
- Estilització definitiva de les fulles d’estils.
A mida que es vagin desenvolupant nous mòduls a l’aplicació mòbil, s’aniran compilant noves versions
(1.1, 1.2, 1.3, etc.), que no afectaran tan directament a la plataforma web, ja que el gruix d’aquesta es
basa en el registre de constants i registre de signes i símptomes.
16 Veure el capítol 4 “Escenari actual”, sobre les possibilitats actuals d’homologació del sistema.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
54
Grau de Multimèdia Universitat Oberta de Catalunya
17. Requisits i instruccions d’instal·lació
Aplicació mòbil
L’aplicació mòbil s’ha provat exclusivament sobre Android, ja que a diferència d’iOS, no es requereix un
ID de desenvolupador de pagament per poder exportar l’aplicació des de Phonegap Build. La versió
mínima d’Android ha de ser la 3.0 (Honeycomb) ja que és la primera versió que va suportar imatges en
format .svg, que s’han emprat a l’aplicació per resoldre el problema que plantejaven les diferents
resolucions de pantalla dels dispositius mòbils.
Qualsevol pacient que estigui donat d’alta en el sistema Renalclick de la mà d’un centre administrador,
haurà d’entrar a la Play Store des del seu dispositiu mòbil, cercar l’aplicació Renalclick per nom
(prioritàriament) o per paraules clau i descarregar l’aplicació seguint les instruccions que marca la tenda
d’aplicacions d’Android.
Plataforma web
La plataforma web del sistema Renalclick és accessible des d’un navegador web seguint la direcció
www.renalclick.es. Només un centre sanitari amb llicència com a administrador podrà accedir a la
plataforma amb un nom d’usuari i contrasenya.
La llibreria Charts.js emprada fa ús de l’etiqueta <canvas> per dibuixar les gràfiques del registre de
constants dels pacients, fet que implica que, sigui quin sigui el navegador escollit, ha de ser compatible
amb HML5, última versió de l’estàndard del llenguatge de marcatge web. A més, hi ha propietats a les
fulles d’estils que són exclusives de la versió CSS3. Tenint en compte l’anterior, i segons el web Can I Use17,
especialitzat en proporcionar taules de compatibilitat entre tecnologies del costat del client i navegadors
web, els navegadors recomanats són:
- Internet Explorer, a partir de la versió 10.
- Firefox, a partir de la versió 31.
- Chrome, a partir de la versió 31.
- Safari, a partir de la versió 7.
- Opera, a partir de la versió 27.
17 http://caniuse.com/
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
55
Grau de Multimèdia Universitat Oberta de Catalunya
18. Bugs
La versió actual de l’aplicació mòbil presenta els següents problemes de funcionament que caldrà revisar
en properes actualitzacions:
- El sistema de notificacions no s’ha pogut implementar. Existeix un plugin per a Phonegap Build
que s’ha instal·lat i s’ha provat (LocalNotification18), però en arrencar l’aplicació des d’un dispositiu
mòbil provoca un error que deixa la pantalla en blanc i no permet la navegació.
- En cert moment, es va decidir mantenir el header fixe, de manera que la navegació i el nom de
l’aplicació estiguessin sempre visibles. En contades ocasions, per un bug que en realitat és de
JQuery Mobile, el contingut de la pàgina es situa per sota de l’encapçalament, i no a
continuació, com si la posició fixa es convertís en absoluta. Caldrà esperar a noves versions de la
llibreria o buscar camins alternatius per aconseguir el mateix efecte de posició fixa.
- Hi ha un petit desfasament en el temps d’interacció des del moment que l’usuari clica un botó
fins que l’aplicació respon. Alguns desenvolupadors han comptabilitzat que es tracta de 300
milisegons, i respon a la combinació de JQuery Mobile i Phonegap Build. Hi ha mètodes per a
reduir aquest temps fins que pràcticament no hi hagi diferència respecte a una aplicació nativa,
no és un error greu però ajudaria a millorar l’experiència d’usuari.
Quant a la plataforma web, també respecte a la versió actual:
- En dispositius mòbils, la vista d’un pacient amb trasplantament renal, que en el registre de tensió
arterial mostra tres gràfiques (registres del matí, de la tarda i de la nit), provoca errors de
visualització en ocultar aleatòriament alguna de les tres gràfiques quan es canvia a la
pestanya de registre de signes i símptomes o de registre d’alarmes i es torna al registre de tensió
arterial. Fent scroll amunt o avall, la gràfica ocultada torna a aparèixer. S’ha descartat que sigui
un problema que no hagi donat temps al canvas a dibuixar-la, i la clau sembla estar en la manera
d’ocultar i/o mostrar els diferents blocs de la vista.
No es pot obviar el bug de seguretat que té el prototip en general. Les dades a l’aplicació s’estan enviant
amb peticions GET i les respostes en format json també es podrien interceptar fàcilment. Les validacions
d’usuari no s’estan encriptant i, tot i poder utilitzar un https gratuït i que l’enviament de formularis al web
és amb mètode POST (a més de l’ús de variables de sessió), la sensació és que queda molta feina pendent
en aquest sentit.
Així mateix, s’ha detectat que els plugins DataTables i Charts, així com la llibreria de JQuery, provoquen
una llista prou extensa d’advertències a la consola de Firebug (del navegador Mozilla Firefox). Són
18 https://build.phonegap.com/plugins/2081
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
56
Grau de Multimèdia Universitat Oberta de Catalunya
advertències i no errors, per tant la plataforma funciona amb normalitat i de cara al professional sanitari
no representa cap diferència, però seria convenient descobrir l’origen d’aquestes advertències a fi de
tenir una depuració el més neta possible i evitar possibles errors futurs.
Sí que es fa necessari, en canvi, implementar la captura d’errors, ja que ara mateix no s’han fet esforços
en aquest sentit, únicament a la pantalla d’inici de sessió. Els errors que puguin sorgir (per exemple, en
no poder realitzar la connexió amb la base de dades, o en el cas que fallin els controls Ajax i s’intenti
introduir un nom d’usuari que ja existeixi) han de ser vistos per l’usuari amb missatges entenedors que
els aporti informació útil, i no en llenguatge MySQL com ocorre actualment.
D’altra banda, s’ha corregit el bug del botó d’anar enrere d’Android, que ja no provoca efectes no
desitjats. S’ha col·locat un petit codi a l’inici de l’script de Renalclick, de manera que es controla a quina
pantalla està l’usuari per saber si el botó d’enrere ha de fer la seva funció habitual o ha de forçar el canvi
a una pantalla concreta. Per exemple, si l’usuari ve de fer un registre i està a la pantalla de visualització
dels registres, el botó d’enrere per defecte el portava de nou a la pantalla de fer el registre (per l’historial
de navegació), fet que li permetia realitzar un nou registre, quan en hemodiàlisi o diàlisi peritoneal només
se’n pot fer un al dia; en aquest cas, el botó d’enrere ha de portar a la pàgina d’accessos principals. El
problema venia perquè no s’havia fet referència a l’script de Phonegap a tots els HTML de l’aplicació,
només a l’arxiu index.html, seguint la documentació de Phonegap on s’indica de fer-ho així19. Com que
l’script per modificar el funcionament del botó d’anar enrere fa referència a funcions de l’API de
Phonegap, el botó d’enrere o funcionava de la manera habitual, o deixava de funcionar del tot.
19 http://docs.build.phonegap.com/en_US/introduction_getting_started.md.html#Getting%20Started%20with%20Build
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
57
Grau de Multimèdia Universitat Oberta de Catalunya
19. Anàlisi de mercat
Amb un mercat tan ampli com el de les aplicacions mòbils, s’han identificat les següents que estan
relacionades amb la malaltia renal i que podrien competir amb l’aplicació desenvolupada per a aquest
projecte:
Aplicació Característiques Cost Plataforma Abstract
KidneyDiet
- Informació
- Seguiment
- Autogestió
3€
5,49€
Android
iOS
Ajuda a la gent amb malaltia
renal crònica a prendre millors
decisions quant a la dieta.
Renal TRKRR
- Recordatoris
- Suport per afrontar
símptomes i
discapacitats
- Seguiment
- Autogestió
5,06€
5,49€
Android
iOS
Ajuda a la gent amb malaltia
renal crònica a gravar, registrar
i compartir la seva informació
relacionada amb la salut renal.
iDialysis
- Seguiment
- Autogestió
Gratuïta Android Per a pacients que utilitzen
màquines de diàlisi, permetent-
los guardar la pressió de la
sang, nivell de sucre, pes, i
notes per si passa qualsevol
cosa durant la sessió.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
58
Grau de Multimèdia Universitat Oberta de Catalunya
Aplicació Característiques Cost Plataforma Abstract
Hemodialysis
Management
System
- Informació
- Seguiment
Gratuïta Android Ajuda per metges i infermeres
per al tractament de diàlisi dels
pacients, consistent en un
servidor que connecta diferents
clients (tauletes) per al registre
de dades durant la sessió de
diàlisi.
Kidney
APPetite
- Informació
- Seguiment
Gratuïta Android
iOS
Informació nutricional per a
pacients amb malaltia renal
crònica que fan diàlisi.
Dialysis Flow
Sheet Mobile
App
- Seguiment Gratuïta Android
iOS
Una aplicació simple per a fer
seguiments dels pacients amb
diàlisi.
Pukono
- Informació Gratuïta Android
iOS
Ajuda a les persones amb
hipertensió i amb insuficiència
renal a gestionar la seva dieta:
guia d'aliments, receptes i
menús que els pacients poden
elaborar i consumir.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
59
Grau de Multimèdia Universitat Oberta de Catalunya
Aplicació Característiques Cost Plataforma Abstract
expertSalud
- Informació
- Seguiment
- Autogestió
Gratuïta Android
iOS
Ajuda a la gestió de la salut,
recordant la presa de
medicació i seguiment de
controls que es poden enviar al
metge.
RenalHelp
- Consultes
personalitzades
- Dietes
- Exercicis
Gratuïta Android
iOS
Aplicació mòbil i plataforma
web (www.myrenalhelp.com),
per a resoldre dubtes per part
de pacients i metges, taules
d’exercicis i dietes i receptes
ajustades al tractament.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
60
Grau de Multimèdia Universitat Oberta de Catalunya
20. Projecció a futur
Amb la presentació final del projecte, el sistema Renalclick és funcional però incomplet. Com es
comentava al capítol 2 d’aquesta memòria, “Definició del projecte”, subapartat 2.2. “Funcionalitats de
l’aplicació mòbil”, la idea inicial proposada pel grup d’infermeria del Servei de Nefrologia de l’Hospital de
Sabadell va més enllà del mòduls desenvolupats.
Concretament, manca incorporar a l’aplicació:
- Gestionar la medicació, segons el tractament que segueixin.
- Consultar pautes d’alimentació.
- Consultar vídeos d’exemple per practicar exercici físic ajustat a la seva malaltia.
- Accedir a una galeria de música i sons relaxants d’ajuda en moments on la seva ansietat acostuma
a pujar (sessions d’hemodiàlisi, col·locació del catèter en diàlisi peritoneal, etc.).
- Registrar i consultar les cites mèdiques programades en el futur.
- Consultar part de la guia per al pacient amb insuficiència renal, inclosa actualment en el web de
l’Hospital de Sabadell.
El sistema desenvolupat actualment, que es podria catalogar com a prototip, serà molt útil a l’hora de
contactar amb empreses que puguin estar interessades en agafar el relleu, ja sigui per continuar amb la
programació de la resta de mòduls o per començar des de zero a partir d’un exemple visual i funcional
del que es vol aconseguir. El prototip pot ajudar, a més, a abaratir costos en els contractes de
desenvolupament, ja que, en les negociacions entre la institució i l’empresa, s’aportarà molta més
informació que un document de brífing.
Transferència i model de negoci
Com a projecte d’innovació que gestiona la Unitat d’Innovació Parc Taulí, es treballarà per aconseguir que
Renalclick sigui un producte transferible per mitjà de llicències de renovació anual que es cediran a
centres sanitaris (hospitals, clíniques privades) que portin pacients amb malaltia renal crònica i que
vulguin aconseguir una millor gestió del tractament per part dels pacients, així com un millor seguiment
del malalt per part del centre.
A tal fi, es faran estudis de cost-efectivitat per poder quantificar l’estalvi en la despesa econòmica que
suposa la incorporació de Renalclick en la vida del pacient i en els sistemes de gestió dels centres, així
com els resultats de millora en la qualitat de vida dels pacients. D’aquesta manera, es podrà vendre el
sistema no només com una hipòtesi de bones intencions, sinó com una eina real avalada per dades
quantificables.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
61
Grau de Multimèdia Universitat Oberta de Catalunya
21. Conclusions
Fa prop de tres mesos, quan vaig decidir desenvolupar el sistema Renalclick, vaig tenir por. Tampoc em
faltaven motius: m’enfrontava per primera vegada a la implementació d’un sistema complet, des del
disseny gràfic fins al model de dades, passant per tota la programació i la gestió d’usuaris. A més, entraven
en joc altres eines que no controlava (Phonegap, JQuery Mobile, plugins de gràfics), de les quals coneixia
exemples aïllats, però que ignorava com respondrien dins d’un sistema que llavors només existia sobre
el paper.
A mig camí entre un acte de fe i la convicció profunda del “jo puc”, vaig invertir bona part del temps en
estudiar i posar-me al dia de tot allò que em feia sentir insegur: com estructurar una pàgina amb JQuery
Mobile; funcions, mètodes i esdeveniments d’aquesta llibreria; nocions bàsiques sobre Phonegap; com
muntar una aplicació amb Phonegap Build; aplicacions i proves amb els diferents plugins previstos, ... Tot
el primer mes i mig del projecte va ser documentació i memòria escrita, una mica arriscat, però ara veig
que totalment necessari, perquè, quan va arribar el moment d’obrir l’editor de text, l’equilibri entre la fe
i la convicció es va decantar lleugerament en favor de la segona.
Tot el que he après durant aquests quatre anys a la UOC ha anat sorgint i fluint amb l’evolució del projecte:
llenguatge i estàndards web, disseny d’interfícies multimèdia, ús de bases de dades, o programació. He
hagut de refrescar coneixements o actualitzar-los, com els mètodes específics per a PHP en la versió 5.3
i 5.4. He hagut de rellegir-me les PACs de programació web per enganxar-me de nou amb JQuery i posar-
me a punt per la versió Mobile. He rescatat algun diagrama de Gantt fet a gestió de projectes per inspirar-
me a l’hora de planificar-me.
M’he desesperat intentant trobar la solució a un algoritme que no funcionava per un punt i coma (o per
qüestions més greus, no ens enganyem). M’he obsessionat. He dormit poc i de vegades m’he despertat
abans d’hora perquè la ment, inquieta, creia haver trobat la solució a un problema que li rondava. He
estat treballant a jornada completa per arribar a casa i seguir 4 ó 5 hores més amb el projecte. He deixat
de banda algunes coses i algunes persones per por a no arribar als objectius marcats.
I, en general, val a dir que tinc l’agradable satisfacció de sentir que he après molt. Personalment, a creure
una mica més en mi mateix. Però sobretot quant a coneixements, sento que he construït, que hi havia
unes bases i que ara aquestes bases s’han reforçat i ampliat. A més, em fa feliç comprovar que el sistema
funciona. No és perfecte, mai ho serà, perquè quan hom crea una aplicació interactiva, mai es dóna per
acabada, sempre sorgeixen millores, petites o grans. Això també ho he après aquests mesos.
Espero amb ànsia el moment de veure’n l’aplicabilitat, de saber si realment ajuda els pacients amb
malaltia renal crònica i millora la seva qualitat de vida. Si aquest prototip contribueix d’alguna manera a
fer que Renalclick sigui una realitat d’eficàcia provada, la meva satisfacció, llavors sí, serà completa.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
62
Grau de Multimèdia Universitat Oberta de Catalunya
Annex 1: Lliurables del projecte
Documentació
- PAC_FINAL_mem_SalesLopez_Roger.pdf: Memòria del treball, que correspon a aquest
document, en format pdf.
- PAC_FINAL_inf_SalesLopez_Roger.pdf: Autoinforme d’avaluació de competències transversals,
en format pdf.
Presentacions
- PAC_FINAL_vid_SalesLopez_Roger.mp4: Presentació en vídeo, en format mp4 i resolució 1280
x 720 píxels.
- PAC_FINAL_prs_SalesLopez_Roger.pdf: Presentació escrita / visual, per a un públic no
especialitzat, en format pdf.
Projecte (PAC_FINAL_prj_SalesLopez_Roger)
- “Aplicació mòbil”: Carpeta amb els arxius que formen part de l’aplicació mòbil: HTML, CSS, JS,
PHP (serveis web del servidor específics per a l’aplicació mòbil), plugins, imatges, i arxiu
config.xml necessari per a exportar amb Phonegap.
- “Plataforma web”: Carpeta amb els arxius que formen part de la plataforma web: HTML, CSS,
JS, PHP (específic de la plataforma web), plugins, imatges.
- renalclick.sql: Base de dades, a 16 de juny de 2015, en format sql.
- Renalclick-debug.apk: Arxiu .apk, preparat per a ser instal·lat en qualsevol dispositiu amb
sistema operatiu Android amb versió superior a la 3.0.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
63
Grau de Multimèdia Universitat Oberta de Catalunya
Annex 2: Codi font
(Exemples més representatius de tot el codi desenvolupat)
Procés de gestió dels signes i símptomes (app)
/* Usuari entra a la pàgina de signes i símptomes i ABANS de carregar hem de
recuperar-los de la base de dades per mostrar-los en pantalla */
$(document).on('pagebeforecreate', '#registrosignos', function(){
showAjaxLoader();
var tractament = localStorage.tractament;
var dbConnect = urlWebServices+"getSignosSintomas.php?jsoncallback=?";
$.getJSON( dbConnect, {IDtractament:tractament})
.done(function(respostaServidor) {
var listOfBoxSimptoms = "";
for(i=0;i<respostaServidor.numSintom;i++){
listOfBoxSimptoms += '<div class="dataBox" data-
idsintom="'+respostaServidor[''+i+''].idsintom+'"><h2>'+respostaServidor[''+i+''].simp
toma+'</h2><div class="infoSintom"><a href="#infoDialog" class="verInfoSintom" data-
role="button" data-icon="info" data-iconpos="notext" data-
transition="fade">Información</a><div class="anadirSintom"><a href="#" class="ui-btn
ui-btn-inline ui-icon-plus ui-btn-icon-left">Añadir</a></div><p
class="descripSintom">'+respostaServidor[''+i+''].recomanacio+'</p></div></div>';
}
$('#listSintomas').append(listOfBoxSimptoms);
hideAjaxLoader();
})
});
/* Usuari visualitza la informació d'un símptoma */
$(document).on('click', '.verInfoSintom', function(){
var sintom = $(this).parent().siblings('h2').text();
var info = $(this).siblings('.descripSintom').text();
$('div#infoDialog div#infoDialogConcret h2').text(sintom);
$('div#infoDialog div#infoDialogConcret p').text(info);
});
/* Usuari afegeix un símptoma al registre */
$(document).on('click', '.anadirSintom', function(){
/*Creem variable amb la referència al botó, ja que es perdrà dins de la crida
ajax */
var btnRegistSintom = $(this);
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
64
Grau de Multimèdia Universitat Oberta de Catalunya
/*Desem el contingut original del botó, per si hi ha algun error durant la
crida*/
var initialContent = btnRegistSintom.html();
/*Buidem de contingut el botó i el canviem per un loader*/
btnRegistSintom.empty();
btnRegistSintom.html("<img src='../img/loadersmall.gif'>");
var idsintom = btnRegistSintom.closest('.dataBox').data("idsintom");
var cuando = fechaDatetime();
var dbConnect = urlWebServices+"registroSignosSintomas.php?jsoncallback=?";
$.getJSON( dbConnect,
{userID:localStorage.userID,sintomID:idsintom,fechahora:cuando})
.done(function(respostaServidor) {
if(respostaServidor.exit==true){
btnRegistSintom.removeClass('anadirSintom').addClass('sintomAdded');
btnRegistSintom.empty();
btnRegistSintom.html("<p class='ok'>¡Añadido!</p>");
}else if(respostaServidor.exit==false){
btnRegistSintom.empty();
btnRegistSintom.html("<p class='fail'>Prueba otra vez</p>");
setTimeout(function(){btnRegistSintom.empty().html(initialContent)},2500);
}
})
});
/* Usuari clica per veure el registre de signes i símptomes */
$(document).on('click', '#goToRegistSintom', function(){
showAjaxLoader();
$('#listRegistSintomas').empty();
/*Variables de text segons si hi ha registres de signes i símptomes o no*/
var msgNoReg = "Todavía no ha hecho ningún registro. Vuelva atrás y añádalos
desde la lista de signos y síntomas.";
var msgSiReg = "Estos son los signos y síntomas añadidos por usted, organizados
por años, meses y días e indicando la hora a la que se registraron:";
var usuariID = localStorage.userID;
var dbConnect = urlWebServices+"getRegistroSignosSintomas.php?jsoncallback=?";
$.getJSON( dbConnect, {ID:usuariID})
.done(function(respostaServidor) {
if(respostaServidor.exit==false){/*no hi ha dades a recuperar*/
$('div#verRegistroSintomas p.dynamicMSG').text(msgNoReg);
}else if(respostaServidor.exit==true){/*hi ha dades a recuperar*/
$('div#verRegistroSintomas p.dynamicMSG').text(msgSiReg);
/*Variable on guardem tota la llista de símptomes en format html*/
var listOfBoxSimptoms = "";
/*Loop per anar dibuixant els símptomes un a un, segons si
corresponen al mateix dia, mes o any que l'anterior*/
for(i=0;i<respostaServidor.numSintom;i++){
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
65
Grau de Multimèdia Universitat Oberta de Catalunya
var any = getAny(respostaServidor[''+i+''].datahora);
var mes = getMes(respostaServidor[''+i+''].datahora);
var dia = getDiaDelMes(respostaServidor[''+i+''].datahora);
var hora = getHora(respostaServidor[''+i+''].datahora);
/*html d'un símptoma, comptant només amb el nom i l'hora*/
var loopSintom = '<p data-
idsintom="'+respostaServidor[''+i+''].idsintom+'" data-
sintomdatahora="'+respostaServidor[''+i+''].datahora+'"><span
class="sintom">'+respostaServidor[''+i+''].nom+'</span><span
class="hora">'+hora+'</span><span class="delete"><a href="#"></a></span></p>';
if(i==0){ //pel primer símptoma
listOfBoxSimptoms += '<div class="year"><h2
class="hideshowyear">'+any+'</h2><div class="yeargroup" style="display:none"><div
class="dataBox"><h2 class="hideshowmonth">'+mes+' '+any+'</h2><div class="mesgroup"
style="display:none"><h3>Día '+dia+'</h3>'+loopSintom;
} else if(any==getAny(respostaServidor[''+i-
1+''].datahora)){ //el símptoma actual és del mateix ANY que l'anterior
if(mes==getMes(respostaServidor[''+i-
1+''].datahora)){ // el símptoma actual és del mateix MES que l'anterior
if(dia==getDiaDelMes(respostaServidor[''+i-
1+''].datahora)){ //el símptoma actual és del mateix DIA que l'anterior
listOfBoxSimptoms += loopSintom;
}else{ //el símptoma actual NO és del mateix
DIA que l'anterior
listOfBoxSimptoms += '<h3>Día
'+dia+'</h3>'+loopSintom;
}
}else{ //el símptoma actual NO és del mateix MES que
l'anterior
listOfBoxSimptoms += '</div></div><div
class="dataBox"><h2 class="hideshowmonth">'+mes+' '+any+'</h2><div class="mesgroup"
style="display:none"><h3>Día '+dia+'</h3>'+loopSintom;
}
} else { //el símptoma actual NO és del mateix ANY que
l'anterior
listOfBoxSimptoms += '</div></div></div></div><div
class="year"><h2 class="hideshowyear">'+any+'</h2><div class="yeargroup"
style="display:none"><div class="dataBox"><h2 class="hideshowmonth">'+mes+'
'+any+'</h2><div class="mesgroup" style="display:none"><h3>Día
'+dia+'</h3>'+loopSintom;
}
}
listOfBoxSimptoms += '</div></div></div>';
$('#listRegistSintomas').append(listOfBoxSimptoms);
}
hideAjaxLoader();
$.mobile.changePage("#verRegistroSintomas",{transition: "slide"});
})
});
/*Usuari clica a botó per eliminar registre de símptoma i hem de guardar el seu ID de
registre*/
$(document).on('click', 'div#verRegistroSintomas div.dataBox p span.delete a',
function(){
localStorage.sintomid = $(this).parent().parent().data("idsintom");
localStorage.sintomdata =
getData($(this).parent().parent().data("sintomdatahora"));
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
66
Grau de Multimèdia Universitat Oberta de Catalunya
localStorage.sintomhora =
getHora($(this).parent().parent().data("sintomdatahora"));
localStorage.sintomnom = $(this).parent().siblings(".sintom").text();
var infoSintomDel = '<i>"'+localStorage.sintomnom+'"<br>registrado el
'+localStorage.sintomdata+' a las '+localStorage.sintomhora+'</i>';
$('#confirmDialog p#dynamicMSGsintom').html(infoSintomDel);
$.mobile.changePage("#confirmDialog",{transition: "fade"});
});
/*Usuari elimina un símptoma del seu registre*/
$(document).on('click', '#deleteSintom', function(){
var dbConnect = urlWebServices+"deleteSignosSintomas.php?jsoncallback=?";
$.getJSON( dbConnect, {ID:localStorage.sintomid})
.done(function(respostaServidor) {
if(respostaServidor.exit==true){
$('p[data-idsintom="'+localStorage.sintomid+'"]').css("background-
color","#F99").delay(250).slideUp(250);
}
});
});
Recuperació de dades de registre diàlisi peritoneal (app)
/* Usuari DP entra al control de líquids i ABANS de crear la pàgina hem de recuperar
les dades */
$(document).on('pagebeforecreate', '#controlLiquidos', function(){
showAjaxLoader();
var usuariID = parseInt(localStorage.userID);
var dbConnect = urlWebServices+"getRegistroLiquidos.php?jsoncallback=?";
/*variables de text, segons les dades recuperades*/
var msgNoReg = "<strong>Todavía no ha hecho ningún registro, toque el botón de
[Nuevo registro] para empezar.</strong>";
var msgSiReg = "Mis últimos registros:";
/*Missatges de recomanació segons els valors introduïts pel pacient */
var msgRecomendOk = "Los últimos valores registrados de peso, presión arterial,
ultrafiltración y diuresis residual están dentro de la normalidad, ¡siga así!";
var msgRecomendMind = "Indicaciones sobre los últimos valores registrados:<ul>";
$.getJSON( dbConnect, {ID:usuariID})
.done(function(respostaServidor) {
if(respostaServidor.exit==false){/*no hi ha dades a recuperar*/
$('div#controlLiquidos p.dynamicMSG').html(msgNoReg);
$('div#controlLiquidos div.dataBox').css("display","none");
$('#newRegDP').removeAttr("disabled","disabled");
hideAjaxLoader();
}else if(respostaServidor.exit==true){/*hi ha dades a recuperar*/
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
67
Grau de Multimèdia Universitat Oberta de Catalunya
$('div#controlLiquidos h2.dynamicMSG').text(msgSiReg);
localStorage.numReg = respostaServidor.numReg;
/* Guardem la taula que crearem a partir de les dades recuperades
*/
var tableDP =
"<table><tr><th></th><th>Peso</th><th>TA</th><th>UF</th><th>Diuresis</th></tr>";
for(var i=0;i<parseInt(localStorage.numReg);i++){
localStorage.setItem("datahora"+i,
""+respostaServidor[""+i+""].datahora+"");
localStorage.setItem("pes"+i,
""+respostaServidor[""+i+""].pes+"");
localStorage.setItem("tamin"+i,
""+respostaServidor[""+i+""].tamin+"");
localStorage.setItem("tamax"+i,
""+respostaServidor[""+i+""].tamax+"");
localStorage.setItem("uf"+i,
""+respostaServidor[""+i+""].uf+"");
localStorage.setItem("diuresi"+i,
""+respostaServidor[""+i+""].diuresi+"");
}
for(var i=0;i<parseInt(localStorage.numReg);i++){
tableDP += "<tr><td
class='dia'>"+getDiaSetmana(localStorage.getItem("datahora"+i))+"</td>";
/*Comprovem si hi ha valors alterats*/
if(i<parseInt(localStorage.numReg)-1){/*La comprovació no la
fem amb l'últim valor del pes al loop for, ja que no podem comparar-lo amb el següent
registre*/
if(pesDPaltered(localStorage.getItem("pes"+i),localStorage.getItem("pes"+(i+1)))
) { /*Pes alterat*/
tableDP += "<td class='altered'>";
} else {tableDP += "<td>";}
tableDP += localStorage.getItem("pes"+i)+"</td>";
if(taminDPaltered(localStorage.getItem("tamin"+i)) ||
tamaxDPaltered(localStorage.getItem("tamax"+i))) { /*TA alterada*/
tableDP += "<td class='altered'>";
} else {tableDP += "<td>";}
tableDP += localStorage.getItem("tamax"+i)+" /
"+localStorage.getItem("tamin"+i)+"</td>";
if(ufDPaltered(localStorage.getItem("uf"+i))){
/*Ultrafiltració alterada*/
tableDP += "<td class='altered'>";
} else {tableDP += "<td>";}
tableDP += localStorage.getItem("uf"+i)+"</td>";
if(diuDPaltered(localStorage.getItem("diuresi"+i))){
/**/
tableDP += "<td class='altered'>";
} else {tableDP += "<td>";}
tableDP +=
localStorage.getItem("diuresi"+i)+"</td></tr>";
} else {/*Amb l'última fila no mirem si està alterada, no
posem la clase 'altered'*/
tableDP +=
"<td>"+localStorage.getItem("pes"+i)+"</td><td>"+localStorage.getItem("tamax"+i)+" /
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
68
Grau de Multimèdia Universitat Oberta de Catalunya
"+localStorage.getItem("tamin"+i)+"</td><td>"+localStorage.getItem("uf"+i)+"</td><td>"
+localStorage.getItem("diuresi"+i)+"</td></tr>";
}
}
tableDP += "</table>";
$('#controlLiquidos .dataBox #tableDP').append(tableDP);
/* Incloem els missatges */
if
(grauGravetatDP(localStorage.pes0,localStorage.tamin0,localStorage.tamax0,localStorage
.uf0,localStorage.diuresi0)){
/*No hi ha valors fora del normal*/
recomendMSG ('ok','#7ba51d',msgRecomendOk);
} else {/*Algun valor ha sortit malament, cal veure quin*/
if (pesDPaltered(localStorage.pes0,localStorage.pes1)){
msgRecomendMind += "<li><strong>Su peso ha variado en
más de 1,5 kg</strong> sobre su registro anterior ("+localStorage.pes1+" kg).
Compruebe que se ha pesado bien, y si tiene dificultad para respirar, acuda a
urgencias.</li>";
}
if (taminDPaltered(localStorage.tamin0) ||
tamaxDPaltered(localStorage.tamax0)){
msgRecomendMind += "<li>Tiene la <strong>presión
arterial elevada</strong>. Asegúrese de haber tomado la medicación, y si tiene dolor
de cabeza fuerte, náuseas, vómitos, confusión, cambios en la visión o sangrado nasal,
acuda a urgencias.</li>";
}
if (ufDPaltered(localStorage.uf0)){
msgRecomendMind += "<li>La <strong>ultrafiltración ha
disminuído significativamente</strong>. Acuda al hospital si también ha aumentado de
peso o siente ahogo.</li>";
}
if (diuDPaltered(localStorage.diuresi0)){
msgRecomendMind += "<li>La <strong>diuresis residual
ha disminuído significativamente</strong>, pero no debe preocuparse. Coméntelo en su
próxima visita para que le ajusten el tratamiento y la ingesta de líquidos.</li>";
}
msgRecomendMind += "</ul>";
recomendMSG ('mind','#fca204',msgRecomendMind);
}
var avui = fechaDatetime ();
if(!esMateixDia(avui,localStorage.datahora0)){ /*Avui no hem fet
un registre i per tant el botó de registre ha d'estar activat*/
$('#newRegDP').removeAttr("disabled","disabled");
}else{
$('.dynamicMSGreg').html("<i>Hoy ya ha hecho su registro,
espere a mañana para introducir nuevos valores.</i>");
}
}
hideAjaxLoader();
})
});
Funcions específiques per a hemodiàlisi (app)
/* Funció que determina el grau de gravetat de l'augment de pes en un pacient HD */
function grauGravetatHD(vpes,vpessec,vpesmax) {
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
69
Grau de Multimèdia Universitat Oberta de Catalunya
var pes = parseFloat(vpes);
var pessec = parseFloat(vpessec);
var pesmax = parseFloat(vpesmax);
var franja = (pesmax-pessec)/3;
if (pes<=(pessec+franja)) { return 0;}
else if (pes>(pessec+franja)&&pes<=(pessec+(franja*2))) { return 1;}
else if (pes>(pessec+(franja*2))) { return 2;}
}
/* Modifica el dibuix de l'home que s'omple d'aigua i el missatge segons el valor del
pes */
function homeAiguaMSG (grau,color,message) {
$('div.dataImgPes').css('background-image','url(../img/pesHD'+grau+'.gif)');
$('div.dataRecomend').css('background-image','url(../img/comment'+grau+'.svg)');
$('div.dataRecomend p').text(message).css('color',color);
$('div#dataPesHoy').css('color',color);
}
/* Formulari <select> per al pes al formulari de registre de líquids en pacient HD,
tenint en compte el seu pes sec i màxim*/
function pesokgHD() {
var pesmin = parseInt(localStorage.pessec)-2;
var pesmax = parseInt(localStorage.pesmaxim)+2;
var pesValues = "";
for (var i=pesmin;i<=pesmax;i++){
for (var j=0;j<=9;j++){
var valuePesoComa = i+"."+j;
var pesoComa = i+","+j;
pesValues += "<option value='"+valuePesoComa+"'>"+pesoComa+"
kg</option>";
}
}
return pesValues;
}
Control del botó enrere d’Android (app)
/*Configuració quan el sistema està preparat*/
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
//El sistema està preparat i s'ha carregat l'API de Phonegap
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
//Amb el sistema preparat, podem escoltar l'esdeveniment del botó d'anar
enrere d'Android
}
function onBackKeyDown()
{
var active_page = $(":mobile-
pagecontainer").pagecontainer("getActivePage");
var id = active_page.page().attr('id');//Agafem l'id de la pàgina activa
if( id === 'login' || id === 'mainAccesos'){
//Si és la pàgina principal, el botó d'anar enrere tanca la app
navigator.app.exitApp();
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
70
Grau de Multimèdia Universitat Oberta de Catalunya
} else if ( id === 'controlPeso' || (id === 'profile' &&
localStorage.tractament == "1")) {
//Si és la pàgina de control del pes o del perfil d'un pacient HD,
el botó d'enrere porta a la pàgina principal HD
document.location.href = "pacienthd.html";
} else if ( id === 'controlLiquidos' || (id === 'profile' &&
localStorage.tractament == "2")) {
//Si és la pàgina de control de líquids o del perfil d'un pacient
DP, el botó d'enrere porta a la pàgina principal DP
document.location.href = "pacientdp.html";
} else if ( id === 'controlPA' || (id === 'profile' &&
localStorage.tractament == "3")) {
//Si és la pàgina de control de tensió arterial o del perfil d'un
pacient TR, el botó d'enrere porta a la pàgina principal TR
document.location.href = "pacienttr.html";
}
else {
//En els altres casos, el botó d'enrere té el seu comportament
normal
navigator.app.backHistory();
}
}
});
Dibuix de les gràfiques de línies (app)
/* Crear i dibuixar una gràfica de barres prenent la categoria i el selector com a
paràmetres*/
function dibuixaGraficBar(categoria,selector) {
var eixY = new Array();
var eixX = new Array();
/*Cal saber quants registres s'han de dibuixar*/
var j = localStorage.numReg - 1;
for(var i=0;i<localStorage.numReg;i++){
/*Comencem per l'últim registre i anem baixant fins al primer*/
/*Aquí prenem la categoria que serà la constant a dibuixar (pes, diüresi,
...)*/
eixY[j] = parseFloat(localStorage.getItem(""+categoria+""+i+""));
/*Convertim el datetime del registre anterior en el dia de la setmana*/
var dia = getDiaSetmana(localStorage.getItem("datahora"+i+""));
eixX[j] = dia;
j--;
}
/*Assignació de la gràfica al selector i parametrització de variables*/
plot1 = $.jqplot(''+selector+'', [eixY], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true, location: 'n', edgeTolerance: -15 }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: eixX
}
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
71
Grau de Multimèdia Universitat Oberta de Catalunya
},
highlighter: {
show: true,
showTooltip: false
}
});
}
/* Crear i dibuixar una gràfica de línies prenent 2 categories i el selector com a
paràmetres*/
function dibuixaGraficLine(categoria1,categoria2,selector,numreg,moment) {
var line1 = new Array();
var line2 = new Array();
var eixX = new Array();
var j = numreg - 1;
for(var i=0;i<numreg;i++){
line1[j] = parseInt(localStorage.getItem(""+categoria1+""+i+""));
line2[j] = parseInt(localStorage.getItem(""+categoria2+""+i+""));
var dia = getDiaDelMes(localStorage.getItem("datahora"+moment+""+i+""));
var mes = getMesShort(localStorage.getItem("datahora"+moment+""+i+""));
eixX[j] = dia+mes;
j--;
}
plot1 = $.jqplot(''+selector+'', [line2,line1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
/*animate: !$.jqplot.use_excanvas,*/
series:[
{
label: 'Alta',
lineWidth:2,
markerOptions: { style:'diamond' },
pointLabels: { show: true, location: 'n', edgeTolerance: -15
}
},
{
label: 'Baja',
lineWidth:2,
markerOptions: { style:'diamond' },
pointLabels: { show: true, location: 's', edgeTolerance: -15
}
}
],
legend: {
show: true,
location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w.
xoffset: 0, // pixel offset of the legend box from the x (or x2)
axis.
yoffset: 0, // pixel offset of the legend box from the y (or y2)
axis.
},
highlighter: {
show: true,
/*tooltipAxes: 'y',*/
showTooltip: false
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: eixX
},
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
72
Grau de Multimèdia Universitat Oberta de Catalunya
yaxis: {
max: 240
}
}
});
}
Estructura d’una pàgina HTML (control del pes) (app)
<body>
<div data-role="page" id="controlPeso" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<img class="logoRCsmall" src="../img/logo-RC-APP_header.svg">
<a href="pacienthd.html" id="goToInicio" data-rel="external" data-
ajax="false" class="ui-btn-left" data-theme="b" data-icon="home">Inicio</a>
</div>
<div data-role="content">
<div class="imgApartat"></div>
<p class="registOK" style="display:none"><strong>El registro se ha
efectuado correctamente</strong></p>
<h1>Control del peso</h1>
<p>Desde aquí, puede hacer un control del peso y de la diuresis residual
para así gestionar mejor la ingesta de líquidos.</p>
<p class="dynamicMSG"></p>
<button id="newRegPeso" data-role="button" data-icon="plus" data-theme="b"
disabled="disabled">Nuevo registro</button>
<p class="dynamicMSGreg"></p>
<h2 class="dynamicMSG"></h2>
<div class="dataBox">
<h2>Peso</h2>
<div id="dataPes">
<div class="dataImgPes"></div>
<div id="dataPesRegist">
<div id="dataPesMax">Peso máximo: <span></span> kg</div>
<div id="dataPesHoy"><span></span> kg</div>
<div id="dataPesMin">Peso seco: <span></span> kg</div>
</div>
<div class="dataRecomend">
<p></p>
</div>
</div>
</div>
<div class="dataBox">
<h2>Diuresis residual</h2>
<div id="chart1"></div>
</div>
</div>
</div>
<div data-role="page" id="registroControlPeso" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<img class="logoRCsmall" src="../img/logo-RC-APP_header.svg">
<a href="#" class="ui-btn-left" data-theme="b" data-icon="arrow-l" data-
rel="back">Volver</a>
</div>
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
73
Grau de Multimèdia Universitat Oberta de Catalunya
<div data-role="content">
<h1>Registro para el control del peso</h1>
<p>Recuerde que debe registrar el peso y la diuresis residual a
diario.</p>
<p>Todos los campos son obligatorios: *</p>
<div class="dataBox">
<h2 class="colorRC">* Registro del peso de hoy</h2>
<select name="pesohd" id="pesohd">
<option>Seleccione</option>
<script type="text/javascript">pesokgHD();</script>
</select>
<a href="#infoDialogPesoHD" class="recomendation" data-
transition="fade">Recomendaciones a la hora de pesarte</a>
</div>
<div class="dataBox">
<h2 class="colorRC">* Registro de la diuresis residual de hoy
(ml)</h2>
<input type="number" name="diuresishd" id="diuresishd">
<a href="#infoDialogDiuHD" class="recomendation" data-
transition="fade">Como medir la diuresis residual</a>
</div>
<button id="goToConfirmRegistHD" data-theme="b" data-icon="check"
disabled="disabled">Registrar</button>
</div>
</div>
<div id="confirmRegistHD" class="infoDialog" data-theme="a" data-role="page"
dialog="true">
<div class="ui-dialog-contain ui-overlay-shadow ui-corner-all" role="dialog">
<div data-role="header">
<h1>Confirme</h1>
</div>
<div class="infoDialogConcret" data-role="content">
<p>Estos son los valores que ha introducido:</p>
<ul>
<li>Peso: <span></span> kg</li>
<li>Diuresis residual: <span></span> ml</li>
</ul>
<p>¿Es correcto?</p>
<div class="ui-grid-a" style="text-align:center">
<div class="ui-block-a">
<a class="ui-btn ui-icon-delete ui-btn-icon-left ui-btn-
inline" data-icon="check" data-theme="a" data-rel="back">No, corregir</a>
</div>
<div class="ui-block-b">
<a id="confirmRegistHDbtn" class="ui-btn ui-icon-check ui-
btn-icon-left ui-btn-inline" data-icon="check" data-theme="a" data-rel="back">¡Sí,
enviar!</a>
</div>
</div>
</div>
</div>
</div>
<div id="infoDialogPesoHD" data-theme="a" id="infoDialogPesDP" data-role="page"
dialog="true">
<div class="ui-dialog-contain ui-overlay-shadow ui-corner-all" role="dialog">
<div class="infoDialogConcret" data-role="content">
<h3>Recomendaciones a la hora de pesarse</h3>
<p></p>
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
74
Grau de Multimèdia Universitat Oberta de Catalunya
<a class="ui-btn ui-icon-check ui-btn-icon-left" data-icon="check"
data-theme="b" data-rel="back">¡Entendido!</a>
</div>
</div>
</div>
<div id="infoDialogDiuHD" data-theme="a" id="infoDialogPesDP" data-role="page"
dialog="true">
<div class="ui-dialog-contain ui-overlay-shadow ui-corner-all" role="dialog">
<div class="infoDialogConcret" data-role="content">
<h3>Recomendaciones para medir la diuresis residual</h3>
<p></p>
<a class="ui-btn ui-icon-check ui-btn-icon-left" data-icon="check"
data-theme="b" data-rel="back">¡Entendido!</a>
</div>
</div>
</div>
<div id="ajaxLoader">
<img src="../css/images/ajax-loader.gif">
</div>
</body>
PHP de la pàgina de pacient (web)
<?php include('commons/renalclickFunctions.php'); ?>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Renalclick</title>
<link rel="stylesheet" type="text/css" media="all"
href="pluggins/dataTables/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" media="all"
href="pluggins/dataTables/dataTables.responsive.css">
<link rel="stylesheet" type="text/css" media="all" href="css/renalclickweb.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="pluggins/charts/Chart.min.js"></script>
<script type="text/javascript"
src="pluggins/dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript"
src="pluggins/dataTables/dataTables.responsive.js"></script>
<script type="text/javascript" src="js/next-in-dom.js"></script>
<script type="text/javascript" src="js/renalclickweb.js"></script>
</head>
<body>
<?php include('include/header.php'); ?>
<section id="patientVIEW">
<?php
$_SESSION['IDpacient'] = $_GET['id'];
$_SESSION['IDtract'] = $_GET['tract'];
include('include/patientData.php');/*incloem les dades del pacient
amb l'id passat per url*/
?>
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
75
Grau de Multimèdia Universitat Oberta de Catalunya
<script>
//passem el nom del pacient per utilitzar-lo en els registres, quan no
n'hi ha
var nomPacient = "<?php echo $pacient['pNom']; ?>";
</script>
<ul class="button top-nav">
<li><a href="principal.php" class="home bgIMG">Inicio</a></li>
</ul>
<div id="patientDATA">
<img id="patientPHOTO" src="img/user.png">
<h2><?php echo ($pacient['pNom']." ".$pacient['pCognoms']) ?></h2>
<p><strong>Tratamiento:</strong> <?php
echo(escriuTractament($pacient['pTract'])); ?></br>
<span class="showMoreInfo">información sobre <?php echo
($pacient['pNom']); ?></a></p>
<div class="hiddenBox" style="display:none">
<p>De <?php echo ($pacient['pCiutat'].", ".$pacient['pProv'].".");
?></br>
<strong>Edad:</strong> <?php echo (quantsAnys($pacient['pNaix'])) ?>
años</br>
<strong>Fecha de alta:</strong> <?php echo
(getDiaDelMes($pacient['pDataAlta'])." de ".getMes($pacient['pDataAlta'])." de
".getAny($pacient['pDataAlta'])); ?></p>
<p><strong>Teléfono:</strong> <?php echo ($pacient['pTlf']); ?></br>
<strong>Correo electrónico:</strong> <?php echo ($pacient['pEmail']);
?></p>
</div>
</div>
<ul id="patientOPTIONS">
<?php
switch($_SESSION['IDtract']){/*Depenent del tractament dibuixem un
punt de menú*/
case 1: echo("<li class='active'>Control del peso</li>"); break;
case 2: echo("<li class='active'>Control de líquidos</li>");
break;
case 3: echo("<li class='active'>Control de TA</li>"); break;
}
?>
<li>Signos y síntomas</li>
<li>Alarmas</li>
</ul>
<?php /*Controlem si venim de modificar el pes del pacient HD per mostrar un
missatge*/
if(isset($_GET['success'])):
?>
<div class="square">
<p class="checked bgIMG">Los límites del peso de <?php echo
($pacient['pNom']); ?> han sido modificados correctamente.</p>
</div>
<script>
setTimeout(function(){$('.square').slideUp();},4000);
</script>
<?php endif; ?>
<div class="optionMenu visible">
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
76
Grau de Multimèdia Universitat Oberta de Catalunya
<?php
switch($_SESSION['IDtract']){/*Depenent del tractament dibuixem un punt
de menú*/
case 1: include('include/chartPes.php'); break;
case 2: include('include/registroLiquidos.php'); break;
case 3: include('include/chartTA.php'); break;
}
?>
</div>
<div class="optionMenu hidden">
<?php include('include/registroSignosSintomas.php');?>
</div>
<div class="optionMenu hidden">
<?php
switch($_SESSION['IDtract']){/*Depenent del tractament dibuixem un punt
de menú*/
case 1: include('include/registroAlarmasHD.php'); break;
case 2: include('include/registroAlarmasDP.php'); break;
case 3: include('include/registroAlarmasTR.php'); break;
}
?>
</div>
</section>
</body>
</html>
PHP de la pàgina de recuperació dels registres TA (web)
<?php
/*Incloem l'arxiu de connexió a la base de dades*/
include '../commons/databaseconnect.php';
/*Prenem l'ID de l'usuari, el valor d'offset (a partir de quin registre hem de
recuperar dades), el limit (quants registres) i la presa (moment del dia)*/
$userID = $_GET['ID'];
$offset = $_GET['offset'];
$limit = $_GET['limit'];
$presa = $_GET['presa'];
/*Fem una primera consulta per saber quants registres hi ha, que ens servirà per
calcular la paginació*/
$query = "SELECT * FROM constantstr WHERE pacient_usuaris_ID = ".$userID." AND presa =
'".$presa."'";
$result = mysqli_query($shot, $query);
if (!$result) {
die('Invalid query: ' . mysqli_error($shot));
}
if(mysqli_num_rows($result) > 0){ /*S'han obtingut registres de TA*/
/*Segona consulta per agafar els registres que volem (màxim 30) a partir del
registre marcat per offset*/
$query2 = "SELECT datahora,tamin,tamax FROM constantstr
WHERE pacient_usuaris_ID = ".$userID."
AND presa = '".$presa."'
ORDER BY datahora DESC LIMIT ".$offset.",".$limit;
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
77
Grau de Multimèdia Universitat Oberta de Catalunya
$result2 = mysqli_query($shot, $query2);
if (!$result2) {
die('Invalid query: ' . mysqli_error($shot));
}
/*Guardem els resultats obtinguts amb la segona consulta*/
while ($row2 = mysqli_fetch_array($result2)){
$respostam[] = array (
'datahora' => $row2['datahora'],
'tamin' => $row2['tamin'],
'tamax' => $row2['tamax']
);
};
$respostam["numReg"] = count($respostam);/*Número de registres obtinguts a la
segona consulta*/
$respostam["numRegTotal"] = mysqli_num_rows($result);/*Número de registres
totals obtinguts a la primera consulta*/
$respostam["exit"] = true;
} else { /*No s'han obtingut registres*/
$respostam["exit"] = false;
}
$resultatsJson = json_encode($respostam);
echo $_GET['jsoncallback'].'('.$resultatsJson.');';
?>
Funcions generals d’ús comú al web
<?php
/********************************************************/
/*Funcions que poden ser utilitzades a totes les pàgines*/
/****Aquest arxiu s'inclou al principi de totes elles****/
/********************************************************/
/*Escriu el tractament segons l'enter*/
function escriuTractament($number){
switch($number){
case 1: $tractament = "Hemodiálisis"; break;
case 2: $tractament = "Diálisis peritoneal"; break;
case 3: $tractament = "Transplante renal"; break;
default: $tractament = "No definido"; break;
}
return $tractament;
}
/*Determina l'edat a partir d'una data en format YYYY-MM-DD*/
function quantsAnys($naixement){
/*time() torna els segons que han passat des de l'1 de gener del 1970*/
/*strtotime() converteix la data passada en els segons des de l'1 de gener del
1970*/
/*llavors fem el factor de conversió dividint la resta per 31556926 segons que
té un any, i ho arrodonim cap a baix (floor)*/
return floor( (time() - strtotime($naixement)) / 31556926);
}
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
78
Grau de Multimèdia Universitat Oberta de Catalunya
/*Extreure el dia a partir d'un datetime*/
function getDiaDelMes($datetime){
$data1 = explode("-",$datetime);
$data2 = explode(" ",$data1[2]);
return ((int)$data2[0]);
}
/*Extreure el mes a partir d'un datetime*/
function getMes($datetime){
$mesos =
array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','
Octubre','Noviembre','Diciembre');
$data = explode("-",$datetime);
$mes = $mesos[(int)($data[1])-1];
return $mes;
}
/*Extreure el mes abreujat a partir d'un datetime*/
function getMesShort($datetime){
$mesos =
array('ENE','FEB','MAR','ABR','MAY','JUN','JUL','AGO','SEP','OCT','NOV','DIC');
$data = explode("-",$datetime);
$mesShort = $mesos[(int)($data[1])-1];
return $mesShort;
}
/*Extreure l'any a partir d'un datetime*/
function getAny($datetime){
$data = explode("-",$datetime);
return $data[0];
}
/*Extreure l'hora sense els segons a partir d'un datetime*/
function getHora($datetime){
$data = explode(" ",$datetime);
$time = explode(":",$data[1]);
return ($time[0].":".$time[1]." h");
}
/*Extreure la data en format Dia Nom-del-mes Any a partir d'un datetime*/
function getDataF($datetime) {
return (getDiaDelMes($datetime)." ".getMes($datetime)." ".getAny($datetime));
}
/*Extreure la data en format YYYY-MM-DD a partir d'un datetime*/
function getData($datetime) {
$data = explode(" ",$datetime);
return ($data[0]);
}
?>
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
79
Grau de Multimèdia Universitat Oberta de Catalunya
Annex 3: Llibreries externes emprades
JQuery
https://jquery.com/
Biblioteca Javascript que permet interactuar amb pàgines HTML de manera simplificada, manipular els
elements del DOM, crear esdeveniments, animacions i inclús tècniques Ajax. És un software lliure i de
codi obert, sota llicència MIT i llicència pública general GNU.
L’avantatge principal d’aquesta llibreria, i és el motiu pel qual s’ha fet servir en aquest projecte, és que
permet modificar el contingut d’una pàgina HTML sense necessitat de recarregar la pàgina sencera, fent
que l’experiència d’usuari sigui molt més àgil.
JQuery Mobile
https://jquerymobile.com/
Biblioteca Javascript basada en Jquery que permet la maquetació de webs dissenyades específicament
per a dispositius mòbils. Jquery Mobile predefineix l’estructura, l’estil visual i les animacions entre
pàgines, però permet, amb coneixement, personalitzar cadascun d’aquests aspectes.
La llibreria inclou els arxius Javascript (Jquery i Jquery Mobile) i els arxius CSS (tema, icones i estructura).
S’ha fet servir la última versió estable 1.4.5, juntament amb la versió 1.10.2 de Jquery.
Charts.js
http://www.chartjs.org/
Llibreria Javascript de codi obert, sota la llicència MIT, que permet crear fins a sis tipus de gràfiques amb
unes funcions senzilles i de codi molt net, emprant l’etiqueta <canvas> d’HTML5. Les característiques que
m’han fet optar per aquesta llibreria enfront d’altres és la seva lleugeresa (11,01kb en la versió mínima),
que els gràfics s’adapten a la mida de la pantalla, que és modular (permeten carregar només els tipus de
gràfiques que necessites pel projecte) i la interactivitat que incorporen les gràfiques dibuixades, podent
veure les dades de cada línia o barra en passar el ratolí per damunt o clicar.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
80
Grau de Multimèdia Universitat Oberta de Catalunya
S’ha fet servir només a la plataforma web d’interacció amb el professional sanitari, per a mostrar les
constants dels pacients que van registrant a través de l’aplicació, ja que ha resultat ser incompatible amb
Jquery Mobile.
jqPlot
http://www.jqplot.com/
Llibreria Javascript molt semblant a Charts, també fa ús de <canvas> i és una mica més pesada que
l’anterior (169kb en la seva versió mínima), però no ha demostrat incompatibilitats amb Jquery Mobile,
de manera que s’ha integrat en la versió d’aplicació mòbil del sistema Renalclick.
DataTables
http://www.datatables.net
Llibreria basada en JQuery que permet l’organització de taules de manera dinàmica, aplicant filtres
automàtics d’ordenació per columnes, paginació de files i adaptació a dissenys responsive. Ocupa 78kb
en la seva versió mínima i va acompanyat d’una fulla d’estils, que s’ha hagut de sobreescriure per seguir
amb les línies de disseny de la plataforma web de Renalclick.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
81
Grau de Multimèdia Universitat Oberta de Catalunya
Annex 4: Captures de pantalla
Aplicació per a dispositius mòbils
(Esquerra) Figura 15: Pantalla d’inici de sessió (app).
(Dreta) Figura 16: Principals accessos del pacient amb tractament d’hemodiàlisi (app).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
82
Grau de Multimèdia Universitat Oberta de Catalunya
(Esquerra) Figura 17: Registre del pes del pacient amb tractament d’hemodiàlisi (app).
(Dreta) Figura 18: Registre de la diüresi residual del pacient amb tractament d’hemodiàlisi (app).
(Esquerra) Figura 19: Principals accessos del pacient amb trasplantament renal (app).
(Dreta) Figura 20: Registre de la pressió arterial del pacient amb trasplantament renal (app).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
83
Grau de Multimèdia Universitat Oberta de Catalunya
(Esquerra) Figura 21: Principals accessos del pacient amb tractament de diàlisi peritoneal (app).
(Dreta) Figura 22: Registre de pes, pressió arterial, ultrafiltració i diüresi del pacient amb diàlisi peritoneal (app).
(Esquerra) Figura 23: Llista de signes i símptomes en diàlisi peritoneal, que varien segons el tractament (app).
(Dreta) Figura 24: Registre de signes i símptomes del pacient d’hemodiàlisi (app).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
84
Grau de Multimèdia Universitat Oberta de Catalunya
Plataforma web
Figura 25: Pantalla d'inici, amb la llista de pacients actius (web).
Figura 26: Vista d'un pacient d'hemodiàlisi amb els registres del pes (web).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
85
Grau de Multimèdia Universitat Oberta de Catalunya
Figura 27: Vista dels signes i símptomes del mateix pacient (web).
Figura 28: Vista de les alarmes generades pel pacient (web).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
86
Grau de Multimèdia Universitat Oberta de Catalunya
Figura 29: Vista dels registres de tensió arterial d'un pacient trasplantat (web).
Figura 30: Vista del registre de líquids d'un pacient amb diàlisi peritoneal (web).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
87
Grau de Multimèdia Universitat Oberta de Catalunya
Figura 31: Pàgina d'alta de pacient, amb les validacions Ajax executant-se (web).
Figura 32: Pàgina de perfil del centre (web).
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
88
Grau de Multimèdia Universitat Oberta de Catalunya
Annex 5: Business plan
Captura del model de negoci del sistema Renalclick, realitzat seguint el model Canvas i que s’ha fet en
castellà per aprofitar-lo com a documentació en els processos de negociació de la Unitat d’Innovació Parc
Taulí per al desenvolupament del sistema.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
89
Grau de Multimèdia Universitat Oberta de Catalunya
Annex 6: Glossari
A
Ajax
Conjunt de tecnologies web que permeten la
transmissió de dades sense necessitat de
recarregar el total de la pàgina visitada.
Android
Sistema operatiu més emprat avui dia en
dispositius mòbils, propietat de Google.
D
Diüresi residual
En el context del pacient amb MRC, quantitat
d’orina que deposita al final del dia.
H
HTML
Llenguatge de marcatge que és l’estàndard
emprat per a la creació i visualització de pàgines
web.
J
Javascript
Llenguatge de programació orientat a objectes,
dinàmic i molt emprat en web pel costat de
client.
JQuery
Llibreria basada en Javascript que simplifica la
manera d’interactuar amb els elements del
DOM, i que a més inclou funcions per incorporar
animacions i controlar esdeveniments.
JQuery Mobile
Llibreria basada en JQuery que inclou mètodes,
esdeveniments i fulles d’estils per dissenyar
aplicacions web pensades per a dispositius
mòbils.
JSON
Format per a l’enviament de dades, interpretat i
manipulat principalment per Javascript.
M
MRC
Acrònim de malaltia renal crònica, en la qual el
funcionament d’un dels ronyons, o els dos, no
funcionen bé i s’han de fer tractaments
substitutius.
P
Phonegap
Framework desenvolupat inicialment per Nitobi
que permet fer aplicacions híbrides per a
dispositius mòbils a partir d’HTML, Javascript i
CSS.
PHP
Llenguatge de programació web, del costat de
servidor, que permet la generació de continguts
dinàmicament.
U
Ultrafiltració
En diàlisi peritoneal, diferència entre l’aigua que
surt i torna a entrar a la bossa, quan l’aigua és
arrossegada des de la sang a la cavitat
peritoneal.
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
90
Grau de Multimèdia Universitat Oberta de Catalunya
Annex 7: Bibliografia
OCATT (Organització Catalana de Trasplantaments),
Generalitat de Catalunya – Departament de Salut:
“Registre de malalts renals de Catalunya - Informe
estadístic 2012”. Barcelona (juny 2013), Servei Català
de Salut.
“mHealth App Developer Economics 2014 - The State
of the Art of mHealth App Publishing”. Alemanya
(maig 2014), research2guidance.
Diario Médico, 29 d’abril – 5 maig 2013:“Las 'apps' de
salud campan a sus anchas”.
Eloi Font Mante i Ramón Cifuentes Ventura (6 de
maig del 2014): “Los Riesgos jurídicos de las apps de
salud”. El Derecho.
Obtingut de
http://tecnologia.elderecho.com/tecnologia/privacida
d/riegos-juridicos-App-salud_11_675055003.html
Teresa Pereyra (23 d’abril de 2014): “mHealth: Salud
en tu móvil”. Ecija.
Obtingut de http://www.ecija.com/articulos/mhealth-
salud-en-tu-movil/
Desarrollo web: Introducción al framework
PhoneGap
http://www.desarrolloweb.com/articulos/inro-
framework-phonegap.html
Desarrollo web: Uso de Ajax muy sencillo con
jQuery
http://www.desarrolloweb.com/articulos/uso-ajax-
jquery.html
YouTube: Curso Phonegap, qué es y cómo empezar
https://www.youtube.com/watch?v=AC1f5mgPwfQ
YouTube: PhoneGap enviar datos a MySQL con PHP
y AJAX
https://www.youtube.com/watch?v=nJvWFIkXScw
JQuery Mobile
JQuery Mobile Demos
Phonegap Documentation
http://docs.phonegap.com/
Phonegap Build
https://build.phonegap.com
Charts.js Documentation
http://www.chartjs.org/docs/
jqPlot – Pure Javascript plotting
http://www.jqplot.com/
Stackoverflow
http://stackoverflow.com/
W3Schools Online Web Tutorials
http://www.w3schools.com/
Flaticon – Free Vector Icons
http://www.flaticon.com/
Treball de final de grau “Renalclick: sistema per a l’autogestió de la malaltia renal crònica”
91
Grau de Multimèdia Universitat Oberta de Catalunya