Artículo de Investigación

Desarrollo de una Aplicación Web para el Control de Asistencia del Personal Docente y Administrativo del IST Primero De Mayo

Development of a Web Application for the Control of Attendance of the Teaching and Administrative Staff at IST Primero de Mayo

Diego Chamba

Ecuadorian Science Journal

GDEON, Ecuador

ISSN-e: 2602-8077

Periodicidad: Semestral

vol. 5, núm. Esp.3, 2021

esj@gdeon.org

Recepción: 31 Agosto 2021

Aprobación: 04 Octubre 2021



DOI: https://doi.org/10.46480/esj.5.3.148

Los autores mantienen los derechos sobre los artículos y por tanto son libres de compartir, copiar, distribuir, ejecutar y comunicar públicamente la obra sus sitios web personales o en depósitos institucionales, después de su publicación en esta revista, siempre y cuando proporcionen información bibliográfica que acredite su publicación en esta revista. Licencia de Creative Commons Las obras están bajo una https://creativecommons.org/licenses/by-nc-nd/4.0/deed.es

Como citar: Chamba, D. (2021). Desarrollo de una Aplicación Web para el Control de Asistencia del Personal Docente y Administrativo del IST Primero De Mayo. Ecuadorian Science Journal, 5(3), 112-124. DOI: https://doi.org/10.46480/esj.5.3.148

Resumen: El presente proyecto tiene como finalidad automatizar el control de asistencia del docente y personal administrativo de los institutos Técnicos y Tecnológicos del Ecuador. El proceso de análisis, diseño e implementación del aplicativo web fue realizado mediante la metodología ágil Scrum la misma que permite realizar avances minimos de acuerdo las función de los diferentes módulos del aplicativo el mismo que está enfocado en resultados positivos que pueden ser visualizado por el usuario en las tareas que ejecutara el software, además la mediante la participación del docente con el equipo de desarrollo Scrum nos garantiza un resultado de calidad. En la construcción del sistema se utilizó́ la herramienta Visual Studio Code como plataforma de programación soportado por una arquitectura de tres capas, Xamp como servidor de aplicaciones, Vue.JS como framework de desarrollo, Mysql edición libre como gestor de base de datos y la librería Bootstrap 4.0 para personalización de Front-End. Con una adecuada utilización del presente sistema se logra agilitar el proceso de control de asistencia y se llega a obtener un control optimo y dinámico de la información, además de ser un sistema cero papeles que ayuda a disminuir el consumo de recursos, para la fase de pruebas se realizó la implementación en el Instituto Superior Tecnológico Primero Mayo.

Palabras clave: VueJs, Xamp, Bootstrap.

Abstract: The purpose of this project is to automate the attendance control of teachers and administrative personnel of the Technical and Technological Institutes of Ecuador. The process of analysis, design and implementation of the web application was carried out using the agile Scrum methodology, which allows minimal progress according to the functions of the different modules of the application, which is focused on positive results that can be viewed by the user. In the tasks that the software will execute, in addition, through the participation of the teacher with the Scrum development team, we guarantee a quality result. In the construction of the system, the Visual Studio Code tool was used as a programming platform supported by a three-layer architecture, Xamp as an application server, Vue.JS as a development framework, Mysql free edition as a database manager and the library Bootstrap 4.0 for Front-End customization. With an adequate use of this system, it is possible to streamline the attendance control process and obtain an optimal and dynamic control of the information, in addition to being a zero-paper system that helps to reduce the consumption of resources, for the phase of testing was carried out at the Instituto Superior Tecnológico Primero Mayo.

Keywords: VueJs, Xamp, Bootstrap.

Introducción

En la actualidad el Instituto Superior Tecnológico Primero de Mayo no cuenta con una aplicación de control de asistencia de docente y personal administrativo, lo que puede conllevar a equivocaciones y manipulaciones por las personas que manejan estos procesos, además los registros de asistencia diaria de los funcionarios no se los lleva de forma controlada y para gestionar una consulta no se puede realizar oportunamente como se requiere la actividad.

Con lo antes mencionado surge la necesidad de realizar la primera versión de un software que realice de manera eficiente el registro y control de asistencia de docentes y personal administrativo, así́ ayudar a tener un mejor control del proceso con una información ordenada, correcta y real de cada persona.

Cabe recalcar que el adiestramiento a los usuarios se lo hizo ayudado de manuales, los cuales fueron muy oportunos en la claridad de las necesidades establecidas como requerimientos para el desarrollo del software.

Con el uso de la aplicación se pudo obtener un control eficiente y la información fluyo de manera dinámica, además de ser un sistema en el cual no se usa papeles esto ayuda a disminuir el consumo de recursos materiales.

