Procés d’ideació i possible aplicació del projecte

El projecte Camina i fes UNLOCK! s’ha concebut com una aplicació que transforma l’acció quotidiana de caminar en una experiència de descobriment visual progressiu. La idea principal és que l’usuari desbloquegi contingut sense haver d’interactuar constantment amb el dispositiu, fent de l’app una experiència pràcticament effort-free.

Durant la fase d’ideació, un dels primers problemes va ser definir un concepte prou senzill però amb projecció futura. Inicialment es van considerar idees més complexes, però es va optar per una mecànica clara i escalable. Aquesta decisió va permetre mantenir la demo acotada i funcional, però alhora obrir la porta a un possible ús turístic, on ciutats o pobles podrien oferir conjunts d’imatges associades a recorreguts concrets, incloent informació històrica o cultural.

Funcionament de la demo actual

La demo implementa el comportament de l’app amb 5 imatges, suficients per entendre el funcionament general del sistema. Les imatges utilitzades són fotografies pròpies realitzades entre 2010 i 2013, fet que aporta coherència i control total sobre el contingut visual.

Un dels problemes detectats en aquesta fase va ser com representar visualment el progrés sense recórrer només a números o barres clàssiques. La solució va ser utilitzar el canvas per mostrar una imatge pixelada que es va revelant progressivament, convertint el progrés en una experiència visual clara i intuïtiva. Això va permetre reforçar la idea de “desbloqueig” i fer el procés més atractiu.

Canvas i representació del progrés

El canvas és l’element central de l’aplicació. Cada imatge comença mostrant-se pixelada i es va revelant mitjançant tiles segons el percentatge de progrés assolit. El càlcul es basa en una relació directa entre distància recorreguda i metres necessaris per completar la imatge:

const progress = distanceMeters / METERS_TO_UNLOCK;

const tilesToShow = Math.floor(progress * totalTiles);

Durant el desenvolupament d’aquesta part va aparèixer el problema de gestionar l’estat visual sense sobrecarregar l’emmagatzematge. Inicialment es va plantejar guardar l’estat de cada tile, però això complicava el sistema. Finalment, es va optar per recalcular el nombre de tiles visibles a partir del percentatge global, simplificant el codi i millorant el rendiment.

Controls, navegació i mode DEMO

L’aplicació inclou diversos controls: START per iniciar el repte, SEGÜENT per seleccionar quina imatge es vol desbloquejar i RESET per reiniciar completament la demo. També s’ha incorporat un mode DEMO que permet avançar manualment el progrés.

Un problema clau en aquesta fase va ser com provar correctament l’app sense disposar d’un dispositiu Android físic. La solució va ser implementar el mode DEMO, que permet simular l’avanç de metres dins l’emulador d’Android Studio. Aquest sistema ha estat essencial per validar animacions, lògica de progrés i navegació sense dependre del GPS real.

Dins dels settings, apart del mode DEMO, trobem també un “mode NIT”, un on/off per la vibració, i un selector per la mida dels TILES. Totes aquestes opcions són per a que l’usuari pugui adaptar l’app a les seves necessitats.

Galeria i visualització d’imatges desbloquejades

Les imatges completades es poden consultar des d’una galeria integrada. Quan una imatge està desbloquejada, s’obre en un visor net amb opcions de zoom per examinar-la amb més detall.

Durant el desenvolupament de la galeria va sorgir un problema important: les animacions de desbloqueig apareixien també quan s’obrien imatges ja desbloquejades. Això generava confusió visual. La solució va ser separar clarament l’estat de “desbloqueig en curs” de l’estat de “visualització”, assegurant que les animacions només apareguin durant el moment exacte del desbloqueig.

Proves i entorn de test

Atès que no s’ha disposat de cap smartphone o tablet Android físic, totes les proves s’han realitzat amb Android Studio mitjançant emuladors. Aquest procés ha permès testejar l’app diverses vegades i ajustar tant la interfície com el comportament intern.

Un problema recurrent en aquesta fase va ser la configuració inicial del projecte Android i la gestió de fitxers generats automàticament. Es van produir errors d’importació a Android Studio fins que es va entendre quins fitxers havien de formar part del codi font i quins no. La resolució va consistir a eliminar caches i fitxers locals (com .gradle, build o local.properties) i verificar que el projecte es pogués reconstruir correctament amb les comandes estàndard.

Les proves finals s’han realitzat amb Android Studio am bels següents perfils:

• Tablet Pixel (API 35)
• Pixel 9 Pro XL (API 36)
• Medium Phone (API 36.1)

Resultat final i aprenentatges

El resultat final és una aplicació Android funcional i estable, amb una experiència d’usuari clara i coherent amb el concepte inicial. Camina i fes UNLOCK! demostra com una idea senzilla pot convertir-se en una experiència rica mitjançant una bona representació visual i l’ús adequat de funcionalitats natives.

A nivell d’aprenentatge, el projecte ha posat en evidència la importància del testing iteratiu, la resolució progressiva de problemes i la necessitat de preparar correctament un projecte perquè sigui executable en entorns nets. També ha servit per entendre el potencial de Capacitor com a eina per portar aplicacions web a l’àmbit mòbil.

