DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

97
¡Fórjate un mejor Futuro! DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA LA GESTIÓN Y CONTROL DE LA BIBLIOTECA DEL INSTITUTO SUPERIOR TECNOLÓGICO PRIMERO DE MAYOLÍNEA DE INVESTIGACIÓN: ADAPTACIÓN TECNOLÓGICA E INNOVACIÓN SUB-LINEA SISTEMAS DE INFORMACIÓN CARRERA: TECNOLOGÍA EN DESARROLLO DE SOFTWARE AUTOR: JIMÉNEZ JIMÉNEZ RICHARD FERNANDO DIRECTOR: LIC. LUIS JIMÉNEZ FECHA: 13 de agosto de 2021 YANTZAZA - ZAMORA CHINCHIPE ECUADOR 2021 Proyecto de Tesis previo a la obtención del título de Tecnólogo Superior en Desarrollo de Software

Transcript of DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

Page 1: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

¡Fórjate un mejor Futuro!

“DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN

WEB PARA LA GESTIÓN Y CONTROL DE LA BIBLIOTECA DEL

INSTITUTO SUPERIOR TECNOLÓGICO PRIMERO DE MAYO”

LÍNEA DE INVESTIGACIÓN:

ADAPTACIÓN TECNOLÓGICA E INNOVACIÓN

SUB-LINEA

SISTEMAS DE INFORMACIÓN

CARRERA:

TECNOLOGÍA EN DESARROLLO DE SOFTWARE

AUTOR:

JIMÉNEZ JIMÉNEZ RICHARD FERNANDO

DIRECTOR:

LIC. LUIS JIMÉNEZ

FECHA:

13 de agosto de 2021

YANTZAZA - ZAMORA CHINCHIPE – ECUADOR

2021

Proyecto de Tesis previo a la obtención del

título de Tecnólogo Superior en Desarrollo

de Software

Page 2: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

CERTIFICACIÓN

Lic. Luis Antonio Jiménez Avila

DIRECTOR

Certifico haber asesorado, revisado y orientado en todas sus partes, el

desarrollo del Trabajo de grado Titulado: “DESARROLLO E

IMPLEMENTACION DE UNA APLICACIÓN WEB PARA LA GESTION Y

CONTROL DE LA BIBLIOTECA DEL INSTITUTO SUPERIOR

TECNOLOGICO PRIMERO DE MAYO”, el mismo que cumple con los

requisitos, disposiciones y requerimientos emitidos por el Instituto Superior

Tecnológico Primero de Mayo en base a las normas de graduación vigentes,

por lo que, autorizo al postulante continuar con el procedimiento legal según

el cronograma de titulación aprobado y vigente.

Yantzaza, 13 de agosto de 2021

________________________

Lic. Luis Antonio Jiménez Avila

DIRECTOR DE TESIS

II

Page 3: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

MIEMBROS DEL TRIBUNAL

__________________ ________________

ING. YANDRY RAMIREZ ING. NELLY CUEVA

PRESIDENTE SECRETARIA

____________________

ING. DIEGO CHAMBA

VOCAL DEL TRIBUNAL

III

Page 4: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

DECLARACIÓN DE AUTORÍA DE TESIS

Yo, Jiménez Jiménez Richard Fernando, egresado del Instituto Superior

Tecnológico Primero de Mayo, Carrera en Tecnología Superior en Desarrollo

de Software, libre y voluntariamente declaro que la responsabilidad del

contenido de la presente tesis titulada “Desarrollo e Implementación de una

Aplicación Web para la Gestión y Control de la Biblioteca del Instituto Superior

Tecnológico Primero de Mayo.” Me corresponde exclusivamente y la

propiedad intelectual de la misma pertenece al Instituto Superior Tecnológico

Primero de Mayo.

IV

Page 5: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

CESION DE DERECHOS

Yo, Richard Fernando Jiménez Jiménez, con cedula de ciudadanía N.

1950042778, manifiesto mi voluntad de ceder al Instituto Superior Tecnológico

Primero de Mayo los derechos patrimoniales consagrados en la Ley de

Propiedad Intelectual de la Republica del Ecuador, articulo 4,5 y 6, en calidad

de autor del trabajo de grado denominado: “Desarrollo e Implementación de

una Aplicación Web para la Gestión y Control de la Biblioteca del Instituto

Superior Tecnológico Primero de Mayo.”, trabajo de investigación elaborado

para optar por el título de Tecnólogo Superior en Desarrollo de Software en el

Instituto Superior Tecnológico Primero de Mayo, quedando el Instituto

facultado para ejercer plenamente los derechos cedidos anteriormente.

En concordancia suscribo este documento en el momento que hago la entrega

del trabajo final en el formato impreso y digital a la Biblioteca del Instituto

Superior Tecnológico Primero de Mayo.

__________________________________________

Richard Fernando Jiménez Jiménez

CI: 1950042778

V

Page 6: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

DEDICATORIA

Esta tesis se la dedico a Dios quien supo guiarme por el buen camino, darme

fuerza y fortalezas para seguir adelante y no desmayar en los problemas que

se me presentaban.

A mi Madre, María Yolanda quien ha sido mi mayor apoyo y el ejemplo a

seguir, una mujer de carácter fuerte que, con sus consejos, con su esfuerzo y

con ese valor para levantar a su familia supo encaminarme. A mis Abuelitos,

Rosa y Rogelio que siempre han estado ahí cuando los he necesitado.

A mi Familia quienes con sus palabras de aliento no han desmayado

diciéndome que continúe y alcance mi propósito.

“Nunca desistas de tus sueños, sigue las señales”.

Richard Fernando Jiménez

VI

Page 7: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

AGRADECIMIENTO

Quiero agradecer primeramente a Dios por haberme dado la vida y todas las

bendiciones derramadas, por la sabiduría y la perseverancia que deposito en

mi para no desfallecer y llegar hasta este momento tan importante de mi vida.

A mi Madre porque sin su apoyo no hubiese podido cumplir con este objetivo.

A mi Familia, ya que sin ellos no me hubiese sido tan fácil cumplir con este

objetivo.

A la Senescyt quién con su apoyo económico financio mis estudios.

A mi Director y Lector de Tesis por haber impartido sus conocimientos para

la realización de esta tesis con total éxito.

Mil gracias a todos por ser parte de este gran objetivo…

VII

Page 8: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

ÍNDICE DE CONTENIDOS

CERTIFICACIÓN ____________________________________ II

MIEMBROS DEL TRIBUNAL ___________________________III

DECLARACION DE AUTORÍA _________________________ IV

CESIÓN DE DERECHOS ______________________________ V

DEDICATORIA ______________________________________VI

AGRADECIMIENTO _________________________________VII

ÍNDICE DE CONTENIDOS ____________________________VIII

ÍNDICE DE TABLAS __________________________________IX

ÍNDICE DE FIGURAS _________________________________X

I. TÍTULO _____________________________________ 1

II. RESUMEN___________________________________ 2

III. INTRODUCCIÓN ______________________________ 4

IV. REVISIÓN DE LITERATURA ____________________ 6

V. MATERIALES Y MÉTODOS ___________________ 20

VI. RESULTADOS ______________________________ 30

VII. CONCLUCIONES ____________________________ 82

VIII. RECOMENDACIONES ________________________ 83

IX. BIBLIOGRAFÍA _____________________________ 84

Bibliografía ________________________________________ 84

ANEXOS __________________________________________ 86

VIII

Page 9: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

ÍNDICE DE TABLAS

Tabla 1. Lenguajes de Programación _________________________________________ 20

Tabla 2. Base de Datos _____________________________________________________ 21

Tabla 3. Herramientas _____________________________________________________ 21

Tabla 4. Hostings __________________________________________________________ 22

Tabla 5. Costo Recursos ____________________________________________________ 22

Tabla 6. Talento Humano ___________________________________________________ 23

Tabla 7. Detalles de Costos __________________________________________________ 24

Tabla 8. Definiciones y Abreviaturas _________________________________________ 33

Tabla 9. Características del Administrador ____________________________________ 34

Tabla 10. Características de la secretaria ______________________________________ 34

Tabla 11. Características de los usuarios ______________________________________ 34

Tabla 12. Requisitos Funcionales_____________________________________________ 35

Tabla 13. Requisitos no Funcionales __________________________________________ 37

Tabla 14. Casos de Uso General ______________________________________________ 37

Tabla 15. Descripción de caso de uso: Ingresar al Sistema. ____________________ 41

Tabla 16. Descripción de caso de uso: Gestionar Usuarios. ____________________ 45

Tabla 17. Descripción de caso de uso: Gestionar Categorías. __________________ 51

Tabla 18. Descripción de caso de uso: Administrar libros. ______________________ 56

Tabla 19. Descripción de caso de uso: Administrar Pedidos. ___________________ 60

Tabla 20. Descripción de caso de uso: Consultar Información. __________________ 64

Tabla 21. Pruebas Caso de Uso 001. ________________________________________ 70

Tabla 22. Pruebas Caso de Uso 002. ________________________________________ 71

Tabla 23. Pruebas Caso de Uso 003. ________________________________________ 73

Tabla 24. Pruebas Caso de Uso 004. ________________________________________ 73

Tabla 25. Pruebas Caso de Uso 005. ________________________________________ 74

Tabla 26. Pruebas Caso de Uso 006. ________________________________________ 75

IX

Page 10: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

ÍNDICE DE FIGURAS

Figura 1. Funcionamiento de Django. Elaboración Propia ________________________8

Figura 2. Diagrama de casos de uso. ________________________________________ 38

Figura 3. Diagrama de clases _______________________________________________ 39

Figura 4. Ingreso al sistema – vista del administrador. Elaboración Propia _______ 40

Figura 5. Ingreso al sistema – vista del usuario. Elaboración Propia _____________ 41

Figura 6. Ingreso al sistema – curso normal. Elaboración Propia ________________ 43

Figura 7. Ingreso al sistema – curso alterno. Elaboración Propia ________________ 43

Figura 8. Ingreso al sistema – curso normal de eventos. Elaboración Propia _____ 44

Figura 9. Ingreso al sistema – curso alterno de ventos. Elaboración Propia ______ 44

Figura 10. Gestionar usuarios. Elaboración Propia ____________________________ 45

Figura 11. Gestionar usuarios – Curso Normal. Elaboración Propia _____________ 48

Figura 12. Gestionar usuarios – Curso Alterno. Elaboración Propia ______________ 49

Figura 13. Gestionar usuarios – Curso Normal de Eventos. Elaboración Propia ___ 50

Figura 14. Gestionar usuarios – Curso Alterno de Eventos. Elaboración Propia ___ 50

Figura 15. Gestionar Categorías. Elaboración Propia __________________________ 51

Figura 16. Gestionar Categorías. – Curso Normal. Elaboración Propia ___________ 53

Figura 17. Gestionar Categorías – Curso Alterno. Elaboración Propia ___________ 54

Figura 18. Gestionar Categorías – Curso Normal de Eventos. Elaboración Propia 54

Figura 19. Gestionar Categorías – Curso Alterno de Eventos. Elaboración Propia _ 55

Figura 20. Gestionar Libros. Elaboración Propia ______________________________ 55

Figura 21. Gestionar Libros – Curso Normal. Elaboración Propia ________________ 58

Figura 22. Gestionar Libros – Curso Alterno. Elaboración Propia ________________ 59

Figura 23. Gestionar Libros – Curso Normal. Elaboración Propia ________________ 59

Figura 24. Gestionar Libros – Curso Alterno. Elaboración Propia ________________ 60

Figura 25. Gestionar Pedido. Elaboración Propia ______________________________ 60

Figura 26. Gestionar Pedido – Curso Normal. Elaboración Propia _______________ 62

Figura 27. Gestionar Pedido – Curso Alterno. Elaboración Propia _______________ 63

Figura 28. Gestionar Pedido – Curso Normal. Elaboración Propia _______________ 63

Figura 29. Gestionar Pedido – Curso Alterno. Elaboración Propia _______________ 64

Figura 30. Consultar Información. Elaboración Propia _________________________ 64

Figura 31. Consultar Información – Curso Normal. Elaboración Propia ___________ 66

Figura 32. Consultar Información – Curso Alterno. Elaboración Propia ___________ 67

Page 11: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

Figura 33. Consultar Información – Curso Normal de Eventos. Elaboración Propia 67

Figura 34. Consultar Información – Curso Alterno de Eventos. Elaboración Propia 68

Figura 35. Validación de Inicio de sesión desde el backend, si el usuario esta

registrado el sistema crea un token para que este pueda hacer todas las peticiones

que el sistema brinda caso contrario no le permite ingresar. Elaboración Propia _ 69

Figura 36. Validación Inicio de sesión desde el frontend, este se encarga de

solicitarle al backend que valide los datos ingresados si son correctos le devuelve el

token y toda la información del usuario caso contrario no le permite el ingreso.

Elaboración Propia _______________________________________________________ 70

Figura 37. Autenticación en el sistema web. Elaboración Propia ________________ 77

Figura 38. Página principal del sitio web. Elaboración Propia ___________________ 78

Figura 39. Pagina donde se muestran todos los libros. Elaboración Propia _______ 78

Figura 40. Pagina encargada de mostrar el perfil y los perfiles del usuario.

Elaboración Propia _______________________________________________________ 79

Figura 41. Inicio de sesión para el panel de administración. Elaboración Propia __ 79

Figura 42. Modulo Usuarios. Elaboración Propia ______________________________ 80

Figura 43. Modulo Categorias. Elaboración Propia ____________________________ 80

Figura 44. Modulo Libros. Elaboración Propia _________________________________ 81

Figura 45. Modulo Pedidos. Elaboración Propia _______________________________ 81

XI

Page 12: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

1

1. TITULO

Desarrollo e implementación de una aplicación web para la gestión y

control de la biblioteca del Instituto Superior Tecnológico Primero de Mayo.

Page 13: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

2

2. RESUMEN

En el presente proyecto de titulación se muestra el proceso de creación de

un sistema web, para la gestión y administración de libros de la biblioteca

del Instituto Superior Tecnológico Primero de Mayo, mediante la creación

de este sistema los estudiantes de la Institución podrán solicitar cualquier

libro que se encuentre en físico en la Institución, brindando comodidad

tanto a la parte administrativa como a la parte del estudiantado, de la

misma forma el sistema se utilizara en Pc-Escritorio, Laptop o portátiles y

dispositivos móviles.

El sistema web le permite al usuario hacer los procesos de: solicitar uno o

varios libros, revisar su historial de pedidos o solicitudes, revisar su perfil,

reportar algún problema con el sistema, visualizar toda la biblioteca de

libros, verificar si el libro que desea esta vigente. De esta manera el

sistema le permite al usuario trabajar de forma rápida administrándole el

flujo de información que se origina a la hora de realizar las actividades.

Este sistema se diseñó tomando en cuenta la necesidad de los usuarios

permitiéndoles así iniciar sesión y realizar los procesos que les

corresponden.

Usando la metodología de desarrollo XP (eXtreme Programming) se pudo

conocer la problemática a través de un análisis previo con la ayuda de los

métodos deductivo, inductivo y analítico, así como de técnicas de

recolección de información como lo fue la entrevista. En la fase de

exploración se conoció los requerimientos de cada uno de los actores, en

la fase de planificación se diseñaron los casos de uso junto con la

especificación de cada uno, de igual forma en la fase de interacción se

continuo con el diseño de diagramas UML restantes, lo cual permitió hacer

un buen trabajo para la codificación y a la hora de la fase de puesta en

producción o implementación, logrando así cumplir cada uno de los

requerimientos y objetivos planteados.

El funcionamiento de la aplicación es óptima y segura además de ello al

final del documento se exponen las conclusiones y recomendaciones.

Page 14: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

3

Palabras Clave: UML, web, eXtreme Programming, PC, laptop, XP.

2.1 ABSTRACT

In this degree project the process of creating a web system is shown, for the

management and administration of books in the library of the Instituto Superior

Tecnológico Primero de Mayo, through the creation of this system the students

of the Institution may request any of the many books that are in physical form

in the Institution, providing convenience both to the administrative part and to

the part of the student body, in the same way the system is used in PC-Desk,

Laptop or laptops and mobile devices.

The web system allows the user to do the processes of: requesting one or

more books, reviewing their order or request history, reviewing their profile,

reporting any problem with the system, viewing the entire library of books,

checking if the book they want is in force. In this way, the system allows the

user to work quickly by managing the flow of information that originates when

carrying out activities. This system was designed taking into account the needs

of users, thus allowing them to log in and carry out the processes that

correspond to them.

Using the XP development methodology (eXtreme Programming) it was

