AGRADECIMIENTOS

Para poder realizar esta memoria de estadía de la mejor manera posible fue
necesario del apoyo de algunas personas a las cuales quiero agradecer:

A mis padres que han sido un apoyo moral y económico para lograr este fin. Gracias
por su paciencia y amor.

A todos y cada uno de mis profesores por compartir sus conocimientos, consejos y
que en todo momento me enseñaron a crecer como persona y como profesionista.

A la Universidad Tecnológica de Tehuacán, donde se brindó la información

académica para nuestra formación.

A la Ing. Julieta Edith Hernández Guzmán, la cual me apoyó a lo largo de la

elaboración de mi memoria de estadía y durante el transcurso de ella, estuvo al
tanto de mi desempeño en la empresa.

Sin olvidarme, agradezco a todos y cada una de las personas quienes de alguna
manera se involucraron para culminar mis estudios, a mis compañeros y amigos,
quienes me brindaron cariño, comprensión, apoyo y sobre todo su sincera y valiosa
amistad.
Índice

Agradecimientos ......................................................................................................3

CAPÍTULO I INTRODUCCIÓN ................................................................................9

1.1 Resumen ......................................................................................................10

1.3 Introducción ..................................................................................................12

1.4 Justificación ..................................................................................................13

1.5 Objetivo general ...........................................................................................13

1.6 Objetivo específicos .....................................................................................13

CAPÍTULO II MARCO HISTORICO .......................................................................14

2.1 Antecedentes históricos ...............................................................................15

2.2 Misión ...........................................................................................................15

2.3 Visión............................................................................................................15

2.4 Políticas ........................................................................................................15

2.5 Valores .........................................................................................................16

2.6 Principales áreas de la empresa ..................................................................16

2.7 Descripción del área de realización de estadia ............................................16

2.8 Organigrama ................................................................................................17

CAPÍTULO III MARCO TEORICO .........................................................................18

3.1 Batería de preguntas ....................................................................................19

3.2 Javascript .....................................................................................................19

3.3 Node js .........................................................................................................19

3.4 Aplicaciones spa ..........................................................................................19

3.5 Angular .........................................................................................................19

3.6 Angular material ...........................................................................................20

 3.7 Redux ...........................................................................................................20

3.8 Git .................................................................................................................20

3.9 Bitbucket.......................................................................................................21

3.10 Mysql ..........................................................................................................21

3.11 Pm2 ............................................................................................................21

3.12 Trello ..........................................................................................................21

3.13 Slack...........................................................................................................22

3.14 Zoom ..........................................................................................................22

3.15 Invision .......................................................................................................22

CAPÍTULO IV METODOLOGÍA .............................................................................23

4.1 Descripción de actividades ...........................................................................24

4.2 Planeación....................................................................................................25

4.3 Implementación ............................................................................................26

4.4 Evaluacion ....................................................................................................62

CAPÍTULO V RESULTADOS Y DISCUCIÓN ........................................................63

5.1 Resultados ...................................................................................................64

5.2 Discusión ......................................................................................................65

5.3 Conclusiones ................................................................................................65

5.4 Referencias bibliograficas ............................................................................66

 ÍNDICE DE FIGURAS
Ilustración 1 Logo de la empresa ...........................................................................15
Ilustración 2 WBS ..................................................................................................24
Ilustración 3 Tablero TRELLO................................................................................24
Ilustración 4 Proceso de desarrollo de software ....................................................25
Ilustración 5 Repositorio bitbuket ...........................................................................26
Ilustración 6 Diseño de alto nivel para listado de báterias .....................................27
Ilustración 7 Diseño de alto nivel para configurar una báteria................................27
Ilustración 8 Diseño de alto nivel tipo de pregunta 1..............................................28
Ilustración 9 Diseño de alto nivel tipo de pregunta 2..............................................28
Ilustración 10 Diagrama de base de datos .............................................................29
Ilustración 11 Configuración inicial node js ............................................................30
Ilustración 12 Login con node js y passport js........................................................30
Ilustración 13 Estructura de la batería en formato de excel ...................................31
Ilustración 14 Código de lectura de archivo xlsx ....................................................32
Ilustración 15 Código para dar formato a las preguntas ........................................32
Ilustración 16 Transaction para configurar una batería ..........................................33
Ilustración 17 Código para subir el archivo al servidor...........................................34
Ilustración 18 Código para obtener las baterias activas.........................................34
Ilustración 19 Código para obtener las baterias inactivas ......................................35
Ilustración 20 Código para el borrado de las baterias ............................................35
Ilustración 21 Objeto json para un cuestionario .....................................................36
Ilustración 22 Transaction para guardar un cuestionario .......................................37
Ilustración 23 Código para almacenar imágenes y logos en el servidor ................38
Ilustración 24 Código para obtener todas la imágenes ..........................................39
Ilustración 25 Directorio de subida de archivos......................................................39
Ilustración 26 Código para enviar un archivo .........................................................40
Ilustración 27 Consulta de un cuestionario ............................................................40
Ilustración 28 Ingresar campos en la cabecera del documento .............................41
Ilustración 29 Creando estilo para el documento de eportacion ............................42
Ilustración 30 Ingresando los valores al documento de exportación ......................42
Ilustración 31 Consulta para la grafica 1 ................................................................43
Ilustración 32 Consulta para la grafica 2 ................................................................44
Ilustración 33 Repositorio de api rest .....................................................................44
Ilustración 34 Estructura del proyecto administrador .............................................45
Ilustración 35 Integrar redux en el administrador ...................................................45
Ilustración 36 Interceptor de errores ......................................................................45
Ilustración 37 Servicio de login ..............................................................................46
Ilustración 38 Pantalla de login ..............................................................................46
Ilustración 39 Configuración de la batería paso 1 ..................................................47
Ilustración 40 Secciones de configuración de batería ............................................47
Ilustración 41 Configuración de la batería sección 1..............................................48
Ilustración 42 Seccion dos de configuracion de la batería .....................................49
Ilustración 43 Configuración de la batería paso 3 ..................................................49
Ilustración 44 Servicio para guardar la configuración de la batería........................50
Ilustración 45 Pantalla de listado de baterias .........................................................50
Ilustración 46 Servicio para obtener el listado de baterias .....................................51
Ilustración 47 Pantalla para agregar imágenes ......................................................52
Ilustración 48 Listado de imágenes........................................................................52
Ilustración 49 Listado de logos...............................................................................52
Ilustración 50 Pantalla de exportación por cuestionario .........................................53
Ilustración 51 Exportacion de questionarios por batería ........................................53
Ilustración 52 Servicio para exportar archivo .........................................................54
Ilustración 53 Efecto para descargar archivo .........................................................54
Ilustración 54 Servicio para obtener estadísticas ...................................................55
Ilustración 55 Código para insertar una grafica......................................................55
Ilustración 56 Llenado de datos de una grafica......................................................55
Ilustración 57 Pantalla de gráficas .........................................................................56
Ilustración 58 Repositorio de administrador ...........................................................56
Ilustración 59 Pantalla de bienvenida ....................................................................57
Ilustración 60 Formulario de batería ......................................................................58
Ilustración 61 Servicio para obtener información de una batería ...........................58
Ilustración 62 Creación de formualarios.................................................................58
Ilustración 63 Creación de carpetas.......................................................................59
Ilustración 64 Componente de barra de progreso ..................................................59
Ilustración 65 Evento de teclado ............................................................................59
Ilustración 66 Tipo de pregunta 1...........................................................................60
Ilustración 67 Segundo tipo de pregunta ...............................................................60
Ilustración 68 Tercer tipo de pregunta ...................................................................61
Ilustración 69 Cuarta tipo de pregunta ...................................................................61
 CAPÍTULO I
