Easy Shopping

APLICACIÓN PARA DISPOSITIVOS MÓVILES CON SISTEMA OPERATIVO
ANDROID COMO HERRAMIENTA DE APOYO AL USUARIO QUE LE PERMITA

OBTENER LA INFORMACIÓN Y UBICACIÓN EXACTA DE LOS PRODUCTOS
EXISTENTES EN EL SUPERMERCADO OLÍMPICA BASADO EN SU LISTA DE
COMPRA
RODRIGO ROMERO MEJÍA

JAMES DALIN CÁRDENAS BENÍTEZ
DIRECTOR:
ING. MARIO MACEA ANAYA
UNIVERSIDAD DE CORDOBA
FACULTAD DE INGENIERIAS
INGENIERIA DE SISTEMAS
LORICA –CÓRDOBA
2016
1
APLICACIÓN PARA DISPOSITIVOS MÓVILES CON SISTEMA OPERATIVO
ANDROID COMO HERRAMIENTA DE APOYO AL USUARIO QUE LE PERMITA
OBTENER LA INFORMACIÓN Y UBICACIÓN EXACTA DE LOS PRODUCTOS
EXISTENTES EN EL SUPERMERCADO OLÍMPICA BASADO EN SU LISTA DE
COMPRA
RODRIGO ROMERO MEJÍA

JAMES DALIN CÁRDENAS BENÍTEZ
DIRECTOR:
ING. MARIO MACEA ANAYA
UNIVERSIDAD DE CORDOBA
FACULTAD DE INGENIERIAS
INGENIERIA DE SISTEMAS
LORICA –CÓRDOBA
2016
2
HOJA DE ACEPTACIÓN
____________________________________
____________________________________
____________________________________
____________________________________
____________________________________
____________________________________
____________________________________
FIRMA PRESIDENTE DEL JURADO
____________________________________
FIRMA DEL JURADO
____________________________________
FIRMA DEL JURADO
3
AGRADECIMIENTOS
“El bien hacer abre muchas puertas, en cambio el mal agradecer las cierra”
Por lo tanto, y a partir de aquí, quiero agradecer a Dios, por concedernos el conocimiento
necesario y la fortaleza para enfrentar cualquier adversidad, y a todas las personas, que de una
forma u otra, han estado con nosotros durante estos años de arduo sacrificio.
A Compañeros a los que no nos cansamos de ver, otros a los que hace mucho tiempo no vemos y
algunos a los que a lo mejor nunca volveremos a ver, pero de los que tenemos un estupendo
recuerdo. Gente que ha pasado muy precipitadamente por nuestras vidas y personas con las que
queremos pasar el resto de ella y a quienes vamos a estar eternamente agradecidos.
Muchas de estas personas tienen nombres propios y en las siguientes líneas quiero acordarme de
ellas.
Por ello, y en primer lugar, queremos agradecer a nuestro tutor; Mario Macea Anaya, por todo lo
que aprendimos durante el tiempo en el que nos brindó sus conocimientos y por haber confiado en
nosotros para llevar a cabo este proyecto.
Queremos también acordarnos de todos los compañeros que hemos tenido en común durante el
transcurso de la carrera; llámense, Dilson, Yosimar, Cesar, Brian, Yoarlys, Carlos, Ana,
Alexander, Fabián, Jesús, Leonor, Albeiro, Mara, Jaidith, Yilson, Silvia un prolongado etcétera,
que aunque no los nombre son igual de importantes
Para acabar, queremos agradecer a nuestras familias, de las cuales estamos totalmente orgulloso.
Nuestros padres, hermanos, abuelos, por proveernos tanto y pedirnos tan poco y a los cuales
queremos muchísimo.
A todos, muchas gracias.

Rodrigo Romero Mejía
James D. Cárdenas Benítez
Mayo 2016
4
DEDICATORIA
La ejecución final de este proyecto de carrera representa uno de esos momentos de la vida
en los que vale la pena echar la vista atrás y hacer un balance de todo lo sucedido en el
transcurso de esa lucha incansable por aprender y ser cada día mejores personas.
En primera instancia le dedico este triunfo a Dios por permitirme estar vivo y haberme
guiado por el buen sendero de la vida, por brindarme la sabiduría necesaria para afrontar
cada obstáculo presente en el transcurso de la carrera.
A mi madre Aris Mejía quien me brindo ese apoyo incondicional, por estar conmigo en cada
etapa de mi vida y por ser más que madre, también eres una excelente amiga.
A mi padre Orlando Romero, que es transparente como el agua por ser siempre el punto de
apoyo de este proyecto, por ser mi amigo, mi hermano, mi enemigo de vez en cuando, pero
ante todo el mejor padre del mundo siempre brindándome consejos de vida, por brindarme
su confianza cada día, por todo eso te dedico principalmente este triunfo a ti papá.
También le dedico este proyecto a una persona muy especial que la considero una madre
más, a usted Naudis Medrano por ser esa consejera que a diario me brindo sus
conocimientos para no padecer y quedar corto en la vida. Gracias por todo Seño Naudis.
A mi familia, Hermanos, tíos, primos y abuelos quisiera poder describirlos a todos, mis
palabras no alcanzarían para agradecer su cariño y palabras de aliento. ”Gracias por estar
siempre presentes.”
A mi hija Karolay Sofía Romero es el motivo por el cual seguir adelante, para cumplir mis
metas y así poder brindarle una mejor calidad de vida.
A mis amigos, por hacer parte de este grandioso proyecto y contribuir con su grano de arena
la finalización de este.
Rodrigo Romero Mejía
5
DEDICATORIA
Inicialmente le dedico este proyecto a Dios por ser el veedor de todas las cosas maravillosas
que me sucedieron en el trascurso de mi carrera.
A mis abuelos Orlando Benítez y Aidé Porto por ser los motores de todo este proyecto, por
brindarme su apoyo cada día y con la esperanza que saldría adelante por mis méritos,
principalmente a ellos les dedico este éxito por siempre acompañarme desde mi infancia
hasta esta etapa de mi vida.
A mi hijo Dilan Cárdenas quien es el motivo para luchar para brindarle lo que no tuve yo y
así mejor su calidad de vida y que no le falte nada
James Dalin Cárdenas Benítez
6
RESUMEN
Como una nueva plataforma para el desarrollo de aplicaciones móviles la liberación
de android ha causado una gran expectativa, esta plataforma tiene una significativa
aceptación tanto por los usuarios como por la industria.
La realización de poderosas y ligeras aplicaciones basadas en Android, permiten
tener un acercamiento con el usuario, es por ello que este proyecto pretende
mostrar el diseño y desarrollo de una aplicación Android con el fin de facilitar la
compra de productos en un supermercado específico, mostrando el precio,
ubicación y ofertas de dichos productos.
Palabras claves: Android, móvil, carrito de compra, servicio web.
7
ABSTRACT
As a new platform for mobile application, development has android release has
caused great expectation, this platform has a significant acceptance by users and
the industry.
The realization of powerful and light android based applications allow to be close to
the user, which is why this project aims to show the design and development of a
android in order to facilitate the purchase of products in a particular supermarket
application, showing the price, location, and offers these products.
Keywords: Android, mobile, cart, web service.
8
Contenido
INTRODUCCIÓN ................................................................................................................. 14
1. OBJETIVOS .................................................................................................................. 19
1.1. General .................................................................................................................. 19
1.2. Específicos ............................................................................................................ 19
2. MARCO TEÓRICO ....................................................................................................... 20
2.1. MARCO CONCEPTUAL ....................................................................................... 23
2.1.1. Plataforma Android ........................................................................................ 23
2.1.2. Sublime text.................................................................................................... 23
2.1.3. Responsive Design ........................................................................................ 23
2.1.4. API REST ....................................................................................................... 24
2.1.5. SDK de Android ............................................................................................. 24
2.1.6. HTML .............................................................................................................. 24
2.1.7. Aplicación Web .............................................................................................. 25
2.1.8. CSS: ............................................................................................................... 25
2.1.9. JavaScript ....................................................................................................... 25
2.1.10. Node.js ........................................................................................................... 25
2.1.11. SDK de Android ............................................................................................. 26
2.1.12. Json ................................................................................................................ 26
2.1.13. PhoneGap ...................................................................................................... 26
2.1.14. Mysql .............................................................................................................. 27
2.1.15. Bases De Datos ............................................................................................. 27
2.1.16. PHP ................................................................................................................ 27
2.1.17. Servidor web .................................................................................................. 28
2.1.18. Hostinger ........................................................................................................ 28
2.1.19. PhpMyAdmin .................................................................................................. 28
2.2. MARCO REFERENCIAL ....................................................................................... 29
2.2.1. Aplicación Android para supermercados EasyMarket .................................. 29
2.2.2. Aplicación para supermercados SuperTruper ............................................... 30
3. METODOLOGÍA ........................................................................................................... 32
3.1. Metodología de desarrollo del producto ............................................................... 32
3.1.1. Fase de desarrollo del producto .................................................................... 33
3.1.1.1. Análisis de los requerimientos ................................................................ 34
9
3.1.1.2. Diseño de la aplicación ........................................................................... 35
3.1.1.3. Desarrollo de la aplicación ..................................................................... 35
3.1.1.4. Pruebas ................................................................................................... 37
4. DESARROLLO ............................................................................................................. 46
4.1. Arquitectura de la aplicación ................................................................................. 46
4.2. Funcionamiento del sistema ................................................................................. 47
4.3. Diseño del sistema ................................................................................................ 48
4.3.1. Diagramas UML ............................................................................................. 48
4.3.1.1. Casos de uso del sistema ...................................................................... 48
4.3.1.2. Diagramas de casos de uso ................................................................... 51
4.3.1.3. Diagramas de estados ............................................................................ 52
4.3.1.4. Modelo de bases de datos ..................................................................... 53
4.3.1.5. Diagrama de clase .................................................................................. 54
4.3.1.6. Modelado de base de datos ................................................................... 55
5. CONCLUSIÓN .............................................................................................................. 58
6. RECOMENDACIONES................................................................................................. 59
REFERENCIAS .................................................................................................................... 60
ANEXOS .............................................................................................................................. 62
10
Contenido de ilustraciones
Ilustración 1: Método en cascada ........................................................................................ 33