possible to know the problem through a previous analysis with the help of

deductive, inductive and analytical methods, as well as information gathering

techniques such as the interview. In the exploration phase, the requirements

of each of the actors were known, in the planning phase the use cases were

designed together with the specification of each one, in the same way in the

interaction phase, the design of diagrams was continued. Remaining UML,

which will be necessary to do a good job for the coding and at the time of the

production or implementation phase, thus meeting each of the requirements

and objectives set.

The operation of the application is optimal and safe, and the conclusions and

recommendations are presented at the end of the document.

Keywords: UML, web, eXtreme Programming, PC, laptop, XP.

Page 15: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

4

3. INTRODUCCION

En estos tiempos en donde la tecnología ha evolucionado hasta el punto de

automatizar la mayoría de procesos manuales a través de sistemas web o

sistemas de escritorio, es importante tener claro el concepto de BIBLIOTECA

VIRTUAL.

Muchos son los conceptos emitidos y muchos los proyectos realizados entre

los cuales encontramos bibliotecas virtuales tales como Cervantes.com que

provee a los usuarios de la Web una gran cantidad de importantes obras

literarias con la facilidad de leerlas. Otros proyectos son las bibliotecas de

Universidades, muchas de las cuales solo pueden ser utilizadas por sus

estudiantes, a través de la validación de usuario y contraseña.

Muchos de estos conceptos no incluyen la posibilidad de realizar un pedido o

solicitud para adquirir prestado cualquier ejemplar en físico, poniendo un

tiempo determinado por la institución para su devolución.

Es precisamente uno d ellos objetivos de este proyecto, facilitar a los

estudiantes del Instituto Superior Tecnológico Primero de Mayo una

herramienta que les permita visualizar y solicitar el pedido de cualquiera de

los libros que estén habilitados en el sistema.

Nuestro esquema supone que una biblioteca Virtual, esta constituida por un

conjunto de módulos que facilitan la búsqueda y administración de libros o

documentos que se registren en el sistema, que serán de uso exclusivo para

los estudiantes, los cuales necesitaran hacer uso de un nombre de usuario y

una contraseña activos.

Teniendo en cuenta que este trabajo forma parte de la institución, que tiene

como objetivo fomentar la investigación por parte de los estudiantes. De este

modo, este trabajo le presenta al estudiante la posibilidad, así como la

facilidad de observar todos los ejemplares de la institución y optar a hacer el

pedido de uno si así lo requiere el mismo.

Page 16: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

5

Este trabajo le servirá de guía a todo aquel que desee saber como funciona

la Biblioteca Virtual, como realizar consultas en esta, y como realizar la debida

solicitud a la biblioteca física.

Page 17: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

6

4. REVISION DE LITERATURA

4.1 Desarrollo Especifico de la Contribución

4.1.1 Marco Teórico

El concepto de Biblioteca Virtual no es algo nuevo. Vannevar Bush, ingeniero

electricista norteamericano que en 1939 fue nombrado director del NACA y

más tarde en 1941 director de Investigación Científica, desempeñó un

importante papel en las investigaciones que dieron como resultado el

movimiento de ideas que hicieron nacer la cibernética. Entre los avances

tecnológicos que predijo se encuentra el proyecto Memex, el cual hacía

posible el intercambio de información entre los científicos y que estos tuvieran

acceso total a toda la información registrada.

El término Biblioteca Virtual es usado para referirse a un sistema de funciones

cuya función es extender la funcionalidad de una biblioteca convencional, por

ejemplo, colocando al alcance de sus usuarios toda su colección en forma

electrónica. Una definición más precisa, es cualquier aplicación o sistema de

aplicaciones dirigido a proveer acceso y servicio a volúmenes grandes de

información, la cual debe estar en forma organizada y digitalizada.

Una biblioteca digital ofrece una gran ventaja a quienes deben manejar gran

cantidad de volúmenes, ya que permite que el lector acceda mediante una

pantalla, a lo que busca o busca, sin necesidad de deteriorar el material

original, pudiendo, si lo desea imprimir el texto que necesita. La biblioteca en

línea, ubicada en Internet, la gran telaraña, tiene la ventaja adicional, con

respecto a la biblioteca tradicional (ya sea con texto en papel o digitalizado)

de ofrecer la información, almacenada en muchos lugares intangibles, a la

mayor cantidad posible de lectores. Y, además, es accesible con un

equipamiento mínimo: una computadora, un módem, una línea telefónica, luz

eléctrica y un acceso a correo electrónico o (completo) a Internet. Internet abre

todo su potencial para que la interconexión entre diferentes puntos, sirva para

alcanzar ese material que de otra manera sería casi inaccesible.

Hay muchas formas en las que se puede organizar una Biblioteca Digital, pero

entre todas las diferencias y particularidades hay unas características

Page 18: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

7

generales que tienen todas en común. Las Bibliotecas Digitales usualmente

poseen grandes volúmenes de información de alta calidad. El material es

catalogado y se asegura de que su origen, fecha y otras descripciones

externas sean muy precisas. Muchas de las Bibliotecas Virtuales se

preocupan por proveer acceso digital a material existente dentro de

colecciones de bibliotecas tradicionales, y se concentra en material que fue

originalmente hecho para medios análogos: bibliotecas de imágenes o texto

escaneado, segmentos de vídeos y audiovisuales digitalizados. Otros

proyectos extienden la biblioteca a un conjunto de datos científicos, bibliotecas

de software o trabajo en multimedia. La gran parte de trabajos en esta área

se concentran en proveer contenidos o métodos de acceso mejorados, de tal

manera que se satisfaga las necesidades de información de un individuo en

particular, por ejemplo, un estudiante de química buscando información para

un proyecto, un estudiante de secundaria bajando multimedia sobre química.

4.1.1 Herramientas

4.1.1.1 Django

Según, (Gitter, 2015), Django es un framework de aplicaciones web gratuito y

de código abierto (open source) escrito en Python. Un framework web es un

conjunto de componentes que te ayudan a desarrollar sitios web más fácil y

rápidamente.

Django es un framework web de alto nivel que fomenta el desarrollo rápido y

el diseño limpio y pragmático.

Cuando construyes un sitio web, siempre necesitas un conjunto de

componentes similares: una manera de manejar la autenticación de usuarios

(registrarse, iniciar sesión, cerrar sesión), un panel de administración para tu

sitio web, formularios, una forma de subir archivos, etc.

Por suerte para nosotros, hace tiempo que otros desarrolladores se dieron

cuenta de que siempre se enfrentaban a los mismos problemas cuando

construían sitios web, y por eso se unieron y crearon frameworks (Django es

uno de ellos) con componentes listos para usarse.

Page 19: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

8

Los frameworks sirven para que no tengamos que reinventar la rueda cada

vez y que podamos avanzar más rápido al construir un nuevo sitio.

Para entender para qué sirve realmente Django, necesitamos fijarnos en cómo

funcionan los servidores. Lo primero es que el servidor necesita enterarse de

que tú quieres que te sirva una página web.

Imagina un buzón (puerto) en el que alguien está constantemente mirando si

hay cartas entrantes (peticiones). Esto es lo que hace un servidor web. El

servidor web lee la carta, y envía una respuesta con la página web. Pero para

enviar algo, tenemos que tener algún contenido. Y Django nos ayuda a crear

ese contenido.

Figura 1. Funcionamiento de Django. Elaboración Propia

4.1.1.2 Python

Para (Aula21, 2020), en términos técnicos, Python es un lenguaje de

programación de alto nivel, orientado a objetos, con una semántica dinámica

integrada, principalmente para el desarrollo web y de aplicaciones

informáticas.

Es muy atractivo en el campo del Desarrollo Rápido de Aplicaciones (RAD)

porque ofrece tipificación dinámica y opciones de encuadernación dinámicas.

Python es relativamente simple, por lo que es fácil de aprender, ya que

requiere una sintaxis única que se centra en la legibilidad. Los desarrolladores

Page 20: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

9

pueden leer y traducir el código Python mucho más fácilmente que otros

lenguajes.

Por tanto, esto reduce el costo de mantenimiento y de desarrollo del programa

porque permite que los equipos trabajen en colaboración sin barreras

significativas de lenguaje y experimentación.

Además, soporta el uso de módulos y paquetes, lo que significa que los

programas pueden ser diseñados en un estilo modular y el código puede ser

reutilizado en varios proyectos. Una vez se ha desarrollado un módulo o

paquete, se puede escalar para su uso en otros proyectos, y es fácil de

importar o exportar.

Por otro lado, uno de los beneficios más importantes de Python es que tanto

la librería estándar como el intérprete están disponibles gratuitamente, tanto

en forma binaria como en forma de fuente.

Tampoco hay exclusividad, ya que Python y todas las herramientas

necesarias están disponibles en todas las plataformas principales. Por lo

tanto, es una opción multiplataforma, bastante tentadora para los

desarrolladores que no quieren preocuparse por pagar altos costos de

desarrollo.

En definitiva, es un lenguaje de programación relativamente fácil de aprender,

y las herramientas necesarias están disponibles para todos de forma gratuita.

Esto hace que sea accesible para casi todo el mundo. Si dispones de tiempo

para aprender, conseguirás crear esos proyectos que tienes en mente.

Python fue creado por el informático Guido van Rossum, quien había estado

trabajando con un lenguaje llamado ABC en su anterior trabajo en el Centrum

Wiskunde & Informática (CWI) – Instituto Nacional de Investigación en

Matemáticas e Informática en los Países Bajos-. Aunque le gustaban algunos

aspectos de ABC, estaba frustrado por lo difícil que era difundir este lenguaje.

Python es un lenguaje de programación de propósito general, que es otra

forma de decir que puede ser usado para casi todo. Lo más importante es que

se trata de un lenguaje interpretado, lo que significa que el código escrito no

Page 21: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

10

se traduce realmente a un formato legible por el ordenador en tiempo de

ejecución.

Este tipo de lenguaje también se conoce como «lenguaje de scripting» porque

inicialmente fue pensado para ser usado en proyectos sencillos.

El concepto de «lenguaje de scripting» ha cambiado considerablemente

desde su creación, porque ahora se utiliza Python para programar grandes

aplicaciones de estilo comercial, en lugar de sólo las simples aplicaciones

comunes.

Una encuesta realizada en 2019 entre los usuarios de Python indicó que los

usos más populares eran para el desarrollo web y el análisis de datos. Sólo

alrededor del 6 % de los encuestados lo utilizaron para el desarrollo de juegos

o el desarrollo de aplicaciones.

Esta dependencia de Python ha crecido aún más a medida que Internet se ha

hecho más popular. Una gran mayoría de las aplicaciones y plataformas web

dependen de su lenguaje, incluido el motor de búsqueda de Google, YouTube,

y el sistema de transacciones orientado a la web de la Bolsa de Nueva York

(NYSE).

El lenguaje de programación Python utiliza módulos de código que son

intercambiables en lugar de una larga lista de instrucciones que era estándar

para los lenguajes de programación funcional.

La implementación estándar de Python se llama «cpython«. En definitiva, no

convierte su código en lenguaje de máquina o código máquina, algo que el

hardware puede entender.

4.1.1.3 HTML

Según, (LEADSFAC, 2020), HTML fue desarrollado por Ian Hickson de

Google Inc y Dave Hyatt de Apple Inc, esto junto con un equipo de personas

que participan en la Web Hypertext Application Technology Working Group.

La quinta revisión del lenguaje básico de la World Wide Web (www), es un

lenguaje markup, que es más que una herramienta que se usa para

Page 22: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

11

estructurar y presentar el contenido en las diferentes páginas webs. Se

considera uno de los principales aspectos en el funcionamiento de una web,

pero no es el más importante. La versión estándar de esta revisión se realizó

en 1990.

El nuevo HTML5 tiene relación con el HTML4, sin embargo, con HTML5 las

posibilidades para explotar las webs usando menos recursos son mayores.

Con esta nueva revisión también entra es desuso el formato XHTML. Se

espera que esta nueva generación de HTML domine pronto el desarrollo en

Internet.

Permite una mayor interacción entre las páginas web y el contenido

multimedia, lo que quiere decir con vídeos, audios, fotos, entre otros. Así como

también facilita el proceso de codificar el diseño básico de la web.

Es un sistema que deja formatear el layout de una página web, y permite hacer

ajustes al aspecto. Los navegadores de internet como Chrome o Firefox

pueden saber cómo deben mostrar la web con todos sus elementos. Por eso

el HTML5 no tiene grandes cambios al lado de su predecesor, pero se eleva

en sofisticación.

Se diseñó para utilizarse en todos los desarrolladores de Open Web, es una

página que tiene diversos recursos sobre la tecnología de HTML5 y, se

clasifica en distintos grupos de acuerdo a su función:

• Semántica: Que permite describir con mejor precisión el contenido de

la web.

• Conectividad: Deja al usuario comunicarse con el servidor de una

manera más innovadora.

• Sin conexión y almacenamiento: Les da la oportunidad a las páginas

web de almacenar datos locales y lograr operar sin conexión de una

forma más eficiente.

• Multimedia: Permite un soporte para utilizar el audio y video nativo.

Page 23: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

12

• Gráficos y efectos 2D y 3D: Ofrece una amplia gama de nuevas

características que manejan los gráficos de la página como Canvas 2D,

WebGL, entre otros.

• Rendimiento e Integración: Permite una mejor optimización de la

velocidad y usar el hardware de mejor manera.

• Acceso al dispositivo: Permite el uso de APIs con diferentes

componentes internos de entrada y salida en los dispositivos.

• CSS3: Ofrece una mejor y más amplia variedad de diseños

sofisticados.

Esta nueva versión se basó en un diseño común para las páginas web del

todo el mundo, para así llegar a un estándar de etiquetas, estas mismas

realizarán las tareas de una forma eficiente y en poco tiempo

La idea detrás de HTML5 es que podamos visualizar el contenido multimedia

variado que podemos encontrar en Internet aún cuando nos encontramos en

dispositivos de gama baja que no podrían soportarlo cuando tienen que

instalar infinidad de plug-ins. No solamente contamos con etiquetas

especiales como audio, video y canvas, sino también integración con

