Mejoras de una App para la gestión de la gamificación (II)

Mejo as en una app pa a la ges ión de la gami icación (II) | 1
TRABAJO FINAL DE GRADO
Tí ulo: Mejo as en una app pa a la ges ión de la gami icación (II)
Ti ulación: G ado en Ingenie ía Telemá ica
Au o : Sumaya Benali Laa i
Di ec o : Miguel Vale o Ga cía
Fecha: 8 de julio del 2022
Mejo as en una app pa a la ges ión de la gami icación (II) | 2
Tí ulo: Mejo as en una app pa a la ges ión de la gami icación (I)
Ti ulación: G ado en Ingenie ía Telemá ica
Au o : Sumaya Benali Laa i
Di ec o : Miguel Vale o Ga cía
Fecha: 8 de julio del 2022
Resumen
El p oyec o, que se desc ibe a con inuación, es á basado en la implemen ación de cinco
juegos pa a una aplicación de gami icación llamada Classpip, o ien ada al sec o educa i o.
Su uso omen a e inc emen a el dinamismo y endimien o en las clases, ya que el obje i o es
mo i a a los alumnos con juegos compe i i os a pa icipa y ap ende .
En es e caso, el p oyec o en el que se ha abajado a di igido en su o alidad a la expe iencia
de usua io del p o eso , donde se ha abajado en la implemen ación de cinco juegos pa a la
aplicación mó il del p o eso que se explica án a con inuación.
El obje i o de es e p oyec o e a acili a el uso de Classpip pa a los docen es en las clases.
Classpip iene implemen ado un Dashboa d donde el p o eso iene el con ol de la c eación,
modi icación y uso de los juegos desde es a una página web. Pe o eniendo en cuen a las
limi aciones que iene el dashboa d de ca a a la mo ilidad o el uso de Classpip en las clases,
una aplicación mó il pa a el docen e e a una opción a ene en cuen a.
Pa a cub i es a necesidad se ha abajado en la mig ación de cinco juegos que p e iamen e
exis ían en el Dashboa d. Reu ilizando así algunas uncionalidades ya exis en es, aplicando
a ias mejo as es é icas y añadiendo o as uncionalidades nue as y necesa ias en a ios
juegos, pa a mejo a la expe iencia de usua io del docen e.
El equipo pa a lle a a cabo es e p oyec o es á o mado po dos pe sonas. Ambos miemb os
del equipo han abajado en la implemen ación de odos los juegos que se desc iben a
con inuación en es e documen o.
Pa a la ges ión, o ganización de los iempos y la epa ición de a eas, se ha usado la
me odología SCRUM. Y se ealizó la epa ición de las a eas en unción de las di e en es
uncionalidades que equie e ene cada uno de los juegos.
En es e documen o se pod á segui de alladamen e los obje i os, la es a egia de abajo y el
análisis p e io de cada uno de los juegos a implemen a con su co espondien e desc ipción.
También el p oceso de implemen ación con la co espondien e explicación de código, las
decisiones omadas y e os supe ados, y las p uebas ealizadas pa a la demos ación de un
co ec o uncionamien o.
Mejo as en una app pa a la ges ión de la gami icación (II) | 3
Tí ulo: Mejo as en una app pa a la ges ión de la gami icación (I)
Ti ulación: G ado en Ingenie ía Telemá ica
Au o : Sumaya Benali Laa i
Di ec o : Miguel Vale o Ga cía
Fecha: 8 de julio del 2022
O e iew
The p ojec desc ibed below is based on he implemen a ion o i e games o a gami ica ion
applica ion called Classpip, aimed a he educa ional sec o . I s use encou ages and inc eases
dynamism and pe o mance in classes, since he objec i e is o mo i a e s uden s wi h
compe i i e games o pa icipa e and lea n.
In his case, he p ojec ha has been wo ked on is en i ely aimed a he eache 's use
expe ience, whe e hey ha e wo ked on he implemen a ion o i e games o he eache 's
mobile applica ion ha will be explained below.
The objec i e o his p ojec was o acili a e he use o Classpip o eache s in he class oom.
Classpip has implemen ed a Dashboa d whe e he eache has con ol o he c ea ion,
modi ica ion and use o he games om his web page. Bu aking in o accoun he limi a ions
ha he dashboa d has in e ms o mobili y o he use o Classpip in classes, a mobile
applica ion o he eache was an op ion o conside .
To co e his need, we ha e wo ked on he mig a ion o i e games ha p e iously exis ed in
he Dashboa d. Thus, eusing some exis ing unc ionali ies, applying se e al aes he ic
imp o emen s and adding o he new and necessa y unc ionali ies in se e al games, o
imp o e he use expe ience o he eache .
The eam o ca y ou his p ojec consis s o wo people. Bo h eam membe s ha e wo ked
on he implemen a ion o all he games desc ibed below in his documen .
Fo he managemen , o ganiza ion o imes and he dis ibu ion o asks, he SCRUM
me hodology has been used. And he dis ibu ion o asks was ca ied ou based on he
di e en unc ionali ies ha each o he games equi es.
In his documen i will be possible o ollow in de ail he objec i es, he wo k s a egy and he
p e ious analysis o each o he games o be implemen ed wi h hei co esponding
desc ip ion. Also, he implemen a ion p ocess wi h he co esponding code explana ion, he
decisions made and challenges o e come, and he es s ca ied ou o demons a e co ec
ope a ion.
Mejo as en una app pa a la ges ión de la gami icación (II) | 4
ÍNDICE
CAPÍTULO 1. INTRODUCCIÓN ..................................................................................................................................... 7
1.1. P oyec o Classpip ................................................................................................................................................ 7
1.2. Es uc u a de la memo ia ................................................................................................................................ 8
1.3. Equipo de abajo ................................................................................................................................................ 9
1.4. ¿Qué he hecho en es e TFG? ............................................................................................................................ 9
1.5. Mo i ación pe sonal .........................................................................................................................................11
CAPÍTULO 2. INTRODUCCIÓN A CLASSPIP ........................................................................................................12
2.1. ¿Qué es la gami icación? .................................................................................................................................12
2.2 A qui ec u a del p oyec o ..............................................................................................................................12
2.3 Funcionalidades del ecosis ema ...................................................................................................................14
2.4 ¿Qué he amien as del ecosis ema hemos u ilizado en nues o p oyec o? ...............................17
CAPÍTULO 3: OBJETIVOS Y PLAN DE TRABAJO .................................................................................................19
3.1. Me odología Sc um ...........................................................................................................................................19
3.2. He amien a T ello ...........................................................................................................................................24
CAPÍTULO 4: TAREAS PREVIAS ................................................................................................................................25
4.1 Pagina de egis o ..............................................................................................................................................25
CAPÍTULO 5: ANÁLISIS DE LOS JUEGOS A IMPLEMENTAR..........................................................................29
5.1 C eación del g upo .............................................................................................................................................29
5.2. Juego de compe ición .......................................................................................................................................29
5.2.1. Liga.................................................................................................................................................................30
5.2.2. Fó mula Uno ...............................................................................................................................................31
5.2.3. To neo ...........................................................................................................................................................32
5.3. E aluación ............................................................................................................................................................33
5.3.1. C ea Juego ..................................................................................................................................................33
5.3.2. Rúb ica ..........................................................................................................................................................33
5.3.3. P egun as abie as ....................................................................................................................................34
5.3.4. Pun o de is a del p o eso ...................................................................................................................34
5.3.5. Pun o de is a del alumno .....................................................................................................................35
5.4. Con ol de abajo en g upo ..........................................................................................................................35
5.4.1 C ea Juego ...................................................................................................................................................35
5.4.2. Pun o de is a del p o eso ...................................................................................................................35
5.4.3. Pun o de is a del alumno .....................................................................................................................36
5.5. Juego de o aciones ..........................................................................................................................................36
Mejo as en una app pa a la ges ión de la gami icación (II) | 5
5.5.1. C ea Juego ..................................................................................................................................................36
5.5.2. Uno a odos ..................................................................................................................................................36
5.5.3. Todos a uno .................................................................................................................................................37
5.5.4. A opciones ....................................................................................................................................................38
5.6. Cues iona io de sa is acción .........................................................................................................................38
5.6.1. C ea Juego ..................................................................................................................................................39
5.6.2. Pun o de is a del p o eso ...................................................................................................................39
CAPÍTULO 6. JUEGO DE COMPETICIÓN ................................................................................................................40
6.1. ¿En qué consis e el juego de compe ición? .............................................................................................40
6.2. Modalidades del juego de compe ición ....................................................................................................40
6.3 Tipología del juego de compe ición ............................................................................................................41
6.4. Página de Inicio ..................................................................................................................................................41
6.4.1 ¿En qué consis e la uncionalidad? .....................................................................................................41
6.4.2 Plani icación pa a la implemen ación ...............................................................................................42
6.4.3 Implemen ación del juego ......................................................................................................................42
6.4.4 Re os des acados ........................................................................................................................................44
6.5. Funcionalidad 1: Ve p og eso ....................................................................................................................44
6.5.1 ¿En qué consis e la uncionalidad? .....................................................................................................44
6.5.2 Plani icación pa a la implemen ación ...............................................................................................44
6.5.3 Implemen ación del juego ......................................................................................................................45
6.5.4 Re os des acados ........................................................................................................................................47
6.6. Funcionalidad 2: Edi a Jo nadas ...............................................................................................................47
6.6.1 ¿En qué consis e la uncionalidad? .....................................................................................................47
6.6.2 Plani icación pa a la implemen ación ...............................................................................................47
6.6.3 Implemen ación del juego ......................................................................................................................48
6.6.4 Re os des acados ........................................................................................................................................50
6.7. Funcionalidad 3: Edi a Pun os ..................................................................................................................50
6.7.1 ¿En qué consis e la uncionalidad? .....................................................................................................50
6.7.2 Plani icación pa a la implemen ación ...............................................................................................50
6.7.3 Implemen ación del juego ......................................................................................................................51
6.7.4 Re os des acados ........................................................................................................................................53
6.8. Funcionalidad 4: Desac i a ........................................................................................................................53
6.8.1 ¿En qué consis e la uncionalidad? .....................................................................................................53
6.8.2 Plani icación pa a la implemen ación ...............................................................................................53
6.8.3 Implemen ación del juego ......................................................................................................................54
6.8.4 Re os des acados ........................................................................................................................................54
6.9. Tes ing del co ec o uncionamien o ........................................................................................................55

Mejo as en una app pa a la ges ión de la gami icación (II) | 6
CAPÍTULO 7. JUEGO DE CONTROL DE TRABAJO...............................................................................................61
7.1. ¿En qué consis e el juego de con ol de abajo? .................................................................................61
7.2. Funcionalidad 1: Visualización de la in o mación ...............................................................................62
7.2.1 Plani icación pa a la implemen ación ...............................................................................................62
7.2.2 Implemen ación del juego ......................................................................................................................64
7.2.3 Re os des acados ........................................................................................................................................67
7.3. Funcionalidad 2: En ío de co eos elec ónicos ..................................................................................69
7.3.1 Plani icación pa a la implemen ación ...............................................................................................69
7.3.2 Implemen ación del juego ......................................................................................................................70
7.3.3 Re os des acados ........................................................................................................................................74
7.4. Tes ing del co ec o uncionamien o ........................................................................................................74
CAPÍTULO 8. JUEGO DE CUESTIONARIO DE SATISFACCIÓN .......................................................................77
8.1. ¿En qué consis e el juego de cues iona io de sa is acción? .............................................................77
8.2. Funcionalidad 1: Visualización de la in o mación ...............................................................................78
8.2.1 Plani icación pa a la implemen ación ...............................................................................................78
8.2.2 Implemen ación del juego ......................................................................................................................80
8.2.3 Re os des acados ........................................................................................................................................82
8.3. Tes ing del co ec o uncionamien o ........................................................................................................82
CAPÍTULO 9. DISEÑO GENERAL DE LA APLICACIÓN......................................................................................84
9.1. Ca ds juegos: Cambio de la es é ica pa a mejo a la uncionalidad .............................................84
9.2. Pan alla de inicio de juego de compe ición ............................................................................................85
9.3. Bo ones: Es é ica según el ipo de unción del bo ón .........................................................................86
9.4. Tablas: Mejo a es é ica pa a co ec a isualización ...........................................................................87
CAPÍTULO 10. RETOS MÁS DESTACADOS ...........................................................................................................89
10.1. Nodemaile : He amien a de en ío de co eos elec ónicos........................................................89
10.1.1. Gmail: P oblemas de au en icación ................................................................................................89
10.1.2. Gmail: P oblemas de au en icación ................................................................................................92
10.1.3. Gmail: Uso de una con aseña de aplicación ...............................................................................94
10.2. P oblemá ica con las e siones ................................................................................................................97
10.2.1. P ime a p opues a: Realiza los pasos de ins alación de nue o ........................................98
10.2.2. Segunda p opues a: Desins ala Node comple amen e .........................................................98
10.2.3. Te ce a p opues a: NVM .....................................................................................................................99
CAPÍTULO 11. CONCLUSIONES .............................................................................................................................. 101
11.1. Conclusiones écnicas ................................................................................................................................ 101
11.2 Valo ación de los obje i os y el plan de abajo .............................................................................. 101
11.3. Valo ación pe sonal .................................................................................................................................... 102
REFERENCIAS ............................................................................................................................................................... 103
Mejo as en una app pa a la ges ión de la gami icación (II) | 7
CAPÍTULO 1. INTRODUCCIÓN
En es e capí ulo pod emos e las ideas p incipales del p oyec o. Se explica á en qué consis e
el p oyec o Classpip y ambién, como es á es uc u ada la memo ia. Seguidamen e, algunos
de alles del equipo de abajo, cómo ha sido la o ganización y la di isión de a eas pa a lle a
a cabo el obje i o del p oyec o. A con inuación, Se comen a á qué se ha hecho exac amen e
en es e TFG, y que di e encias y simili udes iene es e documen o en compa a i a al
documen o de mi compañe o de abajo, ya que es e TFG se ha hecho po un equipo o mado
po dos pe sonas. Finalmen e, se de alla án las azones po las que decidí pa icipa en dicho
p oyec o.
1.1. P oyec o Classpip
La idea del p oyec o de Classpip se o iginó a causa del in e és en mejo a algo del sec o
educa i o, donde g acias a es a he amien a los alumnos y docen es pueden bene icia se
pa a mejo a el endimien o académico en las escuelas y la pa icipación de los alumnos en
el aula. G acias a es a he amien a, el dinamismo en las ac i idades en clase e incluso el
ap endizaje puede e se a ec ado de o ma posi i a.
Classpip es una he amien a que u iliza la gami icación, la cual es cla e pa a b inda la
mo i ación necesa ia pa a log a un mejo endimien o académico en la escuela a a és de
minijuegos u o as ac i idades. Ese es el obje i o de es e p oyec o, inc emen a el endimien o
de los alumnos, c eando si uaciones pa a impulsa ac i udes como p es a más a ención, po
el dinamismo que se c ee en clase g acias al uso de Classpip.
Es e p oyec o ue c eado po la Escuela de Ingenie ía de Telecomunicación y Ae oespacial
de Cas ellde els (EETAC) de la Uni e sidad Poli écnica de Ca aluña (UPC), la a qui ec u a de
la aplicación ue desa ollada po un alumno del TFM (T abajo Fin de Más e ) en 2016 y ha
seguido a anzando con la ayuda de a ios alumnos que han añadido uncionalidades a
Classpip en sus p oyec os de g aduación.
Classpip iene dos modalidades di e en es de ca a al ipo de usua io: Puede se desde el
pun o de is a del p o eso , donde u iliza á odas las he amien as que le o ece Classpip
desde el Dashboa d en su o denado , o puede u iliza su disposi i o mó il pa a pode ealiza
algunas de las unciones que o ece Classpip desde clase. La segunda modalidad, es desde
el pun o de is a del alumno, que pod á juga a los juegos que ac i e su p o eso desde su
disposi i o mó il.
Mejo as en una app pa a la ges ión de la gami icación (II) | 8
1.2. Es uc u a de la memo ia
La memo ia que se p esen a a con inuación se di ide po capí ulos, y en cada capí ulo se
ha á én asis de un ema en conc e o sob e el abajo ealizado. A con inuación, se explica á
de o ma esumida la es uc u a y el con enido de cada uno de es os capí ulos.
El p ime capí ulo es la in oducción del p oyec o, jus o en el capí ulo en el que es amos aho a,
donde empezamos p esen ando el p oyec o de Classpip y explicando la es uc u a de la
memo ia. Seguimos explicando el equipo de abajo, es deci , cuan os miemb os han o mado
pa e de es e p oyec o, que a eas han ealizado cada uno y como se ha lle ado a cabo la
o ganización del equipo. A con inuación, se explica como he con ibuido en el TFG, es deci ,
que a eas he ealizado independien emen e de mi compañe o de abajo. Y al inal del
capí ulo 1, se explica la mo i ación pe sonal y que azones me lle a on a oma la decisión
de elegi es e p oyec o como mi TFG.
En el capí ulo 2 se ealiza la in oducción a Classpip, explicando que es la gami icación como
concep o, cuál es la a qui ec u a del p oyec o, y qué juegos y uncionalidades iene Classpip
pa a o ece a sus usua ios. Es e capí ulo es impo an e, ya que es la in oducción necesa ia
pa a pode en ende los siguien es capí ulos del p oyec o.
El e ce capí ulo es la explicación de los obje i os y plan de abajo de nues o p oyec o,
donde se explica la me odología que u ilizamos pa a la o ganización del equipo y las
he amien as que nos han se ido pa a cumpli con plazos de en ega de una mane a más
o ganizada.
El cua o capí ulo son las a eas p e ias que se han ealizado an es de empeza con el
p oyec o ‘ eal’, pa a amilia iza nos con el en o no. Se explican las azones po las cuales
que ía hace esa mejo a como a ea p e ia, la implemen ación de la a ea y el esul ado inal.
El quin o capí ulo es el análisis de los juegos a implemen a , donde se analizan de mane a
muy de allada pa a pode en ende el uncionamien o de cada uno de ellos comple amen e.
El análisis se ealiza an o desde el pun o de is a del p o eso , que en es e caso se ía analiza
los juegos desde el Dashboa d. Como desde el pun o de is a del alumno, que se ía analiza
los juegos desde la aplicación del alumno. A pa i de es e análisis, podemos ob ene una lis a
de las uncionalidades de cada uno de los juegos, y así pos e io men e pode elegi que
uncionalidades se mig a ían a la aplicación del p o eso . Es e análisis es muy impo an e, ya
que nos si ió pa a en ende de mane a muy comple a, desde a ios pun os de is a, el
uncionamien o de la aplicación. Y ambién, g acias a es e análisis uimos capaces de e que
uncionalidades e an ú iles pa a la aplicación del p o eso y que uncionalidades no enían
sen ido mig a las. Po lo an o, cada análisis inaliza concluyendo que uncionalidades se an
a implemen a en la aplicación del p o eso .
El sex o capí ulo es la explicación de uno de los juegos que se han mig ado a la aplicación
del p o eso , en es e caso es el juego de compe ición que se explica a pos e io men e. Donde
Mejo as en una app pa a la ges ión de la gami icación (II) | 9
se explica en que consis e el juego, que modalidades iene, las uncionalidades que se han
implemen ado y los e os más des acados.
El sép imo capí ulo es ambién la explicación de uno de los juegos que se han mig ado a la
aplicación del p o eso , en es e caso es el juego de con ol de abajo. Donde se explica en
que consis e el juego, las uncionalidades que se han implemen ado y los e os más
des acados.
El oc a o capí ulo es ambién la explicación de uno de los juegos que se han mig ado a la
aplicación del p o eso , en es e caso es el juego de cues iona io de sa is acción. Donde se
explica en que consis e el juego, las uncionalidades que se han implemen ado y los e os
más des acados.
El no eno capí ulo es el análisis y la explicación de la mejo a del diseño gene al de la
aplicación del p o eso . Donde se analizan algunos de los elemen os que hemos op ado que
necesi aban algún cambio es é ico.
Y el úl imo capí ulo, el décimo, a a de los e os más des acados que han su gido du an e
odo el anscu so del p oyec o. Se explica la p oblemá ica que su gió, las p opues as que se
hicie on y la solución inal que se puso al p oblema.
1.3. Equipo de abajo
Es e p oyec o se ha ealizado po un equipo o mado po dos pe sonas, donde los miemb os
somos Suhail Chaib Akhdim y yo, Sumaya Benali Laa i .
Pa a la o ganización del equipo se ha u ilizado la me odología SCRUM y la he amien a T ello,
pa a cumpli con los iempos es ablecidos de cada una de las a eas. Es os concep os de
o ganización, se explica án de o ma más de allada en el capí ulo 3.
Debido a que a ias a eas las hemos abajado de o ma conjun a, ambas memo ias ienen
apa ados muy pa ecidos, y se di ie en en las a eas que se han hecho de o ma
independien e. Po lo an o, se i á dejando cla o a lo la go de la lec u a las di e encias y
simili udes que hay en ambas memo ias.
1.4. ¿Qué he hecho en es e TFG?
En es e p oyec o hemos ediseñado y mejo ado la aplicación del p o eso , desde la cual
puede ealiza a ias a eas de ges ión del ecosis ema de Classpip. En pa icula , hemos
asladado uncionalidades, que se especi ica án más adelan e, de cinco juegos exis en es
en el Dashboa d, ambién hemos mejo ado la mecánica del en ío de co eos elec ónicos y
hemos ealizado una e isión y a eglos del diseño de la aplicación del p o eso .
Mejo as en una app pa a la ges ión de la gami icación (II) | 16
4. Juego de o ación: El juego de o aciones es un juego en el cual se in oluc a a los
alumnos de una clase en una dinámica, en la cual hay que oma decisiones pa a
elegi cuál es la mejo opción a ene en cuen a de en e la que hay. Los alumnos en
ese caso pueden llega a o a se en e sí o pueden o a opciones es ablecidas po
el p o eso .
Fig.5. Una de las pan allas del juego de o ación desde la aplicación del alumno
5. Juego de e aluación: El juego de e aluación es un juego en el cual se in oluc a a
los alumnos de una clase en un ambien e exigen e en el cual cada uno de los
pa icipan es se á juzgado y pun uado po los demás alumnos. De es a mane a, la
ac i idad lle ada a cabo se hace más es ic a, pe o a la ez más amigable. Se án
e aluaciones c uzadas ealizadas en e los alumnos.
Fig.6. Una de las pan allas del juego de e aluación desde la aplicación del alumno