Ilustración 2: Modelo vista controlador ................................................................................ 36
Ilustración 3: Pantalla inicio de sesión del administrador. .................................................. 37
Ilustración 4: Menú y mapa del supermercado. .................................................................. 38
Ilustración 5: Agregar nuevas categorías. ........................................................................... 38
Ilustración 6: Categorías existentes en el supermercado. .................................................. 39
Ilustración 7: Agregar nuevos productos. ............................................................................ 39
Ilustración 8: Listado de los productos existentes en el supermercado. ............................ 40
Ilustración 9: Ingresar nuevos administradores................................................................... 40
Ilustración 10: Listado de los administradores .................................................................... 41
Ilustración 11: Listado de los clientes del supermercado ................................................... 41
Ilustración 12: Inicio de sesión y pantalla principal de la aplicación en modo cliente ........ 42
Ilustración 13: Sección buscar producto y Categorías en el supermercado ...................... 42
Ilustración 14: Productos Destacados y en ofertas en el supermercado. .......................... 43
Ilustración 15: Seleccionar la opción lista y lista de compra vacía. .................................... 43
Ilustración 16: Búsqueda producto específico y opción agregar a la lista .......................... 44
Ilustración 17: Productos agregados a la lista de compra. ................................................. 44
Ilustración 18: Productos marcados listo para finalizar compra ......................................... 44
Ilustración 19: Finalizar compra ........................................................................................... 45
Ilustración 20: Recorrido total del cliente............................................................................. 45
Ilustración 21: Perfil del cliente ............................................................................................ 45
Ilustración 22: Sugerencia, duda, queja o reclamo ............................................................. 45
Ilustración 23: Arquitectura del sistema............................................................................... 46
Ilustración 24: Funcionamiento del sistema ........................................................................ 47
Ilustración 25: Diagrama de caso de uso general ............................................................... 51
Ilustración 26: Diagrama de caso de uso cliente ................................................................ 51
Ilustración 27: Diagrama de caso de uso sistema .............................................................. 52
Ilustración 28: Diagrama de estado ..................................................................................... 52
Ilustración 29: Diagrama entidad relación. .......................................................................... 53
Ilustración 30: Diagrama de clase. ...................................................................................... 54
Ilustración 31: Conexión al servidor web. ............................................................................ 55
Ilustración 32: Funciones de las clases. .............................................................................. 56
Ilustración 33: Api.php. ........................................................................................................ 57
Ilustración 34: Visita el Supermercado ................................................................................ 65
Ilustración 35:Articulo en caja por falta de presupuesto ..................................................... 65
Ilustración 36: Perdida de tiempo ........................................................................................ 66
Ilustración 37: Información Insuficiente ............................................................................... 66
Ilustración 38: Ubicación exacta del producto ..................................................................... 66
Ilustración 39: Minimizar tiempo .......................................................................................... 67
Ilustración 40: Instalación del carrito de compra inteligente ............................................... 67
Ilustración 41: Crear Cuenta o iniciar Sesión en Hostinger ................................................ 68
Ilustración 42: Crear Cuenta para la página. ....................................................................... 69
Ilustración 43: Escoger Plan. ............................................................................................... 69
Ilustración 44: Ingresar dominio y contraseña..................................................................... 70
11
Ilustración 45: confirmar orden. ........................................................................................... 70
Ilustración 46: Obtención del dominio. ................................................................................ 71
Ilustración 47: Panel administrar. ........................................................................................ 71
Ilustración 47: Acceso FTP .................................................................................................. 72
Ilustración 49: Gestor de sitios ............................................................................................ 72
Ilustración 50: Subida de archivos. ...................................................................................... 73
Ilustración 51: Logo de la aplicación ................................................................................... 74
Ilustración 52: Logo de la aplicacion ................................................................................... 75
Ilustración 53: Inicio de sesión cuanta de administrador. ................................................... 76
Ilustración 54: Sección estante. ........................................................................................... 77
Ilustración 55: Cambiar Plano .............................................................................................. 78
Ilustración 56: Sección Categoría. ....................................................................................... 78
Ilustración 57: Procesos en la sección categoría ................................................................ 79
Ilustración 58: Vista de la sección de productos ................................................................. 80
Ilustración 59: Procesos en la sección productos ............................................................... 81
Ilustración 60: Sección Administradores. ............................................................................ 82
Ilustración 61: Procesos en la sección administradores. .................................................... 83
Ilustración 63: Procesos en la sección Clientes. ................................................................. 85
Ilustración 64 Cerrar Sesión administrador ......................................................................... 85
Ilustración 67: Productos recientes, selección e información de un producto .................... 87
Ilustración 68: Agregar producto a la lista y ver ubicación del en supermercado. ............. 88
Ilustración 69: Buscar producto ........................................................................................... 88
Ilustración 70: Acceso a categorías. .................................................................................... 89
Ilustración 71: Acceso a destacados ................................................................................... 89
Ilustración 72: Acceso a productos en ofertas. ................................................................... 90
Ilustración 73: Acceso a productos nuevos ......................................................................... 90
Ilustración 74: Acceso a la lista de producto ....................................................................... 91
Ilustración 75: Lista de productos terminada....................................................................... 91
Ilustración 76: Ubicación de un producto de la lista. ........................................................... 92
Ilustración 77: Editar un producto de la lista de compra. .................................................... 92
Ilustración 78: Ver recorrido total. ........................................................................................ 93
Ilustración 79: Finalizar compra. .......................................................................................... 93
Ilustración 80: Perfil del usuario (Cliente) ............................................................................ 94
Ilustración 81: Contacto con el administrador ..................................................................... 94
Ilustración 82: Menú desplegable. ....................................................................................... 95
12
Contenido de tablas
Tabla 1: Lista de deseos .............................................................................................................. 34

Tabla 2: Requerimientos no funcionales .................................................................................... 34
Tabla 3: Modelo vista controlador ............................................................................................... 36
Tabla 4: Caso de uso general ..................................................................................................... 48
Tabla 5: Caso de uso Cliente ...................................................................................................... 49
Tabla 6: Caso de uso Sistema o administrador ........................................................................ 50
Tabla 7: Visita el Supermercado ................................................................................................. 65
Tabla 8: Articulo en caja por falta de presupuesto ................................................................... 65
Tabla 9: Perdida de tiempo .......................................................................................................... 66
Tabla 10: Información Suficiente ................................................................................................. 66
Tabla 11: Ubicación exacta del producto ................................................................................... 66
Tabla 12: Minimizar tiempo .......................................................................................................... 67
Tabla 13: Instalación del carrito de compra inteligente ............................................................ 67
13
INTRODUCCIÓN
En la actualidad las tecnologías de la comunicación y la información, nos ofrecen la

posibilidad de mantenernos comunicados y notificados al instante, la telefonía móvil
está cambiando la sociedad actual, los nuevos terminales que ofrecen capacidades
similares a un ordenador personal, pero a diferencia de un ordenador, un teléfono
móvil siempre está en el bolsillo del usuario, esto permite un número significativo de
aplicaciones mucho más cercanas a este. El lanzamiento de Android como nueva
plataforma para el desarrollo de aplicaciones móviles ha causado un gran interés y
está teniendo una importante aceptación tanto por los usuarios como por la
industria.
Muchas entidades públicas y/o privadas, han preferido incluir en sus procesos, el
uso de tecnologías con el fin de agilizar y mejorar su funcionamiento. La técnica de
mercar no es ajenas a estas, desde hace algunos años se empezaron a incorporar
herramientas para optimizar todo lo relacionado con la compra y así tener un
máximo rendimiento al realizar este proceso.
Hoy por hoy las personas se ven enfrentados a un mundo con distintos
compromisos en los cuales se les hace difícil ir de compras, dirigirse a las tiendas o
supermercados para suplir las necesidades, de alimentos, higiene o lo que se
necesite en el hogar, debido a distintas causas como lo son ir a las reuniones, la
universidad, el trabajo, diversas ocupaciones que obligan a dejar a un lado
actividades que hacen parte de la vida cotidiana de todos como lo es mercar 1
1 CRISTÓBAL FRANSI, Eduard., y MARIMON VIADIU, Frederic. La gestión del supermercado virtual: Tipificación del
comportamiento del cliente online. [En línea]. Investigaciones Europeas de Dirección y Economía de la Empresa. Vol. 17, Nº
1, Enero – Abril 2011, pp. 93 – 112. ISSN: 1135-2523 [Consultado 26 de Mayo, 2012]. Disponible en Internet:
http://www.aedem-virtual.com/articulos/iedee /v17/171093.pdf
14
Cada persona que visita un Supermercado para realizar sus compras es un mundo
diferente, muchos compran como autómatas: lo más ligero posible y siempre las
mismas cosas, para otros es una perspectiva ir al supermercado, dejarse tentar por
las ofertas y encontrar productos novedosos 2.
En los supermercados que se encuentran ubicados en el municipio de lorica

específicamente súper tienda Olímpica, existe gran variedad de productos, los
cuales se encuentran ubicados en los diferentes estantes y clasificados en
diferentes secciones; muchas veces los usuarios no conocen la posición, no tienen
suficiente información sobre un producto o por motivos de reestructuración es
cambiado de estante, en la búsqueda de este se puede tardar mucho tiempo y el no
tener información detallada de algún producto conduce a que el consumidor se
sienta insatisfecho.
La satisfacción del cliente es el objetivo principal de toda empresa, porque que un

cliente satisfecho es la mejor propaganda que puede tener, debido a que esta es
gratuita y puede atraer clientes potenciales, ¡aunque satisfacer al cliente no es
trabajo fácil para las empresas! en este caso específico los supermercados, algunas
encuestas hechas por una de la firmas más importantes a nivel nacional e
internacional la pricewaterhousecoopers (pwc) en el 2014 nos arrojan que solo un
15% de los clientes se sienten satisfechos, porque no se le está dando a los
consumidores el debido conocimiento sobre promociones, ofertas, descuentos que
el supermercado ofrece. 3
Debido a esto, se nota la clara necesidad de diseñar y desarrollar una aplicación

para dispositivos móviles con sistema operativo Android como herramienta de
2 MESA HERNANDEZ, Alexander. Si compra por Internet tendrá beneficios de tiempo y dinero, además de mayor
comodidad. [En línea]. Disponible en Internet: www.larepublica.com
3
Más información en https://www.pwc.com/co/es/
15
apoyo al usuario que le permita obtener la información y ubicación exacta de los
productos existentes en el supermercado Olímpica basado en su lista de compra.
Con base a las situaciones antes citadas se procede a plantear la siguiente

interrogación: ¿Cómo el desarrollo de una aplicación para dispositivos móviles con
sistema operativo Android mejoraría la forma de hacer las compras en los
supermercados?
Este proyecto el problema que plantea es el poco tiempo con el que cuentan las
personas y la idea es contribuir a resolverlo, ya que satisfacer al cliente es uno de
los retos más importante a los que se enfrentan el mercado moderno, satisfacer la
demanda de los consumidores es la base del éxito de todo negocio, teniendo en
cuenta las necesidades y escases de tiempo a la que se ven enfrentados las
personas, estas situaciones aumenta el stress debido a la cantidad de compromisos
y actividades que deben cumplir; este trabajo pretende dar buen uso a la existencia
de nuevas herramientas tecnológicas y de información para poder realizar compras
de forma sencilla, rápida y óptima.
Estas tecnologías proporcionan información detallada y constantemente actualizada