INTRODUCCIÓN
1.1 Resumen
El siguiente proyecto se llevó a cabo en la empresa Garage Coders S.A de C.V la
cual se dedica al desarrollo de aplicaciones web y movil. El objetivo del proyecto es
realizar una aplicación web para generar baterías de preguntas a partir de un
archivo excel, el cual se puede enviar por correo para que el usuario pueda
responder ciertas preguntas, ya que actualmente no se cuenta con algún sistema
para capturar la información acerca de los requerimientos de futuros proyectos que
tenga la empresa.

Para realizar este sistema, se llevó a cabo una planeación bajo la metodología ágil
Scrum, que es muy útil para proyectos que tienen un tiempo de desarrollo
demasiado corto. Se realizaron reuniones diarias asi como historias de usuarios e
springs semanarios.

Se encontraron diferentes problemas entre los cuales fueron los multiples proyectos
elaborados durante la estadia, además del corto tiempo establecido para la
elaboración del proyecto interno asignado.

Al término del proyecto los resultados que se esperan por parte de la empresa son
la optimización de los tiempos al momento de realizar tareas administrativas tales
como cotizaciones de nuevos proyectos y evaluaciones a empleados.
1.3 Introducción
Cotizar un proyecto es fundamental para toda empresa de software, se necesita
varias herramientas para recaudar información acerca del nuevo proyecto a
desarrollar, por esa razón Garage coders opto por la implementación de tecnología
de vanguardia para el almacenamiento y control de sus futuros proyectos.

El proyecto que se presenta a lo largo de esta Memoria de estadía se enfoca en

desarrollar un generador de báterias para registrar cotizaciones de proyectos o bien
recaudar cierta información y todas esa información se guardan en una base de
datos; para lograr la implementación se utiliza el conjunto de herramientas que son
node, javascript, angular y mysql. Esto es de suma importancia ya que no se lleva
un buen control de los resultados obtenidos puede llegar a generar incongruencias
en las cotizaciones.

En esta memoria de estadía se presentan los siguientes capítulos:

En el capítulo I se muestra la visión general del proyecto una idea clara y precisa
del trabajo que se propone, asi como una recopilacion de cada uno de los capítulos.

En el capítulo II se muestra toda la información de la empresa donde se realizó la

estadia laboral, como los antecentedes históricos, politicas y su filosofía.

En el capítulo III se señala cada uno de las definiciones de los recursos. En la cual
el conjunto de recursos es todo lo que se necesita para la realización de lo que se
pretende.

En el capítulo IV se describe cada una de las actividades que se realizaron, la

planeacion y las acciones que se llevaron acabo para cumplir con el objetivo
propuesto.

En capítulo V y último se demuestran los resultados, problemas encontrados

durante la ejecución del proyecto y todas las fuentes de información que se
investigaron para llevar acabo este magnífico proyecto.
1.4 Justificación
En lo que va del año en la empresa Garage coders S.A de C.V, en el área de
dirección general se ha tenido una mala organización para las recopilar toda la
información de un nuevo proyecto, no cuentan con una herramienta que le permita
obtener toda esa información por lo que conlleva mucha pérdida de tiempo al
momento de realizar una cotización y desinteres por parte del cliente al no ver
respuesta pronta.

De esta problemática garage coders se ve con la necesidad de implementar un

software. Este proyecto se enfoca en ayudar a disminuir el tiempo de realización de
una cotización y concentrarlas en un solo lugar. El proyecto permitirá mejorar
drásticamente el tiempo de recopilacion de la información necesaria para determinar
una cotización en un plazo menor y poder mostrarle al cliente un costo aproximado
de su proyecto al instante.

1.5 Objetivo general

Desarrollar módulos para el sistema de la empresa Garage Coders, para responder
a las necesidades de los clientes utilizando herramientas como node, javascript,
angular y mysql.

1.6 Objetivo específicos

• Implementar módulo de lectura de archivos de excel
• Implementar módulo de configuración de baterias
• Implementar módulo de subida de imágenes
• Implementar módulo de exportacion de cuestionarios
• Implementar módulo de autenticación
• Implementar módulo de estadísticas
• Implementar módulo para responder cuestinarios
• Implementar módulo de generar invitaciones
CAPÍTULO II
MARCO
HISTORICO
2.1 Antecedentes históricos
Garage Coders se especializa en el desarrollo de aplicaciones móviles, creando
herramientas que mejoran tu vida. Cuenta con 8 años de experiencia durante los
cuales ha desarrollado más de 100 Apps y Sistemas.

