INSTITUTO TECNOLÓGICO SUPERIOR DE ACAYUCAN

INFORME FINAL DE
RESIDENCIA PROFESIONAL

ÁMBITO: LABORAL Y PRODUCTIVO

APLICACIÓN WEB PROGRESIVA DE ASIGNACIÓN Y

REPARTO DE TAREAS PARA LA EMPRESA REDYTEL
TELECOMUNICACIONES.

PRESENTA(N): C. MILKA SARAI PÉREZ JOSÉ No.140B0090

De la especialidad de ING. EN SISTEMAS COMPUTACIONALES

ISIC-2010-224

Período AGO 18 – ENE 19

Asesor Interno: MCCT. FRANCISCO GIBRAN GARCÍA CANDELARIO

Asesor Externo: ING. ALDO RAMÓN SÁNCHEZ BARRAGÁN

Acayucan, Ver. ENERO 2019

INDICE
INDICE.................................................................................................................................................. 2
INDICE DE FIGURAS ............................................................................................................................. 3
INDICE DE TABLAS ............................................................................................................................... 3
CAPÍTULO I. INTRODUCCIÓN ............................................................................................................... 4
Antecedentes generales de la empresa. ............................................................................................. 4
Misión, visión y valores ....................................................................................................................... 5
Croquis ................................................................................................................................................ 6
1.1 Planteamiento del problema. ....................................................................................................... 7
1.2 Justificación. .................................................................................................................................. 8
1.3 Objetivo. ........................................................................................................................................ 9
1.4 Factibilidad técnica, económica y operativa ............................................................................... 10
Factibilidad Operativa. ...................................................................................................................... 10
Factibilidad Técnica. .......................................................................................................................... 10
Factibilidad económica...................................................................................................................... 10
Alcances y limitaciones. .................................................................................................................... 11
CAPITULO II. FUNDAMENTOS TEÓRICOS .......................................................................................... 12
Tecnologías de la información. ......................................................................................................... 12
¿Qué son las aplicaciones web? ........................................................................................................ 12
Características de las aplicaciones web. ........................................................................................... 13
Tipos de aplicaciones web................................................................................................................. 13
Lenguajes de programación. ............................................................................................................. 19
JavaScript........................................................................................................................................... 19
ECMAScript 6. .................................................................................................................................... 20
Node.js .............................................................................................................................................. 20
React.js .............................................................................................................................................. 21
TypeScript.......................................................................................................................................... 21
Tedious. ............................................................................................................................................. 22
SQL Server Express. ........................................................................................................................... 23
Tipo de investigación......................................................................................................................... 24
Técnica de recolección de datos. ...................................................................................................... 24
Instrumentos usados para el tratamiento de información. .............................................................. 24
Modelo Incremental.......................................................................................................................... 25

2
Fases del Modelo Incremental .......................................................................................................... 25
Problemas a resolver priorizándolos................................................................................................. 27
Cronograma de Activades. ................................................................................................................ 28
........................................................................................................................................................... 28
Procedimientos y descripción de las actividades realizadas. ............................................................ 28
Conclusión. ........................................................................................................................................ 31
Recomendaciones. ............................................................................................................................ 32
Bibliografía ........................................................................................................................................ 33
Sitios Web.......................................................................................................................................... 33
Anexos.

INDICE DE FIGURAS
Figura 1. Logo de Redytel ....................................................................................... 4
Figura 2. Ubicación de la empresa Redytel. ............................................................ 6
Figura 3. Organigrama de la empresa. .................................................................... 7
Figura 4. Ejemplo aplicación web estática. ........................................................... 14
Figura 5. Ejemplo aplicación web dinámica........................................................... 15
Figura 6. Ejemplo tienda virtual o comercio electrónico ........................................ 16
Figura 7. Ejemplo portal web app .......................................................................... 16
Figura 8. Ejemplo aplicación web animada ........................................................... 17
Figura 9. Ejemplo de aplicación web con “Gestor de Contenidos” ........................ 18
Figura 10. Logo JavaScript.................................................................................... 19
Figura 11. Logo ECMAScript 6. ............................................................................. 20
Figura 12. Logo Node.js ........................................................................................ 20
Figura 13. Logo React.js ....................................................................................... 21
Figura 14. Logo Typescript .................................................................................... 22
Figura 15. Logo SQL Server.................................................................................. 23
Figura 16. Cronograma de actividades ................................................................. 28

INDICE DE TABLAS
Tabla 1. Factibilidad Operativa .............................................................................. 10
Tabla 2. Factibilidad Económica............................................................................ 10
Tabla 3. Procedimientos y descripción de las actividades realizadas. .................. 30

3
CAPÍTULO I. INTRODUCCIÓN

Durante años los sitios web ha sido relegados en los dispositivos móviles sobre las
apps nativas debido a problemas de rendimiento, compatibilidad y, sobre todo, de
conectividad. Las aplicaciones web progresivas (progressive web apps) prometen
resolver estos problemas.

Las aplicaciones web progresivas están a medio camino ya que son básicamente
páginas web, pero mediante el uso de service workers y otras tecnologías se
comportan más como aplicaciones normales que como aplicaciones web. Mediante
los service workers y otras tecnologías las aplicaciones web progresivas pueden
seguir ejecutándose en segundo plano sin tener que vivir dentro del navegador.
Puesto que, en el móvil es posible instalarlas como una aplicación más.

(Spero, 2017)

Antecedentes generales de la empresa.

Es una empresa dedicada principalmente a enlaces Inalámbricos de Internet,

radiocomunicación, energía solar, circuitos cerrados de video vigilancia, torres.
Desde sus inicios en 2005 la empresa ha logrado posicionarse rápidamente en la
preferencia de los clientes en proveer servicios de internet principalmente.

Figura 1. Logo de Redytel

4
Misión, visión y valores

Misión.

