UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/49615/1/B...Título del Proyecto de Titulación: Desarrollo de un sitio web interactivo para la donación de plástico,

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

CARRERA DE INGENIERÍA EN SISTEMAS

COMPUTACIONALES

DESARROLLO DE UN SITIO WEB INTERACTIVO PARA LA DONACIÓN

DE PLÁSTICO, EXPOSICIÓN, COTIZACIÓN Y SUBASTA DE ARTES

VISUALES PARA LA FUNDACIÓN MANOS AL AMBIENTE

PROYECTO DE TITULACIÓN

Previa a la obtención del Título de:

INGENIERO EN SISTEMAS COMPUTACIONALES

AUTORES:

DIANA CAROLINA JURADO PÉREZ

STEVEN JAIRO RAMÍREZ TORRES

TUTORA:

Ing. LADY MARIUXI SANGACHA TAPIA, MSia.

GUAYAQUIL – ECUADOR

2020

II

REPOSITORIO NACIONAL EN CIENCIAS Y TECNOLOGÍAS

FICHA DE REGISTRO DE TRABAJO DE TITULACIÓN

TÍTULO: DESARROLLO DE UN SITIO WEB INTERACTIVO PARA LA DONACIÓN

DE PLÁSTICO, EXPOSICIÓN, COTIZACIÓN Y SUBASTA DE ARTES VISUALES

PARA LA FUNDACIÓN MANOS AL AMBIENTE

AUTOR(ES):



REVISORA:

ING. DIANA ELIZABETH MINDA GILCES, M.

Sc.

INSTITUCIÓN: UNIVERSIDAD DE

GUAYAQUIL

FACULTAD: CIENCIAS MATEMÁTICAS Y

FÍSICAS

CARRERA: INGENIERÍA EN SISTEMAS COMPUTACIONALES

FECHA DE PUBLICACIÓN: 2020 N° DE PAGS: 180

AREA TEMÁTICA: DESARROLLO DE SOFTWARE

PALABRAS CLAVES: Aplicación web, Framework, Fundación ambiental, Materiales

reciclables, Artes visuales, Chat online.

RESUMEN: El presente trabajo de titulación consiste en el desarrollo de un prototipo de

aplicación web para la fundación Manos al Ambiente, ubicada en la ciudad de Guayaquil. En

el cual se sistematizan los procesos de donación de materiales reciclables, publicación de

actividades ambientales, exposición y subasta de artes visuales realizadas con materiales

donados por los artistas que colaboran con la fundación, así también se diseñó un módulo de

chat que permite interactuar a los ciudadanos con los artistas para coordinar la entrega y pago

de las obras visuales expuestas en el sistema.

N° DE REGISTRO: N° DE CLASIFICACIÓN:

DIRECCIÓN URL: (PROYECTO DE TITULACION EN LA WEB)

ADJUNTO PDF SI NO

CONTACTO CON AUTOR(ES):



Teléfono:

0991602224

0960558331

Email:

[email protected]

[email protected]

CONTACTO DE LA INSTITUCIÓN

Nombre: Ab. Juan Chávez Atocha

Teléfono: 2307729

Email: [email protected]

x

mailto:[email protected]

III

APROBACIÓN DEL TUTOR

En mi calidad de Tutor(a) del Trabajo de Titulación, “DESARROLLO DE UN SITIO WEB

INTERACTIVO PARA LA DONACIÓN DE PLÁSTICO, EXPOSICIÓN, COTIZACIÓN Y

SUBASTA DE ARTES VISUALES PARA LA FUNDACIÓN MANOS AL AMBIENTE”

elaborado por la Srta. DIANA CAROLINA JURADO PÉREZ y el Sr. STEVEN JAIRO

RAMÍREZ TORRES, estudiantes no titulados de la Carrera de Ingeniería en Sistemas

Computacionales, Facultad de Ciencias Matemáticas y Físicas de la Universidad de Guayaquil,

previo a la obtención del Título de Ingeniero(a) en Sistemas Computacionales, me permito

declarar que luego de haber orientado, estudiado y revisado, la apruebo en todas sus partes.

Atentamente,

Ing. Lady Mariuxi Sangacha Tapia, MSia.

TUTORA

IV

DEDICATORIA

Este trabajo se lo dedico a mis padres

Isabel Pérez y Elio Jurado por haberme

guiado y educado a través de sus consejos,

valores, reglas y ejemplo a luchar y

superarme día a día, a mi hermana

Katherine Jurado porque siempre me ha

guiado y brindado su apoyo incondicional

en toda mi carrera profesional, además al

Ing. Juan Sánchez (†) que fue nuestro guía

para la planificación del presenta tema.

Diana Carolina Jurado Pérez

Dedico este trabajo a toda mi familia, en

especial a mi madre Leonilda Torres

Quimi por su amor y apoyo incondicional

en todo momento, siendo pilar

fundamental en mi vida. Al Ing. Juan

Sánchez Holguín (†) que fue mentor y guía

para la planificación del presente proyecto.

Steven Jairo Ramírez Torres

V

AGRADECIMIENTO

Agradezco a Dios por brindarme salud y

ser mi guía, a mis padres les agradezco

por su apoyo incondicional, a mis

hermanos por brindarme sus consejos, a

mi compañero de tesis Steven Ramírez

por su esfuerzo y dedicación. Mi rotundo

agradecimiento hacia mis compañeros y a

la institución.


Agradezco a Dios por brindarme salud y

la oportunidad de cumplir con este

objetivo, a mi madre por ayudarme con

sus consejos, a mis amigos por

acompañarme en esta etapa de mi vida y

a toda persona que me brindó su ayuda

para culminar este trabajo.


VI

TRIBUNAL PROYECTO DE TITULACIÓN

Ing. Fausto Cabrera Montes, M.Sc.

DECANO DE LA FACULTAD

CIENCIAS MATEMÁTICAS Y FÍSICAS

Ing. Gary Reyes Zambrano, Mgs.

DIRECTOR DE LA CARRERA DE

INGENIERÍA EN SISTEMAS

COMPUTACIONALES

Ing. Lady Mariuxi Sangacha Tapia, MSia.

PROFESORA TUTORA DEL PROYECTO

DE TITULACIÓN

Ing. Diana Elizabeth Minda Gilces, M.Sc.

PROFESORA REVISORA DEL

PROYECTO

DE TITULACIÓN

Ab. Juan Chávez Atocha, Esp.

SECRETARIO

VII

DECLARACIÓN EXPRESA

“La responsabilidad del contenido de este Proyecto de

Titulación, me corresponden exclusivamente; y el

patrimonio intelectual de la misma a la

UNIVERSIDAD DE GUAYAQUIL”.

_________________________


_________________________


VIII

CESIÓN DE DERECHOS DE AUTOR

Ingeniero

Fausto Cabrera Montes, M.Sc.

DECANO DE LA FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

Presente.

A través de este medio indico a usted que procedo a realizar la entrega de la cesión

de derechos de autor en forma libre y voluntaria del trabajo de titulación “DESARROLLO

DE UN SITIO WEB INTERACTIVO PARA LA DONACIÓN DE PLÁSTICO,

EXPOSICIÓN, COTIZACIÓN Y SUBASTA DE ARTES VISUALES PARA LA

FUNDACIÓN MANOS AL AMBIENTE”, realizado como requisito previo para la

obtención del Título de Ingeniero(a) en Sistemas Computacionales de la Universidad de

Guayaquil.

Guayaquil, octubre del 2020.

______________________________________


C.I. N° 0930639786

______________________________________


C.I. N° 0931249890

IX



CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES

DESARROLLO DE UN SITIO WEB INTERACTIVO PARA LA DONACIÓN DE

PLÁSTICO, EXPOSICIÓN, COTIZACIÓN Y SUBASTA DE ARTES VISUALES

PARA LA FUNDACIÓN MANOS AL AMBIENTE

Proyecto de Titulación que se presenta como requisito para optar por el título de

INGENIERO EN SISTEMAS COMPUTACIONALES

Autores:


C.I. N° 0930639786


C.I. N° 0931249890

Tutora: Ing. Lady Mariuxi Sangacha Tapia, MSia.

Guayaquil, octubre del 2020

X

CERTIFICADO DE ACEPTACIÓN DEL TUTOR

En mi calidad de Tutora del Proyecto de Titulación, nombrado por el Consejo Directivo de

la Facultad de Ciencias Matemáticas y Físicas de la Universidad de Guayaquil.

CERTIFICO:

Que he analizado el Proyecto de Titulación presentado por los estudiantes Diana

Carolina Jurado Pérez y Steven Jairo Ramírez Torres, como requisito previo para optar por

el Título de Ingeniero(a) en Sistemas Computacionales cuyo proyecto es:


PLÁSTICO, EXPOSICIÓN, COTIZACIÓN Y SUBASTA DE ARTES VISUALES PARA

LA FUNDACIÓN MANOS AL AMBIENTE

Considero aprobado el trabajo en su totalidad.

Presentado por:

Jurado Pérez Diana Carolina Cédula de identidad N° 0930639786

Ramírez Torres Steven Jairo Cédula de identidad N° 0931249890


Guayaquil, octubre del 2020

XI




AUTORIZACIÓN PARA PUBLICACIÓN DE PROYECTO DE TITULACIÓN EN FORMATO

DIGITAL

1. Identificación del Proyecto de Titulación

Nombre del Estudiante: Diana Carolina Jurado Pérez

Dirección: Coop. Juan Montalvo, Mz. 1739, Sl. 33

Teléfono: 0991602224 Email: [email protected]

Nombre del Estudiante: Steven Jairo Ramírez Torres

Dirección: Barrio Brisas de Playas, Mz. 19, Sl. 10

Teléfono: 0960558331 Email: [email protected]

Facultad: Ciencias Matemáticas y Físicas

Carrera: Ingeniería en Sistemas Computacionales

Proyecto de Titulación al que opta: Ingeniero en Sistemas Computacionales

Profesora Tutora: Ing. Lady Mariuxi Sangacha Tapia, MSia.

Título del Proyecto de Titulación: Desarrollo de un sitio web interactivo para la donación de plástico,

exposición, cotización y subasta de artes visuales para la fundación Manos al Ambiente

Palabras Claves: Aplicación web, Framework, Laravel, Fundación ambiental, Materiales reciclables, Artes

visuales, Chat online.

2. Autorización de Publicación de Versión Electrónica del Proyecto de Titulación

A través de este medio autorizo a la Biblioteca de la Universidad de Guayaquil y a la Facultad de Ciencias

Matemáticas y Físicas a publicar la versión electrónica de este Proyecto de Titulación.

Publicación Electrónica:

Inmediata X Después de 1 año

Firma Estudiante:

Jurado Pérez Diana Carolina Cédula de identidad N° 0930639786

Ramírez Torres Steven Jairo Cédula de identidad N° 0931249890

3. Forma de envío:

El texto del Proyecto de Titulación debe ser enviado en formato Word, como archivo .docx, .RTF o. Puf

para PC. Las imágenes que la acompañen pueden ser: .gif, .jpg o .TIFF.

DVDROM CDROM X

XII

ÍNDICE GENERAL

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

CAPÍTULO I .......................................................................................................................... 4

PLANTEAMIENTO DEL PROBLEMA ............................................................................... 4

Descripción de la situación problemática ............................................................................... 4

Ubicación del problema en un contexto ............................................................................. 4

Situación conflicto nudos críticos ....................................................................................... 6

Delimitación del problema .................................................................................................. 7

Evaluación del Problema .................................................................................................... 8

Causas y consecuencias del problema .................................................................................... 9

Formulación del problema .................................................................................................... 10

Objetivos del proyecto .......................................................................................................... 10

Objetivo general ................................................................................................................ 10

Objetivos específicos ........................................................................................................ 11

Alcance del problema ........................................................................................................... 11

Justificación e importancia ................................................................................................... 13

Limitaciones ......................................................................................................................... 15

CAPÍTULO II ....................................................................................................................... 18

MARCO TEÓRICO ............................................................................................................. 18

Antecedentes del estudio ...................................................................................................... 18

Fundamentación teórica ........................................................................................................ 22

ISO 14001 ......................................................................................................................... 22

Fundaciones Ambientales ................................................................................................. 22

XIII

Reciclaje ............................................................................................................................ 22

Metodología de las 5 erres ................................................................................................ 24

Plásticos ............................................................................................................................ 25

Residuo Sólido .................................................................................................................. 25

Artistas Traperos ............................................................................................................... 26

Artes Visuales de la Basura .............................................................................................. 26

Aplicación Web ................................................................................................................ 27

Entorno de desarrollo integrado (IDE) ............................................................................. 28

Visual Studio CODE ..................................................................................................... 28

Lenguaje de Programación ............................................................................................... 29

A. PHP ........................................................................................................................ 30

B. JavaScript (JS) ....................................................................................................... 31

jQuery ............................................................................................................................... 32

Data Table ..................................................................................................................... 32

Node.js .............................................................................................................................. 32

Express.js....................................................................................................................... 33

API .................................................................................................................................... 33

API REST ...................................................................................................................... 33

JSON ................................................................................................................................. 34

AJAX ................................................................................................................................ 34

Framework ........................................................................................................................ 35

A, Framework de Desarrollo ......................................................................................... 35

Laravel ........................................................................................................................... 36

B. Framework de Desarrollo ...................................................................................... 38

XIV

Bootstrap ....................................................................................................................... 38

Base de Datos (BD) .......................................................................................................... 39

MySQL .......................................................................................................................... 40

Herramientas de desarrollo del proyecto .......................................................................... 41

Pregunta científica a contestar .............................................................................................. 43

Definiciones conceptuales .................................................................................................... 43

CAPÍTULO III ..................................................................................................................... 45

PROPUESTA TECNOLÓGICA .......................................................................................... 45

Análisis de factibilidad ......................................................................................................... 45

Factibilidad operacional .................................................................................................... 45

Factibilidad técnica ........................................................................................................... 48

Factibilidad legal ............................................................................................................... 49

Factibilidad económica ..................................................................................................... 49

Metodologías del proyecto ................................................................................................... 50

Metodología de investigación ........................................................................................... 50

Población y muestra ...................................................................................................... 51

Procesamiento y análisis ............................................................................................... 53

Metodología de desarrollo del proyecto ........................................................................... 61

Modelo del Prototipado .................................................................................................... 61

1. Comunicación ........................................................................................................... 63

2. Plan Rápido .............................................................................................................. 65

3. Modelado y Diseño Rápido ...................................................................................... 70

4. Construcción del Prototipo ....................................................................................... 80

5. Desarrollo y Retroalimentación ................................................................................ 86

XV

6. Entrega del Desarrollo Final ..................................................................................... 90

Entregables del proyecto ...................................................................................................... 94

Criterios de validación de la propuesta................................................................................. 94

Resultado .............................................................................................................................. 96

CAPÍTULO IV ..................................................................................................................... 98

CONCLUSIONES Y RECOMENDACIONES ................................................................... 98

Criterios de aceptación del producto o servicio.................................................................... 98

Conclusiones ....................................................................................................................... 101

Recomendaciones ............................................................................................................... 103

REFERENCIAS BIBLIOGRÁFICAS ............................................................................... 104

ANEXOS ............................................................................................................................ 110

Anexo 1. Acta de Requerimiento. .................................................................................. 110

Anexo 2. Diagrama de Base de Datos. ......................................................................... 111

Anexo 3. Fundamentación Legal. .................................................................................. 112

Anexo 4. Despliegue de procesos actuales. .................................................................... 118

Anexo 5. Modelo de Encuesta (Google Forms). ........................................................... 121

Anexo 6. Validación de expertos. .................................................................................. 124

Anexo 6. Acta de Aceptación del Producto. .................................................................. 127

Anexo 7. Manual de Usuario ......................................................................................... 128

Anexo 8. Manual Técnico .............................................................................................. 142

XVI

ÍNDICE DE TABLAS

Tabla 1 Delimitación del problema ........................................................................................ 7

Tabla 2 Matriz de causas y consecuencias del problema ....................................................... 9

Tabla 3 Cuadro comparativo de herramientas de venta y subastas ...................................... 15

Tabla 4 Centros de reciclajes identificados en Guayaquil por el PNGIDS .......................... 23

Tabla 5 Principales residuos sólidos inorgánicos recolectados por ciudad .......................... 26

Tabla 6 Cuadro comparativo de lenguajes de programación web ........................................ 29

Tabla 7 Cuadro comparativo de frameworks PHP ............................................................... 36

Tabla 8 Cuadro comparativo de frameworks de diseño ....................................................... 38

Tabla 9 Cuadro comparativo de bases de datos .................................................................... 40

Tabla 10 Requerimiento de hardware para el desarrollo ...................................................... 48

Tabla 11 Requerimiento de software para el desarrollo ....................................................... 48

Tabla 12 Presupuesto del proyecto ....................................................................................... 49

Tabla 13 Pregunta #1: ¿Cómo ve la acogida del arte plástico y visual por parte del público

en Guayaquil? ............................................................................................................... 54

Tabla 14 Pregunta #2: ¿Qué tiempo le lleva a usted vender una de sus obras? ................... 55

Tabla 15 Pregunta #3: ¿De qué manera lleva el registro de los procesos, elaboración y obras

terminadas que realiza? ................................................................................................ 56

Tabla 16 Pregunta #4: ¿Qué tipo de mecanismos o vitrinas utiliza para visibilizar sus obras?

...................................................................................................................................... 57

Tabla 17 Pregunta #5: Si existiera una aplicación web para exhibir y subastar las artes

visuales que realiza utilizando materiales reciclables ¿Estaría dispuesto a trasladar sus

obras a esta aplicación? ................................................................................................ 58

XVII

Tabla 18 Pregunta #6: ¿Está de acuerdo con que los usuarios que han donado materiales

reciclables puedan obtener un porcentaje de descuento para adquirir una obra? ......... 59

Tabla 19 Pregunta #7: ¿Considera que la aplicación web cuente con un chat, el cuál permita

la comunicación entre el usuario y usted de manera personal? .................................... 60

Tabla 20 Requerimientos funcionales del sistema ............................................................... 64

Tabla 21 Requerimientos no funcionales del sistema .......................................................... 64

Tabla 22 Especificación de requerimiento funcional #1 ...................................................... 65









Tabla 31 Especificación de requerimiento funcional #10 .................................................... 70

Tabla 32 Caso de prueba de inicio de sesión ........................................................................ 86

Tabla 33 Caso de prueba del proceso de control de materiales reciclables donados ........... 87

Tabla 34 Caso de prueba del proceso de publicar un arte .................................................... 88

Tabla 35 Datos de expertos .................................................................................................. 95

Tabla 36 Aceptación de funcionalidad del sistema .............................................................. 98

Tabla 37 Resultados de juicio de experto ........................................................................... 100

XVIII

ÍNDICE DE FIGURAS

Figura 1 Ubicación de la fundación “Manos al Ambiente” ................................................... 6

Figura 2 Diagrama de Ishikawa ............................................................................................ 10

Figura 3 Leyendas de hierro ................................................................................................. 27

Figura 4 Modelo de transferencia de datos de aplicaciones web ......................................... 28

Figura 5 Tendencia a nivel mundial de frameworks PHP .................................................... 36

Figura 6 Tendencia a nivel mundial de bases de datos......................................................... 40

Figura 7 Proceso actual......................................................................................................... 46

Figura 8 Mapeo de proceso AS IS ........................................................................................ 46

Figura 9 Proceso automatizado............................................................................................. 47

Figura 10 Mapeo de procesos TO BE .................................................................................. 47

Figura 11 Pregunta #1: ¿Cómo ve la acogida del arte plástico y visual por parte del público

en Guayaquil? ............................................................................................................... 54

Figura 12 Pregunta #2: ¿Qué tiempo le lleva a usted vender una de sus obras? .................. 55

Figura 13 Pregunta #3: ¿De qué manera lleva el registro de los procesos, elaboración y

obras terminadas que realiza? ....................................................................................... 56

Figura 14 Pregunta #4: ¿Qué tipo de mecanismos o vitrinas utiliza para visibilizar sus

obras? ............................................................................................................................ 57

Figura 15 Pregunta #5: Si existiera una aplicación web para exhibir y subastar las artes

visuales que realiza utilizando materiales reciclables ¿Estaría dispuesto a trasladar sus

obras a esta aplicación? ................................................................................................ 58

Figura 16 Pregunta #6: ¿Está de acuerdo con que los usuarios que han donado materiales

reciclables puedan obtener un porcentaje de descuento para adquirir una obra? ......... 59

XIX

Figura 17 Pregunta #7: ¿Considera que la aplicación web cuente con un chat, el cuál

permita la comunicación entre el usuario y usted de manera personal? ....................... 60

Figura 18 Etapas del modelo de prototipado ........................................................................ 62

Figura 19 Diagrama de actores ............................................................................................. 71

Figura 20 Caso de uso - Registro de artistas ........................................................................ 72

Figura 21 Caso de uso - Publicación de proyectos (Administrador) .................................... 73

Figura 22 Caso de uso - Publicación de obras (Artistas) ...................................................... 74

Figura 23 Caso de uso – Donación de materiales reciclables (Cliente) ............................... 75

Figura 24 Caso de uso – Subasta de artes visuales (Cliente) ................................................ 76

Figura 25 Diagrama de actividades - Administrador............................................................ 77

Figura 26 Diagrama de actividades - Artista ........................................................................ 78

Figura 27 Diagrama de actividades - Cliente ....................................................................... 79

Figura 28 Pantalla de inicio de sesión del sistema ............................................................... 87

Figura 29 Pantalla para agregar materiales reciclables ........................................................ 88

Figura 30 Pantalla de publicación de artes visuales ............................................................. 89

Figura 31 Control de usuarios .............................................................................................. 90

Figura 32 Control de artes visuales ...................................................................................... 90

Figura 33 Control de materiales donados ............................................................................. 91

Figura 34 Publicación de artes visuales ................................................................................ 91

Figura 35 Visualización de obras realizadas ........................................................................ 92

Figura 36 Donación de materiales reciclables ...................................................................... 92

Figura 37 Subasta de artes visuales ...................................................................................... 93

Figura 38 Módulo de chat ..................................................................................................... 93

Figura 39 Aceptación de la propuesta por parte de los artistas ............................................ 95

XX

ABREVIATURAS

AJAX JavaScript Asíncrono y XML

API Interfaz de Programación de Aplicaciones

BD Base de Datos

IDE Entorno de Desarrollo Integrado

Ing. Ingeniero

ISO Organización Internacional de Normalización

JSON Notación de Objetos JavaScript

M.Sc. Máster

REST Transferencia de Estado Representacional

UG Universidad de Guayaquil

URL Localizador de Fuente Uniforme

WWW World Wide Web (Red Mundial)

XXI

SIMBOLOGÍA

s Desviación estándar

e Error

E Espacio muestral

E(Y) Esperanza matemática de la v.a. y

s Estimador de la desviación estándar

e Exponencial

XXII




Desarrollo de un sitio web interactivo para la donación de plástico, exposición,

cotización y subasta de artes visuales para la fundación Manos al Ambiente.

Autores:


C.I. N° 0930639786


C.I. N° 0931249890


RESUMEN

El presente trabajo de titulación consiste en el desarrollo de un prototipo de aplicación web

para la fundación Manos al Ambiente, ubicada en la ciudad de Guayaquil. En el cual se