Han implementando soluciones para empresas en ámbitos públicos y privados

incluyendo desarrollos de Apps en iOS y Android, soluciones de FinTech,
aplicaciones Cliente - Servidor, desarrollos en la nube, documentación e
implementación de ERP, CRM Y CMS.

Ilustración 1 Logo de la empresa

2.2 Misión
Brindar una experiencia de primer mundo a nuestros socios, clientes y usuarios
finales a través del desarrollo de herramientas innovadoras que enriquezcan su vida
diaria.

2.3 Visión
Posicionarnos como la 1er opción de nuestros clientes, generando productos de alta
calidad que impacten positivamente la vida de millones de personas.

2.4 Políticas
Algunas de las politicas que se acabo dentro de la empresa son las siguientes

• Políticas de uso de UBER

• Reglamento interno de trabajo
• Políticas de incidencias y permisos
• Código de ética
2.5 Valores
• Innovación
• Honestidad
• Trabajo en equipo
• Calidad

2.6 Principales áreas de la empresa

Las principales áreas operativas de la compañía son las siguientes:

• Dirección general
• Recursos humanos
• Marketing
• Desarrollo móvil
• Desarrollo cloud
2.7 Descripción del área de realización de estadia
El área de desarrollo cloud se encarga tanto del desarrollo de aplicaciones web
como del mantenimiento del servidor de la empresa.

Personal:

• Misael Ivan Gonzalez Uscanga.

• Gustavo Hernandez Martinez.
• Ricardo Alcantara Gomez.
• Juan Abdel Espinosa Angeles.
• Jorge Arturo Arellano del Aguila.

Funciones:

• Diseño de servicios y aplicaciones web.

• Diseñar, analizar e implementar nuevas aplicaciones según las necesidades
solicitadas, así como mantenimiento a las ya existentes.
• Mantener la confidencialidad.
• Mantener la confidencialidad se la información automatizada.
• Mantenimiento de servidor.
• Realizar copias de seguridad, visionado de logs y análisis de rendimiento.
2.8 Organigrama
A continuación se muestra el organigrama de la empresa en la que se desarrolló la
estadía, resaltando el departamento en donde se implementaron los proyectos
asignados.
 CAPÍTULO III
MARCO TEORICO
3.1 Batería de preguntas
Una batería es un instrumento de investigación que consiste en una serie de
preguntas y otras indicaciones con el propósito de obtener información de los
consultados formado por un conjunto de preguntas que deben estar redactadas de
forma coherente, y organizadas, secuenciadas y estructuradas de acuerdo con una
determinada planificación, con el fin de que sus respuestas puedan ofrecer toda la
información.

3.2 Javascript
JavaScript, es uno de los más potentes e importantes lenguajes de programación
en la actualidad, por tres enfoques claros: es útil, práctico y está disponible en
cualquier navegador web.

3.3 Node js
Node.js es una forma de ejecutar JavaScript en el servidor, además de mucho más.
Node.js es un entorno Javascript del lado del servidor, basado en eventos. Node
ejecuta javascript utilizando el motor V8, desarrollado por Google para uso de su
navegador Chrome. Aprovechando el motor V8 permite a Node proporciona un
entorno de ejecución del lado del servidor que compila y ejecuta javascript a
velocidades increíbles.

3.4 Aplicaciones spa

Un single-page-application (SPA), o aplicación de página única es una aplicación
web o es un sitio web que cabe en una sola página con el propósito de dar una
experiencia más fluida a los usuarios como una aplicación de escritorio. En un SPA
todos los códigos de HTML, JavaScript, y CSS se carga de una vez o los recursos
necesarios se cargan dinámicamente como lo requiera la página y se van
agregando, normalmente como respuesta de las acciones del usuario.

3.5 Angular
Es un framework para aplicaciones web desarrollado en TypeScript, de código
abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones
web de una sola página(SPA). Su objetivo es aumentar las aplicaciones basadas
en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo
para hacer que el desarrollo y las pruebas sean más fáciles.

3.6 Angular material

Angular Material es una excelente opción para programadores, que no tienen
habitualmente habilidades de diseño. Usando las directivas que ofrece podremos
producir aplicaciones que son estéticamente brillantes, junto con una serie de
componentes adicionales al propio HTML con un look & feel muy trabajado.Los
podremos producir prácticamente sin necesidad de escribir nada de CSS,
consiguiendo diseños muy atractivos, aprovechando, pero sin necesidad de
dominar, características modernas de CSS como por ejemplo Flexbox. Además, las
opciones de personalización también dependerán de nosotros y de cómo queramos
modificar el diseño y crear nuestras propias interfaces y componentes, puesto que
usar Material Design no implica que estemos restringidos a las directivas que dan
ya listas.

3.7 Redux
Redux es como una base de datos, es en un almacén para el estado de la aplicación.
Pero un almacén que gestiona sus cambios de manera predictiva. Combina dos
patrones: Action para el envío de comandos para actualizar el estado del almacén;
y Observable para la subscripción a cambios en el estado del almacén. Desacopla
los emisores de acciones de los receptores de cambios en los datos.

Para lograrlo tendremos que cumplir una serie de principios y utilizar unos
elementos predefinidos. Esto introduce capas de abstracción y burocracia que
inicialmente complican el desarrollo. Pero a medio plazo harán que mantener la
aplicación sea mucho más sencillo y seguro.

