Reporte 19 10

UNIVERSIDAD TECNOLÓGICA FIDEL VELÁZQUEZ DIVISIÓN ACADÉMICA DE TIC´S ÁREA SISTEMAS INFORMÁTICOS

REPORTE DE ESTADÍA

“CREACIÓN DE SITIO PARA ADMINISTRACIÓN DE CLIENTES Y SOPORTE TÉCNICO A CLIENTES ”

INFORME FINAL DE ESTADÍA QUE PARA OBTENER EL TÍTULO DE: TÉCNICO SUPERIOR UNIVERSITARIO EN TIC’S, AREA SISTEMAS INFORMATICOS

PRESENTA: CORTES MIRANDA ISMAEL YEPEZ AGUIRRE ROGELIO

1

“CREACIÓN DE SITIO PARA ADMINISTRACIÓN DE CLIENTES Y SOPORTE TÉCNICO A CLIENTES” INFORME DE ESTADÍA Que para obtener el titulo de Técnico Superior Universitario en TIC’S ÁREA SISTEMAS INFORMÁTICOS PRESENTA CORTES MIRANDA ISMAEL YEPEZ AGUIRRE ROGELIO

ASESOR ACADÉMICO M. EN C. MARÍA ESTHER GUEVARA CRUZ.

ASESOR INDUSTRIAL ING. JORGE HILARIO FIERRO CISNEROS

2

ÍNDICE INTRODUCCIÓN................................................................................................... 5 RESUMEN............................................................................................................ 6 CAPITULO 1: ANTECEDENTES............................................................................. 7 1.1 Planteamiento Del Problema Y Justificación.............................................10 1.1.1 Propuesta de solución.......................................................................10 1.2 Objetivo General..................................................................................... 11 1.2.1 Objetivos específicos........................................................................11 1.3 Alcance.................................................................................................. 11 CAPÍTULO 2: MARCO TEÓRICO..........................................................................12 2.1 Base De Datos Relacional.......................................................................13 2.1.1 Características.................................................................................. 13 2.1.2 Relaciones base y derivadas..............................................................13 2.1.2.1 Restricción................................................................................. 14 2.1.2.1.1 Características de una Restricción.........................................14 2.1.2.2 Clave única................................................................................. 14 2.2 ABD (Administrador De Base De Datos)...................................................15 2.3 Metodología............................................................................................ 16 2.4 Herramientas y Componentes Usados.....................................................18 2.4.1 UML..................................................................................................... 18 2.4.2 Tipos de Diagrama UML........................................................................18 2.4.3 Dojo y Ajax....................................................................................... 19 2.5 Conceptos Básicos................................................................................. 20 2.5.1 Mesa De Servicio.................................................................................. 20 2.5.1.1 Tipos............................................................................................. 20 2.5.1.2 Función......................................................................................... 20 2.5.1.3 Características............................................................................... 20 2.5.2 Reporte De Incidencia..........................................................................20 CAPITULO 3: DESARROLLO............................................................................... 21 3.1 Identificación De Problemas, Oportunidades Y Objetivos..........................22 3.2 Determinación de los requerimientos de información............................23 3.3 Diseño Del Sistema Recomendado..........................................................24 3.3.1 Diagrama Entidad-Relación...............................................................24 3

3.3.2 Diccionario de datos.........................................................................25 3.4 Diagramas UML...................................................................................... 27 3.4.1 Diagrama De Casos De Uso...............................................................27 3.4.2 Diagrama de Componentes................................................................28 ................................................................................................................ 28 3.4.3 Diagrama de Despliegue....................................................................29 3.5 Creación de Bocetos Para el Sistema.......................................................31 ................................................................................................................... 33 ................................................................................................................... 33 ................................................................................................................... 33 3.6 Implementación...................................................................................... 34 CAPITULO 4: CONCLUSIONES Y RESULTADOS...................................................36 REFERENCIAS................................................................................................... 38 ANEXOS............................................................................................................ 39

4

INTRODUCCIÓN El presente trabajo tiene como propósito reportar las actividades desarrolladas durante el proceso de estadía para recibir el título de técnico superior universitario en Tecnologías De La Información Y Comunicación Área Sistemas Informáticos por la Universidad Tecnológica Fidel Velázquez. Con el desarrollo e implementación de este proyecto se generará un cambio que agilizará los procesos de venta y soporte de los servicios que ITTEC ofrece a sus clientes. En la actualidad cuando algún cliente adquiere un producto o servicio tecnológico, ya sea hardware o software, busca mejorar la infraestructura de su negocio. Teniendo en cuenta que este es un aspecto indispensable en las empresas, se debe tener presente que las implementaciones requieren de asistencia de personal que se encargue del funcionamiento y seguimiento de las incidencias que ocurran a los clientes. Para ello existe un departamento en las empresas llamado Soporte Técnico el cual tiene la finalidad de ayudar o asesorar a los clientes y usuarios que tienen algún tipo de incidencia. El objetivo del proyecto es llevar un control eficaz y administrar de manera precisa las incidencias de los clientes, para realizar procesos de consulta a los reportes de incidencia ya resueltos o aún por resolver. El presente documento se desarrolla en cuatro capítulos, la descripción de las fases y etapas de desarrollo del sistema. En el primer capítulo se describe el planteamiento del problema, justificación, objetivo general, objetivos específicos y el alcance para el desarrollo del sistema. En el capítulo dos se refirió al marco teórico el cual contiene la metodología que se utilizó para poder desarrollar el sistema así como las herramientas utilizadas. En el capítulo tres se muestra el desarrollo del sistema, empleando la metodología Kendall & Kendall. En el capítulo cuatro hace referencia a las conclusiones y resultados obtenidos durante el presente proyecto.

