escuela politÉcnica nacional · 2019. 4. 8. · para el desarrollo del sistema web, se utilizaron...

128
ESCUELA POLITÉCNICA NACIONAL ESCUELA DE FORMACIÓN DE TECNÓLOGOS DESARROLLO DE UN SISTEMA WEB PARA LA GESTIÓN DE PROYECTOS DE PROYECCIÓN SOCIAL DE LA ESCUELA DE FORMACIÓN DE TECNÓLOGOS (ESFOT) DE LA ESCUELA POLITÉCNICA NACIONAL. PROYECTO PREVIO A LA OBTENCIÓN DEL TÍTULO DE TECNÓLOGO EN ANÁLISIS DE SISTEMAS INFORMÁTICOS GRACE NICOLE VIVAR BELTRÁN [email protected] JHONSON PATRICIO NARVÁEZ CRIOLLO [email protected] DIRECTOR: M.Sc. EDWIN GONZALO SALVADOR PESANTES [email protected] Quito, Enero 2018

Upload: others

Post on 24-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

ESCUELA POLITÉCNICA NACIONAL

ESCUELA DE FORMACIÓN DE TECNÓLOGOS

DESARROLLO DE UN SISTEMA WEB PARA LA GESTIÓN DE PROYECTOS DE PROYECCIÓN SOCIAL DE LA ESCUELA DE

FORMACIÓN DE TECNÓLOGOS (ESFOT) DE LA ESCUELA POLITÉCNICA NACIONAL.

PROYECTO PREVIO A LA OBTENCIÓN DEL TÍTULO DE TECNÓLOGO

EN ANÁLISIS DE SISTEMAS INFORMÁTICOS

GRACE NICOLE VIVAR BELTRÁN

[email protected]

JHONSON PATRICIO NARVÁEZ CRIOLLO

[email protected]

DIRECTOR: M.Sc. EDWIN GONZALO SALVADOR PESANTES

[email protected]

Quito, Enero 2018

Page 2: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

I

DECLARACIÓN

Nosotros, Vivar Beltrán Grace Nicole y Narváez Criollo Jhonson Patricio, declaramos bajo

juramento que el trabajo aquí descrito es de nuestra autoría; que no ha sido previamente

presentada para ningún grado o calificación profesional; y, que hemos consultado las

referencias bibliográficas que se incluyen en este documento.

A través de la presente declaración cedemos nuestros derechos de propiedad intelectual

correspondiente a este trabajo, a la Escuela Politécnica Nacional, según lo establecido por la

Ley de Propiedad Intelectual, por su Reglamento y por la normatividad institucional vigente.

_________________________

Vivar Beltrán Grace Nicole

_________________________

Narváez Criollo Jhonson Patricio

Page 3: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

II

CERTIFICACIÓN

Certificamos que el presente trabajo fue desarrollado por Grace Nicole Vivar Beltrán y Jhonson Patricio Narváez Criollo, bajo nuestra supervisión.

____________________________

M.Sc. Edwin Gonzalo Salvador Pesantes

DIRECTOR DE PROYECTO

______________________________

Ing. Cesar Eduardo Gallardo Carrera

CODIRECTOR DE PROYECTO

Page 4: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

III

AGRADECIMIENTOS

Me gustaría agradecerle a Dios, por darme la fuerza, sabiduría para continuar día tras día en

el cumplimiento de todas mis metas y sueños.

A mi familia por todo el apoyo y toda la fortaleza brindada en momentos de debilidad,

momentos de aprendizaje y sobre todo de felicidad. A mi papá por ser un sustento en la

familia, a mi mamá por brindarme la fuerza para seguir luchando por mis metas y a mi hermano

por enseñarme que pese a las dificultades todos los problemas tienen solución.

A mis abuelitos por ser ejemplo de esfuerzo, dedicación y amor, por saberme guiar y ayudar

a tomar decisiones en los momentos difíciles, y por toda la confianza brindada.

A mis amigos Jhonson y Kary por siempre estar conmigo en las buenas y en las malas, y

demostrar que un amigo es quien cree en ti, aunque tú hayas dejado de creer en ti mismo.

De la misma manera agradezco a mis otros amigos que supieron apoyarme cada día.

También agradezco especialmente al Ing. Edwin Salvador por su ayuda, y paciencia al

momento de elaboración de este trabajo y el tiempo requerido, a su vez al Ing. Cesar Gallardo

por todo el tiempo, paciencia y comprensión a lo largo de toda mi formación profesional.

Finalmente agradezco a la Escuela Politécnica Nacional por haberme dado la oportunidad de

tener una excelente educación a través de todos sus docentes tanto en el ámbito educativo y

profesional.

Grace

Page 5: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

IV

AGRADECIMIENTOS

Agradezco a Dios por haber guiado cada uno de los pasos de mi vida, por la fuerza y sabiduría

para cumplir cada una de mis metas.

A mis padres, que a pesar de la distancia me han dado el apoyo moral y económico para

concluir con mis estudios, a mis hermanos que siempre han estado ahí en las buenas y en las

malas.

A mi hijo Mathias y a mi esposa Alisson que son mi motor y motivo de lucha para continuar

cumpliendo mis sueños y metas que me propongo a diario.

A mis amigas Grace y Karina que siempre han estado apoyándome en las buenas y en las

malas, por sus consejos, por saber escucharme y por brindarme su amistad.

A mis tíos con quienes me criaron, me educaron y los cuales son mi inspiración les agradezco

por todo lo que hoy en día soy.

Además, agradezco al Ing. Edwin Salvador por su ayuda, paciencia y compresión en el

desarrollo de este trabajo, a la vez quiero agradecer al Ing. Cesar Gallardo por el tiempo,

compresión, sus conocimientos y amistad a lo largo de toda mi formación profesional.

Finalmente agradezco a la Escuela Politécnica Nacional por haberme dado la oportunidad de

tener una excelente educación a través de todos sus docentes tanto en el ámbito educativo y

profesional.

Jhonson

Page 6: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

V

ÍNDICE DE CONTENIDOS

1. INTRODUCCIÓN .......................................................................................................................... 1

1.1 Definición del problema ....................................................................................................... 1

1.2 Justificación del Proyecto .................................................................................................... 2

1.3 Objetivos ................................................................................................................................ 2

Objetivo General ........................................................................................................................... 2

Objetivos Específicos ................................................................................................................... 2

1.4 Alcance ................................................................................................................................... 3

2. METODOLOGÍA ........................................................................................................................... 3

2.1 Ingeniería de Software ......................................................................................................... 3

Scrum ............................................................................................................................................. 4

Equipo Scrum ................................................................................................................................ 4

Eventos de Scrum ........................................................................................................................ 4

Reuniones Scrum ......................................................................................................................... 5

2.2 Levantamiento de Requerimientos .................................................................................... 6

2.3 Diseño y Construcción de la Arquitectura del Proyecto ................................................. 9

Planificación del Sprint 0 ............................................................................................................. 9

2.4 Herramientas a utilizar en el Proyecto ............................................................................ 10

HTML5 .......................................................................................................................................... 10

CSS3 ............................................................................................................................................ 11

JavaScript .................................................................................................................................... 11

JQuery .......................................................................................................................................... 11

Ajax ............................................................................................................................................... 11

Bootstrap ...................................................................................................................................... 12

Wordpress .................................................................................................................................... 12

Hosting ......................................................................................................................................... 12

Dominio ........................................................................................................................................ 12

MySQL .......................................................................................................................................... 12

Servidor Web ............................................................................................................................... 13

Symfony ....................................................................................................................................... 13

Composer .................................................................................................................................... 15

Page 7: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

VI

3. RESULTADOS Y DISCUSIÓN ................................................................................................. 15

3.1 Desarrollo del Sprint 1. Elaboración de la página principal y módulo Organización. 15

Planificación del Sprint 1 ........................................................................................................... 15

Pruebas Sprint 1 ......................................................................................................................... 18

Retroalimentación ....................................................................................................................... 22

3.2 Desarrollo del Sprint 2. Elaboración del módulo Administrador y de Profesores. .... 22

Planificación del Sprint 2 ........................................................................................................... 22

Pruebas Sprint 2 ......................................................................................................................... 30

Retroalimentación ....................................................................................................................... 45

3.3 Desarrollo del Sprint 3. Gestión de Informes ................................................................. 45

Planificación del Sprint 3 ........................................................................................................... 45

Retroalimentación ....................................................................................................................... 49

4. CONCLUSIONES ....................................................................................................................... 50

5. REFERENCIAS BIBLIOGRAFÍAS ........................................................................................... 51

ANEXOS .............................................................................................................................................. 53

Page 8: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

VII

ÍNDICE DE TABLA

Tabla 1 - Equipo Scrum ......................................................................................................... 6

Tabla 2 - Roles ...................................................................................................................... 7

Tabla 3 - Product Backlog ..................................................................................................... 8

Tabla 4 - Tareas del Sprint 1 ................................................................................................16

Tabla 5 - Ejecución del sprint 1 Scrum Diario .......................................................................17

Tabla 6 - Validación de Campos obligatorios ........................................................................20

Tabla 7 - Tareas del Sprint 2 ................................................................................................23

Tabla 8 - Ejecución del Sprint 2 Scrum Diario ......................................................................25

Tabla 9 - Tareas del sprint 3 .................................................................................................46

Tabla 10 - Tareas diarias del sprint 3 ...................................................................................47

Page 9: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

VIII

ÍNDICE DE FIGURAS

Figura 1 - Proceso Scrum (Slide Hunter, 2017) ............................................................................... 5

Figura 2 - Diseño de Navegación (Narváez & Vivar, 2017) ........................................................... 9

Figura 3 - Modelo Entidad Relación (Narváez & Vivar, 2017) ..................................................... 10

Figura 4 - Modelo Vista Controlador (WikiSalud, 2013) ............................................................... 14

Figura 5 - Flujo de aplicación en Symfony (DISQUS, 2013) ....................................................... 14

Figura 6 - Página Principal (Narváez & Vivar, 2017) .................................................................... 18

Figura 7 - Reglamento (Narváez & Vivar, 2017)............................................................................ 19

Figura 8 - Noticias (Narváez & Vivar, 2017) ................................................................................... 19

Figura 9 - Formulario de Solicitud (Narváez & Vivar, 2017) ........................................................ 20

Figura 10 - Solicitudes (Narváez & Vivar, 2017)............................................................................ 21

Figura 11 - Mis Proyectos (Narváez & Vivar, 2017) ...................................................................... 21

Figura 12 - Proyectos por Aprobar (Narváez & Vivar, 2017) ...................................................... 21

Figura 13 - Proyectos Rechazados (Narváez & Vivar, 2017) ...................................................... 21

Figura 14 - Crear Nueva Solicitud (Narváez & Vivar, 2017) ........................................................ 22

Figura 15- Prueba Unitaria Sprint 1 (Narváez & Vivar, 2017) ..................................................... 22

Figura 16 - Formulario de Autenticación (Narváez & Vivar, 2017) ............................................. 30

Figura 17 - Notificación de la clave de acceso (Narváez & Vivar, 2017) ................................... 30

Figura 18 - Cambio de Contraseña (Narváez & Vivar, 2017) ...................................................... 31

Figura 19 - Perfil del Administrador (Narváez & Vivar, 2017) ...................................................... 32

Figura 20 - Motivo del rechazo (Narváez & Vivar, 2017) ............................................................. 32

Figura 21 - Asignación del Profesor (Narváez & Vivar, 2017) ..................................................... 33

Figura 22 - Módulo del Profesor (Narváez & Vivar, 2017) ........................................................... 33

Figura 23 - Sección 1 (Narváez & Vivar, 2017) ............................................................................. 34

Figura 24 - Opción atrás (Narváez & Vivar, 2017) ........................................................................ 35

Figura 25 - Formulario de edición (Narváez & Vivar, 2017) ........................................................ 35

Figura 26 - Sección 2 (Narváez & Vivar, 2017) ............................................................................. 36

Figura 27 - Formulario Beneficiario (Narváez & Vivar, 2017). ..................................................... 36

Figura 28 - Opción atrás (Narváez & Vivar, 2017) ........................................................................ 37

Figura 29 - Sección 3 (Narváez & Vivar, 2017) ............................................................................. 37

Figura 30 - Objetivo Específico (Narváez & Vivar, 2017) ............................................................. 38

Figura 31 –Indicadores (Narváez & Vivar, 2017) .......................................................................... 38

Figura 32 - Editar Objetivo Específico (Narváez & Vivar, 2017) ................................................. 39

Figura 33 - Opción de Eliminar (Narváez & Vivar, 2017) ............................................................. 39

Figura 34 - Pertinencia Académica (Narváez & Vivar, 2017) ...................................................... 40

Figura 35 - Opciones de Editar y Eliminar (Narváez & Vivar, 2017) .......................................... 40

Figura 36 – Asignatura (Narváez & Vivar, 2017) ........................................................................... 41

Figura 37 - Asignación de Profesor y Colaborador (Narváez & Vivar, 2017) ........................... 41

Figura 38 - Otros colaboradores (Narváez & Vivar, 2017) ........................................................... 42

Figura 39 - Sección 5 (Narváez & Vivar, 2017) ............................................................................. 43

Figura 40 - Sección 6 (Narváez & Vivar, 2017) ............................................................................. 44

