Tecnológico Nacional de México

Campus Querétaro

Reporte Final de Residencia Profesional

SISTEMA PARA CONTROL DE EJECUCIÓN EN PUNTO DE

VENTA, MÓDULOS 2, 6 Y 9

Que presenta:

Juan Daniel García Ramírez

Estudiante de la carrera:

Ingeniería en Sistemas Computacionales

Asesor:

MARIA LUISA MONTES ALMANZA

Periodo:

Enero-Junio 2020

i
ii
Índice general
Índice general iii
Índice de figuras v
Introducción 1
Capítulo 1. Generalidades de la empresa 1
1.1 Datos generales 1
1.1.1 Nombre 1
1.1.2 Ubicación 2
1.1.3 Giro 2
1.1.4 Tamaño 2
1.1.5 Rama Empresa de servicio privada. 2
1.2 Reseña histórica 2
1.3 Organigrama de la empresa 3
1.4 Misión, visión y política 4
1.4.1 Misión 4
1.4.2 Visión 4
1.4.3 Política 5
1.5 Principales productos y clientes 5
1.5.1 Storecheck Mobile (Sistema de auditoría y ejecución en punto de venta) 5
1.5.2 Retail Beat 6
1.5.3 Clientes 7
1.6 Premios y certificaciones 7
1.7 Caracterización del área en que se participó 7
1.7.1 Descripción del área 7
1.7.2 Actividades del área 8
1.7.3 Funciones y ubicación del residente 9
Capítulo 2. Planteamiento del problema 9
2.1 Antecedentes y definición del problema para la realización del proyecto de
residencia. 9
2.2 Objetivos 10
2.2.1 Generales 10
2.2.2 Específicos 11
2.3 Justificación 11
2.4 Alcance 12
Capítulo 3. Marco Teórico 13
3.1 Estado actual y necesidades del Retail 13
3.1.1 ¿Qué es el Retail? 13
3.1.2 Importancia del Retail 13
3.1.3 Factores clave del Retail 14
3.1.4 Evolución de la industria del Retail 14

iii
 3.2 Técnicas y tecnologías 15
3.2.1 Conceptos generales 15
3.2.2 Lenguajes de programación 16
3.2.3 Sistema de gestión de base de datos 17
3.2.4 Lenguaje de marcado 17
3.2.5 Lenguaje de diseño 18
3.2.6 Frameworks 18
3.2.7 Herramientas 20
3.3 Metodología 22
3.3.1 Scrum 22
3.4 Estándares y buenas prácticas de programación 23
3.4.1 Modelo MVC 23
3.4.2 Practicas de “código limpio” 25
Capítulo 4. Desarrollo del proyecto 27
4.1 Creación de tareas 27
4.1.1 Recolección y análisis de los requerimientos 27
4.1.2 Estructura de base de datos 30
4.1.3 Nueva tarea 31
4.1.4 Acciones 33
4.1.5 Alcance de la tarea 35
4.1.6 Condicionales entre acciones 36
4.1.7 Asociación a árbol de productos 37
4.2 Administración de tareas 39
4.2.1 Recolección de datos y análisis de requerimientos 39
4.2.2 Listado de tareas 40
4.2.3 Activar - desactivar tarea 41
4.2.4 Visualización y nueva versión 41
4.3 Tareas foco 42
4.3.2 Base de datos 44
4.3.3 Formulario de alerta 45
4.3.4 Reporte de tareas foco vigentes 48
4.3.5 Envíos de alerta y comunicación móvil 49
4.4 Despliegue y pruebas de entorno 51
Capítulo 5. Resultados 52
Capítulo 6. Competencias desarrolladas y/o aplicadas 53
6.1 Competencias específicas 53
6.2 Competencias genéricas 54
Conclusiones y recomendaciones 54
Conclusiones 54
Recomendaciones 55
Referencias bibliográficas y virtuales 56

iv
Índice de figuras
Ilustración 1. Organigrama (1/2) ........................................................................................ 3
Ilustración 2. Organigrama (2/2) ........................................................................................ 4
Ilustración 3 TechMaG Storecheck ........................................................................................ 7
Ilustración 4 Tipos de acciones ....................................................................................... 28
Ilustración 5 Asociación a árbol de productos............................................................... 29
Ilustración 6 Jerarquía de condicionales ........................................................................ 30
Ilustración 7 Nueva tarea .................................................................................................. 31
Ilustración 8 Modal tipos de tareas ................................................................................. 32
Ilustración 9 Interfaz de tarea .......................................................................................... 33
Ilustración 10 Formulario de acciones ............................................................................ 34
Ilustración 11 Tipos de acciones ..................................................................................... 35
Ilustración 12 Alcance de tarea ....................................................................................... 36
Ilustración 13 Condicionales ............................................................................................ 37
Ilustración 14 Selector nivel de productos ..................................................................... 38
Ilustración 15 Selección de elementos ........................................................................... 39
Ilustración 16 Tabla de tareas ......................................................................................... 41
Ilustración 17 Visualización de tarea .............................................................................. 42
Ilustración 18 Tarea predeterminada .............................................................................. 43
Ilustración 19 Selector de tarea foco .............................................................................. 46
Ilustración 20 Modal venta cero....................................................................................... 47
Ilustración 21 Vinculo de export ...................................................................................... 48
Ilustración 22 Export de venta cero vigentes ................................................................ 49

v
Introducción
Hoy en día las herramientas de desarrollo web representan una gran demanda en
el ámbito laboral del ingeniero en sistemas computaciones. Cada día son mas las
empresas que requieren ingenieros y FullStack developers, capaces de programar
y desarrollar tanto el backend como el frontend de un sistema. En esta practica de
residencia no fue la excepción ya que se desarrollo desde la base de datos hasta la
interfaz de usuario final.

El desarrollo de un sistema web dedicado al retail representa un gran reto para la

tecnología actual, ya que es un proyecto con muchas de las tendencias tecnológicas
de desarrollo actual como lo son: la nube, ciencia de datos, y minería de datos, entre
otros. Lo cual ayudo al practicante a conocer las competencias necesarias actuales
en el ámbito laboral y el rumbo que debe seguir su carrera.

Sin duda una práctica que enriquece el ámbito del ingeniero, con ejemplos reales
del desarrollo de sistemas web en producción y aplicando las mejores practicas y
patrones de diseño para el desarrollo de este.

La metodología SCRUM también desarrolla un papel importante para el proyecto de

residencia, ya que, con la ayuda de SCRUM se logro cumplir con los objetivos
previstos desde el comienzo del desarrollo y sintetizando el objetivo final en
pequeños objetivos que eran alcanzados a lo largo de los sprint, para así poder
administrar de mejor manera el tiempo y tener un desarrollo progresivo del sistema.

Sin duda una residencia enriquecedora que aporta bastante conocimiento y

practica al practicante para estar en el ámbito laboral y desempeñar sus labores
como futuro profesionista.

Capítulo 1. Generalidades de la empresa

1.1 Datos generales

1.1.1 Nombre
STORECHECK S.A. DE C.V.

1
1.1.2 Ubicación
ACCESO A # 110, PARQUE INDUSTRIAL JURICA

1.1.3 Giro
Tecnología de investigación del retail.

1.1.4 Tamaño
Mediana

1.1.5 Rama
Empresa de servicio privada.

1.2 Reseña histórica

Storecheck se fundó en 2003 con el firme objetivo de ser el vínculo perfecto entre
las marcas de consumo, los retailers y el consumidor.

Con más de 12 años de experiencia trabajando con las mejores marcas a nivel
mundial ha permitido que Storecheck cree metodologías confiables y herramientas
tecnológicas eficientes y flexibles para ofrecer soluciones especializadas,
adaptadas a las necesidades sus clientes.

Hoy Storecheck se ha logrado consolidar en el sector como una empresa líder en la

obtención, almacenamiento y análisis de datos, generando conocimiento de alto
valor estratégico para los clientes.

Su equipo está formado por más de 200 colaboradores, desde gerentes ejecutivos,
especialistas en reportes de datos, equipo de soporte, estadísticos, desarrolladores,

2
programadores, coordinadores y evaluadores de campo, Todos comprometidos con
una visión de ejecucion perfecta para los clientes y partners en diversos canales de
distribución.

Hoy en día Storecheck tiene el sistema más poderoso para auditar y mejorar la
ejecución en punto de venta de las marcas, administración y análisis del POS Data
(Ventas e inventario) y servicios de gestión de proyectos que simplifican el análisis
y empoderan al personal de campo.

