desarrollo e implementaciÓn de una aplicaciÓn web …

110
DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA LA ADMINISTRACIÓN DE PAGOS DE AGUA DEL BARRIO EL ZARZA - CANTÓN YANTZAZALÍNEA DE INVESTIGACIÓN: ADAPTACIÓN TECNOLÓGICA E INNOVACIÓN SUB-LÍNEA DE INVESTIGACIÓN SISTEMAS DE INFORMACIÓN CARRERA: TECNOLOGÍA SUPERIOR EN DESARROLLO DE SOFTWARE AUTOR: ALEJANDRO CAMACHO LIDIA MARITZA DIRECTOR: ING. YANDRY RAMÍREZ FECHA: 13 de agosto de 2021 YANTZAZA - ZAMORA CHINCHIPE ECUADOR 2021

Upload: others

Post on 03-Jul-2022

1 views

Category:

Documents


0 download

TRANSCRIPT

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

“DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN

WEB PARA LA ADMINISTRACIÓN DE PAGOS DE AGUA DEL

BARRIO EL ZARZA - CANTÓN YANTZAZA”

LÍNEA DE INVESTIGACIÓN:

ADAPTACIÓN TECNOLÓGICA E INNOVACIÓN

SUB-LÍNEA DE INVESTIGACIÓN

SISTEMAS DE INFORMACIÓN

CARRERA:

TECNOLOGÍA SUPERIOR EN DESARROLLO DE SOFTWARE

AUTOR:

ALEJANDRO CAMACHO LIDIA MARITZA

DIRECTOR:

ING. YANDRY RAMÍREZ

FECHA:

13 de agosto de 2021

YANTZAZA - ZAMORA CHINCHIPE – ECUADOR

2021

Proyecto de Tesis previo a la

obtención del título de Tecnóloga

Superior en Desarrollo de

Software

¡Forjando un mejor Futuro!

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

II

CERTIFICACIÓN

Ing. Yandry Ramírez Saritama.

DOCENTE DE LA CARRERA DE TECNOLOGÍA SUPERIOR EN

DESARROLLO DE SOFTWARE DEL INSTITUTO SUPERIOR

TECNOLÓGICO PRIMERO DE MAYO.

CERTIFICA:

Haber asesorado y revisado detenida y minuciosamente durante todo su

desarrollo, el Proyecto de Fin de Carrera titulado: “DESARROLLO E

IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA LA

ADMINISTRACIÓN DE PAGOS DE AGUA DEL BARRIO EL ZARZA -

CANTÓN YANTZAZA”. Realizado por la postulante Alejandro Camacho Lidia

Maritza.

Por lo tanto, autorizo proseguir los trámites legales pertinentes para su

presentación y defensa.

Yantzaza 13 de Agosto de 2021

……………………………

Ing. Yandry Ramírez Saritama.

DIRECTOR

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

III

MIEMBROS DEL TRIBUNAL

………………………………

Ing. Nelly Cueva Reategui

Presidente Del Tribunal

………………………………

Ing. Diego Jhonatan Chamba Saca

Miembro Del Tribunal

………………………………

Ing. Diego Vicente Guamán Jima

Miembro Del Tribunal

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

IV

AUTORÍA

El presente trabajo de investigación titulado: “DESARROLLO E

IMPLEMENTACION DE UNA APLICACIÓN WEB PARA LA

ADMINISTRACIÓN DE PAGOS DE AGUA DEL BARRIO EL ZARZA –

CANTÓN YANTZAZA”. Es absolutamente original, autentico y personal, en

tal virtud el contenido, efectos legales y académicos que se desprenden del

mismo son de exclusiva responsabilidad del autor.

…………………………………………

Lidia Maritza Alejandro Camacho

C.I: 1900768522

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

V

SESIÓN DE DERECHOS

Yo, LIDIA MARITZA ALEJANDRO CAMACHO, con cedula de ciudadanía Nº

1900768522, en calidad de autor del trabajo de grado denominado

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

LA ADMINISTRACIÓN DE PAGOS DE AGUA DEL BARRIO EL ZARZA –

CANTÓN YANTZAZA”, trabajo de investigación elaborado para optar por el

título de Tecnóloga Superior en Desarrollo de Software, manifiesto mi voluntad

de ceder todos mis derechos al Instituto Superior Tecnológico “Primero de

Mayo” para que este haga uso de la investigación de forma libre y sin ninguna

consecuencia legal, en pro al desarrollo de la institución y de la sociedad.

Quedando el Instituto facultado para ejercer plenamente los derechos

cedidos.

…………………………………………

Lidia Maritza Alejandro Camacho

C.I: 1900768522

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

VI

DEDICATORIA

Este trabajo de investigación va dedicado a todas las personas que confiaron

en mí en especial a mi madre y padre quienes me han dado apoyo

motivacional en este proceso de formación académica, a mis hermanos,

amigos e ingenieros de carrera los cuales con su conocimiento impartido en

el aula y adicional fuera de las clases han hecho posible que se pueda

culminar con una meta más y a Dios por darme la vida para que yo pudiera

ser posible este sueño que como cualquier otro aunque tuvo obstáculos se los

pudo sobrellevar.

Lidia Maritza Alejandro Camacho

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

VII

AGRADECIMIENTO

En primer lugar, a Dios por darme la vida y llenarla de muchas bendiciones.

A mis padres, familiares y amigos, por todo su amor, comprensión y apoyo

incondicional.

A mis ingenieros de carrera, quienes contribuyeron a este proceso de

formación académica y que supieron brindar todo su conocimiento para ello.

A mi director de tesis, Ing. Yandry Ramírez, quien con sus consejos supo guiar

y motivar durante todo el desarrollo del trabajo de investigación.

A la Junta Directiva de Agua del Barrio El Zarza, la cual abrió sus puertas e

hizo posible la elaboración de este trabajo de investigación.

Lidia Maritza Alejandro Camacho

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

VIII

ÍNDICE DE CONTENIDOS

CERTIFICACIÓN…………………………………………………………………...II

MIEMBROS DEL TRIBUNAL ……...…………………………………………….III

AUTORÍA .................................................................................................... IV

SESIÓN DE DERECHOS ............................................................................. V

DEDICATORIA ............................................................................................ VI

AGRADECIMIENTO ................................................................................... VII

ÍNDICE DE CONTENIDOS ........................................................................ VIII

ÍNDICE DE TABLAS .................................................................................... X

ÍNDICE DE FIGURAS ................................................................................. 11

1. TÍTULO ............................................................................................. 13

2. RESUMEN ........................................................................................ 14

3. INTRODUCCIÓN .............................................................................. 17

4. REVISIÓN DE LITERATURA ........................................................... 18

4.1 LENGUAJE UNIFICADO DE MODELADO (UML)............................ 18

4.1.1 Enterprise Architect ........................................................................... 18

4.2 LENGUAJES DE PROGRAMACIÓN................................................ 18

4.2.1 Python ............................................................................................... 19

4.3 BASES DE DATOS .......................................................................... 20

4.3.1 PostgreSQL....................................................................................... 20

4.4 HTML ................................................................................................ 21

4.5 CSS................................................................................................... 22

4.6 BOOTSTRAP .................................................................................... 23

4.7 DJANGO ........................................................................................... 23

4.8 SERVIDOR ....................................................................................... 25

4.8.1 Nginx ................................................................................................. 25

4.9 HOSTING .......................................................................................... 26

4.9.1 Hostinger ........................................................................................... 28

4.10 DOMINIO .......................................................................................... 29

5. MATERIALES Y MÉTODOS ............................................................. 31

5.1 MATERIALES ................................................................................... 31

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

IX

5.2 MÉTODOS ........................................................................................ 32

5.2.1 Método Inductivo ............................................................................... 32

5.2.2 Método Deductivo ............................................................................. 33

5.2.3 Método Descriptivo............................................................................ 33

5.3 TÉCNICAS ........................................................................................ 33

5.3.1 Entrevista y encuesta ........................................................................ 33

5.3.2 Observación Directa .......................................................................... 33

5.4 METODOLOGÍA ICONIX .................................................................. 33

6. RESULTADOS ................................................................................. 36

6.1.1 Identificación de actores .................................................................... 42

6.1.2 Requerimientos Funcionales ............................................................. 42

6.1.3 Requerimientos No Funcionales........................................................ 44

6.1.4 Identificación de Casos de Uso ......................................................... 44

6.1.5 Diagrama de Casos de Uso .............................................................. 46

6.1.6 Modelo de dominio ............................................................................ 47

6.1.7 Prototipado de pantalla y descripción de casos de uso ..................... 47

6.1.8 Modelo de clases .............................................................................. 70

7. CONCLUSIONES ............................................................................. 79

8. RECOMENDACIONES ..................................................................... 80

9. BIBLIOGRAFÍA ................................................................................ 81

GLOSARIO ................................................................................................. 83

ANEXOS ..................................................................................................... 84

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

X

ÍNDICE DE TABLAS

Tabla 1. Tabla comparativa de lenguajes de programación......................... 20

Tabla 2. Tabla comparativa de las bases de datos. ..................................... 21

Tabla 3. Tabla comparativa de los servidores web ...................................... 26

Tabla 4. Tabla comparativa de los hostings................................................. 29

Tabla 5. Tabla de recursos humanos .......................................................... 32

Tabla 6. Tabla de recursos hardware .......................................................... 32

Tabla 7. Tabla de recursos software ........................................................... 32

Tabla 8. Tabla de recursos materiales......................................................... 33

Tabla 9. Tabla de recursos varios ............................................................... 33

Tabla 10. Tabla de recursos totales ............................................................ 33

Tabla 11. Identificación de autores. ............................................................. 43

Tabla 12. Tabla de requerimientos funcionales. .......................................... 44

Tabla 13. Tabla de requerimientos no funcionales. ..................................... 45

Tabla 14. Tabla de identificación de casos de uso. ..................................... 45

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

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

Tabla 17. Descripción de caso de uso: Gestionar Tesoreros. ...................... 57

Tabla 18. Descripción de caso de uso: Administrar Pagos de Agua. ........... 61

Tabla 19. Descripción de caso de uso: Administrar Servicios de Agua. ...... 65

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

Tabla 21. Requerimientos cubiertos por la aplicación. ................................. 78

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

XI

ÍNDICE DE FIGURAS

Figura 1. Resumen de la Encuesta – Pregunta 1. ....................................... 36

Figura 2. Resumen de la Encuesta – Pregunta 2. ....................................... 37

Figura 3. Resumen de la Encuesta – Pregunta 3. ....................................... 37

Figura 4. Resumen de la Encuesta – Pregunta 4. ....................................... 38

Figura 5. Resumen de la Encuesta – Pregunta 5. ....................................... 38

Figura 6. Resumen de la Encuesta – Pregunta 6. ....................................... 39

Figura 7. Resumen de la Encuesta – Pregunta 7. ....................................... 39

Figura 8. Resumen de la Encuesta – Pregunta 8. ....................................... 40

Figura 9. Resumen de la Encuesta – Pregunta 9. ....................................... 40

Figura 10. Resumen de la Encuesta – Pregunta 10. ................................... 41

Figura 11. Elaboración de diagramas y pantallas en Enterprise Architect ... 45

Figura 12. Modelo de casos de uso ............................................................ 46

Figura 13. Modelo de dominio.. ................................................................... 47

Figura 14. Ingreso al sistema.. .................................................................... 47

Figura 15. Diagrama de secuencia: Ingresar al Sistema – Curso Normal ... 49

Figura 16. Diagrama de secuencia: Ingresar al Sistema – Curso Alterno .... 49

Figura 17. Curso Normal de Eventos: Ingresar al Sistema .......................... 50

Figura 18. Curso Alterno de Eventos: Ingresar al Sistema .......................... 50

Figura 19. Gestionar Usuarios .................................................................... 51

Figura 20. Diagrama de secuencia: Gestionar Usuarios – Curso Normal .... 53

Figura 21. Diagrama de secuencia: Gestionar Usuarios – Curso Alterno .... 54

Figura 22. Curso Normal de Eventos: Gestionar Usuarios .......................... 54

Figura 23. Curso Alterno de Eventos: Gestionar Usuarios. ......................... 55

Figura 24. Gestionar Tesoreros. ................................................................. 55

Figura 25. Diagrama de secuencia: Gestionar Tesoreros – Curso Normal. . 57

Figura 26. Diagrama de secuencia: Gestionar Tesoreros – Curso Alterno. . 57

Figura 27. Curso normal de eventos: Gestionar Tesoreros ......................... 58

Figura 28. Curso alterno de eventos: Gestionar Tesoreros ......................... 58

Figura 29. Administrar Pagos de Agua. ....................................................... 59

Figura 30. Diagrama de secuencia: Administrar Pagos de Agua C.N. ........ 61

Figura 31. Diagrama de secuencia: Administrar Pagos de Agua C.A. ......... 61

Figura 32. Curso normal de eventos: Administrar Pagos de Agua .............. 62

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

XII

Figura 33. Curso alterno de eventos: Administrar Pagos de Agua .............. 62

Figura 34. Administrar Servicios de Agua ................................................... 63

Figura 35. Diagrama de secuencia: Administrar Servicios de Agua C.N ..... 65

Figura 36. Diagrama de secuencia: Administrar Servicios de Agua C.A ..... 66

Figura 37. Curso normal de eventos: Administrar Servicios de Agua .......... 66

Figura 38. Curso alterno de eventos: Administrar Servicios de Agua. ......... 67

Figura 39. Consultar Información ................................................................ 67

Figura 40. Diagrama de secuencia: Consultar Información C.N .................. 69

Figura 41. Curso normal de eventos: Consultar Información ....................... 69

Figura 42. Modelo de Clases ...................................................................... 70

Figura 43. Editor de Visual Studio Code ..................................................... 71

Figura 44. Añadiendo las clases del modelo de dominio a models.py. ........ 72

Figura 45. Configurando el archivo views.py. .............................................. 72

Figura 46. Configurando el template de login. ............................................. 73

Figura 47. Mostrando el login de la aplicación ............................................ 74

Figura 48. Mostrando la lista de usuarios .................................................... 74

Figura 49. Mostrando la lista de tesoreros .................................................. 75

Figura 50. Mostrando la lista de los pagos de agua. ................................... 75

Figura 51. Mostrando la lista de los servicios de agua de los usuarios ....... 76

Figura 52. Mostrando la lista de pagos de agua del usuario logueado ........ 76

Figura 53. Prueba de carga de inisiar sesión .............................................. 77

Figura 54. Prueba de carga de crear usuario .............................................. 77

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

13

1. TÍTULO

“DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN

WEB PARA LA ADMINISTRACIÓN DE PAGOS DE AGUA DEL

BARRIO EL ZARZA - CANTÓN YANTZAZA”

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

14

2. RESUMEN

El presente proyecto de tesis consiste en desarrollar e implementar una

aplicación web para la Junta Directiva de Agua del Barrio El Zarza- Cantón

Yantzaza, permitiendo el asesoramiento de los pagos de agua a sus usuarios

que ingresan al sistema para verificar sus pagos de agua y a su vez que el

tesorero pueda enviarles o imprimirles el recibo de agua, registrar servicios de

agua como también el crearles las respectivas cuentas de usuario para que

puedan acceder al sistema, resolviendo asi necesidades de los usuarios y de

la Junta Directiva ayudando a optimizar su trabajo y tiempo.

El software a más de ser una aplicación web de fácil manejo y optimizar los

procesos que se llevaban en la Junta Directiva de Agua del Barrio El Zarza,

está haciendo que se reduzca el uso de papel en los recibos que se les

entregaban a los usuarios, un punto clave e importante de los sistemas que

se están desarrollando en la actualidad por los distintos programadores que

toman en cuenta este factor. El afán de hacer de este mundo un lugar más

tecnológico para la sociedad hace que día por día sigan apareciendo nuevas

tecnologías cada vez más mejores que otras.

Razón por la cual para la realización de la tesis es necesario apoyarse en una

metodología para guiarse de mejor manera en la construcción del software.

ICONIX que se encuentra entre RUP (Rational Unified Process) y XP

(eXtreme Programming), ofrece un uso dinámico del UML sin tener que hacer

uso de todos los diagramas UML podemos diseñar el software que servirá

como base para la programación. Las herramientas tecnológicas utilizadas en

el desarrollo son: Enterprise Architect para el modelado, Bootstrap para el

FrontEnd, Postgres para la base de datos, Nginx para el servidor, Hostinger

para el hosting, Python como lenguaje de programación y Django como

Framework.

Palabras Clave:

aplicación web, software, tecnologías, metodología, herramientas

tecnológicas.

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

15

ABSTRACT

This thesis project consists of developing and implementing a web application

for the “Junta Directiva del Agua” of Barrio El Zarza - Canton Yantzaza,

allowing the advice of water payments to users who enter the system to verify

their water payments and in turn that the treasurer can send or print the water

bill, register water services as well as creating the respective user accounts so

they can access the system, thus solving the needs of users and the Board of

Directors helping to optimize their work and time.

The software, in addition to being an easy to use web application and optimize

the processes that were carried in the “Junta Directiva de Agua” of El Zarza,

is reducing the use of paper in the receipts that were given to users, a key and

important point of the systems that are being developed today by the various

programmers who take into account this factor. The eagerness to make this

world a more technological place for the society makes that day by day new

technologies keep appearing, each time better than others.

Reason for which for the realization of the thesis it is necessary to rely on a

methodology to be guided in a better way in the construction of the software.

ICONIX, which is between RUP (Rational Unified Process) and XP (eXtreme

Programming), offers a dynamic use of the UML without having to make use

of all the UML diagrams we can design the software that will serve as a basis

for programming. The technological tools used in the development are:

Enterprise Architect for modeling, Bootstrap for the FrontEnd, Postgres for the

database, Nginx for the server, Hostinger for hosting, Python as programming

language and Django as Framework.

Keywords:

web application, software, technologies, methodology, technological tools.

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

16

Jimmi Fabricio Celi Díaz

LICENCIADO EN CIENCIAS DE LA EDUCACIÓN MENCIÓN IDIOMA

INGLÉS

Registro Profesional SENESCYT N°: 1008-20216-1695863

CERTIFICA

Que, en la ciudad de Yantzaza, a los 24 días del mes de agosto del dos mil

veintiuno, se ha procedido a realizar la revisión del documento RESUMEN,

perteneciente a la señorita, LIDIA MARITZA ALEJANDRO CAMACHO, con

número de cedula: 1900768522. Documento que consta de 320 palabras en

español y 300 palabras en idioma ingles y que está traducido en su integridad,

manteniendo el mismo mensaje de su originalidad en español.

Es todo lo que puedo certificar en honor a la verdad.

Yantzaza 27 de agosto del 2021

……………………………………….

Lic. Jimmi Fabricio Celi Díaz

LICENCIADO EN IDIOMA INGLÉS

Cedula: 1104797715

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

17

3. INTRODUCCIÓN

En el presente proyecto de investigación de la carrera Tecnología Superior en

Desarrollo de Software, se puso en práctica los conocimientos adquiridos en

el transcurso de la formación académica para lo cual se desarrolló e

implementó un proyecto construido con las tecnologías de Python con su

framework Django para luego alojarlo en un VPS contratado y a la vez mostrar

la app web con su dominio respectivo.

Para muchos desarrolladores de software que están en proceso de

aprendizaje, es importante conocer las distintas tecnologías que se pueden

usar para el desarrollo de una app ya sea web o móvil y sobre todo el llevarlo

a modo producción para lo cual es necesario conocer los distintos servidores

