de linares - ujaen.estauja.ujaen.es/bitstream/10953.1/3683/1/tfg_martinez_garcia_aleja… · 3.2.5...
TRANSCRIPT
Escuela
Polit
écnic
a S
uperior
de L
inare
s
UNIVERSIDAD DE JAÉN Escuela Politécnica Superior de Linares
Trabajo Fin de Grado
______ SISTEMA WEB PARA LA
CONTRATACIÓN DE UN
ENTRENADOR PERSONAL Y
SISTEMA WEB-MÓVIL PARA
EL SEGUIMIENTO DE LOS
PROGRESOS DE LOS
CLIENTES
Alumno: Alejandro Martínez García
Tutor: Prof. D. Ángel Aguilera García
Depto.: Informática
Septiembre, 2016
Universidad de Jaén Escuela Politécnica Superior de Linares
Trabajo Fin de Grado
Alumno: Alejandro Martínez García
Tutor: Profesor D. Ángel Inocencio Aguilera García
Departamento: Informática
Linares, Septiembre de 2016
Firma alumno: Firma tutor:
SISTEMA WEB PARA LA
CONTRATACIÓN DE UN ENTRENADOR
PERSONAL Y SISTEMA WEB-MÓVIL
PARA EL SEGUIMIENTO DE LOS
PROGRESOS DE LOS CLIENTES
3
AGRADECIMIENTOS
En primer lugar me gustaría dedicar unas palabras de agradecimiento a toda la
gente que ha hecho posible que esté a un paso de terminar el Grado.
Gracias a todos mis compañeros de promoción, sólo nosotros sabemos lo duro
que ha sido llegar hasta aquí y cómo nos hemos ayudado mutuamente como una gran
familia a lo largo de estos años.
Gracias a mi novia, Eloisa por su apoyo incondicional durante la realización de
este trabajo, aportando ideas y siempre dispuesta a probar las aplicaciones para dar
opiniones objetivas y constructivas.
Gracias a mi familia, por estar siempre ahí apoyándome desde el principio,
motivándome día a día a lo largo de todos mis estudios.
Gracias a mi tutor, Ángel, por la completa libertad que me ha dado en la
realización de este proyecto y por darme esta opción de desarrollar algo que me puede
servir en mi vida profesional.
Por último, me gustaría agradecer a todas esas personas que comentan y ayudan
a los demás en comunidades y foros de forma desinteresada.
4
RESUMEN
El siguiente proyecto nace como un trabajo experimental que pretende cubrir una
necesidad propia del alumno en su trabajo como entrenador personal, para la prestación
de un servicio de asesoramiento online. Esto se llevará a cabo gracias a una aplicación
web con una plantilla adaptativa que se desarrolla en el propio equipo local del alumno y
que más tarde se subirá a un servidor de hosting con un dominio para su utilización en
Internet. Esta aplicación tiene como cometido principal implementar el servicio de pago y
el acceso por parte del cliente a su plan de entrenamiento y nutricional. Adicionalmente,
los clientes de este servicio tendrán acceso a la descarga de una aplicación móvil
desarrollada para el sistema operativo Android, que les permitirá registrar sus datos
corporales para seguir su progreso y que permiten al alumno como administrador llevar
un control de sus clientes y de su evolución.
ABSTRACT
The following project borns as an experimental work that aims to cover the student
needs in his work as a personal trainer, to provide online counseling service. This will be
done through a web application with an adaptive template that develops in the student's
own local server and later will be uploaded to a hosting server with a domain in order to
use it on the Internet. This application is mainly responsible for implementing the payment
service and access by the client to his workout and nutrition plan. In addition, customers
of this service will have access to download an application for mobile devices with Android
operating system, allowing them to keep track of their bodily data to monitor progress and
allowing the student as an administrator to keep track of customers and their evolution.
5
6
ÍNDICE DE CONTENIDOS
ÍNDICE DE FIGURAS…………………………………………………………………….9
ÍNDICE DE TABLAS.……………………………………………………………………11
ÍNDICE DE SIGLAS Y ACRÓNIMOS….……………………………………………...12
1 INTRODUCCIÓN ...........................................................................................13
1.1 Actualidad ...............................................................................................13
1.1.1 El éxito de los smartphones ...............................................................13
1.1.2 Plataformas más populares en smartphones .....................................15
1.1.3 Comercio electrónico en España........................................................15
1.2 Motivación ...............................................................................................16
1.3 Idea general del proyecto ........................................................................16
1.4 Arquitectura del sistema ..........................................................................17
2 OBJETIVOS ...................................................................................................19
2.1 Objetivos de proyecto .............................................................................19
2.2 Objetivos docentes ..................................................................................19
3 MATERIALES Y MÉTODOS ..........................................................................21
3.1 Antecedentes ..........................................................................................21
3.1.1 De la Web 1.0 a la Web 3.0 ...............................................................21
3.1.2 Sistemas operativos móviles ..............................................................25
3.2 Estado del arte tecnológico (Página web) ...............................................27
3.2.1 Análisis previo de las posibilidades contempladas y elección final .....27
3.2.2 Gestores de contenidos .....................................................................28
3.2.3 Comparación de los principales CMS ................................................30
3.2.4 Gestor de contenidos elegido y justificación .......................................33
3.2.5 Requisitos de Joomla .........................................................................33
3.2.6 Alternativas y elección del SGBD .......................................................34
3.2.7 Herramienta XAMPP ..........................................................................36
3.2.8 Instalación de Joomla ........................................................................37
3.2.9 Extensiones Joomla utilizadas para el desarrollo web ........................38
7
3.2.10 Página web y base de datos en un servidor remoto .........................44
3.3 Estado del arte tecnológico (Aplicación móvil) ........................................45
3.3.1 Android como plataforma ...................................................................45
3.3.2 IDE Android Studio ............................................................................54
3.3.3 Requerimientos e instalación de IDE Android Studio .........................55
3.3.4 Librerías externas utilizadas en el desarrollo de la app ......................56
3.4 Estado del arte legislativo .......................................................................57
3.5 Análisis del sistema .................................................................................57
3.5.1 Definición del sistema ........................................................................57
3.5.2 Definición de requisitos funcionales ...................................................60
3.5.3 Definición de requisitos no funcionales ..............................................62
3.6 Diseño del sistema ..................................................................................65
3.6.1 Descripción de la arquitectura del sistema .........................................65
3.6.2 Diseño de la lógica de negocio ..........................................................67
3.6.3 Diseño de la lógica de datos ..............................................................76
3.6.4 Diseño de las interfaces. ....................................................................90
3.6.5 Programación de la aplicación móvil FitnessDeSemana. ...................90
4 RESULTADOS Y DISCUSIÓN ..................................................................... 115
4.1 Navegación por la web desde distintos navegadores ............................ 115
4.2 Pruebas de acceso a la web desde dispositivo móvil ............................ 116
4.3 Batería de pruebas en la página web .................................................... 118
4.4 Pruebas de diseño de la app con dos dispositivos diferentes ................ 121
4.5 Batería de pruebas de funcionalidad para la aplicación móvil ............... 124
4.6 Encuesta a usuarios .............................................................................. 128
5 CONCLUSIONES ........................................................................................ 131
5.1 Conclusiones generales ........................................................................ 131
5.2 Líneas de futuro .................................................................................... 132
6 ANEXO I: MANUAL DE USO DE LA PÁGINA WEB ..................................... 134
6.1 Perspectiva Visitante ............................................................................. 134
8
6.2 Perspectiva Usuario Registrado ............................................................ 138
6.2.1 Perfil de usuario ............................................................................... 138
6.2.2 Compra del asesoramiento .............................................................. 139
6.3 Perspectiva Asesorado ......................................................................... 142
7 ANEXO II: MANUAL DE INSTALACIÓN DE LA APP ................................... 147
8 ANEXO III: MANUAL DE USUARIO DE LA APP .......................................... 152
8.1 Perspectiva del cliente asesorado ......................................................... 152
8.1.1 Pantalla inicial (login) ....................................................................... 152
8.1.2 Panel de usuario .............................................................................. 153
8.1.3 Pantalla nuevo registro de evolución ................................................ 154
8.1.4 Pantalla de evolución gráfica del cliente........................................... 155
8.1.5 Pantalla de borrado de registros ...................................................... 156
8.2 Perspectiva del entrenador/administrador ............................................. 157
8.2.1 Pantalla inicial .................................................................................. 157
8.2.2 Panel de administración ................................................................... 158
8.2.3 Pantalla Datos de usuario ................................................................ 159
9 ANEXO IV: ESTUDIO ECONÓMICO Y PLANIFICACIÓN ............................ 160
9.1 Estudio económico ................................................................................ 160
9.2 Planificación temporal ........................................................................... 162
10 REFERENCIAS BIBLIOGRÁFICAS .......................................................... 164
9
ÍNDICE DE FIGURAS:
Figura 1.1 Cuota de mercado de sistemas operativos en España [1] ..............................15
Figura 1.2 Arquitectura del sistema final [4] [5] [6] [7] [8] ................................................18
Figura 3.1 Web 1.0 [11] ...................................................................................................22
Figura 3.2 Web 2.0 [12] ...................................................................................................23
Figura 3.3 Web 3.0 [15] ...................................................................................................25
Figura 3.4 Uso de los CMS en páginas web [24] .............................................................30
Figura 3.5 Requerimientos de Joomla 3.x [26] ................................................................34
Figura 3.6 Instalación de XAMPP ....................................................................................37
Figura 3.7 Asistente de instalación de Joomla ................................................................38
Figura 3.8 Ejemplo de comentario usando JComments ..................................................39
Figura 3.9 Productos a la venta en la página web ...........................................................40
Figura 3.10 Ejemplo del perfil de un usuario asesorado ..................................................41
Figura 3.11 Slider creado con DJ-ImageSlider ................................................................42
Figura 3.12 Módulo CoalaWeb LikeBox ..........................................................................43
Figura 3.13 Módulo CoalaWeb Social Links ....................................................................43
Figura 3.14 Ejemplo de PDF subido usando JU Download .............................................44
Figura 3.15 Versiones de Android [38] ............................................................................48
Figura 3.16 Arquitectura de Android [40] .........................................................................49
Figura 3.17 Directorio src ................................................................................................52
Figura 3.18 Directorio res [43] .........................................................................................53
Figura 3.19 Directorio gen [43] ........................................................................................54
Figura 3.20 Directorio libs ...............................................................................................54
Figura 3.21 Gráficas con AndroidPlot y MPAndroidChart ................................................57
Figura 3.22 Arquitectura del sistema final [4] [5] [6] [7] [8] ..............................................66
Figura 3.23 Diagrama de casos de uso de la web ...........................................................72
Figura 3.24 Diagrama de casos de uso aplicación móvil .................................................76
Figura 3.25 Diagrama E/R de la base de datos ...............................................................90
Figura 4.1 Vista de la web usando Chrome y Firefox .................................................... 115
Figura 4.2 Vista de la web usando Opera ..................................................................... 116
Figura 4.3 Home de la página web desde dispositivo móvil .......................................... 117
Figura 4.4 Contratación de asesoramiento .................................................................... 117
Figura 4.5 Método de pago del asesoramiento ............................................................. 118
Figura 4.6 Pago con Paypal .......................................................................................... 118
Figura 4.7 Ejemplo de login no válido ........................................................................... 119
Figura 4.8 Ejemplo de login válido ................................................................................ 119
10
Figura 4.9 Acceso a contenido para asesorados con cuenta de asesorado .................. 120
Figura 4.10 Acceso a contenido asesorado sin inicio de sesión previo ......................... 120
Figura 4.11 Usuario sin autorización ............................................................................. 121
Figura 4.12 Actividad inicial en distintas pantallas ......................................................... 122
Figura 4.13 Lista desplegable en Samsung Galaxy Core .............................................. 123
Figura 4.14 Lista desplegable en Samsung Galaxy s2 mini .......................................... 123
Figura 4.15 Error de red ................................................................................................ 124
Figura 4.16 Errores de inicio de sesión ......................................................................... 125
Figura 4.17 Alerta de autenticación correcta ................................................................. 125
Figura 4.18 Alerta de aviso de rellenar datos y de registro añadido .............................. 126
Figura 4.19 Alerta de registros no encontrados ............................................................. 126
Figura 4.20 Alerta de registro borrado con éxito ............................................................ 127
Figura 4.21 Aviso de borrado y alerta de registros eliminados con éxito ....................... 127
Figura 6.1 Página de inicio de la web ............................................................................ 134
Figura 6.2 Categorías de artículos ................................................................................ 135
Figura 6.3 Preguntas Frecuentes .................................................................................. 135
Figura 6.4 Formulario de contacto ................................................................................. 136
Figura 6.5 Pestaña Asesoramiento ............................................................................... 137
Figura 6.6 Opción “Registrarse”. ................................................................................... 137
Figura 6.7 Iniciar sesión ................................................................................................ 138
Figura 6.8 Mi perfil ........................................................................................................ 139
Figura 6.9 Productos disponibles .................................................................................. 140
Figura 6.10 Edición de la compra .................................................................................. 140
Figura 6.11 Método de pago ......................................................................................... 141
Figura 6.12 Pago a través de Paypal ............................................................................ 141
Figura 6.13 Pago con tarjeta de crédito en Paypal ........................................................ 142
Figura 6.14 Perfil de Usuario Asesorado ....................................................................... 143
Figura 6.15 Edición de los Datos Asesorados ............................................................... 144
Figura 6.16 Descarga de un plan .................................................................................. 144
Figura 6.17 Técnica de los ejercicios ............................................................................ 145
Figura 6.18 Ejemplo de técnica de un ejercicio ............................................................. 145
Figura 7.1 Menú de los asesorados .............................................................................. 147
Figura 7.2 Contenido de la pestaña APP FitnessDeSemana ........................................ 147
Figura 7.3 Descarga del archivo de MEGA ................................................................... 148
Figura 7.4 Aceptar fuentes desconocidas ..................................................................... 148
Figura 7.5 Copiar archivo desde el PC .......................................................................... 149
Figura 7.6 Conectar como dispositivo multimedia ......................................................... 149
11
Figura 7.7 Pegar archivo .apk en nuestro smartphone .................................................. 150
Figura 7.8 Instalación de la app en el smartphone ........................................................ 150
Figura 7.9 Aplicación instalada con éxito ...................................................................... 151
Figura 8.1 Pantalla inicial .............................................................................................. 152
Figura 8.2 Panel de usuario .......................................................................................... 153
Figura 8.3 Eliminar todos los registros guardados ......................................................... 154
Figura 8.4 Añadir nuevo registro de evolución .............................................................. 155
Figura 8.5 Ejemplo de gráfico de barras de evolución ................................................... 156
Figura 8.6 Pantalla de borrado de registros .................................................................. 157
Figura 8.7 Panel de administración ............................................................................... 158
Figura 8.8 Pantalla Datos de usuario ............................................................................ 159
Figura 9.1 Diagrama de Gantt ...................................................................................... 163
ÍNDICE DE TABLAS:
Tabla 3.1 Estructura tabla Users en BD...........................................................................78
Tabla 3.2 Estructura tabla Usergroups en BD .................................................................78
Tabla 3.3 Estructura tabla User_usergroup_map en BD ..................................................79
Tabla 3.4 Estructura tabla Viewlevels en BD ...................................................................79
Tabla 3.5 Estructura tabla Categories en BD ...................................................................80
Tabla 3.6 Estructura tabla Content en BD .......................................................................81
Tabla 3.7 Estructura tabla Comprofiler en BD..................................................................82
Tabla 3.8 Estructura tabla Hikashop_user en BD ............................................................83
Tabla 3.9 Estructura tabla Hikashop_currency en BD ......................................................83
Tabla 3.10 Estructura tabla Hikashop_category en BD ....................................................84
Tabla 3.11 Estructura tabla Hikashop_product en BD .....................................................84
Tabla 3.12 Estructura tabla Hikashop_product_category en BD ......................................85
Tabla 3.13 Estructura tabla Hikashop_price en BD .........................................................85
Tabla 3.14 Estructura tabla Hikashop_payment en BD ....................................................86
Tabla 3.15 Estructura tabla Hikashop_order en BD .........................................................87
Tabla 3.16 Estructura tabla Hikashop_order_product en BD ...........................................87
Tabla 3.17 Estructura tabla Hikashop_history en BD .......................................................88
Tabla 3.18 Estructura tabla Ju_download_documents en BD ..........................................88
Tabla 3.19 Estructura tabla Evolucion en BD ..................................................................89
Tabla 3.20 Tabla de relación actividad-layout ..................................................................91
Tabla 9.1 Costes de personal ........................................................................................ 160
12
Tabla 9.2 Costes materiales .......................................................................................... 161
Tabla 9.3 Coste total ..................................................................................................... 161
Tabla 9.4 Tareas del diagrama de Gantt ....................................................................... 162
ÍNDICE DE SIGLAS Y ACRÓNIMOS:
ACL: Access Control List (Lista de Control de Acceso)
ANSI: American National Standards Institute (Instituto Nacional Americano de
Estándares)
API: Application Programming Interface (Interfaz de programación de aplicaciones)
APK: Android Application Package (Aplicación empaquetada de Android)
APP: Application (Aplicación)
ART: Android RunTime
CIDR: Classless Inter-Domain Routing (Enrutamiento Entre Dominios Sin Clases)
CMS: Content Management System (Sistema de Gestión de Contenidos)
CSS: Cascading Style Sheets (Hoja de Estilo en Cascada)
DDL: Data Definition Language (Lenguaje de Definición de Datos)
DML: Data Manipulation Language (Lenguaje de Manipulación de Datos)
GIF: Graphics Interchange Format (Formato de Intercambio de Gráficos)
GPS: Global Positioning System (Sistema de Posicionamiento Global)
HTML: Hypertext Transfer Protocol (Protocolo de Transferencia de Hipertexto)
IDE: Integrated Development Environment (Entorno de Desarrollo Integrado)
IP: Internet Protocol (Protocolo de Internet)
JDBC: Java Database Connectivity (Conectividad de Bases de Datos Java)
JDK: Java Development Kit (Kit de Desarrollo Java)
MAC: Media Access Control (Control de Acceso al Medio)
PDA: Personal Digital Assistant (Asistente Digital Personal)
PDF: Portable Document Format (Formato de Documento Portátil)
PHP: Pre Hypertext-Processor (PreProcesador de Hipertexto)
RIM: Research In Motion (Investigación En Marcha)
SDK: Software Development Kit (Kit de Desarrollo de Software)
SGBD: Sistema de Gestión de Bases de Datos
URL: Uniform Resource Locator (Localizador de Recursos Uniforme)
WIFI: Wireless Fidelity (Fidelidad Inalámbrica)
XML: eXtensible Markup Language (Lenguaje de Marcas Extensible)
13
1 INTRODUCCIÓN
La presente memoria contemplará todos los aspectos del proyecto de fin de grado
necesarios para poder completar la enseñanza del grado en Ingeniería Telemática. El
proyecto que se describe tiene como fin que un visitante de la web compre el servicio de
asesoramiento online y con ello, acceda al menú de los usuarios asesorados. En su perfil,
el usuario tendrá que rellenar sus datos corporales y su objetivo físico entre otros, para
que el entrenador pueda elaborar sus planes y subirlos a la plataforma web. El usuario,
dentro del menú de los asesorados, tiene acceso a la descarga de la aplicación para
móviles con la que podrá iniciar sesión con el mismo usuario de la aplicación web para
añadir sus registros periódicamente y evaluar su progreso en cuanto a su evolución
física.
1.1 Actualidad
En este apartado vamos a detallar la situación en la que se encuentran actualmente
las tecnologías y plataformas que vamos a utilizar en el proyecto.
1.1.1 El éxito de los smartphones
En España, las ventas de teléfonos inteligentes han supuesto el 87,9% de todos
los teléfonos móviles vendidos en los 3 meses que finalizaron en mayo de 2016. [1]
Después de sólo una década, la tecnología smartphone es tan exitosa que las
empresas y sus empleados tienen problemas para imaginar un día sin ellos. Además de
hacer llamadas telefónicas, casi todos los teléfonos inteligentes de hoy pueden ofrecer
direcciones a través del GPS, sacar fotos, reproducir música y realizar un seguimiento de
las citas y contactos. A través de la instalación de aplicaciones, la lista de usos posibles
del smartphone se multiplica por decenas de miles de personas y crece más cada día.
Los smarphones nos proporcionan una serie de ventajas que se pueden resumir
en las siguientes:
14
- Opciones de comunicación: Con los viejos teléfonos móviles puedes llamar y enviar
mensajes. Si bien esto puede transmitir tu mensaje, los teléfonos inteligentes
permiten múltiples formas de comunicación. No sólo puedes llamar, enviar mensajes
y mensajería instantánea, te permiten el acceso a correo electrónico, videollamadas y
videoconferencias. También puedes mantenerte conectado a través de sitios de redes
sociales como Twitter, Facebook y LinkedIn.
- Internet en todos lados: En un primer momento, la navegación web tiende a ocurrir en
un escritorio en una oficina, donde un cable podría llegar a una PC. El acceso
inalámbrico y las computadoras portátiles navegaban por la web en casi cualquier
lugar de la casa u oficina, pero la tecnología de teléfonos inteligentes, incluyendo
banda ancha inalámbrica, han enviado la web al metro, en los autos y el parque,
dondequiera que haya cobertura celular. Lo que es más, los últimos teléfonos
inteligentes pueden mostrar casi tanto de Internet como los PC, incluyendo juegos y
streaming de videos de alta definición.
- Fusión de dispositivos: Una vez, puede que hayas necesitado una bolsa entera para
llevar todos los dispositivos necesarios para las actividades diarias del negocio.
Tendría tu teléfono celular y PDA. También podría ser necesario un reproductor de
MP3, un lector de libros electrónicos, una cámara y un dispositivo GPS. A través de
hardware miniaturizado que lleva un procesador, altavoces, una cámara, un receptor
GPS, un adaptador wi-fi y una pantalla táctil de alta definición en un dispositivo del
tamaño de un teléfono celular, un teléfono inteligente pone toda esta funcionalidad en
tu bolsillo.
- Infinitas aplicaciones: Al final del siglo XX se produjo una explosión de aplicaciones
informáticas. El temprano siglo XXI trae cientos de miles de aplicaciones. Los
sensores integrados en el teléfono inteligente, así como su portabilidad y capacidad
de programación lo han convertido en un dispositivo con aplicaciones casi ilimitadas.
Más allá de las toneladas de juegos y aplicaciones de productividad disponibles,
aplicaciones de salud y fitness, hacen un seguimiento de los kilómetros corridos, las
calorías que has consumido y hasta tu ritmo cardíaco actual. Aplicaciones de radio
por Internet y podcasts te ponen en contacto con nuevos mundos de audio.
Aplicaciones de alcance, de nivelación y linternas proporcionan utilidades de mano.
También hay aplicaciones que te permiten pintar, modificar fotos o crear música
según tu creatividad. [2]
15
1.1.2 Plataformas más populares en smartphones
En el periodo comprendido entre marzo y mayo de 2016, Android, que continúa
con su fuerte posición dominante, ha conseguido el 92,8% de las ventas de
smartphones, seguido de iOS con el 6,9% dejando a Windows sin apenas presencia en
España. Esto se puede observar en la Figura 1.1. [1]
Figura 1.1 Cuota de mercado de sistemas operativos en España [1]
1.1.3 Comercio electrónico en España
Navegar por Internet y no caer en la tentación del ecommerce es prácticamente
imposible. De hecho, un 74% de los internautas, un total de 15,9 millones de personas de
entre 16 y 60 años, no han logrado resistirse y se han convertido en compradores online,
según señala el último Estudio Anual de eCommerce de IAB Spain, realizado en
colaboración con la agencia de marketing Elogia.
Los españoles compran de media 2,4 veces al mes (frente a las 2,8 del año
pasado) y en cada ocasión gastan 75 euros (5 euros más respecto a lo registrado en el
informe de 2015). Eso sí, lo más frecuente fue comprar una vez al mes y destinar entre
16
25 y 50 euros a esa transacción. Las categorías de productos y servicios preferidos por
los españoles son, en este orden, viajes o estancias (un 72% opta por reservarlos a
través de Internet), ocio (69%), tecnología (61%), moda (53%) y alimentación (49%).
En cuanto a los dispositivos preferidos, el PC sigue siendo el rey, la medalla de
plata corresponde a los smartphones y el tercer puesto a los tablets.
En cuanto al método de pago empleado para sufragar estos 'caprichos'
cibernéticos, las tarjetas de crédito o débito siguen siendo la opción predilecta (empleada
por el 85% de los clientes) seguida de PayPal (79%). Muy alejados están las
transferencias bancarias (utilizadas sólo por 4 de cada 10) y el contra reembolso (3 de
cada 10). [3]
1.2 Motivación
La principal motivación por parte del alumno que desarrolla este proyecto consiste
en la adquisición de conocimientos en el desarrollo de aplicaciones web utilizando
herramientas actuales de desarrollo web como pueden ser los sistemas gestores de
contenidos y la programación para plataformas Android, ya que como pudimos ver en el
apartado anterior, es el sistema operativo para móviles más extendido actualmente.
El desarrollo de esta aplicación está pensado de cara a que el alumno lo use en su
trabajo como entrenador personal en un futuro. Es por ello que tendremos que entender
cómo funciona la lógica del negocio a lo largo de la memoria.
1.3 Idea general del proyecto
La idea general del proyecto se puede resumir en lo siguiente: En la página web
desarrollada, un visitante de la web puede acceder a noticias, artículos y demás
información sobre el mundo del fitness y la nutrición deportiva. Este visitante podrá
registrarse en la página web para participar comentando las noticias y los artículos.
Una persona puede comprar el servicio de asesoramiento que ofrece el entrenador
personal de forma online, exigiéndose para esto un registro previo. Cuando una persona
17
adquiere el asesoramiento online y lo paga electrónicamente (en este proyecto se utiliza
pago por Paypal, donde se podrá elegir pagar con una cuenta paypal o con una tarjeta de
crédito), pasa automáticamente al grupo de los asesorados y puede acceder a contenidos
exclusivos para los asesorados como puede ser la aplicación android desarrollada a
posteriori por el alumno, que permite que el cliente pueda llevar un registro de sus
avances físicos y que también permite al administrador seguir el progreso del cliente
asesorado.
Los clientes también tienen acceso a su plan nutricional y al plan de entrenamiento
propuesto por el entrenador (previamente el cliente tiene que rellenar sus datos para que
el entrenador sea capaz a partir de ellos de elaborar dichos planes de forma
personalizada) y a unos artículos específicos donde poder ver la ejecución de los
ejercicios.
Hay que destacar que el servidor no tiene sentido dentro del propio equipo local,
puesto que debe ser accesible a través de internet, ya que lo óptimo es captar clientes
que visiten la página web. Por tanto, está pensada como una página web con un dominio
en un servidor de hosting.
1.4 Arquitectura del sistema
La arquitectura del sistema es sencilla. Tendremos un servidor remoto con el
dominio fitnessdesemana.es en el que se aloja la página web, que tendrá su base de
datos MySQL. Esta base de datos será compartida también por la aplicación móvil
FitnessDeSemana, que estará instalada en el smartphone del cliente.
La página web está adaptada para móviles ya que se ha usado una plantilla
responsive o adaptativa. El acceso a la página web se puede dar indistintamente
mediante un móvil o un ordenador con acceso a internet a través de un navegador web.
La arquitectura se puede observar en la Figura 1.2:
18
Figura 1.2 Arquitectura del sistema final [4] [5] [6] [7] [8]
19
2 OBJETIVOS
Los objetivos que se pretenden alcanzar en este trabajo se pueden dividir en
objetivos de proyecto y objetivos docentes.
2.1 Objetivos de proyecto
Los objetivos del proyecto son los siguientes:
- Realización de una página web sobre el mundo del ejercicio físico que incluya lo
siguiente: artículos y noticias que pueden ser comentadas, posibilidad de contratación
de un servicio de asesoramiento online con su correspondiente pago y proporcionar al
usuario las herramientas para este servicio de asesoramiento dentro de la web. Todo
ello haciendo uso de un sistema de gestión de base de datos relacional, un servidor
apache y utilizando para ello un gestor de contenidos con unas extensiones
específicas que permitan integrar en la web las funciones mencionadas.
- Desarrollo de una aplicación para dispositivos móviles con sistema operativo Android
que permita a los clientes asesorados llevar un registro y un seguimiento de su
progreso durante el asesoramiento y que permita al administrador realizar tareas
básicas de gestión de asesorados y seguimiento de la evolución de los mismos de
forma gráfica y sencilla.
- Disponer de un servidor de hosting remoto con un nombre de dominio donde
finalmente se subirá la página web y donde se alojará la base de datos que
comparten la página web y la aplicación móvil y que guardará la información acerca
de clientes, usuarios registrados, asesoramientos adquiridos y evolución de clientes
en el tiempo, entre otros.
2.2 Objetivos docentes
Los objetivos docentes son los siguientes:
20
- Superar la asignatura Trabajo Fin de Grado, que se compone de 12 créditos ECTS,
divididos en 300 horas de trabajo, de las cuales 225 horas son de trabajo autónomo
por parte del alumno y las 75 horas restantes son presenciales.
- Adquirir conocimientos sobre el desarrollo de páginas web utilizando sistemas de
gestión de contenidos y la habilidad para cubrir necesidades específicas sabiendo
utilizar las extensiones correctas en cada caso.
- La aplicación práctica de los contenidos vistos en la titulación y el aprendizaje de
nuevos contenidos no incluidos en la misma pero complementarios a su formación.
- Adentrarse en el desarrollo de aplicaciones móviles para el sistema operativo Android
de forma práctica.
- Adquirir conocimientos sobre la elaboración de proyectos que cumplan con las
especificaciones establecidas en un proyecto de ingeniería del software.
21
3 MATERIALES Y MÉTODOS
En este apartado vamos a entrar en la metodología seguida para la realización del
proyecto. Primero veremos los antecedentes y después nos centraremos en las
herramientas que hemos utilizado tanto en la página web como en la aplicación para
dispositivos móviles. Por último, se realizará un análisis del sistema desarrollado,
atendiendo a la viabilidad y a los requisitos impuestos así como una descripción de la
arquitectura del mismo, de la lógica de negocio y de los casos de uso de ambas
aplicaciones.
3.1 Antecedentes
3.1.1 De la Web 1.0 a la Web 3.0
La web ha tenido un impacto a nivel mundial y sirve para mantener comunicados a
todas las personas desde cualquier lugar en el que se encuentren. La información que se
puede compartir es infinita y muy útil, así como dirigida a todas las edades. De acuerdo
con las necesidades de las personas del siglo XXI, los avances en la tecnología han
llevado a una evolución constante de la web, que ha pasado de la Web 1.0 a la Web 3.0.
[9]
La Web 1.0 se refiere a un estado de la World Wide Web, y cualquier página web
diseñada con un estilo anterior del fenómeno de la Web 2.0. Su arquitectura típica se
observa en la Figura 3.1. Algunas de los elementos típicos de la la Web 1.0 son los
siguientes:
Páginas estáticas en vez de dinámicas por el usuario que la visita
El uso de framesets o Marcos.
Extensiones propias del HTML como <blink> y <marquee>, etiquetas introducidas
durante la guerra de navegadores web.
Libros de visitas en línea o guestbooks.
Botones GIF, casi siempre a una resolución típica de 88x31 pixeles en tamaño
promocionando navegadores web u otros productos.
22
Formularios HTML enviados vía correo electrónico. Un usuario llenaba un
formulario y después de hacer clic se enviaba a través de un cliente de correo
electrónico, con el problema que en el código se podía observar los detalles del
envío del correo electrónico.
No se podían añadir comentarios ni nada parecido
Todas sus páginas se creaban de forma fija y muy pocas veces se actualizaban.
[10]
Figura 3.1 Web 1.0 [11]
Posteriormente, la Web 1.0 dio paso a lo que se conoce como la Web 2.0.
Aunque el término sugiere una nueva versión de la World Wide Web, no se refiere a una
actualización de las especificaciones técnicas de la web, sino más bien a cambios
acumulativos en la forma en la que desarrolladores de software y usuarios finales utilizan
la Web. La Web 2.0 es un concepto que se creó en 2003 y que se refiere al fenómeno
social surgido a partir del desarrollo de diversas aplicaciones en Internet.
La Web 2.0 se caracteriza principalmente por la participación del usuario como
contribuidor activo y no solo como espectador de los contenidos de la Web (usuario
pasivo). Esto queda reflejado en aspectos como:
- El auge de los blogs.
- El auge de las redes sociales.
- Las webs creadas por los usuarios, usando plataformas de auto-edición.
- El contenido agregado por los usuarios como valor clave de la web.
- Aplicaciones web dinámicas
23
Adicionalmente a las aplicaciones, por la forma en que se utilizan en la Web 2.0,
el usuario ya no depende de que el software que ocupa regularmente o la información
con la que trabaja habitualmente, estén instalados en su computadora; en vez de eso,
aprovecha el almacenamiento en la nube para acceder a los datos y aplicaciones
personales a través de sitios que lo identifican de forma única por medio de un usuario y
una contraseña. Su arquitectura típica se muestra en la Figura 3.2.
Figura 3.2 Web 2.0 [12]
Con esta característica, utilizando herramientas Web 2.0 el usuario no depende de
un único equipo de cómputo ni de una ubicación geográfica, ya que puede tener acceso a
toda su información desde cualquier equipo en cualquier parte del mundo donde tenga
conexión a Internet.
La Web 2.0 ha originado la democratización de los medios haciendo que
cualquiera tenga las mismas posibilidades de publicar noticias que un periódico
tradicional. Grupos de personas crean blogs que al día de hoy reciben más visitas que las
versiones online de muchos periódicos. La Web 2.0 ha reducido considerablemente los
costes de difusión de la información. Al día de hoy podemos tener gratuitamente nuestra
propia emisora de radio online, nuestro periódico online, nuestro canal de vídeos, etc. Al
aumentar la producción de información aumenta la segmentación de la misma, lo que
equivale a que los usuarios puedan acceder a contenidos que tradicionalmente no se
publican en los medios convencionales.
24
Para compartir en la Web 2.0 se utilizan una serie de herramientas, entre las que
destacan los blogs, las wikis, las redes sociales y los entornos para compartir recursos
(Youtube, Slidershare, Dropbox, Google Drive, etc). [13]
En la actualidad hemos llegado a la Web 3.0, aunque aún se considera en
desarrollo. Dicha web facilita la accesibilidad de las personas a la información, sin
depender de qué dispositivo use para el acceso a ella, una web con la que interactuar
para conseguir resultados más allá del hecho de compartir "información".
El objetivo es que la información sea compartida por cada persona de una forma
inteligible y de provecho para ella y sus necesidades en cada circunstancia, y que,
además, está diseñada bajo parámetros de rendimiento eficiente, optimizando los
tiempos de respuesta, optimizando los consumos energéticos globales del sistema,
optimizando las exigencias técnicas y tecnológicas, optimizando los conocimientos y
capacidades que se requiera al usuario ya que es una web más intuitiva y humanizada.
Una web enfocada al bien común, a la integración universal de las personas y ser
herramienta para el desarrollo sostenible.
Web 3.0 también ha sido utilizada para describir el camino evolutivo de la red que
conduce a la inteligencia artificial. Algunos escépticos lo ven como una visión
inalcanzable. Sin embargo, compañías como IBM y Google están implementando nuevas
tecnologías basadas en inteligencia artificial. Otro posible destino para la Web 3.0 es la
dirección hacia la visión 3D, liderada por el Web3D Consortium. Esto implicaría la
transformación de la Web en una serie de espacios 3D, llevando más lejos el concepto
propuesto por Second Life. Esto podría abrir nuevas formas de conectar y colaborar,
utilizando espacios tridimensionales.
En lo que a su aspecto semántico se refiere, la Web 3.0 es una extensión del
World Wide Web en el que se puede expresar no sólo lenguaje natural, también se puede
utilizar un lenguaje que se puede entender, interpretar utilizar por agentes software,
permitiendo de este modo encontrar, compartir e integrar la información más fácilmente.
Su arquitectura típica se puede observar en la Figura 3.3. [14]
25
Figura 3.3 Web 3.0 [15]
3.1.2 Sistemas operativos móviles
Las plataformas software para dispositivos móviles son un concepto que empezó
a investigarse a finales de la década de los 80, pero no fue hasta 1996 cuando pudo
hacerse realidad con la aparición del dispositivo móvil Palm OS 1.0, creado por la
compañía Palm que integraba aplicaciones de RIM (Investigación en Marcha) tales como
correo, agenda y memo pad. [16]
En los siguientes puntos vamos a ver los sistemas operativos para móviles más
destacados que han surgido hasta la fecha.
3.1.2.1 Windows Phone
Microsoft lanza en el año 2000 el Pocket PC 2000 (WinCE 3.0) y un año después,
este S.O. ya soportaba Messenger y Media Player 8. Tres años después Windows Mobile
fue lanzado al mercado, con mejoras y nuevas aplicaciones tales como Microsoft Outlook,
Internet Explorer, Word, Excel, Windows Media Player entre otras características). En
2009 dicho sistema fue renombrado como Windows Phone. Actualmente compite en el
mercado de los smarphone, estando a la sombra de Android y IOS. [16]
26
3.1.2.2 Blackberry
El primer dispositivo de la familia fue la BlackBerry 850, comercializado por
primera vez 1999. Podía enviar mensajes, acceder al correo electrónico, recibir páginas
de Internet completas e implementaba una agenda para organizar tareas, con tan solo
una pequeña pantalla que podía mostrar ocho líneas de texto. Dicho sistema fue
evolucionando a lo largo de los años, los acontecimientos más importantes en su
evolución se dieron en 2003 cuando apareció el RIM 850 y 857, dispositivo con mejora
capacidad de conectarse a una red inalámbrica, mensajería, fax por Internet y que, a
diferencia del anterior, podía utilizarse como teléfono móvil.
No fue hasta 2008 cuando la compañía logró una alta penetración en el mercado
gracias a sus dispositivos. Su popularidad ha decaído en los últimos años de una forma
asombrosa, pasando de la cifra de 79 millones de terminales en Septiembre de 2013 a
los 25 millones en Diciembre de 2015. [17]
3.1.2.3 Symbian
Symbian es un sistema operativo propiedad de Nokia desde 2008 y que en el
pasado fue producto de la alianza de varias empresas de telefonía móvil entre las que se
encontraban Nokia, Sony Ericsson, Samsung, Siemens y Motorola entre muchas otras.
Se comercializó en 1999 con el objetivo de crear un sistema operativo para
terminales móviles que pudiera competir con el de Palm o el Windows Mobile de
Microsoft y posteriormente Android de Google, iOS de Apple, Windows Phone de
Microsoft y BlackBerry OS de Blackberry. Aunque tuvo bastante éxito en el mercado entre
los años 2006 y 2009, este mismo año dejará de ofrecerse soporte a los dispositivos que
cuenten con esta plataforma. [18]
3.1.2.4 IOS de Apple
iOS es el sistema operativo que da vida a dispositivos como el iPhone, el iPad, el
iPod Touch o el Apple TV. Su simplicidad y optimización son sus pilares para que
millones de usuarios se decanten por iOS en lugar de escoger otras plataformas que
necesitan más hardware para mover con fluidez el sistema. Cada año, Apple lanza una
27
gran actualización de iOS que suele trae características exclusivas para los dispositivos
más punteros que estén a la venta en ese momento. [19]
Desde 2007 Apple ha fabricado e introducido al mercado un teléfono móvil con
este sistema operativo cada año hasta 2016, cada uno con capacidades de memoria
RAM y acceso a velocidad de datos más elevadas, aplicaciones, calidad de pantalla,
sensores y procesador mejores que sus antecesores. Actualmente compite con Android
en el mercado de teléfonos móviles, aunque es superado ampliamente en cuanto a
número de usuarios. [20]
3.1.2.5 Android
Android es un sistema operativo basado en Linux diseñado principalmente para
dispositivos móviles con pantalla táctil, como teléfonos inteligentes y tablets y en menor
medida para relojes inteligentes, televisores y automóviles. Sus inicios tienen lugar en
2003 con la fundación de Android Inc, empresa que Google respaldó económicamente y
más tarde en 2005 compró. El primer dispositivo móvil con sistema operativo Android,
con nombre Android 1.0 Apple Pie, fue el HTC Dream y se vendió en 2008. Hasta la
fecha se han puesto en el mercado unas 15 versiones diferentes de este sistema
operativo. En la actualidad y desde hace algunos años los dispositivos con plataforma
Android se venden en mayor cantidad que los dispositivos con Windows Phone y iPhone
juntos (en la sección 1.1.2 vimos la superioridad de Android en España como sistema
operativo móvil). [21]
3.2 Estado del arte tecnológico (Página web)
En este apartado se van a describir las herramientas y metodología seguida para
la realización de la página web, justificando su uso frente a otras alternativas
contempladas.
3.2.1 Análisis previo de las posibilidades contempladas y elección final
Para el desarrollo de la aplicación web se han contemplado varias posibilidades:
28
- Programación basada en código PHP, HTML con CSS y Sistema de gestión de bases
de datos (SGBD), escribiendo el código de forma manual o utilizar algún programa de
diseño tipo Dreamweaver para facilitar el trabajo de diseño web.
- Utilización de un CMS (Content Management System) o sistema de gestión de
contenidos. Permite administrar contenidos en un medio digital y para el caso
particular que nos ocupa, un CMS permitiría gestionar los contenidos de la web.
- Utilizar una página web de creación de aplicaciones web, eligiendo modelos
predefinidos, plantillas y eligiendo la funcionalidad exacta de la web.
Hemos llegado a un punto en el que la comodidad y el ahorro del tiempo se
consideran factores muy a tener en cuenta. A día de hoy, muy pocos programadores
optan por escribir líneas y líneas de código puesto que no resulta óptimo, por lo que
rechazamos la programación manual en la aplicación web, ya que para este caso sería
necesario un claro dominio de HTML 5 y hojas de estilo CSS para que la página web
fuera atractiva visualmente para los usuarios.
Utilizar una página de creación de webs no tendría sentido, puesto que ahorra
totalmente el esfuerzo ya que sería un trabajo automático. Por tanto es lógico que no se
haya apostado por esta opción siendo este un Trabajo Final de Grado.
La opción elegida para el desarrollo de la aplicación web ha sido un Sistema de
Gestión de contenidos, puesto que nos va a permitir crear contenido para la página desde
un back-end o gestor de contenidos sin necesidad de contar con conocimientos técnicos
muy específicos. A continuación justificamos la decisión explicando qué es un CMS y los
beneficios que obtenemos al utilizar esta alternativa.
3.2.2 Gestores de contenidos
Un gestor de contenidos consiste en una interfaz que controla una o varias bases
de datos donde se aloja el contenido del sitio. El sistema permite manejar de manera
independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en
cualquier momento un diseño distinto al sitio sin tener que darle formato al contenido de
nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores.
[22]
29
Algunas de las ventajas de utilizar un CMS son las siguientes:
1. Los CMS tienen funcionalidades concretas que está comprobado que funcionan y
funcionan bien, sin necesidad de arreglar fallos en cuestiones básicas y permitiendo
centrarse en aspectos más complejos. Los CMS suelen cubrir necesidades para
plataformas de comercio electrónico, blogs, páginas con contenido estructurado y
gestión de usuarios… todo depende de elegir el CMS apropiado. Este es un punto a
favor de nuestro proyecto, ya que vamos a ser capaces de incluir una pasarela de
pago de forma sencilla a través de una extensión del CMS elegido.
2. Un usuario puede gestionar su propia web después de recibir formación. Una vez
desarrollada la web, el propio usuario puede añadir, editar o borrar datos y mantener
su página viva por sí mismo.
3. El desarrollo desde un CMS es más rápido y limpio. La creación de plantillas y
funcionalidades para los gestores de contenidos se basan en unos estándares que un
buen equipo es capaz de seguir para conseguir los resultados deseados partiendo de
una base sólida ya constituida. Esto elimina en gran parte el esfuerzo necesario para
construir el esqueleto de código de una web.
4. Permiten desarrollos escalables. Esto significa que, con una buena planificación, se
puede orientar el desarrollo desde un CMS para añadir nuevas funcionalidades no
previstas en el futuro sin que la web sufra cambios traumáticos mediante la
incorporación de módulos.
5. Muchos desarrolladores utilizan los CMS más populares. Esto es una ventaja
importante, porque cualquier programador es capaz de hacerse cargo y modificar
cualquier web siempre que conozca la arquitectura del CMS empleado aunque no
sean ellos los que la hayan desarrollado.
6. Muchos creadores de contenido saben manejarlos. La gran mayoría de redactores
saben cómo gestionar WordPress o Joomla en mayor o menor medida por ejemplo.
Es relativamente fácil encontrar personas que pueden hacerse cargo del contenido de
una web desarrollada a partir de un CMS sin necesidad de enseñarles cómo se
maneja.
7. Cada CMS tiene una comunidad de programadores detrás que constantemente
soluciona fallos, crea nuevos módulos y están en contacto unos con otros para
proporcionar el mejor servicio posible a los clientes para los que desarrollan. [23]
Con todas estas ventajas, hoy en día es realmente difícil encontrar una web
conocida que no esté desarrollada a partir de un sistema de gestión de contenidos, ya
sea uno de código libre o uno construido específicamente para sus necesidades. Todas
estas ventajas nos hacen estar a favor del uso de un CMS para la realización de nuestra
aplicación web.
30
3.2.3 Comparación de los principales CMS
Como no puede ser de otra forma vamos a decantarnos por uno de los tres CMS
más utilizados y populares que existen actualmente. Estos son Wordpress, Joomla y
Drupal, todos ellos gratuitos y de código abierto. Vamos a comentar las características de
cada uno de ellos y concluiremos con una elección del CMS que se considere apropiado
para los requerimientos de nuestra página web. En el gráfico de la Figura 3.4 se observan
los CMS más populares y su uso en la web.
Figura 3.4 Uso de los CMS en páginas web [24]
3.2.3.1 WordPress
WordPress comenzó como una plataforma de blogs, pero se ha convertido en un
potente CMS por derecho propio en las últimas versiones. Se puede usar para crear sitios
que no cuentan con un blog en absoluto, y sólo lo utilizan como un CMS para crear
páginas web potentes. WordPress está realizado en tecnología PHP y MySQL y sus
características principales son la sencillez y la capacidad de crear unas páginas web muy
atractivas. Sus principales características son las siguientes:
- Sencillez: Básicamente cada tipo de usuario podría crear una página web con
WordPress. Ante todo, es muy simple de instalar: muchas empresas de hosting
31
ofrecen la instalación automática que permite tener una web en 5 minutos; si se opta
por una instalación manual, puede ser suficiente media hora. Además, la interfaz para
la gestión de los contenidos es muy clara e intuitiva. No es necesario saber de
programación para gestionar los contenidos y darles la apariencia deseada. En caso
de error, el contenido siempre se podrá modificar tantas veces como se desee.
- Diseño: A nivel gráfico, WordPress cuenta con una cantidad de plantillas y plugins
que no tiene competencia en el sector: hablamos alrededor de más de 2.000 plantillas
gratuitas y personalizables y más de 27.000 plugins. Esta característica hace de
WordPress el CMS preferido por los diseñadores.
- SEO: La programación de WordPress ha tenido en cuenta la optimización SEO;
ofrece plugins que facilitan la optimización y el posicionamiento.
Sin embargo, hay también aspectos negativos: los usuarios se quejan
generalmente del hecho de que si la página empieza a recibir un número significativo de
visitas, se hará necesario un servidor muy robusto. Por otro lado, el mismo framework es
difícil de cambiar y a nivel de seguridad, las webs desarrolladas en WordPress no
parecen ser las más seguras. [24]
3.2.3.2 Drupal
Drupal es un CMS muy sólido y robusto y dispone de ACL (los niveles de control
de acceso para múltiples grupos de usuarios). Drupal es conocido por su estabilidad,
escalabilidad, extensibilidad y capacidad de soportar alto tráfico con muy pocos
problemas. Es el más difícil de instalar y configurar y requiere conocimientos avanzados y
experiencia técnica. [12]
A continuación se resumen sus características más representativas:
- Potencia: Es la plataforma tecnológicamente más avanzada y no requiere la misma
cantidad de recursos de sistema que WordPress. Las páginas gestionadas con Drupal
normalmente se cargan más rápidamente que en Wordpress y Joomla. Sin embargo,
el rendimiento de una página desarrollada con Drupal puede depender también del
número de plugins añadidos.
32
- Personalización: Es my simple personalizar la web gracias a los más de 24.000
plugins y a las más de 1.800 plantillas disponibles. Es posible incluso controlar la
estructura de las URLs o permalink (hay un módulo que redirige automáticamente la
URL interna de Drupal a la URL personalizada, garantizando URLs limpias). Se
pueden controlar también los archivos raíz del programa, característica que lo hace el
CMS más flexible actualmente.
- Flexibilidad: Una de las características principales de Drupal es su flexibilidad: la
plataforma se adapta tanto a realizar una web de noticias como una tienda online o un
catálogo. El entorno de desarrollo de Drupal permite modificar la web a partir de
pequeños módulos hasta que se consigan los requisitos deseados. La integración de
nuevos módulos y secciones no es particularmente difícil.
- Como inconveniente tenemos que resaltar que el mantenimiento de la plataforma es
más complejo y requiere más dedicación para ser dominado. Un usuario de bajo o
medio nivel podría requerir un soporte externo dotado de conocimientos más
profundos de los lenguajes de programación. [24]
3.2.3.3 Joomla
Joomla es uno de los productos de CMS más populares disponibles para
medianas y grandes sitios que necesitan más flexibilidad y características. Joomla fue
lanzado en 2005 y es visto hoy como un compromiso entre WordPress y Drupal. No será
tan intuitivo como WordPress ni cuenta con las capacidades de personalización de Drupal
pero es una mezcla de los dos. Se trata de un CMS potente que puede ejecutarse en la
mayoría de servidores web y no requiere el mismo nivel de conocimientos técnicos de
Drupal. Vamos a ver las características principales.
A continuación se describen las características más representativas de Joomla:
- E-commerce: Si con WordPress y Drupal es posible, crear una tienda online, con
Joomla es seguramente más fácil y rápido. Además, en comparación con los demás,
tiene extensiones que ayudan con temas de pagos, envíos, inventario, impuestos y
subscripciones.
- Social networking: A lo mejor es la característica principal de Joomla. Las redes
sociales pueden ser unas armas imprescindibles para muchas páginas web y Joomla
es el CMS que permite añadir social networking a la web de manera rápida y sencilla.
33
- Portal de ayuda: Joomla ofrece un portal de ayuda muy bueno. No es tan rápido y
completo como las comunidades de soporte de WordPress pero es más rápido que el
ofrecido por Drupal. [24] [25]
3.2.4 Gestor de contenidos elegido y justificación
Realmente como se puede apreciar, todos ofrecen unas prestaciones adecuadas
para el desarrollo de nuestra web, cualquiera nos podría valer para realizar la aplicación
web y se podría considerar una valoración bastante subjetiva por nuestra parte.
En este caso nos hemos decantado por Joomla, ya que nos parece una solución
profesional y más fácil de usar que Drupal y algo más flexible que Wordpress en cuanto
al diseño personal. También se ha considerado un punto a favor de Joomla la existencia
de una gran cantidad de información sobre este gestor de contenidos tal como libros,
manuales, tutoriales y una comunidad dedicada exclusivamente a dar soporte a usuarios
y despejar todo tipo de dudas.
Por último, decir que Joomla es conocido por ser el mejor CMS multimedia y
también es muy bueno para el comercio electrónico, razones por las cuáles nos
decantamos por él definitivamente. Hay que tener presente que en nuestra página web
van a existir contenidos multimedia y un servicio de asesoramiento de pago, por lo que
Joomla nos parece una solución idónea.
3.2.5 Requisitos de Joomla
El alumno, para la realización de la página web, utilizó Joomla en su versión 3.4,
ya que era la versión más reciente. Los requerimientos para utilizar Joomla se encuentran
en la Figura 3.5.
34
Figura 3.5 Requerimientos de Joomla 3.x [26]
En el siguiente apartado discutiremos el razonamiento que siguió el alumno para
la elección de estas herramientas, ya que Joomla ofrece varias posibilidades tal como
muestra la Figura 3.5.
3.2.6 Alternativas y elección del SGBD
Para instalar Joomla, ha sido necesario un sistema de gestión de base de datos.
Las alternativas que tenemos son MySQL, SQL Server y Postgre SQL tal como vemos en
la Figura 3.5. Para tomar la decisión, se analizó cada uno de ellos viendo sus
características principales:
3.2.6.1 PostgreSQL
Es un Sistema de gestión de bases de datos relacional libre y orientado a objetos,
publicado bajo la licencia BSD. Como muchos otros proyectos de código abierto, el
desarrollo de PostgreSQL no es manejado por una empresa y/o persona, sino que es
dirigido por una comunidad de desarrolladores que trabajan de forma desinteresada,
altruista, libre y/o apoyados por organizaciones comerciales. Algunas de sus
características son las siguientes:
35
- Alta concurrencia: PostgreSQL permite que mientras un proceso escribe en una tabla,
otros accedan a la misma tabla sin necesidad de bloqueos.
- Amplia variedad de tipos nativos: Soporte para números de precisión arbitraria, texto
de largo ilimitado, figuras geométricas (con una variedad de funciones asociadas,
direcciones IP, bloques de direcciones estilo CIDR, direcciones MAC o Arrays entre
otros.
- Utiliza claves ajenas o foráneas.
- Utiliza disparadores (triggers).
- Integridad transaccional.
- Posibilidad de usar Vistas.
- Herencia de tablas.
- Tipos de datos y operaciones geométricas. [27]
3.2.6.2 SQL Server
Microsoft SQL Server es un sistema de manejo de bases de datos del modelo
relacional, desarrollado por la empresa Microsoft. El lenguaje de desarrollo utilizado es el
Transact-SQL, una implementación del estándar ANSI del lenguaje SQL, utilizado para
crear y manipular datos (DML), crear tablas y definir relaciones entre ella (DDL). Solo
está disponible para sistemas operativos Windows de Microsoft. A continuación citamos
algunas de sus características más representativas:
- Soporte de transacciones
- Soporte de procedimientos almacenados.
- Entorno gráfico de administración.
- Permite trabajar en modo cliente-servidor.
- Permite administrar información de otros servidores de datos. [28]
3.2.6.3 MySQL
MySQL es un sistema de gestión de bases de datos relacional desarrollado bajo
licencia dual GPL/Licencia comercial por Oracle Corporation y está considerada como la
base datos open source más popular del mundo, sobre todo para entornos de desarrollo
web. Algunas de sus características más representativas son las siguientes:
36
- Amplio subconjunto del lenguaje SQL.
- Disponibilidad en gran cantidad de plataformas.
- Transacciones y claves foráneas.
- Conectividad segura.
- Replicación.
- Búsqueda e indexación de campos de texto. [29]
3.2.6.4 Elección del SGBD
El alumno decidió utilizar MySQL, debido a su popularidad en la actualidad en el
desarrollo web y a que ya había trabajado con él anteriormente durante sus estudios.
3.2.7 Herramienta XAMPP
XAMPP es un servidor independiente de plataforma, software libre, que consiste
principalmente en el sistema de gestión de bases de datos MySQL, el servidor web
Apache y los intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del
acrónimo de X (para cualquiera de los diferentes sistemas operativos), Apache, MySQL,
PHP, Perl. El programa se distribuye bajo la licencia GNU y actúa como un servidor web
libre, fácil de usar y capaz de interpretar páginas dinámicas. Actualmente XAMPP está
disponible para Microsoft Windows, GNU/Linux, Solaris y Mac OS X. [30]
El alumno decidió instalar XAMPP v3.2.1, ya que incluye PHP, el servidor Apache
y MySQL, requisitos para la posterior instalación de Joomla. La instalación de XAMPP es
muy sencilla, solo hay que abrir el archivo y seleccionar qué elementos son los que
queremos instalar y seguir el asistente. (Ver Figura 3.6).
37
Figura 3.6 Instalación de XAMPP
3.2.8 Instalación de Joomla
Dentro de la carpeta donde instalamos XAMPP podemos ver la carpeta htdocs
que será donde instalemos Joomla. Esta carpeta es el directorio raíz de nuestra
aplicación web, donde almacenaremos todos los archivos. Dentro de la carpeta htdocs
vamos a crear una nueva carpeta llamada joomla34 por ejemplo y descomprimimos el
archivo Joomla comprimido y descargado anteriormente en esta carpeta. Ahora vamos al
navegador y escribimos en la barra de direcciones: localhost/34 y nos aparecerá
directamente los pasos a seguir para la instalación de Joomla.
En la instalación de Joomla se nos pedirán datos como el nombre del sitio web,
nombre del usuario administrador, así como el SGBD utilizado, en nuestro caso MySQL y
los datos del usuario creado en la base de datos para que Joomla se instale
correctamente. En la Figura 3.7 podemos ver el asistente de instalación.
38
Figura 3.7 Asistente de instalación de Joomla
3.2.9 Extensiones Joomla utilizadas para el desarrollo web
Para el desarrollo de la página web, el alumno ha tenido que buscar e instalar las
extensiones apropiadas de Joomla para darle la funcionalidad correcta a la página web,
ya que Joomla por defecto es un CMS orientado a la creación de artículos y contenidos
de tipo blog. Estas extensiones nos crean directamente las tablas en la base de datos
relacionadas con la información que guardan. Más adelante en la lógica de negocio
veremos dichas tablas y sus relaciones.
Las extensiones utilizadas por el alumno y su función dentro de la página web se
detallan en los apartados siguientes. Todas las extensiones utilizadas son gratuitas y
descargables a través de la interfaz gráfica de Joomla.
3.2.9.1 JComments
Esta extensión nos permite la inserción de comentarios en el contenido Joomla.
En nuestro caso, se ha usado para que los visitantes de nuestra web puedan comentar
en la sección de noticias y artículos. En la Figura 3.8 se puede observar un ejemplo de
comentario con JComments. Sus principales características son las siguientes:
39
Captcha para protección antispam.
Soporte para varios lenguajes.
Moderación de comentarios.
Avisos de nuevos comentarios por correo electrónico.
Baneo de direcciones IP. [31]
Figura 3.8 Ejemplo de comentario usando JComments
3.2.9.2 HikaShop
HikaShop es una extensión de comercio electrónico simple y flexible para Joomla.
El alumno utilizó HikaShop después de realizar una comparativa entre esta y Virtuemart
(posiblemente la extensión de comercio electrónico más utilizada para Joomla). El
alumno se descantó por HikaShop tras probar ambas y comprobar la simplicidad de esta
en comparación con Virtuemart, ya que esta última es más bien usada en tiendas online y
nuestros requerimientos de comercio electrónico son a una escala muy pequeña. Las
características más destacadas de HikaShop son las siguientes:
Configuración total del proceso de compra.
Permite configurar diferentes monedas.
40
Cupones y descuentos.
Más de 60 plugins de pago.
Notificaciones de e-mail tanto para el vendedor como para el cliente
Gran variedad de opciones en productos y categorías.
Posibilidad de configurar desencadenadores relacionados con compras.
Histórico de órdenes y edición de estas. [32]
El alumno utilizó HikaShop para crear los tres productos que tiene en venta en la
página (el asesoramiento online en modalidad de 1 mes, 3 meses y 6 meses), configurar
los pasos de compra y usó el plugin de Paypal para el pago de los productos. En la
Figura 3.9 se observan los productos disponibles en la página web.
Figura 3.9 Productos a la venta en la página web
Además, se configuró un desencadenador por el que a un usuario, tras realizar la
compra, se le añade al grupo de los asesorados automáticamente, el grupo
“Asesoramiento” con lo que puede tener acceso a todos los contenidos de los
asesorados.
Previamente el alumno tuvo que crear una cuenta Paypal para recibir los pagos,
configurando el plugin Paypal para asociar el pago a esa cuenta paypal.
3.2.9.3 Community Builder
Esta extensión sirve para crear comunidades de usuarios en Joomla. Algunas de
sus características son las siguientes:
41
Posibilidad de crear perfiles para los miembros.
Personalizar datos de los usuarios, tanto en registro como en perfil.
Permite añadir fotos de perfil de usuario, fotos de portada de perfil, etc.
Implementa las funciones de login y registro de forma totalmente personalizada.
Implementa funciones de notificación de registro de usuarios y formas diferentes de
acceso (con email y contraseña, usuario y contraseña, mediante links enviados al
correo, etc). [33]
En este proyecto se ha utilizado la extensión Community Builder para personalizar
los datos de registro de un usuario, así como añadir funcionalidad del perfil de usuario, en
la que un usuario puede modificar sus datos, subir foto de perfil, etc. En nuestro caso, se
ha usado para obtener los datos de los usuarios registrados y en ese sentido se han
dividido los datos del usuario en Información de Contacto y en Datos de Asesorados. En
la Figura 3.10 se puede observar el perfil de un usuario Asesorado, usando la extensión
Community Builder.
Figura 3.10 Ejemplo del perfil de un usuario asesorado
42
3.2.9.4 DJ-ImageSilder
Esta extensión sirve para crear sliders, es decir, imágenes dinámicas en
movimiento en nuestra web. En este caso, nosotros solo hemos usado un slider para
nuestra página de inicio en la web, en la que aparecen fotos del alumno ejerciendo de
entrenador personal y de clientes, que se van pasando automáticamente.
La configuración de esta extensión es muy simple; solamente tenemos que indicar
el directorio en el que se encuentran las fotos a mostrar y las propiedades del slider, tales
como el tamaño de las fotos, si queremos que se pasen automáticamente, el tiempo de
aparición de cada una, si se puede parar la reproducción de las imágenes, etc. En la
Figura 3.11 se muestra un slider creado con DJ-ImageSlider.
Figura 3.11 Slider creado con DJ-ImageSlider
3.2.9.5 CoalaWeb Like Box y CoalaWeb Social Links
CoalaWeb Like Box nos permite introducir un módulo en la página web que
contiene la página de facebook del alumno, permitiendo darle al botón “Me gusta”. Se
trata de un módulo bastante popular entre las páginas web actuales. (Ver Figura 3.12).
43
Figura 3.12 Módulo CoalaWeb LikeBox
De forma similar, CoalaWeb Social Links nos permite insertar un módulo en el que
aparecen unos iconos distintivos de las distintas redes sociales que se configuren,
permitiendo enlazar estos iconos con redes sociales. En la web se han configurado los
enlaces a las redes sociales propias del alumno de Facebook, Twitter, Youtube e
Instagram. (Ver Figura 3.13).
Figura 3.13 Módulo CoalaWeb Social Links
3.2.9.6 JU Download
Esta extensión nos permite crear directorios, subir archivos a estos directorios,
crear contraseñas para los archivos, mostrar el contenido de los archivos, descargar los
archivos, etc. En este proyecto en concreto, se ha usado para subir los planes de
entrenamiento y los planes nutricionales de los clientes asesorados y permitir que los
clientes asesorados accedan a ellos y los descarguen.
44
El administrador subirá los planes personalizados de entrenamiento y
nutricionales a directorios que solo serán accedidos por los clientes asesorados, archivos
que tendrán una contraseña que el cliente deberá introducir para ser descargados con
éxito. En la Figura 3.14 podemos ver el ejemplo un PDF subido con JU Download.
Figura 3.14 Ejemplo de PDF subido usando JU Download
3.2.10 Página web y base de datos en un servidor remoto
La página web se ha desarrollado en el equipo local. Sin embargo, no tiene
sentido la utilización de la web o la aplicación móvil en dicho servidor. Lo que se pretende
es que la página web sea accesible por el mayor número de personas posibles, que
interactúen en las noticias y artículos y en última instancia se pretende ganar clientes.
Debido a estas razones de negocio, se ha contratado alojamiento web y un
dominio. El alumno, tras estudiar diferentes alternativas, ha preferido elegir una empresa
de hosting web de calidad como Hostinet, ha adquirido un paquete de alojamiento web
con un dominio y ha subido todos los archivos a un servidor remoto. Esto nos va a
permitir tener la página web en el dominio fitnessdesemana.es y en ese mismo servidor
45
también se importará la base de datos MySQL para que tanto la página web como la
aplicación móvil para asesorados funcionen de forma correcta.
3.3 Estado del arte tecnológico (Aplicación móvil)
En este apartado se van a describir las herramientas y metodología seguida para
la realización de la aplicación móvil. El alumno primeramente ha elegido Android como
plataforma para el desarrollo de la aplicación móvil, puesto que es el sistema operativo
para móviles con mayor cuota de mercado en España, tal como vimos en la sección 1.1.2
de esta memoria. En este apartado vamos a hablar sobre Android, su arquitectura, el
entorno de desarrollo elegido para la realización del proyecto y las herramientas y
librerías que han sido necesarias para su desarrollo.
3.3.1 Android como plataforma
En el apartado 3.1.2, cuando hablamos de los sistemas operativos para móviles
más importantes que han surgido hasta la fecha, ya hablamos algo sobre Android. En los
siguientes apartados vamos a ver Android en profundidad, ya que ha sido la elección del
sistema operativo con el que se ha desarrollado la aplicación móvil.
3.3.1.1 Ventajas e inconvenientes de Android
Sus ventajas más representativas son las siguientes:
Plataforma de código abierto: Android está basado en el kernel de Linux. Lo bueno
que esto trae como consecuencia es que se puede manipular según su gusto,
cualquier persona puede realizar una aplicación para Android.
Debido a que muchas compañías relacionadas a la tecnología móvil se encuentran
dentro del grupo Open Handset Alliance y el mismo está a favor de Android, se
promueven las ventas con el mismo sistema operativo. Un ejemplo sería los
terminales de la marca Samsung.
El sistema operativo pertenece a Google, y trae muchos beneficios aparejados
relacionados con cada uno de los servicios que provee la empresa multinacional,
como Hangouts, Gmail, entre otros.
Facilidad de crear aplicaciones en Android ha favorecido la popularidad y el
crecimiento del mismo sistema operativo. Crear un juego o una aplicación resulta
muy sencillo, incluso sin saber nada de programación, desde sitios web.
46
La sencilla accesibilidad a las aplicaciones que diseñan los desarrolladores es un
factor clave. Se podría hablar de una excelente globalización de las mismas,
incentivando al uso de Android, Hoy día hay más de 650.000 aplicaciones
disponibles para teléfonos Android, aproximadamente 2/3 son gratis.
La libertad de código permite adaptar Android a bastantes otros dispositivos
además de teléfonos celulares. Está implantado en Tablets, GPS, relojes,
microondas… incluso hay por internet una versión de Android para PC.
Existen muchas versiones. Esta es una clara ventaja porque es posible actualizar
nuestra vieja versión del sistema operativo de nuestro smartphone para que tenga
un mejor desempeño (siempre y cuando este lo soporte).
Sus inconvenientes más importantes son los siguientes:
Es muy vulnerable debido a que es de código abierto. El hecho de que sea de
código abierto trae esta gran desventaja, ya que el sistema operativo es utilizado
por muchos usuarios aprovechando las fallas del sistema.
Necesidad de descargar aplicaciones adicionales desde Google Play para
optimizar el sistema operativo. Por ejemplo Android no gestiona bien el uso de la
multitarea. ¿Qué quiere decir esto? Que está procesando aplicaciones que no se
han cerrado por completo en segundo plano. También, se puede decir que se
puede descargar una aplicación para el ahorro de energía, ya que sino, se gastaría
mucha batería. Estos son dos de muchos ejemplos de las razones por las cuales
es una buena idea tener aplicaciones extras para que se complementen junto al
sistema operativo.
Las configuraciones del celular mediante Android no son tan sencillas de realizar.
Tiene funcionalidades que pueden resultar difícil de configurar si no se sabe
mucho de tecnología.
No tiene un soporte de actualización como en el caso de Apple con su sistema
operativo iOS. En esta compañía, todos los iPhones, iPads, iPods, etcétera, se
pueden actualizar a la última versión de software brindado por la empresa de una
forma sencilla sin importar el hardware. [34] [35]
3.3.1.2 Versiones de Android
A continuación se presentan las distintas versiones de Android que existen hasta
la fecha actual de este proyecto.
- Android 1.0 Apple Pie (lanzada el 23 de septiembre de 2008). El primer dispositivo
que salió al mercado con dicho sistema operativo fue el HTC Dream. Aunque pueda
parecer algo histórico comparándolo con las versiones de hoy en día, venía bastante
bien equipado.
47
- Android 1.1 Banana Bread (lanzada el 9 de febrero de 2015). Como el único terminal
que contaba con el sistema operativo del androide era el HTC Dream, dicha
actualización solo funcionaba para este terminal. Resolvió fallos y cambió la API.
- Android 1.5 o Cupcake (lanzada en abril de 2009). Usa el kernel de Linux 2.6.27, con
mejoras el contenido multimedia (grabación vídeos o subirlos a YouTube, fotos a
Picasa) y conectividad (conexión con auriculares mediante Bluetooth).
- Android 1.6 o Donut (lanzada en septiembre de 2009). Usa el kernel de Linux 2.6.29,
incluía mejoras en Market, búsqueda mediante voz, compatibilidad con pantallas
WVGA y aumento en la velocidad.
- Android 2.0/2.1 o Eclair (lanzada en octubre de 2009). Usa el kernel de Linux 2.6.29,
incorporaba compatibilidad con HTML5 y Exchange, mapas de Google mejorados,
Bluetooth 2.1 o fondos de pantalla animados.
- Android 2.2 o Froyo (lanzada en mayo de 2010). Usa el kernel de Linux 2.6.32, se
caracteriza por el aumento de la velocidad, tethering y funcionalidad como punto de
acceso WiFi, actualizaciones para Market automáticas y contactos compartidos
mediante Bluetooth.
- Android 2.3.x Gingerbread. (lanzada en diciembre de 2010) Usa el kernel de Linux
2.6.33. Llega la tienda de música de Android y el streaming desde la PC, mejorando
notablemente la interfaz de usuario. Durante unos 10 meses se introdujeron un total
de siete actualizaciones de Gingerbread que en la mayoría de los casos solucionarían
bugs menores
- Android 3.x Honeycomb (lanzada en febrero de 2011) Usa el kernel de Linux 2.6.36.
Sistema optimizado para tablets especialmente, aceleración de hardware y soporte
para procesadores multinúcleos.
- Android 4.0.x Ice Cream Sandwich (lanzada en octubre de 2011). Usa el kernel de
Linux 3.0.1. Mejoras de estabilidad y rendimiento, grabación de videos en 1080p,
posibilidad de cerrar aplicaciones en segundo plano.
- Android 4.1 Jelly Bean (lanzada en junio de 2012). Posibilidad de comandos de voz
sin pulsar la tecla home como “Ok google”, soporta Bluetooth que consume poca
energía.
- Android 4.4 KitKat (lanzada en octubre de 2013). Mejoras de interface con
transparencias en el menú, y a medida que se fue actualizando tuvo importantes
mejoras.
- Android 5.0 Lollipop (lanzada en noviembre de 2014). Diseño colorido y mejora en el
consumo de batería. Este importante paquete de mejoras continuó creciendo con las
48
sucesivas subversiones (Android 5.0.1 y Android 5.0.2, de diciembre de 2014).
Google ofreció la versión 5.1.1 en el mes de abril de 2015, solucionando algunos
problemas menores. [36]
- Android 6.0 Marshmallow (lanzada el 5 de octubre de 2015): La novedad más
importante quizá fue la introducción de la plataforma de pagos de Google, Android
Pay, y es que ésta es una funcionalidad muy jugosa y de la que se prevé un enorme
crecimiento durante los próximos años.
- Android 7.0 Nougat: En el momento de realización de este proyecto aún no están
definidas las prestaciones y mejores que ofrece. Se espera el lanzamiento para
finales de Agosto de 2016, para dispositivos Nexus. [37]
Podemos ver las distintas versiones de Android hasta la fecha en la Figura 3.15.
3.3.1.3 Arquitectura de Android
Android es una plataforma para dispositivos móviles que contiene una pila de
software donde se incluye un sistema operativo, middleware y aplicaciones básicas para
el usuario.
En las siguientes líneas se dará una visión global por capas de cuál es la
arquitectura empleada en Android. Cada una de estas capas utiliza servicios ofrecidos
por las anteriores, y ofrece a su vez los suyos propios a las capas de niveles superiores,
tal como muestra la Figura 3.16. [39]
Figura 3.15 Versiones de Android [38]
49
Figura 3.16 Arquitectura de Android [40]
- Aplicaciones: Este nivel contiene, tanto las incluidas por defecto de Android como
aquellas que el usuario vaya añadiendo posteriormente, ya sean de terceras
empresas o de su propio desarrollo. Las aplicaciones base incluyen un cliente de
correo electrónico, programa de SMS, calendario, mapas, navegador, contactos y
otros. Todas estas aplicaciones utilizan los servicios, las API y librerías de los niveles
anteriores.
- Macro de trabajo de aplicaciones: los desarrolladores tienen acceso completo a los
mismos APIs del framework usados por las aplicaciones base. La arquitectura está
diseñada para simplificar la reutilización de componentes; cualquier aplicación puede
publicar sus capacidades y cualquier otra aplicación puede luego hacer uso de esas
capacidades (sujeto a reglas de seguridad del framework). Este mismo mecanismo
permite que los componentes sean reemplazados por el usuario.
50
- Bibliotecas: Android incluye un conjunto de bibliotecas de C/C++ usadas por varios
componentes del sistema. Estas características se exponen a los desarrolladores a
través del marco de trabajo de aplicaciones de Android; algunas son: System C library
(implementación biblioteca C estándar), bibliotecas de medios, bibliotecas de gráficos,
3D y SQLite, entre otras. Junto al núcleo basado en Linux, estas librerías constituyen
el corazón de Android.
- Runtime de Android: Android incluye un set de bibliotecas base que proporcionan la
mayor parte de las funciones disponibles en las bibliotecas base del lenguaje Java.
Cada aplicación Android corre su propio proceso, con su propia instancia de la
máquina virtual Dalvik. Dalvik ha sido escrito de forma que un dispositivo puede correr
múltiples máquinas virtuales de forma eficiente. Dalvik ejecuta archivos en el formato
Dalvik Executable (.dex), el cual está optimizado para memoria mínima. La Máquina
Virtual está basada en registros y corre clases compiladas por el compilador de Java
que han sido transformadas al formato.dex por la herramienta incluida "dx". Desde la
versión 5.0 utiliza el ART, que compila totalmente al momento de instalación de la
aplicación.
- Núcleo Linux: Android depende de Linux para los servicios base del sistema como
seguridad, gestión de memoria, gestión de procesos, pila de red y modelo de
controladores. El núcleo también actúa como una capa de abstracción entre el
hardware y el resto de la pila de software. [41]
3.3.1.4 Componentes de un proyecto Android
Existe una serie de elementos clave que resultan imprescindibles para desarrollar
aplicaciones en Android. En este apartado vamos a realizar una descripción de algunos
de los más importantes:
- Vista (View): Las vistas son los elementos que componen la interfaz de usuario de
una aplicación: por ejemplo, un botón o una entrada de texto. Todas las vistas van a
ser objetos descendientes de la clase View, y por tanto, pueden ser definidas
utilizando código Java. Sin embargo, lo habitual será definir las vistas utilizando un
fichero XML y dejar que el sistema cree los objetos por nosotros a partir de este
fichero. Esta forma de trabajar es muy similar a la definición de una página web
utilizando código HTML.
51
- Layouts: Un layout es un conjunto de vistas agrupadas de una determinada forma.
Vamos a disponer de diferentes tipos de layouts para organizar las vistas de forma
lineal, en cuadrícula o indicando la posición absoluta de cada vista. Los layouts
también son objetos descendientes de la clase View. Igual que las vistas, los layouts
pueden ser definidos en código, aunque la forma habitual de definirlos es utilizando
código XML.
- Actividad (Activity): Una aplicación en Android va a estar formada por un conjunto de
elementos básicos de visualización, coloquialmente conocidos como pantallas de la
aplicación. En Android cada uno de estos elementos, o pantallas, se conoce como
actividad. Su función principal es la creación de la interfaz de usuario. Una aplicación
suele necesitar varias actividades para crear la interfaz de usuario. Las diferentes
actividades creadas serán independientes entre sí, aunque todas trabajarán para un
objetivo común. Toda actividad ha de pertenecer a una clase descendiente de
Activity.
- Servicio (Service): Un servicio es un proceso que se ejecuta “detrás”, sin la necesidad
de una interacción con el usuario. Es algo parecido a un demonio en Unix o a un
servicio en Windows. En Android disponemos de dos tipos de servicios: servicios
locales, que son ejecutados en el mismo proceso y servicios remotos, que son
ejecutados en procesos separados.
- Intención (Intent): Una intención representa la voluntad de realizar alguna acción;
como realizar una llamada de teléfono, visualizar una página web. Se utiliza cada vez
que queramos lanzar una actividad o un servicio, enviar un anuncio de tipo broadcast
o comunicarnos con un servicio. Los componentes lanzados pueden ser internos o
externos a nuestra aplicación. También utilizaremos las intenciones para el
intercambio de información entre estos componentes.
- Fragments: La llegada de las tabletas trajo el problema de que las aplicaciones de
Android ahora deben soportar pantallas más grandes. Para ayudar al diseñador a
resolver este problema, en la versión 3.0 de Android aparecen los fragments.
- Receptor de anuncios (Broadcast receiver): Un receptor de anuncios recibe anuncios
broadcast y reacciona ante ellos. Los anuncios broadcast pueden ser originados por
el sistema (por ejemplo: Batería baja, Llamada entrante) o por las aplicaciones. Las
aplicaciones también pueden crear y lanzar nuevos tipos de anuncios broadcast. Los
52
receptores de anuncios no disponen de interfaz de usuario, aunque pueden iniciar
una actividad si lo estiman oportuno.
- Proveedores de contenidos (Content Providers): En muchas ocasiones las
aplicaciones instaladas en un terminal Android necesitan compartir información.
Android define un mecanismo estándar para que las aplicaciones puedan compartir
datos sin necesidad de comprometer la seguridad del sistema de ficheros. Con este
mecanismo podremos acceder a datos de otras aplicaciones, como la lista de
contactos, o proporcionar datos a otras aplicaciones. [42]
3.3.1.5 Estructura de un proyecto Android
Toda aplicación que se crea para android sigue una misma estructura básica, que
se compone del código fuente en sí, archivos de recursos y vistas, librerías de código y el
android manifest. A continuación pasamos a explicar cada uno de estos componentes:
- Directorio src: En él se encuentra toda la lógica de aplicación, todas las clases
programadas en JAVA. Dentro de ella se pueden definir distintos paquetes. (Ver
Figura 3.17)
Figura 3.17 Directorio src
- Android Library: Aquí se encuentran todas las librerías propias del SDK de android,
dependiendo la versión elegida al crear el proyecto tendrá una versión u otra.
53
- Directorios RES: Se encuentran todos los archivos con los recursos que usan la
aplicación. Las imágenes, archivos de idiomas, estilos, etc.. Un pequeños listado de
estos se muestran en la Figura 3.18.
Figura 3.18 Directorio res [43]
Drawable: Carpeta con todas las imágenes de la app. Se subdivide en
múltiples carpetas desde la versión 1.6, que contienen las imágenes en
distintas resoluciones y tamaños que se usarán dependiendo del dispositivo
usado.
Layout: Aquí se encuentran las distintas pantallas de la aplicación, es decir, los
archivos xml con las interfaces visuales asociadas a las actividades.
Values: Carpeta con los xml de contenido de la app. En ella puede haber
definidas las constantes de la aplicación, dando la posibilidad del multidioma.
También se pueden definir estilos para los componentes. Y todo tipo de
configuraciones.
- Directorio bin: Aquí se encuentran todos los archivos generados por la propia app.
Como sabeis, android usa la máquina virtual dalvik, primero se traduce a los típicos
archivos .class de java y posteriormente es traducido a los archivo .dex propios de
android. También está el ejecutable de la aplicación "apk", que sería el equivalente a
los "exe" de windows. Es el archivo que deberías instalar en cualquier teléfono
android para probar la aplicación.
- Directorio gen: En esta carpeta esta el archivo R.class, éste contiene lo
identificadores los recursos usados por tu proyecto: imágenes, layout, etc... Este
directorio se puede observar en la Figura 3.19.
54
Figura 3.19 Directorio gen [43]
- Directorio assets: Carpeta donde se encuentran los archivos auxiliares de tu
aplicación: imágenes, audios, vídeos... la diferencia con los que se encuentran con la
carpeta "RES", es que los archivos incluidos aquí no generarán un identificador dentro
del archivo R.class anteriormente descrito. Para usar estos archivos, en vez de
referenciarlos por un ID, habría que usar la ruta física como cualquier otro archivo
- Directorio lib: Carpeta donde se encuentran las librerías externas importadas. En la
Figura 3.20 se muestra un ejemplo del directorio libs.
Figura 3.20 Directorio libs
- Android Manifest: Archivo básico de configuración de toda aplicación android. En el se
definen todas las activities de la app, sus permisos, etc. [43]
3.3.2 IDE Android Studio
La elección del entorno de desarrollo ha sido muy sencilla. Nos hemos decantado
por Android Studio sin ningún tipo de duda. La razón principal es que es el entorno oficial
recomendado por Google.
IDE Android Studio nos ofrece una serie de ventajas que lo hacen el entorno de
desarrollo más popular actualmente. Android Studio ha desbancado a Eclipse, que fue el
55
entorno de desarrollo usado años atrás en los comienzos de Android. Algunas de las
ventajas que nos ofrece Android Studio son las siguientes:
- Instant Run: Al introducir cambios en el código o recursos de la app en ejecución en
un dispositivo o emulador, se pueden visualizar los cambios al instante. Esto acelera
notablemente la edición, compilación y ejecución.
- Emulador rápido y cargado de funciones: Posibilidad de instalar y ejecutar las apps
más rápido con un dispositivo físico, y probarlas en casi cualquier configuración de
dispositivos Android: teléfonos y tablets Android, y dispositivos Android Wear y
Android TV.
- Sistema de compilación sólido y flexible: Posibilidad de configurar de manera sencilla
un proyecto de modo que incluya bibliotecas de códigos y genere diferentes variantes
de compilación desde un único proyecto. Con Gradle, Android Studio ofrece
automatización de compilaciones de alto rendimiento, administración sólida de
dependencias y configuraciones de compilación personalizables.
- Plantillas de código e integración con GitHub: Capacidad de iniciar proyectos con
plantillas de código para patrones como el panel lateral de navegación y los
paginadores de vistas, así como posibilidad de importar ejemplos de código de
Google desde GitHub. Los asistentes de proyectos de Android Studio hacen que
agregar código en un proyecto nuevo sea más sencillo que nunca. [44]
3.3.3 Requerimientos e instalación de IDE Android Studio
Android Studio está disponible para Windows 2003, Vista, 7, 8, 10 y GNU/Linux,
tanto plataformas de 32 como de 64 bits, Linux con GNOME o KDE y 2 GB de memoria
RAM mínimo y Mac OS X, desde 10.8.5 en adelante. Los requisitos del sistema para las
tres plataformas son:
2 GB de RAM (4 GB recomendados)
400 MB de espacio en disco
1 GB para Android SDK
Java Development Kit 7 o superior [45]
56
Primero se tuvo que instalar el JDK (Java Development Kit) versión 8 descargado
de la página oficial de Java siguiendo el asistente de instalación. Posteriormente, se
descargó el fichero ejecutable de Android Studio, de la página oficial de Android Studio y
se instaló de manera sencilla siguiendo el asistente de instalación. Por último se
instalaron las librerías SDK Tools 24 para el desarrollo del proyecto en su última versión
disponible hasta la fecha Android 6.0 Marshlow.
3.3.4 Librerías externas utilizadas en el desarrollo de la app
Dentro de nuestro proyecto para la aplicación Android, hemos usado dos librerías
externas, que copiamos en la carpeta lib tal como vimos en la estructura del proyecto
(Sección 3.3.1.5) y compilamos para poder utilizarlas. Estas librerías son:
Mysql-connector-java-3.0.17.jar: Nos permitió utilizar java para conectarnos a la base
de datos y trabajar con las distintas tablas que veremos más adelante.
Mpandroidchartlibrary-2-2-4.jar: Se utilizó para poder representar los gráficos de
barras de progreso de clientes. Después de hacer pruebas con las librerías
AndroidPlot y MPAndroidChart, el alumno optó por utilizar esta última ya que permitía
una personalización mayor que AndroidPlot, que está más bien diseñada para
gráficas de dispersión matemáticas. Se puede observar en la Figura 3.21 una gráfica
creada con AndroidPlot (gráfica XY) y una creada con MPAndroidChart (gráfico de
barras).
57
Figura 3.21 Gráficas con AndroidPlot y MPAndroidChart
3.4 Estado del arte legislativo
Es importante tener en cuenta la legislación vigente en el territorio nacional a la
hora de trabajar tanto la página web como con la aplicación móvil. En este caso, al ser
una aplicación de uso personal para el alumno como entrenador personal, tan sólo
tendremos en cuenta las leyes en España.
En nuestro caso contamos con un sistema que almacena los datos de clientes.
Los clientes deberán ser informadas de que se van a utilizar sus datos, según la Ley
Orgánica 15/1999 de 13 de Diciembre de Protección de datos de carácter personal
(LOPD), concretamente en el artículo 6 apartado 1, que dice lo siguiente: “el tratamiento
de los datos de carácter personal requerirá el consentimiento inequívoco del afectado”.
El incumplimiento de esta ley supone sanciones: leves, graves y multas entre 600
y 600.000€. [46]
3.5 Análisis del sistema
3.5.1 Definición del sistema
58
El objetivo de este trabajo ha sido la realización de una página web para la
captación de clientes por parte del alumno en su trabajo como entrenador personal,
ofreciendo dentro de la página el acceso a unos contenidos exclusivos y una aplicación
Android, que será usada por sus clientes.
En la web los visitantes podrán acceder a numerosos contenidos relacionados con
el mundo del deporte, el entrenamiento físico y la nutrición deportiva. Estos visitantes
podrán registrarse y comprar un servicio de asesoramiento que les permitirá tener acceso
a contenidos exclusivos, como unos planes de entrenamiento y nutrición personalizados,
correcta ejecución de ejercicios y la descarga de la aplicación Android para móviles que
se comenta a continuación.
La aplicación para móviles sirve principalmente para que los clientes puedan llevar
un registro de sus datos corporales de forma visual y permitir al entrenador llevar el
seguimiento de estos registros y ver la evolución que están teniendo sus clientes.
Para lograr el correcto funcionamiento de la aplicación, ha sido necesario un
servidor web remoto, que almacena todos los datos en una base de datos (usuarios,
compras de asesoramiento, grupo al que pertenece el usuario, etc). La página web se
aloja en el servidor remoto, mientras que la aplicación para móviles estará instalada en el
dispositivo móvil del cliente y realizará conexiones a la base de datos en el servidor
remoto para poder llevar a cabo las acciones correspondientes.
La página web está enfocada a las necesidades del alumno como entrenador
personal. Al usar un gestor de contenidos puede hacer cambios sencillos en la base de
datos o en la propia web de forma sencilla sin requerir ningún tipo de conocimiento de
programación web. Si se quisiera adaptar o hacer cambios en la aplicación para
dispositivos móviles, el alumno debería de modificar el código fuente.
Dentro del marco de la ingeniería del software, para realizar un proyecto, se
requiere llevar a cabo numerosas tareas agrupadas en etapas, al conjunto de estas
etapas se le denomina ciclo de vida. A continuación presentamos las etapas que ha
seguido el alumno a la hora de realizar este proyecto, que son las comunes a casi todos
los ciclos de vida:
Obtención de los requisitos: se debe identificar sobre que se está trabajando, es decir,
el tema principal que motiva el inicio del estudio y creación del nuevo software o
59
modificación de uno ya existente. A su vez identificar los recursos que se tienen, en
esto entra el conocer los recursos humanos y materiales que participan en el
desarrollo de las actividades. Es importante entender el contexto del negocio para
identificar adecuadamente los requisitos.
Análisis de requisitos: Extraer los requisitos de un producto software es la primera
etapa para crearlo. Durante la fase de análisis, el cliente plantea las necesidades que
se presenta e intenta explicar lo que debería hacer el software o producto final para
satisfacer dicha necesidad mientras que el desarrollador actúa como interrogador,
como la persona que resuelve problemas. Con este análisis, el ingeniero de sistemas
puede elegir la función que debe realizar el software y establecer o indicar cuál es la
interfaz más adecuada para el mismo.
Limitaciones: Los software tienen la capacidad de emular inteligencia creando un
modelo de ciertas características de la inteligencia humana pero sólo posee funciones
predefinidas que abarcan un conjunto de soluciones que en algunos campos llega a
ser limitado. Aun cuando tiene la capacidad de imitar ciertos comportamientos
humanos no es capaz de emular el pensamiento humano porque actúa bajo
condiciones.
Especificación: La especificación de requisitos describe el comportamiento esperado
en el software una vez desarrollado. Gran parte del éxito de un proyecto de software
radicará en la identificación de las necesidades del negocio (definidas por la alta
dirección), así como la interacción con los usuarios funcionales para la recolección,
clasificación, identificación, priorización y especificación de los requisitos del software.
Arquitectura: La integración de infraestructura, desarrollo de aplicaciones, bases de
datos y herramientas gerenciales, requieren de capacidad y liderazgo para poder ser
conceptualizados y proyectados a futuro, solucionando los problemas de hoy. El rol
en el cual se delegan todas estas actividades es el del Arquitecto. El arquitecto de
software es la persona que añade valor a los procesos de negocios gracias a su
valioso aporte de soluciones tecnológicas. Lo principal en este punto es poner en
claro los aspectos lógicos y físicos de las salidas, modelos de organización y
representación de datos, entradas y procesos que componen el sistema,
considerando las bondades y limitaciones de los recursos disponibles en la
satisfacción de las pacificaciones brindadas para el análisis.
60
Programación: Implementar un diseño en código puede ser la parte más obvia del
trabajo de ingeniería de software, pero no necesariamente es la que demanda mayor
trabajo y ni la más complicada. La complejidad y la duración de esta etapa está
íntimamente relacionada al o a los lenguajes de programación utilizados, así como al
diseño previamente realizado.
Pruebas de software: Consiste en comprobar que el software realice correctamente
las tareas indicadas en la especificación del problema. Una técnica es probar por
separado cada módulo del software, y luego probarlo de manera integral, para así
llegar al objetivo. Se requiere poder probar el software con sujetos reales que puedan
evaluar el comportamiento del software con el fin de proporcionar realimentación a los
desarrolladores
Implementación: Una Implementación es la realización de una especificación técnica
o algoritmos con un programa, componente software, u otro sistema de cómputo.
Muchas especificaciones son dadas según a su especificación o un estándar.
Documentación: Es todo lo concerniente a la documentación del propio desarrollo del
software y de la gestión del proyecto, pasando por modelaciones, diagramas de casos
de uso, pruebas, manuales de usuario, manuales técnicos, etc; todo con el propósito
de eventuales correcciones, usabilidad, mantenimiento futuro y ampliaciones al
sistema.
Mantenimiento: Fase dedicada a mantener y mejorar el software para corregir errores
descubiertos e incorporar nuevos requisitos. Esto puede llevar más tiempo incluso
que el desarrollo del software inicial. Una pequeña parte de este trabajo consiste
eliminar errores (bugs); siendo que la mayor parte reside en extender el sistema para
incorporarle nuevas funcionalidades y hacer frente a su evolución. [47]
3.5.2 Definición de requisitos funcionales
En este apartado se detallan los requisitos funcionales de la página web y de la
aplicación móvil.
A continuación se detallan los requisitos funcionales de la página web:
61
Cualquier tipo de usuario (visitante, registrado o asesorado) puede acceder a la
sección de noticias y artículos, contactar con el entrenador por el formulario de
contacto y ojear las pestañas de Pregunta Frecuentes e informarse sobre el
asesoramiento online en la pestaña Asesoramiento.
El registro en la página web se llevará a cabo de forma sencilla e intuitiva,
necesitando confirmación de correo electrónico.
Solo los usuarios registrados tendrán un perfil y la posibilidad de modificarlo.
Solo los usuarios registrados en la web podrán realizar la compra del asesoramiento
online, ofreciéndole la posibilidad de registrarse al intentar comprar el asesoramiento
sin estar registrado.
Después de realizarse un pago, un usuario debe pasar a formar parte del grupo de los
asesorados de forma directa.
Los contenidos exclusivos para asesorados que engloban el plan nutricional y plan de
entrenamiento, técnica de los ejercicios y la descarga de la aplicación móvil, solo
serán accesibles por los usuarios que hayan comprado el asesoramiento y que, por
tanto, pertenezcan al grupo de los asesorados.
El administrador debe ser capaz de subir los documentos PDF que contienen los
planes nutricionales y los planes de entrenamiento de clientes a directorios accedidos
solamente por los usuarios asesorados, así como conocer los datos personales y
físicos de sus clientes.
Pasamos ahora a describir los requisitos funcionales de la aplicación móvil:
Solo los clientes asesorados podrán iniciar sesión en la aplicación móvil, además del
administrador.
Las conexiones con la base de datos del servidor remoto deberán de cerrarse
después de ejecutar cualquier sentencia SQL.
62
3.5.3 Definición de requisitos no funcionales
En este apartado se discutirán los requisitos no funcionales de la aplicación. Estos
corresponden a las características de funcionalidad, rendimiento, usabilidad, seguridad,
fiabilidad, compatibilidad y apariencia, además de requerimientos de software y hardware
necesarios para el correcto funcionamiento de la misma.
A continuación se muestran dichos requerimientos:
- Requerimientos de funcionalidad: Tanto la página web como la aplicación móvil serán
sometidas a una serie de comprobaciones para buscar posibles errores y a fallos con
el fin de corregirse. Por tanto, la página web se probará en distintos navegadores y
dispositivos (no olvidemos que tiene una plantilla responsive que permite la
adaptación a móviles) y la aplicación móvil se probará en distintos dispositivos
móviles con distintas características software (diferentes versiones Android) y con
distintas características hardware.
- Requerimientos de seguridad: En la página web, un usuario dispone de una
contraseña para iniciar sesión y en la aplicación móvil, un PIN secreto que se
configura dentro del perfil del usuario en la web. El pago del servicio de
asesoramiento se hará de forma segura, de forma que los datos bancarios de un
cliente no se pongan en peligro.
- Requerimientos de rendimiento: Se comprobará que tanto la página web como la
aplicación respondan correctamente, en cuanto a rendimiento se refiere, en los
diferentes dispositivos antes comentados, evitando largas esperas.
- Requerimientos de usabilidad: Para el correcto funcionamiento tanto de la página web
como de la aplicación móvil será necesaria la conectividad a Internet, para poder
conectarse con el servidor y poder enviar y recibir datos.
-
- Requerimientos de fiabilidad: La aplicación deberá ser capaz de responder ante
posibles errores además de enfrentarse a una supuesta sobrecarga de datos.
- Requerimientos de compatibilidad: La página web deberá ser compatible con distintos
navegadores y la aplicación móvil deberá ser compatible con distintos dispositivos
63
móviles con distintas características software y hardware. En nuestro caso, la página
web es compatible con todos los navegadores web y la aplicación móvil es compatible
con las plataformas Android iguales a superiores a la versión 2.3 GingerBread, que ha
sido la versión mínima elegida.
- Requerimientos de apariencia: Tanto la aplicación móvil como la página web tendrán
una interfaz simple e intuitiva para que sea sencilla de manejar por los usuarios. Por
tanto, los menús en la página web y los botones y opciones en la aplicación móvil
serán claramente visibles y entendibles por el usuario. Asi mismo, cada actividad en
la aplicación móvil debe llevar por defecto un elemento scroll vertical que permita al
usuario visualizar todo el contenido de la pantalla mostrada cuando se de el caso de
que la pantalla del dispositivo móvil sea más pequeña que la mostrada por la
actividad. Se añadirán también elementos scroll horizontales cuando se precise. Por
último, añadir que se mostrarán mensajes cuando un usuario realice cualquier acción
tanto en la página web como en la aplicación móvil.
- Requerimientos de software:
Para el acceso a la página web, lo único que se necesita es un navegador web.
En cuanto a la aplicación móvil, el requerimiento de software es la utilización de una
plataforma Android con una versión superior a la mínima exigida (Android 2.3),
posibilitando así que aproximadamente el 100% de los dispositivos con plataforma
Android puedan utilizar la aplicación.
El equipo de desarrollo utilizado para la realización este proyecto cuenta con el
sistema operativo Windows 8 de 64 bits y las herramientas software más importantes que
hemos utilizado están comentadas en los puntos 3.2 y 3.3 de esta memoria. Las
repasamos a continuación al completo:
PHP 5.6.8: Lenguaje de programación en el que se basa Joomla.
MySQL Server 5.6.24: El servidor de base de datos compartido por la página web y
la aplicación móvil. Puerto 3306.
Servidor Apache 2.4.12: El servidor web. Puerto 80.
Joomla v3.4: El gestor de contenidos que se usó para el desarrollo de la página web.
64
Plantilla responsive para Joomla: La plantilla adaptativa que se descargó para el
desarrollo de la página web. [48]
Extensiones de Joomla: Todas las extensiones utilizadas que nos han proporcionado
la funcionalidad deseada en la página web. (Están descritas en el apartado 3.2.9).
IDE Android Studio: El entorno de desarrollo escogido para la realización de la
aplicación móvil.
Java Development Kit 8: Necesario para instalar el IDE Android Studio y programar en
Java.
Librerías mysql-connector y mpandroidchart: Librerías para la conexión con MySQL
usando java y para la creación de gráficos de barras en la aplicación móvil.
SDK Tools 24: Librerías para el desarrollo de la aplicación móvil.
Software online para la creación iconos de apps online: Utilizada para la creación del
icono de la aplicación para móviles FitnessDeSemana. [49]
Paint y DIA: Utilizados para editar las imágenes y diagramas.
Microsoft Office Word 2007 y Proyect Professional 2013: Para la realización de la
memoria y para la planificación del proyecto y el diagrama de Gantt.
Servidor remoto de Hostinet: Este tendrá instalado PHP, MySQL, Apache y los
archivos Joomla de la página web. Aquí se alojará finalmente la página web y la base
de datos después de comprobar su funcionamiento en local.
- Requerimientos de hardware:
Para la página web no importa el hardware, siempre y cuando se cuente con un
navegador web en cualquier dispositivo y conexión a Internet. Para la aplicación móvil, el
único requisito hardware es un espacio en memoria de 5.01MB y conexión a Internet.
65
El ordenador usado para realizar este proyecto tiene las siguientes características:
Tipo de procesador: Intel Core i7-4702MQ con gráficos HD Intel 4600 (2,2 GHz, 6 MB
caché, 4 núcleos).
Memoria RAM: 16GB
Unidad de disco duro: SATA, 1 TB a 5400 rpm
Sistema Operativo: Windows 8.1 (64 Bits)
Dimensiones: 37,95 x 25,07 x 2,79 cm
Pantalla: BrightView de alta definición con retroiluminación LED de 39,6 cm (15,6
pulgadas) en diagonal (1366 x 768)
El dispositivo principal que se ha usado en el desarrollo del proyecto para ir
probando los avances ha sido un Samsung Galaxy s2 mini, cuyas características son las
siguientes:
Tipo de procesador: Snapdragon MSM8225 S4 Play 1.20GHz (2 núcleos)
Memoria RAM: 1GB
Memoria Interna: 8GB
Sistema Operativo: Android 4.1.2 (API 16)
Pantalla: TFT capacitiva, 800 x 480 pixeles
.
En el Anexo IV (Estudio económico y planificación) puede encontrarse un estudio
en el que se detalla la viabilidad del proyecto. En este estudio se ha tenido en cuenta el
tiempo, los recursos materiales y las tareas necesarias para la elaboración de este
proyecto. De este estudio podemos concluir que el proyecto es viable.
3.6 Diseño del sistema
3.6.1 Descripción de la arquitectura del sistema
La arquitectura del sistema es sencilla y pasamos a explicarla a continuación:
- Tendremos un servidor remoto con el dominio fitnessdesemana.es en el que se aloja
la página web, que tendrá su base de datos MySQL. Esta base de datos será
compartida también por la aplicación móvil FitnessDeSemana, que estará instalada
en el smartphone del cliente.
66
- La página web está adaptada para móviles ya que se ha usado una plantilla
responsive o adaptativa. El acceso a la página web se puede dar indistintamente
mediante un móvil o un ordenador con acceso a internet a través de un navegador
web.
La arquitectura final se puede observar en la Figura 3.22:
Figura 3.22 Arquitectura del sistema final [4] [5] [6] [7] [8]
El objetivo final de la página web es la captación de clientes que contraten el
asesoramiento online que ofrece el alumno como entrenador personal, es por ello que se
ha optado por contratar el pack de dominio y alojamiento web en una empresa como
Hostinet.
El objetivo de la aplicación móvil no es otro que permitir al usuario llevar un control
de su evolución corporal durante el periodo de asesoramiento para ver sus mejoras con
el paso del tiempo y permitir a su vez al administrador seguir esta evolución de sus
clientes.
67
Este proyecto supone una gran utilidad para el alumno en su función como
entrenador personal, ya que puede darse a conocer a través de la página web y llegar a
un mayor número de personas.
3.6.2 Diseño de la lógica de negocio
En este apartado comentaremos los casos de uso de la página web y de la
aplicación web desde los diferentes roles de usuarios.
3.6.2.1 Casos de uso página web
En la web existen tres roles de usuarios: Visitantes, Registrados y Asesorados.
Para entender los casos de uso explicamos los roles de los usuarios a continuación:
Un Visitante es cualquier persona que visite la web sin haber iniciado sesión.
Tanto un usuario Asesorado como Registrado son también Visitantes y pueden hacer
lo mismo que los Visitantes.
Todo lo que un usuario Registrado puede hacer también lo puede hacer un usuario
Asesorado, ya que un usuario Asesorado es también un usuario Registrado.
El usuario Registrado es solo un paso previo para la compra de asesoramiento, por
tanto es un equivalente a Visitante a nivel funcional, salvo por la opción de ver y editar
su perfil.
CASOS DE USO EN LA PÁGINA WEB
Nombre de la acción Leer artículo
Actor Visitante/Registrado/Asesorado
Acción realizada Leer un artículo
Prerrequisitos Estar en la página web en cualquier pestaña
Consecuencia Se accede al contenido del artículo
Pasos
Hacer click en “Artículos” en el menú principal
Hacer click en la categoría deseada
Hacer click en el título del artículo que se quiera leer
68
Nombre de la acción Comentar artículo
Actor Visitante/Registrado/Asesorado
Acción realizada Publicar un comentario en artículo
Prerrequisitos Estar dentro de un artículo
Consecuencia Se publica un comentario en el artículo (después de ser
revisado por el administrador si lo considera oportuno)
Pasos
Ir al final del artículo
Rellenar los campos donde dice “Escribir un comentario”
Hacer click en “Enviar”
Nombre de la acción Leer FAQ
Actor Visitante/Registrado/Asesorado
Acción realizada Leer Preguntas Frecuentes
Prerrequisitos Estar en la página web en cualquier pestaña
Consecuencia Se accede al contenido del artículo
Pasos Hacer click en “Preguntas Frecuentes” en el menú principal
Nombre de la acción Contactar
Actor Visitante/Registrado/Asesorado
Acción realizada Contactar con el entrenador/administrador
Prerrequisitos Estar en la página web en cualquier pestaña
Consecuencia Se accede al contenido del artículo
Pasos
Hacer click en “Contactar” en el menú principal
Hacer click en la pestaña “Formulario de contacto”
Rellenar el formulario
Hacer click en “Enviar”
69
Nombre de la acción Ir a red social
Actor Visitante/Registrado/Asesorado
Acción realizada Ir a red social del entrenador/administrador
Prerrequisitos Estar en la página web en cualquier pestaña
Consecuencia Se abre una nueva ventana en el navegador con el perfil social
del entrenador/administrador en la red social elegida
Pasos
Hacer click en el icono de la red social deseada dentro del
módulo “Mis redes sociales” de la parte superior derecha de la
página web
Nombre de la acción Buscar
Actor Visitante/Registrado/Asesorado
Acción realizada El usuario busca un artículo
Prerrequisitos Estar en cualquier pestaña de la página web
Consecuencia Aparecen los artículos con esas palabras clave
Pasos
Escribir en la parte superior derecha de la página web donde
dice “Escribir aquí”
Pulsar en “Buscar”.
Nombre de la acción Registro
Actor Visitante
Acción realizada El usuario se registra
Prerrequisitos Estar en la pestaña Inicio de la página web
No haber iniciado sesión
Consecuencia El usuario pasa al grupo Registered.
Pasos
Pulsar en Registrarse, en el módulo de login
Rellenar los datos y pulsar en “Registrarse”
Confirmar el email dándo click al enlace que se envía al correo
electrónico
70
Nombre de la acción Iniciar Sesión
Actor Visitante
Acción realizada El usuario inicia sesión
Prerrequisitos Haberse registrado
Consecuencia El usuario se autentica
Pasos Rellenar el usuario y contraseña dentro del módulo de login
Pulsar en “Iniciar Sesión”
Nombre de la acción Cerrar sesión
Actor Registrado/Asesorado
Acción realizada El usuario cierra sesión
Prerrequisitos Haber iniciado sesión
Consecuencia El usuario cierra su sesión actual.
Pasos Pulsar en “Cerrar sesión” en el módulo de login
Nombre de la acción Ver perfil
Actores Registrado/Asesorado
Acción realizada El usuario ve su perfil
Prerrequisitos Haber iniciado sesión.
Consecuencia El usuario visualiza sus datos en su perfil.
Pasos Pulsar en “Mi perfil” en el menú principal
Nombre de la acción Editar perfil
Actores Registrado/Asesorado
Acción realizada Edición de perfil
Prerrequisitos Haber iniciado sesión.
Consecuencia El usuario actualiza sus datos de perfil.
Pasos
Pulsar en “Mi perfil” en el menú principal
Pulsar en Editar -> Actualice su perfl
Editar al gusto
Pulsar en “Actualizar”
71
Nombre de la acción Comprar asesoramiento
Actor Registrado
Acción realizada El usuario compra el asesoramiento online
Prerrequisitos Haber iniciado sesión
Consecuencia El usuario pasa al grupo Asesoramiento.
Pasos
Pulsar en “Asesoramiento”, en el menú principal
Pulsar en “Comprar” en el servicio deseado
Seguir el asistente de compra
Rellenar los datos en Paypal y pulsar en pagar
Nombre de la acción Descargar plan de entrenamiento
Actor Asesorado
Acción realizada El usuario descarga su plan de entrenamiento
Prerrequisitos Haber iniciado sesión
El administrador ha subido el plan de entrenamiento
Consecuencia Se descarga el PDF que contiene el plan de entrenamiento
Pasos
Pulsar en “Mi perfil”, en el menú principal
Pulsar en “Mi entrenamiento” en el menú de asesorado
Localizar el archivo y pulsar en el título
Escribir la contraseña (el PIN Secreto) y darle a “Unlock”
Nombre de la acción Descargar plan nutricional
Actor Asesorado
Acción realizada El usuario descarga su plan nutricional
Prerrequisitos Haber iniciado sesión
El administrador ha subido el plan nutricional
Consecuencia Se descarga el PDF que contiene el plan nutricional
Pasos
Pulsar en “Mi perfil”, en el menú principal
Pulsar en “Mi plan nutricional” en el menú de asesorado
Localizar el archivo y pulsar en el título
Escribir la contraseña (el PIN Secreto) y darle a “Unlock”
72
Nombre de la acción Descargar aplicación Android
Actor Asesorado
Acción realizada El usuario descarga la aplicación móvil
Prerrequisitos Haber iniciado sesión
Consecuencia Se descarga el fichero apk
Pasos Estos están detallados en el Anexo II de esta memoria
Nombre de la acción Ver técnica de un ejercicio
Actor Asesorado
Acción realizada El usuario observa la ejecución de un ejercicio
Prerrequisitos Haber iniciado sesión
Consecuencia Se muestra un video con la ejecución del ejercicio
Pasos
Pulsar en “Mi perfil”, en el menú principal
Seleccionar la categoría del ejercicio en el menú de asesorado
Pulsar sobre el nombre del ejercicio
A continuación mostramos el diagrama de casos de uso de la página web:
Figura 3.23 Diagrama de casos de uso de la web
73
3.6.2.2 Casos de uso en la aplicación móvil
En la aplicación móvil solo vamos a tener dos posibles actores, el cliente
asesorado y el administrador. Al contrario que en el caso de la página web, donde el
administrador tenía una vista especial (back-end), aquí el administrador comparte la
aplicación con el usuario y accede a través de la pantalla inicial como el cliente.
Nombre de la acción Iniciar sesión
Actor Asesorado o Administrador
Acción realizada El usuario se autentica
Prerrequisitos Estar en la pantalla de login (la primera de la APP)
Usuario con pertenencia al grupo Asesoramiento
Consecuencia Se pasa al Panel de usuario o al Panel de Administración
Pasos Rellenar correctamente el usuario y el PIN Secreto.
Pulsar en el botón ENTRAR.
Nombre de la acción Añadir registro
Actor Asesorado
Acción realizada El usuario añade un nuevo registro
Prerrequisitos Estar en el Panel de Usuario
Consecuencia Se añade el registro
Pasos
Pulsar sobre la opción “Añadir nuevo registro”
Rellenar los datos del registro
Pulsar el botón AÑADIR.
Nombre de la acción Ver gráficos
Actor Asesorado
Acción realizada El usuario accede a sus gráficos de evolución
Prerrequisitos Estar en el Panel de Usuario
Consecuencia Visualización de los gráficos de barras
Pasos Pulsar sobre la opción “Ver gráficos de evolución”
Elegir el gráfico de barras deseado en la lista desplegable
74
Nombre de la acción Ir a la página web
Actor Asesorado
Acción realizada Lleva al usuario a la página web
Prerrequisitos Estar en el Panel de Usuario
Consecuencia Se abre la página web con el navegador predeterminado
Pasos Pulsar sobre la opción “Ir a la página web”
Nombre de la acción Borrar registro
Actor Asesorado
Acción realizada Borrar un registro
Prerrequisitos Estar en el Panel de Usuario
Consecuencia Se borra el registro seleccionado
Pasos
Pulsar sobre la opción “Eliminar un registro”
Seleccionar la fecha del registro en la lista desplegable
Pulsar sobre el botón ELIMINAR REGISTRO
Nombre de la acción Borrar todos los registros
Actor Asesorado
Acción realizada Eliminar todos los registros de un usuario
Prerrequisitos Estar en el Panel de Usuario
Consecuencia Se eliminan todos los registros de un usuario
Pasos Pulsar sobre la opción “Eliminar todos los registros guardados”
Confirmar pulsando “Si, estoy seguro”
Nombre de la acción Evolución de cliente
Actor Administrador
Acción realizada Ver los gráficos de barras de evolución de un cliente
Prerrequisitos Estar en el Panel de Administración
Consecuencia El administrador ve los gráficos de evolución del cliente
Pasos
Escribir el nombre del usuario
Pulsar sobre la opción “Ver evolución del usuario”
Seleccionar el gráfico deseado en la lista desplegable
75
Nombre de la acción Datos cliente
Actor Administrador
Acción realizada Listar los datos de un usuario
Prerrequisitos Estar en el Panel de Administración
Consecuencia Se abre una nueva pantalla donde se ven todos los datos de un
usuario, tanto personales como corporales
Pasos Escribir el nombre del usuario
Pulsar sobre la opción “Ver datos de usuario”
Nombre de la acción Alta asesoramiento
Actor Administrador
Acción realizada Da de alta como asesorado a un usuario
Prerrequisitos Estar en el Panel de Administración
Consecuencia El usuario se añade en el grupo Asesoramiento
Pasos Escribir el nombre del usuario
Pulsar sobre la opción “Dar de alta como asesorado”
Nombre de la acción Baja asesoramiento
Actor Administrador
Acción realizada Da de baja de asesorado a un usuario
Prerrequisitos Estar en el Panel de Administración
Consecuencia El usuario se borra del grupo Asesoramiento
Pasos Escribir el nombre del usuario
Pulsar sobre la opción “Dar de baja asesoramiento”
A continuación se incluye el diagrama de casos de uso de la aplicación móvil:
76
Figura 3.24 Diagrama de casos de uso aplicación móvil
3.6.3 Diseño de la lógica de datos
3.6.3.1 Joomla como diseñador de la base de datos
En este proyecto solo ha sido necesaria la creación de una tabla por parte del
alumno (la tabla evolución, que recoge el registro histórico de los datos corporales de un
usuario a lo largo de distintas fechas).
La instalación de Joomla y las extensiones utilizadas para cubrir la funcionalidad
del proyecto se encargan de la creación de las tablas necesarias y de sus
correspondientes relaciones.
Por ejemplo, con la instalación de Joomla ya se crea una tabla de los usuarios, ya
que para administrar Joomla se necesita la autenticación de un usuario que es el
administrador. Además, nos crean las tablas de contenido (artículos), categorías, grupos
de usuarios, mapeo de usuarios con el grupo al que pertenecen, etc.
77
Con la extensión Community Builder se nos crea una tabla adicional de usuarios donde
se recogen los datos del usuario de forma personalizada por nosotros. Así mismo,
cuando se instala la extensión de comercio electrónico HikaShop, se crean tablas que
guardan información de órdenes, pagos, precios, productos, categorías de productos, etc.
La extensión JU Download nos crea una tabla acerca de los documentos que subimos
(que en este caso son los planes nutricionales y de entrenamiento de los clientes).
Aunque el diseño no haya sido realizado por el alumno de forma manual, ha sido
imprescindible conocer los campos de cada tabla de la base de datos con el fin de poder
realizar a posteriori la aplicación para móviles Android, que hace uso de la misma base
de datos.
Las entidades y relaciones que representan las tablas dentro del proyecto se
comentan en el siguiente apartado, junto con los campos que contienen dichas tablas.
3.6.3.2 Tablas de la base de datos
TABLAS CREADAS AL INSTALAR JOOMLA:
- USERS: En esta tabla guardamos información básica de los usuarios, ya sean
registrados, asesorados o administradores, así como información sobre fechas
relacionadas con la actividad del usuario, si la cuenta del usuario está activa, etc.
78
USERS
Nombre Tipo Extra
id int Clave Primaria, AUTO-INCREMENT
name varchar
username varchar
email varchar
password varchar
block tinyint
sendEmail tinyint
registerDate datetime
lastVisitDate datetime
activation varchar
params mediumtext
lastResetTime datetime
resetCount int
otpKey varchar
otep varchar
requireReset tinyint
Tabla 3.1 Estructura tabla Users en BD
- USERGROUPS: En esta tabla guardamos los diferentes grupos de usuarios que
existen. En nuestro caso estará compuesta por los grupos Public (Visitante),
Registered (Usuario registrado) y Asesoramiento (Grupo de un usuario asesorado).
Como vemos, un grupo puede ser descendiente de otro. Por ejemplo, Asesoramiento
es un grupo hijo de Registered ya que para ser Asesorado hace falta ser Registered.
USERGROUPS
Nombre Tipo Extra
id int Clave Primaria, AUTO-INCREMENT
parentid int
lft int
rgt int
title varchar
Tabla 3.2 Estructura tabla Usergroups en BD
79
- USER_USERGROUP_MAP: Aquí se relacionan usuarios con grupos a los que
pertenecen. Un usuario puede pertenecer a varios grupos y un grupo contener a
varios usuarios.
USER_USERGROUP_MAP
Nombre Tipo Extra
user_id int Clave Primaria
Clave Ajena (id - users)
group_id int Clave Primaria
Clave Ajena (id – usergroups)
Tabla 3.3 Estructura tabla User_usergroup_map en BD
- VIEWLEVELS: En esta tabla se definen los permisos para los grupos de usuarios.
Estos permisos se guardan en forma de reglas asignadas a los grupos (rules).
VIEWLEVELS
Nombre Tipo Extra
id int Clave Primaria, AUTO-INCREMENT
title varchar
ordering int
rules varchar
Tabla 3.4 Estructura tabla Viewlevels en BD
- CATEGORIES: En esta tabla se definen las categorías de todo el contenido de la
página web. Recordemos que en Joomla cualquier contenido es un artículo. Vemos
que se guardan datos sobre el usuario que creó/modificó la categoría, los permisos
que se necesitan para acceder a ella, etc.
CATEGORIES
Nombre Tipo Extra
id int Clave Primaria, AUTO-INCREMENT
asset_id int
80
parent_id int
lft int
rgt int
level int
path varchar
extension varchar
title varchar
alias varchar
note varchar
description longtext
published tinyint
checked_out int
check_out_time datetime
access int Clave Ajena (id – viewlevels)
params mediumtext
metadesc varchar
metakey varchar
metadata varchar
created_user_id int Clave Ajena (id – users)
created_time datetime
modified_user_id int Clave Ajena (id – users)
modified_time datetime
hits int
language char
version int
Tabla 3.5 Estructura tabla Categories en BD
- CONTENT: En esta tabla se guarda el contenido, es decir, los artículos de Joomla.
Podemos ver que se guarda información sobre la categoría a la que pertenece, los
permisos para ver este artículo, qué usuario modificó/creó el artículo y cuando, etc.
CONTENT
Nombre Tipo Extra
id int Clave Primaria, AUTO-INCREMENT
asset_id int
81
title varchar
alias varchar
introtext longtext
fulltext longtext
state tinyint
catid int Clave Ajena (id – categories)
created datetime
created_by int Clave Ajena ( id – users)
created_by_alias varchar
modified datetime
modified_by int Clave Ajena (id – users)
checked_out int
check_out_time datetime
publish_up datetime
publish_down datetime
images mediumtext
urls mediumtext
attribs varchar
version int
ordering int
metakey mediumtext
metadesc mediumtext
access int Clave Ajena (id – viewlevels)
hits int
metadata mediumtext
featured tinyint
language char
Tabla 3.6 Estructura tabla Content en BD
TABLAS CREADAS POR COMMUNITY BUILDER:
- COMPROFILER: Esta tabla es una tabla extensión de la tabla Users. Gracias a la
creación de esta tabla podemos recopilar información adicional y personalizada de los
usuarios, cosa que no podemos hacer con la tabla Users.
82
COMPROFILER
Nombre Tipo Extra
id int Clave Primaria, AUTO-INCREMENT
user_id int Clave Ajena (id – users)
firstname varchar
middlename varchar
lastname varchar
hits int
message_last_sent datetime
message_number_sent int
avatar text
avatarapproved tinyint
canvas text
canvasapproved tinyint
approved tinyint
confirmed tinyint
lastupdatedate datetime
registeripaddr varchar
cbactivation varchar
banned tinyint
banneddate datetime
unbannedby int
bannedreason mediumtext
acceptedterms tinyint
cb_pinsecreto text
cb_nmovil int
cb_altura int
cb_peso text
cb_edad int
cb_objetivo text
cb_genero text
cb_porcentajegrasa text
cb_cintura text
Tabla 3.7 Estructura tabla Comprofiler en BD
83
TABLAS CREADAS POR HIKASHOP
- HIKASHOP_USER: Esta tabla es otra extensión de la tabla Users. ¿Por qué se utiliza
esta tabla? Simplemente porque HikaShop contempla varios roles de usuarios como
son asociados de negocio, que no son contemplados en Joomla por defecto y que no
se han usado para este proyecto. Así pues, HikaShop utiliza esta tabla para
establecer relaciones con otras entidades del comercio electrónico.
HIKASHOP_USER
Nombre Tipo Extra
user_id int Clave Primaria, AUTO-INCREMENT
user_cms_id int Clave Ajena (id - users)
user_email int Clave Ajena (email – users)
user_created decimal
Tabla 3.8 Estructura tabla Hikashop_user en BD
- HIKASHOP_CURRENCY: Tabla que guarda información sobre las monedas que se
van a usar en la plataforma de comercio electrónico, es decir, en las compras.
HIKASHOP_CURRENCY
Nombre Tipo Extra
currency_id int Clave Primaria, AUTO-INCREMENT
currency_symbol varchar
currency_code varchar
currency_format char
currency_name varchar
currency_published tinyint
currency_rate decimal
currency_locale text
currency_displated tinyint
currency_percent_fee decimal
currency_modified int
Tabla 3.9 Estructura tabla Hikashop_currency en BD
84
- HIKASHOP_CATEGORY: Esta tabla guarda las distintas categorías dentro del
comercio electrónico. Hablamos de categorías de productos en su mayoría.
HIKASHOP_CATEGORY
Nombre Tipo Extra
category_id int Clave Primaria, AUTO-INCREMENT
category_parent_id int
category_type varchar
category_name varchar
category_description text
category_published tinyint
category_ordering int
category_left int
category_right int
category_deph int
category_namekey varchar
category_created int
category_modified int
category_access varchar
Tabla 3.10 Estructura tabla Hikashop_category en BD
- HIKASHOP_PRODUCT: Tabla en la que se guardan los productos a la venta.
HIKASHOP_PRODUCT
Nombre Tipo Extra
product_id int Clave Primaria, AUTO-INCREMENT
product_parent_id int
product_name varchar
product_description text
product_quantity int
product_code varchar
product_published tinyint
product_hit int
product_created int
Tabla 3.11 Estructura tabla Hikashop_product en BD
85
- HIKASHOP_PRODUCT_CATEGORY: Tabla que relaciona productos con categorías,
un producto puede pertenecer a varias categorías y una categoría albergar muchos
productos.
HIKASHOP_PRODUCT_CATEGORY
Nombre Tipo Extra
product_category_id int Clave Primaria, AUTO-INCREMENT
category_id int Clave ajena (category_id –
hikashop_category)
product_id int Clave Ajena (product_id –
hikashop_product)
ordering int
Tabla 3.12 Estructura tabla Hikashop_product_category en BD
- HIKASHOP_PRICE: Esta tabla almacena todos los precios que se usan en el
comercio electrónico y los relaciona con los artículos para la venta y la moneda
usada.
HIKASHOP_PRICE
Nombre Tipo Extra
priced_id int Clave Primaria, AUTO-INCREMENT
price_currency_id int Clave Ajena (currency_id –
hikashop_currency)
price_product_id int Clave Ajena (product_id –
hikashop_product)
price_value decimal
price_min_quantity int
price_access varchar
price_site_id varchar
Tabla 3.13 Estructura tabla Hikashop_price en BD
- HIKASHOP_PAYMENT: Esta tabla guarda los medios de pago disponibles para los
clientes, así como si su uso requiere coste adicional, etc.
86
HIKASHOP_PAYMENT
Nombre Tipo Extra
payment_id int Clave Primaria, AUTO-INCREMENT
payment_name varchar
payment_description text
payment_images text
payment_params text
payment_type varchar
payment_ordering int
payment_published tinyint
payment_access varchar
payment_price decimal
Tabla 3.14 Estructura tabla Hikashop_payment en BD
- HIKASHOP_ORDER: Tabla que guarda los pedidos de los usuarios. Como vemos
guarda información sobre el usuario que realiza el pedido, la moneda, el método de
pago y el precio, entre otros.
HIKASHOP_ORDER
Nombre Tipo Extra
order_id int Clave Primaria, AUTO-INCREMENT
order_user_id int Clave Ajena (user_id – hikashop_users)
order_status varchar
order_type varchar
order_number varchar
order_created int
order_modified int
order_currency_id int Clave Ajena (currency_id –
hikashop_currency)
order_currency_info text
order_full_price tinyint
order_tax_info text
order_discount_code tinyint
order_discount_price tinyint
87
order_payment_id tinyint Clave Ajena (payment_id –
hikashop_payment)
order_payment_method datetime
order_payment_price varchar
Tabla 3.15 Estructura tabla Hikashop_order en BD
- HIKASHOP_ORDER_PRODUCT: Tabla que relaciona los pedidos con los artículos
que contiene, así como la cantidad de estos, el precio unitario y otros.
HIKASHOP_ORDER_PRODUCT
Nombre Tipo Extra
order_product_id int Clave Primaria, AUTO-INCREMENT
order_id int Clave Ajena (order_id –
hikashop_orders)
product_id int Clave Ajena ( product_id –
hikashop_product)
order_product_quantity int
order_product_name varchar
order_product_code varchar
order_product_price decimal
Tabla 3.16 Estructura tabla Hikashop_order_product en BD
- HIKASHOP_HISTORY: Histórico de los estados de un pedido. Un pedido puede estar
Created, Confirmed o Cancelled. Se guarda también el usuario que lo modificó.
HIKASHOP_HISTORY
Nombre Tipo Extra
history_id int Clave Primaria, AUTO-INCREMENT
history_order_id int Clave Ajena (order_id –
hikashop_orders)
history_created int
history_new_status varchar
history_reason text
history_type varchar
88
history_user_id id Clave Ajena (user_id – hikashop_user)
Tabla 3.17 Estructura tabla Hikashop_history en BD
TABLAS CREADAS POR JU DOWNLOAD:
- JU_DOWNLOAD_DOCUMENTS: Tabla en la que se guardan los documentos que se
suben a la plataforma. En nuestro caso estos son los ficheros PDF que contienen
tanto el entrenamiento de un usuario como el plan nutricional de este. Vemos que se
guarda información sobre el nombre, el icono, número de descargas, el usuario que lo
creó y modificó, el acceso al documento y la contraseña de descarga.
JU_DOWNLOAD_DOCUMENTS
Nombre Tipo Extra
id int Clave Primaria, AUTO-INCREMENT
asset_id int
tittle varchar
alias varchar
icon varchar
introtext mediumtext
version varchar
hits int
downloads int
created datetime
created by int Clave Ajena (id – users)
modified datetime
modified_by int Clave Ajena (id – users)
published tinyint
publish_up datetime
publish_down datetime
download_password varchar
access int Clave Ajena (id – viewlevels)
Tabla 3.18 Estructura tabla Ju_download_documents en BD
89
TABLAS CREADAS POR EL ALUMNO:
- EVOLUCIÓN: Tabla que guarda el registro histórico de los datos corporales de un
usuario asesorado. Esta tabla la usamos en la aplicación para móviles y la sacamos
en gráficos de barras ordenados por fechas. Recordemos que el username es único.
-
EVOLUCION
Nombre Tipo Extra
usuario varchar Clave Primaria
Clave Ajena (username – users)
peso float
porcentajegrasa float
cintura float
fecha date Clave Primaria
Tabla 3.19 Estructura tabla Evolucion en BD
3.6.3.3 Diagrama entidad/relación de la base de datos
En la Figura 3.25 se muestra el diagrama de relación entre las tablas. En las tablas solo
aparecen los atributos que son claves primarias y claves ajenas, los demás quedan
englobados en el campo “otroscampos” y son los demás campos que hemos visto arriba
en las tablas completas.
90
3.6.4 Diseño de las interfaces.
Las distintas interfaces de la página web están detalladas en el Anexo I de este
documento, así como la funcionalidad que ofrecen, con capturas que facilitan su
comprensión.
Así mismo, la descripción de las distintas interfaces que componen la aplicación
móvil para asesorados, con todas las funcionalidades que ofrecen se encuentran en el
Anexo III. Es recomendable leer ambos anexos antes de continuar con los siguientes
apartados.
3.6.5 Programación de la aplicación móvil FitnessDeSemana.
En este apartado vamos a explicar los distintos elementos que componen la
aplicación. En la tabla 3.20 se observa la correspondencia entre las distintas actividades
y los layouts de nuestro proyecto.
Figura 3.25 Diagrama E/R de la base de datos
91
TABLA DE RELACIÓN ACTIVIDAD-LAYOUT
ACTIVIDADES LAYOUTS
Login.java activity_login.xml
PanelUsuario.java activity_panel_usuario.xml
NuevoRegistro.java activity_nuevo_registro.xml
EvolucionUsuario.java activity_evolucion_usuario.xml
BorrarRegistro.java activity_borrar_registro.xml
PanelAdministrador.java activity_panel_administrador.xml
DatosUsuario.java activity_datos_usuario.xml
Tabla 3.20 Tabla de relación actividad-layout
3.6.5.1 Detalles importantes sobre la implementación
- Esta aplicación se basa en su totalidad en sentencias SQL entre la aplicación y el
servidor de bases de datos usando JDBC. Por tanto, en el fichero
AndroidManifest.xml ha sido necesario añadir el permiso para el acceso a la red
<uses-permission android:name="android.permission.INTERNET" />. Para poder usar
el driver JDBC hemos tenido que añadir la librería mysql-connector-3.0.17.
- Las conexiones a la base de datos, así como todas las operaciones sobre ella, no
se pueden realizar en el hilo principal. Por tanto, en nuestro proyecto se han usado
clases asíncronas. Estas clases extienden a la clase Asynctask, para poder realizar
las operaciones con la base de datos en hilos secundarios. En nuestras clases
asíncronas, hemos implementado el método doInBackground para realizar las
operaciones con las bases de datos en un nuevo hilo, y, en el caso de que estas
operaciones fueran consultas, se ha implementado también el método
onPostExecute, que actúa en el hilo principal, para analizar los resultados de estas
consultas y actuar en consecuencia.
- Para la utilización del elemento BarChart (gráfico de barras) se ha tenido que añadir
la librería mpandroidchartlibrary-2-2-4.
- Para las sesiones, lo único que se ha utilizado ha sido el paso del parámetro nombre
de usuario de una actividad a otra, a través de intents.
-
92
3.6.5.2 Clases de nuestra aplicación
Login.java
- Clase hacerLogin: La clase asíncrona en la que implementamos el login.
public class hacerLogin extends AsyncTask<String, Void, ResultSet> {
@Override
protected ResultSet doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement estado = conn.createStatement();
System.out.println("Conexion establecida");
String peticion = "SELECT id FROM fwr13_comprofiler WHERE id
IN (SELECT id FROM fwr13_users WHERE username='"+strings[0]+"')" +
" AND cb_pinsecreto='"+strings[1]+"' AND id=(SELECT
id FROM fwr13_user_usergroup_map WHERE user_id=" +
"(SELECT id FROM fwr13_users WHERE
username='"+strings[0]+"') AND group_id=10)";
ResultSet result = estado.executeQuery(peticion);
conn.close();
return result;
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
@Override
protected void onPostExecute(ResultSet result) {
try {
if (result != null) {
if (!result.next()) {
Toast toast = Toast.makeText(getApplicationContext(),
"¡DATOS INCORRECTOS O USUARIO SIN
ASESORAMIENTO CONTRATADO!", Toast.LENGTH_LONG);
toast.show();
} else {
Toast toast = Toast.makeText(getApplicationContext(),
"¡AUTENTICACIÓN CORRECTA!", Toast.LENGTH_SHORT);
toast.show();
int id=result.getInt(1);
if(id==593){
Intent intent_name = new Intent();
intent_name.setClass(getApplicationContext(),PanelAdministrador.class);
startActivity(intent_name);
}
93
else{
Intent intent_name = new Intent();
intent_name.setClass(getApplicationContext(),PanelUsuario.class);
Bundle bundle = new Bundle();
bundle.putString("username",editTextUsuario.getText().toString());
intent_name.putExtras(bundle);
startActivity(intent_name);
}
}
} else {
Toast toast = Toast.makeText(getApplicationContext(),
"¡ERROR DE RED!", Toast.LENGTH_LONG);
toast.show();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
En el método doInBackground realizamos una consulta comprobando que el
usuario introducido y el PIN Secreto son correctos y que dicho usuario se encuentra
dentro del grupo de los asesorados. Vemos que la función doInBackground tiene como
parámetros de entrada unos strings, que van a ser el usuario y el PIN secreto y devuelve
un objeto Resultset. En el método onPostExecute, analizamos el resultado de esta
consulta, pasando como parámetro el objeto Resultset que devuelve el doInBackground.
- Si se nos devuelve un null quiere decir que ha habido un problema de conexión, en
cuyo caso mostraremos una alerta indicando que ha habido un error de red.
- Si se nos devuelve un resultado vacio, quiere decir que no ha encontrado
correspondencia, es decir, o el usuario y pin secreto están mal o ese usuario no
pertenece al grupo de los asesorados. En este caso se muestra una alerta indicando
que los datos son incorrectos o el usuario no tiene contratado el asesoramiento.
- Si se nos devuelve un resultado, quiere decir que está correcto. Si la id del usuario
coincide con la id del administrador, se abre el Panel de Administrador
(PanelAdministrador.java) y si la id del usuario no es la id del administrador, pasamos
al Panel de Usuario (PanelUsuario.java), y pasamos como parámetro el nombre del
usuario. Nótese que la id 593 es la id del administrador de Joomla y que el grupo de
asesorados es el grupo con id 10.
94
La llamada a esta función se realiza en el hilo principal, pasando como parámetros
el usuario y el pin introducidos por el usuario. Se comprueba primero que el usuario ha
rellenado los campos de la pantalla.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
setContentView(R.layout.activity_login);
botonentrar = (Button) findViewById(R.id.botonentrar);
botonsalir = (Button) findViewById(R.id.botonsalir);
editTextUsuario = (EditText) findViewById(R.id.editTextUsuario);
editTextPin = (EditText) findViewById(R.id.editTextPin);
textViewBienvenido=(TextView)findViewById((R.id.textViewBienvenido))
;
botonentrar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String usuario = editTextUsuario.getText().toString();
String pin = editTextPin.getText().toString();
if(usuario.trim().equals("")|| pin.trim().equals("")){
Toast toast = Toast.makeText(getApplicationContext(),
"INTRODUCE EL USUARIO Y EL PIN", Toast.LENGTH_LONG);
toast.show();
}else{
new hacerLogin().execute(usuario, pin);
}}});
botonsalir.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}});
}
Utilizaremos también el método onResume para dejar en blanco los datos del
formulario cuando se recargue la actividad.
protected void onResume() {
editTextUsuario = (EditText) findViewById(R.id.editTextUsuario);
editTextPin = (EditText) findViewById(R.id.editTextPin);
editTextUsuario.setText("");
editTextPin.setText("");
super.onResume();
}
95
PanelUsuario.java
- Clase selectlastVisitdate: Usamos esta clase para mostrar la última fecha de visita de
un usuario, ya sea a la página web o a la aplicación móvil.
//Mostrar la última fecha de visita del usuario
public class selectlastVisitDate extends AsyncTask<String, Void,
ResultSet> {
@Override
protected ResultSet doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement estado = conn.createStatement();
System.out.println("Conexion establecida");
String peticion = "SELECT lastvisitDate FROM fwr13_users
WHERE username='"+strings[0]+"';";
ResultSet result = estado.executeQuery(peticion);
conn.close();
return result;
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
protected void onPostExecute(ResultSet result) {
String lastVisitDate="";
try {
if (result != null) {
if (!result.next()) {
Toast toast = Toast.makeText(getApplicationContext(),
"¡FECHA NO ENCONTRADA!", Toast.LENGTH_LONG);
toast.show();
} else {
result.beforeFirst();
while(result.next()){
lastVisitDate=result.getString(1);
}
textViewUltimoLogin= (TextView)
findViewById(R.id.textViewUltimoLogin);
//Para mostrarlo en formato DD/MM/AAAA HORA
String año=lastVisitDate.substring(0,4);
String mes=lastVisitDate.substring(5,7);
String dia=lastVisitDate.substring(8,10);
String hora=lastVisitDate.substring(11);
textViewUltimoLogin.setText(dia+"/"+mes+"/"+año+"
"+hora);
}
} else {
Toast toast = Toast.makeText(getApplicationContext(),
96
"¡ERROR DE RED!", Toast.LENGTH_LONG);
toast.show();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
- Clase actualizarlastvisitDate: Actualiza la fecha de visita del usuario por la fecha
actual (función NOW() de MySQL).
//Actualizar la fecha de última visita del usuario (También se cambia en
la web al hacer login)
public class actualizarlastvisitDate extends AsyncTask<String,Void,Void>
{
@Override
protected Void doInBackground(String... strings) {
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement st = con.createStatement();
String sql ="UPDATE fwr13_users SET lastVisitDate=NOW() WHERE
username='"+strings[0]+"'";
st.execute(sql);
con.close();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
- Clase eliminarTodosRegistros: Usamos esta clase para eliminar todos los registros de un usuario.
//Eliminar todos los registros de un usuario
public class eliminarTodosRegistros extends AsyncTask<String,Void,Void> {
@Override
protected Void doInBackground(String... strings) {
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement st = con.createStatement();
String sql = "DELETE FROM fwr13_evolucion WHERE
usuario='"+strings[0]+"';";
st.execute(sql);
con.close();
97
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
A continuación mostramos el método onCreate. Vemos que dependiendo de la
opción que elija un usuario en el menú se va a ejecutar una parte distinta del switch, que
lleva a otras actividades o realiza una acción determinada como borrar todos los registros
si se selecciona tal opción.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
//Forzamos a que se vea vertical
setContentView(R.layout.activity_panel_usuario);
textViewConectadoComo = (TextView)
findViewById(R.id.textViewConectadoComo);
final String nombreusuario =
getIntent().getExtras().getString("username");
textViewUltimoLogin= (TextView)
findViewById(R.id.textViewUltimoLogin);
textViewConectadoComo.setText("Conectado como: " + nombreusuario);
//Mostramos la última visita del usuario
selectlastVisitDate select = new selectlastVisitDate();
select.execute(nombreusuario);
//Definimos el RadioGroup y sus opciones en RadioButtons
botoncerrarsesion=(Button)findViewById(R.id.botoncerrarsesion);
radio = (RadioGroup) findViewById(R.id.radio);
añadir = (RadioButton) findViewById(R.id.añadir);
eliminar = (RadioButton) findViewById(R.id.eliminar);
evolucion = (RadioButton) findViewById(R.id.evolucion);
web = (RadioButton) findViewById(R.id.web);
eliminarultimo= (RadioButton) findViewById(R.id.eliminarRegistro);
//Actualizamos en la base de datos la última fecha de visita por la
actual
actualizarlastvisitDate actualizarfechavisita = new
actualizarlastvisitDate();
actualizarfechavisita.execute(nombreusuario);
View.OnClickListener list = new View.OnClickListener() {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.añadir:
Intent intent_name = new Intent();
intent_name.setClass(getApplicationContext(),
NuevoRegistro.class);
Bundle bundle = new Bundle();
98
bundle.putString("username", nombreusuario);
intent_name.putExtras(bundle);
startActivity(intent_name);
break;
case R.id.eliminar:
DialogInterface.OnClickListener
dialogClickListenerEliminarRegistros = new
DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int
choice) {
switch (choice) {
case DialogInterface.BUTTON_POSITIVE:
eliminarTodosRegistros
eliminarregistros=new eliminarTodosRegistros();
eliminarregistros.execute(nombreusuario);
Toast toast =
Toast.makeText(getApplicationContext(),
"¡REGISTROS ELIMINADOS CON
ÉXITO!", Toast.LENGTH_SHORT);
toast.show();
break;
case DialogInterface.BUTTON_NEGATIVE:
break;
}
}
};
AlertDialog.Builder builderEliminarRegistros = new
AlertDialog.Builder(PanelUsuario.this);
builderEliminarRegistros.setMessage("¡ATENCIÓN!
Perderás todos tus registros guardados, ¿Estás seguro?")
.setPositiveButton("Si, estoy
seguro",dialogClickListenerEliminarRegistros )
.setNegativeButton("Cancelar y volver",
dialogClickListenerEliminarRegistros).show();
break;
case R.id.evolucion:
Intent intent_name2 = new Intent();
intent_name2.setClass(getApplicationContext(),
EvolucionUsuario.class);
Bundle bundle2 = new Bundle();
bundle2.putString("username", nombreusuario);
intent_name2.putExtras(bundle2);
startActivity(intent_name2);
break;
case R.id.web:
Uri uriUrl =
Uri.parse("http://www.fitnessdesemana.es");
Intent intent = new Intent(Intent.ACTION_VIEW,
uriUrl);
startActivity(intent);
break;
case R.id.eliminarRegistro:
Intent intent_name3 = new Intent();
intent_name3.setClass(getApplicationContext(),
99
BorrarRegistro.class);
Bundle bundle3 = new Bundle();
bundle3.putString("username", nombreusuario);
intent_name3.putExtras(bundle3);
startActivity(intent_name3);
break;
}
}
};
añadir.setOnClickListener(list);
eliminar.setOnClickListener(list);
evolucion.setOnClickListener(list);
web.setOnClickListener(list);
eliminarultimo.setOnClickListener(list);
botoncerrarsesion.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
Adicionalmente vamos a usar el método onResume para borrar la opción
seleccionada anterior del RadioButton al recargar la actividad.
protected void onResume() {
radio.clearCheck();
super.onResume();
}
NuevoRegistro.java
- Clase selectUltimaFecha: Usamos esta clase para mostrar la última fecha en la que
un usuario añadió un registro.
//Sacamos la fecha más reciente de los registros del usuario
public class selectUltimaFecha extends AsyncTask<String, Void, ResultSet>
{
@Override
protected ResultSet doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement estado = conn.createStatement();
System.out.println("Conexion establecida");
100
String peticion = "SELECT fecha FROM fwr13_evolucion WHERE
fecha IN(SELECT max(fecha) FROM fwr13_evolucion WHERE
usuario='"+strings[0]+"')";
ResultSet result = estado.executeQuery(peticion);
conn.close();
return result;
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
protected void onPostExecute(ResultSet result) {
String ultimafecha="";
textViewUltimaFecha =
(TextView)findViewById(R.id.textViewUltimaFecha);
try {
if (result != null) {
if (!result.next()) {
textViewUltimaFecha.setText("No hay registros
previos");
} else {
ultimafecha=result.getDate(1).toString();
String año=ultimafecha.substring(0,4);
String mes=ultimafecha.substring(5,7);
String dia=ultimafecha.substring(8,10);
textViewUltimaFecha.setText("Último registro añadido:
"+dia+"/"+mes+"/"+año);
}
} else {
Toast toast = Toast.makeText(getApplicationContext(),
"¡ERROR DE RED!", Toast.LENGTH_LONG);
toast.show();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
- Clase insertarRegistro: Usamos esta clase para insertar un registro de un usuario.
También actualizamos los datos corporales del usuario en su perfil.
//Insertamos los datos en la tabla fwr13_evolución
public class insertarRegistro extends AsyncTask<String, Void, Void> {
@Override
protected Void doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement st = conn.createStatement();
101
System.out.println("Conexion establecida");
String sql = "INSERT INTO fwr13_evolucion (`usuario`, `peso`,
`porcentajegrasa`, `cintura`, `fecha`) VALUES " +
"('"+strings[0]+"', '"+strings[1]+"',
'"+strings[2]+"', '"+strings[3]+"', '"+strings[4]+"');";
String sql2="UPDATE fwr13_comprofiler SET
cb_peso='"+strings[1]+"',cb_porcentajegrasa='"+strings[2]+"'," +
"cb_cintura='"+strings[3]+"' WHERE user_id IN (SELECT
id FROM fwr13_users WHERE username='"+strings[0]+"')";
st.execute(sql);
st.execute(sql2);
conn.close();
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
}
A continuación mostramos el método onCreate, en el que se usan las clases
explicadas anteriormente.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_nuevo_registro);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
//Forzamos a que se vea vertical
editTextPeso = (EditText) findViewById(R.id.editTextPeso);
editTextPorcentajeGrasa = (EditText)
findViewById(R.id.editTextPorcentajeGrasa);
editTextContornoCintura = (EditText)
findViewById(R.id.editTextContornoCintura);
editTextFecha = (EditText) findViewById(R.id.editTextFecha);
botonañadir = (Button) findViewById(R.id.botonañadir);
botonatras = (Button) findViewById(R.id.botonatras);
textViewUltimaFecha = (TextView)
findViewById(R.id.textViewUltimaFecha);
final String nombreusuario =
getIntent().getExtras().getString("username");
selectUltimaFecha ultimaFecha=new selectUltimaFecha();
ultimaFecha.execute(nombreusuario);
botonañadir.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String peso = editTextPeso.getText().toString();
String pgrasa = editTextPorcentajeGrasa.getText().toString();
String contornocintura =
editTextContornoCintura.getText().toString();
String fecha = editTextFecha.getText().toString();
if (peso.trim().equals("") || pgrasa.trim().equals("") ||
102
contornocintura.trim().equals("") || fecha.trim().equals("")) {
Toast toast = Toast.makeText(getApplicationContext(),
"RELLENA TODOS LOS CAMPOS", Toast.LENGTH_LONG);
toast.show();
} else {
insertarRegistro insertar = new insertarRegistro();
insertar.execute(nombreusuario,peso,pgrasa,contornocintura,fecha);
Toast toast = Toast.makeText(getApplicationContext(),
"REGISTRO AÑADIDO CON ÉXITO",
Toast.LENGTH_SHORT);
toast.show();
//Limpiar campos
editTextPeso.setText("");
editTextPorcentajeGrasa.setText("");
editTextContornoCintura.setText("");
editTextFecha.setText("");
//Actualizar fecha del último registro
selectUltimaFecha ultimaFecha=new selectUltimaFecha();
ultimaFecha.execute(nombreusuario);
}
}
});
botonatras.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
EvolucionUsuario.java
- Clase selectEvolucion: Esta clase implementa el gráfico de barras correspondiente.
public class selectEvolucion extends AsyncTask<String, Void,
ResultSet> {
@Override
protected ResultSet doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,
DatosMySQL.usuario, DatosMySQL.pass);
Statement estado = conn.createStatement();
System.out.println("Conexion establecida");
String peticion = "SELECT "+strings[1]+", fecha FROM
`fwr13_evolucion` WHERE usuario='"+strings[0]+"' ORDER BY fecha";
ResultSet result = estado.executeQuery(peticion);
conn.close();
return result;
} catch (SQLException e) {
e.printStackTrace();
103
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
protected void onPostExecute(ResultSet result) {
try {
if (result != null) {
if (!result.next()) {
Toast toast =
Toast.makeText(getApplicationContext(), "¡REGISTROS NO ENCONTRADOS!",
Toast.LENGTH_LONG);
toast.show();
} else {
ArrayList<Float> datos = new ArrayList<Float>();
ArrayList<String> fechas = new
ArrayList<String>();
result.beforeFirst();//CURSOR ARRIBA
while (result.next()) {
datos.add(result.getFloat(1));
String fecha=result.getDate(2).toString();
String año=fecha.substring(2,4); //En la
gráfica año en 2 dígitos
String mes=fecha.substring(5,7);
String dia=fecha.substring(8,10);
fechas.add(dia+"/"+mes+"/"+año);
}
chart = (BarChart) findViewById(R.id.chart);
ArrayList<IBarDataSet> dataSets = null;
ArrayList<BarEntry> valueSet1 = new ArrayList<>();
for (int i = 0; i < datos.size(); i++) {
float datoi = datos.get(i);
BarEntry v1e1 = new BarEntry(datoi, i);
valueSet1.add(v1e1);
}
switch (columna) {
case "peso":
BarDataSet barDataSet1 = new
BarDataSet(valueSet1, "Peso");
barDataSet1.setColor(Color.rgb(0, 155,
0)); // Color verde
dataSets = new ArrayList<>();
dataSets.add(barDataSet1);
BarData data = new BarData(fechas,
dataSets);
chart.setData(data);
chart.setDescription(null); //No quiero
descripción, se ve arriba en la selección
chart.invalidate();
chart.setVisibility(View.VISIBLE);
break;
case "porcentajegrasa":
BarDataSet barDataSet2 = new
BarDataSet(valueSet1, "Porcentaje de grasa");
barDataSet2.setColor(Color.rgb(0, 0,
155)); //Color azul
dataSets = new ArrayList<>();
dataSets.add(barDataSet2);
BarData data2 = new BarData(fechas,
104
dataSets);
chart.setData(data2);
chart.setDescription(null);
chart.invalidate();
chart.setVisibility(View.VISIBLE);
break;
case "cintura":
BarDataSet barDataSet3 = new
BarDataSet(valueSet1, "Contorno de cintura");
barDataSet3.setColor(Color.rgb(238, 54,
66));
dataSets = new ArrayList<>();
dataSets.add(barDataSet3);
BarData data3 = new BarData(fechas,
dataSets);
chart.setData(data3);
chart.setDescription(null);
chart.invalidate();
chart.setVisibility(View.VISIBLE);
break;
}
}
} else {
Toast toast = Toast.makeText(getApplicationContext(),
"¡ERROR DE RED!", Toast.LENGTH_LONG);
toast.show();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
A continuación se muestra el método onCreate, que corre el hilo principal. Lo que
se hace es pasar el dato que el usuario quiere ver (y que elije en la lista desplegable
spinner) y lo pasa a la clase asíncrona selectEvolucion para que construya el gráfico de
barras de dicho dato corporal.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_evolucion_usuario);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
//FORZAR HORIZONTAL
spinner = (Spinner) findViewById(R.id.spinner);
List<String> listaopciones = new ArrayList<String>();
listaopciones.add("Evolución del peso corporal (Kg)");
listaopciones.add("Evolución del porcentaje de grasa ");
listaopciones.add("Evolución del contorno de cintura (cm)");
ArrayAdapter<String> Adaptador = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, listaopciones);
Adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdow
n_item);
spinner.setAdapter(Adaptador);
105
spinner.setOnItemSelectedListener(new
AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int
position, long id) {
final String nombreusuario =
getIntent().getExtras().getString("username");
switch (position) {
case 0:
selectEvolucion peso = new selectEvolucion();
columna="peso";
peso.execute(nombreusuario,columna);
break;
case 1:
selectEvolucion pg = new selectEvolucion();
columna="porcentajegrasa";
pg.execute(nombreusuario,columna);
break;
case 2:
selectEvolucion sc = new selectEvolucion();
columna="cintura";
sc.execute(nombreusuario,columna);
break;
}
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
//Se deja vacio, si no se selecciona nada, que no ocurra nada
}
});
}
BorraRegistro.java
- Clase selectFecha: Usamos esta clase asícrona para mostrar en la lista desplegable
todas las fechas en las que el usuario añadió un registro.
//Seleccionamos las fechas de registro de un usuario y las volcamos en la
lista desplegable
public class selectFecha extends AsyncTask<String, Void, ResultSet> {
@Override
protected ResultSet doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,
DatosMySQL.usuario, DatosMySQL.pass);
Statement estado = conn.createStatement();
System.out.println("Conexion establecida");
String peticion = "SELECT fecha FROM `fwr13_evolucion` WHERE
usuario='"+strings[0]+"' ORDER BY fecha";
ResultSet result = estado.executeQuery(peticion);
conn.close();
106
return result;
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
protected void onPostExecute(ResultSet result) {
List<String> listaopciones = new ArrayList<String>();
try {
if (result != null) {
if (!result.next()) {
Toast toast = Toast.makeText(getApplicationContext(),
"¡SIN REGISTROS!", Toast.LENGTH_LONG);
toast.show();
} else {
result.beforeFirst();//CURSOR ARRIBA
while (result.next()) {
String fecha=result.getDate(1).toString();
String año=fecha.substring(0,4);
String mes=fecha.substring(5,7);
String dia=fecha.substring(8,10);
fecha=(dia+"/"+mes+"/"+año);
listaopciones.add(fecha);
}
spinnerfechas = (Spinner)
findViewById(R.id.spinnerfechas);
ArrayAdapter<String> Adaptador = new
ArrayAdapter<String>(getApplicationContext(),
R.layout.formato_spinner, listaopciones);
Adaptador.setDropDownViewResource(R.layout.formato_spinner);
spinnerfechas.setAdapter(Adaptador);
}
} else {
Toast toast = Toast.makeText(getApplicationContext(),
"¡ERROR DE RED!", Toast.LENGTH_LONG);
toast.show();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
- Clase eliminarUnRegistro: Esta clase asíncrona se usa para borrar un determinado
registro.
//Eliminar un registro, le pasamos el usuario y la fecha
public class eliminarUnRegistro extends AsyncTask<String,Void,Void> {
@Override
107
protected Void doInBackground(String... strings) {
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement st = con.createStatement();
String sql = "DELETE FROM fwr13_evolucion WHERE
usuario='"+strings[0]+"' AND fecha='"+strings[1]+"';";
st.execute(sql);
con.close();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
Ahora mostramos el método onCreate, lo único que hace es recoger el nombre de
usuario que está conectado, mostrar las fechas de registro de un usuario en la lista
desplegable y borrar la seleccionada al pulsar el botón.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_borrar_registro);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
//Forzamos a que se vea vertical
selectFecha fecha = new selectFecha();
botonborrarregistros = (Button)
findViewById(R.id.botoneliminarregistro);
botonvolveratras = (Button) findViewById(R.id.botonvolveratras);
spinnerfechas = (Spinner) findViewById(R.id.spinnerfechas);
final String nombreusuario =
getIntent().getExtras().getString("username");
fecha.execute(nombreusuario);
botonborrarregistros.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//Eliminamos el registro
eliminarUnRegistro eliminar =new eliminarUnRegistro();
String fechaborrado=spinnerfechas.getSelectedItem().toString();
String dia=fechaborrado.substring(0,2);
String mes=fechaborrado.substring(3,5);
String año=fechaborrado.substring(6,10);
fechaborrado=(año+"/"+mes+"/"+dia);
eliminar.execute(nombreusuario,fechaborrado);
//Actualizamos la lista desplegable después del borrado
selectFecha fecha1=new selectFecha();
fecha1.execute(nombreusuario);
Toast toast = Toast.makeText(getApplicationContext(), "REGISTRO
BORRADO CON ÉXITO", Toast.LENGTH_LONG);
108
toast.show();
}});
botonvolveratras.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
PanelAdministrador.java
- Clase altaAsesoramiento: Esta clase sirve para dar de alta como asesorado a un
usuario, es decir, añadirle al grupo 10 en la base de datos.
//Añade el grupo 10 (asesoramiento) a un usuario
public class altaAsesoramiento extends AsyncTask<String, Void, Void> {
@Override
protected Void doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement st = conn.createStatement();
System.out.println("Conexion establecida");
String sql = "INSERT INTO fwr13_user_usergroup_map
(`user_id`, `group_id`) SELECT id,'10' " +
"FROM fwr13_users WHERE username='"+strings[0]+"'";
st.execute(sql);
conn.close();
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
}
- Clase bajaAsesoramiento: Esta clase sirve para dar de baja a un usuario como
asesorado, borrando su nombre del grupo de los asesorados. (Quitarle la asociación
con el grupo 10).
//Elimina el grupo 10 (asesoramiento) a un usuario
public class bajaAsesoramiento extends AsyncTask<String, Void, Void> {
109
@Override
protected Void doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement st = conn.createStatement();
System.out.println("Conexion establecida");
String sql = "DELETE FROM fwr13_user_usergroup_map WHERE
group_id='10' AND user_id IN " +
"(SELECT id FROM fwr13_users WHERE
username='"+strings[0]+"');";
st.execute(sql);
conn.close();
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
}
A continuación se detalla el método onCreate, que diseña el menú de opciones e
implementa los distintos casos del menú.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_panel_administrador);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
//Forzamos a que se vea vertical
//Definimos el RadioGroup y sus opciones en RadioButtons
radio = (RadioGroup) findViewById(R.id.radio);
evolucion = (RadioButton) findViewById(R.id.evolucion);
datosregistro = (RadioButton) findViewById(R.id.datosregistro);
altaasesoramiento = (RadioButton)
findViewById(R.id.altaasesoramiento);
bajaasesoramiento = (RadioButton)
findViewById(R.id.bajaasesoramiento);
editTextNombreUsuario=(EditText)findViewById(R.id.editTextNombreUsuario);
View.OnClickListener list = new View.OnClickListener() {
@Override
public void onClick(View view) {
String
nombreusuario=editTextNombreUsuario.getText().toString();
switch (view.getId()) {
case R.id.evolucion:
Intent intent_name = new Intent();
intent_name.setClass(getApplicationContext(),
EvolucionUsuario.class);
Bundle bundle = new Bundle();
110
bundle.putString("username", nombreusuario);
intent_name.putExtras(bundle);
startActivity(intent_name);
break;
case R.id.datosregistro:
Intent intent_name2 = new Intent();
intent_name2.setClass(getApplicationContext(),DatosUsuario.class);
Bundle bundle2 = new Bundle();
bundle2.putString("username",nombreusuario);
intent_name2.putExtras(bundle2);
startActivity(intent_name2);
break;
case R.id.altaasesoramiento:
altaAsesoramiento alta = new altaAsesoramiento();
alta.execute(nombreusuario);
Toast toast = Toast.makeText(getApplicationContext(),
"¡ALTA DE ASESORAMIENTO REALIZADA!",
Toast.LENGTH_LONG);
toast.show();
break;
case R.id.bajaasesoramiento:
bajaAsesoramiento baja = new bajaAsesoramiento();
baja.execute(nombreusuario);
Toast toast2 =
Toast.makeText(getApplicationContext(),
"¡BAJA DE ASESORAMIENTO REALIZADA!",
Toast.LENGTH_LONG);
toast2.show();
break;
}
}
};
evolucion.setOnClickListener(list);
altaasesoramiento.setOnClickListener(list);
bajaasesoramiento.setOnClickListener(list);
datosregistro.setOnClickListener(list);
}
Adicionalmente, utilizamos el método onResume para borrar la marca de la
selección anterior del menú, así como el campo en el que el administrador introduce el
nombre del usuario al que le afecta la acción cada vez que la actividad se reinicie.
protected void onResume() {
editTextNombreUsuario=(EditText)findViewById(R.id.editTextNombreUsuario);
editTextNombreUsuario.setText(""); //Para borrar contenido anterior
radio = (RadioGroup) findViewById(R.id.radio);
radio.clearCheck(); //Para deseleccionar las opciones del radiobutton
super.onResume();
}
111
DatosUsuario.java
- Clase selectDatosUsuario: Esta clase asíncrona nos permite mostrar los datos de un
usuario, tanto los que pertenecen a la información de contacto como sus datos de
asesorado.
//Método para mostrar los datos de un usuario en pantalla (tablas users y
comprofiler)
public class selectDatosUsuario extends AsyncTask<String, Void,
ResultSet> {
@Override
protected ResultSet doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement estado = conn.createStatement();
System.out.println("Conexion establecida");
String peticion = "SELECT
name,cb_edad,cb_genero,cb_altura,cb_peso,cb_porcentajegrasa,cb_cintura,cb
_objetivo" +
",email,cb_nmovil,cb_pinsecreto,lastVisitDate,registerDate FROM
fwr13_users INNER JOIN fwr13_comprofiler " +
"ON fwr13_users.id=fwr13_comprofiler.user_id WHERE
fwr13_users.id IN (SELECT id FROM fwr13_users WHERE
username='"+strings[0]+"') " +
"AND fwr13_comprofiler.user_id IN (SELECT id FROM
fwr13_users WHERE username='"+strings[0]+"');";
ResultSet result = estado.executeQuery(peticion);
conn.close();
return result;
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
protected void onPostExecute(ResultSet result) {
int cb_altura=0, cb_edad=0, cb_nmovil=0;
String name="", cb_genero="",
cb_peso="",cb_porcentajegrasa="",cb_cintura="",
cb_objetivo="",email="",cb_pinsecreto="",lastVisitDate="",registerDate=""
;
textViewDatos = (TextView)findViewById(R.id.textViewDatos);
textViewNombre = (TextView) findViewById(R.id.textViewNombre);
textViewEdad = (TextView)findViewById(R.id.textViewEdad);
textViewGenero = (TextView)findViewById(R.id.textViewGenero);
textViewAltura = (TextView)findViewById(R.id.textViewAltura);
textViewPeso = (TextView)findViewById(R.id.textViewPeso);
textViewPorcentajeGrasa = (TextView)
112
findViewById(R.id.textViewPorcentajeDeGrasa);
textViewContornoCintura = (TextView)
findViewById(R.id.textViewContornoCintura);
textViewObjetivo = (TextView)findViewById(R.id.textViewObjetivo);
textViewEmail = (TextView) findViewById(R.id.textViewEmail);
textViewMovil = (TextView) findViewById(R.id.textViewMovil);
textViewPIN = (TextView) findViewById(R.id.textViewPIN);
textViewUltimaVisita= (TextView)
findViewById(R.id.textViewUltimaVisita);
textViewFechaRegistro = (TextView)
findViewById(R.id.textViewFechaRegistro);
textViewGrupo = (TextView)findViewById(R.id.textViewGrupo);
try {
if (result != null) {
if (!result.next()) {
Toast toast = Toast.makeText(getApplicationContext(),
"¡USUARIO INCORRECTO!", Toast.LENGTH_LONG);
toast.show();
} else {
Toast toast = Toast.makeText(getApplicationContext(),
"¡DATOS ENCONTRADOS!", Toast.LENGTH_SHORT);
toast.show();
result.beforeFirst();
while(result.next()){
name=result.getString(1);
cb_edad=result.getInt(2);
cb_genero=result.getString(3);
cb_altura=result.getInt(4);
cb_peso=result.getString(5);
cb_porcentajegrasa=result.getString(6);
cb_cintura=result.getString(7);
cb_objetivo=result.getString(8);
email=result.getString(9);
cb_nmovil=result.getInt(10);
cb_pinsecreto=result.getString(11);
lastVisitDate=result.getString(12);
registerDate=result.getString(13);
}
String alturastring=String.valueOf(cb_altura);
String edadstring=String.valueOf(cb_edad);
String movilstring=String.valueOf(cb_nmovil);
//Asignamos los valores a los textView
textViewNombre.setText("Nombre: "+name);
textViewEdad.setText("Edad: "+edadstring+" años");
textViewGenero.setText("Sexo: "+cb_genero);
textViewAltura.setText("Altura: "+cb_altura+" cm");
textViewPeso.setText("Peso: "+cb_peso+" Kg");
textViewPorcentajeGrasa.setText("Porcentaje graso:
"+cb_porcentajegrasa+" %");
textViewContornoCintura.setText("Contorno de cintura:
"+cb_cintura+" cm");
textViewObjetivo.setText("Objetivo: "+cb_objetivo);
textViewEmail.setText("Email: "+email);
textViewMovil.setText("Nº Móvil: "+cb_nmovil);
textViewPIN.setText("PIN: "+cb_pinsecreto);
textViewUltimaVisita.setText("Ultima visita:
"+lastVisitDate);
textViewFechaRegistro.setText("Fecha de registro:
"+registerDate);
113
//Hacemos los textView visibles
textViewNombre.setVisibility(View.VISIBLE);
textViewEdad.setVisibility(View.VISIBLE);
textViewGenero.setVisibility(View.VISIBLE);
textViewAltura.setVisibility(View.VISIBLE);
textViewPeso.setVisibility(View.VISIBLE);
textViewPorcentajeGrasa.setVisibility(View.VISIBLE);
textViewContornoCintura.setVisibility(View.VISIBLE);
textViewObjetivo.setVisibility(View.VISIBLE);
textViewEmail.setVisibility(View.VISIBLE);
textViewMovil.setVisibility(View.VISIBLE);
textViewPIN.setVisibility(View.VISIBLE);
textViewUltimaVisita.setVisibility(View.VISIBLE);
textViewFechaRegistro.setVisibility(View.VISIBLE);
}
} else {
Toast toast = Toast.makeText(getApplicationContext(),
"¡ERROR DE RED!", Toast.LENGTH_LONG);
toast.show();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
- Clase selectGrupo: Esta clase sirve para mostrar el grupo al que pertenece un
usuario. Si pertenece a varios grupos siempre se muestra el grupo con más
privilegios. Si es asesorado, se mostraré Asesoramiento, si es registrado Registered.
/**Extrae el grupo al que pertenece el usuario (El max es porque el grupo
10 es el de asesoramiento
* y el 2 es registrado. Es decir un usuario asesorado tendrá una fila
con valor 2 y otra 10
* ya que para ser asesorado hay que estar registrado previamente.
**/
public class selectGrupo extends AsyncTask<String, Void, ResultSet> {
@Override
protected ResultSet doInBackground(String... strings) {
try {
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn =
DriverManager.getConnection(DatosMySQL.servidorybasededatos,DatosMySQL.us
uario,DatosMySQL.pass);
Statement estado = conn.createStatement();
System.out.println("Conexion establecida");
String peticion = "SELECT title FROM fwr13_usergroups WHERE
id IN (SELECT MAX(group_id) " +
"FROM fwr13_user_usergroup_map WHERE user_id
IN(SELECT id FROM fwr13_users WHERE username='"+strings[0]+"'))";
ResultSet result = estado.executeQuery(peticion);
conn.close();
return result;
114
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return null;
}
protected void onPostExecute(ResultSet result) {
String grupo="";
textViewGrupo = (TextView)findViewById(R.id.textViewGrupo);
try {
if (result != null) {
if (!result.next()) {
Toast toast = Toast.makeText(getApplicationContext(),
"¡USUARIO INCORRECTO!", Toast.LENGTH_LONG);
toast.show();
} else {
result.beforeFirst();
while(result.next()) {
grupo = result.getString(1);
textViewGrupo.setText("Grupo: " + grupo);
textViewGrupo.setVisibility(View.VISIBLE);
}
}
} else {
Toast toast = Toast.makeText(getApplicationContext(),
"¡ERROR DE RED!", Toast.LENGTH_LONG);
toast.show();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
El método onCreate es muy simple, simplemente es una llamada a ambas clases
para que realicen sus consultas en segundo plano y muestren en pantalla los datos
obtenidos.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
setContentView(R.layout.activity_datos_usuario);
final String nombreusuario =
getIntent().getExtras().getString("username");
selectDatosUsuario select1=new selectDatosUsuario();
selectGrupo select2=new selectGrupo();
select1.execute(nombreusuario);
select2.execute(nombreusuario);
}
115
4 RESULTADOS Y DISCUSIÓN
El objetivo es demostrar el correcto funcionamiento de ambas aplicaciones en
diferentes navegadores y dispositivos, y posteriormente, unas pruebas de funcionalidad.
Al final encontramos una encuesta realizada a usuarios que han probado tanto la página
web como la aplicación para dispositivos móviles.
4.1 Navegación por la web desde distintos navegadores
Para las pruebas de navegación hemos elegido los tres navegadores web más
usados: Google Chrome, Mozilla Firefox y Opera. Después de probar la página web en
estos navegadores, observamos que en Chrome y Firefox el resultado es exactamente el
mismo (Figura 4.1), mientras que en Opera hay una diferencia no significativa en el estilo
de las letras del menú y el título, lo demás se ve igual. (Figura 4.2).
Figura 4.1 Vista de la web usando Chrome y Firefox
116
Figura 4.2 Vista de la web usando Opera
Con estas pruebas podemos concluir que el diseño y presentación de la web, así
como su funcionalidad, no se ven afectadas en ningún modo dependiendo del navegador
usado para acceder a ella, tal y como se requería desde un principio.
4.2 Pruebas de acceso a la web desde dispositivo móvil
Para estas pruebas, vamos a acceder a la página web a través del navegador
Google Chrome de un smartphone para observar que la plantilla adaptativa elegida por el
alumno hace que la página web esté adaptada para dispositivos móviles.
A continuación presentamos unas capturas donde se aprecia cómo el contenido
de la página web se reordena en el móvil de forma que los distintos módulos y menús no
ocupan más del ancho de la pantalla del smartphone. Observamos como el menú, por
ejemplo, se transforma en un desplegable para poder adaptarse a las dimensiones del
dispositivo móvil. (Figura 4.3).
117
Figura 4.3 Home de la página web desde dispositivo móvil
Podemos observar, de igual modo, que la funcionalidad de la web no cambia en
absoluto desde el dispositivo móvil. En este caso como ejemplo mostramos cómo la
contratación del servicio online puede efectuarse igualmente desde un dispositivo móvil
accediendo a la página web de la misma forma en que se haría con un ordenador
(Figuras 4.4, 4.5 y 4.6).
Figura 4.4 Contratación de asesoramiento
118
Figura 4.5 Método de pago del asesoramiento
Figura 4.6 Pago con Paypal
4.3 Batería de pruebas en la página web
En este apartado vamos a cubrir las pruebas de funcionalidad de la página web,
más concretamente, vamos a buscar las respuestas a unas situaciones concretas. En
este caso, vamos a intentar un login falso y un acceso a contenidos de cliente asesorado
sin haber iniciado sesión con un usuario con dichos permisos, es decir, con un usuario
que no pertenezca al grupo asesoramiento o siendo un visitante de la web sin más. Para
estas pruebas se podría usar indistintamente un ordenador o un dispositivo móvil, ya que
hemos visto que la funcionalidad es exactamente la misma. Por comodidad, se va a usar
un ordenador.
119
En la Figura 4.7, a la izquierda podemos ver el intento de login con usuario
incorrecto y a la derecha el mensaje de error proporcionado tras este intento.
Figura 4.7 Ejemplo de login no válido
Sin embargo, en caso de introducir un usuario y contraseña correctos, podemos
ver que se devuelve un mensaje de éxito. (Figura 4.8)
Figura 4.8 Ejemplo de login válido
Ahora vamos a comprobar el error que da la página a una persona que no haya
iniciado sesión en una cuenta pertenezca al grupo de los asesorados cuando intenta
entrar en algún contenido específico de los asesorados.
Nótese que el menú de los asesorados solo aparece en la página cuando un
usuario asesorado ha iniciado sesión, por lo tanto, para estas pruebas vamos a copiar el
120
enlace que lleva a dicho contenido en la web cuando hemos entrado con un usuario
asesorado y lo vamos a pegar en la barra de direcciones sin haber iniciado sesión.
En este caso, como ejemplo, vamos a copiar la URL que lleva a la página donde
un usuario asesorado puede ver los distintos ejercicios de pectorales y su técnica. En la
Figura 4.9 se puede observar que un usuario asesorado tiene acceso a ese contenido.
Figura 4.9 Acceso a contenido para asesorados con cuenta de asesorado
Sin embargo, cuando intentamos acceder al mismo recurso usando la URL
correspondiente sin haber iniciado sesión, la página nos da un error avisando de que
tenemos que identificarnos primero (Figura 4.10)
Figura 4.10 Acceso a contenido asesorado sin inicio de sesión previo
121
Otro caso es que un usuario que sí esté registrado pero no haya contratado el
asesoramiento intente acceder al recurso. En este caso, la página le dará un error
indicándole que no tiene autorización para ver el recurso. (Ver Figura 4.11)
Figura 4.11 Usuario sin autorización
Como resultado de estas pruebas podemos concluir que la página web ofrece una
comunicación de errores muy fácil de entender para el usuario, y que los distintos grupos
de usuarios (Public, Registered, y Asesoramiento) están correctamente configurados
siguiendo la lógica de negocio.
4.4 Pruebas de diseño de la app con dos dispositivos diferentes
En esta sección vamos a comparar las diferentes interfaces de la aplicación móvil
para ver como se adaptan a diferentes dispositivos móviles con diferente características
de pantalla y distintas versiones del sistema operativo Android, es decir, nos vamos a
centrar en cómo aparecen los elementos, en ver si utilizar distintas pantallas y versiones
de Android hacen que el diseño cambie o de lugar a algún error. Para ello, vamos a usar
dos dispositivos diferentes, cuyas características de pantalla se describen a continuación.
El primer móvil que vamos a usar es un Samsung Galaxy mini s2, que cuenta con
una pantalla de tamaño 320 x 480 pixeles, 3.27 pulgadas, TFT capacitiva con 256K
colores. Este móvil tiene como sistema operativo Android 2.3 Gingerbread (API 10).
El segundo móvil es un Samsung Galaxy Core I8260, que cuenta con una pantalla
de 800 x 480 pixeles, TFT capacitiva con una densidad de pixeles de 217 ppp. Este móvil
usa como sistema operativo Android 4.1.2 Jelly Bean (API 16).
122
Vamos a mostrar diferentes pantallas para comprobar cómo se ven en ambos
dispositivos. Todas las pantallas y sus funciones están definidas en el manual de usuario
que se encuentra dentro de este documento (Ver Anexo I).
En la Figura 4.12 se puede observar cómo en una pantalla más grande podrán
aparecer más elementos, no será tan necesario hacer scroll. La imagen de la izquierda
pertenece al móvil con la pantalla más grande. En la parte derecha de la figura, que
pertenece al móvil con la pantalla más pequeña, para ver el botón SALIR tenemos que
hacer scroll (es decir, deslizar el dedo, en este caso hacia arriba para poder ver la parte
no visible).
El alumno fue consciente de la diversidad de pantallas. Para corregir esto, en los
layouts de las actividades colocó un elemento Scrollview para permitir hacer scroll y ver
todos los elementos de las distintas actividades sin ningún problema, permitiendo un
funcionamiento idéntico en pantallas más pequeñas.
Otro ejemplo donde podemos ver cómo cambian algunos aspectos dependiendo
del dispositivo es una lista desplegable en la que no se ha definido un formato de texto
para sus opciones. Podemos ver en la Figura 4.13 como se ve en un dispositivo y en la
Figura 4.14 como se ve la misma lista en el otro.
Figura 4.12 Actividad inicial en distintas pantallas
123
Figura 4.13 Lista desplegable en Samsung Galaxy Core
Figura 4.14 Lista desplegable en Samsung Galaxy s2 mini
Podemos concluir pues, que para unos dispositivos diferentes con propiedades de
pantalla distintas, los elementos se mostrarán igualmente sin problemas, proporcionando
la misma funcionalidad. Lo único que cambiará será la forma en la que aparecen (caso de
la lista desplegable de la (Figuras 4.13 y 4.14) o si se muestran en la pantalla sin
necesidad de hacer scroll o si esto es necesario (Figura 4.12).
124
4.5 Batería de pruebas de funcionalidad para la aplicación móvil
En este apartado vamos a comprobar la funcionalidad correcta de la aplicación,
centrándonos en los avisos que recibe un usuario en la aplicación móvil tras una acción.
Estos avisos se han programado en forma de Alert Dialog a lo largo de todas las
actividades que conforman la aplicación móvil, y siempre tienen como fin informar al
usuario sobre si una acción se ha llevado a cabo correctamente o no. Recordemos que
funcionalidad de la aplicación está explicada completamente en el manual de usuario que
se encuentra en el Anexo 2 de este documento.
- Error de red: Se da cuando un usuario lleva una acción determinada dentro de la
aplicación móvil, enviando una consulta a la base de datos del servidor y no se
obtiene una respuesta. Por ejemplo, cuando el servidor está caído (caso realmente
improbable) o cuando el usuario no ha activado una conexión de red (no ha
conectado el Wi-Fi o los datos móviles). (Ver Figura 4.15).
Figura 4.15 Error de red
- Error de inicio de sesión: Cuando no se rellena algún campo dentro de la pantalla
inicial o se rellena con un usuario no existente o que no pertenece al grupo de los
asesorados obtenemos las alertas correspondientes. (Figura 4.16)
125
Figura 4.16 Errores de inicio de sesión
- Inicio de sesión correcto: Cuando un usuario que pertenece al grupo de los
asesorados escribe su nombre de usuario y su PIN secreto correctamente, tras pasar
al panel de usuario, se muestra una alerta de éxito. (Figura 4.17)
Figura 4.17 Alerta de autenticación correcta
- Registro de evolución: Tenemos el caso de que un usuario no rellene todos los
campos del registro, en cuyo caso se le alertará de que es necesario rellenar todos
los campos, y el caso en el que rellene todo y lo guarde. (Figura 4.18).
126
Figura 4.18 Alerta de aviso de rellenar datos y de registro añadido
- Gráficos de evolución sin registros: Cuando un usuario o el administrador intenta ver
el gráfico de barras de evolución pero no hay registros que ver, en la pantalla, en
lugar del gráfico de barras, aparece una alerta (Figura 4.19). En caso de que sí
existan registros, se mostrará el gráfico de barras seleccionado.
Figura 4.19 Alerta de registros no encontrados
- Confirmación al eliminar un registro: Es una alerta que muestra al usuario que un
registro seleccionado ha sido eliminado con éxito. (Ver Figura 4.20).
127
Figura 4.20 Alerta de registro borrado con éxito
- Aviso de seguridad en borrar todos los registros: Es un aviso que nos pide una
confirmación para borrar todos los registros existentes. Podemos ver en la Figura 4.21
el aviso y la alerta que se muestra cuando confirmamos el borrado.
Figura 4.21 Aviso de borrado y alerta de registros eliminados con éxito
Con estas demostraciones de la aplicación por parte de un cliente podemos ver que la
funcionalidad de la aplicación es correcta, las pruebas son exitosas y las alertas son de
gran ayuda para la interacción con la aplicación.
128
4.6 Encuesta a usuarios
A continuación se presenta una encuesta relacionada con la calidad de diseño de
la página web y la aplicación móvil, así como el grado de satisfacción con su
funcionalidad. La puntuación de cada pregunta se mide del 1 al 5, donde 1 representa un
total desacuerdo con el enunciado, 2 representa desacuerdo, 3 representa una opinión
neutral, un 4 representa acuerdo y 5 un completo acuerdo.
Los usuarios elegidos para la encuesta son los siguientes:
- Usuario 1: Eloísa Frutos Lara, licenciada en administración y dirección de
empresas de 30 años de edad, con conocimientos sobre bases de datos y sin
conocimientos sobre programación web o Android.
- Usuario 2: José Miguel Rodríguez Medina, licenciado en derecho y actual cliente
del alumno en su labor como entrenador personal, con conocimientos muy básicos de
bases de datos y sin conocimientos sobre programación web o Android.
A continuación podemos ver las preguntas y respuestas sobre la página web y la
aplicación móvil para asesorados contestadas por los usuarios:
1. El diseño de la página web me parece atractivo.
Usuario 1: 5
Usuario 2: 5
2. Las opciones del menú principal son claras y están posicionadas de
forma correcta en la página web.
Usuario 1: 5
Usuario 2: 5
3. El tamaño y tipo de letra del contenido de la página web me parecen los
adecuados.
Usuario 1: 5
Usuario 2: 5
4. Estoy satisfecho con el tiempo de respuesta de la página web ante
cualquier tipo de acción en esta.
Usuario 1: 5
Usuario 2: 5
129
5. El registro e inicio de sesión de un usuario están claramente
identificados en la página web.
Usuario 1: 5
Usuario 2: 5
6. Los pasos para comprar el asesoramiento online son fáciles de seguir
para cualquier persona independientemente de sus conocimientos.
Usuario 1: 4
Usuario 2: 5
7. Los métodos de pago del asesoramiento me parecen apropiados.
Usuario 1: 4
Usuario 2: 5
8. Los contenidos para los usuarios asesorados me parecen útiles.
Usuario 1: 5
Usuario 2: 5
9. La navegación por el menú de los asesorados es intuitiva.
Usuario 1: 5
Usuario 2: 5
10. La página web cumple con las expectativas para las que fue desarrollada.
Usuario 1: 5
Usuario 2: 5
11. La instalación de la aplicación móvil es sencilla.
Usuario 1: 5
Usuario 2: 5
12. El tamaño y tipo de letra en la aplicación móvil son los adecuados.
Usuario 1: 5
Usuario 2: 5
13. Las opciones dentro de la aplicación móvil son intuitivas para cualquier
tipo de persona independientemente de sus conocimientos.
Usuario 1: 5
Usuario 2: 5
14. Estoy satisfecho con el tiempo de respuesta de la aplicación móvil.
Usuario 1: 5
Usuario 2: 5
15. Los datos que guardo sobre mi físico en la aplicación móvil me parecen
los adecuados.
Usuario 1: 5
Usuario 2: 5
130
16. El diseño y color de las gráficas de barras en la aplicación móvil me
parecen adecuados.
Usuario 1: 5
Usuario 2: 5
17. Las gráficas de barras me parecen fáciles de comprender y útiles para
seguir la evolución de mi físico a lo largo de un periodo.
Usuario 1: 5
Usuario 2: 5
Basándonos en las opiniones de los usuarios que han probado la página web y la
aplicación móvil, podemos concluir que aunque es posible realizar mejoras, el grado de
satisfacción de los usuarios ha sido bueno. Remitimos al lector de esta memoria a
consultar el siguiente apartado donde discutiremos líneas de futuro de este proyecto.
131
5 CONCLUSIONES
A continuación se expondrán brevemente las conclusiones a las que ha llegado el
alumno tras el desarrollo de la aplicación. Finalmente comentaremos cómo podríamos
mejorar tanto la página web como la aplicación móvil en un futuro, para permitirnos una
interacción y una funcionalidad más avanzada.
5.1 Conclusiones generales
Este proyecto ha sido realizado como trabajo experimental, aunque el alumno
pretende usarlo en su labor como entrenador personal en la vida real. El objetivo era
crear una página web que permitiera a clientes familiarizarse con el trabajo de entrenador
personal del alumno, comprar un asesoramiento online con un pago electrónico y
desarrollar una serie de contenidos específicos para estos clientes. Adicionalmente, el
alumno ha desarrollado una aplicación móvil para sus clientes en la que estos pueden
guardar sus progresos y permitir al entrenador ver este progreso para asegurarse de la
calidad del servicio proporcionado.
Para el desarrollo de la página web, el alumno utilizó Joomla como gestor de
contenidos y tuvo que instalar las extensiones adecuadas para realizar las funciones
correspondientes, así como leer las documentaciones de estas extensiones para
configurarlas correctamente de acuerdo a la lógica de negocio.
En cuanto al desarrollo de la aplicación para dispositivos móviles, el alumno optó
por el sistema operativo Android, por ser el más usado actualmente y con más móviles en
el mercado, y desarrolló la aplicación usando el entorno de desarrollo IDE Android Studio,
ya que es el entorno oficial que propone Google.
Finalmente puede decirse que el desarrollo de este trabajo final de grado ha
concluido, tras numerosas horas de trabajo, con los objetivos docentes y funcionales
propuestos, dentro del tiempo estipulado por la asignatura y que el alumno ha adquirido
una cantidad considerable de conocimientos y capacidades en el uso de estas
herramientas.
132
5.2 Líneas de futuro
Tanto la página web desarrollada como la aplicación móvil cubren las necesidades
requeridas por el entrenador personal y los objetivos que nos planteamos al comienzo de
este proyecto. No obstante, hay ciertos aspectos que podrían ser mejorados en un futuro,
disponiendo de más tiempo que el estipulado para este proyecto. A continuación listamos
ciertas mejoras y extensiones que podrían añadirse a ambas aplicaciones:
- Añadir más métodos de pago: Si bien es cierto que Paypal es un método de pago
muy popular, y que nos proporciona en método seguro de pago, la mayoría de la
gente desconoce que Paypal permite también pagar con tarjeta sin necesidad de
tener una cuenta Paypal. En este sentido, sería interesante añadir otras formas de
pago, como pago por tarjeta dentro de la misma web. En este caso, si que sería
recomendable y lógico utilizar adquirir un certificado SSL en nuestra página web para
que la información fuera cifrada.
- Guardar más datos físicos de un usuario: La evolución física de un usuario se mide
usando el peso, el porcentaje de grasa y el contorno de la cintura. Sería interesante
añadir más datos como el contorno del pecho, ancho de los hombros, contorno del
muslo, etc. Si bien el peso, el porcentaje de grasa y el contorno de la cintura nos dan
la información necesaria para saber si un usuario pierde grasa, aumenta grasa, gana
músculo o pierde músculo, no nos apartan la información sobre en qué zonas del
cuerpo se están produciendo los cambios, por si tenemos que enfatizar más en unos
músculos que en otros. Esto es importante a la hora de desarrollar el plan de ejercicio
del asesorado.
- Un sistema de mensajes/notificaciones: La comunicación entre el entrenador y el
cliente se llevaría a cabo por correo electrónico o llamadas telefónicas tal y como está
planteada en este momento. Sería interesante poder informar a un usuario cuando un
plan de entrenamiento esté subido a la plataforma o una notificación para el
entrenador cuando un usuario añada un nuevo registro. Aun así, el alumno considera
importante una comunicación cercana con el cliente.
- Implementar conexiones cifradas: El alumno ha intentado en este proyecto realizar
conexiones cifradas utilizando OpenSSL, generando claves y modificando los ficheros
my.ini, para usarlas en las conexiones con MySQL y añadiendo estas claves al JDK
de java, para configurar el conexiones seguras usando JDBC, y configurar el servidor
133
web modificando el fichero http-conf para utilizar HTTPs. Sin embargo, en el servidor
remoto, esto no es posible configurarse puesto que la base de datos que usa no está
compilada para utilizarse con SSL, tal y como le respondieron al alumno desde el
soporte del hosting. Lo mismo pasa con el servidor web, el usuario no puede hacer
este tipo de configuraciones en el servidor web remoto. En este sentido, una solución
posible para el futuro sería adquirir un certificado SSL de la propia empresa de
alojamiento web, que nos solucionaría el problema de seguridad dentro de la web, y
en lugar de utilizar JDBC para conexiones con la base de datos desde la aplicación
móvil, usar peticiones HTTP a scripts PHP que procesen las consultas, y que se
encontrarían dentro del servidor web que ya estaría asegurado con el certificado SSL.
- Permitir a otros entrenadores ofrecer asesoramiento a través de ambas aplicaciones:
Lo único que habría que hacer en este caso sería crear las cuentas de usuario de
estos y darles los permisos pertinentes para poder entrar como administradores y
gestionar contenidos, así como añadir sus productos en la extensión de comercio
electrónico y especificar claramente los servicios que ofrecen estos entrenadores. En
la aplicación para móviles, solamente habría que modificar el método que implementa
el login.
- Beneficios por publicidad: Incluir publicidad en la página web, de forma que se pueda
obtener algún beneficio en pago por click o pago por impresión.
134
6 ANEXO I: MANUAL DE USO DE LA PÁGINA WEB
En este apartado vamos a describir todo lo que un usuario puede hacer en
nuestra página web. Vamos a dividir estas funcionalidades según los tres tipos de
usuarios que visitarán la web. Estos son: Visitantes, Registrados y Asesorados.
Recordemos que todo lo que puede hacer un Visitante, podrá igualmente hacerlo un
usuario Registrado y Asesorado y que todo lo que haga un usuario Registrado lo podrá
hacer también un Asesorado, aunque se entiende que un Asesorado tienen acceso a
contenidos no accesibles desde un usuario registrado o visitante.
6.1 Perspectiva Visitante
Al introducir www.fitnessdesemana.es llegamos a la página de inicio de la web,
que se muestra en la Figura 6.1. Dentro vemos que existe un menú principal en el que
tenemos cuatro pestañas: Artículos, Preguntas Frecuentes, Contacto y Asesoramiento.
Figura 6.1 Página de inicio de la web
135
- ARTÍCULOS: Dentro de esta opción podemos seleccionar una categoría de artículos
para ver los artículos contenidos en ella y acceder a estos artículos. Dentro de estos
artículos se pueden hacer comentarios, que serán supervisados por el administrador
antes de publicarse.
Figura 6.2 Categorías de artículos
- PREGUNTAS FRECUENTES: Dentro de esta opción encontramos distinta
información, principalmente sobre el entrenador y el asesoramiento. En qué consiste,
cómo adquirirlo, etc. (Ver Figura 6.3).
Figura 6.3 Preguntas Frecuentes
136
- CONTACTO: Dentro de esta pestaña encontramos información sobre el entrenador,
así como un formulario de contacto dentro de la pestaña “Formulario de contacto”
para enviarle al entrenador personal un email con nuestras inquietudes. (Figura 6.4).
Figura 6.4 Formulario de contacto
- ASESORAMIENTO: Esta opción nos lleva a la descripción de cómo funciona el
asesoramiento, lo que incluye y nos muestra la opción de comprar el asesoramiento.
Esto se muestra en la Figura 6.5. Nótese que para comprar el asesoramiento hay que
estar registrado, por lo que esto lo veremos en el siguiente punto.
137
Figura 6.5 Pestaña Asesoramiento
- REGISTRARSE: La opción registrarse se encuentra en el módulo del LOGIN, que
podemos encontrar en la página de inicio. Al hacer click en registrarse, se nos pedirá
una serie de datos muy simples para completar el registro y tendremos que activar la
cuenta haciendo click en el link de confirmación que se envía a nuestro correo email.
Figura 6.6 Opción “Registrarse”.
138
- INICIAR SESIÓN: Una vez que tenemos activada nuestra cuenta, podemos iniciar
sesión. Para ello, nos vamos al módulo de Login e introducimos nuestro nombre de
usuario y nuestra contraseña y hacemos click en iniciar sesión. (Ver Figura 6.7)
Figura 6.7 Iniciar sesión
Esas son las opciones que tiene un visitante en la página web, a partir del inicio
de sesión, la perspectiva cambia y hablamos de la perspectiva de usuario registrado, que
tiene acceso a estas opciones del visitante, pero que ahora además tiene un perfil creado
y puede realizar el proceso de compra.
6.2 Perspectiva Usuario Registrado
Ser un usuario registrado no añade mucha funcionalidad, solo añade la posibilidad
de ver y editar nuestro perfil y la posibilidad de adquirir el asesoramiento. Realmente el
usuario registrado está concebido en este proyecto como un paso previo a la compra del
asesoramiento.
6.2.1 Perfil de usuario
.
Cuando un usuario inicia sesión, aparece una nueva opción en el menú, MI
PERFIL, que antes no estaba disponible. Si hacemos click en ella, nos llevará a nuestro
perfil, que podrá ser editado en la pestaña editar, y donde podremos subir fotografía de
139
perfil, foto de portada y editar los datos que pusimos en el registro, que se encuentran en
la pestaña “Información de contacto”. (Ver Figura 6.8)
Figura 6.8 Mi perfil
6.2.2 Compra del asesoramiento
En este apartado se va a describir el proceso de compra del asesoramiento en su
totalidad. Para ello vamos a seguir los siguientes pasos:
1. Nos vamos a la pestaña ASESORAMIENTO, dentro el menú principal y bajamos a
los productos disponibles. Ver Figura 6.9.
140
Figura 6.9 Productos disponibles
2. Le damos click a Comprar en la modalidad que más nos interese. En este caso
vamos a comprar el asesoramiento por un mes como ejemplo. Esto nos va a
llevar a editar la compra (Ver Figura 6.10). Aquí le vamos a dar click a siguiente
para continuar con el proceso de compra.
Figura 6.10 Edición de la compra
3. Ahora tenemos que elegir la forma de pago. La única opción disponible es Paypal,
donde se podrá pagar usando una cuenta de paypal o usando una tarjeta de
crédito. (Ver Figura 6.11).
141
Figura 6.11 Método de pago
4. Pulsamos en Finalizar para que se nos redirija a Paypal para realizar el pago. (Ver
Figura 6.12).
Figura 6.12 Pago a través de Paypal
142
Aquí tenemos dos posibles opciones:
a) Entramos en nuestra cuenta Paypal y le damos click a Pagar.
b) Le damos click a Pagar con tarjeta: Rellenamos nuestros datos bancarios y
pulsamos en Pagar. (Ver Figura 6.13)
Figura 6.13 Pago con tarjeta de crédito en Paypal
5. Una vez finalizado el pago, nos mandará de vuelta a la página web, y se cerrará la
sesión. Nuestro usuario ahora será asesorado, con nuevas funcionalidades que
veremos en el siguiente apartado.
6.3 Perspectiva Asesorado
Al iniciar sesión con la cuenta de Asesorado, si pinchamos dentro de MI PERFIL,
observamos un menú vertical en la parte izquierda de la página web que antes no estaba.
Este menú nos va a permitir llegar a los contenidos exclusivos de los Asesorados.
También nos aparece una pestaña dentro del perfil que antes no estaba (“Datos
Asesorados” (Ver Figura 6.14).
143
Figura 6.14 Perfil de Usuario Asesorado
Antes de nada, un usuario Asesorado debe rellenar en su perfil los datos que verá
el entrenador y que le permitirán crear su rutina de entrenamiento y su plan nutricional.
Para ello, nos vamos al perfil y en editar vamos a la pestaña “Datos de Asesorado”. Allí
rellenaremos los datos, que son muy importantes. Se puede ver lo que significa cada
campo al pasar el ratón por encima. Con estos datos, el entrenador es capaz de
confeccionar el plan de entrenamiento personalizado y el plan nutricional personalizado.
Es de suma importancia el PIN Secreto, ya que este nos permitirá iniciar sesión en
la aplicación móvil que pueden descargar los asesorados y el entrenador también lo
utilizará como contraseña de los planes nutricional y de entrenamiento. (Ver Figura 6.15).
144
Figura 6.15 Edición de los Datos Asesorados
Ahora vamos a echar un vistazo a los distintos contenidos a los que tiene acceso
un usuario Asesorado, que se encuentran el nuevo menú vertical de la Figura 6.14:
- MI ENTRENAMIENTO: Esta opción nos lleva al directorio donde el entrenador sube
los planes de entrenamiento de los clientes. Aquí solamente tenemos que buscar el
que tiene nuestro nombre, pulsar en el título y acceder a él. Dentro de este archivo,
simplemente tenemos que introducir el PIN Secreto como Password y pulsar en
Unlock para poder descargarlo. (Ver Figura 6.16).
Figura 6.16 Descarga de un plan
- MI PLAN NUTRICIONAL: Esta opción se totalmente equivalente a la anterior, solo
que el PDF que se descarga es el Plan Nutricional.
145
- TÉCNICA DE LOS EJERCICIOS: Esta opción se compone de varias categorías, que
se corresponden con distintas partes del cuerpo humano. En estas categorías
mostramos tablas donde aparecen nombres de ejercicios que trabajan ese músculo.
(Figura 6.17).
Figura 6.17 Técnica de los ejercicios
Al hacer click sobre los ejercicios, se muestra cada uno, es decir, se muestra un video
en el que se muestra la correcta ejecución de un ejercicio. (Figura 6.18)
Figura 6.18 Ejemplo de técnica de un ejercicio
146
El objetivo de la categoría técnica de los ejercicios no es otro que el de proporcionar
al cliente un material que le ayude a aprender a identificar y realizar los ejercicios que
el entrenador va a incluir en su plan de entrenamiento de forma correcta.
- APP FITNESSDESEMANA: Esta pestaña lleva al usuario al enlace de descarga de la
aplicación Android para asesorados. La descarga y el uso de la aplicación está
contemplada en el Anexo II y Anexo III, respectivamente.
147
7 ANEXO II: MANUAL DE INSTALACIÓN DE LA APP
A continuación se describen los pasos a seguir para la instalación de la aplicación
FitnessDeSemana, primero efectuaremos la descarga y luego iremos a la instalación. Los
requerimientos del dispositivo para la instalación son los siguientes:
- Tener instalada una versión de Android igual o superior a la versión 2.3 Gingerbread.
- Tener el suficiente memoria disponible en el dispositivo (5.01MB serán suficientes).
Antes de nada, debemos tener descargado el archivo .APK. Dicho archivo se
encuentra en un link de descarga dentro de la pestaña APP FitnessDeSemana, en el
menú de los asesorados dentro del perfil del cliente.
Figura 7.1 Menú de los asesorados
1. Dentro de la página vamos a encontrar el texto que se muestra en la Figura 7.2, y
solo tendremos que hacer click en el hipervínculo señalado en la figura para ir al
servidor de descarga MEGA.
Figura 7.2 Contenido de la pestaña APP FitnessDeSemana
148
2. Una vez en el servidor de descarga, solo debemos hacer click en “Descargar con
el navegador” y se iniciará la descarga del fichero.
Figura 7.3 Descarga del archivo de MEGA
3. Antes de seguir con el proceso de instalación, debemos tener configurado nuestro
smartphone para que pueda instalar aplicaciones de fuentes desconocidas, sino
sólo podrá instalar aplicaciones del Market o PlayStore. Esto se hace en el menú
Ajustes -> Seguridad -> Fuentes desconocidas -> Aceptar.
Figura 7.4 Aceptar fuentes desconocidas
4. Una vez que tenemos permitidas las fuentes desconocidas y el archivo
descargado en el ordenador, simplemente tenemos que ir a la carpeta de
descarga del navegador usado y copiar el archivo, haciendo click derecho sobre él
y pulsando en copiar.
149
Figura 7.5 Copiar archivo desde el PC
5. Ahora solo tenemos que conectar nuestro dispositivo móvil Android mediante un
cable de datos a un puerto USB de nuestro ordenador. Una vez conectado
tendremos que elegir “Conectar como dispositivo multimedia”.
Figura 7.6 Conectar como dispositivo multimedia
150
6. El siguiente paso es buscar el directorio donde queramos pegar el archivo dentro
de nuestro smartphone, hacemos click derecho y pegar.
Figura 7.7 Pegar archivo .apk en nuestro smartphone
7. Ahora simplemente debemos irnos en nuestro smartphone a la carpeta donde
hayamos pegado nuestro archivo FitnessDeSemana.apk y lo abrimos. Le damos
click a instalar y listo.
Figura 7.8 Instalación de la app en el smartphone
151
8. Una vez instalada podemos comprobar cómo el icono de la aplicación se ha
añadido a las demás aplicaciones y está lista para ser usada.
Figura 7.9 Aplicación instalada con éxito
152
8 ANEXO III: MANUAL DE USUARIO DE LA APP
Dentro del manual de usuario, vamos a encontrar dos perspectivas, dependiendo
de si el usuario que inicia sesión es un cliente (que pertenece al grupo de los asesorados)
o es el entrenador personal.
8.1 Perspectiva del cliente asesorado
8.1.1 Pantalla inicial (login)
Esta pantalla es la primera que vemos al abrir la aplicación. Se trata simplemente
de una pantalla para el inicio de sesión.
Figura 8.1 Pantalla inicial
Las opciones disponibles en la pantalla inicial son las siguientes:
- Entrar: Este botón hace que un usuario asesorado que haya introducido su nombre de
usuario y su PIN secreto (previamente definido en la pestaña “Datos de Asesorados”
en su perfil de usuario en la página web) de forma correcta, acceda al Panel de
usuario. [Ver punto 8.1.2]. Si la información proporcionada no es correcta o el usuario
no pertenece al grupo de los asesorados, simplemente dará un mensaje de error.
153
- Salir: Este botón hace que la aplicación se cierre.
8.1.2 Panel de usuario
Esta pantalla es el centro de operaciones del cliente. En ella, un cliente puede ver
en primer lugar su nombre de usuario en la parte superior de la pantalla, y justo debajo, la
fecha y hora de su última conexión (esta fecha se actualiza tanto para el inicio de sesión
en la página web como en la aplicación móvil).
Figura 8.2 Panel de usuario
Las opciones en esta pantalla son las siguientes:
- Cerrar sesión: Pulsando sobre este botón volvemos a la Pantalla Inicial de login.
- Añadir nuevo registro: Lleva al cliente a la pantalla que le permite añadir un nuevo
registro con sus datos corporales. [Ver punto 8.1.3].
- Mis gráficos de evolución: Lleva al cliente a la pantalla que le permite ver
gráficamente sus registros guardados. [Ver punto 8.1.4].
- Ir a la página web: Esta opción simplemente lleva al usuario a la página web
utilizando el navegador predeterminado en el smartphone del cliente.
- Eliminar un registro: Lleva al usuario a una pantalla donde podrá borrar registros que
tenga guardados. [Ver punto 8.1.5]
154
- Eliminar todos los registros: Esta opción al ser seleccionada abre una ventana para la
confirmación por seguridad (Figura 8.3). Si se acepta borrar los registros, todos los
registros que el cliente tenía guardados se pierden y se sigue en la misma pantalla.
Por el contrario, si se selecciona cancelar y volver, el cliente vuelve al Panel sin
ningún efecto.
Figura 8.3 Eliminar todos los registros guardados
8.1.3 Pantalla nuevo registro de evolución
Esta pantalla permite al cliente registrar sus datos corporales periódicamente para
llevar un control de su progreso, por si hay que ir realizando cambios tanto en su
entrenamiento como en su plan nutricional. Se recomienda al cliente que vaya
registrando estos datos de forma semanal. Estos registros serán supervisados por el
entrenador personal.
Lo primero que puede ver el usuario es la fecha del último registro añadido. Los
registros están formados por el peso del cliente en kilogramos, porcentaje de grasa
corporal, contorno de la cintura en centímetros y la fecha de dicha revisión. El cliente
debe rellenar todos los campos para poder añadir el registro. (Ver Figura 8.4).
155
Figura 8.4 Añadir nuevo registro de evolución
Las opciones en esta pantalla son las siguientes:
- Añadir: Pulsando sobre este botón se añade el nuevo registro. Para ello, es necesario
rellenar todos los campos, tal y como se ha mencionado anteriormente. En caso
contrario, dará un aviso al usuario de que le faltan campos por rellenar. Cuando un
usuario añade un nuevo registro, se actualiza automáticamente el valor de estas
medidas en su perfil dentro de la página web.
- Volver: Vuelve a la pantalla anterior, el panel de usuario.
8.1.4 Pantalla de evolución gráfica del cliente
Esta pantalla se encarga de mostrar gráficamente todos los registros que un
cliente tiene guardados, en forma de gráfico de barras ordenadas por fechas. Se puede
seleccionar cualquiera de las tres medidas que añadimos en el registro (peso, porcentaje
de grasa o contorno de cintura) para ver cómo ha ido evolucionando con el paso del
tiempo.
156
Los gráficas de barras se muestran en diferentes colores dependiendo de la
medida seleccionada, mostrando dichas medidas como valores en el eje de ordenadas y
las fechas de los registros en el eje de abcisas. (Ver figura 8.5).
Figura 8.5 Ejemplo de gráfico de barras de evolución
Las opciones disponibles en esta pantalla están en la lista desplegable:
- Evolución del peso corporal (kg): Es la opción por defecto. Muestra el gráfico de
barras de evolución del peso corporal para las fechas registradas por el cliente.
- Evolución del porcentaje de grasa: Muestra el gráfico de barras de evolución del
porcentaje de grasa corporal para las fechas registradas por el cliente.
- Evolución del contorno de cintura (cm): Muestra el gráfico de barras de evolución del
contorno de la cintura para las fechas registradas por el cliente.
8.1.5 Pantalla de borrado de registros
Esta pantalla se usa para borrar registros guardados. Lo recomendable es no
borrar los registros a no ser que sean demasiados y se vean demasiado pequeños en
la pantalla del dispositivo. En el caso de que se borren registros, recomendamos
borrar los antiguos o dejar registros cada mes por ejemplo, para no perder de vista la
progresión del cliente.
157
Los registros se identifican por su fecha, simplemente hay que hacer click en la
lista desplegable y elegir la fecha del registro que queremos borrar. (Ver Figura 8.6).
Figura 8.6 Pantalla de borrado de registros
Las opciones disponibles son las siguientes:
- Eliminar registro: Borra el registro seleccionado en la lista desplegable.
- Volver: Nos regresa a la pantalla anterior, Panel de usuario.
8.2 Perspectiva del entrenador/administrador
8.2.1 Pantalla inicial
Se trata de la misma pantalla que ve el cliente al abrir la aplicación y posee las
mismas opciones. Lo único que cambia en este sentido es que el entrenador, en este
caso el alumno, introduce su nombre de usuario, que coincide también con la cuenta con
permisos de SuperUsuario de Joomla. [Ver Figura 8.1].
Las opciones disponibles en la pantalla inicial son las siguientes:
158
- Entrar: Este botón hace que el administrador, al autenticarse de forma correcta,
acceda al Panel de administración. [Ver punto 8.2.2]. Si la información proporcionada
no es correcta, simplemente dará un mensaje de error.
- Salir: Este botón hace que la aplicación se cierre.
8.2.2 Panel de administración
Es la equivalencia del Panel de usuario para el entrenador personal. En esta
pantalla se muestran las opciones de administración del entrenador, todas ellas aplicadas
al cliente deseado. (Ver figura 8.7).
Figura 8.7 Panel de administración
Las opciones en esta pantalla son las siguientes:
- Ver evolución del usuario: Lleva al entrenador a la pantalla de evolución gráfica del
cliente, para que pueda observar su progresión física de forma periódica. Esta
pantalla es exactamente la misma pantalla que para los clientes. (Ver punto 8.1.3).
- Ver datos de usuario: Lleva al cliente a una nueva pantalla en la que se verán los
datos personales y de asesoramiento del cliente. [Ver punto 8.2.3].
- Dar de alta como asesorado: Da de alta a un usuario como cliente asesorado.
- Dar de baja asesoramiento: Da de baja a un cliente como asesorado.
159
8.2.3 Pantalla Datos de usuario
Esta pantalla muestra un listado de los datos personales y de asesoramiento de
un usuario, así como el grupo al que pertenece. Esta pantalla es esencial, ya que permite
al entrenador extraer todos los datos que necesita para diseñar el plan nutricional y de
entrenamiento del cliente de forma personalizada, así como el PIN secreto, que usará
como contraseña de los documentos subidos a la plataforma para el usuario. Todos los
datos recogidos se pueden ver en la Figura 8.8.
Figura 8.8 Pantalla Datos de usuario
160
9 ANEXO IV: ESTUDIO ECONÓMICO Y PLANIFICACIÓN
9.1 Estudio económico
En este apartado se detalla el estudio económico de este proyecto, que incluye
tanto la página web como la aplicación móvil.
Para hacer este estudio, el presupuesto se ha dividido en costes de personal, que
consta de los diferentes roles que ha tomado el alumno en el desarrollo del proyecto,
costes materiales, que son los equipos utilizados en el desarrollo del mismo y los costes
indirectos (20% del coste total). El desglose es el siguiente:
- Costes de personal (300 horas de trabajo):
PROFESIONAL HORAS COSTE/HORA (€) SUELDO (€)
Programador Junior 120 30 3.600
Analista 50 35 1.750
Diseñador 60 30 1.800
Jefe de proyecto 50 55 2.750
Tester 20 20 400
TOTAL 300 10.300
Tabla 9.1 Costes de personal
- Costes materiales:
Los costes materiales engloban los costes de los equipos utilizados para la
realización del proyecto, un ordenador portátil (HP ENVY 15-j101ss) y un dispositivo
móvil Android (Samsung Galaxy Core).
Para el cálculo de los costes materiales, se ha realizado una estimación entre el
tiempo de utilización de los dispositivos y el tiempo de vida de estos. Para ello nos
hemos basado en una duración de 26 semanas.
161
Para el ordenador, la vida media es de unos 4 años y medio (234 semanas) según
estudios recientes del año 2016. Por otro lado, la vida media de un smartphone de
gama baja como es nuestro caso es de 2 años (104 semanas). [50] [51]
DISPOSITIVO COSTE UNITARIO (€) COSTE ATRIBUIBLE (€)
Ordenador portátil 900 100
Dispositivo móvil 150 37,50
Alojamiento web y dominio 63,43 63,43
TOTAL 1.113,43 200,43
Tabla 9.2 Costes materiales
- Costes totales
Para el cálculo de los costes totales tenemos que sumar los costes de personal, los
costes materiales, los costes indirectos y el IVA.
CONCEPTO PRESUPUESTO (€)
Costes de personal 10.300
Costes materiales 200,43
Costes indirectos (20%) 2.100,09
TOTAL sin IVA 12.600,42
IVA (21%) 2.646,11
TOTAL con IVA 15.246,35
Tabla 9.3 Coste total
El presente presupuesto asciende a un total de quince mil dos cientos cuarenta
y seis euros con treinta y cinco céntimos.
Linares, Agosto de 2016
Firmado: Alejandro Martínez García
Graduado en Ingeniería Telemática
162
9.2 Planificación temporal
La Tabla 9.1 muestra las tareas ordenadas cronológicamente con su duración en
días y la Figura 9.1 muestra el diagrama de Gantt con dichas tareas.
ID TAREA DURACIÓN (días) FECHA INICIO FECHA FIN
1 Análisis de requerimientos
de la página web 7 01/03/2016 07/03/2016
2 Elección CMS y SGBD 7 8/03/2016 14/03/2016
3 Instalación del CMS,
extensiones necesarias y
revisión de documentación
sobre dichas extensiones
28 15/03/2016 11/04/2016
4 Desarrollo de página web 42 12/04/2016 23/05/2016
5 Subida a servidor remoto y
pruebas 14 24/05/2016 06/06/2016
6 Análisis de requerimientos
de la aplicación móvil 7 07/06/2016 13/06/2016
7 Instalación del entorno de
desarrollo y librerías 7 14/06/2016 20/06/2016
8 Desarrollo de la aplicación
en Android Studio 35 21/06/2016 25/07/2016
9 Pruebas de la app 7 26/07/2016 01/08/2016
10 Redacción de memoria 21 02/08/2016 22/08/2016
11 Revisión y repaso de la
documentación final 7 23/08/2016 29/08/2016
Tabla 9.4 Tareas del diagrama de Gantt
163
Figura 9.1 Diagrama de Gantt
164
10 REFERENCIAS BIBLIOGRÁFICAS
[1] Cuota de mercado smartphones http://es.kantar.com/tech/m%C3%B3vil/2016/julio-
2016-cuota-de-mercado-de-smartphones-en-espa%C3%B1a-mayo-2016/
[2] Beneficios de los smartphones http://pyme.lavoztx.com/cules-son-los-beneficios-de-la-
tecnologa-smartphone-12961.html
[3] Comercio electrónico en España http://www.expansion.com/economia-
digital/2016/06/18/575d992ce5fdeaaf3a8b45a4.html
[4] Icono de fichero PHP http://4.bp.blogspot.com/-FsHVYyoOqa8/U3oN1-
om_YI/AAAAAAAAFYg/4E0j947_XuM/s1600/app-x-php-icon.png
[5] Icono base de datos MySQL http://vitaminaweb.com/wp-
content/uploads/2011/10/1160.jpg
[6] Icono smartphone https://image.freepik.com/foto-gratis/icono-del-telefono-
inteligente_21377498.jpg
[7] Icono servidor
http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/CU00408A_1.png
[8] Icono ordenador
http://cdn.xl.thumbs.canstockphoto.com/canstock16007790.jpg
[9] Impacto de la web http://roxiteacher.blogspot.com.es/
[10] Web 1.0 https://es.wikipedia.org/wiki/Web_1.0
[11] Imagen Web 1.0 http://www.hazhistoria.net/sites/default/files/web1_0.png
[12] Imagen Web 2.0 http://www.hazhistoria.net/sites/default/files/web2_0.png
[13] Web 2.0 https://es.wikipedia.org/wiki/Web_2.0
[14] Web 3.0 https://es.wikipedia.org/wiki/Web_3.0#Evoluci.C3.B3n_al_3D
[15] Imagen Web 3.0 http://www.hazhistoria.net/sites/default/files/web3_0.png
[16] Inicios SO móviles http://jjuanhdez.es/?p=726
[17] Blackberry https://es.wikipedia.org/wiki/BlackBerry
[18] Symbian https://es.wikipedia.org/wiki/Symbian
[19] Dispositivos móviles y sistemas operativos
https://aprendiendotecnologiaadmonb.wordpress.com/dispositivos-moviles-y-sus-
sistemas-operativos/
[20] Iphone https://es.wikipedia.org/wiki/IPhone
[21] Android https://es.wikipedia.org/wiki/Android
[22] ¿Qué es un CMS? http://www.investic.net/node/90
[23] Ventajas CMS http://trazada.com/ventajas-de-utilizar-un-cms/
165
[24] Qué CMS elegir para tu web http://www.haiku-media.com/blog/2014/wordpress-
drupal-joomla-o-umbraco-qu%C3%A9-cms-elegir-para-tu-web/
[25] ¿Qué sistema CMS utilizar? http://www.teclea.com/tecnologia/que-sistema-de-gestor-
de-contenidos-cms-utilizar/
[26] Requisitos Joomla 3.x https://docs.joomla.org/Technical_requirements/es
[27] PostgreSQL https://es.wikipedia.org/wiki/PostgreSQL
[28] Microsoft SQL Server https://es.wikipedia.org/wiki/Microsoft_SQL_Server
[29] MySQL https://es.wikipedia.org/wiki/MySQL
[30] ¿Qué es XAMPP? https://es.wikipedia.org/wiki/XAMPP
[31] Extensión JComments http://extensions.joomla.org/extension/jcomments
[32] Extensión HikaShop http://extensions.joomla.org/extension/hikashop
[33] Extensión Community-Builder http://extensions.joomla.org/extension/community-
builder
[34] Ventajas y desventajas de Android
http://gigatecno.blogspot.com.es/2014/05/ventajas-y-desventajas-de-android.html
[35] Ventajas y desventajas de Android II https://scoello12.wordpress.com/ventajas-y-
desventajas/
[36] Versiones de Android II http://nksistemas.com/un-poco-de-historia-conoce-las-
versiones-de-android-hasta-el-2014/
[37] Versiones de Android III http://www.xatakamovil.com/sistemas-operativos/de-
cupcake-a-marshmallow-asi-han-sido-las-versiones-de-android-a-lo-largo-de-su-historia
[38] Imagen versiones de Android http://3.bp.blogspot.com/-
EJZ3LyPdly8/VnL0IA0Z9nI/AAAAAAACoHA/RWmkysnAb6I/s1600/android%2Bversions.p
ng
[39] Arquitectura Android
https://sites.google.com/site/swcuc3m/home/android/generalidades/2-2-arquitectura-de-
android
[40] Imagen Arquitectura Android https://columna80.files.wordpress.com/2011/02/0013-
01-pila-software-android.png
[41] Arquitectura Android II https://es.wikipedia.org/wiki/Android#Arquitectura
[42] Componentes de una aplicación android
http://www.androidcurso.com/index.php/tutoriales-android/31-unidad-1-vision-general-y-
entorno-de-desarrollo/149-componentes-de-una-aplicacion
[43] Estructura de un projecto Android
http://www.tuprogramacion.com/programacion/estructura-de-una-aplicacion-android/
[44] Características Android Studio https://developer.android.com/studio/index.html
[45] Requerimientos Android Stduoo https://es.wikipedia.org/wiki/Android_Studio
166
[46] Ley orgánica de protección de datos
https://www.agpd.es/portalwebAGPD/canaldocumentacion/legislacion/estatal/common/pdf
s/2014/Ley_Organica_15-
1999_de_13_de_diciembre_de_Proteccion_de_Datos_Consolidado.pdf
[47] Etapas del proceso de desarrollo software
https://es.wikipedia.org/wiki/Ingenier%C3%ADa_de_software#Etapas_del_proceso
[48] Plantilla adaptativa Purity III para Joomla
https://www.joomlart.com/documentation/joomla-templates/purity-iii
[49] Herramienta de creación de iconos para aplicaciones móviles Android
https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
[50] Vida útil PC portátil http://www.statista.com/statistics/267465/average-desktop-pc-
lifespan/
[51] Vida útil smartphone http://www.poderpda.com/analisis/tiempo-de-vida-util-de-un-
telefono-inteligente/