sistematizan los procesos de donación de materiales reciclables, publicación de actividades

ambientales, exposición y subasta de artes visuales realizadas con materiales donados

elaborados por los artistas que colaboran con la fundación, así también se diseñó un módulo

de chat que permite interactuar a los usuarios registrados en la aplicación para coordinar la

entrega, cotización y pago de las obras visuales expuestas en el sistema. Para la investigación

del estudio se utilizó el método cualitativo, con técnicas tales como: la observación, reuniones

y encuestas; permitiendo levantar los requerimientos necesarios para el correcto

funcionamiento de los módulos identificados. El desarrollo de la aplicación web se elaboró

mediante la metodología del modelo de prototipado, empleando el framework Laravel,

lenguaje de programación JavaScript y haciendo uso de herramientas OpenSource. El

resultado final de este proyecto es una aplicación web responsive cuyo diseño permitirá

incentivar actividades amigables con el medio ambiente como son la donación y reutilización

de materiales reciclables, además de mejorar la comunicación entre los ciudadanos y artistas

para la adquisición de sus obras.

Palabras clave: Aplicación web, Framework, Laravel, Fundación ambiental, Materiales

reciclables, Artes visuales, Chat online.

XXIII




Development of an interactive website for the donation of plastic, exhibition,

quotation and auction of visual arts for the Fundación Manos al Ambiente.

Authors:


C.I. N° 0930639786


C.I. N° 0931249890

Tutor: Ing. Lady Mariuxi Sangacha Tapia, MSia.

ABSTRACT

This degree work consists of the development of a web application prototype for the

Foundation Manos al Ambiente, located in the city of Guayaquil. In which the processes of

donation of recyclable materials, publication of environmental activities, exhibition and

auction of visual arts made with donated materials made by the artists who collaborate with

the foundation are systematized, as well as a chat module that allows interaction with users

registered in the application to coordinate the delivery, quotation and payment of the visual

works displayed in the system. For the study research, the qualitative method was used, with

techniques such as: observation, meetings and surveys; allowing raising the necessary

requirements for the correct operation of the identified modules. The development of the web

application was elaborated using the prototyping model methodology, using the Laravel

framework, JavaScript programming language and using OpenSource tools. The end result

of this project is a responsive web application whose design will encourage environmentally

friendly activities such as the donation and reuse of recyclable materials, as well as improving

communication between citizens and artists for the acquisition of their works.

Key words: Web application, Framework, Laravel, Environmental Foundation, Recyclable

materials, Visual arts, Chat Online.

1

INTRODUCCIÓN

Los desechos son el principal problema a nivel mundial debido a que la gestión y

tratamiento que reciben no son los adecuados. Según el nuevo informe del Banco Mundial

titulado What a Waste 2.0: A Global Snapshot of Solid Waste Management to 2050 “si no se

adoptan medidas urgentes, para 2050 los desechos a nivel mundial crecerán un 70% con

respecto a los niveles actuales”. En el informe se pronostica que en los próximos 30 años la

generación de desechos a nivel mundial, impulsada por la rápida urbanización y el

crecimiento de las poblaciones, aumentará de 2010 millones de toneladas registradas en 2016

a 3400 millones.

A nivel nacional en el año 2016, la generación de residuos en el Ecuador era de 4,06

millones de toneladas métricas al año y una generación per cápita de 0,74 Kg²; de los cuales

el 41,46% de los hogares clasificaron los residuos (INEC, 2016).

Ecuador de los 4 millones de desechos que podrían ser reciclados en el país sólo de

un 15% a 25% logra este fin de los cuales el 61,4% son orgánicos, papel/cartón 9,4%, plástico

11%, vidrio 2,6%, chatarra 2,2% y otros 13,3%. Debido a no separar los desechos estos

terminan junto con los desechos comunes que da como resultado que estos materiales no

puedan ser reciclados y terminen en vertederos de basura perjudicando la salud humana y los

entornos locales. Según el Instituto Nacional de Estadística y Censo (INEC), en el 2016, el

41,46% de los hogares lo hicieron. Un año antes fue el 39,40% y en el 2014 la cifra alcanzó

el 38, 34%. El MAE- PNGIDS señala que el 24% de los GADM ha iniciado procesos de

separación en la fuente y recolección diferenciada, el 40% de los GADM desarrollan

2

procesos de aprovechamiento de residuos orgánicos, y el 24% de los GADM desarrollan

procesos de aprovechamiento de residuos inorgánicos, tales como papel/cartón, plástico,

vidrio y chatarra.

Ante esta problemática a nivel mundial y nacional las instituciones buscan apoyo en

la tecnología debido a que durante los últimos años han generado un impacto positivo en muchos

ámbitos en la sociedad, porque gracias a estos se ha logrado agilizar sin número de procesos que

hace algunos años eran realizados mediante el uso de métodos tradicionales.

Las tecnologías de la información actualmente son una pieza fundamental en la lucha

contra el cambio climático y la sustentabilidad del planeta. La extensión de sus tecnologías

influye y transforma el modo de funcionamiento de la sociedad en su conjunto, los hábitos

de trabajo, las relaciones sociales y facilitan la reducción del consumo desmesurado de

materias primas y energía.

Por lo antes expuesto, el presente trabajo aportará desarrollando una aplicación web que

ayude a promover la reutilización de materiales reciclado por medio de las artes. Es decir, tiene

como objetivo desarrollar una aplicación web responsive mediante el uso del framework

Laravel para la exposición y subasta de artes visuales a través de la donación de materiales

reciclables de la Fundación Manos al Ambiente de la ciudad de Guayaquil que busca

disminuir la contaminación ambiental, automatizando los tiempos y servicios.

La estructura de este trabajo consta de cuatro capítulos, los cuales se describen a

continuación:

3

En el capítulo 1, planteado como El Problema, se ubica el problema en un contexto

permitiendo identificar la situación actual, las causas y consecuencias que este genera,

definiendo así los objetivos a cumplir y la justificación e importancia de su desarrollo.

En el capítulo 2, definido como Marco Teórico, se detallan los antecedentes

relacionados al estudio en conjunto con su fundamentación teórica, incluyendo un conjunto

de definiciones utilizadas en el presente trabajo.

En el capítulo 3, se detalla la Propuesta Tecnológica, la cual consta de un análisis de

factibilidad y la implementación de metodologías necesarias para el desarrollo del software.

En el capítulo 4, se describen los Resultados, Conclusiones y Recomendaciones, para

validar y constatar que el proyecto ha sido aceptado según los criterios definidos.

4

CAPÍTULO I

PLANTEAMIENTO DEL PROBLEMA

Descripción de la situación problemática

Ubicación del problema en un contexto

A nivel mundial, según informe publicado por World Wildlife Fund (WWF) - Fondo

Mundial para la Naturaleza - (Echeverria, 2019), advierte que para el 2030 cerca de 104

millones de toneladas métricas adicionales de plástico contaminarán nuestros ecosistemas si

no se genera un cambio drástico en cómo se aborda este problema.

A nivel nacional, según Azucena Quiñonez (Quiñonez Murillo, 2019), el 41.46% de

los hogares en el 2016 tuvieron el hábito de clasificar por lo menos una clase de residuo

sólido no peligroso, evidenciando el hecho de que existe por parte de la ciudadanía

ecuatoriana un indicio a contribuir con la conservación ambiental. No obstante, se ha

encontrado que Ecuador genera 4 millones de toneladas de basura la cual causa una

acumulación de desechos, donde más de la mitad de las familias desconocen el manejo de

los residuos en sus hogares.

Guayaquil tuvo un promedio de 51353.23 ton/día evidenciando un aumento de 447.09

toneladas en comparación al año anterior según informe sobre los desechos sólidos

establecido por la Alcaldía de Guayaquil en el 2017 (Quiñonez Murillo, 2019), siendo una

de las ciudades que más desechos produce.

5

Fundación Manos al Ambiente ubicada en la ciudad de Guayaquil, Lomas de Urdesa,

Mz. 163, Solar 22 es una institución sin fines de lucro fundada en el año 2018. Creada para

impulsar acciones, programas y proyectos que promueven alternativas para reducir y

transformar materiales reciclables, mitigar el cambio climático, salvaguardar la biodiversidad

y disminuir la contaminación en los océanos, ríos, tierra y aire.

La fundación realiza programas ambientales dirigidos a la ciudadanía además de la

recolección y venta de materiales reciclables, creación de artes visuales utilizando los

materiales recolectados, comercialización y subastas de estas obras, llevando los registros de

los procesos de manera manual o con herramientas de Microsoft Office. Al no poseer un

sistema holístico que facilite sus funciones se provocan descoordinación con las personas en

procesos como la recolección de materiales.

Para la creación de artes visuales, los miembros de la fundación solicitan residuos

almacenados en el predio, sus obras posteriormente son difundidas en redes sociales

demostrando una manera de reutilizar ciertos materiales considerados “basura”. Cuando las

artes no son comercializadas, los colaboradores deben paralizar este trabajo puesto que existe

un aumento de artes almacenadas en bodega, disminuyendo la creación de nuevas artes e

incrementando los desechos destinados a su elaboración.

6

Figura 1 Ubicación de la fundación “Manos al Ambiente”

Nota: Se muestra la ubicación geografica de la Fundacion Manos al Ambiente donde se trabaja la presente

propouesta. Tomado de Google Maps.

Situación conflicto nudos críticos

a) La carencia de un sistema holístico ocasiona pérdida de tiempo, de información y

desorganización al momento de llevar un control de los materiales recibidos en la

fundación, debido a que el proceso se lo realiza de manera manual originando

errores en el control de los recursos.

b) Al no poder difundir los programas y proyectos que realizan para la reutilizar y

reducir los desechos, las actividades no tienen el alcance esperado para que otras

instituciones puedan sumarse a esta iniciativa, impidiendo que la fundación tenga

un crecimiento geográfico en el desarrollo de sus funciones.

7

c) La falta de organización en la recolección de desechos es otro inconveniente de

la fundación que provoca descoordinación al momento de organizar la recepción

de estos materiales, esto causa molestias tanto a los integrantes de la organización

como a los donadores.

d) Por no contar con un medio para comercializar las artes visuales creadas en base

a materiales reciclados, los colaboradores deben paralizar este trabajo puesto que

existe un aumento de artes almacenadas en bodega, disminuyendo la creación de

nuevas artes e incrementando los desechos destinados a su elaboración.

e) Un inconveniente habitual en las organizaciones ambientales en el país es la falta

de interacción entre colaboradores y los ciudadanos, para fomentar la

comunicación personal, resolver inquietudes sobre un tema u obra en específico.

Delimitación del problema

En la siguiente tabla se describe los aspectos principales de la propuesta:

Tabla 1 Delimitación del problema

Delimitador Descripción

Campo Social/Ambiental

Área Desarrollo de Software

Aspecto Software de Ambiente Web

Tema

Desarrollo de un sitio web interactivo para la donación de plástico,

exposición, cotización y subasta de artes visuales para la

Fundación Manos al Ambiente. Nota: En esta tabla se plantean los términos de análisis aplicados para la delimitación del problema conforme

al contexto en donde se desarrolla la problemática. La elaboración es propia.

8

Evaluación del Problema

Los aspectos generales de evaluación son:

Delimitado: El trabajo se desarrolla en la Fundación Manos al Ambiente, cuyo

enfoque se encuentra en mejorar la comercialización de obras basados en residuos

reciclables y difundir los proyectos ambientales, sistematizando los procesos de

donación de materiales, exposición y subasta de artes visuales.

Claro: La fundación no cuenta con un aplicativo web para realizar sus

actividades, ni mejorar su funcionamiento.

Evidente: Al no poseer un sistema holístico para realizar sus funciones, provoca

descoordinación y demora en los procesos que se realizan.

Concreto: Desarrollar un prototipo de aplicación web que facilite las funciones

de donación de materiales reciclables, exposición y subasta de artes visuales en la

Fundación Manos al Ambiente.

Contextual: La propuesta pretende crear un impacto ambiental en Guayaquil

ayudando con el incremento en el uso de materiales reciclables y agilizar procesos

de reciclaje por medio de una aplicación web.

Factible: Se puede determinar que el presente trabajo es factible porque permite

exponer y subastar las artes de forma automatizada, ahorrando tiempo y dinero,

generando nuevas oportunidades para la creación de nuevas obras.

9

Causas y consecuencias del problema

El levantamiento de información aplicada a la Fundación Manos al Ambiente se

realiza en base al manejo de sus funciones actuales con el propósito de lograr una

optimización y mejoramiento de los procesos.

Tabla 2 Matriz de causas y consecuencias del problema

Nota: Se muestra las causas y consecuencias detectadas en la fundación y analizadas mediante la elaboración

del diagrama de Causa-Efecto. La elaboración es propia.

Causas Consecuencias

C1. El personal administrativo carece de

conocimientos del uso de herramientas

tecnológicas para los procesos donación de

materiales, exposición de proyectos,

comercialización de artes visuales.

E1.1 Aumento de trabajo y cansancio laboral.

E1.3 Personal no calificado

E1.2 Conflictos laborales.

C2. La fundación no proporciona

capacitación al personal de planta y

personal nuevo para el uso de las

herramientas administrativas.

E2.1 Descoordinación, errores garrafales y

acumulación de procesos etc.

E2.2 Desactualización de conocimiento para un mejor

rendimiento.

C3. Inexistencia de una aplicación: Que

proporcione el monitoreo, organización de

materiales reciclables, promocionar las

artes visuales elaboradas por los artistas,

difusión de actividades, interacción

comunicacional entre los artistas y

clientes.

E3.1 Aglomeración de materiales reciclados.

E3.2 Falta de donativos de residuos.

E3.3 Desorganización de materiales

E3.4 Incremento de artículos guardados en bodega.

E3.5 Paralización en la transformación de materiales

reciclables.

E3.6 Desinterés de entrega de obras de parte de los

artistas y clientes.

E3.7 Evita el crecimiento institucional de la fundación.

C4. La Fundación lleva registros manuales

de los usuarios y materiales reciclables que

han recibido utilizando cuadernos y

herramienta ofimática para la emisión de

reportes.

E4.1 La Integridad de los datos es afectada.

E4.2 Se evidencia duplicidad de información

E4.3 Retraso en la aprobación de los planes del

proyecto por parte de las autoridades locales.

E4.4 Dificultad al consultar e interpretar la

información de forma óptima y rápida.

C5. Manejo incorrecto de difusión de las

artes visuales que realizan por las redes

sociales.

E5 No existe el impacto deseado debido a que no son

publicadas en una cuenta institucional de modo que los

artes visuales tardan en comercializarse.

10

Figura 2 Diagrama de Ishikawa

Nota: Se establece el diagrama Causa-Efecto con respecto a las necesidades de la fundación elaborado por

medio de la información adquirida en la Fundación Manos al Ambiente. La elaboración es propia.

Formulación del problema

¿De qué manera la fundación Manos al Ambiente puede mejorar la comercialización e

incluir la subasta que permita difundir o promover la exposición de las artes visuales de forma

óptima?

Objetivos del proyecto

Objetivo general

Desarrollar una aplicación web responsive mediante el uso del framework Laravel

para la exposición y subasta de artes visuales a través de la donación de materiales reciclables

de la Fundación Manos al Ambiente de la ciudad de Guayaquil.

11

Objetivos específicos

1. Identificar los procesos relacionados con la donación, exhibición y subasta de

artes visuales mediante entrevista y encuesta para determinar los requerimientos

de la aplicación.

2. Diseñar módulos Front-End y Back-End mediante el uso de los frameworks

Laravel y Bootstrap para el desarrollo del aplicativo web.

3. Validar el módulo de subasta y donación mediante el uso del framework Laravel

para que los usuarios registrados con rol Clientes puedan participar en tiempo real.

4. Codificar la opción de chat para facilitar la cotización, coordinación del pago y

entrega del producto, notificando vía correo electrónico el ganador de la subasta.

5. Emitir reportes para la visualización del consolidado de materiales donados, artes

expuestas y usuarios registrados, en un periodo de tiempo determinado mediante

la aplicación web.

Alcance del problema

Para la elaboración del presente trabajo se tiene como alcance a corto plazo el

desarrollo de una aplicación web responsive para la comercialización de obras elaboradas

con residuos reciclables y difundir los proyectos ambientales, sistematizando los procesos

de donación de materiales, exposición y subasta de artes visuales mediante el uso del

lenguaje PHP y JavaScript, los frameworks Laravel y Bootstrap con el entorno de trabajo

Visual Studio CODE, la tecnología AJAX para conectar la URL especificada en la API

REST a través de Node.js de JavaScript para conectar con la base de datos MySQL.

12

Módulo de Parámetro

Se elabora el desarrollo del proyecto mediante la combinación de frameworks para

las diferentes capas de la aplicación y son:

Laravel, para realizar la capa del Front-End que se enfoca en el lado del cliente,

la parte con la que interactúan los usuarios.

Laravel y Node.js, para realizar la capa del Back-End enfocado en el lado del

servidor que es la parte interna que realiza el desarrollador para cumplir las

funciones del aplicativo.

Bootstrap, para la capa Responsive usado para acoplar la interfaz de usuario del

aplicativo al tamaño de un dispositivo electrónico que permita abrir la aplicación

a través de un navegador web.

Módulo de Negocio e Interactivos

Los módulos que ofrece la aplicación web para la interacción entre los usuarios

registrados en el sistema son:

Módulo para subastar artes visuales realizadas con materiales reciclables, permite

a los clientes participar en la puja de una obra en particular, colocando como

ganador al usuario que ofreció el precio mayor.

Módulo de chat que permite la comunicación en tiempo real entre los usuarios

registrados en el sistema de la fundación.

Módulo de Seguridad

Para acceder a los diversos módulos las personas deberán crear un usuario en el

13

sistema. Posteriormente se les asignara permiso a los diversos módulos dependiendo de su

rol de usuario. Existen 3 tipos de usuarios con diferentes procesos detallados a continuación:

1. Usuario Administrador. – Este tendrá accesibilidad para subir información de

las actividades que realiza la fundación, la función para agregar materiales

reciclables, además de aceptar y controlar la donación de materiales reciclados y

artes visuales expuestas en exhibición o subasta.

2. Usuario Artistas. – Perfil creado para los colaboradores de la fundación que

deseen transformar materiales reciclados en obras visuales. Tendrá la opción de

subir obras realizadas además de colocar artículos en el módulo de subasta.

3. Usuario Cliente. – Perfil creado para las personas que desean donar materiales

o adquirir una obra publicada en el sistema. Tendrá las opciones de donar

materiales, visualizar y participar en la subasta de artes visuales.

Módulo de Reporte

Realización de una sección de emisión de reportes que visualice el consolidado de

todos los materiales donados, artes visuales subastadas y usuarios registrados.

Justificación e importancia

La fundación “Manos al Ambiente” al ser una organización nueva en la ciudad no

tiene un medio tecnológico para comunicar sus propuestas de trabajo a la ciudadanía además

de que las funciones realizadas y los registros se manejan de la forma manual (en hoja y

cuaderno), por lo cual la elaboración de este trabajo tiene gran importancia para mejorar sus

procesos y actividades que ayudan a aplicar la política de las 5R, aportando con la

14

reutilización y la reducción de desechos que provoca la contaminación al medio ambiente.

Al realizar esta propuesta se logrará automatizar y agilizar gestiones administrativas

que desarrollan los miembros de la fundación, logrando un mejor manejo de sus actividades

y optimizando el tiempo. Dando espacio a que se presenten nuevas propuestas que

beneficien a la institución.

La aplicación web se desarrolla con un modelo interactivo para el fácil acceso a los

usuarios que se deseen registrar en el sistema, al contar con una interfaz gráfica amigable

será de fácil manejo, evitando inconvenientes en el uso de la aplicación.

Este trabajo además de beneficiar a la fundación, lo hace también con los artistas

colaboradores, puesto que los ciudadanos pueden visualizar todas las obras realizadas con

materiales 100% reciclados, dando a conocer su talento de forma global y abriendo la

posibilidad de exponer sus trabajos en Galerías de Artes.

15

Tabla 3 Cuadro comparativo de herramientas de venta y subastas

Nota: Se realiza un cuadro comparativo de las diversas plataformas web para comercializar productos como las

artes visuales. La presente propuesta recibe una compensación del 5% por la publicación de las obras, este

porcentaje es canjeado en forma de descuento por los usuarios que donen materiales a la fundación Manos al

Ambiente. La elaboración es propia.

Limitaciones

El prototipo de aplicación web para la fundación Manos al Ambiente está limitada a

la creación de 3 roles de usuarios para su correcto funcionamiento, los cuales deben asignarse

procesos diferentes tomando en consideración los siguientes aspectos:

Herramienta Sistema Precio Descripción

Ebay Web /

Móvil

Anuncio (Anual):

Libre: $4.95 - Básico: $21.95

Premium: $59.95 - Ancla: $299.95

Empresa: $2999.95

Comisión: Gratis

Vender

Subastar

Mercado Libre Web /

Móvil

Bronce

Anuncio: Gratis

Comisión: 10% del precio de la venta

Plata

Anuncio: $5

Comisión: 6,5% del precio de la venta

Vender

Etsy Web /

Móvil

Anuncio: $0,20

Comisión: 3.5% del precio de la venta

Vender

manualidades u

objetos vintage

Ebid Web Anuncio: Gratis


Vender

Subastar

Linio Web

Anuncio: Gratis

Comisión: Desde 8% para equipos

electrónicos hasta 30% para artículos

de moda

Vender

FMA

(Propuesta) Web

Anuncio: Gratis


Vender

Subastar

Productos 100%

elaborados con

material reciclado

16

Rol de Administrador

Módulo de control de usuarios: Podrá observar los usuarios registrados en el

sistema, además de dar acceso a los diversos módulos dependiendo del rol de

usuario que cumpla.

Módulo para publicar proyectos: Publica en la página web de la fundación, los

proyectos y actividades ambientales que se realizan.

Módulo para registrar materiales: Registra los materiales reciclables que

pueden ser donados a la fundación.

Módulo de control de donación: Comprobar que la información de las

donaciones de materiales por parte del cliente sea correcta y admitir la solicitud

una vez se haga entrega del material.

Módulo de control de artes: Se visualiza la información de las artes que han

registrados los artistas para posteriormente verificar los datos y proceder a aceptar

la publicación.

Rol de Artista

Módulo para publicar artes visuales: Podrán registrar obras visuales realizadas

con materiales donados en el sistema, elegir si el arte estará en exhibición o

subasta y el periodo de tiempo que se mantendrá en la aplicación.

Rol de Cliente

Módulo para donación de materiales: Podrán registrar una solicitud para donar

materiales reciclables, ingresando los datos y cantidad del desecho. El sistema

17

otorgará automáticamente una compensación que puede ser utilizada como

descuento en la adquisición de un arte visual.

Módulo de visualización de obras visuales: Los usuarios podrán visualizar la

galería de obras que están en exhibición, podrán cotizar el valor y entrega de la

obra haciendo uso del chat incorporado en el sistema.

Módulo de subasta de artes: Se muestran las artes visuales destinadas a la

subasta, además de participar en la puja por obtener dicha obra. Una vez

finalizada la subasta, el sistema notifica al usuario ganador.

Módulo de chat: Opción para poder comunicarse con otros usuarios para facilitar

