Adaptació del campus virtual del CITM a una App mòbil.

Adaptació del campus virtual a una App mòbil Mateu Miralles Selvi Director: Pau Fernández Duran Grau: Multimèdia Curs: 2021-22 Universitat: UPC - CITM Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 2 Índex Resum ......................................................................................................................................... 4 Paraules clau ............................................................................................................................ 5 Enllaços ...................................................................................................................................... 5 Índex de taules ........................................................................................................................ 6 Índex de figures ....................................................................................................................... 7 Glossari ....................................................................................................................................... 8 1. Introducció .......................................................................................................................... 10 1.1 Motivació ......................................................................................................................... 10 1.2 Formulació del problema ........................................................................................ 11 1.3 Objectius generals del TFG ...................................................................................... 12 1.4 Objectius específics del TFG ................................................................................... 12 1.5 Abast del projecte ....................................................................................................... 13 2. Estat del Art ........................................................................................................................ 14 2.1 Estudi de l’APPs d’estudiants de la UPC ............................................................. 14 2.2 Estudi de les tecnologies ......................................................................................... 15 2.2.1 Flutter....................................................................................................................... 15 2.2.2 Dart .......................................................................................................................... 17 2.2.3 Web Scrapping .................................................................................................... 18 3. Gestió del projecte ........................................................................................................... 20 3.1 Procediment i Eines per al seguiment del projecte ....................................... 20 3.1.1 Gantt.......................................................................................................................... 20 3.1.2 GitHub repositori a la xarxa .............................................................................. 20 3.2 Eines de validació ....................................................................................................... 21 3.3 DAFO .............................................................................................................................. 22 3.4 Riscos i pla de contingències ................................................................................. 22 3.5 Anàlisi inicial de costos ............................................................................................. 23 4. Metodologia ....................................................................................................................... 25 4.1 Anàlisi inicial ................................................................................................................. 25 4.2 Prototipat ..................................................................................................................... 25 4.3 Validació ........................................................................................................................ 26 4.4 Desenvolupament .................................................................................................... 26 5. Desenvolupament del projecte ................................................................................... 28 5.1 Conceptualització ....................................................................................................... 28 5.2 Prototipat ...................................................................................................................... 32 Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 3 5.3 Testeig ............................................................................................................................ 33 5.4 Desenvolupament de l’aplicació .......................................................................... 36 5.4.1 Funcionalitats campus virtual CITM ............................................................. 36 5.4.2 Funcionalitats campus virtual Atenea ........................................................ 45 5.4.3 Inici de sessió i tractament de credencials ................................................ 47 5.4.4 Ajustaments finals i finalització ..................................................................... 48 6. Conclusions i línies de futur .......................................................................................... 50 7. Bibliografia .......................................................................................................................... 51 Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 4 Resum Aquest projecte està constituït pel desenvolupament d’una aplicació mòbil amb funcionalitats pròpies d’un campus virtual. La realització s’ha dut a terme mitjançant un framework que permeti l’exportació a les dues plataformes de dispositius mòbils més usades. En aquest es comprenen totes les etapes necessàries per al seu desenvolupament, així com la conceptualització, prototipat, testeig i desenvolupament. La problemàtica que s’intenta resoldre amb la producció de l’aplicació, és la necessitat per part dels estudiants del centre de disposar d’una eina de fàcil i ràpid accés, que permeti la consulta d’informació relativa als dos campus virtuals que utilitzen en el CITM, unificant així les funcionalitats bàsiques dels dos en una sola eina. Com a objectius del projecte, a més a més d’aconseguir l’aplicació descrita adaptant la informació relativa a classes, sistema de missatgeria i tasques, es busca la consolidació i aprofundiment en els coneixements de Flutter per part de l’autor del treball. Addicionalment, també es busca la investigació i aprenentatge sobre el Scrapping com a tècnica per a extreure informació. A part de l’autor del projecte per l’experiència i els coneixements adquirits al llarg de projecte, els principals beneficiaris són els estudiants del centre que es disposin a descarregar-se l’aplicació, ja que obtindran un producte útil i inexistent en l’actualitat al campus. La totalitat de tots els objectius descrits en el projecte han sigut assolits satisfactòriament durant el transcurs d’aquest, deixant com a resultat l’aplicació amb totes les funcionalitats pensades en la conceptualització amb un correcte funcionament. De cara al futur, també es plantegen canvis i implementacions per a millorar i fer créixer els serveis proporcionats en l’aplicació. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 5 Paraules clau App, campus virtual, programació, Flutter, Dart, Web Scrapping, API Enllaços • Apk de l’apliació: https://drive.google.com/file/d/11XzAOomINfvS0kZGGVS2SOCBIBSpQ3 D4/view?usp=sharing • Codi font: https://github.com/Mateumiralles/campus_app • Prototip: https://xd.adobe.com/view/c06500f9-23bc-4b0a-a91f-26831d1bdcc29536/?fullscreen&hints=off • Vídeo demo de l’aplicació: https://drive.google.com/file/d/1OYJ1ieTZEdcXhArifJuBoEM7gzoyZVWT /view?usp=sharing Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 6 Índex de taules Taula 1: Anàlisis DAFO..............................................................................................................22 Taula 2: Riscos i solucions......................................................................................................23 Taula 3: Anàlisis costos inicials...........................................................................................24 Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 7 Índex de figures Figura 1: Logotip Flutter .......................................................................................................... 15 Figura 2: Logotip Dart ............................................................................................................... 17 Figura 3: Planificació GANTT ............................................................................................... 20 Figura 4: Respostes primera pregunta del qüestionari a potencials usuaris ................................................................................................................................................. 29 Figura 5: Respostes segona pregunta del qüestionari a potencials usuaris ................................................................................................................................................. 30 Figura 6: Respostes tercera pregunta del qüestionari a potencials usuaris ................................................................................................................................................. 30 Figura 7: Mapa de pantalles de l’aplicació v.1 .......................................................... 32 Figura 8: Icones del prototip no enteses durant el test d’usabilitat ....... 35 Figura 9: Noves icones després del test d’usabilitat .......................................... 35 Figura 10: Mapa de pantalles de l’aplicació v.2 ....................................................... 36 Figura 11: Disposició properes classes ........................................................................... 38 Figura 12: Comparació estat lectura missatges. .................................................... 40 Figura 13: Desplegable canvi de llista de missatges .......................................... 40 Figura 14: Exemple de detall de missatge ................................................................ 42 Figura 15: Botó flotant llista de missatges ................................................................. 42 Figura 16: Estats camps del formulari d’enviament de missatges .......... 43 Figura 17: Feedback al usuari del enviament de missatges ......................... 44 Figura 18: Icona per a afegir destinataris ................................................................... 44 Figura 19: Cerca de la llista d’usuaris ............................................................................. 45 Figura 20: Exemple de llistat de tasques ................................................................... 46 Figura 21: Feedback al usuari en iniciar sessió ....................................................... 47 Figura 22 Logotip Campus App........................................................................................ 48 Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 8 Glossari Android: Sistema operatiu empleat en dispositius mòbils intel·ligents. Aquest pertany a Google. API: Conjunt de comandes, funcions i protocols informàtics que permeten als desenvolupadors simplificar el procés de creació de programes. App: Aplicació de software orientada a dispositius mòbils intel·ligents, que permet a l’usuari realitzar alguna o més tasques. Apple Store: Tenda d’aplicacions mòbils creada per Apple per als dispositius que tenen iOS com a sistema operatiu. Atenea: Campus virtual utilitzat pels estudiants de la UPC. Back-end: És la part del desenvolupament de software interna que s’encarrega de proporcionar les dades i funcionalitats d’aquest. CITM: Centre de la imatge i la tecnologia multimèdia. Dart: És un llenguatge de codi obert desenvolupat per Google amb l’objectiu de permetre a desenvolupadors utilitzar un llenguatge orientat a objectes. Flutter: És un framework de codi font obert que permet el desenvolupament d’Apps per a Android i IOs. Està desenvolupat per Google. Framework: És un entorn de treball o conjunt d’eines que inclou els recursos necessaris per al desenvolupament de programari. Front-end: És la part del desenvolupament de software que està exposada i pensada per a que l’usuari interaccioni amb ella. HTML: Llenguatge de marques que és utilitzat per a definir l’estructura de les pàgines web. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 9 IOs: Sistema operatiu empleat en els dispositius mòbils d’Apple. Llibreria: Conjunt d’implementacions funcionals, codificades en algun llenguatge de programació, que poden ser importades. Play Store: Tenda d’aplicacions mòbils creada per Google per als dispositius que tenen Android com a sistema operatiu. Scrapping: Tècnica utilitzada per programes de software usada per extreure informació automàticament d’una Web. Sistemes Operatius: Conjunt d’ordres i programes informàtics que controlen els processos bàsics d’una computadora. També permet el funcionament d’altres programes. Smartphones: Telèfon mòbil intel·ligent amb sistema operatiu, que permet connectar-se a internet i realitzar diferents accions instal·lantse altres aplicacions. Es poden considerar computadores. Software: Conjunt de programes, instruccions i regles informàtiques que permeten executar certes tasques en una computadora. Target: Destinatari d’un producte. UCD: Acrònim de disseny centrat en l’usuari. Direcció del disseny enfocat en l’ús del producte que faran els usuaris, que ens garanteix una bona usabilitat. UI: Acrònim d’interfície d’usuari. És la responsable de portar a terme la interacció i comunicació de l’usuari amb el sistema. UX: Acrònim d’experiència d’usuari. És la sensació que té l’usuari a l’hora d’interactuar i percebre sistema o servei. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 16 Aquesta renovació és la que ha permès que Flutter pugui realitzar aplicacions per a fins a 7 plataformes diferents. També presenta alguns avantatges respecte a els seus competidors basades en les seves característiques principals: ràpid, estètic, productiu, i obert. Amb el conjunt d’eines que ens proporciona Flutter, es té la capacitat d’agilitzar notablement el temps de producció de l’aplicació. El Stateful Hot Reload és una de les seves funcionalitats més característiques. Aquesta ens permet la realització de canvis al codi i que aquests es mostrin instantàniament en pantalla a l’hora de treballar, sense haver de recarregar completament l’aplicació. A més, també inclou molts elements “prefabricats” d’una gran qualitat estètica que permet agilitzar el procés de creació i disposició d’interfícies. Però no només és veloç en el desenvolupament de l’App. Un altre dels avantatges que té és la velocitat a l’hora de córrer les aplicacions, ja que aquest les compila de forma nativa, millorant el seu rendiment i velocitats de càrrega. A més, gràcies a Skia, biblioteca de renderitzat de gràfics 2D, Flutter renderitza la seva interfície, alliberant així a la plataforma de fer-ho. Aquest canvi respecte a altres alternatives, permet la realització d’aplicacions amb una tassa elevada de fotogrames per segon, permetent així moviments més fluids i orgànics. L’estètica i personalització també és un dels seus punts forts. D’una forma bastant senzilla es poden crear interfícies simples o complexes amb una personalització absoluta. A més, l’extensa varietat d’elements predefinits personalitzables amb gran qualitat estètica permet arribar a resultats atractius sense haver-hi de dedicar un gran esforç. Un altre dels seus pilars és la seva productivitat, ja que com s’ha esmentat anteriorment, Flutter és capaç de generar interfícies per un diferents plataformes. Aquestes són Android, iOS, Google Fuchsia, Web, Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 17 Windows, macOS i Linux. Això fa considerar-lo una molt bona opció si no tenim pensat portar el nostre projecte únicament a una plataforma. Flutter és OpenSource, és a dir, de codi obert. Al ser així ha permès que es generi una gran comunitat de desenvolupadors, que cada cop és més grossa. Això s’ha transcrit en poc temps en una gran quantitat d’informació i documentació a la xarxa per a facilitar l’aprenentatge i ús d’aquest. Cada cop mes entitats i companyies de renom utilitzen Flutter. Alguns exemples en són Ebay, Alibaba, BMW, Toyota, Tencent i The New York Times. També trobem aplicacions financeres i banqueres que han estat desenvolupades amb Flutter com ara bé Betterment o Numbank. Inclús institucions públiques com el govern de Brasil han triat Flutter per a realitzar la seva aplicació. En definitiva, Flutter és una opció realment atractiva si vols desenvolupar Apps mòbils per als dos grans sistemes operatius del sector. 2.2.2 Dart Figura 2: Logotip Dart Per tal de permetre als desenvolupadors emprar un llenguatge orientat a objectes amb anàlisi estàtic de tipus, Google ha desenvolupat un llenguatge Open-Source anomenat “Dart”. A diferència d'altres, Dart, s'ha dissenyat amb l'objectiu principal de fer sentir als desenvolupadors més còmodes i, per tant, agilitzar el procés de creació del codi. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 18 El seu origen pren lloc l'any 2011 i amb el temps, han anat evolucionant tant els seus objectius com el llenguatge en si. Tant és així, que amb la versió 2.0 del programa, els sistemes de tipus va adoptar un enfocament estàtic en comptes d'opcional. En conseqüència, Flutter, s'ha convertit en la finalitat principal del llenguatge. Entre totes les eines integrades que ofereix hi trobem utilitats com un gestor propi de paquets, compiladors, analitzador i formatador. Per altra banda, amb la màquina virtual i la compilació Just-in-Time que ofereix, els canvis realitzats al codi es poden executar de manera immediata, en temps real, a mesura que es retoca aquest mateix. Un cop passat a l'etapa de producció, ofereix també la capacitat de compilar el codi en llenguatge nadiu sense la necessitat d'un entorn per a executar-lo. En cas de centrar-se en desenvolupament web, té la capacitat de transcriure el codi a JavaScript, Java i C++ gràcies a la similitud dels llenguatges. També ofereix un bon suport per a l’asincronia. 2.2.3 Web Scrapping El Web Scraping consisteix en una tècnica per extreure i recopilar contingut i dades d’una pàgina web. A partir del codi HTML, mitjançant un filtratge d’aquest, s’extreu la informació i s’emmagatzema a una base de dades o a on es desitgi. Per a dur a terme aquest filtratge, prèviament s’ha de conèixer i estudiar l’estructura del codi HTML de la pàgina que es vol treure la informació. Encara que el més freqüent és que aquest estigui automatitzat mitjançant bots, també es pot realitzar de forma manual. Això és així perquè normalment s’utilitza per a obtenir grans quantitats de dades que a posterior es compararen o classifiquen. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 19 El seu ús més comú es troba en els buscadors i comparadors de preus en línia, com ara bé els comparadors de compra de vols. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 20 3. Gestió del projecte 3.1 Procediment i Eines per al seguiment del projecte 3.1.1 Gantt Figura 3: Planificació GANTT 3.1.2 GitHub repositori a la xarxa Respecte al seguiment del codi de l’aplicació es fa servir un repositori en línia amb totes les versions i modificacions d’aquest. Aquest repositori s’ha anat ampliant a la plataforma online GitHub mitjançant l’extensió GitLens de l’editor de codi VSCode. Aquesta eina permet crear Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 21 un registre a més de visualitzar quan i quins canvis s’han realitzat de manera fàcil i còmode. Aquest sistema també és útil en cas de pèrdua de les dades, ja que tota aquesta informació es troba a la xarxa vinculada al compte de Github. 3.2 Eines de validació Seguint les tècniques i objectius que s’apliquen en el DCU (Disseny Centrat en l’Usuari) s’han realitzat dues tipus de proves per a la validació del projecte. Per tal de validar la necessitat de l’aplicació, s’han realitzat uns petits qüestionaris previs al desenvolupament. L’objectiu d’aquestes era determinar i indagar si l’aplicació seria utilitzada. També s’ha buscat saber quines són les funcionalitats bàsiques que desitjarien tenir els potencials usuaris en una aplicació d’aquestes característiques. Per altra banda, per testejar el disseny i comprensió del funcionament de l’App, també s’han realitzat tests d’usabilitat amb un prototip visualment fidel. En aquests tests es demanava als usuaris que acomplissin determinades tasques dins l’App. Un cop acabades les tasques es va realitzar una entrevista amb cada usuari per a obtenir feedback amb les seves sensacions. Gràcies a aquests, s’han identificat falles o problemes relacionats amb els aspectes visuals. Aquests problemes s’expliquen i descriuen més endavant en l’apartat de disseny. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 22 3.3 DAFO Taula 1: Anàlisis DAFO 3.4 Riscos i pla de contingències Un aspecte vital a l’hora de desenvolupar un projecte, és poder detectar els possibles riscos que poden sorgir i posar aquest en perill. És per això que s’han d’identificat i buscat les seves respectives solucions, ja que en cas que succeeixin durant el transcurs del projecte, aquest es pugui reconduir. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 23 Possibles riscos amb les seves respectives solucions, ordenades de major a menor importància: Taula 2: Riscos i solucions 3.5 Anàlisi inicial de costos A continuació es troba la taula amb els elements necessaris per a la realització del projecte, així com el seu cost. Amb aquestes dades es pot calcular el pressupost inicial estimat. S’ha tingut en compte les despeses en mà d’obra, equipament, software, espai i subministraments. Per a la mà d’obra s’ha partit d’un preu de 16 €/h, considerant-lo just per un estudiant amb poca experiència professional en el sector. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 24 Taula 3: Anàlisis de costos inicial Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 25 4. Metodologia Per tal de mantenir un correcte progrés del desenvolupament de l’App, s’ha dividit aquest en diverses fases. Cada un d’aquests períodes està pensat per a obtenir un resultat concret. Les fases designades són l’anàlisi inicial, el prototipat de l’App, la validació amb usuaris i finalment el desenvolupament del codi. 4.1 Anàlisi inicial L’objectiu d’aquesta fase és tenir ben definit el concepte de l’App, amb les seves funcionalitats. Decidir des del començament tot allò que inclou l’App permet una clara organització i evita possibles conflictes durant l’etapa de desenvolupament. En primer lloc, es tindrà en compte els aspectes explicats al llarg de la introducció del treball per acotar les funcionalitats als objectius del projecte. A més, també es tindrà en compte la valoració i opinió prèvia dels potencials usuaris per així obtenir com a resultat final una aplicació que cobreixi amb les necessitats i carències d’aquests. 4.2 Prototipat Un cop acabada la fase de preproducció amb l’anàlisi inicial, es durà a terme un prototip visualment fidel on es vegin reflectides totes les diferents funcionalitats de l’aplicació. En aquest prototipat és molt important reproduir el disseny final per tal que posteriorment es porti a avaluació amb el target del producte. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 32 5.2 Prototipat A continuació, es va prosseguir amb l’elaboració d’un prototip visualment fidel, on el disseny final i funcionament de les funcionalitats quedessin reflectits. Abans de començar amb el prototip es van fixar uns paràmetres estètics de caràcter general per a la realització d’aquest. Es van definir l’ús de formes arrodonides, ja que es volia presentar una App amb una estètica més “desenfadada”, ja que l’aplicació es vol encarar a un ús ràpid i simple, on no es busquen fer tasques elaborades o que continguin molta informació. Per altra banda, es van definir diverses tonalitats de blau per a l’ús del color, ja que tant la UPC com el CITM gaudeix de tonalitats de blau com a colors corporatius i emblemes als seus diferents logotips i llocs web. En primer lloc, es va elaborar un mapa amb les pantalles de l’aplicació per a determinar els nivells que contindria aquesta. A més a més, aquest procés va servir per a determinar quines accions es podrien realitzar a cada pantalla. Figura 7: Mapa de pantalles de l’aplicació v.1 Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 33 El disseny i funcionalitats del prototip, es poden consultar d’una forma més visual explorant-lo de forma interactiva amb l’enllaç proporcionat en l’apartat d’enllaços del projecte. En la pantalla “Log In” es demanarien tant les credencials del CITM, com les d’Atenea, per a accedir als continguts personals de cada usuari dins de l’aplicació. Com que un dels objectius i la motivació pel desenvolupament del projecte era la consulta ràpida d’horaris i aules de les diferents classes, es va decidir implementar aquesta funcionalitat en el “Home”, d’aquesta forma la consulta seria pràcticament instantània després d’iniciar la App. Aquesta pantalla, també gaudiria de dos grans botons que traslladarien a l’usuari a les pantalles de missatges i tasques. En les pantalles “Recieved Msg” i “Sent Msg” es podrien veure un llistat amb els missatges rebuts i enviats respectivament. Oprimint sobre qualsevol missatge de la llista, portaria a l’usuari a la pantalla “Detail Msg” on podria consultar la informació continguda en el missatge. Independentment d’en quina de les pantalles es trobés l’usuari, podria redactar un missatge oprimint el botó flotant de la cantonada inferior dreta del dispositiu. També es podria alternar entre ambdues pantalles oprimint un botó a la cantonada superior dreta. Finalment, en la pantalla de tasques es podria observar un llistat amb el nom de les tasques de l’usuari i les seves respectives dates de venciment. 5.3 Testeig Per tal de posar a prova la UI de l’aplicació i comprovar que el públic objectiu comprèn el funcionament de la de l’aplicació, es va realitzar un test d’usabilitat amb el prototip. En aquest test hi van participar 3 alumnes del centre. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 34 Per a la realització d’aquest es va utilitzar la tècnica de thinking aloud, que consisteix en demanar-li a l’usuari que durant el transcurs de la prova vagi expressant de forma oral les accions que vol dur a terme i les seves impressions del que està veient en pantalla. En el test es demanaven la realització de tres tasques des de la pàgina principal de l’aplicació. Després de la seva realització, es va prosseguir amb una petita xerrada per obtenir les impressions generals i possibles propostes de canvis. Les tasques a realitzar eren les següents: • Identificar a quina aula et toca la propera classe. • Enviar un missatge. • Buscar el llistat d’entregues i els seus venciments. Al tractar-se de tasques amb una senzilla realització i un recorregut molt curt, cap dels usuaris va experimentar problemes o dificultats a l’hora de completar-les. A més a més, aquests van complir-les en qüestió de segons, factor que no es valorava, ja que amb la tècnica escollida per a la realització dels tests, es buscava rebre el màxim de feedback possible per part de l’usuari, no que aquests les completessin amb rapidesa. On realment es va aconseguir informació útil per a la realització i modificacions a l’hora de desenvolupar l’aplicació, va ser en la segona fase del test, on usuaris expressaven les seves opinions i sensacions lliurement. El primer usuari va trobar tot clar i adient, i no va proposar modificacions. En canvi, els dos usuaris restants, van fer aportacions durant la xerrada que es van considerar útils i encertades per a millorar el disseny i funcionalitats de l’App. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 35 El segon usuari va comentar que trobava que la icona escollida pel canvi de pantalla entre missatges rebuts i enviats no era prou entenedora. També va comentar el mateix de la icona en el botó flotant d’aquestes pantalles per a redactar el missatge. Tot i això, va explicar que no va tenir problema en realitzar la prova, ja que va intuir el seu funcionament per posicionament i context. Aquestes icones es troben a continuació. Figura 8: Icones del prototip no enteses durant el test d’usabilitat El tercer usuari va esmentar una característica que no s’havia tingut en compte durant la realització del prototip. A l’hora d’escriure els missatges a través del campus, una problemàtica freqüent, pot ser no saber-se el nom d’usuari de la persona a la qual vols enviar-li el missatge. És per això, que aquest usuari va suggerir alguna mena de mecanisme per a poder consultar-los sense haver d’accedir al campus via web, ja que això minvaria les capacitats de l’App. Totes aquestes valoracions van ser útils, ja que van servir per a detectar possibles problemes que no s’hagueren tingut en compte. A continuació s’expliquen les solucions escollides per a la seva resolució. Per a una millor comprensió de les funcionalitats de les icones, es van decidir substituir per altres que les descriguessin d’una forma més clara. En lloc de la icona de canvi, es va triar una icona de carpeta amb un desplegable en clicar-la amb els textos “Rebuts” i “Enviats”. La icona del símbol “+”, es va decidir canviar per una que recordés més a un procés de redacció. Les noves icones es poden visualitzar a continuació. Figura 9: Noves icones després del test d’usabilitat Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 36 Per a solucionar el problema dels noms d’usuaris, es va escollir la creació d’una nova pantalla en la qual aparegués un llistat amb tots els usuaris del CITM amb els seus respectius noms complets i usuaris del campus. A més a més, per agilitzar la cerca, també es va pensar en implementar una barra de cerca per a mostrar només en la llista aquells noms desitjats. A l’introduir una nova pantalla, el mapa de pantalles de l’aplicació es va expandir, deixant-lo com es mostra a continuació. Figura 10: Mapa de pantalles de l’aplicació v.2 5.4 Desenvolupament de l’aplicació El procés de desenvolupament de l’aplicació, es va dividir en quatre blocs diferenciats per les seves temàtiques. Aquests blocs són les funcionalitats del campus virtual del CITM, les funcionalitats del campus virtual d’Atenea, l’inici de sessió i tractament de les credencials, i finalment, els ajustaments finals per al llançament de l’App. En els següents apartats s’exposa els procediments i decisions rellevants a l’hora de desenvolupar cada un d’ells. 5.4.1 Funcionalitats campus virtual CITM Per tal d’obtenir dades reals com a continguts de l’aplicació, es va haver de dur a terme el Web Scrapping de les diferents pàgines existents en el campus virtual, de manera que la informació de l’App provingués directament de la informació disponible en el campus virtual. En cas de Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 37 no haver-ho fet així, no s’hauria pogut aconseguir una aplicació útil pels usuaris, ja que la informació mostrada en pantalla seria hipotètica. Per a poder realitzar el Scrapping, en primer lloc, s’havia d’aconseguir connectar-se i iniciar sessió en el campus virtual des de la mateixa aplicació, per així un cop dins extreure’n les dades. El primer pas va consistir en analitzar quins processos es realitzaven al lloc web del CITM per a iniciar sessió al campus mitjançant les eines de desenvolupador que proporcionen els navegadors. En aquest punt es va detectar un protocol http POST necessari per a crear un identificador de la sessió i accedir als continguts del campus. Per a realitzar el protocol POST en l’aplicació, es va haver d’instal·lar la llibreria de http proporcionada per Dart. Un cop instal·lada es va dur a terme una funció en la qual mitjançant l’enllaç, la capçalera i les credencials de l’usuari, extreia l’identificador de sessió i accedia dins del campus virtual. Un cop realitzat el procés anterior, es va poder començar amb l’extracció de dades amb el Scrapping. Per a dur-lo a terme es va realitzar una funció que mitjançant la url de la pàgina interessada i l’identificador de sessió extret anteriorment, retornava tots els continguts en format HTML que es trobaven en la pàgina introduïda. Aquesta funció serà anomenada a partir d’ara com a fetch. 5.4.1.1 Properes classes Mitjançant la funció fetch, introduint com a url la pàgina principal del campus obtenim tots els continguts que es mostren en aquesta. De totes aquestes dades només ens interessa la taula situada en la part superior esquerra, on es mostra la informació relativa a les properes classes. És per això, que un cop aconseguit tot el codi HTML s’ha de realitzar un filtrat per a seleccionar només les dades que ens interessen. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 38 Per dur-lo a terme, s’ha de navegar entre tots els elements en el codi i aprofundir-se fins a la localització de la taula mencionada. S’ha hagut de realitzar d’aquesta forma, ja que els objectes no gaudien de classes o ids creades per a la seva identificació, havent de obtenir-los de forma manual. A continuació després del filtratge, la informació s’acomoda en una llista d’objectes amb les característiques de les sessions escolars. Aquests objectes es creen a partir d’una classe personalitzada de Dart formulada per a contenir la data, professor que l’imparteix, nom de l’assignatura i aula on succeeix. L’objectiu de crear-la és tenir un millor i més fàcil tractament de les dades. Finalment, les dades es projecten en la interfície dissenyada per a la seva consulta en la pàgina principal de l’App. Durant aquest procediment, es va trobar una falla que no s’havia tingut en compte abans de començar amb el desenvolupament. La taula d’on s’extreu la informació des del campus, només es troba allí quan les classes programades han de transcórrer en el mateix o següent dia. Per a solucionar-lo, es va implementar que al llarg del procés de filtratge, si no es trobava la taula, es mostrés a l’usuari que no hi havia sessions programades. A continuació es pot observar una figura amb les dues possibles opcions, quan hi ha classes programades en els següents dos dies i quan no hi ha sessions a la vista. Figura 11: Disposició properes classes Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 39 5.4.1.2 Sistema missatgeria Per a la creació del sistema de missatgeria, es van haver de desenvolupar quatre pantalles diferents. Les funcionalitats de cadascuna són les següents: • Mostrar una llista amb els missatges rebuts o enviats depenen de l’elecció de l’usuari • Consultar la informació continguda en el missatge seleccionat. • Enviar un nou missatge. • Escollir usuaris del CITM en una llista per a afegir-los automàticament al nou missatge. En els següents apartats s’exposa els procediments i decisions rellevants a l’hora de desenvolupar cada una d’elles. 5.4.1.2.1 Llista de missatges rebuts i enviats En primer lloc, es va desenvolupar la llista de missatges. Com que al llarg del grau es poden acumular milers de missatges, en aquest cas no es podia fer un únic fetch per rebre les dades de tots els missatges. Això funciona d’aquesta forma, ja que el campus virtual limita el màxim de missatges en una sola pàgina en deu, vint-i-cinc, cinquanta o cent depenen de la configuració triada per l’usuari. És per això que per a obtenir el llistat s’han de produir tants fetch i filtratges com numero de pàgines amb missatges existeixin. Aquest fet va comportar en la creació d’una funció per a determinar el nombre de pàgines a ser filtrades. Un cop aquest número obtingut, es va crear una funció que produís un fetch per a cada pàgina a més del filtratge i extracció de la informació del missatge. En cada el fetch és Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 40 necessari indicar la url, pàgina i carpeta en què es troba (rebuts o enviats). Tota aquesta informació es diposita en una llista d’objectes d’una classe personalitzada de Dart formulada per a contenir la data i hora, l’estat (obert o no obert), la id, l’autor i l’assumpte. Com que per a mostrar els missatges s’han de realitzar un procés de càrrega, mentre la informació no està disponible, s’ha implementat un cercle de càrrega al mig de la pantalla per a donar feedback a l’usuari i que aquest sigui conscient que la informació s’està carregant. Un cop tota la informació llesta, aquesta es mostra en pantalla en una llista. Per a mostrar si ja has llegit algun cop el missatge o encara no l’has obert mai, s’han implementat dues icones diferents per a cada situació, a més a més del color de fons de l’ítem de la llista. A continuació es pot veure un exemple amb un missatge ja obert i un altre que no s’ha obert mai per a entendre la comparació. Figura 12: Comparació estat lectura missatges A més a més, com s’ha explicat en l’apartat de testeig, es va implementar un menú desplegable per a alternar entre llista de missatges rebuts i enviats. A aquest menú s’accedeix oprimint la icona que es troba en la cantonada superior dreta de la pantalla. Figura 13: Desplegable canvi llista de missatges Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 41 A l’acabar, es va detectar un altre problema. A l’estar tractant amb un ordre de milers de missatges, i no mostrar la llista fins que tota la informació s’hagués carregat, es generava un temps d’espera molt gran cada cop que es consultava la llista. En el meu cas personal, aquest temps s’allargava fins a gairebé un minut, temps exageradament llarg per si només es vol consultar algun missatge relativament nou o per a comprovar si algú t’ha enviat algun missatge. Per a resoldre el problema, es va crear una funció en la qual només es carreguessin els missatges de la primera pàgina i tot seguit mostrar-los en pantalla. Un cop es realitzés això, se seguiria amb la càrrega de la resta de missatges, actualitzant la llista a mesura que carrega i permetent a l’usuari la consulta i interacció amb la informació i elements més recents, disminuint l’espera inicial a aproximadament un parell de segons. 5.4.1.2.2 Visualitzar missatges La següent funcionalitat en desenvolupar va ser la consulta dels continguts dels missatges. Es va crear una nova pantalla en la qual s’accedia oprimint sobre qualsevol missatge dels llistats explicats en l’apartat interior. En aquesta pantalla es mostra informació ja obtinguda, com ara bé l’assumpte i data del missatge, però també es mostra el text redactat en aquest. Per a aconseguir aquest text, es realitza novament un altre fetch proporcionant la url i la id del missatge com a paràmetre. La id de cada missatge també s’havia obtingut en l’anterior fetch. Com a resposta s’obté el codi HTML amb el text, però al tractar-se d’una pàgina molt menys complexa el filtratge resulta més fàcil. A continuació es mostra una figura amb un exemple de pantalla de detall de missatge, on es pot observar l’assumpte del missatge a la capçalera i la data i contingut del text en la resta de la pantalla. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 48 En el moment en què s’ha iniciat sessió en els dos campus virtuals, es crea un objecte que guarda les credencials fins que es desinstal·la l’aplicació o en tanca la sessió mitjançant el botó “Exit” de la pantalla principal. 5.4.4 Ajustaments finals i finalització En aquest apartat s’expliquen les modificacions finals realitzades en l’App abans de la seva finalització. La primera d’elles, va consistir en la implementació d’un logotip propi per a l’aplicació. Per a elaborar-lo, es va buscar algun element que representes la universitat i no fos directament el logotip clàssic de la UPC. L’idea que més va convèncer, va ser utilitzar els nou punts del logotip de la UPC com a element principal. A més a més, també es va adoptar el color blau de la universitat. L’estil escollit va ser el flat design, estil cada cop més popular a l’hora d’elaborar logotips de softwares i empreses tecnològiques. També es va optar per un disseny amb formes arrodonides per a seguir en la mateixa línia de l’aplicació. El resultat és el següent. Figura 22: Logotip Campus App Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 49 Per a implementar el logotip en totes les versions necessàries, es va instal·lar la llibreria de Dart flutter_launcher_icons. També es va incloure el logotip convencional de la UPC en el Splashscreen (pantalla de càrrega inicial) amb la llibreria de Dart anomenada flutter_native_splash. Finalment, es va realitzar la build per obtenir l’apk de l’aplicació i així poder-la descarregar fàcilment en qualsevol dispositiu. L’enllaç de descàrrega de l’apk es troba en l’apartat d’enllaços del projecte. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 50 6. Conclusions i línies de futur Tots els objectius plantejats durant la introducció del projecte, tant generals, com específics, han estat assolits satisfactòriament, completant la part pràctica del projecte i donant com a resultat una aplicació on els estudiants del centre podran consultar horaris, disposició de les aules, enviar, rebre i llegir missatges del campus, i consultar dates d’entrega de les tasques, d’una forma ràpida i en qualsevol lloc. A més a més, també ha permès aplicar, aprofundir i reforçar els coneixements previs que es tenien de Flutter, encoratjant i donant les eines i coneixements per un possible desenvolupament amb el mateix framework si en un futur es vol desenvolupar alguna mena d’aplicació mòbil. En addició, també s’han vist aplicats i refrescats coneixements adquirits de diferents assignatures al llarg del grau, com ara bé coneixements en disseny, UI, UX o gestió de projectes. De cara al futur, s’ha pensat en la implementació de noves funcionalitats per a l’aplicació, com un sistema per a consultar les qualificacions obtingudes als diferents lliuraments de les assignatures, o un apartat en el qual poder visualitzar i descarregar els diferents continguts disponibles en els cursos del campus. També s’ha pensat a treballar en l’opció de canvi d’idioma a castellà o anglès per a l’App, ja que avui en dia, els continguts només es troben disponibles en català. Per a concloure, agrair a en Pau Fernández, tutor del projecte, pel seguiment i ajuda que m’ha proporcionat durant el desenvolupament de l’aplicació. Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 51 7. Bibliografia • Flutter - Pàgina principal [consultat: 2 de març del 2022] https://esflutter.dev/ • Azumo – What is Flutter? [consultat: 2 de març del 2022] https://azumo.com/insights/what-is-flutter • 480 – ¿Por qué Flutter? [consultat: 3 de març del 2022] https://cuatroochenta.com/por-que-flutter/ • Medium – What’s new in Flutter 3? [consultat: 5 de març del 2022] https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0 • Cloudflare - ¿Qué es el scraping de datos? [consultat: 7 de març del 2022] https://www.cloudflare.com/es-es/learning/bots/what-is-datascraping/ • Parsehub – What is web scraping? [consultat: 7 de març del 2022] https://www.parsehub.com/blog/what-is-web-scraping/ • Google Play – UPC Estudiants ? [consultat: 15 de març del 2022] https://play.google.com/store/apps/details?id=com.upc.estudiants • Flutter – Documentació de Flutter [consultat: 5 d’abril del 2022] https://docs.flutter.dev/ • Dart -Documentació de Dart [consultat: 5 d’abril del 2022] https://dart.dev/guides Mateu Miralles Selvi Adaptació del campus virtual a una App mòbil 52 • DevSheet – Send form dara in HTTP POST request in Flutter [consultat: 10 d’abril del 2022] https://devsheet.com/send-form-data-in-http-post-request-influtter/ • MDN – HTTP [consultat: 10 d’abril del 2022] https://developer.mozilla.org/en-US/docs/Web/HTTP • MDM – Query Selector [consultat: 14 d’abril del 2022] https://developer.mozilla.org/es/docs/Web/API/Document/querySel ectorAll • Pub.dev – http [consultat: 10 d’abril del 2022] https://pub.dev/packages/http • Moodle – Web Service API funcions [consultat: 18 de maig del 2022] https://docs.moodle.org/dev/Web_service_API_functions • Pub.dev – Shared preferences [consultat: 3 de juny del 2022] https://pub.dev/packages/shared_preferences • Pub.dev – Flutter launcher icons [consultat: 18 de juny del 2022] https://pub.dev/packages/flutter_launcher_icons • Pub.dev – Flutter native splash [consultat: 20 de juny del 2022] https://pub.dev/packages/flutter_native_splash