Diseño del sistema 70

4.1.6.1 Construcción de la interfaz usuario/sistema

Esta fase corresponde al ensamblaje de componentes, ya que en esta etapa se ensambla la capa de

presentación con los componentes de la interfaz Usuario/Sistema, a través de la codificación e

integración de los componentes de la interfaz del lado del cliente y los componentes de interfaz U/S del

lado del servidor web.

1. El código del lado del cliente, contiene los elementos visuales que comprenden archivos

HTML y el código que se debe ejecutar en el navegador del cliente, este código se ejecuta en la forma

de funciones JavaScript, las cuales se utilizaron para que las páginas posean apariencias atractivas al

usuario lo cual hace agradable el tiempo de trabajo destinado a la utilización del sistema, las funciones

JavaScript utilizadas conforman el menú desplegable, calendarios así como también los mensajes de

error y confirmación.

2. El código del lado del servidor web, contiene la lógica de programación de las páginas.

En la tabla 4.3 se muestran los componentes que se encuentran en el primer ciclo, así como

también la descripción de cada uno de ellos.

Componente Descripción

estilo.css Define el tipo de fuente, los colores, la apariencia de los menús desplegables, formularios, tablas para generar las consultas, así como también los botones del sistema

prin_sie.html Archivos html que conforman la interfaz gráfica principal del SIE

reg_sie.html Archivos html que conforman la interfaz gráfica para el registro de datos tanto de estaciones como de equipos

mod_sie.html Archivos html que conforman la interfaz gráfica para realizar la modificación de los datos de cualquier equipo registrado en el sistema

con_sie.html Archivos html que conforman la interfaz gráfica para la consulta tanto de los equipos como de las estaciones registradas en el sistema

Tabla 4.3. Descripción de los componentes de la capa de presentación para la primer ciclo.

Diseño del sistema 71

4.1.6.2 Diagrama de componentes para la capa de presentación

El diagrama de componentes es utilizado para modelar la vista estática de un sistema, debido a que

muestra la organización y las dependencias entre un conjunto de componentes, en este diagrama se

encuentran, tablas, archivos ejecutables y documentos que forman parte del sistema. La función

principal del diagrama de componentes es que sirve para identificar cuales componentes pueden

compartirse entre sistemas o entre las diferentes partes del mismo. En la figura 4.6 se observa el

diagrama de componentes de la capa de presentación para el primer ciclo.

Figura 4.6. Diagrama de componentes de la capa de presentación para el primer ciclo.

4.1.6.3 Ensamblaje de componentes de la lógica del negocio

El ensamblaje de componentes de la lógica del negocio, comprende todos los componentes

necesarios para el tratamiento lógico de los datos dependiendo del dominio de la aplicación, en este

primer ciclo se engloban todos aquellos componentes que se utilizan para el almacenamiento y

tratamiento de los datos de las estaciones y los equipos. La descripción de los componentes de la capa

lógica del negocio para el primer ciclo se muestra en la tabla 4.4 y en la Figura 4.7 se muestra el

diagrama de componentes.

Diseño del sistema 72

Componente Descripción

usuario.php Archivos en código php en los que se implantan los métodos de la clase usuario.

Estación Archivos en código php que implementa la clase estación y todas aquellas que sirvan para describir las características de la estación.

Módulos Archivos en código php que implementa las clases que permiten gestionar y describir las características de cada uno de los equipos.

Utils Comprende los archivos que contienen funciones tanto php como sql que permiten llevar a cabo el manejo de los datos

Tabla 4.4. Descripción de los componentes de la capa lógica del negocio para el primer ciclo.

Figura 4.7. Diagrama de componentes de la capa lógica del negocio para el primer ciclo.

4.1.6.4 Ensamblaje de componentes de la capa de datos

La base de datos y cada una de las tablas que la conforman correspondes a los componentes de la

capa de datos. En este caso, la base de datos del sistema bd_SIE se implemento con el manejador

MySQL de acuerdo al diagrama de clase el primer ciclo mostrado en la figura 3.10.

En la figura 4.8 se muestra el diagrama correspondiente.

Diseño del sistema 73

Figura 4.8. Diagrama de componentes de la capa de datos para el primer ciclo.

4.2 Segundo ciclo

En este ciclo se tratan los cambios ocurridos en cada uno de los subsistemas así como en el esquema

relacional de la base de datos debido a que se agregaron nuevas clases para satisfacer los requisitos que

surgieron al ampliar el dominio del sistema (Ver sección 3.2.7), también se modifica el diseño de la