Figura 41 - Resumen (Narváez & Vivar, 2017) ............................................................................. 44

Figura 42 - Prueba unitaria Sprint 2 (Narváez & Vivar, 2017) ..................................................... 45

Figura 43 - Prueba Unitaria Sprint 3 (Narváez & Vivar, 2017) .................................................... 49

Page 10: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

IX

RESUMEN

El presente proyecto tiene como objetivo desarrollar un sistema web para la gestión de

proyectos de vinculación social de la Escuela de Formación de Tecnólogos (ESFOT) de la

Escuela Politécnica Nacional, con la finalidad de cubrir necesidades de la sociedad y así los

estudiantes de la ESFOT puedan participar en los proyectos, realizando actividades

relacionadas con las carreras.

Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el

lenguaje de programación PHP en el Back-End, Bootstrap para la parte del diseño y una

plantilla de WordPress para página informativa.

Este artículo se divide en 4 partes: introducción, metodología, resultados y conclusiones.

En la introducción se describe la definición del problema, la necesidad de implementar el

proyecto, los objetivos principales y la justificación.

En la metodología se detallan la forma cómo se va a desarrollar el proyecto, justificando la

utilización de las herramientas, sus características, requerimientos y la generación de la

documentación necesaria.

Para los resultados se implementó la metodología Scrum, definiendo el funcionamiento del

proyecto con pruebas y la ejecución de cada Sprint.

Finalmente se dan conclusiones a cada objetivo planteado en este proyecto.

Page 11: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

X

ABSTRACT

This project aims to develop a web system for the management of social projects of the

Escuela de Formación de Tecnólogos (ESFOT) of the Escuela Politécnica Nacional, in order

of meeting the needs of society and allow the participation of the students of ESFOT in these

projects.

For the development of the web system, tools such as the Symfony framework, the PHP

programming language in the Back-End, Bootstrap for the design part and a WordPress

template for the informative page were used.

Four parts were defined for development: introduction, methodology, results and conclusions.

The introduction describes the definition of the problem, the need to implement the project, the

main objectives and the justification.

The methodology describes how the project will be developed, justifying the use of the tools,

their characteristics, requirements and the generation of the necessary documentation.

For the results section, the Scrum methodology was implemented, defining the operation of

the project with tests and the execution of each Sprint.

Finally, conclusions are given to each objective proposed in this project.

Page 12: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

1

1. INTRODUCCIÓN

El avance tecnológico en la actualidad ha permitido que las empresas, negocios e

instituciones educativas mejoren la administración de sus procesos y la calidad de servicio.

Los usuarios a través de un navegador pueden acceder al internet y realizar cualquier tipo

de actividad logrando generar confianza y credibilidad de la información obtenida, así

también con la ayuda de las aplicaciones web se puede mejorar el control de la gestión

de procesos, comunicación entre cliente y proveedor, siendo estas de uso sencillo y

factible para cualquier tipo de usuario o empresa.

1.1 Definición del problema

La Escuela Politécnica Nacional, con el propósito de resolver problemas de la sociedad

cuenta con un Departamento de Investigación y Proyección Social (DIPS). Este

departamento debe cumplir con políticas y normativas para que la vinculación con el medio

externo pueda integrar aspectos tecnológicos y de innovación.

Siendo parte de la Escuela Politécnica Nacional, la Escuela De Formación De Tecnólogos

(ESFOT), a través de la comisión de proyección social (COPS), se encuentra en un

proceso de identificación de necesidades de la comunidad mediante visitas y encuestas a

instituciones u organizaciones que estén interesadas en ser parte de proyectos que

ayuden a solucionar los problemas detectados, con la participación de los estudiantes de

las diferentes carreras (Análisis de Sistemas Informáticos, Agua y Saneamiento

Ambiental, Electrónica y Telecomunicaciones y Electromecánica) .

Actualmente, el proceso que debe seguir la COPS-ESFOT para generar nuevos proyectos

es ineficiente ya que el número de instituciones externas con las que se puede establecer

contacto es limitado y no todas estas instituciones poseen alguna necesidad que pueda

ser cubierta con la participación de los estudiantes. Adicionalmente, no existe un sistema

que ayude a la gestión y seguimiento de los proyectos propuestos y en ejecución. Por este

motivo, la ESFOT desea desarrollar un portal web que permita la comunicación eficiente

con la comunidad donde las instituciones externas puedan presentar sus necesidades

para que sean analizadas por la COPS-ESFOT y, de ser pertinente, generar nuevos

proyectos de proyección social. Además del portal, se desea implementar un sistema que

facilite la gestión de los proyectos incluyendo la elaboración de propuestas, aceptación,

ejecución y seguimiento.

Page 13: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

2

1.2 Justificación del Proyecto

El sistema de gestión de proyección social de la ESFOT facilitará el trabajo entre la COPS-

ESFOT, las instituciones externas y los estudiantes interesados en realizar los proyectos.

El sistema web surge con la necesidad de la creación de proyectos dentro de la Escuela

de Formación de Tecnólogos, para cubrir necesidades de la sociedad, especialmente de

los grupos más necesitados.

El sistema ayudará a tener una comunicación rápida, y eficiente para que los proyectos

puedan crearse con más frecuencia y así los estudiantes de la ESFOT puedan tener una

comunicación directa con la comunidad y realizar actividades relacionadas con las

carreras existentes.

Este proyecto se basa en la Comisión de Proyección Social de la Escuela de Formación

de Tecnólogos, dando a conocer la función de esta unidad. Permitiendo el trabajo entre

los docentes y los estudiantes a través de la creación de proyectos para el beneficio de la

sociedad, mediante un sistema web para la comunicación entre estos y poder aplicar el

reglamento de la Escuela Politécnica Nacional [1].

1.3 Objetivos

Objetivo General

Desarrollar un sistema web para la gestión de proyectos de proyección social de la

Escuela de Formación de Tecnólogos (ESFOT) de la Escuela Politécnica Nacional.

Objetivos Específicos

1. Levantar los requerimientos de la ESFOT en cuanto al sistema de recepción de

necesidades y de gestión de proyectos.

2. Analizar la información para el diseño del modelo de la base de datos del sistema.

3. Desarrollar el sistema web utilizando herramientas actuales y apropiadas.

4. Determinar los requerimientos mínimos que debe tener el servidor para la

implementación y funcionalidad del sistema web.

5. Elaborar un plan de pruebas en el cual se pueda evaluar el funcionamiento del sistema

en situaciones críticas.

Page 14: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

3

1.4 Alcance

El sistema de gestión de proyectos de proyección social tiene como finalidad mejorar el

proceso de recepción de propuestas, como también la formulación y seguimiento de

proyectos. Esto incluirá el análisis de requerimientos, el diseño, codificación, evaluación e

implementación del sistema.

El acceso al sistema será controlado mediante el uso de correos y contraseñas que les

permitirá a los usuarios realizar únicamente las actividades autorizadas. Para la recepción

de necesidades se sugiere el uso de un portal que será accedido por el público en general

para el envío de datos mediante un formulario ofrecido por la dirección de Proyección

Social de la EPN.

2. METODOLOGÍA

El tipo de investigación que se utilizó en el proyecto fue la investigación aplicada, que

busca la generación de conocimiento con la aplicación directa a los problemas de la

sociedad. Es fundamental en los hallazgos tecnológicos de la investigación básica,

ocupándose del proceso de enlace entre la teoría y el producto.

2.1 Ingeniería de Software

Al no tener un enfoque disciplinado al momento de desarrollar este sistema pueden ocurrir

errores en el proceso, por este motivo es necesario entender el proceso adecuado para la

aplicación de Ingeniería de Software, está siendo una disciplina, según [2] es un enfoque

sistemático, disciplinado y cuantificable al desarrollo, operación y mantenimiento de

software.

Por lo mencionado, se utilizó ingeniería de software para el desarrollo del sistema

utilizando procedimientos tales como: estrategias, métodos y técnicas con el propósito de

entregar un producto de calidad.

En la construcción de este proyecto se aplicó las metodologías no tradicionales también

conocida como metodologías ágiles. Los cuales son métodos de ingeniería del software

basados en el desarrollo iterativo e incremental, ya que su propósito es reducir los

procesos evitando los trabajos y documentación innecesaria.

Page 15: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

4

Existe varías metodologías ágiles, de la cuales se destacan las dos más utilizadas: Scrum

y Extreme Programing (XP).

Scrum

La metodología seleccionada para el desarrollo de este proyecto es Scrum, ya que permite

una comunicación con el cliente.

El marco de trabajo de Scrum consiste en los equipos, roles, eventos, artefactos y reglas

asociadas. Cada componente dentro del marco de trabajo sirve a un propósito específico

y es esencial para el éxito de Scrum [3].

Equipo Scrum

Es un equipo auto organizado, que tiene un objetivo común, comparten la responsabilidad

del trabajo que realizan en cada iteración y en el proyecto, también es un equipo muy

disciplinado ya que tienen habilidades para poder identificar y ejecutar todas las tareas

que permiten proporcionar al cliente los requisitos comprometidos en cada iteración

permitiendo la entrega parcial del producto siempre funcional.

El Equipo Scrum consiste en tres roles principales como:

1. Product Owner: Es el dueño del producto.

2. Development Team: Consiste en los profesionales que desarrollan el proyecto.

3. Scrum Master: Es un líder que está al servicio del Equipo Scrum. Es el

responsable de que todo funciona según lo planeado.

Eventos de Scrum

Sprints. Son ciclos iterativos en los cuales se desarrolla o mejora una funcionalidad para

producir nuevos incrementos. Durante un Sprint el producto es diseñado, codificado y

probado; mientras su arquitectura y diseño evolucionan durante el desarrollo.

Product Backlog List. Es una lista priorizada en donde se define el trabajo que se va a

realizar en el proyecto; sin embargo, la restricción que tiene es que solo puede cambiarse

entre Sprints.

Sprint Backlog. Es una lista que tiene el Product Backlog List que van hacer

implementado en el siguiente Sprint.

Incremento. Es la suma de todos los elementos de la lista de productos complementados

en un Sprint.

Page 16: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

5

Reuniones Scrum

El método Scrum se basa en la división del trabajo en etapas y la retroalimentación entre

el líder del proyecto y el cliente tal como se indica en la Figura 1 - Proceso Scrum (Slide

Hunter, 2017). Esto se logra a través de reuniones de equipo, las cuales son:

1. Planificación del Sprint: En esta reunión, los miembros del equipo de trabajo se

citan con el Scrum Master y el Product Owner. Esta reunión puede durar entre 4 y

8 horas.

2. Sprint Diario: Esta reunión tiene lugar cada día y no dura más de 15 minutos.

3. Revisión del Sprint: Esta reunión se lleva a cabo al final del Sprint, para

inspeccionar el incremento y adaptar por lo que las partes involucradas colaboran

durante la revisión de lo que se hizo en el sprint.

4. Retrospectiva: Esta es la última reunión que realizan, donde el equipo de trabajo

y el Scrum Master en donde se analizan lo que ha sido el proceso e identifican y

evalúan problemas concretos [4].

Figura 1 - Proceso Scrum (Slide Hunter, 2017)

Antes de empezar con el levantamiento de requerimientos, se especifica los roles que

intervienen en este proyecto indicados en la Tabla 1 - Equipo Scrum definidos como el

Equipo Scrum.

Page 17: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

6

Tabla 1 - Equipo Scrum

Roles Descripción Persona

Product Owner Director de la Unidad de

Vinculación

COPS-ESFOT

Scrum Master Director del Proyecto Ing. Edwin Salvador

Development Team Desarrolladores Grace Vivar, Jhonson

Narváez

2.2 Levantamiento de Requerimientos

Para el levantamiento de requerimientos se establecieron varias reuniones con el Product

Owner, en donde se conoció que realizaban las entrevistas a las organizaciones mediante

sus estudiantes, y así determinar proyectos a resolver. Se realizó el análisis respectivo

por lo que se establecieron los objetivos funcionales y los requerimientos necesarios para

la implementación del sistema. En las reuniones se obtuvo la documentación necesaria

para el desarrollo.

Además, se determinó los diferentes roles que la aplicación debía tener las cuales son:

Rol de Organización. Corresponde a cada de una de las entidades externas de la Unidad

de Vinculación, es decir cada organización solicitante de los servicios que la unidad brinda,

en donde presentará el problema a ser solucionada y la información para poder

contactarlo.

Rol de Administrador. Corresponde al administrador del sistema encargado de receptar

todas las solicitudes enviadas por cada organización. La solicitud es analizada para

determinar si es posible dar solución al problema por parte de la Unidad de Vinculación.

Una vez analizado el administrador lo aprueba y lo designa a un profesor para continuar

con el proceso caso contrario lo rechazará é indicará los motivos del rechazo. Además,

puede registrar profesores y otros administradores.

Rol de Profesor. Corresponde a los profesores encargados de continuar con el proceso,

en donde deberá registrar los demás datos de la organización, una vez que se ha

contactado y reunido con el representante de cada organización. El profesor es el

encargado se asignar el director, quien va estar a cargo del proyecto. También es

Page 18: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

7

encargado de presentar la documentación a la Unidad de Vinculación para su respectiva

aprobación. Una vez aprobado el proyecto en el vicerrectorado de investigación y

