Medusa: una aplicación web progresiva para la simulación de inversiones en criptodivisas

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.