la cotización, entrega y pago de artes visuales.

Este trabajo se enfoca en habitantes de Guayaquil, sin embargo, como alcance a largo

plazo se espera expandir su operatividad a otras provincias, invitando a participar a diversos

artistas de todo el país para transformar los materiales obtenidos por la fundación en artes

visuales, mostrando el talento de los ecuatorianos y ayudando a mitigar la contaminación

ambiental.

18

CAPÍTULO II

MARCO TEÓRICO

Antecedentes del estudio

En el Ecuador se producen 58.829 toneladas de desechos sólidos durante la semana,

de los cuales solo se maneja en condiciones adecuadas el 20% de estos residuos; mientras

que el 80% termina en botaderos controlados, vertederos al aire libre, incineradores y ríos;

por esto, el 45,5% de los municipios necesitan la colaboración de recicladores informales,

estimando que el porcentaje de reciclaje formal e informal sea del 14% (Solíz Torre, 2015).

Entre los principales desechos se pueden encontrar varios productos de uso diario,

tales como el papel, cartón, vidrio, telas, maderas, residuos médicos y tóxicos. Diego Palacios

(Palacios Gordillo, 2017) refiere que la descomposición de estos materiales puede causar un

efecto negativo para la salud de los ciudadanos y el medio ambiente; en la parte ambiental,

los efectos más significativos ocurren en el agua, aire y suelo de los ciudadanos.

La fundación “Manos al Ambiente” es una agrupación que realiza actividades de

movimientos ambientalistas o ecologista en Guayaquil creada a fines del 2018, se dedica

principalmente a la recolección y venta de materiales reciclables.

Reciclar reduce la necesidad de acumular o quemar materiales usados como desechos,

además ahorra energía al disminuir la cantidad de residuos que debe ser cosechado de la tierra

y procesado en una forma útil. El reciclaje de ciertos materiales, como el caucho y el plástico,

19

es especialmente importante, debido al consumo de grandes cantidades a nivel mundial, a la

duración de descomposición, además del costo elevado asociados con la fabricación y

producción de materia prima. El uso de materiales reciclados para fabricar nuevos productos

puede ser particularmente beneficioso (Joseph J. Skaja & Evan L. Schwartz, 2015).

Partiendo de este hecho, la fundación “Manos al Ambiente” ofrece a sus miembros la

oportunidad de utilizar los desechos reciclados como materia prima con el propósito de

transformar en obras visuales que luego puedan ser comercializadas, contribuyendo a la

reutilización de materiales.

La principal actividad de las organizaciones ambientalistas en Ecuador es comprar y

vender desechos reciclables diferenciándose en los precios, facilidad de transportación que

brindan a sus proveedores o la recolección de cierto tipo de material como metal (chatarra),

plásticos y demás, la fundación le añade la transformación de estos materiales en artes.

Al realizar una actividad poco común dentro de las instituciones ambientales en el

país se producen ciertos inconvenientes, por ejemplo, al no comercializar el producto final

se paralizan los trabajos de transformar estos materiales, produciendo un incremento de obras

realizadas almacenadas en bodega, así también la de los materiales destinados a esta

actividad.

Por esta razón se presenta la necesidad de contar con un medio tecnológico que le

permita realizar las actividades que se desarrollan, entre las cuales podemos destacar:

Comunicación de programas y actividades ambientales que se realizan.

20

La recepción y control de materiales reciclables donados a la fundación.

Comercialización de artes visuales creadas en base a residuos reciclados.

Esperando agilizar las actividades mencionadas, minimizando el tiempo de respuesta

y evitar los inconvenientes que existe al llevar estas funciones de manera tradicional (en

papel). Además de reducir los productos almacenados dentro de la institución.

En Ecuador podemos encontrar diversas instituciones que se dedican al reciclaje,

entre las cuales tenemos:

Reciclar Ecuador, una empresa con 15 años en el mercado cuyas actividades

consisten en pesar, transportar, destruir, clasificar, embalar y la disposición final técnica de

los materiales reciclables (Reciclar Ecuador, n.d.).

Recynter como lo expresa en su página web (Recynter, n.d.), es una empresa

localizada en Guayaquil, dedicada principalmente a la reutilización de metales (ferrosos y no

ferrosos); conforma el Grupo Mario Bravo, que realiza actividades de reciclados por 45 años,

colaborando a conservar y mejorar el medio ambiente.

Fibras Nacionales S.A, es una empresa cuya función es la compra de todo material

reciclable, tales como papeles, cartones, plásticos, baterías, metales, etc. La experiencia y

seriedad les permite garantizar a sus clientes un servicio ágil, eficiente y personalizado

(Fibras Nacionales, n.d.).

21

Graham Reciclaje (Graham Reciclaje, n.d.), es una empresa que fomenta la industria

del reciclaje, creando una cadena de centros de acopio, junto con sus colaboradores ofrecen

al mercado materiales de calidad, brindando una imagen de confianza y solidez, permitiendo

vincular a un grupo de proveedores a la actividad del reciclaje.

El reciclaje reduce los presupuestos financieros y medioambientales de la supresión

de residuos, reduce los costes energéticos y conserva los recursos del medio ambiente. Por

lo tanto, existe la necesidad iniciativas de reciclaje que reconozcan los problemas existentes

asociados con la eliminación de residuos y promuevan los esfuerzos de reciclaje como parte

de un planificación de gestión de residuos (Ron Gonen, 2019).

22

Fundamentación teórica

ISO 14001

La ISO 14001 es una norma internacional de aceptación mundial basada en la idea de

que se puede lograr un mejor comportamiento ambiental cuando se identifican y gestionan

sistemáticamente los aspectos Sostenibilidad, mediante la prevención de la contaminación,

la mejora del comportamiento medioambiental y ejecución de la legislación aplicable (da

Fonseca, 2015).

Fundaciones Ambientales

Fundación Natura (Salvador Mosquera, 2014) fue la primera organización no

gubernamental ambientalista del Ecuador fundada en el año de 1979, influenció para que el

tratamiento de la problemática medio ambiental sea abordado con mayor profundidad, debido

a que desde sus inicios fue una mediadora entre el Estado y la creciente controversia en la

temática ambiental; la catalogación de la práctica dada a esta ONG, indica que a pesar de

propagar en el país el pensamiento ambiental pro-conservación, que por un lado trataba de

preservar la naturaleza, por el otro mantenía una figura de empresa consultora. Esta

importante organización, en el 2011 deja de realizar sus funciones dentro del país, a causa de

problemas institucionales.

Reciclaje

Es un proceso sencillo que experimenta un material o producto para volverlo a

utilizar. Este proceso se realiza con el propósito de transformar los desechos en un nuevo

producto para su posterior uso (Bravo, 2017).

23

A nivel mundial en todo momento circulan alrededor de 800 millones de botellas,

recipientes y cajas de plástico, de las cuales unas tres cuartas partes terminan en vertedero,

causando un gran daño al medio ambiente.

Partiendo de este punto se logra identificar dos grupos de países latinoamericanos, el

primero conformado por Perú, Brasil y Colombia, donde las actividades de reciclaje tienen

cierto reconocimiento formal, con normativa que regula el sector e incentivos para la

formalidad, el segundo grupo está conformado por el resto de los países, donde las

actividades relacionadas al reciclaje siguen siendo consideradas marginales y una ocupación

al borde de la ley (Bermeo Paucar, Rea Sánchez, López Bermúdez, & Pico Yépez, 2017).

Tabla 4 Centros de reciclajes identificados en Guayaquil por el PNGIDS

Nota: De acuerdo con el Ministerio del Ambiente, en el país hasta junio del 2019, se registra 72 sitios para

residuos no peligrosos y residuos especiales enmarcados en Responsabilidad Extendida del Productor (REP)

según Programa Nacional para la Gestión Integral de Desechos Sólidos (PNGIDS) Tomado de El Telégrafo

(2019).

Empresa Dirección

Intercia S.A. Ciudadela: Lotización Inmaconsa, Calle: Quinquelias, Número:

Solar 8, Intersección: Casuarina, Edificio: Galpón.

Figueroa Ortiz Tomas Coop. Bastión Popular, Solar Núm. 2, parroquia Tarqui.

Aceria del Ecuador

C.A. Adelca

Km 10 ½ vía Daule, Parroquia Tarqui, Cantón Guayaquil,

Provincia del Guayas

Comexport S.A. km 25 Vía Perimetral, actividades de almacenamiento y depósito

de mercancías varias.

Intercia S.A, Km 9.5 vía a Daule – calle Laureles, Parque Industrial

Inmaconsa.

Cartones Nacionales

S.A.I. Cartopel Km. 6.5 Vía a Daule, Prosperina, Av. 41 No y 4º Pt 41 No.

Industrial Packing

Depot S.A. Inpadesa

Km. 7.5 Vía a Daule Conjunto de Bodegas María Gabriela, Solar

número uno, de la calle publica número 18, Bodega número 3.

Nodien S.A. Lot. Expogranos, Mz. 15, Solar No. 4, diagonal a la compañía

Plásticos Ecuatorianos.

24

En el caso del Ecuador, se considera el reciclaje un sector prioritario para cambiar la

matriz productiva, sin embargo, esta industria todavía está en proceso de desarrollo, a pesar

de lo cual la cadena de gestión integral cuenta con 3.283 empresas, que originan una

producción de 22 millones. La Red de Recicladores, agrupa alrededor de 40 asociaciones en

14 municipios a nivel nacional, sin embargo, en Quito tan solo el 8% de los recicladores se

encuentran asociados (Zabala Celi, 2018).

Metodología de las 5 erres

Para disminuir el consumo de plásticos y otros residuos reciclables en Ecuador se

adopta el método de las 5 erres, con el propósito de mediante un proceso de reutilización se

alargue la vida de cada producto y con un poco de imaginación e iniciativa renovarlo en algo

productivo.

Clasificando estos factores según Ana Cuvi (Cuvi Guaman, 2017) en los siguientes:

1. Reducir: Consiste en disminuir el consumo de producto de bienes innecesarios

de lo que nos presentan para consumirlos.

2. Reutilizar: Es una estrategia dirigida principalmente al sector de envases y el

embalaje, que consiste en volver a usar el mismo envase para fabricar el mismo

producto u otros similares.

3. Reparar: Consiste en arreglar una pieza para evitar residuos, con la finalidad de

aumentar la vida de un producto, evitando que se convierta en basura.

4. Reciclar: Es separar los residuos de los lugares ya sea de los hogares, trabajo,

estudio entre otros, con la convicción de llevar a la práctica en la separación de

residuos orgánicos e inorgánicos.

25

5. Rechazar: Es aprender a evitar el gran consumo de productos plásticos

innecesarios, siendo una manera de contribuir con una solución a la

contaminación ambiental.

Plásticos

De acuerdo a lo expuesto por la International Standards Organization (ISO) y la

American Society for Testing of Materials (ASTM) (Niaounakis, 2013), los plásticos

degradables son polímeros que presentan cambios en su composición química bajo

condiciones ambientales específicas provocando una importante pérdida en sus propiedades

físicas y mecánicas.

Los polímeros que cumplen los requerimientos de las normas ISO y ASTM deben

mostrar las siguientes características:

Debe desintegrarse deprisa durante el compostaje.

Debe biodegradarse fácilmente en condiciones de compostaje.

No debe reducir el valor del compost terminado y puede conservar vida vegetal.

No debe tener enormes cantidades de metales o materiales tóxicos.

Residuo Sólido

Es cualquier material, objeto, sustancia sólida proveniente del consumo o utilización

de un producto en las labores industriales, comerciales, domésticas, que el generador rechaza

o abandona y que es idóneo para la transformación de un nuevo producto con bajo valor

monetario (Régimen Legal de Bogota D.C., 2002).

26

Tabla 5 Principales residuos sólidos inorgánicos recolectados por ciudad

Nota: La Iniciativa Regional para el Reciclaje Inclusivo (IRR), presenta que los residuos tipo PET representa

el mayor material recuperado en las 4 ciudades con un 18% de promedio, se puede inferir que la recuperación

de los recicladores es gracias a la aplicación del Impuesto Redimible a las botellas PET de la política pública,

así como, la elevada demanda existente por la industria. Tomado de IRR (2015).

Artistas Traperos

Se define a aquel que recolecta los desechos o restos dejados por las personas o

industrias para transformarlos en arte, esta visión romántica del chatarrero o recolector de

basura procede de finales del siglo XIX, heredada de la poesía de Baudelaire. Posteriormente,

se aplicó también los artistas plásticos, en el transcurso del siglo XX, ha ido evolucionando

hasta la actualidad, convirtiéndose en la elección de un estilo de vida anti-materialista dentro

de la sociedad (Martínez Campos, 2015).

Artes Visuales de la Basura

Desde principios del siglo XX, los artistas han tratado de reutilizar y reevaluar lo

desechado, perdido o rechazado, hallando en ello un interés estético, un reflejo de nuestro

propio subconsciente y un acto contra lo establecido, o todo simultáneamente (Martínez

Tipo de Material Ciudad

Quito Guayaquil Cuenca Manta Promedio

Papel Blanco 10% 12% 15% 16% 13%

Papel Económico 7% 14% 12% 5% 10%

Cartón 17% 16% 15% 16% 16%

Plástico Suave 10% 13% 13% 14% 13%

Plástico Duro 8% 9% 11% 16% 11%

PET 24% 20% 13% 16% 18%

Vidrio 3% 11% 6% 14% 8%

Metales / Chatarras 19% 5% 12% 2% 10%

Equipos Electrónicos 2% 0,5% 3% 0% 1%

TOTAL 100% 100% 100% 100% 100%

27

Campos, 2015). En la actualidad existen diversas personas que elaboran sus obras en base a

materiales reciclados, la fundación “Manos al Ambiente” brinda la oportunidad a los artistas

de utilizar parte del material obtenido por la organización para la elaboración de obras

visuales, brindando una alternativa en la reutilización de los desechos reciclados.

Figura 3 Leyendas de hierro

Nota: Darío Suarez presenta a la alcaldesa de Guayaquil, Cynthia Viteri, en su obra Leyendas de Hierro una

manera de elaborar artes visuales en base a materiales desechados por los ciudadanos. Tomado de Darío Suarez

(2019).

Aplicación Web

Son herramientas de ofimática de la web (Traverso et al., 2013) que se utilizan con

una conexión a internet, y en estos casos maneja el ordenador como forma de procesos de la

aplicación remota.

Es un sistema multiplataforma, ejecutadas por dispositivos informáticos que

mantenga una conexión a internet, solo requiere la instalación de un navegador, almacena los

respaldos de información en los servidores, los datos producidos pueden ser compartidas de

manera simultánea por las personas, el servidor se encarga del espacio utilizado por los datos

y es de fácil uso (Molina Ríos, Zea Ordóñez, Contento Segarra, & García Zerda, 2018).

28

La arquitectura de aplicación web tradicional consta de un cliente y un servidor web

(Voutilainen, 2017). El cliente generalmente es el navegador web, envía solicitudes HTTP al

servidor web, que luego realiza algunas funciones basadas en la solicitud y posiblemente

devuelve algún resultado.

Figura 4 Modelo de transferencia de datos de aplicaciones web

Nota: El cliente solicita una página web del servidor web, y la web a su vez, el servidor solicita algunos datos

de la base de daros y finalmente retorna un documento HTML junto con estilos CSS para el navegador del

usuario. Tomado de Voutilainen, J. (2017).

Entorno de desarrollo integrado (IDE)

Los IDE otorgan un entorno único para elaborar gran parte de los trabajos de

desarrollo / prueba dentro de una experiencia de usuario; suelen proporcionar un entorno para

editar, refactorizar y compilar código; editar interfaces de usuario; diagrama de lógica;

construir aplicaciones; y realizar cierto nivel de análisis de código, pruebas e integración de

control de código fuente (Ritchie, 2016).

Visual Studio CODE

Es un IDE multiplataforma (Windows, Mac y Linux) que admite la creación de

aplicaciones ASP.NET 5 / DNX, Node.js, Office y Unity; es mucho más liviano separándose

de la tradicional estructura de archivos de solución / proyecto que Visual Studio usa a favor

29

de los archivos JSON y la estructura de directorios implícita; actualmente es gratuito, de

código abierto y permite a los usuarios trabajar en código (Ritchie, 2016).

Desarrollado por Microsoft (Clow, 2018), incluye soporte para depuración, control

de Git integrado, finalización de código inteligente, resaltado de sintaxis, fragmentos y

refactorización de código; teniendo gran compatibilidad con JavaScript, PHP y más, es

relativamente compacto.

Lenguaje de Programación

Es un lenguaje artificial elaborado para expresar instrucciones que pueden ser

realizadas por máquinas electrónicas como las computadoras, pueden ser usadas para

elaborar programas que realicen una conducta física y lógica de un ordenador, para formular

solución a problemas con precisión y pasos lógicos, o como modelo de comunicación

humana; está diseñado por un grupo de reglas y símbolos que definen su estructura, el sentido

de sus expresiones y elementos (Gutiérrez Sánchez, 2016).

Tabla 6 Cuadro comparativo de lenguajes de programación web

JavaScript Lenguaje de Scripts

dinámicos.

Escritura dinámica

y no tiene clase.

Indispensable para el

Marketing Online.

Java

Lenguaje de

Programación

Orientado a Objetos.

Los programas son

extensibles y

escalables.

En comparación con otros

lenguajes, es difícil de

aprender.

PHP Lenguaje de Scripting,

Considerado

lenguaje web apto

para inexpertos.

Incorporado en HTML,

provocando mayor carga de

servidor.

Python

Lenguaje de

Programación

Orientado a Objetos, a

Aspectos o Funcional.

Velocidad de

ejecución

relativamente baja.

Integra fácilmente las bases

de datos científicas.

30

Nota: Si bien los lenguajes de programación web son similares en muchos aspectos, los desarrolladores de

software utilizan el que más se acople a sus necesidades y conocimientos. La elaboración es propia.

El presente trabajo utiliza la combinación 2 lenguajes de programación diferentes,

mencionados a continuación:

A. PHP

Es un software libre, bajo la licencia PHP License, utilizado originalmente

para desarrollar aplicaciones presentes y que actúan en el lazo del servidor, capaz de

producir contenido en la WWW (Arias, 2017).

Cada versión vio un aumento de contribuyentes que presentaron mejoras y

correcciones de errores, además del crecimiento hiperbólico de los usuarios, pasó de

tener unas pocas docenas a desempeñar un papel en la asombrosa cantidad de 244

millones de sitios web (incluidos Facebook, Wikipedia, Cisco WebEx e IBM, entre

muchos otros), según una encuesta realizada por Netcraft en enero del 2013, en 2016

y 2017 se anunció que PHP se utiliza en el 82% de los servidores web (Kromann,

2018).

Características:

Velocidad y Robustez.

Estructurado y Orientado a Objetos.

Portabilidad – independencia de plataforma.

Ruby

Lenguaje de

Programación

Orientado a Objetos.

Todo se considera

objeto, tanto los

valores como las

clases.

No presenta excepciones

aplicables a tipos de datos

primitivos.

31

Mecanografiado dinámico.

Open-source.

B. JavaScript (JS)

Es un lenguaje interpretado y ligero, orientado a objetos con funciones de

primera clase (mills, 2017), más conocido como el lenguaje de script para páginas

web, pero también usado en muchos entornos sin navegador, tales como node.js,

Apache CouchDB y Adobe Acrobat; es multi-paradigma, dinámico, imperativa, se

basa en prototipos, orientada a objetos y soporta estilos de programación funcional.

Reconocido como un lenguaje completo, capaz de realizar cálculos e

interacciones complejas, funciones anónimas (lambda) e incluso

metaprogramación; se ha convertido en una parte tan importante de la web que

incluso los navegadores alternativos como los teléfonos móviles y los diseñados

para usuarios con discapacidades, lo admiten (Frisbie, 2019).

Las librerías de JavaScript contribuyen a cerrar la abertura entre las

diferencias del navegador y otorgan un acceso más fácil a las características

complejas del navegador (Frisbie, 2019); las librerías vienen en dos formas: general

y especialidad, las generales proporcionan acceso a la funcionalidad común del

navegador y se utilizan como base en una página o aplicación web, las

especializadas realizan cosas específicas y están destinadas a ser utilizadas solo para

partes de un sitio o aplicación web.

32

jQuery

La librería jQuery es una biblioteca de código abierto y software libre que resulta de

gran utilidad para simplificar la manera de interactuar con los documentos HTML, manejar

eventos y desarrollar animaciones. Otras funcionalidades de esta herramienta, es el manejo

del árbol DOM o la posibilidad de interaccionar con la técnica de AJAX, se puede hacer uso

de ReactJS para abordar la creación de la interfaz de usuario y manejo de los elementos

HTML, y de Socket.IO para la comunicación en tiempo real con el servidor (Marrero

Cabrera, 2019).

Data Table

Es un complemento para la biblioteca jQuery JavaScript. Es una herramienta muy

flexible, construida sobre los cimientos de la mejora progresiva, que agrega todas estas

características avanzadas a cualquier tabla HTML (datatables.net). Muestra la información

mediante el procesamiento del lado del servidor. Se realiza una solicitud AJAX GET a la

URL especificada en la API REST de OpenMRS y los datos se devuelven a la tabla. Data

Table es útil porque puede mostrar los datos a lo largo del tiempo (Yandrapalli, Jones, &

Purkayastha, 2019).

Node.js

Es una plataforma de software que se basa en el tiempo de ejecución de JavaScript

V8 de Chrome para crear aplicaciones de red escalables sin esfuerzo. Node.js utiliza un

modelo de E / S sin bloqueo controlado por eventos que lo hace liviano y eficiente, perfecto

para aplicaciones en tiempo real con uso intensivo de datos que se ejecutan en dispositivos

distribuidos (Hota & Prabhu, 2014).

33

Express.js

Es un framework relativamente pequeño que se encuentra sobre la funcionalidad del

servidor web de Node.js para simplificar sus APIs y agregar nuevas funciones útiles. Facilita

la organización de la funcionalidad de su aplicación con middleware y enrutamiento; facilita

la representación de vistas HTML dinámicas; agrega utilidades útiles a los objetos HTTP de

Node.js; define un estándar de extensibilidad de fácil implementación (Hahn, 2016).

API

Las API son métodos de software que permiten la comunicación de máquina a

máquina, pueden permitir operaciones arbitrarias en las computadoras; los ejemplos van

desde el acceso a datos a través de API no autenticadas hasta la creación de cuentas de usuario

(Call & Peacock, 2017).

Las API son actualmente una fuerza impulsora en la expansión de la gestión de datos,

los servicios web y los sistemas de redes de nube privada que la demanda empresarial para

mantener API útiles es demasiado alta para ignorarla. Como tal, las empresas deben aumentar

la seguridad y el monitoreo de sus redes (Call & Peacock, 2017).

API REST

REST fomenta la reutilización de la tecnología HTTP para enviar y recibir datos de

la misma manera que un navegador web solicita y recibe una página web a través de

localizadores uniformes de recursos (URL), REST no impone restricciones de formato a los

datos devueltos (Yates et al., 2015).

34

JSON

Un documento JSON es una serialización textual muy simple de un objeto JavaScript.

Más precisamente, es un árbol compuesto por tres tipos de nodos (literal, matriz u objeto),

