Aplicación web para práctica con vectores y soporte educativo bajo el modelo de Educación Basada en Web

Web application for practice with vectors and educational support under the Web-Based Education model

Rubén Peredo-Valderrama rperedo@ipn.mx

Instituto Politécnico Nacional, México

Iván Peredo-Valderrama ivan.peredo@upq.edu.mx

Universidad Politécnica de Querétaro, México

La Fig. 1 muestra la arquitectura del Front-end y Back-end de la propuesta, se utilizó el patrón de diseño de software denominado Modelo Vista Controlador (Model View Controller, MVC por sus siglas en inglés), siendo un patrón contenedor para toda la propuesta, ya que nos permite combinar varios patrones de diseño de software, la presente propuesta utilizó adicionalmente los siguientes patrones de diseño de software: composición, observador, singleton, y Objeto de Acceso a los Datos (Data Access Object, DAO por sus siglas en inglés). Solo el patrón composición se implementó en el Front-end de la propuesta, en conjunto con los componentes implementados con React.js, todos los restantes patrones de diseño de software siguientes: Observador, Singleton, y DAO; fueron implementados del lado del Back-end. La implementación del patrón de diseño de software MVC de la propuesta se llevó a cabo a través del framework Struts 2 [13], y se empleó para la implementación como servidor Web GlassFish Server 4.1.1 [14]. La base de datos se llevó a cabo por medio de MySQL 8 [15], la cual representa nuestro modelo en el patrón MVC, además de la lógica de negocios, lo anterior se muestra en la Fig. 1. Las vistas son las interfaces de la aplicación, con las que el usuario interacciona a través de la aplicación Web, estas están implementadas por medio de la librería React.js usando el modelo basado en componentes de software, en la Fig. 1 se muestra que la vista de la aplicación Web está compuesta por los componentes: Aplicación, Login, LeerPregunta, MenúPrincipal, y Modificar. El controlador en nuestra propuesta se denomina FilterDispatcher, teniendo como función principal seleccionar la correspondiente vista de salida a renderizar en respuesta a la correspondiente entrada del usuario, aparte de ejecutar la correspondiente lógica de negocios asociada. El patrón de composición nos proveyó una solución robusta para la construcción de sistemas complejos con base en componentes más pequeños. Teniendo básicamente dos tipos de componentes: simples y compuestos, estos últimos representan colecciones de componentes. El patrón de composición nos permitió representar nuestro Front-end como una jerarquía de árbol, donde las estructuras constituyen la jerarquía de árbol, donde los componentes de esta estructura pueden ser simples o compuestos. La Fig. 2 muestra el diagrama de componentes de la propuesta del Front-end, implementados con React.js [12], la propuesta también utiliza componentes preconstruidos de la iniciativa Material-UI, siendo esta una librería React.js muy popular para crear UI, basadas en componentes React.js personalizables, la librería es de código abierto, asimismo permite incorporar otras soluciones de terceros [16]; otros componentes manejados en la propuesta son los de React Bootstrap 4, siendo este un marco de trabajo que sustituye a Bootstrap, eliminando las dependencias de contexto innecesarias como jQuery, lo que lo ha posicionado como una alternativa atractiva al desarrollar UI [17]. El patrón observador puede ser visto como un punto concentrador de mensajes, que envía los mensajes a las instancias correspondientes, en nuestro caso se utilizó en la propuesta para mantener actualizadas las vistas del usuario. El patrón singleton tiene como objetivo garantizar que solo haya una instancia del objeto en el sistema, en nuestro caso se empleó para tener un solo objeto que acceda a la base de datos. El patrón DAO nos permitió extraer y encapsular todo el acceso a la fuente de datos, manejar la conexión a la fuente de datos para la obtención y almacenamiento. La abstracción y encapsulación de la fuente de datos nos permitió no depender de la implementación de la fuente de datos, desacoplando la capa de negocios de la fuente de datos, mejorando la escalabilidad de la propuesta.