Proveer del acceso a las tecnologías de la información usando infraestructura de

telecomunicaciones de última generación, gestionado por personal altamente
calificado para brindar un servicio acorde a las necesidades de nuestros usuarios
comprometidos al desarrollo del país y orientados a superar los desniveles
culturales, económicos y sociales.

Visión.

Brindar excelencia en el servicio de Internet con valores y principios propios de una

organización moderna, dinámica y creativa. Satisfacer los requerimientos de
comunicación con un soporte personalizado y especializado para lograr que cada
vez más usuarios nos consideren parte de su organización.

Valores.

• Responsabilidad: El cumplimiento de las obligaciones o cuidado al hacer o

decidir algo, o bien una forma de responder que implica el claro conocimiento
de que los resultados de cumplir o no las obligaciones, recaen sobre uno
mismo.
• Honestidad: Un valor moral fundamental para entablar relaciones
interpersonales basadas en la confianza, la sinceridad y el respeto mutuo.
• Trabajo en equipo: Promoviendo y apoyando un equipo homogéneo,
polivalente e interdepartamental.
• Colaboración: Nos integramos con nuestros proveedores y clientes para
mejorar día a día la calidad con los mismos para satisfacer sus necesidades.
• Servicio: Cumplimos con nuestros compromisos y nos hacemos
responsables de nuestro rendimiento en todas nuestras decisiones y
acciones, basándonos en una gran voluntad de servicio por y para nuestros
clientes.

5
 • Innovación y mejora continua: Nos damos cuenta de la importancia de mirar
hacia el futuro, por tanto, ofrecemos lo último del mercado para dar un apoyo
y servicio óptimo a nuestros clientes.
• Transparencia: La implicación y compromiso del personal no sería posible
sin una absoluta transparencia en los procesos, disponiendo el personal de
la máxima información de la empresa.

Croquis.

Dirección: Moctezuma 820, colonia Villalta, Cp.96026. Acayucan, Veracruz.

Figura 2. Ubicación de la empresa Redytel.

6
 Recursos Humanos
Instalaciones
Jefe de soporte Sistemas Conectividad y
Sistemas
tecnico. Redes
Gerente general Consultoria
Ventas

Almacén

Figura 3. Organigrama de la empresa.

1.1 Planteamiento del problema.

La empresa Redytel Telecomunicaciones cuentan con una persona que es el

encargado de asignar las tareas de los trabajadores de la empresa día con día de
acuerdo a la hora de entrada de cada trabajador, en ocasiones la persona a cargo
no se da abasto de poder llevar un adecuado registro de los empleados ya que
algunos llegan después de la hora. Esto da como consecuencia que algunos
empleados tengan más tareas asignadas en el día, debido a la inadecuada
administración de tareas para los empleados y llevando a que al final del día el
encargado no obtenga una analítica de productividad de cada empleado.

7
1.2 Justificación.

Uno de los motivos principales que impulsaron para realizar este proyecto fue la
falta de eficiencia que tiene la empresa con sus 24 trabajadores a la hora de asignar
las tareas, este proyecto será de gran utilidad para la empresa debido a que podrá
mejorar su eficiencia a la hora de llevar a cabo la asignación de tareas para cada
trabajador, dando como resultado que el gerente de la empresa logré obtener una
analítica de cada trabajador.

La solución propuesta es desarrollar una aplicación web progresiva que permita que
una vez que el usuario tenga en su dispositivo nuestra PWA, podemos enviar push
notificaciones y que esta funcione de manera offline, gracias a algo llamado
los service worker, que básicamente es un script que hace de intermediario entre
nuestra aplicación y el dispositivo móvil, este cachea todos nuestros archivos y nos
permite enviar notificaciones para poder llevar a cabo la administración de tareas de
los empleados de la empresa Redytel Telecomunicaciones logrando así obtener un
mejor control de las tareas. Ya que se pretende que tanto el administrador esté al
tanto de los reportes de cada usuario, así como a los usuarios finales que estarán
pendientes de las tareas que han enviado ellos o sus colaboradores registrados en
la misma tarea asignada, así también como conseguir al final de cada día una
analítica de productividad mediante reportes individuales de cada empleado.

8
1.3 Objetivo.

Objetivo general:

Desarrollar una aplicación web progresiva encargada de repartir tareas de manera

automática una vez que el empleado haya registrado su entrada laboral y generar
al final del día un reporte para conocer la analítica de productividad de cada
empleado.

Objetivos específicos.

• Estudiar los recursos necesarios para el desarrollo de la aplicación web

progresiva.
• Definir un patrón de diseño para la aplicación web progresiva.
• Generar un boilerplate que funcione como servidor de la versión de
desarrollo.
• Crear la versión de producción de nuestra app, ocupando webpack.
• Generar los service worker de la PWA.
• Generar reportes individuales de cada usuario.
• Implementar el plan de pruebas para la aplicación.

9
1.4 Factibilidad técnica, económica y operativa
Factibilidad Operativa.
Debido a que el sistema es pequeño, solo se necesitará los siguientes
requerimientos:

• Visual Studio Code.

• Computadora Lenovo procesador AMD A6-9220 a 2,50 Ghz- memoria
RAM de 8 GB DDR$ a 2133 MHz-Disco duro de 1 TB a 5400 RPM (a
considerar).
• JavaScript.
• React
• Microsoft Office 2010.
Tabla 1. Factibilidad Operativa

Factibilidad Técnica.
En la empresa Redytel Comunicaciones se cuenta con los requisitos, por lo que no
existirá algún factor que pueda intervenir para llevar a cabo su realización,
concluyendo e indicando que si es factible el desarrollar técnicamente el proyecto.

Factibilidad económica.
En el estudio de factibilidad económica, se determina cual es el costo para llevar a
cabo el desarrollo de la aplicación web progresiva de la empresa Redytel
telecomunicaciones.

N.º Cargo Costo Costo

