DESARROLLO DE UNA APLICACIÓN WEB PARA ORGANIZAR EVENTOS DEPORTIVOS

Adrián Alonso VegaLien Valdés Izquierdo

1

¿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

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

Arquitectura WePlay

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

Diseño Base de Datos- Modelo de Datos

6

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

• 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

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

Desarrollo de la App Web - Symfony 2

10

• DataAccessBundle• BackendBundle• PublicBundle• IntranetBundle• RestBundle

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

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

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.

Tecnologías del Lado del Cliente - Geolocalización

14

• Empleo de la API de Google Maps• Api de Geolocalización de HTML5

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ñadirfuncionalidad en tiempo real( Sistema de comentarios de

partidos en tiempo real)

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.

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="LlsDqVDaw5nMs1iasbladXWvs5c=",Nonce="YzdlMzQ3NWQ4MTc1YTI3OA==", Created="2014-05-30T07:53:54Z"

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

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 yestamos satisfechos con el trabajo realizado

Muchas gracias

Espero que haya sido una presentación

agradable para ustedes

20