3.8 Git
Git, es un software de control de versiones diseñado por Linus Torvalds. La pregunta
es ¿qué es control de versiones? Pues bien, se define como control de versiones a
la gestión de los diversos cambios que se realizan sobre los elementos de algún
producto o una configuración del mismo es decir a la gestión de los diversos
cambios que se realizan sobre los elementos de algún producto o una configuración,
y para los que aún no les queda claro del todo, control de versiones es lo que se
hace al momento de estar desarrollando un software o una página web.
Exactamente es eso que haces cuando subes y actualizas tu código en la nube, o
le añades alguna parte o simplemente le editas cosas que no funcionan como
deberían o al menos no como tú esperarías.
3.9 Bitbucket
Bitbucket es un sitio de alojamiento para los sistemas de control de versiones
distribuidos (DVCS) Git y Mercurial. La oferta de servicios incluye un gestor de
incidencias y wiki de manera gratuita. Bitbucket ofrece planes comerciales y
gratuitos. Se ofrece cuentas gratuitas con un número ilimitado de repositorios
privados (que puede tener hasta cinco usuarios en el caso de cuentas gratuitas)
desde septiembre de 2010.
3.10 Mysql
MySQL es una de las base de datos más importantes actualmente en el mercado.
Se puede definir a MySQL, como un gestor de base de datos relacional, multiusario
y multihilo. Usada para mover grandes cantidades de información, muchos
proyectos en internet como Facebook o Twitter nacieron con este SG
3.11 Pm2
PM2 o Process Manager 2, es un administrador de procesos Node.js de producción
de código abierto que ayuda a los desarrolladores y Devops a administrar las
aplicaciones Node.js en el entorno de producción. En comparación con otros
administradores de procesos como Supervisord, Forever, Systemd , algunas
características clave de PM2 son el equilibrio automático de carga de la aplicación,
la configuración declarativa de la aplicación, el sistema de implementación y el
monitoreo.

3.12 Trello
Trello es un software de administración de proyectos con interfaz web y con cliente
para iOS y android para organizar proyectos.
3.13 Slack
Slack es una herramienta de colaboración en la que tu equipo y tú podéis trabajar
para llevar a cabo vuestros proyectos. Slack te permite abarcar todos los detalles,
desde los primeros pasos de proyectos hasta conversaciones sobre presupuestos.

3.14 Zoom
Zoom.us es una de las plataformas más destacadas de video conferencias y
servicios de conferencias web, más de 250.000 empresas en el mundo la utilizan.

3.15 Invision
InVision es un programa para prototipar apps muy parecido a Marvel, aunque más
potente en algunos aspectos que comentaremos en esta entrada. Es parecido a
Marvel en el sentido que Marvel parte de la idea que el usuario suba sus pantallas
ya diseñadas y a partir de ahí poder añadirle diferentes interactividades mediante
gestures y diferentes transiciones entre pantallas. Así, el funcionamiento básico de
InVision (y Marvel) es que el usuario diseñe previamente unas pantallas con otro
programa para hacer prototipos, luego suba esos prototipos a la plataforma y
empiece a añadirle interactividades de manera que esas pantallas queden
entrelazadas entre sí.
 CAPÍTULO IV
METODOLOGÍA
4.1 Descripción de actividades
Para tener un mejor control de las horas que lleva desarrollar cada modulo se
represento mediante un WBS (Work Breakdown Structure) el tiempo aproximado de
cada funcionalidad, con la ayuda del Ing. Carlos Benjamin se estimó el siguiente
tiempo

Ilustración 2 WBS

Con un total de 302 horas para la implementación del proyecto.

Además el uso de otras tecnologías para llevar un control de las actividades, el

software que se utiliza es trello.

Ilustración 3 Tablero TRELLO

4.2 Planeación
Se decidió utilizar la metodología ágil scrum en el cual se realizaba daily meetings
(reuniones diarias) para saber el estatus de la aplicación. Durante las reuniones
iniciales se especificaron los requerimientos del proyecto así como el equipo de
trabajo y la arquitectura del software.

En una de las principales fortalezas de Garage coders es su certificación en ISO

9001, eso implica llevar un proceso muy robusto para el desarrollo de software el
cual hablaremos de las principales etapas a lo largo del capítulo.

Junto con el Ing. Carlos Benjamin se realizó el análisis y se establecieron los

modulos principales que se necesitaban para cumplir con el objetivo, por último se
acordó el alcance que tendría el proyecto, además de esto se estableció junto con
al director general que primero serian realizadas las pantallas de bajo y alto nivel
con la ayuda de la Lic. En diseño gráfico Ericka Gomez para que establecerían el
diseño de la aplicación y deberían ser aprobadas por el directivo, de esta manera
finalizada está etapa se procedería a la programación de la lógica.

Ilustración 4 Proceso de desarrollo de software

4.3 Implementación
En los primeros días en la empresa con la ayuda del lider técnico el Ing. Jonathan
Carrillo se crearon los repositiorios para cada aplicación los cuales consta de un
servicio rest y dos aplicaciones frontends desarrolladas con angular, la herramienta
que se utilizó para el control de versiones es git existen muchas otras en el mercado
pero garage coders implemento la herramienta ya mencionada y el alojamiento que
utiliza para sus repositorios en la empresa es Bitbucket, como se muestra en la
siguiente imagen

Ilustración 5 Repositorio bitbuket

En las primeras semanas con la ayuda de la Lic. En diseño gráfico Ericka Gomez
se diseñaron prototipos de la aplicación y se subieron al software Invision para darle
interactividad.

Lo que se muestra a continuacion corresponde al apartado del administrador.

Se puede apreciar que es un panel sencillo con una barra lateral y una cabecera

Ilustración 6 Diseño de alto nivel para listado de báterias

En la siguiente imagen se despliega un modal donde se observa que contiene tres

pasos para configurar una batería.

Ilustración 7 Diseño de alto nivel para configurar una báteria

Las siguientes imágenes corresponde a la parte para que el usuario responda las
preguntas planteadas.

En el diseño se muestra la pregunta con sus respuestas la cuales el usuario podrá

seleccionar y pasar a la siguiente pregunta. Este tipo de pregunta es de opción
múltiple con imágenes.

Ilustración 8 Diseño de alto nivel tipo de pregunta 1

En la siguiente pantalla se muestra el mismo diseño que el anterior pero con la

diferencía que este tipo pregunta corresponde a opción múltiple pero con texto.

Ilustración 9 Diseño de alto nivel tipo de pregunta 2

Una vez cubierto la parte del diseño de bajo y alto nivel por parte de la Lic. En diseño
gráfico como se había acordado en previas juntas, se procedió a diseñar el
diagrama de la base de datos con la herramienta mysql workbeanch, toda la base
de datos fue normalizada hasta su tercera forma normal.

