Juego de avatares para una herramienta de gamificación
Abstract
The development of this project is based on the contribution of a module to a gamification application for education called Classpip, which is composed of several modules. All the projects that compose Classpip have been implemented following a common software architecture, developed with different open source tools. The main objective of this project is to achieve the development of a game for avatars creation. The teacher manages the avatars game of the different classes from the mobile device, to be able to launch the game during the class. With the material selected by the teacher, the student will dispose from enough material to create the avatar with different elements, fulfilling his will. The concept base of Classpip is the gamification, a tool that uses scores, levels, rewards and other dynamics that games use for any non-recreational environment. The main areas in which it is used are at academic and at work, although the objectives differ from one environment to the other, the techniques are very similar. A survey applied to these two contexts reflects the impact of gamification and all the aspects that it enhances. To give an idea about how Classpip was born, it is explained all the architecture from which all the modules begin. A contribution of different technologies external to the application are needed in order to be able to build a complete project, since it does not extend only to a web platform, but has also been versioned for tablets and smartphones. Once Classpip has been introduced, it is necessary to introduce new notions such as avatar. Conceiving an avatar is not a simple thing, moreover if you do not have a theoretical basis of what it is, it’s even more difficult. That is the reason why it is explained where this idea comes from, which is its purpose and what applications are currently used for avatars. From the applications that are in use it today, the most attractive ones are collected to be able to develop something similar that can capture the public of Classpip. When the objectives to meet have been set is much easier to begin building the module. First we talk about the functions that we want to get implemented by establishing a design (attached to modifications) for each of them. About these functions and the design established, the real implementation is performed, giving details on all the concepts and by last the final result is presented, specifying both the design and the functions with their respective mechanics. Essentially, this document tries to analyze and explain all the features played in the avatars game. Furthermore, the complete module is evaluated in terms of design, functions and how intuitive it is to guide any user regardless of his experience with technology.
Full text
TREBALL DE FI DE GRAU
T´
ITULO DEL TFG: Juego de a a a es pa a una he amien as de gami icaci´
on
TITULACI ´
ON: G ado en Ingenie ´ıa de Sis emas Ae oespaciales,
menci´
on Ae ona egaci´
on
AUTOR: E a Clemen e Escoba
DIRECTORES: Miguel Vale o Ga c´ıa
Roc Mesegue Palla `
es
FECHA: 5 de sep iemb e de 2019
T´ı ulo: Juego de a a a es pa a una he amien as de gami icaci´
on
Au o : E a Clemen e Escoba
Di ec o es: Miguel Vale o Ga c´
ıa
Roc Mesegue Palla `
es
Fecha: 5 de sep iemb e de 2019
Resumen
El desa ollo de es e p oyec o se basa en la apo aci´
on de un m´
odulo a una aplicaci´
on de
gami icaci´
on pa a la educaci´
on llamada Classpip, que es ´
a compues a de a ios m´
odulos.
Todos los p oyec os que o man Classpip se han implemen ado siguiendo una a qui ec u a
de so wa e com´
un, desa ollada con di e en es he amien as de c´
odigo abie o.
El obje i o de es e p oyec o es el desa ollo de un juego des inado a la c eaci´
on de a a a-
es. El docen e ges iona el juego de a a a es de las di e en es clases desde el disposi i o
m´
o il, pa a pode pone en ma cha el juego du an e la clase. Con el ma e ial seleccionado
po el p o eso , el alumno end ´
a a su dispoci´
on ma e ial su icien e pa a c ea el a a a con
di e en es elemen os y que sea de su ag ado.
El concep o base de Classpip es la gami icai´
on, una he amien a que u iliza pun uaciones,
ni eles, ecompensas y o as din´
amicas que usan los ideojuegos pa a cualquie ´
ambi o
no l´
udico. Los p incipales ´
ambi os en los que se u iliza son el acad´
emico y el labo al, que
aunque di ie en los obje i os de un en o no a o o, las ´
ecnicas son muy simila es. Un
es udio aplicado a es os dos con ex os e leja el impac o de la gami icaci´
on y los aspec os
que ´
es a po encia.
Pa a da una idea c´
omo naci´
o Classpip se explica oda la a qui ec u a de la que pa en
odos los m´
odulos. Se necesi a un apo e de di e en es ecnolog´
ıas ex e nas a la aplica-
ci´
on con el in de pode hace un p oyec o comple o, ya que no se ex iende s´
olo a una
pla a o ma web, sino que ambi´
en ha sido e sionada pa a able s y sma phones.
Una ez se ha in oducido Classpip, se ´
a necesa i´
o segui p esen ado nociones nue as
como la de a a a . Concebi un a a a no es algo sencillo y menos cuando no se iene una
base e´
o ica de qu´
e es. Po eso se especi ica de d´
onde p o iene es a idea, qu´
e inalidad
iene y qu´
e aplicaciones la u ilizan m´
as ac ualmen e. De las aplicaciones que la u ilizan
hoy en d´
ıa se ecogen las m´
as a ac i as pa a pode llega a desa olla algo simila que
pueda cap a al p´
ublico de Classpip.
Teniendo los obje i os a cumpli es mucho m´
as sencillo comenza a cons ui el m´
odulo.
P ime o se habla de las unciones que quie en implemen a se es ableciendo un dise˜
no,
suje o a modi icaciones, pa a cada una de ellas. Sob e es as unciones y el dise˜
no se
desempe˜
na la implemen aci´
on eal, dando de alle sob e odos los concep os y inalmen e
se p esen a el esul ado inal, especi icando an o dise˜
no como unciones con su espec-
i a mec´
anica.
Esencialmen e, es e documen o a a de analiza y explica odas las uncionalidades que
desempe˜
na el juego de a a a es. Adem´
as se e al´
ua el m´
odulo comple o en cues iones
de dise˜
no, unciones y lo in ui i o que es pa a o ien a lo a cualquie usua io independien-
emen e de su expe iencia con la ecnolog´
ıa.
Ti le : A a a game o a gami ica ion ool
Au ho : E a Clemen e Escoba
Ad iso s: Miguel Vale o Ga c´
ıa
Roc Mesegue Palla `
es
Da e: Sep embe 5, 2019
O e iew
The de elopmen o his p ojec is based on he con ibu ion o a module o a gami ica ion
applica ion o educa ion called Classpip, which is composed o se e al modules. All he
p ojec s ha compose Classpip ha e been implemen ed ollowing a common so wa e
a chi ec u e, de eloped wi h di e en open sou ce ools.
The main objec i e o his p ojec is o achie e he de elopmen o a game o a a a s
c ea ion. The eache manages he a a a s game o he di e en classes om he mobile
de ice, o be able o launch he game du ing he class. Wi h he ma e ial selec ed by he
eache , he s uden will dispose om enough ma e ial o c ea e he a a a wi h di e en
elemen s, ul illing his will.
The concep base o Classpip is he gami ica ion, a ool ha uses sco es, le els, ewa ds
and o he dynamics ha games use o any non- ec ea ional en i onmen . The main a eas
in which i is used a e a academic and a wo k, al hough he objec i es di e om one
en i onmen o he o he , he echniques a e e y simila . A su ey applied o hese wo
con ex s e lec s he impac o gami ica ion and all he aspec s ha i enhances.
To gi e an idea abou how Classpip was bo n, i is explained all he a chi ec u e om which
all he modules begin. A con ibu ion o di e en echnologies ex e nal o he applica ion
a e needed in o de o be able o build a comple e p ojec , since i does no ex end only o
a web pla o m, bu has also been e sioned o able s and sma phones.
Once Classpip has been in oduced, i is necessa y o in oduce new no ions such as
a a a . Concei ing an a a a is no a simple hing, mo eo e i you do no ha e a heo e ical
basis o wha i is, i ’s e en mo e di icul . Tha is he eason why i is explained whe e his
idea comes om, which is i s pu pose and wha applica ions a e cu en ly used o a a a s.
F om he applica ions ha a e in use i oday, he mos a ac i e ones a e collec ed o be
able o de elop some hing simila ha can cap u e he public o Classpip.
When he objec i es o mee ha e been se is much easie o begin building he module.
Fi s we alk abou he unc ions ha we wan o ge implemen ed by es ablishing a de-
sign (a ached o modi ica ions) o each o hem. Abou hese unc ions and he design
es ablished, he eal implemen a ion is pe o med, gi ing de ails on all he concep s and
by las he inal esul is p esen ed, speci ying bo h he design and he unc ions wi h hei
espec i e mechanics.
Essen ially, his documen ies o analyze and explain all he ea u es played in he a a a s
game. Fu he mo e, he comple e module is e alua ed in e ms o design, unc ions and
how in ui i e i is o guide any use ega dless o his expe ience wi h echnology.
A mi amilia,
po habe hecho posible que pueda llega a se lo que siemp e quise se
A mis compa˜
ne os de piso,
po habe se con e ido en amilia y po hace de un luga ex a˜
no un hoga
A Anna Ru´
ız,
una g an amiga y uno de mis pun os de apoyo m´
as ue es du an e oda la ca e a
A Miguel y Roc
po habe in e ido iempo en aconseja me y guia me du an e odo es e abajo
´
INDICE GENERAL
INTRODUCCI ´
ON ................................. 1
CAP´
ITULO 1.LA GAMIFICACI ´
ON . . . . . . . . . . . . . . . . . . . . . . 3
1.1. Qu´
e es gami icaci´
on .............................. 3
1.2. Gami icaci´
on en el sec o labo al ....................... 4
1.2.1. P oduc i idad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3. Gami icaci´
on en las aulas ........................... 5
1.3.1. Di e si´
on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.2. Mo i aci´
on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.3. Mejo a del ap endizaje . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4. Aplicaciones m´
o iles pa a la gami icaci´
on . . . . . . . . . . . . . . . . . . 7
CAP´
ITULO 2.INTRODUCCI ´
ON AL PROYECTO . . . . . . . . . . . . . 9
2.1. A qui ec u a del P oyec o ........................... 9
2.1.1. He amien as ex e nas . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2. Es uc u a de Classpip ............................. 12
2.2.1. Aplicaci´
on m´
o il . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.2. Panel de adminis ado . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.3. A qui ec u a o ien ada a se icios . . . . . . . . . . . . . . . . . . . 15
2.3. Mo i aci ´
on .................................... 15
2.4. Obje i os del m´
odulo .............................. 16
CAP´
ITULO 3.ESTADO DEL ARTE . . . . . . . . . . . . . . . . . . . . . . 17
3.1. Qu´
e son a a a es ................................ 17
3.2. He amien as pa a a a a es . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.1. Voki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.2. Bi moji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.3. Classdojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.3. Aspec os dis inguidos ............................. 21
´
INDICE DE TABLAS
INTRODUCCI ´
ON
La ecnolog´
ıa es una he amien a de la que cada d´
ıa se hace m´
as uso. Adem´
as las nue as
econolog´
ıas de hoy en d´
ıa es ´
an en cons an e ac ualizaci´
on, po lo que a eces se quedan
´
apidamen e obsole as. La in asi´
on del gigan e ecnol´
ogico es al que desde hace unos
a˜
nos ha pasado a es a al se icio del ap endizaje.
Desde emp ana edad los ni˜
nos ya in e ac ´
uan con able s y sma phones, po lo que in-
oduci la ecnolog´
ıa en las aulas no ha causado un g an impac o pa a ellos. Sin emba go
la b echa digi al en e los es udian es de las nue as gene aciones y los docen es es muy
g ande oda ´
ıa, po an o muchos docen es end ´
an que especializa se y conoce c´
omo
aplica el uso de las nue as ecnolog´
ıas en la educaci´
on.
Una de las he amien as ecnol´
ogicas en ocadas a un ambien e de ap endizaje es la Ga-
mi icaci´
on. U iliza las mismas din´
amicas que los juegos aplicadas al ambien e acad´
emico,
aplica pun uaciones y odo ipo de ecompensas en compe iciones indi iduales y g upa-
les y la in enci´
on de es e ´
u il es man ene la mo i aci´
on. Qu´
e es la gami icaci´
on, c´
omo
unciona, qu´
e aplicaciones exis en y qu´
e consecuencias iene u iliza la gami icaci´
on son
cues iones sob e las que habla en p o undidad en el cap´
ı ulo 1, donde adem´
as de es-
as cues iones se apo an in o maci´
on y da os de es udios eales elacionados con su
impac o.
El p op´
osi o de es e p oyec o es hace un apo e a Classpip, una aplicaci´
on de gami ica-
ci´
on desa ollada con en oque a la educaci´
on. Es a aplicaci´
on es un p oyec o colabo a i o,
desa ollado po di e sos es udian es de la EETAC. Classpip es ´
a compues o po di e en-
es piezas, que son m´
odulos au ´
onomos c eados de mane a independien e que siguen
una misma l´
ınea de desa ollo. Pues o que es e p oyec o es una pieza m´
as que se suma
a la aplicaci´
on, la pla a o ma ya es ´
a implemen ada, con una a qui ec u a de so wa e y
unas ecnolog´
ıas de desa ollo es ablecidas. Las he amien as con las que se ha abajado
pa a es e p oyec o o man pa e de la ecnolog´
ıa mode na de desa ollo pa a aplicaciones
en in e ne . Todo lo elacionado con la implemen aci´
on de Classpip y la l´
ınea de desa olo
que siguen los di e en es m´
odulos que la componen apa ece en el cap´
ı ulo 2.
La inalidad es desa olla un m´
odulo o ien ado a la c eaci´
on de a a a es. La aplicaci´
on de
Classpip, p e iamen e al desa ollo de es e m´
odulo ya dispon´
ıa de a a a es, pe o en´
ıan
p ede e minados con cada ipo de usua io. Con el apo e de un juego de a a a es, no s´
olo
se apo a c ea i idad a la aplicaci´
on, sino que ambi´
en se busca la mo i aci´
on del alumno,
que pa a pode deco a el a a a end ´
a que cumpli con los equisi os es ablecidos po
el docen e. El docen e ges iona ´
a el ma e ial pa a el a a a y concede ´
a los pe misos de
pe sonalizaci´
on a los alumnos. Mien as an o los alumnos end ´
an que es a al an o de
cumpli con los equisi os es ablecidos si quie en saca le odo el pa ido al juego.
Las secciones de adminis aci´
on que es ´
an disponibles desde el usua io del docen e se
han dise˜
nado e implemen ado de mane a que el mecanismo pa a c ea el juego de a a a-
es sea sencillo. Las ideas pa a implemen a y dise˜
na es os apa ados pueden e se con
de alle en el cap´
ı ulo 4.
El documen o se ha o ganizado de al mane a que se pueda segui el hilo sob e el que se
ha desa ollado el p oyec o. Pa a empeza es p imo dial la in oducci´
on a la Gami icaci´
on,
que es el concep o en o no al que gi a el p oyec o. O o de los concep os con mayo
impo ancia es Classpip y las he amien as de so wa e que han pe mi ido su desa ollo.
1
2 Juego de a a a es pa a una he amien as de gami icaci´
on
Adem´
as se in oduce la idea de a a a en el cap´
ı ulo 3, a pa i de d´
onde nace es e nue o
m´
odulo. Po ´
u ilmo se hace incapi´
e en el desa ollo del juego de a a a es, incluyendo
de alles de so wa e y he amien as ex e nas.
Pa a culmina , con expec a i as de pode mejo a en un u u o, se ecogen da os a ce ca
de una e aluaci´
on de la aplicaci´
on. Qu´
e an in ui i a es, si el dise˜
no es ap opiado pa a el
p´
ublico al que a di igida son algunas de las cues iones que se exponen en la e aluaci´
on.
CAP´
ITULO 1. LA GAMIFICACI ´
ON
El c ecien e uso de sma phones, able s y o os muchos disposi i os ecnol´
ogicos en e
los ni˜
nos ha p o ocado que los m´
e odos de ense˜
nanza adicionales queden algo obsole-
os.
La b echa digi al que se ha abie o en e docen es y es udian es es e iden e, y ha lle ado
a combina la educaci´
on con la ecnolog´
ıa. El obje i o es implica a una nue a gene aci´
on
de es udian es digi ales pa a hace las clases m´
as mo i ado as. Los ni eles, pun os, an-
kings, las me as y obje i os o c ea equipos pa a el desa ollo de a eas como si de un
ideojuego se a ase, son m´
e odos pa a gami ica un aula.
Teniendo en cuen a es a nue a necesidad de con e i el ap endizaje en una especie de
juego nace Classpip, una aplicaci´
on del Depa amen o de A qui ec u a de Compu ado es
de la Uni e sidad Poli ´
ecnica de Ca alu˜
na desa ollada po es udian es uni e si a ios. La
aplicaci´
on es accesible desde cualquie o denado , disposi i o m´
o il o able .
El obje i o de es e p oyec o es c ea un juego de a a a es que se inco po a a Classpip
pa a que los usua ios puedan ene una ep esen aci´
on g ´
a ica en la aplicaci´
on. De es a
mane a se puede apo a un oque m´
as pe sonal al juego.
1.1. Qu´
e es gami icaci´
on
La gami icaci´
on es una ´
ecnica que in eg a es a egias de juego en di e en es ´
ambi os no
l´
udicos, y iene como obje i o mo i a y ameniza las a eas lle adas a cabo en dichos
´
ambi os. Los sec o es que han implemen ado mayo i a iamen e es a ´
ecnica son: el labo-
al y el acad´
emico. La gami icaci´
on en los negocios po encia aspec os psicol´
ogicos den o
de los p ocesos emp esa iales, mien as que en la educaci´
on hace del ap endizaje algo
di e ido y lle ade o. Median e la mo i aci´
on, se consigue un desa ollo e icien e de las
a eas lle adas a cabo po los suje os que abajan con he amien as de gami icaci´
on. Las
ecompensas, pun uaciones y los ankings pe mi en da econocimien o, incen i ando as´
ı
el ´
animo de supe aci´
on.
Pa a man ene la expec aci´
on de los jugado es, es necesa io es a cons an emen e in-
no ando en el juego. Compe iciones, insignias y p i ilegios son algunos elemen os que
pueden u iliza se. Las din´
amicas de juego se basan en ac i idades con una de e mina-
da es uc u a, o ien adas a un p op´
osi o u o o. Dichas ac i idades hay que dinamiza las,
ambien a las pa a que esul en ag adables y di e idas de ca a al p´
ublico.
Las compe iciones se pueden u iliza como m´
e odo de e aluaci´
on cada cie o iempo.
Pues o que mues an un anking de pun uaci´
on, queda econocido el m´
e i o de los compe-
ido es y conlle a a ecompensa a los mejo es posicionados. Es a ecompensa ob enida
es el es el incen i o pa a despe a la mo i aci´
on del usua io que, si su e e ec o, implica
la p og esi´
on de las cualidades del indi iduo.
Pa a ene una idea menos abs ac a, pongamos un ejemplo. El docen e puede asigna
pun os a los es udian es po di e en es mo i os como pun ualidad o buen compo amien-
o. La suma de odos es os pun os du an e un pe iodo de iempo lle a a clasi ica a los
alumnos den o de un anking. Los es p ime os pod ´
an op a a di e en es p i ilegios co-
mo sen a se con el compa˜
ne o que quie an en clase o pode epe i una p egun a de
3
4 Juego de a a a es pa a una he amien as de gami icaci´
on
ex´
amen.
En los siguien es apa ados se exponen di e en es en o nos en los que puede aplica se
la gami icaci´
on.
1.2. Gami icaci´
on en el sec o labo al
El mundo emp esa ial y el sec o docen e son los p incipales consumido es de m´
e odos
de gami icaci´
on, sin emba go los obje i os inales son di e en es.
En los ´
ul imos a˜
nos g andes emp esas de odo el mundo han inco po ado la gami icaci´
on
pa a pode alcanza a ios obje i os, ya sea pa a mejo a la e iciencia de los abajado es,
aumen a las en as de un p oduc o, op imiza los p ocesos de onboa ding o mejo a la
o maci´
on del pe sonal, es una he amien a que puede esul a ´
u il en mul iples ´
a eas.
Buscando in o maci´
on y documen andose sob e la gami icaci´
on, no hay a ´
ıculo que de
una mala opini´
on sob e es a he amien a, pe o pa a i un poco m´
as all´
a es p e e ible
sabe la opini´
on di ec a de la pe sona que ealmen e abaja en un en o no gami icado.
El es udio ”The 2018 Gami ica ion A Wo k” de Talen MLS ecoge encues as a di e en es
usua ios de gami icaci´
on pa a que podamos isualiza po qu´
e es endencia.
Como esul ado gene al, un 80% de los en e is ados se di ie e aplicando la gami ica-
ci´
on en sus a eas del abajo. Den o de es e en o no se u ilizan las clasi icaciones po
ni eles, pun os, insignias, ecompensas y ablas de clasi icaci´
on. De odo es o lo alo ado
como m´
as mo i ado ue on las clasi icaciones po ni eles, mien as que lo peo pun uado
ue on las ecompensas. La clasi icaci´
on apa ece en el siguien e g ´
a ico, donde adem´
as
de clasi ica de mejo al peo pun uado, a la de echa apa ece la alo aci´
on sob e 5 que ha
ecibido cada elemen o.
Figu a 1.1: Ranking de elemen os de gami icaci´
on
Lo que las emp esas p e enden es que la gami icaci´
on enga un impac o en sus emplea-
dos, al que su p oduc i idad y mo i aci´
on aumen e, as´
ı que a con inuaci´
on e emos qu´
e
CAP´
ITULO 1. LA GAMIFICACI ´
ON 5
es lo que opinan sob e es o los que han espondido a las encues as pa a es e es udio.
1.2.1. P oduc i idad
La de inici´
on de p oduc i idad es la can idad de abajo que un empleado es capaz de
ealiza en un de e minado pe ´
ıodo de iempo. La opini´
on subje i a de los usua ios, al y
como e lejan los g ´
a icos que apa ecen a con inuaci´
on es que la gami icaci´
on les hace
m´
as p oduc i os.
Figu a 1.2: Impac o po enciado de la p oduc i idad
No es so p enden e que al hace de una a ea un juego, sea m´
as amena, y es que el
87% de los suje os que han pa icipado en el es udio de Talen MLS han a i mado que
la gami icaci´
on s´
ı que ha po enciado su p oduc i idad. En un es udio simila del 2014, el
79% ya a i maban es a cues i´
on,po an o a medida que la gami icaci´
on se a ab iendo
paso en el mundo labo al los empleados se comp ome en m´
as con la causa.
1.3. Gami icaci´
on en las aulas
En la educaci´
on odo lo que se p e ende es man ene mo i ado al es udian e pa a que la
a ea de es udia no suponga un es ue zo. Hace un examen o hace los debe es dejan de
se a eas se ias y abu idas. Aplicando la gami icaci´
on, como si de un juego se a ase,
iene como consecuencia consegui una ecompensa pa a in en a es a en e los mejo-
es clasi icados del anking. Todas las din´
amicas de juego que se aplican, o ecen como
inalidad lle a al alumno a implica se en el juego pa a comple a sus obje i os educa i os.
Pa a alo a la expe iencia del alumnado, se iene como e e encia un a ´
ıculo que es udia
el uso de la gami icaci´
on en la ense˜
nanza supe io , conc e amen e en la Asigna u a de
De echo Romano de la Uni e sidad Au ´
onoma de Mad id.
Pa a omen a la a enci´
on en las clases Magis ales y la mo i aci´
on pa a el ap endizaje de
la asigna u a Se lle a on a cabo dos ipos de ac i idades, una de ellas con la he amien a
Kahoo , du an e el inal de las clases Magis ales y o a de ellas es la c eaci´
on de un Juego
a a ´
es de un Moodle pa a hace un epaso inal de la asigan u a de ca a al Examen inal.
6 Juego de a a a es pa a una he amien as de gami icaci´
on
Figu a 1.3: P egun a de e aluaci´
on ealizada con Kahoo
Ambas p uebas ienen como obje i o mejo a el ap endizaje, pa a as´
ı ene un m´
e odo de
e aluaci´
on complemen a io a las p uebas cali ica o ias y de e aluaci´
on. Pe o, ¿Cu´
al es el
obje i o en o no al que gi a es a in e igaci´
on? Pues bien hay a ios es udios aplicando
la gami icaci´
on en di e en es ca ego ´
ıas de educaci´
on, pe o los da os que apo aban e an
escasos. As´
ı que el p op´
osi o de ´
es e es udio es comp oba emp´
ı icamen e cu´
ales e an
los e ec os de es as nue as ´
ecnicas de ap endizaje.
1.3.1. Di e si ´
on
A la p egun a ”¿Ha sido di e ido compe i con o os?”, un 65% de es udian es es ´
a com-
ple amen e de acue do, o o 31% es ´
a m´
as bien de acue do, mien as que s´
olo hay un
es udian e que ha espondido es a m´
as bien en desacue do y o o que se mues a neu-
al.
Figu a 1.4: Respues as a la p egun a ”¿Ha sido di e ido compe i con o os?”@
Los esul ados ecogidos mues an que la di e si´
on es uno de los ac o es p incipales
que lle an al es udian e a in oluc a las he amien as de gami icaci´
on. Da un a˜
nadido de
di e si´
on iene un e ec o que disminuye la ensi´
on del ambien e uni e si a io, que suele
se mucho m´
as se io que el ambien e de cualquie es udio de educaci´
on in e io .
1.3.2. Mo i aci´
on
Con es ando la p egun a “El uso de Kahoo me ha mo i ado a asis i a clase”, un 38,4%
delos encues ados es ´
a comple amen e de acue do, un 18,2% de los pa icipan es es ´
an
CAP´
ITULO 1. LA GAMIFICACI ´
ON 7
m´
as bien de acue do, mien as que un 38,2% se man iene neu al y un 5,5% es ´
a en
desacue do.
Respec o a la mo i aci´
on, los di e en es da os ecogidos e lejan que una mayo ´
ıa de
los alumnos ha conseguido sen i se m´
as mo i ada pa a asis i a clase y man ene una
mayo an enci´
on. Dependiendo de la pe sona el ni el de mo i aci´
on e a mayo o meno ,
a algunos les p opo cionaba un n´
ı el de mo i aci´
on al o mien as que en o os no su ´
ıa
e ec o.
1.3.3. Mejo a del ap endizaje
La a i maci´
on e e ida al ap endizaje, “C eo que Kahoo ha mejo ado mi ap endizaje de
la ma e ia De echo Romano”, es apoyada po el 32,7% que es ´
an comple amen e de
acue do y po un 41,8% que dice es a m´
as bien de acue do, con as ando con un 3,6%
que opina que es ´
a m´
as bienen desacue do y un 20% que se man iene neu al espec o
a lacues i´
on.
La mayo ´
ıa de los es udian es a i ma habe log ado una mejo a en las ´
ecnicas de ap en-
dizaje de De echo Romano g acias a las he amien as de gami icaci´
on. Hay que ene en
cuen a que es os esul ados se basan en la expe iencia pe sonal del usua io, no en los
esul ados e lejados po las p uebas de e aluaci´
on, mo i o po el que se p e ende hace
un es udio a pos e io i de la e oluci´
on basado en las p uebas de e aluaci´
on pa a e el
e ade o impac o de la e oluci´
on.
Concluyendo con los esul ados gene ales, la expe iencia de in oduci una aplicaci´
on de
gami icaci´
on en la ma e ia de De echo Romano, ha esul ado una expe iencia di e ida,
mo i ado a e incluso ha conseguido mejo a el ap endizaje de los usua ios.
1.4. Aplicaciones m´
o iles pa a la gami icaci´
on
Desde que el uso de la gami icaci´
on se ha ido ex endiendo, han apa ecido nume osas
aplicaciones pa a m´
o il que se ´
ıan como he amien a de gami icaci´
on. P ime o habla-
emos de Kahoo , la aplicaci´
on u ilizada en el expe imen o de la asigna u a de De echo
Romano del que hemos hablado en el apa ado an e io . Despu´
es p esen a emos A i i y,
una pla a o ma que se u iliza como he amien a de gami icaci´
on en emp esas.
•Kahoo
Kahoo es una he amien a de gami icaci´
on que u iliza pa a ap ende y epasa
concep os de cualquie ipo de una mane a muy en e enida. Pun ua no s´
olo el
ace a la espues a co ec a, sino ambi´
en la elocidad con laque se esponde,
pun uando mucho m´
as al o con o me menos iempo se haya a dado en esponde .
De mane a an´
aloga, si se come e un allo la pun uaci´
on es a y cuan o meno sea
el iempo en come e el allo, m´
as son los pun os nega i os. La inalidad de es o es
c ea un anking po pun os en el que apa ezcan odos los pa icipan es.
Cualquie pe sona puede c ea ¨
un Kahoo ”, un es de p egun as cualesquie a. Pa a
hace que o as pe sonas pa icipen en el es c eado Kahoo asigna un n´
ume o PIN
al es c eado, pa a que ´
es e apa ezca al in oduci lo en la aplicaci´
on m´
o il.
14 Juego de a a a es pa a una he amien as de gami icaci´
on
cen e. Sin emba go un es udian e no puede e la lis a de alumnos de oda la clase
ni mucho menos in e ac ua con ´
es a.
Figu a 2.5: Apa ado Mi Pe il Figu a 2.6: Localizaci´
on Escuela
•Adminis ado
El adminis ado de la escuela iene el mismo men´
u que los dos oles explicados an-
e io men e, pe o ´
es e iene le posibilidad de e odos los es udian es de la escuela
egis ados en la aplicaci´
on (ya no de una sola clase) y adem´
as ambi´
en puede e
la lis a de docen es del cen o.
(a) Men´
u inicio (b) Apa ado Mi Pe il (c) Lis a de alumnos de cla-
se
Figu a 2.7: Vis a aplicaci´
on m´
o il pa a Docen e
2.2.2. Panel de adminis ado
Ya hemos is o las uncionalidades que iene el panel del adminis ado en la aplicaci´
on
m´
o il, pe o el adminis ado , pues o que su papel conlle a a eas di e en es a las ac i i-
CAP´
ITULO 2. INTRODUCCI ´
ON AL PROYECTO 15
dades que se ealizan en clase y le pueden lle a bas an e iempo, es m´
as c´
omodo que
acceda desde la e si´
on pa a o denado , o lo que llamamos ”dashboa d”.
Figu a 2.8: Dashboa d de Classpip
2.2.3. A qui ec u a o ien ada a se icios
La a qui ec u a o ien ada a se icios es uno de los componen es m´
as impo an es de la
aplicaci´
on. La aplicaci´
on de Loopback apo a una REST API que nos pe mi e adminis a
y ealiza ope aciones con la base de da os. En la API se exponen los modelos que se
an c eando y pa a cada uno de ellos con iene ope aciones pos , ge , pa ch y odo ipo de
unciones de p o ocolo h p.
2.3. Mo i aci´
on
El mo i o de desa olla un m´
odulo de a a a es pa a la aplicaci´
on iene del p ime blo-
que que u´
e desa ollado pa a Classpip. Fe ´
an es el alumno que apo ´
o el desa ollo de
la a qui ec u a pa a la aplicaci´
on, sen ando las bases y componen es necesa ios pa a
cons ui la pla a o ma de gami icaci´
on.
En su memo ia, Fe an explica qu´
e es un P oduc o Viable M´
ınimo (MVP, del ingl´
es Mini-
mum Viable P oduc ), un p oduc o con una se ie de ca ac e ´
ıs icas hechas pa a sa is ace
al clien e y p opo ciona una eacci´
on posi i a pa a un u u o desa ollo del mismo. Todo
es o o ma pa e de la es a egia a segui pa a come cializa un p oduc o. Las ca ´
ac e ´
ıs i-
cas que de inen al MVP es ´
an en ocadas a los clien es que se p e enden cap a , as´
ı el
p oduc o end ´
a una mayo acogida.
Uno de los equisi os que se de inen en ese MVP es que cada alumno debe ´
ıa pode
cambia su a a a , po an o de aqu´
ı nacela necesidad de c ea un juego de a a a es pa a
la clase. En los p ime os p oyec os desa ollados pa a Classpip ya hab´
ıa a a a es, pe o
e an una simple o o. Se p e ende que el a a a sea algo m´
as que eso, el alumno pod ´
a
cons ui lo den o de la aplicaci´
on y dependiendo de su pa icipaci´
on en clase, end ´
a
opci´
on a pe sonaliza lo m´
as o menos. La inalidad del a a a es da le juego a la aplicaci´
on
de la misma mane a que lo hace cualquie o o m´
odulo pe o con uncionalidades dis in as.
16 Juego de a a a es pa a una he amien as de gami icaci´
on
2.4. Obje i os del m´
odulo
Un paso p e io al desa ollo del p oyec o es plan ea una se ie de obje i os. En es e caso
el obje i o del p oyec o es implemen a una aplicaci´
on m´
o il pa a apo a a Classpip un
juego de a a a es. Las uncionalidades que p e enden desa olla se, son las lis adas a
con inuaci´
on:
•C ea clases con un lis ado de alumnos p opio. Cada clase end ´
a un iden i icado
(nomb e) p opio y un juego de a a a es que po de ec o es a ´
a desac i ado.
•A˜
nadi y elimina alumnos de la lis a de clase.
•Pode e el lis ado de alumnos que pe enece a cada clase con algunos da os.
•Ac i a y desac i a el juego de a a a es de cada clase cuando se c ea con enien e.
•A˜
nadi una amilia de a a a es. Cada juego end ´
a opci´
on a c ea una amilia de
pe sonas o de o o en e como puede se un mons uo.
•Dise˜
na unos equisi os pa a adminis a p i ilegios que pe mi an pe sonaliza el
a a a . El docen e se enca ga ´
a de es ablece cu´
ales son los obje i os a cumpli
pa a pode elegi un peinado o cualquie o o elemen o disponible.
•Concede los p i ilegios a los alumnos manualmen e, cuando el p o eso c ea ne-
cesa io.
•C ea un a a a , cuyo dise˜
no depende ´
a de los equisi os que el docen e haya es-
ablecido. Po ejemplo si el p i ilegio de cambia los ojos no ha sido concedido, el
alumno no pod ´
a pone le ojos al a a a .
•Ca ga una is a de la lis a de clase con los a a a es pe sonalizados de cada
alumno.
•A˜
nadi una gale ´
ıa de ma e ial, desde donde el p o eso pueda ca ga y e los
a chi os de im´
agen pa a c ea el a a a .
La es uc u a del p oyec o iene dos pila es, que son los oles de usua io que exis en en la
aplicaci´
on, el alumno y el p o eso . Una ez den o de la aplicaci´
on, encon amos odas las
unciones pa a adminis a el juego en la pa e del p o eso , mien as que en la pa e del
es udian e la a ea m´
as impo an e que se desempe˜
na es la de deco a el a a a . Ambos
oles pe mi en modi ica algo de la in o maci´
on pe sonal de la cuen a como la con ase˜
na,
que es la ´
unica acci´
on com´
un.
La im´
agen que apa ece jus o en es a secci´
on (??) si e pa a ene una lige a idea de
qu´
e es ´
a al alcance de cada usua io y qu´
e apo a es e nue o m´
odulo. C´
omo unciona el
m´
odulo y qu´
e mec´
anica lle a el c´
odigo de la aplicaci´
on se de allan m´
as adelan e en los
cap´
ı ulos 5y6, espec i amen e.
CAP´
ITULO 3. ESTADO DEL ARTE
3.1. Qu´
e son a a a es
A a a es un concep o cuyo signi icado iene a ias de iniciones, dependiendo del ´
ambi o
en el que se u ilice. Mien as que an a˜
no, en el hinduismo un a a a se conside a una
enca naci´
on del dios Visn´
u, pasando a oma apa iencia humana o animal; Ac ualmen e
en el mundo occiden al se asocia a un elemen o g ´
a ico que ep esen a a un usua io en
el ´
ambi o de la in o m´
a ica y la ecnolog´
ıa.
La a ian e del concep o de a a a que se u iliza es la que se ex iende al mundo digi-
al. Aplicaciones, edes sociales y p og amas in o m´
a icos pe mi en que sus usua ios se
iden i iquen median e alg´
un ecu so g ´
a ico.
La Web 2.0 o web social ue la p ime a he amien a en u iliza es e ecu so, c eando una
ed en la que los usua ios in e ac ´
uan en e s´
ı y se con ie en en usua ios ac i os. El
en´
omeno social empezaba a desa olla se con la suceso a de la Web 1.0, dando paso
a blogs, edes sociales, espacios web colabo a i os como Wikipedia, pla a o mas como
Google D i e o You ube. Toda es a can idad de pla a o mas y se icios han conseguido
c ece g acias a que los p opios usua ios e an a la ez pa ´
ıcipes del con enido de ´
es as.
Desde es e boom de la web 2.0 se han is o di e en es ipos de a a a es, desde los m´
as
b´
asicos has a los que se mue en, ienen masco as y complemen os y ienen oz p opia.
Figu a 3.1: Bus o de a a a Figu a 3.2: A a a con complemen os
3.2. He amien as pa a a a a es
En es a secci´
on se han ecopilado di e en es aplicaciones de a a a es que u ilizan ac ual-
men e pla a o mas de docencia o edes sociales.
El p op´
osi o de e las cualidades de cada una de ellas, es pode ex ae ideas pa a a
pa i de ´
es as, idea los a a a es que se inco po a ´
an en Classpip.
17
18 Juego de a a a es pa a una he amien as de gami icaci´
on
3.2.1. Voki
Voki es una he amien a que acili a el dise˜
no de a a a es pe sonalizados en 2 dimensio-
nes. Una de las ca ac e ´
ıs icas de es a aplicaci´
on es que sus pe sonajes pueden mo e se
e incluso se les puede a˜
nadi oz. Se nos o ece la posibilidad de elegi un pe sonaje y un
ondo. De en e los pe sonajes se puede escoge una pe sona, pol´
ı ico, amoso, animal o
pe sonaje de c´
omic. La opa del a a a ambi´
en es pe sonalizable, den o de la a iedad
que mues a la p opia aplicaci´
on y el ondo puede se uno de los p opo cionados po la
p opia he amien a, o bien puede se una apo aci´
on p opia subiendo una imagen cual-
quie a. Podemos cambia el colo de la piel, de los ojos, la o ma del pelo, e c.
Figu a 3.3: Edi o de a a a en Voki
Una de las en ajas que o ece Voki es que pe mi e o ganiza clases, pa a que se pueda
u iliza en el ´
ambi o docen e. Se pueden con igu a clases y pe mi e que los es udian es
accedan a sus a eas.
3.2.2. Bi moji
Bi moji es una aplicaci´
on que pe mi e c ea un a a a pe sonalizado. Es ´
a disponible en la
ienda de Ch ome, y hay una aplicaci´
on disponible pa a And oid e iOS. Tambi´
en exis e la
posibilidad de accede a la cuen a de Bi moji a a ´
es de la web.
Muchas o as aplicaciones de las m´
as u ilizadas po los usua ios, ienen in eg ada la apli-
caci´
on de Bi moji, como Snapcha , Facebook, Facebook Messenge , Gmail, Gboa d, Slack
e iMessage. En caso de que la aplicaci´
on no es ´
e in eg ada di ec amen e, simplemen e
se puede copia y pega el a a a pa a u iliza lo.
Pa a hace un Bi moji, an solo hay que desca ga la aplicaci´
on. Luego, la imagen se
puede gua da y compa i , o se puede sinc oniza con Snapcha . Una ez c eada se
puede segui edi ando an as eces como se quie a. Adem´
as de la p opia c eaci´
on del
a a a pe sonalizado, pe mi en bas an es opciones pa a deja lo al gus o del usua io. Se
puede cambia la opa del a a a , cuyo a ma io a cambiando con el iempo y en elaci´
on
CAP´
ITULO 3. ESTADO DEL ARTE 19
a e en os. Los e en os depo i os suelen ae opa depo i a que se a˜
nade al es ua io,
y emp esas como Pixa sacan packs de ex ensi´
on de los pe sonajes de sus pel´
ıculas.
Figu a 3.4: Edi o de a a a en Bi moji
3.2.3. Classdojo
Classdojo es una pla a o ma c eada pa a ges iona el aula con la que pueden in e ac ua
p o eso es, pad es y es udian es. Que pueda habe es ipos de usua ios quie e deci que
las uncionalidades a ´
ıan, as´
ı que a con inuaci´
on e meos en qu´
e consis e el papel de
cada uno de ellos.
•Cuen a de docen e
Un aula puede es a adminis ada po uno o a ios p o eso es, y de la misma ma-
ne a un p o eso puede es a al ca go de a ias aulas.
El p o eso a˜
nade a los es udian es y adminis a las aulas, eniendo la posibilidad
de c ea an as clases como c ea necesa ias. Como odo juego iene un sis ema
de asignaci´
on de pun os, que depende en odo momen o del p o eso . Si los pun-
os es an o suman, y qu´
e can idad de pun os se a ibuye a cada alumno ecae
di ec amen e sob e el docen e. O a unciones disponibles pa a el p o eso son la
mensaje ´
ıa di ec a con los pad es y asigna insignias como las de la igu a 3.5 a los
alumnos.
Figu a 3.5: Panel de insignias
20 Juego de a a a es pa a una he amien as de gami icaci´
on
Algo que es de g an u ilidad pa a el docen e son los in o mes que gene a Classdojo.
Re lejan la e oluci´
on de la clase omando como da os e e en es el compo amien o
y la pun uaci´
on de los es udian es. Los da os de es os in o mes pueden expo a se
a un iche o excel en caso de que se desee.
Figu a 3.6: In o me de e oluci´
on de la clase
•Cuen a de alumno
El es udian e es el ol que menos juego iene en la aplicaci´
on. Puede pe sonaliza
un peque˜
no mons uo a modo de a a a y ambi´
en e las pun uaciones e insignias
que le ha asignado el p o eso .
Figu a 3.7: Mons uo pe sonalizado
•Cuen a de pad e
La amilia del es udian e puede pa icipa ambi´
en en Classdojo. Un pad e puede
ene has a a ios alumnos a su ca go. Es a al an o de cu´
ales han sido las a-
lo aciones del docen e, pone se en con ac o con el p o eso a a ´
es de mensajes
p i ados y isualiza la in o maci´
on online son las opciones al alcance de es e ipo
de usua io. Cabe deci que odas es as uncionalidades an ligadas a los alumnos
de los que se hace ca go el pad e, es deci , no es posible que ea la in o maci´
on de
o as asigna u as, ni las cali icaciones de o os es udian es.
Una aplicaci´
on g a ui a y accesible desde cualquie pla a o ma web, iOS y And oid con
e siones en si e en es idiomas. Todas es as ca ´
ac e ´
ıs icas con ie en a Classdojo en
una he amien e muy ´
u il pa a la docencia.
CAP´
ITULO 3. ESTADO DEL ARTE 21
3.3. Aspec os dis inguidos
En es a secci´
on se ecogen algunas de las ca ac e ´
ıs icas que pod ´
ıan esul a de inspi-
aci´
on pa a desa olla el m´
odulo de a a a es.
Bi moji, dispone de una unci´
on ´
unica de la que pocas aplicaciones de c eaci´
on pueden
a da . No solo iene muchisima a iedad de ca as, peinados y complemen os, adem´
as
es capaz de cons ui un a a a a pa i de un ”sel ie”. Es quiz´
a la pa e m´
as a ac i a del
m´
odulo, pese a que supone ene un manejo ex ao dina io de lib e ´
ıas de econocimien o
acial y pod ´
ıa lle a mucho iempo desa olla algo simila .
Tambi´
en cabe dis ingui que las celeb aciones especiales me ecen una es imen a o com-
plemen os especiales a eces. La Na idad, e ano, Pascua, o incluso ca na al pueden
pasa a o ma pa e del mundo del a a a en Bi moji. Rompe un poco con la mono on´
ıa
del a a a y pod ´
ıa man ene a los es udian es m´
as mo i ados si el juego a cambiando
dependiendo de la ´
epoca del a˜
no.
De Classdojo lo que des aca po su sencillez es el edi o de a a a es. Es un dise˜
no muy
´
acil de implemen a , unciona con coo denadas de p o undidad, as´
ı supe poniendo unos
elemen os sob e o os se cons uye el a a a con odos sus componen es. Es una de las
ca ac e ´
ıs icas que se end ´
an en cuen a a la ho a de implemen a el dise˜
no del a a a .
Algo de Classdojo que ambi´
en puede esul a a ac i o a la ho a de escoge una aplica-
ci´
on de gami icaci´
on pa a el en o no docen e es inclui a los pad es en una aplicaci´
on.
Pa a es udian es de emp ana edad sob e odo, puede se econ o an e que los pad es
puedan es a al an o del compo amien o de sus hijos y ene un canal de comunicaci´
on
di ec o con el docen e. Pe o es e ma iz no iene sen ido en un juego de a a a es, quiz´
a
pueda esul a ´
u il de ca a al desa ollo de u u os m´
odulos de Classpip.
Lo m´
as ascinan e de Voki es que los a a a es puedan ene oz. No es una oz p eg aba-
da, es la oz del usua io que g abada con el mic o in e no del o denado queda egis ada
en la aplicaci´
on. O a unci´
on que le da ´
ıa un papel al a a a que no uese s´
olo isual.
CAP´
ITULO 4. CONCEPTO DE DISE ˜
NO
Como concep o b´
asico de un buen dise˜
no es imp escindible ene en cuen a las opciones
a las que pueden accede los dos ipos de ol que acoge el m´
odulo.
Los men´
us del p o eso y del alumno son comple amen e di e en es. De hecho, el ol del
p o eso es ´
a pensado pa a hace de adminis ado ealmen e, y po an o end ´
a el pode
de concede pe misos y adminis a las bases de da os a las que accede el juego.
4.1. Modelo de juego
Son a ias las mane as de da le juego a es e m´
odulo. El usua io que iene au o izado
pone en ma cha el m´
odulo de a a a es es el que iene el ol de p o eso . T as inicia
sesi´
on, el p o eso puede e sus clases y c ea un juego de a a a es pa a cada una de
ellas.
El m´
odulo es ´
a pensado pa a a˜
nadi una imagen ca ac e ´
ıs ica a cada alumno, que pod ´
a
es a dise˜
nada como es e quie a. El a a a pod ´
a ene es elemen os que i ´
an a iando
los usua ios a su gus o, como el pelo, los ojos y alg´
un complemen o. La g acia del jue-
go eside en que pa a modi ica es os elemen os, los usua ios deben ene pe miso del
adminis ado , y es que cada uno de los elemen os iene una condici´
on a cumpli pa a
consegui el pe miso.
En el apa ado mi pe il apa ecen los da os del usua io, que pod ´
a modi ica siemp e y
cuando c ea necesa io median e un o mula io de en ada. gale ´
ıa de ma e ial con end ´
a
odos los elemen os que pod ´
an usa se pa a pe sonaliza los a a a es, exis iendo la po-
sibilidad de a˜
nadi y elimina cuan os elemen os sean necesa ios. Una ez es ´
e ac i ado
el m´
odulo de a a a es, los alumnos que u ilicen la pla a o ma, encon a ´
an un bus o de
a a a desnudo al en a po p ime a ez a ´
es a, que se le asigna po de ec o cuando se
ac i a el m´
odulo de a a a es en la aplicaci´
on.
De mane a an´
aloga a oma la decisi´
on de ac i a el m´
odulo de a a a es pa a cada cla-
se, el docen e ambien decide, den o de cada clase, qu´
e alumnos pueden modi ica los
elemen os del a a a . Pa a es o end emos 3 elemen os pa a modi ica : pelo, ojos y com-
plemen os. La is a que apa ece de la lis a de alumnos de una clase mues a, a pa e
de los da os pe sonales de cada alumno, es as 3 casillas de elemen os pe enecien es
al a a a . Pa iendo de la in o maci´
on que con iene dicha lis a, el p o eso puede gene a
una is a de los a a a es, pa a pode mos a a sus alumnos en clase c´
omo se en odos
los a a a es de los miemb os de clase, lo supone que cada alumno puede e su a a a
pe o no el del es o.
4.2. Dise˜
no uncional
En es a secci´
on se explica c´
omo se an a dise˜
na las unciones de la aplicaci´
on de mane a
que cub a lo que se ha especi icado en los obje i os del p oyec o.
23
30 Juego de a a a es pa a una he amien as de gami icaci´
on
Figu a 4.8: Despliegue de pan allas pa a Mis clases
Figu a 4.9: Apa ado ”Juego de a a a es”pa a el ol del alumno
La secci´
on pe misos simplemen e accede a una pan alla en las que apa ecen las con-
diciones pa a consegui los pe misos pa a cambia el pelo, los ojos, complemen os del
a a a o e la lis a comple a de a a a es, con un indicado e de que indica que es ´
a
ac i o en ojo que signi ica que no es ´
a ac i ado.
Figu a 4.10: Vis a de ”Pe misos¨ desde el ol de alumno
Pa a pe sonaliza el a a a , el panel es muy in ui i o. Se mues a en una imagen cen al
el bus o desnudo del a a a y en un men´
u colocado en la pa e m´
as baja de la pan alla
3 bo ones sin ex o, con iconos que ep esen an los ojos, el pelo y los complemen os
del a a a . Cada bo ´
on desplega una gale ´
ıa de im´
agenes que con ien peinados, ojos y
complemen os espec i amen e. El usua io s´
olo pod ´
a accede a las gale ´
ıas que es e
au o izado.
CAP´
ITULO 4. CONCEPTO DE DISE ˜
NO 31
Figu a 4.11: Men´
u pa a pe sonaliza el a a-
a
Figu a 4.12: Elemen os pa a pe sonaliza el
a a a
Al selecciona una imagen de la gale ´
ıa de cualquie a de los apa ados, apa ece ´
a un ick
e de sob e la imagen que se haya seleccionado, y al pulsa en el OK que apa ece a iba
a la de echa, se e ocede a la is a p incipal que mos a ´
a el a a a con el pelo, ojos o
complemen o que se haya elegido.
Es as son odas las pan allas dise˜
nadas pa a implemen a en la aplicaci´
on, cuyo aspec o
y unciones pod ´
an a ia en unci´
on de las necesidades que ayan su giendo.
CAP´
ITULO 5. ENTIDADES DE LA BASE DE
DATOS
Median e una aplicaci´
on llamada Loopback, es posible c ea una API (Applica ion P o-
g amming In e ace) que adem´
as de con ene los da os de odos los usua ios, u iliza se -
icios que ecogen una se ie de p o ocolos y unciones pa a in e cambia da os en e
aplicaciones. Den o de es a aplicaci´
on hay a ios sis emas de ges i´
on de bases de da os
de c´
odigo abie o, de los que he escogido “In Memo y”, uno de los sis emas de c´
odigo
abie o que almacena los da os en la memo ia local.
5.1. Modelos
Los modelos ep esen an in o maci´
on con la que a a abaja el con olado , es ´
an de ini-
dos con a ibu os y se especi ica qu´
e ipo de in o maci´
on iene cada a ibu o. Si enemos
un a chi o con las ca ac e ´
ıs icas del modelo, el con olado y la is a HTML pueden co-
noce ambi´
en qu´
e p opiedades iene y c´
omo es ´
a es uc u ado.
Los modelos que han sido necesa ios pa a pode alcanza los obje i os p opues os en la
aplicaci´
on son cinco: pe sona, ma ´
ıcula, clase, imagen, con enedo y pe miso. A con i-
nuaci´
on se dan odo ipo de de alles a ce ca de los a ibu os de cada uno de ellos.
•Pe sona
La aplicaci´
on pide como da os de en ada un usua io y una con ase˜
na, da os que
debe ´
ıan se ´
unicos pa a cada pe sona que u ilice la aplicaci´
on y un modelo pe sona
es lo ideal pa a pode almacena es os da os.
En es e modelo se disponen de es a ibu os,un nomb e de usua io, una con a-
se˜
na y un a ibu o que ep esen e el ol de la pe sona. La unci´
on del ol es que la
aplicaci´
on pueda de ec a si la pe sona que ha iniciado sesi´
on es p o eso o alumno,
que esos se ´
an los dos ´
unicos alo es que pueda oma es e a ibu o.
•Clase
Todas las pe sonas con sus espec i os da os es a ´
an dis ibuidas en clases. As´
ı
que un modelo llamado clase a a con ene los da os de odas las asigna u as que
impa e el p o eso . En caso de que haya que adminis a m´
as de una clase al i a
e el lis ado de alumnos se pedi ´
a como pa ´
ame o de en ada el iden i icado de
la clase, pa a pode mos a los da os de odos los miemb os de la clase que se
co esponda con el iden i icado .
La clase end ´
a como a ibu os un iden i icado , pa a que el p o eso pueda sabe
de qu´
e clase se a a, un adminis ado , una a ibu o llamado a a a es, pa a indica
si el juego es ´
a ac i ado o no, una amilia de a a a es, acompa˜
nada de un a ibu o
al que llama emos bus o, pa a gua da el iche o del bus o de la amilia de a a a es,
y po ´
ul imo cua o a ibu os pa a gua da los cua o p i ilegios que se conceden en
el juego.
33
34 Juego de a a a es pa a una he amien as de gami icaci´
on
•Ma ´
ıcula
Una ez p esen ados los modelos de pe sona y clase, hace al a un e ce modelo
pa a elaciona a cada pe sona con su clase. Es e modelo es la ma ´
ıcula, que ie-
ne como a ibu os un iden i icado de alumno y un iden i icado de asigna u a, as´
ı
podemos ubica a la pe sona en una clase conc e a, y no s´
olo eso, sino que una
pe sona puede es a ma iculada de a ias asigna u as siemp e y cuando enga una
ma ´
ıcula pa a cada una de ellas. Adem´
as de es os dos a ibu os, en ma ´
ıcula apa-
ecen 10 a ibu os m´
as. Cua o de ellos son booleanos que si en pa a sabe si la
pe sona iene los pe misos del juego de a a a es que son 4: cambia se el peinado,
escoge los ojos, a˜
nadi un complemen o y pode e la lis a de a a a es de oda
la clase. O os cua o a ibu os an ligados a es os ´
ul imos, po que en caso de que
el es udian e enga pe miso pa a cambia el peinado del a a a implica que puede
escoge un a chi o de im´
agen, y que ´
es e end ´
a que gua da se en alguna pa e.
As´
ı que a ibu os pa a iche o de peinado, iche o de ojos, iche o de complemen o
y iche o de boca, que puede cambia se siemp e.
Po ´
ul imo, los dos a ibu os es an es que no son ele an es en el juego de a a a es
pe o ienen su unci´
on, son la no a y el iden i icado de la ma ´
ıcula, que es un
n´
ume o ´
unico pa a cada ma ´
ıcula.
•Con enedo T abaja con los con enedo es de almacenamien o implica hace la de-
cla aci´
on de alg´
un ipo de modelo pa a abaja de una o ma m´
as c´
omoda. Los
con enedo es ienen un nomb e y a chi os con un nomb e conc e o den o, po an-
o como amos a abaja con con enedo es po sepa ado, el ´
unico a ibu o que
amos a asigna le al con enedo es un nomb e de ipo s ing. El modelo con enedo
nos se ´
a´
u il pa a asigna una amilia de a a a es, la amilia end ´
a el mismo nomb e
que el del con enedo . Conoce el nomb e del con enedo es su icien e pa a ene
acceso a odas los a chi os que con enga.
•Im´
agen El modelo pa a hace e e encia a las imagenes se a a llama Imagen pa a
no con undi lo con el del con enedo que solo hace e e encia al luga donde se
almacenan es as. Como a ibu os iene un nomb e, haciendo e e encia al nomb e
del a chi o y un segundo a ibu o que es la di ecci´
on, pa a almacena la cadena de
ca ac e es que se i ´
a pa a e el a chi o.
Den o de cada con enedo hab ´
a a chi os ipo ’png’ o imagenes que pe enezcan a
la amilia de a a a es que ep esen a cada con enedo . T abaja con es as imagenes
pa a mos a las en HTML es un poco complejo, hay una unci´
on que se ´
a la enca -
gada de con e i los da os del iche o png en una URL. La URL es una secuencia
de ca ac e es que nos lle a a un si io conc e o de in e ne y pe mi e ecupe a un
ipo de in o maci´
on de e minada. Una URL lo que hace es edi igi nos a mos a la
im´
agen. La unci´
on que gene a la URL debe sabe de qu´
e a chi o iene que gene a
la di ecci´
on URL, as´
ı que lo mejo pa a abaja con los da os de la im´
agen es c ea
un modelo nue o sob e el que se sus en a el a chi o de o o.
•Pe miso
Adem´
as de un con enedo pa a las imagenes que componen el a a a , hay un con-
enedo que almacena los a chi os de ex o que se u ilizan pa a es ablece los e-
quisi os pa a consegui los pe misos. Los pe misos pe mi en cambia di e en es
elemen os del a a a y cada uno de ellos se concede si el usua io cumple unos
CAP´
ITULO 5. ENTIDADES DE LA BASE DE DATOS 35
equisi os que el p o eso es ablece. Pues bien, es os equisi os an ecogidos en
un a chi o de ex o. Pa a eso decla amos un nue o modelo de almacenamien o que
llama emos pe miso y que no end ´
a ning´
un a ibu o
en la siguien e im´
agen se mues a un diag ama de es os con sus a ibu os y c´
omo es ´
an
elacionados unos con o os.
5.2. Relaciones en e modelos
Una ez ligados odos los elemen os del juego de a a a es con los di e en es modelos,
es momen o de in oduci las elaciones. Las elaciones es ablecen la dependencia que
exis e en e dos modelos.
•Relaciones 1:1
En es e ipo de elaciones solamen e se elaciona un elemen o de un modelo con
o o elemen o de o o modelo. Po ejemplo, una ma ´
ıcula puede pe enece solo a
una pe sona.
•Relaciones 1:N
Un elemen o de un modelo A se elaciona con ninguno o con a ios elemen os de
o o modelo B, pe o los elemen os del modelo B solo pueden elaciona se con un
modelo de A. Es e es el caso de la ma ´
ıcula y la pe sona, una pe sona puede ene
a ias ma ´
ıculas, mien as que una ma ´
ıcula puede pe enece a una sola pe sona.
En loopback es e ipo de elaciones se llaman “belongsTo”.
•Relaciones N:M
Va ios elemen os de un modelo pueden es a elacionados con un solo modelo, po
ejemplo, enemos el modelo “pe sona” y el modelo “clase”. Una clase puede es a
o mada po a ias pe sonas y a su ez, una pe sona puede es a en a ias clases
di e en es. Es e ipo de elaci´
on en la aplicaci´
on se llama Hasmany.
T aducido al lenguaje que u iliza loopback, encon amos las siguien es elaciones:
1. clase-HasMany-pe sona
2. pe sona-HasMany-clase
3. pe sona-belongsTo-ma ´
ıcula
4. ma ´
ıcula-belongsTo-clase
Que dos modelos es ´
en elacionados supone que se conec an a a ´
es de una cla e,
que puede se p opia o de un modelo ajeno. Las cla es que apa ecen en las elaciones
de alladas an e io men e son ajenas o ambi´
en llamadas “ o eignKey”. El cla o ejemplo lo
apo a el modelo “ma ´
ıcula”, donde sus a ibu os “idAlumno” e “idAsigna u a” son ambos
“ o eignKeys”.
36 Juego de a a a es pa a una he amien as de gami icaci´
on
5.3. Ejemplos de acceso a la base de da os
En es e apa ado mos amos e ec os p ´
ac icos que nos pe mi en accede a la base de
da os median e los m´
e odos HTTP explicados en el apa ado 5.1..
Desde un a chi o u ilizado pa a se icios, que con iene unciones que hacen ope acio-
nes y pe iciones a la base de da os, c eamos una unci´
on que mues e los da os de una
pe sona. Pa a e i a consul a cons an emen e la base de da os, abaja emos con “Ob-
se ables” que e lejan au om´
a icamen e los cambios ealizados en la misma.
Ob ene la in o maci´
on de una pe sona equie e del iden i icado que iene el modelo “pe -
sona”. Todas las ins ancias de es e modelo se encuen an en una di ecci´
on h p conc e a,
as´
ı pa a ob ene los da os de una sola de ellas es necesa io ene el pa ´
ame o ´
unico de
cada pe sona (iden i icado ), a˜
nadiendo a la di ecci´
on de la h p donde se encuen an o-
das las pe sonas una / seguida del iden i icado se consiguen los a ibu os de la pe sona
deseada ob iando la in o maci´
on del es o.
Es os da os an a u iliza se pa a au en i ica al indi iduo conc e o en la aplicaci´
on. Reca-
pi ulando, en el apa ado 5.1 los a ibu os del modelo “pe sona” son, nomb e, que adem´
as
si e de iden i icado , pass haciendo e e encia a la con ase˜
na, y ol que especi ica si el
usua io es es udian e o docen e.
En el componen e pa a en a en la aplicaci´
on, se piden el nomb e de usua io y la con a-
se˜
na del indi iduo. Al hace click en el bo ´
on “inicia sesi´
on” la unci´
on “Au en i ica ” llama
al se icios que accede a la base de da os u ilizando la unci´
on “DamePe sona” que oma
como pa ´
ame o el nomb e de usua io in oducido, es a unci´
on se enca ga solo de hace
una pe ici´
on ge a la base de da os y e o na un “Obse able” de la pe sona. La unci´
on
“au en i ica ” es la que ecoge es e obse able y comp ueba que la con ase˜
na in oducida
coincide con la pe sona e o nada, y si la in o maci´
on concue da, dependiendo del ol del
usua io, le da ´
a acceso a una p´
agina o a o a den o de la aplicaci´
on.
O o caso en el que se consul a la base de da os median e un se icio ocu e cuando el
alumno accede a l apa ado de “mis asigna u as”. Aqu´
ı se llama a la unci´
on “DameClases”
del a chi o de se icios, que lanza una pe ici´
on ge a la di ecci´
on donde se encuen an
odas las clases, y e o na un obse able de odas ellas. Un ´
ul imo escena io en el que el
a chi o de se icios media en e la in e az de la aplicaci´
on y el almacenamien o de da os
se da a la ho a de c ea una clase nue a, la unci´
on “C eaClase” hace una ope aci´
on pos
con oda la in o maci´
on necesa ia pa a cub i los a ibu os eque idos de la clase que se
ecogen de un o mula io cumplimen ado po el p o eso .
CAP´
ITULO 6. IMPLEMENTACI ´
ON
La implemen aci´
on de la aplicaci´
on m´
o il se ha lle ado a cabo con angula e ionic. La
aplicaci´
on es ´
a o mada po componen es, que son peque˜
nos m´
odulos del so wa e com-
pues os po es pa es, la is a HTML, el con olado y el es ilo adem´
as de u iliza se i-
cios pa a conec a con la base de da os.
6.1. Componen es
En es e cap´
ı ulo se de allan los componen es m´
as impo an es y se explica qu´
e implica-
ci´
on ienen en el desa ollo del so wa e y de la aplicaci´
on. Dichos componen es es ´
an
o ien ados a la pa e del juego de a a a es, el es o de is as HTML, es ilos y con olado-
es no juegan el mismo papel en es e m´
odulo, son de alles adicionales que si en pa a
complemen a el m´
odulo. A modo in oducci´
on amos a enume a los componen es que
o man es a lis a de elemen os que dan juego a los a a a es:
•a a a es
En la p´
agina a a a es enemos la opci´
on de ac i a y desac i a el juego si el inicio
de sesi´
on en la aplicaci´
on ha sido hecho con usua io que enga el ol de p o eso .
Ac i a el juego supone selecciona una amilia de a a a es, que po de ec o es de
pe sonas. Las o a amilia disponible es de minions.
Cuando el juego es ´
a en uncionamien o, apa ecen dos bo ones: “Pe misos” y “Lis a
de a a a es”. Es os nos lle a ´
an a los componen es de lis aa a a es y pe misos,
espec i amen e. Es as dos secciones se explican m´
as adelan e.
Figu a 6.1: C´
odigo del con olado
37
38 Juego de a a a es pa a una he amien as de gami icaci´
on
Figu a 6.2: C´
odigo is a HTML
Pa a e de qu´
e mane a abaja un componen e elacionando la is a con el con o-
lado , en el ejemplo de la igu a 6.1 se obse a un pa ´
ame o que se llama idClase,
de ipo s ing. Es e pa ´
ame o eapa ece en la is a HTML de la igu a 6.2 en e una
doble lla e. Es o signi ica que el alo que oma es e pa ´
ame o en el con olado ,
se mos a ´
a en la is a HTML al usua io.
A con inuaci´
on se enume an m´
as componen es que pe enecen a la aplicaci´
on.
•gale ia
La gale ´
ıa es una p´
agina exclusi a pa a el p o eso , donde ca ga los a chi os de
im´
agen que cons i uyen di e en es elemen os del a a a . Encon amos di e sas sec-
ciones, una pa a cada elemen o del a a a .
Cada secci´
on iene dos subapa ados, uno pa a a˜
nadi ma e ial y o o pa a isuali-
za el ma e ial que adem´
as da la opci´
on de elimina lo si se desea.
•complemen os, ojos y pelos
Las uncionalidades y is as de es as es p´
aginas pueden explica se en conjun o,
ya que odas ellas ienen la misma unci´
on. Es ´
an disponibles unicamen e pa a el
usua io con ol de alumno. Una ez se ha explicado la p´
agina de la gale ´
ıa es mucho
m´
as sencillo comen a su uncionamien o.
Tienen la misma uncionalidad que la gale ´
ıa del p o eso , mos a los peinados,
ojos, complemen os y opa, pe o en p´
aginas po sepa ado.
•home
Home es el p ime componen e que en´
ıa po de ec o con la aplicaci´
on, que se ha
ap o echado pa a pe sonaliza el a a a . Desde un usua io con ol de alumno se
puede accede , siemp e y cuando el juego de a a a es es ´
e ac i o.
CAP´
ITULO 6. IMPLEMENTACI ´
ON 39
Al en a apa ece el a a a en el cen o de la pan alla se mues an los iche os del
a a a que enga el alumno, en caso de no ene ninguno se e ´
a el bus o del a a a
ac´
ıo o con los elemen os que enga. Desde es a secci´
on pod ´
a en a a cambia
los elemen os del a a a y end ´
a acceso a la lis a de pe misos pa a que el juego
sea comple o.
•lis aa a a es
La lis a de a a a es ca ga los a a a es de odos los alumnos que es ´
en ma iculados
en una asigna u a con juego de a a a es.
Teniendo un a a a pe sonalizado pa a cada alumno, la lis a de alumnos puede
cob a un poco de ida.
•pe misos
En “Pe misos” el p o eso iene las uncionalidades de subi a chi os de ex o a la
base de da os y de ca ga los en la aplicaci´
on pa a que se mues e po pan alla el
ex o que con ienen. Los a chi os de ex o pa a cada pe miso ienen una secci´
on
p opia.
• is ape misos
A la p´
agina is ape misos se accede desde “home”. Aqu´
ı apa ecen clasi icados
los equisi os que el p o eso ha seleccionado pa a concede los pe misos. Es una
secci´
on a la que acceden los usua ios que son alumnos y no iene ning´
un elemen o
pa a in e ac ua . Se mues a qu´
e se exige pa a consegui cada pe miso y adem´
as,
hay un indicado pa a que el alumno sepa si ya ha cumplido el equisi o o no.
6.2. Se icios
Un se icio es un m´
e odo que se u iliza pa a comunica dos in e aces, median e un
conjun o de p o ocolos es ablecidos. En es e p oyec o los se icios que se u ilizan son
dos, ”da os.se ice
2
”db-se ice.se ice”. Uno de ellos, db-se ice, iene al ededo de 400
l´
ıneas de c´
odigo y comunica esencialmen e con la base de da os, mien as que el se icio
da os iene unas 140 l´
ıneas de c´
odigo y si e pa a pasa in o maci´
on de un componen e
a o o den o de la aplicaci´
on.
En la im´
agen que apa ece bajo es e p´
a a o, se expone el c´
odigo de una unci´
on del
a chi o de se icios ”db-se ice”, que elimina una ma ´
ıcula de la base de da os median e
una ope aci´
on ”dele e”de p o ocolo h p. oma como pa ´
ame o de en ada la ma ´
ıcula
que a a elimina pa a pode localiza la ma ´
ıcula en la base de da os po su iden i icado .
Figu a 6.3: Cap ion
Pa a e m´
as ope aciones de es e ipo, que se u ilizan pa a accede a la base de da os, en
el anexo Fapa ece el c´
odigo de el a chi o “db-se ice” pa a ene una buena e e encia.
CAP´
ITULO 7. PRUEBAS Y EVALUACI ´
ON
Pa a comp oba que el c´
odigo sea obus o y no haya ninguna incohe encia que pueda da
luga a e o es, se han escogido cinco p uebas pa a comp oba el co ec o uncionamien o
de la aplicaci´
on.
7.1. Ba e ´ıa de p uebas
•Con ase˜
na e ´
onea
Pa a inicia sesi´
on en la aplicaci´
on, se equie e de un usua io y con ase˜
na. En caso
de que el usua io exis a en la base de da os, pe o la con ase˜
na no sea la co ec a,
no se debe ´
ıa pode inicia sesi´
on. Tal y como se mues a en la igu a XX, no s´
olo
se impide que el usua io inicie sesi´
on, sino que adem´
as apa ece un mensaje que
especi ica el mo i o que no le pe mi e en a en la aplicaci´
on.
•A˜
nadi un usua io ya exis en e
Tene dos usua ios con el mismo nomb e puede lle a a con usiones, y no debe
es a pe mi ido. As´
ı, cuando el p o eso egis a un nue o alumno, se comp ueba
que no haya o o con el mismo nomb e que haya sido egis ado p e iamen e. Si ya
se hab´
ıa egis ado a una pe sona con el mismo nomb e, o a no i icaci´
on apa ece
en la pan alla sugi iendo al p o eso que u ilice un nomb e nue o.
•Concede y e i a pe misos
Los pe misos se conceden desde un usua io con ol de p o eso , sin emba go a ec-
an a un usua io con ol de alumno. As´
ı que una buena mane a de comp oba que
es a unci´
on sigue el cu so co ec o, es e si el clic del p o eso , ha epe cu ido en
la ma ´
ıcula del alumno. Pa a es o se colocan unos ma cado es en el usua io del
alumno, que apa ecen en colo e de pa a indica que el pe miso es ´
a ac i ado.
•Elimina una clase que no exis e
Hace una pe ici´
on “dele e” a la base de da os elacionada con un elemen o que
no exis e puede desencadena un e o a al. Po es a az´
on, se alae a al docen e
cuando in en a elimina una clase inexis en e.
Todas es as p uebas pueden da se po supe adas, y apa ecen en el ap´
endice D.
7.2. E aluaci´
on de usua io
Siemp e es con enien e conoce la opini´
on de dis e en es pe sonas que pod ´
ıan hace
uso de la aplicaci´
on. La opini´
on de di e en es indi iduos a los que se les ha mos ado la
aplicaci´
on con sus espec i as uncionalidades iene ecogida en la encues a anexada en
la secci´
on Ede los ap´
endices.
Las p egun as ealizadas es ´
an ligadas a las uncionalidades del p o eso y del alumno,
se pide opini´
on pe sonal a ce ca de qu´
e encuen an a al a pa a hace del p oyec o un
47
48 Juego de a a a es pa a una he amien as de gami icaci´
on
m´
odulo m´
as comple o, se consul an qu´
e an in ui i o es n ega po la aplicaci´
on y se pide
escoge una uncionalidad a o i a.
Los esul ados gene ales e lejan que es un m´
odulo muy comple o en opini´
on de los en-
cues ados, bas an e in ui i o pa a cualquie usua io y que las uncionalidades a o i as
po igual, son a˜
nadi di e en es amilias de a a a es y pode concede p i ilegios pa a
pe sonaliza el a a a .
CAP´
ITULO 8. CONCLUSIONES
U iliza ecnolog´
ıas comple amen e desconocidas, de las que no se ha abajado a lo
la go de los a˜
nos de ca e a ha supues o un e o de ap endizaje au odidac a. Los ´
ıdeo-
u o iales de you ube y las webs de ma e ial de e e encia en p og amaci´
on o ien ada al
desa ollo de aplicaciones web y m´
o il han sido las gu´
ıas del p oyec o.
Adem´
as el uso de ionic como amewo k ha acili ado much´
ısimo la p og amaci´
on de la
aplicaci´
on m´
o il, ya que incluye un mon ´
on de documen aci´
on sob e ma e ial en su p´
agi-
na web. Po o a pa e Gi , la he amien a de con ol de e siones, ha sido o a de las
piezas cla e a laho a de ealiza cambios de la mane a m´
as segu a posible, pudiendo
deshace los en cualquie momen o.
8.1. Obje i os conseguidos
El juego de a a a es pa a una he amien a de gami icaci´
on se ha in en ado desa olla de
mane a que cumpliese con el mayo n´
ume o de obje i os p opues os posibles. De odos
los obje i os p opues os, hay dos que no se han llegado a alcanza . El nulo conocimien o
de las ecnolog´
ıas de desa ollo ha sido el mo i o p incipal, pues o que an o la ins alaci´
on
de odas lashe amien as, como el conocimien o de p og amaci´
on con ´
es as han lle ado
mucho m´
as iempo de lo espe ado al inicio del p oyec o. La lis a de obje i os es ´
a de inida
en el apa ado 2.4., de la que no se ha comple ado lo siguien e:
•Elimina alumnos de la lis a de clase
El iempo dedicado a implemen a el p oyec o se ha cen ado m´
as en las uncionalidades
de los a a a es, po an o de alles de es e ipo se han dejado pa a ´
ul ima ho a, sabiendo
que la pe sona que ome el ele o de la aplicaci´
on se ´
a capaz de a˜
nadi el de alle.
8.2. Valo aci´
on pe sonal
El p oyec o ha sido odo un desa ´
ıo, ya que en los di e en es cu sos de la menci´
on de
ae ona egaci´
on an s´
olo se impa en dos asigna u as dedicadas plenamen e a la p o-
g amaci´
on. Las lib e ´
ıas y el ipo de lenguaje que se han u ilizado en es e p oyec o son
o ien ados a obje os, que es la clase de p og amaci´
on que se u iliza en una de las asig-
na u as mencionadas p e iamen e, lo que p opo ciona una buena base. Sin emba go, el
ipo de ecnolog´
ıa que se u iliza pa a el desa ollo nada iene que e .
Uno de los mayo es obs ´
aculos pa a m´
ı ha sido la ins alaci´
on de odas y cada una de las
he amien as pa a pode desa olla el p oyec o. Muchas eces, la e si´
on ins alada no e a
la co ec a y daba e o es muy poco espec´
ı icos que no daban a en ende que las esiones
en e dos o m´
as he amien as no uesen compa ibles. O a de las di icul ades que se me
han p esen ado es el uso de la e si´
on 4 de Angula e Ionic, que no se hab´
ıan u ilizado
en p oyec os p e ios y eso supone que haya a iaciones en algunas de las lib e ´
ıas, po
an o lo que en la e si´
on 3 uncionaba pe ec amen e en la e si´
on 4 p obablemen e no
lo hiciese.
49
50 Juego de a a a es pa a una he amien as de gami icaci´
on
Cada e o que daba el c´
odigo, al p incipio e a odo un mundo pa a co egi lo. Si que es
e dad, que con la ayuda del es o de alumnos implicados en p oyec os de Classpip y con
los u o iales de Miguel, poco a poco ui ap endiendo a e i a an os allos en el sis ema.
El p oceso de ap endizaje, pese a que ha sido cos oso y algo la go, me ha apo ado
conocimien os su icien es como pa a que el esul ado sea sac ics ac o io.
8.3. L´ıneas abie as
El m´
odulo de a a a es a˜
nade una ca ac e ´
ıs ica isual y muy a ac i a a Classpip, sob e-
odo de ca a al p´
ublico m´
as j´
o en.
Es a p ime a e si´
on del p oyec o, deja muchas pue as abie as a la comunicaci´
on con
o os m´
odulos, como po ejemplo concede p i ilegios especiales a los ganado es de un
o neo pe enecien e al m´
odulo de compe iciones, o desbloquea un pe miso al llega a
un n´
ume o de pun os de e minado.
Quedan pendien e muchas posibles mejo as como uncionalidades nue as o incluso al-
guna gu´
ıa pa a usua ios eci´
en iniciados, ya que puede se un poco con uso el unciona-
mien o del p oyec o. Todas las secciones pueden mejo a sob e odo en cuan o a dise˜
no,
que es la pa e en la que menos se ha p o undizado. La aplicaci´
on se ha hecho lo m´
as
sencilla posible pa a pode cumpli con los obje i os.
Pa a e mina , es imp escindible inclui m´
as amilias en el m´
odulo y ma e ial exclusi o pa a
de e minadas ´
epocas. Todo es o ha ´
a que el juego no sea epe i i o, man enga mo i ados
a los usua ios y sa is aga al clien e.
BIBLIOGRAF´
IA
[1] A a a [online]: h ps://blog.ensalza.com/dicciona io/que-es-un-a a a -en-
in o ma ica/.
[2] Web 2.0. [online]: h ps://iweb2o.webnode.com.co/a a a /
[3] Voki [online]: h p://www.educacon ic.es/blog/ oki-pe sonajes-que-hablan- ex -speech
[4] Gi y Gi Hub [online]: h ps://desa olloweb.com/a iculos/in oduccion-gi -gi hub.h ml
[5] LoopBack [online]: h ps://loopback.io/
[6] Gami icaci´
on [online]: h ps://blog.a i i y.com/es/que-es-gami icacion-y-como-usa la
[7] Gami ica ion a Wo k Su ey [online]: h ps://www. alen lms.com/blog/gami ica ion-
su ey- esul s/
[8] Classdojo [online]: h ps://www.educacion espun oce o.com/ ecu sos/classdojo-que-
es-como-empeza /33376.h ml
[9] Gami icaci´
on en la asigna u a de De echo Romano [online]:
h ps://www. esea chga e.ne /p o ile/SoniaPamplona
[10] API-REST [online]: h ps://bb aopen4u.com/es/ac ualidad/api- es -que-es-y-cuales-
son-sus- en ajas-en-el-desa ollo-de-p oyec os
[11] Boo s ap [online]: h ps:// aiolane wo ks.es/blog/que-es-boo s ap/
[12] Ionic [online]: h ps://ionic amewo k.com/
[13] Angula [online]: h ps://angula .io/
[14] Kahoo [online]: h ps://www.xa aka.com/basics/kahoo -que-es-pa a-que-si e-y-
como- unciona
[15] Bi moji [online]: h ps://www.bi moji.com/
[16] NodeJS [online]: h ps://www.ne consul ing.es/blog/nodejs/
[17] Co do a [online]: h ps://es.wikipedia.o g/wiki/ApacheCo do a
[18] Zombies Run! [online] h ps://zombies ungame.com/
51
AP ´
ENDICES
AP ´
ENDICE A. MANUAL DE INSTALACI ´
ON
En es a secci´
on apa ecen los pasos a segui pa a ins ala odas las he amien as que
o man pa e de la a qui ec u a del so wa e.
A.1. Node y NPM
La e si´
on de NODE con la que se ha desa ollado el p oyec o es la 8.6.0, sin emba go
es a e si´
on no es compa ible con Angula CLI, as´
ı que u iliza emos la e si´
on 8.9.4.
Pa a es o accede emos a la web del link adjun ado a con inuaci´
on:
h ps://nodejs.o g/es/download/ eleases/
Figu a A.1: Opciones ins alaci´
on NODE
En ando en la secci´
on de“Todas las e siones”, se ab i ´
a el siguien e enlace h ps://nodejs.o g/dis /,
donde isualiza emos las e siones disponibles has a la echa. Ah´
ı ha emos click en la
e si´
on que que emos desca ga .
Figu a A.2: Ve si´
on de ins alaci´
on NODE
El NPM se ins ala au om´
a icamen e as ealiza la ins alaci´
on del NODE. Pa a e qu´
e
e si´
on se ha ins alado de cada uno de ellos, podemos ab i una l´
ınea de comandos o
como apa ece en Windows “S´
ımbolo del sis ema”.
Po an o la e si´
on del NPM no es impo an e, ya que iene ligada a la del NODE, que es
la que nos in e esa.
Median e las ´
o denes node – y npm – , apa ece en pan alla la e si´
on co espondien e
a cada una de las he amien as.
55
1. Hace el Fo k, clona y ab i el eposi o io del siguien e enlace:
h ps://gi hub.com/classpip/classpip-dashboa d
2. Ins ala odas las dependencias locales que hay en la ca pe a del classpip-dashboa d
con la ins ucciones que apa ecen a con inuaci´
on, ejecu adas una a una:
cd Ca pe aDondeEs ´
aElReposi o io/classpip-dashboa d
npm ins all
3. ejecu a la aplicaci´
on u ilizando la siguien e ins ucci´
on:
npm un s a
Con al de ab i la aplicaci´
on, hay que ab i el na egado e in oduci la siguien e
di ecci´
on:
h p://localhos :4200/
Es os son odos los elemen os que deben ins ala se en caso de que e emp ende unnue-
o p oyec o elacionado con Classpip.
AP ´
ENDICE B. IMAGENES DE LAS
FUNCIONALIDADES PARA EL DOCENTE
La aplicaci´
on mues a di e en es is as, aqu´
ı se ecogen las que co esponden al usua io
de ol p o eso .
Figu a B.1: Pan alla de inicio de sesi´
on Figu a B.2: Men´
u de inicio pa a p o eso
T as el inicio de sesi´
on, como puede e se apa ecen es opciones en el men´
u p incipal y
un bo ´
on ojo a ba a la de echa que si e pa a ce a la sesi´
on.
A con inuaci´
on apa ecen las di e en es p´
aginas que se desplegan en cada una de las
opciones del men´
u.
63
B.1. Mi pe il
Empezando po “Mi Pe il”, emos odos los da os del docen e, y adem´
as hay una unci´
on
pa a cambia la con ase˜
na, que ex iende una en ada de ex o, al y como se obse a en
la igu a B.4.
Figu a B.3: Apa ado “Mi pe il”
Figu a B.4: Elecci´
on de unanue a con a-
se˜
na
B.2. Mis clases
Vol iendo al inicio, el siguien e apa ado, con ´
ı ulo “Mis clases”, mues a la siguien e apa-
iencia:
Figu a B.5: Apa ado “Mis clases” pa a ol de p o eso
La opciones de a˜
nadi clase y elimina clase es ´
an disponibles en la ba a in e io dela
pan alla. Pa a a˜
nadi una clase apa ece un o mula io a ellena mien as que pa a elimina
la clase simplemen e se pide in oduci el nomb e que iden i ica a la asigna u a.
Figu a B.6: A˜
nadi clase Figu a B.7: Elimina clase
El siguien e paso es isualiza las p´
aginas de las opciones “Ve lis a de alumnos” y “Juego
de A a a es” que apa ecen pa a cada clase.
La lis a de alumnos a ´
ıa lige amen e si el juego de a a a es es ´
a ac i ado, compa ada
con la e si´
on de la lis a que apa ece cuando no hay a a a es.
Figu a B.8: Lis a de alumnos con el juego de
a a a es desac i ado
Figu a B.9: Lis a de alumnos con el juego de
a a a es ac i o
Pa a a˜
nadi alumnos en la clase, apa ece un o mula io muy simila al de a˜
nadi clases
como se mues a en la igu a a con inuaci´
on.
Figu a B.10: Fo mula io pa a a˜
nadi alumnos a la clase
B.3. Juego de a a a es
Pa a ac i a el juego de a a a es, es necesa io en a en la secci´
on “Juego de A a a es”,
que es ´
unica pa a cada clase. Aqu´
ı se ac i a el juego con un bo ´
on “ oggle”. Al clica en el
bo ´
on, ´
es e se uel e de colo e de y apa ecen odos los elemen os elacionados con el
juego en un apa ado cen ado en la pan alla.
Figu a B.11: Juego de a a a es desac i ado Figu a B.12: Juego de a a a es ac i ado
Escoge la amilia de a a a es, como ya hab´
ıamos comen ado en cap´
ı ulos an e io es, es
muy simple, el desplegable que apa ece en la plan alla mues a las opciones que hay.
T as escoge amilia y clica en el bo ´
on “Gua da ” de la igu a B.12, as la ase “Has
escogido la amilia:” apa ece el nomb e de la ´
ul ima amilia gua dada.
Figu a B.13: Fo mula io pa a a˜
nadi alumnos a la clase
Respec o a la secci´
on de “Pe misos” encon amos una p´
agina donde se pueden ca ga
a chi os de ex o. En la ba a de la pa e in e io de la pan alla hay dos bo ones, uno a
cada lado. El bo ´
on ca ga ex iende una pan alla que pe mi e selecciona a chi os del
disposi i o en el que se u iliza la aplicaci´
on. Una ez seleccionado el a chi o, haciendo
clic en “Subi ”, ´
es e se ca ga en la base de da os.
Figu a B.14: Ca ga de a chi os de ex o pa a
mos a en pe misos
Figu a B.15: Selecci´
on de a chi o pa a mos-
a po pan alla
Pa a cada pe miso hay un desplegable, que pe mi e e odos los a chi os que se han
ca gado p e iamen e. Eligiendo un a chi o y clicando en el bo ´
on de Gua da , el ex o del
a chi o apa ece po pan alla. Puede ap ecia se la secuencia de elemen os desc i a en la
igu a B.14.
AP ´
ENDICE C. IMAGENES DE LAS
FUNCIONALIDADES PARA EL ESTUDIANTE
El es udian e iene bas an es menos uncionalidades que el p o eso . La pan alla pa a
inicia sesi´
on en la aplicaci´
on sin emba go, es la misma.
Figu a C.1: Pan alla pa a inicia sesi´
on Figu a C.2: Men´
u de inicio Alumno
79
Los dos apa ados que se mues an pa ecen id´
en icos a los del p o eso , y de hecho
la p ime a imp esi´
on es esa, no hay nada di e en e a simple is a, sin emba go como
e emos a con inuaci´
on en el apa ado de “Mis asigna u as” no se o ecen las mismas
uncionalidades. El apa ado “Mi pe il” s´
ı que es id´
en ico.
Figu a C.3: Apa ado “Mi pe il” pa a ol de
alumno
Figu a C.4: Apa ado de asigna u as pa a el
alumno
Como puede ap ecia se en la igu a C.4, la secci´
on“Juego de a a a es” bajo el bo ´
on en el
que pone Dibujo iene un colo muy apagado, lo que signi ica que pa a la clase de Dibujo
el juego no es ´
a ac i ado. Puede e se la di e encia de colo compa ado con la clase de
F´
ısica, que es ´
a jus o encima.
Den o de cada asigna u a, los apa ados de “In o maci´
on” y “Juego de a a a es” se en
como en las imagenes expues as a con inuaci´
on.
Figu a C.5: Apa ado “In o maci´
on”
Figu a C.6: Secci´
on “Juego de a a a es” pa a
alumno
Las siguien es im´
agenes pe enecen a los di e en es apa ados de ma e ial pa a el a a a .
La di e ecia de es os apa ados con la gale ´
ıa de ma e ial del p o eso es que aqu˜
ni se
hace un il o de ma e ial po amilias. El p og ama de ec a si el a chi o pe enece a una
amilia o a o a g acias a las eglas de nomencla u a.
•Secci´
on de peinados:
Figu a C.7: Peinados amilia “minion” Figu a C.8: Peinados amilia “pe sona”
•Secci´
on de ojos
Figu a C.9: Ojos amilia “minion” Figu a C.10: Ojos amilia “pe sona”
•Secci´
on de complemen os:
Figu a C.11: Complemen os amilia “minion”
Figu a C.12: Complemen os amilia “pe so-
na”
•Secci´
on de bocas:
Figu a C.13: Bocas amilia “minion” Figu a C.14: Bocas amilia “pe sona”
Po ´
ul imo se ´
ıa necesa io explica las ´
ul imas is as a la que se puede accede
desde el apa ado de pe sonalizaci´
on del a a a .
Po una pa e enemos la lis a de a a a es. Si el bo ´
on mo ado que apa ece en la
pa e supe io de la de echa es ´
a ac i ado, el alumno iene pe miso pa a isualiza
la lis a de a a a es. La di e encia en e un alumno que puede accede y o o que no
es ´
a en el colo del bo ´
on, que se e m´
as apagado si no es ´
a accesible.
Figu a C.15: Pe miso pa a e la lis a de a a-
a es concedido
Figu a C.16: Pe miso pa a e la lis a de a a-
a es denegado
La e si´
on de la lis a a la que se accede es exac amen e la misma que la que puede
e el p o eso , apa ece en las igu as B.16 yB.17.
Con la siguien e is a se e mina po comple o el abanico de p´
aginas a las que
accede el alumno.
En la secci´
on “Pe misos” apa ecen los equisi os que el alumno debe cumpli pa a
pode accede a los apa ados de peinados, ojos, complemen os y e la lis a de
a a a es. Cada pe miso iene un indicado que apa ece en e de si ´
es e ha sido
condedido.
Figu a C.17: Vis a de pe misos pa a alumno
Figu a E.2: Valo aci´
on de la in ui i idad del m´
odulo
Figu a E.3: Elecci´
on de la unci´
on a o i a del juego
Figu a E.4: Opiniones sob e uncionespa a a˜
nadi al ol de p o eso
Figu a E.5: Valo aci´
on de las unciones del alumno
Figu a E.6: Respues as a “¿U iliza ´
ıas es e juego en u clase?”
Figu a E.7: P opues as de mejo a pa a el m´
odulo de a a a es
AP ´
ENDICE F. C ´
ODIGO DE ARCHIVO DE
SERVICIOS PARA LA BASE DE DATOS
impo { Injec able } om ’@angula /co e’;
impo { Obse able, o , om } om ’ xjs’;
impo { H pClien , H pHeade s } om ’@angula /common/h p’;
impo { Pe sona } om ’./Pe sona’;
impo { Clase } om ’./Clase’;
impo { Imagen } om ’./Imagen’;
impo { Con aine } om ’./Con aine ’;
impo { Img } om ’./Img’;
impo { Ma icula } om ’./Ma icula’;
// Las siguien es lib e ´
ıas impo adas son pa a pode ealiza ope aciones H p
impo { H p, ResponseCon en Type, Reques Op ions, Response, Heade s } om ’@angula /h p’;
@Injec able({
p o idedIn: ’ oo ’
})
expo class DbSe iceSe ice {
// C eo un a ay en el que oy a gua da im´
agenes
// que end an de un con enedo conc e o
imagenesPelos: Img[] = new A ay();
imagenesOjos: Img[] = new A ay();
imagenesComplemen os: Img[] = new A ay();
idclase: s ing;
NPe sona: s ing;
ma icula: Ma icula;
// Decla o como s ing la URL de la BDD a la que me quie o conec a
p i a e APIU l = ’h p://localhos :3000/api/Pe sonas’;
p i a e APIClases = ’h p://localhos :3000/api/Clases’;
p i a e APIFo os = ’h p://localhos :3000/api/imagenes’;
APIPe misos = ’h p://localhos :3000/api/pe misos/A chi osTex o’;
// Inse o en el cons uc o el se icio H p pa a pode hace las ope aciones
//necesa ias
cons uc o (p i a e h p: H pClien ,
p i a e h p2: H p) { }
// A pa i de aqu´
ı decla o las ope aciones que a a o ece es e se icio
97
// La siguien e unci´
on lama a un obse able de la lis a de pe sonas
// Po es o mismo hemos impo ado a iba la clase Obse able
dameTodos(): Obse able<Pe sona[]> {
// La ope acion ge del p o ocolo h p de uel e lo que iene
// en e "< >", en es e caso una lis a de pe sonas.
e u n his.h p.ge <Pe sona[]>( his.APIU l);
}
dameFo osCon aine (con aine : s ing): Obse able<any[]> {
e u n his.h p.ge <any[]>( his.APIFo os + ’/’ + con aine + ’/ iles’);
}
DameMa iculaAlumno(idAsigna u a: s ing) {
console.log( idAsigna u a );
e u n his.h p.ge <Ma icula[]>(’h p://localhos :3000/api/ma iculas? il e [whe e][idAsigna u a]=’ + idAsigna u a);
}
PonMa icula(ma icula: Ma icula ): Obse able<any> {
e u n his.h p.pos <any>(’h p://localhos :3000/api/ma iculas’, ma icula);
}
Cuen aMa iculas(): Obse able<any> {
e u n his.h p.ge <any>(’h p://localhos :3000/api/ma iculas/coun ’);
}
Elimina (nomb e: s ing): Obse able<any> {
e u n his.h p.dele e<any>( his.APIU l + ’/’ + nomb e);
}
Elimina Clase(idClase: s ing): Obse able<Clase> {
e u n his.h p.dele e<Clase>( his.APIClases + ’/’ + idClase);
}
Elimina Ma icula(ma icula: Ma icula): Obse able<any> {
console.log(’Voy a elimina la ma ´
ıcula de: ’ + ma icula.idAlumno);
console.log(’El id que elimino es: ’ + ma icula.id);
e u n his.h p.dele e<any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id);
}
DamePe sona(nomb e: s ing): Obse able<Pe sona> {
console.log(nomb e);
e u n his.h p.ge <Pe sona>( his.APIU l + ’/’ + nomb e);
console.log(Pe sona);
}
Se IdClase(clase: s ing) {
his.idclase = clase;
}
Se Nomb ePe sona(npe sona: s ing) {
his.NPe sona = npe sona;
}
Se Ma icula(ma i: Ma icula) {
his.ma icula = ma i;
}
Re u nNomb ePe sona() {
e u n his.NPe sona;
}
Re u nIdClase() {
e u n his.idclase;
}
Re u nMa i() {
e u n his.ma icula;
}
DameClase(idclase: s ing): Obse able<Clase> {
his.idclase = idclase;
console.log(’Te doy los da os de: ’ + idclase);
e u n his.h p.ge <Clase>( his.APIClases + ’/’ + idclase);
}
DameClases(): Obse able<Clase[]> {
e u n his.h p.ge <Clase[]>( his.APIClases);
}
ColocoPelo(elemen oP: s ing) {
console.log(’Me llega un: ’ + elemen oP);
i (elemen oP === unde ined || elemen oP === ’’) {
console.log(’No has seleccionado ning´
un pelo’);
} else {
console.log(’En o a coloca ’);
a imagen = documen .c ea eElemen (’img’);
imagen.s yle.posi ion = ’absolu e’;
// imagen.s yle.zIndex = ’1’;
imagen.s yle.le = ’0px’;
imagen.s yle. op = ’0px’;
imagen.s c = elemen oP;
documen .ge Elemen ById(’a a a ’).appendChild(imagen);
}
}
CambiaEs adoJuego(clase: Clase) {
i (clase.a a a es === ue) {
clase.a a a es = alse;
} else {
clase.a a a es = ue;
}
console.log(’Aho a el es ado es es e:’ + clase.a a a es);
e u n his.h p.pu <any>( his.APIClases + ’/’ + clase.id, clase);
}
C eaClase(clase: Clase): Obse able<Clase> {
// clase.admin = admin;
e u n his.h p.pos <Clase>( his.APIClases + ’/’ + clase.id, clase);
}
PonPass(alumno: Pe sona, nue opass: s ing): Obse able<any> {
alumno.pass = nue opass;
e u n his.h p.pu <any>( his.APIU l + ’/’ + alumno.nomb e, alumno);
}
// A˜
nadi una pe sona a la BBDD es una ope aci´
on pos
// equie e la URL y en es e caso la pe sona que debemos a˜
nadi
// Es a unci´
on ambi´
en de ul e un obse able de cualquie ipo
// Va a se un m´
e odo usado ´
unicamen e po el p o eso
PonPe sona(pe sona: Pe sona): Obse able<any> {
e u n his.h p.pos <any>( his.APIU l, pe sona);
}
// C eo una unci´
on que si e s´
olamen e pa a la ca ga de a chi os
// como im´
agenes o a chi os de ex o, se i ´
a pa a que el p o eso
// ca gue el ma e ial en la gale ´
ıa y los a chi os de ex o que i ´
an ligados
// a los pe misos 1, 2 y 3 pa a cons ui el a a a
DameCon enedo es(): Obse able<any[]> {
e u n his.h p.ge <any[]>( his.APIFo os);
}
DameFo o(idcon e: s ing) {
// his.Vacia A ay();
a i;
his.h p.ge <any>( his.APIFo os + ’/’ + idcon e + ’/ iles’)
.subsc ibe( o oscon aine => { console.log(’Tengo los a chi os del con aine : ’ + o oscon aine );
// his.nomb eslogos = o oscon aine ;
o (i = 0; i < o oscon aine .leng h; i++) {
console.log( o oscon aine [i].name);
his.h p2.ge ( his.APIFo os + ’/’ + idcon e + ’/download/’ + o oscon aine [i].name,
{ esponseType: ResponseCon en Type.Blob} )
.subsc ibe( esponse => {
console.log( esponse);
his.Ca ga Logos( esponse, idcon e); });
}
console.log(’Ye he acabado’);
});
}
DameLogosPelo() {
// console.log(’Ya he ellenado el modelo’);
e u n his.imagenesPelos;
}
DameLogosOjos() {
e u n his.imagenesOjos;
}
DameLogosComp() {
e u n his.imagenesComplemen os;
}
Ca ga Logos( esponse: Response, idcon e: s ing) {
cons blob = new Blob([ esponse.blob()], { ype: ’image/jpg’});
cons eade = new FileReade ();
eade .addE en Lis ene (’load’, () => {
i (idcon e === ’Pelos’) {
// console.log(’No s´
e si en a’);
his.imagenesPelos.push( eade . esul . oS ing());
}
i (idcon e === ’Ojos’) {
his.imagenesOjos.push( eade . esul . oS ing());
console.log( his.imagenesOjos);
}
i (idcon e === ’Complemen os’) {
his.imagenesComplemen os.push( eade . esul . oS ing());
console.log( his.imagenesComplemen os);
}
}, alse);
i (blob) {
eade . eadAsDa aURL(blob);
}
}
Gua da Pelo(ma icula: Ma icula, p1: s ing): Obse able<Ma icula> {
console.log(p1);
ma icula.URLpelo = p1;
console.log(’He llegado al se icio’);
console.log(’h p://localhos :3000/api/ma iculas/’ + ma icula.id);
e u n his.h p.pu <any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id, ma icula);
}
Gua da Ojos(ma icula: Ma icula, p2: s ing): Obse able<Ma icula> {
ma icula.URLojos = p2;
e u n his.h p.pu <any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id, ma icula);
}
Gua da Comp(ma icula: Ma icula, p3: s ing): Obse able<Ma icula> {
ma icula.URLcomplemen o = p3;
e u n his.h p.pu <any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id, ma icula);
}
Gua da Boca(ma icula: Ma icula, p4: s ing): Obse able<Ma icula> {
ma icula.URLboca = p4;
e u n his.h p.pu <any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id, ma icula);
}
Gua da P1(ma icula: Ma icula, alo p1: boolean): Obse able<Ma icula> {
ma icula.pelo = alo p1;
e u n his.h p.pu <any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id, ma icula);
}
Gua da P2(ma icula: Ma icula, alo p2: any): Obse able<Ma icula> {
ma icula.ojos = alo p2;
e u n his.h p.pu <any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id, ma icula);
}
Gua da P3(ma icula: Ma icula, alo p3: any): Obse able<Ma icula> {
ma icula.complemen o = alo p3;
e u n his.h p.pu <any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id, ma icula);
}
Gua da P4(ma icula: Ma icula, alo p4: any): Obse able<Ma icula> {
ma icula. e clase = alo p4;
e u n his.h p.pu <any>(’h p://localhos :3000/api/ma iculas/’ + ma icula.id, ma icula);
}
Mues aFiche os(): Obse able<Con aine []> {
e u n his.h p.ge <Con aine []>( his.APIPe misos + ’/ iles’);
}
Gua daFiche oPe miso1(clase: Clase, a chi o: s ing): Obse able<any> {
clase.p1 = a chi o;
e u n his.h p.pu <any>( his.APIClases + ’/’ + clase.id, clase);
}
Gua daFiche oPe miso2(clase: Clase, a chi o: s ing): Obse able<any> {
clase.p2 = a chi o;
e u n his.h p.pu <any>( his.APIClases + ’/’ + clase.id, clase);
}
Gua daFiche oPe miso3(clase: Clase, a chi o: s ing): Obse able<any> {
clase.p3 = a chi o;
e u n his.h p.pu <any>( his.APIClases + ’/’ + clase.id, clase);