Aplicación web pa a acili a la
co ección de p ác icas de p og amación
con in eg ación en campus i ual
Scipio: Sis ema de Co ección In e -pa es Pa a códIgO
TRABAJO FIN DE GRADO
Cu so 2018–2019
Au o
Jose Luis Sánchez Ga cía
Di ec o
Manuel F ei e Mo an
Facul ad de In o má ica
Uni e sidad Complu ense de Mad id
Aplicación web pa a acili a la
co ección de p ác icas de
p og amación con in eg ación en
campus i ual
Scipio: Sis ema de Co ección In e -pa es Pa a códIgO
T abajo de Fin de G ado en Ingenie ía So wa e
Depa amen o de Ingenie ía del So wa e e In eligencia
A i icial
Au o
Jose Luis Sánchez Ga cía
Di ec o
Manuel F ei e Mo an
Con oca o ia: Sep iemb e 2019
Cali icación: No a
Facul ad de In o má ica
Uni e sidad Complu ense de Mad id
20 de sep iemb e de 2019
Au o ización de di usión
El abajo i man e, ma iculado en el Más e en Ingenie ía en In o má-
ica de la Facul ad de In o má ica, au o iza a la Uni e sidad Complu ense
de Mad id (UCM) a di undi y u iliza con ines académicos, no come ciales
y mencionando exp esamen e a su au o el p esen e T abajo Fin de G ado:
“Scipio”, ealizado du an e el cu so académico 2018-19 bajo la di ección de
Manuel F ei e Mo án en el Depa amen o de Ingenie ía del So wa e e In e-
ligencia A i icial, y a la Biblio eca de la UCM a deposi a lo en el A chi o
Ins i ucional E-P in s Complu ense con el obje o de inc emen a la di usión,
uso e impac o del abajo en In e ne y ga an iza su p ese ación y acceso
a la go plazo.
Jose Luis Sánchez Ga cía
20 de sep iemb e de 2019

Dedica o ia
Es a abajo de in de g ado es a dedicado a odos lo que me han apoyado
en es e mundo apasionan e que es la p og amación, desde mis p ime os pasos
en un aula del ins i u o cuando aun se gua daban los a chi os en disque es,
has a hoy en día.
ii
Ag adecimien os
Es o es lo que ocu e con la gen e que
piensa que odia los o denado es. Lo que
ealmen e odia es a los maldi os
p og amado es
La y Ni en – esc i o de ciencia icción
Quie o ag adece especialmen e es e abajo a odos lo que me han apo-
yado du an e su c eación, a mi u o Manuel F ei e Mo an po su paciencia
en las u o ías cuando llegaba con la documen ación sin hace , a odos los
p o eso es que du an e la ca e a me han enseñado odo lo necesa io pa a
llega a es e momen o. y a mis pad es po apoya me cuando ome la decisión
de que e especializa me en in o má ica en ez de hace el bachille a o.
ix
4.2. Asigna u as, g upos, a eas, en íos . . . . . . . . . . . . . . . 17
4.3. Sis ema de co ección . . . . . . . . . . . . . . . . . . . . . . . 18
4.4. Co ección ín e -pa es (pee e iew) . . . . . . . . . . . . . . 19
4.5. Alcanzando los obje i os . . . . . . . . . . . . . . . . . . . . . 20
4.5.1. O1: Co ección de en egas . . . . . . . . . . . . . . . 20
4.5.2. O2: In eg ación con Campus Vi ual . . . . . . . . . . 21
4.5.3. O3: Alumnos pueden e sus co ecciones . . . . . . . 21
4.5.4. O4: Ges ión de asigna u as, a eas y en egas . . . . . 21
4.5.5. O5: Ges ión de la pla a o ma . . . . . . . . . . . . . . 22
4.5.6. O6: Re isión en e pa es de alumnos . . . . . . . . . . 22
4.5.7. O7: E aluación de e isiones así ealizados . . . . . . . 23
4.6. Plan de implemen ación . . . . . . . . . . . . . . . . . . . . . 24
4.7. Diseño de na egación . . . . . . . . . . . . . . . . . . . . . . . 27
5. Implemen ación 29
5.1. In oducción............................ 29
5.2. Desa ollo del on end con Angula 8 . . . . . . . . . . . . . 29
5.2.1. Adminis ación . . . . . . . . . . . . . . . . . . . . . . 40
5.3. A qui ec u a In e na . . . . . . . . . . . . . . . . . . . . . . . 42
5.3.1. Backend.......................... 42
5.3.2. F on end.......................... 43
5.3.3. Pe sis encia . . . . . . . . . . . . . . . . . . . . . . . . 46
6. Resul ados 49
7. Conclusiones y T abajo Fu u o 53
7.1. Conclusiones ........................... 53
7.2. Lineas u u as........................... 53
8. Conclusions and Fu u e Wo k 55
8.1. Conclusions............................ 55
8.2. Fu u e lines o wo k . . . . . . . . . . . . . . . . . . . . . . . 55
A. Documen ación de Usua io 57
A.1. Inicio de sesión y egis o de alumnos . . . . . . . . . . . . . . 57
A.2. Manual de P o eso . . . . . . . . . . . . . . . . . . . . . . . . 58
A.3. Manual de Alumno . . . . . . . . . . . . . . . . . . . . . . . . 66
A.4. Manual de co ección . . . . . . . . . . . . . . . . . . . . . . . 68
A.5. Manual de Adminis ado . . . . . . . . . . . . . . . . . . . . 71
B. Documen ación de Desa ollado 77
B.1. Añadi nue os lenguajes de p og amación . . . . . . . . . . . 77

B.2. Añadi nue as aducciones a la in e az . . . . . . . . . . . . 78
C. README 81
C.1.Scipio ............................... 81
C.2.Ins alación............................. 81
C.3.Con igu ación........................... 83
C.4. Ges ión de la aplicación . . . . . . . . . . . . . . . . . . . . . 86
C.5.P uebas .............................. 88
Bibliog a ía 89
Índice de igu as
4.1. Diag ama de Gan . . . . . . . . . . . . . . . . . . . . . . . . 25
4.2. Diag ama de Gan (con inuación) . . . . . . . . . . . . . . . 26
4.3. Esquema de elación en e los componen es . . . . . . . . . . 27
5.1. Ejemplo en ana p incipal . . . . . . . . . . . . . . . . . . . . 31
5.2. De alle de la selección de idioma . . . . . . . . . . . . . . . . 33
5.3. Vis adellogin .......................... 34
5.4. Ejemplo en ana asigna u as . . . . . . . . . . . . . . . . . . 35
5.5. Ven anas modales de asigna u as . . . . . . . . . . . . . . . . 36
5.6. Ejemplo en ana a eas . . . . . . . . . . . . . . . . . . . . . 36
5.7. Ejemplo ges ión a eas . . . . . . . . . . . . . . . . . . . . . . 37
5.8. Ejemplo ges ión en egas . . . . . . . . . . . . . . . . . . . . . 38
5.9. Ejemplo ges ión en egas . . . . . . . . . . . . . . . . . . . . . 38
5.10. Ejemplo selección lineas . . . . . . . . . . . . . . . . . . . . . 39
5.11. Ejemplo menú comen a ios . . . . . . . . . . . . . . . . . . . 39
5.12. Ejemplo selección lineas . . . . . . . . . . . . . . . . . . . . . 39
5.13. Ejemplo selección lineas . . . . . . . . . . . . . . . . . . . . . 40
5.14. Ven ana de ges ión de usua ios . . . . . . . . . . . . . . . . . 41
5.15. Ven ana de ges ión de códigos de asigna u a . . . . . . . . . . 41
5.16. Ven ana de ges ión de cu sos . . . . . . . . . . . . . . . . . . 42
5.17. Esquema básico de la aplicación . . . . . . . . . . . . . . . . . 42
5.18. A qui ec u a de Angula . . . . . . . . . . . . . . . . . . . . . 44
5.19. Esquema E/R de la base de da os . . . . . . . . . . . . . . . . 47
xix
Índice de ablas
4.1. Relación de Obje i os y componen es . . . . . . . . . . . . . . 24
xxi