Fig. 1.
Front-end y Back-end de la propuesta para práctica con vectores en el plano cartesiano xy.

La persistencia se llevó a cabo con base en el framework Hibernate, que nos permitió llevar a cabo el Mapeado Objeto Relacional (Object-Relational Mapping, ORM por sus siglas en inglés), este framework nos posibilitó establecer un puente entre el modelo de Programación Orientado a Objetos (Object Oriented Programming, OOP por sus siglas en inglés), y el modelo relacional, dos modelos incompatibles entre sí, relacionando las estructuras del modelo relacional con sus correspondientes estructuras lógicas en el modelo OOP. La aplicación web implementó las estructuras de la base de datos acopladas por medio de entidades lógicas, para llevar a cabo las siguientes acciones de la propuesta: Crear, Leer, Actualizar y Borrar (Create, Read, Update and Delete, CRUD por sus siglas en inglés), a través de la conjunción de: Hibernate, ORM, DAO y MVC. El patrón DAO nos posibilitó separar la lógica de negocios de la lógica para acceder a los datos, delegando a DAO el acceso a los datos del modelo.

La Fig. 3 muestra la vista para crear un nuevo ejercicio para la práctica de vectores en el plano cartesiano, proveyéndole los componentes rectangulares de los vectores, en nuestro caso de los vectores A y B, siendo estos los siguientes valores respectivamente: A_x=55, A_y=90, B_x=99, y B_y=30, representados estos a continuación en su forma matricial correspondiente: A=[A_x, A_y] y B=[B_x, B_y], sustituyendo los componentes rectangulares correspondientes a continuación: A=[55, 90] y B=[99, 30], la visualización de manera dinámica y gráfica de los vectores A y B se pueden ver en su forma final en la Fig. 3. En la Fig. 3 también se muestra el botón Seleccionar archivo para la subida de multimedios asociado al ejercicio, mostrado en la esquina inferior izquierda, en este caso concreto el archivo multimedia asociado es un video en formato MP4 denominado: vectores3.mp4, en caso de estar seguro de los datos anteriormente proporcionados, se presiona el botón Enviar creándose el ejercicio, y en caso de que no se desee crear el ejercicio se presiona el botón Cerrar. En la Fig. 4 se pueden ver el ejercicio creado exitosamente en la aplicación Web, mostrando los vectores Importar imagen y Importar imagen con sus componentes rectangulares de los vectores respectivos, además de mostrar el cálculo automático por parte del sistema de los ángulos de los vectores A y B, siendo estos respectivamente los siguientes: 58.57, y 16.85.

Fig. 2.
Diagrama de componentes de la vista de la propuesta.

Fig. 3.
Interfaz para la creación de nuevos ejercicios de vectores en el plano cartesiano xy.

Fig. 4.
Interfaz del ejercicio de vectores creado exitosamente en el plano cartesiano xy.

La Fig. 5 presenta dos nuevos vectores que muestra en segundo plano el vector original (esquina superior izquierda), luego se muestra en segundo plano la suma de los vectores (esquina superior derecha), la resta de los vectores se muestra también en segundo plano (parte inferior central), y finalmente en el centro se muestra el componente multimedia asociado al ejercicio para apoyo al educando, en este caso un archivo de sonido con la explicación de la actividad. La aplicación Web llevara a cabo el cálculo automático para la suma de los vectores A y B, y su representación gráfica, representada esta suma por el vector S, mostrando a continuación los resultados en su forma matricial de los nuevos vectores: S =[S_x, S_y]= [350, 500], con un ángulo de: 55.00. Igualmente, para la resta de los vectores, se muestra el cálculo de la resta de los vectores A y B por parte de la aplicación Web, y su representación gráfica, siendo representada esta resta por el vector R mostrada a continuación, donde los resultados en su forma matricial de los nuevos vectores son los siguientes: R =[R_x, R_y]= [-150, -300], con un ángulo de: 63.43.

