Este documento describe el desarrollo de una aplicación web llamada WePlay para organizar eventos deportivos. Los objetivos del proyecto incluyen desarrollar un prototipo funcional de la aplicación web, implementar una API RESTful e integrarla con aplicaciones móviles. La aplicación se construyó usando Symfony, Twig, Bootstrap, MongoDB, Doctrine ODM y Pusher para funcionalidad en tiempo real. La API se securizó usando tokens y autenticación basada en WSSE. El proyecto ayudó a profundizar el conocimiento de los des

1. DESARROLLO DE UNA APLICACIÓN WEB
PARA ORGANIZAR EVENTOS DEPORTIVOS
Adrián Alonso Vega
Lien Valdés Izquierdo
1

2. ¿Qué es WePlay?
• Este proyecto denominado Desarrollo de una Aplicación Web para
organizar eventos deportivos, es parte de otro proyecto
denominado Desarrollo de una Plataforma para organizar Eventos
Deportivos
• Plataforma online para organizar eventos deportivos accesible desde
la web y desde cualquier dispositivo Android.
• WePlay ofrece gestionar eventos deportivos de forma rápida,
empleando geolocalización y comunicación entre deportistas.
• Se busca sencillez, agilidad y fluida comunicación entre los usuarios.
2

3. Objetivos del proyecto
• Desarrollar un prototipo funcional de aplicación Web para gestionar
eventos deportivos en línea.
• Implementar una API e integrar con aplicaciones clientes.
• Integrar nuestra API con un desarrollo de una aplicación móvil que
consuma nuestras funcionalidades.
• Profundizar en las diferentes tecnologías impartidas en el master.
• Obtener una visión global de un proyecto real web trabajando en
equipo empleando metodologías ágiles.
• Profundizar en sistemas gestores de bases de datos NoSQL
• Profundizar en frameworks MVC
3

4. 4
Arquitectura WePlay

5. Tecnologías Empleadas
Hemos empleado tecnologías muy
demandadas en el mundo del
desarrollo haciendo que nuestro
proyecto se enriquezca de multitud de
tecnologías
5

6. Diseño Base de Datos- Modelo de Datos
6

7. 7
• BBDD NoSql Orientada a Documentos
• Manejo de grandes cantidades de datos.
• Escalable
• Eficiencia y Rendimiento en inserciones y consultas
• Encaja bien en proyectos que funcionarían sobre base de datos
relacionales
• No hay tablas y relaciones, hay colecciones y documentos.
Referencias a documentos y documentos embebidos
• ¿Quién utilza MongoDB? Foursquare, Sourceforge, Google, Facebook
o New York Times.
Diseño Base de Datos- Modelo de Datos

8. 8
• Agilidad en el desarrollo
• Abstracción de la base de datos
• Acceso transparente al sistema de base de datos
• Mapeos de documentos embebidos y referenciados a través de
Anotaciones, XML, YAML o PHP.
• Seguridad
• Mantenimiento del código
Doctrine ODM (Object Document Mapper)
Diseño Base de Datos- Modelo de Datos

9. Desarrollo de la App Web - Symfony 2
9
• Framework MVC cada día mas popular entre la comunidad de
Desarrolladores PHP.
• Dividido en componentes reutilizables.
• Desarrollado con buenas prácticas, patrones y altamente
actualizado
• Buena documentación, pequeña curva de aprendizaje
• Ampliable con gran cantidad de bundles que proporcionan más
funcionalidad

10. Desarrollo de la App Web - Symfony 2
10
• DataAccessBundle
• BackendBundle
• PublicBundle
• IntranetBundle
• RestBundle

11. Tecnologías del Lado del Cliente - Frontend
11
• Bootstrap es un framework frontend para la creación de sitios y
aplicaciones web. Contiene plantillas de diseño basadas en HTML y
CSS con tipografías, formularios, botones, gráficos, barras de
navegación y demás componentes de interfaz, así como extensiones
opcionales de JavaScript