sobre los productos y servicios disponibles en los supermercados, que los usuarios
pueden acceder a través de interfaces de fácil uso. [20], [21]
Además con esto se pretende que las personas puedan aprovechar el poco tiempo
que disponen, para que logren pasar más tiempo con su familia, disponer el tiempo
extra ganado y aportarlo a alguna actividad fuera del común, por lo que comprar no
sea de manera convencional, es decir, antes era relativamente costoso en cuanto a
tiempo y voluntad, por eso de esta forma se busca que mercar sea un poco más
atractiva, rápida y dinámica.
16
“Actualmente las Tecnologías de la Información y la Comunicación Tics están
sufriendo un desarrollo vertiginoso, esto está afectando a prácticamente todos los
campos de nuestra sociedad, y el comercio no es la excepción” [11].
Esas tecnologías se presentan cada vez más como una necesidad en el contexto
de sociedad donde los rápidos cambios, el aumento de los conocimientos y las
demandas de una educación de alto nivel constantemente actualizada se convierten
en una exigencia permanente.
Es necesario buscar la manera de alojar estas tecnologías en nuestra región para

que el comercio y otras actividades productivas sean más prósperas y se puedan
avanzar más rápido en cuestiones de innovación.
Para ello mostraremos algunos proyectos muy relevantes e importantes tanto en el

contexto nacional como internacional, tomados como base a la hora de implementar
nuestro proyecto.
En Bogotá-Colombia, se desarrolló una Aplicación Java para Librerías, tiene como

objetivo simular una compra por parte del usuario de manera que el comprador
obtenga una lista de los libros seleccionados [14].
También en Cali-Colombia, se desarrolló un carro de compras, sistema que aporta

la ubicación de los artículos en los estantes. Este caleño, de 26 años, se inspiró en
los sistemas de navegación de inteligencia artificial que se están poniendo en
funcionamiento en supermercados de Estados Unidos, Europa y Japón [15]
Igual en Barcelona España, el desarrollo de una Aplicación Android para

Supermercados llamada EasyMarket, tiene como objetivo simular una compra por
17
parte del usuario de manera que el comprador obtenga una propuesta que se ajuste
lo máximo posible a sus preferencias según ciertos criterios [3].
En la capital de Córdoba (Montería), se llevó a cabo el desarrollo de una aplicación

móvil para el control de pedidos en un restaurante (Erik Calderin & Marcos Soto,
2012).
En Quito-Ecuador desarrollaron un sistema prototipo de carro de compras virtual

empleando comunicaciones NFC para el sistema Android, que permite automatizar
la selección y compra de artículos en locales comerciales. El proyecto fue
desarrollado en base a la metodología Extreme Programming y con un análisis de
requerimientos de aplicaciones con funcionalidades similares [13].
El uso de aplicaciones móviles ha brindado una cantidad de servicios útiles para los
usuarios, mejorando algunos procesos que se llevan a diario, un área de gran
importancia es el comercio electrónico.
Una aplicación móvil bien desarrollada y enfocada a una audiencia correcta puede
alcanzar niveles excepcionales de aceptación, con ello puedes brindar ofertas
enfocadas a distintas áreas de la vida.
18
1. OBJETIVOS
1.1. General
Desarrollar una aplicación para dispositivos móviles con sistema operativo Android
como herramienta de apoyo al usuario que le permita obtener la información y
ubicación exacta de los productos existentes en el supermercado Olímpica basado
en su lista de compra.
1.2. Específicos
Identificar tecnologías y herramientas necesarias para el desarrollo de una

aplicación que permita efectuar la compra de manera ágil y óptima.
Diseñar modelos y arquitectura que permitan realizar una aplicación para

obtener la información y ubicación exacta de los productos existentes en el
supermercado Olímpica.
Diseñar una aplicación a través de servicios web que permita interactuar con los
dispositivos móviles de plataforma Android, para obtener la información y
ubicación exacta de los productos existentes en el supermercado Olímpica.
Realizar pruebas que acrediten el óptimo funcionamiento de la aplicación.
19
2. MARCO TEÓRICO
La era del computador personal ha evolucionado en cambio la era de los

dispositivos móviles apenas Comienza. “Frase citada por Steve Jobs, en el
lanzamiento del iPad, 2010”.
La telefonía móvil está cruzando por innovaciones significativas con el transitar del
tiempo, a simple vista está la creación de nuevas plataformas, servicios y terminales
que soportan estos cambios. Actualmente todo está apuntando a la masificación del
uso del internet en estas terminales móviles.
Gracias a los avances tecnológicos, en especial a Internet, las organizaciones están

sufriendo una transformación radical que es prácticamente una nueva revolución
industrial. Para sobrevivir y prosperar en este siglo, los directivos tendrán que
adoptar totalmente un nuevo conjunto de reglas [7].
El e-Commerce proporciona nuevas oportunidades para que las empresas sean

más lucrativas y competentes ante el mundo, esto se debe a la optimización de sus
transacciones, al reducir el tiempo de compra y venta, ya que permite recibir pedidos
24 horas al día, 7 días a la semana, todo el año; es por esto que las empresas
también están construyendo aplicaciones para dispositivos móviles como
complemento a sus website, implantando así un nuevo canal de interacción con sus
clientes, lo cual representa una oportunidad para la construcción de aplicaciones a
la medida.
Las aplicaciones móviles son programas que los usuarios descargan e instalan en
los Smartphone, las cuales tienen numerosas funcionalidades y son 100%
20
interactivas. Este tipo de herramientas permite una gran gestión de promoción y
distribución de información [12].
En definitivo, lo que la gente busca son cosas nuevas, ideas que les cambien la
rutina, productos que sean significativos en sus vidas y servicios que logren
satisfacer sus necesidades.
Una aplicación puede estar encaminada a ofrecer una solución, brindar una utilidad
al cliente, un valor agregado, dar un servicio de transacciones entre otras, en las
cuales se destacan las aplicaciones que publican catálogos de productos y brindan
facilidades para la adquisición de este, y poder suministrar al usuario lo deseado en
el instante que nace dicho interés. Otras aplicaciones muy notorias son aquellas
que proporcionan entretenimiento, pues garantizan que el usuario va a generar la
necesidad en un segundo y tercer usuario, lo que representa la masificación de la
aplicación.
Además de lo antes mencionado las aplicaciones han evolucionado, aportando a

los usuarios nuevas tendencias, con mecanismos como la ubicación actual,
situación que aprovechan las empresas proveedoras de productos y servicios para
ofertar al usuario en función de su ubicación o las necesidades instantáneas
derivadas desde el sitio en que se encuentre este último.
El principio básico de toda empresa es llegar donde están sus clientes, quienes
están en internet, en las redes sociales, en los servicios de mensajería instantánea
a los cuales acceden a través de sus dispositivos móviles, es decir, que los usuarios
pasan incalculables horas al día en internet, en este sentido, el reto para las
empresas, es llegar allí para entrar en comunicación inmediata con ellos, lo que es
necesario aprovechar las herramientas tecnológicas que están a su alcance.
21
En este contexto, la tendencia de la tecnología web y la tecnología móvil ha dado
como resultado el internet móvil. Esta unión ha añadido una nueva dimensión a las
aplicaciones tradicionales, para convertirlas en aplicaciones que sean accedidas y
gestionadas desde dispositivos móviles [4].
Con el lanzamiento de Android como nueva plataforma para el desarrollo de

aplicaciones móviles ha causado una gran expectativa y está teniendo una
importante aceptación tanto por los usuarios como por la industria.
La realización de poderosas y ligeras aplicaciones basadas en Android, permiten

tener un acercamiento con el usuario, es por ello que este proyecto pretende
mostrar el diseño y desarrollo de una aplicación para dispositivos móviles con
sistema operativo Android como herramienta de apoyo al usuario que le permita
obtener la información y ubicación exacta de los productos existentes en el
supermercado Olímpica basado en su lista de compra.
La revolución de los dispositivos móviles los llamados Smartphone o Tablet, a la

mayoría de estos dispositivos se le han instaurado muchas tecnologías inalámbricas
y sensores muy potentes, esto hace que sean más innovadores en todos los
sentidos todo esto gracias a los grandes avances en las Tics.
Para entender mejor en qué medida nos benefician las TIC es necesario aumentar
nuestro conocimiento sobre los procesos de innovación impulsados por la
tecnología, su impacto en el comportamiento de los consumidores, la co-evolución
de las estrategias corporativas y los efectos que trae la innovación tecnológica en
la experiencia de la clientela, como comprar a través de un dispositivo móvil o
realizar simulaciones de compras en supermercados, a través de su dispositivo.
22
2.1. MARCO CONCEPTUAL
2.1.1. Plataforma Android
Android es un sistema operativo basado en el núcleo Linux. Fue diseñado

principalmente para dispositivos móviles con pantalla táctil, como teléfonos
inteligentes o Tablet; y también para relojes, televisores y automóviles, inicialmente
fue desarrollado por Android Inc. [16]
2.1.2. Sublime text
Sublime Text es un editor de texto y editor de código fuente está escrito en C++ y
Python para los plugins. Desarrollado originalmente como una extensión de Vim,
con el tiempo fue creando una identidad propia, por esto aún conserva un modo de
edición o de reproducción tipo vi llamado (Vintage mode), se distribuye de forma
gratuita, sin embargo no es software libre o de código abierto.4
2.1.3. Responsive Design
Responsive Design o diseño adaptativo, es la técnica que se usa en la actualidad

para tener una misma web adaptada a las diferentes plataformas que nos brinda la
tecnología: ordenador, Tablet y Smartphone. Consiste en una serie de hojas de
estilo en CSS3, que usando el atributo “mediaquery” convierten una web ordinaria
en una web multiplataforma capaz de adaptarse a todos los tamaños que existen,
ofreciendo una experiencia para el usuario mucho más agradable y cubriendo las
necesidades del público. [10]
4 Fuente: Recuperado de :http://www.genbetadev.com/herramientas/sublime-text-2
23
2.1.4. API REST
Es una librería de funciones, a las que se accede por el protocolo HTTP, por tanto
se accede a través de direcciones URLs en las que se envían los datos
respondiendo a una consulta. Estos datos o recursos son obtenidos en diferentes
formatos como puede ser texto plano, XML, JSON, etc.5
2.1.5. SDK de Android
Un kit de desarrollo de software o SDK (siglas en inglés de software development

kit) es generalmente un conjunto de herramientas de desarrollo de software que le
permite al programador o desarrollador de software crear aplicaciones para un
sistema concreto, por ejemplo: ciertos paquetes de software, frameworks,
plataformas de hardware, computadoras, videoconsolas, sistemas operativos, etc.
2.1.6. HTML
Es un lenguaje markup (las siglas de HTML significan Hyper Text Markup

Language), es un lenguaje para modelar documentos que se utiliza para el
desarrollo de páginas web, está compuesto por una serie de etiquetas que el
navegador se encarga de interpretar y mostrar en pantalla al usuario. Estándar
definido por la W3C dedicado a la estandarización de casi todas las tecnologías
ligadas a la web, en lo referente a su escritura e interpretación [9].
5 Fuente: Hipertextual. ¿Qué es una Api? Recuperado de http://hipertextual.com/archivo/2014/05/que-es-api/
24
2.1.7. Aplicación Web
Una Web App es una web diseñada en HTML5 y CSS3 para su perfecta
visualización en dispositivos móviles. A diferencia de la App nativa, la web App es
agnóstica en cuanto a plataforma se refiere. Tampoco requiere que el usuario se
descargue la App a su dispositivo ni tampoco actualizarla cuando se hace algún
cambio en ella, basta con refrescar el navegador [8].
2.1.8. CSS:
Es un lenguaje de hojas de estilos en cascada creado para controlar el aspecto o