proyección social, será encargado de asignar director, colaboradores y los estudiantes

que participarán en el desarrollo del proyecto. En el proceso de desarrollo del proyecto el

profesor emitirá los informes de avance y los informes finales.

Por cada rol indicado anteriormente, se especifica que privilegios tendrán en la aplicación,

los cuales de detallan en la Tabla 2 - Roles.

Tabla 2 - Roles

Roles Descripción

Administrador Es la persona encargada de aceptar o rechazar las

solicitudes enviadas por la organización. También puede

registrar otros administradores y los profesores.

Organización Son las encargadas de enviar solicitudes.

Profesor Persona encargada de continuar con el proceso hasta su

aprobación. También puede asignar director, colaboradores

y estudiantes.

Generación de historias de usuario

Las historias de usuario son pequeñas descripciones de los requerimientos del dueño del

producto sobre cómo debe comportarse el sistema ante distintos eventos.

Para las historias de usuario se tomó el modelo elaborado por [5], en donde da la

descripción de cada uno de estos elementos:

· Identificador (ID) de la historia: Código que identifica a la historia en el proyecto

que se esté desarrollando.

· Rol: Es el rol que está desempeñando el usuario cuando utiliza la funcionalidad

que se está describiendo.

· Característica/Funcionalidad: Representa la función que el rol quiere o necesita

hacer en el sistema.

· Razón/Resultado: Describe el resultado obtenido al realizar una acción.

· Nº de Escenario: Identifica el número de escenarios asociado con la historia de

usuario.

· Criterio de aceptación: Condiciones que se presentan frente a un escenario.

Page 19: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

8

· Contexto: Describe el criterio de aceptación.

· Evento: Acción que el usuario realiza.

· Resultado/ Comportamiento esperado: Resultado obtenido al efectuar la acción.

Las historias de usuario referentes al desarrollo de los módulos de Administrador,

Organización y Profesores se encuentran en el ANEXO 1.

Generación del Product Backlog

Para cada uno de los requerimientos se tomará los siguientes campos:

· Descripción

· Complejidad o estimación del esfuerzo requerido

· Prioridad

· Número de Sprint

· Duración

El tiempo varía de acuerdo con el grado de complejidad y la cantidad de procesos que se

empleen.

A continuación, se especifica el Product Backlog para el desarrollo del proyecto

presentado en la Tabla 3 - Product Backlog.

Tabla 3 - Product Backlog

Descripción Prioridad Complejidad N.

Sprint

Duración

(días)

Diseño y construcción de la arquitectura del Proyecto.

5 5 0 10

Elaboración de la página principal y módulo Organización.

4 4 1 10

Elaboración del módulo Administrador y de Profesores.

5 5 3 25

Gestión de Informes 4 4 4 5

Total 50

La prioridad y la complejidad fueron valoradas de mayor a menor, donde la prioridad 1 es

menos urgente y 5 es de más urgente. La complejidad está valorada dependiendo el grado

donde 5 representa mayor complejidad y 1 menor complejidad.

Page 20: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

9

2.3 Diseño y Construcción de la Arquitectura del Proyecto

Planificación del Sprint 0

En el desarrollo de este sprint se realizó la construcción de la arquitectura del proyecto

definiendo la Historia de Usuario 0. Este Sprint tuvo una duración de 15 días, trabajando

3 horas aproximadamente.

El objetivo de este sprint fue

- definir la arquitectura del proyecto,

- la navegación y

- el modelo de la base de datos, además, se realizó la configuración del marco

de trabajo.

Se comenzó diseñando la arquitectura del proyecto y la navegabilidad que va tener el

sistema tal como se indica en la Figura 2 - Diseño de Navegación (Narváez & Vivar, 2017).

Una vez mostrado la página principal y aprobada por el Product Owner, se procedió a

diseñar el modelo entidad relación basándose en toda la información otorgada por el

director de la Unidad de Vinculación.

Diseño de Navegación

Página

Login

Organización

Administrador

Profesores

Solicitudes

Mis Proyectos

Crear Proyecto

Inicio

Proceso

Noticias

Registro

Contáctos

Iniciar Sesión

Página Informátiva

Reglamento

Noticias

Instrucciones

Solicitud

Contáctos

Solicitudes

Crear

Proyectos

Solicitudes

Crear

Proyectos

Archivos

Registrar

Editar

Eliminar

Figura 2 - Diseño de Navegación (Narváez & Vivar, 2017)

En el diseño de la base de datos se lo realizó de acuerdo con las especificaciones del

director en donde se controlaría la información de la organización, administradores y

profesores tal como se indica en la Figura 3 - Modelo Entidad Relación (Narváez & Vivar,

Page 21: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

10

2017). Una vez terminado el diseño de la base, se realizó una revisión juntamente con el

Scrum Master. La revisión fue necesaria para identificar las posibles incoherencias y

errores del diseño de la base.

Figura 3 - Modelo Entidad Relación (Narváez & Vivar, 2017)

Retroalimentación

Durante el desarrollo del sprint 0, se efectuó el diseño de la base de datos tomando en

cuenta a la documentación y con la reunión que se mantuvo con la Unidad de Vinculación.

Se realizó la respectiva revisión conjuntamente con la colaboración del Scrum Master, y

se realizaron pruebas para observar su funcionamiento y verificar que no existan errores

al momento de llenar con la información.

El proceso continuó sin presentarse inconvenientes por lo que se procede al desarrollo del

sprint 1.

2.4 Herramientas a utilizar en el Proyecto

HTML5

La versión de HTML5 es la actualización de HTML, que agrupa nuevas tecnologías y que

hoy permite la conexión desde los teléfonos móviles, computadoras, tabletas entre otros.

Como parte del diseño de este sistema se utilizó HTML (HyperText Markup Language)

que es un hipertexto, el cual es interpretado por el visualizador o programa que utiliza el

navegador por el WWW, presentado de forma estructurada [6].

Page 22: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

11

CSS3

CSS (Cascading Style Sheets) se utiliza para dar estilos a documentos HTML separando

el contenido de la presentación. La última versión CSS3 es la evolución de las hojas de

estilos que es altamente utilizada. Trae más opciones para el diseño como sombras,

gradientes, transiciones o animaciones, antes esto era posible realizando a mano o por

script [6]. Para organizar los elementos de HTML se vio en la necesidad de utilizar CSS3

como parte del diseño del sistema Web.

JavaScript

JavaScript es un lenguaje de scripting basado en objetos no tipiado y liviano.

Sus características más importantes son:

ü JavaScript es un lenguaje interpretado, es decir no requiere de compilación.

ü Tiene una programación orientada a objetos. El código de los objetos es

expandible y está predefinido.

ü No usa clases ni herencia.

ü JavaScript es un lenguaje orientado a eventos y además está reducido para poder

acceder a la información de una página y puedan actuar sobre la interfaz del

navegador [7].

El sistema debe ser dinámico y de fácil navegabilidad para el usuario, además mostrar

mensajes de alertas, validaciones entre otras funcionalidades por lo que se introdujo

JavaScript para acceder a objetos en el sistema.

JQuery

Para que JavaScript interactúe con HTML se utilizó JQuery y se desarrollaron las

animaciones. JQuery es una librería de JavaScript muy rápida y muy ligera que simplifica

el desarrollo por parte del cliente y además permite interactuar con Ajax [8]. Como

característica principal, es un elemento indispensable para el desarrollo de aplicaciones

Web, sin perder detalles de visualización ni las necesidades técnicas.

Ajax

Ajax es una extensión de JavaScript que facilita la conexión con un servidor web

dinámicamente, es decir que permite actualizar contenidos web sin la necesidad de

recargar la página web completamente [9]. Para no estar recargando las páginas web al

momento de interactuar con el sistema, se utilizó Ajax para crear una aplicación

interactiva.

Page 23: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

12

Bootstrap

Bootstrap reduce el tiempo para crear interfaces web con CSS y JavaScript, cuya

particularidad es adaptar el diseño al dispositivo en que se esté usando como:

computadora, tabletas, teléfonos móviles, etc. Esta técnica de desarrollo y diseño se

conoce como Responsive Design. En el diseño del sistema se utilizó el framework de

Bootstrap para los estilos de cada interfaz [10].

Wordpress

Wordpress es una herramienta que permite gestionar y crear páginas web dinámicas con

facilidad. Además, Wordpress está basado en PHP y MySQL bajo la licencia GPL

(Licencia Pública General) y es Software Libre. Como parte del diseño se utilizó una

plantilla de Wordpress como página de presentación del sistema en donde contendrá

información de la Unidad de Vinculación Social [11].

Hosting

Un hosting permite alojar la información en servidores las cuales deben contar a su

alrededor con una infraestructura técnica como humana, donde la información

almacenada sea segura y esté disponible para los usuarios que la necesiten [12]. Se

adquirió un hosting en Hosting Ecuador para el alojamiento del sistema Web.

Dominio

Un dominio es el nombre que identifica un sitio web. El propósito principal de los nombres

de dominio en Internet y del sistema de nombres de dominio (DNS), es traducir las

direcciones IP de cada modo activo en la reden términos de encontrarlo fácilmente [12].

El dominio que se adquirió con propósito de implementar el proyecto fue

systemtechnologist.com.

MySQL

MySQL es un sistema de gestión de base de datos relacional de código abierto, basado

en lenguaje de consulta estructurado (SQL). Este sistema permite la administración de

bases de datos de forma segura, es muy rápida y fácil de usar [13].

Para llevar el control de toda la información que ingrese las diferentes organizaciones y

demás que forman parte de la Unidad de Vinculación Social, se determinó utilizar base de

datos relacional. Una base de datos relacional es la que trata a un conjunto de tablas y se

la manipula de acuerdo al modelo de datos. Contiene un conjunto de objetos que se

utilizan para almacenar, gestionar los datos y acceder a los mismos.

Page 24: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

13

El hosting contratado tiene preinstalado MySQL, la cual se utilizó para la administración

de los datos.

Servidor Web

Un servidor web es un programa que atiende y responde a diversas peticiones de los

navegadores y así proporcionar los recursos que se solicitan por el protocolo HTTP.

El funcionamiento de los servidores web es muy sencillo como se explica a continuación:

ü Espera peticiones en el puerto TCP asignado.

ü Recibe una petición por parte del cliente utilizando el protocolo HTTP.

ü Busca el recurso en la cadena de petición y este proporciona la información

solicitada.

ü El cliente lo interpreta mediante pantallas a través de una página web [14].

Para llegar a las organizaciones y estas se puedan proponer proyectos o realizar

convenios con la Unidad de Vinculación social desde cualquier parte, se vio la necesidad

de implementar el sistema en un servidor web.

Symfony

Para el desarrollo del sistema web se vio la necesidad de utilizar el framework Symfony,

por sus características, clases y herramientas que proporciona, además, permite reducir

el tiempo de desarrollo. Symfony está diseñada para mantener organizado nuestro

proyecto, forzando al desarrollador a crear código más legible y más fácil de mantener.

Symfony está desarrollado completamente con PHP y ha sido un framework más utilizado

para la creación de sitios como: Yahoo!, DailyMotion y muchos otros sitios web. Está

basado en el patrón de arquitectura de software MVC (Modelo Vista Controlador) tal como

se indica en la Figura 4 - Modelo Vista Controlador (WikiSalud, 2013), que separa la lógica

y los datos de la interfaz de usuario, permitiendo así el trabajo en paralelo [15].

· Modelo: es la estructura de la base de datos.

· Vista: es el modo que se van a representar los datos.

· Controlador: es la que se encarga de obtener la información de las peticiones

HTTP, de generar y devolver la respuesta HTTP.

Page 25: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

14

Figura 4 - Modelo Vista Controlador (WikiSalud, 2013)

Symfony trabaja de la siguiente forma el cliente realiza las peticiones y estas son

interpretadas por el enrutador y pasadas a las funciones controladoras las cuales regresan

con objetos Respuesta tal como se indica en la Figura 5 - Flujo de aplicación en Symfony

(DISQUS, 2013).

Figura 5 - Flujo de aplicación en Symfony (DISQUS, 2013)

Para el desarrollo del proyecto se utilizó algunas herramientas que proporciona Symfony

como son:

· Doctrine: es un mapeador de objetos encargado de gestionar todo lo que tiene

que ver con el modelo de datos proporcionando una capa de persistencia para

objetos PHP. Cada modelo es una clase y son conocidas como “entidades”.

· Twig: es un gestor de plantillas orientado a la presentación. Es muy potente ya

que permite crear plantillas que heredan de otras.

PHP es un lenguaje de código abierto que trabaja del lado del servidor, adecuado para el

desarrollo web y que puede ser incrustado en HTML [16]. PHP se utiliza para generar

páginas web dinámicas, así permitiendo su uso en nuestro proyecto.

Una de las características importantes es que se trata de un lenguaje multiplataforma, es

decir que la aplicación web puede funcionar en casi cualquier tipo de plataforma sea

Page 26: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

15

Windows y Linux. También ofrece soporte a los motores de base de datos como SQL

Server, MySQL, Oracle, etc.

Composer

Se utilizó los siguientes bundles para la implementación del sistema:

· FOSJsRoutingBundle: Este paquete permite obtener las rutas de Symfony para

poder utilizarlas con JavaScript, lo cual permite general URL relativas o absolutas

