Ferre-Matrial-Satelite La Aldea

Aplicación Móvil

1
Presentación

Integrantes De Equipo
Jordán Martin Meza Jiménez
Luis Alfonso Avalos Martínez
Edson Jair Ayala Corona
Iván López Ruiz
José Alfredo Vargas Flores

Materia
Optativa II

Maestra
Dra. Olga Leticia Robles García

Grado y Grupo
9.-E

Escuela
Universidad Tecnológica De Morelia

Fecha
20/Agosto/2019

2
Índice
INTRODUCCIÓN .............................................................................................................................................................5
PROBLEMA QUE RESUELVE LA APLICACIÓN ........................................................................................................6
DEFINICIÓN DE LA IDEA DE LA APLICACIÓN..........................................................................................................6
OBJETIVO DE LA APLICACIÓN ..................................................................................................................................6
PÚBLICO OBJETIVO .....................................................................................................................................................7
DEFINIR Y JUSTIFICAR EN CUAL DE SISTEMAS OPERATIVOS PARA MÓVILES SE PROGRAMARÁ ..........7
DEFINICIÓN FUNCIONAL DE LA APP REQUISITOS FUNCIONALES Y NO FUNCIONALES ..............................7
DIAGRAMA ENTIDAD RELACIÓN ...............................................................................................................................8
CREAR BOCETOS DE LA APLICACIÓN.....................................................................................................................9
........................................................................................................................................................................................ 10
WIREFRAME Y STORYBOARD .................................................................................................................................. 11
DISEÑO DE INTERFAZ ................................................................................................................................................ 12
........................................................................................................................................................................................ 12
IMPLEMENTACIÓN DE WEBSERVICE, EXPLICAR COMO Y PARA QUE SE IMPLEMENTARA EN LA
APLICACIÓN ................................................................................................................................................................. 16
CONEXIÓN A BASES DE DATOS, DETALLAR EL PROCESO DE IMPLEMENTACIÓN A CONEXIÓN DE
BASE DE DATOS ......................................................................................................................................................... 18

3
Ilustraciones:
ILUSTRACIÓN 1 ................................................................................................................................................................................ 8
ILUSTRACIÓN 2 ................................................................................................................................................................................ 9
ILUSTRACIÓN 3 .............................................................................................................................................................................. 10
ILUSTRACIÓN 4 .............................................................................................................................................................................. 11
ILUSTRACIÓN 5 .............................................................................................................................................................................. 12
ILUSTRACIÓN 6 .............................................................................................................................................................................. 12
ILUSTRACIÓN 7 .............................................................................................................................................................................. 12
ILUSTRACIÓN 8 .............................................................................................................................................................................. 12
ILUSTRACIÓN 9 .............................................................................................................................................................................. 13
ILUSTRACIÓN 10 ............................................................................................................................................................................ 13
ILUSTRACIÓN 11 ............................................................................................................................................................................ 13
ILUSTRACIÓN 12 ............................................................................................................................................................................ 13
ILUSTRACIÓN 13 ............................................................................................................................................................................ 14
ILUSTRACIÓN 14 ............................................................................................................................................................................ 14
ILUSTRACIÓN 15 ............................................................................................................................................................................ 14
ILUSTRACIÓN 16 ............................................................................................................................................................................ 14
ILUSTRACIÓN 17 ............................................................................................................................................................................ 15
ILUSTRACIÓN 18 ............................................................................................................................................................................ 15
ILUSTRACIÓN 19 ............................................................................................................................................................................ 15
ILUSTRACIÓN 20 ............................................................................................................................................................................ 17
ILUSTRACIÓN 21 ............................................................................................................................................................................ 18
ILUSTRACIÓN 22 ............................................................................................................................................................................ 19
ILUSTRACIÓN 23 ............................................................................................................................................................................ 20