Mejo as en una app pa a la ges ión de la gami icación (II) | 17
Los juegos mencionados a iba son los juegos que hemos abajado en es e p oyec o y los
que hemos analizado en p o undidad, pe o ambién exis en o os juegos que o ece el
ecosis ema como se obse a en la siguien e imagen.
Fig.7. Todos los juegos que o ece el ecosis ema
2.4 ¿Qué he amien as del ecosis ema hemos u ilizado en nues o p oyec o?
En es e apa ado, se explica án que he amien as que ya enía Classpip exis en es en su
ecosis ema y las que se han u ilizado pa a la implemen ación de nues o p oyec o. En nues o
caso, hemos u ilizado las siguien es:
1. Aplicación mó il del p o eso (Desa ollada en Ionic): Como el obje i o de nues o
p oyec o e a implemen a cinco juegos en la aplicación del p o eso y mejo a el diseño
gene al ambién, e a esencial u iliza es a pa e del ecosis ema. Básicamen e, po que
es la pa e en la que más hemos abajado, añadido y modi icado cosas. Y es donde
se encuen a la mayo ía del abajo ealizado.
2. Dashboa d (Página web, desa ollada en Angula ): La u ilización del Dashboa d ha
sido esencial pa a lle a a cabo el análisis de los juegos desde el pun o de is a del
p o eso y pode decidi que uncionalidades se iban a man ene . Po lo an o, ha sido
un elemen o que se ha usado bas an e en las p ime as ases del p oyec o.
3. Aplicación mó il del alumno (Desa ollada en Ionic): Es e elemen o ambién ha sido
esencial pa a lle a a cabo el análisis de los juegos desde el pun o de is a del alumno.
Analiza las uncionalidades desde es e elemen o, nos hizo en ende mejo el
uncionamien o de los juegos, ya que podíamos expe imen a la expe iencia del
usua io del alumno. Po lo an o, ha sido un elemen o que se ha usado bas an e en
las p ime as ases del p oyec o.
Mejo as en una app pa a la ges ión de la gami icación (II) | 18
4. Base de da os (En o ma o API): En ende el uncionamien o de la API, nos acili ó
en ende como ealmen e se hacían las consul as. Pa a pode c ea las que
necesi á amos en las uncionalidades nue as que hemos añadido en el p oyec o. Ha
sido un elemen o que hemos u ilizado a lo la go de odo el p oyec o, ya que el mó il
del p o eso se conec aba cons an emen e a la API pa a ecibi oda la in o mación
necesa ia a mos a .
5. Se e : El se ido ha sido un elemen o muy impo an e pa a la mejo a de la mecánica
del en ío de co eos elec ónicos de la aplicación del p o eso . La mayo pa e de la
con igu ación y p og amación de es a uncionalidad, se ha abajado en el se ido
u ilizando la he amien a de Nodemaile . Apa e, de se esencial pa a es a
uncionalidad, ambién ha sido un elemen o que se ha u ilizado du an e odo el
p oyec o, ya que el mó il del p o eso se conec aba al se ido en ocasiones.
Mejo as en una app pa a la ges ión de la gami icación (II) | 19
CAPÍTULO 3: OBJETIVOS Y PLAN DE TRABAJO
En es e capí ulo se p esen a án los obje i os que se han asumido desde el inicio del p oyec o
po pa e de sus dos pa icipan es, e minando así de de ini se con exac i ud g acias a la
ayuda de los u o es. Es e capí ulo es igual en ambas memo ias, ya que es la explicación de
los obje i os que eníamos como equipo y la me odología de abajo que hemos u ilizado pa a
di idi nos las a eas en e los miemb os del g upo. Po lo an o, es in o mación que se ha
decidido y se ha esc i o en conjun o.
Los obje i os en cues ión se de inen a con inuación:
Se necesi a á en p ime luga de ini una me odología de abajo a segui a lo la go de odo
el p oyec o. Como obje i o p incipal se quie e implemen a un o al de 5 juegos di e en es en
la aplicación del p o eso . Cómo siguien es pasos a oma , se eque i á de añadi una nue a
uncionalidad que no es é implemen ada en los juegos exis en es y que los juegos que se
ayan a implemen a engan un código op imizado con espec o al código del p opio
Dashboa d. En úl imo luga , no solo se iene como obje i o es ea odos los juegos pa a
da los po uncionales, sino que ambién se equie e que odos los juegos engan una
uni icación en cuan o a diseño.
Es os obje i os, que se han de inido de o ma gené ica, se desglosa an en subca ego ías y
uncionalidades conc e as en siguien es apa ados pa a su pos e io implan ación y/o mejo a.
An es de es ablece un mé odo de abajo necesi amos amilia iza nos con el en o no y el
código, po ello se nos asigna on unas pequeñas a eas a ealiza , con ellas pudimos
conc e a más la es uc u a de la aplicación y del p opio código ya implemen ado. En el
capí ulo siguien e pod emos en mayo de alle qué a eas ue on y cómo se desa olla on. Una
ez ealizada la oma de con ac o, es ablecimos el mé odo de abajo que que íamos segui
pa a es e p oyec o, dada su es uc u a y en e gadu a.
Una de las me odologías de abajo más comunes en equipos de desa ollado es es la
me odología Sc um que es la me odología que hemos escogido pa a es e p oyec o. Y pa a
pode o ganiza las a eas que se asigna an se ha u ilizado la he amien a T ello.
3.1. Me odología Sc um
El mé odo Sc um es un p oceso de abajo en equipo en el que se aplican un buen conjun o
de écnicas pa a maximiza la colabo ación óp ima en e los dis in os miemb os que o man
pa e del equipo. Es e ipo de o mación pa e de g upos de abajo de al o endimien o.
El uncionamien o de Sc um se basa en el cumplimien o pa cial y la en ega egula del
p oduc o inal. Es o la con ie e en una me odología especialmen e adecuada pa a p oyec os
implemen ados en en o nos complejos. De es a mane a, pe mi e alcanza esul ados en un
co o pe íodo de iempo en el que p iman la inno ación, la compe i i idad, la lexibilidad y la
p oduc i idad.
Mejo as en una app pa a la ges ión de la gami icación (II) | 20
Los p oyec os Sc um se implemen an en ciclos co os y ijos. En nues o caso, el iempo
es ablecido ue de 2 semanas, aunque los iempos de ciclo se ajus a on según los equisi os
del p oyec o. Al inal de cada i e ación o sp in , debe habe un esul ado comple o que
con ibuya al aumen o del p oduc o inal, de modo que se pueda p esen a un desa ollo sólido
del p oyec o en cada eunión con el u o .
Es e p oceso implica hace una lis a de obje i os que se i án como hoja de u a, y cada
obje i o debe di idi se en a ias a eas si es necesa io. Pa a cada a ea, se asigna la p io idad
co espondien e. Basándonos en es o, se elabo a un c onog ama con los esul ados que se
log a án en cada sp in .
Al habla de Sc um, debemos ene en cuen a una igu a imp escindible en p oyec os donde
se aplica es a me odología: el Sc um Mas e . El “Sc um Mas e ” es un miemb o del equipo
que se enca ga de que la me odología Sc um se aplique de o ma co ec a a lo la go de cada
sp in , de que los dis in os miemb os del equipo engan a eas asignadas y esol e los
posibles con lic os que se puedan encon a los miemb os del equipo. Eje cen la unción de
líde del equipo y son la pe sona de con ac o di ec o en e equipo de abajo y clien e.
Cuando se a a de Sc um, es necesa io ene una igu a que se in oluc e ac i amen e en la
o ganización de las a eas, esa igu a es la denominada “Sc um Mas e ”.
Es a igu a es esponsable de que se aplique co ec amen e cada sp in , de asigna nue as
a eas a los di e en es miemb os del equipo y de esol e los con lic os que puedan su gi
en e ellos. Pa a es e p oyec o el Sc um Mas e elegido, ha sido Sumaya Benali Laa i .
A con inuación, en las siguien es páginas se mues a en de alle cómo ue la di isión de los
sp in s, las a eas que se asigna on a cada sp in con la desc ipción co espondien e, y quien
ealizó dichas a eas con las co espondien es ho as dedicadas de cada miemb o del g upo.
Mejo as en una app pa a la ges ión de la gami icación (II) | 21
Sp in
Fecha
Ta eas
Desc ipciones
Ho as ealizadas
Suhail
Sumaya
1
17/02 - 24/02
Ins ala en o no de abajo
Desca ga las 5 aplicaciones del eposi o io p incipal de Gi Hub
3
3
Ins ala dependencias
Ab i las aplicaciones
C ea eposi o ios p opios en Gi Hub
Enlaza ambos eposi o ios
Tes ea el en o no
C ea juegos desde ce o median e el dashboa d
3
3
P oba juegos desde el mó il del alumno
2
2
P oba aplicación del p o eso
1
1
C eación de una lis a con i ems a mejo a del es ealizado
2
2
2
24/02 - 03/03
Pasos p e ios
A egla o mula io del Regis e en el mó il del p o eso
N/A
8
A egla aps y sideba en el mó il del p o eso
7
N/A
3
03/03 - 17/03
Análisis de los juegos en de alle
Análisis de la c eación de los juegos en el Dashboa d
6
6
Análisis de las uncionalidades implemen adas en el Dashboa d
Análisis de las uncionalidades implemen adas en el mó il del alumno
Toma de decisión: Funciones a añadi en el mó il del p o eso
1
1

