UNIVERSIDAD DE JAÉNtauja.ujaen.es/bitstream/10953.1/1815/1/TFG-Cotes-Ruiz... · 2015. 9. 25. ·...

1

UNIVERSIDAD DE JAÉN

Escuela Politécnica Superior de Linares

Trabajo Fin de Grado

______

Escu

ela

Po

lité

cn

ica

Su

pe

rio

r d

e L

ina

res

Alumno: Iván Tomás Cotes Ruiz

Tutor: Prof. D. José Enrique Muñoz Expósito

Prof.ª Dña. Rocío Pérez de Prado

Depto.: Departamento de Telecomunicación

Septiembre, 2014

PLATAFORMA PARA INTERCAMBIO

DE INFORMACIÓN SOCIOCULTURAL

Plataforma para intercambio de

información sociocultural

Índice general

Universidad de Jaén

Cotes Ruiz, Iván Tomás

Plataforma para intercambio de información sociocultural Índice General

3

Contenido 1- Memoria ....................................................................................................................... 8

1.0- Hoja de Identificación ............................................................................................. 8

1.1- Objeto ..................................................................................................................... 9

1.2- Alcance .................................................................................................................. 9

1.3- Antecedentes ......................................................................................................... 9

1.4- Normas y referencias ............................................................................................10

1.5- Definiciones y abreviaturas ....................................................................................11

1.6- Requisitos de diseño .............................................................................................11

1.7- Análisis de soluciones ...........................................................................................12

1.8- Resultados finales .................................................................................................12

1.8.1- Cliente web .....................................................................................................12

1.8.2- Cliente Android ................................................................................................23

1.9- Planificación ..........................................................................................................32

1.10- Orden de prioridad entre los documentos básicos ...............................................35

2- Anexos ........................................................................................................................39

2.1- Manual de usuario .................................................................................................39

2.1.1- Cliente web .....................................................................................................39

2.1.2- Cliente Android ................................................................................................56

2.2- Implementación del lector de códigos QR usando la librería ZXing .......................67

2.3- Google Maps v2 en Android ..................................................................................74

2.4- Esquemas .............................................................................................................81

2.4.1- Esquema cliente/servidor ................................................................................82

2.4.2- Diagrama lógico base de datos .......................................................................82

3- Pliego de condiciones ..................................................................................................85

3.1- Hardware ...............................................................................................................85

3.1.1- Servidor ...........................................................................................................85

3.1.2- Android ............................................................................................................86

3.2- Software ................................................................................................................86

Plataforma para intercambio de información sociocultural Índice General

4

3.2.1- Servidor ...........................................................................................................86

3.2.2- Cliente web .....................................................................................................86

3.2.3- Android ............................................................................................................87

4- Presupuesto ................................................................................................................90



Memoria



Plataforma para intercambio de información sociocultural Memoria

6

Contenido

1- Memoria ........................................................................................................................ 8

1.0- Hoja de Identificación .............................................................................................. 8

1.1- Objeto ..................................................................................................................... 9

1.2- Alcance ................................................................................................................... 9

1.3- Antecedentes .......................................................................................................... 9

1.4- Normas y referencias ............................................................................................ 10

1.5- Definiciones y abreviaturas ................................................................................... 11

1.6- Requisitos de diseño ............................................................................................. 11

1.7- Análisis de soluciones ........................................................................................... 12

1.8- Resultados finales ................................................................................................. 12

1.8.1- Cliente web ..................................................................................................... 12

1.8.1.1- Página principal ...................................................................................... 13

1.8.1.2- Eventos ................................................................................................... 14

1.8.1.4- Modificar eventos .................................................................................... 16

1.8.1.5- Usuarios ................................................................................................. 18

1.8.1.6- Registro .................................................................................................. 18

1.8.1.7- Acceso a la plataforma ........................................................................... 19

1.8.1.8- Panel de control ...................................................................................... 19

1.8.1.9- Categorías .............................................................................................. 20

1.8.1.10- Aplicación móvil .................................................................................... 22

1.8.1.11- Contacto ............................................................................................... 22

1.8.1.12- Buscador .............................................................................................. 22

1.8.2- Cliente Android ............................................................................................... 23

1.8.2.1- Acceso .................................................................................................... 23

1.8.2.2- Menú principal ........................................................................................ 24

1.8.2.3- Eventos ................................................................................................... 24

1.8.2.4- Evento individual ..................................................................................... 24

1.8.2.5- Crear nuevo evento ................................................................................ 25


7

1.8.2.6- Modificación de eventos ......................................................................... 27

1.8.2.7- Usuarios ................................................................................................. 28

1.8.2.8- Panel de control ...................................................................................... 29

1.8.2.9- Categorías .............................................................................................. 30

1.8.2.10- Captura de códigos QR......................................................................... 31

1.8.2.11- Contacto ............................................................................................... 31

1.9- Planificación .......................................................................................................... 32

1.10- Orden de prioridad entre los documentos básicos ............................................... 35


8

1.0- Hoja de Identificación

Descripción Plataforma para intercambio de información socio-cultural Tipo de proyecto: Proyecto de Ingeniería/Software

Situación Tipo vía: Calle Nombre vía: Alfonso X el Sabio. s/n Localidad: Linares Código Postal: 23700 Provincia: Jaén Coordenadas Geográficas: 38.084881, -3.646297

Empresa que

encarga el

proyecto

Nombre o Razón Social: E.P.S.L Dirección: Tipo vía: Calle Nombre Vía: Alfonso X el Sabio. s/n Localidad: Linares Código Postal: 23700 Provincia: Jaén Teléfono: Fax:

Datos del

proyectista

Apellidos y Nombre: Cotes Ruiz, Iván Tomás Titulación: Graduado en Ingeniería Telemática No Colegiado: Dirección: C\ Pirita, 34 Localidad: Linares Código Postal: 23700 Provincia: Jaén Teléfono: 697990284 Correo electrónico: [email protected]

Visado del Colegio Colegio Oficial de Ingenieros Técnicos de Telecomunicación

Fecha de

presentación

Linares, 2 de Septiembre de 2014

Firma del Tutor Firma del Tutor

Firma del Graduado Visado del Colegio


9

1.1- Objeto

El presente proyecto describe el desarrollo de una plataforma web para el

intercambio de información social, festividades, o cultural entre los distintos usuarios que

componen la red. Se debe visualizar dicha plataforma como una red social, pero no enfoca

los mismos objetivos que las presentes redes sociales como Facebook o Twitter.

La plataforma permitirá crear eventos para ser compartidos entre los usuarios. No

es objetivo ser competencia de las actuales redes sociales. Se pretende ofrecer a los

usuarios una plataforma donde puedan compartir eventos de interés social y comentar

sobre ellos. Los eventos se agruparán en distintas categorías para facilitar su encuentro

basado en los gustos de cada usuario.

La plataforma se dividirá en parte de cliente y parte de servidor. En la parte de

cliente se ofrecerá al usuario la posibilidad de conectarse vía web con el servidor, mediante

un navegador web, o bien podrá usar la aplicación para el sistema Android. El portal web

se compondrá de varios lenguajes de marcas, como son: HTML, JavaScript y CSS. En la

parte de servidor, el servicio estará ofrecido por PHP y una base de datos sobre MySQL.

El control de acceso a la plataforma se realizará mediante credenciales básicas de

usuario y contraseña, pero la contraseña no será nunca enviada en texto plano, sino que

se enviará una función resumen MD5 de ella, para evitar robos de cuentas por ataques de

repetición.

1.2- Alcance

El alcance del proyecto define el diseño de las distintas aplicaciones que componen

la plataforma y la interactuación entre ellas, y un presupuesto estimado del coste total de

producción para este proyecto. Se definirán las partes de cliente y servidor, así como la

estructura de la base de datos que contendrá la información de dicha plataforma. Se

indicará los requisitos de seguridad mínimos a exigir por el servidor.

No es ámbito de este proyecto contemplar el servidor que alojara la plataforma.

Debido a que los requisitos de recursos del servidor varían mucho dependiendo del número

de usuarios registrados, se hace imposible tratar de predecir los recursos necesarios para

que la plataforma funcione sin problemas ni saturación. Es por este motivo que el diseño

del servidor no se considera dentro del alcance del proyecto, limitándose éste al diseño de

la parte software.

1.3- Antecedentes

El creciente número de Smartphone en el mercado hace que las tecnologías estén

en continuo cambio para satisfacer las necesidades de un público exigente que gusta de


10

seguir los últimos cambios. Por este motivo, los terminales Smartphone son cada vez más

sofisticados y ofrecen al usuario cada vez un mayor número de servicios. La notable ventaja

de dichos terminales es sin duda la gran portabilidad que ofrecen, siendo potenciales

ordenadores del tamaño de un bolsillo, permiten infinidad de usos que años atrás sólo se

conseguían en un PC.

Con la aparición del sistema libre Android se abren las puertas a los desarrolladores

más novatos para que puedan programar sus propias aplicaciones con gran facilidad y una

generosa documentación en Internet facilita el desarrollo. Sistemas como los lectores de

códigos QR y NFC, con un potencial aún por explotar ofrecen a los programadores de dicho

sistema Android unas funcionalidades elegantes para añadir a sus aplicaciones.

Este proyecto ofrece a los usuarios la posibilidad de compartir eventos sociales de

interés con sus seguidores.

1.4- Normas y referencias

En este apartado se incluyen las referencias a elementos usados en esta memoria

con pertenencia a terceros. Se enumeran por orden correlativo y entre corchetes, y de tal

modo serán mencionados en la documentación.

[1] Karan Balkar. Implementación del scanner de código de barras usando ZXing en

Android. Threads of Life

http://karanbalkar.com/2013/12/tutorial-65-implement-barcode-scanner-using-zxing-in-

android/

[2] Ravi Tamada. Android funcionando con Google Maps v2. Android Hive

http://www.androidhive.info/2013/08/android-working-with-google-maps-v2/

[3] Fotografía Escuela Politécnica Superior de Linares. Linares28

http://www.linares28.es/wp-content/uploads/2013/02/EPSL-Pano-

nocturna.jpg?resize=1200%2C686

[4] Fotografía Tokyo Dome. Wikipedia

http://upload.wikimedia.org/wikipedia/commons/7/7e/Tokyo_Dome_night.jpg

[5] Fotografía Museo Nacional de Tokyo.

http://m1.paperblog.com/i/101/1018003/ueno-L-5BoccF.jpeg