5

RESUMEN El proyecto es titulado como “CREACIÓN DE SITIO PARA ADMINISTRACIÓN DE CLIENTES Y SOPORTE TÉCNICO A CLIENTES” trata acerca de la elaboración de un sistema para llevar acabo el control de los clientes y sus incidencias de cada uno de ellos en la empresa ITTEC. Este reporte contiene la problemática surgida por lo mencionado en el capítulo 1, así como su respectiva propuesta de solución, los objetivos específicos y el objetivo general se plasman por ser una solución eficaz y más rápida para el manejo de datos. La implementación de la metodología Kendall & Kendall por ser de un proceso completo y entendible. Los diagramas UML para el diseño de las funciones del proceso del sistema, así como un diccionario de datos y un diagrama entidad relación donde se ve el diseño de la base de datos con la que se trabajó el sistema. Veremos nuevas herramientas para trabajar como lo son Dojo y Ajax. Siendo estas las principales para concluir el proyecto ya que contienen validación por medio de scripts y formularios amistosos al diseño. Para concluir en los anexos se mostrara el resultado obtenido y esperado de acuerdo en tiempo y forma de los objetivos planteados.

6

CAPITULO 1: ANTECEDENTES En este capítulo se mostrara información de la empresa para saber a qué se dedica en el mercado así mismo como la problemática surgida y por la cual se va llevar a cabo el proyecto. También se plantea una propuesta de solución así como los objetivos específicos y objetivo general.

7

La siguiente información da a conocer un poco de la empresa, fue tomada de su misma página oficial [1]. La empresa "Desarrollos y Servicios en Tecnología Inteligente S. de R.L. de C.V., ITTEC" se define como una empresa dedicada al desarrollo de tecnologías de información, sistemas de misión crítica y consultoría para el control y optimización de procesos en las organizaciones. De manera directa colabora con grandes y medianas empresas, mientras que a través de su red nacional de distribuidores atiende el mercado masivo. La misión de ITTEC es desarrollar sistemas de información que permitan a las organizaciones aprovechar al máximo sus recursos, optimizar sus procesos e incrementar la satisfacción de sus Clientes. Para 2016, buscan ser reconocidos por su liderazgo en el diseño, operación y mantenimiento de sistemas de información en la nube, que contribuirán a la optimización de procesos en organizaciones de todo México, fomentando así la competitividad de éstas a nivel internacional por medio de más de diez plataformas de negocio en línea. El servicio otorgado a los clientes, se basa en dos procesos uno de ventas y otro soporte. Las ventas se realizan de manera personal o por correo electrónico en donde al momento de conseguir el trato con la empresa, se le pedirán documentos para poder ser dados de alta y poder iniciar con una base de datos de reportes de incidencias para uso futuro, este proceso

se

conoce

como

Aprovisionamiento

al

cliente,

para ello requiere los documentos de firma electrónica, sello digital, así como su nombre, RFC, razón social, dirección y correo electrónico. El proceso de soporte se realiza por medio telefónico en donde el cliente pide al personal apoyo para resolver incidencias que se presentan en sus equipos. 8

Reportes de incidencias: El personal de la empresa atiende la incidencia de algún cliente vía telefónica o por email, por este mismo medio se da solución, si es que ésta se conoce, y el cliente la puede atender, en caso contrario se envía con el cliente a un elemento del área soporte.

Para poder dar seguimiento a los clientes, se guarda información de los servicios que éstos han solicitado, para esto se toman los datos del cliente para poder guardarlos en carpetas. Dado que se carece de procedimientos estándares del manejo de la información, se perdía el control de la información almacenada de los clientes, dando lugar a que éstos cada vez que solicitaban algún servicio tuviesen que proporcionar su información, generando redundancia de la misma.

9

1.1 Planteamiento Del Problema Y Justificación La falta de administración de la información asociada a los servicios proporcionados a los clientes de ITTEC, tal como el seguimiento de las incidencias de los mismos. Se busca mejorar la administración entre lo que cabe a: 

El registro de clientes: Al momento que el cliente decidía contar con el servicio, el personal de la empresa llevaba a cabo un registro con



los datos del cliente. Compra de Folios: Proceso que permite a un cliente registrado seguir facturando. Este proceso requiere la captura de la



información del cliente y de la cantidad de folios que solicita. Seguimiento para incidencias de los clientes: El seguimiento que la empresa tenía es por medio de correo electrónico, por lo tanto los empleados debían conocer las incidencias por experiencia, si alguien diferente a ellos intentaba llevar un caso era algo completamente nuevo y tedioso por la falta de conocimiento de las