en el navegador, utilizando las mismas del back-end.

· Swiftmailer: este paquete permite crear y entregar mensajes de correo electrónico

de manera fácil y eficiente.

· KnpSnappyBundle: Permite generar archivos PDF o imágenes de documentos

HTML. Este bundle permite una integración sencilla en el proyecto.

Por lo que fue necesario utilizar composer para la instalación de estos bundles. Composer

es una herramienta que permite administrar dependencias para php [17].

3. RESULTADOS Y DISCUSIÓN

3.1 Desarrollo del Sprint 1. Elaboración de la página principal y módulo Organización.

Planificación del Sprint 1

Este Sprint tuvo una duración de 10 días, trabajando 3 horas diarias, con un total de 30

horas aproximadamente. El objetivo de este Sprint fue definir la página principal tanto en

diseño como la estructura de la página incluyendo un menú principal con los siguientes

ítems:

- Inicio

- Proceso

- Noticias

- Registro

- Contactos

- Iniciar Sesión.

En cada ítem se desarrolló su respectivo formulario. Una vez definida la página principal,

se procede al desarrollo del módulo de la organización en donde se procedió a desarrollar

las vistas de:

Page 27: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

16

· Solicitud

· Mis Proyectos

· Crear.

Una vez desarrollado el módulo, se configuró el sistema de seguridad de Symfony para la

autenticación de usuarios y el acceso a la aplicación. A continuación, se detalla las tareas

ejecutadas tal como se indica en la Tabla 4 - Tareas del Sprint 1.

Tabla 4 - Tareas del Sprint 1

ID ROL Descripción de la

historia de usuario

Tareas Esfuerzo empleado en horas

HU1 Administrador. Necesito ver una página principal.

Modificar la plantilla de WordPress los estilos como: color, imágenes entre otras cosas.

3

HU2 Administrador. Necesito un menú con 6 ítems.

Crear un Menú con: Inicio, Proceso de Gestión, Noticias, Registro, Contactos, Iniciar Sesión.

6

HU3 Administrador. Necesito mostrar publicidad y proyectos.

Diseñar un formulario con insertar publicidad y proyectos finalizados.

2

HU4 Administrador. Necesito mostrar el reglamento

Crear un formulario con el reglamento de la Unidad.

9

HU5 Administrador. Necesito mostrar noticias.

Crear un formulario para mostrar las noticias.

2

HU6 Administrador. Necesito indicar las instrucciones y registrar las solicitudes

Crear un formulario indicar las instrucciones a seguir y colocar botones para registrar una solicitud.

2

HU7 Organización. Necesito solicitar los servicios de la Unidad de Vinculación.

Crear un controlador para registrar la información de la Organización.

3

Crear vista para el formulario de solicitud.

2

Validar campos del Formulario.

1

Total 30

Page 28: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

17

Tabla 5 - Ejecución del sprint 1 Scrum Diario

Trabajo realizado el día anterior

Trabajo a realizar el día de hoy

Impedimentos

Día 1 Se realizaron algunas configuraciones para preparar el marco de trabajo como: la instalación de xampp para la conexión de base de datos, la generación de Controladores y entidades

Seleccionar una plantilla de WordPress de acuerdo a las indicaciones del Director.

Ninguno.

Día 2 Se selecciona la plantilla, se le modifica los estilos y el diseño.

Modificar el menú con los ítems de Inicio, Proceso, Registro, Noticias, Contactos, Iniciar Sesión.

Ninguno.

Día 3 Se realizó el menú con los ítems indicados por el Director.

En el ítem de Inicio crear página de presentación del sistema.

Ninguno.

Día 4 Se creó el formulario de Inicio del sistema.

En el ítem de Proceso crear menú con el Reglamento de la Unidad de Vinculación.

Ninguno.

Día 5 Se creó el formulario del ítem de Proceso.

Realizar una página de Noticias.

Ninguno.

Día 6 Se realizó una página de Noticias.

Realizar una página con las instrucciones, agregar botones de siguiente y cancelar.

Ninguno.

Día 7 Se realizó página con botones de siguiente y cancelar.

En el botón siguiente direccionar y crear formulario de registro de solicitud.

Ninguno.

Día 8 Se realizó el formulario de registro de Solicitud.

Realizar página de Contacto e Iniciar sesión.

Ninguno.

Día 9 Se integra la página de contacto y el ítem de Iniciar Sesión.

Crear Módulo de Organización.

Ninguno.

Día 10 Se crea módulo de Organización con las vistas de Solicitud, Mis Proyectos y Crear.

Configurar Symfony para la autenticación de Usuarios.

El proceso continúa al siguiente Sprint.

Page 29: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

18

Pruebas Sprint 1

Página Principal

Para la página principal se modifica una plantilla de WordPress, en donde se cambia los

estilos y diseño tal como se indica en la Figura 6 - Página Principal (Narváez & Vivar,

2017) de acuerdo a las especificaciones del director.

Figura 6 - Página Principal (Narváez & Vivar, 2017)

Ítem de Proceso

Se crea página con menú desplegable en donde se visualizará el reglamento de la

Unidad de Vinculación tal como se indica Figura 7 - Reglamento (Narváez & Vivar,

2017).

Page 30: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

19

Figura 7 - Reglamento (Narváez & Vivar, 2017)

Ítem de Noticias

Se crea página en donde registraran los proyectos que están en proceso o proyecto

que se han desarrollado por parte de la Unidad de Vinculación Figura 8 - Noticias

(Narváez & Vivar, 2017).

Figura 8 - Noticias (Narváez & Vivar, 2017)

Ítem de Registro

Se desarrolla el formulario de solicitud en donde la Organización ingresa su respectiva

información en los campos que visualizará al momento de dirigirse al registro tal como

se indica en la Figura 9 - Formulario de Solicitud (Narváez & Vivar, 2017). Los campos

indicados en este formulario son obligatorios por lo que en la siguiente Tabla 6 -

Validación de Campos obligatorios se muestra las validaciones que se realizaron.

Page 31: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

20

Figura 9 - Formulario de Solicitud (Narváez & Vivar, 2017)

Tabla 6 - Validación de Campos obligatorios

Validaciones de los Campos

Campo Validación

Nombre Campo Obligatorio

Dirección Campo Obligatorio

Teléfono de Org. 7 dígitos números/ Campo Obligatorio

Siglas Campo Obligatorio

Persona de Contacto

Nombre Campo Obligatorio

Cargo Campo Obligatorio

Celular 10 dígitos números/ Campo Obligatorio

Email Campo Obligatorio/ Tipo Correo

Tipo de organización Campo Obligatorio

Descripción de la Organización Campo Obligatorio

Descripción del Problema Campo Obligatorio

Page 32: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

21

Módulo de Organización

Se desarrolló el módulo de Organización en donde le permite visualizar las solicitudes

que ha realizado y el estado en que se encuentra, además le permite crear nuevas

solicitudes tal como se indica en la Figura 10 - Solicitudes (Narváez & Vivar, 2017),

Figura 11 - Mis Proyectos (Narváez & Vivar, 2017), Figura 12 - Proyectos por Aprobar

(Narváez & Vivar, 2017), Figura 13 - Proyectos Rechazados (Narváez & Vivar, 2017),

Figura 14 - Crear Nueva Solicitud (Narváez & Vivar, 2017).

Figura 10 - Solicitudes (Narváez & Vivar, 2017)

Figura 11 - Mis Proyectos (Narváez & Vivar, 2017)

Figura 12 - Proyectos por Aprobar (Narváez & Vivar, 2017)

Figura 13 - Proyectos Rechazados (Narváez & Vivar, 2017)

Page 33: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

22

Figura 14 - Crear Nueva Solicitud (Narváez & Vivar, 2017)

Basándose en cada método utilizado en el desarrollo del sistema, se realizó las siguientes

pruebas unitarias tal como se muestra en la Figura 15- Prueba Unitaria Sprint 1,

presentando las pruebas completas en el ANEXO 5.

Figura 15- Prueba Unitaria Sprint 1 (Narváez & Vivar, 2017)

Retroalimentación

Durante el desarrollo del sprint 1, se eligió una plantilla WordPress, en donde se modificó

a las necesidades del cliente, se agregó imágenes, se editó los estilos y colores.

Para el formulario de solicitud se lo realizó en Symfony y se creó la vista con los estilos

Bootstrap.

El proceso continuó sin presentarse inconvenientes por lo que se procede al desarrollo del

sprint 2.

3.2 Desarrollo del Sprint 2. Elaboración del módulo Administrador y de Profesores.

Planificación del Sprint 2

Este Sprint tuvo una duración de 25 días, trabajando 3 horas diarias, con un total de 75

horas aproximadamente. El objetivo de este Sprint fue continuar con el desarrollo de la

Page 34: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

23

aplicación, se empezó con el desarrollo del módulo del Administrador con los formularios

respectivos, que le permita llevar el control de la Unidad de Vinculación. Una vez

desarrollado se configuró el sistema de seguridad de Symfony para la autenticación de

Usuarios y el acceso a la aplicación. Luego se procedió a desarrollar los formularios de:

· Rol de Administrador

· y finalmente se desarrolló el Rol de Profesor.

A continuación, se detalla las tareas en la Tabla 7 - Tareas del Sprint 2.

Tabla 7 - Tareas del Sprint 2

ID ROL Descripción de la

historia de usuario Tareas

Esfuerzo empleado en horas

HU8 Administrador Necesito ver las solicitudes enviadas por la Organización

Crear controlador para visualizar la solicitud.

3

Crear vista para la visualización de cada solicitud enviada por la Organización.

3

HU9 Administrador Necesito aceptar o rechazar cada solicitud

Crear controlador para aceptar o rechazar las solicitudes

3

Crear función para notificar el motivo del rechazo

3

Crear función para asignar el profesor y notificarle del proyecto.

3

Crear botones de aceptar o rechazar.

3

HU10 Administrador Necesito enviar correos

Instalación de Bundle de Email.

3

Crear Controlador para el envío de correos.

3

Configurar el sistema de email de Symfony.

3

Page 35: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

24

HU11 Profesor Necesito visualizar el proyecto asignado e ingresar información completa de la Organización

Crear controlador para la visualización del proyecto.

3

Crear controlador para los formularios.

3

Crear vista para la visualización de cada proyecto.

3

Crear vista de cada formulario a ser llenado por el profesor.

3

HU12 Profesor Necesito editar la información.

Crear controlador para editar la información.

3

Crear funciones para la edición de los formularios.

3

Crear la vista de cada formulario para editar la información

3

HU13 Profesor Necesito eliminar algunos datos

Crear controlador para eliminar

3

Crear función para la eliminación de información.

3

Crear botón para eliminar.

3

HU14 Administrador Necesito registrar Profesores

Crear controlador para ingresar profesor

3

Crear vista para ingresar profesor

3

HU15 Administrador. Necesito acceder a la aplicación utilizando un formulario de autenticación

Configurar el sistema de seguridad de Symfony.

3

Crear formulario para realizar la autenticación

3

Gestionar el control de acceso a través de las rutas.

3

Page 36: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

25

HU16 Organización. Necesito restablecer mi contraseña

Crear un controlador para restablecer la contraseña del usuario

3

Total 75

Tabla 8 - Ejecución del Sprint 2 Scrum Diario

Trabajo realizado el día anterior

Trabajo a realizar el día de hoy

Impedimentos

Día 1

Se realizaron algunas configuraciones para la autenticación del sistema y creación del formulario de login.

Realizar un controlador que permita la autenticación de los usuarios para el ingreso a los diferentes módulos. Generar una vista que contenga el formulario de login.

Ninguno.

Día 2

Se realizó un controlador en donde permita el ingreso de usuario y contraseña para ingresar a su respectivo módulo o rol correspondiente. Se creó la vista en donde se ingresa el usuario y contraseña. .

Crear Módulo de Administrador. Crear Ítem en donde se debe listar las solicitudes de cada Organización.

Ninguno.

Día 3

Se realizó el módulo del Administrador. Se generó el listado de todas las solicitudes enviadas por cada Organización.

Crear controlador para aceptar o rechazar una solicitud. Crear funciones que permitan indicar el motivo de rechazo o la asignación del profesor. Crear los botones para aceptar y rechazar.

Ninguno.

Día 4

Se creó un controlador para aceptar o rechazar una solicitud y se agregaron

Notificar a la Organización el motivo del rechazo y notificar al

Ninguno.

Page 37: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

26

botones de aceptar y rechazar. Se agregó funciones que permitan indicar el motivo del rechazo y de asignar el profesor.

profesor del proyecto que se le asigno.

Día 5

Se instaló el Bundle swiftmailer y se configuro el sistema de correos en Symfony y se creó un controlador para realizar las notificaciones.

Crear controlador para la visualización de los proyectos asignados a los profesores.

Ninguno.

Día 6

Se creó un controlador para la visualización de los proyectos y el desarrollo del módulo de Profesor. Además, se agregó el botón para dirigirse a los formularios.

Crear controlador para el primer formulario donde registra la información el profesor de la organización. Crear la vista del primer formulario y validar sus campos.

Ninguno.

Día 7

Se creó el controlador para guardar la información de la Organización y se genera la vista para ingresar la información hacer guardada. Se validan que los campos sean obligatorios.