1.3 Organigrama de la empresa

Ilustración 1. Organigrama (1/2)

3
Ilustración 2. Organigrama (2/2)

1.4 Misión, visión y política

1.4.1 Misión
Crear soluciones de software que Encanten tanto al cliente interno como externo,
asegurando que el producto cumpla las expectativas del consejo, las necesidades
del mercado y de Nuestros Clientes internos. Innovando de forma permanente para
asegurar la mejor experiencia convirtiendo nuestro producto en el referente y Líder
en la Industria.

1.4.2 Visión
Ser la plataforma que redefina la colaboración, y ejecución para los jugadores del
ecosistema retail. Y la forma cómo capitalizan las oportunidades.

4
1.4.3 Política
Entre su política tiene 4 conceptos principales:
- Confianza: Construir relaciones a largo plazo con las marcas más
importantes de la industria. A favor de la transparencia y la comunicación
clara y directa a todos los niveles.
- Innovación: Identificar las necesidades del mercado y convertirlas en
soluciones globales funcionales. Analizando cada proyecto de manera
independiente y adaptando a sus necesidades. Intentando hacer beneficiar
al cliente y así tener un modelo “genérico” que se adapta lo mas posible al
cliente.
- Inteligencia: Procesar de manera analítica la información generando
indicadores de valor. Desarrollando una metodología sustentada, ordenada
y probada.
- Eficiencia: Optimización de recursos e involucramiento total en cada
proyecto. Ningún cliente es pequeño, cada proyecto es una oportunidad de
generar un nuevo caso de éxito a través de una comunicación clara y en los
términos del cliente.

1.5 Principales productos y clientes

Storecheck ofrece soluciones con tecnología y servicios para auditar y mejorar la
ejecución de marcas.

1.5.1 Storecheck Mobile (Sistema de auditoría y ejecución en

punto de venta)
Evalúa y controla la estrategia de ejecución de marcas en tienda. Esta aplicación
mobile controla el GPS, el reloj y los metadatos de las foto-evidencias logrando un

5
control de asistencia de promotores confiable y análisis de tiempos y movimientos
de promotores seguro y efectivo.

Se adapta a la metodología del proyecto del cliente generando plantillas de captura

adhoc, facilitando la captura y evaluación del cumplimiento de cada tarea y de la
estrategia de ejecución en punto de venta.

El cliente puede definir objetivos de cada estrategia de shopper marketing, ya sea

un objetivo de precio o un planograma complejo, así como niveles de inventario
deseados en tienda o cumplimiento de tareas que se pueden definir de forma
general o específica a cada punto de venta.

Se puede hacer en formato colaborativo, autogestionado o de manera asistida a

través de su soporte equipo de soporte.

1.5.2 Retail Beat

Retail Beat es el nombre de la herramienta de armonización de datos. A través de
ella, los robots se conectan de forma programada a las plataformas de los retailers
para proveedores, generando y extrayendo archivos que contienen datos de
inventario, sell-out y tubería de pedidos, entre otros.

Convierte la información en acciones estratégicas que se traducen en ventajas

competitivas para la marca a través de la plataforma de armonización de datos de
inventario y sell-out.

Homologación, almacenamiento y transformación de datos. La interface permite

traducir los datos recibidos en el código de lenguaje de la empresa. Toda la
información extraída se almacena en servidores seguros en la nube. El modelo de

6
base de datos permite el almacenamiento de toda la información histórica que se
requiere para analizar las tendencias de consumo.

1.5.3 Clientes
Actualmente Storecheck trabaja con más de 90 marcas y más de 18 mil usuarios.
Teniendo como principales clientes a marcas como: GrupoMap, Unilever, Bayes,
Pernod Ricard, Mead Johnson, Beiersdorf, Samsung, Walmart, Jose Cuervo,
Pepsico, Bachoco, Revlon, Mattel, Bonafont, Spectrum, Coca-Cola, Pfizer, entre
otros.

1.6 Premios y certificaciones

En enero del 2020 una de las revistas más
importantes sobre tecnología en estados unidos,
MYTECHMAG, reconoció a la empresa
Storecheck S.A. de C.V. como una de las mejores
20 empresas dedicadas a la tecnología del retail
Ilustración 3 TechMaG Storecheck
en el mundo.

1.7 Caracterización del área en que se participó

1.7.1 Descripción del área

Innovación y desarrollo - equipo web
Innovación y desarrollo es un área dedicada al desarrollo de la nueva versión del
sistema de software para la empresa Storecheck S.A. de C.V., utilizando los nuevos
patrones de arquitectura de software como el cloud y los microservicios, junto con
nuevas tecnología y lenguajes como Python y Java para la mejora y eficiencia del
sistema, aprovechando las bondades y utilidades de las nuevas tecnologías.

7
 • El área implementa, también, un desarrollo basado en la metodología agile
Scrum, para así, tener un desarrollo más eficiente y con un tiempo de
implementación menor.

1.7.2 Actividades del área

El área de innovación y desarrollo se dedica a mejorar y agilizar la implementación
del sistema ya existente en Storecheck. Dichas tareas se pueden describir en:
- Desarrollo del nuevo sistema web: se genera un “remake” de los productos
utilizando nuevos lenguajes y tecnologías, aprovechando el cloud y los
sistemas basados en microservicios. Con una infraestructura implementada
en amazon web service y con apoyo de frameworks como “Grails”, un
framework especializado en la creación de sistemas Web bajo el esquema
MVC (Modelo-Vista-Controlador).
- Minería de datos: En la industria del retail es de suma importancia los datos
diarios que genera el cliente y los productos. Por eso el área se enfoca en la
recaudación de estos datos por medio métodos como el Web Scraping con
lenguajes como Python y Java.
- Aplicación móvil: El área también se dedica al desarrollo de la nueva
aplicación para la ejecución en punto de venta y auditorías. Enfocado a la
mejora. Desarrollada de manera nativa para Android y de manera hibrida
para IOS.
- Reporte de datos: Como parte primordial para la empresa es la traducción y
presentación de datos al cliente. Generando reportes entendibles al cliente y
utilizando la ciencia de datos para limpiar, organizar y crear datos útiles con
puedan ser utilizados para la evaluación del estado de un producto o marca
y su mejora.

8
1.7.3 Funciones y ubicación del residente
Como parte del equipo de desarrollo e innovación es necesario siempre manteneren
la mente la necesidad de mejorar el desarrollo que se tiene previamente en
Storecheck.

El residente se encuentra en la tarea del nuevo desarrollo de sistema web. En donde

crea los módulos de captura, reporte y tareas automatizadas.

Con actividades que van desde la definición y análisis del módulo. Estructuración y
creación de la base de datos, programación de backend, creación de servicios Rest,
diseño y programación del frontend, así como, las pruebas necesarias para que el
producto salga a un entorno de preproducción. Generando así, un desarrollo
FullStack del módulo.

Capítulo 2. Planteamiento del problema

2.1 Antecedentes y definición del problema para

la realización del proyecto de residencia.
Storecheck cuenta ya con más de 12 años de experiencia en el ámbito del retail,
trabajando con las mejores marcas a nivel mundial, implementando metodologías
confiables y herramientas tecnológicas eficientes para solucionar problemas
especializados y adaptados a las necesidades del cliente.

A pesar de su experiencia, la plataforma para ejecución de punto de venta que opera

en Storecheck se inició hace 9 años, por lo que, la tecnología con la que fue hecha

9
es obsoleta y con una difícil escalabilidad, necesidad que debe resolverse debido a
la gran demanda del mercado.

2.2 Objetivos

2.2.1 Generales
1. Módulo 2: Creación de tareas
Sistema para la gestión de tareas en el área de campo. Un administrador deberá
poder generar tareas simples y tareas relacionadas a productos que después serán
enviadas a la gente en campo que realizara dichas tareas como encuestas,
auditorias, inventarios etc.

2. Módulo 6: Administración de tareas

El administrador deberá poder ver en pantalla las tareas creadas, así como poder
activar, desactivar o clonar dichas tareas. Además se deberá ver información
esencial de cada tarea.

3. Módulo 9: Tareas foco

Una vez que el administrador pueda generar tareas para el personal de campo (ej:
promotores, supervisores), es de suma importancia que se alerte al usuario sobre
las tareas más importantes, dichas tareas son evaluadas debido a la importancia
que genera para el cliente, por ejemplo, aquellas que hagan perder más ventas.

