PDF de programación - Integración de características de tiempo real en aplicaciones web

Integración de características de
tiempo real en aplicaciones web

Trabajo de fin de grado

GRADO EN INGENIERÍA INFORMÁTICA

Septiembre de 2014

Autor

Juan Luis Boya García

Tutora

Ángeles Mª Moreno Montero

D.ª Ángeles Mª Moreno Montero, profesora del Departamento de Informática y

Automática de la Universidad de Salamanca.

CERTIFICA:

Que el trabajo titulado “Integración de características de tiempo real en aplicaciones
web” ha sido realizado por D. Juan Luis Boya García, con DNI 71038815A y constituye
la memoria del trabajo realizado para la superación de la asignatura Trabajo de Fin de
Grado de la Titulación Grado en Ingeniería Informática de esta Universidad.

Y para que así conste a todos los efectos oportunos.

En Salamanca, a 05 de septiembre de 2014.

Dª Ángeles Mª Moreno Montero
Dpto. de Informática y Automática
Universidad de Salamanca

Resumen

Este documento describe el desarrollo de un nuevo framework para
facilitar el desarrollo de aplicaciones web con capacidades de tiempo
real basadas en patrones. A este framework se le ha dado el nombre
de Snorky.

En este contexto entenderemos tiempo real como la actualización
inmediata de contenidos en aplicaciones web y la comunicación entre
los diferentes procesos en red participantes con latencia mínima.

Se ha desarrollado un protocolo para intercambiar notificaciones entre
un servidor web tradicional y un servidor WebSocket. Siguiendo este
protocolo los cambios pueden ser distribuidos a las aplicaciones
clientes de forma instantánea. La implementación del protocolo se
ha encapsulado en varias bibliotecas (conectores) que lo utilizan
requiriendo al programador de aplicaciones web la escritura de una
cantidad mínima de código.

El sistema dispone de una interfaz de programación extensible en la
cual el programador puede definir servicios que ofrezcan funcionalidad
adicional específica de su aplicación, basadas en modelos como
Publicación-Suscripción o comunicación cliente a cliente. Estos
servicios se han diseñado siguiendo un esquema de llamadas a
procedimientos remotos basado en el lenguaje JSON (JavaScript Object
Notation) para organizar la funcionalidad en forma de métodos y
parámetros en el lado del servidor y utilizarla a través de sencillas
llamadas en el lado del cliente.

Se ha integrado el protocolo de notificaciones en la plataforma
extensible sistema para poder ofrecer toda la funcionalidad desde
un único servidor y se ha elaborado documentación junto con varias
aplicaciones de ejemplo para validar y demostrar el uso del sistema.

Para el desarrollo de este trabajo se ha utilizado el lenguaje Python,
utilizando Tornado para la conectividad en red, así como JavaScript
para el conector del lado del cliente.

Palabras clave: Aplicaciones web, WebSocket, JSON,
Python.

framework,

Abstract

This document describes a new real-time web development framework
based on patterns, Snorky.

In this context, we will understand real time as instant data updates
and minimal-latency communication.

A protocol has been developed in order to exchange notifications
between a traditional web server and a WebSocket server. Following
this protocol, change notifications can be distributed to the client ap-
plications instantly. Several libraries (connectors) have been developed
in order to allow using this protocol requiring the least effort to the
programmer.

An extensible programming interface has been developed, allowing
the programmer to define services which can offer application-specific
functionality, leveraging models like publish-subscribe or client to
client communication. These services have been designed following a
remote prodedure call scheme based on the JSON (JavaScript Object
Notation) language, organizing functionality in form of methods and
parameters on the server side and simple calls on the client side.

The data notification protocol has been added to this extensible
platform, offering all the functionality mentioned above in a single
server. Documentation has been redacted and several example
applications have been developed.

The Python language and the Tornado networking library are used in
the server part, whilst JavaScript is used in the client-side connectors.

Keywords: Web development, WebSocket, JSON, framework, Python.

Índice general

1. Introducción

2. Objetivos

3. Antecedentes del desarrollo de aplicaciones web en tiempo real

3.1. El protocolo HTTP sin estado . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2. Sondeo con Meta Refresh . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3. Sondeo AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.4. El sondeo largo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.5. El problema C10K . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.6. Programación asíncrona . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.7. WebSocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.8. Los frameworks del lado del cliente . . . . . . . . . . . . . . . . . . . . . . . .
3.9. Este trabajo de fin de grado . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4. Metodología de desarrollo

4.1. Proponer un objetivo corto . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2. Dibujar primero . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.3. Codifica cuando te sientas cómodo . . . . . . . . . . . . . . . . . . . . . . . .
4.4. Probar a fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.5. Reflexionar y buscar otro problema . . . . . . . . . . . . . . . . . . . . . . . .
4.6. Conclusión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5. Herramientas utilizadas

5.1. Lenguajes de programación . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2. Bibliotecas y frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3. Software de desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4. Sotfware libre y gratuito . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6. Notación UML

6.1. Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2. Anotaciones en plantillas
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.3. Asociaciones tipadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4. Código de colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.5. Propiedades en lugar de atributos . . . . . . . . . . . . . . . . . . . . . . . .
6.6. Visibilidad no estricta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

3

5
5
6
7
8
8
9
10
11
12

13
13
14
14
14
15
16

17
17
17
18
18

19
19
20
20
21
22
23

i

7. Aspectos relevantes

7.1. Sincronización con bases de datos . . . . . . . . . . . . . . . . . . . . . . . .
7.1.1. Requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.1.2. Análisis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.1.3. Diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.1.4.
Implementación y pruebas . . . . . . . . . . . . . . . . . . . . . . . .
7.1.5. La primera demostración . . . . . . . . . . . . . . . . . . . . . . . . .
7.1.6. El conector JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2. La aplicación de incidencias . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.1. Requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.2. Autenticación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.3. Registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.4. Modelos de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.5. ORM de Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.6.
Integración con el ORM de Django . . . . . . . . . . . . . . . . . . . .
7.2.7. Django REST Framework . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.8.
Integración con Django REST Framework . . . . . . . . . . . . . . . .
7.2.9. Reportar una incidencia . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3. Servicios personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.1. Patrones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.2. Requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.3. Análisis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.4. Diseño del protocolo . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.5. Diseño de clases del servidor . . . . . . . . . . . . . . . . . . . . . . .
7.3.6. Signatura de llamadas RPC . . . . . . . . . . . . . . . . . . . . . . . .
7.3.7.
. . . . . . . . . . . . . . . . . . . . . . .
7.3.8. Conector JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.9. Servicios de ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.10.El servicio de mensajería . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.11.Integración con AngularJS . . . . . . . . . . . . . . . . . . . . . . . .
7.3.12.El servicio Pub Sub y la interfaz de backend . . . . . . . . . . . . . .
Integración . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.4.1. Campos renombrados . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.4.2. Diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.4.3.
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.4.4. Conector JavaScript
7.5. Documentación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.5.1. La herramienta de documentación . . . . . . . . . . . . . . . . . . . .
7.5.2. Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.5.3. Contenidos
. . . . . . . . .