Integración de Qwizer con Moodle

In eg ación de Qwize con Moodle Qwize ’s in eg a ion wi h Moodle T abajo de Fin de G ado Cu so 2022–2023 Au o Vicen iu Tibe ius Roman José Luis Ba ha de las Peñas Di ec o Manuel Mon eneg o Mon es G ado en Ingenie ía del So wa e Facul ad de In o má ica Uni e sidad Complu ense de Mad id In eg ación de Qwize con Moodle Qwize ’s in eg a ion wi h Moodle T abajo de Fin de G ado en Ingenie ía Del So wa e Au o Vicen iu Tibe ius Roman José Luis Ba ha de las Peñas Di ec o Manuel Mon eneg o Mon es Con oca o ia: Junio 2023 G ado en Ingenie ía del So wa e Facul ad de In o má ica Uni e sidad Complu ense de Mad id 29 de mayo de 2023 Ag adecimien os P ime o de odo, que emos ag adece a nues o u o Manuel Mon eneg o Mon- es, po habe nos ayudado y aconsejado a lo la go de odo el p oyec o. Su eno me paciencia pa a esol e nues as dudas y su lexibilidad pa a man ene nues as euniones a lo la go del cu so, han pe mi ido que podamos saca es e p oyec o ade- lan e. Y en segundo luga , pe sonalmen e, yo, José Luis Ba ha, quie o a ag adece a mi compañe o Tibe ius po habe se in oluc ado an o en es e p oyec o. G acias a él se han cumplido muchos de los obje i os plan eados pa a es e T abajo Fin de G ado e incluso algunos que no es aban ni plani icados. Asimismo, he ap endido nume osas ecnologías que no pensaba que iba aplica en es e p oyec o, que además econoce é, que si no hubie a sido po él, no c eo que las hubie a ap endido nunca y menos a u iliza . De ini i amen e, sin él, no hubié amos a anzado an o como hemos hecho. Y po úl imo, nos gus a ía ag adece a nues os amigos y amilia es, aquellas pe sonas que han hecho que nues o paso po la acul ad sea lo más ag adable posible y siemp e a an de apoya nos a segui en los peo es momen os. Si ellos no hubié amos sido capaces de llega has a aquí. Vicen iu Tibe ius Roman y José Luis Ba ha de las Peñas Resumen In eg ación de Qwize con Moodle Qwize es una aplicación web que pe mi e la ealización de cues iona ios di igida sob e odo al ámbi o académico. A di e encia de o as he amien as como los cues- iona ios de Moodle, añade la ca ac e ís ica de se una aplicación web p og esi a, es deci , pe mi e al usua io u iliza la aplicación mien as que es e no enga una conexión a In e ne ac i a. En es e caso el usua io/alumno end á la capacidad pa a pode ealiza los cues iona ios que enga pendien es. Una ez que el alumno inalice un cues iona io se le gene a á un código QR que el p o eso end á que escanea pa a ob ene cons ancia de las espues as en iadas po el es udian e. En el momen o que el usua io ecupe e la conexión, las soluciones se manda án al se ido y se egis a á su in en o. Es e p oyec o es una ampliación de la aplicación Qwize , en la que se han añadido nue as uncionalidades como las siguien es: Alea o ización de cues iona ios: La aplicación con end á la posibilidad de pode en ega a los alumnos cues iona ios alea o izados, de modo que cada es udian e ecibe una a ian e dis in a de un cues iona io. En es os las p egun as elegidas pa a el cues iona io se alea o iza án una ez el alumno se desca gue el mismo. Inclusión de enunciados en o ma o Ma kdown: El lenguaje Ma kdown es un lenguaje de ma cado que pe mi e la inclusión de ó mulas y enuncia- dos con dis in os o ma os de ex o. Los cues iona ios y p egun as en Qwize sopo a án aho a es e lenguaje. In eg ación con Moodle: Moodle es una de las he amien as más conocidas elacionadas con la ges ión del ap endizaje. Una de las nue as uncionalidades añadidas es la in e ope abilidad en e Qwize y la pla a o ma del Campus Vi ual de la UCM pa a la ges ión de cali icaciones y cues iona ios. Es e p oyec o no ha sido solo una ampliación, si no que ambién se ha cen ado en una buena pa e de es abilidad, e ac o ización y despliegue de la aplicación, haciendo que la misma sea más obus a, segu a y amigable. Enlace al p oyec o en Gi hub: h ps://gi hub.com/Qwize -UCM/Qwize Palab as cla e Qwize , Campus Vi ual, aplicación web p og esi a, Alea o ización, Ma kdown, Doc- ke , Reac , Django ii Abs ac Qwize ’s in eg a ion wi h Moodle Qwize is a web applica ion ha allows he comple ion o es s, aimed abo e all a he academic ield. Unlike o he ools such as Moodle quizzes, i adds he ea u e o being a p og essi e web applica ion, which allows he use o use he applica ion while hey do no ha e an ac i e In e ne connec ion. In his case, he use / s uden will ha e he possibili y o comple e he es s ha a e pending. Once he s uden comple es a es , a QR code will be gene a ed ha he eache will ha e o scan o ob ain p oo o he answe s sen by he s uden . As soon as he use eco e s he connec ion, he solu ions will be sen o he se e and hei a emp will be eco ded. This p ojec is an ex ension o he Qwize applica ion, in which new ea u es ha e been added, such as he ollowing: Randomiza ion o es s: The applica ion will con ain he possibili y o being able o gi e s uden s andomized es s, so ha each s uden ecei es a di e en a ian o he es . In hese, he ques ions chosen o he es will be andomized once he s uden downloads i . Inclusion o Ma kdown and ma hema ical o mulas: The Ma kdown language is a ma kup language ha allows he inclusion o o mulas and s a e- men s wi h di e en ex o ma s. Tes s and ques ions in Qwize will now suppo his language. In eg a ion wi h Moodle: Moodle is one o he bes -known ools ela ed o lea ning managemen . One o he new ea u es added is he in e ope abili y be ween Qwize and he UCM Vi ual Campus pla o m o he managemen o quali ica ions and ques ionnai es. This p ojec has no only been an expansion, bu has also ocused in a good pa o s abili y, e ac o and deploymen o he applica ion, making i mo e secu e and iendly o use o he use s. Link o he p ojec on Gi hub: h ps://gi hub.com/Qwize -UCM/Qwize Keywo ds Qwize , Vi ual Campus, P og essi e Web App, Randomiza ion, Ma kdown, Docke , Reac , Django ix 6.3. Subida de la lis a de es udian es . . . . . . . . . . . . . . . . . . . . . 56 6.4. Lis a de es udian es gene ada po Moodle . . . . . . . . . . . . . . . 57 6.5. Selección de la columna y la asigna u a . . . . . . . . . . . . . . . . . 57 6.6. Selección del cues iona io . . . . . . . . . . . . . . . . . . . . . . . . . 57 7.1. Fiche o de con igu ación docke -compose.yml . . . . . . . . . . . . . . 61 7.2. Con igu acióndeNginx.......................... 62 Cap´ ı ulo 1 In oducción En es a memo ia habla emos del desa ollo de la ampliación y mejo a de una aplicación p og esi a pa a ealiza cues iona ios en línea: Qwize [4]. Empeza emos p esen ando que nos lle ó a segui es e p oyec o, qué obje i os hemos enido a lo la go del p oyec o y inalmen e desc ibi emos nues o plan de abajo a lo la go del cu so académico. 1.1. Mo i ación del p oyec o El año pasado nos encon ábamos en la si uación de elegi un abajo que de e dad nos mo i a á a desa olla nues o úl imo p oyec o den o de la acul ad. Además, como es udian es de la Facul ad de In o má ica, que íamos un p oyec o que de e dad impac ase en la e olución de la misma y nos pe mi ie a ayuda a mejo a sus se icios. Manuel nos habló de una posible mejo a y ampliación de una aplicación web p og esi a basada en la ealización de cues iona ios que pe mi a ealiza los sin co- nexión a in e ne : Qwize . Es a aplicación es aba di igida a usua ios como noso os, alumnos que a lo la go de nues a ayec o ia den o de la acul ad hemos enido que ealiza nume osos cues iona ios, sin añadi , que a mi ad de nues o paso, es- alló una pandemia mundial debido al COVID-19 y es e ipo de o ma o pa a la e aluación de nues as asigna u as ue algo u ina io. Inicialmen e, la p opues a ya nos llamó la a ención pe o además iden i icamos una se ie de causas que nos decan a on po p og esa y con inua es e p oyec o. En e ellas podemos nomb a las siguien es: Nue as ecnologías: Es a aplicación u ilizaba ecnologías con las cua- les no es ábamos amilia izados ninguno de los dos. Tan o Reac como Django e an dos ecnologías que desconocíamos pe o sabíamos que iban a se esenciales de domina pa a nues o desa ollo pe sonal y p o esional. Además, el hecho de se una aplicación que unciona sin conexión a In e ne , nos pe mi e in oluc a nos en el mundo de las aplicaciones p og esi as, un me cado que hoy en día es a en auge po lo que es muy in e esan e desa olla y descub i las posibilidades de es as aplicaciones. Uso p ác ico en un u u o: O o pun o impo an e que nos hizo decidi - 1 2Capí ulo 1. In oducción nos po es e p oyec o, ue el uso p ác ico que le imos a la aplicación. Bajo un buen desa ollo y el añadido de un mínimo de uncionalidades necesa ias, eíamos que es e p oyec o pod ía llega a se ú il. A lo la go de la ca e a, hemos desa ollado nume osos p oyec os con el único in de se cali icados y ocalizados a una simple en ega. Pos e io men e, quedan ol idados o aban- donados po al a de iempo o mo i ación pa a segui los. En cambio, con es e p oyec o eíamos que si conseguíamos cumpli los obje i os pod íamos hace una aplicación digna que pod ían u iliza nues os compañe os de la acul ad en un u u o. P oyec o de inno ación educa i a de la UCM (p oyec os INNOVA): Finalmen e, además de los o os mo i os, Manuel nos in o mó, como ya hemos comen ado an e io men e, que es e p oyec o es aba des inado a segui siendo desa ollado po algunos p o eso es de la acul ad. De hecho, habían plan eado un p oyec o de inno ación de la acul ad, pa a que la aplicación ue a u ilizada en los labo a o ios de algunas asigna u as pa a cali ica exámenes. Es o nos lla- mó bas an e la a ención y, ligado a lo que comen ábamos al p incipio, eíamos que inalmen e es e p oyec o pod ía deja huella en nues a acul ad. 1.2. Obje i os Una ez ya eníamos la p opues a del p oyec o u imos que pensa en unos obje i os pa a desa olla a lo la go de odo el cu so académico. Es a a ea ue algo sencilla debido a que nues os compañe os del año pasado y ambién nues o u o , nos ayuda on a iden i ica qué nue as uncionalidades pod ían añadi se a la aplicación Qwize . Po lo que, inalmen e, en e los consejos ecibidos llegamos a plan ea y es ablece los siguien es p ime os obje i os pa a el nue o abajo: Alea o ización de cues iona ios: Uno de los obje i os p incipales a u u o de nues os compañe os del año pasado, ue el hecho de la alea o ización den o de los p opios cues iona ios. O ece la capacidad de alea o iza las p egun as de los cues iona ios es esencial en es e ipo de aplicaciones pa a e i a copias en e los es udian es. Po es a azón, llegamos a la conclusión que es a ca ac e ís ica o ece ía a Qwize un alo añadido. Pa a la implemen ación de es a ace a u imos que pensa de enidamen e co- mo aplica íamos la alea o ización den o de la aplicación, dado que den o de un cues iona io se puede aplica es o de nume osas mane as. Finalmen e, iden i icamos es obje i os p incipales: •Alea o ización a ni el de p egun as, es deci , las p egun as de un cues- iona io debe ían apa ece en un o den alea o io pa a cada usua io que ealice el mismo. •Alea o ización a ni el de opciones, es deci , las opciones den o de las p egun as ipo es debe ían mos a se en un o den alea o io pa a cada usua io. 1.3. Plan de abajo 3 •P egun as de selección alea o ia, es deci , den o de los cues iona ios ha- b á una o a ias p egun as que pa a cada usua io se elegi á en base a un subconjun o de p egun as del banco de p egun as. Adap ación de aplicación a disposi i os mó iles: El diseño adap able es un paso undamen al en las aplicaciones web. Da a los usua ios que u ilicen disposi i os mó iles la posibilidad de e nues a aplicación de mane a co ec a es muy impo an e y más en el con ex o de nues a aplicación. Po al mo i o decidimos in en a adap a nues a in e az a los disposi i os mó iles y in en a que la na egación po la aplicación ue a lo más cómoda posible. Inclusión de Ma kdown y ó mulas ma emá icas: Ma kdown es un ipo de lenguaje de ma cado que pe mi e añadi a la aplicación ex o en i- quecido pe mi iendo la inclusión de palab as en neg i a, cu si a, imágenes, e c... Nues o u o iden i icó la inco po ación de Ma kdown como uno de los obje i os p incipales del TFG y ag egándole ambién la posibilidad de edac a enunciados y soluciones con ó mulas ma emá icas, pe mi- iendo la o mulación de p egun as más complejas. In eg ación con Moodle: Finalmen e, el úl imo obje i o que plan eamos ue la in eg ación con los o ma os de la pla a o ma Moodle. Moodle ue una de las he amien as que inspi ó el desa ollo de Qwize , de hecho, ac ualmen e es la pla a o ma en la que se basa el Campus Vi ual de la nues a acul ad. Dado que, a día de hoy, se sigue u ilizando, la capacidad de in eg a Qwize con Moodle ue uno de nues os obje i os más espe ados. Pa a ello nos quisimos cen a en que se pudie an impo a p egun as del banco de p egun as de Moodle ype mi i expo a las no as de los es udian es que ealiza on cues iona ios en Qwize a Moodle. 1.3. Plan de abajo A lo la go de es e cu so académico, hemos pasado po nume osas ases den o del desa ollo de nues o TFG. El hecho de amplia un p oyec o comple o, impli- caba e apas de es udio no solo de las nue as ecnologías con las que no es ábamos amilia izados, sino ambién g andes es uc u as de códigos que hacen uso de las mismas. Debido a odo es o, necesi ábamos un plan de abajo que nos pe mi ie a i es ableciendo pequeños obje i os pa a comple a las a eas que eníamos plan eadas. G acias a las euniones que ealizábamos con nues o u o Manuel Mon eneg o, las cuales se hacían cada dos semanas, nos o ganizábamos pa a i cumpliendo una se ie de a eas pa a cada eunión. Es a me odología nos ayudaba, al p incipio, a i en endiendo poco a poco pa es del código y empeza a cumpli las p ime as me as, y pos e io men e, en e apas más a anzadas del p oyec o, a inaliza los obje i os p incipales del abajo. Dicho es o, la dis ibución gene al de las ases de nues o p oyec o ue on las siguien es: 4Capí ulo 1. In oducción Re ac o ización, es ing, ac ualización y despliegue de la aplicación (sep iemb e de 2022 - eb e o de 2023) Una de las e apas más la gas de desa- ollo. Al p incipio, nos dedicamos a en ende g an pa e del código y pos e- io men e e ac o iza an o el on end como se comen a en el capí ulo 3.5.1 como en el backend como se comen a en el capí ulo 3.5.2. También ac ualiza- mos odas las lib e ías a la ul ima e sión in en ando e i a con lic os po los cambios de e siones. Po úl imo, p epa amos mejo el en o no de desa ollo añadiendo lin e s, a iables de en o no pa a los sec e os, diseñando algunos es s pa a el back-end, usando un ges o de paque es pa a es e úl imo y usando Docke pa a desplega el p oyec o de mane a co ec a. Alea o ización de cues iona ios (ma zo de 2023): Du an e es a e apa, se implemen ó la uncionalidad de alea o ización de cues iona ios. Es e p oceso in oluc ó ealiza a ios cambios en el modelo elacional de la aplicación y en lógica de la aplicación como se de alla en p o undidad en el capí ulo 4, lo que equi ió un iempo signi ica i o pa a ac ualiza el código co espondien e. Ma kdown, p egun as alea o ias e in eg ación con Moodle (ab il de 2023): Du an e es a ase, se abo da on a ios aspec os cla e. La implemen a- ción del o ma o Ma kdown pa a las p egun as y la in eg ación con Moodle ue on ela i amen e sencillas, a excepción de la ges ión de las imágenes en el caso de Ma kdown. Sin emba go, la inco po ación de p egun as alea o ias esul ó se un desa ío conside able, ya que u o un impac o en g an pa e del código del back-end de la aplicación. Es as inco po aciones es án desc i as en los capí ulos 4,5y6. Comp obaciones inales y memo ia (mayo de 2023): Du an e el úl imo mes de desa ollo, nos en ocamos en ealiza los ajus es inales en la in e az de la aplicación, puliendo los de alles pa a log a una expe iencia de usua io me- jo ada. También dedicamos iempo a edac a la memo ia del T abajo de Fin de G ado (TFG), documen ando odo el p oceso de desa ollo, las decisiones omadas y los esul ados ob enidos. Cap´ ı ulo 2 Selección de he amien as y ecnologías En nues o p oyec o hemos hecho uso de nume osas ecnologías que nos han ayudado a la implemen ación inal de nues a aplicación. Dado que es e p oyec o es una con inuación de uno an e io , hemos enido que, no solo adecua nos a muchas de las ecnologías que nues os compañe os u iliza on el año pasado, sino que ambién hemos enido que in es iga nume osas ecnologías pa a implemen ación de nues os nue os obje i os. En es a sección amos a explica qué he amien as y ecnologías hemos u ilizado inalmen e pa a el desa ollo de Qwize . 2.1. Lenguajes de p og amación, ges ión de bases de da os y amewo ks u ilizados P ime o de odo, empeza emos nomb ando que ipos de lenguajes de p og ama- ción, ges o es de bases de da os y ma cos de abajo han sido u ilizados pa a el desa ollo del p oyec o. 2.1.1. Py hon Py hon es un lenguaje de p og amación in e p e ado y al amen e conocido en é minos de aplicaciones web y desa ollo de so wa e. En nues o caso es el p inci- pal lenguaje que inco po a el ma co de abajo que hemos u ilizado en la pa e de se ido de nues a aplicación. Dado que ue una decisión de nues os compañe os del año pasado, es e año hemos decidido segui con es e mismo lenguaje pa a la im- plemen ación del se ido . Además, es e año hemos hecho uso de en o nos i uales con la lib e ía Poe y, pe mi iéndonos no ene que ins ala odas las lib e ías que equie e el p oyec o en nues os equipos. Es a posibilidad nos ha ayudado a añadi una capa de aislamien o con nues os sis emas y hace más li iana su ins alación. 2.1.2. Django Django [3] es uno de los amewo ks, o los ambién conocidos como ma cos de abajo, que más se u ilizan en el desa ollo de las aplicaciones web. Su obus a y as a capacidad de posibilidades pa a el con ol de la segu idad sob e las ulne abi- 5 6Capí ulo 2. Selección de he amien as y ecnologías lidades más ecuen es en el en o no web, un panel de adminis ación sencillo y bien in eg ado y un ex enso ORM ue on las azones po las que nues os compañe os del año pasado decidie on u iliza es a he amien a pa a el desa ollo de la aplicación Qwize en la pa e del se ido . Pese a es a más amilia izados con Node.js hemos decidido segui con es a ecnología pa a ap o echa el código ya esc i o. 2.1.3. Ja aSc ip Ja aSc ip es un lenguaje de p og amación in e p e ado al amen e conocido po su uso en el desa ollo web. Pa a noso os, es el p incipal lenguaje de p og amación u ilizado po el amewo k que u ilizamos pa a el lado del clien e en la aplicación. Además, es e lenguaje es esencial pa a una de las uncionalidades más a ac i as de Qwize , los Se ice wo ke s. Es os pe mi en que la aplicación uncione aun es ando el clien e sin conexión. Es a p opiedad hace que las aplicaciones web sean conocidas como aplicaciones web p og esi as. Ag egado a lo an e io , dado que la aplicación se puede u iliza en el na egado , podemos hace uso del almacenamien o in e no del mismo g acias a es e lenguaje. Con es o podemos hace que los usua ios gua - den da os en es e pequeño almacenamien o, como son sus da os de sesión y algunos cues iona ios desca gados que pod án ealiza en caso de que la aplicación se quede sin conexión. También, g acias a su as o núme o de lib e ías y de acilidades, Ja as- c ip o ece una es uc u a sólida pa a ealiza llamadas HTTP a nues o se ido de mane a sencilla. 2.1.4. Reac Reac [13] es una de las biblio ecas más conocidas de Ja asc ip pa a el desa ollo de aplicaciones web. Su a qui ec u a basada en el modelo SPA de aplicaciones web, consis en es en una sola página, ue una de las azones p incipales po la que nues os compañe os del año pasado decidie on u iliza es a ecnología. Una de las en ajas más impo an es de Reac es su es uc u a po componen es. La p og amación po componen es se basa en la c eación de pequeñas pa es de la is a con incluso lógica p opia. Es o pe mi e que se pueda eu iliza y hace mucho más en endible el código. La p og amación en Reac se basa en la c eación de componen es es uc u ados median e clases o median e unciones. El año pasado, nues os compañe os decidie on esc ibi los po clases. Hoy en día las de iniciones median e clases, han quedado p ác icamen e obsole as po lo que hemos decidido da le un en oque uncional a es as. En es e ipo de de iniciones los componen es se encapsulan en unciones y en la unción de e o no es donde se esc ibe el código JSX que más adelan e se mos a á al usua io. El o ma o JSX, pe mi e in eg a código HTML den o de Ja aSc ip lo cual hace mas cómodo el desa ollo con Reac . An e io men e se u ilizaba c ea e- eac -app pa a la compilación del código. Sin emba go, debido a los nume osos a isos que nos salían en la consola al ejecu a la aplicación y al len o man enimien o que se le daba a la he amien a decidimos in- 2.2. Lenguajes de in e cambio de da os y ma cado 7 es iga y busca alguna al e na i a. Llegamos a una he amien a denominada Vi e que, además de es a mejo man enida, ambién o ecía mejo as en el endimien o a la ho a de desa olla ya que en ez de ecompila el p oyec o en e o cada ez que se ealizaba algún cambio, solo se ecompilaban los iche os con cambios. Al p oba la he amien a po p ime a ez nos so p endimos po la apidez con la que se ponía el p oyec o en uncionamien o. 2.1.5. SQL SQL es un lenguaje u ilizado pa a el acceso y ges ión de las bases de da os. En nues o p oyec o, g acias al ORM de Django, hemos podido e i a ene que u iliza es e lenguaje pa a muchas de las consul as de la aplicación. Aun así, en algunos casos pun uales hemos necesi ado de es e lenguaje pa a hace consul as muy especi icas que el ORM Django no sopo aba. 2.1.6. Se ice wo ke s Un Se ice wo ke es la ecnología que pe mi e gene a una aplicación web p o- g esi a. Básicamen e, consis e en un iche o Ja aSc ip que se ejecu a en segundo plano, o eciendo al clien e soluciones en caso de que se quede sin conexión a In e - ne o el se ido al que aya a ealiza las pe iciones no es é disponible. En nues a aplicación, u ilizamos es a ecnología pa a gua da los ecu sos necesa ios pa a que mien as el clien e se encuen e sin conexión, pueda dis u a de una expe iencia limi ada de nues os se icios. O as de las a eas undamen ales que desempeña, es la de almacena las pe iciones que ealice el clien e en el pe iodo que es e sin conexión, y una ez que la ecupe e, ol e á a manda es as pe iciones al se ido . 2.1.7. Boo s ap Boo s ap [8] en una biblio eca CSS de Ja aSc ip que hemos u ilizado pa a el es ilado gene al de oda la aplicación. Apa e que nues os compañe os ya la u iliza- on pa a es e mismo mo i o, noso os hemos decidido man ene la dado que hemos u ilizado es a he amien a en nume osas asigna u as y es amos bas an e amilia iza- dos con ella. Además, nos pe mi e gene a una in e az adap able a las dimensiones de cualquie disposi i o y así cumpli uno de los obje i os p incipales. Cabe des aca ambién, que es a lib e ía dispone de una documen ación muy ex ensa e incluso con ejemplos explica i os. 2.2. Lenguajes de in e cambio de da os y ma cado Como segundo apa ado habla emos de los lenguajes que hemos enido que u i- liza pa a in e cambia da os en e el se ido y el clien e de nues a aplicación. 8Capí ulo 2. Selección de he amien as y ecnologías Apa e ambién in oduci emos uno de los p incipales lenguajes de ma cado del p oyec o que ha pe mi ido el desa ollo de uno de los obje i os de nues o TFG. 2.2.1. JSON JSON es un o ma o de iche o de ex o ampliamen e u ilizado pa a el in e cam- bio de da os den o de las aplicaciones. Dadas su lexibilidad y as o uso den o de las implemen aciones de las APIs y el desa ollo web hemos decidido u iliza lo pa a in e cambia in o mación a a és de nues a API. Su sin axis es lige a, lo que acili a los abajos de decodi icación y codi icación de los da os u ilizados. Como o a en aja a añadi , la posibilidad de se u ilizado en cualquie lenguaje de p o- g amación nos ayuda en el a amien o de da os en e el lado clien e y se ido de la aplicación. 2.2.2. YAML YAML es un o ma o de se ialización de da os, con simili udes a los o ma os XML y JSON. El p incipal a ac i o de es e o ma o es su ácil lec u a y legibilidad. Dado que es a aplicación a di igida a usua ios que a lo mejo no son expe os en o ma os algo más écnicos como pueden XML y JSON, nues os compañe os del cu so an e io decidie on elegi es e o ma o pa a la subida de a chi os e e en es a la c eación de cues iona ios y p egun as. 2.2.3. XML-Moodle XML-Moodle [9] es un o ma o que u iliza la pla a o ma de Moodle pa a impo a y expo a p egun as. En nues o caso lo hemos u ilizado pa a cumpli el obje i o de la impo ación de p egun as desde Moodle a Qwize . El uso de es e o ma o se de alla más en el Capí ulo 6. 2.2.4. Ma kdown Ma kdown es un lenguaje de ma cado que pe mi e la c eación de ex o especiali- zado sin u iliza ningún o ma o especi ico. Es e lenguaje pe mi e esc ibi ó mulas ma emá icas, ag ega imágenes o mejo a el es ilo a ex os con una sin axis muy sencilla. Es e lenguaje es esencial pa a uno de nues os obje i os del TFG, po lo que la adición a nues o p oyec o e a esencial. En capí ulos pos e io es explica emos las p incipales azones de su uso pe o se enca ga á de p o esionaliza más nues a aplicación. 2.3. O as he amien as o ecnologías 9 2.3. O as he amien as o ecnologías En es e úl imo apa ado añadi emos ecnologías o he amien as que no podemos ag upa y explica emos en gene al de mane a independien e el uso que ienen den o de nues a aplicación. 2.3.1. Gi Gi es uno de los ges o es más conocidos po la indus ia del desa ollo pa a el con ol de e siones. En es os p oyec os en los que se a an con una al a can idad de a chi os, lle a un con ol de odos ellos es algo complicado y de inc eíble im- po ancia. Gi nos ayuda y libe a de es e p oblema, con una lis a de comandos muy sencilla y ácil de ap ende . Además, con su posibilidad de es au a cualquie e - sión an e io de los a chi os nos pe mi e abaja anquilos an e e o es inespe ados o no deseados. 2.3.2. Gi hub Gi hub es un pla a o ma de alojamien o de p oyec os que u ilizan el con ol de e siones de Gi . Dado que u ilizamos Gi como sis ema de con ol de e siones, aloja nues o p oyec o en Gi hub e a sumamen e sencillo y nos apo aba nume osos bene icios, como la mejo isualización del p oyec o y la acilidad pa a segui el abajo de ambos. 2.3.3. Docke Docke [17] es una he amien a de despliegue de so wa e en sus llamados con- enedo es i uales. Con la inalidad de desplega nues o p oyec o, hemos u ilizado Docke pa a p epa a la aplicación pa a un en o no de p oducción y no solo de desa ollo. Una pa e impo an e de cualquie p oyec o es el despliegue del mismo. Pa a acili a el despliegue de Qwize en cualquie ipo de maquina y sin necesidad de muchos conocimien os en las ecnologías usadas decidimos usa Docke pa a modu- la iza nues a aplicación median e con enedo es. Empezamos po in es iga como se desplegaban co ec amen e las aplicaciones con Reac yDjango. Con la ayuda de docke -compose pa a ejecu a a ios con enedo es hemos hecho uso de las siguien es imágenes: Pos g eSQL Node Py hon 16 Capí ulo 3. A qui ec u a global del sis ema api_asigna u a id BIGINT nomb eAsigna u aCHARACTER VARYING(254) api_cues iona io id BIGINT i ulo CHARACTER VARYING(100) du acion INTEGER secuencial BOOLEAN passwo d CHARACTER VARYING(300) echa_ isible TIMESTAMP(6) WITH TIME ZONE echa_ape u aTIMESTAMP(6) WITH TIME ZONE echa_cie e TIMESTAMP(6) WITH TIME ZONE alea o iza BOOLEAN asigna u a_id BIGINT p o eso _id BIGINT api_cu sa id BIGINT alumno_id BIGINT asigna u a_idBIGINT api_impa e id BIGINT asigna u a_idBIGINT p o eso _id BIGINT api_ins anciaopcion es id BIGINT o den SMALLINT espues a_idBIGINT ins ancia_idBIGINT api_ins anciap egun a id BIGINT o den SMALLINT in en o_id BIGINT p egun a_idBIGINT seleccion_idBIGINT api_ins anciap egun a es ins anciap egun a_p _idBIGINT espues a_id BIGINT api_ins anciap egun a ex ins anciap egun a_p _idBIGINT espues a CHARACTER VARYING(254) api_in en o id BIGINT no a NUMERIC(10,2) hash CHARACTER VARYING(254) hash_offline CHARACTER VARYING(254) echa_inicio TIMESTAMP(6) WITH TIME ZONE echa_fin TIMESTAMP(6) WITH TIME ZONE es ado CHARACTER VARYING(3) cues iona io_idBIGINT usua io_id BIGINT api_opcionp egun aalea o ia id BIGINT p egun a_id BIGINT p egun a_alea o ia_idBIGINT api_opcion es id BIGINT opcion CHARACTER VARYING(254) o den SMALLINT fija BOOLEAN p egun a_idBIGINT api_p egun a id BIGINT p egun a CHARACTER VARYING(254) i ulo CHARACTER VARYING(254) asigna u a_idBIGINT api_p egun a es p egun a_p _idBIGINT espues a_id BIGINT api_p egun a ex p egun a_p _idBIGINT espues a TEXT api_seleccionp egun a id BIGINT pun osAcie oNUMERIC(30,2) pun osFallo NUMERIC(30,2) o den SMALLINT fija BOOLEAN alea o iza BOOLEAN ipo CHARACTER VARYING(3) cues iona io_idBIGINT p egun a_id BIGINT api_use id BIGINT passwo d CHARACTER VARYING(128) las _login TIMESTAMP(6) WITH TIME ZONE is_supe use BOOLEAN email CHARACTER VARYING(255) fi s _name CHARACTER VARYING(30) las _name CHARACTER VARYING(150) ole CHARACTER VARYING(7) is_ac i e BOOLEAN is_s affBOOLEAN da e_joined TIMESTAMP(6) WITH TIME ZONE api_use _g oups id BIGINT use _id BIGINT g oup_idINTEGER api_use _use _pe missions id BIGINT use _id BIGINT pe mission_idINTEGER Figu a 3.4: Modelo elacional esquema de la base de da os que he edamos de nues os compañe os, sino ambién pa a ayuda en un u u o a posibles compañe os que decidan p osegui con nues o abajo. Como podemos e en la igu a 3.4, ealizamos un modelo elacional en la apli- cación con la he amien a D aw.IO que nos ayudó eno memen e a lo la go de es e p oyec o. 3.2. API de comunicación en e back-end y on - end Como hemos ido an icipando, la comunicación en e los dos lados de la aplicación es impo an e pa a el uncionamien o de la misma. Pa a ello se ealizan las APIs, que pe mi en que el back-end y el on -end se comuniquen, in e cambiando da os o ejecu ando acciones especi icas. Como p oyec o con inuación de o o an e io , he e- damos una API ya ealizada con an e io idad po nues os compañe os, que hemos 3.3. Aspec os de Django 17 Figu a 3.5: Vis a del panel de adminis ación de Django modi icado y adap ado mucho mejo al en o no de Django y Reac , nues as dos ecnologías p incipales pa a cada lado espec i amen e. 3.3. Aspec os de Django En es a sección habla emos sob e los aspec os más especí icos del amewo k Django que hemos u ilizado pa a el desa ollo back-end de nues a aplicación. 3.3.1. Panel de adminis ación Una de las he amien as más po en es de Django es su e minal de adminis- ación. Es a he amien a o ece la posibilidad a los usua ios .adminis ado es" de ealiza consul as e inse ciones en la base de da os con mucha acilidad. De hecho, al y como ambién hicie on nues os compañe os del cu so pasado, es posible delega en es a he amien a de adminis ación algunas de las uncionalidades que no se han implemen ado di ec amen e en la aplicación web de Qwize , ales como el egis o de p o eso es o el egis o de nue as asigna u as. En la igu a 3.5 podemos e la is a de la he amien a. Lo que sí hemos a ado de hace du an e es e año es mejo a el uso del panel de adminis ación, exp imiéndola lo máximo posible y ajus ándola solo a las unciona- lidades que necesi amos que enga. En e las mejo as ealizadas podemos encon a las siguien es: Focalización en las opciones más ele an es: An e io men e, el panel de adminis ación o ecía el acceso a odas las ablas de la aplicación, donde 18 Capí ulo 3. A qui ec u a global del sis ema algunas de ellas no e an necesa ias, ya que den o de Qwize es aban esas un- cionalidades. Po lo que decidimos elimina el acceso a las ablas innecesa ias y deja la in e az mucho más limpia y escue a pa a los p opios adminis ado es. Regis o de usua ios: Cuando se incluye la abla de usua ios en el panel de adminis ación, po de ec o, se u iliza la en idad Usua ios de Django, la cual iene nume osos campos que noso os no enemos en cuen a pa a el almacena- mien o de los mismos. Es o hacía que la c eación de usua ios ue a algo len a e incluso pesada. Po ello decidimos elimina los a ibu os innecesa ios y así simpli ica el p oceso de egis o. Inse ción en lo e de usua ios: Una nue a uncionalidad que nos pa eció bas an e ú il ue el hecho de añadi la posibilidad de inse a usua ios en lo e. An e io men e, los usua ios se enían que c ea uno a uno. Po an o pe mi imos que los adminis ado es pudie an añadi a ios usua ios de una sola ez. Pa a ello, en la abla de usua ios hay una opción de impo a usua ios donde podemos in oduci un iche o CSV que con enga oda la in o mación de los usua ios pa a egis a los di ec amen e. Un ejemplo de es o se ía la igu a 3.6. email i s name las name passwo d ole [email p o ec ed] alumno 1 1 s uden [email p o ec ed] alumno 2 2 s uden [email p o ec ed] p o eso 3 eache Figu a 3.6: Fiche o CSV con usua ios 3.4. Lib e ías ex e nas En es a sección habla emos sob e las lib e ías ex e nas de Django y Reac que hemos u ilizado en la aplicación. 3.4.1. Lib e ías pa a el back-end django es amewo k [19]: Pe mi e la c eación de una API REST de mane- a sencilla. El año pasado, en e o as cosas, nues os compañe os la u iliza on po el sis ema de Tokens de sesión que u ilizaba es a lib e ía, la cual sim- pli icaba el complejo sis ema de sesiones de Django y conseguía los obje i os elacionados con el apa ado o line de la aplicación. Noso os hemos decidido i un poco más lejos y ap o echa más es a lib e ía u ilizando sus componen es básicos pa a la c eación p opia de la API. Dado que es o supone una mejo a sus ancial en la implemen ación, habla emos más ex ensamen e sob e el uso de es a lib e ía en el apa ado 3.5.2. 3.4. Lib e ías ex e nas 19 1#qwize _be/.en .sample 2REACT_APP_API_URL= 3REACT_HOST= 4REACT_PORT= 5 6#qwize _ e/.en .sample 7SECRET_KEY= 8DEBUG= 9ALLOWED_HOSTS= 10 DATABASE_ENGINE= 11 DATABASE_NAME= 12 DATABASE_USER= 13 DATABASE_PASSWORD= 14 DATABASE_HOST= 15 DATABASE_PORT= 16 CORS_ALLOW_ALL_ORIGINS= 17 CORS_ORIGIN_WHITELIST= 18 CSRF_TRUSTED_ORIGINS= 19 Figu a 3.7: Fiche o en de Django django-en i on [15]: Pe mi e la c eación de un en o no de desa ollo en Django más amigable y segu o. Tan o en el despliegue como en el desa ollo del p oyec o, Django maneja nume osas a iables de con igu ación y hacen que sus iche os sean di íciles de segui . Además, el uso de es a biblio eca pe mi e encapsula en un solo iche o .en odas las a iables de con igu ación que se necesi en. Es o acili a el en endimien o gene al de la con igu ación del p oyec o y ayuda a ealiza modi icaciones de mane a más simple. En la igu a 3.7 podemos e un ejemplo de es e iche o de con igu ación. django-impo -expo [2]: Pe mi e impo a y expo a obje os elaciona- dos con las ablas de la base de da os. En la sección an e io hablamos del uso del panel de adminis ación den o de nues o p oyec o. Es a lib e ía es la que nos ha pe mi ido añadi usua ios en lo e. djose [18]: O ece una se ie de endpoin s elacionados con acciones básicas como son el egis o, inicio y cie e de sesión. Es a lib e ía se in eg a con el mo- delo de Tokens de la biblio eca django es amewo k pa a in en a mejo a el sis ema de sesiones sob e odo con amewo ks como Reac , que man ienen un modelo SPA que di icul a el man enimien o de las p opias sesiones. d -spec acula [6]: Pe mi e la documen ación de la API en Django. Es a lib e ía, que abaja con el es ánda de Open API 3, pe mi e la in eg ación con Swagge ( e subsección 2.3.7) nos ha ayudado a una gene ación de la documen ación de la API muy de allada. gunico n [1]: También conocido como G een Unico n, es un se ido HTTP 20 Capí ulo 3. A qui ec u a global del sis ema compa ible con Django que se u iliza pa a ejecu a aplicaciones web Django. Ac úa como un se ido in e media io en e el se ido web y la aplicación Django, ges ionando las solici udes HTTP y en iando las espues as co es- pondien es. Gunico n implemen a el es ánda WSGI (Web Se e Ga eway In e ace), que de ine una in e az común en e los se ido es web y las aplica- ciones web en Py hon. En esumen, Gunico n es una pa e in eg al del en o no de Django, b indando un se ido HTTP obus o y e icien e pa a ejecu a apli- caciones web Django en p oducción. 3.4.2. Lib e ías pa a el on -end axios [10]: Pe mi e ene un clien e HTTP pa a hace llamadas a la API de mane a más cómoda. En la sección de mejo as ( e sección 3.5) habla emos más ex ensamen e de cómo hemos añadido es a lib e ía a nues o p oyec o, pe o el año pasado, nues os compañe os u ilizaban la p opia llamada e ch de Ja aSc ip pu o, donde enían que cons ui ellos sus p opias pe iciones pa a llama a la API. Con axios es e p oceso se simpli ica con una sin axis muy sencilla y pe mi iendo cen aliza odo el manejo de llamadas a la API en un solo componen e. local o age [12]: Pe mi e el acceso al almacenamien o local y a la base de da os indexada en el na egado a a és de un p og ama en Ja aSc ip . En nues a aplicación hacemos un g an uso del almacenamien o local pa a gua da cues iona ios, okens e incluso in o mación del usua io. Es a biblio eca nos pe mi e accede a es e almacenamien o y ambién a la base de da os indexada que hay en los na egado es, la cual pe mi e almacena mucho más con enido que los escasos 5MB del almacenamien o local. Además, la lib e ía o ece una in e az muy ácil de usa muy pa ecida al esquema de cla e- alo que es amos acos umb ados a usa . eac - ou e -dom [14]: Pe mi e simula en Reac la unción de se i dis- in as páginas al clien e desde di e en es u as. No malmen e, en las páginas web que no u ilizan Reac , cuando accedemos a un u a especi ica el se ido nos de uel e un iche o HTML único pa a esa u a. Como Reac se basa en un modelo SPA no podemos pe mi i nos es a ca ac e ís ica, po lo que enemos que simula la de alguna mane a. Es a lib e ía nos pe mi e de ol e un com- ponen e de Reac po cada u a ins anciada en la aplicación man eniéndose siemp e en una sola página. hello-pangea/dnd [5]: Pe mi e un sis ema de d ag and d op en las lis as de nues a aplicación. Algunas eces, den o de Qwize necesi amos que nues os usua ios coloquen una se ie de p egun as en o den, po lo que con el in de acili a les es a a ea hemos decidido añadi es a lib e ía, que apa e de hace más es é ico es e p oceso, pe mi e cambia el o den en e los elemen os den o de una lis a. En la igu a 3.8 podemos e un ejemplo de es a lib e ía en uso. 3.5. Mejo as ealizadas sob e el abajo an e io 21 Figu a 3.8: Ejemplo de lib e ía hello-pangea/dnd 3.5. Mejo as ealizadas sob e el abajo an e io En es a sección amos a habla de las mejo as que hemos ealizado a lo la go del p oyec o sob e los elemen os que ya enían implemen ados en el abajo del año pasado. 3.5.1. F on -end 3.5.1.1. Re ac o ización de clases a unciones El código de un componen e en Reac se puede es uc u a de dos mane as: median e clases o median e unciones. Según los p opios desa ollado es de Reac , el sis ema median e clases ha quedado o almen e obsole o debido al cambio en el es ánda de Ja aSc ip y a p oblemas de endimien o. Po es a azón, decidimos que debíamos cambia odos los componen es de nues os compañe os del año pasado a un en oque uncional, es deci , componen es basados en unciones. Es o, además de mejo a el endimien o de la aplicación, nos ayuda ía a ac ualiza el código y p og ama en la mane a más co ec a de Reac . A lo la go de la e ac o ización, ambién nos encon amos con nume osas a ia- bles decla adas con el ipo a de Ja aSc ip que según el es ánda se debe ían de e i a po su compo amien o den o del código, po lo que uimos cambiando las a iables a la decla aciones ac uales de le ycons . O o da o a menciona ue el hecho de cambia las ex ensiones de odos los iche os de los componen es de Reac a iche os JSX. An e io men e, odos los componen es es aban esc i os en o ma o JSX pe o los iche os es aban decla ados como iche os de Ja aSc ip . Apa e de es os cambios, ambién decidimos o dena y o ganiza el código pa a un mejo en endimien o a la ho a de desa olla , es uc u ando mejo sob e odo la ca pe a s c del p oyec o, sepa ando componen es, hooks, se icios, iche os CSS e imágenes. 3.5.1.2. Ac ualización de lib e ías Debido al cambio de es uc u a del código de Reac y el paso del iempo, muchas de las lib e ías que se u ilizaban el p oyec o del año pasado queda on algo desac ua- 22 Capí ulo 3. A qui ec u a global del sis ema Figu a 3.9: Ejemplo de lin e de Reac lizadas o obsole as. Po ese mo i o necesi ábamos ac ualiza las lib e ías y elimina las que no se u iliza án. G acias a que cualquie p oyec o de Reac abaja sob e un en o no de Node.js, podemos ac ualiza odas las lib e ías que u ilicemos de mane a p ác icamen e ins an ánea ejecu ando el comando de npm upda e, el cual ac uali- za á odas las lib e ías que engamos decla adas en el iche o package.json. En el caso que quisié amos elimina cualquie biblio eca, simplemen e debemos ejecu a el comando npm unins all <nomb e-del-paque e>. Apa e de es os cambios, que emos des aca el cambio de e sión de la p o- pia lib e ía de Reac . La e sión an e io men e u ilizada po nues os compañe os, Reac 17, enía nume osos p oblemas de ejecución con la de inición de componen es median e unciones, po lo que u imos que ealiza un cambio a la e sión más ac ualizada, Reac 18, en la que cambiaba como se a aba el ende izado p incipal de la página. 3.5.1.3. A eglo de e o es y lin ing Pa a el a eglo de e o es gene alizado du an e la e ac o ización del código y nues o u u o desa ollo en la aplicación, decidimos que lo mejo se ía añadi lin e s a nues o edi o de ex o, Visual S udio Code. Los lin e s son ex ensiones de Visual S udio Code que pe mi en mos a e o es en la sin axis o da consejos sob e cómo es uc u a mejo el código bajo un es ánda . En nues o caso, añadimos lin e s an o de Reac como de Ja aSc ip pa a que nos ayudasen a encon a e o es más dep isa y e i a que come iésemos e o es innecesa ios. En la igu a 3.9 podemos e una de las ecomendaciones que nos hace el lin e de Reac . 3.5.1.4. Con igu ación del en o no del desa ollo Pa a acili a el desa ollo a lo la go del p oyec o pensamos que una buena con i- gu ación de nues o en o no y edi o de abajo es esencial. An e io men e, ya hemos hablado de la mejo a con los lin e s pa a la iden i icación de e o es y mejo as en nues o código, pe o ambién cabe des aca la con igu ación del en o no con nues o nue o compilado de Reac , Vi e. De la misma mane a que en Django, Reac maneja una se ie de con igu aciones básicas pa a ejecu a su código. Vi e pe mi e, al igual que hacíamos con django- en i on ( e sección 3.4.1), almacena en un iche o ipo .en odas las a iables de con igu ación necesa ias, abs ayendo así odo en un simple iche o y mejo ando la legibilidad del código en gene al. 3.5. Mejo as ealizadas sob e el abajo an e io 23 1expo cons Subjec s = { 2ge All: (_da a = {}, con ig = {}) => 3clien .ge (’subjec ’, con ig), 4ge Tes s: ({ idAsigna u a }, con ig = {}) => 5clien .ge (‘subjec /${idAsigna u a}/cues iona ios‘, con ig), 6ge Ques ions: ({ idAsigna u a }, con ig = {}) => 7clien .ge (‘subjec /${idAsigna u a}/p egun as‘, con ig), 8ge F omS uden O Teache : (_da a = {}, con ig = {}) => 9clien .ge (’subjec /me’, con ig), 10 en ollS uden s: ({ alumnos, asigna u a }, con ig = {}) => 11 clien .pos (‘subjec /${asigna u a}/en oll‘, { alumnos }, con ig), 12 dele eS uden sF omSubjec : ({ alumnos, asigna u a }, con ig = {}) => 13 clien .pos (‘subjec /${asigna u a}/dele e_en oll‘, { alumnos }, con ig) ,→, 14 }; 15 Figu a 3.10: F agmen o del iche o de comunicación con la API Además, Visual S udio Code pe mi e con igu a comandos pe sonalizados pa a ejecu a den o de nues os p oyec os. En nues o caso hemos con igu ado una se ie de comandos pa a a anca la aplicación, a ancando an o el back-end como el on -end de mane a au omá ica en sus espec i os pue os, inicia es s de p ueba ydepu a nues a aplicación. Todo es os comandos se encuen an especi icados en el iche o asks.json. 3.5.1.5. Mejo as gene ales Abs acción de la API: An e io men e, las llamadas a la API es aban espa - cidas po odos los componen es de la aplicación, donde po cada llamada se o maba la pe ición, epi iendo así muchísimo código y haciendo que el con ol y man enimien o de odas las llamadas ue a complicado de ges iona . Po es a azón, p ime o, o mamos con la nue a lib e ía axios un mé odo que c ea á la pe ición pa a e i a epe i lineas de códigos po cada llamada a la API y después, decidimos uni ica en un iche o odas las llamadas pa a mejo a el con ol y la expansión de la API. En la igu a 3.10 podemos e como quedó pa e del dicho iche o, donde se ap ecian odas las llamadas elacionadas con las asigna u as. Abs acción de u as: An e io men e, ambién odas las u as que hay en el lado del clien e se colocaban di ec amen e en el código, y como buena p ác- ica decidimos añadi un iche o de cons an es que eunie a odas las u as u ilizadas y así hace más legible el código. Reac Rou e y P o ec edRou es: Como ya comen amos en la sección de lib e ías ex e nas ( e sección 3.4.2), el uso de eac - ou e ayudaba a man- 24 Capí ulo 3. A qui ec u a global del sis ema ene la a qui ec u a SPA de Reac aunque se cambia á de u a. Es a lib e ía o ece un componen e Rou e que engloba a odas las u as de la API, donde a cada una se le asigna un componen e especi ico de Reac que se debe de ol e cuando se acceda a esa u a. El año pasado, nues os compañe os no llega on a aplica es a lib e ía co ec amen e, debido a que decla a on un componen e Rou e po cada u a de la API y pensaban que enían que es uc u a den o oda la página que que ían de ol e al usua io. Es o desembocó en un mal uso de es a lib e ía y en un componen e App.js demasiado ex enso. Po lo que es e año hemos conseguido implemen a la co ec amen e, educiendo eno me- men e el código del componen e p incipal y hemos añadido que cie as u as sean exclusi as solo pa a cie os ipos de usua io. Po ejemplo, si un es udian e a a a de accede a la is a de c ea cues iona ios in oduciendo di ec amen e la u a en la ba a de di ecciones del na egado , no se le pe mi i ía el acceso. useFe ch,hook pa a llamadas asínc onas: Cuando el es ado de un elemen- o de Reac depende de da os asínc onos se suele u iliza el hook useE ec de Reac pa a con ola cuándo debe de ende iza se o a ez el componen e una ez ac ualizado dicho elemen o. Como es o es algo ecu en e den o de nues a aplicación, con el a án de eu iliza código decidimos c ea un hook pe sonalizado que a a a odas es as si uaciones de igual mane a. useAu h,hook de au en icación: Con el in de cen aliza oda la lógica elacionada con la au en icación de los usua ios, decidimos c ea un hook pe - sonalizado que engloba a odas las ope aciones de au en icación y maneja a la in o mación del usua io que es á logueado en ese momen o. 3.5.2. Back-end 3.5.2.1. Re ac o ización de código Lo p ime o que in en amos hace al p incipio del p oyec o, e a comp ende el código del p oyec o an o a ni el de back-end como on -end. A ni el de back-end, ya que nunca habíamos u ilizado Django, en ende odo el código al p incipio ue una a ea bas an e du a. La o ganización del código e a algo compleja y di ícil de en ende , con iche os ex ensos y es uc u as muy p o undas. Po ello empezamos un p oceso de e ac o ización de código en el que nues o obje i o e a undamen almen e o ganiza el código de una mane a que noso os lo en endié amos. P ime o de odo, empezamos o ganizando los nomb es de las u as de la API. An es, se u ilizaban nomb es poco especí icos que no dejaban cla o qué hacía cada mé odo. Después, empezamos a es uc u a el código de una mane a o ganizada, eliminando edundancias y haciendo más legible cada mé odo. Además, odas las llamadas a la API es aban con mé odos POST, cuando debe ían se GET y ambién los ajus amos. Finalmen e, pasamos a es udia más en p o undidad la lib e ía de django es - amewo k. En es a lib e ía explicaban el uso de algunas he amien as que nos 3.5. Mejo as ealizadas sob e el abajo an e io 25 se i ían a mejo a la es uc u a gene al de la API. Den o de es os consejos se en- con aban los conocidos como iewse s, que explica emos en el apa ado de mejo as gene ales ( e sección 3.5.2.5). 3.5.2.2. Ac ualización de lib e ías De la misma mane a que ac ualizamos las biblio ecas del on -end ambién nos en ocamos en pone al día odas las lib e ías u ilizadas en el back-end. Pa a empeza , an es de ac ualiza odas las biblio ecas, decidimos implemen a un en o no i ual de Py hon en nues a aplicación. Los en o nos i uales pe mi en ene una ins ancia de Py hon especi ica con una se ie de dependencias ins aladas asociadas al p oyec o, sin obliga al clien e a ene que ins ala odas es as en su p opio equipo. An e io men e, pa a pode abaja sob e el p oyec o eníamos que ins ala odas las dependencias y lib e ías asociadas una a una en nues os equipos, con el iesgo de ene con lic os con nues as lib e ías p opias ins aladas y además haciendo es e p oceso edioso y moles o pa a los desa ollado es. Con un en o no i ual e i amos es o y abs aemos así el en o no del p oyec o de la con igu ación p opia de nues os equipos. Pa a man ene el p oyec o de mane a más segu a y es able, necesi ábamos un ges o de dependencias pa a odas las lib e ías del p oyec o y una he amien a que c ea á el en o no i ual. Po es e mo i o, al p incipio, u ilizamos pipen .Pipen es un ges o de dependencias que abaja con en o nos i uales. Pe mi e c ea en o nos i uales y a a és de un iche o Pip ile, donde se gua dan odas las dependencias del p oyec o e ins ala en el mismo en o no i ual odos las lib e ías especi ica- das. Du an e pa e del pe iodo de desa ollo, u ilizamos es e ges o has a que más adelan e decidimos pasa nos a o o ges o de dependencias llamado Poe y. Poe y, del mismo modo que pipen , es o o ges o de dependencias, pe o en es e caso pe mi e almacena odas las dependencias del p oyec o con sus con igu aciones en un solo iche o . oml. Según los es ánda es de Py hon más ac uales, la ges ión de un p oyec o se debe man ene median e es e ipo de iche os, po lo que pa a man ene nues o p oyec o lo más ac ualizado y co ec o posible decidimos cambia pipen po poe y. Po úl imo, añadimos la ac ualización de Django a su e sión más ac ualizada, Django 4.1. En el p oyec o an e io , se u ilizaba Django 3, po lo que emíamos que su ac ualización die a muchos p oblemas de compa ibilidad. Aún así, no hubo muchas di icul ades en es e p oceso. 3.5.2.3. A eglo de e o es y lin ing Al igual que en el on -end, pa a el a eglo de e o es decidimos u iliza los lin e s de Django y Py hon. Es os nos ayuda ían a de ec a e o es básicos en la sin axis de Py hon, como e o es de espaciados, excepciones o allos gene ales. Respec o a Django, ambién incluía consejos de cómo u iliza de e minados elemen os y dónde 32 Capí ulo 3. A qui ec u a global del sis ema Figu a 3.15: Nue a en ana modal pa a la ma iculación de alumnos Cap´ ı ulo 4 Alea o ización de cues iona ios En es e capí ulo amos a explica cómo a lo la go de es e p oyec o hemos im- plemen ado uno de los p incipales obje i os plan eados pa a nues o p oyec o: la alea o ización de cues iona ios. 4.1. Obje i o p incipal / In oducción La alea o ización de los cues iona ios es un obje i o muy amplio que aba ca nume osos pun os a desa olla . P incipalmen e, el obje i o inicial e a o ece la posibilidad de la alea o ización de las p egun as de un cues iona io, es deci , en el caso que un p o eso decidiese elabo a un cues iona io en el que sus p egun as se mos a ían de o ma alea o ia, cada es udian e e ía su cues iona io en el que las p egun as apa ecen en un o den dis in o al de los demás es udian es. Poco a poco, es a idea se ue ag andando y uimos ex endiendo es e obje i o a algo más complejo, en los que podemos iden i ica los siguien es obje i os: Alea o ización de las opciones: Qwize cuen a con un banco de p egun as con di e en es ipos de p egun a. Den o de los ipos que nos podemos encon- a , se encuen an las llamadas p egun as ipo es . En es e ipo de p egun as se le o ece al usua io un núme o de opciones especi ico con di e en es es- pues as an e una p egun a. Al a a el ema de la alea o ización, decidimos o ece es a p opiedad ambién a las opciones den o de una p egun a de ipo es , po lo que el p o eso end ía la opción de elegi si quie e que las opciones se ba ajen de mane a alea o ia a los alumnos. Fijación de p egun as y opciones: La alea o ización de las p egun as o de las opciones de un cues iona io supone cambia el o den ela i o de las mismas. Sin emba go, a lo mejo los p o eso es en la c eación de sus cues iona ios quie en man ene una p egun a o una opción en un luga ijo. Po ejemplo, en las opciones de una p egun a ipo es , nos podemos encon a la opción de Ninguna de las an e io es. En es e caso, dado el signi icado de la misma opción, lo co ec o se ía coloca la en la úl ima opción posible. Si el p o eso aún así quie e que las opciones se dispongan de mane a alea o ia, end ía que ene la posibilidad de man ene algunas opciones en una cie a posición ija. P egun as alea o ias: Apa e de la alea o ización de las p egun as den o de un cues iona io, el p o eso ambién ag adece ía la posibilidad de, en un nú- 33 34 Capí ulo 4. Alea o ización de cues iona ios me o de p egun a especi ico de su cues iona io, ag ega una se ie de p egun as a apa ece an e los usua ios. Po ejemplo, en un cues iona io un p o eso deci- de que en la p egun a 3 no quie e que apa ezca una p egun a especi ica, sino que quie e que la aplicación elija en e un pa de p egun as que él señale, es deci , siguiendo el ejemplo an e io y eniendo en nues o banco de p egun as las p egun as 1,2,3 y 4, el p o eso quie e que una de e minada p egun a de su cues iona io, puedan apa ece la p egun a 1,2 o 3 del banco de p egun as. Es o es lo que noso os hemos iden i icado como p egun as alea o ias. 4.2. Cambios en la base de da os La inco po ación de mecanismos de alea o ización en nues os cues iona ios p o- ocó g andes cambios en la es uc u a gene al de la base de da os, haciendo que la misma pasase po nume osas modi icaciones pa a la buena adap ación a es a nue a ca ac e ís ica. En es a sección i emos iendo la p og esión de la base de da os a medida que íbamos cumpliendo los obje i os ma cados. 4.2.1. C eación de en idad In en o e ins ancias El añadido de la alea o ización de las p egun as a un cues iona io plan eaba un g a e p oblema an e nues o modelo en idad- elación inicial. An e io men e, las espues as de los es udian es a las p egun as de un cues iona io se almacenaban en una en idad llamada Respues as en iadas. Cada ez que cualquie es udian e espondía una p egun a de un cues iona io, se gua daba en es a abla la espues a del mismo. Es a en idad no enía ninguna elación con el cues iona io al que se con es aba y sabe el o den en el que un cues iona io se había con es ado y qué espues a pe enecía a dicha p egun a e a algo al amen e complicado, po lo que po el a án de cen aliza mejo la lógica p opia de los cues iona ios y sus ealizaciones, c eamos la en idad In en o. La en idad de in en o almacena ía oda la in o mación que se almacenaba an es en e a ias en idades en una sola, es deci , se gua da ía que es udian e espondió dicho in en o sob e un cues iona io y qué espues as había mandado ese es u- dian e an e las di e en es p egun as. Más adelan e, decidi íamos que las espues as de los es udian es se pod ían in e p e a como ins ancias de p egun as que el usua io esponde, po lo que con es o inició el concep o de las Ins ancias de p egun as. Las ins ancias de p egun as almacena ían la espues a de un usua io a una p e- gun a y el o den en la que apa eció en un in en o. Es o nos ayuda ía eno memen e después pa a el a amien o de la alea o ización den o de la aplicación, de ca a, a ecupe a el o den inal de las p egun as de un cues iona io pa a un usua io. Con los modelos de Django, c eamos es as dos nue as en idades de una mane a muy sencilla y ápida. En el caso de las ins ancias end íamos ins ancias pa a las p egun as ipo es y las ipo ex . Po lo que el modelo inal de las ins ancias 4.2. Cambios en la base de da os 35 queda ía algo así: 1class Ins anciaP egun a(models.Model): 2objec s = Ins anciaP egun aManage () 3in en o = models.Fo eignKey(In en o, 4on_dele e=models.CASCADE) 5seleccion = models.Fo eignKey(SeleccionP egun a, 6on_dele e=models.CASCADE) 7p egun a = models.Fo eignKey(P egun a, 8on_dele e=models.CASCADE) 9o den = models.Posi i eSmallIn ege Field() 10 11 class Me a: 12 o de ing = ["p egun a"] 13 14 class Ins anciaP egun aTes (Ins anciaP egun a): 15 objec s = Ins anciaP egun aTes Manage () 16 espues a = models.Fo eignKey(OpcionTes , 17 on_dele e=models.CASCADE 18 ,null=T ue, blank=T ue) 19 20 21 class Ins anciaP egun aTex (Ins anciaP egun a): 22 objec s = Ins anciaP egun aTex Manage () 23 espues a = models.Cha Field(null=T ue, blank=T ue, 24 max_leng h=254, 25 e bose_name=" espues a") y el modelo de in en o llega ía a se algo así: 1class In en o(models.Model): 2objec s = In en oManage () 3usua io = models.Fo eignKey(Use , 4on_dele e=models.CASCADE) 5cues iona io = models.Fo eignKey(Cues iona io, 6on_dele e=models.CASCADE) 7no a = models.DecimalField(de aul =0, max_digi s=10, 8decimal_places=2, 9 e bose_name="no a") 10 hash = models.Cha Field(blank=T ue, max_leng h=254, 11 e bose_name="hash") 12 hash_o line = models.Cha Field(blank=T ue,max_leng h=254, 13 e bose_name="hash_o line") 14 echa_inicio = models.Da eTimeField(null=T ue,blank=False, 15 e bose_name=" echa_inicio") 16 echa_ in = models.Da eTimeField(null=T ue,blank=False, 17 e bose_name=" echa_ in") 18 19 class Es ado(models.Tex Choices): 20 PENDIENTE = ’PEN’, _(’Pendien e’) 21 ENTREGADO = ’ENT’, _(’En egado’) 36 Capí ulo 4. Alea o ización de cues iona ios 22 23 es ado = models.Cha Field( 24 max_leng h=3, 25 choices=Es ado.choices, 26 de aul =Es ado.PENDIENTE, 27 ) Una ez enemos un modelo en idad- elación más óp imo y p epa ado pa a es a nue a ca ac e ís ica, ya podemos segui con nue as p opiedades. 4.2.2. Alea o ización de p egun as Inicialmen e, nues os compañe os del año pasado, mos aban las p egun as de un cues iona io de mane a secuencial, es deci , según el o den en el que hubie an añadido el p o eso las p egun as al cues iona io en sí. Pa a consegui la alea o ización de las p egun as simplemen e u imos que añadi un nue o a ibu o en la en idad Cues iona ios que con olase si el p o eso quie e que las p egun as apa ezcan de mane a alea o ia o no den o de un cues iona io. Como nos apoyamos en el ORM de Django, u imos que modi ica el modelo de la clase Cues iona io, añadiéndole el a ibu o nue o de alea o ización, quedando así un modelo como el siguien e: 1class Cues iona io(models.Model): 2objec s = Cues iona iosManage () 3p o eso = models.Fo eignKey(Use , 4on_dele e=models.CASCADE) 5asigna u a = models.Fo eignKey("Asigna u a", 6on_dele e=models.CASCADE) 7... 8... 9alea o iza = models.BooleanField(de aul =False) Den o de la aplicación, como podemos e en la igu a 4.1, hay un pequeño ejemplo de cómo un p o eso pod ía modi ica es e a ibu o a su an ojo. En el caso en que el p o eso decidiese añadi un cues iona io a a és de un iche o YAML, simplemen e end ía que añadi un pequeño campo de alea o iza como se puede e en la igu a 4.2. Cabe eco da que, g acias a nues o modelo basado en ins ancias de las p e- gun as, pod íamos gua da en qué posición apa eció cada p egun a del cues iona io en cada in en o, pe mi iéndonos con es e sis ema ecupe a de mane a sencilla el o den de odas las p egun as den o de un in en o. 4.2. Cambios en la base de da os 37 Figu a 4.1: Modi icación de alea o ización en c eación de cues iona ios 1cues iona io: 2 i ulo: "Tema 8" 3passwo d: "1234" 4asigna u a: "Es uc u as de da os" 5secuencial: 0 #0 es que no es secuencial, 1 es secuencial 6du acion: 10 #minu os que du a a el es 7 echa_ape u a: ’21/02/20 11:00:00’ #Fo ma o espe ado: yy:mm:dd hh:mm:ss 8 echa_cie e: ’23/03/24 11:59:59’ #Fo ma o espe ado: yy:mm:dd hh:mm:ss 9 echa_ isible: ’21/02/20 11:00:00’ #Fo ma o espe ado: yy:mm:dd hh:mm:ss 10 alea o iza : T ue #Indica que se quie e alea o iza el cues iona io 11 Figu a 4.2: Alea o ización en cues iona ios ía YAML 38 Capí ulo 4. Alea o ización de cues iona ios Figu a 4.3: Elección de alea o ización de opciones 4.2.3. Alea o ización de opciones La alea o ización se debe hace ambién a ni el de opciones den o de las p egun- as ipo es . El p o eso debe ía de pode elegi si las opciones de una p egun a es deben mos a se de mane a alea o ia den o de un in en o. Al igual que nos pasó con las p egun as den o de los cues iona ios, nues o modelo en idad- elación no es aba oda ía lo su icien emen e p epa ado como pa a almacena si una p egun a den o de un in en o debe ía mos a sus opciones de mane a alea o ia y ampoco es aba es uc u ado pa a gua da el o den con el que se mos a ían las opciones a los es udian es. Pa a el p ime o de los p oblemas, añadimos un nue o a ibu o en la clase que almacenaba las p egun as pe enecien es a un cues iona io, al igual que en la alea o ización de las p egun as, es e nue o a ibu o gua da ía si la p egun a den o del cues iona io debe ía mos a sus opciones de mane a alea o ia. A consecuencia de es a solución, el p o eso pod ía ma ca si las opciones de una p egun a ipo es se mos a ían de o ma alea o ia. Como podemos e en la igu a 4.3 es muy ácil de con ola . En el caso en que el p o eso decida añadi un cues iona io a a és de un iche o YAML, lo único que end á que hace es añadi un nue o a ibu o en las p egun as ipo es , como se puede e en la igu a 4.2, pe o en ez de añadi lo a ni el de cues iona io, debe á añadi lo a ni el de p egun a. Con o me a es o pod íamos con ola pe ec amen e el p ime o de los p oblemas, pe o pa a busca una solución al segundo p oblema necesi amos pensa en cómo al- macena el dis in o o den de las opciones en los di e en es in en os de los es udian es. Pa a soluciona es o u ilizamos de nue o nues a men alidad de las ins ancias y con ello c eamos así la clase de Ins anciaOpcionTes . En es e nue o modelo de la base de da os se gua da ía una e e encia de la opción es que gua dase esa nue a ins ancia y además el o den en el que apa eció es a opción en el in en o a la que es a asignada. El nue o modelo en Django es á indicado en la Figu a 4.4, donde se puede obse a que gua da odos los da os an e io men e edac ados: 4.3. P egun as alea o ias 39 1class Ins anciaOpcionTes (models.Model): 2objec s = Ins anciaOpcionTes Manage () 3ins ancia = models.Fo eignKey(Ins anciaP egun aTes , 4on_dele e=models.CASCADE) 5 espues a = models.Fo eignKey(OpcionTes , 6on_dele e=models.CASCADE, 7null=T ue, blank=T ue) 8o den = models.Posi i eSmallIn ege Field() 9 Figu a 4.4: Modelo Ins anciaOpcionTes 4.2.4. Fijación de p egun as y opciones Como ya hablamos con an e io idad, la alea o ización p esen aba el p oblema de p egun as o opciones de p egun as ipo es que el p o eso quisiese que se que- da án ijadas en una posición conc e a. Po ejemplo, en el caso de la opción de Ninguna de las an e io es, coloca la en una posición di e en e a la úl ima p o- oca ía con usión en la p opia p egun a. Po es a azón, pa a soluciona es e pequeño con a iempo, decidimos almacena un nue o campo ija en los modelos donde se gua da la in o mación co espondien e a las p egun as pe enecien es a un cues io- na io, Pe eneceCues iona io y al modelo donde se gua da la in o mación sob e las opciones de las p egun as de es e ipo. G acias a es a implemen ación, una ez se ecupe ase una p egun a o una opción de un in en o se pod ía comp oba si la misma debe ía i ijada a la posición en la que se encuen a o no. En el apa ado de la aplicación, en la is a de la c eación de un cues iona io, pa a la ijación de las p egun as, el p o eso simplemen e, una ez elegido el o den en el que una p egun a debe apa ece , ma ca á si quie e que se ije a esa posición como podemos e en la igu a 4.3 al lado del bo ón de alea o iza . En el caso en que el p o eso decida subi un cues iona io median e un iche o YAML, una ez que o dene las p egun as en el o den canónico que quie e que apa- ezcan, pod á añadi un nue o campo ija como podemos e en las p egun as de un cues iona io en la igu a 4.5. En elación a la ijación de las opciones de una p egun a, dado que nues a aplicación solo pe mi e la inco po ación de p egun as ía YAML, el p o ocolo pa a ello es muy pa ecido a como se mues a en la igu a an e io . Simplemen e se debe coloca el campo ija en la opción que se quie a man ene en una posición conc e a. 4.3. P egun as alea o ias An e io men e, in oducimos el concep o de p egun as alea o ias den o de nues a aplicación Qwize . Es a uncionalidad no es aba p e is a den o de nues- 40 Capí ulo 4. Alea o ización de cues iona ios 1p egun as: 2- ipo: " es " 3p egun a: "El p oblema de la mochila usa el esquema de :" 4 i ulo: "Ti ulo 3" 5opciones: 6- op: "Di ide y Vence as" 7 ija : False 8- op: "Vuel a a as" 9 ija : T ue 10 Figu a 4.5: Fijación en cues iona ios ía YAML os obje i os iniciales, pe o, como nos comen ó nues o u o , es a ca ac e ís ica es muy habi ual en aplicaciones elacionados con cues iona ios, como es el ejemplo de nues a mayo inspi ación, Moodle. La posibilidad de c ea una p egun a den o de nues os cues iona ios donde a cada usua io le apa eciese una p egun a elegida de un conjun o de p egun as seleccionadas especí icamen e pa a que esa p egun a, e a algo mo i ado y, desde nues o pun o de is a, algo complicado de ealiza . Desde un inicio, eíamos complicado la in eg ación de es a uncionalidad den o de nues o sis ema, dado a a ios ac o es, en e ellos: Cambios en la base de da os: Desde un p incipio, nos dio la sensación de que es e nue o añadido en la aplicación pod ía p o oca o o g an cambio en la base de da os. El hecho de ene que cambia la es uc u a gene al después de habe ajus ado odo a un modelo mucho más limpio y ú il pa a nues as uncionalidades p incipales, nos p o ocó, a p ime a is a, una sensación de echazo. Impac o en el código: Pensando más en el código y su o ganización, el añadido de las p egun as alea o ias p o oca ía segu amen e muchos cambios en la lógica p incipal de muchas de nues as u as en la API, p o ocándonos una sensación de miedo a gene a e o es en algunas pa es conc e as del código. Aún así con es os ac o es en men e y g acias a la mo i ación de nues o u o , decidimos añadi es a uncionalidad pa a aumen a el alo de nues a aplicación y hace la mucho más compe en e en su ámbi o. 4.3.1. Nue o modelo, SelecciónP egun a P ime o de odo, la implemen ación de es a uncionalidad p o ocaba, como ya habíamos es imado, un g an cambio en la base de da os. La mane a en la que se almacenaban las p egun as pe enecien es a un cues iona io solo pe mi ía almace- na p egun as del p opio banco de p egun as, po lo que añadi a un cues iona io 4.3. P egun as alea o ias 41 una p egun a que ue a de o o ipo, en es e caso una p egun a alea o ia, e a algo imposible po como es aba es uc u ado el modelo en idad- elación. Pa a ello u imos que cambia la men alidad con la que almacena íamos las p egun as pe enecien es a un cues iona io, llegando a la conclusión y a la ejecución de un nue o modelo SelecciónP egun a. Es e nue o modelo cambia ía o almen e la pe spec i a de la inco po ación de p egun as a un cues iona io. Aho a, en ez de añadi di ec amen e p egun as del banco se añadi ían selecciones de p egun a. Es as selecciones pueden se di ec amen e p egun as del banco de p egun as, o bien o o ipo de p egun as, como pueden se las p egun as alea o ias. Es e modelo nos pe mi i ía añadi , en un u u o, o os ipos de p egun as que no engan ninguna elación con el banco de p egun as o solo pa cialmen e, ampliando así la capacidad de la aplicación pa a escala de mane a mucho más sencilla. Como podemos ap ecia en la igu a 3.2 se puede e cómo pa íamos de un modelo más escue o y pasamos a un modelo más complejo con la inco po ación del modelo SeleccionP egun a como podemos e en la igu a 3.3. 4.3.2. Uso den o de la aplicación Es a nue a uncionalidad es á disponible pa a los cues iona ios que se suban ía YAML. En el momen o que los p o eso es quie an añadi una p egun a alea o ia, end án que segui los siguien es pasos pa a consegui lo: 1. En el apa ado de las p egun as del iche o YAML, añadi una p egun a nue a con el nue o ipo de p egun a, alea o ia. 2. A con inuación, añadi el campo de p egun as_elegidas después del campo ipo an es explicado. En es e nue o campo se in oduci á el subconjun o de p egun as del banco que que emos que puedan apa ece . Pa a e e encia las p egun as del banco, eco da u iliza el campo e y esc ibi el í ulo de la p egun a a e e encia . 3. Al igual que las p egun as egula es del banco, debemos añadi una pun- uación posi i a y una pun uación nega i a, con los campos pun _posi i a ypun _nega i a espec i amen e. La Figu a 4.6.mues a un ejemplo de inclusión de una p egun a alea o ia. Además, den o de los ejemplos de cues iona ios ya c eados, se encuen a uno con un es con una única p egun a alea o ia pa a que si a de ayuda a los p o eso es que comiencen a u iliza la aplicación. Es e cues iona io se llama es 2.yml. 48 Capí ulo 5. In oducción de Ma kdown y ó mulas Figu a 5.1: Nue a is a pa a subi p egun as 1de ge _opcion(sel ,obj): 2 s = FileSys emS o age() 3opcion = obj.opcion 4imagenes_de ol e = e. indall( 5 "! [(.*?) ] (([ w / - : ._]+?) )", obj.opcion) 6 o img in imagenes_de ol e : 7name = s (img[1]) 8 o ma = name.spli (".")[1] 9i o ma == "s g": 10 o ma +="+xml" 11 pa h = s.pa h(name) 12 wi h open(pa h, " b") as image_ ile: 13 encoded_s ing = base64.b64encode(image_ ile. ead()) 14 .decode(’u -8’) 15 imagen_base64 = ’da a:image/ %s;base64, %s’ 16 % ( o ma , encoded_s ing) 17 opcion = opcion. eplace(name, imagen_base64) 18 e u n opcion 19 Figu a 5.2: Cambios en se ializado es pa a ecupe ación de imágenes 5.3. Resul ados 49 1- ipo: " es " 2p egun a: "La o mula de la ene gia es" 3 i ulo: "Ti ulo Ma kdown Tes 2" 4opciones: 5- op: "$E = mc^2$" 6 ija : False 7- op: "$E = mc^3$" 8 ija : False 9- op: "$E = mc * 2$" 10 ija : False 11 - op: "Ninguna de las an e io es" 12 ija : T ue 13 op_co ec a: 0 #id de opcion co ec a 14 Figu a 5.3: P egun a con ex o Ma kdown y ó mulas ma emá icas 1p egun as: 2- ipo: " es " 3p egun a: "El simbolo del amewo k de Reac es:" 4 i ulo: "Ti ulo Ma kdown SVG" 5opciones: 6- op: "No se" 7 ija : False 8- op: "" 9 ija : False 10 - op: "" 11 ija : False 12 - op: "Ninguna de las an e io es" 13 ija : T ue 14 op_co ec a: 1 #id de opcion co ec a 15 16 Figu a 5.4: P egun a con imágenes 50 Capí ulo 5. In oducción de Ma kdown y ó mulas Figu a 5.5: Visualización de p egun as con ó mulas 5.3. Resul ados 51 Figu a 5.6: Visualización de p egun a con imágenes 52 Capí ulo 5. In oducción de Ma kdown y ó mulas Figu a 5.7: Visualización de p egun a con imágenes en disposi i o mó il Cap´ ı ulo 6 In eg ación con Moodle Uno de los p incipales obje i os del T abajo de Fin de G ado e a acili a la mig ación de p egun as y cali icaciones en e Moodle y Qwize . Nos p opusimos alcanza los siguien es obje i os: Impo a p egun as desde Qwize gene adas a pa i de un banco de p egun as de Moodle. Es o pe mi i ía ap o echa el con enido exis en e en Moodle y u iliza lo en Qwize . Expo a las cali icaciones desde Qwize pa a que puedan se impo adas en Moodle. De es a mane a, se pod ía man ene un seguimien o cohe en e de las cali icaciones de los alumnos, u ilizando Qwize pa a e alua su desempeño y luego e leja esas no as en Moodle. Es os obje i os es aban o ien ados a acili a la in e ope abilidad en e las pla- a o mas y b inda a los p o eso es la capacidad de ap o echa el con enido y las cali icaciones exis en es en Moodle en el en o no de Qwize , y ice e sa. 6.1. Mig ación de las p egun as de Moodle En es a sección, abo da emos el p oceso de mig ación de p egun as desde Moodle a nues o sis ema. Pa a lle a a cabo es a mig ación, u ilizamos el o ma o de Moodle XML, que nos b inda la capacidad de impo a y expo a p egun as en Moodle. 6.1.1. Fo ma o Moodle XML El o ma o de Moodle XML1pe mi e impo a y expo a p egun as desde Mood- le. En nues o caso solo necesi ábamos sabe como es aban de inidas las p egun as de espues a co a (Figu a 6.1) y las p egun as de opción múl iple (Figu a 6.2), pa a inse a las en nues a base de da os pos e io men e. Teniendo conocimien o de la es uc u a del iche o, ex ajimos selec i amen e los da os necesa ios pa a nues a aplicación haciendo uso de la lib e ía Elemen T ee como se de alla en la sección 6.1.2. 1h ps://docs.moodle.o g/all/es/Fo ma o_Moodle_XML 53 54 Capí ulo 6. In eg ación con Moodle 1<ques ion ype="sho answe "> 2<answe ac ion="100"> 3< ex >La espues a co ec a</ ex > 4< eedback>< ex >Co ec o</ ex ></ eedback> 5</answe > 6</ques ion> 7 Figu a 6.1: P egun a co a 1<ques ion ype="mul ichoice"> 2<name> 3< ex >Ti le</ ex > 4</name> 5<ques ion ex o ma ="h ml"> 6< ex ><![CDATA[<p>Choose one:</p>]]></ ex > 7</ques ion ex > 8<answe ac ion="100" o ma ="h ml"> 9< ex ><![CDATA[<p>op ion</p>]]</ ex > 10 </answe > 11 <answe ac ion="0" o ma ="h ml"> 12 < ex ><![CDATA[<p>op ion</p>]]></ ex > 13 </answe > 14 <answe ac ion="0" o ma ="h ml"> 15 < ex ><![CDATA[<p>op ion</p>]]></ ex > 16 </answe > 17 <answe ac ion="0" o ma ="h ml"> 18 < ex ><![CDATA[<p>op ion</p>]]></ ex > 19 </answe > 20 </ques ion> 21 Figu a 6.2: P egun a de opción múl iple 6.2. Expo a no as 55 6.1.2. Elemen T ee Pa a p ocesa el a chi o XML de Moodle, empleamos la biblio eca Elemen T ee. Es a he amien a nos b inda la capacidad de eco e el XML de mane a je á qui- ca, como si es u ié amos na egando po un á bol, y nos pe mi e busca elemen os especí icos u ilizando exp esiones XPa h. G acias a es as uncionalidades, log amos ealiza una manipulación e icien e y p ecisa de los da os que necesi ábamos ex ae del a chi o de Moodle. Una ez que p ocesamos el a chi o XML, c eamos las p egun as en la base de da os, pe o an es u imos que ealiza o o a amien o en el ex o de las p egun as. Como se puede obse a en la igu a 6.2, las p egun as es án en o ma o HTML, po lo que u imos que u iliza una exp esión egula adicional pa a elimina odas las e ique as innecesa ias. Además, es impo an e menciona que es e p oceso de manipulación de da os se lle a a cabo de mane a simila al caso del YAML, con la di e encia de que en es e caso los da os necesa ios pa a las p egun as se ex aen del a chi o XML en luga del a chi o YAML. 6.2. Expo a no as La expo ación de cali icaciones de los es udian es in oluc a un p oceso que cons- a de a ias e apas. Pa a comp ende mejo es e p oceso, es necesa io es ablece el con ex o en el que se u iliza Moodle. Moodle o ece la capacidad de impo a cali icaciones en o ma o CSV ( alo es sepa ados po comas). Es o pe mi e a los p o eso es ans e i y egis a las cali icaciones de los es udian es de mane a e icien e. Pa a es o Moodle puede gene a una abla que con iene un lis ado de es- udian es, donde cada es udian e iene su in o mación pe sonal como co eo elec- ónico, DNI, en e o os da os. Una de las columnas de es a abla co esponde a las cali icaciones, y es en es a columna donde el p o eso debe comple a las no as co espondien es a cada es udian e. Una ez que el p o eso ha comple ado las cali icaciones en la columna co es- pondien e de la abla CSV, el siguien e paso es ca ga el a chi o CSV con las cali i- caciones en Moodle. Al hace es o, Moodle inco po a la in o mación de cali icaciones p opo cionada en el a chi o CSV a su base de da os. Pa a pode ellena adecuadamen e las no as de los es udian es en nues a apli- cación de o ma sencilla y au oma izada se siguen los siguien es pasos: En Qwize se ca ga el lis ado de es udian es en o ma o CSV de Moodle, como se mues a en la Figu a 6.3. Es e a chi o con iene la lis a de es udian es jun o con la columna de cali icaciones que se desea comple a , como se ilus a en el ejemplo de la Figu a 6.4. 56 Capí ulo 6. In eg ación con Moodle Figu a 6.3: Subida de la lis a de es udian es En Qwize , se selecciona la columna co espondien e a las no as a ellena y se indica la asigna u a a la que pe enecen, como se mues a en la Figu a 6.5. Es o pe mi e a Qwize iden i ica co ec amen e la columna de cali icaciones en el a chi o CSV, ya que puede habe a ias. A con inuación, se elige el cues iona io pe inen e en Qwize , que se u iliza á pa a asigna las cali icaciones a los es udian es co espondien es, como se indi- ca en la Figu a 6.6. Cabe acla a que pa a iden i ica a que alumno pe enece cada no a usamos la columna de Di ección de co eo, que es la que se usa á pa a iden i ica uní ocamen e a cada alumno en nues a aplicación. Po úl imo, se ealiza la desca ga del a chi o inal, que incluye la columna de cali icaciones debidamen e ellenada. Es e a chi o inal puede se ca gado nue amen e en Moodle pa a que las cali icaciones se inco po en en la base de da os de Moodle. De es a mane a, nues a aplicación Qwize acili a el p oceso de impo ación de no as, pe mi iendo a los p o eso es comple a las cali icaciones en un lis ado de alumnos expo ado desde Moodle pa a su pos e io ca ga en la misma pla a o ma. 6.2. Expo a no as 57 Nomb e Apellidos DNI Di eccion de co eo I em de cali icacion oo oo 1234567Q oo @ oo .com x x 2222222Q [email p o ec ed] Figu a 6.4: Lis a de es udian es gene ada po Moodle Figu a 6.5: Selección de la columna y la asigna u a Figu a 6.6: Selección del cues iona io 64 Capí ulo 8. Conclusiones y abajo u u o Po o a pa e, conseguimos comple a o os obje i os, los cuales ue on apa- eciendo a medida que el p oyec o a anzaba. En e ellos podemos encon a los siguien es: Cambios en el diseño p incipal: Inicialmen e, no eníamos pensado cam- bia el diseño de las is as de nues os compañe os, pe o, ligado al obje i o del diseño adap able, nos imos obligados a ealiza algunos cambios sob e casi o- das las is as iniciales pa a mejo a la expe iencia gene al de nues os usua ios. Incluso llegamos a in oduci nue as uncionalidades de las que p e iamen e Qwize no disponía (sección 3.5.3). Documen ación de la API: Como ya explicamos en la pa e de mejo as ( e sección 3.5.2), una buena documen ación de una API nos pa ece algo esencial ya que sin ella se di icul a eno memen e en ende cada llamada y el po qué de la misma. Al p incipio, noso os nos encon amos en es a si uación y po el bien de unos posibles u u os compañe os o simplemen e alguien que quie a en ende nues o abajo, hemos desa ollado una documen ación ex ensa e in e ac i a sob e cada llamada de la API, acili ando su comp esión a ojos de cualquie a. Tes ing: Al igual que una buena documen ación, cualquie desa ollo de so - wa e implica una e apa de es eo, donde se hagan nume osas p uebas que com- p ueben si el código desa ollado unciona como lo espe ado. Po es e mo i o, desa ollamos un apa ado de es ing pa a la pa e back-end de la aplicación, en la que se p obaba la lógica de las llamadas a la API. Despliegue de aplicación: Finalmen e, si que íamos p oba nues a apli- cación en un en o no de p oducción eníamos que explo a la posibilidad de p epa a la pa a su despliegue, po lo que con igu amos y adap amos nues o en o no de desa ollo pa a desplega la aplicación en cualquie momen o. De hecho en el capí ulo 7hemos desa ollado más en de alle la solución a es e obje i o. Además ambién conseguimos comple a pa e de los obje i os que enían nues- os compañe os plani icados pa a abajo a u u o. En e ellos conseguimos imple- men a : 1. La ealización de cues iona ios de mane a secuencial, donde aho a los p o eso- es pueden elegi si un cues iona io se debe hace seguidamen e, es deci , sin pode ol e a la p egun a an e io una ez se pase a la siguien e. 2. Resolución de más de un cues iona io a la ez de mane a o line. An e io men- e, solo se podía esol e un cues iona io si el es udian e pe día la conexión. En cambio, aho a g acias a la nue a ges ión del almacenamien o de cues iona ios, se puede ealiza más de un cues iona io de mane a o line. 3. Mejo a de in e az de la c eación de cues iona ios y, como ya hemos comen ado en los obje i os p incipales, adap ación de in e az a disposi i os mó iles. 8.2. Di icul ades encon adas 65 8.2. Di icul ades encon adas A lo la go del desa ollo del p oyec o, se encon a on algunas di icul ades que a ec a on el p oceso de implemen ación de los obje i os: Código he edado: Uno de los mayo es desa íos ue lidia con código he edado del p oyec o an e io . El uso de código p eexis en e p esen ó di icul ades pa a comp ende su uncionamien o y adap a lo a los nue os equisi os, desembo- cando en nume osas semanas de e ac o ización y mejo as al código inicial. Po es a azón, el pe iodo de adap ación y amilia ización con el p oyec o se ex endió más de lo no mal, impidiendo cumpli algunos obje i os secunda ios plan eados. Desconocimien o de las ecnologías: Cabe des aca que ambos in eg an- es del equipo pa íamos sin una base de las ecnologías u ilizadas den o del p oyec o, po lo que la u ilización de es as nue as ecnologías y he amien- as du an e el desa ollo del p oyec o implicó un pe íodo de ap endizaje y amilia ización. Tan o Django como Reac e an amewo ks que p esen aban mecanismos complicados de en ende y asimila al p incipio. Po ello podemos ag ega los p incipales p oblemas encon ados du an e el desa ollo con ambos ma cos de abajo: •Django: Una de las lib e ías que se ha u ilizado más a ondo es e año es la llamada django es amewo k. El uso de la misma es á explicado en la sección de 3.5. La ampliación en el uso de es a lib e ía aca eó nume osos p oblemas dado que el uso de se ializado es, iewse s y o os mecanismos de la misma ue on algo complicados de implemen a en el código he eda- do ecibido. Es o, sumado a la poca comp esión que eníamos de Django en las p ime as e apas de desa ollo nos p o oca on g andes complicacio- nes al inicio del p oyec o, que saldamos g acias a la documen ación o icial an o de Django como de la lib e ía. •Reac : Apa e del desconocimien o gene al de Reac , el hecho de a on a componen es con an a lógica esul ó algo ab umado inicialmen e. T as a ias semanas de desa ollo, es e sen imien o de p esión se ue educiendo e incluso acabó en nume osas mejo as en cada uno de los componen es. Tiempo: El ac o empo al ue o o desa ío signi ica i o. G an pa e del de- sa ollo ue adecua y mejo a el código an e io , y eso dio luga a un meno iempo pa a desa olla las nue as uncionalidades. Aunque se cumplie an los obje i os iniciales ma cados pa a el abajo, una e apa de comp obación y es eo en un en o no eal hubie a ayudado al p oyec o a llega a un ni el de e inamien o más ele ado. Todo es o sin con a la poca disponibilidad en al- gunos momen os del p oyec o debido a la p esión del cu so y en momen os pun uales, de los exámenes. 66 Capí ulo 8. Conclusiones y abajo u u o 8.3. T abajo u u o Si bien los obje i os plan eados se han log ado con éxi o, conside amos que el p oyec o aún iene ma gen de mejo a. Pa a ello, p oponemos las siguien es modi i- caciones: Accesibilidad: Aunque hemos adecuado la mayo pa e de la aplicación pa a odos los disposi i os, c eemos que oda ía se pod ía amplia la accesibilidad de nues a aplicación pe mi iendo que odo ipo de usua ios, independien emen e de sus capacidades ísicas o cogni i as, pueda hace uso de Qwize . El uso de écnicas de accesibilidad como a iación de colo es, cambios en los emas, desc ipciones con ex os de ayuda, uso de ipog a ías sencillas y bo ones y paneles g andes y áciles de localiza ayuda ían a ajus a Qwize a un ámbi o más inclusi o. Tes ing en el on -end: Como ya explicamos an e io men e, uno de los obje i os secunda ios cumplidos ue el hecho de documen a y es ea el back- end de nues a aplicación. Es o ha concluido en nume osos bene icios a lo la go del desa ollo de la aplicación. En cambio, uno de los abajos que nos hubie a gus ado ealiza y po al a de iempo no se ha podido comple a es el hecho de ealización de p uebas de la in e az y de los componen es p incipales del on -end de nues a aplicación. En nume osas ocasiones, hemos enido que comp oba el co ec o uncionamien o de la lógica de los componen es, en los que a eces p o ocaba llamadas a la API y consecuen emen e, cambios en el es ado de la base de da os. Es e edioso p oceso nos hizo plan ea nos ealiza una se ie de p uebas a las is as más esenciales de la in e az, pe mi iéndonos p oba es a lógica y ealiza las p uebas bajo una base de da os p epa ada pa a los es s. Además, es e ipo de p uebas encamina el código po un camino más sos enible y es able, po los que u u os desa ollos se e ían ag adecidos po las mismas. In e az p opia pa a mó iles: A lo la go del desa ollo del p oyec o, ha ha- bido nume osas ocasiones en los que nos hemos eplan eado hace una in e az p opia pa a los disposi i os mó iles, po que aunque hayamos dedicado iempo a consegui un diseño adap able de nues a aplicación, siemp e quedan algunos componen es o algunos agmen os de las is as que quedan lige amen e ue a del es ilo de una aplicación mó il. Pa a es o es udiamos Ionic, un amewo k cen ado en el desa ollo de in e aces de usua ios en disposi i os mó iles, el cual, dado que su sin axis es muy pa ecida a nues o p incipal amewo k de es ilado, Boo s ap, nos pe mi i ía habe diseñado una in e az única y exclu- si a pa a los disposi i os mó iles. Al inal, e minamos abandonando la idea debido a que e a un obje i o muy complicado de comple a en el poco iempo que nos quedaba, pe o en un u u o, es a idea pod ía da le a Qwize un alo undamen al pa a su implemen ación den o de las asigna u as de la acul ad. Más ipo de p egun as: Qwize es una aplicación basada en la ealización de cues iona ios y uno de los apa ados en los que oda ía cojea es su pequeño 8.3. T abajo u u o 67 ca alogo de p egun as. Aunque es e año hemos dedicado pa e del iempo a la c eación de un nue o ipo de p egun a (las p egun as de selección alea o- ia) pensamos que pod ían añadi se muchos más ipos de p egun as, como po ejemplo, p egun as de elaciona , p egun as de ellena huecos, e c... Además, g acias a la nue a es uc u a de la base de da os, añadi es os nue os ipos de p egun a se ía algo sencillo de ealiza . Po al mo i o, pensamos que es a nue- a inco po ación de p egun as pod ía da le o a imagen a Qwize y impulsa la a un en o no más llama i o. Impo a más ipos de p egun as: En elación a la impo ación de p e- gun as, ambién enemos nume osos en es abie os que pod íamos aba ca , como puede se el hecho de impo a o o ipo de p egun as de Moodle, ya que aho a mismo, solo se pueden impo a p egun as de espues a co a y p e- gun as de mul iopción. Al mismo iempo, nos hemos eplan eado la idea de impo a p egun as con o os o ma os. Ac ualmen e, Qwize solo pe mi e im- po a p egun as con o ma o XML-Moodle cen ando oda es a uncionalidad en un solo o ma o. Po lo que, en esumen, impo a o os ipos de p egun as de Moodle y aumen a la can idad de o ma os pa a impo a p egun as, nos pa ece un obje i o que se pod ía plan ea pa a u u o. Usa API de moodle. Mejo a la conec i idad con Moodle: Ligado a la expo ación de las cali icaciones de Qwize a Moodle, c eemos que es e obje i o se puede mejo a haciendo más cómoda la in e ope abilidad en e Qwize y Moodle. Pa a ello, pensamos en que se ía mejo u iliza la p opia API de Moodle pa a amplia las posibilidades de in eg ación con nues a aplicación. Cap´ ı ulo 9 Con ibuciones pe sonales En es e capí ulo amos a habla de nues as con ibuciones po sepa ado al p o- yec o. Ambos hemos abajado de mane a sínc ona, ocando aspec os an o del on -end como del back-end, po lo que en nues as explicaciones algunas eces se combina án a eas en las que ambos hemos abajado. Aún así, cabe ema ca que ambos hemos abajado jun os en los siguien es apa ados: Re ac o ización del código Ac ualización de lib e ías Nue o diseño de la base de da os: Los p incipales cambios en la es uc u a gene al de la base de da os ue on desa ollados en e los dos. Co ección de e o es: Ambos hemos abajado en co egi los e o es que iban su giendo an o en el on -end como en el back-end. 69 70 Capí ulo 9. Con ibuciones pe sonales Vicen iu Tibe ius Roman Du an e el desa ollo del T abajo de Fin de G ado he ealizado las siguien es apo aciones: Ac ualizaciones: Me enca gué de ac ualiza Reac , Django y odas sus de- pendencias a las úl imas e siones es ables. Además elimine múl iples depen- dencias innecesa ias que no se usaban en el p oyec o. P epa ación del en o no de desa ollo: Dado que íbamos a es a nume o- sos meses desa ollando es e p oyec o, que íamos ene un en o no de desa ollo p epa ado y cómodo pa a abaja . Po es a azón, p epa é nues o en o no y edi o de abajo añadiendo lo siguien e: •Lin e s pa a mejo a la calidad del código y man ene la consis encia del es ilo en odo el p oyec o. •Sc ip s pa a el inicia , de ene y depu a Reac y Django. •Ex ensiones y con igu aciones pa a acili a el desa ollo. Ges ión segu a de sec e os median e a chi os .en : Iden i iqué un im- po an e p oblema en el p oyec o elacionado con la exposición de con aseñas en el eposi o io de Gi Hub. Pa a abo da es a p eocupación, ealicé la sepa- ación de odos los sec e os en a chi os indi iduales, los cuales se leen pos- e io men e pa a ca ga su con enido. Además, p opo cioné una plan illa de es os a chi os pa a que cada desa ollado conozca las a iables necesa ias, pe- o sin la necesidad de subi las al eposi o io. Es o ga an iza una ges ión segu a de los sec e os en el p oyec o además de pe mi i cambia con igu aciones del p oyec o sin oca el código y únicamen e cambiando las a iables de en o no. En la Figu a 3.7 podemos e un ejemplo de los iche os de con igu ación que ges ioné. Docke : Pa a acili a el despliegue, u ilicé Docke pa a el empaque ado y la dis ibución de las aplicaciones Reac y Django jun o con el se ido web Nginx. Realice los ajus es necesa ios pa a desplega Django co ec amen e, ya que no es aba p epa ado pa a esa a ea y me enca gué de añadi ce i icados SSL a la aplicación. Además de es e p oceso, ambién ayudé a José Luis a con igu a odo pa a que pudie a u iliza lo co ec amen e, ya que él desa olla en Windows y la con igu ación con Docke es di e en e que en Linux. Vi e: Al e la g an can idad de ad e encias que salían al inicia la aplicación de Reac , decidí p oba Vi e, una al e na i a que esul ó se mucho más ápida y además acili ó el desa ollo al e esca las páginas sin elimina el es ado an e io . Re ac o ización de componen es: Den o de la e ac o ización de los com- ponen es de Reac , además de aduci algunos componen es de clases a un- ciones yo me enca gué de a egla y eesc ibi la lógica de los componen es 71 eliminando nume osos e o es en su lógica, adap ando las a iables al es án- da más ac ual de Ja aSc ip , ajus ando los componen es a la sin axis más ecien e de Reac y a eglando el manejo del es ado de los componen es que se habían hecho isibles a causa del cambio de e sión de Reac , al no segui las ecomendaciones sob e cómo a a el es ado en e siones an e io es. Ru as en la aplicación: P e iamen e, el manejo de las u as e a e á ico. No se u ilizaba Reac Rou e , una de las soluciones más popula es pa a in eg a las u as en Reac y se ealizaba de o ma manual. Es o implicaba lo siguien e: •No ene u as eales ya que la URL de la ba a de na egación no cam- biaba en ningún momen o. •El pun o de en ada a la aplicación (App.js) e a de una ex ensión inasu- mible al usa condiciones anidadas pa a sabe en qué u a se encuen a en cada momen o. •Todo el es ado de la aplicación es aba concen ado en App.js, es de- ci , los componen es no e an independien es y enían su es ado en sus an eceso es. Todo es o implicó un g an abajo pa a eesc ibi casi odos los componen- es, sepa ando su lógica y haciéndolos más legibles y escalables, además de implemen a de ce o la ges ión de los pe misos pa a cada u a. Abs acción de API: Realicé una comple a abs acción de la API en el on -end de la aplicación. En luga de ene las llamadas dispe sas po a ios componen es, cen alicé la comunicación en e el back-end y el on -end en un solo a chi o. Pa a log a es o, p ime o con igu é nues o clien e axios pa a inclui el oken de usua io en cada llamada, en el a chi o clien .js. Luego, es uc u é odas las llamadas a la API en el a chi o API.js. Es a implemen- ación simpli icó eno memen e el desa ollo u u o, ya que cualquie cambio en la API solo eque ía modi ica un único a chi o. C eación de hooks pe sonalizados: He c eado ambién los hooks pe sonali- zados que explicamos en la sección de 3.5.1. De es a mane a e i é la epe ición del código y una mejo ges ión de las llamadas a la API. Cues iona ios: Me enca gué de co egi odos los e o es elacionados con la ealización y e isión de cues iona ios, además de implemen a las siguien es mejo as: •Pe mi i la ealización y desca ga de múl iples cues iona ios de mane a simul ánea. •Ag ega la posibilidad de elimina cues iona ios desca gados. •Paso a IndexedDB pa a e i a la ans o mación de los cues iona ios a cadenas de ex o, además de e i a los p oblemas con el lími e de alma- cenamien o del localS o age. 72 Capí ulo 9. Con ibuciones pe sonales In e az de la aplicación: A lo la go del p oyec o, me he enca gado de ealiza múl iples cambios pa a adap a la aplicación a disposi i os mó iles, además de c ea los modales pa a la ges ión de los e o es en oda la aplicación. Ma kdown: Con espec o al Ma kdown, yo me enca gué de la in es igación de las lib e ías que nos podían ayuda a la implemen ación de es a uncionalidad e hice un ejemplo de como se usa ían y después ue José Luis el que se enca gó de implemen a lo den o de la aplicación. Ges ión de dependencias en Django: También me enca gué de mejo a la ges ión de dependencias en Django, ya que an e io men e la única mane a de sabe qué dependencias enía el p oyec o e a i añadiendo dependencias según salían e o es has a que no al a a ninguna. Po es e mo i o me de- cidí inalmen e po usa Poe y lo que me pe mi ió c ea un único iche o pyp ojec . oml donde es án de inidas odas las dependencias del p oyec o y sus con igu aciones, pe mi iendo así ins ala las mismas en un en o no aislado pa a e i a con lic os con o as dependencias del equipo. Viewse s, Manage s y Se ializado es: Al i ap endiendo Django, me di cuen a de que no se es aban usando odas sus capacidades, así que decidí e- esc ibi las is as a iewse s y c ea a ios se ializado es pa a la aplicación, además de c ea manage s pa a odos los modelos, pe mi iendo una e ac o i- zación más sencilla en el u u o. Documen ación de la API: Una de las cosas de la que me enca gué pe - sonalmen e ue de cómo documen a la API. Desde el p incipio del p oyec o, es u e in es igando cómo podía documen a la aplicación pa a acili a nos el en endimien o de la misma an o a mí como a mi compañe o. Pa a es a a ea, encon é una lib e ía denominada d -spec acula , que po de ás u ilizaba Swagge pa a gene a la documen ación de la API. Me enca gué de documen a llamada a llamada, explicando an o las en adas, salidas y ope aciones espe a- das. Finalmen e el esul ado ue una documen ación muy ex ensa y elabo ada que cualquie desa ollado que p osiga con el p oyec o puede dis u a . Tes ing de API: En elación al es ing de la API, asumí la esponsabilidad de in es iga las mejo es p ác icas pa a ealiza p uebas en nues a aplicación, añadiendo una opción pa a e la cobe u a del es ing, pa a pode obse a qué po cen aje del código se había es ado. Alea o ización, back-end: En el ema de la alea o ización, mi ol ue so- b e odo la p epa ación del back-end pa a la alea o ización de cues iona ios y las opciones de las p egun as ipo es . Me cen é en añadi a los modelos los a ibu os necesa ios pa a la alea o ización, p epa a la lógica pa a de ol- e y almacena cues iona ios alea o ios y modi ica la lógica de subida de cues iona ios pa a almacena los nue os da os de los cues iona ios. P egun as de selección alea o ia: Respec o al nue o ipo de p egun as, me enca gué sob e odo de ayuda a José Luis a en ende oda la nue a lógica que había ealizado pa a la alea o ización de los cues iona ios y las opciones de las 73 p egun as ipo es que he explicado an e io men e. Una ez que e minó de implemen a las le ayudé con algunos e o es que habían quedado pendien es y e minamos en e los dos esa uncionalidad. In eg ación con Moodle: Mien as mi compañe o abajaba en el nue o ipo de p egun as, me dediqué a a anza en nues o siguien e obje i o, la in- eg ación con Moodle. In es igué sob e el o ma o XML-Moodle y sob e qué lib e ías nos pod ían ayuda pa a implemen a es as uncionalidades. Du an e la in es igación empecé a ealiza una se ie de p uebas con la lib e ía Elemen - T ee y conseguí el obje i o de impo a p egun as de Moodle. Más adelan e, as una eunión con nues o u o , nos explicó más en de alle que debíamos pe mi i expo a cali icaciones desde Qwize a Moodle y decidí ambién im- plemen a lo, ya que había es ado in es igando en ese ema. 80 Capí ulo 9. Con ibuciones pe sonales discussed in chap e 3.5.2. We also upda ed all lib a ies o he la es e sion ying o a oid con lic s due o e sion con ol. Finally, we p epa ed he de- elopmen en i onmen by adding lin e s, en i onmen a iables o sec e s, designing some es s o he back-end, using a package managemen ool and using Docke o deploy he p ojec co ec ly. Ques ionnai e Randomiza ion (Ma ch 2023): Du ing his s age, he ques- ionnai e andomiza ion unc ionali y was implemen ed. This p ocess in ol ed making se e al changes o he applica ion’s ela ional model and applica ion logic as de ailed in dep h in Chap e 4, which equi ed signi ican ime o upda e he co esponding code. Ma kdown, Random Ques ions and Moodle In eg a ion (Ap il 2023): Du ing his phase, se e al key aspec s we e add essed. The implemen a ion o he Ma kdown o ma o ques ions and he in eg a ion wi h Moodle we e ela- i ely easy, wi h he excep ion o image managemen in he case o Ma kdown. Howe e , inco po a ing andom ques ions p o ed o be a signi ican challenge, as i impac ed much o he applica ion’s back-end code. These inco po a ions a e desc ibed in chap e s 4,5y6. Final checks and memo y (May 2023): Du ing he las mon h o de elop- men , we ocused on making inal adjus emen s o he app’s in e ace, polishing he de ails o an imp o ed use expe ience. We also dedica e ime o w i - ing he Final Deg ee P ojec documen , documen ing he en i e de elopmen p ocess, he decisions made and he esul s ob ained. Conclusions and u u e wo k In his sec ion, we will p esen ou conclusions once he de elopmen o he p ojec has inished. We will add ess issues such as: he le el o compliance wi h he main objec i es, he di icul ies encoun e ed du ing he de elopmen o he p ojec and he possible imp o emen s ha could be implemen ed in he u u e. Achie ed goals Du ing he cou se o he p ojec , all he objec i es ini ially se (in sec ion 1.2) we e achie ed: Ques ionnai e andomiza ion: The andomiza ion unc ionali y was suc- cess ully implemen ed bo h a he ques ion and op ion le el wi hin he ques- ionnai es. In addi ion, he a ie y o ques ions was expanded wi h he addi- ion o andom selec ion ques ions. Now, eache s can o e unique quizzes o hei s uden s which p e en s hem om chea ing. Adap a ion o he applica ion o mobile de ices: We managed o o e an adap able design o ou applica ion, in which we wo ked ha d o be able o adap i s in e ace o all sc eens and imp o e he use expe ience so ha i was com o able and in ui i e. Inclusion o Ma kdown and ma hema ical o mulas: The success ul implemen a ion o Ma kdown was achie ed, which allows use s o en ich he con en wi h o ma s such as bold, i alics, images, among o he s. In addi ion, he abili y o w i e s a emen s and solu ions wi h ma hema ical o mulas was added, which expands he possibili ies o he c ea ion o mo e complex and de ailed ques ions. In eg a ion wi h Moodle: A success ul in eg a ion o Qwize wi h he o - ma s used in he Moodle pla o m was achie ed. Now use s can impo ques- ions om he Moodle ques ion bank, making i easy o euse and mig a e exis ing con en . Likewise, he unc ionali y o expo he no es o he ques- ionnai es ca ied ou in Qwize o Moodle was implemen ed, p o iding a simple and mo e cen alized managemen o quali ica ions. On he o he hand, we managed o comple e o he objec i es, which appea ed as he p ojec p og essed. Among hem we can ind he ollowing: 81 82 Capí ulo 9. Con ibuciones pe sonales Co e design changes: Ini ially we did no plan o change he design o ou ellow colleagues iews, bu ied o he goal o esponsi e design, we we e o ced o make some changes o almos all o he ini ial iews o imp o e he o e all expe ience o ou use s. We e en in oduce new ea u es ha Qwize did no p e iously ha e (sec ion 3.5.3). API documen a ion: As we al eady explained in he imp o emen s pa (see sec ion 3.5.2), a good documen a ion o an API seems essen ial o us since wi hou i i is ex emely di icul o unde s and each call and he eason o i . A he beginning, we ound ou sel es in his si ua ion and o he sake o possible u u e colleagues o jus someone who wan s o unde s and ou wo k, we ha e de eloped an ex ensi e and in e ac i e documen a ion on each API call, making i easy o anyone o unde s and. Tes ing: Jus like a good documen a ion, any so wa e de elopmen in ol es a es ing phase, whe e nume ous es s a e ca ied ou o check i he de eloped code wo ks as expec ed. Fo his eason, we de eloped a es ing sec ion o he back-end pa o he applica ion, in which he logic o he API calls was es ed. Applica ion deploymen : Finally, i we wan ed o es ou applica ion in a p oduc ion en i onmen , we had o explo e he possibili y o p epa ing i o deploymen , so we con igu ed and adap ed ou de elopmen en i onmen o deploy he applica ion a any ime. In ac , in chap e 7we ha e explained he solu ion o his objec i e in mo e de ail. In addi ion, we also managed o comple e pa o he objec i es ha ou col- leagues had planned o u u e wo k. Among hem we managed o implemen : 1. The comple ion o ques ionnai es sequen ially, whe e eache s can now choose whe he a ques ionnai e should be done immedia ely, ha is, wi hou being able o e u n o he p e ious ques ion once hey mo e on o he nex one. 2. Resolu ion o mo e han one ques ionnai e a he same ime o line. P e iously, a quiz could only be sol ed i he s uden los connec ion. Ins ead, now hanks o he new ques ionnai e s o age managemen , mo e han one ques ionnai e can be aken o line. 3. Imp o emen o he in e ace o he c ea ion o ques ionnai es and, as we ha e al eady commen ed in he main objec i es, adap a ion o he in e ace o mobile de ices. Di icul ies encoun e ed Th oughou he de elopmen o he p ojec , some di icul ies we e encoun e ed ha a ec ed he p ocess o implemen ing he objec i es: 83 Legacy code: One o he bigges challenges was dealing wi h legacy code om he p e ious p ojec . The use o p e-exis ing code p esen ed di icul ies o unde s and i s ope a ion and adap i o he new equi emen s, leading o many weeks o e ac o ing and imp o emen s o he ini ial code. Fo his eason, he pe iod o adap a ion and amilia iza ion wi h he p ojec las ed longe han no mal, p e en ing some seconda y objec i es om being me . Lack o knowledge: I should be no ed ha bo h membe s o he eam s a ed ou wi hou a base o he echnologies used wi hin he p ojec , so he use o hese new echnologies and ools du ing he de elopmen o he p ojec implied a pe iod o lea ning and amilia iza ion. Bo h Django and Reac we e amewo ks ha had complica ed mechanisms o unde s and and assimila e a i s . The e o e we can add he main p oblems encoun e ed du ing de elopmen wi h bo h amewo ks: •Django: One o he lib a ies ha has been used mos ex ensi ely his yea is called django es amewo k. I s use is explained in sec ion 3.5. The ex ension in he use o his lib a y caused nume ous p oblems since he use o se ialize s, iewse s and o he mechanisms o he same we e somewha complica ed o implemen in he ecei ed inhe i ed code. This, added o he li le unde s anding ha we had o Django in he ea ly s ages o de elopmen , caused us g ea complica ions a he beginning o he p ojec , which we esol ed hanks o he o icial documen a ion o bo h Django and he lib a y. •Reac : Aside om he gene al un amilia i y o Reac , dealing wi h com- ponen s so logically hea y was ini ially o e whelming. A e se e al weeks o de elopmen , his eeling o p essu e lessened and e en led o nume ous imp o emen s in each o he componen s. Time: The ime ac o was ano he signi ican challenge. Much o he de- elopmen was o adap and imp o e he p e ious code, and ha esul ed in less ime o de elop new ea u es. E en i he ini ial objec i es se o he wo k we e me , a e i ica ion and es ing s age in a eal en i onmen would ha e helped he p ojec o each a highe le el o e inemen . All his wi hou ega ding he li le a ailabili y a some momen s o he p ojec due o he p essu e o he cou se and a speci ic momen s, o inal exams. Fu u e wo k Al hough he p oposed objec i es ha e been success ully achie ed, we belie e ha he p ojec s ill has oom o imp o emen . To his end, we p opose he ol- lowing modi ica ions: Accessibili y: Al hough we ha e adap ed mos o he applica ion o all de- ices, we belie e ha he accessibili y o ou applica ion could s ill be ex ended 84 Capí ulo 9. Con ibuciones pe sonales allowing all ypes o use s, ega dless o hei physical o cogni i e abili ies, o use Qwize . The use o accessibili y echniques such as changing colo s, changing hemes, desc ip ions wi h help ex s, use o simple ypog aphy, and la ge, easy- o-loca e bu ons and panels would help adjus Qwize o a mo e inclusi e en i onmen . Tes ing in he on -end: As we explained be o e, one o he seconda y objec i es accomplished was he ac o documen ing and es ing he back end o ou applica ion. This has esul ed in nume ous bene i s h oughou he de elopmen o he applica ion. On he o he hand, one o he asks ha we would ha e liked o ca y ou and due o lack o ime has no been able o comple e is he ac o es ing he in e ace and he main componen s o he on -end o ou applica ion. On nume ous occasions, we ha e had o check he co ec unc ioning o he componen logic, which some imes caused API calls and consequen ly, changes in he s a e o he da abase. This edious p ocess made us conside ca ying ou a se ies o es s on he mos essen ial iews o he in e ace, allowing us o es his logic and ca y ou he es s agains a da abase p epa ed o he es s. In addi ion, his ype o es ing di ec s he code on a mo e sus ainable and s able pa h, o which u u e de elopmen s would be g a e ul o hem. Own in e ace o mobiles: Th oughou he de elopmen o he p ojec , he e ha e been nume ous occasions in which we ha e econside ed making ou own in e ace o mobile de ices, because e en i we ha e spen ime ge ing an adap able design o ou applica ion, he e a e always some componen s o some agmen s o he iews ha a e sligh ly ou o he s yle o a mobile applica ion. Fo his we s udy Ionic, a amewo k ocused on he de elopmen o use in e aces on mobile de ices, which, since i s syn ax is e y simila o ou main s yling amewo k, Boo s ap, would allow us o ha e designed a unique and exclusi e in e ace o mobile de ices. In he end, we ended up gi ing up he idea because i was a e y di icul goal o comple e in he sho ime we had le , bu in he u u e, his idea could gi e Qwize a undamen al alue o i s implemen a ion wi hin he subjec s o he acul y. Mo e ypes o ques ions: Qwize is an applica ion based on comple ing ques ionnai es and one o he sec ions in which i s ill leaks is i s small ca alog o ques ions. Al hough his yea we ha e spen some ime c ea ing a new ques ion ype ( andom selec ion ques ions) we hough ha mo e ques ion ypes could be added, such as ma ching ques ions, ill-in- he-blank ques ions, among o he s. Also, hanks o he new da abase s uc u e, adding hese new ques ion ypes would be easy o do. Fo his eason, we hink ha his new addi ion o ques ions could gi e Qwize ano he image and p opel i in o a mo e a ac i e en i onmen . Impo mo e ypes o ques ions: In ela ion o he impo o ques ions, we also ha e nume ous open on s ha we could co e , such as he ac o impo ing o he ypes o ques ions om Moodle, since igh now, only can be impo ed sho answe and mul i-choice ques ions. A he same ime, we 85 ha e e hough he idea o impo ing ques ions wi h o he o ma s. Cu en ly, Qwize only allows you o impo ques ions wi h XML-Moodle o ma , con- cen a ing all his unc ionali y in a single o ma . The e o e, in summa y, impo ing o he ypes o ques ions om Moodle and inc easing he numbe o o ma s o impo ques ions, seems o us o be an objec i e ha could be conside ed o he u u e. Use moodle API. Imp o e connec i i y wi h Moodle: Linked o he expo o Qwize g ades o Moodle, we belie e ha his objec i e can be imp o ed by making in e ope abili y be ween Qwize and Moodle mo e com- o able. Fo his, we hough ha i would be be e o use Moodle’s own API o expand he possibili ies o in eg a ion wi h ou applica ion. Bibliog a ía [1] Benoi Chesneau. gunico n. h ps://gunico n.o g/, 2023. [2] Django Impo Expo . django-impo -expo . h ps:// django-impo -expo . ead hedocs.io/, 2023. [3] Django So wa e Founda ion. Django. h ps://docs.djangop ojec . com/en/4.2/, 2023. [4] El Fakh i Ouajih, Z. yMa ínez Game o, P. Aplicación web p og esi a pa a la ealización de cues iona ios, 2022. T abajo de Fin de G ado en Inge- nie ía In o má ica, Facul ad de In o má ica UCM, Depa amen o de Sis emas In o má icos y Compu ación, Cu so 2021/2022. [5] Hello Pangea. hello-pangea/dnd. h ps://gi hub.com/hello-pangea/ dnd, 2023. [6] Jens Neuhal en. d -spec acula . h ps://d -spec acula . ead hedocs.io/, 2023. [7] John Resig. jQue y. h ps://api.jque y.com/, 2023. [8] Ma k O o and Jacob Tho n on. Boo s ap. h ps://ge boo s ap. com/docs/5.3/ge ing-s a ed/in oduc ion/, 2023. [9] Ma in Dougiamas. Moodle XML. h ps://docs.moodle.o g/all/es/ Fo ma o_Moodle_XML, 2023. [10] Ma Zab iskie. axios. h ps://gi hub.com/axios/axios, 2023. [11] Max Lynch, Ben Spe y, and Adam B adley. Ionic. h ps:// ionic amewo k.com/docs, 2023. [12] Mozilla Con ibu o s. local o age. h ps://local o age.gi hub.io/ localFo age/, 2023. [13] Reac Con ibu o s. Reac . h ps:// eac js.o g/, 2023. [14] Reac T aining. eac - ou e -dom. h ps:// eac ou e .com/web/ guides/quick-s a , 2023. [15] Rol Hå a d Blindheim. django-en i on. h ps://gi hub.com/joke2k/ django-en i on, 2023. [16] Sma Bea So wa e. Swagge . h ps://swagge .io/, 2023. 87 88 BIBLIOGRAFÍA [17] Solomon Hykes. Docke . h ps://docs.docke .com/, 2023. [18] Sunsc ape s. djose . h ps://djose . ead hedocs.io/, 2023. [19] Tom Ch is ie. django es amewo k. h ps://www. django- es - amewo k.o g/, 2023. Ap´ endice A Documen ación de la API En es e apéndice se encuen a la documen ación de la API gene ada a pa i del a chi o JSON de Swagge y con e ida en o ma o PDF. Sin emba go, es impo an e ene en cuen a que la in e az de Swagge es conside ablemen e supe io a es e documen o en PDF. 89 2.3 GET /api/es udian es/{id}/disponibles Lis a de los usua ios que ienen ol de es udian e que no es an cu sando una asigna u a GET /es udian es/{id_asigna u a}/disponibles REQUEST PATH PARAMETERS NAME TYPE DESCRIPTION *id in ege RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { alumnos* [{ A ay o objec : id* s ing nomb e* s ing apellidos* s ing }] } 7 o 21 3. QR Q 3.1 POST /api/q Inse a hash pa a un in en o REQUEST REQUEST BODY - applica ion/json { idUsua io* in ege idCues iona io* in ege hash* s ing } FORM DATA PARAMETERS NAME TYPE DESCRIPTION idUsua io in ege idCues iona io in ege hash s ing FORM DATA PARAMETERS NAME TYPE DESCRIPTION idUsua io in ege idCues iona io in ege hash s ing RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { inse ed* s ing message* s ing } STATUS CODE - 400: E o : Bad Reques STATUS CODE - 403: RESPONSE MODEL - applica ion/json { inse ed* s ing message* s ing } 3.2 GET /api/q /{id_usua io}/{id_cues iona io} 8 o 21 Comp obación hash q GET /{idUsua io}/{idCues iona io} REQUEST PATH PARAMETERS NAME TYPE DESCRIPTION *id_usua io in ege *id_cues iona io in ege RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { alumnos* [{ A ay o objec : id* s ing nomb e* s ing apellidos* s ing }] } 9 o 21 4. QUESTION P egun as 4.1 POST /api/ques ion C ea p egun as a pa i de un iche o cs o xml REQUEST FORM DATA PARAMETERS NAME TYPE DESCRIPTION ile s ing(bina y) RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { inse ed s ing message s ing } 4.2 PUT /api/ques ion/{id} Ac ualiza una p egun a REQUEST PATH PARAMETERS NAME TYPE DESCRIPTION *id in ege Id de la p egun a RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { message s ing } 4.3 DELETE /api/ques ion/{id} Bo a una p egun a REQUEST PATH PARAMETERS 10 o 21 NAME TYPE DESCRIPTION *id in ege Id de la p egun a RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { message s ing } 4.4 POST /api/ques ion/imagen REQUEST No eques pa ame e s RESPONSE STATUS CODE - 200: No esponse body 11 o 21 5. SUBJECT Asigna u as 5.1 GET /api/subjec Lis a de asigna u as REQUEST No eques pa ame e s RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json [{ A ay o objec : asigna u as [{ A ay o objec : id s ing asigna u a s ing }] }] 5.2 GET /api/subjec /{id}/cues iona ios Lis a de cues iona ios de una asigna u a REQUEST PATH PARAMETERS NAME TYPE DESCRIPTION *id in ege Id de la asigna u a RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { cues iona ios [{ A ay o objec : id s ing i ulo s ing }] nomb e s ing } 5.3 POST /api/subjec /{id}/dele e_en oll Desma icula una lis a de es udian es 12 o 21 DELETE /asigna u a/{pk}/en oll REQUEST PATH PARAMETERS NAME TYPE DESCRIPTION *id in ege Id de la asigna u a REQUEST BODY - applica ion/json { alumnos [{ A ay o objec : id in ege nomb e s ing apellidos s ing }] } RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { bo ados in ege e o s [unde ined] } 5.4 POST /api/subjec /{id}/en oll Ma icula una lis a de es udian es POST /asigna u a/{pk}/en oll REQUEST PATH PARAMETERS NAME TYPE DESCRIPTION *id in ege Id de la asigna u a REQUEST BODY - applica ion/json { alumnos [{ A ay o objec : id in ege nomb e s ing apellidos s ing }] } RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json 13 o 21 { inse ados in ege e o s [unde ined] } 5.5 GET /api/subjec /{id}/p egun as Lis a de p egun as de una asigna u a De uel e odas las p egun as de una asigna u a pa a el banco de p egun as REQUEST PATH PARAMETERS NAME TYPE DESCRIPTION *id in ege Id de la asigna u a RESPONSE STATUS CODE - 200: RESPONSE MODEL - applica ion/json { p egun as ONE OF OPTION 1{ id in ege ques ion s ing i le s ing ype enum ALLOWED: ex co ec _op s ing } OPTION 2{ id in ege ques ion s ing i le s ing ype enum ALLOWED: es op ions [{ A ay o objec : id s ing op in ege }] co ec _op in ege } } 5.6 GET /api/subjec /me Es ado de los cues iona ios de un usua io REQUEST No eques pa ame e s RESPONSE 14 o 21 STATUS CODE - 200: RESPONSE MODEL - applica ion/json { asigna u as [{ A ay o objec : id in ege nomb e s ing cues iona ios { nCues iona ios in ege nCo egidos in ege nPendien es in ege } }] } 15 o 21 6. TEST Cues iona ios 6.1 POST /api/ es C ea cues iona io REQUEST REQUEST BODY - applica ion/json { cues iona io { es Name s ing es Pass s ing es Subjec s ing secuencial s ing es Du a ion s ing echaApe u a in ege echaCie e in ege echaVisible in ege ques ionLis ONE OF OPTION 1{ id in ege ques ion s ing i le s ing ipo s ing co ec _op s ing pun _posi i a in ege pun _nega i a in ege ija boolean alea o iza boolean } OPTION 2{ id in ege ques ion s ing i le s ing ipo s ing op ions [{ A ay o objec : id in ege op s ing }] co ec _op in ege pun _posi i a in ege pun _nega i a in ege ija boolean alea o iza boolean } alea o iza s ing } } RESPONSE 16 o 21