universidad de guayaquil facultad de ingenierÍa...

UNIVERSIDAD DE GUAYAQUIL FACULTAD DE INGENIERÍA INDUSTRIAL

DEPARTAMENTO ACADÉMICO DE TITULACIÓN

TRABAJO DE TITULACIÓN PREVIO A LA OBTENCIÓN DEL TÍTULO DE

LICENCIADO EN SISTEMAS DE INFORMACIÓN

ÁREA DESARROLLO DE SOFTWARE

TEMA “DESARROLLO DE UNA APLICACIÓN HIBRIDA

PARA SMARTPHONE EN EL MÓDULO DE VENTA DE ACCESORIOS DE SEGURIDAD INDUSTRIALES

LA EMPRESA SUINDEC”

AUTOR MOREIRA FREIRE LUIS LIVINSTON

DIRECTOR DEL TRABAJO ING.SIST. HERNÁNDEZ POVEDA JOSÉ GERMÁN, MGS.

2018 GUAYAQUIL-ECUADOR

ii

DECLARACIÓN DE AUTORÍA

“La responsabilidad del contenido de este Trabajo de Titulación, me

corresponde exclusivamente; y el patrimonio intelectual del mismo a la

Facultad de Ingeniería de la Universidad de Guayaquil.”

MOREIRA FREIRE LUIS LIVINSTON

C.C. 0918904426

iii

DEDICATORIA

Agradezco a Dios, por estar siempre junto a mí, por darme el

mayor de los regalos Mi Familia y su infinito amor.

A mis padres, Esposa e hijos, por velar por mí, guiar mis pasos y

enseñarme que no se puede obtener lo anhelado sino se lucha por

alcanzarlo.

A los maestros del LSI quienes me dieron la Formación Profesional

y despejaron mis dudas, por los valores impartidos y lecciones de vida

que solo los sabios suelen dar, ala Ing. Tanya Ruano por hacer de la

Licenciatura Sistema nuestra mayor pasión, a mi Director de Carrera, Ing.

José Caicedo por su amistad, paciencia y apoyo incondicional, al Ing.

José Hernández por ser mi Guía en el desarrollo de este Tesis; a mis

amigos.

iv

AGRADECIMIENTO

A Mis Padres.

A Mi Esposa.

A Mis Hijos.

A Mi Familia.

v

ÍNDICE GENERAL

Nº Descripción Pág.

PRÓLOGO

INTRODUCCIÓN

1

2

CAPÍTULO I

MARCO TEÓRICO


1.1. Estado del Arte 6

1.2. Comparación entre Android Estudio y Ionic 8

1.2.1. Android Estudio 8

1.2.2. Ionic 9

1.2.2.1 El uso de la Tecnología Córdova 9

1.2.2.2. Componentes Básicos 10

1.2.3. React Native 11

1.2.4. Que es Chocolatey 12

1.3. Data Binding 14

1.4. Inyección de Dependencias 15

1.5. Directivas 15

1.6. La Tecnología Node JS 19

1.7. Comparación de Base de Datos 22

1.7.1. Arquitectura Postgres 22

1.8. Arquitectura del Sistema 24

1.8.1. Dos Capas 24

1.8.2. Tres Capas 24

1.9. Tipos de Investigaciones 25

1.10. Investigación Exploratoria 25

vi


1.11. Investigación Descriptiva 25

1.12. Investigación Cualitativa 25

1.13. Investigación Cuantitativa 26

1.14. Tipos de Metodología de Desarrollo 26

1.14.1 Metodología Iconix 27

CAPÍTULO II

METODOLOGÍA


2.1. Metodologías, Análisis e Introducción 29

2.2. Metodología A Usar 29

2.2.1. Técnicas de Recolección de Datos 30

2.2.1.1. Técnica de Observación 30

2.2.1.2. Técnica de la Entrevista 30

2.2.1.3. Técnica de Encuesta 31

2.2.1.3.1. Población 31

2.2.1.3.2. Muestra 31

2.2.1.3.3. Encuesta 33

2.2.1.3.4. Desarrollo 34

2.2.1.3.4.1. Análisis Documental 35

2.3. Diagrama de Ishikawa 43

2.4. Requerimientos Funcionales 44

2.4.1. Requerimientos No Funcionales 46

2.5. Caso de Uso 46

2.5.1. Definición de Actores de Casos de Uso 46

2.5.2. Diagrama De Casos De Uso 47

2.5.2.1. Caso de Uso Contexto 47

2.5.2.2. Caso de Uso Compra de Producto 48

2.5.2.3. Caso de Uso Visualizar Producto 49

2.5.2.4. Caso de Uso Orden de Despacho 49

vii


2.5.2.5. Caso de Uso Notificación de Pedido Venta 50

2.5.2.6. Caso de Uso Mantenimiento de Producto 50

2.5.2.7. Caso de Uso Notificación Pedido Cliente 51

2.5.3. Descripción De Casos De Uso 52

2.5.3.1. Descripción De Caso De Uso Login 52

2.5.3.2. Descripción de Caso de Comprar de Producto 53

2.5.3.3. Descripción de Caso de Vizualizar Producto 53

2.5.3.4. Descripción de Caso de Orden de Despacho 54

2.6. Modelamiento de Dominio 55

CAPÍTULO III

PROPUESTA


3.1.1. Tema 56

3.1.2. Objetivo 56

3.1.3.

Estudio de Factibilidad Operativa, Tecnológica y

Económica

3.1.3.1. Factibilidad Operativa 56

3.1.3.2. Factibilidad Tecnológica 57

3.1.3.3. Factibilidad Económica 58

3.1.4. Entorno de Software 58

3.2. Fase de Diseño 59

3.2.1. Modelo Entidad – Relación 59

3.2.2. Diagrama de Actividades 60

3.2.2.1.1. Diagrama de Actividad Ingreso al Sistema 60

3.2.2.1.2. Diagrama de Actividad de Pedido 61

3.2.2.1.3. Diagrama de Actividad Contacto 62

3.2.2.1.4. Diagrama de Actividad Despacho 63

3.2.3. Descripción del Diccionario de las Tablas 64

3.2.3.1. Descripción de la Tabla de Contacto 64

viii


3.2.3.2. Descripción de la Tabla de Detalle Pedido 65

3.2.3.3. Descripción de la Tabla de Detalle Despacho 66

3.2.3.4. Descripción de la Tabla de Orden de Despacho 67

3.2.3.5. Descripción de la Tabla de Login 68

3.2.3.6. Descripción de la Tabla de Pedidos 69

3.2.3.7. Descripción de la Tabla de Productos 70

3.2.3.8. Descripción de la Tabla de Usuario 71

3.2.4 Diagramas de Diseño Robustez 72

3.2.4.1.1. Diagrama de Robustez de Login 72

3.2.4.1.2. Diagrama de Robustez de Agregar Contacto 72

3.2.4.1.3. Diagrama de Robustez de Modificar Contacto 73

3.2.4.1.4. Diagrama de Robustez de Eliminar Contacto 73

3.2.4.1.5.

Diagrama de Robustez de Agregar Orden de

Despacho

74

3.2.4.1.6.

Diagrama de Robustez de Modificar Orden de

Despacho

74

3.2.4.1.7.

Diagrama de Robustez de Eliminar Orden de

Despacho

75

3.2.4.1.8. Diagrama de Robustez de Agregar Pedido 75

3.2.4.1.9. Diagrama de Robustez de Modificar Pedido 76

3.2.4.1.10. Diagrama de Robustez de Eliminar Pedido 76

3.2.5. Diagramas de Secuencia 77

3.2.5.1.1. Diagrama de Secuencia Login 77

3.2.5.1.2. Diagrama de Secuencia Contacto 77

3.2.5.1.3. Diagrama de Secuencia Pedido 78

3.2.5.1.4. Diagrama de Secuencia Orden de Despacho 78

3.2.6. Descripción Prototipo 79

3.2.6.1. Pantalla Inicio de Sesión y sus Controladores 79

3.2.6.2. Pantalla Registro y sus Controladores 80

3.2.6.3.

Pantalla Característica Producto y sus

Controladores

81

ix


3.2.6.4. Pantalla Producto y sus Controladores 82



3.2.6.7. Pantalla Detalle de Orden de Compra 85

3.2.7. Manual de Instalación 86

3.2.8. Diagrama de Conexión 87

3.2.9. Conclusiones 87

3.2.10. Recomendaciones 88

GLOSARIO DE TÈRMINOS

ANEXOS

BIBLIOGRAFÍA

89

94

104

x

ÍNDICE DE CUADROS


1 Comparación de Framework 13

2 Comparación entre Gestores de Base de Datos 21

3 Comparación de Metodología de Desarrollo 26

4 Tareas de Iconix 27

5 Pedidos Por Vía Telefónica (Convencional) 36

6 Uso más Frecuente de Dispositivos Tecnológico 38

7 Uso más frecuente de Internet Dispositivos Móvil 38

8 Uso Móvil Realizar Pedido Mediante Aplicación 39

9 Visor de Producto 40

10 Registró como Cliente de Suindec 41

11 Facturación al Cliente 43

12 Requerimientos Funcionales 44

13 Requerimientos No Funcionales 46

14 Lista de Roles 46

15 Descripción De Caso De Uso Login 52

16 Descripción de Caso de Comprar de Producto 53

17 Descripción de Caso de Vizualizar Producto 53

18 Descripción de Caso de Orden de Despacho 54

19 Recursos Tecnológicos 57

20 Costo en Personal Estimado 58

21 Costo en Personal Real 58

22 Tabla de Contacto 64

23 Tabla de Detalle Pedido 65

24 Tabla de Detalle Factura 66

25 Tabla de Orden de Despacho 67

26 Tabla de Login 68

xi


27 Tabla de Pedidos 69

28 Tabla de Productos 70

29 Tabla de Usuario 71

30 Pantalla Inicio de Sesión 79

31 Pantalla Registro 80

32 Pantalla Característica Producto 81

33 Pantalla Producto 82



36 Pantalla Detalle de Orden de Compra 85

37 Manual de Instalación 86

xii

ÍNDICE DE GRÀFICOS


1 Pedidos por Vía Telefónica (Convencional) 37

2 Uso más Frecuente de Dispositivos Tecnológico 38

3 Uso más frecuente de Internet Dispositivos Móvil 39

4 Uso Móvil Realizar Pedido Mediante Aplicación 40

5 Visor de Producto 41

6 Registró como Cliente de Suindec 42

7 Facturación al Cliente 43

xiii

ÍNDICE DE DIAGRAMAS


1 Diseño del Rest en Aplicaciones Web y Sistema 17

2 Estilos de Arquitectura de Rest I 18

3 Estilos de Arquitectura de Rest II 18

4 Estilos de Arquitectura de Rest III 19

5 Diagrama de Ishikawa 43

6 Caso de Uso Contexto 47

7 Caso de Uso Login 48

8 Caso de Uso Compra de Producto 48

9 Caso de Uso Visualizar Producto 49

10 Caso de Uso Orden de Despacho 49

11 Caso de Uso Notificación de Pedido Venta 50

12 Caso de Uso Mantenimiento de Producto 50

13 Caso de Uso Notificación Pedido Cliente 51

14 Modelo de Dominio 55

15 Diagrama Modelado de Datos 59

16 Diagrama de Actividad de Ingreso al Sistema 60

17 Diagrama de Pedido 61

18 Diagrama de Actividad Contacto 62

19 Diagrama de Actividad Despacho 63

20 Diagrama de Robustez de Login 72

21 Diagrama de Robustez de Agregar Contacto 72

22 Diagrama de Robustez de Modificar Contacto 73

23 Diagrama de Robustez de Eliminar Contacto 73

24 Diagrama de Robustez de Agregar Orden de Despacho 74

25 Diagrama de Robustez de Modificar Orden de Despacho 74

26 Diagrama de Robustez de Eliminar Orden de Despacho 75

xiv


27 Diagrama de Robustez de Agregar Pedido 75

28 Diagrama de Robustez de Modificar Pedido 76

29 Diagrama de Robustez de Eliminar Pedido 76

30 Diagramas de Secuencia 77

31 Diagrama de Secuencia Login 77

32 Diagrama de Secuencia Contacto 77

33 Diagrama de Secuencia Pedido 78

34 Diagrama de Secuencia Orden de Despacho 78

35 Diagrama de Conexión 87

xv

ÍNDICE DE ANEXOS


1 Cronograma 95

2 Formato De Encuesta 96

3 Manual de Usuario 97

4 Carta de Implementación del Sistema 103

xvi

AUTOR: MOREIRA FREIRE LUIS LIVINSTON TEMA: “DESARROLLO DE UNA APLICACIÓN HIBRIDA PARA

SMARTPHONE EN EL MÓDULO DE VENTA DE ACCESORIOS DE SEGURIDAD INDUSTRIAL EN LA EMPRESA SUINDEC”

DIRECTOR: ING. SIST. HERNÁNDEZ POVEDA JOSÉ GERMÁN, MGS.

RESUMEN El presente proyecto trata sobre el DESARROLLO DE UNA APLICACIÓN HIBRIDA PARA SMARTPHONE EN EL MÓDULO DE VENTA DE ACCESORIOS DE SEGURIDAD INDUSTRIAL EN LA EMPRESA SUINDEC. Con el propósito de mejorar la eficiencia de la empresa mediante una aplicación móvil, donde se almacena en la base de datos los pedidos receptados por los clientes, que previamente han sido seleccionados del listado de precios encontrados en la misma aplicación. La aplicación móvil está basada en React Native que es un framework desarrollado por Facebook que permite desarrollar apps nativas iOS y Android usando Javascript, sin Objective-C o Java de por medio. React Native lleva como un “puente” donde su función es la de traducir el código React Native en Objective-C, para el caso de iOS, y Java en Android. La sintaxis de React Native es bastante clara y sencilla, además de heredar el mismo diseño que React, aportando flexibilidad y reaprovechamiento en el código. Faltaría añadir por último que el código fuente que desarrollemos, en nuestra primera app, será un 100% compartido con iOS y Android. La aplicación móvil le ayudará a la empresa a ser más competitivo en el mercado por brindar comodidad a los clientes, donde con un clic pueden realizar sus pedidos, para luego poder descargar la factura electrónica desde la aplicación registrada en la base de datos Postgres, posteriormente el pedido llegará al comprador una vez sea cancelado el mismo en la cuenta bancaria de la empresa. PALABRAS CLAVES: Base, Datos, Recepción, Pedidos, Modelamiento,

Modulo, Venta, Aplicación, Móvil. Moreira Freire Luis Livinston Ing. Sist. Hernández Poveda José Germán, MGS. C.C. 0918904426 Director del Trabajo

xvii

AUTHOR: MOREIRA FREIRE LUÌS LIVINSTON SUBJECT: “DEVELOPMENT OF A SMARTPHONE HYBRID