Fig. 5.
Interfaz para la suma y resta de los vectores con multimedio en el plano cartesiano.

La Fig. 6 muestra la interfaz del menú principal con ejercicios de vectores creados en el plano cartesiano, mostrando en la parte superior los botones: Salir y Crear Nuevo Ejercicio. En la parte central se tienen dos ejercicios de vectores creados previamente, cada componente contiene las opciones: Leer Pregunta, Borrar Pregunta, y Modificar Pregunta; el botón de Leer Pregunta nos muestra el ejercicio correspondiente creado en el plano cartesiano dependiendo del botón seleccionado, mostrándonos el vector original, la suma y resta de los vectores, así como los cálculos automáticos de los ángulos correspondientes, de los vectores originales, suma y resta respectivamente; el botón Borrar Pregunta despliega un cuadro de diálogo preguntándonos si estamos seguros de borrar el ejercicio correspondiente, en caso de confirmar el borrado al darle clic al botón Borrar Pregunta, se borrará el ejercicio correspondiente; por último en caso de dar clic al botón Modificar Pregunta nos mostrara una interfaz similar a la de la Fig. 3 del respectivo ejercicio de vectores, con los componentes rectangulares llenados en el proceso de su creación, para el caso de modificar los valores al dar clic al botón Modificar Pregunta, se modifica el ejercicio proporcionando los nuevos componentes rectangulares, recalculando el vector original, la suma y la resta respectivamente del ejercicio. La aplicación web también cuenta con un módulo de Login para validar a los usuarios dentro del sistema como se muestra en la Fig. 7.

Fig. 6.
Interfaz del menú principal con los ejercicios de vectores creados en el plano cartesiano.

Fig. 7.
Interfaz del Login de la aplicación Web para práctica de vectores en el plano cartesiano.

El valor agregado de la presente propuesta comparándola con las iniciativas del estado del arte de vectores de la UNAM, la Fundación Carlos Slim o la academia Khan, consiste en que se puede crear nuevos ejercicios multimedia interactivos, reconfigurables y dinámicos, mientras que las otras iniciativas anteriormente mencionadas son muy limitadas en estos aspectos. Mientras que en la iniciativa de GeoGebra tiene su mayor problema en que se basa en los Applets Java, los cuales ya están depreciados y la etiqueta HTML para el Applet también está depreciada, lo que puede ocasionar que muchos navegadores Web no soporten los contenidos educativos desarrollados en esta plataforma, mientras que nuestra propuesta se apega a los estándares de la Web, siendo soportados en los navegadores más actuales. Finalmente, la iniciativa Phet de la Universidad de Colorado Boulder tiene su mayor debilidad en la creación de materiales educativos basados en vectores y su guardado como ejercicios en la plataforma, además de carecer de soporte multimedia, mientras que la propuesta permite la creación y modificación de los materiales educativos por medio del CRUD, y tiene soporte de archivos multimedia.

La presente propuesta puede utilizarse en varias materias, utilizaremos para ejemplificar la materia de física, la cual es considerada en diferentes planes de estudios, en diferentes niveles educativos, abarcando en muchos casos el tema de los vectores, con temas que pueden ser apoyados por la herramienta de la presente propuesta para temas como: propiedades de los vectores, producto punto, sistemas equivalentes de fuerzas, suma y resta de vectores, entre otros.

La presente propuesta muestra una aplicación web para la práctica con vectores con soporte educativo todo bajo el modelo WBE, combinando internamente tres modelos, en el Front-end utilizamos el modelo de componentes de software, en el Back-end utilizamos el modelo OOP y el relacional. La presente propuesta cuenta con un CRUD que permite crear ejercicios prácticos multimedia interactivos, reconfigurables y dinámicos con vectores en el plano cartesiano xy, con las ventajas inherentes de los componentes de software, reduciendo la complejidad de desarrollo de los ejercicios para el profesor, al simplificar la elaboración de este tipo de materiales educativos, en prácticas con vectores en el plano cartesiano xy. El manejo del cambio en la propuesta se ve reflejado desde el ensamblado dinámico de componentes en diferentes tipos de contenidos con base en componentes simples y complejos bajo el patrón composición. La reutilización de las partes del proyecto ha mejorado, sobresaliendo el Front-end de la propuesta en conjunto con el patrón composición de diseño de software y la librería React.js, ya que las UI de la propuesta se implementaron con la librería React.js, construyendo las UI del usuario con base en componentes simples, para conformar componentes más complejos, es importante destacar que se hizo uso de componentes preconstruidos de las librerías: Material-UI, y React Bootstrap 4.