presentación de los documentos HTML. La filosofía de CSS se basa en separar lo
que es la estructura del documento HTML de la presentación y de esta forma
mantener el código más organizado y fácil de comprender [6].
2.1.9. JavaScript
JavaScript es un lenguaje de programación que permite el script de eventos, clases

y acciones para el desarrollo de aplicaciones de Internet entre el cliente y el usuario,
se utiliza básicamente para la creación de páginas web dinámicas, gran parte de la
programación de este lenguaje se centra en describir objetos, escribir funciones que
respondan a ciertos eventos, movimientos del mouse, utilización de teclas, carga de
páginas, entre otros [2].
2.1.10. Node.js
Es un entorno de programación en JavaScript para el Backend basado en el motor

V8 del navegador Google Chrome, orientado a eventos, no bloqueantes, lo que lo
25
hace muy rápido a la hora de crear servidores web y emplear tiempo real. Fue
creado en 2009 por Ryan Lienhart Dahl [1].
2.1.11. SDK de Android
Un kit de desarrollo de software o SDK (siglas en inglés de software development

kit) es generalmente un conjunto de herramientas de desarrollo de software que le
permite al programador o desarrollador de software crear aplicaciones para un
sistema concreto, por ejemplo: ciertos paquetes de software, frameworks,
plataformas de hardware, computadoras, videoconsolas, sistemas operativos, etc.
2.1.12. Json
JSON es un formato de datos muy ligero basado en un subconjunto de la sintaxis

de JavaScript: literales de matrices y objetos. Como usa la sintaxis JavaScript, las
definiciones JSON pueden incluirse dentro de archivos JavaScript y acceder a ellas
sin ningún análisis adicional como los necesarios con lenguajes basados en XML. 6
2.1.13. PhoneGap
PhoneGap es un frameworks para el desarrollo de aplicaciones móviles producido

por Nitobi, y comprado posteriormente por Adobe Systems. Principalmente,
PhoneGap permite a los programadores desarrollar aplicaciones para dispositivos
móviles utilizando herramientas genéricas tales como JavaScript, HTML5 y CSS3.
Las aplicaciones resultantes son híbridas, es decir que no son realmente
aplicaciones nativas al dispositivo. [17]
6
Fuente: Recuperado de Curso librerías Web 2.0 - Aplicaciones Web Serv Inf UA, 2008
“Douglas Crockford, un experimentado ingeniero software, propuso un nuevo formato de datos construido sobre
JavaScript llamado JSON, JavaScript Object Notation (notación de objetos JavaScript)”.
26
2.1.14. Mysql
Es un sistema de administración de bases de datos (Database Management

System, DBMS) para bases de datos relacionales. Así, Mysql no es más que una
aplicación que permite gestionar archivos llamados de bases de datos.
2.1.15. Bases De Datos
Una base de datos (cuya abreviatura es BD) es una entidad en la cual se pueden
almacenar datos de manera estructurada, con la menor redundancia posible, una
base de datos proporciona a los usuarios el acceso a datos, que pueden visualizar,
ingresar, actualizar y/o eliminar, en concordancia con los derechos de acceso que
se les hayan otorgado la base de datos puede ser local, es decir que puede utilizarla
sólo un usuario en un equipo, o puede ser distribuida, es decir que la información
se almacena en equipos remotos y se puede acceder a ella a través de una red. La
principal ventaja de utilizar bases de datos es que múltiples usuarios pueden
acceder a ellas al mismo tiempo7
2.1.16. PHP
Es un lenguaje de programación de uso general de código del lado del servidor

originalmente diseñado para el desarrollo web de contenido dinámico. PHP ha
evolucionado por lo que ahora incluye también una interfaz de línea de comandos
que puede ser usada en aplicaciones gráficas independientes. PHP puede ser
usado en la mayoría de los servidores web al igual que en casi todos los sistemas
operativos y plataformas sin ningún costo.
7
Introducción Bases de datos. (s.d.). Recuperado Febrero 22, 2011, a partir de
http://es.kioskea.net/contents/bdd/bddintro.php3
27
2.1.17. Servidor web
También llamado servidor HTTP es un programa informático que procesa una

aplicación del lado del servidor, realizando conexiones bidireccionales y/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. El código
recibido por el cliente suele ser compilado y ejecutado por un navegador web se usa
el protocolo HTTP.8
2.1.18. Hostinger
Provee servicios de almacenamiento web y hosting gratis con php, mysql, 2000mb
de espacio en disco, 100gb de ancho de banda y dominio, ofrece un panel de control
fácil de usar y de aspecto agradable, te permite configurar cuentas de correo
electrónico, bases de datos, cuentas FTP y generar copias de seguridad, también
tiene características avanzadas como consola web SSH y editor de zona DNS, entre
otras.9
2.1.19. PhpMyAdmin
Es una herramienta escrita en PHP con la intención de manejar la administración

de Mysql a través de páginas web, utilizando Internet. Actualmente puede crear y
eliminar Bases de Datos, crear, eliminar y alterar tablas, borrar, editar y añadir
campos, ejecutar cualquier sentencia SQL, administrar claves en campos,
administrar privilegios, exportar datos en varios formatos y está disponible en 62
idiomas. Se encuentra disponible bajo la licencia GPL Versión 2. 10
8 http://es.wikipedia.org/wiki/Servidor_web
9 ttp://www.hostinger.es/
10 http://es.wikipedia.org/wiki/PhpMyAdmin
28
2.2. MARCO REFERENCIAL
2.2.1. Aplicación Android para supermercados EasyMarket
Esta aplicación fue desarrollada en el lenguaje de programación Android, y se

escogió dicho lenguaje porque se quería realizar una aplicación portable, para una
gran cantidad de usuarios.
Además porque es un software libre y ofrece muchas facilidades a la hora de

desarrollar el código.
Esta aplicación se le puso el nombre de EasyMarket, el objetivo fue de simular

compras permitiéndole al usuario disponer de más información de los productos de
cada supermercados sin tener que ir a ellos directamente a consultarlos y además
le proporciona la oportunidad de poder efectuar una compra, poder efectuar una
opinión de qué centro sería el mejor ´para realizar una compra, estableciendo así
preferencias iniciales en el programa.
Con esta aplicación el usuario puede comentar, valorar, actualizar todos los tipos
de productos y supermercados que existen con tal de compartir entre todas las
personas sus criterios para lograr así una amplia diversidad de opiniones para
consultar.
Para el desarrollo de la aplicación se necesitó:
Tener Conocimiento del lenguaje de programación Android y su entorno de

desarrollo, investigación sobre este sistema operativo Android, situación y
expectativas de cara al futuro diseño y características de programación.
Realizar un estudio de los diversos supermercados más extendidos, se realizó

una búsqueda exhaustiva de que supermercados eran los más populares y de
los productos que se vendían.
29
Definir de los límites de la aplicación.
Realizar el diseño de la aplicación, se presenta las pantallas de diseño del

producto, el menú principal y las múltiples las opciones que presenta, diseño de
caso de uso, diagrama de actividades, diseño y conexión con la base de datos,
etc.
Realizar depuración y pruebas
La planificación del proyecto se dividió en 4 partes principales:

 Iniciación - Desarrollo - Pruebas – Documentación.
2.2.2. Aplicación para supermercados SuperTruper
SuperTruper se trata de una aplicación que será nuestra aliada a la hora de comprar
en el supermercado. A primera vista podría tratarse de una simple lista que llevar
consigo al supermercado, pero esta aplicación va más allá al ofrecernos la
posibilidad de comparar el precio de los productos en las diferentes cadenas de
establecimientos.
Una parte novedosa de la aplicación es la forma en la podemos introducir los

productos (aparte de escribirlos de forma textual o por voz), ya que podemos hacerlo
escaneando el código de barras por medio de la cámara. Una vez reconocido
podemos verificar si está disponible en la base de datos, sí es así nos
encontraremos con una comparativa con el precio del producto en diferentes
establecimientos.
Si no se encuentra en la base de datos podemos introducirlo nosotros mismos,

incluyendo su imagen, características y el precio en el establecimiento donde lo
30
hemos encontrado. No requiere ningún tipo de login para acceder o enviar productos
al catálogo.
A la hora de hacer la lista introducimos el nombre genérico del producto que nos
hace falta. La aplicación nos sugerirá marcas para ese producto mostrándonos el
precio para cada uno de los establecimientos donde se vende.
Una vez seleccionados nuestros productos con el precio correspondiente podemos

calcular el importe total. Ya solo nos queda ir a comprar 11.
Para usar la aplicación Entra en la App Store y descarga para tu iPhone la App
SUPERTRUPER completamente GRATIS y empieza a hacer la compra de una
forma inteligente. Y si tu teléfono es ANDROID descárgala del Android Market.
Para crear tú lista de la compra y que no se te olvide nada, escanea con tu móvil el
código de barras de los artículos conforme los vas gastando, o cuando te decidas a
Añade tus productos a tus listas de la compra con un solo botón.
Puedes crear tantas listas como quieras: la compra semanal, la de la celebración

familiar, tu cena romántica. Y si quieres, comparte tus listas: envíalas a tus familiares
o amigos, o ayuda al resto de la TRUPE compartiendo tu saber hacer: se un
SUPERTRUPER. Hacer la lista de la compra.
Compara tu lista entre distintos supermercados ¿Dónde hago mi compra? Es fácil,

de un vistazo puedes ver cuántos productos de tu lista de la compra tiene cada
supermercado y cuál es el precio global en cada uno de ellos.
11 Referencia: http://supertruper.mobi/como-funciona/
31
3. METODOLOGÍA
Este proyecto presenta los resultados de una investigación descriptiva, también