Crear controlador para el segundo formulario en donde si posee un beneficiario a la indicada. Agregar botones de omitir la sección y siguiente. Crear vista para ingresar la información del Beneficiario.

Ninguno.

Día 8

Se creó el controlador para el segundo formulario en donde se registra al Beneficiario si es que lo tuviera caso contrario se agregó botones para omitir esta sección. Se crea la vista en caso de que considerara necesario agregar información del beneficiario.

Crear controlador para el tercer formulario. Crear vista para el ingreso de la descripción del proyecto.

Ninguno.

Día 9

Se realizó el controlador para el tercer formulario en donde se registra la descripción del proyecto. Se crea la vista para el ingreso de la información del proyecto.

Crear función JQuery para el control de los objetivos específicos. Crear formulario para el ingreso de los objetivos específicos.

Ninguno.

Page 38: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

27

Día 10

Se implementa función para el ingreso de los objetivos específicos. Se crea el formulario para el ingreso de los objetivos específicos. Se agrega botón que permita agregar el mismo formulario dinámicamente para ingresar más de un objetivo.

Crear función JQuery para el control de los indicadores. Crear formulario para el ingreso de los indicadores.

Ninguno.

Día 11

Se implementa función para el ingreso de los indicadores del proyecto. Se crea el formulario para el ingreso de los indicadores del proyecto. Se agrega botón que permita agregar el mismo formulario dinámicamente para ingresar más de un indicador.

Crear controlador para el cuarto formulario. Crear vista para el ingreso de la pertinencia académica.

Ninguno.

Día 12

Se realizó el controlador para el cuarto formulario en donde se registra la pertinencia académica. Se crea la vista para el ingreso de la pertinencia académica.

Crear función JQuery para el control de la pertinencia académica. Crear formulario para el ingreso de la pertinencia académica.

Ninguno.

Día 13

Se implementa función para el ingreso de la pertinencia académica. Se crea el formulario para el ingreso de los indicadores. Se agrega botón que permita agregar el mismo formulario dinámicamente para ingresar más de un indicador.

Crear controlador para el quinto formulario. Crear vista para el ingreso del cronograma y planificación del proyecto.

Ninguno.

Page 39: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

28

Día 14

Se realizó el controlador para el quinto formulario en donde se registra el cronograma y planificación del proyecto. Se crea el formulario para el ingreso de los resultados esperados. Se valida los campos que sean obligatorios de llenar.

Crear función JQuery para el control de los resultados a obtener.

Ninguno.

Día 15

Se implementa función para el ingreso del cronograma y planificación del proyecto. Se agrega botón que permita agregar el mismo formulario dinámicamente para ingresar más de un resultado.

Crear controlador para el sexto formulario. Crear vista para el ingreso del presupuesto.

Ninguno.

Día 16

Se realizó el controlador para el sexto formulario en donde se registra el presupuesto del proyecto. Se crea el formulario para el ingreso del presupuesto. Se valida los campos que sean obligatorios de llenar.

Crear función JQuery para el ingreso de los ítems y el cálculo del presupuesto.

Ninguno.

Día 17

Se implementa función para el ingreso de los ítems y el cálculo del presupuesto. Se agrega botón que permita agregar diferentes ítems dinámicamente.

Crear vista para la sección 7

Ninguno.

Día 18

Se crea el formulario de la sección 7 en donde aprueban el proyecto los coordinadores y el director.

Presentación del avance del Sistema al director del Proyecto.

Ninguno.

Día 19

Se presenta el avance del Sistema al Ing. Edwin Salvador.

Crear controlador para permitirle al profesor editar la información que registró anteriormente.

Ninguno.

Page 40: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

29

Nos indica algunas opciones que se deben incluir en el proyecto. Las opciones de editar y eliminar. Agregar algunos formularios.

Crear botones que den la opción de editar.

Día 20

Se crea controlador para cada sección que permita editar. Se agrega botones que permitan al usuario dar clic en editar para dirigirse al formulario de edición.

Crear controlador que permita eliminar información en diferentes secciones del proyecto. Crear botón en cada sección que dé la opción de eliminar.

Ninguno.

Día 21

Se crea controlador en diferentes secciones que permita eliminar información cuando el profesor lo vea necesario hacerlo. Se agrega botones que permitan al usuario dar clic en eliminar.

Crear controlador que permitan ingresar profesores y estudiantes. Crear vista para el registro de profesores y estudiantes.

Ninguno.

Día 22

Se crea controlador para el registro de profesores. Se crea controlador para el registro de estudiantes.

Crear controlador para restablecer contraseña. Crear formulario para restablecer la contraseña.

Ninguno.

Día 23

Se crear controlador que permita restablecer la contraseña. Se crea el formulario para volver a obtener la contraseña y a su vez cambiarla.

Crear ítems en el módulo del profesor con las siguientes opciones: Ver archivo PDF. Formularios Archivos de descarga

Ninguno.

Día 24

Se agrega los ítems: Ver archivo PDF. Formularios Archivos de descarga En el módulo del profesor.

Configurar Symfony para generar PDF una vez guarda la información de cada sección.

Ninguno.

Día 25

Se instala y configura el Bundle de KnpSnappyBundle para la generación de PDF.

Crear formularios para generar informes.

El proceso continua al siguiente Sprint.

Page 41: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

30

Pruebas Sprint 2

El usuario al momento de dar clic en el botón “Enviar” este se enviará un correo al

Administrador con los datos que la Organización registró.

Autenticación y Control de Usuario

Para acceder a la aplicación es necesario realizar una autenticación, en la Figura 16 -

Formulario de Autenticación (Narváez & Vivar, 2017) se aprecia el formulario de

autenticación, por lo que la organización debe visualizar en su correo una notificación

enviado por la vinculación con la contraseña temporal para el acceso tal como se indica

en la Figura 17 - Notificación de la clave de acceso (Narváez & Vivar, 2017). Al momento

de ingresar el correo y la contraseña que le envía el sistema, esté le obliga a cambiar la

contraseña tal como se indica en la Figura 18 - Cambio de Contraseña (Narváez & Vivar,

2017) .

Figura 16 - Formulario de Autenticación (Narváez & Vivar, 2017)

Figura 17 - Notificación de la clave de acceso (Narváez & Vivar, 2017)

Page 42: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

31

Los usuarios podrán restablecer la contraseña en caso de ser necesario, enviando un

mensaje al administrador y este le enviará una contraseña temporal.

Figura 18 - Cambio de Contraseña (Narváez & Vivar, 2017)

Rol de Administrador

Se desarrolla el perfil de Administrador en donde se mostrará varios módulos en donde

realizará las siguientes actividades:

· Visualizar las solicitudes enviadas por las Organizaciones.

· Por cada solicitud el administrador tiene la opción de aceptar o rechazar.

· Si la opción es rechazar le mostrará una pantalla donde sebe especificar el motivo

del rechazo tal como se visualiza en la Figura 19 - Perfil del Administrador (Narváez

& Vivar, 2017).

· Si la opción es aceptar, este asignará a un profesor para continuar con el proceso

tal como se visualiza en la Figura 20 - Motivo del rechazo (Narváez & Vivar, 2017)

.

· Los demás módulos le permiten registrar profesores, carreras y materias.

Una vez que registra al profesor, se le notificará a su correo sobre la asignación del

proyecto tal como se indica en la Figura 21 - Asignación del Profesor (Narváez & Vivar,

2017) .

Page 43: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

32

Formulario del Rol de Administrador.

Figura 19 - Perfil del Administrador (Narváez & Vivar, 2017)

Figura 20 - Motivo del rechazo (Narváez & Vivar, 2017)

Page 44: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

33

Figura 21 - Asignación del Profesor (Narváez & Vivar, 2017)

Rol del Profesor

Se desarrolla el perfil en donde visualizará todos los proyectos asignados por el

administrador para continuar con el proceso tal como se indica en la Figura 22 - Módulo

del Profesor (Narváez & Vivar, 2017). Primero se debe contactar con la organización para

continuar llenando los formularios con la información que le proporcione, además,

determinará los objetivos, indicadores, el cronograma para la ejecución del proyecto, un

presupuesto, la asignación del director a cargo de la ejecución del Proyecto y los

estudiantes que colaboraran en el desarrollo del Proyecto.

Figura 22 - Módulo del Profesor (Narváez & Vivar, 2017)

Page 45: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

34

El registro de los demás datos de cada organización se lo realiza por secciones indicadas

a continuación:

Sección 1: Organización colaboradora

En la sección 1, el profesor que fue asignado al proyecto registra la demás información

en los campos que faltan juntamente con el representante de la organización tal como se

indica en la Figura 23 - Sección 1 (Narváez & Vivar, 2017).

Figura 23 - Sección 1 (Narváez & Vivar, 2017)

Se da clic en el botón “guardar” de la sección 1, con lo cual direcciona a la sección 2 tal

como se indica en la Figura 24 - Opción atrás (Narváez & Vivar, 2017).

En esta sección se tiene la opción de botón “atrás”, para editar la sección, de ser

necesario; una vez llenado el formulario se procede a continuar con el proceso tal como

indica la Figura 25 - Formulario de edición (Narváez & Vivar, 2017).

Page 46: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

35

Figura 24 - Opción atrás (Narváez & Vivar, 2017)

Figura 25 - Formulario de edición (Narváez & Vivar, 2017)

Page 47: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

36

Sección 2: Beneficiarios

La sección 2 es el formulario de beneficiarios que tendrá el proyecto tal como se indica en

la Figura 26 - Sección 2 (Narváez & Vivar, 2017), el mismo que permite seleccionar el

beneficiario sea la misma organización o externos.

Figura 26 - Sección 2 (Narváez & Vivar, 2017)

Si la opción elegida es la “Misma Organización” puede continuar con el proceso, caso

contrario si la opción es “Otro” se muestra el siguiente formulario tal como se indica en

Figura 27 - Formulario Beneficiario (Narváez & Vivar, 2017).

Figura 27 - Formulario Beneficiario (Narváez & Vivar, 2017).

Page 48: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

37

Al guardar esta sección se direcciona a la sección 3, la cual consiste en información del

proyecto. También desde el formulario de llenar la información del proyecto, se tiene el

botón de “atrás” tal como se indica la Figura 28 - Opción atrás (Narváez & Vivar, 2017).

Figura 28 - Opción atrás (Narváez & Vivar, 2017)

Sección 3: Descripción del proyecto

Esta sección es de información específicamente del proyecto como se indica en la Figura

29 - Sección 3 (Narváez & Vivar, 2017):

Figura 29 - Sección 3 (Narváez & Vivar, 2017)

Page 49: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

38

En la parte de objetivos específicos e indicadores se puede agregar varios ítems de

acuerdo a las necesidades y guardar todos a la vez tal como se puede ver en la Figura 30

- Objetivo Específico (Narváez & Vivar, 2017)y en la Figura 31 –Indicadores (Narváez &

Vivar, 2017).

Figura 30 - Objetivo Específico (Narváez & Vivar, 2017)

Figura 31 –Indicadores (Narváez & Vivar, 2017)

Page 50: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

39

Para editar la sección 3, la parte de objetivos específicos e indicadores lo puede realizar

esta acción individualmente tal como se indica en la Figura 32 - Editar Objetivo Específico

(Narváez & Vivar, 2017).

Figura 32 - Editar Objetivo Específico (Narváez & Vivar, 2017)

Para la opción de eliminación se debe pasar por el mensaje de confirmación como se

indica en la Figura 33 - Opción de Eliminar (Narváez & Vivar, 2017):

Figura 33 - Opción de Eliminar (Narváez & Vivar, 2017)

Sección 4: Pertinencia Académica

Esta sección permite visualizar el formulario de pertinencia académica seleccionando

cada uno de los siguientes ítems tal como se indica en la Figura 34 - Pertinencia

Académica (Narváez & Vivar, 2017).

Page 51: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

40

Figura 34 - Pertinencia Académica (Narváez & Vivar, 2017)

Esta sección también tiene la opción de creación de más de una pertinencia académica

La parte de editar la Pertinencia Académica también se procede similar a los objetivos

específicos tal como se indica en la Figura 35 - Opciones de Editar y Eliminar (Narváez &

Vivar, 2017) .

Figura 35 - Opciones de Editar y Eliminar (Narváez & Vivar, 2017)

Page 52: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

41

Si el proyecto se encuentra ligado directamente a una asignatura, llenar la siguiente

sección caso contrario se da clic en “omitir esta sección” tal como se indica en la Figura

36 – Asignatura (Narváez & Vivar, 2017).

Figura 36 – Asignatura (Narváez & Vivar, 2017)

Asignación de director y Profesores Colaboradores se lo hace tal como se indica en la

Figura 37 - Asignación de Profesor y Colaborador (Narváez & Vivar, 2017).

Figura 37 - Asignación de Profesor y Colaborador (Narváez & Vivar, 2017)

Page 53: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

42

Si el proyecto tiene colaboradores externos a los profesores llenar la siguiente sección, tal

como se indica en la Figura 38 - Otros colaboradores (Narváez & Vivar, 2017).

Figura 38 - Otros colaboradores (Narváez & Vivar, 2017)

Al hacer clic en “guardar” u “omitir la sección” de colaboradores externos, se direcciona

a la sección 5.

Sección 5: Cronograma y planificación de proyecto