[6] Portada álbum Kuro to Kage del grupo Kuroyume. Jpopasia

http://www.jpopasia.com/i1/news/4/15337-pnk0t1hg9y.jpg

[7] Ejemplo de imagen de usuario. Taringa

http://2.bp.blogspot.com/-

hnG4fOoTu9M/TjlmEhwELZI/AAAAAAAAC1w/oWmolKHTidM/s1600/gothic-wallpaper-

126-14160.jpeg

http://karanbalkar.com/2013/12/tutorial-65-implement-barcode-scanner-using-zxing-in-android/

http://karanbalkar.com/2013/12/tutorial-65-implement-barcode-scanner-using-zxing-in-android/

http://www.androidhive.info/2013/08/android-working-with-google-maps-v2/

http://www.linares28.es/wp-content/uploads/2013/02/EPSL-Pano-nocturna.jpg?resize=1200%2C686

http://www.linares28.es/wp-content/uploads/2013/02/EPSL-Pano-nocturna.jpg?resize=1200%2C686

http://upload.wikimedia.org/wikipedia/commons/7/7e/Tokyo_Dome_night.jpg

http://m1.paperblog.com/i/101/1018003/ueno-L-5BoccF.jpeg

http://www.jpopasia.com/i1/news/4/15337-pnk0t1hg9y.jpg

http://2.bp.blogspot.com/-hnG4fOoTu9M/TjlmEhwELZI/AAAAAAAAC1w/oWmolKHTidM/s1600/gothic-wallpaper-126-14160.jpeg




11

[8] Ejemplo de imagen de usuario por defecto. HTCmanía

http://avatar.htcmania.com/avatares/avatar481150_1.gif

[9] Icono muestra del número de usuarios

http://www.pramazut.com.pl/images/template/ico1.png

1.5- Definiciones y abreviaturas

- HTML: Lenguaje de Marcas de Hipertexto.

- CSS: Hojas de Estilos en Cascada.

- JS: JavaScript.

- SGBD: Sistema Gestor de Base de Datos.

- Código QR: Código de Respuesta Rápida.

- NFC: Comunicación de Corto Alcance.

- PC: Ordenador Personal.

- OS: Sistema Operativo.

- DOM: Modelo de Objetos del Documento.

- URL: Localizador de Recursos Uniforme.

- XML: Lenguaje de Marcas Extensible.

- SQL: Lenguaje de Consultas Estructurado.

- SMS: Servicio de Mensajes Cortos.

- API: Interfaz de Programación de Aplicaciones.

- SDK: Kit de Desarrollo de Software.

- APK: Archivo de Paquete de Aplicación.

- CLI: Interfaz de Línea de Comandos.

1.6- Requisitos de diseño

Se tiene la necesidad de crear una plataforma para compartir eventos. Los

requisitos mínimos a exigir son:

- Debe poder ser accesible desde navegador web en cualquier PC.

- Se debe proporcionar una aplicación para el sistema operativo Android para

facilitar el uso por parte de los usuarios que posean un terminal Smartphone con

dicho SO.

- Debe existir una base de datos que almacene toda la información relativa a

usuarios y eventos. La información de contraseñas se deberá almacenar

convenientemente cifrada.

- Para evitar la incomodidad de los usuarios, no se les solicitará información

personal como dirección, teléfono o incluso nombre y apellidos. Tan sólo se

http://avatar.htcmania.com/avatares/avatar481150_1.gif

http://www.pramazut.com.pl/images/template/ico1.png


12

identificará mediante un usuario y se le exigirá una dirección de correo

electrónico válida para validar la cuenta. Dicha dirección de email no será usada

ni vendida a terceros; tan sólo se exige como vía de comunicación entre los

administradores y el usuario en caso de ser necesario.

- Junto a los eventos se mostrará un mapa de Google con el emplazamiento del

evento en cuestión.

- En la aplicación de Android, deberá poderse compartir eventos mediante

códigos QR.

1.7- Análisis de soluciones

De las diferentes tecnologías enumeradas en el apartado anterior, se consideran

las distintas ventajas e inconvenientes de las distintas alternativas a poder elegir.

En la parte de cliente web no hay alternativas. Las tres tecnologías descritas

funcionan en conjunto para ofrecer al usuario una experiencia de navegación

cómoda y atractiva. HTML define la estructura de la página, CSS define los

estilos que decoran la página y JS añade animaciones y efectos atractivos, así

como funcionalidades extra que no se consiguen con simple código HTML.

En la parte de servidor pueden elegirse las soluciones PHP y JSP. Ambos son

lenguajes complejos y robustos, ofreciendo a los programadores gran número

de funcionalidades para desarrollar páginas web completas

En la base de datos existen infinidad de sistemas gestores, libres y privativos,

gratuitos y de pago donde poder elegir alternativas diversas. Para evitar el uso

de tecnologías privativas se estudia la viabilidad de los dos sistemas

anteriormente estudiados, MySQL y PostgreSQL.

1.8- Resultados finales

Como resultado del desarrollo y programación de las distintas partes que componen

la plataforma se obtiene dos aplicaciones de cliente, una web y una aplicación de Android

y una parte de servidor, conteniendo el servidor PHP y la base de datos. A continuación se

describirán las distintas opciones que ofrecen ambas aplicaciones de cliente y la

interacción con el servidor.

1.8.1- Cliente web

Se ofrece una página web programada con el lenguaje de marcas HTML, aplicando

hojas de estilo CSS y ciertas funciones JavaScript para añadir atractivo visual al portal. Se

trata de dar una gran facilidad de uso en las diferentes opciones que ofrece la plataforma.


13

Se ofrece una barra principal en la parte superior común a todos los archivos que

conforman el cliente web.

Figura 1.1- Menú principal

El menú principal contiene enlaces a las siguientes funciones:

Eventos: permite visualizar los eventos de los usuarios seguidos. Los submenús

permiten crear nuevos eventos y modificar la información de los eventos subidos

por el usuario.

Usuarios: permite encontrar usuarios, ver sus eventos e información y seguir a los

usuarios. Los submenús permiten registrarse, acceder a la página (login) y

modificar información del perfil de usuario.

Categorías: permite ver categorías de eventos y los eventos asociados.

Aplicación móvil: ofrece a los usuarios un archivo .apk con la aplicación Android.

Contacto: ofrece información sobre la plataforma, email de contacto y un campo

para poder mandar peticiones y consultas a los administradores.

1.8.1.1- Página principal

Ofrece enlaces a 3 eventos aleatorios de la plataforma.

Figura 1.2- Esquema de la página principal

El esquema de la figura muestra la conexión entre el cliente web y el servidor. Ante

la petición del archivo index.php el servidor web Apache accede al archivo. Al contener

dicho archivo código PHP, éste es ejecutado, accediendo a la base de datos para obtener

Web

Navegador Web Parte de servidor

Apache

Obtención de información

De 3 eventos aleatorios GET / index.php

index.php

PHP

MySQL


14

la información necesaria para listar 3 eventos aleatorios. La sentencia SQL ejecutada para

tal fin es la siguiente:

'SELECT * FROM events ORDER BY rand() LIMIT 3'

1.8.1.2- Eventos

Muestra los diferentes eventos creados por los usuarios seguidos. Seguir a un

usuario permite poder listar sus eventos en este apartado.

Requiere acceder a la plataforma. El esquema muestra una simple petición GET

del archivo events.php. Dicho archivo contiene código PHP para acceder a la base de datos

y obtener la información de los eventos publicados por usuarios a los que sigue el usuario

que ha iniciado sesión. No requiere el envío de ningún parámetro, pues el identificador de

usuario se obtiene de la sesión iniciada con anterioridad. La sentencia SQL usada es:

'SELECT * FROM events WHERE id_user IN (SELECT id_user2 FROM friends

WHERE id_user1 = "'.$_SESSION['id_user'].'") ORDER BY evdate'

Al pinchar sobre un evento se podrá acceder a la información detallada de dicho

evento. La información obtenida sobre los eventos es la siguiente:

Emplazamiento del evento sobre un mapa de Google.

Fecha de creación del evento.

Hipervínculo al usuario que creó el evento. Pinchar sobre el nombre vincula con la

información de dicho usuario.

Hipervínculo a las categorías asociadas al evento.

Además, permite al creador o a un administrador añadir o quitar categorías al

evento.

A cada evento creado le corresponderá un código QR para poder ser compartido

de un modo sencillo.

Web


Apache

Obtención de los eventos

Publicados por usuarios a

Los que sigue el usuario GET / events.php

events.php

PHP

MySQL


15

Para facilitar el método de compartición de eventos se ofrece al usuario un botón

para exportar la información a un PDF generado dinámicamente para cada evento.

Dicho PDF podrá ser impreso y expuesto en un tablón de anuncios convencional.

Los usuarios que deseen ver más información del evento tan solo tendrán que

capturar el código QR con la aplicación de Android y podrán acceder al mapa de

Google con la localización del evento y leer los comentarios de otros usuarios.

Además, junto al evento se ofrece el código QR correspondiente al creador de dicho

evento. Este QR también podrá ser capturado para poder leer otros eventos

publicados por este usuario.

Listado de comentarios sobre el evento. El elemento “Reply” es un botón que

despliega un campo para responder al comentario. Las respuestas aparecen

desplazadas. Dicho efecto se consigue mediante una función recursiva en PHP.

Pinchar sobre el botón superior derecho del comentario permite borrarlo. En la parte

inferior se ofrece una paginación para los eventos. Por defecto se ha configurado a

cinco comentarios con sus respuestas por página.

Un campo para añadir un comentario al evento.

El esquema muestra una petición GET del archivo events-single.php. Se pasa como

parámetro, llamado “ev”, el identificador del evento a mostrar su información. Dicho archivo

contiene código PHP para acceder a la base de datos y obtener la información del evento

específico que indica el parámetro. La sentencia SQL usada en este archivo es:

'SELECT * FROM events INNER JOIN users ON events.id_user = users.id_user

WHERE events.id_ev = "'.$_GET['ev'].'"'

Web


Apache

Obtención de la información

Del evento del parámetro ev GET / events-single.php?ev=x

events-single.php

PHP

MySQL


16

1.8.1.3- Crear evento

Este submenú permite crear un nuevo evento. Exige acceder a la plataforma (login)

para crear un evento. La información del nuevo evento será:

Título del evento.