APPLICATION IN THE MODULE OF SALES OF INDUSTRIAL SAFETY ACCESSORIES IN SUINDEC”

DIRECTOR: SYST. ENG. HERNÁNDEZ POVEDA JOSÉ GERMÁN, MGS.

ABSTRACT This project is about the DEVELOPMENT OF A SMARTPHONE HYBRID APPLICATION IN THE MODULE OF SALES OF INDUSTRIAL SAFETY ACCESSORIES IN SUINDEC. With the purpose of improving the efficiency of the company through a mobile application, where the orders are received by customers and stored in the database, which have been selected from the prices found in the same application. The mobile application is based on React Native, which is a framework developed by Facebook that allows developing native applications iOS and Android using Javascript, without C-Objective or Java. React Native takes as a "bridge" where its function is to translate the code React Native in Objective-C, for the case of iOS, and Java on Android. The syntax of React Nativo is quite clear and simple, in addition to inheriting the same design as React, providing flexibility and reuse in the code. Finally it is important to add that the source code that we develop, in our first application, will be 100% shared with iOS and Android. The mobile application helps the company to be more competitive in the market by providing convenience to customers, where with a click you can place your orders, then download the electronic invoice from the application registered in the Postgres database, later The order arrived to the buyer once would be canceled the same in the bank account of the company. KEY WORDS: Database, Order, Receipt, Modeling, Sales, Module,

Mobile, Application. Moreira Freire Luis Livinston Syst. Eng. Hernández Poveda José Germán, Mgs. I.D. 0918904426 Director of Work

PRÓLOGO

El proyecto tiene como título Desarrollo de una aplicación hibrida

para Smartphone en el módulo de venta de accesorios de seguridad

industrial en la empresa SUINDEC, es la necesidad del proceso de

atención de despacho al cliente en cual se agilizar el módulo de la

empresa en cual se publicar nuevos productos al mercado.

El propósito del sistema es automatiza los procesos actuales desde

el ingreso de la petición del cliente en cual se elabora el pedido a y la

atención al cliente dando un reporte, mediante la metodología Iconix para

el diseño y análisis de la aplicación móvil.

El Proyecto está dividido en 3 Capítulos:

Capítulo 1: Elaboración del Marco Teórico, se investiga, comparan

u analizan herramientas que se podrán utilizar.

Capítulo 2: Levantamiento de la información y requerimientos

utilizando técnica cualitativa, elaboración de diagramas.

Capítulo 3: La propuesta de la investigación en la que se detallan

los procesos que dan solución a lo planteado. Incluyendo la conclusión y

recomendación del proyecto.

INTRODUCCIÓN

Tema

Desarrollo de una aplicación hibrida para Smartphone en el módulo

de venta de accesorios de seguridad industrial en la empresa SUINDEC.

Introducción

SUINDEC es una pequeña empresa dedicada a la venta al por

mayor y menor de equipo de seguridad industrial, incluso de partes,

piezas y materiales conexos, ubicada en la provincia del Guayas en el

cantón Daule en la urbanización Plaza Madeira II, manzana 13, solar 17.

La empresa inició sus actividades económicas el 09 de junio del 2011,

para luego cerrar sus puertas el 01 de septiembre del 2013 por razones

administrativas de la empresa; luego de un año SUINDEC reinicia su

actividad económica el 10 de noviembre del 2014 y actualmente va a

cumplir tres años en el mercado.

Las aplicaciones hibridas permiten a las empresas ser competitivas

en el mercado de suministros de seguridad industrial, por dejar de utilizar

las computadoras de escritorios, Laptops y Notebook. Donde el mercado

de la empresa se están adoptando de la mejor manera al receptar los

pedidos mediante un Smartphone, esta aplicación permite a los clientes

de SUINDEC, interactuar en los diferentes Sistema Operativos de los

Smartphone (S.O.S.), siendo la herramienta de desarrollo React Native

por adoptar el patrón padre que maneja la distribución de los diferentes

S.O.S., complementándose con las tecnologías Angular JS, HTML, CSS y

Javascript.

Introducción 2

La base de datos Postgres QL se aloja en el servidor Elephantsql

donde se almacena la información de los clientes que emiten los pedidos

mediante la aplicación hibrida de la empresa, para luego recibir la factura

del pedido que se envía en un formato “PDF”.

Objeto de la Investigación

El desarrollo de la presente investigación tiene como objeto de

estudio el área de ventas que permite receptar los pedidos de los clientes

de la empresa SUINDEC, donde se compone de las siguientes áreas:

Bodega, Recepción de Pedidos y Logístico.

Delimitación Geográfica: La presente investigación se desarrolla

en la matriz - empresa SUINDEC, ubicada en el Cantón Daule en la

urbanización Plaza Madeira II, manzana 13, solar 17.

Delimitación Cronológica: Se realiza este estudio en un periodo

de 7 meses iniciando en el mes de abril del 2017 hasta noviembre del

presente año.

Delimitación Semántica: Se constituye de los siguientes

conceptos básicos: React Native, Postgres, proceso de pedido, clientes y

casos de usos.

Donde la problemática de este estudio es el control de pedido de

los clientes, donde se lleva a cabo el desarrollo de una aplicación hibrida

teniendo un alojamiento gratis en Elephantsql.

Recursos disponibles: Los recursos para el desarrollo de la

aplicación se clasifica de la siguiente manera:

Recursos Humanos:

Introducción 3

Personal de Ventas

Personal de bodega

Recursos Materiales:

Computador de Escritorio

Laptos

Celular Smatphone

Software Libre (React Native)

Postgres QL

Servidor Elephantsql

Justificación de la Investigación

La cartera de clientes de SUINDEC, se encuentra compuesta por

grandes industrias como son: Pilsener, Brahma, Facundo, Ecuavegetal,

entre otras. El proceso de recepción de pedidos se lo realiza vía telefónica

entre Cliente/SUINDEC, archivándolos en manera digital en Excel y de

manera física en una agenda; para posterior verificar el stock de bodega,

comunicándole al cliente la cantidad de mercancía que posee para

realizar la entrega de los pedidos, especificando una fecha limite; cuando

se haya cancela le valor del pedido; se transporta la mercancía en un

vehículo propio de la empresa hacia las instalaciones de los clientes.

Actualmente SUINDEC cuenta con una complejidad al momento de

receptar los pedidos por vías telefónicas, causando confusiones con los

clientes por no llevar un control de stock en bodega, incurriendo en el

error de comunicarles a varios clientes la misma cantidad en stock

ocasionando inconvenientes al no poder cumplir con los pedidos por falta

de mercancía.

Esta investigación tiene como propósito principal mejorar la

eficiencia de la empresa mediante una aplicación móvil; reservando la

Introducción 4

información en un gestor de base de datos con tecnología Postgres,

donde se receptan los pedidos, que han sido preseleccionado de la lista

de artículos alojados en el servicio web.También permite conocer la

cantidad de mercancía en stock ayudando a la empresa a cumplir con los

pedidos de los clientes.

La aplicación móvil le ayudará a la empresa a ser más competitivo

en el mercado por brindar comodidad a los clientes, donde con un clic

pueden realizar sus pedidos, para luego poder descargar la factura

electrónica desde la aplicación registrada en la base de datos Postgres,

posteriormente el pedido llegará al comprador una vez sea cancelado el

mismo en la cuenta bancaria de la empresa.

Objetivos de la Investigación

Objetivo General

Desarrollar una aplicación hibrida para Smartphone para el manejo

del módulo de venta de accesorios de seguridad industrial en la empresa

SUINDEC.

Objetivo Especifico

Automatizar el proceso de pedidos de la empresa SUINDEC

Agilizar el proceso de pedidos mediante una aplicación Smartphone.

Implementar la aplicación hibrida en el departamento de ventas donde

se aloja la App en las diferentes tiendas de los Smartphone, durante la

venta de los productos de SUINDEC.

Hipótesis

El desarrollo de una aplicación hibrida para Smartphone, permitirá

a la empresa SUINDEC, automatizar el proceso de pedidos de accesorios

Introducción 5

de seguridad industrial, permitiendo al departamento de ventas minimizar

los trámites para la recepción de pedidos.

Identificación de Variables

Variable Dependiente

Automatizar el proceso de pedidos.

Variable Independiente

Desarrollo de una aplicación hibrida para Smartphone.

CAPÍTULO I

MARCO TEÓRICO

1.1. Estado del Arte

El presente trabajo describe las investigación más recientes y

actuales sobre el uso de las aplicaciones hibridas en el comercio. A

continuación se detallan cuatro aspectos para emplear esta nueva

metodología, entre ellos se encuentra el análisis de comportamiento,

proceso de cambio en la tecnología, facilidad a los usuarios y atención a

los clientes en la compra y venta.

Así como lo expresa (Aparicio Garcia, 2008) “Para efectuar el

análisis del comportamiento de un sistema, debe formulársele un

adecuado modelo. Un modelo es una representación o abstracción de la

realidad que muestra las relaciones entre causa y efecto, entre objetivos y

restricciones.” Para el análisis de las aplicaciones híbridas se debe

determinar el comportamiento de los procesos, conociendo las causas y

efectos que tienen los objetivos que se desean alcanzar, por lo

consiguiente se debe identificar los objetivos y restricciones que tiene la

empresa en el departamento de venta y bodega para conocer los

requerimientos necesarios para el desarrollo de la aplicación móvil.

Teniendo en cuenta a (Riveras Cazares, 2015) expresa que “El

Ecuador vive un proceso de cambios tecnológicos que le ha

permitido ir avanzando hacia nuevos mercados como es el campo

digital” .Donde los procesos tecnológicos tienen como finalidad innovar el

comercio, cambiando las tiendas físicas por tiendas virtuales, realizando

Marco Teórico 7

la gestión de compra y venta mediante una aplicación que permite

seleccionar los artículos a comprar en una canasta virtual, para luego

aceptar la compra y la factura digital, recibiendo los productos

seleccionados en su domicilio en un lapso de tiempo acordado.

El aporte de (Toro Oyarzún, 2011) indica que “La aplicación de

cliente, es la que permite al usuario final observar, elegir y luego

comprar los productos disponibles que tiene la empresa para la

venta online” .Las empresas deben permitirles a los usuarios la facilidad

de elegir, conocer las características, para luego comprar el producto vía

online.

El uso de dispositivos móviles y el desarrollo de aplicaciones web,

se han incrementado en los últimos años, donde no sólo se encuentran

aplicaciones para juegos, libros, música, sino que está evolución ha

permitido innovar a las empresas creando servicios de atención a clientes

mediante la aplicación, permitiendo a los usuarios y/o clientes conocer las

ofertas, ubicación e incluso realizar reservaciones. Como lo da a notar

(Cacho Zueco, 2013) en la tesis ‘‘Implementación de un sistema vía web

con aplicación móvil para la reserva y pedidos en línea de restaurantes’’,

demostrando que esta innovación le permite a los usuarios realizar una

búsqueda de restaurantes según las opciones de su preferencia entre ella

se encuentra la opción de restaurantes cercanos a través de la ubicación

GPS. Esta aplicación permite hacer reservas móviles, conocer el horario

de atención, enterarse de las ofertas, visualizar mediante imágenes el

interior y exterior del local, además de una breve descripción del local y

beneficiarse de un determinado descuento por las reservaciones vía web.

Brindando comodidad a los clientes y/o usuarios y haciendo más eficiente

el servicio de reservaciones de los restaurantes.

Considerando estos cuatros aspectos se observa como el

desarrollo de las aplicaciones hibridas son de gran utilidad para el

Marco Teórico 8

empresario y el cliente, permitiéndole conocer y realizar la compra desde

un dispositivo móvil. Esta innovación también permite que pequeños

comerciantes den a conocer su mercancía sin la necesidad de tener un

espacio físico. Como es el caso de SUINDEC que cuenta con un pequeño

espacio físico para almacenar la mercancía y receptar los pedidos,

mediante esta aplicación hibrida para Smartphone SUINDEC cambia el

método de recepción de pedidos de manera física a virtual.

1.2. Comparación entre Android Estudio y Ionic

1.2.1. Android Estudio

Como lo plantean (Clodoaldo Robledo & Robledo Fernández, 2016,

pág. 3) “En la actualidad, este sistema operativo se instala no sólo en

móviles, sino también en múltiples dispositivos, como tabletas, GPS,

televisores, discos duros multimedia, mini ordenadores, etcétera. Incluso

se ha instalado en microondas y lavadoras”. Actualmente es un sistema

operativo que se encuentra instalado en los Smartphone y diversos

dispositivos que cumplen los requerimientos del sistema, donde está

basado en Linux siendo el núcleo de este sistema libre, multiplaforma y

gratuito en su descargar.

La herramienta Android Estudio tiene cierto requisito para su

instalación:

Windows 7/8/10 en su versión 32 o 64 bits

2 GB de RAM por lo cual se recomienda 8GB DE RAM

Resolución de pantalla de 1280 x 800 pixeles

Java Development Kit 8

Procesador Intel Core i5

Sdk por minimo de memoria 1GB de Disco Duro

Marco Teórico 9

1.2.2. Ionic

Herramienta de manera gratuita y de licencia no pagada, para el

desarrollo de aplicaciones hibridas donde se basa en CSS, JS, HTML5.

Una de su principal características es el alto rendimiento de ejecución de

la aplicación que manipula del DOM, no utiliza el JQuery y aceleración de

transacciones por hardware. Donde no solo se programa para un sistema

operativo en específico sino en tres como son: Android, IOS, y

wibdowsPhone. Para la instalación de este software solo se requiere los

siguientes requisitos:

Ionic(https://ionicframework.com/)

Cordova (https://cordova.apache.org/)

Node JS (https://nodejs.org/en/)

Sistema operativo de 64 bits

La presente investigación trabaja con la herramienta IONIC por su

fácil manejo e instalación, que permite desarrollar tres aplicaciones en

una como son IOS, ANDROID y WINDOWSPHONE donde su

programación se hace a consola ejecutándolos mediante la página

Cordova que muestra la simulación del proyecto realizado, sin tener la

necesidad de ejecutarlo dentro de un emulador específico.

1.2.2.1. El uso de la Tecnología Córdova

Apache Cordova es un marco de desarrollo móvil de código

abierto. Permite utilizar las tecnologías estándar web como HTML5, CSS3

y JavaScript para desarrollo multiplataforma, evitando el lenguaje de

desarrollo nativo cada plataforma móvil.

Aplicaciones ejecutan dentro de envolturas para cada plataforma y

dependen de enlaces estándares API para acceder a de cada dispositivo

sensores, datos y estado de la red.

Marco Teórico 10

Apache Cordova se graduó en octubre de 2012 como un proyecto

de nivel superior dentro de la Apache Software Foundation (ASF). A

través del ASF, futuro desarrollo Cordova asegurará administración

abierta del proyecto. Siempre permanecerá libre y de código abierto bajo

la licencia Apache, versión 2.0. Visite cordova.apache.org para obtener

más información.

Usar Apache Cordova si eres:

Establecen un móvil desarrollador y desea extender una aplicación a

través de más de una plataforma, sin tener que re-implementarlo con

herramienta y lenguaje de cada plataforma.

Un desarrollador web y desea implementar una aplicación web que se

envasa para su distribución en varias app store portales.

Un móvil desarrollador interesado en que se mezclan los componentes

de la aplicación nativa con un WebView (ventana del navegador

especial) que puede tener acceso a las API de nivel de dispositivo, o si

quiere desarrollar una interfaz plugin entre componentes WebView y

nativos.

1.2.2.2. Componentes Básicos

Apache Cordova aplicaciones se basan en un común config.xml

archivo que proporciona información acerca de la aplicación y especifica

los parámetros que afectan a cómo funciona, como si responde a la

orientación cambia de puesto. Este archivo se adhiere a la especificación

de Empaquetado de la aplicación Web, widget, o de la W3C.

La misma aplicación se implementa como una página web, un

archivo local llamado index.html, que hace referencia a cualquier CSS,

JavaScript, imágenes, archivos multimedia u otros recursos son

necesarios para que se ejecute de forma predeterminada. La aplicación

Marco Teórico 11

se ejecuta como un WebView dentro de la envoltura de la aplicación

nativa, que distribuye a tiendas de aplicaciones.

El WebView Cordova-habilitado puede proporcionar la aplicación

con su interfaz de usuario completa. En algunas plataformas, también

puede ser un componente dentro de una aplicación híbrida más grande,

que mezcla la vista Web con componentes de la aplicación nativa. (Véase

WebViews incrustación para más detalles).

Una interfaz plugin está disponible para Cordova y componentes

nativos para comunicarse con los demás. Esto te permite invocar un

código de JavaScript. Idealmente, las API de JavaScript para ese código

nativo son consistentes a través de múltiples plataformas de dispositivos.

A partir de la versión 3.0, las extensiones proporcionan enlaces a APIs

estándar. Plugins de terceros proporcionan enlaces adicionales a

funciones no necesariamente disponibles en todas las plataformas. Puede

encontrar estos plugins de terceros en el registro de plugin y utilizarlos en

su aplicación.

También puedes desarrollar tus propios plugins, como se describe

en la guía de desarrollo de Plugin. Plugins puede ser necesario, por

ejemplo, para comunicarse entre Córdoba y componentes personalizados

de nativos.

1.2.3. React Native

Framework React Native es de código abierto para el desarrollo de

aplicaciones hibridas inicializando de una sintaxis sencilla y clara,

permitiendo al programador reutilizar el código fuente heredándolo y

compartiendo con IOS y Android.

Como manifiesta Artes Joan:

Marco Teórico 12

“Permite a los programadores web poder desarrollar apps

nativas sin tener que aprender nuevos lenguajes de

programación muy específicos para cada una de las

plataformas. A parte que la sintaxis de React Native es

bastante clara y sencilla, además de heredar el mismo

diseño que React, aportando flexibilidad y

reaprovechamiento en el código. Faltaría añadir por

último que el código fuente que desarrollemos, en

nuestra primera app, será un 100% compartido con iOS y

Android. Esto quiere decir que el código Javascript que

hagamos nos servirá tanto para la app en iOS como en

Android” (Artes, 2016)

Para la instalación de este software solo se requiere los siguientes

requisitos:

Chocolatey (https://chocolatey.org/)

Python v. 2.x (https://www.python.org/downloads/)

Node.js (https://nodejs.org/en/)

React Native (https://facebook.github.io/react-native/)

Android Studio (https://android-sdk.uptodown.com/windows)

1.2.4. Que es Chocolatey

Chocolatey es un gestor de paquetes de Windows, actualmente

está diseñado a la instalación rápida de las herramientas que se

necesitan.

“Chocolatey es una interfaz única y unificada diseñada

para trabajar fácilmente con todos los aspectos de la

administración del software de Windows utilizando un

marco de empaquetado que comprende los requisitos de

https://android-sdk.uptodown.com/windows

Marco Teórico 13

control de versiones y dependencia. Los paquetes de

Chocolatey encapsulan todo lo necesario para

administrar una determinada pieza de software en un

artefacto de despliegue, envolviendo instaladores,

ejecutables, cremalleras y secuencias de comandos en un

archivo de paquete compilado” (Chocolatey, 2017)

A continuación el cuadro N°1 contiene la característica de los

Framework.

CUADRO Nº 1

COMPARACIÓN DE FRAMEWORK

FRAMEWORK

REACT NATIVE IONIC ANDROID STUDIO

Reutilización de código (la mayoría de las veces) para desarrollar aplicaciones para Android, iOS, Windows Phone.

Puede usar JSX para programar su aplicación, usando JSX puede escribir estructuras concisas HTML / XML-like en el mismo archivo que escribe código JavaScript

Mucho mejor rendimiento que Córdoba en jónico.

React Native utiliza varios núcleos simultáneamente para que el código JavaScript se ejecute en un núcleo y la vista

Soporte de desarrollo web híbrido y reutilización de código para desarrollar aplicaciones para Android, iOS, Windows y web.

Rápido ciclo de pruebas de desarrollo y sin necesidad de carga de emuladores pesados.

Permite codificar en TypeScript y facilita la transición de AngularJS 2.

El mismo

Un sistema de compilación basado en Gradle flexible

Un emulador rápido con varias funciones

Un entorno unificado en el que puedes realizar desarrollos para todos los dispositivos Android

Instant Run para aplicar cambios mientras tu app se ejecuta sin la necesidad de compilar un nuevo APK

Marco Teórico 14

de la aplicación se ejecute en otro núcleo.

lenguaje (TypeScript) se puede utilizar para desarrollar aplicaciones para cada plataforma.

Su sistema de complemento lo hace disponible para que usted pueda utilizar cualquier tipo de funcionalidades nativas de los dispositivos.

Integración de plantillas de código y GitHub para ayudarte a compilar funciones comunes de las apps e importar ejemplos de código

Gran cantidad de herramientas y frameworks de prueba

Herramientas Lint para detectar problemas de rendimiento, usabilidad, compatibilidad de versión, etc.

Compatibilidad con C++ y NDK

Soporte incorporado para Google Cloud Platform, lo que facilita la integración de Google Cloud Messaging y App Engine

Fuente: Ankush Aggarwal, medium.com/@ankushaggarwal/ionic-vs-react-native-3eb62f8943f8 Elaborado por: Moreira Freire Luís Livinston

1.3. Data Binding

Posiblemente una de las características más populares de

AngularJS es el data binding, que consiste en unir en tiempo real los

datos de dos elementos, si el valor de uno de esos elementos cambia, el

efecto se reflejará de inmediato en el otro elemento enlazado. Esta

técnica es sumamente útil para realizar cálculos o para representar

Marco Teórico 15

gráficamente los cambios que realiza el usuario, tradicionalmente la

mayoría de los frameworks pueden implementar esta conducta utilizando

eventos y funciones adicionales que ocupan tiempo y depuración, en

AngularJS el data binding está integrado y no requiere ni siquiera de una

linea de código, solo unas cuantas propiedades y tendrás un enlace en

dos vías de datos. Este tipo de enlaces se hacen en tiempo real y el

usuario notará de inmediato el resultado de cualquier cambio o proceso

que realice en la aplicación.

1.4. Inyección de Dependencias

Desde el momento que comienzas a crear tu aplicación, no importa

lo simple que sea, está diseñada para crecer modularmente. La librería de

AngularJS se mantiene únicamente con los Introducción a AngularJS 7

elementos básicos para funcionar, pero si en el futuro necesitas agregar

nuevas funcionalidad, puedes usar librerías extra. Para mantener esta

modularidad AngularJS utiliza la inyección de dependencias, eso significa

que una vez que importas o creas una librería solo tienes que inyectar

una dependencia de esta en cualquier parte del código para que esté

disponible en tu aplicación, sin conflictos de instancias ni

implementaciones complejas. Tu aplicación puede crecer indefinidamente

utilizando nuevos módulos progresivamente, AngularJS crecerá contigo.

Al usar módulos puedes mantener tu código encapsulado y fácil de

mantener, créeme, los futuros desarrolladores que trabajen en tu

aplicación te agradecerán que no dejes un código mezclado a lo largo de

un solo archivo imposible de leer o depurar.

1.5. Directivas

Las directivas son la firma con la que vas a reconocer una

aplicación creada con AngularJS. En pocas palabras, las directivas te

permiten darle poderes adicionales al código HTML regular.

Marco Teórico 16

Las directivas son elementos de programación que inyectamos en

un documento web totalmente compatibles con la sintaxis HTML, son

fáciles de recordar y permiten crear conductas o código complejo en un

documento.

Están pensadas para ahorrarte tiempo al agregar conductas

avanzadas con solo incluir unas cuantas propiedades en el HTML.

Las directivas te permiten reutilizar funciones y tareas predefinidas

en el código de AngularJS permitiéndote invocarlos una y otra vez en tu

documento con solo incluir una etiqueta o propiedad especial.

Adicionalmente, aunque AngularJS incluye un amplio repertorio de

variadas directivas de uso común, tienes total control para seguir

extendiendo la colección con tus propias directivas personalizadas.

“Los servicios web sistemas software diseñados para soportar

una interacción interoperable maquina a máquina sobre una red. Los

Servicios Web suelen ser APIs Web que pueden ser accedidas

dentro de una red (principalmente Internet) y son ejecutados en el

sistema que los aloja” (Navarro Marset, 2007)

Los servicios web soportan la integración de máquina a máquina

mediante una red interoperable estos servicios web pueden acceder

dentro una red principal de internet ejecutándolo en un sistema de

alojamiento como describe (Navarro Marset, 2007) que los servicios web

es la comunicación de máquina a máquina mediante una conexión de red

siempre ejecutando el sistema desarrollado en un servidor que fue

alojado.

En el siguiente diagrama N°1 (Kearn, 2015) nos explica como una

aplicación alojada a un servicio web puede consumir dato como S.O.

Smartphone y navegadores.

Marco Teórico 17

DIAGRAMA Nº 1

DISEÑO DEL REST EN APLICACIONES WEB Y SISTEMA

Fuente: Kearn Martin, blogs.msdn.microsoft.com Elaborado por: Moreira Freire Luís Livinston

El diagrama Diseño del Representational State Transfer (Rest)

presenta de qué manera se puede consumir datos con las operaciones:

GET se utiliza para las consultas, PUT la modificación del estado del

recurso, POST genera un nuevo elemento y DELETE en la eliminación de

los recursos. Para el desarrollo de los servicios Rest, el estilo de

arquitectura debe cumplir los siguientes pasos: como se observa en el

diagrama nº 2 - A, indica que la arquitectura cliente/servidor es la

comunicación de un interface entre ambos separándolo completamente

de ambas partes, en el diagrama nº 2 - B que la arquitectura sin estado es

el que mantiene asociado el estado del cliente en la petición que realice

independiente llamando a todos al mismo servicios se lo conoce servicios

idénticos.

Marco Teórico 18

DIAGRAMA Nº 2

ESTILOS DE ARQUITECTURA DE REST I

Fuente: http://www.arquitecturajava.com/servicios-rest/ Elaborado por: Moreira Freire Luís Livinston

En el diagrama nº 3 - A en la arquitectura cache realiza la petición

primero al servicio del resto que se apoya de la cache para el cliente, en el

diagrama nº 3 - B que la arquitectura Servicios Uniformes son los métodos

GET, PUT, POST, DELETE.

DIAGRAMA Nº 3

ESTILOS DE ARQUITECTURA DE REST II


Marco Teórico 19

A la escalabilidad de un cliente Rest donde no será capaz de

distinguir la petición realizada directamente al servidor como nos muestra.

DIAGRAMA Nº 4

ESTILOS DE ARQUITECTURA DE REST III


1.6. La Tecnología Node JS

Es básicamente un framework para implementar operaciones de

entrada y salida, como decíamos anteriormente. Está basado en eventos,

streams y construido encima del motor de Javascript V8, que es con el

que funciona el Javascript de Google Chrome. A lo largo de este artículo

daremos más detalles, pero de momento nos interesa abrir la mente a un

concepto diferente a lo que podemos conocer, pues NodeJS nos trae una

nueva manera de entender Javascript.

Si queremos entender esta plataforma, lo primero que debemos de

hacer es desprendernos de varias ideas que los desarrolladores de

Javascript hemos cristalizado a lo largo de los años que llevamos usando

Marco Teórico 20

ese lenguaje. Para empezar, NodeJS se programa del lado del servidor,

lo que indica que los procesos para el desarrollo de software en "Node" se

realizan de una manera muy diferente que los de Javascript del lado del

cliente.

De entre alguno de los conceptos que cambian al estar Node.JS

del lado del servidor, está el asunto del "Cross Browser", que indica la

necesidad en el lado del cliente de hacer código que se interprete bien en

todos los navegadores. Cuando trabajamos con Node solamente

necesitamos preocuparnos de que el código que escribas se ejecute

correctamente en tu servidor.

El problema mayor que quizás podamos encontrarnos a la hora de

escribir código es hacerlo de calidad, pues con Javascript existe el

habitual problema de producir lo que se llama "código espagueti", o

código de mala calidad que luego es muy difícil de entender a simple vista

y de mantener en el futuro.

Otras de las cosas que deberías tener en cuenta cuando trabajas

con NodeJS, que veremos con detalle más adelante, son la programación

asíncrona y la programación orientada a eventos, con la particularidad

que los eventos en esta plataforma son orientados a cosas que suceden

del lado del servidor y no del lado del cliente como los que conocemos

anteriormente en Javascript "común".

Además, NodeJS implementa los protocolos de comunicaciones en

redes más habituales, de los usados en Internet, como puede ser el

HTTP, DNS, TLS, SSL, etc. Mención especial al protocolo SPDY,

fácilmente implementado en Node, que ha sido desarrollado

mayoritariamente por Google y que pretende modernizar el protocolo

HTTP, creando un sistema de comunicaciones que es sensiblemente más

rápido que el antiguo HTTP (apuntan un rendimiento 64% superior).

Marco Teórico 21

Otro aspecto sobre el que está basada nodeJS son los “streams",

que son flujos de datos que están entrando en un proceso. Lo veremos

con detalle más adelante.

Según (Denzer, 2010) Postgres QL es una de las alternativas para

instalar sistemas de empresas, universidades, etc., por ser un sistema de

base de datos relacionales permitiendo que se manipule de acuerdo a las

reglas del algebra relacional. Este sistema cumple cuatro condiciones que

le permiten ser unas de las alternativas de sistema de bases de datos

más utilizadas. Siendo estas la atomicidad por asegurar que se ha

realizado o no la operación, consistencia permite que se ejecuten

operaciones que no rompen las reglas y directrices de la integridad de la

base de datos, aislamiento asegura que se realicen dos transacciones

sobre la misma sean independientes y no generen ningún tipo de error, la

última condición es durabilidad porque si el sistema presenta algún error

externo este mantiene su durabilidad hasta que finalice.

1.7. Comparación de Base de Datos

CUADRO Nº 2

COMPARACIÓN ENTRE GESTORES DE BASE DE DATOS

GESTOR DE BASE DE DATOS

CARACTERISTICAS VENTAJAS DESVENTAJAS

Postgres

Es una herramienta de administración gráfica que es mucho más intuitiva y cómoda de utilizar.

Es gratuito.

Hace más sencillo el análisis de datos.

Herramientas gráficas de diseño y administración de bases de datos.

Es multiplataforma.

Número de Transacciones 19350

No es muy utilizada.

No soporta consultas en paralelo.

Oracle Permite el uso de particiones para la

Es el más usado a nivel

Tiene costo muy

Marco Teórico 22

mejora de la eficiencia, de replicación e incluso ciertas versiones admiten la administración de bases de datos distribuidas.

mundial.

Es multiplataforma.

Permite el uso de particiones.


elevado

No es posible desarrollar tus propios tipos de datos.

MySql

Es una de las herramientas más utilizadas por los programadores orientados a Internet.

Infinidad de librerías y otras herramientas que permiten su uso a través de gran cantidad de lenguajes de programación.

Mayor velocidad tanto al conectar con el servidor

Mejor integración con PHP.

No hay límites en el tamaño de los registros.


No soporta transacciones, "roll-backs" ni subselects.

No considera las claves ajenas.

Fuente: Investigación de campo Elaborado por: Moreira Freire Luís Livinston

1.7.1. Arquitectura Postgres

Antes de empezar, es necesario comprender la arquitectura básica

del sistema Postgres QL. Entender cómo interactúan las partes de

Postgres QL hará que las siguientes páginas sean más fáciles de

entender.

En la jerga de bases de datos, Postgres QL usa un modelo

cliente/servidor.

Una sesión de Postgres QL se compone de los siguientes procesos

cooperativos (programas):

El servidor, que administra los archivos de las bases de datos,

acepta conexiones a las bases de datos de parte de aplicaciones clientes

y ejecuta acciones sobre las bases de datos en representación de ellos.

El programa servidor de bases de datos se llama Postgres.

Marco Teórico 23

La aplicación cliente (frontend) que desea ejecutar operaciones en

las bases de datos, pueden ser muy diversas por naturaleza: podría ser

una herramienta con interfaz de texto, una aplicación gráfica, un servidor

Web que accede a las bases de datos para mostrar páginas Web, o una

herramienta especializada para el mantenimiento de bases de datos.

La distribución de Postgres viene con algunas aplicaciones cliente;

la mayoría es desarrollada por usuarios.

“Como es típico en las aplicaciones cliente/servidor, el cliente

y el servidor pueden estar en diferentes máquinas. En tal caso,

ambos se comunican por medio de una conexión de red TCP/IP”

(Denzer, 2010). Esto debe tenerse presente porque los archivos a los que

se puede acceder desde una máquina cliente podrían no ser accesibles

para la máquina con el servidor de bases de datos.

El uso de dispositivos móviles y el desarrollo de aplicaciones web,

se han incrementado en los últimos años, donde no sólo se encuentran

aplicaciones para juegos, libros, música, sino que está evolución ha

permitido innovar a las empresas creando servicios de atención a clientes

mediante la aplicación, permitiendo a los usuarios y/o clientes conocer los

menú, ofertas, ubicación e incluso reservaciones.

Como lo dan a notar (González Macavilca & Saraza Grande, 2014)

en la tesis ‘‘Implementación de un sistema vía web con aplicación móvil

para la reserva y pedidos en línea de restaurantes’’, le permite a los

usuarios realizar una búsqueda de restaurantes según las opciones de su

preferencia entre ella se encuentra la opción de restaurantes cercanos a

través de la ubicación GPS.

Esta aplicación permite hacer reservas móviles, conocer el horario

de atención, enterarse las ofertas, visualizar mediante imágenes el interior

y exterior del local, además de una breve descripción del local y

Marco Teórico 24

beneficiarse de un determinado descuento por las reservaciones vía web.

Brindando comodidad a los clientes y/o usuarios y haciendo más eficiente

el servicio de reservaciones de los restaurantes.

1.8. Arquitectura del Sistema

1.8.1. Dos Capas

“Una arquitectura de dos capas en realidad tiene tres

partes: un cliente, un servidor y un protocolo, mismo que

hace un puente entre las capas del cliente y del servidor.

El diseño de dos capas es muy efectivo para aplicaciones

de red, así como para programas con interfaz gráfica de

usuario (GUI); comúnmente los programas GUI se

almacenan del lado del cliente, y la lógica del negocio del

lado del servidor, esto permite regenerar y validar datos

del usuario en el cliente, donde se tiene una respuesta

más rápida; en el proceso, se conservan los tan

apreciados recursos de la red y del servidor” (Acosta

Gonzaga & Álvarez Cedillo, 2007)

1.8.2. Tres Capas

“La arquitectura de tres capas es un diseño reciente que

introduce una nueva capa intermedia en el proceso. Cada

capa es un proceso independiente y definido,

ejecutándose también en plataformas separadas. En la

arquitectura tradicional de tres capas, se instala una

interfaz de usuario final en la computadora del Cliente. La

arquitectura basada en Web transforma la interfaz gráfica

de búsqueda existente (browser), en la interfaz del

usuario fina”. (Arizabaleta Rodríguez & Ávila Ávila, 2012)

Marco Teórico 25

1.9. Tipos de Investigaciones

1.10. Investigación Exploratoria

“Toda indagación realizada antes de un programa o

investigación científica con el propósito de definir la

población seleccionada, crear programas o

procedimientos de investigación apropiados y asegurar

que el programa o estudio que se llevara a cabo será

pertinente y aceptable desde el punto de vista cultural”

(Ulin, Robinson, & Tolley, 2016)

1.11. Investigación Descriptiva

Como lo menciona Mario Tamayo, 2004, pág. 46

“Comprende la descripción, registro, análisis e

interpretación de la naturaleza actual, y la composición o

procesos de los fenómenos. El enfoque se hace sobre

conclusiones dominantes o sobre como una persona,

grupo o cosa se conduce o funciona en el presente”

(Tamayo, 2004)

1.12. Investigación Cualitativa

“La investigación cualitativa busca abordar esta/s

realidad/es en forma holística, y no de una manera

fragmentada a través de una serie de variables

unidimensionales. En esta reducción de lo real que

siempre opera en la investigación, se busca considerar la

máxima complejidad y riqueza de los fenómenos que

abordamos, entendiendo que el objeto que abordamos, el

interrogante que orienta el proceso investigativo, se

encuentra inscripto en un contexto histórico, social y

cultural” (Horacio & Maite, 2011)

Marco Teórico 26

1.13. Investigación Cuantitativa

“Análisis de la realidad, en cierto modo enfrentados. Por

un lado, el positivismo busca la comprensión de las

causas de los fenómenos sociales, con independencia de

la subjetividad de los individuos. Técnicas que, como el

cuestionario o los estudios demográficos, generan datos

cuantitativos susceptibles de ser analizados

estadísticamente, los segundos emplean métodos

cualitativos que, como la observación participante o la

entrevista” (Borrego Huerta, 2009)

1.14. Tipos de Metodología de Desarrollo

CUADRO Nº 3

COMPARACIÒN DE METODOLOGÌA DE DESARROLLO

COMPARACIÓN ENTRE METODOLOGÌA

METODOLOGIA

RUP

METODOLOGIA

XP

METODOLOGIA

ICONIX

-Es una plataforma flexible de procesos de desarrollo de software. -Describe cómo utilizar de forma efectiva reglas de negocio y procedimientos comerciales probados en el desarrollo de software. Permite que cada miembro del equipo de trabajo utilice las guías y planillas de manera que sea efectiva la utilización de UML. -Permite seleccionar fácilmente el conjunto de componentes de

-Mantiene el trabajo en grupo para así lograr una mejor calidad en el software. -Permite una programación organizada. -Una menor taza de errores. -Establece versiones nuevas. -Permite la satisfacción del programador. -Se utiliza en proyectos de corto plazo. -Es costoso y suele

- Es un proceso pequeño y ligero. -Utiliza la notación UML como lenguaje estándar. -Dirigido para casos de uso como lo había establecido en sus comienzos Jacobson. -Es un modelo pequeño y simple. -Emplea el análisis de robusteza entre los casos de uso empleados por el grupo de trabajo. -Proporciona al grupo mayor

Marco Teórico 27

proceso que se ajustan a las necesidades específicas del proyecto. - Desarrollo iterativo e incremental. -Mitiga los riesgos de forma temprana y continua. -Posee 4 fases: Análisis de requerimientos, Diseño de necesidades, diseño de software y verificación del procedimiento.

ser en algunos casos innecesarios.

documentación y suficientes requisitos para el diseño del software de calidad. -No puede ser usado para proyectos grandes. -Necesita información rápida y puntual.-Se debe conocer diagramas de UML.

Fuente: Cesar Vallejo, https://docgo.org/tb-byW9vci Elaborado por: Moreira Freire Luís Livinston

1.14.1. Metodología Iconix

La presente investigación establece, la tecnología Iconix por el

conjunto de métodos que se orienta a los objetos del ciclo de vida de un

proyecto adoptando los patrones incrementales, trazabilidad y UML con

las tareas que se mencionaran en el cuadro N°3

CUADRO Nº 4

TAREAS DE ICONIX

Análisis de requisitos

1) Modelo de dominio

2) Prototipación rápida

3) Modelo de casos de uso

Análisis y diseño preliminar

1) Descripción de casos de uso

2) Diagrama de robustez

Marco Teórico 28

Diseño

1) Diagrama de secuencia

2) Completar el modelo estático

Implementación

1) Utilizar un diagrama de componentes