contenidos de gráficos en vectores (que anteriormente se conocía como la

etiqueta object. Con estas etiquetas, los usuarios pueden consumir videos y

canciones, por ejemplo, sin necesidad de instalar nada de forma adicional.

4.1.1.4 CSS

Para (Santos, 2021), el diseño de una página web, y de todo un sitio, necesita

un lenguaje en común para que los navegadores puedan interpretarlo y

mostrarlo a las personas de la forma correcta. Pero también para que otros

diseñadores hagan las modificaciones necesarias para su optimización.

Uno de estos lenguajes es el CSS, un gran aliado del HTML que transforma

la experiencia de los usuarios en la adecuada.

Page 24: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

13

CSS son las siglas en inglés para «hojas de estilo en cascada» (cascading

style sheets). Básicamente, es un lenguaje que maneja el diseño y

presentación de las páginas web, es decir, cómo lucen cuando un visitante las

visita. Funciona junto al lenguaje HTML, que se encarga del contenido básico

de las páginas.

Se les denomina hojas de estilo «en cascada» porque puedes tener varias

hojas y una de ellas con las propiedades heredadas (o «en cascada») de

otras.

Para muchas personas una simple plantilla de blog es suficiente. Sin embargo,

cuando quieras personalizar la apariencia de un sitio necesitarás implementar

CSS que en conjunto con un buen CMS te ayudará a potenciar el alcance de

tu contenido.

Con CSS puedes crear reglas para decirle a tu sitio web cómo quieres mostrar

la información y puedes guardar los comandos para elementos de estilo (como

fuentes, colores, tamaños, etc.) separados de los que configuran el contenido.

4.1.1.5 JavaScript

Según, (Ramos, 2020), la historia de JavaScript empieza a comienzos de los

90, cuando los usuarios llegan a Internet y acceden a la Web gracias a los

navegadores. Las conexiones entre los usuarios y las webs se hace a través

de líneas muy lentas. Cuando el usuario quiere enviar información al servidor,

si es incorrecta, tarda un tiempo en saberlo…y pierde la información.

Los programadores tratan de conseguir validaciones en el navegador y así

tener siempre envíos positivos y minimizar la pérdida de información. Esto fue

una de las primeras motivaciones para crear JS, validar los formularios.

El programador Brendan Eich comienza a colocar tareas del servidor en el

navegador en una nueva versión de Netscape Navigator 2.0 (del año 95). Esta

tarea cada vez fue más ambiciosa, y recibió el nombre de LiveScript. Cuando

posteriormente Sun Microsystems compró Nestcape, le puso el nombre de

Page 25: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

14

JavaScript, muy parecido al nombre del lenguaje del lado del servidor (Java)

que no tiene absolutamente nada que ver.

La relación entre JavaScript y Java es puramente comercial, no hay relación

a nivel de programación, no tienen nada que ver. Simplemente, la confusión

surge por la compra de los creadores de Java del navegador Nestcape.

JavaScript es el lenguaje de programación encargado de dotar de mayor

interactividad y dinamismo a las páginas web. Cuando JavaScript se ejecuta

en el navegador, no necesita de un compilador. El navegador lee directamente

el código, sin necesidad de terceros. Por tanto, se le reconoce como uno de

los tres lenguajes nativos de la web junto a HTML (contenido y su estructura)

y a CSS (diseño del contenido y su estructura).

No conviene confundir JavaScript con Java, que es un lenguaje de

programación muy diferente. La confusión proviene del nombre, registrado por

la misma empresa creadora de Java (Sun Microsystems). JavaScript (JS) se

creó posteriormente, y la empresa norteamericana lo que hizo simplemente

fue cambiar el nombre que le habían puesto sus creadores al comprar el

proyecto (LiveScript). El lenguaje de programación Java está orientado a

muchas más cosas que la web desde sus inicios.

Con este lenguaje de programación del lado del cliente (no en el servidor)

podemos crear efectos y animaciones sin ninguna interacción, o respondiendo

a eventos causados por el propio usuario tales como botones pulsados y

modificaciones del DOM (document object model). Por tanto, nada tiene que

ver con el lenguaje de programación Java, ya que su principal función es

ayudar a crear páginas webs dinámicas.

El código de programación de JavaScript se ejecuta en los navegadores, ya

sean de escritorio o móviles, ya sean Android o Iphone. Sirve para

exactamente lo mismo, da igual en el tipo de dispositivo que se ejecute el

navegador.

JavaScript es capaz de detectar errores en formularios, de crear bonitos

sliders que se adapten a cualquier pantalla, de hacer cálculos matemáticos de

forma eficiente, de modificar elementos de una página web de forma sencilla.

Page 26: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

15

Pero también JS es el encargado de que existan herramientas como Google

Analytics, Google Tag Manager, Facebook Pixel y tantas otras, que son claros

ejemplos de JavaScript.

Existe una tecnología llamada AJAX que permite intercambiar información con

el servidor sin tener que recargar la página. Es decir, sólo cargamos de la

página lo necesario. Esta tecnología desarrollada en JavaScript ha supuesto

uno de los principales avances en el desarrollo web. Aunque no la sepamos

reconocer, es la encargada de que podamos conseguir más mensajes, tweets,

emails…sólo pulsando un botón, sin tener que recargar la página.

JavaScript ahora mismo es el lenguaje más popular. De hecho, desde hace

años se ha creado una versión que es capaz de ser ejecutada también en el

lado del servidor (Node JS). Por tanto, ahora mismo se ejecuta JavaScript en

los navegadores y en los servidores, creando a su alrededor una amplísima

comunidad de desarrolladores casi full-stack. JavaScript del lado del servidor

compite en igualdad de condiciones con PHP, por ejemplo.

La librería de JavaScript más utilizada en la historia, y que todavía se sigue

utilizando es jQuery. Con jQuery podíamos hacer más cosas, escribiendo

menos. Con una sintaxis mucho más sencilla, podíamos modificar nuestro

sitio web, crear plugins, animar videojuegos y muchas cosas más. En la

actualidad, jQuery ha perdido espacio en favor otras tecnologías más modelas

como React o Angular. De esta Tecnología Angular hablaremos en un

momento.

4.1.1.6 Framework Angular

Para (Tagged, 2019), Angular es un framework opensource desarrollado por

Google para facilitar la creación y programación de aplicaciones web de una

sola página, las webs SPA (Single Page Application).

Angular separa completamente el frontend y el backend en la aplicación, evita

escribir código repetitivo y mantiene todo más ordenado gracias a su patrón

Page 27: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

16

MVC (Modelo-Vista-Controlador) asegurando los desarrollos con rapidez, a la

vez que posibilita modificaciones y actualizaciones.

En una web SPA aunque la velocidad de carga puede resultar un poco lenta

la primera vez que se abre, navegar después es totalmente instantáneo, ya

que se ha cargado toda la página de golpe.

Solamente es una ruta la que se tiene que enviar el servidor, y Angular lo que

hace ‘por debajo’ es cambiar la vista al navegar para que dé la apariencia de

una web normal, pero de forma más dinámica.

Entre otras ventajas, este framework es modular y escalable adaptándose a

nuestras necesidades y al estar basado en el estándar de componentes web,

y con un conjunto de interfaz de programación de aplicaciones (API) permite

crear nuevas etiquetas HTML personalizadas que pueden reutilizarse.

El lenguaje principal de programación de Angular es Typescript, y así toda la

sintaxis y el modo de hacer las cosas en el código es el mismo, lo que añade

coherencia y consistencia a la información, permitiendo por ejemplo, la

incorporación de nuevos programadores, en caso de ser necesarios, ya que

pueden continuar su trabajo sin excesiva dificultad.

Como ya se ha indicado, las plantillas de Angular almacenan por separado el

código de la interfaz del usuario (front-end) y el de la lógica de negocio (back-

end), que entre otros beneficios permite utilizar mejor otras herramientas

anteriormente existentes.

Y por si fuera poco, los principales editores y entornos de desarrollo integrado

(IDEs) ofrecen ya extensiones para poder trabajar con este framework con

mayor comodidad.

Por su programación reactiva, la vista se actualiza automáticamente tras

realizar los cambios. Además Angular dispone de asistente por línea de

comandos para poder crear proyectos base y también se integra bien con

herramientas de testing y con Ionic, lo que facilita la creación de web-

responsive, es decir, adaptadas a móviles.

4.1.1.7 Servidores Web

Page 28: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

17

Según, (Marco, 2018), un servidor web es un software que forma parte del

servidor y tiene como misión principal devolver información (páginas) cuando

recibe peticiones por parte de los usuarios.

En otras palabras, es el software que permite que los usuarios que quieren

ver una página web en su navegador puedan hacerlo.

Para el funcionamiento correcto de un servidor web necesitamos un cliente

web que realice una petición http o https a través de un navegador como

Chrome, Firefox o Safari y un servidor donde esté almacenada la información.

El proceso sería el siguiente:

1. Tras la primera consulta por parte del usuario hacia una web, se

establece una conexión entre el servidor DNS y el ordenador que

realiza la consulta o petición. Este servidor DNS responde con la

dirección IP correcta del servidor web donde está alojado el contenido

solicitado.

2. El siguiente paso sería solicitar el contenido al servidor web mediante

el protocolo HTTP/HTTPS.

3. Una vez que el servidor web ha recibido la solicitud del contenido

solicitado por el cliente web, deberá procesar la solicitud hasta

encontrar el contenido solicitado dentro del dominio correspondiente.

4. Envía el contenido solicitado al cliente web que lo solicitó.

Hay varios tipos de servidores aquí enumeramos algunos.

Servidor HTTP Apache

El servidor HTTP Apache es un software de código abierto y gratuito, que

durante años ha sido el software más utilizado por los servidores web,

rivalizando actualmente con Nginx. Además, destaca por ser multiplataforma,

siendo compatible con sistemas operativos como Linux, Window, IOS, Unix,

etc.

Page 29: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

18

4.1.1.8 Bootstrap 5

Para (CALVACHE, 2021) Bootstrap es un marco de trabajo (framework) que

permite diseñar un sitio web a través de librerías CSS. Éstas incluyen

elementos como cuadros, menús, botones, tipografías y otros muchos que se

utilizan habitualmente en la creación de sitios web.

Una de las características que mejor puede definir a Bootstrap es que resulta

bastante sencillo de manejar, ya que hace uso de un sistema de parrilla o grid

con 12 columnas en las que se puede insertar el contenido. Ésta es la clave

para que los sitios web realizados con Bootstrap tengan un diseño responsive,

ya que los desarrolladores pueden gestionar todas esas columnas según

cuales sean sus necesidades para adaptarse a los tamaños de los distintos

dispositivos.

El hecho de que Bootstrap se haya convertido en uno de los frameworks

preferidos por desarrolladores web se debe a una serie de características que,

a lo largo de sus diferentes versiones desde 2011, han ido evolucionando,

pero manteniendo la esencia principal.

El aspecto principal que define a Bootstrap es que se enfoca exclusivamente

en la parte front-end del desarrollo web (HTML, CSS y JavaScript). Aunque

esto parecía algo puramente estético en su día, con la creciente importancia

que le da Google a la adaptación de los sitios web a dispositivos móviles (más

allá de las clásicas versiones de escritorio) se ha convertido en una

característica muy relevante.

Lo bueno de Bootstrap es que ofrece un soporte casi completo con HTML5 y

CSS3, algo muy valorado por los desarrolladores web gracias a su flexibilidad

para crear diseños. Además, no solo es que se puedan establecer Media

Queries para diferentes tamaños de dispositivos, sino que también se pueden

insertar imágenes responsive, las cuales se adaptan a las pantallas de

cualquier dispositivo.

Otro de los aspectos muy valorados por los desarrolladores y por los que

Bootstrap tiene tanto éxito es la gran cantidad de documentación que hay

disponible. Y es que, no solo hay muchos componentes aptos para utilizar con

Page 30: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

19

Bootstrap, sino que también hay un montón de ejemplos en foros y blogs, de

los que se puede ir tirando cuando se necesita ayuda o instrucción sobre algún

elemento o algún recurso que se desea implementar.

4.1.1.9 PythonAnyWhere

PythonAnywhere es un servicio para ejecutar código Python en servidores "en

la nube". Lo vamos a usar para alojar nuestro sitio para que esté disponible

en Internet.

Page 31: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

20

5. MATERIALES Y METODOS

Para el desarrollo de este proyecto se utilizó un conjunto de materiales de

oficina, equipos y software, los cuales nos ayudaron en la construcción y

entrega del sistema; también se aplicó algunos métodos de investigación

como el deductivo, inductivo y analítico, usados para comprender a fondo el

caso de estudio; además se empleó la técnica de entrevista permitiéndome

adquirir el conocimiento necesario para diseñar e implementar una solución al

problema.

Adicionalmente se utilizó la metodología de desarrollo XP (Extreme

Programming) la cual permitió dar solución al problema de manera eficiente.

A continuación, se detalla cada uno de estos:

5.1 Materiales

El desarrollo del proyecto de titulación se lo realizo con la ayuda de materiales

técnicos y tecnológicos. A continuación, se detalla los recursos empleados,

así como su coste respectivo.

La tabla I hace referencia a la popularidad de los lenguajes mas demandados

en el 2021, dando a conocer el lenguaje Python el cual se empleo para el

desarrollo del mismo.

Tabla 1. Lenguajes de Programación

LENGUAJES DE PROGRAMACION

Preferencia de los lenguajes de programación 2021

Registros: 3 Nro. De tabla: 1

Lenguaje Ratings Costo

Python 10.86% 0$

JavaScript 2.27% 0$

PHP 1.75% 0$

Page 32: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

21

Total de datos 3 Valor Total : 0$

Nota: Obtenido de (TioBe, 2021)

La tabla II nos muestra de la misma forma las Bases de Datos mas populares

siendo PostgreSQL quien se la utilizara para la implementación del sistema.

Tabla 2. Base de Datos

BASES DE DATOS

Bases de datos más relevantes este 2021

Registros: 3 Nro. De tabla: 2

BD Eficiencia Costo

PostgreSQL 100% 0$

MongoBD 100% 0$

MySQL 100% 0$

Total de datos 3 Valor Total 0$

Nota: Elaboración Propia

La tabla III nos muestra las herramientas utilizadas en el proyecto, así como

su costo.

Tabla 3. Herramientas

HERRAMIENTAS UTILIZADAS

Herramientas

Registros: 4 Nro. De tabla: 3

Servidor Costo Unitario Costo Total

Sistema Windows 10 58.00% 58.00$

Enterprise Architec 0.00% 0.00$

Page 33: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

22

Visual Studio Code 0.00% 0.00$

Paquete Ofimática 25.00$ 25.00$

Total de datos 4 Valor Total 83.00$

Nota: Elaboración Propia

La tabla IV nos indica la puntuación y valoración de Hostings a lo que va del

año 2021 así como su valor mensual. Siendo PythonAnyWhere el hosting para

Python especializado y será cual utilizaremos en el proyecto.

Tabla 4. Hostings

HOSTING

Hosting 2021

Registros: 4 Nro. De tabla: 4

Hosting Puntuación Costo

PythonAnyWhere Excelente 5.00$ mensual

Hostinger Excelente 2.94$ mensual

HostGator Excelente 2.53$ mensual

SiteGround Muy Bueno 9.99$ mensual

Total de datos 4 Valor Total 5.00$

Nota: Obtenido de (Lab.org, 2021)

La tabla V presenta los recursos materiales, así como recursos técnicos y

tecnológicos, mismos que fueron utilizados durante el desarrollo del proyecto.

Estos recursos son muy importantes puesto que permitieron llevar el

desarrollo, así como la implementación del proyecto.

Tabla 5. Costo Recursos

COSTOS DE RECURSOS

Valores

Page 34: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

23

Registros: 10 Nro. De tabla: 5

Recurso Cantidad Unitario Costo Total

Laptop 1 1,600.00$ 1,600.00$

Impresora 1 250.00$ 250.00$

Paquete Hojas A4 1 3.00$ 3.00$

Resaltador 1 1.00$ 1.00$

Internet 5 23.00$ mes 115.00$

Copias 150 0.02$ 3.00$

Anillado 1 1.00$ 1.00$

Empastado 2 3.00$ 6.00$

CD’s 2 0.50$ 1.00$

Cartuchos Tinta 2 15.00$ 30.00$

Total de datos 10 Valor Total 2,010.00$

Nota: Elaboración Propia

La tabla VI hace referencia a los recursos humanos empleados en el proyecto,

además de ello se tuvo el asesoramiento continuo del director de tesis

permitiendo una correcta ejecución del proyecto.

Tabla 6. Talento Humano

TALENTO HUMANO

Registros: 2 Nro. De tabla: 6

Nombre Cargo N-Horas V/U Valor Total

Richard Jiménez Tesista 500 5$ 2,500.00$

Lic. Luis Jiménez Director 200 --- 0.00$

Total 2 Valor Total 2,500.00$

Page 35: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

24

Nota: Elaboración Propia

Finalmente la tabla VII se presenta un resumen de los costes por cada uno de

los recursos detallados anteriormente, así como el coste del proyecto de

titulación.

Tabla 7. Detalles de Costos

DETALLE DE COSTOS

Herramientas

Registros: 5 Nro. De tabla: 7

Descripción Valor

Talento Humano 2,500.00$

Costos de Recursos 2,010.00$

Hosting 5.00$

Herramientas Utilizadas 83.00$

Subtotal 4,598.00$

Imprevisto 100.00$

Valor Total 4,698.00$

Nota: Elaboración Propia

5.2 Métodos de investigación

5.2.1 Deductivo

Método empleado en el proyecto partiendo del objetivo general, para concluir

con el desarrollo de cada uno de los módulos qué se integran al sistema y su

implementación en la biblioteca.

5.2.2 Inductivo

Se lo aplico al momento de determinar cada uno de los inconvenientes que

tiene el bibliotecario y la secretaria del instituto al realizar sus funciones, con

el propósito de llegar a la construcción del sistema basado a las necesidades

de ellos como usuarios y que al final este cumpla sus expectativas.

Page 36: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

25

5.2.3 Analítico

Fue de gran ayuda para separar el problema por partes y de este modo poner

en descubierto las relaciones comunes entre estas, con esto se capto los

detalles esenciales para el desarrollo del proyecto.

5.3 Técnicas de recolección de información

5.3.1 Entrevista

Técnica que se le aplico para recolectar información de forma precisa y clara

determinando así las necesidades existentes en la biblioteca del Instituto

Superior Tecnológico Primero de Mayo.

5.4 Metodología de desarrollo

La metodología a implementar en este proyecto será la XP debido a su

increíble manejo del proyecto y con una implementación efectiva y eficiente.

Según Solares (2017), la metodologia XP está diseñada para entregar el

software que los clientes necesitan en el momento en que lo necesitan. XP

alienta a los desarrolladores a responder a los requerimientos cambiantes de

los clientes, aún en fases tardías del ciclo de vida del desarrollo.

El Modelo

La metodología XP define cuatro variables para cualquier proyecto de

software: costo, tiempo, calidad y alcance. El método especifica que, de

estas cuatro variables, tres de ellas podrán ser fijadas arbitrariamente por

actores externos al grupo de desarrolladores (clientes y jefes de proyecto), y

el valor de la restante deberá será establecida por el equipo de desarrollo,

quien establecerá su valor en función de las otras tres.

Por ejemplo, si el cliente establece el alcance y la calidad, y el jefe de proyecto

el precio, el grupo de desarrollo tendrá libertad para determinar el tiempo que

durará el proyecto. Se trata de establecer un equilibrio entre las cuatro

variables del proyecto.

El Ciclo De Vida

Page 37: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

26

Al igual que otras metodologías de gestión de proyectos, tanto Ágiles como

tradicionales, el ciclo XP incluye:

• Entender lo que el cliente necesita > Fase de Exploración

• Estimar el esfuerzo > Fase de Planificación

• Crear la solución > Fase de Iteraciones

• Entregar el producto final al cliente > Fase de puesta en producción

En cada iteración se realiza un ciclo completo de análisis, diseño, desarrollo y

pruebas, pero utilizando un conjunto de reglas y prácticas específicas de XP.

Un proyecto con XP, implica de entre a 10 a 15 iteraciones habitualmente.

Para la implementación de XP es importante observar las siguientes mejores

prácticas:

• Buscar la alineación del cliente con XP, con la intención de definir

lo más brevemente posible las especificaciones de la nueva

aplicación (características, el valor, prioridad). Explicaciones que

servirán como base para el equipo de proyecto al momento de hacer la

estimación de costos y llevar a cabo su gestión.

• Planificar el trabajo de forma que se puedan hacer entregas

frecuentes (sprints) en pequeñas dosis: XP se fundamenta

en versiones pequeñas, sencillas y frecuentes actualizaciones de

la aplicación. Cada requisito añadido se incorpora al instante y el

sistema se libera nuevamente.

• Conseguir que todos los miembros del equipo se familiaricen con

la nomenclatura: hay que conocer las normas, sobrenombres,

nombres de clases y métodos.

• Dejar claro desde el principio que no existe la autoría individual:

en la metodología XP se considera que el código es propiedad

colectiva, autoría de todo el equipo y no individual. Por lo tanto, todo

el código es revisado y actualizado por todos.

Page 38: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

27

• Apostar por la estandarización en todos los temas relativos al

código: los estilos y formatos de codificación deben ser los

mismos con el fin de permitir la compatibilidad entre los miembros del

equipo. Este enfoque se traduce en una colaboración más rápida.

• Simplificar al máximo el diseño: buscar siempre la implementación

del sistema que resulte tan fácil como sea posible reuniendo todas las

funcionalidades requeridas (Do The Simplest Thing That Could

Possibly Work: Haz la cosas más simples que puedan funcionar).

• Esforzarse por mantener buenos niveles de comunicación desde

el inicio de la implementación: ya que, una vez puesto en marcha un

proyecto con XP, la aplicación debe ajustarse continuamente para que

todos los miembros del equipo puedan introducir mejoras. Esto

requiere muy buena comunicación entre ellos para evitar la aparición

de fricciones o la duplicidad del trabajo.

• Entender que en XP las pruebas son lo primero: antes de liberar el

software hay que someterlo a pruebas. En XP primero se crean las

pruebas y luego se desarrolla el código capaz de superarlas. Si

consideramos la curva de los costos debido a cambios de

requerimientos en etapas finales del proyecto nos damos cuenta que

estos resultan muy elevados, la creación de las pruebas antes del

desarrollo reducen sustancialmente los costos debido a cambios, pues

estos se revisan antes de cada entrega.

• Conocer la posición de los desarrolladores ante la programación

en parejas: una de las peculiaridades del XP es que los

programadores trabajan en parejas en una sola máquina. Esto lleva

a producir código de mayor calidad al mismo o menor costo, pero hace

falta que los miembros del equipo estén dispuestos a trabajar de esta

forma.

Page 39: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

28

• Asumir las necesidades en materia de horario de trabajo y

ubicación: no se debe dedicar ni un minuto extra que supere

las cuarenta horas semanales dedicadas al desarrollo XP, ya que los

miembros del equipo deben ser capaces de mantener las condiciones

mentales y físicas para garantizar un buen rendimiento. Además, hay

que tener claro que es muy probable que gran parte de esa labor deba

llevarse a cabo en las instalaciones del cliente, dado que se trata de

una parte integral del proyecto. El cliente debe estar disponible en todo

momento con el fin de asegurar que el proyecto va por el camino

correcto.

• Utilizar la Administración del Cambio. XP requiere de nuevas formas

de hacer las cosas. Cada vez que cambia algo en la Organización, la

gente se resiste. Esto es normal, pero hace falta saber gestionar esos

impulsos para poder sobrevivir al proceso de transición.

• Fijar XP cuando la metodología falla. Se debe adaptar la

metodología a cada situación y a cada equipo de desarrolladores.

Extreme Programming (XP) tiene 21 años, por lo que debemos tomar en

cuenta las siguientes consideraciones:

• XP es una metodología excelente para administrar proyectos de

software, pero necesita revisión.

• Los fundadores de XP no siguen programando.

• El estilo XP, sobre todo la vinculación, no se ajusta a un estilo de

pensamiento de todos.

• XP se basa en la codificación disciplinada, la indisciplina conlleva a

incrementar los costos en la curva del cambio.

• XP se centra en disminuir la curva de los “costos de los cambios”.

• A través de los “sprints” de XP se trata de reducir el número de veces

que los cambios de requerimiento afectan la curva del costo, pues

estos añaden costos adicionales que probablemente no se pueden

Page 40: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

29

recuperar. Los proyectos que diseñan planes a futuro, como los

waterfall, no cambian la curva del costo.

• Cualquiera de las prácticas de XP podría ayudar a su proyecto, pero

no sería XP.

• La adopción de todas las prácticas le permitirá alcanzar un alto nivel de

productividad y obtener productos de alta calidad a una velocidad

sostenida durante un período prolongado.

La adopción de una Metodología Ágil como Extreme Programming (XP) para

el desarrollo de software en un Proyecto, requiere de hacer las cosas

diferentes ha como se realizan actualmente (pensar fuera de la caja), es

necesario capacitar a la gente para lograr ese Cambio Cultural requerido en

la implementación de XP, se requiere usar la Administración del Cambio y

tener paciencia, porque lleva tiempo la implementación de una Metodología

Ágil.

Page 41: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

30

6. RESULTADOS

Con el empleó de la metodología de desarrollo XP, el presente proyecto se ha

estructurado en cuatro fases, en las cuales se busca implementar una

solución óptima al tema en estudio, mismo que consiste en el “Desarrollo e

implementación de una aplicación web para la gestión y control de la

biblioteca del instituto superior tecnológico primero de mayo”.

Dependiendo de la fase que se ha realizado se ha obtenido un conjunto de

resultados, mismos que son detallados a continuación:

6.1 Fase de exploración

La primera fase consistió en conocer y analizar el campo de estudio, es decir

cómo está estructurada la biblioteca del Instituto, los problemas que tienen

con las actividades que se ejecutan, además de obtener los requerimientos

con los que el sistema opera.

Esta fase comprende la subsección de: descripción de la biblioteca,

problemática de la situación actual, elicitación de los requerimientos, es decir,

obtención de requerimientos mediante la aplicación de la entrevista y plan de

desarrollo de web.

A continuación, se detalla cada uno de estas subsecciones:

6.1.1 Descripción de la biblioteca

La biblioteca del Instituto Superior Tecnológico Primero de Mayo, creada para

mejorar el desarrollo intelectual de los estudiantes y docentes de la Institución,

esta misma fue creada en el cantón Yantzaza, provincia de Zamora Chinchipe,

país Ecuador, esta brinda el servicio de adquirir cualquier ejemplar que forme

parte de la misma.

6.1.2 Descripción de la problemática actual de la biblioteca

Siendo la biblioteca de la Institución que ofrece servicios a todos y cada uno

de los estudiantes, esta debe llevar el control de flujo de información de los

procesos que se realizan aquí, tales como: registro de pedidos, registro de

préstamos de libros, registro y gestión de libros, registro de libros por

categorías, es por ello que al no contar con un sistema que optimice estos

Page 42: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

31

procesos y que a su vez ayude a llevar una gestión de cada uno de los

procesos anteriormente ya expuestos, con la finalidad de dar un servicio

eficiente y rápido a los solicitantes en este caso los estudiantes.

6.1.3 Elicitación de requerimientos

Consistió en aplicar técnicas de recolección de información (Entrevista),

misma que ayudara para determinar los objetivos del sistema y la

especificación de requisitos de software.

• Entrevista:

Al haber aplicado la entrevista al responsable de la biblioteca se obtuvieron

los siguientes datos:

Las funciones que se desempeñan son: administración y registro de los libros,

registro de préstamos de los libros, consulta de libros en caso de existir en la

biblioteca, registro de libros prestados y devueltos.

Los procesos que realiza el departamento y como son ejecutados: dentro de

la institución el que lleva el registro es el bibliotecario y claro este le pasa la

información a secretaria para que se archive el documento.

Así mismo se pregunto a los responsables si están de acuerdo en que se

desarrolle este sistema web que les ayude a optimizar y mejorar la gestión de

pedidos y registro de libros para así tener la información mas ordenada ya la

vez si están en la disponibilidad de brindar información para la documentación

y apoyo necesario en el desarrollo e implementación del sistema, a lo que

supo responder que si están de acuerdo en el desarrollo del sistema.

6.1.4 Especificación de requisitos de software

Es una descripción completa del comportamiento del sistema que se

desarrolló, incluye un conjunto de casos de uso que describe las interacciones

que tendrán los usuarios con el sistema. Está dirigido tanto al cliente como a

los desarrolladores, la redacción debe ser informal, entendible por todas las

partes involucradas en el desarrollo.

6.1.4.1 Introducción

Contiene la descripción detallada de la especificación de requisitos de

software del sistema web para la biblioteca del Instituto Superior Tecnológico

Page 43: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

32

Primero de Mayo, mismo que consta de el propósito, el ámbito del sistema,

definiciones y referencias.

• Propósito

El objetivo de esta tarea es hacer que los desarrolladores y usuarios directos

del sistema conozcan el funcionamiento y limitaciones del sistema,

principalmente al momento de creación de pedidos, registro de libros, control

de general de la biblioteca, gestión de usuarios y categorías.

• Ámbito del sistema

El nombre del sistema a desarrollar es Desarrollo e Implementación de una

Aplicación Web para la Gestión y Control de la Biblioteca del Instituto

Superior Tecnológico Primero de Mayo.

Las opciones que debe realizar el sistema se detallan a continuación:

o Administración de Usuarios: crear, editar, visualizar y suspender un

usuario o estudiante.

o Administrar categorías: crear, editar, visualizar y eliminar.

o Administrar libros: crear, editar, visualizar y eliminar.

o Administrar pedidos: crear, editar, visualizar y eliminar.

o Administrar bibliotecarios: crear, editar, visualizar y eliminar.

o Administrar secretarias: crear, editar, visualizar y eliminar.

Las acciones que no debe permitir el sistema se detallan a continuación:

o El sistema no permitirá que se borren los datos de la base datos,

únicamente se cambiara el estado de activo a inactivo.

Dentro de los objetivos y beneficios del sistema hay:

o Se pretende sistematizar los procesos de gestión y registro de pedidos,

registro de libros, de categorías, de usuarios, bibliotecarios,

secretarias.

o Capacitar a los usuarios y parte administrativa referente al acceso y

gestión de las diferentes actividades que se realizan dentro de la

biblioteca.

Page 44: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

33

• Definiciones y abreviaturas

Tabla 8. Definiciones y Abreviaturas

Definiciones Descripción

Biblioteca Edificio o local donde se conservan

un conjunto de libros ordenados y

clasificados para su consulta o

préstamo bajo determinadas

condiciones.

Requerimiento Atributos necesarios dentro de la

aplicación, que represente una

capacidad, una característica o un

factor de calidad de dicha aplicación,

de tal manera que le sea útil a los

clientes o a los usuarios finales.

Usuario Persona que usara el sistema para

gestionar los procesos.

Base de Datos Conjunto de datos pertenecientes a

un mismo contexto y almacenados

sistemáticamente para su posterior

uso.

6.2 Fase de planificación

6.2.1 Descripción general

Se da a conocer la perspectiva del sistema, funciones, características de los

usuarios que van a estar relacionados con el sistema, restricciones del

sistema.

• Perspectiva del producto

El sistema, funciona en cualquier computador y dispositivo móvil que tenga

acceso a internet.

• Características de los usuarios

Se describe los usuarios finales del sistema.

Page 45: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

34

Tabla 9. Características del Administrador

Tipo de Usuario Administrador

Formación Conocimientos básicos de

computación.

Actividades Control y manejo del sistema en

general.

Tabla 10. Características de la secretaria

Tipo de Usuario Secretaria

Formación Conocimientos básicos de

computación.

Actividades Control y manejo de procesos a su

cargo.

Tabla 11. Características de los usuarios

Tipo de Usuario Usuario Final

Formación Ninguna

Actividades Observa e indaga información y

realiza lo que el sistema le permita.

• Restricciones

Aquí se describe aquellas limitaciones que se imponen sobre el desarrollador

del sistema.

o Conexión a internet.

o Lenguajes y tecnologías utilizadas.

o Almacenamiento de información lo cual se lo hará en la base de datos

PostgreSQL.

6.2.2 Requisitos específicos

En este apartado se presentan los requisitos funcionales y no funcionales que

fueron satisfechos por el sistema. Mismos que han sido especificados bajo el

Page 46: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

35

criterio de estabilidad: dado un requisito, debería ser fácilmente demostrable

si es satisfecho o no por el sistema.

• Requisitos funcionales

En base a la información obtenida anteriormente se ha obtenido los requisitos

funcionales del sistema, los cuales definen la funcionalidad del sistema, es

decir, mediante un conjunto de entradas proporcionadas, ejecuta

comportamientos y proporciona salidas, estos son aquellos requisitos que el

sistema debe cumplir.

Tabla 12. Requisitos Funcionales

REFERENCIA REQUERIMIENTO VISIBILIDAD

RF-01 INGRESAR AL SISTEMA

RF-01.1 Al administrador, secretaria,

usuarios ingresar al sistema.

Evidente

RF-02 ADMINISTRAR USUARIO

RF-02.1 Al administrador: registrar rol

(estudiante, secretaria,

bibliotecario).

Evidente

RF-02.2 Al administrador o secretaria:

crear usuario.

Evidente

RF-02.3 Al administrador o secretaria:

editar la información del

usuario.

Evidente

RF-02.4 Al administrador o secretaria:

visualizar la lista de usuarios.

Evidente

RF-02.5 Al administrador o secretaria:

suspender un usuario.

Evidente

RF-03 ADMINISTRAR SECRETARIA

RF-03.1 Al administrador: asignar rol de

secretaria a un usuario.

Evidente

RF-03.2 Al administrador: quitar rol de

secretaria a un usuario.

Evidente

RF-04 ADMINISTRAR LIBROS

Page 47: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

36

RF-04.1 Al administrador o secretaria:

crear libro.

Evidente

RF-04.2 Al administrador o secretaria:

editar la información del libro.

Evidente

RF-04.3 Al administrador o secretaria:

visualizar la lista de libros.

Evidente

RF-04.4 Al administrador o secretaria:

dar de baja un libro.

Evidente

RF-05 ADMINISTRAR CATEGORIAS

RF-05.1 Al administrador o secretaria:

crear categoría.

Evidente

RF-05.2 Al administrador o secretaria:

editar la información de la

categoría.

Evidente

RF-05.3 Al administrador o secretaria:

visualizar la lista de categorías.

Evidente

RF-05.4 Al administrador o secretaria:

dar de baja una categoría.

Evidente

RF-06 ADMINISTRAR PEDIDOS

RF-06.1 Al administrador o secretaria:

crear pedido.

Evidente

RF-06.2 Al administrador o secretaria:

editar la información del pedido.

Evidente

RF-06.3 Al administrador o secretaria:

visualizar la lista de pedidos.

Evidente

RF-06.4 Al administrador o secretaria:

dar de baja un pedido.

Evidente

RF-06.5 Al administrador o secretaria:

marcar como cumplido el

pedido.

Evidente

RF-07 CONSULTAR INFORMACION

RF-07.1 Al usuario: solicitar libro. Evidente

Page 48: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

37

RF-07.2 Al usuario: ver todos los

pedidos realizados.

Evidente

• Requisitos no funcionales

Dentro de los requisitos no funcionales del sistema tenemos, aquellos

requisitos que especifican criterios que son usados para juzgar la operación

del sistema, es decir, no describen información a guardar, ni funciones a

realizar, más bien son restricciones del diseño o la implementación.

Tabla 13. Requisitos no Funcionales

REFERENCIA REQUERIMIENTO

RNF-001 El sistema será desarrollado bajo los lenguajes de Python y JavaScript.

RNF-002 El sistema será adaptativo para cualquier dispositivo.

RNF-003 El sistema utilizara la base de datos PostgreSQL.

RNF-004 El sistema será multiplataforma.

RNF-005 El sistema será multiusuario.

RNF-006 El sistema exigirá la autenticación de usuarios.

RNF-007 El sistema será fácil de manejar utilizando interfaces amigables con el usuario.

RNF-008 El sistema brindara confiabilidad, rendimiento y seguridad de los datos.

6.3 Fase de Iteraciones

En esta fase se seleccionó y se elaboró los casos de uso que permitieron

definir la arquitectura base del sistema, además se realizó la especificación

de casos de uso y el primer análisis del dominio del problema, con la finalidad

de orientarnos en la siguiente fase de construcción y de esta manera obtener

un software bien construido.

6.3.1 Casos de uso general

Tabla 14. Casos de Uso General

IDENTIFICACION DE CASOS DE USO

Actor Código CU Requerimientos cubiertos

Administrador, Secretaria, Usuarios

UC 001 Ingresar al sistema RF-01

Secretaria UC 002 Gestionar Usuarios RF-02

Page 49: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

38

UC 003 Gestionar Categorías RF-05

UC 004 Administrar Libros RF-04

UC 005 Administrar Pedidos RF-06

Usuarios UC 006 Consultar Información RF-07

Figura 2. Diagrama de casos de uso.

6.3.2 Diagrama de clases

Con la ayuda de este diagrama se logró representar los objetos que

manipulara el sistema, las operaciones que son aplicadas a estos objetos, las

relaciones y las colaboraciones que se tuvo en las clases definidas.

Dentro de las clases principales están: Usuario, Categoría, Libro, Secretaria,

Administrador y Pedido.

uc Casos de uso

Administrador

Usuarios

Ingresar al sistema

Gestionar Categorias

Administrar Libros

Administrar Pedidos

Consultar Información

Gestionar Usuarios

Page 50: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

39

Figura 3. Diagrama de clases

6.3.3 Diseño de diagramas

Los diagramas de modelado ayudaron a entender, aclarar y transmitir las

ideas que se tuvo sobre el código y los requisitos del usuario que el sistema

de software satisface.

Por ejemplo, para describir y transmitir los objetos (clases), operaciones y

relaciones con los cuales se construirá el software se usó el diagrama de

clases. Para describir y transmitir la funcionalidad del sistema se usó el

diagrama de secuencias, actividades, estados. Además, se elaboró el

diagrama de componentes, modelo entidad relación y despliegue con el cual

se muestra la configuración del hardware con los artefactos del software. A

continuación, se presenta cada uno de los diagramas:

6.3.4 Prototipado de pantalla y descripción de casos de uso

Estos diagramas fueron de gran ayuda ya que nos muestran la secuencia de

acciones implicadas en un caso de uso, es decir, el comportamiento

combinado de actores, operaciones que incluyen mensajes que pasan por

Page 51: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

40

distintos objetos. A continuación, se presentan los diagramas de secuencia de

cada caso de uso con mayor relevancia.

6.3.4.1 Inicio de Sesión

Pantalla 001: Ingresar al sistema

Figura 4. Ingreso al sistema – vista del administrador. Elaboración Propia

ui Ingresar al Sistema

Acceso

USUARIO

CONTRASEÑA

INGRESAR

Administrador

Usuarios

Libros

Pedidos

_______________________________________

_______________________________________

Inicio

ADMINISTRACION

Categorias

PANEL DE ADMINISTRACIÓN

Olvido sus credenciales?

Salir

DATOS INVALIDADOS!

Entendido

«navigate»

«navigate»

Page 52: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

41

Figura 5. Ingreso al sistema – vista del usuario. Elaboración Propia

Caso de uso 001: Ingresar al Sistema

Tabla 15. Descripción de caso de uso: Ingresar al Sistema.

CASO DE USO: Ingresar al Sistema ACTOR: Administrador, Secretaria, Usuarios

CÓDIGO: UC001

TIPO:

Primario-Sistema

PANTALLAS:

P001, P002, P003, P004

ui Ingresar al Sistema

Biblioteca ISTPM

INSTITUTO SUPERIOR TECNOLOGICO "PRIMERO DE MAYO"

Inicie Sesión

Usuario*

Contraseña*

_____________________________________

_____________________________________

Continuar

Olvide mis credenciales

Campo requerido

Campo requerido

Biblioteca ISTPM

Inicio Biblioteca Pedidos

«navigate»

Page 53: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

42

REF. REQUERIMIENTO:

RF-01

RESUMEN: El administrador, secretaria, usuarios ingresan al sistema con su usuario y contraseña.

OBJETIVOS: Ingresar al sistema con un usuario y contraseña.

PRECONDICIONES:

- Que el administrador exista en el sistema. - Que el administrador o secretaria haya registrado

previamente a los usuarios en el sistema.

POSCONDICIONES:

Que la secretaria, usuarios tengan acceso al sistema para que realicen sus respectivas actividades en la aplicación web.

CURSO NORMAL DE EVENTOS

Actor Sistema

1. El administrador, secretaria, usuarios acceden al sistema a través de un dominio.

2. El sistema muestra ya sea la pantalla [Acceso] o [Biblioteca ISTPM].

3. El administrador, secretaria, usuarios ingresan el usuario y contraseña, y dan clic sobre el botón de [INGRESAR] o [Continuar].

4. El sistema mostrará ya sea la pantalla [Administrador] o [Biblioteca] dependiendo del usuario logueado.

CURSO ALTERNO DE EVENTOS

A. USUARIO O CONTRASEÑA INCORRECTOS A.1 El administrador, secretaria, usuarios en la pantalla [Acceso] o [Biblioteca ISTPM] ingresan las credenciales incorrectas y dan clic en el botón [INGRESAR] o [Continuar]. A.2 El sistema verifica las credenciales ingresadas y muestra un mensaje de “DATOS INVALIDOS” o “Acceso Denegado”. A.3 El administrador, secretaria, usuarios dan clic en [Entendido].

B. CAMPOS VACÍOS B.1 El administrador o secretaria en la pantalla [Acceso] no ingresan las credenciales y dan clic en [INGRESAR]. B.2 El sistema valida los campos vacíos y muestra un mensaje de “DATOS INVALIDOS”. B.3 El administrador o secretaria da clic en [Entendido].

C. CAMPOS OBLIGATORIOS VACIOS B.1 Los usuarios en la pantalla [Biblioteca ISTPM], no ingresan las credenciales respectivas. B.2 El sistema no habilita el botón [Continuar] y muestra los campos obligatorios a llenarse por el usuario.

Nota: Elaboración Propia.

Diagrama de secuencia: Ingresar al sistema.

Page 54: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

43

Figura 6. Ingreso al sistema – curso normal. Elaboración Propia

Figura 7. Ingreso al sistema – curso alterno. Elaboración Propia

Diagrama de robustez: Ingresar al sistema

sd CURSO NORMAL DE EVENTOS

ADMINISTRADOR,

SECRETARIA Acceso (Login) Credenciales UserAdministradorBiblioteca ISTPM

(Login)

Biblioteca ISTPM

USUARIOS

1. Ingresa las credenciales y da clic

en [INGRESAR]()

Valida Credenciales()

Valida Credenciales()

Muestra la pantalla [Administrador]()

1. Ingresa las credenciales y da clic en

[Continuar]()

Valida Credenciales()

Valida Credenciales()

Muestra la pantalla [Biblioteca ISTPM]()

sd CURSO ALTERNO DE EVENTOS

ADMINISTRADOR,

SECRETARIA Acceso (Login) Credenciales

USUARIOS

Biblioteca ISTPM

(Login)

1. Ingresa las credenciales incorrectas

y da clic en [INGRESAR]()

Valida Credenciales()

Muestra el mensaje "DATOS INVALIDOS"()

2. Da clic en [Entendido]()

1. No ingresa las credenciales y da clic en [INGRESAR]()Valida Credenciales()

Muestra el mensaje "DATOS INVALIDOS"()

2. Da clic en [Entendido]()

1. Ingresa las credenciales

incorrectas y da clic en [Continuar]()

Valida credenciales()

Muestra el mensaje "Acceso Denegado"()2. Da clic en [Entendido]()

1. No ingresa las credenciales()

Valida Credenciales()

Deshabilita el botón [Continuar] y muestra

Campos Obligatorios()

Page 55: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

44

Figura 8. Ingreso al sistema – curso normal de eventos. Elaboración Propia

Figura 9. Ingreso al sistema – curso alterno de ventos. Elaboración Propia

6.3.4.2 Gestión de Usuarios

Pantalla 002: Gestionar Usuarios

sd Ingresar al Sistema

ADMINISTRADOR,

SECRETARIA

USUARIOS

Acceso (Login)

Validar Datos User

Mostrar la pantalla

[Administrador]

Administrador

CURSO NORMAL DE EVENTOS

1. El administrador, secretaria, usuarios

acceden al sistema a través de un

dominio.

2. El sistema muestra ya sea la pantalla

[Acceso] o [Biblioteca ISTPM].

3. El administrador, secretaria, usuarios

ingresan el usuario y contraseña y dan

clic sobre el botón de [INGRESAR] o

[Continuar].

4. El sistema mostrará ya sea la pantalla

[Administrador] o [Biblioteca ISTPM]

dependiendo del usuario logueado.

Biblioteca ISTPM (Login)

Muestra la pantalla

[Biblioteca ISTPM]

Biblioteca ISTPM

Ingresa las credenciales y da clic en

[Continuar]

Ingresa las credenciales y da clic

en [INGRESAR]

sd Ingresar al Sistema

ADMINISTRADOR,

SECRETARIA

USUARIOS

Acceso (Login) Valida Datos User

Muestra Campos

Obligatorios Vacíos

CURSO ALTERNO DE EVENTOS

A. USUARIO O CONTRASEÑA

INCORRECTOS

A.1 El administrador, secretaria, usuarios en

la pantalla [Acceso] o [Biblioteca ISTPM]

ingresan las credenciales incorrectas y dan

clic en el botón [INGRESAR] o [Continuar].

A.2 El sistema verifica las credenciales

ingresadas y muestra un mensaje de "DATOS

INVALIDOS" o "Acceso Denegado".

A.3 El administrador, secretaria, usuarios dan

clic en [Entendido].

B. CAMPOS VACIOS

B.1 El administrador o secretaria en la

pantalla [Acceso] no ingresan las

credenciales y dan clic en [INGRESAR].

B.2 El sistema valida los campos vacios y

muestra un mensaje de "DATOS INVALIDOS"

B.3 El administrador o secretaria da clic en

[Entendido].

C. CAMPOS OBLIGATORIOS VACÍOS

C.1 Los usuarios en la pantalla [Biblioteca

ISTPM] no ingresan las credenciales

respectivas.

C.2 El sistema no habilita el botón

[Continuar] y muestra los campos obligatorios

a llenarse por el usuario.

Biblioteca ISTPM

(Login)

Muestra mensaje

"DATOS INVALIDOS"

Muestra Mensaje

"Acceso Denegado"

Ingresan las credenciales incorrectas y da

clic en [Continuar]

Ingresan o no las credenciales de acceso y

dan clic en [INGRESAR]

No ingresa las credenciales

Page 56: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

45

Figura 10. Gestionar usuarios. Elaboración Propia

Caso de uso 002: Gestionar Usuarios

Tabla 16. Descripción de caso de uso: Gestionar Usuarios.

CASO DE USO:

Gestionar Usuarios ACTOR: Administrador, Secretaria

CÓDIGO: UC002 TIPO:

Primario-Sistema

PANTALLAS:

P005, P006, P007

REF. REQUERIMIENTO:

RF-02

ui Gestionar Usuarios

Administrador

Usuarios

Libros

Pedidos

OpcionesCarreraNombresApellidos Ciclo

Agregar Usuario

Usuario

Editar

Editar

Editar

Foto

Administrador

Confirmar Cancelar

Inicio

ADMINISTRACION

NUEVO USUARIO

Categorías

Numero de cedula*

Contraseña*

Confirmar contraseña*

Nombres:

Apellidos:

Ciclo*

Tecnología*

Correo:

Confirmar

Cancelar

Usuarios Suspendidos Buscar Usuario

Suspender

Suspender

Suspender

Telefono Correo

Imagen

Telefono

1

TECNOLOGÍA SUPERIOR EN DESARROLLO DE SOFTWARE

Examinar... Ningún archivo seleccionado.

ADMINISTRACION

Inicio

Usuarios

Categorías

Libros

Pedidos

Salir

Salir

¿Desea inhabilitar el usuario?

David Ocampo

Usuario de Egresado Ciclo -

TECNOLOGÍA SUPERIOR EN

DESARROLLO DE SOFTWARE

«navigate»

«navigate»

«navigate»

Page 57: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

46

RESUMEN:

El administrador o secretaria crea el usuario, edita información, suspende usuario y realiza búsquedas de los mismos.

OBJETIVOS:

Gestionar usuarios, suspender usuario y realizar búsquedas de los mismos.

PRECONDICIONES:

Que el administrador o secretaria exista en el sistema.

POSCONDICIONES:

Que los usuarios puedan ingresar al sistema y soliciten libros de la biblioteca.

CURSO NORMAL DE EVENTOS

Actor Sistema

1. El administrador o secretaria para agregar un nuevo usuario pulsa el botón [Agregar Usuario].

2. El sistema muestra la pantalla [NUEVO USUARIO]

3. El administrador o secretaria llena el formulario y da clic sobre el botón de [Confirmar]

4. El sistema valida el formulario, guarda el nuevo usuario y regresa a la pantalla de [Administrador].

5. El administrador o secretaria para modificar información de un usuario pulsa el botón [Editar].

6. El sistema mostrará la pantalla [USUARIO EDITADO] con toda la información del usuario seleccionado.

7. El administrador o secretaria modifica cualquier campo del formulario y da clic sobre el botón [Actualizar]

8. El sistema actualiza la información del usuario y regresa a la pantalla [Administrador].

9. El administrador o secretaria para suspender un usuario pulsa el botón [Suspender].

10. El sistema muestra un mensaje de confirmación.

11. El administrador o secretaria pulsa en [Confirmar].

12. El sistema cambia el estado del usuario y lo guarda como inactivo.

13. El administrador o secretaria para habilitar el usuario suspendido debe pulsar sobre el botón [Habilitar].

14. El sistema muestra un mensaje de confirmación.

15. El administrador o secretaria pulsa en [Confirmar].

16. El sistema cambia el estado del usuario y lo guarda como activo.

17. El administrador o secretaria para buscar un usuario deber pulsar en [Buscar Usuario].

18. El sistema muestra el buscador respectivo para empezar a realizar las búsquedas.

19. El administrador o secretaria ingresa el usuario en el buscador y pulsa en el botón de la lupa.

20. El sistema realiza la búsqueda del usuario y muestra el resultado encontrado.

Page 58: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

47

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACIOS A.1 El administrador o secretaria estando en el formulario de [NUEVO USUARIO] no llena los campos del formulario y da clic en el botón [Confirmar]. A.2 El sistema valida los campos del formulario y muestra los campos obligatorios a llenarse.

B. USUARIO O PASSWORD MAL INGRESADOS B.1 El administrador o secretaria llena el formulario de [NUEVO USUARIO] y da clic en el botón [Confirmar]. B.2 El sistema valida la cedula del usuario con el que se va a guardar y muestra un mensaje de “Usuario o Password mal ingresados”.

Nota: Elaboración Propia.

Page 59: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

48

Diagrama de secuencia: Gestionar usuarios.

Figura 11. Gestionar usuarios – Curso Normal. Elaboración Propia

sd CURSO NORMAL DE EVENTOS

ADMINISTRADOR,

SECRETARIA Administrador NUEVO USUARIO USUARIO

EDITADO

Usuario User

1. Pulsa en [Agregar

Usuario]()

Muestra el formulario()

2. Llena el formulario y da clic en

[Confirmar]()Valida Usuario()

Valida Usuario()

Guarda Usuario()Muestra pantalla [Administrador]()

3. Pulsa en [Editar]()Muestra el formulario()

4. Modifica Información y da clic en [Actualizar]]()