VPS que nos ofrecen alojamientos web y dominios en donde estará

funcionando la app una vez que se realice la respectiva compra y

configuración del mismo.

También es importante trabajar de la mano con una metodología que permita

llevar los procesos de forma organizada durante todo el desarrollo del

software, que se adapte a las necesidades del sistema y que sea apto para el

desarrollo de proyectos a corto, mediano o largo plazo. ICONIX al ser una

metodología de corto – mediano plazo es ideal para el desarrollo del presente

proyecto al contar con 4 fases que nos permite llevar todo el desarrollo de la

aplicación, estructurando de una forma clara y ordenada.

Siendo así que en la revisión de literatura se dará a conocer los siguientes

temas: lenguaje de programación Python, framework Django, Enterprise

Architect, base de datos PostgreSQL, HTML, CSS, Bootstrap, Servidor Nginx,

Hosting Hostinger y el dominio. Todo esto con la finalidad de conocer más a

fondo las tecnologías con las que se puede desarrollar una app web, como

poner en modo producción a dicha aplicación y que se encuentre accesible

por medio de un dominio.

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

18

4. REVISIÓN DE LITERATURA

4.1 LENGUAJE UNIFICADO DE MODELADO (UML)

UML es un estandar internacional adoptado por muchas organizaciones y

empresas para la creación de diagramas, gráficos y documentos relacionados

con el desarrollo de software (programas informáticos). (Krall, 2019) refiere a

esto como una herramienta propia de personas que tienen conocimientos

relativamente avanzados de programación y es frecuentemente usada por

analistas funcionales y analistas programadores. Por lo tanto, si estas

realizando las primeras etapas de la programación, es recomendable que te

olvides de UML hasta que tenga un conocimiento mínimo de las condiciones,

los bucles y como utilizar sus conocimientos de programación, pero eso no

quiere decir que no lo pueda usar cualquiera ya que UML también se lo puede

usar para crear diagramas y documentos para procesos que no están

relacionados con la computadora.

4.1.1 Enterprise Architect

Es una plataforma colaborativa de modelado, diseño y gestión basada en UML

2.5 y estándares relacionados. (Sparx Systems, 2021) refiere a Enterprise

Architect como ágil, intuitiva y extensible, con poderosas características para

dominios específicos totalmente integradas a una fracción del costo de

muchos competidores. Una solución para toda la empresa que permite

visualizar, analizar, modelar, probar y mantener un amplio rango de sistemas,

software, procesos y arquitecturas. Por lo tanto, Enterprise Architect es un

conjunto de herramientas escalable y basado en estándares, herramienta que

puede usar para su próximo proyecto de desarrollo.

4.2 LENGUAJES DE PROGRAMACIÓN

Un lenguaje de programación es un lenguaje formal que permite a los

programadores escribir un conjunto de secuencias, acciones continuas, datos

y algoritmos a través de un conjunto de instrucciones para escribir programas

que controlan el comportamiento físico y la lógica de una máquina. (Rock

Content, 2019) refiere a esto como un conjunto de símbolos y códigos usados

para orientar la programación de estructuras en el desarrollo web. Por lo tanto,

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

19

este lenguaje permite a programadores y máquinas comunicarse y determinar

con precisión aspectos como: ¿Con qué datos trabaja un software en

particular?, ¿Cómo almacena o envía esos datos? y si el software realiza las

acciones en una variedad de situaciones.

Tabla 1. Tabla comparativa de lenguajes de programación

TABLA COMPARATIVA DE LENGUAJES DE PROGRAMACIÓN

Lenguajes de programación

Registros: 16 Nro. De Tabla: 1

Detalles Java Python JavaScript

Utilizado para crear

Aplicaciones

Android, páginas

web grandes

Frameworks

Scripting

Aplicaciones web

Páginas web dinámicas

Ventajas Máquina virtual de

Java

Robusto

Seguro

Multihilo de alto

rendimiento

Fácil de leer

Fácil de aprender

Velocidad

Simplicidad

Versatilidad

Carga del

servidor

Desventajas Reglas estrictas

reducen flexibilidad

Utiliza más

memoria que C++

Más lento que los demás

El mal uso de identación

puede causar problemas

ocasionales

Seguridad

Confianza en

el usuario

Total de datos: 16

Nota: Elaboración Propia

El lenguaje de programación que se va a usar será Python.

4.2.1 Python

Python es un lenguaje de programación interpretado y su filosofía enfatiza la

legibilidad del código. (Belido, 2021) refiere a esto como un lenguaje de

programación de alto nivel que consiste en una sintaxis muy sencilla de

comprender. Además, su lenguaje es dinámico, multiplataforma, libre y de

código abierto y es orientado a objetos por lo que es ideal para desarrollar

aplicaciones web. Python se ha convertido en uno de los lenguajes de origen

usado por programadores que se enseñan en escuelas y universidades de

todo el mundo. Entre otras de sus características está el automatizar procesos

y realizar tareas en entornos de cliente-servidor.

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

20

4.3 BASES DE DATOS

Una base de datos es una colección organizada de información o datos

estructurados, generalmente almacenados en forma electrónica en un sistema

informático. (Peiró R. , 2021) menciona que una base de datos hace referencia

al conjunto de datos o informaciones determinadas que se pueden consultar

de manera ágil, y segmentando las características que se quieran destacar

para concretar más la información que se pretende revisar.

En la que nos da un ejemplo, que si tenemos una clínica veterinaria tendremos

una base de datos de todos los clientes, en la que se pueden incluir campos

como el nombre del animal, su historia médica, su número de teléfono,

calendario de vacunación y datos de gran relevancia. De tal forma que cuando

se quiera consultar cualquier aspecto concreto, se podrá seleccionar el campo

y obtener una información inmediata sobre ello. Es por eso que cuando se

habla de bases de datos en el contexto de las computadoras, debe tenerse

en cuenta que la información es un programa o archivo electrónico organizado

y estructurado en un dominio particular útil para el usuario.

Tabla 2. Tabla comparativa de las bases de datos.

TABLA COMPARATIVA DE BASES DE DATOS

Bases de Datos

Registros: 32 Nro. De Tabla: 2

Características MySQL PostgreSQL SQL Server

Grandes capacidades de memoria X X

Es orientado a objetos X X X

Funcionan en diferentes plataformas X

Permite restaurar nuestra base de datos a cualquier punto en el tiempo

X

Permite trabajar en modo cliente-servidor

X

Tiene texto de largo ilimitado X

Tiene licencia gratis X X

Total de datos: 32

Nota: Elaboración Propia.

La Base de Datos a usarse en este proyecto de tesis es PostgreSQL.

4.3.1 PostgreSQL

PostgreSQL es un sistema gestor de bases de datos relacional y orientado a

objetos. (Borges, 2019) menciona que PostgreSQL es un sistema de código

abierto de administración de base de datos del tipo relacional, aunque también

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

21

es posible ejecutar consultas que sean no relacionales. En este sistema, las

consultas relacionales se basan en SQL, mientras que las no relacionales

hacen uso de JSON.

(reicek, 2015) hace referencia a que Michael Stonebraker inicio el proyecto

bajo el nombre Post Ingres a mediados de los 80’s con la idea de solucionar

problemas existentes en las bases de datos en esa época. MySQL fue por

mucho tiempo el motor más popular; pero hoy es propiedad de Oracle y esto

limita su evolución.

También nos dice que en Postgres no se requiere usar bloqueos de lectura al

realizar una transacción lo que nos brinda una mayor escalabilidad, aporta

mucha flexibilidad a nuestros proyectos ya que nos permite definir funciones

personalizadas por medio de varios lenguajes (pgSQL, Tcl, Perl, Python, PHP,

Ruby, Java) y está disponible para muchas plataformas.

Deduciendo lo antes mencionado por los autores, PostgreSQL es actualmente

reconocido como uno de los sistemas de gestión de bases de datos

relacionales más potentes del mercado al ser de fácil acceso, multiplataforma

y que se puede utilizar con casi cualquier sistema operativo actualmente que

este en uso sin afectar el rendimiento.

4.4 HTML

HTML es considerado un estandar web oficial por W3C (Consorcio World

Wide Web). (B., 2021) hace mención que el lenguaje de marcado de hipertexto

(HTML) es un lenguaje informático que forma parte de la mayoría de las

páginas web y aplicaciones en línea. Un hipertexto es un texto que se utiliza

para enlazar con otros textos, mientras que un lenguaje de marcado es una

serie de marcas que indican a los servidores web la estructura y el estilo de

un documento.

El HTML no es considerado un lenguaje de programación, ya que no puede

crear funcionalidades dinámicas. En su lugar, con HTML, los usuarios web

pueden crear y estructurar secciones, párrafos y enlaces mediante elementos,

etiquetas y atributos.

Estos son algunos de los usos más comunes de HTML:

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

22

Desarrollo web: Los desarrolladores utilizan el código HTML para diseñar la

forma en que un navegador muestra los elementos de la página web, como el

texto, los hipervínculos y los archivos multimedia.

Navegación por Internet: Los visitantes pueden navegar fácilmente y seguir

enlaces entre páginas y sitios web relacionados, ya que el HTML se utiliza en

gran medida para incrustar hipervínculos.

Documentación web: HTML permite organizar y dar formato a los

documentos, de forma similar a Microsoft Word.

Por lo tanto, HTML es el lenguaje de marcado líder en Internet. Cada página

HTML tiene un conjunto de elementos que crean la estructura del contenido

de una página web o aplicación. También es un lenguaje muy popular para

principiantes y se usa principalmente en sitios web estáticos, para que HTML

funcione mejor es necesario combinar CSS para el estilo y JavaScript para la

funcionalidad.

4.5 CSS

Hojas de estilo en cascada (CSS), simplemente aplica estilos (colores, formas,

márgenes, etc.) a uno o más documentos HTML o páginas webs el cual se

basa en un concepto muy poderoso que es el de recolectar. (Manz) menciona

que se le denomina estilos en cascada porque se aplican de arriba a abajo

(siguiendo un patrón denominado herencia) y en el caso de existir

ambigüedad, se siguen una serie de normas para resolverla.

La idea de CSS es la de utilizar el concepto de separación de presentación y

contenido, intentando que los documentos HTML incluyan sólo información y

datos, relativos al significado de la información a transmitir (el contenido), y

todos los aspectos relacionados con el estilo (diseño, colores, formas, etc.) se

encuentren en un documento CSS independiente (la presentación).

De esta forma, se puede unificar todo lo relativo al diseño visual en un solo

documento CSS, y con ello, varias ventajas:

Si necesitamos hacer modificaciones visuales lo hacemos en un sólo lugar.

No necesitamos editar todo el HTML en cuestión por separado.

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

23

Se reduce la duplicación de estilos en diferentes lugares, por lo que es más

fácil de organizar y hacer cambios. Además, al final la información a

transmitir es considerablemente menor (las páginas se descargan más

rápido).

Es más fácil crear versiones diferentes de presentación para otros tipos de

dispositivos: tablets, smartphones o dispositivos móviles, etc.

Por lo tanto, las páginas web son en realidad documentos de texto. Este

documento describe el código HTML para crear contenido web. Por otro lado,

está el código CSS que se lo puede usar con código HTML para proporcionar

la forma, el color, la posición de la página, entre otras características visuales.

4.6 BOOTSTRAP

Bootstrap es un conjunto de herramientas de código abierto para el desarrollo

web receptivo utilizando HTML, CSS y JavaScript. (ARIMETRICS) menciona

que Bootstrap es un framework CSS de código abierto que favorece el

desarrollo web de un modo más sencillo y rápido. Incluye plantillas de diseño

basadas en HTML y CSS con la que es posible modificar tipografías,

formularios, botones, tablas, navegaciones, menús desplegables, etc.

También existe la posibilidad de utilizar extensiones de Javascript adicionales.

Nos da a conocer que fue desarrollado inicialmente por Twitter en 2011 y que

este permite crear interfaces de usuario limpias y compatibles con todo tipo

de dispositivos. Entre las ventajas que tiene Bootstrap es que favorece el

design responsive, el cual se utiliza para mejorar la experiencia de los usuarios

en el sitio web y en consecuencia el posicionamiento.

Entonces se puede decir que Bootstrap es una de las mejores herramientas

que se puede utilizar para diseñar su sitio web. Por supuesto, siempre puede

crear todo desde cero, pero Bootstrap puede ahorrarle mucho tiempo en

algunas tareas (experiencia) y tiene una excelente comunidad que le da

mantenimiento.

4.7 DJANGO

Cada lenguaje de programación tiene un framework determinado. Para

Python, es las utilizado para desarrollo web es Django que se diseñó

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

24

originalmente para desarrollar sitios web de noticias, aunque también se lo

puede usar para crear aplicaciones web con un peso considerable en lo que

a posterior requiera añadir extensiones o modificaciones en su código.

(Camino Bueno, 2018) menciona que Django es un framework web diseñado

para realizar aplicaciones de cualquier complejidad en unos tiempos muy

razonables. Está escrito en Python y tiene una comunidad muy amplia, que

está en continuo crecimiento.

Los motivos principales para usar Django son:

Es muy rápido: Si tenéis una startup, tenéis prisa por terminar vuestro

proyecto o, simplemente, queréis reducir costes, con Django podéis construir

una aplicación muy buena en poco tiempo.

Viene bien cargado: Cualquier cosa que necesitéis realizar, ya estará

implementada, sólo hay que adaptarla a vuestras necesidades. Ya sea porque

hay módulos de la comunidad, por cualquier paquete Python que encontréis

o las propias aplicaciones que Django trae, que son muy útiles.

Es bastante seguro: Podemos estar tranquilos con Django, ya que

implementa por defecto algunas medidas de seguridad, las más clásicas, para

que no haya SQL Injection, no haya Cross site request forgery (CSRF) o no

haya Clickjacking por JavaScript. Django se encarga de manejar todo esto de

una manera realmente sencilla.

Es muy escalable: Podemos pasar desde muy poco a una aplicación enorme

perfectamente, una aplicación que sea modular, que funcione rápido y sea

estable.

Es increíblemente versátil: Es cierto que en un principio Django comienza

siendo un Framework para almacenar noticias por sitios de prensa, blogs y

este estilo de webs, pero con el tiempo ha ganado tanta popularidad que se

puede usar para el propósito que queráis.

Por consiguiente, Django es uno de los frameworks de Python más populares

y ofrece grandes beneficios a los desarrolladores que desean usarlo. Los

frameworks son solo recursos para construir aplicaciones y deben usarse de

acuerdo a las necesidades de cada proyecto.

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

25

4.8 SERVIDOR

Un servidor es un dispositivo virtual que almacena datos en una página web y

proporciona el espacio y la estructura para administrar la página. (de Souza,

2019) menciona que un servidor web (server) es un ordenador de gran

potencia que se encarga de “prestar el servicio” de transmitir la información

pedida por sus clientes (otros ordenadores, dispositivos móviles, impresoras,

personas, etc.)

Los servidores web (web server) son un componente de los servidores que

tienen como principal función almacenar, en web hosting, todos los archivos

propios de una página web (imágenes, textos, videos, etc.) y transmitirlos a

los usuarios a través de los navegadores mediante el protocolo HTTP

(Hipertext Transfer Protocol). La comunicación entre un servidor y sus clientes

se basa en HTTP, es decir, en el protocolo de transferencia de hipertexto o en

su variante codificada HTTPS.

Los servidores web le permiten no solo publicar su sitio web en Internet, sino

también entregar contenido a sus lectores. Saber cuál es mejor para ti y tus

lectores es fundamental para que el host que elijas realice su función

correctamente.

Tabla 3. Tabla comparativa de los servidores web

TABLA COMPARATIVA DE SERVIDORES WEB

Servidores Web

Registros: 28 Nro. De Tabla: 3

Características GlassFish Apache Nginx

Tiene código abierto X X X

Fácil configuración X X X

Multiplataforma X X X

Es gratuito X X X

Es de alto rendimiento X X

Seguridad X X X

Total de datos: 28

Nota: Elaboración Propia.

El servidor web a usarse en el proyecto es Nginx.

4.8.1 Nginx

Es un servidor web de código abierto y se ha utilizado como proxy inverso,

caché HTTP y equilibrador de carga desde su primer éxito como servidor web.

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

26

(Kinsta Inc., 2021) menciona que Nginx está diseñado para ofrecer un bajo

uso de memoria y alta concurrencia. En lugar de crear nuevos procesos para

cada solicitud web, Nginx usa un enfoque asincrónico basado en eventos

donde las solicitudes se manejan en un solo hilo.

Con Nginx, un proceso maestro puede controlar múltiples procesos de trabajo.

El proceso maestro mantiene los procesos de trabajo, y son estos lo que

hacen el procesamiento real.

Algunas características comunes que se ven en Nginx incluyen:

Proxy inverso con caché

IPv6

Balanceo de carga

Soporte FastCGI con almacenamiento en caché

Websockets

Manejo de archivos estáticos, archivos de índice y auto indexación

TLS / SSL con SIN

NGINX es un servidor web que funciona como proxy de correo, proxy inverso

y equilibrador de carga. La arquitectura del software es asincrónica y

controlada por eventos. Esto le permite manejar múltiples solicitudes al mismo

tiempo. NGINX es altamente escalable, lo que quiere decir que los servicios

de NGINX aumentan a la par con el tráfico de clientes.

4.9 HOSTING

El alojamiento web es el espacio donde se almacena un sitio web para que

cualquiera pueda explorarlo en Internet. (Ruben, 2021) menciona que hosting

web se refiere al «espacio» donde se mantiene un sitio web, es decir, que un

hosting sirve para alojar una web y que todo el mundo pueda verla en Internet

a través del dominio que tenga.

De esta forma, cualquiera que meta el dominio en su navegador, podrá ver la

web que hay alojada en su hosting. El hosting es en verdad el uso que se hace

de todos o parte de los recursos de un servidor web (memoria, espacio del

disco duro, ancho de banda, etc.).

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

27

Hosting compartido o shared hosting

Éste es el tipo de hosting más común por ser uno de los más económicos.

La clave está precisamente en que varios hostings comparten el mismo

servidor físico, esto quiere decir que comparten el procesador del servidor, la

memoria, su disco duro, etc.

Hosting dedicado o servidor dedicado

Este tipo de hosting es de los más caros que hay porque suele usarse para

sitios web con muchas visitas u otras aplicaciones empresariales que

necesitan mucha potencia.

La clave de los servidores dedicados está precisamente en que todos los

recursos de 1 servidor físico se le asignan única y exclusivamente a 1 hosting.

VPS o Servidor Virtual Privado

El hosting VPS es de los más usados cuando se busca un alojamiento web

más potente que el hosting compartido y más barato que el servidor dedicado.

La clave está precisamente en que no se contrata un servidor físico sino 1

servidor virtual que se crea específicamente para 1 hosting con los recursos

que se le hayan asignado (procesadores, memoria RAM, disco duro, etc.) del

servidor físico.

Cloud hosting o hosting en la nube

Éste es el hosting más avanzado y que suele usarse para aplicaciones muy

potentes y sitios web con muchísimas visitas. Más que de un producto se trata

de contratar un servicio de hosting (como cuando contratas la luz, el agua o

el gas en tu casa), ya que no se centra tanto en los servidores físicos sino en

los recursos que necesite el hosting en cada momento.

La clave está en que el hosting usa una red de servidores físicos conectados

entre sí (puede ser incluso desde sitios distintos de todo el mundo) que se

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

28

comportan como si fueran un súper-ordenador muy potente con recursos