problemáticas atendidas con anterioridad. Clasificación de clientes Dentro del registro se establecía una diferencia entre sus clientes y los ha clasificado en dos plataformas de trabajo donde se realiza la emisión de CFDI (Comprobante Fiscal Digital por Internet):  El Plataforma A.  El Plataforma B.

1.1.1 Propuesta de solución Implementar una base de datos donde se guardaran todos los clientes con los que la empresa trabaja, registrándolos y poder tener un expediente de cada uno de ellos, incluyendo una sección de todas de las incidencias que le surjan al cliente.

10

1.2 Objetivo General Desarrollar un sistema interno para la administración de los clientes mediante el uso de una base de datos para llevar un mejor seguimiento de los clientes y del soporte técnico que se ofrece a éstos

1.2.1 Objetivos específicos 

Implementar una base de datos en la que serán administrados los clientes,

  

las compras que realizan y los servicios que cada uno tiene contratados. Crear el sistema final, donde el empleado realizara los procesos. Realizar la documentación acerca del desarrollo del proyecto. Diseñar el funcionamiento por medio de diagramas UML.

1.3 Alcance

Este trabajo integra el desarrollo de un sistema con una base de datos que servirá para administrar la información tanto clientes como reportes de incidencias de los mismos, facilitar el flujo de la información al momento de consultar el historial de cada uno de los clientes.

11

CAPÍTULO 2: MARCO TEÓRICO El marco teórico del presente reporte de estadía, pretende exponer los términos más relevantes empleados en esta. Por lo tanto, se desarrollaran los conceptos vinculados con los temas de Base de datos, administración de Base de datos, mesa de servicio, reporte de incidencias, entre otros.

12

2.1 Base De Datos Relacional A continuación se mostrara una breve explicación de lo que es una base de datos relacional y sus principales características: Es el modelo más utilizado en la actualidad para implementar bases de datos ya planificadas y permiten establecer interconexiones (relaciones) entre los datos (que están guardados en tablas), y a través de dichas conexiones relacionar los datos de ambas tablas, de ahí proviene su nombre: "Modelo Relacional".

2.1.1 Características    

Una base de datos relacional se compone de varias tablas o relaciones. No pueden existir dos tablas con el mismo nombre. Cada tabla es a su vez un conjunto de registros (filas y columnas). La relación entre una tabla padre y un hijo se lleva a cabo por medio de las claves

primarias y ajenas (o foráneas)  Las claves primarias son la clave principal de un registro dentro de una tabla y éstas deben cumplir con la integridad de datos.  Las claves foráneas se colocan en la tabla hija, contienen el mismo valor que la clave primaria del registro padre; por medio de éstas se hacen las relaciones

2.1.2 Relaciones base y derivadas 

En una base de datos relacional, todos los datos se almacenan y se accede a ellos



por medio de relaciones Las relaciones que almacenan datos son llamadas "relaciones base" y su



implementación es llamada "tabla". Otras relaciones no almacenan datos, pero son calculadas al aplicar operaciones



relacionales. Estas relaciones son llamadas "relaciones derivadas" y su implementación es



llamada "vista" o "consulta". Las relaciones derivadas son convenientes ya que expresan información de varias relaciones actuando como si fuera una sola.

13

2.1.2.1 Restricción Una restricción es una condición que obliga el cumplimiento de ciertas condiciones en la base de datos

2.1.2.1.1 Características de una Restricción 

Algunas no son determinadas por los usuarios, sino que son inherentemente



definidas por el simple hecho de que la base de datos sea relacional. Algunas otras restricciones las puede definir el usuario, por ejemplo, usar un

 

campo con valores enteros entre 1 y 10 Las restricciones proveen un método de implementar reglas en la base de datos. Las restricciones no son parte formal del modelo relacional, pero son incluidas porque juegan el rol de organizar mejor los datos.

2.1.2.2 Clave única Cada tabla puede tener uno o más campos cuyos valores identifican de forma única cada registro de dicha tabla, es decir, no pueden existir dos o más registros diferentes cuyos valores en dichos campos sean idénticos.

2.2 ABD (Administrador De Base De Datos)

14

Para comprender mejor el significado de “ABD” se muestra una pequeña definición, misma que fue tomada de [2]. La tarea del ADB es crear la base de datos, poner en vigor los controles técnicos necesarios para apoyar las políticas dictadas por el administrador de datos, garantizar el funcionamiento adecuado del sistema y proporcionar otros servicios de índole técnica relacionados. Cuenta con programadores de sistemas y asistentes técnicos, facilita el desarrollo y el uso de la Base de Datos dentro de las guías de acción definidas por la administración de los datos. El ADB es responsable primordialmente de: •

Administrar la estructura de la Base de Datos.

•

Administrar la actividad de los datos.

•

Administrar el Sistema Manejador de Base de Datos.

•

Establecer el Diccionario de Datos.

•

Asegurar la confiabilidad de la Base de Datos.