2) Escribir / Generar código

3) Realización de pruebas

Fuente: http://informatica-v-iconix.blogspot.com/2011/08/normal-0-21-false-false-false-es-x-none.html Elaborado por: Moreira Freire Luís Livinston

CAPÍTULO II

METODOLOGÍA

2.1. Metodologías, Análisis e Introducción

2.2. Metodología A Usar

El presente proyecto establece una investigación mixta por el uso

de la investigación explotaría y descriptiva. Permitiendo la investigación

exploratoria estudiar el entorno a investigar, conociendo los problemas

mediantes la observación del investigador en cambio la investigación

descriptiva es el detalle los problemas donde se presente en el campo de

estudio.

“La investigación exploratoria tipo de investigación se

utiliza especialmente cuando el tema elegido ha sido

poco explorado y reconocido. Se da cuando el objetivo

del investigador es explorar, sondear, descubrir

posibilidades. La investigación exploratoria prepara

el camino para otras investigaciones” (Camargo

Stummo & Cervantes López, 2014)

“Investigación descriptiva es aquella que se refiere a la

descripción de algún objeto, sujeto, fenómeno, etc. en

total o parte del mismo, tal como un aparato, técnica,

método, procedimiento, proceso, también estructuras

atómicas o moleculares, organismos vivos, sean

microorganismos o macro organismos desde virus hasta

vertebrados, incluso el hombre, que se consideran y por

Metodología 30

tanto deben ser nuevas para la ciencia, es decir, que en

este tipo de investigación se parte del supuesto que la

descripción que se va a realizar no ha sido hecha

anteriormente” (Salinas, 2016)

2.2.1. Técnicas de Recolección de Datos

2.2.1.1. Técnica de Observación

La técnica que permite al investigador ver los acontecimientos

dentro del campo de estudio, es la información que se recolecta mediante

el sujeto o área definida para entendimientos de los procesos que se

están evaluando. La presente investigación tiene como campo de estudio

el departamento de venta, visualizando cada proceso que se ejecuta

dentro del área de trabajo

“Es igual que otros métodos o instrumentos para

consignar información; requiere del sujeto que investiga

la definición de los objetivos que persigue su

investigación, determinar su unidad de observación, las

condiciones en que asumirá la observación y las

conductas que deberá registrar” (Morán Esparza, 2007)

2.2.1.2. Técnica de la Entrevista

Se establece las entrevistas a los integrantes del departamento de

venta en la empresa SUINDEC S.A., permitiendo obtener información de

los roles de cada miembro.

“Una entrevista el entrevistador suele hacer preguntas

abiertas y dirigir la entrevista de acuerdo a las respuestas

que vaya dando el entrevistado, por ejemplo, explica las

Metodología 31

preguntas difíciles, obvia algunas preguntas que estaban

programadas, ahonda en otras o las modifica” (Crece

Negocios, 2013)

2.2.1.3. Técnica de Encuesta

“Se enmarca en los diseños no experimentales de

investigación empírica propios de la estrategia

cuantitativa, ya que permite estructurar y cuantificar los

datos encontrados y generalizar los resultados a toda la

población estudiada” (Kuznik, Hurtado, & Espinal, 2010)

2.2.1.3.1. Población

“La población de la investigación es generalmente una

gran colección de individuos u objetos que son el foco

principal de una investigación científica. Las

investigaciones se realizan en beneficio de la población”

(Explorable, 2009)

2.2.1.3.2. Muestra

“Habitualmente, el investigador no trabaja con todos los

elementos de la población que estudia sino sólo con una

parte o fracción de ella; a veces, porque es muy grande y

no es fácil abarcarla en su totalidad” (García Muñoz, 2005)

El tamaño de la muestra que se ha considerado para la aplicación de

las encuestas está dado por la aplicación de la fórmula siguiente:

Dónde:

Metodología 32

TAMAÑO DE LA POBLACION N 109

ERROR MUESTRAL E 0,05

PORPORCION DEL EXITO P 0,5

PORPORCION DE FRACASO Q 0,5

VALOR DE LA VARIANZA Z -1 1,96

Metodología 33

2.2.1.3.3. Encuesta

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE INGENIERÍA INDUSTRIAL

LICENCIATURA EN SISTEMAS DE INFORMACIÓN

Preguntas 1 2 3 4 5

Se encuentra satisfecho con el proceso de

hacer pedido por vía telefónica

(Convencional).

Cuál es el dispositivo móvil más adecuado

para visualizar esta aplicación.

Tienes acceso a internet en su dispositivo

móvil.

Considera adecuado el uso de

aplicaciones móviles para realizar pedido

de accesorios industriales

Desea visualizar el catálogo de producto

con su respectivo precio

Le gustaría registrarse sin pago alguno en

nuestro servicio de compra.

Desea que la aplicación móvil le genere

una factura con el detalle de la compra.


Metodología 34

2.2.1.3.4. Desarrollo

ENCUESTA




La presente encuesta forma parte de un estudio que aportará al trabajo de