interfaz gráfica por lo que se realiza la validación correspondiente.

4.2.1 Identificación de subsistemas

Para el segundo ciclo se mantienen los subsistemas definidos anteriormente pero a cada uno se le

agregaron páginas las cuales satisfacen las nuevas necesidades de la coordinación.

1. SIEcye: A este subsistema se le agregaron las páginas que permitirán registros de fallas, de

afectaciones de servicio, de mantenimiento, así como también los reportes de cada uno de los registros

realizados.

Diseño del sistema 74

2. SIEug: Las páginas que fueron agregadas a este subsistema son aquellas que permiten

realizar reportes, como por ejemplo, reportes de fallas, de afectaciones, de equipos, de estaciones,

entre otras.

4.2.2 Esquema relacional de la base de datos

Luego de hacer la transformación de las transformaciones al diagrama de clases y la normalización de las

tablas siguiendo los pasos mencionados anteriormente, se muestra en la tabla 4.5 el esquema relacional

normalizado del diagrama de clases del sistema descrito para el segundo ciclo. Es importante destacar

que a algunas tablas descritas en el primer ciclo se le agregaron los campos último mantenimiento y

próximo mantenimiento

Mantenimiento (código_mtto, estación, equipo, serial_equipo, ultimo_mantenimiento,

próximo_mantenimiento, encargado, observaciones)

Fallas (cod_fallas, estación, ultimo_mtto_fallas, prox_mtto_fallas, encargado,

observaciones, inicio_falla, fin_falla, causa_falla, fecha_inicio_falla, fecha_fin_falla,

horas_falla)

Disponibilidad (cod_disponibilidad, estación, inicio_caida, fin_caida, causa_caida,

fecha_inicio_caida, fecha_fin_caida, horas_caida )

Aires (serial_aire, marca_aire, modelo_aire, modelo_control, serial_control_

marca_control, ultimo_mtto_aires, próximo_mtto_aires)

Baterias (serial_baterias, capAH, marca_bateria, modelo_bateria, cant_banco, voltaje,

rack, autonomiaAH, ultimo_mtto_bateria, próximo_mtto_bateria)

Rectificadores (serial_rec, marca_rec, modelo_rec, cap_corriente_rec, existe_pdb,

vnominal, icarga, ultimo_mtto_rec, próximo_mtto_rec)

Diseño del sistema 75

infraestructura (serial_infra, vialidad, cerca, azotea, areas_verdes, tanquillas,

amaestramiento, torres, area_sitio, area_techo, distancia, marca_balizaje, modelo_balizaje,

ultimo_mtto_infra, próximo_mtto_infra)

Motogenerador (serial_mg, marca_mg, modelo_mg, portenciaKVA, potenciaKW,

voltaje_medido, combustible, ia_mg, ib_mg, ic_mg, van_mg, vbn_mg, vcn_mg, carga_mg,

frecuencia_mg, presión_mg, temperatura_mg, horas_mg, ultimo_mtto_mg,

próximo_mtto_mg)

Tabla 4.5. Esquema normalizado de la base de datos para el segundo ciclo.

4.2.3 Diseño de la interfaz gráfica

En las siguientes figuras se muestran los diagramas de navegación para el segundo ciclo, resaltando en

azul los elementos que fueron agregados al diseño mostrado en el primer ciclo.

Figura 4.9. Diagrama de navegación usuario general para el segundo ciclo.

Diseño del sistema 76

Figura 4.10. Diagrama de navegación especialista y coordinador para el segundo ciclo.

4.2.4 Validación de la interfaz

Caso de uso Interfaz Diseñada

Registrar fallas Los usuarios seleccionan Estación en el menú desplegable y luego presionan la opción registrar fallas

Registrar afectaciones de servicio

Los usuarios seleccionan Estación en el menú desplegable y luego presionan la opción registrar afectaciones de servicio

Reportes de equipos Para generar los reportes los usuarios seleccionan Reportes en el menú desplegable y luego presionan la opción equipos donde deberán elegir el tipo de reporte que desean generar

Reportes de estación Los usuarios seleccionan Reportes en el menú desplegable y luego presionan la opción estación donde deberán elegir el tipo de reporte que desean generar

Reportes de modificaciones

Los usuarios seleccionan Reportes en el menú desplegable y luego presionan la opción modificaciones donde deberán elegir la estación que desean visualizar