Individual Total
1 Ing. Sistema (Líder 2000,00 2000,00
del Proyecto)
2 Analista/Diseñador 960,00 960,00

1 Ingeniero del 1200,00 1200,00

Software

1 Programador 2000,00 2000,00

Total $6160,00

Tabla 2. Factibilidad Económica

10
Concluyendo que el proyecto es factible, ya que la empresa no cuenta en estos
momentos con una correcta administración de las tareas correspondiente a cada
empleado, así como el conocimiento de la analítica de productividad que logra cada
empleado al mes. Por lo que la realización de esta aplicación web logrará mejorar
la eficiencia y eficacia de la empresa Redytel Telecomunicaciones.

Alcances y limitaciones.

Alcances

• Las notificaciones push son una función de la Web con un gran potencial y,
si se usan con cuidado, se suelen considerar una práctica recomendada en
lo que aplicaciones móviles se refiere.
• La aplicación al ser hibrida podrá evolucionar integrándole nuevos
componentes.
• El acceso podrá hacerse desde cualquier dispositivo con conexión a internet.

Limitaciones

• Se requiere de tener acceso a la red de la empresa.

• Se requiere de internet para el acceso a las bases de datos.
• Personal que se rehúse al cambio.

11
CAPITULO II. FUNDAMENTOS TEÓRICOS

Tecnologías de la información.
“Las tecnologías de la información y la comunicación (TIC) está presente en todos
los niveles de nuestra sociedad actual, desde las más grandes corporaciones
multinacionales, a las pymes, gobiernos, administraciones, universidades, centros
educativos, organizaciones socioeconómicas y asociaciones profesionales y
particulares.” (Ramón, 2010)

Las TIC se desarrollan a partir de los avances científicos producidos en los ámbitos
de la informática y las telecomunicaciones. Las TIC son el conjunto de tecnologías
que permiten el acceso, producción, tratamiento y comunicación de información
presentada en diferentes códigos ya sea texto, imagen, sonido. (Noemi Villoria
Liliana, 2009)

El elemento más representativo de las nuevas tecnologías es sin duda el ordenador

y más específicamente, Internet. Como indican diferentes autores, Internet supone
un salto cualitativo de gran magnitud, cambiando y redefiniendo los modos de
conocer y relacionarse del hombre.

¿Qué son las aplicaciones web?

“Las aplicaciones Web son aquellas aplicaciones que los usuarios pueden utilizar
accediendo a un servidor web a través de internet o de una intranet mediante un
navegador. En otras palabras, es una aplicación software que se codifica en un
lenguaje soportado por los navegadores web (HTML, JavaScript, Java, etc.) en la
que se confía la ejecución del navegador”. (Villoría, 2009)

Entonces, una Aplicación Web es aquella que debe permitir a los usuarios localizar
información de forma rápida y sencilla en un sitio Web en el que se almacena gran
cantidad de contenido.

12
Características de las aplicaciones web.
Las Aplicaciones Web tienen muchas características que abarcan su
comportamiento, su uso y su complejidad, se nombran algunas de sus
características más sobresalientes de las Apps Web.

1. Son progresivas: Funcional para cada usuario, sin importar el navegador

pues su principio es la mejora progresiva.

2. De diseño responsive: Disponible para ordenador, Tablet, móvil o cualquier

otro dispositivo.

3. Funcionan independientemente de la conectividad: Capacidad de trabajar sin

conexión o con poca conectividad.

4. Se encuentran actualizadas: Siempre se mantiene actualizada gracias a los

servidores.

5. Son localizables: Se identifica como aplicaciones debido a que pueden ser

encontradas por motores de búsqueda.

6. Son enlazables: Se pueden compartir fácilmente mediante su URL.

Tipos de aplicaciones web.

Hay diversos tipos de Páginas Web, a continuación, se muestra una clasificación de
acuerdo al tipo de función de cómo se presentan las web apps con el contenido que
deben mostrar.

Se distinguen 6 tipos de aplicaciones web, y son las siguientes:

13
Aplicación web estática

Las aplicaciones web estáticas son aquellos sitios enfocados principalmente a

mostrar una información permanente, donde el navegante se limita a obtener dicha
información, sin que pueda interactuar con la página Web visitada. Así mismo están
construidas principalmente con hipervínculos o enlaces (links) entre las páginas
Web que conforman el sitio, este tipo de Web son incapaces de soportar
aplicaciones Web como gestores de bases de datos, foros, consultas On line, e-
mails inteligentes, etc.

Esta es una opción más que suficiente para aquellos sitios Web que simplemente
ofrecen una descripción de su empresa, quiénes somos, donde estamos, servicios,
Ideal para empresas que no quieren muchas pretensiones con su sitio Web,
simplemente informar a sus clientes de sus productos y su perfil de empresa.

Por regla general suelen estar desarrolladas en HTML y CSS. Aunque también
pueden mostrar en alguna parte de la aplicación web objetos en movimiento como
por ejemplo banners, GIF animados, vídeos, etc. También pueden desarrollarse
aplicaciones web con jQuery y Ajax.

Figura 4. Ejemplo aplicación web estática.

14
Aplicación web dinámica

Las aplicaciones web dinámicas son mucho más complejas a nivel técnico. Utilizan
bases de datos para cargar a información, y estos contenidos se van actualizando
cada vez que el usuario accede a la web app. Generalmente cuentan con un panel
de administración (llamado CMS) desde dónde los administradores pueden corregir
o modificar los contenidos, ya sean textos o imágenes.

Existen muchos lenguajes de programación para desarrollar aplicaciones web

dinámicas. Los lenguajes PHP y ASP son los más comunes porque permiten una
buena estructuración del contenido. El proceso de actualización es muy sencillo y
ni siquiera necesita entrar en el servidor para modificarlo, además de que permite
implementar muchas funcionalidades como foros o bases de datos. El diseño, y no
solo el contenido puede modificarse al gusto del administrador.