Ilustración 10 Diagrama de base de datos

La parte del análisis para definir las relaciones y entidades fue realizada con la
ayuda del Ing. Gustavo Hernandez.

Se utilizó una nomenclatura para el nombrado de la tablas la cual fue proporcionado

por parte del estandar de Garage coders.

A continuación se dio inicio con la creacion del servicio rest el cual alimenta de
información a ambas aplicaciones (panel de administrador y a la aplicación de
preguntas).

La tecnología que se utilizó para el servicio rest es node js, una de las tecnologías
con mas alta demanda en el mercado laboral por su velocidad y facilidad de uso.
Ya iniciado el proyecto se crea su archivo de configuracion inicial como se muestra
a continuación

Ilustración 11 Configuración inicial node js

Como anteriormente mencionamos tenemos descritos las actividades y la primera

actividad planeada es la creacion del login, para ello se utiliza una librería llamada
passport js, la cual ayuda en toda la parte de seguridad de la aplicación.

Ilustración 12 Login con node js y passport js

Se crea una autheticación basica, por lo cual las credenciales son encriptadas
Se procede con la segunda actividad, para ello se va a explicar como esta
estructurado el archivo que se utiliza para crear las preguntas, es muy nesario que
se utilize esta plantilla, ya que si no se llegara a utilizar no tendria un correcto
funcionamiento.

Ilustración 13 Estructura de la batería en formato de excel

Cada pregunta puede tener varias repuestas y con ellas valores, para separar todas
las respuetas disponibles se utiliza un pipe ” | ” y al mismo modo para dar valor a
cada respuesta.

Existen cuatro modos de preguntas, el primer modo es pregunta de opción múltiple

con texto, el segundo modo es pregunta de opción múltiple con imágenes que
previamente se hayan subido al servidor, la tercer modo es una pregunta abierta
sencilla y el último modo es una pregunta abierta extensa. Las preguntas de opción
múltiple se puede especificar el máximo de opciones que tendra el usuario para
elegir.

El siguente código muestra como se puede leer el archivo de excel, para ello se
utiliza una librería llamada xlsx js.
Aquí se muestra el método que se desarrollo para la lectura del archivo

Ilustración 14 Código de lectura de archivo xlsx

el código anterior da una estructura un poco complicado de leer, asi que con la
ayuda de una función se desacopla toda la información obtenida y se le damos un
formato fácil de utilizar.

Ilustración 15 Código para dar formato a las preguntas

Continuamos con la siguiente actividad que seria la configuración de una batería,
esto implica el manejo de muchas tablas las cuales son las siguientes tbBattery,
tbCondition, tbFieldBattery, tbTheme de modo que comenzamos una transacción
por si algo no sale bien, regresamos todo tal cual estaba.

Ilustración 16 Transaction para configurar una batería

Este es solo el servicio para almacenar la información a la base de datos.

Para subir el archivo excel en el servidor se implementa una nuevo método que se
encarga de renombrar el archivo anteriormente subido y de validar que no exista un
archivo y batería con el mismo nombre para no provocar un error en el sistema al
momento de consultar el archivo de excel y desaclopar todas las preguntas que
contiene. Al mismo tiempo validamos que el fichero subido sea un documento tipo
xlsx y tambien que el libro de excel contenga una hoja con el nombre de preguntas,
dicho esto dado que no lo tenga, no se podrá leer el archivo y esto provocaria un
error al mostrar las preguntas al usuario.
Se muestra el siguiente código que se utilzo para subir un fichero

Ilustración 17 Código para subir el archivo al servidor

Se procede a la siguente actividad en lo que va del servicio rest, que es el de listar

todas la baterías disponibles, lo dividimos en dos, lo que son las baterias
actualmente activas y las baterias inactivas.

Ilustración 18 Código para obtener las baterias activas

En la parte de las baterias inactivas solo se hace un borrado logico, cambiándo el
estatus de la batería de esa manera la consulta se hara un filtro por el estatus.

Ilustración 19 Código para obtener las baterias inactivas

Como ya habiamos mencionado hicimos solo un borrado logico de las baterias para
ello se aplico la siguiente consulta.

Ilustración 20 Código para el borrado de las baterias

La siguiente actividad que se realizó fue el guardado de las respuestas que cada
usuario responde, esta es la parte mas complicada del desarrollo ya que va ligado
con la exportacion de las repuestas en un libro de excel.

Para poder guardar un cuestionario respondido por el usuario, se necesita recibir un

objeto json mediante el servicio rest como la siguiente estructura

Ilustración 21 Objeto json para un cuestionario

Teniendo la estructura mencionada anteriormente se puede seguir con el guardado

de la información en la base de datos.

Para almacenar las respuestas como se muestra en el diagrama de base de datos,

se utiliza las tablas tbQuestionnaire, tbAnswer, tbQuestionnaireField, tbBattery asi
que de la misma manera en como se guardo la configuración de la baterias, se va
a guardar el cuestionario empezando con una transacción de mysql y utilizando
funciones para hacer consultas en la base de datos.
El uso de las promesas es fundamental para controlar los insersión de los datos en
cada tabla, se recupera el id de cada registro guardado.

Ilustración 22 Transaction para guardar un cuestionario

Una vez completada correctamente la transacción, el cuestionario estara guardado

de forma correcta con sus campos y sus respuestas, para que mas adelante
podamos consultar la información de un cuestionario para realizar la creacion de un
archivo excel y asi podamos exportarlo. Una cosa que falto mencionar es que antes
de guardar el cuestionario evaluaremos la cantidad que acumulo y asi darle un
precio aproximado del proyecto dependiendo que condiciones se hayan configurado
en la batería al momento de crearla.
La siguiente actividad es de guardar las imágenes en el servidor, dichas imágenes
son utilizadas para las preguntas de tipo opción múltiple con imágenes, para poder
utilizar las imágenes solo es necesario saber el nombre de la imagen con cual se
almaceno en el servidor y colocar en el plantilla, tambien realizamos el guardado de
logos, para que pueda ser cambiado de forma dinamica en la parte de las
respuestas de los usuarios, posteriormente realizamos una consulta para devolver
todo el listado de imágenes y logos.