ENLLAÇ A GITHUB: https://github.com/JosepMSole/camina-i-fes-unlock

Introducció i objectiu de l’App

L’objectiu d’aquest projecte ha estat desenvolupar una App interactiva basada en un puzle de peces mòbils que permet a l’usuari carregar una imatge des de la càmera o la galeria del dispositiu. L’App transforma aquesta imatge en un trencaclosques i ofereix opcions de configuració per ajustar-ne la dificultat (mida del puzle).

Procés d’ideació de l’App

Des de l’inici tenia clar que volia crear una App lúdica i senzilla, però tenia dubtes sobre quines funcionalitats natives del mòbil volia incorporar. Finalment, vaig decidir experimentar amb la càmera i, a partir d’aquí, em va sorgir la idea de desenvolupar un joc de puzle utilitzant una imatge triada per l’usuari.
Com que aquesta App tindrà continuïtat a la Pràctica 2, he creat una estructura inicial senzilla amb la previsió d’ampliar-la i evolucionar-la en la pròxima entrega.

En el menú opcions ofereix la possibilitat de triar la mida del puzzle. Es permet triar 2×2,3×3,4×4, 5×5,6×6. L’opció escollida es guarda en localStorage per redimensionar la graella del puzzle.

Consultes externes

Durant el desenvolupament vaig realitzar consultes externes per resoldre dubtes tècnics i generar proves ràpides. Principalment, vaig utilitzar ChatGPT com a suport per:

• Detectar errors en la gestió del DOM amb p5 i millorar l’estructura del codi i l’organització de funcions.
• Consultar exemples de projectes similars i fragments d’algorismes per assegurar-me que seguia una lògica correcta.

Documentació de Capacitor rellevant per a l’App

Per integrar funcionalitats natives, he utilitzat Capacitor. Les parts més rellevants han estat:

• Camera API: per obtenir imatges del dispositiu. A través de Camera.getPhoto() amb resultType: Uri vaig recuperar la ruta webPath que posteriorment es carrega a p5 amb loadImage().
  Per fer us de la càmera cal modificar el AndroidManifest.xml. Aconcretament, s’ha d’afegir aquest codi dins manifest > application > provider.

<intent-filter>
<action android:name="com.google.android.gms.metadata.MODULE_DEPENDENCIES" />
</intent-filter>
<meta-data android:name="photopicker_activity:0:required" android:value="" />

A l’apartat de permisos també cal afegir:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

En el codi, cal instal·lar les dependències necessàries:

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Haptics, ImpactStyle } from '@capacitor/haptics';

I executar les següents ordres:

npm install @capacitor/camera
npm install @capacitor/haptics

• Haptics API: he aprofitat l’exemple del tutorial Pomodoro per afegir feedback a la interacció. Cada moviment vàlid de peça activa un impact lleuger i, en completar el puzle, una vibració curta.

import { Haptics, ImpactStyle } from '@capacitor/haptics';

Amb la següent ordre:

npm install @capacitor/haptics

Esbossos i captures

Principals proves i millores

Les principals proves i millores han estat les següents:

• Ajust del canvas a la pantalla per garantir una experiència coherent en diferents dispositius.
• Tractament de la imatge: inicialment, la imatge es deformava; es va solucionar aplicant un retall quadrat centrat (cropToSquare) abans de redimensionar-la al canvas.
• Barreja del puzle: per evitar combinacions impossibles, es va implementar una barreja basada en moviments vàlids a partir de la configuració inicial resolta.
• Experiència d’usuari: es va incorporar feedback hàptic en cada moviment i també quan es completa el puzle.

Problemes trobats

Durant el desenvolupament, els principals problemes trobats han estat:

• Gestió de l’estat: com detectar quan hi ha una imatge carregada i com canviar correctament la vista.
• Tractament d’imatges amb formats diferents: solucionat amb un retall quadrat centrat i el redimensionament posterior.Assegurar que la barreja del puzle fos resoluble: solucionat mitjançant una barreja basada en moviments vàlids.

A més, prèviament vaig tenir un problema amb el Virtual Device Manager d’Android Studio. En intentar iniciar l’emulador Medium Phone API 36.1 des del Virtual Device Manager, apareixia un error que impedia l’execució.

Tot i que utilitzo Ubuntu 24.04.3 LTS, també vaig provar d’executar-lo en Windows i el problema es mantenia. Per resoldre aquesta incidència, vaig utilitzar especialment ChatGPT com a suport.
Finalment, vaig entendre que aquest error indicava que l’emulador no podia utilitzar l’acceleració per maquinari (KVM) perquè el dispositiu /dev/kvm no existia. Aquesta situació acostuma a produir-se per diversos motius, però en el meu cas la causa era que la virtualització (VT-x/AMD-V) estava desactivada a la BIOS.

Procés d’ideació de l’aplicació