Con respecto a lo posterior del articulo se ha estructurado de la siguiente manera: En la sección 2 se describe la metodología que se utilizó para la construcción del proyecto. En la sección 3 se detalla las herramientas y métodos que fueron usados en la construcción de los módulos del sistema. En La sección 4 se muestra el diseño e implementación del aplicativo. En La sección 5 se indica los resultados finales obtenidos con relación a la eficiencia, calidad del sistema y satisfacción de los usuarios. Finalmente, En la sección 6 se puntualiza las conclusiones obtenidas del presente estudio y trabajos a futuro

Metodología

Para la elaboración del proyecto se decidió utilizar la metodología ágil Scrum en vista que los requerimientos del proyecto son variables en la etapa de desarrollo, en vista que el usuario solo comprende lo que necesita una vez y lo que visualiza la primera versión del software, además considerando que al ser una metodología que va en crecimiento constante nos asegura que siempre existirá disponibilidad de una nueva versión potencialmente útil y con un producto funcional

[1] La Metodología Scrum ejecuta un proyecto en 2 etapas; temporales cortos y de duración fija (iteraciones que normalmente son de 2 semanas, aunque en algunos equipos son de 3 y hasta el lapso de 4 semanas, límite máximo que alcanzara el feedback de producto existente). Cada acción tiene que proporcionar un resultado efectivo, así como un incremento al producto final que sea tangible y de fácil apreciación para el cliente final

Proceso de la Metodología Scrum
Figura 1
Proceso de la Metodología Scrum
[1]

Roles en Scrum.

En la Metodología Scrum, los desarrolladores se focalizan en construir aplicaciones con altos estándares de calidad. La administración de un proyecto Scrum se enfoca en definir las características que tendra el producto construido (es decir qué vamos a construir, qué no y en el orden) y en terminar con cualquier circunstancia que pudiera arruinar la tarea asignada al equipo de desarrollo. [2]

El equipo Scrum identifica los siguientes roles:

Scrum master: Lider del equipo el cual guiá el cumplimiento de las reglas y procesos de la metodología. ademas gestiona la disminución de problemas del proyecto y trabaja en conjunto con el Product Owner para aumentar sus Roles. [2]

Product owner (PO): Es el representante de los usuarios que usaran el software. Se centra en el modelo de negocio y es responsable del rol del proyecto (entregar un monto mayor a la inversión). Visualiza las ideas del software requerido y lo entrega al equipo de desarrollo, formaliza las ideas en requerimientos a incorporar en el Product Backlog y las organiza de forma regular. [2]

Team: Es el Grupo de expertos con los conocimientos necesarios para el desarrollo del proyecto de manera conjunta ejecutando los requerimientos iniciales de cada sprint. [2]

Proceso

El desarrollo del proyecto se realiza de forma incremental. Cada acción es denominada como Sprint y su tiempo de ejecución preestablecida es de 2 y 4 semanas, obteniendo como resultado una versión del aplicativo con prestaciones listas para ser utilizadas. En cada Sprint, se va acoplando la funcionalidad ya construida y se agregan nuevas prestaciones considerando siempre aquellas que aporten un valor al negocio.

Proceso Desarrollo Scrum
Figura 2
Proceso Desarrollo Scrum
[2]

  1. 1. Product Backlog: Es el conjunto de requisitos que se denomina como historias, los cuales son descritos en un lenguaje normal y considerando el valor de negocio, o tambien considerado por regreso de inversión en relacion de beneficio y coste. Los requerimientos y el orden se ajusta durante el transcurso del proyecto [2]
  2. 2. Sprint Planning: Conocido como la reunión en donde el Product Owner entrega las historias del backlog en orden de ejecución. y el equipo presenta la cantidad de historias a incorporarse para completar la tarea, y posterior de la reunión, se tomarla decision de ver como se lo va a conseguir. [2].
  3. 3. Sprint: es la ejecucion de procesos de duración determinadas durante la cual los desarrolladores trabajan para implementar las historias del Product Backlog iniciales, en un software totalmente operativo. [2].
  4. 4. Sprint Backlog: Aqui definimos la lista de las actividades necesarias para desarrollar las historias del sprint. [2]
  5. 5. Daily sprint meeting: reuniones diarias no mayores a 15 min. en donde se sincroniza para trabajar de forma secuencial. Cada tecnico indica lo realizado el dia anterior y que desarrollara el dia de hoy. [2]
  6. 6. Demo y retrospectiva: al final del sprint se debe reunir para presentas las historias y se realiza la demostración del producto. Finalmente en la retrospectiva, se analiza lo que salio bien, qué procesos deben mejorarse y socializa como perfeccionar. [2]

