Aplicación web: Modulo de gestión de servicios de la CAPDAM

1

APLICACIÓN WEB: MÓDULO DE GESTIÓN DE SERVICIOS DE LA

CAPDAM

Nombres de los Residentes

Felipe Natanahel López Chavira Alejandro Pérez Toga

Nombre del Asesor:

Lic. Rosa María Rodríguez Gutiérrez

Nombre de la Carrera

Ingeniería en Sistemas Computacionales

I

Índice

CAPÍTULO I INVESTIGACIÓN PRELIMINAR ... 1

1.1 Introducción ... 1

1.2 Contexto del problema ... 1

1.3 Propuesta de solución ... 1

1.4 Objetivos ... 2

1.4.1 General ... 2

1.4.2 Específicos ... 2

1.5 Alcances y limitaciones ... 2

1.5.1 Alcances ... 2

1.5.2 Limitaciones ... 2

1.6 Estudio de factibilidad ... 2

1.6.1 Factibilidad Económica ... 2

1.6.2 Factibilidad Técnica ... 3

1.6.3 Factibilidad Operativa ... 4

1.6.4 Factibilidad Legal ... 4

1.7 Análisis Costo-Beneficio ... 4

1.7.1 Costo ... 4

1.7.2 Costo del análisis ... 4

1.7.3 Costo del diseño de los servicios ... 4

1.7.4 Precio total de la aplicación ... 5

1.8 Justificación ... 5

1.9 Ventajas competitivas ... 5

CAPITULO II FUNDAMENTO TEÓRICO ... 6

2.1 Introducción ... 6

2.2 Proceso de recepción de llamadas ... 6

2.3 Proceso de levante de reporte ... 6

2.4 Proceso de asignación de departamento ... 7

2.5 Proceso de atención de reporte ... 7

2.6 Proceso de Informes estadísticos ... 8

2.7 Proceso de configuración de la aplicación ... 9

II

3.1 Introducción ... 10

3.2 Análisis de requisitos ... 10

3.2.1 Requerimientos de software ... 10

3.2.2 Requerimientos de hardware ... 10

3.2.3 Requerimientos funcionales ... 10

3.2.4 Requerimientos no funcionales ... 10

3.2.5 Requerimientos de Calidad ... 11

3.3 Diseño y arquitectura ... 11

3.4 Programación ... 13

3.5 Implementación ... 14

Atención a usuarios ... 14

Supervisor ... 18

Administrador ... 19

3.6 Resultados ... 20

CAPÍTULO IV CONCLUSIONES ... 21

III

Índice de Figuras

Figura 1.- Formulario de llenado de reporte ... 6

Figura 2.- Reportes asignados a la delegación Santiago ... 7

Figura 3.- Formulario para resolver un reporte ... 8

Figura 4.- Interfaz de reportes mensuales ... 8

Figura 5.- Caso de uso del usuario administrador ... 11

Figura 6.- Caso de uso del usuario supervisor ... 12

Figura 7.- Caso de uso del usuario atención a contribuyentes ... 12

Figura 8.- Modelo Entidad-Relación de la base de datos ... 13

Figura 9.- Interfaz de inicio de sesión. ... 14

Figura 10.- Interfaz atención a usuarios: Formulario de llenado de llamadas. ... 15

Figura 11.-Interfaz atención a usuarios: Tabla de reportes (llamadas) realizadas por el empleado. ... 15

Figura 12.-Interfaz atención a usuarios: Tabla de reportes por día. ... 16

Figura 13.-Interfaz atención a usuarios: Tabla del historial de reportes. ... 16

Figura 14.-Interfaz atención a usuarios: Tabla del historial de reportes con filtrado. 17 Figura 15.-Interfaz atención a usuarios: Vista de estadísticas por mes y de muestra las otras 2 opciones posibles (anuales y finales) ... 17

Figura 16.-Interfaz supervisor: Tabla de reportes designados a su departamento. ... 18

Figura 17-Interfaz supervisor: Formulario de atención de reportes. ... 18

Figura 18-Interfaz supervisor: Detalle de un reporte. ... 19

Figura 19.- Interfaz administrador: Ejemplo de las tablas. ... 19

1

CAPÍTULO I INVESTIGACIÓN PRELIMINAR