ilimitados.

Si vas a contratar un hosting es recomendable que solo contrates lo que vas

a usar para tu aplicación o página web dependiendo de tus necesidades.

Tabla 4. Tabla comparativa de los hostings.

TABLA COMPARATIVA DE HOSTINGS

Hostings

Registros: 32 Nro. De Tabla: 4

Características Hostinger HostGator SiteGround

Migración del sitio web

Gratis Gratis No incluido

Almacenamiento SSD

100 GB 75 GB 10 GB

Copia de seguridad Diaria Semanal Diaria

Ancho de banda Ilimitado Ilimitado 10 000 visitas/mes

Creador de sitios Gratis Gratis Gratis

Certificados SSL Gratis Gratis Gratis

Dominio Gratis Gratis No incluido

Total de datos: 32

Nota: Elaboración Propia

El hosting en el que va a estar alojado el proyecto será Hostinger.

4.9.1 Hostinger

(TecnoGeekPro, 2019) menciona que Hostinger es una empresa de

alojamiento web que se inició en 2004. En su sitio web, Hostinger se

compromete a proporcionar un servicio de alojamiento web fácil de usar, fácil

de desarrollar y fiable que garantiza características de primera clase y alta

seguridad.

El compromiso con estos ideales en la teoría y en la práctica hace que el

proveedor sea un proveedor de hosting de 4,5 estrellas.

Hostinger tiene cuatro servicios principales de alojamiento de sitios web:

alojamiento web compartido donde muchos sitios web residen en un servidor

web, alojamiento de Servidores Privados Virtuales (VPS) que dedica recursos

específicos del servidor a una cuenta de alojamiento, registro de dominios y

certificados SSL (Secure Socket Layer).

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

29

Los certificados SSL son pequeños archivos de datos que enlazan

digitalmente una clave criptográfica única a la información de una

organización en un servidor.

Constructor de sitios web y nombre de dominio gratuitos de Hostinger

Cuando usted selecciona los servicios de hosting de Hostinger, viene con un

constructor de sitios web y un nombre de dominio gratuitos. El constructor de

sitios web facilita la creación de un sitio web de alto valor sin necesidad de

contratar a un desarrollador web.

Soporte al cliente multilingüe

En esta revisión de alojamiento web de hosting, me di cuenta de que una de

las cosas que ha contribuido a su rápido crecimiento, tanto a nivel local como

internacional, es su impresionante apoyo al cliente.

El hecho de que su servicio de atención al cliente sea multilingüe significa que

incluso los clientes de fuera de los EE.UU. pueden disfrutar de los servicios

de la empresa mientras hablan su lengua materna.

Respaldo Diario – Ups

Una de las características notables del plan de alojamiento de negocios es la

copia de seguridad diaria. Esta es una característica muy importante que tiene

como objetivo mantener su sitio web actualizado. Incluso si olvida hacer una

copia de seguridad del sitio web, puede estar seguro de que no se perderá

ningún detalle sobre las operaciones recientes.

Para saber si Hostinger es la opción correcta para su aplicación web o página

web, es importante considerar sus necesidades individuales de alojamiento y

asegurarse de que su empresa le brinde un buen servicio.

4.10 DOMINIO

Los dominios se utilizan para acceder a sitios web sin tener que recordar la

dirección IP donde se encuentra la información del servidor. (©1999-2021

Webempresa, s.f.) menciona que un dominio web es el nombre único que

recibe un sitio web en internet. Este nombre identifica a una página web

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

30

concreta sin que puedan existir dos o más sitios web que compartan el mismo

nombre de dominio.

En el caso de Webempresa, el dominio web sería webempresa.com.

Un dominio web está compuesto por dos partes. La primera parte denominada

nombre de dominio es el nombre que queremos dar a nuestro sitio web, la

segunda parte denominada extensión de dominio hace referencia a una

ubicación geográfica como .es (España), .mx (México), etc., o a un tipo web

en concreto como .org (organizaciones), .net (tecnológicas).

Nombre de dominio: Webempresa

Extensión de dominio: .com

Los subdominios son dominios que creamos a partir de un dominio propio.

En el caso de webempresa.com un subdominio sería guias.webempresa.com.

Este tipo de dominios son especialmente útiles para realizar pruebas o en el

caso de tener un dominio genérico como el .com para la web global, y después

varios subdominios para las webs territoriales como es.dominio.com,

uk.dominio.com, de.dominio.com, etc.

Importante que tu sitio web tenga un dominio fácil de recordar para que asi las

personas recuerden el dominio de tu sitio web y logren acceder al mismo.

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

31

5. MATERIALES Y MÉTODOS

5.1 MATERIALES

Tabla 5. Tabla de recursos humanos

RECURSOS HUMANOS

Registros:12 Nro. De Tabla: 5

Nombre Cargo Función N° Horas P. Unitario P. Total

Lidia Alejandro Autor Desarrolladora del proyecto de

tesis

204 $10,00 $2.040,00

Ing. Yandry Ramírez

Director Supervisar el avance y

desarrollo del proyecto de tesis

36 $10,00 $360,00

Subtotal: $2.400,00

Total de datos: 12

Nota: Elaboración Propia.

Tabla 6. Tabla de recursos hardware

RECURSOS HARDWARE

Registros: 8 Nro. De Tabla: 6 Cantidad Descripción P. Unitario P. Total

1 Laptop Dell Inspiron $548,00 $548,00

1 Impresora EPSON $495,00 $495,00

Subtotal: $1.043,00

Total de datos: 8

Nota: Elaboración Propia.

Tabla 7. Tabla de recursos software

RECURSOS SOFTWARE

Registros: 27 Nro. De Tabla: 7 Descripción Precio Unitario Precio Total

Python $0,00 $0,00

Enterprise Architec $0,00 $0,00

Hostinger $2,89 $17,34

Nginx $0,00 $0,00

Postgres $0,00 $0,00

Visual Code $0,00 $0,00

Django $0,00 $0,00

Windows $250,00 $250,00

Office $120,00 $120,00

Subtotal: $387,34

Total de datos: 27

Nota: Elaboración Propia

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

32

Tabla 8. Tabla de recursos materiales

RECURSOS MATERIALES

Registros: 8 Nro. De Tabla: 8 Cantidad Descripción P. Unitario P. Total

1 Resmas de papel A4

$3,50 $3,50

4 Cartucho de Impresión

$4,00 $16,00

Subtotal: $19,50

Total de datos: 8

Nota: Elaboración Propia

Tabla 9. Tabla de recursos varios

RECURSOS VARIOS

Registros: 4 Nro. De Tabla: 9 Cantidad Descripción P. Unitario P. Total

6 meses Internet $25,00 $150,00

Subtotal: $150,00

Total de datos: 4

Nota: Elaboración Propia

Tabla 10. Tabla de recursos totales

RECURSOS TOTALES

Registros: 10 Nro. De Tabla: 10 Descripción Precio Total

Recursos Humanos $2.040,00

Recursos Hardware $1.043,00

Recursos Software $387,34

Recursos Materiales $19,50

Recursos Varios $150,00

Total: $3.639,84

Total de datos: 10

Nota: Elaboración Propia

5.2 MÉTODOS

5.2.1 Método Inductivo

Se aplicará este método para conocer cómo se lleva la administración de los

pagos de agua de la Junta Directiva. También permitirá conocer las personas

involucradas en este proceso.

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

33

5.2.2 Método Deductivo

A través de este método se podrá conocer la tecnología y sus aspectos

comunes en función al desarrollo del sistema, las actividades necesarias para

modificar las aplicaciones y los datos obtenidos, y asi establecer una

documentación correcta para el análisis de requisitos y la validación de la

aplicación web.

5.2.3 Método Descriptivo

Por medio de este método se podrá describir paso a paso el desarrollo del

trabajo de investigación de fin de carrera, usando algunas técnicas de

recolección de datos que evidencien las necesidades y la problemática de la

Junta Directiva para lo cual se realizará encuestas, entrevista y la observación

directa.

5.3 TÉCNICAS

Para obtener los requerimientos del sistema web se recolectará información

mediante las siguientes técnicas:

5.3.1 Entrevista y encuesta

Por medio de esta técnica se realizará una serie de preguntas con la finalidad

de conocer la opinión de las personas que hacen uso del servicio que ofrece

la Junta Directiva y a su vez conocer el proceso que realiza el encargado de

registrar los pagos de agua de los usuarios. Todo esto para establecer los

requerimientos funcionales de la aplicación.

5.3.2 Observación Directa

Con esta técnica se podrá observar de cerca y conocer los elementos y/o

procesos que se llevan a cabo en la Junta Directiva para administrar los pagos

de agua de los usuarios.

5.4 METODOLOGÍA ICONIX

Iconix es un proceso simplificado en comparación con otras metodologías

tradicionales, unifica un conjunto de métodos de orientación a objetos con el

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

34

objetivo de abarcar todo ciclo de vida de un proyecto. Es una metodología

pesada – ligera de Desarrollo del Software.

En este tipo de metodología podemos encontrar cuatro fases:

Fase 1: Análisis de Requisitos: se analizará todos los requisitos que

formarán parte del sistema y así poder construir el diagrama de clases, que

representan las agrupaciones funcionales que estructuran el sistema en

desarrollo. Para esta fase utilizaremos tres herramientas:

Modelo de Dominio: para identificar objetos y cosas del mundo real que

intervienen en nuestro sistema.

Modelo de casos de uso: en donde vamos a describir las acciones que

un usuario realiza dentro del sistema, aquí encontramos elementos como

los actores, casos de uso y el sistema.

Prototipo de interfaz de usuario: en este paso crearemos un modelo o

modelos operativos del trabajo de nuestro sistema, en el que el analista y

cliente deben estar de acuerdo.

Fase 2: Análisis y diseño preliminar

En esta fase a partir de cada caso de uso se obtendrá una ficha de caso de

uso, formada por un nombre, una descripción, una precondición que debe

cumplir antes de iniciarse, una post-condición que debe cumplir al terminar.

Se deben describir los casos de uso, como un flujo principal de acciones,

pudiendo contener los flujos alternativos y los flujos de excepción. Debe

usarse un estilo consistente que sea adecuado al contexto del proyecto.

Realizar un Diagrama de Robustez, el cual es un híbrido entre un Diagrama

de Clases y un Diagrama de Actividades, una herramienta que nos permite

capturar el Que hacer y a partir de eso él Como hacerlo.

Facilita el reconocimiento de objetos y hace más sencilla la lectura del

sistema. Ayuda a identificar los objetos que participan en cada caso de uso.

El diagrama de Robustez se divide en:

Objetos fronterizos: usado por los actores para comunicarse con el

sistema.

Objetos entidad: son objetos del modelo del dominio.

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

35

Objetos de Control: es la unión entre la interfaz y los objetos de entidad.

Diagrama de Clases: describe la estructura de un sistema mostrando sus

clases, atributos y las relaciones entre ellos.

Fase 3: Diseño

En esta fase se reconocen todos los elementos que forman parte del sistema,

como lo son los Diagramas de Secuencia, los cuales muestran los métodos

que llevaran las clases de nuestro sistema. Muestra todos los cursos alternos

que pueden tomar todos los casos de uso. Se debe terminar el modelo

estático, añadiendo los detalles del diseño en el diagrama de clases y verificar

si el diseño satisface todos los requisitos identificados.

Fase 4: Implementación

En este paso a partir del diseño se procede a la creación del software. Se

utilizará el diagrama de componentes de ser necesario como un apoyo del

desarrollo.

En esta etapa se deben tomar en cuenta los siguientes factores:

Reusabilidad: hace referencia a la posibilidad de usar los componentes en

diferentes aplicaciones.

Extensibilidad: consiste en la facilidad de modificación del Software

Confiabilidad: se relaciona a la realización del Software descartando

posibles errores.

Realizar pruebas: se realizan test de unidades, de casos, datos, resultados,

de integración con los usuarios para verificar la aceptación de los resultados.

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

36

6. RESULTADOS

Para dar cumplimiento a cada uno de los objetivos planteados en el proyecto

de investigación, se llevó a cabo una serie de tareas las mismas que se

detallan a continuación:

Realizar un análisis preliminar y levantamiento de información para

establecer requerimientos necesarios de la aplicación a desarrollar.

Para dar cumplimiento a este objetivo se llevó a cabo una encuesta que se

aplicó a los usuarios que forman parte de la Junta Directiva del Barrio El Zarza

y también se aplicó una entrevista directa al tesorero de la Junta Directiva. La

encuesta consta de 10 preguntas la cual se aplicó a 26 personas, resultados

que se detallan a continuación:

En la primera pregunta el 88.5% muestra que los usuarios que hacen uso del

servicio de agua son de 30 a 55 años de edad mientras que el 11.5% son de

56 años en adelante. (Ver Figura 1)

Figura 1. Resumen de la Encuesta – Pregunta 1. Elaboración Propia.

0%

88%

12%

Indique su edad según el rango establecido. Su edad esta entre:

18 a 29 años

30 a 55 años

56 años en adelante

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

37

En la segunda pregunta se muestra que el 100% de los encuestados hacen

uso del servicio de agua que ofrece la Junta Directiva de Agua del Barrio El

Zarza. (Ver Figura 2)

Figura 2. Resumen de la Encuesta – Pregunta 2. Elaboración Propia.

En la tercera pregunta se muestra claramente que los procesos de pagos de

agua se los lleva 100% de forma manual. (Ver Figura 3)

Figura 3. Resumen de la Encuesta – Pregunta 3. Elaboración Propia.

En la cuarta pregunta se constata que el 100% de los documentos que se

entregan a los usuarios para constancia de sus pagos de agua son por entrega

de recibo físico. (Ver Figura 4)

100%

0%

¿Usted hace uso del servicio de agua que ofrece la Junta Directiva del Barrio El Zarza?

Si

No

100%

0%

Hasta la fecha actual, ¿Cómo se lleva a cabo el proceso de pagos de agua?

Manual (papel y lápiz)

Sistema Informático

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

38

Figura 4. Resumen de la Encuesta – Pregunta 4. Elaboración Propia.

En la quinta pregunta, el 61.5% a elegido que prefiere recibir el recibo de pago

de agua por correo electrónico, el 30.8% prefiere seguir recibiendo el recibo

físico mientras que el 7.7% quiere recibir el recibo de agua por WhatsApp.

(Ver Figura 5)

Figura 5. Resumen de la Encuesta – Pregunta 5. Elaboración Propia.

En la sexta pregunta se pudo notar las posibles causas que podría tener el

realizar y registrar los pagos de agua de forma manual en la que el 73.1%

indico que una posible causa es la perdida de información, el 69.2% dijo que

este proceso manual conlleva más tiempo, el 61.5% indico que otra posible

causa sería tener información alterada en los registros mientras que el 7.7%

100%

0%0%

¿A través de que medios o documentos se constata el pago de agua cancelado al

tesorero de la Junta Directiva?

Entrega de recibo físico

Notificación al correo

Ninguno

61%

31%

8%

¿Por que medio le gustaría a usted que se le envié el recibo del pago de agua?

Por recibo físico

Por correo electrónico

WhatsApp

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

39

no señalo ninguna causa al momento de llevar los procesos de forma manual.

(Ver Figura 6)

Figura 6. Resumen de la Encuesta – Pregunta 6. Elaboración Propia.

En la séptima pregunta se muestra que el 61.5% ha recibido una atención

buena al momento de ir a realizar el pago de agua, el 34.6% ha recibido una

atención excelente, el 3.8% ha recibido una atención regular mientras que el

0% a recibido una atención mala. (Ver Figura 7)

Figura 7. Resumen de la Encuesta – Pregunta 7. Elaboración Propia.

En la octava pregunta se constata los beneficios que tendría el implementar

un sistema web en el Barrio El Zarza en la cual, el 92.3% indico que esto

0 10 20 30 40 50 60 70 80

Perdida de información

Conlleva más tiempo

Información alterada

Ninguno

Indique las posibles causas que podría tener el realizar y registrar los pagos de agua de forma manual:

61%

35%

4%

0%

¿Cómo ha sido la atención que ha recibido usted al momento de realizar el

pago de agua?

Excelente

Bueno

Regular

Malo

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

40

contribuiría al medio ambiente, el 76.9% dijo que esto ayudaría a tener un

mejor control de la información, el 42.3% indico que esto optimizaría tiempo

mientras que el 0% indico que ninguno. (Ver Figura 8)

Figura 8. Resumen de la Encuesta – Pregunta 8. Elaboración Propia.

En la novena pregunta se pudo constatar la implementación del sistema web

en la que el 100% de los encuestados estuvo de acuerdo que se implementara

la aplicación web en la Junta Directiva de Agua del Barrio El Zarza. (Ver Figura

9)

Figura 9. Resumen de la Encuesta – Pregunta 9. Elaboración Propia.

En la décima pregunta se obtuvo opiniones de las distintas personas

encuestadas que pusieron a conocimiento las mejoras que debería tener el

0 10 20 30 40 50 60 70 80 90 100

Optimización de tiempo

Contribución al medio ambiente

Mayor control de la información

Ninguno

¿Qué beneficios tendría el implementar un sistema web?2

100%

0%

¿Considera usted necesario la implementación de un sistema web para el control de pagos de agua

en el Barrio El Zarza?

Si

No

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

41

sistema web para que se trabaje de mejor manera en la Junta Directiva de

Agua del Barrio El Zarza. (Ver Figura 10)

Figura 10. Resumen de la Encuesta – Pregunta 10. Elaboración Propia.

La entrevista consta de 7 preguntas aplicada al tesorero de la Junta Directiva,

información que se detalla a continuación:

1. ¿Cómo se encuentra estructurada la Junta Directiva de Agua?

La Junta Directiva de Agua se encuentra estructurada por un presidente,

secretario, tesorero y dos vocales.

2. ¿Cómo se realiza el proceso de pagos de agua?

El pago lo realizan los usuarios mensualmente, pagan una base de $2,50

y no se cobra cúbicos.

3. ¿En qué queda registrado todos los pagos de agua de los usuarios?

Queda registrado en una recibera, una constancia que se le da al usuario

y aparte se archiva en un cuaderno para mayor seguridad.

4. ¿Cada cuánto tiempo se registran los pagos de agua?

El usuario paga mensualmente, existen algunos usuarios que se acercan

a pagar en 2 o 3 meses pero que luego se igualan con sus mensualidades.

5. ¿De cuánto es la multa que se le carga al usuario por retraso en los

pagos de agua?

Los usuarios no tienen ninguna multa solo tiene que igualarse y en el caso

de no querer el servicio, se acercan y piden la suspensión del servicio y

cuando quieran nuevamente activarse tienen una multa de $50,00 para

ser un socio activo.

Según su opinión personal para tener un mejor control de los

pagos de agua, ¿Qué considera usted necesario que se deba

mejorar?

No es necesario mejorar nada.

Se debería mejorar el tratamiento del agua.

Entrega de recibo físico y digital por cualquier medio.

Sería bueno tener una plataforma web de la junta de agua para

información al cliente.

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

42

6. ¿Cuál es la problemática que se busca solucionar a través del

sistema web?

Que el sistema permita registrar usuarios, registrar pagos de agua,

generar un recibo de agua y registrar el servicio del usuario para mantener

un control del mismo cuando este servicio se encuentre activo o

suspendido.

7. ¿Se ha implementado anteriormente algún sistema parecido para el

control de pagos de agua?

Hasta el momento no se ha implementado ningún sistema para el control

de pagos de agua.