Figura 5. Ejemplo aplicación web dinámica.

Tienda Virtual O Comercio Electrónico

El desarrollo es más complicado porque debe permitir pagos electrónicos a través

de tarjeta de crédito, PayPal, u otro método de pago. El desarrollador crea un panel
de gestión para el administrador. A partir de este se suben los productos, para poder
actualizarlos o eliminarlos, así como gestionar pedidos y los pagos.

15
Algunos ejemplos de tiendas que tienen una aplicación web comercial podrían ser
la de cualquier gran empresa como el corte inglés en la que la web app se ajusta al
dispositivo móvil como una aplicación móvil, permitiendo interactuar con ella como
si fuera una app nativa.

Figura 6. Ejemplo tienda virtual o comercio electrónico

Portal web app

Portal Web es un tipo de aplicación en el que la página principal permite el acceso

a diversos apartados, categorías o secciones. Puede haber: foros, chats, correo
electrónico, un buscador, zona de acceso con registro, contenido más reciente, etc.

Figura 7. Ejemplo portal web app

16
Aplicación web animada.

La animación en las páginas webs, se asocia a la tecnología FLASH. Este tipo de

programación permite presentar contenidos con efectos animados. A su vez
también diseños más creativos y modernos, es una de las tecnologías más
utilizadas por diseñadores y creativos. El inconveniente de desarrollar aplicaciones
web animadas es que para temas de posicionamiento web y optimización SEO, este
tipo de tecnología no es la más adecuada ya que los buscadores no pueden leer
correctamente las informaciones.

Figura 8. Ejemplo aplicación web animada

Aplicación web con “Gestor de Contenidos”

En el caso del desarrollo de aplicaciones web en las que el contenido se debe ir

actualizando continuamente, se necesita instalar un gestor de contenidos (CMS) a
través del cual el administrador pueda ir realizando los cambios y actualizaciones él
mismo.

Estos gestores son intuitivos y muy sencillos de gestionar. Algunos ejemplos de

gestores de contenidos son:

17
WordPress: Es el más extendido de los gestores de contenidos. Existe mucha
información en la red, tutoriales y guías para personalizarlo, entenderlo y además
es gratuito.

Joomla: Es el segundo en el top CMS, tras WordPress. Aunque no tiene muchos

usuarios, tiene una comunidad potente y es también muy intuitivo.

Drupal: Es un CSM de software libre. Es muy adaptable, y recomendado

especialmente para generar comunidades.

Este tipo de aplicación web es muy común entre páginas de contenidos: blogs
personales, blogs corporativos, blogs profesionales, páginas de noticias, de
artículos, de medios de comunicación.

Figura 9. Ejemplo de aplicación web con “Gestor de Contenidos”

18
Lenguajes de programación.
Al decidir los lenguajes de programación a utilizar, se nos hizo la recomendación de
utilizar las tecnologías de JavaScript, es por ello que se optó por utilizarlas, dado a
su capacidad para las aplicaciones web.

JavaScript.
¿Qué es?

Es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se

define como orientado a objetos, basado en prototipos, imperativo, débilmente
tipado y dinámico.

¿Para qué es útil?

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado

como parte de un navegador web permitiendo mejoras en la interfaz de usuario y
páginas web dinámicas, aunque existe una forma de JavaScript del lado del servidor
(Server-side JavaScript o SSJS).

Su uso en aplicaciones externas a la web, por ejemplo, en documentos PDF,

aplicaciones de escritorio (mayoritariamente widgets) es también significativo. En el
caso de nuestro proyecto el lenguaje se utilizará tanto del lado del servidor como
del cliente, y esto será porque el lenguaje node.js está basado en JavaScript solo
que de lado del servidor y del lado del cliente para que el usuario tenga una mejor
experiencia dentro del proyecto.|

Figura 10. Logo JavaScript

19
ECMAScript 6.
¿Qué es?

ECMAScript es una especificación de lenguaje de programación publicada por

ECMA International. Actualmente está aceptado como el estándar ISO 16262.
Comenzó a ser desarrollado en 1996, basándose en el lenguaje JavaScript
propuesto por Netscape Communications Corporation. ECMAScript define un
lenguaje de tipos dinámicos ligeramente inspirado en Java y otros lenguajes del
estilo de C. Tiene características de programación orientada a objetos mediante
objetos basados en prototipos y pseudoclases.

Figura 11. Logo ECMAScript 6.

Node.js
¿Qué es?

Node.js es un entorno de ejecución para JavaScript construido con el motor de

JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo
y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de
Node.js, npm, es el ecosistema más grande de librerías de código abierto en el
mundo. Fue creado por Ryan Dahl en 2009 y su evolución está apadrinada por la
empresa Joyent, que además tiene contratado a Dahl en plantilla. Este es el
lenguaje principal del proyecto se usará durante todo el proyecto y en él se realizará
el servidor web, así como procesará todas las peticiones que realizará el cliente.

Figura 12. Logo Node.js

20
React.js
¿Qué es?

React fue creada por Jordan Walke, un ingeniero de software en Facebook.

Influenciado por XHP, un marco de componentes de HTML para PHP. Es una
biblioteca JavaScript de código abierto para crear interfaces de usuario con el
objetivo de animar al desarrollo de aplicaciones en una sola página. Es mantenido
por Facebook, Instagram y una comunidad de desarrolladores independientes y
compañías. React intenta ayudar a los desarrolladores a construir aplicaciones que
usan datos que cambian todo el tiempo. Su objetivo es ser sencillo, declarativo y
fácil de combinar.

Actualmente estaremos haciendo uso de esta herramienta create-react-app para el

proyecto que en este nos compete, de esta manera nos beneficia ofertando la
creación de interfaces a través de su lenguaje, permitiendo crear nuevas vistas para
esta y diferentes aplicaciones renderizando el funcionamiento de la misma.

