DESARROLLO DE MEJORAS EN LA APLICACIÓN WEB PARA GESTIÓN DE

GIMNASIOS WODAPP DE LA EMPRESA BINLAB.SAS

JHONATAN AMADO TREJOS MORALES

1004801778

CARLOS MARIO MEDINA OTÁLVARO

INGENIERO DE SISTEMAS Y COMPUTACIÓN

URIEL SANDOVAL CASAS

GERENTE DEL PROYECTO WODAPP

UNIVERSIDAD CATÓLICA DE PEREIRA

FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍAS
PROGRAMA DE INGENIERÍA DE SISTEMAS Y TELECOMUNICACIONES
DEPARTAMENTO DE PRÁCTICAS ACADÉMICAS
QUINCHÍA RISARALDA
7/04/2021
 CONTENIDO
Contenido................................................................................................................................ 2

1. PRESENTACIÓN DEL ESCENARIO DE PRÁCTICA................................................ 6

2. DIAGNÓSTICO DEL ÁREA DE INTERVENCIÓN O IDENTIFICACIÓN DE LAS

NECESIDADES ..................................................................................................................... 9

3. OBJETIVO .................................................................................................................... 10

3.2 Objetivos específicos .................................................................................................. 10

4. ACTIVIDADES REALIZADAS Y/O PRODUCTOS ENTREGADOS ......................... 11

4.1 Mejora de filtro de transacciones listar ....................................................................... 11

4.2 Mejora de reportes. ..................................................................................................... 11

4.3 Ocultar modulo reporte Covid. ................................................................................... 12

4.4 Campo opcional en Ejercicios..................................................................................... 13

4.5 Corrección de campo en la lista .................................................................................. 13

4.6 Consentimiento informado.......................................................................................... 13

4.7 Mejora en creación de wods........................................................................................ 14

4.8 Eliminar reservas caducadas ....................................................................................... 15

4.9 Perfil del atleta ............................................................................................................ 16

4.10 Otras Actividades ...................................................................................................... 18

5. METODOLOGÍAS, TÉCNICAS O HERRAMIENTAS UTILIZADAS ..................... 19

5.1 Docker ......................................................................................................................... 19

5.3 Php .............................................................................................................................. 20

5.4 Cake Php ..................................................................................................................... 21

5.5 JavaScript .................................................................................................................... 21

5.6 JQuery ......................................................................................................................... 21

5.7 MySQL........................................................................................................................ 22

2
6. CONCLUSIONES......................................................................................................... 23

7. RECOMENDACIONES ............................................................................................... 24

8. APÉNDICES ................................................................................................................. 25

3
LISTA DE ILUSTRACIONES

Ilustración 1 Pagina WodApp................................................................................................. 6

Ilustración 2 Vista tarea 1 WodApp ..................................................................................... 11
Ilustración 3 Vista tarea 2 WodApp captura......................................................................... 12
Ilustración 4 Vista tarea Consentimiento informado ............................................................ 14
Ilustración 5 Tarea botón agregar y eliminar ejercicio ......................................................... 15
Ilustración 6 Reservas caducadas en el día ........................................................................... 16
Ilustración 7 Perfíl de atleta 2 ............................................................................................... 17
Ilustración 8 Perfil de usuario 1 ............................................................................................ 17
Ilustración 9 Captura redmine .............................................................................................. 25

4
 LISTA DE APÉNDICES

Apéndice 1……………………………………………………………………………25

5
 1. PRESENTACIÓN DEL ESCENARIO DE PRÁCTICA

Binlab.S.A.S es una empresa registrada desde el 02 de septiembre del 2018 conformada

gracias a la unión de un grupo de compañeros que decidieron emprender e iniciar a prestar
sus propios servicios y vender sus propios productos de tecnología. Conformada por 4
compañeros con gran experiencia en desarrollo de software y hardware, conformando entre
ellos varias décadas de experiencia.

Ofrece servicios en desarrollo de software para diversos clientes y con distintas soluciones
como WodApp para la gestión y administración de gimnasios, Agroexport herramienta de
administración para plantas de procesamiento y empaque de aguacate hass para exportación,
sensores meteorológicos y GPS.