Herramientas y metodologias utilizadas

Las herramientas utilizadas son:

Tabla:1
HERRAMIENTAS UTILIZADAS EN EL PROYECTO
HERRAMIENTA DESCRIPCIÓN LIBRE
XAMPP Apache + Maria DB + PHP + Perl XAMPP es un servidor local que nos permite levantar y ejecutar nuestras aplicaciones web de manera local. [3] SI
Visual Studio Code 1.44 Visual Studio Code es un editor de multiplataforma creado por el quipo de Microsoft.Es un software libre distribuido mediante licencia MIT[4] Se distribuye bajo una licencia gratuita no libre.
VUE JS Es un framework libre de JavaScript, el cual nos ayuda a construir templates de usuarios de form sencilla. [5] SI
BOOTSTRAP Es una herramienta para mejorar el aspecto visual de los aplicativos web, pertenece a twitter y permite la integración con varias librerias de desarrollo. [6] SI
PHP Es un lenguaje que funciona del lado del servidor, nos permite intercactuar con la base de datos y crear acciones muy seguras. [7] SI
FPDF Es una librería para generar reportes PDF, idelaes para la impresión de resultados. [8] SI
GOOGLE MAPS APIS Es una librería que permite integrar un mapa en cualquier sitio web y lo mejor es que mediante la geo localizacion nos puede dirigir de manera automatica hasta nuestra ubicación actual SI
Elaboración propia

A. Metodología de versionamiento para el código fuente.

En la parte de construcción del proyecto es importante señalar que se utilizó́ GITHUB, que es un mecanismo para tener el código fuente totalmente actualizado en un servidor y que se puede acceder a él desde cualquier parte del mundo gracias al internet.

1. Proceso para para el versionamiento de código: Para realizar un control correcto del código fuente del aplicativo se identificaron los siguientes pasos y procedimientos.

Referente al diseño se realiza según los requerimientos del usuario, se identifica y se diseña funcionalidades básicas para ser construidas en la siguiente fase. Para la terminación de funcionalidades se debe realizar una validación de calidad y los trabajos deben ser aprobados por los encargados. Si todas las pruebas son satisfactorios el equipo se encargan de actualizar el repositorio de GITHUB.

Estos procesos son realmente de gran ayuda al equipo ya que la actualización de nuevos cambios en la programación es registrada en cada dispositivo en donde se realiza el trabajo real


Figura 2

DISEÑO E IMPLEMENTACIÓN

A continuación, se detalla el proceso de diseño e implementacion en base a los requerimeintos identificados:

Capa de Presentación

Contiene las pantallas web con tecnología css de Bootstrap en las cuales el usuario interactúa

Capa de Negocio

Contiene las pantallas web con tecnología css de Bootstrap en las cuales el usuario interactúa

Capa de Base de Datos

Contiene el modelo de la base de datos, aquí́ están los datos con la cual el sistema interactúa., en la Figura 3 se demuestra la Arquitectura del Software, en la que se puede apreciar las tres capas con las cuales está estructurado el software.

 Arquitectura de Software
Figura 3
Arquitectura de Software

A continuación en la Figura 4 se presenta la pantalla de registro de asistencia denominada “AsisDocentes”, donde el docente o personal administrativo del Instituto Superior Tecnológico Primero de Mayo registra la asistencia de entrada y/o salida.

 Registro de asistencia del
socente y personal administrativo
Figura 4
Registro de asistencia del socente y personal administrativo

Una vez que el docente ha registrado su asistencia, podrá ingresar al sistema mediante un acceso de login digitando su correo y contraseña, en donde veerificara los movimientos diarios que se registran., a continuación en la Figura 5 se muestra la pantalla en donde se realizará este proceso.

Registro de asistencias a los
alumnos
Figura 5:
Registro de asistencias a los alumnos

PROCESO DE VERIFICACION

El proceso de verificación de asistencia de cada docente se realiza siguiendo algunos parámetros de control, los mismos que han fueron minuciosamente identificados de la siguiente manera:

CONTROL POR DIAS: El sistema controla los dias de la semana y dependiendo del dia muestra la interfaz para registro de asistencia, para el efecto el administrador determina los dias laborables y cuando un usuario intenta ingresar al registro de asistencia lo redirecciona o otra interfaz donde se notifica que no es posible continuar.

CONTROL POR HORARIO: El sistema controla el horario de cada usuario y dependiendo de la hora de registro muestra la interfaz, para el efecto el administrador registra los horarios permitidos y cuando un usuario intenta ingresar al registro de asistencia fuera del horario lo redirecciona o otra interfaz donde se notifica que no es posible continuar.