Cap´
ı ulo 1
In oducción
“Las compu ado as son como los dioses del Viejo Tes amen o; un
mon ón de eglas y sin piedad.”
— Joseph John Campbell (1904-1987)
1.1. Mo i ación
Scipio es a mo i ada po la necesidad de mejo a la comunicación en e
el alumnado y los p o eso es a la ho a de la co ección de las p ac icas de
p og amación. P opo ciona he amien as pa a acili a la co ección del có-
digo po pa e de los p o eso es, pudiendo es os indica los allos e inclui
la co ección del mismo, y pos e io men e en ia un in o me a los alumnos
implicados en dicha p ac ica pa a que es os engan cons ancia de los mismos
en su con ex o. Es deci , los alumnos pod án e la co ecciones (una ez
inalizadas), y e ec ua comen a ios sob e ellas.
Con las he amien as ac uales, mayo i a iamen e el campus i ual, hay
di icul ades pa a comunica co ecciones de p ac icas de p og amación en e
p o eso es y alumnos: ninguno puede e o comen a de o ma sencilla los
comen a ios o e o es en un iche o y linea conc e os sin pe de mucho iem-
po buscándolo de o ma manual. Tampoco p opo ciona ninguna he amien a
que pe mi a esumi en un solo documen o odos los comen a ios y co eccio-
nes de o ma sencilla y legible, si el p o eso quisie a hace es o end ía que
pe de mucho iempo seleccionando código, ademas si quisie a comen a lo
en el aula a los alumnos no pod ía cen a se en los p oblemas especí icos
de cada alumno, eniendo que queda se en los p oblemas más gene ales que
a ec en a un g upo amplio de alumnos.
Du an e mi paso po la Facul ad de In o má ica de la UCM, en la asig-
na u as que ienen un ue e componen e de p og amación ales como Fun-
damen os de la P og amación, Tecnología de la P og amación o en cu sos
supe io es como Aplicaciones Web, Es uc u a de Da os y Algo i mos o Téc-
1
2Capí ulo 1. In oducción
nicas Algo í micas en Ingenie ía del So wa e, he no ado que la comunicación
en e p o eso es y alumnos o en e los p opios alumnos a la ho a de e los
allos come idos en un código es compleja y equie e de un iempo que, de-
bido a lo ap e ado del calenda io, en gene al no es posible des ina a es a
a ea.
Po ul imo una g an mo i ación po mi pa e ue el mejo a mis conoci-
mien os y ap ende nue as me odologías, lenguajes y ecnologías ac ualmen e
en boga en los en o nos eales de las emp esas.
Con las mo i aciones an e io men e mencionadas nace Scipio, con el es-
pí i u de c ea una pla a o ma que cub a es as necesidades y mejo e ademas
de agiliza es a a ea an impo an e pa a el ap endizaje de un lenguaje de
p og amación.
1.2. Obje i os
1.2.1. Obje i os p incipales
A con inuación se de allan los obje i os que nos p oponemos cumpli .
Co ección de en egas de p ác icas de código
Los p o eso es son unos de p incipales ac o es de nues a aplicación y una
de sus uncionalidades es la de co egi las en egas hechas po los alumnos.
Po ello median e el uso de la aplicación los p o eso es pod án co egi el
código de las p ac icas en egadas de los alumnos, pudiendo ealiza comen-
a ios y co ecciones de código sob e la misma que luego median e un in o me
gene ado el alumno pod á e las mismas esumidas en un mismo documen-
o. El p o eso ambién pod á ac i a la unción de co ección ín e -pa es
desc i a en los obje i os a anzados.
In eg ación con Campus Vi ual
La in eg ación con el campus i ual pe mi e a los p o eso es una mayo
agilidad a la ho a de pode accede ápidamen e al en o no de co ección.
Po ello el p o eso pod á desca ga las p ac icas en egadas en el campus
i ual moodle (Ma in Dougiamas, 2019) y ca ga las en la aplicación de
o ma ápida y sencilla. De o ma in e na se dis ibuyen en e los equipos
(uno o a ios alumnos) median e un sis ema de código en el nomb e del
iche o, usando el iden i icado del g upo al que pe enece la en ega.
Alumnos pueden e sus co ecciones
El eedback en e p o eso es y alumnos es pa e básica de nues a aplica-
ción. Po ello os alumnos pod án e los comen a ios y co ecciones hechas
1.3. Resumen obje i os 3
po el p o eso , ademas del in o me gene ado. Con es o se c ea a un sis ema
de in e acción en e el p o eso y el alumnado, mejo ando la comunicación
en e ambos.
Capacidad po pa e de los p o eso es de ges iona las asigna u as,
a eas y en egas
Los p o eso es pod án ges iona sus asigna u as pa iendo de una asig-
na u a base común y pode adminis a los equipos, a eas y en egas de la
misma de o ma sencilla.
Capacidad po pa e de un adminis ado o adminis ado es de
ges iona la pla a o ma de mane a sencilla
El/los adminis ado es pod án ealiza a eas de man enimien o y ac ua-
lización de los elemen os que componen la pla a o ma. Sus a eas p incipales
se án man ene la base común de asigna u as y la ges ión de los pe iles de
p o eso .
1.2.2. Obje i os a anzados
Una ez alcanzados los obje i os an e io es, plan eamos ambién los si-
guien es obje i os a anzados.
Re isión en e pa es de alumnos
Los alumnos median e un sis ema alea o io pod án ealiza co ecciones
sob e las p ac icas de o os compañe os. Es o p opo ciona o a he amien a
de ap endizaje, pe mi iendo a los alumnos e el abajo de sus compañe os
y ap ende de sus acie os y e o es.
E aluación de e isiones así ealizados
Los alumnos pod án emi i su alo ación sob e el abajo de o os alum-
nos, siendo es o isible solo po el p o eso y el g upo e aluado. median e la
gene ación de un in o me en pd con los comen a ios y posibles co ecciones
ealizadas en el código.
1.3. Resumen obje i os
O1 Co ección de en egas de p ác icas de código. Diseño y discusión en la
sección 4.5.1.
O2 In eg ación con Campus Vi ual. Diseño y discusión en la sección 4.5.2
10 Capí ulo 3. Es ado de la Cues ión
es una pla a o ma publica donde cualquie a puede los p oyec os, es-
o gene a ademas de un p oblema de posibles copias en e alumnos
ademas de la p o ección de da os.
En conclusión, no se conside a que los mé odos al e na i os pa a ealiza
es a a ea sean sa is ac o ios, y po an o esul a necesa io, pa a cumpli los
obje i os, c ea una nue a aplicación.
3.2. Elección del ipo de aplicación
Pa a desa olla y pode soluciona los p oblemas iden i icados en la mo-
i ación,se ha buscado en oca hacia una solución que pe mi a un ácil uso
po pa e de los usua ios así como un man enimien o sencillo, sin comp o-
me e los obje i os ijados.
Se han enido en cuen a a ias opciones.
Aplicación de esc i o io
Aplicación web
Plugin pa a el campus i ual (moodle)
3.2.1. Aplicación de esc i o io
El desa ollo de una aplicación de esc i o io median e Ja a (James Gos-
ling y Mic osys ems, 2019), C++ (Bja ne S ous up, 2019) u o os lenguajes
de simila es ca ac e ís icas, iene en ajas como la obus ez o la apidez de
espues a, pe o ambién des en ajas como la necesidad de ins alación en el
equipo, o de desa olla o al menos p oba e siones especi icas pa a ca-
da sis ema ope a i o. En nues o caso, debido a la na u aleza de nues a
aplicación, si bien la apidez de espues a se ía bien enida, la necesidad de
ins alación indi idual en cada pues o supone una des en aja di ícil de sal-
a ; y el desa ollo mul ipla a o ma esul a ía p ohibi i o. Además, nues a
aplicación equie e de una pe sis encia de da os común a odos los usua ios,
lo cual se acili a con un se icio común alojado en un se ido .
3.2.2. Aplicación web
Una aplicación web o ece en ajas como la independencia del disposi i-
o y del sis ema ope a i o; además, cualquie mejo a solo equie e de una
ac ualización de la aplicación en el se ido pa a es a disponible pa a odos
sus usua ios.
En su con a iene el eque imien o obliga o io de dispone de una cone-
xión a in e ne , así como de ene que se compa ible con los na egado es

3.3. Pee e iew 11
más usados2. O a des en aja es que puede habe e asos debidos al iempo
que a dan las cons an es pe iciones en i y ol e al se ido , algo que no
sucede en una aplicación de esc i o io. Es o se puede minimiza con el uso
de cachés y écnicas de ca ga asínc ona (po ejemplo, AJAX).
3.2.3. Plugin pa a Moodle
El desa ollo de un plugin pa a Moodle (Ma in Dougiamas, 2019) o ece
en ajas a la ho a de la in eg ación con el campus i ual, acili ando a los
p o eso es y alumnos el uso de la he amien a. Po o o lado, la ges ión del
Campus Vi ual es á cen alizada en la UCM, y se ía adminis a i amen e
muy di ícil consegui acep ación de un plugin a es a escala. Po an o, se
desis e de ealiza una in eg ación a es e ni el.
3.2.4. Conclusión
Basándonos en lo an e io men e expues o, se ha omado la decisión de
ealiza nues o p oyec o median e una aplicación web. Es o nos o ece mu-
chas en ajas, incluyendo, ya que no ha emos un plugin Moodle, una g an
libe ad pa a elegi cómo desa olla la aplicación en é minos de ecnologías
y lib e ías exis en es.
3.3. Pee e iew
La e isión ín e -pa es o Pee e iew (Wind y Jensen, 2017) en el ámbi o
del so wa e consis e en, según (Wikipedia con ibu o s, 2019),
La e isión de so wa e en la cual un p oduc o de abajo (docu-
men o, código u o o) es examinado po su au o y uno o más
colegas, pa a e alua su con enido écnico y calidad
En nues o p oyec o la e isión ín e -pa es a a es a ep esen ada en la
co ección de las p ac icas de unos alumnos po pa e de o os. Es e es un
mé odo que omen a el ap endizaje po medio de e en e a un mismo p o-
blema dis in as soluciones apo adas po o os que se encuen an al mismo
ni el de conocimien os. El uso de es e mé odo en p incipio es me amen e o -
ma i o po lo que los alumnos no cali ica an el abajo de sus compañe os de
o ma di ec a, aunque los p o eso es pueden o o ga le alo si lo conside an
opo uno y de la o ma que conside en mejo .
2Algo que, con ecnologías como HTML 5 y jque y, es ela i amen e sencillo y ápido
Cap´
ı ulo 4
Diseño
“The G id. A digi al on ie . I ied o pic u e clus e s o
in o ma ion as hey mo ed h ough he compu e . Wha did hey
look like? Ships, mo o cycles? We e he ci cui s like eeways? I
kep d eaming o a wo ld I hough I’d ne e see. And hen, one
day I go in...”
— Ke in Flynn, TRON
Pa a el diseño del p oyec o se decidió usa una aplicación web. Es o pe -
mi e c ea una aplicación modula que no es necesa io ins ala ni ac ualiza
en cada pues o, con al a usabilidad y con un manejo de da os cen alizado.
Du an e la ase de concepción se explo a on a ias posibles ecnologías, a-
les como Sp ing MVC (The Sp ing Team, 2019), Ruby (Rails Con ibu o s,
2019) amewo ks an o pa a el on end como el backend. También se explo-
a on soluciones sepa adas como Reac (Reac con ibu o s, 2019) o Angula
(Angula Con ibu o s, 2019b) pa a el on end y Exp ess (TJ Holowaychuk,
2019) o Sails (Mike McNeil, 2019) pa a el backend. Pa a la pe sis encia de
la in o mación se es udia on las dos amas p incipales de bases de da os,
sql y nosql. Pa a sql se conside a on di e en es ecnologías ales como pos -
g eSQL (G oup, 2019) o MySQL (MySQL AB y O acle Co po a ion, 2019).
En cuan o a las bases de da os nosql se conside a on Cassand a (Lakshman
y Malik, 2019) y MongoDB (MongoDB, Inc., 2019).
A con inuación explica emos mas en de alle las ecnologías es udiadas
con sus en ajas y des en ajas.
Tecnologías mix as
Las ecnologías mix as conside adas pa a p opo ciona an o el on end
como el backend a la ez han sido Sp ing ó Ruby. Usa una única ecnología
pa a on end y backend es una g an en aja en simplicidad, pe o a su ez
es o ambién limi a su u ilidad pa a cie as pa es de nues a aplicación. Po
13
14 Capí ulo 4. Diseño
ejemplo, el co ec o de código, si a a se ealmen e in e ac i o, iene que
ejecu a se en el on end en o ma de Ja aSc ip .
Ruby Es una ecnología popula pa a la web, con simili udes espec o a
Pe l y Py hon, y dispone de un en o no pa a desa ollo web llamado Rails
(Hansson, 2003). Es a ecnología ue desca ada po el lenguaje usado dado
que no se iene conocimien o del mismo y ap ende un lenguaje comple a-
men e nue o cos a ía un iempo del que no se dispone.
Sp ing MVC po el con a io es a basado en Ja a, que es uno de los
lenguajes más popula es del momen o. Se desca o su uso aun siendo una
ecnología ya conocida en la ca e a, ya que se p e e ía usa un único lenguaje
de p og amación pa a odo el p oyec o (Ja aSc ip ), así como explo a nue as
ecnologías sob e es e lenguaje.
F on end
El on end es la pa e isible de la web, con la que in e ac úan los usua-
ios a a és de sus na egado es. Pa a el on end se pusie on sob e la mesa
dos ecnologías sob e NodeJS muy popula es hoy en día: Reac (Reac con i-
bu o s, 2019) y Angula 1. Ambas son muy simila es y la ez muy di e en es,
la p incipal di e encia es que mien as Reac es solo una lib e ía de Ja aS-
c ip , Angula es un amewo k comple o. Ambos se basan en Ja aSc ip ,
pe o Angula a un paso mas allá y usa TypeSc ip (Mic oso , 2019) que
es un supe conjun o de Ja aSc ip que esencialmen e añade ipos es á icos
y obje os basados en clases. Ambos son g andes ecnologías y con una po-
pula idad simila , y ambas hab ían sido álidas pa a nues as necesidades.
Nos hemos decan ado po el uso de Angula , ya que po mo i os labo ales es
una ecnología ya conocida y no equie e de un p oceso de ap endizaje an
ex enso como Reac .
Backend
El backend es la pa e del sis ema que da sopo e al on end, con iene
la lógica de aplicación, y accede y ges iona los da os de la aplicación y su
pe sis encia. Pa a el desa ollo del backend se p opuso el uso de Sails Lozano
(2014), un amewo k basado a su ez en el amewo k Exp ess, al que añade
a ias capas de abs acción pa a hace un desa ollo más ácil. En e o as
cosas posee un ORM2, mé odos pa a c ea APIs REST ul3y sopo e pa a
maneja pe iciones en iempo eal g acias a Socke .io (Guille mo Rauch,
1Ve es adís icas en lambda es (Nikhil, 2019)
2Técnica de p og amación pa a con e i da os en e el sis ema de ipos u ilizado en
un lenguaje de p og amación o ien ado a obje os y la u ilización de una base de da os
elacional como mo o de pe sis encia.Ve ORM (Wikipedia, 2019a).
3La ans e encia de es ado ep esen acional o REST es un es ilo de a qui ec u a so -
wa e pa a sis emas hipe media dis ibuidos. Ve (Wikipedia, 2019c).
15
2019) 4. Aunque Sails o ece cie as en ajas a la ho a del desa ollo ,se
decidió no usa lo dado que las en ajas que nos pude p opo ciona no supe a
la necesidad que c ea ía de ap ende a maneja una ecnología nue a. Po
las azones an e io es se ha decidió usa el amewo k Exp ess di ec amen e,
dado que se conoce ya su manejo po su uso du an e la ca e a en dis in as
asigna u as.
Elección del modelo y almacén de da os
En la elección de un sis ema de pe sis encia de la in o mación se ba ajó
almacena los da os an o en una base de da os SQL como en un almacén
noSQL, y den o de cada una a ias opciones de implemen ación de cada
una.
noSQL
Los almacenes de da os noSQL di ie en de las bases de da os adicio-
nales en di e en es aspec os impo an es, como que los da os almacenados
no equie en es uc u as ijas o no ga an iza comple amen e las p opieda-
des ACID (a omicidad, consis encia, independencia y du abilidad); o que no
usan SQL pa a consul as. Pa a nues a aplicación se han es udiado dos al-
macenes de da os noSql, Cassand a y MongoDB. Ambas son simila es sus
p incipales di e encias son que Cassand a se basa en un modelo cla e/ alo y
MongoDB es a o ien ada a documen os de esquema lib e usando un o ma o
p opio de documen o llamado BSON, que es una e sión más e icien e (pe o
menos legible) de JSON.
En é minos gene ales se echazo es e ipo de base de da os dado que
su mayo es en ajas que son, la agilidad, la escalabilidad y la capacidad de
p ocesa g andes can idades de da os, no supe an las en ajas en cuan o a
la consis encia y po encia del lenguaje sql que o ecen las bases de da os sql
clásicas, que en nues o caso pa icula son mas necesa ias po el a o a la
in o mación que necesi amos da .
SQL
Las bases de da os elacionales que se han es udiado pa a implemen a la
pe sis encia son Pos g eSQL y MySQL Communi y Se e , po ene ambas
una g an base ins alada y se de código abie o5. Pa a nues o p opósi os
ambas son alidas. Se he decidido usa MySQL dado que ya es conocida con
an e io idad po asigna u as de la ca e a y expe iencia pe sonal.
4Pe mi e ecibi pe iciones de o ma asínc ona del se ido , sin que és e enga que
espe a a ecibi una pe ición an es de pode in o ma de nue os e en os.
5Técnicamen e, MySQL, as su adquisición po O acle, no es 100 % código abie o
(aunque el Communi y Se e sí lo es). No obs an e, se ía equi alen e usa Ma iaDB, que
es una e sión que sí es comple amen e abie a y man iene muy buena compa ibilidad