Descripción del evento. Puede ser multilínea e incluir URLs.

Localización en coordenadas (Latitud, Longitud). Puede ser introducido

manualmente o automático. Pulsar sobre el botón selecciona las coordenadas

locales, pero tiene una menor precisión que la opción manual.

Imagen asociada al evento.

Crear un evento permite a los usuarios seguidores acceder a la información y

comentar sobre él.

Requiere acceder a la plataforma. El esquema muestra una petición POST del

archivo events-create.php. Se envían como parámetros el título del nuevo evento, la

descripción del evento, la localización en longitud y latitud y la imagen asociada a dicho

evento. Se realizan ciertas transformaciones sobre los parámetros enviados. Dicho archivo

contiene código PHP para acceder a la base de datos y crear un nuevo evento definido por

los parámetros enviados. La sentencia SQL usada en este archivo es:

'INSERT INTO events(title, id_user, likes, ncomments, description, evdate, latitude,

longitude) values ("'$title.'", "'.$id.'", "0", "0", "'.$description.'", "'.$date.'", "'.$latlng[0].'",

"'.$latlng[1].'")'

1.8.1.4- Modificar eventos

Este submenú permite seleccionar el evento que se desea modificar. Una vez

seleccionado, la información que se permite modificar es la siguiente:

Web


Apache


Del evento del parámetro ev

POST / events-create.php

Título, descripción,

Localización, imagen

events-create.php

PHP

MySQL


17

Imagen.

Título.

Descripción.

Latitud y longitud.

La última opción permite borrar eventos, sólo si el usuario es el creador del evento

o es un administrador. Todos los cuadros son elementos desplegables.


archivo manage-single.php. Se envía como parámetro el campo a modificar, siendo posible

modificar el título de evento, la descripción, la imagen y las coordenadas de latitud y

longitud. Se realizan ciertas transformaciones sobre los parámetros enviados. Dicho

archivo contiene código PHP para acceder a la base de datos y modificar un campo según

el parámetro enviado. La sentencia SQL usada en este archivo depende del parámetro a

modificar:

Imagen: 'UPDATE events SET image = "'.$fileName.'" WHERE id_ev =

"'.$_GET['ev'].'"'

Titulo: 'UPDATE events SET title = "'.$_POST['newTitle'].'" WHERE id_ev =

"'.$_GET['ev'].'"'

Descripcion: 'UPDATE events SET description = "'.$description.'" WHERE id_ev

= "'.$_GET['ev'].'"'

Latitud: 'UPDATE events SET latitude = "'.$_POST['newLat'].'" WHERE id_ev =

"'.$_GET['ev'].'"'

Longitud: 'UPDATE events SET longitude = "'.$_POST['newLong'].'" WHERE

id_ev = "'.$_GET['ev'].'"'

Web


Apache

Modificación del

Parámetro elegido

POST / manage-single.php

Se envía el parámetro a

Modificar

manage-single.php

PHP

MySQL


18

1.8.1.5- Usuarios

En este menú se ofrece un listado de los usuarios registrados en la plataforma. La

información que se ofrece de cada uno es:

Imagen del perfil.

Nombre.

Usuarios a los que sigue.

Una serie de botones a la derecha de dependen de diversos factores.

Sobre el usuario que ha accedido al sistema se muestra un botón para acceder al

panel de control del usuario para modificar su información de perfil.

Sobre los demás usuarios, un botón para acceder a los eventos del usuario y un

segundo botón para seguir o dejar de seguir a dicho usuario.

El esquema muestra una petición GET del archivo users.php. Dicho archivo

contiene código PHP para acceder a la base de datos y obtener la información de todos

los usuarios registrados para ofrecer un listado de éstos. La sentencia SQL usada en este

archivo es:

'SELECT * FROM users'

Accediendo al perfil de un usuario se puede ver además, el número de usuarios a

los que sigue este usuario, el número de eventos creados por el él/ella, el código QR

generado para el usuario y todos los eventos publicados.

1.8.1.6- Registro

Este submenú permite el registro de un nuevo usuario. Los datos a introducir son:

Nombre de usuario.

Web


Apache

Obtención de la

Información de usuario GET / users.php

users.php

PHP

MySQL


19

Contraseña.

Fecha de nacimiento.

Dirección de correo electrónico.

La dirección de email deberá existir, pues la cuenta ha de ser verificada mediante

un enlace enviado por email al usuario.

El esquema muestra una petición POST del archivo users-signin.php. Se envían

como parámetros el nombre del usuario, dos contraseñas que deberán coincidir, la fecha

de nacimiento y el correo electrónico indicado. Se realizan ciertas transformaciones sobre

los parámetros enviados. Se enviará un email a dicho correo para verificar la cuenta. Dicho

archivo contiene código PHP para acceder a la base de datos y dar de alta un nuevo

usuario. La sentencia SQL usada en este archivo es la siguiente:

'INSERT INTO users(user,pass,email,birth_date,date_signin,active_code) VALUES

("'.$_POST['user'].'","'.$_POST['pass1'].'","'.$_POST['email1'].'","'.$_POST['birth_date'].'","'

.$date.'","'.$code.'")'

1.8.1.7- Acceso a la plataforma

Los usuarios usarán este submenú para volver a acceder a la plataforma de nuevo.

La única información solicitada será el nombre de usuario y la contraseña.

1.8.1.8- Panel de control

En este submenú los usuarios podrán modificar la información de su perfil.

El nombre de usuario es una clave UNIQUE en la base de datos, por lo que no

puede haber dos nombres de usuario iguales. Por este motivo, el cambio de nombre de

usuario sólo se permitirá si no existe ya dicho nombre registrado por otro usuario.

Web


Apache

Inserta la información

Del nuevo usuario

POST / users-signin.php

Usuario, contraseña1,

Contraseña2,

email

users-signin.php

PHP

MySQL


20


archivo user-panel.php. Se envía como parámetro el campo a modificar, siendo posible

modificar el nombre de usuario, la contraseña y la imagen de usuario. El campo nombre de

usuario es de tipo UNIQUE, por lo que sólo permitirá ser modificado si no existe otro usuario

registrado con ese nombre de usuario. Dicho archivo contiene código PHP para acceder a

la base de datos y modificar un campo según el parámetro enviado. La sentencia SQL

usada en este archivo depende del parámetro a modificar:

Imagen de usuario: 'UPDATE users SET image = "'.$fileName.'" WHERE

id_user = "'.$id.'"'

Nombre de usuario: 'UPDATE users SET user = "'.$_POST['newName'].'"

WHERE id_user = "'.$id.'"'

Contraseña: 'UPDATE users SET pass = "'.$_POST['newPass1'].'" WHERE

id_user = "'.$id.'"'

1.8.1.9- Categorías

Este menú permite ver las distintas categorías creadas y acceder a ellas para ver

los eventos asociados a dichas categorías. Asimismo, permite la creación de nuevas

categorías para adaptarse a nuevos eventos que requieran una categoría no existente.

Web


Apache

Modificación del

Parámetro elegido

POST / user-panel.php


Modificar

user-panel.php

PHP

MySQL


21

El esquema muestra una petición GET del archivo categories.php. Dicho archivo

contiene código PHP para acceder a la base de datos y obtener la información de todas

las categorías creadas para ofrecer un listado de éstas. La sentencia SQL usada en este

archivo es:

'SELECT * FROM categories ORDER BY nevents DESC'

El esquema muestra una petición GET del archivo categories-single.php. Se pasa

como parámetro, llamado “cat”, el identificador de la categoría a mostrar su información.

Dicho archivo contiene código PHP para acceder a la base de datos y obtener la

información de la categoría específica que indica el parámetro. La sentencia SQL usada

en este archivo es:

Web


Apache


De las categorías GET / categories.php

categories.php

PHP

MySQL

Web


Apache


De una categoría GET / categories-single.php?cat=x

categories-single.php

PHP

MySQL


22

'SELECT * FROM events WHERE id_ev IN (SELECT id_ev FROM ev_cat WHERE

id_cat = "'.$_GET['cat'].'")'

1.8.1.10- Aplicación móvil

Los usuarios de Android podrán usar este menú para descargar la aplicación para

Smartphone de la plataforma. La descarga se podrá realizar directamente pulsando sobre

el hipervínculo verde o capturando el QR mostrado a continuación, que contiene el enlace

de descarga del archivo Moyooshi.apk. El registro debe realizarse desde la versión web

con anterioridad, pues la aplicación de Android solicita usuario y contraseña en la primera

pantalla.

1.8.1.11- Contacto

En este menú se ofrece información de contacto de la plataforma. El campo de

comentario permite a los usuarios hacer peticiones o consultas a los administradores.

El esquema muestra una petición POST del archivo contact.php. Se envían como

parámetros el comentario y en identificador del usuario que envía dicho comentario. En

caso de ser un visitante no registrado, el campo del identificador se insertará como NULL.

Dicho archivo contiene código PHP para acceder a la base de datos e insertar un nuevo

comentario. La sentencia SQL usada en este archivo es:

'INSERT INTO messages (comment,id_user) VALUES("'.$_POST['comments'].'","'.$id.'")'

1.8.1.12- Buscador

En la cabecera de la página se muestra un buscador. La información buscada será

comprobada con eventos, usuarios y categorías. En el menú se indica los resultados de la

Web


Apache

Inserta nuevo

Comentario

POST / contact.php

Comentario,

Id_usuario

contact.php

PHP

MySQL


23

búsqueda. Se muestra si existe o no contenido relacionado con eventos, usuarios y

categorías. Se ofrece una separación de los resultados en 3 pestañas, para poder localizar

con más facilidad el contenido a buscar.

1.8.2- Cliente Android

Se desarrolla una aplicación simple que permite las funcionalidades básicas de la

versión web en un terminal móvil con sistema operativo Android. En este apartado se

exponen las funcionalidades ofrecidas en la aplicación de Android de la plataforma en los

diferentes menús.

1.8.2.1- Acceso

La principal diferencia con respecto a la aplicación web radica en que en la

aplicación de Android se solicita acceso en la primera pantalla. El registro se debe realizar

anteriormente en el portal web en el apartado explicado anteriormente. Por seguridad, no

se permite crear un usuario en la aplicación móvil ni modificar la información de usuario

para evitar capturas de la contraseña a través de la red. Estas acciones deberán llevarse

a cabo en la aplicación web, donde el servidor deberá ofrecer una conexión segura HTTPS,