4. Seguimiento y aprendizaje de metodología ágil (SCRUM), formas normales para

base de datos, desarrollo de sistema siguiendo modelo MVC, estándares de
visualización (UX/UI) y generación de código limpio.

10
2.2.2 Específicos
1.- Se utilizarán las herramientas de workbench para el modelado de la base de
datos necesaria para el almacenamiento de datos de las tareas, siguiendo las
formas normales correspondientes.

2.- Se desarrollará el sistema en lenguaje de programación java y groovy para una

sintaxis mayor estructurada y GRAILS para la generación del servidor web, un
framework basado en spring boot lo cual permite la utilización de gradle para el
manejo simple de archivos WAR.

3.- Se utilizarán frameworks de Frontend para la visuzalización estandarizada y

responsiva de las pantallas por medio de cualquier navegador. Los framework a
utilizar serán JQuery para javascript y Boostrap para CSS

4.- Se utilizará el gestor de base de datos postgresql para el almacenamiento de los

datos Haciendo pruebas en local y después pasando por los entornos de
integración, preproducción y finalmente producción. Todos siendo servidores en la
nube de plataformas como AWS y Azure.

2.3 Justificación
El desarrollo de la plataforma actual de Storecheck se inició hace 9 años, por lo
tanto, el modelo, las tecnologías y la infraestructura se volvieron obsoletos y poco
escalables, añadido a esto la evolución del mercado a influenciado para que se
decidiera ofrecer una nueva plataforma a los clientes orientada a las tecnologías
actuales y aprovechando lo que nos ofrece el Cloud y DevOps.

11
De acuerdo con un estudio realizado por GS1 y Psyma, la perspectiva del
crecimiento del retail en México se mantenía estable e incluso el 72% de las
empresas encuestadas percibían un crecimiento durante 2019. Por lo que la
industria del retail se vuelve cada día mas demandante y con una competencia cada
vez mayor.

De acuerdo con el sitio web de la ANTAD (Asociación Nacional de Tiendas de

Autoservicio y Departamentales), durante todos los meses de 2019 ha habido un
crecimiento en ventas, tanto a tiendas iguales como a tiendas totales, lo que
confirma esta perspectiva de crecimiento.

Siendo entonces Storecheck una empresa dedicada al servicio de las empresas del
retail es necesario que se implementen tecnologías que soporten tanto la demanda
actual como la demanda futura de servicios.

2.4 Alcance
El proyecto será capaz de atender a las necesidades de los módulos 2 (Creación
de tareas), 6 (Administración de tareas) y 9 (Tareas foco) del sistema. Creando así
las funcionalidades para la creación y gestión de tareas, el seguimiento de tareas
foco y la pantalla para la gestión de plantillas.

12
Capítulo 3. Marco Teórico

3.1 Estado actual y necesidades del Retail

3.1.1 ¿Qué es el Retail?

Antes de comenzar es necesario conocer a que se refiere la palabra “Retail”. Según
el diccionario de Oxford retail es: “La venta de bienes al público, generalmente a
través de tiendas”. Mas específicamente se podría definir como la “venta de
productos al por menor”. En este ámbito los supermercados, tiendas locales, y
tiendas de autoservicio son uno de los grandes sectores del retail.

3.1.2 Importancia del Retail

A través de la historia el mundo ha presenciado bastantes cambios y evoluciones,
entre ella las revoluciones industriales, por las cuales el mundo cambio tal y como
se veía. Gracias a la última de estas revoluciones hoy el hombre tiene al alcance de
su mano miles de productos que se venden en tiendas como supermercados,
abarrotes, autoservicio, incluso ya, por medio de internet, etc. Siendo entonces,
estos productos vendidos al por menor una gran parte del sector económico en
todos los países.

En México al cierre del 2018 el retail aportó al PIB 18 mil millones de pesos según
la Asociación Nacional de Tiendas de Autoservicio y Departamentales (ANTAD).
Siendo este uno de los sectores mas importantes a nivel nacional.

Por esto es de vital importancia que este sector comercial se actualice a las nuevas
tecnologías, aprovechando sus bondades y generando nuevas oportunidades de
crecimiento. Ya que un estudio realizado en 2016 por el INEGI en México mostro

13
que el 44.1 de las empresas ya obtienen ingresos derivados de productos
significativamente mejorados debido a la tecnología e innovación.

3.1.3 Factores clave del Retail

En octubre de 2019 la empresa LSRetail, una empresa dedicada al servicio y
consultoría del retail, genero un documento con los factores clave para evaluar el
desempeño de un negocio retail.

• Crear una experiencia de compra que los clientes quieran.

• Conocimiento de la marca.
• Generación y aprovechamiento de datos.
• Impresiones sociales.
• Compromiso y lealtad.

3.1.4 Evolución de la industria del Retail

Hoy en día el reto latente de los retailers es la convergencia entre la digitalización y
los puntos de venta, vivimos en una sociedad cada vez más acostumbrada a la
inmediatez en la comparación de precios y búsqueda de información, frente a un
mundo de marcas a elegir; que le gusta la personalización en la elección de artículos
y que segmenta sus compras de acuerdo con su estilo de vida. Entre más
información de los gustos de un cliente tengamos, más opciones le mostremos y
mayor diferenciación de marca le ofrezcamos, se logrará mayor alcance,
posicionamiento y sobre todo ventas.

La revista Forbes público un artículo en 2019 diciendo que la analítica es una de las
principales evoluciones de la industria del retail en el 2019.

14
 “Un importante número de los expositores han desarrollado herramientas que
permiten saber el comportamiento de un determinado cliente durante su visita
en tienda, ya no únicamente rastreando los tickets de compra o con el
tracking del WiFi sino utilizando cámaras que identifican a cada cliente desde
su entrada y registran el comportamiento, generando data que permite
distribuir de mejor manera los productos, establecer horario de personal y
adaptar sus mensajes publicitarios.” - Revista Forbes México, marzo 5, 2019.

3.2 Técnicas y tecnologías

3.2.1 Conceptos generales

• Sistema web
Un sistema web se puede definir como un sistema cuyos recursos se centran
en servicios web, los cuales se dirigen y transfieren a través de HTTP por un
amplio de clientes que están escritos en diferentes lenguajes.

Un sistema web puede transferir sus datos por medio de interfaces SOAP o
REST las cuales son un conjunto de principios arquitectónicos para la
transferencia de información por medio de una red interconectada.

• Framework
Un framework proporciona herramientas y bibliotecas que simplifican tareas
comunes de desarrollo, y mejora la seguridad contra los ataques. Los
frameworks permiten escribir sintaxis simplificada que generará el código.

15
3.2.2 Lenguajes de programación
• Java
Java es un lenguaje de programación y una plataforma informática
comercializada por primera vez en 1995 por Sun Microsystems.

Hoy, Java no solo impregna Internet, sino que también es la fuerza invisible
detrás de muchas de las aplicaciones y dispositivos que alimentan nuestra
vida cotidiana. Desde teléfonos móviles hasta dispositivos portátiles, juegos
y sistemas de navegación hasta soluciones de comercio electrónico.

• Javascript
JavaScript (JS) es un lenguaje de programación ligero, interpretado o
compilado en tiempo real con funciones de primera clase. Si bien es más
conocido como el lenguaje de secuencias de comandos para páginas web,
muchos entornos que no son del navegador también lo usan, como Node.js,
Apache CouchDB y Adobe Acrobat. JavaScript es un lenguaje dinámico
basado en prototipos, multi-paradigma, de un solo hilo, que admite estilos
orientados a objetos, imperativos y declarativos (por ejemplo, programación
funcional).

El estándar para JavaScript es ECMAScript. A partir de 2012, todos los

navegadores modernos son totalmente compatibles con ECMAScript 5.1.
Los navegadores más antiguos admiten al menos ECMAScript 3. El 17 de
junio de 2015, ECMA International publicó la sexta versión principal de
ECMAScript, que oficialmente se llama ECMAScript 2015, y que inicialmente
se denominó ECMAScript 6 o ES6.

16
 JavaScript se ejecuta en el lado del cliente de la web, que se puede utilizar
para diseñar / programar cómo se comportan las páginas web ante la
ocurrencia de un evento. JavaScript es un lenguaje de programación fácil de
aprender y potente, ampliamente utilizado para controlar el comportamiento
de la página web.