donde el nodo raíz no puede ser un literal. Un nodo literal puede ser un booleano, un número

o una cadena. Un nodo de matriz es una secuencia de nodos. Un nodo de objeto tiene un

conjunto de propiedades secundarias, cada una de ellas tiene una etiqueta única dentro del

objeto y un valor que es un nodo (Cao, Falleri, Blanc, & Zhang, 2016).

AJAX

AJAX no es una nueva programación ni un nuevo lenguaje de scripting, más bien, es

una nueva forma de pensar para utilizar las tecnologías existentes para producir aplicaciones

web que sean mejores, más rápidas e interactivas. AJAX utiliza las tecnologías, lenguajes,

niveles y protocolos existentes de una nueva forma para obtener una interacción rica con el

lado del cliente que es muy análoga a las aplicaciones de escritorio. Estas tecnologías trabajan

juntas en diferentes niveles para crear un modelo de desarrollo de aplicaciones web nuevo y

más poderoso con el fin de superar los problemas de los patrones de solicitud-espera y

respuesta-espera (Khalid, Khusro, & Ullah, 2018).

Estas tecnologías incluyen lenguajes de marcado que incluyen HTML, XHTML y

XML; lenguajes de presentación que incluyen CSS y DOM para visualización y

actualización; lenguajes de scripting del lado del cliente como JavaScript, objeto

XMLHttpRequest para comunicación asincrónica con el servidor; XML, XSLT y JSON para

intercambio de datos y JSP, JSF, Perl, Ruby, PHP y ASP para secuencias de comandos del

lado del servidor. DOM es una estructura de datos de árbol que se ensambla en el lado del

35

cliente siguiendo la construcción jerárquica de la página web correspondiente (Khalid et al.,

2018).

Framework

La palabra “framework” cubre un conjunto de patrones diferentes, pero de alguna

forma todos otorgan una estructura organizativa obstinada dentro de la cual se puede tomar

forma aplicaciones complejas; permite que las aplicaciones mantengan convenciones de

código consistentes mientras se escala de manera elegante en tamaño y complejidad,

ofreciendo mecanismos robustos para trabajos comunes, como la definición y reutilización

de componentes, el enrutamiento, el control del flujo de datos y demás (Frisbie, 2019).

Los frameworks han evidenciado ser herramientas útiles para ayudar en el desarrollo

de un software (Gil Vera, Gomes Da Silva, Gil Vera, & Teutsch, 2018) debido a que

promueven la reutilización del código, al disponer y soportar una arquitectura estandarizada

que asegura su mantenibilidad.

A, Framework de Desarrollo

Existe una diversidad de Frameworks PHP para realizar aplicaciones web,

cada una con diferentes ventajas y desventajas frente a otras plataformas de trabajo

similares. Es por esta razón que se consultó con la herramienta de búsqueda de

tendencias Google Trend para conocer la popularidad que existe en el mundo entre

los frameworks Laravel, Symfony, Zend, CakePHP y CodeIgniter.

36

Tabla 7 Cuadro comparativo de frameworks PHP

Nota: Los diversos frameworks comparten características similares, diferenciándose de factores como la

documentación, facilidad de aprendizaje y soporte que se puede encontrar en la web. La elaboración es propia.

Figura 5 Tendencia a nivel mundial de frameworks PHP

Nota: Los resultados demuestran una gran diferencia de búsqueda entre Laravel y sus competidores en el último

año, agosto 2019-2020, llegando a la conclusión de que el entorno de trabajo que Laravel ofrece a los

programados es el más estable para realizar aplicativos webs. Tomado de Google Trend (2020).

Laravel

Es un marco de trabajo para aplicación web de pila completa (Kromann, 2018)

con enfoque en la sintaxis expresiva y elegante e intenta eliminar la confusión del

desarrollo facilitando la codificación de trabajos comunes realizadas en los

Laravel

Cuenta con

herramienta Artisan

para crear modelos

y controladores.

Viene con herramienta

ORM para facilitar

cambio de base de datos.

Cuenta con motor de

plantilla Blade para

heredar plantillas.

Symfony

Cuenta con

colección de

bibliotecas PHP.

Viene con herramienta

Propel para el mapeo de

objetos a base de datos.

Basado en los helpers

empleados por Ruby on

Rails en sus plantillas,

CakePHP

Fácil de agregar

bibliotecas de

proveedores.

Cuenta con

herramientas de

generación de consultas

y ORM.

Sigue estructura PHP

rudimentaria en sus

plantillas.

CodeIgniter

Su estructura se

base libremente en

la programación

orientada a objetos.

Cuenta con base de

datos relacionadas como

MySQL de forma

predeterminada.

No hay un motor de

plantillas, hay código

PHP puro.

37

aplicativos; estas tareas incluyen autenticación, manejo de sesión, enrutamiento y

almacenamiento en caché.

Las principales características y fuentes de inspiración de Laravel pueden

ayudarte a aumentar tu productividad (Saunier, 2014):

Modularidad: Se creó sobre más de 20 bibliotecas diferentes y se

estructura en módulos individuales.

Capacidad de prueba: Incluye varios ayudantes que le permiten visitar

las rutas de sus pruebas, rastrear el HTML resultante, garantizar que se

invoquen métodos en ciertas clases e incluso hacerse pasar por usuarios

autenticados.

Enrutamiento: Brinda mucha flexibilidad cuando define las rutas de su

aplicación. Esta característica está inspirada en micro-frameworks, como

Sinatra (Ruby) y Silex (PHP).

Configuración Management: Permite definir configuraciones para cada

entorno y luego selecciona automáticamente las configuraciones correctas

dependiendo de dónde se efectúa la aplicación.

Creador de esquemas, migraciones y siembra (seeding): Permite

definir su esquema de BD con código PHP y realizar un seguimiento de

cualquier cambio ayudado con las migraciones de bases de datos.

Autenticación: Proporciona las herramientas para registrar, autenticar e

incluso enviar recordatorios de contraseña a los usuarios.

38

B. Framework de Desarrollo

Si bien Bootstrap es el framework más usado para el diseño de interfaces de

aplicaciones web, no es el único. Existe un framework llamado Ulkit (Velankar &

Mane, 2017), fue creado por YooTheme en el año 2013; es ligero, modular y está

construido con CSS3 y JavaScript. Pero la gran trayectoria, recursos y documentación

que posee Bootstrap le da ventaja frente a sus competidores.

Tabla 8 Cuadro comparativo de frameworks de diseño

Nota: Lo que consolida a Bootstrap como Framework de diseño es la gran cantidad de recursos y

documentación que ofrece, estancando el desarrollo y crecimiento de Ulkit. Tomado de Velankar, S. & Mane,

D. (2017).

Bootstrap

Es un marco de trabajo desarrollado por Twitter cuyo objetivo es facilitar el

diseño de una página o aplicación web (Gutiérrez Sánchez, 2016), permite elaborar

de manera sencilla webs de diseño adaptable, es decir, que puedan adaptarse a

Factores /

Características Bootstrap Ulkit

Grid

(Cuadricula)

Basado en el diseño de 12

columnas. Basado en el diseño de 10 columnas.

Autocompletar

Codificar manualmente para

mostrar valores al escribir la

entrada del formulario.

Tiene clase predefinida “.uk-grid-

collapse”.

Documentación Proporciona ejemplo y

plantillas en vivo.

Documentación compleja para

principiante.

Timepicker /

Datepicker

Necesita JQueryUI para crear

estos campos.

Clases predefinidas para esto. No

necesita JQueryUI,

Animación

Animaciones incorporadas

para componentes en

particular.

Animaciones incorporadas que se

pueden usar para varios componentes.

Popularidad Es el Framework más popular.

Menos popular. Difícil encontrar

recursos de aprendizajes para

principiantes.

39

cualquier dispositivo y dimensión de pantalla para que vean igual de bien; es de

código abierto, por ende gratuita y esta sin restricciones.

¿Bootstrap es un framework?

Según Denzel Ovando (Ovando Ortega, 2019), un framework es una

colección de archivos HTML, CSS y JavaScript que contienen patrones de diseño con

los que se pueda desarrollar un sitio web, evitando perder tiempo reescribiendo

código repetitivo una y otra vez, además del ahorro de tiempo; en Bootstrap estos

archivos son las hojas de estilo CSS, las plantillas HTML (o snippets de código), los

archivos JavaScript y la fuente de iconos Glyphicons.

Plugins de JavaScript

Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de

JavaScript; los plugins se encuentran en la herramienta de plugin de jQuery, proveen

elementos adicionales de interfaz gráfica como diálogos, tooltips y carruseles (Ovando

Ortega, 2019).

Base de Datos (BD)

Es un sistema estructurado por un grupo de datos guardados en discos permitiendo el

acceso a ellos, además de un grupo de programas que manejen ese grupo de datos (Gutiérrez

Sánchez, 2016), un Sistema Gestor de Base de Datos (SGBD) es un grupo de programas para

crear y conservar una BD, garantizando su confidencialidad, integridad y seguridad.

40

Tabla 9 Cuadro comparativo de bases de datos

Nota: MySQL Y PostgreSQL son los SGBD afianzadas en el mercado, siendo escogidos por criterios

personales, puesto que se asemejan con sus características. La elaboración es propia.

Figura 6 Tendencia a nivel mundial de bases de datos

Nota: MySQL lidera el mercado en el transcurso de Agosto 2019-2020, siendo el Sistema Gestor de Base de

Datos preferida de los desarrolladores debido a su fácil aprendizaje. Tomado de Google Trend (2020).

MySQL

El servidor de base de datos relacionales MySQL se lanzó por primera vez al público

en general a fines de 1996; el software demostró ser tan popular que en 2001 fundaron una

nueva compañía basada completamente en servicios y ofertas de productos específicos de

MySQL (Kromann, 2018).

MySQL

Doble licencia, una

parte de código

abierto y otra

comercial gestionada

por Oracle.

Privilegios de tablas

no se borran de forma

automática.

SGBD más popular que

existe.

PostgreSQL

Sistema de datos

relacional de objetos

de código abierto.

Lentos en inserciones

y actualizaciones.

Los índices, tienen API

definidas para que pueda

construir con PostgreSQL.

MariaDB

Puede instalar

WordPress para un

mejor rendimiento.

Archivo de Registro

IDX tiene a volverse

muy grande, por lo

que se ralentiza.

Frecuentes versiones de

Seguridad.

SQLite

Tamaño de

almacenamiento

limitado.

Carece de cifrado de

datos incorporado.

Alternativas como DBMS

para sistemas operativos

móviles.

41

Flexibilidad: Encontrará binarios optimizados disponibles para 14 plataformas,

entre los cuales están Linux, Mac OS X, Microsoft Windows, Ubuntu entre otros.

Poder: El compromiso con la velocidad extraordinaria no ha cambiado, las

capacidades que antes carecían han crecido para rivalizar con las de muchos de

los competidores comerciales y de código abierto.

Características SQL de nivel empresarial: Se agregaron funciones avanzadas

como subconsultas, vistas y procedimientos almacenados, lo que resultó en una

mayor adopción en entornos empresariales.

Indización y búsqueda de texto completo: Ha apoyado la indexación y

búsqueda de texto completo, características que mejoran en gran medida el

manejo de la extracción de datos de columnas basadas en texto.

Consulta de almacenamiento en caché: Permite almacenar consultas Select,

junto con sus resultados correspondientes, en la memoria.

Replicación: Permite que una base datos ubicada dentro de un servidor MySQL

se duplique en otro.

Herramientas de desarrollo del proyecto

Laravel permite a los desarrolladores usar Bootstrap y JavaScript como paquetes

Front-End que se instalan mediante el comando NPM para diseñar una interfaz gráfica (Tang,

2019), tiene algunos andamios básicos de JavaScript para construir sitios web utilizando la

biblioteca Vue.js..

42

En base a los datos obtenidos en la investigación de tecnologías utilizadas para el

desarrollo de aplicaciones web, se determina que la elaboración de este trabajo este

estructurado en 3 secciones diferentes, haciendo uso de las herramientas detalladas a

continuación:

En la capa de Front-End y Responsive se utilizará el Framework Laravel y Bootstrap

4, mediante el entorno de trabajo Visual Studio Code y como lenguaje de programación

JavaScript, esto para diseñar la interfaz de usuario en la aplicación.

Para la capa del Back-End se utiliza el lenguaje de marcado HTML y CSS; el uso de

la librería jQuery de JavaScript, empleando su plug-in DataTables que permite mapear las

columnas de una tabla mostrando la información mediante el procesamiento del lado del

servidor, devolviendo los datos a la tabla.

En la capa del servidor, se realiza una solicitud AJAX para las funciones de GET y

POST a la URL especificada en la API REST a través de Espress.js, framework de desarrollo

de aplicaciones web para Node.js de JavaScript con el propósito de conectar con el sistema

gestor de base de datos MySQL.

Aunque Laravel es un marco de trabajo de BackEnd, un proyecto de Laravel está

equipado con suficientes herramientas FrontEnd para construir un sitio web completo con

una interfaz de usuario interactiva (Tang, 2019), estas herramientas son JavaScript, archivos

de activos SaSS y archivo package.json; desde Laravel 5.3.

43

Pregunta científica a contestar

¿La elaboración de una aplicación web para la donación de plásticos, exposición y

subasta de artes visuales beneficiara a la reducción y reutilización de materiales reciclados

dentro la fundación “Manos al Ambiente”?

Definiciones conceptuales

Reciclador: Es la persona natural o jurídica que presta el servicio público de aseo en

la actividad de aprovechamiento (Régimen Legal de Bogota D.C., 2002)

Reciclar: Es el proceso mediante el cual se aprovechan y transforman los residuos

sólidos recuperados y se devuelve a los materiales su potencialidad de reincorporación como

materia prima para la fabricación de nuevos productos (Régimen Legal de Bogota D.C.,

2002).

Recolección: Es la acción y efecto de recoger y retirar los residuos sólidos de uno o

varios generadores efectuada por la persona prestadora del servicio (Régimen Legal de

Bogota D.C., 2002).

Recuperar: Es la acción que permite seleccionar y retirar los residuos sólidos que

pueden someterse a un nuevo proceso de aprovechamiento, para convertirlos en materia

prima útil en la fabricación de nuevos productos (Régimen Legal de Bogota D.C., 2002).

Aplicaciones web: Son las aplicaciones que los usuarios acceden a ellas mediante un

servidor web a través de Internet o de una Intranet mediante un navegador web (Ovando

Ortega, 2019).

44

Reutilizar: Es la prolongación y adecuación de la vida útil de los residuos sólidos

recuperados y que mediante procesos, operaciones o técnicas devuelven a los materiales su

posibilidad de utilización en su función original o en alguna relacionada, sin que para ello

requieran procesos adicionales de transformación (Régimen Legal de Bogota D.C., 2002).

Bootstrap: Es un framework desarrollado que tiene como objetivo facilitar el diseño

web. Es un framework CSS que te permitirá crear sitios web y aplicaciones web totalmente

responsive sin necesidad de complicados desarrollos (Ovando Ortega, 2019).

Framework: Es un esquema o un patrón para el desarrollo o la implementación de

una aplicación software como web. Sirve para apoyar el desarrollo de software como sitios

web dinámicos, aplicaciones web y servicios web (Ovando Ortega, 2019).

Laravel: Es un framework de código abierto para desarrollar aplicaciones y servicios

web con PHP 5. Su filosofía es desarrollar código PHP de forma elegante y simple (Ovando

Ortega, 2019).

Visual Studio CODE: Visual Studio Code de Microsoft es un editor de código

abierto basado en el framework Electron. Similar para otros editores importantes, es

altamente extensible a través de su biblioteca de paquetes (Frisbie, 2019).

45

CAPÍTULO III

PROPUESTA TECNOLÓGICA

Se presenta como propuesta la elaboración de un aplicativo web que permita a la

fundación “Manos al Ambiente” sistematizar los procesos de monitoreo y coordinación en la

donación de materiales reciclables, publicación y comercialización de artes visuales, además

de difundir las actividades y proyectos ambientalistas que realiza la organización. El cual se

implementará en base a la metodología del modelo de Prototipado mediante la realización de

entregables parcial.

Análisis de factibilidad

Este proyecto permite sistematizar funciones que se desempeñan dentro de la

fundación, agilizando los procesos, el tiempo y sobre todo reduciendo los desechos

reciclables que se aglomeran en los predios de la organización. De esta manera se dará

sustento para demostrar la factibilidad que existe con la elaboración de esta propuesta.

Factibilidad operacional

La aplicación web es factible porque se automatiza los procesos de la fundación de

una manera digital. Los usuarios serán colaboradores de la organización y personas naturales,

el sistema tendrá una interfaz gráfica amigable que les permitirá a los usuarios manejar la

aplicación de una manera fácil, sencilla e intuitiva.

46

Figura 7 Proceso actual

Nota: Se presenta los procesos actuales que realizan de manera manual para el funcionamiento de las

actividades que realiza la fundación Manos al Ambiente. La elaboración es propia.

Figura 8 Mapeo de proceso AS IS

MAPEO DE PROCESOS AS IS

Cola

bora

dore

s (A

rtis

tas)

Fundac

ión

Ciu

dad

anos

Fase

Inicio

Solicitar Donación de

Materiales Reciclables en

Redes Sociales

Donar

Materiales

Crear Ficha de

Donador y Materiales

Donados

Llenar Inventario de

Materiales

Almacenados

Planificar entrega de

Materiales a los

Colaboradores

Solicitar

Materiales

Reciclables

Llenar Inventario

de Materiales

Solicitados

Entregar

Materiales

Crear Artes

Visuales

Publicar Obras

en Redes

Sociales

Comercializar

Obras

Adquirir Artes

Visuales

Llenar Inventario

de Obras

Comercializadas

FinVerificar

Materiales

Nota: Se detalla las actividades que cumplen los diferentes actores dentro de la organización y como se une las

diversas funciones. La elaboración es propia.

47

Figura 9 Proceso automatizado

Nota: Se describe los módulos automatizados que realiza la aplicación web para facilitar y mejorar el

desempeño de estas funciones por parte de los usuarios. La elaboración es propia.

Figura 10 Mapeo de procesos TO BE

Nota: Se especifica los procesos dentro del sistema para realizar las actividades de manera automatizada,

bridando fiabilidad y eficiencia. La elaboración es propia.

48

Factibilidad técnica

La aplicación web cuenta con factibilidad de software puesto que se desarrolla con

herramientas Open Source lo que permite realizar los requerimientos solicitados por la

organización.

Por parte del hardware no presenta mayor inconveniente, la aplicación no requiere de

grandes recursos para la ejecución del aplicativo, el usuario puede ingresar mediante

cualquier navegador de internet.

Tabla 10 Requerimiento de hardware para el desarrollo

Nota: Se describe las características del Hardware que tiene el equipo con el que se desarrolla el prototipo del

proyecto. La elaboración es propia.

Tabla 11 Requerimiento de software para el desarrollo

Nota: Se presenta las herramientas seleccionadas para el desarrollo de la aplicación web, analizadas en el

capítulo anterior. La elaboración es propia.

Características Especificaciones

Procesador Intel ® Core™ i5

Memoria RAM Desde 4 GB

Disco Duro 500 GB en adelante

Tipo de Sistema S.O. de 64 bits, procesador x64

Herramienta Descripción

Sistema Operativo Windows 10

IDE Visual Studio CODE

Lenguaje de Programación PHP, JavaScript

Framework Laravel, Bootstrap

API REST

Base de Datos MySQL

49

Factibilidad legal

El proyecto se lo considera factible porque está fundamentado bajo los artículos

mencionados en el Anexo 3. No infringen leyes establecidas en el país, así como el

consentimiento y autorización por parte de la fundación “Manos al Ambiente” para el

desarrollo del aplicativo.

Factibilidad económica

La elaboración del aplicativo web cuenta con el uso de software libre, lo que lleva a

que no exista la necesidad de comprar licencias para utilizar las herramientas de desarrollo.

Tabla 12 Presupuesto del proyecto

Nota: En esta tabla se presentan los principales recursos que se han considerado en el presente proyecto. La

elaboración es propia. La elaboración es propia.

Presupuesto del Proyecto

Requerimiento Tiempo Cantidad V. Unitario V. Total

Requerimiento de Hardware

Laptop - 2 $750 $1500

Requerimiento de Software

Laravel - 1 - -

Visual Studio CODE - 1 - -

API REST - 1 - -

MySQL - 1 - -

Recurso Humano

Desarrollador 4 meses 1 $700 $2800

Investigador 4 meses 1 $600 $2400

Gastos Generales

Servicio Eléctrico 4 meses 2 30 240

Internet 4 meses 2 30 240

TOTAL 7180

50

Metodologías del proyecto

La planificación, elaboración y desarrollo de la presente propuesta se realizará en base

a 2 metodologías:

1. Para la elaboración y documentación del proyecto, en la metodología de

investigación se aplicará el método Cualitativo, que busca levantar y procesar la

información mediante técnicas como las encuestas con el propósito de

diagnosticar los problemas y encontrar una solución factible.

2. Para el desarrollo de la propuesta, como metodología de desarrollo se utilizará el

modelo del Prototipado, cuyo enfoque se basa crear un prototipo que debe ser

evaluado por el cliente consiguiendo su retroalimentación para refinar los

requisitos del software.

Metodología de investigación

Método Cualitativo

El método cualitativo se enfoca en profundizar y entender los fenómenos, observando

desde la perspectiva de los integrantes en su entorno, relacionado con los aspectos que los

rodean; normalmente es seleccionado cuando se trata de comprender el criterio de individuos

o grupos a los cuales se van a investigar acerca de los acontecimientos que los rodean,

conocer sus experiencias, opiniones, identificando de esta manera cómo subjetivamente

perciben su realidad (Guerrero Bejarano, 2016).

Entre las técnicas que ofrece el método cualitativo se tomó las más acordes con la

fundación, tomando en cuenta la poca cantidad de colaboradores, las cuales son:

La Observación: Tiene como medio un carácter selectivo y su finalidad es

51

conseguir información de un tema específico, lo que involucra que se debe tener

alguna idea de lo que se va a observar (Guerrero Bejarano, 2016).

Se plantea la visita del predio de la organización para conocer las

actividades que realizan en la fundación y observar los problemas que se pueden

presentar al realizar las actividades.

El cuestionario: técnica que se utiliza mayormente en investigaciones

cuantitativas, pero que pueden ser de gran utilidad para investigaciones

cualitativas, se recomienda que los cuestionarios no tengan más de treinta

preguntas y son utilizados para obtener las opiniones de grupos numerosos que

podrían colaborar invirtiendo tiempo mínimo (Guerrero Bejarano, 2016).

Se toma en consideración la opinión de los artistas de la ciudad de

Guayaquil que colaboren con la fundación haciendo uso de una encuesta para

presentar mediante estadísticas la opinión con respecto al desarrollo del aplicativo

web.

Población y muestra

Población.

Se escogió como población un aproximado de 2002 Artistas de la Zona 8 (Guayaquil,

Durán y Samborondón) que se dedican a la creación de Artes Plásticas y Audiovisuales, los

cuales fueron consideradas en el informe “Ecuador, territorio de las Artes y Creatividades

2014-2017” ( Subsecretaria de Artes y Creatividad, 2014).

52

Muestra.

Para la muestra se toma en consideración a 50 artistas colaboradores para realizar