Figura 13. Logo React.js

TypeScript.
¿Qué es?

TypeScript es un lenguaje de programación de código abierto desarrollado por

Microsoft, el cual cuenta con herramientas de programación orientada a objetos,
muy favorable si se tienen proyectos grandes. Anders Hejlsberg, arquitecto principal
del desarrollo del lenguaje de programación C#, es el principal participante en el
desarrollo de este lenguaje.

21
TypeScript convierte su código en Javascript común. Es llamado también Superset
de Javascript, lo que significa que, si el navegador está basado en Javascript, este
nunca llegará a saber que el código original fue realizado con TypeScript y ejecutará
el Javascript como lenguaje original.

La principal característica de Typescript es el tipado estático.

Características principales:

• Las variables tienen un tipo de dato.

• Los valores sólo se pueden asignar a variables del tipo correspondiente.
• Interfaces
• Genéricos
• Casting de datos (conversión de tipos)
• Argumentos con tipo
• Tipo de retorno para las funciones.

Figura 14. Logo Typescript

Tedious.
¿Qué es?

Tedious es un paquete de Node que proporciona una implementación del protocolo

TDS, que se utiliza para interactuar con las instancias de SQL Server de Microsoft.
El nombre tedioso se deriva simplemente de una pronunciación rápida, ligeramente
confusa, de las letras T, D y S.

22
Soporte de plataforma
Tedious es JavaScript puro, al igual que sus dependencias. Por lo tanto, debe
ejecutarse sin cambios en cualquier plataforma donde se admita Node.

Soporte de SQL Server

Tedious es compatible con todas las versiones de SQL Server desde 2000 hasta
2017.

SQL Server Express.

¿Qué es?

SQL Server Express es una edición gratuita y muy capaz de SQL Server con la que
se puede desarrollar todo tipo de aplicaciones (de escritorio o web) con las únicas
limitaciones del tamaño de la base de datos y la escalabilidad. Puedes crear tantas
bases de datos como necesites y también crear varias instancias.

Para la mayor parte de las aplicaciones que puede crear una pequeña o mediana
empresa o un startup es más que suficiente en cuanto a tamaño y rendimiento,
incluso en aplicaciones web ya que no hay límite de conexiones simultáneas.

Es posible utilizarla en aplicaciones comerciales e incluso redistribuirla integrada

con tu aplicación, por lo que las posibilidades son muy amplias.

Figura 15. Logo SQL Server

23
Tipo de investigación.
Este tipo de investigación a realizar será de tres tipos; De campo, y experimental.
Será de campo porque dicho tipo de investigación es el proceso que, utilizando el
método científico, permite obtener nuevos conocimientos en el campo de la realidad
social. O bien, estudiar una situación para diagnosticar necesidades y problemas a
efectos de aplicar los conocimientos con fines prácticos.

Por lo tanto, al empezar a realizar este proyecto se interactúa directamente con la

empresa, se analizan los problemas a resolver y se aplican los conocimientos
correspondientes para cada uno de ellos.

Por último, por qué una investigación Experimental. La investigación experimental

es lo que llamamos un verdadero experimento. Se trata de un experimento en donde
el investigador manipula una variable y controla/aleatoriza el resto de las variables.

Por lo que al ser la primera vez que cada uno de nosotros realiza este tipo de
proyecto, se está efectuando un experimento en varios aspectos, se manipulan y se
controlan las diversas variables a utilizar.

Técnica de recolección de datos.

La técnica de recolección de datos utilizada en este proyecto es la entrevista directa
o dirigida, ya que esta fue estructurada por medio de un cuestionario al gerente de
la empresa.

Instrumentos usados para el tratamiento de información.

• Computadoras.
• Celulares.
• Hojas de Papel.
• Lapiceros.
• Cables USB.
• Memorias USB.

24
Modelo Incremental.

El modelo Incremental, es una metodología de la programación muy utilizada hoy

en día, pues su comodidad de desarrollo permite que te obtenga un producto final
mucho más completo y exitoso. Se trata especialmente de la combinación de los
modelos lineal e iterativo o bien, modelo de cascada y prototipos. Básicamente
consiste en completar varias iteraciones de lo que es el modelo de cascada, pero
sin completar ninguna, haciendo iteraciones lo que se hace es crear una evolución
en el producto, permitiendo que se agreguen nuevas especificaciones,
funcionalidades, opciones, funciones y lo que el usuario requiera después de cada
iteración. (Mario Tamayo, 2004)

En pocas palabras, el Modelo Incremental repite el modelo de cascada una y otra

vez, pero con pequeñas modificaciones o actualizaciones que se le puedan ir
agregando al sistema. De este modo el usuario final se ve sumamente sumergido
en el desarrollo y puedes proporcionarle un resultado óptimo (Roberto Sampieri
Hernandez, 2010).

Fases del Modelo Incremental

El modelo iterativo o incremental, cuenta con algunas fases de desarrollo de

software que realmente no tienen mucha complejidad, vamos a verlas:

1. Inicialización.

Como en todo modelo de desarrollo, debe haber una inicialización, aquí se

puede hablar de dar una idea, de tener algunos requisitos que se buscan en
el proyecto y ciertas especificaciones que se pueden manejar. No es
necesario que se haga una lista total de requerimientos pues recordemos
que el proyecto se basa en iteraciones, así que el proyecto puede ir
evolucionando poco a poco.

25
2. Periodos de Iteración.

Durante el desarrollo del proyecto, es cuando damos inicio a las iteraciones.