Esta sección es la del cronograma planificada de cómo se realizará el proyecto, cada que

se dé clic en el botón “guardar” en una actividad con sus actividades secundarias, se

visualizarán en la parte inferior con los botones “editar” o “eliminar” cada una de estas,

tal como se indica en la Figura 39 - Sección 5 (Narváez & Vivar, 2017).

Page 54: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

43

Figura 39 - Sección 5 (Narváez & Vivar, 2017)

Una vez completada esta sección se hace clic en “siguiente” para pasar a la sección 6.

Sección 6: Presupuesto

En esta sección se visualizará el formulario para el ingreso de presupuesto y la lista de los

ítems ingresados, además, en la parte inferior tiene los botones de “editar” o “eliminar”

por cada ítem ingresado tal como se indica en la Figura 40 - Sección 6 (Narváez & Vivar,

2017).

Page 55: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

44

Figura 40 - Sección 6 (Narváez & Vivar, 2017)

Al hacer clic en el botón “siguiente” se procede a entrar al formulario final de este

procedimiento lo cual consiste en escribir un pequeño resumen del proyecto a crearse, tal

como se indica en la Figura 41 - Resumen (Narváez & Vivar, 2017).

Figura 41 - Resumen (Narváez & Vivar, 2017)

Se da clic en el botón “guardar” el proyecto se direcciona a la opción de “imprimir” el

archivo PDF.

Page 56: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

45

Dentro del desarrollo de este sprint, se realizo las siguientes pruebas unitarias tal como

se muestra en la Figura 42 - Prueba unitaria Sprint 2, mostrando las pruebas completas

en el ANEXO 5.

Figura 42 - Prueba unitaria Sprint 2 (Narváez & Vivar, 2017)

Retroalimentación

Durante el desarrollo del sprint 2, se efectuó el desarrollo y diseño del módulo del

administrador, se utilizó controladores para dar funcionamiento al sistema.

El proceso continuó sin presentarse inconvenientes por lo que se procede al desarrollo del

sprint 3.

3.3 Desarrollo del Sprint 3. Gestión de Informes

Planificación del Sprint 3

Este Sprint tuvo una duración de 5 días, trabajando 3 horas diarias, con un total de 15

horas aproximadamente. El objetivo de este Sprint fue continuar con el desarrollo de la

aplicación, se empezó desarrollando los formularios de generación de informe a mitad y

final de proyecto, que le permita ingresar el avance del proyecto a la mitad de tiempo de

acuerdo a lo establecido en el cronograma y además otro informe cuando el proyecto esté

finalizado.

Page 57: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

46

Se agregarán archivos que le permita realizar encuestas a la organización y otro archivo

con el informe de actividades del estudiante tal como se indica en la Tabla 9 - Tareas del

sprint 3.

Tabla 9 - Tareas del sprint 3

ID ROL Descripción de la historia de usuario

Tareas Esfuerzo empleado en horas

HU17 Profesor Necesito generar un archivo PDF

Instalación de Bundle de generación PDF.

1

Crear controlador para generar PDF.

1

Crear la vista de toda la información almacenada.

1

HU18 Profesor

Necesito generar reportes a mitad de Proyecto

Crear controlador para la obtención la información.

1

Crear la vista para la generación del reporte.

2

Crear controlador para generar PDF.

1

Crear controlador para la obtención la información.

1

HU19 Profesor

Necesito generar reportes de finalización de Proyecto

Crear controlador para la obtención la información.

1

Crear la vista para la generación del reporte.

2

Crear controlador para generar PDF.

1

Page 58: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

47

HU20 Profesor

Necesito generar

informe de actividades de estudiantes.

Crear controlador para la obtención la información.

1

Crear la vista para la generación del reporte.

1

Crear controlador para generar PDF.

1

Total 15

Tabla 10 - Tareas diarias del sprint 3

Trabajo realizado el día anterior

Trabajo a realizar el día de hoy

Impedimentos

Día 1 Se crea los formularios para la generación de informes.

Realizar un controlador que permita obtener información de la Organización.

Ninguno. Generar una vista que contenga información de la Organización. Crear campos que permitan llenar al profesor el avance del proyecto.

Día 2

Se realizó un controlador en donde permita obtener información de la organización registrada en la base de datos.

Realizar un controlador que permita obtener información de la Organización.

Ninguno. Se creó la vista en donde se visualiza la información de la Organización y además se agregó campos para que el profesor llene.

Generar una vista que contenga información de la Organización. Crear campos que permitan llenar al profesor el informe final de proyecto.

Page 59: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

48

Día 3

Se realizó un controlador en donde permita obtener información de la organización registrada en la base de datos.

Crear controlador para obtener información del Estudiante.

Ninguno. Se creó la vista en donde se visualiza la información de la Organización y además se agregó campos para que el profesor llene el informe final.

Crear vista para la visualización de la información y agregar campos para que el profesor pueda llenar.

Día 4

Se creó un controlador para obtener la información de los estudiantes.

Realizar pruebas de rendimiento del Sistema con Jmeter.

Ninguno. Se creó formulario para la visualización de la información y se agregó campos en donde el profesor ingresará actividades del estudiante.

Día 5

Se realizó pruebas del Sistema con Jmeter con varios escenarios para visualizar su rendimiento.

También es responsable de generar informes a mitad del proyecto y al finalizar el proyecto

que estén a cargo.

Se realizó las siguientes pruebas unitarias tal como se muestra en la Figura 43 - Prueba

Unitaria Sprint 3, mostrando las pruebas completas en el ANEXO 5.

Page 60: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

49

Figura 43 - Prueba Unitaria Sprint 3 (Narváez & Vivar, 2017)

Retroalimentación

Durante el desarrollo del sprint 3, se presentaron inconvenientes para la generación de

PDF ya que se necesita instalar un Bundle, por lo que se busca opciones.

Se busca opciones de paga con el hosting contratado para poder tener acceso a la consola

en donde se ejecuta el comando de instalación.

Page 61: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

50

4. CONCLUSIONES

· La Unidad de Vinculación Social, anteriormente llenaba los formularios a través de

entrevistas con las organizaciones, para lo cual utilizaba a los estudiantes quienes se

encargaban de realizar este trabajo. Por lo tanto, hubo la necesidad de buscar otra

solución para optimizar el trabajo de ingresar la información a una base de datos. El

sistema desarrollado permite optimizar la búsqueda de organizaciones y el tiempo de

llenar los formularios a mano e ingresarlo a la computadora, además permite generar

los archivos que los realizaban manualmente.

· Para el desarrollo y correcta funcionalidad del sistema web fue necesario el correcto

diseño de la base de datos solucionando problemas de almacenamiento para el

manejo de información y la creación de proyectos de la unidad de vinculación social.

· En la actualidad las herramientas de código libre como PHP, Apache, MySQL, el

Framework Symfony, Bootstrap entre otras, permiten el desarrollo de sistemas

eficientes, capaces de cumplir con los estándares internacionales tanto a nivel de

código como a interfaz de usuario, en mínimo tiempo y costo.

· El hosting de almacenamiento de la información junto con el sistema web, poseen un

dominio o URL, el cual facilita el acceso a nivel mundial, sin restricciones, tomando en

cuenta que se encuentra en una entidad exterior a la institución, la misma estará

habilitada por un año, por lo que para su futura utilización será necesario reanudar el

servicio o a su vez alojar en otro lugar. Sin embargo, el análisis de dicha información

será analizada únicamente en la ESFOT.

· Para verificar el correcto funcionamiento y carga del sistema fue necesario el uso de

la herramienta JMeter, la cual permitió probar la estabilidad del mismo al ser usado

por 20 usuarios al mismo tiempo en la ejecución de diferentes actividades sin

inconvenientes.

Page 62: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

51

5. REFERENCIAS BIBLIOGRAFÍAS

[1] RRA CES, «Reglamento,» EPN, Quito, 2013.

[2] R. S. Pressman, Software Engineering, New York: Mc Graw Hill, 2015.

[3] X. Albaladejo, «ProyectosAgiles.org,» 05 2012. [En línea]. Available: https://proyectosagiles.org/que-es-scrum/. [Último acceso: 07 2017].

[4] K. S. y. J. Sutherland, «La Guía de Scrum,» 07 2013. [En línea]. Available: http://www.scrumguides.org/docs/scrumguide/v1/scrum-guide-es.pdf. [Último acceso: 07 2017].

[5] S. Manager, «Historias de usuario,» [En línea]. Available: http://www.scrummanager.net/bok/index.php/Historia_de_usuario. [Último acceso: 25 Junio 2017].

[6] C. V. D. H. John Freddy Vega, «Guia HTML,» 06 2011. [En línea]. Available: http://www.lamolina.edu.pe/osi/manual/Curso_HTML5_v1.pdf. [Último acceso: 08 2017].

[7] «DevCode,» 06 2015. [En línea]. Available: https://devcode.la/blog/que-es-javascript/. [Último acceso: 08 2017].

[8] L. Chuburu, «Tutoriales de diseño web,» 2017. [En línea]. Available: http://www.laurachuburu.com.ar/tutoriales/que-es-jquery-y-como-implementarlo.php. [Último acceso: 08 2017].

[9] J. E. Pérez, «Introducción Ajax,» 2012. [En línea]. Available: http://www.librosweb.es/ajax. [Último acceso: 09 2017].

[10] KINAWEB, «Bootstrap 3 Manual Oficial para Descargar,» 2014. [En línea]. Available: http://www.kinaweb.es/bootstrap-manual-oficial-en-espanol. [Último acceso: 5 Julio 2017].

[11] Wikipedia, «Wikipedia,» 12 2013. [En línea]. Available: https://es.wikipedia.org/wiki/WordPress. [Último acceso: 09 2017].

[12] 2. C. Coporativa, «2D Comunicación Coporativa,» 2017. [En línea]. Available: http://www.dosd.com.ar. [Último acceso: 09 2017].

[13] D. COSTA, «Introducción al diseño de Bases de Datos,» 2014. [En línea]. Available: http://www.uoc.edu/masters/oficiales/img/913.pdf. [Último acceso: 5 Julio 2017].

[14] Techtarget, «Que es Servidor Web,» 2015. [En línea]. Available: http://searchdatacenter.techtarget.com. [Último acceso: 09 2017].

[15] SYMFONY, «Symfony Documentation,» 2016. [En línea]. Available: https://symfony.com/doc/current/index.html. [Último acceso: 26 Mayo 2017].

[16] Aprenderaprogramar, «aprenderaprogramar,» 2010. [En línea]. Available: https://www.aprenderaprogramar.com. [Último acceso: 09 2017].

Page 63: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

52

[17] Styde, «Styde,» 11 2014. [En línea]. Available: https://styde.net. [Último acceso: 09 2017].

[18] J. GAUCHAT, El Gran Libro de HTML5, CSS3 y JavaScript, España: MARCOMBO S.A, 2012.

[19] L. WEB, «Bootstrap,» 2016. [En línea]. Available: http://librosweb.es/libro/bootstrap_3/. [Último acceso: 5 Mayo 2017].

[20] G. Coronel, «Desarrollo Web,» 04 2013. [En línea]. Available: http://desarrollandowebapps.blogspot.com/2013/04/eventos-scrum.html. [Último acceso: 08 2017].

Page 64: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

53

ANEXOS

Page 65: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

54

ANEXO 1

HISTORIAS DE USUARIOS

Page 66: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

55

Ide

nti

fica

do

r

(ID

) d

e l

a

His

tori

a

Ro

lC

ara

cte

ríst

ica

/

Fu

nci

on

ali

da

d

Ra

zón

/

Re

sult

ad

o

me