La propuesta hizo uso de la base de datos MySQL para la implementación del modelo, al incorporar el ORM en la propuesta, se tendió un puente entre los modelos incompatibles entre sí, el modelo relacional y la OOP, permitiéndonos relacionar las tablas del modelo relacional, con las estructuras lógicas en el modelo OOP, resultando en la escritura de la lógica de negocios en un modelo escrito en el modelo OOP, mejorando la mantenibilidad del código de la propuesta. Los patrones DAO y MVC mejoraron la escalabilidad de la propuesta, facilitando la migración de una base de datos a otra con mejores prestaciones en caso de ser necesario. Los ejercicios resultantes de la propuesta son dinámicos, interactivos, multimedia, y actualizables; lo que ha permitido a los educandos prácticas más interactivas donde puedan poner a prueba sus saberes, permitiendo que tanto educadores como educandos puedan modificar los ejercicios propuestos por los profesores, con la finalidad de tener prácticas más enriquecedoras entre educadores y educandos, proporcionando mejores retroalimentaciones, en este caso con el objetivo de mejorar la comprensión de los conceptos de vectores, suma y resta de vectores para los educandos con base a la práctica poniendo a prueba sus saberes. Los ejercicios pueden ser transformados en evaluaciones supervisadas por el profesor, mejorando la retroalimentación entre educadores y educandos. La presente propuesta al ser una aplicación web ha tomado mucha relevancia ante la pandemia de COVID-19 que hasta el día de hoy seguimos viviendo, permitiendo a los educandos poner a prueba sus saberes, con ejercicios prácticos en línea con retroalimentaciones. Las prácticas creadas por los educadores pueden agregar elementos multimedia de apoyo, gracias al módulo de subida de archivos dinámico, permitiendo agregar materiales complementarios de apoyo para los educandos. La presente propuesta utiliza librerías libres con la finalidad de reducir los costos por licenciamiento al máximo, para tener en un momento dado una versión de producción de bajo costo. La propuesta posibilita además agregar nuevas opciones pedagógicas en caso de ser requeridas, teniendo la posibilidad de adaptarlas a las necesidades de los educadores, y no que el educador se adapte a la herramienta.

Destacamos que la propuesta es innovadora en línea con la Educación 4.0, la cual tiene un enfoque basado en proyectos y competencias. La presente propuesta es en este momento un prototipo, pero gracias a los patrones de diseño de software implementados es posible la actualización del proyecto de software en un momento dado a una versión de producción. El importante mencionar que el patrón DAO ha posibilitado un acceso controlado y uniforme a los datos. Finalmente, respecto al trabajo futuro consideramos que hay que mencionar que se puede mejorar en los siguientes puntos: agregar más patrones de diseño de software, mejorar el soporte de arrastrar y soltar de las UI, incluir un módulo de Inteligencia Artificial, hacer análisis de datos de los resultados de los estudiantes con Python y pandas, y crear un módulo de análisis de datos para que automatice la obtención de información en el momento, con la finalidad de que el educador pueda tomar mejores decisiones, en la retroalimentación hacia sus educandos, mejorar las UI, y documentar nuevas librerías que puedan incorporarse a la propuesta, mejorar la reconfiguración dinámica de los contenidos educativos en función de sus progresos en el curso, adaptación del nivel de los materiales educativos al educando, etc.