PhotosForFreedom: Portal Solidari per compartició i venta de fotografies

PROJECTE FINAL DE CARRERA Memòria Títol: PhotosForFreedom - Portal Solidari per compartició i venta de fotografies Autor: Víctor Planas Ortega Data: 16 de novembre de 2014 Director: Xavier Burgés Illa Departament del director: Eng. Serveis i Sistemes d'Informació Titulació: Enginyeria Tècnica en Informàtica Sistemes (2003) Centre: Facultat d'Informàtica de Barcelona (FIB) Universitat: Universitat Politècnica de Catalunya (UPC) BarcelonaTech PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 2 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 3 Agraïments Als meus pares Alfons i Isabel pel seu suport incondicional. A la meva germana Laura i a l’Isma, i als petits Jordi i Quim pels somriures que em provoquen. Als amics de tota la vida, per preguntar sempre quan faré el projecte. I, en especial, a la Bea, per fer possible que hagi realitzat aquest projecte amb el seu suport, ajuda i paciència. Gràcies a tots. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 4 0. Índex 1. Introducció .................................................................................................................... 7 1.1. Photosforfreedom ................................................................................................. 7 Motivació i objectius ..................................................................................................... 8 1.2. Estratègia ............................................................................................................... 8 1.3. Planificació i pressupost ....................................................................................... 10 1.4. Consideracions prèvies i estat de l’art ................................................................. 11 2. Anàlisi de requisits ...................................................................................................... 14 2.1. Requisits funcionals ............................................................................................. 14 2.1.1. Entorn públic (Frontend) ............................................................................... 14 2.1.2. Entorn d’usuari registrat (Panell d’usuari) .................................................... 15 2.1.3. Entorn d’administració .................................................................................. 16 2.2. Requisits no funcionals ........................................................................................ 16 2.2.1. Compatibilitat ................................................................................................ 16 2.2.2. Adaptabilitat a dispositius mòbils ................................................................. 17 2.2.3. Flexibilitat ...................................................................................................... 17 2.2.4. Usabilitat ....................................................................................................... 17 2.2.5. Idioma ............................................................................................................ 17 2.2.6. Seguretat ....................................................................................................... 17 2.2.7. Legislació ....................................................................................................... 17 3. Especificació................................................................................................................ 19 3.1. Actors ................................................................................................................... 19 3.2. Diagrama de classes ............................................................................................. 20 3.3. Casos d’ús ............................................................................................................. 21 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 5 3.3.1. Visitant .......................................................................................................... 22 3.3.2. Usuari ............................................................................................................ 24 3.3.3. Administrador ............................................................................................... 29 3.3.4. Sistema de pagament .................................................................................... 32 4. Arquitectura ................................................................................................................ 34 4.1. Disseny ................................................................................................................. 34 4.2. Eines ..................................................................................................................... 35 4.2.1. Llenguatges ................................................................................................... 35 4.2.2. Frameworks ................................................................................................... 36 4.2.3. Servidor ......................................................................................................... 38 4.2.4. Sistema gestor de bases de dades ................................................................ 38 4.2.5. Sistemes de pagament .................................................................................. 39 5. Desenvolupament....................................................................................................... 40 5.1. Eines de desenvolupament .................................................................................. 40 5.2. Estructura del projecte ........................................................................................ 41 5.3. Funcionament ...................................................................................................... 42 5.4. Base de Dades ...................................................................................................... 43 5.5. Gestió de dependències....................................................................................... 46 5.6. Implementació de funcionalitats ......................................................................... 47 5.6.1. Autenticació i permisos ................................................................................. 47 5.6.2. Pujada de fotografies .................................................................................... 48 5.6.3. Mostra de fotografies.................................................................................... 50 5.6.4. Compra de fotografies .................................................................................. 52 5.6.5. Pagament de comandes ................................................................................ 53 5.6.6. Subscripció d’usuaris ..................................................................................... 55 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 6 6. Proves ......................................................................................................................... 57 6.1. Tests funcionals .................................................................................................... 57 6.2. Tests d’interfície d’usuari ..................................................................................... 60 7. Manual d’instal·lació................................................................................................... 61 7.1. Requisits ............................................................................................................... 61 7.2. Instal·lació ............................................................................................................ 61 7.3. Configuració ......................................................................................................... 62 7.4. Inicialització de la Base de Dades ........................................................................ 62 8. Anàlisi de costos econòmics ....................................................................................... 64 8.1. Execució del projecte ........................................................................................... 64 8.2. Costos de publicació ............................................................................................ 65 9. Conclusions ................................................................................................................. 66 10. Futurs desenvolupaments ........................................................................................ 68 11. Referències ............................................................................................................... 70 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 7 1. Introducció Si bé és cert que, degut als últims anys de crisi, les ajudes dels governs als projectes de solidaritat han caigut a nivells massa baixos, és un fet que la solidaritat ciutadana i la consciència popular en vers a l’ajuda dels qui tenen dificultats, ja siguin econòmiques, psíquiques o físiques, s’ha mantingut o s’ha vist lleugerament incrementada. Per això crec que es pertinent presentar iniciatives que potenciïn aquest sentiment i aportin noves maneres de recaptar fons per a totes aquelles persones i entitats que lluiten per un món més just. Amb aquesta motivació, jo i els meus companys vam iniciar, ja fa uns anys, el projecte Photosforfreedom. El present document descriu la creació del portal Web “Photosforfreedom” destinat a l’intercanvi de fotografies amb finalitat solidària. Aquí, s’expliquen les motivacions i objectius del projecte, així com la descripció de les tasques que s’han realitzat per desenvolupar-lo. Finalment es presenten les conclusions a les que he arribat després de la seva realització. Una “demo” del projecte es pot trobar aquí. 1.1. Photosforfreedom Photosforfreedom és una entitat sense ànim de lucre amb seu a Sant Boi de Llobregat (Barcelona), de la que en sóc soci fundador. L’objectiu d’aquesta entitat és unir el món de la fotografia amb el de la cooperació pel desenvolupament i la sensibilització. L’entitat es vol consolidar com una comunitat d’aficionats a la fotografia essent, alhora, una font de fotografies per a totes aquelles persones o entitats que en vulguin adquirir-les a un preu solidari. Els beneficis d’aquesta venda han d’anar destinats a promoure projectes de cooperació o directament a formar part de donatius a diferents ONG. El projecte o ONG on es destinaran els diners obtinguts de cadascuna de les fotos venudes serà decisió del comprador. El logotip i nom de l’entitat intenten reflectir aquesta unió entre la fotografia i la solidaritat. (Il·lustració 1) PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 8 Motivació i objectius Com a soci fundador i primer interessat en el bon funcionament de l’entitat, vaig decidir dedicar el meu projecte final de carrera a dotar Photosforfreedom de les eines necessàries per portar a terme les seves activitats a través d’internet. A més de la meva implicació personal en aquesta entitat, la meva altra motivació és el gran interès que tinc en les tecnologies Web. He volgut aprofitar aquest projecte, començat de zero, per descobrir, aprendre i utilitzar algunes de les últimes tendències en programació Web. L’objectiu del projecte és crear una aplicació Web on usuaris de tot el món puguin cedir les seves fotografies a PhotosForFreedom. Les fotografies recollides entraran a formar part d’una galeria d’imatges que podran ser adquirides per altres usuaris. El preu de l’adquisició és voluntari, a partir d’un preu mínim, i anirà destinat a una ONG o projecte de cooperació que el comprador pot decidir. En el futur, s’espera que Photosforfreedom sigui un aparador per fotògrafs amb inquietuds solidàries i una gran base de dades d’imatges que generin recursos econòmics per ajudar ONG o projectes de cooperació. 1.2. Estratègia Aquest projecte cobreix la versió 1.0 del portal Photosforfreedom. Es definiran les funcionalitats necessàries i les característiques que ha de presentar la primera versió del producte als potencials usuaris. Ha de ser útil, fàcil d’utilitzar i ha de permetre Il·lustració 1 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 9 generar els ingressos necessaris per realitzar innovacions futures i dotar-lo de noves característiques. Per portar a terme aquest projecte s’han seguit les etapes típiques de la enginyeria del software. (Il·lustració 2) Il·lustració 2 L’anàlisi de requisits és el procés d’estudi i definició de les expectatives del client o usuari d’una nova eina o una nova versió d’una eina. Aquests requisits han de ser quantificables, rellevants i detallats. Un anàlisi de requisits concís i estructurat és el millor punt de partida cap a un projecte exitós. És important portar a terme totes les reunions que calgui fins que els requisits són aprovats pel client. Aquest procés ha requerit un seguit de reunions amb els membres de l’entitat Photosforfreedom per decidir què ha de fer l’aplicació i com ho ha de fer. S’han extret els requisits funcionals i no funcionals, que ha de complir el producte a desenvolupar. A continuació ve l’etapa d’especificació on s’ha d’extreure la tota la informació acordada amb el client i descriure el comportament que ha de tenir l’aplicació en les seves funcionalitats. També s’han de definir els actors implicats en el projecte i els tipus de rols i permisos que tindran els diferents actors. La tercera etapa és la d’arquitectura i disseny. En aquesta s’ha de decidir la tecnologia a utilitzar, així com el model de dades a emprar. Amb l’anàlisi de requisits i les especificacions realitzats, s’ha de fer un estudi de les diferents tecnologies de desenvolupament i de les eines ja existents que puguin complir les expectatives del Anàlisi de requisits Especificació Arquitectura Desenvolupament Proves Documentació i Manuals PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 16  Fotografies adquirides: Aquí és on l’usuari pot veure la versió original de les fotos que ha comprat per tal de descarregar-les.  Comandes realitzades: Si l’usuari ha adquirit fotografies es mostra un llistat amb la informació de cada comanda.  Carret de la compra: Quan un usuari compra imatges i vol veure el seu carret, ha d’estar autenticat. Per tant aquesta secció forma part de l’entorn d’usuari registrat. Abans de pagar, se li demana a l’usuari que esculli si vol donar la gran part de la seva compra a una ONG, o projecte de cooperació, o vol fer el donatiu íntegre a Photosforfreedom. També ha de poder augmentar el que paga per una foto, el mínim està marcat per l’entitat, però si l’usuari ho decideix, pot pagar més.  Pagament: Un cop el carret de la compra ha estat validat, complet i s’ha escollit el beneficiari de la compra, l’usuari ha de poder pagar amb targeta de crèdit. 2.1.3. Entorn d’administració  Usuaris: Només els usuaris amb perfil d’administrador han de poder accedir a aquesta secció.  Gestió CRUD: L’usuari administrador ha de poder crear, llegir, modificar i esborrar els diferents recursos de l’aplicació: o Usuaris. o Beneficiaris de les donacions. o Fotografies pujades. o Comandes. o Informació del lloc web (petit CMS – gestor de continguts). 2.2. Requisits no funcionals 2.2.1. Compatibilitat L’aplicació ha de funcionar en les últimes versions dels exploradors d’internet més utilitzats: Google Chrome, Mozilla Firefox, Safari o Internet Explorer. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 17 2.2.2. Adaptabilitat a dispositius mòbils En els últims anys la tendència de l’usuari d’internet és la d’usar, cada cop més, telèfons intel·ligents o tauletes per consultar pàgines i aplicacions Web. És molt important per un projecte com aquest que l’aplicació sigui perfectament visible i utilitzable en aquests dispositius. 2.2.3. Flexibilitat Aquesta és la primera versió de l’aplicació, per tant, ha d’estar preparada pel creixement continu de funcionalitats. 2.2.4. Usabilitat S’ha de tenir en compte que l’aplicació va destinada a usuaris genèrics d’internet sense grans coneixements informàtics. Per tant, ha de ser intuïtiva i auto-explicativa, no hauria de ser necessari un manual d’instruccions per fer-la funcionar. 2.2.5. Idioma Inicialment es presentarà la pàgina en anglès, però ha d’estar preparada per a la seva traducció en tants idiomes com es desitgi en el futur. 2.2.6. Seguretat S’ha de garantir la seguretat en l’accés a les dades dels usuaris i al repositori de fotografies. 2.2.7. Legislació S’ha de complir la legislació vigent:  LOPD: En recollir informació personal de l’usuari (correu electrònic), s’ha de complir la llei de protecció de dades (Llei Orgànica 15/1999). Es tasca de l’entitat donar d’alta el fitxer de dades personals a l’Agència Espanyola de Protecció de dades. Però, en el moment de cessió d’aquestes dades per part de PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 18 l’usuari, se li ha d’informar degudament sobre el registre del fitxer de dades personals de Photosforfreedom, la seva protecció i els drets que té de modificació o baixa.  Llei de cookies: Segons l’article 22 de la LSSI (Llei de Serveis de la Societat de la Informació i del Comerç Electrònic) modificada pel decret-llei 13/2012 cal identificar les cookies que es fan servir en l’aplicació web, ja siguin pròpies o de tercers. En el cas de que sigui necessari, cal informar a l’usuari d’aquestes cookies i demanar el seu consentiment abans d’instal·lar-les.  Drets sobre la propietat intel·lectual de les fotografies: Caldrà informar a l’usuari sobre la cessió de drets a l’hora de pujar fotografies i sobre el llicenciament i drets d’ús a l’hora d’adquirir-ne. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 19 3. Especificació Abans de decidir l’arquitectura de l’aplicació i començar a desenvolupar cal definir i acotar el comportament d’aquesta a partir de l’anàlisi que s’ha fet. Per això, s’han definit els actors involucrats al sistema, les classes que intervenen, en un diagrama de classes, i els casos d’ús de les diferents funcionalitats. 3.1. Actors Es defineixen tres tipus d’actors interns: (Il·lustració 4) Il·lustració 4  Visitant: Totes aquelles persones que visiten l’aplicació sense autenticar-se, siguin o no usuaris registrats.  Usuari: Persona que prèviament s’ha registrat a l’aplicació i s’ha autenticat per utilitzar-la. Pot realitzar totes les funcionalitats del visitant.  Administrador: Usuari amb rol d’administració que s’ha autenticat l’aplicació. Pot realitzar totes les funcionalitats de l’Usuari i del visitant. També s’han de definir actors externs: (Il·lustració 5) Il·lustració 5  Sistema de pagament: Actor extern que validarà els pagaments amb targeta de crèdit PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 20 3.2. Diagrama de classes Les classes utilitzades per conceptualitzar la informació que ha d’utilitzar el sistema i les seves relacions es defineixen en el següent diagrama. (Il·lustració 6)  Usuari: Defineix un usuari registrat a l’aplicació.  Rol: Defineix el tipus d’usuari i les operacions que pot realitzar dins de l’aplicació. Un usuari pot tenir cap, un o més rols.  Foto: Defineix una fotografia emmagatzemada a l’aplicació. Les fotos pertanyen a un autor (Usuari).  Etiqueta: Defineix una cadena de text per classificar fotografies. Una Foto pot tenir cap, una o més etiquetes.  Comanda: Defineix cadascuna de les compres que realitzen els usuaris. Un usuari pot realitzar cap, una o més comandes. Les comandes contenen com a mínim una foto.  Estat Comanda: Defineix l’estat en que es pot trobar una comanda. Les comandes sempre tenen un estat. Il·lustració 6 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 21  Beneficiari: Defineix un receptor dels diners pagats en una comanda. Una comanda va destinada a un sol beneficiari. Els beneficiaris poden ser receptors de cap, una o més comandes. 3.3. Casos d’ús En la següent il·lustració és pot veure el diagrama de les accions que poden realitzar els diferents actors. (Il·lustració 7) Per tal d’estructurar els diferents casos d’ús s’han agrupat segons l’actor que pot realitzar cada acció, només es detallen les que tenen major rellevància. Il·lustració 7 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 22 3.3.1. Visitant Registrar-se Descripció L’usuari facilita les seves dades per crear un nou compte d’usuari. Precondició  L’usuari no ha d’estar autenticat. Flux 1. L’usuari omple un formulari, facilita el nom d’usuari, l’e-mail i escull una contrasenya que ha d’escriure dos cops. 2. Es crea l’usuari desactivat, amb un quota definida per la configuració de l’aplicació i el rol d’usuari comú. 3. S’envia un “token” d’activació a l’e-mail per validar que l’email és correcte. 4. L’usuari rep l’e-mail i activa el seu compte seguint l’enllaç que se li proporciona. Postcondició  S’ha creat i activat l’usuari amb la quota predefinida a la configuració de l’aplicació, i el rol commonUsuer Excepcions  L’usuari no ha omplert les dades suficients.  El nom d’usuari o l’e-mail ja existien.  Les contrasenyes proporcionades no coincideixen.  L’usuari no rep cap e-mail per diferents motius o no activa el seu compte, per tant és un usuari desactivat. Veure Foto Descripció L’usuari demana visualitzar una foto. Precondició  La imatge està completa (té com a mínim un títol). Flux 1. L’usuari selecciona una fotografia de la galeria d’imatges. 2. Se li mostra la fotografia amb una marca d’aigua i informació rellevant sobre aquesta (nom, descripció, autor, etiquetes, cops visitada, cops venuda, informació EXIF). Postcondició  L’usuari visualitza la fotografia i la seva informació. Excepcions  La fotografia no existeix o ha estat esborrada. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 23 Cercar Fotos Descripció L’usuari introdueix una cadena de text per cercar fotos que hi tinguin relació. Precondició - Flux 1. L’usuari introdueix el text. 2. El sistema retorna totes les imatges on l’autor, el nom, la descripció o les etiquetes coincideixen o contenen el text introduït. Aquestes es retornen ordenades per puntuació de coincidència. Postcondició  L’usuari veu una galeria amb les fotografies trobades. O el missatge de no s’han trobat fotografies que compleixin els criteris marcats. Excepcions - Afegir foto al carret Descripció L’usuari selecciona una fotografia per afegir-la al carret de la compra. Precondició  Si l’usuari està autenticat, no pot afegir al carret una foto que hagi pujat ell o ja hagi comprat amb anterioritat. Flux 1. L’usuari selecciona una fotografia de la galeria d’imatges. 2. Demana afegir-la al carret. 3. Es crear un carret amb la foto seleccionada o ’afegeix una línia de compra a un carret ja existent. 4. Se li assigna el preu mínim establert a la línia de compra. Postcondició  El carret de l’usuari té una nova línia de compra amb la imatge seleccionada.  La imatge queda marcada com no comprable per part de l’usuari. Excepcions  La foto no existeix. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 24 3.3.2. Usuari Fer login Descripció L’usuari introdueix el seu nom d’usuari (o e-mail) i la contrasenya per autenticar-se com a usuari. Precondició - Flux 1. L’usuari introdueix el nom d’usuari (o l’e-mail) i la contrasenya. 2. El sistema valida les credencials. 3. És crea una sessió al navegador amb la informació de l’usuari. 4. Es mostren les funcions on l’usuari autenticat té accés. Postcondició  L’usuari està autenticat en aquesta sessió de Navegació web. Excepcions  L’usuari no existeix.  La contrasenya introduïda no coincideix amb la de l’usuari. Comentaris Si no la recorda, l’usuari podrà recuperar una contrasenya perduda mitjançant el seu correu electrònic. Canviar la contrasenya Descripció L’usuari és vol canviar la contrasenya. Precondició  L’usuari ha d’estar autenticat. Flux 1. L’usuari demana canviar la contrasenya. 2. Se li demana la contrasenya antiga i la nova per duplicat. 3. Se li canvia la contrasenya. Postcondició  L’usuari té la nova contrasenya escollida. Excepcions  La contrasenya vella no és correcte.  Error en introduir la nova contrasenya. Les contrasenyes no coincideixen. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 25 Editar el carret Descripció L’usuari pot modificar el carret de la compra per eliminar fotos o canviar el preu. Precondició  L’usuari ha d’estar autenticat.  Hi ha fotos al carret. Flux 1. L’usuari visualitza el carret. 2. Decideix fer un canvi de preu o esborrar una fotografia. 3. Es realitza el canvi en el carret. Postcondició  S’ha desat el carret modificat a la sessió del navegador. Excepcions  El preu de la foto introduït no està dins del rang marcat per la configuració de l’aplicació. Crear comanda Descripció L’usuari dóna per vàlid el carret de la compra, escull una ONG o projecte on donar els diners i crea la comanda. Precondició  L’usuari ha d’estar autenticat.  Hi ha fotos al carret. Flux 1. L’usuari visualitza el carret. 2. Escull una ONG o projecte on fer el donatiu. 3. Es crea la comanda eliminant les fotos que l’usuari hagi pogut comprar en una altra sessió. 4. Es mostra a l’usuari els detalls de la comanda i els mètodes de pagament. Postcondició  S’ha desat una comanda a la base de dades amb l’estat “New” amb les dades del carret i la ONG/projecte escollit. Excepcions  No s’ha escollit cap ONG/projecte.  S’han eliminat totes les fotos de la comanda perquè l’usuari ja les ha comprat en una altra sessió. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 32 Eliminar beneficiari Descripció L’administrador vol eliminar un beneficiari. Precondició  L’usuari ha d’estar autenticat.  L’usuari té rol administrador.  El beneficiari existeix. Flux 1. L’administrador sol·licita eliminar un beneficiari. 2. El beneficiari es marca amb una data de baixa. Postcondició  El beneficiari té una data de baixa igual a l’instant en que s’ha eliminat.  Els compradors no poden fer donacions al beneficiari esborrat. Excepcions - 3.3.4. Sistema de pagament Validar pagament Descripció L’usuari ha introduït les seves dades de pagament i cal que el sistema de pagament les validi. Precondició  S’han introduït dades al sistema de pagament (ja sigui nom d’usuari i contrasenya o targeta de crèdit). Flux 1. El sistema de pagament rep les dades de pagament d’un usuari. 2. Vàlida que les dades siguin correctes i tingui diners suficients. 3. Executa el pagament i informa a Photosforfreedom que el pagament s’ha realitzat correctament. Postcondició  El sistema de Photosforfreedom ha rebut un missatge amb la informació del pagament. Excepcions  Targeta o nom d’usuari i contrasenya no vàlids.  No hi ha fons suficients en el mètode de pagament seleccionat per l’usuari.  Excepcions pròpies del sistema de pagament (està fóra de línia per exemple). PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 33 Cancel·lar subscripció d’un usuari Descripció Un usuari vol cancel·lar la seva subscripció i sol·licita al sistema de pagament que desprogrami el proper pagament. O el sistema de pagament no pot cobrar a l’usuari després de ‘n’ intents i cancel·la la seva subscripció. Precondició  L’usuari que sol·licita la subscripció ha de tenir una subscripció activa.  O el sistema de pagament no ha pogut tramitar el pagament de l’usuari després de ‘n’ intents. Flux 1. El sistema de pagament elimina la programació de pagaments i retorna la data de fi de subscripció. Postcondició  L’usuari té una data de fi de subscripció. A partir d’aquesta data no serà un usuari subscrit. Excepcions  Excepcions pròpies del sistema de pagament (està fóra de línia per exemple). PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 34 4. Arquitectura El projecte a desenvolupar és una aplicació Web. La tendència actual en aquest tipus d’aplicacions és el desenvolupament basat en el patró d’arquitectura MVC (model, vista, controlador). Al mercat, hi ha diferents llenguatges de programació i sistemes gestors de bases de dades que permeten desenvolupar aquesta arquitectura. A continuació es detalla el disseny i les eines escollides per portar-la a terme. 4.1. Disseny Una aplicació web es un sistema basat en un servidor que respon a una sèrie de peticions HTTP (Requests) normalment realitzades per un usuari des d’un navegador Web a través d’internet. L’aplicació, allotjada al servidor, tramita la petició i retorna una resposta (Responses) normalment HTML, tot i que sovint pot respondre fitxers en format d’intercanvi com JSON, XML o altres tipus de fitxers com imatges, documents, fulls d’estil, etc.. El navegador Web de l’usuari interpreta aquestes respostes i les mostra en un format comprensible per l’usuari. (Il·lustració 8) Il·lustració 8 En el nostre cas, l’aplicació web allotjada al servidor està formada per un seguit d’instruccions que gestionen les peticions de l’usuari i realitzen les funcions necessàries (controladors) sobre una representació de les dades allotjades en un sistema gestor de bases de dades (models) i generen la resposta (vista) en el format que convingui per a enviar a l’usuari. (Il·lustració 9) PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 35 Il·lustració 9 4.2. Eines A continuació es defineixen les eines que s’han utilitzat per la construcció d’aquest model de disseny. 4.2.1. Llenguatges 4.2.1.1. Programació de la lògica de negoci i accés a dades Actualment existeixen múltiples llenguatges de programació per gestionar la lògica de negoci i l’accés a dades d’una aplicació i, així, generar pàgines Web per interactuar amb l’usuari: PHP, ASP, JSP, Ruby, Phyton... Alguns són interpretats, com PHP i altres compilats prèviament com JSP. S’ha escollit PHP, que des de la seva versió 5 pot treballar amb la tecnologia orientada a objectes, per la seva gran comunitat d’usuaris i pels coneixements previs que jo tenia d’aquesta tecnologia. És cert, que altres llenguatges com Ruby o .Python estan creixent més en els últims anys i que PHP no és de les tecnologies més eficients, però el projecte que es presenta no requereix un rendiment gaire elevat i el cost d’aprendre un nou llenguatge augmentaria considerablement els temps d’execució d’aquest. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 36 4.2.1.2. Interfície d’usuari En tractar-se d’una aplicació web, és clar que s’usa HTML per comunicar resultats a l’usuari i per a que aquest pugui introduir dades. En aquest cas, s’utilitza l’última versió d’HTML, és a dir HTML5. Per fer més amigable l’ús de l’aplicació es fa servir Javascript. Javascript és un llenguatge d’scripts que s’executa al costat del client, és a dir, en el navegador Web. Aquest permet executar accions sobre una pàgina ja mostrada en el navegador. Aquesta funcionalitat ens permet usar AJAX per realitzar accions sobre un servidor en segon pla i mostrar dades sobre una pàgina ja carregada. Per posicionar i decorar els elements HTML s’utilitza CSS3. CSS3 és el llenguatge de fulls d’estil més utilitzats en tecnologia Web. 4.2.2. Frameworks Un framework és un conjunt de llibreries realitzades en un o més llenguatges que facilita, organitza i accelera el desenvolupament d’una aplicació. Aquest projecte s’ha basat en un framework PHP anomenat Laravel. Hi ha molts altres frameworks de PHP. Alguns dels més coneguts son Zend Framework, Symfony, CakePHP, Yii o CodeIgnitier. S’ha escollit Laravel per ser un dels framework PHP que més popularitat ha guanyat en els últims anys. Té una molt bona documentació i una gran comunitat al darrera. És un framework basat en l’arquitectura MVC, lleuger, sota llicència MIT 2 i amb una corba d’aprenentatge relativament curta si es tenen coneixements de PHP. En el següent gràfic de Google 2 La llicència MIT és una llicència lliure de programari original del Massachusetts Institute of Technology (MIT). Específicament, és compatible amb la GNU General Public license permisiva, entenent que permet la reutilització en programari propietari amb la condició que la llicència sigui distribuïda amb el programa. (Font: Viquipèdia) PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 37 Trends es pot veure l’evolució de l’interès en Laravel respecte els seus principals competidors mitjançant el número de cerques al cercador. ( Il·lustració 10) Il·lustració 10 Per la part de presentació a l’usuari s’utilitza Twitter Bootstrap, un framework que inclou dissenys HTML5, CSS3, tipografies i llibreries Javascript que permeten realitzar la maquetació de pàgines web amb disseny adaptatiu a dispositius mòbils de forma ràpida. Bootstrap també està publicat sota la llicència MIT2. També s’incorpora JQuery, un conjunt de llibreries que simplifica l’ús de Javascript sobre tecnologia HTML amb llicenciament MIT. De fet, Twitter Bootstrap ja utilitza jQuery per definir alguns dels seus components dinàmics. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 38 4.2.3. Servidor El servidor web escollit és Apache, un servidor Web multiplataforma (Unix, Windows i Macintosh) sota llicència Apache 2.0 3 . És un dels servidors web més estesos. Apache requereix d’extensions per ampliar les seves funcionalitats. En aquest projecte, en utilitzar el framework Laravel, calen les extensions PHP>5.4, per a que el servidor sàpiga interpretar aquest llenguatge, i MCrypt PHP, per donar suport a diverses tecnologies de criptografia. 4.2.4. Sistema gestor de bases de dades El framework Laravel és, en certa manera, agnòstic. Això vol dir que és capaç de treballar amb diferents sistemes gestors de bases de dades. En aquest cas MySQL, SQLite, PostgreSQL i Microsoft SQL Server, tot i que es pot ampliar amb algunes llibreries de tercers per suportar altres sistemes com Oracle o fins i tot sistemes NoSQL com Mongodb. Aquest agnosticisme permet, canviar el sistema gestor de bases de dades sense realitzar canvis en els models que accedeixen a les dades, sempre que s’implementin de la manera recomanada per Laravel. S’ha utilitzat MySQL per ser un dels sistemes més estesos i que es troba en quasi qualsevol allotjament Web que es pugui contractar. MySQL es distribueix, per part d’Oracle amb llicència dual, una GPL 4 , que requereix que el software amb la que es distribueix sigui també GPL i una comercial per si es vol adjuntar amb software que no es vol distribuir amb llicència GPL. En aquest cas, no es planeja distribuir MySQL amb l’aplicació Web. Simplement s’estableixen connexions 3 La llicència Apache (Apache License o Apache Software License per a versions anteriors a 2.0) és una llicència de programari lliure creada per la Apache Software Foundation (ASF). La llicència Apache (amb versions 1.0, 1.1 i 2.0) requereix la conservació de l'avís de copyright i el disclaimer, però no és una llicència copyleft, ja que no requereix la redistribució del codi font quan es distribueixen versions modificades. (Font: Viquipèdia) 4 La Llicència Pública General GNU (GNU GPL, de l'anglès GNU General Public License) és un tipus de llicència per a programari que permet la còpia, distribució (comercial o no) i modificació del codi, sempre que qualsevol modificació es continuï distribuint amb la mateixa llicència GPL. La llicència GPL no permet la distribució de programes executables sense el codi font corresponent o una oferta de com obtenir-lo gratuïtament. És la llicència lliure de programari més utilitzada. (Font: Viquipèdia) PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 39 contra un servei MySQL que ha de ser accessible des del servidor on s’allotja l’aplicació. 4.2.5. Sistemes de pagament Per poder realitzar els pagaments en l’aplicació s’han integrat dos sistemes: Paypal pel pagament, amb targeta o crèdit de l’usuari, de fotografies, i Stripe, també pel pagament de amb targeta de les fotografies i pel pagament i gestió de les subscripcions. Tots dos sistemes ofereixen sistemes ‘sandbox’ per poder realitzar proves. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 40 5. Desenvolupament El desenvolupament de l’aplicació es realitza sobre el framework de PHP Laravel. Tot seguit, es descriuen les eines i la metodologia emprada per tal de portar a terme el projecte sota aquesta tecnologia. 5.1. Eines de desenvolupament L’arquitectura definida és multiplataforma. Això vol dir que el servidor pot funcionar sota tecnologia Unix, Windows o Macintosh. Per realitzar el desenvolupament s’ha fet servir un sistema operatiu Linux, concretament Ubuntu Server 14.04 corrent sobre una màquina virtual de VirtualBox. Pel control de versions i la centralització del repositori de desenvolupament s’ha utilitzat el sistema GIT i l’allotjament de repositoris al núvol Bitbucket de l’empresa Atlassian. Pel desenvolupament del codi s’ha fet servir Netbeans com a eina IDE 5 . Una eina IDE proporciona diferents funcionalitats per organitzar i documentar millor el codi, així com diferents eines per navegar entre les dependències de les diferents llibreries que s’utilitzin. També ofereix recordatoris a l’hora d’escriure noms de variables, funcions o classes i integra sistemes de control de versions com GIT. Laravel té un sistema propi per generar bases de dades. Tot i això, s’ha utilitat MySQL Workbench i PhpMyAdmin, per poder visualitzar, 5 Un entorn integrat de desenvolupament o IDE (Integrated development environment), és una eina informàtica per al desenvolupament de programari de manera còmoda i ràpida. Així doncs és un entorn de desenvolupament que agrupa diferents funcions en un sol programa, habitualment: editor de codi, compilador, depurador i un programa de disseny d'interfície gràfica. (Font: Viquipèdia) PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 41 editar i esborrar taules, registres i disparadors a la Base de Dades. 5.2. Estructura del projecte En crear un projecte a partir de Laravel, automàticament es genera una estructura de directoris. com la que es pot veure en la següent il·lustració. (Il·lustració 11)  El directori “app” és el directori més important del projecte. En ell es troba la lògica de l’aplicació (controladors, models, vistes, rutes, filtres, etc.), els fitxers per generar l’esquema de la base de dades i els arxius de configuració i idioma.  “bootstrap” conté les crides a diferents llibreries per inicialitzar l’aplicació.  “public” és la carpeta que s’ha de publicar al servidor web, on tots els fitxers han de ser accessibles pels usuaris que connectin al servidor. Aquí es troba el fitxer index.php que inicialitza l’aplicació i totes les imatges, fulls d’estil, tipografies i Javascripts.  “vendor” conté totes les llibreries de les que depèn Laravel i altres llibreries de tercers que s’han incorporat al projecte.  “artisan” es un script PHP realitzat per Laravel que permet automatitzar algunes tasques com crear controladors i models o escriure alguns valors a la base de dades.  “composer.json” en aquest fitxer es defineixen les dependències de l’aplicació. Composer és un gestor de dependències de PHP que a partir d’un fitxer JSON instal·la les dependències i subdependències d’una aplicació de forma recursiva.  “phpunit.xml” és un fitxer per definir l’entorn de proves amb PHPUnit, una llibreria per realitzar tests sobre el funcionament de l’aplicació. Il·lustració 11 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 48 realitzada per Zizaco amb llicència MIT. Aquesta llibreria crea un esquema bàsic per la gestió dels usuaris a la base de dades i ofereix les següents característiques:  Confirmació d’usuaris (a partir d‘e-mail de confirmació).  Restauració de contrasenya (enviant un e-mail amb un enllaç de canvi de contrasenya).  Ajuda al renderitzat de les diferents interfícies d’usuari per l’inici de sessió, canvi de contrasenya o registre.  Generació de les rutes i controladors bàsics per la gestió de les funcionalitats.  Integració amb els components “Auth” i “Reminders” de Laravel.  Validació pels formularis que fan referència a dades d’usuari.  Bloqueig de Login després d’un número determinat d’intents.  Redirecció a rutes prèvies després de la autenticació.  Comprovació d’e-mails o noms d’usuaris existents a l’hora del registre de nous usuaris. Confide es complementa amb una llibreria del mateix autor, anomenada Entrust, per gestionar els rols i els permisos dels usuaris. Aquesta llibreria ens permet, sense gaire esforç, poder determinar quins usuaris poden realitzar certes accions i quins no. Per exemple, podem utilitzar funcions com: 5.6.2. Pujada de fotografies Per gestionar la pujada de fotografies per part dels usuaris s’han avaluat diferents eines de tercers com Dropzone JS, JQuery File Upload o Uploadify. Finalment, es va prendre la decisió d’incorporar Plupload, una llibreria que ofereix un plugin amb diferents sistemes de pujada: HTML5, Flash o HTML4. Així, l’usuari disposa d’una interfície que s’adapta al navegador que està utilitzant. <?php ... if ($user->hasRole("Admin"){} ... if ($user->can("upload_photos"){} ... PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 49 S’ha configurat Plupload per a que la seva cua realitzi crides al controlador de fotografies “PhotoController”. El controlador puja les imatges a una carpeta privada (no accessible directament pel Navegador) en tres versions: miniatura, amb marca d’aigua i original. El plugin Plupload s’ha modificat, a partir dels esdeveniments que ofereix, per a que no permeti la pujada de més de 10 fotografies simultàniament i respecti la quota de l’usuari. En la següent captura es pot veure una mostra de Plupload incorporat al projecte. (Il·lustració 14) Per realitzar les accions de redimensionar, retallar i afegir marques d’aigua a les fotografies es fa servir “Intervention/image”, una llibreria de software lliure per manipular imatges que pot funcionar amb els processadors d’imatges Imgagick 8 o GD 9 . 8 Imagick: És Un conjunt d'utilitats de programari lliure per mostrar, manipular i convertir Imatges. És capaç de llegir i escriure més de 100 formats. ImageMagick és publicat sota la Llicència Apache. (Font: Viquipèdia). Il·lustració 14 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 50 En aquest cas es fa servir GD perquè ja està incorporat en les últimes versions de PHP, això ha fet que, en l’actualitat, estigui present en més projectes que Imagick i sigui més fàcil trobar llibreries que hi donin suport. 5.6.3. Mostra de fotografies Com s’ha comentat en l’apartat anterior, les imatges, en les seves diferents versions, es troben en un directori protegit. Concretament, a la ruta “/app/storage/gallery”. Per gestionar la mostra de les fotografies, es fan servir rutes amb filtres per comprovar si l’usuari té permís per veure la imatge. Aquestes rutes criden al controlador “PhotoController” que genera una resposta del tipus “MIME image/jpeg”. Per exemple, per mostrar la versió d’una foto original, l’usuari ha de ser l’autor de la foto, ser administrador o haver-la comprat (filtre ‘photoViewPermission’): El controlador fa servir la llibreria “Intervention/image” per generar la resposta JPG a 9 La Biblioteca de Gràfics GD és una biblioteca de programari lliure per manipular imatges creada per Thomas Boutell i altres col·laboradors. Està programada en C, però s'han desenvolupat interfícies per altres llenguatges de programació. (Font: Viquipèdia) //app/routes.php ... #El filtre ‘auth’,requereix que l’usuari estigui autenticat Route::get('photos/original/{photo}', 'PhotoController@getOriginal')->before('auth|photoViewPermission'); ... //app/filters.php ... #Filtre per veure si l'usuari es propietari de la photo, és admin o l'ha comprat Route::filter('photoViewPermission', function($route) { $photo=$route->getParameter('photo'); if (($photo->author->id == Auth::id()) or Entrust::hasRole('admin') or $photo->isBuyer(Auth::id())) {} else { App::abort(403, 'Unauthorized action.'); } }); ... PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 51 partir de la ruta original del fitxer extreta del model “Photo”´. Finalment, per mostrar la fotografia original, cal cridar l’acció “getOriginal()” del controlador de fotografies amb l’identificador de la fotografia a mostrar passat com a paràmetre. En la següent captura es pot veure com es mostra la imatge original en la vista d’edició d’una fotografia de la què l’usuari n’és autor. (Il·lustració 15) //app/controllers/PhotoController.php ... /** * Retorna la verió original d'una Photo * * @param Photo $photo * @return Image type Response */ public function getOriginal($photo) { return Image::make($photo->originalPath())->response('jpg'); } ... //La notació “{{}}” és pròpia del sistema de plantilles Blade <img alt="{{$photo->title}}" class="img-responsive" src="{{action('PhotoController@getOriginal', $photo->id)}}"> Il·lustració 15 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 52 5.6.4. Compra de fotografies El sistema de compra de fotografies funciona a partir d’un carret de la compra que es desa en la sessió del navegador de l’usuari. Està implementat a partir d’una llibreria per a Laravel realitzada per Crinsane anomenada ShoppingCart. Un cop incorporada al projecte es poden fer servir els mètodes registrats a la classe “Cart” de la següent forma: Quan un usuari està autenticat, s’inhabilita el botó de compra de les fotografies de les que n’és autor, les que ja ha comprat i les que estan ja en el seu carret. Si un usuari afegeix imatges al carret sense estar autenticat, en el moment d’autenticar-se per tramitar el carret s’esborren les imatges que no pot comprar pels motius ja comentats: En la següent captura es mostra com es veu el carret de la compra d’un usuari que ha afegit dues imatges. (Il·lustració 16) //app/controllers/PhotoController.php ... #afegir foto al carret Cart::associate('Photo')->add($photo->id, $photo->title, 1, Config::get('p4f.minimumPrice')); ... #esborrar una línia del carret Cart::remove($id); ... #actualitzar una línia del carret Cart::update($id, array('price' => Input::get('price'))); ... #llistar contingut del carret foreach (Cart::content() as $cartRowId => $cartRow) {} ... //app/controllers/PhotoController.php ... foreach (Cart::content() as $cartRowId => $cartRow) { if (($cartRow->photo->Author->id == Auth::User()->id) || $cartRow->photo->isBuyer(Auth::User()->id)) { Cart::remove($cartRowId); } ...} PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 53 En el carret, l’usuari pot esborrar imatges que no vol comprar, canviar el preu del donatiu per cada foto (dins dels preus delimitats per la configuració de l’aplicació) i escollir el beneficiari del donatiu. Els canvis en els elements del carret és fan amb tecnologia AJAX. 5.6.5. Pagament de comandes Un cop l’usuari confirma un carret de la compra, es crea una ‘Order’ (comanda) a la base de dades i es pot realitzar el pagament. (Il·lustració 17) S’ha implementat dos sistemes de pagament: Stripe i Paypal. Tots dos sistemes proveeixen als desenvolupadors versions de proves (Sandbox) per tal de poder Il·lustració 17 Il·lustració 16 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 54 treballar sense diners reals. A més, s’ha creat Mockpayment, un fals sistema de pagament per realitzar proves ràpides sense haver de introduir dades. Amb Stripe es pot realitzar el pagament amb targeta sense sortir de la pàgina. Per implementar-ho, primer cal registrar un compte a la Web d’Stripe i adquirir les claus de l’API que connectarà els dos sistemes. Aquestes claus es registren a un fitxer de configuració de l’aplicació per després utilitzar-les a les vistes on es vol mostrar els sistema de pagament. A continuació es mostra com es configura Stripe en una vista a partir de Javascript i la pantalla que es mostra a l’usuari per realitzar el pagament. (Il·lustració 18) Quan s’introdueix la informació de la targeta de crèdit, Stripe calcula la seva validesa i retorna un “Token”. El controlador “OrderController” recull aquest Token i gestiona el càrrec del pagament. En cap moment les dades de la targeta del client passen pel servidor de l’aplicació. Stripe gestiona aquestes dades des del seu lloc Web. Paypal, per altre banda, requereix enviar a l’usuari cap a la seva pàgina Web, realitzar el pagament i tornar a l’aplicació amb el resultat del pagament. S’ha configurat l’API de Paypal per realitzar pagaments de bens digitals. Així, la disposició dels diners és immediata. Quan l’usuari polsa el botó “Pay with Paypal” s’obre la pàgina de Paypal amb les dades del pagament. En ella, pot escollir pagar amb crèdit Paypal, introduint les seves dades d’usuari, o pagar directament amb targeta, sense registrar-se. Un cop s’ha realitzat o cancel·lat el pagament, Paypal retorna a l’usuari a la ruta que se li ha indicat a l’API. //views/orders/view.blade.php ... <script src="https://checkout.stripe.com/v2/checkout.js" data-email="{{Auth::user()->email}}" class="stripe-button" data-key="@stripeKey" data-amount="{{$order->total_price*100}}" data-currency='eur' data-description="Buying Photos"> </script> ... Il·lustració 18 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 55 Aquesta ruta és interpretada pel fitxer de rutes i gestiona les accions adients depenent de si el pagament s’ha realitzar amb èxit o no. (Il·lustració 19) 5.6.6. Subscripció d’usuaris La gestió d’altes i baixes de les subscripcions d’usuaris amb targeta de crèdit s’ha realitzat utilitzant Stripe. En la seva Web, s’ofereix un gestor on es poden crear diferents tipus de subscripció configurant-ne la durada i el preu. Un cop creades, és relativament fàcil demanar la targeta a l’usuari per fer el primer pagament de la subscripció escollida, llavors, Stripe programa el següent pagament depenent de la periodicitat configurada. Il·lustració 19 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 56 El sistema d’Stripe ofereix una sèrie de “WebHooks” per gestionar esdeveniments que es produeixen en el seu servidor. Per exemple, si una targeta de crèdit no te fons a l’hora del pagament o ha caducat, Stripe fa una crida a la ruta que s’hagi especificat per poder cancel·lar la subscripció de l’usuari. La llibreria “Cashier” de Laravel s’encarrega de gestionar les altes i baixes de les subscripcions. //app/controllers/UserController.php ... /** * Tramita la subscripció * @return Response */ public function postSubscribe() { ... //comprovem el token de pagament i es crea la subscripció if (Input::has('stripeToken')) { Auth::user()->subscription('p4fannual') ->create( Input::get('stripeToken'), ['email' => Auth::user()->email] ); return Redirect::to('/panel/profile') ->with( 'success', trans('user/user.subscribtionConfirmed') ); } } ... //app/routes.php // Cancel·lació de subscripcions o expiració de targetes de credit ... Route::post( 'stripe/webhook', 'Laravel\Cashier\WebhookController@handleWebhook'); ... PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 57 6. Proves Per provar que l’aplicació realitza allò que s’ha definit en els casos d’ús hem realitzat dos tipus de tests. Per una banda s’han realitzat tests funcionals automàtics d’algunes de les funcionalitats i models més transversals de l’aplicació. Per l’altre banda, s’ha utilitzat persones reals per provar la interfície d’usuari i els requisits no funcionals. 6.1. Tests funcionals Laravel incorpora un sistema de tests per utilitzar PHPUnit i determinar el bon funcionament de les parts de codi que es desitgin. PHPUnit és un framework creat per Sebastian Bergmann que facilita l’execució de tests d’aplicacions PHP. Es pot instal·lar via “Composer” o com a paquet independent. Cal dir que la planificació d’aquest projecte no incorporava aquest nivell de tests. Però s’ha volgut realitzar un primer pas en aquest sentit, aprendre el seu funcionament i, així, poder implementar una versió completa de tests en posteriors versions. A Laravel, per crear un nou test, cal preparar primer l’entorn d’execució. Si no s’han fet servir consultes a base de dades directament, és a dir, s’ha fet servir sempre el “Schema Builder”, i s’ha mantingut l’aplicació agnòstica, es pot fer servir SQLite com a base de dades de tests, i així realitzar-los de forma més àgil. Malauradament, en el nostre cas, s’han hagut de realitzar sentències específiques que obliguen a configurar MySQL com a base de dades de test. Aquesta configuració es realitza a “app/config/testing/database.php”. Per crear els diferents tests cal estendre la classe “Illuminate\Foundation\ Testing\TestCase” i col·locar-la al directory “app/tests”. Un cop s’han definit els tests a realitzar és pot executar per línia de comandes: “#>phpunit”, aquesta comanda realitzarà tots els tests definits i mostrarà el resultat. En els tests realitzats es comprova: PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 64 8. Anàlisi de costos econòmics Els costos econòmics es divideixen en dos parts. Per un banda els costos derivats de l’execució del projecte i per l’altre els que es poden derivar de publicar el projecte a Internet. 8.1. Execució del projecte Per calcular els costos d’execució s’han calculat les hores repartides per les diferents tipologies de feina i s’ha assignat un cost econòmic a cada hora de feina. El resultat es pot visualitzar a la següent taula.(Taula 3) Tipus de Feina Hores Preu Sub-Total Analista 115 30.00 € 3 450.00 € Desenvolupador PHP 200 20.00 € 4 000.00 € Disseny i Maquetació 90 18.00 € 1 620.00 € Proves 30 15.00 € 450.00 € Documentació i manuals 60 15.00 € 900.00 € TOTAL 10 420.00 € Taula 3 Com es pot observar, ha existit una desviació en el cost del projecte en relació al pressupostat. Aquesta desviació és deu principalment al temps empleat en l’aprenentatge de les eines de desenvolupament, les dificultats trobades en la maquetació de la interfície d’usuari i l’execució de proves funcionals no previstes inicialment. Cal tenir en compte que l’execució del projecte es realitza en acció de voluntariat, per tant, aquests costos són aproximats i no tenen cap imputació per l’entitat Photosforfreedom. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 65 8.2. Costos de publicació El càlcul del cost per la publicació de l’aplicació a Internet es realitza a partir del preu mig d’un allotjament Linux i el registre d’un domini “.org”. Cal tenir en compte que el projecte s’iniciarà amb un espai de disc de 500Gb, ampliable en el futur. (Taula 4) Concepte Preu/any Allotjament 120.00 € Domini .org 8.00 € TOTAL ANUAL 128.00 € Taula 4 PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 66 9. Conclusions A continuació, s’exposen les conclusions derivades de la execució d’aquest projecte: preparació, plantejament, desenvolupament i escriptura d’aquesta memòria. Primer, cal dir que els objectius marcats s’han assolit amb èxit. S’ha aconseguit una aplicació d’acord amb els requisits funcionals i no funcionals que es van definir i Photosforfreedom pot, en el moment que ho consideri oportú, posar en funcionament l’aplicació a Internet. Si més no, durant la implementació de l’aplicació han sorgit idees per millorar l’aplicació. Aquestes s’exposen en la següent secció: “Futurs desenvolupaments”. Abans de plantejar el desenvolupament d’aquesta aplicació com a projecte acadèmic, no era gens conscient de la feina que calia per portar-la a terme. Quan, dins de la planificació, es va realitzar l’estimació d’hores, vaig adonar-me que el temps a invertir era molt superior als plantejaments previs. Ara, al final de la feina realitzada, puc dir que la panificació, en alguns punts, es va quedar curta. Tot i que el projecte només cobreix la primera versió de l’aplicació, s’ha invertit un temps substancialment superior al estimat. Aquesta diferència es deu, crec, al temps invertit en l’aprenentatge de moltes eines utilitzades. Cal dir que aquest aprenentatge no es en va, de fet, es ben segur que gràcies a aquest, la feina a realitzar en posteriors versions o en altres aplicacions serà molt més eficient. Respecte els frameworks de programació, tot i que ja havia treballat amb algun com “Yii”, aquest és el primer projecte que realitzo íntegrament amb un framework. En aquest cas Laravel. Després de l’experiència, només puc dir coses positives. És cert, que inicialment costa acostumar-se a una manera diferent de treballar, però un cop se’n ha après les peculiaritats, és fa difícil pensar en començar un nou projecte, sense l’ajuda d’un framework. La seva utilització m’ha alliberat d’escriure funcions i codi de forma repetitiva, com per exemple accedir a objectes de bases de dades, m’ha obert les portes a milers de llibreries per facilitar-me la programació i m’ha ajudat a fer un codi molt més entenedor. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 67 Una part important del desenvolupament d’aquest projecte ha estat el disseny de les interfícies d’usuari. La presentació a l’usuari és molt important en una aplicació, sobretot si es Web. En aquest cas es volia una interfície adaptable a dispositius mòbils. Tot i l’ajuda de “Twitter Bootstrap”, que facilita la creació d’aquestes interfícies, col·locar els diferents objectes, crear interaccions amb l’usuari i fer-ho de manera adaptable és una tasca molt laboriosa. Actualment, tothom del nostre voltant accedeix a internet i té accés a milers de pàgines amb interfícies d’usuari espectaculars. Aquest fet provoca que el disseny i creació d’aquestes interfícies sembli una tasca senzilla. Després de realitzar aquesta feina pel portal Photosforfreedom, sóc molt més conscient de la dedicació que hi ha al darrera de moltes altres pàgines Web. Realitzar la memòria m’ha permès entendre i organitzar millor la feina que estava realitzant. També m’ha ajudat a detectar errors en el projecte i millores per a futures versions. Per finalitzar, m’agradaria comentar que, tot i que en alguns moments de la realització d’aquest projecte he patit, ja sigui per nervis o per no trobar solució a algun problema, he gaudit més del que m’esperava. Per una part, és gratificant aprendre coses noves, per l’altre, veure com una idea que tenies al cap esdevé realitat, gràcies al teu esforç personal, és una gran sensació. A més, espero que la feina realitzada serveixi per arrencar definitivament les idees que tenim el cap, els companys de Photosforfreedom i jo. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 68 10. Futurs desenvolupaments Com és va definir en l’estratègia, aquesta és la versió 1.0 del portal Web Photosforfreedom. Durant el desenvolupament de l’aplicació, han sorgit idees que s’esperen poder integrar en futures versions de l’aplicació amb l’objectiu d’incorporar funcionalitats, millorar-ne les actuals i corregir alguns problemes. A continuació s’enumeren algunes:  Integració amb xarxes socials: És vol donar l’opció de realitzar l’autenticació a partir de comptes de xarxes socials com Facebook, Twitter o Google+. Ja s’han estudiat diferents solucions per integrar aquests tipus d’autenticació OAuth al projecte. Un exemple és la llibreria “artdarek/oauth-4-laravel”. També es volen afegir valoracions, comentaris i links de compartició a les imatges publicades.  Etiquetes automàtiques amb reconeixement d’imatge: Aquesta és una funcionalitat que es volia aplicar inicialment però es va descartar degut al temps que hagués requerit la seva implementació. Consisteix en cercar i recomanar a l’usuari les etiquetes adients per una fotografia utilitzant reconeixement d’imatges. Actualment hi ha projectes de pagament que ho ofereixen com “autotag.me” o “imagga.com”. També hi ha projectes de recerca en aquest camp com ALIPR de la Pennsylvania State University.  Millora de la navegació de la galeria: Si en algun moment la galeria d’imatges creix molt, pot ser descoratjador per l’usuari navegar per moltes pàgines de fotografies. Per això, es vol implantar un sistema de navegació basat en la càrrega d’imatges a mesura que l’usuari fa “scroll” a la galeria (semblant a Google Images). Això és pot realitzar mitjançant Javascript per detectar l’esdeveniment d’”scroll” i realitzar crides AJAX per carregar grups de fotografies. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 69  Millora del rendiment de càrrega d’imatges: S’ha detectat que la càrrega d’imatges en un entorn web, tot i fer-se d’imatges de resolució reduïda, és lenta. Per tant es vol trobar una solució per a que aquesta càrrega sigui més ràpida. S’han realitzar algunes proves amb cache, però cal seguir investigant, ja que la càrrega lenta de la pàgina pot provocar una caiguda de les visites i, per tant, una baixada de les recaptacions. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 70 11. Referències ADERMANN, Nils, Boggiano, Jordi i altres, Composer [en línia][Consulta: octubre 2014] Disponible a <https://getcomposer.org>. Agencia Española de Protección de Datos. Portal Web Agencia Española de Protección de Datos [en línia][Consulta: octubre 2014] Disponible a <http://www.agpd.es>. Asociación Española de la Economía Digital. Portal Web adigital [en línia][Consulta: octubre 2014] Disponible a <http://www.adigital.org>. BERGMANN, Sebastian, PHPUnit [en línia][Consulta: octubre 2014] Disponible a <https://phpunit.de>. COMUNITAT. Laravel.io [en línia][Consulta: octubre 2014] Disponible a <http://laravel.io>. COMUNITAT. Stackoverflow [en línia][Consulta: octubre 2014] Disponible a <http://stackoverflow.com>. Diversos autors. Maestros del Web adigital [en línia][Consulta: octubre 2014] Disponible a <http://www.maestrosdelweb.com>. Diversos autors. PHP Framework Interop Group [en línia][Consulta: octubre 2014] Disponible a <http://www.php-fig.org>. Diversos autors. Wikipedia [en línia][Consulta: octubre 2014] Disponible a <http://www.wikpedia.org>. Google Inc., Goolge Trends [en línia][Consulta: octubre 2014] Disponible a <http://www.google.com/trends>. JQuery Foundation, The. JQuery - Write less do more [en línia][Consulta: octubre 2014] Disponible a <http://jquery.com>. Moxiecode Systems AB, Plupload [en línia][Consulta: octubre 2014] Disponible a <http://www.plupload.com>. Oracle Corporation, MySQL Developer Zone Documentation [en línia][Consulta: octubre 2014] Disponible a <http://dev.mysql.com/doc>. OTTO, Mark i Thornton, Jacob. Twitter Bootstrap [en línia][Consulta: octubre 2014] Disponible a <http://getbootstrap.com>. OTWELL, Taylor. Laravel [en línia][Consulta: octubre 2014] Disponible a <http://laravel.com>. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 71 OVH. OVH [en línia][Consulta: octubre 2014] Disponible a <http://ovh.es>. PayPal Inc, Paypal Developer. [en línia][Consulta: octubre 2014] Disponible a <https://developer.paypal.com>. PITT, Christopher. Laravel 4 Controller Testing - A Comprehensive Tutorial [en línia][Consulta: octubre 2014] Disponible a <https://medium.com/laravel-4/laravel-4controller-testing-48414f4782d0>. REES, Dayle. Code Bright [en línia][Consulta: octubre 2014] Disponible a <http://daylerees.com/codebright/getting-started>. Stripe, Inc. Stripe [en línia][Consulta: octubre 2014] Disponible a <https://stripe.com>. VOGEL, Oliver. Intervention Image [en línia][Consulta: octubre 2014] Disponible a <http://image.intervention.io>. WAY, Jeffrey. Laracast [en línia][Consulta: octubre 2014] Disponible a <https://laracasts.com>. WONG, Jeremy i Wong Connie. Website Builder Expert [en línia][Consulta: octubre 2014] Disponible a <http://www.websitebuilderexpert.com>. ZIZUINI Zizaco i Elkins, Andrew, Confide (A Laravel4 Package) [en línia][Consulta: octubre 2014] Disponible a <https://github.com/Zizaco/confide>. ZIZUINI Zizaco i Elkins, Andrew, Entrust (Laravel4 Package) [en línia][Consulta: octubre 2014] Disponible a <https://github.com/Zizaco/entrust>. PhotosForFreedom: Portal Solidari per compartició i venta de fotografies Memòria 72