Aplicación web para facilitar la corrección de prácticas de programación con integración en campus virtual. Scipio: Sistema de Corrección Inter-pares Para códIgO

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