Reportes de fallas Los usuarios seleccionan Reportes en el menú desplegable y luego presionan la opción fallas donde deberán elegir la estación que desean visualizar así como también el rango de fechas.

Diseño del sistema 77

Caso de uso Interfaz Diseñada

Reportes de afectación de servicio

Los usuarios seleccionan Reportes en el menú desplegable y luego presionan la opción afectación de servicio donde deberán elegir la estación que desean visualizar así como también el rango de fechas.

Registrar mantenimientos Para registrar los mantenimientos realizados a los equipos se debe seleccionar Módulos en el menú desplegable para elegir el módulo al cual pertenece el equipo seguidamente se selecciona la opción registrar.

Modificar datos de estación Para modificar los datos de la estación los usuarios seleccionan Estación en el menú desplegable para luego presionar la opción modificar donde deben seleccionar la estación que desean modificar.

Tabla 4.6. Validación del diseño para el segundo ciclo.

4.2.5 Implementación del sistema

Debido a que en el segundo ciclo se amplió el dominio del sistema, el aprovisionamiento de

componentes también se amplía desarrollando los componentes de software necesarios para llevar a

cabo el desarrollo del sistema para el segundo ciclo.

4.2.5.1 Construcción de la interfaz usuario/sistema

Como se mencionó anteriormente, en esta fase se debe ensamblar la capa de presentación con los

componentes de la interfaz Usuario/Sistema.

Debido a que la ampliación del dominio de la aplicación para el segundo ciclo se enfocó en la

generación de reportes se agregó un solo componente llamado rep_sie.html, el cual contiene los

archivos html que conforman la interfaz gráfica para el reporte tanto de estaciones como de equipos.

4.2.5.2 Diagrama de componentes para la capa de presentación

En la Figura 4.11 se muestra resaltado en azul el nuevo componente que se agregó al diagrama

mostrado en el primer ciclo.

Diseño del sistema 78

Figura 4.11. Diagrama de componentes de la capa de presentación para el segundo ciclo.

4.2.5.3 Ensamblaje de componentes de la capa lógica del negocio

En esta fase se engloban todos aquellos componentes que se utilizan para el almacenamiento y

tratamiento de los datos de las fallas y afectaciones de servicio. La descripción de los componentes de la

capa lógica del negocio para el segundo ciclo se muestra en la tabla 4.7 y en la Figura 4.12 se muestra

resaltado en azul los componentes agregados al diagrama mostrado en el primer ciclo.

Componente Descripción

Fallas Archivos en código php que implementan las clases destinadas a describir las características de las fallas.

Afectaciones Archivos en código php que implementan las clases destinadas a describir las características de las afectaciones de servicio.

Reportes Archivos en código php que implementan las clases destinadas a realizar los diferentes reportes.

Tabla 4.7. Descripción de los componentes de la capa lógica del negocio para el segundo ciclo.

Diseño del sistema 79

Figura 4.12. Diagrama de componentes de la capa lógica del negocio para el segundo ciclo.

4.2.5.4 Ensamblaje de componentes de la capa de datos

En la figura 4.13 se muestran resaltados en azul los componentes que se agregaron en esta segunda

iteración.

Figura 4.13. Diagrama de componentes de la capa de datos para el segundo ciclo.

Diseño del sistema 80

4.3 Tercer ciclo

En este ciclo solo ha surgido un conjunto de casos de uso relacionados con la necesidad de obtener

reportes gráficos de las fallas y afectaciones de servicio, así como también de las modificaciones que se le

han realizado a la estación, por lo que al esquema relacional de la base de datos mostrado en el tercer

ciclo no se le realiza ningún cambio.

4.3.1 Identificación de los subsistemas

Para el tercer ciclo al igual que en los anteriores se mantienen dos subsistemas, uno destinado al

coordinador de infraestructura y especialistas de operaciones, y otro destinado al usuario general,

debido a que los casos de uso agregados en el tercer ciclo sólo corresponden a reportes gráficos ambos

subsistemas manejan las mismas páginas, las cuales permiten generar dichos reportes.

Los reportes que se generan son de fallas y de afectaciones de servicio, en el caso de las fallas se

crean de dos formas por estación y por tipo falla, de igual manera se crean los reportes gráficos de

afectaciones de servicio, por estación y por causa de afectación.

4.3.2 Diseño de la interfaz gráfica

En las siguientes figuras se observan, resaltados en azul, los módulos agregados al diagrama de

navegación que se mostró en el segundo ciclo.

Figura 4.14. Diagrama de navegación para usuario general en el segundo ciclo.