Una vez realizada la encuesta y la entrevista se logró determinar que actores

van a intervenir en el sistema, los requerimientos funcionales y no funcionales

con los que debía cumplir la aplicación, y la identificación de casos de uso en

la que se englobarían ciertos requerimientos funcionales que darían

cumplimiento a las necesidades de los usuarios y de la Junta Directiva de

Agua. (Ver Tabla 11, Tabla 12, Tabla 13 y Tabla 14)

6.1.1 Identificación de actores

Tabla 11. Identificación de autores.

Registros: 8 Nro. De Tabla: 5

Actor Rol

Tesorero Gestionar los pagos de agua, gestionar usuarios, gestionar tesoreros, generar recibos de pago de cada usuario, activar/suspender el servicio de agua y ver historial de servicios.

Usuarios Consultar información sobre sus pagos de agua.

Total de datos: 8

Nota: Elaboración Propia.

6.1.2 Requerimientos Funcionales

El sistema permitirá:

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

43

Tabla 12. Tabla de requerimientos funcionales.

Registros: 54 Nro. De Tabla: 6

CÓDIGO DESCRIPCIÓN ESTADO

RF 001 Ingresar al sistema a través de un usuario y

contraseña.

Evidente

RF 002 Al tesorero crear cuentas de usuario para

cada usuario del agua.

Evidente

RF 003 Al tesorero editar, buscar usuarios del agua

registrados en el sistema.

Evidente

RF 004 Al tesorero ver el listado de usuarios

registrados en el sistema.

Evidente

RF 005 Al tesorero validar cuentas de usuario a

traves del usuario.

Oculto

RF 006 Al tesorero crear, editar y buscar tesoreros

de la Junta Directiva del Agua.

Evidente

RF 007 Al tesorero ver el listado de tesoreros

registrados en el sistema.

Evidente

RF 008 Al tesorero crear, buscar los pagos de agua

de cada usuario.

Evidente

RF 009 Al tesoreo ver el listado de pagos de agua

registrados en el sistema.

Evidente

RF 010 Al tesorero generar el recibo de pago de

agua de cada usuario.

Evidente

RF 011 Al tesorero crear, buscar servicios de agua

de cada usuario.

Evidente

RF 012 Al tesorero ver el listado de servicios de

agua de los usuarios.

Evidente

RF 013 Al tesorero validar registro del servicio de

agua de cada usuario a traves del usuario

del agua.

Oculto

RF 014 Al tesorero suspender el servicio de agua

del usuario.

Evidente

RF 015 Al tesorero activar el servicio de agua de un

usuario que tenga suspendido su servicio.

Evidente

RF 016 Al tesorero ver historial de los servicios de

suspensiones de los usuarios.

Evidente

RF 017 Al usuario buscar los registros de pagos de

agua registrados por el tesorero.

Evidente

RF 018 Al usuario ver el listado de todos sus pagos

de agua registrados en el sistema.

Evidente

Total de datos: 54

Nota: Elaboración Propia.

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

44

6.1.3 Requerimientos No Funcionales

Tabla 13. Tabla de requerimientos no funcionales.

Registros: 24 Nro. De Tabla: 7

CODIGO DESCRIPCION

RNF001 El sistema será desarrollado bajo el lenguaje de programación

PYTHON v3.7.3.

RNF002 El sistema será diseñado con ENTERPRISE ARCHITECT.

RNF003 El sistema utilizará la base de datos POSTGRES v12.8.

RNF004 El sistema será desarrollado en el framework DJANGO v 3.2.6.

RNF005 El sistema trabajará con el servidor APACHE v2.4.41.

RNF006 El sistema será desarrollado con BOOTSTRAP v4.3.1.

RNF007 El sistema usará el hosting HOSTINGER.

RNF008 El sistema contará con un interfaz gráfica amigable para el

usuario.

RNF009 El sistema permitirá interactuar en una arquitectura cliente-

servidor.

RNF010 El sistema será multiusuario.

RNF011 El sistema será multiplataforma.

Total de datos: 24

Nota: Elaboración Propia.

6.1.4 Identificación de Casos de Uso

Tabla 14. Tabla de identificación de casos de uso.

Registros: 16 Nro. De Tabla: 8

Actor Código CU Requerimientos cubiertos

Tesorero, Usuarios

UC 001 Ingresar al sistema RF 001

Tesorero

UC 002 Gestionar Usuarios RF 002, RF 003, RF 004, RF 005

UC 003 Gestionar Tesoreros RF 006, RF 007

UC 004 Administrar Pagos de agua

RF 008, RF 009, RF 010

UC 005 Administrar Servicios de agua

RF 011, RF 012, RF 013, RF 014, RF 015, RF 016

Usuarios UC 006 Consultar

información RF 017, RF 018

Total de datos: 16

Nota: Elaboración Propia.

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

45

Diseñar el software en base a los requerimientos establecidos para asi

tener una idea clara de la aplicación a desarrollar

Para dar cumplimiento a este objetivo, una vez ya habiendo establecido los

requerimientos funcionales de la aplicación, se procedió hacer el diseño de la

aplicación web continuando con las fases de la metodología ICONIX.

Para eso se usó la herramienta de análisis y diseño UML Enterprise Architect

en donde se empezó realizando el prototipado de pantalla del sistema web

definiendo las distintas funcionalidades que debía realizar la aplicación en sí.

Luego se hizo el modelo de casos de uso, la descripción de los mismos,

diagramas de robustez y los diagramas de secuencia, todo esto con la

finalidad de definir la funcionalidad de todo el sistema. (Ver Figura 11 hasta

Figura 42, Tabla 15 hasta Tabla 20)

Figura 11. Elaboración de diagramas y pantallas en Enterprise Architect. Elaboración Propia.

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

46

6.1.5 Diagrama de Casos de Uso

Figura 12. Modelo de casos de uso. Elaboración Propia.

uc Casos de uso

Tesorero

Usuarios

Ingresar al sistema

Gestionar Tesoreros

Administrar Pagos de

Agua

Administrar

Serv icios de agua

Consultar información

Gestionar Usuarios

«include»

«include»

«include»

«include»

«include»

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

47

6.1.6 Modelo de dominio

Figura 13. Modelo de dominio. Elaboración Propia.

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

Prototipado: Ingresar al Sistema

Figura 14. Ingreso al sistema. Elaboración Propia.

class Modelo de dominio

Usuario

Pago

Tesorero

Persona

Consultas

Serv icioAgua

HistorialServ icio

1

tiene

1..*

1

registra

1..*

1

registra

1..*

1 tiene

1es una

es una

1

registra

1..*

1

realiza1..*

1

visualiza

1..* 1..*

tiene

1

ui Ingresar al Sistema

SISTEMA DE PAGOS DE AGUA

Usuario:

Contraseña:

Inisiar Sesión

Usuario

Contraseña

Inicio

Usuarios

Pagos de Agua

Servicios de Agua

! Completa este campo

! Completa este campo

Inicio

PAGOS DE AGUA

SISTEMA DE PAGOS

DE AGUA

Inicio

Inicio

Consultas

PAGOS DE AGUA

SISTEMA DE PAGOS

DE AGUA

Tesoreros

«navigate»

«navigate»

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

48

Caso de uso: Ingresar al Sistema

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

Registros: 30 Nro. De Tabla: 9

CASO DE USO: Ingresar al Sistema ACTOR:

Tesorero, Usuarios

CÓDIGO: UC001 TIPO: Primario-Sistema

PANTALLAS:

P001, P002, P003

REF. REQUERIMIENTO:

RF001

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

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

- Que se haya registrado una cuenta de usuario para el tesorero.

- Que el tesorero haya registrado al usuario en el sistema con las respectivas credenciales de acceso al mismo.

POSCONDICIONES:

Que el tesorero, usuario tengan las credenciales de acceso al sistema. CURSO NORMAL DE EVENTOS

Actor Sistema

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

2. El sistema muestra la pantalla [SISTEMA DE PAGOS DE AGUA]

3. El tesorero, usuarios ingresan el usuario y contraseña, y dan clic sobre el botón de [Inisiar Sesión]

4. El sistema mostrará la pantalla [Inicio] dependiendo del usuario logueado.

CURSO ALTERNO DE EVENTOS

A. USUARIO O CONTRASEÑA INCORRECTOS A.1 El tesorero, usuarios en la pantalla [SISTEMA DE PAGOS DE AGUA] ingresan las credenciales incorrectas y dan clic en el botón [Inisiar Sesión]. A.2 El sistema verifica las credenciales ingresadas y vuelve a mostrar la pantalla [SISTEMA DE PAGOS DE AGUA]. B. CAMPOS OBLIGATORIOS VACIOS B.1 El tesorero, usuarios dan clic en el botón [Inisiar Sesión] sin haber ingresado las credenciales respectivas. B.2 El sistema niega el acceso al mismo y muestra los campos obligatorios a llenarse por el usuario, tesorero.

Total de datos: 30

Nota: Elaboración Propia

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

49

Diagrama de secuencia: Ingresar al Sistema

Figura 15. Diagrama de secuencia: Ingresar al Sistema – Curso Normal. Elaboración Propia.

Figura 16. Diagrama de secuencia: Ingresar al Sistema – Curso Alterno. Elaboración Propia.

sd CURSO NORMAL DE EVENTOS

TESORERO, USUARIOS

SISTEMA DE

PAGOS DE AGUA

Credenciales UserInicio

Ingresa las credenciales y da clic en

[Inisiar Sesión]()valida credenciales()

valida credenciales()

Muestra la pantalla [Inicio]()

sd CURSO ALTERNO DE EVENTOS

TESORERO, USUARIOS

SISTEMA DE

PAGOS DE AGUA

Credenciales User

1. Ingresa las credenciales

incorrectas y da clic en [Inisiar

Sesión]()

Valida credenciales()

Valida credenciales()

Credenciales Incorrectas()Muestra la pantalla [SISTEMA DE

PAGOS DE AGUA]()

2. No ingresa las credenciales y

da clic en [Inisiar Sesión]()

Valida credenciales()

Muestra campos obligatorios()

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

50

Diagrama de Robustez: Ingresar al Sistema

Figura 17. Curso Normal de Eventos: Ingresar al Sistema. Elaboración Propia.

Figura 18. Curso Alterno de Eventos: Ingresar al Sistema. Elaboración Propia.

sd Ingresar al Sistema

TESORERO

USUARIOS

SISTEMA DE PAGOS DE

AGUA

Validar Datos User

Mostrar la pantalla

[Inicio]

Inicio

CURSO NORMAL DE EVENTOS

1. El tesorero, usuarios acceden al

sistema a través de un dominio.

2. El sistema muestra la pantalla

[SISTEMA DE PAGOS DE AGUA].

3. El tesorero, usuarios ingresan el

usuario y contraseña y dan clic sobre el

botón de [Inisiar Sesión].

4. El sistema mostrará la pantalla [Inicio]

dependiendo del usuario logueado.

Ingresa las credenciales y da

clic en [Inisiar Sesión]

Ingresa las credenciales y da

clic en [Inisiar Sesión]

sd Ingresar al Sistema

TESORERO

USUARIOS

SISTEMA DE PAGOS

DE AGUA

Valida Datos

UserMostrar Campos

Obligatorios Vacíos

Credenciales

incorrectas

CURSO ALTERNO DE EVENTOS

A. USUARIO O CONTRASEÑA

INCORRECTOS

A.1 El tesorero, usuarios en la pantalla

[SISTEMA DE PAGOS DE AGUA] ingresan

las credenciales incorrectas y dan clic en el

botón [Inisiar Sesión].

A.2 El sistema verifica las credenciales

ingresadas y vuelve a mostrar la pantalla

[SISTEMA DE PAGOS DE AGUA].

B. CAMPOS OBLIGATORIOS VACÍOS

B.1 El tesorero, usuarios dan clic en el botón

[Inisiar Sesión] sin haber ingresado las

credenciales respectivas.

B.2 El sistema niega el acceso al mismo y

muestra los campos obligatorios a llenarse

por el usuario, tesorero.

Ingresa/no las credenciales y

da clic en [Inisiar Sesión]

Ingresa/no las credenciales

y da clic en [Inisiar Sesión]

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

51

Prototipado: Gestionar Usuarios

Figura 19. Gestionar Usuarios. Elaboración Propia.

ui Gestionar Usuarios

INICIO

Usuarios

Pagos de Agua

Servicios de Agua

OpcionesCelularNombresApellidosCedula

Crear Cuenta Usuario

Usuario

Editar Usuario

Editar Usuario

Editar Usuario

Correo

Editar Usuario

Nombres: Jose

Apellidos: Ortiz Ibarra

N° Cedula:

Celular:

1900465823

0986456824

Email:[email protected]

Actualizar Cancelar

Inicio

PAGOS DE AGUA

Buscar:

Nuev o Usuario

Inicio

Usuarios

Tesoreros

Tesoreros

Pagos de Agua

Servicios de Agua

PAGOS DE AGUA

Usuario:

Password:

Confirm Password:

Nombres:

Apellidos:

Cedula:

Celular:

Correo:

Guardar Cancelar

«navigate»«navigate»

«navigate»

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

52

Caso de uso: Gestionar Usuarios

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

Registros: 36 Nro. De Tabla: 10

CASO DE USO: Gestionar Usuarios ACTOR: Tesorero CÓDIGO: UC002 TIPO: Primario-

Sistema PANTALLAS:

P004, P005, P006

REF. REQUERIMIENTO:

RF 002, RF 003, RF004, RF005

RESUMEN: El tesorero crea cuentas de usuario, edita información y realizar búsquedas de los mismos.

OBJETIVOS: Gestionar usuarios del agua y realizar búsquedas de los mismos.

PRECONDICIONES:

Que el tesorero tenga acceso al sistema.

POSCONDICIONES:

Que el tesorero pueda registrar los pagos de agua de cada usuario registrado en el sistema. CURSO NORMAL DE EVENTOS

Actor Sistema

1. El tesorero para agregar un nuevo usuario del agua pulsa el botón [Crear Cuenta Usuario].

2. El sistema muestra la pantalla [Nuevo Usuario]

3. El tesorero llena los campos del formulario y da clic sobre el botón de [Guardar]

4. El sistema valida todos los campos del formulario, guarda el nuevo usuario y regresa a la pantalla de [Inicio].

5. El tesorero para modificar información de un usuario tendrá que pulsar el botón [Editar Usuario].

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

7. El tesorero 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 [Inicio].

9. El tesorero para buscar un usuario deberá ingresar en el campo vacío de buscar cualquier dato del usuario.

10. El sistema busca en el listado de usuarios el dato ingresado y muestra las coincidencias encontradas.

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACIOS A.1 El tesorero estando en el formulario de [Nuevo Usuario] no llena los campos del formulario y da clic en el botón [Registrar]. A.2 El sistema verifica los campos del formulario y muestra los campos obligatorios a llenarse por el tesorero.

B. CUENTA USUARIO YA EXISTE B.1 El tesorero llena el formulario de [Nuevo Usuario] y da clic en el botón [Registrar].

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

53

B.2 El sistema valida el usuario con el que se va a crear la cuenta de usuario y vuelve a presentar el formulario de [Nuevo Usuario].

Total de datos: 36 Nota: Elaboración Propia.

Diagrama de Secuencia: Gestionar Usuarios

Figura 20. Diagrama de secuencia: Gestionar Usuarios – Curso Normal. Elaboración Propia.

sd CURSO NORMAL DE EVENTOS

Tesorero

Inicio Nuev o Usuario Editar Usuario Usuario Usuario

1. Pulsa el botón [Crear

Cuenta Usuario]()

Muestra el formulario()

2. Llena el formulario y da clic en

[Registrar]]()Valida Usuario()

Valida Usuario()

Guarda Usuario()

Muestra pantalla [Inicio]()

3. Pulsa el botón [Editar Usuario]()

Muestra pantalla [Editar Usuario]()

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

Valida Datos()

Valida Datos()

Actualiza Usuario()Muestra pantalla [Inicio]()

5. Ingresa cualquier dato en

el campo de [Buscar]()

Busca Dato()

Busca Dato()

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

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

54

Figura 21. Diagrama de secuencia: Gestionar Usuarios – Curso Alterno. Elaboración Propia.

Diagrama de Robustez: Gestionar Usuarios

Figura 22. Curso Normal de Eventos: Gestionar Usuarios. Elaboración Propia.

sd CURSO ALTERNO DE EVENTOS

Tesorero

Nuev o UsuarioInicio Usuario Usuario

1. Pulsa el botón [Crear Cuenta

Usuario]()

Muestra pantalla [Nuevo Usuario]()

2. No llena el formulario y da clic en

[Guardar]()

Valida Datos()

Muestra Campos Obligatorios()

3. LLena el formulario y da clic en

[Guardar]]()

Valida Usuario()

Valida Usuario()

Vuelve a mostrar el formulario

de Nuevo Usuario()

sd Gestionar Usuarios del Agua

Tesorero

Nuevo Usuario Valida datos Usuario

Guarda datos

CURSO NORMAL DE EVENTOS

1. El tesorero para agregar un nuevo usuario del

agua pulsa el botón [Crear Cuenta Usuario].

2. El sistema muestra la pantalla [Nuevo Usuario].

3. El tesorero llena los campos del formulario y da

clic sobre el botón [Guardar].

4. El sistema valida todos los campos del formulario,

guarda el nuevo usuario y regresa a la pantalla de

[Inicio].

5. El tesorero para modificar información de un

usuario tendra que pulsar el botón [Editar Usuario].

6. El sistema mostrará la pantalla [Editar Usuario]

con toda la información del usuario seleccionado.

7. El tesorero 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 [Inicio].

9. El tesorero para buscar un usuario deberá ingresar

en el campo vacío de buscar, cualquier dato del

usuario.

10. El sistema busca en el l istado de usuarios el dato

ingresado y muestra las coincidencias encontradas.

Editar Usuario

Inicio

Busca Usuario Muestra Usuario

Llena el formulario y da clic

en [Registrar]

Modifica la información y da clic

en [Actualizar]

Ingresa cualquier dato en el campo de [Buscar]

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

55

Figura 23. Curso Alterno de Eventos: Gestionar Usuarios. Elaboración Propia.

Prototipado: Gestionar Tesoreros

Figura 24. Gestionar Tesoreros. Elaboración Propia.

sd Gestionar Usuarios del Agua

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACÍOS

A.1 El tesorero estando en el formulario de

[Nuevo Usuario] no llena los campos del

formulario y da clic en el botón [Registrar].

A.2 El sistema verifica los campos del

formulario y muestra los campos obligatorios

a llenarse por el tesorero.

B. CUENTA USUARIO YA EXISTE

B.1 El tesorero llena el formulario de [Nuevo

Usuario] y da clic en el botón [Registrar].

B.2 El sistema valida el usuario con el que

se va a crear la cuenta de usuario y vuelve a

presentar el formulario de [Nuevo Usuario].

TesoreroNuevo Usuario Valida datos Usuario

Muestra Campos

Obligatorios

Presenta el formulario

Llena el formulario y da clic en

[Registrar]

No llena el formulario y da clic

en [Registrar]

ui Gestionar Tesoreros

Inicio

Nuev o Tesorero

PAGOS DE AGUA

Inicio

Usuarios

Tesoreros

Pagos de Agua

Servicios de Agua

Nuevo Tesorero Buscar:

Nombres Apellidos: Cedula Celular Correo

Editar Tesorero

Editar Tesorero

Nombres:

Apellidos:

N° Cedula:

Celular:

Correo:

Registrar Cancelar