Per a la realització d’aquest repte era necessari concebre una aplicació mòbil que fes ús d’alguna funcionalitat nativa del dispositiu mòbil. Des del principi tenia clar que volia desenvolupar una aplicació de caràcter lúdic, ja que és un tipus de projecte que permet experimentar tant amb la interacció com amb la part visual.

Com a referència inicial, em vaig inspirar en jocs clàssics d’arcade com Galaxian o Arkanoid, especialment pel que fa a la simplicitat mecànica i al’ús de moviment com a element central del joc. A partir d’aquí vaig decidir aprofitar el giroscopi del mòbil per controlar el moviment del personatge, fent que aquest es desplaci lateralment segons la inclinació del dispositiu.

La idea final es concreta en un joc on cauen objectes des de la part superior de la pantalla, i el jugador ha d’esquivar-los movent el mòbil de costat a costat, simulant un efecte de gravetat.

Procés de desenvolupament i adaptació del tutorial base

El punt de partida del projecte va ser el tutorial base proporcionat per l’assignatura, que explicava com crear una aplicació senzilla amb Capacitor, p5.js i accés a les funcionalitats natives del dispositiu.

A partir d’aquesta base, el projecte va evolucionar progressivament mitjançant la integració d’un canvas a pantalla completa, la implementació d’un sistema de joc i l’ús de les funcionalitats natives.

Durant el desenvolupament es van resoldre diversos problemes tècnics, especialment relacionats amb errors d’instal·lació d’Android Studio, configuració de dependències i execució de l’app en dispositius reals.

Tot aquest procés va permetre entendre millor com Capacitor actua com a pont entre el codi JavaScript i les funcionalitats natives del sistema operatiu.

Ús de funcionalitats natives del dispositiu

L’aplicació, mitjançant Capacitor, fa ús dels sensors d’orientació (Motion API) que detencten la inclinació del dispositiu i permeten controlar el moviment lateral del personatge dins del joc.

També es va fer servir la pantalla sempre activa (Keep Awake) utilitzant un plugin de Capacitor per evitar que la pantalla s’apagui durant la partida. I, finalment, l’emmagatzematge local mitjançant l’API Preferences que es fa servir per guardar l’informació de l’usuari, puntuació, ranking i personatges desbloquejats. Amb tot aixó s’aconsegueix complir el requisit d’integrar elements natius dins l’aplicació.

Proves, iteracions i millores

Durant el desenvolupament es van realitzar múltiples proves tant en emulador Android com en dispositius reals, ja que algunes funcionalitats (com els sensors) no es poden fer servir en entorns simulats.

Després de les proves es van aplicar millores com l’ajustament de velocitat i acceleració del personatge, regular freqüéncia i velocitat de caiguda de partícules, afegir sistema de Game Over i reinici de partida i, finalment, implementar un sistema de dificultat progressiva.

Presa de decisions i aprenentatges

Una de les decisions més importants va ser simplificar l’abast del projecte, centrant-me en una mecànica clara i funcional, en lloc d’intentar integrar massa funcionalitats natives que podrien complicar el desenvolupament.

També va ser rellevant decidir separar el codi en mòduls (particles, storage, motion), millorant la llegibilitat i el manteniment del projecte.

A nivell d’aprenentatge, aquest projecte ha permès entendre el flux de treball amb Capacitor, el desplegament d’apps en Android, depurar errors natius mitjançant Logcat i integrar sensors del dispositiu en una aplicació.

Ús d’IA generativa com a suport

Durant el desenvolupament del projecte s’ha utilitzat la IA generativa com a eina de suport, principalment:

• ChatGPT: Per resoldre bloquejos tècnics, errors de consola, problemes d’instal·lació i dubtes sobre Capacitor. Els prompts incloïen directament errors i captures de pantalla.
• GitHub Copilot: Integrat a Visual Studio Code per detectar errors de codi.
• Gemini: utilitzat per a la generació d’estils visuals (CSS), ja que la part estètica no era l’objectiu principal de l’assignatura.

L’ús d’aquestes eines ha permès agilitzar el procés i centrar esforços en el disseny i la lògica del joc.

Fonts i recursos utilitzats

• Documentació oficial de Capacitor: https://capacitorjs.com/docs
• p5.js: https://p5js.org/
• Recursos gràfics (robots PNG): https://www.freepik.com/ (ús documentat segons les condicions de llicència)
• IA Generativa: ChatGPT, GitHub Copilot i Gemini.

Conclusions

Aquest projecte ha estat una primera aproximació al desenvolupament d’aplicacions mòbils natives utilitzant tecnologies web. A través de Capacitor, ha estat possible reutilitzar coneixements previs de JavaScript i p5.js per crear una aplicació funcional, interactiva i preparada per créixer en futures iteracions (pràctica 2).

El procés ha posat especial èmfasi en la resolució de problemes, l’experimentacio i l’aprenentatge pràctic, aspectes clau en el desenvolupament d’apps reals.

Vincle a GitHub

Repositori: https://github.com/elecinas/skip-balls

Dispositiu mòbil per les proves

Xiaomi Redmi Note 12