cifrando los datos de la comunicación entre cliente y servidor en un túnel TLS e impidiendo

la captura de contraseñas por parte de terceros.

El esquema muestra una petición POST del archivo login.php. Se envían como

parámetros el nombre de usuario y contraseña del usuario que accede a la plataforma.

Dicho archivo contiene código PHP para acceder a la base de datos y autenticar el usuario

deseado. La sentencia SQL usada en este archivo es:

Android

Parte de servidor

Apache

Comprueba

Credenciales

De usuario

POST / login.php

Usuario, contraseña

login.php

PHP

MySQL

Aplicación de Android


24

'SELECT * FROM users WHERE user= "'.$_POST['user'].'"'

1.8.2.2- Menú principal

Tras acceder a la aplicación se muestra un menú principal que contiene todas las

opciones ofrecidas por la plataforma. Desde este menú se viaja a las distintas actividades

principales de la aplicación.

1.8.2.3- Eventos

La primera opción listada en el menú principal se accede al panel de eventos. Esta

actividad muestra los eventos publicados por los usuarios que son seguidos por el usuario

que ha accedido a la aplicación en el menú de acceso de la primera pantalla. Seleccionar

un evento lleva a la siguiente actividad, donde se puede acceder a la información específica

de dicho evento.

El esquema muestra una simple petición GET del archivo events.php. Dicho archivo

contiene código PHP para acceder a la base de datos y obtener la información de los

eventos publicados por usuarios a los que sigue el usuario que ha iniciado sesión. No

requiere el envío de ningún parámetro, pues el identificador de usuario se obtiene de la

sesión iniciada con anterioridad. La sentencia SQL usada es:

'SELECT id_ev,title FROM events WHERE id_user IN (SELECT id_user2 FROM

friends WHERE id_user1 IN (SELECT id_user FROM users WHERE user =

"'.$_POST['user'].'"))'

1.8.2.4- Evento individual

Tras seleccionar un evento la aplicación muestra esta actividad, donde se muestra

la información específica del evento elegido. La información que se puede acceder en esta

actividad es la siguiente:

Web


Apache


Publicados por usuarios a

Los que sigue el usuario GET / events.php

events.php

PHP

MySQL


25

Imagen de perfil del creador del evento.

Nombre del evento.

Fecha de publicación.



API de Google Maps mostrando la ubicación del evento.

Utilizando los botones bajo el mapa de Google se modifica el modo en que se

muestra el mapa.

El esquema muestra una petición GET del archivo events-single.php. Se pasa como

parámetro, llamado “ev”, el identificador del evento a mostrar su información. Dicho archivo

contiene código PHP para acceder a la base de datos y obtener la información del evento

específico que indica el parámetro. La sentencia SQL usada en este archivo es:

'SELECT *FROM events ev JOIN users us ON ev.id_user = us.id_user WHERE

ev.id_ev="'.$_POST["event"].'"'

1.8.2.5- Crear nuevo evento

La segunda opción que se lista en el menú principal conduce a la creación de un

nuevo evento. El creador del nuevo evento será, obviamente, el usuario con que se ha

accedido a la aplicación. Para crear un nuevo evento la información necesaria es:

Título del evento.

Descripción del evento. La descripción puede ser multilínea e incluir URLs.

Imagen que se asociara al evento. Para seleccionar la imagen se ha de pulsar sobre

el primer botón y se abrirá la galería de imágenes de Android para poder escoger

una imagen.

Web


Apache


Del evento del parámetro ev GET / events-single.php?ev=x

events-single.php

PHP

MySQL


26

Coordenadas geográficas en formato Longitud, Latitud.

Para impedir un envío de imagen excesivamente grande, la imagen elegida pasa

por dos procesos antes de ser enviada:

Reducción de resolución: la resolución de una imagen tomada con la

cámara de un Smartphone depende de los Megapíxeles que posea dicha

cámara. Reducir la resolución conlleva una reducción en el tamaño de la

imagen. Por tanto, se ha optado por limitar la mayor dimensión de la imagen,

ancho o alto, a 800 px, calculando la dimensión menor manteniendo las

proporciones entre ancho y alto de la imagen original.

Compresión de la imagen: tras la reducción de resolución se pasa la imagen

por un segundo proceso que aplica le una compresión al máximo de calidad.

Esta compresión disminuye el tamaño que ocupa la imagen en

almacenamiento, y por ende, el tamaño que bits que se envía por la red,

pero no reduce la resolución de la imagen, manteniendo la imagen a la

resolución obtenida como resultado de la reducción del primer proceso.

Para acelerar y facilitar el uso de la creación de eventos las coordenadas

geográficas serán obtenidas automáticamente por medio de GPS, no ofreciendo la opción

de indicar dichas coordenadas manualmente como sí se ofrece en la aplicación web. Puede

parecer contraproducente, pero el objetivo de la aplicación de Android es crear un evento

en un lugar de interés en el que se sitúa en dicho instante, tomando una foto de dicho lugar

y creando el evento. Si se necesitara indicar manualmente las coordenadas habría que

acceder a la aplicación de Google Maps para obtener la ubicación y después insertarla en

la aplicación móvil, lo que conllevaría un proceso más tedioso para crear eventos.

Web


Apache


Del evento del parámetro ev

POST / events-create.php

Título, descripción,

Localización, imagen

events-create.php

PHP

MySQL


27


archivo events-create.php. Se envían como parámetros el título del nuevo evento, la

descripción del evento, la localización en longitud y latitud y la imagen asociada a dicho

evento. Se realizan ciertas transformaciones sobre los parámetros enviados. Dicho archivo

contiene código PHP para acceder a la base de datos y crear un nuevo evento definido por

los parámetros enviados. La sentencia SQL usada en este archivo es:

'INSERT INTO events (title, id_user, description, evdate, longitude, latitude, admin)

VALUES ("'.$_POST['title'].'", "'.$id.'", "'.$description.'", "'.$date.'", "'.$latlng[1].'",

"'.$latlng[0].'", "0")'

Tras la subida de la imagen en un Thread aparte:

'UPDATE events SET image = "'.$fileName.'" WHERE id_ev = "'.$id.'"'

1.8.2.6- Modificación de eventos

La tercera opción ofrecida en el menú principal permite modificar un evento

publicado anteriormente por el usuario que ha accedido a la aplicación móvil. Al acceder a

dicha actividad, se muestra una lista con los eventos que pertenecen al usuario.

Seleccionando un evento, como el creado como ejemplo en el apartado anterior,

permite modificar la información aportada en la creación del evento, siendo los 3

parámetros a poder modificar el título, la descripción y la imagen.


archivo manage-single.php. Se envía como parámetro el campo a modificar, siendo posible

modificar el título de evento, la descripción y la imagen. Se realizan ciertas

transformaciones sobre los parámetros enviados. Dicho archivo contiene código PHP para

Web


Apache

Modificación del

Parámetro elegido

POST / manage-single.php


Modificar

manage-single.php

PHP

MySQL


28

acceder a la base de datos y modificar un campo según el parámetro enviado. La sentencia

SQL usada en este archivo depende del parámetro a modificar:

'UPDATE events SET title = "'.$_POST['title'].'", description = "'.$description.'"

WHERE id_ev = "'.$_POST['event'].'"'

1.8.2.7- Usuarios

Continuando con las funcionalidades de la aplicación, la cuarta opción del menú

principal permite poder acceder a la información de los otros usuarios que utilizan la

plataforma. Se muestra un listado donde se puede elegir el usuario a visualizar.

Al elegir un usuario, se ofrece la siguiente información de él/ella:

Imagen de perfil.

Nombre de usuario.


Fecha de registro en la plataforma.

Número de usuarios a los que sigue.

Numero de eventos que ha publicado.

Además, se ofrece un botón que cambia según se sigue o no se sigue al usuario,

permitiendo cambiar este estado. Seguir a un usuario permite poder ver los eventos que

publica en la primera opción del menú principal. Dejar de seguir a un usuario repercute en

un resultado inverso.

Junto a esta información, se ofrece una lista de los eventos publicados por dicho

usuario. Seleccionar un evento de la lista vincula con la actividad anterior para mostrar

eventos específicos.

Web


Apache

Obtención de la

Información de usuario GET / users.php

users.php

PHP

MySQL


29

El esquema muestra una petición GET del archivo users.php. Dicho archivo

contiene código PHP para acceder a la base de datos y obtener la información de todos

los usuarios registrados para ofrecer un listado de éstos. La sentencia SQL usada en este

archivo es:

'SELECT * FROM users'


En esta actividad permite acceder a la visualización de los eventos publicados por

el usuario que ha accedido a la aplicación. Discrepa del panel de control de la aplicación

web donde se permite la modificación de la información de usuario. El principal motivo de

este cambio radica en las conexiones de la capa de transporte. En la aplicación web, el

servidor que aloja dicha plataforma debe proveer de una conexión HTTPS segura, creando

túneles TLS que cifren de toda la información que sea transportada por la red que conecta

cliente y servidor. Dicho cifrado impide la captura por parte de terceros en una red insegura

y previene robos de contraseñas. Aunque las contraseñas no se envían en texto plano,

sino que se envía una función resumen MD5, y ésta no es reversible, puede ser reenviada

para un acceso por parte del usuario, conocido como ataque por repetición o Man-In-The-

Middle. Puesto que la aplicación móvil es débil ante estos ataques, se releva las funciones

de registro de usuarios y modificación de la información del perfil a la aplicación web, que

puede igualmente ser accesible sin problemas desde un navegador web en un

Smartphone.

Por tanto, la funcionalidad del panel de usuario en la aplicación de Android se

reduce a un acceso rápido a la visualización de los eventos publicados por el propio usuario

con anterioridad. La selección de uno de estos eventos lleva a la visualización del evento

elegido, como se ha mostrado en el apartado anterior.


30

El esquema muestra una petición POST del archivo user-panel.php. El parámetro

enviado es el identificador de usuario. Dicho archivo contiene código PHP para acceder a

la base de datos y obtener la información de todos los eventos publicados por el usuario

para ofrecer un listado de éstos. La sentencia SQL usada en este archivo es:

SELECT id_ev,title FROM events where id_user="'.$user1ID.'"


La siguiente opción listada en el menú principal lleva a la actividad de la gestión de

categorías. Dicha actividad permite la creación de una nueva categoría y ofrece un listado

de las categorías ya existentes.

Seleccionar una categoría muestra los eventos asociados a dicha categoría. La