«navigate»

«navigate»

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

56

Caso de uso: Gestionar Tesoreros

Tabla 17. Descripción de caso de uso: Gestionar Tesoreros.

Registros: 35 Nro. De Tabla: 11

CASO DE USO: Gestionar Tesoreros ACTOR: Tesorero CÓDIGO: UC003 TIPO: Primario

-Sistema

PANTALLAS:

P007, P008, P009

REF. REQUERIMIENTO:

RF 006, RF 007

RESUMEN: El tesorero crea, edita y realiza búsquedas de los tesoreros.

OBJETIVOS: Gestionar tesoreros de la Junta Directiva y realizar búsquedas de los mismos.

PRECONDICIONES:

Que el tesorero tenga acceso al sistema.

POSCONDICIONES:

Que los pagos de agua de cada usuario sean registrados con el tesorero respectivo. CURSO NORMAL DE EVENTOS

Actor Sistema

1. El tesorero para agregar un nuevo tesorero, pulsa el botón [Nuevo Tesorero].

2. El sistema muestra la pantalla [Nuevo Tesorero]

3. El tesorero llena los campos del formulario y da clic sobre el botón de [Registrar]

4. El sistema valida todos los campos del formulario, guarda el nuevo tesorero y regresa a la pantalla de [Inicio].

5. El tesorero para modificar información de un tesorero, tendrá que pulsar el botón [Editar Tesorero].

6. El sistema mostrará la pantalla [Editar Tesorero] con toda la información del tesorero seleccionado.

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

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

9. El tesorero para buscar un tesorero en específico deberá ingresar en el campo vacío de buscar cualquier dato del tesorero.

10. El sistema busca en el listado de tesoreros el dato ingresado y muestra las coincidencias encontradas.

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACIOS A.1 El tesorero estando en el formulario de [Nuevo Tesorero] no llena los campos del formulario y da clic en el botón [Registrar]. A.2 El sistema verifica los campos del formulario y muestra los campos obligatorios a llenarse por el tesorero.

Total de datos: 35 Nota: Elaboración Propia.

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

57

Diagrama de Secuencia: Gestionar Tesoreros

Figura 25. Diagrama de secuencia: Gestionar Tesoreros – Curso Normal. Elaboración Propia.

Figura 26. Diagrama de secuencia: Gestionar Tesoreros – Curso Alterno. Elaboración Propia.

sd CURSO NORMAL DE EVENTOS

Tesorero

Inicio Nuev o Tesorero Editar Tesorero Tesorero Tesorero

1. Pulsa el botón [Nuevo Tesorero]()

Muestra pantalla [Nuevo Tesorero]()

2. Llena el formulario y da clic en [Registrar]()

Valida Tesorero()

Valida Tesorero()

Guarda Tesorero y muestra la pantalla [Inicio]()

3. Pulsa el botón [Editar Tesorero]()

Muestra pantalla [Editar Tesorero]()

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

Actualiza Tesorero()

Actualiza Tesorero()

Guarda Tesorero y muestra la pantalla [Inicio]()

5. Ingresa cualquier dato del

Tesorero en el campo de [Buscar]()

Busca Dato()

Busca Dato()

Obtiene Usuario y lo muestra en la pantalla [Inicio]()

sd CURSO ALTERNO DE EVENTOS

Tesorero

Inicio Nuev o Tesorero Tesorero

1. Pulsa el botón [Nuevo Tesorero]()

Muestra la pantalla [Nuevo Tesorero]()

2. No llena el formulario y da clic en [Registrar]()

Valida Datos()

Muestra Campos Obligatorios()

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

58

Diagrama de Robustez: Gestionar Tesoreros

Figura 27. Curso normal de eventos: Gestionar Tesoreros. Elaboración Propia.

Figura 28. Curso alterno de eventos: Gestionar Tesoreros. Elaboración Propia.

sd Gestionar Tesoreros del Agua

CURSO NORMAL DE EVENTOS

1. El tesorero para agregar un nuevo tesorero, pulsa

el botón [Nuevo Tesorero].

2. El sistema muestra la pantalla [Nuevo Tesorero]

3. El tesorero llena los campos del formulario y da

clic sobre el botón de [Registrar].

4. El sistema valida todos los campos del formulario,

guarda el nuevo tesorero y regresa a la pantalla de

[Inicio].

5. El tesorero para modificar información de un

tesorero, tendrá que pulsar el botón [Editar

Tesorero].

6. El sistema mostrará la pantalla [Editar Tesorero]

con toda la infomación del tesorero seleccionado.

7. El tesorero modifica cualquier campo del

formulario y da clic sobre el botón [Actualizar].

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

regresa a la pantalla [Inicio].

9. El tesorero para buscar un tesorero en específico

deberá ingresar en el campo vacío de buscar

cualquier dato del tesorero.

10. El sistema busca en el l istado de tesoreros el

dato ingresado y muestra las coincidencias

encontradas.

Nuevo Tesorero

Tesorero

Valida DatosTesorero

Guarda Datos

Muestra pantalla

[Inicio]

Inicio

Editar Tesorero

Busca Tesorero

Muestra Tesorero

Llena el formulario y da clic en

[Registrar]

Modifica el formulario y

da clic en [Actualizar]

Ingresa un dato del tesorero en el

campo [Buscar]

sd Gestionar Tesoreros del Agua

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACÍOS

A.1 El tesorero estando en el formulario de

[Nuevo Tesorero] no llena los campos del

formulario y da clic en el botón [Registrar].

A.2 El sistema verifica los campos del formulario

y muestra los campos obligatorios a llenarse por

el tesorero.

Tesorero

Nuevo Tesorero Valida Datos Muestra Campos

Obligatorios

No llena el formulario y da

clic en [Registrar]

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

59

Prototipado: Administrar Pagos De Agua

Figura 29. Administrar Pagos de Agua. Elaboración Propia.

ui Administrar Pagos de Agua

Inicio

Usuarios

Pagos de Agua

Servicios de Agua

Nuevo Pago

Usuario Tesorero mes desde mes hasta

Generar Recibo

Generar Recibo

Generar Recibo

Nuev o Pago

Usuario: Jose Ochoa

Tesorero:

Mes desde: dd/mm/AAAA

Mes hasta:dd/mm/AAAA

Costo servicio:0,00

Registrar Cancelar

Recibo PDF

costo servicio

Inicio

PAGOS DE AGUA

Cristina Ortiz

JUNTA DIRECTIVA DE AGUA DEL BARRIO EL ZARZA

RECIBO DE AGUA

JUNTA DIRECTIVA DE AGUA DEL BARRIO EL ZARZA

LOS ENCUENTROS - YANTZAZA - ECUADOR

Buscar:

Tesoreros

«navigate»

«navigate»

«navigate»

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

60

Caso de uso: Administrar Pagos de Agua

Tabla 18. Descripción de caso de uso: Administrar Pagos de Agua.

Registros: 33 Nro. De Tabla: 12

CASO DE USO: Administrar Pagos de Agua ACTOR: Tesorero CÓDIGO: UC004 TIPO: Primario

-Sistema

PANTALLAS:

P010, P011, P012

REF. REQUERIMIENTO:

RF008, RF009, RF 010

RESUMEN: El tesorero registrará pagos de agua de cada usuario del agua y genera un recibo del mismo.

OBJETIVOS: Registrar y generar recibos de pagos de agua de cada usuario del agua.

PRECONDICIONES:

- Que el usuario del agua este registrado en el sistema.

- Que el tesorero este registrado en el sistema.

POSCONDICIONES:

Que el usuario cuando acceda a su cuenta y quiera saber sobre sus pagos de agua, este los pueda visualizar. CURSO NORMAL DE EVENTOS

Actor Sistema

1. El tesorero para agregar un nuevo pago de agua, tendrá que pulsar el botón [Nuevo Pago].

2. El sistema muestra la pantalla [Nuevo Pago]

3. El tesorero llena los campos del formulario y da clic sobre el botón de [Registrar]

4. El sistema valida el formulario, guarda el pago de agua y regresa a la pantalla de [Inicio].

5. El tesorero para generar el recibo de agua tendrá que pulsar el botón [Generar Recibo].

6. El sistema genera el recibo del pago de agua y lo muestra en la pantalla de [Recibo PDF].

7. El tesorero para buscar un pago de agua en específico deberá ingresar en el campo vacío de buscar cualquier dato del pago de agua.

8. El sistema busca en el listado de pagos de agua el dato ingresado y muestra las coincidencias encontradas.

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACIOS A.1 El tesorero estando en la pantalla [Nuevo Pago] no llena los campos del formulario y da clic en el botón [Registrar]. A.2 El sistema verifica los campos del formulario y muestra los campos obligatorios a llenarse por el tesorero.

Total de datos: 33 Nota: Elaboración Propia.

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

61

Diagrama de Secuencia: Administrar Pagos de Agua

Figura 30. Diagrama de secuencia: Administrar Pagos de Agua C.N. Elaboración Propia.

Figura 31. Diagrama de secuencia: Administrar Pagos de Agua C.A. Elaboración Propia.

sd CURSO NORMAL DE EVENTOS

Tesorero

Inicio Nuev o Pago Pago PagoRecibo PDF

1. Pulsa el botón [Nuevo Pago]()

Muestra pantalla [Nuevo Pago]()

2. Llena el formulario y da clic en [Registrar]]()

Valida Pago()

Valida Pago()

Guarda Pago()

Muestra pantalla [Inicio]()

3. Pulsa el botón [Generar Recibo]()

Obtiene Pago()

Obtiene Pago()

Genera Recibo()

Muestra pantalla [Recibo

PDF]()4. Ingresa dato del Pago en

el campo de [Buscar]()

Busca Pago()

Busca Pago()

Obtiene Pago y lo muestra en la pantalla [Inicio]()

sd CURSO ALTERNO DE EVENTOS

Tesorero

Inicio Nuev o Pago Pago

1. Pulsa el botón [Nuevo Pago]()

Muestra pantalla [Nuevo Pago]()

2. No llena el formulario y da clic en [Registrar]()

Valida Pago()

Muestra Campos Obligatorios()

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

62

Diagrama de Robustez: Administrar Pagos de Agua

Figura 32. Curso normal de eventos: Administrar Pagos de Agua. Elaboración Propia.

Figura 33. Curso alterno de eventos: Administrar Pagos de Agua. Elaboración Propia.

sd Administrar Pagos de Agua

CURSO NORMAL DE EVENTOS

1. El tesorero para agregar un nuevo

pago de agua, tendrá que pulsar el

botón [Nuevo Pago].

2. El sistema muestra la pantalla [Nuevo

pago]

3. El tesorero l lena los campos del

formulario y da clic sobre el botón de

[Registrar].

4. El sistema valida el formulario,

guarda el pago de agua y regresa a la

pantalla de [Inicio].

5. El tesorero para generar el recibo de

agua tendrá que pulsar el botón

[Generar Recibo].

6. El sistema genera el recibo del pago

de agua y lo muestra en la pantalla de

[Recibo PDF].

7. El tesorero para buscar un pago de

agua en específico debera ingresar en el

campo vacío de buscar cualquier dato

del pago de agua.

8. El sistema busca en el l istado de

pagos de agua el dato ingresado y

muestra las coincidencias encontradas.

Tesorero

Nuevo Pago Valida Datos

PagoGuarda Datos

Inicio

Genera ReciboBusca Pago

Muestra Pago

Pulsa el botón [Generar Recibo]

Llena el formulario y da clic en

[Registrar]

Ingresa un dato en el campo [Buscar]

sd Administrar Pagos de Agua

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACÍOS

A.1 El tesorero en la pantalla [Nuevo

Pago] no llena los campos del

formulario y da clic en el botón

[Registrar].

A.2 El sistema verifica los campos del

formulario y muestra los campos

obligatorios a llenarse por el tesorero.

TesoreroNuevo Pago Verifica Datos Muestra Campos

Obligatorios

No llena el formulario y da clic en

[Registrar]

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

63

Prototipado: Administrar Servicios De Agua

Figura 34. Administrar Servicios de Agua. Elaboración Propia.

ui Administrar Serv icios de Agua

Inicio

Usuarios

Pagos de Agua

Servicios de Agua

Activar Servicio

Activar Servicio

Usuario

Suspender Servicio

Nuev o Serv icio Agua

Suspender Servicio

Usuario:

cristina123

Motivo de Suspensión:

Ingrese el motivo de suspensión

del servicio.

Registrar Cancelar

Costo Activación

Nuevo Servicio Agua

Costo de Activación:

0.0

Inicio

SERVICIO DE AGUA

TesorerosMotivo Suspensión

Buscar:Historial

Inicio

SERVICIO DE AGUA

Inicio

Usuarios

Tesoreros

Pagos de Agua

Servicios de Agua

Volver

Usuario Costo Activación Motivo Suspensión Fecha Suspensión

«navigate»

«navigate»

«navigate»

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

64

Caso de uso: Administrar Servicios de Agua

Tabla 19. Descripción de caso de uso: Administrar Servicios de Agua.

Registros: 37 Nro. De Tabla: 13

CASO DE USO: Administrar Servicios de Agua

ACTOR: Tesorero

CÓDIGO: UC005 TIPO: Primario-Sistema

PANTALLAS:

P013, P014, P015

REF. REQUERIMIENTO:

RF011, RF012, RF013, RF014, RF 015, RF 016

RESUMEN: El tesorero crea un servicio de agua, suspende el servicio, activa el servicio suspendido y ve el historial de suspensiones.

OBJETIVOS: Administrar los servicios de agua de los usuarios registrados en el sistema.

PRECONDICIONES:

Que el usuario este registrado en el sistema.

POSCONDICIONES:

Que el tesorero pueda visualizar el historial de las suspensiones de servicios de los usuarios.

CURSO NORMAL DE EVENTOS

Actor Sistema

1. El tesorero para agregar un nuevo servicio de agua dará clic en el botón [Nuevo Servicio Agua].

2. El sistema mostrará la pantalla [Nuevo Servicio Agua].

3. El tesorero llena el formulario y da clic en [Registrar].

4. El sistema valida el formulario, guarda el servicio del usuario y regresa a la pantalla [Inicio]

5. El tesorero para suspender el servicio del usuario da clic en el botón [Suspender Servicio].

6. El sistema muestra la pantalla [Suspender Servicio].

7. El tesorero modifica información del formulario y da clic en el botón [Suspender Servicio].

8. El sistema actualiza la información del servicio, muestra la pantalla [Inicio] y cambia la opción [Suspender Servicio] por la opción [Activar Servicio].

9. El tesorero para activar el servicio de un usuario dará clic en el botón de [Activar Servicio].

10. El sistema actualiza el servicio del usuario, muestra la pantalla [Inicio] y cambia la opción [Activar Servicio] por la opción [Suspender Servicio].

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

65

11. El tesorero para buscar un servicio de agua en específico deberá ingresar en el campo vacío de buscar, el nombre del usuario.

12. El sistema busca en el listado de servicios de agua el nombre del usuario ingresado y muestra las coincidencias encontradas.

13. El tesorero para ver historial de suspensiones da clic en [Historial].

14. El sistema muestra a detalle en una tabla los servicios suspendidos de cada usuario.

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACIOS A.1 El tesorero en la pantalla [Nuevo Servicio Agua] no llena los campos del formulario y da clic en el botón [Registrar]. A.2 El sistema verifica los campos del formulario y muestra los campos obligatorios a llenarse por el tesorero.

Total de datos: 37

Nota: Elaboración Propia.

Diagrama de Secuencia: Administrar Servicios de Agua

Figura 35. Diagrama de secuencia: Administrar Servicios de Agua C.N. Elaboración Propia.

sd CURSO NORMAL DE EVENTOS

Tesorero

Inicio Nuev o Serv icio

Agua

Suspender

Serv icio

Serv icio Agua Serv icioAguaHistorial Historial

1. Pulsa el botón [Nuevo Servicio Agua]()

Muestra pantalla [Nuevo Servicio Agua]()

2. Llena el formulario y da clic en [Registrar]()

Valida Datos()

Valida Datos()

Guarda Servicio de Agua()Muestra la pantalla [Inicio]()

3. Pulsa el botón [Suspender Servicio]()

Muestra pantalla [Suspender Servicio]()

4. Modifica información del formulario y da clic en [Suspender Servicio]()

Actualiza Datos()

Actualiza Datos()

Actualiza Servicio Agua()Muestra pantalla [Inicio]()

5. Pulsa el botón [Activar Servicio]()Actualiza Datos()

Actualiza Datos()

Actualiza Servicio Agua()

Muestra pantalla [Inicio]()6. Ingresa cualquier dato del

Servicio en el campo [Buscar]()

Busca Servicio Agua()

Busca Servicio Agua()

Obtiene Sevicio Agua y lo muestra en la pantalla [Inicio]()

7. Da clic en [Historial]()Lista Historial()

Lista Historial()

Obtiene Historial()

Muestra Historial en la pantalla [Inicio]()

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

66

Figura 36. Diagrama de secuencia: Administrar Servicios de Agua C.A. Elaboración Propia.

Diagrama de Robustez: Administrar Servicios de Agua

Figura 37. Curso normal de eventos: Administrar Servicios de Agua. Elaboración Propia.

sd CURSO ALTERNO DE EVENTOS

Tesorero

Inicio Nuev o Serv icio

Agua

Nuev o Serv icio

Agua

1. Pulsa el botón [Nuevo Servicio

Agua]()

Muestra la pantalla [Nuevo Servicio Agua]()

2. No llena el formulario y da clic en [Registrar]()

Valida Datos()

Muestra Campos Obligatorios()

sd Administrar Serv icios de Agua

Tesorero

CURSO NORMAL DE EVENTOS

1. El tesorero para agregar un nuevo servicio de

agua dará clic en el botón [Nuevo Servicio Agua].

2. El sistema mostrará la pantalla [Nuevo Servicio

Agua].

3. El tesorero llena el formulario y da clic en

[Registrar].

4. El sistema valida el formulario, guarda el

servicio del usuario y regresa a la pantalla [Inicio].

5. El tesorero para suspender el servicio del usuario

da clic en el botón [Suspender Servicio].

6. El sistema muestra la pantalla [Suspender

Servicio].

7. El tesorero modifica información del formulario

y da clic en el botón [Suspender Servicio].

8. El sistema actualiza la informacion del servico,

muestra la pantalla [Inicio] y cambia la opción

[Suspender Servicio] por la opción [Activar

Servicio].

9. El tesorero para activar el servicio de un usuario

dará clic en el botón [Activar Servicio].

10. El sistema actualiza el servicio del usuario,

muestra la pantalla [Inicio] y cambia la opción

[Activar Servicio] por la opción [Suspender

Servicio].

11. El tesorero para buscar un servicio de agua en

específico deberá ingresar en el campo vacío de

buscar, el nombre del usuario.

12. El sistema busca en el l istado de servicios de

agua el nombre del usuario ingresado y muestra

las coincidencias encontradas.

13. El tesorero para ver el historial de suspensiones

da clic en [Historial].

14. El sistema muestra el l istado de las

suspensiones de los servicios de los usuarios

Nuevo Servicio Agua

Valida Datos

ServicioAguaInicio Muestra pantalla

[Inicio]

Guarda Datos

Actualiza Datos

Muestra pantalla

[Suspender Servicio]

Suspender Servicio

Busca Servicio

HistorialLista Historial

Da clic en [Activar Servicio]

Ingresa nombre del usuario en el

campo [Buscar]

Llena el formulario y da clic

en [Registrar].