Mejo as en una app pa a la ges ión de la gami icación (II) | 22
Sp in
Fecha
Ta eas
Desc ipciones
Ho as ealizadas
Suhail
Sumaya
4
17/03 - 31/03
Diseño de los juegos
Toma de decisión: Elemen os que se deben inclui
6
6
C eación de un Bo ado
3
3
5
31/03 - 21/04
Juego de Compe ición
Implemen a página p incipal
5
5
Funcionalidad: Ve Jo nadas y Resul ados gene ales
18
N/A
Funcionalidad: Desac i a el juego
N/A
6
Funcionalidad: Edi a Jo nadas
N/A
12
Funcionalidad: Edi a pun os
N/A
12
Funcionalidad: Asigna ganado es
30
N/A
6
21/04 - 12/05
Juego de E aluación
Funcionalidad: Visualiza Rub ica
20
N/A
Funcionalidad: Edi a e aluaciones
12
N/A
Funcionalidad: Bo a e aluaciones
12
N/A
Juego Con ol de abajo
Funcionalidad: Visualiza Tabla p incipal
N/A
18
Funcionalidad: En ió de email
N/A
40
P oblemá ica Node
Compa ibilidad e siones, a eglo con NVM
N/A
35
Mejo as en una app pa a la ges ión de la gami icación (II) | 23
Sp in
Fecha
Ta eas
Desc ipciones
Ho as ealizadas
Suhail
Sumaya
7
12/05 - 02/06
Juego de Vo aciones
Funcionalidad: Visualiza Tabla p incipal
18
N/A
Juego Cues iona io de sa is acción
Funcionalidad: Visualiza Tabla p incipal
N/A
12
8
02/06 - 23/06
Diseño gené ico
Aplica diseño a ni el de código
6
6
Uni ica diseño pa a odos los elemen os
6
6
9
23/06 - 07/06
Redacción de la memo ia
Redacción de los juegos y o os apa ados
20
20
P epa ación p esen ación
Diseño y edacción de las anspa encias
6
6
Mejo as en una app pa a la ges ión de la gami icación (II) | 24
3.2. He amien a T ello
Pa a o ganiza odas las a eas en un solo luga y que sean accesibles pa a odos los
miemb os del equipo, las he amien as que se u ilizan p opo cionan paneles donde se ubican
odas las a eas y sub a eas.
T ello es una aplicación diseñada pa a o ganiza a eas en g upos de abajo. Es a
he amien a nos p opo ciona una abla en la que podemos añadi lis as y e ique as,
pe mi iéndonos o ganiza las a eas de nues o p oyec o de o ma ácil, ápida y cómoda. Los
di e en es elemen os que o man pa e de T ello son:
Lis a de a eas: Son odas aquellas ac i idades o eje cicios que se acue dan con el equipo,
que se comple a án pa a un sp in de e minado.
En p oceso: Son aquellas a eas que ya han sido asignadas a uno o a ios miemb os del
g upo y ya es án siendo desa olladas y desplegadas.
Hecho: Son aquellas a eas que ya han sido inalizadas y es eadas y po ello se dan po
acabadas.
En nues o caso pa icula , no hemos que ido solamen e in oduci los es elemen os básicos,
sino que ambién una ez inalizadas odas las a eas de un mismo sp in , c eábamos una
ca ego ía nue a con el núme o del sp in y pasábamos ahí las a eas que o maban pa e de
ella. De es a mane a, e a más ácil a simple is a de ec a el p og eso del p oyec o en cada
momen o.
A con inuación, podemos e una imagen, del T ello en acción. Se pueden e has a dos
sp in s inalizados y el e ce sp in di idido en e a eas a ealiza , a eas en cu so y a eas
hechas. También se puede e a quien o quienes ha sido asignada cada a ea, po ello
conside amos que e a una de las mejo es he amien as de o ganización que podíamos
u iliza .
Fig.8. Cap u a de la he amien a T ello donde se mues a la o ganización de las a eas
Mejo as en una app pa a la ges ión de la gami icación (II) | 25
CAPÍTULO 4: TAREAS PREVIAS
En es e capí ulo se an a explica las a eas p e ias que se hicie on an es de empeza a
abaja en el p oyec o eal. Es as a eas se lle a on a cabo, con el obje i o de amilia iza nos
con el en o no en la p ime a ase del p oyec o.
Es e capí ulo es di e en e en compa a i a a la memo ia de mi compañe o de abajo, pues o
que ha sido algo que hemos hecho de o ma independien e. Cada uno iene las a eas p e ias
que ha ealizado explicadas en su memo ia.
4.1 Pagina de egis o
La página de egis o del p o eso ue una de las a eas inalmen e elegidas como a ea p e ia,
pa a p ac ica y conoce el en o no en el que íbamos a abaja pos e io men e.
La siguien e imagen se puede obse a el es ado en el que es aba la página de egis o an es
de cualquie ipo de a eglo o mejo a. Como se puede obse a hay bas an es cosas que se
pod ían mejo a :
1. La posición del o mula io: Cuando la página se ende izaba en o ma o mó il, el
o mula io no es aba del odo bien cen ado. Como se puede obse a en la imagen
de abajo, el o mula io es á demasiado hacia abajo e incluso el bo ón de ‘Vol e al
login’ se co a po la mala posición. Es e ue uno de los pun os a a egla , el obje i o
e a cen a el o mula io y coloca los bo ones de mane a co ec a.
2. El nomb e de cada campo: Como se mues a en la imagen, cada campo iene un
nomb e pa a indica al usua io el ipo de in o mación que se espe a, po ejemplo, el
campo ‘nomb e’, ‘p ime apellido’ o ‘email’.
3. Validaciones: El o mula io no enía mensajes que a isa an al usua io sob e si un
campo es obliga o io o si algún campo no es á en el o ma o co ec o. Incluso si
ealmen e algún campo no es aba bien, al clica sob e el bo ón de egis o daba la
sensación de que no uncionaba, pues o que no hacía nada. Y ambién en ocasiones,
si el o ma o en el que se ellenaba el campo no e a co ec o, se egis aba
co ec amen e con esos campos e óneos. Es o puede se un poco con uso espec o
a la expe iencia del usua io, Po eso e a necesa io implemen a las alidaciones y
ejecu a las al clica el bo ón de ‘Regis a ’.
4. Iconos: Den o de cada inpu se puede obse a un icono a la de echa. A p ime a is a
no ienen mucho sen ido, ampoco son necesa io y no cumplen ninguna unción. Po
eso ue algo que se decidió qui a y man ene un es ilo más elegan e.
Mejo as en una app pa a la ges ión de la gami icación (II) | 32
5.2.2.3. Conclusión
Las uncionalidades que se añadi án al mó il del p o eso son las siguien es:
● Ve la in o mación de cada jo nada en de alle
● Edi a jo nadas (Seleccionando la echa y el c i e io ganado ) y edi a pun uación
(Edi a los pun os de cada posición si se desea).
● Asigna los ganado es (de o ma manual, alea o ia o a pa i de los esul ados de un
juego) de cada jo nada.
● Desac i a el juego, es deci , que el juego pase de ac i o a inac i o.
Apa e de es as uncionalidades que ya exis ían en el Dashboa d del p o eso , añadimos
algunas uncionalidades más:
● Ve p og eso (Visión global de la e olución de la compe ición, según se ayan
p oduciendo las jo nadas)
● C eación de una página de inicio (Visión global de odas las he amien as o
uncionalidades que enga es e modo)
5.2.3. To neo
El ipo de juego To neo es una compe ición con una se ie de juegos en los que compi en
en e sí a ias pe sonas o equipos que se eliminan unos a o os p og esi amen e.
5.2.3.1. Pun o de is a del p o eso
Al elegi la compe ición de ipo To neo, se debe elegi el modelo: Clásico, Doble eliminación
o suizo. Y a con inuación, se deben elegi las pa ejas que compe i án en e sí en la p ime a
jo nada. En es e caso el único uncional en es e momen o es el clásico, que es el que amos
a analiza a con inuación.
Una ez c eado el juego de compe ición “To neo”, el p o eso desde el Dashboa d, desde
juegos ac i os, puede selecciona lo que ha c eado p e iamen e. Una ez seleccionado el
juego de compe ición deseado, el p o eso iene la posibilidad de e los alumnos que
pa icipan en el juego, la posición en la que se encuen an ac ualmen e en el cuad o de o neo.
Las uncionalidades que el p o eso puede hace son:
● Ve la in o mación de cada jo nada en de alle.
● Edi a jo nadas (Seleccionando la echa y el c i e io ganado ).
● Asigna los ganado es (de o ma manual, alea o ia o a pa i de los esul ados de un
juego) de cada jo nada. El núme o de jo nadas exis en es end á delimi ado po el
núme o de pa icipan es.
● Desac i a el juego, es deci , que el juego pase de ac i o a inac i o.

Mejo as en una app pa a la ges ión de la gami icación (II) | 33
5.2.3.2. Pun o de is a del alumno
El alumno desde la aplicación solo iene la posibilidad de e los esul ados del o neo. El
esumen de los con incan es y del ganado de cada ase (En modo cuad o de o neo).
5.2.3.3. Conclusión
Las uncionalidades que se añadi án al mó il del p o eso son las siguien es:
● Ve la in o mación de cada jo nada en de alle.
● Edi a jo nadas (Seleccionando la echa y el c i e io ganado ).
● Asigna los ganado es (de o ma manual, alea o ia o a pa i de los esul ados de un
juego) de cada jo nada. El núme o de jo nadas exis en es end á delimi ado po el
núme o de pa icipan es.
● Desac i a el juego, es deci , que el juego pase de ac i o a inac i o.
Apa e de es as uncionalidades que ya exis ían en el Dashboa d del p o eso , añadimos
algunas uncionalidades más:
● Ve p og eso (Visión global de la e olución de la compe ición, según se ayan
p oduciendo las jo nadas)
● C eación de una página de inicio (Visión global de odas las he amien as o
uncionalidades que enga es e modo)
5.3. E aluación
Pa a c ea el juego de e aluación, nos di igimos al g upo al que lo que emos c ea , indicamos
que que emos c ea un juego e indicamos que que emos que sea de ipo ‘E aluación’. Se
ab i á una pes aña donde se iene que asigna un nomb e pa a el juego y se segui án una
se ie de pasos que se explican a con inuación.
5.3.1. C ea Juego
El p ime paso, es elegi el modo en e indi idual y el modo equipos (donde se pod á elegi si
la e aluación de alumnos se á indi idual o po equipos). A con inuación, se in oduce la
desc ipción del juego y se elige en es dos o ma os de e aluación: Rúb ica o p egun as
abie as.
5.3.2. Rúb ica
Las úb icas son una he amien a que ayuda a e alua el ap endizaje del alumnado, haciendo
que los p opios es udian es ambién conozcan sus e o es median e la au oe aluación. Es un
documen o que desc ibe dis in os ni eles de calidad de un p oyec o, dando un eedback
in o ma i o al alumnado sob e el desa ollo de su abajo.
Mejo as en una app pa a la ges ión de la gami icación (II) | 34
En el siguien e apa ado de la c eación del juego basado en úb ica, se debe selecciona la
úb ica que se quie e u iliza . Exis e la posibilidad de e alua p esen aciones o ales, donde
se end á que ajus a el peso de cada c i e io (po cen aje). Y ambién exis e la posibilidad de
e alua e os donde se end á que ajus a el peso de cada c i e io (po cen aje).
A con inuación, se debe selecciona la o ma de e aluación: 1 a N o Todos con odos.
● 1 a N: Cuando le oca p esen a a una pe sona, un núme o de e minado de pe sonas
son las que e alúan la p esen ación. Po lo an o, se debe á de e mina el pa áme o
N y pod á se de o ma alea o ia o manual.
● Todos con odos: Cuando le oca p esen a a una pe sona, odos los miemb os del
equipo e alúan esa p esen ación.
Una ez elegida la o ma de e alua se p ocede a elegi si el p o eso oma á pa e de la
e aluación. En el caso de que sea que sí, se debe indica si la e aluación del p o eso se
conside a á iguali a ia en cuan o al es o de e aluado es o si con a á un 50% sob e la
e aluación inal.
A con inuación, se debe elegi el c i e io de pun uación, que se á median e pesos o median e
penalización. Y se debe elegi el po cen aje de los sub c i e ios de los c i e ios elegidos
p e iamen e.
En el siguien e apa ado, se debe elegi la isualización de los esul ados de ca a a la pe sona
e aluada. Donde la pe sona e aluada solo pod á e el esul ado global o pod á e el
esul ado global y cada una de las e aluaciones ecibidas.
5.3.3. P egun as abie as
Una ez seleccionada la opción de p egun as abie as, se debe án añadi las p egun as que
se conside en necesa ias pa a la e aluación.
Los siguien es apa ados de la c eación de es a opción de e aluación son exac amen e igual
a la de la úb ica. A pa i del apa ado de o ma de e aluación.
5.3.4. Pun o de is a del p o eso
Funcionalidades a con inuación:
● Desac i a el juego
● Añadi e aluación del p o eso en el caso de que pa icipe.
● Visualiza la e aluación de los pa icipan es.
● Visualiza las coincidencias de e aluación en e e aluado es (Únicamen e en la
úb ica).
Mejo as en una app pa a la ges ión de la gami icación (II) | 35
5.3.5. Pun o de is a del alumno
Se isualiza un esumen de las ca ac e ís icas del juego de e aluación (Modo y o ma o). Al
alumno le sald án los di e en es compañe os que le oca e alua y los pod án e alua según
los c i e ios.
Si e es el alumno e aluado, apa ece á una no a p o isional y los de alles co espondien es.
5.3.6. Conclusión
Las uncionalidades que se añadi án al mó il del p o eso son las siguien es:
● Desac i a el juego
● Añadi e aluación del p o eso en el caso de que pa icipe.
● Visualiza la e aluación de los pa icipan es.
● Visualiza a los alumnos que ienen que e alua .
● Elimina la e aluación de un alumno.
Apa e de es as uncionalidades que ya exis ían en el Dashboa d del p o eso , hemos
decidido no añadi nada más po que lo que había ya nos pa ecía su icien e e in e esan e.
5.4. Con ol de abajo en g upo
Pa a c ea el juego de con ol de abajo, nos di igimos al g upo al que lo que emos c ea ,
indicamos que que emos c ea un juego e indicamos que que emos que sea de ipo ‘Con ol
de abajo’. Se ab i á una pes aña donde se iene que asigna un nomb e pa a el juego y se
segui án una se ie de pasos que se explican a con inuación.
5.4.1 C ea Juego
El p ime paso, es in oduci el núme o de con oles que hab á y selecciona qué in o mación
pod á isualiza el alumno (Cada alumno e á solo los pun os que él ha asignado y sus
comen a ios, o los alumnos e án los pun os y comen a ios de odos sus compañe os de
equipo).
5.4.2. Pun o de is a del p o eso
Funcionalidades a con inuación:
• Desac i a el juego
• Visualización de los equipos y es ado de cada uno de los con oles del equipo.
• Con ol del p og eso de los con oles, con in o mación de cada una de las alo aciones
de los alumnos en de alle.
Mejo as en una app pa a la ges ión de la gami icación (II) | 36
5.4.3. Pun o de is a del alumno
El alumno pod á e los miemb os del equipo (incluido el mismo) y debe á epa i 10 pun os
en e los miemb os del equipo, donde ambién pod á esc ibi obse aciones.
Una ez asignados los pun os, se isualiza á un esumen de la epa ición y un mensaje de
si al a alguien po esponde .
5.4.4. Conclusión
Las uncionalidades que se añadi án al mó il del p o eso son las siguien es:
● Desac i a el juego
● Visualización de los equipos y es ado de cada uno de los con oles del equipo.
● Con ol del p og eso de los con oles, con in o mación de cada una de las alo aciones
de los alumnos en de alle.
Apa e de es as uncionalidades que ya exis ían en el Dashboa d del p o eso , añadimos
algunas uncionalidades más:
● Mos a la opción de en ío de no i icación a los alumnos que no han e aluado el
con ol aún (en ío manual).
5.5. Juego de o aciones
Pa a c ea el juego de o aciones, nos di igimos al g upo al que lo que emos c ea , indicamos
que que emos c ea un juego e indicamos que que emos que sea de ipo ‘Vo ación’. Se ab i á
una pes aña donde se iene que asigna un nomb e pa a el juego y se segui án una se ie de
pasos que se explican a con inuación.
5.5.1. C ea Juego
Se c ea un juego de o aciones, eligiendo el ipo en e indi idual o po equipos, seguidamen e
se elige uno de los es modos (Uno a Todos, Todos a Uno y Vo a Opciones). Como son
modos dis in os, se analiza án de o ma independien e en los siguien es apa ados.
5.5.2. Uno a odos
En es a modalidad cada pa icipan e epa e pun os a odos los demás. Cuando se c ea se
puede elegi que los pa icipan es pueden o a se a sí mismos o no. Y se es ablece si el
epa o se á ijo según la posición que ocupa el pa icipan e o si el epa o se á lib e. En el
caso de epa o ijo, se debe es ablece qué posiciones si pun ua an y con cuan os pun os lo
ha án. Y en el caso de epa o lib e se debe es ablece cuándo pun os máximos se dan pa a
epa i .
Mejo as en una app pa a la ges ión de la gami icación (II) | 37
5.5.2.1. Pun o de is a del p o eso
Se puede isualiza en o ma o de abla la posición a ni el global que ocupa cada alumno. Se
e el nomb e y los apellidos del alumno y los pun os que lle a ecaudados. Cuan o mayo
pun uación posee el alumno en mayo posición es a á en el anking.
5.5.2.2. Pun o de is a del alumno
Se puede isualiza en o ma o de lis a los alumnos in oluc ados en el juego. El alumno puede
asigna los pun os a cada uno de ellos y en ia sus esul ados.
5.5.2.3 Conclusión
Las uncionalidades que se añadi án al mó il del p o eso son las siguien es:
● Visualiza en o ma o de abla la posición a ni el global que ocupa cada alumno.
Apa e de es as uncionalidades que ya exis ían en el Dashboa d del p o eso , hemos
decidido no añadi nada más po que lo que había ya nos pa ecía su icien e e in e esan e.
5.5.3. Todos a uno
En es a modalidad cada pa icipan e alo a a cada uno de los demás. Cuando se c ea el
juego se deben de ini en qué concep os se a a basa esa e aluación y que po cen aje de la
no a ep esen a cada uno de ellos. Se pueden pone an os concep os como se quie a y
asigna así sus po cen ajes sin supe a el 100%.
5.5.3.1. Pun o de is a del p o eso
Se puede isualiza en o ma o de abla la posición a ni el global que ocupa cada alumno. Se
e el nomb e y los apellidos del alumno y la no a media global que lle a has a ese momen o.
También se puede e pa a cada alumno el núme o de o os que ha ecibido po pa e de
o os alumnos. Cuan o mayo sea la no a media, mayo posición es a á en el anking.
5.5.3.2. Pun o de is a del alumno
Se puede isualiza en o ma o de lis a los alumnos in oluc ados en el juego. El alumno puede
asigna los pun os a cada uno de ellos en base los c i e ios que han sido es ablecidos
p e iamen e po el p o eso ado. Cada uno de los c i e ios puede se e aluado con una no a
del 1 al 10. Al inaliza se pueden en ia el esul ado.
5.5.3.3 Conclusión
Las uncionalidades que se añadi án al mó il del p o eso son las siguien es:
● Visualiza en o ma o de abla la posición a ni el global que ocupa cada alumno.
Apa e de es as uncionalidades que ya exis ían en el Dashboa d del p o eso , hemos
decidido no añadi nada más po que lo que había ya nos pa ecía su icien e e in e esan e.