3.2.3 Sistema de gestión de base de datos

Un Sistema de Gestión de Bases de Datos (SGBD1) consiste en una colección de
datos interrelacionados y un conjunto de programas para acceder a los mismos. Un
SGBD permite el almacenamiento, manipulación y consulta de datos pertenecientes
a una base de datos organizada en uno o varios ficheros. En el modelo más
extendido (base de datos relacional) la base de datos consiste, de cara al usuario,
en un conjunto de tablas entre las que se establecen relaciones.

• Postgresql
PostgreSQL es un potente sistema de base de datos relacional de objetos de
código abierto que usa y amplía el lenguaje SQL combinado con muchas
características que almacenan y escalan de manera segura las cargas de
trabajo de datos más complicadas. Los orígenes de PostgreSQL se remontan
a 1986 como parte del proyecto POSTGRES en la Universidad de California
en Berkeley y tiene más de 30 años de desarrollo activo en la plataforma
central.

3.2.4 Lenguaje de marcado

• HTML
HTML es el lenguaje de marcado central de la World Wide Web.
Originalmente, HTML fue diseñado principalmente como un lenguaje para

17
 describir semánticamente documentos científicos. Sin embargo, su diseño
general le ha permitido adaptarse, en los años siguientes, para describir otros
tipos de documentos e incluso aplicaciones.

En 2019, el WHATWG y el W3C firmaron un acuerdo para colaborar en una

única versión de HTML en el futuro, quienes son los responsable de la
estandarización del hoy llamado HTML5.

3.2.5 Lenguaje de diseño

• CSS
Cascading Style Sheets (CSS) son un mecanismo simple para agregar estilo
(por ejemplo, fuentes, colores, espacios) a los documentos web.

La saga de CSS comienza en 1994. Håkon Wium Lie trabaja en CERN, la

cuna de la Web, y la Web está comenzando a usarse como plataforma para
la publicación electrónica. Después de haber trabajado en presentaciones de
periódicos personalizadas en el Laboratorio de Medios del MIT, Håkon vio la
necesidad de un lenguaje de hojas de estilo para la Web.

3.2.6 Frameworks
• Groovy
Groovy es un lenguaje orientado a objetos para la Plataforma Java, como
alternativa al lenguaje de programación Java. Es un lenguaje dinámico,
similar a Python, Ruby, Perl. A demás puede usarse como lenguaje de
scripting dentro de la Plataforma Java. Siendo precisos, Groovy es un
Lenguage Dinámico Ágil.

18
 Groovy utiliza una sintáxis con llaves para delimitar bloques, y se compila
dinámicamente hacia bytecodes para la Máquina Virtual Java, funcionando
así con cualquier librería y código Java. El compilador Groovy genera
bytecodes Java estándard que pueden usarse dentro de cualquier proyecto
Java. Además, la mayoría del código Java es sintácticamente válido en
Groovy.

• Grails
Grails es un framework para el desarrollo de aplicaciones web basado en el
lenguaje de programación Groovy, que a su vez se basa en la Plataforma
Java.

Como la mayoría de los framework de desarrollo web, Grails está basado en

el patrón Modelo Vista Controlador (MVC). En Grails los modelos se conocen
como clases de dominio que permiten a la aplicación mostrar los datos
utilizando la vista. A diferencia de otros frameworks, en Grails las clases de
dominio son automáticamente persistidas y es incluso posible generar el
esquema de la base de datos. Los controladores por su parte, permiten
gestionar las peticiones a la aplicación y organizar los servicios
proporcionados.

• Bootstrap
Bootstrap es un Framework para crear páginas webs de gran calidad que se
adaptan a múltiples pantallas, es decir su interface tiene el concepto de
Responsive Design (Diseño Adaptable).

Bootstrap está compuesto en su core por el Lenguaje de Marcado HTML,

Hoja de Estilos CSS, jQuery y otras librerías que automatizan el trabajo.

19
 • JQuery
jQuery es un software libre y de código abierto. Posee un doble
licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2,
permitiendo su uso en proyectos libres y privativos. jQuery consiste en un
único fichero JavaScript que contiene las funcionalidades comunes de DOM,
eventos, efectos y AJAX. Es una biblioteca o Framework de JavaScript,
creada inicialmente por John Resig. Fue presentada el 14 de enero de 2006
en el BarCamp NYC.

Permite simplificar la manera de interactuar con los documentos HTML,

manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar
interacción con la tecnología AJAX a páginas Web.

jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades

basadas en JavaScript que de otra manera requerirían de mucho más código,
es decir, con las funciones propias de esta biblioteca se logran grandes
resultados en menos tiempo y espacio.

3.2.7 Herramientas
• IntellijIdea
Es un ambiente de desarrollo integrado (IDE) para el desarrollo de programas
informáticos. Es desarrollado por JetBrains (anteriormente conocido como
IntelliJ), y está disponible en dos ediciones: community edition y edición
comercial. Esta última es una edición de pago. Mientras que la edición de
comunidad está disponible bajo una licencia de código abierto.

20
 IntelliJ IDEA es un entorno de desarrollo integrado (IDE) multiplataforma para
Java. El IDE puede extenderse mediante numerosos complementos que
harán del programa todavía más completo. Como dato interesante el 65 %
de los desarrolladores en Java escoge IntelliJ IDEA como IDE.

• DBeaver
DBeaver es un gestor universal de BBDD multiplataforma, que ofrece soporte
a las bases de datos más conocidas del mercado (MySQL, Oracle, DB2, SQL
Server, PostgreSQL, etc), así como algunas NoSQL (MongoDB, Cassandra).

Como características más destacadas ofrece:

Navegar por la estructura de BBDD
Editar tablas, columnas, keys, etc.
Permite ejecutar scripts SQL.
Modificar columnas resultantes de una consulta.
Resaltado de SQL (específico para cada tipo de motor)
Autocompletado en el editor.
Soporte para ver y editar archivos BLOB.
Exportar tablas o resultados de querys.
Generación de entidad-relación.
Comparación de esquemas.

• Workbench
Esta es una herramienta visual de diseño de bases de datos que integra
desarrollo de software, administración de bases de datos, diseño de bases
de datos, creación y mantenimiento para el sistema de base de datos
MySQL.

21
 MySQL Workbench permite diseñar visualmente, modelar, generar y
administrar bases de datos. Incluye todo lo que necesita un modelador de
datos para crear modelos complejos de ER, ingeniería directa e inversa y
también ofrece características clave para realizar tareas difíciles de gestión
de cambios y documentación que normalmente requieren mucho tiempo y
esfuerzo.

• Figma
Figma es un programa que ofrece todas las herramientas necesarias para
diseñar un proyecto. Sobre todo, es ideal para crear interfaces de usuario
tanto para web como para móvil. También permite crear prototipos, generar
código para el traspaso (hand-off) e ilustrar, aunque para esto último no es la
mejor herramienta para ello.

Cuando hay un elemento que se deben utilizar en varias pantallas, Figma da

la oportunidad de convertirlo en un “componente” para que cualquier cambio
que se aplique sobre éste, quede automáticamente actualizado en sus
instancias en todas las pantallas.

3.3 Metodología

3.3.1 Scrum
Scrum es una forma ágil de gestionar un proyecto, generalmente el desarrollo de
software, un marco para administrar un proceso.

Scrum se basa en un equipo autoorganizado y multifuncional. El equipo scrum se

autoorganiza en el sentido de que no hay un líder general del equipo que decida

22
qué persona hará qué tarea o cómo se resolverá un problema. Esos son problemas
que decide el equipo en su conjunto.

Y en Scrum, un equipo es multifuncional, lo que significa que todos son necesarios

para llevar una característica desde la idea hasta la implementación.

Dentro del desarrollo ágil, los equipos Scrum están respaldados por dos roles
específicos. El primero es un ScrumMaster, que puede considerarse como un
entrenador para el equipo, ayudando a los miembros del equipo a usar el proceso
Scrum para desempeñarse al más alto nivel.

El propietario del producto (PO) es el otro rol, y en el desarrollo del software Scrum,
representa a la empresa, los clientes o usuarios, y guía al equipo hacia la
construcción del producto correcto.

Scrum es utilizado para que el producto pueda llegar rápidamente al usuario final,
para estar seguro de responder a la necesidad, por esto el uso de sprints.

3.4 Estándares y buenas prácticas de