artes visuales haciendo uso de los materiales reciclables obtenidos por la fundación Manos

al Ambiente.

Fórmula para el cálculo de la muestra

𝑛 =𝑁𝑍α/2

2 𝑝𝑞

𝑒2(𝑁 − 1) + 𝑝𝑞𝑍α/22

Donde:

Zα/2 = nivel de confianza (1.96)

N = tamaño de la población (50)

n = tamaño de la muestra

e = error de estimación máximo tolerable (5%)

p = probabilidad de éxito (0.5)

q = probabilidad de fracaso (0.5)

Cálculo de la muestra

𝑛 =(50)(1.962)(0.5)(0.5)

(0.052)(50 − 1) + (0.5)(0.5)(1.962)

𝑛 = 44

53

Técnicas de recolección de datos.

La obtención de datos se realiza mediante la técnica de la encuesta, elaborada para

conocer la perspectiva sobre la propuesta a desarrollar, así como los beneficios que puedan

obtener con esta.

La encuesta está dirigida a los artistas que colaboran con la fundación, se elaboró 7

preguntas las cuales busca conocer sus opiniones sobre la problemática que existe, así como

la propuesta a desarrollar, para conocer la aceptación del aplicativo y su posible contribución

con la fundación.

Procesamiento y análisis

Esta fase se detalla y analiza las preguntas realizadas en las herramientas en la

recolección de datos, con el propósito de conocer los problemas de la fundación y plantear

los requerimientos necesarios para dar solución a la problemática.

54

Pregunta #1: ¿Cómo ve la acogida del arte plástico y visual por parte del público en

Guayaquil?

Tabla 13 Pregunta #1: ¿Cómo ve la acogida del arte plástico y visual por parte del público en Guayaquil?

Nota: En la presente tabla se muestran los valores absolutos y relativos correspondientes al proceso de

tabulación de la pregunta 1. La elaboración es propia.

Figura 11 Pregunta #1: ¿Cómo ve la acogida del arte plástico y visual por parte del público en Guayaquil?

Nota: De un total de 50 artistas visuales encuestadas se observa que el 54% de los encuestados consideran muy

buena la acogida del arte plástico y visual en Guayaquil y que el 30% lo considera excelente, aumentando el

auge de esta actividad en la ciudad. La elaboración es propia.

Análisis: Los resultados obtenidos muestran que el 54% de los artistas plásticos

consideran muy buena la acogida de sus trabajos por parte de los ciudadanos de Guayaquil y

el 30% lo considera excelente. Por ello, la fundación integra a sus actividades el transformar

una parte de los materiales reciclados obtenidos en artes visuales, demostrando una manera

diferente de reciclar y contribuir con el ambiente.

Opción de Respuesta Frecuencia Absoluta Frecuencia Relativa

Excelente 15 30%

Muy Bueno 27 54%

Bueno 4 8%

Regular 4 8%

Total 50 100%

55

Pregunta #2: ¿Qué tiempo le lleva a usted vender una de sus obras?

Tabla 14 Pregunta #2: ¿Qué tiempo le lleva a usted vender una de sus obras?

Nota: En la tabla se detallan los valores exactos de la pregunta 2, obtenidos en la encuesta realizada a 50 artistas

plásticos y visuales para la elaboración de la presente propuesta. La elaboración es propia.

Figura 12 Pregunta #2: ¿Qué tiempo le lleva a usted vender una de sus obras?

Nota: La encuesta realizada refleja que el 54% de los artistas plásticos demoran un lapso de 16 a 30 días en

comercializar los trabajos que realizan mientras que el 44% tarda más de un mes en comercializarlos. La

elaboración es propia.

Análisis: Se demuestra que con el 54% de los encuestados tardan aproximadamente

un mes en comercializar un arte visual, el 44% más de un mes y solo el 2% tarda menos de

2 semanas en conseguirlo. La fundación Manos al Ambiente busca una manera de disminuir

este lapso, difundiendo estos trabajos en una herramienta tecnológica para llegar a más

personas en la ciudad.


1 – 3 días 0 0%

4 – 7 días 0 0%

8 – 15 días 1 2%

16 - 30 días 27 54%

Más de 30 días 22 44%

Total 50 100%

56

Pregunta #3: ¿De qué manera lleva el registro de los procesos, elaboración y obras

terminadas que realiza?

Tabla 15 Pregunta #3: ¿De qué manera lleva el registro de los procesos, elaboración y obras terminadas que realiza?

Nota: Se muestran los valores absolutos y relativos correspondientes a la pregunta 3. La elaboración es propia.

Figura 13 Pregunta #3: ¿De qué manera lleva el registro de los procesos, elaboración y obras terminadas que realiza?

Nota: De los 50 encuestados se refleja que el 74% llevan sus registros de manera manual y el 18% usa

herramientas ofimáticas como Word o Excel, lo que puede provocar perdida de información al no tener un

respaldo de la información. La elaboración es propia.

Análisis: El 74% de los artistas encuestados llevan sus registros de manera manual

al no contar con un sistema informático para almacenar su información. Incluso un 2%,

toman fotos a su información para almacenar como respaldo.


Registros Manuales 37 74%

Herramientas de Microsoft

Office 9 18%

Sistema Informático 2 4%

Fotos y Apuntes 1 2%

Manuales, digitalizados 1 2%

Total 50 100%

57

Pregunta #4: ¿Qué tipo de mecanismos o vitrinas utiliza para visibilizar sus obras?

Tabla 16 Pregunta #4: ¿Qué tipo de mecanismos o vitrinas utiliza para visibilizar sus obras?

Nota: Se detalla la cantidad y porcentaje exactos de los mecanismos que utilizan los artistas para dar a conocer

sus artes. La elaboración es propia.

Figura 14 Pregunta #4: ¿Qué tipo de mecanismos o vitrinas utiliza para visibilizar sus obras?

Nota: Se muestra que el 76% de los encuestados utilizan las redes sociales como medio para difundir sus artes

visuales realizadas y el 52% lo hacen en salones o concursos artísticos. La elaboración es propia.

Análisis: Los resultados obtenidos demuestran que las redes sociales con un 76% es

el medio de comunicación más usado por los artistas para difundir sus trabajos. Esto es

gracias a la utilidad que brinda internet a las personas para dar a conocer cierta noticia o

producto, teniendo mayor alcance geográfico a comparación de realizarlo de manera

personal.


Revista 0 0%

Periódico 7 14%

Portal Web 6 12%

Redes Sociales 38 76%

Galerías Especializadas 9 18%

Galerías Virtuales 10 20%

Salones o Concursos

Artísticos 26 52%

Ninguno 4 8%

Galería 3 6%

Total 50 100%

58

Pregunta #5: Si existiera una aplicación web para exhibir y subastar las artes visuales

que realiza utilizando materiales reciclables ¿Estaría dispuesto a trasladar sus obras a esta

aplicación?

Tabla 17 Pregunta #5: Si existiera una aplicación web para exhibir y subastar las artes visuales que realiza utilizando materiales reciclables ¿Estaría dispuesto a trasladar sus obras a esta aplicación?

Nota: En la presente tabla se muestran los resultados correspondientes al proceso de tabulación de la pregunta

5 en base a los valores absolutos y relativos. La elaboración es propia.

Figura 15 Pregunta #5: Si existiera una aplicación web para exhibir y subastar las artes visuales que realiza utilizando

materiales reciclables ¿Estaría dispuesto a trasladar sus obras a esta aplicación?

Nota: De un total de 50 artistas encuestados, el 92% están de acuerdo en utilizar una aplicación web que les

facilite la exhibición y subastas de las artes visuales que realizan. La elaboración es propia.

Análisis: Los resultados demuestran que el 92% de los artistas trasladarían sus

trabajos a un medio digital el cual le permita aumentar las vistas de sus trabajos. Por ello, la

fundación busca una innovación tecnológica que permita realizar estas actividades.


Si 46 92%

No 1 6%

Tal vez 3 2%

Total 50 100%

59

Pregunta #6: ¿Está de acuerdo con que los usuarios que han donado materiales

reciclables puedan obtener un porcentaje de descuento para adquirir una obra?

Tabla 18 Pregunta #6: ¿Está de acuerdo con que los usuarios que han donado materiales reciclables puedan obtener un porcentaje de descuento para adquirir una obra?

Nota: Se muestra los resultados obtenidos para la pregunta 6 en la encuesta realizada a 50 artistas plásticos y

visuales. La elaboración es propia.

Figura 16 Pregunta #6: ¿Está de acuerdo con que los usuarios que han donado materiales reciclables puedan obtener un

porcentaje de descuento para adquirir una obra?

Nota: Los resultados obtenidos reflejan que el 74% de los artistas consideran que las personas que donen

materiales reciclados obtengan una recompensa del 5% para adquirir un arte visual elaborado para la fundación.

La elaboración es propia.

Análisis: El 74% de los artistas aprueban que las personas que donen materiales

reciclados sean gratificadas con el descuento del 5% en la adquisición de artes visuales. La

fundación otorga un porcentaje de remuneración a los donadores, estos se van acumulando y

podrán ser usados como descuento de hasta el 5% fomentando la donación de materiales y

facilitando la venta de las obras.


No 0 0%

Si, del 3% 1 2%

Si, del 5% 37 74%

Si, del 10% 10 20%

Si, del 15% 2 4%

Total 50 100%

60

Pregunta #7: ¿Considera que la aplicación web cuente con un chat, el cuál permita

la comunicación entre el usuario y usted de manera personal?

Tabla 19 Pregunta #7: ¿Considera que la aplicación web cuente con un chat, el cuál permita la comunicación entre el usuario y usted de manera personal?

Nota: En la tabla se observa la frecuencia absoluta y relativa correspondiente a la pregunta 7 en la encuesta

dirigida a los artistas que colaboran con la fundación Manos al Ambiente. La elaboración es propia.

Figura 17 Pregunta #7: ¿Considera que la aplicación web cuente con un chat, el cuál permita la comunicación entre el

usuario y usted de manera personal?

Nota: De un total de 50 artistas visuales encuestadas se observa que el 88% de los encuestados creen

conveniente el uso de un módulo de chat para comunicarse con las personas que desean adquirir un arte en

específico. La elaboración es propia.

Análisis: Los resultados obtenidos muestran que el 88% de los artistas están de

acuerdo que la aplicación web propuesta cuente con un chat que facilite la comunicación con

las personas para facilitar y coordinar la entrega de artes o responder consultas por parte de

los ciudadanos.


Si 44 88%

No 0 0%

Tal vez 6 12%

Total 5% 100%

61

Metodología de desarrollo del proyecto

Modelo del Prototipado

También conocido como modelo de desarrollo evolutivo (Gtz, Tapia, Herrera, &

Becerra, 2015), se inicia definiendo los objetivos que debe contar el software, después

identificando los requisitos y las áreas donde sea necesaria más definición; este método se

usa para brindar al usuario una vista preliminar de parte del software.

Es un proceso cíclico con una alta comunicación e interacción entre los clientes y los

prototipos generados (Gandarillas, 2017), en esta etapa no es necesario demostrar la

funcionalidad, pero debe aprobar la validación de la estructura del aplicativo, la adaptabilidad

a los diferentes dispositivos, y aspectos relacionados al ámbito visual y de diseño (formas,

colores, elementos multimediales y su calidad, tipografías, entre otros). Es decir, que el

“maquetado estructural” y la lógica de “edición multimedia” deben estar verificados y

aprobados en esta etapa.

Estructurado según Roger P. (Pressman, 2010) en 6 fases:

1. Comunicación: Se realiza una reunión con los integrantes para definir los

objetivos del software, además del uso de técnicas de investigación para levantar

la información necesaria.

2. Plan rápido: Con la información recolectada en la etapa anterior se analizará y

evaluará los requerimientos necesarios para el diseño del prototipo inicial.

3. Modelado, diseño rápido: Se diseña los aspectos generales que van a estar

visibles para los usuarios, como los diagramas e interfaces del software.

62

4. Construcción del prototipo: En esta etapa se empieza a realizar la codificación

del software para dar la estructura al aplicativo.

5. Desarrollo y retroalimentación: Se entrega el prototipo realizado a los

participantes para ser evaluado con el propósito de recibir una retroalimentación

y conseguir mejorar lo realizado. Todas las correcciones deben ser documentada

para posteriormente descartar los errores en el sistema.

6. Entrega del desarrollo final: Se procede a entregar el producto final con las

correcciones solicitadas y aceptadas por parte del cliente.

Figura 18 Etapas del modelo de prototipado

Nota: Se detalla las fases del modelo utilizado para el desarrollo de la propuesta, así como las actividades a

realizar en cada una de las etapas para conseguir el objetivo. La elaboración es propia.

63

¿Por qué escoger el Modelo del Prototipado?

Porque los modelos evolutivos como el Prototipado, generan rápido productos de

trabajo incremental o versiones funcionales del software (Pressman, 2010) estos modelos se

adoptan para aplicarse en el transcurso las actividades de la ingeniería de software, desde el

desarrollo del concepto hasta el mantenimiento del sistema a largo plazo.

1. Comunicación

Como primer paso se procede al levantamiento de información obtenidos mediante

el uso las técnicas de reunión y entrevista aplicadas a la Srta. Tatiana Salas Matute

representante de la fundación “Manos al Ambiente” y a los artistas que colaboran con la

fundación, principales usuarios en el manejo de las funciones dentro de la organización.

Gracias a la información recolectada en las técnicas mencionadas, se buscó una

solución tecnológica para sistematizar los procesos que se realizan. Elaborando una

aplicación web que agilice y mejore las necesidades dentro de la fundación.

Además, se detallan los requerimientos funcionales y no funcionales que debe tener

la propuesta para el uso efectivo de las actividades que realizan, dividiendo los

requerimientos por módulos dependiendo del rol de los usuarios.

64

Requerimientos

Tabla 20 Requerimientos funcionales del sistema

Nota: Se detalla los requerimientos funcionales que debe contar el sistema para el correcto funcionamiento y

aceptación de la aplicación web. La elaboración es propia.

Tabla 21 Requerimientos no funcionales del sistema

Nota: Se detalla los requerimientos funcionales que debe contar el sistema para el correcto funcionamiento y

aceptación de la aplicación web. La elaboración es propia.

Código Requerimientos Funcionales

RF1 Autenticación (Login)

RF2 Asignación de roles

Usuario Administrador

RF3 Publicar proyectos

RF4 Controlar materiales reciclables

RF5 Controlar artes visuales

RF6 Consultar reportes

Usuario Artista

RF7 Exponer y subastar artes visuales

Usuario Cliente

RF8 Donar materiales reciclables

RF9 Participar en subastas

RF10 Chat entre usuarios

Código Requerimientos No Funcionales

RNF1 Debe tener el logo de la fundación.

RNF2 Interfaz amigable

RNF3 Debe ser desarrollado con lenguaje de programación PHP y

JavaScript

RNF4 Debe utilizar los frameworks Laravel y Bootstrap

RNF5 Debe garantizar funcionalidad con el motor de base de datos

MySQL

65

2. Plan Rápido

Luego de conocer la situación actual de la fundación, se procede a la planificación

del proyecto gracias al análisis de los requerimientos dados para la elaboración del sistema

web para la donación de materiales reciclables, exposición y subastas de artes visuales.

Análisis de Requerimientos Funcionales

Se procede a analizar cada uno de los requerimientos funcionales obtenidos en la

etapa anterior, evaluando de acuerdo con el estándar ANSI, IEEE 830-1993.

Tabla 22 Especificación de requerimiento funcional #1

FMA Web

Especificación de Requerimientos Funcionales

Código Nombre Fecha Grado de Necesidad

RF1 Autenticación (Login) 27/08/2020 Esencial

Descripción El usuario debe ingresar al sistema mediante el uso de un nombre de

usuario y contraseña.

Entradas Fuente Salida Destino Restricción

Texto Base de

Datos

Inicio de

sesión

Base de

Datos

Se permite el acceso solo

a los usuarios registrados

en la base de datos y

aceptados por un

Administrador.

Proceso

Se ingresa el usuario y contraseña correspondiente, el sistema toma dicha

información y la compara con los datos registrados en la base de datos, en

caso de estar registrado se permite el acceso al sistema.

Efecto

Colateral

En caso de no coincidir la información en la base de datos, se restringirá

al usuario el acceso al sistema. Nota: Se describe el requerimiento funcional que permite a un usuario entrar a la aplicación web haciendo uso

de datos personales y confidenciales. La elaboración es propia.

66


FMA Web



RF2 Asignación de roles 27/08/2020 Esencial

Descripción El sistema debe reconocer al usuario y solo habilitará las opciones

permitidas dependiendo del rol que se le ha sido asignado.


Usuario,

Contraseña

Base de

Datos

Pantalla

principal de la

aplicación web

Base de

Datos

Se permite el acceso solo

a los módulos permitidos

para el rol asignado.

Proceso El sistema toma los datos del usuario y habilita los módulos

correspondientes de acuerdo con el rol registrado en la base de datos. Nota: Se detalla el proceso correspondiente a la asignación de rol de usuario que debe realizar la aplicación

para poder realizar las diversas actividades que se realizan en la fundación. La elaboración es propia.


FMA Web



RF3 Publicar proyectos 27/08/2020 Esencial

Descripción El Administrador puede publicar noticias sobre los proyectos y actividades

ambientales que realiza la fundación.


Textos,

Imágenes

Usuario

Administrador

Publicación

de proyectos

Aplicación

web

Se permite la

publicación solo a los

usuarios con el rol de

Administrador.

Proceso

Se ingresa los datos correspondientes de los proyectos ambientales y el

sistema se encarga de almacenar y publicar la información en la página

web. Nota: La publicación de estos proyectos y actividades ambientales serán visibles para todas las personas que

ingresen a la página principal de la fundación “Manos al Ambiente”. La elaboración es propia.

67


FMA Web



RF4 Controlar materiales

reciclables 27/08/2020 Esencial

Descripción El Administrador podrá ver y agregar materiales reciclables, así como

aprobar las donaciones recibidas por los usuarios Clientes.


Datos de la

Aplicación

Aplicación

Web

Donación de

Materiales

Usuario

Administrador

Esta función solo puede

ser realizada por los

usuarios con el rol de

Administrador

Proceso

El Administrador debe revisar y confirmar las donaciones realizadas por

los usuarios Cliente. El sistema automáticamente le asigna una

compensación por el material donado.

Efecto

Colateral En caso de ser negado la solicitud, la donación no procede.

Nota: La compensación asignada por el sistema a los usuarios Clientes dependerá del tipo y cantidad del

material donado y puede ser utilizada como descuento de hasta el 5% en la adquisición (compra/subasta) de un

Arte Visual. La elaboración es propia.


FMA Web



RF5 Controlar artes visuales 27/08/2020 Esencial

Descripción El Administrador podrá ver las artes visuales publicadas por los Artistas.


Datos de la

Aplicación

Aplicación

Web

Artes

Visuales

Usuario

Administrador

Los Artistas deben

publicar una obra.

Proceso El Administrador puede revisar las artes visuales realizadas por los

usuarios Artistas. Nota: El requerimiento 5 especifica el proceso para que los Administradores pueden revisar las artes visuales

en exhibición y subasta que están disponibles en la aplicación web. La elaboración es propia.

68


FMA Web



RF6 Consultar reportes 27/08/2020 Esencial

Descripción

La aplicación web debe emitir reportes para la visualización del

consolidado de materiales donados y artes subastadas en un periodo de

tiempo determinado.


Datos de la

Aplicación

Base de

Datos

Reporte de

Materiales

Donados o Artes

Visuales

Subastadas

Usuario

Administrador

Los reportes generados

pertenecen a los datos

ingresados por los

diferentes usuarios en el

sistema.

Proceso Se muestra el informe solicitado en el rango de fechas establecidos por el

usuario. Nota: Se detalla el requerimiento para que los usuarios Administradores pueden tener acceso a los reportes de

materiales reciclables o artes visuales comercializadas por parte de los usuarios de la aplicación. La elaboración

es propia.


FMA Web



RF7 Exponer y subastar artes

visuales 27/08/2020 Esencial

Descripción El sistema debe permitir a los Artistas subir las artes visuales realizadas y

poder escoger entre exponerla o subastarla.


Textos,

Imágenes

Usuario

Artista

Exposición o

Subasta de

Artes Visuales

Aplicación

Web

Se debe elegir entre

exponer o subastar la

obra.

Proceso

Se ingresa los detalles del arte visual y el tiempo que esté disponible en la

aplicación, posteriormente se publica la obra en el módulo de exposición

o subasta seleccionado por el Artista. Nota: El Artista puede publicar el arte visual para que los usuarios Clientes puedan participar en la puja o

compra de la obra. La elaboración es propia.

69


FMA Web



RF8 Donar materiales reciclables 27/08/2020 Esencial

Descripción La aplicación web deberá aceptar la donación de materiales reciclables por

parte de los usuarios Clientes.


Textos,

Imágenes

Usuario

Cliente

Solicitud de

Donación de

Materiales

Aplicación

Web

La información debe ser

aprobada por un

Administrador.

Proceso Se ingresan el tipo y cantidad de material que desean donar. El sistema

procede a notificar a los Administradores para su posterior aceptación.

Efecto

Colateral La donación puede ser rechazada por parte de un Administrador.

Nota: Los materiales donados pueden ser solicitados por los Artistas para la elaboración de artes visuales. La



FMA Web



RF1 Participar en subastas 27/08/2020 Esencial

Descripción Los Clientes deben poder participar en la subasta de un Arte Visual en

específico.


Datos de un

Arte Visual

en Subasta

Aplicación

Web

Subasta de un

Arte Visual

Usuario

Cliente

La subasta puede

realizarse en el lapso

establecido por el artista.

Proceso

Los artistas deben ingresar la cantidad de dinero para participar en la puja

de una obra. Al finalizar el lapso de subasta, la aplicación selecciona la

cantidad mayor y la asigna como ganador, posteriormente notifica vía

correo electrónico al usuario correspondiente.

Efecto

Colateral

No se puede participar en la subasta en caso de haber culminado el tiempo

establecido por el Artista. Nota: Se detalla los pasos que implica el requerimiento del módulo para participar en subastas de Artes Visuales

elaborados con materiales reciclados. La elaboración es propia.

70


FMA Web



RF10 Chat entre usuarios 27/08/2020 Esencial

Descripción Los Clientes podrán chat con los artistas para facilitar la cotización,

coordinación del pago y entrega del producto,


Texto Usuario

Cliente Chat

Usuario

Artista

Los usuarios deben estar

registrados.

Proceso La aplicación conecta a los Clientes para iniciar una conversación en

tiempo real con los Clientes. Nota: Se describe el requerimiento para permitir a los Clientes mantener una conversación con los Clientes con

el propósito de coordinar un proceso o solicitar información de un arte en particular. La elaboración es propia.

3. Modelado y Diseño Rápido

Diagramas UML

El lenguaje de modelado unificado (UML) es un lenguaje gráfico para visualizar,

especificar, construir y documentar los artefactos de un sistema intensivo en software. El

UML ofrece una forma estándar de escribir los planos de un sistema, incluidos elementos

conceptuales como procesos de negocio y funciones del sistema, así como cosas concretas

como declaraciones de lenguaje de programación, esquemas de bases de datos y componentes

