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
Plataforma para intercambio de
información sociocultural
Memoria
Universidad de Jaén
Cotes Ruiz, Iván Tomás
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
Plataforma para intercambio de información sociocultural Memoria
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
Plataforma para intercambio de información sociocultural Memoria
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
Plataforma para intercambio de información sociocultural Memoria
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
Plataforma para intercambio de información sociocultural Memoria
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
Plataforma para intercambio de información sociocultural Memoria
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
Plataforma para intercambio de información sociocultural Memoria
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.
Plataforma para intercambio de información sociocultural Memoria
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
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Obtención de los eventos
Publicados por usuarios a
Los que sigue el usuario GET / events.php
events.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Obtención de la información
Del evento del parámetro ev GET / events-single.php?ev=x
events-single.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Obtención de la información
Del evento del parámetro ev
POST / events-create.php
Título, descripción,
Localización, imagen
events-create.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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.
Requiere acceder a la plataforma. El esquema muestra una petición POST del
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
Navegador Web Parte de servidor
Apache
Modificación del
Parámetro elegido
POST / manage-single.php
Se envía el parámetro a
Modificar
manage-single.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Obtención de la
Información de usuario GET / users.php
users.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Inserta la información
Del nuevo usuario
POST / users-signin.php
Usuario, contraseña1,
Contraseña2,
users-signin.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
20
Requiere acceder a la plataforma. El esquema muestra una petición POST del
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
Navegador Web Parte de servidor
Apache
Modificación del
Parámetro elegido
POST / user-panel.php
Se envía el parámetro a
Modificar
user-panel.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Obtención de la información
De las categorías GET / categories.php
categories.php
PHP
MySQL
Web
Navegador Web Parte de servidor
Apache
Obtención de los eventos
De una categoría GET / categories-single.php?cat=x
categories-single.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Inserta nuevo
Comentario
POST / contact.php
Comentario,
Id_usuario
contact.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Obtención de los eventos
Publicados por usuarios a
Los que sigue el usuario GET / events.php
events.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
25
Imagen de perfil del creador del evento.
Nombre del evento.
Fecha de publicación.
Descripción del evento. Puede ser multilínea e incluir URLs.
Imagen asociada al evento.
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
Navegador Web Parte de servidor
Apache
Obtención de la información
Del evento del parámetro ev GET / events-single.php?ev=x
events-single.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Obtención de la información
Del evento del parámetro ev
POST / events-create.php
Título, descripción,
Localización, imagen
events-create.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
27
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, 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.
Requiere acceder a la plataforma. El esquema muestra una petición POST del
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
Navegador Web Parte de servidor
Apache
Modificación del
Parámetro elegido
POST / manage-single.php
Se envía el parámetro a
Modificar
manage-single.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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 nacimiento.
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
Navegador Web Parte de servidor
Apache
Obtención de la
Información de usuario GET / users.php
users.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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'
1.8.2.8- Panel de control
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.
Plataforma para intercambio de información sociocultural Memoria
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.'"
1.8.2.9- Categorías
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
Navegador Web Parte de servidor
Apache
Obtención de los eventos
Publicados por el usuario
POST / user-panel.php
id_usuario
user-panel.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Obtención de la información
De las categorías GET / categories.php
categories.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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
Navegador Web Parte de servidor
Apache
Inserta nuevo
Comentario
POST / contact.php
Comentario,
Id_usuario
contact.php
PHP
MySQL
Plataforma para intercambio de información sociocultural Memoria
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.
Plataforma para intercambio de información sociocultural Memoria
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
Universidad de Jaén
Cotes Ruiz, Iván Tomás
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
Plataforma de información social Anexos
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
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
43
Figura 2.5- Código QR de un evento
Figura 2.6- PDF generado de un evento [5]
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
50
Fecha de nacimiento.
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.
Plataforma de información social Anexos
51
Figura 2.15- Acceso a la plataforma
2.1.1.8- Panel de control
En este submenú los usuarios podrán modificar la información de su perfil.
Figura 2.16- Panel de control [7]
Plataforma de información social Anexos
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.
2.1.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.
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
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
55
Figura 2.22- Resultado de búsqueda
Figura 2.23- Resultado de búsqueda [8] [9]
Figura 2.24- Resultado de búsqueda
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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
Plataforma de información social Anexos
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.
Descripción del evento. Puede ser multilínea e incluir URLs.
Imagen asociada al evento.
API de Google Maps mostrando la ubicación del evento.
Figura 2.28- Información de evento [4] [8]
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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]
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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
Plataforma de información social Anexos
63
Al elegir un usuario, se ofrece la siguiente información de él/ella:
Imagen de perfil.
Nombre de usuario.
Fecha de nacimiento.
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]
Plataforma de información social Anexos
64
Figura 2.35- Evento de usuario [6] [8]
2.1.2.8- Panel de control
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
Plataforma de información social Anexos
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.
2.1.2.9- Categorías
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
Plataforma de información social Anexos
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]
Plataforma de información social Anexos
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
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
69
Figura 2.42- Marcado de librería en el proyecto android
Figura 2.43- Importado de la librería core.jar
Plataforma de información social Anexos
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
Plataforma de información social Anexos
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
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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].
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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 (;).
Figura 2.52- Obtención clave para API de Google Maps
Plataforma de información social Anexos
78
Se anota la API key para su posterior uso en la aplicación.
Figura 2.53- Obtención clave para API de Google Maps
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.
<!-- Google Maps API Key -->
<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
Plataforma de información social Anexos
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" />
<!-- Required to show current location -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- Required OpenGL ES 2.0. for Maps V2 -->
<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>
<!-- Google API Key -->
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="AIzaSyBZMlkOv4sj-M5JO9p6wksdax4TEjDVLgo" />
</application>
</manifest>
Plataforma de información social Anexos
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) {
Plataforma de información social Anexos
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.
Plataforma de información social Anexos
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
Plataforma para intercambio de
información sociocultural
Pliego de condiciones
Universidad de Jaén
Cotes Ruiz, Iván Tomás
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
Plataforma para intercambio de información sociocultural Pliego de condiciones
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.
Plataforma para intercambio de información sociocultural Pliego de condiciones
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.
Plataforma para intercambio de información sociocultural Pliego de condiciones
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.
Plataforma para intercambio de
información sociocultural
Presupuesto
Universidad de Jaén
Cotes Ruiz, Iván Tomás
Plataforma para intercambio de información sociocultural Presupuesto
89
Contenido
4- Presupuesto ................................................................................................................90
Plataforma para intercambio de información sociocultural Presupuesto
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:
Plataforma para intercambio de información sociocultural Presupuesto
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
Top Related