El área en la cual el practicante desarrolló sus actividades fue en el aplicativo web WodApp,
este es un sistema web y móvil con el que se pueden administrar gimnasios, gestionar
reservas e información de clientes de un gimnasio en particular.

Ilustración 1 Pagina WodApp

(Tomado de (Binlab.sas, s.f.))

6
WodApp ofrece servicios como:

Reserva de clases: Permite a los usuarios ver la disponibilidad de clases y agendar en el

horario que desee, con ello el box (gimnasio de crossfit) garantiza el control de aforo
permitido por el Ministerio de Salud de Colombia.

Métricas y reportes: WodApp posee un módulo especializado de reportes que brinda

métricas donde se puede orientar un box o centro de entrenamiento en función de objetivos
claros que permitan mejorar su desempeño.

Tablero de control: El tablero digital permite proyectar los entrenamientos, wod del día con
sus respectivos puntajes

Coach manager: Permite al administrador y entrenadores crear los wods (programas de

entrenamiento) y las diferentes programaciones.

Registro de valoraciones: se puede registrar y tener el control de la evolución de la

composición corporal.

Además ofrece beneficios a sus clientes como:

 Administración de usuarios
 Registro de planes por usuario
 Listado de ejercicios por usuario
 Aplicación móvil para usuarios
 Creación y programación de wods
 Reporte de pagos y asistencia de usuarios
 Prueba gratis de 60 días

WodApp está construida en el lenguaje de programación Php con el framework CakePhp

versión 2.0, también utiliza otras tecnologías como JavaScript y Css para la mejora de
procesos en la capa visual del aplicativo y cuenta con una base de datos en mySQL.

7
Por otro lado la empresa Binlab.sas cuenta con otra plataforma diferente denominada
“Redmine” con la cual se asignan tareas a los empleados y es allí donde se describe y evalúa
el progreso de las aplicaciones.

8
 2. DIAGNÓSTICO DEL ÁREA DE INTERVENCIÓN O IDENTIFICACIÓN
DE LAS NECESIDADES

Para el desarrollo de este punto es necesario aclarar que desde el inicio de la práctica hasta
la fecha el estudiante fue asignado al proyecto WodApp web, proyecto que está en
funcionamiento desde hace varios años. Este proyecto fue construido en el lenguaje Php con
el framework CakePhp 2.0, también se emplearon otros lenguajes como JavaScript y
tecnologías como Css , JQuery, Bootstrap, mySQL para base de datos, Docker y GitHub para
el trabajo en equipo con los desarrolladores.

En este proyecto se tienen planteadas varias mejoras en las cuales el practicante ha sido
asignado como colaborador y desarrollador de algunas de ellas: implementación de políticas
de privacidad, filtros de búsqueda de transacciones, perfil del atleta entre otros. Actualme nte
el desarrollo del módulo del perfil del atleta es uno de las actividades más importantes del
proyecto WodApp para el practicante, ya que con este se pretende conectar más a los usuarios
con su gimnasio, de modo que cada usuario del aplicativo lleve un registro de su progreso
dentro del gimnasio.

En el proceso de mejoramiento de la aplicación, el área de soporte y producción recibe los

requerimientos de los clientes (gimnasios) donde se solicitan mejoras o modificaciones al
sistema que luego son enviadas al equipo de desarrollo y asignadas a un desarrollador. La
empresa también ha visto la necesidad de construir nuevas funcionalidades dentro de la
aplicación, no solamente las solicitadas por los clientes.

9
 3. OBJETIVO

Apoyar el proceso de diseño, desarrollo y despliegue de mejoras y nuevas

funcionalidades de la plataforma WodApp para construir un sistema más eficie nte,
actualizado y agradable a los usuarios.

3.2 Objetivos específicos

 Desarrollar mejoras continuas para la interfaz de usuarios.

 Construir nuevas funcionalidades en el panel administrativo de la aplicación
WodApp.

10
 4. ACTIVIDADES REALIZADAS Y/O PRODUCTOS ENTREGADOS

4.1 Mejora de filtro de transacciones listar

Se requería un filtro en el módulo transacciones, listar donde pudieran seleccionar el editado

por y creado por. En estos filtros se buscará por grupo administrador ya que este es el único
con acceso a creación y edición de transacciones.

