1. El Trivial 2.0
Luis Miguel Amorós
Disseny de Xarxes i Aplicacions Telemàtiques Noemí Arbós
6 febrero 2012 Ester Mengual
Aleix Solé

2. @dxat_eetac
http://openwisp.net:8080/LENAWeb
lenaproject.blogspot.com
2

3. 1. Introducción 4. Android
1. Casos de uso
1. Descripción del proyecto
2. Mapa conceptual
2. Normativa del juego 3. Características tecnológicas
3. Objetivos del proyecto 4. Resultado
5. Arquitectura
2. Implementación
1. Funcionalidades
3. Dimensionado de la aplicación
1. Introducción
2. Diagrama de despliegue
2. Cadena de Markov
3. Web
1. Casos de uso 3. Comportamiento del usuario
2. Mapa conceptual
3. Tecnologías utilizadas 4. Planning
4. Modelo de datos
5. Arquitectura 1. Metodología de trabajo
6. Resultado 2. Product Backlog, primer y segundo sprint
3. Pivotal Tracker
5. Líneas futuras
2

4.  Juego para móviles con preguntas geolocalizadas.
 El usuario que acierte preguntas ganará puntos y
ascenderá en el ranking.
 Los usuarios pueden participar activamente: crear
nuevos trivials y preguntas.
 Los usuarios pueden modificar su perfil y ver
información del resto de usuarios.
 Un usuario puede seguir a otros usuarios (following), ver
y comentar sus acciones: trivials empezados, preguntas
contestadas.
4

5.  Reglas del Trivial de LENA:
3 visualizaciones máximas por
pregunta (se contabilizará como
incorrecta).
Respuesta correcta = 20 puntos.
Respuesta incorrecta = 0 puntos.
Máximo tiempo por pregunta: 40
segundos.
Contestar todas las preguntas de
un trivial correctamente = 50
puntos.
5

6.  Juego:
 Plataforma que aloje un trivial basado en geocatching  preguntas
geolocalizadas. 
 Democratizar el sistema: los usuarios pueden crear preguntas y trivials. 
 Ofrecer un servicio de noticias con las últimas actualizaciones.
 Capa de Realidad Aumentada (AR) para contestar las preguntas de los

trivials.
 Red social:
 Facilitar el registro de los usuarios utilizando cuentas ya creadas en otras
redes sociales (Twitter).
 Ofrecer servicio para que los miembros interactúen entre ellos:
▪ Cada usuario puede tener su red de contactos.
▪ Un usuario puede ver y comentar acciones de sus amigos. 
6

7.  Registro de usuarios:
 A través de LENA.
 A través de perfiles creados en:
▪ GoogleMail.
▪ Facebook.
▪ Twitter.
▪ Foursquare.
 Juego:
 Creación de trivials.
 Inserción de preguntas en trivials ya existentes.
 Realidad aumentada.
 Ranking.
▪ General.
▪ Trivial.
▪ Following/Followers.
 Ver las noticias.
 Crear quejas sobre preguntas.
 Ganar Pins. 7

8.  Red Social:
 Perfil.
▪ Ver perfil de usuario.
▪ Modificación de datos personales.
▪ Información sobre trivials completados.
 Red de amigos.
▪ Ver seguidores (Followers).
▪ Añadir y ver seguidos (Following).
 Interacción con otros miembros.
▪ Ver actividad.
▪ Comentar actividad.
 Rol de administrador.
 Inserción de noticias.
 Borrar perfil de usuario.
 Cambiar rol de usuario.
 Administración de quejas de usuarios.
 Modificación /Eliminación de preguntas erróneas.
 Crear Pins.
8

9. Apache Wicket
- Separa vista y lógica
- Sigue el modelo GUI como SWT
- Permite reutilización de código
Apache Tomcat
MySQL:
REST - Mayor
- Ligero velocidad
- Fácil - Tamaño de
implementación fila ilimitado
- Resultados legibles: - Consume
XML, JSON… pocos
recursos
9

10.  2.3.1. Casos de Uso
 Autorización:
▪ Registro/Login.
▪ Registro/Login con Twitter.
 Red Social:
▪ Ver / Editar perfil.
▪ Ver following / followers.
▪ Añadir following.
▪ Ver actividades.
▪ Ver/Añadir comentarios.
▪ Integración con Twitter.
 Juego:
▪ Ver información sobre trivials
jugados.
▪ Añadir trivials y preguntas
▪ Ver ranking.
▪ Admin: Añadir noticia.
10

11.  2.3.2. Mapa conceptual
11

12.  2.3.3. Tecnologías utilizadas
 Twitter4j
▪ API de integración con Twitter.
 Apache Wicket
▪ Framework web open-source para Java.
▪ Separa vista y lógica.
▪ Programa todo el comportamiento en Java.
▪ Sigue el modelo GUI (Graphical User Interface).
▪ Permite reutilización de código (Herencia de markups o Paneles).
▪ Complementos de AJAX (Asynchronous JavaScript and XML).
12

13.  2.3.3. Tecnologías utilizadas
 Apache Wicket
▪ Permite reutilización de código (Herencia de
markups o Paneles).
▪ Complementos de AJAX (Asynchronous
JavaScript and XML).
Validación de formularios Autocompletado Paginador
13

14.  2.3.3. Tecnologías utilizadas
 Hibernate
▪ Herramienta de software libre ORM (Object-Relational mapping) para Java.
▪ Facilita el mapeo de POJOs Java (Modelo) y una base de datos relacional.
▪ Se puede utilizar con:
▪ Archivos declarativos en XML.
▪ Anotaciones en el modelo.  Más sencillo, rápido y fácil de visualizar para el programador.
User
Mail Pasword … totalPoints
User-User
User UserFollowed
Mail (Foreing Key) Mail (Foreing Key)
UserTrivial
Points numHits numFailures User
Mail (Foreign Key)
14

15.  2.3.4. Modelo
de datos
 Datos
gestionados.
 Relaciones
entre ellos.
15

16.  2.3.5. Arquitectura
 Arquitectura por capas:
▪ Modelo: datos gestionados.
▪ Vista/Presentación: Interfaces
para la interacción entre usuario y
aplicación.
▪ Controladores/Negocio:
Implementación de las
funcionalidades de la vista.
▪ Integración: Gestiona el acceso a
los datos, a la base de datos
(Hibernate)…
16

17.  2.3.6. Resultado: Pagina principal
17

18.  2.3.6. Resultado: Perfil de usuario
18

19.  2.3.6. Resultado: Editar Trivial
19

20.  2.4.1. Casos de Uso
 Autorización:
▪ Registro/Login
▪ Login automático
▪ Registro/Login con Twitter
 Red Social:
▪ Ver / Editar perfil.
▪ Ver following / followers.
▪ Añadir following.
▪ Ver actividades.
▪ Ver/Añadir comentarios.
▪ Integración con Twitter
 Juego:
▪ Ver ranking.
▪ Consultar preguntas más
cercanas
▪ Ver trivials disponibles.
▪ Contestar preguntas. 20

21.  2.4.2. Mapa conceptual
21

22.  2.4.3. Características tecnológicas
 Geolocalización
 Comunicación con servidor: WebServices
 Realidad aumentada
 Reconocimiento gestos táctiles
 Base de datos local
 Integración con otras redes sociales: Twitter
22

23.  2.4.3. Características tecnológicas
 Geolocalización
▪ Determinar el posicionamiento de un objeto en un sistema de
coordenadas determinado.
▪ Triangulación mediante:
▪ Dispositivo interno GPS.
▪ WIFI o 3G.
▪ Visualización mediante Google Maps API for Android.
▪ Necesario dar de alta la aplicación para obtener una clave.
23

24.  2.4.3. Características tecnológicas
 Comunicación con servidor: WebServices
▪ Implementados WebServices del tipo RESTful:
▪ Utilizan métodos propios de HTTP (GET, PUT; DELETE…) para realizar
acciones remotas.
▪ La URL tiene un significado y es mucho más ligero que otras tecnologías
como SOA.
▪ +Info: http://openwisp.net:8080/LENAWeb/rest/application.wadl
▪ Librerías utilizadas:
▪ Jersey (servidor de WS), debido a su sencillez y al serializador de JSON
interno.
▪ Apache HTTPClient (cliente Android), debido a que es el más común y con
un gran soporte.
▪ GSON (cliente Android), parseador de JSON a objetos y viceversa.
24

