Informe Trabajo Final - Mozo, Andr_s _ Mozo, Facundo (1)

Vista previa del material en texto

Herramienta web para la enseñanza
del reflejo fotopupilar mediante la
simulación
Universidad Nacional del Centro de la
Provincia de Buenos Aires
Trabajo Final de la Carrera Ingeniería de Sistemas
Alumnos: Andrés Mozo
Facundo Mozo
Director: Dr. José Massa
Co-directora: Dra. Micaela Andrea Benavente
Agradecimientos
Queremos agradecer a nuestra familia, la cual nos dio siempre y en todo
momento, su apoyo y amor incondicional durante todos estos años. A nuestros
amigos, por acompañarnos en este lindo camino que fue la facultad, haciendo que
todo sea más fácil y ameno. A la Universidad y a todos sus profesores, en especial
a José y Micaela, que nos brindaron todos sus conocimientos y la oportunidad de
estudiar y recibirnos.
3
Índice de contenidos
1 - Introducción 8
1.1 - Motivación 11
1.2 - Objetivos 12
1.3 - Estructura del documento 13
2 - Marco Teórico 13
2.1 - Conceptos médicos veterinarios 13
2.1.1 La simulación como herramienta para la enseñanza de las ciencias
médicas 13
2.1.2 Reflejos fotopupilares en perros 14
2.2 - Tecnologías consideradas para el desarrollo de la herramienta 15
2.2.1 - Tecnologías web Front-end 15
2.2.1.1 - Angular 16
Funcionamiento de Angular 17
Módulos 19
Lazy Loading 20
Componentes 20
Template o Vista (HTML) 22
Services 22
2.2.1.2 - ReactJS 22
2.2.1.3 - Vue 24
2.2.2 - Tecnologías web Back-end 24
2.2.2.1 - Node JS 24
2.2.2.2 - Spring 25
2.2.2.3 - Django 26
2.2.2.4 - Express.js 27
2.2.3 - Bases de datos 27
2.2.3.1 - MongoDB 27
2.2.3.2 - MySQL 28
2.2.4 - Otras tecnologías relacionadas 30
2.2.4.1 - Typescript 30
2.2.4.2 - Mongoose 30
2.2.4.3 - JSON Web Token (JWT) 31
2.3 Herramientas y servicios 31
2.3.1 - Trello 31
2.3.2 - Git 32
2.3.3 - GitHub 32
2.3.4 - GitLab 33
2.3.5 - Postman 33
4
2.3.6 - MongoDB Atlas 34
2.3.7 - MongoDB Compass 34
2.3.8 - Heroku 35
2.3.9 - Docker 36
2.4 - Otros conceptos tecnológicos 37
Arquitectura REST, Protocolo HTTP y formato JSON 37
3 - Estado del arte 39
3.1 - Herramientas existentes 39
3.1.1 - Herramienta del Royal Veterinary College 39
3.1.2 - Otros programas de aprendizaje digital que ofrece la Universidad de
Londres 39
3.1.3 - MSD MANUAL - Veterinary manual 39
3.1.4 - Studystack 40
3.1.5 - Simulador para oftalmología en humanos - Medical X 41
3.1.6 - Body Interact - Mesa Interactiva de casos clínicos 41
3.1.7 - CAE Maestro Evolve - Medical Simulator 43
3.1.9 - Virtual Animal Anatomy - Colorado State University 44
3.1.10 - Virtual Animal Anatomy (Virtual Reality) - Colorado State University46
3.1.11 - Simulador de anomalías pupilares - ULEAM 46
3.2 Comparación de las herramientas existentes 48
4 - Método Propuesto 54
4.1 - Requerimientos 54
4.1.1 - Requerimientos Funcionales 55
4.1.2 - Atributos de calidad 56
4.2 - Diseño 58
4.2.1 - Tipo de aplicación 58
4.2.2 - Arquitectura web 59
4.2.3 - Diseño de la solución 59
4.2.3.1 Actores del Sistema 59
4.2.3.2 FrontEnd 60
4.2.3.3 BackEnd y Base de Datos 61
4.3 - Codificación 64
4.3.1 - Elección de Tecnologías 64
4.3.2 - Flujo general de la aplicación 65
4.3.3 - FrontEnd 66
4.3.3.1 - Estructura modular del FrontEnd de la herramienta OcularVet 66
AppModule 66
AuthModule 68
ProtectedModule 69
AdminModule 71
AlumnoModule 73
5
4.3.3.2 Services 73
4.3.4 - BackEnd 75
4.3.4.1 Routes 75
Auth Routes (/api/auth) 76
Nota Routes (/api/nota) 77
Usuario Routes (/api/usuario) 78
Diagnóstico Routes (/api/diagnostico) 78
4.3.4.2 Middlewares 79
4.3.4.3 Controllers 80
4.3.4.4 Models 81
Modelo Usuario 82
Modelo Nota 82
Modelo ConfiguracionAdmin 82
Modelo Diagnóstico 83
4.3.5 - Base de datos 83
4.4 - Puesta en funcionamiento 86
4.4.1 - Puesta en funcionamiento con Heroku 89
4.4.2 - Puesta en funcionamiento en los servidores de la Universidad 90
4.5 - Testing 93
5 - Herramienta 94
5.1 - Login 94
5.2 - Registro 94
5.3 - Realizar ejercicio de autoevaluación 95
5.3.1 - Consigna de la autoevaluación 96
5.3.2 - Ejercicio de autoevaluación del reflejo fotopupilar 96
5.4 - Visualizar y modificar datos del usuario 100
5.4.1 - Edición de datos del perfil 101
5.4.2 - Cambio de contraseña 101
5.5 - Funcionalidad específica del alumno 102
5.5.1 - Visualización Notas del Alumno 103
5.6 - Funcionalidades específicas del administrador 103
5.6.1 - Modificar parámetros de la autoevaluación 103
5.6.2 - Modificar código de registro de usuarios 104
5.6.3 - Visualizar, ordenar, filtrar y eliminar calificaciones 106
5.6.4 - Visualizar, ordenar, filtrar y eliminar usuarios 107
6 - Resultados 109
6.1 - Testeo con alumnos 109
6.2 - Testeo con profesores 113
7- Trabajos futuros y conclusiones 113
7.1 Trabajos Futuros 113
7.2 Conclusiones 115
6
8 - Bibliografía 119
7
Índice de Figuras
● Capítulo 2:
○ 2.1 - Lenguajes de programación más utilizados 18
○ 2.2 - HTML, CSS y Javascript 19
○ 2.3 - Frameworks Javascript 19
○ 2.4 - Funcionamiento general de Angular 21
○ 2.5 - Componente de Angular 23
○ 2.6 - Composición de componentes en Angular 23
● Capítulo 3:
○ 3.1 - RVC - Introducción 42
○ 3.2 - RVC - Diagnóstico 42
○ 3.3 - RVC: Digital Learning Showcase - Captura número 1 43
○ 3.4 - RVC: Digital Learning Showcase - Captura número 2 44
○ 3.5 - MSD Manual - Quizzes 45
○ 3.6 - MSD Manual - Heat Disease and Heart Failure quiz - Pregunta y
posibles respuestas 45
○ 3.7 - MSD Manual - Heat Disease and Heart Failure quiz - Respuesta y
explicación 46
○ 3.8 - StudyStack - Listado de cuestionarios y juegos 46
○ 3.9 - StudyStack - Flashcards 47
○ 3.10 - StudyStack - Palabras cruzadas 47
○ 3.11 - StudyStack - Scramble 47
○ 3.12 - StudyStack - Bug Match 48
○ 3.13 - Simulador reflejo pupilar humano 49
○ 3.14 - Body Interact - Caso clínico 50
○ 3.15 - CAE Maestro Evolve - Captura análisis pupilar 51
○ 3.16 - CAE Maestro Evolve - Captura análisis abdominal 51
○ 3.17 - CAE Maestro Evolve - Captura Instrumento Desfibrilador Virtual 52
○ 3.18 - Virtual Animal Anatomy - Captura anatomia canina 53
○ 3.19 - Virtual Animal Anatomy - Captura anatomia cerebro canino 53
○ 3.20 - Virtual Animal Anatomy - Quiz anatomía equina y canina 54
○ 3.21 - Virtual Animal Anatomy - Captura anatomía equina y canina 55
○ 3.22 - Simulador de anomalías pupilares 55
● Capitulo 4:
○ 4.1: Arquitectura Web 61
○ 4.2: Diagrama de componentes 63
○ 4.3: Modelado de datos 64
○ 4.4: Flujo general de la aplicación 68
○ 4.5: AppModule 70
○ 4.6: AuthModule 71
○ 4.7: ProtectedModule 72
○ 4.8: AdminModule 74
8
○ 4.9: AlumnoModule 75
○ 4.10: Funcionamiento general servidor Node de OcularVet 77
○ 4.11: Ruteo de la API 78
○ 4.12: Ruta para el registro de nuevo usuario 79
○ 4.13: Rutas de login y validación de Token 79
○ 4.14: Notas Routes 80
○ 4.15: Usuario Routes 81
○ 4.16: Diagnóstico Routes 82
○ 4.17: Definición de Schema y modelo Usuario 84
○ 4.18: Definición de Schema y modelo Nota 85
○ 4.19: Definición de Schema y modelo ConfiguracionAdmin 86
○ 4.20: Definición de schema y modelo Diagnóstico 87
○ 4.21: Organización de bases de datos de MongoDB 88
○ 4.22: Colecciones de nuestra base de datos 89
○ 4.23: Ejemplo de documentos en la colección ‘usuarios’ 89
○ 4.24 - Deploy en Heroku utilizando Git 92
○ 4.25: Colecciones de Postman y listado de peticiones 95
○ 4.26: Ejemplo de petición de Postman 96
○ 4.27: Error al probar una petición en Postman 97
● Capitulo 5:
○ 5.1: Login 98
○ 5.2: Registro 99
○ 5.3: Errores de validación 100
○ 5.4: Pop-up al ingresar email ya registrado 100
○ 5.5: Consigna del ejercicio 101
○ 5.6: Ejercicio de autoevaluación 102
○ 5.7: Respuesta correcta 104
○ 5.8: Respuesta incorrecta 104
○ 5.9: Tiempo agotado 105
○ 5.10: Ejercicio finalizado 105
○ 5.11: Edición de perfil 106
○ 5.12: Modificación de contraseña 107
○ 5.13: Notas de usuario alumno 108
○ 5.14: Configuración Administrador 109
○ 5.15: Notas de usuario administrador 110
○ 5.16: Administración de usuarios 111
● Capitulo 6:
○ 6.1: Resultados de la pregunta número 1 113
○ 6.2: Resultados de la pregunta número 5 114
○ 6.3: Resultados de la pregunta número 7 114
○ 6.4: Resultados de la pregunta número 6 114
○ 6.5: Resultados de la pregunta número 3 115
○ 6.6: Resultadosde la pregunta número 2 115
○ 6.7: Resultados de la pregunta número 4 116
9
○ 6.8: Resultados de la pregunta número 8 116
○ 6.9: Resultados de la pregunta número 9 117
○ 6.10: Resultados de la pregunta número 10 117
10
1 - Introducción
Los estudios comparativos de la enseñanza tradicional contra la enseñanza
digital indican que los estudiantes están dispuestos a esforzarse más para
responder evaluaciones innovadoras y que les hagan aprender más que de la forma
tradicional [1].
Se han realizado algunos estudios antes y después de la aplicación de
software educativo en el aula en los que se aprecia una mejora en el aprendizaje de
los estudiantes, por ejemplo en el trabajo ”The Role of Computer-Assisted
Instruction in the Teaching of Probability” de los autores Gürbüz, R., Dede, Y., y
Doğan,M. F. [2].
Por otro lado, el aprendizaje a través de e-Learning consigue involucrar a los
estudiantes y les facilita el aprendizaje autorregulado. El hecho de que los objetos
de aprendizaje se encuentren disponibles en cualquier momento y lugar, puede
aumentar la motivación [3].
Estas tres afirmaciones muestran la efectividad de la enseñanza auxiliada por
herramientas digitales. Empleando las palabras de Livingstone: “Lo mejor que se
puede decir sobre el papel de las TIC en el aula tradicional es que, incluso si las TIC
se usan de manera poco imaginativa sólo para obtener los resultados tradicionales,
e incluso si produce sólo mejoras moderadas en la alfabetización básica y la ciencia,
al mismo tiempo mejora la motivación de los alumnos y compensa algunas otras
desventajas, por esa razón seguirá siendo una iniciativa válida.” [4]
Entre los beneficios de un aprendizaje móvil se encuentra la flexibilidad de
acceso a la información en cualquier tiempo y lugar, la oportunidad de desarrollar el
aprendizaje autónomo y el trabajo en equipo. También propicia la creación de redes
de aprendizaje, incentiva la comunicación activa y efectiva de forma síncrona y
asíncrona, permite el uso de un mismo recurso de aprendizaje cuantas veces sea
necesario, y favorece el desarrollo del aprendizaje significativo [5] [6].
En este contexto como consecuencia del auge de los nuevos medios digitales
se asume el aprendizaje ubicuo como nuevo paradigma educativo, en cuya
propuesta el aprendizaje se produce en diversidad de contextos, permitiendo a los
estudiantes compaginar el aprendizaje formal con actividades extracurriculares en
tiempos diferidos y espacios distintos (en el hogar, en la universidad, o en el
transporte público) [7].
Por lo expuesto anteriormente se puede concluir que es factible que existan
muchas ventajas a la hora de combinar la educación con la tecnología.
11
Por otra parte, los docentes del curso de Fisiología del Sistema Nervioso y
Muscular de la Facultad de Ciencias Veterinarias de la Universidad Nacional del
Centro de la Provincia de Buenos Aires están interesados en el uso de herramientas
digitales para la enseñanza de algunos contenidos.
Los beneficios expuestos al comienzo, junto con la necesidad de los
docentes del curso anteriormente mencionado, llevaron a plantear el desarrollo de
una herramienta web para la autoevaluación de los estudiantes.
En particular, en este curso, se utilizó anteriormente una herramienta
publicada en la página web del RVC1 (Royal Veterinary College de Reino Unido),
que ofrecía un simulacro del reflejo fotopupilar, en la que los estudiantes debían
identificar las respuestas esperadas en un animal sin alteraciones, así como definir
qué estructura se encontraba dañada ante respuestas alteradas. Esto les permitía
realizar una autoevaluación sobre la temática de fisiología ocular. Esta herramienta
estaba desarrollada con la tecnología Flash, la cual dejó de funcionar, y por lo tanto
la herramienta dejó de estar disponible para su uso, durante mucho tiempo. En
base a trabajos anteriores en conjunto entre las docentes del curso de Fisiología del
Sistema Nervioso y Muscular, y el director de esta propuesta de Trabajo Final, se
buscó una posible solución a la necesidad existente de una herramienta.
Si bien el Royal Veterinary College está buscando una solución al problema
tecnológico de la implementación en Flash mediante una nueva implementación que
comenzó a estar disponible hace pocas semanas, no se puede asegurar que la
misma esté disponible siempre o que en algún momento se restrinja su uso, lo cual
motiva el desarrollo de una versión propia, proporcionando escalabilidad, agregado
de funcionalidades, disponibilidad del código fuente, registro de resultados,
personalización, entre otros.
El objetivo de esta tesis, por lo tanto, es la implementación de una aplicación
web, basando la parte del “ejercicio” de autoevaluación en la utilizada anteriormente,
agregándole mucha más funcionalidad. La herramienta anterior sólo tenía la
posibilidad de realizar dicha autoevaluación, de forma anónima, y sin calificación. Es
decir que se perdían los datos de quién es el que responde y cuál fue el resultado
de su evaluación.
En la solución planteada, se propone realizar un sistema de registro y login,
mediante el cual cada alumno podrá poseer un usuario y contraseña para acceder al
sistema. Por otro lado, se guardarán las calificaciones de cada una de las
autoevaluaciones, por lo que se podrá tener un registro de cada una de ellas y hacer
un análisis posterior de las mismas. Por su parte, los docentes podrán tener un
1 https://www.rvc.ac.uk/
12
https://www.rvc.ac.uk/
usuario de tipo “administrador”, con el cual tendrán la posibilidad de modificar ciertos
parámetros del ejercicio a evaluar, y administrar a todos los usuarios junto con todas
sus calificaciones.
Para la aplicación web propuesta, se planifica analizar un conjunto de
tecnologías modernas y actualizadas, tales como React, Angular, Vue, Spring,
NodeJS, Express, MongoDB, entre otras.
Dicha herramienta, no pretende sustituir el contacto personal ni la
intervención profesional de un veterinario especializado, sino, facilitar y potenciar la
enseñanza a través de la tecnología.
1.1 - Motivación
Desarrollar un proyecto desde cero, utilizando algunas de las tecnologías o
frameworks más habituales hoy en día en el mercado, como las mencionadas en la
sección anterior. Esto supone un gran desafío y una experiencia muy valiosa para
nuestra futura inserción en el mundo laboral.
La posibilidad de cooperar en un proyecto con una Facultad muy reconocida
de nuestra Universidad, como es la de Ciencias Veterinarias, con la oportunidad de
desarrollar un software de calidad utilizando buenas prácticas a la hora de realizar el
proyecto.
Poder ayudar tanto a los alumnos como a los profesores, brindando la
posibilidad de aprender y enseñar de una forma diferente, didáctica y lúdica, la cual
contribuya a los estudiantes a aprender mejor los conocimientos enseñados por los
docentes. Al mismo tiempo, nos incentiva a concluir el proyecto en el menor tiempo
posible para que el software entre en funcionamiento cuanto antes, y de esta
manera poder ayudar al curso y todos sus integrantes.
Eliminar la necesidad de llevar perros reales al aula para que los alumnos
puedan ver lo que sucede con sus pupilas, y de este modo aprender a diagnosticar
las distintas afecciones oculares. Esto sería una complicación por varias razones.
Primero, sería muy complicado poder conseguir distintos perros con cada una de las
diferentes afecciones (en este caso cinco, lesión nervio óptico derecho, lesión nervio
óptico izquierdo, lesión nervio oculomotor derecho, lesión nervio oculomotor
izquierdo, y quiasma óptico).
En segundo lugar, al ser una gran cantidad de alumnos, se complicaría que
cada uno pueda diagnosticar a cada uno de los perros de forma individual.
13
Por último, cuidar la salud de los pacientes (en este caso los perros) que en
dicho caso deberían pasar por el diagnóstico de más de cien alumnos. Gracias a
esta herramienta cada alumno podría simular esta interacción entre el veterinario y
el perro sin afectar a este último. También permitiríarealizar la autoevaluación
cuantas veces se necesite para que el alumno adquiera los conocimientos
necesarios, sin molestar al perro repetidas veces.
1.2 - Objetivos
El objetivo general de este Trabajo es diseñar e implementar una aplicación
web para el curso de Fisiología del Sistema Nervioso y Muscular de la Facultad de
Ciencias Veterinarias, en la cual los alumnos puedan realizar una autoevaluación
sobre los reflejos oculares en perros a través de la simulación de casos clínicos
reales de la práctica profesional. La autoevaluación les permitirá por un lado
identificar los componentes del arco reflejo visualizando su normal funcionamiento, y
por otro detectar qué estructura se encuentra dañada ante un reflejo fotopupilar
alterado.
Utilizando esta aplicación, se planifica que los usuarios alumnos tendrán las
siguientes funcionalidades disponibles:
● Registrarse y loguearse en el sistema.
● Realizar el ejercicio de autoevaluación.
● Ver un registro histórico de cada una de sus calificaciones.
● Modificar contraseña y otros datos de su usuario.
Los docentes por su parte, podrán:
● Registrarse y loguearse en el sistema.
● Modificar ciertos parámetros del ejercicio a evaluar.
● Visualizar, ordenar, filtrar y eliminar alumnos.
● Visualizar, ordenar, filtrar y eliminar las notas de los alumnos.
● Visualizar gráficas generales de las calificaciones de los alumnos.
● Modificar contraseña y otros datos de su usuario.
● Modificar los permisos de un usuario.
1.3 - Estructura del documento
En este capítulo se introdujo a la problemática del Proyecto, se explayó cual
es la motivación y los objetivos del mismo.
14
En el Capítulo 2, se explica el Marco teórico del proyecto, exponiendo los
conceptos médicos veterinarios relacionados con el mismo, así como también las
tecnologías tenidas en cuenta a la hora de realizarlo.
En el Capítulo 3, se muestran las alternativas existentes en el mercado, se
analizan las mismas y se realiza una comparación entre ellas y nuestra aplicación.
En el Capítulo 4, se expone el Método Propuesto para poder cumplir con los
objetivos planteados en la Sección 1. Allí, se detallará todo sobre el diseño e
implementación de la herramienta.
En el Capítulo 5, se muestra la Herramienta y se detallan cada una de sus
funcionalidades.
Por último, los resultados obtenidos, junto con la conclusión y trabajos
futuros, se presentan en los Capítulos 6 y 7.
15
2 - Marco Teórico
En esta Sección se expondrán y desarrollarán todos los términos y
tecnologías relacionados tanto con la medicina veterinaria como los vinculados a la
implementación de aplicaciones web.
2.1 - Conceptos médicos veterinarios
En esta sección se presentan algunos conceptos relacionados a las
herramientas de simulación para la enseñanza y en lo que respecta al reflejo
fotopupilar en perros.
2.1.1 La simulación como herramienta para la
enseñanza de las ciencias médicas
La simulación es un método muy útil en las Ciencias Médicas, tanto cuando
se emplea con fines educacionales como evaluativos. Consiste en situar al
estudiante en un contexto que reproduce una situación clínica de la realidad, ya sea
fisiológica o patológica [8]. Está siendo cada vez más aceptada como técnica de
aprendizaje en las ciencias de la salud, ya que permite integrar el conocimiento
teórico con la práctica y las ciencias básicas con las clínicas, así como desarrollar
competencias en el estudiante. A su vez plantea escenarios estandarizados y
reproducibles que posibilitan al estudiante corregir errores al repetir el
procedimiento, lo cual se ha visto que disminuye la ansiedad ante la realización del
mismo. Asimismo, el desarrollo de la simulación en medicina tiene ventajas desde el
punto de vista bioético, ya que vela por la seguridad de los pacientes y la protección
de sus derechos, evitando realizar maniobras repetidas veces, lo que puede
producir molestias y disconfort en los animales [9]. Esto es especialmente
importante en la carrera de Medicina Veterinaria, donde el número de estudiantes
suele ser superior a 100.
Existen diferentes tipos de simuladores, entre ellos los simuladores por
partes, los pacientes simulados, los simuladores de pantalla, los de realidad virtual,
y los de paciente completo [10].
Es importante mencionar que si bien es un buen complemento y alternativa
activa de aprendizaje, la misma no sustituye la interacción del estudiante con los
pacientes reales.
16
2.1.2 Reflejos fotopupilares en perros
El conocimiento adecuado de los mecanismos fisiológicos básicos del ojo y la
visión en caninos permite conocer y comprender enfermedades oculares, métodos
de diagnóstico, procedimientos terapéuticos y hasta técnicas quirúrgicas. Uno de
estos mecanismos fisiológicos básicos es el reflejo fotopupilar, responsable de la
respuesta de las pupilas a estímulos lumínicos de diferente intensidad. Esto ocurre
gracias a la inervación simpática y parasimpática del globo ocular. Ante una intensa
luz ambiental, el sistema parasimpático, mediante la acción del nervio oculomotor
(III par craneal) permite que la pupila se contraiga, proceso conocido como miosis.
El reflejo comienza cuando la luz excita las células receptoras de la retina, quienes
conducen el estímulo a través del nervio óptico hasta el quiasma óptico donde se
produce el entrecruzamiento de fibras. Luego, el estímulo viaja hasta los núcleos
pretectales, y de aquí a los núcleos oculomotores. Las fibras del nervio oculomotor
transmitirán la respuesta eferente al músculo ciliar y músculo constrictor de la
pupila, produciendo miosis. Este reflejo puede verse alterado en diversas patologías
como el glaucoma, la degeneración aguda de retina y la neuritis óptica, así como
también ante neoplasias o hemorragias cerebrales, entre otras. De aquí la
importancia de conocer sus bases fisiológicas y de saber cómo realizarlo de manera
correcta en el animal.
2.2 - Tecnologías consideradas para el desarrollo
de la herramienta
En esta Sección se presentan las tecnologías consideradas para el desarrollo
de la herramienta y conceptos relacionados.
2.2.1 - Tecnologías web Front-end
Desde páginas totalmente estáticas hasta webs altamente interactivas, el
lenguaje JavaScript [11] suele ser la razón principal detrás de esta potencialidad,
mientras que el estándar HTML [12] define el contenido y la especificación CSS [13]
cómo se percibe estéticamente. Por lo general, el código JavaScript es el
responsable de definir el comportamiento de una aplicación, el que hace que el
contenido sea dinámico e interactivo, y ser capaz de manipular el contenido (HTML)
como también la presentación (CSS). JavaScript domina por completo el mercado
web como se observa en la figura 2.1, en forma de una gran variedad de
frameworks y librerías lo que hacen que el desarrollo web resulte mucho más fácil y
bien estructurado.
17
Figura 2.1: Lenguajes de programación más utilizados 2
2 Worldwide developer survey most used languages
18
https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/
En la figura 2.2 se presenta un esquema resumen de la relación entre el
código Javascript, el contenido especificado en HTML y la presentación en CSS.
Figura 2.2: HTML, CSS y Javascript
Hoy en día, el proceso de desarrollo consiste principalmente en composición:
Romper un problema complejo en problemas pequeños, para luego resolverlos y
finalmente combinarlos con el fin de obtener una solución completa en forma de
aplicación. Todos los frameworks modernos facilitan el desarrollo siguiendo un
modelo de composición donde el diseño completo es fraccionado en pequeños
componentes, que luego son unificados para construir una solución completa [14].
En la figura 2.3 se listan los logotipos de algunos frameworks difundidos para el
lenguaje Javascript, algunos de los cuales se describirán con mayor detalle más
adelante.
Figura 2.3: Frameworks Javascript
19
2.2.1.1 - Angular
Angular [15] es un framework de ingeniería de software de código abierto
mantenido por la empresa Google, que sirvepara desarrollar aplicaciones web de
estilo Single Page Application (SPA) y Progressive Web App (PWA). Es un
framework basado en componentes para crear aplicaciones web escalables.
Angular podría considerarse una colección de bibliotecas bien integradas que
cubren una amplia variedad de características, que incluyen enrutamiento,
administración de formularios, comunicación cliente-servidor y más. Un conjunto de
herramientas para desarrolladores que permiten desarrollar, compilar, probar y
actualizar el código fuente de la aplicación.
Angular proporciona una guía clara sobre cómo se debe estructurar la
aplicación y ofrece un flujo de datos bidireccional al tiempo que proporciona un
modelo de documento real.
Algunas de sus principales características son las siguientes:
● Document Object Model (DOM): Es una especificación que define una
interfaz programable para las tecnologías XML [16] y HTML en una
estructura de tipo árbol, que permite a los programas y scripts, acceder y
manipular dinámicamente el contenido [17].
● TypeScript : define un conjunto de tipos de JavaScript, lo que ayuda a los
usuarios a escribir código JavaScript que sea más fácil de entender. Si
bien hay algunos intentos incipientes para introducir intérpretes propios
de Typescript, prácticamente hoy en día todo el código TypeScript se
traduce a JavaScript [18].
● Data Binding: Esta funcionalidad que provee Angular, permite establecer
valores para propiedades y atributos de elementos HTML y pasar valores
a la lógica de presentación de su aplicación.
● Testing: Angular usa el Framework de prueba denominado Jasmine [19],
el cual proporciona múltiples funcionalidades para escribir diferentes tipos
de casos de prueba.
● Componentes: piezas o fragmentos de código que definen una clase que
contiene la lógica y los datos de la aplicación. También puede definir
parte de la interfaz de usuario.
● Servicios: Los servicios sirven para compartir información entre
componentes o incluso hacer peticiones HTTP a APIs para obtener
información externa. Los servicios funcionan solo en ámbito de lógica o
datos, no están asociados a la vista.
● Inyección de dependencias: Esta característica le permite mantener sus
clases de componentes nítidas y eficientes. No obtiene datos de un
servidor, no valida la entrada del usuario ni se registra directamente en la
consola. En cambio, delega tales tareas a los servicios.
20
● Directivas Angular: Las directivas amplían la funcionalidad del HTML
proporcionándole una nueva sintaxis. Funcionan como marcadores en el
elemento DOM, indicando a Angular que adjunte un determinado
comportamiento al elemento, o incluso que lo cambie por completo.
Funcionamiento de Angular
En esta sección se presenta un panorama general de cómo es la estructura
de Angular, donde se pueden encontrar los Módulos, Componentes, Routing,
Servicios explicando cómo se comunican entre ellos y su estructura general, como
se puede observar en la figura 2.4.
Figura 2.4: Funcionamiento general de Angular
Módulos
Las aplicaciones de Angular son modulares y Angular tiene su propio sistema
de modularidad llamado NgModule. Para usar cualquier componente en una
aplicación, debe declararlo en un módulo relacionado. Cada aplicación Angular tiene
al menos una clase con un decorador @NgModule, que funciona como módulo raíz,
denominado convencionalmente como AppModule.
Las propiedades más importantes de una clase declarada como @NgModule son:
- Declaraciones: contiene una lista de los componentes que se definen para este
módulo.
21
- Exportaciones: aquí se nombran los componentes o directivas que se deseen
exportar para que lo puedan utilizar otros módulos.
- Importaciones: si desea utilizar módulos externos (bibliotecas) como
FormsModule, RouterModule, etc., debe agregar el nombre de ese módulo en
este apartado. El módulo externo puede ser un módulo angular incorporado o un
módulo definido por el usuario.
- Proveedores: cualquier servicio que cree en este módulo, debe proporcionarlo
aquí. El inyector se enterará del servicio desde aquí.
Lazy Loading
Por defecto, las aplicaciones de Angular cargan todos los componentes que
están importados en el módulo principal app.module.ts y dependiendo del tamaño y
cantidad de módulos que contenga puede ser que se demore más o menos en
cargar la aplicación. Esto puede resultar en tiempos de carga extensos que afecten
la usabilidad de la aplicación.
Para resolver este problema, de precarga de módulos que no son
indispensables en el inicio de la aplicación, se puede aplicar Lazy Loading.
La carga diferida (Lazy Loading), es un patrón de diseño comúnmente usado
en la programación informática que consiste en retrasar la carga o inicialización de
un objeto hasta el mismo momento de su utilización. Esto contribuye a la eficiencia
de los programas, evitando la precarga de objetos que podrían no llegar a utilizarse.
El opuesto de la carga diferida es la carga previa, precarga o eager loading.
Componentes
Los componentes en Angular se centran en la presentación de los datos,
define la estructura, lógica, visual y comportamiento de cada página de una web.
Un componente en Angular es un elemento que compone a un todo, donde
generalmente se concentra la estructura y contenido del mismo, las características
de los estilos, las propiedades, atributos y métodos de la lógica, eventos de entrada
y salida, entre otras características de este. Se podría resumir una posible
estructura de un componente como se describe en el diagrama de la Figura 2.5:
22
Figura 2.5: Componente de Angular
Se puede observar un componente como una unidad, que puede contener
principalmente 3 partes una vista (.HTML), lógica (.TS) y estilos (.CSS):
● Vista (.HTML): Aquí se encuentra el contenido y la estructura de lo que se
visualizará en la interfaz del usuario
● Lógica (.TS): en este archivo se van a incluir las propiedades y métodos que
se utilizaran y ejecutarán en la vista. Aquí también se incluye la metadata,
para que Angular identifique a la clase como un componente. Esta se define
por medio de un decorador.
● Estilos (.CSS): archivo donde se definirán las características relacionadas al
diseño gráfico y a la estética del componente.
A su vez cada componente representa una sección de la interfaz. Es decir cada
vista en una aplicación Angular puede estar formada por múltiples componentes. A
continuación, en la Figura 2.6, se muestra un ejemplo:
Figura 2.6: Composición de componentes en Angular
23
Como se ve en la figura 2.6, cada componente a su vez puede estar
constituido de más componentes, como en el caso del “Page Component”. A medida
que el usuario hace uso de la aplicación, Angular añade, actualiza y elimina
componentes de la vista.
Como se mencionó anteriormente para declarar a una clase como
componente debe utilizarse el decorador @Component en el archivo de lógica. En
este decorador a su vez se pueden definir las siguientes propiedades:
● Selector: nombre que se le asigna al componente, usado en la página HTML
como una etiqueta, para cargar el mismo en la pantalla.
● TemplateUrl: se utiliza para asignar y vincular un archivo .HTML externo al
componente.
● Template: de no asignarse un archivo .html externo al componente puede
describirse el código html directamente en esta propiedad.
● StyleUrls: se utiliza para asignar y vincular archivos .css externos al
componente que quieran ser utilizados en el mismo.
● Syles: puede describirse el código CSS directamente en esta propiedad, sin
necesidad de utilizar un .css externo.
Template o Vista (HTML)
Como se vió, por cada componente se asigna un Template, que puede ser
escrito en un archivo .html aparte o definirse en la propiedad “Template”. En este
archivo se describe cómo se debe representar al componente en la interfaz.
Además del contenido habitual que se puede describir en HTML (etiquetas, títulos,
párrafos, imágenes, vínculos, entre otros), Angular permite desarrollar directivas y
contenido adicional, ampliando la sintaxis HTML del Template. Por ejemplo,Angular
permite la utilización de lo que se denomina “Data binding” posibilitando el uso de
atributos definidos en el archivo correspondiente a la lógica del componente a partir
de los caracteres especiales “{{ }}”. Adicionalmente Angular provee un mecanismo
de “pipes” para la transformación de valores y la correcta visualización de los datos,
así como el uso de directivas que agregan funcionalidad al código HTML.
Services
En Angular un servicio es una categoría amplia que abarca cualquier valor,
función o característica que necesita una aplicación. Angular distingue los
componentes de los servicios para aumentar la modularidad y la reutilización.
Idealmente, un componente debe usar servicios para las tareas que no involucren la
vista o la lógica de la aplicación. Al definir tales tareas de procesamiento en una
clase de servicio inyectable, se permite que esas tareas estén disponibles para
cualquier componente.
24
Los servicios se utilizan principalmente en el acceso y comunicación con la
base de datos. También puede ser usada como clase de intercambio de datos entre
los componentes o para escribir lógica comercial.
2.2.1.2 - ReactJS
ReactJS [20] es una biblioteca de JavaScript, creada por la empresa
Facebook, declarativa, eficiente y flexible para construir interfaces de usuario. Fue
creada para manejar componentes con estados para agilizar el desarrollo partiendo
del concepto de reutilización de componentes. Permite componer Interfaces de
Usuario (IU) complejas, a partir de pequeñas y aisladas piezas de código. Los
componentes son elementos visuales que tienen su propio estado, que pueden
recibir propiedades externas de otros componentes o pueden implementar lógica
aplicada a la visualización de los datos en pantalla. ReactJS es declarativo, lo que
hace que el código sea más predecible y por lo tanto, fácil de depurar.
Al utilizar ReactJS como tecnología base para desarrollar la interfaz gráfica
de usuario, debido a la falta de persistencia y la imposibilidad que posee ReactJS de
resguardar los estados de la nueva herramienta, surge la necesidad de utilizar
adicional y complementariamente, una herramienta que solvente las falencias que
presenta ReactJS. Esta necesidad fue cubierta por una librería llamada Redux.
Redux se define como una herramienta (librería) para la gestión de estados, es decir
el conjunto de todos los valores almacenados por una aplicación mediante
propiedades o variables.
ReactJS maneja una arquitectura llamada Flux [21], que es similar a MVC ya
que también contiene su modelo, vista y controladores, pero alternativamente está
pensada en un flujo de datos unidireccional.
2.2.1.3 - Vue
Vue [22] es un framework de JavaScript para construir interfaces de usuario.
Se basa en HTML, CSS y JavaScript estándar, y proporciona un modelo de
programación declarativo y basado en componentes que lo ayuda a desarrollar de
manera eficiente interfaces de usuario, ya sean simples o complejas.
Sus dos características principales son las siguientes:
● Renderizado declarativo: Vue extiende HTML estándar con una
sintaxis de plantilla que permite describir declarativamente la salida
HTML basada en el estado de JavaScript.
● Reactividad: Vue realiza un seguimiento automático de los cambios de
estado de JavaScript y actualiza de manera eficiente el DOM cuando
se producen cambios.
25
Vue cubre la mayoría de las características comunes necesarias en el
desarrollo de frontend. Pero la web es extremadamente diversa: las cosas que se
construyen en la web pueden variar drásticamente en forma y escala. Con eso en
mente, Vue está diseñado para ser flexible y adaptable de manera incremental.
Su librería central está enfocada solo en la capa de visualización, y es fácil de
utilizar e integrar con otras librerías o proyectos existentes. Por otro lado, Vue
también es perfectamente capaz de impulsar sofisticadas Single-Page Applications
cuando se utiliza en combinación con herramientas modernas y librerías de apoyo.
2.2.2 - Tecnologías web Back-end
En esta Sección se presentan algunas tecnologías relacionadas con la parte
Back-end del sistema.
2.2.2.1 - Node JS
Node.js [23] es un entorno de ejecución para JavaScript construido con V8, el
motor de JavaScript de Chrome. Ideado como un entorno de ejecución de
JavaScript orientado a eventos asíncronos, Node.js está diseñado para crear
aplicaciones network escalables. Es capaz de atender muchas conexiones
simultáneamente. Por cada conexión, se activa la devolución de llamada o callback,
pero si no hay trabajo que hacer, Node.js se dormirá.
Esto contrasta con el modelo de concurrencia más común de hoy en día, en
el que se emplean hilos del Sistema Operativo. Las redes basadas en hilos son
relativamente ineficientes y muy difíciles de usar. Además, los usuarios de Node.js
están libres de preocuparse por el bloqueo del proceso, ya que no existe. Casi
ninguna función en Node.js realiza I/O directamente, por lo que el proceso nunca se
bloquea. Por ello, es muy propicio desarrollar sistemas escalables en Node.js.
Node.js es similar en diseño, y está influenciado por algunos entornos
escritos para otros lenguajes, como como Event Machine [24] de Ruby [25] y
Twisted [26] de Python [27]. Pero Node.js lleva el modelo de eventos un poco más
allá. Incluye un bucle de eventos como runtime de ejecución en lugar de una
biblioteca. En otros sistemas siempre existe una llamada de bloqueo para iniciar el
bucle de eventos.
En Node.js, no existe como tal la llamada de inicio del evento de bucle o
start-the-event-loop. Node.js simplemente entra en el bucle de eventos después de
ejecutar el script de entrada y sale cuando no hay más devoluciones o callbacks de
llamada para realizar. Se comporta de una forma similar a JavaScript en el
navegador, el bucle de eventos está oculto al usuario.
26
HTTP es un elemento destacado en Node.js, diseñado para tener en cuenta
la transmisión de operaciones con streaming y baja latencia. Esto hace que Node.js
sea muy adecuado para la base de una librería o un framework web.
Que Node.js esté diseñado para trabajar sin hilos no significa que no pueda
aprovechar múltiples núcleos en su entorno. Se pueden generar subprocesos o
procesos hijos utilizando la API child_process.fork(), la cual está diseñada para que
la comunicación entre ellos sea fácil mediante su proceso principal. Desarrollado
sobre esa misma interfaz está el módulo cluster, que le permite compartir sockets
entre procesos para permitir el balanceo de carga entre sus múltiples núcleos.
2.2.2.2 - Spring
Spring [28] fue lanzado por primera vez en el mes de junio del año 2003 bajo
la licencia Apache 2.0, como una plataforma Java [29] de código abierto. Se
convirtio desde entonces en el framework más popular para Java empresarial, para
crear código de alto rendimiento, liviano y reutilizable. Su finalidad es estandarizar,
agilizar, manejar y resolver los problemas que puedan surgir en el trayecto de la
programación.
Spring, ofrece como elemento clave el soporte de infraestructura a nivel de
aplicación, brindando un completo modelo tanto para la configuración como para la
programación de aplicaciones empresariales desarrolladas bajo Java, sin
discriminación en cuanto al despliegue de la plataforma.
Todo esto trae consigo una gran ventaja, ya que permite que los equipos de
desarrollo puedan enfocarse directamente en la lógica empresarial que requiere la
aplicación, y hacer el proceso más corto, rápido y eficaz, ahorrar líneas de código y
evitar tareas repetitivas.
Spring se puede considerar como el padre de los frameworks Java, ya que da
soporte a varios frameworks como: Hibernate [30], Struts, Tapestry, EJB, JSF, entre
otros.
Entre las características de Spring, se encuentran las siguientes:
● Tecnologías: como la inyección de dependencias, eventos, recursos,
i18n, validación, enlace de datos, conversión de tipo, SpEL.
● Acceso a datos: soporte DAO, JDBC, ORM, Marshalling XML.
● Gestión de transacciones.
● Integración: comunicación remota, JMS, JCA, JMX, correoelectrónico,
tareas, programación, caché.
● Pruebas (Testing): simulacro de objetos, el framework TestContext,
Spring MVC prueba, WebTestClient.
27
● Programación orientada a aspectos (AOP): permite la implementación
de rutinas transversales.
● Utiliza MVC (Modelo Vista Controlador).
● Frameworks web: Spring WebFlux y Spring MVC.
● Procesamiento de datos por lotes.
● Administración Remota: a través de este módulo se puede configurar
la visibilidad y gestión de los objetos Java para la configuración local o
remota vía JMX.
● Es un framework liviano debido a su implementación POJO (Plain Old
Java Object), Spring Framework no obliga al programador a heredar
ninguna clase ni a implementar ninguna interfaz.
2.2.2.3 - Django
Django [31] es un framework de desarrollo web de código abierto, escrito en
Python, que respeta el patrón de diseño conocido como modelo–vista–controlador
(MVC).
La meta fundamental de Django es facilitar la creación de sitios web
complejos. Django pone énfasis en el reuso, la conectividad y extensibilidad de
componentes, el desarrollo rápido y el principio «DRY» (del inglés Don't Repeat
Yourself,«No te repitas»). El lenguaje Python es usado en todos los componentes
del framework, incluso en configuraciones, archivos, y en sus modelos de datos.
Otras características de Django son:
● Posee un mapeador objeto-relacional.
● Aplicaciones "enchufables" que pueden instalarse en cualquier página
gestionada con Django.
● Una API de base de datos robusta.
● Un sistema incorporado de "vistas genéricas" que ahorra tener que
escribir la lógica de ciertas tareas comunes.
● Un sistema extensible de plantillas basado en etiquetas, con herencia
de plantillas.
● Un despachador de URLs basado en expresiones regulares.
● Un sistema "middleware" para desarrollar características adicionales;
por ejemplo, la distribución principal de Django incluye componentes
middleware que proporcionan cacheo, compresión de la salida,
normalización de URLs, protección CSRF y soporte de sesiones.
● Soporte de internacionalización, incluyendo traducciones incorporadas
de la interfaz de administración.
● Documentación incorporada accesible a través de la aplicación
administrativa (incluyendo documentación generada automáticamente
de los modelos y las bibliotecas de plantillas añadidas por las
aplicaciones).
28
2.2.2.4 - Express.js
Express.js [32] es un framework de backend Node.js minimalista y rápido,
que proporciona características y herramientas robustas para desarrollar
aplicaciones de backend escalables. Provee un conjunto de herramientas para
aplicaciones web, peticiones y respuestas HTTP, enrutamiento y middlewares para
construir y desplegar aplicaciones a gran escala.
A pesar de que Express es en sí mismo bastante minimalista, los
desarrolladores han creado paquetes de middlewares compatibles para abordar casi
cualquier problema de desarrollo web. Existen librerías para trabajar con cookies,
sesiones, inicios de sesión de usuario, parámetros URL, datos POST, cabeceras de
seguridad y muchos más.
Asimismo, al igual que Django, obliga a los desarrolladores a seguir el
principio de “No te repitas” (DRY). Este principio pretende reducir la repetición de
patrones de software, sustituyéndolos por abstracciones, o utilizando
normalizaciones de datos para evitar la redundancia.
Por último, podemos agregar que Express proporciona mecanismos para:
● Escritura de manejadores de peticiones con diferentes verbos HTTP
en diferentes caminos URL (rutas).
● Integración con motores de renderización de "vistas" para generar
respuestas mediante la introducción de datos en plantillas.
● Establecer ajustes de aplicaciones web como qué puerto usar para la
conexión, y la localización de las plantillas que se utilizan para
renderizar la respuesta.
2.2.3 - Bases de datos
En esta sección se presentan algunas tecnologías de Bases de Datos
relacionadas con este trabajo.
2.2.3.1 - MongoDB
MongoDB [33] es una base de datos NoSQL orientada a documentos que
ofrece una gran escalabilidad y flexibilidad, y un modelo de consultas e indexación
avanzado. A diferencia de una base de datos relacional SQL tradicional, MongoDB
no se basa en tablas y columnas. Los datos se almacenan como colecciones y
documentos. Los documentos son pares value/key que sirven como unidad básica
de datos, los mismos son similares a JSON [34] y son flexibles, no tienen un
esquema predefinido y los campos pueden añadirse a voluntad. Las colecciones
contienen conjuntos de documentos y funciones.
29
Otras características de MongoDB son:
● Consultas ad hoc: soporta la búsqueda por campos, consultas de rangos y
expresiones regulares. Las consultas pueden devolver un campo específico
del documento pero también puede ser una función definida por el usuario.
● Indexación: cualquier campo en un documento de puede ser indexado,
también es posible hacer índices secundarios.
● Replicación: soporta el tipo de replicación primario-secundario. Cada grupo
de primario y sus secundarios se denomina réplica. El primario ejecuta
comandos de lectura y escritura. Los secundarios replican los datos del
primario y sólo se usan para lectura o para copia de seguridad. Los
secundarios pueden elegir un nuevo primario en caso de que el primario
actual deje de responder.
● Balanceo de carga: MongoDB cuenta con el concepto de sharding que
permite el escalado horizontal al distribuir los datos entre múltiples instancias
de MongoDB. La base de datos puede ejecutarse en varios servidores, y esto
permite equilibrar la carga o duplicar los datos para mantener el sistema en
funcionamiento en caso de fallo del hardware.
● Ejecución de JavaScript del lado del servidor: MongoDB tiene la capacidad
de realizar consultas utilizando JavaScript, haciendo que estas sean enviadas
directamente a la base de datos para ser ejecutadas.
2.2.3.2 - MySQL
MySQL [35] es un sistema de gestión de bases de datos relacional
desarrollado bajo licencia dual: Licencia pública general/Licencia comercial por
Oracle Corporation y está considerada como la base de datos de código abierto más
popular del mundo.
Presenta algunas características que lo hacen muy interesante para los
desarrolladores. La más evidente es que trabaja con bases de datos relacionales, es
decir, utiliza tablas múltiples que se interconectan entre sí para almacenar la
información y organizarla correctamente.
Al ser basada en código abierto es fácilmente accesible y la inmensa mayoría
de programadores que trabajan en desarrollo web han utilizado MySQL en alguno
de sus proyectos. Al estar ampliamente extendido cuenta además con una enorme
comunidad que ofrece soporte a otros usuarios. Pero estas no son las únicas
características como veremos a continuación cuenta con:
● Arquitectura Cliente y Servidor: MySQL basa su funcionamiento en un modelo
cliente y servidor. Es decir, clientes y servidores se comunican entre sí de
manera diferenciada para un mejor rendimiento. Cada cliente puede hacer
30
consultas a través del sistema de registro para obtener datos, modificarlos,
guardar estos cambios o establecer nuevas tablas de registros, por ejemplo.
● Compatibilidad con SQL: SQL es un lenguaje generalizado dentro de la
industria. Al ser un estándar MySQL ofrece plena compatibilidad por lo que si
has trabajado en otro motor de bases de datos no tendrás problemas en
migrar a MySQL.
● Vistas: Desde la versión 5.0 de MySQL se ofrece compatibilidad para poder
configurar vistas personalizadas, del mismo modo que podemos hacerlo en
otras bases de datos SQL. En bases de datos de gran tamaño las vistas se
hacen un recurso imprescindible.
● Procedimientos almacenados MySQL posee la característica de no procesar
las tablas directamente sino que a través de procedimientos almacenados es
posible incrementar la eficacia de nuestra implementación.
● Desencadenantes: MySQL permite además poder automatizar ciertas tareas
dentro de nuestra base de datos. En el momento que se produce un evento
otro es lanzado para actualizar registros o optimizarsu funcionalidad.
● Transacciones. Una transacción representa la actuación de diversas
operaciones en la base de datos como un dispositivo. El sistema de base de
registros avala que todos los procedimientos se establezcan correctamente o
ninguna de ellas. En caso por ejemplo de una falla de energía, cuando el
monitor falla u ocurre algún otro inconveniente, el sistema opta por preservar
la integridad de la base de datos resguardando la información.
2.2.4 - Otras tecnologías relacionadas
En las siguientes subsecciones se enumeran algunas tecnologías
lateralmente relacionadas con el desarrollo del proyecto.
2.2.4.1 - Typescript
TypeScript [18] es un superset de Javascript pensado para el desarrollo de
aplicaciones robustas, ya que permite detectar de manera temprana muchos de los
problemas más básicos que pueden producirse durante el desarrollo de un sitio.
Su mayor utilidad es la incorporación de los tipos de datos estáticos, que se
pueden utilizar de manera opcional, aunque siempre recomendada. Javascript no
permite tipar las variables de manera estática (es un lenguaje con tipos dinámicos).
Por contra, con TypeScript sí es posible aplicar tipado a las variables, por lo que
permite convertir al lenguaje Javascript en un lenguaje más fuertemente tipado.
Además, TypeScript aporta muchas otras utilidades, como son los genéricos
(generics) o decoradores (decorators). Muchas de estas utilidades están presentes
en lenguajes empresariales como Java o C#. TypeScript por tanto permite convertir
Javascript en un lenguaje más sólido, capaz de aportar características que permiten
31
a los desarrolladores tener una experiencia más avanzada en su trabajo en el día a
día.
2.2.4.2 - Mongoose
Mongoose [36] es una librería para Node.js que permite escribir consultas
para una base de datos de MongoDB, con características como validaciones,
construcción de queries, middlewares, conversión de tipos y algunas otras, que
enriquecen la funcionalidad de la base de datos.
La parte central del uso de Mongoose está en la definición de un esquema
donde se indica la configuración de los documentos para una colección de
MongoDB. Y aunque MongoDB es una base de datos NoSQL, donde los
documentos se almacenan sin un esquema predefinido, el uso de un esquema
permite normalizar tu información, sin sacrificar la flexibilidad.
En el esquema mencionado se especifican los campos que pertenecen a un
documento, validaciones y configuraciones especiales para su consulta. El esquema
es, además, el lugar que permite enriquecer de funcionalidad los documentos de
mongoose, ya sea con la definición de campos virtuales, middlewares, métodos
especiales para los objetos, entre otros.
En palabras prácticas, Mongoose funciona como una capa adicional sobre
MongoDB a través de la cuál se implementan y automatizan muchas de las tareas
habituales de trabajar con una base de datos.
Mongoose además, abre las puertas a una comunidad de plugins que pueden
ser utilizados para automatizar tareas comunes, tales como el encriptado de
información, paginación, consultas adicionales, y más.
2.2.4.3 - JSON Web Token (JWT)
Un JSON Web Token [37] es un token de acceso estandarizado en el RFC
7519 que permite el intercambio seguro de datos entre dos partes. Contiene toda la
información importante sobre una entidad, lo que implica que no hace falta consultar
una base de datos ni que la sesión tenga que guardarse en el servidor (sesión sin
estado).
Por este motivo, los JWT son especialmente populares en los procesos de
autenticación. Con este estándar es posible cifrar mensajes cortos, dotarlos de
información sobre el remitente y demostrar si este cuenta con los derechos de
acceso requeridos. Los propios usuarios solo entran en contacto con el token de
manera indirecta: por ejemplo, al introducir el nombre de usuario y la contraseña en
32
una interfaz. La comunicación como tal entre las diferentes aplicaciones se lleva a
cabo en el lado del cliente y del servidor.
Un JWT firmado consta de tres partes, todas ellas codificadas en Base64 y
separadas por un punto:
HEADER.PAYLOAD.SIGNATURE
● El header consta generalmente de dos valores y proporciona información
importante sobre el token. Contiene el tipo de token y el algoritmo de la firma y/o
cifrado utilizados.
● El campo payload de JSON Web Token contiene la información real que se
transmitirá a la aplicación. Aquí se definen algunos estándares que determinan
qué datos se transmiten y cómo. La información se proporciona como pares
key/value (clave-valor); las claves se denominan claims en JWT.
● La firma de un JSON Web Token se crea utilizando la codificación Base64 del
header y del payload, así como el método de firma o cifrado especificado. La
estructura viene definida por JSON Web Signature (JWS), un estándar
establecido en el RFC 7515. Para que la firma sea eficaz, es necesario utilizar
una clave secreta que solo conozca la aplicación original. Por un lado, la firma
verifica que el mensaje no se ha modificado por el camino. Por otro, si el token
está firmado con una clave privada, también garantiza que el remitente del JWT
sea el correcto.
2.3 Herramientas y servicios
En todo proceso de implementación se utilizan diferentes herramientas y
servicios que facilitan el desarrollo de diferentes maneras. A continuación se
presentan algunas.
2.3.1 - Trello
Trello [38] es una herramienta visual que permite a los equipos gestionar
cualquier tipo de proyecto y flujo de trabajo, así como supervisar tareas. Es un
entorno de colaboración que se basa en el método Kanban que organiza proyectos
en tableros y listas.
Trello permite crear tableros, listas y tarjetas, permitiendo organizar el trabajo
en diferentes fases para cada una de las tareas e incluir toda la información
necesaria que se necesite acerca de cada una de ellas. Trello ofrece una gran
personalización de cada parte del tablero, lista o tarea como puede ser, agregar
33
título y descripción, crear checkbox, etiquetar las mismas y asignarlas a un
integrante del equipo, entre otras.
Las tareas pueden ser clasificadas en diferentes columnas ayudando a
clasificar y visualizar qué tareas hay que realizar, en cuales de ellas se está
trabajando actualmente y cuáles se consideran terminadas mostrando globalmente
el estado del proyecto.
2.3.2 - Git
Git [39] es un sistema de control de versiones distribuido gratuito y de código
abierto diseñado para manejar, desde proyectos pequeños hasta proyectos muy
grandes, con rapidez y eficiencia. Su propósito es llevar registro de todos los
cambios en los archivos de un proyecto así como identificar quien y cuando realiza
cada modificación, almacenar cada versión permite deshacer cualquier variación
que haya generado problemas. Git posibilita coordinar el trabajo que varias
personas realizan sobre archivos compartidos en un repositorio de código en
común.
La característica de Git que realmente lo diferencia de casi todos los demás
SCM (Supply Chain Management) es su modelo de ramificación. Git permite tener
varias ramas locales de trabajo que pueden ser completamente independientes
entre sí. A su vez Git propone un flujo de trabajo para realizar trabajo de forma
uniforme y productiva, GIT-flow utilizando la ramificación como base. Está pensado
para aquellos proyectos que tienen entregables y ciclos de desarrollo bien definidos.
 Está basado en dos grandes ramas (rama master y develop) y varias ramas de
