20.471 - Desenvolupament d'aplicacions interactives - Aula 1

Públic

Ideació inicial de la nova App

L’objectiu d’aquesta pràctica 2 ha estat donar continuïtat a la feina feta en la pràctica 1 i desenvolupar una app interactiva basada en un puzle de peces mòbils, que permet a l’usuari carregar la imatge amb la qual es jugarà dins del puzle.
A la pràctica 1, l’app permetia escollir entre una imatge feta amb la càmera o una imatge existent a la galeria. A la pràctica 2 mantinc aquestes funcionalitats i n’afegeixo una de nova: obtenir imatges de Picsum per utilitzar-les en el puzle.
També es manté l’opció de mostrar un botó de configuració per escollir la mida del puzle amb què es vol jugar.
Aquests són els esbossos de la pràctica 1 i el resultat final de la pràctica 2.

Consultes i passos seguits a la documentació de Capacitor

Per tal de desenvolupar l’app amb Capacitor i integrar funcionalitats natives, he seguit el procés de consulta i experimentació següent:

• Revisió de la documentació oficial de Capacitor per entendre com funciona la integració amb projectes web.
• Consulta dels plugins oficials i dels seus exemples d’ús.

Especial focus en:

• Camera Plugin: per capturar imatges directament des del dispositiu o carregar-les des de la galeria.
• Haptics Plugin: per afegir feedback tàctil durant la interacció amb el puzle.
• També s’ha considerat com adaptar el codi perquè funcioni correctament dins d’una app híbrida (ús de webPath, càrrega d’imatges amb p5.loadImage, etc.).

Aquestes consultes han permès comprendre com utilitzar les APIs natives des de JavaScript, i com gestionar errors, permisos i diferents comportaments segons el dispositiu.

Proves amb diferents funcionalitats natives del dispositiu

Per a la pràctica, s’han provat funcionalitats natives per donar valor afegit a l’aplicació:

Càmera i galeria (Camera Plugin)

L’usuari pot:

• Fer una foto amb la càmera.
• Seleccionar una imatge de la galeria.

Aquestes imatges es processen i es transformen en un puzle.

Vibració / feedback tàctil (Haptics Plugin)

• Quan el jugador fa un moviment vàlid, l’app fa una vibració lleugera.
• Quan el puzle queda resolt, es mostra un efecte extra (vibració més forta o més llarga).

Aquestes funcionalitats fan que l’experiència sigui més “game-like” i milloren la resposta al tacte.

Proves realitzades:

• Verificar la càrrega correcta de la imatge a p5.js.
• Comprovar el comportament quan l’usuari cancel·la la selecció (sense perdre la partida actual).
• Detectar problemes amb l’orientació/simetria de la foto (amb càmera frontal). Aquest punt queda pendent de resoldre per falta de temps per buscar una solució.

Decisions preses i aprenentatges adquirits

Durant el desenvolupament de l’MVP, he pres diverses decisions tècniques i de disseny:

Decisió 1: API externa → Picsum

S’ha triat Picsum com a API externa per:

• Poder obtenir imatges aleatòries per jugar sense necessitat de tenir fotos personals.
• Tenir una resposta en format JSON amb dades útils (com l’autor).
• Evitar complicacions com l’autenticació o l’ús d’API keys.
• Facilitar la idea d’un joc “rejugable”.

Decisió 2: Mostrar l’autor de la imatge

Quan s’utilitza una imatge de Picsum, es mostra un text sota el puzle amb l’autor. Això aporta:

• Transparència.
• Un toc de “crèdit” visual.
• Millor integració amb el requisit de mostrar dades de l’API dins l’app.

Decisió 3: Afegir una previsualització de la imatge original

Com que el puzle pot ser difícil, s’ha afegit:

• Una icona que permet veure la imatge sencera com a referència. No es tracta de la imatge original completa, sinó d’una secció quadrada de la imatge original. Aquesta imatge retallada és la que utilitzarà el puzle.
• Aquesta funcionalitat millora el gameplay i permet resoldre el puzle amb més facilitat.

Aprenentatges principals

• Les funcionalitats natives en apps híbrides poden tenir comportaments diferents segons el dispositiu (càmera frontal invertida, cancel·lacions, permisos…).
• La UI afecta molt l’experiència: cal ajustar espais, alineacions, overlays i coherència visual.

Esbossos, captures i iteracions que mostrin l’evolució del projecte

Iteració 1: MVP funcional (PR1): puzzle amb imatge local i funcionament bàsic:

Iteració 2: Integració de l’API

• Afegir el botó de Picsum per arregar una imatge aleatòria des del JSON.
• Mostrar l’autor de la imatges
• Afegir un HUD amb:
  • Comptador de moviments.
  • Comptador de temps.
  • Icona de previsualització i overlay per mostrar la imatge utilitzada en el puzzle itenir-la de referència.

Justificació breu: problemes trobats, solucions i conclusions

• Problema 1: l’autor desapareix quan es cancel·la galeria/càmera
  Causa: el text de l’autor s’esborrava abans de confirmar que s’havia carregat una nova imatge.
  Solució: netejar l’autor només quan la càrrega de la nova imatge sigui exitosa.
• Problema 2: puzles que començaven ja resolts
  Causa: el shuffle podia deixar el mateix estat final que el puzle resolt.
  Solució: aplicar una comprovació després del shuffle i repetir-lo fins que el puzle no estigui resolt.
• Problema 3: el temps no s’aturava en resoldre el puzle
  Causa: el valor puzzle.solved no s’actualitzava just en el mateix moment del touchStarted.
  Solució: aturar el cronòmetre des del draw() quan el puzle està resolt.

Citació de totes les fonts utilitzades

Documentació oficial / fonts tècniques:

• Capacitor (documentació oficial): Camera Plugin i Haptics Plugin.
• Recursos sobre CORS i consum d’APIs en aplicacions web.

API externa:

• Lorem Picsum API (endpoint /v2/list i càrrega d’imatges per ID).

He utilitzat ChatGPT com a suport per:

• Depurar errors de l’app.
• Proposar estructures de codi.
• Millorar el CSS i la UX.
• Resoldre conflictes d’overlays i layout.

Vídeo

Per realitzar aquest vídeo he utilitzat un ZTE Blade A51, Android versió 11.