conocida como la investigación estadística, describen los datos y este debe tener
un impacto en las vidas de la gente que le rodea, en este caso donde se analiza la
impaciencia que produce a un número de personas no encontrar un producto
específico en el supermercado, además de saber su precio, detalles del mismo y
luego esperar en una fila larga para pagarlo.
Para la recolección de información se tuvo en cuenta el comportamiento de las

personas en los supermercados de Lorica, ya que tener que ir a estos lugares nunca
es una tarea divertida, pero inevitable, estacionamientos repletos, carritos con
ruedas torcidas y filas interminables para llegar a la caja, se convierten en una tarea
ardua y muy extensa, para consultar el comportamiento de los usuarios de los
supermercados, este se realizó mediante una encuesta, (Ver Anexos.)
3.1. Metodología de desarrollo del producto
Para cumplir con los objetivos planteados en el proyecto y crear una solución a la
problemática presente, para desarrollar el proyecto se utilizó la metodología de
desarrollo en cascada, que se caracteriza por proponer actividades secuenciales,
claramente agrupadas dentro de fases o ciclos del desarrollo del proyecto, propone
hacer un análisis intensivo de requerimientos y se vuelve complicado volver a
etapas previas del proyecto cuando se encuentran diferencias significativas en el
alcance definido en etapas tempranas del mismo.
El levantamiento de requerimientos es muy riguroso y los Analistas definen a

prioridad todos los requerimientos funcionales y no funcionales relacionados con el
proyecto. Normalmente, una fase no puede iniciar sin que la fase anterior haya sido
32
revisada y aceptada por el cliente o usuario final, sin que esto signifique el sistema
cumplirá con sus necesidades.
Ilustración 1: Método en cascada
3.1.1. Fase de desarrollo del producto
El desarrollo de la aplicación móvil con sistema operativo Android como herramienta

de apoyo al usuario que permita obtener la información y ubicación exacta de los
productos existentes en los supermercados basados en su lista de compra, tiene en
cuenta las siguientes fases:
 Análisis de los requerimientos

 Diseño de la aplicación.
 Desarrollo de la aplicación.
 Pruebas.
33
3.1.1.1. Análisis de los requerimientos
ID REQUISITO REQUERIMIENTOS FUNCIONALES PRIORIDAD

La aplicación debe proporcionar al administrador una
RF 01 interfaz que le permita el registro, edición y eliminación de ALTA
productos
La aplicación debe permitir a los compradores insertar,
RF 02 ALTA
editar y eliminar sus productos de la lista de compra
La aplicación debe permitir a los compradores editar sus
RF 03 MEDIA
datos de perfil, como nombres, fotografía y otros datos.
La aplicación debe permitir al administrador insertar todas
RF 04 las promociones de los productos y mostrarla a los ALTA
compradores.
La aplicación debe permitir a los compradores consultar y
RF 05 MEDIA
ver los productos en promoción.
La aplicación debe permitir a los compradores ver la ruta
RF 06 ALTA
donde encuentra el producto
La aplicación debe permitir a los compradores ver los
RF 07 ALTA
productos solo si están registrados
La aplicación debe permitir a los compradores filtrar los
RF 08 MEDIA
productos por categoría
La aplicación debe permitir a los compradores ver el precio
RF 09 ALTA
total de la compra
RF10 La aplicación debe tener disponibilidad 24/7 MEDIA
Tabla 1: Lista de deseos
ID REQUISITO REQUERIMIENTOS NO FUNCIONALES PRIORIDAD

RNF 01 Memoria RAM de 256 MB, o superior. ALTA
RNF 02 Entorno de desarrollo Sublime text ALTA
La aplicación debe mostrarse en dispositivos Android
RNF 03 ALTA
superior a 4.0
La aplicación web para el administrador, debe mostrarse en
RNF 04 ALTA
cualquier navegador
La aplicación web puede ser vista en los sistemas
RNF 05 MEDIA
operativos w7, w8, w10, Linux, Mac
Tabla 2: Requerimientos no funcionales
34
3.1.1.2. Diseño de la aplicación
En esta etapa se especifica la arquitectura de software de la aplicación, donde se

realiza un modelado para visualizar, especificar y documentar cada una de las
partes de que comprende el desarrollo de software, a través de los diferentes
diagramas UML. Se realizaron diagramas de casos de uso, diagramas de estados,
diagramas de clase.
(Ver capítulo 4 Desarrollo, 4.2. diseño del sistema).
3.1.1.3. Desarrollo de la aplicación
La aplicación se implementó utilizando un patrón de desarrollo de software modelo

vista controlador (MVC), este modelo utiliza estos tres componentes para separar
los datos y la lógica de la aplicación de la interfaz de usuario del módulo encargado
de gestionar los eventos y las comunicaciones.
Modelo: Se encarga de representar los datos los cuales son consultados a la

base de datos.
Controlador: Se encarga de recibir las órdenes del usuario, solicita la

información al modelo y posteriormente se los comunica a la vista.
Vista: Se encarga de la representación visual de la información, es decir todo lo

relacionado con la interfaz gráfica va en la vista.
35
Ilustración 2: Modelo vista controlador
Aplicación
Modelo(.SQL) Vista(.HTML) Controlador(.JS .PHP)
productos_compras Productos C.admintrador
estantes_nodo Lista C.categorias
categorías Estantes C.compras
productos Destacados C.estantes
compras Ruta C.clientes
cliente Categorías C.producto
Tabla 3: Modelo vista controlador
36
3.1.1.4. Pruebas
Una vez corregidos los errores, se ejecutaron pruebas de funcionamiento real de la

aplicación. Las pruebas iniciales fueron realizadas en el panel del usuario
administrador, donde se probó cada una de sus funciones con éxito.
Ilustración 3: Pantalla inicio de sesión del administrador.
En esta sección se muestra la pantalla el inicio de sesión en la web del

administrador.
37
Ilustración 4: Menú y mapa del supermercado.
Después que el administrador inicia sesión se puede ver el menú y el mapa del
supermercado.
Ilustración 5: Agregar nuevas categorías.
En esta sección el administrador puede agregar nuevas categorías.
38
Ilustración 6: Categorías existentes en el supermercado.
En esta sección se muestran las diferentes categorías que existen en el

supermercado.
Ilustración 7: Agregar nuevos productos.
En esta sección el administrador podrá ingresar nuevos productos para que sean
visible en la aplicación.
39
Ilustración 8: Listado de los productos existentes en el supermercado.
En esta sección se muestran todos los productos, inmediatamente después de ser

ingresados por el administrador.
Ilustración 9: Ingresar nuevos administradores.
En esta sección el administrador podrá ingresar nuevos administradores.
40
Ilustración 10: Listado de los administradores
En esta sección se puede ver el listado de los usuarios creados exitosamente,

inmediatamente después de ser agregados por el administrador principal.
Ilustración 11: Listado de los clientes del supermercado
En esta sección se muestran los clientes del supermercado que utilizan la aplicación
móvil.
41
Después de terminada las pruebas en el módulo administrador, se hicieron las
respectivas pruebas de funcionamiento al aplicativo móvil. Primeramente se probó
el inicio de sesión como cliente, luego se probaron las diferentes opciones al
momento de la compra.
Ilustración 12: Inicio de sesión y pantalla principal de la aplicación en modo cliente
Después que el cliente inicia sesión se muestra inmediatamente la pantalla principal

con las diferentes opciones.
Ilustración 13: Sección buscar producto y Categorías en el supermercado
42
Cuando el cliente desea buscar un producto lo puede hacer en la sección buscar y
se desea ver las categorías y subcategorías que en el supermercado se encuentran
puede presionar la opción categoría.
Ilustración 14: Productos Destacados y en ofertas en el supermercado.
En esta sección se pueden ver los productos destacados o los que más se venden
al igual de los que se encuentran en oferta.
Ilustración 15: Seleccionar la opción lista y lista de compra vacía.
43
Ilustración 16: Búsqueda producto específico y opción agregar a la lista
En esta sección el cliente puede agregar los productos que va mercar a la lista de
compra.
Ilustración 17: Productos agregados a la lista de Ilustración 18: Productos marcados listo para
compra. finalizar compra
En ilustraciones (17 y 18) el cliente puede ver la lista creada, con cada producto a
mercar, al mismo tiempo puede marcarlos, esto significa que llevara los productos
que están en la lista.
44
Ilustración 19: Finalizar compra Ilustración 20: Recorrido total del cliente
En las ilustraciones (18 y 19) se pueden observar las opciones compra finalizada y
ver tu recorrido, al momento de seleccionar estas opciones se puede apreciar el
resultado de cada una de estas.
Ilustración 21: Perfil del cliente Ilustración 22: Sugerencia, duda, queja o reclamo
45
4. DESARROLLO
4.1. Arquitectura de la aplicación
Ilustración 23: Arquitectura del sistema
46
4.2. Funcionamiento del sistema
Ilustración 24: Funcionamiento del sistema
47
4.3. Diseño del sistema
4.3.1. Diagramas UML
4.3.1.1. Casos de uso del sistema
Identificación de caso de uso: CU-0

Nombre de caso de uso: General
Autores Rodrigo Romero Mejía – James D. Benítez Cárdenas
Proceso funcional de la aplicación de búsqueda, lista y
Resumen:
ubicación de productos en el supermercado
Actores: Cliente, sistema
Precondiciones: El usuario debe estar de alta o existir en el sistema
Poscondiciones: El cliente hace los procesos de búsqueda satisfactoriamente
Pasos Acción
1 El usuario se registra en el sistema.
2 El sistema valida los datos del usuario
3 El usuario ingresa al sistema
4 El usuario ya dentro puede hacer una respectiva
lista de los productos a mercar teniendo en cuenta
las categorías de preferencia
Curso normal: 5 El usuario busca un producto específico puede
que use los que tenga en la lista o simplemente
escoge uno dependiendo su categoría de
preferencia o haciendo caso omiso a estos y
simplemente buscar un producto aleatorio
6 El usuario después de buscar el producto, puede
visualizar su ubicación en el mapa del
supermercado
7 El usuario puede cerrar su sesión
Paso Acción
3 El cliente ingresa los datos de inicio de sesión
Cursos alternativos:
incorrectos
4 El producto no existe en el sistema o está agotado
7 El cliente no ha iniciado sesión
Tabla 4: Caso de uso general
48
Nombre de caso de uso: Cliente
Cliente es la persona que utilizara la aplicación para
Resumen:
efectuar los diferentes procesos
Actores: Cliente
El cliente debe existir en el sistema y tener la aplicación
Precondiciones:
instalada
El cliente efectuó los diferentes procesos de manera
Poscondiciones:
exitosa
Paso Acción
1 El cliente inicia sesión
2 El cliente puede actualizar o hacer una
respectiva lista de productos
Curso normal: 3 El cliente puede buscar un producto específico
o tomarlo de la lista establecida
4 Ya encontrado el producto el cliente puede
visualizar en el mapa del supermercado su
ubicación
Paso Acción
Cursos alternativos: 1 No existe en el sistema
No inserta datos requeridos
4 El producto no exista en el sistema
Tabla 5: Caso de uso Cliente
49
Nombre de caso de uso: Sistema
El sistema efectúa las peticiones que el cliente hace en
Resumen: este caso las diferentes tareas mencionadas en el caso
de uso CU-1 Cliente
Actores: Sistema
El sistemas debe estar conectada y sincronizada con los
Precondiciones:
demás entornos
Poscondiciones: El sistema efectúa todas las tareas estipuladas
Paso Acción
1 El sistema verifica que los dato son correctos
2 El sistema registra y almacena productos
Curso normal:
dependiendo de las categorías de preferencia
3 El sistema almacena información sobre la
ubicación del producto
Paso Acción
Cursos alternativos:
2 Producto existente y presenta ambigüedad en
los datos
Tabla 6: Caso de uso Sistema o administrador
50
4.3.1.2. Diagramas de casos de uso
Ilustración 25: Diagrama de caso de uso general
Ilustración 26: Diagrama de caso de uso cliente
51
Ilustración 27: Diagrama de caso de uso sistema
4.3.1.3. Diagramas de estados
Ilustración 28: Diagrama de estado
52
4.3.1.4. Modelo de bases de datos
Ilustración 29: Diagrama entidad relación.
53
4.3.1.5. Diagrama de clase
Ilustración 30: Diagrama de clase.
54
4.3.1.6. Modelado de base de datos
Ilustración 31: Conexión al servidor web.
Descripción: En este documento se hace la respectiva conexión al servidor web