2.3 Metodología Para comprender un poco más de la metodología Kendall y Kendall usada en este proyecto se dará una breve descripción de cada una de las etapas de dicho modelo mismas que se muestran en la Imagen 1.1, esta información fue obtenida de [2].

15

Imagen 1.1. Metodología Kendall y Kendall. 1.- Identificación de problemas, oportunidades y objetivos: En la primera etapa se requiere que el analista observe de forma objetiva lo que ocurre en una empresa, luego en conjunto con los demás integrantes de la organización hará notar los problemas. Las oportunidades son aquellas situaciones que el analista considera que pueden perfeccionarse mediante el uso de sistemas y en la identificación de objetivos, el analista deberá descubrir lo que la empresa intenta realizar, y luego, estará en posibilidad de determinar si el uso de sistemas apoyaría a la empresa para alcanzar sus metas. 2.-Determinación de los requerimientos de información: Para identificar los requerimientos de información dentro de la empresa, pueden utilizarse diversos instrumentos, los cuales incluyen el muestreo, la entrevista, los cuestionarios y la observación.

3.- Análisis de las necesidades del sistema: En esta fase, se analizan las decisiones por realizar, que son donde las condiciones alternativas, acciones y reglas de acción podrían determinarse.

16

4.-Diseño del sistema recomendado: En esta fase, se utiliza toda la información que se recolectó con anterioridad, y se elabora el diseño lógico del sistema. Una parte del diseño lógico del sistema es el diseño de la interfaz con el usuario. 5.-Desarrollo y documentación del software: En esta fase, el analista trabaja con los programadores para desarrollar todo el software original que sea necesario. Dentro de las técnicas estructuradas para el diseño y documentación del software se tienen. 6.- Pruebas y mantenimiento del sistema: El sistema de información debe probarse antes de utilizarlo y el costo es menor si se detectan los problemas antes de la entrega del sistema. El programador realiza algunas pruebas por su cuenta, otras se llevan a cabo en colaboración con el analista del sistema. 7.- Implementación y evaluación del sistema: En esta última etapa, el analista ayuda a implementar el sistema y esto incluye el adiestramiento que el usuario requerirá, y la evaluación del sistema toma parte en cada una de las etapas, pero uno de los criterios fundamentales que debe satisfacerse, es que el futuro usuario utilice el sistema desarrollado.

2.4 Herramientas y Componentes Usados

17

2.4.1 UML Para agilizar el proceso del sistema se utilizaron diagramas UML ya que mediante ellos es posible establecer la serie de requerimientos y estructuras necesarias para plasmar un sistema de software previo al proceso intensivo de escribir código. Para conocer un poco más de lo que es UML y sus principales diagramas se toma como referencia lo siguiente de [6]. UML son las siglas de “Unified Modeling Language” o “Lenguaje Unificado de Modelado”. Se trata de un estándar que se ha adoptado a nivel internacional por numerosos organismos y empresas para crear esquemas, diagramas y documentación relativa a los desarrollos de software (programas informáticos).

2.4.2 Tipos de Diagrama UML Usando UML se pueden construir numerosos tipos de diagramas. Vamos a citar algunos: Diagramas de casos de uso: representan a los actores y casos de uso (procesos principales) que intervienen en un desarrollo de software. Diagramas de clases: Para UML una clase es una entidad, no una clase software. Un diagrama de clases UML puede ser un diagrama del dominio o representación de conceptos que intervienen en un problema, o también un diagrama de clases software. El sentido de un diagrama UML se lo da la persona que lo construye. Diagramas de secuencia: Suelen usarse para representar objetos software y el intercambio de mensajes entre ellos, representando la aparición de nuevos objetos de izquierda a derecha. Diagramas de colaboración: Suelen usarse para representar objetos o clases y la forma en que se transmiten mensajes y colaboran entre ellos para cumplir un objetivo. Diagramas de estados: Suelen usarse para representar cómo evoluciona un sistema (cómo va cambiando de estado) a medida que se producen determinados eventos. Otros diagramas: diagramas de actividad, diagramas de paquetes, diagramas de arquitectura software, etc.

18

2.4.3 Dojo y Ajax La validación de datos es una parte fundamental en la seguridad informática, especialmente en el desarrollo de sistemas conectados a base de datos o redes de internet. Para el desarrollo del sistema presentado se utilizaron frameworks los cuales son herramientas que facilitan las diferentes tareas de un sistema entre ellas las de diseño. A continuación se nombran dos de los frameworks más utilizados durante el desarrollo del sistema misma información que fue obtenida de [4],[3],[5]. Dojo: es el paquete de base de Dojo Toolkit. A veces se refiere como el "núcleo", que contiene los paquetes y módulos más generalmente aplicables. El dojo paquete cubre una amplia gama de funcionalidades como la manipulación AJAX, DOM, la programación de tipo de clases, los eventos, las promesas, los almacenes de datos, de arrastrar y soltar y bibliotecas de internacionalización. Ajax: Acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

19