Valida Datos()

Valida Datos()

Actualiza Usuario()Muestra pantalla [Administrador]()

5. Pulsa en [Suspender]()

Muestra Mensaje Confirmación()

6. Pulsa en [Confirmar]()Actualiza Usuario()

Actualiza Usuario()

Muestra la pantalla [Administrador]()

7. Pulsa en [Habilitar]()

Muestra Mensaje Confirmación()

8. Pulsa en [Confirmar]()Actualiza Usuario()

Actualiza Usuario()

Muestra la pantalla [Administrador]()

9. Ingresa el usuario y pulsa

en el botón de la lupa.()

Busca Usuario()

Busca Usuario()

Obtiene Usuario()Muestra Usuario en la pantalla [Administrar]()

Page 60: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

49

Figura 12. Gestionar usuarios – Curso Alterno. Elaboración Propia

sd CURSO ALTERNO DE EVENTOS

ADMINISTRADOR,

SECRETARIA NUEVO USUARIOAdministrador Usuario User

1. Pulsa el botón [Agregar

Usuario]()

Muestra el formulario()

2. No llena el formulario y da

clic en [Confirmar]() Valida Datos()

Muestra Campos Obligatorios()

3. LLena el formulario y da clic en

[Confirmar]()

Valida Usuario()

Valida Usuario()

