“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

II

AUTORIZACIÓN DE LA AUTORIA INTELECTUAL

III

CERTIFICACIÓN DEL TUTOR

V

DESIGNACIÓN DE TRIBUNAL

VI

CALIFICACIÓN DEL TRIBUNAL

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


XIV


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


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


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


nodo Patient con los nodos de

Image, indica a que usuario

pertenecen las imágenes.

(img)-[blg:belong]->(ptn)

responsable rsp


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


nodos Image y el nodo area,


pertenecen al área.

(img)-[blar:belongs_ar]->(ar)

belongs_th blth


nodos Image y el nodo

Technique, indica las imágenes

que pertenecen a la técnica.

(img)-[blth:belongs_th]->(th)

belongs_pr blpr


nodos Image y el nodo Process, (img)-[blpr:belongs_pr]->(pr)

22


pertenecen al proceso.

belongs_obs blobs


nodo Image y los nodo

Observations, indica las

observaciones que pertenecen a

la imagen.

(blobs)-[blobs:belongs_obs]->(img)

belongs_dra bldra


nodos Doctor y el nodo Area,

indica los doctores que

pertenecen a esta área.

(dr)-[ bldra:belongs_ dra]->(ar)

belongs_drs bldrs


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

24

Figura 2. 6 Panel de usuario

Los Wireframes restantes se podrán observar en el anexo B.

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


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


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})


var obsArr = [];


obsArr.push({


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.


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();

})


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){


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 ')


var arrDr=[];


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.


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();

})


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){


session

.run('MATCH(ar:Area) RETURN ar.type')


var typeArArr = [];


typeArArr.push({

typear: record._fields[0]

});

});

session

.run('MATCH(sp:Specialty) RETURN sp.namesp')


var nameSpArr = [];


nameSpArr.push({

namesp: record._fields[0]

});

});

res.render('users/doctor',{


user : req.user,

typesAr: typeArArr,

nameSpArr: nameSpArr

});

session.close();

})


console.log(err);

});

session.close();

})


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 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})


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})


res.redirect('/users/doctors');

session.close();

})


console.log('Error2');

console.log(err);

}); session.close();

})


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();

})


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',{


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 type = req.body.typearea;

var description = req.body.descriptionar;

session

.run('CREATE(ar:Area {type:{typeParam},

description:{descriptionParam}})', {typeParam:type,

descriptionParam:description})


res.redirect('/usersu/nwar');

session.close();

})


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")



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',{


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")


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")


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){


session

.run('match(usr:User) where usr.email="'+useremail+'"

return usr ')


var userArr = [];

console.log(result2);

result2.records.forEach(function(record){

userArr.push({


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, {


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();

}

);

})


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

I

Anexo A. Acta de reuniones

II

Anexo B. Wireframes de la aplicación web

1. Wireframe pantalla de login

2. Wireframe pantalla de carga de imagen

III

3. Wireframe Pantalla de ingreso de observaciones

4. Wireframe Pantalla búsqueda de imágenes

IV

5. Wireframe Pantalla de procesamiento de imágenes

V

Anexo C. Filtros de imágenes

1. Filtro Sin City

2. Filtro Cross Process

VI

3. Filtro Clarity

“SISTEMA INFORMÁTICO PARA LA IDENTIFICACIÓN ... · universidad central del ecuador facultad de...

Documents

Transcript of “SISTEMA INFORMÁTICO PARA LA IDENTIFICACIÓN ... · universidad central del ecuador facultad de...