La primera iteración se realiza con las características iniciales, básicamente
al final de la primera iteración, queda un pequeño prototipo de lo que será el
proyecto, pero se puede volver a inicializar la iteración y realizar
modificaciones en los procesos, como el análisis y las especificaciones o
funciones que el usuario final requiere para su sistema. El número de
iteraciones que se realicen son ilimitadas y dependerá tanto del desarrollador
como del usuario final. Si nuestro objetivo es que el cliente o la persona que
necesita el trabajo quede completamente satisfecha, entonces nos veremos
en la necesidad de hacer la cantidad de iteraciones que se requieran al final
del día.

26
Problemas a resolver priorizándolos.

Problema 1. Falta de equidad en la asignación de cargas de trabajo en los

empleados.

La aplicación web asignará equitativamente las tareas de manera automática a cada

uno de los empleados.

Problema 2. Falta de analítica de productividad de cada empleado.

La aplicación web brindará un reporte de cada empleado de acuerdo a sus

actividades realizadas en el mes.

Problema 3. Baja eficiencia por parte de los trabajadores por falta de actividades.

La aplicación web asignará trabajos de acuerdo al perfil de cada empleado.

Problema 4. El encargado de repartir las tareas se retrasa demasiado en su jornada

laboral ya que debe de esperar a que todos los trabajadores lleguen para poder
empezar a asignar los trabajos.

Con la implementación de la pwa el encargado ya no se retrasará, ya que cada que

el trabajador llegue a la empresa de manera automática se les dará a conocer sus
actividades del día.

27
Cronograma de Activades.

Figura 16. Cronograma de actividades

Procedimientos y descripción de las actividades realizadas.

ACTIVIDADES TIEMPO REALIZADO DESCRIPCIÓN

1. Entrevista con La actividad se basó en una

asesor externo. entrevista realizada en la
20 y 21 de Agosto del 2018
misma empresa, con el fin
de recaudar información
fundamental para la
creación del proyecto.

Posteriormente se realizó
un estudio profundo de la
2. Análisis de 22 al 24 de Agosto del empresa, donde se
Requerimientos. 2018. especificó las
características
operacionales que tendrá el
software a desarrollar.

28
 Se realizo la recopilación
3. Recopilación de la 27 al 29 de Agosto del de información de la
información. 2018 empresa todo esto a través
de entrevistas,
observación, indagación y
demás técnicas específicas

Todo lo recabado se
4. Organización de la 30 de Agosto al 5 de ordenó de tal manera en la
información Septiembre del 2018 que se pudiera trazar un
plan de desarrollo del
proyecto a realizar.

Se realizó un diseño para

5. Definir un patrón de 06 Septiembre al 11 de la creación de la página
diseño para la PWA septiembre del 2018 web progresiva.

Se realizó un análisis para

elegir las herramientas para
el proyecto, para ello se
presentó una explicación
de cada programa y
6. Análisis y elección complemento de ellos,
de las herramientas 12 al 14 de Septiembre del dejando claro las
a utilizar. 2018 características y ventajas
de su uso, seleccionando al
fin trabajar con VScode,
Node.js, React.

7. Creación de la 17 de Septiembre al 28 de Se realiza la creación de la

base de datos en Septiembre del 2018 base de datos con nuestras
SQL server. tablas a utilizar.

Se diseñó y se realizó la
8. Creación de los 01 de Octubre al 08 de creación de los modelos de
modelos utilizando Octubre del 2018 nuestra base de datos.
sequelize.

Se realizaron los diseños

9. Diseño de los
resolvers y typedef.
10.- Creación de los
resolvers y typedef
utilizando Graphql.
09 de Octubre al 12 de correspondientes según el
Octubre del 2018 uso que se le dará en la
aplicación.
Se realizaron los resolvers
15 de Octubre al 24 de y typedef según las
Octubre del 2018 necesidades a utilizar para
llevar a cabo el proyecto.

29

11.- Programación de
algoritmo para selección de
candidatos a las tareas
programadas.
12.-Integración de la BD en
sequelize con Graphql
13.- Creación del modelo
para historiales
14.- Configuración de los
modelos en Sequelize.
15. Pruebas de asignación
de tareas a usuarios.
Tabla 3. Procedimientos y descripción de las actividades realizadas.
25 de Octubre al 07 de
Noviembre del 2018
08 de Noviembre al 14 de
Noviembre del 2018
15 de Noviembre al 23 de
Noviembre del 2018.
26 de Noviembre al 07 de
Diciembre del 2018
10 de Dicembre al 18 de
Diciembre del 2018
30
Se realizó un algoritmo
mediante el cual realiza la
asignación de tareas de
acuerdo a las habilidades
del trabajador.
Se realizó la integración de
consultas y operaciones
(mutaciones), diseñado
para la que la construcción
de aplicaciones.
Se realizó el modelo de
historial del trabajador de
acuerdo a sus horas de
llegadas.
Configuración de los
modelos a utilizar de
acuerdo a las necesidades
de la aplicación.
Se realizaron las pruebas
para la asignación de
tareas mediante la API
programada
Conclusión.

Las aplicaciones web progresivas ofrecen muchos beneficios para los usuarios de
la empresa, ya que resultan ser accesibles, son adaptables y responsive, no
requieren instalación desde un store de aplicaciones, funcionan offline gracias a los
service workers, una PWA es capaz de trabajar con conectividad limitada o nula.
Esta característica marca una diferencia sustancial con las webs convencionales,
ya que una vez se han instalado los service workers de la PWA, esta tendrá un
funcionamiento similar a una app instalada en el dispositivo. Se contó con una
buena respuesta del cliente sobre el uso de la API.

El proyecto realizado ha contribuido de manera muy importante para identificar y

resaltar los puntos que hay que cubrir y considerar para llevar a cabo una
implementación exitosa de los sistemas de información.