selección de un evento específico permite visualizar dicho evento, como se ha mostrado

en apartados anteriores.

Web


Apache


Publicados por el usuario

POST / user-panel.php

id_usuario

user-panel.php

PHP

MySQL


31

El esquema muestra una petición GET del archivo categories.php. Dicho archivo

contiene código PHP para acceder a la base de datos y obtener la información de todas

las categorías creadas para ofrecer un listado de éstas. La sentencia SQL usada en este

archivo es:

'SELECT * FROM categories'

1.8.2.10- Captura de códigos QR

La penúltima opción del menú principal permite al usuario capturar un código QR.

Se ha de diferenciar 2 tipos de códigos QR:

Aquellos asociados a eventos. La captura de un QR de este tipo permite visualizar

el evento específico. Vincula con la actividad de evento específico.

Aquellos asociados a usuarios. La captura de un QR de este tipo permite visualizar

la información de dicho usuario y sus eventos. Vincula con la actividad de usuario

específico.

1.8.2.11- Contacto

La última opción del menú principal muestra la información de contacto y permite

poder enviar comentarios a los administradores.

Web


Apache


De las categorías GET / categories.php

categories.php

PHP

MySQL


32

El esquema muestra una petición POST del archivo contact.php. Se envían como

parámetros el comentario y en identificador del usuario que envía dicho comentario. Dicho

archivo contiene código PHP para acceder a la base de datos e insertar un nuevo

comentario. La sentencia SQL usada en este archivo es:

'INSERT INTO messages (comment,id_user) VALUES ("'.$_POST['comment'].'","'.$id.'")'

1.9- Planificación

Se disponen los 12 créditos de la asignatura Trabajo Fin de Grado como 300 horas

lectivas de trabajo donde se desarrollará dicho proyecto. La planificación que se ha

escogido ha sido a razón de 5 horas al día, 5 días a la semana. En total supondrá 25 horas

a la semana, 100 horas al mes. Se plantea una planificación de este proyecto dividida en

un total de 12 semanas para su finalización.

Una lista de las tareas llevadas a cabo para la elaboración de este proyecto se

recoge en la siguiente tabla.

Tarea Nº de semanas

Elección de las alternativas y estudio de la viabilidad del proyecto 1

Elección de la Solución. Diseño de la Base de Datos. Pruebas sobre

las funcionalidades básicas de las aplicaciones web y Android 1

Redacción del documento Memoria de la Documentación 1

Pruebas básicas de las aplicaciones sobre un hosting 1

Web


Apache

Inserta nuevo

Comentario

POST / contact.php

Comentario,

Id_usuario

contact.php

PHP

MySQL


33

Pruebas sobre la interactuación entre las diferentes partes de la

plataforma, clientes y servidor 1

Programación de la Aplicación Web y la parte de servidor

correspondiente. Verificación de funcionamiento en equipo local y

hosting

3

Programación de la Aplicación de Android y la parte de servidor

correspondiente. Verificación de funcionamiento en equipo local y

hosting

3

Finalización de la Documentación 1

Dicha planificación se sirve de un Diagrama de Gantt para ofrecer una visualización más clara. El diagrama correspondiente a este proyecto es

el siguiente.


1.10- Orden de prioridad entre los documentos básicos

Ante la inexistencia de planos en este proyecto software, el orden de prioridad se

define según el siguiente orden de prioridad:

1- Memoria

2- Anexos

3- Pliego de condiciones

4- Presupuesto

Se otorga la mayor prioridad a la memoria y anexos, pues es donde se ubica la

descripción del proyecto y el Manual de Usuario.

Plataforma de información social Anexos

36

Plataforma de

información social

Anexos




37

Contenido

2- Anexos ........................................................................................................................39

2.1- Manual de usuario .................................................................................................39

2.1.1- Cliente web .....................................................................................................39

2.1.1.1- Página principal .......................................................................................40

2.1.1.2- Eventos ...................................................................................................40

2.1.1.3- Crear evento ...........................................................................................45

2.1.1.4- Modificar eventos ....................................................................................46

2.1.1.5- Usuarios ..................................................................................................47

2.1.1.6- Registro ...................................................................................................49

2.1.1.7- Acceso a la plataforma ............................................................................50

2.1.1.8- Panel de control ......................................................................................51

2.1.1.9- Categorías...............................................................................................52

2.1.1.10- Aplicación móvil.....................................................................................52

2.1.1.11- Contacto ................................................................................................53

2.1.1.12- Buscador ...............................................................................................54

2.1.2- Cliente Android ................................................................................................56

2.1.2.1- Acceso ....................................................................................................56

2.1.2.2- Menú principal .........................................................................................56

2.1.2.3- Eventos ...................................................................................................57

2.1.2.4- Evento individual .....................................................................................58

2.1.2.5- Crear nuevo evento .................................................................................59

2.1.2.6- Modificación de eventos ..........................................................................61

2.1.2.7- Usuarios ..................................................................................................62

2.1.2.8- Panel de control ......................................................................................64

2.1.2.9- Categorías...............................................................................................65

2.1.2.10- Captura de códigos QR .........................................................................66

2.1.2.11- Contacto ................................................................................................67

2.2- Implementación del lector de códigos QR usando la librería ZXing .......................67


38

2.3- Google Maps v2 en Android ..................................................................................74

2.4- Esquemas .............................................................................................................81

2.4.1- Esquema cliente/servidor ................................................................................82

2.4.2- Diagrama lógico base de datos .......................................................................82


39

2.1- Manual de usuario

En este apartado se mostrarán las distintas opciones que ofrece la plataforma a los

usuarios. En primer lugar, se describirá el cliente web y la interactuación con el servidor y

la base de datos. En un segundo epígrafe, se abordará la versión de Android y las

diferencias con la versión web.

2.1.1- Cliente web

Se presenta una captura de la página principal y se analizan los distintos elementos

de la barra superior, desde donde se puede acceder a los archivos que componen la

plataforma.

Figura 2.1- Menú principal superior [3]

El menú principal contiene enlaces a las siguientes funciones:

Eventos: permite visualizar los eventos de los usuarios seguidos. Los submenús

permiten crear nuevos eventos y modificar la información de los eventos subidos

por el usuario.

Usuarios: permite encontrar usuarios, ver sus eventos e información y seguir a los

usuarios. Los submenús permiten registrarse, acceder a la página (login) y

modificar información del perfil de usuario.

Categorías: permite ver categorías de eventos y los eventos asociados.


40

Aplicación móvil: ofrece a los usuarios un archivo .apk con la aplicación Android.

Contacto: ofrece información sobre la plataforma, email de contacto y un campo

para poder mandar peticiones y consultas a los administradores.

2.1.1.1- Página principal

Ofrece enlaces a eventos aleatorios de la plataforma.

Figura 2.2- Página principal de la aplicación web [3] [4] [5] [6]

2.1.1.2- Eventos

Muestra los diferentes eventos creados por los usuarios seguidos. Seguir a un

usuario permite poder listar sus eventos en este apartado.


41

Figura 2.3- Eventos [5]

Al pinchar sobre un evento se podrá acceder a la información detallada de dicho

evento. La información obtenida sobre los eventos es la siguiente:

Emplazamiento del evento sobre un mapa de Google.

Fecha de creación del evento.

Hipervínculo al usuario que creó el evento. Pinchar sobre el nombre vincula con la

información de dicho usuario.

Hipervínculo a las categorías asociadas al evento.

Además, permite al creador o a un administrador añadir o quitar categorías al

evento.


42

Figura 2.4- Información de evento

A cada evento creado le corresponderá un código QR para poder ser compartido

de un modo sencillo.


43

Figura 2.5- Código QR de un evento

Figura 2.6- PDF generado de un evento [5]


44

Para facilitar el método de compartición de eventos se ofrece al usuario un botón

para exportar la información a un PDF generado dinámicamente para cada evento.

La figura anterior muestra un ejemplo de esta funcionalidad. Dicho PDF podrá ser

impreso y expuesto en un tablón de anuncios convencional. Los usuarios que

deseen ver más información del evento tan solo tendrán que capturar el código QR

con la aplicación de Android y podrán acceder al mapa de Google con la localización

del evento y leer los comentarios de otros usuarios. Además, junto al evento se

ofrece el código QR correspondiente al creador de dicho evento. Este QR también

podrá ser capturado para poder leer otros eventos publicados por este usuario.

Listado de comentarios sobre el evento. El elemento “Reply” es un botón que

despliega un campo para responder al comentario. Las respuestas aparecen

desplazadas. Dicho efecto se consigue mediante una función recursiva en PHP.

Pinchar sobre el botón superior derecho del comentario permite borrarlo. En la parte

inferior se ofrece una paginación para los eventos. Por defecto se ha configurado a

cinco comentarios con sus respuestas por página.

Figura 2.7- Comentarios de un evento [7] [8]

Un campo para añadir un comentario al evento.


45

Figura 2.8- Cuadro para comentar un evento

2.1.1.3- Crear evento

Este submenú permite crear un nuevo evento. Exige acceder a la plataforma (login)

para crear un evento. La información del nuevo evento será:

Título del evento.


Localización en coordenadas (Latitud, Longitud). Puede ser introducido

manualmente o automático. Pulsar sobre el botón selecciona las coordenadas

locales, pero tiene una menor precisión que la opción manual.



46

Figura 2.9- Creación de eventos

Crear un evento permite a los usuarios seguidores acceder a la información y

comentar sobre él.

2.1.1.4- Modificar eventos

Este submenú permite seleccionar el evento que se desea modificar. Una vez

seleccionado, la información que se permite modificar es la siguiente:

Imagen.

Título.

Descripción.

Latitud y longitud.


47

Figura 2.10- Modificación de eventos [5]

La última opción permite borrar eventos, sólo si el usuario es el creador del evento

o es un administrador. Todos los cuadros son elementos desplegables.

2.1.1.5- Usuarios

En este menú se ofrece un listado de los usuarios registrados en la plataforma. La

información que se ofrece de cada uno es:

Imagen del perfil.

Nombre.

Usuarios a los que sigue.


48

Figura 2.11- Listado de usuarios [7] [8] [9]

Una serie de botones a la derecha de dependen de diversos factores.

Sobre el usuario que ha accedido al sistema se muestra un botón para acceder al

panel de control del usuario para modificar su información de perfil.


49

Sobre los demás usuarios, un botón para acceder a los eventos del usuario y un