de software reutilizables (Scott, 2000).

Aunque hay muchos esquemas de diagramas UML, en la propuesta se utilizaron los

diagramas de actores, de caso de uso y de actividades, con los cuales se busca modelar y

diseñar el prototipo de la aplicación web.

71

Diagrama de Actores

Figura 19 Diagrama de actores

Nota: Se muestra los roles de usuario con el que contara la aplicación web, cada uno con funciones diferentes

de acorde a su perfil. La elaboración es propia.

Los actores que intervienen en el aplicativo son:

Administrador: Este tendrá accesibilidad para subir información de las

actividades que realiza la fundación. La función de confirmar la creación de los

usuarios. La función de controlar la donación de materiales reciclados y artes

visuales publicadas.

Artistas: Perfil creado para los integrantes de la fundación que deseen

transformar materiales reciclados en obras visuales. Tendrá la opción de subir

obras realizadas además de elegir si publicar en exhibición o subasta.

Clientes: Perfil creado para los ciudadanos de Guayaquil. Tendrá las opciones de

donar materiales, visualizar y participar en la subasta de artes visuales. Además,

la posibilidad de contactarse con los usuarios para coordinar la cotización, entrega

y pago de las obras visuales.

72

Diagramas de Casos de Uso

Un caso de uso narra un suceso estilizado sobre cómo interactúa un usuario final (que

tiene cierto número de roles posibles) con el sistema en circunstancias específicas; la historia

puede ser un texto narrativo, un lineamiento de tareas o interacciones, una descripción basada

en un formato o una representación diagramática; sin importar su forma, un Caso de Uso

ilustra el software o sistema desde la perspectiva del usuario final (Pressman, 2010).

Figura 20 Caso de uso - Registro de artistas

Nota: Se presenta el proceso que realiza el usuario con rol de Administrador para confirmar y crear el registro

de un usuario dentro del sistema web, además de otorgar los privilegios de acuerdo al rol correspondiente. La


73

Figura 21 Caso de uso - Publicación de proyectos (Administrador)

Nota: Se detallan los pasos para que los usuarios Administradores puedan publicar en el sistema las

actividades, programas y proyectos que realiza la fundación Manos al Ambiente, haciendo que el sistema

la difunda como noticia en su página principal. La elaboración es propia.

74

Figura 22 Caso de uso - Publicación de obras (Artistas)

Nota: Se representa el proceso que deben realizar los usuarios Artistas para solicitar la publicación de un

arte visual en la aplicación web, contando con la opción para modificar una publicación y un módulo para

responder cotizaciones realizadas por los Clientes. La elaboración es propia.

75

Figura 23 Caso de uso – Donación de materiales reciclables (Cliente)

Nota: Se presenta la interacción entre los usuarios Clientes y Administradores con el sistema para poder realizar

la donación de un material reciclable. El usuario Cliente ingresa la información del material a donar, el

Administrador verifica y confirma la donación, posteriormente el sistema otorga una remuneración

dependiendo de la cantidad y tipo de material. La elaboración es propia.

76

Figura 24 Caso de uso – Subasta de artes visuales (Cliente)

Nota: Para subastar un arte visual los usuarios Clientes deben acceder al sistema y participar en la puja de un

arte en particular, cuando se agote el lapso puesto por el Artista, el sistema escoge el precio mayor y notifica

mediante correo electrónico al usuario ganador, en caso de haber donado materiales reciclables, podrá obtener

un descuento de hasta el 5%. La elaboración es propia.

77

Diagramas de Actividades

En esta sección se muestra las actividades de los módulos del sistema web, las cuales

son asignadas mediante el rol de usuario. Detalladas a continuación:

Rol Administrador

Figura 25 Diagrama de actividades - Administrador

Nota: Se detallan las actividades que pueden realizar el usuario Administrador para el correcto funcionamiento

de la aplicación web. La elaboración es propia.

78

Rol Artista

Figura 26 Diagrama de actividades - Artista

Nota: En la figura se muestran los procesos asignados a los usuarios con rol de Artista, donde pueden solicitar

la publicación de un arte visual y escoger si estará en exhibición o subasta. La elaboración es propia.

79

Rol Cliente

Figura 27 Diagrama de actividades - Cliente

Nota: Los usuarios Clientes podrán realizar dentro de la aplicación web, las actividades de donación de

materiales reciclables, ver las artes visuales expuesta en el sistema y participar en las subastas de las mismas.

La elaboración es propia.

80

4. Construcción del Prototipo

Con la definición y análisis de los requerimientos se procede a la elaboración del

prototipo de sistema web que brinde la realización de todos los procesos definidos como

objetivo. Se muestra la codificación, desarrollo e interfaces necesarias para crear la

aplicación web mediante el uso de las herramientas y lenguajes de programación planteados

en los capítulos anteriores.

API REST

Una de las ventajas de usar API REST es que se adapta en todo momento al tipo de

sintaxis o plataformas de trabajo, a continuación, se da un ejemplo sobre la estructura de un

api en la construcción de este prototipo.

Método para crear un usuario

Se utiliza la arquitectura MVC que propone la construcción de tres componentes

distintos que son el modelo, la vista y el controlador, es decir, por un lado, define

componentes para la representación de la información, y por otro lado para la interacción del

usuario.

a. Modelo

Es la representación de la información con la cual el sistema opera, por lo tanto,

gestiona todos los accesos a dicha información, tanto las consultas como actualizaciones,

implementando también los privilegios de acceso que se hayan descrito en las

especificaciones de la aplicación (lógica de negocio).

81

1. registrarUsuario(p_Id_Usuario, p_Id_Usuario_rm, p_Nombre, p_Apellido, p_Email,

p_Cedula, p_Sexo, p_Direccion, p_Telefono, p_FechaNac, p_Password, p_Id_rol, p_Url,

p_Id_imagen, p_Clave_temp, p_Estado_clave, p_Estado_user,p_Opcion ){

2. return new Promise((resolve,reject)=>{

3. mysqlCn.query('call SP_Procesa_Usuario(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)',

[p_Id_Usuario, p_Id_Usuario_rm, p_Nombre, p_Apellido, p_Email, p_Cedula, p_Sexo,

p_Direccion, p_Telefono, p_FechaNac, p_Password, p_Id_rol, p_Url, p_Id_imagen,

p_Clave_temp, p_Estado_clave, p_Estado_user,p_Opcion ], (error,resul)=>{

4. if(error){

5. console.log(error) ;

6. reject(error);

7. }

8. else{

9. resolve(resul);

10. }

11. })

12. });

13. }

b. Controlador

Responde a eventos (usualmente acciones del usuario) e invoca peticiones al 'modelo'

cuando se hace alguna solicitud sobre la información (por ejemplo, editar un documento o

un registro en una base de datos).

1. registrarUsuario(p_Id_Usuario, p_Id_Usuario_rm, p_Nombre, p_Apellido, p_Email,

p_Cedula, p_Sexo, p_Direccion, p_Telefono, p_FechaNac, p_Password, p_Id_rol, p_Url,

p_Id_imagen, p_Clave_temp, p_Estado_clave, p_Estado_user, p_Opcion){

2. return new Promise((resolve,reject)=>{

3. let claveEncriptada = utils.encryptPassword(p_Password);

4. claveEncriptada.then((data)=>{

5. let claveFinal = data;

82

6. let registrarUser = autenticacionModel.registrarUsuario(p_Id_Usuario,

______p_Id_Usuario_rm, p_Nombre, p_Apellido, p_Email, p_Cedula, p_Sexo,

______p_Direccion, p_Telefono, p_FechaNac, claveFinal, p_Id_rol, p_Url, p_Id_imagen,

______p_Clave_temp, p_Estado_clave, p_Estado_user, p_Opcion);

7. registrarUser.then((data)=>{

8. resolve(data);

9. }).catch((data)=>{

10. reject(data)

11. })

12. }).catch(()=>{

13. let registrarUser = autenticacionModel.registrarUsuario(p_Id_Usuario,

_______p_Id_Usuario_rm, p_Nombre, p_Apellido, p_Email, p_Cedula, p_Sexo,

p_Direccion, p_Telefono, p_FechaNac, p_Password, p_Id_rol, p_Url, p_Id_imagen,

p_Clave_temp, p_Estado_clave, p_Estado_user, p_Opcion);

14. registrarUser.then((data)=>{

15. resolve(data);


17. reject(data)

18. })

19. })

20. })

21. }

c. Vista

Presenta el modelo (información y lógica de negocio) en un formato adecuado para

interactuar (usualmente la interfaz de usuario), por tanto, requiere de dicho modelo la

información que debe representar como salida.

1. autenticacionRoute.post('/registrarUsuario',(req,res)=>{

2. let registrar = autenticacionController.registrarUsuario(req.body.p_Id_Usuario,

req.body.p_Id_Usuario_rm, req.body.p_Nombre, req.body.p_Apellido,

req.body.p_Email, req.body.p_Cedula, req.body.p_Sexo, req.body.p_Direccion,

83

req.body.p_Telefono, req.body.p_FechaNac, req.body.p_Password, req.body.p_Id_rol,

req.body.p_Url, req.body.p_Id_imagen, req.body.p_Clave_temp,

req.body.p_Estado_clave, req.body.p_Estado_user, req.body.p_Opcion);

3. registrar.then((data)=>{

4. return res.status(200).send(

5. ( { respuesta: data[0] } )

6. );


8. return res.status(200).send(

9. ( { respuesta: data[0] } )

9. );

10. })

11. });

Método de chat online

Las siguientes funciones permiten a las personas registradas en el sistema la

interacción en tiempo real con otros usuarios.

a. Enviar mensajes

Representa el envió de los datos hacia otro usuario en el sistema, haciendo uso de la

herramienta Pusher, APIs alojadas bidireccionales que son flexibles utilizadas para el manejo

de información en tiempo real

1. public function sendMessage(Request $request){

2. $from = session()->get('idUsuario');

3. $to = $request->receiver_id;

4. $message = $request->message;

5.

84

6. $data = new Message();

7. $data->from = $from;

8. $data->to = $to;

9. $data->message = $message;

10. $data->is_read = 0; // el mensaje no se va a leer al enviar el mensaje

11. $data->save();

12.

13. // pusher

14. $options = array(

15. 'cluster' => 'mt1',

16. 'useTLS' => true

17. );

18.

19. $pusher = new Pusher(

20. env('PUSHER_APP_KEY'),

21. env('PUSHER_APP_SECRET'),

22. env('PUSHER_APP_ID'),

23. $options

24. );

25.

26. // enviando desde y hacia el id del user al presionar enter

27. $data = ['from' => $from, 'to' => $to];

28. $pusher->trigger('my-channel', 'my-event', $data);

29. }

b. Recibir mensajes

La función permite realizar consultas en la base datos, actualizando el controlador

para notificar los mensajes que han sido recibidos, así como el usuario que lo envió.

85

1. public function getMessage($user_id) {

2. $my_id = session()->get('idUsuario');

3. // actualizará el contador de los mensajes no leidos

4. Message::where(['from' => $user_id, 'to' => $my_id])->update(['is_read' => 1]);

5. // obtenemos todos los mensajes seleccionados por el usuario

6. $messages = Message::where(function ($query) use ($user_id, $my_id) {

7. $query->where('from', $user_id)->where('to', $my_id);

8. })->oRwhere(function ($query) use ($user_id, $my_id) {

9. $query->where('from', $my_id)->where('to', $user_id);

10. })->get();

11. return view('modules.chat.message', ['messages' => $messages]);

12. }

86

5. Desarrollo y Retroalimentación

Se realizaron las pruebas necesarias para testear las funciones y el comportamiento

del software. El objetivo de esta tarea es detectar fallos o errores presentados en el sistema

para proceder a ser corregidos antes de ser entregado al cliente. Para lograrlo se han

desarrollado los casos de prueba unitarias que se muestran a continuación.

Inicio de sesión

En este proceso se realiza la autenticación de los usuarios de la aplicación web,

permitiendo el ingreso a los módulos correspondientes, brindando seguridad a los procesos

y datos que realizan dentro de la fundación.

Tabla 32 Caso de prueba de inicio de sesión

Nota: Se describe los detalles del caso de prueba correspondiente al inicio de sesión para ingresar al sistema,

los resultados no reflejan novedad en el ingreso La elaboración es propia.

Caso de Prueba Inicio de sesión

Descripción Autenticación de un usuario registrado en el sistema

Condición Se debe ingresar un nombre de usuario y contraseña

valido

Entrada

Ingresar al sistema web

Llenar campos requeridos

Dar click en el botón ingresar

El sistema muestra los módulos correspondientes al

rol de usuario

Para cerrar sesión se debe dar click en botón ubicado

en la parte superior derecha

Resultado Esperado Acceso al sistema sin novedades

Resultado Obtenido

El sistema logro autenticar al usuario y se inició

sesión

En el caso de ingresar datos incorrectos el sistema

notifica mediante un mensaje

Acción Correctiva Ninguna

Resultado de Prueba Exitosa

87

Figura 28 Pantalla de inicio de sesión del sistema

Ingrese el correo electrónico

Ingrese la clave

Nota: Se muestra la pantalla de inicio de sesión del sistema, evidenciando los campos Correo y Password que

debe ingresar para entrar a los módulos respectivos. La elaboración es propia.

Agregar materiales reciclables

Permite a los Administradores visualizar las solicitudes de los clientes que desean

donar materiales a la fundación. Este verifica que estén correctos los datos del material de

acorde a las políticas de la organización.

Tabla 33 Caso de prueba del proceso de control de materiales reciclables donados

Nota: Se describe los detalles del caso de prueba para agregar materiales reciclables que acepta la fundación

por parte de los usuarios clientes. La elaboración es propia.

Caso de Prueba Agregar materiales reciclables

Descripción Agregar o modificar materiales reciclables que los

clientes pueden donar a la fundación

Condición Se debe verificar los datos del material, así como su

peso e imagen.

Entrada

Seleccionar el módulo de Material

Digitar los datos del material

Agregar o eliminar un material

Resultado Esperado Incrementar un material en la lista de desechos

recibidos por la fundación.

Resultado Obtenido El sistema permitió agregar un material sin

novedades.



88

Figura 29 Pantalla para agregar materiales reciclables

Nombre del material reciclable

Medida de peso que se debe realizar la donación

Precio del material por medida de peso

Estado del material en el sistema

Seleccionar una imagen de referencia del tipo de material

Nota: Se presenta la herramienta para que los Administradores puedan confirmar las solicitudes de donación

de materiales por arte de los Clientes. La elaboración es propia.

Publicación de Artes Visuales

Es una sección destinado a los artistas el cual le permita poner en exhibición o

subastas las artes visuales creadas en base a materiales plásticos. Brindando a los clientes la

oportunidad de obtener una obra en particular,

Tabla 34 Caso de prueba del proceso de publicar un arte

Nota: Se describe los detalles del caso de prueba correspondiente a la publicación de un arte visual por parte

del usuario con rol Artista. La elaboración es propia.

Caso de Prueba Inicio de sesión

Descripción Publicación de un arte visual para la exhibición o subasta.

Condición Se debe ingresar los datos del arte además de una imagen de esta.

Entrada

Seleccionar el módulo de Post

Ingresar datos de la obra

Subir una imagen del arte

Seleccionar entre exhibir y subastar

Aceptar

Resultado Esperado Publicación del arte visual

Resultado Obtenido El sistema permitió realizar la publicación de la obra sin

novedades.



89

Figura 30 Pantalla de publicación de artes visuales

Nombre de la obra de arte

Tamaño de altura de la

escultura

Fecha de publicación de la

obra en el sistema

Precio inicial del arte visual

Material con el que se elaboró

la escultura

Tipo de arte (escultura /

pintura)

Estado con que se inicia el

arte

Breve descripción sobre el

arte publicado

Tipo de publicación

(exhibición o subasta)

Tamaño de largo de la

escultura

Fecha de finalización de la

obra en el sistema

Seleccionar una foto del arte

visual

Nota: Se muestra la pantalla de publicación de artes visuales por parte del Artista, este proceso permitirá a los

usuarios Clientes el poder participar en la comercialización de una obra en particular. La elaboración es propia.

90

6. Entrega del Desarrollo Final

Las interfaces están divididas por usuarios y las acciones que pueden realizar cada

uno de ellos en el sistema.

Administrador

Módulo de control de usuarios Figura 31 Control de usuarios

Exportar consolidado de

usuarios en pdfAgregar nuevos usuarios

Habilitar o

deshabilitar

cuenta de

usuario

Nota: El usuario Administrador podrá tener control para crear nuevos usuarios independientemente del rol, así

como asignarle los privilegios que tendrá. La elaboración es propia.

Módulo de control de artes visuales

Figura 32 Control de artes visuales

Publicar proyectos

ambientales

Aprobar o desaprobar

publicación de artes

visuales

Nota: Se muestra el módulo donde los Administradores pueden llevar un control de las artes visuales que están

en el sistema, en caso de ser necesario podrá modificar alguna obra en particular. La elaboración es propia.

91

Módulo de control de donaciones

Figura 33 Control de materiales donados

Modificar estado de la

donación del material

Rechazar donacion de

material reciclable

Buscar una donación

en particular

Nota: el usuario Administrador pude agregar los tipos de materiales reciclables que los Clientes puedan donar

a la fundación. Además de las condiciones y criterios que deben cumplir para ser aceptados. La elaboración es

propia.

Artistas

Módulo para publicar artes visuales

Figura 34 Publicación de artes visuales



escultura


obra en el sistema



la escultura


pintura)


arte


arte publicado




escultura


obra en el sistema


visual

Nota: Se visualiza los parámetros que los Artistas deben cumplir para que sus obras visuales puedan ser

publicadas para exhibición o subasta en la aplicación web. La elaboración es propia.

92

Módulo de visualización de obras

Figura 35 Visualización de obras realizadas

Participar en subasta del

arte visual

Buscar una obra en particular

Nota: Los artistas tendrán acceso a un módulo donde puedan consultar el historial de los trabajos que han

realizado y están en el sistema, así como la opción de modificar y/o eliminar alguna obra en especifica dentro

de su perfil. La elaboración es propia.

Cliente

Módulo para donar materiales reciclables

Figura 36 Donación de materiales reciclables

Seleccionar material a

donar

Seleccionar lugar de

entrega de la donación

Cantidad de material

por medida de peso

Compensación que otorga la

fundación por la donación de

materiales. Utilizado como

descuento en la adquisición

de un arte visual

Medida de peso que se debe

realizar la donación

Precio del material por

medida de peso

Nota: Se muestra el módulo de donación de materiales reciclables, los clientes deben ingresar los datos del

material en específico y posteriormente el sistema pondrá la solicitud para que un administrador verifique la

información y acepte la donación. La elaboración es propia.

93

Módulo de subasta de artes visuales

Figura 37 Subasta de artes visuales

Colocar valor a ofertar en

la subastaÚltimo valor ofertado por

el arte visual

Valor inicial de la subasta

Nota: Se muestra el módulo donde los clientes pueden participar en la puja de artes visuales expuestas en el

sistema. La elaboración es propia.

Módulo de chat

Figura 38 Módulo de chat

Usuarios registrados

en el sistema

Nota: Se evidencia el módulo de chat que permite la comunicación privada entre los usuarios del sistema para

agilizar procesos, citas, resolver incertidumbre, coordinar el pago y entrega de artes visuales, entre otros. La


94

Entregables del proyecto

En el presente apartado se describe los documentos que se deben entregar al culminar

el desarrollo de la propuesta, que sirve como guía para mejorar la comprensión y

funcionalidad de la aplicación web.

Manual de Usuario

El manual tiene como propósito servir de guía a los usuarios para el correcto y

eficiente uso del sistema. Cuenta con pantallas de cada módulo de la aplicación web, que

incluyen las instrucciones de los procesos y restricciones correspondientes. Como se puede

evidenciar en el Anexo 7.

Manual Técnico

Este entregable contiene las especificaciones técnicas que se utilizaron para la

construcción de la aplicación web. Se detallan los procesos y funciones más relevantes en el

desarrollo, así como el diagrama de base de datos, detallado en el Anexo 8.

Código Fuente del Desarrollo

Se entrega el código fuente utilizado para la elaboración de la aplicación web para la

donación de materiales reciclables, exposición y subasta de artes visuales para la fundación

Manos al Ambiente.

Criterios de validación de la propuesta

En este apartado se describe la funcionalidad de la aplicación web mediante el uso

del acta de trabajo para la aceptación de requerimientos por parte de la representante de la

95

fundación, la encuesta realizada a los artistas colaboradores de la fundación como evidencia

de la aceptación de la propuesta y la técnica juicio de expertos realizada gracias a su alto

conocimiento y experiencia en manejos de sistemas informáticos, apoyando su criterio para

evaluar la calidad del software.

Figura 39 Aceptación de la propuesta por parte de los artistas

Nota: Se demuestra con 92% de votos a los artistas coladores, la aceptación del desarrollo de la aplicación web

para sistematizar los procesos realizados dentro de la fundación Manos al Ambiente. La elaboración es propia.

Tabla 35 Datos de expertos

Nota: La tabla brinda la información de los expertos que realizaron la evaluación, mostrando su conocimiento

gracias a la experiencia obtenida en sus cargos en sus empresas u organizaciones. La elaboración es propia.

N. Nombre Titulo Académicos Cargo Lugar de

Trabajo

1 Tania Jeesenia

Peralta Guaraca

Máster en Gerencia y

Docencia en Educación

Superior

Docente Universidad de

Guayaquil

2 Diego Vinicio

Robles Vásquez

Mgs. Sistemas

Información

Coordinador

IT

Chubb Seguros

Ecuador

3 Luigi Javier

Holguín Anzules

Ingeniero en

Telecomunicaciones

Jefe

Departamento

de Sistemas

Gobierno

Autónomo

Descentralizado

del cantón Playas

96

Resultado

Para identificar los procesos se logró obtener 2 reuniones y varias consultas internas

mediante mensajería con la representante de la fundación Manos al Ambiente y 1 encuesta

dirigida a los artistas colaboradores, donde se evidenció con un 92% de votos, la necesidad

de una aplicación web para sistematizar los procesos que se realizan en la institución.

Se desarrolló 9 módulos con interfaz amigable, aplicando el frameword laravel-

bootstrap en las capas de Front-End y Back-End para un diseño intuitivo por parte de los

usuarios registrados en el sistema.

Se ha evidenciado que existe la aceptación por parte de los expertos con el uso de

subastas online como estrategia para comercializar artes visuales elaboradas con 100%

materiales reciclables, garantizando a los posibles compradores que se realice una correcta

comparación de valores ofertados, para los cuales son anunciados los ganadores en un límite

de tiempo previamente detallado en el sitio web.

Se permitió desarrollar un módulo de chat gracias a que el 88% de los artistas vieron

necesaria la interacción con los clientes que desean adquirir las artes visuales, a través de las

subastas realizadas en el sitio web o de algún producto en particular expuesto en el mismo.

Además de obtener todos los datos necesarios para la cotización, coordinación del pago y

entrega del producto.

97

Mediante el módulo de reportes se consiguió generar un consolidado en formato pdf

de los materiales donados, artes visuales expuestas y usuarios registrados en la aplicación

web. La visualización de este archivo es clara y ordenada, de tal forma que permite al

administrador, analizar la mayor cantidad de material reciclado recibido.