16 Capí ulo 4. Diseño
Tecnologías elegidas
T as explo a las posibles soluciones ci adas an e io men e, se ha decidido
usa :
F on end Angula en su ul ima e sión es able (8.2.x)
Backend Exp ess sob e NodeJS
Pe sis encia MySQL ó Ma iaDB
Diseño del on end con Angula
Angula es un amewo k pa a aplicaciones web desa ollado en TypeS-
c ip , de código abie o, man enido po Google, que se u iliza pa a c ea y
man ene aplicaciones web de una sola página. Su obje i o es aumen a las
aplicaciones basadas en na egado con capacidad de Modelo Vis a Con o-
lado (MVC).
La biblio eca lee el HTML que con iene a ibu os de las e ique as pe -
sonalizadas adicionales, en onces obedece a las di ec i as de los a ibu os
pe sonalizados, y une las piezas de en ada o salida de la página a un mo-
delo ep esen ado po las a iables es ánda de Ja aSc ip (B endan Eich,
2019).
Angula se basa en componen es, cuyas p opiedades son usadas pa a hace
el una ligadu a (binding) de da os en e los se icios expues os po el backend
y la in e az. En dichas clases enemos an o p opiedades ( a iables) como
mé odos ( unciones a llama ).
Diseño del backend con Exp essJS
Exp ess es una in aes uc u a de aplicaciones web NodeJS (Ryan Dahl,
2019) mínima y lexible que p opo ciona un conjun o sólido de ca ac e ís-
icas pa a las aplicaciones web y mó iles. Es e se puede expandi median e
componen es que pe mi en ealiza múl iples unciones. Con es a base nos
p opo ciona una pla a o ma en la que basa nues o se icio que alimen a a
el on end de Exp ess así como ecibi da os del mismo pa a ealiza las
acciones necesa ias.
Pe sis encia de la in o mación
La pe sis encia de la in o mación se ealiza a median e el uso de una
base de da os con la ecnología MySQL. La in eg ación con la aplicación
se ealiza a median e el uso de la lib e ía de NodeJS llamada Knex (Knex
con ibu o s, 2019), la cual nos pe mi e in eg a en el código la c eación del
4.1. Usua ios 17
esquema de ablas y las pe iciones a la BBDD, y p opo cionando múl iples
he amien as que acili an el uso de la pe sis encia en la aplicación.
4.1. Usua ios
Los usua ios de nues a aplicación es án di ididos en es ipos.
Adminis ado es Su p incipal unción es la del man enimien o de la apli-
cación, Pueden c ea asigna u as así como da de al a a los p o eso es
en la aplicación.
P o eso es Pueden ges iona las asigna u as, jun o con sus a eas y sus
en egas.
Alumnos Pueden e las asigna u as, a eas y en egas a los que es én
inculados median e un equipo.
Los p o eso es pueden ene a ias asigna u as, y una misma asigna u a
ene a ios p o eso es. Es os incula án a los alumnos a los equipos de la
asigna u a. Idealmen e, es os da os p o end ían de una in eg ación con el
sis ema de ges ión académica donde se ins ale Scipio; no obs an e, en el
diseño inicial, hemos conside ado es a in eg ación como no-p io i a ia.
4.2. Asigna u as, g upos, a eas, en íos
Jun o con los usua ios de dis in o ipo, las asigna u as, a eas yen íos
cons i uyen el núcleo p incipal de la aplicación. Es o comp ende la ges ión
de es os es elemen os, incluyendo an o su c eación y modi icación como
su eliminación. la implemen ación de las asigna u as es á di idida en dos
pa es:
1. La asigna u a en sí, que comp ende su código de asigna u a, su ab e-
ia u a, nomb e, y o as p opiedades, especi icadas po los adminis a-
do es del se icio. Po ejemplo, pa a la asigna u a Es uc u a de Da os
y Algo i mos, la ab e ia u a pod ía se EDA y el código GEA 803210.
2. Los g upos de la asigna u a especí icos que c ea y ges iona cada p o e-
so : el cu so al que pe enece, la clase/g upo al que a a es a asignada,
e cé e a. Po ejemplo, un p o eso puede se esponsable del g upo A2
de la asigna u a an e io .
Una ez c eada una asigna u a se le pueden añadi a eas con un nomb e,
una desc ipción y una echa de en ega. Po de ec o se c ean desac i adas y
el p o eso puede ac i a las y desac i a las a su disc eción. Cuando el p o e-
so conside e, puede inicia la co ección de una a ea subiendo al se ido
18 Capí ulo 4. Diseño
un iche o con la es uc u a dada po la pla a o ma moodle pa a a eas, en
su e sión 3.4 ( iche o .zip con ca pe as, cada una con el nomb e del alumno
y equipo que la en ega; y en el in e io de es as un .zip con la en ega).
Pa a pode asigna la en ega a un equipo, el iche o zip de la en ega iene
que con ene en el nomb e el id del equipo al que pe enece. Una ez subido
es e iche o, se gene an de o ma au omá ica los en íos y sus co ecciones
pe inen es; y el p o eso puede ya ac i a la unción de e isión ín e -pa es.
Los en íos son una colección de equipos y sus en egas. En cada uno se en-
d á acceso a la in o mación del equipo al que pe enece y la in o mación
del equipo de co ección ín e -pa es, así como las co ecciones asociadas. El
p o eso siemp e end á una co ección, y en caso de es a ac i ada la co-
ección ín e -pa es ambién se pod án e . los p o eso es pod án isualiza
odas las co ecciones, pe o solo pod án modi ica las p opias, mien as que
los alumnos solamen e pod án e aquellas en que es én implicados, y mo-
di ica aquellas en las que sean co ec o es ín e -pa es, en caso de que es a
opción sea ac i ada po el p o eso .
Cada co ección puede ene es es ados.
Nue a Si no se ha ocado desde su c eación
En p oceso Si ya se ha accedido al código
Finalizada Una ez se ha e minado de co egi y se ha gene ado el in o me
de co ección
Si el es ado es en p oceso o inalizado se mues a un esumen de la co ec-
ción con el o al de iche os comen ados, y el núme o o al de comen a ios;
y si se desea, apa ece án es as mismas ci as desglosadas po iche o. Tam-
bién dependiendo del es ado y el usua io, se mos a an las dis in as acciones
posibles:
Edi a co ección Ve el código de las co ecciones, con la posibilidad de
modi ica las
Ve co ección Ve el código y las co ecciones ya ealizadas
Finaliza co ección Da po inalizada la co ección, y gene a el PDF con
el in o me de co ección
Ve PDF Solo accesible con la co ección inalizada. De uel e un PDF con
la co ección pa a imp imi o subi , como eedback, al Campus Vi ual.
4.3. Sis ema de co ección
Pa a la co ección del código asociado a una p ac ica, se ha elegido como
base la lib e ía CodeMi o (CodeMi o Volun ee s, 2019). Es a lib e ía nos
4.4. Co ección ín e -pa es (pee e iew) 19
pe mi e mos a iche os de código de una o ma en que se pueden di e en-
cia ácilmen e las di e en es pa es del mismo, ya que sopo a ealzado de
sin axis median e colo es y uen es (syn ax highligh ing). También pe mi e,
en e o as cosas, la ges ión de emas (po ejemplo, pa a elegi en e cla o
y oscu o); o la posibilidad de pe mi i modi ica el con enido, o accede en
modo solo lec u a. Sob e es a lib e ía se á necesa io añadi unciones pa a
ges iona comen a ios, ya que no encon amos ninguna lib e ía abie a que
u iese oda la uncionalidad necesa ia.
Jun o con es e iso de código, se implemen a á un á bol de iche os
que nos pe mi e selecciona sob e los iche os disponibles de una co ección
aquel que que emos isualiza a la ho a de gene a comen a ios o co ec-
ciones6.Pa a acili a el desa ollo de la uncionalidad ela i a a la ges ión
de comen a ios sob e CodeMi o , nos decan amos po usa jQue y (jQue y
Founda ion, 2019).
C eación, modi icación y eliminación de comen a ios
Pa a diseña es a pa e lo p ime o que se hizo ue es udia el código que
gene a de o ma au omá ica la lib e ía CodeMi o , con es o pudimos sabe
que e ique as de h ml nos e an ú iles a la ho a de inse a nues as unciones.
Pa a pode ealiza es as unciones se ha decidió usa los núme os de linea que
se mues an en el iso , usando un sis ema de selección única o mul ilinea,
con una selección ya ealizada o un comen a io ya exis en e y median e el
bo ón de echo del a ón se ab i á un menú con ex ual(Con ex Menu) que
nos da á las di e en es opciones disponibles. Pa a la c eación o edición de un
comen a io se ha op ado po el uso de una en ana modal que nos pe mi a
inse a o modi ica los elemen os de un comen a io. También se pe mi i á
el bo ado de comen a ios, median e el menú con ex ual o en la en ana de
edición.
4.4. Co ección ín e -pa es (pee e iew)
La co ección ín e -pa es o pee e iew consis e p incipalmen e en que
un alumno o g upo de alumnos (equipo) co ija la en ega de o o alumno
o equipo. Es e ipo de co ección a o ece en e o as cosas la mejo a de la
comp ensión del código, la capacidad de pensa , al e di e en es soluciones
a un mismo p oblema o la capacidad de au oc í ica al compa a su código
con el de o os compañe os. Es e sis ema de co ección es comple amen e
opcional, el p o eso puede ac i a lo y pa a lo a su disc eción. Cuando es
ac i ado el sis ema gene a de o ma alea o ia una combinación alea o ia de
6Pa a ealiza co ecciones se usa la misma base que un comen a io pe o modi icando
el código seleccionado, po lo que pa a ab e ia solo usa emos la palab a comen a ios pa a
e e i nos a las dos opciones
26 Capí ulo 4. Diseño
Figu a 4.2: Diag ama de Gan (con inuación)