programación

3.4.1 Modelo MVC

¿Qué es el patrón MVC?
MVC era inicialmente un patrón arquitectural, un modelo o guía que expresa cómo
organizar y estructurar los componentes de un sistema software, sus
responsabilidades y las relaciones existentes entre cada uno de ellos.

23
Su nombre, MVC, parte de las iniciales de Modelo-Vista-Controlador (Model-View-
Controller, en inglés), que son las capas o grupos de componentes en los que
organizaremos nuestras aplicaciones bajo este paradigma.

Modelo
En la capa Modelo encontraremos siempre una representación de los datos del
dominio, es decir, aquellas entidades que nos servirán para almacenar información
del sistema que estamos desarrollando.

Asimismo, encontraremos la lógica de negocio de la aplicación, es decir, la

implementación de las reglas, acciones y restricciones que nos permiten gestionar
las entidades del dominio.

Por último, el Modelo será también el encargado de gestionar el almacenamiento y

recuperación de datos y entidades del dominio.

Vista
Los componentes de la Vista son los responsables de generar la interfaz de nuestra
aplicación, es decir, de componer las pantallas, páginas, o cualquier tipo de
resultado utilizable por el usuario o cliente del sistema.

Controlador
La misión principal de los componentes incluidos en el Controlador es actuar como
intermediarios entre el usuario y el sistema. Serán capaces de capturar las acciones
de este sobre la Vista, como puede ser la pulsación de un botón o la selección de
una opción de menú, interpretarlas y actuar en función de ellas.

24
Realizarán también tareas de transformación de datos para hacer que los
componentes de la Vista y el Modelo se entiendan. Así, traducirán la información
enviada desde la interfaz.

3.4.2 Practicas de “código limpio”

• El código malo hace demasiadas cosas - el código limpio es enfocado
Cada clase, cada método o cualquier otra entidad debería permanecer sin
cambios. Debería cumplir con SRP (Single Responsability Principle, o
Principio de Responsabilidad Única). Dicho de otra manera, una clase debe
tener una y sólo una causa por la cual pueda ser modificada.

• El lenguaje con el que se escribió el código debería parecer que fue

hecho para el problema
"No es el lenguaje lo que hace parecer simple a un problema, sino que es el
desarrollador que hace que el lenguaje parezca simple" - Robert C. Martin

Esto significa, por ejemplo, que no debemos usar workarounds que hagan
que el código y el lenguaje parezcan raros.

• No debe ser redundante