4
Introducción
Este trabajo tiene como principal motivo la realización de una aplicación móvil para el desarrollo
comercial de una ferretería denominada como Ferre-Materiales-Satélite La aldea. El punto
principal de este trabajo es establecer una ayuda mediante herramientas tecnológicas, en este
caso basándonos en el desarrollo de una aplicación móvil, y así mismo generar un aprendizaje
correcto y satisfactorio para el desarrollo educativo y profesional de cada uno de los integrantes
de este equipo tanto como para los encargados de dicha empresa, logrando facilitar el
desempeño en el trabajo, de este modo el siguiente documento habla sobre las diferentes
estrategias y metodologías utilizadas para poder llegar a desarrollar y concluir con éxito la
aplicación deseada, Las principales estrategias utilizadas fueron los estudios de factibilidad que
nos permitieron darnos cuenta si el desarrollo sería viable o no, los motivos por los cuales si fue
viable y en que nos basamos para determinarlo. Así como también una representación del
funcionamiento de la aplicación representada en diferentes tipos de diagramas que explican su
función y su tipo de navegación que le corresponde, otra estrategia muy importante que nos
ayudó al desarrollo fue el hecho de elaborar una serie de entrevistas y cuestionarios que
aplicamos a todo personal involucrado en la ferretería, dependiendo el puesto llevado a cabo
en dicha ferretería se aplicaron distintas preguntas que nos ayudaron a complementar de una
manera muy importante los principales requerimientos de la aplicación para poder llegar a
cumplir con su desarrollo ideal. Esta aplicación permitirá a los trabajadores de dicha ferretería
llevar a cabo una mejor administración al igual que un mejor funcionamiento en su trabajo, ya
que esta aplicación cuenta con un ámbito agradable para su interacción entre máquina y cliente,
con esto esperamos que la aplicación desarrollada a continuación sea factible para la empresa.
A continuación, veremos a mas detalle sobre el análisis, diseño e implementación de la
aplicación móvil.

5
Problema que resuelve la aplicación

El problema principal de la ferretería se basa en no contar con una pagina web y una aplicación
móvil, que de cierta manera mejoren el control administrativo en cuanto a productos, clientes,
empleados, entregas y servicios, que contengan la información correcta y especifica de dicha
ferretería.
A continuación, se describirán los problemas que engloba dicha situación:
• No se cuenta con un sistema de vanguardia que lleve a cabo el control administrativo de
ingresos y egresos.
• No se cuenta con inventario digital de productos.
• No se cuenta con el control administrativo sobre la gestión de pedidos.
• No se cuenta con los perfiles digitales con tareas específicas para cada tipo de usuario
involucrado para facilitar el trabajo y la mejor administración.

Definición de la idea de la aplicación

Una aplicación móvil libre, en la cual se podrán visualizar los productos con los que cuenta la
ferretería (descripción, precio, existencia y características) sobre cada uno de ellos, además de
brindar La ubicación y el contacto del establecimiento permitiendo de este modo mayor facilidad
y efectiva la forma de tener comunicación con la ferretería.
Además, contara con el status de entrega sobre cada pedido, el cual indicara la situación
entregable en la que se encuentra (en proceso, en camino y pagado-entregado).

Objetivo de la aplicación

Diseñar, implementar y desarrollar una aplicación móvil de una ferretería, que pueda brindar
información de ciertos productos, compra, consulta, ver pedidos realizados, ubicación, contacto
y vista de la pagina web donde también el repartidor podrá ver los pedidos con el status de
progreso para ser enviado a domicilio, podrá registrar pedidos cuando valla en la calle y el
administrador tendrá acceso total a todas las opciones de la aplicación móvil.

6
Público objetivo

Uso preferente de personas mayores de 18 años de edad de zonas aledañas al establecimiento

de la ferretería, se pide la edad de 18 años ya que serán compras sobre pedido y la persona
que lo haga tendrá que ser mayor de edad para realizar el pago correspondiente al pedido.

Definir y justificar en cual de sistemas operativos

