PDF de programación - Aplicación web para la enseñanza de C

UNIVERSIDAD AUTONOMA DE MADRID

ESCUELA POLITECNICA SUPERIOR



Grado en Ingeniería Informática

TRABAJO FIN DE GRADO

APLICACIÓN WEB PARA LA ENSEÑANZA DE C

Felipe Millán Fernández

Tutor: Alejandro Sierra Urrecho



JULIO 2015











APLICACIÓN WEB PARA LA ENSEÑANZA DE C



AUTOR: Felipe Millán Fernández
TUTOR: Alejandro Sierra Urrecho



Dpto. Ingeniería Informática
Escuela Politécnica Superior

Universidad Autónoma de Madrid

Julio de 2015





Resumen

El objetivo de este TFG es el desarrollo de una aplicación web para el aprendizaje autónomo

del lenguaje de programación C. La aplicación proporciona información detallada al profesor

sobre el proceso de aprendizaje, permitiendo así mejorar el contenido del curso entre

ediciones sucesivas. La aplicación podría llegar a ser de mucha utilidad para las asignaturas

de programación de los grados de la Escuela Politécnica Superior de la UAM. Además, se

puede adaptar con facilidad a otros lenguajes de programación como Java o Android.

Existen muchos sitios web de aprendizaje autónomo para lenguajes naturales como el inglés,

pero en el caso de los lenguajes de programación, estos son relativamente escasos.

Actualmente, han surgido nuevas iniciativas que están teniendo mucho éxito como

codecademy o codeschool. La mayoría ofrecen cursos de lenguajes de marcado como HTML

o lenguajes interpretados como JavaScript, que permiten al estudiante probar su código

rápidamente y sin instalar ningún entorno de desarrollo. En este trabajo, se extiende esta idea

a los lenguajes compilados como C.

Uno de los objetivos del trabajo, además del educativo, ha sido el desarrollo desde cero de

una aplicación web sencilla pero profesional. Se ha hecho un esfuerzo didáctico para que este

documento sirva para futuros desarrollos web similares. Por un lado, se explican las distintas

actividades de desarrollo de un producto software, haciendo uso de los conocimientos

adquiridos a lo largo de la carrera. Por otro lado, se aplican estos conocimientos en un entorno

de desarrollo en concreto, llamado Laravel, un framework para implementar código PHP de

forma simple y elegante, con una gran influencia de otros como Ruby on Rails y ASP .NET.

Palabras clave

Educación, ingeniería del software, aplicación web, lenguaje de programación, Laravel



iii







iv



Abstract

The objective of this Bachelor Thesis is to develop a web application for the autonomous

learning of the C programming language. The application gives detailed information to the

teacher about the learning process, so as to improve the course’s contents between successive

editions. The application could be very useful for the programming subjects of the degrees of

the Escuela Politécnica Superior of the UAM. Moreover, it can be easily adapted to other

programming languages such as Java or Android.

There exist many web sites for the autonomous learning of natural languages such as English,

but with respect to programming languages, these sites are relatively few. Lately, some new

initiatives such as codecademy and codeschool have emerged. Most of them offer

programming courses for markup languages such as HTML or interpreted programming

languages such as JavaScript, which allow the student to check her code very quickly and

without the setting of any development environment. In this work, this idea is applied to

compiled languages such as C.

One of the objectives of this work, apart from the educational, is the development from

scratch of a simple but professional web application. A considerable effort has been made for

this document to help in future similar developments. On the one hand, the various phases in

the development of a software product have been explained, making use of the knowledge

acquired during the degree. On the other hand, this knowledge has been applied to a concrete

development environment, called Laravel, an elegant and simple PHP framework, greatly

influenced by Ruby on Rails and ASP .NET.

Index terms

Education, software engineering, web application, programming language, Laravel.



v







vi



Agradecimientos

En primer lugar, agradecer a mi tutor Alejandro por el tiempo que ha dedicado en este trabajo

y la paciencia que ha tenido. Por otra parte, dar las gracias a todos los profesores que han

formado parte de la enseñanza durante todos estos largos años de la carrera, así como a todos

los compañeros con los que he compartido horas de clase y de prácticas. Sin ellos no hubiera

aprendido tantas otras cosas que no te dan un libro o una transparencia de teoría y hace que se

lleve de otra forma los exámenes. También quiero mencionar al resto de alumnos, que de

forma desinteresada, han estado ahí cuando ha hecho falta.

Agradecer a la universidad Autónoma de Madrid y en particular a todo el personal de la

Escuela Politécnica Superior, trabajadores, Biblioteca, Administración, etc., por resolver todas

las dudas e informar siempre correctamente.

Tampoco quiero olvidarme de mis padres, por toda la ayuda que he recibido de ellos. Y por

último, gracias especialmente a mi novia Mª Carmen, a quien dedico este trabajo final, por

todo el apoyo recibido y que me ha permitido llegar hasta aquí, superando todos los

momentos difíciles que he tenido. Se cierra una etapa en mi vida, pero se abre otra a tu lado,

llena de nuevas ilusiones y retos profesionales.



vii







viii



Índice de contenido



ÍNDICE DE TABLAS ..................................................................................................................................... X

ÍNDICE DE FIGURAS .................................................................................................................................. XI

1. INTRODUCCIÓN ..................................................................................................................................... 1

1.1. MOTIVACIÓN ............................................................................................................................................. 1
1.2. OBJETIVOS ................................................................................................................................................. 2
1.3. ESTRUCTURA DEL DOCUMENTO ................................................................................................................. 3

2. ESTADO DEL ARTE................................................................................................................................ 5

2.1. SERVICIOS ACTUALES ................................................................................................................................ 5
2.2. TECNOLOGÍAS UTILIZADAS ........................................................................................................................ 7

3. ANÁLISIS DE LOS REQUISITOS ........................................................................................................ 13

3.1. DEFINICIÓN DEL PROYECTO ..................................................................................................................... 13
3.2. CATÁLOGO DE REQUISITOS ...................................................................................................................... 14
3.2.1. REQUISITOS FUNCIONALES ...................................................................................................................... 14
3.2.2. REQUISITOS NO FUNCIONALES ................................................................................................................. 16

4. DISEÑO DE LA APLICACIÓN ............................................................................................................. 17

4.1. ARQUITECTURA WEB ............................................................................................................................... 17
4.1.1. HERRAMIENTAS DE BACK-END ............................................................................................................... 17
4.1.2. HERRAMIENTAS DE FRONT-END .............................................................................................................. 19
4.1.3. EL FRAMEWORK LARAVEL ...................................................................................................................... 21
4.2. ESTRUCTURA DEL PROYECTO................................................................................................................... 23
4.3. DISEÑO DE LA BASE DE DATOS ................................................................................................................. 27
4.4. DISEÑO WEB ADAPTABLE ......................................................................................................................... 29

5. IMPLEMENTACIÓN ............................................................................................................................. 31

5.1. PRIMEROS PASOS CON LARAVEL .............................................................................................................. 31
5.2. MÓDULO DE USUARIOS ............................................................................................................................ 34
5.3. MÓDULO DE CURSOS................................................................................................................................ 39
5.4. INSCRIPCIÓN DE UN USUARIO EN UN