CAPITULO III. PROPUESTA DE SOLUCIÓN AL PROBLEMA
3.2. Aplicación práctica de la propuesta
3.2.4. Pila de sprint (sprint backlog)
3.2.4.3. Sprint 3 Desarrollo de Aplicación web GL
ID Tarea Responsable Estado (horas)
T1 Desarrollo del
CRUD del back – end Scrum Master 48 T2 Actualización de base de datos 2 Scrum Master 8 T3 Diseño de diagramas de caso de uso Scrum Master 16
43 T4 Diseño de diagramas de secuencia Scrum Master 40 T5 Creación servicios web para la aplicación REST Scrum Master 24 T6 Desarrollo del
CRUD del front – end
Scrum Master 96
T7 Interfaz gráfica de
usuario
Scrum Master 8
Desarrollo del CRUD Back –end
Se desarrolla la programación en el lado del servidor de las funciones básicas sobre la base de datos CRUD (Create – Read – Update - Delete) utilizando frameworks con soporte para el lenguaje PHP.
Figura 10: Codificación de bóvedas back-end Actualización de base de datos
Realizamos el rediseño de la base de datos planteada en sus inicios, en esta iteración de añade la tabla difuntos, contratos, arrendamientos personales y representantes.
44 Figura 11: Rediseño de la base de datos
Tabla 13: Tabla arrendamientos
Nombre Tipo de dato Longitud Clave Primaria
Clave Foránea
Obligatorio
Id SERIAL TRUE FALSE TRUE
contrato_id Int FALSE TRUE TRUE
fechainicio DATE FALSE FALSE FALSE
fechafin DATE FALSE FALSE FALSE
costo DECIMAL FALSE FALSE FALSE
representante_id Int FALSE TRUE TRUE
personale_id Int FALSE TRUE TRUE
parentesto VARCHAR(100) 100 FALSE FALSE FALSE
created TIMESTAMP FALSE FALSE FALSE
modified TIMESTAMP FALSE FALSE FALSE
estado Int FALSE FALSE FALSE
Tabla 14: Tabla bóvedas
Nombre Tipo de dato Longitud Clave Primaria
Clave Foránea
Obligatorio
id SERIAL TRUE FALSE TRUE
numero VARCHAR(10) 10 FALSE FALSE FALSE
x DECIMAL FALSE FALSE FALSE
y DECIMAL FALSE FALSE FALSE
45
ancho DECIMAL FALSE FALSE FALSE
alto DECIMAL FALSE FALSE FALSE
largo DECIMAL FALSE FALSE FALSE
tipo int FALSE FALSE FALSE
rotacion DECIMAL FALSE FALSE FALSE
bloque_id int FALSE TRUE TRUE
seccione_id int FALSE TRUE TRUE
created TIMESTAMP FALSE FALSE FALSE
modified TIMESTAMP FALSE FALSE FALSE
estado int FALSE FALSE FALSE
Tabla 15: Tabla bloques
Nombre Tipo de dato Longitud Clave Primaria
Clave Foránea
Obligatorio
id SERIAL TRUE FALSE TRUE
nombres VARCHAR(100) 100 FALSE FALSE FALSE
descripcion VARCHAR(500) 500 FALSE FALSE FALSE
created TIMESTAMP FALSE FALSE FALSE
modified TIMESTAMP FALSE FALSE FALSE
estado Int FALSE FALSE FALSE
Tabla 16: Tabla contratos
Nombre Tipo de dato Longitud Clave Primaria
Clave Foránea
Obligatorio
id SERIAL TRUE FALSE TRUE
difunto_id Int FALSE TRUE TRUE
boveda_id Int FALSE TRUE FALSE
created TIMESTAMP FALSE FALSE FALSE
modified TIMESTAMP FALSE FALSE FALSE
estado Int FALSE FALSE FALSE
Tabla 17: Tabla difuntos
Nombre Tipo de dato Longitud Clave Primaria
Clave Foránea
Obligatorio
id SERIAL TRUE FALSE TRUE
cedula VARCHAR(10) 10 FALSE FALSE FALSE
nombres VARCHAR(100) 100 FALSE FALSE FALSE
apellidos VARCHAR(100) 100 FALSE FALSE FALSE
causademuerte VARCHAR(200) 200 FALSE FALSE FALSE
fechadedefuncion DATE FALSE FALSE FALSE
numeroactadedefuncion VARCHAR(30) 30 FALSE FALSE FALSE
fechanacimiento DATE FALSE FALSE FALSE
sexo VARCHAR(30) 30 FALSE FALSE FALSE
observacion VARCHAR(100) 100 FALSE FALSE FALSE
created TIMESTAMP FALSE FALSE FALSE
modified TIMESTAMP FALSE FALSE FALSE
46 Tabla 18: Tabla Personales
Nombre Tipo de dato Longitud Clave Primaria
Clave Foránea
Obligatorio
id SERIAL TRUE FALSE TRUE
cedula VARCHAR(10) 10 FALSE FALSE FALSE
nombres VARCHAR(100) 100 FALSE FALSE FALSE
apellidos VARCHAR(100) 100 FALSE FALSE FALSE
direccion VARCHAR(500) 500 FALSE FALSE FALSE
telefono VARCHAR(10) 10 FALSE FALSE FALSE
celular VARCHAR(10) 10 FALSE FALSE FALSE
email VARCHAR(200) 200 FALSE FALSE FALSE
sexo VARCHAR(50) 50 FALSE FALSE FALSE
cargo VARCHAR(200) 200 FALSE FALSE FALSE
created TIMESTAMP FALSE FALSE FALSE
modified TIMESTAMP FALSE FALSE FALSE
estado Int FALSE FALSE FALSE
Tabla 19: Tabla Secciones
Nombre Tipo de dato Longitud Clave Primaria
Clave Foránea
Obligatorio
Id SERIAL TRUE FALSE TRUE
Nombre VARCHAR(100) 100 FALSE FALSE FALSE
Descripciones VARCHAR(500) 500 FALSE FALSE FALSE
Created TIMESTAMP FALSE FALSE FALSE
Modified TIMESTAMP FALSE FALSE FALSE
Estado int FALSE FALSE FALSE
Diseño de diagramas de caso de uso
Para representar la forma, tipo y orden que un usuario opera con el sistema, utilizaremos los diagramas UML conocidos como casos de uso. Los actores identificados son: secretaria y administrador.
47 Figura 12: Diagrama de caso de uso personal
Tabla 20: Caso de uso crear personal Caso de Uso: Crear Personal
Actor Administrador
Descripción Agregar información de un nuevo personal y guardar la misma.
Precondiciones Dentro del sistema debe estar registrado el personal.
Flujo normal Presionar botón “Agregar personal”
Ingresar información de acuerdo a los campos requeridos. Guardar información
Flujo alternativo Presentación de mensajes de validaciones.
Tabla 21: Caso de uso ver personal Caso de Uso: Ver Personal
Actor Administrador
Descripción Visualizar información de un miembro del personal seleccionado.
Precondiciones Personal ingresado al sistema.
Flujo normal Elegir el botón “Ver información” en el personal.
48 Tabla 22: Caso de uso seleccionar personal
Caso de Uso: Seleccionar Personal
Actor Secretaria
Descripción Seleccionar personal registrado en el sistema
Precondiciones Personal ingresado al sistema.
Flujo normal Elegir el botón “Seleccionar personal” en el personal
Ver información de personal seleccionado
Flujo alternativo Presentación de mensajes confirmación de eliminación.
Tabla 23: Caso de uso editar personal Caso de Uso: Editar Personal
Actor Administrador
Descripción Editar la información seleccionando al miembro de personal deseado.
Precondiciones Personal ingresado al sistema.
Flujo normal Elegir el botón “Editar personal”.
Ingresar datos a ser modificados. Guardar información.
Tabla 24: Caso de uso eliminar personal Caso de Uso: Eliminar Personal
Actor Administrador
Descripción Eliminar la información del miembro de personal seleccionado.
Precondiciones Personal ingresado al sistema.
Flujo normal Elegir el botón “Eliminar personal”.
Eliminar personal. Confirmar eliminación.
49 Figura 13: Diagrama de caso de uso difuntos Tabla 25: Caso de uso crear difuntos
Caso de Uso: Crear Difuntos
Actor Administrador y Secretaria
Descripción Agregar información de un nuevo difunto y guardar la misma.
Precondiciones Dentro del sistema debe estar registrado el difunto.
Flujo normal El actor selecciona el botón “Crear Difunto”
Ingresar información de acuerdo a los campos requeridos. Guardar información
Flujo alternativo Presentación de mensajes de validaciones.
Tabla 26: Caso de uso ver difuntos Caso de Uso: Ver Difuntos
Actor Administrador y Secretaria
Descripción Visualizar información de un difunto registrado en el sistema.
Precondiciones Difunto ingresado al sistema.
Flujo normal El actor selecciona el botón “Ver información” en los difuntos. Ver información en una ventana modal del registro seleccionado.
50 Tabla 27: Caso de uso editar difuntos
Caso de Uso: Editar Difunto
Actor Administrador y Secretaria
Descripción Editar la información del difunto seleccionado.
Precondiciones Difunto ingresado al sistema.
Flujo normal El actor selecciona el botón “Editar difunto”.
Ingresar datos a ser modificados.
Flujo alternativo Presentación de mensajes de validaciones.
Tabla 28: Caso de uso eliminar difuntos Caso de Uso: Eliminar Difunto
Actor Administrador
Descripción Eliminar la información del difunto seleccionado.
Precondiciones Difunto ingresado al sistema.
Flujo normal El actor selecciona el botón “Eliminar difunto”. Eliminar difunto.
Confirmar eliminación.
51 Figura 14: Diagrama de caso de uso representante
Tabla 29: Caso de uso crear representantes Caso de Uso: Crear Representantes
Actor Administrador y Secretaria
Descripción Agregar información de un nuevo representante.
Precondiciones Dentro del sistema debe estar registrado el representante.
Flujo normal El actor selecciona el botón “Agregar representante”
Ingresar información de acuerdo a los campos requeridos. Guardar información
Flujo alternativo Presentación de mensajes de validaciones.
Tabla 30: Caso de uso ver representante Caso de Uso: Ver Representante
Actor Administrador y Secretaria
Descripción Visualizar información de un representante seleccionado.
52
Flujo normal El actor selecciona el botón “Ver información” en el
representante.
Ver información en una ventana modal del registro seleccionado.
Tabla 31: Caso de uso editar representante Caso de Uso: Editar Representante
Actor Administrador y Secretaria
Descripción Editar la información del representante seleccionado.
Precondiciones Representante ingresado al sistema.
Flujo normal El actor selecciona el botón “Editar representante”.
Ingresar datos a ser modificados.
Flujo alternativo Presentación de mensajes de validaciones.
Tabla 32: Caso de uso eliminar representante Caso de Uso: Eliminar Representante
Actor Administrador
Descripción Eliminar la información del representante seleccionado.
Precondiciones Representante ingresado al sistema.
Flujo normal El actor selecciona el botón “Eliminar representante”.
Eliminar representante. Confirmar eliminación.
53 Figura 15: Diagrama de caso de uso bloques
Tabla 33: Caso de uso ver bloques Caso de Uso: Ver Bloque
Actor Administrador y Secretaria
Descripción Visualizar información del bloque seleccionado.
Precondiciones Sección iniciada por actores.
Flujo normal El actor selecciona el bloque
El actor elige el botón “Ver información”.
54 Tabla 34: Caso de uso crear bloques
Caso de Uso: Crear Bloques
Actor Administrador
Descripción Agregar información de un nuevo bloque.
Precondiciones Dentro del sistema deben estar registrado los bloques existentes.
Flujo normal El actor selecciona el botón “Agregar bloque”
Ingresar información de acuerdo a los campos requeridos.
Flujo alternativo Presentación de mensajes de validaciones.
Tabla 35: Caso de uso editar bloques Caso de Uso: Editar Bloque
Actor Administrador
Descripción Editar la información del bloque seleccionado.
Precondiciones Sección iniciada por actores.
Flujo normal El actor selecciona el botón “Editar bloque”.
Ingresar datos a ser modificados.
Flujo alternativo Presentación de mensajes de validación
Tabla 36: Caso de uso eliminar bloques Caso de Uso: Eliminar Bloque
Actor Administrador
Descripción Eliminar la información del bloque seleccionado.
Precondiciones Actor iniciado sección
Flujo normal El actor selecciona el botón “Eliminar bloque”.
Eliminar bloque. Confirmar eliminación.
55 Figura 16: Diagrama de caso de uso secciones
Tabla 37: Caso de uso crear sección Caso de Uso: Crear Sección
Actor Administrador
Descripción Agregar información de una nueva sección y guardar la misma.
Precondiciones Sección iniciada por el actor
Flujo normal El actor selecciona el botón “Agregar sección”
Ingresar información de acuerdo a los campos requeridos.
Flujo alternativo Presentación de mensajes de validaciones.
Tabla 38: Caso de uso ver sección Caso de Uso: Ver Sección
Actor Administrador y Secretaria
Descripción Visualizar información de las secciones registradas en el sistema
Precondiciones Actores deben iniciar sección.
Flujo normal El actor selecciona el tipo de sección El actor elige el botón “Ver información”. Ver formulario del registro cargado en la pantalla
56 Tabla 39: Caso de uso editar sección
Caso de Uso: Editar Sección
Actor Administrador
Descripción Editar la información del tipo de información seleccionado.
Precondiciones Sección iniciada por el actor.
Flujo normal El actor selecciona el botón “Editar sección”.
Ingresar datos a ser modificados.
Flujo alternativo Presentación de mensajes de validación
Tabla 40: Caso de uso eliminar sección Caso de Uso: Eliminar Sección
Actor Administrador
Descripción Eliminar la información de secciones seleccionado.
Precondiciones Actor iniciado sección
Flujo normal El actor selecciona el botón “Eliminar sección”.
Eliminar sección. Confirmar eliminación.
57 Figura 17: Diagramas de caso de uso Bóvedas
Tabla 41: Caso de uso crear bóvedas Caso de Uso: Crear Bóvedas
Actor Administrador
Descripción Agregar información de una nueva bóveda y guardar la misma.
Precondiciones Sección iniciada por el actor
Flujo normal El actor selecciona el botón “Agregar bóveda”
Ingresar información de acuerdo a los campos requeridos.
58 Tabla 42: Caso de uso ver bóvedas
Caso de Uso: Ver Bóvedas
Actor Administrador y Secretaria
Descripción Observar información acerca bóveda seleccionado
Precondiciones Actores con sección iniciada
Flujo normal El actor selecciona el campo bóveda El actor elige el botón “Ver información”. Ver formulario del registro cargado en la pantalla
Tabla 43: Caso de uso editar bóvedas Caso de Uso: Editar Bóveda
Actor Administrador
Descripción Editar información acerca de una bóveda seleccionada.
Precondiciones Bóveda ingresada al sistema.
Flujo normal El actor selecciona el botón “Editar bóveda”. Ingresar datos a ser modificados.
Flujo alternativo Presentación de mensajes de validación
Tabla 44: Caso de uso editar bóvedas Caso de Uso: Eliminar Bóveda
Actor Administrador
Descripción Eliminar la información de secciones seleccionado.
Precondiciones Bóveda existente en el sistema
Flujo normal El actor selecciona el botón “Eliminar bóveda”.
Confirmar eliminación.
59 Tabla 45: Caso de uso consultar bóvedas
Caso de Uso: Consultar disponibilidad de Bóvedas
Actor Secretaria
Descripción Buscar bóvedas y verificar su disponibilidad.
Precondiciones Secretaria con sesión iniciado.
Flujo normal Seleccionar formulario de consulta
Verificar su disponibilidad y seleccionar bóveda.
Flujo alternativo Presentación del mensajes de validación
Tabla 46: Caso de uso asignar contrato a una bóveda Caso de Uso: Asignar a Contrato
Actor Secretaria
Descripción Asignar contrato a una nueva bóveda disponible.
Precondiciones Actor con sección iniciada.
Flujo normal Seleccionar formulario de bóveda Verificar su disponibilidad
El actor asigna a contrato
60 Figura 18: Diagramas de caso de uso contratos
Tabla 47: Caso de uso ver contrato Caso de Uso: Ver Contratos
Actor Administrador y Secretaria
Descripción Visualizar información de los contratos registrado en el sistema.
Precondiciones Contrato ingresado al sistema.
Flujo normal El actor selecciona el botón “Ver información” en los
contratos.
El actor correspondiente selecciona el contrato a mostrarse. Ver información mediante una ventana modal del registro seleccionado.
61 Tabla 48: Caso de uso crear contratos
Caso de Uso: Crear contratos
Actor Administrador y Secretaria
Descripción El actor administrador y secretaria puede crear contratos y seleccionar bloques y sección del sistema.
Precondiciones Actor con sesión iniciada.
Postcondiciones Se ha creado y seleccionado correctamente el proceso.
Flujo normal El actor selecciona el botón “Crear contratos”
Ingresar información de acuerdo a los campos requeridos. Selección de bloque y sección
Ver información de bloques por secciones. Guardar información
Flujo alternativo Presentación de mensajes de validación
Tabla 49: Caso de uso editar contrato Caso de Uso: Editar Contrato
Actor Administrador y Secretaria
Descripción Editar la información del difunto seleccionado.
El actor secretaria renueva contratos y genera documentos.
Precondiciones Contrato ingresado al sistema.
Flujo normal El actor selecciona el botón “Editar contrato”. Ingresar datos a ser modificados.
Guardar información.
62 Tabla 50: Caso de uso eliminar contrato
Caso de Uso: Eliminar Contrato
Actor Administrador
Descripción Eliminar la información de contrato seleccionado.
Precondiciones Contrato ingresado al sistema.
Flujo normal El actor selecciona el botón “Eliminar contrato”.
Eliminar contrato. Confirmar eliminación.
Flujo alternativo Confirmación de mensaje de eliminación.
Tabla 51: Caso de uso generar informes Caso de Uso: Generar informes
Actor Administrador y Secretaria
Descripción Registra informes y
Generan y registra documentos (informes) por estado y por año.
Precondiciones Informes generados y registrados.
Postcondiciones Los documentos serán generados en formato PDF.
Flujo normal Validar como usuario
Ingreso a la opción de contratos.
Seleccionar opción crear nuevo contratos Ingreso de datos.
Generar contrato
63 Diseño de diagramas de secuencia
Para realizar el diseño del sistema realizamos los diagramas de secuencia que muestran cómo y en qué orden un grupo de objetos funcionan en conjunto.
64 Figura 20: Diagrama de secuencia editar personal
65 Figura 22: Diagrama de secuencia eliminar personal
66
Figura 24: Diagrama de secuencia editar representante
67 Figura 26: Diagrama de secuencia eliminar representante
68 Figura 28: Diagrama de secuencia ver difunto
69 Figura 30: Diagrama de secuencia crear contratos
70 Figura 32: Diagrama de secuencia ver contratos
71 Figura 34: Diagrama de secuencia informe de contratos
72 Figura 36: Diagrama de secuencia ver bloque
73 Figura 38: Diagrama de secuencia eliminar bloque
74 Figura 40: Diagrama de secuencia ver sección
75 Figura 42: Diagrama de secuencia ver bóvedas
76
Figura 44: Diagrama de secuencia de consulta de bóveda
77 Creación servicio web para la aplicación
Servicio web.- Podemos decir que los servicios web facilitan el intercambio de datos entre aplicaciones implementando un conjunto de protocolos y estándares que
normaliza esta comunicación.
Aplicación Rest.-En las Aplicación Rest podemos obtener Interfaz entre sistemas que use HTTP para obtener datos o generar operaciones sobre esos datos en todos los formatos posibles como XML Y JSON.
Tomamos como ejemplo el ingreso de usuario aplicando CakePHP Application Api Rest Auth.
Figura 46: Ejemplo de aplicación Rest
Desarrollo del CRUD front-end
Dentro de Front-end podemos encontrar el código que genera interfaces gráfica, que funcionan del lado del cliente, es decir la ejecución de los códigos o script en un navegador web.
Para llevar a cabo las operaciones de desarrollo de las interfaces se utiliza el framework AngularJS el mismo que son utilizados tanto en el desarrollo como en el uso de aplicaciones.
78
A continuación al final de la segunda interación generamos la interfaz gráfica de usuario.
Interfaz gráfica de usuario
Para la representación de interfaz gráfica de usuario se esquematizó el formulario de Inicio de sesión, Grupos, Usuarios, Representante y Bóvedas uniendo presentación, interacción y relaciones entre objetos. A continuación se visualizará las pantallas del sistema de administración.
Inicio de sesión
Permite el acceso al sistema
79 Ingreso de Grupos
Dentro de este formulario realizamos el ingreso de grupos de usuario.
Figura 48: Diseño de interfaz para grupos Ingreso de Usuarios
Dentro de este formulario realizamos el ingreso de datos de un nuevo usuario.
80 Ingreso de representante
Dentro de este formulario realizamos el ingreso de datos de un representante del fallecido para que sean registrados en el sistema.
Figura 50: Diseño de interfaz para representantes
Graficación de bóvedas
Dentro de este formulario graficamos las bóvedas utilizando webGL tomando en cuenta el bloque, sección y tipo de bóveda.
81
Para el desarrollo de la aplicación WebGL utilizamos canvas ya que es un motor de aplicación 3D y una plataforma de creación en la nube que permite la edición simultánea a través de la interfaz basada en el navegador web.
El código canvas lo interpretamos en la tabla bóvedas.
Figura 52: Codificación de la creación de nichos
Para mostrar gráficos animados por ordenador en 3D utilizamos una biblioteca liviana escrita en JavaScript llamada Three.js, la misma que permite crear complejas animaciones 3D.
Tomamos como ejemplo a la tabla bóveda la cual esta interactuando con las tablas bloques y secciones para poder localizar rápidamente el lugar que se encuentra el nicho o bóveda.
82 Figura 53: Gráfica de bóvedas utilizando WebGL
3.2.4.4. Sprint 4. Pruebas