Ilustración 23 Código para almacenar imágenes y logos en el servidor

Ahora se va a realizar una consulta para obtener todas las imágenes subidas al
servidor y asi el administrador pueda tomar una serie de opciones y decida si
borrarlas o ver el nombre para poder utilizarla en la plantilla de creación de una
batería y de la misma manera se consulta los logos disponibles para poder dar uso
al momento de configurar una batería.
Tambien se comprueba que no exista una imagen con el mismo nombre, para que
no cause conflicto al momento de enviar la imagen.

Ilustración 24 Código para obtener todas la imágenes

Las imágenes, logos y archivos xlsx se guardan en el siguiente directorio, para

poder ser encontradas de una manera mas fácil.

Ilustración 25 Directorio de subida de archivos

Por lo consiguiente se debe de enviar la imagen o logo que el usuario requiera para
mostrarlas en la pregunta o en listado de imágenes a través de un método propio
de node js y una función implementada para mandar ficheros de forma segura
Ilustración 26 Código para enviar un archivo

La siguiente actividad que se realizó fue la exportación de los cuestionarios por

batería o individual, para llevar acabo esta tarea se utilizó una librería llamada
excel4node la cual fue de gran ayuda por la buena documentacion que contiene y
su fácil implementación.

Para poder exportar un cuestionario individualmente se hace una consulta

avanzada por obtener toda la información del cuestionario, teniendo toda la
información se crea un método para diseñar el archivo excel a exportar

Ilustración 27 Consulta de un cuestionario

Al momento de usar la función para diseñar el libro de excel se debe de tomar en

cuenta que ya tenemos toda la información necesaria para colocarla en el archivo,
lo primero que tenemos que hacer es obtener cada pregunta y campos que se
utilizaron para recaudar información y ingresarlos en la caberecera del documento
y darle un estilo diferente para que se pueda notar la diferencia entre la cabecera y
las filas con los registros, además de que si se trata de exportar una batería y esta
batería contiene varios cuestionarios no se puede insertar varias veces las
preguntas como cabeceras entonces lo que se hace es validar que si la batería
cuenta con mas de dos cuestionarios solo se coloca una vez las preguntas en la
cabecera del documento y además de que nombramos una hoja del libro llamada
respuestas

Ilustración 28 Ingresar campos en la cabecera del documento

Como ya se ha mencionado a las cabeceras le damos un estilo diferente, le se

coloca el texto de un tamaño mas grande y además el estilo bold lo se coloca en
verdadero y además le actise va la función de alinamiento para que si es una
pregunta muy grande que disparse por lo alto y no por lo ancho.
Ilustración 29 Creando estilo para el documento de eportacion

Como se puede observar en la imagen anterior es muy sencillo crear los estilos,
ahora lo se aplicará depediendo si sea una fila o la cabecera

Ilustración 30 Ingresando los valores al documento de exportación

La siguiente actividad se trata de generar dos gráficas con estadísticas, la primera

estadística corresponde a una en general que son los números de respuestas de
usuarios que tiene cada batería y la segunda estadística es para cada batería
individualmente y se obtiene el total de cada precio aproximado que se realizó.

Para realizar la primera estadística realizamos una consulta avanzada la cual se

puede filtrar por fechas y se envia la información que posteriormene se puede
obtener la información de la consulta a través del servicio rest.

Ilustración 31 Consulta para la grafica 1

Para la segunda estadística realizamos de la misma manera una consulta avanzada

y con la diferencia que se hace un filtro por la batería que sea desea consultar, las
fechas entre la cual se necesita saber la información y el valor de cada condicion
que se tiene en la configuración de la batería, como se podrá observar en la imagen
siguiente la consulta completa.
Ilustración 32 Consulta para la grafica 2

La anterior actividad fue la última en cuanto al servicio rest, se procede en subir

todos los cambios al repositorio y verificar que todo este en orden

Ilustración 33 Repositorio de api rest

Una vez concluida la aplicación de servicio rest, se puede pasar a crear el proyecto
del administrador
Ilustración 34 Estructura del proyecto administrador

Y ahora toca consumir los servicios ya creados anteriormente e integrar redux para
el manejo de los estados de la aplicación.

Para integrar redux, agregamos los siguientes lineas de código en el archivo

app.module.ts

Ilustración 35 Integrar redux en el administrador

Ahora se crea un fichero ts que servira como interceptor del token y de los errores
que vayan ocurriendo en el servio rest para tener un buen control.

Ilustración 36 Interceptor de errores

Teniendo integrado redux y realizado nuestro interceptor en nuestra aplicación se
pasa a crear nuestro primer servicio para hacer llamadados al servicio rest que
corresponde a la primera actividad del login.

Ilustración 37 Servicio de login

En la imagen anterior se muestra el servicio como habiamos mencionado en la

aplicación del servicio rest, las credenciales son encriptadas y recuperadas por un
interceptor. Ahora se va a mostrar el diseño final del login en el cual cuenta con dos
campos el usuario y contraseña

Ilustración 38 Pantalla de login

Una vez realizado la parte del login se pasa a la siguiente actividad que es la
configuración de una nueva batería, la cual fue la actividad mas complicada en
cuanto a la programacion del diseño. Para configurar una batería cuenta de tres
pasos los cuales son personalización, configuración, resumen. Comenzemos con el
primer paso personalización, lo principal seria pedir la plantilla de la batería la cual
contiene las preguntas, podrá elegir entre varios temas los cuales ya fueron creados
en la parte de la aplicación de preguntas y por último tendra que seleccionar el logo
que previamente se haya subido al servidor, una vez completado este paso podrá
pasar satisfactoriamente al siguiente paso.

Ilustración 39 Configuración de la batería paso 1

El paso dos es el mas extenso se trata de configurar la batería, se divide en dos

secciones la primera sección es la información general y la segunda parte es la
configuración para el usuario.

Ilustración 40 Secciones de configuración de batería