para que la página del administrador funcione online.
55
Ilustración 32: Funciones de las clases.
Descripción: En este documento clase administrador se hacen las respectivas

funciones para administrar los datos de esta entidad, cabe resaltar que para las
demás clases se hacen las mismas funciones pero con los datos que le
corresponden.
56
Ilustración 33: Api.php.
Descripción: En este documento llamado api.php se da el respectivo formato a las

funciones de cada entidad perteneciente al administrador, al igual que se pueda
comunicar con el aplicativo móvil con la web, de esta manera los procesos se hagan
en tiempo real.
57
5. CONCLUSIÓN
El uso de tiendas virtuales para el comercio electrónico presenta grandes ventajas

por sobre las empresas que no utilizan este tipo de tecnologías. Algunas de estas
ventajas son: hacer sencilla la forma de realizar negocios con los clientes, reduce
los costos, precios y garantiza una disponibilidad de 24 horas al día, permitiendo a
los usuarios mayor comodidad y ahorro de tiempo a la hora de adquirir un producto.
Tras haber examinado detalladamente la problemática existente en la forma de

comprar, y luego de estudiar posibles soluciones se llegó a la conclusión de diseñar
y desarrollar una aplicación para dispositivos móviles con sistema operativo Android
como herramienta de apoyo al usuario que le permita obtener la información y
ubicación exacta de los productos existentes en el supermercado Olímpica basado
en su lista de compra.
Teniendo en cuenta que las empresas están buscando aprovechar las tecnologías
móviles para agilizar los procesos de ventas, usar herramientas que faciliten de
manera óptima la búsqueda de productos, mayor eficiencia en la distribución de
estos, y el análisis en líneas de la información para la toma rápida de decisiones.
Este aplicativo es tanto una solución de comercio electrónico, dado que es un

producto usado como herramienta de apoyo que permite obtener la información y
localización exacta de los productos existentes en el supermercado Olímpica
basado en su lista de compra.
La incorporación de estas herramientas en el proceso de compra y venta son

necesarias para que el cliente se sienta satisfecho al momento de mercar o hacer
cualquier actividad relativa al comercio.
58
6. RECOMENDACIONES
A continuación se listan las recomendaciones sugeridas para futuros proyectos

relacionados con la problemática desarrollada:
Se puede implementar un aplicativo para campos de mayor dimensión, con

mayor variedad de topografía, como puede ser supermercados con más de una
entrada, y más de un piso de altura.
En cuanto al plano se recomienda el uso de herramientas o librerías más

específicas que puedan integrar la navegación dentro del supermercado en
tiempo real y que la visualización de la misma sea más agradable al usuario.
Se puede implementar para las universidades tomando como referencia las rutas
peatonales para la ubicación exacta de los bloques o edificios que componen a
esta.
En cuanto a la sugerencia de productos se recomienda el uso de algoritmos más

eficientes para poder manipular mayores cantidades de datos y en menos tiempo,
ya que para este proyecto se buscó que la respuesta sea efectiva.
Se puede implementar para que se hágala transacción de manera electrónica sin

la necesidad de asistir a la caja para hacer el pago.
Si se desea aplicar el producto a otra cadena de supermercados, la única

condición que se requiere es que el supermercado genere una vista con los
campos y tablas según se opere en la base de datos del sistema y así poder subir
la información en conjunto necesario para el funcionamiento del sistema.
59
REFERENCIAS
[1] Carlos Azaustre, 2014. Desarrollo Full stack JavaScript. El conocido como stack
MEAN. Recuperado de https://carlosazaustre.es/blog/desarrollo-full-
stackjavascript-tambien-conocido-como-mean/
[2] Damián Pérez Valdés, 2007. ¿Qué es JavaScript? Recuperado de

http://www.maestrosdelweb.com/que-es-javascript/
[3] García Padilla Rubén, Aplicación Android para Supermercados, Tesis de

Titulación en Ingeniería Informática Técnica de Gestión, Facultad de Informática de
Barcelona, Barcelona-España, 2011
[4] Hernández García Ángel, IGLESIAS PRADAS Santiago, La Web en el móvil:

tecnologías y problemática, El Profesional de la Información, Volumen 18, Numero
2. 2009, Paginas: 137 – 144.
[5] Hipertextual. ¿Qué es una Api? Recuperado de

http://hipertextual.com/archivo/2014/05/que-es-api/
[6] Juliana Monteiro Lázaro, 2001. Qué es CSS. Recuperado de

http://www.desarrolloweb.com/articulos/26.php
[7] KOTLER, Philip, ARMSTRONG, Gary, “Fundamentos de Marketing Sexta

Edición”. 2003. Pearson Educación. Página 81.
[8] Lance Talent (20-02-014) Los tres tipos de aplicaciones móviles: ventajas e
inconvenientes. Recuperado de http://www.lancetalent.com/blog/tipos-de-
aplicacionesmoviles-ventajas-inconvenientes/
[9] Miguel Ángel Álvarez, 2001. Qué es HTML. Recuperado de

http://www.desarrolloweb.com/articulos/que-es-html.html
[10] Quesada Sarah, 2013 ¿Qué es Responsive web Design? Recuperado de

http://www.maestrosdelweb.com/que-es-responsive-web-design/
60
[11] Rosario. Estudio sobre desarrollo las Tecnologías de la Información y la
Comunicación TICs. (p. 100-103), 2012.
[12] VARAS, Cinthia. Marketing Móvil. Buenos Aires: Universidad Abierta

Interamericana. 2010. [En línea]. [Consultado 29 de julio 2013]. Disponible en
internet: http://imgbiblio.vaneduc.edu.ar/fulltext/files/TC098561.pdf.
[13] Reyes Cifuentes, Victor Humberto NFC y android for the study of natural
language communication between man and machine. Communications of the
Association for Computing Machinery 9, pages 36–Quito –Ecuador, 2014.
[14] Jorge Jiménez, desarrollo de aplicación java para uso de compra de libros,
Bogota-colombia, 2005
[15] Mauricio Sánchez. Agents that buy and sell: Transforming commerce, as we
know it. Communications, Cali-Colombia, 2007.
[16] Desarrolladores de Google, Conferencia sobre plataforma Android

Marshmallow, 25 de junio de 2014, Recuperado de:
https://es.wikipedia.org/wiki/Android
[17] Building PhoneGap applications powered by Database.com

Comportamiento de PhoneGap, con html5, JavaScript y php. Recuperado:
http://www.adobe.com/devnet/phonegap/
[18] Sublime text 2, Herramienta de desarrollo, hecha en Python.

http://www.genbetadev.com/herramientas/sublime-text-2
[19] “Revista Virtual Universidad Católica del Norte”, [en línea], ISSN 01245821,
#22, [Sep–Dic. 2007]. Acceso a través de: www.ucn.edu.co
[20] Bodhani, A., 2012. Shop soffer the e-tail experience .Eng. Technol. 7(5), 46–49.
[21] Papagiannidis, S., See-to, E., Bourlakis, M., Virtual test-driving: the impact of
simulated products on purchase intention, J. Retail. Consum. Serv. (in this issue).
61
ANEXOS
ANEXOS .............................................................................................................................. 62
ALCANCES Y LIMITACIONES ............................................................................................ 63
Alcances ........................................................................................................................... 63
Limitaciones ...................................................................................................................... 63
MARCO LEGAL ................................................................................................................... 64
POBLACIÓN Y MUESTRA .................................................................................................. 65
MANUAL DE INSTALACIÓN ............................................................................................... 68
Registro de cuenta ........................................................................................................... 68
Crear cuenta para la página ............................................................................................. 69
Escoger plan de hosting ................................................................................................... 69
Ingresar dominio y contraseña ......................................................................................... 70
Confirmar orden................................................................................................................ 70
Obtención del dominio que es easyshopping.16mb.com ................................................ 71
Panel administrar.............................................................................................................. 71
Acceso FTP ...................................................................................................................... 72
Gestor de sitios Filezilla ................................................................................................... 72
Subir archivos ................................................................................................................... 73
MANUAL DE USUARIO....................................................................................................... 74
BIENVENIDOS AL APLICATIVO ..................................................................................... 75
MODULO ADMINISTRADOR .......................................................................................... 76
Autenticación como administrador ............................................................................... 76
Sección Estante ............................................................................................................ 77
Sección Categorías ..................................................................................................... 78
Sección Productos ........................................................................................................ 80
Sección Administradores ............................................................................................. 82
Sección Clientes ........................................................................................................... 84
Cerrar sesión ................................................................................................................ 85
MODULO CLIENTE (APLICACIÓN MÓVIL) ................................................................... 86
Formulario de Registro de usuario (Cliente) ................................................................ 86
Pantalla principal .......................................................................................................... 87
Buscar Producto ........................................................................................................... 88
Acceso a categorías ..................................................................................................... 89
Acceso a productos en ofertas ..................................................................................... 90
Acceso a productos nuevos ......................................................................................... 90
Acceso a la lista de productos ...................................................................................... 91
Acceso al perfil del usuario ........................................................................................... 94
Acceso a contacto con el administrador ...................................................................... 94
Acceso al menú desplegable........................................................................................ 95
62
ALCANCES Y LIMITACIONES
Alcances
El análisis realizado de las diferentes tecnologías, basado en las necesidades