Muestra Mensaje "Usuario o

Password mal ingresados"()

Page 61: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

50

Diagrama de robustez: Gestionar Usuarios

Figura 13. Gestionar usuarios – Curso Normal de Eventos. Elaboración Propia

Figura 14. Gestionar usuarios – Curso Alterno de Eventos. Elaboración Propia

6.3.4.3 Gestionar Categorías

Pantalla 003: Gestionar Categorías

sd Gestionar Usuarios

Administrador, Secretaria

NUEVO USUARIO Valida datos User

CURSO NORMAL DE EVENTOS

1. El administrador o secretaria para agregar un nuevo

usuario pulsa el botón [Agregar Usuario].

2. El sistema muestra la pantalla [NUEVO USUARIO].

3. El administrador o secretaria l lena el formulario y da

clic sobre el botón [Confirmar].

4. El sistema valida el formulario, guarda el nuevo

usuario y regresa a la pantalla de [Administrador].

5. El administrador o secretaria para modificar

información de un usuario pulsa el botón [Editar].

6. El sistema mostrará la pantalla [USUARIO EDITADO]

con toda la información del usuario seleccionado.

7. El administrador o secretaria modifica cualquier

campo del formulario y da clic sobre el botón

[Actualizar].

8. El sistema actualiza la información del usuario y

