Medusa: una aplicación web p og esi a pa a la
simulación de in e siones en c ip odi isas
Medusa: a p og essi e web app o simula ing
c yp ocu ency in es men s
T abajo de Fin de G ado
Cu so 2020–2021
Au o
Jo ge Roselló Ma ín
Di ec o
En ique Ma ín Ma ín
G ado en Ingenie ía de So wa e
Facul ad de In o má ica
Uni e sidad Complu ense de Mad id
Medusa: una aplicación web p og esi a pa a la
simulación de in e siones en c ip odi isas
Medusa: a p og essi e web app o simula ing
c yp ocu ency in es men s
T abajo de Fin de G ado en Ingenie ía de So wa e
Depa amen o de Sis emas In o má icos y Compu ación
Au o
Jo ge Roselló Ma ín
Di ec o
En ique Ma ín Ma ín
Con oca o ia: Junio 2021
G ado en Ingenie ía de So wa e
Facul ad de In o má ica
Uni e sidad Complu ense de Mad id
Ag adecimien os
A mi u o En ique, que me ha ayudado con el p oyec o y siemp e ha es ado ahí
con es ando mis dudas y dándome muy buenos consejos. A mis pad es po siemp e c ee
en mí y apoya me en odo lo que me he p opues o. A Ál a o po ayuda me a co egi
allos de esc i u a a úl ima ho a. Y po úl imo a i, Vale ia, g acias po escucha me y po
mo i a me a segui adelan e, sin i Medusa no hubie a sido posible.

Resumen
Medusa es una aplicación web p og esi a que e pe mi e simula la comp a y la en a
de c ip odi isas. El p oyec o iene dos componen es: el se ido y el clien e. El se ido
in eg a una API pa a pode accede a los p ecios de las di isas en iempo eal. El lado
del clien e de Medusa se ha diseñado pa a que sea ácil e in ui i o de usa , pe mi iendo el
acceso a usua ios que sien en cu iosidad po in e i en c ip odi isas pe o desconocen cómo
hace lo. Pa a accede a Medusa no es necesa io egis a se con un co eo y una con ase-
ña, solo se necesi a una cuen a de Google. La aplicación web es accesible a a és del enlace:
h ps://medusapp.li e
El código an o del clien e como del se ido se encuen an alojados en un eposi o io
de Gi hub y pueden se accedidos a a és de los siguien es enlaces:
h ps://gi hub.com/beybo/medusa
h ps://gi hub.com/beybo/medusa-se e
Palab as cla e
Vue.js, c ip odi isa, PWA, aplicación web p og esi a, SPA, aplicación página única, No-
de.js, Ja aSc ip , simulado , WebSocke
ii
Abs ac
Medusa is a p og essi e web applica ion ha allows you o simula e he pu chase and
sale o c yp ocu encies. The p ojec has wo componen s: he se e and he clien . The
se e in eg a es and API o access c yp ocu ency p ices in eal ime. The clien has been
designed o be easy and in ui i e o use, allowing access o use s in e es ed in in es ing
bu do no know how o do i . To use Medusa, no necessa y o egis e using a use and a
passwo d, you only need a Google accoun . The web applica ion is accessible h ough he
link:
h ps://medusapp.li e
The code o he clien and he se e is hos ed on a Gi hub epo and can be accessed
h ough he ollowing links:
h ps://gi hub.com/beybo/medusa
h ps://gi hub.com/beybo/medusa-se e
Keywo ds
Vue.js, c ip odi isa, PWA, p og essi e web applica ion, SPA, single page applica ion,
Node.js, Ja aSc ip , simula o , WebSocke
ix