98

CAPÍTULO IV

CONCLUSIONES Y RECOMENDACIONES

Criterios de aceptación del producto o servicio

A continuación, se presenta los criterios que se consideran para evaluar los

requerimientos establecidos por parte de la representante de la fundación, la srta. Tatiana

Salas Matute, garantizando el correcto funcionamiento del sistema en base a los objetivos

planteados.

En el presente cuadro se detalla los resultados obtenidos durante la presentación de

la aplicación web donde se demuestra que cumple con los requerimientos solicitados, el cual

se adjunta en el Anexo 6.

Tabla 36 Aceptación de funcionalidad del sistema

Requerimiento Criterio de Aceptación Cumple

Si No

Interfaz de usuario La interfaz de la aplicación web es amigable para los

usuarios. X

Inicio de sesión Los usuarios pueden autenticarse y visualizar los módulos

correspondientes a su rol. X

Control de usuarios Revisar la información de los usuarios registrados en el

sistema y confirmar su rol. X

Asignación de menú Habilitar o deshabilitar los diversos módulos a los roles de

usuarios. X

Difundir proyectos Publicar en la aplicación los proyectos y actividades

ambientales en el sistema. X

Control de artes

visuales

Verificar y aceptar los datos de las artes visuales

publicadas por los artistas para su exposición o subasta. X

99

Nota: Se describe los criterios que debe cumplir la aplicación web para la aceptación del prototipo por parte de

la fundación. La elaboración es propia.

La realización del cuestionario dio como resultado el cumplimiento de todos los

requerimientos establecidos por el cliente para la sistematización de los procesos que

mantiene la Fundación Manos al Ambiente tal como se detalla en la Tabla 36, por lo cual la

aplicación web es aceptada satisfactoriamente por el cliente.

Registro de

materiales

reciclables

Agregar registros a la lista de materiales reciclables que

acepta la fundación. X

Control de

donaciones

Aceptar o rechazar las solicitudes de donaciones de

materiales por parte del cliente. X

Consultar reportes Crear consolidado de materiales donados, artes visuales

expuestas y usuarios registrados en la aplicación web.

Publicación de artes

visuales

Solicitar a los administradores la publicación de artes

visuales para su exhibición o subasta. X

Consultar artes

visuales

Visualizar las obras que han sido publicadas por los

artistas. X

Participar en

subastas de artes

Competir por la puja de un arte visual expuesto en el

sistema. X

Donación de

materiales

reciclables

Permitir la donación de residuos reciclables a la

fundación. X

Chat entre clientes y

artistas

Facilitar la comunicación mediante un chat para coordinar

el pago y entrega. X

100

Tabla 37 Resultados de juicio de experto

Nota: Se detallan los resultados obtenidos de los profesionales que evaluaron la aplicación web para la

fundación Manos al Ambiente, demostrando la calidad de esta. La elaboración es propia.

Las evaluaciones realizadas por los expertos mencionados en la Tabla 35,

evidenciaron la calidad de la aplicación web, al cumplir satisfactoriamente los criterios

establecidos para su revisión.

Indicador Criterio Experto

1

Experto

2

Experto

3 Promedio Evaluación

Aplicabilidad El instrumento es de

fácil aplicación. 90 100 95 95 Excelente

Organización Hay una organización

lógica. 100 100 95 98,33 Excelente

Seguridad

Cuenta con un inicio

de sesión que valide el

acceso de los

usuarios.

95 100 100 98,33 Excelente

Adecuación

Funcional

Los módulos realizan

los procesos

solicitados.

Donación de

materiales reciclables,

exposición y subasta

de artes visuales.

100 95 95 96,66 Excelente

Portabilidad

Permite el acceso y

adaptación de la

aplicación desde

cualquier navegador

web.

100 100 95 98,33 Excelente

Escalabilidad

Capacidad para ser

modificado

eficientemente debido

a necesidades

evolutivas.

100 100 95 98,33 Excelente

101

Conclusiones

Los datos obtenidos en las reuniones y encuestas permitieron que la identificación

de los procesos sea todo un éxito generando una correcta planificación de las

actividades y tareas dejando claro los módulos que tendría cada usuario.

El uso de los framework Laravel y Bootstrap permitió que el diseño de los

módulos de cada usuario cuente con una interfaz amigable e intuitiva logrando

que cada usuario realice los diversos procesos y actividades de manera fácil y

organizada. Además, gracias al uso del gestor de base de datos de MySQL se

logró centralizar la información para evitar pérdida de información.

Mediante el desarrollo y validación del módulo de subasta se logró verificar el

correcto funcionamiento demostrando que los clientes participan en tiempo real

en la puja ofertando valores en subastas activas además se obtuvo la aprobación

de los artistas colaboradores de la fundación demostrando que con el uso del

aplicativo web se consigue disminuir tiempo en comercializar una obra visual.

El módulo chat online demostró ser necesario y beneficioso para todos los

usuarios logrando generar una comunicación directa concibiendo una experiencia

personalizada dando paso a un mejor servicio reduciendo costo y tiempo al

momento de cotizar, coordinar y determinar el modo de pago de artes visuales en

exhibición o subasta, además, la planificación de futuras actividades.

La generación de reportes ha sido beneficiosa para el usuario administrador

permitiendo analizar datos registrados como la cantidad de materiales recibidos

por donación, número de artes visuales en subasta o exhibición, además de

usuarios registrados en la aplicación. Estos datos permitirán a los administradores

102

la toma de decisiones para la implementación de nuevas estrategias publicitarias

que permitan aumentar la colaboración de usuarios y empresas a fines con la

concientización del cuidado del medio ambiente además de la implementación de

nuevos proyectos ambientales.

103

Recomendaciones

Realizar mantenimientos correspondientes y a medida que avance el tiempo ir

actualizando el sistema con nuevas herramientas para mejorar u optimizar los

procesos que se efectúan y la aplicación web no quede obsoleta.

Para mejorar el sistema actual se puede desarrollar un módulo de ventas, que

permita a los miembros de la fundación realizar una facturación electrónica a los

clientes que realizan las compras de artes visuales elaboradas a base de materiales

reciclables, con el propósito de tener un sistema extensible para satisfacer

necesidades a futuro.

Para mejorar el módulo de exhibición de artes se puede migrar de los sistemas de

imágenes bidimensionales (2D) a los sistemas tridimensionales (3D), y así poder

apreciar las obras expuestas con la finalidad de que los clientes mejoren sus

expectativas del arte visual que desean adquirir.

104

REFERENCIAS BIBLIOGRÁFICAS

Arias, M. (2017). Aprende Programación Web con PHP y MySQL: 2a Edición. Retrieved

from

https://books.google.com/books?hl=es&lr=&id=mP00DgAAQBAJ&oi=fnd&pg=PA1

3&dq=php&ots=DLRkrE8LmZ&sig=1hP0yH73-31bHYd3y-DD3JQfQ8Q

Bermeo Paucar, J., Rea Sánchez, V., López Bermúdez, R., & Pico Yépez, M. (2017). El

reciclaje la industria del futuro en Ecuador. Ciencia En Su PC, (3), 29–36.

Bravo, E. (2017). Desarrollo de la conciencia ambiental a través del sistema de las “cinco

erres” en los estudiantes de la Institución Educativa “Maravillas” del Distrito De

Monzón, 2012. 249.

Call, J. D., & Peacock, T. D. (2017). Application Programming Interface Wall. 2(12).

Cao, H., Falleri, J.-R., Blanc, X., & Zhang, L. (2016). JSON Patch for Turning a Pull REST

API into a Push. International Conference on Service-Oriented Computing, 9936, 157–

170. https://doi.org/10.1007/978-3-319-46295-0

Clow, M. (2018). Angular 5 Projects. In Angular 5 Projects. https://doi.org/10.1007/978-1-

4842-3279-8

Creatividad, S. de A. y. (2014). Ministerio De Cultura Y Patrimonio Del Ecuador. 1–117.

Retrieved from http://contenidos.culturaypatrimonio.gob.ec/wp-

content/uploads/SENPLADES-Ecuador-Territorio-de-las-

Artes.pdf?fbclid=IwAR1PC3WpyD6dVpMpU3B3ZDl579MUpKvakFTrd7kpI1wB50

vM0Fmh4nwlUA8

Cuvi Guaman, A. L. (2017). Los residuos orgánicos y su relación con las cinco “R”

ecológicas en los estudiantes de octavo año de educación general básica de la Unidad

105

Educativa “15 de Agosto” comunidad de Gatazo Chico, periodo 2016-2017.

Universidad Nacional de Chimborazo.

da Fonseca, L. M. C. M. (2015). ISO 14001:2015: An improved tool for sustainability.

Journal of Industrial Engineering and Management, 8(1), 35–50.

https://doi.org/10.3926/jiem.1298

Echeverria, M. (2019, March 5). La crisis de contaminación por plásticos: informe de WWF

| Press Releases | WWF. Retrieved February 15, 2020, from

https://www.worldwildlife.org/press-releases/la-crisis-de-contaminacion-por-plasticos-

informe-de-wwf

Fibras Nacionales. (n.d.). Fibras Nacionales S.A. Retrieved December 14, 2019, from

https://www.fibrasnacionales.com.ec/quienes-somos.html

Frisbie, M. (2019). Professional JavaScript® for Web Developers. In Professional

JavaScript® for Web Developers. https://doi.org/10.1002/9781119366560

Gil Vera, V. D., Gomes Da Silva, C. R., Gil Vera, J. C., & Teutsch, J. (2018). Frameworks

para el desarrollo de prototipos WEB: Un caso de aplicación. Lámpsakos, (20), 40–53.

https://doi.org/10.21501/21454086.2065

Graham Reciclaje. (n.d.). Graham Reciclaje. Retrieved December 14, 2019, from

https://www.grahamreciclaje.com/

Gtz, J., Tapia, A., Herrera, A., & Becerra, O. (2015). Metodologia prototipado. Retrieved

January 12, 2020, from https://es.slideshare.net/ALDEN_HERRE/metodologia-

prototipado

Guerrero Bejarano, M. A. (2016). La investigación cualitativa. INNOVA Research Journal,

1(2), 1–9. https://doi.org/10.33890/innova.v1.n2.2016.7

Gutiérrez Sánchez, J. L. (2016). Análisis, diseño y desarrollo de las aplicaciones de manejo

106

de tiquetes y gestión documental para la empresa Cootransgar y la E.S.E de Guadalupe

respectivamente, durante los cuatro meses del desarrollo de las prácticas en la empresa

de Mayesoft (Universidad Nacional Abierta y a Distancia – UNAD). Retrieved from

http://sig.unad.edu.co.http//calidad.unad.edu.co.

Hahn, E. M. (2016). Express in Action. Writing, building, and testing Node.js applications.

Hota, A. K., & Prabhu, D. M. (2014). NODE.JS: Lightweight, Event driven I/O web

development As. Informatics, 22(3), 30–31. Retrieved from

https://informatics.nic.in/uploads/pdfs/26b47a73_node.js.pdf

INEC. (2016). Información Ambiental en Hogares Junio 2016. 1–39. Retrieved from

http://www.ecuadorencifras.gob.ec/documentos/web-

inec/Encuestas_Ambientales/Hogares/Hogares_2016/Documento tecnico.pdf

Joseph J. Skaja, X., & Evan L. Schwartz, T. (2015). Articles prepared using recycled

materials and methods of preparation thereof.

Khalid, S., Khusro, S., & Ullah, I. (2018). Crawling ajax-based web applications: Evolution

and state-of-the-art. Malaysian Journal of Computer Science, 31(1), 35–47.

https://doi.org/10.22452/mjcs.vol31no1.3

Kromann, F. M. (2018). Beginning PHP and MySQL. In Beginning PHP and MySQL.

https://doi.org/10.1007/978-1-4302-6044-8

Marrero Cabrera, F. Y. (2019). Aplicación web para la comunicación audiovisual en entornos

educativos Aplicación web para la comunicación audiovisual en entornos educativos.

Universidad de las Palmas de Gran Canaria.

Martínez Campos, C. (2015). El Arte Reciclado de David Kemp: Assemblages y esculturas

comprometidos con su Entorno. Universidad de Málaga, 221–236.

mills, chris david. (2017). JavaScript | MDN.

107

Molina Ríos, J. R., Zea Ordóñez, M. P., Contento Segarra, M. J., & García Zerda, F. G.

(2018). Comparación De Metodologías En Aplicaciones Web. 3C Tecnología_Glosas

de Innovación Aplicadas a La Pyme, 7(1), 1–19.

https://doi.org/10.17993/3ctecno.2018.v7n1e25.1-19

Niaounakis, M. (2013). Biopolymers: Reuse, Recycling, and Disposal. In Biopolymers:

Reuse, Recycling, and Disposal. https://doi.org/10.1016/C2012-0-02583-5

Ovando Ortega, D. J. (2019). Bootstrap y Laravel, herramientas para el desarrollo de

aplicaciones web. Universidad Politécnica de Sinaloa.

Palacios Gordillo, D. P. (2017). Reciclaje y tratamiento de los residuos sólidos urbanos-

industriales en Ecuador. In Universidad de las Américas (Vol. 102).

https://doi.org/10.1002/ejsp.2570

Pressman, R. S. (2010). Ingeniería del Software. Un enfoque práctico.

Quiñonez Murillo, A. R. (2019). Análisis de la contaminación ambiental en materia de

residuos sólidos por parte de los hogares de la ciudad de Guayaquil y su impacto en la

sostenibilidad ambiental , período 2016-2017. Universidad de Guayaquil.

Reciclar Ecuador. (n.d.). Reciclar Ecuador. Retrieved December 14, 2019, from

http://reciclar.com.ec/servicios-reciclaje-compra-venta-clasificacion-de-papel-carton-

plastico-chatarra-vidrio-medio-ambiente-ecuador.php

Recynter. (n.d.). Recynter. Retrieved December 14, 2019, from https://recynter.com.ec/

Régimen Legal de Bogota D.C. (2002). Decreto 1713 de 2002 Nivel Nacional. Retrieved

December 18, 2019, from Diario Oficial 44893 website:

https://www.alcaldiabogota.gov.co/sisjur/normas/Norma1.jsp?i=5542

Ritchie, P. (2016). Practical Microsoft Visual Studio 2015. Practical Microsoft Visual Studio

2015, 1–25. https://doi.org/10.1007/978-1-4842-2313-0

108

Ron Gonen. (2019). Methods and system for managing recycling of recyclable material (Vol.

345).

Salvador Mosquera, G. A. (2014). Movimientos y organizaciones ambientales en el Ecuador

y su praxis espacial.

Saunier, R. (2014). Getting Started with Laravel 4. Retrieved from

https://www.packtpub.com/web-development/getting-started-laravel-4

Scott, T. (2000). UML tutorial. Journal of Computing Sciences in Colleges, 16(1), 249.

Solíz Torre, M. F. (2015). Ecología política y geografía crítica de la basura en el Ecuador.

Letras Verdes. Revista Latinoamericana de Estudios Socioambientales, 17, 4–28.

https://doi.org/10.17141/letrasverdes.17.2015.1259

Tang, L. (2019). Building websites with laravel and vuejs.

Traverso, H. E., Prato, L. B., Villoria, L. N., Gómez-Rodríguez, G. A., Priegue, M. C.,

Caivano, R., & Fissore, M. L. (2013). Herramientas de la Web 2.0 aplicadas a la

educación. VIII Congreso de Tecnología En Educación y Educación En Tecnología, 8.

Retrieved from http://sedici.unlp.edu.ar/handle/10915/27532

Velankar, S., & Mane, D. (2017). Comparative Analysis of Bootstrap and UIkit framework.

International Research Journal of Engineering and Technology(IRJET), 4(6), 4–7.

Retrieved from https://irjet.net/archives/V4/i6/IRJET-V4I6495.pdf

Voutilainen, J. (2017). Evaluation of Front-end JavaScript Frameworks for Master Data

Management Application Development. Metropolia University of Applied Sciences,

(December), 4–6. Retrieved from

https://www.theseus.fi/bitstream/handle/10024/138668/Voutilainen_Jaakko.pdf?seque

nce=1

Yandrapalli, B. T., Jones, J., & Purkayastha, S. (2019). Development and Implementation of

109

a Dashboard for Diabetes Care Management in OpenMRS. 1–8. Retrieved from

http://arxiv.org/abs/1910.11437

Yates, A., Beal, K., Keenan, S., McLaren, W., Pignatelli, M., Ritchie, G. R. S., … Flicek, P.

(2015). The Ensembl REST API: Ensembl Data for Any Language. Bioinformatics,

31(1), 143–145. https://doi.org/10.1093/bioinformatics/btu613

Zabala Celi, J. L. (2018). La industria del reciclaje en la ciudad de Quito , propuesta de

modelo de negocio para la industria de reciclaje de plástico PET. Universidad Andina

Simón Bolívar, 1–89.

110

ANEXOS

Anexo 1. Acta de Requerimiento.

111

Anexo 2. Diagrama de Base de Datos.

112

Anexo 3. Fundamentación Legal.

El proyecto se elaboró de acuerdo con las leyes vigentes que rigen en Ecuador

mencionadas en el siguiente cuadro y detalladas posteriormente.

CÓDIGO ORGÁNICO INTEGRAL PENAL (COIP)

Título IV. Infracciones en Particular

Capítulo tercero. Delitos contra los Derechos del Buen Vivir

Sección tercera. Delitos contra la seguridad de los activos de los sistemas de

información y comunicación

Art. 234.- Acceso no consentido a un sistema informático, telemático o de

telecomunicaciones.- La persona que sin autorización acceda en todo o en parte a un sistema

informático o sistema telemático o de telecomunicaciones o se mantenga dentro del mismo

en contra de la voluntad de quien tenga el legítimo derecho, para explotar ilegítimamente el

acceso logrado, modificar un portal web, desviar o re direccionar de tráfico de datos o voz u

ofrecer servicios que estos sistemas proveen a terceros, sin pagarlos a los proveedores de

servicios legítimos, será sancionada con la pena privativa de la libertad de tres a cinco años.

Leyes Artículos

Código Orgánico Integral Penal (COIP) Art. 234

Ley Orgánica de Educación Superior (LOES) Art. 8, Art. 114

Constitución de La República del Ecuador Art. 14, Art. 322, Art. 350, Art. 395

Código Orgánico de la Economía Social de los

Conocimientos, Creatividad e Innovación Art. 142, Art. 151

113

LEY ORGÁNICA DE EDUCACIÓN SUPERIOR (LOES)

Título I Ámbito, Objeto, Fines y Principios del Sistema de Educación Superior

Capítulo 1 Ámbito y Objeto

Art. 8.- Fines de la Educación Superior. - Literal f, Fomentar y ejecutar programas

de investigación de carácter científico, tecnológico y pedagógico que coadyuven al

mejoramiento y protección del ambiente y promuevan el desarrollo sustentable nacional en

armonía con los derechos de la naturaleza constitucionalmente reconocidos, priorizando el

bienestar animal (Asamblea Nacional del Ecuador, 2010).

Título VII. Integralidad

Capítulo 2. De la Tipología de Instituciones, y Régimen Académico

Sección Tercera. Del Funcionamiento de las Instituciones de Educación Superior

Art. 144.- Trabajos de Titulación en formato digital. - Todas las instituciones de

educación superior estarán obligadas a entregar los trabajos de titulación que se elaboren para

la obtención de títulos académicos de grado y posgrado en formato digital para ser integradas

al Sistema Nacional de Información de la Educación Superior del Ecuador para su difusión

pública respetando los derechos de autor.

CONSTITUCIÓN DE LA REPÚBLICA DEL ECUADOR

Título II. Derechos

Capítulo Segundo. Derechos del buen vivir

Sección Segunda. Ambiente sano

114

Art. 14.- Se reconoce el derecho de la población a vivir en un ambiente sano y

ecológicamente equilibrado, que garantice la sostenibilidad y el buen vivir, sumak kawsay

(Asamblea Constituyente del Ecuador, 2008). ´

Título VI. Régimen de Desarrollo

Capítulo Sexto. Trabajo y producción

Sección Segunda. Tipos de propiedad

Art. 322.- Se reconoce la propiedad intelectual de acuerdo con las condiciones que

señale la ley. Se prohíbe toda forma de apropiación de conocimientos colectivos, en el ámbito

de las ciencias, tecnologías y saberes ancestrales. Se prohíbe también la apropiación sobre

los recursos genéticos que contienen la diversidad biológica y la agro-biodiversidad.

Título VII. Régimen del Buen Vivir

Capítulo Primero. Inclusión y equidad

Sección Primera. Educación

Art. 350.- El sistema de educación superior tiene como finalidad la formación

académica y profesional con visión científica y humanista; la investigación científica y

tecnológica; la innovación, promoción, desarrollo y difusión de los saberes y las culturas; la

construcción de soluciones para los problemas del país, en relación con los objetivos del

régimen de desarrollo.

Título VII. Régimen del Buen Vivir

Capítulo Segundo. Biodiversidad y recursos naturales

Sección Primera. Naturaleza y ambiente

115

Art. 395.- El Estado garantizará la participación activa y permanente de las personas,

comunidades, pueblos y nacionalidades afectadas, en la planificación, ejecución y control de

toda actividad que genere impactos ambientales (Asamblea Constituyente del Ecuador,

2008).

CÓDIGO ORGÁNICO DE LA ECONOMÍA SOCIAL DE LOS CONOCIMIENTOS,

CREATIVIDAD E INNOVACIÓN

Libro III. De la Gestión de los Conocimientos

Título II. De los Derechos de Autor y los Derechos Conexos

Capitulo III. De los Derechos de Autor

Sección V. Disposiciones especiales sobre ciertas obras

Apartado Segundo. De las tecnologías libres y formatos abiertos

Art. 142.- Tecnologías libres. - Se entiende por tecnologías libres al software de

código abierto, los estándares abiertos, los contenidos libres y el hardware libre. Los tres

primeros son considerados como Tecnologías Digitales Libres.

Se entiende por software de código abierto al software en cuya licencia el titular

garantiza al usuario el acceso al código fuente y lo faculta a usar dicho software con cualquier

propósito. Especialmente otorga a los usuarios, entre otras, las siguientes libertades

esenciales:

La libertad de ejecutar el software para cualquier propósito;

La libertad de estudiar cómo funciona el software, y modificarlo para adaptarlo a

cualquier necesidad. El acceso al código fuente es una condición imprescindible para

116

ello;

La libertad de redistribuir copias; y,

La libertad de distribuir copias de sus versiones modificadas a terceros.

Se entiende por código fuente, al conjunto de instrucciones escritas en algún lenguaje

de programación, diseñadas con el fin de ser leídas y transformadas por alguna herramienta

de software en lenguaje de máquina o instrucciones ejecutables en la máquina.

Los estándares abiertos son formas de manejo y almacenamiento de los datos en los

que se conoce su estructura y se permite su modificación y acceso no imponiéndose ninguna

restricción para su uso. Los datos almacenados en formatos de estándares abiertos no

requieren de software propietario para ser utilizados. Estos formatos estándares podrían o no

ser aprobados por una entidad internacional de certificación de estándares.

Contenido Libre es el acceso a toda la información asociada al software, incluyendo

documentación y demás elementos técnicos diseñados para la entrega necesarios para realizar

la configuración, instalación y operación del programa, mismos que deberán presentarse en