1.1 Introducción

Actualmente es primordial para cualquier institución la utilización de herramientas de software, en especial las aplicaciones web, ya que permite resguardo de la información de manera segura y el fácil acceso a la información desde cualquier punto de acceso de una red.

En este trabajo se presenta la elaboración de una aplicación web, en la cual sea administrada las llamadas que les hacen al departamento de atención a clientes, y a partir del origen de la localidad canalizar con la persona responsable para que sea atendido el reporte, además el sistema arrojará estadísticas cada mes de los reportes resueltos así como los que no se han resuelto, también la aplicación tendrá la gestión total de las colonias, los departamentos y accesos a la aplicación.

1.2 Contexto del problema

Actualmente en la CAPDAM, la cantidad de llamadas que registra el departamento de atención a clientes es muy elevada, las cuales se levantan con un pequeño sistema (CRM) que la administración anterior había dejado.

Tanto el jefe de departamento de atención a clientes como el director general, desean tener una variedad de reportes a partir de los registros de las llamadas, que les permitan tomar decisiones sobre las problemáticas que se presentan día con día, con el fin de estas se vean disminuidas en un futuro.

El departamento de sistemas cuenta con una base de datos sin relaciones y con campos duplicados, además sus códigos de programación no poseen seguridad ni orden.

1.3 Propuesta de solución

 Rediseñar una nueva base de datos a partir de la que ya tienen en funcionamiento y que se encuentra en su servidor principal.

 Rediseñar el sistema CRM con el framework Codeigniter para optimizar los códigos y la utilización de librerías de jQuery para la presentación de estadísticas y mostrar información.

2 1.4

Objetivos

1.4.1 General

Diseñar, desarrollar e implementar una aplicación web para CAPDAM, la cual tendrá 3 usuarios diferentes (Atención a usuarios, Supervisión y Administrador). En la aplicación se podrá levantar reportes, atenderlos modificar tablas y crear informes.

1.4.2 Específicos

 Modificar la base de datos

 Diseñar interfaces (para los diferentes usuarios) con Bootstrap 3 y 4.

 Desarrollar la aplicación usando Codeigniter.

 Implementar la aplicación en un servidor WAMP.

 Crear nuevas interfaces en las que muestren diferentes tipo de estadísticas con graficas de los reportes

1.5 Alcances y limitaciones

 Emisión de informes estadísticos mensuales, anuales y totales.

 Visualización de los reportes elaborados por usuario, por departamento y totales

 Consulta, altas, bajas y modificación de datos para la configuración de la aplicación

 Levante de reportes y ejecución de los mismos

 Creación de 3 diferentes interfaces para los distintos niveles de usuario

 Respectividad de la aplicación web (visualización acorde al tamaño de la pantalla)

1.5.2 Limitaciones

 El tiempo de elaboración del sistema, ya que se tienen que reacomodar totalmente la base de datos.

 El acceso a cierta información alojada en empresas ajenas a CAPDAM.

 Accesibilidad del personal que utilizara el sistema.

 Solo se tendrá acceso a la aplicación web a través de internet

1.6 Estudio de factibilidad

Para determinar la factibilidad de la aplicación web se realizaron 4 estudios de factibilidad, la económica, la técnica, la operativa y legal, dichos resultados se muestran a continuación:

1.6.1 Factibilidad Económica

3

servidores donde alojar la aplicación web y un dominio web. Además de que el software utilizado es de libre código, por lo cual no genera un gasto.

1.6.2 Factibilidad Técnica

Dentro de la factibilidad técnica tenemos los diferentes equipos que se usaron para desarrollar el proyecto como los servidores donde estará alojada la aplicación web, además de plasmar el Software que se necesitó para implementar dicha aplicación.

Hardware:

 Servidor marca Dell

 Memoria RAM 4 Gb

 Procesador Intel Xeon CPU a 2.70 GHz

Software:

 Windows Server 2008 R2 Enterprice a 64 bits.

 MySQL Workbench

 WAMP

 Git

 Atom

El desarrollo de la aplicación se realizará en 2 equipos de cómputo diferentes los cuales cuentan los desarrolladores, las características de dichos equipos se explican a continuación:

Hardware Computadora 1:

 HP 240 G3 Notebook PC, con procesador Intel Celeron 2.16 GHz

 Memoria RAM de 4 Gb.