segundo botón para seguir o dejar de seguir a dicho usuario.

Accediendo al perfil de un usuario se puede ver además, el número de usuarios a los que

sigue este usuario, el número de eventos creados por el él/ella, el código QR generado

para el usuario y todos los eventos publicados.

Figura 2.12- Información de un usuario y QR asociado [6] [8]

2.1.1.6- Registro

Este submenú permite el registro de un nuevo usuario. Los datos a introducir son:

Nombre de usuario.

Contraseña.


50


Dirección de correo electrónico.

Figura 2.13- Formulario de registro

La dirección de email deberá existir, pues la cuenta ha de ser verificada mediante

un enlace enviado por email al usuario.

Figura 2.14- Ejemplo de email de verificación de cuenta

2.1.1.7- Acceso a la plataforma

Los usuarios usarán este submenú para volver a acceder a la plataforma de nuevo.

La única información solicitada será el nombre de usuario y la contraseña.


51

Figura 2.15- Acceso a la plataforma


En este submenú los usuarios podrán modificar la información de su perfil.

Figura 2.16- Panel de control [7]


52

El nombre de usuario es una clave UNIQUE en la base de datos, por lo que no

puede haber dos nombres de usuario iguales. Por este motivo, el cambio de nombre de

usuario sólo se permitirá si no existe ya dicho nombre registrado por otro usuario.


Este menú permite ver las distintas categorías creadas y acceder a ellas para ver

los eventos asociados a dichas categorías. Asimismo, permite la creación de nuevas

categorías para adaptarse a nuevos eventos que requieran una categoría no existente.

Figura 2.17- Categorías

2.1.1.10- Aplicación móvil

Los usuarios de Android podrán usar este menú para descargar la aplicación para

Smartphone de la plataforma. La descarga se podrá realizar directamente pulsando sobre


53

el hipervínculo verde o capturando el QR mostrado a continuación, que contiene el enlace

de descarga del archivo Moyooshi.apk. El registro debe realizarse desde la versión web

con anterioridad, pues la aplicación de Android solicita usuario y contraseña en la primera

pantalla.

Figura 2.18- Descarga de la APK

2.1.1.11- Contacto

En este menú se ofrece información de contacto de la plataforma. El campo de

comentario permite a los usuarios hacer peticiones o consultas a los administradores.


54

Figura 2.19- Información de contacto

2.1.1.12- Buscador

En la cabecera de la página se muestra un buscador. La información buscada será

comprobada con eventos, usuarios y categorías.

Figura 2.20- Campo de busquedas

La búsqueda de la palabra “ujaen” devuelve los siguientes resultados:

En el menú se indica los resultados de la búsqueda. En este caso, se muestra que

existe contenido relacionado con usuarios y categorías, pero no con eventos.

Figura 2.21- Muestra de búsqueda

Se ofrece una separación de los resultados en 3 pestañas, para poder localizar con

más facilidad el contenido a buscar.


55

Figura 2.22- Resultado de búsqueda

Figura 2.23- Resultado de búsqueda [8] [9]

Figura 2.24- Resultado de búsqueda


56

2.1.2- Cliente Android

En este apartado se exponen las funcionalidades ofrecidas en la aplicación de

Android de la plataforma. Se muestran los diferentes menús y un ejemplo de creación de

evento.

2.1.2.1- Acceso

La principal diferencia con respecto a la aplicación web es que en la aplicación de

Android se solicita acceso en la primera pantalla. El registro se debe realizar anteriormente

en el portal web en el apartado explicado anteriormente. Por seguridad, no se permite crear

un usuario en la aplicación móvil ni modificar la información de usuario para evitar capturas

de la contraseña a través de la red. Estas acciones deberán llevarse a cabo en la aplicación

web, donde el servidor deberá ofrecer una conexión segura HTTPS, cifrando los datos de

la comunicación entre cliente y servidor en un túnel TLS e impidiendo la captura de

contraseñas por parte de terceros. En la siguiente figura se muestra la pantalla de acceso

a la aplicación.

Figura 2.25- Acceso a la aplicación móvil

2.1.2.2- Menú principal

Tras acceder a la aplicación se muestra un menú principal que contiene todas las

opciones ofrecidas por la plataforma. Desde este menú se viaja a las distintas actividades

principales de la aplicación.


57

Figura 2.26- Menú principal

2.1.2.3- Eventos

La primera opción listada en el menú principal se accede al panel de eventos. Esta

actividad muestra los eventos publicados por los usuarios que son seguidos por el usuario

que ha accedido a la aplicación en el menú de acceso de la primera pantalla.

Seleccionar un evento lleva a la siguiente actividad, donde se puede acceder a la

información específica de dicho evento.

Figura 2.27- Listado de eventos


58

2.1.2.4- Evento individual

Tras seleccionar un evento la aplicación muestra esta actividad, donde se muestra

la información específica del evento elegido. La información que se puede acceder en esta

actividad es la siguiente:

Imagen de perfil del creador del evento.

Nombre del evento.

Fecha de publicación.



API de Google Maps mostrando la ubicación del evento.

Figura 2.28- Información de evento [4] [8]


59

Utilizando los botones bajo el mapa de Google se modifica el modo en que se

muestra el mapa.

Figura 2.29- Información de evento

2.1.2.5- Crear nuevo evento

La segunda opción que se lista en el menú principal conduce a la creación de un

nuevo evento. El creador del nuevo evento será, obviamente, el usuario con que se ha

accedido a la aplicación. Para crear un nuevo evento la información necesaria es:

Título del evento.

Descripción del evento. La descripción puede ser multilínea e incluir URLs.


60

Imagen que se asociara al evento. Para seleccionar la imagen se ha de pulsar sobre

el primer botón y se abrirá la galería de imágenes de Android para poder escoger

una imagen.

Coordenadas geográficas en formato Longitud, Latitud.

Para impedir un envío de imagen excesivamente grande, la imagen elegida pasa

por dos procesos antes de ser enviada:

Reducción de resolución: la resolución de una imagen tomada con la

cámara de un Smartphone depende de los Megapíxeles que posea dicha

cámara. Reducir la resolución conlleva una reducción en el tamaño de la

imagen. Por tanto, se ha optado por limitar la mayor dimensión de la imagen,

ancho o alto, a 800 px, calculando la dimensión menor manteniendo las

proporciones entre ancho y alto de la imagen original.

Figura 2.30- Creación de evento [3]


61

Compresión de la imagen: tras la reducción de resolución se pasa la imagen

por un segundo proceso que aplica le una compresión al máximo de calidad.

Esta compresión disminuye el tamaño que ocupa la imagen en

almacenamiento, y por ende, el tamaño que bits que se envía por la red,

pero no reduce la resolución de la imagen, manteniendo la imagen a la

resolución obtenida como resultado de la reducción del primer proceso.

Para acelerar y facilitar el uso de la creación de eventos las coordenadas

geográficas serán obtenidas automáticamente por medio de GPS, no ofreciendo la opción

de indicar dichas coordenadas manualmente como sí se ofrece en la aplicación web. Puede

parecer contraproducente, pero el objetivo de la aplicación de Android es crear un evento

en un lugar de interés en el que se sitúa en dicho instante, tomando una foto de dicho lugar

y creando el evento. Si se necesitara indicar manualmente las coordenadas habría que

acceder a la aplicación de Google Maps para obtener la ubicación y después insertarla en

la aplicación móvil, lo que conllevaría un proceso más tedioso para crear eventos.

La figura anterior muestra un ejemplo de creación de evento, indicando una

descripción multilínea y una URL. En el apartado 2.1.2.10 Se podrá observar el resultado

de dicha creación.

2.1.2.6- Modificación de eventos

La tercera opción ofrecida en el menú principal permite modificar un evento

publicado anteriormente por el usuario que ha accedido a la aplicación móvil. Al acceder a

dicha actividad, se muestra una lista con los eventos que pertenecen al usuario.

Figura 2.31- Selección de evento a modificar

Seleccionando un evento, como el creado como ejemplo en el apartado anterior,

permite modificar la información aportada en la creación del evento, siendo los 3

parámetros a poder modificar el título, la descripción y la imagen.


62

Figura 2.32- Modificación de evento [3]

2.1.2.7- Usuarios

Continuando con las funcionalidades de la aplicación, la cuarta opción del menú

principal permite poder acceder a la información de los otros usuarios que utilizan la

plataforma. Se muestra un listado donde se puede elegir el usuario a visualizar.

Figura 2.33- Listado de usuarios


63

Al elegir un usuario, se ofrece la siguiente información de él/ella:

Imagen de perfil.

Nombre de usuario.


Fecha de registro en la plataforma.

Número de usuarios a los que sigue.

Numero de eventos que ha publicado.

Además, se ofrece un botón que cambia según se sigue o no se sigue al usuario,

permitiendo cambiar este estado. Seguir a un usuario permite poder ver los eventos que

publica en la primera opción del menú principal. Dejar de seguir a un usuario repercute en

un resultado inverso.

Junto a esta información, se ofrece una lista de los eventos publicados por dicho

usuario. Seleccionar un evento de la lista vincula con la actividad anterior para mostrar

eventos específicos.

Figura 2.34- Información de usuario [8]


64

Figura 2.35- Evento de usuario [6] [8]


En esta actividad permite acceder a la visualización de los eventos publicados por

el usuario que ha accedido a la aplicación. Discrepa del panel de control de la aplicación

web donde se permite la modificación de la información de usuario. El principal motivo de

este cambio radica en las conexiones de la capa de transporte. En la aplicación web, el

servidor que aloja dicha plataforma debe proveer de una conexión HTTPS segura, creando

túneles TLS que cifren de toda la información que sea transportada por la red que conecta

cliente y servidor. Dicho cifrado impide la captura por parte de terceros en una red insegura


65

y previene robos de contraseñas. Aunque las contraseñas no se envían en texto plano,

sino que se envía una función resumen MD5, y ésta no es reversible, puede ser reenviada

para un acceso por parte del usuario, conocido como ataque por repetición o Man-In-The-

Middle. Puesto que la aplicación móvil es débil ante estos ataques, se releva las funciones

de registro de usuarios y modificación de la información del perfil a la aplicación web, que

puede igualmente ser accesible sin problemas desde un navegador web en un

Smartphone.

Por tanto, la funcionalidad del panel de usuario en la aplicación de Android se

reduce a un acceso rápido a la visualización de los eventos publicados por el propio usuario