Esto se desarrolló con el fin de disminuir el tiempo empleado en buscar información en las
transacciones, el filtro busca en la base de datos quién modificó y creó una transacción,
desde la vista el usuario puede elegir un nombre desde una lista despegable.

Ilustración 2 Vista tarea 1 WodApp

(Autoría propia).

11
4.2 mejora de reportes.

En el módulo reportes, usuarios al día y usuarios sin pagar se desea agregar el campo teléfono.

Se desarrollaron mejoras en el controlador y vista de reportes para traer la información del

teléfono desde la base de datos.

Ilustración 3 Vista tarea 2 WodApp captura

(Autoría propia).

4.3 Ocultar módulo reporte Covid.

Se deseaba ocultar de las opciones el reporte covid del módulo reportes, ya que, este ya no
tiene funcionalidad en el sistema.
Se modificó la vista del cliente ocultado la ruta del reporte de covid y la vista.

12
4.4 Campo opcional en Ejercicios

En el módulo agregar ejercicios se deseaba que el campo (Enlace de Video (URL) de

Ejercicio *), fuese opcional y no un campo obligatorio.

Se realizó con el fin de crear más ejercicios sin necesidad de siempre subir un video
explicativo de estos.

4.5 Corrección de campo en la lista

En el módulo transacciones, el campo total clases contratadas, no estaba mostrando el valor

correcto, ya que este está mostrando el número de días a facturar, lo cual causa confusión en
las capacitaciones con los usuarios nuevos.

Se tuvo que traer el valor de clases contratadas y excluir el número de días a facturar desde
la base de datos, se modificaron el controlador y el modelo.

4.6 Consentimiento informado.

Los administradores desean que en el registro de usuarios: el registro completo como el de

cortesía tenga un documento de consentimiento informado que deben aceptar para confir mar
su registro al box. Si no acepta las condiciones del documento el sistema no los dejara
registrar.

Se construyó una vista modal con Bootstrap 4 y html5 para hacer un check-box y un enlace
con los cuales ver y aceptar los términos de registro, la validación se realizó a nivel de front -
end y back-end.

Cada vez que un usuario se registre al box tiene que aceptar los términos de uso
(consentimiento informado).

13
Ilustración 4 Vista tarea Consentimiento informado

(Autoría propia).

4.7 Mejora en creación de wods

Se deseaba implementar una mejora donde un usuario administrador pudiera añadir y

eliminar ejercicios según su conveniencia, la tarea se fundamentaba en crear un formular io
cada vez que el usuario hiciera clic en un botón. De igual forma que se eliminara un
formulario cada vez que se hiciera clic en el botón para eliminar perteneciente a ese
formulario.

Esta mejora se desarrolló con el uso de JQuery y Php.

14
 Ilustración 5 Tarea botón agregar y eliminar ejercicio

(Autoría propia).

4.8 Eliminar reservas caducadas

El administrador necesitaba eliminar reservas hechas por los usuarios de clases pasadas, esto
con el fin de que los usuarios puedan reservar clase durante el día.

Esto se realizó en el módulo Herramientas, Programar clase a usuarios. En este módulo se

listan las reservas en estado reservado en hora en curso, por lo cual no muestra reservas de
clases pasadas.

Se requería que en ese módulo se liste en el día actual hacia adelante, para que se muestren
las reservas del día en estado reservado, así el administrador puede eliminar una reserva del
día aunque ya haya pasado.

15
Ilustración 6 Reservas caducadas en el día

(Autoría propia).

4.9 Perfil del atleta

Se requería implementar una mejora para los usuarios del gimnasio, consistía en crear una
tarjeta donde este pudiese visualizar su fotografía y la del box, además de enlazar esta tarjeta
a una nueva vista llamada perfil del atleta donde el cliente vería una segunda imagen (avatar)
e información acerca de su peso, estatura y edad.

Esto se construyó con HTML Php y Css.

16
Ilustración 8 Perfil de usuario 1

(Autoría propia).

Ilustración 7Pperfil de atleta 2

17
(Autoría propia).

4.10 Otras actividades

Además de las actividades consignadas anteriormente se realizaron otras mejoras como

actualizar el semáforo de usuarios, módulo de registrar tiempos a usuarios, creación del modo
visualizar contraseña en ingresar, correcciones en la exportación de formatos Excel, lista de
usuarios por clase programada y seleccionada entre otras.