Software Computadora 1:

 Windows 10 Home Single Language a 64 bits.

 MySQL Workbench

 Atom

 XAMPP

 Git

Hardware Computadora 2:

 Asus X550EA Notebook PC, con procesador AMD A4 2.5 GHz

 Memoria RAM de 4 Gb.

Software Computadora 2:

 Ubuntu 14.04 a 64 bits.

 MySQL Workbench

 Atom

4  Git

1.6.3 Factibilidad Operativa

Para poder operar correctamente la aplicación web, los usuarios del CRM no necesitaran capacitación ya que las interfaces son similares a las actuales solo que con estilos diferentes, las capacidades que poseen actualmente son suficientes tales como manejo de computadora y navegación por internet además de buen trato con contribuyentes que llamen para reportar alguna anomalía.

1.6.4 Factibilidad Legal

La información mostrada en la página será exclusivamente de la CAPDAM por lo que los administrativos darán la orden del contenido que desean se muestre.

Respecto a las licencias de software para el desarrollo de la aplicación web será de código libre por lo que no son necesarias, ya que, el software puede ser descargado sin requisitos previos.

1.7 Análisis Costo-Beneficio

El costo de este sistema fue calculado en base los costos del análisis (CA) y diseño de los servicios (CS) la cual es la suma del consto de la programación y de la administración de la base de datos, además de considerar un porcentaje de utilidad establecido previamente sobre los costos totales. Para mayor claridad a continuación se desglosan estos costos y se explica su obtención y simbología utilizada:

PV: Precio de venta CA: Costo de Análisis

CP: Costo de programación CBD: Costo de administrador de base de datos CS: Costo de Diseño de servicios PU: Porcentaje de utilidad (15%)

1.7.2 Costo del análisis

Salario de analista por hora = $50.00 CA=50 * 8 horas diarias = $400.00 CA=400 * 5 días de la semana = $2000

CA=2000 * 4 semanas (Tiempo estimado del análisis) = $8,000.00

1.7.3 Costo del diseño de los servicios

5

CP=80 * 8 horas diarias =$640.00

CP=640 * 5 días de la semana=$3,200.00

CP= 3200 * 6 semanas (Tiempo estimado de desarrollo)=$19,200.00

Salario del administrador de base de datos por hora=$100.00 CBD=100* 8 horas diarias =$800.00

CBD=800 * 5 días de la semana=$4,000.00

CBD= 4000 * 4 semanas (Tiempo estimado de desarrollo)=$16,000.00

CS=CP+CBD

CS=19,200.00+16,000.00 CS=35,200.00

1.7.4 Precio total de la aplicación

PV= (CA+CS)*(1+PU)

PV= (8,000.00+35,200.00)*(1.15) PV= (43,200.00 * 1.15)

PV=$49,680.00

1.8 Justificación

Es importante para una empresa que ofrece servicios tener el control de los servicios que ofrece así como el estado de cada uno de estos servicios, ya que lo que no es cuantificable no puede ser calificable y si se cuenta con un sistema que te permite hacer la toma de decisiones a partir de los reportes que se vayan generando todos los días, llega a ser una herramienta indispensable.

Debido al tipo de dependencia que es, es relevante mencionar, que la implementación de la herramienta de software que se ofrece ayudará a modernizar los procesos en este servicio.

1.9 Ventajas competitivas

6

CAPITULO II FUNDAMENTO TEÓRICO

2.1 Introducción

En la CAPDAM se realizan varios procesos para poder dar seguimiento a los diferentes reportes que atienden entre estos procesos se encuentran: el de recepción de llamadas, levante de reporte, asignación de departamento, atención de reportes y reportes estadísticos.

Actualmente la obtención de estadísticas lleva aproximadamente 1 hora ya que tienen que sacar de manera manual los porcentajes a partir de los datos que alojan en su sistema.

2.2 Proceso de recepción de llamadas

Este proceso es el inicio de todo un ciclo de atención a reportes y fugas que CAPDAM concede, en él se reciben las llamadas telefónicas (realizadas al 073) en el departamento de atención a usuarios, el cual esa constituido por varios empleados y dan servicio las 24 horas.

2.3 Proceso de levante de reporte