con anterioridad.

Figura 2.36- Eventos del usuario

La selección de uno de estos eventos lleva a la visualización del evento elegido,

como se ha mostrado en el apartado anterior.


La siguiente opción listada en el menú principal lleva a la actividad de la gestión de

categorías. Dicha actividad permite la creación de una nueva categoría y ofrece un listado

de las categorías ya existentes.

Figura 2.37- Gestión de categorías


66

Seleccionar una categoría muestra los eventos asociados a dicha categoría. El

siguiente ejemplo muestra la selección de la categoría Japan de la figura anterior.

Figura 2.38- Eventos de una categoría

La selección de un evento específico permite visualizar dicho evento, como se ha

mostrado en apartados anteriores.

2.1.2.10- Captura de códigos QR

La penúltima opción del menú principal permite al usuario capturar un código QR.

Figura 2.39- Evento muestra tras captura de su código QR asociado [3] [7]


67

Se ha de diferenciar 2 tipos de códigos QR:

Aquellos asociados a eventos. La captura de un QR de este tipo permite visualizar

el evento específico, como se visualiza en la figura anterior.

Aquellos asociados a usuarios. La captura de un QR de este tipo permite visualizar

la información de dicho usuario y sus eventos, como se muestra en el apartado

2.1.2.7.

2.1.2.11- Contacto

La última opción del menú principal muestra la información de contacto y permite

poder enviar comentarios a los administradores.

Figura 2.40- Información de contacto

2.2- Implementación del lector de códigos QR usando la librería ZXing

[1] En este apartado de los Anexos se expondrá la configuración básica para el

funcionamiento del lector de códigos QR en la aplicación de Android. Se expondrá una

aplicación de ejemplo donde se podrá ver el uso básico y la obtención del contenido del


68

código QR en una variable. Para este propósito nos servimos de la librería libre ZXing (leído

Zebra Crossing). Los pasos esenciales para conseguir dicho lector son los siguientes:

1. Descargar la librería ZXing

El primer paso será descargar la librería para poder importarla como proyecto

Android en el entorno Eclipse. Para ello descargaremos el archivo hallado en la siguiente

URL: https://zxing.googlecode.com/files/ZXing-2.2.zip

También es necesario la descarga del archivo core.jar para el funcionamiento del

lector. Deberá ser añadida al proyecto de Android como se explicará a continuación. El

archivo puede ser descargado del siguiente enlace:

http://central.maven.org/maven2/com/google/zxing/core/2.2/core-2.2.jar

2. Crear los proyectos librería y principal

En segundo lugar, se descomprime el archivo ZXing-2.2.zip y se importa en Eclipse

el proyecto de la carpeta android, marcando la opción de copiar el proyecto en el

workspace.

Figura 2.41- Importado del proyecto Android para el lector de QR

Una vez importado, se crea la carpeta libs dentro del proyecto y se copia dentro de

ella el archivo core-2.2.jar. En las propiedades del proyecto, marcar el proyecto como

librería y añadir el archivo core-2.2.jar al Java Build Path.

https://zxing.googlecode.com/files/ZXing-2.2.zip

http://central.maven.org/maven2/com/google/zxing/core/2.2/core-2.2.jar


69

Figura 2.42- Marcado de librería en el proyecto android

Figura 2.43- Importado de la librería core.jar


70

3. Crear la aplicación principal que usará el lector

Se crea un nuevo proyecto en eclipse en blanco. Al igual modo que en el proyecto

anterior, se añade el archivo core-2.2.jar en la carpeta libs y se añade al Java Build Path.

Además, se ha de indicar el uso del otro proyecto al que anteriormente se marcó como

librería.

Figura 2.44- Añadido del proyecto del lector de códigos QR

Al layout principal (activity_main.xml) se le añade un botón que será el responsable

de, al pulsarlo, iniciar la aplicación que captura los códigos QR. El resultado del archivo es

el siguiente:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="${relativePackage}.${activityClass}" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="134dp" android:text="@string/hello_world" /> <Button


71

android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/textView1" android:layout_centerHorizontal="true" android:layout_marginBottom="50dp" android:text="Capture" /> </RelativeLayout>

En el archivo ActivityMain.java se añade el siguiente código comentado:

package com.pruebaqr;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.widget.*;

public class MainActivity extends Activity

{

Button button1;

TextView textView1;

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Se localizan los elementos del layout, el botón y el campo de

texto

button1=(Button)findViewById(R.id.button1);

textView1=(TextView)findViewById(R.id.textView1);

//Crea el evento de captura de pulsaciones sobre el botón

button1.setOnClickListener(new View.OnClickListener()

{

@Override

public void onClick(View v)

{

//Al pulsar, inicia la aplicación de captura


72

Intent intent = new

Intent("com.google.zxing.client.android.SCAN");

intent.putExtra("SCAN_MODE", "QR_CODE_MODE");

startActivityForResult(intent, 0);

}

});

}

public void onActivityResult(int requestCode, int resultCode, Intent

intent)

{

if (requestCode == 0)

{

if (resultCode == RESULT_OK)

{

//Tras una captura exitosa, el resultado se guarda en la

variable contents

String contents = intent.getStringExtra("SCAN_RESULT");

String format = intent.getStringExtra("SCAN_RESULT_FORMAT");

//Se comprueba el resultado mostrando el contenido de la

// variable en el campo de texto del layout

textView1.setText(contents);

}

else

{

if (resultCode == RESULT_CANCELED)

{

// Handle cancel

Log.i("App","Scan unsuccessful");

}

}

}

}

}

En el archivo manifest.xml se añade el permiso de Cámara.


73

4. Comprobación del resultado

Para comprobar el funcionamiento de la aplicación se ha generado el siguiente

código QR con el contenido en texto “ujaen”. Se utiliza la aplicación recién creada para

verificar el resultado.

Figura 2.45- QR con texto “ujaen”

Figura 2.46- Prueba de la aplicación de captura de códigos QR

Adaptación y traducción del tutorial de la referencia [1].


74

2.3- Google Maps v2 en Android

En este Anexo se trata de explicar los pasos a seguir para tener en funcionamiento

los mapas de Google en una aplicación de Android. Se utiliza el tutorial de la referencia [2].

1. Descargar Google Play Services

La API de Google Maps v2 forma parte de la SDK de Google Play Services. Por lo

tanto, el primer paso para tener los mapas funcionando en la aplicación de Android será

descargar el Google Play Services desde la SDK de Android en Eclipse.

Figura 2.47- Instalación de Google Play services

2. Importando Google Play Services en Eclipse

Tras descargar Play Services se necesita importarlo a Eclipse, donde será usado

como librería para el proyecto principal. Se importa la carpeta android-sdk-

windows\extras\google\google_play_services\libproject\google-play-services_lib

marcando la casilla de Copiar proyecto en el workspace.


75

Figura 2.48- Importado del proyecto de Google Play services

3. Obteniendo la clave para la API de Google Maps

El tercer paso será obtener la clave SHA-1 necesaria para el funcionamiento de

Google Maps. Para ello se utilizará la herramienta de Java keytool. Se abre un terminal y

dependiendo del sistema operativo en el que se encuentra se escribe uno de los siguientes

comandos:

Windows:

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -

alias androiddebugkey -storepass android -keypass android

Linux o Mac OS:

keytool -list -v -keystore ~/.android/debug.keystore -alias

androiddebugkey -storepass android -keypass android

En la salida del comando se obtiene la clave SHA-1.


76

Figura 2.49- Obtención de la clave SHA-1

A continuación, se abre la consola de la API de Google en este enlace.

Se selecciona la pestaña Servicios a la izquierda y se activa la opción Google Maps

Android API v2.

Figura 2.50- Activación de Google Maps Android API v2

Una vez activado, se selecciona API Access en el lado izquierdo y se pulsa sobre Crear

nueva Clave de Android.

https://code.google.com/apis/console/


77

Figura 2.51- Obtención clave para API de Google Maps

Se introduce la clave SHA-1 obtenida por el keytool y el nombre del paquete del proyecto,

separados por un punto y coma (;).


78

Se anota la API key para su posterior uso en la aplicación.


4. Creación del proyecto principal

Este será el proyecto que contendrá el mapa de Google. Se debe crear indicando

el mismo nombre de paquete que el aportado para la obtención de la API key. Se indica en

las propiedades del proyecto que usa como librería el proyecto importado anteriormente de

Google Play Services.

Se añade la API key en el archivo manifest.xml, sustituyendo el valor android:value

por la API key obtenida anteriormente.



<meta-data

android:name="com.google.android.maps.v2.API_KEY"

android:value="AIzaSyBZMlkOv4sj-M5JO9p6wksdax4TEjDVLgo" />

Se necesita aportar ciertos permisos y características a la aplicación:

ACCESS_NETWORK_STATE.

INTERNET.

WRITE_EXTERNAL_STORAGE.

ACCESS_COARSE_LOCATION.

ACCESS_FINE_LOCATION.

OpenGL ES V2.

El estado final del archivo AndroidManifest.xml es el siguiente:

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="info.androidhive.googlemapsv2"

android:versionCode="1"

android:versionName="1.0" >

<permission

79

android:name="info.androidhive.googlemapsv2.permission.MAPS_RECEIVE"

android:protectionLevel="signature" />

<uses-permission

android:name="info.androidhive.googlemapsv2.permission.MAPS_RECEIVE" />

<uses-sdk

android:minSdkVersion="12"

android:targetSdkVersion="17" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission

android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />



<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />



<uses-feature

android:glEsVersion="0x00020000"

android:required="true" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name">

<activity

android:name="info.androidhive.googlemapsv2.MainActivity"

android:label="@string/app_name"

android:theme="@style/AppBaseTheme">

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>



<meta-data

android:name="com.google.android.maps.v2.API_KEY"

android:value="AIzaSyBZMlkOv4sj-M5JO9p6wksdax4TEjDVLgo" />

</application>

</manifest>


80

Los mapas de Google son implementados usando MapFragments, los cuales son

una subclase de la clase Fragments. Para añadir un fragmento, se abre el archivo

activity_main.xml y se añade el siguiente código. Puede usarse el MapFragment bajo un

RelativeLayout o directamente en el archivo.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<fragment

android:id="@+id/map"

android:name="com.google.android.gms.maps.MapFragment"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</RelativeLayout>

En el archivo principal de la clase Java, MainActivity.class, se añade el siguiente código