18
 5. METODOLOGÍAS, TÉCNICAS O HERRAMIENTAS UTILIZADAS

Para el desarrollo de las actividades propuestas y el cumplimiento de los objetivos, para el

practicante fue necesario ampliar conocimientos previos acerca del uso e implementación de
algunas tecnologías, además de aprender algunas que no conocía y el continuo aprendizaje
de las mismas.

5.1 Docker

Inicialmente se utilizaron ambientes tecnológicos como Docker: esta es una aplicación de

código abierto que permite utilizar un sistema de contenedores en Linux, los cuales son
servicios de máquinas virtuales que son muy livianas, modulares y fáciles de utilizar.

Docker ofrece un proceso de implementación basado en imágenes las cuales funcionan como
un sistema operativo que ejecuta procesos y aplicaciones independientemente de los demás,
cada contenedor contiene una imagen de un sistema operativo que puede correr aplicacio nes,
las imágenes proporcionan una plantilla que se puede utilizar para la creación de otros
contenedores lo que garantiza que una aplicación se ejecute de igual forma en varios de estos
de las mismas características, evitando que en un computador de un desarrollar funcione y
en otro no.

Esto se utilizó en este proyecto para la instalación del aplicativo WodApp de manera local,
para garantizar la comunicación con los demás proyectos de otros desarrolladores y que en
la máquina del practicante funcionara de manera idéntica al ambiente de los demás y el de
producción.

Para su utilización el practicante fue asignado a aprender cómo se utilizaba con el fin de que
instalara el proyecto en un contenedor existente el cual era obligatorio copiar, este proceso
se hizo con la ayuda de la documentación oficial de la tecnología y un curso en YouTube
sobre la misma.

19
Git y GitHub.

Git es un software de control de versiones diseñado para facilitar el desarrollo y

mantenimiento de aplicaciones es una gran herramienta para el trabajo individual y
colaborativo funciona guardando un registro de todos los cambios que sufra un archivo
dentro o fuera de un proyecto vinculado a Git.

Git toma una imagen instantánea de cómo se encuentra un archivo hasta cierto momento del
tiempo determinado por el usuario, esta imagen se guarda y se le asigna un código y una
descripción escrita por el programador, después de seguir programando y modifica ndo
archivos Git sigue los mismos pasos pero con nombres diferentes, es así como se puede
volver a un instante de tiempo en el código solamente recurriendo a el archivo que contiene
una versión anterior.

Con Git se pueden crear y trabajar en ramas copias idénticas del proyecto original suyos
cambios solo afectan a la copia y no a la original a menos que el usuario lo desee, cada
programador puede hacer sus propias copias y fusionar sus ramas.

Este sistema es utilizado en el proyecto WodApp para el trabajo colaborativo de todos los
programadores, esto se hace mediante el uso de GitHub que es una herramienta para
almacenar en la nube todos los cambios realizados con Git dentro de un repositorio remoto.

El practicante ya tenía conocimientos previos en esta tecnología, sin embargo durante el

proceso de realización de actividades surgían algunos problemas de compatibilidad dentro
del mismo Git, por lo que hubo un constante aprendizaje sobre esta tecnológica, cada
actividad realizada requería crear una nueva copia del proyecto para trabajar en ella con el
código de la actividad como nombre, diariamente se subían los cambios al repositorio y al
terminar la actividad se revisaba desde soporte, se realizaban correcciones y finalmente se
combinaba con la rama original.

5.3 Php

Es un lenguaje de programación de uso web del lado del servidor cuenta con características
para un desarrollo web dinámico y puede ser incrustado en HTML. La aplicación WodApp

20
está construida en este lenguaje y es utilizado para construir consultas, generar HTML,
validar formularios y conectar con bases de datos.

5.4 Cake Php

Es un framework de código abierto rápido para Php, fue construido para desarrollar
aplicaciones web con la arquitectura MVC, este es el framework sobre el cual está escrito
todo el código de la aplicación WodApp. Para el practicante fue necesario aprender desde
cero como era el funcionamiento de este framework, para ello se realizaron consultas rápidas
a la documentación, se construyó un blog para practicar el framework y se comenzó a realizar
un curso sobre el mismo, con los que se aprendieron aplicaciones básicas y se pudo empezar
a trabajar en la aplicación.