Después de recibir la llamada el empleado tiene que llenar un formulario web el cual es el siguiente:

7

En el cual se tienen que llenar datos importante como el tipo del problema el lugar del problema (de este dato se asigna a una de las 3 zonas)

2.4 Proceso de asignación de departamento

Al momento de enviar el reporte (Atención a Usuarios) este dependiendo de su localidad se asigna a uno de los 3 departamentos (Valle de las garzas, Santiago o Centro) para su atención, los reportes asignado llegan a los supervisores de cada área antes descrita y está en su deber atenderlo según los protocolos.

Figura 2.- Reportes asignados a la delegación Santiago

2.5 Proceso de atención de reporte

8

Figura 3.- Formulario para resolver un reporte

2.6 Proceso de Informes estadísticos

Al completarse el ciclo de los reportes se generan una interfaz estadística la cual muestra los reportes mensuales separados por zona de ejecución y la comparativa de los atendidos y sin atender.

9

2.7 Proceso de configuración de la aplicación

Una de las partes más importantes de la aplicación es configurar los datos que en ella de usan tales como los usuarios, las localidades, departamentos, entre otros, son un total de 8 tablas con control total de agregar, modificar, consultar y eliminar.

10

CAPÍTULO III PROCEDIMIENTOS Y DESCRIPCIÓN DE LAS

ACTIVIDADES REALIZADAS

3.1 Introducción

El desarrollo de este proyecto fue realizado con el framework PHP Codeigniter 4.3, Twig como motor de plantillas, JavaScript y MySQL como motor de base de datos.

La aplicación está instalada en un servidor virtual que les pertenece a la CAPDAM para que todos tengan acceso desde cualquier punto de la red.

3.2 Análisis de requisitos

Los requerimientos que se mencionaran a continuación, son los necesarios para poder realizar la aplicación web. A continuación se mencionan los requerimientos software, hardware, funcionales, del sistema y de calidad.

3.2.1 Requerimientos de software  Windows Server 2008 o superior

 WAMP (Servidor apache y MySQL)

 Proyecto desarrollado en PHP con el motor de plantillas de Twig

 Utilización de librerías con jQuery

3.2.2 Requerimientos de hardware

 Servidores para alojar la aplicación, características definidas conforme a la versión de Windows Server 2008 o superior utilizado.

3.2.3 Requerimientos funcionales

 En la aplicación se podrá levantar reportes conforme a las llamadas recibidas

 En la aplicación se podrá ejecutar (atender) reportes.

 En la aplicación se podrá modificar los datos de configuración

 En la aplicación se podrá consultar los reportes (depende del tipo de usuario)

 En la aplicación se podrá consultar informes estadísticos

3.2.4 Requerimientos no funcionales

 La aplicación debe de adaptarse de acuerdo a las dimensiones de la pantalla.

 La aplicación debe mostrar graficas de acuerdo a las estadísticas.

11 3.2.5 Requerimientos de Calidad

 Interfaz atractiva para los usuarios

 Rapidez al momento de visualizar datos (tablas y estadísticas)

 Interfaces responsivas

 Dinamismo en los datos utilizados

3.3 Diseño y arquitectura

Para el diseño de las arquitecturas se utilizó el programa online llamado yUML para los casos de uso de los 3 diferentes tipos de usuarios que utilizaran la aplicación y la herramienta de modelado de MySQL Workbench para el entidad-relación que muestra las tablas y la relación entre ellas de la base de datos del módulo.

12

Figura 6.- Caso de uso del usuario supervisor

13

Figura 8.- Modelo Entidad-Relación de la base de datos

3.4 Programación

En esta fase del desarrollo de la aplicación se dividió en varias etapas las cuales se describen a continuación:

 Modificación de base de datos: Como ya se tenía un sistema CRM, se pasó a modificar la base de datos para adecuarla a la nuevo sistema además de optimizar la misma y agregar las relaciones que no tenía la base de datos original.

14  Creación de interfaces: Se pasaron a crear las interfaces utilizando el framework