2.5 Conceptos Básicos. 2.5.1 Mesa De Servicio Una mesa de servicio corresponde al área de soporte técnico y esta recibe las llamadas telefónicas entrantes o mensajes de correo electrónico acerca de los problemas técnicos que una persona está encontrando con una computadora, un programa de software o un dispositivo periférico, como una impresora o un escáner.

2.5.1.1 Tipos 

Interno es parte de una empresa en particular y proporciona apoyo a los empleados que tengan problemas relacionados con los sistemas



informáticos de la compañía. Externos se ofrecen de manera externa a través de una computadora o un vendedor o la compañía de software periférico y proporcionan ayuda para los clientes que tengan problemas con sus servicios.

2.5.1.2 Función El personal de mesa de servicio o los técnicos hacen preguntas sobre el problema que el usuario está encontrando y luego guía al usuario a través de una serie de medidas para tratar de corregir el problema.

2.5.1.3 Características La mesa de servicio utiliza bases de datos informáticos que enumeran los problemas y las posibles soluciones para ayudarles a gestionar las llamadas telefónicas y correos electrónicos. En algunos casos, los técnicos son capaces de acceder remotamente a una computadora y resolver el problema cambiando la configuración o tratando los procedimientos en el equipo sin salir de sus escritorios.

2.5.2 Reporte De Incidencia Es un listado donde se podrá consultar todas los problemas que un cliente reporta y que son atendidos por el área de soporte. El reporte es configurable y se tendrá la posibilidad de seleccionar la importancia de las incidencias.

20

CAPITULO 3: DESARROLLO El objetivo de este capítulo es implementar la metodología de acuerdo al desarrollo de las fases del sistema, entre ellas el diseño y una breve explicación del código fuente del mismo.

21

3.1 Identificación De Problemas, Oportunidades Y Objetivos Para poder saber cómo se manejaba y/o trabajaba el sistema que se empleaba se realizaron las actividades que normalmente se realizan en el área de atención al cliente. Los resultados demuestran que se necesita llevar un seguimiento de los reportes de las incidencias de los clientes de la empresa. Dado que dentro de las actividades se pudo observar que el tiempo que tardaban en resolver las incidencias era más de lo inadecuado para llegar a una conclusión, si se buscaba resolver nuevas incidencias con alguna similar resuelta con anterioridad era estar buscando entre correos archivados en caso de existir. Este sistema se basaba en reportes por medio de correo, el cual contenía los datos de cliente y el tipo de incidencia reportada, al realizar el proceso de búsqueda para darle una solución se volvía muy complicado para el personal del área de soporte. Tambien se observo que en las operaciones se manejaba informacion inecesaria cada dia, por lo que se mantenia un flujo de informacion demasiado lento. Se realizo un sondeo mensual mismo que se muestra en la Imagen 3.1, en donde se observa el total de incidencias que se realizaron en el mes de junio.

No. de incidencias No. de incidencias

4 semana

10

3 semana

23

2 semana

30

1 semana

15 0

5

10

15

20

Imagen 3.1. Incidencias Mes de Junio.

22

25

30

35

Como se observa en la Imagen 1.2, la cantidad de incidencias que manejaban era demasiado grande, al momento de la elaboración de los reportes semanales la empresa perdía el seguimiento de algunas incidencias ya resueltas y que en un futuro se podrían volver a presentar.

3.2 Determinación de los requerimientos de información En esta sección del capítulo se ven los requerimientos funcionales y no funcionales que se piden por parte de la empresa. Requerimientos de software Para poder realizar las actividades del sistema se requerirán cumplir ciertas características tales como: Funcionales: Ayudar al usuario a realizar actividades como, registro de clientes, consultas y reportes dependiendo de lo que el cliente solicite. Facilitar la búsqueda de las incidencias y de clientes en las tablas. Llevar un seguimiento exacto de las incidencias reportadas por los clientes. Poder separar cada uno de los Clientes dependiendo si son: Cliente A o Cliente B.

No funcionales: 

Si el cliente consultado no aparece en la base, aparecerá el mensaje

 

“No registrado”. Distribución de pantalla. Estándares de botones, funcionales o enlaces de navegación que



aparecerán en cada ventana. Conexión entre el sistema y participes (Servicios y empresa).

23

3.3 Diseño Del Sistema Recomendado 3.3.1 Diagrama Entidad-Relación En la Imagen 3.1 se muestra el diseño del diagrama entidad relación (DER) de la base de datos que se utilizara para el sistema. En este diagrama se muestra una relación de varios a varios entre la tabla Ticket y la tabla Alta_Cliente por lo cual se dio la necesidad de crear una tabla intermedia llamada Lista _Sistema.

Imagen 3.1. Diagrama DER.

24

3.3.2 Diccionario de datos Descripción:Tabla_Tickets (Imagen 3.2): En esta tabla se guardaran las incidencias de los clientes para llevar un mejor seguimiento.

Imagen 3.2. Tabla Tickets.

Descripción:Tabla Lista_Sistema (Imagen 3.3): Ésta tabla contendra los tipos de servicios que ofrece la empresa.

Imagen 3.3. Tabla Lista_Sistema.

25

Descripción: Tabla Alta_Cliente (Imagen 3.4): En esta tabla se guardaran los datos que se requieren para dar de alta a un cliente.

