Aplicació gamificada per botigues de roba sostenible

! ! ! ! ! ! ! Aplicació(gamificada(per(botigues(de( roba(sotenible( Informe!de!seguiment! ! ! ! ! ! ! ! ! ! ! Autor:!Pau!Torrents!i!Gallego! Director:!Pau!Fonseca!i!Casas! 19!de!Juny!de!2018! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 2! Índex(de(continguts( 1.!Introducció( 5! 1.1.!Context! 5! 1.2.!Actors! 5! 2.!Estat(de(l’art( 6! 2.1.!Contextualització! 6! 2.2.!Estudi!de!mercat! 7! 3.!Formulació(del(problema( 9! 3.1.!Problema! 9! 3.2.!Objectius! 9! 4.!Abast(del(projecte( 10! 4.1.!Abast!10! 4.2.!Reptes!12! 5.!Metodologia( 14! 5.1.!SCRUM!14! 5.2.!SCRUM!aplicat!al!projecte!15! 6.!Planificació(16! 6.1.!Autenticació!16! 6.2.!Informació!sobre!els!certificats!16! 6.3.!Llistat!botigues!16! 6.4.!Filtrat!botigues!17! 6.5.!Consulta!de!peces!de!roba!d’una!botiga!17! 6.6.!Geolocalització!17! 6.7.!Gestió!d’usuari!18! 6.8.!Gestió!de!botigues!18! 6.9.!Gestió!de!peces!de!roba!18! 6.10.!Informació!de!l’aplicació!19! 7.!Recursos( 20! 7.1.!Recursos!humans!20! 7.2.!Microserveis!20! 7.3.!Aplicació!iOS!20! 7.4.!Aplicació!Android!20! 7.5.!Aplicació!Universal!Windows!Platform!21! 7.6.!Pàgina!estàtica!d’informació!de!l’aplicació!21! 8.!Gestió(econòmica(22! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 3! 8.1.!Consideracions!inicials!22! 8.2.!Pressupost!de!recursos!humans!22! 8.3.!Pressupost!de!hardware!23! 8.4.!Pressupost!de!software!23! 8.5.!Costos!indirectes!24! 8.6.!Pressupost!total!24! 9.!Sostenibilitat(i(compromís(social(25! 9.1.!Àrea!econòmica!25! 9.2.!Àrea!social!25! 9.3.!Àrea!ambiental!25! 9.4.!Puntuació!sostenibilitat!25! 10.!Microserveis( 26! 10.1.!Requisits!26! 10.2.!Disseny!26! 10.3.!Implementació!30! 11.!Aplicacions( 34! 11.1.!Requisits!34! 11.2.!Disseny!34! 11.3.!Implementació!42! 12.!Conclusions(43! 13.!Feina(futura( 44! 14.!Annex( 45! 14.1.!Diagrama!de!Gantt!45! 15.!Webgrafia(46! ! ! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 4! Índex(de(figures( Figura!1:!Imatges!de!la!fàbrica!de!Bangladesh,!ensorrada! 6! Figura!2:!Exemple!de!classificacions!de!peces!de!roba!sostenible! 7! Figura!3:!Logo!de!l'aplicació!Ethical!Time! 8! Figura!4:!Arquitectura!dels!sitemes!de!comunicació!10! Figura!5:!API!amb!microserveis,!gestionant!múltiples!bases!de!dades!12! Figura!6:!Arquitectura!final!dels!microserveis!27! Figura!7:!Entitats!del!microservei!de!trofeus!27! Figura!8:!Entitats!del!microservei!de!rols!28! Figura!9:!Entitats!del!microservei!d'usuaris!28! Figura!10:!Entitats!del!microservei!de!categories!de!roba!29! Figura!11:!Entitats!del!microservei!de!peces!de!roba!29! Figura!12:!Entitats!del!microservei!de!botigues!30! Figura!13:!Arquitectura!en!4!capes!31! Figura!14:!Pàgina!inicial!de!l'aplicació!a!les!diverses!plataformes!35! Figura!15:!Pàgina!del!mapa!de!l'aplicació!36! Figura!16:!Pàgina!amb!el!llistat!de!les!botigues!disponibles!36! Figura!17:!Pàgina!que!requereix!autenticació!37! Figura!18:!Pàgina!de!favorits!de!l'aplicació!38! Figura!19:!Pàgina!de!detall!d'una!botiga!39! Figura!20:!Pàgina!d'informació!de!l'usuari!40! Figura!21:!Pàgina!d'informació!dels!certificats!41! Figura!22:!Exemple!de!pàgina!de!gestió!42! ! ( Índex(de(taules( Taula!1:!Desglossament!de!costos!de!les!històries!d’usuari!del!projecte!22! Taula!2:!Desglossament!de!costos!de!hardware!23! Taula!3:!Desglossament!de!costos!de!software!23! Taula!4:!Desglossament!de!costos!indirectes!24! Taula!5:!Desglossament!de!pressupostos!totals!24! Taula!6:!Puntuació!de!la!sostenibilitat!del!projecte!25! ! !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 5! 1. Introducció( 1.1. Context( Aquest!projecte!es!un!Treball!de!Fi!de!Grau!de!la!Facultat!d’Informàtica!de!Barcelona!(Universitat! Politècnica!de!Catalunya),!concretament!de!l’especialitat!d’Enginyeria!del!Software.!El!projecte! és!ofert!pel!professor!Pau!Fonseca!Casas,!a!partir!d’un!projecte!de!l’escola!de!Disseny!on!es!va! fer!una!primera!especificació!de!la!idea.! L’objectiu!del!projecte!és!oferir!una!solució!software!en!forma!d’aplicació!mòbil!gamificada!que! permeti!als!usuaris!obtenir!més!informació!sobre!l’estat!i!l’impacte!social!i!mediambiental!de!la! roba!que!compren,!així!com!conèixer!quines!botigues!ofereixen!certs!tipus!de!peces!de!roba.! 1.2. Actors( A!continuació,!es!definiran!els!actors!principals!d’aquest!projecte,!és!a!dir,!qualsevol!persona! que!tingui!algun!tipus!d’implicació!en!el!desenvolupament!del!projecte!o!n’estigui!interessada.! Director( El!director!del!projecte!és!professor!Pau!Fonseca!Casas,!que!va!oferir!el!treball!al!fòrum!de!la! facultat.!Ell!és!qui!va!marcar!els!primers!requeriments!i!qui!va!aportar!els!primers!dissenys!de!la! facultat!de!disseny.! Desenvolupador( El!grup!de!desenvolupadors!està!format!únicament!per!mi,!Pau!Torrents,!que!duré!a!terme!totes! les!fases!del!desenvolupament!del!projecte.! !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 6! 2. Estat(de(l’art( 2.1. Contextualització( La!societat!ha!comprat!roba!sense!fixar-se!en!el!seu!origen!des!de!sempre.!Pocs!dissenyadors! s’han!preocupat!de!l’impacte!ambiental!i!social!de!les!peces!de!roba!dissenyades,!tant!en!les! fases!de!fabricació!i!obtenció!dels!materials,!com!en!la!seva!utilització.! Les!condicions!de!feina!dels!treballadors!de!les!fàbriques!i!camps!d’on!s’obtenen!els!materials! són!habitualment!precàries.!Per!posar!un!exemple,!al!2013!una!fàbrica!tèxtil!de!Bangladesh! abarrotada!de!treballadors!es!va!ensorrar,!causant!1.134!morts!i!més!de!2.500!ferits.!Tot!i!això,! les!condicions!laborals!zones!com!Bangladesh,!la!Xina!o!Cambodja!no!van!millorar,!zones!que! estem!acostumats!a!veure!com!a!origen!de!les!peces!de!roba!que!comprem!habitualment.! ! Figura'1:'Imatges'de'la'fàbrica'de'Bangladesh,'ensorrada' I!si!parlem!dels!productes!i!les!condicions!dels!cultius!de!materials!usats!en!la!fabricació!de!roba,! la!cosa!no!millora.!Almenys!8.000!substàncies!químiques!s’utilitzen!en!el!procés!de!convertir!les! matèries!primeres!en!tèxtil,!i!el!25%!dels!pesticides!són!utilitzats!en!el!cultiu!del!cotó!no!orgànic.! Arrel!de!l’impacte!mediambiental!que!suposa!fabricar!una!samarreta,!les!condicions!laborals!en! les!que!treballen!les!persones!encarregades!de!confeccionar!la!roba,!del!país!del!que!procedeix! cadascuna,!i!del!fet!que!cada!cop!més!gent!està!conscienciada!amb!les!conseqüències!de!vestir! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 7! roba!no!sostenible,!molts!dissenyadors!i!empreses!estan!decidint!apostar!més!per!una!fabricació! sostenible!i!ecològica.! Quan!parlem!de!roba!sostenible,!parlem!de!roba!fabricada!amb!el!menor!impacte!ecològic!i! social!possible.!Mitjançant!certificacions!ambientals,!certificacions!ecològiques,!responsabilitat! social!i!certificacions!globals,!els!productes!son!classificats,!i!així!els!compradors!són!capaços! d’obtenir!peces!de!roba!segons!els!seus!ideals.! ! Figura'2:'Exemple'de'classificacions'de'peces'de'roba'sostenible' Però! trobar!aquestes! certificacions! i,! conseqüentment! botigues! que! comptin! amb! aquestes! certificacions,!és!difícil!avui!en!dia.!Per!això!el!desenvolupament!d’una!aplicació!mòbil!permetrà! posar! en! contacte! aquests! compradors! amb! els! productes! desitjats,! d’una! forma! ràpida! i! còmode.!A!més!els!aspectes!de!gamificació!de!l’aplicació!promouran!d’una!forma!entretinguda! i!dinàmica!el!consum!d’aquests!productes,!amb!la!intenció!d’ampliar-ne!la!demanda!i!reduir!la! demanda!de!peces!de!roba!no!sostenibles.! 2.2. Estudi(de(mercat( Per!situar!el!projecte!dins!del!marc!de!solucions!ja!existents,!farem!un!estudi!de!context,!en!el! qual!veurem!quines!solucions!alternatives!tenim!per!trobar!botigues!que!ofereixin!peces!de!roba! sostenible.! Ethical(Time( Ethical!Time!és!la!primera!i!única!aplicació!de!roba!sostenible.!Per!casualitat,!han!començat!el! seu!desenvolupament!alhora!que!el!desenvolupament!d’aquest!projecte,!i!per!tant!encara!no! està! en! funcionament.! Organitzada! per! un! estudiant! de! Publicitat! i! Relacions! Públiques,! l’objectiu!és!el!mateix!que!el!d’aquest!treball!de!fi!de!grau:!oferir!als!usuaris!informació!sobre! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 8! les!botigues!que!ofereixen!peces!de!roba!sostenible,!disminuint!així!doncs!el!desconeixement! d’aquests!establiments!i!potenciant!el!consum!dels!productes!sostenibles!en!front!dels!que!no! ho!són.! ! Figura'3:'Logo'de'l'aplicació'Ethical'Time' Timeout.es( El!portal!web!Timeout.es!ofereix!un!portal!amb!una!llista!de!botigues!de!roba!sostenible!de! Barcelona.! S’hi! pot! accedir! mitjançant! el! següent! enllaç:! https://www.timeout.es/barcelona/es/tiendas/tiendas-de-moda-etica.! Però! el! portal! no! compta! amb! una! quantitat! gaire! extensa! de! botigues,! i! és! necessari! accedir! a! la! web! per! consultar-ho,!mentre!que!amb!l’aplicació!oferirem!una!forma!més!ràpida!i!còmode!de!consultar! les!botigues!properes.! Altres( Altres!portals!web!com!Timeout.es!ofereixen!també!informació!sobre!aquestes!botigues,!però! la!seva!utilitat!i!efectivitat!és!similar!a!la!d’aquest!portal.!És!necessària!una!aplicació!mòbil!que! permeti!trobar!ràpidament!les!botigues!més!properes,!així!com!informació!sobre!els!diferents! certificats.! !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 9! 3. Formulació(del(problema( 3.1. Problema( La!fabricació!de!la!major!part!de!les!peces!de!roba!del!mercat!té!un!efecte!mediambiental!i!social! perjudicial! pel! planeta.! S’utilitzen! productes! químics! per! cultivar! els! productes! tèxtils! i! les! condicions!laborals!dels!treballadors!de!les!fàbriques!són!habitualment!nefastes.! La!ciutadania!cada!cop!està!més!conscienciada!a!l’hora!d’escollir!la!roba!que!compra.!Però!les! opcions!que!té!per!dur!a!terme!aquestes!decisions!és!molt!reduïda.!Com!veurem!a!l’estudi!de! context,!no!hi!ha!gairebé!alternatives!per!trobar!botigues!que!ofereixin!peces!de!roba!fabricades! respectant!el!medi!ambient!i!social.! Per! això,! construirem! un! sistema! que! farà! d’enllaç! entre! aquestes! botigues! que! ofereixen! productes!sostenibles!i!els!ciutadans!que!busquen!aquest!tipus!de!productes!de!roba,!en!una! primera!aproximació!només!a!Barcelona.! 3.2. Objectius( L’objectiu!principal!és! construir!una! plataforma!mòbil!destinada!a!dispositius!iOS!i!Android,! suportat! per! una! sèrie! de! microserveis,! una! plataforma! d’informació! de! l’aplicació! i! una! plataforma!web!de!gestió!de!continguts.! Més!concretament,!hauré!de!desenvolupar!els!següents!punts:! • Una! aplicació! multiplataforma,! desenvolupada! amb! la! tecnologia! Xamarin,! que! ens! permet! compartir! gran! part! del! projecte! entre! les! dues! plataformes! mòbil! (iOS! i! Android).! • Els!microserveis!adients!per!construir!una!aplicació!modular!i!mantenible.! • Una!plataforma!web!amb!informació!bàsica!sobre!les!característiques!i!funcionalitats!de! l’aplicació,!a!mode!de!presentació.! • Una!plataforma!web,!o!backoffice,!per!gestionar!les!botigues,!les!peces!de! roba,!la! informació! de! l’usuari...! Aquesta! plataforma! accedirà! als! mateixos! microserveis! mencionats!anteriorment.! Les!característiques!concretes!d’aquests!serveis!i!plataformes!els!trobem!explicats!amb!més! profunditat!al!següent!apartat.! ! ! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 16! 6. Planificació( En! aquest! apartat! definirem! les! històries! d’usuari! més! generals! per! a! dur! a! terme! les! funcionalitats!del!projecte.!Més!endavant!separarem!aquestes!històries!d’usuari!en!històries! d’usuari! més! petites! i! concretes,! que! formaran! part! del! backlog.! No! utilitzarem! aquestes! històries!poc!concretes!al!backlog!perquè!abarcarien!massa!desenvolupament,!i!no!controlaríem! d’una!forma!efectiva!la!definició!de!tasques.! Cada!història!d’usuari!constarà!d’una!definició,!d’una!petita!descripció!i!una!primera!estimació! de!costos!temporals.!Aquests!costos!venen!donats!arrel!de!la!meva!experiència!personal!amb! microserveis!en!tecnologia!.Net!i!en!els!sistemes!de!Microsoft!Azure.! Tots!els!costos!temporals!i!la!planificació!es!poden!trobar!a!l’Annex!amb!el!diagrama!de!Gantt.! 6.1. Autenticació( Com!a!usuari,!vull!poder!registrar-me!i!identificar-me!a!l’aplicació,!per!a!poder!seguir!el!meu! progrés!dins!del!sistema!gamificat.! Volem!construir!un!sistema!d’autenticació!que!ofereixi!a!l’usuari!la!possibilitat!de!registrar-se!a! l’aplicació!mitjançant!e-mail!i!contrasenya,!Facebook!i!Google.!Aquest!sistema!constituirà!un!sol! microservei,!que!enllaçarà!els!tres!tipus!de!registre!i!identificació.! El! cost! temporal! d’aquesta! història! temporal! és! d’un! Sprint! pel! Back-End,! comptant! implementació,! testing! i! publicació;! i! de! mig! Sprint! pel! Front-End! de! l’aplicació.! El! disseny! d’aquesta! història! d’usuari! és! reduït,! donat! que! només! necessitem! una! pàgina! on! poder! seleccionar!quin!tipus!de!registre!o!identificació!volem.! 6.2. Informació(sobre(els(certificats( Com!a!usuari,!vull!poder!identificar!ràpidament!el!significat!dels!certificats!de!les!peces!de!roba,! per!a!poder!tenir!un!criteri!ràpid!a!l’hora!d’escollir!una!peça!de!roba.! Per!donar!informació!a!l’usuari!construirem!una!pàgina!a!l’aplicació!amb!informació!sobre!tots! els!certificats!disponibles.! El!cost!temporal!d’aquesta!història!és!d’un!dia,!donat!que!no!requereix!de!Back-End!(almenys! en!una!primera!iteració!mostrarem!valors!directament!de!l’aplicació).! 6.3. Llistat(botigues( Com!a!usuari,!vull!poder!obtenir!un!llistat!de!les!botigues!ordenades!per!rellevància!i!proximitat.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 17! Per! dur! a! terme! aquesta! història! d’usuari! construirem! un! microservei! de! botigues,! amb! un! endpoint! de! consulta! de! botigues! que! ja! retornarà! la! llista! de! botigues! ordenada.! A! part,! construirem!una!pàgina!a!l’aplicació!amb!aquesta!informació.! El!cost!temporal!de!la!construcció!del!Back-End!és!de!dos!dies,!amb!un!dia!extra!de!testeig!i! publicació!a!Microsoft!Azure.!Pel!desenvolupament!del!Back-End!el!cost!temporal!és!de!dos!dies,! per!construir!una!pàgina!modular!i!mantenible.! 6.4. Filtrat(botigues( Com! a! usuari,! vull! poder! filtrar! les! botigues! segons! criteris! de!sostenibilitat,! per! a! obtenir! ràpidament!una!cerca!dels!productes!que!m’interessen.! Utilitzarem!el!mateix!microservei!desenvolupat!a!la!història!2.3.!Llistat!de!Botigues.!Afegirem!un! recurs!o!endpoint!de!filtratge.! El!cost!temporal!és!d’un!dia!pel!Back-End,!i!de!dues!hores!pel!Front-End,!donat!que!ja!tindrem! implementada!una!part!tant!del!Back-End!com!del!Front-End.! 6.5. Consulta(de(peces(de(roba(d’una(botiga( Com!a!usuari,!vull!poder!veure!quines!peces!de!roba!ofereix!cada!botiga,!amb!les!certificacions! pertinents,!per!a!poder!consultar!les!peces!de!roba!disponibles.! Per!a!aquesta!història!d’usuari!crearem!un!altre!microservei!de!peces!de!roba,!amb!un!filtratge! per!botiga.!A!l’aplicació!crearem!una!pàgina!de!detall!de!la!botiga!amb!la!llista!de!peces!de!roba! que!ofereix.! El!cost!temporal!és!d’un!dia!pel!Back-End,!comptant!codificació,!i!un!altre!dia!per!la!publicació!i! el!testeig.!Pel!Front-End,!el!cost!temporal!de!desenvolupar!una!pàgina!de!detall!de!la!botiga!amb! una!llista!de!les!peces!de!roba!que!ofereix!és!de!dos!dies.! 6.6. Geolocalització( Com! a! usuari,! vull! poder! veure! quines! botigues! tinc! més! a! prop,! per! a! poder! gestionar! ràpidament!quines!botigues!tinc!disponibles.! Per! dur! a! terme! aquesta! història! d’usuari! utilitzarem! el! mateix! microservei! de! botigues! ja! construït!a!la!història!d’usuari!2.3.!Llistat!de!botigues,!i!el!recurs!creat!a!la!història!d’usuari!2.4.! Filtrat!botigues.!Afegirem!el!filtrat!per!localització.!A!més,!utilitzarem!la!API!de!Google!Maps!per! presentar! a! l’usuari! una! pàgina! amb! un! mapa! on! constaran!les! botigues! de! l’aplicació! més! properes.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 18! El!cost!temporal!del!Back-End!d’aquesta!història!d’usuari!és!de!dues!hores,!donat!que!ja!existirà! tot!el!sistema,!i!només!l’haurem!de!modificar!per!incloure!el!filtre!per!localització.!El!cost!de! construir!la!pàgina!de!l’aplicació!és!de!dos!dies,!donat!que!hem!de!construir!un!sistema!que! utilitzi!l’API!de!Google!Maps.! 6.7. Gestió(d’usuari( Com!a!usuari,!vull!poder!veure!les!meves!dades,!inclosos!els!meus!punts!del!sistema!gamificat.! Construirem! un! altre! microservei! d’usuaris! per! consultar-ne! les! dades.! A! part,! haurem! de! construir!a!l’aplicació!un!menú!lateral!amb!la!informació!de!l’usuari.! El!cost!temporal!del!Back-End!d’aquesta!història!d’usuari!és!d’un!dia!per!la!implementació,!i!un! altre!dia!per!la!publicació!i!el!testeig.!Pel!Front-End!necessitarem!una!mica!més!de!temps,!ja!que! hem!de!construir!tot!el!layout!del!menú!lateral.!Necessitarem!tres!dies.! 6.8. Gestió(de(botigues( Com!a!administrador,!vull!poder!gestionar!les!botigues!que!ofereix!l’aplicació.! Dins!de!l’aplicació!per!Windows,!construirem!un!mòdul!de!gestió!de!continguts,!dins!del!qual!es! podran!introduir,!modificar!i!eliminar!botigues.! El!cost!d’aquesta!història!d’usuari,!que!haurem!de!dividir!en!tasques!més!petites,!serà!d’una! iteració! sencera! pel! Front-End! d’aquesta! web! de! gestió! de! continguts,! i! tres! dies! pel! desenvolupament!de!tots!els!recursos!necessaris!de!la!API!de!botigues.! 6.9. Gestió(de(peces(de(roba( Com!a!administrador,!vull!poder!gestionar!quines!peces!de!roba!ofereix!cada!botiga,!per!poder! administrar!l’aplicació!sense!coneixements!d’informàtica.! Igual!que!a!l’apartat!2.9.!Gestió!de!botigues,!necessitem!un!sistema!per!gestionar!les!peces!de! roba!del!sistema.!Per!això!aprofitarem!el!mateix!mòdul!creat!en!aquest!apartat!per!a!afegir!un! mòdul!de!gestió!de!peces!de!roba.!Necessitarem!crear!el!mòdul!de!Front-End,!juntament!amb! els!recursos!de!la!API!REST!de!peces!de!roba.! El!cost!temporal!per!a!la!creació!del!mòdul!de!Front-End!serà!de!tres!dies,!i!el!cost!de!l’adaptació! de!la!API!de!peces!de!roba!per!a!acceptar!operacions!CRUD!serà!de!dos!dies!d’implementació,!i! un!dia!de!testing.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 19! 6.10. Informació(de(l’aplicació( Com!a!usuari!potencial,!vull!poder!obtenir!informació!de!l’aplicació!ràpidament,!per!decidir!si!la! descarrego!o!no.! Crearem!una!plataforma!estàtica!en!HTML!per!a!presentar!les!característiques!de!l’aplicació,! una!plataforma!web!senzilla.!Constarà!del!títol!de!l’aplicació,!una!petita!descripció,!alguns!mockups!presentant!les!funcionalitats!principals,!i!dades!de!contacte!amb!l’administrador.! El! cost! temporal! de! la! creació! i! publicació! d’aquesta! pàgina! estàtica! serà! d’una! setmana.! Recursos! !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 20! 7. Recursos( 7.1. Recursos(humans( Com!a!recursos!humans!comptarem!només!dues!persones!implicades!en!el!projecte:!el!director,! Pau!Fonseca!Casas;!i!jo,!Pau!Torrents,!el!desenvolupador!principal.!Donat!que!és!un!treball!de!fi! de!grau!individual,!tot!el!desenvolupament!serà!dut!a!terme!per!mi.! 7.2. Microserveis( Per!als!micoserveis,!utilitzarem!Microsoft!Azure.!La!plataforma!ens!ofereix!un!tipus!de!servei! anomenat!App!Service,!que!ens!permet!publicar!petits!serveis.!No!és!adient!per!a!aplicacions! monolítiques,! que! s’encarreguin! de! més! d’una! funcionalitat,! però! donat! que! utilitzarem! microserveis!és!la!opció!adient.!Aquests!App!Services!són!serveis!en!els!que!Azure!ja!ens!permet! publicar!una!aplicació!en!.Net.! Però!els!App!Service!són!gratuïts.!El!servei!que!haurem!de!pagar!és!la!màquina!on!s’allotjaran! aquests!serveis.!Ja!que!la!nostra!aplicació!en!un!principi!no!tindrà!un!gran!flux!d’usuaris!i!per! tant!és!difícil!sobrecarregar!els!servidors,!inclourem!tots!els!App!Service!en!un!anomenat!Service! Plan,!que!és!la!màquina!física!on!s’allotgen!els!serveis.! El!cost!de!mantenir!una!màquina!d’aquest!tipus,!en!la!seva!configuració!més!baixa!és!zero.!Azure! ofereix!un! tipus!molt!bàsic!de!Service!Plan!gratuït,!que!comparteix!recursos!amb!màquines! d’altres!usuaris.!Per!començar!i!fer!proves!ens!serà!suficient,!si!més!endavant!necessitem!escalar! la!màquina!podem!fer-ho!fàcilment.! 7.3. Aplicació(iOS( Per! a! desenvolupar! i! testejar! una! aplicació! iOS! no! cal! més! que! un! ordinador! amb! sistema! operatiu! MacOS! i! un! dispositiu! mòbil! iOS.! Ara! bé,! per! publicar-la! ens! farà! falta! un! compte! d’Apple!de!desenvolupador,!que!té!un!cost!de!99!dòlars!a!l’any!(uns!80!euros).!En!el!cas!que!en! aquest!projecte!sigui!estrictament!necessària!la!publicació!de!l’aplicació!s’haurà!d’assumir!el! cost.! 7.4. Aplicació(Android( Les!condicions!per!desenvolupar!en!dispositius!Android!són!similars!a!iOS;!també!podem!fer! proves! sense! cap! llicència,! però! per! publicar! l’aplicació! necessitem! un! compte! de! desenvolupador,!que!té!un!cost!de!25!dòlars!(uns!20!euros),!en!un!únic!pagament.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 21! 7.5. Aplicació(Universal(Windows(Platform( En!el!cas!de!les!aplicacions!d’UWP,!podem!generar!un!executable!a!partir!de!la!compilació!del! projecte,!pel!que!no!farà!falta!cap!llicència.!! 7.6. Pàgina(estàtica(d’informació(de(l’aplicació( Per! allotjar! la! pàgina! estàtica! d’informació! de! l’aplicació! necessitarem! una! plataforma! d’allotjament!de!pàgines!estàtiques.!Utilitzarem!Github!Pages,!que!ens!permetrà!allotjar!els! fitxers!estàtics!de!forma!gratuïta,!i!utilitzarem!un!compte!d’Amazon!per!a!registrar!un!domini!i! redirigir!les!peticions!al!servidor!de!Github!Pages.!El!cost!de!registrar!un!domini!“.com”!a!Amazon! és!de!12!euros!a!l’any.! !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 22! 8. Gestió(econòmica( Un!cop!fet!l’estudi!de!context!i!la!planificació!temporal!del!projecte,!haurem!de!fer!una!estimació! de!costos!del!desenvolupament.!Estimarem!costos!tant!humans!com!materials,!per!determinar! la!viabilitat!del!projecte.! 8.1. Consideracions(inicials( Per!estimar!els!costos!del!projecte,!partirem!de!la!planificació!dut!a!terme!a!l’apartat!anterior! (podem!trobar!el!diagrama!de!Gantt!corresponent!a!l’Annex).!A!partir!d’aquesta!planificació,! calcularem!els!costos!humans,!materials,!indirectes!i!imprevistos.! Comptarem!una!feina!de!3h!al!dia,!que!és!del!que!disposo,!a!un!preu!de!15€!/!h,!que!és!per!sobre! d’un!sou!baix!i!per!sota!del!sou!mitjà!de!mercat.! 8.2. Pressupost(de(recursos(humans( Com!a!recursos!humans!entenem!els!sous!dels!desenvolupadors!que!intervindran!al!projecte.! Estimarem!aquests!costos!considerant!un!sol!desenvolupador.!Dividirem!aquests!costos!segons! les!fases!marcades!al!diagrama!de!Gantt.! HISTÒRIES(D’USUARI( HORES( PREU/H( PREU(TOTAL( AUTENTICACIÓ! 45! 15!€! 675!€! INFORMACIÓ!SOBRE!ELS!CERTIFICATS! 3! 15!€! 45!€! LLISTAT!BOTIGUES! 12! 15!€! 180!€! FILTRAT!BOTIGUES! 5! 15!€! 75!€! CONSULTA!PECES!DE!ROBA!D’UNA!BOTIGA! 12! 15!€! 180!€! GEOLOCALITZACIÓ! 8! 15!€! 120!€! GESTIÓ!D’USUARI! 15! 15!€! 225!€! GESTIÓ!DE!BOTIGUES! 39! 15!€! 585!€! GESTIÓ!DE!PECES!DE!ROBA! 18! 15!€! 270!€! INFORMACIÓ!DE!L’APLICACIÓ! 15! 15!€! 225!€! TOTAL( 172( 15(€( 2.670(€( Taula'1:'Desglossament'de'costos'de'les'històries'd’usuari'del'projecte' Com!veiem,!el!cost!humà!total!és!de!2.670!€,!una!xifra!molt!adient!al!tipus!de!projecte.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 23! 8.3. Pressupost(de(hardware( Per!dur! a!terme! el!projecte,!haurem!d’estimar-ne!els!costos!materials,!com!l’ordinador!per! desenvolupar,!els!dispositius!mòbils!adients!i!la!infraestructura!web!necessària!per!allotjar!els! serveis.! Per!calcular!el!cost!dels!serveis,!considerarem!tots!els!serveis!allotjats!a!la!mateixa!màquina,!i! per!tant!estimarem!el!cost!d’aquesta!màquina!durant!els!mesos!de!desenvolupament,!a!raó!de! 30!€!al!mes,!durant!quatre!mesos.! PRODUCTE( PREU( UNITATS( ORDINADOR! 1.000!€! 1! MÒBIL!ANDROID! 400!€! 1! MÒBIL!IOS! 800!€! 1! SERVEIS! 120!€! 1! Taula'2:'Desglossament'de'costos'de'hardware' El!cost!total!material!és!de!2.320!€.! 8.4. Pressupost(de(software( Pel! que! fa! al! software,! utilitzarem! software! gratuït! tant! pel! desenvolupament! com! per! la! documentació.! PRODUCTE( PREU( VISUAL!STUDIO!PER!MAC! GRATUÏT! OPEN!OFFICE! GRATUÏT! BITBUCKET! GRATUÏT! Taula'3:'Desglossament'de'costos'de'software' Per!tant,!el!cost!total!del!software!és!de!0!€.! ! ! ! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 24! 8.5. Costos(indirectes( Pel!que!fa!als!costos!indirectes,!tindrem!en!compte!tant!la!electricitat!necessària,!com!l’internet,! a!més!dels!costos!necessaris!per!publicar!una!aplicació!tant!d’Android!com!d’iOS.! PRODUCTE( PREU( UNITATS( PREU(TOTAL( ELECTRICITAT! 0,07!€!kW/h! 300!kWh! 21!€! INTERNET! 50!€/mes! 4!mesos! 200!€! LLICÈNCIA!ANDROID! 25!€! 1! 25!€! LLICÈNCIA!IOS! 100!€! 1! 100!€! Taula'4:'Desglossament'de'costos'indirectes' Per!tant!el!cos!indirecte!total!és!de!346!€.! 8.6. Pressupost(total( PRODUCTE( PREU( RECURSOS(HUMANS( 2.670!€! HARDWARE( 2.320!€! SOFTWARE( 0!€! INDIRECTES( 346!€! Taula'5:'Desglossament'de'pressupostos'totals' Pressupost!total:!5.336!€.! !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 25! 9. Sostenibilitat(i(compromís(social( 9.1. Àrea(econòmica( El!projecte!és!viable!econòmicament,!sobretot!tenint!en!compte!que!hem!comptat!com!a!gestos! un!ordinador!i!una!sèrie!de!dispositius!dels!que!ja!comptem.!A!part!d’això,!el!preu!de!recursos! humans!s’adapta!prou!bé!al!pressupost!que!podria!oferir!una!consultoria!per!dur!a!terme!un! projecte!com!aquest.! 9.2. Àrea(social( Aquest!projecte!aspira!a!realitzar!un!impacte!social!molt!interessant,!i!és!que!pretén!conscienciar! a! la! població! de! la! necessitat! de! comprar! productes! sostenibles! enlloc! d’altres! de!més! convencionals,! proporcionant! una! plataforma! per! apropar! els! compradors! interessats! en! aquests!productes!amb!els!venedors.! 9.3. Àrea(ambiental( El!projecte!va!destinat!principalment!a!augmentar!la!conscienciació!social!a!favor!de!la!compra! de!productes!sostenibles.!Per!tant!aquest!projecte!pretén!causar!un!impacte!mediambiental! molt!favorable.! Si!es!segueix!amb!aquest!projecte!un!cop!finalitzat!el!curs,!pot!ajudar!a!la!societat!a!tenir!més!a! prop!recursos!que!els!permetin!col·laborar!amb!la!preservació!del!planeta.! 9.4. Puntuació(sostenibilitat( PRODUCTE( PPP( VIDA(ÚTIL( RISCOS( ECONÒMIC( 7!/!10! 10!/!20! -1!/!-20! AMBIENTAL( 9!/!10! 19!/!20! -7!/!-20! SOCIAL( 8!/!10! 19!/!20! 0!/!-20! RANG(SOSTENIBILITAT( 24!/!30! 48!/!60! -8!/!-60! ! Taula'6:'Puntuació'de'la'sostenibilitat'del'projecte' ! ! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 32! A! la! figura! 13! es! pot! veure! larquitectura! en! 4! capes! per! a! una! entitat! qualsevol.! El! que! aconseguim!amb!aquesta!arquitectura!és!el!següent:! • En!el!nostre!cas,!tenim!que!la!capa!d’accés!a!les!dades!és!implementada!amb!Entity! Framework,!però!com!que!la!capa!d’aplicació!accedeix!a!partir!de!la!interfície!del!domini! i!no!sap!realment!qui!l’està!implementant,!podem!canviar!fàcilment!l’accés!a!les!dades! per!un!altre!tipus,!canviant!només!la!capa!d’infrastructura,!sense!que!la!resta!de!capes! es!vegin!afectades.!Això!ho!aconseguim!amb!la!injecció!de!dependències,!de!la!que!en! parlarem!més!endavant.! • A!la!capa!d’aplicació!hi!trobem!una!caché!software,!que!es!recarrega!amb!les!dades!de! la!base!de!dades!cada!un!període!configurable.!El!servei!és!el!que!s’encarrega!si!li!fa!falta! utilitzar!la!caché!o!si!ha!d’accedir!directament!al!repositori.!D’aquesta!forma!optimitzem! els!temps!de!resposta!de!les!peticions,!i!ens!estalviem!gran!part!de!les!crides!a!bases!de! dades.! • A!la!capa!de!presentació,!hi!trobem!els!controladors!i!els!mappers,!que!s’encarreguen! d’aïllar!les!entitats!del!domini!de!l’exterior.!Converteixen!les!entitats!de!les!peticions!a! entitats!del!domini,!i!les!entitats!del!domini!a!entitats!de!resposta.!Si!en!algun!moment! necessitem! fer! algun! canvi! petit! al! domini! del! microservei,! podem! mantenir! els! contractes! amb! l’exterior! intactes,! evitant! així! canvis! a! les! aplicacions! mòbils.! Obviament! però,! un! canvi! gran! en! el! domini! requerirà! canvis! a! totes! les! parts! del! sistema.! Autorització( Per! a! implementar! l’autorització! de! les! aplicacions,! he! utilitzat! el! protocol! JWT! (JSON' Web' Token),!un!estàndard!per!transferir!tokens!segurs!amb!els!permisos!incrustats.!D’aquesta!forma,! en!autenticar!a!l’usuari,!només!s’ha!de!desfer!el!token!per!saber!quin!usuari!està!fent!la!petició! i!quins!permisos!té.! Aquest! token! conté! 3! parts! separades! per! un! punt,! concatenades! en! la! forma! “capçalera.cos.signatura”:! • Capçalera:!A!la!capçalera!s’hi!indica!el!tipus!de!token!i!quin!algoritme!s’ha!utilitzat!per! codificar-lo.!La!capçalera!es!codifica!en!Base64.! • Cos:!Conté!la!informació!útil.!En!el!nostre!cas,!l’email!de!l’usuari!i!els!rols!que!té.!El!cos! es!codifica!en!Base64.! • Signatura:!La!signa!és!un!hash!generat!a!partir!de!la!capçalera!codificada,!el!cos!codificat,! una!clau!secreta!i!l’algoritme!introduït!a!la!capçalera.! Amb!aquest!token!permetem!les!APIs!identificar!l’usuari!que!està!fent!la!petició,!i!donar-li!accés! o! refusar-li! segons! els! permisos! que! té.! Aquest! tipus! d’autorització! ens! permet! identificar! l’usuari!sense!haver!de!buscar!l’usuari!al!sistema.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 33! Injecció(de(dependències( La!injecció!de!dependències!consisteix!a!delegar!la! implementació! d’un!servei!a!un!objecte! extern.!Això!significa!que,!en!una!classe,!la!responsabilitat!de!saber!qui!implementa!un!servei! que!està!fent!servir!no!recau!en!aquesta!classe,!sinó!en!un!objecte!extern.!En!el!nostre!cas,!la! WebAPI!decideix!quines!classes!farà!servir!per!implementar!les!diferents!interfícies.! Tots!els!serveis!dins!de!l’aplicació!són!utilitzats!mitjançant!interfícies.!D’aquesta!forma,!com! dèiem!a!l’apartat!d’arquitectura,!la!responsabilitat!de!quin!repositori!fa!servir!la!capa!d’aplicació! no!recau!en!la!mateixa!capa,!sinó!en!l’agent!final!que!utilitza!tots!els!serveis.!Si!alguna!altra! aplicació!vulgues!utilitzar!la!mateixa!capa!d’aplicació!o!el!mateix!domini,!podria!escollir!un!altre! sistema!de!repositori.! A!més,!això!ens!permet!testejar!individualment!totes!les!classes.!Com!utilitzen!serveis!injectats! mitjançant!la!constructora!de!la!classe,!podem!falsejar-los!amb!mocks!injectant!aquests!a!la! classe.! Interacció(entre(microserveis( Donat!que!tenim!microserveis!que!requereixen!de!fer!crides!a!altres!microserveis,!ens!fa!falta! un!sistema!de!centralitzar!aquestes!crides.!Amb!crides!crues!entre!servidors,!en!el!cas!que! canviéssim!algun!contracte!d’algun!recurs!d’un!microservei,!hauríem!de!canviar!totes!les!crides.! Per! això! he! implementat! un! SDK! (Software' Development' Kit)! que! encapsula! totes! aquestes! crides.!Hi!ha!un!SDK!per!cada!un!dels!microserveis!que!es!fan!servir!internament,!així!si!hi!ha!un! sistema!que!requereix!d’accedir!a!un!d’aquests!microserveis,!pot!fer!servir!el!SDK!adient.! Testeig( Per!mantenir!els!microserveis!fiables,!i!assegurar-nos!que!en!una!modificació!no!trenquem!el! sistema,! he! testejat! tots! els!recursos! de! tots! els! microserveis.! En! el! procés! de! publicació,! mitjançant!el!portal!de!Visual!Studio!Online,!podem!afegir!un!últim!pas!després!de!publicar!un! microservei!per!executar!els!tests.!D’aquesta!forma,!cada!cop!que!pugem!codi,!ens!assegurem! que!tot!segueix!funcionant.! !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 34! 11. Aplicacions( 11.1. Requisits( Seguint!amb!la!filosofia!.NET,!he!utilitzat!el!framework!Xamarin!per!desenvolupar!les!aplicacions! d’Android,!iOS!i!Windows.!Xamarin!m’ha!permès!reutilitzar!tot!el!codi!de!lògica!de!l’aplicació,!i! gran!part!del!codi!que!gestiona!la!part!visual,!a!excepció!d’algunes!parts!que!requerien!d’una! delegació!als!projectes!natius.! Ho! he! desenvolupat! també! utilitzant! Visual! Studio! per! Mac,! però! he! hagut! de! muntar! una! màquina!virtual!amb!Windows!per!desenvolupar!la!part!de!l’aplicació!de!Windows,!ja!que!no!es! pot!compilar!una!aplicació!universal!de!Windows!en!un!sistema!macOS.! He!utilitzat!la!versió!de!Xamarin!2.5,!que!és!bastant!estable.!Existia!també!la!versió!3.0,!però! encara!estava!en!desenvolupament!a!l’inici!del!desenvolupament!d’aquest!projecte.! Xamarin!genera!tres!projectes,!un!per!Android,!un!per!iOS!i!un!per!Windows.!A!més,!genera!un! projecte!comú!que!compartirà!gran!part!del!codi.!Aquest!projecte!pot!ser!desenvolupat!en!varis! tipus,!però!l’he!generat!en!.netstandard,!així!utilitzarem!les!últimes!tecnologies!de!.NET!Core.! 11.2. Disseny( L’aplicació!consta!de!varis!dissenys,!depenent!de!la!plataforma!de!destí.!Aquest!és!un!exemple! de!la!pàgina!d’inici!en!els!tres!dispositius:! ! ! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 35! ! Figura'14:'Pàgina'inicial'de'l'aplicació'a'les'diverses'plataformes' Pel!disseny!del!menú!principal!s’han!respectat!els!estàndards!de!cada!plataforma:!Menú!i!detall! per! Android! i! Windows,! i! menú! de! pestanyes! per! iOS.! Com! podem! veure! es! pot! accedir! directament!a!l’aplicació!sense!autenticar-se;!només!algunes!de!les!funcionalitats!requereixen! autenticació.! A!continuació!tenim,!per!cada!funcionalitat!principal,!els!dissenys!de!les!vistes!corresponents.! Mapa( El!mapa!és!la!pàgina!on!l’usuari!pot!veure!ràpidament!quines!botigues!registrades!al!sistema!té! més!a!prop.!Al!clicar!una!botiga!al!mapa,!l’aplicació!ens!porta!al!detall!de!la!botiga.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 36! ! Figura'15:'Pàgina'del'mapa'de'l'aplicació' Llistat(de(les(botigues( La!pàgina!de!les!botigues!conté!un!llistat!de!les!botigues!del!sistema!ordenades!per!proximitat! a!l’usuari.!Cada!botiga!conté!una!fotografia!de!la!botiga,!l’adreça,!la!distància!a!l’usuari!i!una! icona!que!marca!si!aquesta!botiga!està!guardada!com!a!interessant!per!a!l’usuari!identificat.!Si! l’usuari!no!està!identificat,!en!pitjar! el!botó!se’l!porta!a!la!pàgina!d’inici!de! sessió;!i!si!està! identificat,!s’afegeix!a!la!llista!de!favorits!de!l’usuari.! ! Figura'16:'Pàgina'amb'el'llistat'de'les'botigues'disponibles' ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 37! A!més,!com!podem!veure!a!la!imatge,!la!pàgina!compta!amb!un!buscador,!que!filtra!les!botigues! pel!seu!nom.!En!iteracions!properes!s’intentarà!afegir!un!filtre!segons!les!peces!de!roba!que! ofereixen,!però!les!iteracions!actuals!no!ho!han!permès.! Favorits( La!pàgina!de!favorits!conté!la!llista!de!botigues!marcades!com!a!favorites!per!l’usuari!identificat.! Aquesta!és! una!pàgina!que!requereix!l’autenticació!de! l’usuari,!i!per!tant!si!encara!no!s’ha! identificat!es!mostrarà!una!pàgina!advertint-ho,!com!es!pot!veure!a!la!figura!17.! ! Figura'17:'Pàgina'que'requereix'autenticació' En!pitjar!al!botó!Accedir,!es!mostra!la!pàgina!d’autenticació.!Si!l’usuari!sí!que!està!identificat,!se! li!mostren!les!botigues!que!ha!marcat!com!favorites.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 38! ! Figura'18:'Pàgina'de'favorits'de'l'aplicació' Com! veiem,! surten! marcades! com! favorites! totes! les! botigues.! En! clicar-ne! una,! l’aplicació! mostra!la!pàgina!de!detall!de!la!botiga,!i!en!clicar!l’icona!de!favorit!d’una!botiga,!desapareix!de! la!llista.! Detall(botiga( La!pàgina!de!detall!de!la!botiga!mostra!el!seu!nom,!la!foto!principal,!dos!botons!per!recomanar! la!botiga! (tant!positivament!com! negativament)!i!la! llista! de! peces!de!roba!disponibles! a!la! botiga,!amb!les!seves!talles!i!categories!sostenibles.!En!pitjar!un!dels!dos!botons!de!recomanar,! si!l’usuari!està!identificat!es!recomana!la!botiga;!si!no,!se!li!mostra!la!pàgina!d’autenticació.! ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 39! ! Figura'19:'Pàgina'de'detall'd'una'botiga' !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 40! Perfil( La!pàgina!de!perfil!permet!visualitzar!les!dades!de!l’usuari!autenticat.!Si!no!està!autenticat,!en! pitjar!el!botó!del!menú!es!mostra!la!pàgina!que!indica!que!fa!falta!autenticació.! ! Figura'20:'Pàgina'd'informació'de'l'usuari' A!la!pàgina!es!mostra!la!imatge!de!l’usuari,!el!seu!email,!el!nom!i!el!cognom,!els!seus!trofeus!i! els!seus!rols.! !( ! ! Pau!Torrents!i!Gallego! Aplicació(gamificada(per(a(botigues(de(roba(sostenible( ! 41! Informació(sobre(els(certificats( La! pàgina! d’informació! sobre! els! certificats! ofereix! una! llista! dels! certificats! disponibles! al! sistema,!amb!el!seu!nom!i!una!petita!descripció.!És!una!pàgina!merament!informativa.! ! Figura'21:'Pàgina'd'informació'dels'certificats' Gestió( Les!pàgines!de!gestió!només!estaran!disponibles!per!la!plataforma!Windows,!donat!que!la!gestió! des!d’un!dispositiu!mòbil!no!és!gaire!còmode.!Els!administradors!hi!podran!accedir!mitjançant! el!botó!Gestió!del!menú.! A!continuació!hi!ha!un!exemple!d’una!pàgina!de!creació!de!botigues,!on!també!hi!podem!afegir! les!peces!de!roba!que!s’hi!ofereixen.!