regresa a la pantalla [Administrador].

9. El administrador o secretaria para suspender un

usuario pulsa el botón [Suspender].

10. El sistema muestra un mensaje de confirmación.

11. El administrador o secretaria pulsa sobre el botón

[Confirmar].

12. El sistema cambia el estado del usuario y lo guarda

como inactivo.

13. El administrador o secretaria para habilitar un usuario

suspendido pulsa el botón [Habilitar].

14. El sistema muestra un mensaje de confirmación.

15. El administrador o secretaria pulsa en [Confirmar].

16. El sistema cambia el estado del usuario y lo guarda

como activo.

17. El administrador o secretaria para buscar un usuario

debe pulsar en [Buscar Usuario].

18. El sistema muestra el buscador respectivo para

empezar a realizar las búsquedas.

19. El administrador o secretaria ingresa el usuario en el

buscador y pulsa en el botón de la lupa.

20. El sistema realiza la búsqueda del usuario y muestra

el resultado encontrado.

USUARIO EDITADO

Administrador

Muestra pantalla

[Administrador]

Muestra Mensaje

Confirmación

Guarda Datos

Llena el formulario y da clic

en [Confirmar]

Modifica la información y da clic

en [Actualizar]

Ingresa cualquier dato en el campo de "Ingrese

su búsqueda" y da clic en la lupa.

Pulsa el botón [Suspender]

Pulsa el botón [Habilitar]

sd Gestionar Usuarios

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACÍOS

A.1 El administrador o secretaria estando en

el formulario de [NUEVO USUARIO] no

llena los campos del formulario y da clic en

el botón [Confirmar].

A.2 El sistema verifica los campos del

formulario y muestra los campos obligatorios

a l lenarse.

B. USUARIO O CONTRASEÑA MAL

INGRESADOS

B.1 El administrador o secretaria l lena el

formulario de [NUEVO USUARIO] y da clic

en el botón [Confirmar].

B.2 El sistema valida la cedula del usuario

con el que se va a guardar y muestra un

mensaje de "Usuario o Password mal

ingresados".

Administrador,

Secretaria NUEVO USUARIO Valida datos User

Muestra Campos

Obligatorios

Muestra mensaje

"Usuario o Password mal

ingresados"

No llena el formulario y da clic

en [Confirmar]

Llena el formulario y da clic en

[Confirmar]

Page 62: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

51

Figura 15. Gestionar Categorías. Elaboración Propia

Caso de uso 003: Gestionar Categorías

Tabla 17. Descripción de caso de uso: Gestionar Categorías.

CASO DE USO:

Gestionar Categorías

ACTOR: Administrador, Secretaria

CÓDIGO: UC003 TIPO: Primario-Sistema

PANTALLAS:

P008, P009, P010

REF. REQUERIMIENTO:

RF-05

RESUMEN:

El administrador o secretaria crea, edita y elimina categorías.

OBJETIVOS:

Gestionar categorías para la biblioteca del ISTPM..

ui Gestionar Categorías

Administrador

NUEVA CATEGORÍA

ADMINISTRACION

Inicio

Usuarios

Categorías

Libros

Pedidos

Agregar Categoría

Nombre

Editar

Editar

Nombre*

Confirmar

Cancelar

Salir

Eliminar

Eliminar

Administrador

ADMINISTRACIÓN

Inicio

Usuarios

Categorías

Libros

Pedidos

¿Desea eliminar la categoría?

Ciencia

Se guardará un respaldo de

la categoría en la BASE DE

DATOS!

Confirmar Eliminar

Salir

«navigate»

«navigate»«navigate»

Page 63: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

52

PRECONDICIONES:

Que el administrador o secretaria exista en el sistema.

POSCONDICIONES:

Que las categorías creadas nos permitan clasificar los libros de la biblioteca del ISTPM.

CURSO NORMAL DE EVENTOS

Actor Sistema

1. El administrador o secretaria para agregar una nueva categoría, pulsa el botón [Agregar Categoría].

2. El sistema muestra la pantalla [NUEVA CATEGORIA].

3. El administrador o secretaria llena el formulario y da clic sobre el botón [Confirmar].

4. El sistema valida el formulario, guarda la categoría y regresa a la pantalla [Administrador].

5. El administrador o secretaria para modificar la categoría, pulsa el botón [Editar].

6. El sistema mostrará la pantalla [CATEGORIA EDITADA] con la información de la categoría seleccionada.

7. El administrador o secretaria modifica el formulario y da clic sobre el botón [Actualizar]

8. El sistema actualiza la información de la categoría y regresa a la pantalla [Administrador].

9. El administrador o secretaria para eliminar una categoría, pulsa en el botón [Eliminar].

10. El sistema muestra un mensaje de confirmación.

11. El administrador o secretaria pulsa en [Confirmar].

12. El sistema elimina la categoría y regresa a la pantalla [Administrador]

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACIOS A.1 El administrador o secretaria estando en el formulario de [NUEVA CATEGORIA] no llena el formulario y da clic en el botón [Confirmar]. A.2 El sistema valida el formulario y muestra los campos obligatorios a llenarse.

B. CATEGORIA YA REGISTRADA B.1 El administrador o secretaria estando en el formulario de [NUEVA CATEGORIA] agrega una categoría ya registrada y da clic en [Confirmar]. B.2 El sistema muestra un mensaje de “Categoría YA REGISTRADA”.

Nota: Elaboración Propia.

Page 64: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

53

Diagrama de Secuencia: Gestionar Categorías

Figura 16. Gestionar Categorías. – Curso Normal. Elaboración Propia

sd CURSO NORMAL DE EVENTOS

ADMINISTRADOR,

SECRETARIA Administrador NUEVA

CATEGORIA

CATEGORIA

EDITADA

Category Category

1. Pulsa el botón [Agregar

Categoría]()Muestra pantalla [NUEVA CATEGORIA]()

2. Llena el formulario y da clic en [Confirmar]()Valida Datos()

Valida Datos()

Guarda Categoria()Muestra la pantalla [Administrador]()

3. Pulsa el botón [Editar]()

Muestra pantalla [CATEGORIA EDITADA]()

4. Modifica información y da clic en [Actualizar]()

Actualiza Datos()

Actualiza Datos()

Categoria Actualizada()

Muestra la pantalla [Administrador]()

5. Pulsa en el botón [Eliminar]()

Elimina Categoria()

Elimina Categoria()

Categoria Eliminada()

Muestra en la pantalla [Administrador]()

Page 65: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

54

Figura 17. Gestionar Categorías – Curso Alterno. Elaboración Propia

Diagrama de Robustez: Gestionar Categorías

Figura 18. Gestionar Categorías – Curso Normal de Eventos. Elaboración Propia

sd CURSO ALTERNO DE EVENTOS

ADMINISTRADOR,

SECRETARIA Administrador NUEVA

CATEGORIA

Category Category

1. Pulsa el botón [Agregar Categoria]()

Muestra la pantalla [NUEVA CATEGORIA]()

2. No llena el formulario y da clic en

[Confirmar]()Valida Datos()

Muestra Campos Obligatorios()

3. Agrega categoria existente y da clic en [Confirmar]()

Valida Datos()

Valida Datos()

Obtiene Datos()Muestra mensaje "Categoria YA REGISTRADA"()

sd Gestionar Categorías

CURSO NORMAL DE EVENTOS

1. El administrador o secretaria para agregar una

nueva categoría, pulsa el botón [Agregar Categoría].

2. El sistema muestra la pantalla [NUEVA

CATEGORIA].

3. El administrador o secretaria l lena el formulario y

da clic sobre el botón de [Confirmar].

4. El sistema valida el formulario, guarda la

categoría y regresa a la pantalla de [Administrador].

5. El administrador o secretaria para modificar la

categoría, pulsa el botón [Editar].

6. El sistema mostrará la pantalla [CATEGORIA

EDITADA] con la infomación de la categoría

seleccionada.

7. El administrador o secretaria modifica el

formulario y da clic sobre el botón [Actualizar].

8. El sistema actualiza la información de la

categoría y regresa a la pantalla [Administrador].

9. El administrador o secretaria para eliminar una

categoría, pulsa el botón [Eliminar].

10. El sistema muestra un mensaje de confirmación.

11. El administrador o secretaria pulsa en

[Confirmar].

12. El sistema elimina la categoria y regresa a la

pantalla [Administrador].

NUEVA CATEGORÍA

Administrador,

Secretaria

Valida DatosCategory

Guarda Datos

Muestra pantalla

[Administrador]

Administrador

CATEGORIA EDITADA

Actualiza Datos

Elimina Categoria

Llena el formulario y da clic en

[Confirmar]

Modifica el formulario y

da clic en [Actualizar]

Pulsa el botón [Eliminar]

Page 66: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

55

Figura 19. Gestionar Categorías – Curso Alterno de Eventos. Elaboración Propia

6.3.4.4 Gestionar Libros

Pantalla 004: Administrar Libros

Figura 20. Gestionar Libros. Elaboración Propia

Caso de uso 004: Administrar Libros

sd Gestionar Categorías

Administrador,

SecretariaNUEVA CATEGORIA Valida Datos

Muestra Campos

Obligatorios

Muestra Mensaje

"Categoría YA

REGISTRADA"

No llena el formulario y da

clic en [Confirmar]

Agrega el nombre de la categoria y

da clic en [Confirmar]

ui Administrar Libros

Administrador

Usuarios

Libros

Pedidos

Agregar Libro

Titulo Autor Portada Categoría

Editar

Editar

Editar

NUEVO LIBRO

Titulo del Libro*

Autor*

Portada

Categoría*

Confirmar

Cancelar

Inicio

Categorías

Examinar... Ningún archivo seleccionado.

Marcar como prestado

Marcar como prestado

Macar como prestado

ADMINISTRACION

Libros Prestados

Salir

Buscar Libro

Administrador

ADMINISTRACION

Inicio

Usuarios

Categorías

Libros

Pedidos

Continuar si el l ibro se ha prestado

Antonio Jesús

House and cleaning

El libro pertenece a la categoría de

Ciencia

Confirmar Cancelar

«navigate»

«navigate»

«navigate»

Page 67: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

56

Tabla 18. Descripción de caso de uso: Administrar libros.

CASO DE USO: Administrar Libros ACTOR: Administrador, Secretaria

CÓDIGO: UC004 TIPO:

Primario-Sistema

PANTALLAS:

P011, P012, P013

REF. REQUERIMIENTO:

RF-04

RESUMEN: El administrador o secretaria crea, edita, busca y marca como prestado el libro de la biblioteca.

OBJETIVOS: Administrar Libros para la biblioteca del ISTPM.

PRECONDICIONES:

- Que el administrador o secretaria exista en el sistema. - Que la categoría este registrada en el sistema.

POSCONDICIONES:

Que los usuarios pueda visualizar los libros de la biblioteca y estos a su vez los puedan solicitar.

CURSO NORMAL DE EVENTOS

Actor Sistema

1. El administrador o secretaria para agregar un nuevo libro, pulsa el botón [Agregar Libro].

2. El sistema muestra la pantalla [NUEVO LIBRO].

3. El administrador o secretaria llena el formulario y da clic en el botón [Confirmar]

4. El sistema valida el formulario, guarda el libro y regresa a la pantalla [Administrar].

5. El administrador o secretaria para editar un libro, pulsa el botón [Editar].

6. El sistema muestra la pantalla [LIBRO EDITADO] con toda la información del libro.

7. El administrador o secretaria modifica información del formulario y da clic en [Actualizar].

8. El sistema actualiza el libro y muestra la pantalla [Administrador].

9. El administrador o secretaria para marcar como prestado un libro, pulsa en [Marcar como prestado].

10. El sistema muestra un mensaje de confirmación.

11. El administrador o secretaria pulsa en [Confirmar].

12. El sistema marca el libro como prestado y regresa a la pantalla [Administrador].

13. El administrador o secretaria para marcar como devuelto el libro, pulsa en [Marcar como devuelto].

14. El sistema muestra un mensaje de confirmación.

15. El administrador o secretaria pulsa en [Confirmar].

16. El sistema marca el libro como devuelto y regresa a la pantalla [Administrador].

17. El administrador o secretaria para buscar un libro pulsa en [Buscar Libro].

18. El sistema muestra el buscador respectivo para empezar a realizar las búsquedas.

Page 68: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

57

19. El administrador o secretaria ingresa el libro en el buscador y pulsa en el botón de la lupa.

20. El sistema busca el libro y muestra el resultado encontrado.

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACIOS A.1 El administrador o secretaria estando en la pantalla [NUEVO LIBRO] no llena el formulario y da clic en el botón [Confirmar]. A.2 El sistema valida el formulario y muestra los campos obligatorios a llenarse.

Nota: Elaboración Propia.

Page 69: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

58

Diagrama de Secuencia: Administrar Libros

Figura 21. Gestionar Libros – Curso Normal. Elaboración Propia

sd CURSO NORMAL DE EVENTOS

ADMINISTRADOR,

SECRETARIA Administrador NUEVO LIBRO Book BookLIBRO EDITADO

1. Pulsa el botón [Agregar Libro]()

Muestra pantalla [NUEVO LIBRO]()

2. Llena el formulario y da clic en [Confirmar]()

Valida Datos()

Valida Datos()

Guarda Libro()Muestra pantalla [Administrador]()

3. Pulsa el botón [Editar]()

Muestra pantalla [LIBRO EDITADO]()

4. Modifica el formulario y da clic en [Actualizar]()

Actualiza Datos()

Actualiza Datos()

Libro actualizado()Muestra pantalla [Administrador]()5. Pulsa el botón [Marcar

como prestado]()

Muestra Mensaje Confirmación()

6. Pulsa en [Confirmar]()Actualiza Estado()

Actualiza Estado()

Estado actualizado()Muestra en la pantalla [Administrador]()

7. Pulsa en [Marcar como devuelto]()

Muestra Mensaje Confirmación()

8. Pulsa en [Confirmar]()

Actualiza Estado()

Actualiza Estado()

Esatdo Actualizado()Muestra pantalla [Administrador]()

9. Pulsa el botón [Buscar Libro]()

Muestra Buscador()

10. Ingresa el l ibro y da clic en la lupa.()