Imagen 3.4. Tabla Alta_Cliente.

Descripción: Tabla Usuario (Imagen 3.5): En ella se guardan los datos de los empleados que podrán acceder al sistema por medio del login.

Imagen 3.5. Tabla Usuario.

26

3.4 Diagramas UML 3.4.1 Diagrama De Casos De Uso En el siguiente diagrama (Imagen 3.4.1) se muestra las actividades que lleva acabo el administrador del área de Soporte técnico las cuales son: dar de alta a los clientes o actualizar sus datos, dar seguimiento a las incidencias reportadas y así mismo levantar un reporte de cada una de ellas.

Aprovisionar clientes nuevos

Editar clientes de la BD

Crear reportes de incidencias

Corregir incidencias

Imagen 3.4.1. Diagrama Casos de Uso

27

Object 3

3.4.2 Diagrama de Componentes En la siguiente Imagen3.4.2 se muestra el diagrama de componentes del sistema en el cual se observa la estructura general del sistema y el comportamiento del servicio que estos componentes proporcionan y utilizan a través de las interfaces.

Portal de inicio -COMM-

Aprovisionamiento -COMM-

Rutas de conexión

Acceso a Empleado

-COMM-

-COMM-

B.D de Ittec

Validación (Ittec) -COMM-

-COMM-

Imagen 3.4.2. Diagrama De Componentes

28

Control de registros -COMM-

Object 3

3.4.3 Diagrama de Despliegue En la imagen (3.4.3) se muestra el diagrama de despliegue en el cual se observa la arquitectura del sistema en tiempo de ejecución. Servidor Central Control de Registros

B.D de Ittec

Conexión Rutinas de conexión Sistema Interno Portal de inicio

Dar de alta nuevo cliente

Levantar Reporte

Acceso a Empleado

3.4.4 Diagrama de Actividades.

Imagen 3.4.3. Diagrama De Despliegue

29

Validación (Ittec)

Object 3

Acontinuacion se muestra el diagrama de actividades (Imagen 4.4.4) en el cual se puede observar que se requieren ciertas condiciones para poder entrar al sistema, así como para dar de alta un cliente o reporte. Digite contraseña nuevamente

Ingresar al apartado de usuarios en página principal

Digitar usuario y contraseña

Contraseña incorrecta

Sesión iniciada

Consultar Clientes Consultar reportes

Realizar aprovisionamie nto

Realizar venta

Imprimi r lista de clientes Editar clientes

Imprim ir report

Crear report e

Enviar report e

Cerrar sesión

Enviar referenci as de pago

Imagen 3.4.4. Diagrama Casos de Uso

30

3.5 Creación de Bocetos Para el Sistema Hacer bocetos es una fase fundamental del proceso de diseño ya que con ellos tenemos una idea principal de lo que contendrá cada uno de los módulos del sistema. A continuación se muestran los principales diseños: Como primer prototipo ver imagen 3.5 es la pantalla principal para iniciar sesión, en la cual el empleado necesita tener un nombre de usuario y una contraseña dados de alta en la base para poder ingresar al sistema.

Imagen 3.5.Prototipo de inicio de Sesión del el Sistema

Al momento de ingresar al sistema nos manda por default a la sección clientes ya que no fue necesaria la creación de una pantalla principal ya que el sistema cuenta con dos módulos nada más los cuales son clientes y reportes. 

Modulo Clientes: En este módulo se cuenta con una tabla dinámica de los clientes con los que cuenta la empresa ITTEC además de tener un buscador para los clientes y, dos opciones las cuales son eliminar y editar cliente dentro de la misma tabla (Ver imagen 3.6.1). Se contara con un botón que nos enlazara al siguiente modulo llamado reportes en caso de que lo que queramos es de dar de alta una incidencia El formulario con el que se contara para agregar y editar a los clientes es el mismo (ver imagen 3.6.2).

31



Modulo Reportes: En este módulo al igual que el de los clientes se mostraran todos los reportes además tendrá la opción de agregar nuevo reporte de incidencia y un enlace mediante un botón para regresar al módulo clientes (ver imagen 3.6.3.) El formulario a utilizar al momento de levantar un reporte es el de la imagen 3.6.4.

Imagen 3.6.1.Prototipo de Clientes.

Imagen 3.6.2.Prototipo para editar y Agregar un Cliente.

32

Imagen 3.6.3.Prototipo de Control de Reportes

Imagen 3.6.4.Prototipo para agregar un Reporte

Los colores principales del sistema fueron tomados del logotipo y colores que representan a la empresa ITTEC los resultados finales de los prototipos se encuentran en los anexos.

33

3.6 Implementación A continuación se mostrara un poco de la codificación utilizada para la conexión a la base de datos y un ejemplo de validación de datos En el proyecto se utilizó Dojo y aquí se verá lo que está disponible en dojox para validar, cómo utilizar la funcionalidad directa, y cómo utilizar la funcionalidad con widgets como dijit/ form/ ValidationTextBox. Para empezar, simplemente “require” el proyecto de validación, así: Require (["dojox/validate"], function (validate) { }); Para los