Índice de código
5.1. Es ado del almacén de Medusa. . . . . . . . . . . . . . . . . . . . . . . . . . 23
6.1. De inición del esquema de Usua io . . . . . . . . . . . . . . . . . . . . . . . 31
6.2. De inición del a ibu o “ca e a” pe enecien e al esquema de Usua io . . . . 31
6.3. De inición de un ansacción pe enecien e al a ibu o “ ansacciones” de
unaca e a..................................... 32
6.4. De inición del esquema de Eliminado. . . . . . . . . . . . . . . . . . . . . . . 32
7.1. Mani es .json gene ado po Wo kbox . . . . . . . . . . . . . . . . . . . . . . 36
x ii
Cap´
ı ulo 1
In oducción
En es e capí ulo se a a explica la mo i ación pa a desa olla Medusa, los obje i os
y el plan de abajo que se ha seguido.
1.1. Mo i ación
Las c ip odi isas son un ema de con e sación cada ez más ecu en e, a pesa de que
muchas pe sonas no las en ienden o no saben cómo uncionan, es án in e esadas en in e i
algo de dine o. Siemp e que ocu e una subida o una bajada del p ecio odo el mundo
habla de ello. El p oblema de las c ip odi isas es que son un me cado muy olá il, lo que
puede p o oca que las in e siones ealizadas caigan en picado o se ipliquen. Po ello, es
impo an e educa y pe mi i que las pe sonas puedan simula la in e sión en el me cado
de las c ip odi isas sin ningún ipo iesgo, de es a idea nace Medusa.
1.2. Obje i os
El obje i o p incipal de es e p oyec o es desa olla un simulado web de in e sión en
c ip odi isas usando ecnologías y biblio ecas mode nas. Las me as conc e as de Medusa
son:
Cons ui una aplicación web p og esi a con un diseño mode no y a ac i o que sea
ácil de usa pa a que cualquie usua io independien emen e de su ni el écnico pueda
u iliza la.
Diseña la web pa a que sea una aplicación de página única, así la expe iencia de
usua io de la web a a se compa able a la de una aplicación na i a, ya que no hay
ca gas en e páginas.
Realiza una comunicación en iempo eal con el se ido , que pe mi a ac ualiza
elemen os como los p ecios de las c ip odi isas sin in e acción po pa e del usua io.
Regis a y au en ica usua ios median e su cuen a de Google pa a no ene que
implemen a un sis ema de egis o p opio, y con es o alen a a los usua ios a usa
la aplicación ya que no es necesa io egis a se usando un usua io y una con aseña.
1
2Capí ulo 1. In oducción
Ma zo
Ab il Mayo
Junio
Análisis de equisi os
Implemen ación
Despliegue
Memo ia
11/03 19/03 26/04 15/05
Figu a 1.1: Plani icación del abajo de in de g ado
1.3. Plan de abajo
Medusa empezó su desa ollo en el mes de ma zo, es o se debe a que es aba en o o
abajo de in de g ado al comienzo del cu so, pe o en el mes de ma zo decidí sali me
del p oyec o ya que es aba más o ien ado a la in es igación, y me cos aba compagina lo
con las clases y mi ac ual abajo. Así que decidí empeza un abajo de in de g ado
po mi cuen a o ien ado al desa ollo de una aplicación. Es po es o que las a eas se han
enido que condensa pa a pode cumpli con las echas es ablecidas. En la igu a 1.1 se
puede ap ecia la plani icación que se ha seguido en el p oyec o de Medusa, las a eas del
diag ama son:
Análisis de equisi os (11 de ma zo de 2021 a 18 de ma zo de 2021): elección
de las ecnologías cla e pa a el desa ollo de Medusa. En es a ase del p oyec o se
decidió el uso de ecnologías como Vue.js [1] pa a el lado del clien e. Se decidió usa
Vue.js en ez de amewo ks simila es como Angula [2] o Reac [3] po que Vue.js
iene una cu a de ap endizaje más sencilla y po el sis ema de componen es que
u iliza.
Implemen ación (19 de ma zo de 2021 a 15 de mayo de 2021): desa ollo de la
aplicación web p og esi a y el se ido . En es a a ea se ha in e ido el mayo iempo
del p oyec o. La igu a 1.2 con iene una linea empo al con los hi os más impo an es
de la implemen ación de Medusa.
Despliegue (16 ab il de 2021 a 24 ab il de 2021): despliegue de Medusa pa a que
pueda se accedida de mane a pública. Fue necesa io la con igu ación de un dominio,
además de la pues a en ma cha del se ido y del clien e.
Memo ia (16 de mayo de 2021 a 15 de junio de 2021: elabo ación de la memo ia
del p oyec o donde se de alla el desa ollo.
1.4. O ganización de la memo ia
En el capí ulo 3 se p esen an y se explican odas las ecnologías y concep os que o man
pa e de Medusa. En el siguien e capí ulo, el 4, se acla a la o ganización de los sis emas
que componen Medusa y cómo in e ac úan en e ellos. En el capí ulo 5 se explica con
de alle las p incipales a eas ealizadas pa a la implemen ación del clien e en Medusa. El
capí ulo 6 es muy simila al an e io solo que se de alla odo lo elacionado con el se ido
de Medusa. En el capí ulo 7 se de alla odo lo necesa io pa a que una web pueda se
aplicación web p og esi a y ambién se explica la implemen ación de Medusa como PWA.
1.4. O ganización de la memo ia 3
Ab il
Ma zo
(16 de ma zo)
P ime as p uebas con el in e az y el se ido .
(20 de ma zo)
Ag egado Vuex y el inicio de sesión con Google.
(23 de ma zo)
Rediseño o al de la web pa a que enga un aspec o más mode no.
(28 de ma zo)
Rees uc u ación de muchos de los componen es de Vue.js.
(11 de ma zo)
Inicio del desa ollo de Medusa.
(2 de ab il)
Ag egada la uncionalidad pa a comp a y ende di isas.
(6 de ab il)
Cambio del diseño de los iconos y de los g áficos.
Mayo
(14 de ab il)
P ime a e sión de la is a de anking.
(17 de ab il)
Adap ación de la in e az pa a mó il.
(28 de ab il)
Nue o g áfico de a a en la is a de ca e as.
(30 de ab il)
Ag egado da os pa a 1 día, 1 semana y 1 mes a los g áficos de ba as.
(1 de mayo)
Ag egada la biblio eca downsample pa a educi el amaño de los da os.
(3 de mayo)
P ime as p uebas pa a hace que Medusa sea una PWA.
(8 de mayo a 15 de mayo)
A eglo de allos.
Figu a 1.2: Hi os de la implemen ación de Medusa
En el capí ulo 8 se especi ica cómo ha sido el despliegue de Medusa y qué se icios se
han u ilizado. El capí ulo 9 con iene un ejemplo paso a paso donde se mues a el uso de
Medusa. Po úl imo, el capí ulo 10 con iene las conclusiones del desa ollo de Medusa y el
abajo u u o que se puede llega a ealiza .

Chap e 2
In oduc ion
This chap e will explain he mo i a ion behind Medusa, he objec i es and he wo k-
plan ha has been ollowed.
2.1. Mo i a ion
C yp ocu encies a e an inc easingly ecu ing opic o con e sa ion nowadays, despi e
he ac ha many people don’ unde s and hem o don’ know how hey wo k, hey a e
in e es ed in in es ing some money. Whene e he p ice ises o alls e e yone is alking
abou i . The p oblem wi h c yp ocu encies is ha he ma ke is e y ola ile, which can
cause in es men s made o plumme o iple in alue. Tha ’s why i ’s e y impo an
o educa e and allow people o simula e c yp ocu encies in es men s wi hou any isk,
Medusa was bo n om his idea.
2.2. Objec i es
The main objec i es o his p ojec is o de elop a web simula o o c ip ocu ency
in es men s using mode n echnologies an lib a ies. The main goals a e:
Build a p og essi e web applica ion wi h a mode n and a ac i e design while being
easy o use, so any use ega dless o hei echnical le el can use i .
The web applica ion mus be a single page app, so he use expe ience will be com-
pa able o ha o a na i e applica ion, since he e a e no e esh be ween pages.
The communica ion be ween he se e and he clien mus be in eal ime, which
allows upda ing elemen s such as c yp ocu encies p ices wi hou use in e ac ion.
The egis a ion and login should be done using a Google accoun , so ha he e
is no need o implemen a cus om au hen ica ion sys em. I also encou ages use s
o use he applica ion because hey don’ need o egis e using a cus om use and
passwo d.
5
6Chap e 2. In oduc ion
Ma ch
Ap il
May
June
Requi emen Analysis
Implemen a ion
Deploymen
Repo
11/03 19/03 26/04 15/05
Figu e 2.1: Medusa p ojec planning
2.3. Wo kplan
Medusa de elopmen s a ed in he mon h o Ma ch, his is because I was in ano he
p ojec a he beginning o he cou se, bu in Ma ch I decided o abandon he p ojec as
i was mo e esea ch o ien ed and i was ex emely challenging o me o combine i wi h
wo k and classes. The igu e 2.1 shows he planning ha has been ollowed in he p ojec ,
he asks in he diag am a e:
Requi emen s analysis (Ma ch 11, 2021 o Ma ch 18, 2021): choice o he key
echnologies o he p ojec . This is when echnologies like Vue.js [1] whe e selec ed
o he clien -side. I was decided o use Vue.js ins ead o simila amewo ks like
Angula [2] o Reac [3], because Vue.js has an easie lea ning cu e and because o
he componen s sys em ha i uses.
Implemen a ion (Ma ch 19, 2021 o May 15, 2021): de elopmen o he p og essi e
web applica ion and he se e . This ask has been he mos expensi e in e ms
o ime in es ed. The igu e 2.2 con ains a imeline o he key miles ones o he
implemen a ion o Medusa.
Deploymen (Ap il 16, 2021 o Ap il 24, 2021): deploymen o Medusa so ha i
can be publicly accessed. A domain was equi ed o his ask, in addi ion o he
con igu a ion o he se e and he clien .
Repo (May 16, 2021 o June 15, 2021): c ea ion o he p ojec epo whe e he
de elopmen o he p ojec is de ailed.
2.4. Con en
In chap e 3 all he echnologies and concep s ha a e pa o Medusa a e p esen ed
and explained. In he nex chap e , chap e 4, cla i ies he o ganiza ion o he sys ems ha
make up Medusa and how hey in e ac wi h each o he . In chap e 5 he implemen a ion
o he clien is explained in de ail. Chap e 6 is e y simila o he p e ious one bu ins ead
o he clien , he se e is explained. In chap e 7 all he equi emen s o a websi e o be a
p og essi e web applica ion a e de ailed and he implemen a ion o Medusa as a p og essi e
web app is also explained. Chap e 8 speci ies how Medusa has been deployed and wha
se ices ha e been used o he deploymen . Chap e 9 con ains a s ep-by-s ep example
showing he use o Medusa. Finally, chap e 11 con ains he conclusion o he de elopmen
o Medusa an he u u e wo k ha may be done.
2.4. Con en 7
Ap il
Ma ch
(Ma ch 16)
Fi s use in e ace and se e es s.
(Ma ch 20)
Added Vuex and Google accoun suppo .
(Ma ch 23)
To al edesign o he app wi h a mo e mode n design.
(Ma ch 28)
Re ac o ing o he Vue.js componen es.
(Ma ch 11)
S a o de elopmen .
(Ap il 2)
Added uncionali y o buy and sell cu encies.
(Ap il 6)
Change he design o he icons and g aphics.
May
(Ap il 14)
Fi s e sion o he anking page.
(Ap il 17)
Phone adap a ion o he app.
(Ap il 28)
New piecha on he walle s page.
(Ap il 30)
Added new anges o he p ice cha s (1 day, 1 week, 1 mon h).
(May 1)
Added de downsample lib a y o educe he size o he p ice da a.
(May 3)
Fi s es s o make Medusa a PWA.
(May 8 o May 15)
Bug fixing.
Figu e 2.2: Miles ones o he implemen a ion o Medusa
14 Capí ulo 3. P elimina es
eyJhbGciOiJIUzI1NiJ9.eyJpZCI6IjEiLCJub21icmUiOiJQZXBlIn0.
z XAwXWa5XLdGjOm1- TC0y aMyFI7yWPd iHk0b8Zcc
eyJ0e...
{
" yp":"JWT",
"alg":"HS256"
}
Cabece a
eyJpZ...
{
  "id":1,
  "nomb e":"Pepe"
}
Ca ga ú il
z XAw...
HMACSHA256(
BASE64(Cabece a)+"."+
BASE64(Ca ga Ú il)
,"sec e o")
Fi ma
Figu a 3.2: JWT y decodi icación de los es elemen os que lo componen
Todas las cuen as de Google ienen un iden i icado único. Cuando se inicia sesión
usando la API de Google el iden i icado es accesible. En el caso de Medusa el ID de
Google es u ilizado pa a pode con as a con la base de da os el usua io, en el caso de que
no exis a se inicia el p oceso de egis o de un usua io nue o.
3.5.3. In e cambio de ecu sos de o igen c uzado
El in e cambio de ecu sos de o igen c uzado (CORS) [22] es un mecanismo del na e-
gado que habili a a una página web el acceso con olado a ecu sos que es án ubicados
ue a del dominio ac ual. La con igu ación de CORS se manda desde el se ido al clien e
en las cabece as HTTP. Las pe iciones que u ilizan CORS son:
Pe iciones AJAX.
Fuen es web.
Tex u as WebGL.
Imágenes dibujadas en una e ique a can as usando el mé odo d awImage.
Hojas de es ilo (pa a acceso CSSOM).

3.5. Segu idad y au en icación 15
Sc ip s (pa a excepciones inmu adas).
En odas las pe iciones del lis ado an e io , el na egado po de ec o bloquea el acceso
a los ecu sos en el caso de que es én en un o igen dis in o, po o igen dis in o se en iende:
un esquema di e en e (HTTP o HTTPS), un dominio di e en e (incluye los subdominios)
y un pue o di e en e. Pa a pone lo en con ex o con un ejemplo, si un sc ip de la web
ejemplo.com quie e accede a una uen e alojada en p ueba.ejemplo.com, es necesa io que
p ueba.ejemplo.com enga con igu ada las cabece as CORS co ec amen e pa a pe mi i
el acceso a ejemplo.com.
Cap´
ı ulo 4
O ganización del sis ema
Los componen es p incipales de Medusa son el clien e y el se ido , que se comunican
en e ellos usando dos p o ocolos: HTTP y WebSocke s. La au en icación se ealiza usando
la API OAu h 2.0 de Google. La API que el p oyec o usa pa a ob ene los p ecios de las
di isas en iempo eal, es la de Coingecko. Po úl imo, la aplicación u iliza MongoDB pa a
almecena los da os ela i os a los usua ios.
En la igu a 4.1 se puede obse a el mapa de sis emas de Medusa. El clien e in e ac úa
an o con el p opio se ido de Medusa, como con la API de Google pa a ealiza el
inicio de sesión. Po o o lado, el se ido de Medusa ( odos los elemen os den o del
ec ángulo neg o), in e ac úa con la base de da os, con la API de Coingecko y con la API
de Google pa a e i ica el inicio de sesión. A con inuación, de alla emos la in e acción
en e componen es que se p oduce en las dos a eas que u ilizan APIs ex e nas: el p oceso
de au en icación y la ob ención de p ecios de las dis in as di isas.
4.1. Au en icación
Como se ha mencionado an e io men e, oda la au en icación se hace u ilizando la API
de Google OAu h 2.0. Es a decisión se omó al p incipio del desa ollo po dos azones
p incipalmen e:
1. Agiliza el desa ollo al no ene que hace un sis ema de inicio de sesión p opio,
donde ene que almacena las con aseñas, en ia co eos de con i mación, ese eos
de con aseña, e c.
2. Incen i a su uso al no ene que egis a e con u co eo, lo que consigue que más
usua ios se acaben egis ando [23].
El p oceso de au en icación de Medusa in e ac úa con dos sis emas, p ime o con Google
pa a e i ica que la cuen a es álida, y segundo con la p opia base de da os de Medusa
pa a e i ica si el usua io exis e. El p oceso de inicio de sesión/ egis o se puede obse a
en la igu a 4.2 y iene los siguien es pasos:
1. El clien e inicia sesión usando su cuen a de Google. Google de uel e al clien e un
oken de acceso.
2. El oken de acceso es mandado al se ido po el clien e.
17
18 Capí ulo 4. O ganización del sis ema
Clien e (Medusa)
Se ido
Se ido (Google)
Au en icación que
Gene a un Token
Ve ificación del Token
En iado po el Clien e
HTTP
: Pa a au en ica se
Websocke
: El es o de
comunicaciones.
BDD
Se ido (API Coingecko)
Se ido (Medusa)
Figu a 4.1: Mapa de sis emas de Medusa
3. El se ido e i ica que el oken de acceso es álido y comp ueba si el ID de Google
ya es á egis ado en Medusa.
4-a. En el caso de que el ID de Google exis a, el se ido gene a un JWT con el campo
egis ado como ue, que manda al clien e.
4-b. Si no exis e el ID de Google, el se ido manda al clien e un JWT con el campo
egis ado como alse pa a que se p oceda con el egis o.
4-b1. El clien e manda el JWT gene ado an e io men e jun o con el nomb e de usua io
elegido.
4-b2 Si el nomb e de clien e es álido, el se ido manda al clien e un JWT con el
campo egis ado a ue pa a que ealice el inicio de sesión.
5. El clien e se conec a al se ido median e un WebSocke usando el JWT gene ado
po el se ido .
4.2. P ecios de las di isas
Un elemen o c ucial pa a el uncionamien o de Medusa es dispone del p ecio de las
di isas en iempo eal. Como puedes comp a y ende di isas y iene que e leja se en u
cuen a, es impo an e que el se ido y el clien e engan el p ecio de las di isas sinc onizado
en odo momen o. El se ido lo necesi a pa a e i ica que se puede ealiza una comp a
de la di isa, y el clien e pa a que el usua io pueda consul a los p ecios y decidi sabe qué
di isas comp a y ende .
4.2. P ecios de las di isas 19
Clien e de
Medusa
API de Google
Inicia sesión con Google
Se ido de
Medusa
Token de Acceso
Ob ene Token Inicio de Sesión
(Token de Acceso)
JWT
(Campo egis ado: ue o alse)
Ve ifica Token de Acceso
Token de Acceso Ve ificado
Regis o
(JWT + Nomb e Usua io)
JWT
(Campo egis ado: ue)
Conexión al WebSocke
(Usando JWT)
El p oceso de egis o sólo ocu e si
el campo
egis ado
es
alse
.
El campo
egis ado
es
alse
si no hay
una cuen a en la BDD con el ID de
Google del
oken de acceso
.
Regis o
Figu a 4.2: Diag ama del p oceso pa a inicia sesión y egis o de Medusa
Pa a que uncione odo es e sis ema e a impo an e encon a una API obus a y es able
y que se adap a a a mis necesidades. Finalmen e me decidí po la API de Coingecko [24].
Como iene una biblio eca de Ja aSc ip [25], la implemen ación en el se ido ue muy
sencilla. Uno de los pun os posi i os de usa la API de Coingecko es que no necesi as ningún
ipo de cla e pa a pode usa su se icio. La única limi ación es que no puedes hace más
de 10 llamadas al segundo po di ección IP [26]. Coingecko además ope a el 99,78 % del
iempo sin caídas [27].
La API es llamada cada 30 segundos pa a pode e esca los p ecios, si de ec a que
hay p ecios nue os, p ime o los almacena pa a los nue os clien es que se conec en, y luego
los manda a los clien es que es án conec ados en ese momen o al se ido median e los
WebSocke s.

Cap´
ı ulo 5
De alles del clien e
En es e capí ulo se de alla odo lo elacionado con el clien e de Medusa. El obje i o al
desa olla la in e az de Medusa e a que ue a lo más in ui i a posible. La igu a 5.1 es
el mapa web de Medusa, donde las dos únicas páginas accesibles sin habe iniciado sesión
son: Login yRegis o. En el caso de que un usua io inicie sesión po p ime a ez, debe
comple a el egis o.
5.1. C eación de la in e az usando Vue.js
Uno de los p incipales obje i os al ealiza Medusa ue el de c ea una aplicación de
página única (SPA). Pa a acili a el desa ollo de una SPA se ha u ilizado el amewo k
de Vue.js. Adicionalmen e, exis en algunas biblio ecas o iciales que b indan uncionalidad
ex a a un p oyec o de Vue.js. Las dos biblio ecas que se han in eg ado en Medusa son:
Vue Rou e [28] y Vuex [29].
5.1.1. Vue Rou e
Como Medusa es una SPA, es impo an e implemen a un sis ema que e pe mi a
na ega en e los dis in os componen es. G acias a Vue Rou e puedes de ini odas las
u as de la web y enlaza las a los dis in os componen es de Vue.js. En la abla 5.1 se
pueden ap ecia las u as p incipales de Medusa con el componen e de Vue.js al que se han
enlazado. Una de las en ajas de usa Vue Rou e es que en el momen o en el que se na ega
a o o componen e, la URL de la ba a del na egado cambia á, pe mi iendo po ejemplo
pode pulsa a ás en el na egado pa a ol e al componen e an e io . Es o pe mi e que
la expe iencia de usua io sea la misma que al usa una página web adicional.
Vue Rou e e pe mi e de ini una u a comodín pa a cuando la URL in oducida no
exis a. En el caso de Medusa, esa u a se enlaza con el componen e de E o 404. ue,
el cual con iene una página de e o 404 con el diseño de Medusa. Pa a que Vue Rou e
uncione co ec amen e, es impo an e con igu a el se ido del clien e pa a que odas las
pe iciones se edi ijan al iche o index.h ml.
5.1.2. Vuex
Como se ha explicado en la sección 3.3.4 de los p elimina es, Vue.js es un amewo k
p og esi o que implemen a un ende izado p og esi o de los componen es. Pa a ello, ca-
da componen e de Vue.js iene asociado un es ado. El es ado de un componen e como
21
22 Capí ulo 5. De alles del clien e
Página Inicial
Regis o
Accesibles sin inicia sesión
Ca e as
Ránking
Pe il
Ca e a
Login
Figu a 5.1: Mapa de la web de Medusa
Ca e a. ue es una a iable que con iene los da os de la ca e a que se es é iendo. La
complejidad aumen a cuando exis en muchos componen es que compa en es ado, en es e
caso, hay que desa olla un sis ema en cascada donde el componen e pad e iene el es ado
y lo a compa iendo con los componen es hijos. En el caso de que uno de los subcompo-
nen es ealice una modi icación del es ado, se lo iene que comunica al componen e pad e
a a és de un e en o pa a que pueda ac ualiza el es ado y a su ez a los o os subcompo-
nen es. Hace lo de es a o ma implica aumen a la complejidad del código, y pa a e i a lo
los desa ollado es de Vue.js c ea on Vuex.
Vuex es á diseñado usando el pa ón de diseño de Flux [30]. Vuex es una biblio eca pa a
adminis a el es ado de la aplicación pe mi iendo concen a el es ado que compa en los
componen es en lo que se denomina un almacén. El almacén es accesible desde cualquie
componen e, además, es eac i o, lo que quie e deci que en el momen o en el que un
componen e modi ique el es ado del almacén, el es o de componen es que usan ese es ado
an a se no i icados de mane a au omá ica ecibiendo el alo ac ualizado. El almacén de
Vuex es á di idido en:
s a e: con iene el es ado del almacén. En el ex ac o de código 5.1 se puede obse a
la de inición del es ado pa a el almacén de Vuex en Medusa. Hay alo es como el de
conec ado que pe mi e a los componen es sabe si el clien e es á conec ado al socke .
mu a ions: las mu aciones son las unciones que modi ican el es ado del almacén.
5.1. C eación de la in e az usando Vue.js 23
Ru a Componen e
/ Login. ue
/ egis o Regis o. ue
/inicio Inicio. ue
/ca e as Ca e as. ue
/ca e a/:id Ca e a. ue
/ca e a- ia Ca e aFia . ue
/ anking Ranking. ue
/pe il Pe il. ue
* E o 404. ue
Tabla 5.1: Ru as y a que componen e de Medusa pe enecen.
1{
2
3usua io :{
4id_google:’’,
5nomb e :’’,
6 ese s :0,
7 echa_ egis o :’’,
8ca e a :{...}
9},
10
11 anking :[],
12
13 di isas :{...},
14
15 conec ado: alse,
16 ema :" cla o ",
17 ca gando: alse
18 }
Código 5.1: Es ado del almacén de Medusa.
Solo son llamadas desde las acciones del almacén.
ac ions: las acciones son unciones que se llaman desde el componen e. Se ejecu an
siemp e de o ma asínc ona, po lo an o, es aquí donde se llama po ejemplo a una
API si que emos usa su esul ado en el almacén. Pa a que una acción modi ique el
es ado del almacén iene que usa una unción de inida como mu ación.
ge e s: son unciones que de uel en el es ado del almacén. Los ge e s son las
unciones que se usan en los componen es pa a pode accede al es ado del almacén.
En la igu a 5.2 se puede obse a un esquema con odos los componen es del almacén
de Vuex. Un componen e de Vue.js in e ac úa solo con las acciones y los ge e s.
30 Capí ulo 6. De alles del se ido
api
coingecko.js
google.js
con olado
c ip odi isas.js
socke .js
usua io.js
modelo
c ip odi isas.js
usua io.js
eliminado.js
u as
login.js
index.js
Figu a 6.1: Es uc u a del se ido de Medusa
o bo ado su cuen a. El a ibu o ca e a se a a de un obje o donde cada a ibu o es
una ca e a dis in a. Además de las c ip odi isas exis e la ca e a de ia , que con iene
los eu os del usua io. Cuando se c ea un nue o usua io o se ese ea uno ac ual, el alo de
la ca e a de ia es de 10.000,00 e, y el es o de 0,00 e.
El ex ac o de código 6.2 con iene la de inición del a ibu o ca e a del esquema de
Usua io. Como se ha mencionado an e io men e, el a ibu o ca e a con iene odas las
ca e as del usua io (8 ca e as de c ip odi isas y 1 de ia ). Cada ca e a iene como
a ibu os: la can idad y un ec o con las ansacciones.
Las ansacciones se de inen como en la e e encia de código 6.3. El a ibu o ipo es un
enume ado con dos alo es (comp a y en a), de es a o ma, en el momen o de la inse ción
de una nue a ansacción Mongoose puede ealiza una alidación. Un a ibu o que es
u ilizado solo en las ansacciones de la ca e a de ia es el de de alles, cuyo alo es
el nomb e de la c ip odi isa implicada en la ansacción. Po ejemplo, en el caso de una
comp a 100,00 ede Bi coin, se añade una nue a ansacción de ipo en a a la ca e a
de ia con el alo de “bi coin” en el a ibu o de alles.
6.1.2. Esquema de Eliminado
Cuando un usua io bo a su cuen a, se ag ega a la colección de eliminados. El ex ac o
de código 6.4 es la de inición del esquema de Eliminado. Los a ibu os que iene son el ID
de Google y el núme o de ese s que iene el usua io. De es a mane a si un usua io uel e
a c ea su cuen a con el mismo ID de Google, se es au a su núme o de ese s.
6.2. Exp ess
Exp ess es la biblio eca que se ha usado pa a p ocesa las pe iciones HTTP que ecibe
el se ido . Se han in eg ado dos biblio ecas auxilia es a Exp ess:
helme : pe mi e mejo a la segu idad de una aplicación que usa Exp ess, g acias a
la con igu ación de algunas cabece as HTTP. En o al con igu a 11 cabece as HTTP
a a és de middlewa es de Exp ess. Algunas de es as cabece as son:

6.2. Exp ess 31
1{
2id_google:{
3 ype :S ing ,
4 equi ed: ue
5},
6nomb e :{
7 ype :S ing ,
8 equi ed: ue
9},
10 email:{
11 ype :S ing ,
12 equi ed: ue
13 },
14 echa_ egis o :{
15 ype :Da e,
16 de aul :Da e.now
17 },
18 ese s :{
19 ype :Numbe ,
20 de aul :0
21 },
22 ca e a :{...}
23 }
Código 6.1: De inición del esquema de Usua io
22 ca e a :{
23 bi coin :{
24 can idad:Numbe ,
25 ansacciones:[... ]
26 },
27
28 ...
29
30 ia :{
31 can idad:Numbe ,
32 ansacciones:[... ]
33 }
34
35 }
Código 6.2: De inición del a ibu o “ca e a” pe enecien e al esquema de Usua io
32 Capí ulo 6. De alles del se ido
1{
2_id : alse,
3can idad:Numbe ,
4 echa:{
5 ype :Da e,
6de aul :Da e.now
7},
8p ecio :Numbe ,
9 ipo :{
10 ype :S ing ,
11 enum :[’comp a ’,’ en a ’],
12 de aul :’comp a ’
13 },
14 comision:{
15 ype :Numbe ,
16 de aul :0
17 },
18 de alles:S ing
19 }
Código 6.3: De inición de un ansacción pe enecien e al a ibu o “ ansacciones” de una
ca e a.
1{
2id_google:{
3 ype :S ing ,
4 equi ed: ue
5},
6 ese s :{
7 ype :Numbe ,
8de aul :0
9},
10 }
Código 6.4: De inición del esquema de Eliminado.
6.2. Exp ess 33
•Con en -Secu i y-Policy: se con igu a pa a mi iga a aques de c oss-si e sc ip-
ing.
•S ic -T anspo -Secu i y: es a cabece a pe mi e a un na egado p io iza
el uso de HTTPS en el caso de que la conexión se haya ealizado a a és de
HTTP.
body-pa se : pe mi e pa sea los cue pos de las pe iciones HTTP en an es. Se usa
pa a pode accede a los da os que se mandan desde el clien e en una pe ición POST.
En el manejado de u as pa a la URI /login se han de inido dos u as POST: /google
y/ egis o.
6.2.1. Ru a /login/google
Es a es la u a donde se inicia sesión usando Google. Recibe un obje o llamado google
que iene odos los da os necesa ios pa a e i ica que el inicio de sesión se ha ealizado
co ec amen e en el clien e usando una cuen a de Google. Una ez comp obado que el inicio
de sesión y los da os son co ec os, comp ueba si en la base de da os exis e el ID de Google
de la cuen a. El se ido gene a un JWT con los siguien es da os:
email: el email de la cuen a de Google que se ha u ilizado pa a inicia sesión.
id: el iden i icado de la cuen a de Google.
egis ado: si el usua io ya es á egis ado en Medusa o no (puede se ue o alse).
6.2.2. Ru a /login/ egis o
En es a u a se hace el egis o de un usua io de Medusa. Recibe dos alo es po POST:
nomb e y oken. El alo del campo nomb e con iene el nomb e de usua io, y el campo
oken con iene el JWT que se gene ó al in en a hace inicio de sesión. Pa a que el egis o
se comple e es necesa io que:
1. El JWT en iado sea álido.
2. El campo egis ado del oken enga el alo alse.
3. El nomb e de usua io solo enga le as y núme os, y una longi ud de 5 a 14 ca ac e es.
4. No haya un usua io de Medusa con el mismo nomb e.
5. No exis a o o usua io con el mismo ID de la cuen a de Google.
An es de c ea el usua io, ambién se comp ueba si el ID de Google es á en la colec-
ción de eliminados, es o es necesa io en el caso de que el usua io ya u ie a una cuen a
an e io men e y así pode ca ga el núme o de ese s que enía. Finalmen e, el se ido
de uel e un JWT al clien e pa a que pueda ealiza la conexión al se ido median e los
WebSocke s.
34 Capí ulo 6. De alles del se ido
6.3. Comunicación con el clien e usando Socke .io
Pa a ealiza la comunicación con el clien e a a és de WebSocke s se ha u ilizado la
biblio eca de Socke .io [44]. Como es necesa io e i ica que la conexión al socke se es á
ealizando con una pe sona que ha iniciado sesión, se ha in eg ado la biblio eca socke io-
jw [47]. De es a o ma, si en la conexión inicial al socke el clien e no adjun a un JWT
álido se echaza la conexión.
Socke .io u iliza un sis ema de mensajes donde puedes escucha o en ia mensajes. El
se ido puede emi i un mensaje a:
Un socke especí ico.
Todos los socke s.
Los socke s de una sala (en inglés: oom). Pa a en ia un mensaje a una sala, es
necesa io sabe su nomb e.
Las salas e pe mi en di idi a los socke s en g upos. Cuando un nue o clien e se conec a
a Medusa, su socke se une a una sala que iene como nomb e el _id del documen o con
sus da os de MongoDB. Es o se hace pa a que en el caso de que haya a ias conexiones
del mismo usua io, las acciones se puedan p opaga . Es deci , si un usua io es á conec ado
desde dos pes añas del na egado y en una hace una comp a de una di isa, se a a e leja
en iempo eal en la o a pes aña.
Como el oken iene el ID del usua io, en el momen o de la conexión se accede a la base
de da os pa a ca ga odos los da os del usua io y en ia los al clien e. El ID del usua io
se ag ega como a ibu o al socke pa a que en el momen o en el que se quie a hace una
ope ación con a la base de da os, se pueda sabe a qué usua io pe enece el socke .
El se ido escucha los siguien es mensajes que emi e el clien e:
TRANSACCION: es e mensaje lo emi e el clien e cuando quie e c ea una nue a ansac-
ción. An es de c ea la ansacción comp ueba si es álida y pa a ello e i ica aspec os
como: si el ID de la di isa exis e o si el p ecio es el mismo que iene egis ado el
se ido . En el caso de la comp a, se comp ueba si el usua io iene su icien es ondos
en su ca e a de ia pa a pode ealiza la.
RANKING: de uel e un lis ado con el anking de los usua ios que ienen más dine o.
Pa a calcula el o den del anking, se suma el alo en eu os de odas las ca e as.
ese ea : acía odas las ca e as de c ip odi isas del usua io. La ca e a de ia
se modi ica pa a que enga un balance de 10.000,00 e. Además, suma uno al núme o
de ese s del usua io y lo gua da en la base de da os.
bo a -cuen a: se bo a la cuen a del usua io de la base de da os. Asimismo, suma
uno al núme o de ese s y lo gua da en la colección de eliminados de la base de da os
jun o al ID de la cuen a de Google. Además, desconec a a odos los clien es que hayan
hecho inicio de sesión con ese usua io.
Cap´
ı ulo 7
Gene ación de la aplicación web p og esi a
Tal y como se e á a con inuación, los equisi os p incipales pa a que una página web
sea PWA se implemen an en el lado del clien e, sal o el de que sea accesible po HTTPS. Al
usa Vue.js, he podido u iliza el plugin o icial cli-plugin-pwa [48], acili ándome mucho
el p oceso de hace de Medusa una aplicación web p og esi a.
7.1. Requisi os pa a la ins alación
Pa a que una página web pueda se ins alable como PWA, iene que cumpli los si-
guien es equisi os:
La aplicación web no iene que habe se ins alado an e io men e como PWA.
La página web iene que se accesible po HTTPS.
La web iene que ene en la aíz el iche o mani es .json [49] que con enga los
campos:
•sho _name: el nomb e de la aplicación.
•icons: los iconos que a a usa , debe inclui obliga o iamen e uno de 192px y
o o de 512px.
•s a _u l: la u a inicial.
•display: la o ma en la que se a a mos a la aplicación cuando se ins ale.
Puede ene 3 alo es: ullsc een,s andalone ominimal-ui.
Regis a un se ice wo ke que con enga un manejado pa a el e en o e ch
7.2. Medusa como PWA
Como Medusa es una PWA, en el momen o en el que de ec a que el usua io iene
un disposi i o donde se puede ealiza la ins alación, se mues a una pequeña en ana
eme gen e, in o mando al usua io de la posibilidad de ins ala Medusa. En iPhone y en
Sa a i pa a Mac no se mues a la en ana eme gen e, ya que Apple bloquea la API de
Ja aSc ip .
35

36 Capí ulo 7. Gene ación de la aplicación web p og esi a
1{
2"name ":" Medusa ",
3"sho _name":" Medusa ",
4" heme_colo ":"# ",
5"icons ":[
6{
7"s c":" icon/and oid -icon -192x192.png",
8"sizes ":"192x192",
9" ype ":" image / png"
10 },
11 {
12 "s c":" icon/and oid -icon -512x512.png",
13 "sizes ":"512x512",
14 " ype ":" image / png"
15 },
16 ...
17 ],
18 "s a _u l":"/" ,
19 " display ":"s andalone",
20 "backg ound_colo ":"#677eb6"
21 }
Código 7.1: Mani es .json gene ado po Wo kbox
7.3. Se ice wo ke
Po de ec o, el se ice wo ke que gene a Wo kbox de o ma au omá ica implemen a
únicamen e la uncionalidad mínima pa a que la web sea ins alable. Cómo yo que ía imple-
men a uncionalidad ex a, u e que hace un sc ip pa a que luego Wo kbox lo inyec e
al se ice wo ke que gene a.
La p ime a uncionalidad ex a que quise implemen a en el se ice wo ke ue la de
pode cachea un lis ado de iche os. De es a o ma en el caso de que el usua io in en ase
en a a Medusa sin conexión a in e ne , se ca ga ía una página de e o con un diseño
p opio. Los iche os que cachea Medusa pa a log a es o son:
o line.h ml: es el iche o HTML con la página de e o .
Quicksand-Va iableFon _wgh . : el iche o con la uen e de Medusa.
a icon.ico: el a icon de la web.
La segunda uncionalidad ex a implemen ada en el se ice wo ke , es que en el caso
de que se lance una e sión nue a de Medusa, la web lo de ec a ía e in o ma ía al usua io
mos ando una en ana eme gen e que e esca la página. Re escando la página se eins ala
el se ice wo ke y se ca gan los iche os ac ualizados de la web.
7.4. P ueba de la implemen ación de la aplicación web p og esi a 37
Figu a 7.1: Resul ado de Medusa en un es de Ligh house
7.4. P ueba de la implemen ación de la aplicación web p o-
g esi a
Pa a comp oba que la implemen ación de PWA es co ec a, usé Ligh house [50]. Ligh -
house es una he amien a c eada po Google que, en e o as cosas, e in o ma de odos
los equisi os que al an pa a que u web sea PWA. O a de las u ilidades de Ligh house
es la de pode ealiza es s a u web. La p ime a ez que lancé el es de Ligh house la
pun uación de accesibilidad ue de un 89, es o se debía a que había añadido una e ique a
HTML que impedía hace zoom [51]. En la igu a 7.1 se mues a un esul ado de un es de
Ligh house de Medusa habiendo modi icado la e ique a HTML mencionada an e io men-
e. El 93 de Bes P ac ices se debe a que Ligh house ecomienda que no se mues e po
consola ningún ipo de a iso (wa ning), pe o la API de Google OAu h 2.0 mues a a isos
po consola que no se pueden ocul a .
Cap´
ı ulo 8
Despliegue de la aplicación
Pa a ealiza el despliegue de Medusa, me ap o eché de muchas de las o e as dispo-
nibles al egis a me en el lo e pa a es udian es Gi hub [52]. En la abla 8.1 se pueden
encon a un esumen de odos los se icios u ilizados pa a el despliegue de Medusa.
8.1. Dominio pa a la web
Al ealiza el despliegue, el nomb e del dominio ue lo p ime o que se egis ó. Pa a el
egis o se uso Name.com [53], ya que e egalaban un egis o g a is. El dominio elegido ue:
“medusapp.li e”. El dominio p incipal se ha con igu ado pa a que enga dos subdominios:
se ido .medusapp.li e: apun a al se ido de Medusa.
de .medusapp.li e: apun a a la e sión de desa ollo del clien e de Medusa. El
clien e se conec a a una ejecución local del se ido pa a pode hace p uebas, sin
que a ec en a los usua ios inales.
Tan o los subdominios como el dominio p incipal es án con igu ados pa a que solo sean
accesibles u ilizando HTTPS.
8.2. Clien e
La pa e del clien e se hospeda en la pla a o ma de aplicaciones de Digi al Ocean [54].
Elegí es a pla a o ma po que ya había abajado an es con ella. Una de las en ajas de usa
una pla a o ma de aplicaciones como la de Digi al Ocean, es que no ienes que con igu a
nada del se ido . Lo único necesa io es subi el código y ellos se enca gan de cons ui lo y
Componen e Se icio usado
Dominio web Name.com [53]
Hos ing pa a el clien e Digi al Ocean [54]
Hos ing pa a el se ido He oku [55]
Base de da os MongoDB A las [56]
Con ol de e o es Sen y.io [57]
Tabla 8.1: Se icios ex e nos u ilizados pa a el despliegue de Medusa
39
46 Capí ulo 9. Ejemplo de uso
La igu a 9.4 mues a la pa e in e io de la página de inicio. La pa e in e io con iene
in o mación sob e la c ip odi isa seleccionada, se desc ibe el p oyec o y los obje i os de la
di isa, además exis e un bo ón pa a ab i el a ículo de Wikipedia de la c ip odi isa pa a
pode segui in o mándose. Po úl imo, hay un apa ado de enlaces ele an es que con iene
los siguien es enlaces:
1. Página p incipal de la c ip odi isa.
2. Twi e de la c ip odi isa.
3. Enlace al sub eddi o icial.
4. Reposi o io de Gi hub del p oyec o.
Figu a 9.4: Página de inicio (pa e 2)

47
En la igu a 9.5 se puede obse a la página de ca e as. El To al con iene la suma
o al en eu os del p ecio de odas las di isas que iene el usua io. A la izquie da es á el
bo ón pa a pode e un g á ico de las ca e as, y a la de echa es á el bo ón que e pe mi e
eo dena las ca e as po alo o po nomb e. El po cen aje que es á debajo del alo en
eu os de cada ca e a ep esen a las ganancias o pe didas ac uales pa a esa di isa.
Figu a 9.5: Página de las ca e as
48 Capí ulo 9. Ejemplo de uso
La igu a 9.6 con iene el g á ico en o ma de a a con la in o mación de odas las
ca e as de c ip odi isas del usua io. El g á ico es in e ac i o, en el momen o en el que se
haga clic o se pase el a ón po encima de uno de los componen es, se mues a en el cen o
el logo de la di isa y en la pa e in e io el alo de la ca e a de esa di isa.
Figu a 9.6: Página de las ca e as con el g á ico
49
En la igu a 9.7 se mues a la página con la ca e a de E he eum. Todos los g á icos de
p ecios de Medusa ienen el colo de la di isa seleccionada. Además, con los bo ones que
es án en la pa e in e io del g á ico se puede cambia la anja de iempo pa a isualiza
los p ecios de las di isas.
Figu a 9.7: Página de la ca e a de E he eum (pa e 1)
50 Capí ulo 9. Ejemplo de uso
La igu a 9.8 mues a la pa e in e io de la página de la ca e a de E he eum. Inicial-
men e se comp a o ende las di isas esc ibiendo el núme o de eu os deseados, con el bo ón
de las lechas se puede cambia pa a en ez de ene que esc ibi en eu os, puedas usa las
unidades de la moneda (ej: comp a 1 bi coin). El módulo de ansacciones ealizadas e
pe mi e isualiza odas las ansacciones de la ca e a ac ual.
Figu a 9.8: Página de la ca e a de E he eum (pa e 2)
51
En la igu a 9.9 se puede obse a la página del anking. En ella se o dena de mayo a
meno odos los usua ios de la web po el alo en eu os de odas sus ca e as. También se
mues a el núme o de ese s que ha ealizado el usua io.
Figu a 9.9: Página del anking

52 Capí ulo 9. Ejemplo de uso
La igu a 9.10 con iene la página del pe il de un usua io. En es a página se mues a la
siguien e in o mación: el nomb e de usua io, imagen de pe il, echa de egis o y núme o
de ese s. Además, ienes los siguien es cua o bo ones:
Ce a Sesión: cie a la sesión ac ual y edi ige a la página de inicio de sesión.
Tema Oscu o: habili a o deshabili a el ema oscu o pa a Medusa. Po de ec o Medu-
sa ca ga con el mismo ema (cla o o oscu o) que el disposi i o g acias a la p opiedad
de CSS p e e s-colo -scheme [59].
Rese ea Cuen a: acía odas las ca e as, menos la de eu os que oma un alo
de 10.000 ey suma un ese a la cuen a. Se mues a una en ana eme gen e de
con i mación an es de ealiza el ese pa a e i ica que ealmen e se quie e ealiza
esa acción.
Bo a Cuen a: se elimina la cuen a y sus da os. El ID de Google de la cuen a
se almacena en una colección pa a lle a un egis o de los ese s en caso de que se
uel a a egis a el mismo usua io. Igual que con el ese , se mues a una en ana
eme gen e de con i mación.
Figu a 9.10: Página de pe il
53
En la igu a 9.11 se puede ap ecia la página de ca e as con el ema oscu o de Medusa.
Todos los componen es de la in e az se adap an al ema oscu o pa a que no haya ningún
ipo de e o isual.
Figu a 9.11: Página de las ca e as con el ema oscu o
54 Capí ulo 9. Ejemplo de uso
La igu a 9.12 con iene la página de la ca e a de Bi coin con el ema oscu o. Como
se puede obse a , los g á icos ambién se adap an sin ningún ipo de p oblema al ema
oscu o.
Figu a 9.12: Página de la ca e a de Bi coin con el ema oscu o
55
Po úl imo, en la igu a 9.13 se puede isualiza cómo se mues a Medusa en mó il. Toda
la web se adap a sin ningún ipo de p oblema a disposi i os mó iles, ya que es o almen e
esponsi e. El menú supe io se aslada a la pa e in e io pa a ac ua como una ba a de
na egación ípica de las aplicaciones mó iles.
Figu a 9.13: Medusa en disposi i os mó iles
62 BIBLIOGRAFÍA
[17] NPM. npm - build amazing hings. h ps://www.npmjs.com/, 2021. Accedido: 2021-
05-04.
[18] Google. Mongodb. h ps://www.mongodb.com/es, 2021. Accedido: 2021-05-04.
[19] . R c 7519 - jw . h ps://da a acke .ie .o g/doc/h ml/ c7519, 2021. Acce-
dido: 2021-05-23.
[20] Ha d , D., Ed. The oau h 2.0 au ho iza ion amewo k. h ps://da a acke .ie .
o g/doc/h ml/ c6749, 2021. Accedido: 2021-05-23.
[21] Google. Google de elope console. h ps://console.de elope s.google.com/,
2021. Accedido: 2021-05-23.
[22] Mozilla. Con ol de acceso h p (co s). h ps://de elope .mozilla.o g/es/docs/
Web/HTTP/CORS, 2021. Accedido: 2021-05-23.
[23] Google. Case s udies ea u ed apps. h ps://de elope s.google.com/iden i y/
sign-in/case-s udies?hl=en, 2021. Accedido: 2021-05-20.
[24] Coingecko. Coingecko api. h ps://www.coingecko.com/es/api, 2021. Accedido:
2021-05-21.
[25] misca age. Coingecko node api. h ps://gi hub.com/misca age/CoinGecko-API,
2021. Accedido: 2021-05-24.
[26] Coingecko. Coingecko api e ms. h ps://www.coingecko.com/es/api_ e ms, 2021.
Accedido: 2021-05-24.
[27] Coingecko. Coingecko s a us. h ps://s a us.coingecko.com/, 2021. Accedido:
2021-05-21.
[28] Vue.js. Vue ou e - he o icial ou e o ue.js. h ps:// ou e . uejs.o g/, 2021.
Accedido: 2021-05-30.
[29] Vue.js. Vuex. h ps:// uex. uejs.o g/, 2021. Accedido: 2021-05-30.
[30] Facebook. Flux - applica ion a chi ec u e o building use in e aces. h ps://
acebook.gi hub.io/ lux/, 2021. Accedido: 2021-05-30.
[31] Me inSeylan. Vue-socke .io. h ps://gi hub.com/Me inSeylan/Vue-Socke .io,
2021. Accedido: 2021-05-30.
[32] Me inSeylan. Vue-socke .io - uex in eg a ion. h ps://gi hub.com/Me inSeylan/
Vue-Socke .io#- uex-in eg a ion, 2021. Accedido: 2021-05-30.
[33] Me inSeylan. Vue-socke .io - componen le el usage. h ps://gi hub.com/
Me inSeylan/Vue-Socke .io#-componen -le el-usage, 2021. Accedido: 2021-05-
30.
[34] Cha .js. Cha .js - open sou ce h ml5 cha s o you websi e. h ps://www.cha js.
o g, 2021. Accedido: 2021-05-22.
[35] ape u eless. ue-cha js - easy and beau i ul cha s wi h cha .js and ue.js. h ps:
// ue-cha js.o g/, 2021. Accedido: 2021-05-31.

BIBLIOGRAFÍA 63
[36] janjakubnanis a. downsample - downsampling me hods o ime se ies isualisa ion.
h ps://gi hub.com/janjakubnanis a/downsample, 2021. Accedido: 2021-05-31.
[37] S einn S eina sson. Downsampling ime se ies o isual ep esen a ion. PhD hesis,
Uni e si y o Iceland, 2013. LTTB en la página 21 a la 25.
[38] Jason Long. Iden icons! h ps://gi hub.blog/2013-08-14-iden icons/, 2021. Ac-
cedido: 2021-05-31.
[39] Mozilla. Ma h. andom(). h ps://de elope .mozilla.o g/es/docs/Web/
Ja aSc ip /Re e ence/Global_Objec s/Ma h/ andom, 2021. Accedido: 2021-05-31.
[40] da idbau. seed andom.js - seeded andom numbe gene a o o ja asc ip . h ps:
//gi hub.com/da idbau/seed andom, 2021. Accedido: 2021-05-31.
[41] Mozilla. H mlcan aselemen . oda au l(). h ps://de elope .mozilla.o g/es/
docs/Web/API/HTMLCan asElemen / oDa aURL, 2021. Accedido: 2021-05-31.
[42] hisou . Espacio de colo yiq. h ps://www.hisou .com/es/
yiq-colo -space-26084/, 2021. Accedido: 2021-05-31.
[43] Exp ess. Exp ess - in aes uc u a web ápida, minimalis a y lexible pa a node.js.
h ps://exp essjs.com/es/, 2021. Accedido: 2021-05-27.
[44] Socke .io. Socke .io. h ps://socke .io/, 2021. Accedido: 2021-05-27.
[45] Mongoose. Mongoose - elegan mongodb objec modeling o node.js. h ps://
mongoosejs.com/, 2021. Accedido: 2021-05-29.
[46] Ma in Lo enz, Gün e Hesse, and Jan-Pee Rudolph. Objec - ela ional mapping
e ised-a guideline e iew and consolida ion. In ICSOFT-EA, pages 157–168, 2016.
[47] au h0. socke io-jw . h ps://www.npmjs.com/package/socke io-jw , 2021. Acce-
dido: 2021-05-29.
[48] Vue.js. @ ue/cli-plugin-pwa. h ps://cli. uejs.o g/co e-plugins/pwa.h ml,
2021. Accedido: 2021-05-24.
[49] Pe e LePage, F ançois Beau o , Thomas S eine . Add a web app mani es . h ps:
//web.de /add-mani es /, 2021. Accedido: 2021-05-24.
[50] Google. Ligh house. h ps://de elope s.google.com/web/ ools/ligh house?hl=
es, 2021. Accedido: 2021-05-24.
[51] Mozilla. Viewpo wid h and sc een wid h. h ps://de elope .mozilla.o g/
en-US/docs/Web/HTML/Viewpo _me a_ ag# iewpo _wid h_and_sc een_wid h,
2021. Accedido: 2021-05-30.
[52] Gi hub. Gi hub s uden de elope pack. h ps://educa ion.gi hub.com/pack,
2021. Accedido: 2021-05-23.
[53] Name.com. Name.com. h ps://www.name.com/es-la, 2021. Accedido: 2021-05-23.
[54] Digi al Ocean. Digi al ocean app pla o m. h ps://www.digi alocean.com/
p oduc s/app-pla o m/, 2021. Accedido: 2021-05-23.
64 BIBLIOGRAFÍA
[55] He oku. He oku - cloud applica ion pla o m. h ps://www.he oku.com, 2021. Ac-
cedido: 2021-05-23.
[56] MongoDB. Mongodb a las. h ps://www.mongodb.com/es/cloud/a las, 2021. Ac-
cedido: 2021-05-23.
[57] Sen y. Sen y.io. h ps://sen y.io, 2021. Accedido: 2021-05-23.
[58] He oku. He oku - abou . h ps://www.he oku.com/abou , 2021. Accedido: 2021-05-
23.
[59] W3C. p e e s-colo -scheme media ea u e. h ps://d a s.csswg.o g/
mediaque ies-5/#p e e s-colo -scheme, 2021. Accedido: 2021-05-23.
[60] Coinma ke cap. P incipales 100 c ip omonedas po capi alización de me cado. h ps:
//coinma ke cap.com/, 2021. Accedido: 2021-05-23.
[61] Facebook. Jes - deligh ul ja asc ip es ing. h ps://gi hub.com/ acebook/jes ,
2021. Accedido: 2021-05-23.
[62] Mocha.js. Mocha - simple, lexible, un. h ps://mochajs.o g/, 2021. Accedido:
2021-05-23.