Mejo as en una app pa a la ges ión de la gami icación (II) | 38
5.5.4. A opciones
En es a modalidad cada pa icipan e o a po sus opciones p e e idas. Cuando se c ea el
juego se deben de ini una lis a de opciones sob e las cuales los alumnos elegi án la que más
les gus e. Y se es ablece si el epa o de pun os hacia las opciones se á ijo, según la posición
que ocupa la opción en la lis a o si el epa o se á lib e. En el caso de epa o ijo, se debe
es ablece qué posiciones si pun ua an y con cuan os pun os lo ha án. Y en el caso de epa o
lib e se debe es ablece cuándo pun os máximos se dan pa a epa i .
5.5.4.1. Pun o de is a del p o eso
Se puede isualiza en o ma o de abla las opciones que se han con igu ado po pa e del
p o eso y los pun os que lle a sumadas esa opción. También a ni el in o ma i o e mues a
el núme o de alumnos que pa icipan en es a o ación y el núme o de alumnos que ya han
o ado.
5.5.4.2. Pun o de is a del alumno
Se pueden isualiza en o ma o de lis a las opciones que hay en juego. Y el alumno puede
asigna su opción a o i a po o den y en ia sus esul ados. El alumno pod á e los
miemb os del equipo (incluido el mismo) y debe á epa i 10 pun os en e los miemb os del
equipo, donde ambién pod á esc ibi obse aciones.
Una ez asignados los pun os, se isualiza á un esumen de la epa ición y un mensaje de
si al a alguien po esponde .
5.5.4.3 Conclusión
Las uncionalidades que se añadi án al mó il del p o eso son las siguien es:
● Visualiza en o ma o de abla las opciones que se han con igu ado po pa e del
p o eso y los pun os que lle a sumadas esa opción.
● Mos a el núme o de alumnos que pa icipan y el núme o de alumnos que ya han
o ado.
Apa e de es as uncionalidades que ya exis ían en el Dashboa d del p o eso , hemos
decidido no añadi nada más po que lo que había ya nos pa ecía su icien e e in e esan e.
5.6. Cues iona io de sa is acción
Pa a c ea el juego de cues iona io de sa is acción, nos di igimos al g upo al que lo que emos
c ea , indicamos que que emos c ea un juego e indicamos que que emos que sea de ipo
‘Cues iona io de sa is acción’. Se ab i á una pes aña donde se iene que asigna un nomb e
pa a el juego y se segui án una se ie de pasos que se explican a con inuación.
Mejo as en una app pa a la ges ión de la gami icación (II) | 39
5.6.1. C ea Juego
Pa a la c eación del juego, p ime o seleccionamos el g upo al que que emos asigna la
c eación. A con inuación, le damos a la opción ‘Juegos’ y ‘C ea juego’, donde en ese
momen o nos edi igi á a la página pa a asigna el nomb e del juego y el ipo. En es e caso
amos a elegi ‘Juego de cues iona io de sa is acción’, donde exis en dos modos: indi idual
y de equipos. Pe o en es e caso el juego en modo equipos no exis e aún, po lo an o, solo
amos a analiza el juego en modo indi idual.
El siguien e paso es selecciona el ipo de cues iona io de sa is acción. En es e caso exis en
dos, el denominado como ‘Incidencias c í icas’ y el de ‘Final de cu so’. Una ez seleccionado
el ipo de cues iona io deseado, e dan la opción de modi ica la desc ipción si es necesa io.
5.6.2. Pun o de is a del p o eso
Funcionalidades a con inuación:
● Desac i a el juego
● Visualización del núme o de pa icipan es, el núme o de espues as y una abla con la
a i mación y la media de los esul ados.
● Visualización de las espues as a las p egun as abie as.
5.6.3. Pun o de is a del alumno
Se isualiza án las a i maciones pa a esponde alo ando del 1 al 5, y las p egun as abie as
del p o eso a esponde como quie a el alumno. Una ez espondida la encues a, se
isualiza á un esumen de las espues as.
5.6.4. Conclusión
Las uncionalidades que se añadi án al mó il del p o eso son las siguien es:
● Desac i a el juego
● Visualización del núme o de pa icipan es, el núme o de espues as y una abla con la
a i mación y la media de los esul ados.
● Visualización de las espues as a las p egun as abie as.
Apa e de es as uncionalidades que ya exis ían en el Dashboa d del p o eso , hemos
decidido no añadi nada más po que lo que había ya nos pa ecía su icien e e in e esan e.
Mejo as en una app pa a la ges ión de la gami icación (II) | 40
CAPÍTULO 6. JUEGO DE COMPETICIÓN
En es e capí ulo pod emos e con más de alle en qué consis e el juego de compe ición, en
que di e en es modalidades se di iden y qué uncionalidades nos puede apo a . Además,
pod emos e como se ha c eado es e aplica i o desde ce o has a su es ado inal, pasando
así po muchos de alles in e esan es.
Se de alla án ambién algunas di icul ades y decisiones omadas en el p oceso, según las
di e en es si uaciones en las que nos hemos encon ado. Es e capí ulo es a á di idido en
once pa es, explicando así el p opio juego y sus di e en es uncionalidades. En ambas
memo ias de T abajo de Fin de G ado de los dos miemb os de es e equipo, igu an a ios
pun os en común y o as uncionalidades dis in as.
6.1. ¿En qué consis e el juego de compe ición?
El juego de compe ición es un juego en el cual se in oluc a a los alumnos de una clase en
una dinámica compe i i a en la cual hay un único encedo . De es a mane a, la ac i idad
lle ada a cabo se hace más amena y los alumnos sien en que ienen la esponsabilidad de
pa icipa ac i amen e, si quie en ealmen e queda en una buena posición en en e de sus
o os compañe os. Eso hace que el alumno es é más a en o a los concep os impa idos en
clase, con al de pode usa los en la compe ición que se p oponga y pode así ob ene ese
p emio.
En es e p oyec o se ha desa ollado es e juego de compe ición en sus di e en es
modalidades, pe o en es a ocasión nos cen a emos en la aplicación del p o eso y así
pod emos e lo desde su pun o de is a. El desa ollo de la aplicación se basa en que el juego
p incipal ya ha sido c eado median e el Dashboa d p incipal y que con el mó il se necesi a
ealmen e un me o moni o eo o con igu aciones especí icas que se equie an en el p oceso
del juego.
Al p o eso se le pe mi i á isualiza las di e en es compe iciones que hay en p og eso y las
pun uaciones o posiciones que ocupan los alumnos que pa icipan en ellas. El p og eso de
es as compe iciones se pod á isualiza median e diag amas o ablas según la compe ición.
También se le pe mi i á ealiza cie as modi icaciones median e algunas uncionalidades,
apa e de habe con igu ado el mismo los pa áme os p incipales a a és del Dashboa d a la
ho a de c ea el p opio juego.
6.2. Modalidades del juego de compe ición
Pa a el juego de compe ición exis en un o al de es modalidades di e en es, cada una de
ellas iene su p opia dinámica. Hay cie as uncionalidades que compa en odas las
modalidades, ya que son básicas y esenciales pa a el co ec o uncionamien o de la misma.
Aunque alguna modalidad equie e de alguna más po su p opia es uc u a de juego.
En p ime luga , enemos la compe ición en modalidad “Fó mula Uno”, consis e en que cada
jo nada lle ada a cabo del juego, únicamen e pun úan unos pocos alumnos y con can idades
Mejo as en una app pa a la ges ión de la gami icación (II) | 41
a iables según la posición que lleguen a ocupa , la pe sona que sume más pun os al inaliza
odas las jo nadas, es la decla ada como ganado a.
En segundo luga , enemos la compe ición en modalidad “To neo”, consis e en que cada
jo nada lle ada a cabo del juego a disminuyendo el núme o de alumnos que pa icipan, ya
que son descali icados, has a queda un solo alumno en la úl ima jo nada, es e es el decla ado
como ganado .
En e ce luga , enemos la compe ición en modalidad “Liga”, consis e en que cada jo nada
lle ada a cabo del juego, se gene en de o ma alea o ia encuen os uno con a uno, de en e
los alumnos que pa icipen. El encuen o se puede esol e habiendo un encedo o un
empa e. Se puede de e mina un único encedo basándonos en el alumno que más
encuen os haya ganado al inaliza odas las jo nadas.
Más adelan e, en los siguien es apa ados se pod án e las di e en es uncionalidades
exis en es y cómo pueden lle a a cabo el moni o eo en iempo eal de es e ipo de
modalidades en el con ex o de juegos de compe ición. Cada una de las uncionalidades se á
explicada en de alle, desde cómo se pensó, diseñó a como se mon ó y desa ollo, incluyendo
así los e os y p oblemá icas que su gie on en el p oceso.
6.3 Tipología del juego de compe ición
Pa a el juego de compe ición igual que pa a o os juegos, exis en un o al de dos ipologías
di e en es, cada una de ellas iene su p opia dinámica.
En p ime luga , enemos la compe ición de ipo “Indi idual”, consis e en que cada alumno
pa icipa de o ma soli a ia.
En segundo luga , enemos la compe ición de ipo “G upo”, consis e en que un núme o
de e minado de alumnos o man pa e de un mismo equipo y po ello compi en como equipo.
6.4. Página de Inicio
6.4.1 ¿En qué consis e la uncionalidad?
El juego de compe ición, como ya se ha nomb ado en an e io es apa ados, es un juego en
el cual independien emen e de la modalidad que se juegue, hay un núme o de e minado de
uncionalidades que se compa en.
Po ello, pa a la aplicación del p o eso necesi amos de una uncionalidad que es é en las es
modalidades del juego y que sea pa a e odas las uncionalidades disponibles que hay
según la modalidad del juego.
Pa a ello se ha diseñado una página de inicio que eúne odas las uncionalidades según el
caso. De es a mane a, se puede ene una isión global de odas las he amien as que se
ienen pa a ese juego de compe ición en conc e o.
Mejo as en una app pa a la ges ión de la gami icación (II) | 48
También se incluye en la pa e in e io un bo ón pa a pode ol e hacia a ás, es deci , a la
lis a de juegos ac i os.
Pa a el caso conc e o de la modalidad de Fó mula uno, es a uncionalidad, al y como ha sido
desc i a an e io men e, a den o de un deslizable y en la segunda pa e del deslizable se
puede e una segunda uncionalidad que se explica á más adelan e en o o apa ado.
Una ez analizado el diseño es ipulado en el Dashboa d decidimos ealiza un diseño simila ,
pe o con algunos cambios, ya que a p io i nos pa ece en endible e in ui i o, pe o algunos
elemen os c eemos que debe ían se eliminados y eubicados.
En p ime luga , se man end án los dos o mula ios con sus espec i os í ulos y el
desplegable de calenda io que o o ga el icono, pues o que nos pa ece esencial pa a la
uncionalidad en cues ión. El bo ón in e io que nos pe mi e ol e a ás se á eliminado, ya
que esa uncionalidad ya la enemos es ablecida po de ec o en odas las páginas de la
aplicación del p o eso , po ello se conside a i ele an e.
También se man end á las ablas de las jo nadas con odos sus elemen os mencionado
an e io men e po que a aco de con la uncionalidad a implemen a . En es a ocasión se á
modi icada la posición de los elemen os pa a que se pueda adap a a la pan alla de un
elé ono mó il. Po ello los elemen os no es án de o ma adyacen e uno con el o o, sino de
o ma e ical, uno debajo del o o. C eando así una dinámica po pasos en endible y di igida
pa a el p o eso . De al mane a que el bo ón inal de gua dado quede en la pa e in e io , es
deci , al inaliza la edición y no en la supe io .
Pa a el caso conc e o de la modalidad de Fó mula uno, se elimina á el deslizable y solo deja á
los elemen os mencionados an e io men e como en cualquie o a modalidad de juego y la
uncionalidad adicional se explica á en apa ados siguien es.
6.6.3 Implemen ación del juego
Pa a la implemen ación del juego hemos enido que c ea una página en exclusi a pa a
isualiza las jo nadas exis en es, la página se ha denominado “edi a -jo nadas”. Pa a
es ablece odo lo mencionado an e io men e hemos enido que modi ica lo odo, an o en el
a chi o h ml como en el a chi o s, como en el module. s.
En el código del a chi o s. se ha añadido en la sección OnIni la pe ición de los da os de las
jo nadas elacionadas con ese juego, en conc e o de la o ma siguien e:
his.sesion.DameDa osJo nadas();
Llamando así a una uncionalidad que se encuen a en el Se ice nomb ado “sesión”. Es a
uncionalidad ealiza una pe ición di ec amen e a la API. Y ambién se in oduce es a
in o mación la abla que se mos a á en pan alla, la in oducción de los dos iene la siguien e
o ma:
his.da aSou ce = new Ma TableDa aSou ce ( his.Jo nadasCompe icion);