Diseño del sistema 81

Figura 4.15. Diagrama de navegación para el coordinador y especialista en el tercer ciclo.

4.3.3 Validación de la interfaz

Caso de Uso Descripción

Reportes gráficos fallas por estación El usuario presiona en el menú desplegable reportes gráficos luego selecciona la opción fallas por estación para luego elegir el rango de fechas y la estación

Reportes gráficos por tipo de falla El usuario presiona en el menú desplegable reportes gráficos luego selecciona la opción fallas por tipo de falla para luego elegir el rango de fechas y el tipo de falla que desea visualizar

Reportes gráficos afectación por estación El usuario presiona en el menú desplegable reportes gráficos luego selecciona la opción Afectación por estación para luego elegir el rango de fechas y la estación que desea visualizar

Reportes gráficos por causa afectación

El usuario presiona en el menú desplegable reportes gráficos luego selecciona la opción causa de afectación para luego elegir el rango de fechas y la causa de afectación que desea visualizar

Tabla 4.8. Validación del diseño para el tercer ciclo.

Diseño del sistema 82

4.3.4 Implementación del sistema

Al igual que en el segundo ciclo se amplió el dominio del sistema, por ello, el aprovisionamiento de

componentes también se amplía desarrollando los componentes de software necesarios para llevar a

cabo el desarrollo del sistema para este tercer ciclo.

4.3.4.1 Construcción de la interfaz usuario/sistema

Como se mencionó anteriormente, en esta fase se debe ensamblar la capa de presentación con los

componentes de la interfaz Usuario/Sistema.

Debido a que la ampliación del dominio de la aplicación para el tercer ciclo se enfocó en la

generación de reportes gráficos de fallas y afectaciones de servicio, se agregó un solo componente

llamado graf_sie.html, el cual contiene los archivos html que conforman la interfaz gráfica para los

reportes gráficos de fallas por estación y por causa de la falla, así como también los reportes gráficos de

afectaciones de servicio por estación y por causa de afectación.

4.3.4.2 Diagrama de componentes para la capa de presentación

En la Figura 5.18 se muestra resaltado en azul el nuevo componente que se agregó al diagrama

mostrado en la figura 5.9.

Figura 4.16. Diagrama de componentes de la capa de presentación para el tercer ciclo.

Diseño del sistema 83

4.3.4.3 Ensamblaje de componentes de la capa lógica del negocio

Para satisfacer los requerimientos de el tercer ciclo sólo se agrego un componente llamado plot.php

encargado de generar los gráficos de pastel y puntos necesarios para satisfacer los casos de uso de la

tercera iteración, es importante destacar que este componente es parte de la librería phplot. En la figura

5.19 se muestra resaltado en azul este nuevo componente.

Figura 4.17. Diagrama de componentes de la capa lógica del negocio para el tercer ciclo.

4.3.4.4 Ensamblaje de componentes de la capa de datos

Debido a que en el tercer ciclo se dedicó a la creación de reportes gráficos no se agregó ningún

componente a la capa de datos, ya que para generar dichos reportes se utilizan los componentes

descritos en el segundo ciclo.

Capítulo 5

Implementación y pruebas del sistema

Este capítulo se muestran algunas vistas la interfaz gráfica del sistema implementado así como también

las pruebas realizadas a la aplicación, adicionalmente se muestra el diagrama de despliegue del sistema el

cual indica la situación física de los componentes lógicos desarrollados en el capítulo anterior.

5.1 Vistas de la interfaz gráfica

En las siguientes figuras se muestran las apariencias de las páginas del sistema destinadas a satisfacer cada

uno de los requerimientos de los usuarios.

Figura 5.1. Página principal del SIE.

Implementación y pruebas del sistema 85

Figura 5.2. Página de bienvenida al SIE.

Figura 5.3. Interfaz gráfica para registro de los datos.

Implementación y pruebas del sistema 86

Figura 5.4. Interfaz gráfica para modificación de datos de equipo.

Figura 5.5. Interfaz gráfica para la consulta de datos.

Implementación y pruebas del sistema 87

Figura 5.6. Interfaz gráfica para el registro de fallas.

Figura 5.7. Interfaz gráfica para el registro de afectaciones de servicio.

Implementación y pruebas del sistema 88

Figura 5.8. Interfaz gráfica para consulta de modificaciones.

Figura 5.9. Interfaz gráfica para reporte de fallas.

Figura 5.10. Interfaz gráfica registro de mantenimiento.