[CAT] Desenvolupament del projecte #1 Desembre - Repte6by6
This article is not yet translated to english
Avís: aquest serà un article bastant tècnic en alguns dels seus punts.
Com vaig detallar en l'anterior article aquest projecte compta amb 3 seccions per la part del client, més el back-end que s'ocupa de gestionar l'emmagatzematge de les imatges i la base de dades.
Per cadascuna de les 3 seccions exposaré quines són les dificultats que m'he trobat en el seu desenvolupament, quines solucions he aplicat i us mostraré el resultat final.
Vista d'Usuari
Dificultats
Una de les primeres dificultats del projecte va aparèixer ben al principi a causa de l'aposta per fer servir la llibreria de components Material-UI. Tot i l'experiència prèvia amb altres frameworks la complexitat de conjugar la generació a buildtime que utilitza Gatsby i l'ús de CSS-in-JS de la llibreria van suposar un petit entrebanc. Per sort la comunitat a Internet és gran i amb l'ajuda d'un exemple vaig poder mantenir l'ús d'aquesta llibreria. Primer aprenentatge que podré utilitza en futurs projectes que requereixin un disseny material.
Les principals dificultats es van centrar al voltant de l'ús de la càmera del mòbil, la manipulació de les imatges capturades i com les dades eren publicades al servidor.
Camera
En els últims anys les capacitats dels navegadors web per accedir a funcionalitats fins abans reservades a les aplicacions natives ha augmentat molt. L'ús de la càmera en dispositius mòbils és un exemple clar. Així doncs si volia que els usuaris poguessin capturar les fotos sense haver de fer primer la foto amb la seva aplicació de càmera calia trobar un component de React que implementès l'API getUserMedia i que incorpores la captura d'imatges del stream.
GrapQL Mutations
Com explicava en l'anterior article volia apostar per un back end basat en GraphQL que gestionés en quasi temps-real les publicacions dels usuaris. Necessitava entendre com funcionen les mutations (equivalen a les operacions POST d'una REST API), ja que fins ara només havia utilitzat el llenguatge GraphQL per a fer queries en buildtime amb Gatsby. També em calia trobar un client per parlar amb el servidor compatible amb React i Gatsby.
Manipulació imatges
En el moment de testejar amb usuaris la primera versió de l'aplicació van aparèixer problemes d'usabilitat i experiència en com es gestionaven les imatges. Per exemple s'oferia l'opció de triar entre la càmera frontal o posterior del mòbil però en alguns dispositius això fallava, ja que no es comprovava que aquest suportes l'API getUserMedia o quines càmeres estaven accessibles des del navegador. Un altre problema apareixia en el moment en què l'usuari feia una foto en format horitzontal, ja que l'orientació no era autocorregida com estem acostumats que facin les apps natives i per tant la foto es mostrava girada en tota l'experiència.
Solucions
Per la implementació de les funcionalitats de càmera em vaig decantar per fer servir el component React-html5-camera-photo, ja que em permetia indicar la resolució màxima de les imatges capturades, alternar entre les dues càmeres dels mòbils i em retornava una imatge en format Base64 que després podia manipular abans de pujar al servidor.
Les operacions entre el client i el servidor són gestionades per Apollo Client, un potent client GraphQL que compta amb una versió per a React que ofereix dos components que implementen les operacions de mutation i query. L'excel·lent documentació del seu web em va permetre implementar les funcionalitats de forma molt fàcil, menys alguna dificultat amb l'execució asíncrona de les funcions de JavaScript vinculades (bàsicament la pujada de la imatge al servei de Cloudinary). La configuració del client també va ser molt senzilla seguint l'exemple d'un dels desenvolupadors principals de Gatsby.
Per acabar, els problemes apareguts durant la fase de testeig van obligar a introduir dues millores que inicialment no havia plantejat. Per una banda la detecció de les càmeres disponibles a través del navegador i l'altre oferir l'opció de rotar les imatges. Després de consultar diferents problemes similars a stackoverflow i blogs vaig implementar-ho com es mostra a continuació.
Resultat
Així és com ha quedat l'apartat destinat als usuaris de l'aplicació adaptat al primer esdeveniment on s'utilitzarà, la Nit de Reines de La Unió Vilanovina.
Vista d'Administrador
Dificultats
La principal dificultat en aquesta secció de l'aplicació ha estat com limitar l'accés només a usuaris autoritzats. Existeixen multitud d'eines per a gestionar la identitat però fins ara no havia hagut d'implementar-ho en cap projecte i per tant era un món desconegut.
Una segona dificultat molt vinculada a la primera és el fet que en tots els projectes en què havia utilitzat Gatsby les pàgines eren sempre generades al servidor i oferides a l'usuari final com a fitxers estàtics. En aquesta ocasió però l'apartat d'administració s'havia de generar directament en el navegador client per a permetre la gestió de l'accés.
Solucions
L'ecosistema que s'està desenvolupant sota el paraigua de JAMStack i específicament entorn d'eines com Gatsby van facilitar molt la resolució de les dificultats. Per a la creació de les pàgines directament a client només calia seguir la documentació del projecte en què s'explica com fer-ho.
Pel que fa a la gestió de la identitat em vaig decantar per fer ús de Netlify Identity. Aquest servei està molt ben integrat amb el core de CI/CD i la CDN que proporciona Netlify i ofereix un pla gratuït per als primers 1000 usuaris, molt per sobre de les necessitats del projecte.
El codi d'aquest exemple és la base utilitzada així com aquest article al blog oficial.
Resultats
Així és com ha quedat l'apartat d'administració.
Vista de Projecció
Dificultats
La vista que serveix per a projectar les imatges que els usuaris publiquen va ser l'última que vaig desenvolupar, ja que a priori semblava la més senzilla. Tot i la seva aparent simplicitat vaig trobar dos entrebancs que van incrementar les hores dedicades.
El primer va lligat al fet que per disseny les publicacions hi haurien d'aparèixer en quasitemps real a la pantalla per oferir una experiència satisfactòria als usuaris. GraphQL i la implementació que en fa Hasura permeten crear el que s'anomena subscriptions però la seva implementació no era senzilla.
La segona dificultat tenia a veure en el mecanisme per mostrar de forma individual les publicacions i fer que les transicions d'una a l'altre fossin atractives. La idea segons el disseny era que funcionés com un passi de diapositives on el text del missatge queda sobreposat a la foto descarregada de Cloudinary. Buscant entre els diferents paquets de slideshows, sliders i carrousels creats amb React cap complia les especificacions ni oferia un resultat satisfactori.
Solucions
La implementació de les subscriptions tot i que senzilla aparentment era bastant complexa. Per sort el mateix component de Query de react-apollo ofereix una opció per tal de forçar que Apollo Client, l'encarregat de gestionar les crides al servidor, repetís la query cada X milisegons. D'aquesta forma el temps màxim que trigaria en aparèixer una publicació a la pantalla seria el temps de refresc que especifiqués.
Si no trobava cap slideshow existent que pogués fer servir hauria de programar-ne un a mida. La lògica per gestionar el bucle sobre les diferents publicacions era bastant simple fent servir setInterval i la gestió del state de React. Un altre assumpte era com animar les transicions. Per sort existeixen llibreries que simplifiquen les animacions per a React i una de les més fàcils d'utilitzar és Pose.
L'últim entrebanc va ser com accedir a les imatges emmagatzemades a Cloudinary i optimitzar-ne l'entrega tenint en compte que es projecten en grans dimensions. Per sort Cloudinary ha creat una sèrie de components en React que simplifiquen aquest procés.
Resultats
Feedback d'ús real
En aquest fil de Twitter podeu llegir algunes dades i conclusions extretes d'analitzar l'ús que va tenir aquest projecte durant la festa de La Nit de Reines el 5 de gener de 2018.