Mejo as en una app pa a la ges ión de la gami icación (II) | 49
Como úl imo elemen o en es a sección podemos e cómo se inicializa el o mula io, es e
elemen o iene la siguien e o ma:
his.myFo m = his._ o mBuilde .g oup({})
También como elemen o adicional en el s. ue a del OnIni se ha añadido la p opia
uncionalidad de edi a jo nada, que se mues a a con inuación:
Edi a Jo nada() {}
Es a uncionalidad ecoge los da os in oducidos en los dos o mula ios y los gua da median e
una pe ición a la API, es a ges ión se ealiza de la siguien e mane a:
Nue oC i e io = his.myFo m. alue.C i e ioGanado ;
Nue aFecha = his.myFo m. alue.picke ;
his.pe icionesAPI.Modi ica Jo nada ( his.jo nadas[i], his.IDJo nada)
.subsc ibe(Jo nadaC eada => {}
En el código h ml se ha añadido un o mula io donde con end á dos en adas de da os
posibles. Pa a ello, se ha u ilizado la siguien e he amien a:
< o m [ o mG oup]="myFo m" class = "enFila" s yle="wid h: 80%">
Los da os a in oduci se ecogen con la siguien e he amien a den o del o mula io:
<inpu ma Inpu [ma Da epicke ]="picke "
(da eChange)="onChangeE en ($e en )" placeholde ="Seleccione una
Fecha">
Y pa a ges iona el desplegable del calenda io se ha u ilizado la siguien e he amien a:
<ma -da epicke - oggle ma Su ix[ o ]="picke "></ma -da epicke - oggle>
<ma -da epicke #picke ></ma -da epicke >
Se incluye ambién la abla de las jo nadas con la siguien e he amien a:
< able s yle="wid h: 100%" ma - able [da aSou ce]="da aSou ce">
Cada una de los da os que i a en las columnas se in oduce de la siguien e mane a:
<ng-con aine ma ColumnDe ="selec ">
Y los seleccionado es u ilizan la siguien e he amien a:
<ma -checkbox>
Mejo as en una app pa a la ges ión de la gami icación (II) | 50
Pa a lle a a cabo el uso de las an e io es he amien as ha sido necesa io impo a en el
module. s cie as lib e ías como son las siguien es:
impo { Ma SnackBa Module } om '@angula /ma e ial/snack-ba ';
impo { Ma Fo mFieldModule } om '@angula /ma e ial/ o m- ield';
impo { Ma Bu onModule } om '@angula /ma e ial/bu on';
impo { Ma Inpu Module } om '@angula /ma e ial/inpu ';
impo { Ma Da epicke Module } om '@angula /ma e ial/da epicke ';
impo { Ma Na i eDa eModule } om '@angula /ma e ial/co e';
impo {Ma TableModule} om '@angula /ma e ial/ able';
impo { Ma CheckboxModule } om '@angula /ma e ial/checkbox';
El código de las uncionalidades ya p esen adas se encuen a en el p opio Gi Hub.
6.6.4 Re os des acados
Pa a es a uncionalidad en conc e o no ha habido ninguna di icul ad a des aca .
6.7. Funcionalidad 3: Edi a Pun os
6.7.1 ¿En qué consis e la uncionalidad?
El juego de compe ición, como ya se ha nomb ado en an e io men e, iene has a es
modalidades y una de ellas iene una pa icula dinámica, como lo es Fó mula un. De los
pa icipan es del juego solo pun ua án unos pocos y con unos pun os p ees ablecidos desde
un inicio en el Dashboa d.
Po ello, pa a la aplicación del p o eso necesi amos de una uncionalidad adicional pa a es a
modalidad de juego, ya que el p o eso debe pode modi ica esos alo es, es deci , an o el
núme o de alumnos que ealmen e pun ua on como la pun uación que pe cibi án.
Pa a ello se ha diseñado la uncionalidad de “Edi a Pun os”. De es a mane a se puede ene
una isión global de los pun os que se o o ga án y pode modi ica las.
6.7.2 Plani icación pa a la implemen ación
Pa a la implemen ación de es a uncionalidad nos basamos en p ime luga en el diseño ya
es ipulado en el Dashboa d p incipal. Analizando el Dashboa d nos damos cuen a de que
es a uncionalidad compa e página con o a uncionalidad ya mencionada en o o apa ado.
Ambas uncionalidades es án sepa adas po un deslizable. En es a ocasión analizamos solo
es a uncionalidad en cues ión.
En p ime luga , emos que hay un o mula io donde in oduci manualmen e y en o ma o
numé ico la can idad de pun os a asigna , es e o mula io incluye un í ulo en la pa e supe io .
Jus o al lado se puede e dos bo ones, uno de ellos es pa a es ablece los pun os en la
posición que se haya elegido de la abla que e emos a con inuación, de es a mane a se
puede e el esul ado inal como queda sin gua da los cambio aún.
Mejo as en una app pa a la ges ión de la gami icación (II) | 51
Y el segundo bo ón gua da los cambios como al mandando es a in o mación a la API
median e una pe ición. Es os bo ones únicamen e se habili an cuando los da os ya han sido
in oducidos y elegido de la abla a qué posición a ec a á.
Más abajo y como elemen o cen al enemos una abla que nos mues a cuán as posiciones
como máximo hab á, es deci , cuán os ganado es hab á pa a cada jo nada. Apa e de las
posiciones ambién nos mues a los pun os que se o o ga án a cada posición. En la pa e de
izquie da se añade un checkbox el cual se debe selecciona cuando se ha in oducido la
can idad de pun os a o o ga en el o mula io, de es a mane a se puede selecciona a qué
posición a ec a á ese cambio.
Al inal de la página podemos e dos bo ones más, ya que no solo se puede modi ica la
can idad de pun os que se o o ga a a las posiciones que apa ecen en la abla, sino que
ambién se pueden añadi o qui a posiciones en la abla, es deci , se puede modi ica el
núme o de pa icipan es que pun ua an en esa jo nada. Uno de los bo ones es pa a añadi
una posición más y el o o bo ón es pa a bo a la úl ima posición que haya en la abla.
También se incluye en la pa e in e io un bo ón pa a pode ol e hacia a ás, es deci , a la
lis a de juegos ac i os.
Una ez analizado el diseño es ipulado en el Dashboa d decidimos ealiza un diseño simila ,
pe o con algunos cambios, ya que a p io i nos pa ece en endible e in ui i o, pe o algunos
elemen os c eemos que debe ían se eliminados y eubicados.
En p ime luga , se man end á el o mula io donde in oduci de o ma manual los pun os a
asigna jun o a los dos bo ones, es ablece los pun os y gua da los cambios po que es algo
esencial pa a el co ec o uncionamien o del mismo.
El bo ón in e io que nos pe mi e ol e a ás se á eliminado, ya que esa uncionalidad ya la
enemos es ablecida po de ec o en odas las páginas de la aplicación del p o eso , po ello
se conside a i ele an e.
También se man end á las ablas con odos sus elemen os mencionados an e io men e,
pues o que a aco de con la uncionalidad a implemen a . Incluyendo así los dos bo ones de
añadi y qui a posiciones.
En es a ocasión se á modi icada la posición de los elemen os pa a que se pueda adap a a
la pan alla de un elé ono mó il. Po ello los elemen os no es án de o ma adyacen e uno con
el o o, sino de o ma e ical, uno debajo del o o. C eando así una dinámica po pasos
en endible y di igida pa a el p o eso . De al mane a que los bo ones de gua dado queden en
la pa e in e io , es deci , al inaliza la edición y no en la supe io .
6.7.3 Implemen ación del juego
Pa a la implemen ación del juego hemos enido que c ea una página en exclusi a pa a
isualiza los pun os exis en es, la página se ha denominado “edi a -pun os”. Pa a es ablece
odo lo mencionado an e io men e hemos enido que modi ica lo odo, an o en el a chi o h ml
como en el a chi o s, como en el module. s.
Mejo as en una app pa a la ges ión de la gami icación (II) | 52
En el código del a chi o s. se ha añadido en la sección OnIni la pe ición de los da os de la
abla que se p esen a de la o ma siguien e:
his.TablaPun uacion = his.sesion.DameTablaedi a Pun os();
Jus o a con inuación se añaden esos dados a la abla que se mos a á. Los dados son
in oducidos de la siguien e mane a:
his.da aSou ce = new Ma TableDa aSou ce ( his.TablaPun uacion);
También como elemen o adicional en el s. ue a del OnIni se ha añadido las uncionalidades
de los bo ones pa a añadi y elimina posiciones en la abla. Es as unciones ienen la
siguien e o ma:
Anadi Jugado conPun os() {}
Elimina Jugado conPun os() {
Como uncionalidad p incipal enemos la del bo ón donde se es ablecen los pun os, es a
unción ecoge los da os in oducidos y iene la siguien e o ma:
Anadi Pun os() {
Nue aPun uacion = Numbe ( his.myFo m1. alue.Nue aPun uacion);
También como unción p incipal enemos la del bo ón de gua dado de da os, que los en ía a
la API pa a se almacenados median e una pe ición. Es a unción iene la o ma siguien e:
goBackandgua da () {
his.pe icionesAPI.Modi icaJuegoDeCompe icionFo mulaUno( his.JuegoModi
icado, his.JuegoModi icado.id)
.subsc ibe(JuegoModi icado => {}
En el código h ml se ha añadido un o mula io donde con end á una en ada de da os posible.
Pa a ello se ha u ilizado la siguien e he amien a:
< o m [ o mG oup]="myFo m1" class = "enFila" s yle="wid h: 80%" >
Los da os a in oduci se ecogen con la siguien e he amien a den o del o mula io:
<inpu ma Inpu o mCon olName="Nue aPun uacion" placeholde ="Esc iba
los Pun os" equie ed [(ngModel)]="Nue aPun uacion">
Se incluye ambién la abla de las pun uaciones con la siguien e he amien a:
< able s yle="wid h: 100%" ma - able [da aSou ce]="da aSou ce">
Cada una de los da os que i á en las columnas se in oduce de la siguien e mane a:
<ng-con aine ma ColumnDe ="selec ">
Mejo as en una app pa a la ges ión de la gami icación (II) | 53
Y los seleccionado es u ilizan la siguien e he amien a:
<ma -checkbox>
Pa a lle a a cabo el uso de las an e io es he amien as ha sido necesa io impo a en el
module. s cie as lib e ías como son las siguien es:
impo { Ma Fo mFieldModule } om '@angula /ma e ial/ o m- ield';
impo { Ma Inpu Module } om '@angula /ma e ial/inpu ';
impo { Ma CheckboxModule } om '@angula /ma e ial/checkbox';
impo { Ma TableModule } om '@angula /ma e ial/ able';
6.7.4 Re os des acados
Pa a es a uncionalidad en conc e o no ha habido ninguna di icul ad a des aca .
6.8. Funcionalidad 4: Desac i a
6.8.1 ¿En qué consis e la uncionalidad?
El juego de compe ición como ya se ha nomb ado en an e io es apa ados, es un juego en el
cual, independien emen e de la modalidad que es é en uso, el juego debe pode desac i a se
y deja de se accesible a los alumnos. Po ello es necesa io pasa el juego de modo ac i ado
ha desac i ado.
Po ello, pa a la aplicación del p o eso necesi amos de una uncionalidad que es é en las es
modalidades del juego y que sea pa a desac i a un juego. Pa a ello se ha diseñado la
uncionalidad de “Desac i a ”.
De es a mane a se puede desac i a un juego en cualquie momen o y que, po lo an o, los
alumnos no engan acceso.
6.8.2 Plani icación pa a la implemen ación
Pa a la implemen ación de es a uncionalidad nos basamos en p ime luga en el diseño ya
es ipulado en el Dashboa d p incipal. Analizando el Dashboa d nos damos cuen a de que la
uncionalidad de desac i a iene dada po un bo ón que hay en la página p incipal del juego
de compe ición, po ello no iene página p opia.
Al se pulsado el bo ón nos apa ece un popup, el cual nos p egun a si es amos segu os de
desac i a el juego. Al con inua en el mismo popup hay dos bo ones, uno pa a acep a la
desac i ación y o o pa a deses ima lo.
Una ez analizado el diseño es ipulado en el Dashboa d decidimos ealiza un diseño simila
con los mismos elemen os.

Mejo as en una app pa a la ges ión de la gami icación (II) | 54
Se man end á el popup con la p egun a p incipal y los dos bo ones con el mismo diseño y las
posiciones de los elemen os.
6.8.3 Implemen ación del juego
Como pa a la implemen ación del juego no es necesa io c ea una página en exclusi a pa a
la uncionalidad, se ha añadido código pa a su implan ación en la misma página de inicio dl
juego de compe ición. Pa a es ablece odo lo mencionado an e io men e hemos enido que
modi ica lo odo, an o en el a chi o h ml como en el a chi o s, como en el module. s.
En el código del a chi o s. de la página p incipal del juego de compe ición se ha añadido
ue a de la sección OnIni la uncionalidad con o ma siguien e:
Desac i a () {}
En su in e io se ha u ilizado la siguien e he amien a pa a gene a el popup:
Swal. i e({})
En el cual se ha in oducido la p egun a mencionada an e io men e. Después de ene en
cuen a en qué modalidad es amos abajando, se hace una pe ición di ec amen e a la API
pa a bo a esa in o mación median e una pe ición. Es a pe ición iene la o ma siguien e:
his.pe icionesAPI.CambiaEs adoJuegoDeCompe icionLiga( his.juegoSelecci
onado).subsc ibe( es => {}
En el código h ml de la página p incipal del juego de compe ición se ha añadido un bo ón que
ac i a la uncionalidad di ec amen e y ha sido implemen ado median e la siguien e
he amien a:
<ion-bu on colo ="dange " s yle="wid h: 90%;"
(click)="Desac i a ();">Desac i a juego</ion-bu on>
Pa a lle a a cabo el uso de la an e io he amien a ha sido necesa io impo a en el
module. s cie a lib e ía como es la siguien e:
impo Swal om 'swee ale 2';
6.8.4 Re os des acados
Pa a es a uncionalidad en conc e o no ha habido ninguna di icul ad a des aca .
Mejo as en una app pa a la ges ión de la gami icación (II) | 55
6.9. Tes ing del co ec o uncionamien o
En es e pun o, se explica á de o ma de allada como se comp obó el co ec o uncionamien o
del juego, una ez implemen ado con espec o al código. Se ealiza median e una guía po
pasos a segui , que se ejecu ó y ealizó en su momen o y que cualquie usua io con acceso
al mismo puede ealiza pa a su comp obación.
Pa a es e juego en conc e o se ealiza á la comp obación de un solo modo, ya que las
uncionalidades básicas son las mimas pa a los es casos. La modalidad escogida se á
ó mula 1, pues o que iene una uncionalidad adicional que las demás no ienen y de es a
mane a se pueden aba ca la o alidad de unciones exis en es.
La comp obación del co ec o uncionamien o del juego, comienza con la c eación de un juego
nue o median e el Dashba d, cosa que ya se ha mencionado y explicado en capí ulos
an e io es, po ello en es e pun o se comenza a la comp obación desde el pun o de is a del
p o eso ado, con la aplicación del p o eso , median e pasos a segui .
1. Ab imos la aplicación del p o eso .
2. In oduciendo un usua io y su espec i a con aseña en el o mula io.
3. Accedemos a la p opia aplicación, pulsamos el bo ón de “Log In”.
4. Deslizamos has a encon a el juego seleccionado, pa a ello se dispone de bo ones
pa a adelan e y pa a a ás.
5. Accedemos al juego en cues ión pulsando en el bo ón “Ve más”.
En es e pun o podemos e la página p incipal del juego donde se nos mues an odas las
uncionalidades disponibles pa a el p o eso . Pa a es e caso, se empeza á po las
uncionalidades de con igu ación, más a de po la de asignación de ganado es y así de es a
más adelan e pod emos moni o iza esos mismos esul ados en las uncionalidades
es an es. Es o se puede obse a en: Figu e 14,15,16 y 17: Cap u as de los pasos a segui .
6. Seleccionamos la opción de “Edi a Pun os”, median e su espec i o bo ón.
En “edi a pun os” podemos e el o mula io p incipal donde añadi manualmen e la
nume ación de pun os que se quie e asigna . A con inuación, se puede e la abla con las
dis in as posiciones posibles, es as posiciones son seleccionable median e sus espec i os
checkbox’s, ambién se incluye la can idad de pun os ya asignados a cada posición. Se
p ocede á a añadi una nue a posición y a asigna le una can idad de un os de e minada.
Mejo as en una app pa a la ges ión de la gami icación (II) | 56
Fig. 14,15,16 y 17: Cap u as de los pasos a segui
7. Pulsamos el bo ón “Añadi Fila” que hay en la pa e in e io .
8. Esc ibimos en el o mula io “25”, in oduciendo así los pun os.
9. Seleccionamos la úl ima posición c eada, seleccionado el checkbox.
10. Gua damos los cambios pulsando el bo ón de “Es ablece pun os”
11. Pulsamos el bo ón “Back” pa a ol e a la página de inicio.
12. Seleccionamos la opción de “Edi a Jo nadas”, median e su espec i o bo ón.
En “edi a jo nadas” podemos e dos o mula ios, el p ime o pa a selecciona una echa an o
manualmen e como a a és de un calenda io y el o o pa a esc ibi manualmen e el c i e io
po el cual se á elegido el ganado . A con inuación, se puede e la abla con las dis in as
jo nadas posibles, es as jo nadas son seleccionable median e sus espec i os checkbox’s,
ambién se una enume ación y la echa y el c i e io asignado. Se p ocede á a modi ica una
jo nada y a asigna le una nue a echa y c i e io. Es o se puede obse a en: Figu e 18, 19,
20 y 21: Cap u as de los pasos a segui .
Fig. 18, 19, 20 y 21: Cap u as de los pasos a segui
Mejo as en una app pa a la ges ión de la gami icación (II) | 57
13. Desplegamos el calenda io median e el bo ón que hay al lado del o mula io, llamado
“Fecha”.
14. Seleccionamos un día, con ellos se au ocomple a á es e o mula io.
15. Esc ibimos en el siguien e o mula io “In uición”
16. Seleccionamos la p ime a posición, seleccionando el checkbox.
17. Gua damos los cambios pulsando el bo ón de “Gua da Cambios”
18. Pulsamos el bo ón “Back” pa a ol e a la página de inicio.
19. Seleccionamos la opción de “Asigna Ganado es”, median e su espec i o bo ón.
En “Asigna Ganado es” podemos e has a es o mula ios según el caso, uno pa a
selecciona la jo nada, el segundo donde se puede selecciona la me odología a segui pa a
asigna los ganado es y un e ce o mula io pa a selecciona en que juego nos que emos
basa pa a asigna la pun uación, es e úl imo caso solo se da si se elige la me odología “según
esul ados de juegos”.
También se puede e una abla con las di e en es posiciones según la pun uación ecibida,
cada posición incluye el nomb e y los apellidos del pa icipan e. Cada me odología iene su
p opia dinámica. Es o se puede obse a en desde la igu a 22 a la 40.
Fig. 22, 23, 24 y 25: Cap u as de los pasos a segui
20. Seleccionamos la p ime a jo nada median e el desplegable.
21. Seleccionamos el modo de asignación (Manual) median e el siguien e desplegable.
22. Esc ibimos el nomb e y los dos apellidos de las pe sonas que an a pun ua en el
o den que an a pun ua .
23. Gua damos los cambios pulsando el bo ón de “Asigna Ganado es Manualmen e”.
Mejo as en una app pa a la ges ión de la gami icación (II) | 64
7.2.2 Implemen ación del juego
Pa a la implemen ación del juego hemos enido que c ea una página en exclusi a pa a
isualiza la in o mación del juego de con ol de abajo, la página se ha denominado “con ol-
de- abajo”. Pa a es ablece odo lo mencionado an e io men e hemos enido que modi ica lo
odo, an o en el a chi o h ml como en el a chi o s, como en el module. s.
Fig.47. Es uc u a y a chi os del juego de con ol de abajo
El p ime o paso ue isualiza las ablas con in o mación es á ica, es deci , no e a la
in o mación dinámica que llega de la API que se mues a en la abla aho a mismo. Es o se
ealizó modi icando el a chi o .h ml del juego. Una ez, las ablas se mos aban como
habíamos planeado, pasábamos a hace las pe iciones a la API co espondien es pa a
ob ene la in o mación necesa ia.
Como se mues a en la siguien e imagen, es e es el código de la p ime a abla, donde se
mues a el núme o de con oles, el nomb e de los equipos y los iconos que ep esen an en el
es ado del con ol. El código ma cado en azul es la columna que mues a el nomb e de los
equipos, en es e caso, po ejemplo, se ian ‘Equipo A’ y ‘Equipo B’. Y a con inuación, el código
ma cado en e de es la columna de la abla donde se mues an el núme o de con ol con los
co espondien es iconos. Podemos e que cada icono ejecu a la unción ‘MouseO e ()’ al
clica sob e él, es a unción es la enca gada de desplega en de alle las pun uaciones de cada
uno de los con oles.
Fig.48. Pa e del código del a chi o h ml del juego de con ol de abajo

Mejo as en una app pa a la ges ión de la gami icación (II) | 65
En la siguien e igu a, se mues a el código de la abla que se despliega cuando se hace clic
sob e el icono. La sección azul es la columna donde mues a el nomb e y apellido de cada
uno de los miemb os de ese equipo y el icono del email pa a en ia un eco da o io al alumno
( uncionalidad que se explica en el siguien e apa ado). La sección e de es la columna donde
se mues a la epa ición de pun os de cada uno de los miemb os a sus compañe os de
equipo, y donde inalmen e se calcula la suma o al de pun os que iene cada miemb o.
Fig.49. Pa e del código del a chi o h ml del juego de con ol de abajo
Pa a ob ene la in o mación que in oducimos en cada uno de los campos mencionados
an e io men e, p og amamos las uncionalidades en el a chi o . s del juego de con ol de
abajo.
El p ime paso ue decidi qué in o mación que íamos ob ene nada más ab i la página del
juego y, po lo an o, que se ejecu a an esa unciones, y es o se p og ama en el ‘ngOnIni ()’
del a chi o. Las unciones más des acables que se implemen a on, ue on
‘ his.sesion.DameJuego()’, donde se llama a la uncionalidad que se encuen a en el Se ice
nomb ado “sesión”, llamada ‘DameJuego()’. Es a uncionalidad ealiza una pe ición
di ec amen e a la API, pa a ob ene el juego seleccionado en el que es amos. A pa i de allí,
median e la unción ‘ his.pe icionesAPI.DameEquiposDelG upo
( his.juegoSeleccionado.g upoId)’ ob enemos los equipos que necesi amos, a pa i Id de
g upo que ob u imos p e iamen e al ob ene el juego seleccionado. G acias a es as dos
unciones, podemos mos a los equipos en la abla del g upo con el que es amos abajando.
A con inuación, implemen amos una unción llamada ‘T aeRespues asAlCon ol()’ donde se
p epa a el ec o con odas las espues as de los equipos. El ec o end á una posición po
cada equipo, donde hab á un obje o con el equipo y las espues as del equipo. Hay que ene
en cuen a que las espues as del equipo, es un ec o con an as posiciones como miemb os
iene el equipo y en cada una de esas posiciones hay un ec o con las espues as de cada
alumno a los con oles.
Mejo as en una app pa a la ges ión de la gami icación (II) | 66
Cada espues a a un con ol es un obje o con dos campos: pun uaciones y comen a io. El
campo de pun uaciones es un ec o con an as posiciones como alumnos iene el g upo, y
en cada posición hay el id del alumno y los pun os que se le han asignado. G acias a es a
in o mación que ecibimos de la API podemos ellena la mayo pa e de los campos de las
ablas mencionados p e iamen e.
Den o de es a unción, a pa i de la ma iz ‘nume oDeRespues as[i][j]’, que nos dice cuán os
con oles ha con es ado ya el alumno j del equipo i. C eamos la ma iz
‘nume oRespues asPo Con ol[i][k]’ que indica cuan os alumnos del equipo i han con es ado
ya el con ol k. G acias a es a in o mación podemos mos a el es ado de cada uno de los
con oles median e iconos. Los equisi os pa a la decisión de mos a un es ado u o o son
los siguien es:
1. Se conside a que un con ol no ha enido ningún p oblema cuando ningún miemb o
ha ecibido de alguno de sus compañe os un núme o de pun os in e io a la mi ad de
lo que hubie a sido un epa o pe ec o de los 10 pun os.
En ese caso se mos a á el icono de check en colo e de, que indica que odos los
miemb os han comple ado el con ol.
2. Se conside a que un con ol indica posibles p oblemas si alguno de los alumnos ha
ecibido de alguno de sus compañe os un núme o de pun os in e io a la mi ad de lo
que hubie a sido un epa o pe ec o de los 10 pun os.
Po ejemplo, si el g upo es de 4 alumnos, el epa o pe ec o es 2.5 pa a cada uno.
Hab á p oblemas si un alumno ecibe menos de 1.25 pun os po pa e de algún
compañe o.
En ese caso se mos a á el icono de check en colo ojo, que indica que odos los
miemb os han comple ado el con ol, pe o que algún miemb o ha ecibido una no a
in e io espec o a los demás.
3. Se conside a que un con ol es incomple o cuando al an miemb os del g upo po
e alua . En ese caso se mos a á el icono de eloj de a ena.
En la ma iz ‘con olTe minado [i][k]’ indica emos el es ado del con ol k del equipo i, con es os
códigos:
- 0 con ol no con es ado aun nadie del g upo
- 1 con ol con es ado po odos y sin p oblemas
- 2 con ol con es ado po odos, pe o con p oblemas
- 3 con ol con es ado solo po algunos del g upo
Con oda es a in o mación ecibida de la API podemos ellena de o ma dinámica la p ime a
abla que que emos isualiza , con el nomb e de los equipos, el núme o de con oles
co espondien e con cada uno de los iconos indicando su es ado.
Mejo as en una app pa a la ges ión de la gami icación (II) | 67
El segundo paso, es ob ene la in o mación necesa ia pa a ellena la abla que se despliega
al clica sob e uno de los iconos de es ado, y que mues a odos los de alles de pun uación
de cada uno de los miemb os.
La p ime a unción a implemen a es la del ‘MouseO e ()’, unción que hemos is o
p e iamen e en el a chi o .h ml pa a desplega los de alles del con ol al clica sob e el icono.
A pa i del núme o del con ol y el nomb e del equipo, ob enemos odos los alumnos de ese
equipo median e una pe ición a la API. A pa i de es o, llamamos a o a unción que enemos
c eada en el a chi o . s, llamada ‘P epa aDa osDelCon ol’ donde se p epa an las
pun uaciones y los comen a ios de los alumnos del equipo iden i icado al con es a el con ol
i. La espues a es un ec o con una posición pa a cada alumno del g upo, donde
pos e io men e eco emos odos los alumnos y omamos sus espues as en el con ol
elegido. En ese momen o, ambién es donde se hacen la comp obación de si el alumno x ha
pun uado o comen ado algo en elación con ese con ol.
Y g acias a es a in o mación ecibida de la API podemos ellena de o ma dinámica la
segunda abla que que emos isualiza , con el nomb e de los miemb os del equipo, las
pun uaciones de cada uno de ellos, el o al de pun os ecibidos de cada alumno y los
comen a ios espec o a la epa ición de esos pun os.
Finalmen e, pa a lle a a cabo el uso de las an e io es he amien as ha sido necesa io
impo a en el module. s cie as lib e ías pa a la co ec a isualización de odos los elemen os
desc i os an e io men e:
impo { Fo msModule } om '@angula / o ms';
impo { Ma TableModule } om '@angula /ma e ial/ able'
impo {Ma ExpansionModule} om '@angula /ma e ial/expansion';
impo { Ma Lis Module } om '@angula /ma e ial/lis ';
El código de las uncionalidades mencionadas se encuen a en el eposi o io de Gi Hub
llamado ‘classpip-mo il-p o eso -de ’.
7.2.3 Re os des acados
Se dedicó mucho iempo a pensa como mos a la in o mación de una mane a cla a y ú il
pa a el docen e. Al p incipio se plan eó sus i ui las ablas po expandibles, donde ue a
posible expandi la in o mación de cada equipo. Pa a ello, se impo ó un componen e que se
c eó p e iamen e pa a u iliza lo en el juego de compe ición, pe o empezó a da p oblemas de
duplicación, pues o que es e componen e ya e a u ilizado en el juego de compe ición.
Fig.50. Es uc u a y a chi os del componen e llamado expandible
Mejo as en una app pa a la ges ión de la gami icación (II) | 68
Es o nos obligaba a duplica el componen e y cambia le el nomb e pa a pode se u ilizado
en el juego de con ol de abajo sin ningún p oblema elacionado con la duplicación. Pe o
es a solución nos pa ecía muy poco óp ima, ya que se enía que duplica es e componen e
en cada uno de los juegos en los que lo que íamos u iliza . Apa e, que al añadi lo no nos
con enció la mane a en la que se eía odo es é icamen e. Po ello se decidió man ene las
ablas, aunque las ablas ambién nos gene aban p oblemas al pasa las al amaño mó il si
e an muy anchas, ya que se co aba pa e de la in o mación y no se eía.
La solución que se p opuso inalmen e sob e la p oblemá ica con las ablas, ue añadi un
es ilo al ‘di ’ que englobaba la abla que que íamos a egla .
Es e es ilo e a el ‘o e low-x’, donde es a p opiedad especí ica si se eco a el con enido, se
ag ega una ba a de desplazamien o o se mues a el con enido de desbo damien o de un
elemen o a ni el de bloque, cuando se desbo da en los bo des izquie do y de echo. Al
especi ica que que íamos que la p opiedad ue a ‘au o’, en ese momen o se debe
p opo ciona un mecanismo de desplazamien o pa a las celdas que se desbo dan.
Fig.51. S yle añadido pa a soluciona la p oblemá ica con las ablas
Po lo an o, inalmen e ob enemos un ‘sc olling’ ho izon al que nos pe mi e isualiza la pa e
de la abla que p e iamen e se co aba po el amaño del disposi i o.
Fig.52. Ejemplo del sc olling ho izon al que ob enemos median e o e low-x: au o
Mejo as en una app pa a la ges ión de la gami icación (II) | 69
7.3. Funcionalidad 2: En ío de co eos elec ónicos
7.3.1 Plani icación pa a la implemen ación
Desde el análisis de cada uno de los juegos, eníamos cla o que que íamos añadi una
uncionalidad adicional que no exis ía en el Dashboa d. Al ealiza el análisis en de alle del
juego de con ol de abajo, imos in e esan e la implemen ación de una uncionalidad pa a
eco da al alumno la necesidad de comple a la asignación de pun os en el iempo
p ede e minado po el docen e. En es e caso, conside amos que el en ío de un co eo
elec ónico en o ma o eco da o io e a una idea in e esan e a añadi como uncionalidad
adicional.
El obje i o e a consegui que cuando el p o eso desplega a un con ol con icono de eloj de
a ena (Indica que solo algunos miemb os del equipo han comple ado la e aluación) y se
ie an los de alles de pun uación de cada uno de los miemb os de equipo, que el docen e
u ie a la posibilidad de eco da a los alumnos que ienen el apa ado de pun uación acío,
la necesidad de e alua a los miemb os del g upo en el plazo p ees ablecido. Ya que
p e iamen e en el Dashboa d esa posibilidad no exis ía y si el docen e isualizaba que una
can idad de alumnos no lo habían comple ado, enía que in o ma lo pe sonalmen e o
en iando un comunicado de mane a independien e a Classpip. Añadiendo es a uncionalidad,
se acili a al docen e la comunicación con sus alumnos en es e ipo de casos.
De ca a a que ipo de ecnología se iba a u iliza pa a dicha implemen ación, al ealiza el
análisis gene al de la aplicación del p o eso al inicio, obse amos que es aba implemen ada
la uncionalidad de ‘Recupe ación de con aseña’ en la página de inicio de sesión del p o eso .
Es a uncionalidad ambién ealizaba el en ío de un mail cuando el p o eso solici aba la
ecupe ación de la con aseña. Po lo an o, se decidió u iliza la misma ecnología, que e a
‘Nodemaile ’, pa a man ene la semejanza del código y ambién pa a no ene dos
implemen aciones de en ío de mails dis in as y que conlle en a con usión.
En cuan o al p o eedo , desde un p incipio se decidió u iliza Gmail. Las azones de es a
decisión ue on a ias:
1. Homogeneidad: La uncionalidad p e iamen e implemen ada, que u ilizaba la
ecnología de nodemaile , u ilizaba es e p o eedo . Y Classpip como p oduc o,
cambia cons an emen e de p o eedo no e a una solución cómoda de ca a a la
expe iencia del usua io. Po ello, pa a man ene la homogeneidad se decidió u iliza
Gmail en odos los casos en los que se implemen e el en ío de co eos elec ónicos.
2. Documen ación: La in o mación de la implemen ación de Gmail con Nodemaile
es aba mucho más documen ada en in e ne que cualquie o a opción. Eso
signi icaba que cualquie p oblema al que nos íbamos a en en a , eníamos más
in o mación y a mas con las que soluciona lo.
3. Segu idad: La segu idad que nos o ece Gmail espec o a o os p o eedo es e a
mucho mayo , po lo que e a un pun o que e a in e esan e si en algún momen o la
segu idad en cuan o al en ío de mail u ie a que inc emen a se.

Mejo as en una app pa a la ges ión de la gami icación (II) | 70
4. Compa ibilidad: Gmail es uno de los p o eedo es más compa ibles con cualquie
ecnología STMP que se quie a implemen a en un p oyec o de p og amación, en es e
caso, e a bas an e compa ible con Nodemaile . Además, in es igando sob e la
combinación de uso de Gmail y Nodemaile , las opiniones e an muy posi i as.
En el capí ulo 10, en el apa ado donde se en a en de alle de las p oblemá icas que ha
conlle ado implemen a es a uncionalidad, se explica po qué se decidió cambia de
p o eedo en un momen o dado. Aunque inalmen e, se acabó usando Gmail como p o eedo
en es e p oyec o.
Una ez sabíamos que ecnología íbamos a u iliza , pasamos a la pa e es é ica de es a
uncionalidad. Decidimos añadi la uncionalidad en o ma de icono ep esen ando el sob e
de un co eo elec ónico. Se decidió coloca lo en la abla de de alles de pun os, ya que es
exac amen e donde ob enemos la in o mación de que alumnos al a po o a . Además, se
decidió pone lo al lado del nomb e pa a que de una mane a más isual se sepa a qué alumno
se le es á en iando ese eco da o io.
Una ez eníamos planeada como que íamos la implemen ación de la uncionalidad de en ío
de co eos elec ónicos, el siguien e paso e a p og ama lo.
7.3.2 Implemen ación del juego
El p ime paso es c ea el bo ón con el icono co espondien e en el a chi o .h ml del juego de
con ol de abajo. Como se obse a en la siguien e igu a, al hace clic sob e el icono se
ejecu a á la unción de ‘En ia Email()’ donde se pasa como pa áme o el nomb e de usua io
del alumno al que que emos en ia el eco da o io.
Fig. 53. Pa e del código del a chi o h ml del juego de con ol de abajo
La unción que hemos is o p e iamen e que se ejecu a al hace clic al bo ón del email, se
encuen a en el a chi o . s del juego de con ol de abajo. Es a unción, como emos en la
siguien e igu a, le llega como pa áme o el nomb e de usua io del alumno y a con inuación,
se hace una pe ición a la API pa a ecupe a el objec o ‘Alumno’ al que co esponde ese
nomb e de usua io pasado como pa áme o p e iamen e (Función ma cada en azul).
Mejo as en una app pa a la ges ión de la gami icación (II) | 71
En ese momen o el obje o ‘Alumno’ lo enemos en la a iable ‘ es’, donde comp obamos si
esa a iable es ‘unde ined’ o no, y depende del esul ado, se mues a una no i icación en la
pan alla del usua io. En el caso de que odo aya bien, se mos a a una no i icación que indica
que el ‘Reco da o io ha sido en iado’, po el con a io, indica a o o mensaje.
Si odo a bien, nos amos a conec a nos al se ido pa a ealiza el en ío del email, es o lo
amos a ealiza con la unción ma cada en e de en la igu a. Donde se pasa como
pa áme o el email que hemos ob enido a pa i del obje o ‘Alumno’. Es a unción se explica
con más de alle a con inuación.
Fig.54. Función en ia email si uada en el a chi o . s del juego de con ol de abajo
La siguien e igu a co esponde a la unción que se ejecu a den o de la unción ‘En ia Email()’
( unción ma cada en azul en la igu a 54), donde ecupe amos el objec o ‘Alumno’ a pa i de
una pe ición a la API donde il amos median e el nomb e de usua io.
Fig.55. Función de la pe ición a la API del alumno median e el nomb e de usua io
Mejo as en una app pa a la ges ión de la gami icación (II) | 72
Y la siguien e igu a co esponde ambién a la unción que se ejecu a den o de la unción
‘En ia Email ()’ ( unción ma cada en e de en la igu a 54), donde nos conec amos al se ido
median e socke s pa a emi i el e en o ‘en ia Reco da o io’ y como da os en iamos el email
del alumno. Una ez en iado el email, nos desconec amos.
Fig.56. Conexión con el se ido
Una ez enemos odo lis o en la pa e del clien e, pasamos al se ido pa a ecibi el e en o
que acabamos de emi i . Como emos en la siguien e imagen, el se ido ecibe el e en o
median e socke y ealiza una pe ición a la API pa a lle a a cabo el en ío de email al usua io
co espondien e.
Fig.57. Función en la que el se ido ecibe el e en o en iado po el clien e
A con inuación, se ejecu a la unción que se ha ealizado median e la pe ición a la API. Es a
unción es la que ealiza el en ío del mail u ilizando Nodemaile y Gmail como p o eedo .
Como emos, el emiso siemp e a a se Classpip median e su email de emp esa donde
comunica a es e ipo de eco da o ios. El des ina a io se á el alumno que se pasa su email
como pa áme o. Y la in o mación que a den o del co eo elec ónico, en es e caso, es una
plan illa en o ma o eco da o io a la que se le en ía a cualquie alumno que decida el
p o eso .
Como emos en la imagen, hay dos campos ma cados, el campo ma cado en azul es donde
i á colocado el email de emp esa de Classpip con el que se a a en ia odo es e ipo de
emails. Y el campo ma cado en e de, es la con aseña de aplicación, que no es la con aseña
con la que se inicia sesión no malmen e. Pa a una co ec a con igu ación y ob ención de es a
con aseña se explica en el capí ulo de ‘Re os des acados’ en el apa ado 5.1.3. Y inalmen e,
se en ía el mail co ec amen e, y en el caso se algún p oblema sal a ía un mensaje de e o .
Mejo as en una app pa a la ges ión de la gami icación (II) | 73
Fig. 58. Función de en ío de co eos elec ónicos en el se ido
Una ez p og amado es o, si clicamos el icono de en ío de email a un cie o usua io,
ecibi emos un co eo elec ónico igual al que se mues a en la siguien e igu a.
Fig. 69. Co eo que se en ía a los alumnos en o ma de eco da o io
Mejo as en una app pa a la ges ión de la gami icación (II) | 80
8.2.2 Implemen ación del juego
Pa a la implemen ación del juego hemos enido que c ea una página en exclusi a pa a
isualiza la in o mación del juego de cues iona io de sa is acción, la página se ha
denominado “juego-cues iona io-sa is acción”. Pa a es ablece odo lo mencionado
an e io men e hemos enido que modi ica lo odo, an o en el a chi o h ml como en el a chi o
s, como en el module. s.
Fig. 77. Es uc u a y a chi os del juego de cues iona io de sa is acción
El p ime paso ue isualiza la in o mación del núme o de pa icipan es y el núme o de
espues as. Es o se ealizó modi icando el a chi o .h ml del juego. Una ez, se mos aba la
in o mación de o ma es á ica, se pasó a hace las pe iciones a la API co espondien es pa a
ob ene la in o mación necesa ia. Es o ue algo que se añadió en el a chi o . s, que se
explica á a con inuación.
Fig. 78. Pa e del código del a chi o h ml del juego de cues iona io de sa is acción
A con inuación, el obje i o e a isualiza la abla con la in o mación ele an e de la encues a.
Esa in o mación e an las a i maciones que el p o eso había c eado p e iamen e y la no a
media de pun uación del 1 al 5 de los alumnos que habían o ado en ese momen o. Pa a
hace lo, añadimos el código que se mues a a con inuación en el a chi o .h ml. Al p incipio
se c eó con in o mación in en ada es á ica pa a comp oba la co ec a isualización de la
abla y ya pos e io men e, se c eó la unción en el a chi o . s pa a hace las pe iciones
necesa ias a la API pa a ob ene esa in o mación y ellena los campos de la abla.

Mejo as en una app pa a la ges ión de la gami icación (II) | 81
Fig. 79. Pa e del código del a chi o h ml del juego de con ol de abajo
Y como paso inal en lo elacionado con el a chi o .h ml, se añaden los desplegables con las
p egun as abie as y con sus co espondien es espues as. Como hemos mencionado
an e io men e, se hacen p uebas p ime o con in o mación es á ica y ya después se c ea la
unción en el a chi o . s pa a ecupe a la in o mación dinámica necesa ia.
Fig. 80. Pa e del código del a chi o h ml del juego de con ol de abajo
Pa a ob ene la in o mación que in oducimos en cada uno de los campos mencionados
an e io men e, p og amamos las uncionalidades en el a chi o . s del juego de cues iona io
de sa is acción.
El p ime paso ue decidi qué in o mación que íamos ob ene nada más ab i la página del
juego y, po lo an o que, se ejecu a an esa unciones, y es o se p og ama en el ‘ngOnIni ()’
del a chi o. Las unciones más des acables que se implemen a on, ue on
‘ his.sesion.DameJuego()’, donde se llama a la uncionalidad que se encuen a en el Se ice
nomb ado “sesión”, llamada ‘DameJuego()’. Es a uncionalidad ealiza una pe ición
di ec amen e a la API, pa a ob ene el juego seleccionado en el que es amos. A pa i de allí,
median e la unción ‘ his.pe icionesAPI.DameCues iona ioSa is accion
( his.juegoSeleccionado.cues iona ioSa is accionId)’ ob enemos el cues iona io de
sa is acción que necesi amos mos a , a pa i Id del cues iona io de sa is acción que
ob u imos p e iamen e al ob ene el juego seleccionado. G acias a es as dos unciones,
podemos mos a la in o mación necesa ia que ayamos necesi ando sob e ese cues iona io.
A con inuación, implemen amos una unción llamada
‘Recupe a Insc ipcionesAlumnoJuego()’, donde se ob ienen las espues as de cada uno de
los alumnos. G acias a es a in o mación que ecibimos de la API podemos ellena la mayo
pa e de los campos de las ablas mencionados p e iamen e.
Mejo as en una app pa a la ges ión de la gami icación (II) | 82
A con inuación, p epa amos la in o mación pa a pode isualiza la en cada uno de los si ios,
eso lo hacemos con la unción llamada ‘P epa aIn o macion()’.
Finalmen e, pa a lle a a cabo el uso de las an e io es he amien as ha sido necesa io
impo a en el module. s cie as lib e ías pa a la co ec a isualización de odos los elemen os
desc i os an e io men e:
impo { Fo msModule } om '@angula / o ms';
impo { Ma S eppe Module } om '@angula /ma e ial/s eppe ';
impo { Ma Inpu Module, Ma RadioModule } om '@angula /ma e ial';
impo { Ma TableModule } om '@angula /ma e ial/ able'
El código de las uncionalidades mencionadas se encuen a en el eposi o io de Gi Hub
llamado ‘classpip-mo il-p o eso -de ’.
8.2.3 Re os des acados
Pa a la implemen ación de es e juego no hubo e os demasiado des acables como pa a
comen a los en es a sección. G acias a odos los e os que se p esen a on en los juegos
an e io es, pudimos esol e la mayo ía de complicaciones que su gie on en es e juego sin
bas an es p oblemas. Po eso, cabe des aca que, g acias a odas las complicaciones p e ias
a la implemen ación de es e juego, nues as habilidades como p og amado es aumen a on y
eníamos expe iencia en esol e e o es que p e iamen e ya se habían esul o.
8.3. Tes ing del co ec o uncionamien o
En es e pun o, se explica á de o ma de allada como se comp obó el co ec o uncionamien o
del juego, una ez implemen ado a ni el de código. Se ealiza median e una guía po pasos
a segui , que se ejecu ó y ealizó en su momen o y que cualquie usua io con acceso al mismo
puede ealiza pa a su comp obación.
La comp obación del co ec o uncionamien o del juego, comienza con la c eación de un juego
nue o median e el Dashboa d, cosa que ya se ha mencionado y explicado en capí ulos
an e io es, po ello en es e pun o se comenza a la comp obación desde el pun o de is a del
docen e, usando la aplicación del p o eso .
1. Ab imos la aplicación del p o eso .
2. In oduciendo un usua io y su espec i a con aseña en el o mula io.
3. Accedemos a la p opia aplicación, pulsamos el bo ón de “Log In”.
4. Deslizamos has a encon a el juego seleccionado, pa a ello se dispone de bo ones
pa a adelan e y pa a a ás.
5. Accedemos al juego en cues ión pulsando en el bo ón “Ve más”.
Mejo as en una app pa a la ges ión de la gami icación (II) | 83
Fig. 81. Página de inicio de sesión
Fig. 82. Ta je a del juego de cues iona io de
sa is acción
Una ez es amos den o del juego de cues iona io de sa is acción, en la igu a 83, podemos
isualiza los da os y es adís icas de dicho cues iona io. Los da os que se mues a son, el
núme o de pa icipan es, el núme o de espues as ac uales en o ma o núme o y en
po cen aje, las espues as a las a i maciones que el docen e ha esc i o, y inalmen e, se
mues an las p egun as abie as que ha p opues o el docen e. Como se puede obse a , las
espues as a las p egun as abie as, se mos a án una ez se haga clic sob e el desplegable
de la p egun a que que amos ab i .
Fig. 83. Juego cues iona io de sa is acción desde la aplicación del p o eso
Mejo as en una app pa a la ges ión de la gami icación (II) | 84
CAPÍTULO 9. DISEÑO GENERAL DE LA APLICACIÓN
9.1. Ca ds juegos: Cambio de la es é ica pa a mejo a la uncionalidad
Una ez el docen e inicia sesión, la aplicación le edi ige a la pan alla de inicio, donde
deslizando puede i iendo los di e en es juegos ac i os que iene como opción. Pe o como
se obse a en la siguien e imagen, el diseño no es á del odo conseguido, ya que la a je a
es demasiado la ga, haciendo que los bo ones de ‘An e io ’ y ‘Siguien e’ queden apados.
También sucedía, en ocasiones, que los bo ones se salie an de la pan alla dependiendo del
ipo de mó il, y que la opción de mo e se a o o juego esul a a complicada.
Fig. 84. Pan alla de inicio p e ia al a eglo
Po eso, como solución se p opuso ija el amaño de la a je a pa a e i a el p oblema con
los bo ones. Pe o pod íamos ene un posible u u o p oblema con que la a je a si se llega a
a co a según el ipo de mó il con el que se isualiza a. Po eso, pa a con igu a a al u a de
la a je a no se puso una medida ija en píxeles, po ejemplo, 140px de al u a como es ilo. Si
no que se con igu ó la al u a pa a ocupa exac amen e un cie o po cen aje de la pan alla y
así se ía un alo a iable según el ipo de mó il que se u iliza a. La es a egia e a usa algo
pa ecido a lo que se mues a en la siguien e imagen, donde se puede deja un padding- op
de un 20% y luego coloca la a je a con una al u a del 70%, dejando un 10% como ma gen
espec o al lími e de abajo.
Mejo as en una app pa a la ges ión de la gami icación (II) | 85
Fig. 85. Dis ibución de po cen ajes en una pan alla mó il
Ob iamen e, se ha enido en cuen a que, si la al u a del mó il es muy pequeña, el con enido
den o de la a je a puede e se a ec ado. Pa a a egla ese p oblema, se pueden u iliza
es ilos en cada uno de los con enedo es que engloban los elemen os que es án den o de la
a je a, pa a c ea un diseño ‘Responsi e’. Es e ipo de diseño u iliza diseños lexibles,
imágenes lexibles y consul as de medios de hojas de es ilo en cascada. El obje i o del diseño
‘Responsi e’ es c ea aplicaciones que de ec en el amaño y la o ien ación de la pan alla del
isi an e y cambien el diseño en consecuencia. Po lo an o, según el amaño de la pan alla,
el diseño cambia á de amaño, e i ando posibles p oblemas de supe posición o eco e de
elemen os.
También se decidió mo e los bo ones de ‘An e io ’ y ‘Siguien e’ a iba, pa a mejo a su
isualización y e i a p oblemas de uncionalidad de los mismos.
9.2. Pan alla de inicio de juego de compe ición
Pa a el juego de compe ición desde un p incipio que íamos añadi una pan alla de inicio
donde se encuen en las di e en es unciones que puede ealiza el p o eso . Como se
mues a en la siguien e imagen, lo di idimos en dos pa es:
- En la p ime a sección, se encuen an las unciones que puede ealiza el p o eso en
elación con las jo nadas.
- En la segunda sección, se encuen an las unciones que es án elacionadas con la
asignación de ganado es y la desac i ación del juego.

Mejo as en una app pa a la ges ión de la gami icación (II) | 86
Fig. 86. Pan alla de inicio del juego de compe ición
Los bo ones nos edi igen a cada una de las páginas de las uncionalidades que co esponden
al juego de compe ición en el que es emos.
9.3. Bo ones: Es é ica según el ipo de unción del bo ón
Los colo es de los bo ones den o de los juegos siguen un mismo pa ón de colo es según la
uncionalidad que engan.
1. Bo ón de edi ección: Los bo ones que nos edi igen a o as páginas decidimos que
ue an g ises. Es e colo es el denominado ‘ligh ’ al añadi un ion-bu on.
<bu on ion-bu on colo ="ligh ">Ve jo nadas</bu on>
2. Bo ón de desac i ación: Los bo ones que desac i an los juegos decidimos que ue an
ojos. Es e colo es el denominado ‘dange ’ al añadi un ion-bu on.
<bu on ion-bu on colo ="dange ">Desac i a juego</bu on>
Mejo as en una app pa a la ges ión de la gami icación (II) | 87
3. Bo ón de in o mación: Los bo ones que despliegan in o mación adicional decidimos
que ue an azules. Es e colo es el denominado ‘p ima y’ al añadi un ion-bu on.
<bu on ion-bu on colo ="p ima y">Más in o mación</bu on>
9.4. Tablas: Mejo a es é ica pa a co ec a isualización
Las ablas es un elemen o muy epe i i o en la implemen ación de cada uno de los juegos. Y
en algunos de los casos, cuando la abla e a muy ancha a causa de la g an can idad de
columnas, se co aba y no se eía oda la in o mación necesa ia.
Po eso necesi ábamos una solución pa a e i a es a p oblemá ica, y imos que con el uso
de es ilos podíamos soluciona lo. Es e es ilo e a el ‘o e low-x’, donde es a p opiedad
especí ica si se eco a el con enido, se ag ega una ba a de desplazamien o o se mues a el
con enido de desbo damien o de un elemen o a ni el de bloque, cuando se desbo da en los
bo des izquie do y de echo. Al especi ica que que íamos que la p opiedad ue a ‘au o’, en
ese momen o se debe p opo ciona un mecanismo de desplazamien o pa a las celdas que
se desbo dan.
Fig. 87. S yle añadido pa a soluciona la p oblemá ica con las ablas
Como emos en la siguien e imagen exis en a ios alo es a especi ica pa a la p opiedad de
‘o e low-x’, en es e caso como hemos mencionado an e io men e, u ilizamos el alo au o
que es el que nos in e esa.
Fig. 88. S yle añadido pa a soluciona la p oblemá ica con las ablas
Mejo as en una app pa a la ges ión de la gami icación (II) | 88
Po lo an o, inalmen e ob enemos un ‘sc olling’ ho izon al que nos pe mi e isualiza la pa e
de la abla que p e iamen e se co aba po el amaño del disposi i o.
Fig. 89. Ejemplo del sc olling ho izon al que ob enemos median e o e low-x: au o
Mejo as en una app pa a la ges ión de la gami icación (II) | 89
CAPÍTULO 10. RETOS MÁS DESTACADOS
En es e capí ulo se explica án a ios de los e os que se han ido p esen ando du an e el
p oceso de implemen ación de los juegos o uncionalidades. En cada e o se explica á un
esumen de lo que a a, la p oblemá ica a la que nos en en amos y las p opues as o
soluciones que se han aplicado en cada caso.
Es e capí ulo es comple amen e di e en e en elación con la memo ia de mi compañe o de
p oyec o, pues o que cada uno u o unos e os du an e la implemen ación de los juegos.
10.1. Nodemaile : He amien a de en ío de co eos elec ónicos
A la ho a de implemen a algunos de los juegos en la aplicación del p o eso , imos que e a
in e esan e añadi la opción de en ia mails a los alumnos como uncionalidad en algunos de
los juegos. Desde el momen o del análisis de cada uno de los juegos, llegamos a la conclusión
que e a una uncionalidad que que íamos añadi en el juego de e aluación, con ol de abajo
y cues iona io de sa is acción.
Los p ime os pasos del p oyec o, ue analiza lo que ya eníamos en la aplicación del p o eso ,
po lo an o, ya eníamos en conside ación la exis encia de una uncionalidad que mandaba
mail en el caso de que un p o eso se haya ol idado de su con aseña. Como nues o obje i o
e a hace algo simila y que íamos man ene la cohe encia del uso de he amien as en es e
p oyec o, in es igamos qué he amien a se usaba en ese momen o pa a hace el en ío de
co eos.
La he amien a que es aba siendo u ilizada e a ‘Nodemaile ’. Nodemaile es un módulo que
nos pe mi e añadi la uncionalidad de en ío de co eos elec ónicos en nues o se ido
NodeJS. En nues o caso, ya se es aba u ilizando una cuen a de gmail p e iamen e como
p o eedo de en ío de co eos, po eso nos pusimos a in es iga esa opción. Pe o nodemaile
puede se usado con di e sos p o eedo es y se icios, al y como se indica en su
documen ación.
10.1.1. Gmail: P oblemas de au en icación
Gmail es la o ma más ápida de comenza a en ia co eos elec ónicos con Nodemaile .
Aunque es un se icio que espe a que el usua io sea un usua io eal, no un obo , po lo que
ejecu a muchas heu ís icas pa a cada in en o de inicio de sesión y bloquea cualquie cosa
que pa ezca sospechosa pa a de ende al usua io de in en os de obo de cuen a. Y es a
segu idad ue el p ime de los p oblemas a los que nos u imos que en en a .
Mejo as en una app pa a la ges ión de la gami icación (II) | 96
Fig.99. Cap u a de código de la uncionalidad con la con aseña de aplicación
Es impo an e ene en cuen a, que cada ez que se cambie la con aseña de la cuen a
p incipal de Google, ambién se desac i a án las con aseñas de la aplicación.
Pa a comp oba si es a solución unciona co ec amen e, se hace como siemp e, ejecu ando
la unción de ‘¿Ol idas e u con aseña?’ pa a e i ica el en ío del co eo elec ónico. Y como
se puede comp oba en las siguien es cap u as, el mail ha sido en iado co ec amen e, po
lo an o, se puede conclui que es a solución es álida y unciona.
Fig. 100. Co eo de eco da o io en el juego de con ol de abajo

Mejo as en una app pa a la ges ión de la gami icación (II) | 97
10.2. P oblemá ica con las e siones
A con inuación, se explica á una de las p oblemá icas que in luye on en la ges ión u
o ganización del iempo del p oyec o, ya que a causa de es e p oblema algunos de los
iempos es ablecidos en los sp in s ue on e asados.
En un momen o dado, du an e el p oyec o, u e que elimina los eposi o ios del Dashboa d
y el del mó il del p o eso . Al ol e a clona lo odo y segui exac amen e los pasos que se
explican en el eposi o io de Classpip sob e la ins alación, al hace ‘npm i’ en ambos
eposi o ios ecién clonados daban un e o como el que se mues a a con inuación.
Fig.101. E o al ealiza ‘npm i’ en el Dashboa d
Al obse a que e a un e o que nunca había is o, decidí in o ma me sob e ello en in e ne .
Donde después de una ex ensa búsqueda, odas las espues as e an muy pa ecidas, la
mayo ía p oponían elimina la caché, elimina la ca pe a node_modules, elimina el a chi o
package.lock.json, y ol e a ejecu a el comando ‘npm i’.
Después de in en a es a opción a ias eces y o as muchas más en ambos p oyec os, el
e o seguía saliendo y siendo el mismo. En ese momen o, decidí p egun a la opinión de un
p o eso e in en a esol e lo, ya que podía se que e a un e o común y que ellos podían e
cuál e a ealmen e la solución.
A con inuación, explica é en de alle cada una de las soluciones que se p oba on has a llega
a la solución co ec a y la que ac ualmen e unciona.
Mejo as en una app pa a la ges ión de la gami icación (II) | 98
10.2.1. P ime a p opues a: Realiza los pasos de ins alación de nue o
La p ime a p opues a su gió du an e la p ime a eunión con el p o eso . El p ime paso que
me sugi ió lle a a cabo ue ejecu a el comando "npm i node-sass", ya que el e o indicaba
algo elacionado con esa dependencia. Pe o el comando no se e minaba de ejecu a
co ec amen e, sal aba un e o muy pa ecido que el del p incipio. Po lo an o, el siguien e
paso que me ecomendó, ue bo a los eposi o ios que daban p oblemas y segui de nue o
los pasos que se indicaban en la guía de classpip, ejecu ando de nue o ambién el comando
“npm i”. Una ez aplicada es a segunda posible solución, el esul ado ue nega i o ambién.
Sal aba exac amen e el mismo e o , y en ese momen o decidimos p egun a la opinión de
o o de los p o eso es que podía ayuda me con mi p oblema.
10.2.2. Segunda p opues a: Desins ala Node comple amen e
La segunda p opues a su gió du an e la segunda eunión pa a soluciona es a p oblemá ica.
Al empeza la eunión y explica le al p o eso odos los pasos que había seguido p e iamen e
pa a soluciona el p oblema sin éxi o, me comen ó que po el ipo de e o que es aba
saliendo, podía se una p oblemá ica de e siones. Po eso, el p ime paso que me
ecomendó ue desins ala comple amen e Nodejs de mi o denado pa a elimina cualquie
ipo de con lic o de e siones.
Pa a la desins alación comple a seguí los siguien es pasos:
1. Limpia la caché con el comando “npm cache clean -- o ce”. Es impo an e ejecu a
es e comando, ya que siemp e que ins alamos un paque e con el comando “npm i”,
npm almacena el caché den o del sis ema de a chi os del usua io.
2. Ve i ica la caché con el comando “npm cache e i y”.
3. Ab i el panel de con ol, elegi la opción de ‘Desins ala un p og ama’ en la sección
‘P og amas’, busca Nodejs en la lis a y desins ala lo.
4. Reinicia el o denado .
5. Busca las di e en es ca pe as que se mues an en la siguien e imagen, y si es án,
elimina las. En el caso de no encon a las, es o almen e no mal, pues o que pueden
exis i o no según la e sión ins alada o dependiendo de o os ac o es ambién.
Fig.102. Lis a de ca pe as a bo a
Mejo as en una app pa a la ges ión de la gami icación (II) | 99
6. Ve i ica las a iables de la u a del en o no y mi a que las e e encias a ‘npm’ o
‘Nodejs’ no exis an.
7. Pa a e i ica que node es á 100% desins alado, ejecu amos el comando “whe e node”
en el e minal. En el caso de que no se haya desins alado co ec amen e, el comando
gene a a la ubicación donde se encuen a el p og ama en Windows. Po lo an o,
hab ía que i a esa ubicación y desins ala lo. En el caso de que odo haya ido bien en
la desins alación, al ejecu a el comando se mos a a un mensaje de ‘No encon ado’,
que indica que node es á o almen e desins alado.
8. Como úl imo paso, einiciamos el o denado pa a e i a cualquie p oblema.
Una ez, eníamos Nodejs comple amen e desins alado, buscamos la e sión que se
ecomienda en la guía de classpip y la ins alamos. En es e caso, se ecomendaba ins ala la
e sión 10.13.0.
Al ealiza la ins alación desc i a p e iamen e, clona los eposi o ios de nue o y desca ga
las dependencias con “npm i”, pa ecía que no daba ningún e o y odo uncionaba
co ec amen e espec o a classpip. Pe o aho a el p oblema que me su gió ue que el p oyec o
en el que es aba abajando en las p ác icas de emp esa, donde ambién u ilizaba Nodejs
como he amien a, dejó de unciona . En ese momen o, me di cuen a de que la solución que
acababa de aplica e a álida solo pa a pode abaja co ec amen e en el p oyec o de
classpip, pe o que en o os p oyec os donde ambién u ilizaba Nodejs, la e sión que acababa
de ins ala no e a álida.
10.2.3. Te ce a p opues a: NVM
La e ce a p opues a y solución inal, su gió a pa i del momen o en que se conoció la
p oblemá ica exac a y se hizo la búsqueda conc e a. Como los di e en es p oyec os en los
que es aba abajando, necesi aban e siones di e en es, busqué alguna he amien a que me
pe mi ie a abaja o cambia la e sión de node según en el p oyec o en el que es u ie a
abajando. Después de busca y p oba algunas opciones, encon é un so wa e llamado
NVM.
El so wa e NVM (Node Ve sion Manage ) pe mi e ins ala y ges iona dis in as e siones de
NodeJS en un o denado , lo que acili a el abajo con p oyec os que equie en e siones
dis in as. Pe mi e in e cambia la e sión de NodeJS que enemos ac i a en un momen o
dado, en e odas las que se hayan ins alado en el sis ema. Además, n m soluciona algunos
p oblemas ípicos que suelen ocu i cuando se abaja con npm y al ins ala dependencias
globales se equie en pe misos de sudo. Po lo an o, con n m no los necesi a ás y el so wa e
unciona á co ec amen e.
La ins alación de es e so wa e ue una a ea bas an e in ui i a que desc ibi é a con inuación.
La opción que elegí ue ins ala es e so wa e usando n m-windows, siguiendo unos pasos
muy ápidos y áciles de segui :
Mejo as en una app pa a la ges ión de la gami icación (II) | 100
1. Accedemos al link del eposi o io que se adjun a a con inuación:
h ps://gi hub.com/co eybu le /n m-windows/ eleases.
2. Desca gamos el a chi o “n m-se up.zip” de la úl ima elease disponible.
3. Ex aemos y ejecu amos el a chi o “n m-se up.exe”.
4. A con inuación, seguimos los pasos de la ins alación y elegimos la con igu ación que
se desee.
5. Y lis o, ya es a ía ins alado.
Si ya enemos una e sión de node ins alada, si ejecu amos el comando “n m lis ”, se lis a án
odas las e siones que engamos ins aladas en ese momen o. Pa a cambia de una a o a,
simplemen e ejecu amos el comando “n m use < e sión que que amos u iliza >”. Y ya se
cambia y es á lis a pa a se usanda.
G acias a es a solución ue posible abaja con e siones de node di e en es, an o en el
p oyec o de classpip, como en el p oyec o que ealizaba en las p ác icas de emp esa. Desde
ese momen o, no ol ie on a sucede e o es elacionados con e siones o con la ins alación
e ónea de dependencias.
Mejo as en una app pa a la ges ión de la gami icación (II) | 101
CAPÍTULO 11. CONCLUSIONES
En es e capí ulo se comen a án las conclusiones inales an o écnicas, como pe sonales,
como la alo ación de los obje i os del p oyec o.
11.1. Conclusiones écnicas
Al comienzo del p oyec o, e a conscien e de que me iba a en en a a a ios e os écnicos
du an e el anscu so de cualquie a de las implemen aciones que se hicie an. Una ez
inalizado el p oyec o, e ec i amen e, ha habido a ios e os écnicos que se han enido que
supe a . Tal y como se desc ibe en el an e io capí ulo, uno de ellos ue la p oblemá ica con
las e siones o la p oblemá ica de la mecánica de en ío de co eos elec ónico. Pe o g acias
a habe los supe ado, he ap endido écnicas, he amien as o so wa es nue os que no sabía
an es, y es o ha hecho c ece mi conocimien o écnico en g an pa e. Es e conocimien o,
segu amen e, me sea de u ilidad en u u os p oyec os en los que abaje en el mundo labo al.
También, uno de los e os en la p ime a ase del p oyec o ue en ende odo el ecosis ema de
Classpip que ya es aba implemen ado po es udian es de p omociones p e ias. Fue un e o
que con iempo y con análisis, pudimos acaba de supe a lo, aunque ambién pa e de la
ayuda nos la p opo ciona on nues os u o es. En nues o caso, e a necesa io amilia iza se
con el código y la lógica que se había seguido en los juegos, pues o que íbamos a mig a
g an pa e de algunas uncionalidades ya exis en es. Po lo an o, en ende el código que
habían hecho o as pe sonas, adap a lo y mejo a lo a nues a mane a, ue ambién una de
las cosas que nos hizo ap ende mucho.
Como al, los lenguajes de p og amación no ue on un g an p oblema, pues o que ya e an
amilia es de asigna u as p e ias que se habían hecho du an e algunos cu sos en la
uni e sidad. Así que, se pod ía deci que hemos mejo ado nues as habilidades con es os
lenguajes, g acias a habe abajado con ellos mucho más du an e es os meses.
11.2 Valo ación de los obje i os y el plan de abajo
Los obje i os iniciales se han cumplido, como se ha is o e lejado en la memo ia. Aunque
du an e el anscu so del p oyec o se han ido añadiendo cosas que eíamos in e esan es
pa a el p oyec o y desca ando o as que ya no encajaban con la o ma que es aba omando
el p oyec o.
La me odología de o ganización que hemos u ilizado (Sc um), ha sido de g an ayuda pa a
o ganiza nos con el iempo y las a eas po hace . Sob e odo, po que ambos es ábamos
ealizando las p ác icas de emp esa du an e odo es e pe iodo. Po lo an o, es una
me odología que ecomiendo a u u os es udian es que quie an pa icipa en el p oyec o de
Classpip.

Mejo as en una app pa a la ges ión de la gami icación (II) | 102
A ni el pe sonal, es oy con en a con el abajo que he ealizado, con odo lo que he ap endido
du an e es os meses y con habe cumplido con los obje i os iniciales que nos plan eamos.
En elación con el abajo en equipo, ha sido un place abaja con Suhail Chaib, mi
compañe o, pues o que ha sido una pe sona abajado a, empá ica y que me ha apoyado en
odo momen o. Conside o que hemos abajado muy bien en equipo, nos hemos acili ado el
abajo el uno al o o y no hemos enido ningún p oblema en ningún momen o. Po eso,
concluyo con que ha sido un place pa a mí abaja con él y ealiza mi abajo de in de
g ado.
11.3. Valo ación pe sonal
Te mino mi pa icipación en es e p oyec o con buenas sensaciones, ha sido una expe iencia
muy buena y con la que he dis u ado. Me he sen ido muy cómoda abajando en un p oyec o
como es e, donde la mayo pa e del abajo es algo que ealmen e dis u o hace , que es
p og ama . G acias a habe lo expe imen ado, me sien o con más ganas de dedica me a algo
pa ecido en mi u u o labo al, aunque soy conscien e de lo mucho que queda po ap ende ,
es e es el campo ecnológico que me en usiasma.
Tengo la sensación de habe mejo ado como desa ollado a, g acias a los e os que se han
p esen ado y he solucionado en su momen o. Empecé a p og ama con asigna u as que se
ealizan en la uni e sidad, ap endiendo poco a poco de que a el mundo de la p og amación.
Y e mino sabiendo lo g ande que es es e campo y lo mucho que queda po ap ende , pa a
pode c ece como desa ollado a en un u u o. Pe o Classpip ha sido el empujón pa a pode
segui ap endiendo y p ac icando en un u u o.
Quie o ag adece la ayuda que nos ha p opo cionado nues o u o Miguel a lo la go del
anscu so del p oyec o. Habe abajado en una pa e de lo que es Classpip me eno gullece,
y espe o que siga c eciendo y enga un u u o magní ico.
Mejo as en una app pa a la ges ión de la gami icación (II) | 103
REFERENCIAS
[1] Miguel Vale o Ga cía, Roc Mesegue Palla és - Reposi o ios de Classpip en Gi hub:
h ps://gi hub.com/classpip
[2] Business news daily – In o mación sob e la me odología SCRUM:
h ps://www.businessnewsdaily.com/4987-wha -is-agile-sc um-me hodology.h ml
[3] T ello: h ps:// ello.com/es
[4] S acko e low - In o mación ele an e pa a soluciona el p oblema del en ío de
co eos elec ónico con NodeMaile :
h ps://s acko e low.com/ques ions/45478293/use name-and-passwo d-no -
accep ed-when-using-nodemaile
[5] In o mación sob e la p oblemá ica en e Gmail y Nodemaile en el año 2022:
h ps://wpmailsm p.com/gmail-less-secu e-apps/
[6] In o mación sob e desins ala Nodejs de Windows comple amen e:
h ps://es.ace olima.com/como-elimina -po -comple o-node-js-de-windows/
[7] In o mación sob e la ins alación de NVM:
h ps://midu.de /como-ins ala -node-en-mac-y-windows/