Dentro de los puntos que considero tiene más importancia dentro de un proyecto de
esta naturaleza son el detectar cuáles son las necesidades reales de las personas
que trabajan día a día con los sistemas, que los procesos operativos de una
empresa se apeguen a la realidad del trabajo diario y no sean un obstáculo
burocrático, que se involucre a los usuarios en el proceso de implementación de los
sistemas de manera que se sepa que es lo que ellos esperan y qué es lo que no
esperan de él, definir de manera clara y lo más tangible posible los beneficios
económicos, laborales, y de cualquier otra índole que se piensan alcanzar con los
sistemas nuevos, de manera que las personas dentro de la empresa sepan cómo
se van a ver beneficiados particularmente.

31
Recomendaciones.

1. Se abren utilizando un navegador móvil. En general, funcionarán mejor

con Chrome de Google.
2. Instalar correctamente los service workers de la PWA, para así lograr una
buena respuesta del cliente sobre el uso de la PWA.
3. Equipo de cómputo en condiciones óptimas.

32
Bibliografía
Mario Tamayo. (2004). Proceso de la investigacion cientifica. Editorial Limusa, S.A. De C.V. Grupo
Noriega Editores Balde Ras 9.

Noemi Villoria Liliana. (2009). Aplicaciones web 2.0. google docs.

Ramón, C. S. (2010). Tecnologías de la información y la comunicación (módulo). ideas propias sl.

Roberto Sampieri Hernandez. (2010). Metodología De La Investigación. Mcgraw-hill /

Interamericana Editores, S.A. De C.V. Quinta Edición.

Villoría, L. N. (2009). Aplicaciones web 2.0 . En L. N. Villoría, Aplicaciones web 2.0 (pág. pg.15).
Ediciones parainfo, sa.

Sitios Web.
Creador de cronogramas.

https://www.tomsplanner.es/?template=new#doc=AwrNSdOjKWspfrUgGupf

33
Anexos.

Configuración de la base datos.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var sequelize_1 = __importDefault(require("sequelize"));
var basededatos = process.env.BD || "Redytel";
var usuario = process.env.USER || "sa";
var pwd = process.env.PWD || "milka";
var host = process.env.HOST || "127.0.0.1";
var dev = new sequelize_1.default(basededatos, usuario, pwd, {
dialect: "mssql",
host: host,
operatorsAliases: false,
pool: {
acquire: 30000,
idle: 10000,
max: 5,
min: 0,
},
});
exports.default = dev;

import Sequelize from "sequelize";

const db: string = process.env.BD || "Redytel";

const user: string = process.env.USER_DB || "sa";
const pwd: string = "milka";
const host: string = process.env.HOST || "LOCALHOST";

const sequelize = new Sequelize ( db, user, pwd, {

dialect: "mssql",
host,
operatorsAliases: false,
pool: {
acquire: 30000,
idle: 10000,
max: 5,
min: 0,

34
 },dialectOptions: {
instanceName: "SQLEXPRESS"
},

});

const Models: any = {

empleado: sequelize.import("../models/empleado"),
huellas: sequelize.import("../models/huellas"),
historial: sequelize.import("../models/historial"),
};

Object.keys(Models).forEach( (key: any) =>{

if('associate' in Models[key] ) {
Models[key].associate(Models)
}
});

Models.sequelize = sequelize;
Models.Sequelize = Sequelize;

export default Models;

Creación del modelo empleado.

const empleado = (sequelize: any, DataTypes: any) => {

const Empleado = sequelize.define("Empleados", {
uuid: {
type: DataTypes.STRING,
primaryKey: true,
},
nombre: {
type: DataTypes.STRING,
},
// tslint:disable-next-line:object-literal-sort-keys
apellido: {
type: DataTypes.STRING,
},
email: {
type: DataTypes.STRING,
},
direccion: {
type: DataTypes.STRING,

35
 },
fech_nac: {
type: DataTypes.DATE,
},
estatus: {
type: DataTypes.BOOLEAN,
},
// tslint:disable-next-line:object-literal-sort-keys
habilidades: {
type: DataTypes.STRING,
},
habilidades_desc: {
type: DataTypes.STRING,
},
contrasena: {
type: DataTypes.INTEGER,
}
});

Empleado.associate = (models: any) => {

Empleado.hasMany(models.huellas)
}
return Empleado;
}
export default empleado;
Creación del modelo huella.
const huellas = ( sequelize: any, DataTypes: any ) =>{
// tslint:disable-next-line:indent
const Huellas = sequelize.define("Huellas", {
huella: {
type: DataTypes.STRING,
},
uuid: {
type: DataTypes.STRING,
primaryKey: true,
},
});

Huellas.associate = (models: any) => {

Huellas.belongsTo(models.empleado)
}

return Huellas;
}
export default huellas;

36
Creación del modelo Historial.
const historial = (sequelize: any, DataTypes: any) => {
const historial = sequelize.define("Historial", {
uuid: {
type: DataTypes.STRING,
primaryKey: true,
},
accion:{
type: DataTypes.STRING,
},
fechAccion: {
type: DataTypes.DATE,
}
});

historial.associate = (models: any) => {

historial.hasMany(models.huellas)
}

return historial;
}
export default historial;
Creación de los typedef.
import { gql } from "apollo-server";
const typegql = gql`
scalar Date
type Empleado {
uuid: ID!
nombre: String!
apellido: String!
email: String!
direccion: String!
fech_nac: Date!
estatus: Boolean!
habilidades: String!
habilidades_desc: String!
createAt: Date!
updateAt: Date!
contrasena: ID!
}

type Huellas {

37
 huella: String!
uuid: ID!
createAt: String!
updateAt: String!
EmpleadoUuid: String!
}

type Historial {
uuid: ID!
accion: String!
fechAccion: Date!
}

type Query {
hello: String!,
soluc_candidato(preg: String!): [Empleado!]
trabajadores: [Empleado!]!,
login (email: String!, contrasena: Int!):[Empleado!]!,
historial: [Historial!]!,

type Mutation {
Formulario (
nombre: String!,
apellido: String!,
email: String!,
direccion: String!,
fech_nac: String!,
estatus: Boolean!,
habilidades: String!,
habilidades_desc: String!,
contrasena: Int!,
):
Empleado!,

Historial (
uuid: ID!,
accion: String!,
fechAccion: Date!,
):
Historial!,

38
`;
export default typegql;