formularios y tablas

creadas en

la interfaz,

fue necesario

ValidationTextBox para así poder usar las validaciones dentro del formulario. Para la conexión a la base de datos desde PHP se utilizó el código:

34

utilizar

El cual hará que los datos que agregan a los formularios del sistema se guarden en la base de datos. Para las funciones de scripts con Ajax un ejemplo del código que se utilizó para la navegación entre secciones del sistema: $('#main-menu a').click(function(event) { event.preventDefault(); $.ajax(this.href, { success: function(data) { $('#main').html($(data).find('#main *')); $('#notification-bar').text('The page has been successfully loaded'); }, error: function() { $('#notification-bar').text('An error occurred'); } }); });

35

CAPITULO 4: CONCLUSIONES Y RESULTADOS

CONCLUSIONES 36

El sistema presentado con anterioridad se ha desarrollado para cubrir una necesidad de la empresa ITTEC debido a que esta no contaba con un sistema automatizado de Soporte Técnico. Al término de cada etapa de la metodología se puede observar el avance que se le brindo a la empresa para su administración de clientes e incidencias. Dentro de las pruebas se pudo observar que los módulos con los que cuenta el sistema permitirá una mejor administración de clientes como los mismos reportes que cada cliente presenta. Además se tendrá una respuesta más rápida a cada incidencia reportada por los clientes esto se dará gracias al motor de búsqueda empleado en la tabla de reportes. Cabe mencionar que dicho sistema cumple con los objetivos que se plantearon desde el principio del proyecto, así como una agradable interfaz para el empleado. Los participantes del proyecto aprendieron a utilizar nuevas herramientas de desarrollo como lo son Dojo y Ajax, las cuales utilizaron para facilitar los formularios y sus validaciones.

RESULTADOS Como resultado del proyecto se obtuvo un sistema, el cual permite llevar un control más adecuado de los clientes de ITTEC, así mismo como sus incidencias de cada cliente el cual se guardaran en una base de datos para en caso de que se vuelva a reportar la misma incidencia en un futuro se tenga la solución al momento de que esta misma es reportada.

37

REFERENCIAS - ITTEC www.ittec.com[1]

- rastadiego.blogspot http://rastadiego.blogspot.mx/2008/08/ciclo-de-desarrollo-del-sistema.html [2] - Página oficial de JQuery https://jquery.com/[3] - Página oficial de DOJO http://getdojo.com/[4] - Página oficial de Ajax https://ajax.com/[5] - Curso Codigofacilito HTML 5 https://codigofacilito.com/cursos/HTML5 - investigación aplicación web y UML http://www.alegsa.com.ar[6] -

Roger S. Pressman (Libro de Ingenieria de Software, Sexta edición).

38

ANEXOS Para la base de datos se utilizó MySQL el cual se implementó en PhpMyAdmin, el código de las tablas y un ejemplo de llenado de datos en el sistema se muestra a continuación. http://www.phpmyadmin.net -- Servidor: 127.0.0.1 --Tiempo de generación: 24-08-2015 a las 21:48:08 --Versión del servidor: 5.6.25-log ----Versión de PHP: 5.5.12 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET@OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; ---- Base de datos: `ittecdb`---------------------------------------------------------

39

----Estructura de la tabla`alta_cliente`---CREATE TABLE IF NOT EXISTS `alta_cliente` ( `Rfc` varchar(13) NOT NULL, `Nombre` varchar(100) NOT NULL, `Calle` varchar(100) NOT NULL, `Num_Ext` varchar(45) NOT NULL, `Num_Int` varchar(45) DEFAULT NULL, `Colonia` varchar(50) NOT NULL, `Municipio` varchar(50) NOT NULL, `Estado` varchar(50) NOT NULL, `CP` decimal(5,0) NOT NULL, `Lada_Oficina` decimal(3,0) NOT NULL, `Telefono_Oficina` decimal(10,0) NOT NULL, `Lada_Celular` decimal(3,0) DEFAULT NULL, `Telefono_Celular` decimal(10,0) NOT NULL, `Giro` varchar(100) DEFAULT NULL, `Clave_Serv` varchar(3) NOT NULL, PRIMARY KEY (`Rfc`), KEY `Clave_Serv_idx` (`Clave_Serv`)) ENGINE=InnoDB DEFAULT CHARSET=utf8; ----------------------------------------------------------- Estructura de la tabla `lista_sistema`-CREATE TABLE IF NOT EXISTS `lista_sistema` ( 40

`Clave_Serv` varchar(3) NOT NULL, `Nombre_Serv` varchar(100) NOT NULL, PRIMARY KEY (`Clave_Serv`)) ENGINE=InnoDB DEFAULT CHARSET=utf8; ---- Volcado de datos para la tabla `lista_sistema`-INSERT INTO `lista_sistema` (`Clave_Serv`, `Nombre_Serv`) VALUES ('A01', 'Servicio 1A'), ('A02', 'Servicio 2A'), ('A03', 'Servicio 3A'), ('A04', 'Servicio 4A'), ('A05', 'Servicio 5A'), ('A06', 'Servicio 6A'), ('A07', 'Servicio 7A'), ('B01', 'Servicio 1B'), ('B02', 'Servicio 2B'), ('B03', 'Servicio 3B'), ('B04', 'Servicio 4B'), ('C01', 'Servicio 1C'), ('C02', 'Servicio 2C'), ('C03', 'Servicio 3C'), ('C04', 'Servicio 4C'); -- -------------------------------------------------------41

