Disseny i desenvolupament de ReproWallArt
programari per WordPress
Memòria de Projecte Final de Grau
Grau en multimèdia
Gestió i publicació de continguts
Autor: Jordi Fuentes Leiva
Consultor: Daniel Julià Lundgren
Professor: César Córcoles Briongos
Barcelona 2017
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Crèdits/Copyright
GNU Free Documentation License (GNU FDL)
Copyright © Jordi Fuentes Leiva.
Permission is granted to copy, distribute and/or modify this
document under the terms of the GNU Free Documentation
License, Version 1.3 or any later version published by the Free
Software Foundation; with no Invariant Sections, no Front-
Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
2
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Dedicatòria
En especial a la meva parella Sònia, per l'ajut desinteressat prestat durant el transcurs de tot el grau.
3
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Abstract
El disseny i desenvolupament del “plugin” ReproWallArt neix com a conseqüència
d'una oportunitat de negoci dins del mercat d'impressió digital i mitjançant l'ús de les
noves tecnologies.
Hp ink, empresa proveïdora de consumibles per impremtes, ofereix una API gratuïta
per les empreses d'impressió digital que treballin amb els seus “plotters”, la qual
permet als clients finals realitzar personalitzacions de productes de gran format via
Internet.
Encara que la plataforma d'Hp dóna suport per la connexió entre servidors i facilita la
integració entre plataformes, hem detectat certes limitacions que impedeixen
realitzar un projecte escalable. Hp Wall Art només permet la personalització de
quatre tipus de productes. Aquests no es poden subdividir en diferents substrats per
la impressió, es a dir diferents qualitats de paper.
ReproWallArt, trenca amb les limitacions imposades per Hp i garanteix la
personalització de qualsevol tipus de substrat dins de la seva plataforma aconseguint
augmentar la gama de productes. És un programari desenvolupat per treballar
juntament amb Woocommerce dins del CMS WordPress.
Paraules clau
Treball Final de Grau, TFG, Multimèdia, UOC, projecte, memòria, WordPress, CMS,
plugin, Hp WallArt, WooCommerce, PHP, MySql.
4
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Abstract (english version)
The idea of the design and development of the Reprowallart “"plugin"” is the result of
a business opportunity in the digital print market related with the new technologies.
HP Ink provides consumibles for printer and offers, to the digital printing companies
which work with theis plotters, a free tool where the final customers can personalize
their big format products on the internet.
Althoug the Hp Platform helps the connection among servers and makes easier the
platforms integration, we have detected some limitations that prevent it to make an
escalable project. Hp Wall allows the customer to tailor only four types of paper.
ReproWallArt, breaks the boundaries imposed by Hp and guarantees the
personalization of any kind of paper using the same platform. This way we obtain a
great increase of the range of products.
It is a plugin developed to work with the WooCommerce and inside the well known
and popular CMS WordPress.
Keywords:
Final degree, TFG, Multimedia, UOC, project,WordPress, plugin, WordPress, CMS,
plugin, WooCommerce, Hp WallArt, PHP, MySQL.
5
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Agraïments, Notacions i Convencions
• Títols 1: Garamond 21 punts.
• Títols 2: Garamond 13 punts.
• Cos memòria: Helvètica 11 punts.
• Paraules en altres idiomes en cursiva.
• Peus de foto: Helvètica 9 punts.
• Codi font: courier New 13 punts.
6
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Índex
1.- Introducció .................................................................... 11 pàg.
1.1.- Interfície ................................................................. 11 pàg.
2.- Descripció ..................................................................... 12 pàg.
3.- Objectius ...................................................................... 13 pàg.
3.1- Principals ................................................................ 13 pàg.
3.2.- Secundaris ............................................................ 13 pàg.
4.- Escenari ....................................................................... 14 pàg.
5.- Continguts ................................................................... 15 pàg.
5.1.- Autentificació usuari .............................................. 15 pàg.
5.2.- Comunicació entre servidors ................................. 15 pàg.
5.3.- Cistell de la compra ............................................... 16 pàg.
6.- Metodologia .................................................................. 17 pàg.
7.- Arquitectura de l'aplicació .............................................18 pàg.
8.- Plataforma de desenvolupament .................................. 20 pàg.
8.1.- Programari ............................................................. 20 pàg.
8.2.- Maquinari ............................................................... 20 pàg.
9.- Planificació ................................................................... 21 pàg.
9.1.- Dates claus projecte .............................................. 21 pàg.
9.2.- Llistat de tasques .................................................. 21 pàg.
9.3.- Diagrama de Gantt ................................................ 22 pàg.
9.4.- Diagrama de Pert .................................................. 23 pàg.
10.- Procés de desenvolupament ...................................... 24 pàg.
10.1.- Autorització i autentifica usuari............................ 24 pàg.
10.2.- Classificació de productes .................................. 25 pàg.
10.3.- Comunicació entre servidors ............................... 28 pàg.
10.4.- Cistell de la compra............................................... 32 pàg.
11.- Apis utilitzades ........................................................... 36 pàg.
12.- Prototips ..................................................................... 37 pàg.
12.1.-Lo-Fi..................................................................... 37 pàg.
13-. Perfils d'usuaris........................................................... 38 pàg.
14 - Usabilitat....................................................................... 38 pàg.
15.- Seguretat..................................................................... 39 pàg.
16.- Test............................................................................. 41 pàg.
17.- Versions de l’aplicació ................................................ 42 pàg.
18.- Requisits d’instal·lació/implantació/ús ........................ 42 pàg.
19.- Instruccions implantació ............................................. 43 pàg.
20.- Instruccions d’ús ......................................................... 44 pàg.
21.- Bugs ........................................................................... 46 pàg.
22.- Projecció a futur ......................................................... 48 pàg.
7
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
23.- Pressupost ................................................................. 49 pàg.
24.- Anàlisi de mercat......................................................... 50 pàg.
25.- Màrqueting i Vendes................................................... 51 pàg.
26.- Conclusions ................................................................ 51 pàg.
ANNEX 1 Lliurables del projecte........................................ 52 pàg.
ANNEX 2 Codi font ............................................................ 53 pàg.
ANNEX 3 Llibreries ............................................................ 66 pàg.
ANNEX 4 Captura de pantalla ........................................... 67 pàg.
ANNEX 5 Llibre d'estils ..................................................... 68 pàg.
ANNEX 6 Resum executiu ................................................ 69 pàg.
ANNEX 7 Glossari ............................................................. 72 pàg.
ANNEX 8 Bibliografia ........................................................ 73 pàg.
8
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Figures i taules
Índex de figures
• Figura 1: Pàgina de disseny Hp Wall Art 12 pàg.
• Figura 2: Esquema arquitectura programari 18 pàg.
• Figura 3: Diagrama de Gantt 22 pàg.
• Figura 4: Diagrama de Perlt 23 pàg.
• Figura 5: Protocol autorització oAuth v1.0 24 pàg.
• Figura 6: Producte que permet la personalització 25 pàg.
• Figura 7: Pàgina front-end del producte 26 pàg.
• Figura 8: Preu producte calculat segons mides 27 pàg.
• Figura 9: Validació de les dades introduïdes pels usuaris 27 pàg.
• Figura 10: Pàgina Checkout.php 35 pàg.
• Figura 11: Esquema programari en baixa 37 pàg.
• Figura 12: instal·lació ReproWallArt 43 pàg.
• Figura 13: Classificació de producte 44 pàg.
• Figura 14: Botó afegir cistell 44 pàg.
• Figura 15: Tipus de producte 45 pàg.
• Figura 16: Missatge per recuperar projecte anterior 46 pàg.
• Figura 17: Correu electrònic departament tècnic Hp 47 pàg.
• Figura 18: Resposta departament tècnic Hp 47 pàg.
• Figura 19: Captura de pantalla Dashboard Hp 48 pàg.
• Figura 20: Entorn disseny HP 50 pàg.
• Figura 21: Arquitectura Hp Wall Art 67 pàg.
• Figura 22: Logo botiga electrònica 68 pàg.
• Figura 23: Paleta de colors 68 pàg.
9
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Índex de taules
• Taula 1: Llistat tasques per aconseguir l'èxit del projecte 17 pàg.
• Taula 2: Dates claus dels lliuraments del projecte 21 pàg.
• Taula 3: Llistat tasques projecte 22 pàg.
• Taula 4: Pressupost 49 pàg.
• Taula 5: DAFO 71 pàg.
10
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
1. Introducció
Actualment formo part de l'equip de treball de Repro Disseny, S.L., empresa lider a
Barcelona dins del sector de la impressió en “off-set” i digital.
L'empresa necessita desenvolupar una botiga "on-line" per integrar una eina que el
proveïdor de consumibles Hp ofereix als seus clients de forma gratuïta.
Aquesta API permet als usuaris finals personalitzar les impressions de gran format
dins d'una plataforma “on-line”. Ofereix la possibilitat d'escollir mides i elements
gràfics per realitzar dissenys totalment personalitzats segons gustos i necessitats
dels clients finals.
El principal handicap de l'eina, rau en el fet de que l'API només permet la possibilitat
de personalitzar 4 productes, mural, adhesius, pòster i llenços, sense poder
escollir diferents tipus de substrats per cada producte. És a dir, diferents tipus de
qualitat de paper o material.
Amb el desenvolupament del "plugin" ReproWallArt, volen ampliar la gama de
substrats disponibles per producte i així augmentar el ventall de possibilitats per
oferir als clients amb diferents qualitats i preus. Volem desenvolupar una botiga "on-
line" que integri l'API de personalització de productes però sense les limitacions
imposades per part del fabricant.
1.2.- Interfície
ReproWallArt treballarà juntament amb Woocommerce, tots dos integrats dins del
CMS WordPress. Serà l'administrador de la pàgina web qui decidirà el número de
substrats disponibles per cada producte. Per aconseguir la fita, cada substrat serà un
producte independent dins del catàleg de la botiga.
Els usuaris finals hauran de registrar-se dins de la pàgina web i seran els
encarregats de seleccionar el producte dins de la botiga. Si el productes es pot
personalitzar, els redirigirem a l'API que proporciona Hp per realitzar el disseny.
11
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
2. Descripció
En els últims anys, amb la interrupció i evolució de les TIC, l'aparició dels telèfons
intel·ligents i les millores per accedir a la xarxa, han permès la democratització del
usuaris i el seu increment han crescut de forma exponencial.
Les conseqüències directes de l'evolució de les noves tecnologies han sigut sense
cap mena de dubte, la manera de relacionar-nos i els hàbits de consum.
És aquesta última conseqüència, els hàbits de consum, el detonant per emprendre el
projecte.
Internet ha passat a ser la botiga més gran del món, oberta 24 hores al dia i
accessible des de qualsevol part del planeta amb una connexió a la xarxa. Per tant,
una oportunitat de negoci que les empreses no poden deixar escapar.
Repro Disseny, S.L., necessita desenvolupar una botiga electrònica. L'objectiu
principal del desenvolupament és integrar i posar a l'abast dels clients finals una eina
gratuïta per la personalització de productes de gran format.
L'API proporcionada per Hp consisteix en una plataforma web, on els usuaris finals
poden accedir-hi per personalitzar els seus productes imprimibles de gran format.
Finalitzada la comanda i abonats els imports corresponents de la mateixa per part
del client final, Hp remet un arxiu en format PDF a l'empresa impressora amb els
documents necessaris per enviar la comanda al flux de treball de producció.
Figura 1: Pàgina de disseny Hp Wall Art
12
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Encara que el mètodes d'integració que proporciona Hp entre la seva API i les
plataformes de les empreses d'impressió són força robustos, pensem que presenten
certes mancances importants pel nostre negoci.
El “plugin” que proporciona Hp per la integració, només permeten la personalització
de quatre productes, sense poder escollir diferents tipus de substrats o qualitats de
paper. Una vegada finalitzat el disseny del producte a l'eina, aquesta redirigeix als
usuaris a la pàgina de pagament de la botiga de la impremta i no permet afegir més
productes al cistell de la compra, es a dir, només permet la compra d'un producte per
sessió.
L'objectiu del projecte, consisteix en superar les limitacions i aconseguir una
integració total amb l'API d'Hp però amb total llibertat per personalitzar els tipus de
substrats que Repro Disseny cregui oportuns.
Per aquest motius, dissenyem i implementem un programari personalitzat que
supera amb escreix les limitacions imposades per HP.
3. Objectius
3.1.- Principals
L'objectiu principal del projecte persegueix aconseguir dissenyar un programa que
permeti la integració total de l'eina proporcionada per Hp pel disseny de productes
de gran format dins de la botiga"on-line''' de Repro Disseny.
Volem tenir la total llibertat per decidir quins substrats podem oferir als nostres
clients. A més de no imposar limitacions amb el nombre de productes que els usuaris
poden afegir al cistell de la compra per sessió.
3.2.- Secundaris
Encara que Repro Disseny hi és present a Internet, amb el desenvolupament de la
botiga electrònica aconseguirem més presència a la xarxa, per tant augmentarem la
visibilitat de la marca.
La botiga “on-line”, permetrà arribar a més públic i per tant augmentar la cartera de
clients particulars.
13
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
La forma com integrem l'eina d'HP dins de la web, ens permetrà augmentar les
vendes. La solució d'integració presentada per HP, obliga al clients a pagar el
producte un cop finalitzat el disseny. La nostra proposta, permet a l'usuari seguir
adquirint productes dins de la botiga fins que ho cregui convenient.
4. Escenari
La democratització de l´us d'Internet, el desenvolupament de noves tecnologies com
HTML5 i CSS3 més el canvi d'hàbits de consum dels usuaris, han afavorit l'aparició
de pàgines web que permeten la personalització de productes per la impressió
digital. Hi han empreses reconegudes dins del sector, com Fotoprix1 o Hofmann2,
que ofereixen productes personalitzats dins de les seves botigues electròniques.
La proposta de Repro Disseny, S.L., reforça l'oferta actual del mercat oferint la gama
de productes i qualitats més amplia del mercat per la personalització de productes de
gran format.
Pensem que amb el disseny i desenvolupament d'un programari personalitzat per la
integració entre servidors guanyem autonomia degut a que cobrirem les nostres
necessitats sense dependre de desenvolupaments de tercers.
1.- Fotoprix, S.A., 2004-2016 – [Consulta en línia] – Url: http://www.fotoprix.com – [Data consulta: 15/10/2016].
2.- HOFMANN, S.L.U., 2016 – [Consulta en línia] – Url: https://www.hofmann.es – [Data consulta: 15/10/2016].
14
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
5. Continguts
El programari tal i com hem esmentat anteriorment, permet la personalització de
qualsevol tipus de substrat independentment del producte escollit per la
personalització, ja sigui mural, pòster o llenços.
El desenvolupament del producte, està dividit en quatre fases clarament
diferenciades entre si, però dependents entre elles les quals enumerem a
continuació:
• Autentificació usuari
• Classificació de productes per personalitzar.
• Comunicació entre servidors.
• Afegir el producte dissenyat dins de l'API d'HP al cistell de la compra de la
botiga.
5.2. Autentificació usuari.
La plataforma Hp Wall Art, permet diferents tipus d'autorització dels usuaris per
accedir-hi a les seves funcionalitats, nosaltres escollim el sistema basat en Access
token.
5.1. Classificació del producte per personalitzar.
El programari ha d'oferir la possibilitat per discriminar entre els productes que els
usuaris poden personalitzar dins d'HP Wallart, d'aquell que no poden ser-ho.
Per aconseguir-ho, incloem un “checkbox” dins de l'opció de creació de productes de
Woocommerce per classificar-los i un desplegable per escollir quin tipus de producte
és.
5.2. Comunicació entre servidors.
La nostra plataforma ha de tenir la capacitat d'intercanviar informació amb el servidor
d'HP. La botiga de Repro Disseny, necessita enviar informació de l'usuari, tipus de
producte i dimensions. A la vegada, necessita rebre informació del servidor d'Hp amb
totes les dades relacionades del producte; id del projecte, l'usuari propietari, i les
característiques del producte.
15
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
5.3. Cistell de la compra.
Una vegada que el client ha finalitzat el producte a l'API, la botiga “on-line” ha
d'interpretar la informació rebuda d'Hp WallArt per carregar el producte dins del
cistell de la compra amb les dades correctes. L'usuari pot modificar les mides del
productes introduïdes a la botiga dins de l'eina de disseny d'Hp i per tant el preu final
canviaria.
16
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
6. Metodologia
La metodologia utilitzada pel desenvolupament del treball respon a la culminació
d'unes fites per aconseguir l'objectiu final de l'aplicació. Les tasques necessàries per
arribar-hi són:
Registre i autentificació usuari Per l'arquitectura de la plataforma de
disseny, necessitem un identificador únic per
cada usuari. En el moment de registrar-se
dins de la botiga creem el codi. Si no està
registrat, derivem a l'usuari a la pàgina de
registre i no el redirigim a la pàgina d'HP.
Classificació de productes Discriminació dels productes podem
personalitzar d'aquells que no. Incloem
camps personalitzats a la pàgina de creació
de productes de WooCommerce per
classificar-los. Aquesta informació queda
enregistrada dins de la base de dades de
WordPress.
Intercanvi d'informació entre servidors La comunicació entre servidors és constant
en el moment de la realització del projecte
personalitzat. Afegim arxiu a la carpeta arrel,
“service.php”, encarregat de recollir i enviar
informació segons les peticions que arriben
de l'API d'HP.
Afegir producte cistell de la compra Una vegada finalitzat el disseny del producte
a la plataforma, el programari necessita
capturar les dades del productes i
actualitzar-les en cas que fos necessari.
Amb les dades correctes afegim producte al
cistell de la compra de WooCommerce.
Taula 1: Llistat tasques per aconseguir l'èxit del projecte
Per verificar l'èxit de les fites exposades anteriorment, treballem en un servidor de
proves amb una instal·lació de WordPress neta i amb el “plugin” de Woocommerce
únicament.
17
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
7. Arquitectura de l’aplicació
Programen un “plugin” per WordPress, ja que la botiga electrònica de Repro Disseny
està implementada amb aquest CMS, el programari treballa juntament amb
Woocommerce.
Per par del client, utilitzarem:
• HTML5 llenguatge utilitzat per l'estructura de les pàgines.
• CSS llenguatge per la presentació visual dels continguts.
• Javascript tecnologia utilitzada per la creació de pàgines dinàmiques.
◦ Jquery: Interactivitat i crides asíncrones al servidor.
◦ Jquery Validate per la validació dels formularis.
• AJAX, combinacions de llenguatges per realitzar crides asíncrones al servidor.
Per par del servidor utilitzarem les següents tecnologies:
• PHP, llenguatge de servidor per interpretar les peticions i crear les pàgines.
• MySQL, sistema de gestió de base de dades que utilitza per defecte WordPress i
per tant, aprofitarem per les funcionalitats del programari.
A continuació detallem l'ús de les tecnologies i llenguatges esmentats dins de
l'arquitectura del programari ReproWallArt.
18
Figura 2: Esquema arquitectura programari
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Utilitzarem HTML5 per la generació dels formularis necessaris per la introducció de
dades per la creació del projecte, bàsicament mides del producte per part del client.
També utilitzarem aquest llenguatge dins de la pàgina de confirmació de comanda,
pas previ al pagament on mostrarem els detalls del productes que componen el
cistell de la compra del client.
L'aspecte visuals de les pàgines generades, el modifiquem segons el llibre d'estil de
la companyia amb CSS, així mantenim la coherència amb la resta de pàgines que
componen la botiga electrònica.
Per millorar l'experiència d'usuari, incloem peticions asíncrones amb el servidor per
calcular el preu finals del producte en funció de les mides introduïdes. Realitzem
peticions AJAX mitjançant Jquery.
L'últim llenguatge utilitzat al “front-end” és Javascript juntament amb la llibreria
Jquery Validate per validar la integritat de les dades introduïdes als formularis
siguin correctes.
A la part del servidor utilitzem llenguatge PHP per la generació de pàgines en funció
de les peticions del client a la base de dades MySql, principi fonamental de la
filosofia de funcionament de WordPress.
Per guanyar velocitat i no sobrecarregar la base de dades de la botiga, utilitzem les
taules que WordPress crea per defecte en la instal·lació sempre que sigui possible.
Utilitzem les taules, “wp_post”, “wp-usermeta” i “wp-postmeta”.
Per últim, creem nomes una taula dins de la base de dades ,”wp_projects”,
necessària per correcte funcionament del programari on guardem la informació
relativa al projecte.
19
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
8. Plataforma de desenvolupament
Pel desenvolupament del programari utilitzem els recursos tecnològics que
esmentem a continuació:
8.1. Programari
• WordPress:“Content Management System” per realitzar les proves
necessàries del programari i futura plataforma per la botiga electrònica.
• WooCommerce: “Plugin” per desenvolupar botigues “on-line” dins de
WordPress.
• SublimeText: Editor de textos per l'elaboració del diferents arxius en tots els
llenguatges necessaris per l'elaboració del “plugin” .
• FilleZilla: Programari per la transferència d'arxius entre servidor i
“workstation”.
• Advanced REST client: Extensió del cercador Chrome que permet passar
peticions amb paràmetres a servidors i mostra el resultat de la consulta.
• XAMMP: Servidor local per realitzar les primeres proves que suporta PHP i
MySQL.
• Simply Show Hooks: “Plugin” per visualitzar els “Hooks” de Wordpress.
8.2. Maquinari
• Servidor VPS: Sistema operatiu Linux, MySQL 5.5, PHP 5.4.4, espai 4 Gb.
• Workstation: MacBook Pro, processador 2,9 GHz Intel Core i7, memòria 8
GB 1600 MHz DDR3.
20
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
9. Planificació
9.1. Dates claus del projecte
TREBALL DATA PUBLICACIÓ DATA LLIURAMENT
PAC 1 21/09/16 04/10/16
PAC 2 05/10/16 02/11/16
PAC 3 03/11/16 04/12/16
Lliurament 07/12/16 16/01/17Taula 2: Dates claus dels lliuraments del projecte
9.2. Llistat de tasques
GRUP TASCA DATA INICI DATA
FINALITZACIÓ
PAC1 Conceptualització del projecte 21/09/2016 23/09/2016
Consensuar amb el consultor la idea de
projecte
26/09/2016 27/09/2016
Redacció versió 1 memòria 28/09/2016 04/10/2018
PAC2 Recerca informació pel
desenvolupaments de “plugins” per
WordPress.
05/10/2016 07/10/2016
Instal·lació i configuració entorn de
proves
05/10/2016 07/10/2016
Creació de la taula a la base de dades
de WordPress.
10/10/2016 10/10/2016
Comunicació entre servidors 10/10/2016 31/10/2016
Afegir camps personalitzats a la pàgina
de creació de productes de
WooCommerce
11/10/2016 13/10/2016
Redacció versió 2 memòria projecte 25/10/2016 02/10/2016
PAC3 Actualització de les dades del producte
amb l'arxiu json que envia el servidor HP
03/11/2016 11/11/2016
Disseny i implementació pàgina
CheckOut.php de Woocommerce.
14/11/2016 18/11/2016
Arbre navegació botiga 21/11/2016 23/11/2016
Wireframe pàgines web de la botiga 23/11/2016 01/12/2017
Redacció versió 3 memòria 17/11/2016 02/12/2016
21
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
GRUP TASCA DATA INICI DATA
FINALITZACIÓ
Lliurament Instal·lació programari botiga real 07/12/2016 09/12/2016
Implantació i modificació arxius CSS
segons wireframes aprovats
12/12/2016 23/12/2016
Testeig funcionament botiga 27/12/2016 30/12/2016
Realitzar proves d'usabilitat 30/12/2017 04/01/2017
Esmenar mancances detectades amb
les proves
05/12/2017 13/01/2017
Creació document audiovisual pel
lliurament
09/01/2017 16/01/2017
Redacció memòria final del projecte 12/12/2016 16/01/2017
Taula 3: Llistat tasques projecte
9.3. Diagrama de Gantt.
22
Figura 3: Diagrama de Gantt
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
9.4. Diagrama de Pert.
23
Figura 4: Diagrama de Pert
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
10. Procés de desenvolupamentEl procés de desenvolupament el dividim en quatre fases; l'autorització i
autentificació dels usuaris, la classificació de productes, la comunicació entre
servidors i per últim, el cistell de la compra.
El primer pas que executa el “plugin” una vegada activat dins de la botiga, és la
creació de la taula necessària dins de la BBDD per l'emmagatzemament de les
dades relatives a la comanda i producte.
Per aconseguir la fita, vinculem el “hook” d'activació les programari amb un fitxer que
conté les sentències necessàries per la creació de la taula.
register_activation_hook( __FILE__, 'rwh_create_bbdd' );
10.1 Autorització i autentifica usuari
El fabricant ofereix dos mètodes d'autorització per accedir al seva API, segons el
protocol “oAuth v1.0” o mitjançant “access token” basat en autorització.
Hem escollit “Acces token” ja que el protocol “oAuth v1.0” està desfasat segons les
especificacions de Google3 des del 2012 enfront a la versió v2.0.
3.- Google Identity Platform, 3-12-2015. - OAuth 1.0 for Web Applications. [consulta en línia. - Url:
https://developers.google.com/identity/protocols/OAuthForWebApps – [data consulta: 03-11-2016]
24
Figura 5: Protocol autorització oAuth v1.0
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
En el moment que l'usuari es registra dins de la botiga, creem el codi d'identificació
X-Auth-Token que li servirà per poder accedir-hi dins de la plataforma d'Hp WallArt.
Aquest codi el guardem dins de la taula “wp_usermeta”.
10.2 Classificació de productes.
Per diferenciar els productes que els usuaris poden personalitzar i per tant, utilitzen
l'API d'Hp, afegim camps personalitzats dins de la pàgina de creació de productes de
Woocommerce.
Incloem un “checkbox” per identificar els productes que podem ser personalitzats i
un desplegable per escollir el tipus. Poden ser murals, pòster, llenços o adhesius.
Aquestes dades les emmagatzemem a la taula “wp_post_meta”.
Dels productes catalogats com subjectes a personalització, eliminem el botó que
permet afegir-los directament al cistell de la compra que inclou per defecte
Woocommerce.
add_action('woocommerce_before_main_content',
'rwh_remove_loop_button');
if(!function_exists('rwh_remove_loop_button')){
function rwh_remove_loop_button(){
global $woocommerce, $post;
25
Figura 6: Producte que permet la personalització
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
$rwh_option_setting=get_post_meta( $post-
>ID,'_rwh_set_option', true );
if($rwh_option_setting=='yes'){
remove_action( 'woocommerce_after_shop_loop_item',
'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary',
'woocommerce_template_single_add_to_cart', 30 ); }}}
Per motius d'usabilitat, informem als clients del preu final del producte, ja que el
sistema de venda és segons la superfície del mateix. Afegim l'opció per calcular el
preu final del producte abans de redirigir-los a l'eina de disseny.
Després d'introduir les mides del producte i sol·licitar el calcul del preu final,
executem petició asíncrona amb Ajax i Jquery on recuperem el preu per metre
quadrat emmagatzemat a la base de dades i calculem l'import total en funció de les
mides. ReproWallArt mostra resultat més el botó per realitzar el disseny.
26
Figura 7: Pàgina front-end del producte
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Afegim al formulari de producte, la llibreria “Jquery Validate” per garantir la integritat
de les dades introduïdes pels usuaris.
Una vegada validat el formulari, si el client decideix realitzar el disseny dins de l'API
d'HP, al clicar el botó “Entra en HP Wallart” passem les dades necessàries
mitjançant el sistema GET a l'arxiu “conecta.php”, que serà l'encarregat d'enviar la
petició a l'API.
27
Figura 8: Preu producte calculat segons mides
Figura 9: Validació de les dades introduïdes pels usuaris
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
A més de les dades que passem via GET a l'arxiu, fem les consultes necessàries a
la base de dades per recollir la informació requerida per treballar dins del “designer”
d'HP, com el codi d'autorització de l'usuari que està en sessió, o el tipus de producte.
//Passem variables a URL HP Designer
header('Location:https://designer.hpwallart.com/
reprodisseny_1?content_context_token='.
$token_ok.'&size='.$width.'x'.
$height.'&sku='$rwh_sku.'&web_link=true&auth_token='.
$rwh_auth_token2.'&language=es');
10.3. Comunicació entre servidors.
La comunicació entre plataformes es realitza mitjançant autorització basada en
Acces Token. Una vegada que l'usuari ha accedit a la plataforma, Hp WallArt envia i
sol·licita informació al nostre programari cada vegada que l'usuari interactua amb
l'eina de disseny.
HP ens envia informació amb diferents variables segons l'estat de la comanda, l'arxiu
“services.php” es l'encarregat de capturar a variable del “path” i gestionar la
informació requerida.
Els requeriments sol·licitats per HP via GET a l'arxiu “services.php” segons l'estat
del projecte són:
• GET:<base_url>/user_info: Demana informació sobre usuari
• GET:<base_url>/projects: Demana informació sobre els projectes de
l'usuari en sessió
• GET:<base_url>/projects/id: Demana informació sobre un projecte en
concret.
Dins de la capçalera de la sol·licitud, HP ens envia X-Auth-Token de l'usuari, el qual
utilitzarem per fer les consultes a la nostra base de dades i enviar la informació en
format json.
if ($path_info == "/user_info"){
$requestauth=$_SERVER['HTTP_X_AUTH_TOKEN'];
$rwh_auth_token_filter=esc_sql($requestauth);
28
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
//Consultem dades usuari AUTH_TOKEN recollit del header
$db_table_name = $wpdb->prefix .'usermeta';
$wp_result = array();
$wp_result = $wpdb->get_results( " SELECT user_id FROM
$db_table_name WHERE meta_value = '".
$rwh_auth_token_filter."' ", ARRAY_A );
$db_table_name2 = $wpdb->prefix .'users';
$wp_result2 =array();
$wp_result2 = $wpdb->get_results("SELECT user_login FROM
$db_table_name2 WHERE ID = '".$wp_result[0]['user_id']."'
", ARRAY_A );
//Passem info usuari format json al designer HP
$user_info = array('id' => $wp_result[0]['user_id'],
'name' => $wp_result2[0]['user_login']);
echo json_encode($user_info);
exit;}
Peticions a “services.php” per enregistrar o editar una comanda:
• POST:<base_url>/projects/: Retorna informació de la comanda creada en
format json.
• PUT:<base_url>/projects/id: Retorna informació de les modificacions de
una comanda en concret.
//Rebem dades d'un projecte
elseif ($_SERVER['REQUEST_METHOD'] == "POST")
{
//Gravem les variables de projecte en curs a la bbdd
//Passem dades rebudes format JSON a la variable $datos
$datos = json_decode($HTTP_RAW_POST_DATA);
$ctn = $datos->{"content_context_token"};
$path = $datos->{"path"};
$name = $datos->{"name"};
$requestauth=$_SERVER['HTTP_X_AUTH_TOKEN'];
$rwh_auth_token_filter=esc_sql($requestauth);
29
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
//Recuperem info de la taula projectes segons ID usuari
$db_table_name3 = $wpdb->prefix .'usermeta';
$wp_result3 = array();
$wp_result3 = $wpdb->get_results("SELECT user_id FROM
$db_table_name3 WHERE meta_value = '".
$rwh_auth_token_filter."' ", ARRAY_A );
$user_id3 = $wp_result3[0]['user_id'];
$table_name = $wpdb->prefix . 'projects';
$wpdb->insert($table_name, array(
'project_name'=> $name,'id_product'=> '',
'user_id'=> $user_id3,'folder_project'=>$path,
'status'=>'In_cart','content_context_token'=> $ctn),
array('%s','%d','%d','%s','%s', '%s'));
$post = array(
'post_author' => '1',
'post_status' => "publish",
'post_title' => $name,
//'post_parent' => "70",
'post_type' => "product");
//Create post
global $wpdb;
$post_id = wp_insert_post( $post, $wp_error );
$table_name2 = $wpdb->prefix . 'projects';
$wpdb->update($table_name2, array(
'id_product'=> $post_id),
array('content_context_token' => $ctn,
'user_id' => $user_id3),array( '%d'),
array('%s','%s' ));
$db_table_name2 = $wpdb->prefix .'projects';
$wp_result2 = array();
$wp_result2 = $wpdb->get_results("SELECT * FROM
$db_table_name2 WHERE content_context_token ='".$ctn."'
", ARRAY_A );
$new_project = array('id' =>$wp_result2[0]['id'] , 'name'
=> $result2[0]['project_name'], 'path' =>$wp_result2[0]
30
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
['folder_project'],'content_context_token'
=>$wp_result2[0]['content_context_token'], 'state' =>
'IN_CART');
echo json_encode($new_project);}}
else if (preg_match('/\/projects\/(\d+)$/', $path_info,
$matches)){
if ($_SERVER['REQUEST_METHOD'] == "GET"){
$datos = json_decode($HTTP_RAW_POST_DATA);
$ctn = $datos->{'content_context_token'};
$db_table_name = $wpdb->prefix .'projects';
$wp_result = array();
$wp_result = $wpdb->get_results("SELECT * FROM
$db_table_name WHERE content_context_token = '".$ctn."'
", ARRAY_A );
$existing_project = array('id' => $wp_result[0]['id'],
'name' => $wp_result[0]['nombre_proyecto'], 'path' =>
$wp_result[0]['folder_project'], 'state' => $wp_result[0]
['status']);
echo json_encode($existing_project);
exit;}
else if ($_SERVER['REQUEST_METHOD'] == "PUT"){
//Recollim id del request path
$project_id = explode('/', $path_info);
$db_table_name2 = $wpdb->prefix .'projects';
$wp_result2 = array();
$wp_result2 = $wpdb->get_results("SELECT * FROM
$db_table_name2 WHERE id = '".$project_id[2]."'", ARRAY_A
);
$updated_project =array('id' => $wp_result2[0]['id'],
'name' => $wp_result2[0]['nombre_proyecto'], 'path' =>
$wp_result2[0]['folder_project'], 'state' =>
$wp_result2[0]['status']);
echo json_encode($updated_project);
exit;}
31
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
5.3. Cistell de la compra.
Una vegada que el client ha finalitzat el producte, la botiga “on-line” necessita
interpretar la informació rebuda d'Hp WallArt per carregar el producte al cistell de la
compra amb les dades correctes.
Degut a que el client final pot modificar les mides del producte dins de l'API d'Hp i
per tant, el preu final canviaria, per cada nova comanda que ens retorna HP, creem
un producte nou dins WooCommerce.
Recollim les dades en format json que ens envia HP i actualitzem el post
creat anteriorment amb les mides, preu i “thumbnails” correctes.
else if (preg_match('/\/projects\/(\d+)\/add_to_cart$/',
$path_info, $matches)){
$project_id = $matches[1];
if ($_SERVER['REQUEST_METHOD'] == "POST")
{
$service_url =
'https://store.hpwallart.com/reprodisseny_1/projects/'.
$project_id;
$curl = curl_init($service_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$curl_response = curl_exec($curl);
if ($curl_response === false) {
$info = curl_getinfo($curl);
curl_close($curl);
die('error occured during curl exec. Additioanl info: ' .
var_export($info));}
curl_close($curl);
$decoded = json_decode($curl_response, true);
$db_table_name6 = $wpdb->prefix .'projects';
$wp_result = array();
$wp_result = $wpdb->get_results("SELECT * FROM
$db_table_name6 WHERE id ='".$project_id."' ", ARRAY_A );
$post_id2 = $wp_result[0]['id_product'];
global $wpdb;
32
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
//Recuperem la imatge del server d'HP
$file =
'https://store.hpwallart.com/reprodisseny_1/projects/'.
$project_id.'/preview_large.png';
$filename = basename($file);
$upload_file = wp_upload_bits($filename, null,
file_get_contents($file));
if (!$upload_file['error']) {
$wp_filetype = wp_check_filetype($filename, null );
$attachment = array(
//Creem post per pujar la imatge a la biblioteca
'post_mime_type' => $wp_filetype['type'],
'post_parent' => $parent_post_id,
'post_title' => preg_replace('/\.[^.]+$/', '',
$filename),
'post_content' => '',
'post_status' => 'inherit'
);
//Insertem imatge al producte
$attachment_id = wp_insert_attachment( $attachment,
$upload_file['file'], $parent_post_id );
if (!is_wp_error($attachment_id)) {
require_once(ABSPATH . "wp-admin" .
'/includes/image.php');
$attachment_data =
wp_generate_attachment_metadata( $attachment_id,
$upload_file['file'] );
wp_update_attachment_metadata( $attachment_id,
$attachment_data );}}
//Actualitzem dades del producte amb el preu i el
thumbnail
update_post_meta($post_id2, '_regular_price',
$decoded["price"]["base"]["price"] );
update_post_meta($post_id2, '_sale_price',
$decoded["price"]["base"]["price"]);
33
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
update_post_meta($post_id2, '_price', $decoded["price"]
["base"]["price"] );
update_post_meta($post_id2, '_type', $decoded["price"]
["base"]["price"] );
update_post_meta($post_id2, '_thumbnail_id',
$attachment_id );
header('Location: http://yourwallart.reprodisseny.com/wp-
content/plugins/reprowallart/includes/rwh_upToCart.php?
id='.$project_id, true, 301);
die();}
Una vegada que hem carregat l'article al cistell de la compra i el client es disposa a
finalitzar la comanda, modifiquem la pàgina “reviews-order.php” que carrega per
defecte WooCommerce per mostrar més informació al client.
Per aconseguir-ho, primer indiquem al programari que busqui l'arxiu modificat dins
del plugin, i sinó el troba, carregarà l'arxiu per defecte de WooCommerce.
//Carreguem la plantilla personalitzada reviews-order.php
modificada per incloure imatges del producte i mides a la
pàgina checkout
add_filter( 'woocommerce_locate_template',
'woo_adon_plugin_template', 1, 3 );
function woo_adon_plugin_template( $template,
$template_name, $template_path ) {
global $woocommerce;
$_template = $template;
if ( ! $template_path )
$template_path = $woocommerce->template_url;
$plugin_path=untrailingslashit( plugin_dir_path( __FILE__
) ) . '/woocommerce/';
$template = locate_template(
array($template_path . $template_name,$template_name));
if( ! $template && file_exists( $plugin_path .
$template_name ) )
34
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
$template = $plugin_path . $template_name;
if ( ! $template )$template = $_template;
return $template;}
Amb aquesta acció i modificant la pàgina “reviews-order.php, mostrem una imatge
prèvia del producte personalitat i les mides del mateix abans de finalitzar la compra.
A part de modificar la pàgina per afegir les imatges del productes, hem incorporat un
camp personalitzat. Hem inclòs la casella de DNI o CIF per si un client necessita
factura de la comanda realitzada. Aquest camp, l'hem afegit dins de l'arxiu
“includes/rwh_add_field_checkout.php”.
35
Figura 10: Pàgina Checkout.php
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
11. APIs utilitzades
Pel desenvolupament del programari hem utilitzat:
• HP WallArt: Api del proveïdor HP nucli de la plataforma de personalització de
productes i raó principal pel desenvolupament de ReproWallArt.
• Advanced REST client: Api utilitzada per establir les primeres
comprovacions sobre l'enviament i rebuda d'informació entre servidors.
• Console API Firebug: Api utilitzada per verificar les funcions Javascript que
realitzen la validació del formulari i les peticions asíncrones.
36
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
12. Prototips
12.1 Lo-Fi
37
Figura 11: Esquema programari en baixa
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
13. Perfils d’usuari
ReproWallArt treballa només amb dos únics perfils d'usuaris clarament diferenciats.
Una vegada integrat dins de la botiga electrònica, hi haurà el perfil d'administrador i
el perfil de client.
• Perfil administrador: Responsable de classificar els productes a
personalitzar pel client i assignar-li preus per metre quadrat.
• Perfil client: Rol que assumeixen els clients de la botiga electrònica. Per
accedir-hi és obligatori el registre dins de la botiga. En el moment del registre,
ReproWallArt li assigna un identificador únic per les comunicacions amb
l'API d'Hp.
14. Usabilitat
Hem tractat la usabilitat del nostre producte des de dos òptiques diferents. La
usabilitat pels administradors de la botiga electrònica i la usabilitat dels usuaris finals.
Pensem que ambdues opcions, el “plugin” treballa de forma transparent i la corba
d'aprenentatge és gairebé inexistent.
Les opcions per classificar els productes com subjectes a personalització dins de
l'eina d'Hp queden integrades dins de la pàgina de creació de producte de
WooCommerce.
Els administradors de la botiga, han d'escollir l'opció de producte personalitat i tipus
en el moment de la seva creació. Per tant, inclouen aquestes opcions dins de les
múltiples que ofereix la pàgina de creació de producte no representa cap
problema afegit pels administradors de la pàgina.
Per part dels usuaris finals, hem utilitzat diferents eines per validar la integritat de les
dades introduïdes al formulari per la personalització del producte. Mitjançant la
biblioteca “Jquery.vallidate.js” de Javascript, establim les regles necessàries perquè
els usuaris només puguin introduir dades numèriques dins del rang de mides
establertes per cada producte.
Per últim, realitzem crides asíncrones per mostrar el preu final per pantalla, un cop
que l'usuari ha introduït les mides del producte que vol personalitzar.
38
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Tal i com hem comentat anteriorment, per motius de seguretat i abans que
l'usuari realitzi el pagament de la comanda, hem modificat la pàgina prèvia al
pagament per mostrar per pantalla una miniatura de les imatges dels productes
dissenyats i les seves mides.
15. Seguretat
La primera mesura de seguretat que hem inclòs en el desenvolupament del
programari i seguint les recomanacions de bones pràctiques, ha sigut afegir el
prefixe “rwh_function” a totes les funcions definides i encarregades del funcionament
de “plugin”. Amb aquesta mesura, evitem que no hi hagin funcions anomenades de
la mateixa forma dins de tota la botiga “on-line”, i puguin entrar en conflicte entre
elles.
A més, apliquem un condicional a les funcions per evitar duplicitats.
if(!function_exists('rwh_Myfunction')){
function rwh_Myfunction(){}}
Per garantir la seguretat del “plugin” hem establert filtres per evitar intrusions de codi
maliciós de terceres persones i evitar accessos no desitjables.
Tots els arxius php incorporen la següent sentència a l'inici del codi per evitar l'accés
directe mitjançant URL.
// Surt, si s'accedeix directament.
if ( !defined( 'ABSPATH' ) ) exit;
Per garantir un codi de identificació X-Auth token únic per usuari, codifiquem el
correu electrònic de registre de l'usuari, més la data amb codificació SHA256.
if(!function_exists('rwh_auth_token_user')){
function rwh_auth_token_user($auth_tu){
$rwh_date=date("YmdHis" );$result=hash('sha256',
'Rg273$#6GT'.$auth_tu.$rwh_date);
return $result;}}
39
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
//Afegeix el Auth_Token a la taula user_meta
add_action( 'user_register', 'rwh_auth_token_save',
10, 1 );
if(!function_exists('rwh_auth_token_save')){
function rwh_auth_token_save( $user_id ) {
if ( isset( $_POST['user_email'] ) )
$rwh_sanitize_email=$_POST['user_email'];
do{$rwh_result_auth_token=add_user_meta( $user_id,
'rwh_auth_token',auth_token_user($rwh_sanitize_email),
true );}while($rwh_result_auth_token);}}
Per garantir i verificar la procedència de les dades introduïdes pels usuaris per
confeccionar el seu producte, afegim la següent funció de WordPress al formulari.
<input type="submit" value="Consulta precio">
<?php wp_nonce_field( 'ajax-login-nonce', 'security' );?>
D'aquesta manera, verifiquem l'origen de les dades en el moment de la recollida.
check_ajax_referer( 'ajax-login-nonce', 'security' );
Com a última mesura de seguretat i per evitar “mysql injeccions” o atacs xsi.
netegem les dades passades via POST del formulari per crear el producte.
$rwhheight = htmlspecialchars($_POST['height']);
$rwhwidth = htmlspecialchars($_POST['width']);
$rwhpost = htmlspecialchars($_POST['postId']);
40
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
16. Tests
Per verificar la robustesa del disseny del programari ReproWallArt, hem realitzat
infinitats de dissenys per corroborar que tot funciona correctament.
De les proves han sorgit errades i aspecte millorables que hem esmenat en la mida
del possible.
Vam detectar un cert alentiment en el disseny del producte dins del “designer” d'Hp.
Per millorar aquest aspecte, vam optimitzar totes les consultes a la base de dades
per recollir només la informació necessària.
• Exemple de consulta amb sobre càrrega de dades.
$db_table_name = $wpdb->prefix .'usermeta';
$wp_result = array();
$wp_result = $wpdb->get_results( " SELECT * FROM
$db_table_name WHERE meta_value = '".
$rwh_auth_token_filter."' ", ARRAY_A );
• Exemple de consulta optimitzada.
$db_table_name = $wpdb->prefix .'usermeta';
$wp_result = array();
$wp_result = $wpdb->get_results( " SELECT user_id FROM
$db_table_name WHERE meta_value = '".
$rwh_auth_token_filter."' ", ARRAY_A );
Per descartar més incidències respecte a la velocitat, vam migrar temporalment
l'entorn de proves a un segon servidor dedicat de molta més capacitat. Vam verificar
que l'endarreriment millorable substancialment.
• Proveïdor: Arsys.
• Sistema operatiu: Windows 2012 R2.
• Memòria RAM: 12Gb
• Emmagatzemament: 2 HD SAS 300 GB.
• Connectivitat: 100 mbps.
Per últim, vam detectar un errada provocada per “cookies”*.
*cookies - incidència comentada dins de l'apartat 21.-bugs d'aquesta memòria.
41
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
17. Versions de l’aplicació
Actualment treballem sobre la versió 1.0 del programari, pensem que el plantejament
proposat per carregar els productes al cistell de la compra de la botiga i actualització
del preu del mateix no és la millor opció possible.
Com hem plantejat la solució al problema, sobrecàrrega la base de dades i alenteix
el rendiment de l'aplicació.
A dia d'avui, perseguim publicar la botiga electrònica el més aviat possible per
rendibilitzar els recursos invertits.
Una possible solució seria treballar amb variables de sessió i emmagatzemar les
particularitats dels productes en variables temporals. Pensem que d'aquesta manera
no sobrecarreguem la base de dades i l'aplicació seria més eficaç.
La versió 2.0 treballarà amb aquest sistema per guanyar velocitat de càrrega, encara
que esperarem a veure els resultat de la primera versió abans de començar amb el
desenvolupament d'una millorada.
18. Requisits d'instal·lació
El desenvolupament del programari ha sigut pensat per implementar-lo juntament
amb les últimes tecnologies web, com HTML5, CSS i Javascript. Per aquest motiu,
la implantació dins de WordPress no ha de presentar cap inconvenient.
Els requisits tècnics mínims necessaris pel correcte funcionament i sobre els quals
hem realitzat les proves són:
• Sistemes operatius: Compatible amb Windows i IOS.
• Navegadors: Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Safari.
• WordPress versió 4.6.1 o superior: CMS pel desenvolupament del
programari sobre la qual, hem realitzats les proves de qualitat.
• WooCommerce versió 2.6.8 o superior: “Plugin” per la creació de la botiga
electrònica i necessari pel funcionament de ReproWallArt.
• Php versió 5.4.4 o superior: Llenguatge de servidor.
• MySql versió 5.5 o superior: Gestor de base de dades.
42
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
19. Instruccions implantació
La implantació del programari ReproWallArt dins de WordPress, segueix els criteris
preestablerts pel CMS per la instal·lació de qualsevol “plugin”.
En poques passes queda integrat dins de la pàgina web on la única condició pel
seu correcte funcionament és que hi hagi instal·lat i activat prèviament el “plugin”
de WooCommerce.
L'usuari importarà la carpeta comprimida en format zip, seguint les instruccions que
mostra WordPress.
Un cop importats els arxius, en el moment de l'activació del programari, aquest
executa les sentències per la creació de les taules necessàries dins de la base de
dades pel seu correcte funcionament.
En el moment que activem l'opció d'eliminar el “plugin” ReproWallArt del sistema,
aquest esborra les taules creades anteriorment dins de la base de dades de
WordPress.
43
Figura 12: Instal·lació ReproWallArt
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
20. Instruccions d’ús
La corba d'aprenentatge del programari ReproWallArt és poc pronunciada, les
úniques opcions disponibles per l'administrador de la pàgina una vegada instal·lat i
activat el “plugin” dins de WordPress són dues:
1.- Classificació del producte: Dins de la pàgina de creació de productes del
programari WooCommerce, incloem una casella per classificar un producte com
subjecte a personalització.
Amb l'activació d'aquesta casella, eliminem el botó “añadir al carrito” i el substituïm
per un formulari on l'usuari final introdueix les mides del seu producte.
44
Figura 13: Classificació de producte
Figura 14: Botó afegir cistell
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
2.- Tipus de producte: Segons les variables que passem al “designer” d'HP via
URL, aquest en mostrarà un producte o un altre per personalitzar. Per aquest motiu,
incloem l'opció d'escollir el diferent tipus de producte.
Tota aquesta informació relativa al producte l'emmagatzemem en la taula “wp-post-
meta” on després la recuperem en el moment de fer la petició d'accés dins d'HP.
Tal i com hem comentat, la manera d'utilitzar el programa per part de l'administrador
de la pàgina és molt intuïtiva ja que les opcions per la configuració del producte
estan integrades dins de la pàgina de creació del mateix.
Per part de l'usuari final, el programari treballa de forma totalment transparent i no té
la necessitat de cap aprenentatge previ per utilitzar-lo.
45
Figura 15: Tipus de producte
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
21. Bugs
Degut a l'arquitectura utilitzada en el disseny de l'eina d'HP, hem detectat una errada
en el sistema que pot perjudicar-nos en la comercialització de productes de gran
format.
La seva filosofia d'un producte per usuari i sessió, perjudica el nostre plantejament
de total llibertat per l'usuari alhora de comprar productes.
Hem detectat que si un usuari modifica la mida o la imatge del disseny en el últim
pas del “designer” i no guarda la feina expressament, al carregar el producte al cistell
de la compra, si torna a l'eina una segona vegada sense tancar sessió per
personalitzar el mateix tipus de producte, la eina li pregunta si vol recuperar el
projecte anterior.
Si el client accepta la proposta d'HP i realitzar una segona vegada el disseny, al
carregar el segon producte al cistell de la compra, modifica els valors del primer.
Hem reportat la incidència al departament tècnic d'HP i estem estudiant la millor
proposta per solucionar la incidència.
És un problema originat per les “cookies” de sessió de l'usuari, l'eina recupera la
última comanda en cas de que l'usuari no l'hagi guardat correctament.
46
Figura 16: Missatge per recuperar projecte anterior
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
47
Figura 17: Correu electrònic departament tècnic Hp
Figura 18: Resposta departament tècnic Hp
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
22. Projecció a futur
Estem plenament convençuts de que el projecte desenvolupat per HP per la
personalització de productes de gran format dins de la seva plataforma és un
projecte viu i en constant evolució.
En un principi teníem dubtes sobre la viabilitat del projecte i si seria una bona decisió
dedicar-hi esforços i recursos per desenvolupar la integració entre plataformes ja que
depenem sempre d'un tercer.
A dia d'avui, sabem que hi han al voltant de 400 clients al territori espanyol utilitzant
l'eina d'Hp. Aquesta xifra la podem extrapolar a nivell mundial ja que és una empresa
de nivell internacional. Pensem que hi han massa clients implicats per deixar morir el
projecte.
A part de la xifra de clients actius, hem sigut informats de manera extraoficial que en
breu espai de temps, incorporaran nous productes a l'eina com “roll-ups” i
pancartes.
48
Figura 19: Captura de pantalla Dashboard Hp
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
23. Pressupost
A continuació detallem el pressupost del programari per WordPress per la
personalització de productes de gran format. L'abast del pressupost inclou el disseny
i desenvolupament del programari quedant exclòs del mateix la creació de la botiga
electrònica.
Aquest pressupost no inclou servies de “hosting” ni dominis per la botiga electrònica.
Perfil Hores
estimades
Preu
per hora
Total
Instal·lació WordPress entorn de proves 2 25,00 € 50,00 €
Disseny i implementació base de dades 3 25,00 € 75,00 €
Autorització i autentificació usuari 5 25,00 € 125,00 €
Classificació de productes com Hp WallArt 8 25,00 € 200,00 €
Disseny formulari sol·licitud mida producte 5 25,00 € 125,00 €
Validació dades formulari producte Jquery 5 25,00 € 125,00 €
Petició asíncrona consulta preu producte 8 25,00 € 200,00 €
Comunicació entre servidors 40 25,00 € 1.000,00 €
Carrega producte cistell 15 25,00 € 375,00 €
Disseny i maquetació pàgina “checkout.php” 10 25,00 € 250,00 €
Test i proves 16 25,00 € 400,00 €
Servei VPS Hosting Linux profe 34,26 € 34,26 €
Base imposable 2.950,26 €
IVA 21% 619,55 €
Total 3.569,81 €
Taula 3: Pressupost programari ReproWallArt
25.1 Forma de pagament
Pagament mitjançant transferència bancària d'un 35 % del total de la base imposable
a la signatura del contracte i la resta a la finalització i entrega del producte.
Número de compte: IBAN ESXX XXXX XXXX XXXX XX XXXX XXX
49
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
24. Anàlisi de mercat
El públic objectiu de l'aplicació abasta tot el mercat espanyol amb connexió a
Internet. Presentem una aplicació molt transparent i amb una corba d'aprenentatge
gairebé inexistent.
Per part de Reprodisseny, S.L., els usuaris només han d'introduir alçada i amplada
del producte per redirigir-se a la plataforma de disseny. Dins de l'API d'Hp, els
usuaris no necessiten cap coneixement avançat per finalitzar el disseny amb èxit ja
que presenten un entorn molt intuïtiu.
Pensem que la nostra botiga “on-line” tindrà una bona acceptació dins del mercat i
especialment els productes per personalitzar ja que no existeixen moltes empreses
amb productes similar ni amb tant experiència dins del mercat de la impressió digital.
50
Figura 20: Entorn disseny HP
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
25. Màrqueting i Vendes
El “plugin” ReproWallArt, representa una part més de la propera botiga electrònica
que la companyia llençarà al mercat. Esperem una bona acceptació entre el “target”
objectiu ja que no existeixen moltes empreses amb el mateix catàleg de productes.
Encara que la marca Reprodisseny està força consolidada al mercat, amb el
llançament de la nova botiga emprendrem accions comercials per guanya visibilitat.
Entre les diferents accions, destaquem campanyes de Google AdWords, anuncis
publicitaris en revistes de decoració i campanyes de “mailing” a empreses
potencialment interessades.
Amb les accions publicitaries més el tràfic a la pàgina per les recerques orgàniques,
pesem que rendibilitzarem el temps i recursos invertits en el desenvolupament de la
botiga electrònica en un espai breu de temps.
26. Conclusions
La meva experiència personal després del desenvolupament del programari ha sigut
molt positiva per diferents raons que expliquem a continuació.
Ha sigut la meva primera experiència laboral real dins del mercat del multimèdia que
m'ha permès posar en pràctica tots els coneixements i competències adquirits durant
el transcurs del grau en multimèdia cursat a la UOC.
En el desenvolupament del programari, he pogut posar en pràctica els coneixements
d'assignatures com, Sistemes de gestió de continguts, programació, programació
web, programació web avançada, disseny de base de dades, i ús de base de dades
entre d'altres.
En segon lloc, destacaria la vesant personal, ja que he aconseguit superar els reptes
que significava el plantejament i desenvolupament d'un projecte de gran
envergadura que d'un principi es presentava molt difícil.
Som conscients de que el projecte és millorable en rendiment o en seguretat, però
són propostes de millora que anirem incorporant en els pròxims mesos.
51
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Annex 1. Lliurables del projecte
Codi font del programari:
• reprowall.php: Arxiu principal del programari, inclou les sentències per la
crida de la resta d'arxius necessaris, funciona de registre d'usuaris, i crides
asíncrones.
• conectar.php: Arxiu que redirigeix als usuaris a la plataforma de disseny.
• servicies.php: Arxiu encarregar de recollir i enviar les peticions al servidor
d'HP.
• unstall.php: Arxiu encarregat de la desinstal·lació del programari i
l'eliminació de la taula a la base de dades.
• Includes/rwh_add_field_checkout.php: Arxiu per la generació de camps
personalitzats dins de la pàgina checkout.php.
• includes/rwh_add_meta_box.php: Arxiu que genera els camps
personalitats a la pàgina de producte.
• includes/rwh_bbdd.php: Arxiu encarregat de crear la taula necessària a la
base de dades
• includes/rwh_form.php: Arxiu que carrega el formulari a la pàgina de
producte.
• includes/rwh_upToCart.php: Arxiu que recupera id del producte per afegir-
lo al cistell de la compra de WooCommerce.
• Woocommerce/checkout/review-order-php: Arxiu per mostrar les imatges
prèvies i mides del producte abans de finalitzar la compra.
• js/function.js: Arxiu amb les regles necessàries per validar el formulari.
• js/jquey.validate.min.js: Llibreria js per validar el formulari.
Memòria projecte
• PAC4_mem_FuentesLeiva_Jordi: Arxiu en format PDF amb la memòria del
projecte ReWallArt.
52
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Annex 2. Codi font (extractes)
• Reprowall.php
// Surt, si s'accedeix directament.
if ( ! defined( 'ABSPATH' ) ) exit;
//Carreguem els arxius necessaris
include_once plugin_dir_path( __FILE__ )
.'/includes/rwh_bbdd.php';
include_once plugin_dir_path( __FILE__ )
.'/includes/rwh_form.php';
include_once plugin_dir_path( __FILE__ )
.'/includes/rwh_add_meta_box.php';
include_once plugin_dir_path( __FILE__ )
.'/includes/rwh_add_field_checkout.php';
//Creem la BBDD en el moment d'activar el plugin
register_activation_hook( __FILE__, 'rwh_create_bbdd' );
// Comprova si Woocommerce està actiu.
if(in_array('woocommerce/woocommerce.php',
apply_filters('active_plugins',get_option
('active_plugins')))){
//Elimina el botó Afegir a la cistella en el producte
(part client).
add_action('woocommerce_before_main_content',
'rwh_remove_loop_button');
if(!function_exists('rwh_remove_loop_button')){
function rwh_remove_loop_button(){
global $woocommerce, $post;
$rwh_option_setting=get_post_meta( $post-
>ID,'_rwh_set_option', true );
if($rwh_option_setting=='yes'){
remove_action( 'woocommerce_after_shop_loop_item',
'woocommerce_template_loop_add_to_cart', 10 );
53
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
remove_action( 'woocommerce_single_product_summary',
'woocommerce_template_single_add_to_cart', 30 );}}}
add_action( 'woocommerce_after_shop_loop_item',
'rwh_remove_add_to_cart_buttons', 1 );
if(!function_exists(rwh_remove_add_to_cart_buttons)){
function rwh_remove_add_to_cart_buttons() {
if( is_product_category() || is_shop()) {
remove_action( 'woocommerce_after_shop_loop_item',
'woocommerce_template_loop_add_to_cart' );}}}
// Afegeix el Auth_Token a la taula user_meta
add_action( 'user_register',
'rwh_auth_token_save', 10, 1 );
if(!function_exists('rwh_auth_token_save')){
function rwh_auth_token_save( $user_id ) {
global $wpdb;
if ( isset( $_POST['user_email'] ) )
$rwh_sanitize_email=$_POST['user_email'];
do{$rwh_result_auth_token=add_user_meta( $user_id,
'rwh_auth_token',rwh_auth_token_user($rwh_sanitize_email)
, true );}
while($rwh_result_auth_token);}}
//Crea el Auth Token
if(!function_exists('rwh_auth_token_user')){
function rwh_auth_token_user($auth_tu){
$rwh_date=date("YmdHis" );
$result=hash('sha256', 'Rg273$#6GT'.$auth_tu.$rwh_date);
return $result;}}
//Carreguem els arxius js necessaris
if(!function_exists('rwh_adding_scripts')){
function rwh_adding_scripts() {
wp_enqueue_script('ajaxSubmit',
plugins_url('/js/functions.js', __FILE__),
array('jquery'),'1.1', true);}}
add_action( 'wp_enqueue_scripts', 'rwh_adding_scripts' );
if(!function_exists('rwh_adding_scriptsv2')){
54
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
function rwh_adding_scriptsv2() {
wp_enqueue_script('validate',plugins_url
('/js/jquery.validate.min.js', __FILE__),
array('jquery'), true);}}
add_action( 'wp_enqueue_scripts',
'rwh_adding_scriptsv2' );
//Carreguem la plantilla personalitzada reviews-
order.php modificada per incloure imatges del producte i
mides a la pàgina checkout
add_filter( 'woocommerce_locate_template',
'woo_adon_plugin_template', 1, 3 );
function woo_adon_plugin_template( $template,
$template_name, $template_path ) {
global $woocommerce;
$_template = $template;
if ( ! $template_path )
$template_path = $woocommerce->template_url;
$plugin_path=untrailingslashit( plugin_dir_path( __FILE__
) ).'/woocommerce/';
// Look within passed path within the theme - this is
priority
$template = locate_template(
array($template_path . $template_name,$template_name));
if( ! $template && file_exists( $plugin_path .
$template_name ) )
$template = $plugin_path . $template_name;
if ( ! $template )
$template = $_template;
return $template;}
function addCustomer(){
global $wpdb;
check_ajax_referer( 'ajax-login-nonce', 'security' );
//Recollim variables del formulari
55
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
$rwhheight = htmlspecialchars($_POST['height']);
$rwhwidth = htmlspecialchars($_POST['width']);
$rwhpost = htmlspecialchars($_POST['postId'])
//Consultem preu producte BBDD
$rwh_sku_price = get_post_meta( $rwhpost,
'_regular_price', true );
//Calculem preu
$rwh_price = ($rwhheight * $rwhwidth) * $rwh_sku_price ;
echo "El precio es de ".$rwh_price." €";?>
<br/><div id="hpwall" class = "single_add_to_cart_button
button alt">
<a href = "http://yourwallart.reprodisseny.com/wp-content/plugins/reprowallart/conectar.php?height=<?php
echo $rwhheight;?>&width=<?php echo $rwhwidth;?
>&postId=<?php echo $rwhpost;?>">Entra HP WallArt</a>
</div><?phpdie();}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');}
//Elimina missatge error JQMIGRATE: Migrate is installed,
version 1.4.0
add_action( 'wp_default_scripts', function( $scripts ) {
if ( ! empty( $scripts->registered['jquery'] ) ) {
$jquery_dependencies = $scripts->registered['jquery']-
>deps;
$scripts->registered['jquery']->deps =
array_diff( $jquery_dependencies, array( 'jquery-migrate'
) );}} );
• services.php
//Fem servir les funcions de wordpress de manera
independent en el webservices.
ini_set('display_errors', 0); error_reporting(E_ALL &
~E_NOTICE);
56
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
$parse_uri = explode( 'wp-content',
$_SERVER['SCRIPT_FILENAME'] );
//require_once( $parse_uri[0] . 'wp-load.php' );
require_once('../../../wp-load.php');
global $current_user, $rwh_auth_token_filter, $session,
$wpdb, $current_user, $post, $product ;
$path_info = !empty($_SERVER['PATH_INFO']) ?
$_SERVER['PATH_INFO'] : empty($_SERVER['ORIG_PATH_INFO'])
? $_SERVER['ORIG_PATH_INFO'] : '');
if ($path_info == "/user_info"){
$requestauth=$_SERVER['HTTP_X_AUTH_TOKEN'];
$rwh_auth_token_filter=esc_sql($requestauth); // Netegem
l'Auth_token rebut i l'asignem a la variable de la
consulta.
//Consultem dades usuari mitjançant AUTH_TOKEN recollit
del header
$db_table_name = $wpdb->prefix .'usermeta';
$wp_result = array();
$wp_result = $wpdb->get_results( " SELECT user_id FROM
$db_table_name WHERE meta_value = '".
$rwh_auth_token_filter."' ", ARRAY_A ); $db_table_name2 =
$wpdb->prefix .'users';$wp_result2 =array();
$wp_result2 = $wpdb->get_results("SELECT user_login FROM
$db_table_name2 WHERE ID = '".$wp_result[0]['user_id']."'
", ARRAY_A );
//Passem info usuari format json al designer HP
$user_info = array('id' => $wp_result[0]['user_id'],
'name' => $wp_result2[0]['user_login']);
echo json_encode($user_info);
exit;}
elseif ($path_info == "/projects"){
if ($_SERVER['REQUEST_METHOD'] == "GET"){
//Recuperem el ID del usuari actual
$requestauth=$_SERVER['HTTP_X_AUTH_TOKEN'];
57
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
$rwh_auth_token_filter=esc_sql($requestauth);
//Recuperem info de la taula projectes segons ID usuari
$db_table_name3 = $wpdb->prefix .'usermeta';
$wp_result3 = array();
$wp_result3 = $wpdb->get_results("SELECT user_id FROM
$db_table_name3 WHERE meta_value = '".
$rwh_auth_token_filter."' ", ARRAY_A );
$user_id3 = $wp_result3[0]['user_id'];
$db_table_name4 = $wpdb->prefix .'projects';
$wp_result4 = $wpdb->get_results("SELECT * FROM
$db_table_name4 WHERE user_id ='.$user_id3.' " );
foreach ( $wp_result4 as $fivesdraft ) {
//Creem arary per emmagatzemar els possibles pojectes del
usuari
$proyectos =array();
//Carreguem les dades de la taula proyectos a l'array
proyecto
$proyecto = array();
$proyecto['id'] =$fivesdraft->id;
$proyecto['name'] = $fivesdraft->nombre_proyecto;
$proyecto['path'] =$fivesdraft->folder_project;
$proyecto['content_context_token'] = $fivesdraft-
>content_context_token;
$proyecto['state'] = $fivesdraft->status;
$proyectos[] = $proyecto; }
echo json_encode($proyectos);
exit;}
//Rebem dades d'un projecte
elseif ($_SERVER['REQUEST_METHOD'] == "POST"){
//Grabem les variables de projecte en curs a la bbdd
//Passem dades rebudes format JSON a la variable $datos
$datos = json_decode($HTTP_RAW_POST_DATA);
58
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
$ctn = $datos->{"content_context_token"};
$path = $datos->{"path"};
$name = $datos->{"name"};
//Recuperem X_auth_token de l'usuari
$requestauth=$_SERVER['HTTP_X_AUTH_TOKEN'];
$rwh_auth_token_filter=esc_sql($requestauth);
//Recuperem info de la taula projectes segons ID usuari
$db_table_name3 = $wpdb->prefix .'usermeta';
$wp_result3 = array();
$wp_result3 = $wpdb->get_results("SELECT user_id FROM
$db_table_name3 WHERE meta_value = '".
$rwh_auth_token_filter."' ", ARRAY_A );
$user_id3 = $wp_result3[0]['user_id'];
//Enregistrem les dades del projecte a la taula
projectes.
$table_name = $wpdb->prefix . 'projects';
$wpdb->insert($table_name, array( 'project_name'=> $name,
'id_product'=> '','user_id'=> $user_id3,
'folder_project'=>$path,
'status'=>'In_cart',
'content_context_token'=> $ctn
),array('%s','%d','%d','%s','%s', '%s'));
//Creem post del tipus producte
$post = array(
'post_author' => '1',
'post_status' => "publish",
'post_title' => $name,
//'post_parent' => "70",
'post_type' => "product");
global $wpdb;
$post_id = wp_insert_post( $post, $wp_error );
59
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
//Actualitzem el id del producte dins de la taula
projectes
$table_name2 = $wpdb->prefix . 'projects';$wpdb-
>update($table_name2, array(
'id_product'=> $post_id),
array('content_context_token' => $ctn,
'user_id=> $user_id3),array('%d'),
array('%s','%s');
//Recuperem les dades del projecte per passar-li en
format json a l'eina d'HP
$db_table_name2 = $wpdb->prefix .'projects';
$wp_result2 = array();
$wp_result2 = $wpdb->get_results("SELECT * FROM
$db_table_name2 WHERE content_context_token ='".$ctn."'
", ARRAY_A );
$new_project = array('id' =>$wp_result2[0]['id'] , 'name'
=> $result2[0]['project_name'],
'path' =>$wp_result2[0]
['folder_project'],'content_context_token'
=>$wp_result2[0]['content_context_token'], 'state' =>
'IN_CART');
echo json_encode($new_project);
}}else if (preg_match('/\/projects\/
(\d+)\/add_to_cart$/', $path_info, $matches)){
$project_id = $matches[1];
if ($_SERVER['REQUEST_METHOD'] == "POST"){
$service_url =
'https://store.hpwallart.com/reprodisseny_1/projects/'.
$project_id;
$curl = curl_init($service_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$curl_response = curl_exec($curl);
if ($curl_response === false) {
$info = curl_getinfo($curl);curl_close($curl);
60
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
die('error occured during curl exec. Additioanl info: ' .
var_export($info));}
curl_close($curl);
$decoded = json_decode($curl_response, true);
$db_table_name6 = $wpdb->prefix .'projects';$wp_result =
array();
$wp_result = $wpdb->get_results("SELECT id_product FROM
$db_table_name6 WHERE id ='".$project_id."' ", ARRAY_A );
$post_id2 = $wp_result[0]['id_product'];
global $wpdb;
//Recuperem la imatge del server d'HP
$file =
'https://store.hpwallart.com/reprodisseny_1/projects/'.
$project_id.'/preview_large.png';
$filename = basename($file);
$upload_file = wp_upload_bits($filename, null,
file_get_contents($file));
if (!$upload_file['error']) {
$wp_filetype = wp_check_filetype($filename, null );
$attachment = array(
//Creem post per pujar la imatge a la biblioteca
'post_mime_type' => $wp_filetype['type'],
'post_parent' => $parent_post_id,
'post_title' => preg_replace('/\.[^.]+$/', '',
$filename),
'post_content' => '',
'post_status' => 'inherit' );
//Insertem imatge al producte
$attachment_id = wp_insert_attachment( $attachment,
$upload_file['file'], $parent_post_id );
if (!is_wp_error($attachment_id)) {
require_once(ABSPATH . "wp-admin" .
'/includes/image.php');
61
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
$attachment_data =
wp_generate_attachment_metadata( $attachment_id,
$upload_file['file'] );
wp_update_attachment_metadata( $attachment_id,
$attachment_data );}}
//Actualitzem dades del producte amb el preu i el
thumbnail
update_post_meta($post_id2, '_regular_price',
$decoded["price"]["base"]["price"] );
update_post_meta($post_id2, '_sale_price',
$decoded["price"]["base"]["price"]);
update_post_meta($post_id2, '_price', $decoded["price"]
["base"]["price"] );
update_post_meta($post_id2, '_type', $decoded["price"]
["base"]["price"] );
update_post_meta($post_id2, '_width',
$decoded["width"] );
update_post_meta($post_id2, '_height', $decoded["height"]
);
update_post_meta($post_id2, '_thumbnail_id',
$attachment_id );
//Verifica que l'alçada del projecte no superi el 3 mts
$str = $decoded["height"];
$num = (int)$str;
if( $num > 300){
header('Location: http://yourwallart.reprodisseny.com/wp-
login.php', true, 301);
exit();
}else{
header('Location: http://yourwallart.reprodisseny.com/wp-
content/plugins/reprowallart/includes/rwh_upToCart.php?
id='.$project_id, true, 301);
exit();}
62
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
exit();}}
else if (preg_match('/\/projects\/(\d+)$/', $path_info,
$matches)){
if ($_SERVER['REQUEST_METHOD'] == "GET"){
$datos = json_decode($HTTP_RAW_POST_DATA);
$ctn = $datos->{'content_context_token'};
$db_table_name = $wpdb->prefix .'projects';
$wp_result = array();
$wp_result = $wpdb->get_results("SELECT * FROM
$db_table_name WHERE content_context_token = '".$ctn."'
", ARRAY_A );
$existing_project = array('id' => $wp_result[0]['id'],
'name' => $wp_result[0]['nombre_proyecto'], 'path' =>
$wp_result[0]['folder_project'], 'state' => $wp_result[0]
['status']);
echo json_encode($existing_project); exit;}
else if ($_SERVER['REQUEST_METHOD'] == "PUT"){
//Recollim id del request path
$project_id = explode('/', $path_info);
$db_table_name2 = $wpdb->prefix .'projects';
$wp_result2 = array();
$wp_result2 = $wpdb->get_results("SELECT * FROM
$db_table_name2 WHERE id = '".$project_id[2]."'", ARRAY_A
);
$updated_project =array('id' => $wp_result2[0]['id'],
'name' => $wp_result2[0]['nombre_proyecto'], 'path' =>
$wp_result2[0]['folder_project'], 'state' =>
$wp_result2[0]['status']);
echo json_encode($updated_project);
exit;}}
//control de errores else{
header('HTTP/1.1 500 Internal Server Error');
header('Content-Type: text/plain');
echo "Unknown Request";}fclose($h);
63
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
• rwh_add_meta_box.php
add_action( 'woocommerce_product_options_general_product_
data', 'rwh_add_custom_general_fields' );
// Creem el radiobutton per catalogar els productes
HPWallart
if(!function_exists('rwh_add_custom_general_fields')){
function rwh_add_custom_general_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
woocommerce_wp_checkbox(
array(
'id' => '_rwh_set_option',
'wrapper_class' => 'checkbox_class',
'label' => __('Repro WallArt',
'woocommerce' ),
'description' => __( 'Producto
personalizado!', 'woocommerce' ) ) );
echo '</div>';
echo '<div class="options_group">';
woocommerce_wp_select(
array(
'id' => '_type',
'label' => __( 'Tipo de producto',
'woocommerce' ),
'options' => array(
'WA_WC' => __( 'Mural', 'woocommerce' ),
'WA_WP' => __( 'Poster', 'woocommerce' ),
'WA_CA' => __( 'Lienzo', 'woocommerce' ),
'WA_WD' => __( 'Adhesivo', 'woocommerce')
) ));
echo '</div>';}}
// Gravem els canvis a la bbdd
add_action( 'woocommerce_process_product_meta',
'rwh_save_settings' );
64
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
if(!function_exists('rwh_save_settings')){
function rwh_save_settings( $post_id ){
$rwh_woo_checkbox = isset( $_POST['_rwh_set_option'] ) ?
'yes' : 'no';
update_post_meta( $post_id, '_rwh_set_option',
$rwh_woo_checkbox );
$woocommerce_select = $_POST['_type'];
if( !empty( $woocommerce_select ) )
update_post_meta( $post_id, '_type',
esc_attr( $woocommerce_select ) );}}
65
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Annex 3. Llibreries/Codi extern utilitzat
Pel desenvolupament de plugin hem utilitzat dues llibreries externes:
• Jquery: Conjunt de funcions Javascript que incorpora per defecte la
instal·lació típica de WordPress. Hem utilitzat Jquery per fer les peicions
AJAX.
• Jquery Validate: Llibreria també en Javascript per validar les dades del
formulari del costat client.
66
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Annex 4. Captures de pantalla
67
Figura 21 Arquitectura Hp Wall Art.
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Annex 5. Llibre d’estil
Estils proposat pel desenvolupament de la botiga electrònica de Repro Disseny i on
instal·larem el programari ReproWallArt.
Logotips
Paleta de colors.
Paleta tipogràfica i mida de fonts.
La família tipogràfica utilitzada per la botiga on-line serà Titillium Web, distribuïda sota
llicència Open Font License.
Les mides tipogràfiques dels diferents textos seguiran la successió de Fibonacci.
• <h1> 34 punts
• <h2> 21 punts
• cos pàgina 13 punts.
68
Figura 23: Paleta de colors
Figura 22: Logotip botiga
electrònica
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Annex 6. Resum executiu
Nom comercial
ReproWallArt
Resum comercial
ReproWallArt programari desenvolupat amb finalitat d'integrar l'eina proporciona pel
fabricant d'impressores Hp als seus clients, per la personalització de productes
d'impressió de gran format per part dels usuaris finals.
Model de negoci
El “plugin” desenvolupat s'integra dins de WordPress juntament amb
WooCommerce, per desenvolupar la propera botiga “on-line” que l'empresa Repro
Disseny, S.L., llençarà al mercat. Aquest serà el seu principal canal de vendes a la
xarxa .
Expertise
Repro Disseny, gaudeix d'una amplia experiència dins del mercat de la impressió
digital, amb aquesta eina aconsegueix ampliar el seu catàleg de productes oferint als
clients finals la possibilitat de personalitzar els seus dissenys.
Productes i serveis
La botiga electrònica de Repro Disseny, oferirà productes per la decoració d'espais,
principalment per decorar parets.
D'entre els productes disponibles a la botiga, ReproWallArt juga un paper molt
important ja que permet al usuaris finals personalitzar productes.
Aquest dissenys es realitzaran dins de l'eina que ofereix Hp i on gracies al
programari ReproWallArt, els usuaris finals podran connectar-se.
Mercat
Ens dirigim a un públic molt ampli, el “target” objectiu són persones d'edat compresa
entre 18 i 65 anys de parla hispana amb connexió a Internet i mínims coneixements
de la xarxa.
69
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Competència
Encara que qualsevol empresa de impressió que tingui d'una impressora del tipus
“plotter”, té accés a l'eina de disseny de forma gratuïta, el nostre desenvolupament
ens ofereix un fet diferenciador de la resta de competidors.
Repro Disseny, pot personalitzar qualsevol tipus de substrat i així oferir la gama de
qualitats i preus més amplia del mercat.
Pla de màrqueting
Desenvolupem el pla de màrqueting basat en les quatre p; “product”, “price”,
“place” i “promotion”.
• Product: Oferim un producte totalment personalitzat. Els usuaris finals són els
autors de les creacions. Pensem que són productes amb un valor afegit ja que
són únics per cada client i és una valor per promocionar.
• Price: La línia de preus per metre quadrat dels productes personalitzats serà
superior als preus de les impressions de material estàndard. La exclusivitat d'un
producte implica pagar un preu més alt per ells.
• Place: Gracies a la infraestructura de Repro Disseny, els productes poden lliurar-
se a l'agencia de transport el mateix dia que arriba la comanda. Farem entregues
en 24/48 hores. Pensem que és un aspecte positiu pels clients que hem de
publicitar.
• Promotion: Utilitzarem campanyes Google AdWords per atreure públic a al
pàgina i estratègies de SEO per atreure recerques orgàniques.
Inversió inicial i costos a curt i mitjà terminis
Per iniciar la comercialització de productes imprimibles de gran format, i posar en
funcionament el programari ReproWallArt, contemplem les despeses originades en
la creació del “plugin” més la botiga on-line.
• Cost del desenvolupament: 2.950,20 €.
• Servidor Privat Virtual Administrat Pro: 671,07 €/any.
• Registre i gestió de dominis: 14,00 €/any.
• Virtue premium (tema WordPress) : 40,00 €.
• Campanya SME Google Adwords: 500 €.
• Inversió total primer any: 4.175,27 €.
70
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Projecció econòmica curt i mitjà terminis i ROI
La tarifa de preus dels productes encara està per determinar degut a que no sabem
la quantitat de qualitats disponibles per cada tipus de producte. La manera de
calcular-ne el preu de tarifa seguirà la regla següent:
cost instal·lacions i maquinària + despeses fixes + benefici net = PVP
A partir de la despesa fixa que representa produir un metre quadrat de material
imprès, calcularem la resta de valor repartits en; despesa fixa 25 %, cost
manteniment instal·lacions i maquinària 25 % i un 50 % del preu dedicat als
beneficis.
DAFO
Debilitats
• Poca experiència en el
desenvolupament de programari.
• Poca velocitat del programari
• Falta d'experiència en la
comercialització de productes on-line.
Fortaleses
• Llibertat per incloure tots els
productes que vulguem catàleg.
• No depenem del desenvolupament
del codi per part d'un tercer
Amenaces
• Depenem de les decisions d'un únic
proveïdor, Hp.
• Possible incursió de la competència
dins del mercat.
Oportunitats
• Mercat sense limitacions
geogràfiques.
• La compra on-line està pujant.
• Oferim un producte únic per cada
client.
Taula 5: Taula DAFO
71
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Annex 7. Glossari/Índex analític
A
• API: Conjunt de procediment, funcions i mètodes per connectar programari.
C
• CMS: “Content management systems”, programari informàtic per la creació i gestió
de contingut a la xarxa.
• Cookies: Codi informàtic amb informació de la navegació de l'usuari a la xarxa.
D
• Designer: Eina d'Hp pel disseny de productes de gran format.
H
• HP: Fabricant de consumibles i impressores.
J
• Javascript: Llenguatge del costat client per interactuar amb documents HTML
• Jquery: Llibreria Javascript.
M
• MySQL Gestor de base de dades.
P
• PHP: Llenguatge de programació del costat del servidor
• Plugin: Programari desenvolupat per instal·lar a CMS:
• Programari: Conjunt de documentació i procediments que realitzen alguna tasca
mitjançant un ordinador.
R
• ReproWallArt: Plugin per WordPress
W
• WooCommerce: Plugin per crear botiga electrònica dins de WordPress.
• WordPress: CMS per la creació i gestió de llocs web.
72
Disseny i desenvolupament ReproWallArt -programari per WordPress
Treball final de grau – Grau en multimèdia
Jordi Fuentes Leiva
Annex 9. Bibliografia
Williams, B., Damstra, D., Stern, H., - 2013 – WordPress: diseño y desarollo.
Anaya Multimedia – Anaya Interactiva. ISBN 8441533962 9788441533967.
Rauland, P., - 2015 – Woocommerce Cookbook. Packt Publishing. ISBN
178439405X 9781784394059.
Writing a Plugin, – [consulta en línia]. [data consulta: 25-09-2016]. Disponible:
https://codex.wordpress.org/Writing_a_Plugin.
Kumar Singh, A., -10 abril 2008 - Simplified AJAX For WordPress Plugin
Developers using Jquery – [consulta en línia]. Disponible:
http://thecancerus.com/simplified-ajax-for-wordpress-plugin-developers-using-jquery.
[Data consulta: 15-11-2016].
Pataki, D., - 18 Octubre 2011 – How to use AJAX In WordPress – [consulta en línia].
Disponible: https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-
wordpress. [Data consulta: 20-11-2016].
Pataki, D., - 18 Novembre 2015 - Adding Scripts and Styles to WordPress the Right
Way With Enqueueing - [consulta en línia]. Disponinle:
https://premium.wpmudev.org/blog/adding-scripts-and-styles-wordpress-
enqueueing/?nct=b&utm_expid=3606929-
85.mSQ3nlVLSHShaT4smJ6ikw.1&utm_referrer=https%3A%2F
%2Fpremium.wpmudev.org%2Fblog%2Fusing-ajax-with-wordpress%2F.
[Data consulta: 08-11-2016]
Tomàs, E., - 28 Abril 2012 – Entendiendo oAuth, breve explicación sobre oAuth 1.0
[consulta en línia] Disponible:
https://es.scribd.com/document/91623356/Entendiendo-oAuth. [Data consulta: 05-
09-2016].
73
Top Related