Da clic en [Suspender Servicio]

Modifica datos del formulario y da

clic en [Suspender Servicio]

Da clic en [Historial]

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

67

Figura 38. Curso alterno de eventos: Administrar Servicios de Agua. Elaboración Propia.

Prototipado: Consultar Información

Figura 39. Consultar Información. Elaboración Propia.

sd Administrar Serv icios de Agua

CURSO ALTERNO DE EVENTOS

A. CAMPOS OBLIGATORIOS VACÍOS

A.1 El tesorero en la pantalla [Nuevo

Servicio Agua] no llena los campos del

formulario y da clic en el botón [Registrar].

A.2 El sistema verifica los campos del

formulario y muestra los campos

obligatorios a llenarse por el tesorero. TesoreroNuevo Servicio Agua Valida Datos Muestra Campos

Obligatorios

No llena el formulario y da clic

en [Registrar]

ui Consultar Información

Inicio

Consultas Buscar:

Usuario Tesorero Mes desde Mes hasta Costo servicio

Inicio

PAGOS DE AGUA

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

68

Caso de uso: Consultar Información

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

Registros: 29 Nro. De Tabla: 14

CASO DE USO: Consultar Información ACTOR: Usuarios

CÓDIGO: UC006 TIPO: Primario-Sistema

PANTALLAS:

P016

REF. REQUERIMIENTO:

RF017, RF018

RESUMEN: Los usuarios realizan consultas sobre sus pagos de agua registrados en el sistema.

OBJETIVOS: Consultar información de los pagos de agua de cada usuario.

PRECONDICIONES:

Que el usuario este registrado. Que el usuario haya cancelado su pago de agua.

POSCONDICIONES:

Que el usuario lleve un mejor control de sus pagos de agua.

CURSO NORMAL DE EVENTOS

Actor Sistema

1. En la pantalla [Inicio], los usuarios hacen clic en [Consultas], luego hacen clic en [Pagos de Agua].

2. El sistema muestra en el panel de la pantalla [Inicio] el listado de todos los pagos de agua del usuario.

3. Los usuarios llenan el campo [Buscar] con cualquier dato o información de sus pagos de agua.

4. El sistema busca el pago de agua con el dato ingresado y muestra coincidencias encontradas en relación a los pagos de agua.

CURSO ALTERNO DE EVENTOS

No existen cursos alternos para este caso de uso. Total de datos: 29

Nota: Elaboración Propia.

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

69

Diagrama de Secuencia: Consultar Información

Figura 40. Diagrama de secuencia: Consultar Información C.N. Elaboración Propia.

Diagrama se Robustez: Consultar Información

Figura 41. Curso normal de eventos: Consultar Información. Elaboración Propia.

sd Curso Normal de Ev entos

USUARIOS

PagoInformaciónINICIO

1. Ingresa un dato del Pago de Agua en el

campo [Buscar]()

BuscarPago()

BuscarPago()

ObtenerPago()Muestra el Pago de Agua en la

pantalla [Inicio]()

sd Consultar Información

CURSO NORMAL DE EVENTOS

BUSCAR

1. En la pantalla INICIO, los usuarios hacen clic en

[Consultas], luego hacen clic en [Pagos de Agua].

2. El sistema muestra en el panel de la pantalla

Inicio el l istado de todos los pagos de agua del

usuario.

3. Los usuarios llenan el campo [Buscar] con

cualquier dato o información de sus pagos de agua.

2. El sistema busca el pago de agua con el dato

ingresado y muestra coincidencias encontradas en

relación a los pagos de agua.USUARIOS

INICIO

Busca informaciónPago

Mostrar información

Llenan el campo vacío de [Buscar].

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

70

6.1.8 Modelo de clases

Figura 42. Modelo de Clases. Elaboración Propia.

class Modelo de clases

Persona

+ nombres: varchar(50)

+ apellidos: varchar(50)

+ cedula: varchar(10)

+ celular: varchar(10)

+ correo: varchar

Usuario

+ idUsuario: int

+ usuarioAgua: User

+ ListadoUsuarios() : void

+ CrearUsuario() : void

+ ActualizarUsuario() : void

Tesorero

+ idTesorero: int

+ usuarioTesorero: User

+ estado: boolean

+ ListadoTesoreros() : void

+ RegistrarTesorero() : void

Pago

+ idPago: int

+ IdUsuario: int

+ idTesorero: int

+ mes_desde: Date

+ mes�_hasta: Date

+ costo_servicio: double

+ ListadoPagos() : void

+ CrearPago() : void

+ GenerarRecibo() : void

HistorialServ icio

+ idHistorial: int

+ usuario: varchar(250)

+ costoActivacion: double

+ motivoSuspension: varchar

+ fechaSuspension: date

+ Historial() : void

Consultas

+ ConsultarInformacion() : void

Serv icioAgua

+ idServicioAgua: int

+ idUsuario: int

+ Costo_activacion: double

+ Motivo_suspension: varchar

+ estado: boolean

+ ListadoServicios() : void

+ NuevoServicioAgua() : void

+ SuspenderServicio() : void

+ ActivarServicio() : void

1

registra

1..*

1..*

tiene

1

1

registra

1..*

1

tiene

1

1

realiza

1..*

1..*

tiene

1

1

visualiza

1..*

es una

es una

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

71

Codificar el software teniendo un diseño pre-establecido del mismo para

empezar a construir la aplicación

Para dar cumplimiento a este objetivo se procedió a codificar el software en

base al diseño pre-establecido, para lo cual se usó el editor de Visual Studio

Code en la que se creó el proyecto con las siguientes herramientas: Lenguaje

de Programación Python, Framework Django, Base de Datos Postgres. (Ver

Figura 43)

Figura 43. Editor de Visual Studio Code. Elaboración Propia.

Estando creado el proyecto se procedió a crear la aplicación, en base al

modelo de clases (Ver Figura 42) se agregó las clases del modelo al archivo

models.py con sus respectivos atributos y relaciones entre las clases que ya

estaban definidas procediendo asi a configurar luego el archivo views.py y los

templates de la aplicación. (Ver Figura 44, Figura 45 y Figura 46)

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

72

Figura 44. Añadiendo las clases del modelo de dominio a models.py. Elaboración Propia

Se configuró el archivo views.py de la aplicación para ya darle vida a las clases

del archivo models.py y que a su vez se empiece a interactuar con la base de

datos de postgres. (Ver Figura 45)

Figura 45. Configurando el archivo views.py. Elaboración Propia

Estando configurado los archivos models.py y views.py se creó los respectivos

templates de la aplicación para que todo se haga más interactivo y se trabaje

en una arquitectura cliente-servidor. (Ver Figura 46)

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

73

Figura 46. Configurando el template de login. Elaboración Propia

Implementar y realizar las respectivas pruebas al software para la

respectiva corrección de posibles errores arrojados por la aplicación

Finalmente se realizó la implementación de la aplicación web, en la que se

hizo la contratación del servidor web de Hostinger se procedió a subir la

aplicación al servidor para que este trabajara en junta con NGINX,

GUNICORN Y POSTGRES.

Luego de haber alojado la aplicación en la nube y pudiendo acceder desde un

dominio contratado, se procedió a verificar la funcionalidad de la aplicación

con el fin de verificar errores en la ejecución de procesos dentro de la misma.

Accediendo desde el dominio http://pagosagua.com/ se podrá visualizar el

login de la aplicación en la que se ingresará el usuario y contraseña para luego

ingresar a la vista principal. Cabe aclarar que dependiendo del usuario

logueado se mostrará ya sea la vista del tesorero en la que tendrá acceso a

todas las acciones que se puede hacer desde el aplicativo o la vista del

usuario en la que solo podrá consultar información. (Ver Figura 47)

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

74

Figura 47. Mostrando el login de la aplicación. Elaboración Propia

En la vista principal del tesorero tendremos un menú que consta de los

siguientes elementos: Inicio, Usuarios, Tesoreros, Pagos de Agua, Servicios

de Agua. Al hacer clic en Usuarios, nos mostrará en una tabla la lista de los

usuarios creados y las opciones para Crear Cuenta Usuario, Editar Usuario y

Buscar un usuario. (Ver Figura 48)

Figura 48. Mostrando la lista de usuarios. Elaboración Propia.

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

75

Continuando desde el menú, al hacer clic en Tesoreros, nos mostrará en una

tabla la lista de todos los tesoreros registrados en el sistema y las opciones

para Nuevo Tesorero, Editar Tesorero y Buscar un tesorero. (Ver Figura 49)

Figura 49. Mostrando la lista de tesoreros. Elaboración Propia

Siguiendo desde el menú, al hacer clic en Pagos de Agua y luego en Lista de

Pagos, nos mostrará en una tabla la lista de los pagos de agua registrados y

las opciones para Nuevo Pago, Generar Recibo y Buscar un pago de agua.

(Ver Figura 50)

Figura 50. Mostrando la lista de los pagos de agua. Elaboración Propia

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

76

Por último, desde el menú del tesorero al hacer clic en Servicios de Agua y

luego en Lista de Servicios, nos mostrará en una tabla la lista de los servicios

de agua de los usuarios registrados en el sistema y las opciones para Nuevo

Servicio Agua, Historial, Activar Servicio y Suspender Servicio. (Ver Figura 51)

Figura 51. Mostrando la lista de los servicios de agua de los usuarios. Elaboración Propia

En la vista principal del usuario tendremos un menú que consta de los

siguientes elementos: Inicio, Consultas. Al hacer clic en Consultas y luego en

Pagos de Agua, nos mostrará en una tabla la lista de los pagos de agua de

dicho usuario logueado y la opción de Buscar. (Ver Figura 52)

Figura 52. Mostrando la lista de pagos de agua del usuario logueado. Elaboración Propia

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

77

Pruebas de carga

Para realizar las pruebas al software se usó la herramienta de JMeter.

Pruebas que se detallan a continuación:

Prueba de carga de iniciar sesión. (Ver Figura 53)

Figura 53. Prueba de carga de inisiar sesión. Elaboración Propia

Prueba de carga de Crear Usuario. (Ver Figura 54)

Figura 54. Prueba de carga de crear usuario. Elaboración Propia

Pruebas de funcionalidad

Para realizar las pruebas de funcionalidad se aplicó una ficha de verificación

de requerimientos al usuario final, el usuario final procedió a usar la aplicación

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

78

y luego llenó la ficha; los resultados del cumplimiento de los requerimientos

se detallan a continuación:

Tabla 21. Requerimientos cubiertos por la aplicación.

Registros: 54 Nro. De Tabla: 21

CÓDIGO DESCRIPCIÓN CUBIERTO

RF 001 Ingresar al sistema a través de un usuario y

contraseña.

RF 002 Al tesorero crear cuentas de usuario para cada

usuario del agua.

RF 003 Al tesorero editar, buscar usuarios del agua

registrados en el sistema.

RF 004 Al tesorero ver el listado de usuarios registrados

en el sistema.

RF 005 Al tesorero validar cuentas de usuario a traves del

usuario.

RF 006 Al tesorero crear, editar y buscar tesoreros de la

Junta Directiva del Agua.

RF 007 Al tesorero ver el listado de tesoreros registrados

en el sistema.

RF 008 Al tesorero crear, buscar los pagos de agua de

cada usuario.

RF 009 Al tesoreo ver el listado de pagos de agua

registrados en el sistema.

RF 010 Al tesorero generar el recibo de pago de agua de

cada usuario.

RF 011 Al tesorero crear, buscar servicios de agua de

cada usuario.

RF 012 Al tesorero ver el listado de servicios de agua de

los usuarios.

RF 013 Al tesorero validar registro del servicio de agua de

cada usuario a traves del usuario del agua.

RF 014 Al tesorero suspender el servicio de agua del

usuario.

RF 015 Al tesorero activar el servicio de agua de un

usuario que tenga suspendido su servicio.

RF 016 Al tesorero ver historial de los servicios de

suspensiones de los usuarios.

RF 017 Al usuario buscar los registros de pagos de agua

registrados por el tesorero.

RF 018 Al usuario ver el listado de todos sus pagos de

agua registrados en el sistema.

Total de datos: 54

Nota: Elaboración Propia

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

79

7. CONCLUSIONES

El uso de la metodología ICONIX facilitó en gran medida el desarrollo de

la aplicación, estructurándola de una forma clara y ordenada; ICONIX en

cada una de sus fases contiene los modelos o diagramas que permiten

estructurar y entender claramente el desarrollo de la aplicación.

En el análisis y levantamiento de información, se logró obtener la

información de la situación actual que presentaba la Junta Directiva en

relación a los pagos de agua de los usuarios y así permitió obtener los

requerimientos necesarios para desarrollar la aplicación web.

El diseño del software, se realizó gracias a los requerimientos funcionales

que se establecieron previamente luego de haber aplicado las técnicas de

recolección de información, lo cual permitió diseñar todo el ciclo de vida

del software.

La implementación del software, se realizó en base al diseño pre-

establecido en la cual se usó el lenguaje de programación Python con su

framework Django, una vez codificada la aplicación se procedió a alojarla

en un VPS y asi permitió que se pudiera acceder a la aplicación web a

través de un dominio.

En las pruebas de funcionalidad realizadas a la aplicación web permitieron

verificar la eficiencia en el tiempo de espera de respuestas de las

peticiones que se realizan a la aplicación, arrojando resultados esperados

para la satisfacción del usuario final, cumpliendo así con los

requerimientos establecidos.

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

80

8. RECOMENDACIONES

Para el desarrollo de una aplicación ya sea web o móvil se recomienda

a los desarrolladores de sistemas en primera instancia hacer uso de

una metodología de desarrollo, con el fin de seguir un proceso

ordenado e interactivo que facilite su desarrollo, la metodología

ICONIX se la recomienda para el desarrollo de proyectos de corto y

mediano plazo como fue el caso del presente proyecto.

Al retomar el proyecto, en el desarrollo del mismo se recomienda

trabajar con la API del registro civil para obtener usuarios con

información más exacta y real para luego registrarlos en el sistema.

Para hacer uso correcto de la aplicación web se recomienda capacitar

a las personas involucradas en el manejo de la aplicación para así

evitar posibles errores en el manejo de la información.

Para realizar pruebas de funcionalidad de una aplicación se

recomienda al usuario final interactuar con la aplicación desarrollada y

registrar su experiencia con la misma en un documento de verificación

de requerimientos del sistema con el fin de comprobar que la

aplicación satisface las necesidades del usuario final.

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

81

9. BIBLIOGRAFÍA

©1999-2021 Webempresa. (s.f.). ¿Qué es un Dominio y cómo funciona? Obtenido de

webempresa: https://www.webempresa.com/hosting/que-es-dominio.html

ARIMETRICS. (s.f.). Qué es Bootstrap. Obtenido de ARIMETRICS:

https://www.arimetrics.com/glosario-digital/bootstrap

B., G. (09 de agosto de 2021). ¿Qué es HTML? Explicación de los fundamentos del Lenguaje

de marcado de hipertexto. Obtenido de HOSTINGER TUTORIALES:

https://www.hostinger.es/tutoriales/que-es-html

Belido, R. (24 de marzo de 2021). ¿Qué es Python y cuáles son las ventajas de programar

con este lenguaje? Obtenido de DEUSTO FORMACIÓN:

https://www.deustoformacion.com/blog/programacion-diseno-web/que-es-

python-cuales-son-ventajas-programar-con-este-lenguaje

Borges, S. (19 de noviembre de 2019). Servidor PostgreSQL. Obtenido de infranetworking:

https://blog.infranetworking.com/servidor-postgresql/

Camino Bueno, P. (03 de agosto de 2018). Qué es Django y por qué usarlo. Obtenido de

OpenWebinars: https://openwebinars.net/blog/que-es-django-y-por-que-usarlo/

de Souza, I. (14 de junio de 2019). ¿Qué es un servidor web y para qué sirve en Internet?

Obtenido de rockcontent | blog: https://rockcontent.com/es/blog/que-es-un-

servidor/

Django. (s.f.). Migraciones. Obtenido de django:

https://docs.djangoproject.com/en/3.1/topics/migrations/

Gutiérrez, J. (s.f.). ¿Qué es un framework web? Obtenido de Departamento de Lenguajes y

Sistemas Informáticos:

http://www.lsi.us.es/~javierj/investigacion_ficheros/Framework.pdf

Kinsta. (8 de noviembre de 2020). ¿Qué Es Nginx y Cómo Funciona? Obtenido de KINSTA:

https://kinsta.com/es/base-de-conocimiento/que-es-nginx/

Kinsta Inc. (12 de abril de 2021). ¿Qué Es Nginx y Cómo Funciona? Obtenido de Kinsta:

https://kinsta.com/es/base-de-conocimiento/que-es-nginx/

Krall, C. (2019). ¿Qué es y para qué sirve UML? Versiones de UML (Lenguaje Unificado de

Modelado). Tipos de diagramas UML. Obtenido de aprenderaprogramar.com:

https://www.aprenderaprogramar.com/index.php?option=com_content&view=arti

cle&id=688:ique-es-y-para-que-sirve-uml-versiones-de-uml-lenguaje-unificado-de-

modelado-tipos-de-diagramas-uml&catid=46&Itemid=163

Manz. (s.f.). ¿Qué es CSS? Obtenido de Lenguaje CSS:

https://lenguajecss.com/css/introduccion/que-es-css/

Ortiz, Á. (06 de marzo de 2019). ¿Qué es NGINX? Una mirada básica a lo que es y cómo

funciona. Obtenido de GM: https://www.hostdime.la/blog/que-es-nginx-una-

mirada-basica-a-lo-que-es-y-como-funciona/

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

82

Peiró, R. (2021). Base de datos. Obtenido de Economipedia:

https://economipedia.com/definiciones/base-de-datos.html

Peiró, R. (2021). Base de datos. Obtenido de Economipedia:

https://economipedia.com/definiciones/base-de-datos.html

R. A. (03 de agosto de 2021). ¿Qué es un hosting o alojamiento web? Obtenido de Mi

Posicionamiento Web: https://miposicionamientoweb.es/que-es-un-hosting/

reicek. (2015). Qué es PostgreSQL y cuáles son sus ventajas. Obtenido de Platzi:

https://platzi.com/blog/que-es-postgresql/

Robledano, Á. (23 de septiembre de 2019). Qué es Python: Características, evolución y

futuro. Obtenido de OpenWebinars: https://openwebinars.net/blog/que-es-

python/

Rock Content, R. (20 de abril de 2019). ¿Qué es un lenguaje de programación y qué tipos

existen? Obtenido de Rock Content: https://rockcontent.com/es/blog/que-es-un-

lenguaje-de-programacion/

Romero Bernal, J. P. (2021). Introducción a Django Rest Framework. Obtenido de axiacore:

https://axiacore.com/blog/introduccion-a-django-rest-framework-

460/#:~:text=Django%20Rest%20Framework%20es%20una,lo%20son%3A%20POST

%20y%20GET.

Segovia, J. (30 de agosto de 2018). Ventajas y Desventajas de PostgreSQL. Obtenido de

TodoPostgreSQL: https://www.todopostgresql.com/ventajas-y-desventajas-de-

postgresql/

Sparx Systems. (2021). Enterprise Architect. Obtenido de SPARX SISTEMS:

http://www.sparxsystems.com.ar/products/ea/features.php

TecnoGeekPro. (27 de febrero de 2019). Hostinger (Opiniones y características). Obtenido

de WPInsideOut: https://wpinsideout.com/mejor-hosting-wordpress/hostinger/