---- Estructura de la tabla `ticket`-CREATE TABLE IF NOT EXISTS `ticket` ( `ID_Ticket` int(11) NOT NULL AUTO_INCREMENT, `Rfc` varchar(13) NOT NULL, `Fecha_Hora` datetime NOT NULL, `Usuario` varchar(100) NOT NULL, `Imagen` varchar(100) DEFAULT NULL, `Tipo`

enum('Falla

o

Error','Consulta','Cambios

o

Configuraciones

Sistema','Capacitacion') NOT NULL, `Ambiente` enum('Pruebas','Producciones') NOT NULL, `Interfaz` enum('Interfaz 1','Intefaz 2','Interfaz 3','Interfaz 4') NOT NULL, `Sistema` varchar(3) NOT NULL, `Status` enum('Abierto','Cerrado') DEFAULT NULL, PRIMARY KEY (`ID_Ticket`), KEY `Sistema_idx` (`Sistema`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ; -- ----------------------------------------------------------- Estructura de tabla para la tabla `usuario`-CREATE TABLE IF NOT EXISTS `usuario` ( `Id_user` int(10) NOT NULL AUTO_INCREMENT, `username` varchar(50) CHARACTER SET utf8 COLLATE utf8_spanish_ci DEFAULT NULL, `password` varchar(45) NOT NULL, 42

en

el

PRIMARY KEY (`Id_user`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ; ----Filtros para la tabla `alta_cliente`-ALTER TABLE `alta_cliente` ADD CONSTRAINT `Clave_Serv` FOREIGN KEY (`Clave_Serv`) REFERENCES `lista_sistema` (`Clave_Serv`) ON DELETE NO ACTION ON UPDATE NO ACTION; ---- Filtros para la tabla `ticket`-ALTER TABLE `ticket` ADD CONSTRAINT `Sistema` FOREIGN KEY (`Sistema`) REFERENCES `lista_sistema` (`Clave_Serv`) ON DELETE NO ACTION ON UPDATE NO ACTION; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; En cuanto a la interfaz del Sistema se muestra su funcionalidad y como aparecían cada uno de los cambios realizados al mismo. *La información mostrada en estos ejemplos no es información real, por lo tanto no perjudica a la empresa*.

43

1. Login. Login Para Ingresar al Sistema:

Si se introducen los datos incorrectos manda una alerta diciendo que los campos están mal:

 Mensaje De error

1. Clientes 44

Una vez que se acceda al sistema nos mandara a la página principal (clientes) la cual contiene una tabla con los datos almacenados en la base de datos con varias opciones para eliminar, editar y agregar un nuevo registro. También contiene un botón que nos manda a la página reportes y un buscador interno.

1.1Botón Nuevo Registro: Este botón su funcionalidad es para agregar un nuevo cliente a la base de datos, de él se desprenderá un formulario con varios campos a llenar el cual contiene restricciones en la mayoría de los campos.

Validación de RFC

45

Este mensaje de

“La página en localhost dice:” del cuadro de diálogo no es muy

adecuado para un usuario común. El sistema quedo para uso interno y se cambió el mensaje al final de la estadía.

El cliente es guardado exitosamente y ahora se puede visualizar en la tabla.

Nuevo cliente en la tabla

2.1 Edición : Se encuentra principalmente en la columna opciones de cada registro:

46

Esta opción principalmente nos trae el mismo formulario de agregar clientes pero con los campos de la fila seleccionada. Lo único que cambia es el campo proceso en este caso será edición como se muestra en la siguiente imagen:

El campo Giro ha sido 2 Eliminar: Igual que con el de edicion se encuentra principalmente en la columna opciones de cada registro:

47

Cuando damos click en el botón eliminar nos mandara una alerta, al darle aceptar se nos borrara el registro seleccionado

2.3 Buscador: Solo busca por rfc o nombre como se muestra a continuación(al momento de escribir cada letra o numero va buscando dinámicamente sin la necesidad de un botón)

Si no encuentra ningún registro con los datos introducidos nos mostrara lo siguiente:

48

Botón reportes: Este botón ayudara a navegar a la sección de reportes y visualizar la tabla y los reportes guardados en la base de datos.

Botón Nuevo Reporte: La funcionalidad de este botón es para agregar un nuevo reporte a la base de datos, de él se desprenderá un formulario con varios campos a llenar el cual contiene restricciones igual que el formulario de clientes.

49

Mensaje de Reporte guardado

Nuevo reporte agregado

Una vez terminados los procesos y haber cerrado sesión, regresaremos a la pantalla de inicio con el mensaje de que la sesión ha sido cerrada correctamente.

Mensaje de Sesión cerrada.

50

51