Desenvolupament d’una aplicació mòbil "GameApp"

TREBALL FINAL DE GRAU TÍTOL: Desenvolupament d’una aplicació mòbil "GameApp" AUTORS: Mariño Moreno, Daniel; Pascual Batet Àlex DATA DE PRESENTACIÓ: Febrer, 2025 COGNOMS: MARIÑO MORENO NOM: DANIEL TITULACIÓ: GRAU EN ENGINYERIA INFORMÀTICA PLA: 2018 DIRECTOR: ALEJANDRO RÍOS JEREZ DEPARTAMENT: CIÈNCIES DE LA COMPUTACIÓ COGNOMS: PASCUAL BATET NOM: ÀLEX TITULACIÓ: GRAU EN ENGINYERIA INFORMÀTICA PLA: 2018 DIRECTOR: ALEJANDRO RÍOS JEREZ DEPARTAMENT: CIÈNCIES DE LA COMPUTACIÓ DATA DE LECTURA: Aquest projecte té en compte aspectes mediambientals: ␧ Sí ␧ No QUALIFICACIÓ DEL TFG TRIBUNAL PRESIDENT SECRETARI VOCAL 1 RESUM En aquest Treball de Final de Grau es realitza el desenvolupament d’una aplicació Android anomenada “GameApp”, aquesta aplicació permet als usuaris explorar, valorar i descobrir videojocs. A més, ofereix la possibilitat de crear debats sobre videojocs i mantenir converses amb altres usuaris de l’aplicació. La gestió de l’aplicació es duu a terme a través d’una plataforma web per a administradors, que poden consultar informació dels usuaris, moderar missatges i aplicar restriccions a aquells que no facin un ús adequat de l’aplicació. L’aplicació mòbil incorpora una cerca avançada de videojocs gràcies a la integració amb l’API de IGDB (Internet Game Database). També s'utilitza l’API de Google Perspective per filtrar els missatges dels usuaris, garantint una experiència més segura i moderada. L’objectiu principal d’aquest projecte ha estat realitzar un desenvolupament col·laboratiu d’una app seguint una metodologia predefinida. Aquest procés ha inclòs el disseny de la interfície, el desenvolupament tècnic de l'aplicació mòbil i web, així com la seva integració i gestió. Finalment, l’aplicació s’ha presentat a un grup d’usuaris per recollir les seves opinions i realitzar una anàlisi crític del resultat final. Paraules clau: Android Plataforma web Firebase API IGDB Google Perspective Java Node.js Figma AWS (Amazon Web Services) 2 RESUMEN En este Trabajo de Fin de Grado se realiza el desarrollo de una aplicación Android llamada “GameApp”, esta aplicación permite a los usuarios explorar, valorar y descubrir videojuegos. Además, ofrece la posibilidad de crear debates sobre videojuegos y mantener conversaciones con otros usuarios de la aplicación. La gestión de la aplicación se lleva a cabo a través de una plataforma web para administradores, quienes pueden consultar información de los usuarios, moderar mensajes y aplicar restricciones a aquellos que no hagan un uso adecuado de la aplicación. La aplicación móvil incorpora una búsqueda avanzada de videojuegos gracias a la integración con la API de IGDB (Internet Game Database). También se utiliza la API de Google Perspective para filtrar los mensajes de los usuarios, garantizando una experiencia más segura y moderada. El objetivo principal de este proyecto ha sido realizar un desarrollo colaborativo de una app siguiendo una metodología predefinida. Este proceso ha incluido el diseño de la interfaz, el desarrollo técnico de la aplicación móvil y web, así como su integración y gestión. Finalmente, la aplicación se presentó a un grupo de usuarios para recoger sus opiniones y realizar un análisis crítico del resultado final. Palabras clave: Android Plataforma web Firebase API IGDB Google Perspective Java Node.js Figma AWS (Amazon Web Services) 3 ABSTRACT In this bachelor’s thesis, the development of an Android application called “GameApp” is carried out. This application allows users to explore, rate, and discover video games. Additionally, it offers the possibility to create debates about video games and have conversations with other users of the application. The management of the application is conducted through a web platform for administrators, who can access user information, moderate messages, and impose restrictions on those who misuse the application. The mobile application features an advanced video game search thanks to integration with the IGDB (Internet Game Database) API. It also uses the Google Perspective API to filter user messages, ensuring a safer and more moderated experience. The main goal of this project has been to make a collaborative app development process following a predefined methodology. This process included interface design, the technical development of the mobile and web applications, as well as their integration and management. Finally, the application was presented to a group of users to gather their feedback and conduct a critical analysis of the final outcome. Keywords: Android Web platform Firebase API IGDB Google Perspective Java Node.js Figma AWS (Amazon Web Services) 4 Aportació individual al grup Daniel Mariño Moreno Amb el meu company Àlex Pascual Batet, hem participat en el desenvolupament global del projecte, cooperant, aportant idees i fent reunions periòdiques. Així mateix, la memòria s’ha desenvolupat de manera conjunta. Ja que tenía coneixements previs de desenvolupament d’aplicacions mòbils utilitzant Android Studio i Google Cloud, si el meu company trobava dificultats en aquest àmbits he proporcionat l’ajuda necessaria per a l’aprenentatge del company Encara que més endavant es mostra l’aportació individual per Sprints faig un resum de la meva aportació individual: Desenvolupament de les pantalles d’inici de sessió verificat per Google Authentication tant correu/contrasenya com compte de Google. Desenvolupament de les pantalles d’informació i cerca de jocs així també la implementació de l’API IGDB dins l’aplicació mòbil. Desenvolupament de les pantalles de favorits així també com la possibilitat de seleccionar i valorar diferents jocs com a favorits. Desenvolupament de restriccions, mitjançant l’usuari administrador, tant grans (bloquejar usuari), com petites (restriccions de pantalles a l’app) així també el desbloqueig d’aquestes. Desenvolupament de la pantalla de perfil de l’usuari, així mateix l’obtenció de la informació dels usuaris a la web. Obtenció dels comentaris i reports dels diferents usuaris. Desenvolupament de missatgeria entre usuaris dins l'aplicació mòbil, establint prèviament una conversa entre dos usuaris. 5 Aportació individual al grup Àlex Pascual Batet Juntament amb el meu company Daniel Mariño Moreno, hem participat activament en el desenvolupament global del projecte, treballant de manera col·laborativa, aportant idees, i realitzant reunions periòdiques per assegurar un avanç coherent i alineat amb els objectius establerts. La memòria del projecte s'ha desenvolupat de manera conjunta, coordinant els continguts i revisant-los per garantir la seva qualitat. Vaig començar el projecte amb un bon nivell de coneixement sobre React i Node.js per a la creació de l'aplicació web, així com de Firebase per a la gestió de bases de dades en temps real, que m'han permès avançar amb seguretat en les tasques assignades. Amb l’objectiu de donar un suport adequat al projecte, he posat un gran èmfasi en la implementació de funcionalitats concretes i en l'aprenentatge de tecnologies que inicialment no dominava. He desenvolupat el sistema complet de fòrums, incloent-hi la gestió dels comentaris i les respostes, assegurant-ne un funcionament òptim i en temps real gràcies a Firebase. També he estructurat la base de dades per gestionar tots els dades rellevants del projecte, optimitzant-ne l'ús i garantint la seva escalabilitat. Pel que fa al disseny i l’experiència d’usuari, he contribuït als dissenys generals tant de l’aplicació mòbil com de la interfície web, assegurant la coherència visual i funcional entre les dues plataformes. És important destacar que aquesta distribució de tasques no significa que el meu company no s'hagi implicat en aquestes funcions, ni tampoc que jo no hagi col·laborat en les seves. Hem treballat de manera transversal i conjunta en tot moment, compartint coneixements i revisant mútuament les nostres contribucions per garantir un resultat excel·lent. 6 INDEX 1. Context 14 1.1. Introducció 14 1.2. Conceptes 15 1.2.1. Desenvolupament mòbil 15 1.2.2. Desenvolupament web 15 1.2.3. API externes 15 1.2.4. Compartició de base de dades 15 1.2.5. Retroacció 16 1.3. Identificació del problema 16 1.4. Agents Implicats 16 1.4.1. Desenvolupadors 16 1.4.2. Moderadors 16 1.4.3. Usuaris finals 17 2. Justificació 18 2.1. Solucions Prèvies 18 2.2. Eines 19 2.2.1. Hardware 19 2.2.2. Dispositius mòbils i navegadors web 19 2.2.3. Programari 19 3. Requeriments funcionals 21 3.1.1. Usuari bàsic de l’aplicació mòbil 21 3.1.2. Usuari administrador de l’aplicació web 21 3.2. Requeriments no funcionals 22 4. Metodologia 23 4.1. Mètode de treball 23 4.2. Monitoratge 23 4.3. Mètodes de validació 23 5. Planificació 25 5.1. Descripcions de tasques i estimacions temporals 25 6. Estimacions i Gantt 27 7. Obstacles i prevencions de riscos 28 7.1. Obstacles i gravetat 28 7.2. Prevencions de riscos 29 13 UX (User Experience): Experiència general d’un usuari en usar l’aplicació, incloent-hi la facilitat d’ús i la satisfacció. Firestore: Base de dades utilitzada dins Firebase per l’emmagatzematge i consulta de dades de l’aplicació. Timestamp: Format per emmagatzemar dates i hores dins de Firebase. Endpoint: Direcció específica dins d’un servei web que permet a les aplicacions comunicarse amb el servidor UML: Eina visual usada per representar gràficament l'estructura i les relacions d’una base de dades. Backlog: Col·lecció d’elements i funcionalitats pendents d’iniciar. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 14 1. Context Aquest projecte és un Treball de Final d'Estudis de l'especialitat de Tecnologies de la Informació dins el Grau d'Enginyeria Informàtica, impartit a l'EPSEVG (Escola Politècnica Superior d'Enginyeria de Vilanova i la Geltrú) de la UPC (Universitat Politècnica de Catalunya). És un projecte de la modalitat A, dirigit per Alejandro Ríos, doctor en Informàtica, professor de l’assignatura Desenvolupament d’Aplicacions Mòbils al centre. L’objectiu principal del projecte és realitzar el desenvolupament d’una aplicació seguint una metodologia estructurada, amb la finalitat de crear un producte funcional que pugui estar disponible per a altres usuaris. Aquest projecte integra diversos coneixements adquirits durant el grau, incloent-hi: ● Desenvolupament mòbil amb Android. ● Integració d’APIs externes, com IGDB o Google Perspective. ● Desenvolupament web per gestionar i administrar l’aplicació mòbil. A més, s'ha treballat per oferir una experiència d'usuari sòlida, incorporant millores basades en les retroaccions dels usuaris i implementant funcionalitats que promouen la seguretat i la moderació dins la plataforma. 1.1. Introducció Aquest projecte neix de la necessitat d’aplicar tots els coneixements adquirits durant el grau en un context realista i actual, com és el món dels videojocs. Es tracta d’un sector en constant creixement, on les aplicacions mòbils senzilles d’usar són cada vegada més sol·licitades per informar-se, compartir opinions i interactuar amb altres usuaris. Els objectius principals d’aquest projecte són: ● Explorar l’ús d’APIs externes com IGDB, per facilitar la cerca i consulta de videojocs; Perspective, per moderar de manera automàtica les interaccions entre usuaris; i Imgur, per gestionar imatges de perfil. ● Implementar funcionalitats socials, com fòrums i missatgeria, per fomentar la comunicació i la participació activa dels usuaris. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 15 ● Desenvolupar una plataforma web complementària que permeti als administradors moderar contingut i gestionar l’activitat dels usuaris. ● Recollir retroaccions d’usuaris durant diverses fases del desenvolupament per identificar millores i ajustar el projecte a les seves necessitats. Aquest enfocament combina desenvolupament tecnològic, integració d’eines externes i optimització de l’experiència d’usuari, amb l’objectiu d’oferir una solució funcional, escalable i preparada per ser utilitzada en el món real. 1.2. Conceptes 1.2.1. Desenvolupament mòbil Es refereix al procés de creació d’aplicacions per a dispositius Android fent servir eines com Android Studio i llibreries específiques per a la implementació d’interfícies i funcionalitats. Aquest projecte integra l’ús d’XML per al disseny de la UI i Java com a llenguatge principal de programació. 1.2.2. Desenvolupament web El desenvolupament web consisteix en el disseny i construcció de llocs o aplicacions accessibles mitjançant un navegador web. Per a aquest projecte, s’ha utilitzat React per al front-end, Node.js per al back-end i AWS Amplify per la gestió i desplegament de l’aplicació. 1.2.3. API externes Les API són interfícies que permeten intercanviar dades de manera estructurada entre diferents sistemes. En aquest projecte s’utilitzen: ● IGDB (Internet Game Database): Facilita l’accés a informació sobre videojocs. ● Perspective API: Proporciona eines per moderar missatges detectant contingut tòxic. ● Imgur API: Permet gestionar i allotjar imatges, com les fotos de perfil dels usuaris. 1.2.4. Compartició de base de dades Aquest projecte comparteix una única base de dades entre l’aplicació mòbil i la plataforma web. Això permet una administració centralitzada i coherent de les dades, optimitzant tant el rendiment com la gestió. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 16 1.2.5. Retroacció Es refereix als diversos comentaris i reports del desplegament de l’aplicació a un grup d’usuaris on es reben comentaris i reports durant diverses fases del desenvolupament de l’app amb l’objectiu de millorar-la. 1.3. Identificació del problema Aquest projecte busca abordar la manca d'aplicacions mòbils que combinin, de manera efectiva, tres elements essencials: 1. Cerca de videojocs: Una eina robusta que permeti als usuaris trobar informació detallada sobre jocs mitjançant l’ús d’API com IGDB. 2. Funcionalitats socials: Espais per crear fòrums, debatre sobre videojocs, valorar-los i mantenir converses amb altres usuaris de la comunitat. 3. Gestió i moderació eficient: Una plataforma per als administradors que asseguri una experiència segura i organitzada, incloent-hi eines per moderar fòrums, gestionar favorits i aplicar restriccions a usuaris si és necessari. Aquest projecte vol oferir una solució integral que combini informació i interacció social en un sol entorn. 1.4. Agents Implicats 1.4.1. Desenvolupadors Professionals o estudiants interessats en utilitzar aquest sistema com a referència o inspiració per als seus propis projectes. També es consideren els responsables tècnics de mantenir i evolucionar el sistema. 1.4.2. Moderadors Administradors encarregats de garantir la qualitat del contingut a l’aplicació. Les seves funcions inclouen: ● Moderar fòrums i comentaris. ● Gestionar usuaris (incloent-hi restriccions en cas de mal ús). ● Assegurar un bon funcionament de la plataforma. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 17 1.4.3. Usuaris finals Jugadors i aficionats als videojocs que busquen: ● Explorar i descobrir videojocs nous. ● Valorar els seus jocs favorits. ● Interactuar amb altres usuaris que comparteixin o difereixin en opinions. ● Participar en debats per intercanviar punts de vista i enriquir l’experiència de la comunitat. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 18 2. Justificació Tal com s’ha descrit anteriorment, l’objectiu principal del projecte és satisfer les necessitats dels usuaris i administradors mitjançant el desenvolupament d’una solució integrada i accessible que ofereixi funcionalitats avançades. Aquesta solució pretén optimitzar l’experiència de l’usuari alhora que garanteix una administració eficient de la plataforma. A més, aquest projecte serveix com una aplicació pràctica dels coneixements adquirits al llarg de la carrera. És important destacar que, en ser un treball en parella, cadascun dels membres de l'equip comptava amb diferents nivells de coneixement en les tecnologies utilitzades. Per exemple, mentre que l’Àlex Pascual tenia experiència en desenvolupament web amb React i Node.js i una base en Firebase, no tenia coneixements previs en desenvolupament d’aplicacions mòbils amb Android. D’altra banda, el Daniel Mariño tenia un bon nivell en desenvolupament mòbil, però tenia menys experiència en Firebase i desenvolupament web. Aquesta situació ha permès que cadascun de nosaltres aprengués de forma autònoma i també gràcies a la col·laboració mútua, enriquint així l’experiència global del projecte. Aquest enfocament permet posar en pràctica habilitats tècniques i metodològiques en un context realista, simulant el flux de treball d’un entorn professional i promovent una experiència formativa integral. 2.1. Solucions Prèvies Aquest projecte es presenta com una solució original que combina funcionalitats informatives i socials dins d’una aplicació mòbil. Tot i que existeixen algunes aplicacions similars, cap d’elles integra totes aquestes característiques de manera completa: ● Aplicacions informatives: L’aplicació d’IGDB proporciona informació detallada sobre videojocs, però no inclouen funcionalitats socials com fòrums i missatgeria. ● Plataformes web: Una solució similar podria ser 3DJuegos, que inclou fòrums i valoracions dins d’una pàgina web. Tot i això, aquesta plataforma no disposa d’una aplicació mòbil que cobreixi les mateixes necessitats. Aquest projecte, per tant, ofereix una proposta innovadora que combina funcionalitats socials i d’administració amb un entorn d’usuari mòbil modern i accessible. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 19 2.2. Eines 2.2.1. Hardware El desenvolupament del projecte requereix un ordinador amb prou especificacions per executar entorns de desenvolupament de manera eficient, com ara: ● Processador: Intel Core i7 o AMD Ryzen 7 equivalent. ● RAM: 16 GB o superior ● GPU: NVIDIA GTX 1650 o superior Aquestes especificacions asseguren una experiència fluida durant el desenvolupament amb entorns com Android Studio i Visual Studio Code, i les proves de l’aplicació. 2.2.2. Dispositius mòbils i navegadors web ● Mòbil Android: Necessari per a les proves i el desplegament de l’aplicació mòbil. ● Navegadors moderns: Com Chrome, Firefox o Edge, per assegurar que la plataforma web és adaptativa ii compatible amb diversos dispositius. 2.2.3. Programari Per al desenvolupament del projecte, s’han utilitzat les següents eines de programari: ● Android Studio: Entorn principal per al desenvolupament de l’aplicació mòbil en Android, amb Java com a llenguatge de programació principal. ● Visual Studio Code: Fet servir per al desenvolupament del back-end i la gestió del codi de l’aplicació web. ● React: Framework per a la creació del front-end de la plataforma web. ● Firebase: Base de dades centralitzada que connecta l’aplicació mòbil i web, assegurant consistència i sincronització. ● AWS Amplify: Servei utilitzat per al desplegament de l’aplicació web en un domini accessible públicament. ● Postman: Eina usada per provar i validar els endpoints de l’API del back-end durant el desenvolupament. ● GitHub: Plataforma utilitzada per al control de versions i la col·laboració en el projecte. ● GitHub Desktop: Eina gràfica que facilita la gestió dels repositoris GitHub de manera local. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 20 ● ChatGPT: Utilitzat com a eina de suport durant el procés de desenvolupament per resoldre dubtes tècnics, generar idees, ajudar en el disseny i millorar la redacció de la documentació. ● Figma: Eina de disseny d’interfícies utilitzada per planificar i prototipar el disseny de l’aplicació, generant el codi d’aquest. ● AstahUML: Utilitzat durant la fase inicial del projecte per a la modelització UML i el disseny preliminar de les estructures, encara que el seu ús no es reflecteix en la versió final de la documentació. ● APIs externes: ○ IGDB: Per a la cerca de videojocs. ○ Perspective API: Per a la moderació automàtica de fòrums. ○ Imgur: Per a la gestió d’imatges de perfil d’usuari. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 21 3. Requeriments funcionals 3.1.1. Usuari bàsic de l’aplicació mòbil ● Autenticació d’usuaris amb Google Authentication: Implementació d’un sistema d’inici de sessió segur i ràpid, ja sigui amb un correu electrònic o compte de Google. ● Cerca d’informació de videojocs: Els usuaris poden cercar jocs i obtenir-ne informació mitjançant la integració amb l’API d’IGDB. ● Gestió de favorits: Capacitat per guardar i gestionar jocs favorits, incloent-hi la possibilitat de puntuar-los. ● Gestió de la informació pròpia de l’usuari: L’usuari pot personalitzar el seu perfil, afegint una descripció, indicant el seu joc més jugat, i canviant la foto de perfil gràcies a la integració amb l’API d’Imgur. També pot canviar el nom d’usuari, tancar sessió o eliminar el compte (tant a Firebase Authentication com a Firebase Database). ● Gestió de fòrums: Possibilitat de crear, participar i valorar en diversos fòrums de l’aplicació. A més, els usuaris poden reportar comentaris tòxics o inapropiats. Els fòrums estan moderats automàticament per la Perspective API, amb l’opció que l’usuari enviï reports manualment als administradors. ● Gestió de missatgeria: Els usuaris poden enviar missatges entre ells després d’establir una conversa. Un cop a la conversa, també poden veure la informació bàsica de l’altre usuari. ● Comentaris i reports: Opció de respondre un qüestionari que arriba directament als administradors. 3.1.2. Usuari administrador de l’aplicació web ● Autenticació d’administradors: Accés exclusiu per a administradors mitjançant inici de sessió amb nom d’usuari i contrasenya. ● Interacció amb usuaris de l’app: Possibilitat d’enviar missatges a qualsevol usuari de l’aplicació mòbil. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 22 ● Gestió d’usuaris: Els administradors poden accedir a tota la informació dels usuaris i aplicar restriccions específiques, com la prohibició de cercar jocs, accedir a favorits o participar en fòrums. També poden bloquejar un usuari de manera permanent si és necessari. ● Gestió de retroaccions: Els administradors tenen accés a tots els comentaris i reports enviats pels usuaris. 3.2. Requeriments no funcionals Robustesa: Implementació correcta i robusta de totes les funcionalitats, tant de l’aplicació mòbil com de la web. Fiabilitat: Sincronització precisa i consistent de les dades entre les aplicacions web i mòbil en temps real. Escalabilitat: Capacitat per gestionar un augment del nombre d’usuaris sense comprometre el rendiment de les aplicacions. Usabilitat: Interfícies intuïtives que permetin una navegació fàcil, una cerca efectiva i una interacció fluida amb les funcionalitats disponibles. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 29 Semblant a la documentació incompleta suposa un obstacle de gravetat mitjana, ja que es poden trobar alternatives a eines o complementar-les d’altres. Situacions personals de membres de l’equip: ● Factors humans o situacions personals poden afectar el rendiment d’algun membre de l’equip durant els sprints. Una situació personal desafortunada d’un membre de l’equip pot suposar un obstacle de gravetat mitjana, perquè frenaria el desenvolupament de l’aplicació momentàniament. 7.2. Prevencions de riscos Prèviament, s’han esmentat un conjunt de riscos a tenir en compte durant el desenvolupament del projecte. A continuació, es descriuen les estratègies i accions preventives que s’han planificat per a cada cas. API externes ● Renovació d’accessos: Per evitar el risc associat a la caducitat de les claus d’accés de les API externes, aquestes es renovaran amb una periodicitat superior al seu temps de caducitat. Per exemple, l’API d’IGDB caduca cada dos mesos, i es renovarà mensualment per assegurar la seva continuïtat. ● Falta de documentació: Si la documentació disponible d’una API és insuficient o incompleta, s’analitzarà la seva viabilitat tècnica. En cas que aquesta situació impedeixi el desenvolupament correcte del projecte, es buscaran alternatives, prioritzant aquelles que disposin d’una documentació més robusta i compatible amb els requisits del sistema. Gestió de la base de dades ● Sincronització entre aplicacions: Per mitigar possibles problemes de sincronització entre l’aplicació mòbil i la pàgina web, s’ha implementat una solució proactiva en la qual la pàgina web es refresca dinàmicament segons s’actualitzen les dades a la base de dades. Això assegura que es mantinguin sincronitzades en temps real. ● Monitoratge constant: A més, es duran a terme proves regulars durant el desenvolupament per detectar i solucionar possibles inconsistències en la base de dades. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 30 Metodologia ● Planificació d’sprints: Les tasques assignades s’han de completar durant el període de l’sprint establert. En cas que no es finalitzin dins del termini previst, és preferible ajornar-les al següent sprint abans que intentar completar-les de manera precipitada en l’últim dia, ja que això pot comprometre la qualitat del resultat. ● Revisió periòdica: Les retrospectives al final de cada sprint permetran identificar àrees de millora en la gestió del temps i ajustar la càrrega de treball per als següents sprints. Limitacions de temps ● Gestió del temps: Davant la pressió temporal, es farà un seguiment constant del progrés de les tasques mitjançant les eines de monitoratge, com Trello, per tal de redistribuir el temps si es detecten desviacions del pla inicial. Limitacions de recursos ● Recursos limitats: En cas de restriccions en l’accés a serveis prèmium o subscripcions, s’ha prioritzat l’ús de proves gratuïtes. No obstant això, s’ha considerat que, en el cas de necessitat, l’accés a serveis de pagament pot oferir funcionalitats ampliades, fet que es valoraria en funció de l’impacte al projecte. Situacions personals de membres de l’equip ● Flexibilitat: S’ha fomentat un entorn de comunicació oberta dins de l’equip per tal d’identificar situacions personals que puguin afectar el rendiment. Es promou la flexibilitat horària per adaptar-se a aquestes circumstàncies. ● Redistribució de tasques: S’ha dissenyat un pla de contingència que permet redistribuir les tasques entre els membres de l’equip en cas d’imprevistos personals, assegurant que el progrés del projecte no es vegi afectat significativament. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 31 8. Pressupost En aquest apartat es descriu el cost total del projecte, tenint en compte el sou dels desenvolupadors, el material necessari i altres costos associats al desenvolupament del projecte. 8.1. Costos generals del projecte Per al desenvolupament d’aquest projecte s’han considerat les necessitats següents: ● Dos enginyers en pràctiques: Cada un amb un sou de 8 €/hora, amb un total estimat de 10.800 € per any. ● Dos portàtils: Les especificacions necessàries per garantir el bon desenvolupament del projecte són: ○ Processador: Intel Core i7 o AMD Ryzen 7 equivalent. ○ RAM: 16 GB o superior. ○ GPU: NVIDIA GTX 1650 o superior. Cada portàtil té un cost de 899,99 € i una vida útil estimada de 7 anys. Per calcular la seva amortització, es considera que l'any té 220 dies laborables, amb una dedicació diària de 4 hores i una durada del projecte de 425 hores. La fórmula d’amortització és: 𝐴𝑚𝑜𝑟𝑡𝑖𝑡𝑧𝑎𝑐𝑖ó (𝑒𝑢𝑟𝑜𝑠) = 𝐶𝑜𝑠𝑡 (𝑒𝑢𝑟𝑜𝑠) ∗ 𝑑𝑢𝑟𝑎𝑐𝑖ó 𝑑𝑒𝑙 𝑝𝑟𝑜𝑗𝑒𝑐𝑡𝑒 (ℎ𝑜𝑟𝑒𝑠) 𝑉𝑖𝑑𝑎 ú𝑡𝑖𝑙 (𝑎𝑛𝑦𝑠) ∗ 220 ∗ 4 Resultats del càlcul: Hardware Cost Unitats Vida útil Amortització Portàtil 899,99€ 2 7 anys 124.18€ A més del hardware, també es tenen en compte els costos de software utilitzats durant el projecte, detallats a continuació: Software Duració Cost Github - 0 € AWS * 1 any 0 € Google Docs - 0 € Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 32 Android Studio - 0 € IGDB API * - 0 € Perspective API - 0 € Imgur API * - 0 € Discord - 0 € Trello - 0 € ChatGPT - 0 € Figma - 0 € Nota: Els costos marcats amb * estan subjectes al nombre de sol·licituds realitzades. Si se sobrepassa el límit gratuït, cada trucada tindrà un cost aproximat d'entre 0,001 € i 0,01 €. 8.2. Contingències En qualsevol projecte, cal preveure una partida de contingència per cobrir possibles imprevistos. En aquest cas, s’ha establert un marge de 15% sobre els costos totals estimats: Tipus de cost Cost Cost de contingència (15%) Personal 10.800 € 1.620€ Hardware 124,18€ 18,627 € Software 0 € 0 € Total 10.924,18 € 1.638,627€ Amb aquestes previsions, el pressupost total ascendeix a 12.562,81 €, incloent-hi els costos generals i les contingències. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 33 9. Informe de sostenibilitat 9.1. Anàlisis de sostenibilitat 9.1.1. Punt de vista ambiental Desenvolupament del treball final d’estudis: ● Impacte: Durant el desenvolupament del projecte s'ha detectat un consum energètic derivat de l'ús de tecnologies com Android Studio, React, Node.js i de dispositius com portàtils i mòbils per a proves. ● Mesures: Encara que no s’ha realitzat una quantificació precisa, s’han pres mesures com l’ús d’equips energèticament eficients i l’optimització del maquinari durant el desenvolupament. El projecte no incorpora principis d’economia circular, ja que no genera materials físics ni residus reciclables. Execució del projecte: Els principals recursos utilitzats seran: ● Servidors: Base de dades (Firebase), API (IGDB, Perspective, Imgur), i serveis de desplegament (AWS Amplify). ● Dispositius: Ordinadors i mòbils utilitzats pels desenvolupadors i usuaris. ● Energia elèctrica: Consumida pels servidors al núvol i pels dispositius dels usuaris. L’impacte ambiental d’aquests recursos prové principalment de la petjada de carboni significativa generada pels servidors en núvol i el consum energètic dels usuaris durant l’ús de l’aplicació. El projecte pot contribuir a reduir l’ús de dispositius físics per a la cerca i la comunicació entre usuaris interessats en videojocs. Gràcies a la seva petjada ambiental moderada, l’impacte negatiu es mantindria mínim. Atès que el projecte no genera residus físics, es pot reduir encara més l’impacte ambiental promovent un ús eficient de l’aplicació entre els usuaris, complementat amb un codi optimitzat i una gestió eficient dels recursos al núvol. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 34 Riscos i limitacions: En cas d’un increment massiu d’usuaris, la petjada de carboni del projecte podria augmentar significativament, especialment si no es realitza una optimització adequada de les consultes a la base de dades. Es podria replantejar el desenvolupament utilitzant únicament portàtils per reduir el consum energètic. Tanmateix, aquesta mesura reduiria l'eficiència del procés. Sent un projecte digital, el principal recurs reutilitzable seria el codi d’APIs i frameworks externs. No s’ha obtingut informació específica sobre l’impacte ambiental dels centres de dades usats, com Firebase i AWS Amplify. No s’ha realitzat un càlcul detallat de la petjada de carboni associada al consum energètic dels servidors ni dels dispositius dels usuaris. La sostenibilitat del projecte està condicionada per les pràctiques ambientals dels proveïdors externs, com AWS, Firebase i altres API, que no es poden controlar directament. 9.1.2. Punt de vista econòmic Desenvolupament del treball final d’estudis: ● Impacte: Costos associats al desenvolupament, incloent-hi salaris de desenvolupadors i costos de maquinari. ● Mesures: S’ha prioritzat l’ús d’eines gratuïtes o de codi obert com Firebase, API externes i AWS Amplify. Es van evitar despeses innecessaries optant per metodologies de treball eficients, com el treball col·laboratiu a través de Trello i GitHub, reduint la duplicació d'esforços. Execució del projecte: Els serveis al núvol seleccionats són suficients per suportar el volum d’usuaris previst durant la fase de realització del projecte. El cost podria reduir-se mitjançant l’optimització de les consultes a Firebase, assegurant que no es superin els límits establerts, tot i que això és poc probable en el context actual. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 35 El cost estimat per a futures actualitzacions és mínim gràcies a la utilització d’eines gratuïtes com GitHub per al control de versions i la col·laboració eficient dins de l'equip. El desmantellament del projecte no suposaria costos significatius, ja que els serveis al núvol es poden desactivar fàcilment, i els usuaris poden desinstal·lar l’aplicació sense complicacions. El projecte té el potencial de beneficiar altres projectes similars en l’àmbit del desenvolupament web o Android, oferint una base de codi reutilitzable i experiència acumulada. Riscos i limitacions: Els costos associats als serveis al núvol i les condicions d’ús de les API poden variar amb el temps. Un augment inesperat del nombre d’usuaris podria incrementar significativament les despeses del projecte. La dependència de tercers (Firebase, AWS, API externes) dificulta la previsió de canvis futurs en les condicions de servei o en els costos. Tot i que el projecte està dissenyat per ser escalable, no s’han quantificat de manera exacta els costos potencials associats a un creixement ràpid o inesperat en el nombre d’usuaris. 9.1.3. Punt de vista social Desenvolupament del treball final d’estudis: El projecte incorpora reflexions sobre estàndards ètics i professionals, especialment en la gestió i moderació de fòrums, assegurant que l'eina promogui un ambient inclusiu i respectuós. També s’han integrat eines com Perspective per fomentar un ús més inclusiu i conscient del llenguatge. En un context de creixement constant del sector dels videojocs, és necessari abordar la integració social i la moderació d’interaccions tòxiques per part dels usuaris, garantint un espai virtual adequat per a tots. Execució del projecte: Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 36 El projecte beneficia especialment als usuaris interessats a explorar videojocs i compartir les seves opinions en fòrums temàtics. Tanmateix, els usuaris en zones amb baixa connectivitat es poden veure afectats per una interactivitat limitada amb altres usuaris o per una cerca més lenta de videojocs. Aquest projecte aborda de manera directa la manca d'aplicacions que combinen eficientment la cerca de videojocs amb funcionalitats socials robustes. Proporcionant: ● Un sistema integrat per explorar, puntuar i compartir videojocs favorits. ● Fòrums amb moderació automàtica i eines per reportar contingut inapropiat. ● Un mecanisme de missatgeria que connecta usuaris amb interessos comuns. Una possible evolució del projecte seria la integració amb xarxes socials, com Discord o X (antigament Twitter), millorant la difusió de l’aplicació. No obstant això, aquesta implementació implicaria nous riscos en termes de privacitat i seguretat de les dades. El projecte busca evitar biaixos, estereotips i rols de gènere gràcies a les moderacions automàtiques amb Perspective i a la supervisió manual d’administradors i usuaris. L’aplicació està dissenyada perquè qualsevol persona, independentment del seu gènere, edat o origen, pugui utilitzar-la. Tot i això, persones amb discapacitats visuals o motores severes podrien trobar dificultats d’accessibilitat. Riscos i limitacions: Hi ha diversos escenaris on el projecte podria tenir impactes negatius: ● Una supervisió inadequada per part dels administradors podria derivar en fòrums tòxics i no inclusius. ● El fet que l’aplicació només estigui disponible en català pot perjudicar usuaris que no comprenguin aquesta llengua. ● Si els serveis utilitzats deixen de funcionar, els usuaris que no hagin intercanviat informació personal podrien perdre el contacte amb altres usuaris. ● L’impacte social és difícil de quantificar de manera objectiva. ● L’aplicació no ha estat provada de manera exhaustiva per persones amb discapacitats diverses, cosa que podria limitar la seva usabilitat per a aquests grups. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 37 10. Desenvolupament de la metodologia Com hem descrit a l’apartat 4, hem realitzat sprints d’una duració aproximada de dues setmanes en què l’últim dia fèiem un informe individual del qual havíem fet i un informe de retro amb l’objectiu d’avaluar com ens havia anat la metodologia fins al moment. 10.1. Sprint 1 10.1.1. Informe individual de treball Dia 22-09-24 Hora 10:00 Informe individual de treball Àlex Definició i creació de les col·leccions “users”, “forums”, i “messages”, juntament amb “usersBanned” i “comments” per a gestionar la informació d’usuaris, fòrums i missatges dins l’aplicació. Connexió del back-end amb Firebase per a la gestió de dades en temps real relacionat amb els fòrums i els seus comentaris. Disseny de les principals pantalles de l’aplicació via Figma. Daniel Implementació de l’autenticació tant amb Google com amb correu/contrasenya, creació de interfície amb l’API, aplicació de consultes a l’ API per a omplir la recycler de la primera pantalla amb els 50 primers jocs i la consulta específica d’un joc en concret amb informació de l’API. Creació dels fragments de l’aplicació juntament amb el menú de navegació. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 38 10.1.2. Retro Que ens ha agradat: Hem aconseguit establir les bases de l'aplicació amb èxit, incloent-hi gran part del disseny i de les funcionalitats essencials. A més, la comunicació dins l'equip ha estat fluida i efectiva, sense conflictes ni malentesos. Que no ens ha agradat: No hem trobat cap problema significatiu, però ens hem adonat que podríem haver planificat amb més detall la definició de les dades per evitar possibles ajustos futurs. Que hem de millorar: Optimitzar la definició de dades i assegurar-nos que estan ben estructurades per evitar futurs ajustos o inconsistències, ja que això serà clau per a la integració fluida amb Firebase i altres funcionalitats. Que farem per millorar: Realitzarem una revisió més detallada de les col·leccions de Firebase i les seves relacions, assegurant que les dades compleixen amb tots els requisits actuals i futurs. També consolidarem la connexió entre el back-end i l'aplicació per facilitar el desenvolupament posterior. 10.2. Sprint 2 10.2.1. Informe individual de treball Dia 6-10-24 Hora 10:00 Àlex S'ha reformat l'estructura de les bases de dades a Firebase, implementat el sistema de “likes/dislikes” als fòrums i integrat l'API Perspective de Google per filtrar missatges tòxics als comentaris. A més, s'ha completat la funcionalitat de creació de fòrums i comentaris, Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 45 dels reports en les respostes i els comentaris dels fòrums. Això ha requerit una actualització en les col·leccions de Firebase i en el codi corresponent a la lògica inicial, assegurant que es pot obtenir la informació necessària de manera precisa i organitzada. Daniel Implementació de bans a tots els usuaris juntament amb una pantalla dedicada als usuaris amb restriccions. Ara, quan es crea un usuari, aquest pot tenir restriccions definides. També s’han implementat restriccions a la web per als administradors i s’ha afegit un botó per fer un qüestionari sobre què els ha semblat l’aplicació, que es guarda a la base de dades juntament amb l’usuari. Que no hem fet Àlex No s’han actualitzat els estils de l’aplicació per ferlos més moderns i atractius visualment. Daniel No s’ha afegit la pantalla de comentaris sobre l’aplicació ni els reports a la web. 10.6.2. Retro Que ens ha agradat: El progrés constant en aquest sprint ens ha permès tenir una versió de l’aplicació prou completa per mostrar-la i obtenir suggeriments, encara que esperarem un sprint més per poder realitzar modificacions i obtenir una versió encara més robusta. La col·laboració entre els membres de l’equip ha estat fluida i eficient. Que no ens ha agradat: Tot i l'èxit en la majoria de tasques, hem notat que alguns aspectes visuals podrien haver-se ajustat abans de la presentació. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 46 Que hem de millorar: Hem d’incloure revisions estètiques més detallades dins de cada sprint per assegurar-nos que l’experiència d’usuari sigui òptima. Que farem per millorar: Inclourem temps específic en la planificació dels pròxims sprints per refinar detalls visuals i assegurar que el disseny compleix els estàndards esperats. 10.7. Sprint 7 10.7.1. Informe individual de treball Acta de la reunió de planificació del sprint 7 Dia 07-12-24 Hora 10:00 Informe individual de treball Àlex S’ha desenvolupat una nova lògica i nous estils per als missatges reportats a la web i s’ha completat tota la implementació de la missatgeria directa en aquest entorn, a més, reajustant petits detalls d’estil. També s’han actualitzat els estils al xat de l’aplicació mòbil i assegurant la correcta visualització del nom i la foto de perfil de l’usuari amb qui estem parlant. Pel que fa a la pantalla del perfil de l’aplicació mòbil, s’ha redissenyat amb nous estils i s’hi ha incorporat la visualització de la foto de perfil de l’usuari. Finalment, s’ha implementat la possibilitat de canviar la foto de perfil amb una nova lògica integrada amb l’API d’IMGUR. Daniel S’ha creat la pantalla de comentaris i reports a la web. S'ha afegit la informació de l’usuari com la descripció i la possibilitat d’escollir el joc favorit més jugat. També s’ha implementat la Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 47 funcionalitat per veure la informació d’un usuari amb qui s’ha establert una conversa. Que no hem fet Àlex Aquest sprint s’han completat totes les tasques assignades. Daniel No he afegit la informació dels usuaris ni els favorits a la web 10.7.2. Retro Que ens ha agradat: La finalització de les principals funcionalitats de l’aplicació ens ha permès fer un lliurament preliminar a alguns usuaris per obtenir les seves retroaccions sobre l’app. Que no ens ha agradat: En aquest sprint no hem tingut cap problema ni aspecte negatiu rellevant a destacar. Que hem de millorar: Tot i haver acabat satisfets amb els resultats, continuarem buscant maneres d’optimitzar la nostra col·laboració i mantenir un bon ritme de treball. Que farem per millorar: Mantindrem les dinàmiques que han funcionat en aquest sprint i continuarem posant l’atenció en la qualitat dels detalls abans de futures entregues. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 48 10.8. Sprint 8 10.8.1. Informe individual de treball Acta de la reunió de planificació del sprint 8 Dia 21-12-24 Hora 10:00 Informe individual de treball Àlex Es van aplicar diverses millores en els fòrums, comentaris i respostes, incloent-hi la recuperació dinàmica de la informació de l’usuari i la gestió dels casos d’usuaris eliminats. També es van millorar diversos aspectes de l’aplicació, com la resolució de les imatges i els estils de diferents pantalles (perfil, login, registre). A més, es van solucionar els detalls esmentats en la retroacció rebuda dels usuaris. Daniel Es va afegir la paginació de comentaris dels usuaris i la possibilitat de veure la informació detallada d’un usuari. Que no hem fet Àlex Aquest sprint s’han completat totes les tasques assignades. Daniel Aquest sprint s’han completat totes les tasques assignades. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 49 10.8.2. Retro Que ens ha agradat: Completar les funcionalitats tant de l’aplicació mòbil com de la web, assegurant-nos que la versió final reflecteix les necessitats dels usuaris i incorpori millores clau basades en el seu feedback. Que no ens ha agradat: En aquest sprint no hem tingut cap problema ni aspecte negatiu rellevant a destacar. Que hem de millorar: Tot i haver aconseguit resultats molt positius, podem continuar ajustant petits detalls per garantir que l’experiència d’usuari sigui encara més fluida i consistent. Que farem per millorar: Mantindrem el ritme de treball eficient i detallista que ens ha portat a un producte gairebé definitiu, i farem ús de la retroacció obtinguda per acabar d’optimitzar l’aplicació. 10.9. Desplegament de l’aplicació Un cop finalitzat el desenvolupament de l’aplicació, l’objectiu principal és que persones externes la utilitzin per obtenir múltiples punts de vista. Totes les valoracions i reports dels usuaris es recullen mitjançant una petita enquesta integrada a l’aplicació mòbil. 10.9.1. Usuaris Informats En una primera fase, el desplegament es realitza entre companys de la carrera. Aquesta elecció es basa en el fet que tenen un cert nivell d’expertesa en el món de la informàtica i poden proporcionar opinions rellevants sobre el funcionament lògic i tècnic de l’aplicació. Després de les proves, no es van detectar errors funcionals en el sistema. Tanmateix, els comentaris es van centrar principalment en aspectes relacionats amb la interfície d’usuari (UI). Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 50 10.9.1.1. Primeres retroaccions Mostrem les principals retroaccions que vam utilitzar per a millorar el funcionament de l’aplicació Comentari: ” A la hora de buscar usuario, cuando encuentras a lguien y le das a conversa, estaría bien que se abriese directament el chat y no tener que darle manualmente en la lista. Tema ux/ui yo usaría otra fuente y colores pero ni idea de cómo, alguna fuente más "gaming" ” Report: - Un dels primers comentaris que van rebre de cara a millorar l’app va ser el d’obrir directament el xat quan obris un usuari, cosa que ens va semblar totalment lògica i vam aplicar. També vam acabar modificant uns colors, però més orientats a la concordancia de paleta de tota l’aplicació Comentari: “En los foros, poneis "mostrar", yo pondría algo más claro como ver respuestas o así. Estaría bien poder borrar posts en lugar de ajustaments yo pondría perfil y con un emoji del tipo contacto, y en home pondría inici. Para traducirlo lo he puesto antes es lo de diferentes botones en castellano / catalán, simplemente actualizar y ya” Report: - En aquest comentari vam coincidir utilitzar el nom de perfil en comptes d’ajustaments a la barra de navegació inferior. Com també vam intercanviar inici en comptes de “home”. Comentari: “En la pestaña de favoritos, si un juego tiene el nombre muy largo se me va por el lado (GTA IV The Lost and damned se me corta en the lost) en la pestaña favoritos arriba izq y derecha tenéis dos logos iguales pero diferente tamaño, a la hora de dar like / dislike en los foros, a la mínima que no le des justo se te abre el post ” Report: - Vam coincidir en la necessitat de tractas textos llargs, doncs ho vam aplicar de cara a la responsivitat de l’aplicació en concret favorits. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 51 10.9.2. Usuaris Desinformats En una segona fase, es fa un desplegament general dirigit a un públic més ampli, amb l’objectiu d’obtenir una diversitat de comentaris i opinions, incloent-hi perspectives d’usuaris sense coneixements tècnics específics. Després d’aquestes proves, tampoc es van detectar errors funcionals. Els comentaris van continuar centrant-se en la UI de l’aplicació, evidenciant la necessitat de millorar alguns aspectes visuals i d’experiència d’usuari. Els comentaris rebuts durant les fases de proves, tant amb usuaris informats com desinformats, han estat clau per a identificar millores en l'escalabilitat i usabilitat de l’aplicació. Aquests comentaris no sols han destacat aspectes visuals i d'experiència d'usuari, sinó que també han proporcionat un marc per a futures implementacions. 10.9.2.1. Últimes retroaccions Les retroaccions d’usuaris desinformats van ser majoritàriament bones però també es van servir per a donar últims retocs a l’aplicació Comentari: molt bona, 5/5 Report: “La api no tiene mucha calidad de imagen, no está el warframe” Aquest usuari va considerar l’aplicació bona, però no va quedar content amb l’API, ja que no va trobar la versió dels jocs que volia. Revisant la documentació d’IGDB i vam trobar una manera de millorar la qualitat de les imatges. Comentari: Sense comentari Report: “El botón de atrás del móvil me juega malas pasadas por qué muchas veces para salir de una sección, deslogueo. Estaría bien que cuando estés un una "pantalla" final y le des atrás, te aparezca una ventana avisando que vas a salir de la app o vas a ir al login.” Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 52 Aquest report ens va ajudar a veure la necessitat d’aplicar un diàleg per a evitar sortir de l’aplicació amb els botons del mòbil. Com estàvem acostumats a treballar en ordinador va ser un cas que no vam tenir en compte, una vegada llegit el comentari ho vam solucionar. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 53 11. Disseny inicial de l’aplicació El disseny de GameApp s'ha realitzat tenint en compte la simplicitat i l'accessibilitat per a l'usuari. L'aplicació consta de diverses pantalles que cobreixen totes les necessitats de l'usuari, com l'accés a la informació dels videojocs, la creació i gestió de fòrums, així com el sistema de missatgeria i configuració de preferències. A continuació es descriuen les pantalles principals de l'aplicació. 11.1. Pantalla d’inici de sessió Aquesta és la pantalla inicial que veu l'usuari quan obre l'aplicació. El disseny és senzill, intuïtiu i funcional, destacant el logo de l’aplicació a la part superior de la pantalla, proporcionant així un reconeixement visual immediat de la marca. La pantalla compta amb dos camps de text on l'usuari pot introduir el seu nom d'usuari i contrasenya. A més, es proporciona una opció per iniciar sessió de manera ràpida i còmoda mitjançant Google, la qual cosa facilita l'accés sense necessitat d'introduir novament les credencials si l'usuari ja té un compte vinculat. També s'ofereixen enllaços clars i ben visibles perquè l'usuari pugui crear un compte nou si encara no està registrat a l'aplicació. Els botons per a iniciar sessió i registrar-se estan destacats per garantir una experiència d'usuari fluida i sense complicacions. Figura 2: Pantalla d'inici de sessió Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 54 11.2. Pantalla de registre Aquesta pantalla es presenta quan l'usuari selecciona l'opció de crear un compte nou des de la pantalla d’inici de sessió. El seu disseny és molt similar al de la pantalla d'inici de sessió, però inclou un camp addicional per a introduir l'adreça de correu electrònic, a més dels camps per al nom d'usuari i la contrasenya. Un element destacable en aquesta pantalla és que, a la part inferior, es proporciona un text que permet accedir a la pantalla d'inici de sessió en cas que l'usuari ja tingui un compte creat. Això permet redirigir fàcilment aquells usuaris que van accedir a la pantalla de registre per error o que ja estan registrats. Els botons i els enllaços estan dissenyats per oferir una experiència d'usuari clara i intuïtiva, assegurant que el procés de creació de comptes sigui senzill. Figura 3: Pantalla de registre Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 61 11.7.1. Crear un fòrum A més, aquesta pantalla inclou un botó per crear un fòrum nou. Quan l'usuari prem aquest botó, apareix un pop-up emergent que permet indicar: ● Títol del fòrum: El tema o assumpte del fòrum que es vol crear. ● Descripció: Un espai per proporcionar més detalls o explicació sobre el tema. Aquest pop-up inclou també dos botons: ● Acceptar: Per confirmar la creació del fòrum. ● Cancel·lar: Per tancar el pop-up sense crear el fòrum. Durant el procés de creació d'un fòrum, el fons de la pantalla no és clicable, de manera similar a la interfície de missatgeria. Això permet centrar l'atenció en el procés de creació del fòrum, evitant clics accidentals a altres parts de la pantalla o la barra de navegació inferior. És important destacar que el fòrum no es registrarà ni es crearà a la base de dades de l'aplicació fins que l'usuari faci clic al botó d'Acceptar. Això garanteix que els fòrums només es crearan de manera definitiva quan l'usuari hagi confirmat tant el títol com la descripció. Si l'usuari decideix fer clic a Cancel·lar, el pop-up es tancarà i la informació introduïda no es guardarà enlloc. Figura 10: Creació de fòrum Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 62 11.8. Pantalla de detall de fòrum A la pantalla de detall del fòrum, el primer element que es mostra és el post principal del fòrum, que conté tota la informació clau sobre el tema en discussió. El fòrum inclou: ● Títol del fòrum, que destaca el tema central. ● Descripció del fòrum, on es presenta el contingut o la qüestió plantejada per l'autor. ● Autor, juntament amb la seva foto de perfil, indicant qui ha creat el fòrum. ● Data de creació del fòrum, que permet saber quan es va iniciar la discussió. A més, obrirà un teclat per permetre a l'usuari escriure la seva resposta al fòrum. Després del post principal, es presenten les respostes dels altres usuaris, en format de llista. Cada resposta inclou: ● El nom de l'usuari que ha respost, acompanyat de la seva imatge de perfil. ● La data en què es va publicar la resposta. ● El contingut de la resposta, amb el text que l'usuari ha escrit com a resposta al fòrum. Aquest disseny proporciona una visió clara i organitzada tant del contingut original del fòrum com de les interaccions i respostes dels altres usuaris, fent més fàcil el seguiment de la conversa i la participació. Figura 11: Detall d'un fòrum Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 63 11.9. Pantalla de perfil A la pantalla de configuració, l'usuari pot accedir i gestionar les seves dades personals i preferències dins de l'aplicació. Aquesta secció està dissenyada per proporcionar un accés fàcil a la informació del perfil i permetre certs ajustos. L'usuari pot veure la seva foto de perfil actual i té l'opció de modificar-la. En clicar sobre la foto, l'usuari podrà pujar una nova imatge des del seu dispositiu. A més, es mostra el nom d'usuari amb la possibilitat de modificar-lo, així com una biografia que l'usuari pot editar i actualitzar per descriure's o compartir informació addicional sobre si mateix. També es presenta informació addicional com el nombre total de jocs favorits que l'usuari ha marcat. Hi ha un botó que permet accedir a una llista detallada dels seus jocs favorits, facilitant la navegació entre ells. A més, l'usuari pot veure un resum de la seva activitat recent, incloent-hi fòrums creats recentment o comentaris fets en fòrums existents, oferint una visió ràpida de la seva participació en la comunitat. A la part inferior de la pantalla, l'usuari troba dues accions clares: un botó per tancar sessió de manera segura i un botó per eliminar el compte. Aquest últim està destacat per indicar la importància de l'acció, ja que un cop eliminat, no es podrà recuperar el compte. La pantalla de configuració està pensada per oferir una experiència de gestió de compte senzilla i intuïtiva, cosa que permet als usuaris controlar la seva presència a l'aplicació i realitzar canvis de manera ràpida. Figura 12. Pantalla de configuració d'usuari Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 64 11.10. Mapa d’interacció El mapa d’interacció mostra de manera visual i estructurada les diferents pantalles de l’aplicació i com es connecten entre elles. Aquesta representació és clau per entendre el flux de navegació i les relacions entre funcionalitats principals, com ara fòrums, missatgeria, perfil d’usuari i exploració de videojocs. Aquest esquema facilita la comprensió de l’experiència de l’usuari (UX) i assegura que totes les interaccions siguin coherents i intuïtives. A més, ajuda a identificar possibles millores en el disseny del flux i assegura una navegació fluida. A continuació, es presenta el mapa d’interacció complet de l’aplicació realitzat a Figma. Figura 13: Mapa interacció aplicació mòbil Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 65 12. Comparativa amb el disseny final 12.1. Pantalla d’inici de sessió Durant el desenvolupament de l’aplicació vam veure que iniciar sessió amb el nom d’usuari podria donar conflictes si un usuari es bloquejat i intenta iniciar sessió amb el nom d’un altre, ja que els noms d’usuari no són únics. Doncs vam decidir iniciar sessió amb el correu i la contrasenya 12.2. Pantalla de perfil En el procés de desenvolupament de l’aplicació, la pantalla de perfil ha experimentat diversos canvis significatius, tant en funcionalitats com en disseny visual. Tot i mantenir certs aspectes del disseny inicial, les modificacions realitzades han millorat la usabilitat i han incorporat noves funcions que responen a les necessitats dels usuaris identificades durant les proves. Funcionalitats mantingudes i millorades ● Canvi de foto de perfil, nom i descripció: El disseny final conserva aquestes funcionalitats essencials del disseny inicial. Això permet als usuaris personalitzar fàcilment el seu perfil. No obstant això, s'han realitzat ajustos visuals perquè aquests elements siguin més intuïtius i estèticament agradables, alineant-se amb el disseny modern de l’aplicació. Canvis en les funcionalitats 1. Jocs favorits i activitat recent: Al disseny inicial, es mostrava informació sobre els jocs favorits i un resum de l'activitat recent (fòrums creats o comentaris realitzats). Al disseny final, aquestes funcionalitats han estat substituïdes per: ○ Selecció del videojoc més jugat: Els usuaris poden escollir el seu videojoc més jugat d'entre els seus favorits, proporcionant un element personalitzat que també pot ser visible per altres usuaris. ○ Retroacció de l’aplicació: S'ha afegit un botó que permet als usuaris fer comentaris o valoracions sobre l'aplicació directament. Aquesta funcionalitat s'ha integrat per facilitar la recollida de retroaccions durant les proves amb usuaris. 2. Botons de tancar sessió i eliminar compte: Al disseny inicial, aquests botons tenien un aspecte funcional però senzill. En el disseny final, s’han modernitzat per adaptarse millor a l’estètica general de l’aplicació, fent-los més atractius visualment i Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 66 assegurant que siguin fàcils d’identificar sense perdre l’enfocament en la seva importància. Valor afegit del disseny final El disseny final no només manté l'essència de la pantalla de perfil, sinó que també reflecteix un enfocament més centrat en l'experiència de l'usuari. Les funcionalitats afegides responen directament a les necessitats dels usuaris detectades durant les proves, millorant la interacció i oferint una experiència més personalitzada. Aquesta evolució és un reflex clar del procés iteratiu seguit durant el desenvolupament del projecte, mostrant la importància d’escoltar la retroacció dels usuaris i adaptar el producte per satisfer millor les seves expectatives. Disseny previ Disseny final Figura 14: Comparació de pantalla de perfil Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 67 12.3. Pantalla de detall de fòrum Durant el procés de desenvolupament de l’aplicació, la pantalla de detall del fòrum ha evolucionat de manera significativa tant en el seu disseny visual com en les seves funcionalitats. Tot i mantenir alguns elements del disseny inicial, el disseny final introdueix millores que ofereixen una experiència d’usuari més moderna, personalitzada i organitzada. Funcionalitats mantingudes i millorades ● Visualització del post principal i dels comentaris: El disseny final manté la presentació del post principal amb informació essencial, com el títol, la descripció, l'autor amb la seva foto de perfil i la data de creació. No obstant això, s’han realitzat ajustos visuals que destaquen el contingut i milloren l’organització de la informació per fer-la més intuïtiva i atractiva. També, s’ha afegit la possibilitat de veure la informació de l’usuari, en fer-hi clic a la imatge de perfil d’aquest ● Respondre al fòrum: El disseny inicial permetia als usuaris respondre al fòrum mitjançant una barra de text fixa. Aquesta funcionalitat s'ha revisat i millorada. Ara, l'opció de respondre es presenta com un text interactiu, que s’aplica tant al post principal com als comentaris dels usuaris. Això ofereix més flexibilitat i simplifica la interfície. Canvis en les funcionalitats 1. Respostes a doble nivell: Una de les funcionalitats més innovadores del disseny final és la possibilitat de respondre no només al post original sinó també als comentaris dels usuaris, creant un sistema de respostes a doble nivell. Això fomenta discussions més estructurades i permet als usuaris interactuar directament amb altres comentaris, millorant la dinàmica de la conversa. 2. Amagar o visualitzar respostes: S’ha afegit una nova funcionalitat que permet als usuaris amagar o visualitzar les respostes a comentaris, oferint un control més gran sobre la visualització del contingut. Aquesta característica ajuda a mantenir la pantalla més organitzada i facilita la navegació, especialment en fòrums amb un gran volum de respostes. 3. Eliminació de la barra de navegació inferior: Per aprofitar millor l’espai disponible, s’ha eliminat la barra de navegació inferior. Això proporciona més espai per mostrar comentaris i respostes, fent la pantalla més neta i funcional. Valor afegit del disseny final Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 68 El disseny final no només millora visualment la pantalla de detall del fòrum, sinó que també introdueix funcionalitats que responen a les necessitats dels usuaris detectades durant les proves. Les respostes a doble nivell i la capacitat d'amagar o visualitzar respostes són exemples clars d’aquest enfocament centrat en l’experiència de l’usuari. A més, l'eliminació de la barra inferior i els ajustos visuals han modernitzat la pantalla, creant una interfície més amigable i organitzada. Disseny previ Disseny final Figura 15: Comparació de pantalles de detall de fòrum Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 69 12.4. Pantalla d’usuari amb restriccions Durant la concepció del disseny inicial no vam plantejar com serien les pantalles amb restriccions, però vam decidir aplicar un disseny senzill i clar, que es repeteix a cada restricció però canviant el nom del tipus d’aquestes. Figura 16: Pantalla d'usuari amb restricció Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 70 12.5. Millores de disseny No totes les pantalles de l’aplicació han experimentat modificacions tan significatives com les analitzades anteriorment. Algunes pantalles han mantingut el seu disseny gairebé intacte, amb canvis lleus per millorar la seva coherència visual i adaptar-les al nou estil general. No obstant això, com es pot veure a continuació, algunes pantalles han sofert transformacions estètiques més destacades per oferir una experiència visualment més moderna i atractiva per als usuaris. Disseny previ Disseny final Figura 17: Comparació de les pantalles de fòrum Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 77 controlar les restriccions temporals dels usuaris, també es crearà un uid (identificador) a la base de dades. ○ No es guarda la contrasenya per qüestions de seguretat de Firebase Figura 21: Codi d'implementació de creació de mapa amb camps d’usuari ○ Un cop l’usuari registrat haurem d’iniciar sessió, l’objectiu era iniciar sessió només amb l’usuari i la contrasenya, però Firebase Authentication només deixa obrir sessió amb el correu i la contrasenya. Doncs iniciem sessió amb aquest dos camps prèviament comprovant que l’usuari no estigui bloquejat Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 78 Figura 22: Codi d’inici amb correu i contrasenya ● Inici amb Google ○ Primer especifiquem quin tipus d'informació desitgem obtenir de l'usuari, com la seva adreça de correu electrònic, el seu nom. Per tenir accés a aquesta informació haurem generat un token prèviament a la consola de Firebase. Figura 23: Codi de petició de credencials de Google ○ Una vegada es polsa l’opció d’inici amb Google s’inicialitza un flux de GoogleSignIn i escollim el compte que vulguem. Una vegada que l'usuari selecciona un compte, el resultat es retorna a través de ActivityResultLauncher. Aquí, utilitzem GoogleSignIn.getSignedInAccountFromIntent() per a obtenir el compte de Google seleccionada. Figura 24: Codi d'implementació d'inici de sessió amb Google Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 79 Figura 25: Codi de selecció de comptes de Google ○ Després que l'usuari selecciona el seu compte de Google i el flux d'autenticació de Google acaba, rebem un objecte que conté informació sobre el compte seleccionat. L'objectiu d'aquest pas és obtenir l'ID Token de Google, que ens permetrà autenticar a l'usuari en Firebase. Figura 26: Codi d’obtenció d’informació de compte seleccionat ○ Un cop tenim l’ID Token convertit en una credencial (AuthCredential), el següent pas és autenticar l'usuari en Firebase utilitzant aquestes credencials. Si l'autenticació és reeixida, l'usuari estarà registrat. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 80 Figura 27: Codi d'autenticació a Firebase ○ Amb aquest tipus de registre guardem a la base de dades les mateixes dades que amb el mètode anterior (nom d’usuari i contrasenya) com ja se destacat anteriorment al ser un inici de sessió amb una compte de Google aquest cop el camp de photoUrl no serà null. Figura 28: Codi de creació d'usuari a la col·lecció de Firebase Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 81 13.4. Implementació de favorits Per a la implementació de Favorits hem implement un codi senzill on un cop entres a qualsevol joc per a mirar la informació pots afegir el joc a la teva pròpia col·lecció de favorits i dins d’aquesta puntuar-lo de amb una o cinc estrelles. Si l’estrella (ja mostrada en el disseny) no está seleccionada s’afegirà una nova subcol·lecció a l’usuari anomenada “favorits“ on es guardarà el títol del joc, la portada i la valoració que hagi fet l’usuari. Si es torna a seleccionar l’estrella, el document afegit amb el joc s’eliminarà de la col·lecció i no sortirà a la pantalla de favorits. Figura 29: Codi de selecció de videojoc favorit Figura 30: Codi de creació de mapa per a la subcol·lecció favorits Un cop seleccionats els jocs favorits en la pantalla homònima es poden veure ordenats en base a la puntuació donada per l’usuari en un llista. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 82 13.5. Implementació de fòrums La funció createForum gestiona la creació d’un nou fòrum dins de Firebase Firestore. Primer, obté l’identificador únic de l’usuari autenticat i verifica si aquest existeix a la col·lecció "users". Si l’usuari és trobat, es crea un objecte que conté les dades del fòrum, com ara l’identificador de l’usuari creador, el títol, la descripció, la data de creació i de modificació, i altres camps relacionats amb les interaccions, com el nombre de comentaris, "likes" i "dislikes". El fòrum s’afegeix a la col·lecció "forums", i si l’operació és exitosa, es torna a carregar la llista de fòrums per a reflectir el nou contingut. Figura 31: Codi de creació de mapa per a la col·lecció de forums La funció addCommentToFirestore permet afegir un nou comentari a un fòrum específic a Firebase Firestore. Per a això, primer obté l’identificador únic de l’usuari autenticat, que actua com a referència de qui ha fet el comentari. A continuació, es crea un objecte que conté la Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 83 informació del comentari, incloent-hi el text del comentari, l’identificador de l’usuari que el fa i la data de modificació. Aquest objecte es guarda dins de la subcol·lecció "comments" del fòrum corresponent, identificat pel seu forumId. Si l’operació és exitosa, es registra un missatge de confirmació, i en cas d’error, es registra un missatge d’error per al seu diagnòstic. Figura 32: Codi de creació de mapa per a la subcol·lecció de comments La funció addReplyToComment permet afegir una resposta a un comentari existent dins d'un fòrum a Firebase Firestore. Primer, s'obté l’identificador únic de l’usuari autenticat i l’identificador del fòrum (forumId) en què es troba el comentari. A continuació, es crea un objecte que conté la informació de la resposta, incloent-hi el text de la resposta, l’identificador de l’usuari que la fa i la data de creació. Aquest objecte es guarda dins de la subcol·lecció "replies", que està associada al comentari corresponent identificat pel seu commentId. Si l’operació es realitza correctament, es registra un missatge de confirmació, mentre que en cas d’error, es registra un missatge per a facilitar el diagnòstic. Aquesta funció permet gestionar respostes dins dels comentaris, afegint un nivell addicional d’interacció en els fòrums. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 84 Figura 33: Codi de creació de mapa per a la subcol·lecció de replies 13.6. Implementació de converses i missatges La funció crearConversa s'encarrega de crear una nova conversa entre l'usuari actual i un altre usuari receptor a Firebase Firestore. En primer lloc, obté l’identificador únic de l’usuari autenticat i el de l’usuari receptor. Aquests identificadors es col·loquen en una llista que s'ordena per assegurar un identificador de conversa únic independent de l'ordre dels participants. A continuació, es comprova si ja existeix una conversa amb aquest identificador dins de la col·lecció "messages". Si la conversa ja existeix, es notifica a l’usuari amb un missatge. Si no existeix, es crea una nova conversa amb els participants guardats en una estructura. Aquesta es guarda com un document a la col·lecció "messages", utilitzant l'identificador únic generat per a la conversa. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 85 Si la creació té èxit, es registra el nou xat i es carreguen les converses actualitzades mitjançant la funció carregarConverses. En cas d'error, es registra un missatge per diagnosticar el problema. Aquesta funció assegura que només es crea una conversa única per a cada parell d'usuaris. Figura 34: Codi de creació d'una conversa La funció sendMessage s’encarrega d’enviar missatges en una conversa específica i emmagatzemar-los a Firebase Firestore. Quan es crida, es crea un objecte amb les dades del missatge i s’afegeix a la subcol·lecció "chat" dins del document corresponent a la conversa (conversationId), que es troba a la col·lecció "messages". Dins aquesta col·lecció es guarden els identificadors únics dels usuaris, el contingut del missatge i la data i hora d’enviament. Aquesta estructura permet gestionar múltiples converses i garantir l’ordenació cronològica dels missatges. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 86 Figura 35: Codi de creació de mapa per a col·lecció messages 13.7. Implementació de perfil de l’usuari Cada usuari té una pantalla de perfil on pot proporcionar la seva pròpia informació complementària i proporcionar la retroacció de l’aplicació. Tant el nom, com la descripció i el joc més jugat es modifiquen fent updates a la base de dades actualitzant els camps corresponents de la col·lecció users. Figura 36: Codi d'actualització de descripció Tant la retroacció, com l’eliminació de compte, com la selecció de joc més jugat es realitzen mitjançant AlertDialog ja que no es necessari fer una altra pantalla per a aquestes seleccions. Per les retroaccions simplement mostren dues preguntes a contestar (o no) i al enviar-les es crea el camp la col·lecció de “feedbacks” a la base de dades amb els camps de comentari i report). Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 93 El cos de la pantalla manté un fons blanc, sobre el qual es desenvolupa l'espai de missatgeria. La finestra de xat s'organitza de manera que cada missatge enviat per l'usuari es mostri amb un color blau, mentre que els missatges rebuts tinguin un to gris suau. A més, es mostren les fotos de perfil dels dos participants en la conversa, proporcionant una visualització personalitzada i familiar, similar a altres plataformes de missatgeria populars. Figura 43: Pantalla de xat web 14.4. Pantalla d’usuaris bloquejats El disseny de la pantalla d’usuaris bloquejats és similar al de la missatgeria directa. La raó per la qual es disposa d’una pantalla específica és perquè, en bloquejar un usuari, aquest no pot tornar a iniciar sessió amb el seu correu o compte. Destacar que aquest és el bloqueig màxim que es pot donar a la nostra aplicació, per tant un usuari no podrà tornar a recuperar la seva informació. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 94 Figura 44: Pantalla d'usuaris bloquejats 14.5. Pantalla de perfil de l'usuari La pantalla de perfil de l'usuari està concebuda com una eina per als administradors, permetent gestionar i, si cal, sancionar els usuaris de l'aplicació. Tot i que en aquesta fase inicial no es va definir una estructura detallada per mostrar informació personal, com ara el nom o la foto de perfil, es va prioritzar el desenvolupament dels botons d'acció que permeten aplicar diferents sancions. Entre les funcionalitats previstes en aquesta pantalla es troben opcions per restringir als usuaris la possibilitat de marcar videojocs com a favorits, participar en fòrums o visualitzar contingut relacionat amb videojocs. També es va incloure l'opció de realitzar un ban definitiu, en casos més greus. Aquestes accions es van dissenyar per assegurar un control efectiu sobre el comportament dels usuaris dins de l'aplicació, oferint als administradors les eines necessàries per mantenir una comunitat segura i organitzada. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 95 Figura 45: Pantalla web de perfil d'un usuari 14.6. Pantalla de missatges reportats Aquesta pantalla està dissenyada per gestionar els missatges reportats pels usuaris, amb l'objectiu de mantenir el fòrum moderat de manera automàtica. No obstant això, aquesta moderació pot no ser completament infal·lible. Els usuaris poden reportar missatges sospitosos o inapropiats, i l’administrador tindrà l’opció d’eliminar-los o acceptar-los. Si un mateix usuari acumula cinc missatges eliminats, queda automàticament bloquejat de manera permanent. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 96 Figura 46: Pantalla web de missatges reportats 14.7. Pantalla de valoracions i reports El disseny d’aquesta pantalla és molt senzill i funcional, ja que el seu principal objectiu és permetre als administradors visualitzar les valoracions dels usuaris i els reports relacionats amb errors de funcionament o incidències similars. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 97 Figura 47: Pantalla web de retroaccions i reports 14.8. Mapa d’interacció Figura 48: Mapa d'interacció web Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 98 15. Comparativa amb el disseny final de l’aplicació web El disseny de la web s'ha realitzat tenint en compte la simplicitat i l'accessibilitat per als administradors. La web consta de diverses pantalles, cadascuna accessible des del menú de navegació, amb l’excepció de la pantalla d’inici de sessió. Cada pantalla està pensada per cobrir una necessitat específica de gestió de l’aplicació mòbil, com ara la moderació de fòrums o la revisió de missatges reportats. Cal destacar que la web és exclusiva per als administradors, els quals són identificats i autenticats amb un rol d’administrador definit a la base de dades. Garantint que només persones autoritzades puguin accedir a les funcionalitats de gestió. Per al desenvolupament del disseny web s’ha utilitzat Bootstrap, una eina que ofereix una gran flexibilitat i facilita la creació de dissenys intuïtius i coherents. Assegura un experiència d’usuari funcional i agradable per als administradors. A continuació es descriuen les pantalles principals de l'aplicació. 15.1. Pantalla d’usuaris Aquesta és la pantalla principal que l’administrador visualitza després d’iniciar sessió, permetent gestionar els usuaris de manera senzilla. Ofereix funcionalitats per cercar usuaris pel nom i navegar fàcilment entre pàgines indexades. Aquest disseny és diferent del plantejament inicial, ja que es va optar per eliminar el botó de restriccions de la barra de navegació superior i integrar les funcions de control dins d’aquesta vista principal, millorant la usabilitat. L’administrador pot accedir a diverses accions per a cada usuari: ● Visualitzar tota la informació de l’usuari, com la descripció, el joc favorit i la foto de perfil, a través del botó lila. ● Obrir un xat interactiu amb l’usuari seleccionat, a través del botó verd. ● Consultar els favorits de l’usuari, a través del botó groc. ● Aplicar restriccions temporals a funcionalitats com la visualització de jocs, favorits i fòrums, a través del botó blau. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 99 ● Bloquejar completament un usuari amb la funció de “permaban”, assegurant la gestió d’usuaris que incompleixin les normes, a través del botó vermell. Figura 49: Pantalla web d'usuaris final 15.2. Millores de disseny No totes les pantalles de l’aplicació web han experimentat modificacions tan significatives. Algunes pantalles han mantingut el seu disseny gairebé intacte, amb canvis lleus per millorar la seva coherència visual i adaptar-les al nou estil general, per exemple, la pantalla d’usuaris bloquejats té un disseny semblant a l’original amb l’única diferència que també mostrem el correu bloquejat, destacar que vam plantejar la funcionalitat de desbloqueig però es requeria un pla de pagament a Firebase i es va descartar la idea. No obstant això, com es pot veure a continuació, algunes pantalles han sofert transformacions estètiques més destacades per oferir una experiència visualment més moderna i atractiva per als administradors. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 100 Figura 50: Pantalla final de xat web Figura 51: Pantalla final de missatges reportats Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 101 Figura 52: Pantalla final de retroaccions Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 102 16. Back-end de l’aplicació web 16.1. Arquitectura general del back-end web El back-end de l’aplicació té com a propòsit gestionar l’aplicació web, tenint control sobre tots els usuaris, amb la possibilitat d’enviar missatges a aquests, veure els seus comentaris i reports, la possibilitat d’aplicar restriccions a usuaris, i gestionar missatges reportats al fòrum. 16.1.1. Tecnologies i eines utilitzades Com a entorn d’execució React/ Node.js, AWS Amplify per a la gestió de serveis al cloud, AWS IAM per a serveis d’autentificació i Firebase com a connexió entre la web i l’aplicació 16.2. Integració amb serveis externs La web obté tota la informació mitjançant la mateixa base de dades de Firebase, per així tenir control. 16.3. Implementació del login La lògica del back-end per al inici de sessió de la web és molt simple amb l’objectiu de que l'administrador pugui iniciar sessió fàcilment, un administrador posarà el seu nom i la seva contrasenya, si aquest nom es troba a la base de dades pero l’usuari no té el camp de rol admin doncs no inicia sessió. Per a iniciar sessió l’usuari ha de tenir el rol d’administrador i escriure la contrasenya “admin”. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 109 16.6. Implementació de missatges reportats El següent codi implementa la funcionalitat de llistar missatges reportats dins de l'aplicació. El funcionament principal consta de: 1. Extracció de missatges reportats: La funció comença accedint a la col·lecció reports, on es guarden tots els informes dels usuaris sobre contingut potencialment inadequat. Mitjançant una consulta, s’obtenen només els missatges que no han estat resolts prèviament. 2. Obtenció dels noms dels usuaris: Per a cada informe, es consulta l’usuari que va realitzar el report per obtenir el seu nom, i l’usuari propietari del missatge reportat per identificar qui va publicar el contingut. En cas que l’usuari no existeixi (per exemple, si el compte ha estat bloquejat), es retorna un valor per defecte com "Usuari no trobat". 3. Obtenció del contingut reportat: A partir de la informació del report, es determina si el contingut reportat és un comentari principal, que s’obté directament el text del comentari des de la col·lecció ‘comments’ del fòrum corresponent. O si és una resposta a un comentari, que en aquest cas, es recupera tant el contingut de la resposta reportada com el text del comentari original al qual es va respondre. Per tal de proporcionar més context a l’administrador sobre la situació. 4. Construcció de la llista final: Es crea una llista d’informes enriquida, que inclou la informació de l’usuari que ha reportat, la informació de l’usuari propietari del missatge i el contingut reportat. Aquest sistema permet que l’administrador tingui accés a tota la informació necessària per gestionar adequadament els informes. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 110 Figura 60: Codi d'implementació de missatges reportats 16.7. Implementació de retroaccions L’objectiu de l’implementació es mostrar les retroaccions per usuari, doncs, de la col·lecció de feedbacks. Organitzem l’informació obtinguda en un objecte userFeedbackMap on cada clau és l'ID d'un usuari i el valor és un objecte que inclou l'ID de l'usuari i una llista de comentaris i informes associats. Això permet agrupar els comentaris per usuari. Un cop agrupats els comentaris, el codi recorre les claus de userFeedbackMap (els IDs dels usuaris) i, per a cada usuari, consulta la col·lecció users per obtenir informació addicional, com el nom de l'usuari. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 111 Figura 61: Codi d'implementació de retroaccions 16.8. Rutes de l’aplicació web La taula següent resumeix les rutes disponibles a l'aplicació web, indicant el component que es renderitza per a cada ruta i una descripció de la seva funcionalitat principal. Aquestes rutes defineixen la navegació dins l'aplicació, permetent accedir a diferents funcionalitats, com la gestió d'usuaris, el xat, la visualització d'usuaris bloquejats o missatges reportats, i les valoracions o informes generats pels usuaris. Rutes Component renderitzat Descripció / Login Pàgina d’inici de sessió /all-users AllUsers Mostra tots els usuaris /all-users/chat Chat Interfície per al xat amb el usuaris /banned-users BannedUsers Mostra tots els usuaris permanentment banejats, amb la possibilitat de treure el càstig /reported-messages ReportMessage Mostra tots els missatges reportats a l’administrador /feedback Feedback Mostra totes les valoracions i reports fets pels usuaris Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 112 17. Conclusions El desenvolupament d’aquest projecte ens ha permès posar en pràctica metodologies àgils, com Kanban, i utilitzar eines col·laboratives com Trello i GitHub, que han estat fonamentals per a l’organització i el seguiment eficient de les tasques. Aquest enfocament ens ha permès realitzar un desenvolupament en equip, tot i ser un projecte dut a terme per dos membres, garantint una bona coordinació i una comunicació constant que han facilitat l’assoliment dels objectius. Un dels aspectes més enriquidors del projecte ha estat la diversitat de coneixements inicials dels membres de l’equip. En Daniel dominava Android Studio i Google Cloud, mentre que l’Àlex comptava amb experiència prèvia en el desenvolupament web, utilitzant tecnologies com React, Node.js i Firebase. Aquesta complementarietat ens ha permès treballar des de perspectives diferents, però també ha promogut un aprenentatge mutu molt significatiu. En Daniel ha contribuït a l’aprenentatge en la creació d’aplicacions mòbils, mentre que l’Àlex ha compartit coneixements sobre estructuració i desenvolupament de sistemes web. D’aquesta manera, hem aconseguit unificar els nostres punts forts per abordar totes les fases del projecte amb seguretat i confiança. Pel que fa a l’aplicació mòbil, s’han desenvolupat funcionalitats com l’autenticació mitjançant Google, la cerca avançada de videojocs gràcies a la integració de l’API d’IGDB, i la gestió de videojocs favorits. També s’ha implementat un sistema complet de fòrums on els usuaris poden crear discussions, amb la moderació automàtica dels missatges gràcies a l’API de Google Perspective. Per garantir un entorn segur, també s’ha inclòs l’opció de reportar missatges potencialment tòxics, així com una funcionalitat de missatgeria directa entre usuaris que afavoreix la comunicació dins de la plataforma. Finalment, s’ha desenvolupat un perfil personalitzat per a cada usuari. Per altra banda, l’aplicació web s’ha dissenyat per oferir eines efectives per als administradors, amb la finalitat de gestionar l’activitat dels usuaris i mantenir un entorn saludable dins de la plataforma. Els administradors poden accedir a informació detallada dels usuaris, incloent-hi els seus favorits, i aplicar restriccions com limitar l’accés als fòrums, a la cerca de videojocs o a la visualització de favorits. També tenen la capacitat de aplicar bloquejos tant permanents en casos greus com temporals. Una altra funcionalitat destacada és la gestió dels missatges reportats, que permet als administradors revisar contingut Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 113 problemàtic i prendre accions adequades. A més, s’ha inclòs una secció dedicada a recollir les retroaccions dels usuaris que han provat l’aplicació. Amb aquestes funcionalitats, tant l’aplicació mòbil com la web s’han desenvolupat amb un enfocament en la usabilitat, la seguretat i l’escalabilitat. Aquest projecte no només ha complert amb els objectius inicials, sinó que també ha establert una base sòlida per a possibles ampliacions futures. La integració de tecnologies avançades com Firebase i APIs externes ha garantit un rendiment òptim i una experiència d’usuari fluida. Aquest projecte ha estat una experiència satisfactòria que ens ha permès créixer professionalment, integrant coneixements tècnics amb habilitats de col·laboració i gestió de projectes. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 114 18. Agraïments Ja que aquest projecte culmina els nostres estudis d’enginyeria informàtica, volíem expressar el nostre més sincer agraïment al nostre director Alejandro Ríos per la seva dedicació, excel·lent guia i suport durant la realització d’aquest treball. El seu ensenyament, marcat per una professionalitat, claredat i amabilitat ha sigut clau tant en la nostra formació com en el desenvolupament del projecte. Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 115 19. Bibliografia [1] Stack Overflow. Can’t get cover URL from IGDB API [en línia]. [s.l.]: Stack Overflow, 2024 [Consulta: 8 octubre 2024]. Disponible a: https://stackoverflow.com/questions/78451555/cant-get-cover-url-from-igdb-ap [2] Albertazzi Dylan. Your First Web App in AWS [en línia]. [s.l]: Youtube, 2022 [Consulta: 16 octubre 2024]. Disponible a: https://www.youtube.com/watch?v=Xdx3t1HkJLY&ab_channel=DylanAlbertazzi [3] Traub Dennis. Install the AWS CLI on Windows [en línia]. [s.l]: Youtube, 2022 [Consulta: 16 octubre 2024]. Disponible a: https://www.youtube.com/watch?v=11aYe_VWMg0&ab_channel=DennisTraub [4] MDBootsrap. Chat [en línia]. 2023 [Consulta: 1 novembre 2024]. Disponible a: https://mdbootstrap.com/docs/standard/extended/chat/ [5] W3Schools. How to create a responsive top navigation menu [en línia]. [s.l.]: W3Schools, [s.d.] [Consulta: 2 novembre 2024]. Disponible a: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp [6] Kachhadiya Chirag. Android Chat App Development | Tutorial #8 | Chat Data Preparation & ChatAdapter [en línia]. [s.l]: Youtube, 2022 [Consulta: 12 novembre 2024]. Disponible a: https://www.youtube.com/watch?v=pAzby-pyStM&t=1220s&ab_channel=ChiragKachhadiya [7] Kachhadiya Chirag. Android Chat App Development | Tutorial #9 | Realtime Chat Implementation [en línia]. [s.l]: Youtube, 2022 [Consulta: 12 novembre 2024]. Disponible a: https://www.youtube.com/watch?v=EnyJsp5bMzs&ab_channel=ChiragKachhadiya [8] Stack Overflow. Maintaining correct aspect ratio for windowBackground on Android Splash Activity [en línia]. [s.l.]: Stack Overflow, 2020 [Consulta: 17 novembre 2024]. Disponible a: https://stackoverflow.com/questions/56925843/maintaining-correct-aspect-ratio-forwindowbackground-on-android-splash-activity Desenvolupament d’una aplicació mòbil "GameApp" Daniel Mariño Moreno i Àlex Pascual Batet 116 20. Referències [1] Android Studio. Documentació de Android Studio [en línea]. [s.l.]: Google, [s.d.] [Consulta: 10 setembre 2024]. Disponible a: https://developer.android.com/studio?hl=es-419 [2] Visual Studio Code. Documentació de Visual Studio Code [en línea]. [s.l.]: Microsoft, [s.d.] [Consulta: 10 setembre 2024]. Disponible a: https://code.visualstudio.com/ [3] Node.js. Documentació de Node.js [en línea]. [s.l.]: Node.js, [s.d.] [Consulta: 27 setembre 2024]. Disponible a: https://nodejs.org/en/ [4] IGDB. Documentació de IGDB API [en línea]. [s.l.]: IGDB, [s.d.] [Consulta: 27 setembre 2024]. Disponible a: https://api-docs.igdb.com/ [5] Postman. Documentació de Postman [en línea]. [s.l.]: Postman, [s.d.] [Consulta: 27 setembre 2024]. Disponible a: https://www.postman.com/ [6] Perspective. Documentació de Perspective API [en línea]. [s.l.]: Perspective , [s.d.] [Consulta: 15 octubre 2024]. Disponible a: https://developers.perspectiveapi.com/s/docs?language=en_US [7] Bootstrap. Documentació de Bootstrap [en línea]. [s.l.]: Bootstrap, [s.d.] [Consulta: 20 octubre 2024]. Disponible a: https://getbootstrap.com/docs/5.3/getting-started/introduction/ [8] Flowbite. Documentació de Flowbite [en línea]. [s.l.]: Flowbite, [s.d.] [Consulta: 20 octubre 2024]. Disponible a: https://flowbite.com/ [9] Imgur. Documentació de ImgurAPI [en línea]. [s.l.]: Imgur, [s.d.] [Consulta: 20 octubre 2024]. Disponible a: https://apidocs.imgur.com/