25.  2.4.3. Características tecnológicas
 Realidad aumentada
▪ Visión directa o indirecta de un entorno físico en el mundo real
combinada con elementos virtuales para la creación de una realidad
mixta a tiempo real.
Basado en marcadores Basado en posición GPS
25

26.  2.4.3. Características tecnológicas
 Reconocimiento de gestos táctiles
▪ Para el cambio de contenido de algunas secciones de la aplicación es
necesario detectar algunos gestos horizontales similares al «pasar
página de un libro».
▪ Definir los gestos mediante GestureBuilder (aplicación incluida en el
Android SDK).
raw/gestures
26

27.  2.4.3. Características tecnológicas
 Integración con twitter
▪ Se utiliza la biblioteca twitter4j.
▪ Vinculación de la cuenta con Twitter.
▪ Publicación de la actividad durante el juego.
▪ Autenticación basada en Oauth.
▪ Consumer key/secret para la aplicación.
▪ accessToken para registro y login.
27

28.  2.4.3. Características tecnológicas
 Base de Datos local en móvil
▪ Persistencia de objetos durante ejecuciones de la aplicación.
▪ Almacenaje de las credenciales de login (objeto User, accessToken de Twitter).
▪ Preparado para futuras mejoras en la interacción cliente/servidor: base de datos
local de preguntas + descargas incrementales del WS.
▪ Basada en la biblioteca de la base de datos orientada a objetos db4o:
▪ Alternativa OO (Orientada a Objetos) a SQLite.
▪ Simplifica la programación evitando conversión objeto-RDBM (tarea manual).
28

29.  2.4.4. Resultado: Acceso de usuario
29

30.  2.4.4. Resultado: Perfil de usuario y Muro
30

31.  2.4.4. Resultado: Following/Followers y Ranking
31

32.  2.4.4. Resultado: Trivial Game
32

33.  2.4.4. Resultado: Modo Nearby & AR
33

34.  2.4.4. Resultado: Integración con Twitter
34

35.  2.4.5. Arquitectura
35

36.  Objetivo : Calcular la utilización del canal en downlink.
 Obtención de datos en el servidor: log4java.
 Arquitectura de la aplicación:
36

37.  Comportamiento del usuario tipo:
37

38.  Diagrama de estados:
 Cadena de Markov discreta.
 “Session”  ON – OFF
 Estado ON  GetQuestions – Think – SendAnswer
 Intervalos discretos  Tiempo de ttx de un mensaje SendAnswer (long. invariable)
▪ 225 bytes a 64 Kbps (28,125 ms)
38

39.  Sistema de ecuaciones:
PGetQuestions = (1-ƞ) PGetQuestions + β PThink + µ POFF
PThink = ƞ PGetQuestions + (1-β-α-λ) PThink + PSendAndwer
PSendAndwer = α PThink
POFF = λ PThink + (1-µ) POFF
PGetQuestions + PThink + PSendAndwer + POFF = 1
 Resultados experimentales:  Probabilidades de estado:
Probabilidad de transición Valor Probabilidad de estado Valor
OFF-OFF 0.999999544 OFF 0,99222755
OFF-GetQuestions 0.0000004557
ThinkAnswer-ThinkAnswer 0.999535913
GetQuestions 0,00001255
ThinkAnswer-GetQuestions 0.000171884 ThinkAnswer 0,00775808
ThinkAnswer-SendAnswer 0.000233912 SendAnswer 0,00000181
ThinkAnswer-OFF 0.0000582911
GetQuestions-GetQuestions 0.857736721
GetQuestions-ThinkAnswer 0.142263279
SendAnswer-SendAnswer 0 (Siempre dura 1 slot)
SendAnswer-ThinkAnswer 1
39

40.  Cálculo del ancho de banda (Downlink):
 Ancho de banda promedio un usuario:
(PGetQuestions + PSendAnswer)·BW (64 kbps)
(0,00001255+ 0,00000181)·64 kbps ≈ 1 bps
40

41.  Eventos sesión
Intervalo de confianza = 95% = 1-α
Función Valor
Media (mean) 418,6711
Varianza (std) 624,7016
Máximo (max) 3389
41

42.  Listar preguntas
Intervalo de confianza = 95% = 1-α
Función Valor
Media (mean) 1754,7
Varianza (std) 1970,6
Máximo (max) 7070
42