En la sección de configuracíon de batería se ingresa información esencial para su
funcionamiento, consta de dos campos y una lista de condiciones. En el campo de
nombre interno se utiliza para mantener una referencia para el administrador, el
campo de título es necesario para poder mostrar al usuario el título de la batería y
por último y mas importante valor para la configuración son las condiciones, ya que
sin ellas no se podrá darse un valor aproximado del proyecto, con el boton que
aparece a la derecha podrá crear mas condiciones

Ilustración 41 Configuración de la batería sección 1

En la sección dos de configuracion de la batería encontramos con la configuración

del usuario la cual contiene dos columnas la primer columna muestra los campos
que se pueden elegir y tambien ingresar nuevos campos, posteriormente se puede
elegir los campos y en la columna de la derencha apareceran los campos
seleccionados de tal manera que se puede escoger si van hacer obligatorios o no y
una de las grandes funcionalidades es de arrastar y soltar los campos seleccionados
para poder ordenarlo y que se mueste en ese orden al momento de ser requerido
en la aplicación de preguntas para el usuario.

Ilustración 42 Seccion dos de configuracion de la batería

Y por último paso se muestra un resumen de todo lo que configuro y le se muestra

dos botones, uno para confirmar y otro para regresar al paso anterior

Ilustración 43 Configuración de la batería paso 3

Despues de tener toda la información de la configuración, cremos un servicio el cual
se comunica con el servicio rest para guardar toda la información en la base de
datos.

Ilustración 44 Servicio para guardar la configuración de la batería

La siguiente actividad es consumir el servicio rest para obtener todas las baterias
guardadas, para ello se diseña la pantalla con css, html y posteriormente crear un
servicio la cual se comunique con la api.

Ilustración 45 Pantalla de listado de baterias

A continuación se muestra como obtenemos la información a través del servicio que

se conecta con la api rest y como se recupera esa información y en la parte del
diseño se va colocando con una directiva de angular que permite interar cada
registro y la mostrarlos al administrador.

Ilustración 46 Servicio para obtener el listado de baterias

La siguiente imagen muestra el código para desplegar la información obtenida en

la vista del administrador, se utiliza la directiva de angular ngFor el cual proporciona
una ayuda al momento de crear el mismo diseño de la tarjeta para colocar la
información de cada batería, para las baterias activas como las inactivas se utilizan
el mismo fragmento de código

La siguiente actividad que realizamos es la subida de imágenes, para ello al igual

como se viene haciendo se necesita crear un servicio para que se puede comunicar
con la api rest y de esa manera se guardan las imágenes en el servidor para que
posteriormente se consulte, la forma en la se suben las imágenes sirve para subir
los logos, la unica direrencia es la propiedad llamada tipo de imágen, que se envía
cuando se selecciona cualquier apartado.

Ilustración 47 Pantalla para agregar imágenes

Ahora lo que se tiene que hacer es en listar las imágenes disponibles, el proceso es
muy similar como cuando se consultas las baterias, entonces para evitar ser
redundante se salta toda la parte de la explicacion en el código y únicamente se
mostrará como se ve en el diseño para el administrador.

Ilustración 48 Listado de imágenes

Ilustración 49 Listado de logos

Una vez terminada la parte de las imágenes se continuó con la exportacion de los
cuestionarios y las baterias, los cuales se diseñaron las siguientes pantallas para
las descargas de los archivos

Ilustración 50 Pantalla de exportación por cuestionario

Ilustración 51 Exportacion de questionarios por batería

Para exportar los cuestionarios se crea un servicio para poder descargarlos, en el
servicio se tiene que especificar que tipo de respuesta que será, en este caso es
blob(objeto binario grande)

Ilustración 52 Servicio para exportar archivo

Una vez programado el servicio se llama en un efecto de redux, para posteriormente

descargar el archivo con la ayuda de un método de angular (saveAs)

Ilustración 53 Efecto para descargar archivo

Para exportar los cuestionarios de forma individual se hace de la misma manera

que el código anterior por esa razon no lo se muestra para evitar volver a explicar
lo que ya se hizo.

Por último en la parte del administrador se implementaron gráficas para mostrar las
estadísticas que se realizaron en el servicio rest, para el uso de las gráficas se utilizó
la librería de ng2Charts, la cual tiene una amplia variedad de gráficas y se integra
muy bien con angular, a continuacion se va a mostrar como fue el proceso de
integracion.

Como en todos los demas, se crea un servicio para poder obtener la información
que se necesita en las gráficas.

Ilustración 54 Servicio para obtener estadísticas

Una vez adquirida la información, usamos un efecto de redux para extraer la

información y compartirla con la clase de estadísticas.

El código de abajo se utiliza para implementar las gráficas en la parte de diseño

Ilustración 55 Código para insertar una grafica

Ahora se muestra como se ingresa los datos en cada grafica

Ilustración 56 Llenado de datos de una grafica

De los valores que se obtuvieron, los se ingresa en el arreglo de datos y el de

etiquetas, con eso en la parte de diseño en html que se mostro anteriormente se
liga los arreglos en la propiedad que corresponda.
Asi es como quedó el diseño final de las gráficas

Ilustración 57 Pantalla de gráficas

Esa fue la última actividad en la parte del administrador, entonces lo último que
queda por hacer es verificar que todo los cambios esten actualizados en el
repositorio que se asignó para el proyecto.

Ilustración 58 Repositorio de administrador

Una vez terminado la parte del administrador, comenzamos a desarrollar la última
aplicación y la mas importante de todo el proyecto donde se va a mostrar todas la
preguntas al usuario.

No se mostrará la integración con redux porque anteriormente se realizó con la

aplicación de admnistrador.

Para empezar el proyecto se definió la pantalla de bienvenida el cual muestra el

título de la batería que se definió en la configuración y una pequeña descripción del
cuestionario que se va a aplicar

Ilustración 59 Pantalla de bienvenida

Una vez terminado de crear la pantalla de bienvenida, se procede a diseñar e

implementar la parte del formulario donde depende de los campos que se hayan
elegido y el orden que se definió en la configuración de la batería se van a mostrar
tal cual, y el usuario podrá responder y dado el caso que hayan seleccionado
algunos campos como obligatorio no podrá avanzar hasta que las contesten.
Ilustración 60 Formulario de batería