5.5 JavaScript

Es un lenguaje de programación diseñado inicialmente para trabajo en el front-end de

aplicaciones web, aunque después fue actualizado para funcionar en el back-end con node.js,
este lenguaje es utilizado para hacer aplicaciones web dinámicas, mejorar funcionalidad y
diseño de objetos HTML y mejorar la experiencia de usuario. En WodApp fue utilizada por
el practicante para crear funcionalidad en algunas actividades que se ejecutan en la vista e
interactúan con los controladores, dado que Php y JavaScript son lenguajes diferentes fue
necesario conectarlos con el uso del formato Json.

5.6 JQuery

Es un framework que sirve como ayudante para escribir JavaScript, para ahorrar tiempo de
desarrollo este facilita la animación de componentes, las peticiones AJAX y la reutilizac ió n
de código además de ahorrar algunas líneas de código en funciones. Durante la práctica se
realizaron algunas funcionalidades con esta herramienta para ello, dado que el practicante no
conocía esta tecnología a profundidad se realizaban consultas a otros desarrolladores con
experiencia dentro de la empresa.

21
5.7 MySQL

MySQL es un sistema gestor de bases de datos relacionales, es intuitivo y fácil de utilizar, en

WodApp se emplea este para almacenar los datos necesarios que componen la lógica del
negocio.

22
 6. CONCLUSIONES

-El proceso de práctica fue muy importante en cuanto al nivel académico debido a que con
este se profundizaron conocimientos previos los cuales fueron aplicados en las actividades
realizadas.

-A nivel laboral el practicante aprendió a desenvolverse en un ambiente correspondiente a su

área de conocimiento, siendo este un proceso que brindó una experiencia gratificante y con
un constante aprendizaje.

- Personalmente se descubrió que es importante el constante aprender mucho más sobre el

desarrollo de software, tanto en aspectos técnicos de desarrollo, como de arquitectura de
software.

- La universidad debe preocuparse más por garantizar que sus estudiantes de ingeniería de
sistemas y telecomunicaciones terminen su proceso educativo sabiendo al menos un lenguaje
de programación por completo, dado que si bien los estudiantes cursan varias materias
relacionadas con el tema, no terminan siendo expertos programadores ni conociendo a
profundidad las tecnologías.

-Es importante que dentro del área académica se construyan proyectos interesantes que
ayuden al estudiante a comprender mejor como construir software.

- Se considera que el escenario de práctica fue excepcional y de excelente calidad, ya que

cuenta con profesionales muy capacitaos en cada una de sus áreas, dispuestos a colaborar con
el proceso de aprendizaje del practicante. El área de desarrollo de actividades fue adecuada
al sector de desempeño del practicante y cumplió con las expectativas del mismo.

23
 7. RECOMENDACIONES

- La poca experiencia como desarrollador hizo que el practicante se tardara un tiempo

mayor al estimado por la empresa para cada actividad, es recomendable seguir
practicando y seguir formándose en el proceso de construcción de software.

- Respecto a una actividad realizada, relacionada con el sistema de login de usuarios y

el consentimiento informado cuyo objetivo era lograr que los usuarios que no habían
aceptado los términos y condiciones lo hicieran, se considera que después de que
todos lo hayan realizado se suprima esta funcionalidad ya que con esto se mejora el
tiempo de carga de la aplicación.

- Se considera necesario renderizar todo el código, quitar muchos comentarios

existentes y depurar la base de datos ya que existen columnas en algunas tablas que
no son utilizadas y que hacen lenta la aplicación.

- Se recomienda al escenario de práctica brindar un asesoramiento previo al practicante

para orientarlo y ubicarlo en el proceso y en sus actividades.

24
 8. APÉNDICES

Para la documentación de las actividades realizadas por el practicante se tuvieron en cuenta

aquellas que estaban planteadas en el aplicativo redmine donde se asignaron tareas que fueron
siendo cumplidas y entregadas en ciertos periodos de tiempo estipulados, a continuac ió n
imagen de actividades en el aplicativo mencionado.

Ilustración 9 Captura redmine

(Autoría propia).

25