Titulación denominado: DESARROLLO DE UNA APLICACIÓN HIBRIDA

PARA SMARTPHONE EN EL MÓDULO DE VENTA DE ACCESORIOS

DE SEGURIDAD INDUSTRIAL EN LA EMPRESA SUINDEC para los

requerimientos de la aplicación contestar las siguientes preguntas:

1.- ¿Se encuentra satisfecho con el proceso de hacer pedido por vía

telefónica (Convencional).?

SI NO

2.- ¿Cuál es el dispositivo móvil más adecuado para visualizar esta

aplicación?

TABLET SMARTPHONE NINGUNA

3.- ¿Tienes acceso a internet en su dispositivo móvil?

SI NO

4.- ¿Considera adecuado el uso de aplicaciones móviles para realizar

pedido de accesorios industriales?

SI NO TAL VEZ

Metodología 35

5.- ¿Desea visualizar el catálogo de producto con su respectivo

precio?

SI NO TAL VEZ

6.- ¿Le gustaría registrarse sin pago alguno en nuestro servicio de

compra?

SI NO TAL VEZ

7.- ¿ Desea que la aplicación móvil le genere una factura con el

detalle de la compra?

SI NO


2.2.1.3.4.1. Análisis Documental

Como resultado de la técnica de la observación en cual se

realizada dentro del campo de estudios de los clientes de SUINDEC al

momento de ver el comportamiento de una aplicación móvil, permitiendo

al proceso actual brindar la recolección de información y encontrando las

falencias que se encuentra.

SUINDEC: Se dedica a las distribuciones accesorios industriales a

las empresas que requieren equipamiento a sus empleados

Proceso de recepción de pedido: Se dedica a brindar un servicio

de recepción de pedidos en cual los clientes presenta quejas por uso

masivo de sus clientes.

Después de recolectar la información, a través de encuestas

apoyadas en un cuestionario conformado por 7 preguntas, se procedió a

Metodología 36

análisis e interpretación de cada uno de los ítems, para dar cumplimiento

al desarrollo de los objetivos diseñados y requeridos por la investigación.

Los resultados arrojados por los cuestionarios, recaban información

acerca del conocimiento que tiene la muestra sobre el uso de un equipo

móvil, el manejo de Internet y la necesidad de diseñar una aplicación

hibrida para la empresa SUINDEC así como la información que desearían

que tuviera la misma.

Esto permitió cumplir con los objetivos específicos de la

investigación referidos a la identificación de las prioridades y necesidades

del Jefe de Ventas.

Análisis de ítems desarrollados en el cuestionario de Encuesta

La encuesta se realizó a una muestra de 48 personas residentes en

el sector Norte ciudad de Guayaquil, a continuación se mostrarán los

resultados del cuestionario aplicado a la muestra. (Ver Anexo 2).

Pregunta 1. ¿Se encuentra satisfecho con el proceso de hacer

pedido por vía telefónica (Convencional)?

CUADRO Nº 5

PEDIDOS POR VÍA TELEFÓNICA (CONVENCIONAL)

ALTERNATIVAS FRECUENCIA PORCENTAJE

SI 18 37%

NO 30 63%

TOTAL 48 100%


Metodología 37

GRÁFICO N º 1

PEDIDOS POR VÍA TELEFÓNICA (CONVENCIONAL)


Al observar estos resultados no cabe duda del pedidos de los

clientes no están siendo receptado correctamente, manifiestan los

encuestados ya que el 63% respondió que “NO” se encuentra satisfecho.

Mediante esta pregunta, se midió el nivel de aceptación de la población

hacia el desarrollo de una aplicación móvil.

Pregunta 2. ¿Cuál es el dispositivo móvil más adecuado para

visualizar esta aplicación?

CUADRO Nº 6

USO MÁS FRECUENTE DE DISPOSITIVOS TECNOLÓGICO


TABLET 16 33%

SMARTPHONE 29 61%

NINGUNA 3 6%

TOTAL 48 100%


Metodología 38

GRÁFICO Nº 2

USO MÁS FRECUENTE DE DISPOSITIVOS TECNOLÒGICO


El 61% de la población utiliza frecuentemente Smartphone.

Seguido con 33% del uso de Tablet y en una pequeña muestra de 6% en

cual no utiliza ni Smartphone y Tablet. Mediante esta pregunta se

orientara el desarrollo de la aplicación a que población va dirigido.

Pregunta 3. ¿Tienes acceso a Internet en su dispositivo móvil?

CUADRO Nº 7

USO MÁS FRECUENTE DE INTERNET DISPOSITVOS MÓVIL


SI 42 13%

NO 6 87%

TOTAL 48 100%


Metodología 39

GRÁFICO Nº 3

USO MÁS FRECUENTE DE INTERNET DISPOSITVOS MÓVIL


El 67% de la población tiene acceso al internet mediante wifi o

planes telefónicos. Seguido con 13% de personas que no tienen acceso a

Internet. Mediante esta pregunta el uso frecuente del internet donde la

aplicación se manejara de forma externa para los clientes de SUINDEC.

Pregunta 4. ¿Tienes acceso a Internet en su dispositivo móvil?

CUADRO Nº 8

USO MÓVIL REALIZAR PEDIDO MEDIANTE APLICACIÓN


SI 40 83%

NO 4 9%

TAL VEZ 4 8%

TOTAL 48 100%


Metodología 40

GRÁFICO Nº 4

USO MÓVIL REALIZAR PEDIDO MEDIANTE APLICACIÒN


El 63% de los clientes de SUINDEC se encuentra de acuerdo del

uso de aplicaciones móviles. Seguido con 9% que “NO” y 8% “TAL VEZ”

usaría una aplicación. Esta pregunta determinara si la aplicación móvil es

viable en la empresa.

Pregunta 5. ¿Desea visualizar el catálogo de producto con su respectivo

precio?

CUADRO Nº 9

VISOR DE PRODUCTO


SI 39 81%

NO 3 6%

TAL VEZ 6 13%

TOTAL 48 100%


Metodología 41

GRÁFICO Nº 5

VISOR DE PRODUCTO


El 81% de los clientes de SUINDEC se encuentra de acuerdo de

visualizar los accesorios industriales. Seguido con 13% que “TAL VEZ” y

6% “NO” desearía las características del productos. Esta pregunta

determinara la presentación del catálogo.

Pregunta 6. ¿Le gustaría registrarse sin pago alguno en nuestro servicio

de compra?

CUADRO Nº 10

REGISTRÓ COMO CLIENTE DE SUINDEC


SI 42 88%

NO 1 2%

TAL VEZ 5 10%

TOTAL 48 100%


Metodología 42

GRÁFICO Nº 6

REGISTRÓ COMO CLIENTE DE SUINDEC


El 88% de los clientes de SUINDEC se encuentra de acuerdo

registrarse en nuestro servicio de compra. Seguido con 10% que “TAL

VEZ” y 2% “NO” desearía por los problema presentados.

Pregunta 7. ¿Desea que la aplicación móvil le genere una factura con el

detalle de la compra?

CUADRO Nº 11

FACTURACIÓN AL CLIENTE


SI 45 94%

NO 3 6%

TOTAL 48 100% Fuente: Investigación de campo Elaborado por: Moreira Freire Luís Livinston

GRÁFICO Nº 7

FACTURACIÓN AL CLIENTE


Metodología 43

El 94% de los clientes de SUINDEC se encuentra de acuerdo con

la factura de emisión rápida. Seguido con 6% “NO” se emita la factura.

2.3. Diagrama de Ishikawa

DIAGRAMA Nº 5

DIAGRAMA DE ISHIKAWA


Metodología 44

2.4. Requerimientos Funcionales

CUADRO Nº 12

REQUERIMIENTOS FUNCIONALES


Requerimientos para realizar el desarrollo una aplicación hibrida para smartphone en el módulo de venta de accesorios de seguridad.

ID REQUERIMIENTO REQUISITO FUNCIONAL USUARIO QUE

SOLICITA

SRF-001

Desarrollar una aplicación hibrida para smartphone en el módulo de venta de accesorios de seguridad. Roles Identificados: - Cliente - Jefe Venta

Jefe de Venta

SRF-002

Iniciar Sesión debe de ingresar: - Correo electrónico - Contraseña

Jefe de Venta

SRF-003

Registro sistema el cliente debe de registrarse con: - Nombres - Apellidos - Correo - Contraseña - Confirmar

contraseña.

Jefe de Venta

SRF-004 Menú principal que contenga Productos y Detalle de la compra

Jefe de Venta

Metodología 45

SRF-005 Visualizar las características de los productos.

Jefe de Venta

SRF-006 Carrito de compra en cual vaya almacenando cada producto.

Jefe de Venta

SRF-007

Detalle de la nota de venta vaya desglosado los productos y el número de cuenta a depositar.

Jefe de Venta

SRF-008 Ingreso al sistema (Login)

Jefe de Venta

SRF-009

Recepta el pedido del cliente con las características establecidas.

Jefe de Venta

SRF-010 Descarga el pedido del cliente mediante un PDF.

Jefe de Venta

SRF-011 Envié una alerta al cliente la duración del envió.

Jefe de Venta

SRF-012

Recepta la notificación del envió enviándole la vía de transporte y el número de guía.

Jefe de Venta

SRF-013 Productos tenga un código establecido por el sistema

Jefe de Venta

SRF-014 Producto presente la imagen y calidad del producto.

Jefe de Venta


Metodología 46

2.4.1. Requerimientos No Funcionales

Se detalla la actividad y rendimiento del sistema.

CUADRO Nº 13

REQUERIMIENTOS NO FUNCIONALES


Requerimientos para realizar el desarrollo una aplicación hibrida para smartphone en el módulo de venta de accesorios de seguridad.

ID REQUERIMIENTO REQUISITO FUNCIONAL USUARIO QUE

SOLICITA

SRNF-001 Interfaz ágil y amigable Jefe de Venta

SRNF-002 Aplicación Móvil Cliente

SRNF-003 Rendimiento y funcionabilidad del sistema

Jefe de Venta

SRNF-005 Imagen corporativa Jefe de Venta Fuente: Investigación de campo Elaborado por: Moreira Freire Luís Livinston

2.5. Caso de Uso

2.5.1. Definición de Actores de Casos de Uso

CUADRO Nº 14

LISTA DE ROLES


CLIENTE Cliente debe de registrarse en sistema la generación de su pedido mediante el sistema en cual se encargara de enviar el detalle de la factura al proveedor.

JEFE DE VENTA

Se encargara de receptar el pedido del cliente que ha solicitado mediante el sistema donde se le notificara la fecha de entrega.

Metodología 47

2.5.2. Diagrama De Casos De Uso

2.5.2.1. Caso de Uso Contexto

DIAGRAMA Nº 6

CASO DE USO CONTEXTO


Metodología 48

Caso de Uso Login

DIAGRAMA Nº 7

CASO DE USO LOGIN


2.5.2.2. Caso de Uso Compra de Producto

DIAGRAMA Nº 8

CASO DE USO COMPRA DE PRODUCTO


Metodología 49

2.5.2.3. Caso de Uso Visualizar Producto

DIAGRAMA Nº 9

CASO DE USO VISUALIZAR PRODUCTO


2.5.2.4. Caso de Uso Orden de Despacho

DIAGRAMA Nº 10

CASO DE USO ORDEN DESPACHO


Metodología 50

2.5.2.5. Caso de Uso Notificación de Pedido Venta

DIAGRAMA Nº 11

CASO DE USO NOTIFICACION DE PEDIDO VENTA


2.5.2.6. Caso de Uso Mantenimiento de Producto

DIAGRAMA Nº 12

CASO DE USO MANTENIMIENTO DE PRODUCTO


Metodología 51

2.5.2.7. Caso de Uso Notificación Pedido Cliente

DIAGRAMA Nº 13

CASO DE USO NOTIFICACION DE PEDIDO CLIENTE


Metodología 52

2.5.3. Descripción De Casos De Uso

2.5.3.1. Descripción De Caso De Uso Login

CUADRO Nº 15

DESCRIPCIÓN CASO DE USO LOGIN

Caso de Uso:

Login

Descripción del proceso:

El presente caso detalla el proceso de registro y sesión del cliente al ingresar al

menú principal.

Actores:

Cliente y Jefe de Venta

Pre condiciones:

Debe registrarse el cliente ante de iniciar sesión en aplicación.

Secuencia:

1. El cliente debe de registrar las cajas de texto en cual se le pedirá los

Nombres, Apellidos, Correo electrónico, Contraseña y Dirección.

2. Se almacenara los datos ingresados del cliente.

3. El cliente debe de iniciar sesión con el correo electrónico y contraseña

permitiendo validar los datos ingresado al crear su cuenta en la aplicación.

4. Cerrar Sesión

Secuencia alterna:

1 a El cliente debe tener el permiso necesario al acceder al menú de la

aplicación.

1 a 1 Se muestra un mensaje en pantalla, en donde indique que se registre o

recuperar contraseña.

1 a 2 No podrá acceder al menú principal hasta que se registre.

1 a 3 Fin de caso de uso

Post Condiciones:

El respectivo cliente debe de ingresar correctamente los datos ingresado.


Metodología 53

2.5.3.2. Descripción de Caso de Comprar de Producto

CUADRO Nº 16

DESCRIPCIÓN CASO DE USO COMPRA DE PRODUCTO

Caso de Uso:

Compra de producto


El presente caso detalla el proceso de compra.

Actores:

Cliente

Pre condiciones:

Debe seleccionar el cliente la opción menú.

Secuencia:

1. El cliente Buscar por categoría los productos.

2. Consultar a la base de datos ingresados de la aplicación.

4. Cerrar Sesión

Secuencia alterna:

1 a El cliente debe seleccionar el catalogo

Post Condiciones:

Ninguna.


2.5.3.3. Descripción de Caso de Vizualizar Producto

CUADRO Nº 17

DESCRIPCIÓN CASO DE USO VISUALIZAR PRODUCTO

Caso de Uso:

Visualizar Producto


El presente caso presentara el producto con el precio.

Actores:

Cliente

Pre condiciones:

Metodología 54

Debe seleccionar producto el cliente.

Secuencia:

1. El cliente hacer un clic en el nombre del producto.

2. Consultar a la base de datos presentara las características del producto.

4. Cerrar Sesión

Secuencia alterna:

1 a El cliente debe seleccionar el producto al comprar

Post Condiciones:

Ninguna.


2.5.3.4. Descripción de Caso de Orden de Despacho

CUADRO Nº 18

DESCRIPCIÓN CASO DE USO DE ORDEN DE DESPACHO

Caso de Uso:

orden de despacho


El presente caso presentara el detalle de la compra.

Actores:

Cliente

Pre condiciones:

Debe seleccionar la visualización de la compra emitida por el cliente.

Secuencia:

1. El cliente hacer un clic presentara la orden de despacho.