apoyo, unas orientadas al desarrollo de nuevas funcionalidades (ramas feature),
otras al arreglo de errores (hotfix) y otras orientadas a la preparación de nuevas
versiones de producción (ramas release).
2.3.3 - GitHub
GitHub [40] es una plataforma y repositorio online gratuito de desarrollo
colaborativo que permite alojar proyectos y administrar código utilizando el sistema
de control de versiones Git.
Esta herramienta posibilita:
● El uso de GitHub como repositorio del proyecto, es decir la ubicación
donde se almacena toda la información, tal como imágenes, código,
carpetas, documentos, entreotros.
● GitHub facilitará el uso de Git, ocultando algunos detalles de
configuración.
● Desarrollo colaborativo y remoto comunicado a partir de la web.
34
● A su vez GitHub permite realizar ramificaciones de los repositorios si
se requiere trabajar de forma aislada una parte concreta del proyecto,
sin afectar la rama principal.
● Control de cambios y versión del código.
2.3.4 - GitLab
GitLab [41] es un servicio web de control de versiones y DevOps basado en
Git. Además de gestor de repositorios, GitLab ofrece también alojamiento para wikis
y un sistema de seguimiento de errores, todo ello publicado bajo una licencia de
código abierto, principalmente.
GitLab es una suite completa que posibilita gestionar, administrar, crear y
conectar los repositorios con diferentes aplicaciones y realizar todo tipo de
integraciones con ellas. Ofrece también un ambiente y una plataforma en la cual se
puede realizar las varias etapas de su SDLC/ADLC y DevOps.
Fue escrito por los programadores ucranianos Dmitriy Zaporozhets y Valery
Sizov en el lenguaje de programación Ruby con algunas partes reescritas
posteriormente en Go [42], inicialmente como una solución de gestión de código
fuente para colaborar con su equipo en el desarrollo de software. Luego evolucionó
a una solución integrada que cubre el ciclo de vida del desarrollo de software, y
luego a todo el ciclo de vida de DevOps.
GitLab ofrece funcionalidad para planear, construir, mantener seguro y
deployar software, como una plataforma DevOps completa. Es escalable y puede
ser hosteada localmente o en la nube. Incluye además funciones para realizar
Continuous Integration/Continuous Deployment, y ofrece hosting gratis para páginas
web estáticas.
2.3.5 - Postman
Postman [43] es una plataforma API utilizada como cliente HTTP para la
construcción, uso y testeo de APIs. La plataforma Postman incluye un conjunto
integral de herramientas que ayudan a acelerar el ciclo de vida de una API, desde el
diseño, las pruebas, la documentación y la simulación hasta el uso compartido y la
detección de sus API. A su vez cumple la función de repositorio de APIs,
permitiendo desde una plataforma almacenar, catalogar y compartir todas las APIs
de un proyecto con los miembros de un equipo.
Permite realizar fácilmente múltiples tipos de llamadas HTTP como GET,
POST, PUT, DELETE facilitando el testeo y desarrollo del Back End. Además la
funcionalidad de Documentación de API permite visualizar en una página web todas
35
las colecciones con sus respectivos recursos mostrando parámetros, métodos,
headers, etcétera para cada uno.
2.3.6 - MongoDB Atlas
MongoDB Atlas [44] es un servicio de Cloud Database (o Base de Datos en la
Nube), que permite crear y administrar bases de datos de Mongo a través de su
plataforma. También permite aprovechar las características más recientes de
MongoDB, como la distribución de transacciones de varios documentos, a la vez
que se encarga de tareas de administración y operaciones de base de datos con
automatización de primer nivel.
Los objetos del código de una aplicación son reflejados mediante un modelo
de datos de documentos similar a JSON, llamado BSON. Su flexibilidad permite
modelar una amplia variedad de casos de uso y al mismo tiempo evolucionar
fácilmente las estructuras de datos.
Atlas amplía la flexibilidad y la facilidad de uso de MongoDB para crear
búsquedas de texto completo, análisis en tiempo real y experiencias basadas en
eventos.
Otras características que posee MongoDB Atlas son:
● Altamente escalable
● Operaciones automatizadas de base de datos
● Seguridad integrada
● Clústeres globales
● Alta disponibilidad respaldada con ANS de tiempo de actividad
● Descubrimiento integral de datos
2.3.7 - MongoDB Compass
MongoDB Compass [45] es una herramienta interactiva para la consulta,
optimización y análisis de datos en MongoDB. Es de uso gratuito y fuente
disponible, y se puede ejecutar en MacOS, Windows y Linux.
Compass permite diseccionar su esquema de documentos para la
comprensión de datos en un nivel más profundo. Muestrea y analiza documentos
para proporcionar metadatos detallados de colecciones, incluidos los intervalos de
fechas y enteros, los valores más frecuentes y mucho más.
Esta herramienta permite, entre otras cosas:
● Barra de consultas integradas, posibilita encontrar datos en cuestión
de segundos.
36
● Filtrar los documentos de las colecciones utilizando operadores de
consultas intuitivos que corresponden a expresiones en otros idiomas.
● Muestrear, clasificar y modificar los resultados con gran granularidad.
● Optimizar consultas, añadir índices nuevos y eliminar los que poseen
un bajo rendimiento.
● Monitorizar las métricas del servidor y la base de datos en tiempo real.
● Analizar los problemas de rendimiento con el plan de explicación
visual.
● Importar y exportar fácilmente archivos JSON y CSV hacia y desde
sus colecciones.
2.3.8 - Heroku
Heroku [46] es una plataforma como servicio (PaaS) de computación en la
Nube que soporta distintos lenguajes de programación. Fue desarrollada desde
junio de 2007, con el objetivo de soportar solamente el lenguaje de programación
Ruby, pero posteriormente se ha extendido el soporte a Java, Node.js, Scala,
Python, PHP, Go y Clojure.
Algunas de las características de esta herramienta son:
● Heroku runtime: Las aplicaciones se ejecutan dentro de contenedores
inteligentes en un entorno totalmente administrado. Heroku maneja
todo lo crítico para la producción: configuración, orquestación,
balanceo de carga, conmutaciones por error, registro, seguridad y
más.
● Alta escalabilidad: Heroku escala en un instante, tanto vertical como
horizontalmente. Puede ejecutar elegantemente todo, desde pequeños
proyectos de pasatiempos hasta comercio electrónico de nivel
empresarial que maneja los aumentos repentinos del Black Friday.
● Rollback de código y data: el sistema de compilación de Heroku y el
servicio Postgres le permiten revertir su código o su base de datos a
un estado anterior en un instante.
● Integración con Github: Cada pull request genera una aplicación de
revisión desechable para testing, y cualquier repositorio se puede
configurar para que se implemente automáticamente con cada push de
GitHub a una rama de su elección.
● Complementos: Heroku permite ampliar, mejorar y administrar las
aplicaciones con servicios pre integrados como New Relic, MongoDB,
SendGrid, Searchify, Fastly, Papertrail, ClearDB MySQL, Treasure
Data y más.
● Continuous delivery: Heroku Flow usa Heroku Pipelines, Review Apps
y GitHub Integration para hacer que el building, la iteración, el staging
y el shipping de las aplicaciones sea fácil, visual y eficiente.
37
2.3.9 - Docker
Docker [47] es un proyecto de código abierto que automatiza el despliegue de
aplicaciones dentro de contenedores de software, proporcionando una capa
adicional de abstracción y automatización de virtualización de aplicaciones en
múltiples sistemas operativos. Docker utiliza características de aislamiento de
recursos del kernel Linux, tales como cgroups y espacios de nombres (namespaces)
para permitir que "contenedores" independientes se ejecuten dentro de una sola
instancia de Linux, evitando la sobrecarga de iniciar y mantener máquinas virtuales.
El soporte del kernel Linux para los espacios de nombres aísla la vista que
tiene una aplicación de su entorno operativo, [48] incluyendo árboles de proceso,
red, ID de usuario y sistemas de archivos montados, mientras que los cgroups del
kernel proporcionan aislamiento de recursos, incluyendo la CPU, la memoria, el
bloque de E/S y de la red. Desde la versión 0.9, Docker incluye la biblioteca
libcontainer como su propia manera de utilizar directamente las facilidades de
virtualización que ofrece el kernel Linux, además de utilizar las interfaces abstraídas
de virtualización mediante libvirt, LXC (Linux Containers) y systemd-nspawn. [49]
De acuerdo con la firma analista de la industria 451 Research, "Docker es
una herramienta que puede empaquetar una aplicacióny sus dependencias en un
contenedor virtual que se puede ejecutar en cualquier servidor Linux. Esto ayuda a
permitir la flexibilidad y portabilidad en donde la aplicación se puede ejecutar, ya sea
en las instalaciones físicas, la nube pública, nube privada, etc." [50]
Docker elimina las tareas de configuración repetitivas y se utiliza durante todo
el ciclo de vida de desarrollo para un desarrollo de aplicaciones rápido, fácil y
portátil, tanto de escritorio como en la nube. La plataforma integral de extremo a
extremo de Docker incluye interfaces de usuario, CLI, API y seguridad que están
diseñadas para trabajar juntas durante todo el ciclo de vida de entrega de
aplicaciones.
2.4 - Otros conceptos tecnológicos
Arquitectura REST, Protocolo HTTP y formato JSON
La transferencia de estado representacional (REST - Representational State
Transfer) fue ganando adeptos como una alternativa más simple al protocolo de
acceso a objetos simples (SOAP - Simple Object Access Protocol) y a los servicios
web basados en el lenguaje de descripción de servicios web (WSDL - Web Services
Description Language) [51]. La arquitectura REST define un conjunto de principios
38
por los cuales se diseñan servicios web haciendo foco en los recursos del sistema,
incluyendo: cómo acceder al estado de dichos recursos y cómo se transfieren por
HTTP hacia clientes escritos en diversos lenguajes. [52]
Un servicio web se define como una aplicación software identificada por un
URI cuyas interfaces se pueden definir, describir y descubrir mediante documentos
XML. Los servicios web permiten la interoperación de sistemas distribuidos
heterogéneos con independencia de las plataformas hardware y software
empleadas. Por lo tanto, puede pensarse en ellos como en una arquitectura,
conceptual y tecnológica, haciendo posible que distintos servicios se describan,
publiquen, descubran y utilicen a través de sistemas distribuidos, empleando la
infraestructura proporcionada por Internet [53]. REST emergió en el siglo XXI como
el modelo predominante para el diseño de servicios. Ha logrado un gran impacto en
la web desplazando a SOAP y a las interfaces basadas en WSDL por tener un estilo
más simple de usar. [52] Fielding y Taylor [51] definen a REST como “un estilo de
arquitectura de software para sistemas hipermedia distribuidos tales como la World
Wide Web”. Para otros autores, es un conjunto de principios para el diseño de
redes, que es utilizado comúnmente para definir una interfaz de transmisión sobre
HTTP de manera análoga a como lo hace SOAP [54]. Una implementación de un
servicio REST cuenta con los siguientes principios [55] [56]:
● Verbos HTTP: los más comunes son GET, POST, PUT y DELETE. [57]
● Sin estado: ni el cliente ni el servidor necesitan recordar ningún estado de las
comunicaciones entre mensajes.
● Identificadores de recursos uniforme (URI): cada recurso es accedido
únicamente a través de su URI.
● Hipermedios: permite transferir los formatos HTML, JSON y XML.
Esta capa recibe la información en formato JSON (del inglés JavaScript
Object Notation). JSON es un formato de datos basado en texto que sigue la
sintaxis de objeto de JavaScript. Aunque es muy parecido a la sintaxis de objeto
literal de JavaScript, puede ser utilizado independientemente de JavaScript, y
muchos ambientes de programación poseen la capacidad de leer analizar, parsear y
generar JSON.
Los JSON son cadenas útiles y ligeras de intercambio cuando se quiere
transmitir datos a través de una red. Debe ser convertido a un objeto nativo de
JavaScript cuando se requiera acceder a sus datos. Esto no es un problema, dado
que JavaScript posee un objeto global JSON que tiene los métodos disponibles para
convertir entre ellos. También es un formato de texto que es completamente
independiente del lenguaje pero utiliza convenciones que son ampliamente
conocidas por los programadores.
JSON está constituido por dos estructuras:
39
● Una colección de pares de nombre/valor. En varios lenguajes esto es
conocido como un objeto, registro, estructura, diccionario, tabla hash, lista
de claves o un arreglo asociativo.
● Una lista ordenada de valores. En la mayoría de los lenguajes, esto se
implementa como arreglos, vectores, listas o secuencias.
Estas son estructuras universales, virtualmente todos los lenguajes de
programación las soportan de una forma u otra. Es razonable que un formato de
intercambio de datos que es independiente del lenguaje de programación se base
en estas estructuras.
En JSON, se presentan de estas formas:
Un objeto es un conjunto desordenado de pares nombre/valor. Un objeto
comienza con { llave de apertura y termina con } llave de cierre. Cada nombre es
seguido por : dos puntos y los pares nombre/valor están separados por , coma.
Un arreglo es una colección de valores. Un arreglo comienza con [ corchete
izquierdo y termina con ] corchete derecho. Los valores se separan por , coma.
Un valor puede ser una cadena de caracteres con comillas dobles, o un
número, o true o false o null, o un objeto o un arreglo. Estas estructuras pueden
anidarse.
Una cadena de caracteres es una colección de cero o más caracteres
Unicode, encerrados entre comillas dobles, usando barras divisorias invertidas como
escape. Un caracter está representado por una cadena de caracteres de un único
caracter.
40
3 - Estado del arte
En este capítulo se presentan en la Sección 3.1, las soluciones encontradas
que cumplen parcialmente con funcionalidad semejante al de la herramienta
planteada, y una breve descripción de ellas. En la Sección 3.2 se presenta una
comparación entre las mismas.
Al tratarse de un sistema desarrollado a medida para la autoevaluación de
alumnos mediante la simulación de reflejos fotopupilares en perros, resulta
dificultoso encontrar soluciones que abarquen todos los requerimientos
especificados para la aplicación. Igualmente, se encontraron herramientas que
cumplan con parte de la funcionalidad requerida.
3.1 - Herramientas existentes
A continuación se presentará para cada herramienta relevada, una breve
descripción y el enlace donde se encuentran disponibles, en los casos donde
corresponda.
3.1.1 - Herramienta del Royal Veterinary College 3
Esta herramienta es la que utilizaba la Cátedra anteriormente. Ofrecía un
simulacro del reflejo fotopupilar, en la que los estudiantes debían identificar las
respuestas esperadas en un animal sin alteraciones, así como definir qué estructura
se encontraba dañada ante respuestas alteradas. Esto les permitía realizar una
autoevaluación sobre la temática de fisiología ocular. Esta herramienta estaba
desarrollada con la tecnología Flash, la cual dejó de funcionar, y por lo tanto la
herramienta dejó de estar disponible para su uso durante mucho tiempo.
Actualmente la Universidad de Londres ha actualizado las tecnologías de la página,
por lo que se encuentra disponible. En las figuras 3.1 y 3.2 se presentan
impresiones de pantalla donde se observan algunas funcionalidades.
3 Ocular Reflexes (rvc.ac.uk)
41
https://www.rvc.ac.uk/Review/ocular_reflexes/
Figura 3.1: RVC - Introducción
Figura 3.2: RVC - Diagnóstico
42
3.1.2 - Otros programas de aprendizaje digital que
ofrece la Universidad de Londres4
La Universidad de Londres, además de contar con la herramienta descrita en
el Capítulo 3.1.1, brinda una variedad de programas de aprendizaje digital, entre los
cuales se pueden encontrar estos tópicos, tal como se observa en las capturas de
pantalla de las Figuras 3.3 y 3.4:
● Anatomía de serpientes
● Anatomía de lagartos
● Comportamiento de gatos
● Organizador metabólico
● Homeostasis de la glucosa
● Anatomía e imágenes de la extremidad distal equina
● Radiografías caninas
● Casos dermatológicos
Figura 3.3: RVC: Digital Learning Showcase - Captura número 1
4 Digital Learning Showcase - RVC
43
https://www.rvc.ac.uk/about/the-rvc/our-departments/academic-support-and-development/emedia/showcase
Figura 3.4: RVC: Digital Learning Showcase - Captura número 2
3.1.3 - MSD MANUAL - Veterinary manual 5
Enesta página web se pueden encontrar una serie de quizzes de medicina
veterinaria de diferentes tópicos como son anomalías oculares, sistema inmune,
desórdenes auditivos, entre otros. Sólo dispone de quizzes a modo de preguntas y
respuestas, las mismas carecen de imágenes. Tal como se observa en las capturas
de pantalla de las figuras 3.5, 3.6 y 3.7. . Todos los cuestionarios están en inglés y
con terminología veterinaria en inglés. Registra la respuesta de manera anónima
para realizar estadísticas de las respuestas. A su vez dispone de una breve
explicación para cada pregunta así como links de referencia a posts de la misma
página que poseen más información sobre el tema.
5Quizzes - MSD Manual
44
https://www.msdvetmanual.com/pages-with-widgets/quizzes?mode=list
Figura 3.5: MSD Manual - Quizzes
Figura 3.6: MSD Manual - Heat Disease and Heart Failure quiz - Pregunta y posibles
respuestas
45
Figura 3.7: MSD Manual - Heat Disease and Heart Failure quiz - Respuesta y
explicación
3.1.4 - Studystack 6
En esta herramienta se pueden encontrar diferentes cuestionarios,
flashcards, preguntas múltiple choice, juegos de palabras con preguntas y
respuestas, entre otras cosas. En este caso se halló un StudyStack enfocado a la
temática de oftalmología veterinaria. La herramienta y este test en específico se
encuentran en inglés, pero la página StudyStack permite crear cuestionarios
personalizados iniciando sesión en una cuenta del sistema. Para ello es necesario
ingresar un dataset de preguntas y respuestas, a partir del cual la herramienta
personaliza los juegos y quizzes. Las figuras 3.8, 3.9, 3.10, 3.11 y 3.12 muestran
algunas de las funcionalidades mencionadas.
Figura 3.8: StudyStack - Listado de cuestionarios y juegos
6Free Veterinary Flashcards about Ophthalmology! (studystack.com)
46
https://www.studystack.com/flashcard-700003
Figura 3.9: StudyStack - Flashcards
Figura 3.10: StudyStack - Palabras cruzadas
Figura 3.11: StudyStack - Scramble
47
Figura 3.12: StudyStack - Bug Match
3.1.5 - Simulador para oftalmología en humanos -
Medical X 7
Este simulador da la posibilidad al usuario de examinar el reflejo pupilar del
paciente, el cual es representado por un maniquí, como se observa en la figura 3.13.
Se pueden simular varias patologías, por ejemplo, el RAPD (defecto pupilar aferente
relativo) izquierdo o derecho. El simulador permite con un interruptor activar o
desactivar el reflejo de la pupila izquierda y/o derecha.
A su vez permite los siguientes ajustes de la pupila:
● Ambas pupilas se contraen
● La pupila derecha se contrae, la izquierda no reacciona
● La pupila derecha no reacciona, la izquierda se contrae
● Ambas pupilas no reaccionan.
7MedicalExpo - Simulador para oftalmología
48
https://www.medicalexpo.es/prod/medical-x/product-112986-991186.html
Figura 3.13: Simulador reflejo pupilar humano
3.1.6 - Body Interact - Mesa Interactiva de casos
clínicos 8
Body Interact es un simulador muy completo donde se puede interactuar con
pacientes (humanos) virtuales. Permite estudiar una amplia biblioteca de casos
clínicos y realizar una serie de análisis médicos al paciente con diferentes
instrumentos. A su vez brinda la posibilidad de realizar monitoreos, tests,
intervenciones, recetar medicaciones, dialogar con el paciente, etcétera. A través de
estos casos clínicos con pacientes virtuales, los actuales y futuros profesionales de
la salud pueden entrenar el pensamiento crítico y la toma de decisiones en un
entorno seguro e interactivo. La figura 3.14 muestra una captura de la aplicación en
un caso clínico de un paciente específico.
8Body Interact - Medical Simulator
49
https://medical-simulator.com/simulacion-clinica-virtual/2457-body-interact.html#Menu-Horiz
Figura 3.14: Body Interact - Caso clínico
3.1.7 - CAE Maestro Evolve - Medical Simulator 9
CAE (Canadian Aviation Electronics) Maestro Evolve es una plataforma
interactiva de aprendizaje virtual para la formación de profesionales médicos que
ofrece diferentes Experiencias Clínicas Simuladas (SCE), equipamiento médico
virtual que muestra signos y señales médicas y herramientas de enseñanza y
evaluación. El simulador permite estudiar pacientes, desde sanos a muy enfermos, y
observar cómo su fisiología responde automáticamente a las intervenciones (ver
figuras 3.15, 3.16 y 3.17).
9 CAE Maestro Evolve - Medical Simulator
50
https://medical-simulator.com/plataformas-av-y-e-learning/4711-cae-maestro-evolve.html#Menu-Horiz
Figura 3.15: CAE Maestro Evolve - Captura análisis pupilar
Figura 3.16: CAE Maestro Evolve - Captura análisis abdominal
51
Figura 3.17: CAE Maestro Evolve - Captura Instrumento Desfibrilador Virtual
3.1.9 - Virtual Animal Anatomy - Colorado State
University 10 11
Virtual Animal Anatomy es un programa que abarca herramientas de estudio
anatómico de caninos, equinos, felinos y bovinos. Incluye fotografías 2D
interactivas con cuestionarios integrados en inglés (ver figuras 3.18 y 3.19).. Como
desventaja podemos mencionar que es una aplicación paga, con un costo de
suscripción de 75 dólares al año. Esta herramienta permite reducir el uso
innecesario de animales para la enseñanza de la anatomía.
11 Virtual Animal Anatomy - Youtube
10 Virtual Animal Anatomy
52
https://www.youtube.com/watch?v=HuyPjo2eyAY
https://virtualanimalanatomy.colostate.edu/12-month-subscription-to-virtual-animal-anatomy-5-license-bundles
Figura 3.18: Virtual Animal Anatomy - Captura anatomia canina
Figura 3.19: Virtual Animal Anatomy - Captura anatomia cerebro canino
53
3.1.10 - Virtual Animal Anatomy (Virtual Reality) -
Colorado State University 12
Virtual Animal Anatomy VR es un programa de estudio de anatomía
veterinaria en realidad virtual. Ofrece modelos 3D fotorealistas interactivos de
diferentes especies (equinos, caninos, entre otros) (ver figuras 3.20 y 3.21).
Simplifica el estudio comparativo de la anatomía demostrando de manera
simultánea dónde se ubica cada estructura en las distintas especies. Cuenta a su
vez con cuestionarios interactivos integrados. Es un sistema que está siendo
desarrollado actualmente, no se posee mucha más información al respecto.
Figura 3.20: Virtual Animal Anatomy - Quiz anatomía equina y canina
12 VAA Virtual Reality - Colorado State University
54
https://virtualanimalanatomy.colostate.edu/virtual-reality
Figura 3.21: Virtual Animal Anatomy - Captura anatomía equina y canina
3.1.11 - Simulador de anomalías pupilares - ULEAM 13
Esta herramienta, que se encuentra en la página de la Facultad de Ciencias
Médicas de una Universidad de Ecuador, es un simulador de anomalías pupilares en
humanos, pero utiliza la tecnología Flash la cual actualmente no es compatible con
la mayoría de los navegadores actuales (ver figura 3.22). Por lo tanto, se desconoce
el funcionamiento exacto de la misma, así como las anomalías que se pueden
estudiar o simular.
Figura 3.22: Simulador de anomalías pupilares
13 Simulador Anomalías Pupilares - ULEAM
55
https://oftalmologiauleam.wixsite.com/oftalmologiauleam/simulador-de-anomalas-pupilares
3.2 Comparación de las herramientas existentes
A continuación se presenta una tabla a modo de resumen de las
características de cada una de las herramientas ya existentes. A su vez se
presentan las especificaciones correspondientes de la aplicación desarrollada en
este proyecto. Esto nos permitirá realizar una comparación de las cualidades de
cada una de las herramientas con respecto a OcularVet, de una manera más simple
y gráfica.
Las características de cada fila concuerdan con los requisitos establecidos al
comienzo del desarrollo que van de la mano de las necesidades que busca cubrir la
herramienta para cumplir con los objetivos educativos.
Característica OcularVet RVC MSDManual
Study
Stack
Medical
X
Body
Interact
Maestro
Evolve VAA VAA VR S.A.P.
Interactiva/
informativa Interac✔
Interac
✔
Informat
iva❌
Interac
✔
Interac
✔ Ambas Ambas Ambas Ambas
No se
sabe
Posibilidad de
registrar
usuarios
✔ ❌ ❌ ❌ ❌ ✔?14 ✔? ✔? No sesabe
No se
sabe