de estilos Bootstrap 3 para atención a usuarios y supervisor y Bootstrap 4 para el administrador.

 Conexión Base de datos interfaces: en esta etapa se crearon las funciones adecuadas en el modelo y se conectó el modelo con el controlador, de igual manera se crearon vistas en la base de datos conforme se fueran mostrando datos en las interfaces.

 Programación javascript, jQuery y otras librerías: la etapa final de programación, en ella se realizaron gracias con jQuery los filtrados de tablas y de estadísticas de igual manera se aplicaron varias librerías extras como chart.js (realización de gráficos), datatable.js (mostrar datos en tablas con paginado y búsqueda) y datepicker.js (mostrar calendarios)

3.5 Implementación

En esta sección se mostrará las capturas de pantalla de la aplicación, están separadas en 3 que es el número de tipos de usuario que pueden acceder al sistema (atención a usuarios, supervisor y administrador).

Figura 9.- Interfaz de inicio de sesión.

Atención a usuarios

15

Figura 10.- Interfaz atención a usuarios: Formulario de llenado de llamadas.

16

Figura 12.-Interfaz atención a usuarios: Tabla de reportes por día.

17

Figura 14.-Interfaz atención a usuarios: Tabla del historial de reportes con filtrado.

18 Supervisor

Los supervisores de las 3 diferentes áreas (Valle de las Garzas, Santiago y Centro) accederán a las próximas interfaces en la cual se mostrará los reportes designados a su área (Figura 16) para poder atenderlos, para esto se tiene que llenar un formulario (Figura 17) el cual se abre al presionar el folio de un reporte no atendido, en caso contrario muestra los detalles del mismo (Figura 18), ellos también pueden ver el historial de reportes.

Figura 16.-Interfaz supervisor: Tabla de reportes designados a su departamento.

19

Figura 18-Interfaz supervisor: Detalle de un reporte.

Administrador

El administrador es el que tiene control de los datos que contiene la aplicación web, él puede dar de alta, baja, modificar y visualizar usuarios, operadores, colonias, localidades, tipo de reportes, categorías y zonas (Figura 19), también al igual que los otros usuarios de la aplicación puede ver la tabla de reportes totales y estadísticas, una extra el No. Reportes (Figura 20) la cual muestra el número de reportes levantados por cada uno de los usuarios de atención a clientes, además de una gráfica anual que plasma el número de reportes creados por meses.

20

Figura 20.-Interfaz administrador: Estadísticas de número de reportes.

3.6 Resultados

Como resultado de la creación de la aplicación, se obtuvo que la generación de estadísticas a partir de los reportes capturados fue la solución que estaban esperando los jefes de departamentos de la CAPDAM ya que permite la toma de decisiones.

21

CAPÍTULO IV CONCLUSIONES

El sistema ha sido aceptado de manera satisfactoria, tanto por el encargado de sistemas de la CAPDAM como del personal que lo utilizará, en virtud de que agilizará los procesos de resolución de reportes.

La inclusión de obtener estadísticas por mes, permitirá un análisis oportuno sobre:

 Carga de trabajo de atención a contribuyentes

 Zonas de mayor incidencias

 Incidencias más comunes

 Cantidad de incidencias atendidas

22

REFERENCIAS BIBLIOGRAFICAS

 Mark Otto, a. (2016). Bootstrap · the world's most popular mobile-first and responsive front-end framework. [En línea] Getbootstrap.com. Disponible en: http://getbootstrap.com/ (Junio de 2016)

 Mark Otto, a. (2016). Bootstrap · the world's most popular mobile-first and responsive front-end framework. [En línea] V4-alpha.getbootstrap.com. Disponible en: http://v4-alpha.getbootstrap.com/ (Junio de 2016)

 Codeigniter.com. (2016). CodeIgniter Web Framework. [En Línea] Disponible en: https://www.codeigniter.com/ (Junio de 2016)

 Twig.sensiolabs.org. (2016). Homepage - Twig - The flexible, fast, and secure PHP template engine. [En línea] Disponible en: http://twig.sensiolabs.org/ (Junio de 2016)

 Datatables.net. (2016). DataTables | Table plug-in for jQuery. [En línea] Disponible en: https://datatables.net/ (Junio de 2016)

 jquery.org, j. (2016). jQuery. [En línea] Jquery.com. Disponible en: https://jquery.com/ (Junio de 2016)

 Chartjs.org. (2016). [En línea] Disponible en: http://www.chartjs.org/ (Junio de 2016)