2. Consultar a la base de datos la orden de despacho.

4. Cerrar Sesión

Secuencia alterna:

1 a Generar la orden de despacho aceptada por el administrador

Post Condiciones:

Ninguna.


Metodología 55

2.6. Modelamiento de Dominio

DIAGRAMA Nº 14

MODELO DE DOMINIO


CAPÍTULO III

PROPUESTA

3.1.1. Tema

Desarrollo de una aplicación hibrida para smartphone en el módulo

de venta de accesorios de seguridad industriales la empresa SUINDEC.

3.1.2. Objetivo

Desarrollar una aplicación hibrida para Smartphone para el manejo

del módulo de venta de accesorios de seguridad industrial en la empresa

SUINDEC.

3.1.3. Estudio de Factibilidad Operativa, Tecnológica y

Económica

Se presente análisis nos permitirá conocer la factibilidad de

desarrollar, logrando el beneficio de mejorar el proceso pedido dentro de

la entidad al realizar el desarrollo del proyecto.

3.1.3.1. Factibilidad Operativa

El presente estudio se analiza el proceso actual de recepción

donde se identificó el problema de la empresa, se requiere mejorar su

control y obtener una satisfacción del cliente al momento de adquirir un

producto en el departamento de venta donde este proceso debe de ser

más rápida y sencillo.

Propuesta 57

Tras el análisis realizado con las entrevistas y encuestas

realizadas, se logra determinar en qué parte operativa del departamento

de ventas en donde se está direccionado el presente proyecto está

acordado mejorar el proceso de recepción de pedido para los clientes en

cual a los vendedores y receptores de pedido se los capacitara en la

manipulación de la aplicación del proyecto a desarrollar.

3.1.3.2. Factibilidad Tecnológica

La finalidad del presente proyecto es identificar el uso de la

tecnológica acorde se va a trabajar durante el proceso de desarrollo,

cumpliendo con los requerimientos óptimos tanto como el software y

hardware. Los recursos tecnológicos a utilizar en aplicación móvil actual

de la empresa. A continuación una tabla de los requisitos mínimos para

hacer uso de la aplicación móvil.

CUADRO Nº 19

RECURSOS TECNOLÓGICOS

Recursos Requisitos Minos Componentes

Equipo PC Procesador Intel I3 - 3.60 GHz 4Gb Ram

Sistema Operativo Win 10

ReactNative

NodeJs

Laptop

Snartphone de gama Media S.O Android

Conexión Wifi Libre

Equipo servidor Procesador Core I3 – 540

Servidor Local


Para el software se requirió que instale el componente Chocolatey,

la conexión permanente con la Base de Datos Postrges que actualmente

se mantiene ene l departamento. Se recomienda para la utilización de la

aplicación móvil se utilice un sistema operativo Android 6.0 para la

ejecución del smartphone.

Propuesta 58

3.1.3.3. Factibilidad Económica

Para realizar el presente proyecto se ha seleccionado la

herramienta para el desarrollo bajo licencia freeware, de lo cual beneficia

la parte económica del desarrollo de la aplicación móvil. En la parte de

hardware los equipos informáticos a usarse están disponibles, siendo

parte del activo actual de la empresa. Como estimación económica se

procede a realizar los siguientes cuadros detallados a continuación.

CUADRO Nº 20

COSTO EN PERSONAL ESTIMADO

COSTO EN PERSONAL ESTIMADO

Categoría Cantidad Meses Sueldo Total

Coordinador de Proyecto 1 3 1500 4500

Desarrollador 1 3 800 2400

Analista de Pruebas 1 3 600 1800

Total 8700


CUADRO Nº 21

COSTO EN PERSONAL REAL

COSTO EN PERSONAL REAL

Categoría Cantidad Meses Sueldo Total

Coordinador de Proyecto

1 3 0 0

Desarrollador 1 3 0 0

Analista de Pruebas 1 3 0 0

Total 0


3.1.4. Entorno de Software

Para el diseño y analisis del software se proyectará la arquitectura

de 3 capas, utilizando la tecnología React Native, Para que se ejecuten

Propuesta 59

las funciones de nivel de negocio y automatizar el proceso de debido sin

necesidad que el usuario este llamado al convencional sino mediante el

entorno del software pueda elegir la cantidad y enviar su pedido en cual

se almacenara mediante una base de datos creada en PostgreSQL para

el nivel de acceso de datos o capa modelo.

3.2. Fase de Diseño

3.2.1. Modelo Entidad – Relación

DIAGRAMA Nº 15

DIAGRAMA MODELADO DE DATOS


Propuesta 60

3.2.2. Diagrama de Actividades

3.2.2.1.1. Diagrama de Actividad Ingreso al Sistema

DIAGRAMA Nº 16

DIAGRAMA DE ACTIVIDAD DE INGRESO AL SISTEMA


Propuesta 61

3.2.2.1.2. Diagrama de Actividad de Pedido

DIAGRAMA Nº 17

DIAGRAMA DE PEDIDO


Propuesta 62

3.2.2.1.3. Diagrama de Actividad Contacto

DIAGRAMA Nº 18

DIAGRAMA DE ACTIVIDAD DE CONTACTO


Propuesta 63

3.2.2.1.4. Diagrama de Actividad Despacho

DIAGRAMA Nº 19

DIAGRAMA DE ACTIVIDAD DE DESPACHO


Propuesta 64

3.2.3. Descripción del Diccionario de las Tablas

3.2.3.1. Descripción de la Tabla de Contacto

CUADRO Nº 22

TABLA DE CONTACTO

Universidad de

Guayaquil

Licenciatura en

Sistemas de

Información

DICCIONARIO DE

DATOS

Página 1 de 7

Fecha de

elaboración:

13/10/2017

PROYECTO SIES 1.0 INTEGRANTES: MOREIRA

FREIRE LUIS LIVINSTON

MODULO DE: Versión

1.0

TABLA: ACTIVIDAD TIPO TABLA: REGISTRO

DESCRIPCIÓN: Contiene datos de contacto que se realizaran en el SIES.

Descripción del registro

No. Nombre del

campo Definición Tipo Sec Formato Long Null

1 id Valor incremental E A I 32 Si

2 código Código PK A VC 50 No

3 Nombre Nombres PK M VC 50 No

4 apellido Apellidos E M VC 50 No

5 email Email E M VC 50 No

7 ocupación Ocupación E M VC 50 No

8 Teléfono Teléfono E M VC 50 No

9 Celular Celular E M VC 50 No

10 Dirección Dirección E M VC 0 No

OBSERVACIÓN:

Tipo

PK Clave Primaria

FK Clave Foránea

E Elemento de dato

Secuencia

A AUTOMATICA

M MANUAL

Formato

numérico

I Integer

S Small Integer

DC Decimal

M Money

Formato

caracter

C Char

VC

Varchar

Formato fecha

D Date

DT DateTime


Propuesta 65

3.2.3.2. Descripción de la Tabla de Detalle Pedido

CUADRO Nº 23

TABLA DE DETALLE PEDIDO

Universidad de Guayaquil

Licenciatura en

Sistemas de

Información

DICCIONARIO DE DATOS

Página 2 de 7

Fecha de

elaboración:

13/10/2017

PROYECTO SIES 1.0 INTEGRANTES:MOREIRA

FREIRE LUIS LIVINSTON MODULO DE: Versión 1.0


DESCRIPCIÓN: Contiene datos de Detalle Factura que se realizaran en el SIES.


No. Nombre del


1 id Valor incremental PK A I 32 No

2 cod_pedido Código Pedido E M VC 50 No

3 cod_factura Código Factura E M VC 50

No

OBSERVACIÓN:

Tipo

PK Clave Primaria

FK Clave Foránea

E Elemento de dato

Secuencia

A AUTOMATICA

M MANUAL

Formato

numérico

I Integer

S Small Integer

DC Decimal

M Money

Formato

caracter

C Char

VC

Varchar

Formato fecha

D Date

DT DateTime


Propuesta 66

3.2.3.3. Descripción de la Tabla de Detalle Despacho

CUADRO Nº 24

TABLA DE DETALLE FACTURA

Universidad de

Guayaquil

Licenciatura en

Sistemas de

Información DICCIONARIO DE DATOS

Página 2 de 7

Fecha de

elaboración:

13/10/2017




DESCRIPCIÓN: Contiene datos de Detalle Factura que se realizaran en el SIES.


No. Nombre del




3 n_producto Numero de Producto PK M I 32 No

4 cod_producto Código de producto E M VC 50 No

5 cantidad Iva 12% E M I 32 No

7 monto Monto E M M 0 No

OBSERVACIÓN:

Tipo

PK Clave Primaria

FK Clave Foránea

E Elemento de dato

Secuencia

A AUTOMATICA

M MANUAL

Formato

numérico

I Integer

S Small Integer

DC Decimal

M Money

Formato

caracter

C Char

VC

Varchar

Formato fecha

D Date

DT DateTime


Propuesta 67

3.2.3.4. Descripción de la Tabla de Orden de Despacho

CUADRO Nº 25

TABLA DE ORDEN DE DESPACHO

Universidad de

Guayaquil

Licenciatura en

Sistemas de

Información


Página 3 de 7

Fecha de

elaboración:

13/10/2017



MODULO DE: Versión

1.0


DESCRIPCIÓN: Contiene datos de actividades que se realizaran en el SIES.


No. Nombre del




3 cod_usuario Código de usuario E M VC 50 No

4 fecha Fecha E M DT 0 No

5 iva Iva 12% E M M 0 No

6 descuento Descuento E M M 0 Si

7 monto Monto E M M 0 No

8 total Total E M M 0 No

9 Estado_autorizado Autorización E M B 1

No

OBSERVACIÓN:

Tipo

PK Clave Primaria

FK Clave Foránea

E Elemento de dato

Secuencia

A AUTOMATICA

M MANUAL

Formato

numérico

I Integer

S Small Integer

DC Decimal

M Money

Formato

caracter

C Char

VC

Varchar

Formato fecha

D Date

DT DateTime


Propuesta 68

3.2.3.5. Descripción de la Tabla de Login

CUADRO Nº 26

TABLA DE LOGIN


Licenciatura en Sistemas

de Información DICCIONARIO DE DATOS

Página 4 de 7

Fecha de

elaboración:

13/10/2017



MODULO DE: Versión

1.0


DESCRIPCIÓN: Contiene datos de login que se realizaran en el SIES.


No. Nombre del

campo Definición Tipo Sec

Format

o Long Null

1 id Valor incremental PK A I 32 Si

2 cod_usuario Código de usuario E M VC 50

No

3 email Email E M VC 50

No

4 contrasena Contraseña E M VC 50

No

OBSERVACIÓN:

Tipo

PK Clave Primaria

FK Clave Foránea

E Elemento de

dato

Secuencia

A AUTOMATICA

M MANUAL

Formato numérico

I Integer

S Small Integer

DC Decimal

M Money

Formato

caracter

C Char

VC

Varchar

Formato fecha

D Date

DT DateTime


Propuesta 69

3.2.3.6. Descripción de la Tabla de Pedidos

CUADRO Nº 27

TABLA DE PEDIDOS




Página 4 de 7

Fecha de elaboración:

13/10/2017



MODULO DE: Versión

1.0


DESCRIPCIÓN: Contiene datos de pedidos que se realizaran en el SIES.


No. Nombre del



2 código Código PK M VC 50 No

3 cod_factura Código factura E M VC 50 No

4 cod_usuario Código usuario E M VC 50 No

5 estado Estado E M C 1 Si

OBSERVACIÓN:

Tipo

PK Clave Primaria

FK Clave Foránea

E Elemento de dato

Secuencia

A AUTOMATICA

M MANUAL

Formato

numérico

I Integer

S Small Integer

DC Decimal

M Money

Formato

caracter

C Char

VC

Varchar

Formato fecha

D Date

DT DateTime


Propuesta 70

3.2.3.7. Descripción de la Tabla de Productos

CUADRO Nº 28

TABLA DE PRODUCTOS

Universidad de

Guayaquil

Licenciatura en

Sistemas de

Información


Página 4 de 7

Fecha de elaboración:

13/10/2017



TABLA: ACTIVIDAD

TIPO TABLA: REGISTRO

DESCRIPCIÓN: Contiene datos de productos que se realizaran en el SIES.


No. Nombre del campo Definición Tipo Sec Formato Long Null



3 nombre Nombre E M VC 50 No

4 descripción Descripción E M VC 0 No

5 marca marca E M VC 50 No

6 precio precio E M M 0 No

7 Estado_garantia Garantia E M B 1 No

OBSERVACIÓN:

Tipo

PK Clave Primaria

FK Clave Foránea

E Elemento de dato

Secuencia

A

AUTOMATICA

M MANUAL

Formato

numérico

I Integer

S Small Integer

DC Decimal

M Money

Formato

caracter

C Char

VC

Varchar

Formato fecha

D Date

DT DateTime


Propuesta 71

3.2.3.8. Descripción de la Tabla de Usuario

CUADRO Nº 29

TABLA DE USUARIO




Página 4 de 7

Fecha de

elaboración:

13/10/2017



TABLA: ACTIVIDAD

TIPO TABLA: REGISTRO

DESCRIPCIÓN: Contiene datos de usuario que se realizaran en el SIES.


No. Nombre del




3 nombre Nombre E M VC 50 No

4 Apellido Apellido E M VC 50 No

5 Email email E M VC 50 No

6 Teléfono Teléfono E M VC 50 No

7 Dirección Dirección| E M VC 0 No

OBSERVACIÓN:

Tipo

PK Clave Primaria

FK Clave Foránea

E Elemento de dato

Secuencia

A AUTOMATICA

M MANUAL

Formato

numérico

I Integer

S Small Integer

DC Decimal

M Money

Formato

caracter

C Char

VC

Varchar

Formato fecha

D Date

DT DateTime


Propuesta 72

3.2.4. Diagramas de Diseño Robustez

3.2.4.1.1. Diagrama de Robustez de Login

DIAGRAMA Nº 20

DIAGRAMA DE ROBUSTEZ DE LOGIN


Análisis: El diagrama de Login nos ayuda al control de ingreso de

los usuarios que se encuentra registrado en la tabla usuario por motivo de

precaución.

3.2.4.1.2. Diagrama de Robustez de Agregar Contacto

DIAGRAMA Nº 21

DIAGRAMA DE ROBUSTEZ DE AGREGAR CONTACTO


Propuesta 73

Análisis: El diagrama de agregar contacto nos ayuda ver la lista de

contacto o cliente que tenemos más frecuentes en pedido en cual se

almacena en la tabla contacto.

3.2.4.1.3. Diagrama de Robustez de Modificar Contacto

DIAGRAMA Nº 22

DIAGRAMA DE ROBUSTEZ DE MODIFICAR CONTACTO


Análisis: El diagrama de modificar contacto nos ayuda ver la lista