4.7. Diseño de na egación 27
4.7. Diseño de na egación
Diag ama de elación en e los componen es de nues a aplicación.
Figu a 4.3: Esquema de elación en e los componen es
Cap´
ı ulo 5
Implemen ación
5.1. In oducción
Las cues iones básicas elacionadas con la implemen ación como el sis e-
ma ope a i o o el IDE de desa ollo se han omado las decisiones basándose
en la ecnologías que se se án usadas du an e el desa ollo y pos e io des-
pliegue de la aplicación. En elación al sis ema ope a i o se ha usado Ubun u
en su e sion 18.04 o supe io dado que la aplicación se a desplegada en un
sis ema igual o simila basado en Linux con a qui ec u a Debian. En cuan-
o al IDE de desa ollo se ha usado WebS o m que es a basado en In elliJ
desa ollado po Je B ains, Es e p opo ciona odas las he amien as pa a el
desa ollo en Angula ( ypeSc ip ) y ja asc ip . También se han usado o as
aplicaciones como MySQL Wo kbench pa a el desa ollo y man enimien o
de la BBDD. Tan o el IDE como el ges o de la BBDD se han elegido po
ajus a se de la mejo mane a posible a las necesidades del p oyec o y co-
nocimien os de los miemb os del equipo, pudiendo usa se o os sin mayo
p oblema.
5.2. Desa ollo del on end con Angula 8
Pa a el desa ollo del on end como se ha indicado an e io men e se ha
decidido usa el amewo k Angula en su e sion mas ecien e. Al a a se
de una ecnología nue a pa a los alumnos implicados en es e p oyec o ha
eque ido de un ap endizaje con inuo que se no a en las mejo as con inuas
sob e el es a pa e del p oyec o según se p o undizaba en el amewo k y
a anzaba el p oyec o. En p ime luga se c eo un p oyec o básico median e
el uso del clien e p opio de Angula p opo cionado al ins ala Angula en
el sis ema,cuyo acceso median e linea de comandos y Angula CLI (Angula
Con ibu o s, 2019a), p opo ciona ademas de la c eación del p oyec o las
29
30 Capí ulo 5. Implemen ación
he amien as pa a la c eación de elemen os adicionales p opios del ame-
wo k (componen es, se icios, e c). El p oyec o inicial es a compues o po
los iche os y di ec o ios básicos de odo p oyec o de angula , en e los que
podemos encon a .
angula .json La con igu ación básica del p oyec o.
package.json In o mación de los paque es npm ins alados.
scon ig.json Fiche o donde es án con igu ado el compilado de ypeSc ip ,
básico pa a el desa ollo en angula .
s c Es el di ec o io mas impo an e de odos, con iene oda nues a web, o-
dos los módulos, componen es se icios y demás con enidos necesa ios.
Fiche os impo an es den o de es e di ec o io son po ejemplo:
index.h ml Fiche o sob e el que se ca ga an odos los componen es
de la web. Angula se basa en SPA(single-page applica ion), po
que odos los módulos se ca ga an sob e es e iche o en base a las
pe iciones ecibidas.
asse s Di ec o io p incipal de ecu sos pa a nues a web, imágenes,
iconos, iche o de idioma,e c.
app Con iene odos los componen es, módulos, se icios, e c, de nues-
a web.
Los desc i o an e io men e son los componen es indispensables pa a un p o-
yec o angula básico, pos e io men e se añaden mas iche os y di ec o ios
según a anza el p oyec o y su complejidad aumen a, ales como módulos
pa a el en u amien o, con igu ación del ges o del e siones, con igu ación
del ges o de p ocesos (pm2) o el p opio di ec o io donde se encuen a el
se ido de backend. Todos ellos se e án a pos e io i.
Angula dispone de sus p opias lib e ías pa a ealiza muchas de las un-
cionalidades (Nucleo de angula ) po ejemplo Ma e ial.También hay dispo-
nibles lib e ías ex e nas no malmen e denominadas po las le as "ngx", po
ejemplo, ngx- ansla e, añaden nue as uncionalidades el amewo k o me-
jo an/sus i uyen las del núcleo de angula . En nues o p oyec o usamos de
ambos ipos dependiendo de las necesidades que se han enido du an e el
desa ollo. Cabe ema ca que las lib e ías ex e nas muchas eces suelen
e mina o mando pa e del núcleo de angula en e siones pos e io es del
amewo k lo que demues a el g an comp omiso de la comunidad y de sus
c eado es.
En los apa ados siguien es habla emos en p o undidad de la implemen-
ación de las di e en es pa es de la web, Habla emos en e mino de compo-
nen es (elemen os básicos de Angula ) como uncionalidades, siendo así que
5.2. Desa ollo del on end con Angula 8 31
un componen e con iene una uncionalidad de la web, po ejemplo el compo-
nen e .Assignmen sçon iene las uncionales que se pueden ealiza sob e la/s
a ea/s de una asigna u a.
Es ilo g a ico
Pa a la implemen ación g a ica de la web se ha usado la lib e ía g a ica
de angula .Angula Ma e ial"(Angula Con ibu o s, 2019c). Es a lib e ía
nos pe mi e man ene un es ilo y diseño cons an e en la web ademas que
p opo ciona múl iples he amien as pa a ene un diseño esponsi e y ade-
cuado.
Ademas Angula Ma e ial nos p o ee de elemen os g á icos ya c eados
que nos p opo cional una g an can idad uncionalidad con una pequeña con-
igu ación, ademas me man ene una cohe encia en e ellos.
A pa e de la lib e ía mencionada an e io men e enemos una se ie de
hojas de es ilos basadas en el lenguaje Sass (Hamp on Ca lin y Anne, 2019).
Es as es án di ididas en, una hoja p incipal "s yles.scss.en la aíz del p oyec o
que a ec a a oda la web. Ademas cada componen e end á su p opia hoja de
es ilo pa a aquello que solo le a ec e a el. En la hoja p incipal se encuen a
odo aquello que a ec a al conjun o comple o de la web, en e es os elemen os
es a la hoja de es ilo que equie e Angula Ma e ial pa a unciona , y la
pale a de colo es de la web. En el caso de nues o p oyec o se ha op ado po
dis ibui los es ilos p incipales en dis in as hojas pa a mejo a la legibilidad
y la modula idad a la ho a de pode modi ica y mejo a en el u u o. Las
di e en es hojas que se han c eado es án di ididas po el elemen o al que
hacen e e encia, ales como el pie de pagina o el menú p incipal.
Figu a 5.1: Ejemplo en ana p incipal