En la figura 6 se aprecia la notificacion del control por dias y horas.

Notificación de Control por días
y horas
Figura 6:
Notificación de Control por días y horas

ONTROL POR UBICACIÓN: El sistema controla la ubicación mediante geo localización del dispositi

CONTROL POR UBICACIÓN: El sistema controla la ubicación mediante geo localización del dispositivo para el registro de la asistencia, para el efecto el administrador establece el rango a partir de una ubicación en donde podrán acceder a la aplicación y cuando un usuario ingresa al sistema, deberá conceder los permisos de ubicación de su dispositivo, en caso que no conceda los permisos el sistema lo re direcciona hasta una interfaz de notificaciones, y en el caso que se encuentra fuera del cerco de geo localización, de igual manera es re direccionado hasta otro sitio.

En la Figura 7 Se puede apreciar el control por ubicación dependiendo el cerco establecido.

Control de Ubicación mediante
cerco de Geo localización
Figura 7
Control de Ubicación mediante cerco de Geo localización

CONTROL MEDIANTE VERIFICACION DIGITAL MULTIMEDIA: Cuando un usuario realiza el registro de asistencia, deberá asignar los permisos de uso de cámara, esto permitirá que el sistema capture de manera automática su rostro y lo almacene en la base de datos, para este control el administrador verifica que el registro lo haya realizado el docente, en caso que la imagen no corresponda al docente el administrador anulara el registro y contabilizara como una inasistencia.

En Figura 8 se puede apreciar el control realizado mediante verificación digital multimedia.

Control de Verificación digital
multimedia.
Figura 8
Control de Verificación digital multimedia.

Resultados

En las reuniones que se efectuaron para observar los resultados se realizaron pruebas de acuerdo a los siguientes parámetros: velocidad de transacción, interfaz gráfica, tiempo de transición de un formulario a otro (navegabilidad) y aceptación.

Cabe aclarar que en los cuadros siguientes que muestra el tiempo de demora puede existir un margen de error de 0.5 segundos de tiempo.

Velocidad de transacción

En base a una prueba realizada en el Instituto Superior Tecnológico Primero de Mayo se procedieron a conectar al sistema varios usuarios, después de tomar el tiempo que demoraba en una transacción y visualizar si los registros se insertaban en la base de datos se llega a la conclusión que la velocidad con la que trabaja el aplicativo fue aceptable según los requerimientos del cliente, A continuación en la Tabla 2 se detalla una descripción:

Tabla: 2
RESULTADO VELOCIDAD DE TRANSACCIÓN
ACCIONES VELOCIDAD DE TRANSMISIONES EN ACCIONES CANTIDAD DE USUARIOS
Insertar 1 segundo de tiempo 16
Modificar 1 segundo de tiempo 16
Eliminar 1 segundo de tiempo 16
Consultar 3 segundos de tiempo 16
Elaboración propia

Interfaz Grafica

En cada interfaz existe la información que va actualizándose a medida que el usuario realice las iteraciones. Cada interfaz se ajusta al tipo de información que se requiere, como consultas actualizaciones, solicitudes y respuestas.

Tiempo de transición de una página a otra

De acuerdo a una prueba realizada con los docentes y personal administrativo se conectaron al sistema múltiples usuarios; lo cual arrojó los resultados que según las exigencias del cliente fueron aceptadas. En la Tabla 3 se detalla el tiempo de navegabilidad entre formularios.

Tabla: 3
RESULTADO NAVEGABILIDAD DEL SISTEMA
Tiempo Navegación Tiempo Estimado Máximo Cantidad de Usuarios
3 segundos de tiempo 5 segundos de tiempo 16
Elaboración propia

Se observó́ que el tiempo de navegación disminuye o aumenta tomando en cuenta la cantidad de usuarios conectados y el tipo de conexión a internet que se cuenta. Se estima de acuerdo a la información del cliente que el número de personas conectadas al mismo tiempo al sistema sea de hasta 16 y el acceso al sistema se lo realizo desde dispositivos móviles con servicio de datos y computadoras con conexión fija.

Aceptación

Los resultados de las pruebas de aceptación fueron basados en las críticas y sugerencias de los usuarios reales expuestas al momento en que se realizaron las pruebas del sistema, obteniendo como resultados los que se mencionan a continuación:

Resultados Usuario Perfil “Docente-Personal Administrativo”: Una vez preparado el escenario para realizar las pruebas con los Docentes y el personal administrativo, se procedió́ a ejecutar los casos de prueba con la ayuda de todos los docentes y se obtuvo finalmente el siguiente resultado detallado en la tabla 4.