para obtener la aplicación funcionando con un mapa de Google.

public class MainActivity extends Activity {

// Google Map

private GoogleMap googleMap;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

try {

// Loading map

initilizeMap();

} catch (Exception e) {

e.printStackTrace();

}

}

/**

* function to load map. If map is not created it will create it for you

* */

private void initilizeMap() {

if (googleMap == null) {

googleMap = ((MapFragment) getFragmentManager().findFragmentById(

R.id.map)).getMap();

// check if map is created successfully or not

if (googleMap == null) {


81

Toast.makeText(getApplicationContext(),

"Sorry! unable to create maps", Toast.LENGTH_SHORT)

.show();

}

}

}

@Override

protected void onResume() {

super.onResume();

initilizeMap();

}

}

Con esto se crea un mapa de Google básico, pero sin indicar ningunas coordenadas

en concreto no se visualiza el lugar deseado. Para mover la cámara a un lugar conocidas

sus coordenadas en latitud y longitud, se añade al código anterior el siguiente fragmento.

CameraPosition cameraPosition = new CameraPosition.Builder().target(

new LatLng(17.385044, 78.486671)).zoom(12).build();

googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

Para más información sobre las funcionalidades de los mapas de Google, visitar la web

citada en la referencia [2].

2.4- Esquemas

En este apartado se exponen diversos esquemas descriptivos de las conexiones

entre cliente y servidor y la estructura de la base de datos.


82

2.4.1- Esquema cliente/servidor

Figura 2.4.1- Esquema genérico conexiones cliente/servidor

2.4.2- Diagrama lógico base de datos

Figura 2.4.2- Diagrama de interrelaciones de las tablas de la base de datos

Web

Android

Parte de Cliente Parte de servidor

PHP MySQL

Servidor

Del

Cliente

Cliente

De la

Base de

Datos



Pliego de condiciones



Plataforma para intercambio de información sociocultural Pliego de condiciones

84

Contenido

3- Pliego de condiciones ..................................................................................................85

3.1- Hardware ...............................................................................................................85

3.1.1- Servidor ...........................................................................................................85

3.1.2- Android ............................................................................................................86

3.2- Software ................................................................................................................86

3.2.1- Servidor ...........................................................................................................86

3.2.2- Cliente web .....................................................................................................86

3.2.3- Android ............................................................................................................87


85

En este documento básico se enumerarán los distintos requisitos para el montaje

del proyecto. Se dividirá en distintos apartados considerando hardware y software y las

partes cliente y servidor que componen la plataforma.

3.1- Hardware

En el apartado de hardware se considerarán los requisitos de los recursos hardware

del servidor y Smartphone mínimo necesario para poder instalar la aplicación de Android.

3.1.1- Servidor

Los requisitos hardware del servidor son difíciles de considerar de antemano. Al ser

la plataforma estilo red social, los requisitos necesarios de recursos para el funcionamiento

del servidor dependerán enormemente del número de usuarios existentes en la plataforma

y el número de eventos que dichos usuarios creen. Esto conlleva que, sin saber el número

de usuarios exacto que habrá en dicha plataforma no se pueda predecir los recursos

necesarios de hardware para el correcto funcionamiento de ésta. Aún más. Incluso

sabiendo el número exacto de usuarios habría que tratar de predecir el consumo de

recursos medio de entre todos los usuarios registrados.

Se puede afirmar que los requisitos de recursos serán escalables con respecto al

número de usuarios. Estos recursos se pueden dividir en:

Capacidad de procesamiento. Cuantos más usuarios haya, mayor información

deberá ser procesada por el servidor. Una capacidad de procesamiento insuficiente

conllevará una respuesta del servidor inadecuada y una introducción de retardos

en las peticiones al servidor.

Cantidad de memoria. Mayor número de peticiones simultáneas necesita mayor

cantidad de memoria disponible para el almacenamiento temporal mientras la

información es procesada. Una cantidad de memoria insuficiente resulta en un

desbordamiento de memoria y esto lleva al servidor a no poder tratar más

información simultánea de los usuarios.

Capacidad de almacenamiento. Mayor número de usuarios conlleva mayor

memoria. Más usuarios crean más eventos. Más eventos ocupan mayor espacio en

disco duro. Una capacidad de almacenamiento insuficiente resulta en la

imposibilidad de almacenar más información de nuevos usuarios y eventos.

Ancho de banda. Cuantos más usuarios haya interactuando con la página se

necesitará un mayor ancho de banda para evitar retardos y congestión en la línea.

Además del ancho de banda de una línea se considera interesante el uso de líneas

paralelas para ofrecer redundancia a la conexión, en caso de haber muchas

conexiones simultáneas.


86

3.1.2- Android

Los requisitos mínimos de recursos hardware necesarios para el uso de la

aplicación de Android son:

1 GHz de procesador.

512 MB de memoria RAM.

Cámara para el lector de códigos QR.

Conectividad a la red de datos 2G/3G/4G.

Uso del GPS para la obtención de la localización.

Un total de 10 MB de tamaño en flash tras la instalación.

3.2- Software

En el apartado de software se considerarán las aplicaciones software necesarias a

instalar en el servidor y la versión de Android necesaria en el Smartphone para poder

instalar la aplicación, así como los permisos que debe aceptar el usuario a la hora de la

instalación.

3.2.1- Servidor

Las aplicaciones a instalar en el servidor para poder alojar el software que

interactuará con las aplicaciones de cliente son las siguientes:

Apache 2.4. Será el contenedor de los archivos de la parte servidor de la plataforma.

La configuración deberá soportar conexiones HTTPS seguras para evitar la captura

de datos por la red y así evitar los ataques de Man-In-The-Middle (MITM) o ataques

de repetición para el acceso a la plataforma por otro usuario y el robo de cuentas.

Este contenedor alojará los archivos que interactuarán con las aplicaciones de

cliente y la base de datos para el acceso a la información almacenada en ésta.

PHP 5.5.15. Es el lenguaje usado en el lado del servidor. Es el encargado de

consultar la información en la base de datos y devolverla al cliente mediante las

funciones echo() o print(). También mantiene una sesión con los datos del cliente

que ha accedido a la plataforma.

MySQL 5.6.16. Es el encargado de almacenar toda la información de la plataforma,

siendo ésta la relativa a usuarios, eventos, comentarios y categorías entre otros. La

base de datos es accedida por parte del servidor web cuando es necesaria la

obtención de información para ser ésta mostrada en el cliente.

3.2.2- Cliente web

En la parte correspondiente al cliente web los únicos requisitos necesarios para

poder usar la plataforma será un navegador web actualizado. Debe tener compatibilidad

con JavaScript pero se ha evitado la incorporación de etiquetas HTML5 para no impedir la

compatibilidad con los navegadores que aún no han incorporado dichas características.


87

Tan solo basta con tener un Internet Explorer 8 ó 9 como mínimo o un navegador como

Firefox o Google Chrome, los cuales no tienen problemas de instalarse en la última versión

disponible independientemente del sistema operativo de la máquina cliente.

3.2.3- Android

En la parte correspondiente al software de la aplicación de Android se considerarán

dos parámetros:

Versión del sistema operativo Android mínima necesaria para la instalación de la

aplicación. La aplicación se ha desarrollado con vista a una gran compatibilidad de

dispositivos del mercado Android. Por ello, se han incluido objetos y funciones que

requieren tan sólo de un sistema operativo versión 2.2 API 8 también conocido

como Froyo.

Permisos requeridos por la aplicación. Se requerirán los siguientes permisos que

deberán ser aceptados por el usuario en el momento de instalar la aplicación:

Internet. Requerido para poder interactuar con el servidor.

Access_coarse_location. Requerido para el acceso a la localización.

Access_fine_location. Requerido para el acceso a la localización.

Access_network_state. Requerido por Google Maps para comprobar el

estado de la red.

Write_external_storage. Requerido el acceso al almacenamiento del

Smartphone para la selección de imágenes de eventos.

Read_gservices. Requerido por Google Maps para el acceso al propio

servicio.



Presupuesto



Plataforma para intercambio de información sociocultural Presupuesto

89

Contenido

4- Presupuesto ................................................................................................................90


90

El presupuesto para este proyecto se compone de dos componentes:

- Costes de equipos

Serán aquellos costes derivados del uso de los equipos necesarios para la

elaboración de las aplicaciones de cliente y servidor de la plataforma. Se

considerará la parte proporcional de las horas invertidas en el desarrollo del

proyecto con respecto a las horas de vida totales de dichos equipos. Los

equipos utilizados son:

Ordenador: se estima una duración de vida de un ordenador en 5 años,

60 meses. Considerando el coste del ordenador utilizado en 800 euros

y un uso de 3 meses (12 semanas) en la elaboración del proyecto, la

parte proporcional al uso de este equipo resulta en 40 euros.

Smartphone: se estima una duración de vida de un Smartphone en 3

años, 36 meses. Considerando el coste del Smartphone utilizado en 550

euros y un uso de 3 meses (12 semanas) en la elaboración del proyecto,

la parte proporcional al uso de este equipo resulta en 45,83 euros.

- Costes de personal

Serán aquellos costes derivados de los costes sociales y las

remuneraciones de los integrantes del proyecto. En la siguiente tabla se

muestran los distintos trabajadores del proyecto y su coste horario y total:

Función Nº de horas Coste horario (€) Coste total (€)

Director de Proyecto 50 30 1500

Analista 30 25 750

Diseñador 100 15 1500

Programador 100 15 1500

Testeador 20 10 200

Total 300 5450

El presupuesto total se recoge en la tabla siguiente:


91

Concepto Presupuesto (€)

Coste de equipos 85,83

Coste de personal 5450

Costes indirectos (25%) 1362,5

Total sin I.V.A. 6812,5

I.V.A. (21%) 1430,62

Total con I.V.A. 8243,12

La totalidad del presupuesto para el presente proyecto de Plataforma para

Intercambio de Información Sociocultural asciende a ocho mil doscientos cuarenta y tres

euros con doce céntimos.

Linares, Septiembre de 2014

UNIVERSIDAD DE JAÉNtauja.ujaen.es/bitstream/10953.1/1815/1/TFG-Cotes-Ruiz... · 2015. 9. 25. ·...

Documents

Transcript of UNIVERSIDAD DE JAÉNtauja.ujaen.es/bitstream/10953.1/1815/1/TFG-Cotes-Ruiz... · 2015. 9. 25. ·...