32 Capí ulo 5. Implemen ación
Colo
Los colo es en nues a web es án de inidos en dos si ios el p ime o es la
hoja que de ine el es ilo pa a la lib e ía Angula Ma e ial, el o o es la pale a
de colo es_pale e.scss" que nos p opo ciona median e un mapa el colo
p incipal ademas de las dis in as sa u aciones y con as es co espondien es
y lo mismo pa a nues o colo secunda io. Es e mapa es accesible median e el
comando map_ge (mapa, alo ) que nos de uel e el código de colo a usa .
En elación a los colo es se ha decidido usa los mismos colo es que se usan
en la web de la acul ad pa a man ene un es ilo común con ella.
Rou ing (En u ado)
El sis ema de en u ado ( ou ing) de la web pe mi e in e conec a los
dis in os componen es en e si pe mi iendo en e o as cosas el paso de pa á-
me os en e componen es. Pa a nues o p oyec o se ha decidido po ene un
sis ema múl iple con dos en u ado es. El p incipal que se enca ga del acceso
a los componen es que no equie en de acceso de usua io. Es e a su ez enlaza
con el en u ado de pa e segu a median e un acceso po login de usua io.
Al se independien es uno del o o nos pe mi e un mayo con ol sob e la
segu idad del si io. Es e sis ema es a implemen ado median e dos módulos,
el p incipal si uado en la aíz del p oyec o y el o o en di ec o io Secu e. Su
es uc u a es muy sencilla, iene un ec o de u as que se componen de una
cadena de ex o que indica los pa áme os de u l y el componen e al que ha
de apun a la u a, es e ec o a su ez se usa como pa áme o a la ho a
impo a el modulo Rou e Module" p opo cionado po angula , el modulo
e mina con la expo ación del mismo pa a pode se usado. Pa a mas in o -
mación sob e el en u ado en angula se puede consul a la documen ación
o icial Angula Con ibu o s (2019d).
In e nacionalización (i18n)
La In e nacionalización de la web se ha ealizado median e la lib e ía ex-
e na de angula ngx- ansla e Angula Con ibu o s (2019e). Es a lib e ía
nos pe mi e que median e unos iche os json o mados po pa ejas de cla e
(Nomb e de la a iable) y alo con la aducción p e endida ( odos han e-
ne los mismos nomb es de a iable pa a la misma aducción) y median e
unos bo ones si uados en la cabece a de la pagina cambia el idioma de la
web en cualquie momen o sin necesidad de eca ga la web.
Pa a su uso en las plan illas de los componen es se usa el código siguien e.
{{’ a iable’| ansla e}}
A es e código se le pueden pasa a iables median e un obje o as la
llamada a ansla e.
{{’ a iable’| ansla e:({’ a 1’: alue})}}
5.2. Desa ollo del on end con Angula 8 33
Los iche os han de ene el código del idioma al que pe enecen las
aducciones de su in e io , es os iche os se encuen an en el di ec o io
asse si18n. El modulo se ha de con igu a en el modulo p incipal de nues a
aplicación app.module. s pa a así pode usado en odo el p oyec o. En e
o as posibilidades nos pe mi e selecciona el idioma po de ec o de nues a
web que en nues o caso se ha indicado a Cas ellano (es).
Figu a 5.2: De alle de la selección de idioma
Es a con igu ación nos pe mi e en el u u o añadi mas idiomas sin di i-
cul ad, solo hay que añadi el iche o json con las aducciones de las a iables
y añadi el co espondien e bo ón en la cabece a.
F on end público
Como indica el i ulo en es a sección a a emos la implemen ación de
pa e publica de nues o p oyec o. Todo lo incluido en es a pa e de la web
es de dominio publico y no equie e de acceso. Los componen es del on end
publico es a conec ados median e el en u ado p incipal es e conec a a los
di e en es componen es públicos y la pa e p i ada a a és del componen e
Login.
Login
La unción p incipal componen e de Login Es pe mi i el acceso median-
e usua io y con aseña a los componen es segu os de la aplicación. O a
unción es c ea nue os alumnos en la aplicación, es os se da án de al a y
pos e io men e los p o eso es pod án asigna los a equipos den o de la asig-
na u as. La c eación de un nue o alumno se ealiza a median e una en ana
modal, los alumnos in oduci án sus da os (nomb e, apellidos, email, usua-
34 Capí ulo 5. Implemen ación
io y con aseña). Como conside ación el nomb e de usua io no puede es a
duplicado ni el co eo es a egis ado con an e io idad.
Figu a 5.3: Vis a del login
Legal no ice
Es e componen e mos a á las conside aciones legales con espec o a
nues a web su isualización se a median e una en ana modal.
Con ibu o s
Es e componen e mos a á la in o mación sob e los desa ollado es de la
aplicación ademas de las ecnologías usadas su isualización se a median e
una en ana modal.
help
Es e componen e mos a á la ayuda de la web si el usua io no es a logeado
mos a a la ayuda con espec o a la c eación de un usua io y el login. En el
caso de es a logeado mos a a la ayuda especi ica pa a el ipo de usua io.
F on end p i ado
Como indica el i ulo en es a sección a a emos la implemen ación de
pa e p i ada de nues o p oyec o. Todo lo incluido en es a pa e de la web
equie e de acceso median e logueo. La pa e p i ada del on end en p i-
me luga dispone del en u ado de la pa e p i ada enca gado de ges iona
los dis in os enlaces en e componen es, ambién dispone del se icio que
ges iona las pe iciones al se ido backend. También iene el componen e
p incipal que acoge a los demás componen es y p opo ciona las u ilidades
básicas ales con la in e nacionalización o la is a del usua io. Disponemos
de una se ie de componen es que ealizan las uncionalidades asociadas a
la pa e segu a de la aplicación. Todas los componen es a excepción de los
5.2. Desa ollo del on end con Angula 8 35
dedicados al man enimien o de la aplicación que solo son accesibles con un
usua io adminis ado ienen dos o mas de inidas po el ipo de usua io.
TEACHER P o eso es
STUDENT Alumnos
Subjec s
Es e componen e con iene la isualización y ges ión ela i a a las asigna-
u as y los equipos que las o man. La is a es a di idida en p ime a ins ancia
po el cu so al que pe enecen las asigna u as en o den descendien e (p ime-
o la mas ac ual), den o de cada pes aña se ep esen an las asigna u as.
Las asigna u as en el caso de los alumnos mos a an la in o mación de los
Figu a 5.4: Ejemplo en ana asigna u as
p o eso es asociados a la asigna u a y la del g upo al que pe enece.
Las asigna u as en el caso de los p o eso es mos a a la in o mación de
los p o eso es asociados y una lis a desplegable con los equipos asociados a
la asigna u a. También dispone de las opciones ges ión de los g upos y las
asigna u as.
Ges ión de equipos Edi a equipo Pe mi e edi a el equipo, añadi y
qui a alumnos del mismo
Elimina equipo Elimina el equipo de la asigna u a y libe a a los
miemb os pa a pode se asignados a o os equipos.
Ges ión de asigna u as Edi a asigna u a Pe mi e edi a asigna u a,
añadi y qui a p o eso es, ademas de cambia el nomb e, pe iodo
y demás da os.
Añadi equipo Pe mi e añadi un equipo a la asigna u a.
Pa a asigna u a Desac i a la isualización de una asigna u a pa a
los alumnos.
42 Capí ulo 5. Implemen ación
asigna u as, es a se ha implemen ado usando una abla que mues a los
cu sos disponibles y su es ado. El es ado se puede modi ica median e un
checkbox si uado en cada ila, adicionalmen e exis e un bo ón que pe mi e
modi ica el cu so. En la pa e in e io de la abla exis e un bo ón que pe mi e
añadi un nue o cu so a la aplicación que po de ec o no es a á ac i ado.
Figu a 5.16: Ven ana de ges ión de cu sos
5.3. A qui ec u a In e na
La aplicación iene dos pa es di e enciadas un se ido backend basado
en NodeJS con exp ess y un on end basado en la a qui ec u a de Angula
en su e sion mas ecien e (ac ualmen e 8).En elación a la pe sis encia de
la in o mación se ha op ado po usa una base de da os basa en MySQL.
Figu a 5.17: Esquema básico de la aplicación
5.3.1. Backend
La a qui ec u a in e na del backend es a basada en un se ido nodeJS
con exp ess, es o nos pe mi e c ea la es uc u a básica pa a ecibi la pe i-
ciones del on end y esponde a las mismas. Mas en p o undidad enemos
a ias pa es di e enciadas.
En u ado es Reciben la pe iciones del del on end y las de i an al con-
olado co espondien e dependiendo de la u l ecibida y mandan de
uel a la espues a. Disponemos de dos, uno pa a la pe iciones que no

5.3. A qui ec u a In e na 43
equie en au en icación (publicas) y o o pa a aquellas que equie en
segu idad (es a au en icado) pa a el acceso a la in o mación.
Con olado es Realizan las unciones p incipales del se ido , eciben los
da os p o enien es del en u ado , ealizan los p ocesos necesa ios y
de uel en la espues a pa a que sea en idada al on end.Es os es án
di ididos en unción de las p incipales unciones del la aplicación, de
es a o ma se mejo a la legibilidad del código y la escalabilidad de la
aplicación.
Ges o de la BBDD Realiza las unciones espec o a la pe sis encia de
da os. Sus p incipales unciones son.
Conec a la BBDD con el se ido .
La gene ación de las ablas así como de los da os básicos pa a el un-
cionamien o de la aplicación.
P o ee a los con olado es de las pe iciones que necesi en pa a a a
con la BBDD.
En el backend ambién es án los di ec o ios donde se han de gua da los
iche os p o enien es de los en íos asociados las las a eas, así como las imá-
genes de los usua ios. También disponemos de un sis ema de logs basado
en Wins on (Cha lie Robbins, 2019) que nos pe mi e man ene un egis o
sob e las acciones y e o es que se p oducen en el backend.
5.3.2. F on end
La a qui ec u a del on end es a ma cada po la de Angula (Con i-
bu o s, 2019), Es a es a basada en una se ie de módulos, componen es y
se icios, a los que se puede ag ega módulos pa a el en u ado de la web
( ou ing), así como o as API’s ex e nas.
Nues a aplicación dispone de una se ie de , se icios y componen es
gene ales que p opo cionan uncionalidades básicas a la aplicación en gene al.
no i ica ions se ice Pe mi e lanza no i icaciones median e el uso de Toas
(Sco Coope , 2019). Las no i icaciones son aducidas al idioma ac-
ual de la aplicación.
lenguage module Modulo de con igu ación pa a la in e nacionalización de
la web.
globals Con iene la decla ación de una se ie de a iables básica de la apli-
cación.
app- ou ing module En u ado p incipal de la aplicación
44 Capí ulo 5. Implemen ación
Figu a 5.18: A qui ec u a de Angula
app componen iche os s, h ml y css enca gados de la is a básica inicial
de la aplicación.
angula -ma e ial module Con igu ación inicial del modulo ma e ial pa a
su implemen ación en la web.
app module Con igu ación inicial de los módulos,enca gado de impo a
los módulos, se icios y componen es, de es e modulo he edan los de-
más módulos las impo aciones de lib e ías básicas.
A pa e de los elemen os básicos desc i os con an e io idad la aplicación es a
di ida en dos pa es di e enciadas.
Public Pa e publica de la aplicación que no equie e de au en icación, Pa-
gina p incipal, login, ayuda,e c. A con inuación lis amos los módulos,
componen es y se icios de los que es a compues o.
Login Componen e del login de usua io
Singup Ven ana modal que pe mi e la c eación de un usua io.
help Ayuda de la aplicación con end á dis in os ex os dependiendo
de es ado de la web y el usua io logeado.
legalNo ice In o mación legal de la aplicación.
con ibu o s In o mación de los c eado es de la web y ecnologías
usadas.
secu e La pa e p i ada, solo se puede accede median e un logeo p e io,
con iene el núcleo de las uncionalidades de nues a web.
secu e- ou ing module En u ado de la pa e p i ada de la aplica-
ción sepa ado del p incipal po segu idad.
5.3. A qui ec u a In e na 45
api se ice P opo ciona a los componen e una se ie de unciones pa a
la conexión con el se ido backend.
in e aces model P opo ciona in e aces con el o ma o de los ele-
men os de las ablas de pe sis encia.
secu e module Modulo de la pa e p i ada, enca gado de impo a
los módulos, se icios y componen es necesa ios.
secu e componen iche os s, h ml y css enca gados de la is a p in-
cipal de la pa e segu a, p opo ciona la ba a de na egación y la
is a indicada po de ec o al en a .
subjec s componen componen e enca gado de la ges ión de las asig-
na u as y g upos asignados a ellas.
edi - eam modal Ven ana modal que pe mi e c ea o modi ica
un equipo de una asigna u a.
edi -subjec modal Ven ana modal que pe mi e c ea o modi-
ica una asigna u a.
Assigmen s componen upg ade.assignmen modal Ven ana mo-
dal que pe mi e c ea o modi ica una a ea.
upload-submissions modal Ven ana modal que pe mi e subi
las en egas de una a ea.
submissions componen Componen e enca gado de mos a las en-
egas y las co ecciones co espondien es a cada una
codemi o componen Componen e que mues a una co ección,
con el á bol de iche os de la en ega y el iso de código. pe mi e
la ealización de los comen a ios y co ecciones sob e el código.
sa e-dialog modal Ven ana modal enca ga de p egun a al usua io
en el caso de que se deje algún comen a io o co ección sin gua da .
con i ma ion-dialog en ana modal que pe mi e es ablece un con-
ol an es de ealiza una acción que no es e e sible.
admin-codes Componen e enca gado de la ges ión de las asigna u as
po pa e del adminis ado .
code-modal Ven ana modal que pe mi e la c eación o modi ica-
ción de un código de asigna u a.
edi ion-modal Ven ana moda que pe mi e la c eación o modi-
icación de un cu so.
admin-use s Componen e enca gado de la ges ión de los usua ios po
pa e del adminis ado .
c ea e-use Ven ana moda que pe mi e la c eación de un usua io
con el ipo especi icado cuando se ab e la en ana.
use -modal Ven ana moda que pe mi e la modi icación de un
usua io.
46 Capí ulo 5. Implemen ación
change-passwo d Ven ana modal modal que pe mi e el cambio
de con aseña de un usua io.
p o ile Es e componen e pe mi e la ges ión po pa e del usua io de
su pe il, incluyendo el cambio de con aseña.
change-p o ile-pwd Ven ana modal que pe mi e el cambio de
la con aseña po pa e del usua io.
disable-con ol-di ec i e Di ec i a que in oduce la posibili-
dad de pode ac i a o desac i a un campo de un o mula io
de o ma dinámica.
alida o s Es e di ec o io con iene los alidado es de los o mula ios cus-
omizados.
code-unique Pe mi e alida que un código GEA de asigna u a sea
único en la base de da os.
edi ion-unique Pe mi e alida que una edición de un cu so sea único
en la base de da os.
email-unique Pe mi e alida que un email de usua io sea único en
la base de da os.
use name-unique Pe mi e alida que un nomb e de usua io sea úni-
co en la base de da os.
ma ch- alue Compa a los campos de con aseña ycon i ma con aseña
y de uel e si son iguales o no.
5.3.3. Pe sis encia
La pe sis encia basada en una base de da os sob e un se ido MySQL,
es a dis ibuida en a ias ablas elacionadas en e si. Se ha p ocu ado ea-
liza una no malización de la misma man eniendo has a la e ce a o ma
no mal 1.
1Ve no malización Wikipedia (2018).
5.3. A qui ec u a In e na 47
Figu a 5.19: Esquema E/R de la base de da os

