ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA DE TELECOMUNICACIÓN UNIVERSIDAD

72 Pages·2017·1.58 MB·Spanish

ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA
DE TELECOMUNICACIÓN
UNIVERSIDAD POLITÉCNICA DE CARTAGENA
Trabajo Fin de Grado
Desarrollo de una aplicación web con Django para
evaluación automática de código Python
Autor: Juan Luis Navarro Rey
Director: Fernando Losilla López
Junio 2017

Autor Juan Luis Navarro Rey
E-maildelautor [email protected]
Director Fernando Losilla López
E-maildelautor [email protected]
Codirector(es)
Desarrollo de una aplicación web con Django para
TítulodelTFG
evaluación automática de código Python
Descriptores
Resumen:
EnesteTFEsehadesarrolladounaaplicaciónwebquepermiteaunprofesor
crear asignaciones en la que los alumnos deben enviar un código que es eva-
luado por un servidor. Se ha desarrollado un interfaz web que permite tanto
a profesores como a alumnos subir, crear y cargar asignaciones, respectiva-
mente. El interfaz permite la creación de asignaciones sencillas, generando
código en el servidor para la comprobación de resultados. Asi mismo, se
hacontempladolaposibilidaddequeprofesoresconmayoresconocimientos
puedan crear asignaciones más complejas, modificando los archivos genera-
dos.
Titulación Grado en Ingeniería Telemática
Intensificación
Departamento Tecnologías de la Información y las Comunicaciones
Fechadepresentación Junio 2017

Agradecimientos
Agradezcoamifamiliatodoelapoyoquemehadadoyelesfuerzorealizadodurante
mi etapa como estudiante.
También agradezco a mi director Fernando Losilla, por haberme permitido tener la
oportunidad de realizar este proyecto con él y principalmente por todo el tiempo y
dedicación que ha invertido en mí y en que este proyecto saliese adelante.
Yaporúltimo,agradezcoamiscompañerosdeclaselosbuenosratospasadosdurante
la carrera.

Contenidos
Contenidos 7
Listadefiguras 11
Listadetablas 13
1 Introducción 15
1.1 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.2 Metodología de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.2.1 Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.2.2 Subversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.3 Funcionalidad de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.4 Evolución del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2 Tecnologías 21
2.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.1.1 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.1.2 CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.1.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.1.4 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.1.5 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.1.6 Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.2 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.2.1 Características . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.2.2 Componentes webs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.3 Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.3.1 Características . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.3.2 Estructura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.3.3 Patrón Modelo Vista Controlador . . . . . . . . . . . . . . . . . . . . . 26
2.4 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.4.1 Componentes básicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.4.2 Principales directivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.5 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.5.1 Manejo de la base de datos . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.6 Google Charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.7 JQuery validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.8 JQuery confirm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3 Desarrollodelcliente 33
3.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.2 Funcionalidad de los roles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.3 Estructura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.4 Explicación de las vistas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.4.1 Código común . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.4.2 Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
7
CONTENIDOS
3.4.3 Mis ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.4.4 Estadísticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.4.5 Nuevo ejercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.4.6 Ejercicios mandados . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.4.7 Ajustes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
4 Desarrollodelservidor 43
4.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.2 Estructura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.3 Composición de la base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.4 Funcionalidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.4.1 Inicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.4.2 Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.4.3 Signup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.4.4 Crear plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.4.5 Obtener ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.4.6 Borrar ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.4.7 Obtener ejercicios del alumno . . . . . . . . . . . . . . . . . . . . . . . 48
4.4.8 Corregir ejercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.4.9 Actualizar nota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.4.10 Generación de las estadísticas . . . . . . . . . . . . . . . . . . . . . . . 49
5 Pruebasdelaaplicación 51
5.1 Registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.2 Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.3 Ajustes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.4 Crear ejercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
5.5 Modificar nota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
5.6 Subir ejercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.7 Corregir ejercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
6 Conclusionesylíneasfuturas 57
6.1 Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
6.2 Líneas futuras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Bibliografía 59
A Manualdelusuario 61
A.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
A.2 Rol invitado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
A.3 Rol administrador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
A.4 Rol profesor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
A.4.1 Crear ejercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
A.4.2 Ejercicios mandados . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
A.4.3 Estadísticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
A.5 Rol alumno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
A.5.1 Mis ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
A.5.2 Estadísticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
8
CONTENIDOS
B Manualdedespliegue 69
B.1 Instalación de python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
B.1.1 Instalación de Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
B.2 Instalación de MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
B.3 Instalación de los frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
B.4 Instalación de las librerías JavaScript . . . . . . . . . . . . . . . . . . . . . . . 70
B.4.1 Instalación de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
B.4.2 Editor ACE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
B.4.3 Google Charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
B.4.4 jQuery validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
B.4.5 jQuery confirm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
B.5 Desplegando la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
9