Debería cumplir con la regla DRY (Don't Repeat Yourself, o No Te Repitas).
Cuando se aplica correctamente el principio DRY, la modificación de un único
elemento del sistema no requiere cambios en otros elementos que no tengan
relación lógica.

• Debe ser placentero leer el código

25
 Debemos sentir que es fácil de leer por cualquier desarrollador sin pasar
horas investigándolo.

La simplicidad tiene que ser un elemento clave del diseño, y se debe evitar
la complejidad innecesaria. YAGNI es una práctica que nos alienta a
enfocarnos exclusivamente en las cosas más simples que hagan funcionar
al software.

• Puede ser extendido facilmente por cualquier otro desarrollador

No escribimos código para nosotros mismos, o peor - para el compilador.
Escribimos código para otro desarrollador. No seamos egoístas: pensemos
en los demás. No torturemos a otros desarrolladores creando código que es
dificil de extender y mantener. Además, en algunos meses es posible que
nosotros mismos seamos el "otro desarrallador".

• Debe tener dependencias mínimas

Mientras más dependencias tenga, más dificil va a ser de mantener y cambiar
en el futuro. Existen herramientas que nos ayudan a cumplir este objetivo,
marcando las dependencias "extrañas" de nuestro código.

• Más chico, mejor

El código debería ser mínimo. Tanto las clases como los métodos deberían
ser cortos, preferentemente con pocas líneas de código. Debe estar bien
dividido. Mientras mejor dividamos el código, más facil se vuelve leerlo. Este
principio puede influenciar positivamente al punto 4 - va a facilitar la
comprensión del código cuando lo lean otros desarrolladores.

• Debe ser expresivo

26
 La expresividad del código significa que tiene nombres significativos. Estos
nombres deben expresar la intención. No tienen que resultar engañosos.
Tienen que ser distintivos. La expresividad hace que el código se documente
a sí mismo, resultando en que sea menos importante la documentación.

Capítulo 4. Desarrollo del proyecto

4.1 Creación de tareas

4.1.1 Recolección y análisis de los requerimientos

La funcionalidad de tarea deberá cumplir con las acciones necesarias para que el
administrador pueda gestionar y crear las tareas que el usuario de campo
posteriormente deberá ver y cumplir. Las tareas estarán compuestas por distintos
tipos de acciones que podrán ser condicionados entre ellos, así como agrupados y
asociados a elementos del árbol de productos.

La industria proporcionara los requerimientos necesarios para el desarrollo del

módulo. Tomando en cuenta las necesidades de la empresa.

Requerimientos
• La tarea podrá crearse desde 0
• Una nueva tarea inicia con estatus inactivo o en modo “borrador”. El modo
“borrador” se apaga con la opción publicar.
• Para cambios el proceso será el siguiente:
1.- Editar tarea

27
 2.- Activar la opción publicar. Este cambio lo verán solo los puestos
que no hayan iniciado la captura de la tarea editada.
• Las ediciones de las tareas generan en el sistema una nueva versión
manteniendo el registro la versión anterior para posteriores reportes.
• La creación y todas las ediciones de las tareas se guardan en vivo.
• Solo se permitirá la edición de la tarea por un solo puesto a la vez.
• Los elementos de captura podrán condicionarse entre sí.
• La condición disponible dependerá del tipo de dato.
• Los elementos simples de captura podrán relacionarse a productos.
• La captura de un elemento relacionado a productos que tiene una condición
permitirá únicamente la captura del universo de productos que la cumplan.

Elementos y atributos

Respuesta Foto Permite Contiene Limites

Elemento de Modulo
Captura Nombre Ubicación Tipo Orden Alcances
Opcional Obligatoria Opcional Obligatoria Multiples adjunto adjunto Inferior Superior Informativo Restrictivo
Entero x x x x x x x x x x x x x x
Decimal x x x x x x x x x x x x x x
Lista selección unica
x x x x x x x x x x x
Lista Selección multiple
x x x x x x x x x x x
Lista ranking x x x x x x x x x x x
Check / SI-NO /True-False
x x x x x x x x x x x
Hecho x x x x x x x x x x x
Fecha x x x x x x x x x x x
Hora x x x x x x x x x x x
Feha y hora x x x x x x x x
Texto x x x x x x x x x x x
Código QR x x x x x x x x x x x
Código de barrasx x x x x x x x x x x
Audio x x x x x x x x x x x
Video x x x x x x x x x x x
Firma x x x x x x x x x x x
Foto x x x x x x x x x x
Humor (5 opciones)
Contador
Precio x x x x x x x x x x x
Comunicación dex precio x x x x x x x x x x
Surtido x x x x x x x x x x x
Espacio / Frentesx x x x x x x x x x x
Inventario x x x x x x x x x x x
Pedido x x x x x x x x x x x
Caducidad x x x x x x x x x x x
Ventas x x x x x x x x x x x
Abordos x x x x x x x x x x x

Ilustración 4 Tipos de acciones

Elementos y árbol de productos

28
 Dimensión de productos
Tipo
Categoria Subcategoria Segmento Producto Marca+Categoria Marca+Segmento
Fabricante+SegmentoFabricante+Categoria
Entero x x x x x x x
Decimal x x x x x x x
Lista selección unica x x x x x x x
Lista Selección multiple x x x x x x x
Lista ranking x x x x x x x
Check / SI-NO /True-False x x x x x x x
Hecho x x x x x x x
Fecha x x x x x x x
Hora x x x x x x x
Feha y hora x x x x x x x
Texto x x x x x x x
Comentario x x x x x x x
Código QR x x x x x x x
Código de barras x x x x x x x
Audio x x x x x x x
Video x x x x x x x
Firma x x x x x x x
Foto x x x x x x x
Humor
Contador
Precio x
Comunicación de precio (Si/No) x x x
Catalogación(Si/No) x x x
Disponibiliad (Si/No) x x x
Agotamiento (Si/No) x x x
Disponibilidad x x x
Frentes (entero) x x x x x x x x
Frentes (decimal) x x x x x x x x
Fondos (entero) x x x x x x x x
Fondos (decimal) x x x x x x x x
Inventario (entero) x x x x x x x x
Inventario (decimal) x x x x x x x x
Pedido (entero) x
Pedido (decimal) x
Caducidad (fecha) x
Caducidad (entero) x x x x x x x x
Ventas (entero) x
Ventas (decimal) x
Abordos x x x x x

Ilustración 5 Asociación a árbol de productos

Jerarquías de dimensión de producto

29
Ilustración 6 Jerarquía de condicionales

4.1.2 Estructura de base de datos

La información de la configuración de tareas se almaceno en una base de datos con
el motor postgresql, iniciando el desarrollo de manera local con un servicio en la
computadora del desarrollador para después ser enviada a la nube en un cluster de
servidores.

Planeación
Para la estructura de base de datos se tomaron como referencia las formas
normales, lo cual permite una mejor eficiencia para la extracción y almacenamiento
de datos.

30
Creándose una tabla por cada uno de los elementos esenciales que necesitan
almacenarse. Separándose en 5 elementos fundamentales: Tareas, acciones,
catálogo de opciones y versiones de las tareas.

4.1.3 Nueva tarea

Una vez realizada la estructura de base de datos y la primera funcionalidad creada
fue la opción de crear una nueva tarea desde 0. Para lo cual se creo una nueva
vista (administración de tareas), desde la cual se colocó un botón con la acción de
“nueva tarea”, desde donde el usuario podrá elegir que tarea crear.

Ilustración 7 Nueva tarea

Cuando un usuario da clic en el botón de “Nueva tarea”, se creó un modal con las
opciones de tipos de tareas disponibles, la cual se puede elegir para crear desde 0.

31
Ilustración 8 Modal tipos de tareas

Una vez el usuario haya elegido la tarea que desea crear, lo manda a una pantalla
de configuración para la nueva tarea.

Para esto, se creó una nueva vista llamada “Creación de tareas”, la cual tendrá las
interacciones necesarias con el controlador para configurar una tarea. En esta vista
se puede configurar el nombre de la tarea, su alcance y vigencia, así como las
acciones que se deseen crear. Dentro de esta pantalla es posible también publicar
el borrador creado o si se desea cancelarlo.

32
Ilustración 9 Interfaz de tarea

4.1.4 Acciones
Dentro de los componentes esenciales de la tarea son las acciones de estas, por lo
cual dentro de la pantalla de configuración de tareas se colocó la configuración de
sus acciones, colocando un botón en la parte inferior derecha, siguiendo las mejores
prácticas del UX/UI, este botón se colocó de fácil acceso para el usuario, en donde
el usuario al dar clic podrá crear una nueva acción para la tarea en configuración.

Una creada la nueva acción podrá configurarse, para lo cual se creó un formulario
con los atributos modificables de la tarea. Por ejemplo, descripción de la tarea,
obligatoriedad, opción de foto y foto múltiple, límites y asociación a árbol de
productos.

33
Ilustración 10 Formulario de acciones

Dentro de la configuración de tareas se colocó un selector de tipo de acción. Al

elegir un nuevo tipo de tarea dinámicamente el formulario de configuración es
cambiado, para así poder configurar todos los atributos disponibles para cada
acción.

34
Ilustración 11 Tipos de acciones

4.1.5 Alcance de la tarea

Siguiendo con los atributos configurables para una tarea se encuentra la opción de
colocar un alcance y una vigencia para la tarea. Donde se puede elegir para que
formato de tienda y perfil de usuario está disponible esta tarea, además de una
fecha de vigencia, esto ayudará a facilitar la gestión de las tareas, ya que esta estará
disponible solo el tiempo que se requiera, y no será necesario buscarla para
desactivar la misma o estar al pendiente de cada tarea, automatizando así, esta
funcionalidad.

35
Ilustración 12 Alcance de tarea

4.1.6 Condicionales entre acciones

Una vez que se logró crear las funcionalidades para crear una nueva acción y elegir
el alcance de la tarea, fue necesario crear las condicionales entre acción, esto es,
dependiendo de lo que se haya contestado en una tarea, aparecerá o no la tarea
condicionada. Para facilidad de entendimiento en este texto llamaremos a la tarea
que condiciona acción padre, y a la tarea condicionada, acción hijo.

Para esta funcionalidad se tomó un plugin basado en Javascript para poder mover
los elementos dentro de la pantalla y colocarlos en un lugar en específico, con esto
se logró que una acción ya creada pudiera colocarse debajo de otra para así crear
una condición entre acciones, convirtiendo la tarea debajo en acción hijo y la y tarea
encima como acción padre.

36
Una vez colocada la tarea donde se desea condicionar, aparece un formulario
dinámico, en el cual existen 3 opciones fundamentales para elegir los posibles
escenarios de condición, en donde se podrá elegir entre: “Si la acción padre tiene
cualquier respuesta la acción hijo aparece”, “Si la acción padre se contesta con una
respuesta en específico la acción hijo aparece” y “Si no es posible contestar la
acción padre, la acción hijo aparece”.

Ilustración 13 Condicionales

4.1.7 Asociación a árbol de productos

Debido a que el sistema en que se está trabajando es enfocado principalmente al
Retail, una función esencial para las tareas es la posibilidad de asociar cada acción
al árbol de producción ya antes definido dentro del sistema Storecheck III.

Para poder asociar cada acción al árbol de productos en el sistema, se decidió en

colocar un selector dentro del formulario para la configuración de las acciones.

37
Ilustración 14 Selector nivel de productos

Una vez seleccionado el nivel del arbol de productos se desarrollo un modal de

configuración para poder elegir los elementos a los que se desea asociar la acción.
Este se compone con 3 secciones: Sección de filtros, sección de elementos
disponibles y sessión de elementos selecciónados.

38
Ilustración 15 Selección de elementos

Los filtros ayudarán a encontrar el elemento que se desea asociar, en el listado de

elementos disponibles se podrá seleccionar los elementos, al ser seleccionado
automáticamente aparecerá el elemento en el listado de elementos seleccionados,
donde se podrán desasociar los elementos.

4.2 Administración de tareas

4.2.1 Recolección de datos y análisis de requerimientos

La administración de tareas permitirá activar y desactivar tareas, para así ser
mostradas o no a los usuarios en campo. Las tareas podrán clonarse a partir de

39
esta pantalla. La información dada al usuario deberá ser clara, así, podrá verse
cuando una tarea esta activa, y visual en móvil.

Se mostrará una tabla ordenada en principio por el nombre de la tarea de manera

ascendente y alfabética. Por medio de esta pantalla se podrá ver el detalle de la
tarea o en su defecto editar la tarea seleccionada.

Como parte de la información mostrada al usuario deberá verse la fecha de

vigencia de la tarea, además la posibilidad de ordenarse por cada una de las
columnas mostrada en la tabla.

4.2.2 Listado de tareas

Para la fácil administración de tareas para el usuario se desarrolló un listado que
muestra las tareas ordenadas, de manera predeterminada, por el nombre de las
tareas de manera ascendente.

En esta tabla se muestra la información de cada tarea: vigencia de la tarea, objetivos

de visita a los que está asociada, disponibilidad en móvil, estatus de la tarea, opción
de clonar y columna para activar o desactivar tarea.

Para facilidad del usuario, la tabla puede ser ordenada por cada una de las
columnas mostradas.

También se colocó un buscador en la parte superior de la tabla para que así, si el

usuario lo desea, se puede buscar el nombre de una tarea en específico.

40
Ilustración 16 Tabla de tareas

4.2.3 Activar - desactivar tarea

Dentro de la tabla de tareas se colocó una columna para que el usuario de manera
fácil pueda activar una tarea, aunque aún tenga fecha de vigencia, esto permitirá
que esta tarea ya no sea visualizada en móvil para los usuarios de campo. Así, si
se requiere que una tarea ya no sea contestada, solo será necesario desactivarla,
sin necesidad de alterar su fecha de vigencia.

4.2.4 Visualización y nueva versión

Dentro de la tabla de tareas, cada una de las filas representa la información de
una tarea, pero, para ver específicamente la configuración de acciones que tiene
cada tarea será necesario entrar el detalle de la misma, para lo cual se desarrolló
la posibilidad de que al dar clic en alguna fila de la tarea se pueda visitar el detalle
de la tarea, entrando a una pantalla de visualización, en donde se podrá ver cada
una de las configuraciones de las acciones configuradas dentro de la tarea, pero
no se podrá alterar nada de su configuración.

41
Para poder cambiar la configuración de una tarea, se colocó un botón en la parte
superior de la pantalla de visualización de tareas para habilitar una nueva versión
de la tarea, tomando siempre en cuenta el requerimiento de que solo un puesto
podrá editar la tarea a la vez.

El para generar una nueva versión de la tarea “duplica” los registros de la tarea,
para así mantener versión previa sin modificaciones y poder generar una nueva
versión para las modificaciones que se quieran hacer.

Ilustración 17 Visualización de tarea

4.3 Tareas foco

La primera tarea foco desarrollada en el sistema será la venta cero. La cual
cumplirá con la necesidad de alertar a los usuarios en tiempo real cuando una
tienda está incumpliendo con el promedio diario de ventas que tuvo la tienda
durante cierto periodo. Así se podrán detectar y corregir problemas que existan en
la tienda lo antes posible, previniendo así una pérdida para el cliente.

42
Para que el usuario en campo pueda corregir el error será necesario mandarle una
tarea predefinida por el sistema, la cual ayudara y guiara al usuario en campo para
la correcta corrección del problema que ocasiono la venta cero. Además de que
proporcionara información para un reporte posterior al cliente.

Ilustración 18 Tarea predeterminada

4.3.1 Recolección de datos y análisis de requerimientos

43
Proporcionar al sistema la funcionalidad de generar alertas de tarea foco de manera
manual, de forma que, el usuario web pueda mandar la alerta detectada de al
personal de campo y esta quede registrada para su posterior seguimiento.

La venta cero es una alerta generada por el sistema o usuarios al notar que en una
tienda un producto deja de venderse sin razón aparente y el usuario en campo debe
ser el encargado de verificar, inspeccionar y realizar la tarea definida para localizar
la razón de esta falta de ventas, y en caso de, poder solucionar el problema de la
venta cero.

Las tareas foco dan al usuario el valor necesario para evitar pérdidas monetarias,
detectando y corrigiendo errores en campo de manera temprana.

4.3.2 Base de datos

Para la definición de tareas, se podrá crear una tarea única predefinida por el
sistema para que pueda utilizarse en todos los proyectos que tengan activada esta
funcionalidad. Facilitando así la configuración del proyecto para el cliente.

Antes de crear esta nueva tarea deberá ser añadido un nuevo tipo de tarea a la
tabla capture_module_type para especificar las tareas de tipo foco, las cuales
tendrán la columna is_system = true para especificar que es una tarea definida por
el sistema y esta no podrá ser editada por el usuario.

Se creará un catálogo de tareas foco para almacenar su descripción, id y capture

module default (definición de la tarea default que será enviada a móvil). Esto
quedará almacenado dentro de una tabla a nivel stoiii_config (focus_task_type):
• Id: llave primaria del registro
• Active: bandera para activar o desactivar una tarea foco

44
 • Description: i18n descripción del tipo de tarea foco
• Default_capture_module_id: Relación con la definición de tarea default.
• Has_product: Bandera para saber si la tarea foco incluye un producto o no.
• Attr_info: Columna con formato json para almacenar los atributos distintos
entre tareas.

Las tareas foco necesitaran de una nueva tabla a nivel proyecto para almacenar sus
datos y dar su posterior seguimiento. Dicha tabla contendrá los campos:
• Id: llave primaria del registro
• Active: bandera para activar o desactivar una tarea foco
• Attributes: formato JSON para almacenar la información de la tarea. Ejemplo
(venta cero):
{"end_date":"20200331","last_sale_date":"20200114","lost_estimated":"1200
0.00","detected_date":"20200331","description":"description","sales":"12","pr
ice":"12.50","product_id":"1","days_wo_sales":"5","stock":"12","place_id":"1",
"start_date":"20200331"}
• Capture_module_id: Relación con la tarea correspondiente.
• Focus_task_type_id: Relación con tipo de tarea foco.
• Notified: contendrá un booleano para saber si la push fue enviada a 1 o más
puestos

4.3.3 Formulario de alerta

Las tareas foco representan una funcionalidad esencial dentro de las tareas
previamente desarrolladas, por lo que se decidió colocar dentro de la vista de
administración de tareas un selector con el cual se podrá generar una nueva alerta
manual de las tareas. Este selector contiene las tareas foco disponibles en el
sistema.

45
Ilustración 19 Selector de tarea foco

Una vez seleccionada la tarea foco que se desea alertar, se despliega un formulario
dinámico para insertar los atributos de la tarea foco que se enviara a los usuarios
de campo.

46
Ilustración 20 Modal venta cero

Se crearon los servicios focusTaskService y focusTaskTypeService, siguiendo los

patrones DAO (Data Access Object) para la limpia gestión de datos dentro del
sistema.

El controlador se comunica con la interfaz mediante servicios REST bajo el

protocolo HTTP para la comunicación e intercambio de información, generando las
siguientes funciones:

• saveFocusTask
• ExportFocusTask

47
4.3.4 Reporte de tareas foco vigentes
Para el usuario es esencial poder visualizar las tareas foco que ya se han lanzado,
y su respectivo seguimiento, por lo cual dentro del modal de tareas foco se
desarrolló un link para poder exportar un archivo .csv con la información de las
tareas foco que siguen vigentes.

Ilustración 21 Vinculo de export

48
Este archivo es un .csv separado por punto y coma para que sea facil de visualizar
por cualquier editor de texto o en programas como excel, para que sea facil de
filtrar o generar un reporte al cliente.

Ilustración 22 Export de venta cero vigentes

4.3.5 Envíos de alerta y comunicación móvil

Envió de alerta
Posterior al guardado de la tarea se deberá mandar la notificación a todos los
usuarios móvil que correspondan dependiendo de la tarea foco creada. Donde los
criterios de envió son:

Se consultarán los puestos que hayan tenido una visita a la tienda seleccionada en
un rango de 15 días atrás o definida en 15 días delante.

49
Si la fecha actual está dentro de la vigencia de la venta cero guardada se buscarán
todos los puestos que tengan una visita planeada con la tienda correspondiente
dentro de los días de vigencia.

Servicios para la aplicación móvil

Dichos servicios se encontrarán en el FocusTaskController del proyecto rest-
services.

• getByRole: retornara la definición de las tareas foco válidas para una lista de
role ids, en caso de que la lista llegue vacía se tomara el userId en session
para tomar todos los puestos de ese usuario.
• getStatus: Este servicio servirá para refrescar la información de las tareas
foco solicitadas. Recibirá un listado de ids de tareas foco y retornará la
información de estas.
• getByPlace: Retornará la definición de todas las tareas foco vigentes a partir
de una lista de ids de lugares.

La definición de los módulos de captura predefinidos por el sistema será enviados

junto con los servicios de sincronización móvil, con el mismo formato que se
enviaban los módulos de captura anteriores.

Guardado y seguimiento de la tarea foco

Se creará una tabla llamada focus_task_role_tracking para el seguimiento de las
tareas foco y el puesto a quien se envió la notificación de las tareas, esta tabla
contendrá las fechas del día en que se envió la push, el día que se solicitó la
información de la tarea foco, el día que el puesto la recibió y la fecha y hora en que
se contestó.

50
4.4 Despliegue y pruebas de entorno
Una vez desarrolladas las funcionalidades de manera local en una computadora de
escritorio, fue necesario hacer pruebas en los servidores donde es lanzada la
aplicación. Ya que los sistemas operativos y los entornos entre la pc local y los
servidores en la nube son distintos.

Para esto el sistema Storecheck III ya cuenta con distintos entornos que simulan los
ambientes en producción para que los desarrolladores podamos probar nuestros
desarrollos una vez finalizados.

Para generar un despliegue dentro de los servidores de Storecheck, se genera

dentro del proyecto un archivo WAR (Web Application Archive), el cual se puede
desplegar el servidor de aplicación Tomcat, ya previamente configurado en los
servidores de Storecheck.

Con este despliegue se generan las pruebas de entorno, las cuales consisten en
que las funcionalidades programadas funcionen de igual manera en la pc local que
en el servidor de aplicación.
En caso de que esto no funcione así será necesario cambiar el desarrollo para que
ambos entornos funcionen de igual manera.

De manera similar las aplicaciones siempre deben ir pensadas en base a temas de

cantidad de datos y concurrencia en el sistema.

Una vez logrado que las funcionalidades se comporten igual en el servidor de

aplicación y en el pc local, las funcionalidades pasan a un segundo entorno en la
nube (preproducción), en el cual será puesto a prueba con una mayor cantidad de

51
datos y concurrencia dentro del sistema, además de su comportamiento e
interacción con las otras funcionalidades del sistema.

Una vez que las funcionalidades pasan las pruebas realizadas en el entorno de
preproducción es posible lanzar a los servidores de producción en donde el usuario
ya podrá utilizar cada una de las funcionalidades desarrolladas.

Capítulo 5. Resultados
De acuerdo con los objetivos establecidos en el capítulo 2 del reporte de
residencias, los resultados son los siguientes:

Creación de tareas
Se creo la funcionalidad completa generando una interfaz de usuario actualizada
donde se puede configurar desde 0 un módulo y con la posibilidad de crear nuevas
versiones.

Administración de tareas
La pantalla de administración de tareas es capaz de mostrar visualmente al usuario
las tareas almacenadas en el sistema, así como la posibilidad de desactivar, clonar
o crear nuevas tareas a partir de esta pantalla.

Tareas foco
Se adapto el sistema para poder generar alertas de manera manual, siguiendo el
desarrollo previo de tareas y automatizando para alertar a las posibles perdidas
monetarias que tenga el cliente.

52
Todo esto se realizó bajo la metodología SCRUM, basada en sprint de 3 semanas
y con el desarrollo continuo de las funcionalidades.

Capítulo 6. Competencias desarrolladas y/o

aplicadas

6.1 Competencias específicas

Diseñar e implementar un sistema fullStack, desarrollando desde la base de datos
hasta el sistema de control web e interfaz de usuario.

Implementar y seguir patrones de diseño modelo-vista-controlador para la

optimización de sistemas web.

Implementación y aprendizaje de nuevas tecnologías de desarrollo tanto backend

(Grails) como frontend (Jquery).

Desarrollar la competencia para la optimización de código y desarrollo “limpio”.

Conocimiento e implementación de metodologías para el desarrollo continuo de
sistemas.

Aprendizaje de despliegues a entornos en la nube para las pruebas y producción

del producto.

53
6.2 Competencias genéricas
Capacidad de planificar y organizar siguiendo la filosofía de trabajo SCRUM.
Basada en Sprint y mejora continua.

Capacidad de análisis previo al desarrollo de una funcionalidad. Analizar y

recolectar información para adecuar la funcionalidad solicitada lo mejor posible al
sistema y apegada a los requerimientos de la empresa.

Desarrollo de habilidad para trabajar en equipo. Algunas de las funcionalidades

necesitaron la ayuda de compañeros de trabajo. Por lo cual la habilidad de coordinar
y comunicar mis progresos y adecuar los mismos a los progresos de los demás fue
sumamente necesario. Aplicando sistemas de control de versiones o software para
gestión de proyectos.

Capacidad de gestión de tiempo y entendimiento de tareas. Como parte de una

metodología ágil basada en tiempos para realizar cada funcionalidad fue necesario
conocer el tiempo que lleva el desarrollo de cada una de las tareas para
implementarla en cada sprint.

Conclusiones y recomendaciones

Conclusiones
El desarrollo de los módulos requirió tanto de la implementación de los
conocimientos adquiridos durante la carrera, como la adquisición de nuevos
conocimientos que complemente la formación como ingeniero.

Resultando así favorables los resultados comparados a los objetivos previamente

definidos. Fue de gran aportación el uso de la metodología ágil SCRUM ya que

54
mediante esta se pudieron desglosar los grandes objetivos en pequeñas tareas que
pudieran realizarse durante los sprint para así terminar en tiempo cada uno de los
objetivos.

Debido a la necesidad de adquirir nuevo conocimiento para la realización del

proyecto, se toma en cuenta la capacidad de investigación y autodidacta, de suma
importancia en para un ingeniero, ya que el mundo de hoy nunca para de
actualizarse.

Recomendaciones
Sin duda el uso de nuevas metodologías agiles es una de las recomendaciones
más grandes adquiridas durante este proyecto, ya que, son metodologías
especializadas para la realización de cualquier proyecto, las cuales ayudan a
organizar y separar cada una de las tareas a realizar cumpliendo así con todos los
objetivos establecidos en el proyecto.

Los proyectos en producción necesitan mas que solo las habilidades de desarrollo,
es necesario tomar en cuenta el contexto que lo rodea y los distintos problemas
que abordan cualquier sistema web, entre los cuales se encontraron la
concurrencia entre usuarios, tiempos de respuesta, manejo de errores y
escalabilidad de código.

Un desarrollador debe considerar siempre la escalabilidad de código al abstraer la

solución del sistema dado, ya que es inevitable encontrarse con errores durante el
desarrollo de alguna funcionalidad o la necesidad de cambio, ya que esta no
cumple con las necesidades del cliente. Por esto es recomendable siempre
abstraer las ideas y conceptos del sistema siguiendo las bases de la programación
orientada a objetos.

55
Finalizando las recomendaciones como un plus para la formación de un ingeniero
es siempre seguir los estándares y las mejores practicas de desarrollo. Las cuales
ayudaran a no solo resolver el problema dado, sino en el menor tiempo y con la
mejor calidad posible.

Referencias bibliográficas y virtuales

ANTAD. (2019). ¿Qué sucederá con el retail en el 2020?. 29 de marzo del 2019,
de ANTAD Sitio web: https://antad.net/que-sucedera-con-el-retail-en-el-2020/

INEGI. (2016). Indicadores sobre Investigación y Desarrollo Tecnológico. 29 de

marzo del 2020, de INEGI Sitio web: https://www.inegi.org.mx/temas/ciencia/

Giada Pezzini. (2019). How to measure your retail business performance in an

omni-channel world. 29 de marzo del 2020, de LS Retail Sitio web:
https://www.lsretail.com/blog/measure-your-retail-business-performance.

Alex Rodriguez. (06-11-2008). Servicios Web de RESTful: Los aspectos básicos.

20 de marzo del 2020, de IBM Sitio web:
https://www.ibm.com/developerworks/ssa/library/ws-restful/index.html

Mozilla.org. (2019). Frameworks Web de lado servidor. 26 de marzo del 2019, de

Mozilla.org Sitio web: https://developer.mozilla.org/es/docs/Learn/Server-
side/Primeros_pasos/Web_frameworks

Mozilla.org. (2019). JavaScript. 26 de marzo del 2019, de Mozilla.org Sitio web:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

56
OpenGIS Consortium (1999) OpenGIS Simple Features Specification For SQL
http://www.opengis.org/docs/99-049.pdf

Postgresql. (2020). About. 26 de marzo del 2019, de Posgresql.org Sitio web:

https://www.postgresql.org/about/

W3. (2020). HTML Living Standard . 26 de marzo del 2019, de W3 Sitio web:
https://html.spec.whatwg.org/multipage/introduction.html

W3.org. (2016). A brief history of CSS until 2016. 26 de marzo del 2019, de W3.org
Sitio web: https://www.w3.org/Style/CSS20/history.html

Universidad de Alicante. (2013). Introducción a Grails. 23 abril 2020, de

Universidad de Alicante Sitio web:
http://www.jtech.ua.es/j2ee/restringido/grails/sesion03-apuntes.html

Damian Amoedo. (2017). Intellij IDEA, instala este IDE para desarrollar con Java
desde PPA. 23 abril 2020, de Ubuntu Sitio web: https://ubunlog.com/intellij-idea-
ide-java/

Damián Amoedo. (2019). MySQL Workbench, herramienta visual para el diseño de

bases de datos. 23 abril 2020, de Ubuntu Sitio web: https://ubunlog.com/mysql-
workbench-bases-datos/

Mountain Goat Software.. (2018). Scrum. 23 abril 2020, de Mountain Goat

Software. Sitio web: http://www.mountaingoatsoftware.com/agile/scrum

José María Aguilar. (2019). ¿Qué es el patrón MVC en programación y por qué es
útil?. 24 abril 2020, de Campus mvp Sitio web:

57
https://www.campusmvp.es/recursos/post/que-es-el-patron-mvc-en-programacion-
y-por-que-es-util.aspx

Robert C. Martin. (2008). Clean code. Stoughton, Massachusetts: Pearson

Education, Inc..

58