para móviles se programará
La aplicación será programada en Android estudio ya que es una plataforma completa, fácil de
manejar y fácil de instalar, además de que es uno de los sistemas operativos más usados por
el público en general ya que tienen una manera más fácil de entenderlo y poderlo manejar por
quien lo necesite.

Definición funcional de la app requisitos funcionales

y no funcionales
La aplicación móvil tendrá en funcionamiento el inicio de sesión, así como una forma de realizar
pedidos, también contara con una galería de todos los productos con los que cuenta la ferretería
además de que podrán encontrar de una manera más fácil algún producto con un buscador de
los mismos.
La aplicación no contara con el pago con tarjeta ni ninguna otra forma de pago solo se manejará
pago en efectivo al momento de la entrega, además de que por el momento no se contara con
el control total de la base de datos por el dueño de la ferretería.

7
 Diagrama entidad relación

Ilustración 1

8
 Crear bocetos de la aplicación

Ilustración 2

10
Ilustración 3

10
 Wireframe y storyboard

Ilustración 4

11
 Diseño de interfaz

En la primera vista que sale de la aplicación En la segunda vista aparecerá el logo de la

móvil aparecerá una animación que dura empresa y un escrito dando la bienvenida
aproximadamente 5 segundos. al usuario.

Ilustración 5

Ilustración 6

En la cuarta vista de la móvil aparecerá el

En la tercera aparecerá una segunda login donde el usuario podrá iniciar sesión
animación sobre ferretería para darle una de acuerdo a su perfil, todos los datos son
mejor vista. sacados de la base de datos.

Ilustración 7 Ilustración 8

12
 En esta vista aparece la página web
de la ferretería, esto fue porque en la
vista de login está un botón de google
donde al darle clic te redirección a la
página web de la ferretería
Ilustración 9
En esta vista aparecerá un botón que
servirá para llamar a la empresa en
dado caso que el cliente lo requiera
para ayuda o alguna duda en
específico.
Ilustración 12
En esta vista aparece lo que es la página
oficial de la ferretería, ya que en la vista
de login también aparece un botón de
Facebook que directamente te manda a
la página oficial.
Ilustración 10
En la vista del menú del cliente
aparecen tres cosas que él puede
hacer, ya sea buscar algún producto,
checar las categorías con las que
contamos y revisar el estatus de su
pedido.
Ilustración 11
13
 En la vista del empleado aparecen dos
categorías que él puede hacer, revisar cuales
son los pedidos que se agregaron y también
checar cuales son las entregas que se tienen
que realizar.
Ilustración 14
Ilustración 13
En la vista de estatus del cliente lo que
él puede ver es características de su
pedido ya sea cuando le llega si ya viene
en camino la hora, son algunas de las
cosas que el cliente puede ver en la
vista de estatus.
Ilustración 16
14
En la vista de estatus del empleado,
también puede ver las características al
igual que el cliente la única diferencia
entre uno y otro es que el empleado
puede cambiar el estatus ya sea en
proceso, en camino o entregado según
sea el caso.
Dentro del usuario cliente en
el apartado buscar, podrá
poner el cliente el artículo
que necesita de esa manera le
aparecerá el producto con
una pequeña foto del mismo,
el precio por unidad o metro
en dado caso y la existencia, si
es que la ferretería cuentea
con ese producto.
Ilustración 15
 En la vista de apartado dentro del Una vez que el cliente lleno con sus
usuario cliente le aparecerán una lista datos y le dio comprar al producto se
con cada una de las categorías que generara lo que es un correo que le
existen en la empresa, que al darle clic llegara al administrador, para que de
le aparecerán los productos existentes esa manera este enterado de que se
en dicha categoría seleccionada. registró un nuevo pedido y entregarlo
en tiempo y forma.
Ilustración 19
Ilustración 18

Siguiendo con el cliente, cuando