VENEGAS MENDOZA, J. M. (30 de marzo de 2018). Django, Gunicorn, Nginx y Supervisor.

Obtenido de RUKBOTTOLAND: https://rukbottoland.com/blog/django-gunicorn-

nginx-supervisor/

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

83

GLOSARIO

Analistas funcionales: son aquellos que definen qué debe hacer un

programa sin entrar a escribir el código.

Analistas programadores: son aquellos que, dado un problema, lo estudian

y escriben el código informático para resolverlo en un lenguaje como Java,

C#, Python o cualquier otro.

Herramientas escalables: son aquellas herramientas que permiten que

nuestro proyecto alcance paso a paso el rendimiento que se pretende

alcanzar en un futuro.

CSRF: el Cross Site Request Forgery (CSRF o XSRF) es un tipo de ataque

que se suele usar para estafas por Internet. Los delincuentes se apoderan de

una sesión autorizada por el usuario (session riding) para realizar actos

dañinos. El proceso se lleva a cabo mediante solicitudes HTTP.

Proxy inverso: es un tipo de servidor proxy que recupera recursos en nombre

de un cliente desde uno o más servidores.

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

84

ANEXOS

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

¡Fórjate un mejor Futuro!

“DESARROLLO E IMPLEMENTACIÓN DE UNA APLICACIÓN

WEB PARA LA ADMINISTRACIÓN DE PAGOS DE AGUA DEL

BARRIO EL ZARZA - CANTÓN YANTZAZA”

LÍNEA DE INVESTIGACIÓN:

ADAPTACIÓN TECNOLÓGICA E INNOVACIÓN

SUB-LÍNEA DE INVESTIGACIÓN

SISTEMAS DE INFORMACIÓN

CARRERA:

TECNOLOGÍA SUPERIOR EN DESARROLLO DE SOFTWARE

AUTOR:

ALEJANDRO CAMACHO LIDIA MARITZA

TUTOR:

ING. YANDRY RAMÍREZ

FECHA:

25 de febrero de 2021

YANTZAZA - ZAMORA CHINCHIPE – ECUADOR

2021

Proyecto de Tesis previo a la

obtención del título de Tecnóloga

en Desarrollo de Software

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

2

1 TEMA: “DESARROLLO E IMPLEMENTACIÓN DE UNA

APLICACIÓN WEB PARA LA ADMINISTRACIÓN DE

PAGOS DE AGUA DEL BARRIO EL ZARZA – CANTÓN

YANTZAZA”

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

3

2 PROBLEMA

En la actualidad se han venido realizando los pagos de agua al tesorero de la

Junta Directiva de Agua Potable en el barrio El Zarza, en la cual, los pagos de

agua que realiza cada usuario son mes a mes durante todo el año.

El usuario que debe por el servicio de agua, al momento de acercarse a pagar

tiene que esperar a que el tesorero haga cuentas de cuanto está debiendo tal

usuario desde que mes hasta la fecha actual, el cual es un proceso muy

tedioso tanto para el usuario y para el tesorero, el poder llevar el control de

los pagos que adeudan los usuarios que no han cancelado y a la vez es

pérdida de tiempo para el tesorero, y al momento de entregar los

comprobantes de pago a los usuarios es posible que estos se pierdan. Todo

queda registrado en una libreta que lleva el tesorero, pero puede ser que se

pierdan los registros y por consecuente se pierda toda la información de los

pagos de agua.

En la actualidad existen muchas herramientas tecnológicas que nos permiten

mejorar, sistematizar y aprovechar al máximo cada uno de estos recursos

tecnológicos. Hasta la fecha la tecnología ha ido revolucionando

permitiéndonos lograr varios objetivos de una forma más eficiente y

productiva, razón por la cual surge el estudio de este suceso donde los pagos

de agua se los sigue realizando de forma manual, es así, que surge la

necesidad de crear un software en donde mediante una aplicación web se

permita al tesorero registrar los pagos de agua, gestionar los usuarios, enviar

el respectivo comprobante de pago al correo del usuario y ver a detalle los

usuarios que adeudan del servicio.

“Los pagos de agua que lleva a cabo el tesorero de la Junta Directiva, el

registro de los nuevos usuarios y los comprobantes de pago, los realiza

de forma manual provocando inseguridad en la información, pérdida de

tiempo y dando lugar a que posiblemente se pierda la información de los

registros”

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

4

3 JUSTIFICACIÓN

En el transcurso de la carrera que he venido estudiando he adquirido los

debidos conocimientos los cuales me permiten realizar el proyecto de tesis

con mayor facilidad, y a la vez, aclarar que este proyecto servirá como guía y

aporte para futuros proyectos por los estudiantes de los ciclos inferiores.

En el presente proyecto, el factor económico no es un problema ya que no se

usarán demasiados recursos físicos, además que se utilizará software libre

que no tiene ningún costo alguno y en caso de que existiera algún costo, este

correrá por cuenta del investigador.

Los recursos técnicos y tecnológicos a usarse son herramientas muy útiles y

provechosas que procuran tener una mejor interacción entre el usuario y la

aplicación que se desarrollará con las siguientes herramientas: Enterprise

Architect para el modelado, Bootstrap para el diseño FrontEnd, Postgres

para la base de datos, Nginx para el servidor, Hostinger para el hosting,

Python como lenguaje de programación y Django como framework.

El sistema a desarrollar será una aplicación de fácil manejo logrando obtener

toda la atención del usuario con un entorno llamativo y amigable haciendo que

su experiencia con el sistema sea más fácil y sobre todo el poder llevar a cabo

determinado proceso en este caso el de realizar los pagos de agua.

Este sistema se lo desarrollará de manera digital teniendo en cuenta al medio

ambiente. En lugar de que se contamine al ambiente, el software va a

contribuir reduciendo el uso de papel.

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

5

4 REVISIÓN DE LITERATURA

4.1 CONTEXTO Y ESTADO DEL ARTE

4.1.1 Contexto

Historia del Agua Potable y la Junta Directiva en el Barrio El Zarza

Figura 1. Tanques de Agua Potable en el Zarza - 2021. Elaboración Propia

Los tanques de agua potable se encuentran ubicados en las afueras del barrio

El Zarza a 775m vía al Barrio El Blanco, parroquia Los Encuentros, cantón

Yantzaza, provincia Zamora Chinchipe creado en el año 2003, mismo año en

el que se crea la Junta Directiva. En 2003 la Junta Directiva del Agua es

conformada por el Sr. Mario Macas como presidente y un total de 25 usuarios

activos.

El 8 de septiembre de 2004, en el Acta N°4 se acordó mediante reunión de la

asamblea hacer un oficio al Sr. Estuardo Arteaga encargado de la alcaldía de

Yantzaza con la finalidad de solicitarle arena para los tanques de agua

potable. El 27 de mayo de 2006, en el Acta N°10 a través de una reunión de

la asamblea se hace el cambio de directiva quedando como presidente el Sr.

Ángel Calva. El 19 de junio del mismo año, en el Acta N°11 la comisión hecha

al Alcalde en el municipio de Yantzaza sobre el Contrato de los Tanques de

Agua en la cual el alcalde ha manifestado que se deberá presentar el Acta del

Contrato.

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

6

El 12 de marzo de 2007, en el Acta N°14 la asamblea queda a sacar una

autorización a la Jefe Política para pagar el agua por medio de medidores. El

1 de julio del mismo año, en el Acta N°16 mediante resolución de la asamblea

se hace el cambio de directiva quedando como presidente el Sr. Máximo

Armijos. El 15 de octubre 2008, en el Acta N°18 mediante resolución de la

asamblea se cambia la directiva quedando como presidente el Sr. Máximo

Armijos y contando con 37 usuarios activos. El presidente manifiesta que ha

hablado con el presidente del municipio para hacer otro tanque de agua.

El 16 de enero de 2009, en el Acta N°20 la asamblea hace el cambio de

directiva quedando como presidente el Sr. Rodrigo Espinoza. El 19 de marzo

del mismo año se inaugura la nueva red de agua potable por parte de la Junta

Directiva. El 3 de abril de 2010, en el Acta N°24 por decisión de la asamblea

se cambia la directiva quedando como presidente el Sr. Máximo Armijos. El 3

de julio del mismo año, en el Acta N°26 el Sr. Máximo Armijos manifiesta que

el tanque de pre-filtro ya se encuentra en construcción y queda en pedir la

clorificadora. El 1 de noviembre del mismo año, en el Acta N°27 el presidente

manifiesta que ya ha comprado los materiales para hacer el encerramiento de

los tanques de agua.

El 24 de abril de 2015 se reúne una comisión para ir a Ecuador Estratégico y

dar a conocer sobre la nueva fuente de agua ya que la que se tiene no

abastece para dar servicios a usuarios futuros. Se da a conocer que la

reinstalación del servicio tendrá un costo de 50$.

El 5 de octubre de 2019, en el Acta N°48 se conforma la nueva directiva

quedando como presidente el Sr. Pedro Alejandro, hasta la fecha existen 49

usuarios activos que hacen uso del servicio.

MISIÓN

Brindar el servicio de Agua Potable a todos los moradores del barrio El Zarza.

VISIÓN

Tener una fuente de agua más extensa para brindar más servicios de Agua

Potable a futuros usuarios y el ofrecer servicios de calidad para quienes hagan

uso del mismo.

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

7

4.1.2 Estado del Arte

Mediante desarrollo e implementación de un sistema de gestión y control de

pagos de agua para el tesorero de la Junta Directiva de Agua Potable de El

Zarza se estima reducir el tiempo invertido en registrar los pagos y entregar

los comprobantes del mismo, el contribuir a la protección del medio ambiente

con la disminución de papel para cada comprobante de pago físico y los

registros del mismo. Este software permitirá ingresar a la aplicación web

mediante un usuario y contraseña, crear nuevos usuarios del agua potable,

registrar el pago de agua y enviar el comprobante de pago a través del correo

electrónico. Además, asegurar que los datos una vez guardados no podrán

ser modificados, y así mostrar a los usuarios que pagan por el servicio que el

sistema es confiable.

En la ciudad de Babahoyo en la Universidad Técnica de Babahoyo, en la

facultad de Administración, Finanzas e Informática se encuentra la tesis de

grado titulada “Sistema Informático para la facturación y control de usuarios

de la Junta Administradora de Agua Potable y Alcantarillado Santandereana

de la provincia de Bolívar” en el año 2015 desarrollada por José Luis Muñoz

Carrera. El sistema realiza el ingreso de los usuarios a la base de datos,

ingresa el código de los medidores que serán asignados de forma única a

cada usuario, con el cual se puede saber a qué medidor pertenece y a que

usuario respectivo para así poder facturar el consumo de cada usuario, evitar

la pérdida de información y la mala atención al usuario cuando este se acerca

a cancelar el consumo de cada mes. Este sistema fue desarrollado con PHP,

SQLyog y WampServer (Universidad Técnica de Babahoyo, 2015)

Conclusión: A diferencia del software de la Universidad Técnica de

Babahoyo de José Luis Muñoz Carrera, el sistema será desarrollado con

nuevas herramientas tecnologías actualizadas más flexibles, centralizadas y

de mayor productividad como Python, Postgrest, Apache, Enterprise Architec,

Django, Bootstrap y Hostinger.

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

8

4.2 DESARROLLO ESPECÍFICO DE LA CONTRIBUCIÓN

4.2.1 Lenguaje Unificado de Modelado (UML)

UML son las siglas de “Unified Modeling Language” o “Lenguaje Unificado de

Modelado”. Se trata de un estándar que se ha adoptado a nivel internacional

por numerosos organismos y empresas para crear esquemas, diagramas y

documentación relativa a los desarrollos de software (programas

informáticos). (Krall, 2019)

UML es una herramienta propia de personas que tienen conocimientos

relativamente avanzados de programación y es frecuentemente usada por

analistas funcionales (aquellos que definen qué debe hacer un programa sin

entrar a escribir el código) y analistas-programadores (aquellos que, dado un

problema, lo estudian y escriben el código informático para resolverlo en un

lenguaje como Java, C#, Python o cualquier otro). Por tanto, si estás dando

tus primeros pasos en programación, te recomendaríamos que te olvides de

UML hasta que tengas unos conocimientos mínimos como uso de

condicionales, bucles, y conocimiento de la programación orientada a objetos.

Esto es solo una recomendación, en realidad prácticamente cualquier persona

puede usar UML, incluso podría usarse para realizar esquemas o

documentación de procesos que no tengan que ver con la informática. (Krall,

2019)

Enterprise Architect

Es una plataforma de modelado, diseño y administración, colaborativa,

basada en UML 2.5 y estándares relacionados. Ágil, intuitiva y extensible, con

poderosas características para dominios específicos totalmente integradas, a

una fracción del costo de muchos competidores. Una solución para toda la

empresa que permite visualizar, analizar, modelar, probar y mantener un

amplio rango de sistemas, software, procesos y arquitecturas. Basado en

equipos, con un historial probado y más de 740,000 usuarios en todo el

mundo. Enterprise Architect es el conjunto de herramientas escalable,

compatible con muchos estándares y es perfecta para su próximo proyecto.

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

9

4.2.2 Lenguajes de Programación

Un lenguaje de programación es un lenguaje formal que, mediante una serie

de instrucciones, le permite a un programador escribir un conjunto de órdenes,

acciones consecutivas, datos y algoritmos para de esa forma, crear

programas que controlen el comportamiento físico y lógico de una máquina.

Mediante este lenguaje se comunican el programador y la

máquina, permitiendo especificar, de forma precisa, aspectos como:

cuáles datos debe operar un software específico;

cómo deben ser almacenados o transmitidos esos datos;

las acciones que debe tomar el software dependiendo de las

circunstancias variables.

En general un lenguaje de programación sirve para programar. Sin embargo,

cada uno tiene un alcance y forma de comunicación diferente.

Tabla 1. Esta es una tabla comparativa de los lenguajes de programación

TABLA COMPARATIVA DE LENGUAJES DE PROGRAMACIÓN

Lenguajes de programación

Registros: 3 Nro. De Tabla: 1

Detalles Java Python JavaScript

Utilizado para crear

Aplicaciones

Android, páginas

web grandes

Frameworks

Scripting

Aplicaciones web

Páginas web dinámicas

Ventajas Máquina virtual de

Java

Robusto

Seguro

Multihilo de alto

rendimiento

Fácil de leer

Fácil de aprender

Velocidad

Simplicidad

Versatilidad

Carga del

servidor

Desventajas Reglas estrictas

reducen flexibilidad

Utiliza más

memoria que C++

Más lento que los demás

El mal uso de identación

puede causar problemas

ocasionales

Seguridad

Confianza en

el usuario

Total de datos: 21

Nota: Elaboración Propia

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

10

Python

Python es un lenguaje de programación interpretado cuya filosofía hace

hincapié en la legibilidad de su código. Se trata de un lenguaje de

programación multiparadigma, ya que soporta orientación a objetos,

programación imperativa y, en menor medida, programación funcional. Es

un lenguaje interpretado, dinámico y multiplataforma.

Python tiene una gran biblioteca estándar, usada para una diversidad de

tareas. Esto viene de la filosofía "pilas incluidas" ("batteries included") en

referencia a los módulos de Python. Los módulos de la biblioteca estándar

pueden mejorarse por módulos personalizados escritos tanto en C como en

Python.

Una de las razones de su éxito es que cuenta con una licencia de código abierto

que permite su utilización en cualquier escenario. Esto hace que sea uno de

los lenguajes de iniciación de muchos programadores siendo impartido en

escuelas y universidades de todo el mundo. Sumado a esto cuenta con grandes

compañías que hacen de este un uso intensivo. Tal es el caso de Google,

Facebook o Youtube, ya que permite, entre otras de sus características

la automatización de procesos y ejecución de tareas en tanto en entorno cliente

como servidor.

4.2.3 Bases de Datos

Una base de datos hace referencia al conjunto de datos o informaciones

determinadas que se pueden consultar de manera ágil, y segmentando las

características que se quieran destacar para concretar más la información que

se pretende revisar. (Peiró, 2021)

Por ejemplo, si tenemos una clínica veterinaria tendremos una base de datos

de todos los clientes, en la que se pueden incluir campos como el nombre del

animal, su historia médica, su número de teléfono, calendario de vacunación

y datos de gran relevancia. De tal forma que cuando se quiera consultar

cualquier aspecto concreto, se podrá seleccionar el campo y obtener una

información inmediata sobre ello. (Peiró, 2021)

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

11

Tabla 2. Esta es una tabla comparativa de las bases de datos.

TABLA COMPARATIVA DE BASES DE DATOS

Bases de Datos

Registros: 7 Nro. De Tabla: 2

Características MySQL PostgreSQL SQL Server

Grandes capacidades de memoria X X

Es orientado a objetos X X X

Funcionan en diferentes plataformas X

Permite restaurar nuestra base de datos a cualquier punto en el tiempo

X

Permite trabajar en modo cliente-servidor

X

Tiene texto de largo ilimitado X

Tiene licencia gratis X X

Total de datos: 21

Nota: Elaboración Propia

PostgreSQL

Es un sistema de código abierto de administración de base de datos del tipo

relacional, aunque también es posible ejecutar consultas que sean no

relacionales. En este sistema, las consultas relacionales se basan en SQL,

mientras que las no relacionales hacen uso de JSON. (Borges, 2019)

Michael Stonebraker inicio el proyecto bajo el nombre Post Ingres a mediados

de los 80’s con la idea de solucionar problemas existentes en las bases de

datos en esa época. MySQL fue por mucho tiempo el motor más popular; pero

hoy es propiedad de Oracle y esto limita su evolución. (reicek, 2015)

Es gratuito y libre, además de que hoy nos ofrece una gran cantidad de

opciones avanzadas. De hecho, es considerado el motor de base de datos

más avanzado en la actualidad. (reicek, 2015)

En Postgres no se requiere usar bloqueos de lectura al realizar una

transacción lo que nos brinda una mayor escalabilidad, aporta mucha

flexibilidad a nuestros proyectos ya que nos permite definir funciones

personalizadas por medio de varios lenguajes (pgSQL, Tcl, Perl, Python,

PHP, Ruby, Java) y está disponible para muchas plataformas. (reicek, 2015)

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

12

4.2.4 Html

HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de

marcas de hipertexto’), hace referencia al lenguaje de marcado para la

elaboración de páginas web. Es un estándar que sirve de referencia del

software que conecta con la elaboración de páginas web en sus diferentes

versiones, define una estructura básica y un código (denominado código

HTML) para la definición de contenido de una página web, como texto,

imágenes, videos, juegos, entre otros. (Wikipedia, 2021)

HTML se considera el lenguaje web más importante siendo su invención

crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW).

Es el estándar que se ha impuesto en la visualización de páginas web y es el

que todos los navegadores actuales han adoptado. (Wikipedia, 2021)

HTML es un lenguaje de marcado que nos permite indicar la estructura de

nuestro documento mediante etiquetas. Este lenguaje nos ofrece una gran

adaptabilidad, una estructuración lógica y es fácil de interpretar tanto por

humanos como por máquinas. (Wikipedia, 2021)

4.2.5 Css

CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de

estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la

presentación de un documento estructurado escrito en un lenguaje de

marcado. Es muy usado para establecer el diseño visual de los documentos

web, e interfaces de usuario escritas en HTML o XHTML. Te puede ayudar a

crear tu propio sitio web. Junto con HTML y JavaScript, CSS es una tecnología

usada por muchos sitios web para crear páginas visualmente atractivas,