identificadas y al escenario en el cual se aplicarán, incluyendo dispositivos móviles
necesarios para determinar la ubicación de un producto dentro de las instalaciones
del supermercado olímpica, así que del aplicativo de compra se espera que:
La App es funcional para cualquier supermercado, teniendo en cuenta su

plano.
Genere información detallada del producto a comprar.
Genere la ubicación o localización exacta de los productos a mercar basado

en su lista de compra o categorías de preferencias.
Que la app genere el recorrido total que hizo el cliente al comprar los
productos.
La app genera el precio total de la compra.
Que sea oportuno, agradable, satisfactorio el uso de dicho aplicativo para la

compra.
La app será funcional solo cuando esté conectado a la red.
Limitaciones
El sistema no será capaz de:
Funcionar sin internet.
Funcionar si tiene un plano diferente al supermercado que visita.
63
MARCO LEGAL
Decreto 1360 de 1989, Junio 23, Artículo 4°El soporte lógico (software), será
considerado como obra inédita, salvo manifestación en contrario hecha por el titular
de los derechos de autor
Este software libre, como cualquier obra humana, queda cobijado por los derechos
de autor. El creador de este software libre conserva los derechos morales,
empezando por el de paternidad, incluso siendo obra colectiva o en colaboración.
Así mismo, el autor de una obra derivada de la original, es decir, un programa
modificado y mejorado basado en otro, también tiene derecho al reconocimiento de
la paternidad sobre ésta. Frente al derecho moral de oponerse a la modificación,
quien desarrolla un software libre está expresando su total consentimiento para que
su obra sea adaptada, modificada, mejorada; Y, por supuesto, el derecho moral a
modificar la obra antes, previamente, y más tarde o después, de la publicación de
esta se encuentra maximizado en este tipo de software. Los derechos patrimoniales,
por su parte, son liberados completamente: el derecho a reproducir el programa, de
adaptarlo o modificarlo y comunicar o transmitir al público el software; Y esto, con
la misma premisa de ser con o sin ánimo de lucro.
64
POBLACIÓN Y MUESTRA
Para la realización de este análisis, se tomó una muestra exploratoria de 50

personas. Se obtuvo de ese modo una aceptación del 90%, con un margen de error
de 5%. Esto da como resultado un tamaño de la muestra final con un aproximado
de 207 personas.
Las encuestas fueron aplicadas de manera aleatoria a personas que asisten a

mercar en los diferentes Supermercados para tener una muestra mucho más
convincente, con la finalidad de mostrar la aceptación de un carrito de compra
inteligente, para agilizar las compras y así tener como respaldo un estudio del
mercado, al momento de la instalación de estas tecnologías. Los resultados de la
investigación se exponen a continuación:
1. ¿Con que frecuencia al mes visita los supermercados para hacer las respectivas
compras para la canasta familiar?
Respuesta Cantidad Porcentaje
1 Vez 20 40%
2 Veces 25 50%
3 Veces 2 4%
Nunca 3 6%
Total 50 100%
Tabla 7: Visita el Supermercado
Ilustración 34: Visita el Supermercado
2. ¿Ha dejado algún artículo en la caja del supermercado porque el presupuesto

que dispone no le alcanzo para pagar los productos adquiridos?
Respuesta Cantidad Porcentaje Falta De Presupuesto
Si 35 70%
30%
No 15 30% 70%
Total 50 100%
Si No
Tabla 8: Articulo en caja por falta de
presupuesto
Ilustración 35:Articulo en caja por falta de presupuesto
65
3. ¿Considera que lo anterior ocasiona una pérdida de tiempo y malestar al
momento del pago?

Perdida de Tiempo
Si 40 80% 80%
20%
No 10 20%
Total 50 100%
Si No
Tabla 9: Perdida de tiempo
Ilustración 36: Perdida de tiempo
4. ¿Cree que la información (precio, contenido nutricional, fecha de vencimiento)

mostrada en el estante sobre el producto que desea comprar en el
supermercado es suficiente?
Respuesta Cantidad Porcentaje Información

Si 5 10% Insuficiente 90%
No 45 90%
10%
Total 50 100%
Si No
Tabla 10: Información Suficiente
Ilustración 37: Información Insuficiente
5. ¿Sabe la ubicación exacta de los productos que pretende comprar?

Ubicacion del
Si 5 10%
Producto
90%
No 45 90%
10%
Total 50 100%
Si No
Tabla 11: Ubicación exacta del producto
Ilustración 38: Ubicación exacta del producto
66
6. ¿Le parece interesante minimizar el tiempo en caja en el momento de pago?

Minimizar Tiempo
86%
Si 43 86%
No 7 14%
14%
Total 50 100%
Si No
Tabla 12: Minimizar tiempo
Ilustración 39: Minimizar tiempo
7. ¿Está de acuerdo con que este supermercado instale un carrito de compra

inteligente con un sistema que brinde información detallada sobre cada producto
como precios y localización en estante facilitando el cálculo del monto a pagar
de forma sencilla?
Respuesta Cantidad Porcentaje Instalacion del Carrito

Si 47 94% 94%
No 3 6%
Total 50 100%
6%
Tabla 13: Instalación del carrito de compra Si No
inteligente
Ilustración 40: Instalación del carrito de compra inteligente
67
MANUAL DE INSTALACIÓN
Pasos para subir nuestro proyecto web a un hosting gratuito en este caso
HOSTINGER
Registro de cuenta
Ilustración 41: Crear Cuenta o iniciar Sesión en Hostinger
68
Crear cuenta para la página
Clic Aquí
Ilustración 42: Crear Cuenta para la página.
Escoger plan de hosting

Clic en plan gratis
Ilustración 43: Escoger Plan.
69
Ingresar dominio y contraseña
Subdominio 6mb.com
Ingresa subdominio
Ingresa contraseña
Clic en continuar Confirmar contraseña
Ilustración 44: Ingresar dominio y contraseña.
Confirmar orden
Ilustración 45: confirmar orden.
70
Obtención del dominio que es easyshopping.16mb.com
Ilustración 46: Obtención del dominio.
Panel administrar
Clic en Acceso FTP
Ilustración 47: Panel administrar.
71
Acceso FTP
Ilustración 48: Acceso FTP
Gestor de sitios Filezilla
Conectamos con
Ilustración 49: Gestor de sitios
72
Subir archivos
Ilustración 50: Subida de archivos.
73
DISEÑO Y DESARROLLO DE UNA APLICACIÓN PARA DISPOSITIVOS
MÓVILES CON SISTEMA OPERATIVO ANDROID COMO HERRAMIENTA DE
APOYO AL USUARIO QUE LE PERMITA OBTENER LA INFORMACIÓN Y
UBICACIÓN EXACTA DE LOS PRODUCTOS EXISTENTES EN EL
SUPERMERCADO OLÍMPICA BASADO EN SU LISTA DE COMPRA.
Ilustración 51: Logo de la aplicación
MANUAL DE USUARIO
Rodrigo Romero Mejía – James Dalin Cárdenas Benítez
74
BIENVENIDOS AL APLICATIVO
Esta aplicación tiene un diseño amigable, que permite a los usuarios buscar un
producto, ver detalladamente la información y localizar el producto de manera
exacta basándose en su lista de compra o en las categorías de preferencia, además
de eso puede calcular el precio total de la
compra para que el usuario pueda manejar el
presupuesto de manera más sencilla.
Ilustración 52: Logo de la aplicacion
PARA TENER ACCESO A LA APLICACIÓN MÓVIL
Para acceder a la aplicación es necesario tenerla instalada en el dispositivo móvil

(Tablet, Smartphone), para ello es necesario disponer de acceso a internet, para
acceder a la parte web en este caso el (administrador), utilizamos un navegador
cualquiera (Chrome, Mozilla, Internet Explorer…Etc.) a través de la siguiente URL:
http://easyshopping.16mb.com
75
MODULO ADMINISTRADOR
En este módulo el usuario administrador podrá crear, modificar y eliminar estantes

productos, categorías y usuarios, de igual forma asignarles la ubicación de cada
producto que será visible en la aplicación.
Autenticación como administrador
Para acceder a la aplicación es necesario ingresar usuario y contraseña, como se

muestra a continuación.
Ilustración 53: Inicio de sesión cuanta de administrador.
76
Sección Estante
Una vez iniciada la sesión en el módulo administrador, se puede ver el plano o mapa
del supermercado y sus respectivas rutas para localizar un producto
Hacer clic para acceder a
la sección de estantes
Ilustración 54: Sección estante.
Para crear, modificar y eliminar un nodo o arista que este caso representan las
posibles rutas en el supermercado, están descritas en la parte inferior del plano del
supermercado.
Guardar cambios Al presionar se guarda de manera general todos los cambios que
se hacen en esta sección (modificar, crear y/o eliminar estantes).
Detalle del Nodo Al seleccionar un nodo se muestra la información de este, esta se

puede modificar, luego presionar Aplicar y por ultimo Guardar cambios.
Cambiar Plano Aquí se cambia el plano del lugar en este caso el supermercado en
el cual se va a usar la aplicación.
77
Al presionar clic, Inmediatamente se mostrara una nueva ventana en esta podrá
cambiar el plano o mapa del lugar, para realizar el proceso… escoja la opción
cambiar plano, seleccione una imagen del mapa desde su computadora luego pulse
la opción abrir.
Ilustración 55: Cambiar Plano
Sección Categorías Hacer clic para acceder a la sección de

Categorías
Para organizar las categorías se tiene en cuenta, cual

es la categoría principal y que subcategorías
dependen de ella. Por ejemplo:
Categoría 1
Subcategoría 1
Subcategoría 2
Categoría 2
Subcategoría 1
Subcategoría 2
Esto lo puedes hacer, seleccionando la categoría y
arrastrarla a su posición, basado en la organización
del supermercado.
Ilustración 56: Sección Categoría.
78
El manejo de los procesos en la sección de las categorías se muestra a
continuación.
Hacer clic
Luego ingrese el nombre de la categoría y presiona
Hacer clic
Cambie el nombre de la categoría y presiona de lo

contrario presiona cancelar.
Hacer clic
Luego presiona para dar de baja a la categoría selecta,

si no desea hacer cambios presiona cancelar.
Ilustración 57: Procesos en la sección categoría
79
Sección Productos Hacer Clic para entrar Aquí puede descargar el listado de
a la sección de los productos en el formato que
productos desee
Listado de
productos
Ilustración 58: Vista de la sección de productos
A continuación se observan las diferentes acciones que se utilizan para administrar

la sección productos
Hacer Clic
Luego de hacer clic, Ingresa los datos del producto, teniendo en cuenta que todos
los campos son requeridos, luego de realizar el proceso presiona
80
Presionar
Modifica los datos que sean necesario, cuando este seguro de cambiar la
información del producto presiona si no desea hacer modificaciones
presiona Cancelar.
Hacer clic
Luego presiona, para dar de baja al producto seleccionado, si no

