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

Pomodoro base amb Vite, p5.js i Capacitor

Abans de dissenyar DropApp, vaig seguir un tutorial de Pomodoro Timer per entendre el flux complet entre Vite, p5.js i Capacitor. Vaig crear un projecte amb plantilla vanilla de Vite, afegir p5.js i p5.sound com a scripts clàssics al directori public, i utilitzar el mode instància per evitar conflictes de variables globals.

Captura del navegador amb el primer canvas

A continuació vaig implementar un Pomodoro complet a src/sketch.js: dues fases (25 min treball + 5 min pausa), cercle de progrés, temps gran al centre i botó play/pausa. La targeta vertical centrada millora la llegibilitat i prepara la base visual per DropApp.

​Captura del navegador amb el Pomodoro final

Finalment vaig integrar Capacitor, afegir la plataforma Android, generar el build amb npm run build i copiar-lo amb npx cap copy android. Al Android Studio es va executar en emulador i dispositiu físic, comprovant que el Pomodoro funciona igual que al navegador.

Captura d’Android Studio amb l’emulador mostrant el Pomodoro

Captura del telèfon físic amb el Pomodoro en execució

Ideació de DropApp

Partint del tutorial Pomodoro, vaig adaptar el context cap a una necessitat personal: recordar la pauta de gotes oftalmològiques diàries. DropApp mostra el temps fins a la pròxima dosi amb un cercle animat i botó de confirmació, més una configuració mínima (hores entre dosis + mode fosc).

Esbós de com volia que fos inicialment la pàgina principal

Esbós de com volia que fos inicialment la pàgina de configuració

Desenvolupament i adaptació del tutorial

Un cop el Pomodoro funcionava empaquetat amb Capacitor a Android Studio, vaig adaptar el codi:

• Texts de “treball” → missatges sobre gotes

• Cercle → temps fins a pròxima dosi

• Temporitzador → hores en lloc de minuts

Captura del navegador amb DropApp funcionant 

Captura DropApp a Xiaomi Redmi Note 14 Pro

Vaig afegir un panell de configuració (botó ⚙️) per definir hores entre dosis i activar mode fosc, guardant valors a localStorage.

Panell de configuració obert al navegador

Panell configuració al dispositiu

El logotip dissenyat com “p” + ull + gota es va processar amb Android Studio Image Asset per icones adaptatives.

Logotip original DropApp “p + ull + gota”

Icona de DropApp al launcher del Xiaomi Redmi Note 14 Pro

Integració de funcionalitats natives

Per complir el requisit d’integrar funcionalitats natives s’ha utilitzat el plugin Haptics de Capacitor per generar feedback de vibració quan l’usuari prem el botó “M’he posat les gotes” i quan el temporitzador arriba a zero, moment en què es vol reforçar que toca una nova aplicació del col·liri. A més, s’ha provat el plugin de Local Notifications per mostrar una notificació amb so quan s’esgota el temps, amb l’objectiu que l’usuari rebi l’avís encara que no estigui mirant la pantalla.

​Fragment de codi destacant la crida a Haptics i LocalNotifications 

Per a les funcionalitats natives he emprat el plugin Haptics per generar vibració quan l’usuari marca que s’ha posat les gotes i quan el temporitzador arriba a zero, i he provat Local Notifications per programar avisos amb so encara que l’app estigui en segon pla.

Llanterna + vibració activades quan el temporitzador arriba a zero (Xiaomi Redmi Note 14 Pro)

Durant les proves s’ha detectat que, en el dispositiu Xiaomi utilitzat, la vibració i el so de notificació estan fortament condicionats per la configuració de MIUI i les opcions de seguretat. Tot i que el codi fa les crides correctes als plugins, en alguns casos la vibració és imperceptible o les notificacions queden limitades, fet que es documenta com a limitació del dispositiu i no de la lògica de l’app.

Problemes trobats i solucions

Mirant cap a la PR2

De cara a la PR2 es planteja mantenir DropApp com a eina de recordatori de gotes, peròenriquir-la amb una API externa gratuïta i sense autenticació. Es considera especialment interessant una API de clima o humitat, com ara Open-Meteo, per mostrar a l’usuari dades ambientals relacionades amb la sequedat ocular (temperatura, humitat relativa, vent) i contextualitzar la importància de seguir la pauta de gotes.​

Mockup de com es podria veure

Això permetrà que, a la PR2, DropApp no només recordi quan aplicar la gota, sinó que també ofereixi informació externa rellevant per comprendre millor per què alguns dies els símptomes de sequedat ocular poden ser més intensos.

Referències i eines

• HTML5. Llenguatge de marcat per estructurar la interfície base de l’aplicació híbrida.
• CSS3. Utilitzat per disseny visual, disposició responsive i mode fosc/clar de DropApp.
• JavaScript (ES6+). Llenguatge principal per lògica del temporitzador, gestió d’estats, controls UI i comunicació amb plugins natius.
• p5.js. Llibreria per canvas interactiu, animació gota procedimental (bézier + map()) i cercle progrés (arc()).
  **p5.js Reference. (2025). arc() & bezierVertex(). https://p5js.org/reference**
• Capacitor 6. Framework per empaquetar app web en aplicació mòbil Android, pont entre JavaScript i APIs natius.
  • @capacitor/haptics. Plugin natiu per vibració (ImpactStyle.Heavy) al confirmar gotes i final temporitzador.
  • Capacitor Documentation. (2025). Haptics Plugin API. https://capacitorjs.com/docs/apis/haptics**
    @capacitor/local-notifications. Plugin per notificacions locals amb so quan s’esgota interval de dosis.
  • Ionic Team. (2025). Local Notifications Plugin. https://capacitorjs.com/docs/apis/local-notifications**
    @capawesome/capacitor-torch. Plugin per llanterna (fix + parpelleig) al final temporitzador.
• localStorage. Emmagatzematge persistent per configuració (hores dosis + mode fosc).
• Android Studio. Entorn desenvolupament per compilar APK, executar emulador/dispositiu, analitzar Logcat i generar icones adaptatives amb Image Asset Studio.
• Vite. Build tool per desenvolupament ràpid (HMR) i optimització producció (npm run build).
• Node.js & npm. Gestió dependències i execució comandes Capacitor (npx cap sync android).
• Xiaomi Redmi Note 14 Pro (Android 15). Dispositiu proves principals amb HyperOS/MIUI limitacions documentades.
• Perplexity AI. Assistència IA per ideació mockups PR2 (Open-Meteo API + gràfics humitat).

Bona tarda,

El meu treball s’ha basat en la situació actual en la que es troba Gaza, sense ànim de ofendre a cap persona ni Hamas ni genocidi. E u un principi volia fer algo pretenciós però en mancava temps, era una modificaci amb la bandera palestina como ara això.

Després he sigut més pràctic i he mirat el que demanava el exercici. He carregat una font amb loadfont().

A continuació he declarat i assignat variables per utilitzar les funcions second() minut() hour().

També he he declarat i assignat variable per utilitzar map() per definir límits i direcció.

He utilitzar rect() i triangle() per fer la bandera donat-li color forma i direcció.

I per últim he carregat els segons, minuts i hora amb tex(h) utilitzant la font descarregada he ficat tamanya amb fontSize() i el collor amb fill().

Resultat final.

Espero que us agrada molt bona feina tots els que he vist