interfaces de usuario para aplicaciones web y GUIs para muchas

aplicaciones móviles (como Firefox OS). (Wikipedia, 2021)

4.2.6 Bootstrap

Bootstrap es un framework CSS de código abierto que favorece el desarrollo

web de un modo más sencillo y rápido. Incluye plantillas de diseño basadas

en HTML y CSS con la que es posible modificar tipografías, formularios,

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

13

botones, tablas, navegaciones, menús desplegables, etc. También existe la

posibilidad de utilizar extensiones de Javascript adicionales. (ARIMETRICS)

Fue desarrollado inicialmente por Twitter en 2011 y permite crear interfaces

de usuario limpias y compatibles con todo tipo de dispositivos. Entre las

ventajas que tiene Bootstrap es que favorece el design responsive, el cual se

utiliza para mejorar la experiencia de los usuarios en el sitio web y en

consecuencia el posicionamiento. (ARIMETRICS)

4.2.7 Django

Django es un framework de desarrollo web de código abierto, escrito

en Python, que respeta el patrón de diseño conocido como modelo–vista–

controlador (MVC). La meta fundamental de Django es facilitar la creación de

sitios web complejos. Django pone énfasis en el re-uso, la conectividad y

extensibilidad de componentes, el desarrollo rápido y el principio No te

repitas (DRY, del inglés Don't Repeat Yourself). Python es usado en todas las

partes del framework, incluso en configuraciones, archivos, y en los modelos

de datos.

Django incluye un servidor web liviano para realizar pruebas y trabajar en la

etapa de desarrollo. En la etapa de producción, sin embargo, se

recomienda Apache 2 con mod_python. Aunque Django soporta la

especificación WSGI, por lo que puede correr sobre una gran variedad de

servidores como FastCGI o SCGI en Apache u otros servidores

(particularmente Lighttpd)

4.2.8 Servidor

Un servidor es una aplicación en ejecución capaz de atender las peticiones de

un cliente y devolverle una respuesta en concordancia. Los servidores se

pueden ejecutar en cualquier tipo de computadora, incluso en computadoras

dedicadas a las cuales se les conoce individualmente como «el servidor».

(Wikipedia, 2020)

Los servidores operan a través de una arquitectura cliente-servidor. Los

servidores son programas de computadora en ejecución que atienden las

peticiones de otros programas: los clientes. Por tanto, el servidor realiza otras

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

14

tareas para beneficio de los clientes; les ofrece la posibilidad de compartir

datos, información y recursos de hardware y software. Los clientes

usualmente se conectan al servidor a través de la red, pero también pueden

acceder a él a través de la computadora donde está funcionando. En el

contexto de redes Internet Protocol(IP), un servidor este es un programa que

opera como oyente de un socket. (Wikipedia, 2020)

Tabla 3. Esta es una tabla comparativa de los servidores web

TABLA COMPARATIVA DE SERVIDORES WEB

Servidores Web

Registros: 5 Nro. De Tabla: 3

Características GlassFish Apache Nginx

Tiene código abierto X X X

Fácil configuración X X X

Multiplataforma X X X

Es gratuito X X X

Es de alto rendimiento X X

Seguridad X X X

Total de datos: 17

Nota: Elaboración Propia

Nginx

Creado por el ruso Igor Sysoev, Nginx es un servidor de software libre y de

código abierto, que está licenciado bajo una licencia BSD; también existe una

versión comercial que se distribuye bajo el nombre de Nginx Plus. Es un

servidor multiplataforma, por lo que corre en sistemas GNU/Linux, BSD,

Solaris, Mac OS X) así como también en sistemas Microsoft Windows.

Es perfecto para despachar tanto archivos estáticos o contenido dinámicos ya

que es posible integrar con mayoría de los lenguajes de programación

modernos para generar contenido dinámico. Su principal atributo es su

velocidad y alto rendimiento, siendo capaz de soportar más de 10.000

conexiones simultáneas, además de un bajo uso de recursos junta una

sencilla, flexible y poderosa sintaxis de configuración.

Algunas características comunes que se ven en NGINX incluyen:

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

15

Proxy inverso con caché

IPv6

Balanceo de carga

Soporte FastCGI con almacenamiento en caché

Websockets

Manejo de archivos estáticos, archivos de índice y auto indexación

TLS / SSL con SNI

4.2.9 Hosting

El alojamiento web (en inglés: web hosting) es el servicio que provee a

los usuarios de Internet un sistema para poder almacenar información,

imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía

de "hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa un

lugar específico, en este caso la analogía alojamiento web o alojamiento de

páginas web, se refiere al lugar que ocupa una página web, sitio web,

sistema, correo electrónico, archivos, en Internet o más específicamente en

un servidor, que por lo general hospeda varias aplicaciones o páginas web.

Las compañías que proporcionan espacio de un servidor a sus clientes se

suelen denominar con el término en inglés web host. El hosting u hospedaje

es un espacio en un servidor en el cual se guardará toda la información de tu

sitio web y estará activo durante un año.

Tabla 4. Esta es una tabla comparativa de los hostings

TABLA COMPARATIVA DE HOSTINGS

Hostings

Registros: 7 Nro. De Tabla: 4

Características Hostinger HostGator SiteGround

Migración del sitio web

Gratis Gratis No incluido

Almacenamiento SSD

100 GB 75 GB 10 GB

Copia de seguridad Diaria Semanal Diaria

Ancho de banda Ilimitado Ilimitado 10 000 visitas/mes

Creador de sitios Gratis Gratis Gratis

Certificados SSL Gratis Gratis Gratis

Dominio Gratis Gratis No incluido

Total de datos: 21

Nota: Elaboración Propia

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

16

Hostinger

Hostinger se lanzó de nuevo en 2004 y se ubicó originalmente en Kaunas,

Lituania. Hoy en día, la empresa tiene oficinas en todo el mundo y ofrece una

amplia gama de servicios de alojamiento que incluyen Alojamiento

compartido, Alojamiento de VPS e incluso un creador de sitios web.

Con un sólido equipo localizado, Hostinger ha existido durante más de 10 años

y ha construido de manera constante una base de usuarios internacionales

que se extiende por todos los países 39. Desde el alojamiento sin riesgo para

principiantes hasta la infraestructura de VPS en la nube avanzada, Hostinger

pretende atender a la mayor audiencia posible. Como resultado, Hostinger

ahora alberga más de 29 millones de usuarios globales.

Características

Constructor de sitio web fácil

Instalador automático (WordPress, Joomla, etc)

Cuentas de alojamiento de correo electrónico

Soporte de chat en vivo 24 / 7 / 365

Alojamiento de características completas a un costo casi gratuito

Especificación

Espacio en disco: 10 GB SSD

Ancho de banda: 100 GB

Base de datos: bases de datos MySQL 1

Panel de control: Cpanel

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

17

5 OBJETIVOS

5.1 OBJETIVO GENERAL

Desarrollar e implementar una aplicación web para la administración de

pagos de agua del Barrio El Zarza – Cantón Yantzaza.

5.2 OBJETIVOS ESPECÍFICOS

Realizar un análisis preliminar y levantamiento de información para

establecer requerimientos necesarios de la aplicación a desarrollar.

Diseñar el software en base a los requerimientos establecidos para así

tener una idea clara de la aplicación a desarrollar.

Codificar el software teniendo un diseño pre-establecido del mismo

para empezar a construir la aplicación.

Implementar y realizar las respectivas pruebas al software para la

respectiva corrección de posibles errores arrojados por la aplicación

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

18

6 HIPÓTESIS

6.1 HIPÓTESIS GENERAL

Desarrollar una aplicación web para la Junta Directiva de Agua Potable del

Barrio El Zarza – Cantón Yantzaza, permitirá optimizar los procesos de

administración de pagos de agua que el tesorero hace de forma manual.

6.2 HIPÓTESIS ESPECÍFICAS

A través del análisis preliminar y la información obtenida de la situación

actual de la Junta Directiva de Agua Potable se procederá a desarrollar

una aplicación web que cumpla con las necesidades de la misma.

La aplicación web se diseñará con todos los requisitos establecidos

luego de haber hecho el levantamiento de información.

El software se codificará en base al diseño pre-establecido y haciendo

uso de las herramientas tecnológicas descritas en el proyecto.

La implementación y las respectivas pruebas hechas a la aplicación

asegurará que el software es eficiente, funcional y rápido al momento

de ejecutar los procesos cubiertos por la aplicación.

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

19

7 METODOLOGÍA

La metodología a usar en el presente proyecto de investigación será la

Metodología Iconix.

7.1 ICONIX

Iconix es un proceso simplificado en comparación con otras metodologías

tradicionales, unifica un conjunto de métodos de orientación a objetos con el

objetivo de abarcar todo ciclo de vida de un proyecto. Es una metodología

pesada – ligera de Desarrollo del Software.

En este tipo de metodología podemos encontrar cuatro fases:

Revisión / Análisis de Requisitos: se analizará todos los requisitos que

formarán parte del sistema y así poder construir el diagrama de clases, que

representan las agrupaciones funcionales que estructuran el sistema en

desarrollo. Para esta fase utilizaremos tres herramientas:

Modelo de Dominio: para identificar objetos y cosas del mundo real que

intervienen en nuestro sistema.

Modelo de casos de uso: en donde vamos a describir las acciones que un

usuario realiza dentro del sistema, aquí encontramos elementos como los

actores, casos de uso y el sistema.

Prototipo de interfaz de usuario: en este paso crearemos un modelo o

modelos operativos del trabajo de nuestro sistema, en el que el analista y

cliente deben estar de acuerdo.

Revisión, análisis y diseño preliminar

En esta fase a partir de cada caso de uso se obtendrá una ficha de caso de

uso, formada por un nombre, una descripción, una precondición que debe

cumplir antes de iniciarse, una post-condición que debe cumplir al terminar.

Se deben describir los casos de uso, como un flujo principal de acciones,

pudiendo contener los flujos alternativos y los flujos de excepción. Debe

usarse un estilo consistente que sea adecuado al contexto del proyecto.

Realizar un Diagrama de Robustez, el cual es un híbrido entre un Diagrama

de Clases y un Diagrama de Actividades, una herramienta que nos permite

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

20

capturar el Que hacer y a partir de eso él Como hacerlo. Facilita el

reconocimiento de objetos y hace más sencilla la lectura del sistema. Ayuda

a identificar los objetos que participan en cada caso de uso.

El diagrama de Robustez se divide en:

Objetos fronterizos: usado por los actores para comunicarse con el

sistema.

Objetos entidad: son objetos del modelo del dominio.

Objetos de Control: es la unión entre la interfaz y los objetos de entidad.

Diagrama de Clases: describe la estructura de un sistema mostrando sus

clases, atributos y las relaciones entre ellos

Revisión crítica del Diseño

En esta fase se reconocen todos los elementos que forman parte de nuestro

sistema, como lo son los Diagramas de Secuencia, los cuales muestran los

métodos que llevaran las clases de nuestro sistema. Muestra todos los cursos

alternos que pueden tomar todos nuestros casos de uso. Se debe terminar el

modelo estático, añadiendo los detalles del diseño en el diagrama de clases y

verificar si el diseño satisface todos los requisitos identificados.

Implementación

En este paso a partir del diseño se procede a la creación del software. Se

utilizará el diagrama de componentes de ser necesario como un apoyo del

desarrollo.

En esta etapa se deben tomar en cuenta los siguientes factores:

Reusabilidad: hace referencia a la posibilidad de usar los componentes en

diferentes aplicaciones.

Extensibilidad: consiste en la facilidad de modificación del Software

Confiabilidad: se relaciona a la realización del Software descartando

posibles errores.

Realizar pruebas: se realizan test de unidades, de casos, datos, resultados,

de integración con los usuarios para verificar la aceptación de los resultados

.

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

21

8 CRONOGRAMA

Figura 2. Cronograma de actividades previo al desarrollo del proyecto. Elaboración Propia

Mes -Semana Actividades

Marzo Abril Mayo Junio

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1. Fase 1: Análisis y Levantamiento de información

2. Fase 2: Diseño de la aplicación web

3. Fase 3: Codificación de la aplicación web

4. Fase 4: Pruebas a la aplicación web

5. Fase 5: Implementación de la aplicación web

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

22

9 RECURSOS Y PRESUPUESTO

9.1 RECURSOS HUMANOS

Registros:3 Nro. De Tabla: 5

Nombre Cargo Función N° Horas P. Unitario P. Total

Lidia Alejandro Autor Desarrolladora del proyecto de

tesis

204 $10,00 $2.040,00

Subtotal: $2.040,00

Total de datos: 6

Nota: Elaboración Propia

9.2 RECURSOS HARDWARE

Registros: 8 Nro. De Tabla: 6

Cantidad Descripción P. Unitario P. Total

1 Laptop Dell Inspiron $548,00 $548,00

1 Impresora EPSON $495,00 $495,00

Subtotal: $1.043,00

Total de datos: 8

Nota: Elaboración Propia

9.3 RECURSOS SOFTWARE

Registros: 27 Nro. De Tabla: 7

Descripción Precio Unitario Precio Total

Python $0,00 $0,00

Enterprise Architec $0,00 $0,00

Hostinger $2,89 $17,34

Nginx $0,00 $0,00

Postgres $0,00 $0,00

Visual Code $0,00 $0,00

Django $0,00 $0,00

Windows $250,00 $250,00

Office $120,00 $120,00

Subtotal: $387,34

Total de datos: 27

Nota: Elaboración Propia

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

23

9.4 RECURSOS MATERIALES

Registros: 8 Nro. De Tabla: 8

Cantidad Descripción P. Unitario P. Total

1 Resmas de papel A4

$3,50 $3,50

4 Cartucho de Impresión

$4,00 $16,00

Subtotal: $19,50

Total de datos: 8

Nota: Elaboración Propia

9.5 RECURSOS VARIOS

Registros: 4 Nro. De Tabla: 9

Cantidad Descripción P. Unitario P. Total

6 meses Internet $25,00 $150,00

Subtotal: $150,00

Total de datos: 4

Nota: Elaboración Propia

9.6 RECURSOS TOTALES

Registros: 10 Nro. De Tabla: 10

Descripción Precio Total

Recursos Humanos $2.040,00

Recursos Hardware $1.043,00

Recursos Software $387,34

Recursos Materiales $19,50

Recursos Varios $150,00

Total: $3.639,84

Total de datos: 10

Nota: Elaboración Propia

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

24

10 BIBLIOGRAFÍA

ARIMETRICS. (s.f.). Qué es Bootstrap. Obtenido de ARIMETRICS:

https://www.arimetrics.com/glosario-digital/bootstrap

Borges, S. (19 de noviembre de 2019). Servidor PostgreSQL. Obtenido de infranetworking:

https://blog.infranetworking.com/servidor-postgresql/

Krall, C. (2019). ¿Qué es y para qué sirve UML? Versiones de UML (Lenguaje Unificado de

Modelado). Tipos de diagramas UML. Obtenido de aprenderaprogramar.com:

https://www.aprenderaprogramar.com/index.php?option=com_content&view=arti

cle&id=688:ique-es-y-para-que-sirve-uml-versiones-de-uml-lenguaje-unificado-de-

modelado-tipos-de-diagramas-uml&catid=46&Itemid=163

Ortiz, Á. (06 de marzo de 2019). ¿Qué es NGINX? Una mirada básica a lo que es y cómo

funciona. Obtenido de GM: https://www.hostdime.la/blog/que-es-nginx-una-

mirada-basica-a-lo-que-es-y-como-funciona/

Peiró, R. (2021). Base de datos. Obtenido de Economipedia:

https://economipedia.com/definiciones/base-de-datos.html

reicek. (2015). Qué es PostgreSQL y cuáles son sus ventajas. Obtenido de Platzi:

https://platzi.com/blog/que-es-postgresql/

Robledano, Á. (23 de septiembre de 2019). Qué es Python: Características, evolución y futuro.

Obtenido de OpenWebinars: https://openwebinars.net/blog/que-es-python/

Rock Content, R. (20 de abril de 2019). ¿Qué es un lenguaje de programación y qué tipos

existen? Obtenido de Rock Content: https://rockcontent.com/es/blog/que-es-un-

lenguaje-de-programacion/

Shim, T. (06 de enero de 2021). Los mejores sitios de alojamiento web gratuitos (2021).

Obtenido de WebRevenue:

https://www.webhostingsecretrevealed.net/es/blog/web-hosting-guides/free-

hosting-sites/

Sparx Systems. (2021). Enterprise Architect. Obtenido de SPARX SISTEMS:

http://www.sparxsystems.com.ar/products/ea/features.php

Universidad Técnica de Babahoyo. (2015). Sistema informático para la facturación y Control

de usuarios de la junta administradora de agua potable y alcantarillado

Santandereana de la provincia de Bolívar”. Obtenido de Universidad Técnica de

Babahoyo: http://dspace.utb.edu.ec/handle/49000/1175

Wikipedia. (27 de diciembre de 2020). Django (framework). Obtenido de WIKIPEDIA:

https://es.wikipedia.org/wiki/Django_(framework)

Wikipedia. (28 de noviembre de 2020). Servidor. Obtenido de WIKIPEDIA:

https://es.wikipedia.org/wiki/Servidor

Wikipedia. (15 de enero de 2021). Alojamiento Web. Obtenido de WIKIPEDIA:

https://es.wikipedia.org/wiki/Alojamiento_web

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

25

Wikipedia. (10 de enero de 2021). Hoja de estilos en cascada. Obtenido de WIKIPEDIA:

https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada

Wikipedia. (10 de enero de 2021). HTML. Obtenido de WIKIPEDIA:

https://es.wikipedia.org/wiki/HTML

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

26

INSTITUTO SUPERIOR TECNOLÓGICO PRIMERO DE MAYO

YANTZAZA – ZAMORA CHINCHIPE – ECUADOR

DOCENTE

YO, ING.YANDRY REÑÉ RAMIREZ SARITAMA EN CALIDAD DE TUTOR

DESIGNADO POR LA UNIDAD DE INTEGRACIÓN CURRICULAR DE LA

TECNOLOGÍA EN INFORMATICA Y TECNOLOGÍA SUPERIOR EN

DESARROLLO DE SOFTWARE PRIMER PERIODO DEL 2021, A PETICIÓN

ESCRITA MANIFIESTO:

Que, la Srta. ESTUDIANTE ALEJANDRO CAMACHO LIDIA MARITZA, con

cedula de identidad N°: 1900768522, perteneciente a la Tecnología Superior

en Desarrollo de Software, de acuerdo al cronograma de la Unidad de

Integración Curricular, presento el proyecto denominado “DESARROLLO E

IMPLEMENTACIÓN DE UNA APLICACIÓN WEB PARA LA

ADMINISTRACIÓN DE PAGOS DE AGUA DEL BARRIO EL ZARZA –

CANTÓN YANTZAZA”, y una vez que se ha realizado la revisión y las

respectivas correcciones:

CERTIFICO

Que el proyecto de titulación presentado por la postulante se encuentra

totalmente culminado, por lo tanto, ha sido aprobado para su respectiva

defensa, la misma que se encuentra en espera de a designación del tribunal

y fecha de aprobación para su respectiva ejecución.

Es todo cuanto puedo certificar en honor a la verdad, autorizando al

peticionario hacer uso del presente en lo que estime necesario.

Yantzaza, 03 de marzo de 2021

………………………………….

Ing. Yandry Ramírez Saritama

Tutor de la Unidad de Integración Curricular Tecnología de Informática y

Tecnología Superior en Desarrollo de Software