Cap´
ı ulo 6
Resul ados
“Si buscas esul ados dis in os, no hagas siemp e lo mismo”
— Albe Eins ein
Scipio es en una aplicación pensada pa a esol e un p oblema pe sis en e
en la enseñanza de la p og amación: La co ección de las p ác icas siemp e
ha sido un p oceso len o, y ha p esen ado p oblemas p ác icos a la ho a de
da buen eedback a alumnos.
En nues a aplicación in en amos esol e ambos aspec os del p oblema,
median e un sis ema in e ac i o de co ección en el que los p o eso es pueden
co egi las p ac icas de código de o ma sencilla, mien as los alumnos pue-
den e dichas co ecciones en con ex o y sin ene que e e encia las con a
el código que en ega on o iginalmen e.
Adicionalmen e nues a aplicación inco po a un sis ema de co ección
ín e -pa es que pe mi e la co ección de las p ac icas en e los p opios alum-
nos mejo ando la comp ensión del código po pa e de és os, así como su
capacidad c í ica.
También incluye un sis ema que pe mi e ges iona odo lo elacionado
con las asigna u as, a eas, en egas y co ecciones que espe amos sea de uso
in ui i o y ácil pa a los p o eso es.
El esul ado inal cons i uye una aplicación que, en su es ado ac ual,
ha supe ado las p uebas iniciales en un en o no con olado y es á p epa a-
da pa a ealiza las p ime as p uebas de despliegue en un en o no eal con
alumnos y p o eso es. Es e despliegue se pod ía ealiza en la asigna u a de
IW (Ingenie ía web) del cu so 2019/20, de la que es p o eso el di ec o de
es e abajo.
La aplicación web se ha desa ollado usando ecnologías pun e as y me-
jo es p ác icas de p og amación, lo cual ha supues o un impo an e bene icio
desde el pun o de is a de o mación y ap endizaje.
Tecnologías usadas en la implemen ación
49
50 Capí ulo 6. Resul ados
Angula 8 - la úl ima e sión es able
Exp ess con NodeJS - pa a el backend de la aplicación
Knex - pa a mapeo en idad- elación y acceso a la base de da os MySQL
MySQL se e - como base de da os, p opo cionando pe sis encia a la
aplicación
CodeMi o - no solo usado, sino ambién ex endido pa a pe mi i ano-
a código y mos a ano aciones
bash - pa a el sc ip de ges ión y moni o ización de Scipio
Tecnologías usadas como sopo e pa a el desa ollo
Gi - pa a con ol de e siones
Bi Bucke - eposi o io gi en la nube
pm2 - ges ión de se ido es
Tecnologías usadas en la plani icación y la documen ación
LaTeX, y el paque e TeXiS pa a la documen ación; incluyendo bib ex,
lis ings, y o os múl iples paque es.
P ojec Lib e pa a la plani icación
Google Docs pa a coo dinación
Gimp pa a edición de imágenes
Es ue zo o al de código, según la he amien a cloc1, con la siguien e
línea de comando (es deci , sin inclui documen ación o lib e ías ex e nas):
cloc con sc ip s se e /con olle s se e /i18n se e /
*. js se e /DDBB se e / ou es README.md se e .js
s c T anla ions . babel
La salida de es e comando2es:
217 ex iles.
217 unique iles.
45 iles igno ed.
1Ve cloc (Al Danial, 2015)
2En la dis ibución se incluyen iche os de p ueba (pensados pa a mos a su con enido
y pode deja comen a ios sob e és e) den o de se e / iles, que no obs an e no o man
pa e de Scipio en sí. De ahí lo de allado de la línea de comando.
51
gi hub.com/AlDanial/cloc 1.74 T=0.32 s (578.7 iles/s, 34448.1 lines/s)
-------------------------------------------------------------------------------
Language iles blank commen code
-------------------------------------------------------------------------------
TypeSc ip 108 399 226 4578
Ja aSc ip 21 49 86 2142
HTML 26 25 66 1524
Sass 21 63 26 1016
JSON 7 0 0 470
Ma kdown 1 73 0 167
Bou ne Shell 2 7 0 155
-------------------------------------------------------------------------------
SUM: 186 616 404 10052
-------------------------------------------------------------------------------
Como se puede obse a , la mayo ía del código es TypeSc ip ó Ja aS-
c ip , con algo de ecnologías web suplemen a ias (h ml, plan illas CSS),
JSON pa a iche os de con igu ación, Shell (bash) pa a adminis ación del
se ido y Ma kdown pa a ins ucciones de ins alación del p oyec o.
58 Apéndice A. Documen ación de Usua io
egis o. El nue o alumno debe á in oduci , su nomb e y apellidos, un email,
Figu a A.2: Vis a del egis o de un alumno
un nick de usua io y una con aseña. Tan o el email como el nick de usua io
deben de se únicos si no lo son el sis ema mos a a una ale a.
A.2. Manual de P o eso
En es e manual p esen a emos la uncionalidad de la aplicación desde el
pun o de is a del p o eso , comen a emos odas las posibilidades de la que
dispone y como usa las acompañadas de ejemplos g á icos. En p ime luga
pa a pode accede como p o eso se ha de ene una cuen a como al es o
se ha de solici a a un adminis ado de la aplicación y es e le p opo ciona a
el acceso. Una ez ealizado el login, se mos a a la pan alla p incipal del la
sección segu a de la web con la ges ión de las asigna u as.

A.2. Manual de P o eso 59
Figu a A.3: Ven ana p incipal del p o eso
Ges ión de las asigna u as
La ges ión de las asigna u as pe mi e a los p o eso es adminis a odo lo
elacionados con ellas. Se puede accede a ella desde la ba a de na egación
la e al pulsando en Mis asigna u as. La is a es a di idida en p ime a ins-
Figu a A.4: Ges ión de asigna u as
ancia po cu sos, siendo el mas ecien e el que es a en p ime luga . Den o
de cada cu so se mues an las asigna u as,ademas de un bo ón que pe mi e
añadi una nue a asigna u a siemp e que el cu so es e ac i o 1. Las asigna-
u as disponen de a ias opciones, la p ime a es la ac i ación o desac i ación
1La ac i ación y desac i ación de un cu so depende los adminis ado es de la aplicación
60 Apéndice A. Documen ación de Usua io
de la asigna u a es o a ec a a la isualización de la misma po pa e de los
alumnos asignados a los equipos, po de ec o cuando se c ea una asigna u a
es a á desac i ada y no se pod á ac i a has a que se in oduzca al menos un
equipo. Pa a la c eación o modi icación de una asigna u a se pod á ealiza
median e una en ana modal que se ab e al solici a es a acción. Es a en ana
Figu a A.5: Ven ana de c eación o modi icación de una asigna u a
nos pe mi e selecciona el código de la asigna u a, así como el cu so y el pe-
iodo de in oduci el nomb e de la asigna u a. En la pa e in e io se pod án
selecciona los p o eso es asociados a la asigna u a pa iendo de un lis ado
de los p o eso es disponibles. Si es de nue a c eación po de ec o apa ece á
como p o eso asociado el p o eso que solici e la c eación. Las asigna u as
A.2. Manual de P o eso 61
ienen asignados equipos de alumnos, es os se mues an en un lis ado desple-
gable con su in o mación y acciones disponibles. Los equipos es án o mados
Figu a A.6: Ges ión de equipos
po alumnos, un mismo alumno no puede pe enece a dos equipos den o de
una misma asigna u a. La c eación o modi icación se ealizan median e una
en ana modal que se ab e al solici a alguna de las acciones nomb adas. En
Figu a A.7: Ven ana de c eación o modi icación de un equipo
la en ana podemos añadi y qui a alumnos del g upo, si el g upo ya iene
en egas y co ecciones, las modi icaciones en los alumnos se án e ec i as a
pa i de las siguien es acciones que ealice el equipo.
62 Apéndice A. Documen ación de Usua io
Ges ión de las a eas
A la ges ión de las a eas se accede desde el la ba a de na egación la e al
pulsando Mis a eas. es a en ana de la aplicación es a di idida en p ime a
ins ancia en pes añas, cada una co esponde a una asigna u a, es as a su ez
con ienen las a eas que es án asignadas a esa asigna u a.
Figu a A.8: Ges ión de a eas
Las a eas pueden c ea se y modi ica se median e una en ana modal.
Las a eas es án compues as po un i ulo una desc ipción y una echa de
en ega. Cuando se c ea una a ea po de ec o es a desac i ada, se puede
Figu a A.9: Ven ana de c eación o modi icación de una a ea
ac i a cuando el p o eso lo conside e necesa io. Una ez es e ac i ada la
a ea iene dos es ados. El p ime o es cuando aun no se han subido las
en egas y o o cuando se han subido. En ambos casos se puede modi ica la
a ea, cuando es a en modo sin en ega pe mi e al p o eso subi la en egas
en un o ma o de zip de zips2. en es e los zips de las en egas de los alumnos
debe án es a iden i icados con el Id del equipo al que pe enece la en ega.
2Es e es el o ma o de desca ga de campus i ual moodle
A.2. Manual de P o eso 63
Figu a A.10: Ven ana de subida de una en ega
Si ya se ha ealizado la subida se ac i a a la opción de e las en la is a
de En egas. ademas el p o eso pod á ac i a y desac i a la co ección
ín e -pa es.
Figu a A.11: Ejemplo de a ea sin en egas
Figu a A.12: Ejemplo de a ea con en egas
Cuando se ac i a la co ección ín e -pa es se c ean an as co ecciones
como sean necesa ias ealizando una pe mu ación alea o ia en e los equipos
y gene ando una co ección po cada alumno del equipo.