de contacto o cliente que tenemos más frecuentes en pedido en cual se

almacena y actualiza la tabla contacto.

3.2.4.1.4. Diagrama de Robustez de Eliminar Contacto

DIAGRAMA Nº 23

DIAGRAMA DE ROBUSTEZ DE ELIMINAR CONTACTO


Propuesta 74

Análisis: El diagrama de eliminar contacto nos ayuda ver la lista de

contacto o cliente que tenemos más frecuentes en pedido en cual se

almacena y actualiza la tabla contacto.

3.2.4.1.5. Diagrama de Robustez de Agregar Orden de Despacho

DIAGRAMA Nº 24

DIAGRAMA DE ROBUSTEZ DE AGREGAR ORDEN DE DESPACHO


Análisis: El diagrama de agregar orden de despacho nos ayuda

visualizar el detalle de los pedidos del cliente en cual se almacena en la

tabla orden de despacho.

3.2.4.1.6. Diagrama de Robustez de Modificar Orden de Despacho

DIAGRAMA Nº 25

DIAGRAMA DE ROBUSTEZ DE MODIFICAR ORDEN DE DESPACHO


Propuesta 75

Análisis: El diagrama de modificar orden de despacho nos ayuda

actualizar el detalle de los pedidos del cliente en cual se almacena en la

tabla orden de despacho.

3.2.4.1.7. Diagrama de Robustez de Eliminar Orden de Despacho

DIAGRAMA Nº 26

DIAGRAMA DE ROBUSTEZ DE ELIMINAR ORDEN DE DESPACHO


Análisis: El diagrama de eliminar orden de despacho nos ayuda

eliminar y actualizar el detalle de los pedidos del cliente en cual se

almacena en la tabla orden de despacho.

3.2.4.1.8. Diagrama de Robustez de Agregar Pedido

DIAGRAMA Nº 27

DIAGRAMA DE ROBUSTEZ DE AGREGAR PEDIDO


Propuesta 76

Análisis: El diagrama de agregar pedido nos ayuda visualizar el

detalle de los pedidos del cliente en cual se almacena en la tabla pedido.

3.2.4.1.9. Diagrama de Robustez de Modificar Pedido

DIAGRAMA Nº 28

DIAGRAMA DE ROBUSTEZ DE MODIFICAR PEDIDO


Análisis: El diagrama de modificar pedido nos ayuda visualizar el


3.2.4.1.10. Diagrama de Robustez de Eliminar Pedido

DIAGRAMA Nº 29

DIAGRAMA DE ROBUSTEZ DE ELIMINAR PEDIDO


Propuesta 77

Análisis: El diagrama de eliminar pedido nos ayuda visualizar el


3.2.5. Diagramas de Secuencia

3.2.5.1.1. Diagrama de Secuencia Login

DIAGRAMA Nº 30

DIAGRAMA DE SECUENCIA DE LOGIN


3.2.5.1.2. Diagrama de Secuencia Contacto

DIAGRAMA Nº 31

DIAGRAMA DE SECUENCIA DE CONTACTO


Propuesta 78

3.2.5.1.3. Diagrama de Secuencia Pedido

DIAGRAMA Nº 33

DIAGRAMA DE SECUENCIA DE PEDIDO


3.2.5.1.4. Diagrama de Secuencia Orden de Despacho

DIAGRAMA Nº 34

DIAGRAMA DE SECUENCIA DE ORDEN DE DESPACHO


Propuesta 79

3.2.6. Descripción Prototipo

3.2.6.1. Pantalla Inicio de Sesión y sus Controladores

CUADRO Nº 30

PANTALLA INICIO DE SESIÓN


Licenciatura en Sistemas de Información

DISEÑO DE PANTALLAS

Página 1 de 4

Fecha de elaboración

Login INTEGRANTE: MOREIRA FREIRE LUIS LIVINSTON

DESARROLLO DE UNA APLICACIÓN HIBRIDA PARA

SMARTPHONE EN EL MÓDULO DE VENTA DE ACCESORIOS DE SEGURIDAD INDUSTRIALES

LA EMPRESA SUINDEC

Nombre Físico: Login Nombre Lógico:

Nombre del Objeto Nombre Campo Contenido

TxtCorreo Correo Correo Electrónico

TxtContraseña Contraseña Contraseña

BtnIngresar Ingresar Opción Acceso

BtnCrear Crear una Cuenta Opción Registrarse

DESCRIPCION: Esta pantalla permite el acceso valido de los usuarios registrados

FRECUENCIA DE USO: Cada vez que el usuario quiera acceder al menú


Propuesta 80

3.2.6.2. Pantalla Registro y sus Controladores

CUADRO Nº 31

PANTALLA REGISTRO




Página 2 de 4


Registro

INTEGRANTE: MOREIRA FREIRE LUIS LIVINSTON

DESARROLLO DE UNA APLICACIÓN HIBRIDA PARA SMARTPHONE EN EL

MÓDULO DE VENTA DE ACCESORIOS DE SEGURIDAD

INDUSTRIALES LA EMPRESA SUINDEC

Nombre Físico: Registro Nombre Lógico:


TxtNombres Nombres Correo Electrónico

TxtApellidos Apellidos Contraseña

TxtCorreo Correo Correo

TxtTelefono Teléfono Teléfono

TxtDireccion Dirección Dirección

TxtContraseña Contraseña Contraseña

TxtXConf_Contraseña Confirmar Contraseña Confirmar Contraseña

BtnRegistrarse Registrarse Opción Registrarse

BtnLimpiar Limpiar Opción Limpiar campo

DESCRIPCION: Esta pantalla permite el registro de los usuarios en cual van iniciar sesión en la aplicación

FRECUENCIA DE USO: Cada vez que un nuevo usuario deberá registrarse una sola vez


Propuesta 81

3.2.6.3. Pantalla Característica Producto y sus Controladores

CUADRO Nº 32

PANTALLA CARACTERÍSTICA PRODUCTO




Página 3 de 4


Características del Producto


DESARROLLO DE UNA APLICACIÓN HIBRIDA PARA

SMARTPHONE EN EL MÓDULO DE VENTA DE ACCESORIOS DE SEGURIDAD INDUSTRIALES

LA EMPRESA SUINDEC

Nombre Físico: Características del Producto Nombre Lógico:


LblNombres Ventas Ventas

LblApellidos Comprar Comprar

LblCorreo Producto Producto

DESCRIPCION: Esta pantalla permite la presentación de los productos seleccionados

FRECUENCIA DE USO: Cada vez podrá ver los productos seleccionados por el usuario


Propuesta 82

3.2.6.4. Pantalla Producto y sus Controladores

CUADRO Nº 33

PANTALLA PRODUCTO




Página 4 de 4


Visor de

Producto


DESARROLLO DE UNA APLICACIÓN HIBRIDA PARA SMARTPHONE EN EL

MÓDULO DE VENTA DE ACCESORIOS DE SEGURIDAD

INDUSTRIALES LA EMPRESA SUINDEC

Nombre Físico: Visor de Menu Nombre Lógico:


Lblpaginalp Página Principal Página Principal

Lblindautomotriz Industria Automotriz Industria Automotriz

Lblesoldaria Equipos Soldadura Equipo soldadura

Lblsindus Seguridad Industrial Seguridad Industrial

Lblpinindus Pintura Industrial Pintura Industrial

DESCRIPCION: Esta pantalla permite la presentación de los menu

FRECUENCIA DE USO: Cada vez el usuario podrá ver el menú. Fuente: Investigación de campo Elaborado por: Moreira Freire Luís Livinston

Propuesta 83


CUADRO Nº 34

PANTALLA PRODUCTO

Universidad de Guayaquil Licenciatura en Sistemas

de Información

DISEÑO DE

PANTALLAS

Página 4 de 4

Fecha de

elaboración

Visor de Producto


DESARROLLO DE UNA APLICACIÓN

HIBRIDA PARA SMARTPHONE EN EL

MÓDULO DE VENTA DE ACCESORIOS

DE SEGURIDAD INDUSTRIALES

LA EMPRESA SUINDEC

Nombre Físico: Visor de característica producto

Nombre Lógico:


Lblcodigo Código Código

Txtcodigo Texto codigo ---

Lblmar Marca Marca

Txtmar Texto marca ---

Lblpreu Precio Unitario Precio Unitario

Txtpreu Texto unitario ---

Lbluni Unidades Unidades

Txtuni Texto unidades ----

DESCRIPCION: Esta pantalla permite la presentación de las características productos seleccionados y emitir la compra

FRECUENCIA DE USO: Cada vez el usuario podrá ver el detalle de las características producto.


Propuesta 84


CUADRO Nº 35

PANTALLA PRODUCTO




Página 4 de 4


Visor de

Producto


DESARROLLO DE UNA APLICACIÓN HIBRIDA PARA SMARTPHONE EN EL MÓDULO DE VENTA DE ACCESORIOS

DE SEGURIDAD INDUSTRIALES LA EMPRESA SUINDEC

Nombre Físico: Visor de Productos Nombre Lógico:


LblNombres Nombre del Producto Producto

ImgNombre Imagen del Producto Imagen del Producto

LblPrecio Precio Precio

BtnComprar Comprar Comprar

BtnCaracteristicas Características Características del producto

DESCRIPCION: Esta pantalla permite la presentación de los productos seleccionados y emitir la compra

FRECUENCIA DE USO: Cada vez el usuario podrá ver el detalle del producto.


Propuesta 85

3.2.6.7. Pantalla Detalle de Orden de Compra

CUADRO Nº 36

PANTALLA DETALLE DE ORDEN DE COMPRA




Página 4 de 4


Visor de

Producto


DESARROLLO DE UNA APLICACIÓN HIBRIDA PARA SMARTPHONE EN EL MÓDULO DE VENTA DE ACCESORIOS

DE SEGURIDAD INDUSTRIALES LA EMPRESA SUINDEC

Nombre Físico: Visor de detalle de factura Nombre Lógico:


Lblcodigo Código Código

Txtcodigo Texto codigo ---

Lblmar Marca Marca

Txtmar Texto marca ---

Lblpreu Precio Unitario Precio Unitario

Txtpreu Texto unitario ---

Lbluni Unidades Unidades

Txtuni Texto unidades ----

Lblpaga Total pagar Total pagar

Txtpaga Total pagar ----

Btncomprar Comprar Comprar

DESCRIPCION: Esta pantalla permite la presentación emitir la compra

FRECUENCIA DE USO: Cada vez el usuario podrá emitir la compra


Propuesta 86

3.2.7. Manual de Instalación

CUADRO Nº 37

MANUAL DE INSTALACIÓN

1.- Ingresa a Google Play

2.- Buscamos la aplicación Suindec S.A.

3.- Hacemos clic en

instalar

4.- Descarga la

aplicación

5.- Aplicación

Instalada


Observación: La aplicación aún no ha sido subida a la plataforma

por motivo que la empresa SUINDEC S.A. todavía loa adquiere un

espacio en el servidor de Google por motivo de contratación. Solo se ha

instalado de manera manual la aplicación mediante un celular con S.O.

Android.

Propuesta 87

3.2.8. Diagrama de Conexión

DIAGRAMA Nº 35

DIAGRAMA DE CONEXION


3.2.9. Conclusiones

El presente proyecto determino con los requerimientos funcionales

que se obtuvieron por el departamento de ventas, en cual consiste la

automatización de pedidos mediante una aplicación móvil en cual el

cliente podrá visualizarlo sin problemas.

La aplicación móvil presente se desarrolló mediante el Framework

ReactNative y enlazado mediante una base de datos Postgres en cual el

cliente podrá descargarlo desde la tienda Google Play registrándose

mediante un usuario y contraseña podrá acceder a la aplicación

permitiendo despachase sin necesidad de llamar a la empresa por vía

Telefónica.

La aplicación se encuentra dentro del servidor de Google Play para

su descarga para el cliente en cual con la búsqueda correcta podrán

acceder a la aplicación de Suindec.

Propuesta 88

3.2.10. Recomendaciones

Capacitar a los clientes en el manejo de las diferentes ventanas

que se utiliza en las aplicación de Smartphone tales como la recepción de

pedidos, visualización de los productos en stock, emisión de orden de

despacho y confirmación de entrega para los clientes de la compañía.

Realizar un respaldo de la base de datos semanal para evitar la

pérdida de información de los clientes causado por los ataques

cibernéticos de los hackers.

Actualizar la aplicación en la tabla producto frecuentemente para

dar a conocer a los clientes los diferentes tipos de mercaderías que se

encuentran en stock así como las promociones y descuentos que se

realizan ocasionalmente.

Analizar la incorporación de nuevos módulos que permitan mejorar

la atención al cliente, la eficiencia de la compañía y las mejoras que se

puedan realizar a los productos o al proceso de entrega.

GLOSARIO DE TÉRMINOS

Android.- Es sistema operativo que se emplea en dispositivos

móviles, por lo general con pantalla táctil. De este modo, es posible

encontrar tabletas (tablets), teléfonos móviles (celulares) y relojes

equipados con Android, aunque el software también se usa en

automóviles, televisores y otras máquinas.

API.- es un conjunto de funciones y procedimientos que cumplen

una o muchas funciones con el fin de ser utilizadas por otro software. Las

siglas API vienen del inglés Application Programming Interface. En

español sería Interfaz de Programación de Aplicaciones.

Browser.- Un software que permite la visualización de los

contenidos que presenta una página web. Este tipo de programa

informático dispone de las herramientas que se necesitan para la

interpretación del código de una página, que puede estar compuesto por

uno o más lenguajes de programación.

CSS.- (Cascading Style Sheets, u Hojas de Estilo en Cascada) es

la tecnología desarrollada por el World Wide Web Consortium (W3C) con

el fin de separar la estructura de la presentación. Aun así se podía

asegurar una visualización correcta de la misma hoja de estilos.

DNS.- Es un sistema de nomenclatura jerárquico descentralizado

para dispositivos conectados a redes IP como Internet o una red privada.

Framework.- En el desarrollo de software, un entorno de trabajo es

una estructura conceptual y tecnológica de asistencia definida,

normalmente, con artefactos o módulos concretos de software, que puede

servir de base para la organización y desarrollo de software.

Glosario de Términos 90

Google Chrome.- Es un navegador web desarrollado por Google y

compilado con base en varios componentes e infraestructuras de

desarrollo de aplicaciones (frameworks) de código abierto, como el motor

de renderizado Blink (bifurcación o fork de WebKit).

GPS.- las siglas “Global Positioning System” que en español

significa “sistema de posicionamiento global”.

HTML5.- Es un lenguaje markup (de hecho, las siglas de HTML

significan Hyper Text Markup Language) usado para estructurar y

presentar el contenido para la web.

HTTP.- Es un protocolo de transferencia donde se utiliza un

sistema mediante el cual se permite la transferencia de información entre