Creación de los resolvers.

import { v4 as uuidv4 } from "uuid";
import moment from "moment";
import historial from "../models/Historial";
import { isDate } from "util";

const resolvers = {
Query: {
hello: () => "hello",
trabajadores: async (_: any, args: any, { db }: { db: any }) => {
const Empleados = await db.models.Empleados.findAll({raw :
true})
console.log(Empleados)
return Empleados;
},
login: async (_: any, args: any, { db }: { db: any }) => {
const Empleados = await db.models.Empleados.findAll({where:
{email:args.email,contrasena:args.contrasena}})
return Empleados;
},
historial: async (_: any, args: any, { db }: { db: any}) => {
console.debug(db.models)
const historial = await db.models.Historial.findAll({raw :
true})
console.log(historial)
return historial;
},
},
// tslint:disable-next-line:object-literal-sort-keys
Mutation: {
Formulario: async (_: any, args: any, { db }: { db: any }) => {
const { Empleados, Huellas } = db.models
try {
const id = uuidv4();
const fecha_nac = moment(args.fech_nac).isValid() ?
moment(args.fech_nac) : false;
console.log(fecha_nac)
const { dataValues } = await Empleados.create({
uuid: id,
nombre: args.nombre,

39
 apellido: args.apellido,
email: args.email,
direccion: args.direccion,
fech_nac: fecha_nac,
estatus: args.estatus,
habilidades: args.habilidades,
habilidades_desc: args.habilidades_desc,
contrasena: args.contrasena
});
const res = await Huellas.create({
uuid: id,
huella: id,
EmpleadoUuid: id
});
console.log(res)
return dataValues
} catch (e) {
throw new Error(e)
}
},
Historial: async(_: any,args: any, { db }: { db:any }) => {
const { Historial } = db.models
try{
const { dataValues } = await Historial.create({
uuid: args.uuid,
accion: args.accion,
fechAccion: args.fechAccion
});
return dataValues
} catch (e) {
throw new Error(e)
}
},
},
};

export default resolvers;

Configuración del servidor.

import { ApolloServer } from "apollo-server";
import resolvers from "./graphql/resolvers";
import typeDefs from "./graphql/typedef";
import SyncModel from "./lib/index";

40
const port = 4000;

// tslint:disable-next-line:no-shadowed-variable
async function startServer(port = 5000) {
try {
const models = await SyncModel.sequelize.sync();
const server = new ApolloServer({ typeDefs, resolvers,
context: () => ({
db: models
})
});
const { url } = await server.listen(port);
console.log(`Servidor iniciado en la ruta: ${url}`);
} catch(e) {
throw new Error(e)
}
}
startServer(port);

41
test de conexion.
import coneccion from "../lib/index";
async function testConection() {
try {
const consultar = await coneccion.authenticate();
console.log(consultar);
} catch (e) {
throw new Error(`${e}`);
}

}
export default testConection;

Creación del algoritmo para el reparto de tareas según las habilidades del
trabajador.
import { v4 as uuidv4 } from "uuid";
import moment from "moment";

const resolvers = {
Query: {
hello: () => "hello",
soluc_candidato: async (_: any, args: any, { db }: { db: any }) => {
const Empleados = await db.models.Empleados.findAll({ raw: true
})
const frase = args.preg;
let puntaje = 0;
let mejorOpcion: any = {};
let resultado: {}[] = [];
console.log(Empleados)
const res = Empleados.map((i: any) => {
if (i.habilidades.split(',').length > 1) {
let count = 0
frase.split(" ").map((e: any) => {
i.habilidades.split(',').map((a: any) => a.split('
').map((k: any) => {
if (e == k) {
count += 1
}
}))
console.log(puntaje, count, i.nombre)
if (count > puntaje) {

42
 puntaje = count
mejorOpcion = Object.assign({}, mejorOpcion, i)
resultado.pop()
resultado.push(mejorOpcion)
count = 0
} else if ( count == puntaje ) {
puntaje = count
mejorOpcion = Object.assign({}, mejorOpcion, i)
resultado.push(mejorOpcion)
count = 0
}
console.log(resultado)
})
} else {
frase.split(" ").map((e: any) => {
let count = 0
i.habilidades.split(' ').map((k: any) => {
if (e == k) {
count += 1
}
})
console.log(puntaje, i.nombre)
if (count > puntaje) {
puntaje = count
mejorOpcion = Object.assign({}, mejorOpcion, i)
resultado.pop()
resultado.push(mejorOpcion)
count = 0
} else if ( count == puntaje ) {
puntaje = count
mejorOpcion = Object.assign({}, mejorOpcion, i)
resultado.push(mejorOpcion)
count = 0
}
console.log(resultado)
})
}
})
console.log(resultado)
return resultado;
},
},
// tslint:disable-next-line:object-literal-sort-keys
Mutation: {
Formulario: async (_: any, args: any, { db }: { db: any }) => {

43
 const { Empleados, Huellas } = db.models
try {
const id = uuidv4();
const fecha_nac = moment(args.fech_nac).isValid() ?
moment(args.fech_nac) : false;
console.log(fecha_nac)
const { dataValues } = await Empleados.create({
uuid: id,
nombre: args.nombre,
apellido: args.apellido,
email: args.email,
direccion: args.direccion,
fech_nac: fecha_nac,
estatus: args.estatus,
habilidades: args.habilidades,
habilidades_desc: args.habilidades_desc,
});
const res = await Huellas.create({
uuid: id,
huella: id,
EmpleadoUuid: id
});
console.log(res)
return dataValues
} catch (e) {
throw new Error(e)
}
},
},
};

export default resolvers;

44