Tabla: 4
RESULTADOS DE LA EVALUACIÓN USUARIO DOCENTE-PERSONAL
Casos de Prueba No Profesores Satisfechos No Profesores Insatisfechos
Registro Asistencia 16 0
Ingreso al Sistema 16 0
Reporte Mensual 16 0
Justificaciones 16 0
Vacaciones 16 0
RESULTADOS 100% SATISFECHOS 0% INSATISFECHOS
Elaboración propia

Resultados Usuario Perfil “Administrador”: Con el objetivo de determinar el nivel de satisfacción del usuario administrador, se tomó́ una muestra de 1 docente el cual será el encargado de administrar el sistema, el mismo que pertenece a la Unidad de Informática del Instituto Superior Tecnológico Primero de Mayo y se obtuvo los siguientes resultados detallados en la Tabla 5.

Tabla: 5
RESULTADOS DE LA EVALUACIÓN USUARIO ADMINISTRADOR
Casos de Prueba No Administradores Satisfechos No Administradores Insatisfechos
Ingreso al Sistema 1 0
Panel Administrador 1 0
Horarios 1 0
Reportes Individuales 1 0
Reportes Grupales 1 0
Justificaciones 1 0
Días No Laborables 1 0
Registros Diarios 1 0
Docentes-Personal Administrativo 1 0
RESULTADOS 100% SATISFECHOS 0% INSATISFECHOS
Elaboración propia

EL proyecto lo podemos encontrar alojado en GITHUB, desde el siguiente enlace: https://github.com/dchamba2018/regas

Conclusiones

La metodología ágil Scrum nos ayudó́ a visualizar resultados positivos en avances pequeños de construcción de módulos, los cuales eran presentados al usuario que junto con las reuniones y revisiones constantes fueron muy importantes para el desarrollo del sistema y con el uso de versionamiento en el proyecto facilitó el desarrollo haciendo que cada desarrollador tenga tareas que realizar y subirlas al servidor una vez finalizadas, así́ se obtuvo un proyecto totalmente integrado. En cuanto al diseño final de las pantallas junto con sus funcionalidades a lo largo de la construcción aparecieron cambios para que sean más fáciles de utilizar, estas modificaciones fueron posibles gracias a Prime faces que brinda una gran cantidad de componentes enriquecidos que facilitan la creación de las aplicaciones web y que ayudo en gran medida a construir formularios muy sencillos de utilizar para el usuario.

Agradecimientos

Una vez culminado con el presente proyecto, quiero expresar mis sinceros agradecimientos, al Ing. Wagner Morocho, Rector del ISTPM, por permitirme realizar este proyecto en la institución, de igual manera al personal docente y administrativo por su gentil colaboración en el transcurso del mismo.

Referencias Bibliográficas

P. AGILES.ORG, «PROYECTOS AGILES.ORG,» 20 03 2019. [En línea]. Available: https://proyectosagiles.org/que-es-scrum/.

SOFTENG., «SOFTENG,» 03 01 2020. [En línea]. Available: https://www.softeng.es/es-es/empresa/metodologias-de-trabajo/metodologia-scrum/proceso-roles-de-scrum.html.

F. G. Castro, «Blogger,» 23 Marzo 2017. [En línea]. Available: http://janda1617smr2curro.blogspot.com/2017/03/que-es-xampp-y-para-que-sirve.html.

B. S. Marco, «mclibre,» 24 04 2020. [En línea]. Available: https://www.mclibre.org/consultar/informatica/lecciones/vsc.html.

E. I. G. Pérez, «APRENDIENDO EN CASA,» 01 04 2019. [En línea]. Available: https://codigofacilito.com/articulos/que-es-vue.

A. Fontela, «RAIOLA NETWORKS,» 15 07 2015. [En línea]. Available: https://raiolanetworks.es/blog/que-es-bootstrap/.

M. A. Alvarez, «DESARROLLO WEB,» 09 05 2001. [En línea]. Available: https://desarrolloweb.com/articulos/392.php.

ANONIMO, «ECURED,» 14 08 2019. [En línea]. Available: https://www.ecured.cu/FPDF.

Información adicional

Como citar: Chamba, D. (2021). Desarrollo de una Aplicación Web para el Control de Asistencia del Personal Docente y Administrativo del IST Primero De Mayo. Ecuadorian Science Journal, 5(3), 112-124. DOI: https://doi.org/10.46480/esj.5.3.148

Modelo de publicación sin fines de lucro para conservar la naturaleza académica y abierta de la comunicación científica
HTML generado a partir de XML-JATS4R