ro (

#)

de

Esc

en

ari

o

Cri

teri

o d

e

Ace

pta

ció

n (

Tít

ulo

)C

on

tex

toE

ve

nto

Re

sult

ad

o /

Co

mp

ort

am

ien

to e

spe

rad

o

1B

oto

n P

rofe

sor,

con

im

ag

en

e

info

rma

cio

n

imp

ort

an

te.

En

ca

so s

e a

cce

de

ra

a u

na

pa

gin

a

info

rma

tiv

a

esp

eci

fica

me

nte

pa

ra l

os

pro

feso

res.

Cu

an

do

se

de

spli

eg

ue

la p

ág

ina

po

de

mo

s v

er

la s

igu

ien

te

info

rma

ció

n:

• F

orm

ula

rio

s

• N

orm

as l

eg

ale

s

Po

de

r in

form

ar

a l

as

Org

an

iza

cio

ne

s so

bre

el

pro

ceso

qu

e d

eb

en

se

gu

ir

pa

ra i

ng

resa

r u

na

so

lici

tud

.

2B

oto

n E

stu

dia

nte

,

con

im

ag

en

e

info

rma

cio

n

imp

ort

an

te.

En

ca

so s

e a

cce

de

ra

a u

na

pa

gin

a

info

rma

tiv

a

esp

eci

fica

me

nte

pa

ra l

os

est

ud

ian

tes.

Cu

an

do

se

de

spli

eg

ue

la p

ág

ina

po

de

mo

s v

er

la s

igu

ien

te

info

rma

ció

n:

• ¿

Qu

é e

s l

a v

incu

lació

n

con

la

so

cie

da

d?

• ¿

Po

r q

inv

olu

cra

rse

?

• ¿

Qu

ién

pu

ed

e

pa

rtic

ipa

r, y

en

qu

é

role

s?

Po

de

r in

form

ar

a l

os

est

ud

ian

tes

de

l p

roce

so d

el

vin

cula

ció

n s

oci

al.

3B

oto

n E

nti

da

d

Ex

tern

a,

con

ima

ge

n e

info

rma

cio

n

imp

ort

an

te.

En

ca

so s

e a

cce

de

ra

a u

na

pa

gin

a

info

rma

tiv

a

esp

eci

fica

me

nte

pa

ra l

a e

nti

da

d

ex

tern

a.

• R

eq

uis

ito

s p

ara

est

ab

lece

r u

na

re

laci

ón

de

co

lab

ora

ció

n c

on

la

EP

N

• C

om

pro

mis

os d

e l

a

en

tid

ad

ex

tern

a y

de

la

EP

N e

n u

n p

roy

ect

o d

e

vin

cula

ció

n

• E

nv

íe a

qu

í su

ne

cesi

da

d-p

rob

lem

a-

ide

a-p

rop

ue

sta

de

cola

bo

raci

ón

• F

orm

ula

rio

s

• N

orm

as l

eg

ale

s

Po

de

r in

form

ar

a l

as

en

tid

ad

es

ex

tern

as

de

l

pro

ceso

de

l v

incu

laci

ón

soci

al.

En

un

cia

do

de

la

His

tori

aC

rite

rio

s d

e A

cep

taci

ón

HU

1C

om

o u

n

Cli

en

te.

Ne

cesi

to v

er

3

bo

ton

es/

imá

ge

ne

s

gra

nd

es.

Co

n l

a f

ina

lid

ad

de

mo

stra

r

info

rma

cio

n

esp

eci

fica

de

pro

feso

res,

en

ti

da

d e

xte

rna

y

est

ud

ian

tes.

Page 67: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

56

Ide

nti

fica

do

r

(ID

) d

e l

a

His

tori

a

Ro

lC

ara

cte

rísti

ca

/

Fu

ncio

na

lid

ad

Ra

n /

Re

su

lta

do

me

ro (

#)

de

Esce

na

rio

Cri

teri

o d

e

Ace

pta

ció

n (

Tít

ulo

)C

on

tex

toE

ve

nto

Re

su

lta

do

/

Co

mp

ort

am

ien

to e

sp

era

do

1In

str

uccio

ne

sE

n e

ste

ca

so

so

lo s

e

mo

str

ara

la

s

instr

ucccio

ne

s q

ue

el

usu

ari

o d

eb

e l

ee

r

y a

ce

pta

r a

nte

s d

e

lle

na

r la

in

form

ació

n

req

ue

rid

a.

Cu

an

do

el

usu

ari

o h

ag

a

cli

c e

n a

qu

í se

de

sp

leg

ara

la

instr

uccio

ne

s

ne

ce

sa

ria

s y

de

be

ra

ace

pta

rla

s.

Aco

nti

nu

acio

n d

e l

a

ace

pta

cio

n d

e l

as

instr

uccio

ne

s s

e d

esp

leg

ara

los f

orm

ula

rio

s n

ece

sa

rio

s.

2S

eccio

n 1

En

este

ca

s d

esp

ue

s

de

ace

pta

r la

s

instr

uccio

ne

s e

l

usu

ari

o p

od

ra l

len

ar

el

form

ula

rio

o

ca

nce

lar

este

.

Se

de

sp

lie

ga

un

form

ula

rio

de

la

se

ccio

n

un

a b

asa

da

en

la

info

rma

cio

n m

as

rele

va

nte

de

la

en

tid

ad

ex

tern

a.

A c

on

tin

ua

ció

n s

e d

eb

era

lle

na

r la

se

ccio

n 2

.

3S

eccio

n 2

De

sp

ue

s d

e l

len

ar

la

se

ccio

n 1

, se

de

be

lle

na

r se

ccio

n 2

o

reg

resa

r a

la

se

ccio

n

1

Se

de

sp

lie

ga

un

form

ula

rio

de

la

se

ccio

n

un

a b

asa

da

en

la

info

rma

cio

n m

as

rele

va

nte

de

lo

s

be

ne

ficia

rio

s.

A c

on

tin

ua

ció

n s

e d

eb

era

lle

na

r la

se

ccio

n 3

.

4S

eccio

n 3

De

sp

ue

s d

e l

len

ar

la

se

ccio

n 2

, se

de

be

lle

na

r se

ccio

n 3

o

reg

resa

r a

la

se

ccio

n

2.

Se

de

sp

lie

ga

un

form

ula

rio

de

la

se

ccio

n

un

a b

asa

da

en

la

info

rma

cio

n

dir

ecta

me

nte

de

l

pro

ye

cto

a

imp

lem

en

tar.

A c

on

tin

ua

ció

n s

e d

eb

era

lle

na

r la

se

ccio

n 4

, si

es

ne

ce

sa

rio

.

5S

eccio

n 4

De

sp

ue

s d

e l

len

ar

la

se

ccio

n 3

, se

de

be

lle

na

r se

ccio

n 4

o

reg

resa

r a

la

se

ccio

n

3.

Se

de

sp

lie

ga

un

form

ula

rio

dir

ecta

me

nte

de

la

info

rma

ció

n a

ca

de

mic

a,

esto

de

be

se

r ll

en

ad

o

so

lme

nte

de

l d

ire

cto

r

de

l p

roy

ecto

, e

sto

co

rre

sp

on

de

a u

n

pro

feso

r d

e l

a E

PN

.

A c

on

tin

uca

cio

n y

a l

len

ad

o

los f

orm

ula

rio

sa

ldra

un

resu

me

n e

n d

on

de

se

en

ciu

en

tre

lo

ma

s n

ece

sa

rio

de

l la

in

form

ació

n

req

ue

rid

a.

En

un

cia

do

de

la

His

tori

aC

rite

rio

s d

e A

ce

pta

ció

n

HU

11

Co

mo

un

pro

feso

r.

Ne

ce

sit

o l

len

ar

los

form

ula

rio

s p

ara

la

ap

lica

ció

n d

e u

n

pro

ye

cto

de

vin

cu

lació

n s

ocia

l.

Co

n l

a f

ina

lid

ad

de

re

co

lecta

r

info

rma

cio

n d

e

form

a m

as

efi

cie

nte

de

la

org

an

iza

ció

n.

Page 68: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

0

ANEXO 3

MANUAL DE USUARIO

Page 69: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

1

MANUAL DE USUARIO

SISTEMA WEB PARA LA GESTIÓN DE PROYECTOS DE PROYECCIÓN SOCIAL DE LA ESCUELA DE FORMACIÓN DE

TECNÓLOGOS (ESFOT) DE LA ESCUELA POLITÉCNICA NACIONAL

Page 70: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

2

INDICE 1. Acceso a la Página Informativa .................................................................................................. 3

1.1 Estructura de página Informativa ....................................................................................... 3

1.2 Partes de Menú ..................................................................................................................... 3

1.2.1 Inicio ................................................................................................................................ 3

1.2.2 Proceso de Gestión ...................................................................................................... 4

1.2.3 Noticias ........................................................................................................................... 5

1.2.4 Registro .......................................................................................................................... 6

1.2.5 Contáctanos................................................................................................................... 6

1.2.6 Iniciar Sesión. ................................................................................................................ 7

1.3 Administración de página informativa................................................................................ 7

1.3.1 Administración de Post ................................................................................................ 8

1.3.2 Administración de Multimedia ..................................................................................... 9

1.3.3 Administración de Páginas ........................................................................................ 10

1.3.4 Administración de Apariencia ................................................................................... 11

2. Acceso al sistema web .............................................................................................................. 13

2.1 Estructura se aplicación ..................................................................................................... 16

2.2 Editar Perfil .......................................................................................................................... 16

2.3 Perfiles existentes en el Sistema ..................................................................................... 18

2.3.1 Organización ............................................................................................................... 18

2.3.2 Profesor Administrador .............................................................................................. 23

2.3.3 Profesor Colaborador ................................................................................................. 28

Page 71: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

3

1. Acceso a la Página Informativa Para acceder a la página informativa lo hacemos por medio de la dirección web

http://systemtechnologist.com/ , en el navegador de internet.

1.1 Estructura de página Informativa Al realizar esto se direcciona a la página de información de Vinculación Social, se

visualiza un menú que contiene: inicio, proceso de gestión, noticias, registro,

contáctanos y el iniciar sesión.

1.2 Partes de Menú 1.2.1 Inicio

En la pestaño “Inicio” se visualiza un carrusel con imágenes de las noticias más

importantes del departamento de vinculación social.

En la parte inferior esta la sección de proceso, donde se encuentran las entidades que

interviene en proyectos de Vinculación Social.

Page 72: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

4

A continuación, más abajo, se encuentra el proyecto de Reciveci, el cual está ligado a

las entidades que intervienen en el proyecto.

Por último, en el pie de la página, se encuentra un listado de las paginas existentes,

es decir el mismo menú principal, pero en esta ocasión en forma de listado. Y enlaces

a las páginas de las redes sociales, de la Escuela Politécnica Nacional.

1.2.2 Proceso de Gestión

En la pestaña de “Proceso de Gestión” se encuentra el normativo que rige en la

unidad de Vinculación de la Escuela Politécnica Nacional.

Page 73: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

5

Al hacer clic dentro de este “menú” se encuentra el submenú contiene cada uno de

los artículos de normativo.

Por último al realizar clic en una de estas opciones se podrá la descripción del mismo

y en que ámbito aplica.

1.2.3 Noticias

En la pestaña “noticias” se encuentra el último proyecto aprobado o en ejecución de

la unidad de Vinculación.

Page 74: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

6

1.2.4 Registro

En la opción de “registro” observará unas instrucciones para poder gestionar un

proyecto en la unidad de Vinculación.

Al hacer clic en “siguiente” ingresará al sistema web, en la parte de la organización

que serán descritas más adelante.

1.2.5 Contáctanos

En la opción de “Contáctanos” visualizará el mapa de Google de la ubicación y

teléfonos de la Escuela Politécnica Nacional.

Page 75: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

7

1.2.6 Iniciar Sesión.

En esta opción se visualiza un formulario de autentificación, para el ingreso al sistema.

1.3 Administración de página informativa Para administrar la página informativa ingresar al siguiente enlace. En donde se

visualiza un formulario de autentificación, se debe ingresar el usuario y contraseña.

Usuario: systemtechnologi

Contraseña: LFj11hnCzFpjGQ

Page 76: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

8

Al ingresar se encuentra una página con un menú, en donde se visualiza todas las

partes administrativas.

1.3.1 Administración de Post

Los “Post” son secciones dentro de la página, en esta esta sección se encuentra el

instructivo de la unidad de vinculación.

Page 77: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

9

Al hace clic en el título del post se visualiza los detalles del Post y podemos modificar

el contenido de cada uno de estos.

1.3.2 Administración de Multimedia

En esta parte encuentra todas las imágenes que contiene la página informativa, dando

la opción de añadir más imágenes.

Page 78: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

10

Al hacer clic en cada imagen puede ver una pequeña descripción de esta imagen y las

opciones para administrar esta.

1.3.3 Administración de Páginas

Esta sección permite ver todas las páginas existentes, las cuales pueden ser editadas.

Page 79: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

11

Al hacer clic en el nombre de cada página encuentra las opciones de edición.

1.3.4 Administración de Apariencia

En esta sección se encuentra todo acerca del diseño de nuestra página informativa,

como lo es el tema, menú, entre otros.

Page 80: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

12

Customize:

Permite la edición del diseño y contenido de la parte principal de la página informativa.

Menú:

Permite la edición de los menús de la página.

Page 81: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

13

2. Acceso al sistema web

Para acceder al sistema realizar clic en la opción “iniciar sesión”.

Al hacer esto se direcciona a un formulario de autentificación, en donde se ingresa el

usuario y contraseña para acceder al sistema.

Para el usuario se tomó en cuenta el correo ingresado en el registro de la solicitud, o

profesores.

Page 82: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

14

En caso de olvidar la contraseña, debe solicitar una temporal haciendo clic en “Olvide

la Contraseña”

Se direcciona a la página pidiendo su usuario, en este caso es el correo con el cual se

encuentra registrado en el sistema.

Si el usuario no existe se visualiza el siguiente mensaje:

En donde se observa dos opciones volver a ingresar el usuario o iniciar sección.

En el caso de dar clic en “intentar nuevamente”.

Page 83: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

15

Regresa a la página de ingresar de nuevo el correo.

En el caso de que el correo sea correcto se direcciona a la siguiente página:

El cual indica que el usuario existe dentro del sistema, y se envió a su correo una

contraseña temporal, la cual deberá ser cambiada inmediatamente.

Ingreso al Sistema por primera vez, cuando esto ocurre se debe cambiar la contraseña,

debido a que todas las contraseñas generadas por el sistema son temporales. Para

realizar el cambio de contraseña aparece la siguiente página, en donde se debe llenar

la contraseña actual y la nueva contraseña.

Page 84: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

16

Para la contraseña es necesario que tenga una longitud de 6 caracteres y que deben

ser iguales.

Si el cambio de contraseña se realizó correctamente. Se direccionará a la página de

inicio dependiendo del usuario que ingrese al sistema.

2.1 Estructura se aplicación

El sistema está compuesto por cabecera y menú horizontal.

2.2 Editar Perfil

Cada usuario tiene la opción de editar su perfil.

Si es usuario es Profesor puede editar sus datos;

Page 85: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

17

Si el usuario es una organización puede editar los siguientes datos.

Page 86: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

18

2.3 Perfiles existentes en el Sistema

2.3.1 Organización

2.3.1.1 Registro de Organización y Una nueva solicitud de proyecto

Page 87: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

19

Dentro del Organización tenemos 3 módulos principales que son:

· Solicitudes

· Mis Proyectos

· Aprobar Proyectos

· Proyectos Rechazados

· Crear Proyecto

2.3.1.2 Solicitudes

En el módulo de “solicitudes” se visualiza todas las solicitudes creadas por parte de

la organización que aún no tiene respuesta y el nombre de organización

2.3.1.3 Módulo de Mis proyectos

Podrá visualizar todos los proyectos que se encuentren aprobados y podrá encontrar

los detalles de cada Proyecto.

Page 88: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

20

Al hacer clic en el botón de Detalles podemos ver todos los detalles del Proyecto.

2.3.1.4 Aprobar Proyecto

Podrá visualizar todos los proyectos que necesiten la aprobación por parte de la

organización para la creación de los mismos.

Al hacer clic en “detalles”, se visualiza los detalles del proyecto escritos por parte del

profesor.

Page 89: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

21

Page 90: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

22

Al final de los detalles tenemos 2 opciones, la primera es “aprobar”.

La cual nos permite aprobar la solicitud de proyecto elaborado por el profesor.

Mientras en la segunda opción “agregar observación”, permite agregar observaciones

acerca del proyecto para que el profesor pueda corregirlas. Este caso es cuando la

organización no aprueba la solicitud de proyecto.

2.3.1.5 Proyectos Rechazados.

Podrá todas las solicitudes de proyectos rechazados, y el motivo por el cual fue

rechazado.

Page 91: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

23

2.3.1.6 Módulo de Crear Proyecto.

Podrá visualizar un pequeño formulario para el ingreso de nuevas solicitudes por parte

de la organización.

2.3.2 Profesor Administrador

En el rol de administrador encuentra en el menú principal las opciones de:

1. Solicitudes

2. Crear

3. Proyectos

4. Crear Proyecto

Page 92: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

24

2.3.2.1 Solicitudes

En el módulo de “solicitudes” se visualiza todas las solicitudes que todas las

organizaciones hacen a la unidad de vinculación.

En la tabla se encuentra el botón “Detalles”, si realiza clic en este botón donde se direcciona

a la siguiente pantalla:

Page 93: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

25

Al “aceptar” la solicitud se realiza la creación del proyecto y este debe asignarse a un profesor

colaborador para que se encargue de llenar los formulario de creacion de proyecto.

Esta asignacion es notificado al correo de la organización, proporcionado los datos del

profesor encargado de llenar solicitud, y a su vez se notifica al profesor acerca del proyecto,

todo esto se hacer por medio de correo electronicos.

Page 94: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

26

Y si rechaza el proyecto debe confirmar esta acción por el mensaje de confirmación y escribir

el motivo, esto permite que la organización solicitante sea notificada.

Notificación a la organización

2.3.2.2 Crear

Page 95: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

27

En el módulo de “crear” existe el submenú de administradores y profesores, permite

visualizar un formulario para el registro de estos, junto a un listado de profesores o

administradores existentes en el sistema.

En la opción de “Asignatura” se puede crear asignaturas y a su vez visualizar el

listado de estas, con la opción editar y eliminar cada una de estas.

2.3.2.3 Proyectos

En este módulo permite visualizar un submenú el cual cada una de estas pestañas nos

direcciona a la lista de proyectos dependiendo en el estado que se encuentre.

Page 96: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

28

2.3.3 Profesor Colaborador

En este Rol se encuentra las siguientes opciones en el menú principal.

2.3.3.1 Proyectos Borrador

En este módulo el profesor encuentra todos los proyectos asignados para ser llenados

Page 97: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

29

Al hacer clic en “llenar” se direcciona a la visualización de todos los formularios para la

solicitud de aprobación de proyectos.

Sección 1: Organización Colaboradora

Hacer clic en “siguiente” para guardar la sección 1, lo cual direcciona a la sección 2.

Page 98: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

30

En esta sección tenemos la opción del botón “atrás”, para poder editar la sección 1

antes de proceder a acabar el llenado de los formularios.

Page 99: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

31

Sección 2: Beneficiarios

La sección 2 es el formulario de beneficiarios que tiene el proyecto, en la cual se debe elegir

qué tipo de beneficiario tiene el proyecto.

La primera opción “la misma organización”, se debe llenar el número de beneficiarios.

La segunda opción “otro”, se refiere si el proyecto tiene otro tipo de beneficiarios.

El cual se debe llenar el siguiente formulario de beneficiarios.

Page 100: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

32

Al hacer clic en “siguiente” esta sección nos direcciona a la sección 3 la cual consiste en

información del proyecto. También desde este proyecto procedemos a editar la sección

guardar dando clic en “atrás”.

Page 101: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

33

Sección 3: Descripción del proyecto

Esta sección es de información específicamente del proyecto:

Page 102: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

34

En la parte de objetivos específicos e indicadores se puede agregar más de uno y guardar

todos a la vez.

Al hacer clic en “siguiente” podemos ver la sección 4 de pertinencia académica tomando en

cuenta que esta página también nos permite editar la sección 3 al hacer clic en el botón

“atrás”.

Page 103: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

35

Para editar la sección 3 en la parte de objetivos específicos e indicadores lo podemos realizar

esta acción individualmente.

Para la opción de eliminación se debe pasar por el mensaje de confirmación:

Sección 4: Pertinencia Académica

Esta sección nos permite visualizar el formulario de pertinencia académica seleccionando

cada uno de los siguientes ítems

Page 104: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

36

Esta sección también tiene la opción de creación de más de una pertinencia académica

La parte de editar la Pertinencia Académica también se procede similar a los objetivos

específicos.

Page 105: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

37

Si el proyecto se encuentra ligado directamente a una asignatura, llenar la siguiente sección

caso contrario “omitir esta sección”.

Asignación de director y Profesores Colaboradores.

Page 106: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

38

Si el proyecto tiene colaboradores externos a los profesores llenar la siguiente sección.

Al hacer clic en “guardar” u “omitir la sección” de colaboradores externos, nos direccionar

a la sección 5.

Page 107: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

39

Sección 5: Cronograma y planificación del proyecto

Esta sección es la del cronograma planificada de cómo se realizará el proyecto, cada que se

guarda una actividad con sus actividades secundarias se puede visualizar en la parte inferior,

y “editar” o “eliminar” cada una de estas.

Una vez completada esta sección hacer clic en “siguiente” para pasar a la sección 6.

Sección 6: Presupuesto

En esta sección es del formulario para el ingreso de presupuesto y la lista de los ingresados

en la parte inferior para poder “editar” o “eliminar” cada ítem ingresado.

Page 108: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

40

Al hacer clic en “siguiente” se procede a entrar al formulario final de este procedimiento lo

cual consiste en escribir un pequeño resumen del proyecto a crearse.

Al hacer clic en “guardar” el proyecto nos direcciona a imprimir el “archivo PDF” de lo

guardado también se visualizará una ventana abriría una ventado del archivo PDF.

Page 109: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

41

2.3.3.2 Proyectos Organización

En este módulo tenemos la opción de “por aprobar” y “rectificar”, en los cuales muestra la

solicitud de proyectos que la organización revisa, aprueba o rechaza antes que pasen a ser

entregados para la creación de proyectos.

En la opción “por aprobar” se visualiza los proyectos por aprobar por parte de la

organización, en la cual podemos ver los “detalles” de la solicitud de proyecto.

Y en la opción “rectificar” se visualiza todas las solicitudes de proyectos que tienes

observaciones por parte de la organización, y es necesario revisarlas y rectificar.

Page 110: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

42

Al hacer clic en “ver observaciones”, se visualiza las observaciones que hizo la

organización de la solicitud llenada por parte de profesor, en al cual tenemos la opción de

editar dicha solicitud.

2.3.3.3 Proyectos Entregados

En este módulo muestra la lista de proyectos llenado completo sus formularios para la solicitud

de aprobado, en el cuales podemos visualizar las siguientes opciones.

Al hacer clic en el botón de “detalles” visualizamos sección por sección llenada de la solicitud.

Page 111: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

43

La opción “editar” permite editar el proyecto, seleccionando una parte específica o a su vez

todos los formularios ya guardados dependiendo la necesidad.

La opción de “aprobar” permite cambiar el estado del proyecto, pidiendo un mensaje de

confirmación y el código del proyecto.

Page 112: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

44

2.3.3.4 Proyectos Aprobados

En el módulo de “Proyectos Aprobados”, se visualiza un listado de proyectos con

distintas opciones.

Detalles

Esta opción permite visualizar todas las secciones del proyecto llenas.

Page 113: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

45

Agregar Estudiantes

En esta opción direcciona al formulario de registro de estudiantes los cuales pertenecen al

proyecto elegido

Informe de Avance

Esta opción permite la visualización del formulario del informe de avance de cada proyecto, el

cual debe ser llenado dependiendo de los datos de cada proyecto.

Page 114: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

46

Al proceder a “guardar” se visualiza el informe final completo. Y este se podrá ver el archivo

PDF correspondiente.

Informe Final

Esta opción permite visualizar el formulario del informe final, este se llenará una vez que está

cerca a culminar el cumplimiento del proyecto.

Page 115: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

47

47474747474747474747474747474747474747474747474747474747474747474747474747474747474747474747

Page 116: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

48

Al hacer clic en “guardar” podremos visualizar la segunda sección del informe final el ingreso

de la planificación Real, manejando la misma lógica de ingreso del cronograma planificado.

Al “guardar” la sección anterior se visualiza la última sección del informe final.

Page 117: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

49

Por último, guando se completa de llenar el informe final este nos direccionara a la

visualización de detalles del informe fina, dando la opción a acceder al “PDF” del mismo.

Page 118: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

50

2.3.3.5 Proyectos Terminados.

Una vez que se haya concluido lo explicado anteriormente, en el último módulo del rol de

Profesores, se muestra el listado de Proyecto Terminados observando los detalles de cada

Page 119: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

51

uno, generación de certificados de estudiante y por último la visualización de informes del

proyecto.

Certificados de pasantías de Estudiantes

Page 120: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

52

ANEXO 4

PRUEBAS DE RENDIMIENTO

CON JMETER

Page 121: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

53

PRUEBAS DE RENDIMIENTO

La prueba se realizó con las siguientes muestras con las cuales se prueba la aplicación.

Escenarios Número de usuarios conectados

1 5 2 10 3 15 4 20

Las pruebas se realizaron en la aplicación J Meter la que permite realizar pruebas de rendimiento. Se empezó configurando el ambiente de trabajo para proceder a realizar las pruebas insertando la URL de la página.

Además, se debió configurar el navegador para que permitiera capturar las peticiones que se realiza en la página al momento de explorar, por lo cual J Meter posee un servidor para este tipo de pruebas.

Page 122: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

54

Resultados obtenidos

Para los escenarios que se utilizó se pueden ver las estadísticas y el tiempo en que se demora

en responder el HTTP por cada petición que se hace.

Escenario

Usuarios

Media Min Max Desviación

estándar

Porcentaje de error

Rendimiento

1 5 4075 3824 4420 244,85 0,00% 1,07 2 10 1915 889 2964 739,93 0,00% 2,57 3 15 7032 5686 8811 977,44 0,00% 3,68 4 20 8000 4961 9731 1486,95 0,00% 4,95

Claramente se puede visualizar que los tiempos van variando a medida que van aumentando

el número de usuarios. En promedio de 5 usuarios que acceden el tiempo en responder es de

1,07 segundos, en 10 usuarios su tiempo de respuesta es de 2,57 segundos, en 15 usuarios

su tiempo es de 3,68 segundos mientras en 20 usuarios es de 4,95 segundos.

0

5000

10000

15000

20000

25000

1 2 3 4

Tiempo de Respuesta

Min Media Max

Page 123: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

55

ANEXO 5

PRUEBAS UNITARIAS

Page 124: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

56

Sprint 1

La prueba unitaria permite visualizar el perfil de la organización, y si posee solicitudes de proyectos, proyectos rechazados o aprobados o por aprobar. Obteniendo como resultado la información específica de cada usuario con organización.

Sprint 2

Esta prueba visualizar el perfil del administrador, ver las solicitudes que posee para rechazar o confirmar, a su vez ver todos los proyectos y su estado.

Page 125: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

57

Perfil administrador

Page 126: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

58

Perfil de Profesor.

Se visualiza el perfil y proyectos de este profesor.

Page 127: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

59

Prueba de Sprint 3

Las pruebas unitarias son especifica en el almacenamiento de los informes y la obtención de los mismos dependiendo del proyecto.

Page 128: ESCUELA POLITÉCNICA NACIONAL · 2019. 4. 8. · Para el desarrollo del sistema web, se utilizaron herramientas como el framework Symfony, el lenguaje de programación PHP en el Back-End,

60