estándares abiertos.

Se entiende por hardware libre a los diseños de bienes o materiales y demás

documentación para la configuración y su respectivo puesto en funcionamiento, otorgan a

los usuarios las siguientes libertades:

1. La libertad de estudiar dichas especificaciones, y modificarlas para adaptarlas a

cualquier necesidad;

117

2. La libertad de redistribuir copias de dichas especificaciones; y

3. La libertad de distribuir copias de sus versiones modificadas a terceros.

El Estado en la adquisición de bienes o servicios incluidos los de consultoría de

tecnologías digitales, preferirá la adquisición de tecnologías digitales libres. Para el caso de

adquisición de software se observará el orden de prelación previsto en este código.

Art. 151.- Libre elección de software. - Los usuarios tienen derecho a la libre

elección del software en dispositivos que admitan más de un sistema operativo. En

dispositivos que no admitan de fábrica, más de un sistema operativo, podrán ofrecerse solo

con el sistema instalado de fábrica.

En la compra de computadores personales y dispositivos móviles, los proveedores

estarán obligados a ofrecer al usuario alternativas de software de código cerrado o software

de código abierto, de existir en el mercado. Se deberá mostrar por separado el precio del

hardware y el precio de las licencias (Asamblea Nacional, 2016).

118

Anexo 4. Despliegue de procesos actuales.

Proceso Actual para Solicitar Donaciones de Materiales Reciclables

Proceso Actual para Registrar y Coordinar los Materiales Obtenidos

119

Proceso Actual para Comunicar y Entregar Materiales a los Artistas

Proceso Actual para Difundir Proyectos y Obras Realizadas

120

Proceso Actual para Comercializar Artes Visuales

121

Anexo 5. Modelo de Encuesta (Google Forms).

122

123

124

Anexo 6. Validación de expertos.

Experto N. 1

125

Experto N. 2

126

Experto N. 3

127

Anexo 6. Acta de Aceptación del Producto.

128

Anexo 7. Manual de Usuario




MANUAL DE USUARIO




AUTORES:




2020

ÍNDICE

Introducción…………………………………………………………………………………1

Objetivos ................................................................................................................................. 1

Registro de usuario ................................................................................................................. 1

1. Ingresar al módulo de registro .................................................................................... 1

2. Registrar información del usuario .............................................................................. 1

3. Confirmar creación de usuario por parte de un Administrador .................................. 2

Inicio de sesión ....................................................................................................................... 3

1. Ingresar al módulo de inicio de sesión ....................................................................... 3

2. Ingresar los datos de correo y clave............................................................................ 3

Módulo de Usuarios ............................................................................................................... 4

1. Consulta de usuarios ................................................................................................... 4

2. Control de usuarios ..................................................................................................... 5

3. Generar consolidado de usuarios ................................................................................ 5

Módulo de Asignación Menú Rol .......................................................................................... 6

1. Control de módulos a usuarios ................................................................................... 6

2. Habilitar modulo a un rol de usuario .......................................................................... 6

Módulo Mi Perfil .................................................................................................................... 7

Módulo de Post ....................................................................................................................... 7

1. Registro de un arte visual ........................................................................................... 7

2. Publicación del arte .................................................................................................... 8

3. Visualización en el sistema......................................................................................... 9

Módulo de Subasta ................................................................................................................. 9

Módulo de Material .............................................................................................................. 10

1. Registro de un material ............................................................................................. 10

2. Modificación de un material ..................................................................................... 10

Módulo de Donación ............................................................................................................ 11

1. Registro de una donación de material....................................................................... 11

2. Aceptación de una donación de material .................................................................. 11

Módulo de Recompensa ....................................................................................................... 12

Módulo de Chat Online ........................................................................................................ 12

1

Introducción

En el presente manual se detallan las diversas funciones de la aplicación web para la donación

de plástico, exposición, cotización y subasta de artes visuales para la fundación Manos al

Ambiente ubicado en la ciudad de Guayaquil. El documento se detallan todos los módulos y

las opciones que pueden realizar dependiendo del rol de usuario que cumpla en el sistema.

Objetivos

Describir el funcionamiento de la propuesta de aplicación web para la donación de plástico,

exposición, cotización y subasta de artes visuales para la fundación Manos al Ambiente,

detallando cada uno de sus componentes de manera comprensible y precisa.

Registro de usuario

1. Ingresar al módulo de registro

Para obtener un usuario en el sistema, las personas deben dar click en el botón “Regístrate”

ubicado en la esquina superior derecha de la página web de la fundación.

Dar click en el botón “Regístrate” para ir a

una ventana para solicitar un usuario.

2. Registrar información del usuario

En la siguiente pantalla el usuario debe ingresar sus datos personales, los cuales serán

registrados en la base de datos de la fundación.

2

Ingrese la foto del usuario

Ingrese los apellidos

Ingrese su genero de sexo

Ingrese la dirección

Ingrese el correo

Botón para registrar el usuario

Ingrese los nombres

Ingrese el número de cédula

Ingrese la fecha de nacimiento

Ingrese el número de teléfono

Ingrese la contraseña

3. Confirmar creación de usuario por parte de un Administrador

Los usuarios con rol de Administrador verifican la información ingresada por los usuarios,

procede a dar un rol en el sistema y confirmar la creación para que las personas puedan

ingresar con su cuenta.

Cambiar a estado “Activo”

para confirmar la creación

del usuario

Una vez aceptado por un administrador, el sistema enviara un mensaje al correo electrónico

registrado, informando que ya puede ingresar a su perfil.

3

Inicio de sesión

1. Ingresar al módulo de inicio de sesión

Para obtener un usuario en el sistema, las personas deben dar click en el botón “Inicio de

sesión” ubicado en la esquina superior derecha de la página web de la fundación.

Dar click en el botón “Inicia Sesión” para ir

al login de la aplicación web

2. Ingresar los datos de correo y clave

Las personas deben ingresar sus datos correspondientes a correo y clave registrados, el

sistema valida la información e ingresa a la aplicación web.

Ingrese el correo electrónico

Ingrese la clave

4

El sistema valida la información y da acceso a la aplicación, mostrando el menú

correspondiente su rol de usuario.

Módulos de la

aplicación web

Salir de

cuenta

Nombre del

usuario

Rol del

usuarioFoto de

Perfil

Módulo de Usuarios

El presente modulo está habilitado solo a los usuarios con el rol de Administrador,

correspondiente a los miembros internos de la fundación.

1. Consulta de usuarios

Se podrá observar la cantidad de usuarios registrados en el sistema, así como la

información correspondiente de cada uno a excepción de la clave de usuario.

Exportar consolidado de

usuarios en pdfAgregar nuevos usuarios

Habilitar o

deshabilitar

cuenta de

usuario

5

2. Control de usuarios

Al dar click en el icono de modificar, podrá aceptar la creación de un nuevo usuario,

otorgando un rol y colocando el estado a “Activo” o deshabilitar el ingreso de un usuario en

particular, cambiando su estado a “Inactivo”. Además de poder modificar el rol de usuario

que cumple en el sistema.

Modificar rol de usuario

3. Generar consolidado de usuarios

Al presionar el botón “Exportar a PDF”, se descargará automáticamente un

consolidado en formato .pdf del registro de usuarios registrados en el sistema.

6

Módulo de Asignación Menú Rol

Se podrá tener un control de las opciones del sistema que pueden ser visibles para los

diferentes roles de usuarios. El presente modulo estará habilitado para los Administradores.

1. Control de módulos a usuarios

Se visualiza los roles de usuarios y los menús que puede tener acceso, en caso de agregar o

quitar el permiso de una opción, debe aplastar el icono de editar.

Agregar permisos de menús

Modificar permisos

Eliminar permisos

2. Habilitar modulo a un rol de usuario

Al dar click en el botón “Agregar”, se despliega la opción para asignar un permiso, debe

escoger el rol a tratar y seleccionar el menú que desea conceder el permiso y guardar la

información.

Rol de usuario

Menú registrado en el sistema

Módulo de la aplicación

Permitir acceso al módulo

Control de permiso

7

Módulo Mi Perfil

Los usuarios del sistema pueden visualizar su información personal registrada en el sistema.

Módulo de Post

Sirve para publicar un arte visual elaborada con materiales plásticos, las opciones del módulo

varían dependiendo del rol que cumpla. Se especifica las acciones que realizan los diferentes

usuarios para cumplir esta función.

1. Registro de un arte visual

Los artistas registran los datos del arte visual realizado, así como el precio y periodo de

tiempo que estará publicada en el sistema. Además de escoger entre exhibir o subastar la

obra.



escultura


obra en el sistema



la escultura


pintura)


arte


arte publicado




escultura


obra en el sistema


visual

8

2. Publicación del arte

Los administradores visualizan toda la información de las obras registradas, así como de los

artistas que la realizaron.

Publicar proyectos

ambientales

Aprobar o desaprobar

publicación de artes

visuales

Posteriormente verifica que los datos ingresados sean correctos y procede a aceptar rechazar

la obra. Una vez aceptada el sistema publicara el arte para ser visualizado por los clientes.

Aprobar o eliminar

publicación

9

3. Visualización en el sistema

Los clientes pueden observar las artes visuales publicadas y en caso de estar interesado en

una obra, comunicarse mediante el módulo de chat con el artista para adquirir dicha obra.

Participar en subasta del

arte visual

Buscar una obra en particular

Módulo de Subasta

Utilizado para registrar un arte visual en una subasta online entre los clientes registrados en

el sistema. El proceso para poner una obra en subasta es el mismo que para publicar,

diferenciando que aquí los usuarios clientes pueden participar en la puja por un arte

Colocar valor a ofertar en

la subastaÚltimo valor ofertado por

el arte visual

Valor inicial de la subasta

Al finalizar el periodo de tiempo de un arte, el sistema escogerá precio mayor y lo tomará

como ganador, notificando vía correo electrónico al usuario merecedor del arte visual.

10

Módulo de Material

Modulo realizado para que los administradores pueden ingresar los tipos de materiales que

la fundación recibe como donación.

1. Registro de un material

Se ingresa la información del material a añadir, así como la medida de peso que acepta la

fundación.

Nombre del material reciclable

Medida de peso que se debe realizar la donación

Precio del material por medida de peso

Estado del material en el sistema

Seleccionar una imagen de referencia del tipo de material

2. Modificación de un material

En caso de que se desee suprimir un material de la lista de recibidos por la fundación, o

cambiar su información, da un click en el icono de editar y se despliega una ventana con sus

datos para su modificación.

Agregar material

Modificar información

del material reciclable

Quitar de la lista de

materiales aceptados

por la fundación

11

Módulo de Donación

Utilizado para recibir la donación de materiales reciclables por parte de los clientes hacia la

fundación. El módulo presenta diferentes opciones según el rol del usuario.

1. Registro de una donación de material

Los clientes escogen el tipo de material que desean donar, añadiendo la cantidad y escogiendo

el lugar donde se hace la entrega del material. Al agregar la donación, su estado estará en

“Pendiente”.

Seleccionar material a

donar

Seleccionar lugar de

entrega de la donación

Cantidad de material

por medida de peso

Compensación que otorga la

fundación por la donación de

materiales. Utilizado como

descuento en la adquisición

de un arte visual

Medida de peso que se debe

realizar la donación

Precio del material por

medida de peso

2. Aceptación de una donación de material

Se despliega los registros de los materiales donados por los diversos clientes. Una vez se

haga la entrega del material, el administrador selecciona la solicitud y cambia su estado a

“Entregado”, confirmando la donación. En caso de no ser entregado, cambia a “Rechazado”.

Modificar estado de la

donación del material

Rechazar donacion de

material reciclable

Buscar una donación

en particular

12

Módulo de Recompensa

Una vez aceptada la donación por parte del administrador. El sistema agregara a los registros

del cliente una compensación monetaria la cual sirve como descuento para adquisición de un

arte visual, ya sea de exhibición o subasta.

Módulo de Chat Online

Módulo de comunicación entre los usuarios de la aplicación web para resolver inquietudes,

cotizar, coordinar la entrega y pago de un arte visual, entre otros.

Usuarios registrados

en el sistema

142

Anexo 8. Manual Técnico




MANUAL TÉCNICO




AUTORES:




2020

ÍNDICE

Introducción ............................................................................................................................ 1

Objetivos ................................................................................................................................. 1

Requerimiento ........................................................................................................................ 2

Diagrama de Entidad Relación ............................................................................................... 3

Servicio Pusher ....................................................................................................................... 4

Conexión con el servicio Pusher ............................................................................................ 7

Funciones ................................................................................................................................ 8

Función para registrar usuarios ........................................................................................... 8

Función para enviar correo ............................................................................................... 10

Función para exportar consolidado de usuarios a Pdf ...................................................... 10

Función para registrar una donación ................................................................................. 11

Función para recibir mensajes .......................................................................................... 12

Función para enviar mensajes ........................................................................................... 13

1

Introducción

El presente documento es manual técnico que sirve como guía para describir los procesos,

requerimientos y configuración necesaria para la instalación y los complementos utilizados

para el desarrollo de la aplicación web.

La aplicación web “FMA” es una aplicación web realizada para sistematizar la donación de

materiales reciclables, exposición y subasta de artes visuales para la fundación Manos al

Ambiente ubicado en la ciudad de Guayaquil.

Objetivos

Detallar los requerimientos de hardware y software mínimo para la instalación del

proceso.

Describir el proceso de instalación de los requerimientos necesarios para la

funcionalidad del sistema

Servir como herramienta de soporte para el administrador del sistema u otros

desarrolladores interesados en la construcción de la aplicación web.

2

Requerimiento

Se detallan los requerimientos mínimos de hardware y software necesarios para la

construcción y desarrollo de la aplicación web.

Requerimiento de Hardware

Requerimiento de Software

Características Especificaciones

Procesador Intel ® Core™ i5

Memoria RAM Desde 4 GB

Disco Duro 500 GB en adelante

Tipo de Sistema S.O. de 64 bits, procesador x64

Herramienta Descripción

Sistema Operativo Windows 10

IDE Visual Studio CODE

Lenguaje de Programación PHP, JavaScript

Framework Laravel, Bootstrap

API REST

Base de Datos MySQL

3

Diagrama de Entidad Relación

4

Servicio Pusher

Pusher, servicio en la nube para gestionar las conexiones y envío de mensajes mediante

Websockets, proporciona comunicación en tiempo real entre servidores, aplicaciones y

dispositivos.

Este servicio forma parte indispensable para la interacción en tiempo real del módulo de chat

y para su desarrollo se debe realizar los siguientes pasos:

Iniciar sesión en la aplicación web de Pusher. https://pusher.com

Escoger la sección de Canales, plataforma para crear funciones escalables en tiempo

real en nuestro proyecto.

A continuación, el sistema desplegara una pantalla donde se debe llenar los campos

con la información de las herramientas utilizadas para construir el módulo de chat.

Nombre de la

aplicación de canal

Lenguaje o framework

de desarrollo para la

capa Back-End

Lenguaje o framework

de desarrollo para la

capa Front-End

Elegir un clúster

(servidor) donde se

manejarán las

solicitudes de la

aplicación

https://pusher.com/

5

El sistema genera un archivo HTML que se conecta a los canales del servicio pusher

y se suscribe a un canal llamado my-channel, escuchando un evento llamado my-

event.

6

Además, genera un código de servidor con el fin de publicar un evento que pueda ser

recibido por los clientes de la aplicación.

7

Conexión con el servicio Pusher

Primero se debe incluir los datos obtenidos del servicio Pusher para conexión con el proyecto.

Este fragmento se debe añadir en el archivo .env.

1. PUSHER_APP_ID=1088569

2. PUSHER_APP_KEY=1d75da1b32f55d960044

3. PUSHER_APP_SECRET=60d1f2333eff0903f64d

4. PUSHER_APP_CLUSTER=mt1

5.

6. MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"

7. MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Archivo

donde

añadir la

información

obtenida en

Pusher

8

Funciones

Función para registrar usuarios

1. public function mantenimientoUsuario(Request $request){

2. $validatedData = $request->validate([

3. 'idUsuario' => 'required',

4. 'IdRol' => 'required',

5. 'Nombres' => 'required',

6. 'Apellidos' => 'required',

7. 'Sexo' => 'required',

8. 'FechaNacimiento' => 'required',

9. 'Direccion' => 'required',

10. 'Cedula' => 'required',

11. 'Email' => 'required|email',

12. 'Celular' => 'required',

13. 'IdImagen' => 'required',

14. 'Estado' => 'required'

15. ]);

16.

17. try {

19. //se genera una clave aleatoria para el usuario registrado, enviado por email

20. $clave = Str::random(8);

22. session(['claveTemp'=>$clave]);

23. $res = $this-> cliente-> request( 'POST', $this-> baseUrl.

'autenticacion/registrarUsuario', [

24. 'json' => [

25. "p_Id_Usuario"=>$request->input('idUsuario'),

26. "p_Id_Usuario_rm"=> session()->get('idUsuario'),

27. "p_Nombre"=>$request->input('Nombres'),

28. "p_Apellido"=>$request->input('Apellidos') ,

29. "p_Email"=>$request->input('Email') ,

9

30. "p_Cedula"=>$request->input('Cedula') ,

31. "p_Sexo"=>$request->input('Sexo') ,

32. "p_Direccion"=>$request->input('Direccion') ,

33. "p_Telefono"=>$request->input('Celular') ,

34. "p_FechaNac"=>$request->input('FechaNacimiento') ,

35. "p_Password"=> $request->input('idUsuario') == '0' ? $clave :

$request->input('Clave') ,

36. "p_Id_rol"=> $request->input('IdRol'),

37. "p_Url"=> $request->input('PathImagen') == "" ? '' : $this-

>baseUrl.'public/images/'.$request->input('PathImagen'),

38. "p_Id_imagen" => $request->input('IdImagen'),

39. "p_Clave_temp"=>$request->input('clave_temp'),

40. "p_Estado_clave"=>3,

41. "p_Estado_user"=>$request->input('EstadoUsuario'),

42. "p_Opcion"=>intval($request->input('idUsuario')) == 0 ? 1 : 9

43. ]

44. ]);

45.

46. $response = json_encode( response() -> json(json_decode( ($res->

getBody() ))));

47. $array = json_decode($response,true);

48. $utils = new Utils();

49. $utils->basic_email($request->input('Email'));

50. $utils->escribirLog($clave);

51. return array('data'=>$array['original']['respuesta']);

52. } catch (Exception $ex) {

53. $logs = new Utils();

54. $logs->escribirLog($ex->getMessage());

55. return array('CodigoError'=>'0001','MensajeError'=> 'Ocurrio un error

inesperado contactar con sistemas!!');

56. }

10

57. }

Función para enviar correo

1. public function basic_email($email) {

2. $to_name = "usuario";

3. $to_email = $email;

4. $claveTemp = session()->get('claveTemp');

5.

6. $data = array('clave'=>$claveTemp);

7. Mail::send('message-received', $data, function($message) use ($to_name,

$to_email) {

8. $message->to($to_email, $to_name)->subject('Laravel Test Mail');

9. $message->from('[email protected]','Tatiana Salas');

10. session()->forget('claveTemp');

11. });

12. }

Función para exportar consolidado de usuarios a Pdf

1. {

2. extend: 'pdfHtml5',

3. orientation: 'landscape',

4. pageSize: 'A4',

5. title: 'Reporte de Usuarios',

6. filename: 'REPORTE DE USUARIOS',

7. text: '<button class="btn btn-success">Exportar a PDF <i class="far fa-file-

pdf"></i></button>',

8.

9. exportOptions:{

11

10. columns:[0,1,2,3,4,5,9,10,14,15]

11. }

12. }

Función para registrar una donación

1. public function mantenimiento(Request $request){

2. $validatedData = $request->validate([

3. 'idDonaciones' => 'required',

4. 'idCliente' => 'required',

5. 'idMaterial' => 'required',

6. 'cedula' => 'required',

7. 'tipo_entrega' => 'required',

8. 'Estado' => 'required',

9. 'Cantidad' => 'required',

10. 'Valor' => 'required',

11. 'Opcion'=>'required'

12. ]);

13.

14. try {

15. $res = $this->cliente->request('POST', $this->baseUrl.'donacion', [

16. 'json' => [

17. "p_id_donaciones"=>$request->input('idDonaciones'),

18. "p_usuario_crea"=>$request->input('idCliente')== "" ?

session()->get('idUsuario') : session()->get('idUsuario'),

19. "p_usuario_mod"=>session()->get('idUsuario'),

20. "p_id_material" =>$request->input('idMaterial'),

21. "p_Cedula"=>$request->input('cedula'),

22. "p_id_tipo_entrega"=>$request->input('tipo_entrega') ,

23. "p_id_estado"=>$request->input('Estado'),

24. "p_cantidad"=>$request->input('Cantidad') ,

12

25. "p_valor"=>$request->input('Valor'),

26. "p_Opcion"=> $request->input('Opcion')

27. ],

28. 'headers' =>[

29. 'Authorization' => session()->get('token'),

30. 'Content-Type' => 'application/json; charset=utf-8'

31. ]

32. ]);

33.

34. $response = json_encode(response()-> json(json_decode(($res ->

getBody() ))));

35. $array = json_decode($response,true);

36.

37. return array('data'=>$array['original']['respuesta']);

38. } catch (Exception $ex) {

39. $logs = new Utils();

40. $logs->escribirLog($ex->getMessage());

41. $resp = array('CodigoError'=>'0001','MensajeError'=> 'Ocurrio un

error inesperado contactar con sistemas!!');

42. return array('data'=>$resp);

43. }

44. }

Función para recibir mensajes

1. public function getMessage($user_id) {

2. $my_id = session()->get('idUsuario');

3. // actualizara el contador de los mensajes no leidos

4. Message::where(['from' => $user_id, 'to' => $my_id])->update(['is_read' => 1]);

5. // obtenemos todos los mensajes seleccionados por el usuario

6. $messages = Message::where(function ($query) use ($user_id, $my_id) {

13

7. $query->where('from', $user_id)->where('to', $my_id);

8. })->oRwhere(function ($query) use ($user_id, $my_id) {

9. $query->where('from', $my_id)->where('to', $user_id);

10. })->get();

11. return view('modules.chat.message', ['messages' => $messages]);

12. }

Función para enviar mensajes

1. public function sendMessage(Request $request){

2. $from = session()->get('idUsuario');

3. $to = $request->receiver_id;

4. $message = $request->message;

5.

6. $data = new Message();

7. $data->from = $from;

8. $data->to = $to;

9. $data->message = $message;

10. $data->is_read = 0; // el mensaje no se va a leer al enviar el mensaje

11. $data->save();

12.

13. // pusher

14. $options = array(

15. 'cluster' => 'mt1',

16. 'useTLS' => true

17. );

18.

19. $pusher = new Pusher(

20. env('PUSHER_APP_KEY'),

21. env('PUSHER_APP_SECRET'),

14

22. env('PUSHER_APP_ID'),

23. $options

24. );

25.

26. // enviando desde y hacia el id del user al presionar enter

27. $data = ['from' => $from, 'to' => $to];

28. $pusher->trigger('my-channel', 'my-event', $data);

29. }

Documents

UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/49615/1/B...Título del Proyecto de Titulación: Desarrollo de un sitio web interactivo para la donación de plástico,