le de comprar al producto que
ya previamente selecciono le
aparecerá la vista del formulario
que debe llenar sin excepciones
con sus datos para generar la
entrega de su producto.

Ilustración 17

15
Implementación de webservice, explicar como y
para que se implementara en la aplicación

Para alojar nuestra App en un servidor web debemos de tener en consideración dos cosas:
Nuestra App no puede pesar más de 500Mb.
El contenido de nuestra App no se podrá actualizar sin generar una nueva versión, por lo tanto,
no podremos actualizar el contenido muy a menudo.
Lo primero que debemos hacer, es crear la App de forma habitual, con el formato de contenido
de ferretería. Una vez que lo tengamos, debemos añadir a 480interactive.

A la hora de activar la opción de pago Publicar mi App, simplemente deja sin activar la opción
de Alojamiento en 480interactive.

Tras haber activado la opción de pago Publicar mi App, podrás solicitar tu. IPA y .APK. Al
hacerlo, se abrirá un asistente. Desmarca la opción utilizar hosting para almacenar contenido y
completa los pasos.
A la hora de crear nuestra app, existen numerosos factores a tener en cuenta. Más allá del
propio contenido, hemos de tener en cuenta otros elementos como el tipo de licencia de
desarrollador a contratar, el tipo de distribución que tendrá nuestra app (pública) para que todo
usuario pueda ingresar y observar los productos con los que contamos, así como la opción de
compra para aquellos usuarios registrados.

Cuando creamos una app con 480interactive, generamos una carpeta comúnmente
denominada Export en la cual se incluye todo el contenido. Esta carpeta es la que se sube al
servidor, dicha app se subirá desde nuestro propio hosting.

Pasos:
En esta opción tendremos que subir todos los contenidos de la carpeta Export de tu App a este
hosting. La carpeta Export puede encontrarla si pulsás en “Herramientas” -> “Abrir carpeta del
proyecto” desde 480interactive.

Al subir esta carpeta a tu hosting debes asegurarte de que tanto la carpeta como los archivos
que contiene tienen permisos de lectura. Si no los tiene, la App no podrá leer la información
necesaria y no funcionará

Cuando hayas subido esta carpeta, tendrás que obtener la URL. Esta URL debe apuntar a un
archivo concreto que se encuentra dentro de la carpeta Export.

El archivo empezará por el ID de tu App, seguido de la palabra -library y será un archivo XML.

16
Por ejemplo, en una App cuyo ID sea “480i”, la URL sería parecida a esta:
https://www.480interactive.com/Export/480i-library.xml

Una vez que tengamos esta URL, guárdela para ponerla en el wizard de publicación de la App
que aparece cuando vas a generar tu App.

Ilustración 20

Con esta implementación buscamos que la conexión entre los dispositivos soporte la
comunicación de todos los posibles móviles a nuestra base de datos, así mismo puedan realizar
las prácticas correspondientes respetando los usuarios que se encuentren dados de alta en
nuestra aplicación.

17
Conexión a bases de datos, detallar el proceso de
implementación a conexión de base de datos

El siguiente codigo se encuentra en la aplicación movil, en la seccion de LOGIN, Dentro de la

accion del boton “LOGIN”el cual se encarga de generar la acción de consulta a la base de datos,
encargada de diferenciar los perfiles ya sea de cliente o de empleado, y asi mismo redireccionar
a su respectiva seccion.

Accion del boton que nos manda a la consulta PHP dentro de la aplicación movil.

Ilustración 21

Consulta PHP dentro de la aplicación movil encargada de evaluar los usuarios y contraseñas
existentes y asi mismo mandar el redireccionamiento a su seccion correspondiente.

18
Ilustración 22

19
Consulta en PHP que recupera la contraseña, el perfil y el usuario existente dentro de la base
de datos.

Ilustración 23

Consulta dentro de PHP que evalua la correcta conexión y que sea la correcta base de datos
de la cual se estan extrayendo los dato

20