Post on 10-Jul-2022
UNIVERSIDAD POLITÉCNICA DE SINALOA
PROGRAMA ACADÉMICO DE INGENIERÍA EN
INFORMÁTICA
Tesina
“Diseño y Desarrollo de aplicación de
Punto de venta Jhony”
Para cumplir la acreditación de las estadías profesionales y contar con los créditos
necesarios para obtener el grado de Ingeniero en Informática
Autor:
Enrique Miguel Cerrito Urías
Asesora:
Dr. Luis Javier Mena Camare
Mazatlán, Sinaloa 27 de diciembre de 2020.
Tabla de contenido
CAPITULO I .............................................................................................................. 11
1.1- Antecedentes ............................................................................................................................... 12
1.2- Planteamiento del problema ....................................................................................................... 12
1.2-1. Relevancia ................................................................................... ¡Error! Marcador no definido.
1.3- Hipótesis ...................................................................................................................................... 13
1.4- Objetivos ...................................................................................................................................... 13
1.4-1. Objetivo General ..................................................................................................................... 13
1.4-2. Objetivos Particulares ............................................................................................................. 14
1.4-3. Objetivo de la investigación ........................................................ ¡Error! Marcador no definido.
1.5- Preguntas de investigación .......................................................................................................... 14
1.6- Importancia y/o Justificación del Estudio ........................................ ¡Error! Marcador no definido.
1.7- Limitaciones del Estudio .............................................................................................................. 15
CAPITULO II ............................................................................................................. 16
2.1- Aplicaciones Móviles ................................................................................................................... 17
Ventajas ................................................................................................................................................ 17
2.2- Desarrollo Móvil .......................................................................................................................... 18
2.3- Desarrollo Nativo ......................................................................................................................... 18
2.4- Desarrollo Hibrido o Multiplataforma ......................................................................................... 19
2.4-1. Android ................................................................................................................................... 19
2.5- Historia ........................................................................................................................................ 19
2.6- Material Design ........................................................................................................................... 20
2.7- Android Studio ............................................................................................................................. 21
2.8- Lenguajes de Programación ........................................................................................................ 21
2.8-1. Java ......................................................................................................................................... 21
2.8-2. XML ......................................................................................................................................... 22
2.8-3. Kootlin .................................................................................................................................... 23
2.8-4. PHP ......................................................................................................................................... 23
2.8-5. JSON ........................................................................................................................................ 24
2.8-6. Gradle ..................................................................................................................................... 25
2.9- Bases de datos ............................................................................................................................. 29
2.9-1. SQLite ...................................................................................................................................... 29
2.9-2. MySQL ..................................................................................................................................... 29
2.10- Web API ....................................................................................................................................... 31
2.10-1. Petición HTTP ..................................................................................................................... 31
2.10-2. Respuestas HTTP ................................................................................................................ 33
2.10-3. Mensajes HTTP .................................................................................................................. 34
CAPITULO III ............................................................................................................ 36
3.1 Material ....................................................................................................................................... 37
3.2 Instalación de Android Studio ...................................................................................................... 37
3.2.1 Instalación en Linux ................................................................................................................ 39
3.2.2 Instalación en Mac .................................................................................................................. 41
3.2.3 Configuración ......................................................................................................................... 41
3.3 Diseño .......................................................................................................................................... 47
3.3.1 Colores .................................................................................................................................... 47
3.3.2 Tipografía ................................................................................................................................ 48
3.3.3 Logo ........................................................................................................................................ 49
3.4 Diseño de los Modulos ................................................................................................................. 50
3.4.1 Modulo Login .......................................................................................................................... 50
3.4.2 Modulo de Menu principal y menu lateral ............................................................................. 51
3.4.3 Modulo Apertura de Dia ........................................................................................................ 52
3.4.4 Modulo Ventas ....................................................................................................................... 53
3.4.5 Modulo Cerrar Dia .................................................................................................................. 56
3.4.6 Modulo de Mi perfil ................................................................................................................ 57
3.4.7 Modulo configuración ............................................................................................................ 58
3.4.8 Modulo de Descarga de datos ................................................................................................ 59
3.4.9 Modulo de clientes ................................................................................................................. 60
3.4.10 Modulo Estado De cuenta ................................................................................................. 61
3.4.11 Modulo de Acerca de ......................................................................................................... 62
3.5 Procedimiento ............................................................................................................................. 63
3.5.1 Prosesos de La aplicación ....................................................................................................... 64
3.6 RESULTADOS ............................................................................................................................... 69
3.6.1 Conclusiones ........................................................................................................................... 70
3.7 REFERENCIAS BIBLIOGRÁFICAS .................................................................................................... 70
Tabla de imágenes
Imagen 1.1 ........................................................................................................ 20
Imagen 1.2 ........................................................................................................ 22
Imagen 1.3 ........................................................................................................ 25
Imagen 1.4 ........................................................................................................ 28
Imagen 1.5 ........................................................................................................ 28
Imagen 1.6 ........................................................................................................ 30
Imagen 1.7 ........................................................................................................ 31
Imagen 1.8 ........................................................................................................ 33
Imagen 1.9 ........................................................................................................ 34
Imagen 1.10 ...................................................................................................... 35
Imagen 3.2.1 ..................................................................................................... 38
Imagen 3.2.1 ..................................................................................................... 39
Imagen 3.2.1.1 .................................................................................................. 39
Imagen 3.2.1.2 .................................................................................................. 40
Imagen 3.2.1.3 .................................................................................................. 40
Imagen 3.2.2.1 .................................................................................................. 41
Imagen 3.2.3.1 .................................................................................................. 42
Imagen 3.2.3.2 .................................................................................................. 42
Imagen 3.2.3.3 .................................................................................................. 43
Imagen 3.2.3.4 .................................................................................................. 43
Imagen 3.2.3.5 .................................................................................................. 44
Imagen 3.2.3.6 .................................................................................................. 45
Imagen 3.2.3.7 .................................................................................................. 45
Imagen 3.2.3.8 .................................................................................................. 46
Imagen 3.2.3.9 .................................................................................................. 46
Imagen 3.3.1.1 .................................................................................................. 47
Imagen 3.3.1.2 .................................................................................................. 48
Imagen 3.3.1.3 .................................................................................................. 48
Imagen 3.3.3.1 .................................................................................................. 49
Imagen 3.3.3.2 .................................................................................................. 49
Imagen 3.4.1.1 .................................................................................................. 50
Imagen 3.4.2.1 .................................................................................................. 51
Imagen 3.4.3.1 .................................................................................................. 52
Imagen 3.4.4.1 .................................................................................................. 53
Imagen 3.4.4.2 .................................................................................................. 54
Imagen 3.4.4.3 .................................................................................................. 55
Imagen 3.4.5.1 .................................................................................................. 56
Imagen 3.4.6.1 .................................................................................................. 57
Imagen 3.4.7.1 .................................................................................................. 58
Imagen 3.4.8.1 .................................................................................................. 59
Imagen 3.4.9.1 .................................................................................................. 60
Imagen 3.4.10.1 ................................................................................................ 61
Imagen 3.4.11.1 ................................................................................................ 62
Imagen 3.5.1.1.1 ............................................................................................... 64
Imagen 3.5.1.3.1 ............................................................................................... 66
Imagen 3.5.1.6.1 ............................................................................................... 68
Imagen 3.5.1.7.1 ............................................................................................... 69
CAPITULO I
__________________________________________________________
ANTECEDENTES Y PLANTEAMIENTO DEL PROBLEMA.
1.1- Antecedentes
SAEMI es una consultaría enfocada en las tecnologías de la
información. Con ideas innovadoras y productos de calidad que nació
recientemente en Mazatlán. Inició ofreciendo servicios de Desarrollo,
Desarrollo Web, Marketing Digital y, recientemente incorporándose
al Desarrollo de Aplicaciones Móviles. SAEMI su dedicación
constante y eficaz a la resolución de problemas tecnológicos para sus
clientes y también impulsora de talento local.
1.2- Planteamiento del problema
La creación de una aplicación para tostadas jhony esta consiste en darle a los
vendedores una aplicación para sus dispositivos Android, la cual tendría como
objetivo de agilizar el proceso de ventas, abonos y devolución.
El desarrollo de la aplicación es para mejoramiento de una aplicación ya
existente la cual dependía de aplicaciones externas ajenas a Tostadas Jhony
para la impresión de Tickets durante una venta, devolución o abono, así como
un lector de códigos QR que no estaba integrado en la aplicación.
El objetivo es desarrollar una nueva aplicación con el estilo de negocios de
SAEMI que es el mejoramiento de procesos y diseños, SAEMI junto con
Tostadas Jhony quieren lograr un diseño de una interfaz más cómoda y
eficiente para vendedores que no estuvieran muy adaptados a las tecnologías
actuales, también integrar todas las funcionalidades de impresión de tickets y
lectura de código de barras en la misma aplicación, eliminando la necesidad de
depender de aplicaciones ajenas a Tostadas Jhony. Para que la aplicación lleve
todo el control de los procesos realizados por los vendedores de Jhony.
Uno de los problemas es también el tiempo que conlleva realizar el proceso de
una venta que es un tiempo de 8 minutos en promedio este tiempo se quiere
reducir en promedio un 50% con el proceso de la aplicación debido a que se
plantea mejorar el proceso al simplificarlos y que el vendedor no tenga que
ingresar toda la información sino tan solo seleccionarla.
1.2-1. Justificación
El desarrollo de esta aplicación es muy importante para Tostadas Jhony, debido
a que no cuentan con un control registrado sobre las traslaciones lo cual
causa incluso problemas administrativos por parte de ventas, por lo que también
esta aplicación está acorde a mejorar su imagen corporativa.
1.3- Hipótesis
El desarrollo de una aplicación nativa (IT, 2020) en el sistema operativo Android
mediante el lenguaje de programación Java, permitiría un desarrollo rápido de
aplicaciones gracias a su entorno completo de desarrollo, además el lenguaje al
ser nativo del sistema operativo tiene las librerías y herramientas necesarias para
acceso a todos los recursos como servicios de Google necesarios para Firebase
y acceso a todo el hardware del dispositivo. A su vez el desarrollo nativo nos
otorga facilitación de distribución de la aplicación.
1.4- Objetivos
1.4-1. Objetivo General
El objetivo es desarrollar una aplicación correctamente analizada y programada,
que le permita a Jhony optimizar y facilitar sus procesos, así como darles a los
vendedores una herramienta fiable para agilizar todos sus procesos sin la
necesidad de tener que cambiar de aplicaciones externas a Jhony.
1.4-2. Objetivos Particulares
los objetivos particulares que se van. A manejar es el analizar todos los procesos
que realiza la empresa para realizar una venta a los clientes para poder realizar
una correcta programación de la aplicación para que se ajuste a las necesidades
de la empresa. Se plantea cumplir con
• Acelerar el proceso de acceso y registro de ventas.
• La aplicación tendrá un diseño agradable y fácil de utilizar.
• Le mejoraran procesos de administración de producto desde la terminal
al vendedor.
• Se plantea implementar todas las funciones que necesita el vendedor en
una sola aplicación a la medida.
Uno de los objetivos del aprendizaje de aplicaciones intuitivas para
prácticamente cualquier usuario sin depender de su edad, el desarrollo de
aplicación avanzadas en Android, la cual requiere de unos conocimientos
bastantes amplios del sistema. El uso de reglas de diseño establecidas por
Google para unas aplicaciones con diseños óptimos acorde a la temática del
sistema operativo.
1.5- Preguntas de investigación
1. ¿Cuáles son los beneficios del cambio de interfaz?
2. ¿Qué problemas conlleva realizar la aplicación desde cero?
3. ¿Cuál es el beneficio a largo plazo?
4. ¿Se podría realizar una versión para el sistema operativo iOS?
5. ¿Podría afectar el cambio de interfaz o versión, los procesos que se
realizan actualmente?
6. ¿Cuáles son los beneficios de no depender de ninguna aplicación o
software externo?
7. ¿Es posible realizar una versión que sea compatible para Android y
iOS?
8. ¿Conlleva problemas el uso de aplicaciones ajenas?
9. ¿Cuál es la ventaja de utilizar una línea de diseño en particular?
10. ¿Podría solo requerirse una simple orientación a los vendedores del
uso de la aplicación?
11. ¿Podrían integrase nuevas funcionalidades a la aplicación a futuro?
12. ¿Se requerirá de la adquisición de equipos nuevo o licencias de
software?
13. ¿Requerirá la actualización de los equipos móviles donde se instalará
la aplicación?
1.6- Limitaciones del Estudio
Un supuesto en el que se habló mucho es el desarrollo de una versión para el
sistema operativo de Apple iOS, dado que la aplicación de Android requiere
accesos muy nativos al sistemas como acceso al Bluetooth y almacenamiento,
se requiere desarrollar desde cero, dado que su código no es portable, se
requiere de un computador Mac de Apple para poder desarrollar en iOS lo cual
aumentaría su presupuesto considerablemente, si bien se pueden hacer un
proceso llamado Hackintosh; que consiste en instalar el sistema MacOS en una
computadora con sistema Microsoft Windows, este requiere de un proceso muy
largo y complicado, aparte de que no todo el hardware es compatible, también se
requiere un computador Mac forzosamente, y que la computadora donde se
instale Mac OS tenga un procesador de la marca Intel y una GPU compatible
AMD Radeon.
Sin bien desde el principio del desarrollo se pensó en desarrollar el proyecto en
alternativas como React Native, que permite programar aplicaciones
móviles tanto para Android o iOS, por medio del lenguaje JavaScript con el uso
de CSS y HTML, sin embargo, se descartó rápidamente, dado que el uso de
librerías nativas que requieran los lenguajes Java (Android) o Swift de Apple, es
muy complicado, sobre todo relacionado con hardware o servicios nativos del
sistema.
CAPITULO II
__________________________________________________________
MARCO CONCEPTUAL
2.1- Aplicaciones Móviles
Una app móvil es una aplicación de software pensada para dispositivos móvilesa
como tabletas. teléfonos y relojes, estas aplicaciones son desarrolladas para la
ejecución de tareas igual o similares a las computadoras personales, pero
diseñada para pantallas o entornos más pequeños o específicos.
Ventajas
Las apps móviles cuentan con muchas ventajas en comparación con los
programas de escritorio, debido a las características de los dispositivos también
tienen muchas ventajas que aportan las apps.
• Comunicación Directa
Los clientes o usuarios pueden acceder a los servicios
proporcionados por la empresa mucho mas fácilmente, a su
vez la empresa una ofrece una aplicación basada en sus métricas
de forma mucho más rápida y eficiente.
• Complementación con la web
Las apps móviles al consultar servicios web, permiten una
integración muy completa a los servicios ofrecidos por una
empresa lo que ayuda a la experiencia de usuario.
• Mejores Experiencias
Las apps móviles al ejecutarse en pantallas más pequeñas como
lo son la de los celulares estas requieren de una metodología de
diseño muy diferente a las aplicaciones de escritorio, al tener muy
poco espacio en pantalla se debe hacer una experiencia al
usuario rica y con la información que solo necesita ver o le
interesa, lo cual crea nuevas formas o reglas de diseño que ayuda
aun mas a optimizar el desarrollo de apps.
2.2- Desarrollo Móvil
Los procesos y procedimientos establecidos involucrados en la creación de
software para pequeños dispositivos informáticos inalámbricos como tabletas y
teléfonos inteligentes. Al igual que el desarrollo de aplicaciones web, el proceso
de desarrollo de aplicaciones móviles también se deriva del desarrollo de
software tradicional. El desarrollo móvil se considera una rama del desarrollo
integrado, pero con la llegada de los teléfonos inteligentes, se ha convertido en
una rama separada y se ha convertido en una rama oficial, como el escritorio y
la Web.
Sin embargo, el desarrollo móvil empezó a tener problemas durante la masiva
expansión de los smartphones al haber dos plataformas dominantes que son
Android y iOS, por ello nacieron dos ramas de desarrollo móvil llamada
Desarrollo Nativo y Desarrollo Hibrido, ambas con diferencias importantes, pero
con el mismo propósito, el desarrollo de apps móviles.
2.3- Desarrollo Nativo
Las apps nativas son aquellas aplicaciones desarrolladas para ser instaladas en
una plataforma específica, como por ejemplo iOS o Android, utilizando un kit de
desarrollo de software específico (SDK) de la plataforma.
• Android de Google: se utilizan como lenguajes de programación Java y
Kootlin actualmente, y su IDE oficial es Android Studio
• iOS de Apple: se utilizan como lenguaje de programación Swift como
remplazo a Objetive-C aunque se puede seguir utilizando, y su IDE oficial
es xCode que solo puede ser utilizado en un computador de la misma
marca
Las aplicaciones nativas escritas para una plataforma no se pueden implementar en otra, es decir, una aplicación nativa diseñada específicamente para Android no podrá instalarse en un iPhone.
Este tipo de aplicaciones ofrecen un rendimiento más rápido y acceso directo a
los servicios nativos del dispositivo (acelerómetro, GPS, cámara, etc.), sin
embargo, una de las desventajas de crear aun app nativa es la cantidad de
tiempo que se necesita y todos los conocimientos de desarrollo que se requieren,
ya que cada software requiere un lenguaje de programación distinto.
2.4- Desarrollo Hibrido o Multiplataforma 2.4-1. Android
Android es un sistema operativo desarrollado para dispositivos inteligentes como
smartphones y tabletas. Es un sistema operativo basado en Linux lo cual le
permite una flexibilidad, ser de código y abierto, gratuito y con la posibilidad de
ejecutarse en casi cualquier plataforma como lo ha hecho en relojes inteligentes,
internet de las cosas o IoT, automóviles y en Smart TV.
2.5- Historia
El sistema operativo Android fue desarrollado originalmente por la empresa
Android Inc., con el objetivo de crear un sistema operativo alterno a los que había
en el marcado en ese entonces Symbian y BlackBerry OS, eran los más
extendidos, sin embargo todo cambio con la llegada del primer iPhone, donde
dejaba a sus competidores muy por debajo, sin embargo, mucho antes de la
salida del iPhone, Google compra Android Inc., Google crea la Open Handset
Alliance, un conglomerado de fabricantes y desarrolladores de hardware,
software y operadores de servicio. En 2007 Android presenta su primera versión
Android 1.0 Apple Pie, siendo el primer dispositivo con Android el HTC Dream
que fue lanzado un año después que el iPhone de Apple.
En la actualidad Android tiene a unas de las comunidades de desarrolladores
más grandes, dado que su lenguaje de programación es Java y actualmente
Kootlin, le llevo una gran popularidad debido a su mejor desarrollo, ya que
muchos venían de desarrollar aplicaciones para teléfonos Symbian, que usaban
JME o Java Micro Edition. Android se ha ganado el cariño no solo de
desarrolladores sino, que Android al ser basado en un núcleo Linux, se tiene
libertad de hacer cualquier modificación de parte del usuario a los diferentes
dispositivos vendidos por los fabricantes, como el cambio o actualización del
sistema operativo, que el fabricante ya no daba soporte.
2.6- Material Design
Material Design es una normativa de diseño enfocado en la visualización del
sistema operativo Android, además en la web y en cualquier plataforma. Fue
desarrollado por Google y anunciado en la conferencia Google I/O celebrada el
25 de junio de 2014
Material se integró en la versión 5.0 de Android, denominada Lollipop como
remplazo a su anterior estilo de diseño Holo, utilizado desde Android 4.0 Ice
Crean Sándwich hasta su versión 4.4 KitKat.
Fuente: Material Imagen 1.1
2.7- Android Studio
Android Studio es el entrono de desarrollo o IDE oficial, para el desarrollo de
aplicaciones para Android, basado en el Editor de la empresa JetBrains Intellij
IDEA. Al ser basado en este editor pose prácticamente todas sus características
como su potente editor de código, plugins o aditamentos que ayudan al
desarrollador. Android Studio complemente con el IDE de JetBrains todas las
herramientas y funciones necesarias para el desarrollo. Anteriormente el IDE
oficial era eclipse sin embargo Google Decide hacer su propio entorno de
desarrollo, lanado en 2014.
Android Studio incorpora muchas herramientas y funciones que aumentan la
eficiencia y productividad en el desarrollo de aplicaciones para Android como:
• Alta integración para el desarrollo con los servicios de Google
• Compatibilidad para el desarrollo de librerías nativas o apps que hagan
uso de toda la potencia del del hardware con el lenguaje C++ atreves del
NDK
• Al ser un editor basado en Intellij IDEA, tiene toda la integración con
controladores de versiones como GIT.
• Herramientas de testeo para verificar el rendimiento de la aplicación.
• Integración de un emulador de Android, fácil de usar y configurar, y con
diferentes plantillas de dispositivos Android que se encuentran en el
mercado (Familia Nexus y Google Pixel).
• Posibilidad de ejecución de aplicaciones Android en dispositivos físicos
que el desarrollador disponga.
• Entorno de diseño de interfaz con las posible as resoluciones de pantalla,
de los dispositivos comercializados del marcado.
• Posibilidad de usar dos lenguajes de programación para el desarrollo Java
y Kootlin.
2.8- Lenguajes de Programación 2.8-1. Java
Java es una plataforma informática y a su vez un lenguaje de programación
creado en 1995 por la empresa Sun Microsystem. El objetivo de este lenguaje
es que los programadores sólo tuvieran que escribir el código de un programa
una vez, y que éste, pudiese ejecutarse en cualquier dispositivo. Esto es posible
gracias a la Máquina Virtual de Java (JVM), que brinda esa portabilidad
necesaria.
Java es un lenguaje orientado a objetos, independiente de la plataforma
hardware donde se desarrolla, y que utiliza una sintaxis similar a la de C++ pero
reducida. Es un lenguaje con una curva de aprendizaje baja (se puede decir que
es fácil de aprender) y que dispone de una gran funcionalidad de base
(incrementada por la gran cantidad de código de terceros existente). Java, como
lenguaje de programación, ofrece un código robusto, que ofrece un manejo
automático de la memoria, lo que reduce el número de errores.
Fuente: Oracle Imagen 1.2
2.8-2. XML
XML es el acrónimo de Extensible Markup Language, es decir, es un lenguaje
de marcado que define un conjunto de reglas para la codificación de
documentos. ¿Te parece complicado? Entonces, vamos a simplificarlo.
El lenguaje de marcado es un conjunto de códigos que se pueden aplicar en el
análisis de datos o la lectura de textos creados por computadoras o personas. El
lenguaje XML proporciona una plataforma para definir elementos para crear un
formato y generar un lenguaje personalizado.
Un archivo XML se divide en dos partes: prolog y body. La parte prolog consiste
en metadatos administrativos, como declaración XML, instrucción de
procesamiento opcional, declaración de tipo de documento y comentarios. La
parte del body se compone de dos partes: estructural y de contenido (presente
en los textos simples).
El diseño XML se centra en la simplicidad, la generalidad y la facilidad de uso y,
por lo tanto, se utiliza para varios servicios web. Tanto es así que hay sistemas
destinados a ayudar en la definición de lenguajes basados en XML, así
como APIs que ayudan en el procesamiento de datos XML – que no deben
confundirse con HTML.
2.8-3. Kootlin
Es un lenguaje de programación de tipado estático que corre sobre la máquina
virtual de Java y que también puede ser compilado a código fuente
de JavaScript. Es desarrollado principalmente por JetBrains en sus oficinas
de San Petersburgo (Rusia). El nombre proviene de la isla de Kotlin, situada
cerca de San Petersburgo.
2.8-4. PHP
PHP es un lenguaje de scripting de código abierto, del lado del servidor, con
programación HTML integrada que se utiliza para crear páginas web dinámicas.
Las ventajas de PHP son su flexibilidad y su alta compatibilidad con otras bases
de datos. Además, PHP es considerado como un lenguaje fácil de aprender.
Las funciones de PHP se relacionan con los scripts del lado del servidor. PHP
puede realizar cualquier tarea que cualquier programa CGI (Common Gateway
Interface) puede hacer y maneja el intercambio de datos entre el servidor y el
software. Por lo tanto, PHP puede recopilar datos o crear webs de contenido
dinámico.
Tres funciones principales distinguen en particular el PHP:
• Programación del lado del servidor: esto requiere tres componentes, que
son un analizador PHP, un navegador web y un servidor web. Este último
está conectado con una instalación PHP. El navegador web se utiliza para
acceder al programa PHP. El navegador muestra páginas web que se
almacenan en el servidor y se generan con PHP. La programación del
lado del servidor es ideal para webs de prueba antes de su publicación en
la web.
• Programación a través de la línea de comandos: Los scripts PHP pueden
ser creados sin un navegador o servidor. En este caso, sólo necesitarás
un analizador PHP. Estos scripts son adecuados para las tareas regulares
que se llevan a cabo en una web.
• Escribir aplicaciones de escritorio: esta función no se utiliza con tanta
frecuencia como la programación de páginas web. Sin embargo, el PHP
es adecuado para el desarrollo de aplicaciones de escritorio debido a su
complejidad, que también puede ser utilizado a través de múltiples
plataformas.
2.8-5. JSON
JSON (JavaScript Object Notation - Notación de Objetos de JavaScript) es un
formato ligero de intercambio de datos. Leerlo y escribirlo es simple para
humanos, mientras que para las máquinas es simple interpretarlo y generarlo.
Está basado en un subconjunto del Lenguaje de Programación
JavaScript, Standard ECMA-262 3rd Edition - Diciembre 1999. JSON es un
formato de texto que es completamente independiente del lenguaje, pero utiliza
convenciones que son ampliamente conocidos por los programadores de la
familia de lenguajes C, incluyendo C, C++, C#, Java, JavaScript, Perl, Python, y
muchos otros. Estas propiedades hacen que JSON sea un lenguaje ideal para el
intercambio de datos.
JSON está constituido por dos estructuras: Una colección de pares de
nombre/valor. En varios lenguajes esto es conocido como un objeto, registro,
estructura, diccionario, tabla hash, lista de claves o un arreglo asociativo.
Una lista ordenada de valores. En la mayoría de los lenguajes, esto se
implementa como arreglos, vectores, listas o secuencias.
Estas son estructuras universales; virtualmente todos los lenguajes de
programación las soportan de una forma u otra. Es razonable que un formato de
intercambio de datos que es independiente del lenguaje de programación se
base en estas estructuras.
En JSON, se presentan de estas formas: Un objeto es un conjunto desordenado
de pares nombre/valor. Un objeto comienza con {llave de apertura y termine con}
llave de cierre. Cada nombre es seguido por: dos puntos y los pares
nombre/valor están separados por, coma.
Fuente: JSON.org Imagen 1.3
2.8-6. Gradle
Gradle, es una herramienta que permite la automatización de compilación de
código abierto, la cual se encuentra centrada en la flexibilidad y el rendimiento.
Los scripts de compilación de Gradle se escriben utilizando Groovy o Kotlin DSL
(Domain Specific Language).
Gradle tiene una gran flexibilidad y nos deja hacer usos otros lenguajes y no solo
de Java, también cuenta con un sistema de gestión de dependencias muy
estable. Gradle es altamente personalizable y rápido ya que completa las tareas
de forma rápida y precisa reutilizando las salidas de las ejecuciones anteriores,
sólo procesar las entradas que presentan cambios en paralelo.
Además, es el sistema de compilación oficial para Android y cuenta con soporte
para diversas tecnologías y lenguajes. Algunas características de Gradle que
podemos destacar son las siguientes:
• Depuración colaborativa: Permite compartir los resultados de la
compilación para resolver en equipo de forma eficiente posibles
problemas que aparezcan.
• Construcción incremental: Valida en el proceso de compilación si la
entrada, salida o implementación de una tarea ha cambiado, en caso de
no existir algún cambio la considera actualizada y no se ejecuta.
• Diseño de repositorio personalizado: Podremos tratar prácticamente
cualquier estructura de directorios del sistema de archivos como un
repositorio de Artifacts.
• Dependencias transitivas: Es uno de los principales beneficios que ofrece
al utilizar la gestión de dependencias ya que se encarga de descargar y
administrar las dependencias transitivas.
• Soporte a Groovy y Scala incorporado: Compatibilidad con los proyectos
de Groovy, permitiendo trabajar con código Groovy o código Scala e
inclusive desarrollar código mixto Java y Groovy o Java y Scala.
• Compilación incremental para Java: En caso de que el código fuente o la
ruta de clase cambien, Gradle cuenta con la capacidad para detectar
todas las clases que se vean afectadas por dicho cambio y procederá a
recompilarlas.
• Embalaje y distribución de JAR, WAR y EAR: Cuenta con herramientas
para empaquetar el código basado en JVM (Java Virtual Machine) en
archivos de archivo comunes.
• Integración con Android Studio: Android Studio no cuenta con un
generador interno, sino que delega todas las tareas de compilación en
Gradle, garantizando la corrección en todas las construcciones, ya sea
que se ejecuten desde Android Studio, la línea de comandos o un servidor
de construcción de integración continua.
• Soporte de MS Visual C ++ y GoogleTest: Gradle acepta la construcción
con el compilador de Visual C de Microsoft en Windows. (VS 2010, VS
2013 y VS 2015 compatibles), así como también realizar pruebas de
aplicaciones C con GoogleTest.
• Publicar en repositorios Ivy y Maven: Permite publicar Artifacts en
repositorios Ivy con diseños de directorios completamente
personalizables. De igual modo, sucede con Maven en Bintray o Maven
Central.
• TestKit para pruebas funcionales: Permite la ejecución programática de
builds inspeccionando los resultados de compilación, ésta es una prueba
de compatibilidad entre versiones.
• Distribuciones personalizadas: En Gradle cada distribución cuenta con un
directorio init.d en el que se pueden colocar scripts personalizados que
pre configuran su entorno de compilación.
• Lee el formato POM: Es compatible con el formato de metadatos POM,
por lo que es posible recuperar dependencias de cualquier repositorio
compatible con Maven.
• Compara builds: Resalta de forma rápida las diferencias entre
compilaciones, lo que hace que el análisis de la causa raíz sea mucho
más rápido y eficaz.
• Compilador daemon: Gradle crea un proceso de daemon que se reutiliza
dentro de una compilación de múltiples proyectos, cuando necesita
bifurcar el proceso de compilación, mejorando la velocidad de
compilación.
• Personalizar y extender escaneos: Ofrece la opción de agregar sus
propios datos para construir escaneos como etiquetas, valores y enlaces,
integrando escaneos de compilación en la cadena de herramientas.
• Caché de dependencia de terceros: Las dependencias de repositorios
remotos se descargan y almacenan en caché localmente, las
compilaciones posteriores utilizan los artifacts almacenados en caché
para evitar el tráfico de red innecesario.
Fuente: OpenWebBinnars Imagen 1.4
Fuente: globallydynamic Imagen 1.5
2.9- Bases de datos 2.9-1. SQLite
SQLite es una herramienta de software libre, que permite almacenar información
en dispositivos empotrados de una forma sencilla, eficaz, potente, rápida y en
equipos con pocas capacidades de hardware, como puede ser una PDA o un
teléfono celular. SQLite implementa el estándar SQL92 y también agrega
extensiones que facilitan su uso en cualquier ambiente de desarrollo. Esto
permite que SQLite soporte desde las consultas más básicas hasta las más
complejas del lenguaje SQL, y lo más importante es que se puede usar tanto en
dispositivos móviles como en sistemas de escritorio, sin necesidad de realizar
procesos complejos de importación y exportación de datos, ya que existe
compatibilidad al 100% entre las diversas plataformas disponibles, haciendo que
la portabilidad entre dispositivos y plataformas sea transparente.
Estas son algunas de las características principales de SQLite:
• La base de datos completa se encuentra en un solo archivo.
• Puede funcionar enteramente en memoria, lo que la hace muy rápida.
• Tiene un footprint menor a 230KB.
• Es totalmente autocontenida (sin dependencias externas).
• Cuenta con librerías de acceso para muchos lenguajes de programación.
• Soporta texto en formato UTF-8 y UTF-16, así como datos numéricos de
64 bits.
• Soporta funciones SQL definidas por el usuario (UDF).
• El código fuente es de dominio público y se encuentra muy bien
documentado.
2.9-2. MySQL
MySQL, es un sistema de gestión de base de datos relacional o SGBD. Este
gestor de base de datos en multihilo y multiusuario, lo que le permite ser utilizado
por varias personas al mismo tiempo, e incluso, realizar varias consultas a la vez,
lo que lo hace sumamente versátil.
Nació como una iniciativa de Software Libre y aún sigue ofreciéndose como tal,
para usuarios particulares. Pero si se desea utilizarlo para promover datos en
una empresa, se puede comprar una licencia, como un software propietario, que
es autoría de la empresa patrocinante (Actualmente Oracle Corporation).
La mayor parte del código se encuentra escrito en lenguaje C/C++ y la sintaxis
de su uso es bastante simple, lo que permite crear bases de datos simples o
complejas con mucha facilidad. Además, es compatible con múltiples
plataformas informáticas y ofrece una infinidad de aplicaciones que permiten
acceder rápidamente a las sentencias del gestor de base de datos.
Fuente: Mysql Imagen 1.6
2.10- Web API
Una API es un conjunto de definiciones y protocolos que se utiliza para
desarrollar e integrar el software de las aplicaciones. API significa interfaz de
programación de aplicaciones.
Las API permiten que sus productos y servicios se comuniquen con otros, sin
necesidad de saber cómo están implementados. Esto simplifica el desarrollo de
las aplicaciones y permite ahorrar tiempo y dinero. Las API le otorgan flexibilidad;
simplifican el diseño, la administración y el uso de las aplicaciones, y
proporcionan oportunidades de innovación, lo cual es ideal al momento de
diseñar herramientas y productos nuevos (o de gestionar los actuales).
Las API son un medio simplificado para conectar su propia infraestructura a
través del desarrollo de aplicaciones nativas de la nube, pero también le permiten
compartir sus datos con clientes y otros usuarios externos.
Fuente: Red Hat Imagen 1.7
2.10-1. Petición HTTP
Las peticiones HTTP son mensajes enviados por un cliente, para iniciar una
acción en el servidor. Su línea de inicio está formada por tres elementos:
1. Un método HTTP, un verbo como: GET, PUT o POST) o un nombre
como: HEAD o OPTIONS), que describan la acción que se pide sea
realizada. Por ejemplo, GET indica que un archivo ha de ser enviado
hacia el cliente, o POST indica que hay datos que van a ser enviados
hacia el servidor (creando o modificando un recurso, o generando un
documento temporal para ser enviado).
2. El objetivo de una petición, normalmente es una URL, o la dirección
completa del protocolo, puerto y dominio también suelen ser
especificados por el contexto de la petición. El formato del objetivo de la
petición varia según los distintos métodos HTTP. Puede ser:
• Una dirección absoluta, seguida de un signo de cierre de interrogación
‘?’ y un texto de consulta. Este es el formato más comun, conocido
como el formato original ('origin form' en inglés), se usa en los
métodos GET, POST, HEAD,y OPTIONS .
POST/HTTP 1.1
GET/background.png HTTP/1.0
HEAD/test.html?query=alibaba HTTP/1.1
OPTIONS /anypage.html HTTP/1.0
• Una URL completa; conocido como el formato absoluto, usado
mayormente con GET cuando se conecta a un proxy.
GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages
HTTP/1.1
• El componente de autorizado de una URL, formado por el nombre del
dominio y opcionalmente el puerto (el puerto precedido por el
símbolo ':’), se denomina a este formato como el formato de autoridad.
Únicamente se usa con CONNECT cuando se establece un túnel
HTTP.
CONNECT developer.mozilla.org:80 HTTP/1.1
• El formato de asterisco, se utiliza un asterisco ('*’) junto con las
opciones: OPTIONS, representando al servidor entero en conjunto.
OPTIONS * HTTP/1.1
3. La versión de HTTP, la cual define la estructura de los mensajes,
actuando como indicador, de la versión que espera que se use para la
respuesta.
Fuente: Mozilla Developer Imagen 1.8
2.10-2. Respuestas HTTP
La línea de inicio de una respuesta HTTP, se llama la línea de estado, y
contienen la siguiente información:
1. La versión del protocolo, normalmente HTTP/1.1.
2. Un código de estado, indicando el éxito o fracaso de la petición. Códigos
de estado muy comunes son: 200, 404, o 302
3. Un texto de estado, que es una breve descripción, en texto, a modo
informativo, de lo que significa el código de estado, con el fin de que una
persona pueda interpretar el mensaje HTTP.
Una línea de estado típica es, por ejemplo: HTTP/1.1 404 Not Found.
Las cabeceras HTTP para respuestas siguen también la misma estructura como
cualquier otra cabecera: una cadena de texto, que no diferencia entre
mayúsculas y minúsculas, seguida por dos puntos (':') y un valor cuya estructura
depende del tipo de cabecera. Toda la cabecera incluido su valor, se ha de
expresar en una única línea.
Existen varias cabeceras posibles. Estas se pueden dividir en distintos grupos:
• Cabeceras generales, ('General headers' en inglés), como Via, afectan al
mensaje completo.
• Cabeceras de petición, ('Request headers' en
inglés), como Vary , Accept-Ranges, dan información adicional sobre el
servidor, que no tiene espacio en la línea de estado.
• Cabeceras de entidad, ('Entity headers' en ingles), como Content-
Length las cuales se aplican al cuerpo de la petición. Por supuesto, esta
cabecera no necesita ser transmitida si el mensaje no tiene cuerpo ('body'
en inglés).
•
Fuente: Mozilla Developer Imagen 1.9
2.10-3. Mensajes HTTP
Los mensajes HTTP, son los medios por los cuales se intercambian datos entre
servidores y clientes. Hay dos tipos de mensajes: peticiones, enviadas por el
cliente al servidor, para pedir el inicio de una acción; y respuestas, que son la
respuesta del servidor.
Los mensajes HTTP están compuestos de texto, codificado en ASCII, y pueden
comprender múltiples líneas. En HTTP/1.1, y versiones previas del protocolo,
estos mensajes eran enviados de forma abierta a través de la conexión. En
HTTP/2.0 los mensajes, que anteriormente eran legibles directamente, se
conforman mediante tramas binarias codificadas para aumentar la optimización
y rendimiento de la transmisión.
Los desarrolladores de páginas Web, o administradores de sitios Web,
desarrolladores... raramente codifican directamente estos mensajes HTTP.
Normalmente especifican estos mensajes HTTP, mediante archivos de
configuración (para proxies, y servidores), APIs (para navegadores) y otros
medios.
Fuente: Mozilla Imagen 1.10
CAPITULO III
__________________________________________________________
DISEÑO Y DESARROLLO.
3.1 Material
Para el comienzo del desarrollo se realizo una reunión con el encargado del
departamento de sistemas de Tostadas Jhony el Sr. Noe Meza, quien nos
presento la aplicación que se tenia en producción, Menciono que la aplicación
había sido desarrollada mediante un convenio, de un equipo de desarrollo o con
una empresa, pero, sin embargo, el desarrollo de la nueva versión de la
aplicación debería cumplir con los siguientes puntos:
• Una interfaz más agradable y fácil de usar para los vendedores, para que
los vendedores que no están familiarizados con las nuevas tecnologías
no presenten problemas en la utilización.
• La aplicación no deberá requerir demasiada capacitación sobre la
utilización para los vendedores.
• Se deberá contar con un sistema de configuración práctico y sencillo para
el proceso de cambio de ruta y la configuración de impresoras bluetooh
• Funcionalidad para la impresión de tickets de venta, abonos,
devoluciones y etc.
• Deberá tener una interfaz acorde a la nueva imagen corporativa de
Tostadas Jhony que es directa de SAEMI.
• Deberá contar con la posibilidad de descargar información de productos,
promociones, precios especiales, obsequios. En una base de datos local,
ya que algunas rutas ya establecidas se encuentran en zonas donde la
conexión a internet no esta disponible, tanto internet domestico como
datos móviles ofrecidos por los diferentes operadores.
3.2 Instalación de Android Studio
El software que se utilizo para el desarrollo de la aplicación es Android Studio, el
IDE oficial de desarrollo de la plataforma móvil, para ellos se debe de cumplir
ciertos requisitos de hardware para su instalación, se requieren los siguientes
requisitos:
• 10 GB de espacio libre (Recomendado una unidad de estado sólido o
SSD)
• Un procesador Intel o AMD de cuatro núcleos, con una velocidad
recomendada de 2.0 GHz
• 8 GB de RAM (mínimo), 12 GB o superior (recomendados)
• Soporte para virtualización para emulación de Android o Tener un
dispositivo Android Físico
• Sistema Operativo Linux, Windows o Mac OS
Al cumplir los requisitos podemos descargar el IDE desde la pagina de Android
Developers, de forma completamente gratuita.
Fuente: Del Autor Imagen 3.2.1
Al descargar Android Studio nos pedirá aceptar los términos y condiciones, no
tendremos que seleccionar para que sistema operativo se requiere, ya que nos
reconocerá automáticamente el sistema operativo que tenemos instalado en
nuestra computadora.
Fuente: Del Autor Imagen 3.2.1
3.2.1 Instalación en Linux
Al descargar el archivo .tar, procedemos a descomprimir el archivo, podremos
colocarlo en cualquier carpeta, pero lo mas recomendable es descomprimirla en
la carpeta raíz de nuestro usuario ejemplo /home/usuario/, se puede realizar este
proceso por manera gráfica, o mediante la consola de comandos
Fuente: Del Autor Imagen 3.2.1.1
Para ejecutar el asistente de instalación procederemos a abrir la consola de
comando o terminal y entramos a la carpeta de Android Studio seguido de la
carpeta bin, con el comando cd.
Fuente: Del Autor Imagen 3.2.1.2
Ejecutamos el archivo studio.sh mediante la terminal, este es el ejecutable de
Android Studio, los pasos seguidos aplican con cualquier distribución Linux tanto
Ubuntu, Debian, Fedora, entre otros. No se requieren permisos de administrador
para su ejecución.
Fuente: Del Autor Imagen 3.2.1.3
3.2.2 Instalación en Mac
Al descargar el archivo .dmg, procederemos a ejecutarlo, el archivo nos mostrara
una ventana con dos iconos.
Fuente: Del Autor Imagen 3.2.2.1
Para a la instalación arrastraremos el icono de Android studio a la carpeta de
aplicaciones con esto finalizaremos la instalación en el sistema operativo Mac.
3.2.3 Configuración
El asistente de configuración de Android Studio, es exactamente el mismo en
todas las plataformas compatibles, así que aplica tanto para Linux, Windows y
OS X, primero nos pedirá si tenemos alguna configuración que queramos
importar, como temas, plugins o configuraciones, si no tenemos ninguna
configuración anterior, tendremos que seleccionar “no importar configuraciones”
y dar en continuar.
Fuente: Del Autor Imagen 3.2.3.1
Después mostrara que, si queremos enviar estadísticas de uso de Google con el
objetivo de mejorar o corregir bugs que surjan durante el uso de la aplicación.
Fuente: Del Autor Imagen 3.2.3.2
Continuando con la configuración el asistente nos da la bienvenida a Android
Studio, explicando la funcionalidad del Editor, y para que plataformas Android
esta disponible de manera oficial, después daremos en siguiente.
Fuente: Del Autor Imagen 3.2.3.3
A continuación, el asistente de Android Studio nos pedirá que, si queremos una
instalación estándar que procederá con la instalación de todo el software
necesario o personalizada, en este caso seleccionaremos en personalizada y
damos click en siguiente.
Fuente: Del Autor Imagen 3.2.3.4
Posteriormente nos pedirá donde esta localizado el JDK de Java, es requerido
tenerlo instalado en su versión 1.8, si ya lo tenemos instalado, detectara
automáticamente en la carpeta donde se encuentra instalado, después damos
click en siguiente.
Fuente: Del Autor Imagen 3.2.3.5
Posteriormente nos pedirá el tema que tendremos por default, aquí podremos
elegir entre tema claro y oscuro, en este caso se selecciona oscuro, pero pueden
elegir el de su preferencia.
Fuente: Del Autor Imagen 3.2.3.6
Después de la configuración del tema nos pedirá que queremos descargar del
software de desarrollo, es importante descargar las ultimas versiones del SDK
Tools, también si queremos instalar el Android Virtual Device o AVD, pero
dejaremos todas las opciones por defecto marcadas, y procedemos a continuar.
(Es necesario contar con conexión a internet)
Fuente: Del Autor Imagen 3.2.3.7
Antes de comenzar la descargar el asistente nos mostrara un resumen de todo
el software que queremos descargar, procederemos a continuar dando click en
siguiente.
Fuente: Del Autor Imagen 3.2.3.8
Posteriormente iniciara la descargar de el SDK Tools, este proceso puede
demorar dependiendo de la conexión a internet.
Fuente: Del Autor Imagen 3.2.3.9
3.3 Diseño
3.3.1 Colores
En Material Design una de sus reglas declara que el color de la aplicación debe
ser acorde al color más representativo de la empresa, el color que utiliza en este
caso Tostadas Jhony es un color rojo intenso, por lo cual se decidió elegir la
siguiente paleta de colores principales de la aplicación.
Fuente: Por Autor Imagen 3.3.1.1
se decidió por cambiar la paleta de colores en todas las interfaces para que fuera
una interfaz blanca, pero conservando en partes de la interfaz como títulos,
botones o cualquier elemento representativo un color rojo mas ligero en cuanto
a intensidad, para seguir conservando los colores principales de la aplicación.
Esta decisión se hizo ya que era más fácil la implementación de un modo oscuro
que Google requiere estrictamente en sus aplicaciones, a partir del lanzamiento
de Android 10 y para que la interfaz fuera mas amigable ala vista del usuario. A
continuación, se muestran las nuevas paletas de colores, tanto para tema claro
como oscuro respectivamente.
Fuente: Por Autor Imagen 3.3.1.2
Fuente: Por Autor Imagen 3.3.1.3
3.3.2 Tipografía
La fuente que se utilizo fue la fuente predeterminada del sistema operativo
Roboto, solo en una excepción de utilizo una fuente especial para solo un título
en el inicio de la aplicación, que este caso es la fuente lastica. La fuente roboto
al ser la predeterminada del sistema operativo, es agradable a la vista a la vez
que es muy amigable con Material Design también predeterminada, aunque es
posible utilizar otras fuentes como Sans-serif.
3.3.3 Logo
El logo es muy importante en cualquier software sin importar la plataforma, ya
que represente la imagen comercial de este, en este caso se decidió utilizar el
logo original de Tostadas Jhony.
Fuente: Por Autor Imagen 3.3.3.1
Pero el logo para el icono del launcher de la aplicación se decidió usar un icono
de Jhony minimizado, solo buscando algo representativo y llamativo de la marca
como lo es el castillo y su tamaño era adecuado para el icono de la aplicación.
Además, el IDE genera tres iconos con formas distintas para cada uno de las
diferentes configuraciones que de los launcher de los diferentes fabricantes de
teléfonos Android.
Fuente: Por el autor Imagen 3.3.3.2
3.4 Diseño de los Módulos
En este apartado se habla sobre el puro diseño y no los procesos de los módulos
que contiene la aplicación debido a que gran parte del proyecto se enfoco en
lograr una aplicación con un diseño sencillo pero funcional para la facilitación de
los procesos que realizan los vendedores.
3.4.1 Modulo Login
Durante la creación el diseño del Login en lo que nos enfocamos fue que fuera
algo sencillo como Material Design lo estipula, pero darle un toque personal y
llamativo para lograr eso decidimos colocar un fondo diseñado específicamente
para el apartado y que encajara perfectamente en el ambiente.
Fuente: Por el autor Imagen 3.4.1.1
3.4.2 Modulo de Menú principal y menú lateral
Menú principal
En el diseño del menú principal se planeo hacerlo de una manera mas vistoso
por lo que los diferentes módulos se implementaron con iconos representativos
para que fuera mas simple de entender el menú y también se pensó en darle una
forma de facilitación a los vendedores para encontrar lo que necesitan por lo que
el botón de ventas como es el que ellos siempre usan se planteo en darle un
distintivo para su fácil ubicación y utilización.
Menú lateral
En este menú tiene algunas opciones diferentes al menú principal porque no se
utilizan frecuentemente por el vendedor, son opciones extras que se
implementaron para no sobre cargar el menú principal, pero a la vez tenerlas a
en un acceso rápido, aquí también se muestra información relevante del
vendedor que esta utilizando la aplicación.
Fuente: Por el autor Imagen 3.4.2.1
3.4.3 Modulo Apertura de Día
En este modulo solo se muestra formulario sencillo que obtiene la fecha al iniciar
el día como el titulo lo menciona, al inicio información sobre la ruta de comercio
que esta designada al dispositivo y por último una pequeña frase motivacional
aleatoria, después muestra un listado de los datos que esta descargando para
las operaciones que se realizaran en el día de laboral.
Fuente: Por el autor Imagen 3.4.3.1
3.4.4 Modulo Ventas
Este modulo por funciones de comodidad y visualización se dividió en 3 partes
importantes como lo son la lista de clientes, la ventana de ventas y la lista de
productos, el diseño se implemento de esta manera para no sobre cargar la
pantalla con toda la información y mejorar estéticamente el proceso y la
visualización de los datos necesarios.
lista de clientes
en este apartado lo que se nos muestra es un dialog que contiene una lista de
clientes de asignados a la ruta que se muestra al iniciar una venta, los clientes
se muestras de una amera cómoda para el vendedor dependiendo el orden de
visita que llevara en su ruta asignada, la información que se muestra solo es la
necesaria el nombre, id y dirección del establecimiento cada cliente se
representa con una letra por estética visual, al final se muestra un botón flotante
que se encarga de leer los códigos de barra que se encuentran en los
establecimientos para proceder a la venta.
Fuente: Por el autor Imagen 3.4.4.1
Ventana de ventas
Esta ventana se muestra después de a ver seleccionado un cliente en la lista de
clientes, su diseño esta conformado con una tarjeta para la información del
cliente, una sección para los productos que se están tramitando desde la lista de
producto y por ultimo los datos de precios de la venta ligeramente resaltados.
• Subtotal: Muestra la suma de la multiplicación de la cantidad y el precio
del producto, pero sin descuento, en caso de que el cliente tenga
descuento con Tostadas Jhony
• Descuento: Es el resultado de la suma de la multiplicación de la cantidad
del producto, pero por el descuento que dicho producto tenga con el
cliente si lo tiene disponible
• Total, es la resta entre el subtotal y el descuento.
Fuente: Por el autor Imagen 3.4.4.2
Lista de productos
Esta lista se muestra al hacer click en el icono del carrito en la ventana venta
aquí podemos observar una lista de los productos que ofrece la empresa jhony
los datos que se muestran de cada producto son los necesarios como lo son el
nombre del producto, la cantidad que lleva en el transporte, el precio y un id para
identificar el producto, una vez seleccionado los productos de compra se
marcaran con una palomita para identificarlos. Una vez finalizado este proceso
los productos seleccionados se mandarían a la ventana de ventas.
Fuente: Por el autor Imagen 3.4.4.3
3.4.5 Modulo Cerrar Día
En este modulo lo principal que podemos visualizar es una pequeña lista de los
diferentes procesos que el vendedor realiza durante su día de trabajo en esta
lista podemos observar un resumen de cuantas operaciones de cada tipo realizo
durante el día, también tiene un botón para empezar el proceso de cierre de día,
al dar click en el nos enviara a otra ventana con un formulario de 8 apartados
que tienen que ser rellenados por los vendedores para poder finalizar el proceso
de finalización del día.
Fuente: Por el autor Imagen 3.4.5.1
3.4.6 Modulo de Mi perfil
En este modulo podremos observar un apartado con la información mas
importante del vendedor como lo es el nombre, puesto, teléfono de contacto,
numero de seguro social y por ultimo el tipo de sangre y debajo de apartado
podemos visualizar una los datos mas principales como lo son Modelo, Placas y
kilometraje sobre el vehículo que este asignado a la ruta del vendedor.
Fuente: Por el autor Imagen 3.4.6.1
3.4.7 Modulo configuración
En esta ventana podremos visualizar diferentes configuraciones de la aplicación
como lo es el tema oscuro, las configuraciones para la impresora de tickets, la
configuración de la ruta, del servidor al que esta apuntando la aplicación y unas
opciones extra para el testeo de la aplicación durante su desarrollo que son el
visualizar la base de datos interna del teléfono y el envió de una copia de
seguridad de la misma por correo electrónico, en esta vista podremos visualizar
y configurar estas distintas opciones.
Fuente: Por el autor Imagen 3.4.7.1
3.4.8 Modulo de Descarga de datos
Esta ventana se creo para poder actualizar datos del servidor después de a ver
inicializado el día ya que en algunas ocasiones los datos no estaban correctos
en el servidor al momento de iniciar el día, para evitar el problema de cerrar el
día y volver a iniciar se tomo ala decisión de crear este apartado que nos brinda
mas comodidad al momento de este tipo de errores por parte del servidor con
esta opción el vendedor solo escogería las opciones que necesita actualizar y
las descargaría.
Fuente: Por el autor Imagen 3.4.8.1
3.4.9 Modulo de clientes
Esta ventana esta diseñada del mismo modo que la lista de clientes en el modulo
de ventas la única diferencia es que no es dialog, en realizad es una ventana
completa esta muestra un dialog con información sobre el cliente de una manera
agradable para el vendedor y rápida, la información que muestra es el nombre
del establecimiento, numero telefónico, correo electrónico, dirección y los días
de la semana en los cuales se le visita al cliente, también cuenta con un acceso
directo al modulo de ventas y a una pequeña encuesta que se les hace a los
clientes. Pero a la vez algunos clientes cuentan con cuentas a crédito y esto les
agrega una opción extra que es abonos.
Fuente: Por el autor Imagen 3.4.9.1
3.4.10 Modulo Estado De cuenta
Esta ventana se accede desde el modulo de clientes debido a que solo algunos
clientes cuentan con una cuenta a crédito, esta ventana cuenta con una card
donde podemos visualizar el nombre de cliente y un saldo actual de su cuenta
de crédito, también podemos ver un historial de movimientos que son las ventas
que a pedido a crédito solo se muestra la fecha de creación y el saldo a pagar
de las ventas a crédito, al final de la ventana esta situado un botón flotante que
nos permite acceder a aun dialog de abonos donde igual observaremos el
nombre del cliente y el código de registro y un apartado donde podremos agregar
un el saldo a abonar del cliente.
Fuente: Por el autor Imagen 3.4.10.1
3.4.11 Modulo de Acerca de
Es una vista sencilla que solo muestra información de la aplicación como lo es el
nombre, la versión, datos del autor en este caso SAEMI y algunos datos
generales de la empresa dueña de la aplicación que es Tostadas Jhony.
Fuente: Por el autor Imagen 3.4.11.1
3.5 Procedimiento
Lo primero que se realizo durante el desarrollo de la aplicación fue el análisis de
procesos que realiza la empresa desde el momento de partida de los repartidores
desde la empresa, esto para poder entender mejor todo el proceso de los
vendedores, el análisis se llevo a cabo por el encargado de sistemas de jhony y
un compañero de mi grupo de trabajo cabe destacar que algunos procesos
también se analizaron desde una aplicación ya existente en la empresa
encargada de los procesos de ventas a la cual sustituirá nuestra aplicaron , ellos
se encargaban de analizar y comprender todos los procesos que realizan los
vendedores tanto por administración como por la aplicación, una vez
comprendidos, se convocaba a una reunión con el equipo de desarrollo en la
cual se plantea y explicaban los procesos a realizar, se hacia notar las partes
importantes de ellos, los puntos negativos para poder ser mejorados y un posible
diseño con el cual empezaríamos a trabajar.
Durante el desarrollo de la aplicación se analizo y procesaron en su totalidad los
procesos que desarrollan los vendedores durante su día laboral parte de estos
procesos se tomaron de base de la anterior aplicación con la que contaba jhony
por lo cual nosotros solamente los intentamos mejorar y simplificar lo mas posible
para obtener una mejor respuesta del usuario y un mejor resultado al momento
de realizarlos y otros procesos fueron creados completamente con el desarrollo
de la aplicación.
Algunos procesos que realiza la aplicaron son bastante largos y complejos, pero
otros son simples de implementar, durante el desarrollo de ellos fuimos
analizando el problema buscando la mejor optimización y funcionamiento de
ellos, algunos pasaron por diferentes formas de planeación y de desarrollo
generando diferentes versiones del mismo proceso hasta que encontramos en
lo que parece ser el mejor método tanto para optimización, funcionalidad y
eficacia.
Debido a la variabilidad de procesos que realiza la aplicación, solo se planteara
explicar en generar los procesos y no a profundidad, mostrando solo lo mas
relevante de diseño y funcionalidad de los mismos.
3.5.1 Procesos de La aplicación
3.5.1.1 Inicio de sesión
El primer proceso es el inicio de sesión del usuario, si el usuario es la primera
vez que inicia sesión en la aplicación se iniciara el proceso de configuración de
ruta esto es un proceso de 2 sencillos pasos de seleccionar la agencia de ventas
y la ruta asignada al vendedor, si el usuario ya había configurado esto antes al
iniciar sesión entrara directamente al menú principal de la aplicación.
Fuente: Por el autor Imagen 3.5.1.1.1
3.5.1.2 Inicio De Día
Este es un proceso principal de la aplicación debido a que sin el no se puede
realizar los procesos principales como lo son la ventas y devoluciones.
El inicio de día es una forma de validar que el usuario empezó la ruta para este
proceso solo hace falta poner la fecha del día actual y dar empezar día de trabajo
con esto la aplicación empezara a descargar los datos necesarios del día desde
el servidor para que se permita entrar al apartado de ventas y a todas las
opciones que contiene la aplicación con los datos actualizados.
3.5.1.3 Ventas
Este es el proceso mas largo e importante de la aplicación debido a que es el
proceso principal, en el se hace utilización de pequeños procesos internos que
nos saltaremos porque no son tan importantes de explica.
Lo primero que se realiza para realizar una venta es seleccionar un cliente de la
lista de clientes que muestra en la ventana de ventas previamente mostrada en
la sección de diseño una vez seleccionado el cliente nos guarda su información
en ventas para poder tener un control del detalle de ventas, después de esto
tendremos que seleccionar los productos que el cliente desea comprar esto igual
se puede seleccionar en la lista de productos por selección múltiple, una ves
seleccionados todos los productos a vender se enviaran ala ventana de ventas
donde se podrá seleccionar la cantidad de cada uno de lo productos y mostrando
el costo individual de cada producto, también nos mostrara los precios de la
venta que son un subtotal de toda la venta de productos, un descuento esto se
implementa a algunos clientes o algunos productos, y el precio total de la venta.
Durante la venta el cliente también puede realizar devoluciones de productos
este proceso es igual de al de venta de producto solo que en vez de sumar al
subtotal de la venta se restara el precio de los productos devueltos durante la
venta.
Al finalizar una venta la se muestra un registro de historial donde se muestra el
cliente, fecha y hora, el toral de venta y el método de pago; durante esto la
aplicación manda a imprimir un ticket con los datos de la venta.
Fuente: Por el autor Imagen 3.5.1.3.1
3.5.1.4 Estado de cuenta
A este proceso solo podremos acceder desde la ventana de clientes debido a
que solo algunos cuentan con una cuenta a crédito.
Este proceso es el abono a las cuentas a crédito, la ventana siguiente nos
muestra el saldo a pagar y el historial de movimientos que son las ventas
realizada a crédito, al realizar un abono a ala cuenta este se implementara
reduciendo la por abonos a las ventas mas viejas en existencia hasta saldarla
venta y hace reduciendo el estado de cuenta, se pueden realizar los abonos que
quiera el cliente de las cantidades que quieran mientras salde su cuenta
pendiente.
3.5.1.5 Descargas
Este es uno de los procesos sencillo a la vista, pero complicados internamente
es una opción que se implemento en la aplicación debido a que en algunas
ocasiones cuando se inicia el día en la aplicación los moderadores del servidor
no han actualizado algunos datos como Clientes, precios, obsequios o productos
por lo tanto se descargan incompletos los datos necesarios para el día laborar.
Esto causa problemas con las ventas, esto se soluciono con el proceso de
descargas independientes de estos datos cuando surgen estos tipos de
problemas el vendedor notifica al moderador de que hacen falta datos para que
los actualicen y una vez actualizados los datos en el servidor el vendedor podrá
descargar los datos faltantes sin tener que volver regresar a la empresa y sin
perder los procesos de ventas ya realizados y procesados.
3.5.1.6 Pedidos de ruta
Este proceso con se realiza en una de las opciones del menú lateral, esta
enfocado para cuando el vendedor se queda sin productos durante el día para
esto el se realiza el pedido de la ruta que selecciona desde un dialog de
productos los productos que le hacen falta para un revastecimieto al almacén al
realizar el pedido sele envía una petición al almacén y almacén manda otro
vehículo para revastecer al vendedor en su ruta para que no tenga que volver a
la empresa y ahorrar ese tiempo de regreso.
Fuente: Por el autor Imagen 3.5.1.6.1
3.5.1.7 Cierre de día
El proceso de cierre de día se lleva a cabo al finalizar la ruta y el día laboral, este
se encarga de mandar toda la información de las ventas, devoluciones o abonos
que allá realizado el vendedor durante su día al servidor principal, en la
aplicación se muestra un resumen con las cantidades de ventas, abonos y
devoluciones realizados durante el día para que el vendedor no tenga que
contarlas o llevar un historia, la aplicación lo hace por el porque es lo que
buscamos mejorar el proceso, después de eso nos mostrara una ventana con un
formulario que el vendedor debe completar el formulario son datos sobre el día
como gastas que realizo , kilometraje recorrido , gasolina gastada y etc.
Al momento de finalizar esta encuesta todos los datos realizados por el vendedor
se mandarán al servidor mediante un JSON para tener solo una inserción al día
y poder identificar si surge un error al intentar subir los datos al servidor,
Con esto el proceso del vendedor y de la aplicación termina su día.
Fuente: Por el autor Imagen 3.5.1.7.1
3.6 RESULTADOS
Los resultados sobresalientes de la implementación de la aplicación son a los
vendedores les gusto mucho la aplicación por el motivo que no seles tuvo que
dar un curso del funcionamiento ellos mismos fueron probándola y aprendiéndola
a utilizar lo cual era uno de los aspectos a conseguir en el desarrollo, también se
logro mejorar el proceso de venta debido a que se realiza un 50% mas rápido y
practico que en la aplicación anterior que ya existía.
3.6.1 Conclusiones
En conclusión, el proyecto fue realizado a tiempo y forma, cumpliendo con los
puntos y expectativas que se habían acordado en el acuerdo de desarrollo, la
aplicación ya paso por las pruebas de testeo y esta siendo probada en el
departamento de productividad como ultimo filtro para poder mandarla a
productivo, la aplicación tomo las mejores partes de la aplicación anterior y las
reutilizo y mejoro aun mas. Cumpliendo con su objetivo para la empresa de
Tostadas Jhony.
El equipo de trabajo junto con el que desarrolle la aplicación es muy competente
y cumplido con todas nuestras tareas. Demostrando que los conocimientos
adquiridos en la carrera sobre el trabajo en equipo e individual sirvieron como
base para formar un equipo de trabajo ya en el área laboral, al igual que el
conocimiento sobre el tema de desarrollo Android para lograr cumplir con las
actividades que senos otorgaban durante las estancias.
3.7 REFERENCIAS BIBLIOGRÁFICAS
Google. (11 de Nov de 2020). Android Developers. Obtenido de https://developer.android.com/studio
Hackingtosh. (11 de Nov de 2020). Hackingtosh. Obtenido de Hackingtosh: https://hackintosh.com/
IT, E. (11 de Nov de 2020). Escuela IT. Obtenido de Escuela IT: https://escuela.it/materias/desarrollo-nativo#:~:text=Desarrollo%20nativo%20es%20aquel%20en,realiza%20usando%20Java%20como%20lenguaje.
Native, R. (11 de Nov de 2020). React Native. Obtenido de https://reactnative.dev/
NorthWare. (11 de Nov de 2020). NorthWare. Obtenido de https://www.northware.mx/2017/09/12/desarrollo-de-aplicaciones-moviles-hibridas/#:~:text=Por%20otro%20lado%2C%20las%20aplicaciones,h%C3%ADbridos%20contra%20desarrollos%20web%20m%C3%B3vil.
Technopedia. (9 de 9 de 2012). Technopedia. Obtenido de https://www.techopedia.com/definition/19709/hackintosh
Pizarro, N. (2020). Beneficios de las aplicaciones móviles para las empresas | IDA Chile. Retrieved 26 November 2020, from https://blog.ida.cl/estrategia-digital/beneficios-aplicaciones-moviles-empresas/ Aplicación móvil - Ventajas y desventajas. (2020). Retrieved 26 November 2020, from https://blog.agendize.com/es-mx/aplicacion-movil-ventajas-y-desventajas
Aplicación móvil. (2020). Retrieved 26 November 2020, from
https://es.wikipedia.org/wiki/Aplicaci%C3%B3n_m%C3%B3vil
SEAS, E., & SEAS, E. (2020). Conoce el lenguaje de programación Java | Blog SEAS. Retrieved 26 November 2020, from https://www.seas.es/blog/informatica/conoce-el-
lenguaje-de-programacion-java/
XML Tutorial. (2020). Retrieved 26 November 2020, from
https://www.w3schools.com/xml/
(2020). Retrieved 27 November 2020, from https://www.redhat.com/es/topics/api/what-
are-application-programming-interfaces
¿Qué es XML y para qué sirve este lenguaje de marcado?. (2020). Retrieved 27 November 2020, from https://rockcontent.com/es/blog/que-es-xml/
JSON. (2020). Retrieved 27 November 2020, from https://www.json.org/json-es.html
Material Design. (2020). Retrieved 27 November 2020, from https://material.io/design
SQLite: La Base de Datos Embebida. (2020). Retrieved 27 November 2020, from
https://sg.com.mx/revista/17/sqlite-la-base-datos-embebida
Java Software | Oracle. (2020). Retrieved 27 November 2020, from
https://www.oracle.com/java/
Releases, G., Features, G., Plugins, C., Kotlin, G., Gradle, M., Resources, M., & Enterprise, G. (2020). Gradle Build Tool. Retrieved 27 November 2020, from https://gradle.org/