64 Apéndice A. Documen ación de Usua io
Ges ión de en egas y co ecciones
La ges ión de en egas y co ecciones se accede desde cada a ea una ez
ealizada la subida de las en egas. La aplicación mos a a odas las en egas
ealizadas. Cada en ega mos a a la in o mación del equipo que ha ealizado
Figu a A.13: Ges ión de en egas y co ecciones
la en ega y la co ección del p o eso .
Figu a A.14: Vis a de una a ea
Cuando se ha ac i ado la co ección ín e -pa es en las en egas ambién
apa ece á la in o mación del equipo enca gado de ealiza la co ección sob e
esa en ega, ademas se añadi án las co ecciones de los miemb os de equipo
en modo de isualización.
A.2. Manual de P o eso 65
Figu a A.15: Vis a de una a ea con ín e -pa es
Las co ecciones ienen es posibles es ados nue a, en p oceso y e -
minada, cada una con di e en es acciones en cada uno. Es o se indica el
la pa e supe io de echa de cada co ección. Las co ecciones se pueden
modi ica cuando su es ado es nue a o en p oceso, ademas cuando es a en
p oceso adicionalmen e se puede inaliza la co ección. Una ez se inaliza
una co ección el sis ema gene a un in o me pd con los comen a ios y las
co ecciones hechas sob e el código. Es e in o me es a á accesible median e
un bo ón en la co ección.
Las co ecciones si es án siendo co egidas o ya se ha inalizado la co ec-
ción mos a an el nume o de comen a ios hechos y si se expande mos a a
es a in o mación epa ida en e los di e en es iche o que con engan algún
comen a io o co ección.
66 Apéndice A. Documen ación de Usua io
Figu a A.16: Vis a del de alle de una co ección
A.3. Manual de Alumno
En es e manual p esen a emos la uncionalidad de la aplicación desde
el pun o de is a del alumno, comen a emos odas las posibilidades de la
que dispone y como usa las acompañadas de ejemplos g á icos. Los alumnos
cuando inicia sesión en la is a p incipal e án las asigna u as en las que
pa icipan, es as es as di ididas en p ime a ins ancia po cu sos siendo el
mas ecien e el p ime o.
Figu a A.17: Vis a del de alle de una co ección
Es a cada pes aña de cu so es a di idida en asigna u as, cada una le
p opo ciona al alumno la in o mación sob e los p o eso es asociados a la
asigna u a y los miemb os del equipo al que pe enece en la asigna u a.
Las Ta eas el alumno las puede e pulsando Mis a eas, Es as es án
di ididas en pes añas po asigna u a. Las a eas mos a an su in o mación,
i ulo, desc ipción y echa de en ega.
Si los p o eso es han subido las en egas de la a ea es a mos a a el un
bo ón pa a pode accede a la sección de En egas.
A.3. Manual de Alumno 67
Figu a A.18: Vis a del de alle de una co ección
Cuando el alumno en e en las en egas de una a ea pod á e su en ega
con la co ección del p o eso , ademas si es a ac i a la opción de ín e -pa es se
mos a an las co ecciones que se es én haciendo sob e su p ac ica y aquellas
que enga que hace el alumno sob e las en egas de o os y pode e las de
sus compañe os de equipo.
Figu a A.19: Vis a del de alle de una en ega
74 Apéndice A. Documen ación de Usua io
Ges ión de asigna u as
La ges ión de asigna u as cons a de dos pa es, la ges ión de los códigos
de asigna u a y la ges ión de los cu sos. Es o se mues a en dos pes añas.
Figu a A.32: Ven ana de ges ión de asigna u as
Ges ión de códigos
La ges ión de códigos oasigna u as pe mi e la ges ión de los elemen os
básicos de una asigna u a que luego los p o eso es usa an pa a c ea sus
g upos. Un código es a o mado po un código GEA, una ab e ia u a del
nomb e y el nomb e de la asigna u a. Es os se pueden c ea pulsando el
bo ón de añadi si uado en la pa e in e io de la abla.
Figu a A.33: Ven ana de ges ión de asigna u as

A.5. Manual de Adminis ado 75
En abla ambién se pod á modi ica un código ya exis en e pulsando el
bo ón de modi ica en cada ila.
Figu a A.34: Ven ana de ges ión de asigna u as
Los códigos GEA han de se únicos es os se pueden e en la web de la
uni e sidad complu ense.
Ges ión de cu sos
Los cu sos se componen de una edición po ejemplo 2019/2020 y un
es ado ac ual que ma ca si los g upos, equipos,e c, inculados a ese cu so
pueden modi ica se o son solo de isualización.
Figu a A.35: Ven ana de edición cu sos
La c eación de un cu so se ealiza median e el bo ón si uado en la pa e
in e io , que nos mos a a la siguien e en ana. Los cu sos han de segui el
o ma o yyyy/yyyy (yyyy es un año con cua o ci as, po ejemplo, 2019 o
2020) y ademas ha de se único. cuando se c ean po de ec o es án desac i a-
dos, se pueden ac i a en la abla usando el checkbox de la ila co espondien-
e. De la misma mane a se pueden desac i a . También se puede modi ica
76 Apéndice A. Documen ación de Usua io
un cu so ya exis en e siemp e cumpliendo el o ma o ci ado an e io men e.
(a) Ven ana de modi icación de un cu so (b) Ven ana de c eación de un cu so
Figu a A.36: Ven anas modales de cu sos
Ap´
endice B
Documen ación de Desa ollado
En es e apéndice a a emos, algunos emas elacionados con el man e-
nimien o de la aplicación y ac ualización de algunas pa es del código. En
pa icula , hay dos ex ensiones que esul an ela i amen e áciles de ealiza
sin apenas ene que oca código:
1. Añadi nue os lenguajes de p og amación al componen e de isión/e-
dición de código (CodeMi o ).
2. Añadi nue as aducciones a la in e az, pa a que se pueda e en
o os idiomas.
B.1. Añadi nue os lenguajes de p og amación
Añadi nue os lenguajes al iso de código, con el iempo puede se algo
necesa io, la p og amación a anza a una elocidad muy al a y los lenguajes
que hoy en día son los mas usados en el u u o puede que sean eemplazados
po o os. Po ello a con inuación explica emos como añadi los a nues a
aplicación.
Lo p ime o que debemos hace es comp oba si nues o iso sopo a el
nue o lenguaje, pa a ello comp oba emos la lis a de la lib e ía CodeMi o
donde se indica es o. Una ez comp obado enemos que asegu a nos de que
enemos la ul ima e sion de la lib e ía en el sis ema pa a ello lanza emos el
comando npm ins all codemi o @la es –sa e sob e la ca pe a donde
engamos el código del p oyec o. El siguien e paso es impo a las lib e ías
que necesi emos, pa a ellos ab imos el iche o codemi o .componen . s
si uado en el componen e codemi o de la ca pe a secu e en nues o p o-
yec o de angula . En la pa e supe io es án las impo aciones de los modos,
ahí debemos añadi nues os nue os lenguajes con la misma es uc u a, sus-
i uyendo los as e iscos po la u a del iche o de nues o lenguaje:
77
78 Apéndice B. Documen ación de Desa ollado
impo " codemi o /mode/*** /***"
Es a misma ope ación hay que epe i la en el iche o commen -line.componen
si uado en la ca pe a commen .modal en el componen e codemi o .
Po ul imo hay que añadi la co espondencia en e el lenguaje y sus
ex ensiones es o de ealiza en la abla ile ypes inse ando una linea po
cada ex ension nue a y su modo 1.
Con es os pasos la aplicación es a á p epa ada pa a lee los iche os del
nue o lenguaje cuando se le p esen en.
B.2. Añadi nue as aducciones a la in e az
Pa a pode añadi un nue a aduccion a la in e az de la web (po ejem-
plo pa a da mejo sopo e a g upos de inglés) lo p ime o que necesi amos es
ag ega el iche o con las mismas, pa a acili a la a ea podemos coge unos
de los iche os ya exis en e en la u a s c/asse s/i18n En ella encon a as
una se ie de iche os json con las ab e ia u as de los idiomas ya exis en es en
la web (es.json,en.json, e c), si duplicamos unos de ellos ya end emos la
es uc u a de a iables a aduci . O a opción es usa un p og ama dedicado
a es a a ea, exis en a ias posibilidades, aquí os dejamos es. La p ime a
es el aduc o de babel (GmbH, 2019), es una he amien a de pago pe o
con un pe iodo de p ueba, posee una g an in e az y es de ácil uso, como
en aja e p opone aducciones de un iche o ya exis en e al nue o idioma
que desees. O a opción es usa la web T ansla ion manage (Robin, 2019)
es comple amen e g a ui a, pe o su in e az es mas sencilla y no da ayudas
a la aducción. También exis e una ex ension de isual s udio code que
ealiza es a unción.
Una ez aducido el iche o se ha de gua da con la ab e ia u a del nom-
b e de idioma que se desc iben median e una especi icación IETF llamada
BCP 47 (lan, 2009), po ejemplo, ingles es en o ances es , e c.
El segundo paso es añadi al código la opción de selecciona ese idioma,
pa a ello enemos que añadi la siguien e linea a los iche os app.componen .h ml
ysecu e.componen .h ml jun o a las del es o de idiomas.
<bu on ma −menu−i em
[ ngClass]="{'langAc i e': langSelec ed=='[mi idioma]'}"
( c l i c k )="changeLang('[mi idioma]')"
i l e="{{'lang_[mi idioma]'| ansla e}}">
<ma −icon s gIcon="[mi idioma]" class="no-padding-img">
</ma −icon>
<span>{{'lang_[mi idioma]'| a n s l a e }}</span>
</bu on>
1El nomb e del modo se ex ae de la lis a mencionada en el p ime paso
B.2. Añadi nue as aducciones a la in e az 79
Pa a inaliza enemos que añadi el icono s g del idioma, pa a ello lo
podemos desca ga de la web la icon, es e icono lo gua da emos en el di-
ec o io asse s/images/s g con la ab e ia u a de idioma que hemos usado
an e io men e y añadimos la siguien e linea a los iche os app.componen . s
ysecu e.componen . s jun o a las del es o de idiomas.
iconRegis y . addS gIcon ('[mi idioma ]',
sani ize . bypassSecu i yT us Resou ceU l (
'../asse s/images/s g /[mi idioma ]. s g '));
Es ecomendable ealiza comp obaciones sob e la aplicación pa a e
que se han aducido odas las a iables co ec amen e y quedan bien isual-
men e.
Con es o ya end emos nues o nue o idioma en la in e az de la web, el
p opio sis ema se enca ga a de mos a lo cuando el usua io lo solici e.