Busca Libro()Busca Libro()

Obtiene Libro()Muestra resultados encontrados.()

Page 70: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

59

Figura 22. Gestionar Libros – Curso Alterno. Elaboración Propia

Diagrama de Robustez: Administrar Libros

Figura 23. Gestionar Libros – Curso Normal. Elaboración Propia

sd CURSO ALTERNO DE EVENTOS

ADMINISTRADOR,

SECRETARIA Administrador NUEVO LIBRO Book

1. Pulsa el botón [Agregar

Libro]()Muestra pantalla [NUEVO LIBRO]()

2. No llena el formulario y da clic en [Confirmar]()

Valida Datos()

Muestra Campos Obligatorios()

sd Administrar Pagos de Agua

CURSO NORMAL DE EVENTOS

1. El administrador o secretaria para agregar un nuevo

l ibro pulsa el botón [Agregar Libro].

2. El sistema muestra la pantalla [NUEVO LIBRO]

3. El administrador o secretaria l lena el formulario y da

clic sobre el botón de [Confirmar].

4. El sistema valida el formulario, guarda el l ibro y

regresa a la pantalla [Administrador].

5. El administrador o secretaria para editar un libro pulsa

el botón [Editar].

6. El sistema muestra la pantalla [LIBRO EDITADO] con

toda la información del l ibro.

7. El administrador o secretaria modifica información del

formulario y da clic en [Actualizar].

8. El sistema actualiza el l ibro y muestra la pantalla

[Administrador].

9. El administrador o secretaria para marcar como

prestado un libro pulsa en [Marcar como prestado].

10. El sistema muestra un mensaje de confirmación.

11. El administrador o secretaria pulsa en [Confirmar].

12. El sistema marca el l ibro como prestado y regresa a la

pantalla [Administrador].

13. El administrador o secretaria para marcar como

devuelto el l ibro pulsa en [Marcar como devuelto].

14. El sistema muestra un mensaje de confirmación.

15. El administrador o secretaria pulsa en [Confirmar].

16. El sistema marca el l ibro como devuelto y regresa a la

pantalla [Administrador].

17. Al administrador o secretaria para buscar un libro

pulsa en [Buscar Libro].

18. El sistema muestra el buscador respectivo para

empezar a realizar las búsquedas.

19. El administrador o secretaria ingresa el l ibro en el

buscador y pulsa en el botón de la lupa.

20. El sistema busca el l ibro y muestra el resultado

encontrado.

ADMINISTRADOR,

SECRETARIA

NUEVO LIBROValida Datos

Book

Guarda Datos

Administrador

LIBRO EDITADO

Muestra pantalla

[Administrador]

Actualiza Datos

Muestra Mensaje

Confirmación

Busca Libro

Obtiene Libro

Pulsa el botón [Marcar como

prestado]

Llena el formulario y da clic en

[Confirmar]

Modifica información y da clic

en [Actualizar]

Pulsa el botón [Marcar

como devuelto]

Pulsa en [Buscar Libro]

Page 71: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

60

Figura 24. Gestionar Libros – Curso Alterno. Elaboración Propia

6.3.4.5 Gestionar Pedidos

Pantalla 005: Administrar Pedidos

Figura 25. Gestionar Pedido. Elaboración Propia

Caso de uso 005: Administrar Pedidos

Tabla 19. Descripción de caso de uso: Administrar Pedidos.

sd Administrar Pagos de Agua

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACÍOS

A.1 El administrador o secretaria

estando en la pantalla [NUEVIO

LIBRO] no llena el formulario y da clic

en el botón [Confirmar].

A.2 El sistema valida el formulario y

muestra los campos obligatorios a

llenarse.

ADMINISTRADOR,

SECRETARIANUEVO LIBRO Valida Datos Muestra Campos

Obligatorios

No llena el formulario y da clic en

[Confirmar]

ui Administrar Pedidos

Administrador

Usuarios

Libros

Pedidos

Notificar Pedido

Notificar Pedido

Pedido

Editar

NUEVO PEDIDO

Editar

Estudiante*

--------

Fecha de Entrega*

dd/mm/aaaa --:--

Confirmar

Cancelar

Estudiante

Agregar Pedido

Libro*

--------

Inicio

ADMINISTRACION

CategoríasCedula

Pedidos Archivados Buscar Pedido

Libro Autor Fecha_solicitud Fecha_limite_entrega

Archivar

Archivar

Administrador

ADMINISTRACION

Inicio

Usuarios

Categorías

Libros

Pedidos

Desea Archivar el Pedido?

Esta opción es recomendada cuando el

pedido ya se ha cumplido

House & Cleaning

La fecha de entrega del l ibro es 28 de

Agosto de 2021 a las 00:29

Confirmar Cancelar

Salir

Salir

«navigate»

«navigate»

«navigate»

Page 72: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

61

CASO DE USO: Administrar Pedidos ACTOR: Administrador, Secretaria

CÓDIGO: UC005

TIPO:

Primario-Sistema

PANTALLAS:

P014, P015, P016

REF. REQUERIMIENTO:

RF-06

RESUMEN: El administrador o secretaria crea, edita, notifica y archiva los pedidos solicitados a través del sistema.

OBJETIVOS: Administrar pedidos de los usuarios que hayan solicitado por medio del sistema un libro de la biblioteca.

PRECONDICIONES:

Que el administrador o secretaria exista en el sistema. Que el usuario exista en el sistema. Que el libro se encuentre registrado en el sistema.

POSCONDICIONES:

Que los usuarios puedan visualizar los pedidos hechos a través del sistema para la solicitud de libros de la biblioteca.

CURSO NORMAL DE EVENTOS

Actor Sistema

1. El administrador o secretaria para agregar un nuevo pedido dará clic en el botón [Agregar Pedido].

2. El sistema mostrará la pantalla [NUEVO PEDIDO].

3. El administrador o secretaria llena el formulario y da clic en [Confirmar].

4. El sistema valida el formulario, guarda el pedido y regresa a la pantalla [Administrador].

5. El administrador o secretaria para editar un pedido da clic en el botón [Editar].

6. El sistema muestra la pantalla [PEDIDO EDITADO].

7. El administrador o secretaria modifica información del formulario y da clic en el botón [Actualizar].

8. El sistema actualiza la información del pedido y muestra la pantalla [Administrador].

9. El administrador o secretaria para notificar un pedido al usuario da clic en [Notificar Pedido].

10. El sistema abre cualquier app externa de correo y carga la información que respecta al pedido.

11. El administrador o secretaria da clic en el icono de enviar.

12. El sistema envía la notificación del pedido al correo del usuario.

13. El administrador o secretaria para archivar un pedido ya notificado da clic en [Archivar]

14. El sistema muestra un mensaje de confirmación.

15. El administrador o secretaria da clic en [Confirmar].

16. El sistema archiva el pedido y muestra la pantalla [Administrador].

Page 73: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

62

17. El administrador o secretaria para buscar un pedido da clic en [Buscar Pedido]

18. El sistema muestra el buscador respectivo para realizar las búsquedas.

19. El administrador o secretaria ingresa el pedido a buscar y da clic en el botón de la lupa.

20. El sistema busca el pedido y muestra el resultado de la búsqueda.

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACIOS A.1 El administrador o secretaria en la pantalla [NUEVO PEDIDO] no llena el formulario y da clic en el botón [Confirmar]. A.2 El sistema valida el formulario y muestra los campos obligatorios a llenarse.

Nota: Elaboración Propia.

Diagrama de Secuencia: Administrar Pedidos

Figura 26. Gestionar Pedido – Curso Normal. Elaboración Propia

sd CURSO NORMAL DE EVENTOS

ADMINISTRADOR,

SECRETARIA Administrador NUEVO PEDIDO PEDIDO EDITADO Order OrderAPP Correo

1. Pulsa el botón [Agregar Pedido]()

Muestra pantalla [NUEVO PEDIDO]()

2. Llena el formulario y da clic en [Confirmar]()Valida Datos()

Valida Datos()

Guarda Pedido()Muestra la pantalla [Administrador]()

3. Pulsa el botón [Editar]()

Muestra pantalla [PEDIDO EDITADO]()

4. Modifica información del formulario y da clic en [Actualizar]()

Actualiza Datos()

Actualiza Datos()

Pedido Actualizado()Muestra pantalla [Administrador]()

5. Pulsa el botón [Notificar Pedido]()Obtiene Datos()

Obtiene Datos()

Obtiene Datos y abre APP externa()6. Pulsa en el el icono de enviar.()

Muestra pantalla [Administrador]()

7. Da clic en [Buscar Pedido]()

Muestra Buscador()

8. Ingresa el pedidoy da clic en

el botón de la lupa.() Busca Pedido()

Busca Pedido()

Obtiene Pedido()Muestra el resultado en la pantalla [Administrador]()

Page 74: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

63

Figura 27. Gestionar Pedido – Curso Alterno. Elaboración Propia

Diagrama de Robustez: Administrar Pedidos

Figura 28. Gestionar Pedido – Curso Normal. Elaboración Propia

sd CURSO ALTERNO DE EVENTOS

ADMINISTRADOR,

SECRETARIA Administrador NUEVO PEDIDO Order

1. Pulsa el botón [Agregar

Pedido]()Muestra la pantalla [NUEVO PEDIDO]()

2. No llena el formulario y da clic en [Confirmar]()

Valida Datos()

Muestra Campos Obligatorios()

sd Administrar Serv icios de Agua

ADMINISTRADOR,

SECRETARIA

CURSO NORMAL DE EVENTOS

1. El administrador o secretaria para agregar un nuevo

pedido dará clic en el botón [Agregar Pedido].

2. El sistema mostrará la pantalla [NUEVO PEDIDO].

3. El administrador o secretaria llena el formulario y da

clic en [Confirmar].

4. El sistema valida el formulario, guarda el pedido y

regresa a la pantalla [Administrador].

5. El administrador o secretaria para editar un pedido

da clic en el botón [Editar].

6. El sistema muestra la pantalla [PEDIDO EDITADO].

7. El administrador o secretaria modifica información

del formulario y da clic en el botón [Actualizar].

8. El sistema actualiza la informacion del pedido y

muestra la pantalla [Administrador].

9. El administrador o secretaria para notificar un

pedido al usuario da clic en [Notificar Pedido].

10. El sistema abre cualquier app externa de correo y

carga la información que respecta al pedido.

11. El administrador o secretaria da clic en el icono de

enviar.

12. El sistema envia la notificación del pedido al

correo del usuario.

13. El administrador o secretaria para archivar un

pedido ya notificado da clic en [Archivar].

14. El sistema muestra un mensaje de confirmación.

15. El administrador o secretaria da clic en [Confirmar].

16. El sistema archiva el pedido y muestra la pantalla

[Administrador].

17. El administrador o secretaria para buscar un pedido

da clic en [Buscar Pedido].

18. El sistema muestra el buscador respectivo para

realizar las búsquedas.

19. El administrador o secretaria ingresa el pedido a

buscar y da clic en el botón de la lupa.

20. El sistema busca el pedido y muestra el resultado

de la búsqueda.

NUEVO PEDIDO Valida Datos

OrderPEDIDO EDITADO

Muestra pantalla

[Administrador]

Guarda Datos

Actualiza Datos

Abre APP externa de

correo

Administrador

Busca Pedido

Obtiene Pedido

Muestra Mensaje de

Confirmación

Modifica información y da

clic en [Actualizar]

Llena el formulario y da clic

en [Confirmar].

Da clic en [Notificar Pedido]

Da clic en [Archivar]

Da clic en [Buscar Pedido]

Page 75: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

64

Figura 29. Gestionar Pedido – Curso Alterno. Elaboración Propia

6.3.4.6 Consultar Información

Pantalla 007: Consultar Información

Figura 30. Consultar Información. Elaboración Propia

Caso de uso 007: Consultar Información

Tabla 20. Descripción de caso de uso: Consultar Información.

sd Administrar Serv icios de Agua

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACÍOS

A.1 El administrador o secretaria en la

pantalla [NUEVO PEDIDO] no llena el

formulario y da clic en el botón [Confirmar].

A.2 El sistema valida el formulario y

muestra los campos obligatorios a llenarse.ADMINISTRADOR,

SECRETARIA

NUEVO PEDIDO Valida Datos Muestra Campos

Obligatorios

No llena el formulario y da clic

en [Confirmar]

ui Consultar Información

Biblioteca ISTPM

Buscar Libro ...

Inicio Biblioteca Pedidos

Disponible

OBRA: HOUSE & CLEANING

AUTOR: ANTONIO JESUS

Solicitar Solicitar

Disponible

OBRA: CANDIDA

AUTOR: JUAN CARDENAS

Biblioteca ISTPM

Libro:

House & Cleaning

Antonio Jesus

Autor:

Solicitante:

Jose Pardo

dd/mm/aaaa --:--

Fecha para su devolución

Inicio Biblioteca Pedidos

Enviar Solicitud

Cancelar

Biblioteca ISTPM

Inicio Biblioteca Pedidos

Imagen

"Un lector vive mil vidas antes de morir. Aquel que nunca

lee vive solo una"

Cedula: 1950042773

Estudiante: Jose Pardo

Tecnología: TECNOLOGÍA SUPERIOR EN DESARROLLO

DE SOFTWARE

Ciclo: Egresado

Correo Electrónico: [email protected]

Telefono: 962093736

LISTA DE PEDIDOS REALIZADOS

# Libro Autor Estado

«navigate»

«navigate»

Page 76: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

65

CASO DE USO: Consultar Información ACTOR: Usuarios

CÓDIGO: UC006 TIPO: Primario-Sistema

PANTALLAS: P017

REF. REQUERIMIENTO:

RF-07

RESUMEN: Los usuarios solicitan cualquier libro de la biblioteca y a su vez realizan consultas sobre sus pedidos.

OBJETIVOS: Consultar información de sus pedidos y solicitar libros de la biblioteca del ISTPM por medio del sistema.

PRECONDICIONES: Que el usuario exista en el sistema. Que los libros se encuentren registrados en el sistema.

POSCONDICIONES: Que el usuario pueda ver todos sus pedidos hechos en el sistema.

CURSO NORMAL DE EVENTOS

Actor Sistema

1. En la pantalla [Biblioteca ISTPM], los usuarios hacen clic en [Biblioteca].

2. El sistema muestra todos los libros de la biblioteca y a su vez un buscador para realizar las búsquedas de libros en específico.

3. Los usuarios ingresan el nombre del libro y dan clic en el botón de la lupa.

4. El sistema busca el libro y muestra el resultado de la búsqueda.

5. Los usuarios para solicitar un libro dan clic en [Solicitar].

6. El sistema muestra un formulario de solicitud.

7. Los usuarios llenan el formulario y dan clic en [Enviar Solicitud]

8. El sistema envía la solicitud y muestra la pantalla [Administrador].

9. Los usuarios para ver sus pedidos dan clic en [Pedidos].

10. El sistema lista los pedidos del usuario y los muestra en una tabla.

CURSO ALTERNO DE EVENTOS

A. FECHA Y HORA NO INGRESADAS. A.1 Los usuarios estando en el formulario de solicitud no ingresan la fecha y hora para la devolución del libro y dan clic en [Enviar Solicitud]. A.2 El sistema valida el formulario y muestra un mensaje de “Debe colocar la fecha que estima sea necesaria para la devolución del libro”. A.3 Los usuarios dan clic en [Ok].

Nota: Elaboración Propia.

Diagrama de Secuencia: Consultar Información

Page 77: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

66

Figura 31. Consultar Información – Curso Normal. Elaboración Propia

sd Curso Normal de Ev entos

USUARIOS

OrderOrderBiblioteca ISTPM Book Book

1. Da clic en [Biblioteca]()

2. Ingresa el l ibro a buscar y da clic en el botón de

la lupa.()

Buscar Libro()Busca Libro()

Obtiene Libro()

Muestra el resultado de la búsqueda.()

3. Da clic en [Solicitar]()

Muestra Formulario Solicitud()

4. Ingresa Fecha y Hora y da clic en

[Enviar Solicitud]()

Registra Pedido()

Registra Pedido()

Pedido Registrado()Muestra pantalla

[Administrador]()

5. Da clic en [Pedidos]()

Lista Pedidos()

Lista Pedidos()

Obtiene Pedidos()

Muestra pantalla Administrador()

Page 78: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

67

Figura 32. Consultar Información – Curso Alterno. Elaboración Propia

Diagrama se Robustez: Consultar Información

Figura 33. Consultar Información – Curso Normal de Eventos. Elaboración Propia

sd Curso Alterno de Ev entos

USUARIOS

Biblioteca ISTPM Order