diferentes servicios y los clientes que utilizan páginas web.

Interfaz del Usuario.- Es el medio con que el usuario puede

comunicarse con una máquina, equipo, computadora o dispositivo, y

comprende todos los puntos de contacto entre el usuario y el equipo.

Java Development Kit.- es un software que provee herramientas

de desarrollo para la creación de programas en Java. Puede instalarse en

una computadora local o en una unidad de red. En la unidad de red se

pueden tener las herramientas distribuidas en varias computadoras y

trabajar como una sola aplicación.

Javascript.- s un lenguaje de programación interpretado, dialecto

del estándar ECMAScript. Se define como orientado a objetos, basado en

prototipos, imperativo, débilmente tipado y dinámico.

Jquery.- s un framework de JavaScript para facilitar, entre otros, el

acceso a los elementos del DOM, los efectos, interactuar con los

documentos HTML, desarrollar animaciones y agregar interacción con la

tecnología AJAX a páginas web.


Lógica de Negocio.- En informática y ciencias de la computación,

en particular en análisis y diseño orientado a objetos, el término lógica de

negocio es la parte de un sistema que se encarga de codificar las reglas

de negocio del mundo real que determinan cómo la información puede ser

creada, mostrada y cambiada. En programación es una de las capas del

modelo MVC Modelo–vista–controlador separando así la complejidad del

desarrollo en capas independientes.

Memoria caché.- Es un búfer especial de memoria que poseen las

computadoras, que funciona de manera semejante a la memoria principal,

pero es de menor tamaño y de acceso más rápido.

MySQL.- Es un sistema de gestión de bases de datos relacional

desarrollado bajo licencia dual GPL/Licencia comercial por Oracle

Corporation y está considerada como la base datos open source más

popular del mundo, y una de las más populares en general junto a Oracle

y Microsoft SQL Server, sobre todo para entornos de desarrollo web.

Oracle Database.- Es un sistema de gestión de base de datos de

tipo objeto-relacional (ORDBMS, por el acrónimo en inglés de Object-

Relational Data Base Management System), desarrollado por Oracle

Corporation.

PHP acrónimo recursivo de PHP: Hypertext Preprocessor).- es

un lenguaje de código abierto muy popular especialmente adecuado para

el desarrollo web y que puede ser incrustado en HTML.

PostgreSQL.- es un potente sistema de base de datos objeto-

relacional de código abierto. Cuenta con más de 15 años de desarrollo

activo y una arquitectura probada que se ha ganado una sólida reputación

de fiabilidad e integridad de datos.

Proceso.- Conjunto de las fases sucesivas de un fenómeno o de

una serie de fenómenos.


SDK (Software Development Kit, o kit de desarrollo de

software).- Es un conjunto de herramientas que ayudan a la

programación de aplicaciones para un entorno tecnológico particular.

Servidor Local.- Se instala por medio de un programa para

permitirnos probar y navegar la página web que vayamos a crear desde

nuestro equipo personal. Las páginas se acceden siempre mediante una

dirección o url, el acceso para navegar en nuestro equipo se conoce como

localhost.

Servicios Rest.- Un recurso se puede considerar como una

entidad que representa un concepto de negocio que puede ser accedido

públicamente.

Servidor Web.- Es un programa informático que procesa una

aplicación del lado del servidor, realizando conexiones bidireccionales o

unidireccionales y síncronas o asíncronas con el cliente y generando o

cediendo una respuesta en cualquier lenguaje o Aplicación del lado del

cliente.

SSL.- Secure Sockets Layer es un protocolo diseñado para permitir

que las aplicaciones para transmitir información de ida y de manera

segura hacia atrás.

TCP/IP.- Son las siglas de Protocolo de Control de

Transmisión/Protocolo de Internet (en inglés Transmission Control

Protocol/Internet Protocol), un sistema de protocolos que hacen posibles

servicios Telnet, FTP, E-mail, y otros entre ordenadores que no

pertenecen a la misma red.

TLS.- Transport Layer Security (Seguridad en la Capa de

Transporte), un protocolo criptográfico empleado en redes. The Times


Literary Supplement, una revista literaria. Aeropuerto de Toulouse-

Blagnac (Francia), en su código IATA.

UML.- s el lenguaje de modelado de sistemas de software más

conocido y utilizado en la actualidad; está respaldado por el Object

Management Group (OMG).

Virus.- Es un software que tiene por objetivo alterar el

funcionamiento normal del ordenador, sin el permiso o el conocimiento del

usuario. Los virus, habitualmente, reemplazan archivos ejecutables por

otros infectados con el código de este.

Web.- Se utiliza en el ámbito tecnológico para nombrar a una red

informática y, en general, a Internet (en este caso, suele escribirse como

Web, con la W mayúscula).

Widget.- es una pequeña aplicación o programa, usualmente

presentado en archivos o ficheros pequeños que son ejecutados por un

motor de widgets o Widget Engine. Entre sus objetivos están dar fácil

acceso a funciones frecuentemente usadas y proveer de información

visual.

ANEXOS

Anexos 95

ANEXO Nº 1

CRONOGRAMA


Anexos 96

ANEXO Nº 2

FORMATO DE ENCUESTA




Preguntas 1 2 3 4 5

Se encuentra satisfecho con el proceso de hacer

pedido por vía telefónica (Convencional).

Cuál es el dispositivo móvil más adecuado para

visualizar esta aplicación.

Tienes acceso a internet en su dispositivo móvil.

Considera adecuado el uso de aplicaciones móviles

para realizar pedido de accesorios industriales

Desea visualizar el catálogo de producto con su

respectivo precio

Le gustaría registrarse sin pago alguno en nuestro

servicio de compra.

Desea que la aplicación móvil le genere una factura

con el detalle de la compra.


Anexos 97

ANEXO Nº 3

MANUAL DE USUARIO

Implementación del Sistema

Requerimientos de Hardware

• Smartphone.

• Conexión a Internet.

Requerimientos de Software

• Sistema operativo Android.

• PlayStore

Para Iniciar una Sesión

La pantalla de inicio en la aplicación

está conformado por:

Cabecera se encuentra el logo

de la empresa

Cuerpo tenemos el correo y

contraseña en cual el usuario

registrado podrá acceder a la

aplicación.

Anexos 98

Pie de la aplicación se encuentra

conformado por:

Botón de Ingresar

Botón de Crear una Cuenta

Pantalla de Registro

Botón de Crear una Cuenta

Pantalla de Registro está

conformado por:

Nombres

Apellidos

Correo

Teléfono

Dirección

Contraseña

Confirmar Contraseña

Anexos 99

Funcionalidad General

Botón de Ingresar

Cabecera de cada producto

se encuentra el nombre

debajo podremos visualizar

el producto

Debajo del producto

encontramos el botón del

carrito de y el precio

Unitario del Producto

Pantalla flotante que se

encuentra conformada por:

En donde se navegar a diferentes

pantallas de la aplicación.

Anexos 100

Hacer clic botón del carrito

de

Presenta una pantalla

flotante con las

características del producto

en cual están conformado

por:

Pie de la pantalla

encontramos el botón

El usuario añade al detalle

de la compra.

Pie de la pantalla encontramos

el botón

El usuario añade al detalle de

la compra.

Detalle de la factura podremos

ver el valor a pagar de la

compra donde está

conformado por:

Anexos 101

Pie de la pantalla

encontramos el botón

El usuario añade al detalle de

la compra.

Se podrá seleccionar el tipo

de pago en cual nos envía

una pantalla flotante

Se podrá seleccionar el tipo

de pago en cual nos envía

una pantalla flotante

Tenemos conformado dos

botones por:

Continuar

Limpiara carrito

Anexos 102

En cual la factura se

encontraría en el correo electrónico

del cliente.


Anexos 103

ANEXO Nº 4

CARTA DE IMPLEMENTACIÓN DEL SISTEMA


BIBLIOGRAFÍA

Acosta Gonzaga, E., & Álvarez Cedillo, J. (30 de Mayo de 2007).

Recuperado el 28 de Julio de 2017, de

http://www.polibits.gelbukh.com/2006_34/Arquitecturas%20en%20n

-Capas_%20Un%20Sistema%20Adaptivo.pdf

Aggarwal, A. (3 de Abril de 2017). medium.com. Recuperado el 25 de

Julio de 2017, de https://medium.com/@ankushaggarwal/ionic-vs-

react-native-3eb62f8943f8

Alcarez, M. (02 de Enero de 2014). Desarrollo web. Recuperado el 26 de

Mayo de 2017, de https://desarrolloweb.com/articulos/que-es-

mvc.html

Aparicio Garcia, C. (Diciembre de 2008). Repositorio Itesm mx.


https://repositorio.itesm.mx/ortec/bitstream/11285/568982/1/DocsTe

c_6843.pdf

Arizabaleta Rodríguez, A., & Ávila Ávila, G. (Marzo de 2012).

Repositorio Universidad EAN. Recuperado el 30 de Julio de 2017,

de

http://repository.ean.edu.co/bitstream/handle/10882/1622/AvilaGiov

anny2012.pdf?sequence=2

Artes, J. (24 de Octubre de 2016). octuweb. Recuperado el 10 de Julio

de 2017, de https://octuweb.com/nuestra-primera-app-nativa-react-

native/

Bibliografía 105

Borrego Huerta, Á. (31 de Agosto de 2009). diposit.ub.edu. Recuperado

el 29 de Julio de 2017, de

http://diposit.ub.edu/dspace/bitstream/2445/32244/1/501685.pdf

Cacho Zueco, P. (2013). Biblioteca Unirioja. Recuperado el 15 de Julio

de 2017, de https://biblioteca.unirioja.es/tfe_e/R000001695.pdf

Camargo Stummo, N., & Cervantes López, L. (2014). studylib.es.

Recuperado el 8 de Agosto de 2017, de

http://studylib.es/doc/802208/investigacion-exploratoria--

estudiantes--camargo-stummo-n...

Chocolatey. (15 de Julio de 2017). chocolatey.org. Recuperado el 25 de

Julio de 2017, de https://chocolatey.org/about

Clodoaldo Robledo, S., & Robledo Fernández, D. (2016). Progrmación

en Android. España: Aula Mentor. Recuperado el 6 de Julio de

2017, de eduacion.es

Crece Negocios. (6 de Noviembre de 2013).

https://www.crecenegocios.com/tecnicas-de-investigacion-de-

mercados/. Recuperado el 9 de Agosto de 2017, de

https://www.crecenegocios.com/tecnicas-de-investigacion-de-

mercados/

Denzer, P. (23 de Octubre de 2010). profesores.elo.utfsm.cl. Recuperado

el 28 de Mayo de 2017, de

http://profesores.elo.utfsm.cl/~agv/elo330/2s02/projects/denzer/info

rme.pdf

Explorable. (15 de Noviembre de 2009). explorable.com. Recuperado el

12 de Agosto de 2017, de https://explorable.com/es/poblacion-de-

la-investigacion

Bibliografía 106

Flores, M. (2015). html5facil.com. Recuperado el 26 de Mayo de 2017, de

http://html5facil.com/tutoriales/introduccion-angularjs/

García Muñoz, T. (2005). educar.unileon.es. Recuperado el 12 de Agosto

de 2017, de

http://educar.unileon.es/Antigua/Diversid/Webquest/poblacionmuest

ra.doc

González Macavilca, M., & Saraza Grande, J. (2014). Repositorio

Academico USMP. Recuperado el 16 de Julio de 2017, de

http://www.repositorioacademico.usmp.edu.pe/bitstream/usmp/120

2/3/gonzalez_mmae.pdf

Horacio, L., & Maite, R. (2011). Investigación cualitativa: Construcción y

reflexividad. Revista Tesis, 1,

https://revistas.unc.edu.ar/index.php/tesis/article/view/4122/3944.


https://revistas.unc.edu.ar/index.php/tesis/article/view/4122/3944

Ionicframework. (s.f.). ionicframework.com. Recuperado el 24 de Mayo

de 2017, de http://ionicframework.com/docs/intro/concepts/

Kearn, M. (5 de Enero de 2015). blogs.msdn.microsoft.com. Recuperado

el 27 de Mayo de 2015, de

https://blogs.msdn.microsoft.com/martinkearn/2015/01/05/introducti

on-to-rest-and-net-web-api/

Kuznik, A., Hurtado, A., & Espinal, A. (22 de Mayo de 2010). rua.ua.es.

Recuperado el 10 de Agosto de 2017, de

https://rua.ua.es/dspace/bitstream/10045/16450/1/MonTI_2_15.pdf

Morán Esparza, J. (Julio de 2007). eumed.net. Recuperado el 9 de

Agosto de 2017, de http://www.eumed.net/ce/2007b/jlm.htm

Bibliografía 107

Navarro Marset, R. (27 de Noviembre de 2007). users.dsic.upv.es.

Recuperado el 16 de Mayo de 2017, de

http://users.dsic.upv.es/~rnavarro/NewWeb/docs/RestVsWebServic

es.pdf

Perez Rivas, J. (15 de Enero de 2015). www.phonegapspain.com.

Recuperado el 25 de Mayo de 2017, de

http://www.phonegapspain.com/que-es-y-como-empezar-con-ionic-

framework/

Riveras Cazares, G. (2015). Repositorio U.G. Recuperado el 29 de Julio

de 2017, de

http://repositorio.ug.edu.ec/bitstream/redug/7981/1/TESIS%20FINA

L%20G-RIVERA%20aprobada.pdf

ROSENBERG, D., & STEPHENS, M. (2007). Use Case Driven Object

Modeling with UML. : 1era ed. New York.

Salinas, P. (26 de Septiembre de 2016). botica.com.ve. Recuperado el 8

de Agosto de 2017, de

http://botica.com.ve/PDF/metodologia_investigacion.pdf

Tamayo, M. (2004). EL PROCESO DE LA INVESTIGACION CIENTIFICA.

Mexico: LIMUSA. Recuperado el 27 de Julio de 2017, de

https://books.google.com.ec/books?id=BhymmEqkkJwC&printsec=f

rontcover&hl=es#v=onepage&q&f=false

Toro Oyarzún, S. (2011). Telematica Utfsm. Recuperado el 28 de Julio de

2017, de

http://www.telematica.utfsm.cl/telematica/site/artic/20121008/asocfil

e/20121008171131/hottklaus.pdf

Bibliografía 108

Ulin, P., Robinson, E., & Tolley, E. (2016). Investigacion Apliacada a la

Salud. Washington: Family Health Internacional. Recuperado el 26

de Julio de 2017, de

https://books.google.com.ec/books?id=2N7zCEl2BbAC&printsec=fr

ontcover&hl=es#v=onepage&q&f=false

Vallejo, C. (Julio de 31 de 2017). docgo.org. Recuperado el 1 de Agosto

de 2017, de https://docgo.org/tb-byW9vci

universidad de guayaquil facultad de ingenierÍa...

Documents