Ap´
endice C
README
C.1. Scipio
Scipio es una aplicación basada en la c eación de una aplicación pa a la
co ección de p ac icas de p og amación po pa e de los p o eso es y en e
los p opios alumnos (in e -pa es), así como la gene ación de in o mes de
dichas co ecciones pa a el eedback.
Requisi os
Linux ubun u 18.04 o supe io
Angula CLI en su e sion 8.0.1 o supe io
pm2 p ocess manage e sion 3.5.0 o supe io
MySQL Communi y Se e Ve 14.14 Dis ib 5.7.27
No se puede asegu a el uncionamien o en e siones in e io es a las an-
e io men e lis adas.
C.2. Ins alación
A con inuación se desc ibe el p oceso de ins alación de la aplicación.
Desca ga del p oyec o
Pa a pode desca ga el p oyec o es necesa io ene ins alado Gi .
sudo ap ins all gi
81
82 Apéndice C. README
Pa a comp oba la ins alación podemos ejecu a el siguien e comando.
gi -- e sion
A con inuación p ocedemos a desca ga el p oyec o
gi clone h ps: // bi bucke . o g /olaye 66/scipio . gi
Una e desca gado p ocede emos a la ins alación de la aplicación.
C.2.0.1. Ins alación de la aplicación
Pa a la ins alación nos amos al di ec o io de la aplicación y ejecu amos
npm ins all
npm ins all --only =" de "
Una ez e mine pod emos a ins ala los elemen os ex e nos a la aplica-
ción necesa ios (pm2 y MySQL se e )
MySQL se e Pa a ins ala el se ido de MySQL se ecomienda segui
el u o ial siguien e.
h ps://www . digi alocean . com /communi y / u o ials/
como-ins ala -mysql-en-ubun u-18-04-es
Una ez ins alado pod emos c ea la base de da os y las ablas usa emos
el sc ip de ges ión de la aplicación, que se explica en la sección de Ges ión.
PA a ges iona la base de da os si disponemos de in e az g á ica podemos
usa mysql wo kbench, phpmyadmin o cualquie ges o que pe mi a bases de
da os mysql. Si no disponemos de in e az g á ica podemos usa el comando.
mysql -u oo -p
Nos pe mi i á en an en el modo consola de mysql.
pm2 Pa a ins ala el ges o de p ocesos lanzamos el siguien e comando en
la consola
npm ins all pm2@la es -g
C.3. Con igu ación 83
angula Pa a ins ala angula en el sis ema lanzamos el siguien e comando
en la consola.
npm ins all -g @angula /cli
nodemon Pa a ins ala el se ido backend de desa ollo lanzamos el si-
guien e comando.
npm ins all nodemon -g
C.3. Con igu ación
Base de da os
Pa a con igu a las base de da os de nues a aplicación debemos de ab i
el iche o de con igu ación “knex.js” que es a si uado en la ca pe a “con ” de
la aiz del p oyec o. En es e iche o encon a emos dos con igu aciones igua-
les una pa a desa ollo (de elopmen ) y o a pa a p oducción (p oduc ion).
Ambas con ienen la misma es uc u a.
{
clien : 'mysql ',
connec ion: {
hos : '127.0.0.1 ',
use : ' oo ',
passwo d : 'T g2019!',
da abase : 'scipioDB'
},
useNullAsDe aul : ue
}
En es a es uc u a los campos que se han de modi ica son.
hos : La di ección IP del se ido MySql.
use : El nomb e del usua io de la base de da os con el que amos a
accede , es e se ha con igu ado en el paso “Ins alación de MySql se e ”.
passwo d: La con aseña asociada al usua io an e io .
Se ecomienda cambia el usua io y la con aseña un uno p opio, y que
sean dis in os pa a caso, en desa ollo se puede usa el usua io de oo pe o
en el caso de p oducción se ecomienda el uso de un usua io con pe misos
mas limi ados (lec u a y esc i u a) pa a e i a accesos no au o izados.
90 BIBLIOGRAFÍA
Cha lie Robbins. Wins on. h ps://gi hub.com/wins onjs/wins on,
2019. Accessed: 2019-08-05.
CodeMi o Volun ee s. Codemi o . h ps://codemi o .ne /,
2019. Accessed: 2019-04-25.
Con ibu o s, A. A chi ec u e o e iew. h ps://angula .io/guide/
a chi ec u e, 2019. [Online; accessed 07-Sep embe -2019].
jQue y Founda ion, T. jque y. h ps://jque y.com/, 2019. Accessed:
2019-08-19.
GmbH, C. babel edi o . h ps://www.codeandweb.com/babeledi , 2019.
[Online; accessed 04-Sep embe -2019].
G oup, P. G. D. Pos g esql. h ps://www.pos g esql.o g/, 2019. Ac-
cessed: 2019-08-23.
Guille mo Rauch. Socke .io. h ps://socke .io/, 2019. Accessed: 2019-
09-09.
Hamp on Ca lin, C. E., Na alie Weizenbaum yAnne, J. Sass. h ps:
//sass-lang.com/, 2019. Accessed: 2019-08-12.
Hansson, D. H. Rails. h p:// ubyon ails.o g.es/, 2003. Accessed:
2019-08-23.
James Gosling yMic osys ems, S. Ja a. h ps://es.wikipedia.o g/
wiki/Ja a_(lenguaje_de_p og amaci%C3%B3n), 2019. Accessed: 2019-
04-29.
Knex con ibu o s. Knex que y builde . h ps://knexjs.o g/, 2019.
Accessed: 2019-01-18.
Lakshman, A. yMalik, P. Cassand a. h p://cassand a.apache.o g/,
2019. Accessed: 2019-08-23.
Lozano, I. A. Sails u o ial. h ps://abalozz.es/
in oduccion-a-sails-js-un- amewo k-pa a-c ea -aplicaciones- eal ime/,
2014. [Online; accessed 23-Augus -2019].
Ma in Dougiamas. Moodle. h ps://moodle.o g/, 2019. Accessed:
2019-04-29.
Mic oso . Typesc ip . h ps://www. ypesc ip lang.o g/, 2019. Ac-
cessed: 2019-04-29.
Mike McNeil. Exp ess. h ps://sailsjs.com/, 2019. Accessed: 2019-03-
05.

BIBLIOGRAFÍA 91
MongoDB, Inc. Mongodb. h ps://www.mongodb.com/, 2019. Accessed:
2019-08-23.
MySQL AB, S. yO acle Co po a ion. Mysql. h ps://www.mysql.
com/, 2019. Accessed: 2019-04-29.
Nikhil. Es adis icas uso o n ends. h ps://www.lambda es .com/blog/
op-ja asc ip - amewo ks- o -2019/, 2019. Accessed: 2019-09-09.
Rails Con ibu o s. Ruby on ails. h ps:// ubyon ails.o g/, 2019.
Accessed: 2019-03-05.
Reac con ibu o s. Reac lib a y. h ps:// eac js.o g/, 2019. Ac-
cessed: 2019-03-05.
Robin, N. T ansla ion manage . h ps:// ansla ion-manage -86c3d.
i ebaseapp.com/, 2019. [Online; accessed 04-Sep embe -2019].
Ryan Dahl. Nodejs. h ps://nodejs.o g/es/, 2019. Accessed: 2019-04-
29.
Sco Coope . Toas . h ps://gi hub.com/sc cpe /ngx- oas ,
2019. Accessed: 2019-08-30.
The Gi Hub Team. Gi hub. h ps://gi hub.com/, 2019. Accessed: 2019-
09-09.
The Sp ing Team. Sp ing amewo k. h ps://sp ing.io/, 2019. Ac-
cessed: 2019-03-05.
TJ Holowaychuk. Exp ess. h ps://exp essjs.com, 2019. Accessed:
2019-03-05.
Wikipedia. Fo ma no mal (base de da os) — wikipedia, la enciclopedia
lib e. h ps://es.wikipedia.o g/w/index.php? i le=Fo ma_no mal_
(base_de_da os)&oldid=106197642, 2018. [Online; accessed 30-Augus -
2019].
Wikipedia. Mapeo obje o- elacional — wikipedia, la enciclope-
dia lib e. hh ps://es.wikipedia.o g/w/index.php? i le=Mapeo_
obje o- elacional&oldid=117375002, 2019a. [In e ne ; desca gado 9-
sep iemb e-2019].
Wikipedia. Ma kdown — wikipedia, la enciclopedia lib e. h ps:
//es.wikipedia.o g/w/index.php? i le=Ma kdown&oldid=116367584,
2019b. Accessed: 2019-09-09.
Wikipedia. T ans e encia de es ado ep esen acional — wikipedia, la enci-
clopedia lib e. 2019c. [In e ne ; desca gado 9-sep iemb e-2019].
92 BIBLIOGRAFÍA
Wikipedia con ibu o s. So wa e pee e iew — Wikipedia, he
ee encyclopedia. h ps://en.wikipedia.o g/w/index.php? i le=
So wa e_pee _ e iew&oldid=892996558, 2019. [Online; accessed 23-
Augus -2019].
Wind, D. K. yJensen, U. A. Quan i ying eedback: Insigh s in o pee
assessmen da a. h p://0-sea ch.p oques .com.cisne.sim.ucm.es/
doc iew/1967318296?accoun id=14514, 2017. Copy igh - Copy igh
Academic Con e ences In e na ional Limi ed Jun 2017; Úl ima ac uali-
zación - 2019-06-28.
–¿Qué e pa ece des o, Sancho? – Dijo Don Quijo e –
Bien pod án los encan ado es qui a me la en u a,
pe o el es ue zo y el ánimo, se á imposible.
Segunda pa e del Ingenioso Caballe o
Don Quijo e de la Mancha
Miguel de Ce an es
–Buena es á – dijo Sancho –; í mela ues a me ced.
–No es menes e i ma la – dijo Don Quijo e–,
sino solamen e pone mi úb ica.
P ime a pa e del Ingenioso Caballe o
Don Quijo e de la Mancha
Miguel de Ce an es