1. Da clic en [Solicitar]()

Muestra Formulario Solicitud()

2. No llena el formulario y da clic

en [Enviar Solicitud]()

Valida Datos()

Muestra mensaje de "Debe colocar la fecha que estima sea

necesaria para la devolución del l ibro"()

3. Da clic en [Ok]()

sd Consultar Información

CURSO NORMAL DE EVENTOS

1. En la pantalla [Biblioteca ISTPM], los usuarios

hacen clic en [Biblioteca].

2. El sistema muestra todos los libros de la

biblioteca y a su vez un buscador para realizar las

busquedas de libros en especifico.

3. Los usuarios ingresan el nombre del l ibro y dan

clic en el botón de la lupa.

4. El sistema busca el l ibro y muestra el resutado de

la busqueda.

5. Los usuarios para solicitar un libro dan clic en

[Solicitar].

6. El sistema muestra un formuario de solicitud.

7. Los usuarios llenan el formulario y dan clic en

[Enviar Solicitud].

8. El sistema envia la solicitud y muestra la pantalla

[Administrador].

9. Los usuarios para ver sus pedidos dan clic en

[Pedidos].

10. El sistema lista los pedidos del usuario y los

muestra en una tabla.

USUARIOS

Biblioteca ISTPM

Busca Libro Book

Muestra Resultado

Muestra Formulario

Solicitud

Order Guarda Pedido

Valida Datos

Muestra pantalla

[Biblioteca ISTPM]

Lista Pedidos

Ingresan el nombre del l ibro y dan

clic en el botón de la lupa

Dan clic en [Solicitar]

Llenan el formulario y dan clic en

[Enviar Solicitud]

Dan clic en [Pedidos]

Page 79: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

68

Figura 34. Consultar Información – Curso Alterno de Eventos. Elaboración Propia

6.4 Fase de puesta en producción

Esta última fase se enfocó en asegurar que el software este disponible para

sus usuarios, A continuación, se detalla la actividad:

6.4.1 Implementación

En esta fase se procedió a subir el sistema a dos diferentes servidores web,

para ello se realizaron las siguientes configuraciones:

• Creación de usuarios en el servidor PythonAnyWhere: usuario y

contraseña, estableciendo como administrador al director de la

biblioteca del Instituto Superior Tecnológico Primero de Mayo,

Licenciado Luis Jiménez y como secretario al Teacher Jimmi Celi.

• Subida a el servidor de Netlify: Aquí se procedió a subir el proyecto

frontend del sistema para que sean visualizados por todos los usuarios.

Una vez terminados estos procesos y configuraciones se procedió a subir las

herramientas necesarias para su optimo funcionamiento.

6.4.1.1 Código Fuente Login

A continuación, se detalla el código mas importante de el sistema mismo que

les permite a los usuarios ingresar al sistema y hacer uso de todos los

procesos que este brinda:

sd Consultar Información

CURSO ALTERNO DE EVENTOS

A. FECHA Y HORA NO INGRESADAS.

A.1 Los usuarios estando en el formulario de

solicitud no ingresan la fecha y hora para la

devolución del l ibro y dan clic en [Enviar

Solicitud].

A.2 El sistema valida el formulario y muestra

un mensaje de "Debe colocar la fecha que

estima sea necesaria para la devolución del

l ibro".

A.3 Los usuarios dan clic en [OK].

USUARIOSBiblioteca ISTPM Valida Datos

Muestra mensaje "Debe

colocar la fecha que estima

sea necesaria para la

devolución del l ibro"

No ingresan la fecha y hora y dan

clic en [Enviar Solicitud]

Page 80: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

69

Figura 35. Validación de Inicio de sesión desde el backend, si el usuario esta registrado el

sistema crea un token para que este pueda hacer todas las peticiones que el sistema brinda caso contrario no le permite ingresar. Elaboración Propia

Page 81: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

70

Figura 36. Validación Inicio de sesión desde el frontend, este se encarga de solicitarle al

backend que valide los datos ingresados si son correctos le devuelve el token y toda la información del usuario caso contrario no le permite el ingreso. Elaboración Propia

Nota: El código fuente del Frontend se lo puede encontrar en la siguiente

dirección:

https://github.com/SystemMasterPro/Code_Proyect_Library

Nota: El código fuente del Backend se lo puede encontrar en la siguiente

dirección:

https://github.com/SystemMasterPro/Repo_Biblioteca_PrimeroDeMayo

6.4.1.2 Pruebas y validación de resultados

A continuación, se muestra los resultados basados en los casos de uso del

sistema:

Tabla 21. Pruebas Caso de Uso 001.

Caso de Uso: 001 Ingresar al sistema

Page 82: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

71

Requerimientos Funcionales: RF1

Procedimiento de Prueba

Escenario 1: Ingresar al sistema

Pasos Resultado esperado

del sistema

Cumple

1. Ingresar el

usuario

2. Ingresar la

contraseña

3. Presionar

el botón de

ingresar

para que el

sistema

valide la

información

Ingresar al sistema

tanto personal de la

Institución como

usuarios registrados,

pero claro cada

usuario tiene acceso

a su debido rol.

Si

Resultado Obtenido:

Tabla 22. Pruebas Caso de Uso 002.

Page 83: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

72

Caso de Uso: 002 Gestionar Usuarios

Requerimientos Funcionales: RF2

Procedimiento de Prueba

Escenario 2: Gestionar usuarios

Pasos Resultado esperado

del sistema

Cumple

1. Seleccionar

usuarios

2. Se lista todos los

usuarios

3. Opciones

disponibles,

agregar, editar,

suspender y

buscar

4. El sistema

realizara

satisfactoriament

e cada una de

estas opciones

Agregar, editar,

suspender y buscar

usuarios en el

sistema.

Si

Resultado Obtenido:

Page 84: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

73

Tabla 23. Pruebas Caso de Uso 003.

Caso de Uso: 003 Gestionar Categorias

Requerimientos Funcionales: RF5

Procedimiento de Prueba

Escenario 3: Gestionar Categorias

Pasos Resultado esperado

del sistema

Cumple

1. Seleccionar

categorias

2. Se lista todas las

categorias

3. Opciones

disponibles,

agregar, editar,

eliminar.

4. EL sistema

realizara

satisfactoriamente

cada una de

estas opciones

Agregar, editar y

eliminar categorias

del sistema

Si

Resultado Obtenido:

Tabla 24. Pruebas Caso de Uso 004.

Caso de Uso: 004 Gestionar Libros

Requerimientos Funcionales: RF4

Page 85: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

74

Procedimiento de Prueba

Escenario 4: Gestionar Libros

Pasos Resultado esperado

del sistema

Cumple

1. Seleccionar libros

2. Se lista todos los

libros

3. Opciones

disponibles,

agregar, editar,

buscar, marcar

como prestado

4. EL sistema

realizara

satisfactoriamente

cada una de

estas opciones

Agregar, editar,

buscar y marcar

como prestado los

libros en el sistema

Si

Resultado Obtenido:

Tabla 25. Pruebas Caso de Uso 005.

Caso de Uso: 005 Gestionar Pedidos

Requerimientos Funcionales: RF6

Procedimiento de Prueba

Escenario 5: Gestionar Pedidos

Pasos Resultado esperado

del sistema

Cumple

Page 86: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

75

1. Seleccionar

pedidos

2. Se listan todos los

pedidos

3. Opciones

disponibles,

agregar, editar,

notificar pedido,

archivar pedido,

buscar pedido,

mostrar pedidos

archivados

4. EL sistema

realizara

satisfactoriamente

cada una de

estas opciones

Agregar, editar,

buscar, notificar,

archivar y presentar

pedidos archivados

en el sistema.

Si

Resultado Obtenido:

Tabla 26. Pruebas Caso de Uso 006.

Caso de Uso: 006 Consultar Información

Requerimientos Funcionales: RF7

Procedimiento de Prueba

Escenario 6: Consultar Información

Pasos Resultado esperado

del sistema

Cumple

Page 87: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

76

1. Selecciona

r biblioteca

2. Se listan

todos los

libros

3. Selecciona

el que se

requiera

4. Se agrega

la fecha

que se

estima

adecuada

para su

devolución

5. Presiona el

botón

solicitar

6. Se guarda

el pedido

7. Todos los

pedidos se

muestran

en la

pestaña

pedidos

8. El sistema

marca

como

pedido al

libro que se

solicito

evitando

Listar, agregar

pedidos así como

listar libros que se

encuentren

registrados en el

sistema

Si

Page 88: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

77

que se lo

vuelva a

pedir hasta

que se lo

devuelva

Resultado Obtenido:

6.4.1.3 Interfaces del sistema web

Aquí se presentan las vistas más importantes de la aplicación web:

La Figura 37 muestra la interfaz correspondiente a la autenticación de los

usuarios y validación en el sitio web.

Figura 37. Autenticación en el sistema web. Elaboración Propia

Page 89: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

78

La Figura 38 muestra la interfaz del Inicio del sitio web.

Figura 38. Página principal del sitio web. Elaboración Propia

La Figura 39 muestra el apartado donde se encuentran todos los libros que

están registrados en la biblioteca de la institución.

Figura 39. Pagina donde se muestran todos los libros. Elaboración Propia

La Figura 40 muestra el perfil de usuario y los pedidos que se ha realizado el

usuario hasta el momento.

Page 90: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

79

Figura 40. Pagina encargada de mostrar el perfil y los perfiles del usuario. Elaboración Propia

La Figura 41 muestra el inicio de sesión para acceder al panel de

administración de la aplicación web.

Figura 41. Inicio de sesión para el panel de administración. Elaboración Propia

La Figura 42 muestra el módulo de usuarios registrados en la base de datos

y listos para realizar lo crea conveniente los administradores.

Page 91: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

80

Figura 42. Modulo Usuarios. Elaboración Propia

La Figura 43 muestra el módulo de categorías registradas en la base de datos

hasta el momento.

Figura 43. Modulo Categorias. Elaboración Propia

La Figura 44 muestra el modulo de libros registrados en la base de datos.

Page 92: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

81

Figura 44. Modulo Libros. Elaboración Propia

La Figura 45 muestra el modulo de pedidos que se encuentran registrados en

la base de datos.

Figura 45. Modulo Pedidos. Elaboración Propia

Page 93: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

82

7. CONCLUCIONES

Luego de haber finalizado el proyecto de titulación se presentan las siguientes

conclusiones:

• El análisis de la información recolectada sirvió de base para identificar

las principales herramientas para el desarrollo de la Biblioteca Digital

del Instituto Superior Tecnológico Primero de Mayo, como el lenguaje

de programación Python y JavaScript a utilizar, arquitectura y

almacenamiento como fue PostgreSQL como base de datos, mientras

que para el diseño se utilizó Bootstrap versión 5.0 y Angular Material,

dando como resultado una aplicación dinámica y usable para el

usuario.

• Mediante la entrevista realizada se obtuvo información sobre los

requerimientos de la aplicación web, la misma que conto con cinco

módulos, que tienen la finalidad de ofrecer y dar a conocer cada uno

de los libros de la Biblioteca del Instituto Superior Tecnológico Primero

de Mayo.

• Mediante la aplicación de la metodología XP, en el desarrollo de la

presente propuesta tecnológica permitió tener una mejor comunicación

y organización durante la creación de la Biblioteca del Instituto Superior

Tecnológico Primero de Mayo, el propósito de la aplicación web es

almacenar cada una de los libros y ponerlos a disposición a todo el

estudiantado y así puedan pedirlos siempre y cuando estén disponibles

los mismos, una vez pedido poder pasar a retirarlos a la institución.

• La implementación se la llevo a cabo en los servidores de

PythonAnyWhere y Netlify ya que los servidores de la institución no

estaban disponibles de momento y la implementación en los mismos

los realizara el departamento de TICS.

Page 94: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

83

8. RECOMENDACIONES

Se recomienda que:

• Para el desarrollo de un sistema se debe generar un contrato en el que

se especifiqué las responsabilidades que tendrán el grupo de desarrollo

y el cliente con respecto a la implementación del sistema.

• Lo requerimientos de software deben ser capturados directamente con

el usuario, para ello se pueden utilizar métodos como la entrevista la

encuesta, etc., que ayuden a identificar las necesidades que deben ser

automatizadas a través de un sistema informático.

• Se recomienda tomar este trabajo como guía y ayuda para futuros

proyectos, los cuales pueden estar enfocados en el desarrollo de

bibliotecas digitales.

• Se recomienda utilizar la aplicación web misma que estará disponible

en los servidores de la institución las 24 horas del día.

Page 95: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

84

9. BIBLIOGRAFIA

Bibliografía Aula21. (23 de Abril de 2020). Centro de formacion tecnica para la industria. Obtenido de

Centro de formacion tecnica para la industria: https://www.cursosaula21.com/que-

es-python/

Borges, E. (3 de Enero de 2021). infranetworking. Obtenido de infranetworking:

https://blog.infranetworking.com/tipos-de-servidores-web/

CALVACHE, R. G. (24 de Marzo de 2021). Desafio Hosting. Obtenido de Desafio Hosting:

https://desafiohosting.com/que-es-bootstrap/

Gitter. (16 de Mayo de 2015). DjangoGirls. Obtenido de DjangoGirls:

https://tutorial.djangogirls.org/es/django/

Iñiguez Brito, A. J. (13 de Marzo de 2007). Repositorio Institucional Universidad de Cuenca .

Obtenido de Repositorio Institucional Universidad de Cuenca :

http://dspace.ucuenca.edu.ec/handle/123456789/6288

Lab.org. (15 de Enero de 2021). Software. Obtenido de Software:

https://softwarelab.org/es/lp/mejores-hosting/?cpid=053f1d40-e771-4c75-a8c6-

2237d74570cb&gclid=Cj0KCQiAgomBBhDXARIsAFNyUqPKhuFPMWDmkOc0kaM4Lp

x2ixKrUdR2od5FRvdjXA6NqWnRjZ6Yk2EaAsmpEALw_wcB&campaignid=115979223

90&adgroupid=113065862117&adid=479183898127&key

LEADSFAC. (1 de Diciembre de 2020). Agencia de posicion web. Obtenido de Agencia de

posicion web: https://leadsfac.com/diseno-paginas-web/que-es-html5-y-para-que-

sirve/

Mancero Miranda, E. G. (2 de Agosto de 2018). Repositorio DspaceLa. Obtenido de

Repositorio DspaceLa:

http://www.dspace.espol.edu.ec/xmlui/handle/123456789/42683

Marco. (8 de Agosto de 2018). WebEmpresa. Obtenido de WebEmpresa:

https://www.webempresa.com/hosting/que-es-servidor-web.html

MUÑOZ AZUERO, E. H. (5 de Enero de 2010). Repositorio Universidad de Guayaquil .

Obtenido de Repositorio Universidad de Guayaquil :

http://repositorio.ug.edu.ec/handle/redug/1622

Ochoa Narváez, P. X. (26 de Mayo de 2008). Repositorio Digital Universidad De Las Américas

. Obtenido de Repositorio Digital Universidad De Las Américas :

http://dspace.udla.edu.ec/handle/33000/2131

Ramos, R. (14 de Marzo de 2020). soyrafaramos. Obtenido de soyrafaramos:

https://soyrafaramos.com/que-es-javascript-para-que-sirve/

Rodríguez Jarama, P. A. (25 de Julio de 2008). Repositorio Universidad de Guayaquil .

Obtenido de Repositorio Universidad de Guayaquil :

http://repositorio.ug.edu.ec/handle/redug/7256

Page 96: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

85

Rojas Vivanco, M. X. (14 de Septiembre de 2011). Repositorio Digital - Universidad Nacional

de Loja . Obtenido de Repositorio Digital - Universidad Nacional de Loja :

https://dspace.unl.edu.ec/jspui/handle/123456789/14405

Santos, D. (10 de Febrero de 2021). HubSpot. Obtenido de HubSpot:

https://blog.hubspot.es/marketing/que-es-css

Solares, J. O. (3 de Marzo de 2017). RoSo Consultor. Obtenido de RoSo Consultor:

https://rosoconsultor.wordpress.com/2017/01/31/implementacion-de-extreme-

programming-xp-5a-entrega-de-consideraciones-para-la-implementacion-de-

metodologias-agiles-en-proyectos-de-software/

Tagged. (16 de Septiembre de 2019). QualityDevs. Obtenido de QualityDevs:

https://www.qualitydevs.com/2019/09/16/que-es-angular-y-para-que-sirve/

TioBe. (29 de Enero de 2021). TioBe. Obtenido de TioBe: https://www.tiobe.com/tiobe-

index/

Page 97: DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA …

86

ANEXOS