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.