12. Tecnologías del Lado del Cliente - Frontend
12
• Twig es un motor de plantillas pensado para ofrecer una opción
seguro y potente, aportando un flexibilidad muy interesante a
nuestras vistas.
• Modularizar nuestras vistas de manera muy sencilla gracias a las
directivas extends e includes.
• Reutilización de plantillado y jerarquía en tres capas

13. Tecnologías del Lado del Cliente
jQuery, jQuery UI, Ajax
13
• JQuery es una biblioteca de JavaScript que permite simplificar la
manera de interactuar con los documentos HTML, manipular el
árbol DOM, manejar eventos, desarrollar animaciones y agregar
interacción con la técnica AJAX a páginas web.
• JQueryUI que es un conjunto de interfaces de usuario, efectos,
widgets y temas construidos con la librería Jquery que la completan
dándonos bastante componentes de funcionalidad básica.

14. Tecnologías del Lado del Cliente - Geolocalización
14
• Empleo de la API de Google Maps
• Api de Geolocalización de HTML5

15. Tecnologías del Lado del Cliente - Pusher
15
• Websocket es una tecnología que proporciona a nuestra aplicación
un canal de comunicación bidireccional sobre sockets TCP. Esta
tecnología está diseñada para ejecutarse sobre navegadores y
servidores web
• Hemos empleado Pusher, servicio online, permite crear aplicaciones
en tiempo real como pueden ser de chat, colaborativas a través de
un sistema de eventos.
• Pusher se integra con gran cantidad
de tecnologías.
• Esta tecnología nos permite añadir
funcionalidad en tiempo real
( Sistema de comentarios de
partidos en tiempo real)

16. Implementación de la API REST
16
• Para implementar la capa REST nos hemos apoyado en un bundle de
terceros llamado FOSRestBundle.
• Generación de controladores agnósticos pudiendo solicitar los datos
de la vista en distintos posibles formatos (XML, JSON…).
• Generación automática de rutas siguiendo las convenciones REST.
• Decodificación de las peticiones http, restricciones de cabeceras por
mime types y manejo de excepciones con estados http adecuados.
Para implementar lo anterior se crearon 4 controladores donde
definimos las API: GameController, LoginController, SportController y
UserController. Todos extienden de FOSRestController.

17. Implementación de la API REST - Securización
17
• WSSE o Web Service Security es una especificación de seguridad
definida por SOAP, se le conoce también como WS-Security y
permite proteger los mensajes entrantes y salientes contra distintas
amenazas de seguridad.
• Sistema de autenticación basado en tokens, se puede limitar el
acceso a organizaciones o individuos no autorizados a estos
métodos.
• Marca de tiempo para evitar que los mensajes se reproduzcan
repetidamente.
• Encriptación de la password
• Seguro frente ataques repetitivos usando cache de tokens
• Sencilla configuración e integración
UsernameToken Username="alonsus91",PasswordDigest="LlsD
qVDaw5nMs1iasbladXWvs5c=",Nonce="YzdlMzQ3NWQ4MTc1YTI3OA=="
, Created="2014-05-30T07:53:54Z"

18. Dificultades
18
• Gestión del tiempo entre los miembros del equipo
• Emplear mongo impuso una pequeña barrera de aprendizaje inicial
• Securización API e integración con las partes clientes
• Falta de experiencia con ciertas tecnologías
Ampliaciones
• Sistema de filtros
• Paginado y mejora de experiencia
• Mayor sociabilización de la aplicación
• Sistema de notificaciones PUSH

19. Conclusiones
19
• Se desarrollo una aplicación web funcional empleando tecnologías
web
• Se implementó una API para que clientes se integren con nuestra
aplicación
• Se empleó una metodología ágil adaptada a las circunstancias del
equipo.
• Se profundizó en muchas tecnologías impartidas y relacionadas con
el master
Hemos logrado nuestros objetivos y
estamos satisfechos con el trabajo realizado

20. Muchas gracias
Espero que haya sido una presentación
agradable para ustedes
20