43.  Realización paralela de trabajo en:
 Cliente Android
 Interfaz web
 Metodología utilizada: SCRUM
 Product Owner: Toni Oller
 Team: Grupo LENA
 Reuniones de 15 minutos de pie todos los lunes y al terminar una funcionalidad.
 División en «sprints»
 Se empieza con un «product backlog» que describe las funcionalidades del
proyecto.
 El primer sprint procede del primer «sprint planning meeting» según las
estimaciones del trabajo.
 Por restricciones de tiempo, ha habido sólo dos sprints (iteraciones) del
producto.
43

44.  Product backlog
 Autenticación de usuarios vía web y Android.
 Responder trivials con preguntas geolocalizadas mediante Foursquare.
 Sistema de puntuación de trivials.
 Capa de Realidad Aumentada.
 Integración con redes sociales.
 Ranking de usuarios: web y Android.
 Gestión de Following/Followers.
 Comentar acciones de los usuarios (Muro).
 Inserción de trivials y preguntas vía Web y Android.
 Admin: Gestión de quejas de los usuarios sobre las preguntas.
 Diseño y creación de la base de datos.
 Persistencia de objetos en Android y descarga incremental de datos
44

45.  Primer sprint (finalizado el 31/12/2011)
 Diseño y creación de la base de datos.
 Autenticación de usuarios vía web y móvil (Android).
 Responder trivials con preguntas geolocalizadas.
 Capa de Realidad Aumentada.
 Sistema de puntuación de trivials.
 Edición de perfil de usuario vía web.
 Ranking de usuarios vía web.
 Información de trivials de usuario vía web.
 Inserción de trivials y preguntas vía web.
 Admin: Creación de noticias vía web.
45

46.  Segundo sprint (31/12/2011 – 05/02/2012)
 Integración con herramientas sociales en web: Twitter.
 Ranking de usuarios en móvil (Android).
 Gestión de Following/Followers.en web y móvil (Android).
 Ver acciones de following en web y móvil (Android).
 Búsqueda de usuarios en web y móvil (Android).
 Comentar acciones de los usuarios vía web y móvil (Android).
 Información de trivials de usuario vía Android.
 Login automático con sesión en Android
 Sign in con OAuth y integración con Twitter en Android
 Admin: Edición de roles vía web.
 Admin: Eliminar usuarios vía web.
 Añadir imágenes de perfil y de trivial vía web.
46

47.  Herramienta de Agile Project Management and Collaboration.
 Creación de Historias  Funcionalidades del product backlog + tareas
intermedias + bugs.
 Permite ver:
 Tareas en espera.
 Tareas ya realizadas.
 Tareas en desarrollo y quien está trabajando en ellas.
 Cada Historia tiene un peso (puntos):
 1 punto: 1 persona – 1 día.
 2 puntos: 1 persona – 2/4 días.
 3 puntos: 1 persona – 1 semana o más.
 Monitorización de velocidad: cada semana se hace un recuento de los
puntos terminados y muestra la velocidad media del equipo.
 Permite ajustas las tareas cada semana o por sprint según la velocidad media del pasado.
47

48.  LENA
 Gráfica de Historias y Puntos:
 Primeras semanas  Especificación, creación servidor y base de datos.
 Semana 12 (Navidad)  Velocidad muy baja.
 Últimas semanas  Velocidad muy alta  Últimas funcionalidades + bugs.
48

49.  Posibles mejoras de LENA:
 Web
▪ Administrador: Modificación/Eliminación de preguntas erróneas.
▪ Administración de quejas de usuarios.
▪ Añadir Pins.
 Aplicación Android
▪ Ver noticias.
▪ Modificación de perfil de usuario.
▪ Creación y edición de trivials y preguntas.
▪ Notificaciones en el móvil avisando de:
▪ Preguntas cercanas, acciones de following, comentarios sobre las acciones del usuario, ….
▪ Base de Datos local para permitir guardar cierta información en local:
▪ Preguntas de trivials ya consultadas, aciones o comments ya vistos…
 Además…
▪ Registro de usuarios a través de perfiles creados en otras redes sociales:
▪ GoogleMail, Facebook, Foursquare.
▪ Crear quejas sobre las preguntas.
49

50. 50