B-CISC-PTG-1966-2021 Mero Albarracin Diego Cristoffer - Quinde Briones Gilson Steeven

UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

CARRERA DE INGENIERÍA EN SISTEMAS
COMPUTACIONALES
DESARROLLO DE UN PROTOTIPO DE APLICACIÓN WEB PROGRESIVA (PWA)
PARA MEJORAR EL PROCESO DE GESTIÓN DE VENTAS EN LA FARMACIA
NICOLÁS BOLÍVAR.
PROYECTO DE TITULACIÓN
Previa a la obtención del Título de:
INGENIERO EN SISTEMAS COMPUTACIONALES
AUTORES:
MERO ALBARRACIN DIEGO CRISTOFFER
QUINDE BRIONES GILSON STEEVEN
TUTORA:
Ing. ÁNGELA OLIVIA YANZA MONTALVÁN, Mgp.
GUAYAQUIL – ECUADOR
2021
2
REPOSITORIO NACIONAL EN CIENCIAS Y TECNOLOGÍAS
FICHA DE REGISTRO DE TRABAJO DE TITULACIÓN

TÍTULO: Desarrollo de un prototipo de Aplicación Web Progresiva (PWA) para mejorar el
proceso de gestión de ventas en la farmacia Nicolás Bolívar.
AUTORES: REVISORA:
Mero Albarracin Diego Cristoffer
Quinde Briones Gilson Steeven LSI. Jenny Alexandra Ortiz Zambrano, M.Sc.
INSTITUCIÓN: Universidad de FACULTAD: Ciencias Matemáticas y Físicas
Guayaquil
CARRERA: Ingeniería en Sistemas Computacionales
FECHA DE PUBLICACIÓN: 2021 N° DE PAGS: 378
AREA TEMÁTICA: Desarrollo de Software
PALABRAS CLAVES: Aplicación web progresiva, PWA, prototipo, gestión de ventas, open
source.
RESUMEN: Por medio de un análisis exhaustivo de información, el cual se obtuvo mediante
entrevistas y reuniones realizadas con el propietario de la farmacia Nicolás Bolívar, se logró
encontrar la problemática que posee hoy en día el proceso de gestión de ventas, que es el nivel
de dificultad elevado para realizar las ventas de manera organizada y oportuna. Por este motivo
se planteó el desarrollo de un prototipo de aplicación web progresiva (PWA), que permitirá la
automatización de dichos procesos, además, servirá como un medio de comunicación entre los
clientes y personal de la empresa. Para minimizar los costos de inversión en el desarrollo de
este software, se utilizó el framework CodeIgniter, el framework Vue.js, Node.js, PHP, las
cuales son herramientas open source. Para la elaboración del proyecto se usó la Metodología
de Marco Lógico que permitió identificar el problema principal juntos con sus causas y
consecuencias. Además, para gestión de proyecto se utilizó la metodología SCRUM y para el
desarrollo del software la metodología XP, las que permitieron una correcta planificación de
tareas y el desarrollo del software de una manera adecuada. Como resultado se obtuvo una
mejora en general del proceso de gestión de ventas en un 61,48% cumpliendo con el objetivo,
brindando mayor competitividad y reducción en el nivel de dificultad y tiempos para llevar a
cabo dichos procesos.
N° DE REGISTRO: N° DE CLASIFICACIÓN:
DIRECCIÓN URL: (PROYECTO DE TITULACION EN LA WEB)
ADJUNTO PDF SI NO
x
CONTACTO CON AUTOR(ES): Teléfono: Email:
MERO ALBARRACIN DIEGO CRISTOFFER 0962916411 diego.meroa@ug.edu.ec
QUINDE BRIONES GILSON STEEVEN 0995153706 gilson.quindeb@ug.edu.ec
CONTACTO DE LA Nombre: Ab. Juan Chávez Atocha
INSTITUCIÓN
Teléfono: 2307729
Email: juan.chaveza@ug.edu.ec
3
APROBACIÓN DEL TUTOR
En mi calidad de Tutora del Trabajo de Titulación, “DESARROLLO DE UN PROTOTIPO
DE APLICACIÓN WEB PROGRESIVA (PWA) PARA MEJORAR EL PROCESO DE
GESTIÓN DE VENTAS EN LA FARMACIA NICOLÁS BOLÍVAR” elaborado por el Sr.
MERO ALBARRACIN DIEGO CRISTOFFER y el Sr QUINDE BRIONES GILSON
STEVEN, 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 en Sistemas Computacionales, me permito declarar que luego
de haber orientado, estudiado y revisado, la apruebo en todas sus partes.
Atentamente,
Ing. Ángela Olivia Yanza Montalván Mgp.
TUTORA
4
DEDICATORIA
Dedico este trabajo de Titulación
primeramente a Dios, especialmente a mis
padres, amigos, y a todas aquellas
personas que me brindaron su apoyo
incondicional en este interesante recorrido
de mi carrera universitaria, para todos ellos
mi respeto, amor y cariño.
Diego Cristoffer Mero Albarracin
Este proyecto va dedicado a mis padres
que me han brindado su apoyo
incondicional a lo largo de toda mi carrera
universitaria, pero sobre todo a Dios por
brindarme la salud y las fuerzas para no
desmayar en las adversidades.
Gilson Steeven Quinde Briones

5
AGRADECIMIENTO
Mi agradecimiento a Dios, por brindarme
vida y salud, a mi mamá la Sra. Mirella
Albarracin por ser el pilar fundamental en
mi vida, brindándome su amor, su valioso
tiempo y todo su apoyo incondicional te
amo mamá. A mis amigos, docentes por
brindarme su ayuda en todo momento
para obtener este logro, por este motivo a
todos. ¡Muchas gracias!
Agradezco principalmente a Dios por
brindarme la salud y guiarme por el buen
camino, a mi padre a y mi madre por su
comprensión, buenos consejos y apoyo
incondicional, a mis amigos y docentes y
a cada una de las personas que me brindó
su ayuda para culminar este proyecto.

6
TRIBUNAL PROYECTO DE TITULACIÓN
Ing. Douglas Itúrburu Salvador, M.Sc. Ing. Lorenzo Cevallos Torres, Mgs.
DECANO DE LA FACULTAD DIRECTOR DE LA CARRERA DE
CIENCIAS MATEMÁTICAS Y FÍSICAS INGENIERÍA EN SISTEMAS
COMPUTACIONALES
Ing. Ángela Yanza Montalván, Mgp. LSI. Jenny Ortiz Zambrano, M.Sc.
PROFESORA TUTORA DEL PROYECTO PROFESORA REVISORA DEL
DE TITULACIÓN PROYECTO
DE TITULACIÓN
Ab. Juan Chávez Atocha, Esp.

SECRETARIO
7
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”.
DIEGO CRISTOFFER MERO ALBARRACIN
GILSON STEEVEN QUINDE BRIONES

8
CESIÓN DE DERECHOS DE AUTOR
Ingeniero
Ing. Douglas Itúrburu Salvador, 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
PROTOTIPO DE APLICACIÓN WEB PROGRESIVA (PWA) PARA MEJORAR EL
PROCESO DE GESTIÓN DE VENTAS EN LA FARMACIA NICOLÁS BOLÍVAR”,
realizado como requisito previo para la obtención del Título de Ingeniero en Sistemas
Computacionales de la Universidad de Guayaquil.
Guayaquil, septiembre de 2021
______________________________________
Diego Cristoffer Mero Albarracín
C.I. N° 0931519789
______________________________________
C.I. N° 0940514193
9
CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
DESARROLLO DE UN PROTOTIPO DE APLICACIÓN WEB PROGRESIVA (PWA) PARA
MEJORAR EL PROCESO DE GESTIÓN DE VENTAS EN LA FARMACIA NICOLÁS
BOLÍVAR
Proyecto de Titulación que se presenta como requisito para optar por el título de
Autores:
C.I. N° 0931519789
C.I. N° 0940514193
Tutora: Ing. Ángela Olivia Yanza Montalván Mgp.
Guayaquil, septiembre del 2021

10
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 DIEGO
CRISTOFFER MERO ALBARRACIN, GILSON STEEVEN QUINDE BRIONES, como
requisito previo para optar por el Título de Ingeniero en Sistemas Computacionales cuyo proyecto
es:
DESARROLLO DE UN PROTOTIPO DE APLICACIÓN WEB PROGRESIVA (PWA)
PARA MEJORAR EL PROCESO DE GESTIÓN DE VENTAS EN LA FARMACIA
NICOLÁS BOLÍVAR
Considero aprobado el trabajo en su totalidad.
Presentado por:
Mero Albarracin Diego Cristoffer Cédula de identidad N° 0931519789
Quinde Briones Gilson Steeven Cédula de identidad N° 0940514193
Tutora: ____________________________
Firma
Guayaquil, septiembre del 2021

11
AUTORIZACIÓN PARA PUBLICACIÓN DE PROYECTO DE TITULACIÓN EN FORMATO DIGITAL
1. Identificación del Proyecto de Titulación
Nombre del Estudiante: Diego Cristoffer Mero Albarracin

Dirección: Isla trinitaria, coop camino al sol, MZ F, Sol 23
Teléfono: 0962916411 Email: diego.meroa@ug.edu.ec
Nombre del Estudiante: Gilson Steeven Quinde Briones

Dirección: Coop. Colinas de montebello Mz A solar 8
Teléfono: 0995153706 Email: gilson.quindeb@ug.edu.ec
Facultad: Ciencias Matemáticas y Física

Carrera: Ingeniería en Sistemas Computacionales
Proyecto de Titulación al que opta: Ingeniero en Sistemas Computacionales
Profesora Tutora: Ing. Ángela Olivia Yanza Montalván Mgp.
Título del Proyecto de Titulación: Desarrollo de un prototipo de aplicación web progresiva (PWA) para
mejorar el proceso de gestión de ventas en la farmacia Nicolás Bolívar.
Palabras Claves: Aplicación web progresiva, PWA, prototipo, gestión de ventas, open source.
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:
0931519789
Mero Albarracin Diego Cristoffer Cédula de identidad N°
0940514193
Quinde Briones Gilson Steeven Cédula de identidad N°
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 X CDROM
12
ÍNDICE GENERAL
FICHA DE REGISTRO DE TRABAJO DE TITULACIÓN ................................................... 2
APROBACIÓN DEL TUTOR ..................................................................................................... 3
DEDICATORIA............................................................................................................................ 4
AGRADECIMIENTO .................................................................................................................. 5
TRIBUNAL PROYECTO DE TITULACIÓN .......................................................................... 6
DECLARACIÓN EXPRESA....................................................................................................... 7
CESIÓN DE DERECHOS DE AUTOR ..................................................................................... 8
CERTIFICADO DE ACEPTACIÓN DEL TUTOR ............................................................... 10
AUTORIZACIÓN PARA PUBLICACIÓN DE PROYECTO DE TITULACIÓN EN
FORMATO DIGITAL ............................................................................................................... 11
ÍNDICE GENERAL ................................................................................................................... 12
ÍNDICE DE TABLAS................................................................................................................. 24
ÍNDICE DE FIGURAS............................................................................................................... 32
ABREVIATURAS....................................................................................................................... 37
SIMBOLOGÍA ............................................................................................................................ 39
RESUMEN................................................................................................................................... 40
ABSTRACT ................................................................................................................................. 41
INTRODUCCIÓN ...................................................................................................................... 42
CAPÍTULO I ............................................................................................................................... 45
13
PLANTEAMIENTO DEL PROBLEMA ................................................................................. 45
Descripción de la situación problemática ................................................................................. 45
Ubicación del problema en un contexto.................................................................................... 45
Situación conflicto nudos críticos ............................................................................................. 46
Delimitación del problema ........................................................................................................ 47
Evaluación del problema........................................................................................................... 47
Causas y consecuencias del problema ....................................................................................... 49
Formulación del problema ......................................................................................................... 51
Objetivos del proyecto ................................................................................................................ 51
Objetivo general ........................................................................................................................ 51
Objetivos específicos ................................................................................................................ 51
Alcance del problema ................................................................................................................. 52
Justificación e importancia ........................................................................................................ 55
Limitaciones del estudio ............................................................................................................. 57
CAPÍTULO II ............................................................................................................................. 58
MARCO TEÓRICO ................................................................................................................... 58
Antecedentes del estudio............................................................................................................. 58
Fundamentación teórica ............................................................................................................. 61
Proceso de gestión de ventas ...................................................................................................... 61
Definición de ventas ................................................................................................................. 61

14
Importancia de las ventas .......................................................................................................... 61
Proceso de venta ....................................................................................................................... 62
Etapas del proceso de ventas..................................................................................................... 62
Característica de un proceso de gestión de ventas .................................................................... 63
Diagrama de flujo de proceso de ventas ................................................................................... 65
Promociones de las ventas ........................................................................................................ 66
Clientes ..................................................................................................................................... 66
Catálogo de productos............................................................................................................... 66
Automatización de procesos ....................................................................................................... 67
Definición de automatización de procesos ............................................................................... 68
Tipos de automatización ........................................................................................................... 68
Ventajas de la automatización .................................................................................................. 69
Automatización de la TI............................................................................................................ 70
Prototipo de desarrollo de software .......................................................................................... 70
Definición de prototipo ............................................................................................................. 70
Etapas de un prototipo .............................................................................................................. 71
Tipos de prototipos ................................................................................................................... 72
Ventajas de un prototipo ........................................................................................................... 74
Desventajas de un prototipo ...................................................................................................... 74
Características de los prototipos ............................................................................................... 75

15
Aplicaciones Web ........................................................................................................................ 76
Definición de Aplicaciones Web .............................................................................................. 76
Aplicaciones Nativas ................................................................................................................ 76
Responsive Web Design ........................................................................................................... 77
Definición ............................................................................................................................ 77
Características...................................................................................................................... 78
Ventajas y Desventajas ........................................................................................................ 79
Aplicaciones web progresivas (PWA) ....................................................................................... 80
Definición de aplicación web progresivas (PWA).................................................................... 80
Características de las PWA ....................................................................................................... 81
Ventajas y desventajas de las PWA .......................................................................................... 83
Componentes técnicos de una PWA .......................................................................................... 84
Service Worker ......................................................................................................................... 84
Ventajas y Desventajas del Service Worker ........................................................................ 85
Web App Manifest .................................................................................................................... 85
Secure Sockets Layer (SSL) ..................................................................................................... 86
Cache Storage ........................................................................................................................... 86
Herramientas de desarrollo de software ................................................................................... 86
Visual Studio Code ................................................................................................................... 87
Definición ............................................................................................................................ 87
16
Características de Visual Studio Code ................................................................................ 87
Ventajas y desventajas ......................................................................................................... 88
Línea de tendencia ............................................................................................................... 89
Node.js ...................................................................................................................................... 91
Definición ............................................................................................................................ 91
Características...................................................................................................................... 92
Arquitectura de Node.js ....................................................................................................... 93
Ventajas y Desventajas ........................................................................................................ 93
Ranking de tecnologías de desarrollo .................................................................................. 94
Frameworks ................................................................................................................................. 95
Definición de framework .......................................................................................................... 95
Framework CodeIgniter ............................................................................................................ 96
Definición ............................................................................................................................ 96
Características de CodeIgniter ............................................................................................. 96
Arquitectura de Codeigniter ................................................................................................ 97
Ventajas y desventajas ......................................................................................................... 98
Línea de tendencia ............................................................................................................... 98
Comparativa de los frameworks CodeIgniter, CakePHP y Yii ......................................... 100
Bootstrap ................................................................................................................................. 101
Definición .......................................................................................................................... 101

17
Características de Bootstrap .............................................................................................. 102
Ventajas y desventajas ....................................................................................................... 103
Línea de tendencia ............................................................................................................. 104
Vue.js ...................................................................................................................................... 105
Definición .......................................................................................................................... 105
Características.................................................................................................................... 106
Lenguajes de programación ..................................................................................................... 109
PHP ......................................................................................................................................... 110
Definición .......................................................................................................................... 110
Arquitectura de PHP .......................................................................................................... 110
Características de PHP ...................................................................................................... 111
JavaScript ................................................................................................................................ 114
Definición .......................................................................................................................... 114
Ranking de los lenguajes de programación ............................................................................ 116

18
Gestor de Base de Datos ........................................................................................................... 117
MySQL ................................................................................................................................... 118
Definición .......................................................................................................................... 118
Arquitectura de MySQL .................................................................................................... 119
Arquitectura MVC.................................................................................................................... 122
Definición ............................................................................................................................... 122
Componentes de la arquitectura MVC .................................................................................... 123
Ventajas y Desventajas de la arquitectura MVC .................................................................... 124
La Organización ........................................................................................................................ 125
Misión ..................................................................................................................................... 125
Visión ...................................................................................................................................... 125
Valores Institucionales ............................................................................................................ 126
Organigrama de la farmacia Nicolás Bolívar.......................................................................... 126
Cadena de valor....................................................................................................................... 127
Análisis FODA........................................................................................................................ 128
Análisis PESTEL .................................................................................................................... 129
Preguntas científicas a contestarse .......................................................................................... 130

19
Definiciones conceptuales ......................................................................................................... 130
CAPÍTULO III .......................................................................................................................... 133
PROPUESTA TECNOLÓGICA ............................................................................................. 133
Análisis de factibilidad ............................................................................................................. 133
Factibilidad operacional .......................................................................................................... 134
Factibilidad técnica ................................................................................................................. 135
Factibilidad legal ..................................................................................................................... 136
Factibilidad económica ........................................................................................................... 137
Metodologías del proyecto ........................................................................................................ 140
Metodología de investigación ................................................................................................. 141
Investigación exploratoria ................................................................................................. 141
Investigación descriptiva ................................................................................................... 141
Población y muestra .......................................................................................................... 142
Población ...................................................................................................................... 142
Muestra ......................................................................................................................... 142
Procesamiento y análisis.................................................................................................... 144
Técnicas de recolección de datos .................................................................................. 144
Técnicas estadísticas para el procesamiento de la información .................................... 145
Metodología de gestión del proyecto ...................................................................................... 163
Etapas de la metodología del proyecto ................................................................................... 163

20
Fase 1. Definición del problema central ............................................................................ 163
Fase 2. Análisis de Involucrados ....................................................................................... 164
Fase 3. Análisis de problemas ........................................................................................... 164
Fase 4. Análisis de Objetivos ............................................................................................ 165
Fase 5. Análisis de Alternativas ........................................................................................ 165
Fase 6. Diseño de estrategias ............................................................................................. 166
Fase 7. Matriz de Marco Lógico........................................................................................ 166
Metodología de desarrollo del proyecto ................................................................................. 167
SCRUM................................................................................................................................... 167
Roles ............................................................................................................................. 168
Artefactos ...................................................................................................................... 169
Sprints para el desarrollo del prototipo de aplicación web progresiva ......................... 169
Product Backlog............................................................................................................ 170
Sprint Planning .................................................................................................................. 181
Diagrama de Gantt ............................................................................................................. 184
Metodología Ágil Extreme Programming (XP) ...................................................................... 188
Fases de la metodología XP .............................................................................................. 188
Planificación ...................................................................................................................... 189
Roles dentro de la metodología XP ................................................................................... 190

21
Historias de usuario ........................................................................................................... 191
Plan de entrega del proyecto.............................................................................................. 200
Reuniones .......................................................................................................................... 201
Diseño ................................................................................................................................ 202
Modelado de la base de datos ............................................................................................ 204
Diagrama de flujo de proceso ............................................................................................ 205
Codificación ...................................................................................................................... 205
Pruebas .............................................................................................................................. 209
Lanzamiento ...................................................................................................................... 237
Beneficiarios directos e indirectos del proyecto ..................................................................... 241
Entregables del proyecto .......................................................................................................... 242
Propuesta ................................................................................................................................... 242
Criterios de validación de la propuesta .................................................................................. 250
Diseño ..................................................................................................................................... 251
Juicio de expertos.................................................................................................................... 251
Encuesta de satisfacción ......................................................................................................... 253
Resultados .................................................................................................................................. 265
CAPÍTULO IV .......................................................................................................................... 268
CONCLUSIONES Y RECOMENDACIONES ...................................................................... 268
Criterios de aceptación del producto o servicio ..................................................................... 268

22
Conclusiones .............................................................................................................................. 278
Recomendaciones ...................................................................................................................... 280
Trabajos futuros........................................................................................................................ 280
REFERENCIAS BIBLIOGRÁFICAS .................................................................................... 282
BIBLIOGRAFÍA....................................................................................................................... 288
ANEXOS .................................................................................................................................... 289
Anexo 1. Planificación de actividades del proyecto .............................................................. 289
Anexo 2. Geolocalización del problema ................................................................................ 295
Anexo 3. Carta de autorización del proyecto ......................................................................... 296
Anexo 4. Metodología de Marco Lógico. .............................................................................. 297
Anexo 5. Diagramas de flujo proceso ..................................................................................... 307
Anexo 6. Fundamentación Legal ........................................................................................... 309
Anexo 7. Criterios éticos para utilizarse en el desarrollo del proyecto ................................. 312
Anexo 8. Formatos de técnicas de recolección de datos aplicadas para variables cuantitativas
o cualitativas. .......................................................................................................................... 313
Anexo 9. Entrevista realizada al propietario de la farmacia Nicolás Bolívar. ....................... 327
Anexo 10. Modelado de la base de datos ............................................................................... 332
Anexo 11.1 Plan de pruebas.................................................................................................... 333
Anexo 11.2 Matriz del plan de pruebas .................................................................................. 363
Anexo 12. Validación de expertos ......................................................................................... 364

23
Anexo 13. Constancia de Juicio de experto ........................................................................... 367
Anexo 14. Formato de la encuesta de satisfacción ................................................................ 370
Anexo 15. Carta de aceptación del proyecto .......................................................................... 374
Anexo 16. Carta de uso de software ....................................................................................... 375
Anexo 17. Evidencias fotográficas ......................................................................................... 376
Anexo 18. Manual técnico ...................................................................................................... 377
Anexo 19. Manual de usuario ................................................................................................. 378

24
ÍNDICE DE TABLAS
Tabla 1 Delimitación del problema ............................................................................................. 47
Tabla 2 Matriz de causas y consecuencias del problema ............................................................. 49
Tabla 3 Ventajas y desventajas de las aplicaciones nativas ........................................................ 77
Tabla 4 Ventajas y Desventajas del diseño web responsive ....................................................... 80
Tabla 5 Ventajas y Desventajas de las aplicaciones web progresivas ........................................ 83
Tabla 6 Ventajas y desventajas del service worker..................................................................... 85
Tabla 7 Ventajas y desventajas ................................................................................................... 89
Tabla 8 Ventajas y desventajas de Node.js ................................................................................. 94
Tabla 9 Ventajas y desventajas de CodeIgniter ........................................................................... 98
Tabla 10 Cuadro comparativo de los frameworks CodeIgniter, CakePHP, y Yii .................... 101
Tabla 11 Ventajas y desventajas de Bootstrap ........................................................................... 103
Tabla 12 Ventajas y Desventajas de Vue.js ............................................................................... 107
Tabla 13 Ventajas y Desventajas de PHP .................................................................................. 112
Tabla 14 Ventajas y Desventajas de JavaScript ......................................................................... 116
Tabla 15 Ventajas y Desventajas de MySQL ............................................................................ 120
Tabla 16 Ventajas y desventajas de la arquitectura MVC ......................................................... 124
Tabla 17 Herramientas de software utilizadas para el presente trabajo de titulación ................ 136
Tabla 18 Hardware utilizados para el presente trabajo de titulación ......................................... 136
Tabla 19 Costos por recursos humanos en el proyecto ............................................................. 137
Tabla 20 Costos de inversión en hardware en el proyecto ......................................................... 138
Tabla 21 Costo de inversión de software en el proyecto .......................................................... 138
Tabla 22 Resumen de costos varios del proyecto ..................................................................... 139

25
Tabla 23 Resumen de costos de inversión en el proyecto.......................................................... 139
Tabla 24 Género ........................................................................................................................ 146
Tabla 25 Edad ........................................................................................................................... 147
Tabla 26 Pregunta 1: ¿Tiene usted algún tipo de dispositivo móvil o computadora en casa? .. 148
Tabla 27 Pregunta 2: ¿Qué sistema operativo usa actualmente en su dispositivo móvil? ........ 149
Tabla 28 Pregunta 3: ¿Qué sistema operativo usa actualmente en su computadora de escritorio o
laptop? ......................................................................................................................................... 150
Tabla 29 Pregunta 4: ¿Tiene usted acceso a Internet ya sea desde su computadora o dispositivo
móvil? ......................................................................................................................................... 151
Tabla 30 Pregunta 5: ¿Actualmente usted realiza sus compras acercándose directamente a la
farmacia? ..................................................................................................................................... 152
Tabla 31 Pregunta 6: ¿Ha utilizado usted anteriormente una plataforma o servicio web para
realizar sus compras o consultas online? .................................................................................... 153
Tabla 32 Pregunta 7: ¿Qué navegador web es el que más utiliza para realizar sus compras y/o
consultas de manera online? ....................................................................................................... 154
Tabla 33 Pregunta 8: ¿En el caso de haber realizado compras o consultas online, con qué
frecuencia lo hace? ...................................................................................................................... 155
Tabla 34 Pregunta 9: ¿Cómo ha sido su experiencia realizando compras y/o consultas de
manera online? ............................................................................................................................ 156
Tabla 35 Pregunta 10: ¿Qué nivel de dificultad considera usted que existe actualmente en el
proceso de gestión de ventas en las farmacias que no disponen de un sitio o aplicación web? . 157
Tabla 36 Pregunta 11: ¿Estaría usted de acuerdo en contar con una aplicación web para realizar
sus compras de manera online sin tener que salir de su casa? .................................................... 158
26
Tabla 37 Pregunta 12: ¿Le gustaría que las compras que realizaran en la aplicación web puedan
llegar hasta su domicilio?............................................................................................................ 159
Tabla 38 Pregunta 13: ¿Le gustaría acceder desde cualquier dispositivo móvil o computador a la
aplicación web para realizar sus compras? ................................................................................. 160
Tabla 39 Pregunta 14: ¿Estaría usted de acuerdo en que la aplicación web cuente con un chat
online, el cual permita la comunicación entre usted y el personal de la farmacia en tiempo real?
..................................................................................................................................................... 161
Tabla 40 Pregunta 15: ¿Considera usted que con la aplicación web se logrará disminuir el nivel
de dificultad en el proceso de gestión de ventas? ....................................................................... 162
Tabla 41 Roles de la metodología SCRUM ............................................................................... 169
Tabla 42 Historia N°1 de usuario............................................................................................... 171
Tabla 51 Historia N°10 de usuario............................................................................................. 175

27
Tabla 57 Historia N°16 de usuarios ........................................................................................... 178
Tabla 60 Product Backlog .......................................................................................................... 180
Tabla 61 Sprint Planning N°1 .................................................................................................... 181
Tabla 67 Sprint 1 Levantamiento de información ..................................................................... 185
Tabla 68 Sprint 2 levantamiento de requerimientos .................................................................. 185
Tabla 69 Sprint 3 Adaptación de herramientas de desarrollo .................................................... 186
Tabla 70 Sprint 4 Desarrollo de módulos .................................................................................. 186
Tabla 71 Sprint 4.1 Desarrollo de módulos ............................................................................... 186
Tabla 74 Sprint 5 Desarrollo de la interfaz de usuario .............................................................. 187
Tabla 75 Sprint 6 Pruebas y validación ..................................................................................... 188
Tabla 76 Roles dentro de la metodología XP ............................................................................ 191

28
Tabla 95 Plan de entrega del proyecto ...................................................................................... 201
Tabla 96 Prueba unitaria del módulo de seguridad/inicio de sesión del lado del cliente ......... 210
Tabla 97 Prueba unitaria del módulo de seguridad/inicio de sesión del lado del administrador
..................................................................................................................................................... 212
Tabla 98 Prueba unitaria del módulo de productos/nuevo producto ........................................ 213
Tabla 99 Prueba de unitaria del módulo de productos/lista de productos ................................ 215

29
Tabla 100 Prueba de unitaria del módulo de promociones/nuevo ............................................. 216
Tabla 101 Prueba de unitaria del módulo de promociones/establecer descuentos ................... 218
Tabla 102 Prueba de unitaria del módulo de promociones/lista de promociones ..................... 219
Tabla 103 Prueba de unitaria del módulo de categorías/listado de categorías.......................... 221
Tabla 104 Prueba de unitaria del módulo de pedidos ............................................................... 222
Tabla 105 Prueba de unitaria del módulo de inventario/ingreso .............................................. 224
Tabla 106 Prueba de unitaria del módulo de inventario/egreso ................................................ 225
Tabla 107 Prueba de unitaria del módulo seguridad/usuario .................................................... 227
Tabla 108 Prueba de unitaria del módulo de seguridad/administrador ..................................... 228
Tabla 109 Prueba de unitaria del módulo reportería/estadísticas ............................................. 230
Tabla 110 Prueba de unitaria del módulo reportería/reportes ................................................... 231
Tabla 111 Prueba de unitaria del módulo de chat en línea ....................................................... 233
Tabla 112 Prueba de unitaria del módulo de auditoria/usuarios ............................................... 234
Tabla 113 Prueba de unitaria del módulo de auditoria/administrador ...................................... 236
Tabla 114 Prueba de unitaria del módulo stock ........................................................................ 237
Tabla 115 Información de los expertos ..................................................................................... 252
Tabla 116 Escala de evaluación para Juicio de expertos .......................................................... 252
Tabla 117 Resultados de la validación de expertos ................................................................... 253
Tabla 118 Pregunta 1: ¿Qué tan satisfecho está con la forma de instalación que tiene la
aplicación web? ........................................................................................................................... 254
Tabla 119 ¿Qué tan satisfecho está con el diseño y funcionalidad de la aplicación web? ....... 255
Tabla 120 Pregunta 3: ¿Según su criterio que nivel de satisfacción tiene con respecto a la
usabilidad y modo de navegación entre pantallas de la aplicación web? ................................... 256

30
Tabla 121 Pregunta 4: ¿Qué tan satisfecho está con la forma de inicio de sesión y registro de
nuevos usuarios que posee la aplicación web? ........................................................................... 257
Tabla 122 Pregunta 5: ¿Qué tan satisfecho está con la forma visualización del contenido en
general que ofrece la aplicación web? ........................................................................................ 258
Tabla 123 Pregunta 6: ¿Qué tan satisfecho está con manera en que se encuentra distribuida la
información dentro de la aplicación web? .................................................................................. 259
Tabla 124 Pregunta 7: ¿Qué tan satisfecho están con la seguridad que ofrece la aplicación web?
..................................................................................................................................................... 260
Tabla 125 Pregunta 8: ¿Qué tan satisfecho está con la forma de visualización del dashboard que
ofrece la aplicación web en el módulo de reportes? ................................................................... 261
Tabla 126 Pregunta 9: ¿Qué tan satisfecho está con la rapidez y fluidez que ofrece la aplicación
web? ............................................................................................................................................ 262
Tabla 127 Pregunta 10: ¿Qué tan satisfecho está con la implementación del módulo del chat
online para la interacción entre usuarios? ................................................................................... 263
Tabla 128 Pregunta 11: ¿En general, que tan satisfecho está usted con la aplicación web? .... 264
Tabla 129 Cuadro de resultados del nivel de dificultad del proceso mejorado ......................... 266
Tabla 130 Comparativa de los tiempos del proceso actual y proceso mejorado ....................... 266
Tabla 131 Criterio de aceptación del módulo de seguridad ....................................................... 269
Tabla 132 Criterio de aceptación del módulo de productos....................................................... 270
Tabla 133 Criterio de aceptación del módulo de promociones .................................................. 271
Tabla 134 Criterio de aceptación del módulo de categoría ........................................................ 272
Tabla 135 Criterio de aceptación del módulo de pedidos .......................................................... 273
Tabla 136 Criterio de aceptación del módulo de inventario ...................................................... 274

31
Tabla 137 Criterio de aceptación del módulo de reportes ......................................................... 275
Tabla 138 Criterio de aceptación del módulo de stock .............................................................. 276
Tabla 139 Criterio de aceptación del módulo de auditoría ........................................................ 277
Tabla 140 Criterio de aceptación del módulo de chat ................................................................ 278

32
ÍNDICE DE FIGURAS
Figura 1 Diagrama de Ishikawa ................................................................................................... 50
Figura 2 Diagrama de flujo de proceso de venta ......................................................................... 65
Figura 3 Catálogo de Productos de la Farmacia Nicolás Bolívar ................................................ 67
Figura 4 Etapas de un prototipo ................................................................................................... 71
Figura 5 Diseño web responsive ................................................................................................. 78
Figura 6 Arquitectura de una PWA ............................................................................................ 81
Figura 7 Funcionamiento del Service Worker ............................................................................. 84
Figura 8 Análisis comparativo a nivel nacional: Visual Studio Code vs Notepad++ vs Sublime
Text vs Textpad............................................................................................................................. 90
Figura 9 Análisis comparativo a nivel global: Visual Studio Code vs Notepad++ vs Sublime
Text vs Textpad............................................................................................................................. 91
Figura 10 Arquitectura funcional de Node.js............................................................................... 93
Figura 11 Ranking de las tecnologías de desarrollo .................................................................... 95
Figura 12 Arquitectura funcional de Codeigniter ....................................................................... 97
Figura 13 Análisis comparativo a nivel nacional: CodeIgniter vs Yii vs CakePHP.................... 99
Figura 14 Análisis comparativo a nivel global: CodeIgniter vs Yii vs CakePHP ..................... 100
Figura 15 Análisis comparativo a nivel nacional: Bootstap vs Foundation vs Tailwind ......... 104
Figura 16 Análisis comparativo a nivel nacional: Bootstap vs Foundation vs Tailwind ......... 105
Figura 17 Análisis comparativo a nivel nacional: Vue.js vs AngulasJS vs Backbone.js .......... 108
Figura 18 Análisis comparativo a global: Vue.js vs AngulasJS vs Backbone.js ..................... 109
Figura 19 Arquitectura funcional de PHP................................................................................. 111
Figura 20 Análisis comparativo a nivel nacional: PHP vs Python vs Ruby vs Perl .................. 113
33
Figura 21 Análisis comparativo a nivel global: PHP vs Python vs Ruby vs Perl...................... 114
Figura 22 Ranking de los lenguajes de programación .............................................................. 117
Figura 23 Arquitectura de MySQL ........................................................................................... 119
Figura 24 Comparación a nivel nacional: MySQL vs Oracle DataBase vs MongoDB ............. 121
Figura 25 Comparación a nivel global: MySQL vs Oracle DataBase vs MongoDB ................ 122
Figura 26 Arquitectura MVC ..................................................................................................... 123
Figura 27 Organigrama de la farmacia Nicolás Bolívar ............................................................ 127
Figura 28 Cadena de valor de la farmacia Nicolás Bolívar ....................................................... 128
Figura 29 Matriz FODA ............................................................................................................ 129
Figura 30 Matriz PESTEL ......................................................................................................... 130
Figura 31 Género: Análisis gráfico del género elegido en las encuestas. ................................. 146
Figura 32 Edad: Análisis gráfico de edad elegida en las encuestas. ......................................... 147
Figura 33 Análisis gráfico de la pregunta número 1 de la encuesta ......................................... 148
Figura 35 Análisis gráfico de la pregunta número 3 de la encuesta .......................................... 150
Figura 42 Análisis gráfico de la pregunta número 10 de la encuesta ........................................ 157
Figura 43 Análisis gráfico de la pregunta número 11 de la encuesta ....................................... 158

34
Figura 48 Fases de la metodología XP ...................................................................................... 189
Figura 49 Página principal ......................................................................................................... 202
Figura 50 Inicio de sesión – Usuario cliente.............................................................................. 203
Figura 51 Inicio de sesión - Usuario administrador ................................................................... 203
Figura 52 Módulo de reporte ..................................................................................................... 204
Figura 53 Módulo de chat .......................................................................................................... 204
Figura 54 Ejemplo del código del módulo de seguridad para inicio de sesión ......................... 206
Figura 55 Ejemplo del código para concurrencia de intentos de inicio de sesión ..................... 206
Figura 56 Ejemplo del código para imprimir en PDF la tabla de reportes ............................... 207
Figura 57 Ejemplo del código para generar factura .................................................................. 207
Figura 58 Ejemplo del código que instala el service worker en el navegador.......................... 208
Figura 59 Ejemplo del código de la función que permite crear un nuevo producto ................. 208
Figura 60 Reporte del módulo de seguridad/inicio de sesión del lado del cliente ................... 209
Figura 61 Reporte del módulo de seguridad/inicio de sesión del lado del administrador ........ 211
Figura 62 Reporte del módulo de productos/nuevo producto.................................................... 212
Figura 63 Reporte del módulo de productos/lista de productos ............................................... 214
Figura 64 Reporte del módulo de promociones/nuevo .............................................................. 215
Figura 65 Reporte del módulo de promociones/establecer descuentos .................................... 217
Figura 66 Reporte del módulo de promociones/lista de promociones....................................... 218

35
Figura 67 Reporte del módulo de categorías/listado de categorías .......................................... 220
Figura 68 Reporte de módulo de pedidos ................................................................................. 221
Figura 69 Reporte del módulo de inventario/ingreso ................................................................ 223
Figura 70 Reporte del módulo de inventario/egreso ................................................................. 224
Figura 71 Reporte del módulo de seguridad/usuario ................................................................ 226
Figura 72 Reporte del módulo de seguridad/administrador...................................................... 227
Figura 73 Reporte del módulo de reportería/estadística ........................................................... 229
Figura 74 Reporte del módulo de reportería/reportes ............................................................... 230
Figura 75 Reporte del módulo de chat en línea ........................................................................ 232
Figura 76 Reporte del módulo de auditoria/usuarios ................................................................ 233
Figura 77 Reporte del módulo de auditoria/administrador ........................................................ 235
Figura 78 Reporte del módulo de stock .................................................................................... 236
Figura 79 Funcionalidad del módulo de pedidos del lado del cliente ....................................... 238
Figura 80 Funcionalidad del módulo de pedidos del lado del administrador ........................... 238
Figura 81 Funcionalidad del módulo de stock .......................................................................... 239
Figura 82 Funcionalidad del módulo de stock (visualización de cantidad agregada al inventario)
..................................................................................................................................................... 240
Figura 83 Funcionalidad del módulo de chat de lado del cliente ............................................. 240
Figura 84 Funcionalidad del módulo de chat de lado del administrador .................................. 241
Figura 85 Pantalla principal ...................................................................................................... 246
Figura 86 Inicio de sesión del cliente ....................................................................................... 247
Figura 87 Pantalla de inicio de sesión del administrador ......................................................... 248
Figura 88 Pantalla principal de la aplicación para el administrador ......................................... 249

36
Figura 89 Pantalla de reportes de la aplicación web ................................................................. 250
Figura 90 Arquitectura de la aplicación web progresiva ........................................................... 251
Figura 100 Análisis gráfico de la pregunta número 10 de la encuesta ..................................... 263
Figura 101 Análisis gráfico de la pregunta número 11 de la encuesta ..................................... 264
Figura 102 Tiempo del proceso de gestión de ventas actual y mejorado ................................. 267
37
ABREVIATURAS
API Interfaz de Programación de Aplicaciones (Application
Programming Interface)
CC.MM.FF Facultad de Ciencias Matemáticas y Físicas
CSS Hojas de Estilo en Cascada (Cascading Style Sheets)
CSRF Falsificación de Petición en Sitios Cruzados (Cross Site Request
Forgery)
DNS Sistema de Nombres de Dominio (Domain Name System)
HTML Lenguaje de Marcas de Hyper Texto (HyperText Markup
Language)
HTTP Protocolo de transferencia de Hyper Texto (Hypertext Transfer
Protocol)
HTTPS Protocolo Segurp de transferencia de Hyper Texto (HyperText
Transfer Protocol Secure)
Ing. Ingeniero
IT Tecnología de la Información (Information Technology)
ITPA Automatización de Procesos IT (IT Process Automation)
JSON Notación de Objeto de JavaScript (JavaScript Object Notation)
LSI. Licenciado en Sistemas de Información
M.Sc. Máster
MVC Modelo Vista Controlador (Model View Controller)
NPM Node Package Manager
PHP Hypertext PreProcessor

38
PWA Aplicación Web Progresiva (Progressive Web App)
RPA Automatización Robótica de Procesos (Robotics Process
Automation)
SEO Optimización de Motores de Búsqueda (Search Engine
Optimization)
SRI Servicio de Rentas Internas
SQL Lenguaje de Consulta Estructurada (Structured Query Language)
SSL Capa de Conexión Segura (Secure Sockets Layer)
TCP Protocolo de control de transmisión (Transmission Control
Protocol)
UG Universidad de Guayaquil
URL Localizador Uniforme de Rescursos (Uniform Resource Locator)
W3C Consorcio World Wide Web (World Wide Web Consortium)
XP Programación Extrema (Extreme Programing)
XSS Secuencia de Comandos en Sitios Cruzados (Cross Site Scripting)

39
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
40
BOLÍVAR
Autores: Diego Cristoffer Mero Albarracin

C.I. N° 0931519789
C.I. N° 0940514193
RESUMEN
Por medio de un análisis exhaustivo de información, el cual se obtuvo mediante entrevistas y

reuniones realizadas con el propietario de la farmacia Nicolás Bolívar, se logró encontrar la
problemática que posee hoy en día el proceso de gestión de ventas, que es el nivel de dificultad
elevado para realizar las ventas de manera organizada y oportuna. Por este motivo se planteó el
desarrollo de un prototipo de aplicación web progresiva (PWA), que permitirá la automatización
de dichos procesos, además, servirá como un medio de comunicación entre los clientes y personal
de la empresa. Para minimizar los costos de inversión en el desarrollo de este software, se utilizó
el framework CodeIgniter, el framework Vue.js, Node.js, PHP, las cuales son herramientas open
source. Para la elaboración del proyecto se usó la Metodología de Marco Lógico que permitió
identificar el problema principal juntos con sus causas y consecuencias. Además, para gestión de
proyecto se utilizó la metodología SCRUM y para el desarrollo del software la metodología XP,
las que permitieron una correcta planificación de tareas y el desarrollo del software de una manera
adecuada. Como resultado se obtuvo una mejora en general del proceso de gestión de ventas en un
61,48% cumpliendo con el objetivo, brindando mayor competitividad y reducción en el nivel de
dificultad y tiempos para llevar a cabo dichos procesos.
Palabras clave: Aplicación web progresiva, PWA, prototipo, gestión de ventas, open source.
41
BOLÍVAR
Autores: Diego Cristoffer Mero Albarracin

C.I. N° 0931519789
C.I. N° 0940514193
ABSTRACT
Through an exhaustive analysis of information, which was obtained through interviews and
meetings with the owner of the Nicolás Bolívar pharmacy, it was possible to find the problem that
the sales management process has today, which is the level of difficulty elevated to make sales in
an organized and timely manner. For this reason, the development of a prototype of a progressive
web application (PWA) was proposed, which will allow the automation of these processes, in
addition, it will serve as a means of communication between customers and company staff. To
minimize investment costs in the development of this software, the CodeIgniter framework, the
Vue.js framework, Node.js, PHP, which are open source tools, were used. For the development of
the project, the Logical Framework Methodology was used, which allowed the main problem to
be identified together with its causes and consequences. In addition, for project management, the
SCRUM methodology was used and the XP methodology for software development, which
allowed a correct planning of tasks and the development of the software in an adequate way. As a
result, a general improvement in the sales management process was obtained by 61.48%,
complying with the objective, providing greater competitiveness and a reduction in the level of
difficulty and times to carry out said processes.
Key words: Progressive web application, PWA, prototype, sales management, open source.
42
INTRODUCCIÓN
Actualmente, en la ciudad de Guayaquil el impacto económico, político y social que se
vive por la pandemia causada por el Coronavirus (COVID-19) ha sido de suma relevancia. Las
empresas medianas y pequeñas han sido afectadas, en sectores como por ejemplo el turismo,
servicios de comercio, de salud, entre otros. Muchas de las empresas han optado por emplear la
tecnología para bríndales a los clientes la facilidad de acceder a un servicio web que les permita
ver información de interés y realizar compras de manera segura y confiable.
La farmacia Nicolás Bolívar actualmente no cuenta con un servicio web que le permita
gestionar los procesos de ventas, lo que ocasiona dificultades y desorganización al momento de
realizar las tareas, que básicamente consisten en el ingreso de productos, promociones,
visualización de pedidos y ventas realizadas. Por tanto, surge la necesidad de la organización de
contar con una aplicación web que le facilite gestionar los procesos de ventas.
Como consecuencia de las necesidades que presenta farmacia Nicolás Bolívar se propone
el desarrollo de un prototipo de aplicación web progresiva con el propósito de gestionar los
procesos de ventas logrando así disminuir el nivel de dificultad y que además sirva como un medio
de comunicación entre el personal de la farmacia, los clientes y potenciales clientes, los cuales son
los beneficiados del presente trabajo.
El presente trabajo propone no solo brindar una aplicación web, si no que mediante el uso
de la tecnología PWA, la aplicación podrá ofrecer la posibilidad de acceder desde cualquier
dispositivo móvil logrando una experiencia similar a la de una app nativa.
La metodología investigación utilizada en el presente trabajo de titulación se basa en el uso
de la metodología descriptiva y exploratoria que brinda una visión más clara y amplia del objeto
de estudio. Para la formulación del proyecto se aplicó la Metodología de Marco Lógico que permite
43
conocer los problemas, así como sus causas y consecuencias. Para la gestión del proyecto se
empleó la metodología ágil SCRUM y para el desarrollo del software la metodología XP (Extreme
Programming), con el propósito de lograr una correcta planificación de las tareas realizadas
durante el desarrollo del proyecto, permitiendo también el desarrollo del software de la manera
más adecuada.
Las herramientas utilizadas para el desarrollo del proyecto fueron seleccionadas tras
realizar un análisis que permitió determinar los beneficios que ofrecen para que se adapten a las
necesidades tecnologías para el desarrollo, entre estas herramientas está el framework Codeigniter
3.1 reconocido por ofrecer un alto rendimiento y fácil aprendizaje, el lenguaje de programación
PHP 7.4.16 usado principalmente para el desarrollo de aplicaciones basadas en la web y el gestor
de base de datos MySQL 8.1 que brinda un mayor rendimiento, las herramientas mencionadas son
open source por lo que no requiere realizar ningún tipo de inversión.
El presente trabajo de titulación está estructurado por 4 capítulos, los cuales de manera
breve se describen en siguiente apartado:
En el Capítulo I se presentan el planteamiento del problema, la descripción de la situación
del problema que detalla donde encuentra ubicado el problema, la situación nudos críticos, la
delimitación del problema y la evaluación de este, la matriz causas y consecuencias, formulación
del problema, objetivos, alcance, justificación e importancia y limitantes del estudio.
En el Capítulo II se detalla el marco teórico donde podemos encontrar los antecedentes del
estudio de proyectos que sirvieron como base para realizar este trabajo de titulación, la
fundamentación teórica donde se describen los aspectos técnicos y tecnológicos a utilizar, la
pregunta científica a contestar que dará solución a la problemática y por último las definiciones
conceptuales.
44
En el Capítulo III se encuentra la propuesta tecnológica del presente trabajo, el análisis de
factibilidad y las metodologías de investigación utilizada, así como la metodología de gestión y de
desarrollo de software, los beneficiaros directos e indirectos, entregables del proyecto, la
propuesta, los criterios de validación y los resultados.
En el Capítulo IV se presentan las conclusiones y recomendaciones del proyecto, los
criterios de aceptación del proyecto, conclusiones, recomendaciones de mejoras que permitan
realizar trabajos futuros que sirvan de ayuda para la organización.

45
CAPÍTULO I
PLANTEAMIENTO DEL PROBLEMA
Descripción de la situación problemática
Ubicación del problema en un contexto
El impacto económico, político y social que se vive en la actualidad a nivel global causada
por la pandemia del Coronavirus (COVID-19) ha sido de suma relevancia. Las medianas y
pequeñas empresas se han visto afectadas en varios sectores como en el turismo, servicios de
comercio, servicios de salud, entre otros.
En el Ecuador el impacto que ha causado la pandemia a nivel empresarial ha provocado
que varias empresas decidan cerrar temporal e incluso permanentemente al no poder realizar con
normalidad sus actividades laborales. En el cantón Guayaquil algunas empresas y negocios que
ofrecían sus productos por catálogo se han visto en la necesidad de implementar una plataforma
virtual para que los clientes y potenciales clientes interesados en sus productos puedan realizar sus
compras de forma digital.
Por lo tanto, al realizarse un estudio se puede determinar que, en varias farmacias, de
comunidad, pequeñas o medianas no disponen de una aplicación web para la venta de productos
farmacéuticos. Resulta de vital importancia contar con este recurso para obtener un aumento de
ventas y un mejor manejo administrativo en la empresa.

46
Actualmente, la farmacia “Nicolás Bolívar” ubicada en el sector “Pájaro azul MZ E1 sol.
3, circuito Juan Montalvo” de la ciudad de Guayaquil como se aprecia en el Anexo 2, no cuenta
con un ningún sitio o aplicación web que le permita agilizar procesos referentes a ventas de
productos, esto causa que se deba realizar todos los trámites de ventas de forma manual y directa
con el cliente dentro del establecimiento, tareas tales como; el ingreso y despacho de pedidos,
ingreso de productos, consulta y actualización de stock, promociones y sugerencias, motivo por el
cual la empresa ha tenido dificultades para realizar una venta ágil y oportuna a sus clientes, como
consecuencia algunos de estos clientes han tenido que trasladarse a otros establecimientos, de esta
manera perdiendo gran número de clientes y disminuyendo sus ingresos por ventas.
El uso de un sitio o aplicación web que se adapte a cualquier entorno de trabajo sin
importar la plataforma en que esta se te utilizando, daría como resultado un gran soporte a la
producción de los productos o servicios, pero más específicamente en la gestión de ventas que son
el pilar fundamental en el desarrollo de cualquier empresa.
Por lo anteriormente expuesto se tiene la posibilidad de mejorar la calidad del servicio que
ofrece la farmacia “Nicolás Bolívar” y aumentar sus ventas, realizando una aplicación web
progresiva para la gestión de las ventas, la cual permita sistematizar y agilizar los procesos que
este conlleva, también se logrará minimizar el error humano y la sobrecarga de trabajo que pudiera
surgir durante el desarrollo de las labores.
Situación conflicto nudos críticos
La situación conflictiva del presente trabajo de titulación surge de una problemática de
suma relevancia tanto económica como social, por un lado, la situación que se vive hoy en día ha
causado una paralización parcial al sector comercial, la restricción dictaminada a nivel nacional
ha causado que muchas empresa pequeñas y medianas e incluso las grandes empresas tenga que
47
reinventarse por factores circunstanciales evidentes, buscando comercializar y vender sus
productos a través de Internet.
Ante la carencia de una aplicación de ambiente web ha causado retraso en los procesos,
pérdida de información y desorganización al momento de llevar el respectivo control de las ventas
realizadas en la farmacia, ya que, todos esos procesos se los realiza de manera manual, lo cual
origina errores en el control de los recursos. La falta de organización en las actividades que se
realizan para efectuar una venta ha provocado inconvenientes tanto al personal de la farmacia
como a los clientes.
Delimitación del problema
A continuación, en la Tabla 1 se describe los aspectos principales del presente proyecto.
Tabla 1
Delimitación del problema
Delimitador Descripción
Campo Tecnológico
Área Desarrollo de Software
Aspecto Software de Ambiente Web
Desarrollo de un prototipo de aplicación web progresiva (PWA)
Tema para mejorar el proceso de gestión de ventas en la farmacia
Nicolás Bolívar.
Nota: En la Tabla 1 se plantean los términos de análisis aplicados para la delimitación del problema conforme al
contexto donde se desarrolla la problemática. Elaboración y fuente propia.
Evaluación del problema
Los aspectos generales de evaluación son:
 Delimitado: El trabajo se desarrolla en la farmacia Nicolás Bolívar, cuyo enfoque está
en mejorar la sistematización y automatización de los procesos de gestión de ventas,
aplicando módulos que aseguren el correcto funcionamiento y desempeño de la

48
aplicación web. Los módulos están compuestos por: módulo de seguridad, productos,
promociones, compra, inventario, clientes, reportes y de chat.
 Claro: La farmacia no cuenta con recursos económicos que le permitan adquirir
actualizaciones de equipos tecnológicos, o una aplicación web que le permita
sistematizar y automatizar los procesos de su gestión de ventas.
 Evidente: Al no poseer un sistema que le permita realizar debidamente sus funciones,
provoca descoordinación, tendencia a cometer errores lo que causa sobrecarga de
trabajo y retraso en los procesos que realiza la empresa.
 Original: El proyecto se considera original porque busca brindar una solución a una
microempresa por los inconvenientes que se han suscitados por la emergencia sanitaria
en la actualidad a causa del COVID-19, otorgando un servicio personalizado que solo
las grandes empresas poseen.
 Factible: Puede determinarse que el presente trabajo de titulación es factible porque se
cuenta con la carta de autorización de la empresa, la cual se puede observar en el Anexo
3. Por otra parte, este proyecto está desarrollado como aplicación web progresiva, lo
que quiere decir, que los usuarios tendrán acceso a este recurso desde un computador o
dispositivo móvil y está desarrollado por herramientas Open Source, lo cual reducirá
significativamente el costo de inversión en el desarrollo del proyecto.
 Identifica los productos esperados: Se considera que el desarrollo del proyecto
contribuirá con la problemática en cuestión, obteniendo un resultado realmente útil para
el funcionamiento y crecimiento económico de la microempresa.

49
Causas y consecuencias del problema
Del levantamiento de la información realizado surgió del problema que posee la empresa
que es el nivel de dificultad elevado para realizar las ventas de manera organizada y oportuna a la
clientela en la farmacia Nicolás Bolívar. En base a dicho problema, analizando y aplicando la
Metodología de Marco Lógico (MML), se logró determinar 10 causas y 10 consecuencias que
tienen los procesos manuales actuales y que se ejecutan en la farmacia Nicolás Bolívar. A
continuación, en la Tabla 2 se presenta la matriz causas y consecuencias.
Tabla 2
Matriz de causas y consecuencias del problema
Causas Consecuencias
E1. Las personas evitan acercarse al
C1. Las ventas se realizan de manera
establecimiento debido al tiempo de espera
tradicional dentro del establecimiento.
en la atención.
C2. Ingreso de datos de manera manual de los
E2. Duplicidad de información y la
usuarios(clientes) y productos, utilizando
integridad de los datos es afectada.
cuadernos y herramientas de ofimática.
C3. Limitada información de ciertos productos
E3. Desinformación sobre el empleo de
farmacéuticos en la presentación y modo de
medicamentos y riesgo de automedicación.
empleo.
C4. Inexistencia de plataforma tecnológica E4. Incomodidad y lentitud para realizar las
dedicada a la gestión de ventas. ventas de productos.
C5. Restricción del número de personas en el
E5. Reducción significativa en las ventas.
establecimiento.
E6. Desactualización tecnológica, omisión
C6. Resistencia al cambio tecnológico. de nuevos métodos y procesos que permiten
brindar un mejor servicio.
C7. Déficit de personal en la empresa para E7. Sobrecarga de trabajo y dificultad para
realizar las tareas asignadas. brindar un buen servicio a los clientes.
C8. Monitoreo y control ineficiente para E8. Tendencia a cometer errores en la toma
supervisar las ventas. de decisiones.
E9. Dificultad para la movilización de las
C9. Presencia de emergencia sanitaria.
personas.
E10. Tiempo elevado en la búsqueda de
C10. Procesos no sistematizados.
información y generación de reportes.
Nota: En la presente tabla se muestra las causas y consecuencias localizadas en la farmacia Nicolás Bolívar y
analizadas mediante la elaboración de diagrama de Causa-Efecto. Elaboración y fuente propia.
50
A continuación, en la Figura 1 se presenta el diagrama de Ishikawa o espina de pescado,
el diagrama fue elaborado en base del análisis de la aplicación de la Metodología de Marco Lógico
(MML), el cual fue realizado basándose del problema que tiene la farmacia Nicolás Bolívar, que
es el nivel de dificultad elevado para realizar las ventas de manera organizada y oportuna a la
clientela en la farmacia Nicolás Bolívar.
Figura 1
Diagrama de Ishikawa
Nota: Se establece el diagrama de Causa-Efecto con respecto a las necesidades de la farmacia Nicolás Bolívar, el cual
fue elaborado basándose en la información previamente adquirida. Elaboración y fuente propia.
Para el presente proyecto se ha aplicado en su etapa de formulación la Metodología del
Marco Lógico que es una herramienta de gestión de proyecto que nos permite facilitar los procesos
de conceptualización, diseños, evaluación y ejecución del proyecto. A continuación, en el anexo 4
se pueden apreciar las fases de la Metodología del Marco Lógico (MML), que son: fase 1 Diagrama
de Causa-Efecto, fase 2, Lista de Involucrado y diagrama de poder-interés, fase 3 Análisis del

51
Problema, fase 4 Análisis de Objetivos, fase 5 Análisis de Alternativas, fase 6 Diseño de
Estrategias, y fase 7 Matriz de Marco Lógico.
Formulación del problema
Para expresar la problemática de manera más clara y concisa, se plantea a continuación la
siguiente interrogante:
¿Cómo contribuye el desarrollo de una aplicación web progresiva para la gestión de ventas
de productos farmacéuticos, en el nivel de dificultad elevado para la realización de las ventas de
manera organizada y oportuna a la clientela en la farmacia Nicolás Bolívar?
Objetivos del proyecto
Objetivo general
Desarrollar un prototipo de aplicación web progresiva (PWA) con soporte en tiempo real
empleando herramientas Open Source que permita mejorar y agilizar el proceso de gestión de
ventas de productos farmacéuticos en la farmacia Nicolás Bolívar.
Objetivos específicos
 Identificar los requerimientos funcionales y no funcionales de la empresa para la
sistematización del proceso de gestión de ventas de productos farmacéuticos en la
farmacia Nicolás Bolívar.
 Analizar el levantamiento de información del proceso de gestión de ventas de productos
farmacéuticos para la definición del proceso dirigido a la farmacia Nicolás Bolívar
 Diseñar el modelo de base de datos e interfaces de usuario amigables para la validación
con los usuarios finales asociados al proceso de gestión de ventas en la farmacia Nicolás
52
Bolívar.
 Desarrollar los módulos de seguridad, módulo de productos, módulo de promociones,
módulo de categoría, módulo de pedidos, módulo de reportes, módulo de inventario,
módulo de stock, módulo de auditoría y módulo de chat, de la aplicación web
progresiva Open Source para la gestión de ventas de la farmacia Nicolás Bolívar.
 Evaluar la aplicación web progresiva Open Source con los usuarios finales a través de
entrevistas a profundidad y juicios de expertos, para la determinación de los criterios
de aceptación, calidad y pertinencia del producto final.
Alcance del problema
El presente tema de trabajo de titulación tiene como propósito el desarrollo de un prototipo
de aplicación web progresiva (PWA) que permita la sistematización y automatización de los
procesos de gestión de ventas de productos farmacéuticos vía online y que brinde además un
soporte en tiempo real mediante la implementación de un módulo de chat, mediante el uso de los
lenguajes de programación PHP v7 y JavaScript, los Frameworks CodeIgniter  v3.1 para la capa
del Back-End, Vue.js v26 y Bootstrap v4 para la capa del Front-End con el entorno de trabajo
Visual Estudio Code v1.57, y el gestor de base de datos MySQL v8.1.
Para la identificación de los requerimientos funcionales y no funcionales asociados al
proceso de gestión de ventas de la farmacia Nicolás Bolívar se aplicará entrevista y encuesta y se
analizará los datos de la información que se obtuvieron en las reuniones realizadas con el
propietario de la farmacia.
Para realizar el análisis del levantamiento de información se aplicará una matriz de
priorización para analizar cada uno de los requerimientos funcionales y no funcionales obtenidos
en la etapa anterior.
53
Se realizará un modelado de bases de datos para ajustar las necesidades de la aplicación a
utilizarse, como gestor de base de datos se utilizará MySQL v8.1 ya que soporta una gran cantidad
de datos, tiene bajo probabilidad de corrupción de datos, es adaptable para cualquier sistema
operativo, soporta gran cantidad de datos, ofrece servicio de seguridad encriptado. Se realizará
también las interfaces de usuarios amigables para lograr que los usuarios tengan una fácil acceso
y manejo de los procesos y actividades de forma organizada.
Se realizarán los respectivos módulos que aseguren el correcto funcionamiento y
desempeño de la aplicación, tales módulos están compuestos por: módulo de seguridad, módulo
de productos, módulo de promociones, módulo de clientes, módulo de pedidos, módulo de
reportes, módulo de chat. Para el desarrollo del prototipo se considerarán las siguientes
herramientas: Frameworks CodeIgniter para la capa del Back-End, Vue.js y Bootstrap para la capa
del Front-End para el desarrollo del proyecto la herramienta Visual Estudio Code, la tecnología
de desarrollo AJAX, el entorno de ejecución Node.js para el desarrollo del módulo de chat y el
gestor de base de datos MySQL.
Para el proceso de evaluación del proyecto se realizarán las respectivas pruebas de la
aplicación web para que cumpla con todos requerimientos del usuario y administrador. Se
aplicarán juicio de experto, entrevista a profundidad para la evaluación de producto.
El presente trabajo de titulación tiene como exclusión el acceso, manipulación, de datos
personales, a agentes externos. No se emitirá facturación electrónica, no tendrá convenio con el
SRI.
Los roles asignados para el presente proyecto son usuario administrador y usuario cliente.
Los módulos que tendrá el presente trabajo de titulación son:
 Módulo de seguridad: En este módulo incluirá una pantalla de inicio de sesión, se

54
solicitará usuario y clave para el proceso de autenticación. Permitirá hacer la
recuperación de contraseña. Temas de caducidad de contraseñas y bloqueos por
ocurrencia de contraseña.
 Módulo de productos: En este módulo se ingresará, clasificar, ordenar los distintos
tipos de productos farmacéuticos o no farmacéuticos que se encuentra en stock en la
farmacia Nicolás Bolívar por ejemplo vitaminas, artículos de higiene, artículos de
belleza, etc.
 Módulo de promociones: En este módulo el administrador ingresara, eliminara los
productos farmacéuticos, o no farmacéuticos que se encuentran en promoción en un
periodo de tiempo determinado.
 Módulo de categoría: En este módulo el usuario administrador podrá agregar,
modificar, activar o desactivar las categorías de productos con las que cuenta la
farmacia.
 Módulo de inventario: En este módulo el usuario administrador podrá visualizar los
movimientos de ingresos y egresos en el inventario. Adicionalmente, se podrá
visualizar la cantidad vendida y cantidad disponible para cada producto existente en el
stock.
 Módulo de stock: En este módulo el usuario administrador podrá seleccionar unos de
los productos disponibles e ingresar la cantidad que desee en el inventario, la cual se
sumará a la cantidad existente de dicho producto. Así mismo se podrá modificar la
cantidad ingresada o eliminarla en caso de que requiera.
 Módulo de pedidos: El administrador tendrá acceso al listado de los pedidos realizados
por los clientes, donde podrá buscar los pedidos por número de orden y también tendrá
55
la opción de confirmar o cancelar los pedidos.
 Módulo de reportes: En este módulo incluye un dashboard, se podrá observar los
reportes mensuales de ganancias por ventas que ha tenido la farmacia mediante cuadros
estadísticos. Los parámetros son: ventas mensuales, clientes, ventas virtuales y ventas
tradicionales.
 Módulo de auditoría: En este módulo el usuario administrador podrá dar seguimiento
a la interacción que es el inicio de sesión que tienen los usuarios tantos clientes como
administrador en la aplicación web.
 Módulo de chat: El usuario cliente se podrá contactar con un empleado de la farmacia
para realizar cualquier consulta o inquietud que tenga sobre algún medicamento o
sintomatología que le esté causando molestia.
Justificación e importancia
Hoy en día, la tecnología juega un papel muy importante, ya que es la clave para el
progreso en nuestra sociedad, ha tenido un impacto que ha afectado de manera positiva y negativa,
pero que se ha convertido en algo imprescindible para todos, su función principal es crear
actualización de herramientas y accesorios que se adapten a los usuarios con el propósito de
facilitar y disminuir esfuerzo especialmente el tiempo en nuestra vida diaria.
Las Progressive Web Apps (PWA) permiten que una aplicación web se comporte como
una app nativa dentro de un dispositivo móvil, esto quiere decir que se podrá instalar en los
dispositivos móviles y también en computadoras de escritorio sin la necesidad de subirlos a las
tiendas como PlayStore o Microsoft Store.
Actualmente, esta tecnología está en tendencia y se ha estado posicionando de a poco en
el país ya que resulta de gran utilidad porque permite que las organizaciones puedan obtener mejor
56
desempeño ya sea de carácter empresarial, salud o educativo. Esta aplicación web será de mucha
utilidad para mejorar el funcionamiento de la farmacia Nicolás Bolívar en lo que respecta al área
de ventas ya que este permitirá automatizar el proceso y reducirá el tiempo para llevar a cabo las
ventas.
El desarrollo de este proyecto se lo realizará con el fin de mejorar la gestión de ventas y
satisfacer las necesidades del cliente de la farmacia Nicolás Bolívar, ya que por el motivo de la
pandemia del COVID-19 se busca evitar aglomeraciones que pueden derivarse en futuros
contagios del virus con el fin de preservar, cuidar la salud y el bienestar de las personas.
Con el desarrollo de la aplicación web progresiva se espera satisfacer las necesidades de
cada uno de los clientes. La farmacia Nicolás Bolívar dará a conocer los productos que están en
stock con detalle de cada uno de ellos y las promociones vigentes. Con el fácil manejo de la
aplicación web progresiva, los clientes cuando vayan a realizar sus compras las harán de una
manera cómoda y sencilla, sin inconveniente alguno.
Este proyecto es factible porque va a ser desarrollado como aplicación web progresiva, lo
cual quiere decir que los usuarios tendrán acceso a este recurso desde un computador o dispositivo
móvil lo que va a permitir al usuario que sin importar donde se encuentre podrá acceder a la
aplicación con toda comodidad y realizar sus compras.
Este proyecto está desarrollado por herramientas Open Source tales como: Frameworks
CodeIgniter para la capa del Back-End, Vue.js y Bootstrap para la capa del Front-End con el
entorno de trabajo Visual Estudio Code, Node.js y el gestor de base de datos MySQL. El uso de
estas herramientas de software libre reduce considerablemente el costo de inversión en el
desarrollo del proyecto.

57
Limitaciones del estudio
El desarrollo del prototipo de aplicación web progresiva (PWA) para la farmacia Nicolás
Bolívar tiene definidos 2 roles de usuarios que son: usuario administrador y usuario cliente, los
cuales fueron asignados diversos procesos tomando en cuenta diferentes aspectos para su correcto
funcionamiento.
El equipo de desarrollo tiene limitación de acceso a ciertas áreas específicas del
establecimiento, manipulación de datos, manipulación de bienes, o manejo de rubro dentro de la
empresa.
La aplicación web tiene limitación de acceso a manipulación de datos personales y datos
financieros ya administrativos de la organización. No se emitirá facturación electrónica, no tendrá
convenio con el SRI. Cabe mencionar que el prototipo funcionará en su totalidad en los sistemas
operativos Windows para dispositivos de escritorio y Android para dispositivos móviles, de usar
otros sistemas operativos las funcionalidades de la aplicación podrían verse limitadas.
Las herramientas escogidas para el desarrollo del proyecto son Open Source, lo que reduce
el costo de inversión del propietario de la organización para desarrollo del proyecto.
El desarrollo del prototipo de la aplicación web estará alojado en un hosting, el cual fue
adquirido por parte de los desarrolladores del proyecto, el paquete que se adquirió tiene como
limitación 1 año de servicio y tiene alojamiento para 2 base de datos.

58
CAPÍTULO II
MARCO TEÓRICO
Antecedentes del estudio
A continuación, se presenta algunos proyectos de titulación similares, basados en
aplicaciones web progresivas (PWA), los cuales serán utilizados como guía para el desarrollo de
este trabajo de titulación.
La información de eventos académicos que son presentados en documentos impresos no
siempre tiene la información completa o relevantes. Los autores (Paternina et al., 2019),
propusieron el “Diseño de una aplicación web progresiva para la gestión de eventos académicos
en la Licenciatura en Informática”. Con el uso y manejo de la metodología LIDERAR que adapta
e integran las metodologías SCRUM y XP propusieron formas de trabajos colaborativos en el
grupo. Por medio de entrevistas y el uso de tecnología lograron identificar la principal
problemática de los eventos académicos. Modelando las características del sistema web progresiva
logró desarrollar el prototipo funcional el que les permitirá mejorar la gestión de eventos
académicos.
59
En la actualidad, la tecnología juega un papel de gran importancia dado que es el motor
fundamental para el progreso de la sociedad. El autor (Paucar, 2020) sugiere que con el desarrollo
de “Prototipo de un sistema web progresiva para automatizar la gestión de ventas y pedidos de
mariscos de una microempresa de la ciudad de Guayaquil”, permitirá automatizar las compras y
ventas de mariscos de manera online y así impulsar el crecimiento económico de la microempresa.
Con el uso de metodología tradicional se desarrolló el proyecto de una manera ágil y ordenada.
Las encuestas que se realizaron dieron como resultado un 79% de los clientes les parece útil el
sistema web, y un 73% determinó que es probable que el consumo aumente, lo que conllevaría a
la gestación de un desarrollo económico de la microempresa.
La educación se ha visto afectado por la restricción sanitaria causada por el COVID-19, las
clases impartidas por los docentes fueron cambiadas de manera virtual, muchas instituciones
educativas no se encuentran preparados para este cambio. El autor (Tenorio, 2020), propone el
“Desarrollo de una aplicación web progresiva (PWA) e-learning para el nivel de educación básica
en unidades educativas con gamificación y chatbot”, que tiene como objetivo el transmitir
conocimientos y enseñanzas por medio virtual. Se utilizó la metodología de desarrollo de software
XP, ya que cuenta con las etapas necesarios para el desarrollo de la aplicación. Dando como
resultado una aplicación web progresiva para uso educativo que logró cubrir las necesidades de
los estudiantes y docentes, cuenta con un chatbot donde los padres de familia se podrán poner en
contacto con los docentes.
Las tiendas virtuales son un tipo de comercio donde las empresas utilizan el internet como
su medio principal para realizar las transacciones de compras y ventas. Los autores (Zambrano &
Buenaño, 2021) indicaron que el “desarrollo de una tienda virtual Progressive Web Apps (PWA)
para gestionar las ventas de los productos en la empresa Garcés Torres (GT) Jean’s Cupido”.
60
Presentado en la Universidad Técnica de Ambato, en Ecuador. Permitirá el mejoramiento de la
gestión de las ventas en la empresa GT Jean’s Cupido. La metodología XP se implementó, ya que
permite mejorar los tiempos de entrega o cambios que se realizan. El resultado que se logró es el
cumplimiento de forma satisfactoria de la aplicación web, dónde todos los procesos fueron
evaluados y se obtuvieron resultados exitosos desde el diseño hasta la puesta en marcha de la
aplicación.
En la actualidad la tecnología es el motor fundamental para el desarrollo económico de la
sociedad. Los autores (Falero, 2016) indicó que una “Aplicación web móvil multiplataforma
utilizando pago electrónico para apoyar el proceso de venta de comida por delivery en la Cafetería
Tortilandia”. Tiene como objetivo el desarrollo e implementación de una aplicación web móvil
que mejorará la gestión de ventas de comida en la cafetería Tortilandia. La metodología XP se
utilizó para la elaboración de este proyecto, ya que engloban conjuntos de reglas y también
prácticas. Después de haber hecho pruebas dio como resultado, mayores pedidos en un menor
tiempo, disminución en tiempo de los reportes de las ventas, utilizando el método SERVQUAL se
dio a conocer que el 78.33% de los clientes están satisfecho con la aplicación web móvil.
El Internet de las cosas (IoT) se utiliza para mostrar información útil y actualizada. La
información relacionada con los dispositivos de IoT se muestra comúnmente en los tableros con
fines de monitoreo y control. (Mena et al., 2019) propone con el artículo científico de “A
Progressive Web Application Based on Microservices Combining Geospatial Data and the Internet
of Things”. Para ayudar a los usuarios en la adquisición de datos geoespaciales e información
relacionada con las IoT, se propuso el uso de una arquitectura de software organizada basada en
microservicios y microinterfaces en una aplicación web progresiva (PWA).

61
Fundamentación teórica
En la siguiente sección se detallan algunos conceptos o definiciones relacionados al
proceso de gestión de ventas y de las herramientas que se usarán para el desarrollo del presente
proyecto de titulación, entre los cuales se mencionan: los procesos de gestión de ventas,
automatización de procesos, desarrollo de prototipos, aplicación web progresiva (PWA),
herramientas de desarrollo de software y la organización “Farmacia Nicolás Bolívar”.
Proceso de gestión de ventas
Definición de ventas
Las ventas, son las actividades de intercambio de un producto o servicio a cambio de un
bien monetario. Según (De La Torre, 2019) afirma. “La idea de proceso y actividad humana que
busca el intercambio con el fin de satisfacer una necesidad, esta acción provoca un beneficio
mutuo, que se traduce en términos económicos como venta” (p.28). El objetivo de las ventas es
satisfacer las necesidades del cliente mediante un bien o servicio que ofrece la empresa, a cambio
de un valor monetario. Otro de los objetivos de las ventas es incrementar los ingresos en un periodo
de tiempo determinado.
Importancia de las ventas
Las ventas son fundamentales o importantes para las empresas ya que son intercambios o
transacciones que da origen a los ingresos para así poder mantener su funcionamiento y solvencia
en un largo plazo. Esto quiere decir que el éxito o fracaso de una empresa depende de las ventas.
En la economía las ventas son importantes ya que genera la circulación o intercambio del
rubro en la sociedad mediante la activad comercial.

62
Proceso de venta
Los procesos de ventas son una serie de etapas o pasos de una empresa que son necesario
para realizar una venta. Según (EAE, 2021) afirma. “Los procesos de venta pueden considerarse
como un enfoque sistemático que implica una serie de pasos a través de los que un equipo
comercial consigue cerrar más tratos, aumentar los márgenes y lograr más ventas a través de
referencias”. Los procesos de ventas para todas las empresas no son exactamente los mismos, las
series de pasos son diferentes, cada proceso depende del tipo de empresa y de la naturaleza del
producto o servicio que cada uno ofrece.
Etapas del proceso de ventas
Según (EAE, 2021), plantea que para cada etapa de los procesos de venta de la organización
hay una etapa en el proceso de compra los clientes. A continuación, se mencionan las etapas que
contiene el proceso de ventas:
 Identificación de la necesidad: Cuándo el cliente potencial hace la primera toma de
contacto con la empresa en su búsqueda y asegurarse de estar cualificado para captar
su interés.
 Búsqueda de soluciones: Cuándo el cliente ya ha avanzado hacia la búsqueda de
respuestas a sus preguntas, los procesos de venta se tienen que poner como meta el
crear un vínculo.
 Análisis de las opciones: La compañía tiene que lograr probar su valía, se deben
centrarse en mostrar los beneficios de su oferta y su propuesta de valor.
 Decisión de compra: El ciclo de compra del cliente está a punto de finalizar y es
momento de aplicar todas las habilidades comerciales y de negociación para cerrar la
venta.
63
 Evaluación de la experiencia: La compra cerrada no es la culminación de los procesos
de ventas ya que, la capacidad para garantizar la satisfacción del consumidor es
desarrollar una relación con el cliente.
Finalmente, estas etapas de los procesos de ventas ayudan a las empresas a darle
importancia a los clientes, esto con el fin de asegurar las ventas.
Característica de un proceso de gestión de ventas
Los procesos en las empresas permiten controlar, medir, estandarizar y mejorar la manera
en que se realizan las actividades con el objetivo de lograr un buen resultado que beneficie a la
empresa.
El proceso de ventas de una organización es el más relevante, debido a que los demás
procesos, de una forma u otra, dependen del éxito del proceso del área de ventas. No
obstante, el proceso de ventas es el menos estandarizado y los demás procesos no están
diseñados en función al proceso de ventas. (García, 2020)
Según (García, 2020) las características de los procesos de ventas para que se cumpla las
metas comerciales de la empresa son:
 Diagrama de flujo: En el diagrama de flujo del proceso de las ventas se deben definir
bien los pasos, las variables, los procesos que tienen que realizarse y sobre todo que sea
entendible.
 Orientación del proceso natural de la venta: Se definen las etapas de los procesos
que realmente se requieran para realizar una nueva venta.
 Construcción desde el punto de vista del cliente: Definición correcta de las etapas
correspondientes, de los pasos que generan los avances para el proceso de ventas para
el cliente, y no para la empresa.
 Definición del objetivo: En las ventas el proceso no varía en función de la persona que
64
lo realice, en cambio, los procesos de las ventas son los que indican que es lo que se
debe realizar para que tenga éxito en los resultados.
 Ser medible: Los indicadores tienen que ser números que den un soporte objetivo y no
ideas subjetivas de lo que alguien interprete.
 Simpleza: El proceso de venta como máximo deben contener tres etapas, ya que si
tiene más etapas el proceso puede generar complicación y déficit en la retención de los
pasos y etapas.
 Repetible: En el proceso de las ventas cada vez que realicen las etapas del proceso, se
deben generar los resultados iguales, de lo contrario, el proceso de venta genera
resultados diferentes, esto quiere decir, que aún no corresponde a un proceso
inteligente.
 Proceso inteligente: Un proceso inteligente es aquel que comprende el funcionamiento
científicamente del fenómeno que se pretende controlar.
 Predicción del resultado: En el proceso de las ventas se debe ser capaz de señalar
previamente el esfuerzo específico que se tienen que realizar para lograr un mejor
resultado de las ventas en un periodo determinado.
 Auto-gestionable: En el proceso de las ventas, se señalan específicamente que labor
se realiza en cada determinado momento para indicar que es lo que hace para finalizar
un nuevo negocio.
En conclusión, estas características son importantes para las organizaciones, ya que
permiten controlar, medir y estandarizar el proceso de las ventas con el fin de asegurar una venta
ágil y así lograr ingresos para su solvencia y crecimiento económico.

65
Diagrama de flujo de proceso de ventas
A continuación, en la Figura 2 se presenta el diagrama de flujo del proceso de ventas que
se realizó en la farmacia Mishell por la autora (Z. Luna, 2019) de la Universidad Técnica de
Machala UTMACH.
Figura 2
Diagrama de flujo de proceso de venta
Nota: En esta figura se puede observar el diagrama flujo de proceso de ventas de una farmacia. Elaboración y Fuente
tomado de (Z. Luna, 2019).
66
Promociones de las ventas
Las promociones de las ventas se definen como un conjunto o aglomeración de
herramientas del Marketing, las cuales fueron diseñadas para estimular al consumidor que realicen
compras de diversos productos o servicios ofreciendo algún tipo de incentivo para hacerlo. Según
(Pacheco, 2017) define “La promoción de ventas es un componente de comunicación que se
relaciona con la publicidad, las relaciones públicas y las ventas. Tiene como objetivo principal,
lograr estimular las ventas”. Las promociones, incentivan a los clientes a realizar las compras de
productos o servicios en un tiempo determinado, la mayoría de las empresas las realizan para
agotar el stock para ingresar nuevos productos.
Clientes
Un cliente es el que adquiere algún tipo de producto o servicio de una empresa a cambio
de un valor económico. Según (Raffino, 2020) afirma. “En cliente es quien, voluntariamente,
recibe algo a cambio de otra cosa que entrega. Se refiere a una persona u organización que utiliza
un recurso o servicio proporcionado por otra persona.”. Los clientes son los que definen los
mercados, tienen la necesidad de adquirir productos o servicios y esto a la vez determinan las
ofertas y demandas.
Catálogo de productos
El catálogo de producto es un listado de ciertos productos o servicios de una empresa,
donde se detallan sus características. Según (Rodriguez, 2019) define “El catálogo es un
instrumento para promocionar los productos de cualquier empresa, pero es una inversión
demasiado costosa para realizarla sin tener detrás una estrategia de marketing, Para diseñarlo hay
que analizar cómo es la empresa, qué productos vende, a quién van dirigidos y cuáles son los
67
objetivos a la hora de hacer el catálogo” (p.17). Los catálogos son importantes, ya que estos son
utilizados como herramientas para promocionar los productos o servicios de una empresa.
A continuación, en la Figura 3 se presenta un ejemplo de catálogo de productos de la
Figura 3
Catálogo de Productos de la Farmacia Nicolás Bolívar
Nota: En esta figura se puede observar un ejemplo de un catálogo de productos de la farmacia Nicolás Bolívar.
Elaboración y fuente propia.
Automatización de procesos
A continuación, se definen los conceptos de automatización de procesos, tipos de
automatización, las ventajas de la automatización y automatización de las TI.

68
Definición de automatización de procesos
La automatización de procesos se basa en el empleo de tecnologías para optimizar tareas
que son realizadas en el día a día, esto con el objetivo de mejorar y agilizar la forma en que se
realiza el trabajo a través de reglas y acciones definidas por el usuario.
La automatización es el uso de la tecnología para realizar tareas con una asistencia humana
reducida. Cualquier industria que se encuentre con tareas repetitivas puede utilizar la
automatización, pero la misma prevalece más en las industrias de fabricación, robótica y
automotriz y también en el mundo de tecnología, en sistemas de la tecnología de
información y software empresarial. (RedHat, 2019)
Es por esto que, la automatización de procesos es de vital importancia para las empresas,
ya que les permite reducir los tiempos y costos para realizar determinadas tareas.
Tipos de automatización
En la actualidad las organizaciones automatizan los procesos o tareas con el objetivo de
aumentar la productividad y la calidad de productos y servicios. Según (Teruel, 2020) estos son
los tipos de automatización que existen:
Macros: Este permite automatizar tareas repetitivas y acciones tanto en aplicaciones de
negocio como en base de datos y todo tipo de sistemas informáticos. Se podría decir que este
proceso tecnológico es el más popular, y que además lleva activo desde hace varias décadas. El
funcionamiento de los macros es bastante similar a un atajo del teclado, ya que se encargan de unir
una secuencia de tareas y procesos para que al momento que sé de la orden que corresponda dicho
comando se ponga en marcha. De esta forma se logra que los recursos humanos al cargo no tengan
que estar pendientes de cada actividad, sino que puedan programar algunas de esas actividades
para que se ejecuten de manera automática.
Automatización de procesos IT: La automatización IT o ITPA va unos pasos más
adelante que los macros, ya que consiste en hacer uso de softwares para crear instrucciones y así
69
mejorar la eficiencia al reducir el trabajo manual en la medición y ejecución de tareas que se
consideran rutinarias. La ITPA se usa en su mayoría en los departamentos de informática y
coordina a la perfección los distintos flujos de trabajo y procesos multifuncionales. Además, este
tipo de automatización cuenta con una mayor capacidad que los macros para efectuar
automatizaciones integrales que integran una variedad de capas de tecnología y la experiencia de
usuario.
Automatización robótica de procesos: En última instancia, tenemos la automatización
robótica de procesos o RPA. Este tipo de automatización pone la inteligencia artificial a
disposición de los usuarios lo que les permite crear robots o “bots” para que manejen todo tipo de
tareas administrativas, siempre que sean totalmente automatizables y que no requieran de
pensamientos más “creativos”. La RPA se diferencia del resto de digitalizaciones de procesos
productivos que se han mencionado anteriormente debido a que su flexibilidad e integración con
los flujos de trabajo es mucho mayor. A vista de los demás puede parecer que hay un trabajador
más encargándose de estas tareas, pero realmente se trata de un robot.
Dado el contenido revisado para el presente proyecto de titulación se aplicará la
automatización de procesos IT, ya que permite reducir el trabajo manual en la ejecución de tareas
lo que mejora la eficiencia en la realización de actividades cotidianas, lo cual, es lo que busca la
Ventajas de la automatización
Según el sitio oficial (RedHat, 2019) afirma que las empresas dedicadas a la venta de
código abierto exponen las siguientes ventajas de utilizar la automatización:
 Mayor productividad. El personal puede dedicar más tiempo a generar un mayor
impacto en la organización, dejando la parte repetitiva para el software.

70
 Mayor confiabilidad. Al disminuir la cantidad de participación humana, esto reducirá
los controles y resolverá menos problemas. Esto permite saber con exactitud cuándo se
llevarán a cabo los procesos, las pruebas, las actualizaciones.
 Control simplificado. En cuanto mayor sea el número de personas, la probabilidad de
que haya conocimiento será mayor.
Para las empresas la automatización ayuda a controlar los errores en los procesos por parte
del personal, esto reducirá los gastos que producen a la hora de corregir estos errores.
Automatización de la TI
La TI o Tecnología de la Información, es una combinación medios y métodos de
recopilación de datos para obtener nueva información de calidad sobre el estado de un objeto,
proceso o fenómeno. La automatización de la TI, también conocida como automatización de la
infraestructura, se basa en la utilización softwares para crear procesos e instrucciones repetibles
que reemplace o disminuya la interacción humana con los sistemas de las maquinas (RedHat,
2019). La automatización puede ser la clave para la optimización de TI y la transformación digital,
ya que al automatizar la TI acelera la implementación de su infraestructura y de la distribución de
aplicaciones. Pueden llevar a cabo diversos procesos y tareas, desde las más sencillas a las más
complejas.
Prototipo de desarrollo de software
Definición de prototipo
Un prototipo hace referencia a un modelo funcional de software, que sirve para evaluar
propuestas y probarlas previo a la implementación. Un prototipo se define como una visión previa
del modelo final, es un modelo operable, fácilmente ampliable y modificable, que posee todas las
71
características propuestas, pero que sin embargo sigue siendo un modelo básico que debe ser
mejorado (Reeves, 2020) . Los prototipos generalmente resultan ser una versión preliminar del
sistema final, que exhibe funcionalidades limitadas y que no siempre mantiene la lógica exacta
utilizada en el producto final.
Etapas de un prototipo
Un prototipo se basa en desarrollo de algunas de las partes más importantes que contendrá
el producto antes de su fase final. A continuación, en la Figura 4 se presenta las etapas que contiene
el desarrollo de un prototipo.
Figura 4
Etapas de un prototipo
Nota: En esta figura se muestra las etapas que contiene el desarrollo de un prototipo. Elaboración: Propia de los
autores. Fuente: (Pineda et al., 2019).
Según (Pineda et al., 2019) las etapas de un prototipo son las siguientes:
 Trabajar en nódulos manejables: En esta etapa los desarrolladores trabajan de
manera directa con el cliente para definir los diferentes escenarios donde el cliente
(actor) podrá interactuar con el sistema.

72
 Construcción de prototipo rápidamente: En esta etapa se deben determinar los
requerimientos que servirán para la realización del prototipo, los cuales deben cumplir
con el fin y alcance que haya definido el cliente.
 Modificar el prototipo en interacción sucesiva: Una vez que se haya realizado el
primer prototipo se procede a realizar las respectivas correcciones de los errores que
pueden llegar presentarse y que por lo general implican una mejora al producto final.
 Enfatizar la interfaz del usuario: En esta etapa es importante que la interacción del
usuario con la interfaz del sistema sea comprensible y cumpla con la funcionalidad que
el cliente esperaría.
En conclusión, dada la fuente investigada es importante cumplir con las etapas de un
prototipo para lograr un mejor resultado, ya que, estas etapas se centran en desarrollar los aspectos
más importantes de los requerimientos planteados por el cliente antes de su etapa final.
Tipos de prototipos
Hoy en día existe una gran variedad de prototipos, los cuales se adaptan según a las
necesidades del producto, el principal objetivo es el de realizar pruebas hasta presentar su estado
final. Según (Hull, 2020) estos son los tipos de prototipos que existen:
Prototipos desechables: También conocido como prototipo de creación rápida, se trata de
un modelo que se puede crear y modificar de manera más fácil y rápida. En este prototipo el
diseñador puede elaborar rápidamente un modelo que eventualmente será descartado y no formará
parte del sistema final. El objetivo principal de este modelo es probar las diferentes ideas y lograr
una recopilación de requisitos preliminar.
Prototipos evolutivos: Estos prototipos son un modelo funcional que cuenta con algunas
características primarias, el propósito de estos prototipos es permitir que el producto crezca o

73
evolucione en múltiples ciclos de retroalimentación para lograr una funcionalidad más avanzada y
cercana al producto final.
Prototipos incrementales: Aunque pueda sonar similar a los prototipos evolutivos la
técnica empleada es totalmente diferente. Estos prototipos se basan en dividir todo el producto en
módulos o submódulos, los cuales se evalúan y refinan por separado para luego fusionarlos y
formar un único software.
Prototipos extremos: El uso de estos prototipos son más recomendados para el desarrollo
de aplicaciones web. Este modelo permite a los desarrolladores o diseñadores entregar un
producto más robusto y en un menor tiempo. Esta técnica de prototipado consta de tres fases
secuenciales:
 Fase 1: Esta fase se basa en la creación de páginas estáticas con el objetivo de
simular la capa de presentación a los usuarios. La interactividad de estas páginas es
limitada, sin embargo, son los suficientemente completas para mostrar los distintos
recorridos y navegación entre páginas dentro de la aplicación.
 Fase 2: En esta segunda fase las páginas son transformadas completamente a
modelos funcionales las cuales son vinculadas a una capa de servicios simulados.
Esta fase consta de dos principales tareas; recodificación de la UI y validaciones de
campos.
 Fase 3: Finalmente, se toman los servicios de la anterior fase y son implementados
e integrados para obtener un prototipo final y presentable.
Dado el contenido revisado se aplicará el prototipo extremo, ya que es un modelo
completamente funcional y uno de los más recomendado para el desarrollo de aplicaciones web,
74
el cual permite desarrollar las interfaces de usuarios y servicios antes de implementar cualquier
tecnología subyacente.
Ventajas de un prototipo
Los prototipos poseen ventajas que aportan a todos los stakeholders del proyecto, ya que
permiten determinar los problemas de diseño y funcionalidad a tiempo. Según (Reeves, 2020) estas
son las ventajas que ofrece un prototipo.
 Se puede desarrollar en menos tiempo y con mayor facilidad.
 Los usuarios pueden tener una mayor participación en el proyecto.
 Los costos de desarrollo son menores.
 Ayudan a identificar a tiempo cualquier posible brecha en la funcionalidad.
 Permiten una aceptación temprana por parte de los usuarios.
Dado el listado de ventajas revisado, se puede observar que los prototipos proveen de
grandes beneficios para el desarrollo del presente trabajo de titulación, ya que permiten
descubrir los fallos de requerimientos desde un inicio y así lograr la mejora del producto
hasta alcanzar una versión final.
Desventajas de un prototipo
Los prototipos también tienen desventajas que se deben tener en cuenta a la hora del
desarrollo del proyecto. Según (Reeves, 2020) estas son las desventajas de un prototipo.
 En el transcurso del desarrollo suele ser necesario agregar más funcionalidades.
 Suelen ignorar características importantes en el modelado del prototipo, lo que
puede alargar el desarrollo.

75
Dado el listado de ventajas revisado, se puede observar que los prototipos no poseen
muchas desventajas, lo cual no representa un riesgo para el desarrollo del proyecto ya que se tiene
conocimiento sobre el uso de esta técnica y no implica ningún costo para la farmacia Nicolás
Bolívar.
Características de los prototipos
Según (Reeves, 2020) los prototipos poseen una larga lista de características que son
sumamente importantes para los desarrolladores y clientes. A continuación, se muestran las
principales características:
 Sirven para recopilar rápidamente información específica de los requerimientos
para el sistema final.
 Ayudan a visualizar el producto final antes que intervengan los recursos para su
creación.
 Permiten corregir errores antes de obtener el sistema final.
 Evitan gastos generales y descontentos a largo plazo.
 Se pueden modificar y mejorar con mayor facilidad.
 Se pueden desarrollar con mayor rapidez.
En conclusión, estas características son de gran importancia para el presente trabajo de
titulación, ya que permiten llevar a cabo el desarrollo en menor tiempo y facilitan la detención de
errores en la funcionalidad antes de su implementación.

76
Aplicaciones Web
Definición de Aplicaciones Web
Las aplicaciones web son un tipo de software que se ejecutan desde un servidor web y al
cual los usuarios puede acceder por medio de Internet haciendo uso de un navegador. Las
aplicaciones web están basadas en la arquitectura cliente-servidor y están codificadas en lenguajes
soportados por navegadores. El uso que se le da a este tipo de aplicaciones es bastante amplio, sin
embargo, entre los más comunes incluye: tiendas en línea, correo electrónico, blogs y calculadoras
en línea.
Una aplicación web se puede definir como un programa informático que realiza tareas
específicas en la cual el usuario puede acceder a ella mediante el uso de un navegador web,
en otras palabras, una aplicación web es un programa que se almacena en un servidor
remoto y se entrega a través de Internet la cual se puede visualizar en la interfaz de los
navegadores web. (Jazayeri, 2016)
Por ello, algunas empresas optan por implementar las aplicaciones web, ya que proveen de
una de gama de herramientas, las cuales le facilitan gestionar operaciones tales como: gestión y
control de inventarios, gestión contable, gestión cliente, etc.
Aplicaciones Nativas
Las aplicaciones nativas son un tipo de software desarrollado especialmente para un
sistema operativo en específico con el propósito de que puedan aprovechar a un nivel superior los
recursos del dispositivo en el que se ejecuten. Estas aplicaciones se descargan e instalan a través
de tiendas de aplicaciones como Google Play Store, Apple App Store, Microsoft Store, entre otras.
Según (Gillis, 2020) afirma que. “Una aplicación nativa es un programa de software que se
desarrolla para su uso en una plataforma o dispositivo en particular”. Este tipo de aplicaciones
están diseñadas con el propósito de brindar una mejor experiencia de usuario, ya que se adapta en
77
su totalidad al dispositivo en el que se instale y puede utilizar sin mayores dificultades los recursos
de hardware y software.
A continuación, en la Tabla 3 se detallan las principales ventajas y desventajas con las que
cuentan las aplicaciones nativas.
Tabla 3
Ventajas y desventajas de las aplicaciones nativas
Ventajas Desventajas
Aprovechan al máximo los recursos del El costo y tiempo de desarrollo es más
dispositivo. elevado que las aplicaciones web.
Posee notificaciones push. Requiere múltiples bases de código para
poder trabajar en diferentes plataformas.
La calidad del software es garantizada por El proceso de aprobación de las tiendas
las tiendas de Apps. suele ser complicado.
El rendimiento del software es más rápido. Necesitan ser descargadas desde una tienda
de aplicaciones.
La interfaz de usuario se adapta mejor al
sistema operativo.
Nota: En esta tabla se muestran las ventajas y desventajas de las aplicaciones nativas. Elaboración: Propia de los
autores. Fuente: (Gillis, 2020).
Responsive Web Design
Definición
El diseño web responsive es un enfoque del desarrollo web, el cual se destaca
principalmente porque permite reajustar la información y los elementos de un sitio web al tamaño
de la pantalla de visualización del dispositivo que se use, tales como: computadoras de escritorio,
tablets y smartphones. Una de las cualidades que posee el Responsive Web Design es
redimensionar el contenido y diseño de una página o sitio web para su adaptación total a la pantalla
del dispositivo, mediante el cual logra su visualización (Veloz, 2016).
En conclusión, el diseño responsive es de gran importancia, ya que permite a los
desarrolladores realizar propuestas adaptables a diferentes pantallas para los sitios web, con el fin
78
de satisfacer las necesidades de múltiples usuarios que ingresen por medio de smartphones, tablets,
laptops, computadoras de escritorio.
Figura 5
Diseño web responsive
Nota: En esta figura se puede observar las diferentes pantallas de los dispositivos a los que se adapta el diseño
responsive. Elaboración y Fuente tomado de (Veloz, 2016).
Características
Según el sitio web corporativo (Solution Dot, 2017) estas son las principales características
con las que cuenta el diseño web responsive.
Permite la adaptación a todos los dispositivos: Sin duda este es uno de los aspectos más
importantes de los diseños de sitios web responsive, ya que brindan una experiencia de usuario
encantadora en muchos dispositivos sin tener en cuenta el tamaño de la pantalla. (Solution Dot,
2017)
Soporte abierto para todos los navegadores: Los sitios web con diseño responsive son
más compatibles con todos los motores de búsqueda, lo cual es una característica muy importante
y favorable de los sitios web responsive. (Solution Dot, 2017)

79
Ayuda a perfeccionar el SEO: Los sitios web que no tienen un diseño responsive
generalmente no son compatibles con los Smartphone, por lo que necesitan crear aplicaciones
nativas móviles los que significa más trabajo para las personas de SEO. El diseño responsive del
sitio web facilita el trabajo a las personas de SEO, ya que solo necesitan realizar su trabajo una
sola vez. (Solution Dot, 2017)
Bajo costo y mayor mantenimiento: El diseño web responsive permite a los
desarrolladores crear diferentes versiones de un solo sitio que sea compatible con computadoras
de escritorio, portátiles y teléfonos inteligentes, lo que eventualmente minimizará el factor de costo
y facilitará el mantenimiento. (Solution Dot, 2017)
Más ventas: Si tiene un negocio en línea de venta de bienes o servicios, estos diseños
aumentan la experiencia de usuario, permitiendo que una gran cantidad de visitantes o personas
llegan al sitio a través de teléfonos inteligentes, tabletas o computadoras, garantizando más
audiencia y por lo tanto más ventas y ganancias. (Solution Dot, 2017)
Ventajas y Desventajas
A continuación, en la Tabla 4 se presentan las ventajas y desventajas con las que cuenta
el responsive web design.

80
Tabla 4
Ventajas y Desventajas del diseño web responsive
Requieren menos mantenimiento. El tiempo de respuesta puede variar en cada
dispositivo.
Adaptable a todo tipo de pantalla. Los sitios web estándar existentes requieren
ser rediseñados desde 0.
Tiempo de carga más rápido. Requiere un tiempo de desarrollo superior a
los sitios web estándar.
Optimizado para SEO.
Mantenimiento más sencillo.
Nota: En esta tabla se muestra algunas de las ventajas y desventajas con las que cuenta el responsive web design.
Elaboración: Propia de los autores. Fuente: (Adams, 2017).
Aplicaciones web progresivas (PWA)
Definición de aplicación web progresivas (PWA)
Una aplicación web progresiva es un tipo de aplicación basada en navegadores que cuenta
con todos los beneficios de una aplicación móvil nativa a la cual se puede acceder sin la necesidad
de descargarlas de una tienda de aplicaciones. Las PWA combinan lo mejor de un sitio o página
web con lo mejor de una aplicación nativa para brindar una experiencia de usuario móvil. Las
Progressive Web Apps brindan una versión más rápida, accesible y confiable que los sitios web
tradicionales. (Lanza, 2019) comenta que:
Las aplicaciones web progresivas (PWA) son aplicaciones web, que, en comparación con
las aplicaciones nativas, son en un inicio accesibles a través de un navegador en lugar de
tener que ser descargadas e instaladas en un dispositivo. Visualmente, al ejecutarse a
pantalla completa, la experiencia de usuario es idéntica a la de una aplicación nativa. De
hecho, tras varios usos la aplicación PWA generará un acceso directo y empleará el
contenido en cache local, equivalente a una instalación, para mejorar la experiencia de uso.
Es decir, el proceso de instalación es completamente transparente para el usuario. (p.6)
Las PWA ofrecen una versión más optimizada de las aplicaciones web tradicionales, ya
que bridan otras funcionalidades que solo las aplicaciones nativas ofrecían, esto gracias a la
81
tecnología conocida como Service Worker que permite ejecutar servicios en segundo plano. En la
Figura 6 se muestra la arquitectura de las aplicaciones web progresivas.
Figura 6
Arquitectura de una PWA
Nota: En esta figura presentada se puede visualizar la arquitectura que posee una aplicación web progresiva y sus
diferentes componentes. Elaboración y Fuente tomado de (Luna, 2021).
Características de las PWA
Las aplicaciones web progresivas (PWA) poseen características que le permiten ofrecer
una experiencia similar a las aplicaciones nativas, ocupando menos espacio y un consumo de
recursos reducido. Según (Caihura, 2019) las características que más destacan son:
 Estándar: Las Aplicaciones web progresivas (PWA) emplean la misma plataforma
y tecnología que se usan para el desarrollo de páginas o sitios web, tecnologías tales
como: CSS y JavaScript y HTML.
 Progresiva: Los usuarios pueden ejecutar la aplicación desde diversos dispositivos,
sistemas operativos y navegador, ya que está construida para mejorar
progresivamente desde un inicio.
 Responsiva: Poseen un diseño responsive el cual permite a la aplicación que se
pueda ajustar a cualquier navegador o formato de pantalla del dispositivo que se
utilice.
82
 Independiente de la conexión: Las PWA permiten el acceso a contenido a offline
mediante el uso de los service workers y el almacenamiento de caché, lo cual
permiten trabajar sin conexión o en redes con intermitencias.
 Fresca: Las PWA siempre estarán actualizadas en su última versión, gracias al
proceso automático de actualización que realiza de manera constante e instantánea
sin que el usuario requiera descargarla en tiendas de apps, esto se lo realiza gracias
al empleo de los service workers.
 Rápida: Las aplicaciones web progresivas (PWA) ofrecen una mayor velocidad
tanto en carga de datos como en la navegación, esto es posible gracias al uso de
almacenamiento en la caché lo cual permite al usuario visualizar el contenido casi
al instante.
 Segura: Las PWA utilizan el protocolo HTTPS, lo cual permite una conexión
segura y previene que el contenido sea manipulado por otros.
 Interactiva: Esta característica brinda una mayor facilidad al usuario para que
pueda interactuar con la aplicación, incluso cuando no esté abierta puede enviar
notificaciones de tipo “push” lo cual concede la posibilidad de mantener informado
al usuario sin la necesidad de acceder.
 Instalable: Estas aplicaciones ofrecen a sus usuarios la posibilidad de crear accesos
directos en la pantalla de inicio de su dispositivo, el cual se visualiza como icono
de una aplicación nativa.
 Detectable: Son identificables como una “aplicación” gracias al manifiesto de la
W3C y al registro de funciones del service worker, permitiendo a los buscadores
web encontrarlas.
83
 Enlazable: Las PWA se pueden compartir fácilmente usando su dirección en la
web mediante la URL, lo que permite que otra persona pueda utilizarla y no requiera
procesos de instalación complejos.
Estas características son importantes debido a que proveen una infraestructura adecuada, y
permiten crear un software altamente atractivo y confiable para los usuarios.
Ventajas y desventajas de las PWA
A continuación, en la Tabla 5 se presenta algunas ventajas y desventajas de las PWA que
son importantes conocer para tener conciencia de los beneficios que puede brindar este tipo de
tecnología.
Tabla 5
Ventajas y Desventajas de las aplicaciones web progresivas
Se pueden utilizar como una aplicación web y Tiene limitado acceso a los recursos del
una aplicación nativa. dispostivo.
No require instalación a través de una tienda Mayor consumo de batería.
de aplicaciones.
Ofrece una mayor compatibilidad. Tiene un menor redimiento que las
aplicaciones nativas.
Ofrence un sólido redimiento y ocupa menos No dispone de acceso a las tiendas de
recursos que las aplicaciones nativas. aplicaciones.
Se puede utilizar parcialmente sin conexión.
Son compatibles con SEO (Search Engine
Optimization).
Las actualizaciones son automáticas.
Menor costo de desarrollo que las aplicaciones
nativas.
Nota: En esta tabla se muestran las ventajas y desventajas de las aplicaciones web progresivas (PWA). Elaboración:
Propia de los autores. Fuente: (Gunterman, 2020).
84
Componentes técnicos de una PWA
Service Worker
Un Service Worker consiste en un archivo de JavaScript que permite tener una aplicación
web ejecutándose en segundo plano, lo cual brinda la posibilidad de ejecutar diversas funciones
que no necesariamente dependen de una interacción con el usuario. El Service Worker es una serie
de comandos que se ejecuta en el navegador en segundo plano, apartado de una página web,
permitiendo realizar nuevas funciones que no requieren de una página web ni interactuar con el
usuario (Gaunt, 2021).
El Service Worker es el encargado de interceptar las peticiones del navegador y de este
depende si dichas peticiones son aceptadas o rechazadas, el ciclo de vida de un service worker es
independiente de la página o sitio web, cuyo propósito es mejorar la experiencia de usuario
ofreciendo capacidades avanzadas como el trabajo sin conexión a Internet, conexión lenta o con
intermitencia, notificaciones tipo push, descargas en segundo plano y cacheado de información.
A continuación, en la Figura 7 se presenta el funcionamiento del Service Worker, según el
autor. (Caihura, 2019)
Figura 7
Funcionamiento del Service Worker
Nota: Esta figura refleja el funcionamiento del Service Worker, el cual consiste en actuar como un intermediario entre
la PWA, servidor y caché. Elaboración y Fuente tomado de (Caihura, 2019).
85
Ventajas y Desventajas del Service Worker
El Service Worker es un elemento esencial para la implementación de la tecnología PWA,
la cual provee de funciones que hace que se comporte de manera similar a una App nativa. A
continuación, en la Tabla 6 se presenta las ventajas y desventajas del service worker.
Tabla 6
Ventajas y desventajas del service worker
Incorporan funciones como notificaciones push y Requiere de una configuración de HTTPS
almacenamiento de caché. en un servidor.
Permite controlar el modo en que se gestionan las No es compatible con todos los
solicitudes de la página. navegadores.
Posee un ciclo de vida independiente de la página
web.
Se inhabilitan cuando no está en uso y se habilitan
en caso que lo amerite.
Nota: En esta tabla se muestran las ventajas y desventajas que posee la tecnología conocida como service worker.
Elaboración: Propia de los autores. Fuente: (Gaunt, 2021).
Web App Manifest
La Web App Manifest o manifesto de la aplicación web se trata de un archivo JSON cuyo
propósito es proporcionar a los desarrolladores la opción de realizar una serie de configuraciones
a la aplicación. Este archivo permite configurar la aplicación web progresiva para que se vea más
similar a una App nativa, en este documento se definen las bases para la aplicación como el
nombre, icono, URL, descripción, el tipo de visualización, entre otras. Según el sitio oficial (MDN
Web Docs, 2021) afirma:
The web application manifest is part of a set of web technologies called progressive web
applications. This is a web page that can be installed on the home screen of your device
without the need for an app store. Unlike traditional web applications that have simple links
and bookmarks on the home screen, PWAs can be pre-downloaded and run offline, and
you can also use traditional web APIs.
86
En conclusión, el manifiesto de la aplicación web es de gran importancia ya que es una
herramienta muy útil para los desarrolladores la cual permite personalizar la aplicación y otorgarle
un aspecto más elegante y de fácil acceso.
Secure Sockets Layer (SSL)
El SSL se trata de un protocolo de seguridad que garantiza la integridad de la información
entre dos puntos conectados en red. Es una tecnología estándar que sirve proteger una conexión a
Internet mediante el cifrado de datos enviados entre un sitio web y un navegador. Impide que
terceros roben la información transferida, incluidos los datos personales o financieros (Digi Cert,
2021). Por tanto, el uso de esta tecnología es esencial para el desarrollo del presente trabajo de
titulación debido a que provee seguridad a los usuarios que visiten la aplicación web.
Cache Storage
El almacenamiento en caché es un elemento que tienen los navegadores, el cual provee a
los desarrolladores el control de almacenamiento de contenido en caché. La página oficial (MDN
Web Docs, 2021) comenta. “La Caché proporciona un mecanismo de almacenamiento persistente
para pares de objetos solicitud/respuesta que se almacenan en caché, en la memoria de larga
durabilidad”. Por ello, este recurso es de gran ayuda para el desarrollo de la aplicación progresiva
ya que permiten garantizar el uso independientemente de si exista conexión a internet o no.
Herramientas de desarrollo de software
En las siguientes secciones se presentan definiciones, conceptos, características ventajas y
desventajas, líneas de tendencias y ranking, de las herramientas de desarrollo que se utilizaran en
la fase de elaboración de este proyecto de titulación.

87
Visual Studio Code
Definición
Visual Studio Code es un editor de código fuente que ofrece la posibilidad de trabajar con
distintos lenguajes de programación y además permite gestionar atajos de teclados propios y la
refactorización del código. En el sitio oficial del editor de código fuente (Visual Studio Code,
2021) afirma que:
Is a lightweight yet powerful source code editor that runs on your desktop and is available
for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript,
and Node.js and has a rich ecosystem of extensions for other programming languages and
runtimes.
Visual Studio Code es un entorno de trabajo open source que proporciona gran utilidad
para gestionar y descargar extensiones las cuales permiten personalizar y potenciar esta
herramienta.
Las extensiones de Visual Studio Code proveen de una amplia cantidad de opciones, como
colorear tabulaciones, etiquetas y autocompletado de código. También existen extensiones que
ayudan con el lenguaje de programación que se vaya a usar, entre estos estan: Python, C / C++,
Java.
Características de Visual Studio Code
A continuación, presenta algunas de las principales características del editor de código
fuente Visual Studio Code según (Cuellar, 2019):
 Es un editor de código fuente ligero.
 Su paleta de comandos es considerada como interfaz de línea de comandos.
 Para acceder a algunas de las características de Visual Studio Code es necesario
realizarlo a través de la paleta de comandos o de archivos Json.

88
 Posee variedad de temas para la configuración del entorno que se esté trabajando.
 Visual Studio Code es una herramienta que soporta múltiples lenguajes de
programación.
 Es una herramienta multiplataforma, la cual se puede instalar en los distintos sistemas
operativos.
 Esta herramienta cuenta con extensiones que facilitan trabajar con los lenguajes de
programación.
 Esta herramienta se la considera como multiproyectos, ya que permite abrir varios
archivos y carpeta a la vez.
Visual Studio Code es compatible con la mayoría de los lenguajes de programación, y con
los distintos sistemas operativos, su codificación funciona en los diferentes sistemas operativos a
diferencias de otros editores de textos.
Ventajas y desventajas
A continuación, en la Tabla 7 se presenta las ventajas y desventajas de utilizar el editor de
texto Visual studio code.

89
Tabla 7
Utiliza la herramienta IntelliSens que permite Su interfaz es intimidante para los usuarios
detectar y auto-completar código. nuevos y principiantes.
Utiliza la herramienta Debugging la cual Bajo rendimientos con múltiples archivos de
permite depurar desde el mismo editor. gran tamaño.
Esta herramienta posee soporte web Necesita la instalación de plugins para mejorar
incorporado. su funcionamiento.
Extensiones y soportes para los distintos
lenguajes de programación.
Permite la configuración de su interfaz para un
mejor manejo de los usuarios.
Nota: En la presente tabla se muestran las ventajas y desventajas con las que cuenta el editor de texto Visual Studio
Code. Elaboración: Propia de los autores. Fuente: propia de la investigación.
Esta herramienta permite una codificación sencilla y ayuda en el reconocimiento de errores
de código, esto hace que los usuarios codifiquen de una manera eficiente y sin errores.
Línea de tendencia
A continuación, en la Figura 8 y Figura 9 se presenta el análisis de las tendencias asociados
al editor de código fuente que se está utilizando para el desarrollo de este proyecto de titulación,
se han considerados cortes de los últimos 2 años a nivel nacional y global.

90
Figura 8
Análisis comparativo a nivel nacional: Visual Studio Code vs Notepad++ vs Sublime Text vs
Textpad
Nota: Como se puede observar en esta figura en el corte de los últimos 2 años a nivel nacional, Visual Studio Code
sobresale de los demás editores de códigos fuentes que se utilizaron para realizar esta comparación. Elaboración y
fuente tomado de (Google Trends, 2021).
En la Figura 8 se presenta el análisis comparativo asociado a editores de código fuentes, a
nivel nacional Notepad++, Sublime Text y Textpad no presentan ninguna competencia frente a
Visual Studio Code. Este editor de código fuente es muy ligero y fácil de utilizar, además es una
herramienta open source, multiplataforma y puede ser utilizado con los diversos lenguajes de
programación, por tales razones esta herramienta es la preferida para los desarrolladores.
Así mismo elaboró un análisis comparativo a nivel global de este editor de código fuente
cuyo corte es de 2 años y que se presentará a continuación, en la Figura 9.

91
Figura 9
Análisis comparativo a nivel global: Visual Studio Code vs Notepad++ vs Sublime Text vs
Textpad
Nota: Como se puede observar en esta figura en el corte de los últimos 2 años a nivel nacional y global, Visual Studio
Code sobresale de los demás editores de códigos fuentes que se utilizaron para realizar esta comparación. Elaboración
y fuente tomado de (Google Trends, 2021).
Como se pudo observar en la Figura 9 el editor de código fuente Visual Studio Code a
nivel global quedó posicionado como el mejor editor de código fuente, los demás editores como
Notepad++, SublimeText y NotePad no presentan competencia frente a Visual Studio Code. Por
tal motivo, esta herramienta fue elegida como editor de código fuente para el desarrollo de este
proyecto de titulación.
Node.js
Definición
Node.js es un entorno de ejecución de código abierto que permite ejecutar código de
JavaScript V8 del lado del servidor y admite protocolos DNS, TCP y HTTP. Node.js contiene una
92
biblioteca con módulos de JavaScript lo que permite desarrollar aplicaciones web de manera
sencilla, rápida y escalable. Según (Rodríguez, 2017) comenta que. “Node.js es concebido como
un entorno de ejecución de JavaScript orientado a eventos asíncronos, diseñado para construir
aplicaciones en red escalables y de rápida comunicación y ejecución de las entradas y salidas”
(p.26).
Node.js es unos de los entornos de ejecución más utilizados por los desarrolladores de
aplicaciones en tiempo real, el cual permite manejar una gran cantidad de conexiones al mismo
tiempo brindando un rendimiento superior lo que a su vez brinda una gran escalabilidad. Esta es
una herramienta open source, y multiplataforma, esto quiere decir que puede ejecutarse en los
diferentes sistemas operativos.
Características
Node.js cuenta con características muy importantes para el desarrollo de modulo o
aplicaciones web que trabajan en tiempo real. Según (Dhruti, 2019) estas son las características
con las que cuentas el framework Node.js:
 Node.js proporciona un entorno en tiempo real multiplataforma, igual que lo hace
JavaScript.
 Es muy liviano y de gran utilidad para aplicaciones que hace uso intensivo de datos que
se trabajan en tiempo real.
 La metodología de programación que utiliza es asíncrona, por lo que no requiere que
se complete la primera solicitud para realizar otra.
 Admite el almacenamiento de datos en el búfer.
 Permite generar contenido dinámico y la recopilación de información de la página web.
 Con Node.js se pude crear, eliminar, agregar y actualizar datos de la base de datos.
93
 Es altamente escalable debido a su modelo se basa en el uso de un solo hilo con bucle
de eventos.
Como se pudo observar en listado de características Node.js es una tecnología de
desarrollo bastante útil, la cual permite crear aplicaciones web en tiempo real, como es el
caso de aplicaciones con chat online que será implementado como uno de los módulos del
prototipo de aplicación web progresiva en el presente proyecto de titulación.
Arquitectura de Node.js
En la Figura 10 que se presenta a continuación se puede visualizar la arquitectura funcional
con la que cuenta Node.js.
Figura 10
Arquitectura funcional de Node.js
Nota: En la presente figura se puede observar la arquitectura funcional que posee node.js, el cual es utilizado
principalmente el desarrollo de aplicaciones en tiempo real. Fuente y elaboración de (Kinsta, 2021).
Ventajas y Desventajas
Node.js cuenta con una serie de beneficios muy importante que proporciona a los
desarrolladores de aplicaciones, la facilidad de crear aplicaciones web con un alto rendimiento, a
continuación, en la Tabla 8 se presenta algunas de las ventajas y desventajas que posee Node.js.
94
Tabla 8
Ventajas y desventajas de Node.js
El rendimiento para las aplicaciones en tiempo Requiere de muchos cambios de código.
es real es alto.
Gran escalabilidad para aplicaciones El mantenimiento de código es más tedioso.
modernas.
Es un framework altamente rentable y popular Reduce relativamente el rendimiento debido
entre los desarrolladores. que maneja tareas pesadas.
Es fácil y rápido de aprender.
Mejora el rendimiento y el tiempo de respuesta
de las aplicaciones.
Existencia de amplia documentación sobre
Node.js
Admite el almacenamiento en caché para un
tiempo de carga más rápido.
Nota: En la presente tabla se puede observar algunas de las ventajas y desventajas con las que cuenta Node.js.
Elaboración: Propia de los autores. Fuente: (Kaneriya, 2020).
Ranking de tecnologías de desarrollo
En la Figura 11 que se muestra a continuación, se puede observar el ranking de las
tecnologías de desarrollo según StackOverFlow en la encuesta realizada en el año 2019, los cuales
incluyen frameworks, librerías y otras herramientas.

95
Figura 11
Ranking de las tecnologías de desarrollo
Nota: En la presente figura se puede observar el ranking de las herramientas de desarrollo como frameworks y otra
herramienta, en el cual node.j es el más utilizado por desarrolladores profesionales. Elaboración y fuente tomado de
(Stack OverFlow, 2019).
Como se pudo observar en la Figura 11 Node.js esta posicionado en el primer lugar como
la tecnología de desarrollo preferida por lo desarrolladores profesionales en la encuesta realizada
por el sitio oficil StackOverFlow. Por ello, esta tecnología fue seleccionada para la elaboración del
prototipo de aplicación web progresiva, ya que es una de las más utilizadas para la creación de
módulos de chat en tiempo real.
Frameworks
Definición de framework
Un framework es un concepto de apoyo definido y una estructura técnica que sirve como
base para organizar y desarrollar software, a menudo con artefactos o módulos de software
específicos. Son estructuras para construir aplicaciones web que proporcionan a los programadores
la facilidad de desarrollar aplicaciones dinámicas, así como las estructuras para ejecutar
96
aplicaciones en máquinas controladas por el proveedor de la aplicación (Gil, Gomes, Gil y Teutsch,
2018). Por lo tanto, el uso de esta herramienta para el desarrollo de la aplicación es de gran
importancia, ya que permiten agilizar y acelerar los procesos de desarrollo, reutilizar códigos ya
existentes para promover la buena aplicación de técnicas en el desarrollo.
Framework CodeIgniter
Definición
CodeIgniter es un framewoks de desarrollo de aplicación web, trabaja con PHP y se
encuentra basado en el patrón de desarrollo MVC (Modelo Vista Controlador), es una
aproximación al software que separa la lógica de la aplicación de la presentación. Según British
Columbia Institute of Technology [BCIT] (2019) define:
CodeIgniter is a web application development framework that uses PHP. Its objective is to
allow you to develop projects faster and easier, it has a wide set of libraries, as well as a
simple interface and a logical structure to access these libraries.
CodeIgniter adopta un enfoque bastante flexible para el patrón de diseño MVC, esto debido
a que los modelos son opcionales, lo cual permite incorporar códigos existentes e inclusive crear
librerías para el sistema. Además, este framework permite concentrarse creativamente en un
proyecto minimizando la cantidad de código y ocupando solo lo necesario para una tarea
determinada.
Características de CodeIgniter
Según (Mujica, 2021) estas son las características principales que tiene CodeIgniter:
 Software ligero: Las versiones de CodeIgniter no pesan más de 3MB
 Cuenta con soluciones simples: Su arquitectura está basada en MVC PHP, esto
facilitará el desarrollo de los proyectos.

97
 Posee plantillas: Cuenta con almacenamiento en el caché de forma automática para
las páginas que están renderizadas.
 Validación de formularios y datos: Codeigniter cuenta con validador de datos, esto
quiere decir que los datos se verificarán si son del tipo correcto y si cumplen los criterios
necesarios.
 Documentación: Codeigniter dispone de instrucciones y amplia documentación clara.
 Sistema de seguridad. Codeigniter cuenta con protección incorporada contra los
ataques de CSRF y XSS.
CodeIgniter tiene como objetivo minimizar la cantidad de código para el desarrollo, este
hecho es importante para desarrollar de manera más rápida y segura las aplicaciones web con PHP,
y es una herramienta de open source lo que lo hace más factible para los desarrolladores.
Arquitectura de Codeigniter
A continuación, en la Figura 12 se presenta la arquitectura del framework Codeigniter, que
está basada en la arquitectura MVC (Modelo-Vista-Controlador).
Figura 12
Arquitectura funcional de Codeigniter
Nota: En esta figura se puede visualizar la arquitectura funcional que posee CodeIgniter, el cual está basado en la
arquitectura MVC (Modelo-Vista-Controlador). Elaboración y Fuente tomado de (JavatPoint, 2021).
98
A continuación. en la Tabla 9 se presenta algunas de las ventajas y desventajas que posee
el framework CodeIgniter.
Tabla 9
Ventajas y desventajas de CodeIgniter
El procesamiento de las páginas es rápido ya No se encuentra diseñado para desarrollar
que su núcleo es bastante ligero. sitios web a gran escala.
Facilidad para crear nuevos módulos, páginas Posee limitación de bibliotecas en
o funcionalidades. comparación con otros framework.
Su licencia es open source, esto quiere decir Todavía no hay un editor específico para
que es código libre Codeigniter.
Facilidad de edición del código ya creado.
Su instalación es muy sencilla.
Separación de la lógica y arquitectura MVC.
Cualquier servidor que soporte PHP y MySQL
funcia con CodeIgniter.
Nota: En esta tabla se presenta algunas de las ventajas y desventajas que tiene el framework CodeIgniter. Elaboración:
Propia de los autores. Fuente:(Mujica, 2021).
Estas ventajas hacen que CodeIgniter sea una excelente herramienta para los
desarrolladores ya que permite agilizar y desarrollar aplicaciones web dinámicas de una manera
más rápida.
Línea de tendencia
A continuación, en la Figura 13 y Figura 14 se presenta el análisis de tendencias asociadas
al framework, que se está utilizando para el desarrollo de este proyecto de titulación, se han
considerados cortes de los últimos 2 años a nivel nacional e internacional.

99
Figura 13
Análisis comparativo a nivel nacional: CodeIgniter vs Yii vs CakePHP
Nota: Como se muestra en la presente figura en la comparativa realizada con corte de los últimos 2 años a nivel
nacional CodeIgniter sobresale de los demás frameworks como Yii y CakePHP. Elaboración y fuente tomado de
(Google Trends, 2021).
Como se puede observar Figura 13 el Framework CodeIgniter no presenta competencia de
los otros frameworks a nivel nacional, unas de las características que hace que Codeigniter sea una
de los mejores framewoks es que es una herramienta Open source, Por este motivo CodeIgniter
fue seleccionado como herramienta para el desarrollo de este proyecto de titulación.
Así mismo elaboró un análisis comparativo a nivel global de este framewok cuyo corte es
de 2 años y que se presenta a continuación, en la Figura 14.

100
Figura 14
Análisis comparativo a nivel global: CodeIgniter vs Yii vs CakePHP
Nota: Como se muestra en la presente figura en la comparativa realizada con corte de los últimos 2 años a nivel global
CodeIgniter sobresale de los demás frameworks como Yii y CakePHP. Elaboración y fuente tomado de (Google
Trends, 2021)
Como se puede observar Figura 14 el Framework CodeIgniter no presenta competencia de
los otros frameworks a nivel global como Yii y CakePHP. En la actualidad CodeIgniter es uno de
los frameworks más populares en comparación con los demás frameworks a nivel global en los
últimos 2 años. Por ello, en el presente trabajo de titulación se propuso desarrollar el prototipo de
aplicación web progresiva haciendo uso de esta herramienta de desarrollo.
Comparativa de los frameworks CodeIgniter, CakePHP y Yii
A continuación, en la Tabla 10 se presenta algunas de las características de los frameworks
que fueron utilizados en las comparaciones de la línea de tendencia CodeIgniter, CakePHP y Yii.
101
Tabla 10
Cuadro comparativo de los frameworks CodeIgniter, CakePHP, y Yii
Frameworks Características
CodeIgniter - Arquitectura MVC (Modelo-Vista-Controlador).
- Amplia documentación.
- Licencia open source.
- Permite la reutilización de código.
- Posee un motor de plantillas propio.
- Facilidad de instalación.
- Estandarización de código.
- Posee funciones de validación de formularios y datos.
- Ligereza (ocupa menos 2MB).
- Permite el almacenamiento en caché.
- Provee de un alto rendimiento
- Protección incorporada contra ataques CSRF y XSS.
CakePHP - Arquitectura MVC (Modelo-Vista-Controlador).
- Desarrollo rápido.
- Plantillas rápidas y sencillas.
- Permite la personalización de URLs.
- CRUD integrado que permite la interacción con la base de
datos.
- Funciones de validación.
Yii - Arquitectura MVC (Modelo-Vista-Controlador).
- Generación automática de código.
- Manejo de errores.
- Control de termas.
- Permite usar características de otros Frameworks como
Zend y PEAR.
Nota: En esta tabla se presenta una comparación de algunas de las características importantes de los framework
utilizados en el análisis de tendencia de la Figura 13 y Figura 14. Elaboración: Propia de los autores. Fuente: Propia
de la investigación.
Bootstrap
Definición
Bootstrap es un framework Front-End desarrollado en el 2011 por Twitter, es una
herramienta open source que combina HTML, CSS Y JavaScript. Este framework es utilizado para
102
crear interfaces web sencillas y responsive, lo cual permite que el diseño de la interfaz sea
adaptable para todo tipo de dispositivos y pantallas. Bootstrap no tiene plantillas prediseñadas en
HTML y CSS, lo cual ayuda a los desarrolladores a ahorrar de tiempo en el proceso de maquetación
de interfaces web (Ovando, 2019). Por lo cual, se eligió este framework, ya que es uno de los más
populares para el desarrollo de sitios web y que además facilita el diseño responsive para que se
adapte a cualquier computadora, teléfono inteligente o tablet sin sacrificar la usabilidad y
navegación de las pantallas.
Características de Bootstrap
A continuación, se presenta una lista de las características más importante con las que
cuenta el framework Bootstrap según (Ovando, 2019):
 Es de código abierto, y todo su código se encuentra actualizado en el repositorio de
Github.
 Gracias a las plantillas prediseñadas de Bootstrap permite a los desarrolladores la
creación de sitios web de manera muy sencillas.
 Se integra perfectamente con librerías de Javascript.
 El uso de Sass y Less permite mejorar la experiencia en el desarrollo de aplicaciones
web.
 Es compatible con gran parte de los navegadores.
 Dispone de gran cantidad de documentación, tanto en su portal como en páginas web
especializadas.
 Utiliza componentes esenciales para los desarrolladores como: jQuery, GitHub,
HTML5, CSS3, entre otros.
 Bootstrap facilita la maquetación por columnas.

103
 Sus plantillas son de sencilla adaptación responsive.
El framework Bootstrap es una herramienta muy potente utilizada para desarrollar
interfaces de usuario y adaptables a cualquier tipo de dimensiones de pantalla y dispositivos, por
este motivo es uno de los framework más populares para los desarrolladores al momento de crear
aplicaciones web.
A continuación, en la Tabla 11 se presenta algunas de las ventajas y desventajas que posee
el framework Bootstrap.
Tabla 11
Ventajas y desventajas de Bootstrap
Se puede diseñar un sitio web utilizando Este framework se debe utilizar desde el inicio
diferentes elementos como HTML, CSS y de un proyecto, ya que puede tener fallas si lo
JavaScript. hace en un proyecto iniciado.
Utiliza HTML5, CSS3, jQuery, CodeIgniter, Es complicado cambiar de versión si ha
entre otros. realizado modificaciones profundas.
Incluye Grid system: muy útil para maquetar Algunas de las funciones, se necesita utilizar
por columnas Javascript y jQuery.
Las plantillas de Bootstrap son de fácil uso y Bootstrap por defecto te trae anchos, márgenes
su adaptación es responsive. y altos de línea, y realizar cambios específicos.
Tiene integrado las librerías JavaScript.
Es un lenguaje de las hojas de estilo CSS.
Facilita el diseño de las interfaces.
Nota: En la presente tabla se muestra algunas de las ventajas y desventajas que posee el framework Bootstrap.
Elaboración: Propia de los autores. Fuente: (Ovando, 2019).
Además, Bootstrap se basa en la simplicidad de sus interfaces, lo cual es una tendencia del
mercado, para facilita su utilidad en los dispositivos más pequeño.

104
Línea de tendencia
A continuación, en la Figura 15 y Figura 16 se presenta el análisis de las tendencias
asociados a los Frameworks para desarrollos de interfaces web que se está utilizando para el
desarrollo de este proyecto de titulación, se han considerados cortes de los últimos 2 años a nivel
nacional y global.
Figura 15
Análisis comparativo a nivel nacional: Bootstap vs Foundation vs Tailwind
Nota: Como se puede visualizar en la presente figura en el análisis comparativo realizado con corte de los últimos 2
años a nivel nacional Bootstrap es el mejor framework para desarrollar interfaces a comparación de los otros.
Elaboración y fuente tomado de (Google Trends, 2021)
En la Figura 15 el framework Bootstrap a nivel nacional no presenta competencia frente a
los otros framework ya que Bootstrap permite de manera fácil e intuitiva desarrollar interfaces web
optimizadas, esta herramienta es muy sencilla de utilizar, además permite crear aplicaciones web
adaptable a todo tipo de pantalla.
Así mismo elaboró un análisis comparativo a nivel global de este framework, cuyo corte
es de 2 años y que se presenta a continuación en la Figura 16.

105
Figura 16
Análisis comparativo a nivel nacional: Bootstap vs Foundation vs Tailwind
Nota: Como se puede se puede observar en la presente figura en el análisis realizado con corte en los últimos 2 años
a nivel global Bootstrap sobresale de los demás frameworks para el desarrollo de interfaces web. Elaboración y fuente
tomado de (Google Trends, 2021)
Como se pudo observar en la Figura 16 el framework Bootstrap a nivel global se posicionó
como el framewrok de desarrollo de interfaces más utilizado en comparación con Foundation y
Tailwind. Por tal motivo, esta herramienta fue elegida como el framework para el desarrollo de
este proyecto de titulación.
Vue.js
Definición
Vue.js es framework de código abierto que es usado principalmente para desarrollar
interfaces de usuario (UI) y páginas web completas de manera sencilla. Vue.js es un marco
progresivo para creación de aplicaciones de una página y está desarrollado para JavaScript. Ha
sido diseñado para escalabilidad e incrementalidad, además de ser fácil de integrar con otras
106
bibliotecas enfocadas en la capa de vista (Space-O Technologies, 2021). Es por esto que este
framework se utilizará como herramienta para el desarrollo del presente proyecto de titulación,
debido a que posee una forma sencilla de organizar el código por medio de pequeños componentes
que contienen todo el HTML, CSS y JavaScript necesario para funcionar como una pieza
independiente.
Características
Según (Macharia, 2021) estas son las características más importantes que presenta el
framework Vue.js:
 Enlace de datos: Una de las características con las que cuenta Vue.js es el enlace de datos,
la cual facilita la manipulación de las interfaces HTML.
 Transiciones: Vue.js proporciona varios métodos para aplicar transiciones cuando se
inserta o elimina un elemento de la interfaz de usuario del DOM.
 Propiedades calculadas: Con Vue.js no se necesita ningún código agregado, ya que
responde a los cambios realizados en la interfaz de usuario y luego realiza los cálculos. Una
propiedad calculada se usa para cualquier lógica que requiera múltiples expresiones.
 Componentes: Los componentes son una de las características más importante del
framework Vue.js, debido a que facilitan la extensión de elementos HTML para
proporcionar widgets reutilizables.
 Directivas personalizadas: Esta característica proporcionan una estructura para analizar
los cambios de datos para un comportamiento DOM impredecible.

107
Como se pudo observar el framework Vue.js cuenta con unas características únicas que
brindan facilidad a los desarrolladores para crear interfaces de usuario de manera más rápida y
además permite la reutilización de códigos.
En la Tabla 12 que se muestra a continuación se puede observar algunas de las ventajas y
desventajas que posee el framework Vue.js.
Tabla 12
Ventajas y Desventajas de Vue.js
Vue.js es bastante ligero, pesando apenas Vue.js es ligeramente menos popular que
23kb. otros frameworks como React o Angular.js.
La reutilización de código con Vue.js es más Vue.js no es un marco en un sentido
sencilla. completo.
Es un framework fácil de aprender para los El tiempo utilizado para integrar nuevos es
desarrolladores. mayor.
Vue.js tiene documentación muy completa y
bien escrita.
Es un framework de código abierto.
Nota: En la presente se puede observar alguna de las ventajas y desventajas con las que cuenta el frameworkVue.js.
Elaboración: Propia de los autores. Fuente tomado de (Dobrakowski, 2021).
Línea de tendencia
asociados a los Frameworks Vue.js, AngularJs y Backbone.js utilizados para el desarrollo de la
capa de Front-End y que se utilizará para el desarrollo de este proyecto de titulación, se han
considerados cortes de los últimos 2 años a nivel nacional y global.

108
Figura 17
Análisis comparativo a nivel nacional: Vue.js vs AngulasJS vs Backbone.js
Nota: Como se puede observar en esta figura corte de los últimos 2 años a nivel global Vue.js framework de JavaScript
más utilizado para el desarrollo de la capa de Front-End en comparación con otros. Elaboración y fuente tomado de
Como se observa en la Figura 17 el framework Vue.js a nivel nacional no presenta
competencia frente a los otros frameworks de renombre como es el caso de AngularJs y
Backbone.js, esta herramienta es muy sencilla de utilizar, además permite crear aplicaciones web
ligeras y de alto rendimiento.
Así mismo elaboró un análisis comparativo a nivel global de este framework, cuyo corte
es de 2 años y que se presenta a continuación en la Figura 18.

109
Figura 18
Análisis comparativo a global: Vue.js vs AngulasJS vs Backbone.js
Nota: Como se puede observar en esta figura corte de los últimos 2 años a nivel global Vue.js framework de JavaScript
más utilizado para el desarrollo de la capa de Front-End en comparación con otros. Elaboración y fuente tomado de
En la Figura 18 se presentó el análisis de las tendencias asociados a los framework de
AngularJS y Vue.js y Node.js, donde se pudo observar que Vue.js está posicionado en el primer
lugar como framework para el desarrollo de aplicaciones web más popular, se han considerados
cortes de los últimos 2 años a nivel nacional y global.
Lenguajes de programación
En los siguientes apartados se presentan definiciones, conceptos, características ventajas y
desventajas, líneas de tendencias, de los lenguajes de programación que se utilizaran para el
desarrollo del presente proyecto de titulación.

110
PHP
Definición
PHP es un lenguaje de programación de código abierto, diseñado para el desarrollo de
páginas web, y que posee una alta flexibilidad y compatibilidad con las bases de datos. Es un
lenguaje interpretado de licencia open source utilizado originalmente para desarrollar aplicaciones
que se ejecutan en el lado del servidor y que puedan generar código dinámico en la World Wide
Web (M. Arias, 2017). En el lenguaje de programación PHP por lo general su código está del lado
del servidor y este código es interpretado por un servidor web con un módulo de procesador de
PHP que genera páginas Web dinámicas.
PHP es utilizado en la mayoría de los servidores web y en gran parte de los sistemas
operativos y plataformas sin ningún costo. A continuación, se presenta una definición.
PHP es un lenguaje de script del lado del servidor que le permite crear páginas web
dinámicas las cuales pueden generar todo o parte del contenido cuando se llama a la página,
gracias a la información recopilada en el formulario y recuperada de la base de datos.
(Heurtel, 2016)
Es por esto que, el uso de este lenguaje de programación es de gran importancia para el
desarrollo del presente proyecto, ya que es uno de los más utilizado por los desarrollares para la
creación de aplicaciones web debido a que posee un conjunto de características avanzadas.
Arquitectura de PHP
A continuación, en la Figura 19 se presenta la arquitectura funcional del lenguaje de
programación PHP.
111
Figura 19
Arquitectura funcional de PHP
Nota: En la presente figura se puede visualizar la arquitectura funcional de PHP. Elaboración y Fuente: (Sierra &
Espinoza, 2018).
Características de PHP
PHP es un lenguaje muy fácil de aprender y entender, ya que posee características
avanzadas lo que lo hace factible para los desarrolladores que crean aplicaciones web. Según (M.
Arias, 2017) las características con las que cuenta PHP son las siguientes:
 PHP posee un gran velocidad y robustez.
 Es un lenguaje de programación orientado a objetos.
 Es independiente de plataformas.
 PHP es un lenguaje de código abierto.
 Cuenta con sintaxis similar a C++ y Perl.
 Es un lenguaje multiplataforma.
112
En conclusión, las características que posee PHP son de gran ayuda para los
desarrolladores, ya que proveen de grandes funcionalidades, las cuales permiten crear aplicaciones
web rápidas, robustas y seguras, elementos que son claves para el buen desempeño de todo servicio
web.
En la Tabla 13 que se presenta continuación, podemos observar algunas de las ventajas y
desventajas que posee el lenguaje de programación PHP.
Tabla 13
Ventajas y Desventajas de PHP
Es orientado al desarrollo de aplicaciones web Por seguridad la ejecución de una aplicación
dinámicas con acceso a información se tendría que hacer en un servidor propio.
almacenada en una Base de Datos.
Su codificación es invisible al navegador y No es diseñado para la creación de
cliente, esto hace que sea seguro y confiable. aplicaciones a gran escala.
Posee conexión con los múltiples motores de Si no se configura correctamente se tendrá
bases de datos. inseguridad.
Es fácil de utilizar y posee un alto Es necesario la instalación de un servidor web.
rendimiento.
Capacidad para ampliar su potencial,
empleando una enorme cantidad de módulos.
Es un lenguaje open source.
Es un lenguaje multiplataforma.
Nota: En la presente tabla se puede observar algunas de las ventajas y desventajas con las que cuenta del lenguaje de
programación PHP. Elaboración: Propia de los autores. Fuente: (Hoo, 2018).
El uso del lenguaje de programación PHP resulta muy factible, ya que permite una rápida
creación a los desarrolladores, así mismo su tiempo de respuesta es muy rápido lo cual ayuda a
que las páginas o sitios web carguen en un menor tiempo. También es una herramienta open source
y está al alcance de todos los desarrolladores.

113
Línea de tendencia
En las Figura 20 y Figura 21 se presenta el análisis de las tendencias asociados al lenguaje
de programación que se está utilizando para el desarrollo de este proyecto de titulación, se han
considerados cortes de los últimos 2 años a nivel nacional y global.
Figura 20
Análisis comparativo a nivel nacional: PHP vs Python vs Ruby vs Perl
Nota: Como se puede observar en esta figura en el corte de los últimos 2 años a nivel nacional PHP es el segundo
lenguaje de programación para desarrollar aplicaciones web. Elaboración y fuente tomado de (Google Trends, 2021).
Como se pudo observar en la Figura 20, el lenguaje de programación PHP no presenta
competencia con Ruby y Perl. Por otro lado, el lenguaje PHP presenta una ligera competencia con
Python, el cual está más inclinado hacia el desarrollo de proyectos con Inteligencia Artificial (IA),
mientras que PHP está desarrollado exclusivamente para scripting del lado del servidor, siendo así
el más utilizado para el desarrollo de páginas web.
Así mismo elaboró un análisis comparativo a nivel global de este lenguaje de programación
cuyo corte es de 2 años y que se presenta a continuación, en la Figura 21.

114
Figura 21
Análisis comparativo a nivel global: PHP vs Python vs Ruby vs Perl
Nota: Como se puede observar en esta figura en el corte de los últimos 2 años a nivel global PHP es el segundo
lenguaje de programación más utilizado a nivel global, solo por debajo de Python. Elaboración y fuente tomado de
Como se pudo observar en la Figura 21 el lenguaje de programación PHP no presenta
competencia con Ruby y Perl a nivel global. En la actualidad, PHP es uno de los lenguajes de
programación más populares para el desarrollo de aplicaciones web a nivel global en los últimos
2 años. Es esta una de las razones que en el presente trabajo de titulación se consideró desarrollar
el prototipo de aplicación web progresiva haciendo uso de este lenguaje de programación.
JavaScript
Definición
JavaScript es un lenguaje de programación utilizado principalmente para desarrollar sitios
web dinámicos, los programas no requieren ser compilados para poder ejecutarlos, por lo que se
pueden de manera directa en cualquier navegador web sin que necesita de procesos intermedios.
115
JavaScript es un lenguaje de programación que facilita implementar funciones complejas en una
página o sitio web, siempre que una página web realice algo más que mostrar información estática
para que el usuario solamente vea el contenido (Germain, 2020). Dado el contenido, se logra
observar que este lenguaje de programación está diseñado especialmente para el desarrollo de páginas
web dinámicas, lo cual permite una mayor interacción a los usuarios, por tal razón este lenguaje fue
seleccionado para el desarrollo del presente proyecto de titulación.
Características
JavaScript cuenta con una serie de características que dotan a las páginas web de
capacidades interactivas. Según (Jamsheer, 2019) estas son algunas de las características de
JavaScript:
 JavaScript permite la manipulación del DOM.
 Permite crear funciones asíncronas.
 Las funciones en JavaScript son tratadas con objetos.
 Está enfocado del lado del cliente.
 Es una plataforma independiente.
 La sintaxis que utiliza es parecida a la de Java.
 Cuenta con funciones incorporadas, las cuales permiten manejar hora y fecha.
 El modelo de JavaScript está basado en prototipos.
En la Tabla 14 a continuación, se puede visualizar algunas de las ventajas y desventajas
que posee el lenguaje de programación de JavaScript.

116
Tabla 14
Ventajas y Desventajas de JavaScript
Cuenta con una gran comunidad. La escritura es estática.
Tiene el apoyo de grandes empresas a nivel En un inicio su configuración es relativamente
global. tediosa.
Existe gran cantidad de proyectos de código Las bibliotecas cambian constantemente según
abierto desarrollados con JavaScript. la versión.
El desarrollo es dinámico.
Posee una gran compatibilidad con los
navegadores más populares.
Es un lenguaje fácil de aprender.
Nota: En la presente tabla se puede observar algunas de las ventajas y desventajas con las que cuenta el lenguaje de
programación PHP. Elaboración: Propia de los autores. Fuente: (Jakubowicz, 2018).
Ranking de los lenguajes de programación
Con la finalidad de elegir las herramientas adecuadas para el desarrollo de la aplicación
web se revisó la encuesta realiza en el año 2019 por Stack Overflow para desarrolladores; la cual,
es la encuesta más grande realizada cada año por personas que codifican en todo el mundo y que
abarca desde tecnologías empleadas para el desarrollo de software hasta preferencias laborales. A
continuación, en la Figura 22 se presenta el ranking de los lenguajes de programación más usados
según StackOverflow.
117
Figura 22
Ranking de los lenguajes de programación
Nota: En esta figura se muestra el ranking de los lenguajes de programación más utilizados por los desarrolladores en
el año 2019. Elaboración y Fuente tomado de (Stack OverFlow, 2019).
Como se pudo observar en la Figura 22 JavaScript quedó posicionado en primer lugar
como el lenguaje de programación más utilizado por los desarrolladores profesionales. Por otra
parte, se puede apreciar que PHP se encuentra entre los 10 lenguajes de programación más
utilizados, superando a otros lenguajes de renombre como Ruby y C++.
Gestor de Base de Datos
A continuación, se presentan definiciones, conceptos, características, ventajas y
desventajas y línea de tendencia, del gestor de base de datos que se utilizará para el desarrollo del
presente proyecto de titulación.

118
MySQL
Definición
Las mayorías de las organizaciones más populares del mundo confían en el gestor de base
de datos MySQL ya que les permite ahorrar recursos al momento de impulsar sitios web de alto
volumen y sistemas críticos. Según la página oficial de (MySQL, 2021) comenta que. “MySQL is
the most popular open source database in the world. Whether you're a fast-growing web property,
technology ISV, or large enterprise, MySQL can cost-effectively help deliver high-performance,
scalable database applications”. MySQL por su conectividad, velocidad, seguridad y su manejo de
grandes bases de datos hacen que sea uno de los de gestores de base de datos más populares en el
mundo del desarrollo.
MySQL es la base de datos de código abierto más popular del mundo, ya sea una propiedad
web en rápido crecimiento. Según (Lozano, 2018) define:
MySQL es uno de los sistemas de gestión de bases de datos más populares para
aplicaciones basadas en la web. Con este sistema de bases de datos se puede seleccionar y
administrar datos de una gran cantidad diferente de tipos de tablas, con una seguridad
formidable y sin desperdiciar los recursos del servidor. (p.9)
MySQL es un sistema de gestión de base de datos relacional que nos permite almacenar y
acceder a datos a través de múltiples motores de almacenamiento y está basado en modelo cliente-
servidor. El núcleo de MySQL se encuentra en el servidor MySQL, que administra todas las
instrucciones de la base de datos.
Características
Según (Robledano, 2019) estas son las principales características del gestor de base de
datos MySQL.
 Su funcionamiento está basado en la arquitectura de cliente-servidor.

119
 MySQL ofrece plena compatibilidad con SQL.
 MySQL admite la configuración de vistas personalizadas.
 Procesa tablas a través procedimientos almacenados.
 Permite automatizar ciertas tareas dentro de la base de datos.
 Permite la agrupación de transacciones, logrado juntarlas de manera múltiple desde
varias conexiones.
Como se pudo observar en la lista de características, MySQL ofrece funcionalidades que
facilita el trabajo a los desarrolladores, permitiéndoles personalizar vistas y automatizar tareas.
Arquitectura de MySQL
A continuación, en la Figura 23 se presenta la arquitectura funcional del gestor de base de
datos MySQeL.
Figura 23
Arquitectura de MySQL
Nota: En esta figura se presenta la arquitectura funcional del gestor de base de datos MySQL. Donde el servidor
MySQL aísla al programador de aplicaciones y al administrador de bases de datos de todos los detalles de
implementación de bajo nivel. Elaboración y Fuente tomada de (MySQL, 2021).
120
En la Tabla 15 se presenta a continuación podemos observar algunas de las ventajas y
desventajas que proporciona el gestor de base de datos MySQL.
Tabla 15
Ventajas y Desventajas de MySQL
MySQL es una herramienta open source En la documentación no se encuentran ciertas
soluciones de sus deficiencias.
Los requerimientos para la elaboración y Muchas de sus utilidades tampoco presentan
ejecución de programa son bajos. documentación.
MySQL no necesita la disposición del uso de Monitoreo del rendimiento de las aplicaciones
Hardware o Software de elevado desempeño en busca de fallos.
para la ejecución del programa.
Su rendimiento es bueno para realizar las No es tan intuitivo a comparación de los otros
operaciones. softwares.
Tiene facilidad para su instalación y Carece de eficacia al momento de realizar
configuración. modificaciones en la base de datos.
Es multiplataforma.
La probabilidad de corrupción de datos es
baja.
Entorno con seguridad y encriptación.
Nota: En esta tabla se presenta las ventajas y desventajas del gestor de base de datos MySQL. Elaboración: Propia de
los autores. Fuente tomado de (Robledano, 2019).
Línea de tendencia
asociados al gestor de base de datos utilizado para el desarrollo de este proyecto de titulación, se
han considerado cortes de los últimos 2 años a nivel nacional y global.

121
Figura 24
Comparación a nivel nacional: MySQL vs Oracle DataBase vs MongoDB
Nota: Como se puede observar en esta figura en el corte de los últimos 2 años a nivel nacional MySQL es el mejor
gestor de base de datos a comparación de los otros, como es el caso de Oracle DataBase y MongoDB. Elaboración y
En la Figura 24 el gestor de base de datos MySQL a nivel nacional no presenta competencia
frente a los otros gestores de base de datos, ya que es de los más populares para aplicaciones
basadas en la web. Para los desarrolladores MySQL posee una facilidad de manejo de los datos en
las distintas tablas.
Por este motivo el gestor de bases de datos MySQL, fue seleccionado como herramienta
para el desarrollo de este proyecto de titulación. Así mismo elaboró un análisis comparativo a nivel
global de este gestor de base de datos cuyo corte es de 2 años y que se presenta a continuación, en
la Figura 25.
122
Figura 25
Comparación a nivel global: MySQL vs Oracle DataBase vs MongoDB
Nota: Como se puede observar en esta figura en el corte de los últimos 2 años a nivel global MySQL es el mejor
gestor de base de datos a comparación de los otros, como es el caso de Oracle DataBase y MongoDB. Elaboración y
En la Figura 25 se puede observar que el gestor de base de datos MySQL a nivel global no
presenta competencia alguna frente a los otros gestores de base de datos como MongoDB y Oracle
DataBase, este gesto de base de datos es uno de los más populares para aplicaciones basadas en la
web.
Arquitectura MVC
Definición
El marco MVC (Modelo-Vista-Controlador) es un patrón de diseño utilizado
específicamente para el desarrollo de aplicaciones web. Este patrón consta de tres componentes
lógicos principales, los cuales son: modelo, vista, controlador. Según (Naranjo & Jimenez, 2017)
comenta que. “Este patrón de arquitectura de software se basa en las ideas de reutilización de
código y la separación de conceptos, características que buscan facilitar la tarea para el desarrollo
123
de aplicaciones y su posterior mantenimiento” (p.2). Por ello, esta arquitectura es importante, ya
que permite trabajar en diferentes capas al mismo tiempo, además tiene gran compatibilidad con
la mayoría de frameworks, uno de ellos es CodeIgniter, el cual se usará para el desarrollo de la
aplicación web.
A continuación, en la Figura 26 se puede observar la arquitectura del patrón de diseño
MVC.
Figura 26
Arquitectura MVC
Nota: Como se puede observar en la figura el patrón de diseño MVC se compone de tres capas, las cuales son: modelo,
vista, controlador. Elaboración y fuente obtenida de (Naranjo & Jimenez, 2017).
Componentes de la arquitectura MVC
Los componentes de la arquitectura MVC (Modelo-Vista-Controlador) son importantes, ya
que si uno de estos no se integrara de manera correcta podrían surgir fallas y problemas al momento
de ser aplicados a cualquier sistema o aplicación. Según (Naranjo & Jimenez, 2017) estos son los
componente del patrón de diseño MVC:
Modelo: Esta capa es la responsable de la lógica empresarial de la aplicación, ya que
contiene toda la lógica relacionada con los datos que trabaja el usuario, como las interfaces de la
aplicación, las bases de datos y sus campos.

124
Vista: Define la presentación de la aplicación, es decir, contiene la interfaz para que el
usuario pueda interactuar, además recopila información de los usuarios y se encarga de informar
al controlador.
Controlador: Este componente es la unidad central de la arquitectura MVC, se encuentra
entre el modelo y la vista, es el que permite la interconexión entre ambos por lo que actúa como
intermediario.
Ventajas y Desventajas de la arquitectura MVC
La arquitectura MVC proveen de una serie de beneficios a los desarrollares, ya que esta
tecnología permite dividir en capas la aplicación lo que a su vez brinda la posibilidad de trabajar
por separado sus componentes. A continuación, en la Tabla 16 se presenta las ventajas y
desventajas de la arquitectura MVC.
Tabla 16
Ventajas y desventajas de la arquitectura MVC
Posee mecanismos de configuración de Requiere de una arquitectura inicial que
componentes complejos. incluya mecanismos de eventos.
Se puede construir varias vistas para un solo La separación en capas hace la aplicación sea
modelo. más compleja
Facilita la realización de pruebas unitarias.
Las vistas se actualizan automáticamente.
Las aplicaciones desarrolladas con el patrón
MVC son fácil de mantener, modificar y
extender.
Nota: En esta tabla se muestran las ventajas y desventajas del patrón MVC. La elaboración es propia. Fuente tomado
de (Naranjo & Jimenez, 2017).
125
La Organización
La farmacia Nicolás Bolívar fue fundada por el Sr. Bolívar Antonio Guartambel
Albarracín, el cual abrió sus puertas por primera vez el 11/11/2018, motivado y entusiasmado
deseaba formar su propia empresa para abrirse paso ante la sociedad y competir en el mercado
farmacéutico.
Misión
La misión de las empresas se puede definir como una declaración de su razón de ser. La
misión debe ser alcanzable en función a las actividades que se realiza en la organización. A
continuación, se presenta una definición.
Somos una organización que desea brindar un servicio de calidad, para mantener la salud
y el bienestar de la comunidad, ofreciendo servicios farmacéuticos y un amplio portafolio de
productos a precios accesibles, con una atención profesional, servicial y amigable. (Guartambel,
2021)
En conclusión, la misión que tiene la farmacia Nicolás Bolívar, es brindar con servicio de
calidad a sus clientes y satisfacer sus necesidades.
Visión
La visión de las empresas se refiere a los sueños y aspiraciones que tiene a largo plazo, esta
definición sirve como guía para la toma de decisiones estratégicas de la organización. A
continuación, se presenta una definición.
Ser una organización reconocida a nivel nacional por ofrecer un servicio de calidad y oferta
solidaria de productos, con mayor soporte a los clientes ofreciéndoles un trato amable y respetuoso.
(Guartambel, 2021)
126
En conclusión, la visión que tiene la farmacia Nicolás Bolívar, es liderar el mercado
farmaceútico ofreciendo productos de alta calidad a aprecios acequibles.
Valores Institucionales
Según (Guartambel, 2021) estos son los valores institucionales de la farmacia Nicolás Bolívar:
Responsabilidad
Estamos comprometidos con la sociedad y el buen servicio a los demás.
Excelencia
Nos enfocamos en mejorar continuamente la calidad de nuestros servicios.
Respeto
En nuestra organización brindamos el respeto que se merece a nuestros colaboradores,
clientes y proveedores.
Honestidad
La verdad y la honradez son las cualidades que caracterizan las acciones de nuestra
organización.
Confianza
Nos esforzamos en generar credibilidad y seguridad a nuestros usuarios, por el
cumplimiento de nuestras promesas y compromiso con la sociedad.
En conclusión, estos valores institucionales sirven de apoyo para la misión planteada que
tiene la farmacia Nicolás Bolívar.
Organigrama de la farmacia Nicolás Bolívar
Un organigrama es una representación gráfica la cual se desarrolla con el objetivo de
aportar información referente a la estructura de la organización, el orden jerárquico, las

127
responsabilidades y acciones que cumple cada una de las personas dentro de la organización. A
continuación, en la Figura 27 se muestra la estructura jerárquica de la farmacia Nicolás Bolívar
que ha manejado a lo largo de los años.
Figura 27
Organigrama de la farmacia Nicolás Bolívar
Nota: En esta figura se puede observar la estructura organizacional actual de la farmacia Nicolás Bolívar. La
elaboración es propia. Fuente: Propia de la investigación.
Cadena de valor
La cadena de valor de negocio es un instrumento que sirve para analizar las actividades
principales de una empresa u organización, con el objetivo de identificar cuáles son las actividades
que generan valor o ventaja competitiva en el servicio o producto final.
En la Figura 28 se muestra la cadena de valor perteneciente a la farmacia Nicolás Bolívar,
en el cual se encuentran las actividades primarias y de soportes realizadas en la empresa.

128
Figura 28
Cadena de valor de la farmacia Nicolás Bolívar
Nota: En la figura se muestra la cadena de valor perteneciente a la farmacia Nicolás Bolívar. La elaboración es propia.
Fuente: Propia de la investigación.
Análisis FODA
La Matriz FODA es un instrumento diseño para realizar un análisis interno y externo de la
organización, sus siglas representan el estudio de las fortalezas, oportunidades, debilidades y
amenazas. El objetivo principal de este análisis es permitir a las organizaciones desarrollar
estrategias de negocio a futuro.
A continuación, en la Figura 29 se representan las fortalezas, debilidades y amenazas que
presenta la farmacia Nicolás Bolívar.

129
Figura 29
Matriz FODA
Nota: Se realizó una entrevista con el propietario de la farmacia Nicolás Bolívar para la realización de la matriz
FODA. La elaboración es propia de los autores. Fuente: Propia de la investigación.
Análisis PESTEL
El análisis PESTEL es una herramienta utilizada por las organizaciones para analizar los
factores que tienen impacto dentro de la empresa. Esta herramienta ayuda a evaluar los riesgos
externos de la empresa y así crear una ventaja competitiva.
Para el presente trabajo de titulación se aplicará la matriz PESTEL la cual es de gran
importancia, ya que se encuentra conformada por 6 factores, entre estos tenemos: Político,
Económico, Social, Tecnológico, Ecológico y Legal.

130
Figura 30
Matriz PESTEL
Nota: Se realizó una entrevista con el propietario de la farmacia Nicolás Bolívar y se levantó información desde
distintas fuentes como: tesis de grado y artículos para la realización de la matriz PESTEL. La elaboración es propia
de los autores. Fuente: Propia de la investigación.
Preguntas científicas a contestarse
A continuación, se presenta la pregunta científica la cual está basada en la problemática
que tiene actualmente el proceso de gestión de ventas en la farmacia Nicolás Bolívar.
¿La automatización del proceso de la gestión de ventas logrará disminuir el nivel de
dificultad de dicho proceso en la farmacia Nicolás Bolívar?
Definiciones conceptuales
Aplicación Nativa: Una aplicación nativa es un software desarrollado específicamente
para un sistema operativo en particular con el propósito de que puedan aprovechar al máximo las
funciones del dispositivo en el que se ejecuten.

131
Aplicación Web Progresiva (PWA): Una aplicación web progresiva es un tipo de
aplicación basada en navegadores que cuenta con todos los beneficios de una aplicación móvil
nativa a la cual se puede acceder sin la necesidad de descargarlas de una tienda de aplicaciones.
Aplicación Web: Una aplicación web es un tipo de software que se ejecuta desde un
servidor web y al cual lo usuarios puede acceder a través de Internet mediante el empleo de los
navegadores web.
Automatización: La automatización hace referencia al uso de la tecnología para llevar a
cabo determinadas tareas o procesos con poca o ninguna intervención humana. (RedHat, 2019)
Cliente: Se denomina cliente a la persona o entidad que realiza un pago o transferencia a
cambio de recibir un bien o servicio. Se refiere a una persona o entidad que utiliza un recurso o
servicio proporcionado por otro. (Raffino, 2020)
CodeIgniter: Es un framewok de PHP para desarrollo de aplicaciones web open source,
está basado en el patrón de desarrollo MVC (Modelo-Vista-Controlador), también consta de una
amplia librería y paquetes que permiten a los programadores desarrollar aplicaciones o páginas
web con mayor rapidez.
Framework: Un framework es una estructura que se utiliza para crear aplicaciones web
que permitiendo a los programadores crear interfaces interactivas y ejecutarlas en máquinas
controladas por proveedores de aplicaciones. (Gil et al., 2018)
Promoción: La promoción es una de las herramientas del Marketing que tiene como
propósito persuadir o informar de manera directa o indirecta a un potencial cliente sobre los bienes
o servicios con los que cuenta la empresa.

132
Service Worker: Un service worker consiste en un archivo de JavaScript que permite tener
una aplicación web ejecutándose en segundo plano, lo cual brinda la posibilidad de ejecutar
diversas funciones que no necesariamente dependen de una interacción con el usuario.
Venta: La venta es una actividad que consiste en proveer de un producto o servicio a otra
persona a cambio de una retribución económica.

133
CAPÍTULO III
PROPUESTA TECNOLÓGICA
Como se ha indicado en las secciones anteriores, este proyecto tiene como objetivo el
desarrollo de un prototipo de aplicación web progresiva para la farmacia Nicolás Bolívar que le
permitirá disminuir el nivel de dificultad en la gestión de ventas y actividades que se realizan
cotidianamente, el cual se lleva a cabo mediante el uso de cuadernos y herramientas de Microsoft
Office como Excel 2016 que son utilizados para el registro de información.
Se requiere que la aplicación web permita a los usuarios clientes el registro de datos,
compra, consulta, y visualización de productos y promociones, así como el ingreso, modificación,
eliminación y consulta de productos y promociones para los usuarios administradores, permitiendo
optimizar y agilizar los procesos ejecutados en la empresa, disminuyendo el nivel de dificultad y
el tiempo en que tarda la realización de ventas.
Análisis de factibilidad
El proyecto a continuación se basa en el desarrollo de un prototipo de aplicación web con
tecnología PWA para la gestión de ventas dirigido a la farmacia Nicolás Bolívar, este proyecto
propone una solución a la a problemática tratada en puntos anteriores, un medio para la
automatización de procesos que actualmente son realizados de manera manual y que dificultan la
realización las actividades.

134
De esta manera en los apartados a continuación se procede a realizar el análisis de
factibilidad para evaluar la probabilidad de éxito del presente proyecto, así como, el impacto dentro
de la farmacia Nicolás Bolívar y sus clientes.
Factibilidad operacional
El desarrollo de un prototipo aplicación web progresiva para la gestión de ventas de la
farmacia Nicolás Bolívar, se presenta como un proyecto factible y se cuenta con la autorización
de la empresa, misma que se puede observar en el Anexo 3 correspondiente a la carta de
autorización.
Este proyecto tiene como finalidad disminuir el nivel dificultad para la realización de
ventas mediante la automatización de procesos, además que provee de un medio digital al cual los
clientes y potenciales clientes pueden tener acceso a información referente a los productos y
servicios que ofrece la farmacia. Para el levantamiento de información del presente trabajo de
titulación se realizó una entrevista al propietario de la farmacia, la cual permitió determinar el
tiempo actual que toma las actividades llevadas a cabo aún de manera manual, mismas que se
pueden evidenciar en el Anexo 5.1 que corresponde al diagrama de flujo de procesos actual.
Teniendo como resultado que las actividades realizadas en el proceso de ventas actual le
toman al personal de la farmacia un tiempo de hasta 14 minutos, debido a que no cuentan con un
sistema que les permita realizar el ingreso y consulta de información lo que conlleva a un proceso
tardío.
Se estima que con el prototipo de aplicación web sean mejorados y optimizados los
procesos llevados a cabo para la realización de las ventas y que los tiempos ocupados en dichos
135
procesos sean como máximo de 5 minutos, tal y como se puede observar el diagrama de flujo de
procesos mejorado de la farmacia Nicolás Bolívar en el Anexo 5.2.
La aplicación propuesta para el presente trabajo de titulación busca que disponga de una
interfaz amigable y fácil de utilizar tanto para el personal de la farmacia como para los clientes
con el fin de que puedan adaptarse a ella en el menor tiempo posible. Además, cabe señalar que
para el desarrollo de la aplicación web se utilizarán herramientas open source, lo cual reduce los
costos, dado el caso que la farmacia quiera utilizar la herramienta de pago no va a presentar riesgo
alguno.
Factibilidad técnica
De acuerdo la investigación que realizó se pudo observar que proceso de gestión de ventas
de la farmacia Nicolás Bolívar actualmente se está realizado de manera manual por lo que requiere
la sistematización de dicho proceso con el propósito de disminuir el nivel de dificultad para realizar
las ventas y mejorar el tiempo utilizado para la atención al cliente.
Con lo anteriormente expuesto se propone el desarrollo de un prototipo de aplicación
progresiva para mejorar el proceso de gestión de ventas, mismo que será desarrollado con
herramientas open source para así evitar costos de licencias, por otra parte, se contará con un
hosting y dominio propio para el prototipo de aplicación web a fin de que se pueda visualizar su
funcionamiento.
A continuación, en la Tabla 17 y Tabla 18 se detallan las herramientas de software y
hardware que se utilizarán para el desarrollo del presente proyecto.

136
Tabla 17
Herramientas de software utilizadas para el presente trabajo de titulación
Tecnología Versión
Framework CodeIgniter v.3.1.11
Framework Vue.js v.26.14
Lenguaje de programación PHP v.7.4.16
Lenguaje de programación JavaScript
Base de datos MySQL v.8.1
Sistema Operativo Windows 10 pro
Sistema Operativo Android 7 en adelante
Navegador Google Chrome v.76.0.3808.100 en
adelante
Hosting y dominio Favola Hosting
Nota: En esta tabla se presentan las herramientas de software que se han seleccionado para el presente proyecto, una
vez que se ha realizado un análisis comparativo con otras de iguales bondades en el mercado tecnológico actual. La
elaboración es propia de los autores. Fuente: Propia de la investigación.
Tabla 18
Hardware utilizados para el presente trabajo de titulación
Tecnología Características
PC Dell Core i3, 8GB RAM, Disco duro 1TB
PC Dell Core i5, 8GB RAM, Disco duro 1TB
Nota: En esta tabla se presentan las herramientas hardware que se han seleccionado para el presente proyecto, una
vez que se ha realizado un análisis comparativo con otras de iguales bondades en el mercado tecnológico actual. La
Factibilidad legal
En relación con el análisis de factibilidad legal, se determinó que el presente trabajo de
titulación es viable, ya que no infringe ninguna ley establecida por la Constitución del Ecuador,
esto debido a que las herramientas tecnológicas que se están utilizando para el desarrollo son
totalmente de código abierto, en el Anexo 6 se mencionan las leyes que influyen en el desarrollo
del proyecto. Así mismo, en el Anexo 7 se puede observar los criterios éticos considerados para el
presente trabajo de titulación.

137
Factibilidad económica
En el análisis de factibilidad económica del presente proyecto, se determinó que no
presenta problema, ya que las herramientas utilizadas para el desarrollo de la aplicación son open
source, lo que conlleva a que no exista la necesidad de adquirir licencias de software. Por otro
lado, cabe mencionar que se utilizará un hosting y dominio donde estará alojada la aplicación web
para comprobar su funcionamiento, este recurso no representa ningún riesgo ya que el costo de
inversión es muy bajo.
A continuación, en las siguientes tablas se presentan los recursos utilizados para el
desarrollo del presente proyecto:
En la Tabla 19 se muestra a detalle el costo de los recursos humanos invertidos para el
Tabla 19
Costos por recursos humanos en el proyecto
Cargo Costo Cantidad Tiempo Total

Investigador $400,00 1 4 meses $1.600,00
Desarrollador $400,00 1 4 meses $1.600,00
Total $3.200,00
Nota: En esta tabla se presentan los principales recursos que se han considerado en el presente proyecto. La
En la Tabla 20 se muestran los recursos de hardware y su respectivo costo de inversión que
se requieren para el desarrollo del proyecto.

138
Tabla 20
Costos de inversión en hardware en el proyecto
Equipo Costo Cantidad Total

Pc Dell Core i5 $500,00 1 $500,00
Pc Dell Core i3 $400,00 1 $400,00
Smartphone (Android) $80,00 $80,00
Total $980,00
Nota: En esta tabla se presenta la inversión a realizar en hardware que se ha considerado en el presente proyecto. La
En la Tabla 21 se muestra la lista de las tecnologías requeridas para el desarrollo del
proyecto, así como su respectivo costo de inversión.
Tabla 21
Costo de inversión de software en el proyecto
Descripción Costo Cantida Total

d
CodeIgniter v.3.1.11 $0,00 1 $0,00
Vue.js v.26.14 $0,00 1 $0,00
MySQL v.5.7.31 $0,00 1 $0,00
Windows 10 pro $0,00 1 $0,00
Android 7 en adelante $0,00 1 $0,00
Google Chrome v.76.0.3808.100 en adelante $0,00 1 $0,00
Hosting y dominio (1 año) $24,00 1 $24,00
Total $24,00
Nota: En esta tabla se presentan las herramientas que se han seleccionado para el presente proyecto, una vez que se
ha realizado un análisis comparativo con otras de iguales bondades en el mercado tecnológico actual. La elaboración
es propia de los autores. Fuente: Propia de la investigación.
En la Tabla 22 se muestran los costos varios por parte del equipo de investigación y de

139
Tabla 22
Resumen de costos varios del proyecto
Descripción Costo (mes) Tiempo Total

Suministros y materiales de oficina $5,00 4 meses $20,00
Movilización $7,00 4 meses $28,00
Luz $12,00 4 meses $48.00
Internet $41,00 4 meses $164,00
Total $260,00
Nota: En esta tabla se presenta el resumen de los costos varios para el presente proyecto. La elaboración es propia de
los autores. Fuente: Propia de la investigación.
En la Tabla 23 se muestra de detalle el resumen de los recursos con su respectivo costo de
inversión, que son requeridos para la elaboración del proyecto, dichos recursos se dividen en:
recurso humano, hardware, software y costos varios.
Tabla 23
Resumen de costos de inversión en el proyecto
Tecnología Total
Recurso humano $3.200,00
Hardware $980,00
Software $24,00
Costos varios $260,00
Total $4.446,00
Nota: En esta tabla se presenta un resumen de los costos de inversión para el presente proyecto. La elaboración es
propia de los autores. Fuente: Propia de la investigación.
Como resultado el costo de inversión para cumplir con la elaboración del proyecto es de
$4.446,00 en un periodo de 4 meses, costo que ha sido elaborado por el equipo de desarrollo e
investigación, por lo tanto, los recursos de hardware y costos varios pertenecen a los
desarrolladores, debido a que estos recursos son necesarios para cumplir con el desarrollo del
presente proyecto. Además, los softwares que se utilizaron son completamente open source, los
cuales se puede adquirir directamente desde los sitios oficiales.

140
1. Con el desarrollo de la aplicación web progresiva la farmacia Nicolás Bolívar podrá
obtener los siguientes beneficios:
2. Disminución del nivel de dificultad en la gestión de ventas.
3. Reducción en el tiempo de los procesos de gestión de ventas.
4. Acceso a información de manera segura e inmediata.
5. Integridad de la información manejada por la farmacia, ya que estará alojada en la base de
datos.
6. Mejorar el control de los productos en stock.
7. Visualización de las ventas realizadas.
8. Medio de comunicación en tiempo real con los clientes.
9. Reducción del uso de cuadernos, papeles y herramientas de Microsoft Office.
Metodologías del proyecto
El presente trabajo de titulación se basa en el uso de diferentes tipos de metodologías, las
cuales fueron elegidas porque permiten realizar un estudio y análisis más completo del problema,
dentro de estas se mencionan: la metodología exploratoria y descriptiva que ayudan a obtener una
visión más amplia del tema en cuestión, la Metodología de Marco Lógico (MML) que permite
identificar y analizar el problema así como sus causas y consecuencias, la metodología SCRUM
la cual ayudó a gestionar de manera adecuada el proyecto y que este cumpliera con sus fases
respectivas, y por último la metodología XP (Extreme Programming) la cual se basa en la
retroalimentación constante entre el equipo de desarrollo y el cliente, lo que permitió desarrollar
la aplicación web de la manera más apropiada.

141
Metodología de investigación
Para el presente trabajo de titulación se empleó la metodología exploratoria y descriptiva,
las cuales permitieron estudiar el problema ampliamente y así obtener un levantamiento de
información inicial y conocer el funcionamiento de los procesos llevados a cabo, esto mediante la
investigación realizada en la cual se revisó distintas fuentes con el fin de conseguir un buen
análisis. En los aparatos a continuación se presenta las técnicas de investigación utilizadas.
Investigación exploratoria
Este tipo de investigación se utilizó con el propósito de realizar un correcto levantamiento
de información, dicha información se buscó en distintas fuentes como artículos, portales
corporativos, trabajos de titulación, libros, entre otros.
Según Hernández, Fernández y Baptista (2017) afirma que. “Los estudios exploratorios se
realizan cuando el objetivo es examinar un problema de investigación poco estudiado, del cual se
tienen muchas dudas o no se ha abordado antes” (p.91). El uso de esta metodología fue de gran
importancia porque ayudó a conocer los procesos y subprocesos ejecutados en la gestión de ventas
en base a un análisis realizado de la información que se obtuvo de la investigación.
Adicionalmente, fue necesario consultar información desde distintas fuentes con el fin de realizar
un análisis desde el punto de vista tecnológico para identificar las herramientas informáticas
adecuadas para el desarrollo del presente trabajo de titulación.
Investigación descriptiva
Por otra parte, se utilizó la metodología de investigación descriptiva, la cual tiene como
propósito identificar rasgos, características y especificaciones importantes del fenómeno o
población estudiando con base a la realidad del escenario planteado. El estudio descriptivo tiene
142
como propósito identificar los atributos, características y perfiles de individuos, grupos,
comunidades, procesos, objetos u otros fenómenos bajo análisis (Hernández et al., 2017a). Por
tanto, el empleo de esta metodología fue de gran importancia, ya que permitió conocer los
problemas e inconvenientes que presenta la farmacia Nicolás Bolívar, ya que al no contar con
servicio web no logran gestionar de manera eficaz los procesos llevados a cabo para la realización
de ventas.
Población y muestra
Población
La población considerada para el presente trabajo de titulación es de 1’050.826, la cual
corresponde al número de habitantes de la parroquita Tarqui del cantón Guayaquil según el INEC
en el censo realizado del año 2010, misma que fue elegida para aplicar la encuesta. Según J. Arias
et al. (2016) afirman que. “La población de estudio es un conjunto de casos, definido, limitado y
accesible, que formará el referente para la elección de la muestra, y que cumple con una serie de
criterios predeterminados” (p.202). Por ello, se procedió a realizar la encuesta a la parroquita
Tarqui, la cual tiene objetivo recopilar información sobre los conocimientos y experiencia que
tienen los habitantes acerca del uso de las plataformas web y compras online.
Muestra
En esta sección del trabajo de titulación se presenta a detalle la aplicación del método de
muestreo, el cual sirve para representar una pequeña parte de la población para su análisis. La
muestra es el subgrupo de una población de interés de la cual se recolectará información, y que
debe definirse y delimitarse desde el comienzo con precisión, adicionalmente tiene que ser
representativo de la población (Hernández et al., 2017b). Por ello, es importante determinar la

143
muestra, ya que permite estudiar un segmento representativo de la población. Para el cálculo de la
muestra se considera la siguiente fórmula:
𝑃𝑥𝑄𝑥𝑁
𝑛=
(𝑁 − 1)𝐸 2 /𝐾 2 + 𝑃𝑥𝑄
P = Probabilidad de éxito (0.50)
Q = Probabilidad de fracaso (0.50)
N = Tamaño de la población (750)
E = Error de estimación (6 %)
K = # de desviación típica “Z” (1:68 %, 2:95,5%, 3:99.7 %)
n = Tamaño de la muestra (278)
0.50 𝑥 0.50 𝑥 1.050.826

𝑛=
(1.050.826 − 1)0.062 /22 + 0.50 𝑥 0.50
262.706
𝑛=
(1.049.826)(0.0036)/4 + 0.25
262.706
𝑛=
(1.049.826)(0.009) + 0.25
262.706
𝑛=
(9.4484) + 0.25
262.706
𝑛=
9.448
𝑛 = 278
Como resultado de la aplicación de la fórmula de muestreo, se logra obtener un total de
278 individuos a los cuales se les aplicará la encuesta mediante la modalidad online.
144
Procesamiento y análisis
Para la recopilación información del presente trabajo de titulación se llevó a cabo la
realización de una encuesta (véase el Anexo 8.1) dirigida a los habitantes de la parroquia Tarqui
del cantón Guayaquil, en la cual se plantearon 15 preguntas cerradas a través de la plataforma
Google Forms habilitada desde el 20 de julio del 2021 hasta el 5 de agosto del 2021. La aplicación
de esta encuesta tuvo como objetivo recopilar información sobre los conocimientos y experiencia
que tienen los usuarios sobre el uso de las plataformas web y compras online, lo que permitirá
medir la factibilidad de la propuesta. Finalmente, la información obtenida fue analizada mediante
la herramienta de Google Sheets y gráficos estadísticos para cada una de las preguntas.
Además, se realizó una entrevista conformada por 22 preguntas abiertas dirigida al
propietario de la farmacia Nicolás Bolívar, con el objetivo obtener información sobre los
problemas que presenta actualmente la organización y conocer los procesos llevados a cabo para
la realización de ventas de productos.
Técnicas de recolección de datos
La técnica de recolección de datos que se aplicó para el presente proyecto fue la entrevista
y la encuesta, mismas que se puede observar en el Anexo 8.1 y Anexo 8.2 correspondientes al
formato de la encuesta y entrevista.
La entrevista realizada permitió conocer los problemas y dificultades que se presenta
actualmente la farmacia Nicolás Bolívar, así como los roles con los que cuenta y los procesos
llevados a cabo a para la realización de las ventas.
Esta entrevista fue realizada por medio de la plataforma Zoom Meeting al propietario de la
farmacia, la cual consta de 22 preguntas abiertas. Por otro lado, la encuesta conformada por 15
preguntas realizada permitió verificar sobre la experiencia y concomimientos que tienen los
145
usuarios sobre el uso de los servicios web y compras en línea, lo cual ayudó a medir la factibilidad
que el desarrollo del presente trabajo de titulación.
Técnicas estadísticas para el procesamiento de la información
Para el presente proyecto de titulación se aplicará un tipo de muestreo aleatorio simple
para el levantamiento y procesamiento de información de la encuesta con las variables Género
(Femenino y Masculino) y Edad a la muestra con respecto a las preguntas que se plantean en el
formato de la encuesta, bajo la ejecución de una base conformada por las respuestas brindadas por
los habitantes de la parroquita Tarqui del cantón Guayaquil.
Técnicas para el Procesamiento y Análisis de Datos
Para la elaboración del formato de la encuesta que se encuentra en el Anexo 8.1 se tuvo la
revisión y aprobación de la tutora asignada, esta encuesta consta de 15 preguntas cerradas dirigida
a los habitantes de la parroquita Tarqui del cantón Guayaquil, con el propósito de recolectar y
analizar correctamente la información.
Con la aplicación de la entrevista la cual se puede observar en el Anexo 9 se logró recopilar
información sobre los problemas que presentan y los procesos que son llevados a cabo actualmente
de gestión de ventas de la farmacia Nicolás Bolívar.

146
Variable: Género
Tabla 24
Género
Opciones de respuesta Frecuencia Absoluta Frecuencia Relativa

Masculino 133 47,80%
Femenino 145 52,20%
TOTAL 278 100,00%
Nota: En la presente tabla se muestran los valores absolutos y relativos correspondientes al proceso de tabulación del
género seleccionado en la encuesta aplicada a los 278 individuos seleccionados para la investigación. Elaboración y
Fuente: Propia de los autores.
Figura 31
Género: Análisis gráfico del género elegido en las encuestas.
Nota: De un total de 278 personas encuestadas se puede observar que el 52,20% indica que pertenece al género
femenino, mientras que el 47,80% pertenece al género masculino. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura muestran que un 52,20% de la

población encuestada pertenece al género femenino; por otro lado, el 47,80% determina que
pertenece al género masculino, lo cual permite identificar que en su mayoría las personas que
realizan las compras o consultas de productos son mujeres.
147
Variable: Edad
Tabla 25
Edad

18 – 30 años 156 56,10%
31 – 43 años 78 28,10%
43 – 56 años 32 11,50%
Más de 56 años 12 4,30%
TOTAL 278 100,00%
Nota: En la presente tabla se muestran los valores absolutos y relativos correspondientes al proceso de tabulación de
la edad seleccionada en la encuesta aplicada a los 278 individuos seleccionados para la investigación. Elaboración y
Fuente: Propia de los autores.
Figura 32
Edad: Análisis gráfico de edad elegida en las encuestas.
Nota: De un total de 278 encuestados se observa que el 56,10% tienen entre 18 y 30 años de edad el cual representa
la mayor parte de la población; por otra parte, el 28,10% indica que se encuentra en un rango de 31 a 43 siento también
una parte representativa. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura indica que el 56,10% de las personas
encuestadas se encuentran en un rango de entre 18 y 30 años, el 28,10% está en 31 y 43 años, el
11,50% está entre 44 y 56 años de edad y finalmente el 4,30% representa a la población que cuenta
con más de 56 años edad siendo esta última la porción más baja.
148
Pregunta 1: ¿Tiene usted algún tipo de dispositivo móvil o computadora en casa?
Tabla 26
Pregunta 1: ¿Tiene usted algún tipo de dispositivo móvil o computadora en casa?

Computadora de escritorio 88 31,70%
Laptop 59 21,20%
Smartphone 119 42,80%
Tablet 9 3,20%
Otros 3 1,10%
TOTAL 278 100,00%
la Pregunta 1 aplicada en la encuesta a los 278 individuos seleccionados para la investigación. Elaboración y Fuente:
Propia de los autores.
Figura 33
Análisis gráfico de la pregunta número 1 de la encuesta
Nota: De un total de 278 encuestados se observa que el 42,80% cuenta con teléfono inteligente (Smartphone) en su
casa, el 31,70% disponen de computadora de escritorio, el 21,20 tienen laptop y el 3,20% y 1,10% corresponde a las
personas que cuenta con tablet y otros dispositivos. Elaboración y Fuente: Propia de los autores.
encuestadas cuentan con los smartphones en casa siendo esta la porción más grande, por otra parte,
el 31,70% tienen computadoras de escritorio, el 21,20% poseen laptops, el 3,20% con tablas y
finalmente el 1,10% manifestaron que cuentan con otros dispositivos.
149
Pregunta 2: ¿Qué sistema operativo usa actualmente en su dispositivo móvil?
Tabla 27
Pregunta 2: ¿Qué sistema operativo usa actualmente en su dispositivo móvil?

Android 237 85,30%
iOS 28 10,10%
Windows Phone 8 2,90%
Otros 5 1,80%
TOTAL 278 100,00%
Figura 34
Nota: De un total de 278 encuestados se observa que el 85,20% usa el sistema operativo Android en su dispositivo
móvil, un 10,10% usa iOS, el 2,90 %utiliza Windows Phone y 1,80% cuentan con otros sistemas operativos.
Elaboración y Fuente: Propia de los autores.
encuestadas usan el sistema operativo Android en su dispositivo móvil siendo esta la porción más
grande; por otra parte, el 10,10% cuentan con el sistema operativo iOS, el 2,90% manifestó que
usa Windows Phone y, por último, el 1,80% señaló que usan otros sistemas operativos.
150
Pregunta 3: ¿Qué sistema operativo usa actualmente en su computadora de escritorio o laptop?
Tabla 28
Pregunta 3: ¿Qué sistema operativo usa actualmente en su computadora de escritorio o laptop?

Microsoft Windows 234 84,20%
GNU/Linux 13 4,70%
Mac OS 21 7,60%
Otros 10 3,60%
TOTAL 278 100,00%
Figura 35
Nota: De un total de 278 encuestados se observa que el 84,20% usa el sistema operativo Microsoft Windows en su
computadora de escritorio o laptop, mientras que el 7,60% Mac OS, el 7,60% utiliza GNU/Linux y el 3,60% cuentan
con otros sistemas operativos. Elaboración y Fuente: Propia de los autores.
encuestadas usan el sistema operativo Microsoft Windows ya sea en su computadora de escritorio
o laptop, un 7,60% señaló que cuentan con Mac Os, el 4,70% de las personas manifestaron que
usan GNU/Linux y por último el 3,60% indicó que usan otros sistemas operativos siendo esta la
porción más pequeña.
151
Pregunta 4: ¿Tiene usted acceso a Internet ya sea desde su computadora o dispositivo móvil?
Tabla 29
Pregunta 4: ¿Tiene usted acceso a Internet ya sea desde su computadora o dispositivo móvil?

Si 270 97,10%
No 8 2,90%
TOTAL 278 100,00%
Figura 36
Nota: De un total de 278 encuestados se observa que el 97,10% cuenta con servicio de Internet, mientras que el 2,90%
indica que no posee este servicio. Elaboración y Fuente: Propia de los autores.
encuestadas cuentan con Internet ya sea de desde su dispositivo móvil o computadora, por otro
lado, el 2,90% restante de los encuestados manifestaron que no disponen de este servicio en
ninguno de sus dispositivos.
152
Pregunta 5: ¿Actualmente usted realiza sus compras acercándose directamente a la farmacia?
Tabla 30
Pregunta 5: ¿Actualmente usted realiza sus compras acercándose directamente a la farmacia?

Si 271 97,50%
No 7 2,50%
TOTAL 278 100,00%
Figura 37
Nota: De un total de 278 encuestados se observa que el 97,50% realiza sus compras acercándose a la farmacia,
mientras que el 2,50% indica que no la hace acercándose al establecimiento. Elaboración y Fuente: Propia de los
autores.
actualmente realizan sus compras acercándose de manera directa a la farmacia, siendo esta una
porción bastante grande, por otro lado, el 2,50% restante manifestó que no realizan sus compras
acercándose directamente.
153
Pregunta 6: ¿Ha utilizado usted anteriormente una plataforma o servicio web para realizar sus
compras o consultas online?
Tabla 31
Pregunta 6: ¿Ha utilizado usted anteriormente una plataforma o servicio web para realizar sus
compras o consultas online?

Si 246 88,50%
No 32 11,50%
TOTAL 278 100,00%
Figura 38
Nota: De un total de 278 encuestados se observa que el 88,50% han utilizado con anterioridad un servicio web para
realizar compras o consultas, mientras que el 11,50% indica que no han hecho uso en ninguna ocasión de plataformas
web ya se sea para realizar compras o consultas. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura indica que el 88,50% han utilizado
anteriormente un servicio web para realizar compras o consultas, por otro lado, el 11,50% restante
manifestó que no han utilizada en ninguna ocasión algún tipo de servicio web sea este para compras
o consultas.
154
Pregunta 7: ¿Qué navegador web es el que más utiliza para realizar sus compras y/o consultas de
manera online?
Tabla 32
Pregunta 7: ¿Qué navegador web es el que más utiliza para realizar sus compras y/o consultas
de manera online?

Google Chrome 201 72,30%
Mozilla Firefox 51 20,50%
Opera 5 1,80%
Microsoft Edge 7 2,50%
Internet Explorer 0 0%
Safari 8 2,90%
TOTAL 278 100,00%
Figura 39
Nota: De un total de 278 encuestados se observa que el 72,30% utiliza el navegador Google Chrome, mientras que el
20,50% prefiere usar Mozilla Firefox para realizar sus compras o consultas online. Elaboración y Fuente: Propia de
los autores.
prefieren utilizar Google Chrome ya sea para realizar sus compras o consultas online, mientras que
el 20,50% manifestó que prefieren utilizar el navegador Mozilla Firefox para realizar las tareas
anteriormente mencionadas.
155
Pregunta 8: ¿En el caso de haber realizado compras o consultas online, con qué frecuencia lo
hace?
Tabla 33
Pregunta 8: ¿En el caso de haber realizado compras o consultas online, con qué frecuencia lo
hace?

Siempre 96 34,20%
Casi siempre 95 34,50%
Ocasionalmente 51 14,30%
Casi nunca 14 2,50%
Nunca 22 7,90%
TOTAL 278 100,00%
Figura 40
Nota: De un total de 278 encuestados se observa que el 34,50% realizan compras o consultas online siempre, el
34,20% lo hacer casi siempre, el 18,30% prefiere hacerlo ocasionalmente y por último un 7,90% no lo realiza nunca.
Análisis: Los resultados que se muestran en la figura indica que un gran parte la población
realizan compras y consultas online, el 34,50% lo hace siempre, el 34,20% casi siempre, mientras
que el 18,30% manifestó que lo hace en ocasiones, una porción pequeña indicó que no lo hace
nunca, siendo esta del 7,90%.
156
Pregunta 9: ¿Cómo ha sido su experiencia realizando compras y/o consultas de manera online?
Tabla 34
Pregunta 9: ¿Cómo ha sido su experiencia realizando compras y/o consultas de manera online?

Muy buena 136 48,90%
Buena 93 33,50%
Neutral 42 15,10%
Mala 5 1,80%
Muy mala 2 0,70%
TOTAL 278 100,00%
Figura 41
Nota: De un total de 278 encuestados se observa que el 48,9% han tenido una muy buna experiencia realizan compras
o consultas online, el 33,5% indica que ha sido buena y el 15,1% manifestó que si experiencia ha sido neutral.
Análisis: Los resultados que se muestran en la figura indica que 48,9% de las personas que
ha realizado consultas y/o compras online han tenido una muy buena experiencia, el 33,5% señaló
que ha sido buena, mientras que 15,1% manifestó que su experiencia realizando estas actividades
ha sido neutral.
157
Pregunta 10: ¿Qué nivel de dificultad considera usted que existe actualmente en el proceso de
gestión de ventas en las farmacias que no disponen de un sitio o aplicación web?
Tabla 35
Pregunta 10: ¿Qué nivel de dificultad considera usted que existe actualmente en el proceso de
gestión de ventas en las farmacias que no disponen de un sitio o aplicación web?

Muy bajo 7 2,50%
Bajo 10 3,60%
Neutral 36 12,90%
Alto 146 52,50%
Muy alto 79 28,40%
TOTAL 278 100,00%
Figura 42
Nota: De un total de 278 encuestados se observa que el 52,50% considera que existe un nivel alto en la gestión de
procesos de ventas en las farmacias que no cuentan con un sitio o aplicación web, mientras que 28,40% señaló que el
nivel dificultad es muy alto; por último, el 12,90% indica que es neutral. Elaboración y Fuente: Propia de los autores.
consideran que el nivel de dificultad es alto para las farmacias que no poseen un sitio o aplicación
web para gestionar el proceso de ventas, mientras que el 28,40% manifestó que este es muy alto,
por otro lado, el 12,90% señaló que este nivel de dificultad es neutral.
158
Pregunta 11: ¿Estaría usted de acuerdo en contar con una aplicación web para realizar sus
compras de manera online sin tener que salir de su casa?
Tabla 36
Pregunta 11: ¿Estaría usted de acuerdo en contar con una aplicación web para realizar sus
compras de manera online sin tener que salir de su casa?

Totalmente de acuerdo 204 73,40%
De acuerdo 58 20,90%
Neutral 13 4,70%
En desacuerdo 2 0,70%
Totalmente en desacuerdo 1 0,40%
TOTAL 278 100,00%
Figura 43
Nota: De un total de 278 encuestados se observa que el 73,40% está totalmente de acuerdo en contar con una
aplicación web para realizar compras, mientras que el 20,90% señala estar de acuerdo con esto. Elaboración y Fuente:
están totalmente de acuerdo en contar con una aplicación web para realizar compras, mientras que
el 20,9% manifestó que está de acuerdo en contar con este recurso, por otro lado, una porción
pequeña señaló que es neutral, siendo esta del 4,70%.
159
Pregunta 12: ¿Le gustaría que las compras que realizaran en la aplicación web puedan llegar hasta
su domicilio?
Tabla 37
Pregunta 12: ¿Le gustaría que las compras que realizaran en la aplicación web puedan llegar
hasta su domicilio?

Si 273 98,20%
No 5 1,80%
TOTAL 278 100,00%
Figura 44
Nota: De un total de 278 encuestados se observa que el 98,20% si le gustaría que las compras que realizaran en la
aplicación web llegaran a su domicilio, mientras el 1,80% no está de acuerdo con esto. Elaboración y Fuente: Propia
de los autores.
si le gustaría que las compras que realizan en la ampliación web lleguen hasta su domicilio, por
otro lado, el 1,80% restante manifestó que no están de acuerdo en estas compras lleguen a sus
domicilios.
160
Pregunta 13: ¿Le gustaría acceder desde cualquier dispositivo móvil o computador a la aplicación
web para realizar sus compras?
Tabla 38
Pregunta 13: ¿Le gustaría acceder desde cualquier dispositivo móvil o computador a la aplicación
web para realizar sus compras?

Si 269 96,80%
No 9 3,20%
TOTAL 278 100,00%
Figura 45
Nota: De un total de 278 encuestados se observa que el 96,80% si le gustaría poder acceder desde cualquier dispositivo
a la aplicación web, mientras el 3,20% no está de acuerdo con esto. Elaboración y Fuente: Propia de los autores.
si les gustaría acceder a la aplicación web desde cualquier dispositivo ya sea móvil o de escritorio,
el 3,20% restante señaló que no le gustaría acceder desde cualquier dispositivo a la aplicación web.
161
Pregunta 14: ¿Estaría usted de acuerdo en que la aplicación web cuente con un chat online, el
cual permita la comunicación entre usted y el personal de la farmacia en tiempo real?
Tabla 39
Pregunta 14: ¿Estaría usted de acuerdo en que la aplicación web cuente con un chat online, el
cual permita la comunicación entre usted y el personal de la farmacia en tiempo real?

Totalmente de acuerdo 222 79,90%
De acuerdo 44 15,80%
Neutral 12 4,30%
En desacuerdo 0 0,00%
Totalmente en desacuerdo 0 0,00%
TOTAL 278 100,00%
Figura 46
Nota: De un total de 278 encuestados se observa que el 79,90% está totalmente de acuerdo en que la aplicación cuente
con un chat online para la interacción con el personal de la farmacia, mientras que el 15,80% señaló que está de
acuerdo con esto. Elaboración y Fuente: Propia de los autores.
está totalmente de acuerdo en que la aplicación web cuente con un chat online para la
comunicación en tiempo real con el personal de la farmacia, mientras que, el 15,80% de los
encuestado manifestó que está de acuerdo en contar con este recurso en la aplicación web.
162
Pregunta 15: ¿Considera usted que con la aplicación web se logrará disminuir el nivel de
dificultad en el proceso de gestión de ventas?
Tabla 40
Pregunta 15: ¿Considera usted que con la aplicación web se logrará disminuir el nivel de
dificultad en el proceso de gestión de ventas?

Si 273 98,20%
No 5 1,80%
TOTAL 278 100,00%
Figura 47
Nota: De un total de 278 encuestados se observa que el 98,20% consideran que con el desarrollo de una aplicación
web se logrará dimanar el nivel de dificultad en el proceso de gestión de ventas, por otra parte, el 1,80% señaló que
no sería posible. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura son bastante buenos, ya que el 98,20%
de las personas encuestadas consideran que con aplicación web se logrará disminuir el nivel de
dificultad en el proceso de gestión de ventas, mientras que el 1,80% restante manifestó que no que
esto no sería posible.
163
Metodología de gestión del proyecto
Para la elaboración del presente trabajo de titulación se empleó la Metodología de Marco
de Lógico (véase el Anexo 4), la cual tiene como propósito facilitar el proceso de gestión de
proyectos. Esta metodología permite la recolección de información requerida para identificar el
problema central, sus causas y consecuencias y las soluciones de este.
La Metodología de Marco Lógico es una herramienta utilizada para la evaluación de

proyectos, la cual posee una naturaleza dual (horizontal y vertical), ya que es un ejercicio,
pero a la vez un método de análisis, pues su estructuración se basa en el resultado del
ejercicio, lo que permite presentar de forma sistemática y lógica los objetivos de un
proyecto, analizando sus alcances. (Monroy, 2018)
Es por lo que, el uso de esta metodología es de gran importancia, ya que provee de un
enfoque más amplio del tema a analizar, lo cual facilita identificar las falencias del proceso actual.
Etapas de la metodología del proyecto
Esta metodología se aplicó con el objetivo de visualizar como se encuentra estructurada la
información para posteriormente realizar un análisis y así identificar las actividades y recursos que
intervienen en el proceso. A continuación, se detalla cada una de las fases de la Metodología de
Marco Lógico utilizada en la formulación del trabajo de titulación.
Fase 1. Definición del problema central
El proceso de gestión de ventas de la farmacia Nicolás Bolívar actualmente se lleva a cabo
de manera manual con la ayuda de cuadernos y herramientas de ofimática como Microsoft Excel
y Microsoft Word lo que ocasiona dificultad para realizar dichos procesos y un tiempo de espera
elevado para la atención, en la Tabla 2 y Figura 1 que corresponde al análisis de causas –
consecuencias y al diagrama de Ishikawa, se puede observar los problemas que presenta la
farmacia, adicionalmente se puede ver las causas y consecuencias del problema en el Anexo 4.1.
164
Según (Monroy, 2018) comenta que. “Primero se detecta y se estudia el problema en su
globalidad, analizando sus distintas partes. Una vez establecido se encaran sus soluciones en un
marco integral y en forma conjunta” (p.44). Con relación a la Tabla 2 y Figura 1 se analizó que
existía un nivel de dificultad elevado para la realización de las ventas debido a la ausencia de un
servicio web que le permita gestionar los procesos de manera más eficiente.
Fase 2. Análisis de Involucrados
En esta fase se pudo identificar a todos los involucrados que intervienen de manera directa
o indirecta en el desarrollo del presente trabajo de titulación, los cuales pueden ser personas u
organizaciones, en el Anexo 4.2 que corresponde al análisis de involucrados se puede observar los
actores que intervendrán en el proyecto. A continuación, se presenta una definición.
Con este análisis lo que se busca conseguir es un acercamiento integral al problema,

manejar en un mayor margen la objetividad del diseño y la ejecución del proyecto, por lo
cual es necesario incorporar los puntos de vista de los involucrados, y en última instancia
crear interrelaciones entre los involucrados y el proyecto. (Monroy, 2018)
Por lo cual, es de gran importancia realizar el análisis de involucrados, ya que permite
identificar a los individuos o instituciones que intervendrán en la elaboración del proyecto, mismos
que pueden influir de manera positiva o negativa. Por otra parte, es importante realizar la
clasificación de los involucrados con el objetivo de garantizar las prioridades de cada actor y el
apoyo que estos pueden brindan en el proyecto, en el Anexo 4.2.1, Anexo 4.2.2 y Anexo 4.3.3 se
muestra la matriz Poder-Interés, Poder-Influencia e Influencia-Impacto respectivamente.
Fase 3. Análisis de problemas
En esta tercera fase se pudo identificar los problemas que presenta actualmente la farmacia
Nicolás Bolívar, para lo cual fue necesario realizar una entrevista al propietario para luego realizar
un análisis de la información obtenida. En el Anexo 4.3 se muestra el análisis de problemas

165
realizado en el presente trabajo de titulación. Según (Monroy, 2018) afirma. “Este análisis permite
estudiar la situación actual, en su contexto con el problema, identificando los problemas
principales y sus relaciones causa-efecto, en relación con el problema de desarrollo determinado
en el origen” (p.48) . Por ello, es de gran importancia realizar este análisis, ya que permite detectar
el problema central, así como sus causas y consecuencias con el fin de buscar una solución total o
parcial a dicho problema.
Fase 4. Análisis de Objetivos
Una vez realizado en el análisis de problemas el siguiente paso de la Metodología de Marco
Lógico es establecer los objetivos o soluciones a los que se quiere llegar para dar solución al
problema central. En el Anexo 4.4 se puede visualizar el análisis de objetivos realizado en el
presente trabajo de titulación. A continuación, se presenta una definición.
En esta fase se realiza la conversión de los problemas detectados en objetivos o soluciones

con el fin de identificar el proyecto que se trabajará. Para esto es necesario transformar las
condiciones negativas en positivas, y las causas y efectos de las condiciones negativas en
medios y fines para alcanzar la condición positiva. (Monroy, 2018)
Con relación al Anexo 4.4 el cual corresponde al análisis de objetivos, la solución
presentada es la disminución del nivel de dificultad para la realización de las ventas de farmacia
Nicolás bolívar. Este análisis es de gran importancia, ya que permite no solo mejorar la calidad de
los datos que intervienen en los procesos, sino que también permite visualizar un escenario en el
cual se describe la situación luego de haber resuelto los problemas.
Fase 5. Análisis de Alternativas
Esta fase se trabaja en conjunto con el análisis de objetivos y tiene como propósito
identificar las alternativas que se llevarán a cabo y que podrán resolver el problema central. En el
Anexo 4.5 se puede visualizar en análisis de alternativas realizado en el presente trabajo de

166
titulación. Según (Monroy, 2018) afirma. “Este análisis consiste en determinar las distintas
estrategias que podrían contribuir al desarrollo del proyecto” (p.51). Por ello, es importante realizar
este análisis, ya que su función es proporcionar las alternativas más optimas, mismas que van a
cumplir con la solución del problema, separándolas de las alternativas que no intervendrán para
alcanzar el objetivo.
Fase 6. Diseño de estrategias
En esta fase se estableció las diferentes actividades a realizar organizadas de forma
jerárquica, las cuales tienen como finalidad cumplir con el objetivo establecido. Según (Goya &
Quimis, 2017) comentan que el diseño de estrategias. En el Anexo 4.6 se muestra el diseño
estrategias realizado en el presente proyecto. “Es utilizado como una herramienta de organización
y explicación donde se muestra cada una de las actividades que les competen a las alternativas
seleccionadas para resolver la problemática destacada en el fenómeno de estudio del proyecto”
(p.57). Por ello, resulta de gran importancia realizar el diseño de estrategias, ya que provee de una
clara visión del objetivo que se desea alcanzar.
Fase 7. Matriz de Marco Lógico
Por último, se elaboró la matriz de marco lógico la cual permitió presentar la solución
encontrada, junto con todas las actividades y aspectos más relevantes. En Anexo 4.7 se puede
observar la matriz de marco lógico realizada en el presente trabajo de titulación. Según (Goya &
Quimis, 2017) comentan que.
“La Matriz de Marco Lógico detalla de forma compacta la planificación del proyecto y
tiene en consideración los aspectos más importante con sus respectivas actividades” (p.57) . Por
lo tanto, el uso de esta matriz es gran importancia, ya que permite tener una visión más amplia los
167
aspectos más significativos del proyecto, tales como: indicadores, medios de verificación y
supuestos, los cuales son examinados de manera horizontal con la información las fases anteriores,
están conformada por 4 filas: fin, propósito, componentes y actividades, mismos que se construye
de manera vertical, con el objetivo de que pueda ser examinados de abajo hacia arriba.
Metodología de desarrollo del proyecto
En el presente trabajo de titulación se utilizará la metodología SCRUM en conjunto con la
metodología XP (Extreme Programming), la cuales son las más utilizadas para la gestión de
proyectos y desarrollo de proyectos.
SCRUM
La metodología SCRUM es un proceso en el cual se aplican un conjunto de buenas
prácticas para desarrollar de manera colaborativo en un equipo para obtener un mejor resultado en
un proyecto. Según (Sarango, 2020) define. “SCRUM como una estructura donde las personas
pueden abarcar problemas adaptables, con capacidad de producción y creatividad para obtener
como resultado productos de gran valor, sin embargo, es una metodología ligera pero difícil de
dominar” (p. 20). Esta metodología es aplicada en proyectos complejos, donde los requerimientos
no están bien definidos o generalmente se cambien, la innovación, competitividad y la
productividad son fundamentales.
Los proyectos desarrollados con la metodología SCRUM son ejecutados en ciclos cortos,
pero fijos y tienen que proporcionar resultados completos cuando sea solicitado por el cliente. La
metodología SCRUM es aplicada para el presente proyecto de titulación de desarrollo de un
prototipo de aplicación web progresiva para la gestión de ventas de la farmacia Nicolás Bolívar,
ya que permite que su desarrollo sea de manera ordenada.

168
Características
En esta sección se presenta las características de la metodología SCRUM según los autores
(Salazar et al., 2018), entre ellas tenemos roles, reuniones y artefactos, los cuales se describen a
continuación.
Roles
A continuación, se presenta los roles que intervienen en la metodología SCRUM según los
autores (Schwaber & Sutherland, 2017).
 El ScrumMaster: Es el responsable de asegurar el ambiente de trabajo productivo,
encargado de promover y apoyar las teorías, prácticas, reglas y los valores en el equipo
SCRUM. El ScrumMaster es aquel que está encargado de garantizar que se cumplan
los principios, aspectos y procesos de la metodología SCRUM.
 El Product Owner: Es propietario del producto final, está a cargo de gestionar el valor
del producto, y es el encargado de aumentar el valor del producto resultante del trabajo
del equipo de desarrollo. Para que el Product Owner tenga éxito, toda la organización
debe respetar sus decisiones, ya que es el que define los criterios de aceptación.
 El Development Team: Es el equipo de desarrollo del proyecto y está formado por
profesionales que trabajan de manera eficiente para realizar la entrega del producto
final.
Estos roles ayudan a definir el equipo de trabajo para el desarrollo del prototipo de
aplicación web progresiva para mejorar el proceso de gestión de ventas en la farmacia Nicolás
Bolívar. A continuación, en la Tabla 41 se presentan los roles que intervienen en la metodología
SCRUM.
169
Tabla 41
Roles de la metodología SCRUM
ROLES RESPONSABLES
SCRUM Master Ing. Ángela Yanza Montalván.
Product Owner Sr. Bolívar Guartambel Albarracin.
Recurso 1: Mero Albarracin Diego.
Development Team
Recurso 2: Quinde Briones Gilson.
Nota: Los roles mencionados intervienen en el presente trabajo de titulación en base a la metodología SCRUM.
Fuente y elaboración propia.
Artefactos
Dentro de la metodología SCRUM los artefactos son elaborados para maximizar la
transparencia de la información dentro del equipo SCRUM. Para la empresa de TI (Viewnext,
2019) definen. “Los artefactos son todos los elementos que garantizan la transparencia y el registro
de la información fundamental del proceso de SCRUM. Son los recursos que cimientan la
productividad y la calidad de cualquier proyecto”. Estos artefactos evitan tener una mala
comunicación e información dentro del equipo.
Sprints para el desarrollo del prototipo de aplicación web progresiva
Para el presente trabajo de titulación denominado “DESARROLLO DE UN PROTOTIPO
GESTIÓN DE VENTAS EN LA FARMACIA NICOLÁS BOLÍVAR” se definieron los siguientes
Sprints en el cronograma de actividades como se observa en el Anexo 1. A continuación, se
presenta los siguientes Sprints.
1. Sprint 1: Levantamiento de información.
2. Sprint 2: Levantamiento de requerimientos.
3. Sprint 3: Adaptación de herramientas.
4. Sprint 4: Desarrollo de módulos.

170
5. Sprint 5: Interfaz de usuario
6. Sprint 6: Pruebas y validación.
Todos los Sprints mencionados en el listado anterior fueron definidos por los miembros del
equipo para el presente proyecto de titulación. De esta manera se procederá a identificar claramente
en el presente Capítulo III cuáles son las etapas que conforman la Metodología Ágil SCRUM.
Product Backlog
Consiste en plasmar una lista de todos los requerimientos iniciales de un proyecto a
desarrollar. En esta lista contiene la descripción de las tareas y subtareas que serán organizadas en
función de prioridades. Para la empresa de TI (Viewnext, 2019) define.
“Product Backlog es una lista ordenada con todo lo que necesita un producto para cumplir
las necesidades de los clientes potenciales y única fuente de requisitos para realizar
modificaciones. El responsable de este artefacto es el product owner, encardado de añadir
y ordenar ítems. Esta lista cambia a medida que lo hace su entorno para ser apropiado, útil
y competitivo”.
Se indica un tiempo estimado para desarrollar las tareas con el fin de identificar las
necesidades del proyecto para lograr su máxima utilidad.
A continuación, se presentan las historias de usuarios desde la Tabla 42 hasta la Tabla 59,
las cuales fueron recolectadas a lo largo de las reuniones y entrevistas con el Sr. Bolívar
Guartambel Albarracin, propietario de la farmacia Nicolás Bolívar y la Ing. Ángela Yanza
Montalván, tutora asignada para el desarrollo de este trabajo de titulación.

171
Tabla 42
Historia N°1 de usuario
Historia de Usuarios
Número: 1 Usuario: Sr. Bolívar Guartambel Albarracin
Historia: Reunión y entrevista con el propietario de la farmacia Nicolás Bolívar para dar a
conocer el proceso actual de la gestión de ventas de la farmacia Nicolás bolívar.
Días estimados: 1 Sprint asignado: 1
Responsables: Mero Albarracin Diego y Quinde Briones Gilson.
Criterio de aceptación:
1. Se debe lograr analizar la situación actual del proceso de gestión de ventas.
2. Se conoce el tiempo aproximado que dura el proceso de una venta.
3. Se debe conocer las herramientas que utilizan para manejar las ventas.
4. Se debe analizar las problemáticas que afecta a la gestión de ventas.
Nota: Está basada en la información recolectada mediante la entrevista realizada al Sr. Bolívar Guartambel Albarracin,
propietario de la farmacia Nicolás Bolívar dónde se menciona el proceso actual de las ventas que posee la farmacia.
Tabla 43
Historia: Reunión con el propietario de la farmacia Nicolás Bolívar para levantar los
requerimientos para el desarrollo del prototipo de aplicación web progresiva para la gestión de
ventas de la farmacia Nicolás bolívar.
1. Se debe levantar correctamente los requerimientos por parte del propietario.
2. Se definir los módulos que tendrá el prototipo de aplicación web.
3. Los roles que desea tener
propietario de la farmacia Nicolás Bolívar, dónde se definieron los respectivos requerimientos para el desarrollo del
prototipo de aplicación web progresiva. Elaboración y fuente propia.
172
Tabla 44
Historia: Es necesario definir los módulos que deben tener el prototipo de aplicación web
progresiva de la farmacia Nicolás.
Días estimados: 1 Sprint asignado:2
1. Se definen los módulos que debe contener la aplicación web progresiva
2. Se define el contenido de cada uno de los módulos.
proporcionada de la farmacia Nicolás Bolívar dónde se menciona los módulos que debe tener el prototipo de aplicación
web progresiva. Elaboración y fuente propia.
Tabla 45
Historia: Es necesario definir los roles que intervienen en el proceso de ventas del prototipo de
aplicación web progresiva de la farmacia Nicolás Bolívar.
1. Se definen los roles que intervienen en el prototipo de aplicación web
2. Se definen las restricciones para cada uno de los roles.
3. Se definen que acceso tener cada uno de los roles.
propietario de la farmacia Nicolás Bolívar donde se menciona que el prototipo de aplicación web progresiva debe
poseer dos roles de usuarios, que son usuario cliente y usuario administrador, las restricciones que cada rol debe
poseer. Elaboración y fuente propia.
173
Tabla 46
Número: 5 Usuario: Ing. Ángela Yanza Montalván
Historia: Realizar encuestas a los ciudadanos de la parroquia Tarqui en la ciudad de Guayaquil.
1. Se realizan encuestas a la población que se tomó como muestra en la parroquia Tarqui
en la ciudad de Guayaquil.
2. Se debe conocer las experiencias de los ciudadanos con el uso de tecnología.
3. Se debe conocer si tienen acceso a la tecnología, al uso de internet.
4. Se debe conocerlas experiencias de los ciudadanos con plataformas dedicadas a las
compras ventas online.
5. Se debe analizar las respuestas de los encuestados para ver la factibilidad del proyecto.
Nota: Está basada en los cálculos que se realizaron para la toma de la muestra para las encuestas, dando como resultado
278 personas que habitan en la parroquia Tarqui, las cuales se les realizará aleatoriamente las respectivas encuestas
las cuales consisten en 15 preguntas. Elaboración y fuente propia.
Tabla 47
Historia: Es necesario el desarrollo del módulo del Stock.
1. Se desarrolla el módulo de Stock.
2. Se desarrolla la opción de modificar el movimiento de ingreso.
3. Se desarrolla la opción de eliminar el movimiento de ingreso.
4. Se desarrolla un buscador el cual estará parametrizado.
5. Se desarrolla una tabla de productos en stock el cual estará parametrizado.
Nota: Está basada en la información recolectada mediante las reuniones con el Sr. Bolívar Guartambel Albarracin,
propietario de la farmacia Nicolás Bolívar dónde se menciona que se debe elaborar el módulo de stock según los
requerimientos de usuarios previamente levantados para el desarrollo del prototipo de aplicación progresiva.
174
Tabla 48
Historia: Es necesario el desarrollo del módulo de productos en el prototipo de aplicación web
progresiva.
1. Desarrollo del módulo de productos.
2. Desarrollo de las secciones de nuevos productos y listados de productos.
3. Parametrización de los productos.
4. Desarrollo de la opción de modificar productos.
5. Desarrollo de la opción de cambiar el estado del producto (activo o inactivo).
6. Código único para cada producto
7. El administrador de la aplicación web tiene el acceso de activar y desactivar los
productos.
propietario de la farmacia Nicolás Bolívar, dónde se menciona que se debe desarrollar el módulo de productos con
sus secciones, con los parámetros que debe manejar, la clasificación de los productos que se fue detallando en los
requerimientos de usuarios para el desarrollo del prototipo de aplicación progresiva. Elaboración y fuente propia.
Tabla 49
Historia: Es necesario el desarrollo del módulo de promociones en el prototipo de aplicación
web progresiva.
1. Desarrollo del módulo de promociones.
2. Elaboración de los parámetros de los productos.
3. Sección donde se agregan los nuevos productos que se encuentra en promoción.
4. Sección de agregar al carrusel que se muestra en la interfaz principal de la aplicación
web.
5. Listados de productos que están en promociones.
6. Listados de los descuentos establecidos por productos.
7. Sección de establecer, modificar, fecha límite y estado del descuento.
propietario de la farmacia Nicolás Bolívar dónde se menciona que se debe desarrollar el módulo de promociones, con
las secciones establecidas en los requerimientos del propietario para el desarrollo del prototipo de aplicación
progresiva. Elaboración y fuente propia.
175
Tabla 50
Historia: Es necesario el desarrollo del módulo de categorías en el prototipo de aplicación web
progresiva.
1. Desarrollo del módulo de categoría.
2. Desarrollo de las tablas de categorías existente.
3. Desarrollo la opción de agregar nueva categoría.
4. Desarrollo de la opción de modificar las categorías.
5. Desarrollo de la opción de cambiar el estado de (activo e inactivo)
propietario de la farmacia Nicolás Bolívar dónde se menciona que se debe desarrollar el módulo de categorías, con
las secciones establecidas en los requerimientos del propietario para el desarrollo del prototipo de aplicación
progresiva. Elaboración y fuente propia.
Tabla 51
Historia: Es necesario el desarrollo del módulo de pedidos en el prototipo de aplicación web
progresiva.
1. Se desarrolla la interfaz del módulo de pedido.
2. Se enlistan los productos, por categorías.
3. Los datos del usuario se muestran al realizar una compra.
4. El usuario puede editar y agregar datos al momento de realizar la compra
5. Se le generará un comprobante al momento de realizar una compra, el cual servirá para
poder recibir la entrega o retirar personalmente su compra.
6. El administrador puede descargar factura.
7. Se desarrolla la opción de confirmar y cancelar pedidos en la interfaz del administrador.
Nota: Está basada en la información recolectadas mediante las reuniones con el Sr Bolívar Guartambel Albarracin,
propietario de la farmacia Nicolás Bolívar dónde se menciona que se debe desarrollar el módulo de pedidos con sus
respectivas secciones en el prototipo de aplicación progresiva. Elaboración y fuente propia.
176
Tabla 52
Historia: Es necesario el desarrollo del módulo de seguridad en el prototipo de aplicación web
progresiva.
1. Desarrollo del módulo de seguridad.
2. Desarrollo del login del administrador y clientes.
3. Recuperación de contraseña.
4. Bloqueos por concurrencia de contraseña
5. Restricción de secciones al cliente.
6. El administrador podrá desactivar cuentas inactivas.
propietario de la farmacia Nicolás Bolívar dónde se menciona que el prototipo de aplicación web progresiva debe
contener un módulo de seguridad donde la cuenta del usuario se puede bloquear por concurrencia de contraseña,
recuperación de contraseña. Elaboración y fuente propia.
Tabla 53
Historia: Es necesario el desarrollo de un módulo de reportes en el prototipo de aplicación web
progresiva.
1. Se debe levantar los requerimientos para el contenido del módulo de reporte.
2. Desarrollo y contenido de total de ventas.
3. Desarrollo y contenido de total de productos.
4. Desarrollo y contenido de total de categoría.
5. Desarrollo y contenido de total de usuarios.
6. Desarrollo de cada uno de los contenidos con sus dashboards
7. Los reportes pueden ser semanales, mensuales, trimestrales.
8. Desarrollar la opción de descarga de reportes en archivos de formatos PDF y XLSX.
Nota: Está basada en la información de la entrevista realizada al Sr. Bolívar Guartambel Albarracin, propietario de la
farmacia Nicolás Bolívar dónde se menciona que el prototipo de aplicación web progresiva debe contener un módulo
de reportes. Elaboración y fuente propia.
177
Tabla 54
Historia: Es necesario el desarrollo de un módulo de inventario en el prototipo de aplicación
web progresiva.
1. Se desarrolla el módulo de inventario según los requerimientos de usuarios.
2. Se desarrolla la sección de ingresos, egresos y productos.
3. La sección de ingreso se visualizan los movimientos que se han realizado en el
inventario.
4. La sección de egresos se visualizan los movimientos que egresan.
5. Desarrollo de la opción de descarga de facturas en formato PDF.
6. Desarrolla la sección de productos donde se visualizan las cantidades ingresadas,
vendidas y disponibles.
de inventario. Elaboración y fuente propia.
Tabla 55
Historia: Es necesario el desarrollo de un módulo de auditoria en el prototipo de aplicación web
progresiva.
1. Se desarrolla el módulo de auditoria según los requerimientos de usuarios.
2. Se visualizan los reportes tanto de usuarios clientes y administrador.
3. Se visualizan el comportamiento de inicio de sección tanto de usuarios clientes y
administrador.
4. Se visualizan los datos de los usuarios.
5. Desarrollar la opción de descarga de reportes en archivos de formatos PDF y XLSX.
de auditoría. Elaboración y fuente propia.
178
Tabla 56
Historia: Es necesario definir el contenido que debe tener el módulo de chat en el prototipo de
aplicación web progresiva de la farmacia Nicolás.
1. El cliente se puede contactar con el empleado de la farmacia para realizar consultas.
2. Las consultas pueden ser sobre medicamentos.
3. Las consultas pueden ser sobre síntomas e inquietudes en general.
4. Las consultas pueden ser sobre la plataforma web.
5. Desarrollo de la opción de desactivar el chat.
Nota: Está basada en la información de las reuniones realizadas con el Sr. Bolívar Guartambel Albarracin, propietario
de la farmacia Nicolás Bolívar, dónde se menciona el desarrollo y contenido que debe tener el módulo de chat en el
prototipo de aplicación progresiva. Elaboración y fuente propia.
Tabla 57
Historia N°16 de usuarios
Historia: Es necesario realizar una investigación de las herramientas para la elaboración del
trabajo de titulación.
1. Investigación de las herramientas.
2. Realizar un análisis de tendencia de las herramientas de desarrollo.
3. Seleccionar las herramientas de desarrollo a utilizar.
4. Seleccionar las versiones de las herramientas a utilizar.
Nota: Está basada en la información de las tutorías realizadas por la Ing. Ángela Yanza Montalván dónde menciona
que se debe realizar una ardua investigación de las herramientas que se van a utilizar para el desarrollo del prototipo
de aplicación web progresiva. Elaboración y fuente propia.
179
Tabla 58
Historia: Reunión con el propietario de la farmacia Nicolás Bolívar para levantar los criterios
que debe tener la interfaz de usuario del prototipo de aplicación web progresiva.
1. Se define qué tipo de interfaz de tener.
2. Deber ser una interfaz amigable.
Nota: Está basada en la información de las reuniones con Sr. Bolívar Guartambel Albarracin, propietario de la
farmacia Nicolás Bolívar dónde manifiesta algunos requisitos que debe tener la interfaz del prototipo de aplicación
Tabla 59
Historia: Es necesario realizar las pruebas para ver correcto funcionamiento de la aplicación
web progresiva.
1. Pruebas del funcionamiento de los módulos.
2. Pruebas en los registros de usuarios.
3. Pruebas en la sección de compras.
4. Pruebas del rol de administrador
5. Pruebas funcionales.
6. Pruebas no funcionales.
Nota: Está basada en la información de la entrevista realizada al proporcionada de la farmacia Nicolás Bolívar.
En el Product Backlog se establecen los requerimientos y objetivos obtenidos de la
recolección de la información mediante las entrevistas y encuestas realizadas tanto al propietario
y a la tutora asignada, así como también, se establecen el número de sprints que tienen asignados
los cuales se visualizan en la Tabla 60.

180
Tabla 60
Product Backlog
Product Backlog
Requerimientos Sprint Objetivos
Realizar entrevista con el propietario de la Levantar información sobre el proceso de gestión
1
farmacia Nicolás Bolívar. de ventas actual en la farmacia Nicolás Bolívar.
Revisar y aprobar el banco de pregunta para realizar
Reunión con la Ing. Ángela Yanza Montalván. 2
las encuestas
Levantar correctamente los requerimientos para la
Reunión con el propietario. 2
elaboración del prototipo de aplicación web.
Definir los módulos que deben tener el prototipo de
Reunión con el propietario 2
aplicación web.
Definir los roles que intervienen en el proceso de
Reunión con el propietario 2
gestión de ventas.
Investigar las herramientas que se utilizaran para el
Investigación de las herramientas de desarrollo. 3
presente trabajo de titulación.
Desarrollar el módulo de Stock basándose en los
Desarrollo del módulo de Stock. 4
requerimientos previamente levantados.
Desarrollar el módulo de productos siguiendo los

Desarrollo del módulo de productos. 4
requerimientos del propietario.
Desarrollar el módulo de promociones siguiendo

Desarrollo del módulo de promociones. 4
los requerimientos del propietario.
Realizar el módulo de pedidos con sus respectivas
Desarrollo del módulo de pedidos. 4 secciones acorde a los requerimientos del
propietario.
Realizar el módulo de categorías siguiendo los
Desarrollo del módulo de categorías. 4 requerimientos de usuarios previamente
levantados.
Desarrollo del módulo de seguridad. 4 Realizar el módulo de seguridad
Realizar el dashboards de las secciones estipuladas
Desarrollo del módulo de reporte. 4
en los requerimientos del propietario.
Realizar el módulo de inventario siguiendo los
Desarrollo del módulo de inventario. 4 requerimientos de usuarios previamente
levantados.
Realizar el módulo de auditoria siguiendo los
Desarrollo del módulo de auditoria 4 requerimientos de usuarios previamente
levantados.
Realizar el módulo de chat siguiendo los
Desarrollo del módulo de chat. 4
requerimientos del propietario.
Desarrollo de la interfaz de usuario. 5 Realizar la interfaz de usuario.
Realizar las pruebas a la plataforma web para
Realizar las respectivas pruebas. 6
revisar su correcto funcionamiento.
Nota: Está basado en la información recopilada en las entrevistas y encuestas previamente realizadas al Sr. Bolívar
Guartambel Albarracin, propietario de la farmacia Nicolás Bolívar y ala Ing. Ángela Yanza Montalván, tutora asignada
al presente trabajo de titulación. Elaboración y fuente propia.
181
Sprint Planning
Es un trabajo colaborativo dentro del equipo SCRUM donde se plantean las tareas que se
deben realizar. Para los autores (Narvaez & Acosta, 2019) definen. “El Sprint Planning es el evento
donde el equipo de desarrollo, el SCRUM master y el product owner se reúnen para definir las
tareas a realizar en el sprint y plantear la duración del mismo” (p.14). Dichas tareas son priorizadas
debido que tienen mayor aportación al negocio.
El sprint planning 1 que se detalla en la Tabla 61 pertenece al levantamiento de
información, el cual se obtuvo mediante reuniones y entrevistas con el Sr. Bolívar Guartambel
Albarracin, propietario de la farmacia Nicolás Bolívar, para analizar y diagnosticar el proceso
actual de la gestión de ventas de dicha farmacia.
Tabla 61
Sprint Planning N°1
Tarea Responsables Días Estimados

Sprint 1: Levantamiento de información
T1: Formulación del banco de
Recurso 1
preguntas y establecer el formato 1
Recurso 2
de la entrevista y encuesta.
T2: Revisión y aprobación del
banco de preguntas y formato de Recurso 1
2
la entrevista y encuesta por la Recurso 2
tutora designada a este proyecto.
T3: Consulta de disponibilidad
Recurso 1
con el Sr. Bolívar Guartambel 3
Recurso 2
para realizar la entrevista.
T4: Entrevista online con el Sr Recurso 1
1
Bolívar Guartambel. Recurso 2
T5: Encuesta realizada por parte
Recurso 1
de los ciudadanos de la parroquia 1
Recurso 2
Tarqui en Guayaquil.
Nota: Se llevó a cabo mediante las reuniones y entrevistas que se le realizó al Sr. Bolívar Guartambel Albarracin,
propietario de la farmacia Nicolás Bolívar. Elaboración y fuente propia.
El sprint planning 2 que se detalla en la Tabla 62 perteneciente al levantamiento de los
requerimientos para el desarrollo del prototipo de aplicaciones web progresiva, dichos

182
requerimientos se obtuvieron mediante las reuniones con el Sr. Bolívar Guartambel Albarracin,
propietario de la farmacia Nicolás Bolívar.
Tabla 62

Sprint 2: Levantamiento de requerimientos
T1: Entrevista con el
propietario para definir Recurso 1
3
módulos, roles e interfaces de Recurso 2
usuario.
T2: Análisis de información Recurso 1
1
de los requerimientos. Recurso 2
Nota: Se llevó a cabo por medio de la entrevista que se le realizo al Sr. Bolívar Guartambel Albarracin propietario de
la farmacia Nicolás Bolívar. Elaboración y fuente propia.
El sprint planning 3 que se detalla en la Tabla 63 perteneciente a la adaptación de las
herramientas que van a hacer utilizadas para el desarrollo del prototipo de aplicación web
progresiva.
Tabla 63

Sprint 3: Adaptación de herramientas de desarrollo
T1: Investigación de las Recurso 1
1
herramientas de desarrollo Recurso 2
T2: Definición de las Recurso 1
herramientas de desarrollo a Recurso 2 1
utilizar
Nota: Se llevó a cabo mediante la investigación de herramientas de desarrollo, las cuales fueron revisadas en las
tutorías realizadas por la Ing. Ángela Yanza Montalván la cual fue designada como tutora de este proyecto de
titulación. Elaboración y fuente propia.
El sprint planning 4 que se detalla en la Tabla 64 pertenece al desarrollo de los módulos
que deben contener el prototipo de aplicación web progresiva, están basados en los requerimientos
previamente levantados por las reuniones con el Sr. Bolívar Guartambel Albarracin, propietario
de la farmacia Nicolás Bolívar.

183
Tabla 64

Sprint 4: Desarrollo de Módulos
T1: Desarrollo del módulo de Recurso 1
6
seguridad. Recurso 2
5
productos. Recurso 2
4
promociones. Recurso 2
2
categoría. Recurso 2
5
pedidos. Recurso 2
6
reportes. Recurso 2
3
chat. Recurso 2
5
inventario. Recurso 2
2
Stock. Recurso 2
4
auditoria. Recurso 2
Nota: Esta información está basada en los requerimientos de usuarios previamente levantados. Elaboración y fuente
propia.
El sprint planning 5 que se detalla en la Tabla 65 pertenece al desarrollo de interfaz de
usuario según los requerimientos de usuarios previamente levantados.
Tabla 65

Sprint 5: Desarrollo de interfaz de usuario
T1: Desarrollo de la interfaz Recurso 1
3
según requerimientos. Recurso 2
Nota: Está basado en los requerimientos previamente levantados según los criterios del Sr. Bolívar Guartambel
Albarracin, propietario de la farmacia Nicolás Bolívar. Elaboración y fuente propia.
El sprint planning 6 que se detalla en la Tabla 66 pertenece a las pruebas y validaciones a
realizar al prototipo de aplicación web progresiva, mediante juicio de experto para verificar la
184
factibilidad de este trabajo de titulación.
Tabla 66

Sprint 6: Pruebas y validación
T1: Desarrollo de encuesta de Recurso 1
1
satisfacción Recurso 2
T2: Realizar instrumento para Recurso 1
1
validación de expertos. Recurso 2
T3: Desarrollo de la carta de Recurso 1
1
validación de expertos Recurso 2
T4: Realizar pruebas al
prototipo de aplicación web Recurso 1
1
progresiva mediante juicio de Recurso 2
expertos
T5: Aplicar encuesta de Recurso 1
1
satisfacción Recurso 2
Nota: Se realiza las respectivas pruebas para ver el correcto funcionamiento de cada uno de los módulos que tiene el
.
El sprint planning 7 que se detalla en la Tabla 67 pertenece a la entrega final del prototipo
de aplicación web progresiva para el proceso de la gestión de ventas de la farmacia Nicolás
Bolívar.
Diagrama de Gantt
El diagrama de Gantt es una herramienta gráfica que permite la planificación de proyectos
de una manera ordena, donde se pueden visualizar las tareas a realizar y el tiempo que dura cada
una de ellas. Según el autor (Mateo, 2021) comenta:
“El diagrama de Gantt es una forma de representar gráficamente, mediante barras, las
diferentes tareas que componen un proyecto y el tiempo estimado para su finalización. El
diagrama de Gantt es un diagrama bidimensional en el que se representa el tiempo en el
tiempo en el eje horizontal y en el vertical el nombre de la tarea”. (p, 6)
En el diagrama de Gantt donde se registra los sprints con los días pertenecientes al
desarrollo del prototipo de aplicación web progresiva para mejorar el proceso de gestión de ventas
185
en la farmacia Nicolás Bolívar.
El sprint 1 que se detalla en la Tabla 67 pertenece al levantamiento de información el cual
se obtuvo mediante reuniones y entrevistas con el Sr. Bolívar Guartambel Albarracin, propietario
de la farmacia Nicolás Bolívar, para analizar y diagnosticar el proceso actual de la gestión de
ventas de dicha farmacia.
Tabla 67
Sprint 1 Levantamiento de información
Semana 1 Semana 2
N# Día Día Día Día Día Día Día Día Día Día Día Día
1 2 3 4 5 6 1 2 3 4 5 6
T1
T2
T3
T4
T5
Nota: Está basado en el sprint 1 que se mencionó en el cronograma de titulación. Elaboración y fuente propia.
El sprint 2 que se detalla en la Tabla 68 perteneciente al levantamiento de los
requerimientos para el desarrollo del prototipo de aplicaciones web progresiva, dichos
requerimientos se obtuvieron mediante las reuniones con el Sr. Bolívar Guartambel Albarracin,
Tabla 68
Sprint 2 levantamiento de requerimientos
Semana 2 Semana 3
1 2 3 4 5 6 1 2 3 4 5 6
T1
T2
El sprint 3 que se detalla en la Tabla 69 perteneciente a la adaptación de las herramientas
que van a hacer utilizadas para el desarrollo del prototipo de aplicación web progresiva las cuales
186
se obtuvieron en base al análisis e investigación de herramientas de desarrollo.
Tabla 69
Sprint 3 Adaptación de herramientas de desarrollo
Semana 3 Semana 4
1 2 3 4 5 6 1 2 3 4 5 6
T1
T2
El sprint 4 que se detallan en la Tabla 70 hasta la Tabla 73 pertenecientes al desarrollo de
los módulos que deben contener el prototipo de aplicación web progresiva, estos módulos están
basados en el levantamiento de requerimientos de usuarios que se obtuvieron mediante reuniones
con el Sr. Bolívar Guartambel Albarracin, propietario de la farmacia Nicolás Bolívar.
Tabla 70
Sprint 4 Desarrollo de módulos
Semana 3 Semana 4 Semana 5

N# D D D D D D D D D D D D D D D D D D
1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6
T1
T2
Tabla 71
Sprint 4.1 Desarrollo de módulos

1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6
T3
T4
T5
187
Tabla 72

1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6
T6
T7
T8
T9
Tabla 73
Semana 10 Semana 11
1 2 3 4 5 6 1 2 3 4 5 6
T10
El sprint 5 que se detalla en la Tabla 74 pertenece al desarrollo de interfaz de usuarios que
debe contener el prototipo de aplicaciones web progresiva, el desarrollo de esta interfaz está basado
en el levantamiento de los requerimientos de usuarios que se obtuvieron mediante reuniones con
el Sr. Bolívar Guartambel Albarracin, propietario de la farmacia Nicolás Bolívar.
Tabla 74
Sprint 5 Desarrollo de la interfaz de usuario
Semana 10 Semana 11
1 2 3 4 5 6 1 2 3 4 5 6
T1
El sprint 6 que se detalla en la Tabla 75 pertenece a las pruebas y validaciones a realizar al
prototipo de aplicación web progresiva, mediante juicio de experto para verificar la factibilidad de
188
este trabajo de titulación.
Tabla 75
Sprint 6 Pruebas y validación
Semana 11 Semana 12
1 2 3 4 5 6 1 2 3 4 5 6
T1
T2
T3
T4
T5
Metodología Ágil Extreme Programming (XP)
Para el presente trabajo de titulación se eligió la metodología Extreme Programming (XP),
como metodología de desarrollo, ya que se acopla con los objetivos establecidos para cumplir con
la propuesta tecnológica en el desarrollo del prototipo de aplicación web progresiva para mejorar
el proceso de gestión de ventas en la farmacia Nicolás Bolívar.
Según el autor (Encalada, 2018) define:
XP es una metodología ágil popular, desarrollada a base de principios del sentido común y
prácticas habituales llevadas a niveles extremos. XP promueve versiones a partir de
porciones funcionales de código con la finalidad de incrementar la productividad y
mantener el flujo apegado a los requerimientos con especial énfasis en la adaptabilidad ante
posibles cambios.
Esta metodología permite agilizar la gestión de proyectos, mediante entregas pequeñas en
un ciclo corto de desarrollo, lo cual evitará que los futuros cambios que solicite el cliente afecte
con el desarrollo de dichos proyectos.
Fases de la metodología XP
A continuación, en la Figura 48 se presentas las fases que tiene la metodología XP según

189
los autores (Soto & Dorado, 2020).
Figura 48
Fases de la metodología XP
Nota: En esta figura se puede visualizar las fases con las que cuenta la metodología XP (Extreme Programming), la
cual está compuesta por 5 fases. Elaboración y Fuente tomado de (Soto & Dorado, 2020).
Planificación
La planificación es la recolección de historias de usuarios dónde se estima el esfuerzo que
se necesita para implementarlas. Para los autores (Soto & Dorado, 2020) definen. “Es la etapa
inicial dónde se requiere de la comunicación continua entre el equipo de trabajo los cuales
definirán los requerimientos principales del sistema a desarrollar, además que se definen el alcance
del proyecto y la fecha estimada de entrega” (p. 66). La prioridad de las historias de usuarios se
basa en el tiempo o el alcance.
Las principales actividades que se encuentran dentro de esta etapa que son:
 Roles.
 Historia de usuarios.
 Reuniones.
190
Roles dentro de la metodología XP
A continuación, se presentan los agentes que intervienen en el equipo de desarrollo de
software dentro de la metodología XP según la autora (Silvia, 2020).
 Programadores: Son los encargados de definir la planificación del proyecto basándose
en los requerimientos del cliente.
 Cliente: Es considerado un actor principal en la metodología XP, el cual se le presenta
entregables del proyecto por ciclos cortos, para que pueda definir estándares desde el
principio.
 Testers: Son los encargados de realizar pruebas constantes al software en desarrollo.
Su comunicación con el cliente debe ser fluida.
 Trackers: Define los indicadores de medición de rendimiento del equipo del proyecto,
es el encargado de asegurar que haya control y orden.
 Coach: Es el Project Manager el cual se encarga del asesoramiento y vinculación del
equipo del proyecto con el cliente.
 Big Boss: Es el dueño del equipo de trabajo, es el encargado de administrar los recursos
para el desarrollo del proyecto, solucionar los problemas que se generen, define las
reuniones del equipo de trabajo.
Para el presente trabajo de titulación sobre el desarrollo del prototipo de la aplicación web
progresiva, contará con los siguientes roles con base a la metodología XP, como se detallan a
continuación en la Tabla 76.

191
Tabla 76
Roles dentro de la metodología XP
Rol Encargado Fusión

Cliente Sr. Bolívar Guartambel Encargado de dar los
Albarracin requerimientos.
Programadores Diego Mero Albarracin, Equipo de desarrollo del prototipo
Gilson Quinde Briones de aplicación web progresiva.
Tester Diego Mero Albarracin, Encargados de realizar las pruebas
Gilson Quinde Briones y validaciones del funcionamiento
del prototipo de aplicación web
progresiva
Tracker Ing. Ángela Yanza Montalván Dar seguimiento a las iteraciones del
trabajo de titulación.
Coach Ing. Ángela Yanza Montalván Brindar soluciones a presuntos
problemas que se generan en el
tiempo del desarrollo del proyecto
Big Boss Ing. Ángela Yanza Montalván Encargada de gestionar y coordinar
las actividades del trabajo de
titulación.
Nota: Estos son los roles que intervienen en la metodología XP la cual fue seleccionada para el desarrollo del prototipo
de aplicación web progresiva. Fuente y elaboración propia.
Historias de usuario
Las historias de usuarios son resúmenes concretos que especifican los requisitos que un
software debe contener. Los autores (Lopez & Hernández, 2018) comentan. “Las historias de
usuario es dónde se describen las características y funcionalidades del software. El cliente asigna
un valor o prioridad a la historia, los desarrolladores evalúan cada historia y le asignan un costo el
cual se mide en semanas de desarrollo”. Estas historias de usuarios son utilizadas en la fase de
pruebas para verificar si el programa cumple con lo que especificado.
A continuación, se presenta las historias de usuarios desde la Tabla 77 hasta la Tabla 94
las cuales fueron recolectadas mediante las reuniones y entrevistas realizadas con el Sr. Bolívar
Guartambel Albarracin, propietario de la farmacia Nicolás Bolívar y la Ing. Ángela Yanza
Montalván tutora designada para el presente trabajo de titulación.

192
Tabla 77
Nombre de Historia: Proceso actual de la gestión de ventas.
Prioridad: Alta Riesgo en desarrollo: Alta
Puntos estimados: 1 Iteración asignada: 1
Programador Responsable: Mero Albarracin Diego y Quinde Briones Gilson.
Descripción:
1. Se debe lograr analizar la situación actual del proceso de gestión de ventas.
2. Se conoce el tiempo aproximado que dura el proceso de una venta.
3. Se debe conocer las herramientas que utilizan para manejar las ventas.
4. Se debe analizar las problemáticas que afecta a la gestión de ventas.
Observaciones:
propietario de la farmacia Nicolás Bolívar dónde se menciona el proceso actual de las ventas que posee la farmacia.
Tabla 78
Nombre de Historia: Levantamiento de requerimientos
Descripción:
1. Se debe levantar correctamente los requerimientos por parte del propietario.
2. Se definir los módulos que tendrá el prototipo de aplicación web.
3. Los roles que desea tener.
Observaciones:
propietario de la farmacia Nicolás Bolívar, dónde se definieron los respectivos requerimientos para el desarrollo del
193
Tabla 79
Nombre de Historia: Definir módulos.
Descripción:
1. Se definen los módulos que debe contener la aplicación web progresiva
2. Se define el contenido de cada uno de los módulos.
Observaciones:
proporcionada de la farmacia Nicolás Bolívar dónde se menciona los módulos que debe tener el prototipo de aplicación
Tabla 80
Nombre de Historia: Definir roles.
Descripción:
1. Se definen los roles que intervienen en el prototipo de aplicación web
2. Se definen las restricciones para cada uno de los roles.
3. Se definen que acceso tener cada uno de los roles.
Observaciones:
propietario de la farmacia Nicolás Bolívar dónde se menciona que el prototipo de aplicación web progresiva debe
poseer dos roles de usuarios, que son usuario cliente y usuario administrador, las restricciones que cada rol debe
poseer. Elaboración y fuente propia.
194
Tabla 81
Nombre de Historia: Encuestas
Prioridad: Media Riesgo en desarrollo: Media
Descripción:
1. Se realizan encuestas a la población que se tomó como muestra en la parroquia Tarqui
en la ciudad de Guayaquil.
2. Se debe conocer las experiencias de los ciudadanos con el uso de tecnología.
3. Se debe conocer si tienen acceso a la tecnología, al uso de internet.
4. Se debe conocerlas experiencias de los ciudadanos con plataformas dedicadas a las
compras ventas online.
5. Se debe analizar las respuestas de los encuestados para ver la factibilidad del proyecto.
Observaciones:
Nota: Está basada en los cálculos que se realizaron para la toma de la muestra para las encuestas, dando como resultado
278 personas que habitan en la parroquia Tarqui, las cuales se les realizará aleatoriamente las respectivas encuestas
las cuales consisten en 15 preguntas. Elaboración y fuente propia.
Tabla 82
Nombre de Historia: Desarrollo del módulo de Stock.
Prioridad: Media Riesgo en desarrollo: Medio
Descripción:
1. Se desarrolla el módulo de Stock.
2. Se desarrolla la opción de modificar el movimiento de ingreso.
3. Se desarrolla la opción de eliminar el movimiento de ingreso.
4. Se desarrolla un buscador el cual estará parametrizado.
5. Se desarrolla una tabla de productos en stock el cual estará parametrizado.
Observaciones:
propietario de la farmacia Nicolás Bolívar dónde se menciona que se debe elaborar el módulo de stock según los
requerimientos de usuarios previamente levantados. Elaboración y fuente propia.
195
Tabla 83
Nombre de Historia: Desarrollo del módulo de productos.
Descripción:
1. Desarrollo del módulo de productos.
2. Desarrollo de las secciones de nuevos productos y listados de productos.
3. Parametrización de los productos.
4. Desarrollo de la opción de modificar productos.
5. Desarrollo de la opción de cambiar el estado del producto (activo o inactivo).
6. Código único para cada producto
7. El administrador de la aplicación web tiene el acceso de activar y desactivar los
productos.
Observaciones:
propietario de la farmacia Nicolás Bolívar, dónde se menciona que se debe desarrollar el módulo de productos con
sus secciones, con los parámetros que debe manejar, la clasificación de los productos que se fue detallando en los
requerimientos de usuarios. Elaboración y fuente propia.
Tabla 84
Nombre de Historia: Desarrollo del módulo de promociones.
Descripción:
1. Desarrollo del módulo de promociones.
2. Elaboración de los parámetros de los productos.
3. Sección dónde se agregan los nuevos productos que se encuentra en promoción.
4. Sección de agregar al carrusel que se muestra en la interfaz principal de la aplicación
web.
5. Listados de productos que están en promociones.
6. Listados de los descuentos establecidos por productos.
7. Sección de establecer, modificar, fecha límite y estado del descuento.
Observaciones:
Nota: Está basada en la información de las reuniones con el Sr. Bolívar Guartambel Albarracin, propietario de la
farmacia Nicolás Bolívar dónde se menciona que se debe desarrollar el módulo de promociones, con las secciones
establecidas en los requerimientos del propietario. Elaboración y fuente propia.
196
Tabla 85
Nombre de Historia: Desarrollo del módulo de categorías.
Descripción:
1. Desarrollo del módulo de categoría.
2. Desarrollo de las tablas de categorías existente.
3. Desarrollo la opción de agregar nueva categoría.
4. Desarrollo de la opción de modificar las categorías.
5. Desarrollo de la opción de cambiar el estado de (activo e inactivo)
Observaciones:
propietario de la farmacia Nicolás Bolívar dónde se menciona que se debe desarrollar el módulo de categorías, con
las secciones establecidas en los requerimientos del propietario para el desarrollo del prototipo de aplicación web.
Tabla 86
Nombre de Historia: Desarrollo del módulo de pedidos.
Descripción:
1. Se desarrolla la interfaz del módulo de pedido.
2. Se enlistan los productos, por categorías.
3. Los datos del usuario se muestran al realizar una compra.
4. El usuario puede editar y agregar datos al momento de realizar la compra
5. Se le generará un comprobante al momento de realizar una compra, el cual servirá para
poder recibir la entrega o retirar personalmente su compra.
6. El administrador puede descargar factura.
7. Se desarrolla la opción de confirmar y cancelar pedidos en la interfaz del administrador.
Observaciones:
Nota: Está basada en la información recolectadas mediante las reuniones con el Sr Bolívar Guartambel Albarracin,
propietario de la farmacia Nicolás Bolívar dónde se menciona que se debe desarrollar el módulo de pedidos con sus
respectivas secciones en el prototipo de aplicación web. Elaboración y fuente propia.
197
Tabla 87
Nombre de Historia: Desarrollo del módulo de seguridad.
Descripción:
1. Desarrollo del módulo de seguridad.
2. Desarrollo del login del administrador y clientes.
3. Recuperación de contraseña.
4. Bloqueos por concurrencia de contraseña
5. Restricción de secciones al cliente.
6. El administrador podrá desactivar cuentas inactivas.
Observaciones:
Nota: Está basada en la información de las reuniones con el Sr. Bolívar Guartambel Albarracin, propietario de la
de seguridad. Elaboración y fuente propia.
Tabla 88
Nombre de Historia: Desarrollo del módulo de reportes.
Descripción:
1. Se debe levantar los requerimientos para el contenido del módulo de reporte.
2. Desarrollo y contenido de total de ventas.
3. Desarrollo y contenido de total de productos.
4. Desarrollo y contenido de total de categoría.
5. Desarrollo y contenido de total de usuarios.
6. Desarrollo de cada uno de los contenidos con sus dashboards
7. Los reportes pueden ser semanales, mensuales, trimestrales.
8. Desarrollar la opción de descarga de reportes en archivos de formatos pdf y xlsx.
Observaciones:
de reportes. Elaboración y fuente propia.
198
Tabla 89
Nombre de Historia: Desarrollo del módulo de Inventario.
Descripción:
1. Se desarrolla el módulo de inventario según los requerimientos de usuarios.
2. Se desarrolla la sección de ingresos, egresos y productos.
3. La sección de ingreso se visualizan los movimientos que se han realizado en el
inventario.
4. La sección de egresos se visualizan los movimientos que egresan.
5. Desarrollo de la opción de descarga de facturas en formato pdf.
6. Desarrolla la sección de productos donde se visualizan las cantidades ingresadas,
vendidas y disponibles.
Observaciones:
de inventario. Elaboración y fuente propia.
Tabla 90
Nombre de Historia: Desarrollo del módulo de auditoría.
Descripción:
1. Se desarrolla el módulo de auditoria según los requerimientos de usuarios.
2. Se visualizan los reportes tanto de usuarios clientes y administrador.
3. Se visualizan el comportamiento de inicio de sección tanto de usuarios clientes y
administrador.
4. Se visualizan los datos de los usuarios.
5. Desarrollar la opción de descarga de reportes en archivos de formatos pdf y xlsx
Observaciones:
de auditoría. Elaboración y fuente propia.
199
Tabla 91
Nombre de Historia: Desarrollo del módulo de chat.
Descripción:
1. El cliente se puede contactar con el empleado de la farmacia para realizar consultas.
2. Las consultas pueden ser sobre medicamentos.
3. Las consultas pueden ser sobre síntomas e inquietudes en general.
4. Las consultas pueden ser sobre la plataforma web.
5. Desarrollo de la opción de desactivar el chat.
Observaciones:
Nota: Está basada en la información de las reuniones realizadas con el Sr. Bolívar Guartambel Albarracin, propietario
de la farmacia Nicolás Bolívar, dónde se menciona el desarrollo y contenido que debe tener el módulo de chat en el
prototipo de aplicación progresiva. Elaboración y fuente propia.
Tabla 92
Nombre de Historia: Herramientas de desarrollo.
Descripción:
1. Investigación de las herramientas.
2. Realizar un análisis de tendencia de las herramientas de desarrollo.
3. Seleccionar las herramientas de desarrollo a utilizar.
4. Seleccionar las versiones de las herramientas a utilizar.
Observaciones:
Nota: Está basada en la información de las tutorías realizadas por la Ing. Ángela Yanza Montalván la cual fue
designada como tutora de este proyecto de titulación. Elaboración y fuente propia.
200
Tabla 93
Nombre de Historia: Desarrollo de la interfaz de usuario.
Descripción:
1. Se define qué tipo de interfaz de tener.
2. Deber ser una interfaz amigable.
Observaciones:
Nota: Está basada en la información de las reuniones con Sr. Bolívar Guartambel Albarracin, propietario de la
farmacia Nicolás Bolívar dónde manifiesta algunos requisitos que debe tener la interfaz del prototipo de aplicación
Tabla 94
Nombre de Historia: Pruebas.
Descripción:
1. Pruebas del funcionamiento de los módulos.
2. Pruebas en los registros de usuarios.
3. Pruebas en la sección de compras.
4. Pruebas del rol de administrador
5. Pruebas funcionales.
6. Pruebas no funcionales.
Observaciones:
Nota: Está basada en la información de la entrevista realizada al proporcionada de la farmacia Nicolás Bolívar.
Plan de entrega del proyecto
A continuación, en la Tabla 95 se presentan el plan de entra del proyecto dónde se enlistan
las historias de usuarios previamente mencionadas.

201
Tabla 95

Historias Iteración Prioridad Fecha de Fecha final
inicio
1 Proceso actual de la gestión de
1 Alta 15/07/2021 15/07/2021
ventas.
2 Encuestas. 1 Media 16/07/2021 16/07/2021
3 Levantamiento de requerimientos. 2 Alta 17/07/2021 19/07/2021
4 Definir módulos. 2 Alta 17/07/2021 17/07/2021
5 Definir roles. 2 Alta 17/08/2021 19/07/2021
6 Herramientas de desarrollo. 3 Alta 21/07/2021 22/07/2021
7 Desarrollo del módulo de
4 Alta 23/07/2021 29/07/2021
seguridad.
4 Alta 30/07/2021 04/08/2021
productos.
4 Alta 05/08/2021 09/08/2021
promociones.
4 Alta 10/08/2021 11/08/2021
categorías.
11 Desarrollo del módulo de pedidos. 4 Alta 12/08/2021 17/08/2021
12 Desarrollo del módulo de reporte. 4 Alta 18/08/2021 24/08/2021
13 Desarrollo del módulo de chat. 4 Alta 25/08/2021 27/08/2021
4 Alta 28/082021 02/09/2021
inventario.
15 Desarrollo del módulo de Stock. 4 Alta 03/09/2021 04/09/2021
4 Media 06/09/2021 09/08/2021
auditoría.
17 Desarrollo de interfaz de usuario 5 Alta 10/09/2021 14/09/2021
18 Pruebas 6 Alta 14/09/2021 18/09/2021
Nota: Está basado en la información recopilada en las entrevistas previamente realizadas con el propietario de la
farmacia Nicolás Bolívar. Elaboración y fuente propia.
Reuniones
Por medio de las reuniones que se han realizado semanalmente entre los desarrolladores y
el Big Boss la Ing. Ángela Yanza Montalván designada como tutora del presente trabajo de
titulación, se trataron los objetivos a cumplir e impedimentos que se tenían en el momento y la
planificación para la siguiente semana.

202
Diseño
En esta fase se trabaja con la programación orientada a objetos y con los recursos necesario
para que funcione. Según el autor (Gavilanes, 2019) expone. “Se sugiere que el diseño sea simple
y sencillo, con la finalidad de que sea entendible a lo largo del desarrollo del proyecto. Es por ello
que a partir de los requisitos que se deben cubrir se dio paso a la realización del diseño del
proyecto” (p.13). Es esencial que los códigos que sean innecesarios sean eliminados para no afecte
al proyecto.
En los siguientes aparatos desde la Figura 49 hasta la Figura 53 se presentan los diseños
de las interfaces amigables de algunos de módulos que tienen mayor relevancia en el prototipo de
aplicación web.
Figura 49
Página principal
Nota: se presenta la página principal, la página de inicio cuando se entra al prototipo de aplicación web progresiva de
la farmacia Nicolás Bolívar. Elaboración y fuente propia.
203
Figura 50
Inicio de sesión – Usuario cliente
Nota: Se muestra la sección del inicio de sesión del usuario cliente el cual está desarrollado basado en los
requerimientos de usuarios previamente levantados Elaboración y fuente propia.
Figura 51
Inicio de sesión - Usuario administrador
Nota: Se muestra la sección del inicio de sesión del usuario administrador el cual está desarrollado basado en los
requerimientos de usuarios previamente levantados Elaboración y fuente propia.
204
Figura 52
Módulo de reporte
Nota: Se muestra el módulo de reporte con sus respectivas secciones las cuales están basadas en los requerimientos
de usuarios previamente levantados Elaboración y fuente propia.
Figura 53
Módulo de chat
Nota: Se muestra el módulo de chat basado en los requerimientos de usuarios previamente levantados Elaboración y
fuente propia.
Modelado de la base de datos
El modelado de la base de datos del presente trabajo de titulación se puede observar en el
Anexo 10, el cual fue elaborado con la herramienta open source Lucidchard. El modelado de datos
permite estructurar y organizar datos, esto permite facilitar el manejo de dichos datos para el
205
desarrollo de la base de datos.
Diagrama de flujo de proceso
Es un diagrama que permite visualizar las actividades que son implicadas en un proceso de
manera secuencial. Según la universidad en internet (UNIR, 2021) definen. “Es la representación
gráfica de un proceso o un algoritmo. Se utiliza para expresar un trabajo o actividad paso a paso
en diversas disciplinas. Se basa en varias figuras geométricas con un significado concreto para su
elaboración”. El diagrama de flujo agiliza los indicadores de procesos al momento de evaluar
rendimiento y eficacia. En el Anexo 5.1 y Anexo 5.2 se presenta el diagrama de flujo del proceso
actual y proceso mejorado de la gestión de ventas en la farmacia Nicolás Bolívar.
Codificación
Está relacionada con las historias de usuarios, ya que en esta fase los desarrolladores
implementan lo ya expuesto en las historias de usuarios. Según el autor (Gavilanes, 2019) expone.
“Hace referencia a todo aquello relevante a la programación mediante la codificación del sistema,
teniendo en cuenta que el cliente es uno más del equipo de desarrollo, haciendo que el personal
encargado de la codificación cumpla con la funcionalidad especificada” (p.14). Como se mencionó
en el Capítulo II de las herramientas de desarrollo para la elaboración de este trabajo de titulación
se utilizó el editor de texto Visual Studio Code que es una herramienta open source.
Un aproximado de 20.000 líneas de código se generó en el desarrollo de este prototipo de
aplicación web progresiva, se seleccionaron las principales líneas de código que se muestran en
los siguientes apartados desde la Figura 54 hasta la Figura 59.

206
Figura 54
Ejemplo del código del módulo de seguridad para inicio de sesión
Nota: Esta figura se observa el código perteneciente a una parte la función que valida el inicio de sesión. Elaboración
y fuente propia.
Figura 55
Ejemplo del código para concurrencia de intentos de inicio de sesión
Nota: Esta figura pertenece a una parte del código del módulo de seguridad, donde se encuentra la función de
concurrencia de contraseña de los 3 intentos fallidos. Elaboración y fuente propia.
207
Figura 56
Ejemplo del código para imprimir en PDF la tabla de reportes
Nota: Esta figura pertenece a una parte del código de la función que genera el documento en PDF para imprimir el
reporte. Elaboración y fuente propia.
Figura 57
Ejemplo del código para generar factura
Nota: Esta figura pertenece a una parte del código de la función que genera la factura para imprimir en formato PDF.
208
Figura 58
Ejemplo del código que instala el service worker en el navegador
Nota: Esta figura pertenece a una parte del código que instala el service worker en el navegador. Elaboración y fuente
propia.
Figura 59
Ejemplo del código de la función que permite crear un nuevo producto
Nota: Esta figura pertenece a una parte del código de la función que permite crear un nuevo producto. Elaboración y
fuente propia.
209
Pruebas
Para la realizar la evaluación del prototipo de aplicación se optó por utilizar una serie de
pruebas unitarias para cada módulo, con el fin de comprobar la calidad y rendimiento de cada uno
de estos módulos. Para llevar a cabo estas pruebas se hizo uso de la herramienta open source de
Google llamada Lighthouse, la cual ayuda determinar el rendimiento, accesibilidad, buenas
prácticas, SEO y detectar si la aplicación cuenta con la tecnología PWA.
En los siguientes apartados se muestran las pruebas realizadas en el prototipo de la
aplicación web y los reportes proporcionados por la herramienta de Google.
A continuación, en la Figura 60 se presenta el reporte brindado por la herramienta de
Google conocida como Lighthouse, sobre las características del módulo de seguridad/inicio de
sesión del lado de cliente.
Figura 60
Reporte del módulo de seguridad/inicio de sesión del lado del cliente
Nota: En la presente figura se muestra el reporte proporcionado por la herramienta Lighthouse de Google sobre el
módulo de seguridad/ inicio de sesión del lado del cliente. Elaboración: Propia de los autores. Fuente: Tomado de la
herramienta Lighthouse.
210
En la Figura 60 se muestra el reporte del módulo de seguridad/inicio de sesión del lado del
cliente; como se observa el rendimiento de este módulo es del 66%, esto debido al contenido
multimedia utilizado para brindar un aspecto amigable al usuario. Se puede concluir que este
módulo cumple con los criterios de evaluación establecidos por la propia herramienta de Google.
En la Tabla 96 se presenta el resultado a detalle de la prueba realizada en el módulo de
seguridad/inicio de sesión del lado del cliente.
Tabla 96
Prueba unitaria del módulo de seguridad/inicio de sesión del lado del cliente
Prueba unitaria del módulo de seguridad/inicio de sesión del lado del cliente
Objetivo de la prueba: Validar los campos del módulo de seguridad/sesión para el ingreso de
clientes a la aplicación web.
Descripción de la prueba: Se comprobó las validaciones de los campos de ingreso de datos
de usuario para su correcto inicio de sesión.
Técnica: Se utilizó la herramienta Lighthosue permite medir las características de la aplicación
web tales como: performance, accessibility, best practices, SEO y PWA.
Criterios de completitud: Se obtuvo un performance del 66%, un accessibility del 78%, un
best practices del 80%, un SEO del 90% y la implementación de la tecnología PWA con 7/8.
Consideraciones especiales: Para el reporte del módulo se utilizó la herramienta Lighthosue
para dispositivos desktop.
Nota: En la presente tabla se puede observar el resumen que se realizó basado en la prueba unitaria realizada al módulo
de seguridad/inicio de sesión. La elaboración es propia de los autores. Fuente: Lighthosue.
En la Figura 61 se presenta el reporte proporcionado por la herramienta de Google
conocida como Lighthouse, sobre las características del módulo de seguridad/inicio de sesión del
lado de administrador.
211
Figura 61
Reporte del módulo de seguridad/inicio de sesión del lado del administrador
módulo de seguridad/ inicio de sesión del lado del administrador. Elaboración: Propia de los autores. Fuente: Tomado
de la herramienta Lighthouse.
En la Figura 61 se muestra el reporte del módulo de seguridad/inicio de sesión del lado del
administrador; como se observa el rendimiento de este módulo es excelente, siendo este del 97%
como consecuencia de que esta interfaz esta diseña sobre un modal, el cual reduce el tiempo de
carga de datos. Adicionalmente este proceso es realizado por etapas y la información es validada
y guardada al llenar cada campo. Se puede concluir que este módulo cumple con los criterios de
evaluación establecidos por la propia herramienta de Google.
seguridad/inicio de sesión del lado del administrador.

212
Tabla 97
Prueba unitaria del módulo de seguridad/inicio de sesión del lado del administrador
Prueba unitaria del módulo de seguridad/inicio de sesión del lado del administrador
Objetivo de la prueba: Validar los campos del módulo de seguridad/sesión para el ingreso de
los administradores a la aplicación web.
Descripción de la prueba: Se comprobó las validaciones de los campos de ingreso de datos
de usuario para su correcto inicio de sesión.
de seguridad/inicio de sesión. La elaboración es propia de los autores. Fuente: Lighthosue.
En la Figura 62 se presenta el reporte brindado por la herramienta de Google conocida
como Lighthouse, sobre las características del módulo de productos/nuevo producto.
Figura 62
Reporte del módulo de productos/nuevo producto
módulo productos/nuevo producto. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta Lighthouse.
213
En la Figura 62 se muestra el reporte del módulo de productos/nuevo producto; como se
observa el rendimiento de este módulo es del 77% esto debido a que el proceso es realizado por
etapas y la información es validada llenar cada campo antes de ser guardada de la base de datos.
Se puede concluir que este módulo cumple con los criterios de evaluación establecidos por la
propia herramienta de Google.
En la Tabla 98 se presenta el resultado a detalle de la prueba realizada en el módulo
productos/nuevo producto.
Tabla 98
Prueba unitaria del módulo de productos/nuevo producto
Prueba unitaria del módulo productos/nuevo producto

Objetivo de la prueba: Validar los campos del módulo de productos/nuevo para el ingreso de
datos en la aplicación web.
Descripción de la prueba: Se comprobó las validaciones de los campos de ingreso de los
productos para la creación de un nuevo producto.
de productos/nuevo producto. La elaboración es propia de los autores. Fuente: Lighthosue.
conocida como Lighthouse, sobre las características del módulo de productos/lista de productos.
214
Figura 63
Reporte del módulo de productos/lista de productos
módulo de productos/lista de productos. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de
Lighthouse.
En la Figura 63 se muestra el reporte del módulo de productos/lista de productos; como se
observa el rendimiento de este módulo es del 80%, lo cual se debe a la cantidad de datos manejados
para ser mostrada en una sola tabla. Se puede concluir que este módulo cumple con los criterios
de evaluación establecidos por la propia herramienta de Google.
productos/lista de productos.
215
Tabla 99
Prueba de unitaria del módulo de productos/lista de productos
Prueba de unitaria del módulo de productos/lista de productos

Objetivo de la prueba: Comprobar los campos de información que contiene el módulo de
productos/lista de productos aplicación web.
Descripción de la prueba: Se comprobó las validaciones de los campos de ingreso para
modificación de datos de productos.
web como: performance, accessibility, best practices, SEO y PWA.
de productos/lista de productos. La elaboración es propia de los autores. Fuente: Lighthosue.
A continuación, en la Figura 64 se presenta el reporte proporcionado por la herramienta de
Google conocida como Lighthouse, sobre las características que posee el módulo de
promociones/nuevo (nuevo carousel).
Figura 64
Reporte del módulo de promociones/nuevo
módulo de promociones/nuevo. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
216
En la Figura 64 se muestra el reporte del módulo de promociones/nuevo (nuevo corousel);
como se observa el rendimiento de este módulo es muy bueno, siendo este del 91%, lo cual se debe
a que los campos son validados antes de ser guardados en la base de datos y el contenido utilizado
es bastante ligero permitiendo la carga de datos en un menor tiempo. Se puede concluir que este
módulo cumple con los criterios de evaluación establecidos por la propia herramienta de Google.
promociones/nuevo (nuevo carousel).
Tabla 100
Prueba de unitaria del módulo de promociones/nuevo
Prueba de unitaria del módulo de promociones/nuevo

Objetivo de la prueba: Validar los campos para el ingreso de datos en el módulo de
promociones/nuevo de la aplicación web.
Descripción de la prueba: Se comprobó las validaciones de los campos para el ingreso de
nuevo carousel.
best practices del 73%, SEO del 80% y la implementación de la tecnología PWA con 3/8.
de promociones/nuevo. La elaboración es propia de los autores. Fuente: Lighthosue.
En la Figura 65 que se muestra a continuación, se presenta el reporte proporcionado por la
herramienta de Google conocida como Lighthouse, sobre las características que posee el módulo
de promociones/establecer descuentos.
217
Figura 65
Reporte del módulo de promociones/establecer descuentos
módulo de promociones/establecer descuentos. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta
de Lighthouse.
En la Figura 65 se muestra el reporte del módulo de promociones/establecer descuentos;
como se observa el rendimiento de este módulo es del 81%, esto debido a la cantidad de
información que debe procesar este módulo. Por otro lado, los campos para el ingreso de
descuentos están debidamente validados. Se puede concluir que este módulo cumple con los
criterios de evaluación establecidos por la propia herramienta de Google.
promociones/establecer descuentos.
218
Tabla 101
Prueba de unitaria del módulo de promociones/establecer descuentos

Objetivo de la prueba: Validar los campos para el ingreso de datos en el módulo de
promociones/establecer descuentos de la aplicación web.
Descripción de la prueba: Se realizó la evaluación de las validaciones de los campos para
establecer los descuentos a los productos.
de promociones/establecer descuentos. La elaboración es propia de los autores. Fuente: Lighthosue.
conocida como Lighthouse, sobre las características que posee el módulo de promociones/lista de
promociones.
Figura 66
Reporte del módulo de promociones/lista de promociones
módulo de promociones/establecer descuentos. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta
de Lighthouse.
219
En la Figura 66 se muestra el reporte del módulo de promociones/lista de promociones;
como se observa el rendimiento de este módulo es excelente, siendo este del 92% debido a que la
información que se muestra es bastante ligera, lo que permite que sea visualizada en un menor
tiempo. Se puede concluir que este módulo cumple con los criterios de evaluación establecidos
por la propia herramienta de Google.
promociones/lista de promociones.
Tabla 102
Prueba de unitaria del módulo de promociones/lista de promociones

Objetivo de la prueba: Validar la información mostrada en el módulo de promociones/lista
de promociones de la aplicación web.
Descripción de la prueba: Se realizó la evaluación de las validaciones de la información
visualizada en el módulo.
de promociones/lista de promociones. La elaboración es propia de los autores. Fuente: Lighthosue.
categorías/listado de categorías.
220
Figura 67
Reporte del módulo de categorías/listado de categorías
módulo de categorías/listado de categorías. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de
Lighthouse.
En la Figura 67 se muestra el reporte del módulo de categorías/listado de categorías; como
se observa el rendimiento de este módulo es excelente, siendo este del 93% debido a que este
proceso consta de solo un campo que es ingresado en la base de datos. Por otro lado, la información
mostrada es bastante ligera lo que permite que sea visualizada en un menor tiempo. Se puede
concluir que este módulo cumple con los criterios de evaluación establecidos por la propia
herramienta de Google.
categorías/listado de categorías.
221
Tabla 103
Prueba de unitaria del módulo de categorías/listado de categorías
Prueba de unitaria del módulo de categorías/listado de categorías

Objetivo de la prueba: Validar el campo en el módulo de promociones/lista de promociones
para el ingreso de una nueva categoría.
Descripción de la prueba: Se realizó la evaluación de las validaciones de la información para
el ingreso y visualización en el módulo.
de categorías/listado de categorías. La elaboración es propia de los autores. Fuente: Lighthosue.
conocida como Lighthouse, sobre las características que posee el módulo de pedidos.
Figura 68
Reporte de módulo de pedidos
módulo de pedidos. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
222
En la Figura 68 se muestra el reporte del módulo de pedidos; como se observa el
rendimiento de este módulo siendo este del 88% debido este proceso maneja una gran cantidad de
datos que requiere ser consulta en la base datos. Por otro lado, la información que se visualiza está
debidamente validada. Se puede concluir que este módulo cumple con los criterios de evaluación
establecidos por la propia herramienta de Google.
pedidos.
Tabla 104
Prueba de unitaria del módulo de pedidos
Prueba de unitaria del módulo de pedidos

Objetivo de la prueba: Validar que la información mostrada en el módulo de pedidos es
acorde a los campos mostrados en la tabla.
Descripción de la prueba: Se realizó la evaluación de las validaciones de la información de
los pedidos mostrados en el módulo.
de pedidos. La elaboración es propia de los autores. Fuente: Lighthosue.
inventario/ingreso.
223
Figura 69
Reporte del módulo de inventario/ingreso
módulo de inventario/ingreso. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
En la Figura 69 se muestra el reporte del módulo de inventario/ingreso; como se observa
el rendimiento de este módulo siendo este del 83%, lo cual se debe a que este proceso requiere
consultar una cantidad considerable de datos. Por otro lado, la información que se visualiza está
debidamente validada. Se puede concluir que este módulo cumple con los criterios de evaluación
establecidos por la propia herramienta de Google.
inventario/ingreso.
224
Tabla 105
Prueba de unitaria del módulo de inventario/ingreso
Prueba de unitaria del módulo inventario/ingreso

Objetivo de la prueba: Validar que la información mostrada en el módulo de
inventario/ingreso es acorde a los campos mostrados en la tabla.
los movimientos de inventario/ingresos mostrados en la tabla.
de inventario/ingreso. La elaboración es propia de los autores. Fuente: Lighthosue.
En la Figura 70 que se presenta a continuación, se puede observar el reporte brindado por
la herramienta de Google conocida como Lighthouse, sobre las características del módulo de
inventario/egreso.
Figura 70
Reporte del módulo de inventario/egreso
módulo de inventario/egreso. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
225
En la Figura 70 se muestra el reporte del módulo de inventario/egreso; como se observa el
rendimiento de este módulo es excelente siendo este del 83%, lo cual se debe a que este proceso
es realizado por etapas mediante la consulta de información a la base de datos, información que
no representa gran tamaño. Por otro lado, la información que se visualiza está debidamente
validada. Se puede concluir que este módulo cumple con los criterios de evaluación establecidos
por la propia herramienta de Google.
inventario/egreso.
Tabla 106
Prueba de unitaria del módulo de inventario/egreso
Prueba de unitaria del módulo inventario/egreso

Objetivo de la prueba: Validar que la información mostrada en el módulo de
inventario/egreso es acorde a los campos mostrados en la tabla.
los movimientos de inventario/egresos mostrados en la tabla.
de inventario/egreso. La elaboración es propia de los autores. Fuente: Lighthosue.
seguridad/usuario (cliente).
226
Figura 71
Reporte del módulo de seguridad/usuario
módulo de seguridad/usuario. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
En la Figura 71 se muestra el reporte del módulo de seguridad/usuarios; como se observa
el rendimiento es del 87% debido a que este proceso se los realiza por etapas y los campos para el
registro de información están debidamente validados. Se puede concluir que este módulo cumple
con los criterios de evaluación establecidos por la propia herramienta de Google.
seguridad/usuario.
227
Tabla 107
Prueba de unitaria del módulo seguridad/usuario
Prueba de unitaria de seguridad/usuario

Objetivo de la prueba: Validar los campos para el ingreso y modificación de información en
el módulo de seguridad/usuario.
Descripción de la prueba: Se realizó el ingreso y modificaciones de información de los
usuarios (clientes) en el módulo.
de seguridad/usuario. La elaboración es propia de los autores. Fuente: Lighthosue.
seguridad/administrador.
Figura 72
Reporte del módulo de seguridad/administrador
módulo de seguridad/administrador. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de
Lighthouse.
228
En la Figura 72 se muestra el reporte del módulo de seguridad/administrador; como se
observa el rendimiento es del 79% debido a que este proceso maneja una cantidad considerable de
datos de los usuarios administradores. Se puede concluir que este módulo cumple con los criterios
de evaluación establecidos por la propia herramienta de Google.
seguridad/administrador.
Tabla 108
Prueba de unitaria del módulo de seguridad/administrador
Prueba de unitaria del módulo seguridad/administrador

Objetivo de la prueba: Validar los campos para el ingreso y modificación de información en
el módulo de seguridad/administrador.
Descripción de la prueba: Se realizó el ingreso y modificaciones de información del
administrador en el módulo.
de seguridad/administrador. La elaboración es propia de los autores. Fuente: Lighthosue.
reportería/estadística.
229
Figura 73
Reporte del módulo de reportería/estadística
módulo de reportería/estadísticas. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de
Lighthouse.
En la Figura 73 se muestra el reporte del módulo de reportería/estadísticas; como se
observa el rendimiento es muy bueno, siendo este del 91%, ya que la consulta de información a la
base de datos es de información bastante ligera. Por otro lado, los gráficos que se visualizan en el
módulo no representan una inconveniente en la carga de datos. Se puede concluir que este módulo
cumple con los criterios de evaluación establecidos por la propia herramienta de Google.
reportería/estadísticas.
230
Tabla 109
Prueba de unitaria del módulo reportería/estadísticas
Prueba de unitaria del módulo reportería/estadísticas

Objetivo de la prueba: Validar que la información que se visualiza en el módulo de
reportería/estadísticas sea la acorde a los datos consultados en el proceso.
Descripción de la prueba: Se realizó la evaluación de los datos obtenidos en las en los gráficos
estadísticos.
de reportería/estadísticas. La elaboración es propia de los autores. Fuente: Lighthosue.
reportería/reportes.
Figura 74
Reporte del módulo de reportería/reportes
módulo de reportería/reportes. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
231
En la Figura 74 se muestra el reporte del módulo de reportería/reportes; como se observa
el rendimiento es del 67% debido a que este proceso requiere de realizar una cantidad considerable
de consultas a la base de datos lo que genera una demora en la visualización de contenido. Se
puede concluir que este módulo cumple con los criterios de evaluación establecidos por la propia
herramienta de Google.
reportería/reportes.
Tabla 110
Prueba de unitaria del módulo reportería/reportes
Prueba de unitaria del módulo reportería/reportes

Objetivo de la prueba: Validar que la información que se visualiza en el módulo de
reportería/reportes sea la acorde a los datos consultados en el proceso.
Descripción de la prueba: Se realizó la evaluación de los datos de las ventas obtenidos en los
en el reporte.
de reportería/reportes. La elaboración es propia de los autores. Fuente: Lighthosue.
la herramienta de Google conocida como Lighthouse, sobre las características del módulo de chat
en línea.
232
Figura 75
Reporte del módulo de chat en línea
módulo de chat en línea. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
En la Figura 75 se muestra el reporte del módulo de chat en línea; como se observa el
rendimiento es del 75%, lo cual se debe a la cantidad de información que debe procesar este
módulo lo que genera una demora en la carga de datos. Se puede concluir que este módulo cumple
con los criterios de evaluación establecidos por la herramienta de Google.
chat en línea.
233
Tabla 111
Prueba de unitaria del módulo de chat en línea
Prueba de unitaria del módulo de chat en línea

Objetivo de la prueba: Validar los campos del módulo de chat en línea para el ingreso del
nombre e interacción en tiempo real.
Descripción de la prueba: Se realizó la evaluación de la validación de campos, así como los
datos obtenidos de la interacción en tiempo real por parte del usuario (cliente).
de chat en línea. La elaboración es propia de los autores. Fuente: Lighthosue.
A continuación, en la Figura 76 que se presenta a continuación, se puede observar el
reporte brindado por la herramienta de Google conocida como Lighthouse, sobre las características
del módulo de auditoria/usuarios (clientes).
Figura 76
Reporte del módulo de auditoria/usuarios
módulo de auditoria/usuarios. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
234
En la Figura 76 se muestra el reporte del módulo de auditoria/usuarios; como se observa
el rendimiento es del 89%, debido a la cantidad de información que debe procesar este módulo lo
que genera una demora en la carga de datos que se visualizan en la tabla. Se puede concluir que
este módulo cumple con los criterios de evaluación establecidos por la herramienta de Google.
auditoria/usuarios.
Tabla 112
Prueba de unitaria del módulo de auditoria/usuarios
Prueba de unitaria del módulo de auditoria/usuarios

Objetivo de la prueba: Validar los campos mostrados en la tabla sean los acordes la
información consultada en la base de datos.
mostrada en la tabla.
de auditoria/usuarios. La elaboración es propia de los autores. Fuente: Lighthosue.
auditoria/administrador
235
Figura 77
Reporte del módulo de auditoria/administrador
módulo de auditoria/administrador. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de
Lighthouse.
En la Figura 77 se muestra el reporte del módulo de auditoria/administrador; como se
observa el rendimiento es del 79%, debido a la cantidad de información que debe procesar este
módulo lo que genera una demora en la carga de datos que se visualizan en la tabla. Se puede
concluir que este módulo cumple con los criterios de evaluación establecidos por la herramienta
de Google.
auditoria/administrador.
236
Tabla 113
Prueba de unitaria del módulo de auditoria/administrador
Prueba de unitaria del módulo de auditoria/administrador

Objetivo de la prueba: Validar los campos mostrados en la tabla sean los acordes la
información consultada en la base de datos.
mostrada en la tabla.
de auditoria/administrador. La elaboración es propia de los autores. Fuente: Lighthosue.
la herramienta de Google conocida como Lighthouse, sobre las características del módulo de stock.
Figura 78
Reporte del módulo de stock
módulo de stock. Elaboración: Propia de los autores. Fuente: Tomado de la herramienta de Lighthouse.
237
En la Figura 78 se muestra el reporte del módulo de stock; como se observa el rendimiento
es muy bueno, siendo este del 90% debido a que la información es insertada en tablas y los campos
están debidamente validados. Por otro lado, la información que se muestra es ligera lo que reduce
el tiempo de carga de datos. Se puede concluir que este módulo cumple con los criterios de
evaluación establecidos por la propia herramienta de Google.
stock.
Tabla 114
Prueba de unitaria del módulo stock
Prueba de unitaria del módulo stock

Objetivo de la prueba: Validar que la información que el ingreso, modificación y
visualización en el módulo de stock se la realice de la manera apropiada sin alterar los datos.
Descripción de la prueba: Se realizó la evaluación de las validaciones de campos, así mismo
se comprobó que la información mostrada sea la acorde a los datos consultados en la base de
datos.
de stock. La elaboración es propia de los autores. Fuente: Lighthosue.
Lanzamiento
Tras realizar las respectivas pruebas de los módulos que contiene el prototipo de aplicación
web, se pone en marcha la fase de lanzamiento, la cual consisten en poner en funcionamiento la
aplicación. En los siguientes apartados se puede observar la funcionalidad de los módulos de
mayor relevancia de la aplicación web.

238
Figura 79
Funcionalidad del módulo de pedidos del lado del cliente
Nota: En la presente figura se muestra la funcionalidad del módulo de pedidos, donde se observa el pedido realizado
por parte del cliente. Elaboración y fuente propia de los autores.
Como se observa en la Figura 79 se muestra el detalle del pedido realizado por parte del
cliente, en este caso se añadió al carrito 2 productos, en esta pantalla se puede imprimir la ventana
que se visualiza al terminar al finalizar la orden de pedido.
Figura 80
Funcionalidad del módulo de pedidos del lado del administrador
Nota: En la presente figura se muestra la funcionalidad del módulo de pedidos, donde el administrador puede
visualizar en una tabla los detalles del pedido realizado por parte del cliente Elaboración y fuente propia de los autores.
239
Como se observa en la Figura 80 se muestra en una tabla los detalles del pedido realizado
por parte del cliente, donde el administrador tendrá la opción de confirmar o cancelar el pedido,
así mismo podrá descargar la factura generada una vez confirmado el pedido.
Figura 81
Funcionalidad del módulo de stock
Nota: En la presente figura se muestra la funcionalidad del módulo de stock, donde el administrador puede buscar y
visualizar un producto y agregar una cantidad al stock. Elaboración y fuente propia de los autores.
Como se observa en la Figura 81 en este módulo el administrador puede seleccionar uno
de los productos disponibles para proceder a agregar la cantidad que desee al inventario, la cual
será sumada a la cantidad ya existente del producto elegido.

240
Figura 82
Funcionalidad del módulo de stock (visualización de cantidad agregada al inventario)
Nota: En la presente figura se muestra la funcionalidad del módulo de stock, donde el administrador puede buscar y
visualizar un producto y agregar una cantidad al stock. Elaboración y fuente propia de los autores.
Como se observa en la Figura 82 en este módulo el administrador podrá visualizar en una
tabla los detalles al inventario, la cual será sumada a la cantidad ya existente del producto elegido.
Figura 83
Funcionalidad del módulo de chat de lado del cliente
Nota: En la presente figura se muestra la funcionalidad del módulo de chat del lado del cliente donde interactúa con
el personal de la farmacia. Elaboración y fuente propia de los autores.
241
Como se observa en la Figura 83 en este módulo el cliente se podrá contactar en tiempo
real para interactuar con el personal de la farmacia para realizar cualquier tipo de consultas
referentes a los productos o inquietudes sobre ciertas sintomatologías.
Figura 84
Funcionalidad del módulo de chat de lado del administrador
Nota: En la presente figura se muestra la funcionalidad del módulo de chat del lado del administrador donde interactúa
con los clientes. Elaboración y fuente propia de los autores.
Como se observa en la Figura 84 en este módulo el administrador puede comunicare en
tiempo real con los clientes o potenciales, además puede visualizar ciertos detalles del chat.
Beneficiarios directos e indirectos del proyecto
En el presente trabajo de titulación denominado “DESARROLLO DE UN PROTOTIPO
GESTIÓN DE VENTAS EN LA FARMACIA NICOLÁS BOLÍVAR” se pudo identificar los
involucrados que influyen tanto directa como indirectamente en la elaboración del proyecto, lo
242
cual se puede visualizar en el Anexo 4.2 correspondiente al análisis de involucrados. A
continuación, se presentan los beneficiarios directos e indirectos del proyecto.
 Beneficiarios directos: Propietario de la farmacia (Gerente), Personal de la empresa
(Vendedores), PM, Equipo de desarrollo del proyecto, Tutora responsable.
 Beneficiarios indirectos: Unidad Curricular, Agencia Nacional de Regulación, Control
y Vigilancia sanitaria (ARCSA), Clientes, Instituciones Privadas (Proveedores),
Instituciones Públicas (Ministerio de Salud Pública MSP).
Entregables del proyecto
Al finalizar el presente proyecto se entregará a la tutora asignada los siguientes
componentes:
 Trabajo de titulación (documento).
 Código fuente de la aplicación web.
 Manual de Usuario.
 Manual Técnico.
 Diagrama de la Base de Datos.
 Casos de Usos.
 Script de la base de datos.
 Base de Referencias Bibliográficas.
Propuesta
La aplicación web progresiva permite al personal de la farmacia Nicolás Bolívar disminuir
el nivel de dificultad en el proceso de gestión de ventas que era llevado a cabo de manera manual
mediante el uso de cuadernos y herramientas de ofimática como Microsoft Excel. Con el desarrollo
243
del prototipo aplicación web progresiva se logrará automatizar los procesos empleados para
realizar la venta, lo cual concede al personal de la farmacia la posibilidad de reducir el uso de
herramientas tradicionales, agilizando las tareas y disminuyendo tiempo para ejecutarlas.
Para el correcto uso y funcionamiento de la aplicación web se deberá utilizar uno de los
siguientes navegadores que se mencionan en la lista, de no ser así la aplicación podría presentar
fallas o verse limitada en su funcionamiento.
 Google Chrome v76.0.3808.100 en adelante
 Microsoft Edge v89. 0.774.45 en adelante
 Mozilla Firefox v73.01 en adelante
 Opera v77.0.4054.203 en adelante
En el apartado a continuación detalla de manera breve cada uno de los módulos que fueron
desarrollados en la aplicación web.
 Módulo de seguridad: En este módulo incluirá una pantalla de inicio de sesión, la cual
solicitará usuario y clave para el proceso de autenticación. Permitirá hacer la
recuperación de contraseña. Además, el administrador será el único que podrá
modificar, agregar, activar o desactivar los usuarios (clientes) de la aplicación.
 Módulo de productos: En este módulo se ingresará y visualizará la lista de los distintos
tipos de productos farmacéuticos o no farmacéuticos que se encuentra en stock en la
farmacia Nicolás Bolívar por ejemplo vitaminas, artículos de higiene, artículos de
belleza, entre otros.
 Módulo de inventario: En este módulo el administrador podrá visualizar los
movimientos de ingresos y egresos realizados en el inventario. Adicionalmente, se
podrá visualizar la cantidad vendida y cantidad disponible para cada producto existente
244
en el stock.
 Módulo de stock: En este módulo el usuario administrador tendrá la facilidad de
seleccionar unos de los productos disponibles e ingresar la cantidad que desee en el
inventario, la cual se sumará a la cantidad existente de dicho producto. Así mismo se
podrá modificar la cantidad ingresada o eliminarla en caso de que requiera el usuario.
 Módulo de auditoría: En este módulo el usuario administrador podrá dar seguimiento
a la interacción que tienes los usuarios de la aplicación, que es el inicio de sesión que
tienen los usuarios tantos clientes como administrador.
 Módulo de promociones: En este módulo el administrador podrá ingresar, modificar,
eliminar y visualizar las promociones por descuentos, las cuales se mostrarán en la
interfaz del cliente tanto en la lista de productos como en el carrusel de promociones.
 Módulo de categoría: Este módulo brindará la posibilidad al usuario administrador de
agregar, modificar, activar o desactivar las categorías con las que cuenta la aplicación.
 Módulo de pedidos: El administrador tendrá acceso al listado de los pedidos realizados
por los clientes y datos de este, dónde podrá buscar los pedidos por número de orden o
nombre del cliente y también tendrá la opción de confirmar o cancelar los pedidos.
 Módulo de reportes: En este módulo incluye un dashboard, se podrá observar los
reportes mensuales de ganancias por ventas que ha tenido la farmacia mediante cuadros
estadísticos. Los parámetros son: ventas mensuales, clientes, ventas virtuales y ventas
tradicionales.
 Módulo de chat: En este módulo tanto el usuario cliente como el administrador podrá
tener acceso, donde el cliente se contactará con el personal de la farmacia en tiempo
real para realizar cualquier consulta y despejar inquietudes que tenga sobre algún
245
medicamento o sintomatología que te que le esté causando molestias.
Por otra parte, el administrador visualizará los mensajes enviados por los clientes con
los datos de envío como: Nombres, dispositivo, dirección IP, hora y fecha de envío del
mensaje. Adicionalmente, el administrador tendrá la opción activar o desactivar el chat
en línea, en el último caso si el chat es desactivado se le mostrará al cliente una pantalla
donde se le permitirá enviar un mensaje con sus datos (nombres y correo electrónico),
el cual el administrador lo visualizará en la bandeja de entrada para que se pueda poner
en contacto con el cliente.
Por tanto, el desarrollo de la presente propuesta es factible debido a que las herramientas a
utilizar son de licencia libre, por lo que no representa un riesgo en el financiamiento de la farmacia
Nicolás Bolívar. En los siguientes apartados se muestran cada una de las interfaces con las que
cuenta la aplicación web.
La Figura 85 corresponde a la pantalla principal del lado del cliente, a la cual puede tener
acceso cualquier usuario para consultar los productos disponibles que ofrece la farmacia Nicolás
Bolívar y demás información de interés para los visitantes.

246
Figura 85
Pantalla principal
Nota: En la presente figura se muestra la pantalla principal del lado del cliente la cual muestra información relevante
como: contactos, promociones y productos. Elaboración: Mero Diego, Quinde Gilson. Fuente: Propia de la
investigación.
La Figura 86 que se muestra a continuación pertenece a la interfaz de inicio de sesión para
los usuarios (clientes), misma que permite acceder a la aplicación para que los clientes puedan
proceder con la realización de pedidos. Esta interfaz esta validada dado el caso que el ingreso de
datos no sean los correctos muestre un mensaje en pantalla.

247
Figura 86
Inicio de sesión del cliente
Nota: En la presente figura se muestra la interfaz de inicio de sesión del cliente para que pueda realizar la compra de
productos. Elaboración: Mero Diego, Quinde Gilson. Fuente: Propia de la investigación.
En la siguiente Figura 87 se muestra la interfaz de inicio de sesión para el administrador,
mediante la cual puede acceder a los distintos módulos con los que cuenta la aplicación. Esta
interfaz esta validada dado el caso que el ingreso de datos no sean los correctos muestre un mensaje
en pantalla.
248
Figura 87
Pantalla de inicio de sesión del administrador
Nota: En la presente figura se muestra la interfaz de inicio de sesión para el administrador de la aplicación.
Elaboración: Mero Diego, Quinde Gilson. Fuente: Propia de la investigación.
En la Figura 88 que se presenta a continuación, corresponde a la pantalla principal del
prototipo de aplicación web del lado del administrador, en la cual se puede visualizar todos los
módulos a los que tiene acceso con los que podrá interactuar dependiendo de su necesidad.
249
Figura 88
Pantalla principal de la aplicación para el administrador
Nota: En la presente figura se muestra la pantalla principal de la aplicación para el administrador en la cual se puede
visualizar los diferentes módulos a los que tiene acceso. Elaboración: Mero Diego, Quinde Gilson. Fuente: Propia de
la investigación.
En la siguiente Figura 89 se puede observar la interfaz de los dashboard perteneciente al
módulo de reportería del prototipo de la aplicación web, donde se muestra las estadísticas de las
ventas realizadas en el mes, los usuarios registrados por mes, categorías y los productos existentes
por cada categoría.

250
Figura 89
Pantalla de reportes de la aplicación web
Nota: En la presente figura se puede visualizar la pantalla de reporte correspondiente al prototipo de aplicación web.
Elaboración: Mero Diego, Quinde Gilson. Fuente: Propia de la investigación.
El desarrollo de la aplicación web se basa en el uso de herramientas open source lo que
brinda a la empresa gran beneficio, ya que la inversión que se pudo haber realizado en la
adquisición de licencias de software podría ser usado para mejorar los equipos de hardware con
los que cuenta la organización.
Criterios de validación de la propuesta
Con el fin de validar que el prototipo de aplicación web cumple con el correcto
funcionamiento, se procedió a hacer uso del formato de plan de pruebas, juicio de expertos y una
encuesta de satisfacción dirigida al propietario y personal de la farmacia Nicolás Bolívar.
En el Anexo 11, se puede observar los casos de pruebas realizados que tienen mayor
relevancia y que permitieron determinar que el prototipo de aplicación web funciona de manera
adecuada. Así mismo, en el Anexo 12 se muestra la matriz del plan de pruebas realizado.
251
Diseño
La Figura 90 se presenta la arquitectura funcional de la aplicación web progresiva dónde
se observa como el usuario cliente y administrador interactúan con la aplicación, la cual realiza
peticiones al service worker que es el encargado de consultar y devolver la información a la
aplicación.
Figura 90
Arquitectura de la aplicación web progresiva
Nota: Arquitectura funcional de la aplicación web progresiva de la farmacia Nicolás Bolívar. Elaboración y Fuente:
Juicio de expertos
Para la aceptación y validación de la propuesta se utilizó la técnica conocida como Juicio
de expertos, la cual es realizada por profesionales con alto grado de conocimiento y experiencia
en el manejo y desarrollo de sistemas informáticos, que se encargan de evaluar el software tomando
en consideración diferentes aspectos como: diseño, organización, usabilidad, seguridad,
adecuación funcional, entre otros. A continuación, en Tabla 115 se muestra a detalle los expertos
elegidos para evaluar el prototipo de aplicación web.

252
Tabla 115
Información de los expertos
Nombres y Apellidos Profesión Años de Entidad/Institución

experiencia
Pedro Enrique Apraez Ingeniero en Sistemas 12 GAD municipal del
Poveda cantón Caluma
María Soledad Macías Química 12 Hospital Alfredo Paulson

Urdiales Farmacéutica y
Master en Química
Clínica
Eury Antonio Cedeño Ingeniero en Sistemas 7 La Fabril S.A.
Briones
Nota: La tabla que se muestra corresponde al listado de los expertos elegidos para validar el prototipo de aplicación
web. La elaboración es propia de los autores. Fuente: Propia de la investigación.
En el Anexo 12, se puede observar cada una de las evaluaciones del funcionamiento del
prototipo de aplicación web realizadas por los expertos elegidos. Así mismo, en el Anexo 13 se
muestra la cada uno de los expertos seleccionados que dieron su constancia de juicio de expertos.
En la tabla que se muestra a continuación, se detalla la escala de evaluación que se
consideró para los juicios de expertos, los cuales fueron realizados por los expertos elegidos.
Tabla 116
Escala de evaluación para Juicio de expertos
Evaluación Mínimo Máximo

Excelente 81 100
Muy buena 61 80
Buena 41 60
Regular 21 40
Deficiente 0 20
Nota: En la presenta tabla se muestra el criterio de evaluación seleccionado para validar el prototipo de aplicación
web. La elaboración es propia de los autores. Fuente: Propia de la investigación.
253
En la siguiente tabla se muestra los resultados obtenidos de la aplicación de los juicios de
expertos.
Tabla 117
Resultados de la validación de expertos
Indicador Experto 1 Experto 2 Experto 3 Promedio Evaluación

CLARIDAD 100 95 95 95.6 Excelente
OBJETIVIDAD 95 90 95 93.3 Excelente
ACTUALIDAD 95 100 100 98.3 Excelente
SUFICIENCIA 100 100 100 100 Excelente
INTENCIONALIDAD 100 100 100 100 Excelente

CONSISTENCIA 100 95 95 95.6 Excelente
METODOLOGÍA 100 100 100 100 Excelente
APLICABILIDAD 100 100 100 100 Excelente
Nota: En la presenta tabla se muestra el resultado de la validación de expertos de prototipo de aplicación web. La
Como se observa en la Tabla 117 los resultados de las evaluaciones realizadas por los
expertos son excelentes, por lo que se puede concluir que el software cumple con los criterios de
evaluación establecidos para el presente proyecto.
Encuesta de satisfacción
En esta sección se muestra el resultado de la encuesta de satisfacción realizada al personal
(Propietario y auxiliar) de la farmacia Nicolás Bolívar, como se observa el en el Anexo 14
correspondiente al formato de la encuesta de satisfacción, en la cual se elaboraron 11 preguntas
cerradas que tuvieron como objetivo medir el grado de satisfacción del personal de la organización
con respecto al funcionamiento del prototipo de la aplicación web. En el siguiente apartado que se
254
muestra a continuación, se puede observar el resultado de la encuesta realizada con su respectiva
tabulación, gráfico y análisis.
Pregunta 1: ¿Qué tan satisfecho está con la forma de instalación que tiene la aplicación web?
Tabla 118
Pregunta 1: ¿Qué tan satisfecho está con la forma de instalación que tiene la aplicación web?

Muy satisfecho 2 66,70%
Satisfecho 1 33,30%
Moderadamente satisfecho 0 0,00%
Poco satisfecho 0 0,00%
Nada satisfecho 0 0,00%
TOTAL 3 100,00%
la Pregunta 1 aplicada en la encuesta a los 3 individuos seleccionados. Elaboración y Fuente: Propia de los autores.
Figura 91
Nota: De un total de 3 encuestados se observa que el 66,70% se encuentra muy satisfecho con la forma de instalación
que tiene la aplicación web, muestras el 33,30 manifestó% que está satisfecho. Elaboración y Fuente: Propia de los
autores.
Análisis: Los resultados que se muestran en la figura indica que el 66,70% se encuentra
muy satisfecho, muestras que 33,30% indicó que está satisfecho con respecto a la manera en que
se instala la aplicación web.
255
Pregunta 2: ¿Qué tan satisfecho está con el diseño y funcionalidad de la aplicación web?
Tabla 119
¿Qué tan satisfecho está con el diseño y funcionalidad de la aplicación web?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 92
Nota: De un total de 3 encuestados se observa que el 100,00% se encuentra muy satisfecho con respecto al diseño y
buena funcionalidad que ofrece la aplicación web. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura indica que el 100,00% manifestó que
se encuentra muy satisfecho con respecto al diseño y funcionalidad en general que ofrece la
aplicación web.
256
Pregunta 3: ¿Según su criterio que nivel de satisfacción tiene con respecto a la usabilidad y modo
de navegación entre pantallas de la aplicación web?
Tabla 120
Pregunta 3: ¿Según su criterio que nivel de satisfacción tiene con respecto a la usabilidad y modo
de navegación entre pantallas de la aplicación web?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 93
Nota: De un total de 3 encuestados se observa que el 100,00% se encuentra muy satisfecho con respecto a la usabilidad
y modo de navegación entre las pantallas que ofrece la aplicación web. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura son muy buenos, como se observa el
100,00% indica que se encuentra muy satisfecho con respecto a la usabilidad y modo navegación
entre las diferentes pantallas que ofrece la aplicación web.
257
Pregunta 4: ¿Qué tan satisfecho está con la forma de inicio de sesión y registro de nuevos usuarios
que posee la aplicación web?
Tabla 121
Pregunta 4: ¿Qué tan satisfecho está con la forma de inicio de sesión y registro de nuevos usuarios
que posee la aplicación web?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 94
Nota: De un total de 3 encuestados se observa que el 100,00% se encuentra muy satisfecho con respecto a la forma
de inicio de sesión y registro de usuarios que ofrece la aplicación web. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura son muy buenos, como se observa el
100,00% indica que se encuentra muy satisfecho con respecto a la forma de iniciar sesión y registro
de nuevos usuarios en la aplicación web.
258
Pregunta 5: ¿Qué tan satisfecho está con la forma visualización del contenido en general que
ofrece la aplicación web?
Tabla 122
Pregunta 5: ¿Qué tan satisfecho está con la forma visualización del contenido en general que
ofrece la aplicación web?

Satisfecho 1 33,30%
TOTAL 3 100,00%
Figura 95
Nota: De un total de 3 encuestados se observa que el 67,70% se encuentra muy satisfecho con respecto a la forma de
visualización de contenido que ofrece la aplicación web, mientras que el 33,70% manifestó estar satisfecho con esto.
Análisis: Los resultados que se muestran en la figura indican que 67,70% se encuentra muy
satisfecho con la forma visualización del contenido que posee la aplicación web. Por otro lado, el
33,30% manifestó estar satisfecho.
259
Pregunta 6: ¿Qué tan satisfecho está con manera en que se encuentra distribuida la información
dentro de la aplicación web?
Tabla 123
Pregunta 6: ¿Qué tan satisfecho está con manera en que se encuentra distribuida la información
dentro de la aplicación web?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 96
Nota: De un total de 3 encuestados se observa que el 100,00% se encuentra muy satisfecho con la manera en que está
distribuida la información en la aplicación web. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura indican que 100,00% se encuentra
muy satisfecho con la forma en la que se encuentra distribuida la información en los distintos
módulos e interfaces con los que cuenta la aplicación web.
260
Pregunta 7: ¿Qué tan satisfecho están con la seguridad que ofrece la aplicación web?
Tabla 124
Pregunta 7: ¿Qué tan satisfecho están con la seguridad que ofrece la aplicación web?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 97
Nota: De un total de 3 encuestados se observa que el 100,00% se encuentra muy satisfecho con la seguridad que ofrece
la aplicación en las interfaces de registro e inicio de sesión de la aplicación web. Elaboración y Fuente: Propia de los
autores.
Análisis: Los resultados que se muestran en la figura son muy buenos, donde el 100,00%
indica que se encuentra muy satisfecho con la seguridad en las interfaces de inicio de sesión y
recuperación de cuentas que ofrece la aplicación web.
261
Pregunta 8: ¿Qué tan satisfecho está con la forma de visualización del dashboard que ofrece la
aplicación web en el módulo de reportes?
Tabla 125
Pregunta 8: ¿Qué tan satisfecho está con la forma de visualización del dashboard que ofrece la
aplicación web en el módulo de reportes?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 98
Nota: De un total de 3 encuestados se observa que el 100,00% se encuentra muy satisfecho con la forma de visualizar
los dashboard en el módulo de reportería que tiene la aplicación web. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura son muy buenos, donde el 100,00%
manifestó que se encuentra muy satisfecho en la forma que se visualiza los dashboard
pertenecientes al módulo de reporte que posee la aplicación web.
262
Pregunta 9: ¿Qué tan satisfecho está con la rapidez y fluidez que ofrece la aplicación web?
Tabla 126
Pregunta 9: ¿Qué tan satisfecho está con la rapidez y fluidez que ofrece la aplicación web?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 99
Nota: De un total de 3 encuestados se observa que el 100,00% se encuentra muy satisfecho con la rapidez y fluidez
con la que cuenta la aplicación web. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura son muy buenos ya que se obtuvo un
100,00% donde se indicó estar muy satisfecho con la rapidez y fluidez de los diferentes módulos
con los que cuenta la aplicación web.
263
Pregunta 10: ¿Qué tan satisfecho está con la implementación del módulo del chat online para la
interacción entre usuarios?
Tabla 127
Pregunta 10: ¿Qué tan satisfecho está con la implementación del módulo del chat online para la
interacción entre usuarios?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 100
Nota: De un total de 3 encuestados se observa que el 100,00% con la implementación del módulo de chat online para
comunicación en tiempo real con los clientes. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura son muy buenos, debido a que se
obtuvo un 100,00% donde se manifestó estar muy satisfecho con la integración del módulo de chat
en línea para la interacción con los clientes en la aplicación web.
264
Pregunta 11: ¿En general, que tan satisfecho está usted con la aplicación web?
Tabla 128
Pregunta 11: ¿En general, que tan satisfecho está usted con la aplicación web?

Satisfecho 0 0,00%
TOTAL 3 100,00%
Figura 101
Nota: De un total de 3 encuestados se observa que el 100,00% de manera general se encuentran satisfechos con la
aplicación web. Elaboración y Fuente: Propia de los autores.
Análisis: Los resultados que se muestran en la figura son muy buenos, ya que se obtuvo
un 100,00% donde se manifestó estar muy satisfecho de manera general con respecto a los
módulos, interfaces y funcionalidad que ofrece la aplicación web.
265
Resultados
Con los resultados obtenidos de los juicios de experto se evidencia el cumplimiento de los
requerimientos que fueron establecidos por parte de la organización y el correcto funcionamiento
de los módulos tanto para clientes como para el personal de la farmacia. Así mismo, la encuesta
de satisfacción cabe mencionar que de manera general el prototipo de aplicación web progresiva
para la gestión de ventas en la farmacia Nicolás Bolívar el 100% de los encuestados determinaron
que están muy satisfechos con la aplicación web.
Las metodologías ágiles SCRUM, XP y la metodología de Marco Lógico permitieron que
durante el desarrollo del proyecto se lograra cumplir con las etapas requeridas para la obtención
del producto final y que esta pueda cumplir con las expectativas de los usuarios.
Con el desarrollo de los módulos se logró reducir el nivel de dificultad en los procesos de
la gestión de ventas y las tareas llevado para la ejecución del mismo. A continuación, en el
siguiente apartado se muestra los resultados que se obtuvieron.

266
Tabla 129
Cuadro de resultados del nivel de dificultad del proceso mejorado
Tareas/procesos Nivel de dificultad
Muy bajo Bajo Neutral Alto Muy alto
Ingreso de productos X
Ingreso de clientes X
Ingreso de promociones X
Consulta de productos X
disponibles
Consulta de clientes X
registrados
Consulta de promociones X
vigentes
Realización de pedidos X
Consulta de pedidos X
Proceso de ventas (General) X
Nota: En esta tabla se puede observar los niveles de dificultad correspondientes a las tareas del proceso mejorado de
la gestión de ventas. Elaboración y fuente propia de los autores.
Adicionalmente, se logró obtener una mejora del 61.48% en los procesos de gestión de
ventas, lo que permitió una optimización en los tiempos para realizar dichas tareas. A continuación,
en el siguiente apartado se muestra los resultados que se obtuvieron.
Tabla 130
Comparativa de los tiempos del proceso actual y proceso mejorado
Procesos Tiempo estimado

Proceso de gestión de ventas actual 0:13:50
Proceso de gestión de ventas mejorado 0:05:20
Nota: En esta tabla se puede observar la diferencia entre el proceso de ventas que tiene actualmente la organización
con el proceso mejorado. Elaboración y fuente propia de los autores.
267
Figura 102
Tiempo del proceso de gestión de ventas actual y mejorado
Nota: En esta figura se puede observar la diferencia entre el proceso de ventas que tiene actualmente la organización
con el proceso mejorado. Elaboración y fuente propia de los autores.
Para la elaboración de la Figura 102 se utilizó la herramienta de Microsoft Excel 2016, se
puede observar una considerable diferencia entre ambos procesos para le gestión de ventas en la
farmacia Nicolás Bolívar, dado estos resultados se puede concluir que el desarrollo del prototipo
de aplicación web progresiva es factible, debido que ayudó a disminuir el nivel de dificultad y
optimizar los tiempos.

268
CAPÍTULO IV
CONCLUSIONES Y RECOMENDACIONES
Criterios de aceptación del producto o servicio
Para el presente trabajo de titulación denominado “DESARROLLO DE UN PROTOTIPO
GESTION DE VENTAS DE LA FARMACIA NICOLÁS BOLÍVAR” se planteó la evaluación
del correcto funcionamiento del módulo de seguridad, módulo de productos, módulo de
promociones, módulo de categoría, módulo de pedidos, módulo de inventario, módulo de reportes,
módulo de stock, módulo de auditoría, módulo de chat.
El Sr. Bolívar Guartambel Albarracin, propietario y personal de la farmacia Nicolás Bolívar
y los expertos seleccionados para la evaluación del juicio de experto, evaluaron y aprobaron los
diferentes módulos del prototipo de aplicación web progresiva para constatar que están
desarrollado con los respectivos requerimientos levantados para su aprobación.
Adicionalmente, se tuvo la colaboración del propietario de la farmacia Nicolás Bolívar el
Sr. Bolívar Guartambel Albarracin, quien revisó y aprobó el prototipo de aplicación web
progresiva. En el Anexo 15 se muestra la carta de aceptación del proyecto brindado por el
propietario de la organización.
269
Módulo de seguridad
En la Tabla 131 se presenta el criterio de aceptación del módulo de seguridad, en el
prototipo de aplicación web progresiva, el cual está desarrollado según los requerimientos del
Tabla 131
Criterio de aceptación del módulo de seguridad
Criterios de aceptación
Número de Resultado/
Título del escenario Evento
escenario comportamiento
Registro completo del Usuario creado
1 Registro de usuarios.
usuario cliente. correctamente.
2 Validación de campos. si el usuario no llena un Mostrará un mensaje
campo. pidiendo “que se
complete los campos”.
3 Validación de Si el usuario ingresa una Mostrará un mensaje
contraseña. contraseña incorrecta. “contraseña no coincide”.
4 Validación de correo Si el usuario ingresa un Mostrará un mensaje
electrónico. correo electrónico sin el “formato de correo
formato establecido. electrónico incorrecto”.
5 Concurrencia de El usuario olvida su Al momento de realizar
contraseña. contraseña y realiza muchos intentos, se
muchos intentos. mostrará una notificación
diciendo que su cuenta ha
sido bloqueada, y q
espere cierto minuto para
que vuelva a intentarlo.
Nota: Están basados en los requerimientos de usuarios previamente levantados para realizar el módulo de seguridad.
Módulo de productos
En la Tabla 132 se presentan los criterios de aceptación del módulo de productos en el

270
Tabla 132
Criterio de aceptación del módulo de productos
El usuario administrador Este módulo cuenta con dos
desea visualizar lo que hay secciones que son listado de
1 Módulo de productos.
dentro del módulo de productos y nuevos
producto. productos.
2 Listado de productos. El usuario desea visualizar Se visualiza una tabla con
lo que se encuentra dentro los productos previamente
del listado de producto. ingresado.
3 Buscar producto. El usuario desea buscar Este módulo cuenta con un
productos específicos. buscador, el cual le
permitirá buscar cualquier
producto.
4 Código de producto. Puede existir varios Cada producto ingresado es
productos con un mismo registrado con un único
código. código.
5 Estado de productos. El usuario desea eliminar Los productos ingresados o
un producto. existentes no se pueden
borrar, pero si se les puede
cambiar el estado de activo
o inactivo.
6 Modificar productos. El usuario desea modificar Al momento de seleccionar
uno de los productos. la opción de modificar
producto, se le abrirá una
nueva pestaña la cual
contiene un formulario.
7 Ingresar nuevo producto. El usuario desea ingresar Al seleccionar agregar
nuevo producto. nuevo producto, se le abrirá
una pestaña que contiene un
formulario que servirá para
describir el nuevo producto.
8 Visualización en el lado El usuario cliente desea El usuario puede visualizar
del cliente. visualizar los productos en la aplicación web todos
existentes. los productos. existentes
con sus descripciones.
Nota: Están basados en los requerimientos de usuarios previamente levantados para desarrollar el módulo de
productos. Elaboración y fuente propia.
271
Módulo de promociones
En la Tabla 133 se presenta el criterio de aceptación del módulo de promociones del
prototipo de aplicación web progresiva. el cual está desarrollado según los requerimientos del
Tabla 133
Criterio de aceptación del módulo de promociones
Numero de Resultado/
El usuario desea agregar
Agregar nuevo nuevos productos que El producto es agregado
1
producto. están en promociones al correctamente al carrusel
carrusel.
2 Rellenar campos. El usuario rellena los Al llenar los campos
campos presentado en la correctamente se agregan
aplicación web. los productos al carrusel.
3 Formato de imagen. El usuario desea agregar Se visualiza el formato
una nueva imagen al que debe tener la imagen
producto. para poder agregarla al
producto.
4 Lista de producto en el El usuario desea Se muestra un listado de
carrusel. visualizar los productos los productos actuales
que se estén que se encuentra en el
visualizando en el carrusel.
carrusel.
5 Establecer descuentos. El usuario desea agregar Se visualiza los campos
un descuento a un para ponerle el descuento
producto. al producto.
6 Tabla de descuento. El usuario desea revisar Se visualiza en una tabla
los productos que tienen todos los productos que se
descuentos. le establecidos
descuentos.
7 Tiempo límite del El usuario desea agregar Se visualiza el tiempo
descuento. o visualizar que tiempo límite que tiene cada
tienen establecidos los descuento, se los pueden
descuentos. editar.
8 Validación de campos. El usuario en los Se visualiza un mensaje
campos un dato erróneo. de error.
Nota: Están basados en los requerimientos de usuarios previamente levantados para el desarrollo del módulo de
promociones. Elaboración y fuente propia.
272
Módulo de categorías
En la Tabla 134 se presentan los criterios de aceptación del módulo de categorías en el
Tabla 134
Criterio de aceptación del módulo de categoría
El usuario desea En este módulo se
1 Módulo de categoría. visualizar lo q hay en el visualizan las categorías
módulo de categoría existentes en la farmacia.
2 Eliminar categoría. El usuario desea No se pueden eliminar las
eliminar una de las categorías.
categorías del módulo.
3 Estado de categorías. El usuario desea Este módulo cuenta con la
cambiar de estado una opción de estado, el cual
de las categorías. permite cambiar el estado
de las categorías, en
activo e inactivo.
4 Agregar nueva El usuario desea agregar Al momento de
categoría. una nueva categoría. seleccionar la opción de
agregar nueva categoría,
se visualiza una pestaña la
cual le permitirá escribir
el nombre de la nueva
categoría que desee.
5 Visualización en el lado El usuario cliente desea Se visualiza el listado de
del cliente. ver las categorías las categorías ingresados
existentes. con sus respectivos
productos agregados.
categorías. Elaboración y fuente propia.
273
Módulo de pedidos
En la Tabla 135 se presentan los criterios de aceptación del módulo de pedido en el
prototipo de aplicación web, el cual está desarrollado según los requerimientos del propietario de
la farmacia Nicolás Bolívar.
Tabla 135
Criterio de aceptación del módulo de pedidos
Los clientes pueden visualizar
El usuario cliente desea los registros que deseen
1 Registros de pedidos. visualizar los pedidos mediante la opción de
realizado. búsqueda que se incorporará
en esta sección.
2 Pedidos en la sección de El usuario cliente desea Después de haber ingresado a
cliente. realizar un pedido. su cuenta puede ir a productos
y seleccionar cualquier
producto q desee, después de
seleccionado y presionar la
opción de comprar, se le pedirá
que complete ciertos datos
para que se pueda realizar el
pedido.
3 Visualización de la orden por El usuario desea visualizar la El usuario puede visualizar el
parte del cliente. orden generada del pedido pedido realizado en una tabla,
realizado. con sus datos generados, se le
genera un comprobante del
pedido el cual tiene la opción
de descargar en un archivo en
formato PDF.
4 Lista de pedidos. El usuario desea saber Se visualizan en una tabla los
cuántos pedidos hay. pedidos que se han realizado,
con la opción de rechazar y
confirmar pedios.
5 Facturación del pedido. El usuario desea ver la Las facturas de visualizan en
factura de cualquier pedido archivos formatos PDF.
realizado.
6 Búsqueda de registros. El usuario desea buscar un Esta sección cuenta con un
registro especifico. buscador incorporado, donde
pueden buscar los registros con
los nombres, o códigos u otros
campos que cuenten.
pedidos. Elaboración y fuente propia.
274
Módulo de inventario
En la Tabla 136 se presentan los criterios de aceptación del módulo de inventario en el
Tabla 136
Criterio de aceptación del módulo de inventario
Los registros se los
El usuario desea buscar pueden buscar por
1 Buscar registros.
algún registro. cualquier campo que el
usuario desee.
2 Secciones del módulo. El usuario desea saber Dentro del módulo de
cuántas secciones tiene inventario hay 3
el módulo de inventario. secciones, ingresos,
egresos y productos.
3 Egreso. El usuario desea saber En esta sección se
que contiene la sección presentan los egresos que
de egreso. se tienen el inventario.
4 Factura. El usuario desea generar Las facturas tienen los
una factura. datos personales del
usuario seleccionado.
5 Descargar factura. El usuario desea de Las facturas se las pueden
cargar una factura. descargar en formato
PDF.
6 Búsqueda de registros El usuario desea buscar La sección de egreso
salientes. un registro. viene incorporado un
buscador, lo puede hacer
mediante el nombre, o
código del producto.
7 Ingresos. El usuario desea buscar La sección de ingreso
algún registro de viene incorporado un
ingresos. buscador, lo puede hacer
mediante el nombre, o
código del producto.
inventario. Fuente y elaboración propia.
275
Módulo de reportes
En la Tabla 137 se presentan los criterios de aceptación del módulo de reporte en el
Tabla 137
Criterio de aceptación del módulo de reportes
El usuario decide
Se visualizan las gráficas
visualizar las
1 Tableros. de cada una de las
estadísticas de cada
secciones.
sección.
2 Tablero de ventas. El usuario desea Se visualizan las gráficas
visualizar el total de de las ventas totales por
ventas que se han meses.
realizado por meses.
3 Tablero de usuarios El usuario desea Se visualizan las gráficas
registrados. visualizar el total de de los usuarios
usuarios registrado cada registrados por meses.
mes.
4 Tabla de categorías. El usuario desea Se visualiza una tabla con
visualizar el total de todas las categorías que
categoría que maneja la cuenta la farmacia
farmacia. actualmente.
5 Reportes de pedidos. El usuario desea ver los Se visualizan en una tabla
reportes de los pedidos los reportes solicitados.
que se han realizado por
periodo de tiempo.
6 Archivo de descarga. El usuario desea El usuario puede
visualizar los reportes descargar los reportes en
en archivos. archivos tipo PDF y
XLSX.
reportes. Fuente y elaboración propia.
276
Módulo de stock
En la Tabla 138 se presentan los criterios de aceptación del módulo de Stock en el prototipo
de aplicación web progresiva, se visualizan en la sección del usuario administrador, este módulo
está desarrollado según los requerimientos del propietario de la farmacia Nicolás Bolívar.
Tabla 138
Criterio de aceptación del módulo de stock
El usuario realiza un
El movimiento realizado
1 Movimiento de ingreso. movimiento en el
se visualiza en una tabla.
ingreso.
2 Modificar movimiento. Al seleccionar la opción
de modificar el
El usuario desea
movimiento, saldrá los
modificar un
datos que se pueden
movimiento de la tabla.
modificar en dicho
movimiento.
3 Búsqueda de registro. El usuario desea realizar Al seleccionar el
una búsqueda buscador que se
específica. encuentra incomparado
en este módulo, podrá
realizar su búsqueda
digitalizando
4 Eliminar registro. El usuario desea algún Este módulo cuenta con la
registro. opción de eliminar, esto
permitirá eliminar
cualquier registro que el
usuario desee.
auditoría. Fuente y elaboración propia.
Módulo de auditoria
En la Tabla 139 se presentan los criterios de aceptación del módulo de auditoría en el
prototipo de aplicación web progresiva, se visualizan las secciones de usuario cliente y usuario
277
administrador, este módulo está desarrollado según los requerimientos del propietario de la
Tabla 139
Criterio de aceptación del módulo de auditoría
El usuario desea Se visualiza una tabla con
visualizar los datos de los datos personales de
Reportes de usuario
1 los clientes que han los clientes que am
clientes.
ingresado al prototipo ingresado al prototipo de
de aplicación web. aplicación web.
2 Reportes de usuarios El usuario desea Se visualiza una tabla con
administrador. visualizar los datos de los datos personales de
los administradores que los administradores que
han ingresado al han ingresado al
prototipo de aplicación prototipo de aplicación
web. web.
3 Descargar reportes. El usuario desea Se puede descargar los
descargar los reportes reportes en formato PDF
de ingresos, tanto y XLSX.
cliente como
administrador.
Módulo de chat
En la Tabla 140 se presenta el criterio de aceptación del módulo de chat en el prototipo de
aplicación web progresiva, este módulo está desarrollado en base a los requerimientos del

278
Tabla 140
Criterio de aceptación del módulo de chat
En la sección de cliente se
El usuario desea buscar
Visualización del icono puede visualizar el icono
1 y visualizar el icono del
del chat en línea. del chat en línea en la
chat en línea.
parte inferior izquierda.
2 Conversación. El usuario cliente desea El cliente puede
comunicarse de manera interactuar de manera
online con algún online con el
administrador. administrador, enviando
un mensaje desde la
aplicación web.
3 Tiempo de respuesta. El usuario cliente tiene El administrador podrá
una consulta comunicarse de manera
importante, y desea su inmediata con el cliente
atención ya que el módulo de chat
inmediatamente. es online, y las consultas
se las responden
inmediatamente.
4 Desactivar el chat. El usuario desea Este módulo de chat
desactivar el chat. cuenta con la opción de
activar y desactivar, esto
permitirá al administrador
activar y desactivar las
veces que lo desee.
Conclusiones
Con base a los resultados obtenidos del desarrollo de este presente trabajo de titulación
denominado, “DESARROLLO DE UN PROTOTIPO DE APLICACIÓN WEB PROGRESIVA
(PWA) PARA MEJORAR EL PROCESO DE GESTION DE VENTAS DE LA FARMACIA
NICOLÁS BOLÍVAR” se presentan las conclusiones obtenidas que surgieron a partir del análisis
realizado a los objetivos específicos que fueron definidos en el Capítulo I:

279
 Se realizó en levantamiento de información en un 100.00%, lo que ayudó a determinar
los requerimientos funcionales y no funcionales para la sistematización del proceso de
gestión de ventas y que este cumpla con su correcta funcionalidad, así mismo permitió
conocer los procesos llevados a cabo para realización de ventas lo que permitió elaborar
el diagrama de flujo de procesos.
 Se analizó información recolectada del proceso de gestión de ventas de productos de la
organización, lo cual permitió realizar las respectivas mejoras y crear una versión
optimizada gracias al desarrollo del prototipo.
 Se logró desarrollar el modelado de la base de datos en un 100.00% con la herramienta
MySQL con un total de 12 tablas. Además, se diseñaron las interfaces amigables para
los usuarios empleando la herramienta de código abierto Bootstrap.
 Se desarrollaron los diferentes módulos del prototipo de aplicación web para lo cual se
emplearon herramientas open source tales como: CodeIgniter, Vue.js, Nodejs y PHP,
cabe mencionar que sea adquirió un hosting, el cual no representó riego financiero a la
organización debido a su bajo costo. Finalmente, se logró reducir el nivel de dificultad
en el proceso de gestión de ventas con una mejora en el tiempo del 61.48%.
 Para evaluar la aplicación web progresiva Open Source con los usuarios finales, se
utilizó herramientas de recolección de información, con la encuesta aplicada al
propietario y personal de la organización se obtuvo un 100% de aceptación de manera
general. Adicionalmente, se realizó un plan de pruebas compuesta por 30 pruebas para
validar el producto, las cuales se pueden observar en el Anexo 11.1 y los juicios de
expertos realizado por 3 profesionales mismos que se pueden evidenciar el Anexo 12

280
Recomendaciones
En esta sección se presentan las recomendaciones que surgieron a partir de la experiencia
obtenida del desarrollo del proyecto de titulación denominado “DESARROLLO DE UN
PROTOTIPO DE APLICACIÓN WEB PROGRESIVA (PWA) PARA MEJORAR EL
PROCESO DE GESTION DE VENTAS DE LA FARMACIA NICOLÁS BOLÍVAR”, las cuales
son:
 Realizar respaldos de la base de datos de manera semestral, haciendo uso de un servicio
a la nube.
 Expandir el contrato del servicio de hosting para que la aplicación pueda seguir
funcional.
 Dar mantenimiento de manera a general cada seis meses para un mejor uso y
funcionamiento de la aplicación web.
 Realizar un monitoreo y control de los productos que se encuentren en stock.
 Actualizar la información en general de la aplicación web periódicamente para
mantener a los clientes informados con datos veraces y actuales.
 Brindar capacitaciones periódicas sobre el uso de tecnología al personal de la
organización.
Trabajos futuros
A continuación, se presentan los trabajos futuros que podrían surgir a partir del desarrollo
de proyecto de titulación denominado “DESARROLLO DE UN PROTOTIPO DE APLICACIÓN
WEB PROGRESIVA (PWA) PARA MEJORAR EL PROCESO DE GESTION DE VENTAS DE
LA FARMACIA NICOLÁS BOLÍVAR”, las cuales son:

281
 Implementar de manera profesional el módulo de inventario con opciones para realizar
egresos desde el mismo módulo.
 Realizar el respectivo convenio con el SRI para gestionar las facturas emitidas por la
organización.
 Incluir un módulo de pagos online que le facilite a los usuarios realizar sus compras
por medio de pagos con tarjetas bancarias.
 Crear un módulo de seguimiento de pedidos por medio de GPS para que los clientes
puedan visualizar el recorrido de su pedido.
 Integrar notificaciones de tipo push para que los usuarios puedan visualizar los
mensajes desde la barra de notificaciones del dispositivo.
 Desarrollar una aplicación nativa para una mejor experiencia de los usuarios en los
dispositivos móviles.
 Crear una nueva función que permita realizar devoluciones de compras por parte de los
clientes.
 Integrar nuevas funciones en el módulo de auditoría, para dar nuevos seguimientos de
actividad de los usuarios con su respectivo dashboard.

282
REFERENCIAS BIBLIOGRÁFICAS
Adams, N. (2017, February 14). Advantages And Disadvantages of Responsive Web Design –
Website Tips. https://spiralclickblog.wordpress.com/2017/02/14/advantages-and-
disadvantages-of-responsive-web-design/
Arias, J., Villasís, A., Keever, M., Guadalupe, M., & Novales, M. (2016). Metodología de la
investigación. Alergia México, 63, 201–206. www.nietoeditores.com.mx
Arias, M. (2017). Aprende Programación Web con PHP y MySQL (2da Edició).
https://books.google.es/books?hl=es&lr=&id=mP00DgAAQBAJ&oi=fnd&pg=PA13&dq=d
efinicion+de+PHP&ots=DMMkqA7JkW&sig=IfogGOps2pyCuyg35DukzxahtkY#v=onepa
ge&q&f=false
BCIT. (2019). GitHub - bcit-ci/CodeIgniter: Open Source PHP Framework (originally from
EllisLab). https://github.com/bcit-ci/CodeIgniter
Caihura, F. D. (2019). Aplicaciones web progresivas. 5(2015), 32–47.
Constitución de la República del Ecuador. (2021). Constitución de la república del ecuador. 1–
219.
Cuellar, C. (2019). Práctica Empresarial en el Área de Sistemas de Comfamiliar de Huila. 1(1),
41–57. http://www.ghbook.ir/index.php?name= ‫فرهنگ و رسانه های‬
‫&نوین‬option=com_dbook&task=readonline&book_id=13650&page=73&chkhashk=ED9C9
491B4&Itemid=218&lang=fa&tmpl=component%0Ahttp://www.albayan.ae%0Ahttps://sch
olar.google.co.id/scholar?hl=en&q=APLIKASI+PENGENA
De La Torre, J. (2019). INSTITUTO SUPERIOR TECNOLÓGICO BOLIVARIANO.
Del Pozo, H. (2016). Código Orgánico De La Economía Social De Los Conocimientos,
Creatividad E Innovación. Registro Oficial, IV, 113.
http://www.wipo.int/edocs/lexdocs/laws/es/ec/ec075es.pdf
Dhruti, S. (2019). NS Guidebookode.J: Comprehensive guide to learn Node.js - Dhruti Shah -
Google Libros.
https://books.google.com.ec/books?id=okCwDwAAQBAJ&printsec=frontcover&dq=node
+js+features&hl=es-419&sa=X&redir_esc=y#v=onepage&q=node js features&f=false
Digi Cert. (2021, July 7). What is SSL, TLS and HTTPS? | DigiCert.
https://www.digicert.com/what-is-ssl-tls-and-https
Dobrakowski, K. (2021, March). What is Vue.js? Advantages and disadvantages of using Vue.js |
IT Solve. https://it-solve.pl/en/what-is-vue-js-advantages-and-disadvantages-of-using-vue-
js/
EAE, B. S. (2021, May 11). Procesos de ventas: características y estrategia | EAE. https://retos-
operaciones-logistica.eae.es/procesos-de-ventas-concepto-caracteristicas-y-estrategia/
Encalada, C. (2018). Análisis, Desarrollo, Implementación e Implantación de un Sistema para la
Autorización de Procesos en un Centro Médico. Caso de Estudio: E.M Centro de
Especialidades Médicas, Utilizando la Metodología Extreme Programming (XP). (Issue
21).
Falero, L. (2016). Tesis para optar el título de ingeniero de sistemas y computación. 84.
https://tesis.usat.edu.pe/handle/20.500.12423/645
García, L. (2020, September 22). 10 características que un proceso de ventas debe tener - Smart
Tap Group. https://smart-tap.co/10-caracteristicas-que-debe-tener-un-proceso-de-ventas/
Gaunt, M. (2021, June 23). Introducción a los service workers | Web Fundamentals.
https://developers.google.com/web/fundamentals/primers/service-workers?hl=es-419
283
Gavilanes, K. (2019). Facultad De Ingeniería Civil Carrera De Ingeniería Civil Machala 2019.
1–170. http://repositorio.utmachala.edu.ec/handle/48000/15069
Germain, C. E. (2020). Tesina. 1–67.
Gil, V. D., Gomes, C. R., Gil, 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
Gillis, A. (2020, August 31). ¿Qué es una aplicación nativa? - Definición de WhatIs.com.
https://searchsoftwarequality.techtarget.com/definition/native-application-native-app
Google Trends. (2021a). Análisis comparativo a nivel global: Bootstrap, Foundation, Tailwind.
https://trends.google.es/trends/explore?date=2019-06-30 2021-06-
30&q=%2Fm%2F0j671ln,%2Fm%2F0ll4n18,Tailwind
Google Trends. (2021b). Análisis comparativo a nivel global: Codeigniter, Yii, CakePHP.
30&q=Codeigniter,%2Fm%2F05zvgrd,%2Fm%2F09t3sp
Google Trends. (2021c). Análisis comparativo a nivel global: MySQL, Oracle Database,
MongoDB. https://trends.google.es/trends/explore?date=2019-06-30 2021-06-
30&q=%2Fm%2F04y3k,%2Fm%2F01vw9z,%2Fm%2F05z_r2n
Google Trends. (2021d). Análisis comparativo a nivel global: PHP, Python, Ruby, Perl.
30&q=%2Fm%2F060kv,%2Fm%2F05z1_,%2Fm%2F06ff5,%2Fm%2F05zrn
Google Trends. (2021e). Análisis comparativo a nivel global: Visual Studio Code, Notepad++,
Sublime Text, TextPad. https://trends.google.es/trends/explore?date=2019-06-30 2021-06-
30&q=%2Fm%2F0134xwrk,%2Fm%2F04t89l,%2Fm%2F0b6h18n,%2Fm%2F02xqc2
Google Trends. (2021f). Análisis Comparativo a nivel global: Vue.js, AngularJS, Backbone.js.
30&q=%2Fg%2F11c0vmgx5d,%2Fm%2F0j45p7w,%2Fm%2F0h94450
Google Trends. (2021g). Análisis comparativo a nivel nacional: Bootstrap, Foundation,
Tailwind - Explorar - Google Trends. https://trends.google.es/trends/explore?date=2019-06-
30 2021-06-30&geo=EC&q=%2Fm%2F0j671ln,%2Fm%2F0ll4n18,Tailwind
Google Trends. (2021h). Análisis comparativo a nivel nacional: Codeigniter, Yii, CakePHP.
30&geo=EC&q=Codeigniter,%2Fm%2F05zvgrd,%2Fm%2F09t3sp
Google Trends. (2021i). Análisis comparativo a nivel nacional: MySQL, Oracle Database,
MongoDB. https://trends.google.es/trends/explore?date=2019-06-30 2021-06-
30&geo=EC&q=%2Fm%2F04y3k,%2Fm%2F01vw9z,%2Fm%2F05z_r2n
Google Trends. (2021j). Análisis comparativo a nivel nacional: PHP, Python, Ruby, Perl.
30&geo=EC&q=%2Fm%2F060kv,%2Fm%2F05z1_,%2Fm%2F06ff5,%2Fm%2F05zrn
Google Trends. (2021k). Análisis comparativo a nivel nacional: Visual Studio Code,
Notepad++, Sublime Text, TextPad - Explorar - Google Trends.
30&geo=EC&q=%2Fm%2F0134xwrk,%2Fm%2F04t89l,%2Fm%2F0b6h18n,%2Fm%2F02
xqc2
Google Trends. (2021l). Análisis comparativo a nivel nacional: Vue.js, AngularJS, Backbone.js -
Explorar - Google Trends.
https://trends.google.es/trends/explore?geo=EC&q=%2Fg%2F11c0vmgx5d,%2Fm%2F0j45
284
p7w,%2Fm%2F0h94450
Goya, D., & Quimis, M. (2017). Universidad de guayaquil. 186.
Guartambel, B. (2021). Misión y Visión de la farmacia Nicolás Bolívar (p. 90).
Gunterman, J. (2020). PWA (aplicaciones web progresivas): pros y contras | TDT.
https://www.d-tt.nl/en/articles/pwa-progressive-web-apps-pros-cons
Hernández, R., Fernández, C., & Baptista, P. (2017a). Definición del alcance de la investigación
que se realizará: exploratorio, descriptivo, correlacional o explicativo. Metodología de La
Investigación., 6, 88–101.
Hernández, R., Fernández, C., & Baptista, P. (2017b). Selección de la muestra. Metodología de
La Investigación, 170–196.
Heurtel, O. (2016). PHP 7: Desarrollar un sitio web dinámico e interactivo - Olivier HEURTEL
- Google Libros (Angel Belinchon Calleja (ed.)).
https://books.google.es/books?hl=es&lr=&id=EJ1t1GsMHbIC&oi=fnd&pg=PA1&dq=defi
nicion+de+PHP&ots=aO5HbX5SXT&sig=Dk6TdxkYOfcxcYpDyGqCU9vBMkk#v=onepa
ge&q&f=false
Hoo, J. (2018, February 9). Advantages and Disadvantages of PHP.
https://bigcheaphosting.com/advantages-and-disadvantages-of-php/
Hull, M. (2020, July 15). 4 tipos de prototipos. https://www.andplus.com/blog/4-types-of-
prototyping
Jakubowicz, J. (2018, December 4). Advantages and disadvantages of JavaScript | The Codest.
https://thecodest.co/blog/advantages-and-disadvantages-of-javascript/
Jamsheer, K. (2019). What is Javascript Used for? Top Features and Future of Javascript.
https://acodez.in/what-is-javascript/#Features_of_Javascript
JavatPoint. (2021). Arquitectura CodeIgniter - javatpoint.
https://www.javatpoint.com/codeigniter-architecture
Jazayeri, M. (2016). Some trends in Web application development. FoSE 2007: Future of
Software Engineering, September, 199–213. https://doi.org/10.1109/FOSE.2007.26
Kaneriya, T. (2020, June 2). Advantages & Disadvantages of Node.js : Why to Use Node.js?
https://www.simform.com/blog/nodejs-advantages-disadvantages
Kinsta. (2021, June 1). What Is Node.js and Why You Should Use It.
https://kinsta.com/knowledgebase/what-is-node-js/
Lanza, E. (2019). Trabajo Fin de Grado Aplicación Web Progresiva ( PWA ) para la gestión de
pagos de estacionamiento en superficie ( Manage Street parking payments using
Progressive Web Application ( PWA ) ) Graduado en Ingeniería de Tecnologías de
Telecomunicación.
Ley Orgánica de Educación Superior. (2020). LEY ORGÁNICA DE EDUCACIÓN SUPERIOR ,
LOES. 1–93.
Lopez, A., & Hernández, L. (2018). Aplicación Web Para Gestión Y Control De Compra -Venta
De Medicamentos De Farmacia “Tania.”
Lozano, J. (2018). Creación y gestión de una base de datos con Mysql y Phpmyadmin. 1–38.
http://tauja.ujaen.es/jspui/bitstream/10953.1/9445/1/TFG %285%29.pdf
Luna, F. O. (2021). PWA - Desarrolla Aplicaciones Web Multidispositivos -Vol.1: Implementa
las ... - Fernando Luna - Google Libros.
https://books.google.com.ec/books?id=eQg1EAAAQBAJ&pg=PP26&dq=pwa&hl=es-
419&sa=X&ved=2ahUKEwjTuYbK4d3xAhX1RDABHX72CIgQ6AEwAXoECAYQAg#v
=onepage&q=pwa&f=false
285
Luna, Z. (2019). Facultad de Ciencias Empresariales carrera de Contabilidad y Auditoría. 2–

27. http://186.3.32.121/bitstream/48000/14942/1/E-11320_LANDETA GONZALEZ
LILIBETH STEFANIA.pdf
Macharia, P. (2021, March). Key Features of Angular.js & Vue.js | Engineering Education
(EngEd) Program | Section.
Mateo, C. M. (2021). Universidad Politécnica de Madrid Trabajo Fin de Grado Generación
Automática de Diagramas de Gantt.
http://oa.upm.es/66279/1/TFG_CARLOS_MATEOS_MARTIN.pdf
MDN Web Docs. (2021a, June 11). Cache - Web APIs | MDN. https://developer.mozilla.org/en-
US/docs/Web/API/Cache
MDN Web Docs. (2021b, June 28). Web app manifests | MDN. https://developer.mozilla.org/en-
US/docs/Web/Manifest
Mena, M., Corral, A., Iribarne, L., & Criado, J. (2019). A Progressive Web Application Based on
Microservices Combining Geospatial Data and the Internet of Things. IEEE Access, 7,
104577–104590. https://doi.org/10.1109/ACCESS.2019.2932196
Monroy, G. A. (2018). Propuesta Para La Implementación De La Matriz Del Marco Lógico En
La Planificación, Administración Y Ejecución De Proyectos De Construcción. 164.
http://biblioteca.ingenieria.usac.edu.gt/
Mujica, A. (2021, May 31). ¿Qué es Codeigniter y para qué sirve? GUÍA FÁCIL [2021].
Crehana. https://www.crehana.com/ec/blog/tech/que-es-codeigniter/
MySQL. (2021a). MySQL :: MySQL 8.0 Reference Manual :: 16.11 Descripción general de la
arquitectura del motor de almacenamiento MySQL.
https://dev.mysql.com/doc/refman/8.0/en/pluggable-storage-overview.html
MySQL. (2021b). MySQL :: Productos MySQL. https://www.mysql.com/products/
Naranjo, H., & Jimenez, E. (2017). Utilización de la arquitectura Modelo-Vista–Controlador
(MVC) en el desarrollo de una aplicación web de catálogos privados. Universidad Técnica
De Ambata Uta, 4-Aug-2017, 11. http://192.188.46.193/handle/123456789/37301
Narvaez, C., & Acosta, S. (2019). APLICACIÓN DE LA METODOLOGÍA SCRUM E
IMPLEMENTACIÓN DE LA ESTRATEGIA DE SERVICIO CON BASE AL MARCO
DE REFERENCIA ITIL V 3.0 EN EL DESARROLLO DE UNA APLICACIÓN WEB
PARA UNA EMPRESA DE TRANSPORTE PÚBLICO PRESENTADO. Sustainability
(Switzerland), 11(1), 1–14.
http://scioteca.caf.com/bitstream/handle/123456789/1091/RED2017-Eng-
8ene.pdf?sequence=12&isAllowed=y%0Ahttp://dx.doi.org/10.1016/j.regsciurbeco.2008.06.
005%0Ahttps://www.researchgate.net/publication/305320484_SISTEM_PEMBETUNGAN
_TERPUSAT_STRATEGI_MELESTARI
Ovando, D. (2019). Bootstrap y Laravel, herramientas para el desarrollo de aplicaciones web.
PENINGGALAN SEJARAH SEBAGAI SUMBER BELAJAR SEJARAH DALAM
PENANAMAN NILAI-NILA KEBANGSAAN PENDAHULUAN Banyuwangi Merupakan
Wilayah Yang Memiliki Beberapa Daerah Yang Berpotensi Memiliki Situs Peninggalan
Sejarah Yang Sampai Saat Ini Masih Ada Namun Kondisi, 1(1), 41–57.
http://www.ghbook.ir/index.php?name= ‫فرهنگ و رسانه های‬
Pacheco, J. (2017). Promoción de ventas - Economía360. Economía 360 - Diccionario de
286
Economía, Administración y Negocios . https://www.economia360.org/promocion-de-

ventas/
Paternina, A., Argumento, J., & Giraldo, J. (2019). Diseño De Una Aplicación Web Progresiva
Para La Gestión De Eventos Académicos En La Licenciatura En Informática. 3, 1–4.
Paucar, G. B. T. E. J. (2020). UNIVERSIDAD DE GUAYAQUIL Prototipo de un sistema web
progresiva para automatizar la gestión de ventas y pedidos de mariscos de una
microempresa de la ciudad de Guayaquil . Gustavo José Paucar Chiquito.
Pineda, M., LLano, J., & Beltrán, A. (2019). Guía para la construcción de un software con base
de datos sincronizada a partir de un prototipo de software Guide for building a software
with synchronized database from a software prototype Guía para la construcción de un
software con base de datos sinc.
Raffino, M. (2020, May 28). Cliente - Concepto, origen y acepciones. Concepto.De.
https://concepto.de/cliente/
RedHat. (2019). El concepto de automatización. https://www.redhat.com/es/topics/automation
Reeves, S. (2020, August 31). What Is Software Prototyping And Why Do You Need It?
https://www.goodcore.co.uk/blog/software-prototyping/
Robledano, A. (2019, September 24). Qué es MySQL: Características y ventajas |
OpenWebinars. https://openwebinars.net/blog/que-es-mysql/
Rodríguez, G. (2017). Desarrollo de una aplicación web con Node.js para la monitorización en
tiempo real de un electrocardiograma. 59.
Rodriguez, M. (2019). Diseño de catálogo digital para dar a conocer a clientes reales y
potenciales los productos orgánicos y artesanales que comercializa Fitocosmética Milá.
Antigua Guatemala, Sacatepéquez, Guatemala. 2019. In PENINGGALAN SEJARAH
SEBAGAI SUMBER BELAJAR SEJARAH DALAM PENANAMAN NILAI-NILA
KEBANGSAAN PENDAHULUAN Banyuwangi merupakan wilayah yang memiliki
beberapa Daerah yang berpotensi memiliki situs peninggalan sejarah yang sampai saat ini
masih ada namun kondisi (Vol. 1, Issue 1). http://www.ghbook.ir/index.php?name= ‫فرهنگ و‬
‫رسانه های‬
Salazar, J. C., Tovar, Á., Linares, J. C., Lozano, A., Martin, R. C., Mellor, S., & Schwaber, K.
(2018). Scrum versus XP: similitudes y diferencias. Tecnología, Investigación y Academia,
6(2), 29–37.
Sarango, D. (2020). Desarrollo de plataforma web para evaluación de software basados en
metodología SCRUM. 48. http://186.3.32.121/bitstream/48000/16046/1/TTFIC-2020-IS-
DE00022.pdf
Schwaber, K., & Sutherland, J. (2017). The Scrum Guide: The Definitive The Rules of the
Game. Scrum.Org and ScrumInc, November, 19.
http://www.scrumguides.org/docs/scrumguide/v1/Scrum-Guide-US.pdf
Sierra, A., & Espinoza, M. (2018). Análisis Comparativo entre ASP. NET y PHP. Revista
INNOVA Research Journal, 3(4), 25–43.
Silvia. (2020, June 16). Extreme Programming - XP | Cátedra Viewnext VSAL.
https://viewnext.usal.es/blog/extreme-programming-xp
Solution Dot. (2017, October 22). 5 Stunning Features of Responsive Websites Designs (RWD).
https://solutiondots.com/blog/5-stunning-features-of-responsive-websites-designs/
287
Soto, B., & Dorado, J. (2020). CODIFICAR UN APLICATIVO INTERACTIVO MÓVIL

ENFOCADO AL APRENDIZAJE DE LAS INTELIGENCIAS MÚLTIPLES EN LA
FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS PROYECTO. In Codificar Un
Aplicativo Interactivo Móvil Enfocado Al Aprendizaje De Las Inteligencias Múltiples En La
Facultad De Ciencias Matemáticas Y Físicas.
http://repositorio.ug.edu.ec/bitstream/redug/48891/1/B-CISC-PTG-1738 Dorado Baque
Jenniffer Estefanía - Soto Avila Bryan Javier.pdf
Space-O Technologies. (2021, August). What is Vue.js? The Pros and Cons of Vue.js
Framework. https://www.spaceo.ca/what-is-vue-js-and-its-pros-and-cons/
Stack OverFlow. (2019). Encuesta para desarrolladores de Stack Overflow 2019.
https://insights.stackoverflow.com/survey/2019#technology
Tenorio, C. B. (2020). Desarrollo De Una Aplicación Web Progresiva (Pwa) E- Learning Para
El Nivel De Educación Básica En Unidades Educativas Con Gamificación Y Chatbot. 9–10.
Teruel, S. (2020, December 15). 3 tipos de automatización de procesos: conoce las diferencia.
https://www.captio.net/blog/diferencias-tipos-automatizacion-procesos
UNIR. (2021, March). Tipos de diagramas: cuáles existen y sus principales usos.
https://www.unir.net/marketing-comunicacion/revista/tipos-de-diagramas/
Veloz, A. (2016). De la interfaz del usuario al responsive web design. Revista AUC, 0(37), 59–
66. http://www.auc-ucsg.com/index.php/auc/article/view/18
Viewnext. (2019, November 27). Artefactos Scrum ¿Qué son y para qué sirven? | Viewnext.
https://www.viewnext.com/artefactos-scrum/
Visual Studio Code. (2021, June). Documentation for Visual Studio Code.
https://code.visualstudio.com/docs
Zambrano, M., & Buenaño, E. (2021). Desarrollo de una Tienda Virtual Progressive Web APPS
(PWA) para Gestionar las Ventas de los Productos en la Empresa Garcés Torres (GT)
Jean`s Cupido. [Universidad Técnica de Ambato, Facultad de Ingeniería en Sistemas,
Electrónica e Industrial]. https://repositorio.uta.edu.ec/jspui/handle/123456789/32303
288
BIBLIOGRAFÍA
Project Management Institute, Inc. (2017). Guía de los fundamentos para la dirección de
proyectos (guía del PMBOK®) Sexta Edición. NISO (National Information Standards
Organization). (Ed. 6, pp. 173-268). 978-1-62825-194-4
Kendall & Kendall (2011). Análisis y Diseño de sistemas. Octava Edición. Prentice Hall,
Inc.,). (Ed. 8, pp. 156-162). 9780136089162.

289
ANEXOS
Anexo 1. Planificación de actividades del proyecto
Elaboración: Mero Diego, Quinde Gilson.

Fuente: Propia de los investigadores.
290

291

292

293

294

295
Anexo 2. Geolocalización del problema
Descripción: Se muestra la ubicación geográfica de la Farmacia Nicolás Bolívar cuya dirección es: “Pájaro azul MZ
E1 sol. 3, circuito Juan Montalvo” de la ciudad de Guayaquil

Fuente: Google Maps.
296
Anexo 3. Carta de autorización del proyecto

297
Anexo 4. Metodología de Marco Lógico.
Anexo 4.1. MML – Fase 1: Definición del problema central
Nota: En esta figura se muestra las causas y consecuencias localizadas en la farmacia Nicolás Bolívar y analizadas
mediante la elaboración de diagrama de Causa y Consecuencia. Elaboración y fuente propia de los autores.
298
Anexo 4.2. MML – Fase 2: Listados de involucrados
Nota: Se enlista los involucrados que intervienen en el desarrollo de este presente trabajo de titulación. Elaboración y
fuente propia de los autores.
Anexo 4.2.1 Matriz Poder/Interés
Nota: Se ubica el personal en orden en el matriz poder/interés. Elaboración y fuente propia de los autores.
Anexo 4.2.2 Matriz Poder/Influencia
Nota: Se ubica el personal que se enlista los involucrados que intervienen en el desarrollo de este presente trabajo de
titulación. Elaboración y fuente propia de los autores.
299
Anexo 4.2.2 Matriz Influencia/Impacto
Nota: Se ubica el personal que se enlista los involucrados que intervienen en el desarrollo de este presente trabajo de
titulación. Elaboración y fuente propia de los autores.
300
Anexo 4.3. MML – Fase 3: Análisis del problema

301
Anexo 4.4. MML – Fase 4: Análisis de Objetivos

302
Anexo 4.5. MML – Fase 5: Análisis de Alternativas

303
Anexo 4.6. MML – Fase 6: Diseño de Estrategias

304
Anexo 4.7. MML – Fase 7: Análisis del problema

305
306

307
Anexo 5. Diagramas de flujo proceso
Anexo 5.1 Diagrama de flujo de proceso actual de la farmacia Nicolás Bolívar
Nota: Se utilizó la herramienta online Lucidchart para realizar el diagrama de flujo del proceso actual de la gestión de ventas teniendo en cuenta la aplicación web
progresiva de la farmacia Nicolás Bolívar. El proceso de la gestión de ventas tiene un tiempo de estimación de 00:43:50 minutos. Es importante mencionar que en
el tiempo total está incluido los 00:30:00 minutos que le tomaría en promedio al cliente acercarse a la farmacia, por lo que al no tomarse en cuenta este tiempo el
proceso actual seria de 00:13:50 minutos Elaboración: Mero Diego, Quinde Gilson. Fuente propia de los investigadores.
308
Anexo 5.2 Diagrama de flujo de procesos mejorado de la farmacia Nicolás Bolívar
Nota: Se utilizó la herramienta online Lucidchart para realizar el diagrama de flujo del proceso mejorado de la gestión de ventas teniendo en cuenta la aplicación
web progresiva de la farmacia Nicolás Bolívar. El proceso de la gestión de ventas tiene un tiempo de estimación de 00:35:20 minutos. Es importante mencionar
que el tiempo total está incluido los 00:30:00 minutos que le tomaría en promedio al cliente acercarse a la farmacia y está excluido los 00:40:00 que en promedio
al personal de la farmacia le tomaría hacer llegar los productos a domicilio, por lo que al no tomarse en cuenta estos tiempos el proceso mejorado seria de 00:05:20
minutos Elaboración: Mero Diego, Quinde Gilson. Fuente propia de los investigadores.
309
Anexo 6. Fundamentación Legal
Las Normas Legales en un Proyecto de Titulación

El presente proyecto de titulación denominado “DESARROLLO DE UN PROTOTIPO DE
APLICACIÓN WEB PROGRESIVA (PWA) PARA MEJORAR EL PROCESO DE GESTIÓN DE
VENTAS DE LA FARMACIA NICOLÁS BOLÍVAR” se fundamenta en artículos de la Ley Orgánica
de Educación Superior (LOES), artículos de la Constitución de la República del Ecuador, Código
Orgánico de la Economía Social de los Conocimientos, Creatividad e Invención, Código Orgánico
Integral Penal (COIP) y Ley Orgánica de Comunicación, lo cuales se detallan a continuación:
ARTÍCULO DE LA
CONTEXTO
LOES
El derecho a la educación superior consiste en el ejercicio efectivo de la igualdad de
oportunidades, en función de los méritos respectivos, a fin de acceder a una formación
ART. 4 DERECHO A académica y profesional con producción de conocimiento pertinente y de excelencia.
LA EDUCACION Las ciudadanas y los ciudadanos en forma individual y colectiva, las comunidades,
SUPERIOR pueblos y nacionalidades tienen el derecho y la responsabilidad de participar en el
proceso educativo superior, a través de los mecanismos establecidos en la Constitución
y esta Ley.
ART. 87 Como requisito previo a la obtención del título, los y las estudiantes deberán acreditar
REQUISITOS servicios a la comunidad mediante prácticas o pasantías preprofesionales. debidamente
PREVIOS A LA monitoreadas. en los campos de su especialidad, de conformidad con los lineamientos
OBTENCIÓN DEL generales definidos por el Consejo de Educación Superior.
GRADO
ACADÉMICO
ARTÍCULO. 129 Todas las instituciones de educación superior del país notificarán al órgano rector de la
NOTIFICACIÓN AL política pública de educación superior la nómina de los graduados y las especificaciones
ÓRGANO RECTOR de los títulos que expida.
DE LA POLÍTICA
PÚBLICA DE
EDUCACIÓN
SUPERIOR
ARTÍCULO. 144 Todas las instituciones de educación superior estarán obligadas a entregar los trabajos
TRABAJOS DE de titulación que se elaboren para la obtención de títulos académicos de grado y posgrado
TITULACIÓN EN en formato digital para ser integradas al Sistema Nacional de Información de la
FORMATO Educación Superior del Ecuador para su difusión pública respetando los derechos de
DIGITAL autor.
Fuente: (Ley Orgánica de Educación Superior, 2020).
ARTÍCULO DE LA
CONTEXTO
CONSTITUCIÓN
Las personas tienen derecho a desarrollar su capacidad creativa, al ejercicio digno y
sostenido de las actividades culturales y artísticas, y a beneficiarse de la protección
ARTÍCULO 22
de los derechos morales y patrimoniales que les correspondan por las producciones
científicas, literarias o artísticas de su autoría.
La educación es un derecho de las personas a lo largo de su vida y un deber
ineludible e inexcusable del Estado. Constituye un área prioritaria de la política
ARTÍCULO 26 pública y de la inversión estatal, garantía de la igualdad e inclusión social y
310
condición indispensable para el buen vivir. Las personas, las familias y la sociedad
tienen el derecho y la responsabilidad de participar en el proceso educativo.
La educación responderá al interés público y no estará al servicio de intereses

individuales y corporativos. Se garantizará el acceso universal, permanencia,
ARTÍCULO 28
movilidad y egreso sin discriminación alguna y la obligatoriedad en el nivel inicial,
básico y bachillerato o su equivalente.
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
ARTÍCULO 350 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.
El Estado reconocerá a las universidades y escuelas politécnicas autonomía
académica, administrativa, financiera y orgánica, acorde con los objetivos del
régimen de desarrollo y los principios establecidos en la Constitución.
ARTÍCULO 355 primer y Se reconoce a las universidades y escuelas politécnicas el derecho a la autonomía,
segundo inciso ejercida y comprendida de manera solidaria y responsable. Dicha autonomía
garantiza el ejercicio de la libertad académica y el derecho a la búsqueda de la
verdad, sin restricciones; el gobierno y gestión de sí mismas, en consonancia con
los principios de alternancia, transparencia y los derechos políticos; y la producción
de ciencia, tecnología, cultura y arte.
El sistema nacional de ciencia, tecnología, innovación y saberes ancestrales, en el
marco del respeto al ambiente, la naturaleza, la vida, las culturas y la soberanía,
tendrá como finalidad:
ARTÍCULO 385 Ciencia, 1. Generar, adaptar y difundir conocimientos científicos y tecnológicos.
tecnología, innovación y 2. Recuperar, fortalecer y potenciar los saberes ancestrales.
saberes ancestrales 3. Desarrollar tecnologías e innovaciones que impulsen la producción nacional,
eleven la eficiencia y
productividad, mejoren la calidad de vida y contribuyan a la realización del buen
vivir.
Fuente: (Constitución de la República del Ecuador, 2021).
CODIGO ORGÁNICO
DE LA ECONOMÍA
SOCIAL DE LOS
CONOCIMIENTOS, CONTEXTO
CREATIVIDAD E
INVENCIÓN
La protección reconocida por el presente Título recae sobre todas las obras
Artículo 104.- Obras literarias, artísticas y científicas, que sean originales y que puedan reproducirse o
susceptibles de protección divulgarse por cualquier forma o medio conocido o por conocerse.
El software se protege como obra literaria. Dicha protección se otorga
independientemente de que hayan sido incorporados en un ordenador y cualquiera
sea la forma en que estén expresados, ya sea como código fuente; es decir, en forma
Artículo 131.- Protección
legible por el ser humano; o como código objeto; es decir, en forma legible por
de software
máquina, ya sea sistemas operativos o sistemas aplicativos, incluyendo diagramas
de flujo, planos, manuales de uso, y en general, aquellos elementos que conformen
la estructura, secuencia y organización del programa.
311
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 ello;
• La libertad de redistribuir copias; y,
• La libertad de distribuir copias de sus versiones modificadas a terceros.
Artículo 142.- Tecnologías
libres Se entiende por código fuente, al conjunto de instrucciones escritas en algún
lenguaje de programación, diseñadas con el fi n 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.
Fuente: (Del Pozo, 2016).
312
Anexo 7. Criterios éticos para utilizarse en el desarrollo del proyecto
MATRIZ DE CRITERIOS ÉTICOS DEL PROYECTO
Criterios Características del criterio Procedimientos

Credibilidad / El proyecto debe ser medible Los resultados deben ser
y autentico. verdaderos y validados por
Autenticidad los participantes del
proyecto.
Transferencia / Los resultados de la Los resultados deben ser
investigación realizada descritos a los participantes
Aplicabilidad deben medibles del proyecto.
cualitativamente y
transferibles.
Consistencia / En el proyecto no es posible Los resultados son validados
realizar replicidad del por expertos.
Dependencia estudio de investigación. Descripción de la
recolección de información y
datos.
Confirmabilidad / Los resultados que se Se realizan las
presenten en la investigación transcripciones textuales de
Neutralidad o objetividad del proyecto deben las entrevistas.
garantizar su veracidad. Se realizan revisiones de
hallazgos de otros autores.
Relevancia Ayuda a evaluar el logro de Se realizan configuraciones
todos los objetivos del planteamiento teóricos,
planteados y conocer si se conceptuales e
adquirió mejores investigaciones.
conocimientos del estudio. Relación entre la
justificación y resultados que
se obtuvieron en la
investigación.
Adecuación Su enfoque es en validar la Se realizan comparaciones
existencia de los problemas y de las preguntas o problemas
teoría investigada. con los métodos o
metodologías. Ajustes en los
diseños.
313
Anexo 8. Formatos de técnicas de recolección de datos aplicadas para variables
cuantitativas o cualitativas.
Anexo 8.1 Formato de la Encuesta

314

315

316

317
Anexo 8.2 Formato de la Entrevista N° 1

318

319

320

321

322

323

324
Anexo 8.3 Formato de la Entrevista N° 2

325

326

327
Anexo 9. Entrevista realizada al propietario de la farmacia Nicolás Bolívar.

328

329

330

331

332
Anexo 10. Modelado de la base de datos

333
Anexo 11.1 Plan de pruebas
Prueba 1/30

334
Prueba 2/30

335
Prueba 3/30

336
Prueba 4/30

337
Prueba 5/30

338
Prueba 6/30

339
Prueba 7/30

340
Prueba 8/30

341
Prueba 9/30

342
Prueba 10/30

343
Prueba 11/30

344
Prueba 12/30

345
Prueba 13/30

346
Prueba 14/30

347
Prueba 15/30

348
Prueba 16/30

349
Prueba 17/30

350
Prueba 18/30

351
Prueba 19/30

352
Prueba 20/30

Fuente: Propia.
353
Prueba 21/30

354
Prueba 22/30

355
Prueba 23/30

356
Prueba 24/30

357
Prueba 25/30

358
Prueba 26/30

359
Prueba 27/30

360
Prueba 28/30

361
Prueba 29/30

362
Prueba 30/30

363
Anexo 11.2 Matriz del plan de pruebas

364
Anexo 12. Validación de expertos
Experto N.1
365
Experto N.2
366
Experto N.3
367
Anexo 13. Constancia de Juicio de experto
Experto N.1
368
Experto N.2
369
Experto N.3
370
Anexo 14. Formato de la encuesta de satisfacción

371

372

373

374
Anexo 15. Carta de aceptación del proyecto

375
Anexo 16. Carta de uso de software

376
Anexo 17. Evidencias fotográficas
Nota: En este Anexo se evidencia la reunión realizada con el propietario de la farmacia Nicolás Bolívar para el
levantamiento de la información del presente proyecto de titulación Elaboración: Mero Diego, Quinde Gilson.
Fuente: Propia.
Nota: En este Anexo se evidencia la reunión realizada con la Dr. María Soledad Macías (Asesora del propietario de
la organización) para la realización de las pruebas y juicio de experto del software. Se tuvo el consentimiento de la
Dr. María Soledad Macías. Elaboración: Mero Diego, Quinde Gilson. Fuente: Propia de los investigadores.
377
Anexo 18. Manual técnico
El manual técnico no consta en este tomo debido a que la cantidad de páginas es muy
extensa y por ende fue realizado un Tomo II donde se encuentra ubicado el manual técnico del
trabajo de titulación denominado “DESARROLLO DE UN PROTOTIPO DE APLICACIÓN
WEB PROGRESIVA (PWA) PARA MEJORAR EL PROCESO DE GESTIÓN DE VENTAS EN
LA FARMACIA NICOLÁS BOLÍVAR” elaborado por los autores Mero Albarracin Diego
Cristoffer y Quinde Briones Gilson Steeven.

378
Anexo 19. Manual de usuario
El manual de usuario no consta en este tomo debido a que la cantidad de páginas es muy
extensa y por ende fue realizado un Tomo II donde se encuentra ubicado el manual de usuario del
trabajo de titulación denominado “DESARROLLO DE UN PROTOTIPO DE APLICACIÓN
WEB PROGRESIVA (PWA) PARA MEJORAR EL PROCESO DE GESTIÓN DE VENTAS EN
LA FARMACIA NICOLÁS BOLÍVAR” elaborado por los autores Mero Albarracin Diego
Cristoffer y Quinde Briones Gilson Steeven.

1
CARRERA DE INGENIERÍA EN SISTEMAS
COMPUTACIONALES
DESORROLLO DE UN PROTOTIPO DE APLICACIÓN WEB
PROGRESIVA (PWA) PARA MEJORAR EL PROCESO DE GESTIÓN
DE VENTAS EN LA FARMACIA NICOLÁS BOLÍVAR.
MANUAL TÉCNICO
AUTORES:
TUTORA:
Ing. ÁNGELA YANZA MONTALVÁN. Mgp.
2021
2
ÍNDICE GENERAL
ÍNDICE GENERAL ........................................................................................................2
ÍNDICE DE TABLAS .....................................................................................................3
ÍNDICE DE FIGURAS ...................................................................................................4
Introducción .....................................................................................................................6
Objetivo ............................................................................................................................6
Requisitos técnicos de la aplicación ...............................................................................6
Especificaciones técnicas del sistema .............................................................................7
Instalación de programas................................................................................................8
Instalación de Codeigniter ............................................................................................ 8
Instalación de Node.js................................................................................................... 9
Configuración del proyecto ..........................................................................................13
Contenido técnico de la aplicación ...............................................................................15
Descripción de los elementos de la aplicación .............................................................16
Diagrama entidad relación ...........................................................................................18
Diagramas de casos de uso ............................................................................................19
Caso de uso de inicio de sesión del usuario cliente .................................................... 19
Caso de uso de inicio de sesión del usuario administrador ........................................ 20
Caso de uso del módulo de auditoria .......................................................................... 21
Caso de uso del módulo de reportería ........................................................................ 22
Caso de uso del módulo de chat en línea .................................................................... 23

3
ÍNDICE DE TABLAS
Tabla 1 Requerimientos de Hardware ............................................................................. 6
Tabla 2 Requerimientos de Software ............................................................................... 7
Tabla 3 Tecnologías usadas ............................................................................................ 7
Tabla 4 Caso de uso - inicio de sesión clientes ............................................................. 19
Tabla 5 Caso de uso - inicio de sesión administrador .................................................. 20
Tabla 6 Caso de uso - módulo de auditoria ................................................................... 21
Tabla 7 Caso de uso - módulo de reportería ................................................................. 22
Tabla 8 Caso de uso - módulo de chat en línea ........................................................... 23

4
ÍNDICE DE FIGURAS
Figura 1 Sitio oficial del framework Codeigniter............................................................ 8
Figura 2 Interfaz de la instalación realizada de Codeigniter .......................................... 8
Figura 3 Sito oficial del Node.js ...................................................................................... 9
Figura 4 Instalador del Node.js ..................................................................................... 10
Figura 5 Términos y condiciones de Node.js ............................................................. 10
Figura 6 Ubicación para la instalación del Node.js ...................................................... 11
Figura 7 Inicio de instalación de Node.js ..................................................................... 11
Figura 8 Finalización de la instalación de Node.js ........................................................ 12
Figura 9 Verificación de la instalación de Node.js ...................................................... 12
Figura 10 Creación de cuenta en cPanel ....................................................................... 13
Figura 11 Pantalla principal de cPanel para subir el proyecto ..................................... 13
Figura 12 Creación de la base de datos del proyecto ................................................... 14
Figura 13 Ingreso del nombre para la creación de la base de datos .............................. 14
Figura 14 Base de datos creada en a interfaz de cPanel ................................................ 15
Figura 15 Distribución de los archivos del proyecto .................................................... 15
Figura 16 Ubicación de los archivos para iniciar la aplicación .................................... 16
Figura 17 Ubicación de los archivos de los principales módulos y funciones ............. 16
Figura 18 URL de la aplicación del lado del cliente .................................................... 17
Figura 19 URL de la aplicación del lado del administrador ......................................... 17
Figura 20 Diagrama relacional del proyecto ................................................................ 18
Figura 21 Inicio de sesión del usuario (cliente) ........................................................... 19
Figura 22 Inicio de sesión del usuario administrador.................................................... 20
Figura 23 Caso de uso módulo de auditoria ................................................................. 21
Figura 24 Caso de uso módulo de reportería ................................................................ 22

5
Figura 25 Caso de uso módulo de chat en línea ........................................................... 23

6
Introducción
El presente documento se detalla la instalación de las herramientas de desarrollo,
sus configuraciones y complementos necesarios para el desarrollo del prototipo de
aplicación web.
Se describen los requerimientos necesarios para el desarrollo del prototipo de
aplicación web progresiva (PWA) para el proceso de gestión de ventas en la farmacia
Nicolás Bolívar.
Objetivo
Detallar de la manera más apropiada los requerimientos de hardware y software
mínimos para la instalación y configuración del proceso, brindando soporte del prototipo
de aplicación web al personal administrativo para que tenga conocimiento de los pasos
necesarios a seguir para su correcto funcionamiento.
Requisitos técnicos de la aplicación
Para asegurar un óptimo funcionamiento del prototipo de aplicación web se debe
tomar en cuenta los requerimientos técnicos de hardware y software, los cuales se detallan
a continuación:
Tabla 1
Requerimientos de Hardware
Características Especificaciones
Procesador Intel Core i3
Memoria RAM Mínimo 4 GB
Disco Duro 500 GB en adelante
Nota: Esta tabla se muestra los requerimientos de hardware usados para las pruebas y desarrollo en
ambiente local.
7
Tabla 2
Requerimientos de Software
Características Especificaciones
Sistema Operativo Windows 10 64bits
Lenguajes de programación PHP v7.4, JavaScript
Base de datos MySQL v8.1

Nota: Esta tabla se muestra los requerimientos de software usados para las pruebas y desarrollo en ambiente
local.
Especificaciones técnicas del sistema
El prototipo de aplicación web desarrollado requiere de un conjunto de
tecnologías, entre las cuales se puede mencionar la base de datos MySQL, el lenguaje de
programación PHP y el framework Codeigniter, en la siguiente tabla se muestra a detalles
las especificaciones técnicas.
Tabla 3
Tecnologías usadas
Tecnologías Detalle
Back-End Lenguajes de programación: PHP v7.4, JavaScritp
Framework: Codeigniter v3.1
Front-End Lenguajes de etiqueta: HTML 5, CSS 3

Framework: Vue.js v26.14, Bootstrap v4
Data Base MySQL v8.1

Nota: Esta tabla se muestra las tecnologías usadas para el desarrollo de la aplicación web, detalladas tanto
en Backend, frontend y base de datos.
8
Instalación de programas
Instalación de Codeigniter
Codeigneter es un framework de PHP cuya instalación y configuración es muy
sencilla y casi inexistente.
Para la descarga del paquete de Codeigniter se la puede realizar desde el sitio
oficial, en el cual se detallan de manera breve los paso para su instalación, para ello debe
dirigirse al siguiente enlace: https://codeigniter.com/download
Figura 1
Sitio oficial del framework Codeigniter
Nota: En la figura se muestra el sitio oficial de descarga del framework codeigniter en su versión 3.1. La
elaboración es propia. Fuente tomado de Codeigniter.
Figura 2
Interfaz de la instalación realizada de Codeigniter

9
Nota: En la figura se muestra la instalación finalizada del framework codeigniter en su versión 3.1. La
elaboración es propia. Fuente tomado de Codeigniter.
Instalación de Node.js
Node.js es un entorno de ejecución de código abierto que ejecuta JavaScipt del
lado de servidor usado comúnmente para el desarrollo de aplicaciones con funciones en
tiempo real.
Para la descarga del Node.js se la puede realizar desde el sitio oficial en el
siguiente enlace: https://nodejs.org/es/
Figura 3
Sito oficial del Node.js
Nota: En la figura se muestra el sitio oficial de descarga de Node.js en su versión 14.17. La elaboración es
propia. Fuente tomado de Node.js.
10
Figura 4
Instalador del Node.js
Nota: En la figura se muestra el sitio oficial de descarga de Node.js en su versión 14.17. La elaboración es
propia. Fuente tomado de Node.js.
Figura 5
Términos y condiciones de Node.js
Nota: En la figura se muestra los términos y condiciones de Node.js que se aceptan al dar click en el botón
Next. La elaboración es propia. Fuente tomado de Node.js.
11
Figura 6
Ubicación para la instalación del Node.js
Nota: En la figura se muestra la ruta de instalación del Node.js que se aceptan al dar click en el botón Next.
La elaboración es propia. Fuente tomado de Node.js.
Figura 7
Inicio de instalación de Node.js
Nota: En la figura se muestra el proceso inicia de instalación el cual se ejecuta luego de dar click en el
botón Install. La elaboración es propia. Fuente tomado de Node.js.
12
Figura 8
Finalización de la instalación de Node.js
Nota: En la figura se muestra el resultado de la instalación el cual finaliza después de presionar cualquier
tecla. La elaboración es propia. Fuente tomado de Node.js.
Figura 9
Verificación de la instalación de Node.js
Nota: En la figura se muestra la verificación de la instalación con el comando –v en CMD, como se puede
notar el Node.js está instalado en su versión 14.17. La elaboración es propia. Fuente tomado de Node.js.
13
Configuración del proyecto
Para la configuración y alojamiento del proyecto debe dirigirse al sitio oficial del
cPanel, en cual, como requisito previo de crear una nueva cuenta para proceder con las
configuraciones del proyecto en el siguiente link: https://cpanel.net/
Figura 10
Creación de cuenta en cPanel
Nota: En la figura se muestra la interfaz para la creación de cPanel. La elaboración es propia. Fuente de
cPanel.
Figura 11
Pantalla principal de cPanel para subir el proyecto
Nota: En la figura se muestra la interfaz de cPanel para subir el proyecto. La elaboración es propia. Fuente
de cPanel.
En la figura que se muestra a continuación, se observa la configuración para la
creación de la base de datos del proyecto.

14
Figura 12
Creación de la base de datos del proyecto
Nota: En la figura se muestra la interfaz de cPanel en la cual se puede crear la base de datos del proyecto.
La elaboración es propia. Fuente de cPanel.
Figura 13
Ingreso del nombre para la creación de la base de datos
Nota: En la figura se muestra la interfaz de cPanel en la cual se puede crear la base de datos del proyecto
luego de dar click en el botón crear una base de datos. La elaboración es propia. Fuente de cPanel.
15
Figura 14
Base de datos creada en a interfaz de cPanel
Nota: En la figura se muestra la interfaz de cPanel de la base de datos. creada La elaboración es propia.
Fuente de cPanel.
Contenido técnico de la aplicación
En la siguiente figura se muestra como se encuentran distribuidos los diferentes
archivos que contiene el proyecto.
Figura 15
Distribución de los archivos del proyecto
Nota: En la figura se muestra como se encuentran distribuidos los diferentes archivos del proyecto. La
elaboración es propia.
16
Descripción de los elementos de la aplicación
En la siguiente figura se presenta la ubicación de los archivos que permiten iniciar
el prototipo de aplicación web.
Figura 16
Ubicación de los archivos para iniciar la aplicación
Nota: En la figura se muestra como se encuentran distribuidos los diferentes archivos que permiten iniciar
la aplicación. La elaboración es propia.
En la siguiente figura se presenta la ubicación de los archivos de los diferentes
módulos y funciones que permiten hacer funcionar el prototipo de aplicación web.
Figura 17
Ubicación de los archivos de los principales módulos y funciones
Nota: En la figura se muestra la ubicación de los módulos y funciones de la aplicación web permiten iniciar
la aplicación. La elaboración es propia.
17
En la siguiente figura se presenta la URL del prototipo de aplicación web para los
usuarios clientes. A continuación, se adjunta el link de la aplicación web: https://farmacia-
nicolasbolivar.com/FarmaciaBolivar/
Figura 18
URL de la aplicación del lado del cliente
Nota: En la figura se muestra la URL de la aplicación de lado del cliente. La elaboración es propia.
En la siguiente figura se presenta la URL del prototipo de aplicación web para los
usuarios administradores. A continuación, se adjunta el link de la aplicación web para el
administrador: https://farmacia-nicolasbolivar.com/FarmaciaBolivar/admin/
Figura 19
URL de la aplicación del lado del administrador
Nota: En la figura se muestra la URL de la aplicación de lado del administrador. La elaboración es propia.
18
Diagrama entidad relación
Figura 20
Diagrama relacional del proyecto

19
Diagramas de casos de uso
Los diagramas de casos de uso sirven para elaborar gráficos de que describen la manera
en cómo se distribuyen las diferentes actividades y como los actores interactúan con la
aplicación en cada proceso.
Caso de uso de inicio de sesión del usuario cliente
Tabla 4
Caso de uso - inicio de sesión clientes
CUI Acceder a la aplicación web.

Actores Cliente.
Descripción Permite el inicio de sesión a los usuarios
clientes que previamente registrados
en la aplicación web, permitiéndole los
accesos determinados de acuerdo a su rol.
Requerimientos previos Los usuarios deben poner su usuario y
contraseña.
Nota: En esta tabla se muestra el caso de uso de inicio de sesión para el usuario cliente. La elaboración es
propia.
Figura 21
Inicio de sesión del usuario (cliente)
Nota: En esta tabla se muestra el caso de uso de inicio de sesión para el usuario cliente. La elaboración es
propia.
20
Caso de uso de inicio de sesión del usuario administrador
Tabla 5
Caso de uso - inicio de sesión administrador
CUI Acceder a la aplicación web.

Actores Administrador.
Descripción Permite el inicio de sesión a los usuarios
administrador que previamente
registrados
en la aplicación web, permitiéndole los
Requerimientos previos accesos
Los determinados
usuarios de acuerdo
deben poner a suyrol.
su usuario
contraseña.
Nota: En esta tabla se muestra el caso de uso de inicio de sesión para el usuario administrador. La elaboración
es propia.
Figura 22
Inicio de sesión del usuario administrador
Nota: En esta figura se muestra el caso de uso de inicio de sesión para el usuario administrador. La elaboración
es propia.
21
Caso de uso del módulo de auditoria
Tabla 6
Caso de uso - módulo de auditoria
CUI Módulo de auditoria

Descripción Permite al administrador visualizar los
inicios de sesión de los usuarios cliente y
administradores.
Requerimientos previos El administrador deberá ingresar a la
aplicación web y dirigirse a la sección de
auditoria para visualizar en la tabla los
inicio de sesión de los usuarios.
Nota: En esta tabla se muestra el caso de uso del módulo de auditoria para el usuario administrador. La
Figura 23
Caso de uso módulo de auditoria
Nota: En esta figura se muestra el caso de uso del módulo de auditoria para el usuario administrador. La
22
Caso de uso del módulo de reportería
Tabla 7
Caso de uso - módulo de reportería
CUI Módulo de auditoria

Descripción Permite al administrador visualizar los
dashboard de las ventas, categorías,
usuarios y productos.
Requerimientos previos El administrador deberá ingresar a la

aplicación web y dirigirse a la sección de
reportería para visualizar los dashboard y
descargar el reporte en formato PDF.
Nota: En esta tabla se muestra el caso de uso del módulo de reportería para el usuario administrador. La
elaboración es propia
Figura 24
Caso de uso módulo de reportería
Nota: En esta figura se muestra el caso de uso del módulo de reportería para el usuario administrador. La
23
Caso de uso del módulo de chat en línea
Tabla 8
Caso de uso - módulo de chat en línea
CUI Módulo de chat en línea

Actores Administrador, Cliente
Descripción Permite al administrador y al cliente una
comunicación en tiempo real a través del
chat.
Requerimientos previos Tanto administrador como usuario

deberán dirigirse a la sección del módulo
de chat para iniciar la interacción en
tiempo real.
Nota: En esta tabla se muestra el caso de uso del módulo de chat en línea para el usuario administrador y cliente.
La elaboración es propia.
Figura 25
Caso de uso módulo de chat en línea
Nota: En esta figura se muestra el caso de uso del módulo de chat en línea tanto para el usuario administrador
como para el cliente. La elaboración es propia.
1
DESORROLLO DE UN PROTOTIPO DE APLICACIÓN WEB PROGRESIVA
(PWA) PARA MEJORAR EL PROCESO DE GESTIÓN DE VENTAS EN LA
FARMACIA NICOLÁS BOLÍVAR.
MANUAL DE USUARIO
AUTORES:
TUTORA:
Ing. ÁNGELA YANZA MONTALVÁN. Mgp.
2021
2
ÍNDICE GENERAL
ÍNDICE GENERAL ..................................................................................................................... 2
ÍNDICE DE LAS FIGURAS ........................................................................................................ 5
Introducción ................................................................................................................................ 10
Objetivo........................................................................................................................................ 10
Desarrollo del manual de usuario.............................................................................................. 11
Usuario cliente ............................................................................................................................. 11
Registro de usuario cliente ........................................................................................................ 13
Pasos para crear el usuario cliente ....................................................................................... 13
Pasos para iniciar sesión a la cuenta del usuario cliente ..................................................... 14
Pasos para reestablecer contraseña ...................................................................................... 14
Perfil de usuario cliente ............................................................................................................ 18
Características de perfil de usuario...................................................................................... 19
Inicio .................................................................................................................................... 20
Productos................................................................................................................................... 21
Características de la interfaz de productos .......................................................................... 22
Pedidos ...................................................................................................................................... 23
Pasos para realizar un pedido .............................................................................................. 23
Categoría ................................................................................................................................... 29
3
Contactos................................................................................................................................... 29
Chat en línea ............................................................................................................................. 31
Pasos para iniciar una consulta utilizando el modulo e chat en línea .................................. 32
Usuario Administrador .............................................................................................................. 36
Pasos para ingresar a la interfaz del administrador ................................................................... 36
Pasos para reestablecer contraseña ........................................................................................... 36
Interfaz de usuario de administrador......................................................................................... 37
Incorporación de Módulos ......................................................................................................... 39
Módulo de productos ........................................................................................................... 42
Módulo de stock .................................................................................................................. 47
Módulo de promociones ...................................................................................................... 49
Módulo de categorías .......................................................................................................... 55
Módulo de pedidos .............................................................................................................. 56
Módulo de inventarios ......................................................................................................... 58
Módulo de seguridad ........................................................................................................... 63
Módulo de reporte ............................................................................................................... 69
Módulo de chat .................................................................................................................... 81
Módulo de auditoria ............................................................................................................ 82
Instalación de la aplicación web progresiva (PWA) ................................................................ 85

4
Pasos para instalar la aplicación web progresiva de la farmacia Nicolás Bolívar en el
ordenador. ................................................................................................................................. 85
Pasos para instalar la aplicación web progresiva de la farmacia Nicolás Bolívar en un
dispositivo móvil Android. ....................................................................................................... 89

5
ÍNDICE DE LAS FIGURAS
Figura 1 Pantalla principal ...................................................................................................11
Figura 2 Mensajes de presentación de la farmacia Nicolás Bolívar ....................................12
Figura 3 Testimonios ...........................................................................................................12
Figura 4 Botón para regresar a la parte superior .................................................................13
Figura 5 Registro de usuario cliente .................................................................................... 13
Figura 6 Inicio de sesión del usuario cliente.......................................................................14
Figura 7 Recuperación de contraseña .................................................................................. 15
Figura 8 Notificación de mensaje ........................................................................................ 15
Figura 9 Correo electrónico del usuario ..............................................................................16
Figura 10 Cambiar contraseña ............................................................................................. 17
Figura 11 Inicio de sesión de usuario cliente .......................................................................17
Figura 12 Ventana del carrito .............................................................................................. 18
Figura 13 Perfil de usuario cliente ....................................................................................... 19
Figura 14 Lista de pedidos ...................................................................................................19
Figura 15 Actualizar datos de la cuenta del cliente ............................................................. 20
Figura 16 Interfaz de inicio ..................................................................................................21
Figura 17 Interfaz de productos ........................................................................................... 22
Figura 18 Característica de los productos ............................................................................23
Figura 19 Producto seleccionado ......................................................................................... 23
Figura 20 Tabla de pedidos ..................................................................................................24
Figura 21 Nuevo producto ...................................................................................................25

6
Figura 22 Tabla de pedidos con el nuevo producto agregado .............................................25
Figura 23 Datos de la orden .................................................................................................26
Figura 24 Tabla de pedidos con los datos de la orden ......................................................... 26
Figura 25 Lista de pedidos ...................................................................................................27
Figura 26 Comprobante del pedido ..................................................................................... 28
Figura 27 Imprimir comprobante del pedido .......................................................................28
Figura 28 Categorías de productos ...................................................................................... 29
Figura 29 Ubicación geográfica de la farmacia Nicolás Bolívar .........................................30
Figura 30 Datos para contactar con el propietario de la farmacia .......................................31
Figura 31 Icono para enviar un mensaje ..............................................................................31
Figura 32 Ventana para enviar un mensaje a un operador ................................................... 32
Figura 33 Perfil del usuario .................................................................................................33
Figura 34 Ventana para realizar una consulta con un operador ...........................................33
Figura 35 chat con el operador ............................................................................................ 34
Figura 36 Conversación utilizando el chat en línea de la aplicación web ........................... 35
Figura 37 Configuración del chat ........................................................................................ 35
Figura 38 Inicio de sesión en el administrador ....................................................................36
Figura 39 Interfaz de Usuario administrador .......................................................................38
Figura 40 Menú de opciones para visualizar el perfil o de cerrar sesión............................. 38
Figura 41 Perfil del usuario administrador ..........................................................................39
Figura 42 Cambio de contraseña dentro del perfil de usuario administrador ..................... 39
Figura 43 Módulos ...............................................................................................................40
Figura 44 Datos de la empresa ............................................................................................. 41

7
Figura 45 Modificar datos de la empresa.............................................................................41
Figura 46 Insertar nuevos productos .................................................................................... 43
Figura 47 Lista de productos ............................................................................................... 43
Figura 48 Títulos de los campos de la tabla producto ......................................................... 44
Figura 49 Descripción del producto..................................................................................... 45
Figura 50 Estado del producto ............................................................................................. 45
Figura 51 Modifica la descripción del producto ..................................................................46
Figura 52 Botón de Eliminar elemento ................................................................................46
Figura 53 Campos de la tabla de stock de productos .......................................................... 47
Figura 54 Ingreso de productos ........................................................................................... 48
Figura 55 Tabla de stock ......................................................................................................48
Figura 56 Actualización del registro del stock ....................................................................49
Figura 57 Permite eliminar el registro .................................................................................49
Figura 58 Interfaz para agregar un producto al carrusel ...................................................... 50
Figura 59 Lista de productos en el carrusel .........................................................................51
Figura 60 Lista de productos para realizar descuentos ........................................................ 51
Figura 61 Establecer descuentos de los productos............................................................... 52
Figura 62 Actualizar el descuento del producto ..................................................................53
Figura 63 Lista de productos con descuentos ......................................................................54
Figura 64 Módulo de categorías .......................................................................................... 55
Figura 65 Modificar nombre ................................................................................................ 55
Figura 66 Listados de pedidos ............................................................................................. 56
Figura 67 Datos de la orden .................................................................................................57

8
Figura 68 Datos del cliente ..................................................................................................57
Figura 69 Títulos de los campos .......................................................................................... 58
Figura 70 Módulo de Inventario .......................................................................................... 58
Figura 71 Ingresos de inventario ......................................................................................... 59
Figura 72 Egresos de inventarios ......................................................................................... 60
Figura 73 Factura de compra ............................................................................................... 61
Figura 74 Inventario - producto ........................................................................................... 63
Figura 75 Títulos de los campos .......................................................................................... 63
Figura 76 Usuarios administrador........................................................................................ 64
Figura 77 Agregar nuevos usuarios administradores ........................................................... 65
Figura 78 Actualización de datos de usuarios .....................................................................66
Figura 79 Usuarios clientes..................................................................................................67
Figura 80 Nuevo usuario......................................................................................................68
Figura 81 Actualizar datos de cliente .................................................................................. 69
Figura 82 Módulo de reportería ........................................................................................... 69
Figura 83 Estadísticas ..........................................................................................................70
Figura 84 Reporte de categorías por stock...........................................................................71
Figura 85 Reporte – Total de ventas .................................................................................... 72
Figura 86 Reporte – Total productos ................................................................................... 73
Figura 87 Reporte – Total usuario ....................................................................................... 74
Figura 88 Reporte – Total stock .......................................................................................... 75
Figura 89 Reporte de pedidos .............................................................................................. 77
Figura 90 Reporte de ingresos de productos ........................................................................79

9
Figura 91 Reporte de egresos de productos .........................................................................81
Figura 92 Módulo de chat ....................................................................................................82
Figura 93 Módulo de auditoría de lado del administrador................................................... 83
Figura 94 Módulo de auditoría de lado del usuario ............................................................. 84
Figura 95 Ingreso a la aplicación web desde el ordenador .................................................. 85
Figura 96 Seleccionar instalar farmacia Nicolás .................................................................86
Figura 97 Instalación de la PWA ......................................................................................... 87
Figura 98 Instalación completa de la PWA .........................................................................87
Figura 99 Aplicación Web progresiva (PWA) de la farmacia Nicolás Bolívar................... 88
Figura 100 Ingreso a la aplicación web desde el dispositivo móvil Android ...................... 89
Figura 101 Seleccionar instalar aplicación desde el menú de google Chrome .................... 90
Figura 102 Notificación de instalación de la PWA ............................................................. 91
Figura 103 Instalación completa de la PWA .......................................................................92
Figura 104 Aplicación Web progresiva (PWA) de la farmacia Nicolás Bolívar.................93

10
Introducción
El presente documento se detalla la información necesaria para el manejo del prototipo de
aplicación web progresiva (PWA), en este manual se menciona las funcionalidades de cada uno
de los módulos, los procesos para un mejor uso.
Objetivo
El objetivo de este documento es que el usuario pueda comprender el funcionamiento de la
aplicación web para su correcto uso.

11
Desarrollo del manual de usuario
Usuario cliente
A continuación, se presenta la pantalla principal que tiene la aplicación web progresiva de
la Farmacia Nicolás Bolívar. Para entrar la aplicación web se lo hace mediante el URL:
https://farmacia-nicolasbolivar.com/FarmaciaBolivar/index.php,
Figura 1
Pantalla principal
Nota: Se presenta la pantalla principal de la aplicación web de la farmacia Nicolás Bolívar.
 En la pantalla principal se podrá visualizar el logo de la farmacia, un menú de
navegación, un pequeño carrusel el cual presenta los productos que se encuentran en
promoción.
 También podrán visualizar los mensajes de presentación y los testimonios de clientes
que realizaron sus compras en la farmacia Nicolás Bolívar.

12
Figura 2
Mensajes de presentación de la farmacia Nicolás Bolívar
Nota: Se presenta los mensajes de bienvenida en la pantalla principal de la aplicación web de la farmacia Nicolás
Bolívar.
Figura 3
Testimonios
Nota: Se presenta los testimonios de usuarios que realizaron sus compras en pantalla principal de la aplicación web
de la farmacia Nicolás Bolívar.
13
Figura 4
Botón para regresar a la parte superior
Nota: Se el botón que se encuentra en la parte inferior derecha, el cual permite regresar a la parte superior de la
aplicación web.
Registro de usuario cliente
A continuación, se presenta el formulario para realizar el registro de usuario clientes.
Figura 5
Registro de usuario cliente
Nota: Se presenta el formulario de registro de usuario.
Pasos para crear el usuario cliente
1. Ingresa un nombre y un apellido

14
2. Ingrese un correo electrónico según el formato establecido
3. Seleccionar el género al que pertenezca
4. El usuario se genera a partir del nombre y la primera inicial del apellido
5. Ingresa la contraseña según el formato establecido, adicionalmente contiene el botón de
visualizar contraseña.
6. Ingrese nuevamente la contraseña para confirmar.
7. Aceptar los términos y condiciones y seleccionar la opción Registrar para crear el usuario.
Al momento de completar el registro, se le mandará la opción de inicio se sesión.
Figura 6
Inicio de sesión del usuario cliente
Nota: Se visualiza la ventana de inicio se sesión del usuario cliente.
Pasos para iniciar sesión a la cuenta del usuario cliente
1. Ingrese el usuario que se le generó en el registro
2. Ingrese su contraseña.
Pasos para reestablecer contraseña
En caso de que se le haya olvidado su contraseña presionar la opción que dice “Olvidó su
Contraseña”, el cual le llevará a la pestaña de recuperar contraseña.

15
Figura 7
Recuperación de contraseña
Nota: Se visualiza la pestaña para agregar el correo electrónico para reestablecer la contraseña.
1. Para recuperar su contraseña debe ingresar su correo electrónico y seleccionar la opción de
recuperar contraseña.
2. Se visualizará un mensaje diciendo que se ha enviado un correo electrónico a su cuenta
Figura 8
Notificación de mensaje
Nota: Se visualiza la notificación que se le ha enviado el mensaje para reestablecer la contraseña al correo
electrónico del usuario
3. Ingrese a su cuenta de correo electrónico para confirmar que si le ha llegado la notificación
para la recuperación de contraseña.

16
Figura 9
Correo electrónico del usuario
Nota: Se visualiza el mensaje para reestablecer la contraseña en el correo electrónico del usuario.
4. Después de abrir el correo electrónico, se debe dar clic donde dice “Cambiar contraseña”.
5. Se le abrirá una ventana para cambiar la contraseña.
6. Ingresar la nueva contraseña.
7. Confirmar la nueva contraseña.

17
Figura 10
Cambiar contraseña
Nota: Se visualiza la ventana para el cambio de contraseña.
8. Después de guardar la nueva contraseña, se le enviará una vez más al inicio de sesión,
donde puede ingresar su usuario y la nueva contraseña para iniciar sesión.
Figura 11
Inicio de sesión de usuario cliente
Nota: Se visualiza la ventana de inicio de sesión del usuario cliente para ingresar con la nueva contraseña.
18
9. Una vez ingresada el usuario y contraseña se mostrará la pantalla principal del usuario
cliente, donde se visualizará lo que hay en el carrito en ese momento.
Figura 12
Ventana del carrito
Nota: Se visualiza la pantalla del total de compras realizadas.
Perfil de usuario cliente
A continuación, se presenta la interfaz del perfil de usuario, donde podemos encontrar el
menú desplegable de inicio, productos, categoría y contacto.

19
Figura 13
Perfil de usuario cliente
Nota: Se visualiza la interfaz del perfil de cliente.
Características de perfil de usuario
 Posee un menú en la interfaz de usuario
 Cuenta con un menú desplegable
 Se visualiza la lista de pedidos
Figura 14
Lista de pedidos
Nota: se visualiza la lista de pedidos.
 Se visualiza la ventana para actualizar datos

20
Figura 15
Actualizar datos de la cuenta del cliente
Nota: Se visualiza la ventana para completar, modificar, actualizar datos del perfil del cliente.
 La opción de subir la imagen del perfil.
 Los datos del usuario como nombre y correo electrónico.
 La opción para cambiar de contraseña.
Inicio
En este interfaz se muestra lo mismo que se encuentra en el inicio cuando se ingresa a la

aplicación web.
21
Figura 16
Interfaz de inicio
Nota: Se visualiza la interfaz de inicio en la cuenta del usuario.
Productos
En esta interfaz se muestra todos los productos que han sido ingresados en el módulo de
productos en la aplicación web. Además, contiene una lista de categoría donde podemos
seleccionar la categoría a la que queramos observar los productos.

22
Figura 17
Interfaz de productos
Nota: Se visualiza la interfaz del módulo de productos del lado del cliente.
Características de la interfaz de productos
 Se visualizan la categoría de productos
 Se visualizan todos los productos que se encuentra en cualquiera de las categorías
seleccionada.
 Se visualizan los precios de los productos.
 Al dar clic en la opción de detalle se abre una ventana para visualizar el detalle del producto.
23
Figura 18
Característica de los productos
Nota: se visualiza las características que tienen un producto.
Pedidos
En esta apartado el cliente realiza sus compras en la aplicación web, a continuación, se detallan
los pasos para realizar un pedido:
Pasos para realizar un pedido
1. Seleccionar la categoría a la que pertenezca el producto que deseamos.
2. Seleccionar el producto deseado.
Figura 19
Producto seleccionado
Nota: Para añadir al carrito se debe pasar el cursor del mouse en el producto que deseamos y luego dar clic en añadir
carrito.
24
3. Elegir la cantidad del producto que se desea comprar.
Figura 20
Tabla de pedidos
Nota: Para seleccionar la cantidad de producto que deseamos se presiona en la flecha para elegir la cantidad que
deseemos.
4. Después de haber seleccionado la cantidad deseada del producto, debe dar clic en
cualquiera de los dos botones que se encuentran ahí, agregar nuevo producto para seguir
eligiendo otro producto o continuar con la compra para finalizar la compra.
5. Al dar clic en agregar nuevo producto, nos lleva a la interfaz de producto para agregar otro
producto más al carrito.

25
Figura 21
Nuevo producto
Nota: Para añadir al carrito se debe pasar el cursor del mouse en el producto que deseamos y luego dar clic en añadir
carrito
.
6. Elegir la cantidad del nuevo producto que se desea comprar.
Figura 22
Tabla de pedidos con el nuevo producto agregado
deseemos.
7. Al momento de dar clic en el botón de “continuar con la compra” nos manda a una ventana
para actualizar o completar los datos de la orden.

26
Figura 23
Datos de la orden
deseemos.
8. Una vez actualizado los datos, damos clic en el botón de “continuar compra”.
9. Se generan los datos del cliente con los datos de la compra, se muéstralo datos personales
del cliente, el número de la orden, el método de pago, el total a cancelar de la compra.
Figura 24
Tabla de pedidos con los datos de la orden
deseemos.
27
10. Al dar clic el botón de “generar orden”, se genera la orden y se presenta en el listado de
pedidos.
Figura 25
Lista de pedidos
Nota: Podemos visualizar la lista de los pedidos que se han realizado.
Una vez generada la orden hay que esperar que el administrador confirme la compra. En la
parte derecha alado de observaciones en el botoncito con interrogante, al dar clic ahí se muestra
en comprobante del pedido realizado.
Este comprobante muestra la fecha en que se generó el pedido, el total a pagar por el pedido,
además, con la opción de imprimir el comprobante del pedido.

28
Figura 26
Comprobante del pedido
Nota: Podemos visualizar el comprobante del pedido.
Figura 27
Imprimir comprobante del pedido
Nota: Podemos visualizar la interfaz para imprimir el comprobante del pedido.

29
Categoría
En este menú desplegable podemos observar las categorías existentes en la aplicación web,
al seleccionar una categoría muestra los productos que contiene dicha categoría.
Figura 28
Categorías de productos
Nota: Podemos visualizar las categorías existentes en la aplicación web.
Contactos
En este apartado se muestra información de la farmacia Nicolás bolívar, como la ubicación
geografía y contacto del propietario. Podemos encontrar:
 Ubicación geográfica del local.
 Dirección del local.
 Numero celular del propietario.
 Correo de la farmacia Nicolás Bolívar.

30
 Redes sociales.
 Apartado para enviar sugerencias y recomendaciones directamente al propietario.
Figura 29
Ubicación geográfica de la farmacia Nicolás Bolívar
Nota: Ubicación geográfica de la farmacia Nicolás Bolívar.

31
Figura 30
Datos para contactar con el propietario de la farmacia
Nota: Datos personales para contactar al propietario de la farmacia Nicolás Bolívar.
Chat en línea
En este apartado se presenta el módulo de chat, donde el usuario cliente puede establecer
una conversación con el usuario administrador que esté disponible en ese momento.
Figura 31
Icono para enviar un mensaje
Nota: Se presenta el icono para enviar un mensaje al administrador de la aplicación web.
Al dar clic en este icono permite abrir una sección para enviar un mensaje al operador, se lo
hace ingresando su nombre, su correo electrónico y el mensaje que desee enviar y por ultimo dar
clic en el botón de “dejar un mensaje” para así poder enviar el mensaje.

32
Figura 32
Ventana para enviar un mensaje a un operador
Nota: Se presenta la ventana para enviar un mensaje al administrador de la aplicación web.
Pasos para iniciar una consulta utilizando el modulo e chat en línea
1. Ingresar al perfil de usuario
2. Dar clic en el icono que se encuentra en la esquina inferior izquierda.

33
Figura 33
Perfil del usuario
Nota: El usuario debe ingresar a su perfil para iniciar la consulta.
3. Luego de dar clic en el icono del chat, se le muestra una pantallita.
4. Debe ingresar su nombre y luego dar clic en el botón de iniciar chat.
Figura 34
Ventana para realizar una consulta con un operador
Nota: Se presenta el icono para iniciar una conversación con el administrador de la aplicación web
5. Luego que le aparezca el mensaje de Farmanic_Bot que menciona que debe seleccionar
una de las dos opciones que presenta, selecciones la que usted desee.
6. Después de elegir la opción, ya puede iniciar la consulta al usuario administrador.

34
Figura 35
chat con el operador
Nota: Se presenta el icono para iniciar una conversación con el administrador de la aplicación web
Al seleccionar el icono que se encuentra en la esquina superior derecha permite abrir el chat
en otra ventana emergente. A continuación, se presenta una posible conversación entre el usuario
cliente y usuario administrador utilizando el módulo de chat en línea de la aplicación web.

35
Figura 36
Conversación utilizando el chat en línea de la aplicación web
Nota: Se presenta un fragmento de conversación entre el cliente y administrador utilizando el chat en línea.
Figura 37
Configuración del chat
Nota: Se presenta las opciones que posee el icono de configuración en el chat en línea.
La opcion de configuaricon cuenta con 5 opciones:
 Silenciar o activar el audio
 Imprimir el chat
 Selector de emoticones
 Enviar un mensaje
 Cerrar el chat
36
Usuario Administrador
A continuación, se presenta la interfaz de lado del administrador. Para ingresar a la interfaz
del usuario administrador, se lo hace mediante la siguiente URL: https://farmacia-
nicolasbolivar.com/FarmaciaBolivar/admin/.
Pasos para ingresar a la interfaz del administrador
1. Abrir la URL antes mencionada, la cual nos llevará al inicio de sesión de lado del
administrador.
2. Ingresar usuario previamente registrado.
3. Ingresar contraseña.
Figura 38
Inicio de sesión en el administrador
Nota: se presenta el inicio de sesión para ingresar al interfaz del administrador
Pasos para reestablecer contraseña
A continuación, se presentan los pasos para reestablecer la contraseña del usuario
administrador.
37
1. Para recuperar su contraseña debe ingresar su correo electrónico y seleccionar la opción de
recuperar contraseña.
2. Se visualizará un mensaje diciendo que se ha enviado un correo electrónico a su cuenta
3. Ingrese a su cuenta de correo electrónico para confirmar que si le ha llegado la notificación
para la recuperación de contraseña.
4. Después de abrir el correo electrónico, se debe dar clic donde dice “Cambiar contraseña”.
5. Se le abrirá una ventana para cambiar la contraseña.
6. Después de guardar la nueva contraseña, se le enviará una vez más a la ventana de inicio
de sesión donde puede ingresar su usuario y la nueva contraseña.
7. Una vez ingresada el usuario y contraseña se mostrará la pantalla principal del usuario
cliente, donde se visualizará el total de las compras realizadas.
Interfaz de usuario de administrador
A continuación, se presenta las características que tienen la interfaz de usuario administrador
en la aplicación web progresiva.

38
Figura 39
Interfaz de Usuario administrador
Nota: Se presenta la interfaz de usuario administrador.
A continuación, se presenta el menú desplegable que se encuentra en la parte superior
derecha donde está el nombre del usuario. Ofrece la opción de visualizar el perfil del usuario y la
opción de cerrar sesión.
Figura 40
Menú de opciones para visualizar el perfil o de cerrar sesión
Nota: Se presenta el menú desplegable para visualizar el perfil del administrador y de cerrar sesión.
En el perfil del usuario administrador se muestra los datos personales del adiestrador, que
son: nombre, usuario y correo electrónico.

39
Figura 41
Perfil del usuario administrador
Nota: Se presenta el menú desplegable para visualizar el perfil del administrador y de cerrar sesión.
También cuenta con la incorporación de cambio de contraseña, esto le permitirá al usuario
administrador cambiar su contraseña dentro del perfil si la necesidad de hacerlo desde el inicio de
sesión.
Figura 42
Cambio de contraseña dentro del perfil de usuario administrador
Nota: Se presenta la incorporación de cambio de contraseña en el perfil de usuario.
Incorporación de Módulos
A continuación, se presenta los módulos con los que cuenta la aplicación web que son: el
módulo de producto, módulo de stock, módulo de promociones, módulo de categorías, módulo de
pedidos módulo de inventario, módulo Seguridad, módulo de reporte, módulo chat, módulo de
auditoría.
40
Figura 43
Módulos
Nota: Se presenta los módulos con los que cuentan la aplicación web de la farmacia Nicolás Bolívar.
Antes de proseguir con los módulos, presentamos el apartado de los datos la empresa los
cuales son importantes ya que aquí se llenan los datos para la elaboración de las facturas que genera
la farmacia Nicolás Bolívar.

41
Figura 44
Datos de la empresa
Nota: Se presenta la información personal de la farmacia Nicolás Bolívar.
En este apartado también cuenta con el botón de medicar datos, esto permite modificar o
actualizar los datos ya existentes.
Figura 45
Modificar datos de la empresa
Nota: Podemos modificar los datos de la farmacia Nicolás Bolívar.

42
Módulo de productos
En esta interfaz el usuario administrador puede ingresar un nuevo producto llenado los
campos que se solicitan:
Pasos para ingresar un nuevo producto
1. Ingresar el nombre del nuevo producto.
2. Ingresar la descripción del producto: presentación, modo de uso y advertencia del
producto.
3. Seleccionar la categoría a la que pertenece el nuevo producto.
4. Una vez que se haya completado los campos dar clic en guardar para que el nuevo
producto sea ingresado.

43
Figura 46
Insertar nuevos productos
Nota: En este apartado se ingresan los nuevos productos al sistema.
Lista de productos
Figura 47
Lista de productos
Nota: En este apartado se presenta la tabla de la lista de productos existente.

44
Los títulos de la tabla cuentan con flechitas las cuales permiten ordenar de manera
ascendente o descendente los productos que se encuentran en el listado.
Figura 48
Títulos de los campos de la tabla producto
Nota: En este apartado se presenta los títulos que contiene la tabla de la lista de producto.
En este apartado se presenta en una tabla el listado de los productos existentes, las cuales
tienen ciertas características que se detallarán a continuación:
 Código. - Posee un único código para cada producto ingresado tiene un único código que
se genera automáticamente.
 Foto del producto. - Se presenta una foto del producto existente.
 Categoría. - Se presenta la categoría a la que pertenece cada producto existente.
 Precio. - Es el valor monetario que tiene el producto.
 Descuento. - Es el descuento que tiene el producto.
 Cantidad. - Es la cantidad existente en el inventario.
 Información. - Presenta la descripción que tienen cada uno de los productos.
 Modificar. – En este apartado el usuario puede modificar las características de cada
producto.
 Estado. - En este apartado el usuario puede seleccionar el estado para activar o desactivar
el producto.
45
Al momento que el usuario da clic en el icono en forma de ojo que se encuentra en la tabla
de la lista de los productos, se abre una pestaña donde podemos visualizar la información del
producto.
Figura 49
Descripción del producto
Nota: En este apartado se presenta la información del producto.
Esta tabla cuenta con la opción de estado, la cual permite cambiar el estado del producto
(Activo o Inactivo).
Figura 50
Estado del producto
Nota: En este apartado se puede cambiar el estado del producto en activo o inactivo. Esta tabla cuenta con la opción
de modificar, esto permite modificar la información que posee el producto.
46
Figura 51
Modifica la descripción del producto
Nota: En este apartado se puede modificar la información del producto.
También cuenta con el botón que permite eliminar un producto seleccionado.
Figura 52
Botón de Eliminar elemento
Nota: Este botón permite eliminar el producto seleccionado.

47
Módulo de stock
En este módulo se realizan los ingresos de los productos al inventario y se los puede
visualizar en una tabla. Esta tabla cuenta con flechitas que permiten ordenar de manera ascendente
y descendente los registros, también un buscador que permite realizar búsqueda de registros por
código, nombre del producto, fecha y hora, y también cuenta con la opción de visualizar el número
de registro que uno desee.
Figura 53
Campos de la tabla de stock de productos
Nota: Se visualizan los títulos que contiene la tabla de stock.
Pasos para ingresar los productos en el inventario
1. Buscar el nombre del producto al que se le quiera realizar un ingreso.
2. Seleccionar la cantidad que desea ingresar.
3. Presionar el botón de guardar para que se realice el ingreso.
4. Una vez guardado se podrá visualizar en la tabla del stock.

48
Figura 54
Ingreso de productos
Nota: En este apartado se pueden ingresar los productos a stock.
Figura 55
Tabla de stock
Nota: Se visualizan los ingresos de productos en el stock
Este módulo también cuenta con la opción de modificar ingreso, esto permitirá corregir algún
error que suele suceder al momento de realizar un ingreso.

49
Figura 56
Actualización del registro del stock
Nota: Permite modificar el registro, por si se ha cometido algún error al ingresarlo.
También cuenta con la opción de eliminar el registro ingresado.
Figura 57
Permite eliminar el registro
Nota: Permite eliminar el ingreso del registro.
Módulo de promociones
En este módulo el administrador puede ingresar los productos que tenga promociones,
descuentos.
Nuevo producto al carrusel
En esta interfaz el usuario administrador ingresa los nuevos productos que se encuentra en
promoción para que se visualicen en el carrusel en la interfaz principal del cliente.

50
Figura 58
Interfaz para agregar un producto al carrusel
Nota: Ventana que permite agregar nuevos productos que están en promociones al carrusel.
Pasos para ingresar un producto al carrusel
1. Ingresar los datos del producto en registro.
2. Seleccionar el color del botón para el carrusel.
3. Seleccionar el estado del producto (activo o inactivo).
4. Seleccionar la imagen según el formato y tamaño establecido.
5. Clic en guardar para que se presente
Lista de carrusel
En esta interfaz se visualizan los productos que fueron agregados al carrusel. Además, viene
incorporado el botón de agregar esto permite para agregar más productos al carrusel, también
incomparado con el botón de editar que ´permite editar el detalle del producto y el botón de
eliminar que permite eliminar los productos del carrusel.

51
Figura 59
Lista de productos en el carrusel
Nota: En esta interfaz se visualizan los productos que se encuentran en el carrusel.
Establecer descuento
En esta interfaz el administrador puede agregar un descuento a los productos.
Figura 60
Lista de productos para realizar descuentos
Nota: En esta interfaz se visualizan los productos que se encuentran en el carrusel .

52
Características de la tabla de descuento
 Los campos que muestran la tabla son:
 Buscador incluido, para realizar las búsquedas de los registros utilizando cualquiera de los
campos de la tabla.
 Fechitas para ordenar los registros de manera ascendente y descendente.
 Viene incluido el selector para visualizar el número de registros que deseen que se
presenten en la tabla.
 En esta bala viene incluido la opción de establecer descuentos
Figura 61
Establecer descuentos de los productos

53
En esta ventana el administrador establece el descuento de los productos seleccionados, el
descuento lo hace ingresando el porcentaje que desee y la fecha vigente del descuento.
 También cuenta con la opción de cambiar el estado del producto, esto permite al
administrador activar o desactivar los descuentos.
 También cuenta con la opción de actualizar el descuento.
Figura 62
Actualizar el descuento del producto
Nota: Permite al administrador actualizar el descuento del producto seleccionado.
Esta ventana permite al administrador, modificar, actualizar la fecha de vigencia de
descuentos de los productos.
Lista de promociones
En esta tabla se presentan el registro de todos los productos que están con descuentos.
54
Figura 63
Lista de productos con descuentos
Características de la tabla de descuento
campos de la tabla.
 Viene agregado la fecha en la que se estableció el descuento y la fecha de vigencia del
descuento.
55
En este módulo se visualizan las categorías existentes en la aplicación web, también tienen
incluido el botón de agregar esto permite ingresar las nuevas categorías al listado de la tabla.
Además, viene incluido la opción de modificar esto permite modificar el nombre de la categoría
seleccionada, y la opción de estado, esto permite cambiarle el estado de activo o inactivo a la
categoría seleccionada.
Figura 64
Nota: Permite visualizar las categorías existentes en la aplicación web.
Figura 65
Modificar nombre
Nota: Permite actualizar o modificar el nombre de la categoría seleccionada.

56
Módulo de pedidos
En este módulo se administrador tendrá acceso al listado de los pedidos realizados por los
clientes y datos del mismo, donde podrá buscar los pedidos por número de orden o nombre del
cliente y también tendrá la opción de confirmar o cancelar los pedidos.
Figura 66
Listados de pedidos
En esta tabla el administrador puede seleccionar el número de la orden para visualizar los
datos de esa orden.

57
Figura 67
Datos de la orden
Nota: permite visualizar los datos de la orden seleccionada.
En esta tabla el administrador da clic en el nombre del usuario y presenta los datos del cliente.
Figura 68
Datos del cliente
Nota: Permite visualizar los datos del cliente.
En esta tabla el administrador pude descargar la factura en formato PDF.

58
Figura 69
Títulos de los campos
Módulo de inventarios
En este módulo se presenta el inventario de ingresos y egresos que maneja la farmacia
Nicolás Bolívar. En este módulo encontramos lo siguiente:
Figura 70
Módulo de Inventario
Nota: Se presenta las secciones que tienen el módulo de inventario.

59
Lista de ingreso de inventario
En esta interfaz se visualiza todos los movimientos de ingresos que se han realizado en el
módulo de stock. Se presentan la cantidad ingresada, stock y disponible de los productos.
Figura 71
Ingresos de inventario
Nota: Se presenta en una tabla los movimientos que se han realizado en el módulo de stock .
Características de la tabla de ingresos de inventario
campos de la tabla.
60
Egresos de Inventarios
En esta interfaz se visualiza todas las compras realizadas por los clientes. Se presentan las
facturas de las compras.
Figura 72
Egresos de inventarios
Nota: Se presenta en una tabla los movimientos que se han realizado en el módulo de stock.
Características de la tabla de egresos de inventario
campos de la tabla.
 Viene incluido el número de comprobante.

61
 Viene incluido la opción de descarga de la factura en formato PDF.
La información de la factura que se presenta está basada en los datos de la empresa, y los
datos de los clientes que han realizado la compra respectiva, cada factura tiene un único código.
Figura 73
Factura de compra
Nota: La factura es generada al comprar producto en la farmacia Nicolás Bolívar.

62
Características de una factura
 Información de la empresa.
 Código único de la factura.
 Fecha de autorización de la factura.
 Clave única de acceso.
 Rezón social o nombre del cliente.
 Información personal de cliente.
 Detalle del producto comprado.
 Valor total apagar.
Inventario de producto
En este inventario se muestran la cantidad de productos que se han vendido. Se muestran el
código único de cada producto, el nombre del producto, la cantidad ingresada por stock, la cantidad
vendida y la cantidad disponible de cada producto. Además, viene incorporado con un buscador
para realizar búsqueda por códigos, nombres, tienen incorporado unas flechitas en los títulos para
ordenar de manera ascendente y descendente.

63
Figura 74
Inventario - producto
Nota: En el inventario se muestran la cantidad de producto que se han vendido.
Módulo de seguridad
En este módulo los usuarios administradores pueden llevar un control de los demás usuarios,
dando privilegio a nuevos usuarios para controlar las funciones críticas de seguridad.
Figura 75
Títulos de los campos
Nota: En el módulo de reportera presentamos reportes más importantes para la farmacia Nicolás Bolívar.
64
Usuario administrador
En este apartado el administrador puede visualizar en una tabla el listado de los usuarios que
se le han dado un rol de administrador en la aplicación web. El administrador puede activar o
desactivar las cuentas de los otros usuarios, además tiene la opción de desbloquear las cuentas de
usuarias que han sido bloqueadas por motivo de ingresar más de 3 veces la contraseña incorrecta.
Figura 76
Usuarios administrador
El administrador de la aplicación web puede agregar a nuevos usuarios dando el rol de
administrador.
Pasos para agregar un usuario administrador
1. Agregar nombre completo.
2. Agregar usuario.
3. Ingresar correo electrónico según el formato establecido.
4. Ingrese contraseña según el formato permitido.

65
5. Vuelva ingresar la contraseña para confirmar.
6. Agregar el rol administrativo.
7. Dar clic en el botón guardar para crear el usuario.
Figura 77
Agregar nuevos usuarios administradores
Nota: El administrador puede agregar nuevos usuarios administradores.
El administrador puede actualizar los datos de los otros usuarios que tienen permisos para
serlo.
66
Figura 78
Actualización de datos de usuarios
Nota: el administrador puede actualizar los datos de otros usuarios administradores.
Usuario cliente
En este apartado el administrador puede visualizar en una tabla el listado de las personas que han
creado su usuario en la aplicación web. El administrador puede activar o desactivar las cuentas
de los usuarios, además tiene la opción de desbloquear las cuentas de usuarias que han sido
bloqueadas por motivo de ingresar más de 3 veces la contraseña incorrecta.
Características de usuarios clientes
 Muestra los reportes de los pedidos que se han realizado en un periodo de tiempo
determinado.
 En las tablas viene incluida la opción de descargar los registros en archivos de formato
PDF y XLSX.
67
campos de la tabla.
 Viene incluido el botón de regresar
Figura 79
Usuarios clientes
Nota: Lista de los usuarios registrados en la aplicación web.
Los pasos para crear un nuevo usuario cliente desde el módulo de seguridad.
1. Ingresar cedula ciudadana.
2. Ingresa un nombre y un apellido.
3. Ingrese un correo electrónico según el formato establecido.
4. El usuario se genera a partir del nombre y la primera inicial del apellido.
5. Ingresar número telefónico (celular).
6. Ingresar dirección domiciliaria.

68
7. Ingresar referencia domiciliaria.
8. Seleccionar el género al que pertenece.
9. Ingresa la contraseña según el formato establecido, adicionalmente contiene el botón de
visualizar contraseña.
10. Ingrese nuevamente la contraseña para confirmar.
11. Dar clic en el botón de registrar para que el usuario sea registrado.
Figura 80
Nuevo usuario
Nota: El administrador puede crear usuarios clientes desde el módulo de seguridad.
En este apartado el usuario administrador puede actualizar los datos de los usuarios clientes
dentro del módulo de seguridad.

69
Figura 81
Actualizar datos de cliente
Nota: En esta opción el administrador puede actualizar los datos personales de los usuarios.
Módulo de reporte
En este módulo se presenta los dashboard más importante para la farmacia Nicolás Bolívar.
Entre ellos tenemos las secciones de estadísticas, reporte de los pedidos realizados por los clientes
y el reporte de ingresos y reporte de egresos.
Figura 82
Módulo de reportería
70
Estadísticas
En este apartado se visualizan los reportes por categorías, ventas totales, total de productos
por categoría, total de usuarios registrados.
Figura 83
Estadísticas
Nota: Se presentan los reportes más importantes para la farmacia Nicolás Bolívar.
Reporte por categoría
En este apartado se visualiza el detalle del dashboard de las categorías de productos que
posee la aplicación web.

71
Figura 84
Reporte de categorías por stock
Nota: Permite visualizar el reporte de disponibilidad de productos en categoría por stock.

72
Reporte total de ventas
En este apartado se muestra el reporte del total de las ventas que se han realizado a lo largo
de cada. Se lo visualiza en una gráfica de barras.
Figura 85
Reporte – Total de ventas
Nota: Permite visualizar el total de las ventas que se han realizado por mes.
Reporte total productos
En este apartado se muestra el reporte del total de productos por categoría, se lo visualiza
mediante una gráfica de pastel la categoría que posee más productos entre ellas.
73
Figura 86
Reporte – Total productos
Nota: Permite visualizar que categoría posee más productos.
Reporte total usuario
En este apartado se visualiza el total de usuarios registrados en la aplicación web a lo largo
de cada mes. Se lo visualiza en una gráfica de pastel.

74
Figura 87
Reporte – Total usuario
Nota: Permite visualizar el reporte de total usuarios registrados.
Reporte total de stock
En este apartado se visualiza el total de productos que se encuentran disponibles.

75
Figura 88
Reporte – Total stock
Nota: Se visualiza el total de productos de disponibles de las categorías.
Reportes de ventas
En este apartado se muestran los reportes de pedidos que se han realizado en un periodo de
tiempo determinado. En esta tabla se visualizan todos los pedidos realizados por los clientes en un
periodo de tiempo determinado.

76
Características del reporte de pedidos
 Muestra los reportes de los pedidos que se han realizado en un periodo de tiempo
determinado.
PDF y XLSX.
campos de la tabla.
Pasos para visualizar el reporte de pedidos.
1. Ingresar el periodo de tiempo para visualizar el reporte de los pedios (desde fecha de inicio
– hasta fecha final).
2. Dar clic en el botón de búsqueda para visualizar en la tabla el reporte.
3. El reporte se lo puede descargar en archivos formato PDF y XLSX.

77
Figura 89
Reporte de pedidos
Nota: Permite visualizar el reporte de los pedidos en una tabla.
Reporte de ingreso de productos
En esta sección se presenta el reporte de los ingresos de productos, donde se pueden
visualizar los reportes de un periodo de tiempo determinado donde se muestra los ingresos
realizados. En la parte final de la tabla se muestra la suma total del periodo seleccionado.
Características del reporte de egresos
 Muestra los reportes de los ingresos que se han realizado en un periodo de tiempo
determinado.
 Al final de la tabla en el lado inferior derecho se muestra la suma total del periodo
seleccionado.
78
PDF y XLSX.
campos de la tabla.
Pasos para visualizar el reporte de ingresos de productos.
1. Ingresar el periodo de tiempo para visualizar el reporte de los ingresos (desde fecha de
inicio – hasta fecha final).
3. El reporte se lo puede descargar en archivos formato PDF y XLSX.

79
Figura 90
Reporte de ingresos de productos
Nota: Permite visualizar el reporte del stock en una tabla.
Reporte de egresos de productos
En esta sección se presenta el reporte de los egresos de productos, donde se pueden visualizar
los reportes de un periodo de tiempo determinado donde se muestra los egresos que se han
realizado en la aplicación web. En la parte inferior derecha de la tabla se muestra la suma total del
periodo seleccionado.
Características del reporte de egresos
 Muestra los reportes de los egresos que se han realizado en un periodo de tiempo
determinado.
80
 Al final de la tabla en el lado inferior derecho se muestra la suma total del periodo
seleccionado.
PDF y XLSX.
campos de la tabla.
Pasos para visualizar el reporte de ingresos de productos.
1. Ingresar el periodo de tiempo para visualizar el reporte de los egresos (desde fecha de inicio
– hasta fecha final).
3. El reporte se lo puede descargar en archivos formato pdf y xlsx.

81
Figura 91
Reporte de egresos de productos
Nota: Permite visualizar el reporte de los egresos según el periodo de tiempo seleccionado.
Módulo de chat
En este módulo se establecen la interacción entre el usuario cliente y el administrador,
donde el administrador recibe las consultas que el usuario cliente desea realizar.
82
Figura 92
Módulo de chat
Nota: En este módulo de chat el cliente realiza las consultas que desee al administrador.
Módulo de auditoria
En este módulo se presenta la información en una tabla la lista de los registros tanto del
usuario administrador y usuario cliente. Los campos que se presentan son nombre completo del
usuario, usuario, la dirección IP del equipo donde se inició la sesión, el evento que se realizó en
este caso solo el inicio de sesión, el detalle del agente de usuario del explorador, fecha y hora del
momento que inicio sesión.
Características
 Muestra las informaciones de los usuarios tanto administrador como clientes cuando
inician sesión.
PDF y XLSX
83
campos de la tabla.
 Fechitas para mostrar el número de registros que deseen visualizar en la interfaz.
Figura 93
Módulo de auditoría de lado del administrador
Nota: Se visualiza el módulo de auditoria en la sección de administrador.

84
Figura 94
Módulo de auditoría de lado del usuario
Nota: Se visualiza el módulo de auditoria en la sección de usuarios.

85
Instalación de la aplicación web progresiva (PWA)
Pasos para instalar la aplicación web progresiva de la farmacia Nicolás Bolívar en el
ordenador.
1. Ingresar a la aplicación web en el ordenador utilizando la URL: https://farmacia-
nicolasbolivar.com/FarmaciaBolivar/
Figura 95
Ingreso a la aplicación web desde el ordenador
Nota: Por medio de la URL ingresamos a la aplicación web desde el ordenador.
2. Dar clic izquierdo en el menú de Google Chrome y seleccionar la opción instalar farmacia
Nicolás Bolívar.
86
Figura 96
Seleccionar instalar farmacia Nicolás
Nota: Se selecciona la opción para instalar la PWA de la farmacia Nicolás Bolívar.
3. Una vez que se haya seleccionado la opción de instalar farmacia Nicolás Bolívar le
aparecerá una notificación preguntando si ¿Quieres instalar la aplicación?, se seleccionará
la opción instalar
87
Figura 97
Instalación de la PWA
Nota: Se selecciona la instalar para que se instale la PWA en el ordenador.
4. Se espera unos segundos para que se termine de instalar, luego de que se instale se creará
un acceso directo de la PWA en el escritorio.
Figura 98
Instalación completa de la PWA
Nota: Una vez instalada la PWA se genera un acceso directo de la PWA .

88
5. Dar doble clic izquierdo en el acceso directo de la PWA para abrirla.
Figura 99
Aplicación Web progresiva (PWA) de la farmacia Nicolás Bolívar
Nota: Se presenta a aplicación web progresiva (PWA) de la farmacia Nicolás Bolívar.

89
Pasos para instalar la aplicación web progresiva de la farmacia Nicolás Bolívar en un
dispositivo móvil Android.
1. Ingresar a la aplicación web en el dispositivo móvil Android utilizando la
URL:https://farmacia-nicolasbolivar.com/FarmaciaBolivar/
Figura 100
Ingreso a la aplicación web desde el dispositivo móvil Android
Nota: Por medio de la URL ingresamos a la aplicación web desde el dispositivo móvil Android.
90
2. Dar clic izquierdo en el menú de Google Chrome y seleccionar la opción instalar
aplicación.
Figura 101
Seleccionar instalar aplicación desde el menú de google Chrome
Nota: Se selecciona la opción para instalar aplicación.
3. Una vez que se haya seleccionado la opción de instalar aplicación aparecerá una
notificación para instalar la aplicación en el dispositivo móvil Android, se seleccionará la
opción instalar.
91
Figura 102
Notificación de instalación de la PWA
Nota: Se selecciona instalar para que se instale la PWA en el dispositivo móvil Android.
4. Se espera unos segundos para que se termine de instalar, luego de que se instale se creará
el acceso de la PWA en el dispositivo móvil Android.

92
Figura 103
Instalación completa de la PWA
Nota: Una vez instalada la PWA se genera un acceso de la PWA en la pantalla del dispositivo móvil Android.
6. Seleccionar el icono de la PWA que se encuentra en el dispositivo móvil Android para abrir
la aplicación web.
93
Figura 104
Aplicación Web progresiva (PWA) de la farmacia Nicolás Bolívar
Nota: Se presenta a aplicación web progresiva (PWA) de la farmacia Nicolás Bolívar en el dispositivo Android.

B-CISC-PTG-1966-2021 Mero Albarracin Diego Cristoffer - Quinde Briones Gilson Steeven

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

B-CISC-PTG-1966-2021 Mero Albarracin Diego Cristoffer - Quinde Briones Gilson Steeven

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

DESARROLLO DE UN PROTOTIPO DE APLICACIÓN WEB PROGRESIVA (PWA)

PARA MEJORAR EL PROCESO DE GESTIÓN DE VENTAS EN LA FARMACIA

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

INGENIERO EN SISTEMAS COMPUTACIONALES

REPOSITORIO NACIONAL EN CIENCIAS Y TECNOLOGÍAS

FICHA DE REGISTRO DE TRABAJO DE TITULACIÓN

APROBACIÓN DEL TUTOR

En mi calidad de Tutora del Trabajo de Titulación, “DESARROLLO DE UN PROTOTIPO

DE APLICACIÓN WEB PROGRESIVA (PWA) PARA MEJORAR EL PROCESO DE

GESTIÓN DE VENTAS EN LA FARMACIA NICOLÁS BOLÍVAR” elaborado por el Sr.

MERO ALBARRACIN DIEGO CRISTOFFER y el Sr QUINDE BRIONES GILSON

STEVEN, 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

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

Ing. Ángela Olivia Yanza Montalván Mgp.

Dedico este trabajo de Titulación

primeramente a Dios, especialmente a mis

padres, amigos, y a todas aquellas

personas que me brindaron su apoyo

incondicional en este interesante recorrido

de mi carrera universitaria, para todos ellos

mi respeto, amor y cariño.

Diego Cristoffer Mero Albarracin

Este proyecto va dedicado a mis padres

que me han brindado su apoyo

incondicional a lo largo de toda mi carrera

universitaria, pero sobre todo a Dios por

brindarme la salud y las fuerzas para no

desmayar en las adversidades.

Gilson Steeven Quinde Briones

Mi agradecimiento a Dios, por brindarme

vida y salud, a mi mamá la Sra. Mirella

Albarracin por ser el pilar fundamental en

mi vida, brindándome su amor, su valioso

tiempo y todo su apoyo incondicional te

amo mamá. A mis amigos, docentes por

brindarme su ayuda en todo momento

para obtener este logro, por este motivo a

todos. ¡Muchas gracias!

Diego Cristoffer Mero Albarracin

Agradezco principalmente a Dios por

brindarme la salud y guiarme por el buen

camino, a mi padre a y mi madre por su

comprensión, buenos consejos y apoyo

incondicional, a mis amigos y docentes y

a cada una de las personas que me brindó

su ayuda para culminar este proyecto.

Gilson Steeven Quinde Briones

TRIBUNAL PROYECTO DE TITULACIÓN

Ab. Juan Chávez Atocha, Esp.

“La responsabilidad del contenido de este Proyecto de

Titulación, me corresponden exclusivamente; y el patrimonio

intelectual de la misma a la UNIVERSIDAD DE

DIEGO CRISTOFFER MERO ALBARRACIN

GILSON STEEVEN QUINDE BRIONES

CESIÓN DE DERECHOS DE AUTOR

Ing. Douglas Itúrburu Salvador, M.Sc.

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

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

PROTOTIPO DE APLICACIÓN WEB PROGRESIVA (PWA) PARA MEJORAR EL

PROCESO DE GESTIÓN DE VENTAS EN LA FARMACIA NICOLÁS BOLÍVAR”,

Computacionales de la Universidad de Guayaquil.