desea hacer ningún proceso presiona Cancelar.
Ilustración 59: Procesos en la sección productos
81
Sección Administradores
Hacer Clic para Aquí puede descargar el
entrar a la sección listado de los productos
de productos en el formato que desee
Lista de Administradores
Ilustración 60: Sección Administradores.
A continuación se observan los diferentes procesos que se utilizan para administrar

la sección Administradores.
Presionar
82
Ingresa los datos del administrador, luego de haber llenado todo los
campos presiona
Presionar
Cambiar los datos necesarios, cuando este seguro de modificar

la información del administrador presiona si no desea
hacer variaciones en la información presiona Cancelar.
Hacer clic
Luego de hacer clic, presionar, para dar de baja al

administrador seleccionado, si no desea hacer ningún cambio
presiona Cancelar.
Ilustración 61: Procesos en la sección administradores.
83
Sección Clientes Hacer Clic para Aquí puede descargar el
entrar a la sección listado de los productos en el
de productos formato que desee
Botón Botón
Editar Eliminar
Lista de Clientes
A continuación se observan las distintas acciones que se realizan para la

administración de la sección Clientes.
Presionar
Cambiar datos relevantes, cuando este seguro de modificar la información del

cliente presiona si no desea hacer cambios presiona Cancelar.
84
Hacer clic
Luego de hacer clic, presionar, para dar de baja al cliente seleccionado,

si no desea hacer ningún cambio presione Cancelar.
Ilustración 63: Procesos en la sección Clientes.
Cerrar sesión
Clic en cerrar sesión
Ilustración 64 Cerrar Sesión administrador
85
MODULO CLIENTE (APLICACIÓN MÓVIL)
En este módulo el usuario (Cliente) podrá buscar un producto dependiendo de su

lista de compra o simplemente teniendo en cuenta las categorías de preferencia,
además puede ver información detallada, comprar y localizar un producto en el
supermercado de manera exacta.
Cuando instalas la aplicación en tu teléfono por primera vez inmediatamente

muestra en pantalla el formulario de registro, estos datos son necesarios para poder
utilizar las funciones que la aplicación brinda, el aplicativo se desarrolló para que la
actividad de mercar no se torne fastidiosa, ni se vea como una labor donde se pierde
mucho tiempo, este aplicativo se desarrolló para que el cliente viva una nueva
experiencia, para que la actividad mercar sea más sencilla y agradable al momento
de efectuarla.
Formulario de Registro de usuario (Cliente)
Formulario de registro Ingresa los datos al formulario de registro, luego

presiona
86
Pantalla principal
Inmediatamente después de haber realizado el registro se muestra la pantalla

principal de la aplicación.
Puede presionar alguna opción para ver su contenido en este caso la opción producto
Se puede ver los detalles de cada producto en esta Presiona alguna de las opciones agregar a la lista
categoria, selecciona un producto de compra o ubircacion, para localizar el producto
en el supermercado.
Ilustración 67: Productos recientes, selección e información de un producto
87
Presiona agregar en el producto, y la app muestra Presiona en cualquier producto, te mostrara la
la siguiente informacion; Cantidad que llevara del inforrmacion detallada, precio, ademas de eso te
mismo producto, si desea agregarlo a la lista brinda opciones, como agregar a la lista de compra
presiona de lo contario presiona y ubircacion exacta en el supermercado
cancelar
Ilustración 68: Agregar producto a la lista y ver ubicación del en supermercado.
Buscar Producto
Selecciona la opción buscar Ingrese el nombre del producto que necesitas

Ilustración 69: Buscar producto
88
Acceso a categorías
Subcategorías
Presionar
Selecciona la opción Categorías La app mostrara en pantalla las categorias exitentes en el

supermercado con sus respectivas subcategorias, para
acceder a las subcategorias solo basta presionar
Ilustración 70: Acceso a categorías.
Acceso a productos destacados
Para ver la información del producto y demás Presiona la opcion destacados para ver que
opciones hacer los pasos de la Ilustración (64) productos mas vendidos en el supermercado
Ilustración 71: Acceso a destacados
89
Acceso a productos en ofertas
Descuento en
el producto
Selecciona la opción Ofertas En esta seccion se pueden observar los productos que
tienen descuentos, para ver la informacion y demas
opciones hacer lo que se muestra en la ilustracion (64)
Ilustración 72: Acceso a productos en ofertas.
Acceso a productos nuevos
Selecciona la opción Nuevos En esta seccion se pueden observar los recien ingresados
en el supermercado, para ver la informacion y demas
opciones hacer lo que se muestra en la ilustracion (64)
Ilustración 73: Acceso a productos nuevos
90
Acceso a la lista de productos
Lista sin ningún producto agregado, para Selecciona la opción lista.

agregar productos a la lista, hacer lo que se
muestra en las ilustraciones (64 y 65)
Ilustración 74: Acceso a la lista de producto
Opción ubicar
producto
Opción editar
producto en la
lista
Opción ver
recorrido total
Listado de productos agregados por el cliente Productos seleccionados, esto significa que está listo para
comprar los productos existentes en la lista
Ilustración 75: Lista de productos terminada.
91
Presiona para ver la ubicación exacta del Ubicación exacta del producto en el supermercado, tomando
producto inicialmente como referencia la entrada, ha mediado que
seleccione un producto y vea la ubicación de otro, tomara
como referencia no la entrada si no el último punto que visito
Ilustración 76: Ubicación de un producto de la lista.
Modificar
cantidad
Eliminar
Producto de la
lista
Aceptar para
guardar los
cambios
Presiona para editar productos en la lista. Puede cambiar la cantidad del producto que desea llevar, o
simplemente eliminar el producto de .la lista.
Ilustración 77: Editar un producto de la lista de compra.
92
Presiona para ver el recorrido La app muestra el recorrido total del usuario en el mapa
total al hacer la compra del supermercado.
Ilustración 78: Ver recorrido total.
Presiona para finalizar la compra. La app muestra el monto total de la compra.

Ilustración 79: Finalizar compra.
93
Acceso al perfil del usuario
Se muestra la informacion del cliente que usa la

Selecciona la opción perfil. apicacion.
Ilustración 80: Perfil del usuario (Cliente)
Acceso a contacto con el administrador
Se muestra la informacion del cliente que usa la

Selecciona la opción contacto. apicacion.
Ilustración 81: Contacto con el administrador
94
Acceso al menú desplegable
Presiona y la app te muestra el menú desplegable
Ilustración 82: Menú desplegable.
95

Easy Shopping

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Easy Shopping

Cargado por

Copyright:

Formatos disponibles

APLICACIÓN PARA DISPOSITIVOS MÓVILES CON SISTEMA OPERATIVO

ANDROID COMO HERRAMIENTA DE APOYO AL USUARIO QUE LE PERMITA

RODRIGO ROMERO MEJÍA

RODRIGO ROMERO MEJÍA

FIRMA PRESIDENTE DEL JURADO

A todos, muchas gracias.

James D. Cárdenas Benítez

Rodrigo Romero Mejía

James Dalin Cárdenas Benítez

Como una nueva plataforma para el desarrollo de aplicaciones móviles la liberación

aceptación tanto por los usuarios como por la industria.

La realización de poderosas y ligeras aplicaciones basadas en Android, permiten

mostrar el diseño y desarrollo de una aplicación Android con el fin de facilitar la

compra de productos en un supermercado específico, mostrando el precio,

ubicación y ofertas de dichos productos.

Palabras claves: Android, móvil, carrito de compra, servicio web.

android in order to facilitate the purchase of products in a particular supermarket

application, showing the price, location, and offers these products.

Keywords: Android, mobile, cart, web service.

Ilustración 1: Método en cascada ........................................................................................ 33

Tabla 1: Lista de deseos .............................................................................................................. 34

En la actualidad las tecnologías de la comunicación y la información, nos ofrecen la

En los supermercados que se encuentran ubicados en el municipio de lorica

La satisfacción del cliente es el objetivo principal de toda empresa, porque que un

Debido a esto, se nota la clara necesidad de diseñar y desarrollar una aplicación

Con base a las situaciones antes citadas se procede a plantear la siguiente

Estas tecnologías proporcionan información detallada y constantemente actualizada

Es necesario buscar la manera de alojar estas tecnologías en nuestra región para

Para ello mostraremos algunos proyectos muy relevantes e importantes tanto en el

En Bogotá-Colombia, se desarrolló una Aplicación Java para Librerías, tiene como

También en Cali-Colombia, se desarrolló un carro de compras, sistema que aporta

Igual en Barcelona España, el desarrollo de una Aplicación Android para

En la capital de Córdoba (Montería), se llevó a cabo el desarrollo de una aplicación

En Quito-Ecuador desarrollaron un sistema prototipo de carro de compras virtual

Identificar tecnologías y herramientas necesarias para el desarrollo de una

Diseñar modelos y arquitectura que permitan realizar una aplicación para

Realizar pruebas que acrediten el óptimo funcionamiento de la aplicación.

La era del computador personal ha evolucionado en cambio la era de los

Gracias a los avances tecnológicos, en especial a Internet, las organizaciones están

El e-Commerce proporciona nuevas oportunidades para que las empresas sean

Además de lo antes mencionado las aplicaciones han evolucionado, aportando a

Con el lanzamiento de Android como nueva plataforma para el desarrollo de

La realización de poderosas y ligeras aplicaciones basadas en Android, permiten

La revolución de los dispositivos móviles los llamados Smartphone o Tablet, a la

2.1.1. Plataforma Android

Android es un sistema operativo basado en el núcleo Linux. Fue diseñado

2.1.2. Sublime text

2.1.3. Responsive Design

Responsive Design o diseño adaptativo, es la técnica que se usa en la actualidad

4 Fuente: Recuperado de :http://www.genbetadev.com/herramientas/sublime-text-2

2.1.5. SDK de Android

Un kit de desarrollo de software o SDK (siglas en inglés de software development

Es un lenguaje markup (las siglas de HTML significan Hyper Text Markup

5 Fuente: Hipertextual. ¿Qué es una Api? Recuperado de http://hipertextual.com/archivo/2014/05/que-es-api/

Es un lenguaje de hojas de estilos en cascada creado para controlar el aspecto o

JavaScript es un lenguaje de programación que permite el script de eventos, clases

Es un entorno de programación en JavaScript para el Backend basado en el motor

2.1.11. SDK de Android

Un kit de desarrollo de software o SDK (siglas en inglés de software development

JSON es un formato de datos muy ligero basado en un subconjunto de la sintaxis

PhoneGap es un frameworks para el desarrollo de aplicaciones móviles producido

Es un sistema de administración de bases de datos (Database Management

2.1.15. Bases De Datos

Es un lenguaje de programación de uso general de código del lado del servidor