“SISTEMA INFORMÁTICO PARA LA IDENTIFICACIÓN ... · universidad central del ecuador facultad de...
Transcript of “SISTEMA INFORMÁTICO PARA LA IDENTIFICACIÓN ... · universidad central del ecuador facultad de...
UNIVERSIDAD CENTRAL DEL ECUADOR
FACULTAD DE INGENIERÍA, CIENCIAS FÍSICAS Y MATEMÁTICA
CARRERA DE INGENIERÍA INFORMÁTICA
“SISTEMA INFORMÁTICO PARA LA IDENTIFICACIÓN,
ALMACENAMIENTO Y PROCESAMIENTO DE IMÁGENES MÉDICAS”
TRABAJO DE GRADUACIÓN PREVIO A LA OBTENCIÓN DEL TÍTULO DE
INGENIERÍA EN INFORMÁTICA
AUTORES:
CARCELÉN ORDOÑEZ LUIS ALBERTO
PADILLA SOTO LENIN ALBERTO
TUTOR: ING. DARWIN RODOLFO CAINA AYSABUCHA, MSc
Quito-10 de Marzo
2017
VII
DEDICATORIA
A Dios,
Por bendecirme, darme la salud y vida,
A mi Abuelita por todos sus valores inculcados,
A mis Padres por todo el amor, enseñanzas y apoyo durante toda mi vida,
A mis hermanos que han sido el motor de mi vida,
a mi novia y amigos por no dejarme
vencer y seguir superándome cada día
Lenin
A Dios,
Por haberme dado la vida y la salud
en cada día e iluminarme a cada paso que doy.
A mis Padres,
que me han apoyado incondicionalmente y nunca han dejado de creer en mí.
A mis familiares que han sido un elemento importante de mi vida y mi felicidad.
A mis amigos que me han apoyado incondicionalmente y me han dejado
grandes enseñanzas de amistad y lealtad.
Luis
VIII
AGRADECIMIENTOS
Queremos agradecer a nuestro tutor Ing. Darwin Caina, por habernos guiado de la
mejor manera durante esta etapa, ya que gracias a sus consejos y su dedicación hemos podido
alcanzar esta meta que es un gran logro para nuestras vidas.
Primero quiero dar las gracias a Dios por las grandes bendiciones derramadas sobre mi
hogar y mi familia, a mis padres Alberto y Mariana por el amor incondicional que me han
brindado y por siempre estar a mi lado sin importar la adversidad.
Gracias Padres,
Luis
Quiero agradecer a Dios por darme la salud, conocimiento y sabiduría para culminar
esta etapa, a mis padres Lenin y Jacqueline por todo el apoyo durante toda mi vida e
impulsarme para alcanzar este sueño.
Mil Gracias,
Lenin
IX
CONTENIDO
AUTORIZACIÓN DE LA AUTORIA INTELECTUAL ......................................................................... II
CERTIFICACIÓN DEL TUTOR ........................................................................................................... III
DESIGNACIÓN DE TRIBUNAL ............................................................................................................ V
CALIFICACIÓN DEL TRIBUNAL ....................................................................................................... VI
INTRODUCCIÓN .................................................................................................................................... 1
MARCO TEÓRICO .................................................................................................................................. 3
1.1 Antecedentes ............................................................................................................................ 3
1.2 Fundamentación Teórica .......................................................................................................... 3
1.2.1 Aplicaciones Web ................................................................................................................. 3
1.2.2 Base de datos orientada a grafos (BDOG) ........................................................................... 4
1.2.3 Javascript (JS) ...................................................................................................................... 7
1.2.4 Cascading style sheets (CSS) ............................................................................................... 8
1.2.5 Procesamiento de imágenes ................................................................................................. 9
METODOLOGÍA ................................................................................................................................... 10
1.3 Fase de Requisitos .................................................................................................................. 10
1.4 Fase de selección de herramientas de desarrollo (Diseño). .................................................... 11
1.4.1 Capas del sistema ............................................................................................................... 13
1.4.2 Definición del Entorno de trabajo ...................................................................................... 14
X
1.4.3 Configuración del Entorno de trabajo ................................................................................ 14
1.4.4 Diseño de la Base de Datos ................................................................................................ 15
1.4.5 Diseño de los Wireframes .................................................................................................. 22
FASE DE DESARROLLO ..................................................................................................................... 25
1.5 Descripción de Procesos ......................................................................................................... 25
1.5.1 Proceso de ingreso de parámetros ...................................................................................... 25
1.5.2 Proceso de ingreso de imágenes ......................................................................................... 26
1.5.3 Proceso de selección y procesamiento de imágenes ........................................................... 28
1.5.4 Proceso de búsqueda y visualización de imágenes............................................................. 29
1.5.5 Proceso de generación de reportes ..................................................................................... 30
1.6 Desarrollo de la Aplicación Web ............................................................................................ 31
1.6.1 Estructura del Proyecto ...................................................................................................... 31
1.6.2 Instalación de plugins requeridos para funcionamiento de la aplicación. .......................... 34
1.6.3 Implementación del Servidor Web ..................................................................................... 35
1.6.4 Conexión con la Base de Datos .......................................................................................... 43
1.6.5 Creación del archivo routes.js ............................................................................................ 44
1.6.6 Creación de la Pantalla de Inicio y Login .......................................................................... 66
RESULTADOS....................................................................................................................................... 78
1.7 Ingreso al sistema ................................................................................................................... 78
1.8 Ingreso de Parámetros ............................................................................................................ 79
1.9 Ingreso usuarios ...................................................................................................................... 80
1.10 Doctor ..................................................................................................................................... 82
XI
1.11 Procesamiento de imágenes .................................................................................................... 84
1.12 Generación de Reportes .......................................................................................................... 86
CONCLUSIONES .................................................................................................................................. 89
RECOMENDACIONES ......................................................................................................................... 91
GLOSARIO ............................................................................................................................................ 92
BIBLIOGRAFÍA .................................................................................................................................... 94
ANEXOS ................................................................................................................................................ 95
XII
LISTA DE TABLAS
Tabla 2. 1 Propiedades del Nodo Doctor ...................................................................... 16
Tabla 2. 2 Propiedades del nodo Patient ...................................................................... 17
Tabla 2. 3 Propiedades del nodo Image ........................................................................ 17
Tabla 2. 4 Propiedades del nodo User .......................................................................... 18
Tabla 2. 5 Propiedades del nodo Observations ............................................................ 18
Tabla 2. 6 Propiedades del nodo área ........................................................................... 19
Tabla 2. 7 Propiedades del nodo process ...................................................................... 19
Tabla 2. 8 Propiedades del nodo specialty ................................................................... 19
Tabla 2. 9 Propiedades del nodo process ...................................................................... 20
Tabla 2. 10 Propiedades del nodo view ........................................................................ 20
Tabla 2. 11 Relaciones de los nodos ............................................................................ 22
XIII
LISTA DE FIGURAS
Figura 2. 1 Metodología Cascada ................................................................................. 10
Figura 2. 2 Capas del Sistema ...................................................................................... 14
Figura 2. 3 Entorno de trabajo ...................................................................................... 15
Figura 2. 4 Diagrama de los Nodos y sus relaciones .................................................... 16
Figura 2. 5 Pantalla de inicio ........................................................................................ 23
Figura 2. 6 Panel de usuario ......................................................................................... 24
Figura 3. 1 Proceso de ingreso de parámetros .............................................................. 25
Figura 3. 2 Proceso de ingreso de imágenes................................................................. 27
Figura 3. 3 Proceso de procesamiento de imágenes ..................................................... 28
Figura 3. 4 Proceso de búsqueda y visualización de imágenes .................................... 29
Figura 3. 5 Proceso de generación de reportes ............................................................. 30
Figura 3. 6 Representa la estructura de ficheros de la aplicación. ............................... 31
Figura 3. 7 Plugins necesarios de instalación ............................................................... 34
Figura 3. 8 Dependencias del módulo. ......................................................................... 36
Figura 3. 9 Instancia de Express. .................................................................................. 36
Figura 3. 10 Configuración del directorio de vistas y del motor de vistas. .................. 37
Figura 3. 11 Configuración de componentes Express. ................................................. 38
Figura 3. 12 Configuración de las rutas........................................................................ 38
Figura 3. 13 Manejo de Errores. ................................................................................... 39
Figura 3. 14 Manejo de Errores. ................................................................................... 39
XIV
Figura 3. 15 Manejo de Errores. ................................................................................... 40
Figura 3. 16 Configuración del Puerto ......................................................................... 41
Figura 3. 17 Funciones de Escucha de Eventos. .......................................................... 42
Figura 3. 18 Configuración del Puerto ......................................................................... 43
Figura 3. 19 Configuración del puerto ......................................................................... 44
Figura 3. 20 Dependencias del archivo routes.js .......................................................... 45
Figura 3. 21 Formato para la creación de ruta. ............................................................. 46
Figura 3. 22 Rutas del archivo routes.js. ...................................................................... 48
Figura 3. 23 homeController.js ..................................................................................... 50
Figura 3. 24 Dependencias del archivo ImgController.js ............................................. 50
Figura 3. 25 Función getViewImg................................................................................ 52
Figura 3. 26 Función postViewImg .............................................................................. 55
Figura 3. 27 Dependencias del archivo reportsController.js ........................................ 56
Figura 3. 28 Función getReportOne ............................................................................. 58
Figura 3. 29 Dependencias del archivo reportsController.js ........................................ 58
Figura 3. 30 Función getNewDoctor ............................................................................ 60
Figura 3. 31 Función postNewDoctor .......................................................................... 64
Figura 3. 32 Función getNewArea ............................................................................... 65
Figura 3. 33 Función postNewArea.............................................................................. 66
Figura 3. 34 Template nav.jade .................................................................................... 67
Figura 3. 35 Ruta de acceso a la vista home.jade ......................................................... 68
Figura 3. 36 Controlador index .................................................................................... 68
XV
Figura 3. 37 Vista home.jade ........................................................................................ 69
Figura 3. 38 Ruta de acceso a la vista singnin.jade ...................................................... 71
Figura 3. 39 Controlador getSignIn .............................................................................. 71
Figura 3. 40 Vista signin.jade ....................................................................................... 72
Figura 3. 41 Controlador postSignIn ............................................................................ 73
Figura 3. 42 Configuración app.js (módulo passport) .................................................. 74
Figura 3. 43 Archivo passport.js................................................................................... 77
Figura 4.1 Inicio del Sistema ........................................................................................ 78
Figura 4.2 Login del sistema ........................................................................................ 79
Figura 4.3 Panel de Control Administrador ................................................................. 79
Figura 4.4 Ingreso de parámetros ................................................................................. 80
Figura 4.5 Formulario de ingreso doctor ...................................................................... 81
Figura 4.6 Formulario de ingreso de pacientes ............................................................ 81
Figura 4.7 Panel de control del doctor .......................................................................... 82
Figura 4.8 Ingreso de imagen ....................................................................................... 83
Figura 4.9 Visualización de información ..................................................................... 83
Figura 4.10 Añadir observación ................................................................................... 84
Figura 4.11 Información de imagen previa a procesamiento ....................................... 85
Figura 4.12 Imagen original ......................................................................................... 85
Figura 4.13 Imagen con filtro ....................................................................................... 86
Figura 4.14 Modelo de reporte generado ..................................................................... 87
XVI
Figura 4.15 Reporte por área médica ........................................................................... 88
Figura 4.16 Reporte por procedimiento médico ........................................................... 88
XVII
RESUMEN
TEMA: “SISTEMA INFORMÁTICO PARA LA IDENTIFICACIÓN,
ALMACENAMIENTO Y PROCESAMIENTO DE IMÁGENES MÉDICAS”
Autores: Luis Alberto Carcelén Ordoñez
Lenin Alberto Padilla Soto
Tutor: Darwin Rodolfo Caina Aysabucha
En el campo de la medicina el uso de las imágenes ayuda a identificar enfermedades,
por lo que es uno de los procesos más utilizados en el diagnóstico, esto puede llevarse a cabo
gracias a la tecnología que cumple un papel muy importante dentro de esta área.
El presente proyecto busca ayudar a llevar un registro de este proceso por medio del
almacenamiento de las imágenes, basado en el uso de las imágenes como información, las
mismas que deberán ser identificadas y clasificadas de acuerdo a sus características, con el fin
de poder manejar esta información de una forma sencilla y a través del procesamiento de
imágenes, se tendrá una mejor perspectiva de la imagen resaltando ciertas características
relevantes.
En el desarrollo de esta aplicación se ha utilizado un entorno de ejecución para
javascript, llamado Node Js. En el almacenamiento de la información se utilizó una base de
datos NoSql orientada a grafos Neo4j, con el fin de obtener el máximo rendimiento posible y
para el procesamiento imágenes se utilizó Caman js la cual es una librería para javascript que
se adapta a los requerimiento de la aplicación.
PALABRAS CLAVES: SISTEMAS INFORMÁTICOS /NODE JS/ NO SQL/
NEO4J/ JAVASCRIPT/ CAMAN JS/
XVIII
ABSTRACT
TOPIC: “COMPUTER SYSTEM FOR IDENTIFICATION, STORAGE AND
PROCESSING OF MEDICAL IMAGES”
In medicine, the use of images helps identifying diseases, for that reason it is
one of the most used processes in diagnosis and that can be accomplished thanks to
technology, which plays a very important role within the area.
The present project seeks to keep a record of this process through the storage
of those images, based on the use of images as information, identifying and
classifying them according to their characteristics, in order to manage this
information in a simple way and through the processing of images, having a better
perspective by highlighting relevant characteristics.
In the development of this application an execution environment for javascript
called Node Js has been used. For information storage, a Neo4j graph-oriented NoSql
database was used in order to obtain the maximum possible performance, and for the
image processing Caman js was used, which is a library for javascript that adapts to
the application requirements.
Authors: Luis Alberto Carcelén Ordóñez
Lenin Alberto Padilla Soto
Tutor: Darwin Rodolfo Caina Aysabucha
KEYWORDS: INFORMATION SYSTEMS/NODE JS/ NO SQL/ NE04J/ JAVASCRIPT/ CAMAN JS/
1
INTRODUCCIÓN
El área médica en la actualidad ya no solamente se limita a la medicina como tal, sino
la expansión de esos límites a otros campos para que proporcionen una base sólida para la
buena práctica médica. Un área fundamental para el desarrollo de la medicina es la
imagenología la cual se utiliza para revelar, diagnosticar y examinar enfermedades o para
estudiar la anatomía y las funciones del cuerpo, por desgracia las técnicas utilizadas para
obtener las imágenes son perjudiciales para la salud del paciente que los recibe, los efectos de
estas técnicas son muy destructivas para cualquier tipo de tejido vivo como ejemplo, este
puede provocar daños celulares, y posiblemente llegar a formar tumores cancerígenos, o
afectar de forma directa al sistema sanguíneo y causar anemia entre otras enfermedades.
El registro de las imágenes en los tratamientos de los diagnósticos en una base de
datos, ayuda a que no se repitan innecesariamente las técnicas sobre el paciente para obtener
las imágenes por las implicaciones colaterales en la salud del paciente.
El médico es la persona que maneja la información de sus pacientes, procesa esta
información, la almacena en un historial clínico, y registra la evolución del paciente frente a
los protocolos y procedimientos terapéuticos que le aplica, es por esta razón que el médico
debe manejar de manera adecuada la información que le proporciona la imagenología ya que
es una herramienta fundamental para su diagnóstico final en muchos de los casos.
El objetivo general de este proyecto es desarrollar un sistema informático para la
identificación, almacenamiento y procesamiento de imágenes médicas.
Los objetivos específicos son:
Recopilar y clasificar las imágenes médicas.
2
Determinar las herramientas de diseño y desarrollo de la base de datos.
Clasificar e identificar las imágenes médicas por sus características.
Definir el procesamiento y uso de la información.
Este proyecto ayudara al médico a llevar de mejor manera un historial clínico de sus
pacientes en base a sus imágenes que previamente han sido almacenadas, clasificadas y
procesadas.
3
MARCO TEÓRICO
1.1 Antecedentes
En los últimos años el desarrollo tecnológico ha tenido un gran crecimiento y un rol
importante en el área de la medicina, revolucionando este campo, por esta razón se considera
que la tecnología es una herramienta fundamental para la atención, diagnóstico y tratamiento
de los pacientes.
A pesar de todo el proceso generado por la tecnología, no se debe perder de vista que
en el ejercicio clínico, es primordial el examen cuidadoso del paciente (interrogatorio y
exámenes físicos completos), ya que gracias a esta información obtenida el médico puede
optar por mejorar su diagnóstico a través del uso de imágenes que complementen estos
resultados.
Los casos más destacados en los que la tecnología es un pilar fundamental para el
diagnóstico de enfermedades, son en los que se necesita ayudas imagenológicas.
1.2 Fundamentación Teórica
1.2.1 Aplicaciones Web1
Una aplicación web es todo tipo de aplicación que se pueda acceder a través de la web
por medio de una red como internet o una intranet.
El término de aplicación web se utiliza también para referirse a los programas
informáticos que son ejecutados en un navegador (por ejemplo, un applet de Java) o
1 Alegsa, L. (05 de Diciembre de 2015). ALEGSA. Recuperado el 10 de Noviembre de 2016, de
http://www.alegsa.com.ar/Dic/
4
codificado con lenguajes soportados por el navegador tales como JavaScript en conjunto con
HTML.
Las aplicaciones web tienen varias ventajas, una de ellas es la facilidad de
mantenimiento y actualización de las aplicaciones, no tiene la necesidad de distribuir e
instalar un software en centenares clientes. Pueden ser ejecutadas en varias plataformas por la
facilidad de portabilidad de estas aplicaciones en navegadores web.
No existe una diferencia clara entra una web interactiva y una aplicación web, una
web interactiva mantiene su uso sin necesidad de actualizarse mientras que la aplicación web
tiene funcionalidades similares a aplicaciones de escritorio o también a aplicaciones móviles.
(Alegsa, 2015)
1.2.2 Base de datos orientada a grafos (BDOG)2
La base de datos orientada a grafos representa toda la información en nodos de un
grafo y sus respectivas relaciones (aristas). Gracias a esto se puede utilizar la teoría de grafos
para recorrer la base de datos cuando puede describir los atributos de los nodos (entidades) y
de las relaciones (aristas), la normalización debe ser importante en las bases de datos
orientadas a grafos, lo que significa que las tablas deben ser de una sola columna y un
relación con solo con dos. Esto consigue que todo tipo de cambio a realizar en la estructura de
la información tenga un efecto local, lo que muestra que un sistema de gestión de base de
datos orientada a grafos se crea usualmente para uso transaccional, para optimizar el
rendimiento, la integridad de datos y finalmente disponibilidad operacional de sistemas. Para
2 Velásquez, W. (Noviembre de 12 de 2013). ACADEMIA. Recuperado el 10 de Diciembre de 2016, de
http://www.academia.edu/5731075/Bases_de_datos_orientadas_a_grafos_y_su_enfoque_en_el_mundo_real
5
el estudio de esta tecnología se debe tener presente dos propiedades importantes que son las
siguientes:
a. Almacenamiento Subyacente
Ciertas bases de datos emplean el almacenamiento nativo que se ha mejorado y
diseñado para el almacenamiento y gestión de los grafos, sin embargo no todas las
bases de grafos la usan para el almacenamiento, otros serializan todos los datos en
bases de datos relacionales, base de datos orientadas a objetos o también bases de
datos de uso general.
b. Motor de Procesamiento
Para esto se debe tener muy claro el concepto de aristas y vértices para el
estudio de esta tecnología ya que las bases de datos orientadas a grafos utilizan el
concepto de los mismos y lo amplían.
La perspectiva del usuario es mirar como un comportamiento de grafos normal
el cual permite realizar el CRUD (Create, Read, Update and Delete) sobre la base de
datos, también es importante resaltar que el almacenamiento y procesamiento de las
bases orientas a grafos se deben clasificar como buenas ni malas, sino como la
implementación de una ingeniería que ayuda al mejoramiento del rendimiento en
algunas aplicaciones, pero de igual forma perjudican a otras
El principal servicio del almacenamiento en grafos, y su principal objetivo, es
tener un alto rendimiento y facilidad de escalabilidad.
Base de datos orientada a grafos son las que permiten la adyacencia libre de índice lo
que señala que cada elemento conlleve un apuntador directo a sus elementos adyacentes por
lo cual no es necesario realizar consultas por índices. Otro aspecto a tener en cuenta, es que
6
las relaciones entre entidades forman parte de la teoría de los grafos, por lo tanto las bases de
datos orientadas a grafos facilitan la administración de sus relaciones.
Cuando se reúnen abstracciones de nodos y las relaciones en las estructuras que se
tienen por aristas, las bases de datos orientadas a grafos permiten crear modelos muy
sofisticados que son asignados arbitrariamente a nuestro dominio del problema.
Por lo tanto son más simples los modelos resultantes y más expresivos al mismo
tiempo que los generados en bases de datos relacionales tradicionales y otras bases NoSQL.
Este modelo esta diseñado para datos en la que sus relaciones estan representadas en
forma de grafo, por lo tanto estos datos son elementos interconectados con varias relaciones
entre ellos.
Con este tipo de almacenamiento se podría manejar información de relaciones
sociales, mapas de carreteras o topologías de red, etc.
Aunque estructuras de datos en forma de grafos son teóricamente normalizables,
incluyendo a sistemas relacionales, esto tiene como serias consecuencias en el desempeño de
las consultas debido a las características de implementación de los RDBMS (Relational
Database Management System).
Cada operación sobre alguna relación en una operación de unión para el gestor de los
datos, lo que implica en un proceso lento y no es escalable ante un ascendente número de
tuplas en estas tablas. (Velásquez, 2013)
Para modelar la información de in grado se necesita de tres elementos básicos:
a. El nodo que es el vértice.
b. La relación que es la arista con su dirección y tipo (etiquetado y dirigido).
7
c. La propiedad que es el atributo en los nodos y en las relaciones.
1.2.3 Javascript (JS)3
Javascript es un lenguaje de programación que nació con el motivo de codificar
ciertos comportamientos de las páginas web, ayudando a la interacción de un usuario y una
sencilla automatización, se puede decir que surgió como un “lenguaje de scripting” para el
lado del cliente.
Las aplicaciones web se han visto obligadas al uso del Javascript que encontramos
hoy, llegue a niveles de complejidad muy altos y compararse con lenguajes de primer nivel.
Javascript se ha convertido en un lenguaje “integrador”, se lo encuentra en varios
ámbitos tales como en Internet y la web, hoy por hoy es la base de sistemas operativos para
los computadores y además para dispositivos con arquitectura de servidor y del cliente.
El motivo original por el cual surgió el Javascript se ha quedado pequeña que fue el de
crear pequeños programas para realizar acciones dentro de una página web.
Javascript puede hacer todo tipo de acciones e interacciones en un sitio web, en un
comienzo se empleó solo para validación en formularios, crear cajas de diálogo y otras
funciones, pero hoy es el motor de la mayoría de aplicaciones conocidas en el ámbito de
Internet tales como: Google, Facebook, Twitter y otros. El kernel de las aplicaciones de hoy
en día están basadas en Javascript, la web 2.0 se basa en Javascript para implementar
3 Alvarez, M. A. (10 de Octubre de 2015). Desarrollo Web. Recuperado el 10 de Diciembre de 2016, de
https://desarrolloweb.com/javascript/
8
aplicaciones enriquecidas que permiten crear efectos, interfaces de usuario y una
comunicación asincrónica con el servidor por medio de Ajax. (Alvarez, 2015)
1.2.4 Cascading style sheets (CSS)4
CSS es un lenguaje de hojas de estilos, que fue creado para el manejo del aspecto o
presentación de documentos digitales que son definidos en HTML y XHTML, con CSS es
mejor manera de llevar la separación de los contenidos y su presentación, para crear páginas
web complejas es imprescindible su uso.
Representa grandes ventajas separar la definición de los contenidos y la definición del
aspecto, ya que esto obliga la creación de documentos HTML/XHTML bien estructurados,
definidos y con significado completo (“Documentos semánticos”), esto permite mejorar la
accesibilidad del documento, reduce complejidad del mantenimiento y permite la
visualización el mismo documento en diferentes dispositivos.
Para marcar los contenidos al crear una página web se utiliza en primer lugar el
lenguaje HTML/XHTML, que designa la función a cada elemento dentro de la página web
tales como: párrafo, titular, texto destacado, tabla, lista de elementos, etc.
Cuando ya están creados los contenidos, se usa el lenguaje CSS para definir la
apariencia de los elementos tales como: color, tamaño y tipo de letra del texto, separación
horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.
(Sierra, 2006)
4 Sierra, M. (10 de Octubre de 2006). Aprenda a Programar. Recuperado el 5 de Diciembre de 2016, de
http://www.aprenderaprogramar.com/index.php?option=com_content&id=546:que-es-y-para-que-sirve-el-
lenguaje-css-cascading-style-sheets-hojas-de-estilo&Itemid=163
9
1.2.5 Procesamiento de imágenes5
El procesamiento de imágenes tiene como principal objetivo la mejora del aspecto de
imágenes y que sea más evidente los detalles que se desean hacer notar, dichas imágenes son
generadas por medios fotográficos o electrónicos, también por medio de monitores de
televisión.
Proceso de filtrado
Es el grupo de técnicas contenidas dentro del pre-procesamiento de imágenes que tiene
como objetivo obtener una imagen final a partir de una imagen origen, la cual sea más
adecuada para una aplicación específica mejorando las características de la misma.
Los principales objetivos que se persiguen con la aplicación de filtros son:
a. Suavizar la imagen: disminuir las variaciones de intensidad entre píxeles vecinos.
b. Eliminar ruido: quitar los píxeles ya que el nivel de intensidad es muy distinto al de
sus vecinos y su origen puede estar tanto en el proceso de adquisición de la imagen
como en el de transmisión.
c. Realzar bordes: destacar los bordes que se localizan en una imagen.
d. Detectar bordes: identificar los píxeles en el cual se produce un cambio brusco en la
función intensidad.
e. Por lo tanto se consideran a los filtros como operaciones que se aplican a los píxeles
de una imagen digital para optimizarla y mejorarla, recalcar cuya información o
conseguir un efecto especial en ella. (Riveros, 1991)
5 Riveros, O. (10 de Noviembre de 1991). Biblioteca Digital. Recuperado el 10 de Diciembre de 2016,
de http://bibliotecadigital.ilce.edu.mx/sites/ciencia/volumen2/ciencia3/084/htm/sec_9.htm
10
METODOLOGÍA
Para el desarrollo de este proyecto se utilizó como base la metodología de desarrollo
de software llamada en “Cascada”, la cual nos dice que es un proceso secuencial y de fácil
desarrollo en el cual muestra los pasos de desarrollo hacia abajo, como representación de una
cascada de agua por medio de una fase de análisis de necesidades, descrita en la figura 2.1.
Figura 2. 1 Metodología Cascada
1.3 Fase de Requisitos
Para el levantamiento de requisitos se ha recurrido a la colaboración de profesionales
en el campo de la medicina, con los que se mantuvo reuniones, en el anexo A se verifica actas
de las reuniones que se mantuvo, en las cuales han manifestado su opinión respecto a un
sistema de imágenes médicas y las funcionalidades que les gustaría ver reflejadas en el
sistema.
Requisitos
Diseño
Desarrollo
Resultados
Mantenimiento
11
a. Diseñar un sistema informático que permita llevar un registro de las imágenes médicas
de los pacientes.
b. El sistema a desarrollar se pueda acceder a través del navegador web.
c. El sistema cuente con una sección de administrador con las siguientes
funcionalidades:
Ingreso de nuevas áreas y especialidades médicas.
Ingreso de tipo de vistas utilizadas en las imágenes.
Ingreso de técnicas de escaneo utilizadas en las imágenes.
Ingreso del Procedimiento utilizado en las imágenes.
Ingreso de nuevos doctores y pacientes.
d. Los Doctores ingresados contaran con un perfil, cuyas funcionalidades serán las
siguientes :
Ingreso de imágenes de los pacientes.
Búsqueda de imágenes.
Generación de reportes.
Procesamiento de las Imágenes (Filtros para Imágenes).
1.4 Fase de selección de herramientas de desarrollo (Diseño).
Se establecen las herramientas de software las cuales servirán para el desarrollo de la
aplicación web. Primero con la selección de la plataforma en la cual se desarrollara la
aplicación.
Se eligió Node.js ya que es un entorno para la ejecución de JavaScript, creado con el
motor de JavaScript V8 de Chrome. Node.js utiliza un modelamiento de operaciones E/S sin
que exista bloqueo y es orientado a eventos, que lo convierte en liviano y eficiente. El
12
ecosistema de paquetes de Node.js es npm el cual es el gestor más grande de librerías de
código abierto en el mundo. (Node js, 2016)
Para el desarrollo del front-end de la aplicación web se empleara vistas Jade (Html
simplificado) las cuales permiten la integración con Node js, para mejorar el estilo de
visualización de la aplicación web se utilizara CSS usando el Framework Boostrap el cual
facilita el diseño web, los hace adaptables (Ajustable a cualquier dispositivo y tamaño de
pantalla). (Gonzalez, 2013)
Para el almacenamiento (Base de datos) se utilizara Neo4j, es una esa base de datos
orientada a grafos (Base de datos NoSql) es decir no maneja el tradicional modelo entidad-
relación basado en bases de datos Sql, se escogió la base de datos orientada a objetos (Base de
datos NoSql) por las siguientes ventajas respecto a la base de datos tradicional.
a. La escalabilidad y descentralización además soportan estructuras distribuidas.
b. Dichas bases de datos son más abiertas y flexibles y son adaptables a las necesidades
del proyecto y son menos complejas que los modelos de Entidad Relación.
c. Se pueden hacer cambios de los esquemas sin tener que parar bases de datos.
d. Tienen escalabilidad horizontal, ya que crecen en número de máquinas, mas no en
grandes máquinas.
e. Consume pocos recursos de la computadora.
f. Mayor desempeño en consultas en base de datos para grandes cantidades de datos.
Neo4j ofrece la protección de integridad de datos, el rendimiento de lectura y
escritura que necesita un rayo. Es la única base de datos orientada a grafos que
combina el almacenamiento gráfico nativo, una arquitectura escalable mejorada para
13
la velocidad y cumplimiento con ACID para asegurar la previsibilidad de las consultas
basadas en relaciones. (Neo4j, 2016)
Para el procesamiento de imágenes se utilizara CamanJs la cual es una librería de
javascript que permite la manipulación de imágenes usando objetos canvas de HTML5 se
destaca porque es una librería independiente la cual puede ser usada junto a otras librerías
como jQuery o Mootools sin problema.
CamanJS es muy fácil de ampliar ya que cuenta con nuevos filtros y complementos, y
tiene una amplia gama de funcionalidades de edición de imágenes, que sigue creciendo. Es
completamente independiente de la biblioteca. (Caman Js, 2016)
Para la generación de reportes se utilizara Jsreport el cual es un servidor de generación
de reporte de Javascript, el cual nos brinda gran flexibilidad ya que no necesita de ninguna de
dependencia dentro de la aplicación, para consumir los servicios de Jsreport solo debe
conectar al servidor y utilizar la API REST, además está diseñado con base en diseño web y
solo se necesita de un navegador web para diseñar los reportes necesarios para la aplicación.
(Jsreport, 2016)
1.4.1 Capas del sistema
Para el desarrollo de la aplicación acuerdo a las necesidades se han definido las
siguientes capas:
La Capa de Datos o persistencia, la que tiene por objetivo el almacenamiento y
recuperación de los datos, para nuestra aplicación utilizaremos Neo4j.
La Capa de Servicios, esta capa tiene por objetivo el canje de servicios entre
aplicaciones, en nuestro caso la implementamos para el consumo de reportes con JsReport.
14
La Capa de Negocios o lógica de negocio, es la encargada de llevar a cabo las
operaciones o procesos necesarios en el servicio que se brindara al cliente (Reglas del
Negocio), en esta capa estarán nuestra aplicación desarrollada en Node js.
La Capa de Presentación, es la capa encargada de la interacción con el usuario
únicamente se comunica con la capa de negocios, el navegador es el encargado de renderizar
y mostrar las vistas creadas en Node js con Jade, en la figura 2.2 se describe las capas del
sistema.
1.4.2 Definición del Entorno de trabajo
Para el desarrollo de la aplicación se ha definió sobre un entorno Windows 8.1, cabe
mencionar que el sistema puede compilar en otros sistemas operativos.
1.4.3 Configuración del Entorno de trabajo
Una vez que se ha definido el entorno de trabajo procedemos a la instalación y
configuración del mismo que se muestra en la figura 2.3, para la posterior instalación y
configuración de las herramientas necesarias para el desarrollo de la aplicación.
Figura 2. 2 Capas del Sistema
15
Figura 2. 3 Entorno de trabajo
1.4.4 Diseño de la Base de Datos
Para el diseño de la base de datos primero debemos realizar un análisis de los
requerimientos y las funcionalidades que se desea tener en el sistema, y se escoge una base de
datos que se ajuste a las necesidades requeridas. Para este proyecto se ha seleccionado una
base de datos NoSQL orientada a grafos llamada Neo4j, en el que utilizaremos su propio
lenguaje de consulta llamado Cypher.
Definición de Nodos
De acuerdo a los requerimientos del sistema hemos definido 10 nodos con sus
respectivas relaciones.
En la figura 2.4 se muestra los nodos a utilizar con sus respectivas relaciones, a
continuación describiremos cada una de ellas y sus propiedades.
Entorno Node.js Gestor de paquetes npm Neo4j versión 3.0.6
SmartGitEditor de texto sublime
16
Figura 2. 4 Diagrama de los Nodos y sus relaciones
Nodo Doctor: En este nodo se tendrá los datos personales de cada doctor.
Doctor
Etiqueta dr
Propiedades
name Nombre y apellidos del doctor.
identity_card Cédula de Identidad del doctor.
gender Genero del doctor.
birthdate Fecha de nacimiento del doctor.
Tabla 2. 1 Propiedades del Nodo Doctor
17
Nodo Patient: En este nodo se tendrá la ficha médica del paciente ingresado.
Patient
Etiqueta ptn
Propiedades
name Nombres y apellidos del paciente.
gender Género del Paciente.
birthdate Fecha de nacimiento del paciente.
brithplace Lugar de nacimiento del paciente.
ocupation Ocupación del paciente.
nationality Nacionalidad del Paciente.
phone Número telefónico del paciente.
place_resi Lugar de residencia del paciente.
civil_stt Estado Civil del paciente
Tabla 2. 2 Propiedades del nodo Patient
Nodo Image: En este nodo se carga la imagen en base64 que es asignada a
cada paciente.
Image
Etiqueta img
Propiedades
date Fecha de ingreso de la imagen.
base64 Imagen cargada en base64.
focus Enfoque de la imagen cargada.
Tabla 2. 3 Propiedades del nodo Image
18
Nodo User: En este nodo se tendrá las propiedades de los usuarios creados.
User
Etiqueta usr
Propiedades
password Nombres y apellidos del paciente.
profile Género del Paciente.
email Fecha de nacimiento del paciente.
username Lugar de nacimiento del paciente.
Tabla 2. 4 Propiedades del nodo User
Nodo Observations: En este nodo se guardara las observaciones añadidas por
parte del doctor a la imagen ingresada.
Observations
Etiqueta obs
Propiedades
date Fecha de ingreso de observación a la imagen.
observation Observación realizada a la imagen.
drresponsable El nombre del doctor responsable de la imagen.
Tabla 2. 5 Propiedades del nodo Observations
Nodo Area: En este nodo se crean las áreas médicas que se utilizaran para
asignar a las imágenes ya ingresadas.
19
Area
Etiqueta ar
Propiedades
Type Tipo de área ingresado.
Description Una breve descripción del tipo de área ingresada.
Tabla 2. 6 Propiedades del nodo área
Nodo Process: En este nodo se crean los procesos médicos que se utilizaran
para asignar a las imágenes ya ingresadas.
Process
Etiqueta pr
Propiedades
Type Tipo de proceso ingresado.
Description Una breve descripción del tipo de proceso ingresado.
Tabla 2. 7 Propiedades del nodo process
Nodo Specialty: En este nodo se crean las especialidades médicas que se
utilizaran para asignar a las imágenes ya ingresadas.
Specialty
Etiqueta sp
Propiedades
Namesp Tipo de especialidad ingresada.
Description Una breve descripción del tipo de especialidad ingresada.
Tabla 2. 8 Propiedades del nodo specialty
20
Nodo Technique: En este nodo se crean las técnicas médicas que se utilizaran
para asignar a las imágenes ya ingresadas.
Technique
Etiqueta th
Propiedades
Type Tipo de técnica ingresada.
Description Una breve descripción del tipo de técnica ingresada.
Tabla 2. 9 Propiedades del nodo process
Nodo View: En este nodo se crean los tipos de vistas médicas que se utilizaran
para asignar a las imágenes ya ingresadas.
View
Etiqueta vw
Propiedades
Type Tipo de vista ingresada.
Description Una breve descripción del tipo de vista medica ingresada.
Tabla 2. 10 Propiedades del nodo view
Relaciones: Son las encargadas de relacionar a los nodos entre sí.
Relaciones
Nombre Etiqueta Descripción Representación
belongs_usr blu
Representa la relación entre el
nodo Doctor y su nodo usuario,
indica el usuario que le
(usr)-[blu:belong_usr]->(dr)
21
pertenece a cada doctor.
belongs blg
Representa la relación entre el
nodo Patient con los nodos de
Image, indica a que usuario
pertenecen las imágenes.
(img)-[blg:belong]->(ptn)
responsable rsp
Representa la relación entre el
nodo Doctor con los nodos
Image, indica el doctor
responsable de la imagen.
(dr)-[rsp:responsable]->(img)
belongs_vw blvw
Representa la relación entre los
nodos Image y el nodo View,
indica las imágenes que
pertenecen a la vista.
(img)-[blvw:belongs_vw]->(vw)
belongs_ar blar
Representa la relación entre los
nodos Image y el nodo area,
indica las imágenes que
pertenecen al área.
(img)-[blar:belongs_ar]->(ar)
belongs_th blth
Representa la relación entre los
nodos Image y el nodo
Technique, indica las imágenes
que pertenecen a la técnica.
(img)-[blth:belongs_th]->(th)
belongs_pr blpr
Representa la relación entre los
nodos Image y el nodo Process, (img)-[blpr:belongs_pr]->(pr)
22
indica las imágenes que
pertenecen al proceso.
belongs_obs blobs
Representa la relación entre el
nodo Image y los nodo
Observations, indica las
observaciones que pertenecen a
la imagen.
(blobs)-[blobs:belongs_obs]->(img)
belongs_dra bldra
Representa la relación entre los
nodos Doctor y el nodo Area,
indica los doctores que
pertenecen a esta área.
(dr)-[ bldra:belongs_ dra]->(ar)
belongs_drs bldrs
Representa la relación entre los
nodos Doctor y el nodo
Specialty, indica los doctores
que pertenecen a la especialidad.
(dr)-[ bldrs:belongs_ drs]->(sp)
Tabla 2. 11 Relaciones de los nodos
1.4.5 Diseño de los Wireframes
En base a los requerimientos lo primero que se realizo fue el diseño de la aplicación
web por medio de los wireframes.
Con los wireframes realizamos bocetos de visualización de la aplicación web, es decir
la parte grafica del mismo, esta parte es muy importante dentro del desarrollo de la aplicación,
ya que por medio de los mismos se obtiene la idea de cómo serán las pantallas de la
aplicación y realizar las observaciones necesarias si se necesitan cambios.
23
A continuación en la figura 2.5 y 2.6 se muestran algunos de los bocetos que se
usaron como base para el desarrollo de la aplicación.
Figura 2. 5 Pantalla de inicio
25
FASE DE DESARROLLO
1.5 Descripción de Procesos
Para el desarrollo de la aplicación se definen los procesos que se deben realizar para el
funcionamiento adecuado de la aplicación.
1.5.1 Proceso de ingreso de parámetros
El proceso de ingreso de parámetros se llevara a cabo por el administrador del sistema,
dicho administrador será el responsable de cumplir con el proceso descrito a continuación en
la figura 3.1:
Figura 3. 1 Proceso de ingreso de parámetros
Ingreso al sistema: El administrador debe ingresar al sistema para
poder acceder a todas las funcionalidades del sistema.
Ingreso al sistemaIngreso nuevo
pacienteIngresar nueva
especialidad médica
Ingresar nueva área médica
Ingresar nuevo tipo de vista
Ingresar nuevo tipo de Técnica de
escaneo
Ingresar nuevo tipo de procedimiento
Ingreso nuevo doctor
26
Ingreso de pacientes: El administrador del sistema es el encargado de
ingresar a los pacientes que serán atendidos, el ingreso consiste en
llenar un formulario de datos personales los cuales constituyen la ficha
médica del paciente.
Ingreso nueva especialidad médica: El administrador ingresa la nueva
especialidad médica que se refiere a la especialidad del doctor que se
puede asignar a los doctores ingresados.
Ingreso nueva técnica de escaneo: El administrador del sistema
ingresa las nuevas técnicas de escaneo que se podrán asignar a una
imagen ya ingresada.
Ingreso de nuevo tipo de vista: El administrador ingresara los tipos de
vista necesarios que se pueden asignar a una imagen ya ingresada.
Ingreso nueva área médica: El administrador puede ingresar el área
médica en la cual la imagen ingresada será asignada.
Ingreso nuevo tipo de proceso: El administrador puede ingresar los
nuevos tipos de procedimientos con los cuales se obtuvo la imagen y a
la cual se asignara.
Ingreso nuevo doctor: El administrador realiza el ingreso de nuevos
doctores mediante un formulario de datos, dicho formulario contiene
ciertos datos precargados anteriormente.
1.5.2 Proceso de ingreso de imágenes
El proceso de ingreso de imágenes se llevara a cabo por el doctor, será el responsable
de cumplir con el proceso descrito a continuación en la figura 3.2:
27
Figura 3. 2 Proceso de ingreso de imágenes
Ingreso al sistema: El doctor debe ingresar al sistema para poder acceder a todas las
funcionalidades del sistema.
Escoger paciente: Consiste en la selección el paciente al cual el doctor está atendiendo y
va a realizar todo el proceso.
Escoger tipo de vista: Consiste en la selección de cuál es el tipo de vista de la imagen
ingresada.
Escoger área médica: Consiste en la selección del área médica a la cual se está
asignando a la imagen médica.
Escoger técnica de escaneo: Consiste en la selección de la técnica con la cual se realizó
la imagen y a la cual se le asignara.
Escoger procedimiento: Consiste en la selección del procedimiento de aplicación a la
imagen ingresada.
Ingreso al sistema Escoger PacienteEscoger tipo de
vistaEscoger área
medica
Escoger técnica de escaneo
Escoger procedimiento
Ingresar enfoqueIngresar
observación
Ingreso de imagen del paciente
Recorte de seccion interesada de la
imagen precargadaGuardar imagen
28
Ingresar enfoque: El doctor debe ingresar cual es el enfoque de la imagen, es decir cuál
es el propósito del ingreso de la imagen.
Ingresar observación: El doctor podrá ingresar las observaciones que crea pertinentes
sobre la imagen ingresada.
Ingreso imagen del paciente: El doctor selecciona la imagen la cual se cargara y se
asignara al paciente seleccionado.
Recorte de sección necesitada de la imagen precargada: El doctor puede recortar la
sección más importante de la imagen precargada.
Guardar imagen: Guarda todos los datos asignados a la imagen.
1.5.3 Proceso de selección y procesamiento de imágenes
El proceso de selección y procesamiento de imágenes se llevara a cabo por el doctor,
será el responsable de cumplir con el proceso descrito a continuación en la figura 3.3:
Figura 3. 3 Proceso de procesamiento de imágenes
Ingreso al sistema: El doctor debe ingresar al sistema para poder acceder a la
funcionalidad de procesamiento de imagen.
Ingreso al sistema Filtro de imagen
Aplicación de filtros a la imagen
Descarga de la imagen procesada
29
Filtrado de imagen: El doctor ingresa a la opción de filtrado de imagen la cual nos
direccionara a la pantalla donde se podrá realizar una búsqueda por paciente de sus
imágenes.
Aplicación de filtros a la imagen: El doctor aplicara los filtros que considere pertinente
y pueda extraer información valiosa para el doctor y el paciente.
Descarga de la imagen procesada: El doctor podrá realizar la descarga de la imagen
procesada para el fin que el doctor considere.
1.5.4 Proceso de búsqueda y visualización de imágenes
El proceso de búsqueda y visualización de imágenes realizadas por el doctor es muy
simple, el proceso será descrito a continuación en la figura 3.4:
Figura 3. 4 Proceso de búsqueda y visualización de imágenes
Ingreso al sistema: El doctor debe ingresar al sistema para poder acceder a la
funcionalidad de búsqueda y visualización de imágenes.
Nueva búsqueda de imagen: El doctor puede acceder a varios filtros de
búsqueda.
Ingreso al sistemaNueva busqueda de
imagen
Selección de tipo de busqueda
Visualización de imagen
30
Selección de tipo de búsqueda: El doctor tendrá a los diferentes tipos de
búsqueda, es decir tendrá algunas opciones de búsqueda de acuerdo a sus
necesidades.
Visualización de imagen: Una vez escogido el tipo de búsqueda el doctor
responsable tendrá acceso a la visualización de las imágenes con la información
añadida a dicha imagen.
1.5.5 Proceso de generación de reportes
El proceso de generación de reportes es muy simple y se lleva a cabo por el médico, el
siguiente proceso será descrito a continuación en la figura 3.5:
Figura 3. 5 Proceso de generación de reportes
Ingreso al sistema: El doctor debe ingresar al sistema para poder acceder a la
funcionalidad de generación de reportes.
Menú de reportes: El doctor tendrá acceso al menú de reportes, en el cual se
podrá escoger el tipo de reporte necesitado por el doctor.
Visualización de reportes: Una vez que el doctor haya escogido lo requerido se
podrá observar dicho reporte.
Ingreso al sistema Menu de reportes
Visualización de reportes
31
1.6 Desarrollo de la Aplicación Web
El desarrollo de la aplicación se realizara en el lenguaje de programación JavaScript,
sobre el entorno de desarrollo de Node.js con el framework Express. Por lo que nos
ayudaremos en el editor de texto Sublime para la codificación del mismo.
1.6.1 Estructura del Proyecto
Para la creación del proyecto hemos establecido una estructura de ficheros
basado en express.js de la siguiente manera.
En la figura 3.6 se muestra la estructura de ficheros que se utilizara en la
aplicación, en la cual mostraremos las carpetas y subcarpetas existentes, y los archivos
más importantes para la ejecución del sistema, a continuación se dará una breve
explicación de cada elementos de esta estructura.
Figura 3. 6 Representa la estructura de ficheros de la aplicación.
32
IMAGED: Es la carpeta raíz la cual contiene subcarpetas, archivos de configuración y
componentes, los cuales en conjunto constituyen la aplicación web.
bin: Es la carpeta que contiene el archivo www, el cual es un archivo que tendrá la
configuración más importante del sistema que es la del servidor web.
a. www: Es el archivo en el que se definirá la creación del servidor web, y la
configuración que este tendrá, algunas de las configuraciones serán creadas
en este archivo y otras serán obtenidas de otros módulos de configuración.
config: Es la carpeta que contendrá algunos archivos de configuración, los cuales se
van a ir implementando a lo largo del proceso de desarrollo.
controllers: En esta carpeta se alojaran los archivos controladores de la aplicación, los
cuales serán los encargados de gestionar los datos entre la aplicación y la base de datos.
database: Esta es la carpeta que contendrá los archivos de configuración necesarios
para la conexión de la base de datos con el sistema.
middleware: En esta carpeta contendrá un archivo necesario para el control de
autenticación.
node_modules: En esta carpeta se almacenaran todos los ficheros y módulos,
implementados a lo largo del desarrollo del sistema.
public: Es la carpeta que almacenara los denominados assets o recursos necesarios
para el frontend , tales como las estilos, imágenes entre otros, permitiendo que estos estén más
accesibles para la aplicación, ya que estos elementos pueden ser accedidos como si estuvieran
dentro del directorio raíz, dentro de la misma tenemos las siguientes subcarpetas.
33
a. images: En esta carpeta se almacenaran las imágenes que serán utilizadas
por el sistema como el logo del mismo.
b. stylesheets: Esta carpeta contendrá un archivo con extensión .css, en el cual
se tendrán los estilos definidos para el sistema.
c. uploads: En esta carpeta se cargaran los archivos temporales que el sistema
utilice.
routes: En esta carpeta se almacenara un archivo encargado de enrutamiento dentro
del sistema.
routes.js: En el archivo route se definirá las rutas de las vistas, mediante las cuales
el sistema podrá mostrarlas en el navegador.
views: Esta carpeta contendrá las vistas del sistema, las cuales fueron agrupadas en
tres subcarpetas, a excepción de las vistas de home y error.
Carpetas
templates: En esta carpeta se guardaran plantillas, las cuales
guardaran la estructura básica que tendrán las vistas.
users: En esta carpeta se almacenaran las vistas que serán utilizadas
por los usuarios.
usersu:-En esta carpeta se almacenarán las vistas que serán
utilizadas en la parte de administrador del sistema.
Archivos
home.jade: Esta es la vista principal del sistema, la que será la
primera en ser visualizada al dirigirse al sistema.
34
error.jade: Esta vista será la encargada de mostrar los errores que
se puedan presentar en el sistema, como por ejemplo si se ingresa
una URL inexistente en el sistema.
app.js: Dentro de la carpeta raíz se encuentra este archivo con extensión .js, en
el cual se importaran los módulos que serán utilizados por el sistema, se configurara
las rutas y se define el motor de plantillas que se utilizara para el desarrollo de las
vistas.
package.json: Dentro de la carpeta raíz se encuentra este archivo con
extensión .json, en el cual se almacenará la información acerca del sistema, como el
nombre, la versión y las dependencias necesarias para la ejecución del sistema, entre
otras.
1.6.2 Instalación de plugins requeridos para funcionamiento de la aplicación.
Para el desarrollo del sistema se deben instalar ciertos plugins, que son un
requisito para el funcionamiento correcto de la aplicación, para la instalación
usaremos npm un gestor de paquetes de javascript de node.js, los plugins que se
instalaran son:
Plugins Versión
bcrypts 2.3.0
caman 4.1.2
connect-flash 0.1.1
express-formidable 0.1.3
express-session 1.14.1
htmlparser 1.7.7
jquery 3.1.1
jsdom 9.9.1
neo4j-driver *
node-base64-image 1.0.1
passport 0.3.2
passport-local 1.0.0
xmlhttprequest 1.8.0
Express-passport-logout 0.1.0
Figura 3. 7 Plugins necesarios de instalación
35
Todos lo plugins listados anteriormente deben estar declarados en el archivo
package.json el cual contiene la información del proyecto, específicamente en la
sección de dependencias deberán constar declarados todos los plugins que son un
requisito para el funcionamiento de la aplicación.
1.6.3 Implementación del Servidor Web
Para comenzar con el desarrollo del sistema, lo primero que se debe realizar en
un entorno Node js es la implementación del servidor web, para lo cual crearemos dos
archivos en los cuales distribuiremos esta configuración para un mejor entendimiento.
1.6.3.1 Creación de archivo app.js
En archivo app.js se encuentra el código principal de nuestro sistema, en él se
definirán los módulos que se utilizaran en el sistema, además se configurara las rutas y
se define el motor de plantillas que se utilizara para el desarrollo de las vistas. A
continuación explicaremos ciertos elementos del archivo separándolos por secciones
de código.
En la figura 3.8 se muestra la manera en que se importan los módulos con la
palabra reservada require, la que sería similar a las palabras reservadas como include
de C++, y a import de Python, con el require lo que estamos indicando es que nuestra
aplicación requiere del módulo, y que lo cargaremos en una variable para poder hacer
uso de las mismas.
Se debe tener en cuenta que para hacer uso de estas librerías deben estar
previamente instaladas, como se muestra en sección 3.4.2
36
Figura 3. 8 Dependencias del módulo.
En la figura 3.9 se muestra la creación de la instancia de Express, la que se
asignara a una variable mediante la cual podremos configurar parámetros de express,
la misma que nos brindara una infraestructura para nuestro sistema, con un conjunto
de características propias de express.
Figura 3. 9 Instancia de Express.
37
En la figura 3.10 se muestra como se utiliza la variable app, para la
configuración de la infraestructura del sistema.
En la primera línea se especifica cual será el directorio en el que se alojaran las
vistas, el cual hemos llamado views, y en la segunda línea se especifica el motor que
se utilizara para las vistas, en este caso hemos escogido jade, pero también se puede
utilizar HTML y ejs.
Figura 3. 10 Configuración del directorio de vistas y del motor de vistas.
En la figura 3.11 se muestra como se han configurado e inicializado algunos de
los elementos que nos brinda express.
Por ejemplo en la última línea de la figura se muestra la configuración que se
le ha dado a la carpeta public, la misma que contiene los denominados assets, que no
son más que los objetos estáticos tales como imágenes, hojas de estilo, etc.
Con la configuración que se muestra en esta línea lo que se hace es que los
elementos o carpetas que se encuentran dentro de la carpeta public, puedan ser
accedidos directamente como si se encontraran en la carpeta raíz del sistema, es decir
una imagen ubicada en el directorio /public/imagenes pueda ser accedida con la ULR
http://localhost:3000/ imágenes.
38
Figura 3. 11 Configuración de componentes Express.
En la figura 3.12 se muestra como se han configurado e inicializado las rutas,
en la primera línea lo que se hace es crear una variable routes, la cual va a utilizar el
fichero './routes/routes'), que es donde se crearan las rutas. Por último, en la segunda
línea se indica el archivo en el cual se ubicaran las rutas del sistema.
Figura 3. 12 Configuración de las rutas.
En la figura 3.13 se muestra la configuración de express, que ayudar al manejo
de errores y el comportamiento que el sistema tendrá en caso de que estos se
produzcan tanto en el entorno de pruebas, como en el de producción, en el caso del
entorno de producción se capturar el error y se reenviara al manejador de errores, y se
mostrara un mensaje 404 en la vista, por otra parte en el entorno de pruebas se
mostrara más información del error que se produzca.
39
Figura 3. 13 Manejo de Errores.
En la figura 3.14 se muestra como la aplicación exporta un objeto del módulo
que se ha creado en el archivo app.js, el cual se estará contenido en la variable app,
con el fin de que esta pueda ser accedida por el resto de módulos creado en la
aplicación.
Figura 3. 14 Manejo de Errores.
40
1.6.3.2 Creación de archivo www
En archivo www se encuentra el código principal del servidor web de nuestro
sistema, es este se definirán los módulos que se utilizaran para la creación y
configuración del servidor. A continuación explicaremos ciertos elementos del archivo
separándolos por secciones de código.
En la figura 3.15 se muestra los módulos que este archivo utilizara, en la
primera línea crea una variable que utilizara el modulo exportado por el archivo
app.js, en donde se encuentran las configuraciones del sistema, en la segunda línea se
está importando el módulo de depuración, el mismo que nos ayudara a correr el
sistema en un modo de prueba, lo que nos ayudara a detectar y visualizar posibles
errores. Por último el ultimo modulo que requiere este archivo es el de http, el cual
nos ayudara a trabajar con el protocolo HTTP y nos servirá para la creación del
servidor HTTP, el mismo que será capaz de aceptar solicitudes de un cliente web.
Figura 3. 15 Manejo de Errores
.
En la figura 3.16 se muestra la configuración del puerto que utilizaremos en la
creación del servidor web, en la primera línea se define que se escuchara el puerto
3000, pero es posible que este puerto este ocupado por otro programa en el servidor
41
en el que se encuentre el sistema y nos dé un error, por lo que se utiliza la función
normalizePort, la misma que nos devolverá el puerto o el error (Esta función nos
ayuda en el entorno de pruebas), una vez que se tiene definido el puerto que se
utilizara se procede a guardar este puerto en el módulo app.
Figura 3. 16 Configuración del Puerto
En la figura 3.17 se muestra dos funciones que nos brinda express, las mismas
que nos ayudan a verificar que los eventos de escucha se están realizando
correctamente o si ocurre está ocurriendo un error, la función onError, es la función
encargada de ayudarnos con el manejo de los errores de escucha como si no se tiene
los permisos necesarios, o si ya está en uso. Y la función onListening, que el evento se
está escuchando.
42
Figura 3. 17 Funciones de Escucha de Eventos.
En la figura 3.18 se muestra como a través de la utilización del módulo HTTP,
hemos creado el servidor web, en la primera línea utilizamos la función createServer,
del módulo HTTP, en el que le enviamos el nodo app, con la configuración necesaria
43
para la creación del servidor, este servidor lo guardamos en una variable llamada
server, la misma que utilizaremos para poder escuchar el puerto y levantar el servidor.
Figura 3. 18 Configuración del Puerto
1.6.4 Conexión con la Base de Datos
Para la realizar la conexión de muestra aplicación con la base de datos Neo4j
(NoSql), necesitaremos la ayuda de un driver, el cual nos ayudara a crear y configurar
esta conexión, como primer paso debemos instalar el plugin que contiene este driver
en nuestro entorno de desarrollo Node.js, para lo cual utilizaremos el gestor de
dependencias npm y lo haremos con el siguiente comando.
npm install neo4j-driver --save
Una vez que el plugin se ha instalado en nuestro entorno Node.js, lo que
debemos hacer es crear un archivo de configuración, en el cual vamos a importar el
driver y lo vamos a configurar con la información de la base de datos que vamos a
utilizar.
En la figura 3.19 se muestra el archivo de configuración que se ha creado para
establecer la conexión con la base de datos, en donde se importara el módulo neo4j-
44
driver, y lo cargamos en una variable llamada neo4j, mediante la cual accederemos y
configuraremos el driver con la información de la base de datos, y la cargaremos en
una variable llamada driver.
ip_host: Es la dirección ip de la maquina en la que se alojada la base de datos
a utilizar.
neo4j: Es el nombre de usuario (Username), con el que se utiliza para acceder
a la base de datos.
clave: Es la clave con la que se accede a la base de datos
Una vez creada la variable driver con la información de la base accederemos a
su propiedad de session, la misma que nos ayudara a crear sesiones para la gestión de
la información en la base de datos, la cargamos en una variable llamada session y
exportamos dicha variable, para que esta pueda ser llamada desde otros módulos del
sistema.
Figura 3. 19 Configuración del puerto
1.6.5 Creación del archivo routes.js
En el archivo route.js se definirán las rutas del sistema, las mismas que nos
45
permitirán direccionar las peticiones dentro del sistema a los controladores indicados.
A continuación explicaremos los elementos más relevantes del archivo separándolo
por secciones de código.
En la figura 3.20 se muestran las dependencias que serán utilizadas por el
archivo route.js, en la primera línea se hace un require del módulo de express, el
mismo que será utilizado para cargar una variable router con la función Router(),
dicha variable será la que nos ayudara para la creación de las rutas, también se
importa el modulo passport y el módulo auth, que son los que nos ayudaran con la
autentificación de usuarios, por último se importa el directorio controllers que es
donde se alojaran los controladores del sistema.
Para la creación de una ruta necesitamos de la variable que fue previamente
creada llamada router, con la cual crearemos la ruta de la siguiente manera.
Figura 3. 20 Dependencias del archivo routes.js
En la figura 3.21 se muestra cual es el formato básico con el que se crean las
rutas, en donde primero pone la variable router, seguida de un punto y el tipo de
46
método HTML que esta ruta tendrá (get, post, delete, put…..), después entre
paréntesis se especifica la ruta para la cual se está creando el mapeo, y por último se
especifica la función que va a ser la encargada de procesar la petición hacia esa ruta,
esta sería la estructura básica de la ruta, como es el caso de la primera estructura de la
figura, pero además hemos añadido una parte de autenticación en medio de la ruta y la
función encargada de procesar la petición, en donde para poder acceder a dicha
función primero se verificara que el usuario se encuentre dentro del sistema, como es
el caso de la segunda estructura de la figura.
A continuación se mostraran y describirán algunas de las rutas creadas en el
archivo router.js.
Figura 3. 21 Formato para la creación de ruta.
En la figura 3.22 se muestra algunas de las rutas creadas en el archivo routes,
como se puede observar en la figura el primera router se define con el método get y
su ruta será ‘/’, la función index será la que procesara la petición, la misma que se
encontrará en el módulo /controllers/homeController.js, esta será la encargada de
retornar la vista home a la ruta ‘/’. De la igual forma el segundo router creado se
define con el método get y su ruta será ‘/auth/signin’, la función getSignIn será la que
47
procesara la petición, esta función se encontrara en el módulo
/controllers/UserController.js, y retornara la vista para el inicio de sesión.
El tercera router se ha definido con el método post, y su ruta será
‘/auth/signin’, la función que procesa el requerimiento se ha creado dentro del mismo
router, esta será la encargada autentificar al usuario, en caso de que la autentificación
sea correcta, la función re direccionará al usuario al panel principal, en caso de que la
autentificación falle por la función re direccionará al usuario a la página de inicio de
sesión con el mensaje correspondiente al mal ingreso del usuario o la contraseña.
En los router de usuarios se ha definido un módulo dentro del directorio
/controllers, llamado userController.js, en el cual se encontraran todas las funciones
para las rutas de los usuarios, por otra parte al momento de crear estos routers, se ha
utilizado una función para verificar que el usuario se encuentre dentro del sistema, y
solo de esta manera puedan acceder a estas rutas. Por lo cual la estructura que tendrán
los routers para usuarios será como los que se muestran en la figura debajo de Rutas
Usuario.
De igual forma para los routers de administrador y de reportes se ha definido
un módulos independiente para cada uno dentro del directorio /controllers, para el
caso de los routers de administrador su módulo se llamara UsersuController.js y
reportsController.js para los reportes, de igual manera para la creación de estos
routers, se ha utilizado la misma función para verificar que el usuario se encuentren
dentro del sistema y solo de esta forma puedan acceder a estas rutas.
Finalmente para que estas rutas puedan ser usadas por otros módulos del
sistema se debe exportar la variable router, la cual contiene todas las rutas
especificadas en el archivo routes.js.
48
Figura 3. 22 Rutas del archivo routes.js.
1.6.5.1 Creación de Controladores
Dentro de la estructura del sistema se ha definido que los controladores se
ubicaran en el directorio /controllers, dentro del cual encontraremos cinco módulos
con extensión .js, en los cuales se encontraran repartidos los controladores de acuerdo
a las necesidades definidas del sistema. Estos módulos son:
homeController.js
49
ImgController.js
reportsController.js
UserController.js
UsersuController.js
A continuación explicaremos brevemente cada uno de estos módulos.
1.6.5.2 homeController.js
Este archivo contiene una única función llamada index, la cual procesa la
petición y nos retorna la vista home.
En la figura 3.23 se muestra la función index que se encuentra dentro del
module.exports, el mismo que lo exportara para que pueda se accedida desde otros
módulos del sistema, dicha función retorna la vista home, junto con los siguientes
parámetros, con el req.isAuthenticated(), se espera un valor booleano que nos indica si
el usuario se encuentra autenticado en el sistema o no, con el req.user se espera
obtener un objeto con el usuario que se encuentra autenticado en el sistema en caso de
estarlo, caso contrario retornara un valor nulo.
50
Figura 3. 23 homeController.js
1.6.5.3 ImgController.js
En el archivo ImgController.js se han definido los controladores que se
utilizaran para el manejo de las imágenes y de la información de las mismas. A
continuación explicaremos los elementos del archivo.
En la figura 3.24 se muestra la dependencia que será utilizada por el archivo
ImgController.js, el require que se realiza es para importar un sistema de archivos ‘fs’,
el cual nos ayudara a leer mover y eliminar archivos.
Todas las funciones del archivo ImgController.js se encuentran dentro de un
module.exports, para que puedan ser utilizados desde otro modulo del sistema
(routers.js).
Figura 3. 24 Dependencias del archivo ImgController.js
51
En la figura 3.25 se muestra la una función get del archivo ImgController.js, la
misma que retornar la vista viewImg, como primer paso esta función crea una variable
de sesión haciendo un require al archivo de configuración de la base de datos, el cual
exporta una sesión. Una vez creada la variable de sesión se ejecutara la instrucción
cypher dentro del .run(), después se cogerá el resultado de la consulta en una variable
result la misma que se utilizara dentro de una función para recorrer este resultado y
almacenarlo en una variable de tipo array. Una vez finalizado este proceso se
procederá a retornar la vista viewImg, con los siguientes parámetros, isAuthenticated
que será un valor booleano que nos indicara si el usuario se encuentra dentro del
sistema, user que contendrá el objeto del usuario que se encuentra dentro del sistema,
y por último el parámetro names que no es más que el array con los resultados de la
consulta, al final se cierra la sesión. El en caso de que la consulta falle él .catch(),
creara una función para enviar este error sucedido, (Esta función nos ayuda en el
entorno de pruebas).
El Cypher o la consulta realizada en el método getViewImg, lista todos los
pacientes y retorna su nombre.
Cypher: 'MATCH(ptn:Patient) RETURN ptn.name'
52
Figura 3. 25 Función getViewImg
En la figura 3.26 se muestra una función post del archivo ImgController.js,
esta función será utilizada para retornar la vista viewImg2, en la cual se mostrarán las
imágenes con su respectiva información, estas información serán obtenida en esta
función de la base de datos de acuerdo a los parámetros que han sido enviados, como
primer paso la función obtiene el parámetro que ha sido enviado a través del método
post con un ‘req.body.selectpickerPaciente’, y la carga en la variable paciente, se crea
la variable de sesión haciendo un require, al archivo de configuración, una vez creada
la variable de sesión se ejecutara la instrucción cypher dentro del .run(), dentro del
.then() se creara una función para recorrer el resultado obtenido de la primera consulta
y se lo carga en un array, dentro del mismo .then() se corre una segunda consulta con
él .run(), de la misma manera dentro de un .then() los resultados son guardados en un
array. Una vez terminado este proceso se retornara la vista viewImg2, y se le enviaran
53
los siguientes parámetros isAuthenticated que será un valor booleano que nos indicara
si el usuario se encuentra dentro del sistema, user que contendrá el objeto del usuario
que se encuentra dentro del sistema, el imgPaciente que será el nombre del paciente, el
images que es un array con la información de las imágenes y el obvs que también es
un array pero con todas las observaciones que tenga la imagen, al final se cierran las
dos sesiones creadas. De igual manera en caso de que alguna de las consultas falle
seguido de cada .then() habrá un .catch(), el que creara una función para enviar los
errores sucedidos, (Esta función nos ayuda en el entorno de pruebas).
El primer Cypher o la consulta realizada en el método postViewImg, se
retornan los nodos de imágenes de un paciente, especificado en el parámetro
pacienteParam, con sus respectivas características (Algunas de las características de
las imágenes también son nodos.)
Cypher: ‘MATCH(dr:Doctor)-[rsp:responsable]-> (img:Image)-
[blg:belongs]->(ptn:Patient),(img)<-[blobs:belongs_obs]-(obs:Observations), (img)-
[blvw:belongs_vw]->(vw:View), (img)-[blar:belongs_ar]->(ar:Area), (img)-
[blpr:belongs_pr]->(pr:Process), (img)-[blth:belongs_th]->(th:Technique) WHERE
ptn.name={pacienteParam} RETURN DISTINCT img, ptn, dr, vw,ar,
pr,th',{pacienteParam: paciente}'
El segundo Cypher que se realiza en el método postViewImg, retorna los nodos
de las imágenes del mismo paciente, especificado en el parámetro pacienteParam, con
sus respectivas observaciones (Las observaciones también son nodos).
54
Cypher:’ MATCH(img:Image)-[blg:belongs]-> (ptn:Patient), (img)<-
[blobs:belongs_obs]-(obs:Observations) WHERE ptn.name={pacienteParam}
RETURN DISTINCT img, obs',{pacienteParam: paciente})’
Función postViewImg postViewImg: function(req, res, next){
var paciente = req.body.selectpickerPaciente;
var session = require('.././database/config');
session
.run('MATCH(dr:Doctor)-[rsp:responsable]-> (img:Image)-[blg:belongs]->
(ptn:Patient), (img)<-[blobs:belongs_obs]-(obs:Observations), (img)-[blvw:belongs_vw]-
>(vw:View), (img)-[blar:belongs_ar]->(ar:Area), (img)-[blpr:belongs_pr]->(pr:Process),
(img)-[blth:belongs_th]->(th:Technique) WHERE ptn.name={pacienteParam} RETURN
DISTINCT img, ptn, dr, vw,ar, pr,th',{pacienteParam: paciente})
.then(function(result){
var imgArr = [];
result.records.forEach(function(record){
imgArr.push({
id: record._fields[0].identity.low,
img: record._fields[0].properties.base64,
enfoque: record._fields[0].properties.focus,
dateimg: record._fields[0].properties.date,
name: record._fields[1].properties.name,
genero: record._fields[1].properties.gender,
namedoctor: record._fields[2].properties.name,
vista: record._fields[3].properties.type,
area: record._fields[4].properties.type,
proceso: record._fields[5].properties.type,
tecnica: record._fields[6].properties.type
});
});
session
.run('MATCH(img:Image)-[blg:belongs]-> (ptn:Patient), (img)<-
[blobs:belongs_obs]-(obs:Observations) WHERE ptn.name={pacienteParam} RETURN
DISTINCT img, obs',{pacienteParam: paciente})
.then(function(result){
var obsArr = [];
result.records.forEach(function(record){
obsArr.push({
id: record._fields[0].identity.low,
responsable: record._fields[1].properties.drresponsable,
dateobs: record._fields[1].properties.date,
observacion: record._fields[1].properties.observation
});
});
55
1.6.5.4 reportsController.js
En el archivo reportsController.js se han definido los controladores, que se
encargaran de las llamadas a los reportes y la información que estos tendrán.
En la figura 3.27 se muestra la dependencia que será utilizada por el archivo
ImgController.js, el require que se realiza es para importar el módulo request, el
mismo que nos ayudara para realizar llamadas http.
Todas las funciones del archivo reportsController.js se encuentran dentro de
un module.exports, para que puedan ser utilizados desde otro modulo del sistema
(routers.js).
res.render('users/viewImg2',{
isAuthenticated : req.isAuthenticated(),
user : req.user,
imgPaciente: paciente,
images: imgArr,
obsv: obsArr
});
console.log(obsArr);
session.close();
})
.catch(function(err){
console.log(err);
});
session.close();
})
.catch(function(err){
console.log(err);
});
}
Figura 3. 26 Función postViewImg
56
Figura 3. 27 Dependencias del archivo reportsController.js
En la figura 3.28 se muestra una función post del archivo reportsController.js,
esta función será utilizada para realizar la llamada a un reporte ubicado en la api de
jsreport, al cual le enviaremos la información necesaria para la generación del reporte.
Lo primero que realiza la función será la creación de la variable de sesión haciendo un
require, al archivo de configuración, con la variable de sesión se ejecutara la
respectiva instrucción cypher en el .run(), dentro del .then() se creara una función
para recorrer el resultado obtenido y cargarlo en un array. Una vez que finalizado este
proceso se crea una variable de objetos llamada data, la cual contendrá toda la
información necesaria para la generación del reporte y estará de la siguiente manera,
en template se define el identificador de la plantilla que utilizaremos, en data se
especificaran los datos obtenidos de la consulta y que se van a mostrar en el reporte,
en options se define que se tenga una vista previa del reporte en el navegador con la
línea preview:true, con estos parámetros definidos en la variable data se crea una
nueva variable options, en la que definiremos la ruta para el reporte, el método por el
que enviamos los datos al reporte, por ultimo nos valemos del módulo request, que
importamos para realizar la petición HTTP al jsreport. Por último se cierra la sesión.
El en caso de que la consulta falle él .catch(), creara una función para enviar este error
sucedido, (Esta función nos ayuda en el entorno de pruebas).
57
El Cypher o la consulta realizada en el método getReportOne, lista
todos los doctores con su especialidad y el número de imágenes que han ingresado al
sistema.
Cypher:’'match(dr:Doctor)-[rps:responsable]->(img:Image),(dr)-
[bldrs:belongs_drs]->(sp:Specialty) return dr.name, count((dr)-[rps:responsable]-
>(img)), sp.namesp ')
Función getReportOne
getReportOne: function(req, res, next){
var session = require('.././database/config');
session
.run('match(dr:Doctor)-[rps:responsable]->(img:Image),(dr)-
[bldrs:belongs_drs]->(sp:Specialty) return dr.name, count((dr)-
[rps:responsable]->(img)), sp.namesp ')
.then(function(result){
var arrDr=[];
result.records.forEach(function(record){
arrDr.push({
name: record._fields[0],
img:record._fields[1].low,
especialty:record._fields[2]
});
});
var data={
template:{'shortid':'BJP0QnuPg'},
data:{
"arrDoc": arrDr
},
options:{
preview:true
}
}
var options= {
uri:'http://dir_ip:8001/api/report',
method: 'POST',
json:data
}
58
1.6.5.5 UserController.js
En el archivo UserController.js se han definido los controladores, que se
utilizaran en su mayoría en el perfil de usuarios. A continuación explicaremos algunos
elementos del archivo.
En la figura 3.29 se muestra la dependencia que será utilizada por el archivo
UserController.js, el require que se realiza es para importar el módulo bcryptjs, el
mismo que nos brindara algunas funciones para la encriptación y comparación de
elementos encriptados.
Todas las funciones del archivo UserController.js se encuentran dentro de un
module.exports, para que puedan ser utilizados desde otro modulo del sistema
(routers.js).
Figura 3. 29 Dependencias del archivo reportsController.js
request(options).pipe(res);
session.close();
})
.catch(function(err){
console.log('Error en el Reporte One');
console.log(err);
});
}
Figura 3. 28 Función getReportOne
59
En la figura 3.30, se muestra una función get del archivo reportsController.js,
esta función será utilizada para retornar la vista en la cual se realizara el ingreso de los
nuevos doctores, junto con todos los parámetros necesarios para que la vista se pueda
visualizar correctamente. La función crea la variable de sesión haciendo un require, al
archivo de configuración, con la variable de sesión se ejecutara la respectiva
instrucción cypher en el .run(), dentro del .then() se creara una función para recorrer
el resultado obtenido y cargarlo en un array, dentro de mismo .then() se crea una
nueva sesión y se corre una segunda consulta con él .run(), de la misma manera dentro
de un .then() los resultados son guardados en un array.
Una vez terminado este proceso se retornará la vista doctor, a la que se le
enviaran los siguientes parámetros isAuthenticated, que será un valor booleano que
nos indicara si el usuario se encuentra dentro del sistema, user que contendrá el objeto
del usuario que se encuentra dentro del sistema, el typesAr, que tendrá los resultados
de la primera consulta, el namesSpArr que también es un array el cual contienen los
resultados obtenidos en la segunda consulta.
Por último se cierran las sesiones. En el caso de que alguna de las consultas
falle seguido de cada .then() habrá un .catch(), el que creara una función para enviar
los errores sucedidos, (Esta función nos ayuda en el entorno de pruebas).
El primer Cypher que se realiza en el método getNewDoctor, retorna el nombre
de todos los nodos de las áreas médicas.
Cypher: ‘MATCH(ar:Area) RETURN ar.type''
El segundo Cypher que se realiza en el método getNewDoctor, retorna los
nombres de los nodos de especialidades médicas.
60
Cypher:’ MATCH(sp:Specialty) RETURN sp.namesp’
E
n
Función getNewDoctor
getNewDoctor: function(req, res, next){
var session = require('.././database/config');
session
.run('MATCH(ar:Area) RETURN ar.type')
.then(function(result){
var typeArArr = [];
result.records.forEach(function(record){
typeArArr.push({
typear: record._fields[0]
});
});
session
.run('MATCH(sp:Specialty) RETURN sp.namesp')
.then(function(result){
var nameSpArr = [];
result.records.forEach(function(record){
nameSpArr.push({
namesp: record._fields[0]
});
});
res.render('users/doctor',{
isAuthenticated : req.isAuthenticated(),
user : req.user,
typesAr: typeArArr,
nameSpArr: nameSpArr
});
session.close();
})
.catch(function(err){
console.log(err);
});
session.close();
})
.catch(function(err){
console.log(err);
});
}
Figura 3. 30 Función getNewDoctor
61
En la figura 3.31 se muestra una función post del archivo UserController.js,
esta función será utilizada para el ingreso de nuevos doctores. Lo primero que realiza
la función será la creación de la variable salt, en la cual vamos a obtener una
propiedad del módulo bcrypt (bcrypt.genSaltSync(10)), que nos indicara el número de
rondas que tendrá el la encriptación del password, después crea una variable passport,
en la cual se cargara el password encriptado, con el número de rondas definidas en
salt, una vez que se tiene el password encriptado se reciben los parámetros enviados
por el método post hacia la función y se crea la variable de sesión haciendo un require,
al archivo de configuración.
Se abre una sesión y se corre la primera consulta con el .run(), esta consulta
creara el nuevo doctor con sus datos personales, dentro de .then() se creara una
función en la cual si se recibe un resultado de éxito de la consulta anterior se creara
una nueva sesión, en la que se ejecutara la segunda consulta de igual manera con
.run(), esta consulta creara el usuario que tendrá el nuevo médico, de igual manera
dentro del segundo .then(), se creara una función en la cual si recibe un resulta de éxito
de la consulta anterior crea una nueva sesión y correrá una tercera consulta, en la cual
se realizara las relaciones que el nodo medico tendrá con los demás nodos incluido su
nodo de usuario.
Una vez que se han ejecutado las tres consultas el tercer .then() retorna la
pantalla de doctor. Por último se cierran las sesiones. En el caso de que alguna de las
consultas falle seguido de cada .then() habrá un .catch(), el que creara una función
para enviar los errores sucedidos, (Esta función nos ayuda en el entorno de pruebas).
62
El primer Cypher que se realiza en el método postNewDoctor, crea el nodo
Doctor con todos los parámetros que han sido enviados para su creación.
Cypher:‘CREATE(dr:Doctor{name:{nameParam},birthdate:{birthdateParam}
, gender:{genderParam}, identity_card:{identity_cardParam}})', {nameParam:name,
birthdateParam:birthdate, genderParam:gender, identity_cardParam:identity_card,
areaParam:area, specialtyParam:specialty}’
El segundo Cypher que se realiza en el método postNewDoctor, crea el usuario
que tendrá el doctor, con el mail y el password (password encriptado), especificados.
Cypher:’CREATE(usr:User{username:{usernameParam},email:{emailParam}
,profile:{profileParam},password:{passwordParam}})',{usernameParam:name,
emailParam:email, profileParam:profile, passwordParam:password}’
El tercer Cypher que se realiza en el método postNewDoctor, será el encargado
de crear las relaciones que tendrá el nodo Doctor con otros nodos, incluyendo al nodo
User.
Cypher:’MATCH(dr:Doctor{name:{nameParam}}),(usr:User
{username:{nameParam}}), (sp:Specialty {namesp:{specialtyParam}}),(ar:Area
{type:{areaParam}})MERGE(usr)-[blu:belongs_usr]->(dr)MERGE(dr)-
[bldrs:belongs_drs]->(sp)MERGE(dr)-[bldra:belongs_dra]->(ar)',
{nameParam:name, specialtyParam:specialty, areaParam:area}’
63
Función postNewDoctor
postNewDoctor: function(req, res, next){
var salt = bcrypt.genSaltSync(10);
var password = bcrypt.hashSync(req.body.password, salt);
var session = require('.././database/config');
var profile="DOCTOR";
var name = req.body.nomape;
var birthdate = req.body.birthdate;
var gender = req.body.genero;
var identity_card = req.body.cedula;
var area= req.body.area;
var specialty= req.body.especialidad;
var email = req.body.email;
console.log(birthdate);
session
.run('CREATE(dr:Doctor {name:{nameParam},
birthdate:{birthdateParam}, gender:{genderParam},
identity_card:{identity_cardParam}})', {nameParam:name,
birthdateParam:birthdate, genderParam:gender,
identity_cardParam:identity_card, areaParam:area,
specialtyParam:specialty})
.then(function(result){
session
.run('CREATE(usr:User {username:{usernameParam},
email:{emailParam}, profile:{profileParam}, password:{passwordParam}})',
{usernameParam:name, emailParam:email, profileParam:profile,
passwordParam:password})
.then(function(result1){
session
.run('MATCH(dr:Doctor {name:{nameParam}}), (usr:User
{username:{nameParam}}), (sp:Specialty {namesp:{specialtyParam}}),
(ar:Area {type:{areaParam}}) MERGE(usr)-[blu:belongs_usr]->(dr)
MERGE(dr)-[bldrs:belongs_drs]->(sp) MERGE(dr)-[bldra:belongs_dra]-
>(ar)', {nameParam:name, specialtyParam:specialty, areaParam:area})
.then(function(result2){
res.redirect('/users/doctors');
session.close();
})
.catch(function(err){
console.log('Error2');
console.log(err);
}); session.close();
})
.catch(function(err){
console.log('Error1');
console.log(err);
64
1.6.5.6 UsersuController.js
En la figura 3.32 se muestra una función get, del archivo UsersuController.js,
esta función será utilizada para retornar la vista en la cual se realizara el ingreso de las
nuevas Áreas Médicas, a la que se enviaran los siguientes parámetros, con el
req.isAuthenticated(), que nos indica si el usuario se encuentra autenticado en el
sistema, con el req.user se espera obtener un objeto con el usuario que se encuentra
autenticado en el sistema.
}); session.close();
})
.catch(function(err){
console.log('Error’);
console.log(err);
});
}
Figura 3. 31 Función postNewDoctor
65
En el archivo UsersuController.js se han definido los controladores, que se
utilizaran por el administrador.
E
En la figura 3.33 se muestra una función post, del archivo UsersuController.js,
esta función será utilizada para la creación de nuevas áreas médicas.
La función creara la variable de sesión haciendo un require, al archivo de
configuración, con la variable de sesión se ejecutara la respectiva instrucción cypher
en el .run(), dentro del .then() se creara una función la que retornara la ventana de
nueva área médica en caso de que la consulta se haya ejecutado con éxito.
Por último se cierran la sesión. En el caso de que la consulta falle seguido del
.then() habrá un .catch(), el que creara una función para enviar los errores sucedidos,
(Esta función nos ayuda en el entorno de pruebas).
Función getNewArea
getNewArea : function(req, res, next){
return res.render('usersu/newarea',{
isAuthenticated : req.isAuthenticated(),
user : req.user
});
}
Figura 3. 32 Función getNewArea
66
1.6.6 Creación de la Pantalla de Inicio y Login
En esta sección se mostrara el proceso de creación de la pantalla de inicio y
login, se explicara los pasos necesarios para la creación de los mismos, la cual servirá
como modelo a seguir de todo el sistema.
1.6.6.1 Creación de Templates
Definiremos los templates los cuales son los archivos que nos ayudaran a
determinar la estructura y aspecto visual básico del sistema, esto permite la
disminución de tiempo en el desarrollo de la aplicación.
Función postNewArea
postNewArea: function(req, res, next){
var session = require('.././database/config');
var type = req.body.typearea;
var description = req.body.descriptionar;
session
.run('CREATE(ar:Area {type:{typeParam},
description:{descriptionParam}})', {typeParam:type,
descriptionParam:description})
.then(function(result){
res.redirect('/usersu/nwar');
session.close();
})
.catch(function(err){
console.log(err);
});
}
Figura 3. 33 Función postNewArea
67
A continuación en la figura 3.34 definiremos el template nav.jade el cual
definirá barra de navegación de todas pantallas del sistema.
Template
nav(id="custom-bootstrap-menu" class="navbar navbar-default navbar-
fixed-top" role="navigation")
div(class="container-fluid")
div(class="navbar-header")
a(href="http://localhost:3000/users/panel")
img(src='/images/blancologl.png', width='160', height='60', alt='')
button(type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target=".navbar-menubuilder " aria-
expanded="false")
span(class="sr-only")= 'Toggle navigation'
span(class="icon-bar")
span(class="icon-bar")
span(class="icon-bar")
div(class="collapse navbar-collapse" id="bs-example-navbar-collapse-1")
ul(class="nav navbar-nav navbar-right")
if !isAuthenticated
li
a(href="http://localhost:3000/auth/signin")= 'Iniciar Sesion'
if isAuthenticated
li(class="dropdown")
a(href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false")= user.nombre
span(class="caret")
ul(class="dropdown-menu")
li
a(href="http://localhost:3000/users/profile")= 'Perfil'
li
a(href="http://localhost:3000/auth/logout")= 'Cerrar Sesion'
Figura 3. 34 Template nav.jade
68
1.6.6.2 Creación de la Pantalla de Inicio
Para la creación de la pantalla de inicio se mostrara el proceso con el cual
realizamos el desarrollo de la pantalla de inicio.
a. Creación de la ruta:
Para la visualización de la pantalla de inicio a través del navegador web es
necesario definir la ruta mediante la cual accederá a dicha pantalla. Nos
dirigimos al archivo routes.js, que está ubicado en el directorio /routes y
procederemos a crear una ruta, utilizaremos el método get ya que no se enviara
ningún dato para la carga inicial, se muestra en la figura 3.35.
b. Creación del Controlador
Para la creación del controlador nos dirigimos al módulo homeController.js
ubicado en el directorio /controllers, dentro de este creamos la función index.
Método encargado de re-direccionar a la vista home.jade ubicado en el
directorio “/”, se lo describe en la figura 3.36.
c. C
r
e
Ruta
router.get('/', controllers.homeController.index);
Figura 3. 35 Ruta de acceso a la vista home.jade
Ruta
module.exports = {
index : function(req, res, next){
res.render('home',{
isAuthenticated : req.isAuthenticated(),
user : req.user
});
}
}
Figura 3. 36 Controlador index
69
c. Creación la vista
Para la creación de la vista nos ubicamos dentro del directorio /views/, donde
crearemos un archivo con la extensión .jade, el cual llamaremos home.jade,
q
u
e
s
e
o
b
s
e
r
v
a
e
n
l
a
figura 3.37.
Ruta
extends templates/default
block content
div(id="myCarousel" class="carousel slide" data-ride="carousel")
ol(class="carousel-indicators")
li.black(data-target="#myCarousel" data-slide-to="0"
class="active")
li.black(data-target="#myCarousel" data-slide-to="1")
li.black(data-target="#myCarousel" data-slide-to="2")
div(class="carousel-inner" role="listbox")
div(class="item active" id="principal")
img(src="./images/imagen1.jpg" style="display:inline" alt="New
York" width="2000" height="900")
div(class="carousel-caption")
h1.black="Innovación"
p.black="Un paso hacia el futuro"
div(class="item" id="principal")
img(src="./images/imagen2.jpg" style="display:inline"
alt="Chicago" width="2000" height="980")
div(class="carousel-caption")
h1.black="Tecnología"
p.black="Mejorar la calidad de vida"
div(class="item" id="principal")
img(src="./images/imagen3.jpg" alt="Los Angeles"
style="display:inline" width="2000" height="980")
div(class="carousel-caption")
h1.black="Medicina del Futuro"
p.black="Cerca de las personas"
Figura 3. 37 Vista home.jade
70
Como se puede observar es similar al código que utilizamos en HTML, la
diferencia es que las etiquetas que utilizamos tendrán un formato diferente. Para la
cabecera del archivo utilizaremos un template anteriormente definido llamado default,
para el body hemos creado un slider de imágenes el cual será la presentación del
sistema.
1.6.6.3 Creación del Login
En la presente sección se mostrara el proceso con el cual realizamos el
desarrollo de la pantalla para el ingreso al sistema.
1. Creación de la ruta.
Para poder visualizar la vista a través del servidor web, debemos definir la ruta
por la cual la accederemos. Nos dirigirnos al archivo routes.js, ubicado en el directorio
/routes y creamos una ruta, como no se enviara ningún dato para la carga inicial de la
vista utilizaremos el método get.
En la figura 3.38 se muestra la ruta creada con el método get, la cual podrá ser
accedida desde el servidor web con '/auth/signin', la función que procesara el
requerimiento será la función getSignIn, la cual se encuentra dentro del módulo
UserController ubicada en el directorio /controllers, esta función será la encargada de
realizar el proceso de redirección a la vista signin.jade.
Ruta var passport = require('passport');
router.get('/auth/signin', controllers.UserController.getSignIn);
71
2. Creación del Controlador
Para la creación del controlador nos dirigimos al módulo UserController.js
ubicado en el directorio /controllers, dentro de este creamos la función getSignIn.
En la figura 3.39 se muestra el método encargado de re direccionar la vista
signin.jade ubicado en el directorio /users, a la cual se le envía un mensaje flash.
3. Creación la vista
Para la creación de la vista nos ubicamos dentro del directorio /views/users,
donde crearemos un archivo con la extensión .jade, el cual llamaremos signin.jade.
En la figura 3.40 se muestra el código con el que hemos creado la vista, como
se puede observar es similar al código que utilizamos en HTML, con la diferencia de
que las etiquetas que utilizamos tendrán un formato diferente.
Para la parte de la cabecera del archivo utilizaremos un template anteriormente
definido llamado default, en la parte del body hemos creado un panel, dentro del cual
vamos a ubicar un formulario, en el cual tendremos un input tipo texto en el cual
ingresaremos el usuario y un input tipo password en el cual se ingresara la clave del
usuario, este formulario enviara esta información a través de un método post hacia la
ruta /auth/signin.
Figura 3. 38 Ruta de acceso a la vista singnin.jade
Controlador
getSignIn: function(req, res, next){
return res.render('users/signin', {message: req.flash('info'), });
}
Figura 3. 39 Controlador getSignIn
72
4. Creación de la ruta
Para la creación de una nueva ruta debemos dirigirnos al archivo routes.js,
ubicado en el directorio /routes, como la información que vamos a recibir de la
pantalla signin.jade es enviada por el método post, nuestra ruta debe ser post.
Vista signin.jade extends ../templates/default
block content
br
br
br
.panel.panel-default
.panel-heading
h1.panel-title Iniciar Sesión
div(class='row')
div(class='col-md-6 col-md-offset-3')
if message.length > 0
div(class='alert alert-success', role='alert-success')= message
div(class='panel panel-default')
div(class='panel-heading')
h3.panel-title Iniciar Sesión
div(class='panel-body')
form(action='http://dir_ip:3000/auth/signin' method='post')
div(class='form-group')
label(for='email')= 'Email'
input(type='text' name='username' id='email' placeholder='Email' class='form-control')
div(class='form-group')
label(for='password')= 'Password'
input(type='password' name='password' id='password' placeholder='Password' class='form-control')
button(type='submit' class='btn btn-primary')= 'Iniciar Session'
Figura 3. 40 Vista signin.jade
73
En el archivo routes.js, se encuentra creada una variable router, con la cual
crearemos la ruta.
En la figura 3.41 se muestra la ruta /auth/signin' creada con el método post, en
la cual creamos el controlador, donde llamaremos a la función authenticate del
módulo passport que se ha importado, esta función requiere de la estrategia que hemos
creado para la autenticación de usuarios en el sistema, la cual será local es decir que
será mediante la verificación de la calve en una base de datos propia del sistema, y
también se enviaremos un objeto json con tres propiedades, la primera propiedad
cuando la autenticación es correcta se re direccionará a la vista '/users/panel', la
segunda propiedad cuando falla la autenticación se re direcciona a la vista
'/auth/signin', y la tercera propiedad que nos indicara que se debe mostrar un mensaje
cuando falle la autenticación.
5. Creación del Módulo passport
Para la autenticación de usuarios en nuestro sistema utilizaremos un plugin
llamado passport, el cual debe estar previamente instalado como se muestra en la
sección 3.4.2. Passport nos proporciona estrategias de autenticación, las cuales nos
Ruta
var router = express.Router();
var passport = require('passport');
router.post('/auth/signin', passport.authenticate('local', {
successRedirect : '/users/panel',
failureRedirect : '/auth/signin',
failureFlash : true
}));
Figura 3. 41 Controlador postSignIn
74
permiten integrar login con aplicaciones externas como las de twitter, facebook, pero
también nos proporciona una estrategia local que nos permitirá la autenticación de
usuarios con una base local si necesidad de aplicaciones externas, la estrategia que
escogeremos será la de passport-local.
Una vez instalado el módulo, lo primero que haremos será importar este
módulo a nuestro sistema, para lo cual nos dirigiremos al archivo app.js donde
crearemos una variable passport y también creamos dos midllewares los cuales nos
permitirá conectar passport con la aplicación.
En la figura 3.42 se muestra la configuración del módulo passport en el
archivo app.js, donde creamos una variable passport, en la que importaremos el
módulo, después definimos las propiedades que utilizaremos la primera será para
inicializar el módulo, y la segunda nos ayudara a gestionar las sesiones.
Una vez configurado el módulo en nuestro sistema vamos a crear un archivo
passport.js el cual nos ayudara autenticar nuestro usuario.
En la figura 3.43 se muestra como está estructurado el archivo passport, el cual
creamos para procesar la información de autentificación de usuarios. Como primer
paso importamos los módulos que vamos a utilizar, se crea la variable LocalStrategy,
la cual importara la estrategia que utilizaremos para nuestra autentificación, y también
Configuración app.js
var passport = require('passport');
app.use(passport.initialize());
app.use(passport.session());
Figura 3. 42 Configuración app.js (módulo passport)
75
se crea la variable bcrypt, la que nos ayudara con propiedades de encriptación. La
función que vamos a crear la cargaremos en un module.exports, para que esta pueda
ser utilizada por otros módulos de nuestro sistema, esta función recibirá un parámetro
(passport), y constara de tres pasos que se dividen de la siguiente manera:
a. Serialización del Objeto
b. Deserialización del Objeto
c. Autentificar
Como podemos observar en la figura 3.43 el módulo passport, nos proporciona
dos funciones que nos ayudan a serializar y deserializar los objetos, en las cuales va a
requerir como primer parámetro el usuario que queremos serializar, y la función
cuando ya se haya serializado, donde enviaremos el parámetro null y el usuario
serializado, de igual manera para deserializar el objeto, la función requiere del objeto a
ser deserializado y de la función cuando haya serializado, en donde se manda el primer
parámetro como null, y el objeto deserializado.
La función que nos ayudara con la autenticación será la función de
passport.use(), la cual necesitara una nueva estrategia local definida como new
LocalStrategy, la misma que necesita dos parámetros el primero es un objeto json
‘passReqToCallBack : true’ el cual nos pasara el objeto request una vez que se llame a
la función , y el segundo es una función la cual recibirá a el mail y el password del
usuario, dentro de esta función se crea la variable de sesión haciendo un require, al
archivo de configuración, se abre una sesión y se corre la consulta con él .run(), esta
consulta sacara el nodo de usuario que tenga el email especificado en la variable
useremail, dentro de .then() se crea una función en la cual se recibirá el resultado de la
consulta anterior en caso de que este exista y la recorrerá para cargarla en un array,
76
una vez finalizado este proceso se procede a realizar la comparación de las
contraseñas, en donde se utilizara una función definida por el módulo bcrypt, en el
cual se ingresa el password que ha sido ingresado por el usuario y el password que
este usuario tenga guardado en su nodo de user, en el caso de que estos password sean
iguales se retornara un objeto con los datos del usuario (excepto el password), caso
contrario se enviara un valor falso, el que indicara que la contraseña es incorrecta. Por
último se cierran las sesiones. En el caso de que la consulta falle seguido del .then()
habrá un .catch(), el que creara una función para enviar los errores sucedidos, (Esta
función nos ayuda en el entorno de pruebas).
passport.js
var LocalStrategy = require('passport-local').Strategy;
var bcrypt = require('bcryptjs');
module.exports = function(passport){
passport.serializeUser(function(user,done){
done(null, user);
});
passport.deserializeUser(function(obj, done){
done(null, obj);
});
passport.use(new LocalStrategy({
passReqToCallBack : true
}, function(useremail, password, done){
var session = require('.././database/config');
session
.run('match(usr:User) where usr.email="'+useremail+'"
return usr ')
.then(function(result2){
var userArr = [];
console.log(result2);
result2.records.forEach(function(record){
userArr.push({
id: record._fields[0].identity.low,
username:
77
record._fields[0].properties.username,
email:
record._fields[0].properties.email,
profile:
record._fields[0].properties.profile
});
if(bcrypt.compareSync(password,
record._fields[0].properties.password)){
console.log('El Password es correcto');
return done(null, {
id: record._fields[0].identity.low,
nombre:
record._fields[0].properties.username,
email:
record._fields[0].properties.email,
perfil:
record._fields[0].properties.profile
});
session.close();
}
console.log('El password es Incorrect')
return done(null, false);
session.close();
}
);
})
.catch(function(err){
console.log(err);
});
}
));
};
Figura 3. 43 Archivo passport.js
78
RESULTADOS
Los resultados que se han obtenido después de haber desarrollado e implementado
la aplicación han conseguido los beneficios esperados.
La aplicación de muestra que cumple con los requisitos para el “Administrador” y
“Doctor” y para beneficio del paciente.
1.7 Ingreso al sistema
En la figura 4.1 se puede observar la pantalla de inicio, la cual ha sido desarrollada
en base al wireframe 2.5, utilizando el código que se puede observar en la figura 3.37.
Figura 4.1 Inicio del Sistema
En la figura 4.2 se muestra la pantalla de login del sistema, la cual permite el
acceso al sistema, esta pantalla se desarrolló en base al wirefrime que se encuentra en el
Anexo B.
79
Figura 4.2 Login del sistema
Después de ingresar al sistema como administrador, se visualizara un panel de
control, el cual nos brinda todos los beneficios de administrador que son descritos en la
figura 4.3.
1.8 Ingreso de Parámetros
El administrador será el encargado realizar la carga inicial de los parámetros
necesarios para el funcionamiento del sistema, es decir tendrá el control sobre el ingreso
de los catálogos, los parámetros de ingreso son los siguientes:
a. Nueva Especialidad
Figura 4.3 Panel de Control Administrador
80
b. Nueva Área
c. Nuevo Tipo de vista
d. Nueva Técnica de Escaneo
e. Nuevo Procedimiento
Sin el ingreso de los parámetros mencionados anteriormente el sistema no
cumplirá con su propósito y no funcionara de manera adecuada, a continuación en la
figura 4.4 se describe el ingreso de uno de los parámetros mencionados.
Figura 4.4 Ingreso de parámetros
1.9 Ingreso usuarios
El administrador controlara el ingreso de usuarios tales como Doctor y Pacientes,
con esto se controla que cualquier persona ingrese datos erróneos a la aplicación, a
continuación en la figura 4.5 se describe el formulario de ingreso de un nuevo doctor, una
vez ingresados los datos del doctor se creara el doctor y podrá tener acceso al sistema para
realizar los procesos respectivos.
81
El ingreso de datos del paciente de igual forma sera ingresado por el administrador
para que los doctores ingresados tengan acceso a dichos pacientes y puedan realizar los
procesos respectivos, se detalla en la figura 4.6 el formulario de ingreso de pacientes.
Figura 4.6 Formulario de ingreso de pacientes
Figura 4.5 Formulario de ingreso doctor
82
1.10 Doctor
El doctor una vez que haya ingresado al sistema tendrá acceso al panel de control
el cual tendrá la posibilidad de realizar con todos los procesos que tiene como objetivo el
doctor, tales como ingreso de nueva imagen, ingreso de características a la imagen por
paciente, búsqueda y visualización de imágenes por diferentes filtros, generación de
reportes y procesamiento de imágenes, se puede visualizar el panel de control del doctor
en la figura 4.7.
Figura 4.7 Panel de control del doctor
Una vez que el doctor elija ingreso de nueva imagen, podrá escoger el paciente que va
a ser atendido, tipo de vista, área médica, técnica utilizada, procedimiento, enfoque y
observaciones de acuerdo a las necesidades que se le deba ingresar al paciente de acuerdo a la
imagen previa cargada, además se podrá realizar un corte de la sección de la imagen deseada
se puede visualizar en la figura 4.8.
83
Figura 4.8 Ingreso de imagen
El doctor puede visualizar la información ingresada, lo puede hacer por diferentes
filtros. De igual forma puede llevar un historial de cada paciente añadiendo observaciones
a la imagen para llevar un historial de los pacientes con sus respectivas imágenes y datos,
se puede visualizar la información en la figura 4.9.
Figura 4.9 Visualización de información
84
Se puede ingresar observaciones nuevas a la imagen que está relacionada con su
respectivo paciente, cada vez que se ingrese una observación se va guardado una fecha y
se maneja un historial, se puede observar en la figura 4.10 el ingreso de la observación
con la fecha de ingreso.
Figura 4.10 Añadir observación
1.11 Procesamiento de imágenes
El sistema realiza procesamiento de imágenes, el doctor es la persona encargada de
llevar a cabo este proceso, al acceder al procesamiento de imágenes este nos permitirá
seleccionar al paciente del cual queremos obtener un poco más de información, por medio
de su imagen a la cual el doctos aplicara los filtros necesarios para detectar posibles
anomalías, enfermedades del paciente, se describe la pantalla de muestra de información
para aplicar el procesamiento a dicha imagen figura 4.11.
85
Figura 4.11 Información de imagen previa a procesamiento
Ya seleccionado el aplicar filtro nos desplegara la pantalla en la cual el doctor
podrá aplicar los filtros, tendrá la opción de restablecer a la imagen original y también
tendrá la opción de descargar la imagen procesada para un fin necesario, se visualiza en la
figura 4.12
.
Figura 4.12 Imagen original
86
Con la aplicación del filtro Cross Process se logra la notoriedad de los colores más
claros y eso ayuda a resaltar las características extrañas de la imagen, esto sería de gran
ayuda para que el médico determine de una manera más fácil que la arteria ilíaca, presenta
una anomalía, como se puede observar en la figura 4.13.
Figura 4.13 Imagen con filtro
Los demás filtros se podrán observar en el Anexo B.
1.12 Generación de Reportes
El sistema tiene la funcionalidad de generación de reportes, mediante estos
reportes se cumple con el objetivo de extracción de información requerida, el proceso de
generación de reportes lo realizara el doctor ya que él se encarga del manejo de sus
pacientes y puede generar el reporte que el crea pertinente para su beneficio.
87
A continuación en la figura 4.14 se visualiza el reporte de historial de imágenes
por paciente el cual podrá ser generado por el doctor.
Figura 4.14 Modelo de reporte generado
88
En la figura 4.15 se muestra un reporte de las imágenes agrupadas por su área médica,
con el respectivo gráfico.
Figura 4.15 Reporte por área médica
En la figura 4.16 se observa el reporte de las imágenes por procedimiento, con su
representación gráfica.
Figura 4.16 Reporte por procedimiento médico
89
CONCLUSIONES
Se logró la recopilación de 100 imágenes médicas obtenidas por medio
del internet, con lo que se pudo obtener una primera clasificación de imágenes por
sus áreas, ya que este fue el enfoque principal para la búsqueda de las imágenes, se
clasificó por área de ginecología, neurología, traumatología y medicina familiar.
Aprovechando las propiedades de las bases de datos orientadas a
grafos, se definió la creación de las características de la imagen como nodos, con
esto conseguimos la separación de la imagen de sus características, y redefinimos
el concepto de la característica de la imagen, con lo que ahora la imagen forma
parte de un conjunto de imágenes que pertenecen a la característica y ahora las
búsqueda se centran en las imágenes que pertenecen a este conjunto, y no en el
concepto de antes, en el que se buscaba similitud entre las características de las
imágenes. Por lo que las consultas son más rápidas.
Con el almacenamiento de las imágenes como dato, conseguimos que
las imágenes solo puedan ser administradas únicamente a través del sistema, con lo
que se eliminaría el tener las imágenes almacenadas en un directorio del servidor,
lo que ayudo a tener una mejor manipulación de las imágenes dentro del sistema.
El módulo de procesamiento consiguió la mejora de calidad de la
imagen por de medio de los filtros que se aplican, se pudo variar el contraste,
reducir el ruido, la saturación de la imagen, etc. Al resaltar las zonas blancas de la
imagen a través del contraste se pudo eliminar lo innecesario de la imagen y
resaltar la posición del campo a tratar y extraer mayor información.
90
Además de que se consiguió crear un registro cronológico, también se
logró producir un historial de las imágenes por paciente y consecuentemente
también se obtuvo un historial de las imágenes ingresadas por los médicos.
Con la implementación del módulo de ingreso de nuevas observaciones
sobre una imagen, se logró crear un historial de observaciones de la imagen, con lo
que se puede obtener diferentes puntos de vista de los médicos, dentro de los
cuadros clínicos del paciente.
En base a las reuniones que se mantuvo con el personal médico
especializado, el sistema cumple con las expectativas del sistema y expresaron su
conformidad con el sistema desarrollado.
91
RECOMENDACIONES
Para el uso del sistema se recomienda que los doctores tengan un perfil orientado a
la imagenología para que se aproveche de mejor manera las funcionalidades y el enfoque
del sistema, con lo cual se podrá llevar de mejor manera las imágenes y sus observaciones.
Sería recomendable la continuación del proyecto, ya que el campo de la medicina
es muy amplio, implementando módulos estadísticos con diferentes enfoques, también un
módulo de gestión de citas médicas, los cuales no se realizaron al no constar en los
alcances del proyecto ya que se necesitaría una mayor inversión de tiempo.
La aplicación desarrollada podría ser utilizada con fines educativos, preparando a
los estudiantes que se están perfilando para doctores dentro de la Universidad Central del
Ecuador o fuera de ella.
Con la información que se vaya almacenando con el uso del programa, se pueda
tomar en cuenta como base para futuras investigaciones y proyectos
Se recomienda que la información que se vaya almacenando con el uso del
programa, pueda ser tomada en cuenta como base para futuras investigaciones y
proyectos, ya que dicha información es muy valiosa.
92
GLOSARIO
npm, es el gestor de paquetes javascript de Node js por excelencia. Gracias a él,
tenemos casi cualquier librería disponible.
Cypher, es un lenguaje de consultas gráficas, desarrollado para realizar las consultas
en Neo4j.
Wireframe, es un esquema de página o plano de la pantalla, que permite una guía
visual que muestra la estructura básica visual de un sitio Web.
GitHub, es una plataforma de desarrollo en la cual se pueden alojar aplicaciones en
desarrollo y además permite manejar versionamiento con Git.
HTML, es un lenguaje que se utiliza para la creación de páginas web. Se trata de la
sigla que corresponde a HyperText Markup Language.
Jade, es un lenguaje de plantillas que reemplaza la sintaxis HTML.
HTTP, Abreviatura de la forma inglesa Hypertext Transfer Protocol, ‘protocolo de
transferencia de hipertextos’, que se utiliza en algunas direcciones de Internet.
JavaScript, es un lenguaje de programación de alto nivel que se utiliza para desarrollar
sitios web.
Bootstrap, es un framework desarrollado y liberado por Twitter que tiene como
principal objetivo el fácil diseño web.
CSS, es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación
de los documentos electrónicos definidos con HTML y XHTML.
93
JSON, JavaScript Object Notation - Notación de Objetos de JavaScript es un formato
ligero de intercambio de datos.
Middleware, es la lógica de intercambio para interactuar y comunicarse entre
aplicaciones.
Plugin, es un programa que incrementa o aumenta las funcionalidades de un programa
principal. .
Sourcetree, es una herramienta que ayuda a la gestión del versionamiento de
aplicaciones.
94
BIBLIOGRAFÍA
1. ALEGSA L. 2016 Recuperado el 10 de Noviembre (05 de Diciembre de 2015). ALEGSA., de
http://www.alegsa.com.ar/Dic/
2. CAMAN JS. 2016 Recuperado el 15 de Diciembre (10 de Septiembre de 2016). CamanJs., de
http://camanjs.com/
3. GONZALES, O. 2016 Recuperado el 11 de Diciembre (09 de Septiembre de 2013). Codehero., de
http://codehero.co/node-y-express-jade-js/
4. JSREPORT. 2016 Recuperado el 2 de Diciembre (10 de Octubre de 2016). jsreport., de
https://jsreport.net/
5. NEO4J. 2016 Recuperado el 10 de Diciembre (Octubre de 2 de 2016). Neo4j., de https://neo4j.com/
6. NODE JS. 2016 Recuperado el 5 de Noviembre (1 de Febrero de 2016). Nodejs., de
https://nodejs.org/en/
7. RIVEROS, O. 2016 Recuperado el 10 de Diciembre (10 de Noviembre de 1991). Biblioteca Digital., de
http://bibliotecadigital.ilce.edu.mx/sites/ciencia/volumen2/ciencia3/084/htm/sec_9.htm
8. SIERRA, M. 2016 Recuperado el 5 de Diciembre (10 de Octubre de 2006). Aprenda a Programar., de
http://www.aprenderaprogramar.com/index.php?option=com_content&id=546:que-es-y-para-que-sirve-
el-lenguaje-css-cascading-style-sheets-hojas-de-estilo&Itemid=163
9. VELÁSQUEZ, W. 2016 Recuperado el 10 de Diciembre (Noviembre de 12 de 2013). ACADEMIA., de
http://www.academia.edu/5731075/Bases_de_datos_orientadas_a_grafos_y_su_enfoque_en_el_mundo
_real
10. WILSON, Mike. 2012, 23 de abril, O'Reilly Media; Edición: 1
11. HUGHES-CROUCHER, Tom. 2012,13 de octubre, of Node: Up and Running (O’Reilly)
12. ZAKAS, Nicholas C. 2011, 11 de noviembre, Professional JavaScript for Web Developers
13. MUÑOZ DE LA TORRE, Arturo, 2013, 23 de mayo, Koans for Node.js
95
ANEXOS
Anexo A. Acta de reuniones ............................................................................................ I
Anexo B. Wireframes de la aplicación web .................................................................. II
Anexo C. Filtros de imágenes ....................................................................................... V
II
Anexo B. Wireframes de la aplicación web
1. Wireframe pantalla de login
2. Wireframe pantalla de carga de imagen