Para poder implementar los formularios dinámicos se necesita utilizar la clase

formbuilder de angular, pero primero se necesita la información de la batería la cual
tiene los campos a utilizar.

Lo primero es crear un servicio para obtener dichos datos

Ilustración 61 Servicio para obtener información de una batería

Y ahora con la ayuda de formbuilder se crea los formularios con los campos

Ilustración 62 Creación de formualarios

Una vez terminado con el formulario se pasa a la última pantalla para diseñar los
cuatros tipos de preguntas y para ello se creó un componente para cada uno, como
se muestra a continuación

Ilustración 63 Creación de carpetas

Gracias a redux se puede mantener el estado de la pregunta y asi saber si ya se

contestó o cuantos máximo de opciones puede responder el usuario, para ello se
crea un componente que se encarga de avanzar a la siguiente pregunta.

Ilustración 64 Componente de barra de progreso

Uno de los requirimientos propuestos por el del director general es que las
preguntas se cambien con tan solo presionar la tecla de flecha derecha o izquierda,
para lo antes mencionado se implementa eventos de angular para poder dar esa
interactividad.

Ilustración 65 Evento de teclado

Se muestra el diseño final de cada tipo de pregunta.

La primera es de tipo opción múltiple con texto, se puede seleccionar solo una
opción.

Ilustración 66 Tipo de pregunta 1

El segundo tipo de pregunta es de opción múltiple con imágenes, las cuales esas
imágenes se encuentran en la aplicación del administrador.

Ilustración 67 Segundo tipo de pregunta

El tercer tipo de pregunta es de opción abierta

Ilustración 68 Tercer tipo de pregunta

Y por último es la pregunta de opción abierta pero con campo mas largo para el
usuario puede escribir una respuesta larga

Ilustración 69 Cuarta tipo de pregunta

4.4 Evaluacion
Al terminar el sistema generador de baterías, se desarrollaron pruebas para el
correcto funcionamiento y al igual forma se realizó un chequeo mediante una lista
de verificación como la siguiente.

Actividades a realizar Realizadas Observaciones

Si No

Implementar módulo de lectura de archivos de excel X

Implementar módulo de configuración de baterias X

Implementar módulo de subida de imágenes X

Implementar módulo de exportacion de cuestionarios X

Implementar módulo de autenticación X

Implementar módulo de estadísticas X

Implementar módulo para responder cuestionarios X

Implementar módulo de generar invitaciones X

Implementar módulo de lectura de archivos de excel X

La lista de verificación anterior muestra los criterios de evaluación de la empresa

para validar que el proyecto estuviera terminado, basándose en los módulos que
fueron solicitados al inicio del proyecto, los cuales fueron entregados en tiempo y
forma, por lo cual se considera que todo se realizó de manera pertinente.
 CAPÍTULO V
RESULTADOS Y
DISCUCIÓN
5.1 Resultados
El proyecto se da por concluído esto gracias a la colaboración de todo el equipo que
participo activamente en el y al director general por la orientacion en el proceso de
desarrollo de software , se tuvieron reuniones diarias bajo la metodología scrum.

Respetando las actividades y objetivos establecidos para el proyecto, se puede

concluir que los resultados fueron muy favorables y cumplieron con las expectativas
del cliente, ya que se lograron resolver las necesidades más importantes dentro de
la empresa, tales como mejorar el control de las cotizaciones de tal manera que no
existirá mas perdida de información y tiempo además de que todo quedará
registrado con fecha y hora exactas para contar con un historial de cotizaciones.

Ilustración 70 Pantalla de resultado final

5.2 Discusión
Uno de los problemas que me enfrente durante la estadía fue el manejo y
mantenimiento del servidor de la empresa, no tenia el suficiente conocimiento para
desplegar las aplicaciones a producción, con la ayuda de los ingenieros logre
superar esta obstaculo y ademas forme conocimientos muy solidos.

Ademas de la participación en multiple proyectos durante la realización de mi

estadía que provoco que los tiempos para el desarrollo del proyecto se vieran muy
apretados

Pero no todo fue problemático, las enseñanzas por parte de mis profesores y mi
aprendizaje autodidacta me ayudaron a desarrollar varios proyectos durante mi
estadía.

5.3 Conclusiones
La correcta interpretación de los requerimientos, el uso de las tecnologías
empleadas y la comunicación con el equipo de trabajo, permitieron dar solución a la
problemática que existía en garage coders,

Se tiene una gran satisfacción al concluir el proyecto aunque claramanete fue un

desafío profesional, por lo cual al término de este trabajo reconozco que, a pesar
de las dificultades iniciales adquirí habilidades nuevas, especialmente en un área
que no conocía como el admnistrador de servidores. Gracias a todo lo aplicado
conseguí empleo que me ayudará a fortalecer mis conocimientos y crecer de
manera profesional.
5.4 Referencias bibliograficas

Caballero, J. G. (20 de 01 de 2019). devcode. Obtenido de devcode:

https://devcode.la/blog/que-es-javascript/
Alvarez, M. A. (16 de 02 de 2016). desarrolloweb. Obtenido de desarrolloweb:
https://desarrolloweb.com/articulos/angular-material.html
Blanco, N. (15 de 10 de 2018). openwebinars. Obtenido de openwebinars:
https://openwebinars.net/blog/que-es-angular/
Basalo, A. (22 de 09 de 2018). academia-binaria. Obtenido de academia-binaria:
https://academia-binaria.com/el-patron-redux-con-ngrx-en-angular/
González, A. (12 de 07 de 2016). tuprogramacion. Obtenido de tuprogramacion:
http://www.tuprogramacion.com/glosario/que-es-mysql/
Palazón, J. P. (19 de 05 de 2017). juanonlab. Obtenido de juanonlab:
https://www.juanonlab.com/blog/es/uso-de-pm2
Tabares, Y. (26 de 03 de 2016). prezi. Obtenido de prezi:
https://prezi.com/lvvgqw2hwhi4/batería-de-preguntas/